From a95c9469bc105c3211dc820266d39b9bacaebe91 Mon Sep 17 00:00:00 2001 From: Ignacio Rivas Date: Mon, 7 Mar 2022 14:56:29 +0100 Subject: [PATCH 01/18] wip: create code scaffold for component --- .../components/view_api_request/index.ts | 9 +++ .../view_api_request/view_api_request.tsx | 65 +++++++++++++++++++ src/plugins/es_ui_shared/public/index.ts | 1 + 3 files changed, 75 insertions(+) create mode 100644 src/plugins/es_ui_shared/public/components/view_api_request/index.ts create mode 100644 src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx diff --git a/src/plugins/es_ui_shared/public/components/view_api_request/index.ts b/src/plugins/es_ui_shared/public/components/view_api_request/index.ts new file mode 100644 index 0000000000000..75b2b1ac27fbe --- /dev/null +++ b/src/plugins/es_ui_shared/public/components/view_api_request/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 { ViewApiRequest } from './view_api_request'; diff --git a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx new file mode 100644 index 0000000000000..b5078252f44ad --- /dev/null +++ b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx @@ -0,0 +1,65 @@ +/* + * 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 React from 'react'; +import { FormattedMessage } from '@kbn/i18n-react'; + +import { + EuiFlyout, + EuiFlyoutHeader, + EuiTitle, + EuiFlyoutBody, + EuiFlyoutFooter, + EuiButtonEmpty, + EuiText, + EuiSpacer, + EuiCodeBlock, +} from '@elastic/eui'; + +interface Props { + request: string; + title: string; + description: string; + closeFlyout: () => void; +} + +export const ViewApiRequest: React.FunctionComponent = ({ request, title, description, closeFlyout }) => { + return ( + + + +

{title}

+ + + + + +

{description}

+ + + + {request} + + + + + + + + + + ); +}; diff --git a/src/plugins/es_ui_shared/public/index.ts b/src/plugins/es_ui_shared/public/index.ts index c21587c9a6040..1fc713876a7f9 100644 --- a/src/plugins/es_ui_shared/public/index.ts +++ b/src/plugins/es_ui_shared/public/index.ts @@ -25,6 +25,7 @@ export type { EuiCodeEditorProps } from './components/code_editor'; export { EuiCodeEditor } from './components/code_editor'; export type { Frequency } from './components/cron_editor'; export { CronEditor } from './components/cron_editor'; +export { ViewApiRequest } from './components/view_api_request'; export type { SendRequestConfig, From dba25357bf96e0d44074dcc7151989b10a714dcf Mon Sep 17 00:00:00 2001 From: Ignacio Rivas Date: Mon, 7 Mar 2022 15:13:18 +0100 Subject: [PATCH 02/18] Implement new flyout in ingest pipelines --- .../view_api_request/view_api_request.tsx | 4 +- .../pipeline_request_flyout/index.ts | 2 +- .../pipeline_request_flyout.tsx | 111 +++++++----------- .../pipeline_request_flyout_provider.tsx | 46 -------- .../ingest_pipelines/public/shared_imports.ts | 1 + 5 files changed, 47 insertions(+), 117 deletions(-) delete mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout_provider.tsx diff --git a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx index b5078252f44ad..a7447ecc13735 100644 --- a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx +++ b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx @@ -33,13 +33,13 @@ export const ViewApiRequest: React.FunctionComponent = ({ request, title, -

{title}

+

{title}

 -

{description}

+

{description}

 diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/index.ts index 5905d10faad85..8368dbf93b96c 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/index.ts +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/index.ts @@ -5,4 +5,4 @@ * 2.0. */ -export { PipelineRequestFlyoutProvider as PipelineRequestFlyout } from './pipeline_request_flyout_provider'; +export { PipelineRequestFlyout } from './pipeline_request_flyout'; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx index feb7d55145083..19abdfcda3902 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx @@ -5,86 +5,61 @@ * 2.0. */ -import React, { useRef } from 'react'; -import { FormattedMessage } from '@kbn/i18n-react'; - -import { - EuiButtonEmpty, - EuiCodeBlock, - EuiFlyout, - EuiFlyoutBody, - EuiFlyoutFooter, - EuiFlyoutHeader, - EuiSpacer, - EuiText, - EuiTitle, -} from '@elastic/eui'; +import React, { useState, useEffect, FunctionComponent } from 'react'; +import { i18n } from '@kbn/i18n'; import { Pipeline } from '../../../../../common/types'; +import { useFormContext, ViewApiRequest } from '../../../../shared_imports'; + +import { ReadProcessorsFunction } from '../types'; interface Props { - pipeline: Pipeline; closeFlyout: () => void; + readProcessors: ReadProcessorsFunction; } -export const PipelineRequestFlyout: React.FunctionComponent = ({ +export const PipelineRequestFlyout: FunctionComponent = ({ closeFlyout, - pipeline, + readProcessors, }) => { - const { name, ...pipelineBody } = pipeline; - const endpoint = `PUT _ingest/pipeline/${name || ''}`; - const payload = JSON.stringify(pipelineBody, null, 2); - const request = `${endpoint}\n${payload}`; - // Hack so that copied-to-clipboard value updates as content changes - // Related issue: https://github.com/elastic/eui/issues/3321 - const uuid = useRef(0); - uuid.current++; + const form = useFormContext(); + const [formData, setFormData] = useState({} as Pipeline); + const pipeline = {...formData, ...readProcessors()}; - return ( - - - -

- {name ? ( - - ) : ( - - )} -

- - + useEffect(() => { + const subscription = form.subscribe(async ({ isValid, validate, data }) => { + const isFormValid = isValid ?? (await validate()); + if (isFormValid) { + setFormData(data.format() as Pipeline); + } + }); - - -

- -

- + return subscription.unsubscribe; + }, [form]); - - - {request} - - + const { name, ...pipelineBody } = pipeline; + const endpoint = `PUT _ingest/pipeline/${name || ''}`; + const request = `${endpoint}\n${JSON.stringify(pipelineBody, null, 2)}`; - - - - - - + const title = name + ? i18n.translate('xpack.ingestPipelines.requestFlyout.namedTitle', { + defaultMessage: "Request for '{name}'", + values: { name }, + }) : + i18n.translate('xpack.ingestPipelines.requestFlyout.unnamedTitle', { + defaultMessage: 'Request', + }); + + return ( + ); }; diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout_provider.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout_provider.tsx deleted file mode 100644 index 0b91b07a5a526..0000000000000 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout_provider.tsx +++ /dev/null @@ -1,46 +0,0 @@ -/* - * 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; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import React, { useState, useEffect, FunctionComponent } from 'react'; - -import { Pipeline } from '../../../../../common/types'; -import { useFormContext } from '../../../../shared_imports'; - -import { ReadProcessorsFunction } from '../types'; - -import { PipelineRequestFlyout } from './pipeline_request_flyout'; - -interface Props { - closeFlyout: () => void; - readProcessors: ReadProcessorsFunction; -} - -export const PipelineRequestFlyoutProvider: FunctionComponent = ({ - closeFlyout, - readProcessors, -}) => { - const form = useFormContext(); - const [formData, setFormData] = useState({} as Pipeline); - - useEffect(() => { - const subscription = form.subscribe(async ({ isValid, validate, data }) => { - const isFormValid = isValid ?? (await validate()); - if (isFormValid) { - setFormData(data.format() as Pipeline); - } - }); - - return subscription.unsubscribe; - }, [form]); - - return ( - - ); -}; diff --git a/x-pack/plugins/ingest_pipelines/public/shared_imports.ts b/x-pack/plugins/ingest_pipelines/public/shared_imports.ts index f4c24f622e752..82aa51bbdfba5 100644 --- a/x-pack/plugins/ingest_pipelines/public/shared_imports.ts +++ b/x-pack/plugins/ingest_pipelines/public/shared_imports.ts @@ -30,6 +30,7 @@ export { XJson, JsonEditor, attemptToURIDecode, + ViewApiRequest, } from '../../../../src/plugins/es_ui_shared/public/'; export type { From 9817d6be7f41c51228049f44615dfba0178f5ea4 Mon Sep 17 00:00:00 2001 From: Ignacio Rivas Date: Mon, 7 Mar 2022 15:18:19 +0100 Subject: [PATCH 03/18] Fix linter and i18n issues --- .../view_api_request/view_api_request.tsx | 12 +++++----- .../pipeline_request_flyout.tsx | 22 +++++++++---------- .../translations/translations/ja-JP.json | 1 - .../translations/translations/zh-CN.json | 1 - 4 files changed, 17 insertions(+), 19 deletions(-) diff --git a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx index a7447ecc13735..65fcdc4728e1b 100644 --- a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx +++ b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx @@ -28,7 +28,12 @@ interface Props { closeFlyout: () => void; } -export const ViewApiRequest: React.FunctionComponent = ({ request, title, description, closeFlyout }) => { +export const ViewApiRequest: React.FunctionComponent = ({ + request, + title, + description, + closeFlyout, +}) => { return ( @@ -54,10 +59,7 @@ export const ViewApiRequest: React.FunctionComponent = ({ request, title, flush="left" data-test-subj="apiRequestFlyoutClose" > - + diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx index 19abdfcda3902..241221cd95c0a 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx @@ -24,7 +24,7 @@ export const PipelineRequestFlyout: FunctionComponent = ({ }) => { const form = useFormContext(); const [formData, setFormData] = useState({} as Pipeline); - const pipeline = {...formData, ...readProcessors()}; + const pipeline = { ...formData, ...readProcessors() }; useEffect(() => { const subscription = form.subscribe(async ({ isValid, validate, data }) => { @@ -43,21 +43,19 @@ export const PipelineRequestFlyout: FunctionComponent = ({ const title = name ? i18n.translate('xpack.ingestPipelines.requestFlyout.namedTitle', { - defaultMessage: "Request for '{name}'", - values: { name }, - }) : - i18n.translate('xpack.ingestPipelines.requestFlyout.unnamedTitle', { - defaultMessage: 'Request', - }); + defaultMessage: "Request for '{name}'", + values: { name }, + }) + : i18n.translate('xpack.ingestPipelines.requestFlyout.unnamedTitle', { + defaultMessage: 'Request', + }); return ( diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index ff06f07cc83cd..cd50babd12f16 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -15791,7 +15791,6 @@ "xpack.ingestPipelines.processors.label.urldecode": "URLデコード", "xpack.ingestPipelines.processors.label.userAgent": "ユーザーエージェント", "xpack.ingestPipelines.processors.uriPartsDescription": "Uniform Resource Identifier（URI）文字列を解析し、コンポーネントをオブジェクトとして抽出します。", - "xpack.ingestPipelines.requestFlyout.closeButtonLabel": "閉じる", "xpack.ingestPipelines.requestFlyout.descriptionText": "このElasticsearchリクエストは、このパイプラインを作成または更新します。", "xpack.ingestPipelines.requestFlyout.namedTitle": "「{name}」のリクエスト", "xpack.ingestPipelines.requestFlyout.unnamedTitle": "リクエスト", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 27d3be935ddc6..d81fad7247fbc 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -15815,7 +15815,6 @@ "xpack.ingestPipelines.processors.label.urldecode": "URL 解码", "xpack.ingestPipelines.processors.label.userAgent": "用户代理", "xpack.ingestPipelines.processors.uriPartsDescription": "解析统一资源标识符 (URI) 字符串并提取其组件作为对象。", - "xpack.ingestPipelines.requestFlyout.closeButtonLabel": "关闭", "xpack.ingestPipelines.requestFlyout.descriptionText": "此 Elasticsearch 请求将创建或更新管道。", "xpack.ingestPipelines.requestFlyout.namedTitle": "对“{name}”的请求", "xpack.ingestPipelines.requestFlyout.unnamedTitle": "请求", From fad955e9dfeb7b0e059da555b14100f259f1b4d5 Mon Sep 17 00:00:00 2001 From: Ignacio Rivas Date: Tue, 8 Mar 2022 13:33:07 +0100 Subject: [PATCH 04/18] Add base tests for new component --- .../view_api_request.test.tsx.snap | 82 +++++++++++++++++++ .../view_api_request.test.tsx | 39 +++++++++ .../view_api_request/view_api_request.tsx | 4 +- 3 files changed, 123 insertions(+), 2 deletions(-) create mode 100644 src/plugins/es_ui_shared/public/components/view_api_request/__snapshots__/view_api_request.test.tsx.snap create mode 100644 src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.test.tsx diff --git a/src/plugins/es_ui_shared/public/components/view_api_request/__snapshots__/view_api_request.test.tsx.snap b/src/plugins/es_ui_shared/public/components/view_api_request/__snapshots__/view_api_request.test.tsx.snap new file mode 100644 index 0000000000000..9fbc11e2623d0 --- /dev/null +++ b/src/plugins/es_ui_shared/public/components/view_api_request/__snapshots__/view_api_request.test.tsx.snap @@ -0,0 +1,82 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiCodeEditor is rendered 1`] = ` +
+ +
+ +`; diff --git a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.test.tsx b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.test.tsx new file mode 100644 index 0000000000000..b0708b08446cb --- /dev/null +++ b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.test.tsx @@ -0,0 +1,39 @@ +/* + * 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 React from 'react'; +import { act } from 'react-dom/test-utils'; +import { mountWithI18nProvider } from '@kbn/test-jest-helpers'; +import { ViewApiRequest } from './view_api_request'; +import { findTestSubject, takeMountedSnapshot } from '@elastic/eui/lib/test'; + +const payload = { + title: 'Test title', + description: 'Test description', + request: 'Hello world', + closeFlyout: jest.fn(), +}; + +describe('EuiCodeEditor', () => { + test('is rendered', () => { + const component = mountWithI18nProvider(); + expect(takeMountedSnapshot(component)).toMatchSnapshot(); + }); + + describe('props', () => { + test('on closeFlyout', async () => { + const component = mountWithI18nProvider(); + + await act(async () => { + findTestSubject(component, 'apiRequestFlyoutClose').simulate('click'); + }); + + expect(payload.closeFlyout).toBeCalled(); + }); + }); +}); diff --git a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx index 65fcdc4728e1b..0ec8664a52c23 100644 --- a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx +++ b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx @@ -22,16 +22,16 @@ import { } from '@elastic/eui'; interface Props { - request: string; title: string; description: string; + request: string; closeFlyout: () => void; } export const ViewApiRequest: React.FunctionComponent = ({ - request, title, description, + request, closeFlyout, }) => { return ( From e77658a10ee7ef6cf41f3d80f410dc5a2c058ae1 Mon Sep 17 00:00:00 2001 From: Ignacio Rivas Date: Tue, 8 Mar 2022 16:26:36 +0100 Subject: [PATCH 05/18] Wire everything together --- .../view_api_request.test.tsx | 4 +- .../view_api_request/view_api_request.tsx | 76 ++++++++++++++++++- .../pipeline_request_flyout.tsx | 6 +- .../public/application/index.tsx | 3 + .../application/mount_management_section.ts | 3 + 5 files changed, 86 insertions(+), 6 deletions(-) diff --git a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.test.tsx b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.test.tsx index b0708b08446cb..0c6f1e143ec50 100644 --- a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.test.tsx +++ b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.test.tsx @@ -9,14 +9,16 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; import { mountWithI18nProvider } from '@kbn/test-jest-helpers'; -import { ViewApiRequest } from './view_api_request'; import { findTestSubject, takeMountedSnapshot } from '@elastic/eui/lib/test'; +import { ViewApiRequest } from './view_api_request'; + const payload = { title: 'Test title', description: 'Test description', request: 'Hello world', closeFlyout: jest.fn(), + navigateToUrl: jest.fn(), }; describe('EuiCodeEditor', () => { diff --git a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx index 0ec8664a52c23..cc468facb52f0 100644 --- a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx +++ b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx @@ -6,8 +6,9 @@ * Side Public License, v 1. */ -import React from 'react'; +import React, { useCallback } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; +import { compressToEncodedURIComponent } from 'lz-string'; import { EuiFlyout, @@ -19,13 +20,21 @@ import { EuiText, EuiSpacer, EuiCodeBlock, + EuiFlexGroup, + EuiFlexItem, + EuiCopy, } from '@elastic/eui'; +import { ApplicationStart, Capabilities } from 'src/core/public'; +import type { UrlService } from 'src/plugins/share/common/url_service'; interface Props { title: string; description: string; request: string; closeFlyout: () => void; + navigateToUrl: ApplicationStart['navigateToUrl']; + urlService?: UrlService; + capabilities?: Capabilities; } export const ViewApiRequest: React.FunctionComponent = ({ @@ -33,7 +42,25 @@ export const ViewApiRequest: React.FunctionComponent = ({ description, request, closeFlyout, + navigateToUrl, + urlService, + capabilities, }) => { + let consoleLink: string | undefined; + + if (urlService) { + const devToolsDataUri = compressToEncodedURIComponent(request); + consoleLink = urlService.locators + .get('CONSOLE_APP_LOCATOR') + ?.useUrl({ loadFrom: `data:text/plain,${devToolsDataUri}` }); + } + // Check if both the Dev Tools UI and the Console UI are enabled. + const shouldShowDevToolsLink = capabilities?.dev_tools.show && consoleLink !== undefined; + const consolePreviewClick = useCallback( + () => consoleLink && navigateToUrl && navigateToUrl(consoleLink), + [consoleLink, navigateToUrl] + ); + return ( @@ -47,9 +74,50 @@ export const ViewApiRequest: React.FunctionComponent = ({

{description}

- - {request} - + + + + +
+ + {(copy) => ( + + + + )} + + {shouldShowDevToolsLink && ( + + + + )} +
+ + + + {request} + + + diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx index 241221cd95c0a..27d7d7188e92b 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx @@ -9,7 +9,7 @@ import React, { useState, useEffect, FunctionComponent } from 'react'; import { i18n } from '@kbn/i18n'; import { Pipeline } from '../../../../../common/types'; -import { useFormContext, ViewApiRequest } from '../../../../shared_imports'; +import { useFormContext, ViewApiRequest, useKibana } from '../../../../shared_imports'; import { ReadProcessorsFunction } from '../types'; @@ -22,6 +22,7 @@ export const PipelineRequestFlyout: FunctionComponent = ({ closeFlyout, readProcessors, }) => { + const { services } = useKibana(); const form = useFormContext(); const [formData, setFormData] = useState({} as Pipeline); const pipeline = { ...formData, ...readProcessors() }; @@ -58,6 +59,9 @@ export const PipelineRequestFlyout: FunctionComponent = ({ })} request={request} closeFlyout={closeFlyout} + navigateToUrl={services.navigateToUrl} + urlService={services.share.url} + capabilities={services.capabilities} /> ); }; diff --git a/x-pack/plugins/ingest_pipelines/public/application/index.tsx b/x-pack/plugins/ingest_pipelines/public/application/index.tsx index bab3a1e0a074a..c7f182201bbe5 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/index.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/index.tsx @@ -10,6 +10,7 @@ import React, { ReactNode } from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; import { Observable } from 'rxjs'; +import { ApplicationStart } from 'src/core/public'; import { NotificationsSetup, IUiSettingsClient, CoreTheme } from 'kibana/public'; import { ManagementAppMountParams } from 'src/plugins/management/public'; import type { SharePluginStart } from 'src/plugins/share/public'; @@ -40,6 +41,8 @@ export interface AppServices { uiSettings: IUiSettingsClient; share: SharePluginStart; fileUpload: FileUploadPluginStart; + navigateToUrl: ApplicationStart['navigateToUrl']; + capabilities: ApplicationStart['capabilities']; } export interface CoreServices { diff --git a/x-pack/plugins/ingest_pipelines/public/application/mount_management_section.ts b/x-pack/plugins/ingest_pipelines/public/application/mount_management_section.ts index f90b8077e6281..a8256c3c99953 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/mount_management_section.ts +++ b/x-pack/plugins/ingest_pipelines/public/application/mount_management_section.ts @@ -27,6 +27,7 @@ export async function mountManagementSection( const { docLinks, i18n: { Context: I18nContext }, + application: { navigateToUrl, capabilities } } = coreStart; documentationService.setup(docLinks); @@ -43,6 +44,8 @@ export async function mountManagementSection( uiSettings: coreStart.uiSettings, share: depsStart.share, fileUpload: depsStart.fileUpload, + navigateToUrl, + capabilities, }; return renderApp(element, I18nContext, services, { http }, { theme$ }); From 57f1746ad738f830919b9b48a4b32376b2653d79 Mon Sep 17 00:00:00 2001 From: Ignacio Rivas Date: Tue, 8 Mar 2022 16:32:16 +0100 Subject: [PATCH 06/18] Fix linter issues --- .../components/view_api_request/view_api_request.tsx | 10 ++++++++-- .../public/application/mount_management_section.ts | 2 +- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx index cc468facb52f0..5fc153b6d6f81 100644 --- a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx +++ b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx @@ -94,7 +94,10 @@ export const ViewApiRequest: React.FunctionComponent = ({ onClick={copy} data-test-subj="apiRequestFlyoutCopyClipboardButton" > - + )} @@ -107,7 +110,10 @@ export const ViewApiRequest: React.FunctionComponent = ({ onClick={consolePreviewClick} data-test-subj="apiRequestFlyoutOpenInConsoleButton" > - + )} diff --git a/x-pack/plugins/ingest_pipelines/public/application/mount_management_section.ts b/x-pack/plugins/ingest_pipelines/public/application/mount_management_section.ts index a8256c3c99953..9bc05184197c2 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/mount_management_section.ts +++ b/x-pack/plugins/ingest_pipelines/public/application/mount_management_section.ts @@ -27,7 +27,7 @@ export async function mountManagementSection( const { docLinks, i18n: { Context: I18nContext }, - application: { navigateToUrl, capabilities } + application: { navigateToUrl, capabilities }, } = coreStart; documentationService.setup(docLinks); From 4e29785290194d2122ff04ef8faceff40fbb0732 Mon Sep 17 00:00:00 2001 From: Ignacio Rivas Date: Wed, 9 Mar 2022 13:47:51 +0100 Subject: [PATCH 07/18] Finish writing tests --- .../view_api_request.test.tsx.snap | 61 ++++++++++++++++--- .../view_api_request.test.tsx | 38 +++++++++++- .../view_api_request/view_api_request.tsx | 15 +++-- .../pipeline_request_flyout.tsx | 2 +- 4 files changed, 99 insertions(+), 17 deletions(-) diff --git a/src/plugins/es_ui_shared/public/components/view_api_request/__snapshots__/view_api_request.test.tsx.snap b/src/plugins/es_ui_shared/public/components/view_api_request/__snapshots__/view_api_request.test.tsx.snap index 9fbc11e2623d0..626d9aa978ad2 100644 --- a/src/plugins/es_ui_shared/public/components/view_api_request/__snapshots__/view_api_request.test.tsx.snap +++ b/src/plugins/es_ui_shared/public/components/view_api_request/__snapshots__/view_api_request.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`EuiCodeEditor is rendered 1`] = ` +exports[`ViewApiRequest is rendered 1`] = ` +
+
+ 
+                
+                  Hello world
+                
+
+
+
diff --git a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.test.tsx b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.test.tsx index 0c6f1e143ec50..ab10ba07399da 100644 --- a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.test.tsx +++ b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.test.tsx @@ -12,16 +12,26 @@ import { mountWithI18nProvider } from '@kbn/test-jest-helpers'; import { findTestSubject, takeMountedSnapshot } from '@elastic/eui/lib/test'; import { ViewApiRequest } from './view_api_request'; +import type { UrlService } from 'src/plugins/share/common/url_service'; const payload = { title: 'Test title', description: 'Test description', request: 'Hello world', closeFlyout: jest.fn(), - navigateToUrl: jest.fn(), }; -describe('EuiCodeEditor', () => { +const urlService = { + locators: { + get: jest.fn().mockReturnValue({ + useUrl: jest.fn().mockImplementation(value => { + return `devToolsUrl_${value?.loadFrom}`; + }) + }) + } +} as any as UrlService; + +describe('ViewApiRequest', () => { test('is rendered', () => { const component = mountWithI18nProvider(); expect(takeMountedSnapshot(component)).toMatchSnapshot(); @@ -37,5 +47,29 @@ describe('EuiCodeEditor', () => { expect(payload.closeFlyout).toBeCalled(); }); + + test('doesnt have openInConsole when some optional props are not supplied', async () => { + const component = mountWithI18nProvider( + + ); + + const openInConsole = findTestSubject(component, 'apiRequestFlyoutOpenInConsoleButton'); + expect(openInConsole.length).toEqual(0); + }); + + test('has openInConsole when all optional props are supplied', async () => { + const component = mountWithI18nProvider( + + ); + + const openInConsole = findTestSubject(component, 'apiRequestFlyoutOpenInConsoleButton'); + expect(openInConsole.length).toEqual(1); + expect(openInConsole.props().href).toContain('devToolsUrl_data:text/plain'); + }); }); }); diff --git a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx index 5fc153b6d6f81..1cbec86bf5bd1 100644 --- a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx +++ b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx @@ -5,6 +5,10 @@ * in compliance with, at your election, the Elastic License 2.0 or the Server * Side Public License, v 1. */ +// We want to allow both right-clicking to open in a new tab and clicking through +// the "Open in Console" link. We could use `RedirectAppLinks` at the top level +// but that inserts a div which messes up the layout of the flyout. +/* eslint-disable @elastic/eui/href-or-on-click */ import React, { useCallback } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; @@ -24,7 +28,7 @@ import { EuiFlexItem, EuiCopy, } from '@elastic/eui'; -import { ApplicationStart, Capabilities } from 'src/core/public'; +import { ApplicationStart } from 'src/core/public'; import type { UrlService } from 'src/plugins/share/common/url_service'; interface Props { @@ -32,9 +36,9 @@ interface Props { description: string; request: string; closeFlyout: () => void; - navigateToUrl: ApplicationStart['navigateToUrl']; + navigateToUrl?: ApplicationStart['navigateToUrl']; urlService?: UrlService; - capabilities?: Capabilities; + canShowDevtools?: boolean; } export const ViewApiRequest: React.FunctionComponent = ({ @@ -44,7 +48,7 @@ export const ViewApiRequest: React.FunctionComponent = ({ closeFlyout, navigateToUrl, urlService, - capabilities, + canShowDevtools, }) => { let consoleLink: string | undefined; @@ -54,8 +58,9 @@ export const ViewApiRequest: React.FunctionComponent = ({ .get('CONSOLE_APP_LOCATOR') ?.useUrl({ loadFrom: `data:text/plain,${devToolsDataUri}` }); } + // Check if both the Dev Tools UI and the Console UI are enabled. - const shouldShowDevToolsLink = capabilities?.dev_tools.show && consoleLink !== undefined; + const shouldShowDevToolsLink = canShowDevtools && consoleLink !== undefined; const consolePreviewClick = useCallback( () => consoleLink && navigateToUrl && navigateToUrl(consoleLink), [consoleLink, navigateToUrl] diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx index 27d7d7188e92b..a2505ac24967d 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx @@ -61,7 +61,7 @@ export const PipelineRequestFlyout: FunctionComponent = ({ closeFlyout={closeFlyout} navigateToUrl={services.navigateToUrl} urlService={services.share.url} - capabilities={services.capabilities} + canShowDevtools={services.capabilities?.dev_tools.show} /> ); }; From fb6f5bf5c3dbd19ac19fee0922d7de9c0d1078e6 Mon Sep 17 00:00:00 2001 From: Ignacio Rivas Date: Wed, 9 Mar 2022 13:59:07 +0100 Subject: [PATCH 08/18] fix linting issues --- .../view_api_request/view_api_request.test.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.test.tsx b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.test.tsx index ab10ba07399da..deffbd551f98f 100644 --- a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.test.tsx +++ b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.test.tsx @@ -24,11 +24,11 @@ const payload = { const urlService = { locators: { get: jest.fn().mockReturnValue({ - useUrl: jest.fn().mockImplementation(value => { + useUrl: jest.fn().mockImplementation((value) => { return `devToolsUrl_${value?.loadFrom}`; - }) - }) - } + }), + }), + }, } as any as UrlService; describe('ViewApiRequest', () => { @@ -49,9 +49,7 @@ describe('ViewApiRequest', () => { }); test('doesnt have openInConsole when some optional props are not supplied', async () => { - const component = mountWithI18nProvider( - - ); + const component = mountWithI18nProvider(); const openInConsole = findTestSubject(component, 'apiRequestFlyoutOpenInConsoleButton'); expect(openInConsole.length).toEqual(0); From aa7ff5ce3a6345b5242e6fb00209205b29ffc259 Mon Sep 17 00:00:00 2001 From: Ignacio Rivas Date: Wed, 9 Mar 2022 15:04:44 +0100 Subject: [PATCH 09/18] Refactor hook and fix small dependencies bug --- .../view_api_request/open_in_console.ts | 47 +++++++++++++++++++ .../view_api_request/view_api_request.tsx | 25 ++++------ .../pipeline_request_flyout.tsx | 4 +- 3 files changed, 58 insertions(+), 18 deletions(-) create mode 100644 src/plugins/es_ui_shared/public/components/view_api_request/open_in_console.ts diff --git a/src/plugins/es_ui_shared/public/components/view_api_request/open_in_console.ts b/src/plugins/es_ui_shared/public/components/view_api_request/open_in_console.ts new file mode 100644 index 0000000000000..6ee080ef37fbc --- /dev/null +++ b/src/plugins/es_ui_shared/public/components/view_api_request/open_in_console.ts @@ -0,0 +1,47 @@ +/* + * 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 { useCallback, useEffect, useState } from 'react'; +import { compressToEncodedURIComponent } from 'lz-string'; + +import { ApplicationStart } from 'src/core/public'; +import type { UrlService } from 'src/plugins/share/common/url_service'; + +interface Props { + request: string; + navigateToUrl?: ApplicationStart['navigateToUrl']; + urlService?: UrlService; + canShowDevtools?: boolean; +} + +export const useOpenInConsole = ({ request, navigateToUrl, urlService }: Props) => { + const [consolePreviewLink, setConsolePreviewLink] = useState(); + + useEffect(() => { + const getUrl = async () => { + const devToolsDataUri = compressToEncodedURIComponent(request); + const link = await urlService?.locators + .get('CONSOLE_APP_LOCATOR') + ?.getUrl({ loadFrom: `data:text/plain,${devToolsDataUri}` }); + + setConsolePreviewLink(link); + }; + + getUrl(); + }, [request, urlService]); + + const consolePreviewClick = useCallback( + () => consolePreviewLink && navigateToUrl && navigateToUrl(consolePreviewLink), + [consolePreviewLink, navigateToUrl] + ); + + return { + consolePreviewClick, + consolePreviewLink, + }; +}; diff --git a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx index 1cbec86bf5bd1..d525f65a6bcc2 100644 --- a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx +++ b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx @@ -10,9 +10,8 @@ // but that inserts a div which messes up the layout of the flyout. /* eslint-disable @elastic/eui/href-or-on-click */ -import React, { useCallback } from 'react'; +import React from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; -import { compressToEncodedURIComponent } from 'lz-string'; import { EuiFlyout, @@ -30,6 +29,7 @@ import { } from '@elastic/eui'; import { ApplicationStart } from 'src/core/public'; import type { UrlService } from 'src/plugins/share/common/url_service'; +import { useOpenInConsole } from './open_in_console'; interface Props { title: string; @@ -50,21 +50,14 @@ export const ViewApiRequest: React.FunctionComponent = ({ urlService, canShowDevtools, }) => { - let consoleLink: string | undefined; - - if (urlService) { - const devToolsDataUri = compressToEncodedURIComponent(request); - consoleLink = urlService.locators - .get('CONSOLE_APP_LOCATOR') - ?.useUrl({ loadFrom: `data:text/plain,${devToolsDataUri}` }); - } + const { consolePreviewClick, consolePreviewLink } = useOpenInConsole({ + request, + navigateToUrl, + urlService, + }); // Check if both the Dev Tools UI and the Console UI are enabled. - const shouldShowDevToolsLink = canShowDevtools && consoleLink !== undefined; - const consolePreviewClick = useCallback( - () => consoleLink && navigateToUrl && navigateToUrl(consoleLink), - [consoleLink, navigateToUrl] - ); + const shouldShowDevToolsLink = canShowDevtools && consolePreviewLink !== undefined; return ( @@ -111,7 +104,7 @@ export const ViewApiRequest: React.FunctionComponent = ({ size="xs" flush="right" iconType="wrench" - href={consoleLink} + href={consolePreviewLink} onClick={consolePreviewClick} data-test-subj="apiRequestFlyoutOpenInConsoleButton" > diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx index a2505ac24967d..220bfc782cad2 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx @@ -39,7 +39,7 @@ export const PipelineRequestFlyout: FunctionComponent = ({ }, [form]); const { name, ...pipelineBody } = pipeline; - const endpoint = `PUT _ingest/pipeline/${name || ''}`; + const endpoint = `PUT _ingest/pipeline/${name || ''}`; const request = `${endpoint}\n${JSON.stringify(pipelineBody, null, 2)}`; const title = name @@ -61,7 +61,7 @@ export const PipelineRequestFlyout: FunctionComponent = ({ closeFlyout={closeFlyout} navigateToUrl={services.navigateToUrl} urlService={services.share.url} - canShowDevtools={services.capabilities?.dev_tools.show} + canShowDevtools={!!services.capabilities?.dev_tools.show} /> ); }; From ffedee3a5104c2748aa4cc0daea9429b35101327 Mon Sep 17 00:00:00 2001 From: Ignacio Rivas Date: Thu, 10 Mar 2022 14:28:40 +0100 Subject: [PATCH 10/18] commit using @elastic.co From 39106a9ed6b4aa4e09edea04bcdf260ebd8e7a2e Mon Sep 17 00:00:00 2001 From: Ignacio Rivas Date: Thu, 10 Mar 2022 15:18:10 +0100 Subject: [PATCH 11/18] Refactor out hook and fix linter issues --- .../view_api_request/open_in_console.ts | 47 ------------------- .../view_api_request/view_api_request.tsx | 29 ++++++++---- .../translations/translations/fr-FR.json | 2 - 3 files changed, 20 insertions(+), 58 deletions(-) delete mode 100644 src/plugins/es_ui_shared/public/components/view_api_request/open_in_console.ts diff --git a/src/plugins/es_ui_shared/public/components/view_api_request/open_in_console.ts b/src/plugins/es_ui_shared/public/components/view_api_request/open_in_console.ts deleted file mode 100644 index 6ee080ef37fbc..0000000000000 --- a/src/plugins/es_ui_shared/public/components/view_api_request/open_in_console.ts +++ /dev/null @@ -1,47 +0,0 @@ -/* - * 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 { useCallback, useEffect, useState } from 'react'; -import { compressToEncodedURIComponent } from 'lz-string'; - -import { ApplicationStart } from 'src/core/public'; -import type { UrlService } from 'src/plugins/share/common/url_service'; - -interface Props { - request: string; - navigateToUrl?: ApplicationStart['navigateToUrl']; - urlService?: UrlService; - canShowDevtools?: boolean; -} - -export const useOpenInConsole = ({ request, navigateToUrl, urlService }: Props) => { - const [consolePreviewLink, setConsolePreviewLink] = useState(); - - useEffect(() => { - const getUrl = async () => { - const devToolsDataUri = compressToEncodedURIComponent(request); - const link = await urlService?.locators - .get('CONSOLE_APP_LOCATOR') - ?.getUrl({ loadFrom: `data:text/plain,${devToolsDataUri}` }); - - setConsolePreviewLink(link); - }; - - getUrl(); - }, [request, urlService]); - - const consolePreviewClick = useCallback( - () => consolePreviewLink && navigateToUrl && navigateToUrl(consolePreviewLink), - [consolePreviewLink, navigateToUrl] - ); - - return { - consolePreviewClick, - consolePreviewLink, - }; -}; diff --git a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx index d525f65a6bcc2..04f72c657dab2 100644 --- a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx +++ b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.tsx @@ -10,8 +10,9 @@ // but that inserts a div which messes up the layout of the flyout. /* eslint-disable @elastic/eui/href-or-on-click */ -import React from 'react'; +import React, { useCallback } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; +import { compressToEncodedURIComponent } from 'lz-string'; import { EuiFlyout, @@ -29,9 +30,8 @@ import { } from '@elastic/eui'; import { ApplicationStart } from 'src/core/public'; import type { UrlService } from 'src/plugins/share/common/url_service'; -import { useOpenInConsole } from './open_in_console'; -interface Props { +export interface ViewApiRequestProps { title: string; description: string; request: string; @@ -41,7 +41,7 @@ interface Props { canShowDevtools?: boolean; } -export const ViewApiRequest: React.FunctionComponent = ({ +export const ViewApiRequest: React.FunctionComponent = ({ title, description, request, @@ -50,11 +50,22 @@ export const ViewApiRequest: React.FunctionComponent = ({ urlService, canShowDevtools, }) => { - const { consolePreviewClick, consolePreviewLink } = useOpenInConsole({ - request, - navigateToUrl, - urlService, - }); + const getUrlParams = undefined; + const devToolsDataUri = compressToEncodedURIComponent(request); + + // Generate a console preview link if we have a valid locator + const consolePreviewLink = urlService?.locators.get('CONSOLE_APP_LOCATOR')?.useUrl( + { + loadFrom: `data:text/plain,${devToolsDataUri}`, + }, + getUrlParams, + [request] + ); + + const consolePreviewClick = useCallback( + () => consolePreviewLink && navigateToUrl && navigateToUrl(consolePreviewLink), + [consolePreviewLink, navigateToUrl] + ); // Check if both the Dev Tools UI and the Console UI are enabled. const shouldShowDevToolsLink = canShowDevtools && consolePreviewLink !== undefined; diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index 27b1abc8427cf..8632ee4b9b469 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -13643,7 +13643,6 @@ "xpack.ingestPipelines.processors.label.urldecode": "Décodage d'URL", "xpack.ingestPipelines.processors.label.userAgent": "Agent utilisateur", "xpack.ingestPipelines.processors.uriPartsDescription": "Analyse une chaîne d'URI (Uniform Resource Identifier, identifiant uniforme de ressource) et extrait ses composants sous forme d'objet.", - "xpack.ingestPipelines.requestFlyout.closeButtonLabel": "Fermer", "xpack.ingestPipelines.requestFlyout.descriptionText": "Cette requête Elasticsearch créera ou mettra à jour le pipeline.", "xpack.ingestPipelines.requestFlyout.namedTitle": "Requête pour \"{name}\"", "xpack.ingestPipelines.requestFlyout.unnamedTitle": "Requête", @@ -15744,7 +15743,6 @@ "xpack.ml.management.jobsList.noPermissionToAccessLabel": "Accès refusé", "xpack.ml.management.jobsList.syncFlyoutButton": "Synchroniser les objets enregistrés", "xpack.ml.management.jobsListTitle": "Tâches de Machine Learning", - "xpack.ml.management.jobsSpacesList.objectNoun": "tâche", "xpack.ml.management.jobsSpacesList.updateSpaces.error": "Erreur lors de la mise à jour de {id}", "xpack.ml.management.syncSavedObjectsFlyout.closeButton": "Fermer", "xpack.ml.management.syncSavedObjectsFlyout.datafeedsAdded.description": "Si des objets enregistrés n'ont pas d'ID de flux de données pour les tâches de détection des anomalies, l'ID sera ajouté.", From 114448ffd96569d4c6638f5f93d28d5f4c188336 Mon Sep 17 00:00:00 2001 From: Ignacio Rivas Date: Thu, 10 Mar 2022 15:31:23 +0100 Subject: [PATCH 12/18] Enhance tests and fix typo --- .../components/view_api_request/view_api_request.test.tsx | 4 +++- .../pipeline_request_flyout/pipeline_request_flyout.tsx | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.test.tsx b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.test.tsx index deffbd551f98f..c66fbd3395f90 100644 --- a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.test.tsx +++ b/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.test.tsx @@ -10,6 +10,7 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; import { mountWithI18nProvider } from '@kbn/test-jest-helpers'; import { findTestSubject, takeMountedSnapshot } from '@elastic/eui/lib/test'; +import { compressToEncodedURIComponent } from 'lz-string'; import { ViewApiRequest } from './view_api_request'; import type { UrlService } from 'src/plugins/share/common/url_service'; @@ -56,6 +57,7 @@ describe('ViewApiRequest', () => { }); test('has openInConsole when all optional props are supplied', async () => { + const encodedRequest = compressToEncodedURIComponent(payload.request); const component = mountWithI18nProvider( { const openInConsole = findTestSubject(component, 'apiRequestFlyoutOpenInConsoleButton'); expect(openInConsole.length).toEqual(1); - expect(openInConsole.props().href).toContain('devToolsUrl_data:text/plain'); + expect(openInConsole.props().href).toEqual(`devToolsUrl_data:text/plain,${encodedRequest}`); }); }); }); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx index 220bfc782cad2..d44ae22402990 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx @@ -39,7 +39,7 @@ export const PipelineRequestFlyout: FunctionComponent = ({ }, [form]); const { name, ...pipelineBody } = pipeline; - const endpoint = `PUT _ingest/pipeline/${name || ''}`; + const endpoint = `PUT _ingest/pipeline/${name || ''}`; const request = `${endpoint}\n${JSON.stringify(pipelineBody, null, 2)}`; const title = name From dd9e13daf3075c3137693ca5bea6c4b9ca5588bf Mon Sep 17 00:00:00 2001 From: Ignacio Rivas Date: Fri, 11 Mar 2022 11:08:30 +0100 Subject: [PATCH 13/18] Refactor component name and fix tests --- .../__snapshots__/view_api_request.test.tsx.snap | 0 .../index.ts | 2 +- .../view_api_request_flyout.test.tsx} | 14 ++++++++------ .../view_api_request_flyout.tsx} | 6 +++--- src/plugins/es_ui_shared/public/index.ts | 2 +- .../helpers/pipeline_form.helpers.ts | 4 ++-- .../helpers/setup_environment.tsx | 6 ++++++ .../ingest_pipelines_create.test.tsx | 4 ++-- .../pipeline_request_flyout.tsx | 4 ++-- .../ingest_pipelines/public/shared_imports.ts | 2 +- 10 files changed, 26 insertions(+), 18 deletions(-) rename src/plugins/es_ui_shared/public/components/{view_api_request => view_api_request_flyout}/__snapshots__/view_api_request.test.tsx.snap (100%) rename src/plugins/es_ui_shared/public/components/{view_api_request => view_api_request_flyout}/index.ts (84%) rename src/plugins/es_ui_shared/public/components/{view_api_request/view_api_request.test.tsx => view_api_request_flyout/view_api_request_flyout.test.tsx} (84%) rename src/plugins/es_ui_shared/public/components/{view_api_request/view_api_request.tsx => view_api_request_flyout/view_api_request_flyout.tsx} (95%) diff --git a/src/plugins/es_ui_shared/public/components/view_api_request/__snapshots__/view_api_request.test.tsx.snap b/src/plugins/es_ui_shared/public/components/view_api_request_flyout/__snapshots__/view_api_request.test.tsx.snap similarity index 100% rename from src/plugins/es_ui_shared/public/components/view_api_request/__snapshots__/view_api_request.test.tsx.snap rename to src/plugins/es_ui_shared/public/components/view_api_request_flyout/__snapshots__/view_api_request.test.tsx.snap diff --git a/src/plugins/es_ui_shared/public/components/view_api_request/index.ts b/src/plugins/es_ui_shared/public/components/view_api_request_flyout/index.ts similarity index 84% rename from src/plugins/es_ui_shared/public/components/view_api_request/index.ts rename to src/plugins/es_ui_shared/public/components/view_api_request_flyout/index.ts index 75b2b1ac27fbe..deed3c5db27d6 100644 --- a/src/plugins/es_ui_shared/public/components/view_api_request/index.ts +++ b/src/plugins/es_ui_shared/public/components/view_api_request_flyout/index.ts @@ -6,4 +6,4 @@ * Side Public License, v 1. */ -export { ViewApiRequest } from './view_api_request'; +export { ViewApiRequestFlyout } from './view_api_request_flyout'; diff --git a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.test.tsx b/src/plugins/es_ui_shared/public/components/view_api_request_flyout/view_api_request_flyout.test.tsx similarity index 84% rename from src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.test.tsx rename to src/plugins/es_ui_shared/public/components/view_api_request_flyout/view_api_request_flyout.test.tsx index c66fbd3395f90..2fa693a9fbd57 100644 --- a/src/plugins/es_ui_shared/public/components/view_api_request/view_api_request.test.tsx +++ b/src/plugins/es_ui_shared/public/components/view_api_request_flyout/view_api_request_flyout.test.tsx @@ -12,7 +12,7 @@ import { mountWithI18nProvider } from '@kbn/test-jest-helpers'; import { findTestSubject, takeMountedSnapshot } from '@elastic/eui/lib/test'; import { compressToEncodedURIComponent } from 'lz-string'; -import { ViewApiRequest } from './view_api_request'; +import { ViewApiRequestFlyout } from './view_api_request_flyout'; import type { UrlService } from 'src/plugins/share/common/url_service'; const payload = { @@ -32,15 +32,15 @@ const urlService = { }, } as any as UrlService; -describe('ViewApiRequest', () => { +describe('ViewApiRequestFlyout', () => { test('is rendered', () => { - const component = mountWithI18nProvider(); + const component = mountWithI18nProvider(); expect(takeMountedSnapshot(component)).toMatchSnapshot(); }); describe('props', () => { test('on closeFlyout', async () => { - const component = mountWithI18nProvider(); + const component = mountWithI18nProvider(); await act(async () => { findTestSubject(component, 'apiRequestFlyoutClose').simulate('click'); @@ -50,7 +50,9 @@ describe('ViewApiRequest', () => { }); test('doesnt have openInConsole when some optional props are not supplied', async () => { - const component = mountWithI18nProvider(); + const component = mountWithI18nProvider( + + ); const openInConsole = findTestSubject(component, 'apiRequestFlyoutOpenInConsoleButton'); expect(openInConsole.length).toEqual(0); @@ -59,7 +61,7 @@ describe('ViewApiRequest', () => { test('has openInConsole when all optional props are supplied', async () => { const encodedRequest = compressToEncodedURIComponent(payload.request); const component = mountWithI18nProvider( - = ({ +export const ViewApiRequestFlyout: React.FunctionComponent = ({ title, description, request, @@ -71,7 +71,7 @@ export const ViewApiRequest: React.FunctionComponent = ({ const shouldShowDevToolsLink = canShowDevtools && consolePreviewLink !== undefined; return ( - +

{title}

diff --git a/src/plugins/es_ui_shared/public/index.ts b/src/plugins/es_ui_shared/public/index.ts index 1fc713876a7f9..8a861ac993170 100644 --- a/src/plugins/es_ui_shared/public/index.ts +++ b/src/plugins/es_ui_shared/public/index.ts @@ -25,7 +25,7 @@ export type { EuiCodeEditorProps } from './components/code_editor'; export { EuiCodeEditor } from './components/code_editor'; export type { Frequency } from './components/cron_editor'; export { CronEditor } from './components/cron_editor'; -export { ViewApiRequest } from './components/view_api_request'; +export { ViewApiRequestFlyout } from './components/view_api_request_flyout'; export type { SendRequestConfig, diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipeline_form.helpers.ts b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipeline_form.helpers.ts index 432b9046f1071..775d05a865189 100644 --- a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipeline_form.helpers.ts +++ b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipeline_form.helpers.ts @@ -61,8 +61,8 @@ export type PipelineFormTestSubjects = | 'onFailureEditor' | 'testPipelineButton' | 'showRequestLink' - | 'requestFlyout' - | 'requestFlyout.title' + | 'apiRequestFlyout' + | 'apiRequestFlyout.apiRequestFlyoutTitle' | 'testPipelineFlyout' | 'testPipelineFlyout.title' | 'documentationLink'; diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/setup_environment.tsx b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/setup_environment.tsx index 8e128692c41c5..b6e872bc0ec50 100644 --- a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/setup_environment.tsx +++ b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/setup_environment.tsx @@ -11,6 +11,7 @@ import axiosXhrAdapter from 'axios/lib/adapters/xhr'; import { LocationDescriptorObject } from 'history'; import { HttpSetup } from 'kibana/public'; +import { MockUrlService } from 'src/plugins/share/common/mocks'; import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public'; import { sharePluginMock } from '../../../../../../src/plugins/share/public/mocks'; import { @@ -54,6 +55,11 @@ const appServices = { getMaxBytes: jest.fn().mockReturnValue(100), getMaxBytesFormatted: jest.fn().mockReturnValue('100'), }, + navigateToUrl: jest.fn(), + capabilities: { dev_tools: { show: true } }, + share: { + url: new MockUrlService(), + }, }; export const setupEnvironment = () => { diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx index bb1d3f2503f9b..5be5cecd750f6 100644 --- a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx +++ b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx @@ -79,8 +79,8 @@ describe('', () => { await actions.clickShowRequestLink(); // Verify request flyout opens - expect(exists('requestFlyout')).toBe(true); - expect(find('requestFlyout.title').text()).toBe('Request'); + expect(exists('apiRequestFlyout')).toBe(true); + expect(find('apiRequestFlyout.apiRequestFlyoutTitle').text()).toBe('Request'); }); describe('form validation', () => { diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx index d44ae22402990..dfe7cca7da820 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout.tsx @@ -9,7 +9,7 @@ import React, { useState, useEffect, FunctionComponent } from 'react'; import { i18n } from '@kbn/i18n'; import { Pipeline } from '../../../../../common/types'; -import { useFormContext, ViewApiRequest, useKibana } from '../../../../shared_imports'; +import { useFormContext, ViewApiRequestFlyout, useKibana } from '../../../../shared_imports'; import { ReadProcessorsFunction } from '../types'; @@ -52,7 +52,7 @@ export const PipelineRequestFlyout: FunctionComponent = ({ }); return ( - Date: Fri, 11 Mar 2022 12:12:47 +0100 Subject: [PATCH 14/18] update snapshot --- ...est.test.tsx.snap => view_api_request_flyout.test.tsx.snap} | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) rename src/plugins/es_ui_shared/public/components/view_api_request_flyout/__snapshots__/{view_api_request.test.tsx.snap => view_api_request_flyout.test.tsx.snap} (97%) diff --git a/src/plugins/es_ui_shared/public/components/view_api_request_flyout/__snapshots__/view_api_request.test.tsx.snap b/src/plugins/es_ui_shared/public/components/view_api_request_flyout/__snapshots__/view_api_request_flyout.test.tsx.snap similarity index 97% rename from src/plugins/es_ui_shared/public/components/view_api_request_flyout/__snapshots__/view_api_request.test.tsx.snap rename to src/plugins/es_ui_shared/public/components/view_api_request_flyout/__snapshots__/view_api_request_flyout.test.tsx.snap index 626d9aa978ad2..463d63c763f9c 100644 --- a/src/plugins/es_ui_shared/public/components/view_api_request_flyout/__snapshots__/view_api_request.test.tsx.snap +++ b/src/plugins/es_ui_shared/public/components/view_api_request_flyout/__snapshots__/view_api_request_flyout.test.tsx.snap @@ -1,8 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ViewApiRequest is rendered 1`] = ` +exports[`ViewApiRequestFlyout is rendered 1`] = `
+ Copy to clipboard + -
- -
-
- 
-                
-                  Hello world
-                
-
-
-
+ + + +
+
+ 
+            
+              Hello world
+            
+
From 9cd131bdacd15804be4955b61128baf8acf8c30d Mon Sep 17 00:00:00 2001 From: Ignacio Rivas Date: Mon, 21 Mar 2022 09:30:15 +0100 Subject: [PATCH 17/18] Refactor apirequestflyout to consume applicationStart only --- src/plugins/es_ui_shared/kibana.json | 2 +- .../view_api_request_flyout.test.tsx.snap | 1 + .../view_api_request_flyout.test.tsx | 30 +++++++++---- .../view_api_request_flyout.tsx | 42 ++++++++++--------- .../helpers/setup_environment.tsx | 14 ++++++- .../pipeline_request_flyout.tsx | 3 +- .../public/application/index.tsx | 3 +- .../application/mount_management_section.ts | 5 +-- 8 files changed, 64 insertions(+), 36 deletions(-) diff --git a/src/plugins/es_ui_shared/kibana.json b/src/plugins/es_ui_shared/kibana.json index 2735b153f738c..1a4ff33674f95 100644 --- a/src/plugins/es_ui_shared/kibana.json +++ b/src/plugins/es_ui_shared/kibana.json @@ -14,5 +14,5 @@ "static/forms/components", "static/forms/helpers/field_validators/types" ], - "requiredBundles": ["data"] + "requiredBundles": ["data", "kibanaReact"] } diff --git a/src/plugins/es_ui_shared/public/components/view_api_request_flyout/__snapshots__/view_api_request_flyout.test.tsx.snap b/src/plugins/es_ui_shared/public/components/view_api_request_flyout/__snapshots__/view_api_request_flyout.test.tsx.snap index d65971b12a554..2d850ee8082f9 100644 --- a/src/plugins/es_ui_shared/public/components/view_api_request_flyout/__snapshots__/view_api_request_flyout.test.tsx.snap +++ b/src/plugins/es_ui_shared/public/components/view_api_request_flyout/__snapshots__/view_api_request_flyout.test.tsx.snap @@ -7,6 +7,7 @@ exports[`ViewApiRequestFlyout is rendered 1`] = ` role="dialog" >