From b836e3afc424fdb1db06f5e088ab179e611c63e9 Mon Sep 17 00:00:00 2001
From: Stas Vilchik <stas.vilchik@sonarsource.com>
Date: Fri, 21 Sep 2018 15:32:45 +0200
Subject: [PATCH] SONARCLOUD-43 always render step form (avoids reload of
 billing form)

---
 .../OrganizationDetailsStep-test.tsx.snap     |  54 +-
 .../__snapshots__/PlanStep-test.tsx.snap      | 170 ++---
 .../js/apps/tutorials/components/Step.tsx     |   3 +-
 .../OrganizationStep-test.tsx.snap            | 332 +++++-----
 .../__snapshots__/Step-test.tsx.snap          |  15 +-
 .../__snapshots__/TokenStep-test.tsx.snap     | 604 +++++++++---------
 6 files changed, 634 insertions(+), 544 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/OrganizationDetailsStep-test.tsx.snap b/server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/OrganizationDetailsStep-test.tsx.snap
index d122f4cc2fb..c792c9ff872 100644
--- a/server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/OrganizationDetailsStep-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/OrganizationDetailsStep-test.tsx.snap
@@ -29,22 +29,26 @@ exports[`should render form 2`] = `
     </h2>
   </div>
   <div
-    className="boxed-group-inner"
+    className=""
   >
-    <ValidationForm
-      initialValues={
-        Object {
-          "avatar": "",
-          "description": "",
-          "key": "",
-          "name": "",
-          "url": "",
+    <div
+      className="boxed-group-inner"
+    >
+      <ValidationForm
+        initialValues={
+          Object {
+            "avatar": "",
+            "description": "",
+            "key": "",
+            "name": "",
+            "url": "",
+          }
         }
-      }
-      isInitialValid={false}
-      onSubmit={[MockFunction]}
-      validate={[Function]}
-    />
+        isInitialValid={false}
+        onSubmit={[MockFunction]}
+        validate={[Function]}
+      />
+    </div>
   </div>
 </div>
 `;
@@ -187,5 +191,27 @@ exports[`should render result 1`] = `
   <div
     className="boxed-group-inner"
   />
+  <div
+    className="hidden"
+  >
+    <div
+      className="boxed-group-inner"
+    >
+      <ValidationForm
+        initialValues={
+          Object {
+            "avatar": "",
+            "description": "",
+            "key": "org",
+            "name": "Organization",
+            "url": "",
+          }
+        }
+        isInitialValid={true}
+        onSubmit={[MockFunction]}
+        validate={[Function]}
+      />
+    </div>
+  </div>
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/PlanStep-test.tsx.snap b/server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/PlanStep-test.tsx.snap
index 216b6f565a3..099c34d7256 100644
--- a/server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/PlanStep-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/PlanStep-test.tsx.snap
@@ -29,15 +29,19 @@ exports[`should preselect paid plan 2`] = `
     </h2>
   </div>
   <div
-    className="boxed-group-inner"
+    className=""
   >
-    <React.Fragment>
+    <div
+      className="boxed-group-inner"
+    >
       <React.Fragment>
-        <PaymentMethodSelect
-          onChange={[Function]}
-        />
+        <React.Fragment>
+          <PaymentMethodSelect
+            onChange={[Function]}
+          />
+        </React.Fragment>
       </React.Fragment>
-    </React.Fragment>
+    </div>
   </div>
 </div>
 `;
@@ -71,25 +75,29 @@ exports[`should render and use free plan 2`] = `
     </h2>
   </div>
   <div
-    className="boxed-group-inner"
-  >
-    <React.Fragment>
-      <PlanSelect
-        onChange={[Function]}
-        plan="free"
-        startingPrice="10"
-      />
-      <div
-        className="display-flex-center big-spacer-top"
-      >
-        <SubmitButton
-          disabled={false}
-          onClick={[Function]}
+    className=""
+  >
+    <div
+      className="boxed-group-inner"
+    >
+      <React.Fragment>
+        <PlanSelect
+          onChange={[Function]}
+          plan="free"
+          startingPrice="10"
+        />
+        <div
+          className="display-flex-center big-spacer-top"
         >
-          my_account.create_organization
-        </SubmitButton>
-      </div>
-    </React.Fragment>
+          <SubmitButton
+            disabled={false}
+            onClick={[Function]}
+          >
+            my_account.create_organization
+          </SubmitButton>
+        </div>
+      </React.Fragment>
+    </div>
   </div>
 </div>
 `;
@@ -111,20 +119,24 @@ exports[`should upgrade using card 1`] = `
     </h2>
   </div>
   <div
-    className="boxed-group-inner"
+    className=""
   >
