chore: link users to admin page

Author: svedova

src/components/ActionRequired/ActionRequired.tsx

@@ -0,0 +1,36 @@
+import { SxProps } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Tooltip from "@mui/material/Tooltip";
+import AnnouncementIcon from "@mui/icons-material/Announcement";
+
+interface Props {
+  placement?: "top" | "bottom" | "left" | "right";
+  title?: string;
+  subtitle?: string;
+  sx?: SxProps;
+}
+
+export default function ActionRequired({
+  title,
+  subtitle,
+  sx,
+  placement = "top",
+}: Props) {
+  return (
+    <Tooltip
+      title={
+        <Box sx={{ p: 1 }}>
+          <Typography variant="subtitle1" sx={{ mb: subtitle ? 2 : 0 }}>
+            {title || "Action required"}
+          </Typography>
+          {subtitle && <Typography variant="body2">{subtitle}</Typography>}
+        </Box>
+      }
+      placement={placement}
+      arrow
+    >
+      <AnnouncementIcon color="warning" sx={sx} />
+    </Tooltip>
+  );
+}

src/components/ActionRequired/index.ts

@@ -0,0 +1 @@
+export { default } from "./ActionRequired";

src/components/ButtonDropdown/ButtonDropdown.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import ArrowDropDown from "@mui/icons-material/ArrowDropDown";
 import ArrowDropUp from "@mui/icons-material/ArrowDropUp";
@@ -12,6 +13,7 @@ import ClickAwayListener from "@mui/material/ClickAwayListener";
 interface MenuItemProps {
   text: string;
   icon?: React.ReactNode;
+  endIcon?: React.ReactNode;
   href?: string;
   onClick?: React.MouseEventHandler;
 }
@@ -57,7 +59,10 @@ export default function ButtonDropdown({ buttonText, children, items }: Props) {
                         }}
                       >
                         {item.icon && <ListItemIcon>{item.icon}</ListItemIcon>}
-                        {item.text}
+                        <Box component="span" sx={{ flexGrow: 1 }}>
+                          {item.text}
+                        </Box>
+                        {item.endIcon}
                       </Link>
                     </MenuItem>
                   );

src/pages/apps/Apps.spec.tsx

