From fc20b4dc76b9b9d268e93417a641a9c53b44b781 Mon Sep 17 00:00:00 2001
From: Guillaume Lamanda <guillaume.lamanda@zenika.com>
Date: Tue, 31 Mar 2020 11:12:56 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20rewrite=20<HeaderActionMen?=
 =?UTF-8?q?u>=20in=20typescript?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...Menu.test.js => HeaderActionMenu.test.tsx} |  4 +--
 ...aderActionMenu.js => HeaderActionMenu.tsx} | 26 +++++++++++++++----
 2 files changed, 23 insertions(+), 7 deletions(-)
 rename packages/core/src/layout/HeaderActionMenu/{HeaderActionMenu.test.js => HeaderActionMenu.test.tsx} (96%)
 rename packages/core/src/layout/HeaderActionMenu/{HeaderActionMenu.js => HeaderActionMenu.tsx} (75%)

diff --git a/packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.test.js b/packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.test.tsx
similarity index 96%
rename from packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.test.js
rename to packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.test.tsx
index 1b90cad6f8..3a32d9371e 100644
--- a/packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.test.js
+++ b/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();
diff --git a/packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.js b/packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.tsx
similarity index 75%
rename from packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.js
rename to packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.tsx
index 409338caeb..4799654cee 100644
--- a/packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.js
+++ b/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>