fix(filter chip bugs): Squashing filter chip bugs

src/services/ui/src/components/Opensearch/Filtering/FilterChips.tsx

@@ -4,6 +4,8 @@ import { Chip } from "@/components/Chip";
 import { useOsParams } from "@/components/Opensearch/useOpensearch";
 import { OsFilterable, OsRangeValue } from "shared-types";
 import { useFilterDrawerContext } from "./FilterProvider";
+import { checkMultiFilter, resetFilters } from "../utils";
+import { useLabelMapping } from "@/hooks";
 
 interface RenderProp {
   filter: OsFilterable;
@@ -12,17 +14,8 @@ interface RenderProp {
   clearFilter: (filter: OsFilterable, valIndex?: number) => void;
 }
 
-const checkMultiFilter = (filters: OsFilterable[]) => {
-  return (
-    filters.length > 1 ||
-    filters.some(
-      (filter) => Array.isArray(filter.value) && filter.value.length > 1
-    )
-  );
-};
-
-// render function for simple date range chips
-const renderDateChip: FC<RenderProp> = ({
+// simple date range chips
+const DateChip: FC<RenderProp> = ({
   filter,
   index,
   openDrawer,
@@ -46,26 +39,31 @@ const renderDateChip: FC<RenderProp> = ({
   );
 };
 
-// render function for array value chips
-const renderChipList: FC<RenderProp> = ({
+// array value chips
+const ChipList: FC<RenderProp> = ({
   filter,
   index,
   clearFilter,
   openDrawer,
 }) => {
+  const labelMap = useLabelMapping();
+
   if (!Array.isArray(filter.value)) return null;
 
   return (
     <Fragment key={`${index}-${filter.field}-fragment`}>
       {filter.value.map((v, vindex) => {
+        const chipText = `${filter?.label + ": " ?? ""}${labelMap[v] ?? v}`;
         return (
           <Chip
             key={`${index}-${vindex}-${filter.field}`}
             onChipClick={openDrawer}
             onIconClick={() => {
               clearFilter(filter, vindex);
             }}
-          >{`${filter?.label + ": " ?? ""}${v}`}</Chip>
+          >
+            {chipText}
+          </Chip>
         );
       })}
     </Fragment>
@@ -77,7 +75,7 @@ export const FilterChips: FC = () => {
   const { setDrawerState } = useFilterDrawerContext();
 
   const openDrawer = useCallback(() => setDrawerState(true), [setDrawerState]);
-  const multipleFilters = checkMultiFilter(params.state.filters);
+  const twoOrMoreFiltersApplied = checkMultiFilter(params.state.filters, 2);
   const clearFilter = (filter: OsFilterable, valIndex?: number) => {
     params.onSet((s) => {
       let filters = s.filters;
@@ -99,24 +97,19 @@ export const FilterChips: FC = () => {
       };
     });
   };
-  const resetFilters = () => {
-    params.onSet((s) => ({
-      ...s,
-      filters: [],
-      pagination: { ...s.pagination, number: 0 },
-    }));
-  };
+
+  const handleChipClick = () => resetFilters(params.onSet);
 
   return (
     <div className="justify-start items-center py-2 flex flex-wrap gap-y-2 gap-x-2">
       {params.state.filters.map((filter, index) => {
         const props: RenderProp = { clearFilter, openDrawer, filter, index };
-        if (filter.type === "range") return renderDateChip(props);
-        if (filter.type === "terms") return renderChipList(props);
+        if (filter.type === "range") return <DateChip {...props} />;
+        if (filter.type === "terms") return <ChipList {...props} />;
         return null;
       })}
-      {multipleFilters && (
-        <Chip variant={"destructive"} onChipClick={resetFilters}>
+      {twoOrMoreFiltersApplied && (
+        <Chip variant={"destructive"} onChipClick={handleChipClick}>
           Clear All
         </Chip>
       )}

src/services/ui/src/components/Opensearch/Filtering/FilterDrawer.tsx

@@ -18,10 +18,16 @@ import { FilterableSelect } from "./FilterableSelect";
 import { FilterableDateRange } from "./FilterableDateRange";
 import { FilterableCheckbox } from "./FilterableCheckbox";
 import { useFilterDrawer } from "./useFilterDrawer";
+import { Button } from "@/components/Inputs";
+import { checkMultiFilter, resetFilters } from "../utils";
+import { useOsParams } from "../useOpensearch";
 
 export const OsFilterDrawer = () => {
   const hook = useFilterDrawer();
+  const params = useOsParams();
 
+  const filtersApplied = checkMultiFilter(params.state.filters, 1);
+  const handleFilterReset = () => resetFilters(params.onSet);
   return (
     <Sheet open={hook.drawerOpen} onOpenChange={hook.setDrawerState}>
       <SheetTrigger>
@@ -34,6 +40,14 @@ export const OsFilterDrawer = () => {
         <SheetHeader>
           <h4 className="prose-2xl">Filters</h4>
         </SheetHeader>
+        <Button
+          className="w-full my-2"
+          variant="outline"
+          disabled={!filtersApplied}
+          onClick={handleFilterReset}
+        >
+          Reset
+        </Button>
         <Accordion
           value={hook.accordionValues}
           onValueChange={hook.onAccordionChange}

src/services/ui/src/components/Opensearch/Filtering/useFilterDrawer.ts

@@ -82,7 +82,7 @@ export const useFilterDrawer = () => {
       return {
         ...STATE,
         [KEY]: AGG.buckets.map((BUCK) => ({
-          label: `${labelMap[BUCK.key] || BUCK.key} (${BUCK.doc_count})`,
+          label: `${labelMap[BUCK.key] || BUCK.key}`,
           value: BUCK.key,
         })),
       };

src/services/ui/src/components/Opensearch/utils.ts

@@ -1,4 +1,5 @@
 import { OsAggQuery, OsFilterable, OsQueryState } from "shared-types";
+import { OsParamsState } from "./useOpensearch";
 
 const filterMapQueryReducer = (
   state: Record<OsFilterable["prefix"], any[]>,
@@ -98,3 +99,25 @@ export const createSearchFilterable = (value?: string) => {
     } as unknown as OsFilterable,
   ];
 };
+
+export const resetFilters = (
+  onSet: (
+    arg: (arg: OsParamsState) => OsParamsState,
+    shouldIsolate?: boolean | undefined
+  ) => void
+) => {
+  onSet((s) => ({
+    ...s,
+    filters: [],
+    pagination: { ...s.pagination, number: 0 },
+  }));
+};
+
+export const checkMultiFilter = (filters: OsFilterable[], val: number) => {
+  return (
+    filters.length >= val ||
+    filters.some(
+      (filter) => Array.isArray(filter.value) && filter.value.length >= val
+    )
+  );
+};