coder · BrunoQuaresma · May 4, 2022 · May 2, 2022 · May 3, 2022 · May 3, 2022
diff --git a/site/jest.setup.ts b/site/jest.setup.ts
@@ -1,3 +1,4 @@
+import "@testing-library/jest-dom"
 import { server } from "./src/testHelpers/server"
 
 // Establish API mocking before all tests through MSW.

diff --git a/site/package-lock.json b/site/package-lock.json
diff --git a/site/package.json b/site/package.json
@@ -58,6 +58,7 @@
     "@storybook/addon-essentials": "6.4.22",
     "@storybook/addon-links": "6.4.22",
     "@storybook/react": "6.4.22",
+    "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "12.1.5",
     "@testing-library/user-event": "14.1.1",
     "@types/express": "4.17.13",

diff --git a/site/src/api/index.ts b/site/src/api/index.ts
@@ -76,7 +76,7 @@ export const getApiKey = async (): Promise<Types.APIKeyResponse> => {
 }
 
 export const getUsers = async (): Promise<TypesGen.User[]> => {
-  const response = await axios.get<TypesGen.User[]>("/api/v2/users?offset=0&limit=1000")
+  const response = await axios.get<TypesGen.User[]>("/api/v2/users?status=active")
   return response.data
 }
 
@@ -135,3 +135,8 @@ export const updateProfile = async (userId: string, data: Types.UpdateProfileReq
   const response = await axios.put(`/api/v2/users/${userId}/profile`, data)
   return response.data
 }
+
+export const suspendUser = async (userId: TypesGen.User["id"]): Promise<TypesGen.User> => {
+  const response = await axios.put<TypesGen.User>(`/api/v2/users/${userId}/suspend`)
+  return response.data
+}
diff --git a/site/src/components/GlobalSnackbar/utils.test.ts b/site/src/components/GlobalSnackbar/utils.test.ts
@@ -1,4 +1,11 @@
-import { displaySuccess, isNotificationTextPrefixed, MsgType, NotificationMsg } from "./utils"
+import {
+  displayError,
+  displaySuccess,
+  isNotificationTextPrefixed,
+  MsgType,
+  NotificationMsg,
+  SnackbarEventType,
+} from "./utils"
 
 describe("Snackbar", () => {
   describe("isNotificationTextPrefixed", () => {
@@ -76,4 +83,18 @@ describe("Snackbar", () => {
       expect(extractNotificationEvent(dispatchEventMock)).toStrictEqual(expected)
     })
   })
+
+  describe("displayError", () => {
+    it("shows the title and the message", (done) => {
+      const message = "Some error happened"
+
+      window.addEventListener(SnackbarEventType, (event) => {
+        const notificationEvent = event as CustomEvent<NotificationMsg>
+        expect(notificationEvent.detail.msg).toEqual(message)
+        done()
+      })
+
+      displayError(message)
+    })
+  })
 })
