feat: 🎸 Create form to choose onboarding guide path (#1124)

* feat: 🎸 Create onboarding welcome form

addons/core/translations/actions/en-us.yaml

@@ -12,6 +12,7 @@ confirm: Confirm
 ok: OK
 deny: Deny
 help: Need help?
+next: Next
 back: Back
 retry: Retry
 get-topic-help: Get help for this topic

addons/core/translations/en-us.yaml

@@ -50,3 +50,13 @@ themes:
   system: System Default
   light: Light
   dark: Dark
+onboarding:
+  quick-start:
+    titles:
+      choose-path: Welcome to Boundary
+      quick-setup: Quick setup
+      manual: Manual
+    descriptions:
+      choose-path: You’ve taken the first step towards making your infrastructure more secure. How do you want to get started?
+      quick-setup: I want to see how Boundary works, help me set up my first scopes and targets.
+      manual: I want to set up my first scopes and targets myself, starting with my first org.

ui/admin/app/components/form/onboarding/choose-path/index.hbs

@@ -0,0 +1,34 @@
+<Rose::Form
+  class='full-width'
+  @cancel={{@cancel}}
+  @disabled={{@model.isSaving}}
+  @onSubmit={{fn @submit this.path}}
+  as |form|
+>
+  <form.radioGroup
+    @name='paths'
+    @selectedValue={{this.path}}
+    @changed={{this.toggleRadio}}
+    as |radioGroup|
+  >
+    <div class='choose-path-cards'>
+      <radioGroup.card
+        @label={{t 'onboarding.quick-start.titles.quick-setup'}}
+        @value='guided'
+        @helperText={{t 'onboarding.quick-start.descriptions.quick-setup'}}
+        @layout='tile'
+      />
+      <radioGroup.card
+        @label={{t 'onboarding.quick-start.titles.manual'}}
+        @value='manual'
+        @helperText={{t 'onboarding.quick-start.descriptions.manual'}}
+        @layout='tile'
+      />
+    </div>
+  </form.radioGroup>
+  <form.actions
+    @disabled={{false}}
+    @submitText={{t 'actions.next'}}
+    @showCancel={{false}}
+  />
+</Rose::Form>

ui/admin/app/components/form/onboarding/choose-path/index.js

@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class FormOnboardingChoosePathComponent extends Component {
+  // =properties
+
+  /**
+   * Onboarding path property
+   * @type {string}
+   */
+  @tracked path = 'guided';
+
+  // =actions
+
+  @action
+  toggleRadio(path) {
+    this.path = path;
+  }
+}

ui/admin/app/styles/app.scss

@@ -234,3 +234,13 @@
     }
   }
 }
+
+.choose-path {
+  display: block;
+  width: sizing.rems(xl) * 15;
+}
+
+.choose-path-cards {
+  display: flex;
+  justify-content: space-between;
+}

ui/admin/app/templates/scopes/scope/onboarding/quick-setup/choose-path.hbs

@@ -1,2 +1,11 @@
-{{page-title 'ChoosePath'}}
-{{outlet}}
+<Rose::Layout::Centered class='choose-path'>
+  <Rose::Frame>
+    <:header>
+      <h2>{{t 'onboarding.quick-start.titles.choose-path'}}</h2>
+    </:header>
+    <:body>
+      <p>{{t 'onboarding.quick-start.descriptions.choose-path'}}</p>
+      <Form::Onboarding::ChoosePath @submit={{route-action 'choosePath'}} />
+    </:body>
+  </Rose::Frame>
+</Rose::Layout::Centered>

ui/admin/tests/acceptance/onboarding/choose-path-test.js

@@ -0,0 +1,50 @@
+import { module, test } from 'qunit';
+import { visit, currentURL, find, click } from '@ember/test-helpers';
+import { setupApplicationTest } from 'ember-qunit';
+import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+import { authenticateSession } from 'ember-simple-auth/test-support';
+
+module('Acceptance | onboarding | choose-path', function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  const urls = {
+    choosePath: '/scopes/global/onboarding/quick-setup/choose-path',
+    newOrg: '/scopes/global/new',
+    createResources: '/scopes/global/onboarding/quick-setup/create-resources',
+  };
+
+  hooks.beforeEach(function () {
+    authenticateSession({});
+  });
+
+  test('defaults to the guided path', async function (assert) {
+    assert.expect(2);
+    await visit(urls.choosePath);
+    assert.equal(find('input[name=paths]:checked').value, 'guided');
+    assert.false(find('input[value=manual]').checked);
+  });
+
+  test('updates to the manual path when manual card clicked', async function (assert) {
+    assert.expect(2);
+    await visit(urls.choosePath);
+    await click('[name="paths"][value="manual"]');
+    assert.equal(find('input[name=paths]:checked').value, 'manual');
+    assert.false(find('input[value=guided]').checked);
+  });
+
+  test('guided path directs user to /create-resources route', async function (assert) {
+    assert.expect(1);
+    await visit(urls.choosePath);
+    await click('[type="submit"]');
+    assert.equal(currentURL(), urls.createResources);
+  });
+
+  test('guided path directs user to /global/new route', async function (assert) {
+    assert.expect(1);
+    await visit(urls.choosePath);
+    await click('[name="paths"][value="manual"]');
+    await click('[type="submit"]');
+    assert.equal(currentURL(), urls.newOrg);
+  });
+});