Upgrade ant-design to v5.x (#1907)

## Which problem is this PR solving? - part of: #998 - fixes #1703 ## Description of the changes - The Size of this PR may look big, but there were no breaking changes except the following: - ant-design v5.0.0 no longer supports less variables. That means we have to use the `seedToken` and `aliasToken` in place of less variables. - With this change, we also needed to use the default styling of ant-design v4. For that, ant-design team provides a `compatible` package. - The notification.`close` and `warn` have been renamed `destory` and `warning` respectively. - PR: https://github.com/jaegertracing/jaeger-ui/pull/1839/files is reversed in this PR, because we are not really on @types/react v18. We are locked on v16 due to yarn resolution. Having v18 written in package.json was creating conflict with the installation of antd v5 [screen-capture (5).webm](https://github.com/jaegertracing/jaeger-ui/assets/94157520/550a79b7-b333-497b-9b73-70d0e6a1a748) ## How was this change tested? - Manually, and unit tests ## Checklist - [x] I have read https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md - [x] I have signed all commits - [x] I have added unit tests for the new functionality - [x] I have run lint and test steps successfully - for `jaeger`: `make lint test` - for `jaeger-ui`: `yarn lint` and `yarn test` --------- Signed-off-by: Ansh Goyal <anshgoyal1704@gmail.com>
jaegertracing · Oct 24, 2023 · 2a91537 · 2a91537
1 parent 614bfc9
commit 2a91537
Show file tree

Hide file tree

Showing 26 changed files with 9,532 additions and 8,486 deletions.
diff --git a/packages/jaeger-ui/package.json b/packages/jaeger-ui/package.json
@@ -17,7 +17,7 @@
     "@babel/preset-typescript": "^7.21.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
-    "@types/react": "18.2.31",
+    "@types/react": "16.14.35",
     "@types/react-window": "^1.8.0",
     "@types/redux-form": "^8.3.5",
     "@types/rollup-plugin-visualizer": "^4.2.1",
@@ -41,6 +41,7 @@
     "vite-plugin-imp": "^2.3.1"
   },
   "dependencies": {
+    "@ant-design/compatible": "^5.1.2",
     "@jaegertracing/plexus": "0.2.0",
     "@pyroscope/flamegraph": "0.21.4",
     "@types/deep-freeze": "^0.1.1",
@@ -49,7 +50,7 @@
     "@types/react-helmet": "^6.1.5",
     "@types/react-router-dom": "^5.1.0",
     "@types/redux-actions": "2.2.1",
-    "antd": "4.24.14",
+    "antd": "^5.10.2",
     "chance": "^1.0.10",
     "classnames": "^2.2.5",
     "combokeys": "^3.0.0",

diff --git a/packages/jaeger-ui/src/components/App/TopNav.css b/packages/jaeger-ui/src/components/App/TopNav.css
@@ -30,3 +30,7 @@ limitations under the License.
 .Dropdown--icon-container .Dropdown--icon {
   margin-left: 5px;
 }
+
+.Menu--item {
+  color: white;
+}
diff --git a/packages/jaeger-ui/src/components/App/TopNav.tsx b/packages/jaeger-ui/src/components/App/TopNav.tsx
@@ -142,7 +142,7 @@ export function TopNavImpl(props: Props) {
         theme="dark"
         mode="horizontal"
         selectable={false}
-        className="ub-right"
+        className="ub-right Menu--item"
         disabledOverflow
         selectedKeys={[pathname]}
         items={itemsGlobalRight}
@@ -156,6 +156,7 @@ export function TopNavImpl(props: Props) {
             return { key, label: <Link to={url}>{text}</Link> };
           })
         )}
+        className="Menu--item"
         mode="horizontal"
         selectable={false}
         selectedKeys={[pathname]}

