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

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 = (

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,

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<Props> = ({ pipeline, visible }) => {
+  if (!visible) {
+    return null;
+  }
+
+  return;
+};

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<Props> = ({ onClick }) => (
+  <EuiEmptyPrompt
+    iconType="managementApp"
+    titleSize="xs"
+    title={
+      <h1>
+        {i18n.translate('xpack.ingestPipelines.list.table.emptyPromptTitle', {
+          defaultMessage: 'Create your first pipeline',
+        })}
+      </h1>
+    }
+    actions={
+      <EuiButton onClick={onClick}>
+        {i18n.translate('xpack.ingestPipelines.list.table.emptyPrompt.createButtonLabel', {
+          defaultMessage: 'Create pipeline',
+        })}
+      </EuiButton>
+    }
+  />
+);

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';

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 = (
+      <EuiFlexGroup justifyContent="spaceAround">
+        <EuiFlexItem grow={false}>
+          <EuiLoadingSpinner size="xl" />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  } else if (data?.length) {
+    content = (
+      <PipelineTable
+        onEditPipelineClick={() => {}}
+        onDeletePipelineClick={() => {}}
+        pipelines={data}
+      />
+    );
+  } else {
+    content = <EmptyList onClick={() => {}} />;
+  }
+
+  return (
+    <EuiPageBody>
+      <EuiPageContent>
+        <EuiTitle size="l">
+          <EuiFlexGroup alignItems="center">
+            <EuiFlexItem>
+              <h1 data-test-subj="appTitle">
+                <FormattedMessage
+                  id="xpack.ingestPipelines.list.listTitle"
+                  defaultMessage="Ingest Pipelines"
+                />
+              </h1>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty
+                href={services.documentation.getIngestNodeUrl()}
+                target="_blank"
+                iconType="help"
+              >
+                <FormattedMessage
+                  id="xpack.ingestPipelines.list.pipelinesDocsLinkText"
+                  defaultMessage="Ingest Pipelines docs"
+                />
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiTitle>
+        <EuiSpacer size="s" />
+        <EuiTitle size="s">
+          <EuiText color="subdued">
+            <FormattedMessage
+              id="xpack.ingestPipelines.list.pipelinesDescription"
+              defaultMessage="Use ingest node pipelines to pre-process documents before indexing."
+            />
+          </EuiText>
+        </EuiTitle>
+        <EuiSpacer size="m" />
+        {/* Error call out or pipeline table */}
+        {error ? (
+          <EuiCallOut
+            iconType="faceSad"
+            color="danger"
+            title={i18n.translate('xpack.ingestPipelines.list.loadErrorTitle', {
+              defaultMessage: 'Cannot load pipelines, please refresh the page to try again.',
+            })}
+          />
+        ) : (
+          content
+        )}
+      </EuiPageContent>
+    </EuiPageBody>
+  );
+};