coder · aslilac · Jan 22, 2024 · Jan 19, 2024 · Jan 19, 2024 · Jan 22, 2024
diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml
@@ -170,7 +170,6 @@ rules:
   react/jsx-uses-react: "off"
   react/no-unknown-property: ["error", { ignore: ["css"] }]
   react/react-in-jsx-scope: "off"
-  "unicorn/explicit-length-check": "error"
   # https://github.com/jsx-eslint/eslint-plugin-react/issues/2628#issuecomment-984160944
   no-restricted-syntax:
     [

diff --git a/site/src/App.tsx b/site/src/App.tsx
@@ -3,7 +3,7 @@ import { type FC, type ReactNode, useEffect, useState } from "react";
 import { HelmetProvider } from "react-helmet-async";
 import { AppRouter } from "./AppRouter";
 import { ThemeProvider } from "./contexts/ThemeProvider";
-import { AuthProvider } from "./contexts/AuthProvider/AuthProvider";
+import { AuthProvider } from "./contexts/auth/AuthProvider";
 import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary";
 import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar";
 import "./theme/globalFonts";

diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -5,17 +5,17 @@ import {
   BrowserRouter as Router,
   Navigate,
 } from "react-router-dom";
+import { RequireAuth } from "./contexts/auth/RequireAuth";
 import { DashboardLayout } from "./components/Dashboard/DashboardLayout";
-import { DeploySettingsLayout } from "./pages/DeploySettingsPage/DeploySettingsLayout";
 import { FullScreenLoader } from "./components/Loader/FullScreenLoader";
-import { RequireAuth } from "./components/RequireAuth/RequireAuth";
-import { UsersLayout } from "./pages/UsersPage/UsersLayout";
 import AuditPage from "./pages/AuditPage/AuditPage";
+import { DeploySettingsLayout } from "./pages/DeploySettingsPage/DeploySettingsLayout";
 import LoginPage from "./pages/LoginPage/LoginPage";
 import { SetupPage } from "./pages/SetupPage/SetupPage";
 import { TemplateLayout } from "./pages/TemplatePage/TemplateLayout";
 import { HealthLayout } from "./pages/HealthPage/HealthLayout";
 import TemplatesPage from "./pages/TemplatesPage/TemplatesPage";
+import { UsersLayout } from "./pages/UsersPage/UsersLayout";
 import UsersPage from "./pages/UsersPage/UsersPage";
 import WorkspacesPage from "./pages/WorkspacesPage/WorkspacesPage";
 import UserSettingsLayout from "./pages/UserSettingsPage/Layout";

diff --git a/site/src/components/Dashboard/DashboardLayout.tsx b/site/src/components/Dashboard/DashboardLayout.tsx
@@ -4,10 +4,10 @@ import Button from "@mui/material/Button";
 import InfoOutlined from "@mui/icons-material/InfoOutlined";
 import { type FC, type HTMLAttributes, Suspense } from "react";
 import { Outlet } from "react-router-dom";
+import { usePermissions } from "contexts/auth/usePermissions";
 import { LicenseBanner } from "components/Dashboard/LicenseBanner/LicenseBanner";
 import { Loader } from "components/Loader/Loader";
 import { ServiceBanner } from "components/Dashboard/ServiceBanner/ServiceBanner";
-import { usePermissions } from "hooks/usePermissions";
 import { dashboardContentBottomPadding } from "theme/constants";
 import { docs } from "utils/docs";
 import { Navbar } from "./Navbar/Navbar";

diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBanner.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBanner.tsx
@@ -1,9 +1,9 @@
 import { type FC } from "react";
 import { useQuery } from "react-query";
+import { health } from "api/queries/debug";
 import { deploymentStats } from "api/queries/deployment";
-import { usePermissions } from "hooks/usePermissions";
+import { usePermissions } from "contexts/auth/usePermissions";
 import { DeploymentBannerView } from "./DeploymentBannerView";
-import { health } from "api/queries/debug";
 
 export const DeploymentBanner: FC = () => {
   const permissions = usePermissions();

diff --git a/site/src/components/Dashboard/Navbar/Navbar.tsx b/site/src/components/Dashboard/Navbar/Navbar.tsx
@@ -1,10 +1,10 @@
 import { type FC } from "react";
-import { useAuth } from "contexts/AuthProvider/AuthProvider";
+import { useAuth } from "contexts/auth/useAuth";
+import { useMe } from "contexts/auth/useMe";
+import { usePermissions } from "contexts/auth/usePermissions";
 import { useProxy } from "contexts/ProxyContext";
 import { useDashboard } from "components/Dashboard/DashboardProvider";
 import { useFeatureVisibility } from "hooks/useFeatureVisibility";
-import { useMe } from "hooks/useMe";
-import { usePermissions } from "hooks/usePermissions";
 import { NavbarView } from "./NavbarView";
 
 export const Navbar: FC = () => {

diff --git a/site/src/components/Dashboard/Navbar/NavbarView.tsx b/site/src/components/Dashboard/Navbar/NavbarView.tsx
@@ -7,19 +7,19 @@ import Button from "@mui/material/Button";
 import MenuItem from "@mui/material/MenuItem";
 import KeyboardArrowDownOutlined from "@mui/icons-material/KeyboardArrowDownOutlined";
 import MenuIcon from "@mui/icons-material/Menu";
+import { visuallyHidden } from "@mui/utils";
 import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
 import { type FC, type ReactNode, useRef, useState } from "react";
 import { NavLink, useLocation, useNavigate } from "react-router-dom";
 import { BUTTON_SM_HEIGHT, navHeight } from "theme/constants";
 import type * as TypesGen from "api/typesGenerated";
+import { usePermissions } from "contexts/auth/usePermissions";
 import type { ProxyContextValue } from "contexts/ProxyContext";
+import { Abbr } from "components/Abbr/Abbr";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { ProxyStatusLatency } from "components/ProxyStatusLatency/ProxyStatusLatency";
 import { CoderIcon } from "components/Icons/CoderIcon";
-import { usePermissions } from "hooks/usePermissions";
 import { UserDropdown } from "./UserDropdown/UserDropdown";
-import { visuallyHidden } from "@mui/utils";
-import { Abbr } from "components/Abbr/Abbr";
 
 export const USERS_LINK = `/users?filter=${encodeURIComponent(
   "status:active",

diff --git a/site/src/components/Filter/UserFilter.tsx b/site/src/components/Filter/UserFilter.tsx
@@ -1,10 +1,10 @@
 import { type FC } from "react";
-import { useMe } from "hooks";
-import { BaseOption } from "./options";
 import { getUsers } from "api/api";
-import { UseFilterMenuOptions, useFilterMenu } from "./menu";
+import { useMe } from "contexts/auth/useMe";
+import { UserAvatar } from "../UserAvatar/UserAvatar";
 import { FilterSearchMenu, OptionItem } from "./filter";
-import { UserAvatar } from "components/UserAvatar/UserAvatar";
+import { UseFilterMenuOptions, useFilterMenu } from "./menu";
+import { BaseOption } from "./options";
 
 export type UserOption = BaseOption & {
   avatarUrl?: string;

diff --git a/site/src/contexts/ProxyContext.tsx b/site/src/contexts/ProxyContext.tsx
@@ -1,17 +1,17 @@
-import { useQuery } from "react-query";
-import { getWorkspaceProxies, getWorkspaceProxyRegions } from "api/api";
-import { Region, WorkspaceProxy } from "api/typesGenerated";
 import {
   createContext,
-  FC,
-  PropsWithChildren,
+  type FC,
+  type PropsWithChildren,
   useCallback,
   useContext,
   useEffect,
   useState,
 } from "react";
+import { useQuery } from "react-query";
+import { getWorkspaceProxies, getWorkspaceProxyRegions } from "api/api";
+import type { Region, WorkspaceProxy } from "api/typesGenerated";
+import { usePermissions } from "contexts/auth/usePermissions";
 import { ProxyLatencyReport, useProxyLatency } from "./useProxyLatency";
-import { usePermissions } from "hooks/usePermissions";
 
 export interface ProxyContextValue {
   // proxy is **always** the workspace proxy that should be used.

diff --git a/site/src/contexts/ThemeProvider.tsx b/site/src/contexts/ThemeProvider.tsx
@@ -14,7 +14,7 @@ import {
   useState,
 } from "react";
 import themes, { DEFAULT_THEME, type Theme } from "theme";
-import { AuthContext } from "./AuthProvider/AuthProvider";
+import { AuthContext } from "./auth/AuthProvider";
 
 /**
  *

diff --git a/...rc/contexts/AuthProvider/AuthProvider.tsx → site/src/contexts/auth/AuthProvider.tsx b/...rc/contexts/AuthProvider/AuthProvider.tsx → site/src/contexts/auth/AuthProvider.tsx
@@ -3,7 +3,6 @@ import {
   type FC,
   type PropsWithChildren,
   useCallback,
-  useContext,
 } from "react";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { checkAuthorization } from "api/queries/authCheck";
@@ -129,13 +128,3 @@ export const AuthProvider: FC<PropsWithChildren> = ({ children }) => {
     </AuthContext.Provider>
   );
 };
-
-export const useAuth = () => {
-  const context = useContext(AuthContext);
-
-  if (!context) {
-    throw new Error("useAuth should be used inside of <AuthProvider />");
-  }
-
-  return context;
-};
diff --git a/...mponents/RequireAuth/RequireAuth.test.tsx → site/src/contexts/auth/RequireAuth.test.tsx b/...mponents/RequireAuth/RequireAuth.test.tsx → site/src/contexts/auth/RequireAuth.test.tsx
diff --git a/...rc/components/RequireAuth/RequireAuth.tsx → site/src/contexts/auth/RequireAuth.tsx b/...rc/components/RequireAuth/RequireAuth.tsx → site/src/contexts/auth/RequireAuth.tsx
@@ -3,10 +3,10 @@ import { type FC, useEffect } from "react";
 import { Outlet, Navigate, useLocation } from "react-router-dom";
 import { embedRedirect } from "utils/redirect";
 import { isApiError } from "api/errors";
-import { useAuth } from "contexts/AuthProvider/AuthProvider";
 import { ProxyProvider } from "contexts/ProxyContext";
-import { DashboardProvider } from "../Dashboard/DashboardProvider";
-import { FullScreenLoader } from "../Loader/FullScreenLoader";
+import { DashboardProvider } from "components/Dashboard/DashboardProvider";
+import { FullScreenLoader } from "components/Loader/FullScreenLoader";
+import { useAuth } from "./useAuth";
 
 export const RequireAuth: FC = () => {
   const { signOut, isSigningOut, isSignedOut, isSignedIn, isLoading } =

diff --git a/...s/RequirePermission/RequirePermission.tsx → site/src/contexts/auth/RequirePermission.tsx b/...s/RequirePermission/RequirePermission.tsx → site/src/contexts/auth/RequirePermission.tsx
@@ -1,8 +1,8 @@
-import { FC } from "react";
+import { type FC, type ReactNode } from "react";
 import { Navigate } from "react-router-dom";
 
 export interface RequirePermissionProps {
-  children: JSX.Element;
+  children?: ReactNode;
   isFeatureVisible: boolean;
 }
 
@@ -16,6 +16,6 @@ export const RequirePermission: FC<RequirePermissionProps> = ({
   if (!isFeatureVisible) {
     return <Navigate to="/workspaces" />;
   } else {
-    return children;
+    return <>{children}</>;
   }
 };
diff --git a/...src/contexts/AuthProvider/permissions.tsx → site/src/contexts/auth/permissions.tsx b/...src/contexts/AuthProvider/permissions.tsx → site/src/contexts/auth/permissions.tsx
diff --git a/site/src/contexts/auth/useAuth.ts b/site/src/contexts/auth/useAuth.ts
@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { AuthContext } from "./AuthProvider";
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+
+  if (!context) {
+    throw new Error("useAuth should be used inside of <AuthProvider />");
+  }
+
+  return context;
+};
diff --git a/site/src/hooks/useMe.ts → site/src/contexts/auth/useMe.ts b/site/src/hooks/useMe.ts → site/src/contexts/auth/useMe.ts
@@ -1,5 +1,5 @@
 import type { User } from "api/typesGenerated";
-import { useAuth } from "contexts/AuthProvider/AuthProvider";
+import { useAuth } from "./useAuth";
 
 export const useMe = (): User => {
   const { user } = useAuth();

diff --git a/site/src/contexts/auth/useOrganizationId.ts b/site/src/contexts/auth/useOrganizationId.ts
@@ -0,0 +1,11 @@
+import { useMe } from "./useMe";
+
+export const useOrganizationId = (): string => {
+  const me = useMe();
+
+  if (me.organization_ids.length < 1) {
+    throw new Error("User is not a member of any organizations");
+  }
+
+  return me.organization_ids[0];
+};
diff --git a/site/src/hooks/usePermissions.ts → site/src/contexts/auth/usePermissions.ts b/site/src/hooks/usePermissions.ts → site/src/contexts/auth/usePermissions.ts
@@ -1,5 +1,5 @@
-import { useAuth } from "contexts/AuthProvider/AuthProvider";
-import type { Permissions } from "contexts/AuthProvider/permissions";
+import { useAuth } from "./useAuth";
+import type { Permissions } from "./permissions";
 
 export const usePermissions = (): Permissions => {
   const { permissions } = useAuth();

diff --git a/site/src/hooks/index.ts b/site/src/hooks/index.ts
@@ -2,8 +2,5 @@ export * from "./useClickable";
 export * from "./useClickableTableRow";
 export * from "./useClipboard";
 export * from "./useFeatureVisibility";
-export * from "./useMe";
-export * from "./useOrganizationId";
 export * from "./usePagination";
-export * from "./usePermissions";
 export * from "./useTab";
diff --git a/site/src/hooks/useOrganizationId.ts b/site/src/hooks/useOrganizationId.ts
diff --git a/site/src/pages/CreateTemplatePage/DuplicateTemplateView.tsx b/site/src/pages/CreateTemplatePage/DuplicateTemplateView.tsx
@@ -1,4 +1,6 @@
+import { type FC } from "react";
 import { useQuery, useMutation } from "react-query";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import {
   templateVersionLogs,
   templateByName,
@@ -7,15 +9,14 @@ import {
   JobError,
   createTemplate,
 } from "api/queries/templates";
+import { useOrganizationId } from "contexts/auth/useOrganizationId";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
-import { useOrganizationId } from "hooks";
-import { useNavigate, useSearchParams } from "react-router-dom";
-import { CreateTemplateForm } from "./CreateTemplateForm";
 import { Loader } from "components/Loader/Loader";
 import { useDashboard } from "components/Dashboard/DashboardProvider";
+import { CreateTemplateForm } from "./CreateTemplateForm";
 import { firstVersionFromFile, getFormPermissions, newTemplate } from "./utils";
 
-export const DuplicateTemplateView = () => {
+export const DuplicateTemplateView: FC = () => {
   const navigate = useNavigate();
   const organizationId = useOrganizationId();
   const [searchParams] = useSearchParams();

diff --git a/site/src/pages/CreateTemplatePage/ImportStarterTemplateView.tsx b/site/src/pages/CreateTemplatePage/ImportStarterTemplateView.tsx
@@ -1,24 +1,25 @@
+import { type FC } from "react";
 import { useQuery, useMutation } from "react-query";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import {
   templateVersionLogs,
   JobError,
   createTemplate,
   templateExamples,
   templateVersionVariables,
 } from "api/queries/templates";
+import { useOrganizationId } from "contexts/auth/useOrganizationId";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
-import { useOrganizationId } from "hooks";
-import { useNavigate, useSearchParams } from "react-router-dom";
-import { CreateTemplateForm } from "./CreateTemplateForm";
 import { Loader } from "components/Loader/Loader";
 import { useDashboard } from "components/Dashboard/DashboardProvider";
+import { CreateTemplateForm } from "./CreateTemplateForm";
 import {
   firstVersionFromExample,
   getFormPermissions,
   newTemplate,
 } from "./utils";
 
-export const ImportStarterTemplateView = () => {
+export const ImportStarterTemplateView: FC = () => {
   const navigate = useNavigate();
   const organizationId = useOrganizationId();
   const [searchParams] = useSearchParams();

diff --git a/site/src/pages/CreateTemplatePage/UploadTemplateView.tsx b/site/src/pages/CreateTemplatePage/UploadTemplateView.tsx
@@ -1,16 +1,16 @@
 import { useQuery, useMutation } from "react-query";
+import { useNavigate } from "react-router-dom";
 import {
   templateVersionLogs,
   JobError,
   createTemplate,
   templateVersionVariables,
 } from "api/queries/templates";
-import { useOrganizationId } from "hooks";
-import { useNavigate } from "react-router-dom";
-import { CreateTemplateForm } from "./CreateTemplateForm";
+import { uploadFile } from "api/queries/files";
+import { useOrganizationId } from "contexts/auth/useOrganizationId";
 import { useDashboard } from "components/Dashboard/DashboardProvider";
+import { CreateTemplateForm } from "./CreateTemplateForm";
 import { firstVersionFromFile, getFormPermissions, newTemplate } from "./utils";
-import { uploadFile } from "api/queries/files";
 
 export const UploadTemplateView = () => {
   const navigate = useNavigate();

diff --git a/site/src/pages/CreateUserPage/CreateUserPage.tsx b/site/src/pages/CreateUserPage/CreateUserPage.tsx
@@ -1,13 +1,13 @@
-import { useOrganizationId } from "hooks/useOrganizationId";
-import { FC } from "react";
+import { type FC } from "react";
 import { Helmet } from "react-helmet-async";
+import { useMutation, useQuery, useQueryClient } from "react-query";
 import { useNavigate } from "react-router-dom";
-import { CreateUserForm } from "./CreateUserForm";
-import { Margins } from "components/Margins/Margins";
 import { pageTitle } from "utils/page";
-import { useMutation, useQuery, useQueryClient } from "react-query";
 import { authMethods, createUser } from "api/queries/users";
+import { useOrganizationId } from "contexts/auth/useOrganizationId";
+import { Margins } from "components/Margins/Margins";
 import { displaySuccess } from "components/GlobalSnackbar/utils";
+import { CreateUserForm } from "./CreateUserForm";
 
 export const Language = {
   unknownError: "Oops, an unknown error occurred.",