refactor: cover node widget code (#2899)

* chore: change initial cover type's name to none

* chore: refactor cover node widget

* chore: use a constant instead of magic value

* fix: make the size of icon hover effect smaller

* chore: improve appearance of selected color

* test: add cover integration tests

* fix: inner ring of selected color in dark mode

* refactor: cover node to document header node

* test: simplify tests

* chore: rename files

frontend/appflowy_flutter/integration_test/database_row_page_test.dart

@@ -6,6 +6,7 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
 import 'util/database_test_op.dart';
+import 'util/emoji.dart';
 import 'util/ime.dart';
 import 'util/util.dart';
 

frontend/appflowy_flutter/integration_test/document/cover_image_test.dart

@@ -1,6 +1,8 @@
+import 'package:appflowy/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
+import '../util/emoji.dart';
 import '../util/util.dart';
 
 void main() {
@@ -22,15 +24,109 @@ void main() {
       await TestFolder.cleanTestLocation(null);
     });
 
-    testWidgets(
-        'hovering on cover image will display change and delete cover image buttons',
-        (tester) async {
+    testWidgets('document cover tests', (tester) async {
       await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      tester.expectToSeeNoDocumentCover();
+
+      // Hover over cover toolbar to show 'Add Cover' and 'Add Icon' buttons
+      await tester.editor.hoverOnCoverToolbar();
+      tester.expectToSeePluginAddCoverAndIconButton();
+
+      // Insert a document cover
+      await tester.editor.tapOnAddCover();
+      tester.expectToSeeDocumentCover(
+        CoverType.asset,
+        "assets/images/app_flowy_abstract_cover_1.jpg",
+      );
+
+      // Hover over the cover to show the 'Change Cover' and delete buttons
+      await tester.editor.hoverOnCover();
+      tester.expectChangeCoverAndDeleteButton();
+
+      // Change cover to a solid color background
+      await tester.editor.hoverOnCover();
+      await tester.editor.tapOnChangeCover();
+      await tester.editor.switchSolidColorBackground();
+      await tester.editor.dismissCoverPicker();
+      tester.expectToSeeDocumentCover(CoverType.color, "ffe8e0ff");
 
+      // Remove the cover
+      await tester.editor.hoverOnCover();
+      await tester.editor.tapOnRemoveCover();
+      tester.expectToSeeNoDocumentCover();
+    });
+
+    testWidgets('document icon tests', (tester) async {
+      await tester.initializeAppFlowy();
       await tester.tapGoButton();
-      await tester.editor.hoverOnCoverPluginAddButton();
 
+      tester.expectToSeeDocumentIcon(null);
+
+      // Hover over cover toolbar to show the 'Add Cover' and 'Add Icon' buttons
+      await tester.editor.hoverOnCoverToolbar();
       tester.expectToSeePluginAddCoverAndIconButton();
+
+      // Insert a document icon
+      await tester.editor.tapAddIconButton();
+      await tester.switchToEmojiList();
+      await tester.tapEmoji('😀');
+      tester.expectToSeeDocumentIcon('😀');
+
+      // Remove the document icon from the cover toolbar
+      await tester.editor.hoverOnCoverToolbar();
+      await tester.editor.tapRemoveIconButton();
+      tester.expectToSeeDocumentIcon(null);
+
+      // Add the icon back for further testing
+      await tester.editor.hoverOnCoverToolbar();
+      await tester.editor.tapAddIconButton();
+      await tester.switchToEmojiList();
+      await tester.tapEmoji('😀');
+      tester.expectToSeeDocumentIcon('😀');
+
+      // Change the document icon
+      await tester.editor.tapOnIconWidget();
+      await tester.switchToEmojiList();
+      await tester.tapEmoji('😅');
+      tester.expectToSeeDocumentIcon('😅');
+
+      // Remove the document icon from the icon picker
+      await tester.editor.tapOnIconWidget();
+      await tester.editor.tapRemoveIconButton(isInPicker: true);
+      tester.expectToSeeDocumentIcon(null);
+    });
+
+    testWidgets('icon and cover at the same time', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      tester.expectToSeeDocumentIcon(null);
+      tester.expectToSeeNoDocumentCover();
+
+      // Hover over cover toolbar to show the 'Add Cover' and 'Add Icon' buttons
+      await tester.editor.hoverOnCoverToolbar();
+      tester.expectToSeePluginAddCoverAndIconButton();
+
+      // Insert a document icon
+      await tester.editor.tapAddIconButton();
+      await tester.switchToEmojiList();
+      await tester.tapEmoji('😀');
+
+      // Insert a document cover
+      await tester.editor.tapOnAddCover();
+
+      // Expect to see the icon and cover at the same time
+      tester.expectToSeeDocumentIcon('😀');
+      tester.expectToSeeDocumentCover(
+        CoverType.asset,
+        "assets/images/app_flowy_abstract_cover_1.jpg",
+      );
+
+      // Hover over the cover toolbar and see that neither icons are shown
+      await tester.editor.hoverOnCoverToolbar();
+      tester.expectToSeeEmptyDocumentHeaderToolbar();
     });
   });
 }

