Skip to content

Commit

Permalink
Address review feedbacks
Browse files Browse the repository at this point in the history
  • Loading branch information
@nelsonkopliku
nelsonkopliku committed Jan 10, 2023
1 parent ab1a6ae commit d9fa63d
Show file tree
Hide file tree
Showing 9 changed files with 236 additions and 188 deletions.
145 changes: 71 additions & 74 deletions assets/js/components/ClusterDetails/ChecksSelectionNew.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { checksSelected } from '@state/actions/cluster';

import CatalogContainer from '@components/ChecksCatalog/CatalogContainer';
import {
InfoBox,
SavingFailedAlert,
SuggestTriggeringChecksExecutionAfterSettingsUpdated,
} from './ClusterSettings';
Expand Down Expand Up @@ -98,82 +97,80 @@ function ChecksSelectionNew({ clusterId, cluster }) {
}, [loading]);

return (
<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={() => {
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"
<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);
}}
>
{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)}
/>
{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"
>
{saving ? (
<span className="px-20">
<EOS_LOADING_ANIMATED color="green" size={25} />
</span>
) : (
'Select Checks for Execution'
)}
</div>
</button>
{localSavingError && (
<SavingFailedAlert onClose={() => setLocalSavingError(null)}>
<p>{savingError}</p>
</SavingFailedAlert>
)}
{localSavingSuccess && selectedChecks.length > 0 && (
<SuggestTriggeringChecksExecutionAfterSettingsUpdated
clusterId={clusterId}
usingNewChecksEngine
onClose={() => setLocalSavingSuccess(null)}
/>
)}
</div>
</CatalogContainer>
</div>
</div>
</CatalogContainer>
</div>
);
}
Expand Down
35 changes: 7 additions & 28 deletions assets/js/components/ClusterDetails/ChecksSelectionNew.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
<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();

Expand All @@ -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();
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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();
Expand Down
5 changes: 1 addition & 4 deletions assets/js/components/ClusterDetails/ClusterInfoBox.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,7 @@ const haScenarioToString = {
// eslint-disable-next-line import/prefer-default-export
export function ClusterInfoBox({ haScenario, provider }) {
return (
<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"
>
<div 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"
Expand Down
Loading

0 comments on commit d9fa63d

Please sign in to comment.