From c4a168f1a336bf5d463e8d58025b54ca23db2329 Mon Sep 17 00:00:00 2001 From: Pierre Cozy Date: Mon, 14 Feb 2022 17:05:41 +0100 Subject: [PATCH 01/11] fix(opening): allow natural opening of file and folder --- src/drive/web/modules/filelist/FileOpener.jsx | 37 +++++++++++++++++-- 1 file changed, 34 insertions(+), 3 deletions(-) diff --git a/src/drive/web/modules/filelist/FileOpener.jsx b/src/drive/web/modules/filelist/FileOpener.jsx index fb5355c020..020b54dd9a 100644 --- a/src/drive/web/modules/filelist/FileOpener.jsx +++ b/src/drive/web/modules/filelist/FileOpener.jsx @@ -110,15 +110,46 @@ const FileOpener = ({ ) } + const isFolder = file => + file.attributes && file.attributes.type === 'directory' + const isFile = file => file.attributes && file.attributes.type === 'file' + const isShortcut = file => file.class === 'shortcut' + const isNote = file => file.name.endsWith('.cozy-note') + let buildHref = '' + if (isFolder(file)) { + buildHref = `/#/folder/${file.id}` + } else if (isNote(file)) { + console.log('isNote') + console.log({ file }) + // DO NOTHING + // http://drive.cozy.localhost:8080/#/folder/io.cozy.files.root-dir/file/682e64b839470826fda67a4abc022ff4 + // notes.cozy.localhost:8080/#/n/682e64b839470826fda67a4abc022ff4 + } else if (isShortcut(file)) { + console.log('isShortcut') + console.log({ file }) + // generate external file <= + // DO NOTHING + } else if (isFile(file)) { + buildHref = `/#/folder/${file.dir_id}/file/${file.id}` + } else { + console.log('NOT FILE') + console.log({ file }) + buildHref = '' + } + return ( - { + ev.preventDefault() + }} > {children} - + ) } From d2e6e0cf5e2fc78806cdc131d06c98cef191615d Mon Sep 17 00:00:00 2001 From: Pierre Cozy Date: Tue, 15 Feb 2022 16:23:16 +0100 Subject: [PATCH 02/11] fix(opening): note and shortcut can now be ctrl clicked as well --- src/drive/web/modules/filelist/File.jsx | 7 ++++++- src/drive/web/modules/filelist/FileOpener.jsx | 6 +----- .../views/Folder/createFileOpeningHandler.js | 13 +++++++++++-- 3 files changed, 18 insertions(+), 8 deletions(-) diff --git a/src/drive/web/modules/filelist/File.jsx b/src/drive/web/modules/filelist/File.jsx index c3d90cc2ee..3fa3bf1050 100644 --- a/src/drive/web/modules/filelist/File.jsx +++ b/src/drive/web/modules/filelist/File.jsx @@ -65,7 +65,12 @@ const File = props => { const { onFolderOpen, onFileOpen, isAvailableOffline } = props event.stopPropagation() if (isDirectory(attributes)) { - onFolderOpen(attributes.id) + if (event.ctrlKey || event.metaKey || event.shiftKey) { + const openInNewTab = url => window.open(url, '_blank') + openInNewTab(`/#/folder/${attributes.id}`) + } else { + onFolderOpen(attributes.id) + } } else { onFileOpen({ event, diff --git a/src/drive/web/modules/filelist/FileOpener.jsx b/src/drive/web/modules/filelist/FileOpener.jsx index 020b54dd9a..5b2ba4412a 100644 --- a/src/drive/web/modules/filelist/FileOpener.jsx +++ b/src/drive/web/modules/filelist/FileOpener.jsx @@ -119,14 +119,10 @@ const FileOpener = ({ if (isFolder(file)) { buildHref = `/#/folder/${file.id}` } else if (isNote(file)) { - console.log('isNote') - console.log({ file }) // DO NOTHING // http://drive.cozy.localhost:8080/#/folder/io.cozy.files.root-dir/file/682e64b839470826fda67a4abc022ff4 // notes.cozy.localhost:8080/#/n/682e64b839470826fda67a4abc022ff4 } else if (isShortcut(file)) { - console.log('isShortcut') - console.log({ file }) // generate external file <= // DO NOTHING } else if (isFile(file)) { @@ -138,7 +134,7 @@ const FileOpener = ({ } return ( - Date: Tue, 15 Feb 2022 17:08:44 +0100 Subject: [PATCH 03/11] refactor(navigate): extract route navigation out of Views components --- src/drive/web/modules/views/Drive/index.jsx | 8 ++++++-- src/drive/web/modules/views/Public/index.jsx | 3 ++- src/drive/web/modules/views/Recent/index.jsx | 7 +++++-- src/drive/web/modules/views/Sharings/index.jsx | 7 +++++-- src/drive/web/modules/views/Trash/TrashFolderView.jsx | 8 ++++++-- 5 files changed, 24 insertions(+), 9 deletions(-) diff --git a/src/drive/web/modules/views/Drive/index.jsx b/src/drive/web/modules/views/Drive/index.jsx index 644814383c..3e6df6bd99 100644 --- a/src/drive/web/modules/views/Drive/index.jsx +++ b/src/drive/web/modules/views/Drive/index.jsx @@ -53,6 +53,10 @@ import AddMenuProvider from 'drive/web/modules/drive/AddMenu/AddMenuProvider' const desktopExtraColumnsNames = ['carbonCopy', 'electronicSafe'] const mobileExtraColumnsNames = [] +const folderUrlToNavigate = folderId => `/folder/${folderId}` +const fileUrlToNavigate = currentFolderId => file => + `/folder/${currentFolderId}/file/${file.id}` + const DriveView = ({ currentFolderId, router, @@ -105,14 +109,14 @@ const DriveView = ({ const navigateToFolder = useCallback( folderId => { - router.push(`/folder/${folderId}`) + router.push(folderUrlToNavigate(folderId)) }, [router] ) const navigateToFile = useCallback( file => { - router.push(`/folder/${currentFolderId}/file/${file.id}`) + router.push(fileUrlToNavigate(currentFolderId)(file)) }, [router, currentFolderId] ) diff --git a/src/drive/web/modules/views/Public/index.jsx b/src/drive/web/modules/views/Public/index.jsx index 0c85a4a2d0..c37610dd12 100644 --- a/src/drive/web/modules/views/Public/index.jsx +++ b/src/drive/web/modules/views/Public/index.jsx @@ -62,6 +62,7 @@ const getBreadcrumbPath = (t, displayedFolder, parentFolder) => const desktopExtraColumnsNames = ['carbonCopy', 'electronicSafe'] const mobileExtraColumnsNames = [] +const folderUrlToNavigate = folderId => `/folder/${folderId}` const PublicFolderView = ({ currentFolderId, @@ -101,7 +102,7 @@ const PublicFolderView = ({ const navigateToFolder = useCallback( folderId => { - router.push(`/folder/${folderId}`) + router.push(folderUrlToNavigate(folderId)) }, [router] ) diff --git a/src/drive/web/modules/views/Recent/index.jsx b/src/drive/web/modules/views/Recent/index.jsx index 6929c3fadb..9e57e7568f 100644 --- a/src/drive/web/modules/views/Recent/index.jsx +++ b/src/drive/web/modules/views/Recent/index.jsx @@ -35,6 +35,9 @@ import { makeExtraColumnsNamesFromMedia } from 'drive/web/modules/certifications const desktopExtraColumnsNames = ['carbonCopy', 'electronicSafe'] const mobileExtraColumnsNames = [] +const folderUrlToNavigate = folderId => `/folder/${folderId}` +const fileUrlToNavigate = file => `/recent/file/${file.id}` + export const RecentView = ({ router, location, children }) => { const { t } = useI18n() const { isMobile } = useBreakpoints() @@ -55,14 +58,14 @@ export const RecentView = ({ router, location, children }) => { const navigateToFolder = useCallback( folderId => { - router.push(`/folder/${folderId}`) + router.push(folderUrlToNavigate(folderId)) }, [router] ) const navigateToFile = useCallback( file => { - router.push(`/recent/file/${file.id}`) + router.push(fileUrlToNavigate(file)) }, [router] ) diff --git a/src/drive/web/modules/views/Sharings/index.jsx b/src/drive/web/modules/views/Sharings/index.jsx index ee254c5e7b..6fdd33503e 100644 --- a/src/drive/web/modules/views/Sharings/index.jsx +++ b/src/drive/web/modules/views/Sharings/index.jsx @@ -37,6 +37,9 @@ import FileListRowsPlaceholder from 'drive/web/modules/filelist/FileListRowsPlac const desktopExtraColumnsNames = ['carbonCopy', 'electronicSafe'] const mobileExtraColumnsNames = [] +const folderUrlToNavigate = folderId => `/sharings/${folderId}` +const fileUrlToNavigate = file => `/sharings/file/${file.id}` + export const SharingsView = ({ router, location, @@ -67,14 +70,14 @@ export const SharingsView = ({ const navigateToFolder = useCallback( folderId => { - router.push(`/sharings/${folderId}`) + router.push(folderUrlToNavigate(folderId)) }, [router] ) const navigateToFile = useCallback( file => { - router.push(`/sharings/file/${file.id}`) + router.push(fileUrlToNavigate(file)) }, [router] ) diff --git a/src/drive/web/modules/views/Trash/TrashFolderView.jsx b/src/drive/web/modules/views/Trash/TrashFolderView.jsx index c300e5b863..27183eaa9b 100644 --- a/src/drive/web/modules/views/Trash/TrashFolderView.jsx +++ b/src/drive/web/modules/views/Trash/TrashFolderView.jsx @@ -31,6 +31,10 @@ import FolderViewBreadcrumb from '../Folder/FolderViewBreadcrumb' const desktopExtraColumnsNames = ['carbonCopy', 'electronicSafe'] const mobileExtraColumnsNames = [] +const folderUrlToNavigate = folderId => `/trash/${folderId}` +const fileUrlToNavigate = currentFolderId => file => + `/trash/${currentFolderId}/file/${file.id}` + const TrashFolderView = ({ currentFolderId, displayedFolder, @@ -72,14 +76,14 @@ const TrashFolderView = ({ const navigateToFolder = useCallback( folderId => { - router.push(`/trash/${folderId}`) + router.push(folderUrlToNavigate(folderId)) }, [router] ) const navigateToFile = useCallback( file => { - router.push(`/trash/${currentFolderId}/file/${file.id}`) + router.push(fileUrlToNavigate(currentFolderId)(file)) }, [router, currentFolderId] ) From b13cddd8233cefb34105a8fc89672f109785b130 Mon Sep 17 00:00:00 2001 From: Pierre Cozy Date: Tue, 15 Feb 2022 17:11:06 +0100 Subject: [PATCH 04/11] refactor(public): public page navigate file does not handle notes note files are handled in createFileOpeningHandlers --- src/drive/web/modules/views/Public/index.jsx | 20 ++------------------ 1 file changed, 2 insertions(+), 18 deletions(-) diff --git a/src/drive/web/modules/views/Public/index.jsx b/src/drive/web/modules/views/Public/index.jsx index c37610dd12..ec4c9e9eb8 100644 --- a/src/drive/web/modules/views/Public/index.jsx +++ b/src/drive/web/modules/views/Public/index.jsx @@ -8,10 +8,8 @@ import uniqBy from 'lodash/uniqBy' import { useClient, models } from 'cozy-client' import { SharingContext } from 'cozy-sharing' -import { isMobileApp } from 'cozy-device-helper' import { useI18n } from 'cozy-ui/transpiled/react/I18n' import { Content, Overlay } from 'cozy-ui/transpiled/react' -import Alerter from 'cozy-ui/transpiled/react/Alerter' import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints' import { SharingBannerPlugin, useSharingInfos } from 'cozy-sharing' @@ -108,22 +106,8 @@ const PublicFolderView = ({ ) const navigateToFile = async file => { - const isNote = models.file.isNote(file) - if (isNote) { - try { - const noteUrl = await models.note.fetchURL(client, file) - const url = new URL(noteUrl) - if (!isMobileApp()) { - url.searchParams.set('returnUrl', window.location.href) - } - window.location.href = url.toString() - } catch (e) { - Alerter.error('alert.offline') - } - } else { - showInViewer(file) - setViewerOpened(true) - } + showInViewer(file) + setViewerOpened(true) } const showInViewer = useCallback( From 210ddde85c99a0d91c9f8541625149966251b92f Mon Sep 17 00:00:00 2001 From: Cozy Pierre Date: Tue, 22 Feb 2022 18:17:15 +0100 Subject: [PATCH 05/11] refactor(opening): Use fileUrlToNavigate in Views --- src/drive/web/modules/filelist/File.jsx | 11 +++- src/drive/web/modules/filelist/FileOpener.jsx | 3 + src/drive/web/modules/views/Drive/index.jsx | 2 + .../modules/views/Folder/FolderViewBody.jsx | 10 +++- .../views/Folder/createFileOpeningHandler.js | 60 ++++++++++++------- src/drive/web/modules/views/Public/index.jsx | 1 + src/drive/web/modules/views/Recent/index.jsx | 2 + .../web/modules/views/Sharings/index.jsx | 2 + .../modules/views/Trash/TrashFolderView.jsx | 2 + 9 files changed, 68 insertions(+), 25 deletions(-) diff --git a/src/drive/web/modules/filelist/File.jsx b/src/drive/web/modules/filelist/File.jsx index 3fa3bf1050..92fe7ce49b 100644 --- a/src/drive/web/modules/filelist/File.jsx +++ b/src/drive/web/modules/filelist/File.jsx @@ -62,12 +62,19 @@ const File = props => { } const open = (event, attributes) => { - const { onFolderOpen, onFileOpen, isAvailableOffline } = props + const { + onFolderOpen, + onFileOpen, + isAvailableOffline, + folderUrlToNavigate + } = props event.stopPropagation() if (isDirectory(attributes)) { if (event.ctrlKey || event.metaKey || event.shiftKey) { const openInNewTab = url => window.open(url, '_blank') - openInNewTab(`/#/folder/${attributes.id}`) + const folderUrl = + folderUrlToNavigate(attributes.id) || `/folder/${attributes.id}` + openInNewTab(`/#${folderUrl}`) } else { onFolderOpen(attributes.id) } diff --git a/src/drive/web/modules/filelist/FileOpener.jsx b/src/drive/web/modules/filelist/FileOpener.jsx index 5b2ba4412a..3ff9a5e090 100644 --- a/src/drive/web/modules/filelist/FileOpener.jsx +++ b/src/drive/web/modules/filelist/FileOpener.jsx @@ -66,6 +66,8 @@ const FileOpener = ({ const gesturesHandler = propagating(new Hammer(rowRef.current)) gesturesHandler.on('tap press singletap', ev => { + console.log('tap press singletap') + if (actionMenuVisible || disabled) return if (enableTouchEvents(ev)) { ev.preventDefault() // prevent a ghost click @@ -74,6 +76,7 @@ const FileOpener = ({ toggle(ev.srcEvent) } else { ev.srcEvent.stopImmediatePropagation() + console.log('open') if (!isRenaming) open(ev.srcEvent, file) } } diff --git a/src/drive/web/modules/views/Drive/index.jsx b/src/drive/web/modules/views/Drive/index.jsx index 3e6df6bd99..96324e1c3c 100644 --- a/src/drive/web/modules/views/Drive/index.jsx +++ b/src/drive/web/modules/views/Drive/index.jsx @@ -206,6 +206,8 @@ const DriveView = ({ { const { router } = useRouter() const { isDesktop } = useBreakpoints() @@ -79,7 +81,8 @@ const FolderViewBody = ({ replaceCurrentUrl: url => (window.location.href = url), openInNewTab: url => window.open(url, '_blank'), routeTo: url => router.push(url), - isOnlyOfficeEnabled: isOnlyOfficeEnabled() + isOnlyOfficeEnabled: isOnlyOfficeEnabled(), + fileUrlToNavigate })({ event, file, @@ -185,7 +188,7 @@ const FolderViewBody = ({ {/* TODO FolderViewBody should not have the responsability to chose which empty component to display. It should be done by the "view" itself. But adding a new prop like )} @@ -214,6 +217,7 @@ const FolderViewBody = ({ attributes={file} withSelectionCheckbox onFolderOpen={navigateToFolder} + folderUrlToNavigate={folderUrlToNavigate} onFileOpen={handleFileOpen} withFilePath={withFilePath} thumbnailSizeBig={isBigThumbnail} diff --git a/src/drive/web/modules/views/Folder/createFileOpeningHandler.js b/src/drive/web/modules/views/Folder/createFileOpeningHandler.js index d6a4a10c29..7398ce612b 100644 --- a/src/drive/web/modules/views/Folder/createFileOpeningHandler.js +++ b/src/drive/web/modules/views/Folder/createFileOpeningHandler.js @@ -15,9 +15,18 @@ const createFileOpeningHandler = ({ replaceCurrentUrl, openInNewTab, routeTo, - isOnlyOfficeEnabled + isOnlyOfficeEnabled, + fileUrlToNavigate }) => async ({ event, file, isAvailableOffline }) => { + const fileUrl = + fileUrlToNavigate(file.dir_id)(file) || + `/folder/${file.dir_id}/file/${file.id}` + + console.log('createFileOpeningHandler') + if (isAvailableOffline) { + console.log('isAvailableOffline') + return dispatch(openLocalFile(client, file)) } @@ -25,7 +34,11 @@ const createFileOpeningHandler = ({ const isShortcut = models.file.isShortcut(file) const isOnlyOffice = models.file.shouldBeOpenedByOnlyOffice(file) + console.log('super') + const shouldOpenInNewTab = event.ctrlKey || event.metaKey || event.shiftKey + if (isShortcut) { + console.log('isShortcut') if (isMobileApp()) { try { const resp = await client.query( @@ -39,28 +52,35 @@ const createFileOpeningHandler = ({ const url = generateShortcutUrl({ file, client, isFlatDomain }) openInNewTab(url) } - } else if (isNote) { - try { - const routeToNote = await models.note.fetchURL(client, file) - if (event.ctrlKey || event.metaKey || event.shiftKey) { - openInNewTab(routeToNote) + } else { + if (isNote) { + console.log('isNote') + try { + const routeToNote = await models.note.fetchURL(client, file) + if (shouldOpenInNewTab) { + openInNewTab(routeToNote) + } else { + replaceCurrentUrl(routeToNote) + } + } catch (e) { + Alerter.error('alert.offline') + } + } else if (isOnlyOffice && isOnlyOfficeEnabled) { + console.log('isOnlyOffice') + if (shouldOpenInNewTab) { + openInNewTab(makeOnlyOfficeFileRoute(file)) } else { - replaceCurrentUrl(routeToNote) + routeTo(makeOnlyOfficeFileRoute(file, true)) } - } catch (e) { - Alerter.error('alert.offline') - } - } else if (isOnlyOffice && isOnlyOfficeEnabled) { - if (event.ctrlKey || event.metaKey || event.shiftKey) { - openInNewTab(makeOnlyOfficeFileRoute(file)) - } else { - routeTo(makeOnlyOfficeFileRoute(file, true)) - } - } else { - if (event.ctrlKey || event.metaKey || event.shiftKey) { - openInNewTab(`/#/folder/${file.dir_id}/file/${file.id}`) } else { - navigateToFile(file) + console.log('here') + if (shouldOpenInNewTab) { + console.log('shouldOpenInNewTab') + openInNewTab(`/#${fileUrl}`) + } else { + console.log('should not OpenInNewTab') + navigateToFile(file) + } } } } diff --git a/src/drive/web/modules/views/Public/index.jsx b/src/drive/web/modules/views/Public/index.jsx index ec4c9e9eb8..9390b6bb7e 100644 --- a/src/drive/web/modules/views/Public/index.jsx +++ b/src/drive/web/modules/views/Public/index.jsx @@ -214,6 +214,7 @@ const PublicFolderView = ({ { Date: Tue, 22 Feb 2022 18:28:04 +0100 Subject: [PATCH 06/11] debug --- src/drive/web/modules/filelist/FileOpener.jsx | 11 ++++++++++- src/drive/web/modules/views/Folder/FolderViewBody.jsx | 1 + .../modules/views/Folder/createFileOpeningHandler.js | 5 ++++- src/drive/web/modules/views/Recent/index.jsx | 2 +- 4 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/drive/web/modules/filelist/FileOpener.jsx b/src/drive/web/modules/filelist/FileOpener.jsx index 3ff9a5e090..397301f375 100644 --- a/src/drive/web/modules/filelist/FileOpener.jsx +++ b/src/drive/web/modules/filelist/FileOpener.jsx @@ -30,6 +30,8 @@ export const getParentLink = element => { const enableTouchEvents = ev => { // remove event when you rename a file if (['INPUT', 'BUTTON'].indexOf(ev.target.nodeName) !== -1) { + console.log('case 1') + return false } @@ -39,11 +41,15 @@ const enableTouchEvents = ev => { parentDiv.className.indexOf(styles['fil-content-file-select']) !== -1 || parentDiv.className.indexOf(styles['fil-content-file-action']) !== -1 ) { + console.log('case 2') return false } // Check if the clicked element is a file path, in that case the FileOpener has nothing to handle - if (ev.srcEvent.target.closest('[class^="fil-file-path"]')) return false + if (ev.srcEvent.target.closest('[class^="fil-file-path"]')) { + console.log('case 3') + return false + } return true } @@ -69,9 +75,12 @@ const FileOpener = ({ console.log('tap press singletap') if (actionMenuVisible || disabled) return + console.log('RETURN PASSE') if (enableTouchEvents(ev)) { + console.log('TOUCH EVENT ENABLE') ev.preventDefault() // prevent a ghost click if (ev.type === 'press' || selectionModeActive) { + console.log('PRESS') ev.srcEvent.stopImmediatePropagation() toggle(ev.srcEvent) } else { diff --git a/src/drive/web/modules/views/Folder/FolderViewBody.jsx b/src/drive/web/modules/views/Folder/FolderViewBody.jsx index c780554a7e..e026fc8a13 100644 --- a/src/drive/web/modules/views/Folder/FolderViewBody.jsx +++ b/src/drive/web/modules/views/Folder/FolderViewBody.jsx @@ -73,6 +73,7 @@ const FolderViewBody = ({ const handleFileOpen = useCallback( ({ event, file, isAvailableOffline }) => { + console.log('handleFileOpen') return createFileOpeningHandler({ client, isFlatDomain, diff --git a/src/drive/web/modules/views/Folder/createFileOpeningHandler.js b/src/drive/web/modules/views/Folder/createFileOpeningHandler.js index 7398ce612b..b54719347d 100644 --- a/src/drive/web/modules/views/Folder/createFileOpeningHandler.js +++ b/src/drive/web/modules/views/Folder/createFileOpeningHandler.js @@ -18,11 +18,12 @@ const createFileOpeningHandler = ({ isOnlyOfficeEnabled, fileUrlToNavigate }) => async ({ event, file, isAvailableOffline }) => { + console.log('createFileOpeningHandler') const fileUrl = fileUrlToNavigate(file.dir_id)(file) || `/folder/${file.dir_id}/file/${file.id}` - console.log('createFileOpeningHandler') + console.log('fireUrl') if (isAvailableOffline) { console.log('isAvailableOffline') @@ -58,8 +59,10 @@ const createFileOpeningHandler = ({ try { const routeToNote = await models.note.fetchURL(client, file) if (shouldOpenInNewTab) { + console.log('shouldOpenInNewTab') openInNewTab(routeToNote) } else { + console.log('should NOT OpenInNewTab') replaceCurrentUrl(routeToNote) } } catch (e) { diff --git a/src/drive/web/modules/views/Recent/index.jsx b/src/drive/web/modules/views/Recent/index.jsx index 48889a6f48..4f7023499d 100644 --- a/src/drive/web/modules/views/Recent/index.jsx +++ b/src/drive/web/modules/views/Recent/index.jsx @@ -36,7 +36,7 @@ const desktopExtraColumnsNames = ['carbonCopy', 'electronicSafe'] const mobileExtraColumnsNames = [] const folderUrlToNavigate = folderId => `/folder/${folderId}` -const fileUrlToNavigate = file => `/recent/file/${file.id}` +const fileUrlToNavigate = () => file => `/recent/file/${file.id}` export const RecentView = ({ router, location, children }) => { const { t } = useI18n() From c8706a5ba069232f6cf83578a6626d6e40e27d34 Mon Sep 17 00:00:00 2001 From: Cozy Pierre Date: Wed, 23 Feb 2022 15:04:13 +0100 Subject: [PATCH 07/11] fix(opening): fix trash, recent, sharing views --- src/drive/web/modules/filelist/File.jsx | 7 ++++++- src/drive/web/modules/filelist/FileOpener.jsx | 21 +++++++++---------- .../web/modules/filelist/cells/FileName.jsx | 11 +++++----- .../modules/views/Folder/FolderViewBody.jsx | 1 + .../views/Sharings/SharingsFolderView.jsx | 12 ++++++++--- .../web/modules/views/Sharings/index.jsx | 2 +- 6 files changed, 32 insertions(+), 22 deletions(-) diff --git a/src/drive/web/modules/filelist/File.jsx b/src/drive/web/modules/filelist/File.jsx index 92fe7ce49b..21320a5104 100644 --- a/src/drive/web/modules/filelist/File.jsx +++ b/src/drive/web/modules/filelist/File.jsx @@ -104,7 +104,9 @@ const File = props => { refreshFolderContent, isInSyncFromSharing, extraColumns, - breakpoints: { isExtraLarge, isMobile } + breakpoints: { isExtraLarge, isMobile }, + fileUrlToNavigate, + folderUrlToNavigate } = props const isImage = attributes.class === 'image' @@ -144,6 +146,8 @@ const File = props => { open={open} toggle={toggle} isRenaming={isRenaming} + fileUrlToNavigate={fileUrlToNavigate} + folderUrlToNavigate={folderUrlToNavigate} > { formattedUpdatedAt={formattedUpdatedAt} refreshFolderContent={refreshFolderContent} isInSyncFromSharing={isInSyncFromSharing} + folderUrlToNavigate={folderUrlToNavigate} /> { const enableTouchEvents = ev => { // remove event when you rename a file if (['INPUT', 'BUTTON'].indexOf(ev.target.nodeName) !== -1) { - console.log('case 1') - return false } @@ -41,15 +39,14 @@ const enableTouchEvents = ev => { parentDiv.className.indexOf(styles['fil-content-file-select']) !== -1 || parentDiv.className.indexOf(styles['fil-content-file-action']) !== -1 ) { - console.log('case 2') return false } - // Check if the clicked element is a file path, in that case the FileOpener has nothing to handle - if (ev.srcEvent.target.closest('[class^="fil-file-path"]')) { - console.log('case 3') - return false - } + // // Check if the clicked element is a file path, in that case the FileOpener has nothing to handle + // if (ev.srcEvent.target.closest('[class^="fil-file-path"]')) { + // console.log('case 3') + // return false + // } return true } @@ -62,7 +59,9 @@ const FileOpener = ({ open, selectionModeActive, isRenaming, - children + children, + folderUrlToNavigate, + fileUrlToNavigate }) => { const rowRef = useRef() @@ -129,7 +128,7 @@ const FileOpener = ({ const isNote = file => file.name.endsWith('.cozy-note') let buildHref = '' if (isFolder(file)) { - buildHref = `/#/folder/${file.id}` + buildHref = `/#${folderUrlToNavigate(file.id)}` } else if (isNote(file)) { // DO NOTHING // http://drive.cozy.localhost:8080/#/folder/io.cozy.files.root-dir/file/682e64b839470826fda67a4abc022ff4 @@ -138,7 +137,7 @@ const FileOpener = ({ // generate external file <= // DO NOTHING } else if (isFile(file)) { - buildHref = `/#/folder/${file.dir_id}/file/${file.id}` + buildHref = `/#${fileUrlToNavigate(file.dir_id)(file)}` } else { console.log('NOT FILE') console.log({ file }) diff --git a/src/drive/web/modules/filelist/cells/FileName.jsx b/src/drive/web/modules/filelist/cells/FileName.jsx index cac6ffc623..6a91165d93 100644 --- a/src/drive/web/modules/filelist/cells/FileName.jsx +++ b/src/drive/web/modules/filelist/cells/FileName.jsx @@ -1,6 +1,5 @@ import React, { useCallback } from 'react' import cx from 'classnames' -import { Link } from 'react-router' import get from 'lodash/get' import { useClient } from 'cozy-client' @@ -81,7 +80,8 @@ const FileName = ({ formattedSize, formattedUpdatedAt, refreshFolderContent, - isInSyncFromSharing + isInSyncFromSharing, + folderUrlToNavigate }) => { const classes = cx( styles['fil-content-cell'], @@ -128,13 +128,12 @@ const FileName = ({ ) : ( - - + ))} {!withFilePath && (isDirectory(attributes) || ( diff --git a/src/drive/web/modules/views/Folder/FolderViewBody.jsx b/src/drive/web/modules/views/Folder/FolderViewBody.jsx index e026fc8a13..d2b4b74471 100644 --- a/src/drive/web/modules/views/Folder/FolderViewBody.jsx +++ b/src/drive/web/modules/views/Folder/FolderViewBody.jsx @@ -218,6 +218,7 @@ const FolderViewBody = ({ attributes={file} withSelectionCheckbox onFolderOpen={navigateToFolder} + fileUrlToNavigate={fileUrlToNavigate} folderUrlToNavigate={folderUrlToNavigate} onFileOpen={handleFileOpen} withFilePath={withFilePath} diff --git a/src/drive/web/modules/views/Sharings/SharingsFolderView.jsx b/src/drive/web/modules/views/Sharings/SharingsFolderView.jsx index 0dfb0efcb1..3795933d69 100644 --- a/src/drive/web/modules/views/Sharings/SharingsFolderView.jsx +++ b/src/drive/web/modules/views/Sharings/SharingsFolderView.jsx @@ -34,6 +34,11 @@ import FolderViewBreadcrumb from '../Folder/FolderViewBreadcrumb' import { useExtraColumns } from 'drive/web/modules/certifications/useExtraColumns' import { makeExtraColumnsNamesFromMedia } from 'drive/web/modules/certifications' +const folderUrlToNavigate = folderId => + folderId ? `/sharings/${folderId}` : '/sharings' +const fileUrlToNavigate = currentFolderId => file => + `/sharings/${currentFolderId}/file/${file.id}` + const desktopExtraColumnsNames = ['carbonCopy', 'electronicSafe'] const mobileExtraColumnsNames = [] @@ -77,15 +82,14 @@ const SharingsFolderView = ({ const navigateToFolder = useCallback( folderId => { - if (folderId) router.push(`/sharings/${folderId}`) - else router.push('/sharings') + router.push(folderUrlToNavigate(folderId)) }, [router] ) const navigateToFile = useCallback( file => { - router.push(`/sharings/${currentFolderId}/file/${file.id}`) + router.push(fileUrlToNavigate(currentFolderId)(file)) }, [router, currentFolderId] ) @@ -132,6 +136,8 @@ const SharingsFolderView = ({ `/sharings/${folderId}` -const fileUrlToNavigate = file => `/sharings/file/${file.id}` +const fileUrlToNavigate = () => file => `/sharings/file/${file.id}` export const SharingsView = ({ router, From 9c91cea0d18b531c8fcd8d02e98f71d9cbb22b0d Mon Sep 17 00:00:00 2001 From: Cozy Pierre Date: Wed, 23 Feb 2022 17:16:58 +0100 Subject: [PATCH 08/11] refactor(FileOpener): remove unused function --- src/drive/web/modules/filelist/FileOpener.jsx | 12 --------- .../web/modules/filelist/FileOpener.spec.jsx | 25 +------------------ 2 files changed, 1 insertion(+), 36 deletions(-) diff --git a/src/drive/web/modules/filelist/FileOpener.jsx b/src/drive/web/modules/filelist/FileOpener.jsx index 242b30e6fb..ba95c14f52 100644 --- a/src/drive/web/modules/filelist/FileOpener.jsx +++ b/src/drive/web/modules/filelist/FileOpener.jsx @@ -15,18 +15,6 @@ const getParentDiv = element => { return getParentDiv(element.parentNode) } -export const getParentLink = element => { - if (!element) { - return null - } - - if (element.nodeName.toLowerCase() === 'a') { - return element - } - - return getParentLink(element.parentNode) -} - const enableTouchEvents = ev => { // remove event when you rename a file if (['INPUT', 'BUTTON'].indexOf(ev.target.nodeName) !== -1) { diff --git a/src/drive/web/modules/filelist/FileOpener.spec.jsx b/src/drive/web/modules/filelist/FileOpener.spec.jsx index 812375050c..10f5f1f4b0 100644 --- a/src/drive/web/modules/filelist/FileOpener.spec.jsx +++ b/src/drive/web/modules/filelist/FileOpener.spec.jsx @@ -8,7 +8,7 @@ import { shouldBeOpenedByOnlyOffice } from 'cozy-client/dist/models/file' import AppLike from 'test/components/AppLike' import { generateFile } from 'test/generate' -import FileOpener, { getParentLink } from './FileOpener' +import FileOpener from './FileOpener' jest.mock('cozy-client/dist/models/file', () => ({ ...jest.requireActual('cozy-client/dist/models/file'), @@ -49,26 +49,3 @@ describe('FileOpener', () => { expect(queryByTestId('not-onlyoffice-span')).toBeTruthy() }) }) - -describe('getParentLink function', () => { - it('should return the first link in the element ancestors', () => { - const div = document.createElement('div') - const link = document.createElement('a') - link.className = 'my-link' - const span = document.createElement('span') - const span2 = document.createElement('span') - div.appendChild(link) - link.appendChild(span) - span.appendChild(span2) - const result = getParentLink(span2) - expect(result).toEqual(link) - }) - - it('should return null if there is no link in the element ancestors', () => { - const div = document.createElement('div') - const span = document.createElement('span') - div.appendChild(span) - const result = getParentLink(span) - expect(result).toBeNull() - }) -}) From 4314cc66b86cd4c4ed6ef4ce33d4dd751f5f29fd Mon Sep 17 00:00:00 2001 From: Cozy Pierre Date: Wed, 23 Feb 2022 17:33:47 +0100 Subject: [PATCH 09/11] fix(opening): fix recent views on click on folder midellipsis --- src/drive/web/modules/filelist/File.jsx | 5 +++++ src/drive/web/modules/filelist/FileOpener.jsx | 12 +++++++----- src/drive/web/modules/filelist/cells/FileName.jsx | 8 +++++++- 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/drive/web/modules/filelist/File.jsx b/src/drive/web/modules/filelist/File.jsx index 21320a5104..8d32693601 100644 --- a/src/drive/web/modules/filelist/File.jsx +++ b/src/drive/web/modules/filelist/File.jsx @@ -62,6 +62,8 @@ const File = props => { } const open = (event, attributes) => { + console.log('open') + const { onFolderOpen, onFileOpen, @@ -70,6 +72,8 @@ const File = props => { } = props event.stopPropagation() if (isDirectory(attributes)) { + console.log('is directory') + if (event.ctrlKey || event.metaKey || event.shiftKey) { const openInNewTab = url => window.open(url, '_blank') const folderUrl = @@ -165,6 +169,7 @@ const File = props => { refreshFolderContent={refreshFolderContent} isInSyncFromSharing={isInSyncFromSharing} folderUrlToNavigate={folderUrlToNavigate} + open={open} /> { return false } - // // Check if the clicked element is a file path, in that case the FileOpener has nothing to handle - // if (ev.srcEvent.target.closest('[class^="fil-file-path"]')) { - // console.log('case 3') - // return false - // } + // Check if the clicked element is a file path, in that case the FileOpener has nothing to handle + if (ev.srcEvent.target.closest('[class^="fil-file-path"]')) { + console.log('case 3') + return false + } return true } @@ -140,6 +140,8 @@ const FileOpener = ({ id={file.id} href={buildHref} onClick={ev => { + console.log('on click file opener') + ev.preventDefault() }} > diff --git a/src/drive/web/modules/filelist/cells/FileName.jsx b/src/drive/web/modules/filelist/cells/FileName.jsx index 6a91165d93..cfee043eb9 100644 --- a/src/drive/web/modules/filelist/cells/FileName.jsx +++ b/src/drive/web/modules/filelist/cells/FileName.jsx @@ -81,7 +81,8 @@ const FileName = ({ formattedUpdatedAt, refreshFolderContent, isInSyncFromSharing, - folderUrlToNavigate + folderUrlToNavigate, + open }) => { const classes = cx( styles['fil-content-cell'], @@ -131,6 +132,11 @@ const FileName = ({ { + ev.preventDefault() + console.log('on click') + open(ev, { type: 'directory', id: attributes.dir_id }) + }} > From 489f8a2c32e7686abf812850c226a10fb3338d96 Mon Sep 17 00:00:00 2001 From: Cozy Pierre Date: Wed, 23 Feb 2022 17:44:31 +0100 Subject: [PATCH 10/11] fix(opening): in sharing index, some files don't have attributes --- src/drive/web/modules/filelist/FileOpener.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/drive/web/modules/filelist/FileOpener.jsx b/src/drive/web/modules/filelist/FileOpener.jsx index 641bc4723e..445a9e3643 100644 --- a/src/drive/web/modules/filelist/FileOpener.jsx +++ b/src/drive/web/modules/filelist/FileOpener.jsx @@ -111,7 +111,9 @@ const FileOpener = ({ const isFolder = file => file.attributes && file.attributes.type === 'directory' - const isFile = file => file.attributes && file.attributes.type === 'file' + const isFile = file => + (file.attributes && file.attributes.type === 'file') || + file._type === 'io.cozy.files' const isShortcut = file => file.class === 'shortcut' const isNote = file => file.name.endsWith('.cozy-note') let buildHref = '' @@ -129,6 +131,7 @@ const FileOpener = ({ } else { console.log('NOT FILE') console.log({ file }) + console.log('file._type, ', file._type) buildHref = '' } From 5ca4236cceb497607446e7da2b2258d921a2e7b9 Mon Sep 17 00:00:00 2001 From: Cozy Pierre Date: Wed, 23 Feb 2022 17:49:28 +0100 Subject: [PATCH 11/11] fix(opening): validate dom nesting, no anchor inside anchor --- src/drive/web/modules/filelist/cells/FileName.jsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/drive/web/modules/filelist/cells/FileName.jsx b/src/drive/web/modules/filelist/cells/FileName.jsx index cfee043eb9..80ea94e521 100644 --- a/src/drive/web/modules/filelist/cells/FileName.jsx +++ b/src/drive/web/modules/filelist/cells/FileName.jsx @@ -129,8 +129,7 @@ const FileName = ({ ) : ( - { ev.preventDefault() @@ -139,7 +138,7 @@ const FileName = ({ }} > - + ))} {!withFilePath && (isDirectory(attributes) || (