Enable shared folder update button to close the modal

packages/files-ui/src/Components/Modules/FileBrowsers/ManageSharedFolder.tsx

@@ -197,6 +197,7 @@ const ManageSharedFolder = ({ onClose, bucketToEdit }: ICreateOrManageSharedFold
   const [suggestedUsers, setSuggestedUsers] = useState<LookupUser[]>([])
   const [loadingUsers, setLoadingUsers] = useState(false)
   const [searchActive, setSearchActive] = useState(false)
+  const [touchedLinksList, setTouchedLinksList] = useState(false)
 
   const onReset = useCallback(() => {
     setHasPermissionsChanged(false)
@@ -219,10 +220,18 @@ const ManageSharedFolder = ({ onClose, bucketToEdit }: ICreateOrManageSharedFold
 
   const onEditSharedFolder = useCallback(() => {
     if (!bucketToEdit) return
+
+    // only sharing link where touched no need to call the api
+    // just close the modal
+    if (!hasPermissionsChanged) {
+      handleClose()
+      return
+    }
+
     handleEditSharedFolder(bucketToEdit, sharedFolderReaders, sharedFolderWriters)
       .catch(console.error)
       .finally(handleClose)
-  }, [handleEditSharedFolder, sharedFolderWriters, sharedFolderReaders, handleClose, bucketToEdit])
+  }, [bucketToEdit, hasPermissionsChanged, handleEditSharedFolder, sharedFolderReaders, sharedFolderWriters, handleClose])
 
   const onLookupUser = (inputText?: string) => {
     if (!inputText) return
@@ -398,6 +407,7 @@ const ManageSharedFolder = ({ onClose, bucketToEdit }: ICreateOrManageSharedFold
         <LinkList
           bucketEncryptionKey={bucketToEdit.encryptionKey}
           bucketId={bucketToEdit.id}
+          setTouchedLinksList={() => setTouchedLinksList(true)}
         />
       </div>}
       <Grid
@@ -428,7 +438,7 @@ const ManageSharedFolder = ({ onClose, bucketToEdit }: ICreateOrManageSharedFold
             className={classes.okButton}
             loading={isCreatingSharedFolder || isEditingSharedFolder}
             onClick={onEditSharedFolder}
-            disabled={!hasPermissionsChanged || isEditingSharedFolder}
+            disabled={!touchedLinksList && (!hasPermissionsChanged || isEditingSharedFolder)}
             data-cy="button-update-shared-folder"
           >
             <Trans>Update</Trans>

packages/files-ui/src/Components/Modules/FileBrowsers/Sharing/LinkList.tsx

@@ -112,9 +112,10 @@ const MAX_LINKS = 2
 interface Props {
   bucketId: string
   bucketEncryptionKey: string
+  setTouchedLinksList: () => void
 }
 
-const LinkList = ({ bucketId, bucketEncryptionKey }: Props) => {
+const LinkList = ({ bucketId, bucketEncryptionKey, setTouchedLinksList }: Props) => {
   const classes = useStyles()
   const { filesApiClient } = useFilesApi()
   const [nonces, setNonces] = useState<NonceResponse[]>([])
@@ -163,8 +164,9 @@ const LinkList = ({ bucketId, bucketEncryptionKey }: Props) => {
       .finally(() => {
         setIsLoadingCreation(false)
         refreshNonces()
+        setTouchedLinksList()
       })
-  }, [bucketId, captureEvent, filesApiClient, newLinkPermission, refreshNonces])
+  }, [bucketId, captureEvent, filesApiClient, newLinkPermission, refreshNonces, setTouchedLinksList])
 
   return (
     <div className={classes.root}>
@@ -178,6 +180,7 @@ const LinkList = ({ bucketId, bucketEncryptionKey }: Props) => {
                 bucketEncryptionKey={bucketEncryptionKey}
                 nonce={nonce}
                 data-cy="link-share-folder"
+                setTouchedLinksList={setTouchedLinksList}
               />
             )}
           </div>

packages/files-ui/src/Components/Modules/FileBrowsers/Sharing/SharingLink.tsx

@@ -128,9 +128,10 @@ interface Props {
   nonce: NonceResponse
   bucketEncryptionKey: string
   refreshNonces: (hideLoading?: boolean) => void
+  setTouchedLinksList: () => void
 }
 
-const SharingLink = ({ nonce, bucketEncryptionKey, refreshNonces }: Props) => {
+const SharingLink = ({ nonce, bucketEncryptionKey, refreshNonces, setTouchedLinksList }: Props) => {
   const classes = useStyles()
   const { filesApiClient } = useFilesApi()
   const [link, setLink] = useState("")
@@ -165,30 +166,6 @@ const SharingLink = ({ nonce, bucketEncryptionKey, refreshNonces }: Props) => {
       })
       .catch(console.error)
 
-    // //Create a textbox field where we can insert text to. 
-    // const copyFrom = document.createElement("textarea")
-
-    // //Set the text content to be the text you wished to copy.
-    // copyFrom.textContent = link
-
-    // //Append the textbox field into the body as a child. 
-    // //"execCommand()" only works when there exists selected text, and the text is inside 
-    // //document.body (meaning the text is part of a valid rendered HTML element).
-    // document.body.appendChild(copyFrom)
-
-    // //Select all the text!
-    // copyFrom.select()
-
-    // //Execute command
-    // document.execCommand("copy")
-
-    // //(Optional) De-select the text using blur(). 
-    // copyFrom.blur()
-
-    // //Remove the textbox field from the document.body, so no other JavaScript nor 
-    // //other elements can get access to this.
-    // document.body.removeChild(copyFrom)
-
     setCopied(true)
     debouncedSwitchCopied()
   }, [debouncedSwitchCopied, link])
@@ -198,8 +175,9 @@ const SharingLink = ({ nonce, bucketEncryptionKey, refreshNonces }: Props) => {
       .catch(console.error)
       .finally(() => {
         refreshNonces(true)
+        setTouchedLinksList()
       })
-  }, [filesApiClient, nonce, refreshNonces])
+  }, [filesApiClient, nonce.id, refreshNonces, setTouchedLinksList])
 
   return (
     <div className={classes.root}>