github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

[canvas] Reduce bundle size by co-locating strings with components (#103013)

Browse source
This commit is contained in:
Clint Andrew Hall 2021-06-23 17:04:19 -05:00 • committed by GitHub
parent 1e7ef987be
commit 0669895137
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
69 changed files with 1549 additions and 1783 deletions
Download patch file Download diff file Expand all files Collapse all files

8
x-pack/plugins/canvas/CONTRIBUTING.md
View file

@ -36,8 +36,8 @@ To keep the code terse, Canvas uses i18n "dictionaries": abstracted, static sing
```js
// i18n/components.ts
export const ComponentStrings = {
// asset_manager.tsx
const strings = {
// ...
AssetManager: {
getCopyAssetMessage: (id: string) =>
@ -52,10 +52,6 @@ export const ComponentStrings = {
// ...
};
// asset_manager.tsx
import { ComponentStrings } from '../../../i18n';
const { AssetManager: strings } = ComponentStrings;
const text = (
<EuiText>
{strings.getSpaceUsedText(percentageUsed)}

18
x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/component/advanced_filter.tsx
View file

@ -5,12 +5,22 @@
* 2.0.
*/
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import PropTypes from 'prop-types';
import React, { FunctionComponent } from 'react';
import { ComponentStrings } from '../../../../../i18n';
import PropTypes from 'prop-types';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
const { AdvancedFilter: strings } = ComponentStrings;
const strings = {
getApplyButtonLabel: () =>
i18n.translate('xpack.canvas.renderer.advancedFilter.applyButtonLabel', {
defaultMessage: 'Apply',
description: 'This refers to applying the filter to the Canvas workpad',
}),
getInputPlaceholder: () =>
i18n.translate('xpack.canvas.renderer.advancedFilter.inputPlaceholder', {
defaultMessage: 'Enter filter expression',
}),
};
export interface Props {
/** Optional value for the component */

14
x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/dropdown_filter.tsx
View file

@ -5,12 +5,18 @@
* 2.0.
*/
import { EuiIcon } from '@elastic/eui';
import PropTypes from 'prop-types';
import React, { ChangeEvent, FocusEvent, FunctionComponent } from 'react';
import { ComponentStrings } from '../../../../../i18n';
import PropTypes from 'prop-types';
import { EuiIcon } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
const { DropdownFilter: strings } = ComponentStrings;
const strings = {
getMatchAllOptionLabel: () =>
i18n.translate('xpack.canvas.renderer.dropdownFilter.matchAllOptionLabel', {
defaultMessage: 'ANY',
description: 'The dropdown filter option to match any value in the field.',
}),
};
export interface Props {
/**

1543
x-pack/plugins/canvas/i18n/components.ts
View file

File diff suppressed because it is too large Load diff

1
x-pack/plugins/canvas/i18n/index.ts
View file

@ -6,7 +6,6 @@
*/
export * from './capabilities';
export * from './components';
export * from './constants';
export * from './errors';
export * from './expression_types';

11
x-pack/plugins/canvas/public/components/arg_add_popover/arg_add_popover.tsx
View file

@ -8,15 +8,20 @@
import React, { MouseEventHandler, FC } from 'react';
import PropTypes from 'prop-types';
import { EuiButtonIcon } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
// @ts-expect-error untyped local
import { Popover, PopoverChildrenProps } from '../popover';
import { ArgAdd } from '../arg_add';
// @ts-expect-error untyped local
import { Arg } from '../../expression_types/arg';
import { ComponentStrings } from '../../../i18n';
const { ArgAddPopover: strings } = ComponentStrings;
const strings = {
getAddAriaLabel: () =>
i18n.translate('xpack.canvas.argAddPopover.addAriaLabel', {
defaultMessage: 'Add argument',
}),
};
interface ArgOptions {
arg: Arg;

19
x-pack/plugins/canvas/public/components/arg_form/advanced_failure.js
View file

@ -9,12 +9,25 @@ import React from 'react';
import PropTypes from 'prop-types';
import { compose, withProps, withPropsOnChange } from 'recompose';
import { EuiTextArea, EuiButton, EuiButtonEmpty, EuiFormRow, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { fromExpression, toExpression } from '@kbn/interpreter/common';
import { createStatefulPropHoc } from '../../components/enhance/stateful_prop';
import { ComponentStrings } from '../../../i18n';
const { ArgFormAdvancedFailure: strings } = ComponentStrings;
const strings = {
getApplyButtonLabel: () =>
i18n.translate('xpack.canvas.argFormAdvancedFailure.applyButtonLabel', {
defaultMessage: 'Apply',
}),
getResetButtonLabel: () =>
i18n.translate('xpack.canvas.argFormAdvancedFailure.resetButtonLabel', {
defaultMessage: 'Reset',
}),
getRowErrorMessage: () =>
i18n.translate('xpack.canvas.argFormAdvancedFailure.rowErrorMessage', {
defaultMessage: 'Invalid Expression',
}),
};
export const AdvancedFailureComponent = (props) => {
const {

16
x-pack/plugins/canvas/public/components/arg_form/arg_simple_form.tsx
View file

@ -8,12 +8,20 @@
import React, { ReactNode, MouseEventHandler } from 'react';
import PropTypes from 'prop-types';
import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { TooltipIcon, IconType } from '../tooltip_icon';
import { ComponentStrings } from '../../../i18n';
const { ArgFormArgSimpleForm: strings } = ComponentStrings;
const strings = {
getRemoveAriaLabel: () =>
i18n.translate('xpack.canvas.argFormArgSimpleForm.removeAriaLabel', {
defaultMessage: 'Remove',
}),
getRequiredTooltip: () =>
i18n.translate('xpack.canvas.argFormArgSimpleForm.requiredTooltip', {
defaultMessage: 'This argument is required, you should specify a value.',
}),
};
interface Props {
children?: ReactNode;
required?: boolean;

10
x-pack/plugins/canvas/public/components/arg_form/pending_arg_value.js
View file

@ -7,11 +7,17 @@
import React from 'react';
import PropTypes from 'prop-types';
import { ComponentStrings } from '../../../i18n';
import { i18n } from '@kbn/i18n';
import { Loading } from '../loading';
import { ArgLabel } from './arg_label';
const { ArgFormPendingArgValue: strings } = ComponentStrings;
const strings = {
getLoadingMessage: () =>
i18n.translate('xpack.canvas.argFormPendingArgValue.loadingMessage', {
defaultMessage: 'Loading',
}),
};
export class PendingArgValue extends React.PureComponent {
static propTypes = {

12
x-pack/plugins/canvas/public/components/arg_form/simple_failure.tsx
View file

@ -6,11 +6,17 @@
*/
import React from 'react';
import { i18n } from '@kbn/i18n';
import { TooltipIcon, IconType } from '../tooltip_icon';
import { ComponentStrings } from '../../../i18n';
const { ArgFormSimpleFailure: strings } = ComponentStrings;
const strings = {
getFailureTooltip: () =>
i18n.translate('xpack.canvas.argFormSimpleFailure.failureTooltip', {
defaultMessage:
'The interface for this argument could not parse the value, so a fallback input is being used',
}),
};
// This is what is being generated by render() from the Arg class. It is called in FunctionForm
export const SimpleFailure = () => (

38
x-pack/plugins/canvas/public/components/asset_manager/asset.component.tsx
View file

@ -17,6 +17,7 @@ import {
EuiTextColor,
EuiToolTip,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { useNotifyService } from '../../services';
@ -25,9 +26,40 @@ import { Clipboard } from '../clipboard';
import { Download } from '../download';
import { AssetType } from '../../../types';
import { ComponentStrings } from '../../../i18n';
const { Asset: strings } = ComponentStrings;
const strings = {
getCopyAssetTooltip: () =>
i18n.translate('xpack.canvas.asset.copyAssetTooltip', {
defaultMessage: 'Copy id to clipboard',
}),
getCreateImageTooltip: () =>
i18n.translate('xpack.canvas.asset.createImageTooltip', {
defaultMessage: 'Create image element',
}),
getDeleteAssetTooltip: () =>
i18n.translate('xpack.canvas.asset.deleteAssetTooltip', {
defaultMessage: 'Delete',
}),
getDownloadAssetTooltip: () =>
i18n.translate('xpack.canvas.asset.downloadAssetTooltip', {
defaultMessage: 'Download',
}),
getThumbnailAltText: () =>
i18n.translate('xpack.canvas.asset.thumbnailAltText', {
defaultMessage: 'Asset thumbnail',
}),
getConfirmModalButtonLabel: () =>
i18n.translate('xpack.canvas.asset.confirmModalButtonLabel', {
defaultMessage: 'Remove',
}),
getConfirmModalMessageText: () =>
i18n.translate('xpack.canvas.asset.confirmModalDetail', {
defaultMessage: 'Are you sure you want to remove this asset?',
}),
getConfirmModalTitle: () =>
i18n.translate('xpack.canvas.asset.confirmModalTitle', {
defaultMessage: 'Remove Asset',
}),
};
export interface Props {
/** The asset to be rendered */

37
x-pack/plugins/canvas/public/components/asset_manager/asset_manager.component.tsx
View file

@ -24,14 +24,47 @@ import {
EuiSpacer,
EuiText,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { ASSET_MAX_SIZE } from '../../../common/lib/constants';
import { Loading } from '../loading';
import { Asset } from './asset';
import { AssetType } from '../../../types';
import { ComponentStrings } from '../../../i18n';
const { AssetManager: strings } = ComponentStrings;
const strings = {
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.',
}),
getEmptyAssetsDescription: () =>
i18n.translate('xpack.canvas.assetModal.emptyAssetsDescription', {
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',
}),
getModalCloseButtonLabel: () =>
i18n.translate('xpack.canvas.assetModal.modalCloseButtonLabel', {
defaultMessage: 'Close',
}),
getModalTitle: () =>
i18n.translate('xpack.canvas.assetModal.modalTitle', {
defaultMessage: 'Manage workpad assets',
}),
getSpaceUsedText: (percentageUsed: number) =>
i18n.translate('xpack.canvas.assetModal.spacedUsedText', {
defaultMessage: '{percentageUsed}% space used',
values: {
percentageUsed,
},
}),
};
export interface Props {
/** The assets to display within the modal */

10
x-pack/plugins/canvas/public/components/asset_picker/asset_picker.tsx
View file

@ -8,12 +8,16 @@
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { EuiFlexGrid, EuiFlexItem, EuiLink, EuiImage, EuiIcon } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { CanvasAsset } from '../../../types';
import { ComponentStrings } from '../../../i18n';
const { AssetPicker: strings } = ComponentStrings;
const strings = {
getAssetAltText: () =>
i18n.translate('xpack.canvas.assetpicker.assetAltText', {
defaultMessage: 'Asset thumbnail',
}),
};
interface Props {
assets: CanvasAsset[];

9
x-pack/plugins/canvas/public/components/canvas_loading/canvas_loading.component.tsx
View file

@ -7,9 +7,14 @@
import React, { FC } from 'react';
import { EuiPanel, EuiLoadingChart, EuiSpacer, EuiText } from '@elastic/eui';
import { ComponentStrings } from '../../../i18n/components';
import { i18n } from '@kbn/i18n';
const { CanvasLoading: strings } = ComponentStrings;
const strings = {
getLoadingLabel: () =>
i18n.translate('xpack.canvas.canvasLoading.loadingMessage', {
defaultMessage: 'Loading',
}),
};
export const CanvasLoading: FC<{ msg?: string }> = ({
msg = `${strings.getLoadingLabel()}...`,

19
x-pack/plugins/canvas/public/components/color_manager/color_manager.tsx
View file

@ -9,11 +9,24 @@ import React, { FC } from 'react';
import PropTypes from 'prop-types';
import { EuiButtonIcon, EuiFieldText, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import tinycolor from 'tinycolor2';
import { i18n } from '@kbn/i18n';
import { ColorDot } from '../color_dot/color_dot';
import { ComponentStrings } from '../../../i18n/components';
const { ColorManager: strings } = ComponentStrings;
const strings = {
getAddAriaLabel: () =>
i18n.translate('xpack.canvas.colorManager.addAriaLabel', {
defaultMessage: 'Add Color',
}),
getCodePlaceholder: () =>
i18n.translate('xpack.canvas.colorManager.codePlaceholder', {
defaultMessage: 'Color code',
}),
getRemoveAriaLabel: () =>
i18n.translate('xpack.canvas.colorManager.removeAriaLabel', {
defaultMessage: 'Remove Color',
}),
};
export interface Props {
/**

47
x-pack/plugins/canvas/public/components/custom_element_modal/custom_element_modal.tsx
View file

@ -26,16 +26,57 @@ import {
EuiTextArea,
EuiTitle,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { VALID_IMAGE_TYPES } from '../../../common/lib/constants';
import { encode } from '../../../common/lib/dataurl';
import { ElementCard } from '../element_card';
import { ComponentStrings } from '../../../i18n/components';
const MAX_NAME_LENGTH = 40;
const MAX_DESCRIPTION_LENGTH = 100;
const { CustomElementModal: strings } = ComponentStrings;
const strings = {
getCancelButtonLabel: () =>
i18n.translate('xpack.canvas.customElementModal.cancelButtonLabel', {
defaultMessage: 'Cancel',
}),
getCharactersRemainingDescription: (numberOfRemainingCharacter: number) =>
i18n.translate('xpack.canvas.customElementModal.remainingCharactersDescription', {
defaultMessage: '{numberOfRemainingCharacter} characters remaining',
values: {
numberOfRemainingCharacter,
},
}),
getDescriptionInputLabel: () =>
i18n.translate('xpack.canvas.customElementModal.descriptionInputLabel', {
defaultMessage: 'Description',
}),
getElementPreviewTitle: () =>
i18n.translate('xpack.canvas.customElementModal.elementPreviewTitle', {
defaultMessage: 'Element preview',
}),
getImageFilePickerPlaceholder: () =>
i18n.translate('xpack.canvas.customElementModal.imageFilePickerPlaceholder', {
defaultMessage: 'Select or drag and drop an image',
}),
getImageInputDescription: () =>
i18n.translate('xpack.canvas.customElementModal.imageInputDescription', {
defaultMessage:
'Take a screenshot of your element and upload it here. This can also be done after saving.',
}),
getImageInputLabel: () =>
i18n.translate('xpack.canvas.customElementModal.imageInputLabel', {
defaultMessage: 'Thumbnail image',
}),
getNameInputLabel: () =>
i18n.translate('xpack.canvas.customElementModal.nameInputLabel', {
defaultMessage: 'Name',
}),
getSaveButtonLabel: () =>
i18n.translate('xpack.canvas.customElementModal.saveButtonLabel', {
defaultMessage: 'Save',
}),
};
interface Props {
/**
* initial value of the name of the custom element

20
x-pack/plugins/canvas/public/components/datasource/datasource_component.js
View file

@ -18,13 +18,27 @@ import {
EuiHorizontalRule,
} from '@elastic/eui';
import { isEqual } from 'lodash';
import { ComponentStrings } from '../../../i18n';
import { i18n } from '@kbn/i18n';
import { getDefaultIndex } from '../../lib/es_service';
import { DatasourceSelector } from './datasource_selector';
import { DatasourcePreview } from './datasource_preview';
const { DatasourceDatasourceComponent: strings } = ComponentStrings;
const strings = {
getExpressionArgDescription: () =>
i18n.translate('xpack.canvas.datasourceDatasourceComponent.expressionArgDescription', {
defaultMessage:
'The datasource has an argument controlled by an expression. Use the expression editor to modify the datasource.',
}),
getPreviewButtonLabel: () =>
i18n.translate('xpack.canvas.datasourceDatasourceComponent.previewButtonLabel', {
defaultMessage: 'Preview data',
}),
getSaveButtonLabel: () =>
i18n.translate('xpack.canvas.datasourceDatasourceComponent.saveButtonLabel', {
defaultMessage: 'Save',
}),
};
export class DatasourceComponent extends PureComponent {
static propTypes = {
args: PropTypes.object.isRequired,

29
x-pack/plugins/canvas/public/components/datasource/datasource_preview/datasource_preview.js
View file

@ -18,12 +18,33 @@ import {
EuiSpacer,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import { Datatable } from '../../datatable';
import { Error } from '../../error';
import { ComponentStrings } from '../../../../i18n';
const { DatasourceDatasourcePreview: strings } = ComponentStrings;
const { DatasourceDatasourceComponent: datasourceStrings } = ComponentStrings;
const strings = {
getEmptyFirstLineDescription: () =>
i18n.translate('xpack.canvas.datasourceDatasourcePreview.emptyFirstLineDescription', {
defaultMessage: "We couldn't find any documents matching your search criteria.",
}),
getEmptySecondLineDescription: () =>
i18n.translate('xpack.canvas.datasourceDatasourcePreview.emptySecondLineDescription', {
defaultMessage: 'Check your datasource settings and try again.',
}),
getEmptyTitle: () =>
i18n.translate('xpack.canvas.datasourceDatasourcePreview.emptyTitle', {
defaultMessage: 'No documents found',
}),
getModalTitle: () =>
i18n.translate('xpack.canvas.datasourceDatasourcePreview.modalTitle', {
defaultMessage: 'Datasource preview',
}),
getSaveButtonLabel: () =>
i18n.translate('xpack.canvas.datasourceDatasourcePreview.saveButtonLabel', {
defaultMessage: 'Save',
}),
};
export const DatasourcePreview = ({ done, datatable }) => (
<EuiModal onClose={done} maxWidth="1000px" className="canvasModal--fixedSize">
@ -37,7 +58,7 @@ export const DatasourcePreview = ({ done, datatable }) => (
id="xpack.canvas.datasourceDatasourcePreview.modalDescription"
defaultMessage="The following data will be available to the selected element upon clicking {saveLabel} in the sidebar."
values={{
saveLabel: <strong>{datasourceStrings.getSaveButtonLabel()}</strong>,
saveLabel: <strong>{strings.getSaveButtonLabel()}</strong>,
}}
/>
</p>

14
x-pack/plugins/canvas/public/components/datasource/no_datasource.js
View file

@ -8,9 +8,19 @@
import React from 'react';
import PropTypes from 'prop-types';
import { EuiCallOut } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { ComponentStrings } from '../../../i18n';
const { DatasourceNoDatasource: strings } = ComponentStrings;
const strings = {
getPanelDescription: () =>
i18n.translate('xpack.canvas.datasourceNoDatasource.panelDescription', {
defaultMessage:
"This element does not have an attached data source. This is usually because the element is an image or other static asset. If that's not the case you might want to check your expression to make sure it is not malformed.",
}),
getPanelTitle: () =>
i18n.translate('xpack.canvas.datasourceNoDatasource.panelTitle', {
defaultMessage: 'No data source present',
}),
};
export const NoDatasource = () => (
<div className="canvasDataSource__section">

37
x-pack/plugins/canvas/public/components/element_config/element_config.tsx
View file

@ -5,13 +5,42 @@
* 2.0.
*/
import { EuiFlexGroup, EuiFlexItem, EuiStat, EuiAccordion } from '@elastic/eui';
import PropTypes from 'prop-types';
import React from 'react';
import { ComponentStrings } from '../../../i18n';
import PropTypes from 'prop-types';
import { EuiFlexGroup, EuiFlexItem, EuiStat, EuiAccordion } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { State } from '../../../types';
const { ElementConfig: strings } = ComponentStrings;
const strings = {
getFailedLabel: () =>
i18n.translate('xpack.canvas.elementConfig.failedLabel', {
defaultMessage: 'Failed',
description:
'The label for the total number of elements in a workpad that have thrown an error or failed to load',
}),
getLoadedLabel: () =>
i18n.translate('xpack.canvas.elementConfig.loadedLabel', {
defaultMessage: 'Loaded',
description: 'The label for the number of elements in a workpad that have loaded',
}),
getProgressLabel: () =>
i18n.translate('xpack.canvas.elementConfig.progressLabel', {
defaultMessage: 'Progress',
description: 'The label for the percentage of elements that have finished loading',
}),
getTitle: () =>
i18n.translate('xpack.canvas.elementConfig.title', {
defaultMessage: 'Element status',
description:
'"Elements" refers to the individual text, images, or visualizations that you can add to a Canvas workpad',
}),
getTotalLabel: () =>
i18n.translate('xpack.canvas.elementConfig.totalLabel', {
defaultMessage: 'Total',
description: 'The label for the total number of elements in a workpad',
}),
};
interface Props {
elementStats: State['transient']['elementStats'];

15
x-pack/plugins/canvas/public/components/embeddable_flyout/flyout.component.tsx
View file

@ -7,15 +7,24 @@
import React, { FC } from 'react';
import { EuiFlyout, EuiFlyoutHeader, EuiFlyoutBody, EuiTitle } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import {
SavedObjectFinderUi,
SavedObjectMetaData,
} from '../../../../../../src/plugins/saved_objects/public/';
import { ComponentStrings } from '../../../i18n';
import { useServices } from '../../services';
const { AddEmbeddableFlyout: strings } = ComponentStrings;
const strings = {
getNoItemsText: () =>
i18n.translate('xpack.canvas.embedObject.noMatchingObjectsMessage', {
defaultMessage: 'No matching objects found.',
}),
getTitleText: () =>
i18n.translate('xpack.canvas.embedObject.titleText', {
defaultMessage: 'Add from Kibana',
}),
};
export interface Props {
onClose: () => void;
onSelect: (id: string, embeddableType: string) => void;

15
x-pack/plugins/canvas/public/components/error/error.tsx
View file

@ -8,18 +8,27 @@
import React, { FC } from 'react';
import PropTypes from 'prop-types';
import { EuiCallOut } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { get } from 'lodash';
import { ComponentStrings } from '../../../i18n';
import { ShowDebugging } from './show_debugging';
const strings = {
getDescription: () =>
i18n.translate('xpack.canvas.errorComponent.description', {
defaultMessage: 'Expression failed with the message:',
}),
getTitle: () =>
i18n.translate('xpack.canvas.errorComponent.title', {
defaultMessage: 'Whoops! Expression failed',
}),
};
export interface Props {
payload: {
error: Error;
};
}
const { Error: strings } = ComponentStrings;
export const Error: FC<Props> = ({ payload }) => {
const message = get(payload, 'error.message');

13
x-pack/plugins/canvas/public/components/expression/element_not_selected.js
View file

@ -8,9 +8,18 @@
import React from 'react';
import PropTypes from 'prop-types';
import { EuiButton } from '@elastic/eui';
import { ComponentStrings } from '../../../i18n';
import { i18n } from '@kbn/i18n';
const { ExpressionElementNotSelected: strings } = ComponentStrings;
const strings = {
getCloseButtonLabel: () =>
i18n.translate('xpack.canvas.expressionElementNotSelected.closeButtonLabel', {
defaultMessage: 'Close',
}),
getSelectDescription: () =>
i18n.translate('xpack.canvas.expressionElementNotSelected.selectDescription', {
defaultMessage: 'Select an element to show expression input',
}),
};
export const ElementNotSelected = ({ done }) => (
<div>

39
x-pack/plugins/canvas/public/components/expression/expression.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import React, { FC, MutableRefObject } from 'react';
import React, { FC, MutableRefObject, useRef } from 'react';
import PropTypes from 'prop-types';
import {
EuiPanel,
@ -17,17 +17,46 @@ import {
EuiLink,
EuiPortal,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
// @ts-expect-error
import { Shortcuts } from 'react-shortcuts';
import { ComponentStrings } from '../../../i18n';
import { ExpressionInput } from '../expression_input';
import { ToolTipShortcut } from '../tool_tip_shortcut';
import { ExpressionFunction } from '../../../types';
import { FormState } from './';
const { Expression: strings } = ComponentStrings;
const { useRef } = React;
const strings = {
getCancelButtonLabel: () =>
i18n.translate('xpack.canvas.expression.cancelButtonLabel', {
defaultMessage: 'Cancel',
}),
getCloseButtonLabel: () =>
i18n.translate('xpack.canvas.expression.closeButtonLabel', {
defaultMessage: 'Close',
}),
getLearnLinkText: () =>
i18n.translate('xpack.canvas.expression.learnLinkText', {
defaultMessage: 'Learn expression syntax',
}),
getMaximizeButtonLabel: () =>
i18n.translate('xpack.canvas.expression.maximizeButtonLabel', {
defaultMessage: 'Maximize editor',
}),
getMinimizeButtonLabel: () =>
i18n.translate('xpack.canvas.expression.minimizeButtonLabel', {
defaultMessage: 'Minimize Editor',
}),
getRunButtonLabel: () =>
i18n.translate('xpack.canvas.expression.runButtonLabel', {
defaultMessage: 'Run',
}),
getRunTooltip: () =>
i18n.translate('xpack.canvas.expression.runTooltip', {
defaultMessage: 'Run the expression',
}),
};
const shortcut = (
ref: MutableRefObject<ExpressionInput | null>,

55
x-pack/plugins/canvas/public/components/expression_input/reference.ts
View file

@ -5,13 +5,64 @@
* 2.0.
*/
import { ComponentStrings } from '../../../i18n';
import { i18n } from '@kbn/i18n';
import {
ExpressionFunction,
ExpressionFunctionParameter,
} from '../../../../../../src/plugins/expressions';
const { ExpressionInput: strings } = ComponentStrings;
import { BOLD_MD_TOKEN } from '../../../i18n/constants';
const strings = {
getArgReferenceAliasesDetail: (aliases: string) =>
i18n.translate('xpack.canvas.expressionInput.argReferenceAliasesDetail', {
defaultMessage: '{BOLD_MD_TOKEN}Aliases{BOLD_MD_TOKEN}: {aliases}',
values: {
BOLD_MD_TOKEN,
aliases,
},
}),
getArgReferenceDefaultDetail: (defaultVal: string) =>
i18n.translate('xpack.canvas.expressionInput.argReferenceDefaultDetail', {
defaultMessage: '{BOLD_MD_TOKEN}Default{BOLD_MD_TOKEN}: {defaultVal}',
values: {
BOLD_MD_TOKEN,
defaultVal,
},
}),
getArgReferenceRequiredDetail: (required: string) =>
i18n.translate('xpack.canvas.expressionInput.argReferenceRequiredDetail', {
defaultMessage: '{BOLD_MD_TOKEN}Required{BOLD_MD_TOKEN}: {required}',
values: {
BOLD_MD_TOKEN,
required,
},
}),
getArgReferenceTypesDetail: (types: string) =>
i18n.translate('xpack.canvas.expressionInput.argReferenceTypesDetail', {
defaultMessage: '{BOLD_MD_TOKEN}Types{BOLD_MD_TOKEN}: {types}',
values: {
BOLD_MD_TOKEN,
types,
},
}),
getFunctionReferenceAcceptsDetail: (acceptTypes: string) =>
i18n.translate('xpack.canvas.expressionInput.functionReferenceAccepts', {
defaultMessage: '{BOLD_MD_TOKEN}Accepts{BOLD_MD_TOKEN}: {acceptTypes}',
values: {
BOLD_MD_TOKEN,
acceptTypes,
},
}),
getFunctionReferenceReturnsDetail: (returnType: string) =>
i18n.translate('xpack.canvas.expressionInput.functionReferenceReturns', {
defaultMessage: '{BOLD_MD_TOKEN}Returns{BOLD_MD_TOKEN}: {returnType}',
values: {
BOLD_MD_TOKEN,
returnType,
},
}),
};
/**
* Given an expression function, this function returns a markdown string

13
x-pack/plugins/canvas/public/components/function_form/function_form_context_error.tsx
View file

@ -7,16 +7,23 @@
import React, { FunctionComponent } from 'react';
import PropTypes from 'prop-types';
import { ComponentStrings } from '../../../i18n/components';
import { i18n } from '@kbn/i18n';
const strings = {
getContextErrorMessage: (errorMessage: string) =>
i18n.translate('xpack.canvas.functionForm.contextError', {
defaultMessage: 'ERROR: {errorMessage}',
values: {
errorMessage,
},
}),
};
interface Props {
context: {
error: string;
};
}
const { FunctionFormContextError: strings } = ComponentStrings;
export const FunctionFormContextError: FunctionComponent<Props> = ({ context }) => (
<div className="canvasFunctionForm canvasFunctionForm--error">
{strings.getContextErrorMessage(context.error)}

13
x-pack/plugins/canvas/public/components/function_form/function_unknown.tsx
View file

@ -7,13 +7,22 @@
import React, { FunctionComponent } from 'react';
import PropTypes from 'prop-types';
import { ComponentStrings } from '../../../i18n';
import { i18n } from '@kbn/i18n';
const strings = {
getUnknownArgumentTypeErrorMessage: (expressionType: string) =>
i18n.translate('xpack.canvas.functionForm.functionUnknown.unknownArgumentTypeError', {
defaultMessage: 'Unknown expression type "{expressionType}"',
values: {
expressionType,
},
}),
};
interface Props {
/** the type of the argument */
argType: string;
}
const { FunctionFormFunctionUnknown: strings } = ComponentStrings;
export const FunctionUnknown: FunctionComponent<Props> = ({ argType }) => (
<div className="canvasFunctionForm canvasFunctionForm--unknown-expression">

11
x-pack/plugins/canvas/public/components/help_menu/help_menu.tsx
View file

@ -7,11 +7,13 @@
import React, { FC, useState, lazy, Suspense } from 'react';
import { EuiButtonEmpty, EuiPortal, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { ExpressionFunction } from 'src/plugins/expressions';
import { ComponentStrings } from '../../../i18n';
import { KeyboardShortcutsDoc } from '../keyboard_shortcuts_doc';
let FunctionReferenceGenerator: null | React.LazyExoticComponent<any> = null;
if (process.env.NODE_ENV === 'development') {
FunctionReferenceGenerator = lazy(() =>
import('../function_reference_generator').then((module) => ({
@ -20,7 +22,12 @@ if (process.env.NODE_ENV === 'development') {
);
}
const { HelpMenu: strings } = ComponentStrings;
const strings = {
getKeyboardShortcutsLinkLabel: () =>
i18n.translate('xpack.canvas.helpMenu.keyboardShortcutsLinkLabel', {
defaultMessage: 'Keyboard shortcuts',
}),
};
interface Props {
functionRegistry: Record<string, ExpressionFunction>;

20
x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/keyboard_shortcuts_doc.tsx
View file

@ -17,14 +17,30 @@ import {
EuiSpacer,
EuiTitle,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { keymap } from '../../lib/keymap';
import { ShortcutMap, ShortcutNameSpace } from '../../../types/shortcuts';
import { getClientPlatform } from '../../lib/get_client_platform';
import { getId } from '../../lib/get_id';
import { getPrettyShortcut } from '../../lib/get_pretty_shortcut';
import { ComponentStrings } from '../../../i18n/components';
const { KeyboardShortcutsDoc: strings } = ComponentStrings;
const strings = {
getFlyoutCloseButtonAriaLabel: () =>
i18n.translate('xpack.canvas.keyboardShortcutsDoc.flyout.closeButtonAriaLabel', {
defaultMessage: 'Closes keyboard shortcuts reference',
}),
getShortcutSeparator: () =>
i18n.translate('xpack.canvas.keyboardShortcutsDoc.shortcutListSeparator', {
defaultMessage: 'or',
description:
'Separates which keyboard shortcuts can be used for a single action. Example: "{shortcut1} or {shortcut2} or {shortcut3}"',
}),
getTitle: () =>
i18n.translate('xpack.canvas.keyboardShortcutsDoc.flyoutHeaderTitle', {
defaultMessage: 'Keyboard shortcuts',
}),
};
interface DescriptionListItem {
title: string;

13
x-pack/plugins/canvas/public/components/page_config/index.js
View file

@ -7,13 +7,22 @@
import { connect } from 'react-redux';
import { get } from 'lodash';
import { i18n } from '@kbn/i18n';
import { transitionsRegistry } from '../../lib/transitions_registry';
import { getSelectedPageIndex, getPages } from '../../state/selectors/workpad';
import { stylePage, setPageTransition } from '../../state/actions/pages';
import { ComponentStrings } from '../../../i18n';
import { PageConfig as Component } from './page_config';
const { PageConfig: strings } = ComponentStrings;
const strings = {
getNoTransitionDropDownOptionLabel: () =>
i18n.translate('xpack.canvas.pageConfig.transitions.noneDropDownOptionLabel', {
defaultMessage: 'None',
description:
'This is the option the user should choose if they do not want any page transition (i.e. fade in, fade out, etc) to ' +
'be applied to the current page.',
}),
};
const mapStateToProps = (state) => {
const pageIndex = getSelectedPageIndex(state);

31
x-pack/plugins/canvas/public/components/page_config/page_config.js
View file

@ -16,10 +16,35 @@ import {
EuiToolTip,
EuiIcon,
} from '@elastic/eui';
import { WorkpadColorPicker } from '../workpad_color_picker';
import { ComponentStrings } from '../../../i18n';
import { i18n } from '@kbn/i18n';
const { PageConfig: strings } = ComponentStrings;
import { WorkpadColorPicker } from '../workpad_color_picker';
const strings = {
getBackgroundColorDescription: () =>
i18n.translate('xpack.canvas.pageConfig.backgroundColorDescription', {
defaultMessage: 'Accepts HEX, RGB or HTML color names',
}),
getBackgroundColorLabel: () =>
i18n.translate('xpack.canvas.pageConfig.backgroundColorLabel', {
defaultMessage: 'Background',
}),
getTitle: () =>
i18n.translate('xpack.canvas.pageConfig.title', {
defaultMessage: 'Page settings',
}),
getTransitionLabel: () =>
i18n.translate('xpack.canvas.pageConfig.transitionLabel', {
defaultMessage: 'Transition',
description:
'This refers to the transition effect, such as fade in or rotate, applied to a page in presentation mode.',
}),
getTransitionPreviewLabel: () =>
i18n.translate('xpack.canvas.pageConfig.transitionPreviewLabel', {
defaultMessage: 'Preview',
description: 'This is the label for a preview of the transition effect selected.',
}),
};
export const PageConfig = ({
pageIndex,

23
x-pack/plugins/canvas/public/components/page_manager/page_manager.component.tsx
View file

@ -8,7 +8,9 @@
import React, { Fragment, Component } from 'react';
import PropTypes from 'prop-types';
import { EuiIcon, EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { DragDropContext, Droppable, Draggable, DragDropContextProps } from 'react-beautiful-dnd';
// @ts-expect-error untyped dependency
import Style from 'style-it';
import { ConfirmModal } from '../confirm_modal';
@ -16,11 +18,26 @@ import { RoutingLink } from '../routing';
import { WorkpadRoutingContext } from '../../routes/workpad';
import { PagePreview } from '../page_preview';
import { ComponentStrings } from '../../../i18n';
import { CanvasPage } from '../../../types';
const { PageManager: strings } = ComponentStrings;
const strings = {
getAddPageTooltip: () =>
i18n.translate('xpack.canvas.pageManager.addPageTooltip', {
defaultMessage: 'Add a new page to this workpad',
}),
getConfirmRemoveTitle: () =>
i18n.translate('xpack.canvas.pageManager.confirmRemoveTitle', {
defaultMessage: 'Remove Page',
}),
getConfirmRemoveDescription: () =>
i18n.translate('xpack.canvas.pageManager.confirmRemoveDescription', {
defaultMessage: 'Are you sure you want to remove this page?',
}),
getConfirmRemoveButtonLabel: () =>
i18n.translate('xpack.canvas.pageManager.removeButtonLabel', {
defaultMessage: 'Remove',
}),
};
export interface Props {
isWriteable: boolean;
onAddPage: () => void;

22
x-pack/plugins/canvas/public/components/page_preview/page_controls.tsx
View file

@ -8,10 +8,26 @@
import React, { FC, ReactEventHandler } from 'react';
import PropTypes from 'prop-types';
import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { ComponentStrings } from '../../../i18n';
const { PagePreviewPageControls: strings } = ComponentStrings;
const strings = {
getClonePageAriaLabel: () =>
i18n.translate('xpack.canvas.pagePreviewPageControls.clonePageAriaLabel', {
defaultMessage: 'Clone page',
}),
getClonePageTooltip: () =>
i18n.translate('xpack.canvas.pagePreviewPageControls.clonePageTooltip', {
defaultMessage: 'Clone',
}),
getDeletePageAriaLabel: () =>
i18n.translate('xpack.canvas.pagePreviewPageControls.deletePageAriaLabel', {
defaultMessage: 'Delete page',
}),
getDeletePageTooltip: () =>
i18n.translate('xpack.canvas.pagePreviewPageControls.deletePageTooltip', {
defaultMessage: 'Delete',
}),
};
interface Props {
pageId: string;

16
x-pack/plugins/canvas/public/components/palette_picker/palette_picker.tsx
View file

@ -8,10 +8,20 @@
import React, { FC } from 'react';
import PropTypes from 'prop-types';
import { EuiColorPalettePicker, EuiColorPalettePickerPaletteProps } from '@elastic/eui';
import { palettes, ColorPalette } from '../../../common/lib/palettes';
import { ComponentStrings } from '../../../i18n';
import { i18n } from '@kbn/i18n';
const { PalettePicker: strings } = ComponentStrings;
import { palettes, ColorPalette } from '../../../common/lib/palettes';
const strings = {
getEmptyPaletteLabel: () =>
i18n.translate('xpack.canvas.palettePicker.emptyPaletteLabel', {
defaultMessage: 'None',
}),
getNoPaletteFoundErrorTitle: () =>
i18n.translate('xpack.canvas.palettePicker.noPaletteFoundErrorTitle', {
defaultMessage: 'Color palette not found',
}),
};
interface RequiredProps {
id?: string;

21
x-pack/plugins/canvas/public/components/saved_elements_modal/element_controls.tsx
View file

@ -8,9 +8,26 @@
import React, { FunctionComponent, MouseEvent } from 'react';
import PropTypes from 'prop-types';
import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
import { ComponentStrings } from '../../../i18n/components';
import { i18n } from '@kbn/i18n';
const { ElementControls: strings } = ComponentStrings;
const strings = {
getDeleteAriaLabel: () =>
i18n.translate('xpack.canvas.elementControls.deleteAriaLabel', {
defaultMessage: 'Delete element',
}),
getDeleteTooltip: () =>
i18n.translate('xpack.canvas.elementControls.deleteToolTip', {
defaultMessage: 'Delete',
}),
getEditAriaLabel: () =>
i18n.translate('xpack.canvas.elementControls.editAriaLabel', {
defaultMessage: 'Edit element',
}),
getEditTooltip: () =>
i18n.translate('xpack.canvas.elementControls.editToolTip', {
defaultMessage: 'Edit',
}),
};
interface Props {
/**

49
x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.component.tsx
View file

@ -25,14 +25,59 @@ import {
EuiSpacer,
EuiButton,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { sortBy } from 'lodash';
import { ComponentStrings } from '../../../i18n';
import { CustomElement } from '../../../types';
import { ConfirmModal } from '../confirm_modal/confirm_modal';
import { CustomElementModal } from '../custom_element_modal';
import { ElementGrid } from './element_grid';
const { SavedElementsModal: strings } = ComponentStrings;
const strings = {
getAddNewElementDescription: () =>
i18n.translate('xpack.canvas.savedElementsModal.addNewElementDescription', {
defaultMessage: 'Group and save workpad elements to create new elements',
}),
getAddNewElementTitle: () =>
i18n.translate('xpack.canvas.savedElementsModal.addNewElementTitle', {
defaultMessage: 'Add new elements',
}),
getCancelButtonLabel: () =>
i18n.translate('xpack.canvas.savedElementsModal.cancelButtonLabel', {
defaultMessage: 'Cancel',
}),
getDeleteButtonLabel: () =>
i18n.translate('xpack.canvas.savedElementsModal.deleteButtonLabel', {
defaultMessage: 'Delete',
}),
getDeleteElementDescription: () =>
i18n.translate('xpack.canvas.savedElementsModal.deleteElementDescription', {
defaultMessage: 'Are you sure you want to delete this element?',
}),
getDeleteElementTitle: (elementName: string) =>
i18n.translate('xpack.canvas.savedElementsModal.deleteElementTitle', {
defaultMessage: `Delete element '{elementName}'?`,
values: {
elementName,
},
}),
getEditElementTitle: () =>
i18n.translate('xpack.canvas.savedElementsModal.editElementTitle', {
defaultMessage: 'Edit element',
}),
getFindElementPlaceholder: () =>
i18n.translate('xpack.canvas.savedElementsModal.findElementPlaceholder', {
defaultMessage: 'Find element',
}),
getModalTitle: () =>
i18n.translate('xpack.canvas.savedElementsModal.modalTitle', {
defaultMessage: 'My elements',
}),
getSavedElementsModalCloseButtonLabel: () =>
i18n.translate('xpack.canvas.workpadHeader.addElementModalCloseButtonLabel', {
defaultMessage: 'Close',
}),
};
export interface Props {
/**

20
x-pack/plugins/canvas/public/components/sidebar/element_settings/element_settings.component.tsx
View file

@ -8,12 +8,28 @@
import React, { FunctionComponent } from 'react';
import PropTypes from 'prop-types';
import { EuiTabbedContent } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
// @ts-expect-error unconverted component
import { Datasource } from '../../datasource';
// @ts-expect-error unconverted component
import { FunctionFormList } from '../../function_form_list';
import { PositionedElement } from '../../../../types';
import { ComponentStrings } from '../../../../i18n';
const strings = {
getDataTabLabel: () =>
i18n.translate('xpack.canvas.elementSettings.dataTabLabel', {
defaultMessage: 'Data',
description:
'This tab contains the settings for the data (i.e. Elasticsearch query) used as ' +
'the source for a Canvas element',
}),
getDisplayTabLabel: () =>
i18n.translate('xpack.canvas.elementSettings.displayTabLabel', {
defaultMessage: 'Display',
description: 'This tab contains the settings for how data is displayed in a Canvas element',
}),
};
interface Props {
/**
@ -22,8 +38,6 @@ interface Props {
element: PositionedElement;
}
const { ElementSettings: strings } = ComponentStrings;
export const ElementSettings: FunctionComponent<Props> = ({ element }) => {
const tabs = [
{

16
x-pack/plugins/canvas/public/components/sidebar/group_settings.tsx
View file

@ -7,9 +7,21 @@
import React, { FunctionComponent } from 'react';
import { EuiText } from '@elastic/eui';
import { ComponentStrings } from '../../../i18n/components';
import { i18n } from '@kbn/i18n';
const { GroupSettings: strings } = ComponentStrings;
const strings = {
getSaveGroupDescription: () =>
i18n.translate('xpack.canvas.groupSettings.saveGroupDescription', {
defaultMessage: 'Save this group as a new element to re-use it throughout your workpad.',
}),
getUngroupDescription: () =>
i18n.translate('xpack.canvas.groupSettings.ungroupDescription', {
defaultMessage: 'Ungroup ({uKey}) to edit individual element settings.',
values: {
uKey: 'U',
},
}),
};
export const GroupSettings: FunctionComponent = () => (
<div className="canvasSidebar__panel canvasSidebar__panel--isEmpty">

18
x-pack/plugins/canvas/public/components/sidebar/multi_element_settings.tsx
View file

@ -7,9 +7,23 @@
import React, { FunctionComponent } from 'react';
import { EuiText } from '@elastic/eui';
import { ComponentStrings } from '../../../i18n/components';
import { i18n } from '@kbn/i18n';
const { MultiElementSettings: strings } = ComponentStrings;
const strings = {
getMultipleElementsActionsDescription: () =>
i18n.translate('xpack.canvas.groupSettings.multipleElementsActionsDescription', {
defaultMessage:
'Deselect these elements to edit their individual settings, press ({gKey}) to group them, or save this selection as a new ' +
'element to re-use it throughout your workpad.',
values: {
gKey: 'G',
},
}),
getMultipleElementsDescription: () =>
i18n.translate('xpack.canvas.groupSettings.multipleElementsDescription', {
defaultMessage: 'Multiple elements are currently selected.',
}),
};
export const MultiElementSettings: FunctionComponent = () => (
<div className="canvasSidebar__panel canvasSidebar__panel--isEmpty">

28
x-pack/plugins/canvas/public/components/sidebar/sidebar_content.js
View file

@ -9,15 +9,39 @@ import React, { Fragment } from 'react';
import { connect } from 'react-redux';
import { compose, branch, renderComponent } from 'recompose';
import { EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { getSelectedToplevelNodes, getSelectedElementId } from '../../state/selectors/workpad';
import { SidebarHeader } from '../sidebar_header';
import { ComponentStrings } from '../../../i18n';
import { MultiElementSettings } from './multi_element_settings';
import { GroupSettings } from './group_settings';
import { GlobalConfig } from './global_config';
import { ElementSettings } from './element_settings';
const { SidebarContent: strings } = ComponentStrings;
const strings = {
getGroupedElementSidebarTitle: () =>
i18n.translate('xpack.canvas.sidebarContent.groupedElementSidebarTitle', {
defaultMessage: 'Grouped element',
description:
'The title displayed when a grouped element is selected. "elements" refer to the different visualizations, images, ' +
'text, etc that can be added in a Canvas workpad. These elements can be grouped into a larger "grouped element" ' +
'that contains multiple individual elements.',
}),
getMultiElementSidebarTitle: () =>
i18n.translate('xpack.canvas.sidebarContent.multiElementSidebarTitle', {
defaultMessage: 'Multiple elements',
description:
'The title displayed when multiple elements are selected. "elements" refer to the different visualizations, images, ' +
'text, etc that can be added in a Canvas workpad.',
}),
getSingleElementSidebarTitle: () =>
i18n.translate('xpack.canvas.sidebarContent.singleElementSidebarTitle', {
defaultMessage: 'Selected element',
description:
'The title displayed when a single element are selected. "element" refer to the different visualizations, images, ' +
'text, etc that can be added in a Canvas workpad.',
}),
};
const mapStateToProps = (state) => ({
selectedToplevelNodes: getSelectedToplevelNodes(state),

23
x-pack/plugins/canvas/public/components/sidebar_header/sidebar_header.tsx
View file

@ -8,11 +8,30 @@
import React, { FunctionComponent } from 'react';
import PropTypes from 'prop-types';
import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { ToolTipShortcut } from '../tool_tip_shortcut/';
import { ComponentStrings } from '../../../i18n/components';
import { ShortcutStrings } from '../../../i18n/shortcuts';
const { SidebarHeader: strings } = ComponentStrings;
const strings = {
getBringForwardAriaLabel: () =>
i18n.translate('xpack.canvas.sidebarHeader.bringForwardArialLabel', {
defaultMessage: 'Move element up one layer',
}),
getBringToFrontAriaLabel: () =>
i18n.translate('xpack.canvas.sidebarHeader.bringToFrontArialLabel', {
defaultMessage: 'Move element to top layer',
}),
getSendBackwardAriaLabel: () =>
i18n.translate('xpack.canvas.sidebarHeader.sendBackwardArialLabel', {
defaultMessage: 'Move element down one layer',
}),
getSendToBackAriaLabel: () =>
i18n.translate('xpack.canvas.sidebarHeader.sendToBackArialLabel', {
defaultMessage: 'Move element to bottom layer',
}),
};
const shortcutHelp = ShortcutStrings.getShortcutHelp();
interface Props {

42
x-pack/plugins/canvas/public/components/text_style_picker/text_style_picker.tsx
View file

@ -8,13 +8,51 @@
import React, { FC, useState } from 'react';
import PropTypes from 'prop-types';
import { EuiFlexGroup, EuiFlexItem, EuiSelect, EuiSpacer, EuiButtonGroup } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FontValue } from 'src/plugins/expressions';
import { ComponentStrings } from '../../../i18n';
import { FontPicker } from '../font_picker';
import { ColorPickerPopover } from '../color_picker_popover';
import { fontSizes } from './font_sizes';
const { TextStylePicker: strings } = ComponentStrings;
const strings = {
getAlignCenterOption: () =>
i18n.translate('xpack.canvas.textStylePicker.alignCenterOption', {
defaultMessage: 'Align center',
}),
getAlignLeftOption: () =>
i18n.translate('xpack.canvas.textStylePicker.alignLeftOption', {
defaultMessage: 'Align left',
}),
getAlignRightOption: () =>
i18n.translate('xpack.canvas.textStylePicker.alignRightOption', {
defaultMessage: 'Align right',
}),
getAlignmentOptionsControlLegend: () =>
i18n.translate('xpack.canvas.textStylePicker.alignmentOptionsControl', {
defaultMessage: 'Alignment options',
}),
getFontColorLabel: () =>
i18n.translate('xpack.canvas.textStylePicker.fontColorLabel', {
defaultMessage: 'Font Color',
}),
getStyleBoldOption: () =>
i18n.translate('xpack.canvas.textStylePicker.styleBoldOption', {
defaultMessage: 'Bold',
}),
getStyleItalicOption: () =>
i18n.translate('xpack.canvas.textStylePicker.styleItalicOption', {
defaultMessage: 'Italic',
}),
getStyleUnderlineOption: () =>
i18n.translate('xpack.canvas.textStylePicker.styleUnderlineOption', {
defaultMessage: 'Underline',
}),
getStyleOptionsControlLegend: () =>
i18n.translate('xpack.canvas.textStylePicker.styleOptionsControl', {
defaultMessage: 'Style options',
}),
};
export interface StyleProps {
family?: FontValue;

25
x-pack/plugins/canvas/public/components/toolbar/toolbar.component.tsx
View file

@ -8,18 +8,39 @@
import React, { FC, useState, useContext, useEffect } from 'react';
import PropTypes from 'prop-types';
import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { PageManager } from '../page_manager';
import { Expression } from '../expression';
import { Tray } from './tray';
import { CanvasElement } from '../../../types';
import { ComponentStrings } from '../../../i18n';
import { RoutingButtonIcon } from '../routing';
import { WorkpadRoutingContext } from '../../routes/workpad';
const { Toolbar: strings } = ComponentStrings;
const strings = {
getEditorButtonLabel: () =>
i18n.translate('xpack.canvas.toolbar.editorButtonLabel', {
defaultMessage: 'Expression editor',
}),
getNextPageAriaLabel: () =>
i18n.translate('xpack.canvas.toolbar.nextPageAriaLabel', {
defaultMessage: 'Next Page',
}),
getPageButtonLabel: (pageNum: number, totalPages: number) =>
i18n.translate('xpack.canvas.toolbar.pageButtonLabel', {
defaultMessage: 'Page {pageNum}{rest}',
values: {
pageNum,
rest: totalPages > 1 ? ` of ${totalPages}` : '',
},
}),
getPreviousPageAriaLabel: () =>
i18n.translate('xpack.canvas.toolbar.previousPageAriaLabel', {
defaultMessage: 'Previous Page',
}),
};
type TrayType = 'pageManager' | 'expression';

9
x-pack/plugins/canvas/public/components/toolbar/tray/tray.tsx
View file

@ -8,9 +8,14 @@
import React, { ReactNode, MouseEventHandler } from 'react';
import PropTypes from 'prop-types';
import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { ComponentStrings } from '../../../../i18n';
const { ToolbarTray: strings } = ComponentStrings;
const strings = {
getCloseTrayAriaLabel: () =>
i18n.translate('xpack.canvas.toolbarTray.closeTrayAriaLabel', {
defaultMessage: 'Close tray',
}),
};
interface Props {
children: ReactNode;

23
x-pack/plugins/canvas/public/components/var_config/delete_var.tsx
View file

@ -15,10 +15,29 @@ import {
EuiSpacer,
EuiText,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { CanvasVariable } from '../../../types';
import { ComponentStrings } from '../../../i18n';
const { VarConfigDeleteVar: strings } = ComponentStrings;
const strings = {
getCancelButtonLabel: () =>
i18n.translate('xpack.canvas.varConfigDeleteVar.cancelButtonLabel', {
defaultMessage: 'Cancel',
}),
getDeleteButtonLabel: () =>
i18n.translate('xpack.canvas.varConfigDeleteVar.deleteButtonLabel', {
defaultMessage: 'Delete variable',
}),
getTitle: () =>
i18n.translate('xpack.canvas.varConfigDeleteVar.titleLabel', {
defaultMessage: 'Delete variable?',
}),
getWarningDescription: () =>
i18n.translate('xpack.canvas.varConfigDeleteVar.warningDescription', {
defaultMessage:
'Deleting this variable may adversely affect the workpad. Are you sure you wish to continue?',
}),
};
import './var_panel.scss';

55
x-pack/plugins/canvas/public/components/var_config/edit_var.tsx
View file

@ -20,12 +20,61 @@ import {
EuiSpacer,
EuiCallOut,
} from '@elastic/eui';
import { CanvasVariable } from '../../../types';
import { i18n } from '@kbn/i18n';
import { CanvasVariable } from '../../../types';
import { VarValueField } from './var_value_field';
import { ComponentStrings } from '../../../i18n';
const { VarConfigEditVar: strings } = ComponentStrings;
const strings = {
getAddTitle: () =>
i18n.translate('xpack.canvas.varConfigEditVar.addTitleLabel', {
defaultMessage: 'Add variable',
}),
getCancelButtonLabel: () =>
i18n.translate('xpack.canvas.varConfigEditVar.cancelButtonLabel', {
defaultMessage: 'Cancel',
}),
getDuplicateNameError: () =>
i18n.translate('xpack.canvas.varConfigEditVar.duplicateNameError', {
defaultMessage: 'Variable name already in use',
}),
getEditTitle: () =>
i18n.translate('xpack.canvas.varConfigEditVar.editTitleLabel', {
defaultMessage: 'Edit variable',
}),
getEditWarning: () =>
i18n.translate('xpack.canvas.varConfigEditVar.editWarning', {
defaultMessage: 'Editing a variable in use may adversely affect your workpad',
}),
getNameFieldLabel: () =>
i18n.translate('xpack.canvas.varConfigEditVar.nameFieldLabel', {
defaultMessage: 'Name',
}),
getSaveButtonLabel: () =>
i18n.translate('xpack.canvas.varConfigEditVar.saveButtonLabel', {
defaultMessage: 'Save changes',
}),
getTypeBooleanLabel: () =>
i18n.translate('xpack.canvas.varConfigEditVar.typeBooleanLabel', {
defaultMessage: 'Boolean',
}),
getTypeFieldLabel: () =>
i18n.translate('xpack.canvas.varConfigEditVar.typeFieldLabel', {
defaultMessage: 'Type',
}),
getTypeNumberLabel: () =>
i18n.translate('xpack.canvas.varConfigEditVar.typeNumberLabel', {
defaultMessage: 'Number',
}),
getTypeStringLabel: () =>
i18n.translate('xpack.canvas.varConfigEditVar.typeStringLabel', {
defaultMessage: 'String',
}),
getValueFieldLabel: () =>
i18n.translate('xpack.canvas.varConfigEditVar.valueFieldLabel', {
defaultMessage: 'Value',
}),
};
import './edit_var.scss';
import './var_panel.scss';

14
x-pack/plugins/canvas/public/components/var_config/index.tsx
View file

@ -7,12 +7,22 @@
import React, { FC } from 'react';
import copy from 'copy-to-clipboard';
import { i18n } from '@kbn/i18n';
import { VarConfig as ChildComponent } from './var_config';
import { useNotifyService } from '../../services';
import { ComponentStrings } from '../../../i18n';
import { CanvasVariable } from '../../../types';
const { VarConfig: strings } = ComponentStrings;
const strings = {
getCopyNotificationDescription: () =>
i18n.translate('xpack.canvas.varConfig.copyNotificationDescription', {
defaultMessage: 'Variable syntax copied to clipboard',
}),
getDeleteNotificationDescription: () =>
i18n.translate('xpack.canvas.varConfig.deleteNotificationDescription', {
defaultMessage: 'Variable successfully deleted',
}),
};
interface Props {
variables: CanvasVariable[];

56
x-pack/plugins/canvas/public/components/var_config/var_config.tsx
View file

@ -18,17 +18,15 @@ import {
EuiSpacer,
EuiButton,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { CanvasVariable } from '../../../types';
import { ComponentStrings } from '../../../i18n';
import { EditVar } from './edit_var';
import { DeleteVar } from './delete_var';
import './var_config.scss';
const { VarConfig: strings } = ComponentStrings;
enum PanelMode {
List,
Edit,
@ -49,6 +47,58 @@ interface Props {
onEditVar: (oldVar: CanvasVariable, newVar: CanvasVariable) => void;
}
const strings = {
getAddButtonLabel: () =>
i18n.translate('xpack.canvas.varConfig.addButtonLabel', {
defaultMessage: 'Add a variable',
}),
getAddTooltipLabel: () =>
i18n.translate('xpack.canvas.varConfig.addTooltipLabel', {
defaultMessage: 'Add a variable',
}),
getCopyActionButtonLabel: () =>
i18n.translate('xpack.canvas.varConfig.copyActionButtonLabel', {
defaultMessage: 'Copy snippet',
}),
getCopyActionTooltipLabel: () =>
i18n.translate('xpack.canvas.varConfig.copyActionTooltipLabel', {
defaultMessage: 'Copy variable syntax to clipboard',
}),
getDeleteActionButtonLabel: () =>
i18n.translate('xpack.canvas.varConfig.deleteActionButtonLabel', {
defaultMessage: 'Delete variable',
}),
getEditActionButtonLabel: () =>
i18n.translate('xpack.canvas.varConfig.editActionButtonLabel', {
defaultMessage: 'Edit variable',
}),
getEmptyDescription: () =>
i18n.translate('xpack.canvas.varConfig.emptyDescription', {
defaultMessage:
'This workpad has no variables currently. You may add variables to store and edit common values. These variables can then be used in elements or within the expression editor.',
}),
getTableNameLabel: () =>
i18n.translate('xpack.canvas.varConfig.tableNameLabel', {
defaultMessage: 'Name',
}),
getTableTypeLabel: () =>
i18n.translate('xpack.canvas.varConfig.tableTypeLabel', {
defaultMessage: 'Type',
}),
getTableValueLabel: () =>
i18n.translate('xpack.canvas.varConfig.tableValueLabel', {
defaultMessage: 'Value',
}),
getTitle: () =>
i18n.translate('xpack.canvas.varConfig.titleLabel', {
defaultMessage: 'Variables',
}),
getTitleTooltip: () =>
i18n.translate('xpack.canvas.varConfig.titleTooltip', {
defaultMessage: 'Add variables to store and edit common values',
}),
};
export const VarConfig: FC<Props> = ({
variables,
onCopyVar,

17
x-pack/plugins/canvas/public/components/var_config/var_value_field.tsx
View file

@ -8,11 +8,24 @@
import React, { FC } from 'react';
import { EuiFieldText, EuiFieldNumber, EuiButtonGroup } from '@elastic/eui';
import { htmlIdGenerator } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { CanvasVariable } from '../../../types';
import { ComponentStrings } from '../../../i18n';
const { VarConfigVarValueField: strings } = ComponentStrings;
const strings = {
getBooleanOptionsLegend: () =>
i18n.translate('xpack.canvas.varConfigVarValueField.booleanOptionsLegend', {
defaultMessage: 'Boolean value',
}),
getFalseOption: () =>
i18n.translate('xpack.canvas.varConfigVarValueField.falseOption', {
defaultMessage: 'False',
}),
getTrueOption: () =>
i18n.translate('xpack.canvas.varConfigVarValueField.trueOption', {
defaultMessage: 'True',
}),
};
interface Props {
type: CanvasVariable['type'];

9
x-pack/plugins/canvas/public/components/workpad_color_picker/workpad_color_picker.component.tsx
View file

@ -6,10 +6,15 @@
*/
import React from 'react';
import { i18n } from '@kbn/i18n';
import { ColorPickerPopover, Props } from '../color_picker_popover';
import { ComponentStrings } from '../../../i18n';
const { WorkpadConfig: strings } = ComponentStrings;
const strings = {
getBackgroundColorLabel: () =>
i18n.translate('xpack.canvas.workpadConfig.backgroundColorLabel', {
defaultMessage: 'Background color',
}),
};
export const WorkpadColorPicker = (props: Props) => {
return (

62
x-pack/plugins/canvas/public/components/workpad_config/workpad_config.component.tsx
View file

@ -22,14 +22,70 @@ import {
EuiAccordion,
EuiButton,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { VarConfig } from '../var_config';
import { DEFAULT_WORKPAD_CSS } from '../../../common/lib/constants';
import { CanvasVariable } from '../../../types';
import { ComponentStrings } from '../../../i18n';
const { WorkpadConfig: strings } = ComponentStrings;
const strings = {
getApplyStylesheetButtonLabel: () =>
i18n.translate('xpack.canvas.workpadConfig.applyStylesheetButtonLabel', {
defaultMessage: `Apply stylesheet`,
description: '"stylesheet" refers to the collection of CSS style rules entered by the user.',
}),
getFlipDimensionAriaLabel: () =>
i18n.translate('xpack.canvas.workpadConfig.swapDimensionsAriaLabel', {
defaultMessage: `Swap the page's width and height`,
}),
getFlipDimensionTooltip: () =>
i18n.translate('xpack.canvas.workpadConfig.swapDimensionsTooltip', {
defaultMessage: 'Swap the width and height',
}),
getGlobalCSSLabel: () =>
i18n.translate('xpack.canvas.workpadConfig.globalCSSLabel', {
defaultMessage: `Global CSS overrides`,
}),
getGlobalCSSTooltip: () =>
i18n.translate('xpack.canvas.workpadConfig.globalCSSTooltip', {
defaultMessage: `Apply styles to all pages in this workpad`,
}),
getNameLabel: () =>
i18n.translate('xpack.canvas.workpadConfig.nameLabel', {
defaultMessage: 'Name',
}),
getPageHeightLabel: () =>
i18n.translate('xpack.canvas.workpadConfig.heightLabel', {
defaultMessage: 'Height',
}),
getPageSizeBadgeAriaLabel: (sizeName: string) =>
i18n.translate('xpack.canvas.workpadConfig.pageSizeBadgeAriaLabel', {
defaultMessage: `Preset page size: {sizeName}`,
values: {
sizeName,
},
}),
getPageSizeBadgeOnClickAriaLabel: (sizeName: string) =>
i18n.translate('xpack.canvas.workpadConfig.pageSizeBadgeOnClickAriaLabel', {
defaultMessage: `Set page size to {sizeName}`,
values: {
sizeName,
},
}),
getPageWidthLabel: () =>
i18n.translate('xpack.canvas.workpadConfig.widthLabel', {
defaultMessage: 'Width',
}),
getTitle: () =>
i18n.translate('xpack.canvas.workpadConfig.title', {
defaultMessage: 'Workpad settings',
}),
getUSLetterButtonLabel: () =>
i18n.translate('xpack.canvas.workpadConfig.USLetterButtonLabel', {
defaultMessage: 'US Letter',
description: 'This is referring to the dimensions of U.S. standard letter paper.',
}),
};
export interface Props {
size: {

92
x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.component.tsx
View file

@ -8,7 +8,8 @@
import React, { Fragment, FunctionComponent, useState } from 'react';
import PropTypes from 'prop-types';
import { EuiButtonEmpty, EuiContextMenu, EuiIcon } from '@elastic/eui';
import { ComponentStrings } from '../../../../i18n/components';
import { i18n } from '@kbn/i18n';
import { ShortcutStrings } from '../../../../i18n/shortcuts';
import { flattenPanelTree } from '../../../lib/flatten_panel_tree';
import { Popover, ClosePopoverFn } from '../../popover';
@ -16,8 +17,95 @@ import { CustomElementModal } from '../../custom_element_modal';
import { CONTEXT_MENU_TOP_BORDER_CLASSNAME } from '../../../../common/lib/constants';
import { PositionedElement } from '../../../../types';
const { WorkpadHeaderEditMenu: strings } = ComponentStrings;
const shortcutHelp = ShortcutStrings.getShortcutHelp();
const strings = {
getAlignmentMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderEditMenu.alignmentMenuItemLabel', {
defaultMessage: 'Alignment',
description:
'This refers to the vertical (i.e. left, center, right) and horizontal (i.e. top, middle, bottom) ' +
'alignment options of the selected elements',
}),
getBottomAlignMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderEditMenu.bottomAlignMenuItemLabel', {
defaultMessage: 'Bottom',
}),
getCenterAlignMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderEditMenu.centerAlignMenuItemLabel', {
defaultMessage: 'Center',
description: 'This refers to alignment centered horizontally.',
}),
getCreateElementModalTitle: () =>
i18n.translate('xpack.canvas.workpadHeaderEditMenu.createElementModalTitle', {
defaultMessage: 'Create new element',
}),
getDistributionMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderEditMenu.distributionMenutItemLabel', {
defaultMessage: 'Distribution',
description:
'This refers to the options to evenly spacing the selected elements horizontall or vertically.',
}),
getEditMenuButtonLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderEditMenu.editMenuButtonLabel', {
defaultMessage: 'Edit',
}),
getEditMenuLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderEditMenu.editMenuLabel', {
defaultMessage: 'Edit options',
}),
getGroupMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderEditMenu.groupMenuItemLabel', {
defaultMessage: 'Group',
description: 'This refers to grouping multiple selected elements.',
}),
getHorizontalDistributionMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderEditMenu.horizontalDistributionMenutItemLabel', {
defaultMessage: 'Horizontal',
}),
getLeftAlignMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderEditMenu.leftAlignMenuItemLabel', {
defaultMessage: 'Left',
}),
getMiddleAlignMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderEditMenu.middleAlignMenuItemLabel', {
defaultMessage: 'Middle',
description: 'This refers to alignment centered vertically.',
}),
getOrderMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderEditMenu.orderMenuItemLabel', {
defaultMessage: 'Order',
description: 'Refers to the order of the elements displayed on the page from front to back',
}),
getRedoMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderEditMenu.redoMenuItemLabel', {
defaultMessage: 'Redo',
}),
getRightAlignMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderEditMenu.rightAlignMenuItemLabel', {
defaultMessage: 'Right',
}),
getSaveElementMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderEditMenu.savedElementMenuItemLabel', {
defaultMessage: 'Save as new element',
}),
getTopAlignMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderEditMenu.topAlignMenuItemLabel', {
defaultMessage: 'Top',
}),
getUndoMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderEditMenu.undoMenuItemLabel', {
defaultMessage: 'Undo',
}),
getUngroupMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderEditMenu.ungroupMenuItemLabel', {
defaultMessage: 'Ungroup',
description: 'This refers to ungrouping a grouped element',
}),
getVerticalDistributionMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderEditMenu.verticalDistributionMenutItemLabel', {
defaultMessage: 'Vertical',
}),
};
export interface Props {
/**

54
x-pack/plugins/canvas/public/components/workpad_header/element_menu/element_menu.component.tsx
View file

@ -14,8 +14,9 @@ import {
EuiIcon,
EuiContextMenuPanelItemDescriptor,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { CONTEXT_MENU_TOP_BORDER_CLASSNAME } from '../../../../common/lib';
import { ComponentStrings } from '../../../../i18n/components';
import { ElementSpec } from '../../../../types';
import { flattenPanelTree } from '../../../lib/flatten_panel_tree';
import { getId } from '../../../lib/get_id';
@ -31,7 +32,56 @@ interface ElementTypeMeta {
[key: string]: { name: string; icon: string };
}
export const { WorkpadHeaderElementMenu: strings } = ComponentStrings;
const strings = {
getAssetsMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderElementMenu.manageAssetsMenuItemLabel', {
defaultMessage: 'Manage assets',
}),
getChartMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderElementMenu.chartMenuItemLabel', {
defaultMessage: 'Chart',
}),
getElementMenuButtonLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderElementMenu.elementMenuButtonLabel', {
defaultMessage: 'Add element',
}),
getElementMenuLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderElementMenu.elementMenuLabel', {
defaultMessage: 'Add an element',
}),
getEmbedObjectMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderElementMenu.embedObjectMenuItemLabel', {
defaultMessage: 'Add from Kibana',
}),
getFilterMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderElementMenu.filterMenuItemLabel', {
defaultMessage: 'Filter',
}),
getImageMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderElementMenu.imageMenuItemLabel', {
defaultMessage: 'Image',
}),
getMyElementsMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderElementMenu.myElementsMenuItemLabel', {
defaultMessage: 'My elements',
}),
getOtherMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderElementMenu.otherMenuItemLabel', {
defaultMessage: 'Other',
}),
getProgressMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderElementMenu.progressMenuItemLabel', {
defaultMessage: 'Progress',
}),
getShapeMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderElementMenu.shapeMenuItemLabel', {
defaultMessage: 'Shape',
}),
getTextMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderElementMenu.textMenuItemLabel', {
defaultMessage: 'Text',
}),
};
// label and icon for the context menu item for each element type
const elementTypeMeta: ElementTypeMeta = {

10
x-pack/plugins/canvas/public/components/workpad_header/labs_control/labs_control.tsx
View file

@ -7,15 +7,21 @@
import React, { useState } from 'react';
import { EuiButtonEmpty, EuiNotificationBadge } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import {
LazyLabsFlyout,
withSuspense,
} from '../../../../../../../src/plugins/presentation_util/public';
import { ComponentStrings } from '../../../../i18n';
import { useLabsService } from '../../../services';
const { LabsControl: strings } = ComponentStrings;
const strings = {
getLabsButtonLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderLabsControlSettings.labsButtonLabel', {
defaultMessage: 'Labs',
}),
};
const Flyout = withSuspense(LazyLabsFlyout, null);

14
x-pack/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.component.tsx
View file

@ -8,10 +8,20 @@
import React, { MouseEventHandler } from 'react';
import PropTypes from 'prop-types';
import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { ToolTipShortcut } from '../../tool_tip_shortcut';
import { ComponentStrings } from '../../../../i18n';
const { WorkpadHeaderRefreshControlSettings: strings } = ComponentStrings;
const strings = {
getRefreshAriaLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderRefreshControlSettings.refreshAriaLabel', {
defaultMessage: 'Refresh Elements',
}),
getRefreshTooltip: () =>
i18n.translate('xpack.canvas.workpadHeaderRefreshControlSettings.refreshTooltip', {
defaultMessage: 'Refresh data',
}),
};
export interface Props {
doRefresh: MouseEventHandler<HTMLButtonElement>;

34
x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/flyout.component.tsx
View file

@ -21,16 +21,46 @@ import {
EuiFlexGroup,
EuiFlexItem,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { ComponentStrings } from '../../../../../i18n/components';
import { ZIP, CANVAS, HTML } from '../../../../../i18n/constants';
import { OnCloseFn } from '../share_menu.component';
import { WorkpadStep } from './workpad_step';
import { RuntimeStep } from './runtime_step';
import { SnippetsStep } from './snippets_step';
const { ShareWebsiteFlyout: strings } = ComponentStrings;
const strings = {
getRuntimeStepTitle: () =>
i18n.translate('xpack.canvas.shareWebsiteFlyout.snippetsStep.downloadRuntimeTitle', {
defaultMessage: 'Download runtime',
}),
getSnippentsStepTitle: () =>
i18n.translate('xpack.canvas.shareWebsiteFlyout.snippetsStep.addSnippetsTitle', {
defaultMessage: 'Add snippets to website',
}),
getStepsDescription: () =>
i18n.translate('xpack.canvas.shareWebsiteFlyout.description', {
defaultMessage:
'Follow these steps to share a static version of this workpad on an external website. It will be a visual snapshot of the current workpad, and will not have access to live data.',
}),
getTitle: () =>
i18n.translate('xpack.canvas.shareWebsiteFlyout.flyoutTitle', {
defaultMessage: 'Share on a website',
}),
getUnsupportedRendererWarning: () =>
i18n.translate('xpack.canvas.workpadHeaderShareMenu.unsupportedRendererWarning', {
defaultMessage:
'This workpad contains render functions that are not supported by the {CANVAS} Shareable Workpad Runtime. These elements will not be rendered:',
values: {
CANVAS,
},
}),
getWorkpadStepTitle: () =>
i18n.translate('xpack.canvas.shareWebsiteFlyout.snippetsStep.downloadWorkpadTitle', {
defaultMessage: 'Download workpad',
}),
};
export type OnDownloadFn = (type: 'share' | 'shareRuntime' | 'shareZip') => void;
export type OnCopyFn = () => void;

27
x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/flyout.ts
View file

@ -7,6 +7,8 @@
import { connect } from 'react-redux';
import { compose, withProps } from 'recompose';
import { i18n } from '@kbn/i18n';
import {
getWorkpad,
getRenderedWorkpad,
@ -24,14 +26,35 @@ import { arrayBufferFetch } from '../../../../../common/lib/fetch';
import { API_ROUTE_SHAREABLE_ZIP } from '../../../../../common/lib/constants';
import { renderFunctionNames } from '../../../../../shareable_runtime/supported_renderers';
import { ComponentStrings } from '../../../../../i18n/components';
import { withKibana } from '../../../../../../../../src/plugins/kibana_react/public/';
import { OnCloseFn } from '../share_menu.component';
import { ZIP } from '../../../../../i18n/constants';
import { WithKibanaProps } from '../../../../index';
export { OnDownloadFn, OnCopyFn } from './flyout.component';
const { WorkpadHeaderShareMenu: strings } = ComponentStrings;
const strings = {
getCopyShareConfigMessage: () =>
i18n.translate('xpack.canvas.workpadHeaderShareMenu.copyShareConfigMessage', {
defaultMessage: 'Copied share markup to clipboard',
}),
getShareableZipErrorTitle: (workpadName: string) =>
i18n.translate('xpack.canvas.workpadHeaderShareMenu.shareWebsiteErrorTitle', {
defaultMessage:
"Failed to create {ZIP} file for '{workpadName}'. The workpad may be too large. You'll need to download the files separately.",
values: {
ZIP,
workpadName,
},
}),
getUnknownExportErrorMessage: (type: string) =>
i18n.translate('xpack.canvas.workpadHeaderShareMenu.unknownExportErrorMessage', {
defaultMessage: 'Unknown export type: {type}',
values: {
type,
},
}),
};
const getUnsupportedRenderers = (state: State) => {
const renderers: string[] = [];

18
x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/runtime_step.tsx
View file

@ -7,12 +7,26 @@
import React, { FC } from 'react';
import { EuiText, EuiSpacer, EuiButton } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { ComponentStrings } from '../../../../../i18n/components';
import { CANVAS } from '../../../../../i18n/constants';
import { OnDownloadFn } from './flyout';
const { ShareWebsiteRuntimeStep: strings } = ComponentStrings;
const strings = {
getDownloadLabel: () =>
i18n.translate('xpack.canvas.shareWebsiteFlyout.runtimeStep.downloadLabel', {
defaultMessage: 'Download runtime',
}),
getStepDescription: () =>
i18n.translate('xpack.canvas.shareWebsiteFlyout.runtimeStep.description', {
defaultMessage:
'In order to render a Shareable Workpad, you also need to include the {CANVAS} Shareable Workpad Runtime. You can skip this step if the runtime is already included on your website.',
values: {
CANVAS,
},
}),
};
export const RuntimeStep: FC<{ onDownload: OnDownloadFn }> = ({ onDownload }) => (
<EuiText size="s">

82
x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/snippets_step.tsx
View file

@ -16,13 +16,91 @@ import {
EuiDescriptionListDescription,
EuiHorizontalRule,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { ComponentStrings } from '../../../../../i18n/components';
import { CANVAS, URL, JSON } from '../../../../../i18n/constants';
import { Clipboard } from '../../../clipboard';
import { OnCopyFn } from './flyout';
const { ShareWebsiteSnippetsStep: strings } = ComponentStrings;
const strings = {
getAutoplayParameterDescription: () =>
i18n.translate('xpack.canvas.shareWebsiteFlyout.snippetsStep.autoplayParameterDescription', {
defaultMessage: 'Should the runtime automatically move through the pages of the workpad?',
}),
getCallRuntimeLabel: () =>
i18n.translate('xpack.canvas.shareWebsiteFlyout.snippetsStep.callRuntimeLabel', {
defaultMessage: 'Call Runtime',
}),
getHeightParameterDescription: () =>
i18n.translate('xpack.canvas.shareWebsiteFlyout.snippetsStep.heightParameterDescription', {
defaultMessage: 'The height of the Workpad. Defaults to the Workpad height.',
}),
getIncludeRuntimeLabel: () =>
i18n.translate('xpack.canvas.shareWebsiteFlyout.snippetsStep.includeRuntimeLabel', {
defaultMessage: 'Include Runtime',
}),
getIntervalParameterDescription: () =>
i18n.translate('xpack.canvas.shareWebsiteFlyout.snippetsStep.intervalParameterDescription', {
defaultMessage:
'The interval upon which the pages will advance in time format, (e.g. {twoSeconds}, {oneMinute})',
values: {
twoSeconds: '2s',
oneMinute: '1m',
},
}),
getPageParameterDescription: () =>
i18n.translate('xpack.canvas.shareWebsiteFlyout.snippetsStep.pageParameterDescription', {
defaultMessage: 'The page to display. Defaults to the page specified by the Workpad.',
}),
getParametersDescription: () =>
i18n.translate('xpack.canvas.shareWebsiteFlyout.snippetsStep.parametersDescription', {
defaultMessage: 'There are a number of inline parameters to configure the Shareable Workpad.',
}),
getParametersTitle: () =>
i18n.translate('xpack.canvas.shareWebsiteFlyout.snippetsStep.parametersLabel', {
defaultMessage: 'Parameters',
}),
getPlaceholderLabel: () =>
i18n.translate('xpack.canvas.shareWebsiteFlyout.snippetsStep.placeholderLabel', {
defaultMessage: 'Placeholder',
}),
getRequiredLabel: () =>
i18n.translate('xpack.canvas.shareWebsiteFlyout.snippetsStep.requiredLabel', {
defaultMessage: 'required',
}),
getShareableParameterDescription: () =>
i18n.translate('xpack.canvas.shareWebsiteFlyout.snippetsStep.shareableParameterDescription', {
defaultMessage: 'The type of shareable. In this case, a {CANVAS} Workpad.',
values: {
CANVAS,
},
}),
getSnippetsStepDescription: () =>
i18n.translate('xpack.canvas.shareWebsiteFlyout.snippetsStep.description', {
defaultMessage:
'The Workpad is placed within the {HTML} of the site by using an {HTML} placeholder. Parameters for the runtime are included inline. See the full list of parameters below. You can include more than one workpad on the page.',
values: {
HTML,
},
}),
getToolbarParameterDescription: () =>
i18n.translate('xpack.canvas.shareWebsiteFlyout.snippetsStep.toolbarParameterDescription', {
defaultMessage: 'Should the toolbar be hidden?',
}),
getUrlParameterDescription: () =>
i18n.translate('xpack.canvas.shareWebsiteFlyout.snippetsStep.urlParameterDescription', {
defaultMessage: 'The {URL} of the Shareable Workpad {JSON} file.',
values: {
URL,
JSON,
},
}),
getWidthParameterDescription: () =>
i18n.translate('xpack.canvas.shareWebsiteFlyout.snippetsStep.widthParameterDescription', {
defaultMessage: 'The width of the Workpad. Defaults to the Workpad width.',
}),
};
const HTML = `<!-- ${strings.getIncludeRuntimeLabel()} -->
<script src="kbn_canvas.js"></script>

18
x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/workpad_step.tsx
View file

@ -7,12 +7,26 @@
import React, { FC } from 'react';
import { EuiText, EuiSpacer, EuiButton } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { ComponentStrings } from '../../../../../i18n/components';
import { JSON } from '../../../../../i18n/constants';
import { OnDownloadFn } from './flyout';
const { ShareWebsiteWorkpadStep: strings } = ComponentStrings;
const strings = {
getDownloadLabel: () =>
i18n.translate('xpack.canvas.shareWebsiteFlyout.workpadStep.downloadLabel', {
defaultMessage: 'Download workpad',
}),
getStepDescription: () =>
i18n.translate('xpack.canvas.shareWebsiteFlyout.workpadStep.description', {
defaultMessage:
'The workpad will be exported as a single {JSON} file for sharing in another site.',
values: {
JSON,
},
}),
};
export const WorkpadStep: FC<{ onDownload: OnDownloadFn }> = ({ onDownload }) => (
<EuiText size="s">

39
x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.component.tsx
View file

@ -5,18 +5,47 @@
* 2.0.
*/
import { EuiButtonEmpty, EuiContextMenu, EuiIcon } from '@elastic/eui';
import { IBasePath } from 'kibana/public';
import PropTypes from 'prop-types';
import React, { FunctionComponent, useState } from 'react';
import PropTypes from 'prop-types';
import { EuiButtonEmpty, EuiContextMenu, EuiIcon } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { IBasePath } from 'kibana/public';
import { ReportingStart } from '../../../../../reporting/public';
import { ComponentStrings } from '../../../../i18n/components';
import { PDF, JSON } from '../../../../i18n/constants';
import { flattenPanelTree } from '../../../lib/flatten_panel_tree';
import { ClosePopoverFn, Popover } from '../../popover';
import { ShareWebsiteFlyout } from './flyout';
import { CanvasWorkpadSharingData, getPdfJobParams } from './utils';
const { WorkpadHeaderShareMenu: strings } = ComponentStrings;
const strings = {
getShareDownloadJSONTitle: () =>
i18n.translate('xpack.canvas.workpadHeaderShareMenu.shareDownloadJSONTitle', {
defaultMessage: 'Download as {JSON}',
values: {
JSON,
},
}),
getShareDownloadPDFTitle: () =>
i18n.translate('xpack.canvas.workpadHeaderShareMenu.shareDownloadPDFTitle', {
defaultMessage: '{PDF} reports',
values: {
PDF,
},
}),
getShareMenuButtonLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderShareMenu.shareMenuButtonLabel', {
defaultMessage: 'Share',
}),
getShareWebsiteTitle: () =>
i18n.translate('xpack.canvas.workpadHeaderShareMenu.shareWebsiteTitle', {
defaultMessage: 'Share on a website',
}),
getShareWorkpadMessage: () =>
i18n.translate('xpack.canvas.workpadHeaderShareMenu.shareWorkpadMessage', {
defaultMessage: 'Share this workpad',
}),
};
type CopyTypes = 'pdf' | 'reportingConfig';
type ExportTypes = 'pdf' | 'json';

