From 86f50c83f9cd6d3758464c1c4323f15caf2447e7 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Wed, 8 Apr 2020 11:27:16 +0200 Subject: [PATCH] Refactor list and address PR feedback Refactored the list into smaller pieces and assemble in main.tsx Also addressed feedback on copy, removed unused notifications dep --- .../public/application/index.tsx | 3 +- .../application/mount_management_section.ts | 2 - .../sections/pipelines_list/details.tsx | 22 +++ .../sections/pipelines_list/empty_list.tsx | 33 ++++ .../sections/pipelines_list/index.ts | 2 +- .../sections/pipelines_list/main.tsx | 114 ++++++++++++ .../pipelines_list/pipelines_list.tsx | 166 ------------------ .../sections/pipelines_list/table.tsx | 87 +++++++++ 8 files changed, 258 insertions(+), 171 deletions(-) create mode 100644 x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx create mode 100644 x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/empty_list.tsx create mode 100644 x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx delete mode 100644 x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/pipelines_list.tsx create mode 100644 x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx diff --git a/x-pack/plugins/ingest_pipelines/public/application/index.tsx b/x-pack/plugins/ingest_pipelines/public/application/index.tsx index f19863b9d233f..752d1ef270128 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/index.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/index.tsx @@ -6,7 +6,7 @@ import React, { ReactNode } from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; -import { ChromeBreadcrumb, IToasts } from 'src/core/public'; +import { ChromeBreadcrumb } from 'src/core/public'; import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public'; import { App } from './app'; @@ -17,7 +17,6 @@ export interface AppServices { metric: UiMetricService; documentation: DocumentationService; api: ApiService; - notifications: IToasts; } export const renderApp = ( 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 ed458f9a47cd3..29db501488e53 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 @@ -18,7 +18,6 @@ export async function mountManagementSection( const [coreStart] = await coreSetup.getStartServices(); const { docLinks, - notifications, i18n: { Context: I18nContext }, } = coreStart; @@ -34,7 +33,6 @@ export async function mountManagementSection( const services = { setBreadcrumbs, - notifications: notifications.toasts, metric: uiMetricService, documentation: documentationService, api: apiService, diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx new file mode 100644 index 0000000000000..b624e64a8cfda --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx @@ -0,0 +1,22 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { FunctionComponent } from 'react'; +import { EuiFlyout, EuiFlyoutHeader, EuiFlyoutBody } from '@elastic/eui'; +import { Pipeline } from '../../../../common/types'; + +export interface Props { + visible: boolean; + pipeline: Pipeline; +} + +export const PipelineDetails: FunctionComponent = ({ pipeline, visible }) => { + if (!visible) { + return null; + } + + return; +}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/empty_list.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/empty_list.tsx new file mode 100644 index 0000000000000..e86a895d6b9dc --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/empty_list.tsx @@ -0,0 +1,33 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import React, { FunctionComponent } from 'react'; +import { i18n } from '@kbn/i18n'; +import { EuiButton, EuiEmptyPrompt } from '@elastic/eui'; + +interface Props { + onClick: () => void; +} + +export const EmptyList: FunctionComponent = ({ onClick }) => ( + + {i18n.translate('xpack.ingestPipelines.list.table.emptyPromptTitle', { + defaultMessage: 'Create your first pipeline', + })} + + } + actions={ + + {i18n.translate('xpack.ingestPipelines.list.table.emptyPrompt.createButtonLabel', { + defaultMessage: 'Create pipeline', + })} + + } + /> +); diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/index.ts b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/index.ts index d750aaba177ba..a541e3bb85fd0 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/index.ts +++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/index.ts @@ -4,4 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -export { PipelinesList } from './pipelines_list'; +export { PipelinesList } from './main'; diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx new file mode 100644 index 0000000000000..314118e632e96 --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx @@ -0,0 +1,114 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { useEffect } from 'react'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; + +import { + EuiPageBody, + EuiPageContent, + EuiTitle, + EuiFlexGroup, + EuiFlexItem, + EuiButtonEmpty, + EuiCallOut, + EuiLoadingSpinner, +} from '@elastic/eui'; + +import { EuiSpacer, EuiText } from '@elastic/eui'; + +import { useKibana } from '../../../shared_imports'; +import { UIM_PIPELINES_LIST_LOAD } from '../../constants'; + +import { EmptyList } from './empty_list'; +import { PipelineTable } from './table'; + +export const PipelinesList: React.FunctionComponent = () => { + const { services } = useKibana(); + + // Track component loaded + useEffect(() => { + services.metric.trackUiMetric(UIM_PIPELINES_LIST_LOAD); + }, [services.metric]); + + const { data, isLoading, error } = services.api.useLoadPipelines(); + + let content: React.ReactNode; + + if (isLoading) { + content = ( + + + + + + ); + } else if (data?.length) { + content = ( + {}} + onDeletePipelineClick={() => {}} + pipelines={data} + /> + ); + } else { + content = {}} />; + } + + return ( + + + + + +

+ +

