Add i18n support for Clarity components (#18076)

Signed-off-by: AllForNothing <sshijun@vmware.com>

src/portal/src/app/shared/components/navigator/navigator.component.ts

@@ -31,6 +31,7 @@ import {
     DefaultDatetimeRendering,
     DeFaultLang,
     LANGUAGES,
+    stringsForClarity,
     SupportedLanguage,
 } from '../../entities/shared.const';
 import {
@@ -39,6 +40,10 @@ import {
     StyleMode,
 } from '../../../services/theme';
 import { getDatetimeRendering } from '../../units/shared.utils';
+import { ClrCommonStrings } from '@clr/angular/utils/i18n/common-strings.interface';
+import { map } from 'rxjs/operators';
+import { forkJoin, Observable } from 'rxjs';
+import { ClrCommonStringsService } from '@clr/angular';
 
 @Component({
     selector: 'navigator',
@@ -63,7 +68,8 @@ export class NavigatorComponent implements OnInit {
         private appConfigService: AppConfigService,
         private msgHandler: MessageHandlerService,
         private searchTrigger: SearchTriggerService,
-        private skinableConfig: SkinableConfig
+        private skinableConfig: SkinableConfig,
+        private commonStrings: ClrCommonStringsService
     ) {}
 
     ngOnInit(): void {
@@ -75,6 +81,7 @@ export class NavigatorComponent implements OnInit {
                 LANGUAGES[this.selectedLang][1],
                 this.selectedLang
             );
+            this.translateClarityComponents();
         }
         this.selectedDatetimeRendering = getDatetimeRendering();
         if (this.appConfigService.isIntegrationMode()) {
@@ -85,6 +92,28 @@ export class NavigatorComponent implements OnInit {
             this.msgHandler.handleReadOnly();
         }
     }
+    //Internationalization for Clarity components, refer to https://clarity.design/documentation/internationalization
+    translateClarityComponents() {
+        const translatedObservables: Observable<string | any>[] = [];
+        const translatedStringsForClarity: Partial<ClrCommonStrings> = {};
+        for (let key in stringsForClarity) {
+            translatedObservables.push(
+                this.translate.get(stringsForClarity[key]).pipe(
+                    map(res => {
+                        return [key, res];
+                    })
+                )
+            );
+        }
+        forkJoin(translatedObservables).subscribe(res => {
+            if (res?.length) {
+                res.forEach(item => {
+                    translatedStringsForClarity[item[0]] = item[1];
+                });
+                this.commonStrings.localize(translatedStringsForClarity);
+            }
+        });
+    }
 
     public get isSessionValid(): boolean {
         return this.session.getCurrentUser() != null;
@@ -186,7 +215,6 @@ export class NavigatorComponent implements OnInit {
     // Switch languages
     switchLanguage(lang: SupportedLanguage): void {
         this.selectedLang = lang;
-        registerLocaleData(LANGUAGES[this.selectedLang][1], this.selectedLang);
         localStorage.setItem(DEFAULT_LANG_LOCALSTORAGE_KEY, lang);
         // due to the bug(https://github.com/ngx-translate/core/issues/1258) of translate module
         // have to reload

src/portal/src/app/shared/entities/shared.const.ts

@@ -20,6 +20,7 @@ import locale_fr from '@angular/common/locales/fr';
 import locale_pt from '@angular/common/locales/pt-PT';
 import locale_tr from '@angular/common/locales/tr';
 import locale_de from '@angular/common/locales/de';
+import { ClrCommonStrings } from '@clr/angular/utils/i18n/common-strings.interface';
 
 export const enum AlertType {
     DANGER,
@@ -328,3 +329,58 @@ export enum ScheduleType {
     CUSTOM = 'Custom',
     MANUAL = 'Manual',
 }
+
+export const stringsForClarity: Partial<ClrCommonStrings> = {
+    open: 'CLARITY.OPEN',
+    close: 'CLARITY.CLOSE',
+    show: 'CLARITY.SHOW',
+    hide: 'CLARITY.HIDE',
+    expand: 'CLARITY.EXPAND',
+    collapse: 'CLARITY.COLLAPSE',
+    more: 'CLARITY.MORE',
+    select: 'CLARITY.SELECT',
+    selectAll: 'CLARITY.SELECT_ALL',
+    previous: 'CLARITY.PREVIOUS',
+    next: 'CLARITY.NEXT',
+    current: 'CLARITY.CURRENT',
+    info: 'CLARITY.INFO',
+    success: 'CLARITY.SUCCESS',
+    warning: 'CLARITY.WARNING',
+    danger: 'CLARITY.DANGER',
+    rowActions: 'CLARITY.ROW_ACTION',
+    pickColumns: 'CLARITY.PICK_COLUMNS',
+    showColumns: 'CLARITY.SHOW_COLUMNS',
+    sortColumn: 'CLARITY.SORT_COLUMNS',
+    firstPage: 'CLARITY.FIRST_PAGE',
+    lastPage: 'CLARITY.LAST_PAGE',
+    nextPage: 'CLARITY.NEXT_PAGE',
+    previousPage: 'CLARITY.PREVIOUS_PAGE',
+    currentPage: 'CLARITY.CURRENT_PAGE',
+    totalPages: 'CLARITY.TOTAL_PAGE',
+    filterItems: 'CLARITY.FILTER_ITEMS',
+    minValue: 'CLARITY.MIN_VALUE',
+    maxValue: 'CLARITY.MAX_VALUE',
+    modalContentStart: 'CLARITY.MODAL_CONTENT_START',
+    modalContentEnd: 'CLARITY.MODAL_CONTENT_END',
+    showColumnsMenuDescription: 'CLARITY.SHOW_COLUMNS_MENU_DESCRIPTION',
+    allColumnsSelected: 'CLARITY.ALL_COLUMNS_SELECTED',
+    signpostToggle: 'CLARITY.SIGNPOST_TOGGLE',
+    signpostClose: 'CLARITY.SIGNPOST_CLOSE',
+    loading: 'CLARITY.LOADING',
+    // Date Picker
+    datepickerDialogLabel: 'CLARITY.DATE_PICKER_DIALOG_LABEL',
+    datepickerToggle: 'CLARITY.DATE_PICKER_TOGGLE',
+    datepickerToggleChooseDateLabel:
+        'CLARITY.DATE_PICKER_TOGGLE_CHOOSE_DATE_LABEL',
+    datepickerToggleChangeDateLabel:
+        'CLARITY.DATE_PICKER_TOGGLE_CHANGE_DATE_LABEL',
+    datepickerPreviousMonth: 'CLARITY.DATE_PICKER_PREVIOUS_MONTH',
+    datepickerCurrentMonth: 'CLARITY.DATE_PICKER_CURRENT_MONTH',
+    datepickerNextMonth: 'CLARITY.DATE_PICKER_NEXT_MONTH',
+    datepickerPreviousDecade: 'CLARITY.DATE_PICKER_PREVIOUS_DECADE',
+    datepickerNextDecade: 'CLARITY.DATE_PICKER_NEXT_DECADE',
+    datepickerCurrentDecade: 'CLARITY.DATE_PICKER_CURRENT_DECADE',
+    datepickerSelectMonthText: 'CLARITY.DATE_PICKER_SELECT_MONTH_TEXT',
+    datepickerSelectYearText: 'CLARITY.DATE_PICKER_SELECT_YEAR_TEXT',
+    datepickerSelectedLabel: 'CLARITY.DATE_PICKER_SELECTED_LABEL',
+};

src/portal/src/i18n/lang/de-de-lang.json

@@ -1843,5 +1843,56 @@
         "SCHEDULE_RESUME_BTN_INFO": "FORTSETZEN — Setzt die Ausführung aller Pläne fort.",
         "WORKER_FREE_BTN_INFO": "Halte den aktuell laufenden Job an um den Arbeiter zu befreien.",
         "CRON": "Cron"
+    },
+    "CLARITY": {
+        "OPEN": "Open",
+        "CLOSE": "Close",
+        "SHOW": "Show",
+        "HIDE": "Hide",
+        "EXPAND": "Expand",
+        "COLLAPSE": "Collapse",
+        "MORE": "More",
+        "SELECT": "Select",
+        "SELECT_ALL": "Select All",
+        "PREVIOUS": "Previous",
+        "NEXT": "Next",
+        "CURRENT": "Jump to current",
+        "INFO": "Info",
+        "SUCCESS": "Success",
+        "WARNING": "Warning",
+        "DANGER": "Error",
+        "ROW_ACTION": "Available actions",
+        "PICK_COLUMNS": "Manage Columns",
+        "SHOW_COLUMNS": "Show Columns",
+        "SORT_COLUMNS": "Sort Column",
+        "FIRST_PAGE": "First Page",
+        "LAST_PAGE": "Last Page",
+        "NEXT_PAGE": "Next Page",
+        "PREVIOUS_PAGE": "Previous Page",
+        "CURRENT_PAGE": "Current Page",
+        "TOTAL_PAGE": "Total Pages",
+        "FILTER_ITEMS": "Filter items",
+        "MIN_VALUE": "Min value",
+        "MAX_VALUE": "Max value",
+        "MODAL_CONTENT_START": "Beginning of Modal Content",
+        "MODAL_CONTENT_END": "End of Modal Content",
+        "SHOW_COLUMNS_MENU_DESCRIPTION": "Show or hide columns menu",
+        "ALL_COLUMNS_SELECTED": "All columns selected",
+        "SIGNPOST_TOGGLE": "Signpost Toggle",
+        "SIGNPOST_CLOSE": "Signpost Close",
+        "LOADING": "LOADING",
+        "DATE_PICKER_DIALOG_LABEL": "Choose date",
+        "DATE_PICKER_TOGGLE": "Toggle datepicker",
+        "DATE_PICKER_TOGGLE_CHOOSE_DATE_LABEL": "Choose date",
+        "DATE_PICKER_TOGGLE_CHANGE_DATE_LABEL": "Change date, {SELECTED_DATE}",
+        "DATE_PICKER_PREVIOUS_MONTH": "Previous month",
+        "DATE_PICKER_CURRENT_MONTH": "Current month",
+        "DATE_PICKER_NEXT_MONTH": "Next month",
+        "DATE_PICKER_PREVIOUS_DECADE": "Previous decade",
+        "DATE_PICKER_NEXT_DECADE": "Next decade",
+        "DATE_PICKER_CURRENT_DECADE": "Current decade",
+        "DATE_PICKER_SELECT_MONTH_TEXT": "Select month, the current month is {CALENDAR_MONTH}",
+        "DATE_PICKER_SELECT_YEAR_TEXT": "Select year, the current year is {CALENDAR_YEAR}",
+        "DATE_PICKER_SELECTED_LABEL": "{FULL_DATE} - Selected"
     }
 }

src/portal/src/i18n/lang/en-us-lang.json

@@ -1843,5 +1843,56 @@
         "SCHEDULE_RESUME_BTN_INFO": "RESUME — Resume all schedules to execute.",
         "WORKER_FREE_BTN_INFO": "Stop the current running job to free the worker",
         "CRON": "Cron"
+    },
+    "CLARITY": {
+        "OPEN": "Open",
+        "CLOSE": "Close",
+        "SHOW": "Show",
+        "HIDE": "Hide",
+        "EXPAND": "Expand",
+        "COLLAPSE": "Collapse",
+        "MORE": "More",
+        "SELECT": "Select",
+        "SELECT_ALL": "Select All",
+        "PREVIOUS": "Previous",
+        "NEXT": "Next",
+        "CURRENT": "Jump to current",
+        "INFO": "Info",
+        "SUCCESS": "Success",
+        "WARNING": "Warning",
+        "DANGER": "Error",
+        "ROW_ACTION": "Available actions",
+        "PICK_COLUMNS": "Manage Columns",
+        "SHOW_COLUMNS": "Show Columns",
+        "SORT_COLUMNS": "Sort Column",
+        "FIRST_PAGE": "First Page",
+        "LAST_PAGE": "Last Page",
+        "NEXT_PAGE": "Next Page",
+        "PREVIOUS_PAGE": "Previous Page",
+        "CURRENT_PAGE": "Current Page",
+        "TOTAL_PAGE": "Total Pages",
+        "FILTER_ITEMS": "Filter items",
+        "MIN_VALUE": "Min value",
+        "MAX_VALUE": "Max value",
+        "MODAL_CONTENT_START": "Beginning of Modal Content",
+        "MODAL_CONTENT_END": "End of Modal Content",
+        "SHOW_COLUMNS_MENU_DESCRIPTION": "Show or hide columns menu",
+        "ALL_COLUMNS_SELECTED": "All columns selected",
+        "SIGNPOST_TOGGLE": "Signpost Toggle",
+        "SIGNPOST_CLOSE": "Signpost Close",
+        "LOADING": "LOADING",
+        "DATE_PICKER_DIALOG_LABEL": "Choose date",
+        "DATE_PICKER_TOGGLE": "Toggle datepicker",
+        "DATE_PICKER_TOGGLE_CHOOSE_DATE_LABEL": "Choose date",
+        "DATE_PICKER_TOGGLE_CHANGE_DATE_LABEL": "Change date, {SELECTED_DATE}",
+        "DATE_PICKER_PREVIOUS_MONTH": "Previous month",
+        "DATE_PICKER_CURRENT_MONTH": "Current month",
+        "DATE_PICKER_NEXT_MONTH": "Next month",
+        "DATE_PICKER_PREVIOUS_DECADE": "Previous decade",
+        "DATE_PICKER_NEXT_DECADE": "Next decade",
+        "DATE_PICKER_CURRENT_DECADE": "Current decade",
+        "DATE_PICKER_SELECT_MONTH_TEXT": "Select month, the current month is {CALENDAR_MONTH}",
+        "DATE_PICKER_SELECT_YEAR_TEXT": "Select year, the current year is {CALENDAR_YEAR}",
+        "DATE_PICKER_SELECTED_LABEL": "{FULL_DATE} - Selected"
     }
 }

src/portal/src/i18n/lang/es-es-lang.json

@@ -1842,5 +1842,56 @@
         "SCHEDULE_RESUME_BTN_INFO": "RESUME — Resume all schedules to execute.",
         "WORKER_FREE_BTN_INFO": "Stop the current running job to free the worker",
         "CRON": "Cron"
+    },
+    "CLARITY": {
+        "OPEN": "Open",
+        "CLOSE": "Close",
+        "SHOW": "Show",
+        "HIDE": "Hide",
+        "EXPAND": "Expand",
+        "COLLAPSE": "Collapse",
+        "MORE": "More",
+        "SELECT": "Select",
+        "SELECT_ALL": "Select All",
+        "PREVIOUS": "Previous",
+        "NEXT": "Next",
+        "CURRENT": "Jump to current",
+        "INFO": "Info",
+        "SUCCESS": "Success",
+        "WARNING": "Warning",
+        "DANGER": "Error",
+        "ROW_ACTION": "Available actions",
+        "PICK_COLUMNS": "Manage Columns",
+        "SHOW_COLUMNS": "Show Columns",
+        "SORT_COLUMNS": "Sort Column",
+        "FIRST_PAGE": "First Page",
+        "LAST_PAGE": "Last Page",
+        "NEXT_PAGE": "Next Page",
+        "PREVIOUS_PAGE": "Previous Page",
+        "CURRENT_PAGE": "Current Page",
+        "TOTAL_PAGE": "Total Pages",
+        "FILTER_ITEMS": "Filter items",
+        "MIN_VALUE": "Min value",
+        "MAX_VALUE": "Max value",
+        "MODAL_CONTENT_START": "Beginning of Modal Content",
+        "MODAL_CONTENT_END": "End of Modal Content",
+        "SHOW_COLUMNS_MENU_DESCRIPTION": "Show or hide columns menu",
+        "ALL_COLUMNS_SELECTED": "All columns selected",
+        "SIGNPOST_TOGGLE": "Signpost Toggle",
+        "SIGNPOST_CLOSE": "Signpost Close",
+        "LOADING": "LOADING",
+        "DATE_PICKER_DIALOG_LABEL": "Choose date",
+        "DATE_PICKER_TOGGLE": "Toggle datepicker",
+        "DATE_PICKER_TOGGLE_CHOOSE_DATE_LABEL": "Choose date",
+        "DATE_PICKER_TOGGLE_CHANGE_DATE_LABEL": "Change date, {SELECTED_DATE}",
+        "DATE_PICKER_PREVIOUS_MONTH": "Previous month",
+        "DATE_PICKER_CURRENT_MONTH": "Current month",
+        "DATE_PICKER_NEXT_MONTH": "Next month",
+        "DATE_PICKER_PREVIOUS_DECADE": "Previous decade",
+        "DATE_PICKER_NEXT_DECADE": "Next decade",
+        "DATE_PICKER_CURRENT_DECADE": "Current decade",
+        "DATE_PICKER_SELECT_MONTH_TEXT": "Select month, the current month is {CALENDAR_MONTH}",
+        "DATE_PICKER_SELECT_YEAR_TEXT": "Select year, the current year is {CALENDAR_YEAR}",
+        "DATE_PICKER_SELECTED_LABEL": "{FULL_DATE} - Selected"
     }
 }

src/portal/src/i18n/lang/fr-fr-lang.json

@@ -1812,5 +1812,56 @@
         "SCHEDULE_RESUME_BTN_INFO": "RESUME — Resume all schedule to execute.",
         "WORKER_FREE_BTN_INFO": "Stop the current running job to free the worker",
         "CRON": "Cron"
+    },
+    "CLARITY": {
+        "OPEN": "Open",
+        "CLOSE": "Close",
+        "SHOW": "Show",
+        "HIDE": "Hide",
+        "EXPAND": "Expand",
+        "COLLAPSE": "Collapse",
+        "MORE": "More",
+        "SELECT": "Select",
+        "SELECT_ALL": "Select All",
+        "PREVIOUS": "Previous",
+        "NEXT": "Next",
+        "CURRENT": "Jump to current",
+        "INFO": "Info",
+        "SUCCESS": "Success",
+        "WARNING": "Warning",
+        "DANGER": "Error",
+        "ROW_ACTION": "Available actions",
+        "PICK_COLUMNS": "Manage Columns",
+        "SHOW_COLUMNS": "Show Columns",
+        "SORT_COLUMNS": "Sort Column",
+        "FIRST_PAGE": "First Page",
+        "LAST_PAGE": "Last Page",
+        "NEXT_PAGE": "Next Page",
+        "PREVIOUS_PAGE": "Previous Page",
+        "CURRENT_PAGE": "Current Page",
+        "TOTAL_PAGE": "Total Pages",
+        "FILTER_ITEMS": "Filter items",
+        "MIN_VALUE": "Min value",
+        "MAX_VALUE": "Max value",
+        "MODAL_CONTENT_START": "Beginning of Modal Content",
+        "MODAL_CONTENT_END": "End of Modal Content",
+        "SHOW_COLUMNS_MENU_DESCRIPTION": "Show or hide columns menu",
+        "ALL_COLUMNS_SELECTED": "All columns selected",
+        "SIGNPOST_TOGGLE": "Signpost Toggle",
+        "SIGNPOST_CLOSE": "Signpost Close",
+        "LOADING": "LOADING",
+        "DATE_PICKER_DIALOG_LABEL": "Choose date",
+        "DATE_PICKER_TOGGLE": "Toggle datepicker",
+        "DATE_PICKER_TOGGLE_CHOOSE_DATE_LABEL": "Choose date",
+        "DATE_PICKER_TOGGLE_CHANGE_DATE_LABEL": "Change date, {SELECTED_DATE}",
+        "DATE_PICKER_PREVIOUS_MONTH": "Previous month",
+        "DATE_PICKER_CURRENT_MONTH": "Current month",
+        "DATE_PICKER_NEXT_MONTH": "Next month",
+        "DATE_PICKER_PREVIOUS_DECADE": "Previous decade",
+        "DATE_PICKER_NEXT_DECADE": "Next decade",
+        "DATE_PICKER_CURRENT_DECADE": "Current decade",
+        "DATE_PICKER_SELECT_MONTH_TEXT": "Select month, the current month is {CALENDAR_MONTH}",
+        "DATE_PICKER_SELECT_YEAR_TEXT": "Select year, the current year is {CALENDAR_YEAR}",
+        "DATE_PICKER_SELECTED_LABEL": "{FULL_DATE} - Selected"
     }
 }

