From 10a40aaec4dda8dd67bc4bf8444ddacc1cc879db Mon Sep 17 00:00:00 2001
From: regexowl <ksimicko@redhat.com>
Date: Mon, 14 Jul 2025 14:11:37 +0200
Subject: [PATCH] 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.
---
 .../components/ActivationKeysList.tsx         |  9 +---
 .../components/PopoverActivation.tsx          | 51 -------------------
 .../steps/Registration/index.tsx              | 46 ++++++++++++++---
 .../steps/Review/ReviewStepTextLists.tsx      |  3 +-
 4 files changed, 41 insertions(+), 68 deletions(-)
 delete mode 100644 src/Components/CreateImageWizard/steps/Registration/components/PopoverActivation.tsx

diff --git a/src/Components/CreateImageWizard/steps/Registration/components/ActivationKeysList.tsx b/src/Components/CreateImageWizard/steps/Registration/components/ActivationKeysList.tsx
index 4ef779b2..b568289f 100644
--- a/src/Components/CreateImageWizard/steps/Registration/components/ActivationKeysList.tsx
+++ b/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}
diff --git a/src/Components/CreateImageWizard/steps/Registration/components/PopoverActivation.tsx b/src/Components/CreateImageWizard/steps/Registration/components/PopoverActivation.tsx
deleted file mode 100644
index cf25e94c..00000000
--- a/src/Components/CreateImageWizard/steps/Registration/components/PopoverActivation.tsx
+++ /dev/null
@@ -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;
diff --git a/src/Components/CreateImageWizard/steps/Registration/index.tsx b/src/Components/CreateImageWizard/steps/Registration/index.tsx
index 2a3b1285..82564f17 100644
--- a/src/Components/CreateImageWizard/steps/Registration/index.tsx
+++ b/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 &&
diff --git a/src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx b/src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx
index 16bc04d0..446fc31e 100644
--- a/src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx
+++ b/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 />