Call api to create image

Copy over the previous call to create image with new values from DDF wizard

src/Components/CreateImageWizard/CreateImageWizard.js

@@ -6,10 +6,111 @@ import { Button, Spinner } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { review, awsTarget, registration, googleCloudTarger, msAzureTarget, packages, imageOutput } from './steps';
 import './CreateImageWizard.scss';
+import { useDispatch } from 'react-redux';
+import api from '../../api';
+import { composeAdded } from '../../store/actions/actions';
+import { addNotification } from '@redhat-cloud-services/frontend-components-notifications/redux';
+
+const onSave = (values) => {
+    let customizations = {
+        packages: values['selected-packages']?.map(p => p.name),
+    };
+
+    if (values['subscription-activation']) {
+        customizations.subscription = {
+            'activation-key': values['subscription-activation'],
+            insights: true,
+            organization: Number(values['subscription-organization']),
+            'server-url': 'subscription.rhsm.redhat.com',
+            'base-url': 'https://cdn.redhat.com/',
+        };
+    }
+
+    let requests = [];
+    if (values['target-environment']?.aws) {
+        let request = {
+            distribution: values.release,
+            image_requests: [
+                {
+                    architecture: 'x86_64',
+                    image_type: 'ami',
+                    upload_request: {
+                        type: 'aws',
+                        options: {
+                            share_with_accounts: [ values['aws-account-id'] ],
+                        },
+                    },
+                }],
+            customizations,
+        };
+        requests.push(request);
+    }
+
+    if (values['target-environment']?.google) {
+        let share = '';
+        switch (values['google-account-type']) {
+            case 'googleAccount':
+                share = `user:${values['google-email']}`;
+                break;
+            case 'serviceAccount':
+                share = `serviceAccount:${values['google-email']}`;
+                break;
+            case 'googleGroup':
+                share = `group:${values['google-email']}`;
+                break;
+            case 'domain':
+                share = `domain:${values['google-domain']}`;
+                break;
+        }
+
+        let request = {
+            distribution: values.release,
+            image_requests: [
+                {
+                    architecture: 'x86_64',
+                    image_type: 'vhd',
+                    upload_request: {
+                        type: 'gcp',
+                        options: {
+                            share_with_accounts: [ share ],
+                        },
+                    },
+                }],
+            customizations,
+        };
+
+        requests.push(request);
+    }
+
+    if (values['target-environment']?.azure) {
+        let request = {
+            distribution: values.release,
+            image_requests: [
+                {
+                    architecture: 'x86_64',
+                    image_type: 'vhd',
+                    upload_request: {
+                        type: 'azure',
+                        options: {
+                            tenant_id: values['azure-tenant-id'],
+                            subscription_id: values['azure-subscription-id'],
+                            resource_group: values['azure-resource-group'],
+                        },
+                    },
+                }],
+            customizations,
+        };
+        requests.push(request);
+    }
+
+    return requests;
+};
 
 const CreateImage = () => {
+    const dispatch = useDispatch();
     const history = useHistory();
     const [ user, setUser ] = useState();
+    const [ isSaving, setIsSaving ] = useState();
     useEffect(() => {
         (async () => {
             const userData = await insights.chrome.auth.getUser();
@@ -18,7 +119,25 @@ const CreateImage = () => {
     }, []);
     return user ? <ImageCreator
         onClose={ () => history.push('/landing') }
-        onSubmit={ (values) => console.log(values) }
+        onSubmit={ (values) => {
+            const requests = onSave(values);
+            Promise.all(requests.map(request => api.composeImage(request).then((response) => {
+                dispatch(composeAdded({
+                    ...response,
+                    request,
+                    image_status: { status: 'pending' }
+                }));
+            })))
+                .then(() => {
+                    history.push('/landing');
+                    dispatch(addNotification({
+                        variant: 'success',
+                        title: 'Your image is being created',
+                    }));
+
+                    setIsSaving(false);
+                });
+        } }
         defaultArch="x86_64"
         schema={ {
             fields: [
@@ -29,6 +148,9 @@ const CreateImage = () => {
                     isDynamic: true,
                     inModal: true,
                     showTitles: true,
+                    buttonLabels: {
+                        submit: 'Create',
+                    },
                     title: 'Create image',
                     crossroads: [ 'target-environment' ],
                     description: <div>Create a RHEL image and push it to cloud providers. <Button

src/Components/CreateImageWizard/steps/googleCloud.js

@@ -3,6 +3,7 @@ import componentTypes from '@data-driven-forms/react-form-renderer/component-typ
 import validatorTypes from '@data-driven-forms/react-form-renderer/validator-types';
 import { HelpIcon } from '@patternfly/react-icons';
 import { Title, Text, Popover, TextContent, TextList, TextListItem, Button } from '@patternfly/react-core';
+import PropTypes from 'prop-types';
 
 export const googleAccType = {
     googleAccount: 'Google account',
@@ -48,6 +49,10 @@ const PopoverInfo = ({ appendTo }) => <Popover
     </Button>
 </Popover>;
 
+PopoverInfo.propTypes = {
+    appendTo: PropTypes.any
+};
+
 export default {
     title: 'Google Cloud Platform',
     customTitle: <Title headingLevel="h1" size="xl">Target Environment - Google Cloud Platform</Title>,

src/Components/CreateImageWizard/steps/registration.js

@@ -37,7 +37,7 @@ export default (user) => ({
         {
             component: componentTypes.TEXT_FIELD,
             name: 'subscription-activation',
-            type: 'text',
+            type: 'password',
             label: 'Activation key',
             condition: {
                 or: [