Remove connection settings when using wanda

assets/js/components/ClusterDetails/ChecksSelectionNew.jsx

@@ -97,74 +97,81 @@ 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);
-              }}
+    <div 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={() => {
+                  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>
+            ))}
+          </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"
+              data-testid="save-selection-button"
             >
-              {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>
-          ))}
-        </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'
+              {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)}
+              />
             )}
-          </button>
-          {localSavingError && (
-            <SavingFailedAlert onClose={() => setLocalSavingError(null)}>
-              <p>{savingError}</p>
-            </SavingFailedAlert>
-          )}
-          {localSavingSuccess && selectedChecks.length > 0 && (
-            <SuggestTriggeringChecksExecutionAfterSettingsUpdated
-              clusterId={clusterId}
-              usingNewChecksEngine
-              onClose={() => setLocalSavingSuccess(null)}
-            />
-          )}
+          </div>
         </div>
-      </div>
-    </CatalogContainer>
+      </CatalogContainer>
+    </div>
   );
 }
 

assets/js/components/ClusterDetails/ChecksSelectionNew.test.jsx

@@ -29,9 +29,9 @@ describe('ClusterDetails ChecksSelectionNew component', () => {
 
     await act(async () => renderWithRouter(statefulChecksSelection));
 
-    const groupItem = await waitFor(() => screen.getByRole('heading'));
+    const groupItem = await waitFor(() => screen.getByText(group));
 
-    await user.click(groupItem.parentNode);
+    await user.click(groupItem);
     let switches = screen.getAllByRole('switch');
 
     expect(switches[0]).not.toBeChecked();
@@ -73,9 +73,9 @@ describe('ClusterDetails ChecksSelectionNew component', () => {
 
     await act(async () => renderWithRouter(statefulChecksSelection));
 
-    const groupItem = await waitFor(() => screen.getByRole('heading'));
+    const groupItem = await waitFor(() => screen.getByText(group));
 
-    await user.click(groupItem.parentNode);
+    await user.click(groupItem);
     let switches = screen.getAllByRole('switch');
 
     expect(switches[0]).toBeChecked();
@@ -117,7 +117,9 @@ describe('ClusterDetails ChecksSelectionNew component', () => {
 
     await waitFor(() => screen.getAllByRole('heading'));
 
-    const saveButton = screen.getByRole('button');
+    const saveButton = screen.getByRole('button', {
+      name: 'Select Checks for Execution',
+    });
     await user.click(saveButton);
 
     const actions = store.getActions();

assets/js/components/ClusterDetails/ClusterSettings.jsx

@@ -8,7 +8,6 @@ import classNames from 'classnames';
 import BackButton from '@components/BackButton';
 import { Tab } from '@headlessui/react';
 import { ChecksSelection } from '@components/ClusterDetails/ChecksSelection';
-import ChecksSelectionNew from '@components/ClusterDetails/ChecksSelectionNew';
 import { getCluster } from '@state/selectors';
 import TriggerChecksExecutionRequest from '@components/TriggerChecksExecutionRequest';
 import { getClusterName } from '@components/ClusterLink';
@@ -18,15 +17,13 @@ import { truncatedClusterNameClasses } from './ClusterDetails';
 
 export const UNKNOWN_PROVIDER = 'unknown';
 
-export function ClusterSettings({ usingNewChecksEngine = false }) {
+export function ClusterSettings() {
   const { clusterID } = useParams();
 
   const cluster = useSelector(getCluster(clusterID));
 
   const tabsSettings = {
-    'Checks Selection': usingNewChecksEngine ? (
-      <ChecksSelectionNew clusterId={clusterID} cluster={cluster} />
-    ) : (
+    'Checks Selection': (
       <ChecksSelection clusterId={clusterID} cluster={cluster} />
     ),
     'Connection Settings': (
@@ -40,13 +37,7 @@ export function ClusterSettings({ usingNewChecksEngine = false }) {
 
   return (
     <div className="w-full px-2 sm:px-0">
-      <BackButton
-        url={
-          usingNewChecksEngine
-            ? `/clusters_new/${clusterID}`
-            : `/clusters/${clusterID}`
-        }
-      >
+      <BackButton url={`/clusters/${clusterID}`}>
         Back to Cluster Details
       </BackButton>
       <div className="flex mb-2">

assets/js/components/ClusterDetails/ClusterSettingsNew.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+
+import { getCluster } from '@state/selectors';
+
+import BackButton from '@components/BackButton';
+import { getClusterName } from '@components/ClusterLink';
+import { ClusterInfoBox } from '@components/ClusterDetails';
+import WarningBanner from '@components/Banners/WarningBanner';
+import ChecksSelectionNew from './ChecksSelectionNew';
+import { UNKNOWN_PROVIDER } from './ClusterSettings';
+
+export function ClusterSettingsNew() {
+  const { clusterID } = useParams();
+
+  const cluster = useSelector(getCluster(clusterID));
+
+  if (!cluster) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div className="w-full px-2 sm:px-0">
+      <BackButton url={`/clusters_new/${clusterID}`}>
+        Back to Cluster Details
+      </BackButton>
+      <div className="flex mb-2">
+        <h1 className="text-3xl w-1/2">
+          <span className="font-medium">Checks Selection for </span>{' '}
+          <span className="font-bold truncate w-60 inline-block align-top">
+            {getClusterName(cluster)}
+          </span>
+        </h1>
+      </div>
+      <ClusterInfoBox haScenario={cluster.type} provider={cluster.provider} />
+      {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>
+      )}
+      <ChecksSelectionNew clusterId={clusterID} cluster={cluster} />
+    </div>
+  );
+}

assets/js/components/ClusterDetails/ClusterSettingsNew.test.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { screen, render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { faker } from '@faker-js/faker';
+import { withState, defaultInitialState } from '@lib/test-utils';
+import { catalogCheckFactory } from '@lib/test-utils/factories';
+
+import { Route, Routes, MemoryRouter } from 'react-router-dom';
+import { ClusterSettingsNew } from './ClusterSettingsNew';
+
+describe('ClusterDetails ClusterSettingsNew 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 [StatefulChecksSettingsNew, state] = withState(
+      <ClusterSettingsNew />,
+      {
+        ...defaultInitialState,
+        catalogNew: { loading: false, data: catalog, error: null }
+      }
+    );
+
+    const {
+      clusters: [, , , { id: clusterID }],
+    } = state.getState().clustersList;
+
+    render(
+      <MemoryRouter initialEntries={[`/clusters_new/${clusterID}/settings`]}>
+        <Routes>
+          <Route
+            path="clusters_new/:clusterID/settings"
+            element={StatefulChecksSettingsNew}
+          />
+        </Routes>
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText('Provider')).toBeVisible();
+    expect(screen.getByText('Azure')).toBeVisible();
+    expect(screen.getByText(group)).toBeVisible();
+    expect(
+      screen.getByRole('button', { name: 'Select Checks for Execution' })
+    ).toBeVisible();
+  });
+});

assets/js/components/ClusterDetails/index.js

@@ -7,3 +7,4 @@ export { ClusterInfoBox } from './ClusterInfoBox';
 
 export default ClusterDetails;
 export { ClusterDetailsNew } from './ClusterDetailsNew';
+export { ClusterSettingsNew } from './ClusterSettingsNew';

assets/js/lib/test-utils/index.jsx

@@ -14,7 +14,7 @@ import sapSystems from './data/sapSystems';
 const middlewares = [];
 const mockStore = configureStore(middlewares);
 
-const defaultInitialState = {
+export const defaultInitialState = {
   hostsList: { hosts },
   clustersList: { clusters },
   sapSystemsList: {
@@ -26,6 +26,7 @@ const defaultInitialState = {
       (sapSystem) => sapSystem.database_instances
     ),
   },
+  clusterChecksSelection: {},
 };
 
 export const withState = (component, initialState = {}) => {

assets/js/trento.jsx

@@ -16,6 +16,7 @@ import ClustersList from '@components/ClustersList';
 import ClusterDetails, {
   ClusterSettings,
   ClusterDetailsNew,
+  ClusterSettingsNew,
 } from '@components/ClusterDetails';
 import ChecksResults from '@components/ChecksResults';
 import { ExecutionResultsPage } from '@components/ExecutionResults';
@@ -60,7 +61,7 @@ function App() {
               />
               <Route
                 path="clusters_new/:clusterID/settings"
-                element={<ClusterSettings usingNewChecksEngine />}
+                element={<ClusterSettingsNew />}
               />
               <Route
                 path="clusters/:clusterID/checks/results"