Wizard: Move org ID into a copy-able field

This moves the org ID into a copy-able field and updates the permanent info as per mocks.

The popover that previously included the org ID is removed from mocks.

src/Components/CreateImageWizard/steps/Registration/components/ActivationKeysList.tsx

@@ -16,7 +16,6 @@ import {
 import { useAddNotification } from '@redhat-cloud-services/frontend-components-notifications/hooks';
 
 import ManageKeysButton from './ManageKeysButton';
-import PopoverActivation from './PopoverActivation';
 
 import { CDN_PROD_URL, CDN_STAGE_URL } from '../../../../../constants';
 import { useAppDispatch, useAppSelector } from '../../../../../store/hooks';
@@ -243,13 +242,7 @@ const ActivationKeysList = () => {
 
   return (
     <>
-      <FormGroup
-        label={
-          <>
-            Activation key to use for this image <PopoverActivation />
-          </>
-        }
-      >
+      <FormGroup label="Activation key to use for this image">
         <Select
           isScrollable
           isOpen={isOpen}

src/Components/CreateImageWizard/steps/Registration/components/PopoverActivation.tsx

@@ -1,51 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import { Button, Popover, Spinner, Content } from '@patternfly/react-core';
-import { HelpIcon } from '@patternfly/react-icons';
-import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
-
-const PopoverActivation = () => {
-  const { auth } = useChrome();
-  const [orgId, setOrgId] = useState<string | undefined>(undefined);
-
-  useEffect(() => {
-    (async () => {
-      const userData = await auth?.getUser();
-      const id = userData?.identity?.internal?.org_id;
-      setOrgId(id);
-    })();
-  });
-
-  return (
-    <Popover
-      hasAutoWidth
-      maxWidth="35rem"
-      bodyContent={
-        <Content>
-          <Content>
-            Activation keys enable you to register a system with appropriate
-            subscriptions, system purpose, and repositories attached.
-          </Content>
-          <Content>
-            If using an activation key with command line registration, you must
-            provide your organization&apos;s ID.
-          </Content>
-          {orgId ? (
-            <Content>Your organization&apos;s ID is {orgId}</Content>
-          ) : (
-            <Spinner size="md" />
-          )}
-        </Content>
-      }
-    >
-      <Button
-        icon={<HelpIcon />}
-        variant="plain"
-        aria-label="Activation key popover"
-        className="pf-v6-u-pl-sm pf-v6-u-pt-0 pf-v6-u-pb-0 pf-v6-u-pr-0"
-      />
-    </Popover>
-  );
-};
-
-export default PopoverActivation;

src/Components/CreateImageWizard/steps/Registration/index.tsx

@@ -1,6 +1,15 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
-import { Content, Form, Title, FormGroup } from '@patternfly/react-core';
+import {
+  Form,
+  Title,
+  FormGroup,
+  FormHelperText,
+  ClipboardCopy,
+  HelperText,
+  HelperTextItem,
+} from '@patternfly/react-core';
+import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 
 import ActivationKeyInformation from './components/ActivationKeyInformation';
 import ActivationKeysList from './components/ActivationKeysList';
@@ -14,6 +23,17 @@ import {
 } from '../../../../store/wizardSlice';
 
 const RegistrationStep = () => {
+  const { auth } = useChrome();
+  const [orgId, setOrgId] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    (async () => {
+      const userData = await auth?.getUser();
+      const id = userData?.identity?.internal?.org_id;
+      setOrgId(id);
+    })();
+  }, []);
+
   const activationKey = useAppSelector(selectActivationKey);
   const registrationType = useAppSelector(selectRegistrationType);
   return (
@@ -21,11 +41,23 @@ const RegistrationStep = () => {
       <Title headingLevel="h1" size="xl">
         Register systems using this image
       </Title>
-      <Content>
-        You can either automatically register your systems with Red Hat to
-        enhance security and track your spending or choose to register your
-        system during initial boot.
-      </Content>
+      <FormGroup label="Organization ID">
+        <ClipboardCopy
+          hoverTip="Copy to clipboard"
+          clickTip="Successfully copied to clipboard!"
+          variant="inline-compact"
+        >
+          {orgId || ''}
+        </ClipboardCopy>
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>
+              If using an activation key with command line registration, you
+              must provide your organization&apos;s ID
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      </FormGroup>
       <Registration />
       {registrationType === 'register-satellite' && <SatelliteRegistration />}
       {!process.env.IS_ON_PREMISE &&

src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx

@@ -88,7 +88,6 @@ import {
 import { MajorReleasesLifecyclesChart } from '../ImageOutput/components/ReleaseLifecycle';
 import OscapProfileInformation from '../Oscap/components/OscapProfileInformation';
 import ActivationKeyInformation from '../Registration/components/ActivationKeyInformation';
-import PopoverActivation from '../Registration/components/PopoverActivation';
 
 const ExpirationWarning = () => {
   return (
@@ -690,7 +689,7 @@ export const RegisterNowList = () => {
             </Content>
           </Content>
           <Content component={ContentVariants.dt} className="pf-v6-u-min-width">
-            Activation key <PopoverActivation />
+            Activation key
           </Content>
           <Content component={ContentVariants.dd}>
             <ActivationKeyInformation />