Antd updates (#2194)

* Fix antd Modal.visible warning by using updated attribute name 'open'.

* Update more attributes (onVisibleChange => onOpenChange, defaultVisible => defaultOpen) to fix browser console warnings.

* Update ModalProps property from 'visible' to 'open' to match the change in antd.

* Update variable names to match the antd change from 'visible' to 'open'.

* Inline this for the linter.

* One more visible => open reference.

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

@@ -37,7 +37,7 @@ export const ActionButton: FC<ActionButtonProps> = ({
       <Modal
         title={description || title}
         url={url}
-        visible={showModal}
+        open={showModal}
         height="80vh"
         handleCancel={() => setShowModal(false)}
       />

web/components/action-buttons/FollowButton.tsx

@@ -29,7 +29,7 @@ export const FollowButton: FC<FollowButtonProps> = props => {
       </Button>
       <Modal
         title={`Follow ${name}`}
-        visible={showModal}
+        open={showModal}
         handleCancel={() => setShowModal(false)}
         width="550px"
         height="200px"

web/components/chat/ChatModerationActionMenu/ChatModerationActionMenu.tsx

@@ -121,7 +121,7 @@ export const ChatModerationActionMenu: FC<ChatModerationActionMenuProps> = ({
       </Dropdown>
       <Modal
         title={userDisplayName}
-        visible={showUserDetailsModal}
+        open={showUserDetailsModal}
         handleCancel={() => {
           setShowUserDetailsModal(false);
         }}

web/components/chat/ChatTextField/ChatTextField.tsx

@@ -265,8 +265,8 @@ export const ChatTextField: FC<ChatTextFieldProps> = ({ defaultText }) => {
               />
             }
             trigger="click"
-            onVisibleChange={visible => setShowEmojis(visible)}
+            onOpenChange={open => setShowEmojis(open)}
-            visible={showEmojis}
+            open={showEmojis}
           />
         </Slate>
 

web/components/common/UserDropdown/UserDropdown.tsx

@@ -92,16 +92,12 @@ export const UserDropdown: FC<UserDropdownProps> = ({ username: defaultUsername
       </Dropdown>
       <Modal
         title="Change Chat Display Name"
-        visible={showNameChangeModal}
+        open={showNameChangeModal}
         handleCancel={() => setShowNameChangeModal(false)}
       >
         <NameChangeModal />
       </Modal>
-      <Modal
+      <Modal title="Authenticate" open={showAuthModal} handleCancel={() => setShowAuthModal(false)}>
-        title="Authenticate"
-        visible={showAuthModal}
-        handleCancel={() => setShowAuthModal(false)}
-      >
         <AuthModal />
       </Modal>
     </div>

web/components/ui/Content/Content.tsx

@@ -238,7 +238,7 @@ export const Content: FC = () => {
                   {externalActionButtons}
                   <FollowButton size="small" />
                   <NotifyReminderPopup
-                    visible={showNotifyReminder}
+                    open={showNotifyReminder}
                     notificationClicked={() => setShowNotifyPopup(true)}
                     notificationClosed={() => disableNotifyReminderPopup()}
                   >
@@ -248,7 +248,7 @@ export const Content: FC = () => {
 
                 <Modal
                   title="Notify"
-                  visible={showNotifyPopup}
+                  open={showNotifyPopup}
                   afterClose={() => disableNotifyReminderPopup()}
                   handleCancel={() => disableNotifyReminderPopup()}
                 >

web/components/ui/Modal/Modal.tsx

@@ -5,7 +5,7 @@ import styles from './Modal.module.scss';
 export type ModalProps = {
   title: string;
   url?: string;
-  visible: boolean;
+  open: boolean;
   handleOk?: () => void;
   handleCancel?: () => void;
   afterClose?: () => void;
@@ -17,7 +17,7 @@ export type ModalProps = {
 export const Modal: FC<ModalProps> = ({
   title,
   url,
-  visible,
+  open,
   handleOk,
   handleCancel,
   afterClose,
@@ -51,7 +51,7 @@ export const Modal: FC<ModalProps> = ({
   return (
     <AntModal
       title={title}
-      visible={visible}
+      open={open}
       onOk={handleOk}
       onCancel={handleCancel}
       afterClose={afterClose}

web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx

@@ -4,7 +4,7 @@ import React, { useState, useEffect, FC } from 'react';
 import styles from './NotifyReminderPopup.module.scss';
 
 export type NotifyReminderPopupProps = {
-  visible: boolean;
+  open: boolean;
   children: React.ReactNode;
   notificationClicked: () => void;
   notificationClosed: () => void;
@@ -12,16 +12,16 @@ export type NotifyReminderPopupProps = {
 
 export const NotifyReminderPopup: FC<NotifyReminderPopupProps> = ({
   children,
-  visible,
+  open,
   notificationClicked,
   notificationClosed,
 }) => {
-  const [visiblePopup, setVisiblePopup] = useState(visible);
+  const [openPopup, setOpenPopup] = useState(open);
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
-    setVisiblePopup(visible);
+    setOpenPopup(open);
-  }, [visible]);
+  }, [open]);
 
   useEffect(() => {
     setMounted(true);
@@ -43,7 +43,7 @@ export const NotifyReminderPopup: FC<NotifyReminderPopupProps> = ({
 
   const popupClosed = e => {
     e.stopPropagation();
-    setVisiblePopup(false);
+    setOpenPopup(false);
     notificationClosed();
   };
 
@@ -64,8 +64,8 @@ export const NotifyReminderPopup: FC<NotifyReminderPopupProps> = ({
     mounted && (
       <Popover
         placement="topLeft"
-        defaultVisible={visiblePopup}
+        defaultOpen={openPopup}
-        visible={visiblePopup}
+        open={openPopup}
         destroyTooltipOnHide
         title={title}
         content={content}