Fixes #36295 - Auto activation key selection if there's only one (#10518

)

webpack/components/extensions/RegistrationCommands/RegistrationCommandsPageHelpers.js

@@ -1,21 +1,27 @@
 // Activation Keys helpers
 
-export const validateAKField = (hostGroupId, userKeys, hgKeys) => {
+export const validateAKField = (
+  hasInteraction,
+  hostGroupId,
+  activationKeys,
+  userKeys,
+  hgKeys,
+) => {
   if (hostGroupId === '') {
-    return (userKeys?.length > 0 ? 'success' : 'error');
+    return userKeys?.length > 0 ? 'success' : 'error';
   }
 
-  if (userKeys === undefined && hgKeys === undefined) {
-    return ('default');
+  if (!hasInteraction && activationKeys?.length > 0) {
+    return 'default';
   }
 
-  return ((userKeys?.length > 0 || hgKeys?.length > 0) ? 'success' : 'error');
+  return userKeys?.length > 0 || hgKeys?.length > 0 ? 'success' : 'error';
 };
 
 export const akHasValidValue = (hostGroupId, userKeys, hgKeys) => {
   if (hostGroupId === '') {
-    return (userKeys?.length > 0);
+    return userKeys?.length > 0;
   }
 
-  return (hgKeys?.length > 0 || userKeys?.length > 0);
+  return hgKeys?.length > 0 || userKeys?.length > 0;
 };

webpack/components/extensions/RegistrationCommands/__tests__/__snapshots__/ActivationKeys.test.js.snap

@@ -11,13 +11,21 @@ exports[`ActivationKeys renders 1`] = `
       Create new activation key
     </a>
   }
+  helperTextInvalidIcon={
+    <ExclamationCircleIcon
+      color="currentColor"
+      noVerticalAlign={false}
+      size="sm"
+    />
+  }
   isRequired={true}
   label="Activation Keys"
   labelIcon={
     <LabelIcon
-      text="Activation key(s) for Subscription Manager."
+      text="Activation key(s) to use during registration"
     />
   }
+  onFocus={[Function]}
   validated="error"
 >
   <Select

webpack/components/extensions/RegistrationCommands/fields/ActivationKeys.js

@@ -1,16 +1,21 @@
-
 /* eslint-disable max-len, react/forbid-prop-types */
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import {
   FormGroup,
-  Select, SelectOption, SelectVariant,
+  Select,
+  SelectOption,
+  SelectVariant,
 } from '@patternfly/react-core';
 
 import LabelIcon from 'foremanReact/components/common/LabelIcon';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
 import { sprintf, translate as __ } from 'foremanReact/common/I18n';
 
-import { validateAKField, akHasValidValue } from '../RegistrationCommandsPageHelpers';
+import {
+  validateAKField,
+  akHasValidValue,
+} from '../RegistrationCommandsPageHelpers';
 
 const ActivationKeys = ({
   activationKeys,
@@ -23,14 +28,22 @@ const ActivationKeys = ({
   handleInvalidField,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const [hasInteraction, setHasInteraction] = useState(false);
 
   const updatePluginValues = (keys) => {
     onChange({ activationKeys: keys });
-    handleInvalidField('Activation Keys', akHasValidValue(hostGroupId, pluginValues?.activationKeys, hostGroupActivationKeys));
+    handleInvalidField(
+      'Activation Keys',
+      akHasValidValue(
+        hostGroupId,
+        pluginValues?.activationKeys,
+        hostGroupActivationKeys,
+      ),
+    );
   };
 
   const onSelect = (_e, value) => {
-    if (selectedKeys.find((key => key === value))) {
+    if (selectedKeys.find(key => key === value)) {
       updatePluginValues(selectedKeys.filter(sk => sk !== value));
     } else {
       updatePluginValues([...selectedKeys, value]);
@@ -39,48 +52,100 @@ const ActivationKeys = ({
 
   // Validate field when hostgroup is changed (host group may have some keys)
   useEffect(() => {
-    handleInvalidField('Activation Keys', akHasValidValue(hostGroupId, pluginValues?.activationKeys, hostGroupActivationKeys));
+    handleInvalidField(
+      'Activation Keys',
+      akHasValidValue(
+        hostGroupId,
+        pluginValues?.activationKeys,
+        hostGroupActivationKeys,
+      ),
+    );
   }, [handleInvalidField, hostGroupId, hostGroupActivationKeys, pluginValues]);
 
+  useEffect(() => {
+    if (activationKeys?.length === 1) {
+      onChange({ activationKeys: [activationKeys[0].name] });
+    }
+  }, [activationKeys, onChange]);
+
   return (
     <FormGroup
+      onFocus={() => setHasInteraction(true)}
       label={__('Activation Keys')}
       fieldId="activation_keys_field"
-      helperText={hostGroupActivationKeys && sprintf('From host group: %s', hostGroupActivationKeys)}
-      helperTextInvalid={activationKeys?.length === 0 ? <a href="/activation_keys/new">{__('Create new activation key')}</a> : __('No Activation Keys selected')}
-      validated={validateAKField(hostGroupId, pluginValues?.activationKeys, hostGroupActivationKeys)}
-      labelIcon={<LabelIcon text={__('Activation key(s) for Subscription Manager.')} />}
+      helperText={
+        hostGroupActivationKeys &&
+        sprintf('From host group: %s', hostGroupActivationKeys)
+      }
+      helperTextInvalid={
+        activationKeys?.length === 0 ? (
+          <a href="/activation_keys/new">{__('Create new activation key')}</a>
+        ) : (
+          __('No Activation Keys selected')
+        )
+      }
+      helperTextInvalidIcon={<ExclamationCircleIcon />}
+      labelIcon={
+        <LabelIcon text={__('Activation key(s) to use during registration')} />
+      }
+      validated={validateAKField(
+        hasInteraction,
+        hostGroupId,
+        activationKeys,
+        pluginValues?.activationKeys,
+        hostGroupActivationKeys,
+      )}
       isRequired
     >
       <Select
         ouiaId="activation-keys-field"
         selections={selectedKeys}
         variant={SelectVariant.typeaheadMulti}
-        onToggle={() => setIsOpen(!isOpen)}
+        onToggle={() => {
+          setHasInteraction(true);
+          setIsOpen(!isOpen);
+        }}
         onSelect={onSelect}
         onClear={() => updatePluginValues([])}
         isOpen={isOpen}
+        validated={
+          activationKeys?.length > 0
+            ? validateAKField(
+              hasInteraction,
+              hostGroupId,
+              activationKeys,
+                pluginValues?.activationKeys,
+                hostGroupActivationKeys,
+            )
+            : 'default'
+        }
         id="activation_keys_field"
         className="without_select2"
         isDisabled={isLoading || activationKeys?.length === 0}
-        placeholderText={activationKeys?.length === 0 ? __('No Activation keys to select') : ''}
+        placeholderText={
+          activationKeys?.length === 0 ? __('No Activation keys to select') : ''
+        }
       >
-        {activationKeys && activationKeys.map(ack => (
-          <SelectOption
-            key={ack.name}
-            value={ack.name}
-            description={(ack?.lce ? ack.lce : __('No environment'))}
-          />
-        ))}
+        {activationKeys &&
+          activationKeys.map(ack => (
+            <SelectOption
+              key={ack.name}
+              value={ack.name}
+              description={ack?.lce ? ack.lce : __('No environment')}
+            />
+          ))}
       </Select>
-    </FormGroup>);
+    </FormGroup>
+  );
 };
 
-
 ActivationKeys.propTypes = {
   activationKeys: PropTypes.array,
   selectedKeys: PropTypes.array,
-  hostGroupActivationKeys: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  hostGroupActivationKeys: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.array,
+  ]),
   hostGroupId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   pluginValues: PropTypes.objectOf(PropTypes.shape({})),
   onChange: PropTypes.func.isRequired,

webpack/components/extensions/RegistrationCommands/index.js

@@ -80,7 +80,7 @@ export const RegistrationActivationKeys = ({
     <ActivationKeys
       activationKeys={pluginData?.activationKeys}
       organizationId={organizationId}
-      selectedKeys={(pluginValues?.activationKeys || [])}
+      selectedKeys={pluginValues?.activationKeys || []}
       hostGroupActivationKeys={pluginData?.hostGroupActivationKeys}
       hostGroupId={hostGroupId}
       pluginValues={pluginValues}