[FLASK] Fix an issue with updating snaps that have caveat permissions (#16473)

ui/components/app/flask/update-snap-permission-list/update-snap-permission-list.js

@@ -14,15 +14,17 @@ export default function UpdateSnapPermissionList({
   const t = useI18nContext();
 
   const ApprovedPermissions = () => {
-    return Object.keys(approvedPermissions).map((approvedPermission) => {
+    return Object.entries(approvedPermissions).map(
+      ([permissionName, permissionValue]) => {
         const { label, rightIcon } = getPermissionDescription(
           t,
-        approvedPermission,
+          permissionName,
+          permissionValue,
         );
-      const { date } = approvedPermissions[approvedPermission];
+        const { date } = permissionValue;
         const formattedDate = formatDate(date, 'yyyy-MM-dd');
         return (
-        <div className="approved-permission" key={approvedPermission}>
+          <div className="approved-permission" key={permissionName}>
             <i className="fas fa-check" />
             <div className="permission-description">
               {label}
@@ -37,17 +39,20 @@ export default function UpdateSnapPermissionList({
             {rightIcon && <i className={rightIcon} />}
           </div>
         );
-    });
+      },
+    );
   };
 
   const RevokedPermissions = () => {
-    return Object.keys(revokedPermissions).map((revokedPermission) => {
+    return Object.entries(revokedPermissions).map(
+      ([permissionName, permissionValue]) => {
         const { label, rightIcon } = getPermissionDescription(
           t,
-        revokedPermission,
+          permissionName,
+          permissionValue,
         );
         return (
-        <div className="revoked-permission" key={revokedPermission}>
+          <div className="revoked-permission" key={permissionName}>
             <i className="fas fa-x" />
             <div className="permission-description">
               {label}
@@ -62,14 +67,20 @@ export default function UpdateSnapPermissionList({
             {rightIcon && <i className={rightIcon} />}
           </div>
         );
-    });
+      },
+    );
   };
 
   const NewPermissions = () => {
-    return Object.keys(newPermissions).map((newPermission) => {
+    return Object.entries(newPermissions).map(
-      const { label, rightIcon } = getPermissionDescription(t, newPermission);
+      ([permissionName, permissionValue]) => {
+        const { label, rightIcon } = getPermissionDescription(
+          t,
+          permissionName,
+          permissionValue,
+        );
         return (
-        <div className="new-permission" key={newPermission}>
+          <div className="new-permission" key={permissionName}>
             <i className="fas fa-arrow-right" />
             <div className="permission-description">
               {label}
@@ -84,7 +95,8 @@ export default function UpdateSnapPermissionList({
             {rightIcon && <i className={rightIcon} />}
           </div>
         );
-    });
+      },
+    );
   };
 
   return (