Make ChecksSelectionNew render also a clusterInfoBox

trento-project · Jan 10, 2023 · 4c066ad · 4c066ad
1 parent a0a62dc
commit 4c066ad
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 64 deletions.
diff --git a/assets/js/components/ClusterDetails/ChecksSelectionNew.jsx b/assets/js/components/ClusterDetails/ChecksSelectionNew.jsx
@@ -12,6 +12,7 @@ import { checksSelected } from '@state/actions/cluster';
 
 import CatalogContainer from '@components/ChecksCatalog/CatalogContainer';
 import {
+  InfoBox,
   SavingFailedAlert,
   SuggestTriggeringChecksExecutionAfterSettingsUpdated,
 } from './ClusterSettings';
@@ -97,74 +98,83 @@ function ChecksSelectionNew({ clusterId, cluster }) {
   }, [loading]);
 
   return (
-    <CatalogContainer
-      onRefresh={() => dispatch(updateCatalog())}
-      isCatalogEmpty={catalogData.size === 0}
-      catalogError={catalogError}
-      loading={loading}
-    >
-      <div>
-        <div className="pb-4">
-          {groupSelection?.map(({ group, checks, groupSelected }, idx) => (
-            <ChecksSelectionGroup
-              key={idx}
-              group={group}
-              selected={groupSelected}
-              onChange={() => {
-                const groupChecks = checks.map((check) => check.id);
-                if (allSelected(groupSelected)) {
-                  setSelectedChecks(remove(groupChecks, selectedChecks));
-                } else {
-                  setSelectedChecks(uniq([...selectedChecks, ...groupChecks]));
-                }
-                setLocalSavingSuccess(null);
-              }}
-            >
-              {checks.map((check) => (
-                <ChecksSelectionItem
-                  key={check.id}
-                  checkID={check.id}
-                  name={check.name}
-                  description={check.description}
-                  selected={check.selected}
+    <div>
+      <InfoBox haScenario={cluster.type} provider={cluster.provider} />
+      <div data-testid="catalog-container" className="bg-white rounded p-3">
+        <CatalogContainer
+          onRefresh={() => dispatch(updateCatalog())}
+          isCatalogEmpty={catalogData.size === 0}
+          catalogError={catalogError}
+          loading={loading}
+        >
+          <div>
+            <div className="pb-4">
+              {groupSelection?.map(({ group, checks, groupSelected }, idx) => (
+                <ChecksSelectionGroup
+                  key={idx}
+                  group={group}
+                  selected={groupSelected}
                   onChange={() => {
-                    setSelectedChecks(toggle(check.id, selectedChecks));
+                    const groupChecks = checks.map((check) => check.id);
+                    if (allSelected(groupSelected)) {
+                      setSelectedChecks(remove(groupChecks, selectedChecks));
+                    } else {
+                      setSelectedChecks(
+                        uniq([...selectedChecks, ...groupChecks])
+                      );
+                    }
                     setLocalSavingSuccess(null);
                   }}
-                />
+                >
+                  {checks.map((check) => (
+                    <ChecksSelectionItem
+                      key={check.id}
+                      checkID={check.id}
+                      name={check.name}
+                      description={check.description}
+                      selected={check.selected}
+                      onChange={() => {
+                        setSelectedChecks(toggle(check.id, selectedChecks));
+                        setLocalSavingSuccess(null);
+                      }}
+                    />
+                  ))}
+                </ChecksSelectionGroup>
               ))}
-            </ChecksSelectionGroup>
-          ))}
-        </div>
-        <div className="place-items-end flex">
-          <button
-            className="flex justify-center items-center bg-jungle-green-500 hover:opacity-75 text-white font-bold py-2 px-4 rounded"
-            onClick={() => dispatch(checksSelected(selectedChecks, clusterId))}
-            type="button"
-          >
-            {saving ? (
-              <span className="px-20">
-                <EOS_LOADING_ANIMATED color="green" size={25} />
-              </span>
-            ) : (
-              'Select Checks for Execution'
-            )}
-          </button>
-          {localSavingError && (
-            <SavingFailedAlert onClose={() => setLocalSavingError(null)}>
-              <p>{savingError}</p>
-            </SavingFailedAlert>
-          )}
-          {localSavingSuccess && selectedChecks.length > 0 && (
-            <SuggestTriggeringChecksExecutionAfterSettingsUpdated
-              clusterId={clusterId}
-              usingNewChecksEngine
-              onClose={() => setLocalSavingSuccess(null)}
-            />
-          )}
-        </div>
+            </div>
+            <div className="place-items-end flex">
+              <button
+                className="flex justify-center items-center bg-jungle-green-500 hover:opacity-75 text-white font-bold py-2 px-4 rounded"
+                onClick={() =>
+                  dispatch(checksSelected(selectedChecks, clusterId))
+                }
+                type="button"
+              >
+                {saving ? (
+                  <span className="px-20">
+                    <EOS_LOADING_ANIMATED color="green" size={25} />
+                  </span>
+                ) : (
+                  'Select Checks for Execution'
+                )}
+              </button>
+              {localSavingError && (
+                <SavingFailedAlert onClose={() => setLocalSavingError(null)}>
+                  <p>{savingError}</p>
+                </SavingFailedAlert>
+              )}
+              {localSavingSuccess && selectedChecks.length > 0 && (
+                <SuggestTriggeringChecksExecutionAfterSettingsUpdated
+                  clusterId={clusterId}
+                  usingNewChecksEngine
+                  onClose={() => setLocalSavingSuccess(null)}
+                />
+              )}
+            </div>
+          </div>
+        </CatalogContainer>
       </div>
-    </CatalogContainer>
+    </div>
   );
 }
 

diff --git a/assets/js/components/ClusterDetails/ChecksSelectionNew.test.jsx b/assets/js/components/ClusterDetails/ChecksSelectionNew.test.jsx
@@ -11,6 +11,29 @@ import { catalogCheckFactory, clusterFactory } from '@lib/test-utils/factories';
 import ChecksSelectionNew from './ChecksSelectionNew';
 
 describe('ClusterDetails ChecksSelectionNew component', () => {
+  it('should render the cluster info box and the catalog container', async () => {
+    const group = faker.animal.cat();
+    const catalog = catalogCheckFactory.buildList(2, { group });
+    const cluster = clusterFactory.build({ provider: 'azure' });
+
+    const initialState = {
+      catalogNew: { loading: false, data: catalog, error: null },
+      clusterChecksSelection: {},
+    };
+    const [statefulChecksSelection] = withState(
+      <ChecksSelectionNew clusterId={cluster.id} cluster={cluster} />,
+      initialState
+    );
+
+    renderWithRouter(statefulChecksSelection);
+
+    const clusterInfoBox = screen.getByTestId('cluster-info-box');
+
+    expect(clusterInfoBox).toBeVisible();
+    expect(clusterInfoBox).toHaveTextContent('Azure');
+    expect(screen.getByTestId('catalog-container')).toBeVisible();
+  });
+
   it('should change individual check switches accordingly if the group switch is clicked', async () => {
     const user = userEvent.setup();
 

diff --git a/assets/js/components/ClusterDetails/ClusterInfoBox.jsx b/assets/js/components/ClusterDetails/ClusterInfoBox.jsx
@@ -11,7 +11,10 @@ const haScenarioToString = {
 // eslint-disable-next-line import/prefer-default-export
 export function ClusterInfoBox({ haScenario, provider }) {
   return (
-    <div className="tn-cluster-details w-full my-4 mr-4 bg-white shadow rounded-lg px-8 py-4">
+    <div
+      data-testid="cluster-info-box"
+      className="tn-cluster-details w-full my-4 mr-4 bg-white shadow rounded-lg px-8 py-4"
+    >
       <ListView
         className="grid-flow-row"
         titleClassName="text-lg"