Add ChecksSelection component

assets/js/components/ChecksSelection/ChecksSelection.jsx

@@ -0,0 +1,155 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import { remove, uniq, toggle, groupBy } from '@lib/lists';
+
+import { EOS_LOADING_ANIMATED } from 'eos-icons-react';
+
+import CatalogContainer from '@components/ChecksCatalog/CatalogContainer';
+import ChecksSelectionGroup, {
+  NONE_CHECKED,
+  SOME_CHECKED,
+  ALL_CHECKED,
+  allSelected,
+} from './ChecksSelectionGroup';
+import ChecksSelectionItem from './ChecksSelectionItem';
+import FailAlert from './FailAlert';
+import ExecutionSuggestion from './ExecutionSuggestion';
+
+const isSelected = (selectedChecks, checkID) =>
+  selectedChecks ? selectedChecks.includes(checkID) : false;
+
+const getGroupSelectedState = (checks, selectedChecks) => {
+  if (checks.every(({ id }) => isSelected(selectedChecks, id))) {
+    return ALL_CHECKED;
+  }
+  if (checks.some((check) => isSelected(selectedChecks, check.id))) {
+    return SOME_CHECKED;
+  }
+  return NONE_CHECKED;
+};
+
+const defaultSelectedChecks = [];
+
+function ChecksSelection({
+  className,
+  targetID,
+  catalog,
+  selected = defaultSelectedChecks,
+  loading = false,
+  saving = false,
+  error,
+  success = false,
+  catalogError,
+  hosts,
+  onUpdateCatalog,
+  onStartExecution,
+  onSave,
+  onClear,
+}) {
+  const [selectedChecks, setSelectedChecks] = useState(selected);
+
+  const groupedChecks = Object.entries(groupBy(catalog, 'group')).map(
+    ([group, checks]) => {
+      const groupChecks = checks.map((check) => ({
+        ...check,
+        selected: isSelected(selectedChecks, check.id),
+      }));
+
+      return {
+        group,
+        checks: groupChecks,
+        groupSelected: getGroupSelectedState(checks, selectedChecks),
+      };
+    }
+  );
+
+  useEffect(() => {
+    onUpdateCatalog();
+    onClear();
+  }, [onUpdateCatalog, onClear]);
+
+  const onCheckSelectionGroupChange = (checks, groupSelected) => {
+    const groupChecks = checks.map((check) => check.id);
+    if (allSelected(groupSelected)) {
+      setSelectedChecks(remove(groupChecks, selectedChecks));
+    } else {
+      setSelectedChecks(uniq([...selectedChecks, ...groupChecks]));
+    }
+    onClear();
+  };
+
+  return (
+    <div className={classNames('bg-white rounded p-3', className)}>
+      <CatalogContainer
+        onRefresh={onUpdateCatalog}
+        isCatalogEmpty={catalog.size === 0}
+        catalogError={catalogError}
+        loading={loading}
+      >
+        <div>
+          <div className="pb-4">
+            {groupedChecks?.map(({ group, checks, groupSelected }) => (
+              <ChecksSelectionGroup
+                key={group}
+                group={group}
+                selected={groupSelected}
+                onChange={() =>
+                  onCheckSelectionGroupChange(checks, groupSelected)
+                }
+              >
+                {checks.map((check) => (
+                  <ChecksSelectionItem
+                    key={check.id}
+                    checkID={check.id}
+                    name={check.name}
+                    description={check.description}
+                    premium={check.premium}
+                    selected={check.selected}
+                    onChange={() => {
+                      setSelectedChecks(toggle(check.id, selectedChecks));
+                      onClear();
+                    }}
+                  />
+                ))}
+              </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"
+              disabled={saving}
+              onClick={() => onSave(selectedChecks, targetID)}
+              type="button"
+              data-testid="save-selection-button"
+            >
+              {saving ? (
+                <span className="px-20">
+                  <EOS_LOADING_ANIMATED color="green" size={25} />
+                </span>
+              ) : (
+                'Select Checks for Execution'
+              )}
+            </button>
+            {error && (
+              <FailAlert onClose={onClear}>
+                <p>{error}</p>
+              </FailAlert>
+            )}
+            {success && selectedChecks.length > 0 && (
+              <ExecutionSuggestion
+                targetID={targetID}
+                selectedChecks={selectedChecks}
+                hosts={hosts}
+                onClose={onClear}
+                onStartExecution={onStartExecution}
+              />
+            )}
+          </div>
+        </div>
+      </CatalogContainer>
+    </div>
+  );
+}
+
+export default ChecksSelection;

assets/js/components/ChecksSelection/ChecksSelection.stories.jsx

@@ -0,0 +1,128 @@
+import { faker } from '@faker-js/faker';
+
+import { catalogCheckFactory } from '@lib/test-utils/factories';
+
+import ChecksSelection from './ChecksSelection';
+
+const catalog = [
+  catalogCheckFactory.build({ group: 'Corosync' }),
+  catalogCheckFactory.build({ group: 'Corosync' }),
+  catalogCheckFactory.build({ group: 'Corosync' }),
+  catalogCheckFactory.build({ group: 'Corosync' }),
+  catalogCheckFactory.build({ group: 'Corosync' }),
+  catalogCheckFactory.build({ group: 'SBD' }),
+  catalogCheckFactory.build({ group: 'SBD' }),
+  catalogCheckFactory.build({ group: 'Miscellaneous' }),
+  catalogCheckFactory.build({ group: 'Miscellaneous' }),
+];
+
+const selectedChecks = [
+  catalog[0].id,
+  catalog[1].id,
+  catalog[5].id,
+  catalog[6].id,
+];
+
+const targetID = faker.datatype.uuid();
+
+export default {
+  title: 'ChecksSelection',
+  component: ChecksSelection,
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'CSS classes',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    catalog: {
+      control: 'object',
+      description: 'Catalog data',
+      table: {
+        type: { summary: 'object' },
+      },
+    },
+    targetID: {
+      control: 'text',
+      description: 'Target ID',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    loading: {
+      control: { type: 'boolean' },
+      description: 'Loading state',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: false },
+      },
+    },
+    saving: {
+      control: { type: 'boolean' },
+      description: 'Saving state',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: false },
+      },
+    },
+    error: {
+      control: { type: 'string' },
+      description: 'Saving error',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    success: {
+      control: { type: 'boolean' },
+      description: 'Was the saving successful?',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: false },
+      },
+    },
+    onUpdateCatalog: { action: 'Update catalog' },
+    onStartExecution: { action: 'Start execution' },
+    onSave: { action: 'Save' },
+    onClear: {
+      action: 'Clear',
+      description:
+        'Gets called on mount and when checks are selected. It can be used to clear any external state.',
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    catalog,
+    targetID,
+  },
+};
+
+export const Loading = {
+  args: {
+    ...Default.args,
+    loading: true,
+  },
+};
+
+export const WithSelection = {
+  args: {
+    ...Default.args,
+    selected: selectedChecks,
+  },
+};
+
+export const WithError = {
+  args: {
+    ...WithSelection.args,
+    error: 'Error saving checks selection',
+  },
+};
+
+export const Saving = {
+  args: {
+    ...WithSelection.args,
+    saving: true,
+  },
+};