pepakriz · pepakriz · Mar 23, 2024 · Mar 23, 2024
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [20.x]
 
     steps:
       - uses: actions/checkout@v2

diff --git a/common/package.json b/common/package.json
@@ -11,9 +11,9 @@
 		"check:tests": "true"
 	},
 	"devDependencies": {
-		"husky": "^4.2.3",
-		"pkg": "^4.4.9",
-		"prettier": "^2.0.5",
-		"pretty-quick": "^2.0.1"
+		"husky": "9.0.11",
+		"pkg": "5.8.1",
+		"prettier": "3.2.5",
+		"pretty-quick": "4.0.0"
 	}
 }
diff --git a/dashboard/next-env.d.ts b/dashboard/next-env.d.ts
@@ -1,2 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/dashboard/package.json b/dashboard/package.json
@@ -3,8 +3,8 @@
 	"version": "1.0.0",
 	"private": true,
 	"scripts": {
-		"start:dev": "next",
-		"start:local": "API_URL=http://127.0.0.1:4000/graphql WS_URL=ws://127.0.0.1:4000/graphql next",
+		"start:dev": "next --turbo",
+		"start:local": "API_URL=http://127.0.0.1:4000/graphql WS_URL=ws://127.0.0.1:4000/graphql next --turbo",
 		"build": "next build",
 		"export": "next export",
 		"start": "next start",
@@ -16,26 +16,30 @@
 		"check:tests": "true"
 	},
 	"dependencies": {
-		"@apollo/client": "^3.1.3",
+		"@apollo/client": "3.9.9",
+		"@emotion/cache": "11.11.0",
+		"@emotion/react": "11.11.4",
+		"@emotion/server": "11.11.0",
+		"@emotion/styled": "11.11.0",
 		"@gitlab-merger-bot/common": "*",
 		"@gitlab-merger-bot/server": "*",
-		"@material-ui/core": "^4.11.0",
-		"@material-ui/icons": "^4.5.1",
-		"graphql-tag": "^2.11.0",
-		"isomorphic-unfetch": "^3.0.0",
-		"next": "^9.5.2",
-		"react": "^16.12.0",
-		"react-dom": "^16.12.0",
-		"subscriptions-transport-ws": "^0.9.18"
+		"@mui/icons-material": "5.15.14",
+		"@mui/material": "5.15.14",
+		"@mui/material-nextjs": "5.15.11",
+		"graphql-tag": "2.12.6",
+		"next": "14.1.4",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"subscriptions-transport-ws": "0.11.0"
 	},
 	"devDependencies": {
-		"@graphql-codegen/cli": "^1.17.8",
-		"@graphql-codegen/typescript": "^1.17.9",
-		"@graphql-codegen/typescript-operations": "^1.17.8",
-		"@graphql-codegen/typescript-react-apollo": "^2.0.6",
-		"@types/node": "^14.6.0",
-		"@types/react": "^16.9.19",
-		"graphql": "^14.7.0",
-		"typescript": "^4.0.2"
+		"@graphql-codegen/cli": "5.0.2",
+		"@graphql-codegen/typescript": "4.0.6",
+		"@graphql-codegen/typescript-operations": "4.2.0",
+		"@graphql-codegen/typescript-react-apollo": "4.3.0",
+		"@types/node": "20.11.30",
+		"@types/react": "18.2.69",
+		"graphql": "15.8.0",
+		"typescript": "5.4.3"
 	}
 }
diff --git a/dashboard/src/components/layout.tsx b/dashboard/src/components/layout.tsx
@@ -1,15 +1,15 @@
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import Box from '@material-ui/core/Box';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
 import React from 'react';
 import Link from 'next/link';
-import { Button } from '@material-ui/core';
-import Container from '@material-ui/core/Container';
-import Paper from '@material-ui/core/Paper';
-import Avatar from '@material-ui/core/Avatar';
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
+import { Button } from '@mui/material';
+import Container from '@mui/material/Container';
+import Paper from '@mui/material/Paper';
+import Avatar from '@mui/material/Avatar';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
 import { useQuery } from '@apollo/client';
 import { MeQuery } from '../types';
 import gql from 'graphql-tag';

diff --git a/dashboard/src/components/ui/UserAvatar.tsx b/dashboard/src/components/ui/UserAvatar.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { useQuery } from '@apollo/client';
 import { AvatarQuery, AvatarQueryVariables } from '../../types';
 import gql from 'graphql-tag';
