Feat: Highlight new items #3508

Coussecousse · 2025-09-25T10:48:37Z

Hello

Objectif : Highligh new items when they're uploaded.

Why : Because when there are too many elements on the window we can lose them depending on the way the folder is sorted.

⚠️ Cozy-ui need to be updated. See : cozy/cozy-ui#2861 and cozy/cozy-ui#2867

Demonstration :
Capture vidéo du 2025-09-25 12-39-59.webm

Now we're using a provider. I'm not familiar with it so feel free to add your recommandations.
And yes it work with a folderId undefined.
Yes when selecting just after an upload, all the file are selected. The bug is already reported and under investigation.
Ps: All the changed reguarding the lint are under the style commit normally.

Flag:

drive.highlight-new-items.enabled

bundlemon · 2025-09-25T10:51:29Z

BundleMon

Files updated (6)

Status	Path	Size	Limits
✅	public/static/js/cozy.(hash).js	727.75KB (+1.12KB +0.15%)	-
✅	static/js/cozy.(hash).js	870.82KB (+635B +0.07%)	-
✅	public/static/js/public.(hash).js	109.31KB (+483B +0.43%)	-
✅	static/js/main.(hash).js	145.55KB (+456B +0.31%)	-
✅	services/qualificationMigration.js	282.45KB (+145B +0.05%)	-
✅	services/dacc.js	262.26KB (+128B +0.05%)	-

Unchanged files (15)

Status	Path	Size	Limits
✅	static/js/(chunkId).(hash).js	958.28KB	-
✅	public/static/js/(chunkId).(hash).js	870.08KB	-
✅	(hash).js	336.11KB	-
✅	public/(hash).js	336.11KB	-
✅	public/static/js/lib-react.(hash).js	39.24KB	-
✅	static/js/lib-react.(hash).js	39.24KB	-
✅	public/static/css/cozy.(hash).css	33.38KB	-
✅	static/css/cozy.(hash).css	33.38KB	-
✅	public/static/js/lib-router.(hash).js	21.86KB	-
✅	static/js/lib-router.(hash).js	21.86KB	-
✅	static/css/main.(hash).css	16.77KB	-
✅	public/static/css/public.(hash).css	6.46KB	-
✅	manifest.webapp	2.96KB	-
✅	index.html	690B	-
✅	assets/manifest.json	185B	-

Total files change +2.92KB +0.06%

Groups updated (1)

Status	Path	Size	Limits
✅	*/.js	6.74MB (+3.26KB +0.05%)	-

Unchanged groups (2)

Status	Path	Size	Limits
✅	*/.{png,svg,ico}	2.17MB	-
✅	*/.css	129.68KB	-

Final result: ✅

View report in BundleMon website ➡️

Current branch size history | Target branch size history

src/modules/upload/UploadProvider.jsx

src/modules/upload/UploadButton.jsx

src/modules/upload/index.js

src/modules/selection/SelectionProvider.jsx

src/modules/navigation/duck/actions.jsx

rezk2ll · 2025-10-06T13:33:54Z

We have two issues:

The sidebar is duplicated

The dark mode color does not match the selected color

you can switch to the selected attribute instead here:
https://github.com/cozy/cozy-ui/pull/2861/files#diff-1e5051806541a5c5c5c23512d4a2f1660e5507c6e205419beb54e8fdc30047f5R90

lethemanh · 2025-10-07T04:01:26Z

We have two issues:

The sidebar is duplicated

* The dark mode color does not match the selected color you can switch to the selected attribute instead here: https://github.com/cozy/cozy-ui/pull/2861/files#diff-1e5051806541a5c5c5c23512d4a2f1660e5507c6e205419beb54e8fdc30047f5R90

They have been fixed

rezk2ll · 2025-10-09T06:39:13Z

src/hooks/useOnLongPress/helpers.js

  event.preventDefault()

  if (disabled || isRenaming) return



It would be better to check the flag inside the clearHighlightedItems() function istead of wrapping it with an if each time you call it .

Inside that function if the flag is enabled simply return

rezk2ll · 2025-10-09T06:40:18Z

src/hooks/useOnLongPress/helpers.js

  }
