UI: Implement new policy SS + modal designs

changelog/17749.txt

@@ -0,0 +1,3 @@
+```release-note:feature
+ui: Add inline policy creation when creating an identity entity or group
+```

ui/app/components/identity/edit-form.js

@@ -85,5 +85,8 @@ export default Component.extend({
         return this.onSave({ saveType: 'delete', model });
       });
     },
+    handlePolicySelection(selection) {
+      this.model.set('policies', selection);
+    },
   },
 });

ui/app/components/policy-form.js

@@ -0,0 +1,135 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+import { tracked } from '@glimmer/tracking';
+import trimRight from 'vault/utils/trim-right';
+
+/**
+ * @module PolicyForm
+ * PolicyForm components are used to display the create and edit forms for all types of policies
+ *
+ * @example
+ *  <PolicyForm
+ *    @model={{this.model}}
+ *    @onSave={{transition-to "vault.cluster.policy.show" this.model.policyType this.model.name}}
+ *    @onCancel={{transition-to "vault.cluster.policies.index"}}
+ *  />
+ * ```
+ * @callback onCancel
+ * @callback onSave
+ * @param {object} model - The parent's model
+ * @param {object} modelData - If @model isn't passed in, @modelData is passed to create the record
+ * @param {string} onCancel - callback triggered when cancel button is clicked
+ * @param {string} onSave - callback triggered when save button is clicked
+ */
+
+export default class PolicyFormComponent extends Component {
+  @service store;
+  @service wizard;
+  @service version;
+  @service flashMessages;
+  @tracked errorBanner;
+  @tracked file = null;
+  @tracked showFileUpload = false;
+  @tracked showExamplePolicy = false;
+  @tracked createdModel = null; // set by createRecord() after policyType is selected
+  policyOptions = [
+    { label: 'ACL Policy', value: 'acl', isDisabled: false },
+    { label: 'Role Governing Policy', value: 'rgp', isDisabled: !this.version.hasSentinel },
+  ];
+  // formatting here is purposeful so that whitespace renders correctly in JsonEditor
+  policyTemplates = {
+    acl: `
+# Grant 'create', 'read' , 'update', and ‘list’ permission to paths prefixed by 'secret/*'
+path "secret/*" {
+  capabilities = [ "create", "read", "update", "list" ]
+}
+
+# Even though we allowed secret/*, this line explicitly denies
+# secret/super-secret. This takes precedence.
+path "secret/super-secret" {
+  capabilities = ["deny"]
+}
+`,
+    rgp: `
+# Import strings library that exposes common string operations
+import "strings"
+
+# Conditional rule (precond) checks the incoming request endpoint targeted to sys/policies/acl/admin
+precond = rule {
+    strings.has_prefix(request.path, "sys/policies/admin")
+}
+
+# Vault checks to see if the request was made be an entity named James Thomas 
+# or the 'Team Lead' role defined as its metadata
+main = rule when precond {
+    identity.entity.metadata.role is "Team Lead" or
+      identity.entity.name is "James Thomas"
+}
+`,
+  };
+
+  get model() {
+    // the SS + modal form receives @modelData instead of @model
+    return this.args.model ? this.args.model : this.createdModel;
+  }
+
+  @task
+  *save(event) {
+    event.preventDefault();
+    try {
+      const { isNew, name, policyType } = this.model;
+      yield this.model.save();
+      this.flashMessages.success(
+        `${policyType.toUpperCase()} policy "${name}" was successfully ${isNew ? 'created' : 'updated'}.`
+      );
+      if (this.wizard.featureState === 'create') {
+        this.wizard.transitionFeatureMachine('create', 'CONTINUE', policyType);
+      }
+
+      // this form is sometimes used in modal, passing the model notifies
+      // the parent if the save was successful
+      this.args.onSave(this.model);
+    } catch (error) {
+      const message = error.errors ? error.errors.join('. ') : error.message;
+      this.errorBanner = message;
+    }
+    this.cleanup();
+  }
+
+  @action
+  setModelName({ target }) {
+    this.model.name = target.value.toLowerCase();
+  }
+
+  @action
+  async setPolicyType(type) {
+    if (this.createdModel) this.cleanup();
+    this.createdModel = await this.store.createRecord(`policy/${type}`, {});
+    this.createdModel.name = this.args.modelData.name;
+  }
+
+  @action
+  setPolicyFromFile(index, fileInfo) {
+    const { value, fileName } = fileInfo;
+    this.model.policy = value;
+    if (!this.model.name) {
+      const trimmedFileName = trimRight(fileName, ['.json', '.txt', '.hcl', '.policy']);
+      this.model.name = trimmedFileName.toLowerCase();
+    }
+    this.showFileUpload = false;
+  }
+
+  @action
+  cancel() {
+    this.cleanup();
+    this.args.onCancel();
+  }
+
+  cleanup() {
+    const method = this.model.isNew ? 'unloadRecord' : 'rollbackAttributes';
+    this.model[method]();
+    if (this.createdModel) this.createdModel = null;
+  }
+}

ui/app/controllers/vault/cluster/policy/edit.js

@@ -1,4 +1,23 @@
 import Controller from '@ember/controller';
