[CCR] Refactor redux for Auto-follow pattern detail panel

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

@@ -67,6 +67,7 @@ export const updateFormErrors = (errors, existingErrors) => ({
 export class AutoFollowPatternFormUI extends PureComponent {
   static propTypes = {
     saveAutoFollowPattern: PropTypes.func.isRequired,
+    onCancel: PropTypes.func,
     autoFollowPattern: PropTypes.object,
     apiError: PropTypes.object,
     apiStatus: PropTypes.string.isRequired,
@@ -205,6 +206,7 @@ export class AutoFollowPatternFormUI extends PureComponent {
   };
 
   cancelForm = () => {
+    this.props.onCancel && this.props.onCancel();
     routing.navigate('/auto_follow_patterns');
   };
 

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

@@ -7,20 +7,27 @@
 import { connect } from 'react-redux';
 
 import { SECTIONS } from '../../constants';
-import { getApiStatus, getApiError, getSelectedAutoFollowPattern } from '../../store/selectors';
-import { getAutoFollowPattern, saveAutoFollowPattern, clearApiError } from '../../store/actions';
+import {
+  getApiStatus,
+  getApiError,
+  getSelectedAutoFollowPatternId,
+  getSelectedAutoFollowPattern,
+} from '../../store/selectors';
+import { getAutoFollowPattern, saveAutoFollowPattern, selectAutoFollowPattern, clearApiError } from '../../store/actions';
 import { AutoFollowPatternEdit as AutoFollowPatternEditView } from './auto_follow_pattern_edit';
 
 const scope = SECTIONS.AUTO_FOLLOW_PATTERN;
 
 const mapStateToProps = (state) => ({
   apiStatus: getApiStatus(scope)(state),
   apiError: getApiError(scope)(state),
+  autoFollowPatternId: getSelectedAutoFollowPatternId(state),
   autoFollowPattern: getSelectedAutoFollowPattern(state),
 });
 
 const mapDispatchToProps = dispatch => ({
   getAutoFollowPattern: (id) => dispatch(getAutoFollowPattern(id)),
+  selectAutoFollowPattern: (id) => dispatch(selectAutoFollowPattern(id)),
   saveAutoFollowPattern: (id, autoFollowPattern) => dispatch(saveAutoFollowPattern(id, autoFollowPattern, true)),
   clearApiError: () => dispatch(clearApiError(scope)),
 });

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

@@ -37,22 +37,40 @@ export const AutoFollowPatternEdit = injectI18n(
   class extends PureComponent {
     static propTypes = {
       getAutoFollowPattern: PropTypes.func.isRequired,
+      selectAutoFollowPattern: PropTypes.func.isRequired,
       saveAutoFollowPattern: PropTypes.func.isRequired,
       clearApiError: PropTypes.func.isRequired,
       apiError: PropTypes.object,
       apiStatus: PropTypes.string.isRequired,
+      autoFollowPattern: PropTypes.object,
+      autoFollowPatternId: PropTypes.string,
     }
 
-    componentDidMount() {
-      const { autoFollowPattern, match: { params: { id } } } = this.props;
-      if (!autoFollowPattern) {
-        const decodedId = decodeURIComponent(id);
-        this.props.getAutoFollowPattern(decodedId);
+    static getDerivedStateFromProps({ autoFollowPatternId }, { lastAutoFollowPatternId }) {
+      if (lastAutoFollowPatternId !== autoFollowPatternId) {
+        return { lastAutoFollowPatternId: autoFollowPatternId };
       }
+    }
+
+    state = { lastAutoFollowPatternId: undefined }
+
+    componentDidMount() {
+      const { match: { params: { id } } } = this.props;
+      const decodedId = decodeURIComponent(id);
+
+      this.props.selectAutoFollowPattern(decodedId);
 
       chrome.breadcrumbs.set([ MANAGEMENT_BREADCRUMB, listBreadcrumb, editBreadcrumb ]);
     }
 
+    componentDidUpdate(prevProps, prevState) {
+      const { autoFollowPattern, getAutoFollowPattern } = this.props;
+      if (!autoFollowPattern && prevState.lastAutoFollowPatternId !== this.state.lastAutoFollowPatternId) {
+        // Fetch the auto-follow pattern on the server
+        getAutoFollowPattern(this.state.lastAutoFollowPatternId);
+      }
+    }
+
     componentWillUnmount() {
       this.props.clearApiError();
     }
@@ -136,7 +154,7 @@ export const AutoFollowPatternEdit = injectI18n(
     }
 
     render() {
-      const { saveAutoFollowPattern, apiStatus, apiError, autoFollowPattern, intl } = this.props;
+      const { saveAutoFollowPattern, selectAutoFollowPattern, apiStatus, apiError, autoFollowPattern, intl } = this.props;
 
       return (
         <EuiPage>
@@ -193,6 +211,7 @@ export const AutoFollowPatternEdit = injectI18n(
                         remoteClusters={remoteClusters}
                         autoFollowPattern={autoFollowPattern}
                         saveAutoFollowPattern={saveAutoFollowPattern}
+                        onCancel={() => selectAutoFollowPattern(null)}
                       />
                     );
                   }}

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

@@ -9,36 +9,30 @@ import { connect } from 'react-redux';
 import { SECTIONS } from '../../../constants';
 import {
   getListAutoFollowPatterns,
+  getSelectedAutoFollowPatternId,
   getApiStatus,
   getApiError,
   isApiAuthorized,
-  isAutoFollowPatternDetailPanelOpen as isDetailPanelOpen,
 } from '../../../store/selectors';
 import {
   loadAutoFollowPatterns,
-  openAutoFollowPatternDetailPanel as openDetailPanel,
-  closeAutoFollowPatternDetailPanel as closeDetailPanel,
+  selectAutoFollowPattern,
 } from '../../../store/actions';
 import { AutoFollowPatternList as AutoFollowPatternListView } from './auto_follow_pattern_list';
 
 const scope = SECTIONS.AUTO_FOLLOW_PATTERN;
 
 const mapStateToProps = (state) => ({
   autoFollowPatterns: getListAutoFollowPatterns(state),
+  autoFollowPatternId: getSelectedAutoFollowPatternId(state),
   apiStatus: getApiStatus(scope)(state),
   apiError: getApiError(scope)(state),
   isAuthorized: isApiAuthorized(scope)(state),
-  isDetailPanelOpen: isDetailPanelOpen(state),
 });
 
 const mapDispatchToProps = dispatch => ({
   loadAutoFollowPatterns: (inBackground) => dispatch(loadAutoFollowPatterns(inBackground)),
-  openDetailPanel: (name) => {
-    dispatch(openDetailPanel(name));
-  },
-  closeDetailPanel: () => {
-    dispatch(closeDetailPanel());
-  },
+  selectAutoFollowPattern: (id) => dispatch(selectAutoFollowPattern(id)),
 });
 
 export const AutoFollowPatternList = connect(

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

@@ -21,17 +21,37 @@ export const AutoFollowPatternList = injectI18n(
   class extends PureComponent {
     static propTypes = {
       loadAutoFollowPatterns: PropTypes.func,
+      selectAutoFollowPattern: PropTypes.func,
       autoFollowPatterns: PropTypes.array,
       apiStatus: PropTypes.string,
       apiError: PropTypes.object,
-      openDetailPanel: PropTypes.func.isRequired,
-      closeDetailPanel: PropTypes.func.isRequired,
-      isDetailPanelOpen: PropTypes.bool,
     }
 
+    static getDerivedStateFromProps({ autoFollowPatternId }, { lastAutoFollowPatternId }) {
+      if (autoFollowPatternId !== lastAutoFollowPatternId) {
+        return {
+          lastAutoFollowPatternId: autoFollowPatternId, // URL query param takes over store value
+          isDetailPanelOpen: !!autoFollowPatternId,
+        };
+      }
+      return null;
+    }
+
+    state = {
+      lastAutoFollowPatternId: undefined,
+      isDetailPanelOpen: false,
+    };
+
     componentDidMount() {
       this.props.loadAutoFollowPatterns();
 
+      // Check if there is an active auto-follow pattern in the URL query param
+      const { history: { location: { search } } } = this.props;
+      const { pattern } = extractQueryParams(search);
+      if (pattern) {
+        this.props.selectAutoFollowPattern(pattern);
+      }
+
       // Interval to load auto-follow patterns in the background passing "true" to the fetch method
       this.interval = setInterval(() => this.props.loadAutoFollowPatterns(true), REFRESH_RATE_MS);
     }
@@ -40,25 +60,20 @@ export const AutoFollowPatternList = injectI18n(
       clearInterval(this.interval);
     }
 
-    componentDidUpdate() {
-      const {
-        openDetailPanel,
-        closeDetailPanel,
-        isDetailPanelOpen,
-        history: {
-          location: {
-            search,
-          },
-        },
-      } = this.props;
-
-      const { pattern: patternName } = extractQueryParams(search);
-
-      // Show deeplinked auto follow pattern whenever patterns get loaded or the URL changes.
-      if (patternName != null) {
-        openDetailPanel(patternName);
-      } else if (isDetailPanelOpen) {
-        closeDetailPanel();
+    componentDidUpdate(_, prevState) {
+      const { history } = this.props;
+
+      if (this.state.lastAutoFollowPatternId !== prevState.lastAutoFollowPatternId) {
+        // Persist state to query params for deep link
+        if(!this.state.lastAutoFollowPatternId) {
+          history.replace({
+            search: '',
+          });
+        } else {
+          history.replace({
+            search: `?pattern=${encodeURIComponent(this.state.lastAutoFollowPatternId)}`,
+          });
+        }
       }
     }
 
@@ -102,7 +117,12 @@ export const AutoFollowPatternList = injectI18n(
     }
 
     renderList() {
-      const { autoFollowPatterns, apiStatus } = this.props;
+      const {
+        autoFollowPatterns,
+        apiStatus,
+      } = this.props;
+
+      const { isDetailPanelOpen } = this.state;
 
       if (apiStatus === API_STATUS.LOADING) {
         return (
@@ -118,7 +138,7 @@ export const AutoFollowPatternList = injectI18n(
       return (
         <Fragment>
           <AutoFollowPatternTable autoFollowPatterns={autoFollowPatterns} />
-          <DetailPanel />
+          {isDetailPanelOpen && <DetailPanel />}
         </Fragment>
       );
     }

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

@@ -7,10 +7,7 @@
 import { connect } from 'react-redux';
 
 import { SECTIONS } from '../../../../../constants';
-import {
-  editAutoFollowPattern,
-  openAutoFollowPatternDetailPanel as openDetailPanel,
-} from '../../../../../store/actions';
+import { selectAutoFollowPattern } from '../../../../../store/actions';
 import { getApiStatus } from '../../../../../store/selectors';
 import { AutoFollowPatternTable as AutoFollowPatternTableComponent } from './auto_follow_pattern_table';
 
@@ -21,10 +18,7 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  editAutoFollowPattern: (name) => dispatch(editAutoFollowPattern(name)),
-  openDetailPanel: (name) => {
-    dispatch(openDetailPanel(name));
-  },
+  selectAutoFollowPattern: (name) => dispatch(selectAutoFollowPattern(name)),
 });
 
 export const AutoFollowPatternTable = connect(

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

@@ -25,7 +25,7 @@ export const AutoFollowPatternTable = injectI18n(
   class extends PureComponent {
     static propTypes = {
       autoFollowPatterns: PropTypes.array,
-      openDetailPanel: PropTypes.func.isRequired,
+      selectAutoFollowPattern: PropTypes.func.isRequired,
     }
 
     state = {
@@ -61,7 +61,7 @@ export const AutoFollowPatternTable = injectI18n(
     };
 
     getTableColumns() {
-      const { intl, editAutoFollowPattern, openDetailPanel } = this.props;
+      const { intl, selectAutoFollowPattern } = this.props;
 
       return [{
         field: 'name',
@@ -73,7 +73,7 @@ export const AutoFollowPatternTable = injectI18n(
         truncateText: false,
         render: (name) => {
           return (
-            <EuiLink onClick={() => openDetailPanel(name)}>
+            <EuiLink onClick={() => selectAutoFollowPattern(name)}>
               {name}
             </EuiLink>
           );
@@ -142,20 +142,25 @@ export const AutoFollowPatternTable = injectI18n(
             },
           },
           {
-            name: intl.formatMessage({
-              id: 'xpack.crossClusterReplication.editIndexPattern.fields.table.actionEditLabel',
-              defaultMessage: 'Edit',
-            }),
-            description: intl.formatMessage({
-              id: 'xpack.crossClusterReplication.editIndexPattern.fields.table.actionEditDescription',
-              defaultMessage: 'Edit',
-            }),
-            icon: 'pencil',
-            onClick: ({ name }) => {
-              editAutoFollowPattern(name);
-              routing.navigate(encodeURI(`/auto_follow_patterns/edit/${encodeURIComponent(name)}`));
+            render: ({ name }) => {
+              const label = i18n.translate('xpack.crossClusterReplication.autoFollowPatternList.table.actionEditDescription', {
+                defaultMessage: 'Edit auto-follow pattern',
+              });
+
+              return (
+                <EuiToolTip
+                  content={label}
+                  delay="long"
+                >
+                  <EuiButtonIcon
+                    aria-label={label}
+                    iconType="pencil"
+                    color="primary"
+                    href={routing.getAutoFollowPatternPath(name)}
+                  />
+                </EuiToolTip>
+              );
             },
-            type: 'icon',
           },
         ],
         width: '100px',