feat: Add filter on Users page (#2653)

This commit adds a new filter feature to the Users page.

- adds a filter to the getUsers API call and users state machine.
- adds filter UI to Users page view.
- addresses error handling in the filter component, users page and machine.
- refactors user table code.
- refactors common code for workspace filter.
- adds and updates unit tests and stories.

site/src/util/filters.test.ts

@@ -0,0 +1,17 @@
+import * as TypesGen from "../api/typesGenerated"
+import { queryToFilter } from "./filters"
+
+describe("queryToFilter", () => {
+  it.each<[string | undefined, TypesGen.WorkspaceFilter | TypesGen.UsersRequest]>([
+    [undefined, {}],
+    ["", { q: "" }],
+    ["asdkfvjn", { q: "asdkfvjn" }],
+    ["owner:me", { q: "owner:me" }],
+    ["owner:me owner:me2", { q: "owner:me owner:me2" }],
+    ["me/dev", { q: "me/dev" }],
+    ["me/", { q: "me/" }],
+    ["    key:val      owner:me       ", { q: "key:val owner:me" }],
+  ])(`query=%p, filter=%p`, (query, filter) => {
+    expect(queryToFilter(query)).toEqual(filter)
+  })
+})

site/src/util/filters.ts

@@ -0,0 +1,18 @@
+import * as TypesGen from "../api/typesGenerated"
+
+export const queryToFilter = (query?: string): TypesGen.WorkspaceFilter | TypesGen.UsersRequest => {
+  const preparedQuery = query?.trim().replace(/  +/g, " ")
+  return {
+    q: preparedQuery,
+  }
+}
+
+export const workspaceFilterQuery = {
+  me: "owner:me",
+  all: "",
+}
+
+export const userFilterQuery = {
+  active: "status:active",
+  all: "",
+}

site/src/util/workspace.test.ts

@@ -1,12 +1,7 @@
 import dayjs from "dayjs"
 import * as TypesGen from "../api/typesGenerated"
 import * as Mocks from "../testHelpers/entities"
-import {
-  defaultWorkspaceExtension,
-  isWorkspaceDeleted,
-  isWorkspaceOn,
-  workspaceQueryToFilter,
-} from "./workspace"
+import { defaultWorkspaceExtension, isWorkspaceDeleted, isWorkspaceOn } from "./workspace"
 
 describe("util > workspace", () => {
   describe("isWorkspaceOn", () => {
@@ -106,18 +101,4 @@ describe("util > workspace", () => {
       expect(defaultWorkspaceExtension(dayjs(startTime))).toEqual(request)
     })
   })
-  describe("workspaceQueryToFilter", () => {
-    it.each<[string | undefined, TypesGen.WorkspaceFilter]>([
-      [undefined, {}],
-      ["", { q: "" }],
-      ["asdkfvjn", { q: "asdkfvjn" }],
-      ["owner:me", { q: "owner:me" }],
-      ["owner:me owner:me2", { q: "owner:me owner:me2" }],
-      ["me/dev", { q: "me/dev" }],
-      ["me/", { q: "me/" }],
-      ["    key:val      owner:me       ", { q: "key:val owner:me" }],
-    ])(`query=%p, filter=%p`, (query, filter) => {
-      expect(workspaceQueryToFilter(query)).toEqual(filter)
-    })
-  })
 })

site/src/util/workspace.ts

@@ -296,15 +296,3 @@ export const defaultWorkspaceExtension = (
     deadline: fourHoursFromNow.format(),
   }
 }
-
-export const workspaceQueryToFilter = (query?: string): TypesGen.WorkspaceFilter => {
-  const preparedQuery = query?.trim().replace(/  +/g, " ")
-  return {
-    q: preparedQuery,
-  }
-}
-
-export const workspaceFilterQuery = {
-  me: "owner:me",
-  all: "",
-}