katello 4.9.1 → 4.10.0.rc2

data/webpack/scenes/ActivationKeys/Details/components/DeleteModal.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+  useDispatch,
+} from 'react-redux';
+import PropTypes from 'prop-types';
+import { noop } from 'foremanReact/common/helpers';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { Modal, ModalVariant, Button, Icon, Title, Flex } from '@patternfly/react-core';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons';
+import { deleteActivationKey } from '../ActivationKeyActions';
+
+const DeleteModal = ({ isModalOpen, handleModalToggle, akId }) => {
+  const dispatch = useDispatch();
+
+  const handleDelete = () => {
+    dispatch(deleteActivationKey(akId));
+    handleModalToggle();
+    window.location.replace('/activation_keys');
+  };
+
+  return (
+    <Modal
+      ouiaId="ak-delete-modal"
+      variant={ModalVariant.small}
+      title={[
+        <Flex key="delete-modal-header">
+          <Icon status="warning" key="exclamation-triangle">
+            <ExclamationTriangleIcon />
+          </Icon>
+          <Title ouiaId="ak-delete-header" key="delete-ak-title" headingLevel="h5" size="2xl">
+            {__('Delete activation key?')}
+          </Title>
+        </Flex>,
+      ]}
+      isOpen={isModalOpen}
+      onClose={handleModalToggle}
+      actions={[
+        <Button ouiaId="delete-button" key="delete" variant="danger" onClick={handleDelete}>
+          {__('Delete')}
+        </Button>,
+        <Button ouiaId="cancel-button" key="cancel" variant="link" onClick={handleModalToggle}>
+          {__('Cancel')}
+        </Button>,
+      ]}
+    >
+      {__('Activation Key will no longer be available for use. This operation cannot be undone.')}
+    </Modal>
+  );
+};
+
+
+DeleteModal.propTypes = {
+  isModalOpen: PropTypes.bool,
+  handleModalToggle: PropTypes.func,
+  akId: PropTypes.string.isRequired,
+};
+
+DeleteModal.defaultProps = {
+  isModalOpen: false,
+  handleModalToggle: noop,
+};
+
+export default DeleteModal;

data/webpack/scenes/ActivationKeys/Details/components/EditModal.js

