Wizard: Add activation key information in Registration step

This adds a `TextList` with additional information for a chosen activation key in Registration step of the Wizard.

Component `AdditionalKeyInformation` is wrapped within a new component called `RegistrationKeyInformation` for the purpose of displaying the information on the Registration step. As the component needed to use `FormSpy` element to work properly in this context within the Data Driven Forms.
Without it the validation of the form didn't work as expected, because of a persisting reference to the element it was evaluated against.

Popover for an Activation key was also updated according to SPUR mocks.

package-lock.json

@@ -19,6 +19,7 @@
         "@reduxjs/toolkit": "^1.8.5",
         "@scalprum/react-core": "^0.2.8",
         "classnames": "2.3.2",
+        "lodash": "4.17.21",
         "react": "17.0.2",
         "react-dom": "17.0.2",
         "react-redux": "8.0.5",

package.json

@@ -18,6 +18,7 @@
     "@reduxjs/toolkit": "^1.8.5",
     "@scalprum/react-core": "^0.2.8",
     "classnames": "2.3.2",
+    "lodash": "4.17.21",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-redux": "8.0.5",

src/Components/CreateImageWizard/ImageCreator.js

@@ -15,6 +15,7 @@ import FileSystemConfiguration from './formComponents/FileSystemConfiguration';
 import ImageOutputReleaseSelect from './formComponents/ImageOutputReleaseSelect';
 import Packages from './formComponents/Packages';
 import RadioWithPopover from './formComponents/RadioWithPopover';
+import RegistrationKeyInformation from './formComponents/RegistrationKeyInformation';
 import Review from './formComponents/ReviewStep';
 import TargetEnvironment from './formComponents/TargetEnvironment';
 
@@ -51,6 +52,7 @@ const ImageCreator = ({
         'radio-popover': RadioWithPopover,
         'azure-auth-button': AzureAuthButton,
         'activation-keys': ActivationKeys,
+        'activation-key-information': RegistrationKeyInformation,
         'file-system-config-toggle': FileSystemConfigToggle,
         'file-system-configuration': FileSystemConfiguration,
         'image-output-release-select': ImageOutputReleaseSelect,

src/Components/CreateImageWizard/formComponents/ActivationKeyInformation.js

@@ -66,7 +66,7 @@ const ActivationKeyInformation = () => {
             {usage || 'Not defined'}
           </TextListItem>
           <TextListItem component={TextListItemVariants.dt}>
-            Additional <br /> repositories:
+            Additional repositories:
             <Popover
               bodyContent={
                 <TextContent>

src/Components/CreateImageWizard/formComponents/RegistrationKeyInformation.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { FormSpy } from '@data-driven-forms/react-form-renderer';
+import { FormGroup } from '@patternfly/react-core';
+import { isEmpty } from 'lodash';
+import PropTypes from 'prop-types';
+
+import ActivationKeyInformation from './ActivationKeyInformation';
+
+const RegistrationKeyInformation = ({ label, valueReference }) => {
+  return (
+    <FormSpy>
+      {({ values }) =>
+        isEmpty(values[valueReference]) ? null : (
+          <FormGroup label={label}>
+            <ActivationKeyInformation />
+          </FormGroup>
+        )
+      }
+    </FormSpy>
+  );
+};
+
+RegistrationKeyInformation.propTypes = {
+  label: PropTypes.node,
+  valueReference: PropTypes.node,
+};
+
+export default RegistrationKeyInformation;

src/Components/CreateImageWizard/steps/registration.js

@@ -23,8 +23,12 @@ const PopoverActivation = () => {
       bodyContent={
         <TextContent>
           <Text>
-            Activation keys allow you to register a system with appropriate
-            subscriptions and system purpose attached.
+            Activation keys enable you to register a system with appropriate
+            subscriptions, system purpose, and repositories attached.
+            <br />
+            <br />
+            If using an activation key with command line registration, you must
+            provide your organization&apos;s ID.
           </Text>
         </TextContent>
       }
@@ -143,5 +147,11 @@ export default {
         or: [{ when: 'register-system', is: 'register-later' }],
       },
     },
+    {
+      component: 'activation-key-information',
+      name: 'subscription-activation-key-information',
+      label: 'Selected activation key',
+      valueReference: 'subscription-activation-key',
+    },
   ],
 };