Katello/katello

View on GitHub
webpack/scenes/ContentViews/Details/Versions/Delete/RemoveSteps/CVEnvironmentSelectionForm.js

Summary

Maintainability
C
1 day
Test Coverage
import React, { useContext, useState } from 'react';
import useDeepCompareEffect from 'use-deep-compare-effect';
import { Alert, Checkbox, EmptyState, EmptyStateVariant, Title, EmptyStateBody, AlertActionCloseButton } from '@patternfly/react-core';
import { TableVariant, TableComposable, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
import { translate as __ } from 'foremanReact/common/I18n';
import DeleteContext from '../DeleteContext';

const CVEnvironmentSelectionForm = () => {
  const [alertDismissed, setAlertDismissed] = useState(false);
  const {
    versionNameToRemove, versionEnvironments, selectedEnvSet,
    setAffectedActivationKeys, setAffectedHosts, deleteFlow,
    removeDeletionFlow, setRemoveDeletionFlow,
  } = useContext(DeleteContext);

  const areAllSelected = () => versionEnvironments.every(env => selectedEnvSet.has(env.id));

  const onSelect = (_event, isSelected, rowId) => {
    if (isSelected) {
      selectedEnvSet.add(rowId);
    } else {
      selectedEnvSet.delete(rowId);
    }
  };

  // Based on env selected for removal, decide if we need to reassign hosts and activation keys.
  useDeepCompareEffect(() => {
    const selectedEnv = versionEnvironments.filter(env => selectedEnvSet.has(env.id));
    setAffectedActivationKeys(!!(selectedEnv.filter(env => env.activation_key_count > 0).length));
    setAffectedHosts(!!(selectedEnv.filter(env => env.host_count > 0).length));
  }, [setAffectedActivationKeys, setAffectedHosts,
    versionEnvironments, selectedEnvSet, selectedEnvSet.size]);

  const onSelectAll = (event, isSelected) => {
    if (!isSelected) {
      setRemoveDeletionFlow(false);
      selectedEnvSet.clear();
    } else {
      versionEnvironments.forEach(env => selectedEnvSet.add(env.id));
    }
  };

  const columnHeaders = [
    __('Environment'),
    __('Hosts'),
    __('Activation keys'),
  ];

  const versionDeleteInfo = __(`Version ${versionNameToRemove} will be deleted from the listed environments. It will no longer be available for promotion.`);
  const versionRemovalInfo = __('Removing this version from all environments will not delete the version. Version will still be available for later promotion.');
  const versionEnvironmentsEmptyInfo = __(`Version ${versionNameToRemove} has not been promoted to any environments. ` +
    'You can delete this version completely and it will no longer be available for promotion.');
  return (
    <>
      {!alertDismissed && deleteFlow &&
        <Alert
          ouiaId="delete-version-info-alert"
          variant="warning"
          isInline
          title={__('Warning')}
          actionClose={<AlertActionCloseButton onClose={() => setAlertDismissed(true)} />}
        >
          <p style={{ marginBottom: '0.5em' }}>{versionDeleteInfo}</p>
        </Alert>
      }
      {(!deleteFlow &&
        (removeDeletionFlow || areAllSelected() || versionEnvironments.length === 0))
        && (
          <Alert variant="warning" isInline title={__('Warning')} ouiaId="delete-version-alert">
            <p style={{ marginBottom: '0.5em' }}>{removeDeletionFlow ? versionDeleteInfo : versionRemovalInfo}</p>
            <Checkbox
              ouiaId="delete-version-checkbox"
              id="delete_version"
              label={__('Delete version')}
              isChecked={removeDeletionFlow}
              onChange={checked => setRemoveDeletionFlow(checked)}
              style={{ margin: 0 }}
            />
          </Alert>)}
      {(versionEnvironments.length !== 0) &&
        <TableComposable ouiaId="version-delete-env-table" variant={TableVariant.compact}>
          <Thead>
            <Tr ouiaId="version-delete-env-table-header">
              <Td
                select={{
                  rowIndex: 0,
                  onSelect: onSelectAll,
                  isSelected: areAllSelected() || deleteFlow || removeDeletionFlow,
                  disable: deleteFlow || removeDeletionFlow,
                }}
              />
              {columnHeaders.map(col =>
                <Th key={col}>{col}</Th>)}
            </Tr>
          </Thead>
          <Tbody>
            {versionEnvironments?.map(({
              id, name, activation_key_count: akCount,
              host_count: hostCount,
            }, rowIndex) =>
              (
                <Tr ouiaId={`${name}_${id}`} key={`${name}_${id}`}>
                  <Td
                    key={`${name}__${id}_select`}
                    select={{
                      rowIndex,
                      onSelect: (event, isSelected) => onSelect(event, isSelected, id),
                      isSelected: selectedEnvSet.has(id) || deleteFlow || removeDeletionFlow,
                      disable: deleteFlow || removeDeletionFlow,
                    }}
                  />
                  <Td>
                    {name}
                  </Td>
                  <Td>{hostCount}</Td>
                  <Td>{akCount}</Td>
                </Tr>
              ))
            }
          </Tbody>
        </TableComposable>}
      {(versionEnvironments.length === 0) &&
        <EmptyState variant={EmptyStateVariant.xs}>
          <Title headingLevel="h4" size="md" ouiaId="not-promoted-title">
            {__('This version has not been promoted to any environments.')}
          </Title>
          <EmptyStateBody>
            {versionEnvironmentsEmptyInfo}
          </EmptyStateBody>
        </EmptyState>}
    </>
  );
};

export default CVEnvironmentSelectionForm;