katello 4.4.1 → 4.5.0

data/webpack/scenes/ContentViews/Details/Versions/BulkDelete/Steps/ReassignHosts.js

@@ -0,0 +1,220 @@
+import React, {
+  useContext,
+  useState,
+} from 'react';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+import { STATUS } from 'foremanReact/constants';
+import { first } from 'lodash';
+import { FormattedMessage } from 'react-intl';
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+
+import {
+  Button,
+  ExpandableSection,
+  Popover,
+  PopoverPosition,
+  Select,
+  SelectDirection,
+  SelectOption,
+  TextContent,
+} from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+
+import EnvironmentPaths
+  from '../../../../components/EnvironmentPaths/EnvironmentPaths';
+import WizardHeader from '../../../../components/WizardHeader';
+import getContentViews from '../../../../ContentViewsActions';
+import {
+  selectContentViews,
+  selectContentViewStatus,
+} from '../../../../ContentViewSelectors';
+import AffectedHosts from '../../Delete/affectedHosts';
+import { BulkDeleteContext } from '../BulkDeleteContextWrapper';
+import {
+  getEnvironmentList,
+  getNumberOfActivationKeys,
+  getNumberOfHosts,
+} from '../BulkDeleteHelpers';
+
+export default () => {
+  const dispatch = useDispatch();
+  const {
+    versions,
+    setSelectedEnvForAK,
+    setSelectedCVForAK,
+    selectedEnvForHosts,
+    setSelectedEnvForHosts,
+    selectedCVForHosts,
+    setSelectedCVForHosts,
+  } = useContext(BulkDeleteContext);
+
+  const { results = [] } = useSelector(selectContentViews);
+  const { content_view: { name: cvName, id: cvId } } = first(versions);
+  const contentViewsInEnvStatus = useSelector(selectContentViewStatus);
+  const cvInEnvLoading = contentViewsInEnvStatus === STATUS.PENDING;
+  const [toggleCVSelect, setToggleCVSelect] = useState(false);
+
+  const numberOfHosts = getNumberOfHosts(versions);
+  const numberOfAKs = getNumberOfActivationKeys(versions);
+  const versionEnvironments = getEnvironmentList(versions);
+
+  useDeepCompareEffect(
+    () => {
+      if (selectedEnvForHosts.length) {
+        dispatch(getContentViews({
+          environment_id: first(selectedEnvForHosts).id,
+          include_default: true,
+          full_result: true,
+        }));
+      }
+    },
+    [selectedEnvForHosts, dispatch],
+  );
+
+  const contentViewEligible = (id) => {
+    if (id === cvId) {
+      return (versionEnvironments.filter(env =>
+        env.id === first(selectedEnvForHosts)?.id).length === 0);
+    }
+    return true;
+  };
+
+  const selectOptions = results.filter(({ id }) => contentViewEligible(id))
+    .map(({ id, name }) => (
+      <SelectOption
+        key={id}
+        value={id}
+      >
+        {name}
+      </SelectOption>));
+
+  const placeHolder = (() => {
+    switch (true) {
+    case cvInEnvLoading && !!selectedEnvForHosts.length:
+      return __('Loading...');
+    case selectedEnvForHosts.length === 0:
+      return __('Select an environment above');
+    case selectOptions.length > 0:
+      return __('Select a content view');
+    default:
+      return __('No content views available');
+    }
+  })();
+
+  const setUserCheckedItems = (value) => {
+    setSelectedCVForHosts(null);
+    setSelectedEnvForHosts(value);
+    if (numberOfAKs) {
+      setSelectedCVForAK(null);
+      setSelectedEnvForAK(value);
+    }
+  };
+
+  const onSelect = (_event, selection) => {
+    setSelectedCVForHosts(selection);
+    if (numberOfAKs) {
+      setSelectedCVForAK(selection);
+    }
+    setToggleCVSelect(false);
+  };
+
+  const contentHostHref =
+    `/content_hosts?search=content_view = ${cvName} AND ( ${versionEnvironments.map(({ name }) =>
+      `lifecycle_environment = ${name}`).join(' OR ')})`;
+  return (
+    <>
+      <WizardHeader
+        title={numberOfHosts > 1 ?
+          __('Reassign affected hosts') :
+          __('Reassign affected host')}
+        description={
+          <>
+            <FormattedMessage
+              id="there-are-x-hosts"
+              values={{
+                numberOfHosts,
+              }}
+              defaultMessage={numberOfHosts > 1 ?
+                __('There are {numberOfHosts} hosts that need to be reassigned.') :
+                __('There is {numberOfHosts} host that needs to be reassigned.')
+              }
+            />
+            <br />
+            <>
+              {numberOfHosts > 1 ?
+                __('Select a lifecycle environment and a content view to move these hosts.') :
+                __('Select a lifecycle environment and a content view to move this host.')}
+              <Popover
+                appendTo={() => document.body}
+                aria-label="contentHost-prefer-portions-popover"
+                position={PopoverPosition.top}
+                bodyContent={
+                  <>
+                    {__('Before removing versions you must move hosts to an environment where the associated version is not in use. ')}
+                    <FormattedMessage
+                      id="click-here-if-you-would-prefer-hosts"
+                      values={{
+                        clickHere: (<a href={contentHostHref}>{__('click here')}</a>),
+                      }}
+                      defaultMessage={__('If you would prefer to move some of these hosts to different content views or environments then {clickHere} to manage these hosts individually.')
+                      }
+                    />
+                  </>
+                }
+              >
+                <Button ouiaId="reassign-hosts-info" style={{ padding: '8px' }} variant="plain" aria-label="popoverButton">
+                  <OutlinedQuestionCircleIcon />
+                </Button>
+              </Popover>
+            </>
+          </>
+        }
+      />
+      <ExpandableSection
+        toggleTextCollapsed={__('Show affected hosts')}
+        toggleTextExpanded={__('Hide affected hosts')}
+      >
+        <AffectedHosts
+          {...{
+            cvId,
+            versionEnvironments,
+          }}
+          deleteCV
+        />
+      </ExpandableSection >
+      <EnvironmentPaths
+        userCheckedItems={selectedEnvForHosts}
+        setUserCheckedItems={setUserCheckedItems}
+        publishing={false}
+        headerText={__('Select an environment')}
+        multiSelect={false}
+      />
+      <TextContent>
+        {__('Select a content view')}
+      </TextContent>
+      <Select
+        selections={selectedCVForHosts}
+        onSelect={onSelect}
+        isDisabled={cvInEnvLoading || !selectOptions?.length || !selectedEnvForHosts?.length}
+        id="selectCV"
+        name="selectCV"
+        aria-label="selectCV"
+        placeholderText={placeHolder}
+        isOpen={toggleCVSelect}
+        onToggle={setToggleCVSelect}
+        menuAppendTo={() => document.body}
+        direction={SelectDirection.up}
+        maxHeight={300}
+        width={350}
+      >
+        {selectOptions}
+      </Select>
+    </>
+  );
+};
+

