Icu 4556 create a quick setup screen (#1129)

* feat: 🎸 Create a resource onboarding form
2022-06-10 15:43:20 -07:00
1 parent 0bb5989259
commit d69b0f90d8
@@ -38,4 +38,4 @@ minimize: Minimize
 fullscreen: Fullscreen
 clear-all-filters: Clear all filters
 learn-more: Learn more
-refresh: Refresh
+refresh: Refresh
@@ -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”"
@@ -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>
@@ -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;
+  }
+}
@@ -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) {
@@ -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;
-}
+}
+.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;
+  }
+}
@@ -1,2 +0,0 @@
-{{page-title 'CreateResources'}}
-{{outlet}}
@@ -1,3 +1,15 @@
-<button type='button' {{on 'click' (route-action 'submit')}}>{{t
-    'actions.submit'
-  }}</button>
+{{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>
@@ -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);
+  });
+});