@@ -0,0 +1,199 @@
+import React, {
+  useEffect,
+  useState,
+} from 'react';
+import {
+  useDispatch,
+} from 'react-redux';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  Modal,
+  ModalVariant,
+  Button,
+  Form,
+  FormGroup,
+  TextInput,
+  Checkbox,
+  NumberInput,
+  TextArea,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { getActivationKey, putActivationKey } from '../ActivationKeyActions';
+
+const EditModal = ({ akDetails, akId }) => {
+  const dispatch = useDispatch();
+
+  const {
+    name, description, maxHosts, unlimitedHosts, usageCount,
+  } = akDetails;
+
+  const initialMaxHosts = maxHosts || '';
+
+  const [nameValue, setNameValue] = useState(name);
+  const [descriptionValue, setDescriptionValue] = useState(description);
+  const [maxHostsValue, setMaxHostsValue] = useState(initialMaxHosts);
+  const [isUnlimited, setUnlimited] = useState(unlimitedHosts);
+  const [isModalOpen, setModalOpen] = useState(false);
+
+  useEffect(() => {
+    setNameValue(name);
+    setDescriptionValue(description);
+    setMaxHostsValue(initialMaxHosts);
+    setUnlimited(unlimitedHosts);
+  }, [name, description, initialMaxHosts, unlimitedHosts]);
+
+  const refreshActivationKeyDetails = () => dispatch(getActivationKey(akId));
+
+  const handleModalToggle = () => {
+    setModalOpen(!isModalOpen);
+  };
+  const handleSave = () => {
+    dispatch(putActivationKey(
+      akId,
+      {
+        name: nameValue,
+        description: descriptionValue,
+        max_hosts: maxHostsValue || (usageCount !== 0 ? usageCount : usageCount + 1),
+        unlimited_hosts: isUnlimited,
+      },
+      refreshActivationKeyDetails,
+    ));
+    handleModalToggle();
+  };
+
+  const resetModalValues = () => {
+    setNameValue(name);
+    setDescriptionValue(description);
+    setMaxHostsValue(initialMaxHosts);
+    setUnlimited(unlimitedHosts);
+  };
+
+  const handleClose = () => {
+    resetModalValues();
+    handleModalToggle();
+  };
+
+  const handleNameInputChange = (value) => {
+    setNameValue(value);
+  };
+  const handleDescriptionInputChange = (value) => {
+    setDescriptionValue(value);
+  };
+
+  const onMinus = () => {
+    setMaxHostsValue(oldValue => (oldValue || 0) - 1);
+  };
+  const onChange = (event) => {
+    let newValue = (event.target.value === '' ? event.target.value : Math.round(+event.target.value));
+    if (newValue < 1 && newValue !== '') {
+      newValue = 1;
+    }
+    setMaxHostsValue(newValue);
+  };
+  const onPlus = () => {
+    setMaxHostsValue(oldValue => (oldValue || 0) + 1);
+  };
+
+  const handleCheckBox = () => {
+    setUnlimited(prevUnlimited => !prevUnlimited);
+    setMaxHostsValue(usageCount > 0 ? usageCount : usageCount + 1);
+  };
+
+  return (
+    <>
+      <Button ouiaId="ak-edit-button" aria-label="edit-button" variant="secondary" onClick={handleModalToggle}>
+        {__('Edit')}
+      </Button>
+      <Modal
+        ouiaId="ak-edit-modal"
+        variant={ModalVariant.small}
+        title={__('Edit activation key')}
+        description={__(`Select attributes for ${akDetails.name}`)}
+        isOpen={isModalOpen}
+        onClose={handleClose}
+        actions={[
+          <Button ouiaId="edit-modal-save-button" key="create" variant="primary" form="modal-with-form-form" onClick={handleSave}>
+            {__('Save')}
+          </Button>,
+          <Button ouiaId="cancel-button" key="cancel" variant="link" onClick={handleClose}>
+            {__('Cancel')}
+          </Button>,
+        ]}
+      >
+        <Form isHorizontal>
+          <FormGroup
+            label={__('Name')}
+          >
+            <TextInput
+              ouiaId="ak-name-input"
+              id="ak-name-input"
+              type="text"
+              value={nameValue}
+              onChange={handleNameInputChange}
+            />
+          </FormGroup>
+          <FormGroup
+            label={__('Host Limit')}
+          >
+            <Stack hasGutter>
+              <StackItem>
+                <NumberInput
+                  value={maxHostsValue}
+                  min={1}
+                  onMinus={onMinus}
+                  onChange={onChange}
+                  onPlus={onPlus}
+                  inputName="input"
+                  inputAriaLabel="number input"
+                  minusBtnAriaLabel="minus"
+                  plusBtnAriaLabel="plus"
+                  isDisabled={isUnlimited}
+                  allowEmptyInput
+                />
+              </StackItem>
+              <StackItem>
+                <Checkbox
+                  ouiaId="unlimited-checkbox"
+                  id="unlimited-checkbox"
+                  label={__('Unlimited')}
+                  isChecked={isUnlimited}
+                  onChange={handleCheckBox}
+                />
+              </StackItem>
+            </Stack>
+          </FormGroup>
+          <FormGroup
+            label={__('Description')}
+          >
+            <TextArea
+              id="ak-description"
+              type="text"
+              placeholder={__('Description')}
+              value={descriptionValue || ''}
+              onChange={handleDescriptionInputChange}
+            />
+          </FormGroup>
+        </Form>
+      </Modal>
+    </>
+  );
+};
+
+export default EditModal;
+
+EditModal.propTypes = {
+  akDetails: PropTypes.shape({
+    name: PropTypes.string,
+    maxHosts: PropTypes.number,
+    description: PropTypes.string,
+    unlimitedHosts: PropTypes.bool,
+    usageCount: PropTypes.number,
+  }),
+  akId: PropTypes.string.isRequired,
+};
+
+EditModal.defaultProps = {
+  akDetails: {},
+};

data/webpack/scenes/ActivationKeys/Details/index.js

@@ -0,0 +1,3 @@
+import ActivationKeyDetails from './ActivationKeyDetails';
+
+export default ActivationKeyDetails;

data/webpack/scenes/AlternateContentSources/Create/Steps/AcsUrlPaths.js

