From 426e94ec780a7d928a550b739c2a0f1093d23ace Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Tue, 27 Jul 2021 17:02:16 -0500 Subject: [PATCH 01/10] console warning --- src/components/code_editor/code_editor.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/code_editor/code_editor.tsx b/src/components/code_editor/code_editor.tsx index 9da2bd5219b..f4e9b772197 100644 --- a/src/components/code_editor/code_editor.tsx +++ b/src/components/code_editor/code_editor.tsx @@ -14,6 +14,9 @@ import { keysOf } from '../common'; import { htmlIdGenerator, keys } from '../../services'; import { EuiI18n } from '../i18n'; +console.warn(`[EUI] - DEPRECATION: \`EuiCodeEditor\` is deprecated and will be removed in a future release. +See https://ela.st/euicodeeditor for migration options.`); + const DEFAULT_MODE = 'text'; const DEFAULT_THEME = 'textmate'; From bdae4b461abf85addc8504792cac707cab4922a1 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Tue, 27 Jul 2021 17:03:38 -0500 Subject: [PATCH 02/10] update code docs --- src-docs/src/views/code/code_example.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js index 0e93e848dba..8edcf8d52e8 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,23 @@ 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), use{' '} + + CodeEditor (within Kibana) + + . +

+ +

The EuiCode and EuiCodeBlock{' '} From 485b8865dbe3cc935a9f647af6ebfa5c4ac594e8 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Tue, 27 Jul 2021 17:22:53 -0500 Subject: [PATCH 03/10] CL --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 86d744b50bb..37f9fe1c2e4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ - Updated `EuiText`s `blockquote` font-size/line-height to match the base font-size/line-height which is the same as paragraphs ([#4663](https://github.com/elastic/eui/pull/4663)) - Added `markdownFormatProps` prop to `EuiMarkdownEditor` to extend the props passed to the rendered `EuiMarkdownFormat` ([#4663](https://github.com/elastic/eui/pull/4663)) - Added optional virtualized line rendering to `EuiCodeBlock` ([#4952](https://github.com/elastic/eui/pull/4952)) +- Added a console warning for the deprecation of `EuiCodeEditor` ([#4984](https://github.com/elastic/eui/pull/4984)) **Bug fixes** From 09e5a402bc2115572b439b762f51ca31b6817919 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 28 Jul 2021 10:29:12 -0500 Subject: [PATCH 04/10] warnOnce service --- src/services/console/index.ts | 9 +++++++++ src/services/console/warn_once.test.ts | 25 +++++++++++++++++++++++++ src/services/console/warn_once.ts | 16 ++++++++++++++++ src/services/index.ts | 2 ++ 4 files changed, 52 insertions(+) create mode 100644 src/services/console/index.ts create mode 100644 src/services/console/warn_once.test.ts create mode 100644 src/services/console/warn_once.ts diff --git a/src/services/console/index.ts b/src/services/console/index.ts new file mode 100644 index 00000000000..bc62773d0e0 --- /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 00000000000..72957c5b1ac --- /dev/null +++ b/src/services/console/warn_once.test.ts @@ -0,0 +1,25 @@ +/* + * 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', () => { + const 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); + }); + warn.mockReset(); +}); diff --git a/src/services/console/warn_once.ts b/src/services/console/warn_once.ts new file mode 100644 index 00000000000..6e6493c0b15 --- /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]) { + log[id] = true; + console.warn(message); + } +}; diff --git a/src/services/index.ts b/src/services/index.ts index e8a1df92c14..d358f4fd9a6 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 { From dee7b795b9ee51408a1ec99cf6ee3fe7a7eaa5fb Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 28 Jul 2021 10:30:43 -0500 Subject: [PATCH 05/10] use warnOnce --- src/components/code_editor/code_editor.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/code_editor/code_editor.tsx b/src/components/code_editor/code_editor.tsx index f4e9b772197..2438271b791 100644 --- a/src/components/code_editor/code_editor.tsx +++ b/src/components/code_editor/code_editor.tsx @@ -11,12 +11,9 @@ 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'; -console.warn(`[EUI] - DEPRECATION: \`EuiCodeEditor\` is deprecated and will be removed in a future release. -See https://ela.st/euicodeeditor for migration options.`); - const DEFAULT_MODE = 'text'; const DEFAULT_THEME = 'textmate'; @@ -82,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; From 4bce8da4bfc7dfb78c997176730961178e1fc340 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 28 Jul 2021 10:35:00 -0500 Subject: [PATCH 06/10] console.warn check --- src/services/console/warn_once.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/services/console/warn_once.ts b/src/services/console/warn_once.ts index 6e6493c0b15..c3d58dc6a7f 100644 --- a/src/services/console/warn_once.ts +++ b/src/services/console/warn_once.ts @@ -9,7 +9,7 @@ const log: { [id: string]: boolean } = {}; export const warnOnce = (id: string, message: string) => { - if (!log[id]) { + if (!log[id] && console && console.warn) { log[id] = true; console.warn(message); } From 23ee3921004acb14ca20ed55acf757106d80f843 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 28 Jul 2021 10:37:27 -0500 Subject: [PATCH 07/10] docs suggestions --- src-docs/src/views/code/code_example.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js index 8edcf8d52e8..ed721087fb7 100644 --- a/src-docs/src/views/code/code_example.js +++ b/src-docs/src/views/code/code_example.js @@ -41,14 +41,15 @@ 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), use{' '} + 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{' '} From a2b497cafa4d03159e3052d08e6d9807371b3056 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 28 Jul 2021 10:41:26 -0500 Subject: [PATCH 08/10] clean up --- src-docs/src/views/code/code_example.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js index ed721087fb7..b69df50309b 100644 --- a/src-docs/src/views/code/code_example.js +++ b/src-docs/src/views/code/code_example.js @@ -45,15 +45,12 @@ export const CodeExample = {

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 (within Kibana) + 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 .

From 00bad0c0126f20a1eb140bfa077094339bcf5366 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 28 Jul 2021 11:14:02 -0500 Subject: [PATCH 09/10] Apply suggestions from code review Co-authored-by: Chandler Prall --- src/services/console/warn_once.test.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/services/console/warn_once.test.ts b/src/services/console/warn_once.test.ts index 72957c5b1ac..e7747f7533a 100644 --- a/src/services/console/warn_once.test.ts +++ b/src/services/console/warn_once.test.ts @@ -9,7 +9,10 @@ import { warnOnce } from './warn_once'; describe('warnOnce', () => { - const warn = jest.spyOn(console, 'warn').mockImplementation(() => {}); + let warn; + beforeAll(() => { + warn = jest.spyOn(console, 'warn').mockImplementation(() => {}); + }) it('should warn only once per id', () => { warnOnce('1', 'message'); warnOnce('1', 'message'); @@ -21,5 +24,5 @@ describe('warnOnce', () => { warnOnce('1', 'message'); expect(warn).toBeCalledTimes(2); }); - warn.mockReset(); + afterAll(() => warn.mockRestore()); }); From f4521c6b14aa02befde4f2ad7e61cd32338646d7 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 28 Jul 2021 11:43:02 -0500 Subject: [PATCH 10/10] fix type --- src/services/console/warn_once.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/services/console/warn_once.test.ts b/src/services/console/warn_once.test.ts index e7747f7533a..5ecff2cf11e 100644 --- a/src/services/console/warn_once.test.ts +++ b/src/services/console/warn_once.test.ts @@ -9,10 +9,10 @@ import { warnOnce } from './warn_once'; describe('warnOnce', () => { - let warn; + let warn: jest.SpyInstance; beforeAll(() => { warn = jest.spyOn(console, 'warn').mockImplementation(() => {}); - }) + }); it('should warn only once per id', () => { warnOnce('1', 'message'); warnOnce('1', 'message');