Refactor Banner component

assets/js/common/Banners/Banner.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import {
+  EOS_CHECK_CIRCLE_OUTLINED,
+  EOS_ERROR_OUTLINED,
+  EOS_INFO_OUTLINED,
+  EOS_WARNING_OUTLINED,
+} from 'eos-icons-react';
+
+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={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">
+          {iconMap[type]}
+          <p className="ml-3 truncate font-medium">
+            <span
+              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>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Banner;

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

@@ -0,0 +1,44 @@
+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',
+  },
+};
+
+export const SuccessBanner = {
+  args: {
+    type: 'success',
+    children: 'SUCCESS',
+  },
+};
+
+export const WarningBanner = {
+  args: {
+    type: 'warning',
+    children: 'WARNING',
+  },
+};
+
+export const ErrorBanner = {
+  args: {
+    type: 'error',
+    children: 'ERROR',
+  },
+};

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

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

assets/js/pages/ClusterSettingsPage/ClusterSettingsPage.jsx

@@ -24,19 +24,19 @@ import BackButton from '@common/BackButton';
 import ClusterInfoBox from '@common/ClusterInfoBox';
 import LoadingBox from '@common/LoadingBox';
 import PageHeader from '@common/PageHeader';
-import WarningBanner from '@common/Banners/WarningBanner';
+import Banner from '@common/Banners/Banner';
 
 import ChecksSelection from '@pages/ChecksSelection';
 import ChecksSelectionHeader from '@pages/ChecksSelection/ChecksSelectionHeader';
 
-const catalogWarningBanner = {
+const catalogBanner = {
   [UNKNOWN_PROVIDER]: (
-    <WarningBanner>
+    <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
       results with caution
-    </WarningBanner>
+    </Banner>
   ),
 };
 
@@ -127,7 +127,7 @@ function ClusterSettingsPage() {
         onSaveSelection={saveSelection}
         onStartExecution={requestChecksExecution}
       />
-      {catalogWarningBanner[provider]}
+      {catalogBanner[provider]}
       <ClusterInfoBox haScenario={type} provider={provider} />
       <ChecksSelection
         catalog={catalog}

assets/js/pages/ExecutionResults/CheckResultDetail/CheckDetailHeader.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import HealthIcon from '@common/HealthIcon';
-import { clusterWarningBanner } from '@pages/ExecutionResults/ExecutionHeader';
+import { clusterBanner } from '@pages/ExecutionResults/ExecutionHeader';
 import CheckResultInfoBox from './CheckResultInfoBox';
 import { isTargetCluster } from '../checksUtils';
 import BackToTargetExecution from './BackToTargetExecution';
@@ -28,7 +28,7 @@ function CheckDetailHeader({
           <span className="font-medium">{checkDescription}</span>
         </h1>
       </div>
-      {targetCluster && clusterWarningBanner[cloudProvider]}
+      {targetCluster && clusterBanner[cloudProvider]}
       <CheckResultInfoBox
         checkID={checkID}
         resultTargetType={resultTargetType}

assets/js/pages/ExecutionResults/ExecutionHeader.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import WarningBanner from '@common/Banners/WarningBanner';
+import Banner from '@common/Banners/Banner';
 
 import { UNKNOWN_PROVIDER } from '@lib/model';
 import ChecksResultFilters from '@pages/ExecutionResults/ChecksResultFilters';
@@ -10,14 +10,14 @@ import { isTargetCluster } from './checksUtils';
 import BackToTargetDetails from './BackToTargetDetails';
 import TargetInfoBox from './TargetInfoBox';
 
-export const clusterWarningBanner = {
+export const clusterBanner = {
   [UNKNOWN_PROVIDER]: (
-    <WarningBanner>
+    <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
       results with caution
-    </WarningBanner>
+    </Banner>
   ),
 };
 
@@ -51,7 +51,7 @@ function ExecutionHeader({
           onSave={onFilterSave}
         />
       </div>
-      {targetCluster && clusterWarningBanner[target.provider]}
+      {targetCluster && clusterBanner[target.provider]}
       <TargetInfoBox targetType={targetType} target={target} />
     </>
   );

assets/js/pages/HostDetailsPage/HostDetails.jsx

@@ -11,7 +11,7 @@ import CleanUpButton from '@common/CleanUpButton';
 import PageHeader from '@common/PageHeader';
 import Table from '@common/Table';
 import Tooltip from '@common/Tooltip';
-import WarningBanner from '@common/Banners/WarningBanner';
+import Banner from '@common/Banners/Banner';
 import ChartsFeatureWrapper from '@common/ChartsFeatureWrapper';
 
 import { subHours } from 'date-fns';
@@ -186,7 +186,7 @@ function HostDetails({
           </div>
         </div>
         {versionWarningMessage && (
-          <WarningBanner>{versionWarningMessage}</WarningBanner>
+          <Banner type="warning">{versionWarningMessage}</Banner>
         )}
         <div className="flex xl:flex-row flex-col">
           <HostSummary