Fix deprecations with Antd.Alert (wpilibsuite#360)

* Fix deprecations with Antd.Alert

* Changed visible to open

Author: alan412

src/reactComponents/AboutModal.tsx

@@ -27,12 +27,12 @@ declare const __APP_VERSION__: string;
 const __APP_NAME__ = "SystemCore Blocks";
 
 interface AboutDialogProps {
-    visible: boolean;
+    open: boolean;
     onClose: () => void;
 }
 
 const AboutDialog: React.FC<AboutDialogProps> = ({
-    visible,
+    open,
     onClose,
 }) => {
     const { t } = useTranslation();
@@ -41,11 +41,11 @@ const AboutDialog: React.FC<AboutDialogProps> = ({
     const attributionsFile = '/attributions.txt'; // Path to the attributions file
 
     React.useEffect(() => {
-        if (visible) {
+        if (open) {
             loadAttributions();
             loadDependencies();
         }
-    }, [visible, attributionsFile]);
+    }, [open, attributionsFile]);
     interface LicenseInfo{
         name: string;
         version: string;
@@ -114,7 +114,7 @@ const AboutDialog: React.FC<AboutDialogProps> = ({
                     {t('ABOUT.TITLE')}
                 </Antd.Space>
             }
-            open={visible}
+            open={open}
             footer={[<Antd.Button key="submit" onClick={onClose}>{t('ABOUT.OK')}</Antd.Button>]}
             onCancel={onClose}
             onOk={onClose}

src/reactComponents/ClassNameComponent.tsx

@@ -166,9 +166,8 @@ export default function ClassNameComponent(props: ClassNameComponentProps): Reac
     return (
       <Antd.Alert
         type="error"
-        message={alertErrorMessage}
-        closable
-        afterClose={handleAlertClose}
+        title={alertErrorMessage}
+        closable={{ closeIcon: true, onClose: handleAlertClose}}
         style={{marginTop: ERROR_ALERT_MARGIN_TOP}}
       />
     );

src/reactComponents/Header.tsx

@@ -69,9 +69,8 @@ export default function Header(props: HeaderProps): React.JSX.Element {
     return (
       <Antd.Alert
         type="error"
-        message={props.alertErrorMessage}
-        closable
-        afterClose={handleClearError}
+        title={props.alertErrorMessage}
+        closable={{ closeIcon: true, onClose: handleClearError }}
       />
     );
   };

src/reactComponents/Menu.tsx

@@ -509,7 +509,7 @@ export function Component(props: MenuProps): React.JSX.Element {
         </div>
       )}
       <AboutDialog
-        visible={aboutDialogVisible}
+        open={aboutDialogVisible}
         onClose={() => setAboutDialogVisible(false)}
       />
       <ThemeModal

src/reactComponents/ProjectManageModal.tsx

@@ -309,7 +309,7 @@ export default function ProjectManageModal(props: ProjectManageModalProps): Reac
       >
         {props.noProjects && (
           <Antd.Alert
-            message={t('NO_PROJECTS_FOUND')}
+            title={t('NO_PROJECTS_FOUND')}
             description={t('CREATE_PROJECT_TO_START')}
             type="info"
             showIcon

src/reactComponents/ProjectNameComponent.tsx

@@ -134,9 +134,8 @@ export default function ProjectNameComponent(props: ProjectNameComponentProps):
     return (
       <Antd.Alert
         type="error"
-        message={alertErrorMessage}
-        closable
-        afterClose={handleAlertClose}
+        title={alertErrorMessage}
+        closable={{ closeIcon: true, onClose: handleAlertClose }}
         style={{marginTop: ERROR_ALERT_MARGIN_TOP}}
       />
     );

src/reactComponents/ThemeModal.tsx

@@ -193,7 +193,7 @@ const ThemeModal: React.FC<ThemeModalProps> = ({
                 <Antd.Divider />
 
                 <Antd.Alert
-                    message={t('THEME_MODAL.PREVIEW')}
+                    title={t('THEME_MODAL.PREVIEW')}
                     description={t('THEME_MODAL.PREVIEW_DESCRIPTION')}
                     type="info"
                     showIcon