feat(site): add ActionCell component

Summary: This is a direct follow-up to #484 and a next step in porting over the AuditLog with appropriate refactoring. This isn't a direct port; we used to have a map of icons on the FE, but we want to no loner split the logic between FE and BE. If we want icons at a later time point, we can return an icon identifier in the response, or we can simplify the view and gain real estate by omitting the icons. At the time of this commit, I prefer omitting the icons. Details: - Port over ActionCell from v1, sans icons - Add tests and stories for ActionCell Impact: This change does not have any user-facing impact yet, because the ActionCell is not yet rendered in the product. This enables an incremental approach to migrating in the FE of the Audit Log, which is still waiting on the BE port. Relations: - This commit relates to #472, but does not finish it. - This commit should not merged until after #484 because it's based from it
coder · greyscaled · Mar 18, 2022 · Mar 19, 2022 · Mar 19, 2022 · Mar 19, 2022
commit 7bd039e91ba821f016e561ba0ab31392f14c1f88
diff --git a/site/src/components/AuditLog/ActionCell.stories.tsx b/site/src/components/AuditLog/ActionCell.stories.tsx
@@ -0,0 +1,15 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import React from "react"
+import { ActionCell, ActionCellProps } from "./ActionCell"
+
+export default {
+  title: "AuditLog/Cells/ActionCell",
+  component: ActionCell,
+} as ComponentMeta<typeof ActionCell>
+
+const Template: Story<ActionCellProps> = (args) => <ActionCell {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  action: "create",
+}
diff --git a/site/src/components/AuditLog/ActionCell.test.tsx b/site/src/components/AuditLog/ActionCell.test.tsx
@@ -0,0 +1,54 @@
+import { ActionCell, ActionCellProps } from "./ActionCell"
+import React from "react"
+import { render, screen } from "@testing-library/react"
+
+namespace Helpers {
+  export const Component: React.FC<ActionCellProps> = (props) => <ActionCell {...props} />
+}
+
+describe("ActionCellProps", () => {
+  it.each<[ActionCellProps, boolean]>([
+    [{ action: "Create" }, false],
+    [{ action: "" }, true],
+  ])(`validate(%p) throws: %p`, (props, throws) => {
+    const validate = () => {
+      ActionCellProps.validate(props)
+    }
+
+    if (throws) {
+      expect(validate).toThrowError()
+    } else {
+      expect(validate).not.toThrowError()
+    }
+  })
+})
+
+describe("ActionCell", () => {
+  it("renders the action", () => {
+    // Given
+    const props: ActionCellProps = {
+      action: "Create",
+    }
+
+    // When
+    render(<Helpers.Component {...props} />)
+
+    // Then
+    expect(screen.getByText(props.action)).toBeDefined()
+  })
+
+  it("throws when action is an empty string", () => {
+    // Given
+    const props: ActionCellProps = {
+      action: "",
+    }
+
+    // When
+    const shouldThrow = () => {
+      render(<Helpers.Component {...props} />)
+    }
+
+    // Then
+    expect(shouldThrow).toThrowError()
+  })
+})
diff --git a/site/src/components/AuditLog/ActionCell.tsx b/site/src/components/AuditLog/ActionCell.tsx
@@ -0,0 +1,31 @@
+import Box from "@material-ui/core/Box"
+import Typography from "@material-ui/core/Typography"
+import React from "react"
+
+export interface ActionCellProps {
+  action: string
+}
+export namespace ActionCellProps {
+  /**
+   * validate that the received props are valid
+   *
+   * @throws Error if invalid
+   */
+  export const validate = (props: ActionCellProps): void => {
+    if (!props.action.trim()) {
+      throw new Error(`invalid action: '${props.action}'`)
+    }
+  }
+}
+
+export const ActionCell: React.FC<ActionCellProps> = ({ action }) => {
+  ActionCellProps.validate({ action })
+
+  return (
+    <Box display="flex" alignItems="center">
+      <Typography color="textSecondary" variant="caption">
+        {action}
+      </Typography>
+    </Box>
+  )
+}