[WC-1767] Support Selection helper in DG2 (#498)

r0b1n · web-flow · commit eccd0854fa29 · 2023-05-02T15:47:00.000+02:00
diff --git a/packages/modules/data-widgets/package.json b/packages/modules/data-widgets/package.json
@@ -1,7 +1,7 @@
 {
   "name": "data-widgets",
   "moduleName": "Data Widgets",
-  "version": "2.7.1",
+  "version": "2.7.2",
   "license": "Apache-2.0",
   "copyright": "© Mendix Technology BV 2023. All rights reserved.",
   "private": true,
diff --git a/packages/pluggableWidgets/datagrid-web/CHANGELOG.md b/packages/pluggableWidgets/datagrid-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+-   It is now possible to add Selection helper widget into the header section of Data Grid 2.
+
 ## [2.7.0] - 2023-03-29
 
 ### Added
diff --git a/packages/pluggableWidgets/datagrid-web/package.json b/packages/pluggableWidgets/datagrid-web/package.json
@@ -1,7 +1,7 @@
 {
   "name": "datagrid-web",
   "widgetName": "Datagrid",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "description": "",
   "copyright": "© Mendix Technology BV 2023. All rights reserved.",
   "private": true,
diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts b/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts
@@ -210,7 +210,7 @@ export const getPreview = (
             )
         )
     );
-    const titleHeader = rowLayout({
+    const gridTitle = rowLayout({
         columnSize: "fixed",
         backgroundColor: modeColor("#3B5C8F", "#DAEFFB"),
         borders: true,
@@ -220,7 +220,7 @@ export const getPreview = (
             padding: 4
         })(text({ fontColor: modeColor("#6DB1FE", "#2074C8") })("Data grid 2"))
     );
-    const headerFilters = rowLayout({
+    const gridHeaderWidgets = rowLayout({
         columnSize: "fixed",
         borders: true
     })(
@@ -230,7 +230,7 @@ export const getPreview = (
         )(values.filtersPlaceholder)
     );
 
-    const headers = rowLayout({
+    const columnHeaders = rowLayout({
         columnSize: "fixed"
     })(
         ...columnProps.map(column => {
@@ -274,7 +274,7 @@ export const getPreview = (
                 : content;
         })
     );
-    const footer =
+    const customEmptyMessageWidgets =
         values.showEmptyPlaceholder === "custom"
             ? [
                   rowLayout({
@@ -290,12 +290,12 @@ export const getPreview = (
             : [];
 
     return container()(
-        titleHeader,
+        gridTitle,
         ...(canHideDataSourceHeader ? [datasource(values.datasource)()] : []),
-        headerFilters,
-        headers,
+        gridHeaderWidgets,
+        columnHeaders,
         ...Array.from({ length: 5 }).map(() => columns),
-        ...footer
+        ...customEmptyMessageWidgets
     );
 };
 
diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx b/packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx
@@ -121,7 +121,7 @@ export function preview(props: DatagridPreviewProps): ReactElement {
                 [columns]
             )}
             hasMoreItems={false}
-            headerFilters={
+            gridHeaderWidgets={
                 <props.filtersPlaceholder.renderer caption="Place widgets like filter widget(s) and action button(s) here">
                     <div />
                 </props.filtersPlaceholder.renderer>
diff --git a/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx b/packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx
@@ -10,7 +10,12 @@ import {
     useFilterContext,
     useMultipleFiltering
 } from "@mendix/pluggable-widgets-commons/components/web";
-import { isAvailable, useSelectionHelper } from "@mendix/pluggable-widgets-commons";
+import {
+    getGlobalSelectionContext,
+    isAvailable,
+    useCreateSelectionContextValue,
+    useSelectionHelper
+} from "@mendix/pluggable-widgets-commons";
 import { extractFilters } from "./features/filters";
 import { useCellRenderer } from "./features/cell";
 import { getColumnAssociationProps, isSortable } from "./features/column";
@@ -29,6 +34,7 @@ export default function Datagrid(props: DatagridContainerProps): ReactElement {
     const [filtered, setFiltered] = useState(false);
     const multipleFilteringState = useMultipleFiltering();
     const { FilterContext } = useFilterContext();
+    const SelectionContext = getGlobalSelectionContext();
     const cellRenderer = useCellRenderer({ columns: props.columns, onClick: props.onClick });
 
     useEffect(() => {
@@ -120,6 +126,8 @@ export default function Datagrid(props: DatagridContainerProps): ReactElement {
     const selectActionProps = useOnSelectProps(selection);
     const { selectionStatus, selectionMethod } = selectionSettings(props, selection);
 
+    const selectionContextValue = useCreateSelectionContextValue(selection);
+
     return (
         <Table
             selectionStatus={selectionStatus}
@@ -169,10 +177,9 @@ export default function Datagrid(props: DatagridContainerProps): ReactElement {
                 },
                 [FilterContext, customFiltersState, props.columns]
             )}
-            filtersTitle={props.filterSectionTitle?.value}
             hasMoreItems={props.datasource.hasMoreItems ?? false}
             headerWrapperRenderer={useCallback((_columnIndex: number, header: ReactElement) => header, [])}
-            headerFilters={useMemo(
+            gridHeaderWidgets={useMemo(
                 () => (
                     <FilterContext.Provider
                         value={{
@@ -188,11 +195,14 @@ export default function Datagrid(props: DatagridContainerProps): ReactElement {
                             multipleInitialFilters
                         }}
                     >
-                        {props.filtersPlaceholder}
+                        <SelectionContext.Provider value={selectionContextValue}>
+                            {props.filtersPlaceholder}
+                        </SelectionContext.Provider>
                     </FilterContext.Provider>
                 ),
                 [FilterContext, filterList, multipleInitialFilters, props.filtersPlaceholder, multipleFilteringState]
             )}
+            gridHeaderTitle={props.filterSectionTitle?.value}
             id={id.current}
             numberOfItems={props.datasource.totalCount}
             page={currentPage}
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Table.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Table.tsx
@@ -52,9 +52,9 @@ export interface TableProps<T extends ObjectItem> {
     data: T[];
     emptyPlaceholderRenderer?: (renderWrapper: (children: ReactNode) => ReactElement) => ReactElement;
     filterRenderer: (renderWrapper: (children: ReactNode) => ReactElement, columnIndex: number) => ReactElement;
-    filtersTitle?: string;
+    gridHeaderWidgets?: ReactNode;
+    gridHeaderTitle?: string;
     hasMoreItems: boolean;
-    headerFilters?: ReactNode;
     headerWrapperRenderer: (columnIndex: number, header: ReactElement) => ReactElement;
     id?: string;
     numberOfItems?: number;
@@ -107,9 +107,9 @@ export function Table<T extends ObjectItem>(props: TableProps<T>): ReactElement
         data,
         emptyPlaceholderRenderer,
         filterRenderer: filterRendererProp,
-        filtersTitle,
+        gridHeaderWidgets,
+        gridHeaderTitle,
         hasMoreItems,
-        headerFilters,
         headerWrapperRenderer,
         id,
         numberOfItems,
@@ -279,9 +279,9 @@ export function Table<T extends ObjectItem>(props: TableProps<T>): ReactElement
                 <div className="table-header" role="rowgroup">
                     {(pagingPosition === "top" || pagingPosition === "both") && pagination}
                 </div>
-                {headerFilters && (
-                    <div className="header-filters" role="rowgroup" aria-label={filtersTitle}>
-                        {headerFilters}
+                {gridHeaderWidgets && (
+                    <div className="header-filters" role="rowgroup" aria-label={gridHeaderTitle}>
+                        {gridHeaderWidgets}
                     </div>
                 )}
                 <InfiniteBody
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/__tests__/Table.spec.tsx b/packages/pluggableWidgets/datagrid-web/src/components/__tests__/Table.spec.tsx
@@ -159,12 +159,12 @@ describe("Table", () => {
         const component = render(
             <Table
                 {...mockTableProps()}
-                headerFilters={
+                gridHeaderWidgets={
                     <div className="my-custom-filters">
                         <span />
                     </div>
                 }
-                filtersTitle="filter title"
+                gridHeaderTitle="filter title"
             />
         );
 
diff --git a/packages/pluggableWidgets/datagrid-web/src/package.xml b/packages/pluggableWidgets/datagrid-web/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Datagrid" version="2.7.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Datagrid" version="2.7.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Datagrid.xml" />
         </widgetFiles>
diff --git a/packages/pluggableWidgets/gallery-web/CHANGELOG.md b/packages/pluggableWidgets/gallery-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+-   Minor changes in the internal structure of the widget.
+
 ## [1.3.0] - 2023-03-29
 
 ### Added
diff --git a/packages/pluggableWidgets/gallery-web/package.json b/packages/pluggableWidgets/gallery-web/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gallery-web",
   "widgetName": "Gallery",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "A flexible gallery widget that renders columns, rows and layouts.",
   "copyright": "© Mendix Technology BV 2023. All rights reserved.",
   "license": "Apache-2.0",
diff --git a/packages/pluggableWidgets/gallery-web/src/Gallery.tsx b/packages/pluggableWidgets/gallery-web/src/Gallery.tsx
@@ -12,7 +12,12 @@ import {
 import { FilterCondition } from "mendix/filters";
 import { extractFilters } from "./utils/filters";
 import { and } from "mendix/filters/builders";
-import { executeAction, getGlobalSelectionContext, useSelectionHelper } from "@mendix/pluggable-widgets-commons";
+import {
+    executeAction,
+    getGlobalSelectionContext,
+    useCreateSelectionContextValue,
+    useSelectionHelper
+} from "@mendix/pluggable-widgets-commons";
 
 export function Gallery(props: GalleryContainerProps): ReactElement {
     const viewStateFilters = useRef<FilterCondition | undefined>(undefined);
@@ -104,24 +109,7 @@ export function Gallery(props: GalleryContainerProps): ReactElement {
 
     const selection = useSelectionHelper(props.itemSelection, props.datasource, props.onSelectionChange);
 
-    const toggleSelection = useCallback(() => {
-        if (selection?.type === "Multi") {
-            if (selection.selectionStatus === "all") {
-                selection.selectNone();
-            } else {
-                selection.selectAll();
-            }
-        }
-    }, [selection]);
-    const multiSelectionStatus = selection?.type === "Multi" ? selection.selectionStatus : undefined;
-    const selectionContextValue = useMemo(() => {
-        if (multiSelectionStatus !== undefined) {
-            return {
-                status: multiSelectionStatus,
-                toggle: toggleSelection
-            };
-        }
-    }, [multiSelectionStatus, toggleSelection]);
+    const selectionContextValue = useCreateSelectionContextValue(selection);
 
     const showHeader = props.filterList.length > 0 || props.sortList.length > 0 || selection?.type === "Multi";
 
diff --git a/packages/pluggableWidgets/gallery-web/src/package.xml b/packages/pluggableWidgets/gallery-web/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Gallery" version="1.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Gallery" version="1.3.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Gallery.xml" />
         </widgetFiles>
diff --git a/packages/pluggableWidgets/selection-helper-web/CHANGELOG.md b/packages/pluggableWidgets/selection-helper-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+-   It is now possible to add selection helper in the header of the Data Grid 2 widget.
+
 ## [1.0.0] - 2023-03-29
 
 ### Added
diff --git a/packages/pluggableWidgets/selection-helper-web/package.json b/packages/pluggableWidgets/selection-helper-web/package.json
@@ -1,7 +1,7 @@
 {
   "name": "selection-helper-web",
   "widgetName": "SelectionHelper",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "copyright": "© Mendix Technology BV 2023. All rights reserved.",
   "license": "Apache-2.0",
diff --git a/packages/pluggableWidgets/selection-helper-web/src/SelectionHelper.tsx b/packages/pluggableWidgets/selection-helper-web/src/SelectionHelper.tsx
@@ -10,7 +10,8 @@ export function SelectionHelper(props: SelectionHelperContainerProps): ReactElem
     if (contextValue.hasError) {
         return (
             <Alert bootstrapStyle="danger">
-                The Selection helper widget must be placed inside the header of the Gallery widget with multi-selection.
+                The Selection Helper widget should be placed within the header section of the Data Grid 2 or the Gallery
+                widget with multi-selection enabled.
             </Alert>
         );
     }
diff --git a/packages/pluggableWidgets/selection-helper-web/src/package.xml b/packages/pluggableWidgets/selection-helper-web/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="SelectionHelper" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="SelectionHelper" version="1.0.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="SelectionHelper.xml" />
         </widgetFiles>
diff --git a/packages/shared/pluggable-widgets-commons/src/selection/context.ts b/packages/shared/pluggable-widgets-commons/src/selection/context.ts
@@ -1,6 +1,7 @@
+import { createContext, useContext, Context, useCallback, useMemo } from "react";
 import { error, value, ValueMeta } from "../utils/valueStatus";
 import { OutOfContextError } from "../components/web/utils/errors";
-import { createContext, useContext, Context } from "react";
+import { SelectionHelper } from "./";
 
 const CONTEXT_OBJECT_PATH = "com.mendix.widgets.web.selectable.selectionContext" as const;
 
@@ -20,6 +21,30 @@ export function getGlobalSelectionContext(): SelectionContextObject {
     return window[CONTEXT_OBJECT_PATH]!;
 }
 
+export function useCreateSelectionContextValue(selection: SelectionHelper | undefined) {
+    const toggleSelection = useCallback(() => {
+        if (selection?.type === "Multi") {
+            if (selection.selectionStatus === "all") {
+                selection.selectNone();
+            } else {
+                selection.selectAll();
+            }
+        }
+    }, [selection]);
+    const multiSelectionStatus = selection?.type === "Multi" ? selection.selectionStatus : undefined;
+
+    return useMemo(() => {
+        if (multiSelectionStatus !== undefined) {
+            return {
+                status: multiSelectionStatus,
+                toggle: toggleSelection
+            };
+        }
+
+        return undefined;
+    }, [multiSelectionStatus, toggleSelection]);
+}
+
 export function useSelectionContextValue(): ValueMeta<SelectionContextValue, OutOfContextError> {
     const context = getGlobalSelectionContext();
     const contextValue = useContext(context);

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "data-widgets",`
`3`	`3`	`"moduleName": "Data Widgets",`
`4`		`- "version": "2.7.1",`
	`4`	`+ "version": "2.7.2",`
`5`	`5`	`"license": "Apache-2.0",`
`6`	`6`	`"copyright": "© Mendix Technology BV 2023. All rights reserved.",`
`7`	`7`	`"private": true,`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "datagrid-web",`
`3`	`3`	`"widgetName": "Datagrid",`
`4`		`- "version": "2.7.0",`
	`4`	`+ "version": "2.7.1",`
`5`	`5`	`"description": "",`
`6`	`6`	`"copyright": "© Mendix Technology BV 2023. All rights reserved.",`
`7`	`7`	`"private": true,`