diff --git a/ui/app/components/transformation-edit.js b/ui/app/components/transformation-edit.js
index 7c1ee57c5043..ec5343bbb1e9 100644
--- a/ui/app/components/transformation-edit.js
+++ b/ui/app/components/transformation-edit.js
@@ -17,30 +17,12 @@ export default TransformBase.extend({
     this.set('initialRoles', this.model.allowed_roles);
   },
 
-  updateOrCreateRole(role, transformationId, backend) {
-    return this.store
+  async updateOrCreateRole(role, transformationId, backend) {
+    const roleStore = await this.store
       .queryRecord('transform/role', {
         backend,
         id: role.id,
       })
-      .then((roleStore) => {
-        let transformations = roleStore.transformations;
-        if (role.action === 'ADD') {
-          transformations = addToList(transformations, transformationId);
-        } else if (role.action === 'REMOVE') {
-          transformations = removeFromList(transformations, transformationId);
-        }
-        roleStore.setProperties({
-          backend,
-          transformations,
-        });
-        return roleStore.save().catch((e) => {
-          return {
-            errorStatus: e.httpStatus,
-            ...role,
-          };
-        });
-      })
       .catch((e) => {
         if (e.httpStatus !== 403 && role.action === 'ADD') {
           // If role doesn't yet exist, create it with this transformation attached
@@ -64,24 +46,45 @@ export default TransformBase.extend({
           errorStatus: e.httpStatus,
         };
       });
+    // if an error occurs while querying the role, exit function and return the error
+    if (roleStore.errorStatus) return roleStore;
+    // otherwise update the role with the transformation and save
+    let transformations = roleStore.transformations;
+    if (role.action === 'ADD') {
+      transformations = addToList(transformations, transformationId);
+    } else if (role.action === 'REMOVE') {
+      transformations = removeFromList(transformations, transformationId);
+    }
+    roleStore.setProperties({
+      backend,
+      transformations,
+    });
+    return roleStore.save().catch((e) => {
+      return {
+        errorStatus: e.httpStatus,
+        ...role,
+      };
+    });
   },
 
   handleUpdateRoles(updateRoles, transformationId) {
     if (!updateRoles) return;
     const { backend } = this.model;
-    updateRoles.forEach((record) => {
-      // for each role that needs to be updated or created, update the role with the transformation. If there is an error, intercept it and show a message.
-      this.updateOrCreateRole(record, transformationId, backend).catch((e) => {
+    updateRoles.forEach(async (record) => {
+      // For each role that needs to be updated, update the role with the transformation.
+      const updateOrCreateResponse = await this.updateOrCreateRole(record, transformationId, backend);
+      // If an error was returned, check error type and show a message.
+      const errorStatus = updateOrCreateResponse.errorStatus;
+      if (errorStatus) {
         let message = `The edits to this transformation were successful, but transformations for its roles was not edited due to a lack of permissions.`;
-        if (e.httpStatus !== 403) {
+        if (errorStatus !== 403) {
           message = `You've edited the allowed_roles for this transformation. However, the corresponding edits to some roles' transformations were not made.`;
         }
         this.flashMessages.info(message, {
           sticky: true,
           priority: 300,
         });
-        return; // exit out of the forEach loop if an error occurs
-      });
+      }
     });
   },
 
diff --git a/ui/app/models/transform.js b/ui/app/models/transform.js
index 3992d34b3f3a..e60d17f571dc 100644
--- a/ui/app/models/transform.js
+++ b/ui/app/models/transform.js
@@ -5,7 +5,6 @@
 
 import Model, { attr } from '@ember-data/model';
 import { computed } from '@ember/object';
-import { alias } from '@ember/object/computed';
 import lazyCapabilities, { apiPath } from 'vault/macros/lazy-capabilities';
 import { expandAttributeMeta } from 'vault/utils/field-to-attrs';
 
@@ -138,6 +137,4 @@ export default Model.extend({
     readOnly: true,
   }),
   updatePath: lazyCapabilities(apiPath`${'backend'}/transformation/${'id'}`, 'backend', 'id'),
-  canDelete: alias('updatePath.canDelete'),
-  canUpdate: alias('updatePath.canUpdate'),
 });
diff --git a/ui/app/templates/components/transformation-edit.hbs b/ui/app/templates/components/transformation-edit.hbs
index eefa64389fae..68e1ad5ad98c 100644
--- a/ui/app/templates/components/transformation-edit.hbs
+++ b/ui/app/templates/components/transformation-edit.hbs
@@ -30,7 +30,7 @@
 {{#if (eq this.mode "show")}}
   <Toolbar>
     <ToolbarActions>
-      {{#if this.model.canDelete}}
+      {{#if this.model.updatePath.canDelete}}
         {{#if (gt this.model.allowed_roles.length 0)}}
           <ToolTip @verticalPosition="above" @horizontalPosition="center" as |T|>
             <T.Trigger @tabindex="-1">
@@ -58,7 +58,7 @@
         {{/if}}
         <div class="toolbar-separator"></div>
       {{/if}}
-      {{#if this.model.canUpdate}}
+      {{#if this.model.updatePath.canUpdate}}
         {{#if (gt this.model.allowed_roles.length 0)}}
           <Hds::Button
             @text="Edit transformation"