diff --git a/CHANGELOG.md b/CHANGELOG.md index 30fda8c0b68e..201751c271b2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,8 @@ - Added optional virtualized line rendering to `EuiCodeBlock` ([#4952](https://github.com/elastic/eui/pull/4952)) - Added `current` as a `status` of `EuiHorizontalStep` ([#4911](https://github.com/elastic/eui/pull/4911)) - Exported `onChange` type for `EuiSearchBar` ([#4968](https://github.com/elastic/eui/pull/4968)) +- Added `warnOnce` service ([#4984](https://github.com/elastic/eui/pull/4984)) +- Added a console warning for the deprecation of `EuiCodeEditor` ([#4984](https://github.com/elastic/eui/pull/4984)) **Bug fixes** diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js index 0e93e848dba0..b69df50309b1 100644 --- a/src-docs/src/views/code/code_example.js +++ b/src-docs/src/views/code/code_example.js @@ -4,10 +4,12 @@ import { Link } from 'react-router-dom'; import { GuideSectionTypes } from '../../components'; import { + EuiCallOut, EuiCode, EuiCodeBlock, EuiLink, EuiText, + EuiSpacer, } from '../../../../src/components'; import { codeBlockConfig, codeConfig } from './playground'; @@ -39,6 +41,21 @@ export const CodeExample = { title: 'Code', intro: ( <> + +

+ EuiCode and EuiCodeBlock are + intended to render static lines or blocks of code in{' '} + read-only contexts. If you need capabilities to edit, + or want to print long code (e.g., printing JSON from an API), we + recommend installing a version of Monaco. If you are building within + the Kibana platform, you can use their{' '} + + CodeEditor + + . +

+
+

The EuiCode and EuiCodeBlock{' '} diff --git a/src/components/code_editor/code_editor.tsx b/src/components/code_editor/code_editor.tsx index 9da2bd5219b9..2438271b7916 100644 --- a/src/components/code_editor/code_editor.tsx +++ b/src/components/code_editor/code_editor.tsx @@ -11,7 +11,7 @@ import classNames from 'classnames'; import AceEditor, { IAceEditorProps } from 'react-ace'; import { keysOf } from '../common'; -import { htmlIdGenerator, keys } from '../../services'; +import { htmlIdGenerator, keys, warnOnce } from '../../services'; import { EuiI18n } from '../i18n'; const DEFAULT_MODE = 'text'; @@ -79,6 +79,15 @@ export class EuiCodeEditor extends Component< name: htmlIdGenerator()(), }; + constructor(props: EuiCodeEditorProps) { + super(props); + warnOnce( + 'EuiCodeEditor', + `[EUI] - DEPRECATION: \`EuiCodeEditor\` is deprecated and will be removed in a future release. +See https://ela.st/euicodeeditor for migration options.` + ); + } + idGenerator = htmlIdGenerator(); aceEditor: AceEditor | null = null; editorHint: HTMLButtonElement | null = null; diff --git a/src/services/console/index.ts b/src/services/console/index.ts new file mode 100644 index 000000000000..bc62773d0e0a --- /dev/null +++ b/src/services/console/index.ts @@ -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 + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export * from './warn_once'; diff --git a/src/services/console/warn_once.test.ts b/src/services/console/warn_once.test.ts new file mode 100644 index 000000000000..5ecff2cf11e1 --- /dev/null +++ b/src/services/console/warn_once.test.ts @@ -0,0 +1,28 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { warnOnce } from './warn_once'; + +describe('warnOnce', () => { + let warn: jest.SpyInstance; + beforeAll(() => { + warn = jest.spyOn(console, 'warn').mockImplementation(() => {}); + }); + it('should warn only once per id', () => { + warnOnce('1', 'message'); + warnOnce('1', 'message'); + expect(warn).toBeCalledTimes(1); + warnOnce('2', 'message'); + expect(warn).toBeCalledTimes(2); + warnOnce('2', 'message'); + expect(warn).toBeCalledTimes(2); + warnOnce('1', 'message'); + expect(warn).toBeCalledTimes(2); + }); + afterAll(() => warn.mockRestore()); +}); diff --git a/src/services/console/warn_once.ts b/src/services/console/warn_once.ts new file mode 100644 index 000000000000..c3d58dc6a7f9 --- /dev/null +++ b/src/services/console/warn_once.ts @@ -0,0 +1,16 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +const log: { [id: string]: boolean } = {}; + +export const warnOnce = (id: string, message: string) => { + if (!log[id] && console && console.warn) { + log[id] = true; + console.warn(message); + } +}; diff --git a/src/services/index.ts b/src/services/index.ts index e8a1df92c146..d358f4fd9a65 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -66,6 +66,8 @@ export { export { useColorPickerState, useColorStopsState } from './color_picker'; +export * from './console'; + export { copyToClipboard } from './copy_to_clipboard'; export {