[7.x] [Canvas] Converting workpad header components to typescript and adding i18n (#45274)

x-pack/legacy/plugins/canvas/i18n/components.ts

@@ -5,7 +5,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { CANVAS } from './constants';
+import { CANVAS, JSON, KIBANA, PDF, POST, URL } from './constants';
 
 export const ComponentStrings = {
   AddEmbeddableFlyout: {
@@ -19,20 +19,20 @@ export const ComponentStrings = {
       }),
   },
   Asset: {
-    getCopyAssetTooltipText: () =>
-      i18n.translate('xpack.canvas.asset.copyAssetTooltipText', {
+    getCopyAssetTooltip: () =>
+      i18n.translate('xpack.canvas.asset.copyAssetTooltip', {
         defaultMessage: 'Copy id to clipboard',
       }),
-    getCreateImageTooltipText: () =>
-      i18n.translate('xpack.canvas.asset.createImageTooltipText', {
+    getCreateImageTooltip: () =>
+      i18n.translate('xpack.canvas.asset.createImageTooltip', {
         defaultMessage: 'Create image element',
       }),
-    getDeleteAssetTooltipText: () =>
-      i18n.translate('xpack.canvas.asset.deleteAssetTooltipText', {
+    getDeleteAssetTooltip: () =>
+      i18n.translate('xpack.canvas.asset.deleteAssetTooltip', {
         defaultMessage: 'Delete',
       }),
-    getDownloadAssetTooltipText: () =>
-      i18n.translate('xpack.canvas.asset.downloadAssetTooltipText', {
+    getDownloadAssetTooltip: () =>
+      i18n.translate('xpack.canvas.asset.downloadAssetTooltip', {
         defaultMessage: 'Download',
       }),
     getThumbnailAltText: () =>
@@ -41,31 +41,31 @@ export const ComponentStrings = {
       }),
   },
   AssetManager: {
-    getBtnText: () =>
-      i18n.translate('xpack.canvas.assetManager.buttonText', {
+    getButtonLabel: () =>
+      i18n.translate('xpack.canvas.assetManager.manageButtonLabel', {
         defaultMessage: 'Manage assets',
       }),
-    getConfirmModalBtnText: () =>
-      i18n.translate('xpack.canvas.assetManager.confirmModalButtonText', {
+    getConfirmModalButtonLabel: () =>
+      i18n.translate('xpack.canvas.assetManager.confirmModalButtonLabel', {
         defaultMessage: 'Remove',
       }),
     getConfirmModalMessageText: () =>
-      i18n.translate('xpack.canvas.assetManager.confirmModalMessage', {
+      i18n.translate('xpack.canvas.assetManager.confirmModalDetail', {
         defaultMessage: 'Are you sure you want to remove this asset?',
       }),
-    getConfirmModalTitleText: () =>
-      i18n.translate('xpack.canvas.assetManager.confirmModalTitleText', {
+    getConfirmModalTitle: () =>
+      i18n.translate('xpack.canvas.assetManager.confirmModalTitle', {
         defaultMessage: 'Remove Asset',
       }),
   },
   AssetModal: {
-    getDescriptionText: () =>
-      i18n.translate('xpack.canvas.assetModal.descriptionText', {
+    getDescription: () =>
+      i18n.translate('xpack.canvas.assetModal.modalDescription', {
         defaultMessage:
           'Below are the image assets in this workpad. Any assets that are currently in use cannot be determined at this time. To reclaim space, delete assets.',
       }),
-    getEmptyAssetsMessageText: () =>
-      i18n.translate('xpack.canvas.assetModal.emptyAssetsMessage', {
+    getEmptyAssetsDescription: () =>
+      i18n.translate('xpack.canvas.assetModal.emptyAssetsDescription', {
         defaultMessage: 'Import your assets to get started',
       }),
     getFilePickerPromptText: () =>
@@ -76,12 +76,12 @@ export const ComponentStrings = {
       i18n.translate('xpack.canvas.assetModal.loadingText', {
         defaultMessage: 'Uploading images',
       }),
-    getModalCloseBtnText: () =>
-      i18n.translate('xpack.canvas.assetModal.modalCloseButtonText', {
+    getModalCloseButtonLabel: () =>
+      i18n.translate('xpack.canvas.assetModal.modalCloseButtonLabel', {
         defaultMessage: 'Close',
       }),
-    getModalTitleText: () =>
-      i18n.translate('xpack.canvas.assetModal.modalTitleText', {
+    getModalTitle: () =>
+      i18n.translate('xpack.canvas.assetModal.modalTitle', {
         defaultMessage: 'Manage workpad assets',
       }),
     getSpaceUsedText: (percentageUsed: number) =>
@@ -129,33 +129,249 @@ export const ComponentStrings = {
       }),
   },
   WorkpadHeader: {
-    getAddElementBtnText: () =>
-      i18n.translate('xpack.canvas.workpadHeader.addElementButtonText', {
+    getAddElementButtonLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeader.addElementButtonLabel', {
         defaultMessage: 'Add element',
       }),
-    getAddElementModalCloseBtnText: () =>
-      i18n.translate('xpack.canvas.workpadHeader.addElementModalCloseButtonText', {
+    getAddElementModalCloseButtonLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeader.addElementModalCloseButtonLabel', {
         defaultMessage: 'Close',
       }),
-    getEmbedObjectBtnText: () =>
-      i18n.translate('xpack.canvas.workpadHeader.embedObjectButtonText', {
+    getEmbedObjectButtonLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeader.embedObjectButtonLabel', {
         defaultMessage: 'Embed object',
       }),
-    getFullScreenTooltipText: () =>
-      i18n.translate('xpack.canvas.workpadHeader.fullscreenTooltipText', {
+    getFullScreenButtonAriaLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeader.fullscreenButtonAriaLabel', {
+        defaultMessage: 'View fullscreen',
+      }),
+    getFullScreenTooltip: () =>
+      i18n.translate('xpack.canvas.workpadHeader.fullscreenTooltip', {
         defaultMessage: 'Enter fullscreen mode',
       }),
-    getHideEditControlText: () =>
-      i18n.translate('xpack.canvas.workpadHeader.hideEditControlText', {
+    getHideEditControlTooltip: () =>
+      i18n.translate('xpack.canvas.workpadHeader.hideEditControlTooltip', {
         defaultMessage: 'Hide editing controls',
       }),
-    getNoWritePermText: () =>
-      i18n.translate('xpack.canvas.workpadHeader.noWritePermissionText', {
+    getNoWritePermissionTooltipText: () =>
+      i18n.translate('xpack.canvas.workpadHeader.noWritePermissionTooltip', {
         defaultMessage: "You don't have permission to edit this workpad",
       }),
-    getShowEditControlText: () =>
-      i18n.translate('xpack.canvas.workpadHeader.showEditControlText', {
+    getShowEditControlTooltip: () =>
+      i18n.translate('xpack.canvas.workpadHeader.showEditControlTooltip', {
         defaultMessage: 'Show editing controls',
       }),
   },
+  WorkpadHeaderAutoRefreshControls: {
+    getDisableTooltip: () =>
+      i18n.translate('xpack.canvas.workpadHeaderAutoRefreshControls.disableTooltip', {
+        defaultMessage: 'Disable auto-refresh',
+      }),
+    getIntervalFormLabelText: () =>
+      i18n.translate('xpack.canvas.workpadHeaderAutoRefreshControls.intervalFormLabel', {
+        defaultMessage: 'Change auto-refresh interval',
+      }),
+    getRefreshListDurationManualText: () =>
+      i18n.translate(
+        'xpack.canvas.workpadHeaderAutoRefreshControls.refreshListDurationManualText',
+        {
+          defaultMessage: 'Manually',
+        }
+      ),
+    getRefreshListTitle: () =>
+      i18n.translate('xpack.canvas.workpadHeaderAutoRefreshControls.refreshListTitle', {
+        defaultMessage: 'Refresh elements',
+      }),
+  },
+  WorkpadHeaderControlSettings: {
+    getTooltip: () =>
+      i18n.translate('xpack.canvas.workpadHeaderControlSettings.settingsTooltip', {
+        defaultMessage: 'Control settings',
+      }),
+  },
+  WorkpadHeaderCustomInterval: {
+    getButtonLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderCustomInterval.confirmButtonLabel', {
+        defaultMessage: 'Set',
+      }),
+    getFormDescription: () =>
+      i18n.translate('xpack.canvas.workpadHeaderCustomInterval.formDescription', {
+        defaultMessage:
+          'Use shorthand notation, like {secondsExample}, {minutesExample}, or {hoursExample}',
+        values: {
+          secondsExample: '30s',
+          minutesExample: '10m',
+          hoursExample: '1h',
+        },
+      }),
+    getFormLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderCustomInterval.formLabel', {
+        defaultMessage: 'Set a custom interval',
+      }),
+  },
+  WorkpadHeaderKioskControls: {
+    getCycleFormLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderKioskControl.cycleFormLabel', {
+        defaultMessage: 'Change cycling interval',
+      }),
+    getCycleToggleSwitch: () =>
+      i18n.translate('xpack.canvas.workpadHeaderKioskControl.cycleToggleSwitch', {
+        defaultMessage: 'Cycle slides automatically',
+      }),
+    getTitle: () =>
+      i18n.translate('xpack.canvas.workpadHeaderKioskControl.controlTitle', {
+        defaultMessage: 'Cycle fullscreen pages',
+      }),
+  },
+  WorkpadHeaderRefreshControlSettings: {
+    getRefreshAriaLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderRefreshControlSettings.refreshAriaLabel', {
+        defaultMessage: 'Refresh Elements',
+      }),
+    getRefreshTooltip: () =>
+      i18n.translate('xpack.canvas.workpadHeaderRefreshControlSettings.refreshTooltip', {
+        defaultMessage: 'Refresh data',
+      }),
+  },
+  WorkpadHeaderWorkpadExport: {
+    getCopyPDFMessage: () =>
+      i18n.translate('xpack.canvas.workpadHeaderWorkpadExport.copyPDFMessage', {
+        defaultMessage: 'The {PDF} generation {URL} was copied to your clipboard.',
+        values: {
+          PDF,
+          URL,
+        },
+      }),
+    getCopyReportingConfigMessage: () =>
+      i18n.translate('xpack.canvas.workpadHeaderWorkpadExport.copyReportingConfigMessage', {
+        defaultMessage: 'Copied reporting configuration to clipboard',
+      }),
+    getExportPDFErrorTitle: (workpadName: string) =>
+      i18n.translate('xpack.canvas.workpadHeaderWorkpadExport.exportPDFErrorMessage', {
+        defaultMessage: "Failed to create {PDF} for '{workpadName}'",
+        values: {
+          PDF,
+          workpadName,
+        },
+      }),
+    getExportPDFMessage: () =>
+      i18n.translate('xpack.canvas.workpadHeaderWorkpadExport.exportPDFMessage', {
+        defaultMessage: 'Exporting {PDF}. You can track the progress in Management.',
+        values: {
+          PDF,
+        },
+      }),
+    getExportPDFTitle: (workpadName: string) =>
+      i18n.translate('xpack.canvas.workpadHeaderWorkpadExport.exportPDFTitle', {
+        defaultMessage: "{PDF} export of workpad '{workpadName}'",
+        values: {
+          PDF,
+          workpadName,
+        },
+      }),
+    getPDFPanelCopyAriaLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderWorkpadExport.pdfPanelCopyAriaLabel', {
+        defaultMessage:
+          'Alternatively, you can generate a {PDF} from a script or with Watcher by using this {URL}. Press Enter to copy the {URL} to clipboard.',
+        values: {
+          PDF,
+          URL,
+        },
+      }),
+    getPDFPanelCopyButtonLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderWorkpadExport.pdfPanelCopyButtonLabel', {
+        defaultMessage: 'Copy {POST} {URL}',
+        values: {
+          POST,
+          URL,
+        },
+      }),
+    getPDFPanelCopyDescription: () =>
+      i18n.translate('xpack.canvas.workpadHeaderWorkpadExport.pdfPanelCopyDescription', {
+        defaultMessage:
+          'Alternatively, copy this {POST} {URL} to call generation from outside {KIBANA} or from Watcher.',
+        values: {
+          POST,
+          KIBANA,
+          URL,
+        },
+      }),
+    getPDFPanelGenerateDescription: () =>
+      i18n.translate('xpack.canvas.workpadHeaderWorkpadExport.pdfPanelGenerateDescription', {
+        defaultMessage:
+          '{PDF}s can take a minute or two to generate based on the size of your workpad.',
+        values: {
+          PDF,
+        },
+      }),
+    getPDFPanelGenerateButtonLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderWorkpadExport.pdfPanelGenerateButtonLabel', {
+        defaultMessage: 'Generate {PDF}',
+        values: {
+          PDF,
+        },
+      }),
+    getShareDownloadJSONTitle: () =>
+      i18n.translate('xpack.canvas.workpadHeaderWorkpadExport.shareDownloadJSONTitle', {
+        defaultMessage: 'Download as {JSON}',
+        values: {
+          JSON,
+        },
+      }),
+    getShareDownloadPDFTitle: () =>
+      i18n.translate('xpack.canvas.workpadHeaderWorkpadExport.shareDownloadPDFTitle', {
+        defaultMessage: '{PDF} reports',
+        values: {
+          PDF,
+        },
+      }),
+    getShareWorkpadMessage: () =>
+      i18n.translate('xpack.canvas.workpadHeaderWorkpadExport.shareWorkpadMessage', {
+        defaultMessage: 'Share this workpad',
+      }),
+    getUnknownExportErrorMessage: (type: string) =>
+      i18n.translate('xpack.canvas.workpadHeaderWorkpadExport.unknownExportErrorMessage', {
+        defaultMessage: 'Unknown export type: {type}',
+        values: {
+          type,
+        },
+      }),
+  },
+  WorkpadHeaderWorkpadZoom: {
+    getZoomControlsAriaLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderWorkpadZoom.zoomControlsAriaLabel', {
+        defaultMessage: 'Zoom controls',
+      }),
+    getZoomControlsTooltip: () =>
+      i18n.translate('xpack.canvas.workpadHeaderWorkpadZoom.zoomControlsTooltip', {
+        defaultMessage: 'Zoom controls',
+      }),
+    getZoomFitToWindowText: () =>
+      i18n.translate('xpack.canvas.workpadHeaderWorkpadZoom.zoomFitToWindowText', {
+        defaultMessage: 'Fit to window',
+      }),
+    getZoomInText: () =>
+      i18n.translate('xpack.canvas.workpadHeaderWorkpadZoom.zoomInText', {
+        defaultMessage: 'Zoom in',
+      }),
+    getZoomOutText: () =>
+      i18n.translate('xpack.canvas.workpadHeaderWorkpadZoom.zoomOutText', {
+        defaultMessage: 'Zoom out',
+      }),
+    getZoomPanelTitle: () =>
+      i18n.translate('xpack.canvas.workpadHeaderWorkpadZoom.zoomPanelTitle', {
+        defaultMessage: 'Zoom',
+      }),
+    getZoomPercentage: (scale: number) =>
+      i18n.translate('xpack.canvas.workpadHeaderWorkpadZoom.zoomResetText', {
+        defaultMessage: '{scalePercentage}%',
+        values: {
+          scalePercentage: scale * 100,
+        },
+      }),
+    getZoomResetText: () =>
+      i18n.translate('xpack.canvas.workpadHeaderWorkpadZoom.zoomPrecentageValue', {
+        defaultMessage: 'Reset',
+      }),
+  },
 };

x-pack/legacy/plugins/canvas/i18n/constants.ts

@@ -18,10 +18,14 @@ export const FONT_FAMILY = '`font-family`';
 export const FONT_WEIGHT = '`font-weight`';
 export const ISO8601 = 'ISO8601';
 export const JS = 'JavaScript';
+export const JSON = 'JSON';
+export const KIBANA = 'Kibana';
 export const LUCENE = 'Lucene';
 export const MARKDOWN = 'Markdown';
 export const MOMENTJS = 'MomentJS';
 export const NUMERALJS = 'NumeralJS';
+export const PDF = 'PDF';
+export const POST = 'POST';
 export const SQL = 'SQL';
 export const SVG = 'SVG';
 export const TINYMATH = '`TinyMath`';

x-pack/legacy/plugins/canvas/i18n/index.ts

@@ -10,6 +10,7 @@ export * from './angular';
 export * from './constants';
 export * from './components';
 export * from './shortcuts';
+export * from './units';
 
 export const getAppDescription = () =>
   i18n.translate('xpack.canvas.appDescription', {