feat: Wizard UX tweaks (#1752)

* UX tweaks: modified tab warning sign, changed order for checkboxes and labels, fully acceptable tabs now bold.

Signed-off-by: DianaKorladinova <chanchunche@gmail.com>

* 'Done' button disabled till the end of the wizard is reached.

Signed-off-by: DianaKorladinova <chanchunche@gmail.com>

* Post-merge fixes

Signed-off-by: DianaKorladinova <chanchunche@gmail.com>

* Code smell fix.

Signed-off-by: DianaKorladinova <chanchunche@gmail.com>

Co-authored-by: DianaKorladinova <chanchunche@gmail.com>

Author: ViktorKorladinov

api-catalog-ui/frontend/src/components/Wizard/WizardComponents/WizardInputs.jsx

@@ -257,8 +257,6 @@ class WizardInputs extends Component {
                     onChange={this.handleInputChange}
                     name={itemKey}
                     data-index={index}
-                    labelPosition="start"
-                    justify
                 />
             );
         }

api-catalog-ui/frontend/src/components/Wizard/WizardComponents/WizardNavigation.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import { IconError } from 'mineral-ui-icons';
 import Tabs, { Tab } from 'mineral-ui/Tabs';
+import { IconDanger } from 'mineral-ui-icons';
 import WizardInputsContainer from './WizardInputsContainer';
 import YAMLVisualizerContainer from '../YAML/YAMLVisualizerContainer';
 
@@ -57,8 +57,14 @@ class WizardNavigation extends Component {
             const name = entry[0];
             const categoryArr = entry[1];
             index += 1;
+            const done = !this.props.navsObj[name].silent && !this.props.navsObj[name].warn;
             return (
-                <Tab key={index} title={name} icon={this.props.navsObj[name].warn ? <IconError /> : undefined}>
+                <Tab
+                    className={done ? 'readyTab' : undefined}
+                    key={index}
+                    title={name}
+                    icon={this.props.navsObj[name].warn ? <IconDanger style={{ color: 'red' }} /> : undefined}
+                >
                     {categoryArr}
                 </Tab>
             );

api-catalog-ui/frontend/src/components/Wizard/WizardComponents/WizardNavigation.test.jsx

@@ -10,7 +10,7 @@
 import React from 'react';
 import * as enzyme from 'enzyme';
 import WizardNavigation from './WizardNavigation';
-import { IconError } from 'mineral-ui-icons';
+import { IconDanger} from 'mineral-ui-icons';
 
 describe('>>> Wizard navigation tests', () => {
     it('should handle category change', () => {
@@ -143,6 +143,6 @@ describe('>>> Wizard navigation tests', () => {
 
             />
         );
-        expect(wrapper.instance().loadTabs()[0].props.icon).toEqual(<IconError />);
+        expect(wrapper.instance().loadTabs()[0].props.icon).toEqual(<IconDanger style={{color:'red'}}/>);
     });
 });

api-catalog-ui/frontend/src/components/Wizard/WizardDialog.jsx

@@ -53,6 +53,7 @@ export default class WizardDialog extends Component {
     render() {
         const { wizardIsOpen, enablerName, selectedCategory, navsObj } = this.props;
         const size = selectedCategory === Object.keys(navsObj).length ? 'large' : 'medium';
+        const disable = selectedCategory !== Object.keys(navsObj).length;
         return (
             <div className="dialog">
                 <Dialog id="wizard-dialog" isOpen={wizardIsOpen} size={size} closeOnClickOutside={false}>
@@ -68,8 +69,8 @@ export default class WizardDialog extends Component {
                             <Button size="medium" onClick={this.closeWizard}>
                                 Cancel
                             </Button>
-                            <Button size="medium" onClick={this.nextSave}>
-                                {selectedCategory === Object.keys(navsObj).length ? 'Done' : 'Next'}
+                            <Button size="medium" onClick={this.nextSave} disabled={disable}>
+                                Done
                             </Button>
                         </DialogActions>
                     </DialogFooter>

api-catalog-ui/frontend/src/components/Wizard/wizard.css

@@ -63,3 +63,7 @@ label.wCheckBox {
 label.wCheckBox span:last-child {
     color: #58606e;
 }
+
+.readyTab {
+    font-weight: 800;
+}