Alias create (#2193)

* feat: 🎸 create alias

ui/admin/app/components/form/alias/index.hbs

@@ -0,0 +1,152 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<Rose::Form
+  @onSubmit={{@submit}}
+  @cancel={{@cancel}}
+  @disabled={{@model.isSaving}}
+  @showEditToggle={{if @model.isNew false true}}
+  as |form|
+>
+  <Hds::Form::TextInput::Field
+    name='name'
+    @isOptional={{true}}
+    @value={{@model.name}}
+    @isInvalid={{@model.errors.name}}
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'name')}}
+    as |F|
+  >
+    <F.Label>{{t 'form.name.label'}}</F.Label>
+    <F.HelperText>{{t 'form.name.help'}}</F.HelperText>
+    {{#if @model.errors.name}}
+      <F.Error as |E|>
+        {{#each @model.errors.name as |error|}}
+          <E.Message>{{error.message}}</E.Message>
+        {{/each}}
+      </F.Error>
+    {{/if}}
+  </Hds::Form::TextInput::Field>
+  <Hds::Form::Textarea::Field
+    name='description'
+    @isOptional={{true}}
+    @value={{@model.description}}
+    @isInvalid={{@model.errors.description}}
+    disabled={{form.disabled}}
+    as |F|
+  >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
+    {{#if @model.errors.description}}
+      <F.Error as |E|>
+        {{#each @model.errors.description as |error|}}
+          <E.Message>{{error.message}}</E.Message>
+        {{/each}}
+      </F.Error>
+    {{/if}}
+  </Hds::Form::Textarea::Field>
+
+  <Hds::Form::Fieldset as |F|>
+    <F.Legend>
+      {{t 'resources.alias.form.options.label'}}
+    </F.Legend>
+    <F.HelperText>
+      {{t 'resources.alias.description'}}
+    </F.HelperText>
+    <F.Control>
+      <Hds::Form::RadioCard::Group @name='type' @alignment='center' as |G|>
+        <G.Legend>{{t 'resources.target.form.type.label'}}</G.Legend>
+        <G.RadioCard @maxWidth='15rem' @checked='true' @disabled='true' as |R|>
+          <R.Label>{{t 'resources.alias.form.type.label'}}</R.Label>
+          <R.Description>{{t 'resources.alias.form.type.help'}}</R.Description>
+          <R.Icon @name='target' />
+        </G.RadioCard>
+      </Hds::Form::RadioCard::Group>
+    </F.Control>
+  </Hds::Form::Fieldset>
+
+  <Hds::Form::TextInput::Field
+    name='destination_id'
+    @isOptional={{true}}
+    @value={{@model.destination_id}}
+    @isInvalid={{@model.errors.destination_id}}
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'destination_id')}}
+    as |F|
+  >
+    <F.Label>{{t 'resources.alias.form.destination_id.label'}}</F.Label>
+    <F.HelperText>{{t
+        'resources.alias.form.destination_id.help'
+      }}</F.HelperText>
+    {{#if @model.errors.destination_id}}
+      <F.Error as |E|>
+        {{#each @model.errors.destination_id as |error|}}
+          <E.Message>{{error.message}}</E.Message>
+        {{/each}}
+      </F.Error>
+    {{/if}}
+  </Hds::Form::TextInput::Field>
+
+  <Hds::Form::TextInput::Field
+    name='authorize_session_arguments'
+    @isOptional={{true}}
+    @value={{@model.authorize_session_arguments.host_id}}
+    @isInvalid={{@model.errors.authorize_session_arguments.host_id}}
+    disabled={{form.disabled}}
+    {{on 'input' this.handleHostIdChange}}
+    as |F|
+  >
+    <F.Label>{{t
+        'resources.alias.form.authorize_session_arguments.label'
+      }}</F.Label>
+    <F.HelperText>{{t
+        'resources.alias.form.authorize_session_arguments.help'
+      }}</F.HelperText>
+    {{#if @model.errors.authorize_session_arguments.host_id}}
+      <F.Error as |E|>
+        {{#each @model.errors.authorize_session_arguments.host_id as |error|}}
+          <E.Message>{{error.message}}</E.Message>
+        {{/each}}
+      </F.Error>
+    {{/if}}
+  </Hds::Form::TextInput::Field>
+
+  <InfoField
+    @value={{@model.scopeModel.displayName}}
+    @icon='globe'
+    disabled={{form.disabled}}
+    as |F|
+  >
+    <F.Label>{{t 'resources.scope.title'}}</F.Label>
+  </InfoField>
+
+  <Hds::Form::TextInput::Field
+    name='value'
+    @isRequired={{true}}
+    @value={{@model.value}}
+    @isInvalid={{@model.errors.value}}
+    disabled={{form.disabled}}
+    {{on 'input' (set-from-event @model 'value')}}
+    as |F|
+  >
+    <F.Label>{{t 'resources.alias.form.value.label'}}</F.Label>
+    <F.HelperText>{{t 'resources.alias.form.value.help'}}</F.HelperText>
+    {{#if @model.errors.value}}
+      <F.Error as |E|>
+        {{#each @model.errors.value as |error|}}
+          <E.Message>{{error.message}}</E.Message>
+        {{/each}}
+      </F.Error>
+    {{/if}}
+  </Hds::Form::TextInput::Field>
+
+  {{#if (can 'save model' @model)}}
+    <form.actions
+      @enableEditText={{t 'actions.edit-form'}}
+      @submitText={{t 'actions.save'}}
+      @cancelText={{t 'actions.cancel'}}
+    />
+  {{/if}}
+</Rose::Form>

ui/admin/app/components/form/alias/index.js

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class FormAliasComponent extends Component {
+  //actions
+  /**
+   * Handles input changes
+   */
+  @action
+  handleHostIdChange({ target: { value } }) {
+    if (value) {
+      this.args.model.authorize_session_arguments = {
+        host_id: value,
+      };
+    }
+  }
+}

ui/admin/app/controllers/scopes/scope/aliases/index.js

@@ -4,7 +4,61 @@
  */
 
 import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { loading } from 'ember-loading';
+import { confirm } from 'core/decorators/confirm';
+import { notifySuccess, notifyError } from 'core/decorators/notify';
 
 export default class ScopesScopeAliasesIndexController extends Controller {
   // =services
+  @service can;
+  @service router;
+  // =actions
+
+  /**
+   * Rollback changes on an alias.
+   * @param {AliasModel} alias
+   */
+  @action
+  async cancel(alias) {
+    const { isNew } = alias;
+    alias.rollbackAttributes();
+    if (isNew) await this.router.transitionTo('scopes.scope.aliases');
+  }
+
+  /**
+   * Save an alias in current scope.
+   * @param {AliasModel} alias
+   */
+  @action
+  @loading
+  @notifyError(({ message }) => message)
+  @notifySuccess(({ isNew }) =>
+    isNew ? 'notifications.create-success' : 'notifications.save-success',
+  )
+  async save(alias) {
+    await alias.save();
+    if (this.can.can('read model', alias)) {
+      await this.router.transitionTo('scopes.scope.aliases.alias', alias);
+    } else {
+      await this.router.transitionTo('scopes.scope.aliases');
+    }
+    await this.router.refresh();
+  }
+
+  /**
+   * Delete an alias in current scope and redirect to index
+   *  @param {AliasModel} alias
+   */
+  @action
+  @loading
+  @confirm('questions.delete-confirm')
+  @notifyError(({ message }) => message, { catch: true })
+  @notifySuccess('notifications.delete-success')
+  async delete(alias) {
+    await alias.destroyRecord();
+    await this.router.replaceWith('scopes.scope.aliases');
+    await this.router.refresh();
+  }
 }

ui/admin/app/templates/scopes/scope/aliases/index.hbs

@@ -12,7 +12,7 @@
       {{t 'resources.alias.title'}}
       {{! TODO: Add doc link for alias }}
     </h2>
-    {{! TODO: Add desc for alias }}
+    <p>{{t 'resources.alias.description'}}</p>
   </page.header>
   <page.actions>
     {{#if (can 'create model' this.scope collection='aliases')}}
@@ -24,4 +24,36 @@
       {{/if}}
     {{/if}}
   </page.actions>
+  <page.body>
+    <Rose::Layout::Centered>
+      <Rose::Message
+        @title={{t 'resources.alias.messages.none.title'}}
+        as |message|
+      >
+        <message.description>
+          {{#if (can 'list model' this.scope collection='aliases')}}
+            {{t 'resources.alias.messages.none.description'}}
+          {{else if (can 'create model' this.scope collection='aliases')}}
+            {{t
+              'descriptions.create-but-not-list'
+              resource=(t 'resources.alias.title_plural')
+            }}
+          {{else}}
+            {{t
+              'descriptions.neither-list-nor-create'
+              resource=(t 'resources.alias.title_plural')
+            }}
+          {{/if}}
+        </message.description>
+        {{#if (can 'create model' this.scope collection='aliases')}}
+          <Hds::Link::Standalone
+            @icon='plus-circle'
+            @iconPosition='leading'
+            @route='scopes.scope.aliases.new'
+            @text={{t 'resources.alias.messages.none.link'}}
+          />
+        {{/if}}
+      </Rose::Message>
+    </Rose::Layout::Centered>
+  </page.body>
 </Rose::Layout::Page>

ui/admin/app/templates/scopes/scope/aliases/new.hbs

@@ -23,5 +23,11 @@
     {{! TODO: Add desc for alias }}
 
   </page.header>
-
+  <page.body>
+    <Form::Alias
+      @model={{@model}}
+      @submit={{fn this.aliases.save @model}}
+      @cancel={{fn this.aliases.cancel @model}}
+    />
+  </page.body>
 </Rose::Layout::Page>

ui/admin/tests/acceptance/aliases/create-test.js

@@ -0,0 +1,149 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { visit, currentURL, click, fillIn } from '@ember/test-helpers';
+import { setupApplicationTest } from 'admin/tests/helpers';
+import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+import a11yAudit from 'ember-a11y-testing/test-support/audit';
+import { Response } from 'miragejs';
+import { authenticateSession } from 'ember-simple-auth/test-support';
+
+module('Acceptance | aliases | create', function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  let features;
+  let getAliasCount;
+
+  const SAVE_BTN_SELECTOR = '[type="submit"]';
+  const CANCEL_BTN_SELECTOR = '.rose-form-actions [type="button"]';
+  const NAME_FIELD_SELECTOR = '[name="name"]';
+  const DESTINATION_ID_SELECTOR = '[name="destination_id"]';
+  const HOST_ID_SELECTOR = '[name="authorize_session_arguments"]';
+
+  const ALERT_TEXT_SELECTOR = '[role="alert"] div';
+  const FIELD_ERROR_TEXT_SELECTOR = '.hds-form-error__message';
+  const NAME_FIELD_TEXT = 'random string';
+
+  const instances = {
+    scopes: {
+      global: null,
+    },
+  };
+
+  const urls = {
+    globalScope: null,
+    aliases: null,
+    newAlias: null,
+  };
+
+  hooks.beforeEach(function () {
+    instances.scopes.global = this.server.create('scope', { id: 'global' });
+    urls.globalScope = `/scopes/global`;
+    urls.aliases = `${urls.globalScope}/aliases`;
+    urls.newAlias = `${urls.aliases}/new`;
+    getAliasCount = () => this.server.schema.aliases.all().models.length;
+    features = this.owner.lookup('service:features');
+    features.enable('ssh-session-recording');
+    authenticateSession({});
+  });
+
+  test('users can create a new alias with host and target info', async function (assert) {
+    const aliasCount = getAliasCount();
+    await visit(urls.newAlias);
+
+    await fillIn(NAME_FIELD_SELECTOR, NAME_FIELD_TEXT);
+    await fillIn(DESTINATION_ID_SELECTOR, 'tcp_123');
+    await fillIn(HOST_ID_SELECTOR, 'h_123');
+    await click(SAVE_BTN_SELECTOR);
+    const alias = this.server.schema.aliases.findBy({
+      name: NAME_FIELD_TEXT,
+    });
+
+    assert.strictEqual(alias.name, NAME_FIELD_TEXT);
+    assert.strictEqual(getAliasCount(), aliasCount + 1);
+  });
+
+  test('users can create a new alias without host or target info', async function (assert) {
+    const aliasCount = getAliasCount();
+    await visit(urls.newAlias);
+    await fillIn(NAME_FIELD_SELECTOR, NAME_FIELD_TEXT);
+
+    await click(SAVE_BTN_SELECTOR);
+    const alias = this.server.schema.aliases.findBy({
+      name: NAME_FIELD_TEXT,
+    });
+
+    assert.strictEqual(alias.name, NAME_FIELD_TEXT);
+    assert.strictEqual(getAliasCount(), aliasCount + 1);
+  });
+
+  test('user can cancel new alias creation', async function (assert) {
+    const aliasCount = getAliasCount();
+    await visit(urls.newAlias);
+    await fillIn(NAME_FIELD_SELECTOR, NAME_FIELD_TEXT);
+    await click(CANCEL_BTN_SELECTOR);
+
+    assert.strictEqual(currentURL(), urls.aliases);
+    assert.strictEqual(getAliasCount(), aliasCount);
+  });
+
+  test('saving a new alias with invalid fields displays error messages', async function (assert) {
+    this.server.post('/aliases', () => {
+      return new Response(
+        400,
+        {},
+        {
+          status: 400,
+          code: 'invalid_argument',
+          message: 'The request was invalid.',
+          details: {
+            request_fields: [
+              {
+                name: 'name',
+                description: 'Name is required.',
+              },
+            ],
+          },
+        },
+      );
+    });
+    await visit(urls.newAlias);
+    await click(SAVE_BTN_SELECTOR);
+    await a11yAudit();
+
+    assert.dom(ALERT_TEXT_SELECTOR).hasText('The request was invalid.');
+    assert.dom(FIELD_ERROR_TEXT_SELECTOR).hasText('Name is required.');
+  });
+
+  test('can navigate to new aliases route with proper authorization', async function (assert) {
+    await visit(urls.aliases);
+
+    assert.ok(
+      instances.scopes.global.authorized_collection_actions.aliases.includes(
+        'create',
+      ),
+    );
+
+    assert.dom(`[href="${urls.newAlias}"]`).isVisible();
+  });
+
+  test('users cannot directly navigate to new alias route without proper authorization', async function (assert) {
+    instances.scopes.global.authorized_collection_actions['aliases'] =
+      instances.scopes.global.authorized_collection_actions['aliases'].filter(
+        (item) => item !== 'create',
+      );
+
+    await visit(urls.newAlias);
+
+    assert.false(
+      instances.scopes.global.authorized_collection_actions['aliases'].includes(
+        'create',
+      ),
+    );
+    assert.strictEqual(currentURL(), urls.aliases);
+  });
+});