[ui] Policies UI

.changelog/13976.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Added a Policy Editor interface for management tokens
+```

ui/app/abilities/policy.js

@@ -0,0 +1,12 @@
+import AbstractAbility from './abstract';
+import { alias } from '@ember/object/computed';
+import classic from 'ember-classic-decorator';
+
+@classic
+export default class Policy extends AbstractAbility {
+  @alias('selfTokenIsManagement') canRead;
+  @alias('selfTokenIsManagement') canList;
+  @alias('selfTokenIsManagement') canWrite;
+  @alias('selfTokenIsManagement') canUpdate;
+  @alias('selfTokenIsManagement') canDestroy;
+}

ui/app/adapters/policy.js

@@ -4,4 +4,12 @@ import classic from 'ember-classic-decorator';
 @classic
 export default class PolicyAdapter extends ApplicationAdapter {
   namespace = namespace + '/acl';
+
+  urlForCreateRecord(_modelName, model) {
+    return this.urlForUpdateRecord(model.attr('name'), 'policy');
+  }
+
+  urlForDeleteRecord(id) {
+    return this.urlForUpdateRecord(id, 'policy');
+  }
 }

ui/app/components/policy-editor.hbs

@@ -0,0 +1,61 @@
+<form class="edit-policy" autocomplete="off" {{on "submit" this.save}}>
+	{{#if @policy.isNew }}
+		<label>
+			<span>
+				Policy Name
+			</span>
+			<Input
+				data-test-policy-name-input
+				@type="text"
+				@value={{@policy.name}}
+				class="input"
+        {{autofocus}}
+			/>
+		</label>
+	{{/if}}
+
+	<div class="boxed-section">
+		<div class="boxed-section-head">
+			Policy Definition
+		</div>
+		<div class="boxed-section-body is-full-bleed">
+
+			<div
+				class="policy-editor"
+				data-test-policy-editor
+				{{code-mirror
+          screenReaderLabel="Policy definition"
+          theme="hashi"
+          mode="ruby"
+          [email protected]
+          onUpdate=this.updatePolicyRules
+          autofocus=(not @policy.isNew)
+					extraKeys=(hash Cmd-Enter=this.save)
+				}} />
+		</div>
+	</div>
+
+	<div>
+		<label>
+			<span>
+				Description (optional)
+			</span>
+			<Input
+				data-test-policy-description
+				@value={{@policy.description}}
+				class="input"
+			/>
+		</label>
+	</div>
+
+	<footer>
+		{{#if (can "update policy")}}
+			<button
+				class="button is-primary"
+				type="submit"
+			>
+				Save Policy
+			</button>
+		{{/if}}
+	</footer>
+</form>

ui/app/components/policy-editor.js

@@ -0,0 +1,62 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { alias } from '@ember/object/computed';
+import messageForError from 'nomad-ui/utils/message-from-adapter-error';
+
+export default class PolicyEditorComponent extends Component {
+  @service flashMessages;
+  @service router;
+  @service store;
+
+  @alias('args.policy') policy;
+
+  @action updatePolicyRules(value) {
+    this.policy.set('rules', value);
+  }
+
+  @action async save(e) {
+    if (e instanceof Event) {
+      e.preventDefault(); // code-mirror "command+enter" submits the form, but doesnt have a preventDefault()
+    }
+    try {
+      const nameRegex = '^[a-zA-Z0-9-]{1,128}$';
+      if (!this.policy.name?.match(nameRegex)) {
+        throw new Error(
+          'Policy name must be 1-128 characters long and can only contain letters, numbers, and dashes.'
+        );
+      }
+
+      if (
+        this.policy.isNew &&
+        this.store.peekRecord('policy', this.policy.name)
+      ) {
+        throw new Error(
+          `A policy with name ${this.policy.name} already exists.`
+        );
+      }
+
+      this.policy.id = this.policy.name;
+
+      await this.policy.save();
+
+      this.flashMessages.add({
+        title: 'Policy Saved',
+        type: 'success',
+        destroyOnClick: false,
+        timeout: 5000,
+      });
+
+      this.router.transitionTo('policies');
+    } catch (error) {
+      console.log('error and its', error);
+      this.flashMessages.add({
+        title: `Error creating Policy ${this.policy.name}`,
+        message: messageForError(error),
+        type: 'error',
+        destroyOnClick: false,
+        sticky: true,
+      });
+    }
+  }
+}

ui/app/controllers/policies/index.js

@@ -0,0 +1,19 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class PoliciesIndexController extends Controller {
+  @service router;
+  get policies() {
+    return this.model.policies.map((policy) => {
+      policy.tokens = this.model.tokens.filter((token) => {
+        return token.policies.includes(policy);
+      });
+      return policy;
+    });
+  }
+
+  @action openPolicy(policy) {
+    this.router.transitionTo('policies.policy', policy.name);
+  }
+}

ui/app/controllers/policies/policy.js

@@ -0,0 +1,46 @@
+// @ts-check
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { task } from 'ember-concurrency';
+
+export default class PoliciesPolicyController extends Controller {
+  @service flashMessages;
+  @service router;
+
+  @tracked isDeleting = false;
+
+  @action
+  onDeletePrompt() {
+    this.isDeleting = true;
+  }
+
+  @action
+  onDeleteCancel() {
+    this.isDeleting = false;
+  }
+
+  @task(function* () {
+    try {
+      yield this.model.deleteRecord();
+      yield this.model.save();
+      this.flashMessages.add({
+        title: 'Policy Deleted',
+        type: 'success',
+        destroyOnClick: false,
+        timeout: 5000,
+      });
+      this.router.transitionTo('policies');
+    } catch (err) {
+      this.flashMessages.add({
+        title: `Error deleting Policy ${this.model.name}`,
+        message: err,
+        type: 'error',
+        destroyOnClick: false,
+        sticky: true,
+      });
+    }
+  })
+  deletePolicy;
+}

ui/app/modifiers/code-mirror.js

@@ -8,8 +8,18 @@ import 'codemirror/addon/selection/active-line';
 import 'codemirror/addon/lint/lint.js';
 import 'codemirror/addon/lint/json-lint.js';
 import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/ruby/ruby';
 
 export default class CodeMirrorModifier extends Modifier {
+  get autofocus() {
+    if (Object.hasOwn({ ...this.args.named }, 'autofocus')) {
+      // spread (...) because proxy, and because Ember over-eagerly prevents named prop lookups for modifier args.
+      return this.args.named.autofocus;
+    } else {
+      return !this.args.named.readOnly;
+    }
+  }
+
   didInstall() {
     this._setup();
   }
@@ -49,6 +59,10 @@ export default class CodeMirrorModifier extends Modifier {
         screenReaderLabel: this.args.named.screenReaderLabel || '',
       });
 
+      if (this.autofocus) {
+        editor.focus();
+      }
+
       editor.on('change', bind(this, this._onChange));
 
       this._editor = editor;

ui/app/router.js

@@ -98,6 +98,14 @@ Router.map(function () {
       path: '/path/*absolutePath',
     });
   });
+
+  this.route('policies', function () {
+    this.route('new');
+
+    this.route('policy', {
+      path: '/:name',
+    });
+  });
   // Mirage-only route for testing OIDC flow
   if (config['ember-cli-mirage']) {
     this.route('oidc-mock');

ui/app/routes/policies.js

@@ -0,0 +1,27 @@
+import Route from '@ember/routing/route';
+import withForbiddenState from 'nomad-ui/mixins/with-forbidden-state';
+import WithModelErrorHandling from 'nomad-ui/mixins/with-model-error-handling';
+import { inject as service } from '@ember/service';
+import { hash } from 'rsvp';
+
+export default class PoliciesRoute extends Route.extend(
+  withForbiddenState,
+  WithModelErrorHandling
+) {
+  @service can;
+  @service store;
+  @service router;
+
+  beforeModel() {
+    if (this.can.cannot('list policies')) {
+      this.router.transitionTo('/jobs');
+    }
+  }
+
+  async model() {
+    return await hash({
+      policies: this.store.query('policy', { reload: true }),
+      tokens: this.store.query('token', { reload: true }),
+    });
+  }
+}