katello 4.5.0.rc2 → 4.6.0.rc2

data/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeEditModal.js

@@ -0,0 +1,301 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { isEqual } from 'lodash';
+import PropTypes from 'prop-types';
+import { STATUS } from 'foremanReact/constants';
+import { propsToCamelCase } from 'foremanReact/common/helpers';
+import {
+  Modal,
+  Button,
+  Form,
+  FormGroup,
+  FormSelect,
+  FormSelectOption,
+  Select,
+  SelectOption,
+  SelectVariant,
+} from '@patternfly/react-core';
+import { FormattedMessage } from 'react-intl';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { selectOrganizationStatus, selectOrganization, selectAvailableReleaseVersions, selectAvailableReleaseVersionsStatus } from './SystemPurposeSelectors';
+import { getAvailableReleaseVersions, getOrganization, updateSystemPurposeAttributes } from './SystemPurposeActions';
+import HOST_DETAILS_KEY from '../../HostDetailsConstants';
+import { defaultUsages, defaultRoles, defaultServiceLevels } from './SystemPurposeConstants';
+
+const SystemPurposeEditModal = ({
+  closeModal, hostName, purposeRole, purposeUsage, purposeAddons,
+  serviceLevel, releaseVersion, isOpen, orgId, hostId,
+}) => {
+  const initialPurposeRole = purposeRole ?? '';
+  const initialServiceLevel = serviceLevel ?? '';
+  const initialPurposeUsage = purposeUsage ?? '';
+  const initialReleaseVersion = releaseVersion ?? '';
+  const initialPurposeAddons = purposeAddons ?? [];
+  const [selectedRole, setSelectedRole] = useState(initialPurposeRole);
+  const [selectedServiceLevel, setSelectedServiceLevel] = useState(initialServiceLevel);
+  const [selectedUsage, setSelectedUsage] = useState(initialPurposeUsage);
+  const [addonSelectOpen, setAddonSelectOpen] = useState(false);
+  const [selectedAddons, setSelectedAddons] = useState(initialPurposeAddons);
+  const [selectedReleaseVersion, setSelectedReleaseVersion] = useState(initialReleaseVersion);
+
+  const unmodified = (
+    selectedRole === initialPurposeRole &&
+    selectedServiceLevel === initialServiceLevel &&
+    selectedUsage === initialPurposeUsage &&
+    selectedReleaseVersion === initialReleaseVersion &&
+    isEqual(selectedAddons, initialPurposeAddons)
+  );
+  const dispatch = useDispatch();
+
+  const orgStatus = useSelector(state => selectOrganizationStatus(state, orgId));
+  const organizationDetails = useSelector(state => selectOrganization(state, orgId));
+  const orgDetails = propsToCamelCase(organizationDetails ?? { systemPurposes: {} });
+  const availableSyspurposeAttributes = orgDetails?.systemPurposes ?? {};
+  const availableServiceLevels = orgDetails?.serviceLevels ?? [];
+  const { addons: availableAddons, roles: availableRoles, usage: availableUsages }
+    = availableSyspurposeAttributes;
+
+  const availableReleaseVersionsStatus
+    = useSelector(state => selectAvailableReleaseVersionsStatus(state, orgId));
+  const availableReleaseVersions = useSelector(state =>
+    selectAvailableReleaseVersions(state, hostId))?.results ?? [];
+  useEffect(() => {
+    if (orgId && orgStatus !== STATUS.RESOLVED) {
+      dispatch(getOrganization({ orgId }));
+    }
+  }, [orgId, orgStatus, dispatch]);
+
+  useEffect(() => {
+    if (hostId && availableReleaseVersionsStatus !== STATUS.RESOLVED) {
+      dispatch(getAvailableReleaseVersions({ hostId }));
+    }
+  }, [hostId, availableReleaseVersionsStatus, dispatch]);
+
+  const toggleAddonSelect = isOpenState => setAddonSelectOpen(isOpenState);
+
+  const onAddonSelect = (_event, selected) => {
+    const newSelectedAddons = new Set(selectedAddons);
+    if (!selected) return;
+    if (newSelectedAddons.has(selected)) {
+      newSelectedAddons.delete(selected);
+    } else {
+      newSelectedAddons.add(selected);
+    }
+    setSelectedAddons([...newSelectedAddons]);
+  };
+
+  const refreshHostDetails = () => dispatch({
+    type: 'API_GET',
+    payload: {
+      key: HOST_DETAILS_KEY,
+      url: `/api/hosts/${hostName}`,
+    },
+  });
+
+  // Building the dropdown options is a bit complex because they come from several sources:
+  // 1. The hard-coded set of default values (defaultOptions)
+  // 2. The set of available values from the API (additionalOptions)
+  // 3. The value actually set on the host (initialOption - this need not be a value from 1 or 2)
+  // We then need to combine these values into a single set of options, and ensure that
+  // (a) (unset) appears first;
+  // (b) there are no duplicate options;
+  // (c) that the currently selected option always appears (currentSelected); and
+  // (d) that the order of the items doesn't change unexpectedly.
+  const buildOptions = (defaultOptions, additionalOptions, currentSelected, initialOption) => {
+    const optionToObject = option => ({ label: option || __('(unset)'), value: option });
+    const uniqOptions = new Set(['', ...defaultOptions ?? [], ...additionalOptions ?? [], currentSelected, initialOption]);
+    uniqOptions.delete(null);
+    uniqOptions.delete(undefined);
+    return [...[...uniqOptions]?.map(optionToObject)];
+  };
+
+  const roleOptions =
+    buildOptions(defaultRoles, availableRoles, selectedRole, purposeRole);
+  const usageOptions =
+    buildOptions(defaultUsages, availableUsages, selectedUsage, purposeUsage);
+
+  // addons may be present on the host but not available from subscriptions,
+  // so we combine the options here
+  const addonToObject = addon => ({ label: addon, value: addon });
+  const addonsOptions =
+    [...new Set([ // don't repeat addons if they are already selected
+      ...purposeAddons.map(addonToObject), ...availableAddons?.map(addonToObject) ?? [],
+    ])];
+
+  const serviceLevelOptions =
+    buildOptions(defaultServiceLevels, availableServiceLevels, selectedServiceLevel, serviceLevel);
+
+  const releaseVersionOptions =
+    buildOptions([], availableReleaseVersions, selectedReleaseVersion, releaseVersion);
+
+  const handleSave = (event) => {
+    event.preventDefault();
+    closeModal();
+    const optionsToValue = (options, stateValue) =>
+      options.find(option => option.value === stateValue)?.value;
+    dispatch(updateSystemPurposeAttributes({
+      hostId,
+      attributes: {
+        autoheal: true,
+        purpose_role: optionsToValue(roleOptions, selectedRole),
+        purpose_usage: optionsToValue(usageOptions, selectedUsage),
+        purpose_addons: selectedAddons,
+        release_version: optionsToValue(releaseVersionOptions, selectedReleaseVersion),
+        service_level: optionsToValue(serviceLevelOptions, selectedServiceLevel),
+      },
+      refreshHostDetails,
+    }));
+  };
+
+  const handleCancel = () => {
+    setSelectedRole(initialPurposeRole);
+    setSelectedServiceLevel(initialServiceLevel);
+    setSelectedUsage(initialPurposeUsage);
+    setSelectedAddons(initialPurposeAddons);
+    setSelectedReleaseVersion(initialReleaseVersion);
+    closeModal();
+  };
+
+  const modalActions = ([
+    <Button ouiaId="save-syspurpose" key="save-syspurpose" variant="primary" onClick={handleSave} isDisabled={unmodified}>
+      {__('Save')}
+    </Button>,
+    <Button ouiaId="cancel-syspurpose" key="cancel" variant="link" onClick={handleCancel}>
+      {__('Cancel')}
+    </Button>,
+  ]);
+
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleCancel}
+      title={__('Edit system purpose attributes')}
+      width="40%"
+      position="top"
+      actions={modalActions}
+      id="syspurpose-edit-modal"
+    >
+      <FormattedMessage
+        className="syspurpose-edit-modal-blurb"
+        id="syspurpose-edit-modal-blurb"
+        defaultMessage={__('Select system purpose attributes for host {hostName}.')}
+        values={{
+          hostName: <strong>{hostName}</strong>,
+        }}
+      />
+      <Form isHorizontal style={{ marginTop: '1.3rem' }}>
+        <FormGroup label={__('Role')} fieldId="role">
+          <FormSelect
+            id="role"
+            name="role"
+            value={selectedRole}
+            onChange={setSelectedRole}
+          >
+            {roleOptions.map(option => (
+              <FormSelectOption
+                key={option.value}
+                value={option.value}
+                label={option.label}
+              />
+            ))}
+          </FormSelect>
+        </FormGroup>
+        <FormGroup label={__('SLA')} fieldId="serviceLevel">
+          <FormSelect
+            id="serviceLevel"
+            name="serviceLevel"
+            value={selectedServiceLevel}
+            onChange={setSelectedServiceLevel}
+          >
+            {serviceLevelOptions.map(option => (
+              <FormSelectOption
+                key={option.value}
+                value={option.value}
+                label={option.label}
+              />
+            ))}
+          </FormSelect>
+        </FormGroup>
+        <FormGroup label={__('Usage')} fieldId="usage">
+          <FormSelect
+            id="usage"
+            name="usage"
+            value={selectedUsage}
+            onChange={setSelectedUsage}
+          >
+            {usageOptions.map(option => (
+              <FormSelectOption
+                key={option.value}
+                value={option.value}
+                label={option.label}
+              />
+            ))}
+          </FormSelect>
+        </FormGroup>
+        <FormGroup label={__('Release version')} fieldId="releaseVersion">
+          <FormSelect
+            id="release_version"
+            name="release_version"
+            value={selectedReleaseVersion}
+            onChange={setSelectedReleaseVersion}
+          >
+            {releaseVersionOptions.map(option => (
+              <FormSelectOption
+                key={option.value}
+                value={option.value}
+                label={option.label}
+              />
+            ))}
+          </FormSelect>
+        </FormGroup>
+        <FormGroup label={__('Add-ons')} fieldId="addons">
+          <span id="syspurpose-addons-title" hidden>
+            Checkbox Title
+          </span>
+          <Select
+            variant={SelectVariant.typeaheadMulti}
+            aria-label="syspurpose-addons"
+            onToggle={toggleAddonSelect}
+            onSelect={onAddonSelect}
+            selections={selectedAddons}
+            isOpen={addonSelectOpen}
+            placeholderText={__('Select add-ons')}
+            aria-labelledby="syspurpose-addons-title"
+            menuAppendTo="parent"
+          >
+            {addonsOptions.map(option => (
+              <SelectOption
+                key={option.value}
+                value={option.value}
+                label={option.label}
+              />
+            ))}
+          </Select>
+        </FormGroup>
+      </Form>
+    </Modal>
+  );
+};
+
+export default SystemPurposeEditModal;
+
+SystemPurposeEditModal.propTypes = {
+  closeModal: PropTypes.func.isRequired,
+  hostName: PropTypes.string,
+  purposeRole: PropTypes.string.isRequired,
+  purposeUsage: PropTypes.string.isRequired,
+  purposeAddons: PropTypes.arrayOf(PropTypes.string).isRequired,
+  serviceLevel: PropTypes.string.isRequired,
+  releaseVersion: PropTypes.string,
+  isOpen: PropTypes.bool.isRequired,
+  orgId: PropTypes.number,
+  hostId: PropTypes.number,
+};
+
+SystemPurposeEditModal.defaultProps = {
+  hostName: '',
+  orgId: null,
+  hostId: null,
+  releaseVersion: '',
+};