diff --git a/site/src/components/GlobalSnackbar/utils.ts b/site/src/components/GlobalSnackbar/utils.ts
@@ -60,3 +60,7 @@ export const displayMsg = (msg: string, additionalMsg?: string): void => {
 export const displaySuccess = (msg: string, additionalMsg?: string): void => {
   dispatchNotificationEvent(MsgType.Success, msg, additionalMsg ? [additionalMsg] : undefined)
 }
+
+export const displayError = (msg: string, additionalMsg?: string): void => {
+  dispatchNotificationEvent(MsgType.Error, msg, additionalMsg ? [additionalMsg] : undefined)
+}
diff --git a/site/src/components/UsersTable/UsersTable.tsx b/site/src/components/UsersTable/UsersTable.tsx
@@ -5,7 +5,7 @@ import { Column, Table } from "../Table/Table"
 import { TableRowMenu } from "../TableRowMenu/TableRowMenu"
 import { UserCell } from "../UserCell/UserCell"
 
-const Language = {
+export const Language = {
   pageTitle: "Users",
   usersTitle: "All users",
   emptyMessage: "No users found",
@@ -27,9 +27,10 @@ const columns: Column<UserResponse>[] = [
 
 export interface UsersTableProps {
   users: UserResponse[]
+  onSuspendUser: (user: UserResponse) => void
 }
 
-export const UsersTable: React.FC<UsersTableProps> = ({ users }) => {
+export const UsersTable: React.FC<UsersTableProps> = ({ users, onSuspendUser }) => {
   return (
     <Table
       columns={columns}
@@ -42,9 +43,7 @@ export const UsersTable: React.FC<UsersTableProps> = ({ users }) => {
           menuItems={[
             {
               label: Language.suspendMenuItem,
-              onClick: () => {
-                // TO-DO: Add suspend action here
-              },
+              onClick: onSuspendUser,
             },
           ]}
         />

diff --git a/site/src/pages/UsersPage/UsersPage.test.tsx b/site/src/pages/UsersPage/UsersPage.test.tsx
@@ -1,12 +1,93 @@
-import { screen } from "@testing-library/react"
+import { fireEvent, screen, waitFor, within } from "@testing-library/react"
 import React from "react"
-import { render } from "../../testHelpers"
-import { UsersPage } from "./UsersPage"
+import * as API from "../../api"
+import { GlobalSnackbar } from "../../components/GlobalSnackbar/GlobalSnackbar"
+import { Language as UsersTableLanguage } from "../../components/UsersTable/UsersTable"
+import { MockUser, MockUser2, render } from "../../testHelpers"
+import { Language as usersXServiceLanguage } from "../../xServices/users/usersXService"
+import { Language as UsersPageLanguage, UsersPage } from "./UsersPage"
+
+const suspendUser = async (setupActionSpies: () => void) => {
+  // Get the first user in the table
+  const users = await screen.findAllByText(/.*@coder.com/)
+  const firstUserRow = users[0].closest("tr")
+  if (!firstUserRow) {
+    throw new Error("Error on get the first user row")
+  }
+
+  // Click on the "more" button to display the "Suspend" option
+  const moreButton = within(firstUserRow).getByLabelText("more")
+  fireEvent.click(moreButton)
+  const menu = screen.getByRole("menu")
+  const suspendButton = within(menu).getByText(UsersTableLanguage.suspendMenuItem)
+  fireEvent.click(suspendButton)
+
+  // Check if the confirm message is displayed
+  const confirmDialog = screen.getByRole("dialog")
+  expect(confirmDialog).toHaveTextContent(`${UsersPageLanguage.suspendDialogMessagePrefix} ${MockUser.username}?`)
+
+  // Setup spies to check the actions after
+  setupActionSpies()
+
+  // Click on the "Confirm" button
+  const confirmButton = within(confirmDialog).getByText(UsersPageLanguage.suspendDialogAction)
+  fireEvent.click(confirmButton)
+}
 
 describe("Users Page", () => {
   it("shows users", async () => {
     render(<UsersPage />)
     const users = await screen.findAllByText(/.*@coder.com/)
     expect(users.length).toEqual(2)
   })
+
+  describe("suspend user", () => {
+    describe("when it is success", () => {
+      it("shows a success message and refresh the page", async () => {
+        render(
+          <>
+            <UsersPage />
+            <GlobalSnackbar />
+          </>,
+        )
+
+        await suspendUser(() => {
+          jest.spyOn(API, "suspendUser").mockResolvedValueOnce(MockUser)
+          jest.spyOn(API, "getUsers").mockImplementationOnce(() => Promise.resolve([MockUser, MockUser2]))
+        })
+
+        // Check if the success message is displayed
+        await screen.findByText(usersXServiceLanguage.suspendUserSuccess)
+
+        // Check if the API was called correctly
+        expect(API.suspendUser).toBeCalledTimes(1)
+        expect(API.suspendUser).toBeCalledWith(MockUser.id)
+
+        // Check if the users list was reload
+        await waitFor(() => expect(API.getUsers).toBeCalledTimes(1))
+      })
+    })
+
+    describe("when it fails", () => {
+      it("shows an error message", async () => {
+        render(
+          <>
+            <UsersPage />
+            <GlobalSnackbar />
+          </>,
+        )
+
+        await suspendUser(() => {
+          jest.spyOn(API, "suspendUser").mockRejectedValueOnce({})
+        })
+
+        // Check if the success message is displayed
+        await screen.findByText(usersXServiceLanguage.suspendUserError)
+
+        // Check if the API was called correctly
+        expect(API.suspendUser).toBeCalledTimes(1)
+        expect(API.suspendUser).toBeCalledWith(MockUser.id)
+      })
+    })
+  })
 })
diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
@@ -1,16 +1,23 @@
 import { useActor } from "@xstate/react"
 import React, { useContext, useEffect } from "react"
 import { useNavigate } from "react-router"
-import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
+import { ConfirmDialog } from "../../components/ConfirmDialog/ConfirmDialog"
 import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
 import { XServiceContext } from "../../xServices/StateContext"
 import { UsersPageView } from "./UsersPageView"
 
+export const Language = {
+  suspendDialogTitle: "Suspend user",
+  suspendDialogAction: "Suspend",
+  suspendDialogMessagePrefix: "Do you want to suspend the user",
+}
+
 export const UsersPage: React.FC = () => {
   const xServices = useContext(XServiceContext)
   const [usersState, usersSend] = useActor(xServices.usersXService)
-  const { users, getUsersError } = usersState.context
+  const { users, getUsersError, userIdToSuspend } = usersState.context
   const navigate = useNavigate()
+  const userToBeSuspended = users?.find((u) => u.id === userIdToSuspend)
 
   /**
    * Fetch users on component mount
@@ -19,20 +26,42 @@ export const UsersPage: React.FC = () => {
     usersSend("GET_USERS")
   }, [usersSend])
 
-  if (usersState.matches("error")) {
-    return <ErrorSummary error={getUsersError} />
-  }
-
   if (!users) {
     return <FullScreenLoader />
   } else {
     return (
-      <UsersPageView
-        users={users}
-        openUserCreationDialog={() => {
-          navigate("/users/create")
-        }}
-      />
+      <>
+        <UsersPageView
+          users={users}
+          openUserCreationDialog={() => {
+            navigate("/users/create")
+          }}
+          onSuspendUser={(user) => {
+            usersSend({ type: "SUSPEND_USER", userId: user.id })
+          }}
+          error={getUsersError}
+        />
+
+        <ConfirmDialog
+          type="delete"
+          hideCancel={false}
+          open={usersState.matches("confirmUserSuspension")}
+          confirmLoading={usersState.matches("suspendingUser")}
+          title={Language.suspendDialogTitle}
+          confirmText={Language.suspendDialogAction}
+          onConfirm={() => {
+            usersSend("CONFIRM_USER_SUSPENSION")
+          }}
+          onClose={() => {
+            usersSend("CANCEL_USER_SUSPENSION")
+          }}
+          description={
+            <>
+              {Language.suspendDialogMessagePrefix} <strong>{userToBeSuspended?.username}</strong>?
+            </>
+          }
+        />
+      </>
     )
   }
 }
diff --git a/site/src/pages/UsersPage/UsersPageView.tsx b/site/src/pages/UsersPage/UsersPageView.tsx
@@ -1,5 +1,6 @@
 import React from "react"
 import { UserResponse } from "../../api/types"
+import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
 import { Header } from "../../components/Header/Header"
 import { Margins } from "../../components/Margins/Margins"
 import { Stack } from "../../components/Stack/Stack"
@@ -13,14 +14,21 @@ export const Language = {
 export interface UsersPageViewProps {
   users: UserResponse[]
   openUserCreationDialog: () => void
+  onSuspendUser: (user: UserResponse) => void
+  error?: unknown
 }
 
-export const UsersPageView: React.FC<UsersPageViewProps> = ({ users, openUserCreationDialog }) => {
+export const UsersPageView: React.FC<UsersPageViewProps> = ({
+  users,
+  openUserCreationDialog,
+  onSuspendUser,
+  error,
+}) => {
   return (
     <Stack spacing={4}>
       <Header title={Language.pageTitle} action={{ text: Language.newUserButton, onClick: openUserCreationDialog }} />
       <Margins>
-        <UsersTable users={users} />
+        {error ? <ErrorSummary error={error} /> : <UsersTable users={users} onSuspendUser={onSuspendUser} />}
       </Margins>
     </Stack>
   )

diff --git a/site/src/testHelpers/index.tsx b/site/src/testHelpers/index.tsx
@@ -30,9 +30,11 @@ export function renderWithAuth(ui: JSX.Element, { route = "/" }: { route?: strin
   const renderResult = wrappedRender(
     <MemoryRouter initialEntries={[route]}>
       <XServiceProvider>
-        <Routes>
-          <Route path={route} element={<RequireAuth>{ui}</RequireAuth>} />
-        </Routes>
+        <ThemeProvider theme={dark}>
+          <Routes>
+            <Route path={route} element={<RequireAuth>{ui}</RequireAuth>} />
+          </Routes>
+        </ThemeProvider>
       </XServiceProvider>
     </MemoryRouter>,
   )