src/portal/src/i18n/lang/pt-br-lang.json

@@ -1839,5 +1839,56 @@
         "SCHEDULE_RESUME_BTN_INFO": "RESUME — Resume all schedule to execute.",
         "WORKER_FREE_BTN_INFO": "Stop the current running job to free the worker",
         "CRON": "Cron"
+    },
+    "CLARITY": {
+        "OPEN": "Open",
+        "CLOSE": "Close",
+        "SHOW": "Show",
+        "HIDE": "Hide",
+        "EXPAND": "Expand",
+        "COLLAPSE": "Collapse",
+        "MORE": "More",
+        "SELECT": "Select",
+        "SELECT_ALL": "Select All",
+        "PREVIOUS": "Previous",
+        "NEXT": "Next",
+        "CURRENT": "Jump to current",
+        "INFO": "Info",
+        "SUCCESS": "Success",
+        "WARNING": "Warning",
+        "DANGER": "Error",
+        "ROW_ACTION": "Available actions",
+        "PICK_COLUMNS": "Manage Columns",
+        "SHOW_COLUMNS": "Show Columns",
+        "SORT_COLUMNS": "Sort Column",
+        "FIRST_PAGE": "First Page",
+        "LAST_PAGE": "Last Page",
+        "NEXT_PAGE": "Next Page",
+        "PREVIOUS_PAGE": "Previous Page",
+        "CURRENT_PAGE": "Current Page",
+        "TOTAL_PAGE": "Total Pages",
+        "FILTER_ITEMS": "Filter items",
+        "MIN_VALUE": "Min value",
+        "MAX_VALUE": "Max value",
+        "MODAL_CONTENT_START": "Beginning of Modal Content",
+        "MODAL_CONTENT_END": "End of Modal Content",
+        "SHOW_COLUMNS_MENU_DESCRIPTION": "Show or hide columns menu",
+        "ALL_COLUMNS_SELECTED": "All columns selected",
+        "SIGNPOST_TOGGLE": "Signpost Toggle",
+        "SIGNPOST_CLOSE": "Signpost Close",
+        "LOADING": "LOADING",
+        "DATE_PICKER_DIALOG_LABEL": "Choose date",
+        "DATE_PICKER_TOGGLE": "Toggle datepicker",
+        "DATE_PICKER_TOGGLE_CHOOSE_DATE_LABEL": "Choose date",
+        "DATE_PICKER_TOGGLE_CHANGE_DATE_LABEL": "Change date, {SELECTED_DATE}",
+        "DATE_PICKER_PREVIOUS_MONTH": "Previous month",
+        "DATE_PICKER_CURRENT_MONTH": "Current month",
+        "DATE_PICKER_NEXT_MONTH": "Next month",
+        "DATE_PICKER_PREVIOUS_DECADE": "Previous decade",
+        "DATE_PICKER_NEXT_DECADE": "Next decade",
+        "DATE_PICKER_CURRENT_DECADE": "Current decade",
+        "DATE_PICKER_SELECT_MONTH_TEXT": "Select month, the current month is {CALENDAR_MONTH}",
+        "DATE_PICKER_SELECT_YEAR_TEXT": "Select year, the current year is {CALENDAR_YEAR}",
+        "DATE_PICKER_SELECTED_LABEL": "{FULL_DATE} - Selected"
     }
 }