-    <React.Fragment>
-      <PlanSelect
-        onChange={[Function]}
-        plan="paid"
-        startingPrice="10"
-      />
+    <div
+      className="boxed-group-inner"
+    >
       <React.Fragment>
-        <PaymentMethodSelect
+        <PlanSelect
           onChange={[Function]}
+          plan="paid"
+          startingPrice="10"
         />
+        <React.Fragment>
+          <PaymentMethodSelect
+            onChange={[Function]}
+          />
+        </React.Fragment>
       </React.Fragment>
-    </React.Fragment>
+    </div>
   </div>
 </div>
 `;
@@ -146,27 +158,31 @@ exports[`should upgrade using card 2`] = `
     </h2>
   </div>
   <div
-    className="boxed-group-inner"
+    className=""
   >
-    <React.Fragment>
-      <PlanSelect
-        onChange={[Function]}
-        plan="paid"
-        startingPrice="10"
-      />
+    <div
+      className="boxed-group-inner"
+    >
       <React.Fragment>
-        <PaymentMethodSelect
+        <PlanSelect
           onChange={[Function]}
-          paymentMethod="card"
-        />
-        <Connect(withCurrentUser(CardForm))
-          createOrganization={[MockFunction]}
-          onFailToUpgrade={[MockFunction]}
-          onSubmit={[MockFunction]}
-          subscriptionPlans={Array []}
+          plan="paid"
+          startingPrice="10"
         />
+        <React.Fragment>
+          <PaymentMethodSelect
+            onChange={[Function]}
+            paymentMethod="card"
+          />
+          <Connect(withCurrentUser(CardForm))
+            createOrganization={[MockFunction]}
+            onFailToUpgrade={[MockFunction]}
+            onSubmit={[MockFunction]}
+            subscriptionPlans={Array []}
+          />
+        </React.Fragment>
       </React.Fragment>
-    </React.Fragment>
+    </div>
   </div>
 </div>
 `;
@@ -188,20 +204,24 @@ exports[`should upgrade using coupon 1`] = `
     </h2>
   </div>
   <div
-    className="boxed-group-inner"
+    className=""
   >
-    <React.Fragment>
-      <PlanSelect
-        onChange={[Function]}
-        plan="paid"
-        startingPrice="10"
-      />
+    <div
+      className="boxed-group-inner"
+    >
       <React.Fragment>
-        <PaymentMethodSelect
+        <PlanSelect
           onChange={[Function]}
+          plan="paid"
+          startingPrice="10"
         />
+        <React.Fragment>
+          <PaymentMethodSelect
+            onChange={[Function]}
+          />
+        </React.Fragment>
       </React.Fragment>
-    </React.Fragment>
+    </div>
   </div>
 </div>
 `;
@@ -223,26 +243,30 @@ exports[`should upgrade using coupon 2`] = `
     </h2>
   </div>
   <div
-    className="boxed-group-inner"
+    className=""
   >
-    <React.Fragment>
-      <PlanSelect
-        onChange={[Function]}
-        plan="paid"
-        startingPrice="10"
-      />
+    <div
+      className="boxed-group-inner"
+    >
       <React.Fragment>
-        <PaymentMethodSelect
+        <PlanSelect
           onChange={[Function]}
-          paymentMethod="coupon"
-        />
-        <Connect(withCurrentUser(CouponForm))
-          createOrganization={[MockFunction]}
-          onFailToUpgrade={[MockFunction]}
-          onSubmit={[MockFunction]}
+          plan="paid"
+          startingPrice="10"
         />
+        <React.Fragment>
+          <PaymentMethodSelect
+            onChange={[Function]}
+            paymentMethod="coupon"
+          />
+          <Connect(withCurrentUser(CouponForm))
+            createOrganization={[MockFunction]}
+            onFailToUpgrade={[MockFunction]}
+            onSubmit={[MockFunction]}
+          />
+        </React.Fragment>
       </React.Fragment>
