add stories

Emyrk · Emyrk · commit ea2f65ba53c3 · 2023-12-05T15:01:35.000-06:00
diff --git a/site/src/pages/UserExternalAuthSettingsPage/UserExternalAuthSettingsPageView.stories.tsx b/site/src/pages/UserExternalAuthSettingsPage/UserExternalAuthSettingsPageView.stories.tsx
@@ -1,36 +1,52 @@
-// import { ExternalAuthSettingsPageView } from "./ExternalAuthSettingsPageView";
-// import type { Meta, StoryObj } from "@storybook/react";
+import {
+  MockGithubAuthLink,
+  MockGithubExternalProvider,
+} from "testHelpers/entities";
+import { UserExternalAuthSettingsPageView } from "./UserExternalAuthSettingsPageView";
+import type { Meta, StoryObj } from "@storybook/react";
 
-// const meta: Meta<typeof ExternalAuthSettingsPageView> = {
-//   title: "pages/DeploySettingsPage/ExternalAuthSettingsPageView",
-//   component: ExternalAuthSettingsPageView,
-//   args: {
-//     config: {
-//       external_auth: [
-//         {
-//           id: "0000-1111",
-//           type: "GitHub",
-//           client_id: "client_id",
-//           regex: "regex",
-//           auth_url: "",
-//           token_url: "",
-//           validate_url: "",
-//           app_install_url: "https://github.com/apps/coder/installations/new",
-//           app_installations_url: "",
-//           no_refresh: false,
-//           scopes: [],
-//           extra_token_keys: [],
-//           device_flow: true,
-//           device_code_url: "",
-//           display_icon: "",
-//           display_name: "GitHub",
-//         },
-//       ],
-//     },
-//   },
-// };
+const meta: Meta<typeof UserExternalAuthSettingsPageView> = {
+  title: "pages/UserExternalAuthSettingsPage/UserExternalAuthSettingsPageView",
+  component: UserExternalAuthSettingsPageView,
+  args: {
+    isLoading: false,
+    getAuthsError: undefined,
+    unlinked: 0,
+    auths: {
+      providers: [],
+      links: [],
+    },
+    onUnlinkExternalAuth: () => {},
+    onValidateExternalAuth: () => {},
+  },
+};
 
-// export default meta;
-// type Story = StoryObj<typeof ExternalAuthSettingsPageView>;
+export default meta;
+type Story = StoryObj<typeof UserExternalAuthSettingsPageView>;
 
-// export const Page: Story = {};
+export const NoProviders: Story = {};
+
+export const Authenticated: Story = {
+  args: {
+    ...meta.args,
+    auths: {
+      providers: [MockGithubExternalProvider],
+      links: [MockGithubAuthLink],
+    },
+  },
+};
+
+export const UnAuthenticated: Story = {
+  args: {
+    ...meta.args,
+    auths: {
+      providers: [MockGithubExternalProvider],
+      links: [
+        {
+          ...MockGithubAuthLink,
+          authenticated: false,
+        },
+      ],
+    },
+  },
+};
diff --git a/site/src/pages/UserExternalAuthSettingsPage/UserExternalAuthSettingsPageView.tsx b/site/src/pages/UserExternalAuthSettingsPage/UserExternalAuthSettingsPageView.tsx
@@ -209,7 +209,7 @@ const useExternalAuth = (providerID: string, unlinked: number) => {
     if (unlinked > 0) {
       void refetch();
     }
-  }, [unlinked]);
+  }, [refetch, unlinked]);
 
   useEffect(() => {
     if (signedIn) {
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -2931,3 +2931,23 @@ export const DeploymentHealthUnhealthy: TypesGen.HealthcheckReport = {
     },
   },
 };
+
+export const MockGithubExternalProvider: TypesGen.ExternalAuthLinkProvider = {
+  id: "github",
+  type: "github",
+  device: false,
+  display_icon: "/icon/github.svg",
+  display_name: "GitHub",
+  allow_refresh: true,
+  allow_validate: true,
+};
+
+export const MockGithubAuthLink: TypesGen.ExternalAuthLink = {
+  provider_id: "github",
+  created_at: "",
+  updated_at: "",
+  has_refresh_token: true,
+  expires: "",
+  authenticated: true,
+  validate_error: "",
+};

Original file line number	Diff line number	Diff line change
`@@ -209,7 +209,7 @@ const useExternalAuth = (providerID: string, unlinked: number) => {`
`209`	`209`	`if (unlinked > 0) {`
`210`	`210`	`void refetch();`
`211`	`211`	`}`
`212`		`- }, [unlinked]);`
	`212`	`+ }, [refetch, unlinked]);`
`213`	`213`
`214`	`214`	`useEffect(() => {`
`215`	`215`	`if (signedIn) {`