feat: support upload svg as icon

frontend/appflowy_flutter/integration_test/desktop/sidebar/sidebar_icon_test.dart

@@ -1,17 +1,13 @@
-import 'dart:io';
-
 import 'package:appflowy/plugins/base/emoji/emoji_picker.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/base/emoji_picker_button.dart';
 import 'package:appflowy/shared/icon_emoji_picker/flowy_icon_emoji_picker.dart';
 import 'package:appflowy/shared/icon_emoji_picker/recent_icons.dart';
 import 'package:appflowy/workspace/presentation/widgets/view_title_bar.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:flowy_infra_ui/style_widget/text_field.dart';
-import 'package:flutter/services.dart';
+import 'package:flowy_svg/flowy_svg.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
-import 'package:path/path.dart' as p;
-import 'package:path_provider/path_provider.dart';
 
 import '../../shared/base.dart';
 import '../../shared/common_operations.dart';
@@ -215,17 +211,12 @@ void main() {
     }
   });
 
-  testWidgets('Update page custom icon in title bar', (tester) async {
+  testWidgets('Update page custom image icon in title bar', (tester) async {
     await tester.initializeAppFlowy();
     await tester.tapAnonymousSignInButton();
 
     /// prepare local image
-    final imagePath = await rootBundle.load('assets/test/images/sample.jpeg');
-    final tempDirectory = await getTemporaryDirectory();
-    final localImagePath = p.join(tempDirectory.path, 'sample.jpeg');
-    final imageFile = File(localImagePath)
-      ..writeAsBytesSync(imagePath.buffer.asUint8List());
-    final iconData = EmojiIconData.custom(imageFile.path);
+    final iconData = await tester.prepareImageIcon();
 
     // create document, board, grid and calendar views
     for (final value in ViewLayoutPB.values) {
@@ -259,4 +250,97 @@ void main() {
       );
     }
   });
+
+  testWidgets('Update page custom svg icon in title bar', (tester) async {
+    await tester.initializeAppFlowy();
+    await tester.tapAnonymousSignInButton();
+
+    /// prepare local image
+    final iconData = await tester.prepareSvgIcon();
+
+    // create document, board, grid and calendar views
+    for (final value in ViewLayoutPB.values) {
+      if (value == ViewLayoutPB.Chat) {
+        continue;
+      }
+
+      await tester.createNewPageWithNameUnderParent(
+        name: value.name,
+        parentName: gettingStarted,
+        layout: value,
+      );
+
+      // update its icon
+      await tester.updatePageIconInTitleBarByName(
+        name: value.name,
+        layout: value,
+        icon: iconData,
+      );
+
+      tester.expectViewHasIcon(
+        value.name,
+        value,
+        iconData,
+      );
+
+      tester.expectViewTitleHasIcon(
+        value.name,
+        value,
+        iconData,
+      );
+    }
+  });
+
+  testWidgets('Update page custom svg icon in title bar by pasting a link',
+      (tester) async {
+    await tester.initializeAppFlowy();
+    await tester.tapAnonymousSignInButton();
+
+    /// prepare local image
+    const testIconLink =
+        'https://beta.appflowy.cloud/api/file_storage/008e6f23-516b-4d8d-b1fe-2b75c51eee26/v1/blob/6bdf8dff%2D0e54%2D4d35%2D9981%2Dcde68bef1141/BGpLnRtb3AGBNgSJsceu70j83zevYKrMLzqsTIJcBeI=.svg';
+
+    /// create document, board, grid and calendar views
+    for (final value in ViewLayoutPB.values) {
+      if (value == ViewLayoutPB.Chat) {
+        continue;
+      }
+
+      await tester.createNewPageWithNameUnderParent(
+        name: value.name,
+        parentName: gettingStarted,
+        layout: value,
+      );
+
+      /// update its icon
+      await tester.updatePageIconInTitleBarByPasteALink(
+        name: value.name,
+        layout: value,
+        iconLink: testIconLink,
+      );
+
+      /// check if there is a svg in page
+      final pageName = tester.findPageName(
+        value.name,
+        layout: value,
+      );
+      final imageInPage = find.descendant(
+        of: pageName,
+        matching: find.byType(SvgPicture),
+      );
+      expect(imageInPage, findsOneWidget);
+
+      /// check if there is a svg in title
+      final imageInTitle = find.descendant(
+        of: find.byType(ViewTitleBar),
+        matching: find.byWidgetPredicate((w) {
+          if (w is! SvgPicture) return false;
+          final loader = w.bytesLoader;
+          if (loader is! SvgFileLoader) return false;
+          return loader.file.path.endsWith('.svg');
+        }),
+      );
+      expect(imageInTitle, findsOneWidget);
+    }
+  });
 }

frontend/appflowy_flutter/integration_test/mobile/document/icon_test.dart

@@ -1,15 +1,12 @@
-import 'dart:io';
-
+import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/mobile/presentation/base/view_page/app_bar_buttons.dart';
 import 'package:appflowy/mobile/presentation/presentation.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/page_style/_page_style_icon.dart';
 import 'package:appflowy/shared/icon_emoji_picker/flowy_icon_emoji_picker.dart';
-import 'package:flutter/services.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
-import 'package:path/path.dart' as p;
-import 'package:path_provider/path_provider.dart';
 
 import '../../shared/emoji.dart';
 import '../../shared/util.dart';
@@ -18,16 +15,11 @@ void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
   group('document title:', () {
-    testWidgets('update page custom icon in title bar', (tester) async {
+    testWidgets('update page custom image icon in title bar', (tester) async {
       await tester.launchInAnonymousMode();
 
       /// prepare local image
-      final imagePath = await rootBundle.load('assets/test/images/sample.jpeg');
-      final tempDirectory = await getTemporaryDirectory();
-      final localImagePath = p.join(tempDirectory.path, 'sample.jpeg');
-      final imageFile = File(localImagePath)
-        ..writeAsBytesSync(imagePath.buffer.asUint8List());
-      final iconData = EmojiIconData.custom(imageFile.path);
+      final iconData = await tester.prepareImageIcon();
 
       /// create an empty page
       await tester
@@ -50,16 +42,63 @@ void main() {
 
       /// check result
       final documentPage = find.byType(MobileDocumentScreen);
-      final rawEmojiIconWidget = find
+      final rawEmojiIconFinder = find
           .descendant(
             of: documentPage,
             matching: find.byType(RawEmojiIconWidget),
           )
-          .evaluate()
-          .first
-          .widget as RawEmojiIconWidget;
+          .last;
+      final rawEmojiIconWidget =
+          rawEmojiIconFinder.evaluate().first.widget as RawEmojiIconWidget;
       final iconDataInWidget = rawEmojiIconWidget.emoji;
       expect(iconDataInWidget.type, FlowyIconType.custom);
+      final imageFinder =
+          find.descendant(of: rawEmojiIconFinder, matching: find.byType(Image));
+      expect(imageFinder, findsOneWidget);
+    });
+
+    testWidgets('update page custom svg icon in title bar', (tester) async {
+      await tester.launchInAnonymousMode();
+
+      /// prepare local image
+      final iconData = await tester.prepareSvgIcon();
+
+      /// create an empty page
+      await tester
+          .tapButton(find.byKey(BottomNavigationBarItemType.add.valueKey));
+
+      /// show Page style page
+      await tester.tapButton(find.byType(MobileViewPageLayoutButton));
+      final pageStyleIcon = find.byType(PageStyleIcon);
+      final iconInPageStyleIcon = find.descendant(
+        of: pageStyleIcon,
+        matching: find.byType(RawEmojiIconWidget),
+      );
+      expect(iconInPageStyleIcon, findsNothing);
+
+      /// show icon picker
+      await tester.tapButton(pageStyleIcon);
+
+      /// upload custom icon
+      await tester.pickImage(iconData);
+
+      /// check result
+      final documentPage = find.byType(MobileDocumentScreen);
+      final rawEmojiIconFinder = find
+          .descendant(
+            of: documentPage,
+            matching: find.byType(RawEmojiIconWidget),
+          )
+          .last;
+      final rawEmojiIconWidget =
+          rawEmojiIconFinder.evaluate().first.widget as RawEmojiIconWidget;
+      final iconDataInWidget = rawEmojiIconWidget.emoji;
+      expect(iconDataInWidget.type, FlowyIconType.custom);
+      final svgFinder = find.descendant(
+        of: rawEmojiIconFinder,
+        matching: find.byType(SvgPicture),
+      );
+      expect(svgFinder, findsOneWidget);
     });
   });
 }

frontend/appflowy_flutter/integration_test/shared/common_operations.dart

@@ -50,6 +50,8 @@ import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
+import 'package:path/path.dart' as p;
+import 'package:path_provider/path_provider.dart';
 import 'package:universal_platform/universal_platform.dart';
 
 import 'emoji.dart';
@@ -677,6 +679,25 @@ extension CommonOperations on WidgetTester {
     await pumpAndSettle();
   }
 
+  Future<void> updatePageIconInTitleBarByPasteALink({
+    required String name,
+    required ViewLayoutPB layout,
+    required String iconLink,
+  }) 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 pasteImageLinkAsIcon(iconLink);
+    await pumpAndSettle();
+  }
+
   Future<void> openNotificationHub({int tabIndex = 0}) async {
     final finder = find.descendant(
       of: find.byType(NotificationButton),
@@ -935,6 +956,24 @@ extension CommonOperations on WidgetTester {
       ),
     );
   }
+
+  Future<EmojiIconData> prepareImageIcon() async {
+    final imagePath = await rootBundle.load('assets/test/images/sample.jpeg');
+    final tempDirectory = await getTemporaryDirectory();
+    final localImagePath = p.join(tempDirectory.path, 'sample.jpeg');
+    final imageFile = File(localImagePath)
+      ..writeAsBytesSync(imagePath.buffer.asUint8List());
+    return EmojiIconData.custom(imageFile.path);
+  }
+
+  Future<EmojiIconData> prepareSvgIcon() async {
+    final imagePath = await rootBundle.load('assets/test/images/sample.svg');
+    final tempDirectory = await getTemporaryDirectory();
+    final localImagePath = p.join(tempDirectory.path, 'sample.svg');
+    final imageFile = File(localImagePath)
+      ..writeAsBytesSync(imagePath.buffer.asUint8List());
+    return EmojiIconData.custom(imageFile.path);
+  }
 }
 
 extension SettingsFinder on CommonFinders {

frontend/appflowy_flutter/integration_test/shared/emoji.dart

@@ -1,20 +1,25 @@
 import 'dart:convert';
+import 'dart:io';
 
+import 'package:appflowy/plugins/document/presentation/editor_plugins/copy_and_paste/clipboard_service.dart';
 import 'package:appflowy/shared/icon_emoji_picker/flowy_icon_emoji_picker.dart';
 import 'package:appflowy/shared/icon_emoji_picker/icon_color_picker.dart';
 import 'package:appflowy/shared/icon_emoji_picker/icon_picker.dart';
 import 'package:appflowy/shared/icon_emoji_picker/icon_uploader.dart';
 import 'package:appflowy/shared/icon_emoji_picker/tab.dart';
+import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/space_icon_popup.dart';
 import 'package:cross_file/cross_file.dart';
 import 'package:desktop_drop/desktop_drop.dart';
 import 'package:flowy_infra_ui/style_widget/primary_rounded_button.dart';
 import 'package:flowy_svg/flowy_svg.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_emoji_mart/flutter_emoji_mart.dart';
 import 'package:flutter_test/flutter_test.dart';
 
 import 'base.dart';
+import 'common_operations.dart';
 
 extension EmojiTestExtension on WidgetTester {
   Future<void> tapEmoji(String emoji) async {
@@ -104,4 +109,37 @@ extension EmojiTestExtension on WidgetTester {
     );
     await tapButton(confirmButton);
   }
+
+  Future<void> pasteImageLinkAsIcon(String link) async {
+    final pickTab = find.byType(PickerTab);
+    expect(pickTab, findsOneWidget);
+    await pumpAndSettle();
+
+    /// switch to custom tab
+    final iconTab = find.descendant(
+      of: pickTab,
+      matching: find.text(PickerTabType.custom.tr),
+    );
+    expect(iconTab, findsOneWidget);
+    await tapButton(iconTab);
+
+    // mock the clipboard
+    await getIt<ClipboardService>()
+        .setData(ClipboardServiceData(plainText: link));
+
+    // paste the link
+    await simulateKeyEvent(
+      LogicalKeyboardKey.keyV,
+      isControlPressed: Platform.isLinux || Platform.isWindows,
+      isMetaPressed: Platform.isMacOS,
+    );
+    await pumpAndSettle(const Duration(seconds: 5));
+
+    /// confirm to upload
+    final confirmButton = find.descendant(
+      of: find.byType(IconUploader),
+      matching: find.byType(PrimaryRoundedButton),
+    );
+    await tapButton(confirmButton);
+  }
 }