support optional external auth providers in the frontend

coder · aslilac · Feb 22, 2024 · Feb 21, 2024 · Feb 21, 2024 · Feb 21, 2024
commit c04cd378cf352aa201f8fe0c94e4fb038db2a4b7
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx
@@ -241,9 +241,7 @@ describe("CreateWorkspacePage", () => {
     renderCreateWorkspacePage();
     await waitForLoaderToBeRemoved();
 
-    await screen.findByText(
-      "To create a workspace using the selected template, please ensure you are authenticated with all the external providers listed below.",
-    );
+    await screen.findByText(/connect to all required/i);
   });
 
   it("auto create a workspace if uses mode=auto", async () => {
@@ -312,7 +310,7 @@ describe("CreateWorkspacePage", () => {
       route: `/templates/${MockWorkspace.name}/workspace?${params.toString()}`,
     });
 
-    const warningMessage = await screen.findByRole("alert");
+    const warningMessage = await screen.findByTestId("duplication-warning");
     const nameInput = await screen.findByRole("textbox", {
       name: "Workspace Name",
     });

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
@@ -126,6 +126,80 @@ export const ExternalAuth: Story = {
         authenticate_url: "",
         display_icon: "/icon/gitlab.svg",
         display_name: "GitLab",
+        optional: true,
+      },
+    ],
+  },
+};
+
+export const ExternalAuthError: Story = {
+  args: {
+    error: true,
+    externalAuth: [
+      {
+        id: "github",
+        type: "github",
+        authenticated: false,
+        authenticate_url: "",
+        display_icon: "/icon/github.svg",
+        display_name: "GitHub",
+      },
+      {
+        id: "gitlab",
+        type: "gitlab",
+        authenticated: false,
+        authenticate_url: "",
+        display_icon: "/icon/gitlab.svg",
+        display_name: "GitLab",
+        optional: true,
+      },
+    ],
+  },
+};
+
+export const ExternalAuthAllRequiredConnected: Story = {
+  args: {
+    externalAuth: [
+      {
+        id: "github",
+        type: "github",
+        authenticated: true,
+        authenticate_url: "",
+        display_icon: "/icon/github.svg",
+        display_name: "GitHub",
+      },
+      {
+        id: "gitlab",
+        type: "gitlab",
+        authenticated: false,
+        authenticate_url: "",
+        display_icon: "/icon/gitlab.svg",
+        display_name: "GitLab",
+        optional: true,
+      },
+    ],
+  },
+};
+
+export const ExternalAuthAllConnected: Story = {
+  args: {
+    externalAuth: [
+      {
+        id: "github",
+        type: "github",
+        authenticated: true,
+        authenticate_url: "",
+        display_icon: "/icon/github.svg",
+        display_name: "GitHub",
+      },
+      {
+        id: "gitlab",
+        type: "gitlab",
+        authenticated: true,
+        authenticate_url: "",
+        display_icon: "/icon/gitlab.svg",
+        display_name: "GitLab",
+        optional: true,
       },
     ],
   },

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -183,7 +183,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
         {Boolean(error) && <ErrorAlert error={error} />}
 
         {mode === "duplicate" && (
-          <Alert severity="info" dismissible>
+          <Alert severity="info" dismissible data-testid="duplication-warning">
             {Language.duplicationWarning}
           </Alert>
         )}
@@ -252,7 +252,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
         {externalAuth && externalAuth.length > 0 && (
           <FormSection
             title="External Authentication"
-            description="This template requires authentication to external services."
+            description="This template uses external services for authentication."
           >
             <FormFields>
               {hasAllRequiredExternalAuth ? (
@@ -261,14 +261,15 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
                   providers listed below.
                 </Alert>
               ) : (
-                <Alert severity="error">
+                <Alert severity={error ? "error" : "info"}>
                   To create a workspace using this template, please connect to
                   all required external authentication providers listed below.
                 </Alert>
               )}
               {externalAuth.map((auth) => (
                 <ExternalAuthButton
                   key={auth.id}
+                  error={error}
                   auth={auth}
                   isLoading={externalAuthPollingState === "polling"}
                   onStartPolling={startPollingExternalAuth}

diff --git a/site/src/pages/CreateWorkspacePage/ExternalAuthButton.stories.tsx b/site/src/pages/CreateWorkspacePage/ExternalAuthButton.stories.tsx
@@ -12,7 +12,7 @@ const MockExternalAuth: TemplateVersionExternalAuth = {
 };
 
 const meta: Meta<typeof ExternalAuthButton> = {
-  title: "pages/CreateWorkspacePage/ExternalAuth",
+  title: "pages/CreateWorkspacePage/ExternalAuthButton",
   component: ExternalAuthButton,
 };
 
@@ -25,6 +25,15 @@ export const Github: Story = {
   },
 };
 
+export const GithubOptional: Story = {
+  args: {
+    auth: {
+      ...MockExternalAuth,
+      optional: true,
+    },
+  },
+};
+
 export const GithubWithRetry: Story = {
   args: {
     auth: MockExternalAuth,
@@ -48,6 +57,7 @@ export const Gitlab: Story = {
       display_icon: "/icon/gitlab.svg",
       display_name: "GitLab",
       authenticated: false,
+      optional: true,
     },
   },
 };
@@ -70,6 +80,7 @@ export const AzureDevOps: Story = {
       display_icon: "/icon/azure-devops.svg",
       display_name: "Azure DevOps",
       authenticated: false,
+      optional: true,
     },
   },
 };
@@ -92,6 +103,7 @@ export const Bitbucket: Story = {
       display_icon: "/icon/bitbucket.svg",
       display_name: "Bitbucket",
       authenticated: false,
+      optional: true,
     },
   },
 };

diff --git a/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx b/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx
@@ -13,13 +13,15 @@ export interface ExternalAuthButtonProps {
   displayRetry: boolean;
   isLoading: boolean;
   onStartPolling: () => void;
+  error?: unknown;
 }
 
 export const ExternalAuthButton: FC<ExternalAuthButtonProps> = ({
   auth,
   displayRetry,
   isLoading,
   onStartPolling,
+  error,
 }) => {
   return (
     <>
@@ -49,13 +51,17 @@ export const ExternalAuthButton: FC<ExternalAuthButtonProps> = ({
             onStartPolling();
           }}
         >
-          {auth.authenticated
-            ? `Authenticated with ${auth.display_name}`
-            : `Login with ${auth.display_name}`}
-          {!auth.optional && !auth.authenticated && (
-            <Pill type="error" css={{ marginLeft: 8 }}>
-              Required
-            </Pill>
+          {auth.authenticated ? (
+            `Authenticated with ${auth.display_name}`
+          ) : (
+            <>
+              Login with {auth.display_name}
+              {!auth.optional && (
+                <Pill type={error ? "error" : "info"} css={{ marginLeft: 8 }}>
+                  Required
+                </Pill>
+              )}
+            </>
           )}
         </LoadingButton>