13
x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.ts
View file

@ -7,14 +7,23 @@
import { connect } from 'react-redux';
import { compose, withProps } from 'recompose';
import { ComponentStrings } from '../../../../i18n';
import { i18n } from '@kbn/i18n';
import { CanvasWorkpad, State } from '../../../../types';
import { downloadWorkpad } from '../../../lib/download_workpad';
import { withServices, WithServicesProps } from '../../../services';
import { getPages, getWorkpad } from '../../../state/selectors/workpad';
import { Props as ComponentProps, ShareMenu as Component } from './share_menu.component';
const { WorkpadHeaderShareMenu: strings } = ComponentStrings;
const strings = {
getUnknownExportErrorMessage: (type: string) =>
i18n.translate('xpack.canvas.workpadHeaderShareMenu.unknownExportErrorMessage', {
defaultMessage: 'Unknown export type: {type}',
values: {
type,
},
}),
};
const mapStateToProps = (state: State) => ({
workpad: getWorkpad(state),

24
x-pack/plugins/canvas/public/components/workpad_header/view_menu/auto_refresh_controls.tsx
View file

@ -22,14 +22,34 @@ import {
EuiToolTip,
htmlIdGenerator,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { timeDuration } from '../../../lib/time_duration';
import { UnitStrings } from '../../../../i18n';
import { CustomInterval } from './custom_interval';
import { ComponentStrings, UnitStrings } from '../../../../i18n';
const { WorkpadHeaderAutoRefreshControls: strings } = ComponentStrings;
const { time: timeStrings } = UnitStrings;
const { getSecondsText, getMinutesText, getHoursText } = timeStrings;
const strings = {
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',
}),
};
interface Props {
refreshInterval: number;
setRefresh: (interval: number) => void;

23
x-pack/plugins/canvas/public/components/workpad_header/view_menu/custom_interval.tsx
View file

@ -8,12 +8,31 @@
import React, { useState, ChangeEvent } from 'react';
import PropTypes from 'prop-types';
import { EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiButton, EuiFieldText } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
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';
import { ComponentStrings } from '../../../../i18n';
const { WorkpadHeaderCustomInterval: strings } = ComponentStrings;
const strings = {
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',
}),
};
interface Props {
gutterSize: FlexGroupGutterSize;

24
x-pack/plugins/canvas/public/components/workpad_header/view_menu/kiosk_controls.tsx
View file

@ -22,14 +22,34 @@ import {
EuiFlexGroup,
htmlIdGenerator,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { timeDuration } from '../../../lib/time_duration';
import { UnitStrings } from '../../../../i18n';
import { CustomInterval } from './custom_interval';
import { ComponentStrings, UnitStrings } from '../../../../i18n';
const { WorkpadHeaderKioskControls: strings } = ComponentStrings;
const { time: timeStrings } = UnitStrings;
const { getSecondsText, getMinutesText } = timeStrings;
const strings = {
getCycleFormLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderKioskControl.cycleFormLabel', {
defaultMessage: 'Change cycling interval',
}),
getTitle: () =>
i18n.translate('xpack.canvas.workpadHeaderKioskControl.controlTitle', {
defaultMessage: 'Cycle fullscreen pages',
}),
getAutoplayListDurationManualText: () =>
i18n.translate('xpack.canvas.workpadHeaderKioskControl.autoplayListDurationManual', {
defaultMessage: 'Manually',
}),
getDisableTooltip: () =>
i18n.translate('xpack.canvas.workpadHeaderKioskControl.disableTooltip', {
defaultMessage: 'Disable auto-play',
}),
};
interface Props {
autoplayInterval: number;
onSetInterval: (interval: number) => void;

66
x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.component.tsx
View file

@ -13,18 +13,80 @@ import {
EuiIcon,
EuiContextMenuPanelItemDescriptor,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import {
MAX_ZOOM_LEVEL,
MIN_ZOOM_LEVEL,
CONTEXT_MENU_TOP_BORDER_CLASSNAME,
} from '../../../../common/lib/constants';
import { ComponentStrings } from '../../../../i18n/components';
import { flattenPanelTree } from '../../../lib/flatten_panel_tree';
import { Popover, ClosePopoverFn } from '../../popover';
import { AutoRefreshControls } from './auto_refresh_controls';
import { KioskControls } from './kiosk_controls';
const { WorkpadHeaderViewMenu: strings } = ComponentStrings;
const strings = {
getAutoplaySettingsMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderViewMenu.autoplaySettingsMenuItemLabel', {
defaultMessage: 'Autoplay settings',
}),
getFullscreenMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderViewMenu.fullscreenMenuLabel', {
defaultMessage: 'Enter fullscreen mode',
}),
getHideEditModeLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderViewMenu.hideEditModeLabel', {
defaultMessage: 'Hide editing controls',
}),
getRefreshMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderViewMenu.refreshMenuItemLabel', {
defaultMessage: 'Refresh data',
}),
getRefreshSettingsMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderViewMenu.refreshSettingsMenuItemLabel', {
defaultMessage: 'Auto refresh settings',
}),
getShowEditModeLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderViewMenu.showEditModeLabel', {
defaultMessage: 'Show editing controls',
}),
getViewMenuButtonLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderViewMenu.viewMenuButtonLabel', {
defaultMessage: 'View',
}),
getViewMenuLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderViewMenu.viewMenuLabel', {
defaultMessage: 'View options',
}),
getZoomFitToWindowText: () =>
i18n.translate('xpack.canvas.workpadHeaderViewMenu.zoomFitToWindowText', {
defaultMessage: 'Fit to window',
}),
getZoomInText: () =>
i18n.translate('xpack.canvas.workpadHeaderViewMenu.zoomInText', {
defaultMessage: 'Zoom in',
}),
getZoomMenuItemLabel: () =>
i18n.translate('xpack.canvas.workpadHeaderViewMenu.zoomMenuItemLabel', {
defaultMessage: 'Zoom',
}),
getZoomOutText: () =>
i18n.translate('xpack.canvas.workpadHeaderViewMenu.zoomOutText', {
defaultMessage: 'Zoom out',
}),
getZoomPercentage: (scale: number) =>
i18n.translate('xpack.canvas.workpadHeaderViewMenu.zoomResetText', {
defaultMessage: '{scalePercentage}%',
values: {
scalePercentage: scale * 100,
},
}),
getZoomResetText: () =>
i18n.translate('xpack.canvas.workpadHeaderViewMenu.zoomPrecentageValue', {
defaultMessage: 'Reset',
}),
};
const QUICK_ZOOM_LEVELS = [0.5, 1, 2];

