feat: fetch url meta data on creating row

frontend/appflowy_flutter/integration_test/desktop/board/board_add_row_test.dart

@@ -3,12 +3,16 @@ import 'package:appflowy/plugins/database/board/presentation/board_page.dart';
 import 'package:appflowy/plugins/database/board/presentation/widgets/board_column_header.dart';
 import 'package:appflowy/plugins/database/widgets/card/card.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:appflowy_board/appflowy_board.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
 
 import '../../shared/util.dart';
+import '../../shared/database_test_op.dart';
 
 const defaultFirstCardName = 'Card 1';
 const defaultLastCardName = 'Card 3';
@@ -109,5 +113,68 @@ void main() {
         findsOneWidget,
       );
     });
+
+    testWidgets('on adding row fetch url meta data', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      await tester.createNewPageWithNameUnderParent(layout: ViewLayoutPB.Board);
+
+      final card1 = find.text('Card 1');
+      await tester.tapButton(card1);
+      const urlFieldName = 'url';
+      await tester.createField(
+        FieldType.URL,
+        name: urlFieldName,
+        layout: ViewLayoutPB.Board,
+      );
+      await tester.dismissRowDetailPage();
+
+      await tester.tapDatabaseSettingButton();
+      await tester.tapDatabaseGroupSettingsButton();
+      await tester.toggleFetchURLMetaData();
+      await tester.tapButtonWithName(LocaleKeys.board_urlFieldToFill.tr());
+      final findListView = find.ancestor(
+        of: find.text(LocaleKeys.board_urlFieldNone.tr()),
+        matching: find.byType(ListView),
+      );
+      await tester.tapButton(
+        find.descendant(of: findListView, matching: find.text(urlFieldName)),
+      );
+      await tester.dismissRowDetailPage();
+
+      await tester.tapButton(
+        find.byType(BoardColumnFooter).at(1),
+      );
+
+      const newCardName = 'https://appflowy.io/';
+      await tester.enterText(
+        find.descendant(
+          of: find.byType(BoardColumnFooter),
+          matching: find.byType(TextField),
+        ),
+        newCardName,
+      );
+      await tester.testTextInput.receiveAction(TextInputAction.done);
+      await tester.pumpAndSettle(const Duration(milliseconds: 3000));
+
+      await tester.tap(find.byType(AppFlowyBoard));
+      await tester.pumpAndSettle();
+
+      expect(
+        find.descendant(
+          of: find.byType(RowCard).last,
+          matching: find.text("AppFlowy.IO"),
+        ),
+        findsOneWidget,
+      );
+      expect(
+        find.descendant(
+          of: find.byType(RowCard).last,
+          matching: find.text(newCardName),
+        ),
+        findsOneWidget,
+      );
+    });
   });
 }

frontend/appflowy_flutter/integration_test/shared/database_test_op.dart

@@ -1165,6 +1165,44 @@ extension AppFlowyDatabaseTest on WidgetTester {
     await tapButton(button);
   }
 
+  /// Should call [tapDatabaseSettingButton] first.
+  Future<void> tapDatabaseGroupSettingsButton() async {
+    final findSettingItem = find.byType(DatabaseSettingsList);
+    final findLayoutButton = find.byWidgetPredicate(
+      (widget) =>
+          widget is FlowyText &&
+          widget.text == DatabaseSettingAction.showGroup.title(),
+    );
+
+    final button = find.descendant(
+      of: findSettingItem,
+      matching: findLayoutButton,
+    );
+
+    await tapButton(button);
+  }
+
+  /// Should call [tapDatabaseGroupSettingsButton] first.
+  Future<void> toggleFetchURLMetaData() async {
+    final findFetchURLText = find.byWidgetPredicate(
+      (widget) =>
+          widget is FlowyText &&
+          widget.text == LocaleKeys.board_fetchURLMetaData.tr(),
+    );
+
+    final findRow = find.ancestor(
+      of: findFetchURLText,
+      matching: find.byType(Row),
+    );
+
+    final findToggle = find.descendant(
+      of: findRow,
+      matching: find.byType(Toggle),
+    );
+
+    await tapButton(findToggle);
+  }
+
   Future<void> tapCalendarLayoutSettingButton() async {
     final findSettingItem = find.byType(DatabaseSettingsList);
     final findLayoutButton = find.byWidgetPredicate(

frontend/appflowy_flutter/lib/plugins/database/application/field/type_option/type_option_data_parser.dart

@@ -58,6 +58,13 @@ class TranslateTypeOptionDataParser
   }
 }
 