data/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeSelectors.js

@@ -0,0 +1,25 @@
+import {
+  selectAPIStatus,
+  selectAPIError,
+  selectAPIResponse,
+} from 'foremanReact/redux/API/APISelectors';
+import { STATUS } from 'foremanReact/constants';
+
+export const selectOrganization = (state, orgId) =>
+  selectAPIResponse(state, `ORGANIZATION_${orgId}`) ?? {};
+
+export const selectOrganizationStatus = (state, orgId) =>
+  selectAPIStatus(state, `ORGANIZATION_${orgId}`) ?? STATUS.PENDING;
+
+export const selectOrganizationError = (state, orgId) =>
+  selectAPIError(state, `ORGANIZATION_${orgId}`);
+
+export const selectAvailableReleaseVersions = (state, hostId) =>
+  selectAPIResponse(state, `AVAILABLE_RELEASE_VERSIONS_${hostId}`) ?? {};
+
+export const selectAvailableReleaseVersionsStatus = (state, hostId) =>
+  selectAPIStatus(state, `AVAILABLE_RELEASE_VERSIONS_${hostId}`) ??
+  STATUS.PENDING;
+
+export const selectAvailableReleaseVersionsError = (state, hostId) =>
+  selectAPIError(state, `AVAILABLE_RELEASE_VERSIONS_${hostId}`);

