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/modal-form/FYI.md

@@ -0,0 +1,3 @@
+These templates parent form components that render within a modal to create inline items via SearchSelectWithModal.
+The modal opens when a user searches for an item that doesn't exist and clicks 'No results found for "${term}". Click here to create it.'
+The templates are rendered using the {{component}} helper in 'search-select-with-modal.hbs' and are responsible for creating the model passed to the form.

ui/app/components/modal-form/oidc-assignment-template.hbs

@@ -0,0 +1 @@
+<Oidc::AssignmentForm @onSave={{this.onSave}} @model={{this.assignment}} @onCancel={{@onCancel}} />

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

@@ -0,0 +1,36 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+/**
+ * @module ModalForm::OidcAssignmentTemplate
+ * ModalForm::OidcAssignmentTemplate components render within a modal and create a model using the input from the search select. The model is passed to the oidc/assignment-form.
+ *
+ * @example
+ *  <ModalForm::OidcAssignmentTemplate
+ *    @nameInput="new-item-name"
+ *    @onSave={{this.closeModal}}
+ *    @onCancel={{@onCancel}}
+ *  />
+ * ```
+ * @callback onCancel - callback triggered when cancel button is clicked
+ * @callback onSave - callback triggered when save button is clicked
+ * @param {string} nameInput - the name of the newly created assignment
+ */
+
+export default class OidcAssignmentTemplate extends Component {
+  @service store;
+  @tracked assignment = null; // model record passed to oidc/assignment-form
+
+  constructor() {
+    super(...arguments);
+    this.assignment = this.store.createRecord('oidc/assignment', { name: this.args.nameInput });
+  }
+
+  @action onSave(assignmentModel) {
+    this.args.onSave(assignmentModel);
+    // Reset component assignment for next use
+    this.assignment = null;
+  }
+}

ui/app/components/modal-form/policy-template.hbs