src/portal/src/i18n/lang/tr-tr-lang.json

@@ -1843,5 +1843,56 @@
         "SCHEDULE_RESUME_BTN_INFO": "RESUME — Resume all schedule to execute.",
         "WORKER_FREE_BTN_INFO": "Stop the current running job to free the worker",
         "CRON": "Cron"
+    },
+    "CLARITY": {
+        "OPEN": "Open",
+        "CLOSE": "Close",
+        "SHOW": "Show",
+        "HIDE": "Hide",
+        "EXPAND": "Expand",
+        "COLLAPSE": "Collapse",
+        "MORE": "More",
+        "SELECT": "Select",
+        "SELECT_ALL": "Select All",
+        "PREVIOUS": "Previous",
+        "NEXT": "Next",
+        "CURRENT": "Jump to current",
+        "INFO": "Info",
+        "SUCCESS": "Success",
+        "WARNING": "Warning",
+        "DANGER": "Error",
+        "ROW_ACTION": "Available actions",
+        "PICK_COLUMNS": "Manage Columns",
+        "SHOW_COLUMNS": "Show Columns",
+        "SORT_COLUMNS": "Sort Column",
+        "FIRST_PAGE": "First Page",
+        "LAST_PAGE": "Last Page",
+        "NEXT_PAGE": "Next Page",
+        "PREVIOUS_PAGE": "Previous Page",
+        "CURRENT_PAGE": "Current Page",
+        "TOTAL_PAGE": "Total Pages",
+        "FILTER_ITEMS": "Filter items",
+        "MIN_VALUE": "Min value",
+        "MAX_VALUE": "Max value",
+        "MODAL_CONTENT_START": "Beginning of Modal Content",
+        "MODAL_CONTENT_END": "End of Modal Content",
+        "SHOW_COLUMNS_MENU_DESCRIPTION": "Show or hide columns menu",
+        "ALL_COLUMNS_SELECTED": "All columns selected",
+        "SIGNPOST_TOGGLE": "Signpost Toggle",
+        "SIGNPOST_CLOSE": "Signpost Close",
+        "LOADING": "LOADING",
+        "DATE_PICKER_DIALOG_LABEL": "Choose date",
+        "DATE_PICKER_TOGGLE": "Toggle datepicker",
+        "DATE_PICKER_TOGGLE_CHOOSE_DATE_LABEL": "Choose date",
+        "DATE_PICKER_TOGGLE_CHANGE_DATE_LABEL": "Change date, {SELECTED_DATE}",
+        "DATE_PICKER_PREVIOUS_MONTH": "Previous month",
+        "DATE_PICKER_CURRENT_MONTH": "Current month",
+        "DATE_PICKER_NEXT_MONTH": "Next month",
+        "DATE_PICKER_PREVIOUS_DECADE": "Previous decade",
+        "DATE_PICKER_NEXT_DECADE": "Next decade",
+        "DATE_PICKER_CURRENT_DECADE": "Current decade",
+        "DATE_PICKER_SELECT_MONTH_TEXT": "Select month, the current month is {CALENDAR_MONTH}",
+        "DATE_PICKER_SELECT_YEAR_TEXT": "Select year, the current year is {CALENDAR_YEAR}",
+        "DATE_PICKER_SELECTED_LABEL": "{FULL_DATE} - Selected"
     }
 }