data/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/__tests__/SystemPurposeCard.test.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import { renderWithRedux, act } from 'react-testing-lib-wrapper';
+import HOST_DETAILS from '../../../HostDetailsConstants';
+import SystemPurposeCard from '../SystemPurposeCard';
+import katelloApi, { foremanApi } from '../../../../../../services/api';
+import { assertNockRequest, nockInstance } from '../../../../../../test-utils/nockWrapper';
+
+const organizationDetails = katelloApi.getApiUrl('/organizations/1');
+const availableReleaseVersions = foremanApi.getApiUrl('/hosts/1/subscriptions/available_release_versions');
+
+const baseHostDetails = {
+  id: 1,
+  organization_id: 1,
+  permissions: {
+    edit_hosts: true,
+  },
+  subscription_facet_attributes: {
+    purpose_addons: ['Addon1', 'Addon2'],
+    purpose_role: 'Red Hat Enterprise Linux Server',
+    purpose_usage: 'Production',
+    service_level: 'Premium',
+    release_version: '8',
+    uuid: '12345',
+  },
+};
+
+const renderOptions = () => ({
+  apiNamespace: HOST_DETAILS,
+  initialState: {
+    API: {
+      HOST_DETAILS: {
+        response: {
+          id: 1,
+          name: 'test-host',
+          ...baseHostDetails,
+        },
+        status: 'RESOLVED',
+      },
+    },
+  },
+});
+
+test('shows system purpose details', async (done) => {
+  const orgScope = nockInstance
+    .get(organizationDetails)
+    .reply(200, {
+      id: 1,
+    });
+  const availableReleaseVersionsScope = nockInstance
+    .get(availableReleaseVersions)
+    .reply(200, []);
+
+  const { getByText }
+    = renderWithRedux(<SystemPurposeCard hostDetails={baseHostDetails} />, renderOptions());
+  expect(getByText('Red Hat Enterprise Linux Server')).toBeInTheDocument();
+  expect(getByText('Production')).toBeInTheDocument();
+  expect(getByText('Premium')).toBeInTheDocument();
+  expect(getByText('Addon1')).toBeInTheDocument();
+  expect(getByText('Addon2')).toBeInTheDocument();
+  expect(getByText('8')).toBeInTheDocument();
+
+  assertNockRequest(orgScope);
+  assertNockRequest(availableReleaseVersionsScope, done);
+});
+
+
+test('shows edit button for a user with edit_hosts permission', async (done) => {
+  const orgScope = nockInstance
+    .get(organizationDetails)
+    .reply(200, {
+      id: 1,
+    });
+  const availableReleaseVersionsScope = nockInstance
+    .get(availableReleaseVersions)
+    .reply(200, []);
+
+  const { queryByText }
+    = renderWithRedux(<SystemPurposeCard hostDetails={baseHostDetails} />, renderOptions());
+  expect(queryByText('Edit')).toBeInTheDocument();
+
+  assertNockRequest(orgScope);
+  assertNockRequest(availableReleaseVersionsScope, done);
+});
+
+test('does not show edit button for a user without edit_hosts permission', (done) => {
+  const orgScope = nockInstance
+    .get(organizationDetails)
+    .reply(200, {
+      id: 1,
+    });
+  const availableReleaseVersionsScope = nockInstance
+    .get(availableReleaseVersions)
+    .reply(200, []);
+
+  const limitedUser = {
+    ...baseHostDetails,
+    permissions: {
+      edit_hosts: false,
+    },
+  };
+
+  const { queryByText }
+    = renderWithRedux(<SystemPurposeCard hostDetails={limitedUser} />);
+  expect(queryByText('Edit')).not.toBeInTheDocument();
+
+  assertNockRequest(orgScope);
+  assertNockRequest(availableReleaseVersionsScope, done);
+  act(done);
+});

