feat: update label in filter result recap

Author: andre-code

client/src/features/searchV2/components/SearchFilters.tsx

@@ -412,6 +412,7 @@ function SearchFilterContent({
                   visualization={visualization}
                   type={filter.allowSelectMany ? "checkbox" : "radio"}
                 >
+                  {element.icon}
                   {element.label}
                   {element.quantity !== undefined ? (
                     <Badge className="ms-1">{element.quantity}</Badge>

client/src/features/searchV2/components/SearchResultRecap.tsx

@@ -19,6 +19,7 @@
 import cx from "classnames";
 import { ReactNode, useMemo } from "react";
 
+import { getFilterValueLabel } from "~/features/searchV2/contextSearch.utils";
 import useAppSelector from "../../../utils/customHooks/useAppSelector.hook";
 import { useGetSearchQueryQuery } from "../api/searchV2Api.api";
 import {
@@ -33,51 +34,64 @@ import { selectSearchApiQuery } from "../searchV2.slice";
 
 export default function SearchResultRecap() {
   const state = useAppSelector(({ searchV2 }) => searchV2);
+  const {
+    contentType,
+    created,
+    directMember,
+    keywords,
+    query,
+    role,
+    visibility,
+  } = state;
   const apiQuery = useAppSelector(selectSearchApiQuery);
   const { data, isFetching } = useGetSearchQueryQuery({ params: apiQuery });
   const total = data?.pagingInfo.totalResult;
 
   const filters = useMemo(() => {
     const parts: ReactNode[] = [];
-    if (state.contentType) {
+    if (contentType) {
       parts.push(
         <span key="type">
-          {FILTER_CONTENT.label}: {state.contentType}
+          {FILTER_CONTENT.label}:{" "}
+          {getFilterValueLabel([contentType], FILTER_CONTENT.allowedValues)}
         </span>,
       );
     }
-    if (state.visibility) {
+    if (visibility) {
       parts.push(
         <span key="visibility">
-          {FILTER_VISIBILITY.label}: {state.visibility}
+          {FILTER_VISIBILITY.label}:{" "}
+          {getFilterValueLabel([visibility], FILTER_VISIBILITY.allowedValues)}
         </span>,
       );
     }
-    if (state.role) {
+    if (role) {
       parts.push(
         <span key="role">
-          {FILTER_MY_ROLE.label}: {state.role}
+          {FILTER_MY_ROLE.label}:{" "}
+          {getFilterValueLabel(role.split(","), FILTER_MY_ROLE.allowedValues)}
         </span>,
       );
     }
-    if (state.keywords) {
+    if (keywords) {
       parts.push(
         <span key="keywords">
-          {FILTER_KEYWORD.label}: {state.keywords}
+          {FILTER_KEYWORD.label}: {keywords}
         </span>,
       );
     }
-    if (state.directMember) {
+    if (directMember) {
       parts.push(
         <span key="member">
-          {FILTER_MEMBER.label}: {state.directMember}
+          {FILTER_MEMBER.label}: {directMember}
         </span>,
       );
     }
-    if (state.created) {
+    if (created) {
       parts.push(
         <span key="created">
-          {FILTER_DATE.label}: {state.created}
+          {FILTER_DATE.label}:{" "}
+          {getFilterValueLabel([created], FILTER_DATE.allowedValues)}
         </span>,
       );
     }
@@ -91,7 +105,7 @@ export default function SearchResultRecap() {
         ))}
       </>
     ) : null;
-  }, [state]);
+  }, [contentType, created, directMember, keywords, role, visibility]);
 
   return (
     <p className="mb-0">
@@ -102,10 +116,10 @@ export default function SearchResultRecap() {
           {total ? total : "No"} {total && total > 1 ? "results" : "result"}
         </span>
       )}
-      {state.query && (
+      {query && (
         <>
           {" "}
-          for <span className="fw-semibold">{`"${state.query}"`}</span>
+          for <span className="fw-semibold">{`"${query}"`}</span>
         </>
       )}
       {filters && (

client/src/features/searchV2/contextSearch.constants.tsx

@@ -51,39 +51,23 @@ export const FILTER_CONTENT: EnumFilter = {
   allowedValues: [
     {
       value: "Project",
-      label: (
-        <>
-          <Folder className={cx("bi", "me-1")} />
-          Project
-        </>
-      ),
+      label: "Project",
+      icon: <Folder className={cx("bi", "me-1")} />,
     },
     {
       value: "DataConnector",
-      label: (
-        <>
-          <Database className={cx("bi", "me-1")} />
-          Data
-        </>
-      ),
+      label: "Data",
+      icon: <Database className={cx("bi", "me-1")} />,
     },
     {
       value: "User",
-      label: (
-        <>
-          <Person className={cx("bi", "me-1")} />
-          User
-        </>
-      ),
+      label: "User",
+      icon: <Person className={cx("bi", "me-1")} />,
     },
     {
       value: "Group",
-      label: (
-        <>
-          <People className={cx("bi", "me-1")} />
-          Group
-        </>
-      ),
+      label: "Group",
+      icon: <People className={cx("bi", "me-1")} />,
     },
   ],
   allowSelectMany: false,
@@ -102,21 +86,13 @@ export const FILTER_CONTENT_NAMESPACE: EnumFilter = {
   allowedValues: [
     {
       value: "Project",
-      label: (
-        <>
-          <Folder className={cx("bi", "me-1")} />
-          Project
-        </>
-      ),
+      icon: <Folder className={cx("bi", "me-1")} />,
+      label: "Project",
     },
     {
       value: "DataConnector",
-      label: (
-        <>
-          <Database className={cx("bi", "me-1")} />
-          Data
-        </>
-      ),
+      icon: <Database className={cx("bi", "me-1")} />,
+      label: "Data",
     },
   ],
   allowSelectMany: false,
@@ -167,21 +143,13 @@ export const FILTER_VISIBILITY: EnumFilter = {
     { value: "", label: "Any visibility" },
     {
       value: "public",
-      label: (
-        <>
-          <Globe className={cx("bi", "me-1")} />
-          Public
-        </>
-      ),
+      icon: <Globe className={cx("bi", "me-1")} />,
+      label: "Public",
     },
     {
       value: "private",
-      label: (
-        <>
-          <Lock className={cx("bi", "me-1")} />
-          Private
-        </>
-      ),
+      icon: <Lock className={cx("bi", "me-1")} />,
+      label: "Private",
     },
   ],
   allowSelectMany: false,
@@ -201,15 +169,15 @@ export const FILTER_MY_ROLE: EnumFilter = {
   allowedValues: [
     {
       value: "owner",
-      label: <>Owner</>,
+      label: "Owner",
     },
     {
       value: "editor",
-      label: <>Editor</>,
+      label: "Editor",
     },
     {
       value: "viewer",
-      label: <>Viewer</>,
+      label: "Viewer",
     },
   ],
   allowSelectMany: true,
@@ -236,27 +204,27 @@ export const FILTER_DATE: EnumFilter = {
   allowedValues: [
     {
       value: "",
-      label: <>All</>,
+      label: "All",
       id: "any",
     },
     {
       value: ">today-7d",
-      label: <>Last week</>,
+      label: "Last week",
       id: "last-week",
     },
     {
       value: ">today-31d",
-      label: <>Last month</>,
+      label: "Last month",
       id: "last-month",
     },
     {
       value: ">today-90d",
-      label: <>Last 90 days</>,
+      label: "Last 90 days",
       id: "last-90-days",
     },
     {
       value: "<today-90d",
-      label: <>Older than 90 days</>,
+      label: "Older than 90 days",
       id: "older-than-90-days",
     },
   ],

client/src/features/searchV2/contextSearch.types.ts

@@ -25,8 +25,9 @@ export type GroupSearchEntity = Exclude<
   { type: "Group" | "User" }
 >;
 
-interface FilterValue {
-  label: ReactNode;
+export interface FilterValue {
+  label: string | ReactNode;
+  icon?: ReactNode;
   quantity?: number;
   value: string;
   id?: string;

client/src/features/searchV2/contextSearch.utils.ts

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import { FilterValue } from "~/features/searchV2/contextSearch.types";
 import { DATE_FILTER_CUSTOM_SEPARATOR } from "./contextSearch.constants";
 
 export function parseCustomDateFilter(value: string): {
@@ -41,3 +42,15 @@ export function buildCustomDateFilterValue(
   if (beforeDate) parts.push(`<${beforeDate}`);
   return parts.join(DATE_FILTER_CUSTOM_SEPARATOR);
 }
+
+export function getFilterValueLabel(
+  values: string[],
+  allowedValues: FilterValue[],
+): string {
+  const validLabels = values
+    .map((value) => allowedValues.find((v) => v.value === value)?.label)
+    .filter((label): label is string => typeof label === "string");
+  if (validLabels.length === 0) return values.join(" ");
+
+  return validLabels.join(", ");
+}