Backport 1.13.x - UI: Fix id fields not allowing update (#19117)

ui/app/adapters/pki/pki-role.js

@@ -6,10 +6,10 @@ export default ApplicationAdapter.extend({
   namespace: 'v1',
 
   createOrUpdate(store, type, snapshot, requestType) {
+    const { name, backend } = snapshot.record;
     const serializer = store.serializerFor(type.modelName);
     const data = serializer.serialize(snapshot, requestType);
-    const { id } = snapshot;
-    const url = this.urlForRole(snapshot.record.get('backend'), id);
+    const url = this.urlForRole(backend, name);
 
     return this.ajax(url, 'POST', { data });
   },

ui/app/adapters/role-aws.js

@@ -1,17 +1,22 @@
-import { assign } from '@ember/polyfills';
 import ApplicationAdapter from './application';
 import { encodePath } from 'vault/utils/path-encoding-helpers';
 
 export default ApplicationAdapter.extend({
   namespace: 'v1',
 
   createOrUpdate(store, type, snapshot, requestType) {
+    const { name, backend } = snapshot.record;
     const serializer = store.serializerFor(type.modelName);
     const data = serializer.serialize(snapshot, requestType);
-    const { id } = snapshot;
-    const url = this.urlForRole(snapshot.record.get('backend'), id);
+    const url = this.urlForRole(backend, name);
 
-    return this.ajax(url, 'POST', { data });
+    return this.ajax(url, 'POST', { data }).then((resp) => {
+      // Ember data doesn't like 204 responses except for DELETE method
+      const response = resp || { data: {} };
+      response.data.name = name;
+      response.data.backend = name;
+      return response;
+    });
   },
 
   createRecord() {
@@ -56,7 +61,7 @@ export default ApplicationAdapter.extend({
         backend,
       };
 
-      return assign({}, resp, data);
+      return { ...resp, ...data };
     });
   },
 

ui/app/adapters/role-ssh.js

@@ -7,12 +7,17 @@ export default ApplicationAdapter.extend({
   namespace: 'v1',
 
   createOrUpdate(store, type, snapshot, requestType) {
+    const { name, backend } = snapshot.record;
     const serializer = store.serializerFor(type.modelName);
     const data = serializer.serialize(snapshot, requestType);
-    const { id } = snapshot;
-    const url = this.urlForRole(snapshot.record.get('backend'), id);
+    const url = this.urlForRole(backend, name);
 
-    return this.ajax(url, 'POST', { data });
+    return this.ajax(url, 'POST', { data }).then((resp) => {
+      // Ember data doesn't like 204 responses except for DELETE method
+      const response = resp || { data: {} };
+      response.data.name = name;
+      return response;
+    });
   },
 
   createRecord() {

ui/app/adapters/transform.js

@@ -7,12 +7,16 @@ export default ApplicationAdapter.extend({
   namespace: 'v1',
 
   createOrUpdate(store, type, snapshot) {
+    const { backend, name } = snapshot.record;
     const serializer = store.serializerFor(type.modelName);
     const data = serializer.serialize(snapshot);
-    const { id } = snapshot;
-    const url = this.urlForTransformations(snapshot.record.get('backend'), id);
+    const url = this.urlForTransformations(backend, name);
 
-    return this.ajax(url, 'POST', { data });
+    return this.ajax(url, 'POST', { data }).then((resp) => {
+      const response = resp || {};
+      response.id = name;
+      return response;
+    });
   },
 
   createRecord() {

ui/app/adapters/transform/base.js

@@ -9,12 +9,16 @@ export default ApplicationAdapter.extend({
   },
 
   createOrUpdate(store, type, snapshot) {
+    const { backend, name } = snapshot.record;
     const serializer = store.serializerFor(type.modelName);
     const data = serializer.serialize(snapshot);
-    const { id } = snapshot;
-    const url = this.url(snapshot.record.get('backend'), type.modelName, id);
-
-    return this.ajax(url, 'POST', { data });
+    const url = this.url(backend, type.modelName, name);
+    return this.ajax(url, 'POST', { data }).then((resp) => {
+      // Ember data doesn't like 204 responses except for DELETE method
+      const response = resp || { data: {} };
+      response.data.name = name;
+      return response;
+    });
   },
 
   createRecord() {
@@ -42,9 +46,12 @@ export default ApplicationAdapter.extend({
   fetchByQuery(query) {
     const { backend, modelName, id } = query;
     return this.ajax(this.url(backend, modelName, id), 'GET').then((resp) => {
+      // The API response doesn't explicitly include the name/id, so add it here
       return {
         ...resp,
         backend,
+        id,
+        name: id,
       };
     });
   },
@@ -55,9 +62,9 @@ export default ApplicationAdapter.extend({
 
   queryRecord(store, type, query) {
     return this.ajax(this.url(query.backend, type.modelName, query.id), 'GET').then((result) => {
-      // CBS TODO: Add name to response and unmap name <> id on models
       return {
         id: query.id,
+        name: query.id,
         ...result,
       };
     });

ui/app/components/role-aws-edit.js

@@ -8,7 +8,8 @@ export default RoleEdit.extend({
     createOrUpdate(type, event) {
       event.preventDefault();
 
-      const modelId = this.model.id;
+      // all of the attributes with fieldValue:'id' are called `name`
+      const modelId = this.model.id || this.model.name;
       // prevent from submitting if there's no key
       // maybe do something fancier later
       if (type === 'create' && isBlank(modelId)) {

ui/app/components/role-edit.js

@@ -64,7 +64,8 @@ export default Component.extend(FocusOnInsertMixin, {
     createOrUpdate(type, event) {
       event.preventDefault();
 
-      const modelId = this.model.id;
+      // all of the attributes with fieldValue:'id' are called `name`
+      const modelId = this.model.id || this.model.name;
       // prevent from submitting if there's no key
       // maybe do something fancier later
       if (type === 'create' && isBlank(modelId)) {

ui/app/components/transformation-edit.js

@@ -97,7 +97,7 @@ export default TransformBase.extend({
       event.preventDefault();
 
       this.applyChanges('save', () => {
-        const transformationId = this.model.id;
+        const transformationId = this.model.id || this.model.name;
         const newModelRoles = this.model.allowed_roles || [];
         const initialRoles = this.initialRoles || [];
 

ui/app/models/pki/pki-role.js

@@ -11,7 +11,7 @@ export default Model.extend({
   }),
   name: attr('string', {
     label: 'Role name',
-    fieldValue: 'id',
+    fieldValue: 'name',
     readOnly: true,
   }),
   useOpenAPI: true,

ui/app/models/role-aws.js

@@ -24,10 +24,8 @@ export default Model.extend({
   }),
   name: attr('string', {
     label: 'Role name',
-    fieldValue: 'id',
     readOnly: true,
   }),
-  useOpenAPI: false,
   // credentialTypes are for backwards compatibility.
   // we use this to populate "credentialType" in
   // the serializer. if there is more than one, the
@@ -51,6 +49,7 @@ export default Model.extend({
     editType: 'json',
     helpText:
       'A policy is an object in AWS that, when associated with an identity or resource, defines their permissions.',
+    defaultValue: '{\n}',
   }),
   fields: computed('credentialType', function () {
     const credentialType = this.credentialType;

ui/app/models/role-ssh.js

@@ -53,7 +53,7 @@ export default Model.extend({
   }),
   name: attr('string', {
     label: 'Role Name',
-    fieldValue: 'id',
+    fieldValue: 'name',
     readOnly: true,
   }),
   keyType: attr('string', {

ui/app/models/transform.js

@@ -34,11 +34,9 @@ const TWEAK_SOURCE = [
 ];
 
 const ModelExport = Model.extend({
-  useOpenAPI: false,
   name: attr('string', {
     // CBS TODO: make this required for making a transformation
     label: 'Name',
-    fieldValue: 'id',
     readOnly: true,
     subText: 'The name for your transformation. This cannot be edited later.',
   }),

ui/app/models/transform/alphabet.js

@@ -12,7 +12,6 @@ const M = Model.extend({
   }),
 
   name: attr('string', {
-    fieldValue: 'id',
     readOnly: true,
     subText: 'The alphabet name. Keep in mind that spaces are not allowed and this cannot be edited later.',
   }),

ui/app/models/transform/role.js

@@ -16,7 +16,6 @@ const ModelExport = Model.extend({
   name: attr('string', {
     // TODO: make this required for making a transformation
     label: 'Name',
-    fieldValue: 'id',
     readOnly: true,
     subText: 'The name for your role. This cannot be edited later.',
   }),

ui/app/models/transform/template.js

@@ -12,7 +12,6 @@ const M = Model.extend({
   }),
 
   name: attr('string', {
-    fieldValue: 'id',
     readOnly: true,
     subText:
       'Templates allow Vault to determine what and how to capture the value to be transformed. This cannot be edited later.',

ui/app/models/transit-key.js

@@ -53,7 +53,6 @@ export default Model.extend({
   }),
   name: attr('string', {
     label: 'Name',
-    fieldValue: 'id',
     readOnly: true,
   }),
   autoRotatePeriod: attr({

ui/app/serializers/role-aws.js

@@ -1,9 +1,12 @@
 import ApplicationSerializer from './application';
+
 export default ApplicationSerializer.extend({
+  primaryKey: 'name',
+
   extractLazyPaginatedData(payload) {
     return payload.data.keys.map((key) => {
       const model = {
-        id: key,
+        name: key,
       };
       if (payload.backend) {
         model.backend = payload.backend;

ui/app/serializers/role.js

@@ -1,6 +1,9 @@
 import ApplicationSerializer from './application';
 
 export default ApplicationSerializer.extend({
+  primaryKey: 'name',
+
+  // Used for both pki-role (soon to be deprecated) and role-ssh
   extractLazyPaginatedData(payload) {
     if (payload.zero_address_roles) {
       payload.zero_address_roles.forEach((role) => {
@@ -11,7 +14,7 @@ export default ApplicationSerializer.extend({
     if (!payload.data.key_info) {
       return payload.data.keys.map((key) => {
         const model = {
-          id: key,
+          name: key,
         };
         if (payload.backend) {
           model.backend = payload.backend;
@@ -22,7 +25,7 @@ export default ApplicationSerializer.extend({
 
     const ret = payload.data.keys.map((key) => {
       const model = {
-        id: key,
+        name: key,
         key_type: payload.data.key_info[key].key_type,
         zero_address: payload.data.key_info[key].zero_address,
       };

ui/app/serializers/transform.js

@@ -2,7 +2,7 @@ import ApplicationSerializer from './application';
 
 export default ApplicationSerializer.extend({
   normalizeResponse(store, primaryModelClass, payload, id, requestType) {
-    if (payload.data.masking_character) {
+    if (payload.data?.masking_character) {
       payload.data.masking_character = String.fromCharCode(payload.data.masking_character);
     }
     return this._super(store, primaryModelClass, payload, id, requestType);
@@ -21,6 +21,7 @@ export default ApplicationSerializer.extend({
     return payload.data.keys.map((key) => {
       const model = {
         id: key,
+        name: key,
       };
       if (payload.backend) {
         model.backend = payload.backend;

ui/app/serializers/transform/alphabet.js

@@ -1,15 +1,13 @@
 import ApplicationSerializer from '../application';
 
 export default ApplicationSerializer.extend({
-  normalizeResponse(store, primaryModelClass, payload, id, requestType) {
-    payload.data.name = payload.id;
-    return this._super(store, primaryModelClass, payload, id, requestType);
-  },
+  primaryKey: 'name',
 
   extractLazyPaginatedData(payload) {
     return payload.data.keys.map((key) => {
       const model = {
         id: key,
+        name: key,
       };
       if (payload.backend) {
         model.backend = payload.backend;

ui/app/serializers/transform/role.js

@@ -1,10 +1,12 @@
 import ApplicationSerializer from '../application';
 
 export default ApplicationSerializer.extend({
+  primaryKey: 'name',
   extractLazyPaginatedData(payload) {
     return payload.data.keys.map((key) => {
       const model = {
         id: key,
+        name: key,
       };
       if (payload.backend) {
         model.backend = payload.backend;

ui/app/serializers/transform/template.js

@@ -1,13 +1,14 @@
 import ApplicationSerializer from '../application';
 
 export default ApplicationSerializer.extend({
+  primaryKey: 'name',
+
   normalizeResponse(store, primaryModelClass, payload, id, requestType) {
-    payload.data.name = payload.id;
-    if (payload.data.alphabet) {
+    if (payload.data?.alphabet) {
       payload.data.alphabet = [payload.data.alphabet];
     }
     // strip out P character from any named capture groups
-    if (payload.data.pattern) {
+    if (payload.data?.pattern) {
       this._formatNamedCaptureGroups(payload.data, '?P', '?');
     }
     return this._super(store, primaryModelClass, payload, id, requestType);
@@ -43,6 +44,7 @@ export default ApplicationSerializer.extend({
     return payload.data.keys.map((key) => {
       const model = {
         id: key,
+        name: key,
       };
       if (payload.backend) {
         model.backend = payload.backend;

ui/lib/core/addon/components/form-field.js

@@ -4,6 +4,7 @@ import { action } from '@ember/object';
 import { capitalize } from 'vault/helpers/capitalize';
 import { humanize } from 'vault/helpers/humanize';
 import { dasherize } from 'vault/helpers/dasherize';
+import { assert } from '@ember/debug';
 /**
  * @module FormField
  * `FormField` components are field elements associated with a particular model.
@@ -61,6 +62,10 @@ export default class FormFieldComponent extends Component {
     super(...arguments);
     const { attr, model } = this.args;
     const valuePath = attr.options?.fieldValue || attr.name;
+    assert(
+      'Form is attempting to modify an ID. Ember-data does not allow this.',
+      valuePath.toLowerCase() !== 'id'
+    );
     const modelValue = model[valuePath];
     this.showInput = !!modelValue;
   }