-
Notifications
You must be signed in to change notification settings - Fork 8.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[CCR] Refactor redux for Auto-follow pattern detail panel #27491
Changes from 2 commits
43db32e
a7e764a
d173c56
f5df213
ae7947e
e33a410
591a536
0c4af91
dd4fcbb
3d0f446
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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> | ||
); | ||
|
@@ -152,7 +152,7 @@ export const AutoFollowPatternTable = injectI18n( | |
}), | ||
icon: 'pencil', | ||
onClick: ({ name }) => { | ||
editAutoFollowPattern(name); | ||
selectAutoFollowPattern(name); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why do we need to select the auto-follow pattern here? I just tried removing this line and the editing functionality seemed to work fine. On a separate note, I think we may want to implement this the way we did in Remote Clusters, so that this is a link with an There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It works because, when there is no selection the edit component looks at the route param and fetches from the server (which is what happens on a page refresh). I'll change it to an |
||
routing.navigate(encodeURI(`/auto_follow_patterns/edit/${encodeURIComponent(name)}`)); | ||
}, | ||
type: 'icon', | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -7,43 +7,22 @@ | |
import { connect } from 'react-redux'; | ||
import { DetailPanel as DetailPanelView } from './detail_panel'; | ||
|
||
import { | ||
getDetailPanelAutoFollowPattern, | ||
getDetailPanelAutoFollowPatternName, | ||
getApiStatus, | ||
isAutoFollowPatternDetailPanelOpen as isDetailPanelOpen, | ||
} from '../../../../../store/selectors'; | ||
|
||
import { | ||
closeAutoFollowPatternDetailPanel as closeDetailPanel, | ||
editAutoFollowPattern, | ||
} from '../../../../../store/actions'; | ||
|
||
import { | ||
SECTIONS | ||
} from '../../../../../constants'; | ||
import { getSelectedAutoFollowPattern, getApiStatus, } from '../../../../../store/selectors'; | ||
import { selectAutoFollowPattern } from '../../../../../store/actions'; | ||
import { SECTIONS } from '../../../../../constants'; | ||
|
||
const scope = SECTIONS.AUTO_FOLLOW_PATTERN; | ||
|
||
const mapStateToProps = (state) => { | ||
return { | ||
isDetailPanelOpen: isDetailPanelOpen(state), | ||
autoFollowPattern: getDetailPanelAutoFollowPattern(state), | ||
autoFollowPatternName: getDetailPanelAutoFollowPatternName(state), | ||
apiStatus: getApiStatus(scope)(state), | ||
}; | ||
}; | ||
const mapStateToProps = (state) => ({ | ||
autoFollowPattern: getSelectedAutoFollowPattern(state), | ||
apiStatus: getApiStatus(scope)(state), | ||
}); | ||
|
||
const mapDispatchToProps = (dispatch) => { | ||
return { | ||
closeDetailPanel: () => { | ||
dispatch(closeDetailPanel()); | ||
}, | ||
editAutoFollowPattern: (name) => { | ||
dispatch(editAutoFollowPattern(name)); | ||
} | ||
}; | ||
}; | ||
const mapDispatchToProps = (dispatch) => ({ | ||
// The actual closing of the panel is done in the <AutoFollowPatternList /> | ||
// component as it listens to the URL query change | ||
closeDetailPanel: () => dispatch(selectAutoFollowPattern(null)), | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The logic might be a little easier to follow if the owner ( There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Great point |
||
}); | ||
|
||
export const DetailPanel = connect( | ||
mapStateToProps, | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -41,12 +41,9 @@ import routing from '../../../../../services/routing'; | |
|
||
export class DetailPanelUi extends Component { | ||
static propTypes = { | ||
isDetailPanelOpen: PropTypes.bool.isRequired, | ||
apiStatus: PropTypes.string, | ||
autoFollowPattern: PropTypes.object, | ||
autoFollowPatternName: PropTypes.string, | ||
closeDetailPanel: PropTypes.func.isRequired, | ||
editAutoFollowPattern: PropTypes.func.isRequired, | ||
} | ||
|
||
renderAutoFollowPattern() { | ||
|
@@ -251,16 +248,16 @@ export class DetailPanelUi extends Component { | |
|
||
renderFooter() { | ||
const { | ||
editAutoFollowPattern, | ||
autoFollowPattern, | ||
autoFollowPatternName, | ||
closeDetailPanel, | ||
} = this.props; | ||
|
||
if (!autoFollowPattern) { | ||
return null; | ||
} | ||
|
||
const { name: autoFollowPatternName } = autoFollowPattern; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Good catch |
||
|
||
return ( | ||
<EuiFlyoutFooter> | ||
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center"> | ||
|
@@ -300,7 +297,6 @@ export class DetailPanelUi extends Component { | |
fill | ||
color="primary" | ||
onClick={() => { | ||
editAutoFollowPattern(autoFollowPatternName); | ||
routing.navigate(encodeURI(`/auto_follow_patterns/edit/${encodeURIComponent(autoFollowPatternName)}`)); | ||
}} | ||
> | ||
|
@@ -318,15 +314,7 @@ export class DetailPanelUi extends Component { | |
} | ||
|
||
render() { | ||
const { | ||
isDetailPanelOpen, | ||
closeDetailPanel, | ||
autoFollowPatternName, | ||
} = this.props; | ||
|
||
if (!isDetailPanelOpen) { | ||
return null; | ||
} | ||
const { autoFollowPattern, closeDetailPanel } = this.props; | ||
|
||
return ( | ||
<EuiFlyout | ||
|
@@ -336,14 +324,15 @@ export class DetailPanelUi extends Component { | |
size="m" | ||
maxWidth={400} | ||
> | ||
<EuiFlyoutHeader> | ||
<EuiTitle size="m" id="autoFollowPatternDetailsFlyoutTitle"> | ||
<h2>{autoFollowPatternName}</h2> | ||
</EuiTitle> | ||
</EuiFlyoutHeader> | ||
{autoFollowPattern && ( | ||
<EuiFlyoutHeader> | ||
<EuiTitle size="m" id="autoFollowPatternDetailsFlyoutTitle"> | ||
<h2>{autoFollowPattern.name}</h2> | ||
</EuiTitle> | ||
</EuiFlyoutHeader> | ||
)} | ||
|
||
{this.renderContent()} | ||
|
||
{this.renderFooter()} | ||
</EuiFlyout> | ||
); | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -13,30 +13,26 @@ import { | |
updateAutoFollowPattern as updateAutoFollowPatternRequest, | ||
deleteAutoFollowPattern as deleteAutoFollowPatternRequest, | ||
} from '../../services/api'; | ||
import { arrify } from '../../../../common/services/utils'; | ||
import routing from '../../services/routing'; | ||
import * as t from '../action_types'; | ||
import { sendApiRequest } from './api'; | ||
import { getDetailPanelAutoFollowPatternName } from '../selectors'; | ||
import { getSelectedAutoFollowPatternId } from '../selectors'; | ||
|
||
const { AUTO_FOLLOW_PATTERN: scope } = SECTIONS; | ||
|
||
export const editAutoFollowPattern = (name) => ({ | ||
type: t.AUTO_FOLLOW_PATTERN_EDIT, | ||
export const selectAutoFollowPattern = (name) => ({ | ||
type: t.AUTO_FOLLOW_PATTERN_SELECT, | ||
payload: name | ||
}); | ||
|
||
export const openAutoFollowPatternDetailPanel = (name) => { | ||
export const toggleAutoFollowPatternDetailPanel = (isOpen = true) => { | ||
return { | ||
type: t.AUTO_FOLLOW_PATTERN_DETAIL_PANEL, | ||
payload: name | ||
type: t.AUTO_FOLLOW_PATTERN_DETAIL_PANEL_TOGGLE, | ||
payload: isOpen | ||
}; | ||
}; | ||
|
||
export const closeAutoFollowPatternDetailPanel = () => ({ | ||
type: t.AUTO_FOLLOW_PATTERN_DETAIL_PANEL, | ||
payload: null | ||
}); | ||
|
||
export const loadAutoFollowPatterns = (isUpdating = false) => | ||
sendApiRequest({ | ||
label: t.AUTO_FOLLOW_PATTERN_LOAD, | ||
|
@@ -54,7 +50,7 @@ export const getAutoFollowPattern = (id) => | |
handler: async (dispatch) => ( | ||
getAutoFollowPatternRequest(id) | ||
.then((response) => { | ||
dispatch(editAutoFollowPattern(id)); | ||
dispatch(selectAutoFollowPattern(id)); | ||
return response; | ||
}) | ||
) | ||
|
@@ -135,9 +131,10 @@ export const deleteAutoFollowPattern = (id) => ( | |
} | ||
|
||
// If we've just deleted a pattern we were looking at, we need to close the panel. | ||
const detailPanelAutoFollowPatternName = getDetailPanelAutoFollowPatternName(getState()); | ||
if (detailPanelAutoFollowPatternName && response.itemsDeleted.includes(detailPanelAutoFollowPatternName)) { | ||
dispatch(closeAutoFollowPatternDetailPanel()); | ||
const ids = arrify(id); | ||
const autoFollowPatternId = getSelectedAutoFollowPatternId(getState()); | ||
if (ids.some(_id => autoFollowPatternId === _id)) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The original code anticipated that the deletion request could fail for the selected auto-follow pattern. It looks like the new code doesn't anticipate that case and will close the detail panel regardless of the request failing or succeeding. Is this correct? If so, then I think the first case makes more sense from the user's perspective. What do you think? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is inside the |
||
dispatch(selectAutoFollowPattern(null)); | ||
} | ||
} | ||
}) | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Minor nit, but I think we should use the present tense in all booleans for consistency, unless the tense has some clear significance.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok! Was not sure if it was a mistake. So you prefer
isClose
toisClosed
for example? I am not native but it sounds weird to me 😊There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
English is such a terrible language... "closed" is both the present and past tense, so complementary states would be
isClosed
andisOpen
.