@@ -35,7 +35,18 @@ describe("~/pages/apps/Apps.tsx", () => {
       {
         path: "*",
         element: (
-          <AuthContext.Provider value={{ user: mockUser(), teams }}>
+          <AuthContext.Provider
+            value={{
+              user: mockUser(),
+              teams,
+              providers: {
+                github: false,
+                gitlab: false,
+                bitbucket: false,
+                [provider as Provider]: true,
+              },
+            }}
+          >
             <Apps />
           </AuthContext.Provider>
         ),
@@ -87,9 +98,11 @@ describe("~/pages/apps/Apps.tsx", () => {
       fireEvent.click(button!);
 
       await waitFor(() => {
-        expect(wrapper.getByText("Import from URL").getAttribute("href")).toBe(
-          "/apps/new/url"
-        );
+        expect(
+          wrapper
+            .getByRole("link", { name: "Import from URL" })
+            .getAttribute("href")
+        ).toBe("/apps/new/url");
       });
     });
 
@@ -186,7 +199,7 @@ describe("~/pages/apps/Apps.tsx", () => {
       await waitFor(() => {
         expect(
           wrapper.getByText(
-            "Configure authentication to import from private repositories"
+            "Configure provider to import from private repositories"
           )
         ).toBeTruthy();
       });

src/pages/apps/Apps.tsx

@@ -23,13 +23,14 @@ import { providerToText } from "~/utils/helpers/string";
 import { useFetchAppList, createApp } from "./actions";
 import { WelcomeModal, EmptyList } from "./_components";
 import TeamStats from "./_components/TeamStats";
+import ActionRequired from "~/components/ActionRequired";
 
 let timeout: NodeJS.Timeout;
 const limit = 20;
 const welcomeModalId = "welcome_modal";
 
 export default function Apps() {
-  const { teams } = useContext(AuthContext);
+  const { teams, providers } = useContext(AuthContext);
   const [from, setFrom] = useState(0);
   const [filter, setFilter] = useState("");
   const selectedTeam = useSelectedTeam({ teams });
@@ -45,7 +46,11 @@ export default function Apps() {
     LocalStorage.get(welcomeModalId) !== "shown"
   );
 
-  const provider = LocalStorage.get<Provider>(LS_PROVIDER);
+  let provider = LocalStorage.get<Provider>(LS_PROVIDER);
+
+  if (!providers?.[provider as Provider]) {
+    provider = undefined;
+  }
 
   if (loading && !filter) {
     return (
@@ -67,10 +72,8 @@ export default function Apps() {
       <Box sx={{ width: "100%" }} maxWidth="lg">
         <Card sx={{ px: { xs: 1, md: 4 } }}>
           <EmptyList
-            primaryActionText="Configure authentication"
-            primaryDesc="Configure authentication to import from private repositories
-
-"
+            primaryActionText="Configure provider"
+            primaryDesc="Configure provider to import from private repositories"
             primaryLink="https://www.stormkit.io/docs/self-hosting/authentication"
             secondaryLink="/apps/new/url"
             secondaryActionText="Import from URL"
@@ -84,11 +87,9 @@ export default function Apps() {
 
   const importFromProvider = provider
     ? `Import from ${providerToText[provider]}`
-    : "Configure authentication";
+    : "Configure provider";
 
-  const newAppHref = provider
-    ? `/apps/new/${provider}`
-    : "https://www.stormkit.io/docs/self-hosting/authentication";
+  const newAppHref = provider ? `/apps/new/${provider}` : "/admin/git";
 
   if (apps.length === 0 && !filter) {
     return (
@@ -131,6 +132,13 @@ export default function Apps() {
               items={[
                 {
                   icon: <ImportExport />,
+                  endIcon: provider ? undefined : (
+                    <ActionRequired
+                      placement="bottom"
+                      subtitle="Configure provider to import from private repositories"
+                      title="Action required"
+                    />
+                  ),
                   text: importFromProvider,
                   href: newAppHref,
                 },
@@ -164,8 +172,8 @@ export default function Apps() {
                 setFilter(e.target.value);
               }, 250);
             }}
-            InputProps={{
-              endAdornment: <SearchIcon sx={{ fontSize: 16 }} />,
+            slotProps={{
+              input: { endAdornment: <SearchIcon sx={{ fontSize: 16 }} /> },
             }}
           />
         </Box>

src/pages/auth/Auth.context.spec.tsx

@@ -1,6 +1,7 @@
 import type { RenderResult } from "@testing-library/react";
 import type { AuthContextProps } from "~/pages/auth/Auth.context";
 import type { Scope } from "nock";
+import nock from "nock";
 import { describe, expect, beforeEach, afterEach, it, vi } from "vitest";
 import { waitFor } from "@testing-library/react";
 import { LocalStorage } from "~/utils/storage";
@@ -21,7 +22,28 @@ describe("pages/auth/Auth.context", () => {
   let scope: Scope;
   let context: AuthContextProps;
 
+  const mockFetchAuthProviders = ({
+    status,
+    response,
+  }: {
+    status: number;
+    response: {
+      github: boolean;
+      gitlab: boolean;
+      bitbucket: boolean;
+      basicAuth?: "enabled";
+    };
+  }) =>
+    nock(process.env.API_DOMAIN || "")
+      .get(`/auth/providers`)
+      .reply(status, response);
+
   const createWrapper = () => {
+    mockFetchAuthProviders({
+      status: 200,
+      response: { github: true, gitlab: true, bitbucket: true },
+    });
+
     wrapper = renderWithRouter({
       initialEntries: ["/apps/1231231?my-query=1"],
       el: () => (
@@ -111,11 +133,16 @@ describe("pages/auth/Auth.context", () => {
               displayName: "stormkit",
             },
           ],
-          authError: null,
+          authError: undefined,
           loginOauth: expect.any(Function),
           logout: expect.any(Function),
           reloadTeams: expect.any(Function),
           teams: undefined,
+          providers: {
+            github: true,
+            gitlab: true,
+            bitbucket: true,
+          },
         });
       });
     });

src/pages/auth/Auth.context.tsx

@@ -1,16 +1,24 @@
 import type { LoginOauthReturnValue } from "./actions";
+import CircularProgress from "@mui/material/CircularProgress";
 import React, { createContext, useEffect, useState } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
-import Spinner from "~/components/Spinner";
 import * as actions from "./actions";
+import type { Providers } from "./actions";
 import UpdateSnackbar from "./UpdateSnackbar";
 
-const { loginOauth, useFetchUser, useFetchTeams, logout } = actions;
+const {
+  loginOauth,
+  useFetchUser,
+  useFetchTeams,
+  logout,
+  useFetchActiveProviders,
+} = actions;
 
 export interface AuthContextProps {
   user?: User;
   authError?: string | null;
   accounts?: Array<ConnectedAccount>;
+  providers?: Providers;
   logout?: () => void;
   loginOauth?: (p: Provider) => Promise<LoginOauthReturnValue>;
   reloadTeams?: () => void;
@@ -28,6 +36,11 @@ export default function ContextProvider({ children }: Props) {
   const [refreshToken, setTeamsRefreshToken] = useState(0);
   const { pathname, search } = useLocation();
   const { error, loading, user, accounts, ...fns } = useFetchUser();
+  const {
+    providers,
+    loading: pLoading,
+    error: pError,
+  } = useFetchActiveProviders();
   const { teams, loading: tLoading } = useFetchTeams({ refreshToken, user });
 
   const shouldRedirect = !loading && !user && !pathname.includes("/auth");
@@ -49,8 +62,18 @@ export default function ContextProvider({ children }: Props) {
     }
   }, [user?.isPaymentRequired, pathname]);
 
-  if (loading || tLoading) {
-    return <Spinner primary pageCenter />;
+  if (loading || tLoading || pLoading) {
+    return (
+      <CircularProgress
+        sx={{
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          m: 0,
+        }}
+      />
+    );
   }
 
   // Redirect the user to the console login if he/she
@@ -64,8 +87,9 @@ export default function ContextProvider({ children }: Props) {
       value={{
         user,
         accounts,
-        authError: error,
+        authError: error || pError,
         teams,
+        providers,
         reloadTeams: () => setTeamsRefreshToken(Date.now()),
         logout: logout(), // This function can be removed, it's no longer being injected something.
         loginOauth: loginOauth({ ...fns }),