From 0c8917c83df92d9f68ba0e5e671b5c72ea809566 Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Fri, 24 Apr 2020 10:45:30 +0200
Subject: [PATCH 1/6] Show flyout after editing or creating a pipeline

---
 .../public/application/app.tsx                |  2 ++
 .../pipelines_create/pipelines_create.tsx     |  2 +-
 .../pipelines_edit/pipelines_edit.tsx         |  2 +-
 .../sections/pipelines_list/main.tsx          | 28 ++++++++++++++++---
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/ingest_pipelines/public/application/app.tsx b/x-pack/plugins/ingest_pipelines/public/application/app.tsx
index 2ec72267701d74..10c427ece55e38 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/app.tsx
+++ b/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>
 );
 
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_create/pipelines_create.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_create/pipelines_create.tsx
index 2f3e2630adbd10..15d370975c9f8b 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_create/pipelines_create.tsx
+++ b/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 = () => {
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_edit/pipelines_edit.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_edit/pipelines_edit.tsx
index 02eba9c4f620f3..c70d512970b2cd 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_edit/pipelines_edit.tsx
+++ b/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 = () => {
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
index bd0043e3e74af2..2f7ff0d7725138 100644
--- 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
@@ -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,
@@ -31,21 +33,37 @@ import { PipelineTable } from './table';
 import { PipelineDetails } from './details';
 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 [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);
+      if (pipeline) {
+        setSelectedPipeline(pipeline);
+      }
+    }
+  }, [pipelineNameFromLocation, data]);
 
   const editPipeline = (name: string) => {
     history.push(encodeURI(`${BASE_PATH}/edit/${encodeURIComponent(name)}`));
@@ -55,6 +73,8 @@ export const PipelinesList: React.FunctionComponent<RouteComponentProps> = ({ hi
     history.push(encodeURI(`${BASE_PATH}/create/${encodeURIComponent(name)}`));
   };
 
+  let content: React.ReactNode;
+
   if (isLoading) {
     content = (
       <SectionLoading>

From a2c86df53316c5f6bc4ca113dd648f3ee4aac39e Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Fri, 24 Apr 2020 10:47:52 +0200
Subject: [PATCH 2/6] JSX comment

---
 x-pack/plugins/ingest_pipelines/public/application/app.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/ingest_pipelines/public/application/app.tsx b/x-pack/plugins/ingest_pipelines/public/application/app.tsx
index 10c427ece55e38..ba7675b5075960 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/app.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/app.tsx
@@ -26,7 +26,7 @@ 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
+    {/* Catch all */}
     <Route component={PipelinesList} />
   </Switch>
 );

From 867b0748d1c180b1b2e83c47462ada1ea9040236 Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Mon, 27 Apr 2020 10:34:12 +0200
Subject: [PATCH 3/6] Show not found flyout

Copied from CCR
---
 .../{details.tsx => details_flyout.tsx}       |  2 +-
 .../sections/pipelines_list/main.tsx          | 55 ++++++++++++++-----
 .../pipelines_list/not_found_flyout.tsx       | 46 ++++++++++++++++
 3 files changed, 88 insertions(+), 15 deletions(-)
 rename x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/{details.tsx => details_flyout.tsx} (98%)
 create mode 100644 x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/not_found_flyout.tsx

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_flyout.tsx
similarity index 98%
rename from x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details.tsx
rename to x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/details_flyout.tsx
index 07fdb1c15e0bf4..98243a5149c0df 100644
--- 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_flyout.tsx
@@ -36,7 +36,7 @@ export interface Props {
   onClose: () => void;
 }
 
-export const PipelineDetails: FunctionComponent<Props> = ({
+export const PipelineDetailsFlyout: FunctionComponent<Props> = ({
   pipeline,
   onClose,
   onEditClick,
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
index 2f7ff0d7725138..9b6e7e3a4974b9 100644
--- 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
@@ -30,7 +30,8 @@ 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';
 
 const getPipelineNameFromLocation = (location: Location) => {
@@ -46,6 +47,8 @@ export const PipelinesList: React.FunctionComponent<RouteComponentProps> = ({
   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();
@@ -59,9 +62,8 @@ export const PipelinesList: React.FunctionComponent<RouteComponentProps> = ({
   useEffect(() => {
     if (pipelineNameFromLocation && data?.length) {
       const pipeline = data.find(p => p.name === pipelineNameFromLocation);
-      if (pipeline) {
-        setSelectedPipeline(pipeline);
-      }
+      setSelectedPipeline(pipeline);
+      setShowFlyout(true);
     }
   }, [pipelineNameFromLocation, data]);
 
@@ -91,7 +93,10 @@ export const PipelinesList: React.FunctionComponent<RouteComponentProps> = ({
         onEditPipelineClick={editPipeline}
         onDeletePipelineClick={setPipelinesToDelete}
         onClonePipelineClick={clonePipeline}
-        onViewPipelineClick={setSelectedPipeline}
+        onViewPipelineClick={pipeline => {
+          setShowFlyout(true);
+          setSelectedPipeline(pipeline);
+        }}
         pipelines={data}
       />
     );
@@ -99,6 +104,36 @@ export const PipelinesList: React.FunctionComponent<RouteComponentProps> = ({
     content = <EmptyList />;
   }
 
+  const renderFlyout = (): React.ReactNode => {
+    if (!showFlyout) {
+      return;
+    }
+    if (selectedPipeline) {
+      return (
+        <PipelineDetailsFlyout
+          pipeline={selectedPipeline}
+          onClose={() => {
+            setSelectedPipeline(undefined);
+            setShowFlyout(false);
+          }}
+          onEditClick={editPipeline}
+          onCloneClick={clonePipeline}
+          onDeleteClick={setPipelinesToDelete}
+        />
+      );
+    } else {
+      // Somehow we triggered show pipeline details, but do not have a pipeline.
+      // We assume not found.
+      return (
+        <PipelineNotFoundFlyout
+          onClose={() => {
+            setShowFlyout(false);
+          }}
+        />
+      );
+    }
+  };
+
   return (
     <>
       <EuiPageBody>
@@ -151,15 +186,7 @@ export const PipelinesList: React.FunctionComponent<RouteComponentProps> = ({
           )}
         </EuiPageContent>
       </EuiPageBody>
-      {selectedPipeline && (
-        <PipelineDetails
-          pipeline={selectedPipeline}
-          onClose={() => setSelectedPipeline(undefined)}
-          onEditClick={editPipeline}
-          onCloneClick={clonePipeline}
-          onDeleteClick={setPipelinesToDelete}
-        />
-      )}
+      {renderFlyout()}
       {pipelinesToDelete?.length > 0 ? (
         <PipelineDeleteModal
           callback={deleteResponse => {
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/not_found_flyout.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/not_found_flyout.tsx
new file mode 100644
index 00000000000000..e13386411fc672
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/not_found_flyout.tsx
@@ -0,0 +1,46 @@
+/*
+ * 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 {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiIcon,
+  EuiText,
+  EuiTextColor,
+} from '@elastic/eui';
+
+interface Props {
+  onClose: () => void;
+}
+
+export const PipelineNotFoundFlyout: FunctionComponent<Props> = ({ onClose }) => {
+  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>
+
+          <EuiFlexItem grow={false}>
+            <EuiText>
+              <EuiTextColor color="subdued">
+                <FormattedMessage
+                  id="xpack.ingestPipelines.list.notFoundFlyoutMessage"
+                  defaultMessage="Pipeline not found"
+                />
+              </EuiTextColor>
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutBody>
+    </EuiFlyout>
+  );
+};

From 0f83eaf9a1f6dd41d4ffdd9b5f02bc7772381f0e Mon Sep 17 00:00:00 2001
From: Alison Goryachev <alisonmllr20@gmail.com>
Date: Mon, 27 Apr 2020 10:33:52 -0400
Subject: [PATCH 4/6] update not found flyout and fix behavior when viewing
 details from table

---
 .../sections/pipelines_list/main.tsx          |  5 +-
 .../pipelines_list/not_found_flyout.tsx       | 48 +++++++++----------
 .../sections/pipelines_list/table.tsx         |  6 +--
 3 files changed, 25 insertions(+), 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
index 9b6e7e3a4974b9..b3a17ffc7e9d1b 100644
--- 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/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/not_found_flyout.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/not_found_flyout.tsx
index e13386411fc672..b967e54187ced1 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_list/not_found_flyout.tsx
+++ b/x-pack/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
index 05488f46c148e7..1c938a023fc2cc 100644
--- 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>
           ),
         },
         {

From e6b848970943a889fb3a381c9055ecd22f0831a6 Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Tue, 28 Apr 2020 11:00:09 +0200
Subject: [PATCH 5/6] Reset pipeline name in URI when closing flyout

---
 .../sections/pipelines_list/main.tsx          | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 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
index b3a17ffc7e9d1b..81af24ffe6e4c6 100644
--- 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
@@ -67,14 +67,19 @@ export const PipelinesList: React.FunctionComponent<RouteComponentProps> = ({
     }
   }, [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) {
@@ -90,9 +95,9 @@ export const PipelinesList: React.FunctionComponent<RouteComponentProps> = ({
     content = (
       <PipelineTable
         onReloadClick={sendRequest}
-        onEditPipelineClick={editPipeline}
+        onEditPipelineClick={goToEditPipeline}
         onDeletePipelineClick={setPipelinesToDelete}
-        onClonePipelineClick={clonePipeline}
+        onClonePipelineClick={goToClonePipeline}
         pipelines={data}
       />
     );
@@ -110,10 +115,10 @@ export const PipelinesList: React.FunctionComponent<RouteComponentProps> = ({
           pipeline={selectedPipeline}
           onClose={() => {
             setSelectedPipeline(undefined);
-            setShowFlyout(false);
+            goHome();
           }}
-          onEditClick={editPipeline}
-          onCloneClick={clonePipeline}
+          onEditClick={goToEditPipeline}
+          onCloneClick={goToClonePipeline}
           onDeleteClick={setPipelinesToDelete}
         />
       );
@@ -123,7 +128,7 @@ export const PipelinesList: React.FunctionComponent<RouteComponentProps> = ({
       return (
         <PipelineNotFoundFlyout
           onClose={() => {
-            setShowFlyout(false);
+            goHome();
           }}
           pipelineName={pipelineNameFromLocation}
         />

From 3cd5d76fdb2926c74054d73ea589658c99e88c29 Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Tue, 28 Apr 2020 15:35:36 +0200
Subject: [PATCH 6/6] Remove encodeURI

Already using encodingURIComponent for unsafe string.
---
 .../public/application/sections/pipelines_list/main.tsx     | 6 +++---
 1 file changed, 3 insertions(+), 3 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
index 81af24ffe6e4c6..2be9776ae06112 100644
--- 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
@@ -68,16 +68,16 @@ export const PipelinesList: React.FunctionComponent<RouteComponentProps> = ({
   }, [pipelineNameFromLocation, data]);
 
   const goToEditPipeline = (name: string) => {
-    history.push(encodeURI(`${BASE_PATH}/edit/${encodeURIComponent(name)}`));
+    history.push(`${BASE_PATH}/edit/${encodeURIComponent(name)}`);
   };
 
   const goToClonePipeline = (name: string) => {
-    history.push(encodeURI(`${BASE_PATH}/create/${encodeURIComponent(name)}`));
+    history.push(`${BASE_PATH}/create/${encodeURIComponent(name)}`);
   };
 
   const goHome = () => {
     setShowFlyout(false);
-    history.push(encodeURI(BASE_PATH));
+    history.push(BASE_PATH);
   };
 
   let content: React.ReactNode;