CreateImageWizard: move org id to custom component

Loading the organization ID is now done in the registration step. This
prevents the entire wizard from waiting on the org id and prevents the
wizard from remounting when the async getUser() completes.

src/Components/CreateImageWizard/CreateImageWizard.js

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import ImageCreator from './ImageCreator';
 import { useNavigate } from 'react-router-dom';
 import componentTypes from '@data-driven-forms/react-form-renderer/component-types';
-import { Button, Spinner } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { review, awsTarget, registration, googleCloudTarger, msAzureTarget, packages, imageOutput } from './steps';
 import './CreateImageWizard.scss';
@@ -109,14 +109,7 @@ const onSave = (values) => {
 const CreateImageWizard = () => {
     const dispatch = useDispatch();
     const navigate = useNavigate();
-    const [ user, setUser ] = useState();
-    useEffect(() => {
-        (async () => {
-            const userData = await insights?.chrome?.auth?.getUser() || {};
-            setUser(() => userData);
-        })();
-    }, []);
-    return user ? <ImageCreator
+    return <ImageCreator
         onClose={ () => navigate('/') }
         onSubmit={ ({ values, setIsSaving }) => {
             setIsSaving(() => true);
@@ -181,13 +174,13 @@ https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8/html/up
                         awsTarget,
                         googleCloudTarger,
                         msAzureTarget,
-                        registration(user),
+                        registration,
                         packages,
                         review,
                     ]
                 }
             ]
-        } } /> : <Spinner />;
+        } } />;
 };
 
 export default CreateImageWizard;

src/Components/CreateImageWizard/ImageCreator.js

@@ -9,6 +9,7 @@ import TargetEnvironment from './formComponents/TargetEnvironment';
 import Packages from './formComponents/Packages';
 import RadioWithPopover from './formComponents/RadioWithPopover';
 import AzureAuthButton from './formComponents/AzureAuthButton';
+import OrganizationID from './formComponents/OrganizationID';
 import Select from '@data-driven-forms/pf4-component-mapper/select';
 
 const ImageCreator = ({ schema, onSubmit, onClose, customComponentMapper, defaultArch, className, ...props }) => {
@@ -29,6 +30,7 @@ const ImageCreator = ({ schema, onSubmit, onClose, customComponentMapper, defaul
             },
             'radio-popover': RadioWithPopover,
             'azure-auth-button': AzureAuthButton,
+            'organization-id': OrganizationID,
             ...customComponentMapper
         } }
         onCancel={ onClose }

src/Components/CreateImageWizard/formComponents/OrganizationID.js

@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from 'react';
+import { Form, FormGroup, Spinner, TextInput } from '@patternfly/react-core';
+import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
+
+const OrganizationID = () => {
+    const { change } = useFormApi();
+    const [ orgId, setOrgId ] = useState();
+    useEffect(() => {
+        // const userData = insights?.chrome?.auth?.getUser();
+        // userData.then((user) => setOrgId(user?.identity?.internal?.org_id));
+        (async () => {
+            const userData = await insights?.chrome?.auth?.getUser();
+            setOrgId(userData?.identity?.internal?.org_id);
+            change('subscription-organization', userData?.identity?.internal?.org_id);
+        })();
+
+        return () => {
+            setOrgId(undefined);
+        };
+    }, []);
+
+    return (
+        <Form>
+            <FormGroup label="Organization ID" fieldId="organization-id" data-testid="organization-id">
+                { orgId ?
+                    <TextInput
+                        isDisabled
+                        type="text"
+                        id="organization-id"
+                        name="organization-id"
+                        value={ orgId } />
+                    : <Spinner isSVG size="md" /> }
+            </FormGroup>
+        </Form>
+    );
+};
+
+export default OrganizationID;

src/Components/CreateImageWizard/steps/registration.js

@@ -12,7 +12,7 @@ export const registerValues = {
     }
 };
 
-export default (user) => ({
+export default {
     title: 'Registration',
     name: 'registration',
     nextStep: 'packages',
@@ -34,13 +34,9 @@ export default (user) => ({
             }))
         },
         {
-            component: componentTypes.TEXT_FIELD,
+            component: 'organization-id',
             name: 'subscription-organization',
-            type: 'text',
             'data-testid': 'organization-id',
-            label: 'Organization ID',
-            initialValue: Number(user?.identity?.internal?.org_id),
-            isDisabled: true,
             condition: {
                 or: [
                     { when: 'register-system', is: 'subscribe-now-radio' },
@@ -67,4 +63,4 @@ export default (user) => ({
             ],
         }
     ]
-});
+};