+class URLTypeOptionDataParser extends TypeOptionParser<URLTypeOptionPB> {
+  @override
+  URLTypeOptionPB fromBuffer(List<int> buffer) {
+    return URLTypeOptionPB.fromBuffer(buffer);
+  }
+}
+
 class MediaTypeOptionDataParser extends TypeOptionParser<MediaTypeOptionPB> {
   @override
   MediaTypeOptionPB fromBuffer(List<int> buffer) {

frontend/appflowy_flutter/lib/plugins/database/application/row/row_service.dart

@@ -155,6 +155,11 @@ class RowDataBuilder {
     _cellDataByFieldId[fieldInfo.field.id] = timestamp.toString();
   }
 
+  void insertURL(FieldInfo fieldInfo, String url) {
+    assert(fieldInfo.fieldType == FieldType.URL);
+    _cellDataByFieldId[fieldInfo.field.id] = url;
+  }
+
   Map<String, String> build() {
     return _cellDataByFieldId;
   }

frontend/appflowy_flutter/lib/plugins/database/board/application/board_bloc.dart

@@ -106,12 +106,24 @@ class BoardBloc extends Bloc<BoardEvent, BoardState> {
               (err) => Log.error('Failed to fetch user profile: ${err.msg}'),
             );
           },
-          createRow: (groupId, position, title, targetRowId) async {
+          createRow: (groupId, position, title, targetRowId, url) async {
             final primaryField = databaseController.fieldController.fieldInfos
                 .firstWhereOrNull((element) => element.isPrimary)!;
+            final urlField =
+                databaseController.fieldController.fieldInfos.firstWhereOrNull(
+              (field) =>
+                  field.id ==
+                  databaseController
+                      .databaseLayoutSetting?.board.urlFieldToFillId,
+            );
             final void Function(RowDataBuilder)? cellBuilder = title == null
                 ? null
-                : (builder) => builder.insertText(primaryField, title);
+                : (builder) {
+                    builder.insertText(primaryField, title);
+                    if (urlField != null && url != null) {
+                      builder.insertURL(urlField, url);
+                    }
+                  };
 
             final result = await RowBackendService.createRow(
               viewId: databaseController.viewId,
@@ -551,8 +563,9 @@ class BoardEvent with _$BoardEvent {
     String groupId,
     OrderObjectPositionTypePB position,
     String? title,
-    String? targetRowId,
-  ) = _CreateRow;
+    String? targetRowId, {
+    String? url,
+  }) = _CreateRow;
   const factory BoardEvent.createGroup(String name) = _CreateGroup;
   const factory BoardEvent.startEditingHeader(String groupId) =
       _StartEditingHeader;

frontend/appflowy_flutter/lib/plugins/database/board/presentation/board_page.dart

@@ -27,6 +27,8 @@ import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:string_validator/string_validator.dart';
+import 'package:metadata_fetch_plus/metadata_fetch_plus.dart';
 import 'package:universal_platform/universal_platform.dart';
 
 import '../../widgets/card/card.dart';
@@ -412,6 +414,7 @@ class _BoardColumnFooterState extends State<BoardColumnFooter> {
   final TextEditingController _textController = TextEditingController();
   late final FocusNode _focusNode;
   bool _isCreating = false;
+  bool _isFetchingURL = false;
 
   @override
   void initState() {
@@ -426,7 +429,7 @@ class _BoardColumnFooterState extends State<BoardColumnFooter> {
         return KeyEventResult.ignored;
       },
     )..addListener(() {
-        if (!_focusNode.hasFocus) {
+        if (!_focusNode.hasFocus && !_isFetchingURL) {
           setState(() => _isCreating = false);
         }
       });
@@ -483,23 +486,58 @@ class _BoardColumnFooterState extends State<BoardColumnFooter> {
         hintTextConstraints: const BoxConstraints(maxHeight: 36),
         controller: _textController,
         focusNode: _focusNode,
+        readOnly: _isFetchingURL,
+        suffixIcon: _isFetchingURL
+            ? Transform.scale(
+                scale: 0.5,
+                child: const CircularProgressIndicator(),
+              )
+            : null,
         onSubmitted: (name) {
-          context.read<BoardBloc>().add(
-                BoardEvent.createRow(
-                  widget.columnData.id,
-                  OrderObjectPositionTypePB.End,
-                  name,
-                  null,
-                ),
-              );
-          widget.scrollManager.scrollToBottom(widget.columnData.id);
-          _textController.clear();
-          _focusNode.requestFocus();
+          final boardBloc = context.read<BoardBloc>();
+          final fetchURL = boardBloc.databaseController.databaseLayoutSetting
+                  ?.board.fetchUrlMetaData ??
+              false;
+
+          String? url;
+          if (fetchURL && isURL(name)) {
+            setState(() => _isFetchingURL = true);
+            MetadataFetch.extract(name)
+                .then((data) {
+                  if (data != null && data.title != null) {
+                    url = name;
+                    name = data.title!;
+                  }
+                })
+                .whenComplete(() {
+                  setState(() => _isFetchingURL = false);
+                  _createRowExec(boardBloc, name, url);
+                })
+                .timeout(const Duration(seconds: 3))
+                .catchError((e) {});
+          } else {
+            _createRowExec(boardBloc, name, url);
+          }
         },
       ),
     );
   }
 
+  void _createRowExec(BoardBloc bloc, String name, [String? url]) {
+    bloc.add(
+      BoardEvent.createRow(
+        widget.columnData.id,
+        OrderObjectPositionTypePB.End,
+        name,
+        null,
+        url: url,
+      ),
+    );
+    widget.scrollManager.scrollToBottom(widget.columnData.id);
+    _textController.clear();
+    _focusNode.requestFocus();
+  }
+
   Widget _startCreatingCardsButton() {
     return BlocListener<BoardActionsCubit, BoardActionsState>(
       listener: (context, state) {

frontend/appflowy_flutter/lib/plugins/database/widgets/field/type_option_editor/date/date_time_format.dart

@@ -242,6 +242,34 @@ class IncludeTimeButton extends StatelessWidget {
   final Function(bool value) onChanged;
   final bool value;
 
+  @override
+  Widget build(BuildContext context) {
+    return ToggleButton(
+      title: LocaleKeys.grid_field_includeTime.tr(),
+      icon: FlowySvg(
+        FlowySvgs.clock_alarm_s,
+        color: Theme.of(context).iconTheme.color,
+      ),
+      onChanged: onChanged,
+      value: value,
+    );
+  }
+}
+
+class ToggleButton extends StatelessWidget {
+  const ToggleButton({
+    super.key,
+    required this.title,
+    required this.icon,
+    required this.onChanged,
+    required this.value,
+  });
+
+  final String title;
+  final FlowySvg icon;
+  final Function(bool value) onChanged;
+  final bool value;
+
   @override
   Widget build(BuildContext context) {
     return SizedBox(
@@ -250,12 +278,9 @@ class IncludeTimeButton extends StatelessWidget {
         padding: GridSize.typeOptionContentInsets,
         child: Row(
           children: [
-            FlowySvg(
-              FlowySvgs.clock_alarm_s,
-              color: Theme.of(context).iconTheme.color,
-            ),
+            icon,
             const HSpace(6),
-            FlowyText.medium(LocaleKeys.grid_field_includeTime.tr()),
+            FlowyText.medium(title),
             const Spacer(),
             Toggle(
               value: value,