Skip to content

Commit

Permalink
[CCR] Fix row actions in follower index and auto-follow pattern tables (
Browse files Browse the repository at this point in the history
elastic#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>
  • Loading branch information
yuliacech and kibanamachine committed Dec 1, 2020
1 parent 1fd2533 commit c84315a
Show file tree
Hide file tree
Showing 8 changed files with 217 additions and 215 deletions.
Original file line number Diff line number Diff line change
@@ -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>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -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();
Expand Down Expand Up @@ -93,7 +119,7 @@ export class AutoFollowPatternTable extends PureComponent {
});
};

getTableColumns() {
getTableColumns(deleteAutoFollowPattern) {
const { selectAutoFollowPattern } = this.props;

return [
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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>
);
}
}
Loading

0 comments on commit c84315a

Please sign in to comment.