feat: Support Panes for AppFlowy

frontend/appflowy_flutter/integration_test/board/board_row_test.dart

@@ -23,6 +23,7 @@ void main() {
         onHover: () async {
           final moreOption = find.byType(CardMoreOption);
           await tester.tapButton(moreOption);
+          await tester.tapButton(moreOption);
         },
       );
       await tester.tapButtonWithName(LocaleKeys.button_delete.tr());
@@ -41,6 +42,7 @@ void main() {
         onHover: () async {
           final moreOption = find.byType(CardMoreOption);
           await tester.tapButton(moreOption);
+          await tester.tapButton(moreOption);
         },
       );
       await tester.tapButtonWithName(LocaleKeys.button_duplicate.tr());

frontend/appflowy_flutter/integration_test/database_calendar_test.dart

@@ -166,7 +166,7 @@ void main() {
       await tester.dragDropRescheduleCalendarEvent(firstOfThisMonth);
 
       // Make sure that the event has been rescheduled to the new date
-      final sameDayNextWeek = firstOfThisMonth.add(const Duration(days: 7));
+      final sameDayNextWeek = firstOfThisMonth.add(const Duration(days: 14));
       tester.assertNumberOfEventsInCalendar(1);
       tester.assertNumberOfEventsOnSpecificDay(1, sameDayNextWeek);
 

frontend/appflowy_flutter/integration_test/panes/panes_overlay_test.dart

@@ -0,0 +1,125 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/workspace/presentation/home/panes/flowy_pane.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder2/protobuf.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import '../util/util.dart';
+
+const _documentName = 'First Doc';
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('Panes overlay/read-only views test', () {
+    testWidgets(
+        'Opening a new pane of same type marks existing pane as readonly, test assumes read only views are unmodifiable',
+        (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      expect(find.byType(FlowyPane), findsOneWidget);
+
+      for (int i = 0; i < 2; i++) {
+        await tester.openViewInNewPane(
+          gettingStarted,
+          ViewLayoutPB.Document,
+          Axis.horizontal,
+        );
+      }
+
+      expect(find.byType(FlowyPane), findsNWidgets(3));
+      expect(
+        find.textContaining(LocaleKeys.readOnlyViewText.tr()),
+        findsNWidgets(2),
+      );
+    });
+    testWidgets(
+        'Switching view on writable pane or closing the writable pane, searches for and converts the first found read only pane to writable',
+        (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      expect(find.byType(FlowyPane), findsOneWidget);
+
+      for (int i = 0; i < 2; i++) {
+        await tester.openViewInNewPane(
+          gettingStarted,
+          ViewLayoutPB.Document,
+          Axis.horizontal,
+        );
+      }
+      expect(find.byType(FlowyPane), findsNWidgets(3));
+      expect(
+        find.textContaining(LocaleKeys.readOnlyViewText.tr()),
+        findsNWidgets(2),
+      );
+
+      await tester.createNewPageWithName(name: _documentName);
+
+      await tester.tap(find.byType(FlowyPane).first);
+
+      await tester.openPage(_documentName);
+
+      expect(
+        find.textContaining(LocaleKeys.readOnlyViewText.tr()),
+        findsNWidgets(1),
+      );
+
+      await tester.tap(find.byType(FlowyPane).last);
+
+      await tester.closePaneWithVisibleCloseButton(first: false);
+
+      expect(
+        find.textContaining(LocaleKeys.readOnlyViewText.tr()),
+        findsNWidgets(0),
+      );
+    });
+    testWidgets(
+        'opening duplicate view in a new tab of different pane is marked as read only, closing the writable view leads to conversion of readonly view to writable view',
+        (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      expect(find.byType(FlowyPane), findsOneWidget);
+
+      for (int i = 0; i < 1; i++) {
+        await tester.openViewInNewPane(
+          gettingStarted,
+          ViewLayoutPB.Document,
+          Axis.horizontal,
+        );
+      }
+      expect(find.byType(FlowyPane), findsNWidgets(2));
+      expect(
+        find.textContaining(LocaleKeys.readOnlyViewText.tr()),
+        findsNWidgets(1),
+      );
+      await tester.tap(find.byType(FlowyPane).first);
+
+      await tester.createNewPageWithName(name: _documentName);
+
+      expect(
+        find.textContaining(LocaleKeys.readOnlyViewText.tr()),
+        findsNWidgets(0),
+      );
+
+      await tester.openAppInNewTab(gettingStarted, ViewLayoutPB.Document);
+
+      expect(
+        find.textContaining(LocaleKeys.readOnlyViewText.tr()),
+        findsNWidgets(1),
+      );
+
+      await tester.tap(find.byType(FlowyPane).last);
+
+      await tester.closePaneWithVisibleCloseButton(first: false);
+
+      expect(
+        find.textContaining(LocaleKeys.readOnlyViewText.tr()),
+        findsNWidgets(0),
+      );
+    });
+  });
+}

