CreateImageWizard: add image name field

Add a details step where the user can enter a descriptive image name.
This name is displayed in the review step above the Release. Both these
fields are now horizontal to save vertical space.

src/Components/CreateImageWizard/steps/details.js

@@ -0,0 +1,31 @@
+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';
+
+export default {
+    name: 'details',
+    title: 'Details',
+    nextStep: 'image-output',
+    fields: [
+        {
+            component: componentTypes.PLAIN_TEXT,
+            name: 'plain-text-component',
+            label: <p>
+                Enter a name to easily identify your image later. If left empty, the image&apos;s UUID will be displayed.
+            </p>
+        },
+        {
+            component: componentTypes.TEXT_FIELD,
+            name: 'image-name',
+            type: 'text',
+            label: 'Image name',
+            validate: [
+                {
+                    type: validatorTypes.PATTERN,
+                    pattern: /^[\w-]+$/i,
+                    message: 'Can only contain letters, numbers, hyphens (-), and underscores (_)',
+                }
+            ]
+        }
+    ]
+};

src/Components/CreateImageWizard/steps/index.js

@@ -7,3 +7,4 @@ export { default as review } from './review';
 export { default as imageOutput } from './imageOutput';
 export { default as nextStepMapper } from './imageOutputStepMapper';
 export { default as fileSystemConfiguration } from './fileSystemConfiguration';
+export { default as details } from './details';