Chore add onboarding role (#1142)

* chore: generate a role authorized to access the generated onboarding target

addons/core/translations/en-us.yaml

@@ -77,10 +77,12 @@ onboarding:
       desktop: Using Boundary Desktop
       developers: Developers
       controller: Controller URL
+      creation-success: We have created your scopes and target
     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
+      role: You can now connect to the target with the Boundary Desktop app, command-line (CLI) or API. Boundary grants access to resources based on roles, and we have added you to the `demo` role to give you access to this target. Make sure to add this role to any new users if you want them to access it too.
     links:
       install: Install the Boundary Desktop app
       learn: Learn about Boundary Desktop app

ui/admin/app/routes/onboarding/quick-setup/create-resources.js

@@ -43,6 +43,9 @@ export default class OnboardingQuickSetupCreateResourcesRoute extends Route {
         name: 'CRM Database target',
         description: 'Sample target created by quick setup',
       }),
+      role: this.store.createRecord('role', {
+        name: 'crm_db_connect_role',
+      }),
     };
   }
 
@@ -57,13 +60,14 @@ export default class OnboardingQuickSetupCreateResourcesRoute extends Route {
     try {
       await this.createOnboardingResourcesAndRedirect(hostAddress, targetPort);
     } catch (e) {
+      console.log(e);
       this.router.replaceWith('scopes.scope', 'global');
       throw new Error();
     }
   }
 
   async createOnboardingResourcesAndRedirect(hostAddress, targetPort) {
-    const { org, project, hostCatalog, hostSet, host, target } =
+    const { org, project, hostCatalog, hostSet, host, target, role } =
       this.currentModel;
     // The Procedure
     await org.save();
@@ -82,6 +86,13 @@ export default class OnboardingQuickSetupCreateResourcesRoute extends Route {
       target.default_port = targetPort;
       await target.save();
       await target.addHostSources([hostSet.id]);
+      role.scopeID = org.id;
+      role.grant_scope_id = project.id;
+      await role.save();
+      await role.saveGrantStrings([
+        `type=target;actions=list`,
+        `id=${target.id};actions=authorize-session`,
+      ]);
       this.router.transitionTo(
         'onboarding.quick-setup.create-resources.success'
       );

ui/admin/app/styles/app.scss

@@ -296,9 +296,22 @@
   }
 }
 
-.onboarding-quick-setup-success-boundary {
+.onboarding-quick-setup-success-role {
+  span {
+    display: flex;
+  }
+
+  h3 {
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: -0.5px;
+    line-height: 24px;
+    margin-left: sizing.rems(xs);
+    margin-top: 0;
+  }
+
   .rose-icon {
-    margin-bottom: sizing.rems(xs);
+    color: var(--success);
   }
 }
 
@@ -312,6 +325,10 @@
     margin-left: sizing.rems(xs);
     margin-top: sizing.rems(xxs);
   }
+
+  .rose-icon {
+    margin-bottom: sizing.rems(xs);
+  }
 }
 
 .onboarding-quick-setup-success-link {

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

@@ -5,53 +5,60 @@
       <h2>{{t 'onboarding.success.titles.connect'}}</h2>
     </:header>
     <:body>
-      <div class='onboarding-quick-setup-success-boundary'>
-        <div class='onboarding-quick-setup-success-sub-title'>
-          <Rose::Icon @name='logo-app-background' @size='extra-large' />
+      <div class='onboarding-quick-setup-success-role'>
+        <span>
+          <Rose::Icon @name='flight-icons/svg/check-circle-16' />
           <h3>
-            {{t 'onboarding.success.titles.desktop'}}
+            {{t 'onboarding.success.titles.creation-success'}}
           </h3>
+        </span>
+        <p>{{t 'onboarding.success.descriptions.role'}}</p>
+      </div>
+      <div class='onboarding-quick-setup-success-sub-title'>
+        <Rose::Icon @name='logo-app-background' @size='extra-large' />
+        <h3>
+          {{t 'onboarding.success.titles.desktop'}}
+        </h3>
+      </div>
+
+      <p>{{t 'onboarding.success.descriptions.download'}}</p>
+
+      <a
+        href={{doc-url 'downloads'}}
+        target='_blank'
+        class='onboarding-quick-setup-success-link'
+        rel='noopener noreferrer'
+      >
+        <Rose::Icon @name='flight-icons/svg/download-16' @size='medium' />
+        {{t 'onboarding.success.links.install'}}
+      </a>
+
+      <a
+        href={{doc-url 'getting-started.desktop'}}
+        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.learn'}}
+      </a>
+
+      <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>
 
-        <p>{{t 'onboarding.success.descriptions.download'}}</p>
-
-        <a
-          href={{doc-url 'downloads'}}
-          target='_blank'
-          class='onboarding-quick-setup-success-link'
-          rel='noopener noreferrer'
-        >
-          <Rose::Icon @name='flight-icons/svg/download-16' @size='medium' />
-          {{t 'onboarding.success.links.install'}}
-        </a>
-
-        <a
-          href={{doc-url 'getting-started.desktop'}}
-          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.learn'}}
-        </a>
-
-        <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 class='onboarding-quick-setup-success-image'>
+        <Image @name='targets' />
       </div>
 
       <div class='onboarding-quick-setup-success-developers'>