-    </React.Fragment>
+    </div>
   </div>
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/tutorials/components/Step.tsx b/server/sonar-web/src/main/js/apps/tutorials/components/Step.tsx
index 7fda3877528..4a3dfc68860 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/components/Step.tsx
+++ b/server/sonar-web/src/main/js/apps/tutorials/components/Step.tsx
@@ -55,7 +55,8 @@ export default function Step(props: Props) {
       <div className="boxed-group-header">
         <h2>{props.stepTitle}</h2>
       </div>
-      {props.open ? props.renderForm() : <div className="boxed-group-inner" />}
+      {!props.open && <div className="boxed-group-inner" />}
+      <div className={classNames({ hidden: !props.open })}>{props.renderForm()}</div>
     </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/tutorials/components/__tests__/__snapshots__/OrganizationStep-test.tsx.snap b/server/sonar-web/src/main/js/apps/tutorials/components/__tests__/__snapshots__/OrganizationStep-test.tsx.snap
index 8ece74c899f..9b0573150aa 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/components/__tests__/__snapshots__/OrganizationStep-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/tutorials/components/__tests__/__snapshots__/OrganizationStep-test.tsx.snap
@@ -53,50 +53,35 @@ exports[`works with existing organization 1`] = `
         </h2>
       </div>
       <div
-        className="boxed-group-inner"
+        className=""
       >
         <div
-          className="big-spacer-bottom width-50"
+          className="boxed-group-inner"
         >
-          onboarding.organization.text
-        </div>
-        <div>
           <div
-            className="big-spacer-top"
+            className="big-spacer-bottom width-50"
           >
-            <a
-              className="js-existing link-base-color link-no-underline"
-              href="#"
-              onClick={[Function]}
-            >
-              <i
-                className="icon-radio spacer-right is-checked"
-              />
-              onboarding.organization.exising_organization
-            </a>
+            onboarding.organization.text
+          </div>
+          <div>
             <div
               className="big-spacer-top"
             >
-              <Select
-                className="input-super-large"
-                clearable={false}
-                onChange={[Function]}
-                options={
-                  Array [
-                    Object {
-                      "label": "another",
-                      "value": "another",
-                    },
-                    Object {
-                      "label": "user",
-                      "value": "user",
-                    },
-                  ]
-                }
+              <a
+                className="js-existing link-base-color link-no-underline"
+                href="#"
+                onClick={[Function]}
+              >
+                <i
+                  className="icon-radio spacer-right is-checked"
+                />
+                onboarding.organization.exising_organization
+              </a>
+              <div
+                className="big-spacer-top"
               >
-                <LazyLoader
+                <Select
                   className="input-super-large"
-                  clearRenderer={[Function]}
                   clearable={false}
                   onChange={[Function]}
                   options={
@@ -112,40 +97,11 @@ exports[`works with existing organization 1`] = `
                     ]
                   }
                 >
-                  <Select
-                    arrowRenderer={[Function]}
-                    autosize={true}
-                    backspaceRemoves={true}
-                    backspaceToRemoveMessage="Press backspace to remove {label}"
+                  <LazyLoader
                     className="input-super-large"
-                    clearAllText="Clear all"
                     clearRenderer={[Function]}
-                    clearValueText="Clear value"
                     clearable={false}
-                    closeOnSelect={true}
-                    deleteRemoves={true}
-                    delimiter=","
-                    disabled={false}
-                    escapeClearsValue={true}
-                    filterOptions={[Function]}
-                    ignoreAccents={true}
-                    ignoreCase={true}
-                    inputProps={Object {}}
-                    isLoading={false}
-                    joinValues={false}
-                    labelKey="label"
-                    matchPos="any"
-                    matchProp="any"
-                    menuBuffer={0}
-                    menuRenderer={[Function]}
-                    multi={false}
-                    noResultsText="No results found"
-                    onBlurResetsInput={true}
                     onChange={[Function]}
