Set date range working version

trustification · Oct 27, 2024 · d6a3f02 · d6a3f02
1 parent acabba6
commit d6a3f02
Show file tree

Hide file tree

Showing 5 changed files with 133 additions and 64 deletions.
diff --git a/client/src/app/components/FilterPanel/DateRangeFilter.tsx b/client/src/app/components/FilterPanel/DateRangeFilter.tsx
@@ -44,6 +44,18 @@ export const DateRangeFilter = <TItem,>({
   const [from, setFrom] = useState<Date>();
   const [to, setTo] = useState<Date>();
 
+  // Update it if it changes externally
+  React.useEffect(() => {
+    if (filterValue?.[0]) {
+      const [from, to] = parseInterval(filterValue?.[0]);
+      setFrom(from.toDate());
+      setTo(to.toDate());
+    } else {
+      setFrom(undefined);
+      setTo(undefined);
+    }
+  }, [filterValue]);
+
   const onFromDateChange = (
     event: FormEvent<HTMLInputElement>,
     value: string
@@ -60,10 +72,7 @@ export const DateRangeFilter = <TItem,>({
       setTo(newTo);
       const target = toISODateInterval(from, newTo);
       if (target) {
-        setFilterValue([
-          ...validFilters.filter((range) => range !== target),
-          target,
-        ]);
+        setFilterValue([target]);
       }
     }
   };

diff --git a/client/src/app/components/FilterPanel/FilterPanel.tsx b/client/src/app/components/FilterPanel/FilterPanel.tsx
@@ -1,6 +1,12 @@
 import * as React from "react";
 
-import { Card, CardBody, CardTitle } from "@patternfly/react-core";
+import {
+  Button,
+  Stack,
+  StackItem,
+  Text,
+  TextContent,
+} from "@patternfly/react-core";
 
 import { FilterControl } from "./FilterControl";
 import {
@@ -14,15 +20,15 @@ export interface IFilterPanelProps<TItem, TFilterCategoryKey extends string> {
   filterValues: IFilterValues<TFilterCategoryKey>;
   setFilterValues: (values: IFilterValues<TFilterCategoryKey>) => void;
   isDisabled?: boolean;
-  ommitFilterCategoryKeys?: TFilterCategoryKey[];
+  omitFilterCategoryKeys?: TFilterCategoryKey[];
 }
 
 export const FilterPanel = <TItem, TFilterCategoryKey extends string>({
   filterCategories,
   filterValues,
   setFilterValues,
   isDisabled = false,
-  ommitFilterCategoryKeys = [],
+  omitFilterCategoryKeys = [],
 }: React.PropsWithChildren<
   IFilterPanelProps<TItem, TFilterCategoryKey>
 >): JSX.Element | null => {
@@ -31,34 +37,62 @@ export const FilterPanel = <TItem, TFilterCategoryKey extends string>({
     newValue: FilterValue
   ) => setFilterValues({ ...filterValues, [category.categoryKey]: newValue });
 
+  const clearAllFilters = () => {
+    const filtersToBeCleared = filterCategories
+      .filter((filterCategory) => {
+        return (
+          omitFilterCategoryKeys.find(
+            (categoryKey) => categoryKey === filterCategory.categoryKey
+          ) === undefined
+        );
+      })
+      .reduce((prev, current) => {
+        return { ...prev, [current.categoryKey]: undefined };
+      }, {});
+    setFilterValues({ ...filterValues, ...filtersToBeCleared });
+  };
+
   return (
     <>
-      {filterCategories
-        .filter((filterCategory) => {
-          return (
-            ommitFilterCategoryKeys.find(
-              (categoryKey) => categoryKey === filterCategory.categoryKey
-            ) === undefined
-          );
-        })
-        .map((category) => {
-          return (
-            <Card key={category.categoryKey} isPlain>
-              <CardTitle>{category.title}</CardTitle>
-              <CardBody >
-                <FilterControl<TItem, TFilterCategoryKey>
-                  category={category}
-                  filterValue={filterValues[category.categoryKey]}
-                  setFilterValue={(newValue) =>
-                    setFilterValue(category, newValue)
-                  }
-                  isDisabled={isDisabled}
-                  isSidebar
-                />
-              </CardBody>
-            </Card>
-          );
-        })}
+      <Stack hasGutter>
+        <StackItem>
+          <Button variant="link" isInline onClick={clearAllFilters}>
+            Clear all filters
+          </Button>
+        </StackItem>
+        <StackItem>
+          {filterCategories
+            .filter((filterCategory) => {
+              return (
+                omitFilterCategoryKeys.find(
+                  (categoryKey) => categoryKey === filterCategory.categoryKey
+                ) === undefined
+              );
+            })
+            .map((category) => {
+              return (
+                <Stack key={category.categoryKey} hasGutter>
+                  <StackItem>
+                    <TextContent>
+                      <Text component="h4">{category.title}</Text>
+                    </TextContent>
+                  </StackItem>
+                  <StackItem>
+                    <FilterControl<TItem, TFilterCategoryKey>
+                      category={category}
+                      filterValue={filterValues[category.categoryKey]}
+                      setFilterValue={(newValue) =>
+                        setFilterValue(category, newValue)
+                      }
+                      isDisabled={isDisabled}
+                      isSidebar
+                    />
+                  </StackItem>
+                </Stack>
+              );
+            })}
+        </StackItem>
+      </Stack>
     </>
   );
 };
diff --git a/client/src/app/components/FilterToolbar/DateRangeFilter.tsx b/client/src/app/components/FilterToolbar/DateRangeFilter.tsx
@@ -49,24 +49,46 @@ export const DateRangeFilter = <TItem,>({
   const [from, setFrom] = useState<Date>();
   const [to, setTo] = useState<Date>();
 
+  // Update it if it changes externally
+  React.useEffect(() => {
+    if (filterValue?.[0]) {
+      const [from, to] = parseInterval(filterValue?.[0]);
+      setFrom(from.toDate());
+      setTo(to.toDate());
+    } else {
+      setFrom(undefined);
+      setTo(undefined);
+    }
+  }, [filterValue]);
+
   const rangeToOption = (range: string) => {
-    const [abbrRange, fullRange] = localizeInterval(range);
-    return {
-      key: range,
-      node: (
-        <Tooltip content={fullRange ?? range}>
-          <span>{abbrRange ?? ""}</span>
-        </Tooltip>
-      ),
-    };
+    const [, fullRange] = localizeInterval(range);
+    const [from, to] = fullRange.split("-");
+    return [
+      {
+        key: `${range}-from`,
+        node: (
+          <Tooltip content={from ?? range}>
+            <span>{from ?? ""}</span>
+          </Tooltip>
+        ),
+      },
+      {
+        key: `${range}-to`,
+        node: (
+          <Tooltip content={to ?? range}>
+            <span>{to ?? ""}</span>
+          </Tooltip>
+        ),
+      },
+    ];
   };
 
   const clearSingleRange = (
-    category: string | ToolbarChipGroup,
-    option: string | ToolbarChip
+    _category: string | ToolbarChipGroup,
+    _option: string | ToolbarChip
   ) => {
-    const target = (option as ToolbarChip)?.key;
-    setFilterValue([...validFilters.filter((range) => range !== target)]);
+    setFilterValue([]);
   };
 
   const onFromDateChange = (
@@ -84,20 +106,16 @@ export const DateRangeFilter = <TItem,>({
       const newTo = parseAmericanDate(value);
       setTo(newTo);
       const target = toISODateInterval(from, newTo);
-
       if (target) {
-        setFilterValue([
-          ...validFilters.filter((range) => range !== target),
-          target,
-        ]);
+        setFilterValue([target]);
       }
     }
   };
 
   return (
     <ToolbarFilter
       key={category.categoryKey}
-      chips={validFilters.map(rangeToOption)}
+      chips={validFilters.flatMap(rangeToOption)}
       deleteChip={clearSingleRange}
       deleteChipGroup={() => setFilterValue([])}
       categoryName={category.title}

diff --git a/client/src/app/hooks/table-controls/filtering/getFilterHubRequestParams.ts b/client/src/app/hooks/table-controls/filtering/getFilterHubRequestParams.ts
@@ -5,6 +5,7 @@ import {
   getFilterLogicOperator,
 } from "@app/components/FilterToolbar";
 import { IFilterState } from "./useFilterState";
+import { parseInterval } from "@app/components/FilterToolbar/dateUtils";
 
 /**
  * Helper function for getFilterHubRequestParams
@@ -140,14 +141,21 @@ export const getFilterHubRequestParams = <
         });
       }
       if (filterCategory.type === "dateRange") {
-        pushOrMergeFilter(filters, {
-          field: serverFilterField,
-          operator: "=",
-          value: {
-            list: serverFilterValue[0].split("/"),
-            operator: getFilterLogicOperator(filterCategory, "OR"),
-          },
-        });
+        const [start, end] = parseInterval(serverFilterValue[0]);
+        if (start) {
+          pushOrMergeFilter(filters, {
+            field: serverFilterField,
+            operator: ">",
+            value: start.toISOString(),
+          });
+        }
+        if (end) {
+          pushOrMergeFilter(filters, {
+            field: serverFilterField,
+            operator: "<",
+            value: end.toISOString(),
+          });
+        }
       }
     });
   }

diff --git a/client/src/app/pages/search/search.tsx b/client/src/app/pages/search/search.tsx
@@ -158,20 +158,20 @@ export const Search: React.FC = () => {
         <Grid hasGutter>
           <GridItem md={2}>
             <Card isFullHeight>
-              <CardBody style={{ padding: 0 }}>
+              <CardBody>
                 {activeTabKey === 0 ? (
                   <FilterPanel
-                    ommitFilterCategoryKeys={[""]}
+                    omitFilterCategoryKeys={[""]}
                     {...sbomFilterPanelProps}
                   />
                 ) : activeTabKey === 1 ? (
                   <FilterPanel
-                    ommitFilterCategoryKeys={[""]}
+                    omitFilterCategoryKeys={[""]}
                     {...packageFilterPanelProps}
                   />
                 ) : activeTabKey === 2 ? (
                   <FilterPanel
-                    ommitFilterCategoryKeys={[""]}
+                    omitFilterCategoryKeys={[""]}
                     {...vulnerabilityFilterPanelProps}
                   />
                 ) : null}