♻️ rewrite <HeaderActionMenu> in typescript

packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.test.tsx

@@ -41,7 +41,7 @@ describe('<ComponentContextMenu />', () => {
       'aria-disabled',
       'true',
     );
-    fireEvent.click(rendered.queryByText('Some label'));
+    fireEvent.click(rendered.queryByText('Some label') as Node);
     expect(onClickFunction).toHaveBeenCalled();
     // We do not expect the dropdown to disappear after click
     expect(rendered.queryByText('Some label')).toBeInTheDocument();
@@ -84,7 +84,7 @@ describe('<ComponentContextMenu />', () => {
     expect(onClickFunction).not.toHaveBeenCalled();
     fireEvent.click(rendered.getByTestId('header-action-menu'));
     expect(onClickFunction).not.toHaveBeenCalled();
-    fireEvent.click(rendered.queryByText('Secondary label'));
+    fireEvent.click(rendered.queryByText('Secondary label') as Node);
     expect(onClickFunction).toHaveBeenCalled();
     // We do not expect the dropdown to disappear after click
     expect(rendered.queryByText('Some label')).toBeInTheDocument();

packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { Fragment } from 'react';
+import React, { Fragment, ReactElement, FC, ComponentType } from 'react';
 import {
   IconButton,
   List,
@@ -22,10 +22,20 @@ import {
   ListItemIcon,
   ListItemText,
   Popover,
+  ListItemTextProps,
 } from '@material-ui/core';
 import { default as KebabMenuIcon } from './MenuVertical';
 
-const ActionItem = ({
+type ActionItemProps = {
+  label?: ListItemTextProps['primary'];
+  secondaryLabel?: ListItemTextProps['secondary'];
+  icon?: ReactElement;
+  disabled?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+  WrapperComponent?: ComponentType;
+};
+
+const ActionItem: FC<ActionItemProps> = ({
   label,
   secondaryLabel,
   icon,
@@ -52,7 +62,11 @@ const ActionItem = ({
   );
 };
 
-const HeaderActionMenu = ({ actionItems }) => {
+export type HeaderActionMenuProps = {
+  actionItems: ActionItemProps[];
+};
+
+const HeaderActionMenu: FC<HeaderActionMenuProps> = ({ actionItems }) => {
   const [open, setOpen] = React.useState(false);
   const anchorElRef = React.useRef(null);
 
@@ -80,8 +94,10 @@ const HeaderActionMenu = ({ actionItems }) => {
         onClose={() => setOpen(false)}
       >
         <List>
-          {actionItems.map(actionItem => {
-            return <ActionItem key={actionItem.label} {...actionItem} />;
+          {actionItems.map((actionItem, i) => {
+            return (
+              <ActionItem key={`header-action-menu-${i}`} {...actionItem} />
+            );
           })}
         </List>
       </Popover>