Add labels to applied static filters (#51)

Allow users to specify group labels for applied static filters. `DecoratedAppliedFilters` accepts a mapping of `fieldId` to group label. If no label is provided, it defaults back to using the `fieldId` as the group label.

J=SLAP-1658
TEST=manual

Check that specifying a group label for a static filter fieldId is reflected when a filter with that fieldId is applied

sample-app/src/components/DecoratedAppliedFilters.tsx

@@ -9,17 +9,21 @@ export interface DecoratedAppliedFiltersConfig {
   hiddenFields?: Array<string>,
   labelText?: string,
   delimiter?: string,
+  /**
+   * A mapping of static filter fieldIds to their displayed group labels.
+   */
+  staticFiltersGroupLabels?: Record<string, string>,
   appliedQueryFilters?: AppliedQueryFilter[]
 }
 
 /**
  * Container component for AppliedFilters
  */
 export function DecoratedAppliedFiltersDisplay(props : DecoratedAppliedFiltersConfig): JSX.Element {
-  const { hiddenFields = [], appliedQueryFilters = [], ...otherProps } = props;
+  const { hiddenFields = [], staticFiltersGroupLabels = {}, appliedQueryFilters = [], ...otherProps } = props;
   const state = useAnswersState(state => state);
   const filterState = state.vertical.results ? state.filters : {};
-  const groupedFilters: Array<GroupedFilters> = getGroupedAppliedFilters(filterState, appliedQueryFilters, hiddenFields);
+  const groupedFilters: Array<GroupedFilters> = getGroupedAppliedFilters(filterState, appliedQueryFilters, hiddenFields, staticFiltersGroupLabels);
   return <AppliedFilters appliedFilters={groupedFilters} {...otherProps}/>
 }
 

sample-app/src/pages/VerticalSearchPage.tsx

@@ -50,6 +50,10 @@ const facetConfigs = {
   }
 }
 
+const staticFiltersGroupLabels = {
+  c_employeeCountry: 'Employee Country'
+}
+
 export default function VerticalSearchPage(props: {
   verticalKey: string
 }) {
@@ -87,6 +91,7 @@ export default function VerticalSearchPage(props: {
           showFieldNames={true}
           hiddenFields={['builtin.entityType']}
           delimiter='|'
+          staticFiltersGroupLabels={staticFiltersGroupLabels}
         />
         <AlternativeVerticals
           currentVerticalLabel='People'

sample-app/src/utils/appliedfilterutils.tsx

@@ -63,9 +63,10 @@ function createGroupedFilters(
 export function getGroupedAppliedFilters(
   appliedFiltersState: FiltersState,
   nlpFilters: AppliedQueryFilter[],
-  hiddenFields: string[]
+  hiddenFields: string[],
+  staticFiltersGroupLabels: Record<string, string>
 ): Array<GroupedFilters>  {
-  const displayableStaticFilters = getDisplayableStaticFilters(flattenFilters(appliedFiltersState?.static));
+  const displayableStaticFilters = getDisplayableStaticFilters(flattenFilters(appliedFiltersState?.static), staticFiltersGroupLabels);
   const displayableFacets = getDisplayableAppliedFacets(appliedFiltersState?.facets);
   const displayableNlpFilters = getDisplayableNlpFilters(nlpFilters);
 

sample-app/src/utils/displayablefilterutils.tsx

@@ -29,13 +29,16 @@ export function getDisplayableAppliedFacets(facets: DisplayableFacet[] | undefin
 /**
  * Convert a list of static filters to DisplayableFilter format.
  */
-export function getDisplayableStaticFilters(filters: Filter[]): DisplayableFilter[] {
+export function getDisplayableStaticFilters(
+  filters: Filter[],
+  groupLabels: Record<string, string>
+): DisplayableFilter[] {
   let appliedStaticFilters: DisplayableFilter[] = [];
   filters?.forEach(filter => {
     appliedStaticFilters.push({
       filterType: 'STATIC_FILTER',
       filter: filter,
-      groupLabel: filter.fieldId,
+      groupLabel: groupLabels?.[filter.fieldId] || filter.fieldId,
       label: getFilterDisplayValue(filter),
     });
   });