@@ -21,7 +21,7 @@ const AcsUrlPaths = () => {
 
   const baseURLplaceholder = acsType === 'rhui' ?
     'https://rhui-server.example.com/pulp/content' :
-    'http:// or https://';
+    'http://, https:// or file://';
   const helperTextInvalid = acsType === 'rhui' ?
     'http://rhui-server.example.com/pulp/content or https://rhui-server.example.com/pulp/content' :
     'http://, https:// or file://';

data/webpack/scenes/AlternateContentSources/Details/EditModals/ACSEditCredentials.js

@@ -273,11 +273,11 @@ const ACSEditCredentials = ({ onClose, acsId, acsDetails }) => {
             fieldId="client_key"
           >
             <FormSelect
-              ouiaId="sslCAcert-select"
+              ouiaId="ssl_client_key_select"
               isRequired
               value={acsSslClientKey}
               onChange={value => setAcsSslClientKey(value)}
-              aria-label="sslCAcert_select"
+              aria-label="ssl_client_key_select"
             >
               {
                 [
@@ -314,8 +314,8 @@ const ACSEditCredentials = ({ onClose, acsId, acsDetails }) => {
         />
         <ActionGroup>
           <Button
-            ouiaId="edit-acs-details-submit"
-            aria-label="edit_acs_details"
+            ouiaId="edit-acs-credentials-submit"
+            aria-label="edit_acs_credentials"
             variant="primary"
             isDisabled={saving}
             isLoading={saving}
@@ -323,7 +323,12 @@ const ACSEditCredentials = ({ onClose, acsId, acsDetails }) => {
           >
             {__('Edit')}
           </Button>
-          <Button ouiaId="edit-acs-details-cancel" variant="link" onClick={onClose}>
+          <Button
+            ouiaId="edit-acs-credentials-cancel"
+            aria-label="edit-acs-credentials-cancel"
+            variant="link"
+            onClick={onClose}
+          >
             {__('Cancel')}
           </Button>
         </ActionGroup>

data/webpack/scenes/AlternateContentSources/Details/EditModals/ACSEditProducts.js

@@ -88,8 +88,8 @@ const ACSEditProducts = ({ onClose, acsId, acsDetails }) => {
         />
         <ActionGroup>
           <Button
-            ouiaId="edit-acs-details-submit"
-            aria-label="edit_acs_details"
+            ouiaId="edit-acs-products-submit"
+            aria-label="edit-acs-products"
             variant="primary"
             isDisabled={saving}
             isLoading={saving}
@@ -97,7 +97,12 @@ const ACSEditProducts = ({ onClose, acsId, acsDetails }) => {
           >
             {__('Edit')}
           </Button>
-          <Button ouiaId="edit-acs-smart-proxies-cancel" variant="link" onClick={onClose}>
+          <Button
+            ouiaId="edit-acs-products-cancel"
+            aria-label="edit-acs-products-cancel"
+            variant="link"
+            onClick={onClose}
+          >
             {__('Cancel')}
           </Button>
         </ActionGroup>

data/webpack/scenes/AlternateContentSources/Details/EditModals/ACSEditSmartProxies.js

@@ -118,8 +118,8 @@ const ACSEditSmartProxies = ({ onClose, acsId, acsDetails }) => {
         </FormGroup>
         <ActionGroup>
           <Button
-            ouiaId="edit-acs-details-submit"
-            aria-label="edit_acs_details"
+            ouiaId="edit-acs-smart-proxies-submit"
+            aria-label="edit-acs-smart-proxies"
             variant="primary"
             isDisabled={saving}
             isLoading={saving}
@@ -127,7 +127,12 @@ const ACSEditSmartProxies = ({ onClose, acsId, acsDetails }) => {
           >
             {__('Edit')}
           </Button>
-          <Button ouiaId="edit-acs-smart-proxies-cancel" variant="link" onClick={onClose}>
+          <Button
+            ouiaId="edit-acs-smart-proxies-cancel"
+            aria-label="edit-acs-smart-proxies-cancel"
+            variant="link"
+            onClick={onClose}
+          >
             {__('Cancel')}
           </Button>
         </ActionGroup>

data/webpack/scenes/AlternateContentSources/Details/EditModals/ACSEditURLPaths.js

@@ -16,7 +16,7 @@ const ACSEditURLPaths = ({ onClose, acsId, acsDetails }) => {
   const urlValidated = (acsUrl === '' || isValidUrl(acsUrl, acsType)) ? 'default' : 'error';
   const baseURLplaceholder = acsType === 'rhui' ?
     'https://rhui-server.example.com/pulp/content' :
-    'http:// or https://';
+    'http://, https:// or file://';
   const helperTextInvalid = acsType === 'rhui' ?
     'http://rhui-server.example.com/pulp/content or https://rhui-server.example.com/pulp/content' :
     'http://, https:// or file://';

data/webpack/scenes/AlternateContentSources/Details/__tests__/ACSEdits.test.js

@@ -229,9 +229,9 @@ test('Can edit products in a simplified ACS details edit modal', async (done) =>
   // Can open modal
   await patientlyWaitFor(() => {
     expect(queryAllByText('Edit')).toHaveLength(4);
-    expect(getByLabelText('edit_acs_details')).toBeInTheDocument();
+    expect(getByLabelText('edit-acs-products')).toBeInTheDocument();
   });
-  const saveButton = getByLabelText('edit_acs_details');
+  const saveButton = getByLabelText('edit-acs-products');
   fireEvent.click(saveButton);
   // can close modal
   await patientlyWaitFor(() => {

data/webpack/scenes/AlternateContentSources/MainTable/ACSTable.js

@@ -172,7 +172,7 @@ const ACSTable = () => {
                   {__('Last refresh :')}
                 </TextListItem>
                 <TextListItem
-                  aria-label="name_text_value"
+                  aria-label="last_refresh_text_value"
                   component={TextListItemVariants.dd}
                 >
                   <LastSync

data/webpack/scenes/ContentViews/Details/ComponentContentViews/ComponentContentViewAddModal.js

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import {
-  Flex, Modal, ModalVariant, FormSelect,
-  FormSelectOption, Checkbox, Form, FormGroup,
+  Flex, Modal, ModalVariant, Select, SelectVariant,
+  SelectOption, Checkbox, Form, FormGroup,
   ActionGroup, Button, Tooltip,
 } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
@@ -12,13 +12,12 @@ import { STATUS } from 'foremanReact/constants';
 import {
   selectCVDetails,
   selectCVDetailStatus,
-  selectCVDetailError,
 } from '../../Details/ContentViewDetailSelectors';
 import { addComponent } from '../ContentViewDetailActions';
 import { CONTENT_VIEW_NEEDS_PUBLISH } from '../../ContentViewsConstants';
 
 const ComponentContentViewAddModal = ({
-  cvId, componentCvId, componentId, latest, show, setIsOpen,
+  cvId, componentCvId, componentId, latest, componentVersionId, show, setIsOpen,
 }) => {
   const dispatch = useDispatch();
   const componentDetails = useSelector(
@@ -29,26 +28,20 @@ const ComponentContentViewAddModal = ({
     state => selectCVDetailStatus(state, componentCvId),
     shallowEqual,
   );
-  const componentError = useSelector(
-    state => selectCVDetailError(state, componentCvId),
-    shallowEqual,
-  );
-  const [cvName, setCvName] = useState('');
-  const [options, setOptions] = useState([]);
+  const cvName = componentDetails?.name ?? '';
+  const options = useMemo(() => (componentDetails?.versions ?? []).map(item => ({
+    value: item.id, label: __(`Version ${item.version}`), description: item.description, publishedAtWords: __(` (${item.published_at_words} ago)`),
+  })), [componentDetails?.versions]);
   const [formLatest, setFormLatest] = useState(componentId ? latest : false);
   const [selected, setSelected] = useState(null);
+  const [prevOptions, setPrevOptions] = useState(options);
+  const [cvVersionSelectOpen, setCvVersionSelectOpen] = useState(false);
   const versionsLoading = componentStatus === STATUS.PENDING;
 
-  useEffect(() => {
-    if (!versionsLoading && componentDetails) {
-      const { name, versions } = componentDetails;
-      const versionMutable = versions;
-      setCvName(name);
-      const opt = versionMutable.map(item => ({ value: item.id, label: __(`Version ${item.version}`) }));
-      setOptions([...opt].reverse());
-      setSelected(opt.slice(-1)[0].value);
-    }
-  }, [componentDetails, componentStatus, componentError, versionsLoading]);
+  if (options !== prevOptions) {
+    setPrevOptions(options);
+    setSelected(componentVersionId ?? options[0]?.value);
+  }
 
   const getAddParams = () => {
     if (formLatest) {
@@ -66,7 +59,7 @@ const ComponentContentViewAddModal = ({
 
   const updateLatest = (checked) => {
     setFormLatest(checked);
-    if (checked) setSelected(options[0]);
+    if (checked) setSelected(options[0]?.value);
   };
 
   const onSubmit = () => {
@@ -104,20 +97,30 @@ const ComponentContentViewAddModal = ({
       }}
       >
         <FormGroup label={__('Version')} isRequired fieldId="version">
-          <FormSelect
-            value={selected}
+          <Select
+            variant={SelectVariant.typeahead}
+            selections={selected}
             isDisabled={formLatest || options.length === 1}
-            onChange={value => setSelected(value)}
+            onSelect={(event, value) => { setSelected(value); setCvVersionSelectOpen(false); }}
             id="horzontal-form-title"
             name="horizontal-form-title"
+            isOpen={cvVersionSelectOpen}
+            onToggle={isExpanded => setCvVersionSelectOpen(isExpanded)}
             aria-label="CvVersion"
             ouiaId="select-cv-version"
+            menuAppendTo="parent"
+            maxHeight="20rem"
           >
-            {options.map((option, index) => (
-              // eslint-disable-next-line react/no-array-index-key
-              <FormSelectOption key={index} value={option.value} label={option.label} />
+            {options.map(option => (
+              <SelectOption
+                key={option.value}
+                value={option.value}
+                description={option.description}
+              >
+                <>{option.label}{option.publishedAtWords}</>
+              </SelectOption>
             ))}
-          </FormSelect>
+          </Select>
         </FormGroup>
         <FormGroup fieldId="latest">
           <Flex style={{ display: 'inline-flex' }}>
@@ -162,6 +165,10 @@ ComponentContentViewAddModal.propTypes = {
     PropTypes.string,
   ]),
   latest: PropTypes.bool,
+  componentVersionId: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+  ]),
   show: PropTypes.bool,
   setIsOpen: PropTypes.func,
 };
@@ -169,6 +176,7 @@ ComponentContentViewAddModal.propTypes = {
 ComponentContentViewAddModal.defaultProps = {
   componentId: null,
   latest: false,
+  componentVersionId: null,
   show: false,
   setIsOpen: null,
 };

data/webpack/scenes/ContentViews/Details/ComponentContentViews/ComponentContentViewBulkAddModal.js

@@ -1,9 +1,8 @@
-import React, { useState, useMemo } from 'react';
-import { last } from 'lodash';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import {
-  Flex, Modal, ModalVariant, FormSelect,
-  FormSelectOption, Checkbox, Form, FormGroup,
+  Flex, Modal, ModalVariant, Select, SelectVariant,
+  SelectOption, Checkbox, Form, FormGroup,
   ActionGroup, Button, Card, CardTitle, CardBody, Tooltip,
 } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
@@ -13,25 +12,18 @@ import { addComponent } from '../ContentViewDetailActions';
 
 const ComponentContentViewBulkAddModal = ({ cvId, rowsToAdd, onClose }) => {
   const dispatch = useDispatch();
-  const [versionSelectOptions, setVersionSelectOptions] = useState({});
-  const [selectedVersion, setSelectedVersion] = useState({});
-  const [selectedComponentLatest, setSelectedComponentLatest] = useState({});
-
-  useMemo(() => {
-    const versionSelect = {};
-    const versionSelectedOption = {};
-    const componentLatest = {};
-    rowsToAdd.forEach((row) => {
-      const { componentCvVersions: versions, componentCvName: name } = row;
-      const sortedVersions = [].concat(versions).sort((a, b) => (a.id > b.id ? 1 : -1));
-      versionSelect[name] = sortedVersions;
-      versionSelectedOption[name] = last(sortedVersions)?.id;
-      componentLatest[name] = sortedVersions && sortedVersions?.length === 0;
-    });
-    setVersionSelectOptions(versionSelect);
-    setSelectedVersion(versionSelectedOption);
-    setSelectedComponentLatest(componentLatest);
-  }, [rowsToAdd, setVersionSelectOptions, setSelectedVersion, setSelectedComponentLatest]);
+  const versionSelect = {};
+  const versionSelectedOption = {};
+  const componentLatest = {};
+  rowsToAdd.forEach((row) => {
+    const { componentCvVersions: versions, componentCvName: name } = row;
+    versionSelect[name] = versions;
+    versionSelectedOption[name] = versions[0]?.id;
+    componentLatest[name] = versions && versions?.length === 0;
+  });
+  const [selectedVersion, setSelectedVersion] = useState(versionSelectedOption);
+  const [selectedComponentLatest, setSelectedComponentLatest] = useState(componentLatest);
+  const [cvVersionSelectOpen, setCvVersionSelectOpen] = useState('');
 
   const bulkAddParams = () => rowsToAdd.map((row) => {
     const { componentCvId: id, componentCvName: name } = row;
@@ -64,26 +56,45 @@ const ComponentContentViewBulkAddModal = ({ cvId, rowsToAdd, onClose }) => {
         onSubmit();
       }}
       >
-        {Object.keys(versionSelectOptions).sort().map(componentCvName => (
-          <Card ouiaId="componentCvName" key={componentCvName}>
+        {Object.keys(versionSelect).sort().map(componentCvName => (
+          <Card
+            ouiaId="componentCvName"
+            aria-label="componentCvName"
+            key={componentCvName}
+          >
             <CardTitle aria-label={componentCvName}>{componentCvName}</CardTitle>
             <CardBody>
               <FormGroup label={__('Version')} isRequired fieldId="version">
-                <FormSelect
-                  value={selectedVersion[componentCvName]}
+                <Select
+                  variant={SelectVariant.typeahead}
+                  selections={selectedVersion[componentCvName]}
                   ouiaId="select-version"
-                  isDisabled={versionSelectOptions[componentCvName].length <= 1}
-                  onChange={value =>
-                    setSelectedVersion({ ...selectedVersion, ...{ [componentCvName]: value } })}
-                  id={`horzontal-form-title-${componentCvName}`}
+                  isDisabled={versionSelect[componentCvName].length <= 1 ||
+                      selectedComponentLatest[componentCvName]}
+                  onSelect={(__event, value) => {
+                    setSelectedVersion({ ...selectedVersion, ...{ [componentCvName]: value } });
+                    setCvVersionSelectOpen('');
+                  }
+                  }
+                  isOpen={cvVersionSelectOpen === componentCvName}
+                  onToggle={isExpanded => setCvVersionSelectOpen(isExpanded ? componentCvName : '')}
+                  id={`horzontal-form-title-${componentCvName}-${cvVersionSelectOpen[componentCvName]}`}
                   name="horizontal-form-title"
                   aria-label={`version-select-${componentCvName}`}
+                  menuAppendTo="parent"
+                  maxHeight="20rem"
                 >
-                  {versionSelectOptions[componentCvName].map((version, index) => (
-                    // eslint-disable-next-line react/no-array-index-key
-                    <FormSelectOption aria-label={`${componentCvName}-${version.version}`} key={index} value={version.id} label={`${__('Version')} ${version.version}`} />
+                  {versionSelect[componentCvName].map(version => (
+                    <SelectOption
+                      key={`${componentCvName}-${version.version}`}
+                      aria-label={`${componentCvName}-${version.version}`}
+                      value={version.id}
+                      description={version.description}
+                    >
+                      <>{`${__('Version')} ${version.version}`}{__(` (${version.published_at_words} ago)`)}</>
+                    </SelectOption>
                   ))}
-                </FormSelect>
+                </Select>
               </FormGroup>
               <FormGroup style={{ marginTop: '1em' }}>
                 <Flex style={{ display: 'inline-flex' }}>
@@ -94,11 +105,16 @@ const ComponentContentViewBulkAddModal = ({ cvId, rowsToAdd, onClose }) => {
                     name="latest"
                     label={__('Always update to latest version')}
                     isChecked={selectedComponentLatest[componentCvName]}
-                    onChange={checked =>
+                    onChange={(checked) => {
                       setSelectedComponentLatest({
                         ...selectedComponentLatest,
                         ...{ [componentCvName]: checked },
-                      })
+                      });
+                      setSelectedVersion({
+                        ...selectedVersion,
+                        ...{ [componentCvName]: versionSelect[componentCvName][0]?.id },
+                      });
+                    }
                     }
                   />
                   <Tooltip