feat: display the titles of a view's ancestors and the view's title o…

…n the title bar. (AppFlowy-IO#3898) * feat: add no pages inside tips * feat: show view's ancestors (include itself) title on bar * feat: show view's ancestors (include itself) title on bar * test: add integration tests * fix: integration tests
LucasXu0 · Nov 9, 2023 · 9586ea0 · 9586ea0
1 parent 42e7317
commit 9586ea0
Show file tree

Hide file tree

Showing 15 changed files with 507 additions and 70 deletions.
diff --git a/frontend/appflowy_flutter/integration_test/document/document_with_cover_image_test.dart b/frontend/appflowy_flutter/integration_test/document/document_with_cover_image_test.dart
@@ -1,5 +1,6 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:emoji_mart/emoji_mart.dart';
 import 'package:flutter/material.dart';
@@ -155,7 +156,11 @@ void main() {
       const hand = '👋🏿';
       await tester.tapEmoji(hand);
       tester.expectToSeeDocumentIcon(hand);
-      tester.isPageWithIcon(gettingStarted, hand);
+      tester.expectViewHasIcon(
+        gettingStarted,
+        ViewLayoutPB.Document,
+        hand,
+      );
     });
   });
 }
diff --git a/frontend/appflowy_flutter/integration_test/sidebar/sidebar_favorites_test.dart b/frontend/appflowy_flutter/integration_test/sidebar/sidebar_favorites_test.dart
@@ -53,7 +53,7 @@ void main() {
       await tester.favoriteViewByName(names[1]);
       expect(
         tester.findFavoritePageName(names[1]),
-        findsNWidgets(1),
+        findsNWidgets(2),
       );
 
       await tester.unfavoriteViewByName(gettingStarted);
@@ -99,7 +99,7 @@ void main() {
         );
         expect(
           tester.findFavoritePageName(name),
-          findsNothing,
+          findsOneWidget,
         );
       },
     );
@@ -127,11 +127,11 @@ void main() {
         expect(
           find.byWidgetPredicate(
             (widget) =>
-                widget is ViewItem &&
+                widget is SingleInnerViewItem &&
                 widget.view.isFavorite &&
                 widget.categoryType == FolderCategoryType.favorite,
           ),
-          findsNWidgets(3),
+          findsNWidgets(6),
         );
 
         await tester.hoverOnPageName(
@@ -144,13 +144,8 @@ void main() {
         );
 
         expect(
-          find.byWidgetPredicate(
-            (widget) =>
-                widget is ViewItem &&
-                widget.view.isFavorite &&
-                widget.categoryType == FolderCategoryType.favorite,
-          ),
-          findsNWidgets(2),
+          tester.findAllFavoritePages(),
+          findsNWidgets(3),
         );
 
         await tester.hoverOnPageName(
@@ -163,12 +158,7 @@ void main() {
         );
 
         expect(
-          find.byWidgetPredicate(
-            (widget) =>
-                widget is ViewItem &&
-                widget.view.isFavorite &&
-                widget.categoryType == FolderCategoryType.favorite,
-          ),
+          tester.findAllFavoritePages(),
           findsNothing,
         );
       },

diff --git a/frontend/appflowy_flutter/integration_test/sidebar/sidebar_icon_test.dart b/frontend/appflowy_flutter/integration_test/sidebar/sidebar_icon_test.dart
@@ -0,0 +1,76 @@
+import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.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';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  const emoji = '😁';
+
+  group('Icon', () {
+    testWidgets('Update page icon in sidebar', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      // create document, board, grid and calendar views
+      for (final value in ViewLayoutPB.values) {
+        await tester.createNewPageWithName(
+          name: value.name,
+          parentName: gettingStarted,
+          layout: value,
+        );
+
+        // update its icon
+        await tester.updatePageIconInSidebarByName(
+          name: value.name,
+          parentName: gettingStarted,
+          layout: value,
+          icon: emoji,
+        );
+
+        tester.expectViewHasIcon(
+          value.name,
+          value,
+          emoji,
+        );
+      }
+    });
+
+    testWidgets('Update page icon in title bar', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      // create document, board, grid and calendar views
+      for (final value in ViewLayoutPB.values) {
+        await tester.createNewPageWithName(
+          name: value.name,
+          parentName: gettingStarted,
+          layout: value,
+        );
+
+        // update its icon
+        await tester.updatePageIconInTitleBarByName(
+          name: value.name,
+          layout: value,
+          icon: emoji,
+        );
+
+        tester.expectViewHasIcon(
+          value.name,
+          value,
+          emoji,
+        );
+
+        tester.expectViewTitleHasIcon(
+          value.name,
+          value,
+          emoji,
+        );
+      }
+    });
+  });
+}
diff --git a/frontend/appflowy_flutter/integration_test/sidebar/sidebar_test_runner.dart b/frontend/appflowy_flutter/integration_test/sidebar/sidebar_test_runner.dart
@@ -1,8 +1,9 @@
 import 'package:integration_test/integration_test.dart';
 
