Desktop: Show notification on import/export using interop service

[fabiogvdneto]

Summary

When importing/exporting items in the desktop app, a giant model layer covers all our screen, and the users are forced to wait until the process is completed. This raised our attention and the need of implementing something that would let the users do their things, while still being able to know about when the process is happening and when it is finished.

One possible approach to this would be using the notyf library, which right now is only used by the TrashNotification component, and show a simple and minimal notification indicating the state of the process, instead of covering the entire screen with a modal layer. We truly believe that this would drastically increase the user experience.

In terms of implementation, we focused ourselves on creating a notification that stayed during the whole process, dismissing it when it's over, adding a successful notification if everything went well. For further use of other developers we created the notification based on operations, and different phases of the loading processes.

Before this feature was implemented:

Notifications after the feature was implemented:
Screencast from 05-29-2024 10 43 41 PM.webm

Testing Plan

The manual testing steps are as shown in the attached video.

Resolves #9879

[personalizedrefrigerator]

Thank you for working on this!

To facilitate discussion, I'm attaching a screenshot of the new UI from the linked video:

Note

It's recommended to discuss large changes on the Joplin Forum before creating a pull request, particularly for UI-related changes. This helps gather community feedback (if any) and can help determine whether a feature/change could be accepted.

Edit: There are CI errors:

  Error: ➤ YN0000: │ root@workspace:. STDERR ➤ YN0000: [@joplin/app-desktop]: gui/MenuBar.tsx(295,7): error TS7034: Variable 'path' implicitly has type 'any' in some locations where its type cannot be determined.
  Error: ➤ YN0000: │ root@workspace:. STDERR ➤ YN0000: [@joplin/app-desktop]: gui/MenuBar.tsx(323,12): error TS7005: Variable 'path' implicitly has an 'any' type.

[personalizedrefrigerator]

I've left a few comments.

Notes:

• TaskProgressUIService could be used in the future to resolve Implement a plugin API to display a progress bar #10527 (this would be a separate PR or commit).
• I'm not sure importOptions.onProgress provides enough information in status: any to show a progress indicator (the total number of notes is unknown).
  • See comment below.

Thank you for working on this!

[personalizedrefrigerator]

Suggested change

	display: inline-block;
	width: 15px;
	height: 15px;
	position: relative;
	border: 3px solid var(--joplin-background-color, white);
	border-top-color: var(--joplin-color, black);
	border-radius: 10px;
	display: inline-block;
	width: 15px;
	height: 15px;
	position: relative;
	border: 3px solid var(--joplin-background-color, white);
	border-top-color: var(--joplin-color, black);
	border-radius: 10px;

[personalizedrefrigerator]

Suggested change

	height: 20px;
	height: 20px;

[personalizedrefrigerator]

Suggested change

	.loading-spinner.-indeterminate {
	animation: 4s linear infinite rotate;
	}
	@media (prefers-reduced-motion) {
	.loading-spinner.-indeterminate { animation: none; }
	}
	.loading-spinner.-indeterminate {
	animation: 4s linear infinite rotate;
	}
	@media (prefers-reduced-motion) {
	.loading-spinner.-indeterminate { animation: none; }
	}

[personalizedrefrigerator]

Consider moving this file to packages/lib/services/ for consistency with existing code.

[personalizedrefrigerator]

Suggested change

	const taskId = `interop-import-${path}}`;
	const taskId = `interop-import-${path}`;

[personalizedrefrigerator]

Looking at the Evernote importer, it seems that 1) status is an object with a created property 2) the total number of notes to import is unknown until import completes.

For now, it might be better to show indeterminate progress for import tasks. Supporting onProgress would still be useful for exporting (example) and #10527.

[fabiogvdneto]

Thank you for your help! We did what you requested above and now we also have a fully functional circular progress bar. I made a video so that you can see how it works rn. The video is just a demo of how the progress bar behaves when calling TaskUIService#onTaskProgress(). In the last commit, when importing/exporting something, the animation continues until the task is completed.

notifications.mp4

[personalizedrefrigerator]

Thank you for working on this!

I've reviewed the recent changes and left comments. Based on the code, this pull request seems almost ready to merge!

[personalizedrefrigerator]

Based on the diff, this looks good to me!

I plan to manually test the code locally in the near future (though automated tests would be welcome!). In particular, I plan to verify:

• Error messages are shown correctly when import fails, particularly for ENEX imports, which gives users the option to report import errors on the Joplin Forum.
• Import/export status is shown correctly when there are multiple ongoing imports.
• Mobile import/export still works.

[laurent22]

Closing pull request for now. Please let us know if you'd like to continue working on it