-import Avatar from '@material-ui/core/Avatar';
+import Avatar from '@mui/material/Avatar';
 
 interface Props {
 	userId: number;

diff --git a/dashboard/src/components/ui/overlay-loading.tsx b/dashboard/src/components/ui/overlay-loading.tsx
@@ -1,22 +1,18 @@
 import React from 'react';
 
-import CircularProgress from '@material-ui/core/CircularProgress';
-import Backdrop from '@material-ui/core/Backdrop';
-import { makeStyles, createStyles, Theme } from '@material-ui/core';
-
-const useStyles = makeStyles((theme: Theme) =>
-	createStyles({
-		backdrop: {
-			zIndex: theme.zIndex.appBar - 1,
-			color: '#fff',
-		},
-	}),
-);
+import CircularProgress from '@mui/material/CircularProgress';
+import Backdrop from '@mui/material/Backdrop';
+import { Theme } from '@mui/material';
 
 const OverlayLoading = () => {
-	const classes = useStyles();
 	return (
-		<Backdrop open className={classes.backdrop}>
+		<Backdrop
+			open
+			sx={{
+				zIndex: (theme: Theme) => theme.zIndex.appBar - 1,
+				color: '#fff',
+			}}
+		>
 			<CircularProgress size={32} color={'inherit'} />
 		</Backdrop>
 	);

diff --git a/dashboard/src/lib/apollo.tsx b/dashboard/src/lib/apollo.tsx
@@ -1,7 +1,6 @@
 import { NextPage, NextPageContext } from 'next';
 import React from 'react';
 
-import Head from 'next/head';
 import {
 	ApolloProvider,
 	ApolloClient,
@@ -12,7 +11,6 @@ import {
 import { getMainDefinition } from '@apollo/client/utilities';
 import { HttpLink } from '@apollo/client/link/http';
 import { WebSocketLink } from '@apollo/client/link/ws';
-import fetch from 'isomorphic-unfetch';
 
 type TApolloClient = ApolloClient<NormalizedCacheObject>;
 
@@ -66,7 +64,6 @@ export function withApollo(PageComponent: NextPage, { ssr = true } = {}) {
 					} catch (error) {
 						console.error('Error while running `getDataFromTree`', error);
 					}
-					Head.rewind();
 				}
 			}
 
@@ -106,7 +103,6 @@ function createApolloClient(initialState = {}) {
 	const httpLink = new HttpLink({
 		uri: apiUrl,
 		credentials: 'same-origin',
-		fetch,
 	});
 
 	if (!ssrMode) {

diff --git a/dashboard/src/pages/_app.tsx b/dashboard/src/pages/_app.tsx
@@ -1,35 +1,27 @@
 import React from 'react';
-import App from 'next/app';
+import { AppProps } from 'next/app';
 import Head from 'next/head';
-import { ThemeProvider } from '@material-ui/core/styles';
-import CssBaseline from '@material-ui/core/CssBaseline';
+import { AppCacheProvider } from '@mui/material-nextjs/v14-pagesRouter';
+import { ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
 import theme from '../theme';
 
-export default class MyApp extends App {
-	componentDidMount() {
-		const jssStyles = document.querySelector('#jss-server-side');
-		if (jssStyles) {
-			jssStyles.parentElement?.removeChild(jssStyles);
-		}
-	}
+export default function MyApp(props: AppProps) {
+	const { Component, pageProps } = props;
 
-	render() {
-		const { Component, pageProps } = this.props;
-
-		return (
-			<React.Fragment>
-				<Head>
-					<title>GitLab Merger Bot</title>
-					<meta
-						name='viewport'
-						content='minimum-scale=1, initial-scale=1, width=device-width'
-					/>
-				</Head>
-				<ThemeProvider theme={theme}>
-					<CssBaseline />
-					<Component {...pageProps} />
-				</ThemeProvider>
-			</React.Fragment>
-		);
-	}
+	return (
+		<AppCacheProvider {...props}>
+			<Head>
+				<title>GitLab Merger Bot</title>
+				<meta
+					name='viewport'
+					content='minimum-scale=1, initial-scale=1, width=device-width'
+				/>
+			</Head>
+			<ThemeProvider theme={theme}>
+				<CssBaseline />
+				<Component {...pageProps} />
+			</ThemeProvider>
+		</AppCacheProvider>
+	);
 }
diff --git a/dashboard/src/pages/_document.tsx b/dashboard/src/pages/_document.tsx
@@ -1,42 +1,33 @@
 import React from 'react';
-import Document, { Head, Main, NextScript } from 'next/document';
-import { ServerStyleSheets } from '@material-ui/core/styles';
+import { Head, Main, Html, NextScript, DocumentProps, DocumentContext } from 'next/document';
+import {
+	DocumentHeadTags,
+	DocumentHeadTagsProps,
+	documentGetInitialProps,
+} from '@mui/material-nextjs/v14-pagesRouter';
 import theme from '../theme';
 
-export default class AppDocument extends Document {
-	render() {
-		return (
-			<html lang='en'>
-				<Head>
-					{/* PWA primary color */}
-					<meta name='theme-color' content={theme.palette.primary.main} />
-					<link
-						rel='stylesheet'
-						href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap'
-					/>
-				</Head>
-				<body>
-					<Main />
-					<NextScript />
-				</body>
-			</html>
-		);
-	}
+export default function AppDocument(props: DocumentProps & DocumentHeadTagsProps) {
+	return (
+		<Html lang='en'>
+			<Head>
+				{/* PWA primary color */}
+				<meta name='theme-color' content={theme.palette.primary.main} />
+				<link
+					rel='stylesheet'
+					href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap'
+				/>
+				<DocumentHeadTags {...props} />
+			</Head>
+			<body>
+				<Main />
+				<NextScript />
+			</body>
+		</Html>
+	);
 }
 
-AppDocument.getInitialProps = async (ctx) => {
-	const sheets = new ServerStyleSheets();
-	const originalRenderPage = ctx.renderPage;
-
-	ctx.renderPage = () =>
-		originalRenderPage({
-			enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
-		});
-
-	const initialProps = await Document.getInitialProps(ctx);
-
-	return {
-		...initialProps,
-		styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
-	};
+AppDocument.getInitialProps = async (ctx: DocumentContext) => {
+	const finalProps = await documentGetInitialProps(ctx);
+	return finalProps;
 };
diff --git a/dashboard/src/pages/index.tsx b/dashboard/src/pages/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { withApollo } from '../lib/apollo';
-import Typography from '@material-ui/core/Typography';
-import Box from '@material-ui/core/Box';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
 import Layout from '../components/layout';
 import { useMutation, useSubscription } from '@apollo/client';
 import gql from 'graphql-tag';
@@ -12,20 +12,19 @@ import {
 	UnassignMutation,
 	UnassignMutationVariables,
 } from '../types';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableContainer from '@material-ui/core/TableContainer';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-import Paper from '@material-ui/core/Paper';
-import Button from '@material-ui/core/Button';
-import ButtonGroup from '@material-ui/core/ButtonGroup';
-import Toolbar from '@material-ui/core/Toolbar';
-import Icon from '@material-ui/icons/Send';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+import Button from '@mui/material/Button';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import Toolbar from '@mui/material/Toolbar';
+import Icon from '@mui/icons-material/Send';
 import { UserAvatar } from '../components/ui/UserAvatar';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import CircularProgress from '@mui/material/CircularProgress';
 
 const Row = (props: GetQueuesSubscriptionJobFragment) => {
 	const [unassign, { loading }] = useMutation<UnassignMutation, UnassignMutationVariables>(gql`

diff --git a/dashboard/src/theme.ts b/dashboard/src/theme.ts
@@ -1,7 +1,6 @@
-import { createMuiTheme } from '@material-ui/core/styles';
-import { red } from '@material-ui/core/colors';
+import { createTheme } from '@mui/material/styles';
 
-const theme = createMuiTheme({
+const theme = createTheme({
 	palette: {
 		primary: {
 			main: '#414e9c',

diff --git a/dashboard/tsconfig.json b/dashboard/tsconfig.json
@@ -13,8 +13,14 @@
 		"moduleResolution": "node",
 		"resolveJsonModule": true,
 		"isolatedModules": true,
-		"jsx": "preserve"
+		"jsx": "preserve",
+		"incremental": true,
+		"plugins": [
+			{
+				"name": "next"
+			}
+		]
 	},
 	"exclude": ["node_modules"],
-	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"]
 }
diff --git a/server/codegen.yml b/server/codegen.yml
@@ -1,7 +1,7 @@
 config:
   useIndexSignature: true
   namingConvention:
-    enumValues: upper-case
+    enumValues: upper-case#upperCase
   scalars:
     Uuid: Uuid
     CheckSeverity: number