-import 'sidebar_test.dart' as sidebar_test;
 import 'sidebar_expand_test.dart' as sidebar_expanded_test;
 import 'sidebar_favorites_test.dart' as sidebar_favorite_test;
+import 'sidebar_icon_test.dart' as sidebar_icon_test;
+import 'sidebar_test.dart' as sidebar_test;
 
 void startTesting() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
@@ -11,4 +12,5 @@ void startTesting() {
   sidebar_test.main();
   sidebar_expanded_test.main();
   sidebar_favorite_test.main();
+  sidebar_icon_test.main();
 }
diff --git a/frontend/appflowy_flutter/integration_test/util/common_operations.dart b/frontend/appflowy_flutter/integration_test/util/common_operations.dart
@@ -4,6 +4,7 @@ import 'package:appflowy/core/config/kv.dart';
 import 'package:appflowy/core/config/kv_keys.dart';
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/base/emoji_picker_button.dart';
 import 'package:appflowy/plugins/document/presentation/share/share_button.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/user/presentation/screens/screens.dart';
@@ -14,6 +15,7 @@ import 'package:appflowy/workspace/presentation/home/menu/view/view_action_type.
 import 'package:appflowy/workspace/presentation/home/menu/view/view_add_button.dart';
 import 'package:appflowy/workspace/presentation/home/menu/view/view_more_action_button.dart';
 import 'package:appflowy/workspace/presentation/settings/widgets/settings_language_view.dart';
+import 'package:appflowy/workspace/presentation/widgets/view_title_bar.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -23,6 +25,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 
+import 'emoji.dart';
 import 'util.dart';
 
 extension CommonOperations on WidgetTester {
@@ -442,6 +445,47 @@ extension CommonOperations on WidgetTester {
     );
     await tapButton(button);
   }
