@adaptabletools/adaptable 18.0.0-canary.17 → 18.0.0-canary.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "18.0.0-canary.17",
+  "version": "18.0.0-canary.18",
   "description": "Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

package/src/Api/Internal/GridFilterInternalApi.d.ts

@@ -1,4 +1,9 @@
 import { ApiBase } from '../Implementation/ApiBase';
+import { GridFilter } from '../../types';
 export declare class GridFilterInternalApi extends ApiBase {
     fireGridFilterAppliedEvent(): void;
+    /**
+   * Compares to Grid Filters to see if they are identical
+   */
+    isGridFilterDifferent(oldFilter: GridFilter, newFilter: GridFilter): boolean;
 }

package/src/Api/Internal/GridFilterInternalApi.js

@@ -16,4 +16,10 @@ export class GridFilterInternalApi extends ApiBase {
             adaptableApi.eventApi.emit('GridFilterApplied', gridFilterAppliedInfo);
         }
     }
+    /**
+   * Compares to Grid Filters to see if they are identical
+   */
+    isGridFilterDifferent(oldFilter, newFilter) {
+        return (oldFilter === null || oldFilter === void 0 ? void 0 : oldFilter.Expression) === (newFilter === null || newFilter === void 0 ? void 0 : newFilter.Expression);
+    }
 }

package/src/PredefinedConfig/Common/Menu.d.ts

@@ -5,11 +5,16 @@ import { SelectedCellInfo } from '../Selection/SelectedCellInfo';
 import { SelectedRowInfo } from '../Selection/SelectedRowInfo';
 import { Column, IRowNode } from '@ag-grid-community/core';
 import { AdaptableIcon, BaseContext } from '../../types';
+export type AdaptableColumnMenuItemName = (typeof ADAPTABLE_COLUMN_MENU_ITEMS)[number];
+export type AdaptableContextMenuItemName = (typeof ADAPTABLE_CONTEXT_MENU_ITEMS)[number];
 /**
- * List of Shipped Adaptable Menu Items
+ * List of Shipped Adaptable Column Menu Items
  */
-export declare const ADAPTABLE_MENU_ITEMS: readonly ["alert-clear", "bulk-update-apply", "calculated-column-edit", "cell-summary-show", "column-info", "comment-add", "comment-remove", "custom-sort-add", "custom-sort-edit", "dashboard", "dashboard-collapse", "dashboard-configure", "dashboard-dock", "dashboard-expand", "dashboard-float", "dashboard-hide", "dashboard-show", "data-import", "export", "export-clipboard", "export-csv", "export-excel", "export-json", "export-table", "export-custom-destination", "fdc3", "fdc3-broadcast", "fdc3-raise-intent", "filter", "filter-bar-visbility", "filter-clear", "filter-suspend", "filter-cell-value", "flashing-cell-add", "flashing-cell-clear", "flashing-cell-delete", "flashing-row-clear", "format-column", "format-column-add", "format-column-edit", "free-text-column-edit", "grid-info", "layout-aggregated-view", "layout-auto-size", "layout-clear-selection", "layout-column-caption-change", "layout-column-hide", "layout-column-select", "layout-column-select-preserve", "layout-column-select-reset", "layout-edit", "layout-grid", "layout-select", "layout-select-all", "note-add", "note-remove", "plus-minus-add", "smart-edit-apply", "settings-panel-open", "styled-column-badge", "styled-column", "styled-column-gradient", "styled-column-percent-bar", "styled-column-sparkline", "system-status-show", "internal"];
-export type AdaptableMenuItemName = typeof ADAPTABLE_MENU_ITEMS[number];
+export declare const ADAPTABLE_COLUMN_MENU_ITEMS: readonly ["calculated-column-edit", "cell-summary-show", "column-filter-bar-hide", "column-filter-bar-show", "column-filter-clear", "column-filter-on-cell-value", "column-filter-suspend", "column-filter-unsuspend", "column-info-show", "custom-sort-add", "custom-sort-edit", "dashboard-collapse", "dashboard-configure", "dashboard-dock", "dashboard-expand", "dashboard-float", "dashboard-hide", "dashboard-show", "data-import", "flashing-cell-add", "flashing-cell-delete", "format-column-add", "format-column-edit", "free-text-column-edit", "grid-info-show", "layout-column-caption-change", "layout-column-hide", "layout-column-select", "layout-column-select-preserve", "layout-column-select-reset", "layout-edit", "layout-grid-parent", "layout-select-parent", "layout-select-all", "plus-minus-add", "settings-panel-open", "styled-column-badge-add", "styled-column-badge-edit", "styled-column-gradient-add", "styled-column-gradient-edit", "styled-column-percent-bar-add", "styled-column-percent-bar-edit", "styled-column-sparkline-add", "styled-column-sparkline-edit", "system-status-show", "internal", "parent"];
+/**
+ * List of Shipped Adaptable Context Menu Items
+ */
+export declare const ADAPTABLE_CONTEXT_MENU_ITEMS: readonly ["alert-clear", "bulk-update-apply", "calculated-column-edit", "cell-summary-show", "column-filter-on-cell-value", "column-filter-clear", "column-filter-suspend", "column-filter-unsuspend", "column-info-show", "comment-add", "comment-remove", "dashboard-collapse", "dashboard-configure", "dashboard-dock", "dashboard-expand", "dashboard-float", "dashboard-hide", "dashboard-show", "data-import", "export-clipboard", "export-csv", "export-excel", "export-json", "export-table", "export-custom-destination", "fdc3-broadcast", "fdc3-raise-intent", "flashing-cell-clear", "flashing-row-clear", "grid-info-show", "layout-aggregated-view", "layout-auto-size", "layout-clear-selection", "layout-edit", "layout-select-all", "note-add", "note-remove", "settings-panel-open", "smart-edit-apply", "system-status-show"];
 /**
  * Menu item used by Adaptable in both Column and Context Menus
  */