diff --git a/packages/jaeger-ui/src/components/App/__snapshots__/index.test.js.snap b/packages/jaeger-ui/src/components/App/__snapshots__/index.test.js.snap
@@ -1,43 +1,58 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`JaegerUIApp does not explode 1`] = `
-<Provider
-  store={
+<ConfigProvider
+  theme={
     Object {
-      "@@observable": [Function],
-      "dispatch": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
+      "components": Object {
+        "Layout": Object {
+          "bodyBg": "#fff",
+          "footerBg": "#fff",
+          "footerPadding": "24 50",
+          "headerBg": "#404040",
+          "headerHeight": 48,
+          "headerPadding": "0 50",
+          "siderBg": "#404040",
+          "triggerBg": "tint(#fff, 20%)",
+          "triggerHeight": 48,
+          "zeroTriggerHeight": 42,
+          "zeroTriggerWidth": 36,
+        },
+        "Menu": Object {
+          "activeBarWidth": 3,
+          "darkItemBg": "#151515",
+          "itemBorderRadius": 0,
+          "itemHoverBg": "transparent",
+          "itemHoverColor": "#1890ff",
+          "itemMarginInline": 0,
+          "itemSelectedBg": "#e6f7ff",
+          "itemSelectedColor": "#1890ff",
+          "subMenuItemBorderRadius": 0,
+        },
+        "Table": Object {
+          "rowHoverBg": "#e5f2f2",
+        },
+      },
+      "token": Object {
+        "borderRadius": 2,
+        "colorPrimary": "#199",
+        "wireframe": true,
+      },
     }
   }
 >
-  <HistoryProvider
-    history={
+  <Provider
+    store={
       Object {
-        "action": "POP",
-        "back": [Function],
-        "block": [Function],
-        "createHref": [Function],
-        "forward": [Function],
-        "go": [Function],
-        "goBack": [Function],
-        "goForward": [Function],
-        "length": 1,
-        "listen": [Function],
-        "listenObject": false,
-        "location": Object {
-          "hash": "",
-          "pathname": "/",
-          "search": "",
-          "state": undefined,
-        },
-        "push": [Function],
-        "replace": [Function],
+        "@@observable": [Function],
+        "dispatch": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
       }
     }
   >
-    <Router
+    <HistoryProvider
       history={
         Object {
           "action": "POP",
@@ -62,73 +77,99 @@ exports[`JaegerUIApp does not explode 1`] = `
         }
       }
     >
-      <Memo(Connect(WithRouteProps))>
-        <Switch>
-          <Route
-            path="/search"
-          >
-            <WithRouteProps />
-          </Route>
-          <Route
-            path="/trace/:a?\\\\.\\\\.\\\\.:b?"
-          >
-            <WithRouteProps />
-          </Route>
-          <Route
-            path="/trace/:id"
-          >
-            <WithRouteProps />
-          </Route>
-          <Route
-            path="/dependencies"
-          >
-            <WithRouteProps />
-          </Route>
-          <Route
-            path="/deep-dependencies"
-          >
-            <WithRouteProps />
-          </Route>
-          <Route
-            path="/quality-metrics"
-          >
-            <WithRouteProps />
-          </Route>
-          <Route
-            path="/monitor"
-          >
-            <MonitorATMPage />
-          </Route>
-          <Route
-            exact={true}
-            path="/"
-          >
-            <Redirect
-              to="/search"
-            />
-          </Route>
-          <Route
-            exact={true}
-            path=""
-          >
-            <Redirect
-              to="/search"
-            />
-          </Route>
-          <Route
-            exact={true}
-            path="/"
-          >
-            <Redirect
-              to="/search"
-            />
-          </Route>
-          <Route>
-            <NotFound />
-          </Route>
-        </Switch>
-      </Memo(Connect(WithRouteProps))>
-    </Router>
-  </HistoryProvider>
-</Provider>
+      <Router
+        history={
+          Object {
+            "action": "POP",
+            "back": [Function],
+            "block": [Function],
+            "createHref": [Function],
+            "forward": [Function],
+            "go": [Function],
+            "goBack": [Function],
+            "goForward": [Function],
+            "length": 1,
+            "listen": [Function],
+            "listenObject": false,
+            "location": Object {
+              "hash": "",
+              "pathname": "/",
+              "search": "",
+              "state": undefined,
+            },
+            "push": [Function],
+            "replace": [Function],
+          }
+        }
+      >
+        <Memo(Connect(WithRouteProps))>
+          <Switch>
+            <Route
+              path="/search"
+            >
+              <WithRouteProps />
+            </Route>
+            <Route
+              path="/trace/:a?\\\\.\\\\.\\\\.:b?"
+            >
+              <WithRouteProps />
+            </Route>
+            <Route
+              path="/trace/:id"
+            >
+              <WithRouteProps />
+            </Route>
+            <Route
+              path="/dependencies"
+            >
+              <WithRouteProps />
+            </Route>
+            <Route
+              path="/deep-dependencies"
+            >
+              <WithRouteProps />
+            </Route>
+            <Route
+              path="/quality-metrics"
+            >
+              <WithRouteProps />
+            </Route>
+            <Route
+              path="/monitor"
+            >
+              <MonitorATMPage />
+            </Route>
+            <Route
+              exact={true}
+              path="/"
+            >
+              <Redirect
+                to="/search"
+              />
+            </Route>
+            <Route
+              exact={true}
+              path=""
+            >
+              <Redirect
+                to="/search"
+              />
+            </Route>
+            <Route
+              exact={true}
+              path="/"
+            >
+              <Redirect
+                to="/search"
+              />
+            </Route>
+            <Route>
+              <NotFound />
+            </Route>
+          </Switch>
+        </Memo(Connect(WithRouteProps))>
+      </Router>
+    </HistoryProvider>
+  </Provider>
+</ConfigProvider>
 `;