Migrate Mantine v7 -> v8 (#17402)

I followed the migration guide at https://mantine.dev/guides/7x-to-8x/ to
add back both manual timezone handling in the time input, as well as syntax
highlighting in the config code box.

Signed-off-by: Julius Volz <julius.volz@gmail.com>

web/ui/.nvmrc

@@ -1 +1 @@
-v20.5.1
+v22.21.1

web/ui/mantine-ui/package.json

@@ -20,11 +20,11 @@
     "@floating-ui/dom": "^1.7.4",
     "@lezer/common": "^1.2.3",
     "@lezer/highlight": "^1.2.1",
-    "@mantine/code-highlight": "^7.17.8",
+    "@mantine/code-highlight": "^8.3.5",
-    "@mantine/core": "^7.17.8",
+    "@mantine/core": "^8.3.5",
-    "@mantine/dates": "^7.17.8",
+    "@mantine/dates": "^8.3.5",
-    "@mantine/hooks": "^7.17.8",
+    "@mantine/hooks": "^8.3.5",
-    "@mantine/notifications": "^7.17.8",
+    "@mantine/notifications": "^8.3.5",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@nexucis/fuzzy": "^0.5.1",
     "@nexucis/kvsearch": "^0.9.1",
@@ -39,6 +39,7 @@
     "@uiw/react-codemirror": "^4.25.2",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.18",
+    "highlight.js": "^11.11.1",
     "lodash": "^4.17.21",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",

web/ui/mantine-ui/src/App.tsx

@@ -71,6 +71,18 @@ import ServiceDiscoveryPage from "./pages/service-discovery/ServiceDiscoveryPage
 import AlertmanagerDiscoveryPage from "./pages/AlertmanagerDiscoveryPage";
 import { actionIconStyle, navIconStyle } from "./styles";
 
+import {
+  CodeHighlightAdapterProvider,
+  createHighlightJsAdapter,
+} from "@mantine/code-highlight";
+import hljs from "highlight.js/lib/core";
+import "./highlightjs.css";
+import yamlLang from "highlight.js/lib/languages/yaml";
+
+hljs.registerLanguage("yaml", yamlLang);
+
+const highlightJsAdapter = createHighlightJsAdapter(hljs);
+
 const queryClient = new QueryClient();
 
 const mainNavPages = [
@@ -306,6 +318,7 @@ function App() {
     <BrowserRouter basename={pathPrefix}>
       <QueryParamProvider adapter={ReactRouter6Adapter}>
         <MantineProvider defaultColorScheme="auto" theme={theme}>
+          <CodeHighlightAdapterProvider adapter={highlightJsAdapter}>
             <Notifications position="top-right" />
 
             <QueryClientProvider client={queryClient}>
@@ -442,6 +455,7 @@ function App() {
               </AppShell>
               {/* <ReactQueryDevtools initialIsOpen={false} /> */}
             </QueryClientProvider>
+          </CodeHighlightAdapterProvider>
         </MantineProvider>
       </QueryParamProvider>
     </BrowserRouter>

web/ui/mantine-ui/src/highlightjs.css

@@ -0,0 +1,97 @@
+/* Adapted from Mantine 7, where highlighting was still included automatically as part of <CodeHighlight>,
+   see https://github.com/mantinedev/mantine/blob/v7/packages/%40mantine/code-highlight/src/CodeHighlight.theme.module.css */
+.hljs {
+  color: var(--code-text-color);
+  background: var(--code-background);
+
+  @mixin where-light {
+    --code-text-color: var(--mantine-color-gray-7);
+    --code-background: var(--mantine-color-gray-0);
+    --code-comment-color: var(--mantine-color-gray-6);
+    --code-keyword-color: var(--mantine-color-violet-8);
+    --code-tag-color: var(--mantine-color-red-9);
+    --code-literal-color: var(--mantine-color-blue-6);
+    --code-string-color: var(--mantine-color-blue-9);
+    --code-variable-color: var(--mantine-color-lime-9);
+    --code-class-color: var(--mantine-color-orange-9);
+  }
+
+  @mixin where-dark {
+    --code-text-color: var(--mantine-color-dark-1);
+    --code-background: var(--mantine-color-dark-8);
+    --code-comment-color: var(--mantine-color-dark-3);
+    --code-keyword-color: var(--mantine-color-violet-3);
+    --code-tag-color: var(--mantine-color-yellow-4);
+    --code-literal-color: var(--mantine-color-blue-4);
+    --code-string-color: var(--mantine-color-green-6);
+    --code-variable-color: var(--mantine-color-blue-2);
+    --code-class-color: var(--mantine-color-orange-5);
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    font-style: italic;
+    color: var(--code-comment-color);
+  }
+
+  .hljs-doctag,
+  .hljs-formula,
+  .hljs-keyword {
+    color: var(--code-keyword-color);
+  }
+
+  .hljs-deletion,
+  .hljs-name,
+  .hljs-section,
+  .hljs-selector-tag,
+  .hljs-subst {
+    color: var(--code-tag-color);
+  }
+
+  .hljs-literal {
+    color: var(--code-literal-color);
+  }
+
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-meta .hljs-string,
+  .hljs-regexp,
+  .hljs-string {
+    color: var(--code-string-color);
+  }
+
+  .hljs-attr,
+  .hljs-number,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-pseudo,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-variable {
+    color: var(--code-variable-color);
+  }
+
+  .hljs-bullet,
+  .hljs-link,
+  .hljs-meta,
+  .hljs-selector-id,
+  .hljs-symbol,
+  .hljs-title,
+  .hljs-built_in,
+  .hljs-class .hljs-title,
+  .hljs-title.class_ {
+    color: var(--code-class-color);
+  }
+
+  .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    font-weight: 700;
+  }
+
+  .hljs-link {
+    text-decoration: underline;
+  }
+}

web/ui/mantine-ui/src/pages/query/TimeInput.tsx

@@ -1,8 +1,9 @@
 import { Group, ActionIcon, CloseButton } from "@mantine/core";
-import { DatesProvider, DateTimePicker } from "@mantine/dates";
+import { DateTimePicker } from "@mantine/dates";
 import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
 import { FC } from "react";
 import { useSettings } from "../../state/settingsSlice";
+import dayjs from "dayjs";
 
 interface TimeInputProps {
   time: number | null; // Timestamp in milliseconds.
@@ -22,17 +23,27 @@ const TimeInput: FC<TimeInputProps> = ({
   const baseTime = () => (time !== null ? time : Date.now().valueOf());
   const { useLocalTime } = useSettings();
 
+  const dateString = useLocalTime
+    ? dayjs(time).format()
+    : dayjs(time).subtract(dayjs().utcOffset(), "minutes").format();
+
   return (
     <Group gap={5}>
-      <DatesProvider settings={{ timezone: useLocalTime ? undefined : "UTC" }}>
       <DateTimePicker
         title="End time"
         w={230}
         valueFormat="YYYY-MM-DD HH:mm:ss"
         withSeconds
-          // clearable
+        value={time !== null ? dateString : undefined}
-          value={time !== null ? new Date(time) : undefined}
+        onChange={(value) =>
-          onChange={(value) => onChangeTime(value ? value.getTime() : null)}
+          onChangeTime(
+            value
+              ? useLocalTime
+                ? new Date(value).getTime()
+                : dayjs.utc(value).valueOf()
+              : null
+          )
+        }
         aria-label={description}
         placeholder={description}
         onClick={() => {
@@ -80,7 +91,6 @@ const TimeInput: FC<TimeInputProps> = ({
           </>
         }
       />
-      </DatesProvider>
     </Group>
   );
 };

web/ui/package-lock.json

@@ -34,11 +34,11 @@
         "@floating-ui/dom": "^1.7.4",
         "@lezer/common": "^1.2.3",
         "@lezer/highlight": "^1.2.1",
-        "@mantine/code-highlight": "^7.17.8",
+        "@mantine/code-highlight": "^8.3.5",
-        "@mantine/core": "^7.17.8",
+        "@mantine/core": "^8.3.5",
-        "@mantine/dates": "^7.17.8",
+        "@mantine/dates": "^8.3.5",
-        "@mantine/hooks": "^7.17.8",
+        "@mantine/hooks": "^8.3.5",
-        "@mantine/notifications": "^7.17.8",
+        "@mantine/notifications": "^8.3.5",
         "@microsoft/fetch-event-source": "^2.0.1",
         "@nexucis/fuzzy": "^0.5.1",
         "@nexucis/kvsearch": "^0.9.1",
@@ -53,6 +53,7 @@
         "@uiw/react-codemirror": "^4.25.2",
         "clsx": "^2.1.1",
         "dayjs": "^1.11.18",
+        "highlight.js": "^11.11.1",
         "lodash": "^4.17.21",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
@@ -85,6 +86,105 @@
         "vitest": "^3.2.4"
       }
     },
+    "mantine-ui/node_modules/@floating-ui/react": {
+      "version": "0.27.16",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.16.tgz",
+      "integrity": "sha512-9O8N4SeG2z++TSM8QA/KTeKFBVCNEz/AGS7gWPJf6KFRzmRWixFRnCnkPHRDwSVZW6QPDO6uT0P2SpWNKCc9/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.6",
+        "@floating-ui/utils": "^0.2.10",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
+      }
+    },
+    "mantine-ui/node_modules/@mantine/code-highlight": {
+      "version": "8.3.5",
+      "resolved": "https://registry.npmjs.org/@mantine/code-highlight/-/code-highlight-8.3.5.tgz",
+      "integrity": "sha512-KZhYPilo6hUbJf/ls0e/lCjXKWI6/cnzkMkSRLAEVLD9HrhJKIBonwQtLRFgJbLmxKu9IE9KuJjq9lA5kUJCFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "peerDependencies": {
+        "@mantine/core": "8.3.5",
+        "@mantine/hooks": "8.3.5",
+        "react": "^18.x || ^19.x",
+        "react-dom": "^18.x || ^19.x"
+      }
+    },
+    "mantine-ui/node_modules/@mantine/core": {
+      "version": "8.3.5",
+      "resolved": "https://registry.npmjs.org/@mantine/core/-/core-8.3.5.tgz",
+      "integrity": "sha512-PdVNLMgOS2vFhOujRi6/VC9ic8w3UDyKX7ftwDeJ7yQT8CiepUxfbWWYpVpnq23bdWh/7fIT2Pn1EY8r8GOk7g==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "^0.27.16",
+        "clsx": "^2.1.1",
+        "react-number-format": "^5.4.4",
+        "react-remove-scroll": "^2.7.1",
+        "react-textarea-autosize": "8.5.9",
+        "type-fest": "^4.41.0"
+      },
+      "peerDependencies": {
+        "@mantine/hooks": "8.3.5",
+        "react": "^18.x || ^19.x",
+        "react-dom": "^18.x || ^19.x"
+      }
+    },
+    "mantine-ui/node_modules/@mantine/dates": {
+      "version": "8.3.5",
+      "resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-8.3.5.tgz",
+      "integrity": "sha512-LkIdC4eWPNQFv1BU1c52U3Z3RuA3yU1asvTgMEIQ/MdJsGK8GePwpgMH/jKQ8ba/AW9NfksdvtOJ6uIqPwjCkg==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "peerDependencies": {
+        "@mantine/core": "8.3.5",
+        "@mantine/hooks": "8.3.5",
+        "dayjs": ">=1.0.0",
+        "react": "^18.x || ^19.x",
+        "react-dom": "^18.x || ^19.x"
+      }
+    },
+    "mantine-ui/node_modules/@mantine/hooks": {
+      "version": "8.3.5",
+      "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-8.3.5.tgz",
+      "integrity": "sha512-0Wf08eWLKi3WkKlxnV1W5vfuN6wcvAV2VbhQlOy0R9nrWorGTtonQF6qqBE3PnJFYF1/ZE+HkYZQ/Dr7DmYSMQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.x || ^19.x"
+      }
+    },
+    "mantine-ui/node_modules/@mantine/notifications": {
+      "version": "8.3.5",
+      "resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-8.3.5.tgz",
+      "integrity": "sha512-8TvzrPxfdtOLGTalv7Ei1hy2F6KbR3P7/V73yw3AOKhrf1ydS89sqV2ShbsucHGJk9Pto0wjdTPd8Q7pm5MAYw==",
+      "license": "MIT",
+      "dependencies": {
+        "@mantine/store": "8.3.5",
+        "react-transition-group": "4.4.5"
+      },
+      "peerDependencies": {
+        "@mantine/core": "8.3.5",
+        "@mantine/hooks": "8.3.5",
+        "react": "^18.x || ^19.x",
+        "react-dom": "^18.x || ^19.x"
+      }
+    },
+    "mantine-ui/node_modules/@mantine/store": {
+      "version": "8.3.5",
+      "resolved": "https://registry.npmjs.org/@mantine/store/-/store-8.3.5.tgz",
+      "integrity": "sha512-qN4fFsDMy86IV9oh1gZlDTv41RAsO0grjx90FGyT5QCv7NTgcavwxB74GBkhp45W8xn+Ms/awKy+6NxnmLmW1w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.x || ^19.x"
+      }
+    },
     "module/codemirror-promql": {
       "name": "@prometheus-io/codemirror-promql",
       "version": "0.307.3",
@@ -1449,26 +1549,13 @@
         "@floating-ui/utils": "^0.2.10"
       }
     },
