feat: Implement highlight new items ✨

- New items are added to a list when a new upload is in progress.
- cozy-ui check if the item rendered is part of the list

Use UploadProvider :
- Add the function addNewItem in parameters when using old redux thunk actions
- Clear the newItems list when :
	- Dragging items
	- Selecting an item
	- Passing from a folder to another

test: correct the tests because we're using a uploadProvider

fix(AddMenuContent): wrap UploadItem with UploadProvider for context

fix(AddFolder): integrate UploadContext to handle the highlight of new folders

fix(UploadProvider): optimize functions with useCallback

Prevents functions from changing on every render. This avoids infinite loops and crashes

style: correct the lint

resolve conflict

chore: Upgrade cozy-ui to 130.5.0 ⬆️

fix: Resolve comments in PR 🎨

fix: Resolve incorrect mocking module :✅

feat: Apply highlight new items into grid view :spakles:

feat: Add feature flag ✨

chore: Upgrade version of cozy-ui to 130.7.0 ⬆️

feat: Clear highlighted items when using long press ✨

style: Change the way apply feature flag 🎨

fix: Resolve failed test cases 🐛

Author: erika

jestHelpers/setup.js

@@ -19,5 +19,21 @@ jest.mock('cozy-dataproxy-lib', () => ({
   DataProxyProvider: ({ children }) => children
 }))
 
+// Mock cozy-flags with jest mock function that supports both flag checking and test mocking
+jest.mock('cozy-flags', () => {
+  const mockFn = jest.fn(flagName => {
+    if (flagName === 'drive.highlight-new-items.enabled') {
+      return true
+    }
+    // Return false for all other flags to avoid issues
+    return false
+  })
+
+  // Add initialize method that some tests expect
+  mockFn.initialize = jest.fn()
+
+  return mockFn
+})
+
 // see https://github.com/jsdom/jsdom/issues/1695
 window.HTMLElement.prototype.scroll = function () {}

src/hooks/useDisplayedFolder.spec.jsx

@@ -2,6 +2,7 @@ import { useQuery } from 'cozy-client'
 
 import useCurrentFolderId from './useCurrentFolderId'
 import useDisplayedFolder from './useDisplayedFolder'
