Desktop: Show notification on import/export using interop service #10520

fabiogvdneto · 2024-05-29T22:00:43Z

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.

packages/app-desktop/gui/InteropNotification/InteropNotification.tsx

packages/app-desktop/gui/MenuBar.tsx

packages/app-desktop/app.reducer.ts

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. We though and decided that one possible solution 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. Co-authored-by: Henrique Silva <[email protected]>

…curs

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 · 2024-06-20T12:36:34Z

packages/app-desktop/main.scss

+    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;


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 · 2024-06-20T12:36:43Z

packages/app-desktop/main.scss

+
+.loading-spinner.-progress {
+	width: 20px;
+    height: 20px;


Suggested change

height: 20px;

height: 20px;

personalizedrefrigerator · 2024-06-20T12:36:58Z

packages/app-desktop/main.scss

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



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 · 2024-06-20T12:39:03Z

packages/lib/TaskProgressUIService.ts

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

personalizedrefrigerator · 2024-06-20T12:39:42Z

packages/app-desktop/gui/MenuBar.tsx

 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
 		const errors: any[] = [];

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


Suggested change

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

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

personalizedrefrigerator · 2024-06-20T12:49:33Z

packages/app-desktop/gui/MenuBar.tsx

+			onProgress: (_status: any) => {
+				TaskProgressUIService.onTaskProgress(taskId, _status);


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 · 2024-06-21T20:59:08Z

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 · 2024-06-27T05:23:30Z

packages/app-desktop/gui/MainScreen/MainScreen.tsx

+					// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
+					dispatch={this.props.dispatch as any}


Suggested change

// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied

dispatch={this.props.dispatch as any}

dispatch={this.props.dispatch}

Would it be possible to remove the as any cast? If not, consider updating the -- Old code before rule was applied to describe why the cast is necessary.

personalizedrefrigerator · 2024-06-27T05:25:10Z

packages/app-desktop/gui/TaskNotification/TaskNotification.tsx

+			if (type.type === 'success') {
+				// When type === 'success', type.icon is always of type object (INotyfIcon):
+				// https://github.com/caroso1222/notyf/blob/master/src/notyf.options.ts
+				(type.icon as INotyfIcon).color = theme.backgroundColor5;
+			} else if (type.type === 'error') {
+				// When type === 'error', type.icon is always of type object (INotyfIcon):
+				// https://github.com/caroso1222/notyf/blob/master/src/notyf.options.ts
+				(type.icon as INotyfIcon).color = theme.backgroundColor5;
+			}


Suggested change

if (type.type === 'success') {

// When type === 'success', type.icon is always of type object (INotyfIcon):

// https://github.com/caroso1222/notyf/blob/master/src/notyf.options.ts

(type.icon as INotyfIcon).color = theme.backgroundColor5;

} else if (type.type === 'error') {

// When type === 'error', type.icon is always of type object (INotyfIcon):

// https://github.com/caroso1222/notyf/blob/master/src/notyf.options.ts

(type.icon as INotyfIcon).color = theme.backgroundColor5;

}

if (type.type === 'success' || type.type === 'error') {

// When type is 'success' or 'error', type.icon is always of type object (INotyfIcon):

// https://github.com/caroso1222/notyf/blob/master/src/notyf.options.ts

(type.icon as INotyfIcon).color = theme.backgroundColor5;

}

It might be possible to combine these branches.

personalizedrefrigerator · 2024-06-27T05:28:30Z

packages/app-desktop/gui/TaskNotification/TaskNotification.tsx

+					message: task.message,
+					duration: 0,
+					dismissible: true,
+					icon: `<i class="${className}" id="${task.id}" style="${cssStyle}"></i>`,


Consider escaping cssStyle and task.id. This should prevent future changes to cssStyle that include "s or task IDs with " from breaking the notification.

This escaping can, for example, be done with htmlentities from @joplin/utils/html:

Suggested change

icon: `<i class="${className}" id="${task.id}" style="${cssStyle}"></i>`,

icon: `<i class="${className}" id="${htmlentities(task.id)}" style="${htmlentities(cssStyle)}"></i>`,

Also see https://joplinapp.org/help/dev/coding_style#to-insert-into-an-html-string.

…mbined branches.

personalizedrefrigerator requested changes May 29, 2024

View reviewed changes

personalizedrefrigerator added enhancement Feature requests and code enhancements desktop All desktop platforms import Related to importing files such as ENEX, JEX, etc. labels May 30, 2024

fabiogvdneto and others added 2 commits June 3, 2024 22:04

fixed import/export notification not being dismissed when an error oc…

0380e09

…curs

fabiogvdneto force-pushed the interop-service-notifications branch from 333d610 to 0380e09 Compare June 3, 2024 21:05

fabiogvdneto and others added 2 commits June 16, 2024 09:56

Merge branch 'laurent22:dev' into interop-service-notifications

17beffc

created service for handling task notifications

26f3601

personalizedrefrigerator self-requested a review June 18, 2024 16:08

henriqueeapsilva and others added 2 commits June 19, 2024 18:23

created icon changes during the process - dynamic icon

8dd42c4

Merge branch 'laurent22:dev' into interop-service-notifications

c1de532

personalizedrefrigerator reviewed Jun 20, 2024

View reviewed changes

fabiogvdneto force-pushed the interop-service-notifications branch from e459bc7 to c1de532 Compare June 21, 2024 19:58

fabiogvdneto added 2 commits June 21, 2024 21:16

finished implementing the circular progress bar

65edae1

removed a trailing bracket

2bc68af

fabiogvdneto requested a review from personalizedrefrigerator June 24, 2024 13:26

personalizedrefrigerator reviewed Jun 27, 2024

View reviewed changes

henriqueeapsilva and others added 2 commits June 27, 2024 13:57

fix: removed unnacessary dispatch function, added htmlenteties and co…

0fe8dc3

…mbined branches.

Merge branch 'laurent22:dev' into interop-service-notifications

1021323

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Desktop: Show notification on import/export using interop service #10520

Desktop: Show notification on import/export using interop service #10520

fabiogvdneto commented May 29, 2024

personalizedrefrigerator left a comment •

edited

Loading

personalizedrefrigerator left a comment

personalizedrefrigerator Jun 20, 2024

personalizedrefrigerator Jun 20, 2024

personalizedrefrigerator Jun 20, 2024

personalizedrefrigerator Jun 20, 2024 •

edited

Loading

personalizedrefrigerator Jun 20, 2024

personalizedrefrigerator Jun 20, 2024

fabiogvdneto commented Jun 21, 2024 •

edited

Loading

personalizedrefrigerator left a comment •

edited

Loading

personalizedrefrigerator Jun 27, 2024

personalizedrefrigerator Jun 27, 2024

personalizedrefrigerator Jun 27, 2024

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

		onProgress: (_status: any) => {
		TaskProgressUIService.onTaskProgress(taskId, _status);

		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
		dispatch={this.props.dispatch as any}

	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
	dispatch={this.props.dispatch as any}
	dispatch={this.props.dispatch}

	icon: `<i class="${className}" id="${task.id}" style="${cssStyle}"></i>`,
	icon: `<i class="${className}" id="${htmlentities(task.id)}" style="${htmlentities(cssStyle)}"></i>`,

Desktop: Show notification on import/export using interop service #10520

Are you sure you want to change the base?

Desktop: Show notification on import/export using interop service #10520

Conversation

fabiogvdneto commented May 29, 2024

Summary

Testing Plan

personalizedrefrigerator left a comment • edited Loading

Choose a reason for hiding this comment

personalizedrefrigerator left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

personalizedrefrigerator Jun 20, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fabiogvdneto commented Jun 21, 2024 • edited Loading

personalizedrefrigerator left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

personalizedrefrigerator left a comment •

edited

Loading

personalizedrefrigerator Jun 20, 2024 •

edited

Loading

fabiogvdneto commented Jun 21, 2024 •

edited

Loading

personalizedrefrigerator left a comment •

edited

Loading