data/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/__tests__/SystemPurposeEditModal.test.js

@@ -0,0 +1,161 @@
+import React from 'react';
+import { propsToCamelCase } from 'foremanReact/common/helpers';
+import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+import HOST_DETAILS from '../../../HostDetailsConstants';
+import SystemPurposeEditModal from '../SystemPurposeEditModal';
+import { assertNockRequest, nockInstance } from '../../../../../../test-utils/nockWrapper';
+import katelloApi, { foremanApi } from '../../../../../../services/api';
+
+const organizationDetails = katelloApi.getApiUrl('/organizations/1');
+const availableReleaseVersions = foremanApi.getApiUrl('/hosts/1/subscriptions/available_release_versions');
+const hostEditUrl = foremanApi.getApiUrl('/hosts/1');
+const hostDetailsGetUrl = '/api/hosts/test-host';
+
+const baseHostDetails = {
+  id: 1,
+  organization_id: 1,
+  permissions: {
+    edit_hosts: true,
+  },
+  subscription_facet_attributes: {
+    purpose_addons: ['Addon1', 'Addon2'],
+    purpose_role: 'Red Hat Enterprise Linux Server',
+    purpose_usage: 'Production',
+    service_level: 'Premium',
+    release_version: '8',
+  },
+};
+
+const facetAttributes = propsToCamelCase(baseHostDetails.subscription_facet_attributes);
+const baseAttributes = {
+  hostName: 'test-host',
+  closeModal: jest.fn(),
+  isOpen: true,
+  orgId: 1,
+  hostId: 1,
+};
+
+const renderOptions = () => ({
+  apiNamespace: HOST_DETAILS,
+  initialState: {
+    API: {
+      HOST_DETAILS: {
+        response: {
+          id: 1,
+          name: 'test-host',
+          ...baseHostDetails,
+        },
+        status: 'RESOLVED',
+      },
+    },
+  },
+});
+
+describe('SystemPurposeEditModal', () => {
+  test('Shows currently selected attributes as defaults', (done) => {
+    const orgScope = nockInstance
+      .get(organizationDetails)
+      .reply(200, {
+        id: 1,
+      });
+    const availableReleaseVersionsScope = nockInstance
+      .get(availableReleaseVersions)
+      .reply(200, []);
+
+    const { getByText }
+      = renderWithRedux(<SystemPurposeEditModal
+        {...baseAttributes}
+        {...facetAttributes}
+      />, renderOptions());
+
+    expect(getByText('Red Hat Enterprise Linux Server')).toBeInTheDocument();
+    expect(getByText('Production')).toBeInTheDocument();
+    expect(getByText('Premium')).toBeInTheDocument();
+    expect(getByText('Addon1')).toBeInTheDocument();
+    expect(getByText('Addon2')).toBeInTheDocument();
+    expect(getByText('8')).toBeInTheDocument();
+
+    assertNockRequest(orgScope);
+    assertNockRequest(availableReleaseVersionsScope, done);
+  });
+
+  test('Shows blank options as (unset)', () => {
+    const orgScope = nockInstance
+      .get(organizationDetails)
+      .reply(200, {
+        id: 1,
+      });
+    const availableReleaseVersionsScope = nockInstance
+      .get(availableReleaseVersions)
+      .reply(200, []);
+    const { getAllByText }
+      = renderWithRedux(<SystemPurposeEditModal
+        {...
+          {
+            ...baseAttributes,
+            purposeRole: '',
+          }}
+        {...facetAttributes}
+      />, renderOptions());
+
+    expect(getAllByText('(unset)')[0]).toBeVisible();
+
+    assertNockRequest(orgScope);
+    assertNockRequest(availableReleaseVersionsScope);
+  });
+  test('Calls API and changes syspurpose values', async (done) => {
+    const orgScope = nockInstance
+      .get(organizationDetails)
+      .reply(200, {
+        id: 1,
+      });
+    const availableReleaseVersionsScope = nockInstance
+      .get(availableReleaseVersions)
+      .reply(200, []);
+    const hostEditScope = nockInstance
+      .put(hostEditUrl, {
+        id: 1,
+        host: {
+          subscription_facet_attributes: {
+            autoheal: true,
+            // we're going to change role from 'Server' to 'Workstation'
+            purpose_role: 'Red Hat Enterprise Linux Workstation',
+            purpose_usage: 'Production',
+            purpose_addons: ['Addon1', 'Addon2'],
+            release_version: '8',
+            service_level: 'Premium',
+          },
+        },
+      })
+      .reply(200);
+    const hostDetailsScope = nockInstance
+      .get(hostDetailsGetUrl)
+      .reply(200);
+
+    const { getByLabelText, getByRole }
+      = renderWithRedux(<SystemPurposeEditModal
+        {...baseAttributes}
+        {...facetAttributes}
+      />, renderOptions());
+
+    const saveButton = getByRole('button', { name: 'Save' });
+    // Save button should be disabled if no values have been changed
+    expect(saveButton).toHaveAttribute('aria-disabled', 'true');
+
+    const roleDropdown = getByLabelText('Role');
+    fireEvent.change(roleDropdown, { target: { value: 'Red Hat Enterprise Linux Workstation' } });
+
+    // Save button should now be enabled
+    expect(saveButton).toHaveAttribute('aria-disabled', 'false');
+    fireEvent.click(saveButton);
+
+    await patientlyWaitFor(() => {
+      expect(baseAttributes.closeModal).toHaveBeenCalled();
+    });
+
+    [orgScope, availableReleaseVersionsScope, hostEditScope].forEach((scope) => {
+      assertNockRequest(scope);
+    });
+    assertNockRequest(hostDetailsScope, done);
+  });
+});

