From d69b0f90d81e83180b916738c6ce92bdb6f09e3d Mon Sep 17 00:00:00 2001
From: Dharini Jeeva <dharini@hashicorp.com>
Date: Fri, 10 Jun 2022 15:43:20 -0700
Subject: [PATCH] Icu 4556 create a quick setup screen (#1129)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 🎸 Create a resource onboarding form
---
 addons/core/translations/actions/en-us.yaml   |  2 +-
 addons/core/translations/en-us.yaml           | 10 ++++
 .../onboarding/create-resources/index.hbs     | 50 +++++++++++++++++++
 .../form/onboarding/create-resources/index.js | 13 +++++
 .../quick-setup/create-resources.js           |  2 +-
 ui/admin/app/styles/app.scss                  | 23 ++++++++-
 .../quick-setup/create-resources.hbs          |  2 -
 .../quick-setup/create-resources/index.hbs    | 18 +++++--
 .../onboarding/create-resource-test.js        | 35 +++++++++++++
 9 files changed, 147 insertions(+), 8 deletions(-)
 create mode 100644 ui/admin/app/components/form/onboarding/create-resources/index.hbs
 create mode 100644 ui/admin/app/components/form/onboarding/create-resources/index.js
 delete mode 100644 ui/admin/app/templates/scopes/scope/onboarding/quick-setup/create-resources.hbs
 create mode 100644 ui/admin/tests/acceptance/onboarding/create-resource-test.js

diff --git a/addons/core/translations/actions/en-us.yaml b/addons/core/translations/actions/en-us.yaml
index e2d68df42..7e3dd4e45 100644
--- a/addons/core/translations/actions/en-us.yaml
+++ b/addons/core/translations/actions/en-us.yaml
@@ -38,4 +38,4 @@ minimize: Minimize
 fullscreen: Fullscreen
 clear-all-filters: Clear all filters
 learn-more: Learn more
-refresh: Refresh
\ No newline at end of file
+refresh: Refresh
diff --git a/addons/core/translations/en-us.yaml b/addons/core/translations/en-us.yaml
index d67230d05..580cebbdb 100644
--- a/addons/core/translations/en-us.yaml
+++ b/addons/core/translations/en-us.yaml
@@ -32,6 +32,7 @@ titles:
   no-results: No Results
   choose-a-provider: Choose a provider
   provider: Provider
+  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.
   origin-initialization: To get started, please enter your origin URL
@@ -56,7 +57,16 @@ onboarding:
       choose-path: Welcome to Boundary
       quick-setup: Quick setup
       manual: Manual
+      create-resource: Creating your first target
+      resource-setup-info: We’ll set up scopes & a host catalog for you
+      host-address: Host Address
+      target-port: Target Port
+      toggle-resource-info:  I have an IP address and port for my first host
     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.
+      create-resource: In Boundary, a “target” defines a server that your users will connect to.
+      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”"
diff --git a/ui/admin/app/components/form/onboarding/create-resources/index.hbs b/ui/admin/app/components/form/onboarding/create-resources/index.hbs
new file mode 100644
index 000000000..8f588f4bd
--- /dev/null
+++ b/ui/admin/app/components/form/onboarding/create-resources/index.hbs
@@ -0,0 +1,50 @@
+<Rose::Form
+  class='full-width'
+  @cancel={{@cancel}}
+  @disabled={{@model.isSaving}}
+  @onSubmit={{fn @submit this.hostAddress this.targetPort}}
+  as |form|
+>
+
+  <form.checkbox
+    @label={{t 'onboarding.quick-start.titles.toggle-resource-info'}}
+    @onChange={{this.toggleHostInfoSetup}}
+  />
+  {{#if this.showHostInfo}}
+    <div class='create-resource-cards'>
+      <form.input
+        @name='hostAddress'
+        @type='text'
+        @value={{this.hostAddress}}
+        @label={{t 'onboarding.quick-start.titles.host-address'}}
+        @helperText={{t 'onboarding.quick-start.descriptions.host-address'}}
+      />
+
+      <form.input
+        @name='targetPort'
+        @type='text'
+        @value={{this.targetPort}}
+        @label={{t 'onboarding.quick-start.titles.target-port'}}
+        @helperText={{t 'onboarding.quick-start.descriptions.target-port'}}
+      />
+    </div>
+  {{/if}}
+  <form.fieldset>
+    <:title>{{t 'onboarding.quick-start.titles.resource-setup-info'}}</:title>
+    <:description>{{t
+        'onboarding.quick-start.descriptions.resource-setup-info'
+      }}
+    </:description>
+
+    <:body>
+      <Image @name='resource-creation' />
+
+    </:body>
+  </form.fieldset>
+
+  <form.actions
+    @disabled={{false}}
+    @submitText={{t 'actions.next'}}
+    @showCancel={{false}}
+  />
+</Rose::Form>
\ No newline at end of file
diff --git a/ui/admin/app/components/form/onboarding/create-resources/index.js b/ui/admin/app/components/form/onboarding/create-resources/index.js
new file mode 100644
index 000000000..2f71b3aea
--- /dev/null
+++ b/ui/admin/app/components/form/onboarding/create-resources/index.js
@@ -0,0 +1,13 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class FormOnboardingComponent extends Component {
+  // =actions
+  @tracked showHostInfo = false;
+
+  @action
+  toggleHostInfoSetup() {
+    this.showHostInfo = !this.showHostInfo;
+  }
+}
diff --git a/ui/admin/app/routes/scopes/scope/onboarding/quick-setup/create-resources.js b/ui/admin/app/routes/scopes/scope/onboarding/quick-setup/create-resources.js
index 478a57045..809bf1b7c 100644
--- a/ui/admin/app/routes/scopes/scope/onboarding/quick-setup/create-resources.js
+++ b/ui/admin/app/routes/scopes/scope/onboarding/quick-setup/create-resources.js
@@ -49,7 +49,7 @@ export default class ScopesScopeOnboardingQuickSetupCreateResourcesRoute extends
   @action
   @loading
   @notifyError(({ message }) => message)
-  async submit(event, hostAddress = '1234', targetPort = '42') {
+  async createResource(hostAddress = '1234', targetPort = '42') {
     try {
       await this.createOnboardingResourcesAndRedirect(hostAddress, targetPort);
     } catch (e) {
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index 1c5f39d07..96e41492a 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -235,6 +235,7 @@
   }
 }
 
+//onboarding quick setup styles
 .choose-path {
   display: block;
   width: sizing.rems(xl) * 15;
@@ -243,4 +244,24 @@
 .choose-path-cards {
   display: flex;
   justify-content: space-between;
-}
\ No newline at end of file
+}
+.create-resources {
+  display: block;
+  width: sizing.rems(xl) * 15;
+  .rose-form-fieldset {
+    margin-top: sizing.rems(xl);
+  }
+  .rose-frame-body {
+    p {
+      color: var(--ui-gray);
+    }
+  }
+}
+
+.create-resource-cards {
+  display: flex;
+  justify-content: space-between;
+  .rose-form-input {
+    width: sizing.rems(xl) * 6;
+  }
+}
diff --git a/ui/admin/app/templates/scopes/scope/onboarding/quick-setup/create-resources.hbs b/ui/admin/app/templates/scopes/scope/onboarding/quick-setup/create-resources.hbs
deleted file mode 100644
index b529ba583..000000000
--- a/ui/admin/app/templates/scopes/scope/onboarding/quick-setup/create-resources.hbs
+++ /dev/null
@@ -1,2 +0,0 @@
-{{page-title 'CreateResources'}}
-{{outlet}}
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/onboarding/quick-setup/create-resources/index.hbs b/ui/admin/app/templates/scopes/scope/onboarding/quick-setup/create-resources/index.hbs
index cbcd28dee..8565db7d5 100644
--- a/ui/admin/app/templates/scopes/scope/onboarding/quick-setup/create-resources/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/onboarding/quick-setup/create-resources/index.hbs
@@ -1,3 +1,15 @@
-<button type='button' {{on 'click' (route-action 'submit')}}>{{t
-    'actions.submit'
-  }}</button>
\ No newline at end of file
+{{page-title (t 'create-resources')}}
+<Rose::Layout::Centered class='create-resources'>
+  <Rose::Frame>
+    <:header>
+      <h2>{{t 'onboarding.quick-start.titles.quick-setup'}}</h2>
+    </:header>
+    <:body>
+      <h3>{{t 'onboarding.quick-start.titles.create-resource'}}</h3>
+      <p>{{t 'onboarding.quick-start.descriptions.create-resource'}}</p>
+      <Form::Onboarding::CreateResources
+        @submit={{route-action 'createResource'}}
+      />
+    </:body>
+  </Rose::Frame>
+</Rose::Layout::Centered>
\ No newline at end of file
diff --git a/ui/admin/tests/acceptance/onboarding/create-resource-test.js b/ui/admin/tests/acceptance/onboarding/create-resource-test.js
new file mode 100644
index 000000000..365b6499d
--- /dev/null
+++ b/ui/admin/tests/acceptance/onboarding/create-resource-test.js
@@ -0,0 +1,35 @@
+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 | create-resources', function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  const urls = {
+    createResources: '/scopes/global/onboarding/quick-setup/create-resources',
+    successPath:
+      '/scopes/global/onboarding/quick-setup/create-resources/success',
+  };
+
+  hooks.beforeEach(function () {
+    authenticateSession({});
+  });
+
+  test('show hostAddress and targetPort fields when the checkbox is checked', async function (assert) {
+    assert.expect(2);
+    await visit(urls.createResources);
+    await click('[type="checkbox"]');
+    assert.ok(find('[name="hostAddress"]'));
+    assert.ok(find('[name="targetPort"]'));
+  });
+
+  test('redirects user to success screen when next is clicked', async function (assert) {
+    assert.expect(1);
+    await visit(urls.createResources);
+    await click('[type="submit"]');
+    assert.equal(currentURL(), urls.successPath);
+  });
+});