fix storybook!

coder · aslilac · Nov 2, 2023 · Oct 31, 2023 · Oct 31, 2023 · Oct 31, 2023
commit 9af85c89529276a432f994cc31f97f999595bc03
diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx
@@ -220,7 +220,7 @@ const styles = {
     },
 
     "& .MuiTableCell-root:last-child": {
-      paddingRight: theme.spacing(2),
+      paddingRight: `${theme.spacing(2)} !important`,
     },
   }),
   arrowRight: (theme) => ({

diff --git a/site/src/pages/LoginPage/LoginPageView.stories.tsx b/site/src/pages/LoginPage/LoginPageView.stories.tsx
@@ -1,4 +1,9 @@
-import { MockAuthMethods, mockApiError } from "testHelpers/entities";
+import {
+  MockAuthMethodsAll,
+  MockAuthMethodsExternal,
+  MockAuthMethodsPasswordOnly,
+  mockApiError,
+} from "testHelpers/entities";
 import { LoginPageView } from "./LoginPageView";
 import type { Meta, StoryObj } from "@storybook/react";
 
@@ -12,17 +17,37 @@ type Story = StoryObj<typeof LoginPageView>;
 
 export const Example: Story = {
   args: {
-    authMethods: MockAuthMethods,
+    authMethods: MockAuthMethodsPasswordOnly,
+  },
+};
+
+export const WithExternalAuthMethods: Story = {
+  args: {
+    authMethods: MockAuthMethodsExternal,
+  },
+};
+
+export const WithAllAuthMethods: Story = {
+  args: {
+    authMethods: MockAuthMethodsAll,
   },
 };
 
 export const AuthError: Story = {
   args: {
     error: mockApiError({
-      message: "User or password is incorrect",
-      detail: "Please, try again",
+      message: "Incorrect email or password.",
+    }),
+    authMethods: MockAuthMethodsPasswordOnly,
+  },
+};
+
+export const ExternalAuthError: Story = {
+  args: {
+    error: mockApiError({
+      message: "Incorrect email or password.",
     }),
-    authMethods: MockAuthMethods,
+    authMethods: MockAuthMethodsAll,
   },
 };
 
@@ -35,6 +60,6 @@ export const LoadingAuthMethods: Story = {
 export const SigningIn: Story = {
   args: {
     isSigningIn: true,
-    authMethods: MockAuthMethods,
+    authMethods: MockAuthMethodsPasswordOnly,
   },
 };
diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.test.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.test.tsx
@@ -6,10 +6,7 @@ import {
   waitForLoaderToBeRemoved,
 } from "testHelpers/renderHelpers";
 import { SecurityPage } from "./SecurityPage";
-import {
-  MockAuthMethodsWithPasswordType,
-  mockApiError,
-} from "testHelpers/entities";
+import { MockAuthMethodsAll, mockApiError } from "testHelpers/entities";
 import userEvent from "@testing-library/user-event";
 import * as SSO from "./SingleSignOnSection";
 import { OAuthConversionResponse } from "api/typesGenerated";
@@ -40,9 +37,7 @@ const fillAndSubmitSecurityForm = () => {
 };
 
 beforeEach(() => {
-  jest
-    .spyOn(API, "getAuthMethods")
-    .mockResolvedValue(MockAuthMethodsWithPasswordType);
+  jest.spyOn(API, "getAuthMethods").mockResolvedValue(MockAuthMethodsAll);
   jest.spyOn(API, "getUserLoginType").mockResolvedValue({
     login_type: "password",
   });

diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SecurityPageView.stories.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SecurityPageView.stories.tsx
@@ -2,8 +2,8 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { SecurityPageView } from "./SecurityPage";
 import { action } from "@storybook/addon-actions";
 import {
-  MockAuthMethods,
-  MockAuthMethodsWithPasswordType,
+  MockAuthMethodsPasswordOnly,
+  MockAuthMethodsAll,
 } from "testHelpers/entities";
 import { ComponentProps } from "react";
 import set from "lodash/fp/set";
@@ -22,7 +22,7 @@ const defaultArgs: ComponentProps<typeof SecurityPageView> = {
       userLoginType: {
         login_type: "password",
       },
-      authMethods: MockAuthMethods,
+      authMethods: MockAuthMethodsPasswordOnly,
       closeConfirmation: action("closeConfirmation"),
       confirm: action("confirm"),
       error: undefined,
@@ -52,19 +52,15 @@ export const NoOIDCAvailable: Story = {
 };
 
 export const UserLoginTypeIsPassword: Story = {
-  args: set(
-    "oidc.section.authMethods",
-    MockAuthMethodsWithPasswordType,
-    defaultArgs,
-  ),
+  args: set("oidc.section.authMethods", MockAuthMethodsAll, defaultArgs),
 };
 
 export const ConfirmingOIDCConversion: Story = {
   args: set(
     "oidc.section",
     {
       ...defaultArgs.oidc?.section,
-      authMethods: MockAuthMethodsWithPasswordType,
+      authMethods: MockAuthMethodsAll,
       isConfirming: true,
     },
     defaultArgs,

diff --git a/site/src/pages/UsersPage/UsersPageView.stories.tsx b/site/src/pages/UsersPage/UsersPageView.stories.tsx
@@ -4,7 +4,7 @@ import {
   MockUser2,
   MockAssignableSiteRoles,
   mockApiError,
-  MockAuthMethods,
+  MockAuthMethodsPasswordOnly,
 } from "testHelpers/entities";
 import { UsersPageView } from "./UsersPageView";
 import { ComponentProps } from "react";
@@ -37,7 +37,7 @@ const meta: Meta<typeof UsersPageView> = {
     count: 2,
     canEditUsers: true,
     filterProps: defaultFilterProps,
-    authMethods: MockAuthMethods,
+    authMethods: MockAuthMethodsPasswordOnly,
   },
 };
 

diff --git a/site/src/pages/UsersPage/UsersTable/UsersTable.stories.tsx b/site/src/pages/UsersPage/UsersTable/UsersTable.stories.tsx
@@ -2,7 +2,7 @@ import {
   MockUser,
   MockUser2,
   MockAssignableSiteRoles,
-  MockAuthMethods,
+  MockAuthMethodsPasswordOnly,
   MockGroup,
 } from "testHelpers/entities";
 import { UsersTable } from "./UsersTable";
@@ -18,7 +18,7 @@ const meta: Meta<typeof UsersTable> = {
   component: UsersTable,
   args: {
     isNonInitialPage: false,
-    authMethods: MockAuthMethods,
+    authMethods: MockAuthMethodsPasswordOnly,
   },
 };
 

diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -1254,16 +1254,30 @@ export const MockUserAgent = {
   os: "Windows 10",
 };
 
-export const MockAuthMethods: TypesGen.AuthMethods = {
+export const MockAuthMethodsPasswordOnly: TypesGen.AuthMethods = {
   password: { enabled: true },
   github: { enabled: false },
   oidc: { enabled: false, signInText: "", iconUrl: "" },
 };
 
-export const MockAuthMethodsWithPasswordType: TypesGen.AuthMethods = {
-  ...MockAuthMethods,
+export const MockAuthMethodsExternal: TypesGen.AuthMethods = {
+  password: { enabled: false },
   github: { enabled: true },
-  oidc: { enabled: true, signInText: "", iconUrl: "" },
+  oidc: {
+    enabled: true,
+    signInText: "Google",
+    iconUrl: "/icon/google.svg",
+  },
+};
+
+export const MockAuthMethodsAll: TypesGen.AuthMethods = {
+  password: { enabled: true },
+  github: { enabled: true },
+  oidc: {
+    enabled: true,
+    signInText: "Google",
+    iconUrl: "/icon/google.svg",
+  },
 };
 
 export const MockGitSSHKey: TypesGen.GitSSHKey = {

diff --git a/site/src/testHelpers/handlers.ts b/site/src/testHelpers/handlers.ts
@@ -182,7 +182,7 @@ export const handlers = [
     return res(ctx.status(200), ctx.json(M.MockAPIKey));
   }),
   rest.get("/api/v2/users/authmethods", async (req, res, ctx) => {
-    return res(ctx.status(200), ctx.json(M.MockAuthMethods));
+    return res(ctx.status(200), ctx.json(M.MockAuthMethodsPasswordOnly));
   }),
   rest.get("/api/v2/users/roles", async (req, res, ctx) => {
     return res(ctx.status(200), ctx.json(M.MockSiteRoles));