Merge pull request #591 from smiclea/wizard-options

Fix small UI/UX issues in Wizard Options page

src/components/organisms/WizardOptions/WizardOptions.tsx

@@ -419,36 +419,40 @@ class WizardOptions extends React.Component<Props> {
     })
 
     const groups = this.generateGroups(fields)
-
     return (
       <Fields ref={this.props.onScrollableRef} padding={this.props.layout === 'page' ? null : 32}>
-        {groups.map((g, i) => (
-          <CSSTransitionGroup
-            key={g.name || 0}
-            transitionName={i > 0 ? 'field-group-transition' : ''}
-            transitionAppear
-            transitionAppearTimeout={250}
-            in={false}
-          >
-            <Group>
-              {g.name ? (
-                <GroupName>
-                  <GroupNameBar />
-                  <GroupNameText>{LabelDictionary.get(g.name)}</GroupNameText>
-                  <GroupNameBar />
-                </GroupName>
-              ) : null}
-              <GroupFields>
-                <Column left>
-                  {g.fields.map(f => f.column === 0 && f.component)}
-                </Column>
-                <Column right>
-                  {g.fields.map(f => f.column === 1 && f.component)}
-                </Column>
-              </GroupFields>
-            </Group>
-          </CSSTransitionGroup>
-        ))}
+        {groups.map((g, i) => {
+          const getColumnInGroup = (field: any, fieldIndex: number) => (
+            g.name ? fieldIndex % 2 : field.column
+          )
+          return (
+            <CSSTransitionGroup
+              key={g.name || 0}
+              transitionName={i > 0 ? 'field-group-transition' : ''}
+              transitionAppear
+              transitionAppearTimeout={250}
+              in={false}
+            >
+              <Group>
+                {g.name ? (
+                  <GroupName>
+                    <GroupNameBar />
+                    <GroupNameText>{LabelDictionary.get(g.name)}</GroupNameText>
+                    <GroupNameBar />
+                  </GroupName>
+                ) : null}
+                <GroupFields>
+                  <Column left>
+                    {g.fields.map((f, j) => (getColumnInGroup(f, j) === 0 && f.component))}
+                  </Column>
+                  <Column right>
+                    {g.fields.map((f, j) => getColumnInGroup(f, j) === 1 && f.component)}
+                  </Column>
+                </GroupFields>
+              </Group>
+            </CSSTransitionGroup>
+          )
+        })}
       </Fields>
     )
   }

src/components/pages/WizardPage/WizardPage.tsx

@@ -598,8 +598,8 @@ class WizardPage extends React.Component<Props, State> {
   }
 
   shouldShowLoadingButton() {
-    return providerStore.destinationOptionsSecondaryLoading
-      || providerStore.sourceOptionsSecondaryLoading
+    return (wizardStore.currentPage.id === 'dest-options' && providerStore.destinationOptionsSecondaryLoading)
+      || (wizardStore.currentPage.id === 'source-options' && providerStore.sourceOptionsSecondaryLoading)
   }
 
   scheduleReplica(replica: ReplicaItem): Promise<void> {