- {{#each-in this.model.decodeFormats as |key value|}}
+ {{#each-in @model.decodeFormats as |key value|}}
{{key}}
{{value}}
@@ -137,7 +121,7 @@
{{else}}
{{/if}}
diff --git a/ui/app/components/transform-template-edit.js b/ui/app/components/transform-template-edit.js
index 646d07208e..6c835eb4b2 100644
--- a/ui/app/components/transform-template-edit.js
+++ b/ui/app/components/transform-template-edit.js
@@ -3,6 +3,82 @@
* SPDX-License-Identifier: BUSL-1.1
*/
-import TransformBase from './transform-edit-base';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import errorMessage from 'vault/utils/error-message';
-export default TransformBase;
+/**
+ * @module TransformTemplateEdit
+ * `TransformTemplateEdit` is a component that allows you to create/edit or view a transform template.
+ *
+ * @example
+ * ```js
+ *
+ * ```
+ * @param {object} model - This is the transform template model.
+ * @param {string} mode - Is either show, create or edit.
+ */
+
+export default class TransformTemplateEditComponent extends Component {
+ @service flashMessages;
+ @service router;
+
+ @tracked errorMessage = '';
+
+ get breadcrumbs() {
+ // ideally this is created on the controller in the parent route but this is a generic route and adding breadcrumbs to the controller requires a larger refactor.
+ const { backend } = this.args.model;
+ return [
+ {
+ label: backend,
+ route: 'vault.cluster.secrets.backend.list-root',
+ model: backend,
+ query: { tab: 'template' },
+ },
+ { label: 'Template' },
+ ];
+ }
+
+ transition(route = 'show') {
+ this.errorMessage = '';
+ const { backend, id } = this.args.model;
+ if (route === 'list') {
+ this.router.transitionTo('vault.cluster.secrets.backend.list-root', backend, {
+ queryParams: { tab: 'template' },
+ });
+ return;
+ } else {
+ this.router.transitionTo('vault.cluster.secrets.backend.show', `template/${id}`);
+ }
+ }
+
+ @action async createOrUpdate(event) {
+ event.preventDefault();
+
+ if (!this.args.model.hasDirtyAttributes) {
+ this.flashMessages.info('No changes detected.');
+ this.transition();
+ return;
+ }
+
+ try {
+ await this.args.model.save();
+ this.flashMessages.success('Transform template saved.');
+ this.transition();
+ } catch (e) {
+ this.errorMessage = errorMessage(e);
+ }
+ }
+
+ @action async onDelete() {
+ try {
+ await this.args.model.destroyRecord();
+ this.flashMessages.success('Transform template deleted.');
+ this.transition('list');
+ } catch (e) {
+ this.errorMessage = errorMessage(e);
+ }
+ }
+}
diff --git a/ui/app/models/transform/alphabet.js b/ui/app/models/transform/alphabet.js
index 429fa02754..5bb542467c 100644
--- a/ui/app/models/transform/alphabet.js
+++ b/ui/app/models/transform/alphabet.js
@@ -10,11 +10,6 @@ import { expandAttributeMeta } from 'vault/utils/field-to-attrs';
export default class Alphabet extends Model {
idPrefix = 'alphabet/';
- get idForNav() {
- const modelId = this.id || '';
- return `${this.idPrefix}${modelId}`;
- }
-
@attr('string', {
readOnly: true,
subText: 'The alphabet name. Keep in mind that spaces are not allowed and this cannot be edited later.',
diff --git a/ui/app/models/transform/template.js b/ui/app/models/transform/template.js
index 606c0323ba..cc88fc90ef 100644
--- a/ui/app/models/transform/template.js
+++ b/ui/app/models/transform/template.js
@@ -4,28 +4,28 @@
*/
import Model, { attr } from '@ember-data/model';
-import { computed } from '@ember/object';
import lazyCapabilities, { apiPath } from 'vault/macros/lazy-capabilities';
import { expandAttributeMeta } from 'vault/utils/field-to-attrs';
-export default Model.extend({
- idPrefix: 'template/',
- idForNav: computed('id', 'idPrefix', function () {
- const modelId = this.id || '';
- return `${this.idPrefix}${modelId}`;
- }),
+export default class TransformTemplate extends Model {
+ idPrefix = 'template/';
- name: attr('string', {
+ @attr('string', {
readOnly: true,
subText:
'Templates allow Vault to determine what and how to capture the value to be transformed. This cannot be edited later.',
- }),
- type: attr('string', { defaultValue: 'regex' }),
- pattern: attr('string', {
+ })
+ name;
+
+ @attr('string', { defaultValue: 'regex' }) type;
+
+ @attr('string', {
editType: 'regex',
subText: 'The template’s pattern defines the data format. Expressed in regex.',
- }),
- alphabet: attr('array', {
+ })
+ pattern;
+
+ @attr('array', {
subText:
'Alphabet defines a set of characters (UTF-8) that is used for FPE to determine the validity of plaintext and ciphertext values. You can choose a built-in one, or create your own.',
editType: 'searchSelect',
@@ -34,17 +34,22 @@ export default Model.extend({
label: 'Alphabet',
models: ['transform/alphabet'],
selectLimit: 1,
- }),
- encodeFormat: attr('string'),
- decodeFormats: attr(),
- backend: attr('string', { readOnly: true }),
+ })
+ alphabet;
- readAttrs: computed(function () {
+ @attr('string') encodeFormat;
+ @attr('') decodeFormats;
+
+ @attr('string', { readOnly: true }) backend;
+
+ get readAttrs() {
const keys = ['name', 'pattern', 'encodeFormat', 'decodeFormats', 'alphabet'];
return expandAttributeMeta(this, keys);
- }),
- writeAttrs: computed(function () {
+ }
+
+ get writeAttrs() {
return expandAttributeMeta(this, ['name', 'pattern', 'alphabet']);
- }),
- updatePath: lazyCapabilities(apiPath`${'backend'}/template/${'id'}`, 'backend', 'id'),
-});
+ }
+
+ @lazyCapabilities(apiPath`${'backend'}/template/${'id'}`, 'backend') updatePath;
+}