[Fix] Multiple EuiNotificationEvent generated IDs

cee-chen · cee-chen · commit ba36deca0f17 · 2021-09-16T13:35:42.000-07:00
diff --git a/src/components/notification/notification_event.tsx b/src/components/notification/notification_event.tsx
@@ -23,7 +23,7 @@ import {
 import { EuiButtonEmpty, EuiButtonEmptyProps } from '../button';
 import { EuiLink } from '../link';
 import { EuiContextMenuItem, EuiContextMenuItemProps } from '../context_menu';
-import { htmlIdGenerator } from '../../services';
+import { useGeneratedHtmlId } from '../../services';
 import { EuiNotificationEventReadIcon } from './notification_event_read_icon';
 
 export type EuiNotificationHeadingLevel = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
@@ -113,7 +113,7 @@ export const EuiNotificationEvent: FunctionComponent<EuiNotificationEventProps>
     'euiNotificationEvent__title--isRead': isRead,
   });
 
-  const randomHeadingId = htmlIdGenerator()();
+  const randomHeadingId = useGeneratedHtmlId();
 
   const titleProps = {
     id: randomHeadingId,
diff --git a/src/components/notification/notification_event_messages.tsx b/src/components/notification/notification_event_messages.tsx
@@ -8,7 +8,7 @@
 
 import React, { FunctionComponent, useState } from 'react';
 import { EuiAccordion } from '../accordion';
-import { htmlIdGenerator } from '../../services';
+import { useGeneratedHtmlId } from '../../services';
 import { useEuiI18n } from '../i18n';
 import { EuiText } from '../text';
 
@@ -30,6 +30,10 @@ export const EuiNotificationEventMessages: FunctionComponent<EuiNotificationEven
   const [isOpen, setIsOpen] = useState(false);
   const messagesLength = messages.length;
 
+  const accordionId = useGeneratedHtmlId({
+    prefix: 'euiNotificationEventMessagesAccordion',
+  });
+
   const accordionButtonText = useEuiI18n(
     'euiNotificationEventMessages.accordionButtonText',
     '+ {messagesLength} more',
@@ -69,7 +73,7 @@ export const EuiNotificationEventMessages: FunctionComponent<EuiNotificationEven
           <EuiAccordion
             onToggle={setIsOpen}
             buttonProps={{ 'aria-label': accordionAriaLabelButtonText }}
-            id={htmlIdGenerator('euiNotificationEventMessagesAccordion')()}
+            id={accordionId}
             className="euiNotificationEventMessages__accordion"
             buttonContent={buttonContentText}
             buttonClassName="euiNotificationEventMessages__accordionButton"
diff --git a/src/components/notification/notification_event_meta.tsx b/src/components/notification/notification_event_meta.tsx
@@ -23,7 +23,7 @@ import {
   EuiContextMenuPanel,
 } from '../context_menu';
 import { EuiI18n } from '../i18n';
-import { htmlIdGenerator } from '../../services';
+import { useGeneratedHtmlId } from '../../services';
 
 export type EuiNotificationEventMetaProps = {
   id: string;
@@ -85,7 +85,7 @@ export const EuiNotificationEventMeta: FunctionComponent<EuiNotificationEventMet
     ReturnType<NonNullable<typeof onOpenContextMenu>>
   >([]);
 
-  const randomPopoverId = htmlIdGenerator()();
+  const randomPopoverId = useGeneratedHtmlId();
 
   const ariaAttribute = iconAriaLabel
     ? { 'aria-label': iconAriaLabel }
