From c5416e770a1b1dc96021ada00f8715b94d670688 Mon Sep 17 00:00:00 2001 From: Cameron Perera Date: Tue, 14 Jun 2022 16:36:11 -0500 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Add=20Controller=20URL?= =?UTF-8?q?=20component=20to=20Success=20screen=20(#1135)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 🎸 Add Controller URL component to Success screen ✅ Closes: ICU-4785 * style: 💄 Update Success screen styles to match wireframe * refactor: 💡 Update class names to be more descriptive * refactor: 💡 Update styles for Success card * test: 💍 Fix failing test --- addons/core/translations/en-us.yaml | 4 +- .../quick-setup/create-resources/success.js | 22 ++- ui/admin/app/styles/app.scss | 143 +++++++++++++----- .../quick-setup/create-resources/index.hbs | 2 +- .../quick-setup/create-resources/success.hbs | 82 ++++++---- .../acceptance/onboarding/success-test.js | 2 +- 6 files changed, 180 insertions(+), 75 deletions(-) diff --git a/addons/core/translations/en-us.yaml b/addons/core/translations/en-us.yaml index 12a866d2b..8e9f86116 100644 --- a/addons/core/translations/en-us.yaml +++ b/addons/core/translations/en-us.yaml @@ -73,12 +73,14 @@ onboarding: target-port: "Example: “22”" success: titles: - connect: Connect to your Target + connect: Connect to your target desktop: Using Boundary Desktop developers: Developers + controller: Controller URL descriptions: download: Download the Boundary Desktop app to browse and connect to targets (available for Windows, Mac, and Linux) developers: You can also connect to targets using the Boundary CLI or API. + controller: Use this URL to sign in to Boundary links: install: Install the Boundary Desktop app learn: Learn about Boundary Desktop app diff --git a/ui/admin/app/routes/onboarding/quick-setup/create-resources/success.js b/ui/admin/app/routes/onboarding/quick-setup/create-resources/success.js index 31dd03467..7bd79a5e6 100644 --- a/ui/admin/app/routes/onboarding/quick-setup/create-resources/success.js +++ b/ui/admin/app/routes/onboarding/quick-setup/create-resources/success.js @@ -1,12 +1,30 @@ import Route from '@ember/routing/route'; +import { getOwner } from '@ember/application'; import { inject as service } from '@ember/service'; import { action } from '@ember/object'; export default class OnboardingQuickSetupCreateResourcesSuccessRoute extends Route { - // =methods + // =services @service router; + + // =attributes + /** + * Looks up the window object indirectly. + * @type {Window} + */ + get window() { + // The Ember way of accessing globals... + const document = getOwner(this).lookup('service:-document').documentElement; + // defaultView === window, but without using globals directly + return document.parentNode.defaultView; + } + // =methods model() { - return this.modelFor('onboarding.quick-setup.create-resources'); + const model = this.modelFor('onboarding.quick-setup.create-resources'); + return { + ...model, + origin: this.window.location.origin, + }; } @action diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss index 03dcd4ba9..6e29c36b4 100644 --- a/ui/admin/app/styles/app.scss +++ b/ui/admin/app/styles/app.scss @@ -246,43 +246,6 @@ justify-content: space-between; } -.success-centered { - width: min-content; -} - -.success-boundary { - .rose-icon { - margin-bottom: sizing.rems(xs); - } -} - -.success-sub-title { - display: inline-flex; - - > h3 { - margin-left: sizing.rems(xs); - margin-top: sizing.rems(xxs); - } -} - -.success-link { - display: block; - margin-top: sizing.rems(xs); - text-decoration: none; -} - -.success-image { - margin-bottom: sizing.rems(xl); - margin-top: sizing.rems(l); -} - -.success-button { - display: flex; - justify-content: center; - margin-bottom: 0; - margin-top: sizing.rems(xl); -} - .create-resources { display: block; width: sizing.rems(xl) * 15; @@ -306,3 +269,109 @@ width: sizing.rems(xl) * 6; } } + +.onboarding-quick-setup-success { + display: block; + width: min-content; + + .rose-frame-header { + padding: sizing.rems(l); + } + + h2 { + font-weight: 700; + line-height: 24px; + margin: 0; + } + + h4 { + font-weight: 700; + line-height: 19px; + } + + a { + font-size: 12px; + font-weight: 600; + line-height: 16px; + } +} + +.onboarding-quick-setup-success-boundary { + .rose-icon { + margin-bottom: sizing.rems(xs); + } +} + +.onboarding-quick-setup-success-sub-title { + display: inline-flex; + + h3 { + font-weight: 600; + letter-spacing: -0.5px; + line-height: 24px; + margin-left: sizing.rems(xs); + margin-top: sizing.rems(xxs); + } +} + +.onboarding-quick-setup-success-link { + display: block; + margin-top: sizing.rems(xs); + text-decoration: none; +} + +.onboarding-quick-setup-success-image { + margin-bottom: sizing.rems(xl); + margin-top: sizing.rems(l); +} + +.onboarding-quick-setup-success-button { + display: flex; + justify-content: center; + margin-bottom: 0; + margin-top: sizing.rems(xl); + width: 100%; +} + +.onboarding-quick-setup-success-controller { + margin-top: sizing.rems(l); + + h4 { + font-weight: 600; + line-height: 18px; + margin-bottom: sizing.rems(xxs); + } + + p { + color: var(--ui-gray); + margin-bottom: sizing.rems(xxs); + } +} + +.onboarding-quick-setup-success-controller-url { + border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2); + border-radius: sizing.rems(xxxs); + color: var(--action); + height: (sizing.rems(xs) * 5); + + .copyable { + display: flex; + justify-content: space-between; + padding: sizing.rems(s); + } + + .rose-icon { + margin: 0; + } + + .copyable-button { + top: -4px; + } +} + +.onboarding-quick-setup-success-developers { + p { + margin-bottom: sizing.rems(s); + margin-top: sizing.rems(xs); + } +} diff --git a/ui/admin/app/templates/onboarding/quick-setup/create-resources/index.hbs b/ui/admin/app/templates/onboarding/quick-setup/create-resources/index.hbs index b81515d23..388fce16e 100644 --- a/ui/admin/app/templates/onboarding/quick-setup/create-resources/index.hbs +++ b/ui/admin/app/templates/onboarding/quick-setup/create-resources/index.hbs @@ -1,4 +1,4 @@ -{{page-title (t 'create-resources')}} +{{page-title (t 'titles.create-resources')}} <:header> diff --git a/ui/admin/app/templates/onboarding/quick-setup/create-resources/success.hbs b/ui/admin/app/templates/onboarding/quick-setup/create-resources/success.hbs index 50392b7eb..969b606db 100644 --- a/ui/admin/app/templates/onboarding/quick-setup/create-resources/success.hbs +++ b/ui/admin/app/templates/onboarding/quick-setup/create-resources/success.hbs @@ -1,12 +1,12 @@ {{page-title (t 'titles.success')}} - + <:header>

{{t 'onboarding.success.titles.connect'}}

<:body> -
-
+
+

{{t 'onboarding.success.titles.desktop'}} @@ -18,7 +18,7 @@ @@ -28,48 +28,64 @@ {{t 'onboarding.success.links.learn'}} -
+
+

{{t 'onboarding.success.titles.controller'}}

+

{{t 'onboarding.success.descriptions.controller'}}

+
+ + {{this.model.origin}} + +
+
+ +
-

{{t 'onboarding.success.titles.developers'}}

+
+

{{t 'onboarding.success.titles.developers'}}

-

{{t 'onboarding.success.descriptions.developers'}}

+

{{t 'onboarding.success.descriptions.developers'}}

- - - {{t 'onboarding.success.links.cli'}} - + + + {{t 'onboarding.success.links.cli'}} + - - - {{t 'onboarding.success.links.api'}} - - - {{t 'actions.done'}} - + + + {{t 'onboarding.success.links.api'}} + + + {{t 'actions.done'}} + +
\ No newline at end of file diff --git a/ui/admin/tests/acceptance/onboarding/success-test.js b/ui/admin/tests/acceptance/onboarding/success-test.js index cd3aa9c86..98a45291e 100644 --- a/ui/admin/tests/acceptance/onboarding/success-test.js +++ b/ui/admin/tests/acceptance/onboarding/success-test.js @@ -22,7 +22,7 @@ module( test('check if the done button is present', async function (assert) { assert.expect(1); await visit(urls.createResources); - assert.ok(find('.success-button')); + assert.ok(find('.onboarding-quick-setup-success-button')); }); } );