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/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);
-  }, [visible]);
+    setOpenPopup(open);
+  }, [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}
-        visible={visiblePopup}
+        defaultOpen={openPopup}
+        open={openPopup}
         destroyTooltipOnHide
         title={title}
         content={content}