[ML] Transforms: replace deprecated EuiCodeEditor (#108310)
* replace deprecated EuiCodeEditor in transform * update jest snapshot * add aria label and move data attribute to parent element for testing * update jest snapshot for aria label * update functional tests
This commit is contained in:
parent
869c4b0d8f
commit
4e0375f626
9 changed files with 203 additions and 157 deletions
|
@ -8,10 +8,12 @@
|
|||
import { isEqual } from 'lodash';
|
||||
import React, { memo, FC } from 'react';
|
||||
|
||||
import { EuiCodeEditor, EuiFormRow } from '@elastic/eui';
|
||||
import { EuiFormRow } from '@elastic/eui';
|
||||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
||||
import { CodeEditor } from '../../../../../../../../../src/plugins/kibana_react/public';
|
||||
|
||||
import { StepDefineFormHook } from '../step_define';
|
||||
|
||||
export const AdvancedPivotEditor: FC<StepDefineFormHook['advancedPivotEditor']> = memo(
|
||||
|
@ -25,14 +27,11 @@ export const AdvancedPivotEditor: FC<StepDefineFormHook['advancedPivotEditor']>
|
|||
label={i18n.translate('xpack.transform.stepDefineForm.advancedEditorLabel', {
|
||||
defaultMessage: 'Pivot configuration object',
|
||||
})}
|
||||
data-test-subj="transformAdvancedPivotEditor"
|
||||
>
|
||||
<EuiCodeEditor
|
||||
data-test-subj="transformAdvancedPivotEditor"
|
||||
style={{ border: '1px solid #e3e6ef' }}
|
||||
height="250px"
|
||||
width="100%"
|
||||
mode={xJsonMode}
|
||||
value={advancedEditorConfig}
|
||||
<CodeEditor
|
||||
height={250}
|
||||
languageId={'json'}
|
||||
onChange={(d: string) => {
|
||||
setAdvancedEditorConfig(d);
|
||||
|
||||
|
@ -51,13 +50,21 @@ export const AdvancedPivotEditor: FC<StepDefineFormHook['advancedPivotEditor']>
|
|||
setAdvancedPivotEditorApplyButtonEnabled(false);
|
||||
}
|
||||
}}
|
||||
setOptions={{
|
||||
fontSize: '12px',
|
||||
options={{
|
||||
ariaLabel: i18n.translate('xpack.transform.stepDefineForm.advancedEditorAriaLabel', {
|
||||
defaultMessage: 'Advanced pivot editor',
|
||||
}),
|
||||
automaticLayout: true,
|
||||
fontSize: 12,
|
||||
scrollBeyondLastLine: false,
|
||||
quickSuggestions: true,
|
||||
minimap: {
|
||||
enabled: false,
|
||||
},
|
||||
wordWrap: 'on',
|
||||
wrappingIndent: 'indent',
|
||||
}}
|
||||
theme="textmate"
|
||||
aria-label={i18n.translate('xpack.transform.stepDefineForm.advancedEditorAriaLabel', {
|
||||
defaultMessage: 'Advanced pivot editor',
|
||||
})}
|
||||
value={advancedEditorConfig}
|
||||
/>
|
||||
</EuiFormRow>
|
||||
);
|
||||
|
|
|
@ -8,10 +8,10 @@
|
|||
import { isEqual } from 'lodash';
|
||||
import React, { memo, FC } from 'react';
|
||||
|
||||
import { EuiCodeEditor } from '@elastic/eui';
|
||||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
||||
import { CodeEditor } from '../../../../../../../../../src/plugins/kibana_react/public';
|
||||
|
||||
import { isRuntimeMappings } from '../../../../../../common/shared_imports';
|
||||
|
||||
import { StepDefineFormHook } from '../step_define';
|
||||
|
@ -26,42 +26,50 @@ export const AdvancedRuntimeMappingsEditor: FC<StepDefineFormHook['runtimeMappin
|
|||
state: { advancedEditorRuntimeMappingsLastApplied, advancedRuntimeMappingsConfig, xJsonMode },
|
||||
}) => {
|
||||
return (
|
||||
<EuiCodeEditor
|
||||
data-test-subj="transformAdvancedRuntimeMappingsEditor"
|
||||
style={{ border: '1px solid #e3e6ef' }}
|
||||
height="250px"
|
||||
width="100%"
|
||||
mode={xJsonMode}
|
||||
value={advancedRuntimeMappingsConfig}
|
||||
onChange={(d: string) => {
|
||||
setAdvancedRuntimeMappingsConfig(d);
|
||||
<div data-test-subj="transformAdvancedRuntimeMappingsEditor">
|
||||
<CodeEditor
|
||||
height={250}
|
||||
languageId={'json'}
|
||||
onChange={(d: string) => {
|
||||
setAdvancedRuntimeMappingsConfig(d);
|
||||
|
||||
// Disable the "Apply"-Button if the config hasn't changed.
|
||||
if (advancedEditorRuntimeMappingsLastApplied === d) {
|
||||
setRuntimeMappingsEditorApplyButtonEnabled(false);
|
||||
return;
|
||||
}
|
||||
// Disable the "Apply"-Button if the config hasn't changed.
|
||||
if (advancedEditorRuntimeMappingsLastApplied === d) {
|
||||
setRuntimeMappingsEditorApplyButtonEnabled(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Try to parse the string passed on from the editor.
|
||||
// If parsing fails, the "Apply"-Button will be disabled
|
||||
try {
|
||||
// if the user deletes the json in the editor
|
||||
// they should still be able to apply changes
|
||||
const isEmptyStr = d === '';
|
||||
const parsedJson = isEmptyStr ? {} : JSON.parse(convertToJson(d));
|
||||
setRuntimeMappingsEditorApplyButtonEnabled(isEmptyStr || isRuntimeMappings(parsedJson));
|
||||
} catch (e) {
|
||||
setRuntimeMappingsEditorApplyButtonEnabled(false);
|
||||
}
|
||||
}}
|
||||
setOptions={{
|
||||
fontSize: '12px',
|
||||
}}
|
||||
theme="textmate"
|
||||
aria-label={i18n.translate('xpack.transform.stepDefineForm.advancedEditorAriaLabel', {
|
||||
defaultMessage: 'Advanced pivot editor',
|
||||
})}
|
||||
/>
|
||||
// Try to parse the string passed on from the editor.
|
||||
// If parsing fails, the "Apply"-Button will be disabled
|
||||
try {
|
||||
// if the user deletes the json in the editor
|
||||
// they should still be able to apply changes
|
||||
const isEmptyStr = d === '';
|
||||
const parsedJson = isEmptyStr ? {} : JSON.parse(convertToJson(d));
|
||||
setRuntimeMappingsEditorApplyButtonEnabled(
|
||||
isEmptyStr || isRuntimeMappings(parsedJson)
|
||||
);
|
||||
} catch (e) {
|
||||
setRuntimeMappingsEditorApplyButtonEnabled(false);
|
||||
}
|
||||
}}
|
||||
options={{
|
||||
ariaLabel: i18n.translate('xpack.transform.stepDefineForm.advancedEditorAriaLabel', {
|
||||
defaultMessage: 'Advanced pivot editor',
|
||||
}),
|
||||
automaticLayout: true,
|
||||
fontSize: 12,
|
||||
scrollBeyondLastLine: false,
|
||||
quickSuggestions: true,
|
||||
minimap: {
|
||||
enabled: false,
|
||||
},
|
||||
wordWrap: 'on',
|
||||
wrappingIndent: 'indent',
|
||||
}}
|
||||
value={advancedRuntimeMappingsConfig}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
(prevProps, nextProps) => isEqual(pickProps(prevProps), pickProps(nextProps))
|
||||
|
|
|
@ -7,10 +7,10 @@
|
|||
|
||||
import React, { FC } from 'react';
|
||||
|
||||
import { EuiCodeEditor } from '@elastic/eui';
|
||||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
||||
import { CodeEditor } from '../../../../../../../../../src/plugins/kibana_react/public';
|
||||
|
||||
import { StepDefineFormHook } from '../step_define';
|
||||
|
||||
export const AdvancedSourceEditor: FC<StepDefineFormHook> = ({
|
||||
|
@ -23,38 +23,48 @@ export const AdvancedSourceEditor: FC<StepDefineFormHook> = ({
|
|||
},
|
||||
}) => {
|
||||
return (
|
||||
<EuiCodeEditor
|
||||
style={{ border: '1px solid #e3e6ef' }}
|
||||
mode="json"
|
||||
height="250px"
|
||||
width="100%"
|
||||
value={advancedEditorSourceConfig}
|
||||
onChange={(d: string) => {
|
||||
setSearchString(undefined);
|
||||
setAdvancedEditorSourceConfig(d);
|
||||
<div data-test-subj="transformAdvancedRuntimeMappingsEditor">
|
||||
<CodeEditor
|
||||
height={250}
|
||||
languageId={'json'}
|
||||
onChange={(d: string) => {
|
||||
setSearchString(undefined);
|
||||
setAdvancedEditorSourceConfig(d);
|
||||
|
||||
// Disable the "Apply"-Button if the config hasn't changed.
|
||||
if (advancedEditorSourceConfigLastApplied === d) {
|
||||
setAdvancedSourceEditorApplyButtonEnabled(false);
|
||||
return;
|
||||
}
|
||||
// Disable the "Apply"-Button if the config hasn't changed.
|
||||
if (advancedEditorSourceConfigLastApplied === d) {
|
||||
setAdvancedSourceEditorApplyButtonEnabled(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Try to parse the string passed on from the editor.
|
||||
// If parsing fails, the "Apply"-Button will be disabled
|
||||
try {
|
||||
JSON.parse(d);
|
||||
setAdvancedSourceEditorApplyButtonEnabled(true);
|
||||
} catch (e) {
|
||||
setAdvancedSourceEditorApplyButtonEnabled(false);
|
||||
}
|
||||
}}
|
||||
setOptions={{
|
||||
fontSize: '12px',
|
||||
}}
|
||||
theme="textmate"
|
||||
aria-label={i18n.translate('xpack.transform.stepDefineForm.advancedSourceEditorAriaLabel', {
|
||||
defaultMessage: 'Advanced query editor',
|
||||
})}
|
||||
/>
|
||||
// Try to parse the string passed on from the editor.
|
||||
// If parsing fails, the "Apply"-Button will be disabled
|
||||
try {
|
||||
JSON.parse(d);
|
||||
setAdvancedSourceEditorApplyButtonEnabled(true);
|
||||
} catch (e) {
|
||||
setAdvancedSourceEditorApplyButtonEnabled(false);
|
||||
}
|
||||
}}
|
||||
options={{
|
||||
ariaLabel: i18n.translate(
|
||||
'xpack.transform.stepDefineForm.advancedSourceEditorAriaLabel',
|
||||
{
|
||||
defaultMessage: 'Advanced query editor',
|
||||
}
|
||||
),
|
||||
automaticLayout: true,
|
||||
fontSize: 12,
|
||||
scrollBeyondLastLine: false,
|
||||
quickSuggestions: true,
|
||||
minimap: {
|
||||
enabled: false,
|
||||
},
|
||||
wordWrap: 'on',
|
||||
wrappingIndent: 'indent',
|
||||
}}
|
||||
value={advancedEditorSourceConfig}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -11,7 +11,7 @@ import { i18n } from '@kbn/i18n';
|
|||
|
||||
import {
|
||||
EuiButton,
|
||||
EuiCodeEditor,
|
||||
EuiCodeBlock,
|
||||
EuiComboBox,
|
||||
EuiFieldText,
|
||||
EuiForm,
|
||||
|
@ -326,16 +326,17 @@ export const PopoverForm: React.FC<Props> = ({ defaultData, otherAggNames, onCha
|
|||
</EuiFormRow>
|
||||
)}
|
||||
{isUnsupportedAgg && (
|
||||
<EuiCodeEditor
|
||||
mode="json"
|
||||
theme="textmate"
|
||||
width="100%"
|
||||
height="200px"
|
||||
value={JSON.stringify(getEsAggFromAggConfig(defaultData), null, 2)}
|
||||
setOptions={{ fontSize: '12px', showLineNumbers: false }}
|
||||
isReadOnly
|
||||
aria-label="Read only code editor"
|
||||
/>
|
||||
<EuiCodeBlock
|
||||
aria-label={i18n.translate('xpack.transform.agg.popoverForm.codeBlock', {
|
||||
defaultMessage: 'JSON of transform aggregation',
|
||||
})}
|
||||
fontSize="s"
|
||||
language="json"
|
||||
paddingSize="s"
|
||||
style={{ width: '100%', height: '200px' }}
|
||||
>
|
||||
{JSON.stringify(getEsAggFromAggConfig(defaultData), null, 2)}
|
||||
</EuiCodeBlock>
|
||||
)}
|
||||
<EuiFormRow hasEmptyLabelSpace>
|
||||
<EuiButton
|
||||
|
|
|
@ -13,7 +13,7 @@ import {
|
|||
htmlIdGenerator,
|
||||
EuiButton,
|
||||
EuiCheckbox,
|
||||
EuiCodeEditor,
|
||||
EuiCodeBlock,
|
||||
EuiFieldText,
|
||||
EuiForm,
|
||||
EuiFormRow,
|
||||
|
@ -298,16 +298,17 @@ export const PopoverForm: React.FC<Props> = ({ defaultData, otherAggNames, onCha
|
|||
{isUnsupportedAgg && (
|
||||
<>
|
||||
<EuiSpacer size="m" />
|
||||
<EuiCodeEditor
|
||||
mode="json"
|
||||
theme="textmate"
|
||||
width="100%"
|
||||
height="200px"
|
||||
value={JSON.stringify(getEsAggFromGroupByConfig(defaultData), null, 2)}
|
||||
setOptions={{ fontSize: '12px', showLineNumbers: false }}
|
||||
isReadOnly
|
||||
aria-label="Read only code editor"
|
||||
/>
|
||||
<EuiCodeBlock
|
||||
aria-label={i18n.translate('xpack.transform.agg.popoverForm.codeBlock', {
|
||||
defaultMessage: 'JSON of transform aggregation',
|
||||
})}
|
||||
fontSize="s"
|
||||
language="json"
|
||||
paddingSize="s"
|
||||
style={{ width: '100%', height: '200px' }}
|
||||
>
|
||||
{JSON.stringify(getEsAggFromGroupByConfig(defaultData), null, 2)}
|
||||
</EuiCodeBlock>
|
||||
</>
|
||||
)}
|
||||
<EuiFormRow hasEmptyLabelSpace>
|
||||
|
|
|
@ -6,7 +6,8 @@
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { EuiCodeEditor, EuiSpacer } from '@elastic/eui';
|
||||
import { EuiSpacer } from '@elastic/eui';
|
||||
import { CodeEditor } from '../../../../../../../../../../../../src/plugins/kibana_react/public';
|
||||
import { FilterAggConfigEditor } from '../types';
|
||||
|
||||
export const FilterEditorForm: FilterAggConfigEditor['aggTypeConfig']['FilterAggFormComponent'] = ({
|
||||
|
@ -16,15 +17,24 @@ export const FilterEditorForm: FilterAggConfigEditor['aggTypeConfig']['FilterAgg
|
|||
return (
|
||||
<>
|
||||
<EuiSpacer size="m" />
|
||||
<EuiCodeEditor
|
||||
value={config}
|
||||
<CodeEditor
|
||||
height={300}
|
||||
languageId={'json'}
|
||||
onChange={(d) => {
|
||||
onChange({ config: d });
|
||||
}}
|
||||
mode="json"
|
||||
style={{ width: '100%' }}
|
||||
theme="textmate"
|
||||
height="300px"
|
||||
options={{
|
||||
automaticLayout: true,
|
||||
fontSize: 12,
|
||||
scrollBeyondLastLine: false,
|
||||
quickSuggestions: true,
|
||||
minimap: {
|
||||
enabled: false,
|
||||
},
|
||||
wordWrap: 'on',
|
||||
wrappingIndent: 'indent',
|
||||
}}
|
||||
value={config || ''}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -9,50 +9,53 @@ exports[`Transform: Transform List Expanded Row <ExpandedRowJsonPane /> Minimal
|
|||
<EuiSpacer
|
||||
size="s"
|
||||
/>
|
||||
<EuiCodeEditor
|
||||
mode="json"
|
||||
readOnly={true}
|
||||
setOptions={Object {}}
|
||||
<EuiCodeBlock
|
||||
aria-label="JSON of transform configuration"
|
||||
fontSize="s"
|
||||
isCopyable={true}
|
||||
language="json"
|
||||
paddingSize="s"
|
||||
style={
|
||||
Object {
|
||||
"width": "100%",
|
||||
}
|
||||
}
|
||||
theme="textmate"
|
||||
value="{
|
||||
\\"id\\": \\"fq_date_histogram_1m_1441\\",
|
||||
\\"source\\": {
|
||||
\\"index\\": [
|
||||
\\"farequote-2019\\"
|
||||
>
|
||||
value=
|
||||
{
|
||||
"id": "fq_date_histogram_1m_1441",
|
||||
"source": {
|
||||
"index": [
|
||||
"farequote-2019"
|
||||
],
|
||||
\\"query\\": {
|
||||
\\"match_all\\": {}
|
||||
"query": {
|
||||
"match_all": {}
|
||||
}
|
||||
},
|
||||
\\"dest\\": {
|
||||
\\"index\\": \\"fq_date_histogram_1m_1441\\"
|
||||
"dest": {
|
||||
"index": "fq_date_histogram_1m_1441"
|
||||
},
|
||||
\\"pivot\\": {
|
||||
\\"group_by\\": {
|
||||
\\"@timestamp\\": {
|
||||
\\"date_histogram\\": {
|
||||
\\"field\\": \\"@timestamp\\",
|
||||
\\"calendar_interval\\": \\"1m\\"
|
||||
"pivot": {
|
||||
"group_by": {
|
||||
"@timestamp": {
|
||||
"date_histogram": {
|
||||
"field": "@timestamp",
|
||||
"calendar_interval": "1m"
|
||||
}
|
||||
}
|
||||
},
|
||||
\\"aggregations\\": {
|
||||
\\"responsetime.avg\\": {
|
||||
\\"avg\\": {
|
||||
\\"field\\": \\"responsetime\\"
|
||||
"aggregations": {
|
||||
"responsetime.avg": {
|
||||
"avg": {
|
||||
"field": "responsetime"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
\\"version\\": \\"8.0.0\\",
|
||||
\\"create_time\\": 1564388146667
|
||||
}"
|
||||
/>
|
||||
"version": "8.0.0",
|
||||
"create_time": 1564388146667
|
||||
}
|
||||
</EuiCodeBlock>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
grow={false}
|
||||
|
|
|
@ -7,13 +7,9 @@
|
|||
|
||||
import React, { FC } from 'react';
|
||||
|
||||
import {
|
||||
// @ts-ignore
|
||||
EuiCodeEditor,
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiSpacer,
|
||||
} from '@elastic/eui';
|
||||
import { EuiCodeBlock, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
|
||||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
||||
interface Props {
|
||||
json: object;
|
||||
|
@ -25,13 +21,21 @@ export const ExpandedRowJsonPane: FC<Props> = ({ json }) => {
|
|||
<EuiFlexGroup>
|
||||
<EuiFlexItem>
|
||||
<EuiSpacer size="s" />
|
||||
<EuiCodeEditor
|
||||
value={JSON.stringify(json, null, 2)}
|
||||
readOnly={true}
|
||||
mode="json"
|
||||
<EuiCodeBlock
|
||||
aria-label={i18n.translate(
|
||||
'xpack.transform.transformList.transformDetails.expandedRowJsonPane',
|
||||
{
|
||||
defaultMessage: 'JSON of transform configuration',
|
||||
}
|
||||
)}
|
||||
fontSize="s"
|
||||
language="json"
|
||||
paddingSize="s"
|
||||
style={{ width: '100%' }}
|
||||
theme="textmate"
|
||||
/>
|
||||
isCopyable
|
||||
>
|
||||
value={JSON.stringify(json, null, 2)}
|
||||
</EuiCodeBlock>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}> </EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
|
|
|
@ -385,9 +385,9 @@ export function TransformWizardProvider({ getService, getPageObjects }: FtrProvi
|
|||
async assertRuntimeMappingsEditorContent(expectedContent: string[]) {
|
||||
await this.assertRuntimeMappingsEditorExists();
|
||||
|
||||
const runtimeMappingsEditorString = await aceEditor.getValue(
|
||||
'transformAdvancedRuntimeMappingsEditor'
|
||||
);
|
||||
const wrapper = await testSubjects.find('transformAdvancedRuntimeMappingsEditor');
|
||||
const editor = await wrapper.findByCssSelector('.monaco-editor .view-lines');
|
||||
const runtimeMappingsEditorString = await editor.getVisibleText();
|
||||
// Not all lines may be visible in the editor and thus aceEditor may not return all lines.
|
||||
// This means we might not get back valid JSON so we only test against the first few lines
|
||||
// and see if the string matches.
|
||||
|
@ -624,7 +624,9 @@ export function TransformWizardProvider({ getService, getPageObjects }: FtrProvi
|
|||
},
|
||||
|
||||
async assertAdvancedPivotEditorContent(expectedValue: string[]) {
|
||||
const advancedEditorString = await aceEditor.getValue('transformAdvancedPivotEditor');
|
||||
const wrapper = await testSubjects.find('transformAdvancedPivotEditor');
|
||||
const editor = await wrapper.findByCssSelector('.monaco-editor .view-lines');
|
||||
const advancedEditorString = await editor.getVisibleText();
|
||||
// Not all lines may be visible in the editor and thus aceEditor may not return all lines.
|
||||
// This means we might not get back valid JSON so we only test against the first few lines
|
||||
// and see if the string matches.
|
||||
|
|
Loading…
Reference in a new issue