frontend/appflowy_flutter/integration_test/panes/panes_test.dart

@@ -0,0 +1,75 @@
+import 'package:appflowy/workspace/presentation/home/panes/flowy_pane.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder2/protobuf.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import '../util/util.dart';
+
+const _documentName = 'First Doc';
+const _documentTwoName = 'Second Doc';
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('Core pane tests', () {
+    testWidgets('Open AppFlowy and open/navigate/close panes', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      expect(find.byType(FlowyPane), findsOneWidget);
+
+      await tester.createNewPageWithName(
+        name: _documentName,
+        layout: ViewLayoutPB.Document,
+      );
+
+      await tester.createNewPageWithName(
+        name: _documentTwoName,
+        layout: ViewLayoutPB.Document,
+      );
+
+      await tester.openViewInNewPane(
+        gettingStarted,
+        ViewLayoutPB.Document,
+        Axis.horizontal,
+      );
+
+      expect(find.byType(FlowyPane), findsNWidgets(2));
+
+      await tester.openViewInNewPane(
+        _documentName,
+        ViewLayoutPB.Document,
+      );
+
+      expect(find.byType(FlowyPane), findsNWidgets(3));
+
+      await tester.tap(
+        find.descendant(
+          of: find.byType(FlowyPane),
+          matching: find.text(gettingStarted),
+        ),
+      );
+
+      await tester.closePaneWithVisibleCloseButton();
+
+      expect(find.byType(FlowyPane), findsNWidgets(2));
+    });
+
+    testWidgets('user can open atmost 4 panes', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      expect(find.byType(FlowyPane), findsOneWidget);
+
+      for (int i = 0; i < 5; i++) {
+        await tester.openViewInNewPane(
+          gettingStarted,
+          ViewLayoutPB.Document,
+          Axis.horizontal,
+        );
+      }
+
+      expect(find.byType(FlowyPane), findsNWidgets(4));
+    });
+  });
+}

frontend/appflowy_flutter/integration_test/runner.dart

@@ -16,15 +16,17 @@ import 'database_share_test.dart' as database_share_test;
 import 'database_sort_test.dart' as database_sort_test;
 import 'database_view_test.dart' as database_view_test;
 import 'document/document_test_runner.dart' as document_test_runner;
+import 'import_files_test.dart' as import_files_test;
+import 'share_markdown_test.dart' as share_markdown_test;
+import 'switch_folder_test.dart' as switch_folder_test;
+import 'sidebar/sidebar_test_runner.dart' as sidebar_test_runner;
+import 'tabs/tabs_test.dart' as tabs_test;
 import 'empty_test.dart' as first_test;
 import 'hotkeys_test.dart' as hotkeys_test;
-import 'import_files_test.dart' as import_files_test;
 import 'settings/user_icon_test.dart' as user_icon_test;
 import 'settings/user_language_test.dart' as user_language_test;
-import 'share_markdown_test.dart' as share_markdown_test;
-import 'sidebar/sidebar_test_runner.dart' as sidebar_test_runner;
-import 'switch_folder_test.dart' as switch_folder_test;
-import 'tabs_test.dart' as tabs_test;
+import 'panes/panes_test.dart' as panes_test;
+import 'panes/panes_overlay_test.dart' as panes_overlay_test;
 
 /// The main task runner for all integration tests in AppFlowy.
 ///
