Generalize WarningBanner to Banner

assets/js/common/Banners/Banner.jsx

@@ -1,17 +1,47 @@
 import React from 'react';
+import classNames from 'classnames';
 
-import { EOS_WARNING_OUTLINED } from 'eos-icons-react';
+import {
+  EOS_CHECK_CIRCLE_OUTLINED,
+  EOS_ERROR_OUTLINED,
+  EOS_INFO_OUTLINED,
+  EOS_WARNING_OUTLINED,
+} from 'eos-icons-react';
 
-function Banner({ children }) {
+const INFO = 'info';
+const SUCCESS = 'success';
+const WARNING = 'warning';
+const ERROR = 'error';
+
+const iconMap = {
+  [INFO]: <EOS_INFO_OUTLINED className="fill-gray-500" />,
+  [SUCCESS]: <EOS_CHECK_CIRCLE_OUTLINED className="fill-green-500" />,
+  [WARNING]: <EOS_WARNING_OUTLINED className="fill-yellow-500" />,
+  [ERROR]: <EOS_ERROR_OUTLINED className="fill-red-500" />,
+};
+
+function Banner({ type = INFO, children }) {
   return (
-    <div className="bg-yellow-50 rounded-lg mt-2 mb-2 p-3 border-2 border-yellow-500">
+    <div
+      className={classNames('rounded-lg mt-2 mb-2 p-3 border-2', {
+        'bg-gray-50 border-gray-500': type === INFO,
+        'bg-green-50 border-green-500': type === SUCCESS,
+        'bg-yellow-50 border-yellow-500': type === WARNING,
+        'bg-red-50 border-red-500': type === ERROR,
+      })}
+    >
       <div className="flex flex-wrap items-center justify-between">
         <div className="flex w-0 flex-1 items-center">
-          <EOS_WARNING_OUTLINED className="h-6 w-6 fill-yellow-500" />
+          {iconMap[type]}
           <p className="ml-3 truncate font-medium">
             <span
-              data-testid="warning-banner"
-              className="md:inline text-yellow-500"
+              data-testid="banner"
+              className={classNames('md:inline', {
+                'text-gray-500': type === INFO,
+                'text-green-500': type === SUCCESS,
+                'text-yellow-500': type === WARNING,
+                'text-red-500': type === ERROR,
+              })}
             >
               {children}
             </span>

assets/js/common/Banners/Banner.stories.jsx

@@ -1,18 +1,44 @@
-import React from 'react';
-
 import Banner from './Banner';
 
 export default {
   title: 'Components/Banner',
   component: Banner,
+  argTypes: {
+    type: {
+      description: 'The type of the banner',
+      control: { type: 'radio' },
+      options: ['info', 'success', 'warning', 'error'],
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'info' },
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    children: 'Banner content',
+  },
 };
 
-const warningText = 'DANGER DANGER!';
+export const SuccessBanner = {
+  args: {
+    type: 'success',
+    children: 'SUCCESS',
+  },
+};
 
-export function PopulatedBanner() {
-  return <Banner>{warningText}</Banner>;
-}
+export const WarningBanner = {
+  args: {
+    type: 'warning',
+    children: 'WARNING',
+  },
+};
 
-export function EmptyBanner() {
-  return <Banner />;
-}
+export const ErrorBanner = {
+  args: {
+    type: 'error',
+    children: 'ERROR',
+  },
+};

assets/js/common/Banners/Banner.test.jsx

@@ -5,7 +5,7 @@ import '@testing-library/jest-dom';
 import Banner from './Banner';
 
 describe('Banner', () => {
-  it('should display a warning banner with its text and icon', () => {
+  it('should display a banner with its text and icon', () => {
     render(
       <Banner>
         Warning!
@@ -14,8 +14,8 @@ describe('Banner', () => {
       </Banner>
     );
 
-    expect(screen.getByTestId('warning-banner')).toHaveTextContent(
-      'Warning!You should have a look on this!'
+    expect(screen.getByTestId('banner')).toHaveTextContent(
+      'You should have a look on this!'
     );
   });
 });

assets/js/pages/ClusterSettingsPage/ClusterSettingsPage.jsx

@@ -31,7 +31,7 @@ import ChecksSelectionHeader from '@pages/ChecksSelection/ChecksSelectionHeader'
 
 const catalogBanner = {
   [UNKNOWN_PROVIDER]: (
-    <Banner>
+    <Banner type="warning">
       The following catalog is valid for on-premise bare metal platforms.
       <br />
       If you are running your HANA cluster on a different platform, please use

assets/js/pages/ExecutionResults/ExecutionHeader.jsx

@@ -12,7 +12,7 @@ import TargetInfoBox from './TargetInfoBox';
 
 export const clusterBanner = {
   [UNKNOWN_PROVIDER]: (
-    <Banner>
+    <Banner type="warning">
       The following results are valid for on-premise bare metal platforms.
       <br />
       If you are running your HANA cluster on a different platform, please use

assets/js/pages/HostDetailsPage/HostDetails.jsx

@@ -186,7 +186,7 @@ function HostDetails({
           </div>
         </div>
         {versionWarningMessage && (
-          <Banner>{versionWarningMessage}</Banner>
+          <Banner type="warning">{versionWarningMessage}</Banner>
         )}
         <div className="flex xl:flex-row flex-col">
           <HostSummary