@@ -0,0 +1,77 @@
+{{#if this.policy.policyType}}
+  <nav class="tabs">
+    <ul>
+      <li class={{unless this.showExamplePolicy "active"}}>
+        <button
+          data-test-tab-your-policy
+          type="button"
+          name="form"
+          class="link link-plain tab has-text-weight-semibold {{unless this.showExamplePolicy ' is-active'}}"
+          {{on "click" (fn (mut this.showExamplePolicy) false)}}
+        >
+          Your Policy
+        </button>
+      </li>
+      <li class={{if this.showExamplePolicy "active"}}>
+        <button
+          data-test-tab-example-policy
+          type="button"
+          name="form"
+          class="link link-plain tab has-text-weight-semibold {{if this.showExamplePolicy ' is-active'}}"
+          {{on "click" (fn (mut this.showExamplePolicy) true)}}
+        >
+          Example Policy
+        </button>
+      </li>
+    </ul>
+  </nav>
+{{/if}}
+{{#if this.showExamplePolicy}}
+  <div class="has-bottom-margin-s">
+    {{#if (eq this.policy.policyType "acl")}}
+      <p>
+        ACL Policies are written in Hashicorp Configuration Language (
+        <DocLink @host="https://github.com/hashicorp/hcl">HCL</DocLink>
+        ) or JSON and describe which paths in Vault a user or machine is allowed to access. Here is an example policy:
+      </p>
+    {{else}}
+      <p class="has-bottom-margin-s">
+        Role Governing Policies (RGPs) are tied to client tokens or identities which is similar to
+        <DocLink @host="https://developer.hashicorp.com" @path="/vault/tutorials/policies/policies">ACL policies</DocLink>.
+        They use
+        <DocLink @host="https://developer.hashicorp.com" @path="/vault/docs/enterprise/sentinel">Sentinel</DocLink>
+        as a language framework to enable fine-grained policy decisions.
+      </p>
+      <p>
+        Here is an example policy that uses RGP to restrict access to the
+        <code class="tag is-marginless is-paddingless">admin</code>
+        policy such that a user named James or has the
+        <code class="tag is-marginless is-paddingless">Team Lead</code>
+        role can manage the
+        <code class="tag is-marginless is-paddingless">admin</code>
+        policy:
+      </p>
+    {{/if}}
+  </div>
+  <JsonEditor
+    @value={{get this.policyTemplates this.policy.policyType}}
+    @mode="ruby"
+    @readOnly={{true}}
+    @showToolbar={{true}}
+  />
+{{else}}
+  <Select
+    @name="policyType"
+    @label="Type"
+    @options={{this.policyOptions}}
+    @isFullwidth={{true}}
+    @selectedValue={{this.policy.policyType}}
+    @onChange={{this.setPolicyType}}
+    @noDefault={{true}}
+  />
+  {{#if this.policy.policyType}}
+    <PolicyForm @onSave={{this.onSave}} @model={{this.policy}} @onCancel={{@onCancel}} />
+  {{else}}
+    <EmptyState @title="No policy type selected" @message="Select a policy type to continue creating." />
+  {{/if}}
+{{/if}}

ui/app/components/modal-form/policy-template.js

@@ -0,0 +1,82 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+/**
+ * @module ModalForm::PolicyTemplate
+ * ModalForm::PolicyTemplate components are meant to render within a modal for creating a new policy of unknown type.
+ *
+ * @example
+ *  <ModalForm::PolicyTemplate
+ *    @nameInput="new-item-name"
+ *    @onSave={{this.closeModal}}
+ *    @onCancel={{this.closeModal}}
+ *  />
+ * ```
+ * @callback onCancel - callback triggered when cancel button is clicked
+ * @callback onSave - callback triggered when save button is clicked
+ * @param {string} nameInput - the name of the newly created policy
+ */
+
+export default class PolicyTemplate extends Component {
+  @service store;
+  @service version;
+
+  @tracked policy = null; // model record passed to policy-form
+  @tracked showExamplePolicy = false;
+
+  get policyOptions() {
+    return [
+      { 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"
+}
+`,
+  };
+
+  @action
+  setPolicyType(type) {
+    if (this.policy) this.policy.unloadRecord(); // if user selects a different type, clear from store before creating a new record
+    // Create form model once type is chosen
+    this.policy = this.store.createRecord(`policy/${type}`, { name: this.args.nameInput });
+  }
+
+  @action
+  onSave(policyModel) {
+    this.args.onSave(policyModel);
+    // Reset component policy for next use
+    this.policy = null;
+  }
+}

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

@@ -15,11 +15,10 @@ 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 onCancel - callback triggered when cancel button is clicked
+ * @callback onSave - callback triggered when save button is clicked*
  */
 
 export default class OidcAssignmentFormComponent extends Component {

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

@@ -11,15 +11,13 @@ 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 {
-  @service store;
   @service flashMessages;
   @tracked modelValidations;
   @tracked errorBanner;

ui/app/components/policy-form.hbs

@@ -0,0 +1,109 @@
+<form {{on "submit" (perform this.save)}} data-test-policy-form>
+  <div class="box is-bottomless is-fullwidth is-marginless">
+    <MessageError @errorMessage={{this.errorBanner}} />
+    <NamespaceReminder @mode={{if @model.isNew "create" "edit"}} @noun="policy" />
+    {{#if @model.isNew}}
+      <div class="field">
+        <label for="policy-name" class="is-label">Name</label>
+        <div class="control">
+          <Input
+            @type="text"
+            @value={{lowercase @model.name}}
+            id="policy-name"
+            class="input"
+            {{on "input" this.setModelName}}
+            data-test-policy-input="name"
+          />
+        </div>
+      </div>
+    {{/if}}
+    <div class="field">
+      {{#if @model.isNew}}
+        <Toolbar>
+          <label class="is-label">Policy</label>
+          <ToolbarActions>
+            <div class="toolbar-separator"></div>
+            <div class="control is-flex">
+              <Input
+                id="fileUploadToggle"
+                @type="checkbox"
+                name="fileUploadToggle"
+                class="switch is-rounded is-success is-small"
+                @checked={{this.showFileUpload}}
+                {{on "change" (fn (mut this.showFileUpload) (not this.showFileUpload))}}
+                data-test-policy-edit-toggle
+              />
+              <label for="fileUploadToggle">Upload file</label>
+            </div>
+          </ToolbarActions>
+        </Toolbar>
+        {{#if this.showFileUpload}}
+          <TextFile @inputOnly={{true}} @file={{this.file}} @onChange={{this.setPolicyFromFile}} />
+        {{else}}
+          <JsonEditor
+            @title="Policy"
+            @helpText="You can use Alt+Tab (Option+Tab on MacOS) in the code editor to skip to the next field"
+            @showToolbar={{false}}
+            @value={{@model.policy}}
+            @valueUpdated={{action (mut @model.policy)}}
+            @mode="ruby"
+            @extraKeys={{hash Shift-Enter=(perform this.save)}}
+            data-test-policy-editor
+          />
+        {{/if}}
+      {{else}}
+        {{! EDITING - no file upload toggle}}
+        <JsonEditor
+          @title="Policy"
+          @helpText="You can use Alt+Tab (Option+Tab on MacOS) in the code editor to skip to the next field"
+          @value={{@model.policy}}
+          @valueUpdated={{action (mut @model.policy)}}
+          @mode="ruby"
+          @extraKeys={{hash Shift-Enter=(perform this.save)}}
+          data-test-policy-editor
+        />
+      {{/if}}
+    </div>
+    {{#each @model.additionalAttrs as |attr|}}
+      <FormField data-test-field={{true}} @attr={{attr}} @model={{@model}} />
+    {{/each}}
+  </div>
+  <div class="has-bottom-margin-m">
+    <p>
+      More information about
+      {{uppercase @model.policyType}}
+      policies can be found
+      <DocLink
+        @host="https://developer.hashicorp.com"
+        @path={{if
+          (eq @model.policyType "acl")
+          "/vault/docs/concepts/policies#capabilities"
+          "/vault/tutorials/policies/sentinel#role-governing-policies-rgps"
+        }}
+      >
+        here.
+      </DocLink>
+    </p>
+  </div>
+  <div class="field is-grouped box is-fullwidth is-bottomless">
+    <div class="control">
+      <button
+        type="submit"
+        class="button is-primary {{if this.save.isRunning 'is-loading'}}"
+        disabled={{this.save.isRunning}}
+        data-test-policy-save
+      >
+        {{if @model.isNew "Create policy" "Save"}}
+      </button>
+      <button
+        type="button"
+        class="button has-left-margin-s"
+        disabled={{this.save.isRunning}}
+        {{on "click" this.cancel}}
+        data-test-policy-cancel
+      >
+        Cancel
+      </button>
+    </div>
+  </div>
+</form>