CreateImageWizard: Step template with id

The template is the default template from data driven forms, with the id
added.

Fixes #642

src/Components/CreateImageWizard/steps/aws.js

@@ -3,8 +3,11 @@ import componentTypes from '@data-driven-forms/react-form-renderer/component-typ
 import validatorTypes from '@data-driven-forms/react-form-renderer/validator-types';
 import nextStepMapper from './imageOutputStepMapper';
 import { Title } from '@patternfly/react-core';
+import StepTemplate from './stepTemplate';
 
 export default {
+    StepTemplate,
+    id: 'wizard-target-aws',
     title: 'Amazon Web Services',
     customTitle: <Title headingLevel="h1" size="xl">Target environment - Amazon Web Service</Title>,
     name: 'aws-target-env',

src/Components/CreateImageWizard/steps/details.js

@@ -1,8 +1,11 @@
 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 StepTemplate from './stepTemplate';
 
 export default {
+    StepTemplate,
+    id: 'wizard-details',
     name: 'details',
     title: 'Details',
     nextStep: 'image-output',

src/Components/CreateImageWizard/steps/fileSystemConfiguration.js

@@ -3,7 +3,11 @@ import componentTypes from '@data-driven-forms/react-form-renderer/component-typ
 import validatorTypes from '@data-driven-forms/react-form-renderer/validator-types';
 import { Text } from '@patternfly/react-core';
 
+import StepTemplate from './stepTemplate';
+
 export default {
+    StepTemplate,
+    id: 'wizard-systemconfiguration-filesystem',
     title: 'File system configuration',
     name: 'File system configuration',
     substepOf: 'System Configuration',

src/Components/CreateImageWizard/steps/googleCloud.js

@@ -5,6 +5,7 @@ import { HelpIcon } from '@patternfly/react-icons';
 import nextStepMapper from './imageOutputStepMapper';
 import { Title, Text, Popover, TextContent, TextList, TextListItem, Button } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
+import StepTemplate from './stepTemplate';
 
 export const googleAccType = {
     googleAccount: 'Google account',
@@ -57,6 +58,8 @@ PopoverInfo.propTypes = {
 };
 
 export default {
+    StepTemplate,
+    id: 'wizard-target-gcp',
     title: 'Google Cloud Platform',
     customTitle: <Title headingLevel="h1" size="xl">Target environment - Google Cloud Platform</Title>,
     name: 'google-cloud-target-env',

src/Components/CreateImageWizard/steps/imageOutput.js

@@ -5,6 +5,7 @@ import nextStepMapper from './imageOutputStepMapper';
 import { RHEL_8 } from '../../../constants.js';
 import { Text } from '@patternfly/react-core';
 import DocumentationButton from '../../sharedComponents/DocumentationButton';
+import StepTemplate from './stepTemplate';
 
 export const releaseValues = {
     [RHEL_8]: 'Red Hat Enterprise Linux (RHEL) 8',
@@ -13,6 +14,8 @@ export const releaseValues = {
 };
 
 export default {
+    StepTemplate,
+    id: 'wizard-imageoutput',
     title: 'Image output',
     name: 'image-output',
     nextStep: ({ values }) => nextStepMapper(values),

src/Components/CreateImageWizard/steps/msAzure.js

@@ -3,8 +3,11 @@ import componentTypes from '@data-driven-forms/react-form-renderer/component-typ
 import validatorTypes from '@data-driven-forms/react-form-renderer/validator-types';
 import { Title, Text } from '@patternfly/react-core';
 import nextStepMapper from './imageOutputStepMapper';
+import StepTemplate from './stepTemplate';
 
 export default {
+    StepTemplate,
+    id: 'wizard-target-msazure',
     title: 'Microsoft Azure',
     customTitle: <Title headingLevel="h1" size="xl">Target environment - Microsoft Azure</Title>,
     name: 'ms-azure-target-env',

src/Components/CreateImageWizard/steps/packages.js

@@ -1,8 +1,11 @@
 import React from 'react';
 import componentTypes from '@data-driven-forms/react-form-renderer/component-types';
 import { Text } from '@patternfly/react-core';
+import StepTemplate from './stepTemplate';
 
 export default {
+    StepTemplate,
+    id: 'wizard-systemconfiguration-packages',
     title: 'Packages',
     name: 'packages',
     substepOf: 'System Configuration',

src/Components/CreateImageWizard/steps/registration.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 { Button, Popover, Text, TextContent, TextVariants } from '@patternfly/react-core';
 import { ExternalLinkAltIcon, HelpIcon } from '@patternfly/react-icons';
+import StepTemplate from './stepTemplate';
 
 const PopoverActivation = () => {
     return <Popover
@@ -25,6 +26,8 @@ const PopoverActivation = () => {
 };
 
 export default {
+    StepTemplate,
+    id: 'wizard-registration',
     title: 'Registration',
     name: 'registration',
     nextStep: 'File system configuration',

src/Components/CreateImageWizard/steps/review.js

@@ -1,6 +1,9 @@
 import CustomButtons from '../formComponents/CustomSubmitButtons';
+import StepTemplate from './stepTemplate';
 
 export default {
+    StepTemplate,
+    id: 'wizard-review',
     name: 'review',
     title: 'Review',
     buttons: CustomButtons,

src/Components/CreateImageWizard/steps/stepTemplate.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Title } from '@patternfly/react-core';
+
+const StepTemplate = ({ id, formFields, formRef, title, showTitle, showTitles }) => (
+    <div id={ id } ref={ formRef } className="pf-c-form">
+        {((showTitles && showTitle !== false) || showTitle) &&
+         (<Title headingLevel="h1" size="xl">
+             {title}
+         </Title>)}
+        {formFields}
+    </div>
+);
+
+StepTemplate.propTypes = {
+    id: PropTypes.string,
+    title: PropTypes.node,
+    formFields: PropTypes.array.isRequired,
+    formOptions: PropTypes.shape({
+        renderForm: PropTypes.func.isRequired,
+    }).isRequired,
+    showTitles: PropTypes.bool,
+    showTitle: PropTypes.bool,
+    formRef: PropTypes.oneOfType([ PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) }) ]),
+};
+
+export default StepTemplate;