Fix deprecated antd dropdown warnings (#3171)

* Fix deprecated antd dropdown warnings

web/components/action-buttons/ActionButtonMenu/ActionButtonMenu.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Button, Dropdown, Menu } from 'antd';
+import { Button, Dropdown } from 'antd';
 import classNames from 'classnames';
 import dynamic from 'next/dynamic';
 import styles from './ActionButtonMenu.module.scss';
@@ -41,7 +41,7 @@ export const ActionButtonMenu: FC<ActionButtonMenuProps> = ({
   showNotifyItem,
   className,
 }) => {
-  const onMenuClick = a => {
+  const onClick = a => {
     if (a.key === NOTIFY_KEY) {
       notifyItemSelected();
       return;
@@ -87,13 +87,11 @@ export const ActionButtonMenu: FC<ActionButtonMenuProps> = ({
     });
   }
 
-  const menu = <Menu items={items} onClick={onMenuClick} />;
-
   const dropdownClasses = classNames([styles.menu, className]);
 
   return (
     <Dropdown
-      overlay={menu}
+      menu={{ items, onClick }}
       placement="bottomRight"
       trigger={['click']}
       className={dropdownClasses}

web/components/chat/ChatModerationActionMenu/ChatModerationActionMenu.module.scss

@@ -1,3 +0,0 @@
-.icon {
-  padding-right: 10px;
-}

web/components/chat/ChatModerationActionMenu/ChatModerationActionMenu.tsx

@@ -1,9 +1,8 @@
-import { Dropdown, Menu, MenuProps, Space, message, Modal as AntModal } from 'antd';
+import { Dropdown, MenuProps, Space, message, Modal as AntModal } from 'antd';
 import { FC, useState } from 'react';
 import dynamic from 'next/dynamic';
 import { Modal } from '../../ui/Modal/Modal';
 import { ChatModerationDetailsModal } from '../ChatModerationDetailsModal/ChatModerationDetailsModal';
-import styles from './ChatModerationActionMenu.module.scss';
 import ChatModeration from '../../../services/moderation-service';
 
 const { confirm } = AntModal;
@@ -82,53 +81,29 @@ export const ChatModerationActionMenu: FC<ChatModerationActionMenuProps> = ({
     });
   };
 
-  const onMenuClick: MenuProps['onClick'] = ({ key }) => {
-    if (key === 'hide-message') {
-      confirmHideMessage();
-    } else if (key === 'ban-user') {
-      confirmBanUser();
-    } else if (key === 'more-info') {
-      setShowUserDetailsModal(true);
-    }
-  };
-
-  const menu = (
-    <Menu
-      onClick={onMenuClick}
-      items={[
-        {
-          label: (
-            <div>
-              <span className={styles.icon}>
-                <EyeInvisibleOutlined />
-              </span>
-              Hide Message
-            </div>
-          ),
-          key: 'hide-message',
-        },
-        {
-          label: (
-            <div>
-              <span className={styles.icon}>
-                <CloseCircleOutlined />
-              </span>
-              Ban User
-            </div>
-          ),
-          key: 'ban-user',
-        },
-        {
-          label: <div>More Info...</div>,
-          key: 'more-info',
-        },
-      ]}
-    />
-  );
+  const items: MenuProps['items'] = [
+    {
+      icon: <EyeInvisibleOutlined />,
+      label: 'Hide Message',
+      key: 'hide-message',
+      onClick: confirmHideMessage,
+    },
+    {
+      icon: <CloseCircleOutlined />,
+      label: 'Ban User',
+      key: 'ban-user',
+      onClick: confirmBanUser,
+    },
+    {
+      label: 'More Info...',
+      key: 'more-info',
+      onClick: () => setShowUserDetailsModal(true),
+    },
+  ];
 
   return (
     <>
-      <Dropdown overlay={menu} trigger={['click']}>
+      <Dropdown menu={{ items }} trigger={['click']}>
         <button type="button" onClick={e => e.preventDefault()}>
           <Space>
             <SmallDashOutlined />

web/components/common/UserDropdown/UserDropdown.tsx

@@ -1,4 +1,4 @@
-import { Menu, Dropdown, Button } from 'antd';
+import { MenuProps, Dropdown, Button } from 'antd';
 import classnames from 'classnames';
 
 import { useRecoilState, useRecoilValue } from 'recoil';
@@ -145,37 +145,37 @@ export const UserDropdown: FC<UserDropdownProps> = ({
 
   const { displayName } = currentUser;
   const username = defaultUsername || displayName;
-  const menu = (
-    <Menu>
-      <Menu.Item key="0" icon={<EditOutlined />} onClick={() => handleChangeName()}>
-        Change name
-      </Menu.Item>
-      <Menu.Item key="1" icon={<LockOutlined />} onClick={() => setShowAuthModal(true)}>
-        Authenticate
-      </Menu.Item>
-      {canShowHideChat && (
-        <Menu.Item
-          key="3"
-          icon={<MessageOutlined />}
-          onClick={() => toggleChatVisibility()}
-          aria-expanded={chatState === ChatState.VISIBLE}
-          className={styles.chatToggle}
-        >
-          {chatState === ChatState.VISIBLE ? 'Hide Chat' : 'Show Chat'}
-        </Menu.Item>
-      )}
-      {canShowChatPopup &&
-        (popupWindow ? (
-          <Menu.Item key="4" icon={<ShrinkOutlined />} onClick={closeChatPopup}>
-            Put chat back
-          </Menu.Item>
-        ) : (
-          <Menu.Item key="4" icon={<ExpandAltOutlined />} onClick={openChatPopup}>
-            Pop out chat
-          </Menu.Item>
-        ))}
-    </Menu>
-  );
+
+  const items: MenuProps['items'] = [
+    {
+      key: 0,
+      icon: <EditOutlined />,
+      label: 'Change name',
+      onClick: handleChangeName,
+    },
+    {
+      key: 1,
+      icon: <LockOutlined />,
+      label: 'Authenticate',
+      onClick: () => setShowAuthModal(true),
+    },
+  ];
+  if (canShowHideChat)
+    items.push({
+      key: 3,
+      'aria-expanded': chatState === ChatState.VISIBLE,
+      className: styles.chatToggle, // TODO why do we hide this button on tablets?
+      icon: <MessageOutlined />,
+      label: chatState === ChatState.VISIBLE ? 'Hide Chat' : 'Show Chat',
+      onClick: toggleChatVisibility,
+    } as MenuProps['items'][0]);
+  if (canShowChatPopup)
+    items.push({
+      key: 4,
+      icon: popupWindow ? <ShrinkOutlined /> : <ExpandAltOutlined />,
+      label: popupWindow ? 'Put chat back' : 'Pop out chat',
+      onClick: popupWindow ? closeChatPopup : openChatPopup,
+    });
 
   return (
     <ErrorBoundary
@@ -189,7 +189,7 @@ export const UserDropdown: FC<UserDropdownProps> = ({
       )}
     >
       <div className={styles.root}>
-        <Dropdown overlay={menu} trigger={['click']}>
+        <Dropdown menu={{ items }} trigger={['click']}>
           <Button id={id} type="primary" icon={<UserOutlined className={styles.userIcon} />}>
             <span
               className={classnames([

web/pages/admin/viewer-info.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext, ReactElement } from 'react';
-import { Row, Col, Typography, Menu, Dropdown, Spin, Alert } from 'antd';
+import { Row, Col, Typography, MenuProps, Dropdown, Spin, Alert } from 'antd';
 import { getUnixTime, sub } from 'date-fns';
 import dynamic from 'next/dynamic';
 import { Chart } from '../../components/admin/Chart';
@@ -85,22 +85,12 @@ export default function ViewersOverTime() {
     setTimeWindowStart(times[key]);
   };
 
-  const menu = (
-    <Menu>
-      {online && streamStart && (
-        <Menu.Item key="0" onClick={onTimeWindowSelect}>
-          {times[0].title}
-        </Menu.Item>
-      )}
-      {times.slice(1).map((time, index) => (
-        // The array is hard coded, so it's safe to use the index as a key.
-        // eslint-disable-next-line react/no-array-index-key
-        <Menu.Item key={index + 1} onClick={onTimeWindowSelect}>
-          {time.title}
-        </Menu.Item>
-      ))}
-    </Menu>
-  );
+  const offset: number = online && streamStart ? 0 : 1;
+  const items: MenuProps['items'] = times.slice(offset).map((time, index) => ({
+    key: index + offset,
+    label: time.title,
+    onClick: onTimeWindowSelect,
+  }));
 
   return (
     <>
@@ -142,7 +132,7 @@ export default function ViewersOverTime() {
       )}
 
       <Spin spinning={!viewerInfo.length || loadingChart}>
-        <Dropdown overlay={menu} trigger={['click']}>
+        <Dropdown menu={{ items }} trigger={['click']}>
           <button
             type="button"
             style={{ float: 'right', background: 'transparent', border: 'unset' }}