972: Refiner Grouping

search-extensibility/src/models/filters/IDataFilterConfiguration.ts

@@ -1,4 +1,5 @@
 import { FilterConditionOperator } from '../..';
+import { IRefinerGroupValue } from './IRefinerGroupValue';
 
 export enum FilterType {
 
@@ -98,4 +99,10 @@ export interface IDataFilterConfiguration {
     * Range definition
     */
     rangeDefinition: number;
+
+    /**
+     * Refiner Filter Values that use kql and are added on top of the
+     * refiner values returned from the datasource
+     */
+     refinerGroups?:IRefinerGroupValue[];
 }

search-extensibility/src/models/filters/IRefinerGroupValue.ts

@@ -0,0 +1,17 @@
+export interface IRefinerGroupValue {
+
+    /**
+     * The label shown in the filter
+     */
+    label: string;
+    /**
+     * If advanced = false: A comma seperated list of values belonging to the filter group 
+     * If advanced = true: A fql statement
+     */
+    fql:string;
+    /**
+     * Advanced = false for simple filter group fql
+     * Advanced = true for advanced filter group fql
+     */
+    advanced:boolean;
+}

search-parts/src/common/Constants.ts

@@ -1,5 +1,5 @@
 export class Constants {
-    
+
     /**
      * Unique ID for the default extensibility SPFx library component
      */
@@ -20,6 +20,11 @@ export class Constants {
      */
     public static readonly PNP_APP_INSIGHTS_INSTRUMENTATION_KEY = '0f0b9db6-680c-480c-804d-f75830e2c383';
     public static readonly PNP_MODERN_SEARCH_EVENT_NAME = 'pnpModernSearchV4';
+
+    /**
+     * This is used for grouped filter labels to distinguish them from other labels
+     */
+    public static readonly PNP_MODERN_SEARCH_FILTER_GROUP_PREFIX = 'pnpFilterGroup_';
 }
 
 export enum AutoCalculatedDataSourceFields {

search-parts/src/components/filters/FilterCheckBoxComponent.tsx

@@ -3,6 +3,7 @@ import { BaseWebComponent, IDataFilterInfo, IDataFilterValueInfo, ExtensibilityC
 import * as ReactDOM from 'react-dom';
 import { Checkbox, ChoiceGroup, IChoiceGroupOption, ITheme, Text } from 'office-ui-fabric-react';
 import { IReadonlyTheme } from '@microsoft/sp-component-base';
+import { Constants } from '../../common/Constants';
 
 export interface IFilterCheckBoxProps {
 
@@ -74,6 +75,8 @@ export class FilterCheckBoxComponent extends React.Component<IFilterCheckBoxProp
         let textColor: string = this.props.themeVariant && this.props.themeVariant.isInverted ? (this.props.themeVariant ? this.props.themeVariant.semanticColors.bodyText : '#323130') : this.props.themeVariant.semanticColors.inputText;
 
         if (this.props.isMulti) {
+            const label = filterValue.name?.replace(Constants.PNP_MODERN_SEARCH_FILTER_GROUP_PREFIX, '');
+
             renderInput = <Checkbox
                 styles={{
                     root: {
@@ -89,15 +92,16 @@ export class FilterCheckBoxComponent extends React.Component<IFilterCheckBoxProp
                 theme={this.props.themeVariant as ITheme}
                 defaultChecked={this.props.selected}
                 disabled={this.props.disabled}
-                title={filterValue.name}
-                label={filterValue.name}
+                title={label}
+                label={label}
                 onChange={(ev, checked: boolean) => {
                     filterValue.selected = checked;
                     this.props.onChecked(this.props.filterName, filterValue);
                 }}
                 onRenderLabel={(props, defaultRender) => {
                     return <Text block nowrap title={props.label}>{props.label}</Text>;
                 }}
+
             />;
         } else {
             renderInput = <ChoiceGroup
@@ -120,7 +124,7 @@ export class FilterCheckBoxComponent extends React.Component<IFilterCheckBoxProp
                 options={[
                     {
                         key: filterValue.value,
-                        text: filterValue.name,
+                        text: filterValue.name?.replace(Constants.PNP_MODERN_SEARCH_FILTER_GROUP_PREFIX, ''),
                         disabled: this.props.disabled,
                         checked: this.props.selected,
                         styles: {