+
 import { ROOT_DIR_ID } from '@/constants/config'
 
 jest.mock('cozy-client', () => ({

src/hooks/useDisplayedFolder.tsx

@@ -1,9 +1,9 @@
 import { useQuery } from 'cozy-client'
 import { IOCozyFile } from 'cozy-client/types/types'
 
+import { ROOT_DIR_ID } from '@/constants/config'
 import useCurrentFolderId from '@/hooks/useCurrentFolderId'
 import { buildFileOrFolderByIdQuery } from '@/queries'
-import { ROOT_DIR_ID } from '@/constants/config'
 
 interface DisplayedFolderResult {
   isNotFound: boolean

src/hooks/useOnLongPress/helpers.js

@@ -14,13 +14,16 @@ export const handleClick = ({
   setLastClickTime,
   setSelectedItems,
   setLastSelectedIndex,
-  setFocusedIndex
+  setFocusedIndex,
+  clearHighlightedItems
 }) => {
   // if default behavior is opening a file, it blocks that to force other bahavior
   event.preventDefault()
 
   if (disabled || isRenaming) return
 
+  clearHighlightedItems?.()
+
   // simply remove this "if" the flag is not necessary anymore
   if (!flag('drive.doubleclick.enabled')) {
     if (selectionModeActive) {
@@ -60,7 +63,8 @@ export const makeDesktopHandlers = ({
   clearSelection,
   setSelectedItems,
   setLastSelectedIndex,
-  setFocusedIndex
+  setFocusedIndex,
+  clearHighlightedItems
 }) => {
   return {
     // first event triggered on Desktop
@@ -82,7 +86,8 @@ export const makeDesktopHandlers = ({
         clearSelection,
         setSelectedItems,
         setLastSelectedIndex,
-        setFocusedIndex
+        setFocusedIndex,
+        clearHighlightedItems
       })
   }
 }
@@ -94,7 +99,8 @@ export const handlePress = ({
   isLongPress,
   isRenaming,
   openLink,
-  toggle
+  toggle,
+  clearHighlightedItems
 }) => {
   // if default behavior is opening a file, it blocks that to force other bahavior
   event.preventDefault()
@@ -108,6 +114,8 @@ export const handlePress = ({
   } else {
     openLink(event)
   }
+
+  clearHighlightedItems?.()
 }
 
 export const makeMobileHandlers = ({
@@ -117,7 +125,8 @@ export const makeMobileHandlers = ({
   isRenaming,
   isLongPress,
   openLink,
-  toggle
+  toggle,
+  clearHighlightedItems
 }) => {
   // used to determine if it's a longpress
   // i.e. delay onClick
@@ -148,7 +157,8 @@ export const makeMobileHandlers = ({
         isLongPress,
         isRenaming,
         openLink,
-        toggle
+        toggle,
+        clearHighlightedItems
       })
   }
 }

src/hooks/useOnLongPress/index.js

@@ -5,6 +5,7 @@ import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { makeDesktopHandlers, makeMobileHandlers } from './helpers'
 
 import { useSelectionContext } from '@/modules/selection/SelectionProvider'
+import { useNewItemHighlightContext } from '@/modules/upload/NewItemHighlightProvider'
 
 export const useLongPress = ({
   file,
@@ -24,6 +25,7 @@ export const useLongPress = ({
     clearSelection,
     isSelectionBarVisible: selectionModeActive
   } = useSelectionContext()
+  const { clearItems: clearHighlightedItems } = useNewItemHighlightContext()
 
   if (isDesktop) {
     return makeDesktopHandlers({
@@ -39,7 +41,8 @@ export const useLongPress = ({
       clearSelection,
       setSelectedItems,
       setLastSelectedIndex,
-      setFocusedIndex
+      setFocusedIndex,
+      clearHighlightedItems
     })
   }
 
@@ -50,6 +53,7 @@ export const useLongPress = ({
     isRenaming,
     isLongPress,
     openLink,
-    toggle
+    toggle,
+    clearHighlightedItems
   })
 }

src/lib/flags.js

@@ -29,4 +29,5 @@ const flagsList = () => {
   flag('drive.hide-nextcloud-dev')
   flag('drive.keyboard-shortcuts.enabled', true)
   flag('drive.onlyoffice.editor-mode-by-access.enabled', true)
+  flag('drive.highlight-new-items.enabled', true)
 }

src/modules/drive/AddMenu/AddMenuContent.jsx

@@ -18,6 +18,7 @@ import CreateShortcut from '@/modules/drive/Toolbar/components/CreateShortcut'
 import { ScannerMenuItem } from '@/modules/drive/Toolbar/components/Scanner/ScannerMenuItem'
 import { useScannerContext } from '@/modules/drive/Toolbar/components/Scanner/ScannerProvider'
 import UploadItem from '@/modules/drive/Toolbar/components/UploadItem'
+import { NewItemHighlightProvider } from '@/modules/upload/NewItemHighlightProvider'
 import { isOfficeEditingEnabled } from '@/modules/views/OnlyOffice/helpers'
 
 const AddMenuContent = forwardRef(
@@ -118,15 +119,15 @@ const AddMenuContent = forwardRef(
           />
         )}
         {canUpload && !isUploadDisabled && (
-          <>
+          <NewItemHighlightProvider>
             <Divider className="u-mv-half" />
             <UploadItem
               onUploaded={refreshFolderContent}
               displayedFolder={displayedFolder}
               onClick={onClick}
               isReadOnly={isReadOnly}
             />
-          </>
+          </NewItemHighlightProvider>
         )}
         {hasScanner && <ScannerMenuItem onClick={createActionOnClick} />}
       </>

src/modules/drive/Toolbar/components/Scanner/useScannerService.ts

@@ -79,7 +79,8 @@ export const useScannerService = (displayedFolder: {
         { isScanned: true },
         () => logger('info', `File uploaded successfully`),
         { client, vaultClient: {}, showAlert, t },
-        displayedFolder.driveId
+        displayedFolder.driveId,
+        undefined
       )
 
       dispatch(payload)

src/modules/drive/Toolbar/components/UploadItem.jsx

@@ -15,6 +15,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { useDisplayedFolder } from '@/hooks'
 import { uploadFiles } from '@/modules/navigation/duck'
+import { useNewItemHighlightContext } from '@/modules/upload/NewItemHighlightProvider'
 
 const UploadItem = ({
   onClick,
@@ -27,6 +28,7 @@ const UploadItem = ({
   const vaultClient = useVaultClient()
   const { showAlert } = useAlert()
   const { initialDirId } = useDisplayedFolder()
+  const { addItems } = useNewItemHighlightContext()
   const { t } = useI18n()
   const dispatch = useDispatch()
 
@@ -36,7 +38,8 @@ const UploadItem = ({
     files,
     initialDirId,
     showAlert,
-    driveId
+    driveId,
+    addItems
   ) => {
     dispatch(
       uploadFiles(
@@ -50,7 +53,8 @@ const UploadItem = ({
           showAlert,
           t
         },
-        driveId
+        driveId,
+        addItems
       )
     )
   }
@@ -81,7 +85,8 @@ const UploadItem = ({
       files,
       initialDirId,
       showAlert,
-      displayedFolder?.driveId
+      displayedFolder?.driveId,
+      addItems
     )
     onClick()
   }

src/modules/filelist/AddFolder.jsx

@@ -17,6 +17,7 @@ import {
 } from '@/modules/filelist/duck'
 import AddFolderRowVz from '@/modules/filelist/virtualized/AddFolderRow'
 import { createFolder } from '@/modules/navigation/duck'
+import { useNewItemHighlightContext } from '@/modules/upload/NewItemHighlightProvider'
 
 export const AddFolder = ({
   visible,
@@ -57,7 +58,8 @@ const AddFolderWithState = ({
   driveId,
   extraColumns,
   afterSubmit,
-  afterAbort
+  afterAbort,
+  addItems
 }) => {
   const client = useClient()
   const dispatch = useDispatch()
@@ -77,7 +79,8 @@ const AddFolderWithState = ({
             showAlert,
             t
           },
-          driveId
+          driveId,
+          addItems
         )
       ).then(() => {
         afterSubmit?.() // eslint-disable-line promise/always-return
@@ -108,6 +111,7 @@ const AddFolderWithState = ({
 
 const AddFolderWithAfter = ({ refreshFolderContent, ...props }) => {
   const dispatch = useDispatch()
+  const { addItems } = useNewItemHighlightContext()
 
   const handleAfterSubmit = () => {
     if (refreshFolderContent) {
@@ -124,6 +128,7 @@ const AddFolderWithAfter = ({ refreshFolderContent, ...props }) => {
     <AddFolderWithState
       afterSubmit={handleAfterSubmit}
       afterAbort={handleAfterAbort}
+      addItems={addItems}
       {...props}
     />
   )