src/portal/src/i18n/lang/zh-cn-lang.json

@@ -1842,5 +1842,56 @@
         "SCHEDULE_RESUME_BTN_INFO": "重启 — 重启所有定时任务，定时任务在触发时会正常执行。",
         "WORKER_FREE_BTN_INFO": "停下选中的工作者当前正在执行的任务以便释放该工作者，被释放的工作者会继续执行其他任务。",
         "CRON": "Cron"
+    },
+    "CLARITY": {
+        "OPEN": "打开",
+        "CLOSE": "关闭",
+        "SHOW": "显示",
+        "HIDE": "隐藏",
+        "EXPAND": "展开",
+        "COLLAPSE": "收起",
+        "MORE": "更多",
+        "SELECT": "选择",
+        "SELECT_ALL": "全选",
+        "PREVIOUS": "前一个",
+        "NEXT": "下一个",
+        "CURRENT": "跳转至当前",
+        "INFO": "信息",
+        "SUCCESS": "成功",
+        "WARNING": "警告",
+        "DANGER": "错误",
+        "ROW_ACTION": "可用操作",
+        "PICK_COLUMNS": "管理列",
+        "SHOW_COLUMNS": "显示列",
+        "SORT_COLUMNS": "排序列",
+        "FIRST_PAGE": "第一页",
+        "LAST_PAGE": "最后一页",
+        "NEXT_PAGE": "下一页",
+        "PREVIOUS_PAGE": "前一页",
+        "CURRENT_PAGE": "当前页",
+        "TOTAL_PAGE": "总页数",
+        "FILTER_ITEMS": "过滤项",
+        "MIN_VALUE": "最小值",
+        "MAX_VALUE": "最大值",
+        "MODAL_CONTENT_START": "模态内容的开始",
+        "MODAL_CONTENT_END": "模态内容的结束",
+        "SHOW_COLUMNS_MENU_DESCRIPTION": "显示或隐藏列菜单",
+        "ALL_COLUMNS_SELECTED": "已选择所有列",
+        "SIGNPOST_TOGGLE": "指示牌切换",
+        "SIGNPOST_CLOSE": "指示牌关闭",
+        "LOADING": "加载中",
+        "DATE_PICKER_DIALOG_LABEL": "选择日期",
+        "DATE_PICKER_TOGGLE": "切换日期选择器",
+        "DATE_PICKER_TOGGLE_CHOOSE_DATE_LABEL": "选择日期",
+        "DATE_PICKER_TOGGLE_CHANGE_DATE_LABEL": "选择日期, {SELECTED_DATE}",
+        "DATE_PICKER_PREVIOUS_MONTH": "前一月",
+        "DATE_PICKER_CURRENT_MONTH": "当前月",
+        "DATE_PICKER_NEXT_MONTH": "下一月",
+        "DATE_PICKER_PREVIOUS_DECADE": "前十年",
+        "DATE_PICKER_NEXT_DECADE": "后十年",
+        "DATE_PICKER_CURRENT_DECADE": "当前十年",
+        "DATE_PICKER_SELECT_MONTH_TEXT": "选择月, 当前月是 {CALENDAR_MONTH}",
+        "DATE_PICKER_SELECT_YEAR_TEXT": "选择年, 当前年是 {CALENDAR_YEAR}",
+        "DATE_PICKER_SELECTED_LABEL": "已选择 - {FULL_DATE}"
     }
 }