+
+  // update the page icon in the sidebar
+  Future<void> updatePageIconInSidebarByName({
+    required String name,
+    required String parentName,
+    required ViewLayoutPB layout,
+    required String icon,
+  }) async {
+    final iconButton = find.descendant(
+      of: findPageName(
+        name,
+        layout: layout,
+        parentName: parentName,
+      ),
+      matching:
+          find.byTooltip(LocaleKeys.document_plugins_cover_changeIcon.tr()),
+    );
+    await tapButton(iconButton);
+    await tapEmoji(icon);
+    await pumpAndSettle();
+  }
+
+  // update the page icon in the sidebar
+  Future<void> updatePageIconInTitleBarByName({
+    required String name,
+    required ViewLayoutPB layout,
+    required String icon,
+  }) async {
+    await openPage(
+      name,
+      layout: layout,
+    );
+    final title = find.descendant(
+      of: find.byType(ViewTitleBar),
+      matching: find.text(name),
+    );
+    await tapButton(title);
+    await tapButton(find.byType(EmojiPickerButton));
+    await tapEmoji(icon);
+    await pumpAndSettle();
+  }
 }
 
 extension ViewLayoutPBTest on ViewLayoutPB {

diff --git a/frontend/appflowy_flutter/integration_test/util/emoji.dart b/frontend/appflowy_flutter/integration_test/util/emoji.dart
@@ -1,10 +1,14 @@
+import 'package:emoji_mart/emoji_mart.dart';
 import 'package:flutter_test/flutter_test.dart';
 
 import 'base.dart';
 
 extension EmojiTestExtension on WidgetTester {
   Future<void> tapEmoji(String emoji) async {
-    final emojiWidget = find.text(emoji);
+    final emojiWidget = find.descendant(
+      of: find.byType(EmojiPicker),
+      matching: find.text(emoji),
+    );
     await tapButton(emojiWidget);
   }
 }
diff --git a/frontend/appflowy_flutter/integration_test/util/expectation.dart b/frontend/appflowy_flutter/integration_test/util/expectation.dart
@@ -5,6 +5,7 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emo
 import 'package:appflowy/workspace/application/sidebar/folder/folder_bloc.dart';
 import 'package:appflowy/workspace/presentation/home/home_stack.dart';
 import 'package:appflowy/workspace/presentation/home/menu/view/view_item.dart';
+import 'package:appflowy/workspace/presentation/widgets/view_title_bar.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@@ -164,7 +165,7 @@ extension Expectation on WidgetTester {
   }) {
     return find.byWidgetPredicate(
       (widget) =>
-          widget is ViewItem &&
+          widget is SingleInnerViewItem &&
           widget.view.isFavorite &&
           widget.categoryType == FolderCategoryType.favorite &&
           widget.view.name == name &&
@@ -173,6 +174,15 @@ extension Expectation on WidgetTester {
     );
   }
 
+  Finder findAllFavoritePages() {
+    return find.byWidgetPredicate(
+      (widget) =>
+          widget is SingleInnerViewItem &&
+          widget.view.isFavorite &&
+          widget.categoryType == FolderCategoryType.favorite,
+    );
+  }
+
   Finder findPageName(
     String name, {
     ViewLayoutPB layout = ViewLayoutPB.Document,
@@ -201,12 +211,23 @@ extension Expectation on WidgetTester {
     );
   }
 
-  void isPageWithIcon(String name, String emoji) {
-    final pageName = findPageName(name);
+  void expectViewHasIcon(String name, ViewLayoutPB layout, String emoji) {
+    final pageName = findPageName(
+      name,
+      layout: layout,
+    );
     final icon = find.descendant(
       of: pageName,
       matching: find.text(emoji),
     );
     expect(icon, findsOneWidget);
   }
+
+  void expectViewTitleHasIcon(String name, ViewLayoutPB layout, String emoji) {
+    final icon = find.descendant(
+      of: find.byType(ViewTitleBar),
+      matching: find.text(emoji),
+    );
+    expect(icon, findsOneWidget);
+  }
 }
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/tar_bar/tab_bar_view.dart b/frontend/appflowy_flutter/lib/plugins/database_view/tar_bar/tab_bar_view.dart
@@ -3,8 +3,8 @@ import 'package:appflowy/plugins/database_view/widgets/share_button.dart';
 import 'package:appflowy/plugins/util.dart';
 import 'package:appflowy/startup/plugin/plugin.dart';
 import 'package:appflowy/workspace/presentation/home/home_stack.dart';
-import 'package:appflowy/workspace/presentation/widgets/left_bar_item.dart';
 import 'package:appflowy/workspace/presentation/widgets/tab_bar_item.dart';
+import 'package:appflowy/workspace/presentation/widgets/view_title_bar.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -190,7 +190,7 @@ class DatabasePluginWidgetBuilder extends PluginWidgetBuilder {
   });
 
   @override
-  Widget get leftBarItem => ViewLeftBarItem(view: notifier.view);
+  Widget get leftBarItem => ViewTitleBar(view: notifier.view);
 
   @override
   Widget tabBarItem(String pluginId) => ViewTabBarItem(view: notifier.view);

diff --git a/frontend/appflowy_flutter/lib/plugins/document/document.dart b/frontend/appflowy_flutter/lib/plugins/document/document.dart
@@ -9,10 +9,10 @@ import 'package:appflowy/plugins/document/presentation/share/share_button.dart';
 import 'package:appflowy/plugins/util.dart';
 import 'package:appflowy/startup/plugin/plugin.dart';
 import 'package:appflowy/workspace/presentation/home/home_stack.dart';
-import 'package:appflowy/workspace/presentation/widgets/left_bar_item.dart';
 import 'package:appflowy/workspace/presentation/widgets/tab_bar_item.dart';
-import 'package:easy_localization/easy_localization.dart';
+import 'package:appflowy/workspace/presentation/widgets/view_title_bar.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
@@ -104,7 +104,7 @@ class DocumentPluginWidgetBuilder extends PluginWidgetBuilder
   }
 
   @override
-  Widget get leftBarItem => ViewLeftBarItem(view: view);
+  Widget get leftBarItem => ViewTitleBar(view: view);
 
   @override
   Widget tabBarItem(String pluginId) => ViewTabBarItem(view: notifier.view);