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

[Index Management] Migrate code editors to Monaco (#155598)

Browse source
This commit is contained in:
Ignacio Rivas 2023-04-25 16:11:57 +02:00 • committed by GitHub
parent 5ed5fd4555
commit ae76801a2e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 106 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

17
x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx
View file

@ -21,6 +21,23 @@ import {
import { setup } from './template_create.helpers';
import { TemplateFormTestBed } from './template_form.helpers';
jest.mock('@kbn/kibana-react-plugin/public', () => {
const original = jest.requireActual('@kbn/kibana-react-plugin/public');
return {
...original,
// Mocking CodeEditor, which uses React Monaco under the hood
CodeEditor: (props: any) => (
<input
data-test-subj={props['data-test-subj'] || 'mockCodeEditor'}
data-currentvalue={props.value}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
props.onChange(e.currentTarget.getAttribute('data-currentvalue'));
}}
/>
),
};
});
jest.mock('@elastic/eui', () => {
const original = jest.requireActual('@elastic/eui');

17
x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_edit.test.tsx
View file

@ -28,6 +28,23 @@ const MAPPING = {
},
};
jest.mock('@kbn/kibana-react-plugin/public', () => {
const original = jest.requireActual('@kbn/kibana-react-plugin/public');
return {
...original,
// Mocking CodeEditor, which uses React Monaco under the hood
CodeEditor: (props: any) => (
<input
data-test-subj={props['data-test-subj'] || 'mockCodeEditor'}
data-currentvalue={props.value}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
props.onChange(e.currentTarget.getAttribute('data-currentvalue'));
}}
/>
),
};
});
jest.mock('@elastic/eui', () => {
const origial = jest.requireActual('@elastic/eui');

22
x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_form.helpers.ts
View file

@ -219,18 +219,13 @@ export const formSetup = async (initTestBed: SetupFunc<TestSubjects>) => {
const completeStepThree = async (settings?: string) => {
const { find, component } = testBed;
await act(async () => {
if (settings) {
find('settingsEditor').simulate('change', {
jsonString: settings,
}); // Using mocked EuiCodeEditor
jest.advanceTimersByTime(0);
}
});
if (settings) {
find('settingsEditor').getDOMNode().setAttribute('data-currentvalue', settings);
find('settingsEditor').simulate('change');
}
await act(async () => {
clickNextButton();
jest.advanceTimersByTime(0);
});
component.update();
@ -258,13 +253,8 @@ export const formSetup = async (initTestBed: SetupFunc<TestSubjects>) => {
const { find, component } = testBed;
if (aliases) {
await act(async () => {
find('aliasesEditor').simulate('change', {
jsonString: aliases,
}); // Using mocked EuiCodeEditor
jest.advanceTimersByTime(0); // advance timers to allow the form to validate
});
component.update();
find('aliasesEditor').getDOMNode().setAttribute('data-currentvalue', aliases);
find('aliasesEditor').simulate('change');
}
await act(async () => {

17
x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/component_template_create.test.tsx
View file

@ -14,6 +14,23 @@ import { setupEnvironment } from './helpers';
import { API_BASE_PATH } from './helpers/constants';
import { setup, ComponentTemplateCreateTestBed } from './helpers/component_template_create.helpers';
jest.mock('@kbn/kibana-react-plugin/public', () => {
const original = jest.requireActual('@kbn/kibana-react-plugin/public');
return {
...original,
// Mocking CodeEditor, which uses React Monaco under the hood
CodeEditor: (props: any) => (
<input
data-test-subj={props['data-test-subj'] || 'mockCodeEditor'}
data-currentvalue={props.value}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
props.onChange(e.currentTarget.getAttribute('data-currentvalue'));
}}
/>
),
};
});
jest.mock('@elastic/eui', () => {
const original = jest.requireActual('@elastic/eui');

17
x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/component_template_edit.test.tsx
View file

@ -13,6 +13,23 @@ import { setupEnvironment } from './helpers';
import { API_BASE_PATH } from './helpers/constants';
import { setup, ComponentTemplateEditTestBed } from './helpers/component_template_edit.helpers';
jest.mock('@kbn/kibana-react-plugin/public', () => {
const original = jest.requireActual('@kbn/kibana-react-plugin/public');
return {
...original,
// Mocking CodeEditor, which uses React Monaco under the hood
CodeEditor: (props: any) => (
<input
data-test-subj={props['data-test-subj'] || 'mockCodeEditor'}
data-currentvalue={props.value}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
props.onChange(e.currentTarget.getAttribute('data-currentvalue'));
}}
/>
),
};
});
jest.mock('@elastic/eui', () => {
const original = jest.requireActual('@elastic/eui');

24
x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/helpers/component_template_form.helpers.ts
View file

@ -66,14 +66,14 @@ export const getFormActions = (testBed: TestBed) => {
const completeStepSettings = async (settings?: { [key: string]: any }) => {
const { find, component } = testBed;
const settingsValue = JSON.stringify(settings);
if (settingsValue) {
find('settingsEditor').getDOMNode().setAttribute('data-currentvalue', settingsValue);
find('settingsEditor').simulate('change');
}
await act(async () => {
if (settings) {
find('settingsEditor').simulate('change', {
jsonString: JSON.stringify(settings),
}); // Using mocked EuiCodeEditor
}
clickNextButton();
});
@ -119,14 +119,14 @@ export const getFormActions = (testBed: TestBed) => {
const completeStepAliases = async (aliases?: { [key: string]: any }) => {
const { find, component } = testBed;
const aliasesValue = JSON.stringify(aliases);
if (aliasesValue) {
find('aliasesEditor').getDOMNode().setAttribute('data-currentvalue', aliasesValue);
find('aliasesEditor').simulate('change');
}
await act(async () => {
if (aliases) {
find('aliasesEditor').simulate('change', {
jsonString: JSON.stringify(aliases),
}); // Using mocked EuiCodeEditor
}
clickNextButton();
});

25
x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases.tsx
View file

@ -18,8 +18,9 @@ import {
EuiCode,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { CodeEditor } from '@kbn/kibana-react-plugin/public';
import { EuiCodeEditor, Forms } from '../../../../../shared_imports';
import { Forms } from '../../../../../shared_imports';
import { useJsonStep } from './use_json_step';
interface Props {
@ -105,29 +106,23 @@ export const StepAliases: React.FunctionComponent<Props> = React.memo(
error={error}
fullWidth
>
<EuiCodeEditor
mode="json"
theme="textmate"
width="100%"
height="500px"
setOptions={{
showLineNumbers: false,
<CodeEditor
languageId="json"
value={jsonContent}
data-test-subj="aliasesEditor"
height={500}
options={{
lineNumbers: 'off',
tabSize: 2,
automaticLayout: true,
}}
editorProps={{
$blockScrolling: Infinity,
}}
showGutter={false}
minLines={6}
aria-label={i18n.translate(
'xpack.idxMgmt.formWizard.stepAliases.fieldAliasesAriaLabel',
{
defaultMessage: 'Aliases code editor',
}
)}
value={jsonContent}
onChange={setJsonContent}
data-test-subj="aliasesEditor"
/>
</EuiFormRow>
</div>

25
x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings.tsx
View file

@ -18,8 +18,9 @@ import {
EuiCode,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { CodeEditor } from '@kbn/kibana-react-plugin/public';
import { EuiCodeEditor, Forms } from '../../../../../shared_imports';
import { Forms } from '../../../../../shared_imports';
import { useJsonStep } from './use_json_step';
interface Props {
@ -99,29 +100,23 @@ export const StepSettings: React.FunctionComponent<Props> = React.memo(
error={error}
fullWidth
>
<EuiCodeEditor
mode="json"
theme="textmate"
width="100%"
height="500px"
setOptions={{
showLineNumbers: false,
<CodeEditor
languageId="json"
value={jsonContent}
data-test-subj="settingsEditor"
height={500}
options={{
lineNumbers: 'off',
tabSize: 2,
automaticLayout: true,
}}
editorProps={{
$blockScrolling: Infinity,
}}
showGutter={false}
minLines={6}
aria-label={i18n.translate(
'xpack.idxMgmt.formWizard.stepSettings.fieldIndexSettingsAriaLabel',
{
defaultMessage: 'Index settings editor',
}
)}
value={jsonContent}
onChange={setJsonContent}
data-test-subj="settingsEditor"
/>
</EuiFormRow>
</div>