@@ -17,7 +22,7 @@ export interface AdaptableMenuItem {
     /**
      * Unique name for the Menu Item
      */
-    name: AdaptableMenuItemName;
+    name: AdaptableColumnMenuItemName | AdaptableContextMenuItemName;
     /**
      * Text that appears in the menu
      */

package/src/PredefinedConfig/Common/Menu.js

@@ -1,17 +1,70 @@
 /**
- * List of Shipped Adaptable Menu Items
+ * List of Shipped Adaptable Column Menu Items
  */
-export const ADAPTABLE_MENU_ITEMS = [
+export const ADAPTABLE_COLUMN_MENU_ITEMS = [
+    'calculated-column-edit',
+    'cell-summary-show',
+    'column-filter-bar-hide',
+    'column-filter-bar-show',
+    'column-filter-clear',
+    'column-filter-on-cell-value',
+    'column-filter-suspend',
+    'column-filter-unsuspend',
+    'column-info-show',
+    'custom-sort-add',
+    'custom-sort-edit',
+    'dashboard-collapse',
+    'dashboard-configure',
+    'dashboard-dock',
+    'dashboard-expand',
+    'dashboard-float',
+    'dashboard-hide',
+    'dashboard-show',
+    'data-import',
+    'flashing-cell-add',
+    'flashing-cell-delete',
+    'format-column-add',
+    'format-column-edit',
+    'free-text-column-edit',
+    'grid-info-show',
+    'layout-column-caption-change',
+    'layout-column-hide',
+    'layout-column-select',
+    'layout-column-select-preserve',
+    'layout-column-select-reset',
+    'layout-edit',
+    'layout-grid-parent',
+    'layout-select-parent',
+    'layout-select-all',
+    'plus-minus-add',
+    'settings-panel-open',
+    'styled-column-badge-add',
+    'styled-column-badge-edit',
+    'styled-column-gradient-add',
+    'styled-column-gradient-edit',
+    'styled-column-percent-bar-add',
+    'styled-column-percent-bar-edit',
+    'styled-column-sparkline-add',
+    'styled-column-sparkline-edit',
+    'system-status-show',
+    'internal',
+    'parent',
+];
+/**
+ * List of Shipped Adaptable Context Menu Items
+ */
+export const ADAPTABLE_CONTEXT_MENU_ITEMS = [
     'alert-clear',
     'bulk-update-apply',
     'calculated-column-edit',
     'cell-summary-show',
-    'column-info',
+    'column-filter-on-cell-value',
+    'column-filter-clear',
+    'column-filter-suspend',
+    'column-filter-unsuspend',
+    'column-info-show',
     'comment-add',
     'comment-remove',
-    'custom-sort-add',
-    'custom-sort-edit',
-    'dashboard',
     'dashboard-collapse',
     'dashboard-configure',
     'dashboard-dock',
@@ -20,52 +73,25 @@ export const ADAPTABLE_MENU_ITEMS = [
     'dashboard-hide',
     'dashboard-show',
     'data-import',
-    'export',
     'export-clipboard',
     'export-csv',
     'export-excel',
     'export-json',
     'export-table',
     'export-custom-destination',
-    'fdc3',
     'fdc3-broadcast',
     'fdc3-raise-intent',
-    'filter',
-    'filter-bar-visbility',
-    'filter-clear',
-    'filter-suspend',
-    'filter-cell-value',
-    'flashing-cell-add',
     'flashing-cell-clear',
-    'flashing-cell-delete',
     'flashing-row-clear',
-    'format-column',
-    'format-column-add',
-    'format-column-edit',
-    'free-text-column-edit',
-    'grid-info',
+    'grid-info-show',
     'layout-aggregated-view',
     'layout-auto-size',
     'layout-clear-selection',
-    'layout-column-caption-change',
-    'layout-column-hide',
-    'layout-column-select',
-    'layout-column-select-preserve',
-    'layout-column-select-reset',
     'layout-edit',
-    'layout-grid',
-    'layout-select',
     'layout-select-all',
     'note-add',
     'note-remove',
-    'plus-minus-add',
-    'smart-edit-apply',
     'settings-panel-open',
-    'styled-column-badge',
-    'styled-column',
-    'styled-column-gradient',
-    'styled-column-percent-bar',
-    'styled-column-sparkline',
+    'smart-edit-apply',
     'system-status-show',
-    'internal' // used by AdapTable in Settings Panel
 ];

package/src/Redux/Store/AdaptableStore.js

@@ -262,7 +262,7 @@ export class AdaptableStore {
 const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
     return function (next) {
         return function (action) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
             switch (action.type) {
                 /*******************
                  * NAMED QUERY ACTIONS
@@ -770,7 +770,6 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                                 draftLayoutAction = GridRedux.LayoutDraftColumnFilterUnsuspendAll();
                                 break;
                         }
-                        //  GRID FILTER
                         returnAction = next(draftLayoutAction);
                     }
                     setTimeout(() => {
@@ -800,7 +799,7 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                         returnAction = action;
                     }
                     else {
-                        // save in draft
+                        // This is different to what we do with column filters?
                         switch (action.type) {
                             case LayoutRedux.LAYOUT_GRID_FILTER_SET:
                                 returnAction = GridRedux.LayoutDraftGridFilterSet(Object.assign(Object.assign({}, currentLayout.GridFilter), { Expression: action.gridFilter }));
@@ -1011,12 +1010,18 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                     let returnAction = next(action);
                     const newLayoutState = middlewareAPI.getState().Layout;
                     adaptable.api.layoutApi.internalApi.fireLayoutChangedEvent(action.type, oldLayoutState, newLayoutState);
+                    // Tell Grid to apply column filtering if filters have been changed in a loaded Layout
                     const oldFilters = (_k = oldLayoutState.Layouts.find((l) => l.Name == oldLayoutState.CurrentLayout)) === null || _k === void 0 ? void 0 : _k.ColumnFilters;
                     const newFilters = (_l = newLayoutState.Layouts.find((l) => l.Name == newLayoutState.CurrentLayout)) === null || _l === void 0 ? void 0 : _l.ColumnFilters;
-                    // Tell Grid to apply filtering if filters have been changed in a loaded Layout
                     if (adaptable.api.columnFilterApi.internalApi.areColumnFiltersDifferent(oldFilters, newFilters)) {
                         adaptable.applyColumnFiltering();
                     }
+                    // Tell Grid to apply filtering if filters have been changed in a loaded Layout
+                    const oldGridFilter = (_m = oldLayoutState.Layouts.find((l) => l.Name == oldLayoutState.CurrentLayout)) === null || _m === void 0 ? void 0 : _m.GridFilter;
+                    const newGridFilter = (_o = newLayoutState.Layouts.find((l) => l.Name == newLayoutState.CurrentLayout)) === null || _o === void 0 ? void 0 : _o.GridFilter;
+                    if (adaptable.api.gridFilterApi.internalApi.isGridFilterDifferent(oldGridFilter, newGridFilter)) {
+                        adaptable.applyGridFiltering();
+                    }
                     if (returnAction.type == LayoutRedux.LAYOUT_SELECT ||
                         returnAction.type == LayoutRedux.LAYOUT_DELETE ||
                         returnAction.type == LayoutRedux.LAYOUT_SET_COLUMN_CAPTION) {
@@ -1029,7 +1034,7 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                             // tell grid the layout has been selected
                             adaptable.setLayout(currentLayout);
                         }
-                        if (!((_m = adaptable.adaptableOptions.layoutOptions) === null || _m === void 0 ? void 0 : _m.autoSaveLayouts)) {
+                        if (!((_p = adaptable.adaptableOptions.layoutOptions) === null || _p === void 0 ? void 0 : _p.autoSaveLayouts)) {
                             middlewareAPI.dispatch(GridRedux.LayoutUpdateCurrentDraft(currentLayout));
                         }
                     }
@@ -1037,7 +1042,7 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                         returnAction.type == LayoutRedux.LAYOUT_SAVE) {
                         const actionTyped = action;
                         // if autosave is false
-                        if (!((_o = adaptable.adaptableOptions.layoutOptions) === null || _o === void 0 ? void 0 : _o.autoSaveLayouts)) {
+                        if (!((_q = adaptable.adaptableOptions.layoutOptions) === null || _q === void 0 ? void 0 : _q.autoSaveLayouts)) {
                             // and the current layout is saved, make sure we also update the draft
                             if (actionTyped.layout.Name === newLayoutState.CurrentLayout) {
                                 middlewareAPI.dispatch(GridRedux.LayoutUpdateCurrentDraft(actionTyped.layout));

package/src/Strategy/AdaptableModuleBase.d.ts

@@ -3,7 +3,7 @@ import { Action } from 'redux';
 import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
 import { ModuleParams } from '../View/Components/SharedProps/ModuleViewPopupProps';
 import { MenuItemShowPopup, MenuItemDoReduxAction, MenuItemDoClickFunction } from '../Utilities/MenuItem';
-import { AdaptableMenuItem, AdaptableMenuItemName, ContextMenuContext } from '../PredefinedConfig/Common/Menu';
+import { AdaptableMenuItem, AdaptableContextMenuItemName, ContextMenuContext, AdaptableColumnMenuItemName } from '../PredefinedConfig/Common/Menu';
 import { AdaptableModule } from '../PredefinedConfig/Common/Types';
 import { TeamSharingImportInfo } from '../PredefinedConfig/TeamSharingState';
 import { AdaptableObject } from '../PredefinedConfig/Common/AdaptableObject';
@@ -41,15 +41,15 @@ export declare abstract class AdaptableModuleBase implements IModule {
     addColumnMenuItems(column: AdaptableColumn): AdaptableMenuItem[] | undefined;
     addContextMenuItems(menuContext: ContextMenuContext): AdaptableMenuItem[] | undefined;
     createMainMenuItemShowPopup({ Name, Label, ComponentName, Icon, PopupParams, }: {
-        Name: AdaptableMenuItemName;
+        Name: AdaptableColumnMenuItemName | AdaptableContextMenuItemName;
         Label: string;
         ComponentName: string;
         Icon: AdaptableSystemIconName;
         PopupParams?: ModuleParams;
     }): MenuItemShowPopup;
-    createColumnMenuItemClickFunction(Name: AdaptableMenuItemName, Label: string, Icon: AdaptableSystemIconName, ClickFunction: () => void): MenuItemDoClickFunction;
-    createColumnMenuItemReduxAction(Name: AdaptableMenuItemName, Label: string, Icon: AdaptableSystemIconName, Action: Action): MenuItemDoReduxAction;
-    createColumnMenuItemShowPopup(Name: AdaptableMenuItemName, Label: string, ComponentName: string, Icon: AdaptableSystemIconName, PopupParams?: ModuleParams): MenuItemShowPopup;
+    createMenuItemClickFunction(Name: AdaptableColumnMenuItemName | AdaptableContextMenuItemName, Label: string, Icon: AdaptableSystemIconName, ClickFunction: () => void): MenuItemDoClickFunction;
+    createMenuItemReduxAction(Name: AdaptableColumnMenuItemName | AdaptableContextMenuItemName, Label: string, Icon: AdaptableSystemIconName, Action: Action): MenuItemDoReduxAction;
+    createMenuItemShowPopup(Name: AdaptableColumnMenuItemName | AdaptableContextMenuItemName, Label: string, ComponentName: string, Icon: AdaptableSystemIconName, PopupParams?: ModuleParams): MenuItemShowPopup;
     getTeamSharingAction(): TeamSharingImportInfo<AdaptableObject> | undefined;
     getModuleNamedQueryReferences(): string[];
     getModuleCalculatedColumnReferences(): CalculatedColumn[];

package/src/Strategy/AdaptableModuleBase.js

@@ -103,15 +103,15 @@ export class AdaptableModuleBase {
         return new MenuItemShowPopup(Name, Label, this.moduleInfo.ModuleName, ComponentName, Icon, true, PopupParams);
     }
     // creates a menu item for the column menu to perform a function
-    createColumnMenuItemClickFunction(Name, Label, Icon, ClickFunction) {
+    createMenuItemClickFunction(Name, Label, Icon, ClickFunction) {
         return new MenuItemDoClickFunction(Name, Label, this.moduleInfo.ModuleName, ClickFunction, Icon, true);
     }
     // creates a menu item for the column menu to enact a Redux action
-    createColumnMenuItemReduxAction(Name, Label, Icon, Action) {
+    createMenuItemReduxAction(Name, Label, Icon, Action) {
         return new MenuItemDoReduxAction(Name, Label, this.moduleInfo.ModuleName, Action, Icon, true);
     }
     // popups called by the column menu - invisible if module is hidden or readonly
-    createColumnMenuItemShowPopup(Name, Label, ComponentName, Icon, PopupParams) {
+    createMenuItemShowPopup(Name, Label, ComponentName, Icon, PopupParams) {
         return new MenuItemShowPopup(Name, Label, this.moduleInfo.ModuleName, ComponentName, Icon, true, PopupParams);
     }
     getTeamSharingAction() {

package/src/Strategy/AlertModule.js

@@ -83,7 +83,7 @@ export class AlertModule extends AdaptableModuleBase {
                     relevantAlert = this.api.alertApi.internalApi.getAdaptableAlertWithHighlightRow(menuContext.rowNode);
                 }
                 if (relevantAlert) {
-                    items.push(this.createColumnMenuItemReduxAction('alert-clear', 'Clear Alert', this.moduleInfo.Glyph, SystemRedux.SystemAlertDelete(relevantAlert)));
+                    items.push(this.createMenuItemReduxAction('alert-clear', 'Clear Alert', this.moduleInfo.Glyph, SystemRedux.SystemAlertDelete(relevantAlert)));
                 }
             }
         }

package/src/Strategy/CalculatedColumnModule.js

@@ -57,7 +57,7 @@ export class CalculatedColumnModule extends AdaptableModuleBase {
             source: 'ColumnMenu',
         };
         return [
-            this.createColumnMenuItemShowPopup('calculated-column-edit', 'Edit Calculated Column', this.moduleInfo.Popup, this.moduleInfo.Glyph, popupParam),
+            this.createMenuItemShowPopup('calculated-column-edit', 'Edit Calculated Column', this.moduleInfo.Popup, this.moduleInfo.Glyph, popupParam),
         ];
     }
     getTeamSharingAction() {

package/src/Strategy/ColumnFilterModule.d.ts

@@ -13,8 +13,8 @@ export declare class ColumnFilterModule extends AdaptableModuleBase implements I
     getExplicitlyReferencedColumnIds(columnFilter: ColumnFilter): string[];
     hasNamedQueryReferences(): boolean;
     onAdaptableReady(): void;
-    addContextMenuItems(menuContext: ContextMenuContext): AdaptableMenuItem[] | undefined;
     addColumnMenuItems(column: AdaptableColumn): AdaptableMenuItem[] | undefined;
+    addContextMenuItems(menuContext: ContextMenuContext): AdaptableMenuItem[] | undefined;
     private getExistingColumnFilter;
     getTeamSharingAction(): TeamSharingImportInfo<ColumnFilter>;
     toViewCompact(filter: ColumnFilter): AdaptableObjectCompactView;

package/src/Strategy/ColumnFilterModule.js

@@ -39,6 +39,43 @@ export class ColumnFilterModule extends AdaptableModuleBase {
             }
         });
     }
+    addColumnMenuItems(column) {
+        let filterSubMenuItems = [];
+        if (column &&
+            column.filterable &&
+            this.api.optionsApi.getColumnFilterOptions().useAdaptableColumnFiltering) {
+            if (this.api.gridApi.isQuickFilterAvailable()) {
+                const isFilterVisible = this.api.columnFilterApi.isQuickFilterVisible();
+                if (this.isModuleEditable() &&
+                    this.api.optionsApi.getColumnFilterOptions().useAdaptableColumnFiltering) {
+                    filterSubMenuItems.push(this.createMenuItemReduxAction(isFilterVisible ? 'column-filter-bar-hide' : 'column-filter-bar-show', isFilterVisible ? 'Hide Filter Bar' : 'Show Filter Bar', isFilterVisible ? 'unchecked' : 'check', isFilterVisible
+                        ? SystemRedux.SystemQuickFilterBarHide()
+                        : SystemRedux.SystemQuickFilterBarShow()));
+                }
+            }
+            const existingColumnFilter = this.getExistingColumnFilter(column);
+            if (existingColumnFilter) {
+                filterSubMenuItems.push(this.createMenuItemReduxAction('column-filter-clear', 'Clear Filter', 'close', LayoutRedux.LayoutColumnFilterClear(existingColumnFilter)));
+                filterSubMenuItems.push(this.createMenuItemReduxAction(existingColumnFilter.IsSuspended ? 'column-filter-unsuspend' : 'column-filter-suspend', existingColumnFilter.IsSuspended ? 'Unsuspend Filter' : 'Suspend Filter', existingColumnFilter.IsSuspended ? 'resume' : 'pause', existingColumnFilter.IsSuspended
+                    ? LayoutRedux.LayoutColumnFilterUnSuspend(existingColumnFilter)
+                    : LayoutRedux.LayoutColumnFilterSuspend(existingColumnFilter)));
+            }
+            if (ArrayExtensions.IsNotNullOrEmpty(filterSubMenuItems)) {
+                return [
+                    {
+                        name: 'parent',
+                        label: this.moduleInfo.FriendlyName,
+                        isVisible: true,
+                        module: this.moduleInfo.ModuleName,
+                        icon: {
+                            name: this.moduleInfo.Glyph,
+                        },
+                        subItems: filterSubMenuItems,
+                    },
+                ];
+            }
+        }
+    }
     addContextMenuItems(menuContext) {
         if (!menuContext.isRowGroupColumn && this.isModuleAvailable()) {
             if (menuContext.adaptableColumn &&
@@ -57,13 +94,15 @@ export class ColumnFilterModule extends AdaptableModuleBase {
                             this.api.columnFilterApi.internalApi.createEqualityColumnFilterForCell(menuContext.selectedCellInfo.gridCells[0]);
                         };
                     return [
-                        this.createColumnMenuItemClickFunction('filter-cell-value', isMultiple ? 'Filter on Cell Values' : 'Filter on Cell Value', this.moduleInfo.Glyph, clickFunction),
+                        this.createMenuItemClickFunction('column-filter-on-cell-value', isMultiple ? 'Filter on Cell Values' : 'Filter on Cell Value', this.moduleInfo.Glyph, clickFunction),
                     ];
                 }
                 else {
                     let filterSubMenuItems = [];
-                    filterSubMenuItems.push(this.createColumnMenuItemReduxAction('filter-clear', 'Clear Filter', 'close', LayoutRedux.LayoutColumnFilterClear(existingColumnFilter)));
-                    filterSubMenuItems.push(this.createColumnMenuItemClickFunction('filter-suspend', existingColumnFilter.IsSuspended ? 'Unsuspend Filter' : 'Suspend Filter', existingColumnFilter.IsSuspended ? 'resume' : 'pause', existingColumnFilter.IsSuspended
+                    filterSubMenuItems.push(this.createMenuItemReduxAction('column-filter-clear', 'Clear Filter', 'close', LayoutRedux.LayoutColumnFilterClear(existingColumnFilter)));
+                    filterSubMenuItems.push(this.createMenuItemClickFunction(existingColumnFilter.IsSuspended
+                        ? 'column-filter-unsuspend'
+                        : 'column-filter-suspend', existingColumnFilter.IsSuspended ? 'Unsuspend Filter' : 'Suspend Filter', existingColumnFilter.IsSuspended ? 'resume' : 'pause', existingColumnFilter.IsSuspended
                         ? () => {
                             this.api.columnFilterApi.unSuspendColumnFilter(existingColumnFilter);
                         }
@@ -71,7 +110,8 @@ export class ColumnFilterModule extends AdaptableModuleBase {
                             this.api.columnFilterApi.suspendColumnFilter(existingColumnFilter);
                         }));
                     return [
-                        { name: 'filter',
+                        {
+                            name: 'parent',
                             label: this.moduleInfo.FriendlyName,
                             isVisible: true,
                             module: this.moduleInfo.ModuleName,
@@ -85,43 +125,6 @@ export class ColumnFilterModule extends AdaptableModuleBase {
             }
         }
     }
-    addColumnMenuItems(column) {
-        let filterSubMenuItems = [];
-        if (column &&
-            column.filterable &&
-            this.api.optionsApi.getColumnFilterOptions().useAdaptableColumnFiltering) {
-            if (this.api.gridApi.isQuickFilterAvailable()) {
-                const isFilterVisible = this.api.columnFilterApi.isQuickFilterVisible();
-                if (this.isModuleEditable() &&
-                    this.api.optionsApi.getColumnFilterOptions().useAdaptableColumnFiltering) {
-                    filterSubMenuItems.push(this.createColumnMenuItemReduxAction('filter-bar-visbility', isFilterVisible ? 'Hide Filter Bar' : 'Show Filter Bar', isFilterVisible ? 'unchecked' : 'check', isFilterVisible
-                        ? SystemRedux.SystemQuickFilterBarHide()
-                        : SystemRedux.SystemQuickFilterBarShow()));
-                }
-            }
-            const existingColumnFilter = this.getExistingColumnFilter(column);
-            if (existingColumnFilter) {
-                filterSubMenuItems.push(this.createColumnMenuItemReduxAction('filter-clear', 'Clear Filter', 'close', LayoutRedux.LayoutColumnFilterClear(existingColumnFilter)));
-                filterSubMenuItems.push(this.createColumnMenuItemReduxAction('filter-suspend', existingColumnFilter.IsSuspended ? 'Unsuspend Filter' : 'Suspend Filter', existingColumnFilter.IsSuspended ? 'resume' : 'pause', existingColumnFilter.IsSuspended
-                    ? LayoutRedux.LayoutColumnFilterUnSuspend(existingColumnFilter)
-                    : LayoutRedux.LayoutColumnFilterSuspend(existingColumnFilter)));
-            }
-            if (ArrayExtensions.IsNotNullOrEmpty(filterSubMenuItems)) {
-                return [
-                    {
-                        name: 'filter',
-                        label: this.moduleInfo.FriendlyName,
-                        isVisible: true,
-                        module: this.moduleInfo.ModuleName,
-                        icon: {
-                            name: this.moduleInfo.Glyph,
-                        },
-                        subItems: filterSubMenuItems,
-                    },
-                ];
-            }
-        }
-    }
     getExistingColumnFilter(column) {
         return this.api.columnFilterApi.getColumnFilters().find((x) => x.ColumnId == column.columnId);
     }

package/src/Strategy/ColumnInfoModule.js

@@ -15,7 +15,7 @@ export class ColumnInfoModule extends AdaptableModuleBase {
             };
             return [
                 this.createMainMenuItemShowPopup({
-                    Name: 'column-info',
+                    Name: 'column-info-show',
                     Label: 'Column Info',
                     ComponentName: this.moduleInfo.Popup,
                     Icon: this.moduleInfo.Glyph,
@@ -32,7 +32,7 @@ export class ColumnInfoModule extends AdaptableModuleBase {
             };
             return [
                 this.createMainMenuItemShowPopup({
-                    Name: 'column-info',
+                    Name: 'column-info-show',
                     Label: 'Column Info',
                     ComponentName: this.moduleInfo.Popup,
                     Icon: this.moduleInfo.Glyph,

package/src/Strategy/CommentModule.js

@@ -58,12 +58,12 @@ export class CommentModule extends AdaptableModuleBase {
             return items;
         }
         if (comments) {
-            items.push(this.createColumnMenuItemClickFunction('comment-remove', 'Remove Comment', this.moduleInfo.Glyph, () => {
+            items.push(this.createMenuItemClickFunction('comment-remove', 'Remove Comment', this.moduleInfo.Glyph, () => {
                 this.api.commentApi.deleteCommentThread(cellAddress);
             }));
         }
         else {
-            items.push(this.createColumnMenuItemClickFunction('comment-add', 'Add Comment', this.moduleInfo.Glyph, () => {
+            items.push(this.createMenuItemClickFunction('comment-add', 'Add Comment', this.moduleInfo.Glyph, () => {
                 // add an empty one
                 this.api.commentApi.addCommentThread(Object.assign(Object.assign({}, cellAddress), { Comments: [] }));
                 requestAnimationFrame(() => {

package/src/Strategy/CustomSortModule.js

@@ -36,7 +36,7 @@ export class CustomSortModule extends AdaptableModuleBase {
             };
             let name = customSort ? 'custom-sort-edit' : 'custom-sort-add';
             return [
-                this.createColumnMenuItemShowPopup(name, label + 'Custom Sort', this.moduleInfo.Popup, this.moduleInfo.Glyph, popupParam),
+                this.createMenuItemShowPopup(name, label + 'Custom Sort', this.moduleInfo.Popup, this.moduleInfo.Glyph, popupParam),
             ];
         }
     }

package/src/Strategy/DashboardModule.js

@@ -27,29 +27,29 @@ export class DashboardModule extends AdaptableModuleBase {
         if (this.isModuleAvailable()) {
             let menuItems = [];
             if (this.isModuleEditable()) {
-                menuItems.push(this.createColumnMenuItemClickFunction('dashboard-configure', 'Configure', 'settings', () => this.api.dashboardApi.openDashboardSettingsPanel()));
+                menuItems.push(this.createMenuItemClickFunction('dashboard-configure', 'Configure', 'settings', () => this.api.dashboardApi.openDashboardSettingsPanel()));
             }
             if (this.api.dashboardApi.getDashboardState().IsCollapsed) {
-                menuItems.push(this.createColumnMenuItemReduxAction('dashboard-expand', 'Expand', 'expand', DashboardRedux.DashboardSetIsCollapsed(false)));
+                menuItems.push(this.createMenuItemReduxAction('dashboard-expand', 'Expand', 'expand', DashboardRedux.DashboardSetIsCollapsed(false)));
             }
             else {
-                menuItems.push(this.createColumnMenuItemReduxAction('dashboard-collapse', 'Collapse', 'collapse', DashboardRedux.DashboardSetIsCollapsed(true)));
+                menuItems.push(this.createMenuItemReduxAction('dashboard-collapse', 'Collapse', 'collapse', DashboardRedux.DashboardSetIsCollapsed(true)));
             }
             if (this.api.dashboardApi.getDashboardState().IsFloating) {
-                menuItems.push(this.createColumnMenuItemReduxAction('dashboard-dock', 'Dock', 'dock', DashboardRedux.DashboardSetIsFloating(false)));
+                menuItems.push(this.createMenuItemReduxAction('dashboard-dock', 'Dock', 'dock', DashboardRedux.DashboardSetIsFloating(false)));
             }
             else if (this.api.optionsApi.getDashboardOptions().canFloat) {
-                menuItems.push(this.createColumnMenuItemReduxAction('dashboard-float', 'Float', 'dock', DashboardRedux.DashboardSetIsFloating(true)));
+                menuItems.push(this.createMenuItemReduxAction('dashboard-float', 'Float', 'dock', DashboardRedux.DashboardSetIsFloating(true)));
             }
             if (this.api.dashboardApi.getDashboardState().IsHidden) {
-                menuItems.push(this.createColumnMenuItemReduxAction('dashboard-show', 'Show', 'visibility-on-bold', DashboardRedux.DashboardSetIsHidden(false)));
+                menuItems.push(this.createMenuItemReduxAction('dashboard-show', 'Show', 'visibility-on-bold', DashboardRedux.DashboardSetIsHidden(false)));
             }
             else {
-                menuItems.push(this.createColumnMenuItemReduxAction('dashboard-hide', 'Hide', 'visibility-off-bold', DashboardRedux.DashboardSetIsHidden(true)));
+                menuItems.push(this.createMenuItemReduxAction('dashboard-hide', 'Hide', 'visibility-off-bold', DashboardRedux.DashboardSetIsHidden(true)));
             }
             return [
                 {
-                    name: 'dashboard',
+                    name: 'parent',
                     label: this.moduleInfo.FriendlyName,
                     isVisible: true,
                     module: this.moduleInfo.ModuleName,

package/src/Strategy/DataImportModule.js

@@ -26,6 +26,6 @@ export class DataImportModule extends AdaptableModuleBase {
             source: source,
             maxWidth: this.getPopupMaxWidth(),
         };
-        return this.createColumnMenuItemShowPopup('data-import', 'Import Data', this.moduleInfo.Popup, this.moduleInfo.Glyph, moduleParams);
+        return this.createMenuItemShowPopup('data-import', 'Import Data', this.moduleInfo.Popup, this.moduleInfo.Glyph, moduleParams);
     }
 }

package/src/Strategy/ExportModule.js

@@ -86,16 +86,16 @@ export class ExportModule extends AdaptableModuleBase {
     buildReportMenuItems(report) {
         const menuItems = [];
         for (const destination of this.api.exportApi.getAvailableExportDestinations()) {
-            menuItems.push(this.createColumnMenuItemClickFunction(this.getMenuName(destination), destination, this.moduleInfo.Glyph, () => this.export(report, destination)));
+            menuItems.push(this.createMenuItemClickFunction(this.getMenuName(destination), destination, this.moduleInfo.Glyph, () => this.export(report, destination)));
         }
         for (const customDestination of this.api.exportApi.getCustomDestinations()) {
-            menuItems.push(this.createColumnMenuItemClickFunction('export-custom-destination', customDestination.name, this.moduleInfo.Glyph, () => this.export(report, customDestination.name)));
+            menuItems.push(this.createMenuItemClickFunction('export-custom-destination', customDestination.name, this.moduleInfo.Glyph, () => this.export(report, customDestination.name)));
         }
         return menuItems;
     }
     buildExportMenuItem(label, subItems) {
         return {
-            name: 'export',
+            name: 'parent',
             label: label,
             module: this.moduleInfo.ModuleName,
             isVisible: true,

package/src/Strategy/Fdc3Module.js

@@ -27,7 +27,7 @@ export class Fdc3Module extends AdaptableModuleBase {
             contextMenuItems.sort((a, b) => a.label.localeCompare(b.label));
             if (contextMenuItems.length > 1) {
                 const groupMenuItem = {
-                    name: 'fdc3',
+                    name: 'parent',
                     module: this.moduleInfo.ModuleName,
                     label: 'FDC3',
                     icon: {

package/src/Strategy/FlashingCellModule.js

@@ -69,11 +69,11 @@ export class FlashingCellModule extends AdaptableModuleBase {
                 });
                 if (flashingCellForCurrentColumn) {
                     return [
-                        this.createColumnMenuItemReduxAction('flashing-cell-delete', 'Delete Flashing Cell', this.moduleInfo.Glyph, FlashingCellRedux.FlashingCellDefinitionDelete(flashingCellForCurrentColumn)),
+                        this.createMenuItemReduxAction('flashing-cell-delete', 'Delete Flashing Cell', this.moduleInfo.Glyph, FlashingCellRedux.FlashingCellDefinitionDelete(flashingCellForCurrentColumn)),
                     ];
                 }
                 return [
-                    this.createColumnMenuItemReduxAction('flashing-cell-add', 'Add Flashing Cell', this.moduleInfo.Glyph, FlashingCellRedux.FlashingCellDefinitionAdd({
+                    this.createMenuItemReduxAction('flashing-cell-add', 'Add Flashing Cell', this.moduleInfo.Glyph, FlashingCellRedux.FlashingCellDefinitionAdd({
                         Scope: {
                             ColumnIds: [column.columnId],
                         },
@@ -95,11 +95,11 @@ export class FlashingCellModule extends AdaptableModuleBase {
                     if (flashingCellForRow.flashTarget === 'row' ||
                         (Array.isArray(flashingCellForRow === null || flashingCellForRow === void 0 ? void 0 : flashingCellForRow.flashTarget) &&
                             flashingCellForRow.flashTarget.includes('row'))) {
-                        items.push(this.createColumnMenuItemReduxAction('flashing-row-clear', 'Clear Flashing Row', this.moduleInfo.Glyph, SystemRedux.SystemFlashingCellDelete(flashingCellForRow)));
+                        items.push(this.createMenuItemReduxAction('flashing-row-clear', 'Clear Flashing Row', this.moduleInfo.Glyph, SystemRedux.SystemFlashingCellDelete(flashingCellForRow)));
                     }
                 }
                 else if (flashingCellForCell && flashingCellForCell.flashTarget === 'cell') {
-                    items.push(this.createColumnMenuItemReduxAction('flashing-cell-clear', 'Clear Flashing Cell', this.moduleInfo.Glyph, SystemRedux.SystemFlashingCellDelete(flashingCellForCell)));
+                    items.push(this.createMenuItemReduxAction('flashing-cell-clear', 'Clear Flashing Cell', this.moduleInfo.Glyph, SystemRedux.SystemFlashingCellDelete(flashingCellForCell)));
                 }
             }
         }