update not found flyout and fix behavior when viewing details from table

elastic · Apr 27, 2020 · 0f83eaf · 0f83eaf
1 parent 867b074
commit 0f83eaf
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 34 deletions.
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
@@ -93,10 +93,6 @@ export const PipelinesList: React.FunctionComponent<RouteComponentProps> = ({
         onEditPipelineClick={editPipeline}
         onDeletePipelineClick={setPipelinesToDelete}
         onClonePipelineClick={clonePipeline}
-        onViewPipelineClick={pipeline => {
-          setShowFlyout(true);
-          setSelectedPipeline(pipeline);
-        }}
         pipelines={data}
       />
     );
@@ -129,6 +125,7 @@ export const PipelinesList: React.FunctionComponent<RouteComponentProps> = ({
           onClose={() => {
             setShowFlyout(false);
           }}
+          pipelineName={pipelineNameFromLocation}
         />
       );
     }

diff --git a/.../plugins/ingest_pipelines/public/application/sections/pipelines_list/not_found_flyout.tsx b/.../plugins/ingest_pipelines/public/application/sections/pipelines_list/not_found_flyout.tsx
@@ -6,40 +6,36 @@
 
 import React, { FunctionComponent } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFlyout,
-  EuiFlyoutBody,
-  EuiIcon,
-  EuiText,
-  EuiTextColor,
-} from '@elastic/eui';
+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 }) => {
+export const PipelineNotFoundFlyout: FunctionComponent<Props> = ({ onClose, pipelineName }) => {
   return (
     <EuiFlyout onClose={onClose} size="m" maxWidth={550}>
-      <EuiFlyoutBody>
-        <EuiFlexGroup justifyContent="flexStart" alignItems="center" gutterSize="s">
-          <EuiFlexItem grow={false}>
-            <EuiIcon size="m" type="alert" color="danger" />
-          </EuiFlexItem>
+      <EuiFlyoutHeader>
+        {pipelineName && (
+          <EuiTitle id="notFoundFlyoutTitle">
+            <h2>{pipelineName}</h2>
+          </EuiTitle>
+        )}
+      </EuiFlyoutHeader>
 
-          <EuiFlexItem grow={false}>
-            <EuiText>
-              <EuiTextColor color="subdued">
-                <FormattedMessage
-                  id="xpack.ingestPipelines.list.notFoundFlyoutMessage"
-                  defaultMessage="Pipeline not found"
-                />
-              </EuiTextColor>
-            </EuiText>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+      <EuiFlyoutBody>
+        <EuiCallOut
+          title={
+            <FormattedMessage
+              id="xpack.ingestPipelines.list.notFoundFlyoutMessage"
+              defaultMessage="Pipeline not found"
+            />
+          }
+          color="danger"
+          iconType="alert"
+        />
       </EuiFlyoutBody>
     </EuiFlyout>
   );

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
@@ -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>
           ),
         },
         {