Add action filter

BrunoQuaresma · BrunoQuaresma · commit 5c47bdf8b7bf · 2023-06-06T18:38:53.000Z
diff --git a/site/src/pages/AuditPage/AuditFilter.tsx b/site/src/pages/AuditPage/AuditFilter.tsx
@@ -1,10 +1,16 @@
+import { AuditActions } from "api/typesGenerated"
 import { UserFilterMenu, UserMenu } from "components/Filter/UserFilter"
 import {
   Filter,
+  FilterMenu,
   MenuSkeleton,
+  OptionItem,
   SearchFieldSkeleton,
   useFilter,
 } from "components/Filter/filter"
+import { UseFilterMenuOptions, useFilterMenu } from "components/Filter/menu"
+import { BaseOption } from "components/Filter/options"
+import capitalize from "lodash/capitalize"
 
 export const AuditFilter = ({
   filter,
@@ -15,20 +21,65 @@ export const AuditFilter = ({
   error?: unknown
   menus: {
     user: UserFilterMenu
+    action: ActionFilterMenu
   }
 }) => {
   return (
     <Filter
       isLoading={menus.user.isInitializing}
       filter={filter}
       error={error}
-      options={<UserMenu {...menus.user} />}
+      options={
+        <>
+          <ActionMenu {...menus.action} />
+          <UserMenu {...menus.user} />
+        </>
+      }
       skeleton={
         <>
           <SearchFieldSkeleton />
           <MenuSkeleton />
+          <MenuSkeleton />
         </>
       }
     />
   )
 }
+
+export const useActionFilterMenu = ({
+  value,
+  onChange,
+}: Pick<UseFilterMenuOptions<BaseOption>, "value" | "onChange">) => {
+  const actionOptions: BaseOption[] = AuditActions.map((action) => ({
+    value: action,
+    label: capitalize(action),
+  }))
+  return useFilterMenu({
+    onChange,
+    value,
+    id: "status",
+    getSelectedOption: async () =>
+      actionOptions.find((option) => option.value === value) ?? null,
+    getOptions: async () => actionOptions,
+  })
+}
+
+export type ActionFilterMenu = ReturnType<typeof useActionFilterMenu>
+
+const ActionMenu = (menu: ActionFilterMenu) => {
+  return (
+    <FilterMenu
+      id="action-menu"
+      menu={menu}
+      label={
+        menu.selectedOption ? (
+          <OptionItem option={menu.selectedOption} />
+        ) : (
+          "All actions"
+        )
+      }
+    >
+      {(itemProps) => <OptionItem {...itemProps} />}
+    </FilterMenu>
+  )
+}
diff --git a/site/src/pages/AuditPage/AuditPage.tsx b/site/src/pages/AuditPage/AuditPage.tsx
@@ -11,6 +11,7 @@ import { useDashboard } from "components/Dashboard/DashboardProvider"
 import { usePagination } from "hooks"
 import { useQuery } from "@tanstack/react-query"
 import { getAuditLogs } from "api/api"
+import { useActionFilterMenu } from "./AuditFilter"
 
 const AuditPage: FC = () => {
   const dashboard = useDashboard()
@@ -30,6 +31,14 @@ const AuditPage: FC = () => {
         username: option?.value,
       }),
   })
+  const actionMenu = useActionFilterMenu({
+    value: filter.values.action,
+    onChange: (option) =>
+      filter.update({
+        ...filter.values,
+        action: option?.value,
+      }),
+  })
   const { audit_log: isAuditLogVisible } = useFeatureVisibility()
   const { data, error } = useQuery({
     queryKey: ["auditLogs", filter.query, pagination.page],
@@ -62,6 +71,7 @@ const AuditPage: FC = () => {
                 filter,
                 menus: {
                   user: userMenu,
+                  action: actionMenu,
                 },
               }
             : {