+
+  if (flag('drive.highlight-new-items.enabled')) {
+    clearHighlightedItems()


Same here, flag inside

rezk2ll · 2025-10-09T06:41:43Z

src/modules/drive/AddMenu/AddMenuContent.jsx

        )}
        {canUpload && !isUploadDisabled && (
-          <>
+          <NewItemHighlightProvider>


either conditionally wrap the child elements with this provider using the flag or inside the provider make sure to perform nothing with the flag is disabled

rezk2ll · 2025-10-09T06:43:08Z

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

      showAlert,
-      displayedFolder?.driveId
+      displayedFolder?.driveId,
+      flag('drive.highlight-new-items.enabled') ? addItems : undefined


Same thing, check the flag inside the additems function not outside because it's easy to miss and you will repeat this if sometimes .

You already missed it above

rezk2ll · 2025-10-09T06:43:31Z

src/modules/filelist/AddFolder.jsx

      afterSubmit={handleAfterSubmit}
      afterAbort={handleAfterAbort}
+      addItems={
+        flag('drive.highlight-new-items.enabled') ? addItems : undefined


Same, flag inside the function

rezk2ll · 2025-10-09T06:46:56Z

src/modules/upload/Dropzone.jsx

        },
-        displayedFolder.driveId
+        displayedFolder.driveId,
+        flag('drive.highlight-new-items.enabled') ? addItems : undefined


rezk2ll · 2025-10-09T06:47:17Z

src/modules/upload/DropzoneDnD.jsx

            },
-            displayedFolder.driveId
+            displayedFolder.driveId,
+            flag('drive.highlight-new-items.enabled') ? addItems : undefined


rezk2ll · 2025-10-09T06:48:40Z

src/modules/upload/UploadButton.jsx

        },
-        displayedFolder.driveId
+        displayedFolder.driveId,
+        flag('drive.highlight-new-items.enabled') ? addItems : undefined


rezk2ll · 2025-10-09T06:49:06Z

src/modules/views/Folder/virtualized/FolderViewBody.jsx

    }
-  }, [currentFolderId, isDesktop])
+
+    if (flag('drive.highlight-new-items.enabled')) {


rezk2ll · 2025-10-09T06:49:52Z

test/components/AppLike.jsx

-                      </BreakpointsProvider>
-                    </ViewSwitcherContextProvider>
-                  </SelectionProvider>
+                  <NewItemHighlightProvider>


Same comment as above

- 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 🐛

Coussecousse requested review from JF-Cozy, doubleface, lenhanphung, lethemanh, rezk2ll and zatteo as code owners September 25, 2025 10:48

lethemanh force-pushed the ean_highlight_files branch 4 times, most recently from 0bfbb04 to 9981ef6 Compare October 1, 2025 19:14

rezk2ll requested changes Oct 2, 2025

View reviewed changes

lethemanh force-pushed the ean_highlight_files branch 4 times, most recently from 6104b29 to a743fca Compare October 6, 2025 02:31

lethemanh requested a review from rezk2ll October 6, 2025 02:32

lethemanh force-pushed the ean_highlight_files branch from a743fca to bfa164a Compare October 6, 2025 12:21

lethemanh force-pushed the ean_highlight_files branch from d41e9a8 to 8660c0c Compare October 6, 2025 14:26

lethemanh mentioned this pull request Oct 7, 2025

feat: Change highlighted item color ✨ cozy/cozy-ui#2867

Merged

lethemanh force-pushed the ean_highlight_files branch from 68234a5 to 4214f1c Compare October 7, 2025 04:00

lethemanh force-pushed the ean_highlight_files branch from 4214f1c to 4597ee5 Compare October 9, 2025 03:50

rezk2ll requested changes Oct 9, 2025

View reviewed changes

lethemanh force-pushed the ean_highlight_files branch 3 times, most recently from a036730 to 5056d2a Compare October 9, 2025 09:57

lethemanh requested a review from rezk2ll October 9, 2025 09:58

lethemanh force-pushed the ean_highlight_files branch from 5056d2a to c3c57d5 Compare October 13, 2025 06:44

rezk2ll approved these changes Oct 13, 2025

View reviewed changes

lethemanh merged commit 92d5404 into master Oct 13, 2025
4 checks passed

lethemanh deleted the ean_highlight_files branch October 13, 2025 08:01

Feat: Highlight new items #3508

Feat: Highlight new items #3508

Uh oh!

Conversation

Coussecousse commented Sep 25, 2025 • edited by lethemanh Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Flag:

Uh oh!

bundlemon bot commented Sep 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

BundleMon

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rezk2ll commented Oct 6, 2025

Uh oh!

lethemanh commented Oct 7, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Coussecousse commented Sep 25, 2025 •

edited by lethemanh

Loading

bundlemon bot commented Sep 25, 2025 •

edited

Loading