[WC-3027] dg2 selectall

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss

@@ -428,7 +428,8 @@ $root: ".widget-datagrid";
         align-items: center;
     }
 
-    &-exporting {
+    &-exporting,
+    &-selecting-all-pages {
         .widget-datagrid-top-bar,
         .widget-datagrid-header,
         .widget-datagrid-content,
@@ -525,7 +526,7 @@ $root: ".widget-datagrid";
 
 .widget-datagrid .widget-datagrid-load-more {
     display: block !important;
-    margin: 0;
+    margin: var(--spacing-small, 8px) 0;
 }
 
 .infinite-loading.widget-datagrid-grid-body {
@@ -563,33 +564,51 @@ $root: ".widget-datagrid";
 :where(#{$root}-pb-start, #{$root}-tb-start, #{$root}-pb-end, #{$root}-tb-end, #{$root}-pb-middle) {
     flex-grow: 1;
     flex-basis: 33.33%;
-    min-height: 20px;
-    height: 54px;
-    padding: var(--spacing-small) 0;
+}
+
+:where(#{$root}-pb-middle) {
+    display: flex;
+    justify-content: center;
 }
 
 :where(#{$root}-pb-start, #{$root}-tb-start) {
-    padding-inline: var(--spacing-medium);
     display: flex;
     align-items: center;
 }
 
-#{$root}-clear-selection {
+#{$root}-btn-link {
     cursor: pointer;
     background: transparent;
     border: none;
-    text-decoration: underline;
     color: var(--link-color);
-    padding: 0;
+    padding: 0.3em 0.5em;
+    border-radius: 6px;
     display: inline-block;
+    white-space: nowrap;
 
-    &:focus:not(:focus-visible) {
-        outline: none;
+    &:hover,
+    &:focus-visible {
+        background-color: var(--brand-primary-50, #e6e7f2);
     }
+}
 
-    &:focus-visible {
-        outline: 1px solid var(--brand-primary, $brand-primary);
-        outline-offset: 2px;
+:where(#{$root}-selection-counter) {
+    display: flex;
+    align-items: center;
+    height: 54px;
+    padding: var(--spacing-small) var(--spacing-medium);
+}
+
+:where(#{$root}-select-all-bar) {
+    grid-column: 1 / -1;
+    background-color: #f0f1f2;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    padding: var(--spacing-smaller, 8px) var(--spacing-medium, 16px);
+
+    #{$root}-spinner {
+        padding: 6.2px;
     }
 }
 

packages/pluggableWidgets/custom-chart-web/src/controllers/ChartPropsController.ts

@@ -1,5 +1,5 @@
 import { EditorStoreState } from "@mendix/shared-charts/main";
-import { DerivedPropsGate, ReactiveController, ReactiveControllerHost } from "@mendix/widget-plugin-mobx-kit/main";
+import { DerivedPropsGate, SetupComponent, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main";
 import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
 import { makeAutoObservable } from "mobx";
 import { Config, Data, Layout } from "plotly.js-dist-min";
@@ -18,14 +18,14 @@ interface ChartPropsControllerSpec {
     editorStateGate: DerivedPropsGate<EditorStoreState>;
 }
 
-export class ChartPropsController implements ReactiveController {
+export class ChartPropsController implements SetupComponent {
     private cleanup: undefined | (() => void) = undefined;
     private editorStateGate: DerivedPropsGate<EditorStoreState>;
     private propsGate: DerivedPropsGate<ControllerProps>;
     private sizeProvider: SizeProvider;
 
-    constructor(host: ReactiveControllerHost, spec: ChartPropsControllerSpec) {
-        host.addController(this);
+    constructor(host: SetupComponentHost, spec: ChartPropsControllerSpec) {
+        host.add(this);
 
         this.editorStateGate = spec.editorStateGate;
         this.propsGate = spec.propsGate;

packages/pluggableWidgets/custom-chart-web/src/controllers/CustomChartControllerHost.ts

@@ -1,17 +1,16 @@
 import { EditorStoreState } from "@mendix/shared-charts/main";
-import { BaseControllerHost } from "@mendix/widget-plugin-mobx-kit/BaseControllerHost";
-import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
-import { ResizeController } from "./ResizeController";
+import { DerivedPropsGate, SetupHost } from "@mendix/widget-plugin-mobx-kit/main";
 import { ChartPropsController } from "./ChartPropsController";
-import { ControllerProps } from "./typings";
 import { PlotlyController } from "./PlotlyController";
+import { ResizeController } from "./ResizeController";
+import { ControllerProps } from "./typings";
 
 interface CustomChartControllerHostSpec {
     propsGate: DerivedPropsGate<ControllerProps>;
     editorStateGate: DerivedPropsGate<EditorStoreState>;
 }
 
-export class CustomChartControllerHost extends BaseControllerHost {
+export class CustomChartControllerHost extends SetupHost {
     resizeCtrl: ResizeController;
     chartPropsController: ChartPropsController;
     plotlyController: PlotlyController;

packages/pluggableWidgets/custom-chart-web/src/controllers/PlotlyController.ts

@@ -1,5 +1,5 @@
-import { ChartProps, PlotlyChart } from "../components/PlotlyChart";
 import { autorun } from "mobx";
+import { ChartProps, PlotlyChart } from "../components/PlotlyChart";
 
 interface PropsProvider {
     mergedProps: ChartProps;
@@ -23,8 +23,6 @@ export class PlotlyController {
         } else {
             const chart = new PlotlyChart(target, this.propsProvider.mergedProps);
 
-            // const [updatePlotlyDebounced, abort] = debounce((props: ChartProps) => chart.update(props), 100);
-
             const dispose = autorun(
                 () => {
                     chart.update(this.propsProvider.mergedProps);

packages/pluggableWidgets/custom-chart-web/src/controllers/ResizeController.ts

@@ -1,14 +1,14 @@
-import { ReactiveController, ReactiveControllerHost } from "@mendix/widget-plugin-mobx-kit/main";
+import { SetupComponent, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main";
 import { debounce } from "@mendix/widget-plugin-platform/utils/debounce";
 import { action, makeObservable, observable } from "mobx";
 
-export class ResizeController implements ReactiveController {
+export class ResizeController implements SetupComponent {
     width = 0;
     height = 0;
     private cleanup: undefined | (() => void) = undefined;
 
-    constructor(host: ReactiveControllerHost) {
-        host.addController(this);
+    constructor(host: SetupComponentHost) {
+        host.add(this);
 
         makeObservable(this, {
             width: observable,

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/hocs/withLinkedRefStore.tsx

@@ -3,7 +3,7 @@ import { RefFilterStore } from "@mendix/widget-plugin-dropdown-filter/stores/Ref
 import { FilterAPI, useFilterAPI } from "@mendix/widget-plugin-filtering/context";
 import { BaseStoreProvider } from "@mendix/widget-plugin-filtering/custom-filter-api/BaseStoreProvider";
 import { GateProvider } from "@mendix/widget-plugin-mobx-kit/GateProvider";
-import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
+import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
 import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";
 import { useSetup } from "@mendix/widget-plugin-mobx-kit/react/useSetup";
 import { AssociationMetaData, ListAttributeValue, ListExpressionValue, ListValue } from "mendix";

packages/pluggableWidgets/datagrid-web/package.json

@@ -50,6 +50,8 @@
         "@mendix/widget-plugin-mobx-kit": "workspace:*",
         "@mendix/widget-plugin-platform": "workspace:*",
         "@radix-ui/react-progress": "^1.1.7",
+        "brandi": "^5.0.0",
+        "brandi-react": "^5.0.0",
         "classnames": "^2.5.1",
         "mobx": "6.12.3",
         "mobx-react-lite": "4.0.7",

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

@@ -0,0 +1,46 @@
+import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
+import { DatagridContainerProps } from "../typings/DatagridProps";
+
+/** Config for static values that don't change at runtime. */
+export interface DatagridConfig {
+    checkboxColumnEnabled: boolean;
+    filtersChannelName: string;
+    id: string;
+    name: string;
+    refreshIntervalMs: number;
+    selectAllCheckboxEnabled: boolean;
+    selectionEnabled: boolean;
+    selectorColumnEnabled: boolean;
+    settingsStorageEnabled: boolean;
+}
+
+export function datagridConfig(props: DatagridContainerProps): DatagridConfig {
+    const id = `${props.name}:Datagrid@${generateUUID()}`;
+
+    return Object.freeze({
+        checkboxColumnEnabled: isCheckboxColumnEnabled(props),
+        filtersChannelName: `${id}:events`,
+        id,
+        name: props.name,
+        refreshIntervalMs: props.refreshInterval * 1000,
+        selectAllCheckboxEnabled: props.showSelectAllToggle,
+        selectionEnabled: isSelectionEnabled(props),
+        selectorColumnEnabled: props.columnsHidable,
+        settingsStorageEnabled: isSettingsStorageEnabled(props)
+    });
+}
+
+function isSelectionEnabled(props: DatagridContainerProps): boolean {
+    return props.itemSelection !== undefined;
+}
+
+function isCheckboxColumnEnabled(props: DatagridContainerProps): boolean {
+    if (!props.itemSelection) return false;
+    return props.itemSelectionMethod === "checkbox";
+}
+
+function isSettingsStorageEnabled(props: DatagridContainerProps): boolean {
+    if (props.configurationStorageType === "localStorage") return true;
+    if (props.configurationStorageType === "attribute" && props.configurationAttribute) return true;
+    return false;
+}