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) => ({
             ],
         }
     ]
-});
+};

src/test/Components/CreateImageWizard/CreateImageWizard.test.js

@@ -336,9 +336,7 @@ describe('Step Registration', () => {
     beforeEach(async() => {
         window.HTMLElement.prototype.scrollTo = function() {};
 
-        await act(async () => {
-            history = renderWithReduxRouter(<CreateImageWizard />).history;
-        });
+        history = renderWithReduxRouter(<CreateImageWizard />).history;
 
         // select aws as upload destination
         const awsTile = screen.getByTestId('upload-aws');
@@ -372,16 +370,17 @@ describe('Step Registration', () => {
         const registrationRadio = screen.getByLabelText('Embed an activation key and register systems on first boot');
         userEvent.click(registrationRadio);
 
-        const organizationId = screen.getByLabelText('Organization ID');
-        expect(organizationId).toHaveValue('5');
-        expect(organizationId).toBeDisabled();
-
-        // can't getByLabelText b/c the label contains an extra <span>
-        // with a `*` to denote required
-        const activationKey = screen.getByTestId('subscription-activation');
-        expect(activationKey).toHaveValue('');
-        expect(activationKey).toBeEnabled();
-        // expect(activationKey).toBeRequired(); DDF does not support required fields
+        await waitFor(() => {
+            const organizationId = screen.getByLabelText('Organization ID');
+            expect(organizationId).toHaveValue('5');
+            expect(organizationId).toBeDisabled();
+            // can't getByLabelText b/c the label contains an extra <span>
+            // with a `*` to denote required
+            const activationKey = screen.getByTestId('subscription-activation');
+            expect(activationKey).toHaveValue('');
+            expect(activationKey).toBeEnabled();
+            // expect(activationKey).toBeRequired(); DDF does not support required fields
+        });
 
         userEvent.type(screen.getByTestId('subscription-activation'), '012345678901');
         screen.getByRole('button', { name: /Next/ }).click();
@@ -401,9 +400,6 @@ describe('Step Registration', () => {
         ]);
 
         // then click the first radio button which should remove any input fields
-        screen
-            .getByTestId('register-later-radio-button')
-            .click();
         const registerLaterRadio = screen.getByTestId('register-later-radio-button');
         userEvent.click(registerLaterRadio);
 
@@ -412,7 +408,7 @@ describe('Step Registration', () => {
         const sidebar = screen.getByRole('navigation');
         const anchor = getByText(sidebar, 'Review');
         anchor.click();
-        await screen.findByText('Register the system later');
+        screen.getByText('Register the system later');
     });
 });
 
@@ -708,13 +704,9 @@ describe('Click through all steps', () => {
     beforeEach(async () => {
         window.HTMLElement.prototype.scrollTo = function() {};
 
-        let reduxStore;
-        await act(async () => {
-            const rendered = renderWithReduxRouter(<CreateImageWizard />);
-            history = rendered.history;
-            reduxStore = rendered.reduxStore;
-        });
-        store = reduxStore;
+        const rendered = renderWithReduxRouter(<CreateImageWizard />);
+        history = rendered.history;
+        store = rendered.reduxStore;
     });
 
     test('with valid values', async () => {