Upgrade mantine monorepo to v7

electron/providers/jira-cloud-provider/JiraCloudProvider.ts

@@ -769,7 +769,7 @@ export class JiraCloudProvider implements IProvider {
               ...(summary && {
                 summary,
               }),
-              ...(epic && epic.issueKey && {
+              ...(epic && epic.issueKey !== undefined && {
                 parent: { key: epic.issueKey },
               }),
               ...(type && {

electron/providers/jira-server-provider/JiraServerProvider.ts

@@ -875,7 +875,7 @@ export class JiraServerProvider implements IProvider {
               ...(summary && {
                 summary,
               }),
-              ...(epic && epic.issueKey && {
+              ...(epic && epic.issueKey !== undefined && {
                 parent: { key: epic.issueKey },
               }),
               ...(type && {

jest.config.json

@@ -3,6 +3,9 @@
   "transform": {
     "^.+\\.tsx?$": "ts-jest"
   },
-  "setupFilesAfterEnv": ["@testing-library/jest-dom/extend-expect"],
+  "setupFilesAfterEnv": [
+    "@testing-library/jest-dom/extend-expect",
+    "./src/test/setup-undefined-jsdom-properties.ts"
+  ],
   "modulePathIgnorePatterns": ["/e2e"]
 }

package.json

@@ -26,16 +26,16 @@
   "dependencies": {
     "@emotion/react": "^11.10.6",
     "@fastify/env": "^4.2.0",
-    "@mantine/core": "^5.10.0",
-    "@mantine/dates": "^5.10.0",
-    "@mantine/form": "^5.10.0",
-    "@mantine/hooks": "^5.10.0",
-    "@mantine/notifications": "^5.10.0",
+    "@hello-pangea/dnd": "^16.5.0",
+    "@mantine/core": "^7.0.0",
+    "@mantine/dates": "^7.0.0",
+    "@mantine/form": "^7.0.0",
+    "@mantine/hooks": "^7.0.0",
+    "@mantine/notifications": "^7.0.0",
     "@tabler/icons": "^1.116.1",
     "@tanstack/react-query": "^4.23.0",
     "@tanstack/react-query-devtools": "^4.23.0",
     "@types/file-saver": "^2.0.5",
-    "@types/react-beautiful-dnd": "^13.1.3",
     "axios": "^1.6.1",
     "cross-fetch": "^3.1.5",
     "dayjs": "^1.11.7",
@@ -47,21 +47,20 @@
     "i18next": "21.10.0",
     "immer": "^9.0.19",
     "react": "^18.2.0",
-    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
     "react-i18next": "11.18.6",
     "react-router-dom": "^6.4.5",
     "use-immer": "^0.8.1",
     "zustand": "^4.3.1"
   },
   "devDependencies": {
-    "@electron-forge/cli": "^6.1.1",
-    "@electron-forge/maker-deb": "^6.1.1",
-    "@electron-forge/maker-rpm": "^6.1.1",
-    "@electron-forge/maker-squirrel": "^6.1.1",
-    "@electron-forge/maker-zip": "^6.1.1",
-    "@electron-forge/plugin-vite": "6.1.1",
-    "@electron-forge/publisher-github": "^6.1.1",
+    "@electron-forge/cli": "^6.4.2",
+    "@electron-forge/maker-deb": "^6.4.2",
+    "@electron-forge/maker-rpm": "^6.4.2",
+    "@electron-forge/maker-squirrel": "^6.4.2",
+    "@electron-forge/maker-zip": "^6.4.2",
+    "@electron-forge/plugin-vite": "6.4.2",
+    "@electron-forge/publisher-github": "^6.4.2",
     "@playwright/test": "^1.32.3",
     "@testing-library/dom": "^9.0.0",
     "@testing-library/jest-dom": "^5.16.5",
@@ -70,9 +69,11 @@
     "@types/jest": "^29.4.0",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
-    "@vitejs/plugin-react": "^4.0.0",
     "@typescript-eslint/eslint-plugin": "^5.44.0",
     "@typescript-eslint/parser": "^5.44.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "electron": "^24.1.2",
+    "electron-playwright-helpers": "^1.5.4",
     "eslint": "^8.28.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-base": "^15.0.0",
@@ -85,15 +86,16 @@
     "eslint-plugin-testing-library": "^5.10.2",
     "husky": "^8.0.0",
     "jest": "^29.5.0",
-    "lint-staged": "^13.0.3",
-    "typescript": "^4.9.3",
-    "electron": "^24.1.2",
-    "electron-playwright-helpers": "^1.5.4",
     "jest-environment-jsdom": "^29.4.3",
+    "lint-staged": "^13.0.3",
+    "postcss": "^8.4.32",
+    "postcss-preset-mantine": "^1.12.0",
+    "postcss-simple-vars": "^7.0.1",
     "prettier": "2.7.1",
     "sass": "^1.55.0",
     "ts-jest": "^29.0.5",
     "ts-node": "^10.9.1",
+    "typescript": "^4.9.3",
     "vite": "^4.3.2",
     "vite-plugin-electron-renderer": "^0.14.1"
   },

postcss.config.ts

@@ -0,0 +1,15 @@
+module.exports = {
+    plugins: {
+        'postcss-nested': {},
+        'postcss-preset-mantine': {},
+        'postcss-simple-vars': {
+            variables: {
+                'mantine-breakpoint-xs': '36em',
+                'mantine-breakpoint-sm': '48em',
+                'mantine-breakpoint-md': '62em',
+                'mantine-breakpoint-lg': '75em',
+                'mantine-breakpoint-xl': '88em',
+            },
+        },
+    },
+};

src/ThemeProvider.tsx

@@ -1,31 +1,16 @@
-import {
-  ColorScheme,
-  ColorSchemeProvider,
-  MantineProvider,
-} from "@mantine/core"
-import { NotificationsProvider } from "@mantine/notifications"
-import { ReactElement, useState } from "react"
+import { MantineProvider } from "@mantine/core"
+import { Notifications } from "@mantine/notifications"
+import { ReactElement } from "react"
 import { theme } from "../theme"
 
 export function ThemeProvider({ children }: { children: ReactElement }) {
-  const [colorScheme, setColorScheme] = useState<ColorScheme>("light")
-  const toggleColorScheme = (value?: ColorScheme) =>
-    setColorScheme(value || (colorScheme === "dark" ? "light" : "dark"))
+  // withGlobalStyles
+  // withNormalizeCSS
 
   return (
-    <NotificationsProvider>
-      <ColorSchemeProvider
-        colorScheme={colorScheme}
-        toggleColorScheme={toggleColorScheme}
-      >
-        <MantineProvider
-          theme={{ ...theme, colorScheme }}
-          withGlobalStyles
-          withNormalizeCSS
-        >
-          {children}
-        </MantineProvider>
-      </ColorSchemeProvider>
-    </NotificationsProvider>
+    <MantineProvider theme={theme}>
+      <Notifications />
+      {children}
+    </MantineProvider>
   )
 }

src/common/color-scheme.ts

@@ -0,0 +1,5 @@
+import { useComputedColorScheme } from "@mantine/core";
+
+export function useColorScheme(): "light" | "dark" {
+  return useComputedColorScheme('light', { getInitialValueInEffect: true })
+}

src/common/query-functions.ts

@@ -0,0 +1,4 @@
+import { User } from "../../types";
+
+export const getAssignableUsersByProject = (projectIdOrKey: string): Promise<User[]> =>
+  window.provider.getAssignableUsersByProject(projectIdOrKey)

src/common/status-color.ts

@@ -1,4 +1,4 @@
-import { MantineColor } from "@mantine/styles";
+import { MantineColor } from "@mantine/core";
 import { StatusType } from "../../types/status";
 
 export const getStatusTypeColor = (statusType: StatusType): MantineColor => {

src/components/BacklogView/BacklogView.tsx

@@ -14,8 +14,8 @@ import {
 } from "@mantine/core"
 import { IconSearch } from "@tabler/icons"
 import { useQueries, useQuery } from "@tanstack/react-query"
-import { useEffect, useState } from "react"
-import { DragDropContext } from "react-beautiful-dnd"
+import { ChangeEvent, useEffect, useState } from "react"
+import { DragDropContext } from "@hello-pangea/dnd"
 import { useNavigate } from "react-router-dom"
 import { Issue, Sprint } from "types"
 import { useCanvasStore } from "../../lib/Store"
@@ -32,8 +32,10 @@ import { resizeDivider } from "./helpers/resizeDivider"
 import { DraggableIssuesWrapper } from "./IssuesWrapper/DraggableIssuesWrapper"
 import { SprintsPanel } from "./IssuesWrapper/SprintsPanel"
 import { ReloadButton } from "./ReloadButton"
+import { useColorScheme } from "../../common/color-scheme";
 
 export function BacklogView() {
+  const colorScheme = useColorScheme()
   const navigate = useNavigate()
   const [createIssueModalOpened, setCreateIssueModalOpened] = useState(false)
   const projectName = useCanvasStore((state) => state.selectedProject?.name)
@@ -64,7 +66,7 @@ export function BacklogView() {
 
   const sprintsIssuesResults = useQueries({
     queries:
-      !isErrorSprints && sprints && sprints instanceof Array
+      !isErrorSprints && sprints
         ? sprints?.map((sprint) => ({
             queryKey: ["issues", "sprints", projectKey, sprints, sprint.id],
             queryFn: () => getIssuesBySprint(sprint.id),
@@ -140,7 +142,7 @@ export function BacklogView() {
       </Center>
     )
 
-  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
     const currentSearch = event.currentTarget.value
     setSearch(currentSearch)
     searchIssuesFilter(
@@ -168,13 +170,13 @@ export function BacklogView() {
       </Center>
     )
   return (
-    <Stack sx={{ minHeight: "100%" }}>
-      <Stack align="left" spacing={0}>
+    <Stack style={{ minHeight: "100%" }}>
+      <Stack align="left" gap={0}>
         <Group>
-          <Group spacing="xs" c="dimmed">
+          <Group gap="xs" c="dimmed">
             <Text
               onClick={() => navigate("/projectsview")}
-              sx={{
+              style={{
                 ":hover": {
                   textDecoration: "underline",
                   cursor: "pointer",
@@ -191,13 +193,13 @@ export function BacklogView() {
         <Title mb="sm">Backlog</Title>
         <TextInput
           placeholder="Search by issue summary, key, epic, labels, creator or assignee.."
-          icon={<IconSearch size={14} stroke={1.5} />}
+          leftSection={<IconSearch size={14} stroke={1.5} />}
           value={search}
           onChange={handleSearchChange}
         />
       </Stack>
 
-      <Flex sx={{ flexGrow: 1 }}>
+      <Flex style={{ flexGrow: 1 }}>
         <DragDropContext
           onDragEnd={(dropResult) =>
             onDragEnd({
@@ -209,10 +211,10 @@ export function BacklogView() {
         >
           <ScrollArea.Autosize
             className="left-panel"
-            maxHeight="calc(100vh - 230px)"
             w="50%"
             p="sm"
-            sx={{
+            style={{
+              maxHeight: "calc(100vh - 230px)",
               minWidth: "260px",
             }}
           >
@@ -234,13 +236,10 @@ export function BacklogView() {
                 display="flex"
                 fullWidth
                 onClick={() => setCreateIssueModalOpened(true)}
-                sx={(theme) => ({
+                style={(theme) => ({
                   justifyContent: "left",
                   ":hover": {
-                    background:
-                      theme.colorScheme === "dark"
-                        ? theme.colors.dark[4]
-                        : theme.colors.gray[4],
+                    background: colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[4],
                   },
                 })}
               >
@@ -257,16 +256,18 @@ export function BacklogView() {
             size="xl"
             className="resize-handle"
             orientation="vertical"
-            sx={{
+            style={{
               cursor: "col-resize",
             }}
           />
           <ScrollArea.Autosize
             className="right-panel"
-            maxHeight="calc(100vh - 230px)"
             w="50%"
             p="xs"
-            sx={{ minWidth: "260px" }}
+            style={{
+              maxHeight: "calc(100vh - 230px)",
+              minWidth: "260px"
+            }}
           >
             <SprintsPanel
               sprintsWithIssues={

src/components/BacklogView/CreateSprint/CreateSprint.tsx

@@ -1,9 +1,10 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { Box, Button, Group, Loader, TextInput } from "@mantine/core"
+import { Box, Button } from "@mantine/core"
 import { useState } from "react"
 import { CreateSprintModal } from "./CreateSprintModal"
+import { useColorScheme } from "../../../common/color-scheme";
 
 export function CreateSprint() {
+  const colorScheme = useColorScheme()
   const [createSprintModalOpened, setCreateSprintModalOpened] = useState(false)
 
   return (
@@ -17,13 +18,10 @@ export function CreateSprint() {
         display="flex"
         fullWidth
         onClick={() => setCreateSprintModalOpened(true)}
-        sx={(theme) => ({
+        style={(theme) => ({
           justifyContent: "left",
           ":hover": {
-            background:
-              theme.colorScheme === "dark"
-                ? theme.colors.dark[4]
-                : theme.colors.gray[4],
+            background: colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[4],
           },
         })}
       >