feat: 🎸 Add Controller URL component to Success screen (#1135)

* 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

@@ -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

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

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);
+  }
+}

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')}}
 <Rose::Layout::Centered class='create-resources'>
   <Rose::Frame>
     <:header>

ui/admin/app/templates/onboarding/quick-setup/create-resources/success.hbs

@@ -1,12 +1,12 @@
 {{page-title (t 'titles.success')}}
-<Rose::Layout::Centered class='success-centered'>
+<Rose::Layout::Centered class='onboarding-quick-setup-success'>
   <Rose::Frame>
     <:header>
       <h2>{{t 'onboarding.success.titles.connect'}}</h2>
     </:header>
     <:body>
-      <div class='success-boundary'>
-        <div class='success-sub-title'>
+      <div class='onboarding-quick-setup-success-boundary'>
+        <div class='onboarding-quick-setup-success-sub-title'>
           <Rose::Icon @name='logo-app-background' @size='extra-large' />
           <h3>
             {{t 'onboarding.success.titles.desktop'}}
@@ -18,7 +18,7 @@
         <a
           href={{doc-url 'downloads'}}
           target='_blank'
-          class='success-link'
+          class='onboarding-quick-setup-success-link'
           rel='noopener noreferrer'
         >
           <Rose::Icon @name='flight-icons/svg/download-16' @size='medium' />
@@ -28,48 +28,64 @@
         <a
           href={{doc-url 'getting-started.desktop'}}
           target='_blank'
-          class='success-link'
+          class='onboarding-quick-setup-success-link'
           rel='noopener noreferrer'
         >
           <Rose::Icon @name='flight-icons/svg/docs-link-16' @size='medium' />
           {{t 'onboarding.success.links.learn'}}
         </a>
 
-        <div class='success-image'>
+        <div class='onboarding-quick-setup-success-controller'>
+          <h4>{{t 'onboarding.success.titles.controller'}}</h4>
+          <p>{{t 'onboarding.success.descriptions.controller'}}</p>
+          <div class='onboarding-quick-setup-success-controller-url'>
+            <Copyable
+              @text={{this.model.origin}}
+              @buttonText={{t 'actions.copy-to-clipboard'}}
+              @acknowledgeText={{t 'states.copied'}}
+            >
+              <code>{{this.model.origin}}</code>
+            </Copyable>
+          </div>
+        </div>
+
+        <div class='onboarding-quick-setup-success-image'>
           <Image @name='targets' />
         </div>
       </div>
 
-      <h3>{{t 'onboarding.success.titles.developers'}}</h3>
+      <div class='onboarding-quick-setup-success-developers'>
+        <h4>{{t 'onboarding.success.titles.developers'}}</h4>
 
-      <p>{{t 'onboarding.success.descriptions.developers'}}</p>
+        <p>{{t 'onboarding.success.descriptions.developers'}}</p>
 
-      <a
-        href={{doc-url 'api-client.cli'}}
-        target='_blank'
-        class='success-link'
-        rel='noopener noreferrer'
-      >
-        <Rose::Icon @name='flight-icons/svg/docs-link-16' @size='medium' />
-        {{t 'onboarding.success.links.cli'}}
-      </a>
+        <a
+          href={{doc-url 'api-client.cli'}}
+          target='_blank'
+          class='onboarding-quick-setup-success-link'
+          rel='noopener noreferrer'
+        >
+          <Rose::Icon @name='flight-icons/svg/docs-link-16' @size='medium' />
+          {{t 'onboarding.success.links.cli'}}
+        </a>
 
-      <a
-        href={{doc-url 'api-client.api'}}
-        target='_blank'
-        class='success-link'
-        rel='noopener noreferrer'
-      >
-        <Rose::Icon @name='flight-icons/svg/docs-link-16' @size='medium' />
-        {{t 'onboarding.success.links.api'}}
-      </a>
-      <Rose::Button
-        class='success-button'
-        @style='primary'
-        {{on 'click' (route-action 'showTargetList' @model)}}
-      >
-        {{t 'actions.done'}}
-      </Rose::Button>
+        <a
+          href={{doc-url 'api-client.api'}}
+          target='_blank'
+          class='onboarding-quick-setup-success-link'
+          rel='noopener noreferrer'
+        >
+          <Rose::Icon @name='flight-icons/svg/docs-link-16' @size='medium' />
+          {{t 'onboarding.success.links.api'}}
+        </a>
+        <Rose::Button
+          class='onboarding-quick-setup-success-button'
+          @style='primary'
+          {{on 'click' (route-action 'showTargetList' @model)}}
+        >
+          {{t 'actions.done'}}
+        </Rose::Button>
+      </div>
     </:body>
   </Rose::Frame>
 </Rose::Layout::Centered>

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'));
     });
   }
 );