-    "node_modules/@floating-ui/react": {
-      "version": "0.26.28",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz",
-      "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==",
-      "dependencies": {
-        "@floating-ui/react-dom": "^2.1.2",
-        "@floating-ui/utils": "^0.2.8",
-        "tabbable": "^6.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
     "node_modules/@floating-ui/react-dom": {
-      "version": "2.1.2",
+      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz",
-      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==",
+      "license": "MIT",
       "dependencies": {
-        "@floating-ui/dom": "^1.0.0"
+        "@floating-ui/dom": "^1.7.4"
       },
       "peerDependencies": {
         "react": ">=16.8.0",
@@ -2098,91 +2185,6 @@
         "@lezer/common": "^1.0.0"
       }
     },
-    "node_modules/@mantine/code-highlight": {
-      "version": "7.17.8",
-      "resolved": "https://registry.npmjs.org/@mantine/code-highlight/-/code-highlight-7.17.8.tgz",
-      "integrity": "sha512-KfdLi8MhpoeHiXkLMfuPQz1IDTUjvP2w3hbdx8Oz/hL0o+mbPYfgrU/w/D3ONjVQMoEbPpEL5vSA2eTYCmwVKg==",
-      "license": "MIT",
-      "dependencies": {
-        "clsx": "^2.1.1",
-        "highlight.js": "^11.10.0"
-      },
-      "peerDependencies": {
-        "@mantine/core": "7.17.8",
-        "@mantine/hooks": "7.17.8",
-        "react": "^18.x || ^19.x",
-        "react-dom": "^18.x || ^19.x"
-      }
-    },
-    "node_modules/@mantine/core": {
-      "version": "7.17.8",
-      "resolved": "https://registry.npmjs.org/@mantine/core/-/core-7.17.8.tgz",
-      "integrity": "sha512-42sfdLZSCpsCYmLCjSuntuPcDg3PLbakSmmYfz5Auea8gZYLr+8SS5k647doVu0BRAecqYOytkX2QC5/u/8VHw==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/react": "^0.26.28",
-        "clsx": "^2.1.1",
-        "react-number-format": "^5.4.3",
-        "react-remove-scroll": "^2.6.2",
-        "react-textarea-autosize": "8.5.9",
-        "type-fest": "^4.27.0"
-      },
-      "peerDependencies": {
-        "@mantine/hooks": "7.17.8",
-        "react": "^18.x || ^19.x",
-        "react-dom": "^18.x || ^19.x"
-      }
-    },
-    "node_modules/@mantine/dates": {
-      "version": "7.17.8",
-      "resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-7.17.8.tgz",
-      "integrity": "sha512-KYog/YL83PnsMef7EZagpOFq9I2gfnK0eYSzC8YvV9Mb6t/x9InqRssGWVb0GIr+TNILpEkhKoGaSKZNy10Q1g==",
-      "license": "MIT",
-      "dependencies": {
-        "clsx": "^2.1.1"
-      },
-      "peerDependencies": {
-        "@mantine/core": "7.17.8",
-        "@mantine/hooks": "7.17.8",
-        "dayjs": ">=1.0.0",
-        "react": "^18.x || ^19.x",
-        "react-dom": "^18.x || ^19.x"
-      }
-    },
-    "node_modules/@mantine/hooks": {
-      "version": "7.17.8",
-      "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-7.17.8.tgz",
-      "integrity": "sha512-96qygbkTjRhdkzd5HDU8fMziemN/h758/EwrFu7TlWrEP10Vw076u+Ap/sG6OT4RGPZYYoHrTlT+mkCZblWHuw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^18.x || ^19.x"
-      }
-    },
-    "node_modules/@mantine/notifications": {
-      "version": "7.17.8",
-      "resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-7.17.8.tgz",
-      "integrity": "sha512-/YK16IZ198W6ru/IVecCtHcVveL08u2c8TbQTu/2p26LSIM9AbJhUkrU6H+AO0dgVVvmdmNdvPxcJnfq3S9TMg==",
-      "license": "MIT",
-      "dependencies": {
-        "@mantine/store": "7.17.8",
-        "react-transition-group": "4.4.5"
-      },
-      "peerDependencies": {
-        "@mantine/core": "7.17.8",
-        "@mantine/hooks": "7.17.8",
-        "react": "^18.x || ^19.x",
-        "react-dom": "^18.x || ^19.x"
-      }
-    },
-    "node_modules/@mantine/store": {
-      "version": "7.17.8",
-      "resolved": "https://registry.npmjs.org/@mantine/store/-/store-7.17.8.tgz",
-      "integrity": "sha512-/FrB6PAVH4NEjQ1dsc9qOB+VvVlSuyjf4oOOlM9gscPuapDP/79Ryq7JkhHYfS55VWQ/YUlY24hDI2VV+VptXg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^18.x || ^19.x"
-      }
-    },
     "node_modules/@marijn/find-cluster-break": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
