[CCR] Fix row actions in follower index and auto-follow pattern tables (#84433)

* Fixed auto follow actions

* Created a provider for all follower index table actions to fix modal auto-closing

* Moved i18n texts into a const to avoid duplication

* Removed unnecessary imports and added index.js file for follower_index_actions_provider imports

* Fixed wrong imports deletion

* Fixed wrong imports deletion

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

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_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_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_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>
     );
   }
 }

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

@@ -4,12 +4,11 @@
  * 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 { FormattedMessage } from '@kbn/i18n/react';
 import {
-  EuiIcon,
   EuiHealth,
   EuiInMemoryTable,
   EuiLink,
@@ -17,15 +16,38 @@ import {
   EuiOverlayMask,
 } from '@elastic/eui';
 import { API_STATUS, UIM_FOLLOWER_INDEX_SHOW_DETAILS_CLICK } from '../../../../../constants';
-import {
-  FollowerIndexPauseProvider,
-  FollowerIndexResumeProvider,
-  FollowerIndexUnfollowProvider,
-} from '../../../../../components';
+import { FollowerIndexActionsProvider } from '../../../../../components';
 import { routing } from '../../../../../services/routing';
 import { trackUiMetric } from '../../../../../services/track_ui_metric';
 import { ContextMenu } from '../context_menu';
 
+const actionI18nTexts = {
+  pause: i18n.translate(
+    'xpack.crossClusterReplication.followerIndexList.table.actionPauseDescription',
+    {
+      defaultMessage: 'Pause replication',
+    }
+  ),
+  resume: i18n.translate(
+    'xpack.crossClusterReplication.followerIndexList.table.actionResumeDescription',
+    {
+      defaultMessage: 'Resume replication',
+    }
+  ),
+  edit: i18n.translate(
+    'xpack.crossClusterReplication.followerIndexList.table.actionEditDescription',
+    {
+      defaultMessage: 'Edit follower index',
+    }
+  ),
+  unfollow: i18n.translate(
+    'xpack.crossClusterReplication.followerIndexList.table.actionUnfollowDescription',
+    {
+      defaultMessage: 'Unfollow leader index',
+    }
+  ),
+};
+
 const getFilteredIndices = (followerIndices, queryText) => {
   if (queryText) {
     const normalizedSearchText = queryText.toLowerCase();
@@ -101,91 +123,43 @@ export class FollowerIndicesTable extends PureComponent {
     routing.navigate(uri);
   };
 
-  getTableColumns() {
+  getTableColumns(actionHandlers) {
     const { selectFollowerIndex } = this.props;
 
     const actions = [
-      /* Pause or resume follower index */
+      /* Pause follower index */
       {
-        render: (followerIndex) => {
-          const { name, isPaused } = followerIndex;
-          const label = isPaused
-            ? i18n.translate(
-                'xpack.crossClusterReplication.followerIndexList.table.actionResumeDescription',
-                {
-                  defaultMessage: 'Resume replication',
-                }
-              )
-            : i18n.translate(
-                'xpack.crossClusterReplication.followerIndexList.table.actionPauseDescription',
-                {
-                  defaultMessage: 'Pause replication',
-                }
-              );
-
-          return isPaused ? (
-            <FollowerIndexResumeProvider>
-              {(resumeFollowerIndex) => (
-                <span onClick={() => resumeFollowerIndex(name)} data-test-subj="resumeButton">
-                  <EuiIcon aria-label={label} type="play" className="euiContextMenu__icon" />
-                  <span>{label}</span>
-                </span>
-              )}
-            </FollowerIndexResumeProvider>
-          ) : (
-            <FollowerIndexPauseProvider>
-              {(pauseFollowerIndex) => (
-                <span
-                  onClick={() => pauseFollowerIndex(followerIndex)}
-                  data-test-subj="pauseButton"
-                >
-                  <EuiIcon aria-label={label} type="pause" className="euiContextMenu__icon" />
-                  <span>{label}</span>
-                </span>
-              )}
-            </FollowerIndexPauseProvider>
-          );
-        },
+        name: actionI18nTexts.pause,
+        description: actionI18nTexts.pause,
+        icon: 'pause',
+        onClick: (item) => actionHandlers.pauseFollowerIndex(item),
+        available: (item) => !item.isPaused,
+        'data-test-subj': 'pauseButton',
+      },
+      /* Resume follower index */
+      {
+        name: actionI18nTexts.resume,
+        description: actionI18nTexts.resume,
+        icon: 'play',
+        onClick: (item) => actionHandlers.resumeFollowerIndex(item.name),
+        available: (item) => item.isPaused,
+        'data-test-subj': 'resumeButton',
       },
       /* Edit follower index */
       {
-        render: ({ name }) => {
-          const label = i18n.translate(
-            'xpack.crossClusterReplication.followerIndexList.table.actionEditDescription',
-            {
-              defaultMessage: 'Edit follower index',
-            }
-          );
-
-          return (
-            <span onClick={() => this.editFollowerIndex(name)} data-test-subj="editButton">
-              <EuiIcon aria-label={label} type="pencil" className="euiContextMenu__icon" />
-              <span>{label}</span>
-            </span>
-          );
-        },
+        name: actionI18nTexts.edit,
+        description: actionI18nTexts.edit,
+        onClick: (item) => this.editFollowerIndex(item.name),
+        icon: 'pencil',
+        'data-test-subj': 'editButton',
       },
       /* Unfollow leader index */
       {
-        render: ({ name }) => {
-          const label = i18n.translate(
-            'xpack.crossClusterReplication.followerIndexList.table.actionUnfollowDescription',
-            {
-              defaultMessage: 'Unfollow leader index',
-            }
-          );
-
-          return (
-            <FollowerIndexUnfollowProvider>
-              {(unfollowLeaderIndex) => (
-                <span onClick={() => unfollowLeaderIndex(name)} data-test-subj="unfollowButton">
-                  <EuiIcon aria-label={label} type="indexFlush" className="euiContextMenu__icon" />
-                  <span>{label}</span>
-                </span>
-              )}
-            </FollowerIndexUnfollowProvider>
-          );
-        },
+        name: actionI18nTexts.unfollow,
+        description: actionI18nTexts.unfollow,
+        onClick: (item) => actionHandlers.unfollowLeaderIndex(item.name),
+        icon: 'indexFlush',
+        'data-test-subj': 'unfollowButton',
       },
     ];
 
@@ -321,26 +295,33 @@ export class FollowerIndicesTable extends PureComponent {
     };
 
     return (
-      <Fragment>
-        <EuiInMemoryTable
-          items={filteredIndices}
-          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="followerIndexListTable"
-        />
-        {this.renderLoading()}
-      </Fragment>
+      <FollowerIndexActionsProvider>
+        {(getActionHandlers) => {
+          const actionHandlers = getActionHandlers();
+          return (
+            <>
+              <EuiInMemoryTable
+                items={filteredIndices}
+                itemId="name"
+                columns={this.getTableColumns(actionHandlers)}
+                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="followerIndexListTable"
+              />
+              {this.renderLoading()}
+            </>
+          );
+        }}
+      </FollowerIndexActionsProvider>
     );
   }
 }