src/portal/src/i18n/lang/zh-tw-lang.json

@@ -1834,5 +1834,56 @@
     "SCHEDULE_RESUME_BTN_INFO": "RESUME — Resume all schedule to execute.",
     "WORKER_FREE_BTN_INFO": "Stop the current running job to free the worker",
     "CRON": "Cron"
+  },
+  "CLARITY": {
+    "OPEN": "Open",
+    "CLOSE": "Close",
+    "SHOW": "Show",
+    "HIDE": "Hide",
+    "EXPAND": "Expand",
+    "COLLAPSE": "Collapse",
+    "MORE": "More",
+    "SELECT": "Select",
+    "SELECT_ALL": "Select All",
+    "PREVIOUS": "Previous",
+    "NEXT": "Next",
+    "CURRENT": "Jump to current",
+    "INFO": "Info",
+    "SUCCESS": "Success",
+    "WARNING": "Warning",
+    "DANGER": "Error",
+    "ROW_ACTION": "Available actions",
+    "PICK_COLUMNS": "Manage Columns",
+    "SHOW_COLUMNS": "Show Columns",
+    "SORT_COLUMNS": "Sort Column",
+    "FIRST_PAGE": "First Page",
+    "LAST_PAGE": "Last Page",
+    "NEXT_PAGE": "Next Page",
+    "PREVIOUS_PAGE": "Previous Page",
+    "CURRENT_PAGE": "Current Page",
+    "TOTAL_PAGE": "Total Pages",
+    "FILTER_ITEMS": "Filter items",
+    "MIN_VALUE": "Min value",
+    "MAX_VALUE": "Max value",
+    "MODAL_CONTENT_START": "Beginning of Modal Content",
+    "MODAL_CONTENT_END": "End of Modal Content",
+    "SHOW_COLUMNS_MENU_DESCRIPTION": "Show or hide columns menu",
+    "ALL_COLUMNS_SELECTED": "All columns selected",
+    "SIGNPOST_TOGGLE": "Signpost Toggle",
+    "SIGNPOST_CLOSE": "Signpost Close",
+    "LOADING": "LOADING",
+    "DATE_PICKER_DIALOG_LABEL": "Choose date",
+    "DATE_PICKER_TOGGLE": "Toggle datepicker",
+    "DATE_PICKER_TOGGLE_CHOOSE_DATE_LABEL": "Choose date",
+    "DATE_PICKER_TOGGLE_CHANGE_DATE_LABEL": "Change date, {SELECTED_DATE}",
+    "DATE_PICKER_PREVIOUS_MONTH": "Previous month",
+    "DATE_PICKER_CURRENT_MONTH": "Current month",
+    "DATE_PICKER_NEXT_MONTH": "Next month",
+    "DATE_PICKER_PREVIOUS_DECADE": "Previous decade",
+    "DATE_PICKER_NEXT_DECADE": "Next decade",
+    "DATE_PICKER_CURRENT_DECADE": "Current decade",
+    "DATE_PICKER_SELECT_MONTH_TEXT": "Select month, the current month is {CALENDAR_MONTH}",
+    "DATE_PICKER_SELECT_YEAR_TEXT": "Select year, the current year is {CALENDAR_YEAR}",
+    "DATE_PICKER_SELECTED_LABEL": "{FULL_DATE} - Selected"
   }
 }