-                    onCloseResetsInput={true}
-                    onSelectResetsInput={true}
-                    openOnClick={true}
-                    optionComponent={[Function]}
                     options={
                       Array [
                         Object {
@@ -158,125 +114,173 @@ exports[`works with existing organization 1`] = `
                         },
                       ]
                     }
-                    pageSize={5}
-                    placeholder="Select..."
-                    removeSelected={true}
-                    required={false}
-                    rtl={false}
-                    scrollMenuIntoView={true}
-                    searchable={true}
-                    simpleValue={false}
-                    tabSelectsValue={true}
-                    trimFilter={true}
-                    valueComponent={[Function]}
-                    valueKey="value"
                   >
-                    <div
-                      className="Select input-super-large is-searchable Select--single"
+                    <Select
+                      arrowRenderer={[Function]}
+                      autosize={true}
+                      backspaceRemoves={true}
+                      backspaceToRemoveMessage="Press backspace to remove {label}"
+                      className="input-super-large"
+                      clearAllText="Clear all"
+                      clearRenderer={[Function]}
+                      clearValueText="Clear value"
+                      clearable={false}
+                      closeOnSelect={true}
+                      deleteRemoves={true}
+                      delimiter=","
+                      disabled={false}
+                      escapeClearsValue={true}
+                      filterOptions={[Function]}
+                      ignoreAccents={true}
+                      ignoreCase={true}
+                      inputProps={Object {}}
+                      isLoading={false}
+                      joinValues={false}
+                      labelKey="label"
+                      matchPos="any"
+                      matchProp="any"
+                      menuBuffer={0}
+                      menuRenderer={[Function]}
+                      multi={false}
+                      noResultsText="No results found"
+                      onBlurResetsInput={true}
+                      onChange={[Function]}
+                      onCloseResetsInput={true}
+                      onSelectResetsInput={true}
+                      openOnClick={true}
+                      optionComponent={[Function]}
+                      options={
+                        Array [
+                          Object {
+                            "label": "another",
+                            "value": "another",
+                          },
+                          Object {
+                            "label": "user",
+                            "value": "user",
+                          },
+                        ]
+                      }
+                      pageSize={5}
+                      placeholder="Select..."
+                      removeSelected={true}
+                      required={false}
+                      rtl={false}
+                      scrollMenuIntoView={true}
+                      searchable={true}
+                      simpleValue={false}
+                      tabSelectsValue={true}
+                      trimFilter={true}
+                      valueComponent={[Function]}
+                      valueKey="value"
                     >
                       <div
-                        className="Select-control"
-                        onKeyDown={[Function]}
-                        onMouseDown={[Function]}
-                        onTouchEnd={[Function]}
-                        onTouchMove={[Function]}
-                        onTouchStart={[Function]}
+                        className="Select input-super-large is-searchable Select--single"
                       >
-                        <span
-                          className="Select-multi-value-wrapper"
-                          id="react-select-2--value"
+                        <div
+                          className="Select-control"
+                          onKeyDown={[Function]}
+                          onMouseDown={[Function]}
+                          onTouchEnd={[Function]}
+                          onTouchMove={[Function]}
+                          onTouchStart={[Function]}
                         >
-                          <div
-                            className="Select-placeholder"
-                          >
-                            Select...
-                          </div>
-                          <AutosizeInput
-                            aria-activedescendant="react-select-2--value"
-                            aria-expanded="false"
-                            aria-haspopup="false"
-                            aria-owns=""
-                            className="Select-input"
-                            injectStyles={true}
-                            minWidth="5"
-                            onBlur={[Function]}
-                            onChange={[Function]}
-                            onFocus={[Function]}
-                            required={false}
-                            role="combobox"
-                            value=""
+                          <span
+                            className="Select-multi-value-wrapper"
+                            id="react-select-2--value"
                           >
                             <div
+                              className="Select-placeholder"
+                            >
+                              Select...
+                            </div>
+                            <AutosizeInput
+                              aria-activedescendant="react-select-2--value"
+                              aria-expanded="false"
+                              aria-haspopup="false"
+                              aria-owns=""
                               className="Select-input"
-                              style={
-                                Object {
-                                  "display": "inline-block",
-                                }
-                              }
+                              injectStyles={true}
+                              minWidth="5"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              required={false}
+                              role="combobox"
+                              value=""
                             >
-                              <input
-                                aria-activedescendant="react-select-2--value"
-                                aria-expanded="false"
-                                aria-haspopup="false"
-                                aria-owns=""
-                                onBlur={[Function]}
-                                onChange={[Function]}
-                                onFocus={[Function]}
-                                required={false}
-                                role="combobox"
-                                style={
-                                  Object {
-                                    "boxSizing": "content-box",
-                                    "width": "5px",
-                                  }
-                                }
-                                value=""
-                              />
                               <div
+                                className="Select-input"
                                 style={
                                   Object {
-                                    "height": 0,
-                                    "left": 0,
-                                    "overflow": "scroll",
-                                    "position": "absolute",
-                                    "top": 0,
-                                    "visibility": "hidden",
-                                    "whiteSpace": "pre",
+                                    "display": "inline-block",
                                   }
                                 }
-                              />
-                            </div>
-                          </AutosizeInput>
-                        </span>
-                        <span
-                          className="Select-arrow-zone"
-                          onMouseDown={[Function]}
-                        >
+                              >
+                                <input
+                                  aria-activedescendant="react-select-2--value"
+                                  aria-expanded="false"
+                                  aria-haspopup="false"
+                                  aria-owns=""
+                                  onBlur={[Function]}
+                                  onChange={[Function]}
+                                  onFocus={[Function]}
+                                  required={false}
+                                  role="combobox"
+                                  style={
+                                    Object {
+                                      "boxSizing": "content-box",
+                                      "width": "5px",
+                                    }
+                                  }
+                                  value=""
+                                />
+                                <div
+                                  style={
+                                    Object {
+                                      "height": 0,
+                                      "left": 0,
+                                      "overflow": "scroll",
+                                      "position": "absolute",
+                                      "top": 0,
+                                      "visibility": "hidden",
+                                      "whiteSpace": "pre",
+                                    }
+                                  }
+                                />
+                              </div>
+                            </AutosizeInput>
+                          </span>
                           <span
-                            className="Select-arrow"
+                            className="Select-arrow-zone"
                             onMouseDown={[Function]}
-                          />
-                        </span>
+                          >
+                            <span
+                              className="Select-arrow"
+                              onMouseDown={[Function]}
+                            />
+                          </span>
+                        </div>
                       </div>
-                    </div>
-                  </Select>
-                </LazyLoader>
-              </Select>
+                    </Select>
+                  </LazyLoader>
+                </Select>
+              </div>
             </div>
-          </div>
-          <div
-            className="big-spacer-top"
-          >
-            <a
-              className="js-new link-base-color link-no-underline"
-              href="#"
-              onClick={[Function]}
+            <div
+              className="big-spacer-top"
             >
-              <i
-                className="icon-radio spacer-right"
-              />
-              onboarding.organization.create_another_organization
-            </a>
+              <a
+                className="js-new link-base-color link-no-underline"
+                href="#"
+                onClick={[Function]}
+              >
+                <i
+                  className="icon-radio spacer-right"
+                />
+                onboarding.organization.create_another_organization
+              </a>
+            </div>
           </div>
         </div>
       </div>
diff --git a/server/sonar-web/src/main/js/apps/tutorials/components/__tests__/__snapshots__/Step-test.tsx.snap b/server/sonar-web/src/main/js/apps/tutorials/components/__tests__/__snapshots__/Step-test.tsx.snap
index 4667ca7ae8a..1e188e0d498 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/components/__tests__/__snapshots__/Step-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/tutorials/components/__tests__/__snapshots__/Step-test.tsx.snap
@@ -16,8 +16,12 @@ exports[`renders 1`] = `
       First Step
     </h2>
   </div>
-  <div>
-    form
+  <div
+    className=""
+  >
+    <div>
+      form
+    </div>
   </div>
 </div>
 `;
@@ -47,5 +51,12 @@ exports[`renders 2`] = `
   <div
     className="boxed-group-inner"
   />
+  <div
+    className="hidden"
+  >
+    <div>
+      form
+    </div>
+  </div>
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/tutorials/components/__tests__/__snapshots__/TokenStep-test.tsx.snap b/server/sonar-web/src/main/js/apps/tutorials/components/__tests__/__snapshots__/TokenStep-test.tsx.snap
index 54847972e8c..b502318ad8d 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/components/__tests__/__snapshots__/TokenStep-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/tutorials/components/__tests__/__snapshots__/TokenStep-test.tsx.snap
@@ -38,78 +38,82 @@ exports[`generates token 1`] = `
         </h2>
       </div>
       <div
-        className="boxed-group-inner"
+        className=""
       >
-        <div>
+        <div
+          className="boxed-group-inner"
+        >
           <div>
-            <a
-              className="js-new link-base-color link-no-underline"
-              href="#"
-              onClick={[Function]}
-            >
-              <i
-                className="icon-radio spacer-right is-checked"
-              />
-              onboarding.token.generate_token
-            </a>
-            <div
-              className="big-spacer-top"
-            >
-              <form
-                onSubmit={[Function]}
+            <div>
+              <a
+                className="js-new link-base-color link-no-underline"
+                href="#"
+                onClick={[Function]}
               >
-                <input
-                  autoFocus={true}
-                  className="input-large spacer-right text-middle"
-                  onChange={[Function]}
-                  placeholder="onboarding.token.generate_token.placeholder"
-                  required={true}
-                  type="text"
-                  value=""
+                <i
+                  className="icon-radio spacer-right is-checked"
                 />
-                <SubmitButton
-                  className="text-middle"
-                  disabled={true}
+                onboarding.token.generate_token
+              </a>
+              <div
+                className="big-spacer-top"
+              >
+                <form
+                  onSubmit={[Function]}
                 >
-                  <Button
+                  <input
+                    autoFocus={true}
+                    className="input-large spacer-right text-middle"
+                    onChange={[Function]}
+                    placeholder="onboarding.token.generate_token.placeholder"
+                    required={true}
+                    type="text"
+                    value=""
+                  />
+                  <SubmitButton
                     className="text-middle"
                     disabled={true}
-                    preventDefault={false}
-                    type="submit"
                   >
-                    <button
-                      className="button text-middle"
+                    <Button
+                      className="text-middle"
                       disabled={true}
-                      onClick={[Function]}
+                      preventDefault={false}
                       type="submit"
                     >
-                      onboarding.token.generate
-                    </button>
-                  </Button>
-                </SubmitButton>
-              </form>
+                      <button
+                        className="button text-middle"
+                        disabled={true}
+                        onClick={[Function]}
+                        type="submit"
+                      >
+                        onboarding.token.generate
+                      </button>
+                    </Button>
+                  </SubmitButton>
+                </form>
+              </div>
+            </div>
+            <div
+              className="big-spacer-top"
+            >
+              <a
+                className="js-new link-base-color link-no-underline"
+                href="#"
+                onClick={[Function]}
+              >
+                <i
+                  className="icon-radio spacer-right"
+                />
+                onboarding.token.use_existing_token
+              </a>
             </div>
           </div>
           <div
-            className="big-spacer-top"
+            className="note big-spacer-top width-50"
           >
-            <a
-              className="js-new link-base-color link-no-underline"
-              href="#"
-              onClick={[Function]}
-            >
-              <i
-                className="icon-radio spacer-right"
-              />
-              onboarding.token.use_existing_token
-            </a>
+            onboarding.token.text
           </div>
         </div>
-        <div
-          className="note big-spacer-top width-50"
-        >
-          onboarding.token.text
-        </div>
       </div>
     </div>
   </Step>
@@ -154,61 +158,65 @@ exports[`generates token 2`] = `
         </h2>
       </div>
       <div
-        className="boxed-group-inner"
+        className=""
       >
-        <div>
+        <div
+          className="boxed-group-inner"
+        >
           <div>
-            <a
-              className="js-new link-base-color link-no-underline"
-              href="#"
-              onClick={[Function]}
-            >
-              <i
-                className="icon-radio spacer-right is-checked"
-              />
-              onboarding.token.generate_token
-            </a>
+            <div>
+              <a
+                className="js-new link-base-color link-no-underline"
+                href="#"
+                onClick={[Function]}
+              >
+                <i
+                  className="icon-radio spacer-right is-checked"
+                />
+                onboarding.token.generate_token
+              </a>
+              <div
+                className="big-spacer-top"
+              >
+                <form
+                  onSubmit={[Function]}
+                >
+                  <input
+                    autoFocus={true}
+                    className="input-large spacer-right text-middle"
+                    onChange={[Function]}
+                    placeholder="onboarding.token.generate_token.placeholder"
+                    required={true}
+                    type="text"
+                    value="my token"
+                  />
+                  <i
+                    className="spinner text-middle"
+                  />
+                </form>
+              </div>
+            </div>
             <div
               className="big-spacer-top"
             >
-              <form
-                onSubmit={[Function]}
+              <a
+                className="js-new link-base-color link-no-underline"
+                href="#"
+                onClick={[Function]}
               >
-                <input
-                  autoFocus={true}
-                  className="input-large spacer-right text-middle"
-                  onChange={[Function]}
-                  placeholder="onboarding.token.generate_token.placeholder"
-                  required={true}
-                  type="text"
-                  value="my token"
-                />
                 <i
-                  className="spinner text-middle"
+                  className="icon-radio spacer-right"
                 />
-              </form>
+                onboarding.token.use_existing_token
+              </a>
             </div>
           </div>
           <div
-            className="big-spacer-top"
+            className="note big-spacer-top width-50"
           >
-            <a
-              className="js-new link-base-color link-no-underline"
-              href="#"
-              onClick={[Function]}
-            >
-              <i
-                className="icon-radio spacer-right"
-              />
-              onboarding.token.use_existing_token
-            </a>
+            onboarding.token.text
           </div>
         </div>
-        <div
-          className="note big-spacer-top width-50"
-        >
-          onboarding.token.text
-        </div>
       </div>
     </div>
   </Step>
@@ -253,77 +261,81 @@ exports[`generates token 3`] = `
         </h2>
       </div>
       <div
-        className="boxed-group-inner"
+        className=""
       >
-        <form
-          onSubmit={[Function]}
+        <div
+          className="boxed-group-inner"
         >
-          <span
-            className="text-middle"
-          >
-            my token
-            : 
-          </span>
-          <strong
-            className="spacer-right text-middle"
+          <form
+            onSubmit={[Function]}
           >
-            abcd1234
-          </strong>
-          <DeleteButton
-            className="button-small text-middle"
-            onClick={[Function]}
-          >
-            <ButtonIcon
+            <span
+              className="text-middle"
+            >
+              my token
+              : 
+            </span>
+            <strong
+              className="spacer-right text-middle"
+            >
+              abcd1234
+            </strong>
+            <DeleteButton
               className="button-small text-middle"
-              color="#d4333f"
               onClick={[Function]}
             >
-              <Button
-                className="button-small text-middle button-icon"
+              <ButtonIcon
+                className="button-small text-middle"
+                color="#d4333f"
                 onClick={[Function]}
-                stopPropagation={true}
-                style={
-                  Object {
-                    "color": "#d4333f",
-                  }
-                }
               >
-                <button
-                  className="button button-small text-middle button-icon"
+                <Button
+                  className="button-small text-middle button-icon"
                   onClick={[Function]}
+                  stopPropagation={true}
                   style={
                     Object {
                       "color": "#d4333f",
                     }
                   }
-                  type="button"
                 >
-                  <ClearIcon />
-                </button>
-              </Button>
-            </ButtonIcon>
-          </DeleteButton>
-        </form>
-        <div
-          className="note big-spacer-top width-50"
-        >
-          onboarding.token.text
-        </div>
-        <div
-          className="big-spacer-top"
-        >
-          <Button
-            className="js-continue"
-            onClick={[Function]}
+                  <button
+                    className="button button-small text-middle button-icon"
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "color": "#d4333f",
+                      }
+                    }
+                    type="button"
+                  >
+                    <ClearIcon />
+                  </button>
+                </Button>
+              </ButtonIcon>
+            </DeleteButton>
+          </form>
+          <div
+            className="note big-spacer-top width-50"
           >
-            <button
-              className="button js-continue"
+            onboarding.token.text
+          </div>
+          <div
+            className="big-spacer-top"
+          >
+            <Button
+              className="js-continue"
               onClick={[Function]}
-              type="button"
             >
-              continue
-            </button>
-          </Button>
+              <button
+                className="button js-continue"
+                onClick={[Function]}
+                type="button"
+              >
+                continue
+              </button>
+            </Button>
+          </div>
         </div>
       </div>
     </div>
@@ -369,77 +381,81 @@ exports[`revokes token 1`] = `
         </h2>
       </div>
       <div
-        className="boxed-group-inner"
+        className=""
       >
-        <form
-          onSubmit={[Function]}
+        <div
+          className="boxed-group-inner"
         >
-          <span
-            className="text-middle"
-          >
-            my token
-            : 
-          </span>
-          <strong
-            className="spacer-right text-middle"
+          <form
+            onSubmit={[Function]}
           >
-            abcd1234
-          </strong>
-          <DeleteButton
-            className="button-small text-middle"
-            onClick={[Function]}
-          >
-            <ButtonIcon
+            <span
+              className="text-middle"
+            >
+              my token
+              : 
+            </span>
+            <strong
+              className="spacer-right text-middle"
+            >
+              abcd1234
+            </strong>
+            <DeleteButton
               className="button-small text-middle"
-              color="#d4333f"
               onClick={[Function]}
             >
-              <Button
-                className="button-small text-middle button-icon"
+              <ButtonIcon
+                className="button-small text-middle"
+                color="#d4333f"
                 onClick={[Function]}
-                stopPropagation={true}
-                style={
-                  Object {
-                    "color": "#d4333f",
-                  }
-                }
               >
-                <button
-                  className="button button-small text-middle button-icon"
+                <Button
+                  className="button-small text-middle button-icon"
                   onClick={[Function]}
+                  stopPropagation={true}
                   style={
                     Object {
                       "color": "#d4333f",
                     }
                   }
-                  type="button"
                 >
-                  <ClearIcon />
-                </button>
-              </Button>
-            </ButtonIcon>
-          </DeleteButton>
-        </form>
-        <div
-          className="note big-spacer-top width-50"
-        >
-          onboarding.token.text
-        </div>
-        <div
-          className="big-spacer-top"
-        >
-          <Button
-            className="js-continue"
-            onClick={[Function]}
+                  <button
+                    className="button button-small text-middle button-icon"
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "color": "#d4333f",
+                      }
+                    }
+                    type="button"
+                  >
+                    <ClearIcon />
+                  </button>
+                </Button>
+              </ButtonIcon>
+            </DeleteButton>
+          </form>
+          <div
+            className="note big-spacer-top width-50"
           >
-            <button
-              className="button js-continue"
+            onboarding.token.text
+          </div>
+          <div
+            className="big-spacer-top"
+          >
+            <Button
+              className="js-continue"
               onClick={[Function]}
-              type="button"
             >
-              continue
-            </button>
-          </Button>
+              <button
+                className="button js-continue"
+                onClick={[Function]}
+                type="button"
+              >
+                continue
+              </button>
+            </Button>
+          </div>
         </div>
       </div>
     </div>
@@ -485,46 +501,50 @@ exports[`revokes token 2`] = `
         </h2>
       </div>
       <div
-        className="boxed-group-inner"
+        className=""
       >
-        <form
-          onSubmit={[Function]}
+        <div
+          className="boxed-group-inner"
         >
-          <span
-            className="text-middle"
+          <form
+            onSubmit={[Function]}
           >
-            my token
-            : 
-          </span>
-          <strong
-            className="spacer-right text-middle"
+            <span
+              className="text-middle"
+            >
+              my token
+              : 
+            </span>
+            <strong
+              className="spacer-right text-middle"
+            >
+              abcd1234
+            </strong>
+            <i
+              className="spinner text-middle"
+            />
+          </form>
+          <div
+            className="note big-spacer-top width-50"
           >
-            abcd1234
-          </strong>
-          <i
-            className="spinner text-middle"
-          />
-        </form>
-        <div
-          className="note big-spacer-top width-50"
-        >
-          onboarding.token.text
-        </div>
-        <div
-          className="big-spacer-top"
-        >
-          <Button
-            className="js-continue"
-            onClick={[Function]}
+            onboarding.token.text
+          </div>
+          <div
+            className="big-spacer-top"
           >
-            <button
-              className="button js-continue"
+            <Button
+              className="js-continue"
               onClick={[Function]}
-              type="button"
             >
-              continue
-            </button>
-          </Button>
+              <button
+                className="button js-continue"
+                onClick={[Function]}
+                type="button"
+              >
+                continue
+              </button>
+            </Button>
+          </div>
         </div>
       </div>
     </div>
@@ -570,78 +590,82 @@ exports[`revokes token 3`] = `
         </h2>
       </div>
       <div
-        className="boxed-group-inner"
+        className=""
       >
-        <div>
+        <div
+          className="boxed-group-inner"
+        >
           <div>
-            <a
-              className="js-new link-base-color link-no-underline"
-              href="#"
-              onClick={[Function]}
-            >
-              <i
-                className="icon-radio spacer-right is-checked"
-              />
-              onboarding.token.generate_token
-            </a>
-            <div
-              className="big-spacer-top"
-            >
-              <form
-                onSubmit={[Function]}
+            <div>
+              <a
+                className="js-new link-base-color link-no-underline"
+                href="#"
+                onClick={[Function]}
               >
-                <input
-                  autoFocus={true}
-                  className="input-large spacer-right text-middle"
-                  onChange={[Function]}
-                  placeholder="onboarding.token.generate_token.placeholder"
-                  required={true}
-                  type="text"
-                  value=""
+                <i
+                  className="icon-radio spacer-right is-checked"
                 />
-                <SubmitButton
-                  className="text-middle"
-                  disabled={true}
+                onboarding.token.generate_token
+              </a>
+              <div
+                className="big-spacer-top"
+              >
+                <form
+                  onSubmit={[Function]}
                 >
-                  <Button
+                  <input
+                    autoFocus={true}
+                    className="input-large spacer-right text-middle"
+                    onChange={[Function]}
+                    placeholder="onboarding.token.generate_token.placeholder"
+                    required={true}
+                    type="text"
+                    value=""
+                  />
+                  <SubmitButton
                     className="text-middle"
                     disabled={true}
-                    preventDefault={false}
-                    type="submit"
                   >
-                    <button
-                      className="button text-middle"
+                    <Button
+                      className="text-middle"
                       disabled={true}
-                      onClick={[Function]}
+                      preventDefault={false}
                       type="submit"
                     >
-                      onboarding.token.generate
-                    </button>
-                  </Button>
-                </SubmitButton>
-              </form>
+                      <button
+                        className="button text-middle"
+                        disabled={true}
+                        onClick={[Function]}
+                        type="submit"
+                      >
+                        onboarding.token.generate
+                      </button>
+                    </Button>
+                  </SubmitButton>
+                </form>
+              </div>
+            </div>
+            <div
+              className="big-spacer-top"
+            >
+              <a
+                className="js-new link-base-color link-no-underline"
+                href="#"
+                onClick={[Function]}
+              >
+                <i
+                  className="icon-radio spacer-right"
+                />
+                onboarding.token.use_existing_token
+              </a>
             </div>
           </div>
           <div
-            className="big-spacer-top"
+            className="note big-spacer-top width-50"
           >
-            <a
-              className="js-new link-base-color link-no-underline"
-              href="#"
-              onClick={[Function]}
-            >
-              <i
-                className="icon-radio spacer-right"
-              />
-              onboarding.token.use_existing_token
-            </a>
+            onboarding.token.text
           </div>
         </div>
-        <div
-          className="note big-spacer-top width-50"
-        >
-          onboarding.token.text
-        </div>
       </div>
     </div>
   </Step>
-- 
2.39.5