Skip to content

Commit f74ef14

Browse files
aslilacaslilac
authored
refactor: reorganize auth components and hooks (#11717)
1 parent f02561a commit f74ef14

File tree

57 files changed

+254
-252
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+254
-252
lines changed

‎site/.eslintrc.yaml

-1
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,6 @@ rules:
170170
react/jsx-uses-react: "off"
171171
react/no-unknown-property: ["error", { ignore: ["css"] }]
172172
react/react-in-jsx-scope: "off"
173-
"unicorn/explicit-length-check": "error"
174173
# https://github.com/jsx-eslint/eslint-plugin-react/issues/2628#issuecomment-984160944
175174
no-restricted-syntax:
176175
[

‎site/src/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { type FC, type ReactNode, useEffect, useState } from "react";
33
import { HelmetProvider } from "react-helmet-async";
44
import { AppRouter } from "./AppRouter";
55
import { ThemeProvider } from "./contexts/ThemeProvider";
6-
import { AuthProvider } from "./contexts/AuthProvider/AuthProvider";
6+
import { AuthProvider } from "./contexts/auth/AuthProvider";
77
import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary";
88
import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar";
99
import "./theme/globalFonts";

‎site/src/AppRouter.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,17 @@ import {
55
BrowserRouter as Router,
66
Navigate,
77
} from "react-router-dom";
8+
import { RequireAuth } from "./contexts/auth/RequireAuth";
89
import { DashboardLayout } from "./components/Dashboard/DashboardLayout";
9-
import { DeploySettingsLayout } from "./pages/DeploySettingsPage/DeploySettingsLayout";
1010
import { FullScreenLoader } from "./components/Loader/FullScreenLoader";
11-
import { RequireAuth } from "./components/RequireAuth/RequireAuth";
12-
import { UsersLayout } from "./pages/UsersPage/UsersLayout";
1311
import AuditPage from "./pages/AuditPage/AuditPage";
12+
import { DeploySettingsLayout } from "./pages/DeploySettingsPage/DeploySettingsLayout";
1413
import LoginPage from "./pages/LoginPage/LoginPage";
1514
import { SetupPage } from "./pages/SetupPage/SetupPage";
1615
import { TemplateLayout } from "./pages/TemplatePage/TemplateLayout";
1716
import { HealthLayout } from "./pages/HealthPage/HealthLayout";
1817
import TemplatesPage from "./pages/TemplatesPage/TemplatesPage";
18+
import { UsersLayout } from "./pages/UsersPage/UsersLayout";
1919
import UsersPage from "./pages/UsersPage/UsersPage";
2020
import WorkspacesPage from "./pages/WorkspacesPage/WorkspacesPage";
2121
import UserSettingsLayout from "./pages/UserSettingsPage/Layout";

‎site/src/components/Dashboard/DashboardLayout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import Button from "@mui/material/Button";
44
import InfoOutlined from "@mui/icons-material/InfoOutlined";
55
import { type FC, type HTMLAttributes, Suspense } from "react";
66
import { Outlet } from "react-router-dom";
7+
import { usePermissions } from "contexts/auth/usePermissions";
78
import { LicenseBanner } from "components/Dashboard/LicenseBanner/LicenseBanner";
89
import { Loader } from "components/Loader/Loader";
910
import { ServiceBanner } from "components/Dashboard/ServiceBanner/ServiceBanner";
10-
import { usePermissions } from "hooks/usePermissions";
1111
import { dashboardContentBottomPadding } from "theme/constants";
1212
import { docs } from "utils/docs";
1313
import { Navbar } from "./Navbar/Navbar";

‎site/src/components/Dashboard/DeploymentBanner/DeploymentBanner.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { type FC } from "react";
22
import { useQuery } from "react-query";
3+
import { health } from "api/queries/debug";
34
import { deploymentStats } from "api/queries/deployment";
4-
import { usePermissions } from "hooks/usePermissions";
5+
import { usePermissions } from "contexts/auth/usePermissions";
56
import { DeploymentBannerView } from "./DeploymentBannerView";
6-
import { health } from "api/queries/debug";
77

88
export const DeploymentBanner: FC = () => {
99
const permissions = usePermissions();

‎site/src/components/Dashboard/Navbar/Navbar.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { type FC } from "react";
2-
import { useAuth } from "contexts/AuthProvider/AuthProvider";
2+
import { useAuth } from "contexts/auth/useAuth";
3+
import { useMe } from "contexts/auth/useMe";
4+
import { usePermissions } from "contexts/auth/usePermissions";
35
import { useProxy } from "contexts/ProxyContext";
46
import { useDashboard } from "components/Dashboard/DashboardProvider";
57
import { useFeatureVisibility } from "hooks/useFeatureVisibility";
6-
import { useMe } from "hooks/useMe";
7-
import { usePermissions } from "hooks/usePermissions";
88
import { NavbarView } from "./NavbarView";
99

1010
export const Navbar: FC = () => {

‎site/src/components/Dashboard/Navbar/NavbarView.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,19 @@ import Button from "@mui/material/Button";
77
import MenuItem from "@mui/material/MenuItem";
88
import KeyboardArrowDownOutlined from "@mui/icons-material/KeyboardArrowDownOutlined";
99
import MenuIcon from "@mui/icons-material/Menu";
10+
import { visuallyHidden } from "@mui/utils";
1011
import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
1112
import { type FC, type ReactNode, useRef, useState } from "react";
1213
import { NavLink, useLocation, useNavigate } from "react-router-dom";
1314
import { BUTTON_SM_HEIGHT, navHeight } from "theme/constants";
1415
import type * as TypesGen from "api/typesGenerated";
16+
import { usePermissions } from "contexts/auth/usePermissions";
1517
import type { ProxyContextValue } from "contexts/ProxyContext";
18+
import { Abbr } from "components/Abbr/Abbr";
1619
import { displayError } from "components/GlobalSnackbar/utils";
1720
import { ProxyStatusLatency } from "components/ProxyStatusLatency/ProxyStatusLatency";
1821
import { CoderIcon } from "components/Icons/CoderIcon";
19-
import { usePermissions } from "hooks/usePermissions";
2022
import { UserDropdown } from "./UserDropdown/UserDropdown";
21-
import { visuallyHidden } from "@mui/utils";
22-
import { Abbr } from "components/Abbr/Abbr";
2323

2424
export const USERS_LINK = `/users?filter=${encodeURIComponent(
2525
"status:active",

‎site/src/components/Filter/UserFilter.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { type FC } from "react";
2-
import { useMe } from "hooks";
3-
import { BaseOption } from "./options";
42
import { getUsers } from "api/api";
5-
import { UseFilterMenuOptions, useFilterMenu } from "./menu";
3+
import { useMe } from "contexts/auth/useMe";
4+
import { UserAvatar } from "../UserAvatar/UserAvatar";
65
import { FilterSearchMenu, OptionItem } from "./filter";
7-
import { UserAvatar } from "components/UserAvatar/UserAvatar";
6+
import { UseFilterMenuOptions, useFilterMenu } from "./menu";
7+
import { BaseOption } from "./options";
88

99
export type UserOption = BaseOption & {
1010
avatarUrl?: string;

‎site/src/contexts/ProxyContext.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
import { useQuery } from "react-query";
2-
import { getWorkspaceProxies, getWorkspaceProxyRegions } from "api/api";
3-
import { Region, WorkspaceProxy } from "api/typesGenerated";
41
import {
52
createContext,
6-
FC,
7-
PropsWithChildren,
3+
type FC,
4+
type PropsWithChildren,
85
useCallback,
96
useContext,
107
useEffect,
118
useState,
129
} from "react";
10+
import { useQuery } from "react-query";
11+
import { getWorkspaceProxies, getWorkspaceProxyRegions } from "api/api";
12+
import type { Region, WorkspaceProxy } from "api/typesGenerated";
13+
import { usePermissions } from "contexts/auth/usePermissions";
1314
import { ProxyLatencyReport, useProxyLatency } from "./useProxyLatency";
14-
import { usePermissions } from "hooks/usePermissions";
1515

1616
export interface ProxyContextValue {
1717
// proxy is **always** the workspace proxy that should be used.

‎site/src/contexts/ThemeProvider.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
useState,
1515
} from "react";
1616
import themes, { DEFAULT_THEME, type Theme } from "theme";
17-
import { AuthContext } from "./AuthProvider/AuthProvider";
17+
import { AuthContext } from "./auth/AuthProvider";
1818

1919
/**
2020
*

‎site/src/contexts/AuthProvider/AuthProvider.tsx renamed to ‎site/src/contexts/auth/AuthProvider.tsx

-11
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {
33
type FC,
44
type PropsWithChildren,
55
useCallback,
6-
useContext,
76
} from "react";
87
import { useMutation, useQuery, useQueryClient } from "react-query";
98
import { checkAuthorization } from "api/queries/authCheck";
@@ -129,13 +128,3 @@ export const AuthProvider: FC<PropsWithChildren> = ({ children }) => {
129128
</AuthContext.Provider>
130129
);
131130
};
132-
133-
export const useAuth = () => {
134-
const context = useContext(AuthContext);
135-
136-
if (!context) {
137-
throw new Error("useAuth should be used inside of <AuthProvider />");
138-
}
139-
140-
return context;
141-
};

‎site/src/components/RequireAuth/RequireAuth.test.tsx renamed to ‎site/src/contexts/auth/RequireAuth.test.tsx

File renamed without changes.

‎site/src/components/RequireAuth/RequireAuth.tsx renamed to ‎site/src/contexts/auth/RequireAuth.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import { type FC, useEffect } from "react";
33
import { Outlet, Navigate, useLocation } from "react-router-dom";
44
import { embedRedirect } from "utils/redirect";
55
import { isApiError } from "api/errors";
6-
import { useAuth } from "contexts/AuthProvider/AuthProvider";
76
import { ProxyProvider } from "contexts/ProxyContext";
8-
import { DashboardProvider } from "../Dashboard/DashboardProvider";
9-
import { FullScreenLoader } from "../Loader/FullScreenLoader";
7+
import { DashboardProvider } from "components/Dashboard/DashboardProvider";
8+
import { FullScreenLoader } from "components/Loader/FullScreenLoader";
9+
import { useAuth } from "./useAuth";
1010

1111
export const RequireAuth: FC = () => {
1212
const { signOut, isSigningOut, isSignedOut, isSignedIn, isLoading } =

‎site/src/components/RequirePermission/RequirePermission.tsx renamed to ‎site/src/contexts/auth/RequirePermission.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { FC } from "react";
1+
import { type FC, type ReactNode } from "react";
22
import { Navigate } from "react-router-dom";
33

44
export interface RequirePermissionProps {
5-
children: JSX.Element;
5+
children?: ReactNode;
66
isFeatureVisible: boolean;
77
}
88

@@ -16,6 +16,6 @@ export const RequirePermission: FC<RequirePermissionProps> = ({
1616
if (!isFeatureVisible) {
1717
return <Navigate to="/workspaces" />;
1818
} else {
19-
return children;
19+
return <>{children}</>;
2020
}
2121
};

‎site/src/contexts/AuthProvider/permissions.tsx renamed to ‎site/src/contexts/auth/permissions.tsx

File renamed without changes.

‎site/src/contexts/auth/useAuth.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { useContext } from "react";
2+
import { AuthContext } from "./AuthProvider";
3+
4+
export const useAuth = () => {
5+
const context = useContext(AuthContext);
6+
7+
if (!context) {
8+
throw new Error("useAuth should be used inside of <AuthProvider />");
9+
}
10+
11+
return context;
12+
};

‎site/src/hooks/useMe.ts renamed to ‎site/src/contexts/auth/useMe.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { User } from "api/typesGenerated";
2-
import { useAuth } from "contexts/AuthProvider/AuthProvider";
2+
import { useAuth } from "./useAuth";
33

44
export const useMe = (): User => {
55
const { user } = useAuth();

‎site/src/contexts/auth/useOrganizationId.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { useMe } from "./useMe";
2+
3+
export const useOrganizationId = (): string => {
4+
const me = useMe();
5+
6+
if (me.organization_ids.length < 1) {
7+
throw new Error("User is not a member of any organizations");
8+
}
9+
10+
return me.organization_ids[0];
11+
};

‎site/src/hooks/usePermissions.ts renamed to ‎site/src/contexts/auth/usePermissions.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { useAuth } from "contexts/AuthProvider/AuthProvider";
2-
import type { Permissions } from "contexts/AuthProvider/permissions";
1+
import { useAuth } from "./useAuth";
2+
import type { Permissions } from "./permissions";
33

44
export const usePermissions = (): Permissions => {
55
const { permissions } = useAuth();

‎site/src/hooks/index.ts

-3
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,5 @@ export * from "./useClickable";
22
export * from "./useClickableTableRow";
33
export * from "./useClipboard";
44
export * from "./useFeatureVisibility";
5-
export * from "./useMe";
6-
export * from "./useOrganizationId";
75
export * from "./usePagination";
8-
export * from "./usePermissions";
96
export * from "./useTab";

‎site/src/hooks/useOrganizationId.ts

-6
This file was deleted.

‎site/src/pages/CreateTemplatePage/DuplicateTemplateView.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1+
import { type FC } from "react";
12
import { useQuery, useMutation } from "react-query";
3+
import { useNavigate, useSearchParams } from "react-router-dom";
24
import {
35
templateVersionLogs,
46
templateByName,
@@ -7,15 +9,14 @@ import {
79
JobError,
810
createTemplate,
911
} from "api/queries/templates";
12+
import { useOrganizationId } from "contexts/auth/useOrganizationId";
1013
import { ErrorAlert } from "components/Alert/ErrorAlert";
11-
import { useOrganizationId } from "hooks";
12-
import { useNavigate, useSearchParams } from "react-router-dom";
13-
import { CreateTemplateForm } from "./CreateTemplateForm";
1414
import { Loader } from "components/Loader/Loader";
1515
import { useDashboard } from "components/Dashboard/DashboardProvider";
16+
import { CreateTemplateForm } from "./CreateTemplateForm";
1617
import { firstVersionFromFile, getFormPermissions, newTemplate } from "./utils";
1718

18-
export const DuplicateTemplateView = () => {
19+
export const DuplicateTemplateView: FC = () => {
1920
const navigate = useNavigate();
2021
const organizationId = useOrganizationId();
2122
const [searchParams] = useSearchParams();

‎site/src/pages/CreateTemplatePage/ImportStarterTemplateView.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
1+
import { type FC } from "react";
12
import { useQuery, useMutation } from "react-query";
3+
import { useNavigate, useSearchParams } from "react-router-dom";
24
import {
35
templateVersionLogs,
46
JobError,
57
createTemplate,
68
templateExamples,
79
templateVersionVariables,
810
} from "api/queries/templates";
11+
import { useOrganizationId } from "contexts/auth/useOrganizationId";
912
import { ErrorAlert } from "components/Alert/ErrorAlert";
10-
import { useOrganizationId } from "hooks";
11-
import { useNavigate, useSearchParams } from "react-router-dom";
12-
import { CreateTemplateForm } from "./CreateTemplateForm";
1313
import { Loader } from "components/Loader/Loader";
1414
import { useDashboard } from "components/Dashboard/DashboardProvider";
15+
import { CreateTemplateForm } from "./CreateTemplateForm";
1516
import {
1617
firstVersionFromExample,
1718
getFormPermissions,
1819
newTemplate,
1920
} from "./utils";
2021

21-
export const ImportStarterTemplateView = () => {
22+
export const ImportStarterTemplateView: FC = () => {
2223
const navigate = useNavigate();
2324
const organizationId = useOrganizationId();
2425
const [searchParams] = useSearchParams();

‎site/src/pages/CreateTemplatePage/UploadTemplateView.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import { useQuery, useMutation } from "react-query";
2+
import { useNavigate } from "react-router-dom";
23
import {
34
templateVersionLogs,
45
JobError,
56
createTemplate,
67
templateVersionVariables,
78
} from "api/queries/templates";
8-
import { useOrganizationId } from "hooks";
9-
import { useNavigate } from "react-router-dom";
10-
import { CreateTemplateForm } from "./CreateTemplateForm";
9+
import { uploadFile } from "api/queries/files";
10+
import { useOrganizationId } from "contexts/auth/useOrganizationId";
1111
import { useDashboard } from "components/Dashboard/DashboardProvider";
12+
import { CreateTemplateForm } from "./CreateTemplateForm";
1213
import { firstVersionFromFile, getFormPermissions, newTemplate } from "./utils";
13-
import { uploadFile } from "api/queries/files";
1414

1515
export const UploadTemplateView = () => {
1616
const navigate = useNavigate();

‎site/src/pages/CreateUserPage/CreateUserPage.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import { useOrganizationId } from "hooks/useOrganizationId";
2-
import { FC } from "react";
1+
import { type FC } from "react";
32
import { Helmet } from "react-helmet-async";
3+
import { useMutation, useQuery, useQueryClient } from "react-query";
44
import { useNavigate } from "react-router-dom";
5-
import { CreateUserForm } from "./CreateUserForm";
6-
import { Margins } from "components/Margins/Margins";
75
import { pageTitle } from "utils/page";
8-
import { useMutation, useQuery, useQueryClient } from "react-query";
96
import { authMethods, createUser } from "api/queries/users";
7+
import { useOrganizationId } from "contexts/auth/useOrganizationId";
8+
import { Margins } from "components/Margins/Margins";
109
import { displaySuccess } from "components/GlobalSnackbar/utils";
10+
import { CreateUserForm } from "./CreateUserForm";
1111

1212
export const Language = {
1313
unknownError: "Oops, an unknown error occurred.",

0 commit comments

Comments
 (0)