Add all steps except packages

New component to show packages needs to be created, let's create a dummy component to unblock implementing rest of the steps.

src/Components/CreateImageWizard/ImageCreator.js

@@ -5,6 +5,7 @@ import { componentMapper } from '@data-driven-forms/pf4-component-mapper';
 import { Spinner } from '@patternfly/react-core';
 import Review from './formComponents/ReviewStep';
 import TargetEnvironment from './formComponents/TargetEnvironment';
+import Packages from './formComponents/Packages';
 import PropTypes from 'prop-types';
 
 const CreateImageWizard = ({ schema, onSubmit, onClose, customComponentMapper }) => {
@@ -18,6 +19,7 @@ const CreateImageWizard = ({ schema, onSubmit, onClose, customComponentMapper })
             ...componentMapper,
             review: Review,
             output: TargetEnvironment,
+            'package-selector': Packages,
             ...customComponentMapper
         } }
         onCancel={ onClose } /> : <Spinner />;

src/Components/CreateImageWizard/formComponents/Packages.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
+
+const Packages = () => {
+    const { change } = useFormApi();
+    return <div>packages!</div>;
+};
+
+export default Packages;

src/Components/CreateImageWizard/formComponents/TargetEnvironment.js

@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
 import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
 import { FormGroup, Tile } from '@patternfly/react-core';
 import './TargetEnvironment.scss';
 
-const TargetEnvironment = () => {
+const TargetEnvironment = ({ label, isRequired }) => {
     const { change, getState } = useFormApi();
     const [ environemt, setEnvironment ] = useState({
         aws: false,
@@ -17,7 +18,7 @@ const TargetEnvironment = () => {
         }
     }, []);
 
-    return <FormGroup isRequired label="Select target environment" data-testid="target-select">
+    return <FormGroup isRequired={ isRequired } label={ label } data-testid="target-select">
         <div className="tiles">
             <Tile
                 className="tile pf-u-mr-sm"
@@ -77,4 +78,14 @@ const TargetEnvironment = () => {
     </FormGroup>;
 };
 
+TargetEnvironment.propTypes = {
+    label: PropTypes.node,
+    isRequired: PropTypes.bool
+};
+
+TargetEnvironment.defaultProps = {
+    label: '',
+    isRequired: false
+};
+
 export default TargetEnvironment;

src/Components/CreateImageWizard/steps/packages.js

@@ -1,5 +1,6 @@
+import React from 'react';
 import componentTypes from '@data-driven-forms/react-form-renderer/component-types';
-import validatorTypes from '@data-driven-forms/react-form-renderer/validator-types';
+import { Text } from '@patternfly/react-core';
 
 export default {
     title: 'Packages',
@@ -7,20 +8,14 @@ export default {
     nextStep: 'review',
     fields: [
         {
-            component: componentTypes.TEXT_FIELD,
-            name: 'packages-field',
-            type: 'text',
-            label: 'Role name',
-            isRequired: true,
-            validate: [
-                {
-                    type: validatorTypes.REQUIRED,
-                },
-                {
-                    type: validatorTypes.MAX_LENGTH,
-                    threshold: 150,
-                },
-            ],
+            component: componentTypes.PLAIN_TEXT,
+            name: 'google-cloud-text-component',
+            label: <Text>Add optional additional packages to your image by searching available packages.</Text>
+        },
+        {
+            component: 'package-selector',
+            name: 'selected-packages',
+            label: 'Available options'
         }
     ]
 };