@@ -5259,9 +5261,9 @@
       }
     },
     "node_modules/highlight.js": {
-      "version": "11.10.0",
+      "version": "11.11.1",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
-      "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==",
+      "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=12.0.0"
@@ -7814,9 +7816,10 @@
       "peer": true
     },
     "node_modules/react-number-format": {
-      "version": "5.4.3",
+      "version": "5.4.4",
-      "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.4.4.tgz",
-      "integrity": "sha512-VCY5hFg/soBighAoGcdE+GagkJq0230qN6jcS5sp8wQX1qy1fYN/RX7/BXkrs0oyzzwqR8/+eSUrqXbGeywdUQ==",
+      "integrity": "sha512-wOmoNZoOpvMminhifQYiYSTCLUDOiUbBunrMrMjA+dV52sY+vck1S4UhR6PkgnoCquvvMSeJjErXZ4qSaWCliA==",
+      "license": "MIT",
       "peerDependencies": {
         "react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -7856,15 +7859,16 @@
       }
     },
     "node_modules/react-remove-scroll": {
-      "version": "2.6.2",
+      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.2.tgz",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.1.tgz",
-      "integrity": "sha512-KmONPx5fnlXYJQqC62Q+lwIeAk64ws/cUw6omIumRzMRPqgnYqhSSti99nbj0Ry13bv7dF+BKn7NB+OqkdZGTw==",
+      "integrity": "sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==",
+      "license": "MIT",
       "dependencies": {
         "react-remove-scroll-bar": "^2.3.7",
-        "react-style-singleton": "^2.2.1",
+        "react-style-singleton": "^2.2.3",
         "tslib": "^2.1.0",
         "use-callback-ref": "^1.3.3",
-        "use-sidecar": "^1.1.2"
+        "use-sidecar": "^1.1.3"
       },
       "engines": {
         "node": ">=10"