[CCR] Fix row actions in follower index and auto-follow pattern tables

x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_actions_providers/follower_index_actions_provider.js

@@ -0,0 +1,34 @@
+/*
+ * 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.
+ */
+
+import React from 'react';
+
+import { FollowerIndexPauseProvider } from './follower_index_pause_provider';
+import { FollowerIndexResumeProvider } from './follower_index_resume_provider';
+import { FollowerIndexUnfollowProvider } from './follower_index_unfollow_provider';
+
+export const FollowerIndexActionsProvider = (props) => {
+  return (
+    <FollowerIndexPauseProvider>
+      {(pauseFollowerIndex) => (
+        <FollowerIndexResumeProvider>
+          {(resumeFollowerIndex) => (
+            <FollowerIndexUnfollowProvider>
+              {(unfollowLeaderIndex) => {
+                const { children } = props;
+                return children(() => ({
+                  pauseFollowerIndex,
+                  resumeFollowerIndex,
+                  unfollowLeaderIndex,
+                }));
+              }}
+            </FollowerIndexUnfollowProvider>
+          )}
+        </FollowerIndexResumeProvider>
+      )}
+    </FollowerIndexPauseProvider>
+  );
+};

x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_pause_provider.js → x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_actions_providers/follower_index_pause_provider.js

@@ -11,9 +11,9 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiConfirmModal, EuiOverlayMask } from '@elastic/eui';
 
