diff --git a/assets/js/components/ClusterDetails/ChecksSelectionNew.jsx b/assets/js/components/ClusterDetails/ChecksSelectionNew.jsx index b8c5b1bd69..7ad9141a54 100644 --- a/assets/js/components/ClusterDetails/ChecksSelectionNew.jsx +++ b/assets/js/components/ClusterDetails/ChecksSelectionNew.jsx @@ -12,7 +12,6 @@ import { checksSelected } from '@state/actions/cluster'; import CatalogContainer from '@components/ChecksCatalog/CatalogContainer'; import { - InfoBox, SavingFailedAlert, SuggestTriggeringChecksExecutionAfterSettingsUpdated, } from './ClusterSettings'; @@ -98,82 +97,80 @@ function ChecksSelectionNew({ clusterId, cluster }) { }, [loading]); return ( -
- -
- dispatch(updateCatalog())} - isCatalogEmpty={catalogData.size === 0} - catalogError={catalogError} - loading={loading} - > -
-
- {groupSelection?.map(({ group, checks, groupSelected }, idx) => ( - { - const groupChecks = checks.map((check) => check.id); - if (allSelected(groupSelected)) { - setSelectedChecks(remove(groupChecks, selectedChecks)); - } else { - setSelectedChecks( - uniq([...selectedChecks, ...groupChecks]) - ); - } - setLocalSavingSuccess(null); - }} - > - {checks.map((check) => ( - { - setSelectedChecks(toggle(check.id, selectedChecks)); - setLocalSavingSuccess(null); - }} - /> - ))} - - ))} -
-
- - {localSavingError && ( - setLocalSavingError(null)}> -

{savingError}

- - )} - {localSavingSuccess && selectedChecks.length > 0 && ( - setLocalSavingSuccess(null)} - /> + {checks.map((check) => ( + { + setSelectedChecks(toggle(check.id, selectedChecks)); + setLocalSavingSuccess(null); + }} + /> + ))} + + ))} +
+
+
+ + {localSavingError && ( + setLocalSavingError(null)}> +

{savingError}

+ + )} + {localSavingSuccess && selectedChecks.length > 0 && ( + setLocalSavingSuccess(null)} + /> + )}
- -
+
+ ); } diff --git a/assets/js/components/ClusterDetails/ChecksSelectionNew.test.jsx b/assets/js/components/ClusterDetails/ChecksSelectionNew.test.jsx index 6587fe31db..7d66f752b5 100644 --- a/assets/js/components/ClusterDetails/ChecksSelectionNew.test.jsx +++ b/assets/js/components/ClusterDetails/ChecksSelectionNew.test.jsx @@ -11,29 +11,6 @@ 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( - , - 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(); @@ -52,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(); @@ -96,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(); @@ -140,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(); diff --git a/assets/js/components/ClusterDetails/ClusterInfoBox.jsx b/assets/js/components/ClusterDetails/ClusterInfoBox.jsx index f13dbe004c..9b5f1097c8 100644 --- a/assets/js/components/ClusterDetails/ClusterInfoBox.jsx +++ b/assets/js/components/ClusterDetails/ClusterInfoBox.jsx @@ -11,10 +11,7 @@ const haScenarioToString = { // eslint-disable-next-line import/prefer-default-export export function ClusterInfoBox({ haScenario, provider }) { return ( -
+
+ ), + 'Connection Settings': ( + + ), + }; + if (!cluster) { return
Loading...
; } return (
- + Back to Cluster Details

- - {usingNewChecksEngine ? 'Checks Selection' : 'Cluster Settings'} for{' '} - {' '} + Cluster Settings for{' '} {getClusterName(cluster)}

- {usingNewChecksEngine ? ( - - ) : ( - - )} -
- ); -} - -function RunnerSettings({ clusterID, cluster }) { - const tabsSettings = { - 'Checks Selection': ( - - ), - 'Connection Settings': ( - - ), - }; - - return ( - - - {Object.keys(tabsSettings).map((tabTitle) => ( - - classNames( - 'w-full py-2.5 text-sm leading-5 font-medium rounded', - 'focus:outline-none', - selected - ? 'bg-white shadow' - : 'text-gray-800 hover:bg-white/[0.12]' - ) - } - > - {tabTitle} - - ))} - - - - {Object.entries(tabsSettings).map(([tabTitle, tabContent]) => ( - - {tabContent} - - ))} - - - ); -} - -export function InfoBox({ haScenario, provider }) { - return ( -
- - {provider === UNKNOWN_PROVIDER && ( - - The following catalog is valid for on-premise bare metal platforms. -
- If you are running your HANA cluster on a different platform, please - use results with caution - - )} + + + {Object.keys(tabsSettings).map((tabTitle) => ( + + classNames( + 'w-full py-2.5 text-sm leading-5 font-medium rounded', + 'focus:outline-none', + selected + ? 'bg-white shadow' + : 'text-gray-800 hover:bg-white/[0.12]' + ) + } + > + {tabTitle} + + ))} + + + {cluster.provider === UNKNOWN_PROVIDER && ( + + The following catalog is valid for on-premise bare metal platforms. +
+ If you are running your HANA cluster on a different platform, please + use results with caution + + )} + + {Object.entries(tabsSettings).map(([tabTitle, tabContent]) => ( + + {tabContent} + + ))} + +
); } diff --git a/assets/js/components/ClusterDetails/ClusterSettingsNew.jsx b/assets/js/components/ClusterDetails/ClusterSettingsNew.jsx new file mode 100644 index 0000000000..adc3ddee33 --- /dev/null +++ b/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
Loading...
; + } + + return ( +
+ + Back to Cluster Details + +
+

+ Checks Selection for {' '} + + {getClusterName(cluster)} + +

+
+ + {cluster.provider === UNKNOWN_PROVIDER && ( + + The following catalog is valid for on-premise bare metal platforms. +
+ If you are running your HANA cluster on a different platform, please + use results with caution + + )} + +
+ ); +} diff --git a/assets/js/components/ClusterDetails/ClusterSettingsNew.test.jsx b/assets/js/components/ClusterDetails/ClusterSettingsNew.test.jsx new file mode 100644 index 0000000000..3e9fd8a7b4 --- /dev/null +++ b/assets/js/components/ClusterDetails/ClusterSettingsNew.test.jsx @@ -0,0 +1,45 @@ +import React from 'react'; + +import { screen, render } from '@testing-library/react'; +import '@testing-library/jest-dom'; + +import { faker } from '@faker-js/faker'; +import { withExtendedDefaultState } 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] = withExtendedDefaultState( + , + { catalogNew: { loading: false, data: catalog, error: null } } + ); + + const { + clusters: [, , , { id: clusterId }], + } = state.getState().clustersList; + + render( + + + + + + ); + + 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(); + }); +}); diff --git a/assets/js/components/ClusterDetails/index.js b/assets/js/components/ClusterDetails/index.js index 9b0a5b6fe8..9bf96b2307 100644 --- a/assets/js/components/ClusterDetails/index.js +++ b/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'; diff --git a/assets/js/lib/test-utils/index.jsx b/assets/js/lib/test-utils/index.jsx index d0746fcbf0..5a50c0985f 100644 --- a/assets/js/lib/test-utils/index.jsx +++ b/assets/js/lib/test-utils/index.jsx @@ -26,6 +26,7 @@ const defaultInitialState = { (sapSystem) => sapSystem.database_instances ), }, + clusterChecksSelection: {}, }; export const withState = (component, initialState = {}) => { @@ -49,6 +50,12 @@ export const renderWithRouter = (ui, { route = '/' } = {}) => { }; }; +export const withExtendedDefaultState = (component, additionalState = {}) => + withState(component, { + ...defaultInitialState, + ...additionalState, + }); + export async function recordSaga(saga, initialAction) { const dispatched = []; diff --git a/assets/js/trento.jsx b/assets/js/trento.jsx index 9793862337..c9962a7ab0 100644 --- a/assets/js/trento.jsx +++ b/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() { /> } + element={} />