diff --git a/x-pack/legacy/plugins/canvas/i18n/components.ts b/x-pack/legacy/plugins/canvas/i18n/components.ts index d49e15514468b..263c55b50aca3 100644 --- a/x-pack/legacy/plugins/canvas/i18n/components.ts +++ b/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', + }), + }, }; diff --git a/x-pack/legacy/plugins/canvas/i18n/constants.ts b/x-pack/legacy/plugins/canvas/i18n/constants.ts index 582549c1a2934..e63ca520d9154 100644 --- a/x-pack/legacy/plugins/canvas/i18n/constants.ts +++ b/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`'; diff --git a/x-pack/legacy/plugins/canvas/i18n/index.ts b/x-pack/legacy/plugins/canvas/i18n/index.ts index 4785ec3668bda..02e9962b63429 100644 --- a/x-pack/legacy/plugins/canvas/i18n/index.ts +++ b/x-pack/legacy/plugins/canvas/i18n/index.ts @@ -10,6 +10,7 @@ export * from './angular'; export * from './components'; export * from './constants'; export * from './shortcuts'; +export * from './units'; export const getAppDescription = () => i18n.translate('xpack.canvas.appDescription', { diff --git a/x-pack/legacy/plugins/canvas/i18n/units.ts b/x-pack/legacy/plugins/canvas/i18n/units.ts new file mode 100644 index 0000000000000..06ce0684778cb --- /dev/null +++ b/x-pack/legacy/plugins/canvas/i18n/units.ts @@ -0,0 +1,55 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import { i18n } from '@kbn/i18n'; + +export const UnitStrings = { + time: { + getSecondsText: (seconds: number) => + i18n.translate('xpack.canvas.units.time.seconds', { + defaultMessage: '{seconds, plural, one {# second} other {# seconds}}', + values: { seconds }, + }), + getMinutesText: (minutes: number) => + i18n.translate('xpack.canvas.units.time.minutes', { + defaultMessage: '{minutes, plural, one {# minute} other {# minutes}}', + values: { minutes }, + }), + getHoursText: (hours: number) => + i18n.translate('xpack.canvas.units.time.hours', { + defaultMessage: '{hours, plural, one {# hour} other {# hours}}', + values: { hours }, + }), + getDaysText: (days: number) => + i18n.translate('xpack.canvas.units.time.days', { + defaultMessage: '{days, plural, one {# day} other {# days}}', + values: { days }, + }), + getCycleTimeText: (length: number, format: 'seconds' | 'days' | 'hours' | 'minutes') => { + switch (format) { + case 'seconds': + return i18n.translate('xpack.canvas.workpadHeader.cycleIntervalSecondsText', { + defaultMessage: 'Every {seconds} {seconds, plural, one {second} other {seconds}}', + values: { seconds: length }, + }); + case 'minutes': + return i18n.translate('xpack.canvas.workpadHeader.cycleIntervalMinutesText', { + defaultMessage: 'Every {minutes} {minutes, plural, one {minute} other {minutes}}', + values: { minutes: length }, + }); + case 'hours': + return i18n.translate('xpack.canvas.workpadHeader.cycleIntervalHoursText', { + defaultMessage: 'Every {hours} {hours, plural, one {hour} other {hours}}', + values: { hours: length }, + }); + case 'days': + return i18n.translate('xpack.canvas.workpadHeader.cycleIntervalDaysText', { + defaultMessage: 'Every {days} {days, plural, one {day} other {days}}', + values: { days: length }, + }); + } + }, + }, +}; diff --git a/x-pack/legacy/plugins/canvas/public/components/asset_manager/asset.tsx b/x-pack/legacy/plugins/canvas/public/components/asset_manager/asset.tsx index 1739c466f1813..579470649582d 100644 --- a/x-pack/legacy/plugins/canvas/public/components/asset_manager/asset.tsx +++ b/x-pack/legacy/plugins/canvas/public/components/asset_manager/asset.tsx @@ -41,10 +41,10 @@ export const Asset: FunctionComponent = props => { const createImage = ( - + onCreate(asset)} /> @@ -53,9 +53,9 @@ export const Asset: FunctionComponent = props => { const downloadAsset = ( - + - + @@ -63,9 +63,9 @@ export const Asset: FunctionComponent = props => { const copyAsset = ( - + result && onCopy(asset)}> - + @@ -73,11 +73,11 @@ export const Asset: FunctionComponent = props => { const deleteAsset = ( - + onDelete(asset)} /> diff --git a/x-pack/legacy/plugins/canvas/public/components/asset_manager/asset_manager.tsx b/x-pack/legacy/plugins/canvas/public/components/asset_manager/asset_manager.tsx index e203400bb68a6..44049b17bfaab 100644 --- a/x-pack/legacy/plugins/canvas/public/components/asset_manager/asset_manager.tsx +++ b/x-pack/legacy/plugins/canvas/public/components/asset_manager/asset_manager.tsx @@ -85,9 +85,9 @@ export class AssetManager extends PureComponent { const confirmModal = ( @@ -95,7 +95,7 @@ export class AssetManager extends PureComponent { return ( - {strings.getBtnText()} + {strings.getButtonLabel()} {isModalVisible ? assetModal : null} {confirmModal} diff --git a/x-pack/legacy/plugins/canvas/public/components/asset_manager/asset_modal.tsx b/x-pack/legacy/plugins/canvas/public/components/asset_manager/asset_modal.tsx index adc0f34809346..f8bce19a46968 100644 --- a/x-pack/legacy/plugins/canvas/public/components/asset_manager/asset_modal.tsx +++ b/x-pack/legacy/plugins/canvas/public/components/asset_manager/asset_modal.tsx @@ -73,7 +73,7 @@ export const AssetModal: FunctionComponent = props => { {strings.getEmptyAssetsMessageText()}} + title={

{strings.getEmptyAssetsDescription()}

} titleSize="xs" /> @@ -88,7 +88,7 @@ export const AssetModal: FunctionComponent = props => { > - {strings.getModalTitleText()} + {strings.getModalTitle()} @@ -108,7 +108,7 @@ export const AssetModal: FunctionComponent = props => { -

{strings.getDescriptionText()}

+

{strings.getDescription()}

 {assetValues.length ? ( @@ -145,7 +145,7 @@ export const AssetModal: FunctionComponent = props => { - {strings.getModalCloseBtnText()} + {strings.getModalCloseButtonLabel()} diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/auto_refresh_controls.js b/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/auto_refresh_controls.tsx similarity index 54% rename from x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/auto_refresh_controls.js rename to x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/auto_refresh_controls.tsx index f8a7c0edeb4c1..fde0e2b4012c1 100644 --- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/auto_refresh_controls.js +++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/auto_refresh_controls.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { Fragment } from 'react'; +import React, { Fragment, ReactNode } from 'react'; import PropTypes from 'prop-types'; import { EuiFlexGroup, @@ -21,33 +21,57 @@ import { EuiButtonIcon, EuiToolTip, } from '@elastic/eui'; -import { timeDurationString } from '../../../lib/time_duration'; +import { timeDuration } from '../../../lib/time_duration'; import { RefreshControl } from '../refresh_control'; import { CustomInterval } from './custom_interval'; -const ListGroup = ({ children }) =>
    {[children]}
; +import { ComponentStrings, UnitStrings } from '../../../../i18n'; +const { WorkpadHeaderAutoRefreshControls: strings } = ComponentStrings; +const { time: timeStrings } = UnitStrings; +const { getSecondsText, getMinutesText, getHoursText } = timeStrings; -export const AutoRefreshControls = ({ refreshInterval, setRefresh, disableInterval }) => { - const RefreshItem = ({ duration, label }) => ( +interface Props { + refreshInterval: number; + setRefresh: (interval: number | undefined) => void; + disableInterval: () => void; +} + +interface ListGroupProps { + children: ReactNode; +} + +interface RefreshItemProps { + duration: number; + label: string; +} + +const ListGroup = ({ children }: ListGroupProps) => ( +
    {[children]}
+); + +export const AutoRefreshControls = ({ refreshInterval, setRefresh, disableInterval }: Props) => { + const RefreshItem = ({ duration, label }: RefreshItemProps) => (
  • setRefresh(duration)}>{label}
    • ); + const interval = timeDuration(refreshInterval); + return ( - Refresh elements + {strings.getRefreshListTitle()} {refreshInterval > 0 ? ( - Every {timeDurationString(refreshInterval)} + {timeStrings.getCycleTimeText(interval.length, interval.format)} ) : ( - Manually + {strings.getRefreshListDurationManualText()} )} @@ -56,11 +80,11 @@ export const AutoRefreshControls = ({ refreshInterval, setRefresh, disableInterv {refreshInterval > 0 ? ( - + @@ -74,28 +98,28 @@ export const AutoRefreshControls = ({ refreshInterval, setRefresh, disableInterv - Change auto-refresh interval + {strings.getIntervalFormLabelText()} - - - - - - + + + + + + - - - - - - + + + + + + diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/control_settings.js b/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/control_settings.tsx similarity index 69% rename from x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/control_settings.js rename to x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/control_settings.tsx index 4e73fca88fec4..f0bd140a0b725 100644 --- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/control_settings.js +++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/control_settings.tsx @@ -4,13 +4,26 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { MouseEventHandler } from 'react'; import PropTypes from 'prop-types'; import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiToolTip } from '@elastic/eui'; +// @ts-ignore untyped local import { Popover } from '../../popover'; import { AutoRefreshControls } from './auto_refresh_controls'; import { KioskControls } from './kiosk_controls'; +import { ComponentStrings } from '../../../../i18n'; +const { WorkpadHeaderControlSettings: strings } = ComponentStrings; + +interface Props { + refreshInterval: number; + setRefreshInterval: (interval: number | undefined) => void; + autoplayEnabled: boolean; + autoplayInterval: number; + enableAutoplay: (enable: boolean) => void; + setAutoplayInterval: (interval: number | undefined) => void; +} + export const ControlSettings = ({ setRefreshInterval, refreshInterval, @@ -18,16 +31,16 @@ export const ControlSettings = ({ autoplayInterval, enableAutoplay, setAutoplayInterval, -}) => { - const setRefresh = val => setRefreshInterval(val); +}: Props) => { + const setRefresh = (val: number | undefined) => setRefreshInterval(val); const disableInterval = () => { setRefresh(0); }; - const popoverButton = handleClick => ( - - + const popoverButton = (handleClick: MouseEventHandler) => ( + + ); diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/custom_interval.js b/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/custom_interval.tsx similarity index 70% rename from x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/custom_interval.js rename to x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/custom_interval.tsx index 6f4a8dd892575..f021f4724bc52 100644 --- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/custom_interval.js +++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/custom_interval.tsx @@ -4,30 +4,43 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useState } from 'react'; +import React, { useState, ChangeEvent } from 'react'; import PropTypes from 'prop-types'; import { EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiButton, EuiFieldText } from '@elastic/eui'; +import { ButtonSize } from '@elastic/eui/src/components/button/button'; +import { FlexGroupGutterSize } from '@elastic/eui/src/components/flex/flex_group'; import { getTimeInterval } from '../../../lib/time_interval'; -export const CustomInterval = ({ gutterSize, buttonSize, onSubmit, defaultValue }) => { +import { ComponentStrings } from '../../../../i18n'; +const { WorkpadHeaderCustomInterval: strings } = ComponentStrings; + +interface Props { + gutterSize: FlexGroupGutterSize; + buttonSize: ButtonSize; + onSubmit: (interval: number | undefined) => void; + defaultValue: any; +} + +export const CustomInterval = ({ gutterSize, buttonSize, onSubmit, defaultValue }: Props) => { const [customInterval, setCustomInterval] = useState(defaultValue); const refreshInterval = getTimeInterval(customInterval); const isInvalid = Boolean(customInterval.length && !refreshInterval); - const handleChange = ev => setCustomInterval(ev.target.value); + const handleChange = (ev: ChangeEvent) => setCustomInterval(ev.target.value); return (
    { ev.preventDefault(); + onSubmit(refreshInterval); }} > - Set + {strings.getButtonLabel()} diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/index.js b/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/index.ts similarity index 86% rename from x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/index.js rename to x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/index.ts index ef8fc10a24431..dc4c4461c5921 100644 --- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/index.js +++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/index.ts @@ -9,11 +9,14 @@ import { setRefreshInterval, enableAutoplay, setAutoplayInterval, + // @ts-ignore untyped local } from '../../../state/actions/workpad'; +// @ts-ignore untyped local import { getRefreshInterval, getAutoplay } from '../../../state/selectors/workpad'; +import { State } from '../../../../types'; import { ControlSettings as Component } from './control_settings'; -const mapStateToProps = state => { +const mapStateToProps = (state: State) => { const { enabled, interval } = getAutoplay(state); return { diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/kiosk_controls.js b/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/kiosk_controls.tsx similarity index 55% rename from x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/kiosk_controls.js rename to x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/kiosk_controls.tsx index 27a365ec2572a..a98cdddc21e19 100644 --- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/kiosk_controls.js +++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/kiosk_controls.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { ReactNode } from 'react'; import PropTypes from 'prop-types'; import { EuiDescriptionList, @@ -20,30 +20,55 @@ import { EuiFlexItem, EuiFlexGroup, } from '@elastic/eui'; -import { timeDurationString } from '../../../lib/time_duration'; +import { timeDuration } from '../../../lib/time_duration'; import { CustomInterval } from './custom_interval'; -const ListGroup = ({ children }) =>
      {[children]}
    ; +import { ComponentStrings, UnitStrings } from '../../../../i18n'; +const { WorkpadHeaderKioskControls: strings } = ComponentStrings; +const { time: timeStrings } = UnitStrings; +const { getSecondsText, getMinutesText } = timeStrings; + +interface Props { + autoplayEnabled: boolean; + autoplayInterval: number; + onSetEnabled: (enabled: boolean) => void; + onSetInterval: (interval: number | undefined) => void; +} + +interface ListGroupProps { + children: ReactNode; +} + +interface RefreshItemProps { + duration: number; + label: string; +} + +const ListGroup = ({ children }: ListGroupProps) => ( +
      {[children]}
    +); export const KioskControls = ({ autoplayEnabled, autoplayInterval, onSetEnabled, onSetInterval, -}) => { - const RefreshItem = ({ duration, label }) => ( +}: Props) => { + const RefreshItem = ({ duration, label }: RefreshItemProps) => (
  • onSetInterval(duration)}>{label}
    • ); + const interval = timeDuration(autoplayInterval); + return ( - Cycle fullscreen pages + {strings.getTitle()} - Every {timeDurationString(autoplayInterval)} + {timeStrings.getCycleTimeText(interval.length, interval.format)} @@ -51,29 +76,29 @@ export const KioskControls = ({
    onSetEnabled(ev.target.checked)} />
    - Change cycling interval + {strings.getCycleFormLabel()} - - - + + + - - - + + + diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/fullscreen_control/fullscreen_control.js b/x-pack/legacy/plugins/canvas/public/components/workpad_header/fullscreen_control/fullscreen_control.tsx similarity index 55% rename from x-pack/legacy/plugins/canvas/public/components/workpad_header/fullscreen_control/fullscreen_control.js rename to x-pack/legacy/plugins/canvas/public/components/workpad_header/fullscreen_control/fullscreen_control.tsx index fe5e375b154a1..5ffa712abee13 100644 --- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/fullscreen_control/fullscreen_control.js +++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/fullscreen_control/fullscreen_control.tsx @@ -4,19 +4,47 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { ReactNode, KeyboardEvent } from 'react'; import PropTypes from 'prop-types'; +// @ts-ignore no @types definition import { Shortcuts } from 'react-shortcuts'; import { isTextInput } from '../../../lib/is_text_input'; -export class FullscreenControl extends React.PureComponent { +interface ChildrenProps { + isFullscreen: boolean; + toggleFullscreen: () => void; +} + +interface Props { + isFullscreen: boolean; + setFullscreen: (fullscreen: boolean) => void; + + autoplayEnabled: boolean; + enableAutoplay: (autoplay: boolean) => void; + + onPageChange: (pageNumber: number) => void; + previousPage: () => void; + nextPage: () => void; + + fetchAllRenderables: () => void; + + children: (props: ChildrenProps) => ReactNode; +} + +export class FullscreenControl extends React.PureComponent { + static propTypes = { + setFullscreen: PropTypes.func.isRequired, + isFullscreen: PropTypes.bool.isRequired, + children: PropTypes.func.isRequired, + }; + _toggleFullscreen = () => { const { setFullscreen, isFullscreen } = this.props; setFullscreen(!isFullscreen); }; // handle keypress events for presentation events - _keyMap = { + _keyMap: { [key: string]: (...args: any[]) => void } = { REFRESH: this.props.fetchAllRenderables, PREV: this.props.previousPage, NEXT: this.props.nextPage, @@ -25,8 +53,15 @@ export class FullscreenControl extends React.PureComponent { PAGE_CYCLE_TOGGLE: () => this.props.enableAutoplay(!this.props.autoplayEnabled), }; - _keyHandler = (action, event) => { - if (!isTextInput(event.target) && typeof this._keyMap[action] === 'function') { + _keyHandler = (action: string, event: KeyboardEvent) => { + if (Object.keys(this._keyMap).indexOf(action) < 0) { + return; + } + + if ( + !isTextInput(event.target as HTMLInputElement) && + typeof this._keyMap[action] === 'function' + ) { event.preventDefault(); this._keyMap[action](); } @@ -51,9 +86,3 @@ export class FullscreenControl extends React.PureComponent { ); } } - -FullscreenControl.propTypes = { - setFullscreen: PropTypes.func.isRequired, - isFullscreen: PropTypes.bool.isRequired, - children: PropTypes.func.isRequired, -}; diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/refresh_control/index.js b/x-pack/legacy/plugins/canvas/public/components/workpad_header/refresh_control/index.ts similarity index 82% rename from x-pack/legacy/plugins/canvas/public/components/workpad_header/refresh_control/index.js rename to x-pack/legacy/plugins/canvas/public/components/workpad_header/refresh_control/index.ts index 87236f4a8247c..718fec9f59f77 100644 --- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/refresh_control/index.js +++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/refresh_control/index.ts @@ -5,11 +5,14 @@ */ import { connect } from 'react-redux'; +// @ts-ignore untyped local import { fetchAllRenderables } from '../../../state/actions/elements'; +// @ts-ignore untyped local import { getInFlight } from '../../../state/selectors/resolved_args'; +import { State } from '../../../../types'; import { RefreshControl as Component } from './refresh_control'; -const mapStateToProps = state => ({ +const mapStateToProps = (state: State) => ({ inFlight: getInFlight(state), }); diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.js b/x-pack/legacy/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.tsx similarity index 64% rename from x-pack/legacy/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.js rename to x-pack/legacy/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.tsx index 4f92c0bdda714..1768adf9be79d 100644 --- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.js +++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.tsx @@ -4,17 +4,25 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { MouseEventHandler } from 'react'; import PropTypes from 'prop-types'; import { EuiButtonIcon, EuiToolTip } from '@elastic/eui'; import { ToolTipShortcut } from '../../tool_tip_shortcut'; -export const RefreshControl = ({ doRefresh, inFlight }) => ( +import { ComponentStrings } from '../../../../i18n'; +const { WorkpadHeaderRefreshControlSettings: strings } = ComponentStrings; + +interface Props { + doRefresh: MouseEventHandler; + inFlight: boolean; +} + +export const RefreshControl = ({ doRefresh, inFlight }: Props) => ( - Refresh data + {strings.getRefreshTooltip()} } @@ -22,7 +30,7 @@ export const RefreshControl = ({ doRefresh, inFlight }) => ( diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_export/disabled_panel.tsx b/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_export/disabled_panel.tsx index 462c97fb4c8eb..85d1174f50bbd 100644 --- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_export/disabled_panel.tsx +++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_export/disabled_panel.tsx @@ -5,6 +5,7 @@ */ import React from 'react'; +import { FormattedMessage } from '@kbn/i18n/react'; import { EuiText, EuiSpacer, EuiCodeBlock, EuiCode } from '@elastic/eui'; import { Clipboard } from '../../clipboard'; @@ -24,8 +25,14 @@ export const DisabledPanel = ({ onCopy }: Props) => (

    - Export to PDF is disabled. You must configure reporting to use the Chromium browser. Add - this to your kibana.yml file. + kibana.yml, + }} + />

    diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_export/index.ts b/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_export/index.ts index c430ef6dd54d2..7f87231d8ae30 100644 --- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_export/index.ts +++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_export/index.ts @@ -18,9 +18,12 @@ import { getWindow } from '../../../lib/get_window'; import { downloadWorkpad } from '../../../lib/download_workpad'; import { WorkpadExport as Component, Props as ComponentProps } from './workpad_export'; import { getPdfUrl, createPdf } from './utils'; -import { CanvasWorkpad } from '../../../../types'; +import { State, CanvasWorkpad } from '../../../../types'; -const mapStateToProps = (state: any) => ({ +import { ComponentStrings } from '../../../../i18n'; +const { WorkpadHeaderWorkpadExport: strings } = ComponentStrings; + +const mapStateToProps = (state: State) => ({ workpad: getWorkpad(state), pageCount: getPages(state).length, enabled: getReportingBrowserType(state) === 'chromium', @@ -53,18 +56,18 @@ export const WorkpadExport = compose( return getAbsoluteUrl(getPdfUrl(workpad, { pageCount })); } - throw new Error(`Unknown export type: ${type}`); + throw new Error(strings.getUnknownExportErrorMessage(type)); }, onCopy: type => { switch (type) { case 'pdf': - notify.info('The PDF generation URL was copied to your clipboard.'); + notify.info(strings.getCopyPDFMessage()); break; case 'reportingConfig': - notify.info(`Copied reporting configuration to clipboard`); + notify.info(strings.getCopyReportingConfigMessage()); break; default: - throw new Error(`Unknown export type: ${type}`); + throw new Error(strings.getUnknownExportErrorMessage(type)); } }, onExport: type => { @@ -72,21 +75,21 @@ export const WorkpadExport = compose( case 'pdf': return createPdf(workpad, { pageCount }) .then(({ data }: { data: { job: { id: string } } }) => { - notify.info('Exporting PDF. You can track the progress in Management.', { - title: `PDF export of workpad '${workpad.name}'`, + notify.info(strings.getExportPDFMessage(), { + title: strings.getExportPDFTitle(workpad.name), }); // register the job so a completion notification shows up when it's ready jobCompletionNotifications.add(data.job.id); }) .catch((err: Error) => { - notify.error(err, { title: `Failed to create PDF for '${workpad.name}'` }); + notify.error(err, { title: strings.getExportPDFErrorTitle(workpad.name) }); }); case 'json': downloadWorkpad(workpad.id); break; default: - throw new Error(`Unknown export type: ${type}`); + throw new Error(strings.getUnknownExportErrorMessage(type)); } }, }) diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_export/pdf_panel.tsx b/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_export/pdf_panel.tsx index 68227dcf453f8..ae85a6d89ca67 100644 --- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_export/pdf_panel.tsx +++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_export/pdf_panel.tsx @@ -8,6 +8,9 @@ import React from 'react'; import { EuiButton, EuiSpacer, EuiText } from '@elastic/eui'; import { Clipboard } from '../../clipboard'; +import { ComponentStrings } from '../../../../i18n'; +const { WorkpadHeaderWorkpadExport: strings } = ComponentStrings; + interface Props { /** The URL that will invoke PDF Report generation. */ pdfURL: string; @@ -23,17 +26,15 @@ interface Props { export const PDFPanel = ({ pdfURL, onExport, onCopy }: Props) => (
    -

    PDFs can take a minute or two to generate based on the size of your workpad.

    +

    {strings.getPDFPanelGenerateDescription()}

     - Generate PDF + {strings.getPDFPanelGenerateButtonLabel()} -

    - Alternatively, copy this POST URL to call generation from outside Kibana or from Watcher. -

    +

    {strings.getPDFPanelCopyDescription()}

     @@ -41,9 +42,9 @@ export const PDFPanel = ({ pdfURL, onExport, onCopy }: Props) => ( iconType="copy" size="s" style={{ width: '100%' }} - aria-label="Alternatively, you can generate a PDF from a script or with Watcher by using this URL. Press Enter to copy the URL to clipboard." + aria-label={strings.getPDFPanelCopyAriaLabel()} > - Copy POST URL + {strings.getPDFPanelCopyButtonLabel()}
    diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_export/workpad_export.tsx b/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_export/workpad_export.tsx index 5b9ff64c0c010..276630065a0a7 100644 --- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_export/workpad_export.tsx +++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_export/workpad_export.tsx @@ -12,6 +12,9 @@ import { Popover } from '../../popover'; import { DisabledPanel } from './disabled_panel'; import { PDFPanel } from './pdf_panel'; +import { ComponentStrings } from '../../../../i18n'; +const { WorkpadHeaderWorkpadExport: strings } = ComponentStrings; + type ClosePopoverFn = () => void; type CopyTypes = 'pdf' | 'reportingConfig'; @@ -78,10 +81,10 @@ export const WorkpadExport: FunctionComponent = ({ const getPanelTree = (closePopover: ClosePopoverFn) => ({ id: 0, - title: 'Share this workpad', + title: strings.getShareWorkpadMessage(), items: [ { - name: 'Download as JSON', + name: strings.getShareDownloadJSONTitle(), icon: , onClick: () => { onExport('json'); @@ -89,11 +92,11 @@ export const WorkpadExport: FunctionComponent = ({ }, }, { - name: 'PDF reports', + name: strings.getShareDownloadPDFTitle(), icon: 'document', panel: { id: 1, - title: 'PDF reports', + title: strings.getShareDownloadPDFTitle(), content: enabled ? ( getPDFPanel(closePopover) ) : ( @@ -110,14 +113,18 @@ export const WorkpadExport: FunctionComponent = ({ }); const exportControl = (togglePopover: () => void) => ( - + ); return ( {({ closePopover }: { closePopover: ClosePopoverFn }) => ( diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_header.tsx b/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_header.tsx index 8a19984234b44..31ad0593f58bb 100644 --- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_header.tsx +++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_header.tsx @@ -64,14 +64,14 @@ export class WorkpadHeader extends React.PureComponent { position="bottom" content={ - {strings.getFullScreenTooltipText()}{' '} + {strings.getFullScreenTooltip()}{' '} } > @@ -100,7 +100,7 @@ export class WorkpadHeader extends React.PureComponent { - {strings.getAddElementModalCloseBtnText()} + {strings.getAddElementModalCloseButtonLabel()} @@ -111,12 +111,12 @@ export class WorkpadHeader extends React.PureComponent { _getEditToggleToolTipText = () => { if (!this.props.canUserWrite) { - return strings.getNoWritePermText(); + return strings.getNoWritePermissionTooltipText(); } const content = this.props.isWriteable - ? strings.getHideEditControlText() - : strings.getShowEditControlText(); + ? strings.getHideEditControlTooltip() + : strings.getShowEditControlTooltip(); return content; }; @@ -196,7 +196,7 @@ export class WorkpadHeader extends React.PureComponent { - {strings.getEmbedObjectBtnText()} + {strings.getEmbedObjectButtonLabel()} @@ -207,7 +207,7 @@ export class WorkpadHeader extends React.PureComponent { data-test-subj="add-element-button" onClick={this._showElementModal} > - {strings.getAddElementBtnText()} + {strings.getAddElementButtonLabel()} diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.tsx b/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.tsx index 7bd2418c34d55..4e37a525761cd 100644 --- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.tsx +++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_zoom/workpad_zoom.tsx @@ -12,7 +12,7 @@ import { EuiContextMenuPanelDescriptor, EuiContextMenuPanelItemDescriptor, } from '@elastic/eui'; -// @ts-ignore unconverted local component +// @ts-ignore untyped local import { Popover } from '../../popover'; import { MAX_ZOOM_LEVEL, @@ -21,6 +21,9 @@ import { CANVAS_LAYOUT_STAGE_CONTENT_SELECTOR, } from '../../../../common/lib/constants'; +import { ComponentStrings } from '../../../../i18n'; +const { WorkpadHeaderWorkpadZoom: strings } = ComponentStrings; + export interface Props { /** * current workpad zoom level @@ -101,14 +104,16 @@ export class WorkpadZoom extends PureComponent { }; _button = (togglePopover: MouseEventHandler) => ( - + ); - _getPrettyZoomLevel = (scale: number) => `${scale * 100}%`; - _getScaleMenuItems = (): EuiContextMenuPanelItemDescriptor[] => QUICK_ZOOM_LEVELS.map(scale => ({ - name: this._getPrettyZoomLevel(scale), + name: strings.getZoomPercentage(scale), icon: 'empty', onClick: () => this.props.setZoomScale(scale), })); @@ -117,27 +122,27 @@ export class WorkpadZoom extends PureComponent { const { zoomScale, zoomIn, zoomOut, resetZoom } = this.props; const items: EuiContextMenuPanelItemDescriptor[] = [ { - name: 'Fit to window', + name: strings.getZoomFitToWindowText(), icon: 'empty', onClick: this._fitToWindow, disabled: zoomScale === MAX_ZOOM_LEVEL, }, ...this._getScaleMenuItems(), { - name: 'Zoom in', + name: strings.getZoomInText(), icon: 'magnifyWithPlus', onClick: zoomIn, disabled: zoomScale === MAX_ZOOM_LEVEL, className: 'canvasContextMenu--topBorder', }, { - name: 'Zoom out', + name: strings.getZoomOutText(), icon: 'magnifyWithMinus', onClick: zoomOut, disabled: zoomScale <= MIN_ZOOM_LEVEL, }, { - name: 'Reset', + name: strings.getZoomResetText(), icon: 'empty', onClick: resetZoom, disabled: zoomScale >= MAX_ZOOM_LEVEL, @@ -148,7 +153,7 @@ export class WorkpadZoom extends PureComponent { const panels: EuiContextMenuPanelDescriptor[] = [ { id: 0, - title: `Zoom`, + title: strings.getZoomPanelTitle(), items, }, ]; @@ -161,7 +166,7 @@ export class WorkpadZoom extends PureComponent { {() => } diff --git a/x-pack/legacy/plugins/canvas/public/lib/time_duration.js b/x-pack/legacy/plugins/canvas/public/lib/time_duration.js deleted file mode 100644 index 5c65ea3970fd3..0000000000000 --- a/x-pack/legacy/plugins/canvas/public/lib/time_duration.js +++ /dev/null @@ -1,30 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -const getLabel = (label, val) => (val > 1 || val === 0 ? `${label}s` : label); - -export const timeDuration = (time, format) => { - const seconds = time / 1000; - const minutes = seconds / 60; - const hours = minutes / 60; - const days = hours / 24; - - if (format === 'days' || days >= 1) { - return { length: days, format: getLabel('day', days) }; - } - if (format === 'hours' || hours >= 1) { - return { length: hours, format: getLabel('hour', hours) }; - } - if (format === 'minutes' || minutes >= 1) { - return { length: seconds / 60, format: getLabel('minute', minutes) }; - } - return { length: seconds, format: getLabel('second', seconds) }; -}; - -export const timeDurationString = (time, format) => { - const { length, format: fmt } = timeDuration(time, format); - return `${length} ${fmt}`; -}; diff --git a/x-pack/legacy/plugins/canvas/public/lib/time_duration.ts b/x-pack/legacy/plugins/canvas/public/lib/time_duration.ts new file mode 100644 index 0000000000000..62eda09458540 --- /dev/null +++ b/x-pack/legacy/plugins/canvas/public/lib/time_duration.ts @@ -0,0 +1,29 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +type UnitFormat = 'days' | 'hours' | 'minutes' | 'seconds'; + +interface Duration { + length: number; + format: UnitFormat; +} + +export const timeDuration = (time: number, format?: UnitFormat): Duration => { + const seconds = time / 1000; + const minutes = seconds / 60; + const hours = minutes / 60; + const days = hours / 24; + + if (format === 'days' || days >= 1) { + return { length: days, format: 'days' }; + } + if (format === 'hours' || hours >= 1) { + return { length: hours, format: 'hours' }; + } + if (format === 'minutes' || minutes >= 1) { + return { length: seconds / 60, format: 'minutes' }; + } + return { length: seconds, format: 'seconds' }; +};