From 91645131535bb0e610f026e6e8a805f527e47997 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 6 Mar 2024 18:56:07 +0000 Subject: [PATCH 1/3] chore: add stories for `Loader` --- .../ErrorBoundary/RuntimeErrorState.tsx | 4 +- .../components/Loader/FullScreenLoader.tsx | 23 ------------ site/src/components/Loader/Loader.stories.tsx | 18 +++++++++ site/src/components/Loader/Loader.tsx | 37 +++++++++++++++---- site/src/contexts/auth/RequireAuth.tsx | 4 +- .../modules/dashboard/DashboardProvider.tsx | 4 +- .../src/pages/CliAuthPage/CliAuthPageView.tsx | 4 +- site/src/pages/SetupPage/SetupPage.tsx | 4 +- .../TemplateVersionEditorPage.tsx | 4 +- .../ExternalAuthPage/ExternalAuthPageView.tsx | 4 +- site/src/router.tsx | 4 +- 11 files changed, 63 insertions(+), 47 deletions(-) delete mode 100644 site/src/components/Loader/FullScreenLoader.tsx create mode 100644 site/src/components/Loader/Loader.stories.tsx diff --git a/site/src/components/ErrorBoundary/RuntimeErrorState.tsx b/site/src/components/ErrorBoundary/RuntimeErrorState.tsx index 0e1aefe4e436c..e79c99dc7665c 100644 --- a/site/src/components/ErrorBoundary/RuntimeErrorState.tsx +++ b/site/src/components/ErrorBoundary/RuntimeErrorState.tsx @@ -7,7 +7,7 @@ import { Helmet } from "react-helmet-async"; import type { BuildInfoResponse } from "api/typesGenerated"; import { CopyButton } from "components/CopyButton/CopyButton"; import { CoderIcon } from "components/Icons/CoderIcon"; -import { FullScreenLoader } from "components/Loader/FullScreenLoader"; +import { Loader } from "components/Loader/Loader"; import { Margins } from "components/Margins/Margins"; import { Stack } from "components/Stack/Stack"; @@ -110,7 +110,7 @@ export const RuntimeErrorState: FC = ({ error }) => { ) : ( - + )} ); diff --git a/site/src/components/Loader/FullScreenLoader.tsx b/site/src/components/Loader/FullScreenLoader.tsx deleted file mode 100644 index 1e34567f4f4e6..0000000000000 --- a/site/src/components/Loader/FullScreenLoader.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import CircularProgress from "@mui/material/CircularProgress"; -import type { FC } from "react"; - -export const FullScreenLoader: FC = () => { - return ( -
({ - position: "absolute", - top: "0", - left: "0", - right: "0", - bottom: "0", - display: "flex", - justifyContent: "center", - alignItems: "center", - background: theme.palette.background.default, - })} - data-testid="loader" - > - -
- ); -}; diff --git a/site/src/components/Loader/Loader.stories.tsx b/site/src/components/Loader/Loader.stories.tsx new file mode 100644 index 0000000000000..38639c2f48558 --- /dev/null +++ b/site/src/components/Loader/Loader.stories.tsx @@ -0,0 +1,18 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { Loader } from "./Loader"; + +const meta: Meta = { + title: "components/Loader", + component: Loader, +}; + +export default meta; +type Story = StoryObj; + +export const Example: Story = {}; + +export const Fullscreen: Story = { + args: { + fullscreen: true, + }, +}; diff --git a/site/src/components/Loader/Loader.tsx b/site/src/components/Loader/Loader.tsx index ef0072a5b3d68..2d696cdd554ff 100644 --- a/site/src/components/Loader/Loader.tsx +++ b/site/src/components/Loader/Loader.tsx @@ -1,20 +1,20 @@ +import type { Interpolation, Theme } from "@emotion/react"; import CircularProgress from "@mui/material/CircularProgress"; import type { FC, HTMLAttributes } from "react"; interface LoaderProps extends HTMLAttributes { + fullscreen?: boolean; size?: number; } -export const Loader: FC = ({ size = 26, ...attrs }) => { +export const Loader: FC = ({ + fullscreen, + size = 26, + ...attrs +}) => { return (
= ({ size = 26, ...attrs }) => {
); }; + +const styles = { + inline: { + padding: 32, + width: "100%", + display: "flex", + alignItems: "center", + justifyContent: "center", + }, + fullscreen: (theme) => ({ + position: "absolute", + top: "0", + left: "0", + right: "0", + bottom: "0", + display: "flex", + justifyContent: "center", + alignItems: "center", + background: theme.palette.background.default, + }), +} satisfies Record>; diff --git a/site/src/contexts/auth/RequireAuth.tsx b/site/src/contexts/auth/RequireAuth.tsx index fa9b79068bf07..90a7a30bb4576 100644 --- a/site/src/contexts/auth/RequireAuth.tsx +++ b/site/src/contexts/auth/RequireAuth.tsx @@ -2,7 +2,7 @@ import axios from "axios"; import { type FC, useEffect } from "react"; import { Outlet, Navigate, useLocation } from "react-router-dom"; import { isApiError } from "api/errors"; -import { FullScreenLoader } from "components/Loader/FullScreenLoader"; +import { Loader } from "components/Loader/Loader"; import { ProxyProvider } from "contexts/ProxyContext"; import { DashboardProvider } from "modules/dashboard/DashboardProvider"; import { embedRedirect } from "utils/redirect"; @@ -43,7 +43,7 @@ export const RequireAuth: FC = () => { }, [isLoading, isSigningOut, isSignedIn, signOut]); if (isLoading || isSigningOut) { - return ; + return ; } if (isSignedOut) { diff --git a/site/src/modules/dashboard/DashboardProvider.tsx b/site/src/modules/dashboard/DashboardProvider.tsx index 88cd74cdb5ce3..f389311754807 100644 --- a/site/src/modules/dashboard/DashboardProvider.tsx +++ b/site/src/modules/dashboard/DashboardProvider.tsx @@ -17,7 +17,7 @@ import type { Experiments, } from "api/typesGenerated"; import { displayError } from "components/GlobalSnackbar/utils"; -import { FullScreenLoader } from "components/Loader/FullScreenLoader"; +import { Loader } from "components/Loader/Loader"; import { hslToHex, isHexColor, isHslColor } from "utils/colors"; interface Appearance { @@ -78,7 +78,7 @@ export const DashboardProvider: FC = ({ children }) => { }, []); if (isLoading) { - return ; + return ; } return ( diff --git a/site/src/pages/CliAuthPage/CliAuthPageView.tsx b/site/src/pages/CliAuthPage/CliAuthPageView.tsx index a157c0bb4dbd0..7952a125b2a82 100644 --- a/site/src/pages/CliAuthPage/CliAuthPageView.tsx +++ b/site/src/pages/CliAuthPage/CliAuthPageView.tsx @@ -3,7 +3,7 @@ import { visuallyHidden } from "@mui/utils"; import type { FC } from "react"; import { Link as RouterLink } from "react-router-dom"; import { CodeExample } from "components/CodeExample/CodeExample"; -import { FullScreenLoader } from "components/Loader/FullScreenLoader"; +import { Loader } from "components/Loader/Loader"; import { SignInLayout } from "components/SignInLayout/SignInLayout"; import { Welcome } from "components/Welcome/Welcome"; @@ -15,7 +15,7 @@ const VISUALLY_HIDDEN_SPACE = " "; export const CliAuthPageView: FC = ({ sessionToken }) => { if (!sessionToken) { - return ; + return ; } return ( diff --git a/site/src/pages/SetupPage/SetupPage.tsx b/site/src/pages/SetupPage/SetupPage.tsx index 9a7128be2bd27..ec5f9f26a1712 100644 --- a/site/src/pages/SetupPage/SetupPage.tsx +++ b/site/src/pages/SetupPage/SetupPage.tsx @@ -3,7 +3,7 @@ import { Helmet } from "react-helmet-async"; import { useMutation } from "react-query"; import { Navigate, useNavigate } from "react-router-dom"; import { createFirstUser } from "api/queries/users"; -import { FullScreenLoader } from "components/Loader/FullScreenLoader"; +import { Loader } from "components/Loader/Loader"; import { useAuth } from "contexts/auth/useAuth"; import { pageTitle } from "utils/page"; import { SetupPageView } from "./SetupPageView"; @@ -21,7 +21,7 @@ export const SetupPage: FC = () => { const navigate = useNavigate(); if (isLoading) { - return ; + return ; } // If the user is logged in, navigate to the app diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx index 67af391df324b..fd51a41cd9d9c 100644 --- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx +++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx @@ -17,7 +17,7 @@ import type { TemplateVersion, } from "api/typesGenerated"; import { displayError } from "components/GlobalSnackbar/utils"; -import { FullScreenLoader } from "components/Loader/FullScreenLoader"; +import { Loader } from "components/Loader/Loader"; import { useOrganizationId } from "contexts/auth/useOrganizationId"; import { useWatchVersionLogs } from "modules/templates/useWatchVersionLogs"; import { type FileTree, traverse } from "utils/filetree"; @@ -224,7 +224,7 @@ export const TemplateVersionEditorPage: FC = () => { }} /> ) : ( - + )} ); diff --git a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx index 4fd19ffb690a4..4433fee43045b 100644 --- a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx +++ b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx @@ -18,7 +18,7 @@ import type { import { ErrorAlert } from "components/Alert/ErrorAlert"; import { Avatar } from "components/Avatar/Avatar"; import { AvatarData } from "components/AvatarData/AvatarData"; -import { FullScreenLoader } from "components/Loader/FullScreenLoader"; +import { Loader } from "components/Loader/Loader"; import { MoreMenu, MoreMenuContent, @@ -52,7 +52,7 @@ export const ExternalAuthPageView: FC = ({ } if (isLoading || !auths) { - return ; + return ; } return ( diff --git a/site/src/router.tsx b/site/src/router.tsx index 114d53e7a24db..de288d37d3941 100644 --- a/site/src/router.tsx +++ b/site/src/router.tsx @@ -6,7 +6,7 @@ import { Outlet, Route, } from "react-router-dom"; -import { FullScreenLoader } from "./components/Loader/FullScreenLoader"; +import { Loader } from "./components/Loader/Loader"; import { RequireAuth } from "./contexts/auth/RequireAuth"; import { DashboardLayout } from "./modules/dashboard/DashboardLayout"; import AuditPage from "./pages/AuditPage/AuditPage"; @@ -243,7 +243,7 @@ const ProvisionerDaemonsHealthPage = lazy( const RoutesWithSuspense = () => { return ( - }> + }> ); From 3748a494294b7da67845ca8d05fdec7774c193f4 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 6 Mar 2024 19:03:07 +0000 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=A7=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/src/components/ErrorBoundary/RuntimeErrorState.tsx | 6 +++--- .../TemplateVersionEditorPage/TemplateVersionEditorPage.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/site/src/components/ErrorBoundary/RuntimeErrorState.tsx b/site/src/components/ErrorBoundary/RuntimeErrorState.tsx index e79c99dc7665c..b9a3c7e3254db 100644 --- a/site/src/components/ErrorBoundary/RuntimeErrorState.tsx +++ b/site/src/components/ErrorBoundary/RuntimeErrorState.tsx @@ -50,7 +50,9 @@ export const RuntimeErrorState: FC = ({ error }) => { Something went wrong... - {!checkingError ? ( + {checkingError ? ( + + ) : (
@@ -109,8 +111,6 @@ export const RuntimeErrorState: FC = ({ error }) => { )}
- ) : ( - )} ); diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx index fd51a41cd9d9c..51aa3a8a6a6fb 100644 --- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx +++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx @@ -120,7 +120,9 @@ export const TemplateVersionEditorPage: FC = () => { {pageTitle(`${templateName} ยท Template Editor`)} - {templateQuery.data && templateVersionQuery.data && fileTree ? ( + {!(templateQuery.data && templateVersionQuery.data && fileTree) ? ( + + ) : ( { setProvisionerTags(tags); }} /> - ) : ( - )} ); From d6000f8f984f0a670a426f9b0927780da88743e8 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Thu, 7 Mar 2024 22:16:51 +0000 Subject: [PATCH 3/3] let's try this I guess --- site/src/components/Loader/Loader.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/site/src/components/Loader/Loader.tsx b/site/src/components/Loader/Loader.tsx index 2d696cdd554ff..f2041a3424940 100644 --- a/site/src/components/Loader/Loader.tsx +++ b/site/src/components/Loader/Loader.tsx @@ -16,7 +16,6 @@ export const Loader: FC = ({