Merge pull request #1125 from nickgros/SWC-6800g

Sage-Bionetworks · Aug 13, 2024 · 1274a96 · 1274a96
2 parents 67ff350 + 74769c4
commit 1274a96
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/packages/synapse-react-client/src/components/AclEditor/AclEditor.tsx b/packages/synapse-react-client/src/components/AclEditor/AclEditor.tsx
@@ -140,7 +140,6 @@ export function AclEditor(props: AclEditorProps) {
               return (
                 <Collapse key={resourceAccess.principalId}>
                   <ResourceAccessItem
-                    key={resourceAccess.principalId}
                     resourceAccess={resourceAccess}
                     availablePermissionLevels={availablePermissionLevels}
                     canChangePermission={canChangePermission}

diff --git a/packages/synapse-react-client/src/components/AclEditor/useUpdateAcl.ts b/packages/synapse-react-client/src/components/AclEditor/useUpdateAcl.ts
@@ -13,6 +13,7 @@ export const PRINCIPAL_ALREADY_ADDED_ERROR_MESSAGE =
   'User or team already has permissions.'
 
 type UseUpdateAclOptions = {
+  initialResourceAccessList?: ResourceAccess[]
   onChange?: (resourceAccessList: ResourceAccess[]) => void
   onError?: (e: string) => void
 }
@@ -38,14 +39,20 @@ type UseUpdateAclReturn = {
   resetDirtyState: () => void
 }
 
+const EMPTY_ARRAY: ResourceAccess[] = []
+
 export default function useUpdateAcl(
   options: UseUpdateAclOptions = {},
 ): UseUpdateAclReturn {
-  const { onChange = noop, onError = noop } = options
+  const {
+    initialResourceAccessList = EMPTY_ARRAY,
+    onChange = noop,
+    onError = noop,
+  } = options
   const [isDirty, setIsDirty] = useState(false)
   const [resourceAccessList, setResourceAccessList] = useState<
     ResourceAccess[]
-  >([])
+  >(initialResourceAccessList)
   const [hasSorted, setHasSorted] = useState(false)
 
   // While the form has not been edited, sort the resourceAccessList
@@ -67,6 +74,7 @@ export default function useUpdateAcl(
 
   useEffect(() => {
     onChange(resourceAccessList)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [resourceAccessList])
 
   const addResourceAccessItem = useCallback(

diff --git a/packages/synapse-react-client/src/components/EntityAclEditor/EntityAclEditor.tsx b/packages/synapse-react-client/src/components/EntityAclEditor/EntityAclEditor.tsx
@@ -161,13 +161,13 @@ const EntityAclEditor = React.forwardRef(function EntityAclEditor(
     updateResourceAccessItem,
     removeResourceAccessItem,
     resetDirtyState,
-  } = useUpdateAcl()
+  } = useUpdateAcl({ initialResourceAccessList: originalResourceAccess })
 
   // If `originalResourceAccess` changes, reset state
   useEffect(() => {
     if (originalResourceAccess) {
       resetDirtyState()
-      setResourceAccessList(originalResourceAccess)
+      setResourceAccessList([...originalResourceAccess])
     }
   }, [originalResourceAccess, resetDirtyState, setResourceAccessList])