[Ingest Node Pipelines] Show flyout after editing or creating a pipeline

x-pack/plugins/ingest_pipelines/public/application/app.tsx

@@ -26,6 +26,8 @@ export const AppWithoutRouter = () => (
     <Route exact path={`${BASE_PATH}/create/:sourceName`} component={PipelinesClone} />
     <Route exact path={`${BASE_PATH}/create`} component={PipelinesCreate} />
     <Route exact path={`${BASE_PATH}/edit/:name`} component={PipelinesEdit} />
+    {/* Catch all */}
+    <Route component={PipelinesList} />
   </Switch>
 );
 

x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_create/pipelines_create.tsx

@@ -50,7 +50,7 @@ export const PipelinesCreate: React.FunctionComponent<RouteComponentProps & Prop
       return;
     }
 
-    history.push(BASE_PATH);
+    history.push(BASE_PATH + `?pipeline=${pipeline.name}`);
   };
 
   const onCancel = () => {

x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_edit/pipelines_edit.tsx

@@ -53,7 +53,7 @@ export const PipelinesEdit: React.FunctionComponent<RouteComponentProps<MatchPar
       return;
     }
 
-    history.push(BASE_PATH);
+    history.push(BASE_PATH + `?pipeline=${updatedPipeline.name}`);
   };
 
   const onCancel = () => {

x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx → x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details_flyout.tsx

@@ -36,7 +36,7 @@ export interface Props {
   onClose: () => void;
 }
 
-export const PipelineDetails: FunctionComponent<Props> = ({
+export const PipelineDetailsFlyout: FunctionComponent<Props> = ({
   pipeline,
   onClose,
   onEditClick,

x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/main.tsx

@@ -8,6 +8,8 @@ import React, { useEffect, useState } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { Location } from 'history';
+import { parse } from 'query-string';
 
 import {
   EuiPageBody,
@@ -28,33 +30,58 @@ import { UIM_PIPELINES_LIST_LOAD } from '../../constants';
 
 import { EmptyList } from './empty_list';
 import { PipelineTable } from './table';
-import { PipelineDetails } from './details';
+import { PipelineDetailsFlyout } from './details_flyout';
+import { PipelineNotFoundFlyout } from './not_found_flyout';
 import { PipelineDeleteModal } from './delete_modal';
 
-export const PipelinesList: React.FunctionComponent<RouteComponentProps> = ({ history }) => {
+const getPipelineNameFromLocation = (location: Location) => {
+  const { pipeline } = parse(location.search.substring(1));
+  return pipeline;
+};
+
+export const PipelinesList: React.FunctionComponent<RouteComponentProps> = ({
+  history,
+  location,
+}) => {
   const { services } = useKibana();
+  const pipelineNameFromLocation = getPipelineNameFromLocation(location);
 
   const [selectedPipeline, setSelectedPipeline] = useState<Pipeline | undefined>(undefined);
+  const [showFlyout, setShowFlyout] = useState<boolean>(false);
+
   const [pipelinesToDelete, setPipelinesToDelete] = useState<string[]>([]);
 
+  const { data, isLoading, error, sendRequest } = services.api.useLoadPipelines();
+
   // Track component loaded
   useEffect(() => {
     services.metric.trackUiMetric(UIM_PIPELINES_LIST_LOAD);
     services.breadcrumbs.setBreadcrumbs('home');
   }, [services.metric, services.breadcrumbs]);
 
-  const { data, isLoading, error, sendRequest } = services.api.useLoadPipelines();
-
-  let content: React.ReactNode;
+  useEffect(() => {
+    if (pipelineNameFromLocation && data?.length) {
+      const pipeline = data.find(p => p.name === pipelineNameFromLocation);
+      setSelectedPipeline(pipeline);
+      setShowFlyout(true);
+    }
+  }, [pipelineNameFromLocation, data]);
 
-  const editPipeline = (name: string) => {
+  const goToEditPipeline = (name: string) => {
     history.push(encodeURI(`${BASE_PATH}/edit/${encodeURIComponent(name)}`));
   };
 
-  const clonePipeline = (name: string) => {
+  const goToClonePipeline = (name: string) => {
     history.push(encodeURI(`${BASE_PATH}/create/${encodeURIComponent(name)}`));
   };
 
+  const goHome = () => {
+    setShowFlyout(false);
+    history.push(encodeURI(BASE_PATH));
+  };
+
+  let content: React.ReactNode;
+
   if (isLoading) {
     content = (
       <SectionLoading>
@@ -68,17 +95,47 @@ export const PipelinesList: React.FunctionComponent<RouteComponentProps> = ({ hi
     content = (
       <PipelineTable
         onReloadClick={sendRequest}
-        onEditPipelineClick={editPipeline}
+        onEditPipelineClick={goToEditPipeline}
         onDeletePipelineClick={setPipelinesToDelete}
-        onClonePipelineClick={clonePipeline}
-        onViewPipelineClick={setSelectedPipeline}
+        onClonePipelineClick={goToClonePipeline}
         pipelines={data}
       />
     );
   } else {
     content = <EmptyList />;
   }
 
+  const renderFlyout = (): React.ReactNode => {
+    if (!showFlyout) {
+      return;
+    }
+    if (selectedPipeline) {
+      return (
+        <PipelineDetailsFlyout
+          pipeline={selectedPipeline}
+          onClose={() => {
+            setSelectedPipeline(undefined);
+            goHome();
+          }}
+          onEditClick={goToEditPipeline}
+          onCloneClick={goToClonePipeline}
+          onDeleteClick={setPipelinesToDelete}
+        />
+      );
+    } else {
+      // Somehow we triggered show pipeline details, but do not have a pipeline.
+      // We assume not found.
+      return (
+        <PipelineNotFoundFlyout
+          onClose={() => {
+            goHome();
+          }}
+          pipelineName={pipelineNameFromLocation}
+        />
+      );
+    }
+  };
+
   return (
     <>
       <EuiPageBody>
@@ -131,15 +188,7 @@ export const PipelinesList: React.FunctionComponent<RouteComponentProps> = ({ hi
           )}
         </EuiPageContent>
       </EuiPageBody>
-      {selectedPipeline && (
-        <PipelineDetails
-          pipeline={selectedPipeline}
-          onClose={() => setSelectedPipeline(undefined)}
-          onEditClick={editPipeline}
-          onCloneClick={clonePipeline}
-          onDeleteClick={setPipelinesToDelete}
-        />
-      )}
+      {renderFlyout()}
       {pipelinesToDelete?.length > 0 ? (
         <PipelineDeleteModal
           callback={deleteResponse => {

x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/not_found_flyout.tsx

@@ -0,0 +1,42 @@
+/*
+ * 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 { FormattedMessage } from '@kbn/i18n/react';
+import { EuiFlyout, EuiFlyoutBody, EuiCallOut } from '@elastic/eui';
+import { EuiFlyoutHeader, EuiTitle } from '@elastic/eui';
+
+interface Props {
+  onClose: () => void;
+  pipelineName: string | string[] | null | undefined;
+}
+
+export const PipelineNotFoundFlyout: FunctionComponent<Props> = ({ onClose, pipelineName }) => {
+  return (
+    <EuiFlyout onClose={onClose} size="m" maxWidth={550}>
+      <EuiFlyoutHeader>
+        {pipelineName && (
+          <EuiTitle id="notFoundFlyoutTitle">
+            <h2>{pipelineName}</h2>
+          </EuiTitle>
+        )}
+      </EuiFlyoutHeader>
+
+      <EuiFlyoutBody>
+        <EuiCallOut
+          title={
+            <FormattedMessage
+              id="xpack.ingestPipelines.list.notFoundFlyoutMessage"
+              defaultMessage="Pipeline not found"
+            />
+          }
+          color="danger"
+          iconType="alert"
+        />
+      </EuiFlyoutBody>
+    </EuiFlyout>
+  );
+};

x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/table.tsx

@@ -17,7 +17,6 @@ export interface Props {
   onEditPipelineClick: (pipelineName: string) => void;
   onClonePipelineClick: (pipelineName: string) => void;
   onDeletePipelineClick: (pipelineName: string[]) => void;
-  onViewPipelineClick: (pipeline: Pipeline) => void;
 }
 
 export const PipelineTable: FunctionComponent<Props> = ({
@@ -26,7 +25,6 @@ export const PipelineTable: FunctionComponent<Props> = ({
   onEditPipelineClick,
   onClonePipelineClick,
   onDeletePipelineClick,
-  onViewPipelineClick,
 }) => {
   const [selection, setSelection] = useState<Pipeline[]>([]);
 
@@ -94,8 +92,8 @@ export const PipelineTable: FunctionComponent<Props> = ({
             defaultMessage: 'Name',
           }),
           sortable: true,
-          render: (name: string, pipeline) => (
-            <EuiLink onClick={() => onViewPipelineClick(pipeline)}>{name}</EuiLink>
+          render: (name: string) => (
+            <EuiLink href={`#${BASE_PATH}?pipeline=${name}`}>{name}</EuiLink>
           ),
         },
         {