Refactor AuditPage

coder · BrunoQuaresma · Sep 8, 2023 · Sep 7, 2023 · Sep 7, 2023 · Sep 7, 2023
commit 52fae611a4c6d1ea29fefde123c1c290fb6746b9
diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.stories.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.stories.tsx
@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AuditLogDescription } from "./AuditLogDescription";
+import {
+  MockAuditLog,
+  MockAuditLogSuccessfulLogin,
+  MockAuditLogUnsuccessfulLoginKnownUser,
+  MockAuditLogWithWorkspaceBuild,
+  MockWorkspaceCreateAuditLogForDifferentOwner,
+} from "testHelpers/entities";
+
+const meta: Meta<typeof AuditLogDescription> = {
+  title: "components/AuditLogDescription",
+  component: AuditLogDescription,
+};
+
+export default meta;
+type Story = StoryObj<typeof AuditLogDescription>;
+
+export const WorkspaceCreate: Story = {
+  args: {
+    auditLog: MockAuditLog,
+  },
+};
+
+export const WorkspaceBuildStop: Story = {
+  args: {
+    auditLog: MockAuditLogWithWorkspaceBuild,
+  },
+};
+
+export const WorkspaceBuildDuplicatedWord: Story = {
+  args: {
+    auditLog: {
+      ...MockAuditLogWithWorkspaceBuild,
+      additional_fields: {
+        workspace_name: "workspace",
+      },
+    },
+  },
+};
+
+export const CreateWorkspaceWithDiffOwner: Story = {
+  args: {
+    auditLog: MockWorkspaceCreateAuditLogForDifferentOwner,
+  },
+};
+
+export const SuccessLogin: Story = {
+  args: {
+    auditLog: MockAuditLogSuccessfulLogin,
+  },
+};
+
+export const UnsuccessfulLoginForUnkownUser: Story = {
+  args: {
+    auditLog: MockAuditLogUnsuccessfulLoginKnownUser,
+  },
+};
diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.test.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.test.tsx
diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/index.ts b/site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/index.ts
diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogDiff/index.ts b/site/src/pages/AuditPage/AuditLogRow/AuditLogDiff/index.ts
diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx
@@ -4,97 +4,109 @@ import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
-import { ComponentMeta, Story } from "@storybook/react";
 import {
   MockAuditLog,
   MockAuditLog2,
   MockAuditLogWithWorkspaceBuild,
   MockAuditLogWithDeletedResource,
   MockAuditLogGitSSH,
 } from "testHelpers/entities";
-import { AuditLogRow, AuditLogRowProps } from "./AuditLogRow";
+import { AuditLogRow } from "./AuditLogRow";
+import type { Meta, StoryObj } from "@storybook/react";
 
-export default {
+const meta: Meta<typeof AuditLogRow> = {
   title: "components/AuditLogRow",
   component: AuditLogRow,
-} as ComponentMeta<typeof AuditLogRow>;
+  decorators: [
+    (Story) => (
+      <TableContainer>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell style={{ paddingLeft: 32 }}>Logs</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <Story />
+          </TableBody>
+        </Table>
+      </TableContainer>
+    ),
+  ],
+};
 
-const Template: Story<AuditLogRowProps> = (args) => (
-  <TableContainer>
-    <Table>
-      <TableHead>
-        <TableRow>
-          <TableCell style={{ paddingLeft: 32 }}>Logs</TableCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        <AuditLogRow {...args} />
-      </TableBody>
-    </Table>
-  </TableContainer>
-);
+export default meta;
+type Story = StoryObj<typeof AuditLogRow>;
 
