frontend hacking

aslilac · aslilac · commit f9feb97f8431 · 2024-02-09T21:42:36.000Z
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
@@ -130,3 +130,30 @@ export const RequiresExternalAuth: Story = {
     ],
   },
 };
+
+export const OptionalExternalAuth: Story = {
+  args: {
+    externalAuth: [
+      {
+        id: "github",
+        type: "github",
+        authenticated: false,
+        authenticate_url: "",
+        display_icon: "/icon/github.svg",
+        display_name: "GitHub",
+        // @ts-expect-error
+        optional: true,
+      },
+      {
+        id: "gitlab",
+        type: "gitlab",
+        authenticated: true,
+        authenticate_url: "",
+        display_icon: "/icon/gitlab.svg",
+        display_name: "GitLab",
+        // @ts-expect-error
+        optional: true,
+      },
+    ],
+  },
+};
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -42,7 +42,7 @@ import {
   CreateWorkspaceMode,
   ExternalAuthPollingState,
 } from "./CreateWorkspacePage";
-import { ExternalAuthBanner } from "./ExternalAuthBanner/ExternalAuthBanner";
+import { ExternalAuthWall } from "./ExternalAuthWall/ExternalAuthWall";
 import { CreateWSPermissions } from "./permissions";
 
 export const Language = {
@@ -172,7 +172,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
       </PageHeader>
 
       {requiresExternalAuth ? (
-        <ExternalAuthBanner
+        <ExternalAuthWall
           providers={externalAuth}
           pollingState={externalAuthPollingState}
           onStartPolling={startPollingExternalAuth}
diff --git a/site/src/pages/CreateWorkspacePage/ExternalAuthWall/ExternalAuthItem.stories.tsx b/site/src/pages/CreateWorkspacePage/ExternalAuthWall/ExternalAuthItem.stories.tsx
@@ -12,7 +12,7 @@ const MockExternalAuth: TemplateVersionExternalAuth = {
 };
 
 const meta: Meta<typeof ExternalAuthItem> = {
-  title: "pages/CreateWorkspacePage/ExternalAuthBanner/ExternalAuthItem",
+  title: "pages/CreateWorkspacePage/ExternalAuthWall/ExternalAuthItem",
   component: ExternalAuthItem,
   decorators: [
     (Story) => (
diff --git a/site/src/pages/CreateWorkspacePage/ExternalAuthWall/ExternalAuthItem.test.tsx b/site/src/pages/CreateWorkspacePage/ExternalAuthWall/ExternalAuthItem.test.tsx
diff --git a/site/src/pages/CreateWorkspacePage/ExternalAuthWall/ExternalAuthItem.tsx b/site/src/pages/CreateWorkspacePage/ExternalAuthWall/ExternalAuthItem.tsx
@@ -6,6 +6,7 @@ import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { FC, useEffect, useState } from "react";
 // eslint-disable-next-line no-restricted-imports -- used to allow extension with "component"
 import Box, { BoxProps } from "@mui/material/Box";
+import { Pill } from "components/Pill/Pill";
 
 type Status = "idle" | "connecting";
 
@@ -36,6 +37,9 @@ export const ExternalAuthItem: FC<ExternalAuthItemProps> = ({
       <span css={styles.providerHeader}>
         <ExternalImage src={provider.display_icon} css={styles.providerIcon} />
         <strong css={styles.providerName}>{provider.display_name}</strong>
+        {!provider.authenticated && (provider as any).optional && (
+          <Pill type="notice">Optional</Pill>
+        )}
       </span>
       {provider.authenticated ? (
         <span css={styles.providerConnectedLabel}>
diff --git a/site/src/pages/CreateWorkspacePage/ExternalAuthWall/ExternalAuthWall.stories.tsx b/site/src/pages/CreateWorkspacePage/ExternalAuthWall/ExternalAuthWall.stories.tsx
@@ -1,5 +1,5 @@
 import { TemplateVersionExternalAuth } from "api/typesGenerated";
-import { ExternalAuthBanner } from "./ExternalAuthBanner";
+import { ExternalAuthWall } from "./ExternalAuthWall";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const MockExternalAuth: TemplateVersionExternalAuth = {
@@ -11,13 +11,13 @@ const MockExternalAuth: TemplateVersionExternalAuth = {
   authenticated: false,
 };
 
-const meta: Meta<typeof ExternalAuthBanner> = {
-  title: "pages/CreateWorkspacePage/ExternalAuthBanner",
-  component: ExternalAuthBanner,
+const meta: Meta<typeof ExternalAuthWall> = {
+  title: "pages/CreateWorkspacePage/ExternalAuthWall",
+  component: ExternalAuthWall,
 };
 
 export default meta;
-type Story = StoryObj<typeof ExternalAuthBanner>;
+type Story = StoryObj<typeof ExternalAuthWall>;
 
 export const Default: Story = {
   args: {
diff --git a/site/src/pages/CreateWorkspacePage/ExternalAuthWall/ExternalAuthWall.tsx b/site/src/pages/CreateWorkspacePage/ExternalAuthWall/ExternalAuthWall.tsx
@@ -1,16 +1,16 @@
-import { Interpolation, Theme } from "@emotion/react";
-import { TemplateVersionExternalAuth } from "api/typesGenerated";
-import { ExternalAuthPollingState } from "../CreateWorkspacePage";
+import { type Interpolation, type Theme } from "@emotion/react";
+import { type FC } from "react";
+import { type TemplateVersionExternalAuth } from "api/typesGenerated";
+import { type ExternalAuthPollingState } from "../CreateWorkspacePage";
 import { ExternalAuthItem } from "./ExternalAuthItem";
-import { FC } from "react";
 
-type ExternalAuthBannerProps = {
+type ExternalAuthWallProps = {
   providers: TemplateVersionExternalAuth[];
   pollingState: ExternalAuthPollingState;
   onStartPolling: () => void;
 };
 
-export const ExternalAuthBanner: FC<ExternalAuthBannerProps> = ({
+export const ExternalAuthWall: FC<ExternalAuthWallProps> = ({
   providers,
   pollingState,
   onStartPolling,
