[Ingest Pipelines] Encode URI component pipeline names (#69489)

* Properly encode URI component pipeline names

* safely URI decode to handle % case

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

@@ -12,6 +12,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { SectionLoading, useKibana } from '../../../shared_imports';
 
 import { PipelinesCreate } from '../pipelines_create';
+import { attemptToURIDecode } from '../shared';
 
 export interface ParamProps {
   sourceName: string;
@@ -25,8 +26,9 @@ export const PipelinesClone: FunctionComponent<RouteComponentProps<ParamProps>>
   const { sourceName } = props.match.params;
   const { services } = useKibana();
 
+  const decodedSourceName = attemptToURIDecode(sourceName);
   const { error, data: pipeline, isLoading, isInitialRequest } = services.api.useLoadPipeline(
-    decodeURIComponent(sourceName)
+    decodedSourceName
   );
 
   useEffect(() => {

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 + `?pipeline=${pipeline.name}`);
+    history.push(BASE_PATH + `?pipeline=${encodeURIComponent(pipeline.name)}`);
   };
 
   const onCancel = () => {

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

@@ -22,6 +22,8 @@ import { Pipeline } from '../../../../common/types';
 import { useKibana, SectionLoading } from '../../../shared_imports';
 import { PipelineForm } from '../../components';
 
+import { attemptToURIDecode } from '../shared';
+
 interface MatchParams {
   name: string;
 }
@@ -37,7 +39,7 @@ export const PipelinesEdit: React.FunctionComponent<RouteComponentProps<MatchPar
   const [isSaving, setIsSaving] = useState<boolean>(false);
   const [saveError, setSaveError] = useState<any>(null);
 
-  const decodedPipelineName = decodeURI(decodeURIComponent(name));
+  const decodedPipelineName = attemptToURIDecode(name);
 
   const { error, data: pipeline, isLoading } = services.api.useLoadPipeline(decodedPipelineName);
 
@@ -54,7 +56,7 @@ export const PipelinesEdit: React.FunctionComponent<RouteComponentProps<MatchPar
       return;
     }
 
-    history.push(BASE_PATH + `?pipeline=${updatedPipeline.name}`);
+    history.push(BASE_PATH + `?pipeline=${encodeURIComponent(updatedPipeline.name)}`);
   };
 
   const onCancel = () => {

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

@@ -111,7 +111,10 @@ export const PipelineTable: FunctionComponent<Props> = ({
         render: (name: string) => (
           <EuiLink
             data-test-subj="pipelineDetailsLink"
-            {...reactRouterNavigate(history, { pathname: '/', search: `pipeline=${name}` })}
+            {...reactRouterNavigate(history, {
+              pathname: '/',
+              search: `pipeline=${encodeURIComponent(name)}`,
+            })}
           >
             {name}
           </EuiLink>

x-pack/plugins/ingest_pipelines/public/application/sections/shared/attempt_to_uri_decode.ts

@@ -0,0 +1,15 @@
+/*
+ * 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.
+ */
+
+export const attemptToURIDecode = (value: string) => {
+  let result: string;
+  try {
+    result = decodeURI(decodeURIComponent(value));
+  } catch (e) {
+    result = value;
+  }
+  return result;
+};

x-pack/plugins/ingest_pipelines/public/application/sections/shared/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { attemptToURIDecode } from './attempt_to_uri_decode';