-import { pauseFollowerIndex } from '../store/actions';
-import { arrify } from '../../../common/services/utils';
-import { areAllSettingsDefault } from '../services/follower_index_default_settings';
+import { pauseFollowerIndex } from '../../store/actions';
+import { arrify } from '../../../../common/services/utils';
+import { areAllSettingsDefault } from '../../services/follower_index_default_settings';
 
 class FollowerIndexPauseProviderUi extends PureComponent {
   static propTypes = {

x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_resume_provider.js → x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_actions_providers/follower_index_resume_provider.js

@@ -10,10 +10,10 @@ import { connect } from 'react-redux';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiConfirmModal, EuiLink, EuiOverlayMask } from '@elastic/eui';
-import { reactRouterNavigate } from '../../../../../../src/plugins/kibana_react/public';
-import { routing } from '../services/routing';
-import { resumeFollowerIndex } from '../store/actions';
-import { arrify } from '../../../common/services/utils';
+import { reactRouterNavigate } from '../../../../../../../src/plugins/kibana_react/public';
+import { routing } from '../../services/routing';
+import { resumeFollowerIndex } from '../../store/actions';
+import { arrify } from '../../../../common/services/utils';
 
 class FollowerIndexResumeProviderUi extends PureComponent {
   static propTypes = {

x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_unfollow_provider.js → x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_actions_providers/follower_index_unfollow_provider.js

@@ -11,8 +11,8 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiConfirmModal, EuiOverlayMask } from '@elastic/eui';
 
-import { unfollowLeaderIndex } from '../store/actions';
-import { arrify } from '../../../common/services/utils';
+import { unfollowLeaderIndex } from '../../store/actions';
+import { arrify } from '../../../../common/services/utils';
 
 class FollowerIndexUnfollowProviderUi extends PureComponent {
   static propTypes = {

x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_actions_providers/index.js

@@ -0,0 +1,10 @@
+/*
+ * 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 { FollowerIndexActionsProvider } from './follower_index_actions_provider';
+export { FollowerIndexPauseProvider } from './follower_index_pause_provider';
+export { FollowerIndexResumeProvider } from './follower_index_resume_provider';
+export { FollowerIndexUnfollowProvider } from './follower_index_unfollow_provider';

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

@@ -12,9 +12,10 @@ export { AutoFollowPatternForm } from './auto_follow_pattern_form';
 export { AutoFollowPatternDeleteProvider } from './auto_follow_pattern_delete_provider';
 export { AutoFollowPatternPageTitle } from './auto_follow_pattern_page_title';
 export { AutoFollowPatternIndicesPreview } from './auto_follow_pattern_indices_preview';
-export { FollowerIndexPauseProvider } from './follower_index_pause_provider';
-export { FollowerIndexResumeProvider } from './follower_index_resume_provider';
-export { FollowerIndexUnfollowProvider } from './follower_index_unfollow_provider';
+export { FollowerIndexPauseProvider } from './follower_index_actions_providers';
+export { FollowerIndexResumeProvider } from './follower_index_actions_providers';
+export { FollowerIndexUnfollowProvider } from './follower_index_actions_providers';
+export { FollowerIndexActionsProvider } from './follower_index_actions_providers';
 export { FollowerIndexForm } from './follower_index_form';
 export { FollowerIndexPageTitle } from './follower_index_page_title';
 export { FormEntryRow } from './form_entry_row';

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

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { PureComponent, Fragment } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { i18n } from '@kbn/i18n';
 import {
@@ -13,7 +13,6 @@ import {
   EuiLoadingKibana,
   EuiOverlayMask,
   EuiHealth,
-  EuiIcon,
 } from '@elastic/eui';
 import { API_STATUS, UIM_AUTO_FOLLOW_PATTERN_SHOW_DETAILS_CLICK } from '../../../../../constants';
 import {
@@ -23,6 +22,33 @@ import {
 import { routing } from '../../../../../services/routing';
 import { trackUiMetric } from '../../../../../services/track_ui_metric';
 
+const actionI18nTexts = {
+  pause: i18n.translate(
+    'xpack.crossClusterReplication.autoFollowPatternList.table.actionPauseDescription',
+    {
+      defaultMessage: 'Pause replication',
+    }
+  ),
+  resume: i18n.translate(
+    'xpack.crossClusterReplication.autoFollowPatternList.table.actionResumeDescription',
+    {
+      defaultMessage: 'Resume replication',
+    }
+  ),
+  edit: i18n.translate(
+    'xpack.crossClusterReplication.autoFollowPatternList.table.actionEditDescription',
+    {
+      defaultMessage: 'Edit auto-follow pattern',
+    }
+  ),
+  delete: i18n.translate(
+    'xpack.crossClusterReplication.autoFollowPatternList.table.actionDeleteDescription',
+    {
+      defaultMessage: 'Delete auto-follow pattern',
+    }
+  ),
+};
+
 const getFilteredPatterns = (autoFollowPatterns, queryText) => {
   if (queryText) {
     const normalizedSearchText = queryText.toLowerCase();
@@ -93,7 +119,7 @@ export class AutoFollowPatternTable extends PureComponent {
     });
   };
 
-  getTableColumns() {
+  getTableColumns(deleteAutoFollowPattern) {
     const { selectAutoFollowPattern } = this.props;
 
     return [
@@ -200,88 +226,34 @@ export class AutoFollowPatternTable extends PureComponent {
         ),
         actions: [
           {
-            render: ({ name, active }) => {
-              const label = active
-                ? i18n.translate(
-                    'xpack.crossClusterReplication.autoFollowPatternList.table.actionPauseDescription',
-                    {
-                      defaultMessage: 'Pause replication',
-                    }
-                  )
-                : i18n.translate(
-                    'xpack.crossClusterReplication.autoFollowPatternList.table.actionResumeDescription',
-                    {
-                      defaultMessage: 'Resume replication',
-                    }
-                  );
-
-              return (
-                <span
-                  onClick={(event) => {
-                    if (event.stopPropagation) {
-                      event.stopPropagation();
-                    }
-                    if (active) {
-                      this.props.pauseAutoFollowPattern(name);
-                    } else {
-                      this.props.resumeAutoFollowPattern(name);
-                    }
-                  }}
-                  data-test-subj={active ? 'contextMenuPauseButton' : 'contextMenuResumeButton'}
-                >
-                  <EuiIcon
-                    aria-label={label}
-                    type={active ? 'pause' : 'play'}
-                    className="euiContextMenu__icon"
-                  />
-                  <span>{label}</span>
-                </span>
-              );
-            },
+            name: actionI18nTexts.pause,
+            description: actionI18nTexts.pause,
+            icon: 'pause',
+            onClick: (item) => this.props.pauseAutoFollowPattern(item.name),
+            available: (item) => item.active,
+            'data-test-subj': 'contextMenuPauseButton',
           },
           {
-            render: ({ name }) => {
-              const label = i18n.translate(
-                'xpack.crossClusterReplication.autoFollowPatternList.table.actionEditDescription',
-                {
-                  defaultMessage: 'Edit auto-follow pattern',
-                }
-              );
-
-              return (
-                <span
-                  onClick={() => routing.navigate(routing.getAutoFollowPatternPath(name))}
-                  data-test-subj="contextMenuEditButton"
-                >
-                  <EuiIcon aria-label={label} type="pencil" className="euiContextMenu__icon" />
-                  <span>{label}</span>
-                </span>
-              );
-            },
+            name: actionI18nTexts.resume,
+            description: actionI18nTexts.resume,
+            icon: 'play',
+            onClick: (item) => this.props.resumeAutoFollowPattern(item.name),
+            available: (item) => !item.active,
+            'data-test-subj': 'contextMenuResumeButton',
           },
           {
-            render: ({ name }) => {
-              const label = i18n.translate(
-                'xpack.crossClusterReplication.autoFollowPatternList.table.actionDeleteDescription',
-                {
-                  defaultMessage: 'Delete auto-follow pattern',
-                }
-              );
-
-              return (
-                <AutoFollowPatternDeleteProvider>
-                  {(deleteAutoFollowPattern) => (
-                    <span
-                      onClick={() => deleteAutoFollowPattern(name)}
-                      data-test-subj="contextMenuDeleteButton"
-                    >
-                      <EuiIcon aria-label={label} type="trash" className="euiContextMenu__icon" />
-                      <span>{label}</span>
-                    </span>
-                  )}
-                </AutoFollowPatternDeleteProvider>
-              );
-            },
+            name: actionI18nTexts.edit,
+            description: actionI18nTexts.edit,
+            icon: 'pencil',
+            onClick: (item) => routing.navigate(routing.getAutoFollowPatternPath(item.name)),
+            'data-test-subj': 'contextMenuEditButton',
+          },
+          {
+            name: actionI18nTexts.delete,
+            description: actionI18nTexts.delete,
+            icon: 'trash',
+            onClick: (item) => deleteAutoFollowPattern(item.name),
+            'data-test-subj': 'contextMenuDeleteButton',
           },
         ],
         width: '100px',
@@ -339,26 +311,30 @@ export class AutoFollowPatternTable extends PureComponent {
     };
 
     return (
-      <Fragment>
-        <EuiInMemoryTable
-          items={filteredAutoFollowPatterns}
-          itemId="name"
-          columns={this.getTableColumns()}
-          search={search}
-          pagination={pagination}
-          sorting={sorting}
-          selection={selection}
-          isSelectable={true}
-          rowProps={() => ({
-            'data-test-subj': 'row',
-          })}
-          cellProps={(item, column) => ({
-            'data-test-subj': `cell_${column.field}`,
-          })}
-          data-test-subj="autoFollowPatternListTable"
-        />
-        {this.renderLoading()}
-      </Fragment>
+      <AutoFollowPatternDeleteProvider>
+        {(deleteAutoFollowPattern) => (
+          <>
+            <EuiInMemoryTable
+              items={filteredAutoFollowPatterns}
+              itemId="name"
+              columns={this.getTableColumns(deleteAutoFollowPattern)}
+              search={search}
+              pagination={pagination}
+              sorting={sorting}
+              selection={selection}
+              isSelectable={true}
+              rowProps={() => ({
+                'data-test-subj': 'row',
+              })}
+              cellProps={(item, column) => ({
+                'data-test-subj': `cell_${column.field}`,
+              })}
+              data-test-subj="autoFollowPatternListTable"
+            />
+            {this.renderLoading()}
+          </>
+        )}
+      </AutoFollowPatternDeleteProvider>
     );
   }
 }