From 889e44387279c7834944600417c0c2da11b7991f Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Fri, 17 Sep 2021 00:47:59 -0400
Subject: [PATCH] fix: translation wasn't working with context menu

---
 .../src/examples/example07.html               |   4 +-
 .../src/examples/example07.ts                 |  25 +++-
 .../__tests__/gridMenuControl.spec.ts         | 128 ++----------------
 .../common/src/controls/gridMenu.control.ts   |  18 +--
 .../common/src/plugins/contextMenu.plugin.ts  |  15 +-
 .../common/src/plugins/headerMenu.plugin.ts   |  17 +--
 .../__tests__/extension.service.spec.ts       |   1 +
 test/cypress/integration/example07.spec.js    |  79 +++++++++--
 8 files changed, 125 insertions(+), 162 deletions(-)

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example07.html b/examples/webpack-demo-vanilla-bundle/src/examples/example07.html
index ea7b919cd..381e49ffa 100644
--- a/examples/webpack-demo-vanilla-bundle/src/examples/example07.html
+++ b/examples/webpack-demo-vanilla-bundle/src/examples/example07.html
@@ -18,9 +18,9 @@ <h3 class="title is-3">
     <span class="icon mdi mdi-minus"></span>
     <span>Dynamically Remove Last Column</span>
   </button>
-  <button class="button is-small" data-test="hide-duration-btn" onclick.delegate="hideDurationColumnDynamically()">
+  <button class="button is-small" data-test="hide-finish-btn" onclick.delegate="hideFinishColumnDynamically()">
     <span class="icon mdi mdi-eye-off-outline"></span>
