chore: Upgrade to Ant Design 5 [WIP]

.storybook/preview.js

@@ -1,4 +1,3 @@
-import "antd/dist/antd.variable.min.css";
 import "../src/renderer/index.css";
 import { ConfigProvider } from "antd";
 import i18n from "../src/test-utils/i18n";

package.json

@@ -43,14 +43,14 @@
     }
   },
   "dependencies": {
-    "@ant-design/icons": "^4.7.0",
+    "@ant-design/icons": "^5.6.1",
     "@apollo/client": "3.5.5",
     "@graphql-tools/schema": "^10.0.3",
     "@octokit/core": "^3.5.1",
     "@pothos/core": "^3.1.2",
     "@pothos/plugin-simple-objects": "^3.0.1",
     "@rehooks/local-storage": "^2.4.4",
-    "antd": "4.17.2",
+    "antd": "5.24.0",
     "apollo-bus-link": "^0.4.5",
     "apollo-link-logger": "^2.0.1",
     "base64-arraybuffer": "^1.0.2",

src/renderer/AntProvider.tsx

@@ -1,8 +1,7 @@
 import { ConfigProvider } from "antd";
-import { Locale } from "antd/lib/locale-provider";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { fetchAntLocale } from "./i18n/ant";
+import { fetchAntLocale, Locale } from "./i18n/ant";
 
 const AntProvider: React.FC = ({ children }) => {
   const [locale, setLocale] = useState<Locale>();

src/renderer/compatibility/CompatNoticeModal.tsx

@@ -28,7 +28,7 @@ const WebCompatInfo: React.FC<Props> = ({
     <Modal
       style={{ maxWidth: "500px", top: "50px" }}
       width="100%"
-      visible={visible}
+      open={visible}
       onCancel={onClose}
       closable
       footer={

src/renderer/components/CloudVersionTargetForm.tsx

@@ -219,7 +219,7 @@ const VersionFiltersDropdown: React.FC<{
 
   return (
     <Dropdown
-      visible={visible}
+      open={visible}
       trigger={["click"]}
       onVisibleChange={(flag) => setVisible(flag)}
       overlay={

src/renderer/components/SettingsMenu.tsx

@@ -20,7 +20,7 @@ const SettingsMenu: React.FC = () => {
     <Dropdown
       placement="bottomRight"
       trigger={["click"]}
-      visible={open}
+      open={open}
       onVisibleChange={setOpen}
       arrow
       overlay={

src/renderer/components/VersionTargetForm.tsx

@@ -158,7 +158,7 @@ const VersionFiltersDropdown: React.FC<{
 
   return (
     <Dropdown
-      visible={visible}
+      open={visible}
       trigger={["click"]}
       onVisibleChange={(flag) => setVisible(flag)}
       overlay={

src/renderer/components/__tests__/VersionTargetForm.spec.tsx

@@ -204,20 +204,20 @@ describe("<VersionTargetForm />", () => {
       - First value
       + Second value
 
-      @@ -52,11 +52,11 @@
-                          />
-                        </span>
+      @@ -62,11 +62,11 @@
+                              />
+                            </span>
+                            <span
+                              class="ant-select-selection-placeholder"
+                            >
+      -                       Select firmware version
+      +                       Some placeholder for version
+                            </span>
+                          </span>
+                        </div>
                         <span
-                          class="ant-select-selection-placeholder"
-                        >
-      -                   Select firmware version
-      +                   Some placeholder for version
-                        </span>
-                      </div>
-                      <span
-                        aria-hidden="true"
-                        class="ant-select-arrow"
-      @@ -209,7 +209,6 @@
+                          aria-hidden="true"
+      @@ -239,7 +239,6 @@
                   </div>
                 </div>
               </div>
@@ -254,20 +254,20 @@ describe("<VersionTargetForm />", () => {
       - First value
       + Second value
 
-      @@ -173,11 +173,11 @@
-                          />
-                        </span>
+      @@ -202,11 +202,11 @@
+                              />
+                            </span>
+                            <span
+                              class="ant-select-selection-placeholder"
+                            >
+      -                       Select radio model
+      +                       Some placeholder for version
+                            </span>
+                          </span>
+                        </div>
                         <span
-                          class="ant-select-selection-placeholder"
-                        >
-      -                   Select radio model
-      +                   Some placeholder for version
-                        </span>
-                      </div>
-                      <span
-                        aria-hidden="true"
-                        class="ant-select-arrow"
-      @@ -208,7 +208,6 @@
+                          aria-hidden="true"
+      @@ -239,7 +239,6 @@
                   </div>
                 </div>
               </div>

src/renderer/components/__tests__/__snapshots__/Markdown.spec.tsx.snap

@@ -4,14 +4,14 @@ exports[`<Markdown /> > should return the given markdown string as html 1`] = `
 <DocumentFragment>
   <div>
     <h1
-      class="ant-typography"
+      class="ant-typography css-dev-only-do-not-override-1yacf91"
     >
       This is my markdown
     </h1>
     <ul>
       <li>
         <article
-          class="ant-typography"
+          class="ant-typography css-dev-only-do-not-override-1yacf91"
         >
           A bullet point
         </article>
@@ -22,7 +22,7 @@ exports[`<Markdown /> > should return the given markdown string as html 1`] = `
     </p>
     <p>
       <a
-        class="ant-typography"
+        class="ant-typography css-dev-only-do-not-override-1yacf91"
         href="https://google.com"
         rel="noopener noreferrer"
         target="_blank"

src/renderer/components/devices/__tests__/DeviceList.spec.tsx

@@ -53,12 +53,12 @@ describe("<DeviceList />", () => {
       @@ -1,9 +1,9 @@
         <DocumentFragment>
           <div
-            class="ant-list ant-list-lg ant-list-split"
+            class="ant-list ant-list-lg ant-list-split css-dev-only-do-not-override-1yacf91"
       -     style="height: 100%; min-width: 350px;"
       +     style="height: 100%; min-width: 350px; opacity: 0.5; pointer-events: none;"
           >
             <div
-              class="ant-spin-nested-loading"
+              class="ant-spin-nested-loading css-dev-only-do-not-override-1yacf91"
             >
               <div
       @@ -77,7 +77,6 @@

src/renderer/components/devices/__tests__/__snapshots__/DeviceList.spec.tsx.snap

@@ -49,7 +49,7 @@ exports[`<DeviceList /> > should render a device as selected 1`] = `
         class="ant-list-item-meta-title"
       >
         <span
-          class="ant-typography"
+          class="ant-typography css-dev-only-do-not-override-1yacf91"
         >
           STEM32 Bootloader
         </span>
@@ -66,7 +66,7 @@ exports[`<DeviceList /> > should render a device as selected 1`] = `
   >
     <li>
       <span
-        class="ant-typography ant-typography-secondary"
+        class="ant-typography ant-typography-secondary css-dev-only-do-not-override-1yacf91"
       >
         0x3453
         :
@@ -122,7 +122,7 @@ exports[`<DeviceList /> > should render a device details 1`] = `
         class="ant-list-item-meta-title"
       >
         <span
-          class="ant-typography"
+          class="ant-typography css-dev-only-do-not-override-1yacf91"
         >
           STEM32 Bootloader
         </span>
@@ -139,7 +139,7 @@ exports[`<DeviceList /> > should render a device details 1`] = `
   >
     <li>
       <span
-        class="ant-typography ant-typography-secondary"
+        class="ant-typography ant-typography-secondary css-dev-only-do-not-override-1yacf91"
       >
         0x3453
         :
@@ -153,11 +153,11 @@ exports[`<DeviceList /> > should render a device details 1`] = `
 exports[`<DeviceList /> > should render loading when device list is loading 1`] = `
 <DocumentFragment>
   <div
-    class="ant-list ant-list-lg ant-list-split"
+    class="ant-list ant-list-lg ant-list-split css-dev-only-do-not-override-1yacf91"
     style="height: 100%; min-width: 350px;"
   >
     <div
-      class="ant-spin-nested-loading"
+      class="ant-spin-nested-loading css-dev-only-do-not-override-1yacf91"
     >
       <div
         class="ant-spin-container"
@@ -166,7 +166,7 @@ exports[`<DeviceList /> > should render loading when device list is loading 1`]
           class="ant-list-items"
         >
           <div
-            class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active"
+            class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active css-dev-only-do-not-override-1yacf91"
           >
             <div
               class="ant-skeleton-header"
@@ -190,7 +190,7 @@ exports[`<DeviceList /> > should render loading when device list is loading 1`]
             </div>
           </div>
           <div
-            class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active"
+            class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active css-dev-only-do-not-override-1yacf91"
           >
             <div
               class="ant-skeleton-header"
@@ -214,7 +214,7 @@ exports[`<DeviceList /> > should render loading when device list is loading 1`]
             </div>
           </div>
           <div
-            class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active"
+            class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active css-dev-only-do-not-override-1yacf91"
           >
             <div
               class="ant-skeleton-header"

src/renderer/components/devices/__tests__/__snapshots__/DeviceSummary.spec.tsx.snap

@@ -22,12 +22,11 @@ exports[`<DeviceSummary /> > should show details about the given device 1`] = `
 }
 
 <div
-    class="ant-space ant-space-vertical"
+    class="ant-space css-dev-only-do-not-override-1yacf91 ant-space-vertical ant-space-gap-row-large ant-space-gap-col-large"
     style="width: 100%;"
   >
     <div
       class="ant-space-item"
-      style="margin-bottom: 24px;"
     >
       <div
         class="c0"
@@ -61,22 +60,22 @@ exports[`<DeviceSummary /> > should show details about the given device 1`] = `
         class="c0"
       >
         <h5
-          class="ant-typography"
+          class="ant-typography css-dev-only-do-not-override-1yacf91"
           style="text-align: center;"
         >
           STEM32 Bootloader 2
         </h5>
         <div>
           <span
-            class="ant-typography ant-typography-secondary"
+            class="ant-typography ant-typography-secondary css-dev-only-do-not-override-1yacf91"
             style="text-align: center;"
           >
             375897983475
           </span>
         </div>
         <div>
           <span
-            class="ant-typography ant-typography-secondary"
+            class="ant-typography ant-typography-secondary css-dev-only-do-not-override-1yacf91"
             style="text-align: center;"
           >
             0x3453:0x4358
@@ -94,19 +93,19 @@ exports[`<DeviceSummary /> > should show loading skeleton before displaying devi
 - First value
 + Second value
 
-@@ -34,27 +34,33 @@
+@@ -33,27 +33,33 @@
       </div>
       <div
         class="ant-space-item"
       >
         <div
--         class="ant-skeleton ant-skeleton-active"
+-         class="ant-skeleton ant-skeleton-active css-dev-only-do-not-override-1yacf91"
 +         class="sc-aXZVg cZVjIL"
         >
 -         <div
 -           class="ant-skeleton-content"
 +         <h5
-+           class="ant-typography"
++           class="ant-typography css-dev-only-do-not-override-1yacf91"
 +           style="text-align: center;"
           >
 -           <h3
@@ -119,7 +118,7 @@ exports[`<DeviceSummary /> > should show loading skeleton before displaying devi
 +         </h5>
 +         <div>
 +           <span
-+             class="ant-typography ant-typography-secondary"
++             class="ant-typography ant-typography-secondary css-dev-only-do-not-override-1yacf91"
 +             style="text-align: center;"
             >
 -             <li />
@@ -132,7 +131,7 @@ exports[`<DeviceSummary /> > should show loading skeleton before displaying devi
 +         </div>
 +         <div>
 +           <span
-+             class="ant-typography ant-typography-secondary"
++             class="ant-typography ant-typography-secondary css-dev-only-do-not-override-1yacf91"
 +             style="text-align: center;"
 +           >
 +             0x3453:0x4358

src/renderer/components/firmware/CopyUrlButton.tsx

@@ -30,7 +30,7 @@ const CopyUrlButton: React.FC<Props> = ({ version, target }) => {
 
   return (
     <Tooltip
-      visible={copied}
+      open={copied}
       trigger={[]}
       placement="top"
       title={t(`Copied to clipboard`)}

src/renderer/components/firmware/__tests__/FirmwareSummary.spec.tsx

@@ -115,13 +115,12 @@ describe("<FirmwareSummary />", () => {
           <div
       -       class="sc-aXZVg cZVjIL"
       -       style="margin-bottom: 32px;"
-      +     class="ant-space ant-space-vertical"
+      +     class="ant-space css-dev-only-do-not-override-1yacf91 ant-space-vertical ant-space-gap-row-large ant-space-gap-col-large"
       +     style="width: 100%;"
           >
             <div
-      -         class="ant-skeleton ant-skeleton-element ant-skeleton-active"
+      -         class="ant-skeleton ant-skeleton-element ant-skeleton-active css-dev-only-do-not-override-1yacf91"
       +       class="ant-space-item"
-      +       style="margin-bottom: 24px;"
             >
       -         <span
       -           class="ant-skeleton-avatar ant-skeleton-avatar-lg ant-skeleton-avatar-square"
@@ -137,7 +136,7 @@ describe("<FirmwareSummary />", () => {
               </div>
             </div>
             <div
-      -       class="ant-skeleton ant-skeleton-active"
+      -       class="ant-skeleton ant-skeleton-active css-dev-only-do-not-override-1yacf91"
       +       class="ant-space-item"
             >
               <div
@@ -147,13 +146,13 @@ describe("<FirmwareSummary />", () => {
       -         <ul
       -           class="ant-skeleton-paragraph"
       +         <h5
-      +           class="ant-typography"
+      +           class="ant-typography css-dev-only-do-not-override-1yacf91"
       +           style="text-align: center;"
       +         >
       +           EdgeTX "Dauntless" 2.5.0
       +         </h5>
       +         <span
-      +           class="ant-typography ant-typography-secondary"
+      +           class="ant-typography ant-typography-secondary css-dev-only-do-not-override-1yacf91"
       +           style="text-align: center;"
                 >
       -           <li />

src/renderer/i18n/ant.ts

@@ -1,6 +1,8 @@
-import { Locale } from "antd/lib/locale-provider";
+import { ConfigProviderProps } from "antd";
 import languages from "./languages";
 
+export type Locale = ConfigProviderProps["locale"];
+
 type Language = (typeof languages)[number];
 
 export const languageToAntLocale: Record<

src/renderer/index.tsx

@@ -1,4 +1,3 @@
-import "antd/dist/antd.variable.min.css";
 import "./index.css";
 import React, { Suspense } from "react";
 import ReactDOM from "react-dom";