address review feedback

Author: alisonelizabeth

x-pack/plugins/index_management/public/application/components/component_templates/component_template_list/component_template_list.tsx

@@ -12,6 +12,7 @@ import { ScopedHistory } from 'kibana/public';
 
 import { SectionLoading, ComponentTemplateDeserialized } from '../shared_imports';
 import { UIM_COMPONENT_TEMPLATE_LIST_LOAD } from '../constants';
+import { attemptToDecodeURI } from '../lib';
 import { useComponentTemplatesContext } from '../component_templates_context';
 import { ComponentTemplateDetailsFlyout } from '../component_template_details';
 import { EmptyPrompt } from './empty_prompt';
@@ -35,15 +36,21 @@ export const ComponentTemplateList: React.FunctionComponent<Props> = ({
   const [componentTemplatesToDelete, setComponentTemplatesToDelete] = useState<string[]>([]);
 
   const goToComponentTemplateList = () => {
-    return history.push('component_templates');
+    return history.push({
+      pathname: 'component_templates',
+    });
   };
 
   const goToEditComponentTemplate = (name: string) => {
-    return history.push(`edit_component_template/${encodeURIComponent(name)}`);
+    return history.push({
+      pathname: encodeURI(`edit_component_template/${encodeURIComponent(name)}`),
+    });
   };
 
   const goToCloneComponentTemplate = (name: string) => {
-    return history.push(`create_component_template/${encodeURIComponent(name)}`);
+    return history.push({
+      pathname: encodeURI(`create_component_template/${encodeURIComponent(name)}`),
+    });
   };
 
   // Track component loaded
@@ -110,14 +117,16 @@ export const ComponentTemplateList: React.FunctionComponent<Props> = ({
                 defaultMessage: 'Edit',
               }),
               icon: 'pencil',
-              handleActionClick: () => goToEditComponentTemplate(componentTemplateName),
+              handleActionClick: () =>
+                goToEditComponentTemplate(attemptToDecodeURI(componentTemplateName)),
             },
             {
               name: i18n.translate('xpack.idxMgmt.componentTemplateDetails.cloneActionLabel', {
                 defaultMessage: 'Clone',
               }),
               icon: 'copy',
-              handleActionClick: () => goToCloneComponentTemplate(componentTemplateName),
+              handleActionClick: () =>
+                goToCloneComponentTemplate(attemptToDecodeURI(componentTemplateName)),
             },
             {
               name: i18n.translate('xpack.idxMgmt.componentTemplateDetails.deleteButtonLabel', {
@@ -128,7 +137,7 @@ export const ComponentTemplateList: React.FunctionComponent<Props> = ({
                 details._kbnMeta.usedBy.length > 0,
               closePopoverOnClick: true,
               handleActionClick: () => {
-                setComponentTemplatesToDelete([componentTemplateName]);
+                setComponentTemplatesToDelete([attemptToDecodeURI(componentTemplateName)]);
               },
             },
           ]}

x-pack/plugins/index_management/public/application/components/component_templates/component_template_list/table.tsx

@@ -150,7 +150,7 @@ export const ComponentTable: FunctionComponent<Props> = ({
             {...reactRouterNavigate(
               history,
               {
-                pathname: `/component_templates/${encodeURIComponent(name)}`,
+                pathname: encodeURI(`/component_templates/${encodeURIComponent(name)}`),
               },
               () => trackMetric('click', UIM_COMPONENT_TEMPLATE_DETAILS)
             )}

x-pack/plugins/index_management/public/application/components/component_templates/component_template_wizard/component_template_clone/component_template_clone.tsx

@@ -20,16 +20,13 @@ export interface Params {
 
 export const ComponentTemplateClone: FunctionComponent<RouteComponentProps<Params>> = (props) => {
   const { sourceComponentTemplateName } = props.match.params;
-  const decodedSourceComponentTemplateName = attemptToDecodeURI(sourceComponentTemplateName);
+  const decodedSourceName = attemptToDecodeURI(sourceComponentTemplateName);
 
   const { toasts, api } = useComponentTemplatesContext();
 
-  const {
-    error,
-    data: componentTemplateToClone,
-    isLoading,
-    isInitialRequest,
-  } = api.useLoadComponentTemplate(decodedSourceComponentTemplateName);
+  const { error, data: componentTemplateToClone, isLoading } = api.useLoadComponentTemplate(
+    decodedSourceName
+  );
 
   useEffect(() => {
     if (error && !isLoading) {
@@ -43,7 +40,7 @@ export const ComponentTemplateClone: FunctionComponent<RouteComponentProps<Param
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [error, isLoading]);
 
-  if (isLoading && isInitialRequest) {
+  if (isLoading) {
     return (
       <SectionLoading>
         <FormattedMessage

x-pack/plugins/index_management/public/application/components/component_templates/component_template_wizard/component_template_create/component_template_create.tsx

@@ -43,7 +43,9 @@ export const ComponentTemplateCreate: React.FunctionComponent<RouteComponentProp
       return;
     }
 
-    history.push(`/component_templates/${encodeURIComponent(name)}`);
+    history.push({
+      pathname: encodeURI(`/component_templates/${encodeURIComponent(name)}`),
+    });
   };
 
   const clearSaveError = () => {

x-pack/plugins/index_management/public/application/components/component_templates/component_template_wizard/component_template_edit/component_template_edit.tsx

@@ -49,7 +49,9 @@ export const ComponentTemplateEdit: React.FunctionComponent<RouteComponentProps<
       return;
     }
 
-    history.push(`/component_templates/${encodeURIComponent(name)}`);
+    history.push({
+      pathname: encodeURI(`/component_templates/${encodeURIComponent(name)}`),
+    });
   };
 
   const clearSaveError = () => {

x-pack/plugins/index_management/public/application/components/component_templates/component_template_wizard/component_template_form/steps/step_logistics_schema.tsx

@@ -87,19 +87,15 @@ export const logisticsFormSchema: FormSchema = {
     deserializer: stringifyJson,
     validations: [
       {
-        validator: (validationArg) => {
-          if (!validationArg.value) {
-            return;
-          }
-          return isJsonField(
-            i18n.translate(
-              'xpack.idxMgmt.componentTemplateForm.stepLogistics.validation.metaJsonError',
-              {
-                defaultMessage: 'The input is not valid.',
-              }
-            )
-          )(validationArg);
-        },
+        validator: isJsonField(
+          i18n.translate(
+            'xpack.idxMgmt.componentTemplateForm.stepLogistics.validation.metaJsonError',
+            {
+              defaultMessage: 'The input is not valid.',
+            }
+          ),
+          { allowEmptyString: true }
+        ),
       },
     ],
   },

x-pack/plugins/index_management/public/application/components/component_templates/component_template_wizard/component_template_form/steps/step_review.tsx

@@ -48,10 +48,10 @@ interface Props {
 }
 
 export const StepReview: React.FunctionComponent<Props> = React.memo(({ componentTemplate }) => {
-  const { name, version } = componentTemplate!;
+  const { name, version } = componentTemplate;
 
   const serializedComponentTemplate = serializeComponentTemplate(
-    stripEmptyFields(componentTemplate!, {
+    stripEmptyFields(componentTemplate, {
       types: ['string', 'object'],
     }) as ComponentTemplateDeserialized
   );
@@ -73,7 +73,7 @@ export const StepReview: React.FunctionComponent<Props> = React.memo(({ componen
         <EuiFlexItem>
           <EuiDescriptionList textStyle="reverse">
             {/* Version */}
-            {version && (
+            {version !== '' && (
               <>
                 <EuiDescriptionListTitle>
                   <FormattedMessage

x-pack/plugins/index_management/public/application/components/component_templates/lib/utils.ts

@@ -8,9 +8,10 @@ export const attemptToDecodeURI = (value: string) => {
   let result: string;
 
   try {
-    result = decodeURIComponent(value);
+    result = decodeURI(value);
+    result = decodeURIComponent(result);
   } catch (e) {
-    result = value;
+    result = decodeURIComponent(value);
   }
 
   return result;