Merge pull request #777 from rszwajko/dynamicFilters

Create the filter dynamically based on available data
kubev2v · Nov 28, 2023 · 34ee0d0 · 34ee0d0
2 parents e703f2f + 746e7f0
commit 34ee0d0
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 13 deletions.
diff --git a/packages/common/src/components-stories/FilterGroup/AttributeValueFilter.stories.tsx b/packages/common/src/components-stories/FilterGroup/AttributeValueFilter.stories.tsx
@@ -91,7 +91,7 @@ export const AttributeValueWithMultipleSelectionTypes: Story = {
       type: ['india', 'japan', 'france'],
       archived: ['true'],
     },
-    fieldFilters: fieldsMetadata.filter((field) => field.filter?.primary).map(toFieldFilter),
+    fieldFilters: fieldsMetadata.filter((field) => field.filter?.primary).map(toFieldFilter()),
     supportedFilterTypes: defaultSupportedFilters,
   },
 };
@@ -107,7 +107,7 @@ export const AttributeValueWithMultipleSelectionTypes: Story = {
 export const AttributeValueWithNoSelectedValues: Story = {
   args: {
     selectedFilters: {},
-    fieldFilters: fieldsMetadata.filter((field) => field.filter?.primary).map(toFieldFilter),
+    fieldFilters: fieldsMetadata.filter((field) => field.filter?.primary).map(toFieldFilter()),
     supportedFilterTypes: defaultSupportedFilters,
   },
 };
diff --git a/packages/common/src/components-stories/FilterGroup/FilterGroup.stories.tsx b/packages/common/src/components-stories/FilterGroup/FilterGroup.stories.tsx
@@ -90,7 +90,7 @@ export const FilterGroupWithMultipleSelectionTypes: Story = {
       type: ['india', 'japan', 'france'],
       archived: ['true'],
     },
-    fieldFilters: fieldsMetadata.filter((field) => field.filter?.primary).map(toFieldFilter),
+    fieldFilters: fieldsMetadata.filter((field) => field.filter?.primary).map(toFieldFilter()),
     supportedFilterTypes: defaultSupportedFilters,
   },
 };
@@ -106,7 +106,7 @@ export const FilterGroupWithMultipleSelectionTypes: Story = {
 export const FilterGroupWithNoSelectedValues: Story = {
   args: {
     selectedFilters: {},
-    fieldFilters: fieldsMetadata.filter((field) => field.filter?.primary).map(toFieldFilter),
+    fieldFilters: fieldsMetadata.filter((field) => field.filter?.primary).map(toFieldFilter()),
     supportedFilterTypes: defaultSupportedFilters,
   },
 };
diff --git a/packages/common/src/components/Filter/GroupedEnumFilter.tsx b/packages/common/src/components/Filter/GroupedEnumFilter.tsx
@@ -37,7 +37,7 @@ export const GroupedEnumFilter = ({
   selectedFilters: selectedEnumIds = [],
   onFilterUpdate: onSelectedEnumIdsChange,
   supportedValues: supportedEnumValues = [],
-  supportedGroups,
+  supportedGroups = [],
   placeholderLabel,
   showFilter = true,
 }: FilterTypeProps) => {

diff --git a/packages/common/src/components/FilterGroup/helpers.ts b/packages/common/src/components/FilterGroup/helpers.ts
@@ -2,11 +2,13 @@ import { ResourceField } from '../../utils';
 
 import { FieldFilter } from './types';
 
-export const toFieldFilter = ({
-  resourceFieldId,
-  label,
-  filter: filterDef,
-}: ResourceField): FieldFilter => ({ resourceFieldId, label, filterDef });
+export const toFieldFilter =
+  (data?: unknown[]): ((field: ResourceField) => FieldFilter) =>
+  ({ resourceFieldId, label, filter }: ResourceField): FieldFilter => ({
+    resourceFieldId,
+    label,
+    filterDef: { ...filter, ...filter?.dynamicFilter?.(data ?? []) },
+  });
 
 export const EnumToTuple = (i18nEnum: { [k: string]: string }) =>
   Object.entries(i18nEnum).map(([type, label]) => ({ id: type, label }));
diff --git a/packages/common/src/utils/types.ts b/packages/common/src/utils/types.ts
@@ -22,6 +22,7 @@ export interface FilterDef {
   // by default missing/empty filters result in positive match (vacuous truth)
   defaultValues?: string[];
   helperText?: string | React.ReactNode;
+  dynamicFilter?: (items: unknown[]) => Partial<FilterDef>;
 }
 
 type OpenApiJsonPath = string | ((resourceData: unknown) => unknown);

diff --git a/packages/forklift-console-plugin/src/components/page/StandardPage.tsx b/packages/forklift-console-plugin/src/components/page/StandardPage.tsx
@@ -217,7 +217,9 @@ export function StandardPage<T>({
   const noResults = loaded && !error && flatData.length == 0;
   const noMatchingResults = loaded && !error && filteredData.length === 0 && flatData.length > 0;
 
-  const primaryFilters = fields.filter((field) => field.filter?.primary).map(toFieldFilter);
+  const primaryFilters = fields
+    .filter((field) => field.filter?.primary)
+    .map(toFieldFilter(flatData));
 
   return (
     <>
@@ -246,7 +248,7 @@ export function StandardPage<T>({
               <AttributeValueFilter
                 fieldFilters={fields
                   .filter(({ filter }) => filter && !filter.primary && !filter.standalone)
-                  .map(toFieldFilter)}
+                  .map(toFieldFilter(flatData))}
                 onFilterUpdate={setSelectedFilters}
                 selectedFilters={selectedFilters}
                 supportedFilterTypes={supportedFilters}
@@ -256,7 +258,7 @@ export function StandardPage<T>({
                 <FilterGroup
                   fieldFilters={fields
                     .filter((field) => field.filter?.standalone)
-                    .map(toFieldFilter)}
+                    .map(toFieldFilter(flatData))}
                   onFilterUpdate={setSelectedFilters}
                   selectedFilters={selectedFilters}
                   supportedFilterTypes={supportedFilters}