frontend/appflowy_flutter/integration_test/util/database_test_op.dart

@@ -461,17 +461,6 @@ extension AppFlowyDatabaseTest on WidgetTester {
     await tapButton(find.byType(EmojiSelectionMenu));
   }
 
-  /// Must call [openEmojiPicker] first
-  Future<void> switchToEmojiList() async {
-    final icon = find.byIcon(Icons.tag_faces);
-    await tapButton(icon);
-  }
-
-  Future<void> tapEmoji(String emoji) async {
-    final emojiWidget = find.text(emoji);
-    await tapButton(emojiWidget);
-  }
-
   Future<void> tapDateCellInRowDetailPage() async {
     final findDateCell = find.byType(GridDateCell);
     await tapButton(findDateCell);

frontend/appflowy_flutter/integration_test/util/editor_test_operations.dart

@@ -1,4 +1,13 @@
+import 'dart:ui';
+
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/header/cover_editor.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_popover.dart';
 import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 
 import 'ime.dart';
@@ -26,14 +35,78 @@ class EditorOperations {
   }
 
   /// Hover on cover plugin button above the document
-  Future<void> hoverOnCoverPluginAddButton() async {
-    final editor = find.byWidgetPredicate(
-      (widget) => widget is AppFlowyEditor,
+  Future<void> hoverOnCoverToolbar() async {
+    final coverToolbar = find.byType(DocumentHeaderToolbar);
+    await tester.startGesture(
+      tester.getBottomLeft(coverToolbar).translate(5, -5),
+      kind: PointerDeviceKind.mouse,
+    );
+    await tester.pumpAndSettle();
+  }
+
+  /// Taps on the 'Add Icon' button in the cover toolbar
+  Future<void> tapAddIconButton() async {
+    await tester.tapButtonWithName(
+      LocaleKeys.document_plugins_cover_addIcon.tr(),
+    );
+    expect(find.byType(EmojiPopover), findsOneWidget);
+  }
+
+  /// Taps the 'Remove Icon' button in the cover toolbar and the icon popover
+  Future<void> tapRemoveIconButton({bool isInPicker = false}) async {
+    Finder button =
+        find.text(LocaleKeys.document_plugins_cover_removeIcon.tr());
+    if (isInPicker) {
+      button = find.descendant(of: find.byType(EmojiPopover), matching: button);
+    }
+
+    await tester.tapButton(button);
+  }
+
+  /// Requires that the document must already have an icon. This opens the icon
+  /// picker
+  Future<void> tapOnIconWidget() async {
+    final iconWidget = find.byType(EmojiIconWidget);
+    await tester.tapButton(iconWidget);
+  }
+
+  Future<void> tapOnAddCover() async {
+    await tester.tapButtonWithName(
+      LocaleKeys.document_plugins_cover_addCover.tr(),
     );
-    await tester.hoverOnWidget(
-      editor,
-      offset: tester.getTopLeft(editor).translate(20, 20),
+  }
+
+  Future<void> tapOnChangeCover() async {
+    await tester.tapButtonWithName(
+      LocaleKeys.document_plugins_cover_changeCover.tr(),
+    );
+  }
+
+  Future<void> switchSolidColorBackground() async {
+    final findPurpleButton = find.byWidgetPredicate(
+      (widget) => widget is ColorItem && widget.option.colorHex == "ffe8e0ff",
+    );
+    await tester.tapButton(findPurpleButton);
+  }
+
+  Future<void> tapOnRemoveCover() async {
+    await tester.tapButton(find.byType(DeleteCoverButton));
+  }
+
+  /// A cover must be present in the document to function properly since this
+  /// catches all cover types collectively
+  Future<void> hoverOnCover() async {
+    final cover = find.byType(DocumentCover);
+    await tester.startGesture(
+      tester.getCenter(cover),
+      kind: PointerDeviceKind.mouse,
     );
+    await tester.pumpAndSettle();
+  }
+
+  Future<void> dismissCoverPicker() async {
+    await tester.sendKeyEvent(LogicalKeyboardKey.escape);
+    await tester.pumpAndSettle();
   }
 
   /// trigger the slash command (selection menu)

frontend/appflowy_flutter/integration_test/util/emoji.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+import 'base.dart';
+
+extension EmojiTestExtension on WidgetTester {
+  /// Must call [openEmojiPicker] first
+  Future<void> switchToEmojiList() async {
+    final icon = find.byIcon(Icons.tag_faces);
+    await tapButton(icon);
+  }
+
+  Future<void> tapEmoji(String emoji) async {
+    final emojiWidget = find.text(emoji);
+    await tapButton(emojiWidget);
+  }
+}

frontend/appflowy_flutter/integration_test/util/expectation.dart

@@ -1,5 +1,7 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/banner.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart';
 import 'package:appflowy/workspace/presentation/home/home_stack.dart';
 import 'package:appflowy/workspace/presentation/home/menu/app/section/item.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -47,7 +49,7 @@ extension Expectation on WidgetTester {
     expect(exportSuccess, findsOneWidget);
   }
 
-  /// Expect to see the add button and icon button inside the document.
+  /// Expect to see the add button and icon button in the cover toolbar
   void expectToSeePluginAddCoverAndIconButton() {
     final addCover = find.textContaining(
       LocaleKeys.document_plugins_cover_addCover.tr(),
@@ -59,6 +61,54 @@ extension Expectation on WidgetTester {
     expect(addIcon, findsOneWidget);
   }
 
+  /// Expect to see the document header toolbar empty
+  void expectToSeeEmptyDocumentHeaderToolbar() {
+    final addCover = find.textContaining(
+      LocaleKeys.document_plugins_cover_addCover.tr(),
+    );
+    final addIcon = find.textContaining(
+      LocaleKeys.document_plugins_cover_addIcon.tr(),
+    );
+    expect(addCover, findsNothing);
+    expect(addIcon, findsNothing);
+  }
+
+  void expectToSeeDocumentIcon(String? emoji) {
+    if (emoji == null) {
+      final iconWidget = find.byType(EmojiIconWidget);
+      expect(iconWidget, findsNothing);
+      return;
+    }
+    final iconWidget = find.byWidgetPredicate(
+      (widget) => widget is EmojiIconWidget && widget.emoji == emoji,
+    );
+    expect(iconWidget, findsOneWidget);
+  }
+
+  void expectToSeeDocumentCover(CoverType type, String details) {
+    final findCover = find.byWidgetPredicate(
+      (widget) =>
+          widget is DocumentCover &&
+          widget.coverType == type &&
+          widget.coverDetails == details,
+    );
+    expect(findCover, findsOneWidget);
+  }
+
+  void expectToSeeNoDocumentCover() {
+    final findCover = find.byType(DocumentCover);
+    expect(findCover, findsNothing);
+  }
+
+  void expectChangeCoverAndDeleteButton() {
+    final findChangeCover = find.text(
+      LocaleKeys.document_plugins_cover_changeCover.tr(),
+    );
+    final findRemoveIcon = find.byType(DeleteCoverButton);
+    expect(findChangeCover, findsOneWidget);
+    expect(findRemoveIcon, findsOneWidget);
+  }
+
   /// Expect to see the user name on the home page
   void expectToSeeUserName(String name) {
     final userName = find.byWidgetPredicate(

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

@@ -123,7 +123,7 @@ class _DocumentPageState extends State<DocumentPage> {
       return const Placeholder();
     }
     final page = editorState!.document.root;
-    return CoverImageNodeWidget(
+    return DocumentHeaderNodeWidget(
       node: page,
       editorState: editorState!,
     );