[7.x] [Canvas] i18n work on workpad header (and a few header CTAs) and convert to typescript (#44943)

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

@@ -12,5 +12,113 @@ export const ComponentStrings = {
       i18n.translate('xpack.canvas.embedObject.noMatchingObjectsMessage', {
         defaultMessage: 'No matching objects found.',
       }),
+    getTitleText: () =>
+      i18n.translate('xpack.canvas.embedObject.titleText', {
+        defaultMessage: 'Embed Object',
+      }),
+  },
+  Asset: {
+    getCopyAssetTooltipText: () =>
+      i18n.translate('xpack.canvas.asset.copyAssetTooltipText', {
+        defaultMessage: 'Copy id to clipboard',
+      }),
+    getCreateImageTooltipText: () =>
+      i18n.translate('xpack.canvas.asset.createImageTooltipText', {
+        defaultMessage: 'Create image element',
+      }),
+    getDeleteAssetTooltipText: () =>
+      i18n.translate('xpack.canvas.asset.deleteAssetTooltipText', {
+        defaultMessage: 'Delete',
+      }),
+    getDownloadAssetTooltipText: () =>
+      i18n.translate('xpack.canvas.asset.downloadAssetTooltipText', {
+        defaultMessage: 'Download',
+      }),
+    getThumbnailAltText: () =>
+      i18n.translate('xpack.canvas.asset.thumbnailAltText', {
+        defaultMessage: 'Asset thumbnail',
+      }),
+  },
+  AssetManager: {
+    getBtnText: () =>
+      i18n.translate('xpack.canvas.assetManager.buttonText', {
+        defaultMessage: 'Manage assets',
+      }),
+    getConfirmModalBtnText: () =>
+      i18n.translate('xpack.canvas.assetManager.confirmModalButtonText', {
+        defaultMessage: 'Remove',
+      }),
+    getConfirmModalMessageText: () =>
+      i18n.translate('xpack.canvas.assetManager.confirmModalMessage', {
+        defaultMessage: 'Are you sure you want to remove this asset?',
+      }),
+    getConfirmModalTitleText: () =>
+      i18n.translate('xpack.canvas.assetManager.confirmModalTitleText', {
+        defaultMessage: 'Remove Asset',
+      }),
+  },
+  AssetModal: {
+    getDescriptionText: () =>
+      i18n.translate('xpack.canvas.assetModal.descriptionText', {
+        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', {
+        defaultMessage: 'Import your assets to get started',
+      }),
+    getFilePickerPromptText: () =>
+      i18n.translate('xpack.canvas.assetModal.filePickerPromptText', {
+        defaultMessage: 'Select or drag and drop images',
+      }),
+    getLoadingText: () =>
+      i18n.translate('xpack.canvas.assetModal.loadingText', {
+        defaultMessage: 'Uploading images',
+      }),
+    getModalCloseBtnText: () =>
+      i18n.translate('xpack.canvas.assetModal.modalCloseButtonText', {
+        defaultMessage: 'Close',
+      }),
+    getModalTitleText: () =>
+      i18n.translate('xpack.canvas.assetModal.modalTitleText', {
+        defaultMessage: 'Manage workpad assets',
+      }),
+    getSpaceUsedText: (percentageUsed: number) =>
+      i18n.translate('xpack.canvas.assetModal.spacedUsedText', {
+        defaultMessage: '{percentageUsed}% space used',
+        values: {
+          percentageUsed,
+        },
+      }),
+  },
+  WorkpadHeader: {
+    getAddElementBtnText: () =>
+      i18n.translate('xpack.canvas.workpadHeader.addElementButtonText', {
+        defaultMessage: 'Add element',
+      }),
+    getAddElementModalCloseBtnText: () =>
+      i18n.translate('xpack.canvas.workpadHeader.addElementModalCloseButtonText', {
+        defaultMessage: 'Close',
+      }),
+    getEmbedObjectBtnText: () =>
+      i18n.translate('xpack.canvas.workpadHeader.embedObjectButtonText', {
+        defaultMessage: 'Embed object',
+      }),
+    getFullScreenTooltipText: () =>
+      i18n.translate('xpack.canvas.workpadHeader.fullscreenTooltipText', {
+        defaultMessage: 'Enter fullscreen mode',
+      }),
+    getHideEditControlText: () =>
+      i18n.translate('xpack.canvas.workpadHeader.hideEditControlText', {
+        defaultMessage: 'Hide editing controls',
+      }),
+    getNoWritePermText: () =>
+      i18n.translate('xpack.canvas.workpadHeader.noWritePermissionText', {
+        defaultMessage: "You don't have permission to edit this workpad",
+      }),
+    getShowEditControlText: () =>
+      i18n.translate('xpack.canvas.workpadHeader.showEditControlText', {
+        defaultMessage: 'Show editing controls',
+      }),
   },
 };

