github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

Fix notify_badge.tsx toggle not working (#208996)

Browse source 
## Summary

At the moment, when you click on the notify badge in the "rules" page,
then click it again (expecting a toggle) it actually gets stuck on the
page and only a refresh can fix it.

This change adds a toggle and implements it in place of the
"openPopover" to correctly toggle the state of the popover.

### Checklist

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)



## Release Notes

Fixes an issue where the popover in the rules page may get stuck when
being clicked more than once.

Before:


https://github.com/user-attachments/assets/2f092d63-ab69-41df-9047-1ba11481ea15

After:


https://github.com/user-attachments/assets/d1ef9abc-e0ee-44cb-ae75-0219047c4a67

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Eamonn-OL 2025-02-14 09:56:43 +00:00 • committed by GitHub
parent ddd0fdb479
commit 995b851148
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 20 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

30
x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/notify_badge/notify_badge.tsx
View file

@ -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) {