Dependency updates

docker-compose.yml

@@ -37,4 +37,4 @@ services:
 
 networks:
   amazeeio-network:
-    external: true
+    external: true

package.json

@@ -17,7 +17,6 @@
     "@apollo/react-hooks": "^3.1.5",
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
-    "@zeit/next-css": "^1.0.1",
     "apollo-cache-inmemory": "^1.3.9",
     "apollo-client": "^2.4.5",
     "apollo-link": "^1.2.3",
@@ -28,21 +27,23 @@
     "date-fns": "^2.9.0",
     "dotenv-extended": "^2.2.0",
     "express": "^4.18.1",
-    "git-url-parse": "11.1.2",
+    "git-up": "^7.0.0",
+    "git-url-parse": "13.1.0",
     "graphql": "^14.5.8",
     "graphql-tag": "^2.10.0",
     "isomorphic-unfetch": "^2.1.1",
     "moment": "^2.22.2",
     "moment-duration-format": "^2.2.2",
-    "next": "^8.0.3",
+    "next": "12",
     "object-hash": "^3.0.0",
+    "parse-url": "^8.1.0",
     "postcss-nested": "^3.0.0",
     "ramda": "^0.25.0",
-    "react": "^16.8.4",
+    "react": "18.2.0",
     "react-apollo": "^2.1.11",
     "react-beautiful-dnd": "^13.0.0",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-dom": "^16.8.4",
+    "react-dom": "18.2.0",
     "react-hexgrid": "^1.0.3",
     "react-highlight-words": "^0.14.0",
     "react-markdown": "^6.0.0",
@@ -55,7 +56,7 @@
     "styled-jsx-plugin-postcss": "^0.1.3",
     "subscriptions-transport-ws": "^0.11.0",
     "svg-inline-loader": "^0.8.0",
