[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,77 +14,89 @@ export default function UpdateSnapPermissionList({
   const t = useI18nContext();
 
   const ApprovedPermissions = () => {
-    return Object.keys(approvedPermissions).map((approvedPermission) => {
+    return Object.entries(approvedPermissions).map(
-      const { label, rightIcon } = getPermissionDescription(
+      ([permissionName, permissionValue]) => {
-        t,
+        const { label, rightIcon } = getPermissionDescription(
-        approvedPermission,
+          t,
-      );
+          permissionName,
-      const { date } = approvedPermissions[approvedPermission];
+          permissionValue,
-      const formattedDate = formatDate(date, 'yyyy-MM-dd');
+        );
-      return (
+        const { date } = permissionValue;
-        <div className="approved-permission" key={approvedPermission}>
+        const formattedDate = formatDate(date, 'yyyy-MM-dd');
-          <i className="fas fa-check" />
+        return (
-          <div className="permission-description">
+          <div className="approved-permission" key={permissionName}>
-            {label}
+            <i className="fas fa-check" />
-            <Typography
+            <div className="permission-description">
-              color={COLORS.TEXT_ALTERNATIVE}
+              {label}
-              className="permission-description-subtext"
+              <Typography
-              boxProps={{ paddingTop: 1 }}
+                color={COLORS.TEXT_ALTERNATIVE}
-            >
+                className="permission-description-subtext"
-              {t('approvedOn', [formattedDate])}
+                boxProps={{ paddingTop: 1 }}
-            </Typography>
+              >
+                {t('approvedOn', [formattedDate])}
+              </Typography>
+            </div>
+            {rightIcon && <i className={rightIcon} />}
           </div>
-          {rightIcon && <i className={rightIcon} />}
+        );
-        </div>
+      },
-      );
+    );
-    });
   };
 
   const RevokedPermissions = () => {
-    return Object.keys(revokedPermissions).map((revokedPermission) => {
+    return Object.entries(revokedPermissions).map(
-      const { label, rightIcon } = getPermissionDescription(
+      ([permissionName, permissionValue]) => {
-        t,
+        const { label, rightIcon } = getPermissionDescription(
-        revokedPermission,
+          t,
-      );
+          permissionName,
-      return (
+          permissionValue,
-        <div className="revoked-permission" key={revokedPermission}>
+        );
-          <i className="fas fa-x" />
+        return (
-          <div className="permission-description">
+          <div className="revoked-permission" key={permissionName}>
-            {label}
+            <i className="fas fa-x" />
-            <Typography
+            <div className="permission-description">
-              color={COLORS.TEXT_ALTERNATIVE}
+              {label}
-              boxProps={{ paddingTop: 1 }}
+              <Typography
-              className="permission-description-subtext"
+                color={COLORS.TEXT_ALTERNATIVE}
-            >
+                boxProps={{ paddingTop: 1 }}
-              {t('permissionRevoked')}
+                className="permission-description-subtext"
-            </Typography>
+              >
+                {t('permissionRevoked')}
+              </Typography>
+            </div>
+            {rightIcon && <i className={rightIcon} />}
           </div>
-          {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]) => {
-      return (
+        const { label, rightIcon } = getPermissionDescription(
-        <div className="new-permission" key={newPermission}>
+          t,
-          <i className="fas fa-arrow-right" />
+          permissionName,
-          <div className="permission-description">
+          permissionValue,
-            {label}
+        );
-            <Typography
+        return (
-              color={COLORS.TEXT_ALTERNATIVE}
+          <div className="new-permission" key={permissionName}>
-              boxProps={{ paddingTop: 1 }}
+            <i className="fas fa-arrow-right" />
-              className="permission-description-subtext"
+            <div className="permission-description">
-            >
+              {label}
-              {t('permissionRequested')}
+              <Typography
-            </Typography>
+                color={COLORS.TEXT_ALTERNATIVE}
+                boxProps={{ paddingTop: 1 }}
+                className="permission-description-subtext"
+              >
+                {t('permissionRequested')}
+              </Typography>
+            </div>
+            {rightIcon && <i className={rightIcon} />}
           </div>
-          {rightIcon && <i className={rightIcon} />}
+        );
-        </div>
+      },
-      );
+    );
-    });
   };
 
   return (