Skip to content

Commit

Permalink
feat(addon): provide grid menu labels for all built-in commands
Browse files Browse the repository at this point in the history 
- prior to the change, we couldn't change the label, we would only be able to change the translation key but we couldn't change the text when we're not using translations. This PR provides both way of customizing these labels, via its label and/or with a label translation key
  • Loading branch information
@ghiscoding
ghiscoding committed May 6, 2021
1 parent 19a777e commit 44c72d3
Show file tree
Hide file tree
Showing 9 changed files with 137 additions and 43 deletions.
34 changes: 23 additions & 11 deletions packages/common/src/extensions/__tests__/gridMenuExtension.spec.ts
View file
Expand Up @@ -98,6 +98,17 @@ describe('gridMenuExtension', () => {
postProcess: jest.fn(),
},
gridMenu: {
commandLabels: {
clearAllFiltersCommandKey: 'CLEAR_ALL_FILTERS',
clearAllSortingCommandKey: 'CLEAR_ALL_SORTING',
clearFrozenColumnsCommandKey: 'CLEAR_PINNING',
exportCsvCommandKey: 'EXPORT_TO_CSV',
exportExcelCommandKey: 'EXPORT_TO_EXCEL',
exportTextDelimitedCommandKey: 'EXPORT_TO_TAB_DELIMITED',
refreshDatasetCommandKey: 'REFRESH_DATASET',
toggleFilterCommandKey: 'TOGGLE_FILTER_ROW',
togglePreHeaderCommandKey: 'TOGGLE_PRE_HEADER_ROW',
},
customItems: [],
hideClearAllFiltersCommand: false,
hideClearFrozenColumnsCommand: true,
Expand Down Expand Up @@ -382,7 +393,7 @@ describe('gridMenuExtension', () => {
});

it('should expect menu related to "Unfreeze Columns/Rows"', () => {
const copyGridOptionsMock = { ...gridOptionsMock, gridMenu: { hideClearFrozenColumnsCommand: false, } } as unknown as GridOption;
const copyGridOptionsMock = { ...gridOptionsMock, gridMenu: { commandLabels: gridOptionsMock.gridMenu.commandLabels, hideClearFrozenColumnsCommand: false, } } as unknown as GridOption;
jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
extension.register();
extension.register(); // calling 2x register to make sure it doesn't duplicate commands
Expand All @@ -404,7 +415,7 @@ describe('gridMenuExtension', () => {
});

it('should have only 1 menu "clear-filter" when all other menus are defined as hidden & when "enableFilering" is set', () => {
const copyGridOptionsMock = { ...gridOptionsMock, enableFiltering: true, showHeaderRow: true, gridMenu: { hideClearFrozenColumnsCommand: true, hideToggleFilterCommand: true, hideRefreshDatasetCommand: true } } as unknown as GridOption;
const copyGridOptionsMock = { ...gridOptionsMock, enableFiltering: true, showHeaderRow: true, gridMenu: { commandLabels: gridOptionsMock.gridMenu.commandLabels, hideClearFrozenColumnsCommand: true, hideToggleFilterCommand: true, hideRefreshDatasetCommand: true } } as unknown as GridOption;
jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
extension.register();
extension.register(); // calling 2x register to make sure it doesn't duplicate commands
Expand All @@ -414,7 +425,7 @@ describe('gridMenuExtension', () => {
});

it('should have only 1 menu "toggle-filter" when all other menus are defined as hidden & when "enableFilering" is set', () => {
const copyGridOptionsMock = { ...gridOptionsMock, enableFiltering: true, showHeaderRow: true, gridMenu: { hideClearFrozenColumnsCommand: true, hideClearAllFiltersCommand: true, hideRefreshDatasetCommand: true } } as unknown as GridOption;
const copyGridOptionsMock = { ...gridOptionsMock, enableFiltering: true, showHeaderRow: true, gridMenu: { commandLabels: gridOptionsMock.gridMenu.commandLabels, hideClearFrozenColumnsCommand: true, hideClearAllFiltersCommand: true, hideRefreshDatasetCommand: true } } as unknown as GridOption;
jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
extension.register();
extension.register(); // calling 2x register to make sure it doesn't duplicate commands
Expand All @@ -424,7 +435,7 @@ describe('gridMenuExtension', () => {
});

it('should have only 1 menu "refresh-dataset" when all other menus are defined as hidden & when "enableFilering" is set', () => {
const copyGridOptionsMock = { ...gridOptionsMock, enableFiltering: true, showHeaderRow: true, gridMenu: { hideClearFrozenColumnsCommand: true, hideClearAllFiltersCommand: true, hideToggleFilterCommand: true } } as unknown as GridOption;
const copyGridOptionsMock = { ...gridOptionsMock, enableFiltering: true, showHeaderRow: true, gridMenu: { commandLabels: gridOptionsMock.gridMenu.commandLabels, hideClearFrozenColumnsCommand: true, hideClearAllFiltersCommand: true, hideToggleFilterCommand: true } } as unknown as GridOption;
jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
extension.register();
extension.register(); // calling 2x register to make sure it doesn't duplicate commands
Expand All @@ -444,7 +455,7 @@ describe('gridMenuExtension', () => {
});

it('should not have the "toggle-preheader" menu command when "showPreHeaderPanel" and "hideTogglePreHeaderCommand" are set', () => {
const copyGridOptionsMock = { ...gridOptionsMock, showPreHeaderPanel: true, gridMenu: { hideClearFrozenColumnsCommand: true, hideTogglePreHeaderCommand: true } } as unknown as GridOption;
const copyGridOptionsMock = { ...gridOptionsMock, showPreHeaderPanel: true, gridMenu: { commandLabels: gridOptionsMock.gridMenu.commandLabels, hideClearFrozenColumnsCommand: true, hideTogglePreHeaderCommand: true } } as unknown as GridOption;
jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
extension.register();
expect(SharedService.prototype.gridOptions.gridMenu!.customItems).toEqual([]);
Expand All @@ -461,14 +472,14 @@ describe('gridMenuExtension', () => {
});

it('should not have the "clear-sorting" menu command when "enableSorting" and "hideClearAllSortingCommand" are set', () => {
const copyGridOptionsMock = { ...gridOptionsMock, enableSorting: true, gridMenu: { hideClearFrozenColumnsCommand: true, hideClearAllSortingCommand: true } } as unknown as GridOption;
const copyGridOptionsMock = { ...gridOptionsMock, enableSorting: true, gridMenu: { commandLabels: gridOptionsMock.gridMenu.commandLabels, hideClearFrozenColumnsCommand: true, hideClearAllSortingCommand: true } } as unknown as GridOption;
jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
extension.register();
expect(SharedService.prototype.gridOptions.gridMenu!.customItems).toEqual([]);
});

it('should have the "export-csv" menu command when "enableTextExport" is set', () => {
const copyGridOptionsMock = { ...gridOptionsMock, enableTextExport: true, gridMenu: { hideClearFrozenColumnsCommand: true, hideExportExcelCommand: true, hideExportTextDelimitedCommand: true } } as unknown as GridOption;
const copyGridOptionsMock = { ...gridOptionsMock, enableTextExport: true, gridMenu: { commandLabels: gridOptionsMock.gridMenu.commandLabels, hideClearFrozenColumnsCommand: true, hideExportExcelCommand: true, hideExportTextDelimitedCommand: true } } as unknown as GridOption;
jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
extension.register();
extension.register(); // calling 2x register to make sure it doesn't duplicate commands
Expand All @@ -478,14 +489,14 @@ describe('gridMenuExtension', () => {
});

it('should not have the "export-csv" menu command when "enableTextExport" and "hideExportCsvCommand" are set', () => {
const copyGridOptionsMock = { ...gridOptionsMock, enableTextExport: true, gridMenu: { hideClearFrozenColumnsCommand: true, hideExportExcelCommand: true, hideExportCsvCommand: true, hideExportTextDelimitedCommand: true } } as unknown as GridOption;
const copyGridOptionsMock = { ...gridOptionsMock, enableTextExport: true, gridMenu: { commandLabels: gridOptionsMock.gridMenu.commandLabels, hideClearFrozenColumnsCommand: true, hideExportExcelCommand: true, hideExportCsvCommand: true, hideExportTextDelimitedCommand: true } } as unknown as GridOption;
jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
extension.register();
expect(SharedService.prototype.gridOptions.gridMenu!.customItems).toEqual([]);
});

it('should have the "export-excel" menu command when "enableTextExport" is set', () => {
const copyGridOptionsMock = { ...gridOptionsMock, enableExcelExport: true, enableTextExport: false, gridMenu: { hideClearFrozenColumnsCommand: true, hideExportCsvCommand: true, hideExportExcelCommand: false } } as unknown as GridOption;
const copyGridOptionsMock = { ...gridOptionsMock, enableExcelExport: true, enableTextExport: false, gridMenu: { commandLabels: gridOptionsMock.gridMenu.commandLabels, hideClearFrozenColumnsCommand: true, hideExportCsvCommand: true, hideExportExcelCommand: false } } as unknown as GridOption;
jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
extension.register();
extension.register(); // calling 2x register to make sure it doesn't duplicate commands
Expand All @@ -495,7 +506,7 @@ describe('gridMenuExtension', () => {
});

it('should have the "export-text-delimited" menu command when "enableTextExport" is set', () => {
const copyGridOptionsMock = { ...gridOptionsMock, enableTextExport: true, gridMenu: { hideClearFrozenColumnsCommand: true, hideExportCsvCommand: true, hideExportExcelCommand: true } } as unknown as GridOption;
const copyGridOptionsMock = { ...gridOptionsMock, enableTextExport: true, gridMenu: { commandLabels: gridOptionsMock.gridMenu.commandLabels, hideClearFrozenColumnsCommand: true, hideExportCsvCommand: true, hideExportExcelCommand: true } } as unknown as GridOption;
jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
extension.register();
extension.register(); // calling 2x register to make sure it doesn't duplicate commands
Expand All @@ -505,7 +516,7 @@ describe('gridMenuExtension', () => {
});

it('should not have the "export-text-delimited" menu command when "enableTextExport" and "hideExportCsvCommand" are set', () => {
const copyGridOptionsMock = { ...gridOptionsMock, enableTextExport: true, gridMenu: { hideClearFrozenColumnsCommand: true, hideExportExcelCommand: true, hideExportCsvCommand: true, hideExportTextDelimitedCommand: true } } as unknown as GridOption;
const copyGridOptionsMock = { ...gridOptionsMock, enableTextExport: true, gridMenu: { commandLabels: gridOptionsMock.gridMenu.commandLabels, hideClearFrozenColumnsCommand: true, hideExportExcelCommand: true, hideExportCsvCommand: true, hideExportTextDelimitedCommand: true } } as unknown as GridOption;
jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock);
extension.register();
expect(SharedService.prototype.gridOptions.gridMenu!.customItems).toEqual([]);
Expand All @@ -526,6 +537,7 @@ describe('gridMenuExtension', () => {
...gridOptionsMock,
enableTextExport: true,
gridMenu: {
commandLabels: gridOptionsMock.gridMenu.commandLabels,
customItems: customItemsMock,
hideClearFrozenColumnsCommand: true,
hideExportCsvCommand: false,
Expand Down
27 changes: 15 additions & 12 deletions packages/common/src/extensions/extensionUtility.ts
View file
Expand Up @@ -20,11 +20,11 @@ export class ExtensionUtility {
}

let output = '';
const picker = this.sharedService.gridOptions && this.sharedService.gridOptions[pickerName] || {};
const enableTranslate = this.sharedService.gridOptions && this.sharedService.gridOptions.enableTranslate || false;
const picker = this.sharedService.gridOptions?.[pickerName] ?? {};
const enableTranslate = this.sharedService.gridOptions?.enableTranslate ?? false;

// get locales provided by user in forRoot or else use default English locales via the Constants
const locales = this.sharedService && this.sharedService.gridOptions && this.sharedService.gridOptions.locales || Constants.locales;
const locales = this.sharedService.gridOptions?.locales ?? Constants.locales;

const title = (picker as any)?.[propName];
const titleKey = (picker as any)?.[`${propName}Key`];
Expand Down Expand Up @@ -95,8 +95,8 @@ export class ExtensionUtility {

/**
* Sort items (by pointers) in an array by a property name
* @params items array
* @param property name to sort with
* @param {Array<Object>} items array
* @param {String} property name to sort with
*/
sortItems(items: any[], propertyName: string) {
// sort the custom items by their position in the list
Expand All @@ -123,19 +123,22 @@ export class ExtensionUtility {

/**
* When "enabledTranslate" is set to True, we will try to translate if the Translate Service exist or use the Locales when not
* @param translationKey
* @param localeKey
* @param {String} translationKey
* @param {String} localeKey
* @param {String} textToUse - optionally provide a static text to use (that will completely override the other arguments of the method)
*/
translateWhenEnabledAndServiceExist(translationKey: string, localeKey: string): string {
translateWhenEnabledAndServiceExist(translationKey: string, localeKey: string, textToUse?: string): string {
let text = '';
const gridOptions = this.sharedService && this.sharedService.gridOptions;
const gridOptions = this.sharedService?.gridOptions;

// get locales provided by user in main file or else use default English locales via the Constants
const locales = gridOptions && gridOptions.locales || Constants.locales;
const locales = gridOptions?.locales ?? Constants.locales;

if (gridOptions.enableTranslate && this.translaterService && this.translaterService.getCurrentLanguage && this.translaterService.translate) {
if (textToUse) {
text = textToUse;
} else if (gridOptions.enableTranslate && this.translaterService?.translate) {
text = this.translaterService.translate(translationKey || ' ');
} else if (locales && locales.hasOwnProperty(localeKey)) {
} else if (localeKey in locales) {
text = locales[localeKey as keyof Locale] as string;
} else {
text = localeKey;
Expand Down

0 comments on commit 44c72d3

Please sign in to comment.