-    <span>Dynamically Hide "Duration"</span>
+    <span>Dynamically Hide "Finish"</span>
   </button>
   <button class="button is-small" data-test="add-item-btn" onclick.delegate="addItem()"
           title="Clear Filters &amp; Sorting to see it better">
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts
index 25dc9f282..065f0b513 100644
--- a/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts
+++ b/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts
@@ -62,7 +62,10 @@ export class Example7 {
   initializeGrid() {
     this.columnDefinitions = [
       {
-        id: 'title', nameKey: 'TITLE', field: 'title', filterable: true, editor: { model: Editors.longText, required: true, alwaysSaveOnEnterKey: true },
+        id: 'title', nameKey: 'TITLE', field: 'title', filterable: true,
+        editor: { model: Editors.longText, required: true, alwaysSaveOnEnterKey: true },
+        // formatter: this.taskTranslateFormatter.bind(this),
+        // params: { useFormatterOuputToFilter: true }
       },
       {
         id: 'action', name: 'Action', field: 'action', minWidth: 60, maxWidth: 60,
@@ -96,7 +99,7 @@ export class Example7 {
       {
         id: 'duration', nameKey: 'DURATION', field: 'duration', sortable: true, filterable: true,
         type: 'number', editor: { model: Editors.text, alwaysSaveOnEnterKey: true, },
-        formatter: (_row: number, _cell: number, value: any) => value > 1 ? `${value} days` : `${value} day`,
+        formatter: this.dayDurationTranslateFormatter.bind(this)
       },
       {
         id: 'percentComplete', nameKey: 'PERCENT_COMPLETE', field: 'percentComplete', type: 'number',
@@ -307,7 +310,7 @@ export class Example7 {
   }
 
   changeCompletedOption(dataContext: any, newValue: boolean) {
-    console.log('change', dataContext, newValue)
+    console.log('change', dataContext, newValue);
     if (dataContext && dataContext.hasOwnProperty('completed')) {
       dataContext.completed = newValue;
       this.sgb?.gridService.updateItem(dataContext);
@@ -337,7 +340,7 @@ export class Example7 {
       tempDataset.push({
         id: i,
         title: 'Task ' + i,
-        duration: Math.round(Math.random() * 25),
+        duration: i === 4 ? 0 : Math.round(Math.random() * 25),
         percentComplete: Math.round(Math.random() * 100),
         start: new Date(2009, 0, 1),
         finish: new Date(2009, 0, 5),
@@ -431,6 +434,14 @@ export class Example7 {
     this.selectedLanguageFile = `${this.selectedLanguage}.json`;
   }
 
+  dayDurationTranslateFormatter(_row, _cell, value) {
+    return this.translateService.translate('X_DAY_PLURAL', { x: value, plural: value > 1 ? 's' : '' }) ?? '';
+  }
+
+  taskTranslateFormatter(_row, _cell, value) {
+    return this.translateService.translate('TASK_X', { x: value }) ?? '';
+  }
+
   dynamicallyAddTitleHeader() {
     const newCol = {
       id: `title${this.duplicateTitleHeaderCount++}`,
@@ -442,6 +453,8 @@ export class Example7 {
         // validator: myCustomTitleValidator, // use a custom validator
       },
       sortable: true, minWidth: 100, filterable: true,
+      // formatter: this.taskTranslateFormatter.bind(this),
+      // params: { useFormatterOuputToFilter: true },
     };
 
     // you can dynamically add your column to your column definitions
@@ -479,12 +492,12 @@ export class Example7 {
     */
   }
 
-  hideDurationColumnDynamically() {
+  hideFinishColumnDynamically() {
     // -- you can hide by one Id or multiple Ids:
     // hideColumnById(id, options), hideColumnByIds([ids], options)
     // you can also provide options, defaults are: { autoResizeColumns: true, triggerEvent: true, hideFromColumnPicker: false, hideFromGridMenu: false }
 
-    this.sgb.gridService.hideColumnById('duration');
+    this.sgb.gridService.hideColumnById('finish');
 
     // or with multiple Ids and extra options
     // this.sgb.gridService.hideColumnByIds(['duration', 'finish'], { autoResizeColumns: false, hideFromColumnPicker: true, hideFromGridMenu: false });
diff --git a/packages/common/src/controls/__tests__/gridMenuControl.spec.ts b/packages/common/src/controls/__tests__/gridMenuControl.spec.ts
index 2af978707..8e145abaa 100644
--- a/packages/common/src/controls/__tests__/gridMenuControl.spec.ts
+++ b/packages/common/src/controls/__tests__/gridMenuControl.spec.ts
@@ -917,7 +917,7 @@ describe('GridMenuControl', () => {
           control.columns = columnsMock;
           control.init();
           expect(SharedService.prototype.gridOptions.gridMenu!.customItems).toEqual([
-            { iconCssClass: 'fa fa-times', title: 'Dégeler les colonnes/rangées', disabled: false, command: 'clear-pinning', positionOrder: 52 },
+            { iconCssClass: 'fa fa-times', title: 'Dégeler les colonnes/rangées', titleKey: 'CLEAR_PINNING', disabled: false, command: 'clear-pinning', positionOrder: 52 },
           ]);
         });
 
@@ -928,9 +928,9 @@ describe('GridMenuControl', () => {
           control.init();
           control.init(); // calling 2x register to make sure it doesn't duplicate commands
           expect(SharedService.prototype.gridOptions.gridMenu!.customItems).toEqual([
-            { iconCssClass: 'fa fa-filter text-danger', title: 'Supprimer tous les filtres', disabled: false, command: 'clear-filter', positionOrder: 50 },
-            { iconCssClass: 'fa fa-random', title: 'Basculer la ligne des filtres', disabled: false, command: 'toggle-filter', positionOrder: 53 },
-            { iconCssClass: 'fa fa-refresh', title: 'Rafraîchir les données', disabled: false, command: 'refresh-dataset', positionOrder: 57 }
+            { iconCssClass: 'fa fa-filter text-danger', title: 'Supprimer tous les filtres', titleKey: 'CLEAR_ALL_FILTERS', disabled: false, command: 'clear-filter', positionOrder: 50 },
+            { iconCssClass: 'fa fa-random', title: 'Basculer la ligne des filtres', titleKey: 'TOGGLE_FILTER_ROW', disabled: false, command: 'toggle-filter', positionOrder: 53 },
+            { iconCssClass: 'fa fa-refresh', title: 'Rafraîchir les données', titleKey: 'REFRESH_DATASET', disabled: false, command: 'refresh-dataset', positionOrder: 57 }
           ]);
         });
 
@@ -941,7 +941,7 @@ describe('GridMenuControl', () => {
           control.init();
           control.init(); // calling 2x register to make sure it doesn't duplicate commands
           expect(SharedService.prototype.gridOptions.gridMenu!.customItems).toEqual([
-            { iconCssClass: 'fa fa-filter text-danger', title: 'Supprimer tous les filtres', disabled: false, command: 'clear-filter', positionOrder: 50 }
+            { iconCssClass: 'fa fa-filter text-danger', title: 'Supprimer tous les filtres', titleKey: 'CLEAR_ALL_FILTERS', disabled: false, command: 'clear-filter', positionOrder: 50 }
           ]);
         });
 
@@ -952,7 +952,7 @@ describe('GridMenuControl', () => {
           control.init();
           control.init(); // calling 2x register to make sure it doesn't duplicate commands
           expect(SharedService.prototype.gridOptions.gridMenu!.customItems).toEqual([
-            { iconCssClass: 'fa fa-random', title: 'Basculer la ligne des filtres', disabled: false, command: 'toggle-filter', positionOrder: 53 },
+            { iconCssClass: 'fa fa-random', title: 'Basculer la ligne des filtres', titleKey: 'TOGGLE_FILTER_ROW', disabled: false, command: 'toggle-filter', positionOrder: 53 },
           ]);
         });
 
@@ -963,7 +963,7 @@ describe('GridMenuControl', () => {
           control.init();
           control.init(); // calling 2x register to make sure it doesn't duplicate commands
           expect(SharedService.prototype.gridOptions.gridMenu!.customItems).toEqual([
-            { iconCssClass: 'fa fa-refresh', title: 'Rafraîchir les données', disabled: false, command: 'refresh-dataset', positionOrder: 57 }
+            { iconCssClass: 'fa fa-refresh', title: 'Rafraîchir les données', titleKey: 'REFRESH_DATASET', disabled: false, command: 'refresh-dataset', positionOrder: 57 }
           ]);
         });
 
@@ -974,7 +974,7 @@ describe('GridMenuControl', () => {
           control.init();
           control.init(); // calling 2x register to make sure it doesn't duplicate commands
           expect(SharedService.prototype.gridOptions.gridMenu!.customItems).toEqual([
-            { iconCssClass: 'fa fa-random', title: 'Basculer la ligne de pré-en-tête', disabled: false, command: 'toggle-preheader', positionOrder: 53 }
+            { iconCssClass: 'fa fa-random', title: 'Basculer la ligne de pré-en-tête', titleKey: 'TOGGLE_PRE_HEADER_ROW', disabled: false, command: 'toggle-preheader', positionOrder: 53 }
           ]);
         });
 
@@ -994,7 +994,7 @@ describe('GridMenuControl', () => {
           control.init();
           control.init(); // calling 2x register to make sure it doesn't duplicate commands
           expect(SharedService.prototype.gridOptions.gridMenu!.customItems).toEqual([
-            { iconCssClass: 'fa fa-unsorted text-danger', title: 'Supprimer tous les tris', disabled: false, command: 'clear-sorting', positionOrder: 51 }
+            { iconCssClass: 'fa fa-unsorted text-danger', title: 'Supprimer tous les tris', titleKey: 'CLEAR_ALL_SORTING', disabled: false, command: 'clear-sorting', positionOrder: 51 }
           ]);
         });
 
@@ -1014,7 +1014,7 @@ describe('GridMenuControl', () => {
           control.init();
           control.init(); // calling 2x register to make sure it doesn't duplicate commands
           expect(SharedService.prototype.gridOptions.gridMenu!.customItems).toEqual([
-            { iconCssClass: 'fa fa-download', title: 'Exporter en format CSV', disabled: false, command: 'export-csv', positionOrder: 54 }
+            { iconCssClass: 'fa fa-download', title: 'Exporter en format CSV', titleKey: 'EXPORT_TO_CSV', disabled: false, command: 'export-csv', positionOrder: 54 }
           ]);
         });
 
@@ -1034,7 +1034,7 @@ describe('GridMenuControl', () => {
           control.init();
           control.init(); // calling 2x register to make sure it doesn't duplicate commands
           expect(SharedService.prototype.gridOptions.gridMenu!.customItems).toEqual([
-            { iconCssClass: 'fa fa-file-excel-o text-success', title: 'Exporter vers Excel', disabled: false, command: 'export-excel', positionOrder: 55 }
+            { iconCssClass: 'fa fa-file-excel-o text-success', title: 'Exporter vers Excel', titleKey: 'EXPORT_TO_EXCEL', disabled: false, command: 'export-excel', positionOrder: 55 }
           ]);
         });
 
@@ -1045,7 +1045,7 @@ describe('GridMenuControl', () => {
           control.init();
           control.init(); // calling 2x register to make sure it doesn't duplicate commands
           expect(SharedService.prototype.gridOptions.gridMenu!.customItems).toEqual([
-            { iconCssClass: 'fa fa-download', title: 'Exporter en format texte (délimité par tabulation)', disabled: false, command: 'export-text-delimited', positionOrder: 56 }
+            { iconCssClass: 'fa fa-download', title: 'Exporter en format texte (délimité par tabulation)', titleKey: 'EXPORT_TO_TAB_DELIMITED', disabled: false, command: 'export-text-delimited', positionOrder: 56 }
           ]);
         });
 
@@ -1059,101 +1059,6 @@ describe('GridMenuControl', () => {
         });
       });
 
-      // describe('adding Grid Menu Custom Items', () => {
-      //   const customItemsMock = [{
-      //     iconCssClass: 'fa fa-question-circle',
-      //     titleKey: 'HELP',
-      //     disabled: false,
-      //     command: 'help',
-      //     positionOrder: 99
-      //   }];
-
-      //   beforeEach(() => {
-      //     const copyGridOptionsMock = {
-      //       ...gridOptionsMock,
-      //       enableTextExport: true,
-      //       gridMenu: {
-      //         commandLabels: gridOptionsMock.gridMenu.commandLabels,
-      //         customItems: customItemsMock,
-      //         hideClearFrozenColumnsCommand: true,
-      //         hideExportCsvCommand: false,
-      //         hideExportExcelCommand: false,
-      //         hideExportTextDelimitedCommand: true,
-      //         hideRefreshDatasetCommand: true,
-      //         hideSyncResizeButton: true,
-      //         hideToggleFilterCommand: true,
-      //         hideTogglePreHeaderCommand: true
-      //       }
-      //     } as unknown as GridOption;
-
-      //     jest.spyOn(SharedService.prototype, 'dataView', 'get').mockReturnValue(dataViewStub);
-      //     jest.spyOn(SharedService.prototype, 'slickGrid', 'get').mockReturnValue(gridStub);
-      //     jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock);
-      //     jest.spyOn(SharedService.prototype, 'allColumns', 'get').mockReturnValue(columnsMock);
-      //     jest.spyOn(SharedService.prototype, 'visibleColumns', 'get').mockReturnValue(columnsMock);
-      //     jest.spyOn(SharedService.prototype, 'columnDefinitions', 'get').mockReturnValue(columnsMock);
-      //     jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
-      //   });
-
-      //   afterEach(() => {
-      //     control.dispose();
-      //   });
-
-      //   xit('should have user grid menu custom items', () => {
-      //     control.register();
-      //     expect(SharedService.prototype.gridOptions.gridMenu!.customItems).toEqual([
-      //       { command: 'export-csv', disabled: false, iconCssClass: 'fa fa-download', positionOrder: 54, title: 'Exporter en format CSV' },
-      //       // { command: 'export-excel', disabled: false, iconCssClass: 'fa fa-file-excel-o text-success', positionOrder: 54, title: 'Exporter vers Excel' },
-      //       { command: 'help', disabled: false, iconCssClass: 'fa fa-question-circle', positionOrder: 99, title: 'Aide', titleKey: 'HELP' },
-      //     ]);
-      //   });
-
-      //   xit('should have same user grid menu custom items even when grid menu extension is registered multiple times', () => {
-      //     control.register();
-      //     control.register();
-      //     expect(SharedService.prototype.gridOptions.gridMenu!.customItems).toEqual([
-      //       { command: 'export-csv', disabled: false, iconCssClass: 'fa fa-download', positionOrder: 54, title: 'Exporter en format CSV' },
-      //       // { command: 'export-excel', disabled: false, iconCssClass: 'fa fa-file-excel-o text-success', positionOrder: 54, title: 'Exporter vers Excel' },
-      //       { command: 'help', disabled: false, iconCssClass: 'fa fa-question-circle', positionOrder: 99, title: 'Aide', titleKey: 'HELP' },
-      //     ]);
-      //   });
-      // });
-
-      // describe('refreshBackendDataset method', () => {
-      //   afterEach(() => {
-      //     jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock);
-      //   });
-
-      //   xit('should throw an error when backendServiceApi is not provided in the grid options', () => {
-      //     const copyGridOptionsMock = { ...gridOptionsMock, backendServiceApi: {} } as unknown as GridOption;
-      //     jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
-      //     expect(() => control.refreshBackendDataset()).toThrowError(`BackendServiceApi requires at least a "process" function and a "service" defined`);
-      //   });
-
-      //   xit('should call the backend service API to refresh the dataset', (done) => {
-      //     const now = new Date();
-      //     const query = `query { users (first:20,offset:0) { totalCount, nodes { id,name,gender,company } } }`;
-      //     const processResult = {
-      //       data: { users: { nodes: [] }, pageInfo: { hasNextPage: true }, totalCount: 0 },
-      //       metrics: { startTime: now, endTime: now, executionTime: 0, totalItemCount: 0 }
-      //     };
-      //     const preSpy = jest.spyOn(gridOptionsMock.backendServiceApi as BackendServiceApi, 'preProcess');
-      //     const postSpy = jest.spyOn(gridOptionsMock.backendServiceApi as BackendServiceApi, 'postProcess');
-      //     const promise = new Promise((resolve) => setTimeout(() => resolve(processResult), 1));
-      //     const processSpy = jest.spyOn(gridOptionsMock.backendServiceApi as BackendServiceApi, 'process').mockReturnValue(promise);
-      //     jest.spyOn(gridOptionsMock.backendServiceApi!.service, 'buildQuery').mockReturnValue(query);
-
-      //     control.refreshBackendDataset({ enableAddRow: true });
-
-      //     expect(preSpy).toHaveBeenCalled();
-      //     expect(processSpy).toHaveBeenCalled();
-      //     promise.then(() => {
-      //       expect(postSpy).toHaveBeenCalledWith(processResult);
-      //       done();
-      //     });
-      //   });
-      // });
-
       describe('executeGridMenuInternalCustomCommands method', () => {
         beforeEach(() => {
           jest.spyOn(gridStub, 'getOptions').mockReturnValue(gridOptionsMock);
@@ -1161,15 +1066,7 @@ describe('GridMenuControl', () => {
           jest.spyOn(SharedService.prototype, 'visibleColumns', 'get').mockReturnValue(columnsMock.slice(0, 1));
         });
 
-        //   afterEach(() => {
-        //     jest.clearAllMocks();
-        //     control.eventHandler.unsubscribeAll();
-        //     mockGridMenuAddon.onCommand = new Slick.Event();
-        //   });
-
         it('should call "clearFrozenColumns" when the command triggered is "clear-pinning"', () => {
-          // const onCommandMock = jest.fn();
-          // gridOptionsMock.gridMenu.onCommand = onCommandMock;
           const setOptionsSpy = jest.spyOn(gridStub, 'setOptions');
           const setColumnsSpy = jest.spyOn(gridStub, 'setColumns');
           const copyGridOptionsMock = { ...gridOptionsMock, gridMenu: { commandLabels: gridOptionsMock.gridMenu.commandLabels, hideClearFrozenColumnsCommand: false, } } as unknown as GridOption;
@@ -1182,7 +1079,6 @@ describe('GridMenuControl', () => {
           document.querySelector('.slick-grid-menu-button').dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false }));
           control.menuElement.querySelector<HTMLInputElement>('.slick-grid-menu-item[data-command=clear-pinning]').dispatchEvent(clickEvent);
 
-          // expect(onCommandMock).toHaveBeenCalled();
           expect(setColumnsSpy).toHaveBeenCalled();
           expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: -1, frozenRow: -1, frozenBottom: false, enableMouseWheelScrollHandler: false });
         });
diff --git a/packages/common/src/controls/gridMenu.control.ts b/packages/common/src/controls/gridMenu.control.ts
index afdfe973a..261227e23 100644
--- a/packages/common/src/controls/gridMenu.control.ts
+++ b/packages/common/src/controls/gridMenu.control.ts
@@ -463,7 +463,7 @@ export class GridMenuControl extends MenuBaseClass<GridMenu> {
         gridMenuCustomItems.push(
           {
             iconCssClass: this.addonOptions.iconClearFrozenColumnsCommand || 'fa fa-times',
-            title: this.extensionUtility.translateWhenEnabledAndServiceExist(`${translationPrefix}${commandLabels?.clearFrozenColumnsCommandKey}`, 'TEXT_CLEAR_PINNING', commandLabels?.clearFrozenColumnsCommand),
+            titleKey: `${translationPrefix}${commandLabels?.clearFrozenColumnsCommandKey || 'CLEAR_PINNING'}`,
             disabled: false,
             command: commandName,
             positionOrder: 52
@@ -480,7 +480,7 @@ export class GridMenuControl extends MenuBaseClass<GridMenu> {
           gridMenuCustomItems.push(
             {
               iconCssClass: this.addonOptions.iconClearAllFiltersCommand || 'fa fa-filter text-danger',
-              title: this.extensionUtility.translateWhenEnabledAndServiceExist(`${translationPrefix}${commandLabels?.clearAllFiltersCommandKey}`, 'TEXT_CLEAR_ALL_FILTERS', commandLabels?.clearAllFiltersCommand),
+              titleKey: `${translationPrefix}${commandLabels?.clearAllFiltersCommandKey || 'CLEAR_ALL_FILTERS'}`,
               disabled: false,
               command: commandName,
               positionOrder: 50
@@ -496,7 +496,7 @@ export class GridMenuControl extends MenuBaseClass<GridMenu> {
           gridMenuCustomItems.push(
             {
               iconCssClass: this.addonOptions.iconToggleFilterCommand || 'fa fa-random',
-              title: this.extensionUtility.translateWhenEnabledAndServiceExist(`${translationPrefix}${commandLabels?.toggleFilterCommandKey}`, 'TEXT_TOGGLE_FILTER_ROW', commandLabels?.toggleFilterCommand),
+              titleKey: `${translationPrefix}${commandLabels?.toggleFilterCommandKey || 'TOGGLE_FILTER_ROW'}`,
               disabled: false,
               command: commandName,
               positionOrder: 53
@@ -512,7 +512,7 @@ export class GridMenuControl extends MenuBaseClass<GridMenu> {
           gridMenuCustomItems.push(
             {
               iconCssClass: this.addonOptions.iconRefreshDatasetCommand || 'fa fa-refresh',
-              title: this.extensionUtility.translateWhenEnabledAndServiceExist(`${translationPrefix}${commandLabels?.refreshDatasetCommandKey}`, 'TEXT_REFRESH_DATASET', commandLabels?.refreshDatasetCommand),
+              titleKey: `${translationPrefix}${commandLabels?.refreshDatasetCommandKey || 'REFRESH_DATASET'}`,
               disabled: false,
               command: commandName,
               positionOrder: 57
@@ -530,7 +530,7 @@ export class GridMenuControl extends MenuBaseClass<GridMenu> {
           gridMenuCustomItems.push(
             {
               iconCssClass: this.addonOptions.iconTogglePreHeaderCommand || 'fa fa-random',
-              title: this.extensionUtility.translateWhenEnabledAndServiceExist(`${translationPrefix}${commandLabels?.togglePreHeaderCommandKey}`, 'TEXT_TOGGLE_PRE_HEADER_ROW', commandLabels?.togglePreHeaderCommand),
+              titleKey: `${translationPrefix}${commandLabels?.togglePreHeaderCommandKey || 'TOGGLE_PRE_HEADER_ROW'}`,
               disabled: false,
               command: commandName,
               positionOrder: 53
@@ -548,7 +548,7 @@ export class GridMenuControl extends MenuBaseClass<GridMenu> {
           gridMenuCustomItems.push(
             {
               iconCssClass: this.addonOptions.iconClearAllSortingCommand || 'fa fa-unsorted text-danger',
-              title: this.extensionUtility.translateWhenEnabledAndServiceExist(`${translationPrefix}${commandLabels?.clearAllSortingCommandKey}`, 'TEXT_CLEAR_ALL_SORTING', commandLabels?.clearAllSortingCommand),
+              titleKey: `${translationPrefix}${commandLabels?.clearAllSortingCommandKey || 'CLEAR_ALL_SORTING'}`,
               disabled: false,
               command: commandName,
               positionOrder: 51
@@ -565,7 +565,7 @@ export class GridMenuControl extends MenuBaseClass<GridMenu> {
         gridMenuCustomItems.push(
           {
             iconCssClass: this.addonOptions.iconExportCsvCommand || 'fa fa-download',
-            title: this.extensionUtility.translateWhenEnabledAndServiceExist(`${translationPrefix}${commandLabels?.exportCsvCommandKey}`, 'TEXT_EXPORT_TO_CSV', commandLabels?.exportCsvCommand),
+            titleKey: `${translationPrefix}${commandLabels?.exportCsvCommandKey || 'EXPORT_TO_CSV'}`,
             disabled: false,
             command: commandName,
             positionOrder: 54
@@ -581,7 +581,7 @@ export class GridMenuControl extends MenuBaseClass<GridMenu> {
         gridMenuCustomItems.push(
           {
             iconCssClass: this.addonOptions.iconExportExcelCommand || 'fa fa-file-excel-o text-success',
-            title: this.extensionUtility.translateWhenEnabledAndServiceExist(`${translationPrefix}${commandLabels?.exportExcelCommandKey}`, 'TEXT_EXPORT_TO_EXCEL', commandLabels?.exportExcelCommand),
+            titleKey: `${translationPrefix}${commandLabels?.exportExcelCommandKey || 'EXPORT_TO_EXCEL'}`,
             disabled: false,
             command: commandName,
             positionOrder: 55
@@ -597,7 +597,7 @@ export class GridMenuControl extends MenuBaseClass<GridMenu> {
         gridMenuCustomItems.push(
           {
             iconCssClass: this.addonOptions.iconExportTextDelimitedCommand || 'fa fa-download',
-            title: this.extensionUtility.translateWhenEnabledAndServiceExist(`${translationPrefix}${commandLabels?.exportTextDelimitedCommandKey}`, 'TEXT_EXPORT_TO_TAB_DELIMITED', commandLabels?.exportTextDelimitedCommand),
+            titleKey: `${translationPrefix}${commandLabels?.exportTextDelimitedCommandKey || 'EXPORT_TO_TAB_DELIMITED'}`,
             disabled: false,
             command: commandName,
             positionOrder: 56
diff --git a/packages/common/src/plugins/contextMenu.plugin.ts b/packages/common/src/plugins/contextMenu.plugin.ts
index 72862fbdb..65e067c27 100644
--- a/packages/common/src/plugins/contextMenu.plugin.ts
+++ b/packages/common/src/plugins/contextMenu.plugin.ts
@@ -172,7 +172,7 @@ export class ContextMenuPlugin extends MenuFromCellBaseClass<ContextMenu> {
         menuCustomItems.push(
           {
             iconCssClass: contextMenu.iconCopyCellValueCommand || 'fa fa-clone',
-            title: this.extensionUtility.translateWhenEnabledAndServiceExist(`${translationPrefix}COPY`, 'TEXT_COPY'),
+            titleKey: `${translationPrefix}COPY`,
             disabled: false,
             command: commandName,
             positionOrder: 50,
@@ -205,7 +205,7 @@ export class ContextMenuPlugin extends MenuFromCellBaseClass<ContextMenu> {
         menuCustomItems.push(
           {
             iconCssClass: contextMenu.iconExportCsvCommand || 'fa fa-download',
-            title: this.extensionUtility.translateWhenEnabledAndServiceExist(`${translationPrefix}EXPORT_TO_CSV`, 'TEXT_EXPORT_TO_CSV'),
+            titleKey: `${translationPrefix}EXPORT_TO_CSV`,
             disabled: false,
             command: commandName,
             positionOrder: 51,
@@ -233,7 +233,7 @@ export class ContextMenuPlugin extends MenuFromCellBaseClass<ContextMenu> {
         menuCustomItems.push(
           {
             iconCssClass: contextMenu.iconExportExcelCommand || 'fa fa-file-excel-o text-success',
-            title: this.extensionUtility.translateWhenEnabledAndServiceExist(`${translationPrefix}EXPORT_TO_EXCEL`, 'TEXT_EXPORT_TO_EXCEL'),
+            titleKey: `${translationPrefix}EXPORT_TO_EXCEL`,
             disabled: false,
             command: commandName,
             positionOrder: 52,
@@ -258,7 +258,7 @@ export class ContextMenuPlugin extends MenuFromCellBaseClass<ContextMenu> {
         menuCustomItems.push(
           {
             iconCssClass: contextMenu.iconExportTextDelimitedCommand || 'fa fa-download',
-            title: this.extensionUtility.translateWhenEnabledAndServiceExist(`${translationPrefix}EXPORT_TO_TAB_DELIMITED`, 'TEXT_EXPORT_TO_TAB_DELIMITED'),
+            titleKey: `${translationPrefix}EXPORT_TO_TAB_DELIMITED`,
             disabled: false,
             command: commandName,
             positionOrder: 53,
@@ -293,7 +293,7 @@ export class ContextMenuPlugin extends MenuFromCellBaseClass<ContextMenu> {
           menuCustomItems.push(
             {
               iconCssClass: contextMenu.iconClearGroupingCommand || 'fa fa-times',
-              title: this.extensionUtility.translateWhenEnabledAndServiceExist(`${translationPrefix}CLEAR_ALL_GROUPING`, 'TEXT_CLEAR_ALL_GROUPING'),
+              titleKey: `${translationPrefix}CLEAR_ALL_GROUPING`,
               disabled: false,
               command: commandName,
               positionOrder: 55,
@@ -318,7 +318,7 @@ export class ContextMenuPlugin extends MenuFromCellBaseClass<ContextMenu> {
           menuCustomItems.push(
             {
               iconCssClass: contextMenu.iconCollapseAllGroupsCommand || 'fa fa-compress',
-              title: this.extensionUtility.translateWhenEnabledAndServiceExist(`${translationPrefix}COLLAPSE_ALL_GROUPS`, 'TEXT_COLLAPSE_ALL_GROUPS'),
+              titleKey: `${translationPrefix}COLLAPSE_ALL_GROUPS`,
               disabled: false,
               command: commandName,
               positionOrder: 56,
@@ -349,7 +349,7 @@ export class ContextMenuPlugin extends MenuFromCellBaseClass<ContextMenu> {
           menuCustomItems.push(
             {
               iconCssClass: contextMenu.iconExpandAllGroupsCommand || 'fa fa-expand',
-              title: this.extensionUtility.translateWhenEnabledAndServiceExist(`${translationPrefix}EXPAND_ALL_GROUPS`, 'TEXT_EXPAND_ALL_GROUPS'),
+              titleKey: `${translationPrefix}EXPAND_ALL_GROUPS`,
               disabled: false,
               command: commandName,
               positionOrder: 57,
@@ -374,6 +374,7 @@ export class ContextMenuPlugin extends MenuFromCellBaseClass<ContextMenu> {
       }
     }
 
+    this.extensionUtility.translateMenuItemsFromTitleKey(menuCustomItems);
     return menuCustomItems;
   }
 
diff --git a/packages/common/src/plugins/headerMenu.plugin.ts b/packages/common/src/plugins/headerMenu.plugin.ts
index a964896ac..cda4b2817 100644
--- a/packages/common/src/plugins/headerMenu.plugin.ts
+++ b/packages/common/src/plugins/headerMenu.plugin.ts
@@ -15,7 +15,7 @@ import {
   OnHeaderCellRenderedEventArgs,
   SlickEventHandler,
 } from '../interfaces/index';
-import { arrayRemoveItemByIndex, emptyElement, getElementOffsetRelativeToParent, } from '../services/index';
+import { arrayRemoveItemByIndex, emptyElement, getElementOffsetRelativeToParent, getTranslationPrefix } from '../services/index';
 import { ExtensionUtility } from '../extensions/extensionUtility';
 import { FilterService } from '../services/filter.service';
 import { PubSubService } from '../services/pubSub.service';
@@ -270,6 +270,7 @@ export class HeaderMenuPlugin extends MenuBaseClass<HeaderMenu> {
   protected addHeaderMenuCustomCommands(columnDefinitions: Column[]): HeaderMenu {
     const gridOptions = this.sharedService.gridOptions;
     const headerMenuOptions = gridOptions.headerMenu || {};
+    const translationPrefix = getTranslationPrefix(gridOptions);
 
     if (Array.isArray(columnDefinitions) && gridOptions.enableHeaderMenu) {
       columnDefinitions.forEach((columnDef: Column) => {
@@ -294,7 +295,7 @@ export class HeaderMenuPlugin extends MenuBaseClass<HeaderMenu> {
             if (!columnHeaderMenuItems.some(item => item !== 'divider' && item?.command === 'freeze-columns')) {
               columnHeaderMenuItems.push({
                 iconCssClass: headerMenuOptions.iconFreezeColumns || 'fa fa-thumb-tack',
-                titleKey: 'FREEZE_COLUMNS',
+                titleKey: `${translationPrefix}FREEZE_COLUMNS`,
                 command: 'freeze-columns',
                 positionOrder: 47
               });
@@ -307,7 +308,7 @@ export class HeaderMenuPlugin extends MenuBaseClass<HeaderMenu> {
             if (!columnHeaderMenuItems.some(item => item !== 'divider' && item?.command === 'column-resize-by-content')) {
               columnHeaderMenuItems.push({
                 iconCssClass: headerMenuOptions.iconColumnResizeByContentCommand || 'fa fa-arrows-h',
-                titleKey: `COLUMN_RESIZE_BY_CONTENT`,
+                titleKey: `${translationPrefix}COLUMN_RESIZE_BY_CONTENT`,
                 command: 'column-resize-by-content',
                 positionOrder: 48
               });
@@ -324,7 +325,7 @@ export class HeaderMenuPlugin extends MenuBaseClass<HeaderMenu> {
             if (!columnHeaderMenuItems.some(item => item !== 'divider' && item?.command === 'sort-asc')) {
               columnHeaderMenuItems.push({
                 iconCssClass: headerMenuOptions.iconSortAscCommand || 'fa fa-sort-asc',
-                titleKey: 'SORT_ASCENDING',
+                titleKey: `${translationPrefix}SORT_ASCENDING`,
                 command: 'sort-asc',
                 positionOrder: 50
               });
@@ -332,7 +333,7 @@ export class HeaderMenuPlugin extends MenuBaseClass<HeaderMenu> {
             if (!columnHeaderMenuItems.some(item => item !== 'divider' && item?.command === 'sort-desc')) {
               columnHeaderMenuItems.push({
                 iconCssClass: headerMenuOptions.iconSortDescCommand || 'fa fa-sort-desc',
-                titleKey: 'SORT_DESCENDING',
+                titleKey: `${translationPrefix}SORT_DESCENDING`,
                 command: 'sort-desc',
                 positionOrder: 51
               });
@@ -346,7 +347,7 @@ export class HeaderMenuPlugin extends MenuBaseClass<HeaderMenu> {
             if (!headerMenuOptions.hideClearSortCommand && !columnHeaderMenuItems.some(item => item !== 'divider' && item?.command === 'clear-sort')) {
               columnHeaderMenuItems.push({
                 iconCssClass: headerMenuOptions.iconClearSortCommand || 'fa fa-unsorted',
-                titleKey: 'REMOVE_SORT',
+                titleKey: `${translationPrefix}REMOVE_SORT`,
                 command: 'clear-sort',
                 positionOrder: 54
               });
@@ -358,7 +359,7 @@ export class HeaderMenuPlugin extends MenuBaseClass<HeaderMenu> {
             if (!headerMenuOptions.hideClearFilterCommand && !columnHeaderMenuItems.some(item => item !== 'divider' && item?.command === 'clear-filter')) {
               columnHeaderMenuItems.push({
                 iconCssClass: headerMenuOptions.iconClearFilterCommand || 'fa fa-filter',
-                titleKey: 'REMOVE_FILTER',
+                titleKey: `${translationPrefix}REMOVE_FILTER`,
                 command: 'clear-filter',
                 positionOrder: 53
               });
@@ -369,7 +370,7 @@ export class HeaderMenuPlugin extends MenuBaseClass<HeaderMenu> {
           if (headerMenuOptions && !headerMenuOptions.hideColumnHideCommand && !columnHeaderMenuItems.some(item => item !== 'divider' && item?.command === 'hide-column')) {
             columnHeaderMenuItems.push({
               iconCssClass: headerMenuOptions.iconColumnHideCommand || 'fa fa-times',
-              titleKey: 'HIDE_COLUMN',
+              titleKey: `${translationPrefix}HIDE_COLUMN`,
               command: 'hide-column',
               positionOrder: 55
             });
diff --git a/packages/common/src/services/__tests__/extension.service.spec.ts b/packages/common/src/services/__tests__/extension.service.spec.ts
index d8ba21773..76d5c7df2 100644
--- a/packages/common/src/services/__tests__/extension.service.spec.ts
+++ b/packages/common/src/services/__tests__/extension.service.spec.ts
@@ -26,6 +26,7 @@ const extensionUtilityStub = {
   refreshBackendDataset: jest.fn(),
   sortItems: jest.fn(),
   translateItems: jest.fn(),
+  translateMenuItemsFromTitleKey: jest.fn(),
   translateWhenEnabledAndServiceExist: jest.fn(),
 } as unknown as ExtensionUtility;
 
diff --git a/test/cypress/integration/example07.spec.js b/test/cypress/integration/example07.spec.js
index 7e06d52ea..4acee7953 100644
--- a/test/cypress/integration/example07.spec.js
+++ b/test/cypress/integration/example07.spec.js
@@ -318,10 +318,10 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
       .each(($child, index) => expect($child.text()).to.eq(expectedTitles[index]));
   });
 
-  it('should be able to hide "Duration" column', () => {
-    const expectedTitles = ['', '', 'Title', 'Action', '% Complete', 'Start', 'Finish', 'Completed', 'Prerequisites', 'Title'];
+  it('should be able to hide "Finish" column', () => {
+    const expectedTitles = ['', '', 'Title', 'Action', '% Complete', 'Start', 'Duration', 'Completed', 'Prerequisites', 'Title'];
 
-    cy.get('[data-test="hide-duration-btn"]').click();
+    cy.get('[data-test="hide-finish-btn"]').click();
 
     cy.get('.grid7')
       .find('.slick-header-columns')
@@ -330,7 +330,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
   });
 
   it('should be able to click disable Filters functionality button and expect no Filters', () => {
-    const expectedTitles = ['', '', 'Title', 'Action', '% Complete', 'Start', 'Finish', 'Completed', 'Prerequisites', 'Title'];
+    const expectedTitles = ['', '', 'Title', 'Action', '% Complete', 'Start', 'Duration', 'Completed', 'Prerequisites', 'Title'];
 
     cy.get('[data-test="disable-filters-btn"]').click().click(); // even clicking twice should have same result
 
@@ -384,7 +384,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
   });
 
   it('should be able to toggle Filters functionality', () => {
-    const expectedTitles = ['', '', 'Title', 'Action', '% Complete', 'Start', 'Finish', 'Completed', 'Prerequisites', 'Title'];
+    const expectedTitles = ['', '', 'Title', 'Action', '% Complete', 'Start', 'Duration', 'Completed', 'Prerequisites', 'Title'];
 
     cy.get('[data-test="toggle-filtering-btn"]').click(); // hide it
 
@@ -572,7 +572,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
       });
   });
 
-  it('should open Column Picker and show the "Duration" column back to visible and expect it to have kept its position after toggling filter/sorting', () => {
+  it('should open Column Picker and show the "Finish" column back to visible and expect it to have kept its position after toggling filter/sorting', () => {
     // first 2 cols are hidden but they do count as li item
     const expectedFullPickerTitles = ['', '', 'Title', 'Action', '% Complete', 'Start', 'Finish', 'Duration', 'Completed', 'Prerequisites', 'Title'];
 
@@ -594,9 +594,9 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
 
     cy.get('.slick-columnpicker')
       .find('.slick-columnpicker-list')
-      .children('li:nth-child(8)')
+      .children('li:nth-child(7)')
       .children('label')
-      .should('contain', 'Duration')
+      .should('contain', 'Finish')
       .click();
 
     cy.get('.grid7')
@@ -741,7 +741,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
       .each(($child, index) => expect($child.text()).to.eq(expectedTitles[index]));
   });
 
-  it('should hide "Duration" column from column picker', () => {
+  it('should hide "Finish" column from column picker', () => {
     const originalColumns = ['', '', 'Title', 'Action', '% Complete', 'Finish', 'Duration', 'Completed', 'Start', 'Prerequisites', 'Title'];
 
     cy.get('.grid7')
@@ -762,9 +762,9 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
 
     cy.get('.slick-columnpicker')
       .find('.slick-columnpicker-list')
-      .children('li:nth-child(7)')
+      .children('li:nth-child(6)')
       .children('label')
-      .should('contain', 'Duration')
+      .should('contain', 'Finish')
       .click();
 
     cy.get('.slick-columnpicker:visible')
@@ -773,6 +773,32 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
       .click();
   });
 
+  it('should have 2 rows in the grid', () => {
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'Task 4');
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(5)`).should('contain', '0 day');
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(2)`).should('contain', 'Task 8');
+  });
+
+  it('should open Context Menu and expect 2 commands in English', () => {
+    cy.get('.grid7')
+      .find('.slick-row .slick-cell:nth(2)')
+      .rightclick({ force: true });
+
+    cy.get('.slick-context-menu.dropright .slick-context-menu-command-list')
+      .find('.slick-context-menu-item:nth(1)')
+      .find('.slick-context-menu-content')
+      .contains('Export to Excel');
+
+    cy.get('.slick-context-menu.dropright .slick-context-menu-command-list')
+      .find('.slick-context-menu-item:nth(0)')
+      .find('.slick-context-menu-content')
+      .contains('Copy')
+      .click();
+
+    cy.get('.slick-context-menu-command-list')
+      .should('not.exist');
+  });
+
   it('should switch language', () => {
     cy.get('[data-test="language-button"]')
       .click();
@@ -817,8 +843,8 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
       });
   });
 
-  it('should open Grid Menu and expect new columns to be added to the column picker section, also "Duration" to be unchecked while "Finish" to be at new position', () => {
-    const updatedTitles = ['', '', 'Titre', 'Action', 'Durée', '% Achevée', 'Fin', 'Terminé', 'Début', 'Prerequisites', 'Titre'];
+  it('should open Grid Menu and expect new columns to be added to the column picker section, also "Finish" to be unchecked while "Duration" to be at new position', () => {
+    const updatedTitles = ['', '', 'Titre', 'Action', '% Achevée', 'Durée', 'Terminé', 'Début', 'Prerequisites', 'Titre'];
 
     cy.get('.grid7')
       .find('button.slick-grid-menu-button')
@@ -833,7 +859,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
             if (index <= 5) {
               const $input = $child.children('input');
               const $label = $child.children('label');
-              if ($label.text() === 'Durée') {
+              if ($label.text() === 'Fin') {
                 expect($input.prop('checked')).to.eq(false);
               } else {
                 expect($input.prop('checked')).to.eq(true);
@@ -884,4 +910,29 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
     cy.get('.right-footer.metrics')
       .contains('1 de 500 éléments');
   });
+
+  it('should have 1 row in the grid with "Duration" showing French text in the grid', () => {
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'Task 4');
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(5)`).should('contain', '0 journée');
+  });
+
+  it('should open Context Menu and expect 2 commands in French', () => {
+    cy.get('.grid7')
+      .find('.slick-row .slick-cell:nth(2)')
+      .rightclick({ force: true });
+
+    cy.get('.slick-context-menu.dropright .slick-context-menu-command-list')
+      .find('.slick-context-menu-item:nth(1)')
+      .find('.slick-context-menu-content')
+      .contains('Exporter vers Excel');
+
+    cy.get('.slick-context-menu.dropright .slick-context-menu-command-list')
+      .find('.slick-context-menu-item:nth(0)')
+      .find('.slick-context-menu-content')
+      .contains('Copier')
+      .click();
+
+    cy.get('.slick-context-menu-command-list')
+      .should('not.exist');
+  });
 });