feat(site): add UserCell component

greyscaled · greyscaled · commit 7a6df4119ae7 · 2022-03-18T21:48:38.000Z
Summary: This is a first step in porting over v1 AuditLog in a refactored/cleaned up fashion. This isn't a direct port, since we do not yet have a UserAvatar component. Details: - Port over UserCell from v1, sans UserAvatar impl - Add tests and stories for UserCell Notes: We do not have a holistic solution for handling localization, but starting from some kind of easy way that collects/resources strings will make the migration significantly easier. It will also help out our product copy owner, @khorne3 with maintenance. An RFC regarding this might be necessitated. Impact: This change does not have any user-facing impact yet, because the UserCell 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 merge until after #465 and #483 because it's based on them.
diff --git a/site/src/api/types.ts b/site/src/api/types.ts
@@ -1,7 +1,3 @@
-export interface LoginResponse {
-  session_token: string
-}
-
 export interface UserResponse {
   readonly id: string
   readonly username: string
@@ -59,3 +55,10 @@ export interface Workspace {
 export interface APIKeyResponse {
   key: string
 }
+
+export interface UserAgent {
+  readonly ip_address: string
+  readonly os: string
+  readonly browser: string
+  readonly device: string
+}
diff --git a/site/src/components/AuditLog/UserCell.stories.tsx b/site/src/components/AuditLog/UserCell.stories.tsx
@@ -0,0 +1,22 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import React from "react"
+import { MockUser, MockUserAgent } from "../../test_helpers"
+import { UserCell, UserCellProps } from "./UserCell"
+
+export default {
+  title: "AuditLog/Cells/UserCell",
+  component: UserCell,
+  argTypes: {
+    onSelectEmail: {
+      action: "onSelectEmail",
+    },
+  },
+} as ComponentMeta<typeof UserCell>
+
+const Template: Story<UserCellProps> = (args) => <UserCell {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  user: MockUser,
+  userAgent: MockUserAgent,
+}
diff --git a/site/src/components/AuditLog/UserCell.test.tsx b/site/src/components/AuditLog/UserCell.test.tsx
@@ -0,0 +1,77 @@
+import { MockUser, MockUserAgent, WrapperComponent } from "../../test_helpers"
+import { LANGUAGE, UserCell, UserCellProps } from "./UserCell"
+import React from "react"
+import { fireEvent, render, screen } from "@testing-library/react"
+
+namespace Helpers {
+  export const Props: UserCellProps = {
+    onSelectEmail: jest.fn(),
+    user: MockUser,
+    userAgent: MockUserAgent,
+  }
+
+  export const Component: React.FC<UserCellProps> = (props) => (
+    <WrapperComponent>
+      <UserCell {...props} />
+    </WrapperComponent>
+  )
+}
+
+describe("UserCell", () => {
+  // callbacks
+  it("calls onUserClick when an email address is clicked", () => {
+    // Given
+    const onSelectEmailMock = jest.fn()
+    const props: UserCellProps = {
+      ...Helpers.Props,
+      onSelectEmail: onSelectEmailMock,
+    }
+
+    // When - click the user's email address
+    render(<Helpers.Component {...props} />)
+    fireEvent.click(screen.getByText(props.user.email))
+
+    // Then - callback was fired once
+    expect(onSelectEmailMock).toHaveBeenCalledTimes(1)
+  })
+
+  // email address cases
+  it("renders an existing members' email address", () => {
+    // Given
+    const props: UserCellProps = Helpers.Props
+
+    // When
+    render(<Helpers.Component {...props} />)
+
+    // Then - email address is visible
+    expect(screen.getByText(props.user.email)).toBeDefined()
+  })
+  it(`renders '${LANGUAGE.emptyUser}' for non-existing members`, () => {
+    // Given
+    const props: UserCellProps = {
+      ...Helpers.Props,
+      user: {
+        ...MockUser,
+        email: "",
+      },
+    }
+
+    // When
+    render(<Helpers.Component {...props} />)
+
+    // Then - 'Deleted user' is visible
+    expect(screen.getByText(LANGUAGE.emptyUser)).toBeDefined()
+  })
+
+  // ip address
+  it("renders user agent IP address", () => {
+    // Given
+    const props: UserCellProps = Helpers.Props
+
+    // When
+    render(<Helpers.Component {...props} />)
+
+    // Then - ip address is visible
+    expect(screen.getByText(props.userAgent.ip_address)).toBeDefined()
+  })
+})
diff --git a/site/src/components/AuditLog/UserCell.tsx b/site/src/components/AuditLog/UserCell.tsx
@@ -0,0 +1,59 @@
+import Box from "@material-ui/core/Box"
+import Link from "@material-ui/core/Link"
+import { makeStyles } from "@material-ui/core/styles"
+import Typography from "@material-ui/core/Typography"
+import React from "react"
+import { UserAgent, UserResponse } from "../../api/types"
+
+export const LANGUAGE = {
+  emptyUser: "Deleted user",
+}
+
+export interface UserCellProps {
+  onSelectEmail: () => void
+  user: UserResponse
+  userAgent: UserAgent
+}
+
+const useStyles = makeStyles((theme) => ({
+  primaryText: {
+    color: theme.palette.text.primary,
+    fontSize: "16px",
+    lineHeight: "15px",
+    marginBottom: "5px",
+
+    "&.MuiTypography-caption": {
+      cursor: "pointer",
+    },
+  },
+}))
+
+export const UserCell: React.FC<UserCellProps> = ({ onSelectEmail, user, userAgent }) => {
+  const styles = useStyles()
+
+  return (
+    <Box alignItems="center" display="flex" flexDirection="row">
+      {/* TODO - adjust margin */}
+      {/* <Box display="flex" margin="auto 14px auto 0"> */}
+      {/* TODO - implement UserAvatar */}
+      {/* <UserAvatar user={user} popover /> */}
+      {/* </Box> */}
+
+      <Box display="flex" flexDirection="column">
+        {user.email ? (
+          <Link className={styles.primaryText} onClick={onSelectEmail} variant="caption">
+            {user.email}
+          </Link>
+        ) : (
+          <Typography color="textSecondary" variant="caption">
+            {LANGUAGE.emptyUser}
+          </Typography>
+        )}
+
+        <Typography color="textSecondary" variant="caption">
+          {userAgent.ip_address}
+        </Typography>
+      </Box>
+    </Box>
+  )
+}
diff --git a/site/src/test_helpers/entities.ts b/site/src/test_helpers/entities.ts
@@ -1,4 +1,4 @@
-import { Provisioner, Organization, Project, Workspace, UserResponse } from "../api/types"
+import { Provisioner, Organization, Project, Workspace, UserResponse, UserAgent } from "../api/types"
 
 export const MockSessionToken = { session_token: "my-session-token" }
 
@@ -41,3 +41,10 @@ export const MockWorkspace: Workspace = {
   project_id: "project-id",
   owner_id: "test-user-id",
 }
+
+export const MockUserAgent: UserAgent = {
+  browser: "Chrome 99.0.4844",
+  device: "Other",
+  ip_address: "11.22.33.44",
+  os: "Windows 10",
+}
