add required pill for non-optional external auth providers

aslilac · aslilac · commit 05fbbe8592ba · 2024-02-21T20:06:46.000Z
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -147,6 +147,10 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
     );
   }, [autofillParameters]);
 
+  const hasAllRequiredExternalAuth = externalAuth.every(
+    (auth) => auth.optional || auth.authenticated,
+  );
+
   return (
     <Margins size="medium">
       <PageHeader actions={<Button onClick={onCancel}>Cancel</Button>}>
@@ -251,13 +255,15 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
             description="This template requires authentication to external services."
           >
             <FormFields>
-              {requiresExternalAuth && (
-                // This should really be a `notice` but `severity` is a MUI prop, and we'd need
-                // to basically make our own `Alert` component.
+              {hasAllRequiredExternalAuth ? (
                 <Alert severity="info">
-                  To create a workspace using the selected template, please
-                  ensure you are authenticated with all the external providers
-                  listed below.
+                  This template can connect to the external authentication
+                  providers listed below.
+                </Alert>
+              ) : (
+                <Alert severity="error">
+                  To create a workspace using this template, please connect to
+                  all required external authentication providers listed below.
                 </Alert>
               )}
               {externalAuth.map((auth) => (
@@ -313,6 +319,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
         <FormFooter
           onCancel={onCancel}
           isLoading={creatingWorkspace}
+          submitDisabled={!hasAllRequiredExternalAuth}
           submitLabel="Create Workspace"
         />
       </HorizontalForm>
diff --git a/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx b/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx
@@ -1,11 +1,12 @@
 import ReplayIcon from "@mui/icons-material/Replay";
 import Button from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
-import { type FC } from "react";
 import LoadingButton from "@mui/lab/LoadingButton";
 import { visuallyHidden } from "@mui/utils";
+import { type FC } from "react";
+import type { TemplateVersionExternalAuth } from "api/typesGenerated";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
-import { TemplateVersionExternalAuth } from "api/typesGenerated";
+import { Pill } from "components/Pill/Pill";
 
 export interface ExternalAuthButtonProps {
   auth: TemplateVersionExternalAuth;
@@ -51,6 +52,11 @@ export const ExternalAuthButton: FC<ExternalAuthButtonProps> = ({
           {auth.authenticated
             ? `Authenticated with ${auth.display_name}`
             : `Login with ${auth.display_name}`}
+          {!auth.optional && !auth.authenticated && (
+            <Pill type="error" css={{ marginLeft: 8 }}>
+              Required
+            </Pill>
+          )}
         </LoadingButton>
 
         {displayRetry && (
