From b7abf57a05f0a0ad041182684425b380cf552397 Mon Sep 17 00:00:00 2001
From: Jakub Neander <oh@zaiste.net>
Date: Tue, 7 Mar 2023 10:50:11 +0100
Subject: [PATCH] Sort permissions and add enum name (#3268)

---
 .../AccountPermissions/AccountPermissions.tsx | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/AccountPermissions/AccountPermissions.tsx b/src/components/AccountPermissions/AccountPermissions.tsx
index afd0fe1b7..04d448262 100644
--- a/src/components/AccountPermissions/AccountPermissions.tsx
+++ b/src/components/AccountPermissions/AccountPermissions.tsx
@@ -16,6 +16,11 @@ import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
+const byAlphabeticalOrder =
+  <T extends {}>(field: string) =>
+  (a: T, b: T) =>
+    a[field].localeCompare(b[field]);
+
 const useStyles = makeStyles(
   theme => ({
     checkboxContainer: {
@@ -50,7 +55,6 @@ const AccountPermissions: React.FC<AccountPermissionsProps> = props => {
   const {
     data,
     disabled,
-    permissions,
     permissionsExceeded,
     onChange,
     description,
@@ -58,6 +62,10 @@ const AccountPermissions: React.FC<AccountPermissionsProps> = props => {
     errorMessage,
   } = props;
 
+  const permissions = Object.values(props.permissions).sort(
+    byAlphabeticalOrder("name"),
+  );
+
   const classes = useStyles(props);
   const intl = useIntl();
   const { user } = useUser();
@@ -192,13 +200,14 @@ const AccountPermissions: React.FC<AccountPermissionsProps> = props => {
                         id={perm.code}
                         primary={perm.name.replace(/\./, "")}
                         secondary={
-                          perm.lastSource &&
-                          intl.formatMessage({
-                            id: "VmMDLN",
-                            defaultMessage:
-                              "This group is last source of that permission",
-                            description: "permission list item description",
-                          })
+                          perm.lastSource
+                            ? intl.formatMessage({
+                                id: "VmMDLN",
+                                defaultMessage:
+                                  "This group is last source of that permission",
+                                description: "permission list item description",
+                              })
+                            : perm.code
                         }
                       />
                     </ListItem>