x-pack/legacy/plugins/canvas/public/components/asset_manager/asset.tsx

@@ -16,10 +16,15 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import React, { FunctionComponent } from 'react';
+
+import { ComponentStrings } from '../../../i18n';
+
 import { Clipboard } from '../clipboard';
 import { Download } from '../download';
 import { AssetType } from '../../../types';
 
+const { Asset: strings } = ComponentStrings;
+
 interface Props {
   /** The asset to be rendered */
   asset: AssetType;
@@ -36,10 +41,10 @@ export const Asset: FunctionComponent<Props> = props => {
 
   const createImage = (
     <EuiFlexItem className="asset-create-image" grow={false}>
-      <EuiToolTip content="Create image element">
+      <EuiToolTip content={strings.getCreateImageTooltipText()}>
         <EuiButtonIcon
           iconType="vector"
-          aria-label="Create image element"
+          aria-label={strings.getCreateImageTooltipText()}
           onClick={() => onCreate(asset)}
         />
       </EuiToolTip>
@@ -48,31 +53,31 @@ export const Asset: FunctionComponent<Props> = props => {
 
   const downloadAsset = (
     <EuiFlexItem className="asset-download" grow={false}>
-      <EuiToolTip content="Download">
+      <EuiToolTip content={strings.getDownloadAssetTooltipText()}>
         <Download fileName={asset.id} content={asset.value}>
-          <EuiButtonIcon iconType="sortDown" aria-label="Download" />
+          <EuiButtonIcon iconType="sortDown" aria-label={strings.getDownloadAssetTooltipText()} />
         </Download>
       </EuiToolTip>
     </EuiFlexItem>
   );
 
   const copyAsset = (
     <EuiFlexItem grow={false}>
-      <EuiToolTip content="Copy id to clipboard">
+      <EuiToolTip content={strings.getCopyAssetTooltipText()}>
         <Clipboard content={asset.id} onCopy={(result: boolean) => result && onCopy(asset)}>
-          <EuiButtonIcon iconType="copyClipboard" aria-label="Copy id to clipboard" />
+          <EuiButtonIcon iconType="copyClipboard" aria-label={strings.getCopyAssetTooltipText()} />
         </Clipboard>
       </EuiToolTip>
     </EuiFlexItem>
   );
 
   const deleteAsset = (
     <EuiFlexItem grow={false}>
-      <EuiToolTip content="Delete">
+      <EuiToolTip content={strings.getDeleteAssetTooltipText()}>
         <EuiButtonIcon
           color="danger"
           iconType="trash"
-          aria-label="Delete"
+          aria-label={strings.getDeleteAssetTooltipText()}
           onClick={() => onDelete(asset)}
         />
       </EuiToolTip>
@@ -86,7 +91,7 @@ export const Asset: FunctionComponent<Props> = props => {
         size="original"
         url={props.asset.value}
         fullScreenIconColor="dark"
-        alt="Asset thumbnail"
+        alt={strings.getThumbnailAltText()}
         style={{ backgroundImage: `url(${props.asset.value})` }}
       />
     </div>

x-pack/legacy/plugins/canvas/public/components/asset_manager/asset_manager.tsx

@@ -13,10 +13,15 @@ import {
 } from '@elastic/eui';
 import PropTypes from 'prop-types';
 import React, { Fragment, PureComponent } from 'react';
+
+import { ComponentStrings } from '../../../i18n';
+
 import { ConfirmModal } from '../confirm_modal';
 import { AssetType } from '../../../types';
 import { AssetModal } from './asset_modal';
 
+const { AssetManager: strings } = ComponentStrings;
+
 interface Props {
   /** A list of assets, if available */
   assetValues: AssetType[];
@@ -80,17 +85,17 @@ export class AssetManager extends PureComponent<Props, State> {
     const confirmModal = (
       <ConfirmModal
         isOpen={this.state.deleteId !== null}
-        title="Remove Asset"
-        message="Are you sure you want to remove this asset?"
-        confirmButtonText="Remove"
+        title={strings.getConfirmModalTitleText()}
+        message={strings.getConfirmModalMessageText()}
+        confirmButtonText={strings.getConfirmModalBtnText()}
         onConfirm={this.doDelete}
         onCancel={this.resetDelete}
       />
     );
 
     return (
       <Fragment>
-        <EuiButtonEmpty onClick={this.showModal}>Manage assets</EuiButtonEmpty>
+        <EuiButtonEmpty onClick={this.showModal}>{strings.getBtnText()}</EuiButtonEmpty>
         {isModalVisible ? assetModal : null}
         {confirmModal}
       </Fragment>

x-pack/legacy/plugins/canvas/public/components/asset_manager/asset_modal.tsx

@@ -24,12 +24,17 @@ import {
 } from '@elastic/eui';
 import PropTypes from 'prop-types';
 import React, { FunctionComponent } from 'react';
+
+import { ComponentStrings } from '../../../i18n';
+
 // @ts-ignore
 import { ASSET_MAX_SIZE } from '../../../common/lib/constants';
 import { Loading } from '../loading';
 import { Asset } from './asset';
 import { AssetType } from '../../../types';
 
+const { AssetModal: strings } = ComponentStrings;
+
 interface Props {
   /** The assets to display within the modal */
   assetValues: AssetType[];
@@ -68,7 +73,7 @@ export const AssetModal: FunctionComponent<Props> = props => {
     <EuiPanel className="canvasAssetManager__emptyPanel">
       <EuiEmptyPrompt
         iconType="importAction"
-        title={<h2>Import your assets to get started</h2>}
+        title={<h2>{strings.getEmptyAssetsMessageText()}</h2>}
         titleSize="xs"
       />
     </EuiPanel>
@@ -83,15 +88,15 @@ export const AssetModal: FunctionComponent<Props> = props => {
       >
         <EuiModalHeader className="canvasAssetManager__modalHeader">
           <EuiModalHeaderTitle className="canvasAssetManager__modalHeaderTitle">
-            Manage workpad assets
+            {strings.getModalTitleText()}
           </EuiModalHeaderTitle>
           <EuiFlexGroup className="canvasAssetManager__fileUploadWrapper">
             <EuiFlexItem grow={false}>
               {isLoading ? (
-                <Loading animated text="Uploading images" />
+                <Loading animated text={strings.getLoadingText()} />
               ) : (
                 <EuiFilePicker
-                  initialPromptText="Select or drag and drop images"
+                  initialPromptText={strings.getFilePickerPromptText()}
                   compressed
                   multiple
                   onChange={onFileUpload}
@@ -103,10 +108,7 @@ export const AssetModal: FunctionComponent<Props> = props => {
         </EuiModalHeader>
         <EuiModalBody>
           <EuiText size="s" color="subdued">
-            <p>
-              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.
-            </p>
+            <p>{strings.getDescriptionText()}</p>
           </EuiText>
           <EuiSpacer />
           {assetValues.length ? (
@@ -137,11 +139,13 @@ export const AssetModal: FunctionComponent<Props> = props => {
               />
             </EuiFlexItem>
             <EuiFlexItem grow={false} className="eui-textNoWrap">
-              <EuiText id="CanvasAssetManagerLabel">{percentageUsed}% space used</EuiText>
+              <EuiText id="CanvasAssetManagerLabel">
+                {strings.getSpaceUsedText(percentageUsed)}
+              </EuiText>
             </EuiFlexItem>
           </EuiFlexGroup>
           <EuiButton size="s" onClick={onClose}>
-            Close
+            {strings.getModalCloseBtnText()}
           </EuiButton>
         </EuiModalFooter>
       </EuiModal>

x-pack/legacy/plugins/canvas/public/components/embeddable_flyout/flyout.tsx

@@ -6,7 +6,6 @@
 
 import React from 'react';
 
-import { FormattedMessage } from '@kbn/i18n/react';
 import {
   SavedObjectFinder,
   SavedObjectMetaData,
@@ -58,9 +57,7 @@ export class AddEmbeddableFlyout extends React.Component<Props> {
       <EuiFlyout ownFocus onClose={this.props.onClose} data-test-subj="dashboardAddPanel">
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2>
-              <FormattedMessage id="xpack.canvas.embedObject.title" defaultMessage="Embed Object" />
-            </h2>
+            <h2>{strings.getTitleText()}</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>

x-pack/legacy/plugins/canvas/public/components/embeddable_flyout/index.tsx

@@ -104,7 +104,7 @@ export class EmbeddableFlyoutPortal extends React.Component<Props> {
   }
 }
 
-export const AddEmbeddablePanel = compose<Props, {}>(
+export const AddEmbeddablePanel = compose<Props, { onClose: () => void }>(
   connect(
     mapStateToProps,
     mapDispatchToProps,

x-pack/legacy/plugins/canvas/public/components/workpad_header/index.js → x-pack/legacy/plugins/canvas/public/components/workpad_header/index.tsx

@@ -5,22 +5,41 @@
  */
 
 import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+// @ts-ignore untyped local
 import { canUserWrite } from '../../state/selectors/app';
+// @ts-ignore untyped local
 import { getSelectedPage, isWriteable } from '../../state/selectors/workpad';
+// @ts-ignore untyped local
 import { setWriteable } from '../../state/actions/workpad';
-import { WorkpadHeader as Component } from './workpad_header';
+import { State } from '../../../types';
+import { WorkpadHeader as Component, Props as ComponentProps } from './workpad_header';
 
-const mapStateToProps = state => ({
+interface StateProps {
+  isWriteable: boolean;
+  canUserWrite: boolean;
+  selectedPage: string;
+}
+
+interface DispatchProps {
+  setWriteable: (isWorkpadWriteable: boolean) => void;
+}
+
+const mapStateToProps = (state: State): StateProps => ({
   isWriteable: isWriteable(state) && canUserWrite(state),
   canUserWrite: canUserWrite(state),
   selectedPage: getSelectedPage(state),
 });
 
-const mapDispatchToProps = dispatch => ({
-  setWriteable: isWriteable => dispatch(setWriteable(isWriteable)),
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  setWriteable: (isWorkpadWriteable: boolean) => dispatch(setWriteable(isWorkpadWriteable)),
 });
 
-const mergeProps = (stateProps, dispatchProps, ownProps) => ({
+const mergeProps = (
+  stateProps: StateProps,
+  dispatchProps: DispatchProps,
+  ownProps: ComponentProps
+): ComponentProps => ({
   ...stateProps,
   ...dispatchProps,
   ...ownProps,

x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_export/index.ts

@@ -43,7 +43,7 @@ interface Props {
   enabled: boolean;
 }
 
-export const WorkpadExport = compose<ComponentProps, Props>(
+export const WorkpadExport = compose<ComponentProps, {}>(
   connect(mapStateToProps),
   withProps(
     ({ workpad, pageCount, enabled }: Props): ComponentProps => ({