Refactor warning banners usage

trento-project · May 2, 2023 · 7e8ee13 · 7e8ee13
1 parent 2bbb5e7
commit 7e8ee13
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 93 deletions.
diff --git a/assets/js/components/Banners/WarningBanner.jsx b/assets/js/components/Banners/WarningBanner.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { EOS_WARNING_OUTLINED } from 'eos-icons-react';
-import { UNKNOWN_PROVIDER } from '@lib/model';
 
 function WarningBanner({ children }) {
   return (
@@ -23,49 +22,4 @@ function WarningBanner({ children }) {
   );
 }
 
-const providerWarningBanners = {
-  [UNKNOWN_PROVIDER]: {
-    default: (
-      <WarningBanner>
-        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>
-    ),
-    result: (
-      <WarningBanner>
-        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>
-    ),
-  },
-  vmware: {
-    default: (
-      <WarningBanner>
-        Configuration checks for HANA scale-up performance optimized clusters on
-        VMware are still in experimental phase. Please use results with caution.
-      </WarningBanner>
-    ),
-  },
-};
-
-export const getProviderWarningBanner = (provider) => {
-  const providerBanners = providerWarningBanners[provider];
-  if (!providerBanners) {
-    return null;
-  }
-  return providerBanners.default;
-};
-
-export const getResultProviderWarningBanner = (provider) => {
-  const providerBanners = providerWarningBanners[provider];
-  if (!providerBanners) {
-    return null;
-  }
-  return providerBanners.result || providerBanners.default;
-};
-
 export default WarningBanner;
diff --git a/assets/js/components/Banners/WarningBanner.test.jsx b/assets/js/components/Banners/WarningBanner.test.jsx
@@ -2,10 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
-import WarningBanner, {
-  getProviderWarningBanner,
-  getResultProviderWarningBanner,
-} from './WarningBanner';
+import WarningBanner from './WarningBanner';
 
 describe('WarningBanner', () => {
   it('should display a warning banner with its text and icon', () => {
@@ -21,35 +18,4 @@ describe('WarningBanner', () => {
       'Warning!You should have a look on this!'
     );
   });
-
-  describe('Banner retrieving', () => {
-    it('should retrieve the default banner', () => {
-      const unknownProviderBanner = getProviderWarningBanner('unknown');
-      const vmwareProviderBanner = getProviderWarningBanner('vmware');
-
-      expect(unknownProviderBanner).toBeTruthy();
-      expect(vmwareProviderBanner).toBeTruthy();
-    });
-
-    it('should retrieve the result specific banner', () => {
-      const unknownProviderBannerForResults =
-        getResultProviderWarningBanner('unknown');
-
-      expect(unknownProviderBannerForResults).toBeTruthy();
-    });
-
-    it('should fallback to the default banner when a result specific one is not available', () => {
-      const vmwareProviderBanner = getResultProviderWarningBanner('vmware');
-
-      expect(vmwareProviderBanner).toBeTruthy();
-    });
-
-    it('should not retrieve a banner for a not defined provider option', () => {
-      const notABanner = getProviderWarningBanner('not-a-provider');
-      const notAResultBanner = getResultProviderWarningBanner('not-a-provider');
-
-      expect(notABanner).toBeFalsy();
-      expect(notAResultBanner).toBeFalsy();
-    });
-  });
 });
diff --git a/assets/js/components/ClusterDetails/ClusterSettings.jsx b/assets/js/components/ClusterDetails/ClusterSettings.jsx
@@ -12,7 +12,8 @@ import { getClusterName } from '@components/ClusterLink';
 import { ClusterInfoBox } from '@components/ClusterDetails';
 
 import { getCluster, getClusterHostIDs } from '@state/selectors/cluster';
-import { getProviderWarningBanner } from '@components/Banners/WarningBanner';
+import WarningBanner from '@components/Banners/WarningBanner';
+import { UNKNOWN_PROVIDER, VMWARE_PROVIDER } from '@lib/model';
 
 export function ClusterSettings() {
   const { clusterID } = useParams();
@@ -23,8 +24,6 @@ export function ClusterSettings() {
     return <div>Loading...</div>;
   }
 
-  const warning = getProviderWarningBanner(cluster.provider);
-
   return (
     <div className="w-full px-2 sm:px-0">
       <BackButton url={`/clusters/${clusterID}`}>
@@ -34,7 +33,21 @@ export function ClusterSettings() {
         Cluster Settings for{' '}
         <span className="font-bold">{getClusterName(cluster)}</span>
       </PageHeader>
-      {warning}
+      {cluster.provider === UNKNOWN_PROVIDER && (
+        <WarningBanner>
+          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>
+      )}
+      {cluster.provider === VMWARE_PROVIDER && (
+        <WarningBanner>
+          Configuration checks for HANA scale-up performance optimized clusters
+          on VMware are still in experimental phase. Please use results with
+          caution.
+        </WarningBanner>
+      )}
       <ClusterInfoBox haScenario={cluster.type} provider={cluster.provider} />
       <ChecksSelection clusterId={clusterID} cluster={cluster} />
     </div>

diff --git a/assets/js/components/ExecutionResults/CheckResultDetail/CheckDetailHeader.jsx b/assets/js/components/ExecutionResults/CheckResultDetail/CheckDetailHeader.jsx
@@ -2,7 +2,8 @@ import React from 'react';
 
 import BackButton from '@components/BackButton';
 import HealthIcon from '@components/Health/HealthIcon';
-import { getResultProviderWarningBanner } from '@components/Banners/WarningBanner';
+import WarningBanner from '@components/Banners/WarningBanner';
+import { UNKNOWN_PROVIDER, VMWARE_PROVIDER } from '@lib/model';
 import CheckResultInfoBox from './CheckResultInfoBox';
 
 function CheckDetailHeader({
@@ -14,8 +15,6 @@ function CheckDetailHeader({
   cloudProvider,
   result,
 }) {
-  const warning = getResultProviderWarningBanner(cloudProvider);
-
   return (
     <>
       <BackButton url={`/clusters/${clusterID}/executions/last`}>
@@ -29,7 +28,21 @@ function CheckDetailHeader({
           <span className="font-medium">{checkDescription}</span>
         </h1>
       </div>
-      {warning}
+      {cloudProvider === UNKNOWN_PROVIDER && (
+        <WarningBanner>
+          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>
+      )}
+      {cloudProvider === VMWARE_PROVIDER && (
+        <WarningBanner>
+          Configuration checks for HANA scale-up performance optimized clusters
+          on VMware are still in experimental phase. Please use results with
+          caution.
+        </WarningBanner>
+      )}
       <CheckResultInfoBox
         checkID={checkID}
         targetType={targetType}

diff --git a/assets/js/components/ExecutionResults/ExecutionHeader.jsx b/assets/js/components/ExecutionResults/ExecutionHeader.jsx
@@ -5,7 +5,8 @@ import BackButton from '@components/BackButton';
 import { ClusterInfoBox } from '@components/ClusterDetails';
 
 import ChecksResultFilters from '@components/ExecutionResults/ChecksResultFilters';
-import { getResultProviderWarningBanner } from '@components/Banners/WarningBanner';
+import { UNKNOWN_PROVIDER, VMWARE_PROVIDER } from '@lib/model';
+import WarningBanner from '@components/Banners/WarningBanner';
 
 function ExecutionHeader({
   clusterID,
@@ -14,8 +15,6 @@ function ExecutionHeader({
   clusterScenario,
   onFilterChange = () => {},
 }) {
-  const warning = getResultProviderWarningBanner(cloudProvider);
-
   return (
     <>
       <BackButton url={`/clusters/${clusterID}`}>
@@ -34,7 +33,21 @@ function ExecutionHeader({
         </h1>
         <ChecksResultFilters onChange={onFilterChange} />
       </div>
-      {warning}
+      {cloudProvider === UNKNOWN_PROVIDER && (
+        <WarningBanner>
+          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>
+      )}
+      {cloudProvider === VMWARE_PROVIDER && (
+        <WarningBanner>
+          Configuration checks for HANA scale-up performance optimized clusters
+          on VMware are still in experimental phase. Please use results with
+          caution.
+        </WarningBanner>
+      )}
       <ClusterInfoBox haScenario={clusterScenario} provider={cloudProvider} />
     </>
   );

diff --git a/assets/js/lib/model/index.js b/assets/js/lib/model/index.js
@@ -11,3 +11,4 @@ export const isValidTargetType = (targetType) =>
   [TARGET_HOST, TARGET_CLUSTER].includes(targetType);
 
 export const UNKNOWN_PROVIDER = 'unknown';
+export const VMWARE_PROVIDER = 'vmware';
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,3 +11,4 @@ export const isValidTargetType = (targetType) =>
		[TARGET_HOST, TARGET_CLUSTER].includes(targetType);

		export const UNKNOWN_PROVIDER = 'unknown';
		export const VMWARE_PROVIDER = 'vmware';