Fix chromatic errors

BrunoQuaresma · BrunoQuaresma · commit 60f12e69be7f · 2023-08-25T17:17:35.000Z
diff --git a/site/src/components/UsersTable/UsersTable.stories.tsx b/site/src/components/UsersTable/UsersTable.stories.tsx
@@ -1,73 +1,80 @@
-import { ComponentMeta, Story } from "@storybook/react"
 import {
   MockUser,
   MockUser2,
   MockAssignableSiteRoles,
+  MockAuthMethods,
 } from "testHelpers/entities"
-import { UsersTable, UsersTableProps } from "./UsersTable"
+import { UsersTable } from "./UsersTable"
+import type { Meta, StoryObj } from "@storybook/react"
 
-export default {
+const meta: Meta<typeof UsersTable> = {
   title: "components/UsersTable",
   component: UsersTable,
   args: {
     isNonInitialPage: false,
+    authMethods: MockAuthMethods,
   },
-} as ComponentMeta<typeof UsersTable>
+}
 
-const Template: Story<UsersTableProps> = (args) => <UsersTable {...args} />
+export default meta
+type Story = StoryObj<typeof UsersTable>
 
-export const Example = Template.bind({})
-Example.args = {
-  users: [MockUser, MockUser2],
-  roles: MockAssignableSiteRoles,
-  canEditUsers: false,
+export const Example: Story = {
+  args: {
+    users: [MockUser, MockUser2],
+    roles: MockAssignableSiteRoles,
+    canEditUsers: false,
+  },
 }
 
-export const Editable = Template.bind({})
-Editable.args = {
-  users: [
-    MockUser,
-    MockUser2,
-    {
-      ...MockUser,
-      username: "John Doe",
-      email: "john.doe@coder.com",
-      roles: [],
-      status: "dormant",
-    },
-    {
-      ...MockUser,
-      username: "Roger Moore",
-      email: "roger.moore@coder.com",
-      roles: [],
-      status: "suspended",
-    },
-    {
-      ...MockUser,
-      username: "OIDC User",
-      email: "oidc.user@coder.com",
-      roles: [],
-      status: "active",
-      login_type: "oidc",
-    },
-  ],
-  roles: MockAssignableSiteRoles,
-  canEditUsers: true,
-  canViewActivity: true,
+export const Editable: Story = {
+  args: {
+    users: [
+      MockUser,
+      MockUser2,
+      {
+        ...MockUser,
+        username: "John Doe",
+        email: "john.doe@coder.com",
+        roles: [],
+        status: "dormant",
+      },
+      {
+        ...MockUser,
+        username: "Roger Moore",
+        email: "roger.moore@coder.com",
+        roles: [],
+        status: "suspended",
+      },
+      {
+        ...MockUser,
+        username: "OIDC User",
+        email: "oidc.user@coder.com",
+        roles: [],
+        status: "active",
+        login_type: "oidc",
+      },
+    ],
+    roles: MockAssignableSiteRoles,
+    canEditUsers: true,
+    canViewActivity: true,
+  },
 }
 
-export const Empty = Template.bind({})
-Empty.args = {
-  users: [],
-  roles: MockAssignableSiteRoles,
+export const Empty: Story = {
+  args: {
+    users: [],
+    roles: MockAssignableSiteRoles,
+  },
 }
 
-export const Loading = Template.bind({})
-Loading.args = {
-  users: [],
-  roles: MockAssignableSiteRoles,
-  isLoading: true,
-}
-Loading.parameters = {
-  chromatic: { pauseAnimationAtEnd: true },
+export const Loading: Story = {
+  args: {
+    users: [],
+    roles: MockAssignableSiteRoles,
+    isLoading: true,
+  },
+  parameters: {
+    chromatic: { pauseAnimationAtEnd: true },
+  },
 }
diff --git a/site/src/components/UsersTable/UsersTableBody.tsx b/site/src/components/UsersTable/UsersTableBody.tsx
@@ -21,6 +21,10 @@ import HideSourceOutlined from "@mui/icons-material/HideSourceOutlined"
 import KeyOutlined from "@mui/icons-material/KeyOutlined"
 import GitHub from "@mui/icons-material/GitHub"
 import PasswordOutlined from "@mui/icons-material/PasswordOutlined"
+import relativeTime from "dayjs/plugin/relativeTime"
+import ShieldOutlined from "@mui/icons-material/ShieldOutlined"
+
+dayjs.extend(relativeTime)
 
 const isOwnerRole = (role: TypesGen.Role): boolean => {
   return role.name === "owner"
@@ -87,7 +91,7 @@ export const UsersTableBody: FC<
   return (
     <ChooseOne>
       <Cond condition={Boolean(isLoading)}>
-        <TableLoaderSkeleton columns={5} useAvatarData />
+        <TableLoaderSkeleton columns={canEditUsers ? 5 : 4} useAvatarData />
       </Cond>
       <Cond condition={!users || users.length === 0}>
         <ChooseOne>
@@ -267,17 +271,21 @@ const LoginType = ({
     icon = <GitHub sx={iconStyles} />
   } else if (value === "token") {
     displayName = "Token"
-    icon = <KeyOutlined />
+    icon = <KeyOutlined sx={iconStyles} />
   } else if (value === "oidc") {
-    displayName = authMethods.oidc.signInText
-    icon = (
-      <Box
-        component="img"
-        alt="Open ID Connect icon"
-        src={authMethods.oidc.iconUrl}
-        sx={iconStyles}
-      />
-    )
+    displayName =
+      authMethods.oidc.signInText === "" ? "OIDC" : authMethods.oidc.signInText
+    icon =
+      authMethods.oidc.iconUrl === "" ? (
+        <ShieldOutlined sx={iconStyles} />
+      ) : (
+        <Box
+          component="img"
+          alt="Open ID Connect icon"
+          src={authMethods.oidc.iconUrl}
+          sx={iconStyles}
+        />
+      )
   }
 
   return (
