Sidebranch: UI transform create and edit clean up

ui/app/adapters/transform.js

@@ -1,16 +1,13 @@
 import { assign } from '@ember/polyfills';
-import { resolve, allSettled } from 'rsvp';
+import { allSettled } from 'rsvp';
 import ApplicationAdapter from './application';
 import { encodePath } from 'vault/utils/path-encoding-helpers';
 
 export default ApplicationAdapter.extend({
-  // TODO this adapter was copied over, much of this stuff may or may not need to be here.
   namespace: 'v1',
 
-  // defaultSerializer: 'role',
-
   createOrUpdate(store, type, snapshot) {
-    const serializer = store.serializerFor('transform'); // TODO replace transform with type.modelName
+    const serializer = store.serializerFor(type.modelName);
     const data = serializer.serialize(snapshot);
     const { id } = snapshot;
     let url = this.urlForTransformations(snapshot.record.get('backend'), id);
@@ -35,14 +32,6 @@ export default ApplicationAdapter.extend({
     return 'transform';
   },
 
-  urlForAlphabet(backend, id) {
-    let url = `${this.buildURL()}/${encodePath(backend)}/alphabet`;
-    if (id) {
-      url = url + '/' + encodePath(id);
-    }
-    return url;
-  },
-
   urlForTransformations(backend, id) {
     let url = `${this.buildURL()}/${encodePath(backend)}/transformation`;
     if (id) {
@@ -61,14 +50,9 @@ export default ApplicationAdapter.extend({
 
   fetchByQuery(store, query) {
     const { id, backend } = query;
-    let zeroAddressAjax = resolve();
     const queryAjax = this.ajax(this.urlForTransformations(backend, id), 'GET', this.optionsForQuery(id));
-    // TODO: come back to why you need this, carry over.
-    // if (!id) {
-    //   zeroAddressAjax = this.findAllZeroAddress(store, query);
-    // }
 
-    return allSettled([queryAjax, zeroAddressAjax]).then(results => {
+    return allSettled([queryAjax]).then(results => {
       // query result 404d, so throw the adapterError
       if (!results[0].value) {
         throw results[0].reason;
@@ -93,12 +77,6 @@ export default ApplicationAdapter.extend({
     });
   },
 
-  findAllZeroAddress(store, query) {
-    const { backend } = query;
-    const url = `/v1/${encodePath(backend)}/config/zeroaddress`;
-    return this.ajax(url, 'GET');
-  },
-
   query(store, type, query) {
     return this.fetchByQuery(store, query);
   },

ui/app/components/role-edit.js

@@ -88,8 +88,7 @@ export default Component.extend(FocusOnInsertMixin, {
   actions: {
     createOrUpdate(type, event) {
       event.preventDefault();
-
-      const modelId = this.get('model.id') || this.get('model.name'); // ARG TODO this is not okay
+      const modelId = this.get('model.id') || this.get('model.name'); // transform comes in as model.name
       // prevent from submitting if there's no key
       // maybe do something fancier later
       if (type === 'create' && isBlank(modelId)) {

ui/app/components/transform-create-form.js

@@ -0,0 +1,8 @@
+import RoleEdit from './role-edit';
+
+export default RoleEdit.extend({
+  init() {
+    this._super(...arguments);
+    this.set('backendType', 'transform');
+  },
+});

ui/app/helpers/options-for-backend.js

@@ -55,7 +55,6 @@ const SECRET_BACKENDS = {
     editComponent: 'role-ssh-edit',
     listItemPartial: 'partials/secret-list/ssh-role-item',
   },
-  // TODO: edit or remove listItemPartial and better understand what's happening here
   transform: {
     displayName: 'Transformation',
     navigateTree: false,

ui/app/models/transform.js

@@ -36,23 +36,20 @@ const TWEAK_SOURCE = [
 ];
 
 const Model = DS.Model.extend({
-  // TODO: for now, commenting out openApi info, but keeping here just in case we end up using it.
-  // useOpenAPI: true,
-  // getHelpUrl: function(backend) {
-  //   return `/v1/${backend}?help=1`;
-  // },
+  useOpenAPI: false,
   name: attr('string', {
     // TODO: make this required for making a transformation
     label: 'Name',
     fieldValue: 'id',
     readOnly: true,
+    subText: 'The name for your transformation. This cannot be edited later.',
   }),
   type: attr('string', {
     defaultValue: 'fpe',
     label: 'Type',
     possibleValues: TYPES,
     subText:
-      'Vault provides two types of transformations: Format Preserving Encryption (FPE) is reversible, while Masking is not.',
+      'Vault provides two types of transformations: Format Preserving Encryption (FPE) is reversible, while Masking is not. This cannot be edited later.',
   }),
   tweak_source: attr('string', {
     defaultValue: 'supplied',
@@ -70,21 +67,20 @@ const Model = DS.Model.extend({
     fallbackComponent: 'string-list',
     label: 'Template', // TODO: make this required for making a transformation
     models: ['transform/template'],
+    selectLimit: 1,
     subLabel: 'Template Name',
     subText:
       'Templates allow Vault to determine what and how to capture the value to be transformed. Type to use an existing template or create a new one.',
   }),
   templates: attr('array'), // TODO: remove once BE changes the returned property to a singular template on the GET request.
-  allowed_roles: attr('string', {
-    label: 'Allowed roles',
+  allowed_roles: attr('array', {
     editType: 'searchSelect',
+    label: 'Allowed roles',
     fallbackComponent: 'string-list',
     models: ['transform/role'],
     subText: 'Search for an existing role, type a new role to create it, or use a wildcard (*).',
   }),
   transformAttrs: computed('type', function() {
-    // TODO: group them into sections/groups.  Right now, we don't different between required and not required as we do by hiding options.
-    // will default to design mocks on how to handle as it will likely be a different pattern using client-side validation, which we have not done before
     if (this.type === 'masking') {
       return ['name', 'type', 'masking_character', 'template', 'templates', 'allowed_roles'];
     }
@@ -93,8 +89,6 @@ const Model = DS.Model.extend({
   transformFieldAttrs: computed('transformAttrs', function() {
     return expandAttributeMeta(this, this.get('transformAttrs'));
   }),
-  // zeroAddressPath: lazyCapabilities(apiPath`${'backend'}/config/zeroaddress`, 'backend'),
-  // canEditZeroAddress: alias('zeroAddressPath.canUpdate'),
 });
 
 export default attachCapabilities(Model, {

ui/app/styles/core/forms.scss

@@ -214,6 +214,12 @@ label {
 .field-body .field {
   margin-bottom: 0;
 }
+.field {
+  // cannot use :read-only selector because tag used for other purposes
+  &.is-readOnly {
+    background-color: $ui-gray-100;
+  }
+}
 .field.has-addons {
   flex-wrap: wrap;
   .control {

ui/app/templates/components/transform-create-form.hbs

@@ -0,0 +1,48 @@
+<form onsubmit={{action "createOrUpdate" "create"}}>
+  <div class="box is-sideless is-fullwidth is-marginless">
+    {{message-error model=model}}
+    {{!-- TODO: figure out what this ?? --}}
+    {{!-- <NamespaceReminder @mode={{mode}} @noun="SSH role" /> --}}
+    {{#each model.transformFieldAttrs as |attr|}}
+      {{#if (eq attr.name 'templates')}}
+        {{!-- TODO: for now don't show until backend makes api changes. --}}
+      {{else if (eq attr.name 'template')}}
+        <FormField
+          data-test-field
+          @attr={{attr}}
+          @model={{model}}
+          @selectLimit={{selectLimit}}
+        />
+       {{else}}
+        <FormField
+          data-test-field
+          @attr={{attr}}
+          @model={{model}}
+        />
+      {{/if}}
+    {{/each}}
+  </div>
+  <div class="field is-grouped-split box is-fullwidth is-bottomless">
+    <div class="control">
+      <button
+        type="submit"
+        disabled={{buttonDisabled}}
+        class="button is-primary"
+        data-test-role-ssh-create=true
+      >
+        {{#if (eq mode 'create')}}
+          Create transformation
+        {{else if (eq mode 'edit')}}
+          Save
+        {{/if}}
+      </button>
+      {{#secret-link
+        mode=(if (eq mode "create") "list" "show")
+        class="button"
+        secret=model.id
+      }}
+        Cancel
+      {{/secret-link}}
+    </div>
+  </div>
+</form>

ui/app/templates/components/transform-edit-form.hbs

@@ -4,11 +4,51 @@
     {{!-- TODO: figure out what this ?? --}}
     {{!-- <NamespaceReminder @mode={{mode}} @noun="SSH role" /> --}}
     {{#each model.transformFieldAttrs as |attr|}}
+      {{#if (or (eq attr.name 'name') (eq attr.name 'type')) }}
+        <label for="{{attr.name}}" class="is-label">
+          {{attr.options.label}}
+        </label>
+        {{#if attr.options.subText}}
+          <p class="sub-text">{{attr.options.subText}}</p>
+        {{/if}}
+        {{#if attr.options.possibleValues}}
+          <div class="control is-expanded field is-readOnly">
+            <div class="select is-fullwidth">
+              <select name="{{attr.name}}" id="{{attr.name}}" disabled data-test-input={{attr.name}}>
+                <option selected={{get model attr.name}} value={{get model attr.name}}>
+                  {{get model attr.name}}
+                </option>
+              </select>
+            </div>
+          </div>
+        {{else}}
+          <input data-test-input={{attr.name}} id={{attr.name}} autocomplete="off" spellcheck="false"
+            value={{or (get model attr.name) attr.options.defaultValue}} readonly class="field input is-readOnly" type={{attr.type}} />
+        {{/if}}
+      {{else if (eq attr.name 'template')}}
+        <FormField
+          data-test-field
+          @attr={{attr}}
+          @model={{model}}
+          @initialSelected={{model.templates}}
+          @selectLimit={{selectLimit}}
+        />
+      {{else if (eq attr.name 'templates')}}
+        {{!-- TODO: for now don't show until backend makes api changes. --}}
+      {{else if (eq attr.name 'allowed_roles')}}
+        <FormField
+          data-test-field
+          @attr={{attr}}
+          @model={{model}}
+          @initialSelected={{model.allowed_roles}}
+        />
+      {{else}}
       <FormField
         data-test-field
         @attr={{attr}}
         @model={{model}}
       />
+      {{/if}}
     {{/each}}
   </div>
   <div class="field is-grouped-split box is-fullwidth is-bottomless">

ui/app/templates/components/transform-show-transformation.hbs

@@ -10,7 +10,6 @@
 
 <div class="has-top-margin-xl has-bottom-margin-s">
   <label class="title has-border-bottom-light page-header">CLI Commands</label>
-  {{!-- ARG TODO make these components? --}}
   <div class="has-bottom-margin-s">
     <h2 class="title is-6">Encode</h2>
     <div class="has-bottom-margin-s">

ui/app/templates/components/transformation-edit.hbs

@@ -53,8 +53,10 @@
   </Toolbar>
 {{/if}}
 
-{{#if (or (eq mode 'edit') (eq mode 'create'))}}
+{{#if (eq mode 'edit')}}
   <TransformEditForm @mode={{mode}} @model={{model}} />
+{{else if (eq mode 'create')}}
+  <TransformCreateForm @mode={{mode}} @model={{model}} />
 {{else}}
   <TransformShowTransformation
     @model={{model}}

ui/lib/core/addon/components/search-select.js

@@ -9,14 +9,16 @@ import layout from '../templates/components/search-select';
  * @module SearchSelect
  * The `SearchSelect` is an implementation of the [ember-power-select-with-create](https://github.com/poteto/ember-cli-flash) used for form elements where options come dynamically from the API.
  * @example
- * <SearchSelect @id="group-policies" @models={{["policies/acl"]}} @onChange={{onChange}} @inputValue={{get model valuePath}} @helpText="Policies associated with this group" @label="Policies" @fallbackComponent="string-list" />
+ * <SearchSelect @id="group-policies" @models={{["policies/acl"]}} @onChange={{onChange}} @initialSelected={{array 'selectedValue'}} @selectLimit={{2}} @inputValue={{get model valuePath}} @helpText="Policies associated with this group" @label="Policies" @fallbackComponent="string-list" />
  *
  * @param id {String} - The name of the form field
  * @param models {String} - An array of model types to fetch from the API.
  * @param onChange {Func} - The onchange action for this form field.
  * @param inputValue {String | Array} -  A comma-separated string or an array of strings.
+ * @param [initialSelected] {Array} -  An array of initially selected options to display.
  * @param [helpText] {String} - Text to be displayed in the info tooltip for this form field
  * @param [subText] {String} - Text to be displayed below the label
+ * @param [selectLimit] {Number} - A number that sets the limit to how many select options they can choose
  * @param label {String} - Label for this form field
  * @param [subLabel] {String} - a smaller label below the main Label
  * @param fallbackComponent {String} - name of component to be rendered if the API call 403s
@@ -44,6 +46,9 @@ export default Component.extend({
   shouldRenderName: false,
   init() {
     this._super(...arguments);
+    if (this.initialSelected) {
+      return this.set('selectedOptions', this.initialSelected); // need array helper to pass in.
+    }
     this.set('selectedOptions', this.inputValue || []);
   },
   didRender() {
@@ -126,6 +131,11 @@ export default Component.extend({
       this.handleChange();
     },
     selectOption(option) {
+      if (this.selectLimit) {
+        if (this.selectLimit <= this.selectedOptions.length) {
+          return;
+        }
+      }
       this.selectedOptions.pushObject(option);
       this.options.removeObject(option);
       this.handleChange();

ui/lib/core/addon/templates/components/form-field.hbs

@@ -71,7 +71,10 @@
       @onChange={{action (action "setAndBroadcast" valuePath)}} @inputValue={{get model valuePath}}
       @helpText={{attr.options.helpText}} @subText={{attr.options.subText}} @label={{labelString}}
       @subLabel={{attr.options.subLabel}}
-      @fallbackComponent={{attr.options.fallbackComponent}} />
+      @fallbackComponent={{attr.options.fallbackComponent}}
+      @initialSelected={{initialSelected}}
+      @selectLimit={{attr.options.selectLimit}}
+    />
   </div>
 {{else if (eq attr.options.editType "mountAccessor")}}
   {{mount-accessor-select

ui/lib/core/addon/templates/components/search-select.hbs

@@ -19,27 +19,29 @@
   {{#if subText}}
     <p class="sub-text">{{subText}}</p>
   {{/if}}
-  {{#power-select-with-create
-    options=options
-    search=search
-    onchange=(action "selectOption")
-    oncreate=(action "createOption")
-    placeholderComponent=(component "search-select-placeholder")
-    renderInPlace=true
-    searchField="searchText"
-    verticalPosition="below"
-    showCreateWhen=(action "hideCreateOptionOnSameID")
-    buildSuggestion=(action "constructSuggestion") as |option|
-  }}
-    {{#if shouldRenderName}}
-      {{option.name}}
-      <small class="search-select-list-key" data-test-smaller-id="true">
+  {{#unless (gte selectedOptions.length selectLimit)}}
+    {{#power-select-with-create
+      options=options
+      search=search
+      onchange=(action "selectOption")
+      oncreate=(action "createOption")
+      placeholderComponent=(component "search-select-placeholder")
+      renderInPlace=true
+      searchField="searchText"
+      verticalPosition="below"
+      showCreateWhen=(action "hideCreateOptionOnSameID")
+      buildSuggestion=(action "constructSuggestion") as |option|
+    }}
+      {{#if shouldRenderName}}
+        {{option.name}}
+        <small class="search-select-list-key" data-test-smaller-id="true">
+          {{option.id}}
+        </small>
+      {{else}}
         {{option.id}}
-      </small>
-    {{else}}
-      {{option.id}}
-    {{/if}}
-  {{/power-select-with-create}}
+      {{/if}}
+    {{/power-select-with-create}}
+  {{/unless}}
   <ul class="search-select-list">
     {{#each selectedOptions as |selected|}}
       <li class="search-select-list-item" data-test-selected-option="true">