refactor: Clean up some filter logic

Parkreiner · Parkreiner · commit 92006aa583e6 · 2023-09-13T21:29:59.000Z
diff --git a/site/src/components/Filter/filter.tsx b/site/src/components/Filter/filter.tsx
@@ -130,6 +130,18 @@ export const MenuSkeleton = () => (
   <BaseSkeleton sx={{ minWidth: 200, flexShrink: 0 }} />
 );
 
+type FilterProps = {
+  filter: ReturnType<typeof useFilter>;
+  skeleton: ReactNode;
+  isLoading: boolean;
+  learnMoreLink: string;
+  learnMoreLabel2?: string;
+  learnMoreLink2?: string;
+  error?: unknown;
+  options?: ReactNode;
+  presets: PresetFilter[];
+};
+
 export const Filter = ({
   filter,
   isLoading,
@@ -140,17 +152,7 @@ export const Filter = ({
   learnMoreLabel2,
   learnMoreLink2,
   presets,
-}: {
-  filter: ReturnType<typeof useFilter>;
-  skeleton: ReactNode;
-  isLoading: boolean;
-  learnMoreLink: string;
-  learnMoreLabel2?: string;
-  learnMoreLink2?: string;
-  error?: unknown;
-  options?: ReactNode;
-  presets: PresetFilter[];
-}) => {
+}: FilterProps) => {
   const shouldDisplayError = hasError(error) && isApiValidationError(error);
   const hasFilterQuery = filter.query !== "";
   const [searchQuery, setSearchQuery] = useState(filter.query);
diff --git a/site/src/pages/WorkspacesPage/filter/filter.tsx b/site/src/pages/WorkspacesPage/filter/filter.tsx
@@ -18,9 +18,22 @@ import { UserFilterMenu, UserMenu } from "components/Filter/UserFilter";
 import { workspaceFilterQuery } from "utils/filters";
 import { docs } from "utils/docs";
 
-const PRESET_FILTERS = [
-  { query: workspaceFilterQuery.me, name: "My workspaces" },
-  { query: workspaceFilterQuery.all, name: "All workspaces" },
+type FilterPreset = {
+  query: string;
+  name: string;
+};
+
+// Can't use as const declarations to make arrays deep readonly because that
+// interferes with the type contracts for Filter
+const PRESET_FILTERS: FilterPreset[] = [
+  {
+    query: workspaceFilterQuery.me,
+    name: "My workspaces",
+  },
+  {
+    query: workspaceFilterQuery.all,
+    name: "All workspaces",
+  },
   {
     query: workspaceFilterQuery.running,
     name: "Running workspaces",
@@ -31,26 +44,32 @@ const PRESET_FILTERS = [
   },
 ];
 
-export const WorkspacesFilter = ({
-  filter,
-  error,
-  menus,
-}: {
+// Defined outside component so that the array doesn't get reconstructed each render
+const PRESETS_WITH_DORMANT: FilterPreset[] = [
+  ...PRESET_FILTERS,
+  {
+    query: workspaceFilterQuery.dormant,
+    name: "Dormant workspaces",
+  },
+];
+
+type WorkspaceFilterProps = {
   filter: ReturnType<typeof useFilter>;
   error?: unknown;
   menus: {
     user?: UserFilterMenu;
     template: TemplateFilterMenu;
     status: StatusFilterMenu;
   };
-}) => {
-  const presets = [...PRESET_FILTERS];
-  if (useIsWorkspaceActionsEnabled()) {
-    presets.push({
-      query: workspaceFilterQuery.dormant,
-      name: "Dormant workspaces",
-    });
-  }
+};
+
+export const WorkspacesFilter = ({
+  filter,
+  error,
+  menus,
+}: WorkspaceFilterProps) => {
+  const actionsEnabled = useIsWorkspaceActionsEnabled();
+  const presets = actionsEnabled ? PRESET_FILTERS : PRESETS_WITH_DORMANT;
 
   return (
     <Filter
