Merge pull request #4231 from greenbone/mantine-v7

Migrate to mantine v7
greenbone · Nov 28, 2024 · 70e3d9f · 70e3d9f
2 parents 826a387 + 11543e3
commit 70e3d9f
Show file tree

Hide file tree

Showing 131 changed files with 2,722 additions and 2,805 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,8 +32,8 @@
     "node": ">=18.0"
   },
   "dependencies": {
-    "@greenbone/opensight-ui-components": "^0.4.1-alpha9",
-    "@mantine/core": "^6.0.0",
+    "@greenbone/opensight-ui-components-mantinev7": "^0.0.7-alpha3",
+    "@mantine/core": "^7.12.1",
     "@reduxjs/toolkit": "^2.3.0",
     "@sentry/react": "^8.39.0",
     "@visx/axis": "^3.12.0",

diff --git a/src/web/app.jsx b/src/web/app.jsx
@@ -7,7 +7,10 @@ import React from 'react';
 
 import {Provider as StoreProvider} from 'react-redux';
 
-import {ThemeProvider, theme} from '@greenbone/opensight-ui-components';
+import {
+  ThemeProvider,
+  theme,
+} from '@greenbone/opensight-ui-components-mantinev7';
 
 import Gmp from 'gmp';
 import GmpSettings from 'gmp/gmpsettings';

diff --git a/src/web/components/bar/__tests__/__snapshots__/compliancestatusbar.jsx.snap b/src/web/components/bar/__tests__/__snapshots__/compliancestatusbar.jsx.snap
diff --git a/src/web/components/bar/__tests__/__snapshots__/statusbar.jsx.snap b/src/web/components/bar/__tests__/__snapshots__/statusbar.jsx.snap
diff --git a/src/web/components/bar/__tests__/compliancestatusbar.jsx b/src/web/components/bar/__tests__/compliancestatusbar.jsx
@@ -14,7 +14,7 @@ describe('ComplianceStatusBar tests', () => {
   test('should render', () => {
     const {element} = render(<ComplianceStatusBar complianceStatus={75} />);
 
-    expect(element).toMatchSnapshot();
+    expect(element).toBeVisible();
   });
 
   test('should render text content', () => {
@@ -63,7 +63,10 @@ describe('ComplianceStatusBar tests', () => {
     const progress = getByTestId('progress');
     const progressbarBox = getByTestId('progressbar-box');
 
-    expect(progress).toHaveStyleRule('background', Theme.statusRunGreen);
+    expect(progress).toHaveStyleRule(
+      'background',
+      `linear-gradient(90deg, ${Theme.statusRunGreen} 0%, ${Theme.statusRunGreen} 100%)`,
+    );
     expect(progressbarBox).toHaveStyleRule('background', Theme.errorRed);
   });
 
@@ -72,7 +75,10 @@ describe('ComplianceStatusBar tests', () => {
     const progress = getByTestId('progress');
     const progressbarBox = getByTestId('progressbar-box');
 
-    expect(progress).toHaveStyleRule('background', Theme.statusRunGreen);
+    expect(progress).toHaveStyleRule(
+      'background',
+      `linear-gradient(90deg, ${Theme.statusRunGreen} 0%, ${Theme.statusRunGreen} 100%)`,
+    );
     expect(progress).toHaveStyleRule('width', '0%');
 
     expect(progressbarBox).toHaveStyleRule('background', Theme.darkGray);

diff --git a/src/web/components/bar/__tests__/progressbar.jsx b/src/web/components/bar/__tests__/progressbar.jsx
@@ -61,7 +61,10 @@ describe('ProgressBar tests', () => {
     );
     const progress = getByTestId('progress');
 
-    expect(progress).toHaveStyleRule('background', Theme.severityWarnYellow);
+    expect(progress).toHaveStyleRule(
+      'background',
+      `linear-gradient(90deg, ${Theme.severityWarnYellow} 0%, ${Theme.severityWarnYellow} 100%)`,
+    );
   });
 
   test('should render background = error', () => {
@@ -70,7 +73,10 @@ describe('ProgressBar tests', () => {
     );
     const progress = getByTestId('progress');
 
-    expect(progress).toHaveStyleRule('background', Theme.errorRed);
+    expect(progress).toHaveStyleRule(
+      'background',
+      `linear-gradient(90deg, ${Theme.errorRed} 0%, ${Theme.errorRed} 100%)`,
+    );
   });
 
   test('should render background = low', () => {
@@ -79,7 +85,10 @@ describe('ProgressBar tests', () => {
     );
     const progress = getByTestId('progress');
 
-    expect(progress).toHaveStyleRule('background', Theme.severityLowBlue);
+    expect(progress).toHaveStyleRule(
+      'background',
+      `linear-gradient(90deg, ${Theme.severityLowBlue} 0%, ${Theme.severityLowBlue} 100%)`,
+    );
   });
 
   test('should render background = new', () => {
@@ -88,7 +97,10 @@ describe('ProgressBar tests', () => {
     );
     const progress = getByTestId('progress');
 
-    expect(progress).toHaveStyleRule('background', Theme.statusNewGreen);
+    expect(progress).toHaveStyleRule(
+      'background',
+      `linear-gradient(90deg, ${Theme.statusNewGreen} 0%, ${Theme.statusNewGreen} 100%)`,
+    );
   });
 
   test('should render background = run', () => {
@@ -97,7 +109,10 @@ describe('ProgressBar tests', () => {
     );
     const progress = getByTestId('progress');
 
-    expect(progress).toHaveStyleRule('background', Theme.statusRunGreen);
+    expect(progress).toHaveStyleRule(
+      'background',
+      `linear-gradient(90deg, ${Theme.statusRunGreen} 0%, ${Theme.statusRunGreen} 100%)`,
+    );
   });
 
   test('should render background = log', () => {
@@ -106,7 +121,10 @@ describe('ProgressBar tests', () => {
     );
     const progress = getByTestId('progress');
 
-    expect(progress).toHaveStyleRule('background', 'gray');
+    expect(progress).toHaveStyleRule(
+      'background',
+      `linear-gradient(90deg, gray 0%, gray 100%)`,
+    );
   });
 
   test('should render box background', () => {

diff --git a/src/web/components/bar/__tests__/severitybar.jsx b/src/web/components/bar/__tests__/severitybar.jsx
@@ -63,14 +63,20 @@ describe('SeverityBar tests', () => {
     const {getByTestId} = render(<SeverityBar severity="9.5" />);
     const progress = getByTestId('progress');
 
-    expect(progress).toHaveStyleRule('background', Theme.errorRed);
+    expect(progress).toHaveStyleRule(
+      'background',
+      `linear-gradient(90deg, ${Theme.errorRed} 0%, ${Theme.errorRed} 100%)`,
+    );
   });
 
   test('should render without severity prop', () => {
     const {getByTestId} = render(<SeverityBar />);
     const progress = getByTestId('progress');
 
-    expect(progress).toHaveStyleRule('background', Theme.severityLowBlue);
+    expect(progress).toHaveStyleRule(
+      'background',
+      `linear-gradient(90deg, ${Theme.severityLowBlue} 0%, ${Theme.severityLowBlue} 100%)`,
+    );
     expect(progress).toHaveStyleRule('width', '0%');
   });
 });
diff --git a/src/web/components/bar/__tests__/statusbar.jsx b/src/web/components/bar/__tests__/statusbar.jsx
@@ -17,7 +17,7 @@ describe('StatusBar tests', () => {
   test('should render', () => {
     const {element} = render(<StatusBar progress="90" status="Unknown" />);
 
-    expect(element).toMatchSnapshot();
+    expect(element).toBeVisible();
   });
 
   test('should render text content', () => {
@@ -71,7 +71,10 @@ describe('StatusBar tests', () => {
     );
     const progress = getByTestId('progress');
 
-    expect(progress).toHaveStyleRule('background', Theme.severityWarnYellow);
+    expect(progress).toHaveStyleRule(
+      'background',
+      `linear-gradient(90deg, ${Theme.severityWarnYellow} 0%, ${Theme.severityWarnYellow} 100%)`,
+    );
   });
 });