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