feat: support editor to show workspace folder overview #4420

Jayaprakash-dev · 2024-01-19T01:38:24Z

Description

I've addressed the issue #4282 by implementing the Workspace folder Overview feature, allowing users to create an outline for workspace folder/sub pages structures using the slash commands /overview or /workspace overview. This facilitates easy navigation in nested document structures.

Implemented Changes

Added GetAllLevelOfViews event in the backend to retrieve all levels of child views. Previously, only the GetView event returned first-level children.
Added a struct WorkspaceOverviewListenerIdManager in the Rust backend. This struct stores overview block listener IDs to notify them about updates in child views from all levels. Additionally, a new notification event DidUpdateWorkspaceOverviewChildViews has been added to inform overview listener IDs about changes. This ensures that the struct and overview ID listener are specifically designed to handle updates across all child view levels.
Implemented navigation to pages from the workspace overview block.

The only issue is that we need to assign the view ID to the editor document in AppFlowy-IO/appflowy-editor repo. This enables us to retrieve the view from the backend using the stored view ID, like this:

In Overview block component widget builder

@override
  Widget build(BuildContext context) {
    final viewId = editorState.document.id!;
    return FutureBuilder<Either<ViewPB, FlowyError>>(
      future: ViewBackendService.getAllLevelOfViews(viewId),
      builder: (context, snapshot) { ...... }

In Document class of AppflowyEditor class:

class Document {
  Document({
    required this.root,
    this.id
  });

  /// The root [Node] of the [Document]
  final Node root;

  /// The view Id of the [Document]
  final String? id;
...... }

Testing

I have tested this implementation thoroughly, ensuring it functions as expected and addressing the outlined issue.

Note

Note: There might be some syntax issues in the Rust code as I am a newbie in Rust programming. I welcome suggestions and feedback to improve the code quality.

Screenshots

appflowy_overview_demo.mp4

LucasXu0 · 2024-01-19T01:55:44Z

@Jayaprakash-dev have you tested the deletion and update cases? Please include integration tests to cover your feature. If you have any questions about the integration feature, feel free to DM me on Discord or comment here.

Jayaprakash-dev · 2024-01-19T02:01:20Z

@LucasXu0, I've already included an integration test for the update cases in the PR, I will include a test for deletion cases.

LucasXu0 · 2024-01-19T02:04:59Z

@LucasXu0, I've already included an integration test in the PR.

I meant the insertion and deletion tests when opening the page, and the end of each test should validate the results. Never mind, I will comment directly on the code later.

Xazin

Did a small review on the flutter changes.

Some more test cases would be very nice to have, eg. renaming/changing icon of child of child of parent, whilst parent is open, to ensure that the overview is updated accordingly.

frontend/appflowy_flutter/lib/plugins/document/application/document_data_pb_extension.dart

...er/lib/plugins/document/application/overview_adapter/workspace_to_overview_adapter_bloc.dart

...lugins/document/presentation/editor_plugins/workspace_overview/overview_block_component.dart

frontend/appflowy_flutter/integration_test/folder/workspace_overview/overview_test.dart

Xazin · 2024-01-19T10:03:47Z

The analyzer is also failing, check the output of the CI.

...lugins/document/presentation/editor_plugins/workspace_overview/overview_block_component.dart

frontend/appflowy_flutter/lib/plugins/document/application/doc_bloc.dart

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_configuration.dart

...lugins/document/presentation/editor_plugins/workspace_overview/overview_block_component.dart

LucasXu0 · 2024-01-20T15:38:15Z

@Jayaprakash-dev Why did you add the WorkspaceOverviewListenerIdManager? If you want to listen to current view changes, you can simply use a view listener or view bloc for that purpose.

Jayaprakash-dev · 2024-01-20T16:36:11Z

@LucasXu0, The current implementation of the ViewListener class only notifies the first-level parent with the DidUpdateChildViews notification event. If an overview block is present in the top parent, it won't receive child view updates from deeper levels. It would be nice to have a separate event and folder notification specifically for the overview block. This enhancement would enable us to listen to child view changes and updates irrespective of their nesting level.

you can look at here how view changes are notified:
@manager_observer.rs:
notify_parent_view_did_change(folder.clone(), vec![view.parent_view_id]);

@ notify_child_views_changed function:

let parent_view_id = view_pb.parent_view_id.clone();
let mut payload = ChildViewUpdatePB {
    parent_view_id: view_pb.parent_view_id.clone(),
    ..Default::default()
};
.......
.......

send_notification(&parent_view_id, FolderNotification::DidUpdateChildViews)
  .payload(payload)
  .send();

…cise view

…evel of child views

…and its handler in rust backend

…s update notification

…OverviewChildViews` notification

Xazin · 2024-01-29T20:40:40Z

frontend/appflowy_flutter/integration_test/folder/workspace_overview/overview_test.dart

+      await tester.hoverOnPageName(firstLevelParentViewName);
+      await tester.renamePage('View 1');


You should never finish tests with "actions", only "expectations", otherwise you're just "doing actions" just to do them, without actually checking if what they did, worked as intended.

Xazin · 2024-01-29T20:41:01Z

frontend/appflowy_flutter/lib/env/cloud_env_test.dart

@@ -7,7 +7,7 @@ part 'cloud_env_test.g.dart';

 /// Follow the guide on https://supabase.com/docs/guides/auth/social-login/auth-google to setup the auth provider.
 ///
-@Envied(path: '.env.cloud.test')
+@Envied(path: '.env.cloud')


Why this change?

Xazin · 2024-01-29T20:54:30Z

frontend/rust-lib/flowy-folder/src/manager.rs

+    let mutex_folder = self.mutex_folder.clone();
+    let mutex_folder = mutex_folder.lock();
+    let mutex_folder = mutex_folder.as_ref();


Suggested change

let mutex_folder = self.mutex_folder.clone();

let mutex_folder = mutex_folder.lock();

let mutex_folder = mutex_folder.as_ref();

let mutex_folder = self.mutex_folder.clone().lock().as_ref();

Xazin · 2024-01-29T20:54:55Z

frontend/rust-lib/flowy-folder/src/manager.rs

+          let mutex_folder = self.mutex_folder.clone();
+          let mutex_folder = mutex_folder.lock();
+          let mutex_folder = mutex_folder.as_ref();


Suggested change

let mutex_folder = self.mutex_folder.clone();

let mutex_folder = mutex_folder.lock();

let mutex_folder = mutex_folder.as_ref();

let mutex_folder = self.mutex_folder.clone().lock().as_ref();

Xazin · 2024-01-29T20:55:07Z

frontend/rust-lib/flowy-folder/src/manager.rs

+    let mutex_folder = self.mutex_folder.clone();
+    let mutex_folder = mutex_folder.lock();
+    let mutex_folder = mutex_folder.as_ref();


Suggested change

let mutex_folder = self.mutex_folder.clone();

let mutex_folder = mutex_folder.lock();

let mutex_folder = mutex_folder.as_ref();

let mutex_folder = self.mutex_folder.clone().lock().as_ref();

Xazin · 2024-01-29T20:56:22Z

frontend/rust-lib/flowy-folder/src/manager_observer.rs

+        let ffolder = folder.lock();
+        if let Some(folder) = ffolder.as_ref() {


Suggested change

let ffolder = folder.lock();

if let Some(folder) = ffolder.as_ref() {

if let Some(folder) = folder.lock().as_ref() {

Xazin · 2024-01-29T20:59:51Z

frontend/rust-lib/flowy-folder/src/manager_observer.rs

+        if let Some(folder) = ffolder.as_ref() {
+          match value {
+            ViewChange::DidCreateView { view } => {
+              if let Some(manager) = workspace_overview_listener_id_manager.upgrade() {
+                notify_child_views_changed(
+                  view_pb_without_child_views(Arc::new(view.clone())),
+                  ChildViewChangeReason::Create,
+                  manager,
+                  folder,
+                );
+              }
+              notify_parent_view_did_change(folder, vec![view.parent_view_id]);
+            },
+            ViewChange::DidDeleteView { views } => {
+              for view in views {
+                if let Some(manager) = workspace_overview_listener_id_manager.upgrade() {
+                  notify_child_views_changed(
+                    view_pb_without_child_views(view.clone()),
+                    ChildViewChangeReason::Delete,
+                    manager,
+                    folder,
+                  );
+                }
+              }
+            },
+            ViewChange::DidUpdate { view } => {
+              notify_view_did_change(view.clone());
+              if let Some(manager) = workspace_overview_listener_id_manager.upgrade() {
+                notify_child_views_changed(
+                  view_pb_without_child_views(Arc::new(view.clone())),
+                  ChildViewChangeReason::Update,
+                  manager,
+                  folder,
+                );
+              }
+              notify_parent_view_did_change(folder, vec![view.parent_view_id.clone()]);
+            },
+          };
+        }


Suggested change

if let Some(folder) = ffolder.as_ref() {

match value {

ViewChange::DidCreateView { view } => {

if let Some(manager) = workspace_overview_listener_id_manager.upgrade() {

notify_child_views_changed(

view_pb_without_child_views(Arc::new(view.clone())),

ChildViewChangeReason::Create,

manager,

folder,

);

}

notify_parent_view_did_change(folder, vec![view.parent_view_id]);

},

ViewChange::DidDeleteView { views } => {

for view in views {

if let Some(manager) = workspace_overview_listener_id_manager.upgrade() {

notify_child_views_changed(

view_pb_without_child_views(view.clone()),

ChildViewChangeReason::Delete,

manager,

folder,

);

}

}

},

ViewChange::DidUpdate { view } => {

notify_view_did_change(view.clone());

if let Some(manager) = workspace_overview_listener_id_manager.upgrade() {

notify_child_views_changed(

view_pb_without_child_views(Arc::new(view.clone())),

ChildViewChangeReason::Update,

manager,

folder,

);

}

notify_parent_view_did_change(folder, vec![view.parent_view_id.clone()]);

},

};

}

if let Some(workspace_listener) = workspace_overview_listener_id_manager.upgrade() {

if let Some(folder) = folder.lock().as_ref() {

match value {

ViewChange::DidCreateView { view } => {

notify_child_views_changed(

view_pb_without_child_views(Arc::new(view.clone())),

ChildViewChangeReason::Create,

manager,

folder,

);

notify_parent_view_did_change(folder, vec![view.parent_view_id]);

},

ViewChange::DidDeleteView { views } => {

for view in views {

notify_child_views_changed(

view_pb_without_child_views(view.clone()),

ChildViewChangeReason::Delete,

manager,

folder,

);

}

},

ViewChange::DidUpdate { view } => {

notify_view_did_change(view.clone());

notify_child_views_changed(

view_pb_without_child_views(Arc::new(view.clone())),

ChildViewChangeReason::Update,

manager,

folder,

);

notify_parent_view_did_change(folder, vec![view.parent_view_id.clone()]);

},

};

}

}

Jayaprakash-dev · 2024-02-08T00:07:46Z

Hey @Xazin, I've made quite a mess in the code file and inadvertently messed up the git files in my local repo. So, I've submitted a new PR #4629 that can be a replacement for this one.

If that works for you, I'll close this one.

Xazin reviewed Jan 19, 2024

View reviewed changes

frontend/appflowy_flutter/integration_test/folder/workspace_overview/overview_test.dart Outdated Show resolved Hide resolved

Jayaprakash-dev force-pushed the feat_workspace_folder_overview branch from 1bbd5c6 to 0f9e7eb Compare January 19, 2024 11:41

Xazin reviewed Jan 19, 2024

View reviewed changes

...lugins/document/presentation/editor_plugins/workspace_overview/overview_block_component.dart Outdated Show resolved Hide resolved

Xazin requested a review from LucasXu0 January 19, 2024 13:07

Xazin reviewed Jan 19, 2024

View reviewed changes

Jayaprakash-dev requested a review from Xazin January 19, 2024 15:30

This was referenced Jan 19, 2024

[FR] Auto reference/index sub pages in parent page #4372

Closed

[FR] outline improvements #4377

Closed

Jayaprakash-dev force-pushed the feat_workspace_folder_overview branch from 6b172ed to 0f17e6e Compare January 25, 2024 17:08

Jayaprakash-dev added 12 commits January 26, 2024 13:37

feat: support workspace overview to display folder structure in a con…

58de1d6

…cise view

feat: adds RegisterOverviewListenerId to receive updates from all l…

4f447fe

…evel of child views

feat: add GetAllLevelOfViews & RegisterOverviewListernerId event …

60b6d99

…and its handler in rust backend

feat: support storing overview listener Ids & add overview child view…

0f2a842

…s update notification

refactor: overview block widget style and support `DidUpdateWorkspace…

2d4bf63

…OverviewChildViews` notification

test: integration test for overview block

d762f02

feat: Notify all overview listeners instead of stopping at one.

a5c447e

fix: overview block rebuilding issue

4159b90

test: adds test for workspace view update and deletion cases

5795105

refactor: improved code file, renamed folders, and updated class names

971412a

refactor: changed code comments and var names

ad59287

refactor: remove redundant codes

3f13a2a

Jayaprakash-dev force-pushed the feat_workspace_folder_overview branch from 0f17e6e to 3f13a2a Compare January 26, 2024 08:22

fix: resolves supabase auth error

e9a41cb

Xazin reviewed Jan 29, 2024

View reviewed changes

Xazin requested a review from appflowy January 29, 2024 21:03

Jayaprakash-dev closed this Feb 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: support editor to show workspace folder overview #4420

feat: support editor to show workspace folder overview #4420

Jayaprakash-dev commented Jan 19, 2024

LucasXu0 commented Jan 19, 2024

Jayaprakash-dev commented Jan 19, 2024 •

edited

Loading

LucasXu0 commented Jan 19, 2024

Xazin left a comment

Xazin commented Jan 19, 2024

LucasXu0 commented Jan 20, 2024

Jayaprakash-dev commented Jan 20, 2024

Xazin Jan 29, 2024

Xazin Jan 29, 2024

Xazin Jan 29, 2024

Xazin Jan 29, 2024

Xazin Jan 29, 2024

Xazin Jan 29, 2024

Xazin Jan 29, 2024

Jayaprakash-dev commented Feb 8, 2024

		await tester.hoverOnPageName(firstLevelParentViewName);
		await tester.renamePage('View 1');

		let ffolder = folder.lock();
		if let Some(folder) = ffolder.as_ref() {

	let ffolder = folder.lock();
	if let Some(folder) = ffolder.as_ref() {
	if let Some(folder) = folder.lock().as_ref() {

feat: support editor to show workspace folder overview #4420

feat: support editor to show workspace folder overview #4420

Conversation

Jayaprakash-dev commented Jan 19, 2024

Description

Implemented Changes

Testing

Note

Screenshots

LucasXu0 commented Jan 19, 2024

Jayaprakash-dev commented Jan 19, 2024 • edited Loading

LucasXu0 commented Jan 19, 2024

Xazin left a comment

Choose a reason for hiding this comment

Xazin commented Jan 19, 2024

LucasXu0 commented Jan 20, 2024

Jayaprakash-dev commented Jan 20, 2024

Xazin Jan 29, 2024

Choose a reason for hiding this comment

Xazin Jan 29, 2024

Choose a reason for hiding this comment

Xazin Jan 29, 2024

Choose a reason for hiding this comment

Xazin Jan 29, 2024

Choose a reason for hiding this comment

Xazin Jan 29, 2024

Choose a reason for hiding this comment

Xazin Jan 29, 2024

Choose a reason for hiding this comment

Xazin Jan 29, 2024

Choose a reason for hiding this comment

Jayaprakash-dev commented Feb 8, 2024

Jayaprakash-dev commented Jan 19, 2024 •

edited

Loading