26
x-pack/plugins/canvas/public/components/workpad_header/workpad_header.component.tsx
View file

@ -10,7 +10,8 @@ import PropTypes from 'prop-types';
// @ts-expect-error no @types definition
import { Shortcuts } from 'react-shortcuts';
import { EuiFlexItem, EuiFlexGroup, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
import { ComponentStrings } from '../../../i18n';
import { i18n } from '@kbn/i18n';
import { ToolTipShortcut } from '../tool_tip_shortcut/';
import { RefreshControl } from './refresh_control';
// @ts-expect-error untyped local
@ -22,7 +23,28 @@ import { ViewMenu } from './view_menu';
import { LabsControl } from './labs_control';
import { CommitFn } from '../../../types';
const { WorkpadHeader: strings } = ComponentStrings;
const strings = {
getFullScreenButtonAriaLabel: () =>
i18n.translate('xpack.canvas.workpadHeader.fullscreenButtonAriaLabel', {
defaultMessage: 'View fullscreen',
}),
getFullScreenTooltip: () =>
i18n.translate('xpack.canvas.workpadHeader.fullscreenTooltip', {
defaultMessage: 'Enter fullscreen mode',
}),
getHideEditControlTooltip: () =>
i18n.translate('xpack.canvas.workpadHeader.hideEditControlTooltip', {
defaultMessage: 'Hide editing controls',
}),
getNoWritePermissionTooltipText: () =>
i18n.translate('xpack.canvas.workpadHeader.noWritePermissionTooltip', {
defaultMessage: "You don't have permission to edit this workpad",
}),
getShowEditControlTooltip: () =>
i18n.translate('xpack.canvas.workpadHeader.showEditControlTooltip', {
defaultMessage: 'Show editing controls',
}),
};
export interface Props {
isWriteable: boolean;

35
x-pack/plugins/translations/translations/ja-JP.json
View file

@ -5976,9 +5976,6 @@
"xpack.banners.settings.textColor.description": "バナーテキストの色を設定します。{subscriptionLink}",
"xpack.banners.settings.textColor.title": "バナーテキスト色",
"xpack.banners.settings.textContent.title": "バナーテキスト",
"xpack.canvas.app.loadErrorMessage": "メッセージ：{error}",
"xpack.canvas.app.loadErrorTitle": "Canvas の読み込みに失敗",
"xpack.canvas.app.loadingMessage": "Canvas を読み込み中",
"xpack.canvas.appDescription": "データを完璧に美しく表現します。",
"xpack.canvas.argAddPopover.addAriaLabel": "引数を追加",
"xpack.canvas.argFormAdvancedFailure.applyButtonLabel": "適用",
@ -5996,8 +5993,6 @@
"xpack.canvas.asset.deleteAssetTooltip": "削除",
"xpack.canvas.asset.downloadAssetTooltip": "ダウンロード",
"xpack.canvas.asset.thumbnailAltText": "アセットのサムネイル",
"xpack.canvas.assetManager.manageButtonLabel": "アセットの管理",
"xpack.canvas.assetModal.copyAssetMessage": "「{id}」をクリップボードにコピーしました",
"xpack.canvas.assetModal.emptyAssetsDescription": "アセットをインポートして開始します",
"xpack.canvas.assetModal.filePickerPromptText": "画像を選択するかドラッグ &amp;amp; ドロップしてください",
"xpack.canvas.assetModal.loadingText": "画像をアップロード中",
@ -6020,7 +6015,6 @@
"xpack.canvas.customElementModal.nameInputLabel": "名前",
"xpack.canvas.customElementModal.remainingCharactersDescription": "残り {numberOfRemainingCharacter} 文字",
"xpack.canvas.customElementModal.saveButtonLabel": "保存",
"xpack.canvas.datasourceDatasourceComponent.changeButtonLabel": "要素データソースの変更",
"xpack.canvas.datasourceDatasourceComponent.expressionArgDescription": "データソースの引数は式で制御されます。式エディターを使用して、データソースを修正します。",
"xpack.canvas.datasourceDatasourceComponent.previewButtonLabel": "データをプレビュー",
"xpack.canvas.datasourceDatasourceComponent.saveButtonLabel": "保存",
@ -6449,8 +6443,6 @@
"xpack.canvas.groupSettings.saveGroupDescription": "ワークパッド全体で再利用できるように、このグループを新規エレメントとして保存します。",
"xpack.canvas.groupSettings.ungroupDescription": "個々のエレメントの設定を編集できるように、 ({uKey}) のグループを解除します。",
"xpack.canvas.helpMenu.appName": "Canvas",
"xpack.canvas.helpMenu.description": "{CANVAS} に関する情報",
"xpack.canvas.helpMenu.documentationLinkLabel": "{CANVAS} ドキュメント",
"xpack.canvas.helpMenu.keyboardShortcutsLinkLabel": "キーボードショートカット",
"xpack.canvas.home.myWorkpadsTabLabel": "マイワークパッド",
"xpack.canvas.home.workpadTemplatesTabLabel": "テンプレート",
@ -6517,7 +6509,6 @@
"xpack.canvas.lib.palettes.yellowBlueLabel": "黄、青",
"xpack.canvas.lib.palettes.yellowGreenLabel": "黄、緑",
"xpack.canvas.lib.palettes.yellowRedLabel": "黄、赤",
"xpack.canvas.link.errorMessage": "リンクエラー：{message}",
"xpack.canvas.pageConfig.backgroundColorDescription": "HEX、RGB、また HTML 色名が使用できます",
"xpack.canvas.pageConfig.backgroundColorLabel": "背景",
"xpack.canvas.pageConfig.title": "ページ設定",
@ -6527,7 +6518,6 @@
"xpack.canvas.pageManager.addPageTooltip": "新しいページをこのワークパッドに追加",
"xpack.canvas.pageManager.confirmRemoveDescription": "このページを削除してよろしいですか？",
"xpack.canvas.pageManager.confirmRemoveTitle": "ページを削除",
"xpack.canvas.pageManager.pageNumberAriaLabel": "ページ番号 {pageNumber} を読み込む",
"xpack.canvas.pageManager.removeButtonLabel": "削除",
"xpack.canvas.pagePreviewPageControls.clonePageAriaLabel": "ページのクローンを作成",
"xpack.canvas.pagePreviewPageControls.clonePageTooltip": "クローンを作成",
@ -6579,10 +6569,8 @@
"xpack.canvas.savedElementsModal.deleteElementDescription": "このエレメントを削除してよろしいですか？",
"xpack.canvas.savedElementsModal.deleteElementTitle": "要素'{elementName}'を削除しますか？",
"xpack.canvas.savedElementsModal.editElementTitle": "エレメントを編集",
"xpack.canvas.savedElementsModal.elementsTitle": "エレメント",
"xpack.canvas.savedElementsModal.findElementPlaceholder": "エレメントを検索",
"xpack.canvas.savedElementsModal.modalTitle": "マイエレメント",
"xpack.canvas.savedElementsModal.myElementsTitle": "マイエレメント",
"xpack.canvas.shareWebsiteFlyout.description": "外部 Web サイトでこのワークパッドの不動バージョンを共有するには、これらの手順に従ってください。現在のワークパッドのビジュアルスナップショットになり、ライブデータにはアクセスできません。",
"xpack.canvas.shareWebsiteFlyout.flyoutCalloutDescription": "共有するには、このワークパッド、{CANVAS} シェアラブルワークパッドランタイム、サンプル {HTML} ファイルを含む {link} を使用します。",
"xpack.canvas.shareWebsiteFlyout.flyoutTitle": "Webサイトで共有",
@ -6637,13 +6625,10 @@
"xpack.canvas.textStylePicker.styleItalicOption": "斜体",
"xpack.canvas.textStylePicker.styleOptionsControl": "スタイルオプション",
"xpack.canvas.textStylePicker.styleUnderlineOption": "下線",
"xpack.canvas.timePicker.applyButtonLabel": "適用",
"xpack.canvas.toolbar.editorButtonLabel": "表現エディター",
"xpack.canvas.toolbar.errorMessage": "ツールバーエラー：{message}",
"xpack.canvas.toolbar.nextPageAriaLabel": "次のページ",
"xpack.canvas.toolbar.pageButtonLabel": "{pageNum}{rest} ページ",
"xpack.canvas.toolbar.previousPageAriaLabel": "前のページ",
"xpack.canvas.toolbar.workpadManagerCloseButtonLabel": "閉じる",
"xpack.canvas.toolbarTray.closeTrayAriaLabel": "トレイのクローンを作成",
"xpack.canvas.transitions.fade.displayName": "フェード",
"xpack.canvas.transitions.fade.help": "ページからページへフェードします",
@ -6905,20 +6890,8 @@
"xpack.canvas.units.quickRange.today": "今日",
"xpack.canvas.units.quickRange.yesterday": "昨日",
"xpack.canvas.useCloneWorkpad.clonedWorkpadName": "{workpadName} のコピー",
"xpack.canvas.varConfig.addButtonLabel": "変数の追加",
"xpack.canvas.varConfig.addTooltipLabel": "変数の追加",
"xpack.canvas.varConfig.copyActionButtonLabel": "スニペットをコピー",
"xpack.canvas.varConfig.copyActionTooltipLabel": "変数構文をクリップボードにコピー",
"xpack.canvas.varConfig.copyNotificationDescription": "変数構文がクリップボードにコピーされました",
"xpack.canvas.varConfig.deleteActionButtonLabel": "変数の削除",
"xpack.canvas.varConfig.deleteNotificationDescription": "変数の削除が正常に完了しました",
"xpack.canvas.varConfig.editActionButtonLabel": "変数の編集",
"xpack.canvas.varConfig.emptyDescription": "このワークパッドには現在変数がありません。変数を追加して、共通の値を格納したり、編集したりすることができます。これらの変数は、要素または式エディターで使用できます。",
"xpack.canvas.varConfig.tableNameLabel": "名前",
"xpack.canvas.varConfig.tableTypeLabel": "型",
"xpack.canvas.varConfig.tableValueLabel": "値",
"xpack.canvas.varConfig.titleLabel": "変数",
"xpack.canvas.varConfig.titleTooltip": "変数を追加して、共通の値を格納したり、編集したりします",
"xpack.canvas.varConfigDeleteVar.cancelButtonLabel": "キャンセル",
"xpack.canvas.varConfigDeleteVar.deleteButtonLabel": "変数の削除",
"xpack.canvas.varConfigDeleteVar.titleLabel": "変数を削除しますか?",
@ -6952,7 +6925,6 @@
"xpack.canvas.workpadConfig.USLetterButtonLabel": "US レター",
"xpack.canvas.workpadConfig.widthLabel": "幅",
"xpack.canvas.workpadCreate.createButtonLabel": "ワークパッドを作成",
"xpack.canvas.workpadHeader.addElementButtonLabel": "エレメントを追加",
"xpack.canvas.workpadHeader.addElementModalCloseButtonLabel": "閉じる",
"xpack.canvas.workpadHeader.fullscreenButtonAriaLabel": "全画面表示",
"xpack.canvas.workpadHeader.fullscreenTooltip": "全画面モードを開始します",
@ -6999,10 +6971,8 @@
"xpack.canvas.workpadHeaderElementMenu.textMenuItemLabel": "テキスト",
"xpack.canvas.workpadHeaderKioskControl.controlTitle": "全画面ページのサイクル",
"xpack.canvas.workpadHeaderKioskControl.cycleFormLabel": "サイクル間隔を変更",
"xpack.canvas.workpadHeaderKioskControl.cycleToggleSwitch": "スライドを自動的にサイクル",
"xpack.canvas.workpadHeaderRefreshControlSettings.refreshAriaLabel": "エレメントを更新",
"xpack.canvas.workpadHeaderRefreshControlSettings.refreshTooltip": "データを更新",
"xpack.canvas.workpadHeaderShareMenu.copyPDFMessage": "{PDF}生成{URL}がクリップボードにコピーされました。",
"xpack.canvas.workpadHeaderShareMenu.copyShareConfigMessage": "共有マークアップがクリップボードにコピーされました",
"xpack.canvas.workpadHeaderShareMenu.shareDownloadJSONTitle": "{JSON} をダウンロード",
"xpack.canvas.workpadHeaderShareMenu.shareDownloadPDFTitle": "{PDF}レポート",
@ -7012,8 +6982,6 @@
"xpack.canvas.workpadHeaderShareMenu.shareWorkpadMessage": "このワークパッドを共有",
"xpack.canvas.workpadHeaderShareMenu.unknownExportErrorMessage": "不明なエクスポートタイプ：{type}",
"xpack.canvas.workpadHeaderShareMenu.unsupportedRendererWarning": "このワークパッドには、{CANVAS}シェアラブルワークパッドランタイムがサポートしていないレンダリング関数が含まれています。これらのエレメントはレンダリングされません：",
"xpack.canvas.workpadHeaderViewMenu.autoplayOffMenuItemLabel": "自動再生をオフにする",
"xpack.canvas.workpadHeaderViewMenu.autoplayOnMenuItemLabel": "自動再生をオンにする",
"xpack.canvas.workpadHeaderViewMenu.autoplaySettingsMenuItemLabel": "自動再生設定",
"xpack.canvas.workpadHeaderViewMenu.fullscreenMenuLabel": "全画面モードを開始します",
"xpack.canvas.workpadHeaderViewMenu.hideEditModeLabel": "編集コントロールを非表示にします",
@ -7022,13 +6990,10 @@
"xpack.canvas.workpadHeaderViewMenu.showEditModeLabel": "編集コントロールを表示します",
"xpack.canvas.workpadHeaderViewMenu.viewMenuButtonLabel": "表示",
"xpack.canvas.workpadHeaderViewMenu.viewMenuLabel": "表示オプション",
"xpack.canvas.workpadHeaderViewMenu.zoomControlsAriaLabel": "ズームコントロール",
"xpack.canvas.workpadHeaderViewMenu.zoomControlsTooltip": "ズームコントロール",
"xpack.canvas.workpadHeaderViewMenu.zoomFitToWindowText": "ウィンドウに合わせる",
"xpack.canvas.workpadHeaderViewMenu.zoomInText": "ズームイン",
"xpack.canvas.workpadHeaderViewMenu.zoomMenuItemLabel": "ズーム",
"xpack.canvas.workpadHeaderViewMenu.zoomOutText": "ズームアウト",
"xpack.canvas.workpadHeaderViewMenu.zoomPanelTitle": "ズーム",
"xpack.canvas.workpadHeaderViewMenu.zoomPrecentageValue": "リセット",
"xpack.canvas.workpadHeaderViewMenu.zoomResetText": "{scalePercentage}%",
"xpack.canvas.workpadImport.filePickerPlaceholder": "ワークパッド {JSON} ファイルをインポート",

35
x-pack/plugins/translations/translations/zh-CN.json
View file

@ -6015,9 +6015,6 @@
"xpack.banners.settings.textColor.description": "设置横幅广告文本的颜色。{subscriptionLink}",
"xpack.banners.settings.textColor.title": "横幅广告文本颜色",
"xpack.banners.settings.textContent.title": "横幅广告文本",
"xpack.canvas.app.loadErrorMessage": "消息：{error}",
"xpack.canvas.app.loadErrorTitle": "Canvas 加载失败",
"xpack.canvas.app.loadingMessage": "Canvas 正在加载",
"xpack.canvas.appDescription": "以最佳像素展示您的数据。",
"xpack.canvas.argAddPopover.addAriaLabel": "添加参数",
"xpack.canvas.argFormAdvancedFailure.applyButtonLabel": "应用",
@ -6035,8 +6032,6 @@
"xpack.canvas.asset.deleteAssetTooltip": "删除",
"xpack.canvas.asset.downloadAssetTooltip": "下载",
"xpack.canvas.asset.thumbnailAltText": "资产缩略图",
"xpack.canvas.assetManager.manageButtonLabel": "管理资产",
"xpack.canvas.assetModal.copyAssetMessage": "已将“{id}”复制到剪贴板",
"xpack.canvas.assetModal.emptyAssetsDescription": "导入您的资产以开始",
"xpack.canvas.assetModal.filePickerPromptText": "选择或拖放图像",
"xpack.canvas.assetModal.loadingText": "正在上传图像",
@ -6059,7 +6054,6 @@
"xpack.canvas.customElementModal.nameInputLabel": "名称",
"xpack.canvas.customElementModal.remainingCharactersDescription": "还剩 {numberOfRemainingCharacter} 个字符",
"xpack.canvas.customElementModal.saveButtonLabel": "保存",
"xpack.canvas.datasourceDatasourceComponent.changeButtonLabel": "更改元素数据源",
"xpack.canvas.datasourceDatasourceComponent.expressionArgDescription": "数据源包含由表达式控制的参数。使用表达式编辑器可修改数据源。",
"xpack.canvas.datasourceDatasourceComponent.previewButtonLabel": "预览数据",
"xpack.canvas.datasourceDatasourceComponent.saveButtonLabel": "保存",
@ -6489,8 +6483,6 @@
"xpack.canvas.groupSettings.saveGroupDescription": "将此组另存为新元素，以在整个 Workpad 重复使用。",
"xpack.canvas.groupSettings.ungroupDescription": "取消分组 ({uKey}) 以编辑各个元素设置。",
"xpack.canvas.helpMenu.appName": "Canvas",
"xpack.canvas.helpMenu.description": "有关 {CANVAS} 特定信息",
"xpack.canvas.helpMenu.documentationLinkLabel": "{CANVAS} 文档",
"xpack.canvas.helpMenu.keyboardShortcutsLinkLabel": "快捷键",
"xpack.canvas.home.myWorkpadsTabLabel": "我的 Workpad",
"xpack.canvas.home.workpadTemplatesTabLabel": "模板",
@ -6557,7 +6549,6 @@
"xpack.canvas.lib.palettes.yellowBlueLabel": "黄、蓝",
"xpack.canvas.lib.palettes.yellowGreenLabel": "黄、绿",
"xpack.canvas.lib.palettes.yellowRedLabel": "黄、红",
"xpack.canvas.link.errorMessage": "链接错误：{message}",
"xpack.canvas.pageConfig.backgroundColorDescription": "接受 HEX、RGB 或 HTML 颜色名称",
"xpack.canvas.pageConfig.backgroundColorLabel": "背景",
"xpack.canvas.pageConfig.title": "页面设置",
@ -6567,7 +6558,6 @@
"xpack.canvas.pageManager.addPageTooltip": "将新页面添加到此 Workpad",
"xpack.canvas.pageManager.confirmRemoveDescription": "确定要移除此页面？",
"xpack.canvas.pageManager.confirmRemoveTitle": "移除页面",
"xpack.canvas.pageManager.pageNumberAriaLabel": "加载页码 {pageNumber}",
"xpack.canvas.pageManager.removeButtonLabel": "移除",
"xpack.canvas.pagePreviewPageControls.clonePageAriaLabel": "克隆页面",
"xpack.canvas.pagePreviewPageControls.clonePageTooltip": "克隆",
@ -6619,10 +6609,8 @@
"xpack.canvas.savedElementsModal.deleteElementDescription": "确定要删除此元素？",
"xpack.canvas.savedElementsModal.deleteElementTitle": "删除元素“{elementName}”？",
"xpack.canvas.savedElementsModal.editElementTitle": "编辑元素",
"xpack.canvas.savedElementsModal.elementsTitle": "元素",
"xpack.canvas.savedElementsModal.findElementPlaceholder": "查找元素",
"xpack.canvas.savedElementsModal.modalTitle": "我的元素",
"xpack.canvas.savedElementsModal.myElementsTitle": "我的元素",
"xpack.canvas.shareWebsiteFlyout.description": "按照以下步骤在外部网站上共享此 Workpad 的静态版本。其将是当前 Workpad 的可视化快照，对实时数据没有访问权限。",
"xpack.canvas.shareWebsiteFlyout.flyoutCalloutDescription": "要尝试共享，可以{link}，其包含此 Workpad、{CANVAS} Shareable Workpad Runtime 及示例 {HTML} 文件。",
"xpack.canvas.shareWebsiteFlyout.flyoutTitle": "在网站上共享",
@ -6677,13 +6665,10 @@
"xpack.canvas.textStylePicker.styleItalicOption": "斜体",
"xpack.canvas.textStylePicker.styleOptionsControl": "样式选项",
"xpack.canvas.textStylePicker.styleUnderlineOption": "下划线",
"xpack.canvas.timePicker.applyButtonLabel": "应用",
"xpack.canvas.toolbar.editorButtonLabel": "表达式编辑器",
"xpack.canvas.toolbar.errorMessage": "工具栏错误：{message}",
"xpack.canvas.toolbar.nextPageAriaLabel": "下一页",
"xpack.canvas.toolbar.pageButtonLabel": "第 {pageNum}{rest} 页",
"xpack.canvas.toolbar.previousPageAriaLabel": "上一页",
"xpack.canvas.toolbar.workpadManagerCloseButtonLabel": "关闭",
"xpack.canvas.toolbarTray.closeTrayAriaLabel": "关闭托盘",
"xpack.canvas.transitions.fade.displayName": "淡化",
"xpack.canvas.transitions.fade.help": "从一页淡入到下一页",
@ -6949,20 +6934,8 @@
"xpack.canvas.units.time.minutes": "{minutes, plural, other {# 分钟}}",
"xpack.canvas.units.time.seconds": "{seconds, plural, other {# 秒}}",
"xpack.canvas.useCloneWorkpad.clonedWorkpadName": "{workpadName} 副本",
"xpack.canvas.varConfig.addButtonLabel": "添加变量",
"xpack.canvas.varConfig.addTooltipLabel": "添加变量",
"xpack.canvas.varConfig.copyActionButtonLabel": "复制代码片段",
"xpack.canvas.varConfig.copyActionTooltipLabel": "将变量语法复制到剪贴板",
"xpack.canvas.varConfig.copyNotificationDescription": "变量语法已复制到剪贴板",
"xpack.canvas.varConfig.deleteActionButtonLabel": "删除变量",
"xpack.canvas.varConfig.deleteNotificationDescription": "变量已成功删除",
"xpack.canvas.varConfig.editActionButtonLabel": "编辑变量",
"xpack.canvas.varConfig.emptyDescription": "此 Workpad 当前没有变量。您可以添加变量以存储和编辑公用值。这样，便可以在元素中或表达式编辑器中使用这些变量。",
"xpack.canvas.varConfig.tableNameLabel": "名称",
"xpack.canvas.varConfig.tableTypeLabel": "类型",
"xpack.canvas.varConfig.tableValueLabel": "值",
"xpack.canvas.varConfig.titleLabel": "变量",
"xpack.canvas.varConfig.titleTooltip": "添加变量以存储和编辑公用值",
"xpack.canvas.varConfigDeleteVar.cancelButtonLabel": "取消",
"xpack.canvas.varConfigDeleteVar.deleteButtonLabel": "删除变量",
"xpack.canvas.varConfigDeleteVar.titleLabel": "删除变量？",
@ -6996,7 +6969,6 @@
"xpack.canvas.workpadConfig.USLetterButtonLabel": "美国信函",
"xpack.canvas.workpadConfig.widthLabel": "宽",
"xpack.canvas.workpadCreate.createButtonLabel": "创建 Workpad",
"xpack.canvas.workpadHeader.addElementButtonLabel": "添加元素",
"xpack.canvas.workpadHeader.addElementModalCloseButtonLabel": "关闭",
"xpack.canvas.workpadHeader.cycleIntervalDaysText": "每 {days} {days, plural, other {天}}",
"xpack.canvas.workpadHeader.cycleIntervalHoursText": "每 {hours} {hours, plural, other {小时}}",
@ -7047,10 +7019,8 @@
"xpack.canvas.workpadHeaderElementMenu.textMenuItemLabel": "文本",
"xpack.canvas.workpadHeaderKioskControl.controlTitle": "循环播放全屏页面",
"xpack.canvas.workpadHeaderKioskControl.cycleFormLabel": "更改循环播放时间间隔",
"xpack.canvas.workpadHeaderKioskControl.cycleToggleSwitch": "自动循环播放幻灯片",
"xpack.canvas.workpadHeaderRefreshControlSettings.refreshAriaLabel": "刷新元素",
"xpack.canvas.workpadHeaderRefreshControlSettings.refreshTooltip": "刷新数据",
"xpack.canvas.workpadHeaderShareMenu.copyPDFMessage": "{PDF} 生成 {URL} 已复制到您的剪贴板。",
"xpack.canvas.workpadHeaderShareMenu.copyShareConfigMessage": "已将共享标记复制到剪贴板",
"xpack.canvas.workpadHeaderShareMenu.shareDownloadJSONTitle": "下载为 {JSON}",
"xpack.canvas.workpadHeaderShareMenu.shareDownloadPDFTitle": "{PDF} 报告",
@ -7060,8 +7030,6 @@
"xpack.canvas.workpadHeaderShareMenu.shareWorkpadMessage": "共享此 Workpad",
"xpack.canvas.workpadHeaderShareMenu.unknownExportErrorMessage": "未知导出类型：{type}",
"xpack.canvas.workpadHeaderShareMenu.unsupportedRendererWarning": "此 Workpad 包含 {CANVAS} Shareable Workpad Runtime 不支持的呈现函数。将不会呈现以下元素：",
"xpack.canvas.workpadHeaderViewMenu.autoplayOffMenuItemLabel": "关闭自动播放",
"xpack.canvas.workpadHeaderViewMenu.autoplayOnMenuItemLabel": "打开自动播放",
"xpack.canvas.workpadHeaderViewMenu.autoplaySettingsMenuItemLabel": "自动播放设置",
"xpack.canvas.workpadHeaderViewMenu.fullscreenMenuLabel": "进入全屏模式",
"xpack.canvas.workpadHeaderViewMenu.hideEditModeLabel": "隐藏编辑控件",
@ -7070,13 +7038,10 @@
"xpack.canvas.workpadHeaderViewMenu.showEditModeLabel": "显示编辑控制",
"xpack.canvas.workpadHeaderViewMenu.viewMenuButtonLabel": "查看",
"xpack.canvas.workpadHeaderViewMenu.viewMenuLabel": "查看选项",
"xpack.canvas.workpadHeaderViewMenu.zoomControlsAriaLabel": "缩放控制",
"xpack.canvas.workpadHeaderViewMenu.zoomControlsTooltip": "缩放控制",
"xpack.canvas.workpadHeaderViewMenu.zoomFitToWindowText": "适应窗口大小",
"xpack.canvas.workpadHeaderViewMenu.zoomInText": "放大",
"xpack.canvas.workpadHeaderViewMenu.zoomMenuItemLabel": "缩放",
"xpack.canvas.workpadHeaderViewMenu.zoomOutText": "缩小",
"xpack.canvas.workpadHeaderViewMenu.zoomPanelTitle": "缩放",
"xpack.canvas.workpadHeaderViewMenu.zoomPrecentageValue": "重置",
"xpack.canvas.workpadHeaderViewMenu.zoomResetText": "{scalePercentage}%",
"xpack.canvas.workpadImport.filePickerPlaceholder": "导入 Workpad {JSON} 文件",