CreateImageWizard: require max image name length of 100 chars

src/Components/CreateImageWizard/steps/imageName.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 StepTemplate from './stepTemplate';
 
 export default {
@@ -20,6 +21,12 @@ export default {
             type: 'text',
             label: 'Image name',
             autoFocus: true,
+            validate: [
+                {
+                    type: validatorTypes.MAX_LENGTH,
+                    threshold: 100
+                }
+            ],
         }
     ]
 };

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

@@ -957,6 +957,55 @@ describe('Step Packages', () => {
     });
 });
 
+describe('Step Details', () => {
+    const setUp = async () => {
+        history = renderWithReduxRouter(<CreateImageWizard />).history;
+        const [ next, ,  ] = verifyButtons();
+
+        // select aws as upload destination
+        const awsTile = screen.getByTestId('upload-aws');
+        awsTile.click();
+        next.click();
+
+        // aws step
+        userEvent.type(screen.getByTestId('aws-account-id'), '012345678901');
+        next.click();
+        // skip registration
+        await screen.findByRole('textbox', {
+            name: 'Select activation key'
+        });
+
+        const registerLaterRadio = screen.getByLabelText('Register later');
+        userEvent.click(registerLaterRadio);
+        next.click();
+
+        // skip fsc
+        next.click();
+        // skip packages
+        next.click();
+    };
+
+    test('image name invalid for more than 100 chars', async () => {
+        await setUp();
+
+        const [ next, , ] = verifyButtons();
+
+        // Enter image name
+        const nameInput = screen.getByRole('textbox', {
+            name: 'Image name'
+        });
+        // 101 character name
+        const invalidName = 'a'.repeat(101);
+        userEvent.type(nameInput, invalidName);
+        expect(next).toHaveClass('pf-m-disabled');
+        expect(next).toBeDisabled();
+        userEvent.clear(nameInput);
+        userEvent.type(nameInput, 'validName');
+        expect(next).not.toHaveClass('pf-m-disabled');
+        expect(next).toBeEnabled();
+    });
+});
+
 describe('Step Review', () => {
     const setUp = async () => {
         history = renderWithReduxRouter(<CreateImageWizard />).history;