-export const NoDiff = Template.bind({});
-NoDiff.args = {
-  auditLog: {
-    ...MockAuditLog,
-    diff: {},
+export const NoDiff: Story = {
+  args: {
+    auditLog: {
+      ...MockAuditLog,
+      diff: {},
+    },
   },
 };
 
-export const WithDiff = Template.bind({});
-WithDiff.args = {
-  auditLog: MockAuditLog2,
-  defaultIsDiffOpen: true,
+export const WithDiff: Story = {
+  args: {
+    auditLog: MockAuditLog2,
+    defaultIsDiffOpen: true,
+  },
 };
 
-export const WithLongDiffRow = Template.bind({});
-WithLongDiffRow.args = {
-  auditLog: {
-    ...MockAuditLog2,
-    diff: {
-      ...MockAuditLog2.diff,
-      icon: {
-        old: "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.docker.com%2Fcompany%2Fnewsroom%2Fmedia-resources%2F&psig=AOvVaw3hLg_lm0tzXPBt74XZD2GC&ust=1666892413988000&source=images&cd=vfe&ved=0CAwQjRxqFwoTCPDsiKa4_voCFQAAAAAdAAAAABAD",
-        new: "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.kindpng.com%2Fimgv%2FhRowRxi_docker-icon-png-transparent-png%2F&psig=AOvVaw3hLg_lm0tzXPBt74XZD2GC&ust=1666892413988000&source=images&cd=vfe&ved=0CAwQjRxqFwoTCPDsiKa4_voCFQAAAAAdAAAAABAI",
-        secret: false,
+export const WithLongDiffRow: Story = {
+  args: {
+    auditLog: {
+      ...MockAuditLog2,
+      diff: {
+        ...MockAuditLog2.diff,
+        icon: {
+          old: "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.docker.com%2Fcompany%2Fnewsroom%2Fmedia-resources%2F&psig=AOvVaw3hLg_lm0tzXPBt74XZD2GC&ust=1666892413988000&source=images&cd=vfe&ved=0CAwQjRxqFwoTCPDsiKa4_voCFQAAAAAdAAAAABAD",
+          new: "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.kindpng.com%2Fimgv%2FhRowRxi_docker-icon-png-transparent-png%2F&psig=AOvVaw3hLg_lm0tzXPBt74XZD2GC&ust=1666892413988000&source=images&cd=vfe&ved=0CAwQjRxqFwoTCPDsiKa4_voCFQAAAAAdAAAAABAI",
+          secret: false,
+        },
       },
     },
+    defaultIsDiffOpen: true,
   },
-  defaultIsDiffOpen: true,
 };
 
-export const WithStoppedWorkspaceBuild = Template.bind({});
-WithStoppedWorkspaceBuild.args = {
-  auditLog: {
-    ...MockAuditLogWithWorkspaceBuild,
-    action: "stop",
+export const WithStoppedWorkspaceBuild: Story = {
+  args: {
+    auditLog: {
+      ...MockAuditLogWithWorkspaceBuild,
+      action: "stop",
+    },
   },
 };
 
-export const WithStartedWorkspaceBuild = Template.bind({});
-WithStartedWorkspaceBuild.args = {
-  auditLog: {
-    ...MockAuditLogWithWorkspaceBuild,
-    action: "start",
+export const WithStartedWorkspaceBuild: Story = {
+  args: {
+    auditLog: {
+      ...MockAuditLogWithWorkspaceBuild,
+      action: "start",
+    },
   },
 };
 
-export const WithDeletedWorkspaceBuild = Template.bind({});
-WithDeletedWorkspaceBuild.args = {
-  auditLog: {
-    ...MockAuditLogWithWorkspaceBuild,
-    action: "delete",
-    is_deleted: true,
+export const WithDeletedWorkspaceBuild: Story = {
+  args: {
+    auditLog: {
+      ...MockAuditLogWithWorkspaceBuild,
+      action: "delete",
+      is_deleted: true,
+    },
   },
 };
 
-export const DeletedResource = Template.bind({});
-DeletedResource.args = {
-  auditLog: MockAuditLogWithDeletedResource,
+export const DeletedResource: Story = {
+  args: {
+    auditLog: MockAuditLogWithDeletedResource,
+  },
 };
 
-export const SecretDiffValue = Template.bind({});
-SecretDiffValue.args = {
-  auditLog: MockAuditLogGitSSH,
+export const SecretDiffValue: Story = {
+  args: {
+    auditLog: MockAuditLogGitSSH,
+  },
 };
diff --git a/site/src/pages/AuditPage/AuditPage.test.tsx b/site/src/pages/AuditPage/AuditPage.test.tsx
@@ -59,15 +59,6 @@ describe("AuditPage", () => {
     );
   });
 
-  it("shows the audit logs", async () => {
-    // When
-    await renderPage();
-
-    // Then
-    await screen.findByTestId(`audit-log-row-${MockAuditLog.id}`);
-    screen.getByTestId(`audit-log-row-${MockAuditLog2.id}`);
-  });
-
   it("renders page 5", async () => {
     // Given
     const page = 5;