Sort permissions and add enum name (#3268)

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 &&
+                          perm.lastSource
-                          intl.formatMessage({
+                            ? intl.formatMessage({
                                 id: "VmMDLN",
                                 defaultMessage:
                                   "This group is last source of that permission",
                                 description: "permission list item description",
                               })
+                            : perm.code
                         }
                       />
                     </ListItem>