Skip to content

Commit

Permalink
[IM] Move template wizard steps to shared directory + update legacy d…
Browse files Browse the repository at this point in the history
…etails panel (#69559)
  • Loading branch information
alisonelizabeth committed Jun 23, 2020
1 parent e65163b commit b6b2445
Show file tree
Hide file tree
Showing 20 changed files with 99 additions and 220 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/

export type TestSubjects =
| 'aliasesTab'
| 'aliasesTabContent'
| 'appTitle'
| 'cell'
| 'closeDetailsButton'
Expand All @@ -27,7 +27,7 @@ export type TestSubjects =
| 'indicesTab'
| 'legacyTemplateTable'
| 'manageTemplateButton'
| 'mappingsTab'
| 'mappingsTabContent'
| 'noAliasesCallout'
| 'noMappingsCallout'
| 'noSettingsCallout'
Expand All @@ -36,7 +36,7 @@ export type TestSubjects =
| 'row'
| 'sectionError'
| 'sectionLoading'
| 'settingsTab'
| 'settingsTabContent'
| 'summaryTab'
| 'summaryTitle'
| 'systemTemplatesSwitch'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -432,18 +432,18 @@ describe('Index Templates tab', () => {
// Navigate and verify all tabs
actions.selectDetailsTab('settings');
expect(exists('summaryTab')).toBe(false);
expect(exists('settingsTab')).toBe(true);
expect(exists('settingsTabContent')).toBe(true);

actions.selectDetailsTab('aliases');
expect(exists('summaryTab')).toBe(false);
expect(exists('settingsTab')).toBe(false);
expect(exists('aliasesTab')).toBe(true);
expect(exists('settingsTabContent')).toBe(false);
expect(exists('aliasesTabContent')).toBe(true);

actions.selectDetailsTab('mappings');
expect(exists('summaryTab')).toBe(false);
expect(exists('settingsTab')).toBe(false);
expect(exists('aliasesTab')).toBe(false);
expect(exists('mappingsTab')).toBe(true);
expect(exists('settingsTabContent')).toBe(false);
expect(exists('aliasesTabContent')).toBe(false);
expect(exists('mappingsTabContent')).toBe(true);
});

test('should show an info callout if data is not present', async () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,5 @@
*/

export { TabAliases, TabMappings, TabSettings } from './details_panel';

export { StepAliases, StepMappings, StepSettings } from './wizard_steps';
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

export { StepAliases } from './step_aliases';
export { StepMappings } from './step_mappings';
export { StepSettings } from './step_settings';
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,17 @@ import {
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';

import { Forms } from '../../../../shared_imports';
import { documentationService } from '../../../services/documentation';
import { Forms } from '../../../../../shared_imports';
import { useJsonStep } from './use_json_step';

interface Props {
defaultValue: { [key: string]: any };
onChange: (content: Forms.Content) => void;
esDocsBase: string;
}

export const StepAliases: React.FunctionComponent<Props> = React.memo(
({ defaultValue, onChange }) => {
({ defaultValue, onChange, esDocsBase }) => {
const { jsonContent, setJsonContent, error } = useJsonStep({
defaultValue,
onChange,
Expand All @@ -42,7 +42,7 @@ export const StepAliases: React.FunctionComponent<Props> = React.memo(
<EuiTitle>
<h2 data-test-subj="stepTitle">
<FormattedMessage
id="xpack.idxMgmt.templateForm.stepAliases.stepTitle"
id="xpack.idxMgmt.formWizard.stepAliases.stepTitle"
defaultMessage="Aliases (optional)"
/>
</h2>
Expand All @@ -53,7 +53,7 @@ export const StepAliases: React.FunctionComponent<Props> = React.memo(
<EuiText>
<p>
<FormattedMessage
id="xpack.idxMgmt.templateForm.stepAliases.aliasesDescription"
id="xpack.idxMgmt.formWizard.stepAliases.aliasesDescription"
defaultMessage="Set up aliases to associate with your indices."
/>
</p>
Expand All @@ -64,13 +64,13 @@ export const StepAliases: React.FunctionComponent<Props> = React.memo(
<EuiButtonEmpty
size="s"
flush="right"
href={documentationService.getTemplatesDocumentationLink()}
href={`${esDocsBase}/indices-aliases.html`}
target="_blank"
iconType="help"
>
<FormattedMessage
id="xpack.idxMgmt.templateForm.stepAliases.docsButtonLabel"
defaultMessage="Index Templates docs"
id="xpack.idxMgmt.formWizard.stepAliases.docsButtonLabel"
defaultMessage="Index Aliases docs"
/>
</EuiButtonEmpty>
</EuiFlexItem>
Expand All @@ -82,13 +82,13 @@ export const StepAliases: React.FunctionComponent<Props> = React.memo(
<EuiFormRow
label={
<FormattedMessage
id="xpack.idxMgmt.templateForm.stepAliases.fieldAliasesLabel"
id="xpack.idxMgmt.formWizard.stepAliases.fieldAliasesLabel"
defaultMessage="Aliases"
/>
}
helpText={
<FormattedMessage
id="xpack.idxMgmt.templateForm.stepAliases.aliasesEditorHelpText"
id="xpack.idxMgmt.formWizard.stepAliases.aliasesEditorHelpText"
defaultMessage="Use JSON format: {code}"
values={{
code: (
Expand Down Expand Up @@ -120,7 +120,7 @@ export const StepAliases: React.FunctionComponent<Props> = React.memo(
showGutter={false}
minLines={6}
aria-label={i18n.translate(
'xpack.idxMgmt.templateForm.stepAliases.fieldAliasesAriaLabel',
'xpack.idxMgmt.formWizard.stepAliases.fieldAliasesAriaLabel',
{
defaultMessage: 'Aliases code editor',
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,23 +15,23 @@ import {
EuiText,
} from '@elastic/eui';

import { Forms } from '../../../../shared_imports';
import { documentationService } from '../../../services/documentation';
import { Forms } from '../../../../../shared_imports';
import {
MappingsEditor,
OnUpdateHandler,
LoadMappingsFromJsonButton,
IndexSettings,
} from '../../mappings_editor';
} from '../../../mappings_editor';

interface Props {
defaultValue: { [key: string]: any };
onChange: (content: Forms.Content) => void;
indexSettings?: IndexSettings;
esDocsBase: string;
}

export const StepMappings: React.FunctionComponent<Props> = React.memo(
({ defaultValue, onChange, indexSettings }) => {
({ defaultValue, onChange, indexSettings, esDocsBase }) => {
const [mappings, setMappings] = useState(defaultValue);

const onMappingsEditorUpdate = useCallback<OnUpdateHandler>(
Expand All @@ -58,7 +58,7 @@ export const StepMappings: React.FunctionComponent<Props> = React.memo(
<EuiTitle>
<h2 data-test-subj="stepTitle">
<FormattedMessage
id="xpack.idxMgmt.templateForm.stepMappings.stepTitle"
id="xpack.idxMgmt.formWizard.stepMappings.stepTitle"
defaultMessage="Mappings (optional)"
/>
</h2>
Expand All @@ -69,7 +69,7 @@ export const StepMappings: React.FunctionComponent<Props> = React.memo(
<EuiText>
<p>
<FormattedMessage
id="xpack.idxMgmt.templateForm.stepMappings.mappingsDescription"
id="xpack.idxMgmt.formWizard.stepMappings.mappingsDescription"
defaultMessage="Define how to store and index documents."
/>
</p>
Expand All @@ -86,12 +86,12 @@ export const StepMappings: React.FunctionComponent<Props> = React.memo(
<EuiButtonEmpty
size="s"
flush="right"
href={documentationService.getMappingDocumentationLink()}
href={`${esDocsBase}/mapping.html`}
target="_blank"
iconType="help"
>
<FormattedMessage
id="xpack.idxMgmt.templateForm.stepMappings.docsButtonLabel"
id="xpack.idxMgmt.formWizard.stepMappings.docsButtonLabel"
defaultMessage="Mapping docs"
/>
</EuiButtonEmpty>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,17 @@ import {
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';

import { Forms } from '../../../../shared_imports';
import { documentationService } from '../../../services/documentation';
import { Forms } from '../../../../../shared_imports';
import { useJsonStep } from './use_json_step';

interface Props {
defaultValue: { [key: string]: any };
onChange: (content: Forms.Content) => void;
esDocsBase: string;
}

export const StepSettings: React.FunctionComponent<Props> = React.memo(
({ defaultValue, onChange }) => {
({ defaultValue, onChange, esDocsBase }) => {
const { jsonContent, setJsonContent, error } = useJsonStep({
defaultValue,
onChange,
Expand All @@ -42,7 +42,7 @@ export const StepSettings: React.FunctionComponent<Props> = React.memo(
<EuiTitle>
<h2 data-test-subj="stepTitle">
<FormattedMessage
id="xpack.idxMgmt.templateForm.stepSettings.stepTitle"
id="xpack.idxMgmt.formWizard.stepSettings.stepTitle"
defaultMessage="Index settings (optional)"
/>
</h2>
Expand All @@ -53,7 +53,7 @@ export const StepSettings: React.FunctionComponent<Props> = React.memo(
<EuiText>
<p>
<FormattedMessage
id="xpack.idxMgmt.templateForm.stepSettings.settingsDescription"
id="xpack.idxMgmt.formWizard.stepSettings.settingsDescription"
defaultMessage="Define the behavior of your indices."
/>
</p>
Expand All @@ -64,12 +64,12 @@ export const StepSettings: React.FunctionComponent<Props> = React.memo(
<EuiButtonEmpty
size="s"
flush="right"
href={documentationService.getSettingsDocumentationLink()}
href={`${esDocsBase}/index-modules.html#index-modules-settings`}
target="_blank"
iconType="help"
>
<FormattedMessage
id="xpack.idxMgmt.templateForm.stepSettings.docsButtonLabel"
id="xpack.idxMgmt.formWizard.stepSettings.docsButtonLabel"
defaultMessage="Index settings docs"
/>
</EuiButtonEmpty>
Expand All @@ -82,13 +82,13 @@ export const StepSettings: React.FunctionComponent<Props> = React.memo(
<EuiFormRow
label={
<FormattedMessage
id="xpack.idxMgmt.templateForm.stepSettings.fieldIndexSettingsLabel"
id="xpack.idxMgmt.formWizard.stepSettings.fieldIndexSettingsLabel"
defaultMessage="Index settings"
/>
}
helpText={
<FormattedMessage
id="xpack.idxMgmt.templateForm.stepSettings.settingsEditorHelpText"
id="xpack.idxMgmt.formWizard.stepSettings.settingsEditorHelpText"
defaultMessage="Use JSON format: {code}"
values={{
code: <EuiCode>{JSON.stringify({ number_of_replicas: 1 })}</EuiCode>,
Expand All @@ -114,7 +114,7 @@ export const StepSettings: React.FunctionComponent<Props> = React.memo(
showGutter={false}
minLines={6}
aria-label={i18n.translate(
'xpack.idxMgmt.templateForm.stepSettings.fieldIndexSettingsAriaLabel',
'xpack.idxMgmt.formWizard.stepSettings.fieldIndexSettingsAriaLabel',
{
defaultMessage: 'Index settings editor',
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
import { useEffect, useState, useCallback } from 'react';
import { i18n } from '@kbn/i18n';

import { isJSON, Forms } from '../../../../shared_imports';
import { isJSON, Forms } from '../../../../../shared_imports';

interface Parameters {
onChange: (content: Forms.Content) => void;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,11 @@
* you may not use this file except in compliance with the Elastic License.
*/

export { TabAliases, TabMappings, TabSettings } from './components';
export {
TabAliases,
TabMappings,
TabSettings,
StepAliases,
StepMappings,
StepSettings,
} from './components';
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,18 @@
import React from 'react';

import { Forms } from '../../../../shared_imports';
import { documentationService } from '../../../services/documentation';
import { StepAliases } from '../../shared';
import { WizardContent } from '../template_form';
import { StepAliases } from './step_aliases';

export const StepAliasesContainer = () => {
const { defaultValue, updateContent } = Forms.useContent<WizardContent>('aliases');

return <StepAliases defaultValue={defaultValue} onChange={updateContent} />;
return (
<StepAliases
defaultValue={defaultValue}
onChange={updateContent}
esDocsBase={documentationService.getEsDocsBase()}
/>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@
import React from 'react';

import { Forms } from '../../../../shared_imports';
import { documentationService } from '../../../services/documentation';
import { StepMappings } from '../../shared';
import { WizardContent } from '../template_form';
import { StepMappings } from './step_mappings';

export const StepMappingsContainer = () => {
const { defaultValue, updateContent, getData } = Forms.useContent<WizardContent>('mappings');
Expand All @@ -17,6 +18,7 @@ export const StepMappingsContainer = () => {
defaultValue={defaultValue}
onChange={updateContent}
indexSettings={getData().settings}
esDocsBase={documentationService.getEsDocsBase()}
/>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,18 @@
import React from 'react';

import { Forms } from '../../../../shared_imports';
import { documentationService } from '../../../services/documentation';
import { StepSettings } from '../../shared';
import { WizardContent } from '../template_form';
import { StepSettings } from './step_settings';

export const StepSettingsContainer = React.memo(() => {
const { defaultValue, updateContent } = Forms.useContent<WizardContent>('settings');

return <StepSettings defaultValue={defaultValue} onChange={updateContent} />;
return (
<StepSettings
defaultValue={defaultValue}
onChange={updateContent}
esDocsBase={documentationService.getEsDocsBase()}
/>
);
});
Loading

0 comments on commit b6b2445

Please sign in to comment.