diff --git a/addons/core/translations/actions/en-us.yaml b/addons/core/translations/actions/en-us.yaml index cce2d9ea4..e2d68df42 100644 --- a/addons/core/translations/actions/en-us.yaml +++ b/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 diff --git a/addons/core/translations/en-us.yaml b/addons/core/translations/en-us.yaml index 5cb1bbbf4..d67230d05 100644 --- a/addons/core/translations/en-us.yaml +++ b/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. diff --git a/addons/core/translations/form/en-us.yaml b/addons/core/translations/form/en-us.yaml index 053f887b5..2e753d3e6 100644 --- a/addons/core/translations/form/en-us.yaml +++ b/addons/core/translations/form/en-us.yaml @@ -148,4 +148,4 @@ ip_addresses: label: Latest IP Addresses sync-interval: label: Sync Interval - help: Number of seconds between the time Boundary syncs hosts in this set. + help: Number of seconds between the time Boundary syncs hosts in this set. \ No newline at end of file diff --git a/ui/admin/app/components/form/onboarding/choose-path/index.hbs b/ui/admin/app/components/form/onboarding/choose-path/index.hbs new file mode 100644 index 000000000..7410a68ba --- /dev/null +++ b/ui/admin/app/components/form/onboarding/choose-path/index.hbs @@ -0,0 +1,34 @@ + + +
+ + +
+
+ +
\ No newline at end of file diff --git a/ui/admin/app/components/form/onboarding/choose-path/index.js b/ui/admin/app/components/form/onboarding/choose-path/index.js new file mode 100644 index 000000000..d8e725ba2 --- /dev/null +++ b/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; + } +} diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss index 11a275581..1c5f39d07 100644 --- a/ui/admin/app/styles/app.scss +++ b/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; +} \ No newline at end of file diff --git a/ui/admin/app/templates/scopes/scope/onboarding/quick-setup/choose-path.hbs b/ui/admin/app/templates/scopes/scope/onboarding/quick-setup/choose-path.hbs index acdf4c9b0..88e02acd5 100644 --- a/ui/admin/app/templates/scopes/scope/onboarding/quick-setup/choose-path.hbs +++ b/ui/admin/app/templates/scopes/scope/onboarding/quick-setup/choose-path.hbs @@ -1,2 +1,11 @@ -{{page-title 'ChoosePath'}} -{{outlet}} \ No newline at end of file + + + <:header> +

{{t 'onboarding.quick-start.titles.choose-path'}}

+ + <:body> +

{{t 'onboarding.quick-start.descriptions.choose-path'}}

+ + +
+
\ No newline at end of file diff --git a/ui/admin/tests/acceptance/onboarding/choose-path-test.js b/ui/admin/tests/acceptance/onboarding/choose-path-test.js new file mode 100644 index 000000000..2fdcc213f --- /dev/null +++ b/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); + }); +});