@@ -68,6 +70,10 @@ void main() {
   // Tabs
   tabs_test.main();
 
+  //Panes
+  panes_test.main();
+  panes_overlay_test.main();
+
   // Others
   hotkeys_test.main();
 

frontend/appflowy_flutter/integration_test/tabs_test.dart → frontend/appflowy_flutter/integration_test/tabs/tabs_test.dart

@@ -8,10 +8,10 @@ import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
-import 'util/base.dart';
-import 'util/common_operations.dart';
-import 'util/expectation.dart';
-import 'util/keyboard.dart';
+import '../util/base.dart';
+import '../util/common_operations.dart';
+import '../util/expectation.dart';
+import '../util/keyboard.dart';
 
 const _documentName = 'First Doc';
 const _documentTwoName = 'Second Doc';

frontend/appflowy_flutter/integration_test/util/common_operations.dart

@@ -225,6 +225,17 @@ extension CommonOperations on WidgetTester {
     await tapButtonWithName(ViewMoreActionType.openInNewTab.name);
   }
 
+  /// Tap the Split Right button
+  Future<void> tapSplitRightButton() async {
+    await tapPageOptionButton();
+    await tapButtonWithName(ViewMoreActionType.splitRight.name);
+  }
+
+  Future<void> tapSplitDownButton() async {
+    await tapPageOptionButton();
+    await tapButtonWithName(ViewMoreActionType.splitDown.name);
+  }
+
   /// Rename the page.
   Future<void> renamePage(String name) async {
     await tapRenamePageButton();
@@ -428,11 +439,38 @@ extension CommonOperations on WidgetTester {
   }
 
   // tap the button with [FlowySvgData]
-  Future<void> tapButtonWithFlowySvgData(FlowySvgData svg) async {
+  Future<void> tapButtonWithFlowySvgData(
+    FlowySvgData svg, [
+    bool first = true,
+  ]) async {
     final button = find.byWidgetPredicate(
       (widget) => widget is FlowySvg && widget.svg.path == svg.path,
     );
-    await tapButton(button);
+    first ? await tapButton(button.first) : await tapButton(button.last);
+  }
+
+  Future<void> openViewInNewPane(
+    String name,
+    ViewLayoutPB layout, [
+    Axis axis = Axis.vertical,
+  ]) async {
+    await hoverOnPageName(
+      name,
+      onHover: () async {
+        if (axis == Axis.vertical) {
+          await tapSplitRightButton();
+        } else {
+          await tapSplitDownButton();
+        }
+        await pumpAndSettle();
+      },
+    );
+  }
+
+  Future<void> closePaneWithVisibleCloseButton({
+    bool first = true,
+  }) async {
+    await tapButtonWithFlowySvgData(FlowySvgs.close_s, first);
   }
 }
 

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

@@ -96,6 +96,7 @@ class DocumentPluginWidgetBuilder extends PluginWidgetBuilder
       builder: (_, state) {
         return DocumentPage(
           view: view,
+          readOnlyStatus: notifier.readOnlyStatus,
           onDeleted: () => context?.onDeleted(view, deletedViewIndex),
           key: ValueKey(view.id),
         );

frontend/appflowy_flutter/lib/plugins/document/document_page.dart

@@ -30,10 +30,12 @@ class DocumentPage extends StatefulWidget {
     super.key,
     required this.onDeleted,
     required this.view,
+    required this.readOnlyStatus,
   });
 
   final VoidCallback onDeleted;
   final ViewPB view;
+  final bool readOnlyStatus;
 
   @override
   State<DocumentPage> createState() => _DocumentPageState();
@@ -107,6 +109,7 @@ class _DocumentPageState extends State<DocumentPage> {
 
   Widget _buildEditorPage(BuildContext context, DocumentState state) {
     final appflowyEditorPage = AppFlowyEditorPage(
+      autoFocus: !widget.readOnlyStatus,
       editorState: editorState!,
       styleCustomizer: EditorStyleCustomizer(
         context: context,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/built_in_page_widget.dart

@@ -2,7 +2,7 @@
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy/startup/plugin/plugin.dart';
 import 'package:appflowy/startup/startup.dart';
-import 'package:appflowy/workspace/application/tabs/tabs_bloc.dart';
+import 'package:appflowy/workspace/application/panes/panes_bloc/panes_bloc.dart';
 import 'package:appflowy/workspace/application/view/view_service.dart';
 import 'package:appflowy/workspace/presentation/widgets/pop_up_action.dart';
 import 'package:appflowy_backend/protobuf/flowy-error/errors.pbserver.dart';
@@ -155,12 +155,8 @@
           onSelected: (action, controller) async {
             switch (action.inner) {
               case _ActionType.viewDatabase:
-                getIt<TabsBloc>().add(
-                  TabsEvent.openPlugin(
-                    plugin: viewPB.plugin(),
-                    view: viewPB,
-                  ),
-                );
+                getIt<PanesBloc>()
+                    .add(OpenTabInActivePane(plugin: viewPB.plugin()));
                 break;
               case _ActionType.delete:
                 final transaction = widget.editorState.transaction;