data/webpack/scenes/ContentViews/Details/Versions/BulkDelete/Steps/ReviewEnvironments.js

@@ -0,0 +1,104 @@
+import React, { useContext } from 'react';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+import { FormattedMessage } from 'react-intl';
+
+import { Label } from '@patternfly/react-core';
+import {
+  TableComposable,
+  TableVariant,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from '@patternfly/react-table';
+
+import WizardHeader from '../../../../components/WizardHeader';
+import ActionSummary from '../ActionSummary';
+import { BulkDeleteContext } from '../BulkDeleteContextWrapper';
+import {
+  getNumberOfEnvironments,
+  getVersionListString,
+} from '../BulkDeleteHelpers';
+
+export default () => {
+  const { versions } = useContext(BulkDeleteContext);
+  const affectedVersions = versions.filter(({ environments }) => !!environments.length);
+  const pluralVersions =
+    affectedVersions.length > 1;
+  const versionList = getVersionListString(affectedVersions);
+  const pluralEnvironments = getNumberOfEnvironments(versions) > 1;
+
+  const columnHeaders = (() => {
+    const columnList = [
+      __('Environment'),
+      __('Hosts'),
+      __('Activation keys'),
+    ];
+
+    if (pluralVersions) columnList.push(__('Associated version'));
+
+    return columnList;
+  })();
+
+  return (
+    <>
+      <WizardHeader
+        title={pluralEnvironments ?
+          __('Review affected environments') :
+          __('Review affected environment')}
+      />
+      <ActionSummary
+        text={
+          <FormattedMessage
+            id="bulk-delete-review-environments-removal"
+            values={{
+              versionOrVersions: pluralVersions ?
+                __('Versions') :
+                __('Version'),
+              versionList,
+            }}
+            defaultMessage={pluralEnvironments ?
+              __('{versionOrVersions} {versionList} will be removed from the listed environments and will no longer be available for promotion.') :
+              __('{versionOrVersions} {versionList} will be removed from the listed environment and will no longer be available for promotion.')}
+          />}
+      />
+      <TableComposable variant={TableVariant.compact}>
+        <Thead>
+          <Tr>
+            {columnHeaders.map(col =>
+              <Th key={col}>{col}</Th>)}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {versions?.map(({
+            environments, version,
+          }) => environments.map(({
+            id,
+            name,
+            activation_key_count: akCount,
+            host_count: hostCount,
+          }) => (
+            <Tr key={`${name}_${id}`}>
+              <Td>
+                <Label
+                  /* TODO: Add "isCompact" to this on update of patternfly */
+                  isTruncated
+                  color="purple"
+                >
+                  {name}
+                </Label>
+              </Td>
+              <Td>{hostCount}</Td>
+              <Td>{akCount}</Td>
+              {pluralVersions && <Td>{`${__('Version')} ${version}`}</Td>}
+            </Tr>
+          )))
+          }
+        </Tbody>
+      </TableComposable>
+    </>
+  );
+};
+

data/webpack/scenes/ContentViews/Details/Versions/BulkDelete/__tests__/BulkDeleteModal.test.js

@@ -0,0 +1,122 @@
+import React from 'react';
+
+import { STATUS } from 'foremanReact/constants';
+import { first } from 'lodash';
+import { useSelector } from 'react-redux';
+import { Route } from 'react-router-dom';
+import {
+  fireEvent,
+  renderWithRedux,
+  screen,
+} from 'react-testing-lib-wrapper';
+
+import nock from '../../../../../../test-utils/nockWrapper';
+import BulkDeleteModal from '../BulkDeleteModal';
+import contentViewData from './contentView.fixtures.json';
+import contentViewVersionData from './contentViewVersion.fixtures.json';
+import environmentPaths from './environmentPaths.fixtures.json';
+import hostsData from './hosts.fixtures.json';
+
+const { results: versions } = contentViewVersionData;
+const {
+  queryByText, queryAllByText, getByText, getAllByLabelText, getByLabelText,
+} = screen;
+
+const renderOptions = {
+  routerParams: {
+    initialEntries: [{ pathname: '/content_views/10' }],
+    initialIndex: 1,
+  },
+  initialState: {
+    // This is the API state that your tests depend on for their data
+    // You can cross reference the needed useSelectors from your tested components
+    // with the data found within the redux chrome add-on to help determine this fixture data.
+    API: {
+      ENVIRONMENT_PATHS: { response: environmentPaths, status: STATUS.RESOLVED },
+      HOSTS_KEY: { response: hostsData, status: STATUS.RESOLVED },
+      CONTENT_VIEW_VERSIONS_10: {
+        response: contentViewVersionData, status: STATUS.RESOLVED,
+      },
+      CONTENT_VIEWS: {
+        response: contentViewData, status: STATUS.RESOLVED,
+      },
+    },
+  },
+};
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'), // This leaves the rest of the imports unchanged
+  useSelector: jest.fn(),
+}));
+
+beforeAll(() => {
+  useSelector.mockImplementation(selector =>
+    // This is the data that your useSelectors will query against when needed.
+    selector(renderOptions.initialState));
+});
+
+// clean-up mocks
+afterAll(() => {
+  useSelector.mockClear();
+  jest.clearAllMocks();
+});
+
+// https://kentcdodds.com/blog/write-fewer-longer-tests
+
+test('Open bulk delete modal and step through all steps', () => {
+  renderWithRedux(
+    <Route path="/content_views/:id">
+      <div>
+        <BulkDeleteModal
+          versions={versions}
+          onClose={() => { }}
+        />
+      </div>
+    </Route>,
+    renderOptions,
+  );
+  // Test "Review affected environments" step
+  expect(queryByText('Delete versions')).toBeInTheDocument();
+  expect(queryAllByText('Review affected environments')).toHaveLength(3);
+  expect(getByText('Reassign affected host')).toBeInTheDocument();
+  expect(getByText('Reassign affected activation key')).toBeInTheDocument();
+  expect(getByText('{versionOrVersions} {versionList} will be removed from the listed environments and will no longer be available for promotion.')).toBeInTheDocument();
+
+  fireEvent.click(queryByText('Next'));
+
+  // Test "Reassign affected host" step
+  expect(queryAllByText('Reassign affected host')).toHaveLength(3);
+  expect(getByText('Select an environment')).toBeInTheDocument();
+
+  fireEvent.click(first(getAllByLabelText('Library', { selector: 'input' })));
+
+  expect(queryByText('Select an environment above')).not.toBeInTheDocument();
+  expect(queryByText('Next')).toHaveAttribute('aria-disabled', 'true');
+
+  fireEvent.click(getByLabelText('Options menu'));
+
+  expect(queryByText('Eeloo')).toBeInTheDocument();
+  fireEvent.click(queryByText('Eeloo'));
+
+  // After selecting a contentView expect the "Next" button to be enabled
+  expect(queryByText('Next')).toHaveAttribute('aria-disabled', 'false');
+  fireEvent.click(queryByText('Next'));
+
+  // Test "Reassign affected activation keys" step
+  expect(queryAllByText('Reassign affected activation key')).toHaveLength(3);
+
+  // Environment and host should be inherited from previous step enabling next button
+  expect(queryByText('Next')).toHaveAttribute('aria-disabled', 'false');
+  fireEvent.click(queryByText('Next'));
+
+  // Test "Review details" step
+  expect(queryAllByText('Review details')).toHaveLength(3);
+
+  // Expect "Delete button to be enabled"
+  expect(queryByText('Delete')).toHaveAttribute('aria-disabled', 'false');
+  fireEvent.click(queryByText('Delete'));
+
+  // Test "FinishBulkDelete" loading page
+  expect(queryByText('Please wait while the task starts..')).toBeInTheDocument();
+  nock.abortPendingRequests();
+});