katello 4.5.0 → 4.6.0.rc1

data/webpack/components/TypeAhead/TypeAhead.js

@@ -2,14 +2,15 @@ import React, { useState, useEffect } from 'react';
 import Downshift from 'downshift';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
-
+import { useDispatch, useSelector } from 'react-redux';
 import TypeAheadSearch from './pf3Search/TypeAheadSearch';
 // eslint-disable-next-line import/no-named-default
 import { default as TypeAheadSearchPf4 } from './pf4Search/TypeAheadSearch';
 import { getActiveItems } from './helpers/helpers';
-
 import './TypeAhead.scss';
 import useDebounce from '../../utils/useDebounce';
+import { selectHostDetailsClearSearch } from '../extensions/HostDetails/HostDetailsSelectors';
+
 
 const TypeAhead = ({
   items,
@@ -17,7 +18,6 @@ const TypeAhead = ({
   onInputUpdate,
   onSearch,
   actionText,
-  initialInputValue,
   patternfly4,
   autoSearchEnabled,
   autoSearchDelay,
@@ -26,10 +26,12 @@ const TypeAhead = ({
   placeholder,
   isTextInput,
   setTextInputValue,
+  initialInputValue,
 }) => {
   const [inputValue, setInputValue] = useState(initialInputValue);
-
   const debouncedValue = useDebounce(inputValue, autoSearchDelay);
+  const dispatch = useDispatch();
+  const existingClearSearch = useSelector(selectHostDetailsClearSearch);
   useEffect(
     () => {
       onInputUpdate(debouncedValue);
@@ -37,21 +39,34 @@ const TypeAhead = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [debouncedValue],
   );
+  // eslint-disable-next-line arrow-body-style
+  useEffect(() => {
+    return function cleanupClearSearch() {
+      dispatch({
+        type: 'SET_CLEAR_SEARCH',
+        payload: {},
+      });
+    };
+  }, [dispatch]);
+
+  const clearSearch = () => {
+    setInputValue('');
+    onSearch('');
+  };
 
   const handleStateChange = ({ inputValue: value }) => {
     if (typeof value === 'string') {
       setInputValue(value);
       if (setTextInputValue) setTextInputValue(value);
     }
+    if (typeof existingClearSearch !== 'function') {
+      dispatch({
+        type: 'SET_CLEAR_SEARCH',
+        payload: clearSearch,
+      });
+    }
   };
-
-  const clearSearch = () => {
-    setInputValue('');
-    onSearch('');
-  };
-
   const activeItems = getActiveItems(items);
-
   return (
     <Downshift
       onStateChange={handleStateChange}

data/webpack/components/TypeAhead/pf3Search/TypeAheadItems.js

@@ -6,7 +6,7 @@ import { commonItemPropTypes } from '../helpers/commonPropTypes';
 const TypeAheadItems = ({
   items, activeItems, getItemProps, highlightedIndex,
 }) => (
-  <Dropdown.Menu className="typeahead-dropdown">
+  <Dropdown.Menu className="typeahead-dropdown" ouiaId="typeahead-dropdown">
     {items.map(({ text, type, disabled = false }, index) => {
       if (type === 'header') {
         return (

data/webpack/components/TypeAhead/pf4Search/TypeAheadInput.js

@@ -30,6 +30,7 @@ const TypeAheadInput = ({
         ref={inputRef}
         onFocus={onInputFocus}
         aria-label="text input for search"
+        ouiaId="type-ahead-input"
         onChange={onChangeWrapper}
         type="text"
         iconVariant={autoSearchEnabled && !isTextInput ? 'search' : undefined}

data/webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/ChangeHostCVModal.js

@@ -168,7 +168,8 @@ const ChangeHostCVModal = ({
           title={__('No content views available for the selected environment')}
           style={{ marginBottom: '1rem' }}
         >
-          {__('View the Content Views page to manage and promote content views, or select a different environment.')}
+          <a href="/content_views">{__('View the Content Views page')}</a>
+          {__(' to manage and promote content views, or select a different environment.')}
         </Alert>
       }
       <EnvironmentPaths

data/webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/HostCollectionsModal.js

@@ -13,7 +13,7 @@ import { useSelectionSet } from '../../../../Table/TableHooks';
 import { selectAvailableHostCollections, selectAvailableHostCollectionsStatus, selectRemovableHostCollections, selectRemovableHostCollectionsStatus } from './HostCollectionsSelectors';
 import hostIdNotReady from '../../HostDetailsActions';
 import { alterHostCollections, getHostAvailableHostCollections, getHostRemovableHostCollections } from './HostCollectionsActions';
-import { MODAL_TYPES } from './HostCollectionsConstants';
+import { MODAL_TYPES, AVAILABLE_HOST_COLLECTIONS_KEY, REMOVABLE_HOST_COLLECTIONS_KEY } from './HostCollectionsConstants';
 import { truncate } from '../../../../../utils/helpers';
 
 export const HostCollectionsAddModal =
@@ -29,7 +29,9 @@ export const HostCollectionsModal = ({
   const emptySearchTitle = __('No matching host collections found');
   const emptySearchBody = __('Try changing your search settings.');
   const errorSearchTitle = __('Problem searching host collections');
-
+  const primaryActionTitle = __('Create host collection');
+  const showPrimaryAction = true;
+  const primaryActionLink = '/host_collections/new';
   const columnHeaders = ['', __('Host collection'), __('Capacity'), __('Description')];
   const adding = (modalType === MODAL_TYPES.ADD);
 
@@ -122,10 +124,9 @@ export const HostCollectionsModal = ({
       {adding ? __('Add') : __('Remove')}
     </Button>,
     <Button key="cancel" variant="link" onClick={handleModalCancel}>
-      Cancel
+      {__('Cancel')}
     </Button>,
   ]);
-
   return (
     <Modal
       isOpen={isOpen}
@@ -158,6 +159,9 @@ export const HostCollectionsModal = ({
           updateSearchQuery,
           selectedCount,
           selectNone,
+          showPrimaryAction,
+          primaryActionTitle,
+          primaryActionLink,
         }
         }
         ouiaId="host-collections-table"
@@ -168,6 +172,7 @@ export const HostCollectionsModal = ({
         variant={TableVariant.compact}
         {...selectAll}
         displaySelectAllCheckbox={results?.length > 0}
+        requestKey={adding ? AVAILABLE_HOST_COLLECTIONS_KEY : REMOVABLE_HOST_COLLECTIONS_KEY}
       >
         <Thead>
           <Tr>

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

@@ -0,0 +1,37 @@
+import { translate as __ } from 'foremanReact/common/I18n';
+import { API_OPERATIONS, put } from 'foremanReact/redux/API';
+import api, { foremanApi } from '../../../../../services/api';
+import HOST_DETAILS_KEY from '../../HostDetailsConstants';
+import { ORGANIZATION, AVAILABLE_RELEASE_VERSIONS } from './SystemPurposeConstants';
+import { errorToast } from '../../../../../scenes/Tasks/helpers';
+
+export const getOrganization = ({ orgId }) => ({
+  type: 'API_GET',
+  payload: {
+    key: `${ORGANIZATION}_${orgId}`,
+    url: api.getApiUrl(`/organizations/${orgId}`),
+  },
+});
+
+export const getAvailableReleaseVersions = ({ hostId }) => ({
+  type: 'API_GET',
+  payload: {
+    key: `${AVAILABLE_RELEASE_VERSIONS}_${hostId}`,
+    url: foremanApi.getApiUrl(`/hosts/${hostId}/subscriptions/available_release_versions`),
+  },
+});
+
+export const updateSystemPurposeAttributes = ({ hostId, attributes, refreshHostDetails }) => put({
+  type: API_OPERATIONS.PUT,
+  key: HOST_DETAILS_KEY,
+  url: foremanApi.getApiUrl(`/hosts/${hostId}`),
+  params: {
+    id: hostId,
+    host: {
+      subscription_facet_attributes: attributes,
+    },
+  },
+  successToast: () => __('System purpose attributes updated'),
+  errorToast,
+  handleSuccess: refreshHostDetails,
+});

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

@@ -0,0 +1,173 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { STATUS } from 'foremanReact/constants';
+import {
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardBody,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListDescription,
+  DescriptionListTerm,
+  Flex,
+  FlexItem,
+  GridItem,
+  Label,
+  List,
+  ListItem,
+  Tooltip,
+  Skeleton,
+} from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { propsToCamelCase } from 'foremanReact/common/helpers';
+import './SystemPurposeCard.scss';
+import SystemPurposeEditModal from './SystemPurposeEditModal';
+import { selectHostDetailsStatus } from '../../HostDetailsSelectors';
+import { hasRequiredPermissions } from '../../hostDetailsHelpers';
+
+const SystemPurposeCard = ({ hostDetails }) => {
+  const showEditButton = hasRequiredPermissions(['edit_hosts'], hostDetails?.permissions);
+  const orgId = hostDetails.organization_id;
+  const subscriptionFacetAttributes = hostDetails?.subscription_facet_attributes;
+  const {
+    purposeRole, purposeUsage, purposeAddons, releaseVersion, serviceLevel,
+  } = propsToCamelCase(subscriptionFacetAttributes ?? {});
+  const sysPurposeProps = {
+    purposeRole,
+    purposeUsage,
+    purposeAddons,
+    releaseVersion,
+    serviceLevel,
+  };
+  const hostDetailsStatus = useSelector(selectHostDetailsStatus);
+  const dataIsLoading = hostDetailsStatus === STATUS.PENDING;
+
+  const [editing, setEditing] = useState(false);
+  if (!hostDetails?.id) {
+    return (
+      <GridItem rowSpan={1} md={6} lg={4} xl2={3}>
+        <Card isHoverable ouiaId="system-purpose-card">
+          <Skeleton />
+        </Card>
+      </GridItem>
+    );
+  }
+
+  return (
+    <GridItem rowSpan={1} md={6} lg={4} xl2={3}>
+      <Card isHoverable ouiaId="system-purpose-card">
+        <CardHeader>
+          <Flex
+            alignItems={{ default: 'alignItemsCenter' }}
+            justifyContent={{ default: 'justifyContentSpaceBetween' }}
+            style={{ width: '100%' }}
+          >
+            <FlexItem>
+              <Flex
+                alignItems={{ default: 'alignItemsCenter' }}
+                justifyContent={{ default: 'justifyContentSpaceBetween' }}
+              >
+                <FlexItem style={{ marginRight: '0.5em' }}>
+                  <CardTitle>{__('System purpose')}</CardTitle>
+                </FlexItem>
+                <FlexItem>
+                  <Tooltip
+                    content={__('System purpose allows you to set the system\'s intended use on your network and improves the reporting of usage in Subscription Watch.')}
+                    position="top"
+                    enableFlip
+                    isContentLeftAligned
+                  >
+                    <OutlinedQuestionCircleIcon style={{ marginTop: '7px' }} color="gray" />
+                  </Tooltip>
+                </FlexItem>
+              </Flex>
+            </FlexItem>
+            {showEditButton && (
+              <FlexItem>
+                <Button variant="link" isSmall ouiaId="syspurpose-edit-button" onClick={() => setEditing(val => !val)}>{__('Edit')}</Button>
+              </FlexItem>)
+            }
+          </Flex>
+        </CardHeader>
+        <CardBody className="system-purpose-card-body">
+          <DescriptionList isHorizontal>
+            <DescriptionListGroup>
+              <DescriptionListTerm>{__('Role')}</DescriptionListTerm>
+              <DescriptionListDescription>
+                {dataIsLoading ? <Skeleton /> : purposeRole}
+              </DescriptionListDescription>
+              <DescriptionListTerm>{__('SLA')}</DescriptionListTerm>
+              <DescriptionListDescription>
+                {serviceLevel && (dataIsLoading ? <Skeleton /> : (
+                  <Label color="blue">{serviceLevel}</Label>
+                ))}
+              </DescriptionListDescription>
+              <DescriptionListTerm>{__('Usage type')}</DescriptionListTerm>
+              <DescriptionListDescription>
+                {purposeUsage && (dataIsLoading ? <Skeleton /> : (
+                  <Label color="blue">{purposeUsage}</Label>
+                ))}
+              </DescriptionListDescription>
+              <DescriptionListTerm>{__('Release version')}</DescriptionListTerm>
+              <DescriptionListDescription>
+                {dataIsLoading ? <Skeleton /> : releaseVersion}
+              </DescriptionListDescription>
+              {!!purposeAddons?.length && (
+                <>
+                  <DescriptionListTerm>{__('Add-ons')}</DescriptionListTerm>
+                  {dataIsLoading ? <Skeleton /> : (
+                    <DescriptionListDescription>
+                      <List isPlain>
+                        {purposeAddons.map(addon => (
+                          <ListItem key={addon}>{addon}</ListItem>
+                        ))}
+                      </List>
+                    </DescriptionListDescription>
+                  )}
+                </>
+              )
+              }
+            </DescriptionListGroup>
+          </DescriptionList>
+          {showEditButton && (
+            <SystemPurposeEditModal
+              isOpen={editing}
+              orgId={orgId}
+              closeModal={() => setEditing(false)}
+              hostName={hostDetails.name}
+              hostId={hostDetails.id}
+              {...sysPurposeProps}
+            />
+          )}
+        </CardBody>
+      </Card>
+    </GridItem>
+  );
+};
+
+SystemPurposeCard.propTypes = {
+  hostDetails: PropTypes.shape({
+    name: PropTypes.string,
+    organization_id: PropTypes.number,
+    id: PropTypes.number,
+    subscription_facet_attributes: PropTypes.shape({
+      installed_products: PropTypes.arrayOf(PropTypes.shape({
+        productId: PropTypes.string,
+        productName: PropTypes.string,
+      })),
+    }),
+    permissions: PropTypes.shape({
+      edit_hosts: PropTypes.bool,
+    }),
+  }),
+};
+
+SystemPurposeCard.defaultProps = {
+  hostDetails: {},
+};
+
+export default SystemPurposeCard;

data/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeCard.scss

@@ -0,0 +1,6 @@
+.system-purpose-card-body {
+  font-size: small;
+  .pf-c-label {
+    font-size: smaller;
+  }
+}

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

@@ -0,0 +1,6 @@
+export const defaultUsages = ['Production', 'Development/Test', 'Disaster Recovery'];
+export const defaultRoles = ['Red Hat Enterprise Linux Server', 'Red Hat Enterprise Linux Workstation', 'Red Hat Enterprise Linux Compute Node'];
+export const defaultServiceLevels = ['Self-Support', 'Standard', 'Premium'];
+
+export const ORGANIZATION = 'ORGANIZATION';
+export const AVAILABLE_RELEASE_VERSIONS = 'AVAILABLE_RELEASE_VERSIONS';

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: '',
+};