mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
# Backport This will backport the following commits from `main` to `8.17`: - [Fix notify_badge.tsx toggle not working (#208996)](https://github.com/elastic/kibana/pull/208996) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Eamonn-OL","email":"119305140+Eamonn-OL@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-02-14T09:56:43Z","message":"Fix notify_badge.tsx toggle not working (#208996)\n\n## Summary\n\nAt the moment, when you click on the notify badge in the \"rules\" page,\nthen click it again (expecting a toggle) it actually gets stuck on the\npage and only a refresh can fix it.\n\nThis change adds a toggle and implements it in place of the\n\"openPopover\" to correctly toggle the state of the popover.\n\n### Checklist\n\n- [x] The PR description includes the appropriate Release Notes section,\nand the correct `release_note:*` label is applied per the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n\n\n\n## Release Notes\n\nFixes an issue where the popover in the rules page may get stuck when\nbeing clicked more than once.\n\nBefore:\n\n\nd1ef9abc-e0ee-44cb-ae75-0219047c4a67\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>","sha":"995b851148fab19b0922f298a7c8b3607f00de9e","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","Team:ResponseOps","v9.0.0","Feature:Alerting/RulesManagement","backport:prev-major","v8.18.0","v9.1.0","v8.19.0","v8.17.3","v8.16.5"],"title":"Fix notify_badge.tsx toggle not working","number":208996,"url":"https://github.com/elastic/kibana/pull/208996","mergeCommit":{"message":"Fix notify_badge.tsx toggle not working (#208996)\n\n## Summary\n\nAt the moment, when you click on the notify badge in the \"rules\" page,\nthen click it again (expecting a toggle) it actually gets stuck on the\npage and only a refresh can fix it.\n\nThis change adds a toggle and implements it in place of the\n\"openPopover\" to correctly toggle the state of the popover.\n\n### Checklist\n\n- [x] The PR description includes the appropriate Release Notes section,\nand the correct `release_note:*` label is applied per the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n\n\n\n## Release Notes\n\nFixes an issue where the popover in the rules page may get stuck when\nbeing clicked more than once.\n\nBefore:\n\n\nd1ef9abc-e0ee-44cb-ae75-0219047c4a67\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>","sha":"995b851148fab19b0922f298a7c8b3607f00de9e"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.x","8.17","8.16"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/208996","number":208996,"mergeCommit":{"message":"Fix notify_badge.tsx toggle not working (#208996)\n\n## Summary\n\nAt the moment, when you click on the notify badge in the \"rules\" page,\nthen click it again (expecting a toggle) it actually gets stuck on the\npage and only a refresh can fix it.\n\nThis change adds a toggle and implements it in place of the\n\"openPopover\" to correctly toggle the state of the popover.\n\n### Checklist\n\n- [x] The PR description includes the appropriate Release Notes section,\nand the correct `release_note:*` label is applied per the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n\n\n\n## Release Notes\n\nFixes an issue where the popover in the rules page may get stuck when\nbeing clicked more than once.\n\nBefore:\n\n\nd1ef9abc-e0ee-44cb-ae75-0219047c4a67\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>","sha":"995b851148fab19b0922f298a7c8b3607f00de9e"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.17","label":"v8.17.3","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.16","label":"v8.16.5","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Eamonn-OL <119305140+Eamonn-OL@users.noreply.github.com>
This commit is contained in:
Kibana Machine
GitHub
parent
3367949254
commit
3ac78a46ea
1 changed files with 20 additions and 10 deletions
|
|
@ -78,8 +78,18 @@ export const RulesListNotifyBadge: React.FunctionComponent<RulesListNotifyBadgeP
|
|||
const isLoading = loading || requestInFlight;
|
||||
const isDisabled = Boolean(disabled) || !snoozeSettings;
|
||||
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
|
||||
const openPopover = useCallback(() => setIsPopoverOpen(true), [setIsPopoverOpen]);
|
||||
const closePopover = useCallback(() => setIsPopoverOpen(false), [setIsPopoverOpen]);
|
||||
const togglePopover = useCallback(() => {
|
||||
setIsPopoverOpen((prev) => {
|
||||
const newState = !prev;
|
||||
if (!newState) focusTrapButtonRef.current?.blur();
|
||||
return newState;
|
||||
});
|
||||
}, []);
|
||||
// const openPopover = useCallback(() => setIsPopoverOpen(true), [setIsPopoverOpen]);
|
||||
const closePopover = useCallback(() => {
|
||||
setIsPopoverOpen(false);
|
||||
focusTrapButtonRef.current?.blur();
|
||||
}, [setIsPopoverOpen]);
|
||||
const isSnoozedUntil = snoozeSettings?.isSnoozedUntil;
|
||||
const muteAll = snoozeSettings?.muteAll ?? false;
|
||||
const isSnoozedIndefinitely = muteAll;
|
||||
|
|
@ -209,13 +219,13 @@ export const RulesListNotifyBadge: React.FunctionComponent<RulesListNotifyBadgeP
|
|||
minWidth={85}
|
||||
iconType="bellSlash"
|
||||
color="accent"
|
||||
onClick={openPopover}
|
||||
onClick={togglePopover}
|
||||
buttonRef={focusTrapButtonRef}
|
||||
>
|
||||
<EuiText size="xs">{formattedSnoozeText}</EuiText>
|
||||
</EuiButton>
|
||||
);
|
||||
}, [isLoading, isDisabled, snoozeButtonAriaLabel, openPopover, formattedSnoozeText]);
|
||||
}, [isLoading, isDisabled, snoozeButtonAriaLabel, togglePopover, formattedSnoozeText]);
|
||||
|
||||
const scheduledSnoozeButton = useMemo(() => {
|
||||
return (
|
||||
|
|
@ -228,13 +238,13 @@ export const RulesListNotifyBadge: React.FunctionComponent<RulesListNotifyBadgeP
|
|||
iconType="calendar"
|
||||
color="text"
|
||||
aria-label={snoozeButtonAriaLabel}
|
||||
onClick={openPopover}
|
||||
onClick={togglePopover}
|
||||
buttonRef={focusTrapButtonRef}
|
||||
>
|
||||
<EuiText size="xs">{formattedSnoozeText}</EuiText>
|
||||
</EuiButton>
|
||||
);
|
||||
}, [isLoading, isDisabled, snoozeButtonAriaLabel, openPopover, formattedSnoozeText]);
|
||||
}, [isLoading, isDisabled, snoozeButtonAriaLabel, togglePopover, formattedSnoozeText]);
|
||||
|
||||
const unsnoozedButton = useMemo(() => {
|
||||
// This show on hover is needed because we need style sheets to achieve the
|
||||
|
|
@ -251,11 +261,11 @@ export const RulesListNotifyBadge: React.FunctionComponent<RulesListNotifyBadgeP
|
|||
aria-label={snoozeButtonAriaLabel}
|
||||
className={isPopoverOpen || isLoading ? '' : showOnHoverClass}
|
||||
iconType="bell"
|
||||
onClick={openPopover}
|
||||
onClick={togglePopover}
|
||||
buttonRef={focusTrapButtonRef}
|
||||
/>
|
||||
);
|
||||
}, [showOnHover, isLoading, isDisabled, snoozeButtonAriaLabel, isPopoverOpen, openPopover]);
|
||||
}, [showOnHover, isLoading, isDisabled, snoozeButtonAriaLabel, isPopoverOpen, togglePopover]);
|
||||
|
||||
const onApplyUnsnooze = useCallback(
|
||||
async (scheduleIds?: string[]) => {
|
||||
|
|
@ -286,11 +296,11 @@ export const RulesListNotifyBadge: React.FunctionComponent<RulesListNotifyBadgeP
|
|||
aria-label={snoozeButtonAriaLabel}
|
||||
iconType="bellSlash"
|
||||
color="accent"
|
||||
onClick={openPopover}
|
||||
onClick={togglePopover}
|
||||
buttonRef={focusTrapButtonRef}
|
||||
/>
|
||||
);
|
||||
}, [isLoading, isDisabled, snoozeButtonAriaLabel, openPopover]);
|
||||
}, [isLoading, isDisabled, snoozeButtonAriaLabel, togglePopover]);
|
||||
|
||||
const button = useMemo(() => {
|
||||
if (!isSnoozeValid) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue