feat(datagrid-web): always show header, change texts

Author: r0b1n

packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts

@@ -78,9 +78,6 @@ export function getProperties(
     if (values.showEmptyPlaceholder === "none") {
         hidePropertyIn(defaultProperties, values, "emptyPlaceholder");
     }
-    if (!values.showHeaderFilters) {
-        hidePropertyIn(defaultProperties, values, "filterList");
-    }
 
     hideSelectionProperties(defaultProperties, values);
 
@@ -127,7 +124,6 @@ export function getProperties(
                 "columnsHidable",
                 "configurationAttribute",
                 "onConfigurationChange",
-                "showHeaderFilters",
                 "filterList",
                 "filtersPlaceholder",
                 "filterSectionTitle"
@@ -229,7 +225,7 @@ export const getPreview = (
         borders: true
     })(
         dropzone(
-            dropzone.placeholder("Place filter widget(s) here"),
+            dropzone.placeholder("Place widgets like filter widget(s) and action button(s) here"),
             dropzone.hideDataSourceHeaderIf(canHideDataSourceHeader)
         )(values.filtersPlaceholder)
     );
@@ -296,7 +292,7 @@ export const getPreview = (
     return container()(
         titleHeader,
         ...(canHideDataSourceHeader ? [datasource(values.datasource)()] : []),
-        ...(values.showHeaderFilters && values.filterList.length > 0 ? [headerFilters] : []),
+        headerFilters,
         headers,
         ...Array.from({ length: 5 }).map(() => columns),
         ...footer

packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx

@@ -122,11 +122,9 @@ export function preview(props: DatagridPreviewProps): ReactElement {
             )}
             hasMoreItems={false}
             headerFilters={
-                props.showHeaderFilters ? (
-                    <props.filtersPlaceholder.renderer caption="Place filter widget(s) here">
-                        <div />
-                    </props.filtersPlaceholder.renderer>
-                ) : null
+                <props.filtersPlaceholder.renderer caption="Place widgets like filter widget(s) and action button(s) here">
+                    <div />
+                </props.filtersPlaceholder.renderer>
             }
             headerWrapperRenderer={selectableWrapperRenderer}
             numberOfItems={5}

packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx

@@ -173,33 +173,25 @@ export default function Datagrid(props: DatagridContainerProps): ReactElement {
             hasMoreItems={props.datasource.hasMoreItems ?? false}
             headerWrapperRenderer={useCallback((_columnIndex: number, header: ReactElement) => header, [])}
             headerFilters={useMemo(
-                () =>
-                    props.showHeaderFilters ? (
-                        <FilterContext.Provider
-                            value={{
-                                filterDispatcher: prev => {
-                                    if (prev.filterType) {
-                                        const [, filterDispatcher] = multipleFilteringState[prev.filterType];
-                                        filterDispatcher(prev);
-                                        setFiltered(true);
-                                    }
-                                    return prev;
-                                },
-                                multipleAttributes: filterList,
-                                multipleInitialFilters
-                            }}
-                        >
-                            {props.filtersPlaceholder}
-                        </FilterContext.Provider>
-                    ) : null,
-                [
-                    FilterContext,
-                    filterList,
-                    multipleInitialFilters,
-                    props.filtersPlaceholder,
-                    multipleFilteringState,
-                    props.showHeaderFilters
-                ]
+                () => (
+                    <FilterContext.Provider
+                        value={{
+                            filterDispatcher: prev => {
+                                if (prev.filterType) {
+                                    const [, filterDispatcher] = multipleFilteringState[prev.filterType];
+                                    filterDispatcher(prev);
+                                    setFiltered(true);
+                                }
+                                return prev;
+                            },
+                            multipleAttributes: filterList,
+                            multipleInitialFilters
+                        }}
+                    >
+                        {props.filtersPlaceholder}
+                    </FilterContext.Provider>
+                ),
+                [FilterContext, filterList, multipleInitialFilters, props.filtersPlaceholder, multipleFilteringState]
             )}
             id={id.current}
             numberOfItems={props.datasource.totalCount}

packages/pluggableWidgets/datagrid-web/src/Datagrid.xml

@@ -258,13 +258,9 @@
         </propertyGroup>
         <propertyGroup caption="Grid wide filtering">
             <propertyGroup caption="Grid wide filtering">
-                <property key="showHeaderFilters" type="boolean" defaultValue="false">
-                    <caption>Grid wide filters</caption>
-                    <description>When enabled and at least one filter is configured below, there is a dropzone available above the grid. Filter widgets can be added here to filter over multiple attributes/columns instead of a single column. To filter per column, check the column configuration.</description>
-                </property>
                 <property key="filterList" type="object" isList="true" required="false">
                     <caption>Filters</caption>
-                    <description>The list of attributes that are used by the filter widgets placed in the grid wide dropzone. Filtering over associations it not supported.</description>
+                    <description>The list of attributes is used by the filter widgets that are placed in the placeholder above the data grid. This enables filtering across multiple attributes or columns instead of limiting to a single column.</description>
                     <properties>
                         <propertyGroup caption="General">
                             <property key="filter" type="attribute" dataSource="../datasource">

packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts

@@ -101,7 +101,6 @@ export interface DatagridContainerProps {
     columnsDraggable: boolean;
     columnsHidable: boolean;
     configurationAttribute?: EditableValue<string>;
-    showHeaderFilters: boolean;
     filterList: FilterListType[];
     filtersPlaceholder?: ReactNode;
     filterSectionTitle?: DynamicValue<string>;
@@ -138,7 +137,6 @@ export interface DatagridPreviewProps {
     columnsHidable: boolean;
     configurationAttribute: string;
     onConfigurationChange: {} | null;
-    showHeaderFilters: boolean;
     filterList: FilterListPreviewType[];
     filtersPlaceholder: { widgetCount: number; renderer: ComponentType<{ caption?: string }> };
     filterSectionTitle: string;