maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[ML] Transforms: replace deprecated EuiCodeEditor (#108310)

Browse source 
* 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:
Melissa Alvarez 2021-08-17 20:38:12 -04:00 committed by GitHub
parent 869c4b0d8f
commit 4e0375f626
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 203 additions and 157 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_pivot_editor/advanced_pivot_editor.tsx
View file

@ -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>
);

80
x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_runtime_mappings_editor/advanced_runtime_mappings_editor.tsx
View file

@ -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))

76
x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_source_editor/advanced_source_editor.tsx
View file

@ -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>
);
};

23
x-pack/plugins/transform/public/app/sections/create_transform/components/aggregation_list/popover_form.tsx
View file

@ -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

23
x-pack/plugins/transform/public/app/sections/create_transform/components/group_by_list/popover_form.tsx
View file

@ -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>

24
x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/editor_form.tsx
View file

@ -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 || ''}
/>
</>
);

59
x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/__snapshots__/expanded_row_json_pane.test.tsx.snap generated
View file

@ -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}

30
x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row_json_pane.tsx
View file

@ -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}>&nbsp;</EuiFlexItem>
</EuiFlexGroup>

10
x-pack/test/functional/services/transform/wizard.ts
View file

@ -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.