xFilter util

packages/api-v4/src/types.ts

@@ -39,7 +39,7 @@ export interface RequestOptions {
   headers?: RequestHeaders;
 }
 
-interface FilterConditionTypes {
+export interface FilterConditionTypes {
   '+and'?: Filter[];
   '+or'?: Filter[] | string[];
   '+order_by'?: string;

packages/manager/src/features/Volumes/VolumesLanding.tsx

@@ -23,6 +23,7 @@ import { useOrderV2 } from 'src/hooks/useOrderV2';
 import { usePaginationV2 } from 'src/hooks/usePaginationV2';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { useVolumesQuery } from 'src/queries/volumes/volumes';
+import { buildVolumeXFilters } from 'src/routes/volumes';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
 import { AttachVolumeDrawer } from './AttachVolumeDrawer';
@@ -36,7 +37,7 @@ import { VolumeDetailsDrawer } from './VolumeDetailsDrawer';
 import { VolumesLandingEmptyState } from './VolumesLandingEmptyState';
 import { VolumeTableRow } from './VolumeTableRow';
 
-import type { Filter, Volume } from '@linode/api-v4';
+import type { Volume } from '@linode/api-v4';
 import type { VolumesSearchParams } from 'src/routes/volumes/index';
 
 const preferenceKey = 'volumes';
@@ -70,20 +71,20 @@ export const VolumesLanding = () => {
     preferenceKey,
   });
 
-  const filter: Filter = {
-    ['+order']: order,
-    ['+order_by']: orderBy,
-    ...(query && {
-      label: { '+contains': query },
-    }),
-  };
-
+  // const filter: Filter = {
+  //   ['+order']: order,
+  //   ['+order_by']: orderBy,
+  //   ...(query && {
+  //     label: { '+contains': query },
+  //   }),
+  // };
+  const volumeXFilters = buildVolumeXFilters(query);
   const { data: volumes, error, isFetching, isLoading } = useVolumesQuery(
     {
       page: pagination.page,
       page_size: pagination.pageSize,
     },
-    filter
+    volumeXFilters
   );
 
   const {

packages/manager/src/routes/utils/buildXFilters.ts

@@ -0,0 +1,38 @@
+import type { Filter, FilterConditionTypes } from '@linode/api-v4';
+
+type OrderDirection = FilterConditionTypes['+order'];
+type XFilterableField = string;
+
+type FilterOperator = Exclude<
+  keyof FilterConditionTypes,
+  '+order' | '+order_by'
+>;
+
+type FieldFilter = {
+  [K in FilterOperator]?: FilterConditionTypes[K];
+};
+
+interface XFilterDefaults {
+  order: OrderDirection;
+  orderBy: XFilterableField;
+}
+
+interface BuildXFilterParams<T extends XFilterableField> {
+  additionalFilters?: Partial<Record<T, FieldFilter>>;
+  defaults: XFilterDefaults;
+  order?: OrderDirection;
+  orderBy?: T;
+}
+
+export function buildXFilters<T extends XFilterableField>({
+  additionalFilters,
+  defaults,
+  order,
+  orderBy,
+}: BuildXFilterParams<T>): Filter {
+  return {
+    '+order': order ?? defaults.order,
+    '+order_by': orderBy ?? defaults.orderBy,
+    ...additionalFilters,
+  };
+}

packages/manager/src/routes/volumes/index.ts

@@ -3,6 +3,7 @@ import { createRoute, redirect } from '@tanstack/react-router';
 import { volumeQueries } from 'src/queries/volumes/volumes';
 
 import { rootRoute } from '../root';
+import { buildXFilters } from '../utils/buildXFilters';
 import { VolumesRoot } from './VolumesRoot';
 
 import type { TableSearchParams } from '../types';
@@ -24,6 +25,19 @@ export interface VolumesSearchParams extends TableSearchParams {
   query?: string;
 }
 
+export const buildVolumeXFilters = (query?: string) =>
+  buildXFilters({
+    additionalFilters: query
+      ? {
+          label: { '+contains': query },
+        }
+      : undefined,
+    defaults: {
+      order: 'asc',
+      orderBy: 'label',
+    },
+  });
+
 const volumesRoute = createRoute({
   component: VolumesRoot,
   getParentRoute: () => rootRoute,
@@ -56,16 +70,14 @@ const volumeActionRoute = createRoute({
       });
     }
 
+    const volumeXFilters = buildVolumeXFilters(search.query);
     const volumes = await context.queryClient.fetchQuery(
       volumeQueries.lists._ctx.paginated(
         {
-          page: 1,
-          page_size: 25,
+          page: search.page ?? 1,
+          page_size: search.page_size ?? 25,
         },
-        {
-          '+order': search?.order ?? 'asc',
-          '+order_by': search?.orderBy ?? 'label',
-        }
+        volumeXFilters
       )
     );