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

@@ -7,10 +7,11 @@ import { waitFor } from '@ember/test-waiters';
 
 export default Component.extend({
   flashMessages: service(),
+  store: service(),
   'data-test-component': 'identity-edit-form',
   attributeBindings: ['data-test-component'],
   model: null,
-
+  policyModel: null,
   // 'create', 'edit', 'merge'
   mode: 'create',
   /*
@@ -77,6 +78,12 @@ export default Component.extend({
   },
 
   actions: {
+    createSearchSelectModel({ type, name }) {
+      if (type && name) {
+        const model = this.store.createRecord(`policy/${type}`, { name });
+        this.set('policyModel', model);
+      }
+    },
     deleteItem(model) {
       const message = this.getMessage(model, true);
       const flash = this.flashMessages;

ui/app/components/oidc/assignment-form.js

@@ -15,11 +15,13 @@ import { tracked } from '@glimmer/tracking';
  * @onSave={transition-to "vault.cluster.access.oidc.assignments.assignment.details" this.model.name}
  * />
  * ```
- * @callback onCancel
- * @callback onSave
+
  * @param {object} model - The parent's model
- * @param {string} onCancel - callback triggered when cancel button is clicked
- * @param {string} onSave - callback triggered when save button is clicked
+ * @callback {string} onCancel - callback triggered when cancel button is clicked
+ * @callback {string} onSave - callback triggered when save button is clicked
+ * * params when form renders within search-select-with-modal.hbs:
+ * @callback createSearchSelectModel - callback to fire when new item is selected to create in SS+Modal
+ *
  */
 
 export default class OidcAssignmentFormComponent extends Component {

ui/app/components/oidc/client-form.js

@@ -11,11 +11,10 @@ import { task } from 'ember-concurrency';
  * ```js
  * <OidcClientForm @model={{this.model}} />
  * ```
- * @callback onCancel
- * @callback onSave
  * @param {Object} model - oidc client model
- * @param {onCancel} onCancel - callback triggered when cancel button is clicked
- * @param {onSave} onSave - callback triggered on save success
+ * @callback onCancel - callback triggered when cancel button is clicked
+ * @callback onSave - callback triggered on save success
+ * @param {boolean} [isInline=false] - true when form is rendered within a modal
  */
 
 export default class OidcClientForm extends Component {
@@ -24,6 +23,7 @@ export default class OidcClientForm extends Component {
   @tracked modelValidations;
   @tracked errorBanner;
   @tracked invalidFormAlert;
+  @tracked assignmentModel; // model for form rendered by ss+modal
   @tracked radioCardGroupValue =
     !this.args.model.assignments || this.args.model.assignments.includes('allow_all')
       ? 'allow_all'
@@ -38,6 +38,14 @@ export default class OidcClientForm extends Component {
     }
   }
 
+  // callback fired by SS+Modal when new item is selected to create
+  @action
+  createSearchSelectModel({ name }) {
+    if (name) {
+      this.assignmentModel = this.store.createRecord('oidc/assignment', { name });
+    }
+  }
+
   @action
   handleAssignmentSelection(selection) {
     // if array then coming from search-select component, set selection as model assignments

ui/app/components/policy-form.js

@@ -0,0 +1,132 @@
+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 triggered when cancel button is clicked
+ * @callback onSave - callback triggered when save button is clicked
+ * @param {object} model - ember data model from createRecord
+ * @param {boolean} [isInline=false] - true when form is rendered within a modal
+ * * params when form renders within search-select-with-modal.hbs:
+ * @param {object} [nameInput] - search input from SS passed as name attr when firing createSearchSelectModel callback
+ * @callback createSearchSelectModel - callback to fire when new item is selected to create in SS+Modal
+ */
+
+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;
+  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 by an entity
+# named James Thomas or 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"
+}
+`,
+  };
+
+  @task
+  *save(event) {
+    event.preventDefault();
+    try {
+      const { isNew, name, policyType } = this.args.model;
+      yield this.args.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.args.model);
+    } catch (error) {
+      const message = error.errors ? error.errors.join('. ') : error.message;
+      this.errorBanner = message;
+    }
+    this.cleanup();
+  }
+
+  @action
+  setModelName({ target }) {
+    this.args.model.name = target.value.toLowerCase();
+  }
+
+  @action
+  setPolicyType(type) {
+    // selecting a type only happens in the modal form
+    // cleanup any model argument before firing parent action to create a new record in identity/edit-form.js
+    if (this.args.model) this.cleanup();
+    this.args.createSearchSelectModel({ type, name: this.args.nameInput });
+  }
+
+  @action
+  setPolicyFromFile(index, fileInfo) {
+    const { value, fileName } = fileInfo;
+    this.args.model.policy = value;
+    if (!this.args.model.name) {
+      const trimmedFileName = trimRight(fileName, ['.json', '.txt', '.hcl', '.policy']);
+      this.args.model.name = trimmedFileName.toLowerCase();
+    }
+    this.showFileUpload = false;
+  }
+
+  @action
+  cancel() {
+    this.cleanup();
+    this.args.onCancel();
+  }
+
+  cleanup() {
+    const method = this.args.model.isNew ? 'unloadRecord' : 'rollbackAttributes';
+    this.args.model[method]();
+  }
+}

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';
 
 const Model = IdentityModel.extend({
   formFields: computed(function () {
@@ -20,11 +21,8 @@ const 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 @@ const 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,7 @@
   border: 1px solid $grey-light;
   max-height: calc(100vh - 70px);
   margin-top: 60px;
+  min-width: calc(100vw * 0.3);
 
   &-head {
     border-radius: 0;