-import PolicyEditController from 'vault/mixins/policy-edit-controller';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 
-export default Controller.extend(PolicyEditController);
+export default class PolicyEditController extends Controller {
+  @service router;
+  @service flashMessages;
+
+  @action
+  async deletePolicy() {
+    const { policyType, name } = this.model;
+    try {
+      await this.model.destroyRecord();
+      this.flashMessages.success(`${policyType.toUpperCase()} policy "${name}" was successfully deleted.`);
+      this.router.transitionTo('vault.cluster.policies', policyType);
+    } catch (error) {
+      this.model.rollbackAttributes();
+      const errors = error.errors ? error.errors.join('. ') : error.message;
+      const message = `There was an error deleting the ${policyType.toUpperCase()} policy "${name}": ${errors}.`;
+      this.flashMessages.danger(message);
+    }
+  }
+}

ui/app/models/identity/entity.js

@@ -4,6 +4,7 @@ import { alias } from '@ember/object/computed';
 import IdentityModel from './_base';
 import apiPath from 'vault/utils/api-path';
 import attachCapabilities from 'vault/lib/attach-capabilities';
+import lazyCapabilities from 'vault/macros/lazy-capabilities';
 
 let Model = IdentityModel.extend({
   formFields: computed(function () {
@@ -20,11 +21,8 @@ let Model = IdentityModel.extend({
     editType: 'kv',
   }),
   policies: attr({
-    label: 'Policies',
-    editType: 'searchSelect',
+    editType: 'yield',
     isSectionHeader: true,
-    fallbackComponent: 'string-list',
-    models: ['policy/acl', 'policy/rgp'],
   }),
   creationTime: attr('string', {
     readOnly: true,
@@ -46,6 +44,8 @@ let Model = IdentityModel.extend({
   canEdit: alias('updatePath.canUpdate'),
   canRead: alias('updatePath.canRead'),
   canAddAlias: alias('aliasPath.canCreate'),
+  policyPath: lazyCapabilities(apiPath`sys/policies`),
+  canCreatePolicies: alias('policyPath.canCreate'),
 });
 
 export default attachCapabilities(Model, {

ui/app/models/identity/group.js

@@ -34,11 +34,8 @@ export default IdentityModel.extend({
     editType: 'kv',
   }),
   policies: attr({
-    label: 'Policies',
-    editType: 'searchSelect',
+    editType: 'yield',
     isSectionHeader: true,
-    fallbackComponent: 'string-list',
-    models: ['policy/acl', 'policy/rgp'],
   }),
   memberGroupIds: attr({
     label: 'Member Group IDs',
@@ -73,7 +70,8 @@ export default IdentityModel.extend({
       return numEntities + numGroups > 0;
     }
   ),
-
+  policyPath: lazyCapabilities(apiPath`sys/policies`),
+  canCreatePolicies: alias('policyPath.canCreate'),
   alias: belongsTo('identity/group-alias', { async: false, readOnly: true }),
   updatePath: identityCapabilities(),
   canDelete: alias('updatePath.canDelete'),

ui/app/styles/components/modal.scss

@@ -7,6 +7,9 @@
   border: 1px solid $grey-light;
   max-height: calc(100vh - 70px);
   margin-top: 60px;
+  min-width: calc(100vw * 0.3);
+  max-width: calc(100vw * 0.5);
+  width: fit-content;
 
   &-head {
     border-radius: 0;

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

@@ -24,7 +24,34 @@
       />
     {{/if}}
     {{#each this.model.fields as |attr|}}
-      <FormField data-test-field={{true}} @attr={{attr}} @model={{@model}} />
+      <FormField data-test-field={{true}} @attr={{attr}} @model={{@model}}>
+        <div class="form-section">
+          {{#if this.model.canCreatePolicies}}
+            <SearchSelectWithModal
+              @id="policies"
+              @label="Policies"
+              @labelClass="title is-4"
+              @models={{array "policy/acl" "policy/rgp"}}
+              @inputValue={{@model.policies}}
+              @onChange={{action "handlePolicySelection"}}
+              @fallbackComponent="string-list"
+              @modalFormComponent="policy-form"
+              @excludeOptions={{array "root"}}
+            />
+          {{else}}
+            <SearchSelect
+              @id="policies"
+              @label="Policies"
+              @labelClass="title is-4"
+              @models={{array "policy/acl" "policy/rgp"}}
+              @inputValue={{@model.policies}}
+              @onChange={{action "handlePolicySelection"}}
+              @fallbackComponent="string-list"
+              @disallowNewItems={{true}}
+            />
+          {{/if}}
+        </div>
+      </FormField>
     {{/each}}
   </div>
 

ui/app/templates/components/oidc/client-form.hbs

@@ -60,7 +60,7 @@
         @id="assignments"
         @label="Assignment name"
         @subText="Search for an existing assignment, or type a new name to create it."
-        @model="oidc/assignment"
+        @models={{array "oidc/assignment"}}
         @inputValue={{this.modelAssignments}}
         @onChange={{this.handleAssignmentSelection}}
         @excludeOptions={{array "allow_all"}}