Uniform Target Checks Selection

[nelsonkopliku]

Description

Refactors and uniforms Cluster and Host settings pages.

A new ChecksSelectionHeader component is added and both ClusterSettingsPage and HostSettingsPage make use of it and also declare page structure.

Got rid of HostChecksSelection.

A first step towards a better unification of settings page/checks selection for different targets.
Not yet totally satisfied, but still, a step forward.

Possible followup

We could have something like a ChecksSelectionContainer that looks like this

const [selection, setSelection] = useState([]);
useEffect(() => {
  setSelection(selectedChecks);
}, [selectedChecks]);

return (
  <>
    <ChecksSelectionHeader
      targetID={targetID}
      targetName={targetName}
      backTo={backTo}
      pageHeader={pageHeader}
      isSavingSelection={isSavingSelection}
      itCanStartExecution={canStartExecution(
        selectedChecks,
        isSavingSelection
      )}
      selection={selection}
      onSaveSelection={onSaveSelection}
      onStartExecution={onStartExecution}
    />
    {children}
    <ChecksSelection
      catalog={catalog}
      catalogError={catalogError}
      loading={catalogLoading}
      selectedChecks={selection}
      onUpdateCatalog={onUpdateCatalog}
      onChange={setSelection}
    />
  </>
);

and then in ClusterSettingsPage (and HostSettingsPage) have something like the following

return (
    <ChecksSelectionContainer
      targetID={clusterID}
      targetName={clusterName}
      backTo={
        <BackButton url={`/clusters/${clusterID}`}>
          Back to Cluster Details
        </BackButton>
      }
      pageHeader={
        <PageHeader>
          Cluster Settings for <span className="font-bold">{clusterName}</span>
        </PageHeader>
      }
      isSavingSelection={saving}
      itCanStartExecution={canStartExecution(selectedChecks, saving)}
      selectedChecks={selectedChecks}
      catalog={catalog}
      catalogError={catalogError}
      catalogLoading={catalogLoading}
      onUpdateCatalog={refreshCatalog}
      onSaveSelection={saveSelection}
      onStartExecution={requestChecksExecution}
    >
      {catalogWarningBanner[provider]}
      <ClusterInfoBox haScenario={type} provider={provider} />
    </ChecksSelectionContainer>
);

or even have one single TargetSettingsPage that accepts the target type and behaves accordingly.

deferring at the moment

How was this tested?

Relevant test adjsuted/added and stories updated.

[jamie-suse]

LGTM 🚀

[dottorblaster]

Just a couple of nitpicks and we can go

[dottorblaster]

LGTM