[CCR] Encode and Decode auto-follow pattern name

x-pack/plugins/cross_cluster_replication/public/app/app.js

@@ -45,12 +45,13 @@ export class App extends Component {
     return (
       <div>
         <Switch>
-          <Redirect exact from={`${BASE_PATH}/:section`} to={`${BASE_PATH}`} />
+          <Redirect exact from={`${BASE_PATH}`} to={`${BASE_PATH}/auto_follow_patterns`} />
           <Route exact path={`${BASE_PATH}/auto_follow_patterns/add`} component={AutoFollowPatternAdd} />
           <Route exact path={`${BASE_PATH}/auto_follow_patterns/edit/:id`} component={AutoFollowPatternEdit} />
-          <Route path={`${BASE_PATH}`} component={CrossClusterReplicationHome} />
+          <Route exact path={`${BASE_PATH}/:section`} component={CrossClusterReplicationHome} />
         </Switch>
       </div>
     );
   }
 }
+

x-pack/plugins/cross_cluster_replication/public/app/components/auto_follow_pattern_form.js

@@ -202,7 +202,7 @@ export class AutoFollowPatternFormUI extends PureComponent {
   };
 
   cancelForm = () => {
-    routing.navigate('/home');
+    routing.navigate('/auto_follow_patterns');
   };
 
   /**

x-pack/plugins/cross_cluster_replication/public/app/sections/auto_follow_pattern_edit/auto_follow_pattern_edit.js

@@ -45,7 +45,8 @@ class AutoFollowPatternEditUi extends PureComponent {
   componentDidMount() {
     const { autoFollowPattern, match: { params: { id } } } = this.props;
     if (!autoFollowPattern) {
-      this.props.getAutoFollowPattern(id);
+      const decodedId = decodeURIComponent(id);
+      this.props.getAutoFollowPattern(decodedId);
     }
 
     chrome.breadcrumbs.set([ MANAGEMENT_BREADCRUMB, listBreadcrumb, editBreadcrumb ]);

x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/components/auto_follow_pattern_table/auto_follow_pattern_table.js

@@ -147,7 +147,7 @@ export class AutoFollowPatternTableUI extends PureComponent {
           icon: 'pencil',
           onClick: ({ name }) => {
             selectAutoFollowPattern(name);
-            routing.navigate(`/auto_follow_patterns/edit/${name}`);
+            routing.navigate(encodeURI(`/auto_follow_patterns/edit/${encodeURIComponent(name)}`));
           },
           type: 'icon',
         },

x-pack/plugins/cross_cluster_replication/public/app/sections/home/home.js

@@ -6,9 +6,11 @@
 
 import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { Route, Switch } from 'react-router-dom';
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 import chrome from 'ui/chrome';
 import { MANAGEMENT_BREADCRUMB } from 'ui/management';
+import { BASE_PATH } from '../../../../common/constants';
 
 import {
   EuiButton,
@@ -113,24 +115,16 @@ export class CrossClusterReplicationHomeUI extends PureComponent {
     }
   }
 
-  getSection() {
-    const { match: { params: { section } } } = this.props;
-
-    switch(section) {
-      default: {
-        return <AutoFollowPatternList />;
-      }
-    }
-  }
-
   render() {
     return (
       <EuiPage>
         <EuiPageBody>
           <EuiPageContent>
             {this.getHeaderSection()}
             {this.getUnauthorizedSection()}
-            {this.getSection()}
+            <Switch>
+              <Route exact path={`${BASE_PATH}/auto_follow_patterns`} component={AutoFollowPatternList} />
+            </Switch>
           </EuiPageContent>
         </EuiPageBody>
       </EuiPage>

x-pack/plugins/cross_cluster_replication/public/app/services/api.js

@@ -28,19 +28,19 @@ export const loadAutoFollowPatterns = () => (
 );
 
 export const getAutoFollowPattern = (id) => (
-  httpClient.get(`${apiPrefix}/auto_follow_patterns/${id}`).then(extractData)
+  httpClient.get(`${apiPrefix}/auto_follow_patterns/${encodeURIComponent(id)}`).then(extractData)
 );
 
 export const loadRemoteClusters = () => (
   httpClient.get(`${apiPrefixRemoteClusters}`).then(extractData)
 );
 
 export const saveAutoFollowPattern = (id, autoFollowPattern) => (
-  httpClient.put(`${apiPrefix}/auto_follow_patterns/${id}`, autoFollowPattern).then(extractData)
+  httpClient.put(`${apiPrefix}/auto_follow_patterns/${encodeURIComponent(id)}`, autoFollowPattern).then(extractData)
 );
 
 export const deleteAutoFollowPattern = (id) => {
-  const ids = arrify(id);
+  const ids = arrify(id).map(_id => encodeURIComponent(_id)).join(',');
 
-  return httpClient.delete(`${apiPrefix}/auto_follow_patterns/${ids.join(',')}`).then(extractData);
+  return httpClient.delete(`${apiPrefix}/auto_follow_patterns/${ids}`).then(extractData);
 };

x-pack/plugins/cross_cluster_replication/public/app/services/routing.js

@@ -68,7 +68,7 @@ class Routing {
       : undefined;
 
     this._reactRouter.history.push({
-      pathname: appToBasePathMap[app] + route,
+      pathname: encodeURI(appToBasePathMap[app] + route),
       search,
     });
   }

x-pack/plugins/cross_cluster_replication/public/app/store/actions/auto_follow_pattern.js

@@ -66,7 +66,7 @@ export const saveAutoFollowPattern = (id, autoFollowPattern, isEditing = false)
         });
 
       toastNotifications.addSuccess(successMessage);
-      routing.navigate('/home');
+      routing.navigate('/auto_follow_patterns');
     },
   })
 );