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 }) => {
+  const items: MenuProps['items'] = [
-    if (key === 'hide-message') {
+    {
-      confirmHideMessage();
+      icon: <EyeInvisibleOutlined />,
-    } else if (key === 'ban-user') {
+      label: 'Hide Message',
-      confirmBanUser();
+      key: 'hide-message',
-    } else if (key === 'more-info') {
+      onClick: confirmHideMessage,
-      setShowUserDetailsModal(true);
+    },
-    }
+    {
-  };
+      icon: <CloseCircleOutlined />,
-
+      label: 'Ban User',
-  const menu = (
+      key: 'ban-user',
-    <Menu
+      onClick: confirmBanUser,
-      onClick={onMenuClick}
+    },
-      items={[
+    {
-        {
+      label: 'More Info...',
-          label: (
+      key: 'more-info',
-            <div>
+      onClick: () => setShowUserDetailsModal(true),
-              <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',
-        },
-      ]}
-    />
-  );
 
   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>
+  const items: MenuProps['items'] = [
-      <Menu.Item key="0" icon={<EditOutlined />} onClick={() => handleChangeName()}>
+    {
-        Change name
+      key: 0,
-      </Menu.Item>
+      icon: <EditOutlined />,
-      <Menu.Item key="1" icon={<LockOutlined />} onClick={() => setShowAuthModal(true)}>
+      label: 'Change name',
-        Authenticate
+      onClick: handleChangeName,
-      </Menu.Item>
+    },
-      {canShowHideChat && (
+    {
-        <Menu.Item
+      key: 1,
-          key="3"
+      icon: <LockOutlined />,
-          icon={<MessageOutlined />}
+      label: 'Authenticate',
-          onClick={() => toggleChatVisibility()}
+      onClick: () => setShowAuthModal(true),
-          aria-expanded={chatState === ChatState.VISIBLE}
+    },
-          className={styles.chatToggle}
+  ];
-        >
+  if (canShowHideChat)
-          {chatState === ChatState.VISIBLE ? 'Hide Chat' : 'Show Chat'}
+    items.push({
-        </Menu.Item>
+      key: 3,
-      )}
+      'aria-expanded': chatState === ChatState.VISIBLE,
-      {canShowChatPopup &&
+      className: styles.chatToggle, // TODO why do we hide this button on tablets?
-        (popupWindow ? (
+      icon: <MessageOutlined />,
-          <Menu.Item key="4" icon={<ShrinkOutlined />} onClick={closeChatPopup}>
+      label: chatState === ChatState.VISIBLE ? 'Hide Chat' : 'Show Chat',
-            Put chat back
+      onClick: toggleChatVisibility,
-          </Menu.Item>
+    } as MenuProps['items'][0]);
-        ) : (
+  if (canShowChatPopup)
-          <Menu.Item key="4" icon={<ExpandAltOutlined />} onClick={openChatPopup}>
+    items.push({
-            Pop out chat
+      key: 4,
-          </Menu.Item>
+      icon: popupWindow ? <ShrinkOutlined /> : <ExpandAltOutlined />,
-        ))}
+      label: popupWindow ? 'Put chat back' : 'Pop out chat',
-    </Menu>
+      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 = (
+  const offset: number = online && streamStart ? 0 : 1;
-    <Menu>
+  const items: MenuProps['items'] = times.slice(offset).map((time, index) => ({
-      {online && streamStart && (
+    key: index + offset,
-        <Menu.Item key="0" onClick={onTimeWindowSelect}>
+    label: time.title,
-          {times[0].title}
+    onClick: onTimeWindowSelect,
-        </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>
-  );
 
   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' }}