Fix saving permission groups (#2239)

* Allow saving regardless of membersChanged value

* Fix in-place sorting on readonly value

* Fix capital letter in button message

* Update snapshots

* Fix stories

* Remove unused import

locale/defaultMessages.json

@@ -958,10 +958,6 @@
     "context": "translations section name",
     "string": "Translations"
   },
-  "5ftg/B": {
-    "context": "button",
-    "string": "create permission group"
-  },
   "5kvaFR": {
     "context": "product field",
     "string": "Export Variant SKU"
@@ -5017,6 +5013,10 @@
     "context": "product type",
     "string": "Product Type"
   },
+  "bRJD/v": {
+    "context": "button",
+    "string": "Create permission group"
+  },
   "bS7A8u": {
     "context": "add tracking button",
     "string": "Add tracking"

src/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage.stories.tsx

@@ -16,7 +16,6 @@ const props: PermissionGroupDetailsPageProps = {
   errors: [],
   isChecked: () => false,
   members: users,
-  membersModified: false,
   onAssign: () => undefined,
   onSort: () => undefined,
   onSubmit: () => undefined,

src/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage.tsx

@@ -53,7 +53,6 @@ export interface PermissionGroupDetailsPageProps
   disabled: boolean;
   errors: PermissionGroupErrorFragment[];
   members: PermissionGroupDetailsFragment["users"];
-  membersModified: boolean;
   permissionGroup: PermissionGroupDetailsFragment;
   permissions: PermissionData[];
   permissionsExceeded: boolean;
@@ -67,7 +66,6 @@ const PermissionGroupDetailsPage: React.FC<PermissionGroupDetailsPageProps> = ({
   disabled,
   errors,
   members,
-  membersModified,
   onSubmit,
   permissionGroup,
   permissions,
@@ -143,7 +141,7 @@ const PermissionGroupDetailsPage: React.FC<PermissionGroupDetailsPageProps> = ({
               onCancel={() => navigate(permissionGroupListUrl())}
               onSubmit={submit}
               state={saveButtonBarState}
-              disabled={disabled || !membersModified}
+              disabled={disabled}
             />
           </div>
         </Container>

src/permissionGroups/components/PermissionGroupListPage/PermissionGroupListPage.tsx

@@ -38,8 +38,8 @@ const PermissionGroupListPage: React.FC<PermissionGroupListPageProps> = listProp
           data-test-id="create-permission-group"
         >
           <FormattedMessage
-            id="5ftg/B"
-            defaultMessage="create permission group"
+            id="bRJD/v"
+            defaultMessage="Create permission group"
             description="button"
           />
         </Button>

src/permissionGroups/components/PermissionGroupMemberList/PermissionGroupMemberList.tsx

@@ -110,7 +110,7 @@ const PermissionGroupMemberList: React.FC<PermissionGroupProps> = props => {
   const classes = useStyles(props);
   const intl = useIntl();
 
-  const members = users?.sort(sortMembers(sort?.sort, sort?.asc));
+  const members = [...users].sort(sortMembers(sort?.sort, sort?.asc));
 
   return (
     <Card>

src/permissionGroups/views/PermissionGroupDetails/PermissionGroupDetails.tsx

@@ -23,7 +23,7 @@ import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandl
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
 import { mapEdgesToItems } from "@saleor/utils/maps";
 import { getSortParams } from "@saleor/utils/sort";
-import React, { useState } from "react";
+import React from "react";
 import { useIntl } from "react-intl";
 
 import AssignMembersDialog from "../../components/AssignMembersDialog";
@@ -61,8 +61,6 @@ export const PermissionGroupDetails: React.FC<PermissionGroupDetailsProps> = ({
     data?.permissionGroup.users,
   );
 
-  const [membersModified, setMembersModified] = useState(false);
-
   const { search, result: searchResult, loadMore } = useStaffMemberSearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA,
   });
@@ -104,7 +102,6 @@ export const PermissionGroupDetails: React.FC<PermissionGroupDetailsProps> = ({
 
   const unassignMembers = () => {
     setMembersList(membersList?.filter(m => !listElements.includes(m.id)));
-    setMembersModified(true);
     closeModal();
   };
 
@@ -153,7 +150,6 @@ export const PermissionGroupDetails: React.FC<PermissionGroupDetailsProps> = ({
         permissionGroup={data?.permissionGroup}
         permissionsExceeded={permissionsExceeded}
         members={membersList || []}
-        membersModified={membersModified}
         onAssign={() => openModal("assign")}
         onUnassign={ids => openModal("unassign", { ids })}
         errors={
@@ -198,7 +194,6 @@ export const PermissionGroupDetails: React.FC<PermissionGroupDetailsProps> = ({
             ...membersList,
             ...formData.filter(member => !membersList.includes(member)),
           ]);
-          setMembersModified(true);
           closeModal();
         }}
       />

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -168311,7 +168311,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group List default 1`
             <span
               class="MuiButton-label-id"
             >
-              create permission group
+              Create permission group
             </span>
           </a>
         </div>
@@ -168754,7 +168754,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group List loading 1`
             <span
               class="MuiButton-label-id"
             >
-              create permission group
+              Create permission group
             </span>
           </a>
         </div>
@@ -168974,7 +168974,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group List no data 1`
             <span
               class="MuiButton-label-id"
             >
-              create permission group
+              Create permission group
             </span>
           </a>
         </div>