chore: Update headlamp to 0.22.0 updating mui to v5 (#139)

Jira: EPMDEDP-12964
Related: #139
Change-Id: Ic0e5b0d647532cfdee948afef7d1f2da49a3157d

.prettierrc.js

@@ -1,10 +1,10 @@
 module.exports = {
-  ...require("@kinvolk/eslint-config/prettier-config"),
-  parser: "typescript",
-  semi: true,
-  trailingComma: "es5",
-  tabWidth: 4,
-  singleQuote: true,
-  printWidth: 100,
-  endOfLine: "crlf"
-};
+    ...require('@kinvolk/eslint-config/prettier-config'),
+    parser: 'typescript',
+    semi: true,
+    trailingComma: 'es5',
+    tabWidth: 2,
+    singleQuote: true,
+    printWidth: 100,
+    endOfLine: 'crlf',
+};

Dockerfile

@@ -1,4 +1,4 @@
-FROM ghcr.io/headlamp-k8s/headlamp:v0.21.0
+FROM ghcr.io/headlamp-k8s/headlamp:v0.22.0
 
 COPY --chown=100:101 assets/ /headlamp/frontend
 COPY --chown=100:101 dist/main.js /headlamp/plugins/edp/main.js

mocks/wrappers/default/index.tsx

@@ -1,27 +1,90 @@
 /**
  * @jest-environment jsdom
  */
-
-import { createTheme } from '@material-ui/core';
-import { ThemeProvider } from '@material-ui/styles';
+import { green, grey, orange, red } from '@mui/material/colors';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { SnackbarProvider } from 'notistack';
 import React from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 
+const commonRules = {
+  palette: {
+    primary: {
+      contrastText: '#fff',
+      main: '#2774b3',
+    },
+    primaryColor: '#000',
+    success: {
+      light: green['50'],
+      main: green['800'],
+      ...green,
+    },
+    warning: {
+      main: 'rgb(196, 69, 0)', // orange
+      light: orange['50'],
+      ...orange,
+    },
+    sidebarLink: {
+      main: grey['500'],
+      selectedBg: grey['800'],
+    },
+    error: {
+      main: red['800'],
+      light: red['50'],
+    },
+    resourceToolTip: {
+      color: 'rgba(0, 0, 0, 0.87)',
+    },
+    sidebarBg: '#000',
+    normalEventBg: '#F0F0F0',
+    chartStyles: {
+      defaultFillColor: grey['300'],
+      labelColor: '#000',
+    },
+    metadataBgColor: grey['300'],
+    headerStyle: {
+      normal: {
+        fontSize: '1.8rem',
+        fontWeight: '700',
+      },
+      main: {
+        fontSize: '1.87rem',
+        fontWeight: '700',
+      },
+      subsection: {
+        fontSize: '1.85rem',
+        fontWeight: '700',
+      },
+      label: {
+        fontSize: '1.6rem',
+        paddingTop: '1rem',
+      },
+    },
+    tables: {
+      headerText: '#474747',
+    },
+  },
+  typography: {
+    fontFamily: ['Overpass', 'sans-serif'].join(', '),
+    h1: {
+      fontWeight: 700,
+      fontSize: '1.87rem',
+    },
+  },
+  shape: {
+    borderRadius: 0,
+  },
+};
+
 export const TestWrapper: React.FC = ({ children }) => {
-    const queryClient = new QueryClient();
-    const theme = createTheme({
-        // @ts-ignore
-        palette: {
-            primaryColor: '#000',
-        },
-    });
+  const queryClient = new QueryClient();
+  const theme = createTheme(commonRules);
 
-    return (
-        <ThemeProvider theme={theme}>
-            <QueryClientProvider client={queryClient}>
-                <SnackbarProvider>{children}</SnackbarProvider>
-            </QueryClientProvider>
-        </ThemeProvider>
-    );
+  return (
+    <ThemeProvider theme={theme}>
+      <QueryClientProvider client={queryClient}>
+        <SnackbarProvider>{children}</SnackbarProvider>
+      </QueryClientProvider>
+    </ThemeProvider>
+  );
 };