data/webpack/components/extensions/HostDetails/Cards/__tests__/errataOverviewCard.test.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import { render } from 'react-testing-lib-wrapper';
+import { render, renderWithRedux } from 'react-testing-lib-wrapper';
 import ErrataOverviewCard from '../ErrataOverviewCard';
-import nock from '../../../../../test-utils/nockWrapper';
 
 const baseHostDetails = {
   id: 2,
@@ -9,12 +8,17 @@ const baseHostDetails = {
     uuid: '123',
   },
 };
-
+const renderOptions = {
+  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.
+    katello: {
+      hostDetails: {},
+    },
+  },
+};
 describe('Without errata', () => {
-  afterEach(() => {
-    nock.cleanAll();
-  });
-
   test('shows zero counts when there are 0 installable errata', () => {
     const hostDetails = {
       ...baseHostDetails,
@@ -52,7 +56,7 @@ describe('Without errata', () => {
       },
     };
     /* eslint-disable max-len */
-    const { queryByLabelText, getByText } = render(<ErrataOverviewCard hostDetails={hostDetails} />);
+    const { queryByLabelText, getByText } = renderWithRedux(<ErrataOverviewCard hostDetails={hostDetails} />, renderOptions);
     /* eslint-enable max-len */
     expect(queryByLabelText('errataChart')).not.toBeInTheDocument();
     expect(getByText('All errata up-to-date')).toBeInTheDocument();
@@ -80,10 +84,6 @@ describe('Without errata', () => {
 });
 
 describe('With errata', () => {
-  afterEach(() => {
-    nock.cleanAll();
-  });
-
   test('shows links when there are errata', () => {
     const hostDetails = {
       ...baseHostDetails,