Create successful resource creation screen (#1132)

* feat: 🎸 Create successful resource creation screen Create a screen with helpful information about Boundary once resources have been created for the user ✅ Closes: ICU-4558 * style: 💄 remove stale comment * chore: 🤖 resolve conflicts and merge main Co-authored-by: dharini <dharini@hashicorp.com>
2022-06-14 09:33:51 -05:00
1 parent 15dc735322
commit a5da593f07
@@ -0,0 +1,12 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 8C0 4.22876 0 2.34315 1.17157 1.17157C2.34315 0 4.22876 0 8 0H24C27.7712 0 29.6569 0 30.8284 1.17157C32 2.34315 32 4.22876 32 8V24C32 27.7712 32 29.6569 30.8284 30.8284C29.6569 32 27.7712 32 24 32H8C4.22876 32 2.34315 32 1.17157 30.8284C0 29.6569 0 27.7712 0 24V8Z" fill="url(#paint0_linear_4389_56864)"/>
+<path d="M10.9261 25.03V23.6294H13.8501V22.7694H12.4249V21.3688H19.0838L15.9878 16.0123L19.0838 10.6557H12.2529V18.0763H8.5918V6.96997H21.2215L23.3347 10.6311L20.2387 16.0123L23.4084 21.4917L21.3444 25.03H10.9261Z" fill="white"/>
+<path d="M11.4914 21.3688H10.0908V22.7694H11.4914V21.3688Z" fill="white"/>
+<path d="M9.99237 23.6294H8.5918V25.03H9.99237V23.6294Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_4389_56864" x1="16" y1="0" x2="16" y2="32" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F66F74"/>
+<stop offset="1" stop-color="#F34D52"/>
+</linearGradient>
+</defs>
+</svg>
@@ -0,0 +1,9 @@
+<svg width="482" height="241" viewBox="0 0 482 241" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="0.5" y="0.5" width="481" height="240" fill="url(#pattern0)" stroke="#BAC1CC"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_4389_60550" transform="scale(0.00125 0.0025)"/>
+</pattern>
+<image id="image0_4389_60550" width="800" height="400" xlink:href="data:image/png;base64,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 truncated
+</defs>
+</svg>
@@ -9,6 +9,7 @@ save: Save
 submit: Submit
 manage: Manage
 confirm: Confirm
+done: Done
 ok: OK
 deny: Deny
 help: Need help?
@@ -32,6 +32,7 @@ titles:
  no-results: No Results
  choose-a-provider: Choose a provider
  provider: Provider
+  success: Success
  create-resources: Create Resources
 descriptions:
  empty-set: There are no items to display yet.  You may be able to add items or try back later.
@@ -70,3 +71,17 @@ onboarding:
      resource-setup-info: Hosts are organized in host catalogs, which live in projects, which live in orgs. We will create these for you, and they can be edited or deleted later.
      host-address: "Example: “192.168.0.1” or IPv6"
      target-port: "Example: “22”"
+  success:
+    titles:
+      connect: Connect to your Target
+      desktop: Using Boundary Desktop
+      developers: Developers
+    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.
+    links:
+      install: Install the Boundary Desktop app
+      learn: Learn about Boundary Desktop app
+      cli: Learn about Boundary command-line (CLI)
+      api: Learn about Boundary API
+
@@ -3,6 +3,10 @@
 .rose-icon {
  --size: #{sizing.rems(l)};

+  &.extra-large {
+    --size: #{sizing.rems(m) * 2};
+  }
+
  &.medium {
    --size: #{sizing.rems(m)};
  }
@@ -245,6 +245,43 @@
  display: flex;
  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;
@@ -1,2 +1,68 @@
-{{page-title 'Success'}}
-{{outlet}}
+{{page-title (t 'titles.success')}}
+<Rose::Layout::Centered class='success-centered'>
+  <Rose::Frame>
+    <:header>
+      <h2>{{t 'onboarding.success.titles.connect'}}</h2>
+    </:header>
+    <:body>
+      <div class='success-boundary'>
+        <div class='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='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='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'>
+          <Image @name='targets' />
+        </div>
+      </div>
+
+      <h3>{{t 'onboarding.success.titles.developers'}}</h3>
+
+      <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.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>
+    </:body>
+  </Rose::Frame>
+</Rose::Layout::Centered>
@@ -89,6 +89,10 @@ module.exports = function (environment) {
        'target.add-host-sources': '/targets/add-host-sets',
        'target.worker-filters': '/targets/worker-filters',
        user: '/users',
+        downloads: '/downloads',
+        'getting-started.desktop': '/gettting-started/desktop',
+        'api-client.cli': '/api-client/cli',
+        'api-client.api': '/api-client/api',
      },
    },

@@ -0,0 +1,30 @@
+import { module, test } from 'qunit';
+import { visit, currentURL, 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 | quick-setup | create-resources | success',
+  function (hooks) {
+    setupApplicationTest(hooks);
+    setupMirage(hooks);
+
+    hooks.beforeEach(function () {
+      authenticateSession({});
+    });
+
+    const urls = {
+      createResources:
+        '/scopes/global/onboarding/quick-setup/create-resources/success',
+      targets: '/scopes/global/targets',
+    };
+
+    test.skip('clicking done takes user to targets screen', async function (assert) {
+      assert.expect(1);
+      await visit(urls.createResources);
+      await click('.success-button');
+      assert.equal(currentURL(), urls.targets);
+    });
+  }
+);