+ + + + + + + + + + + + + + + + {/* Error call out or pipeline table */} + {error ? ( + + ) : ( + content + )} + + + ); +}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/pipelines_list.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/pipelines_list.tsx deleted file mode 100644 index ebe11235b8098..0000000000000 --- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/pipelines_list.tsx +++ /dev/null @@ -1,166 +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; - * you may not use this file except in compliance with the Elastic License. - */ - -import React, { useEffect } from 'react'; -import { i18n } from '@kbn/i18n'; -import { FormattedMessage } from '@kbn/i18n/react'; - -import { - EuiPageBody, - EuiPageContent, - EuiTitle, - EuiFlexGroup, - EuiFlexItem, - EuiButtonEmpty, - EuiInMemoryTable, - EuiCallOut, - EuiEmptyPrompt, - EuiButton, - EuiLink, -} from '@elastic/eui'; -import { EuiSpacer, EuiText } from '@elastic/eui'; - -import { useKibana } from '../../../shared_imports'; -import { UIM_PIPELINES_LIST_LOAD } from '../../constants'; -import { ExpandableText } from '../../components'; - -export const PipelinesList: React.FunctionComponent = () => { - const { services } = useKibana(); - - // Track component loaded - useEffect(() => { - services.metric.trackUiMetric(UIM_PIPELINES_LIST_LOAD); - }, [services.metric]); - - const { data, isLoading, error } = services.api.useLoadPipelines(); - - return ( - - - - - -

- -

- - - - - - - - - - - - - - - - {/* Error call out or pipeline table */} - {error ? ( - - ) : ( - - {i18n.translate('xpack.ingestPipelines.list.table.emptyPromptTitle', { - defaultMessage: 'No pipelines', - })} - - } - actions={ - {}}> - {i18n.translate( - 'xpack.ingestPipelines.list.table.emptyPrompt.createButtonLabel', - { defaultMessage: 'Create Pipeline' } - )} - - } - /> - } - columns={[ - { - field: 'name', - name: i18n.translate('xpack.ingestPipelines.list.table.nameColumnTitle', { - defaultMessage: 'Name', - }), - render: (name: string) => {}}>{name}, - }, - { - field: 'description', - name: i18n.translate('xpack.ingestPipelines.list.table.descriptionColumnTitle', { - defaultMessage: 'Description', - }), - render: (description: string) => ( - - ), - }, - { - name: i18n.translate('xpack.ingestPipelines.list.table.actionColumnTitle', { - defaultMessage: 'Actions', - }), - actions: [ - { - name: i18n.translate('xpack.ingestPipelines.list.table.editActionLabel', { - defaultMessage: 'Edit', - }), - icon: 'pencil', - type: 'icon', - onClick: () => {}, - }, - { - name: i18n.translate('xpack.ingestPipelines.list.table.deleteActionLabel', { - defaultMessage: 'Delete', - }), - type: 'icon', - icon: 'trash', - color: 'danger', - onClick: () => {}, - }, - ], - } as any, - ]} - items={(data as any) ?? []} - /> - )} - - - ); -}; diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx new file mode 100644 index 0000000000000..a7321564e54b8 --- /dev/null +++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx @@ -0,0 +1,87 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import React, { FunctionComponent } from 'react'; +import { i18n } from '@kbn/i18n'; +import { EuiInMemoryTable, EuiLink } from '@elastic/eui'; + +import { Pipeline } from '../../../../common/types'; + +import { ExpandableText } from '../../components'; + +export interface Props { + pipelines: Pipeline[]; + onEditPipelineClick: (pipeline: Pipeline) => void; + onDeletePipelineClick: (pipeline: Pipeline) => void; +} + +export const PipelineTable: FunctionComponent = ({ + pipelines, + onEditPipelineClick, + onDeletePipelineClick, +}) => { + return ( + {}}>{name}, + }, + { + field: 'description', + name: i18n.translate('xpack.ingestPipelines.list.table.descriptionColumnTitle', { + defaultMessage: 'Description', + }), + render: (description: any) => , + }, + { + name: i18n.translate('xpack.ingestPipelines.list.table.actionColumnTitle', { + defaultMessage: 'Actions', + }), + actions: [ + { + name: i18n.translate('xpack.ingestPipelines.list.table.editActionLabel', { + defaultMessage: 'Edit', + }), + description: i18n.translate( + 'xpack.ingestPipelines.list.table.editActionDescription', + { defaultMessage: 'Edit a pipeline' } + ), + type: 'icon', + icon: 'pencil', + onClick: onEditPipelineClick, + }, + { + name: i18n.translate('xpack.ingestPipelines.list.table.deleteActionLabel', { + defaultMessage: 'Delete', + }), + description: i18n.translate( + 'xpack.ingestPipelines.list.table.deleteActionDescription', + { defaultMessage: 'Delete a pipeline' } + ), + type: 'icon', + icon: 'trash', + color: 'danger', + onClick: onDeletePipelineClick, + }, + ], + }, + ]} + items={pipelines ?? []} + /> + ); +};