-    "webpack": "^4.41.2"
+    "webpack": "5.75.0"
   },
   "devDependencies": {
     "@babel/core": "^7.7.4",

src/components/Honeycomb/index.js

@@ -5,7 +5,7 @@ import ProblemsByProject from 'components/ProblemsByProject';
 import { LoadingPageNoHeader } from 'pages/_loading';
 import { ErrorNoHeader } from 'pages/_error';
 import { bp, color } from 'lib/variables';
-import './styling.css';
+// import './styling.css';
 
 const config = {
     "width": 1200,

src/components/ProjectDetailsSidebar/index.js

@@ -10,6 +10,8 @@ const Project = ({ project }) => {
   const [copied, setCopied] = useState(false);
   const gitUrlParsed = giturlparse(project.gitUrl);
   const gitLink = `${gitUrlParsed.resource}/${gitUrlParsed.full_name}`;
+
+
   const environmentCount = R.countBy(R.prop('environmentType'))(
     project.environments
   );

src/next.config.js

@@ -2,25 +2,24 @@ const webpackShared = require('./webpack.shared-config');
 require('dotenv-extended').load();
 const fs = require('fs');
 
-const withCSS = require('@zeit/next-css');
-
+
 const taskBlocklist =
   (process.env.LAGOON_UI_TASK_BLOCKLIST &&
     process.env.LAGOON_UI_TASK_BLOCKLIST.split(',')) ||
   [];
-
+ 
 // Here we load the plugin registry from plugins.json
 let pluginRegistry = {};
-if(fs.existsSync("plugins.json")) {
+if (fs.existsSync("plugins.json")) {
   const pluginString = fs.readFileSync("plugins.json");
   pluginRegistry = JSON.parse(pluginString);
 }
-
-module.exports = withCSS({
+ 
+module.exports = {
   publicRuntimeConfig: {
-    GRAPHQL_API: process.env.GRAPHQL_API,
     GRAPHQL_API_TOKEN: process.env.GRAPHQL_API_TOKEN,
-    KEYCLOAK_API: process.env.KEYCLOAK_API,
+    GRAPHQL_API:process.env.GRAPHQL_API,
+    KEYCLOAK_API:process.env.KEYCLOAK_API,
     LAGOON_UI_ICON: process.env.LAGOON_UI_ICON,
     LAGOON_UI_TASK_BLOCKLIST: taskBlocklist,
     LAGOON_VERSION: process.env.LAGOON_VERSION,
@@ -36,25 +35,27 @@ module.exports = withCSS({
   distDir: '../build',
   webpack(config, options) {
     // Add aliases from shared config file.
-    Object.keys(webpackShared.alias).forEach(name => config.resolve.alias[name] = webpackShared.alias[name]);
-
+    if (webpackShared && webpackShared.alias) {
+      Object.keys(webpackShared.alias).forEach(name => config.resolve.alias[name] = webpackShared.alias[name]);
+    }
+
     const originalEntry = config.entry;
     config.entry = async () => {
       const entries = await originalEntry();
-
+ 
       if (
         entries['main.js'] &&
         !entries['main.js'].includes('./lib/polyfills.js')
       ) {
         entries['main.js'].unshift('./lib/polyfills.js');
       }
-
+ 
       return entries;
     };
-
+ 
     // Debug config.
     // console.dir(config, { depth: null });
-
+ 
     return config;
   }
-});
+};

src/pages/_app.js

@@ -1,54 +1,61 @@
-import 'isomorphic-unfetch';
-import App, { Container, createUrl } from 'next/app';
-import React from 'react';
-import Head from 'next/head';
-import getConfig from 'next/config';
-import Typekit from 'react-typekit';
-import Favicon from 'components/Favicon';
-import Authenticator, { AuthContext } from 'lib/Authenticator';
-import ApiConnection from 'lib/ApiConnection';
+import "isomorphic-unfetch";
+import { useRouter } from "next/router";
+import React from "react";
+import Head from "next/head";
+import getConfig from "next/config";
+import Typekit from "react-typekit";
+import Favicon from "components/Favicon";
+import Authenticator, { AuthContext } from "lib/Authenticator";
+import ApiConnection from "lib/ApiConnection";
+import Script from "next/script";
+import App from "next/app";
 
 const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
 
-class MyApp extends App {
-  render() {
-    const { router, Component, pageProps, err } = this.props;
-    const url = createUrl(router);
-
-    // Catch runtime errors in production and skip authentication to avoid
-    // infinite auth > error > auth > error loops.
-    if (err) {
-      return (
-        <Container>
-          <Head>
-            <link rel="stylesheet" href="/static/normalize.css" />
-            <Typekit kitId="ggo2pml" />
-          </Head>
-          <Component {...pageProps} errorMessage={err.toString()} url={url} />
-          <Favicon />
-        </Container>
-      );
-    }
-
+const LagoonApp = ({ Component, pageProps, err }) => {
+  const { pathname } = useRouter();
+  // Catch runtime errors in production and skip authentication to avoid
+  // infinite auth > error > auth > error loops.
+  if (err) {
     return (
-      <Container>
+      <>
         <Head>
           <link rel="stylesheet" href="/static/normalize.css" />
           <Typekit kitId="ggo2pml" />
-          <script
-            type="text/javascript"
-            src={`${publicRuntimeConfig.KEYCLOAK_API}/js/keycloak.js`}
-          />
         </Head>
-        <Authenticator>
-          <ApiConnection>
-            <Component {...pageProps} url={url} />
-          </ApiConnection>
-        </Authenticator>
+        <Component
+          {...pageProps}
+          errorMessage={err.toString()}
+          url={pathname}
+        />
         <Favicon />
-      </Container>
+      </>
     );
   }
-}
 
-export default MyApp;
+  return (
+    <>
+      <Script
+        src={`${publicRuntimeConfig.KEYCLOAK_API}/js/keycloak.js`}
+        strategy="beforeInteractive"
+      />
+      <Head>
+        <link rel="stylesheet" href="/static/normalize.css" />
+        <Typekit kitId="ggo2pml" />
+      </Head>
+      <Authenticator>
+        <ApiConnection>
+          <Component {...pageProps} url={pathname} />
+        </ApiConnection>
+      </Authenticator>
+      <Favicon />
+    </>
+  );
+};
+
+LagoonApp.getInitialProps = async (appContext) => {
+  const appProps = await App.getInitialProps(appContext);
+  return { ...appProps };
+};
+
+export default LagoonApp;

src/pages/_error.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Head from 'next-server/head';
+import Head from 'next/head'
 import StatusLayout from 'layouts/StatusLayout';
 
 const statusCodes = {

src/pages/projects.js

@@ -12,7 +12,9 @@ import { bp } from 'lib/variables';
 /**
  * Displays the projects page.
  */
-const ProjectsPage = () => (
+const ProjectsPage = () => {
+
+  return (
   <>
     <Head>
       <title>Projects</title>
@@ -54,7 +56,8 @@ const ProjectsPage = () => (
         </MainLayout>
       ))}
     </Query>
-  </>
-);
+  </>)
+          }
+;
 
 export default ProjectsPage;