chore: bump version 0.2.2 (#2804 )

fix: unable insert a reference database (#2798 )
* fix: unable insert a reference database * test: add reference database tests * feat: set min height for document inside database
2023-06-15 18:55:21 +08:00 · 2023-06-15 16:33:44 +08:00 · 2023-06-15 10:37:51 +08:00 · 2023-06-14 22:16:33 +08:00 · 2023-06-14 19:14:41 +08:00 · 2023-06-13 15:59:18 +08:00
354 changed files with 9504 additions and 3562 deletions
@@ -23,7 +23,7 @@ on:

 env:
  FLUTTER_VERSION: "3.10.1"
-  RUST_TOOLCHAIN: "1.65"
+  RUST_TOOLCHAIN: "1.70"

 jobs:
  build:
@@ -68,7 +68,7 @@ jobs:
        with:
          prefix-key: ${{ matrix.os }}
          workspaces: |
-            frontend/rust-lib 
+            frontend/rust-lib

      - uses: davidB/rust-cargo-make@v1
        with:
@@ -118,3 +118,10 @@ jobs:
        working-directory: frontend
        run: |
          cargo make dart_unit_test
+
+      - uses: codecov/codecov-action@v3
+        with:
+          name: appflowy
+          flags: appflowy_flutter_unit_test
+          fail_ci_if_error: true
+          verbose: true
@@ -6,14 +6,18 @@ on:
      - "main"
      - "release/*"
    paths:
-      - "frontend/appflowy_flutter/**"
+      - ".github/workflows/flutter_ci.yaml"
+      - "frontend/**"
+      - "!frontend/appflowy_tauri/**"

  pull_request:
    branches:
      - "main"
      - "release/*"
    paths:
-      - "frontend/appflowy_flutter/**"
+      - ".github/workflows/flutter_ci.yaml"
+      - "frontend/**"
+      - "!frontend/appflowy_tauri/**"

 env:
  CARGO_TERM_COLOR: always
@@ -116,10 +120,9 @@ jobs:
          fi
        shell: bash

-      # - uses: codecov/codecov-action@v3
-      #   with:
-      #     name: appflowy
-      #     flags: appflowy
-      #     env_vars: ${{ matrix.os }}
-      #     fail_ci_if_error: true
-      #     verbose: true
+      - uses: codecov/codecov-action@v3
+        with:
+          name: appflowy
+          flags: appflowy_flutter_integrateion_test
+          fail_ci_if_error: true
+          verbose: true
@@ -7,7 +7,7 @@ on:

 env:
  FLUTTER_VERSION: "3.10.1"
-  RUST_TOOLCHAIN: "1.65"
+  RUST_TOOLCHAIN: "1.70"

 jobs:
  create-release:
@@ -21,7 +21,7 @@ on:

 env:
  CARGO_TERM_COLOR: always
-  RUST_TOOLCHAIN: "1.65"
+  RUST_TOOLCHAIN: "1.70"
  FLUTTER_VERSION: "3.10.1"

 jobs:
@@ -12,7 +12,7 @@ on:
 env:
  CARGO_TERM_COLOR: always
  FLUTTER_VERSION: "3.10.1"
-  RUST_TOOLCHAIN: "1.65"
+  RUST_TOOLCHAIN: "1.70"

 jobs:
  tests:
@@ -8,7 +8,7 @@ on:
 env:
  NODE_VERSION: "18.16.0"
  PNPM_VERSION: "8.5.0"
-  RUST_TOOLCHAIN: "1.65"
+  RUST_TOOLCHAIN: "1.70"

 jobs:
  tauri-build:
@@ -1,5 +1,63 @@
 # Release Notes

+## Version 0.2.2 - 06/15/2023
+### New Features
+- Added support for embedding a document in the database's row detail page
+- Added support for inserting an emoji in the database's row detail page
+
+### Other Updates
+- Added language selector on the welcome page
+- Added support for importing multiple markdown files all at once
+
+## Version 0.2.1 - 06/11/2023
+### New Features
+- Added support for creating or referencing a calendar in the document
+- Added `+` icon in grid's add field
+
+### Other Updates
+- Added vertical padding for progress bar
+- Hide url cell accessory when the content is empty
+
+### Bug fixes:
+- Fixed unable to export markdown
+- Fixed adding vertical padding for progress bar
+- Fixed database view didn't update after the database layout changed.
+
+## Version 0.2.0 - 06/08/2023
+
+### New Features
+- Improved checklists to support each cell having its own list
+- Drag and drop calendar events
+- Switch layouts (calendar, grid, kanban) of a database
+- New database properties: 'Updated At' and 'Created At'
+- Enabled hiding properties on the row detail page
+- Added support for reordering and saving row order in different database views.
+- Enabled each database view to have its own settings, including filter and sort options
+- Added support to convert `“` (double quote) into a block quote
+- Added support to convert `***` (three stars) into a divider
+- Added support for an 'Add' button to insert a paragraph in a document and display the slash menu
+- Added support for an 'Option' button to delete, duplicate, and customize block actions
+
+### Other Updates
+- Added support for importing v0.1.x documents and databases
+- Added support for database import and export to CSV
+- Optimized scroll behavior in documents.
+- Redesigned the launch page
+
+### Bug fixes
+- Fixed bugs related to numbers
+- Fixed issues with referenced databases in documents
+- Fixed menu overflow issues in documents
+
+### Data migration
+The data format of this version is not compatible with previous versions. Therefore, to migrate your data to the new version, you need to use the export and import functions. Please follow the guide to learn how to export and import your data.
+
+#### Export files in v0.1.6
+https://github.com/AppFlowy-IO/AppFlowy/assets/11863087/0c89bf2b-cd97-4a7b-b627-59df8d2967d9
+
+#### Import files in v0.2.0
+https://github.com/AppFlowy-IO/AppFlowy/assets/11863087/7b392f35-4972-497a-8a7f-f38efced32e2
+
 ## Version 0.1.5 - 11/05/2023

 ### Bug Fixes
@@ -23,7 +23,7 @@ CARGO_MAKE_EXTEND_WORKSPACE_MAKEFILE = true
 CARGO_MAKE_CRATE_FS_NAME = "dart_ffi"
 CARGO_MAKE_CRATE_NAME = "dart-ffi"
 LIB_NAME = "dart_ffi"
-CURRENT_APP_VERSION = "0.2.0"
+CURRENT_APP_VERSION = "0.2.2"
 FLUTTER_DESKTOP_FEATURES = "dart,rev-sqlite"
 PRODUCT_NAME = "AppFlowy"
 # CRATE_TYPE: https://doc.rust-lang.org/reference/linkage.html
@@ -70,3 +70,5 @@ windows/flutter/dart_ffi/
 **/.vscode/

 *.env
+
+coverage/
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Calendar / Calendar_Days">
+<path id="Vector" d="M8 4H7.2002C6.08009 4 5.51962 4 5.0918 4.21799C4.71547 4.40973 4.40973 4.71547 4.21799 5.0918C4 5.51962 4 6.08009 4 7.2002V8M8 4H16M8 4V2M16 4H16.8002C17.9203 4 18.4796 4 18.9074 4.21799C19.2837 4.40973 19.5905 4.71547 19.7822 5.0918C20 5.5192 20 6.07899 20 7.19691V8M16 4V2M4 8V16.8002C4 17.9203 4 18.4801 4.21799 18.9079C4.40973 19.2842 4.71547 19.5905 5.0918 19.7822C5.5192 20 6.07899 20 7.19691 20H16.8031C17.921 20 18.48 20 18.9074 19.7822C19.2837 19.5905 19.5905 19.2842 19.7822 18.9079C20 18.4805 20 17.9215 20 16.8036V8M4 8H20M16 16H16.002L16.002 16.002L16 16.002V16ZM12 16H12.002L12.002 16.002L12 16.002V16ZM8 16H8.002L8.00195 16.002L8 16.002V16ZM16.002 12V12.002L16 12.002V12H16.002ZM12 12H12.002L12.002 12.002L12 12.002V12ZM8 12H8.002L8.00195 12.002L8 12.002V12Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="-0.02 0 122.88 122.88" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  style="enable-background:new 0 0 122.84 122.88" xml:space="preserve">
+
+<g>
+
+<path d="M81.54,4.71c0-2.62,2.58-4.71,5.77-4.71c3.2,0,5.77,2.13,5.77,4.71V25.4c0,2.62-2.58,4.71-5.77,4.71 c-3.2,0-5.77-2.13-5.77-4.71V4.71L81.54,4.71z M20.4,89.87l7.55-0.47c0.16,1.22,0.5,2.16,1,2.79c0.82,1.04,1.99,1.56,3.51,1.56 c1.13,0,2.01-0.26,2.62-0.8C35.69,92.41,36,91.8,36,91.1c0-0.66-0.29-1.26-0.87-1.79c-0.58-0.53-1.93-1.02-4.06-1.49 c-3.49-0.78-5.96-1.82-7.45-3.12c-1.5-1.29-2.25-2.95-2.25-4.96c0-1.32,0.38-2.56,1.15-3.74c0.77-1.18,1.92-2.1,3.46-2.77 c1.54-0.67,3.65-1.01,6.32-1.01c3.29,0,5.79,0.61,7.52,1.84c1.72,1.22,2.75,3.17,3.08,5.84l-7.47,0.44 c-0.2-1.17-0.62-2.02-1.25-2.55c-0.64-0.53-1.52-0.8-2.64-0.8c-0.92,0-1.62,0.2-2.09,0.59c-0.47,0.39-0.7,0.87-0.7,1.43 c0,0.41,0.19,0.77,0.57,1.1c0.37,0.34,1.25,0.65,2.65,0.95c3.47,0.75,5.96,1.51,7.46,2.28c1.5,0.77,2.6,1.71,3.28,2.85 c0.68,1.13,1.02,2.4,1.02,3.81c0,1.65-0.46,3.17-1.37,4.56c-0.92,1.39-2.19,2.45-3.83,3.17c-1.64,0.72-3.7,1.08-6.19,1.08 c-4.37,0-7.4-0.84-9.09-2.53C21.58,94.6,20.62,92.46,20.4,89.87L20.4,89.87z M64.53,72.65h7.94v15.33c0,1.52-0.24,2.95-0.71,4.3 c-0.47,1.35-1.22,2.53-2.23,3.55c-1.01,1.01-2.07,1.72-3.18,2.13c-1.54,0.57-3.4,0.86-5.56,0.86c-1.25,0-2.62-0.09-4.1-0.26 c-1.48-0.17-2.72-0.52-3.71-1.04c-0.99-0.52-1.9-1.26-2.72-2.22c-0.83-0.96-1.39-1.95-1.69-2.96c-0.49-1.64-0.74-3.08-0.74-4.35 V72.65h7.94v15.69c0,1.4,0.39,2.5,1.16,3.28c0.78,0.79,1.86,1.19,3.23,1.19c1.36,0,2.43-0.39,3.21-1.17 c0.77-0.77,1.16-1.87,1.16-3.3V72.65L64.53,72.65z M77.85,72.65h7.42l9.65,14.21V72.65h7.51v25.73h-7.51l-9.59-14.13v14.13h-7.47 V72.65L77.85,72.65z M29.53,4.71c0-2.62,2.58-4.71,5.77-4.71c3.2,0,5.77,2.13,5.77,4.71V25.4c0,2.62-2.58,4.71-5.77,4.71 c-3.2,0-5.77-2.13-5.77-4.71V4.71L29.53,4.71z M7.56,44.09h107.62V22.66c0-0.8-0.31-1.55-0.84-2.04c-0.53-0.53-1.24-0.84-2.04-0.84 h-9.31c-1.78,0-3.2-2.63-3.2-4.41c0-1.78,1.42-3.2,3.2-3.2h10.53c2.58,0,4.88,1.07,6.57,2.75c1.69,1.69,2.75,4.04,2.75,6.57v92.06 c0,2.58-1.07,4.88-2.75,6.57c-1.69,1.69-4.04,2.75-6.57,2.75H9.33c-2.58,0-4.88-1.07-6.57-2.75C1.07,118.44,0,116.08,0,113.55 V21.49c0-2.58,1.07-4.88,2.75-6.57c1.69-1.69,4.04-2.75,6.57-2.75h11.28c1.78,0,3.2,1.42,3.2,3.2s-1.42,4.41-3.2,4.41H10.54 c-0.8,0-1.55,0.31-2.09,0.84c-0.53,0.53-0.84,1.24-0.84,2.09v21.43L7.56,44.09L7.56,44.09z M115.19,52.9H7.56v59.4 c0,0.8,0.31,1.55,0.84,2.09c0.53,0.53,1.24,0.84,2.09,0.84h101.76c0.8,0,1.55-0.31,2.09-0.84c0.53-0.53,0.84-1.24,0.84-2.09V52.9 L115.19,52.9z M50.36,19.73c-1.78,0-3.2-2.63-3.2-4.41c0-1.78,1.42-3.2,3.2-3.2h21.49c1.78,0,3.2,1.42,3.2,3.2 c0,1.78-1.42,4.41-3.2,4.41H50.36L50.36,19.73z"/>
+
+</g>
+
+</svg>
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99999 15.8333C13.2217 15.8333 15.8333 13.2216 15.8333 9.99996C15.8333 6.7783 13.2217 4.16663 9.99999 4.16663C6.77833 4.16663 4.16666 6.7783 4.16666 9.99996C4.16666 13.2216 6.77833 15.8333 9.99999 15.8333Z" stroke="#333333" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.16666 10H15.8333" stroke="#333333" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.0002 4.16663C11.4593 5.764 12.2884 7.83698 12.3335 9.99996C12.2884 12.1629 11.4593 14.2359 10.0002 15.8333C8.54109 14.2359 7.7119 12.1629 7.66684 9.99996C7.7119 7.83698 8.54109 5.764 10.0002 4.16663V4.16663Z" stroke="#333333" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,22 @@
+# Welcome to AppFlowy!
+
+## Here are the basics
+
+- [ ] Click anywhere and just start typing.
+- [ ] Highlight any text, and use the editing menu to _style_ **your** <u>writing</u> `however` you ~~like.~~
+- [ ] As soon as you type /a menu will pop up. Select different types of content blocks you can add.
+- [ ] Type `/` followed by `/bullet` or `/num` to create a list.
+- [x] Click `+ New Page `button at the bottom of your sidebar to add a new page.
+- [ ] Click `+` next to any page title in the sidebar to quickly add a new subpage, `Document`, `Grid`, or `Kanban Board`.
+
+---
+
+## Keyboard shortcuts, markdown, and code block
+
+1. Keyboard shortcuts [guide](https://appflowy.gitbook.io/docs/essential-documentation/shortcuts)
+1. Markdown [reference](https://appflowy.gitbook.io/docs/essential-documentation/markdown)
+1. Type `/code` to insert a code block
+
+## Have a question❓
+
+> Click `?` at the bottom right for help and support.
@@ -0,0 +1 @@
+# test
@@ -51,6 +51,12 @@
    "import": "Import",
    "moreOptions": "More options"
  },
+  "importPanel": {
+    "textAndMarkdown": "Text & Markdown",
+    "documentFromV010": "Document from v0.1.0",
+    "databaseFromV010": "Database from v0.1.0",
+    "csv": "CSV"
+  },
  "disclosureAction": {
    "rename": "Rename",
    "delete": "Delete",
@@ -368,11 +374,16 @@
      "grid": {
        "selectAGridToLinkTo": "Select a Grid to link to",
        "createANewGrid": "Create a new Grid"
+      },
+      "calendar": {
+        "selectACalendarToLinkTo": "Select a Calendar to link to",
+        "createANewCalendar": "Create a new Calendar"
      }
    },
    "plugins": {
      "referencedBoard": "Referenced Board",
      "referencedGrid": "Referenced Grid",
+      "referencedCalendar": "Referenced Calendar",
      "autoGeneratorMenuItemName": "OpenAI Writer",
      "autoGeneratorTitleName": "OpenAI: Ask AI to write anything...",
      "autoGeneratorLearnMore": "Learn more",
@@ -459,7 +470,9 @@
      "layoutDateField": "Layout calendar by",
      "noDateTitle": "No Date",
      "noDateHint": "Unscheduled events will show up here",
-      "clickToAdd": "Click to add to the calendar"
-    }
+      "clickToAdd": "Click to add to the calendar",
+      "name": "Calendar layout"
+    },
+    "referencedCalendarPrefix": "View of"
  }
 }
@@ -35,9 +35,7 @@ void main() {
    setUpAll(() async => await service.setUpAll());
    setUp(() async => await service.setUp());

-    testWidgets(
-        'integration test unzips the proper workspace and loads it correctly.',
-        (tester) async {
+    testWidgets('open the board with data structure in v0.2.0', (tester) async {
      await tester.initializeAppFlowy();
      expect(find.byType(AppFlowyBoard), findsOneWidget);
    });
@@ -1,54 +1,36 @@
-import 'package:flowy_infra_ui/widget/rounded_button.dart';
-import 'package:flutter/gestures.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
+
 import 'util/util.dart';

-/// Integration tests for an empty board. The [TestWorkspaceService] will load
-/// a workspace from an empty board `assets/test/workspaces/board.zip` for all
-/// tests.
-///
-/// To create another integration test with a preconfigured workspace.
-/// Use the following steps.
-/// 1. Create a new workspace from the AppFlowy launch screen.
-/// 2. Modify the workspace until it is suitable as the starting point for
-///    the integration test you need to land.
-/// 3. Use a zip utility program to zip the workspace folder that you created.
-/// 4. Add the zip file under `assets/test/workspaces/`
-/// 5. Add a new enumeration to [TestWorkspace] in `integration_test/utils/data.dart`.
-///    For example, if you added a workspace called `empty_calendar.zip`,
-///    then [TestWorkspace] should have the following value:
-/// ```dart
-/// enum TestWorkspace {
-///   board('board'),
-///   empty_calendar('empty_calendar');
-///
-///   /* code */
-/// }
-/// ```
-/// 6. Double check that the .zip file that you added is included as an asset in
-///    the pubspec.yaml file under appflowy_flutter.
 void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
-  const service = TestWorkspaceService(TestWorkspace.coverImage);

  group('cover image', () {
-    setUpAll(() async => await service.setUpAll());
-    setUp(() async => await service.setUp());
+    const location = 'cover_image';
+
+    setUp(() async {
+      await TestFolder.cleanTestLocation(location);
+      await TestFolder.setTestLocation(location);
+    });
+
+    tearDown(() async {
+      await TestFolder.cleanTestLocation(location);
+    });
+
+    tearDownAll(() async {
+      await TestFolder.cleanTestLocation(null);
+    });

    testWidgets(
        'hovering on cover image will display change and delete cover image buttons',
        (tester) async {
      await tester.initializeAppFlowy();
-      expect(find.byType(Image), findsOneWidget);

-      final TestPointer pointer = TestPointer(1, PointerDeviceKind.mouse);
-      final imageFinder = find.byType(Image);
-      final Offset offset = tester.getCenter(imageFinder);
+      await tester.tapGoButton();
+      await tester.editor.hoverOnCoverPluginAddButton();

-      pointer.hover(offset);
-      expect(find.byType(RoundedTextButton), findsOneWidget);
+      tester.expectToSeePluginAddCoverAndIconButton();
    });
  });
 }
@@ -0,0 +1,185 @@
+import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import 'util/database_test_op.dart';
+import 'util/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('grid cell', () {
+    const location = 'appflowy';
+
+    setUp(() async {
+      await TestFolder.cleanTestLocation(location);
+      await TestFolder.setTestLocation(location);
+    });
+
+    tearDown(() async {
+      await TestFolder.cleanTestLocation(location);
+    });
+
+    tearDownAll(() async {
+      await TestFolder.cleanTestLocation(null);
+    });
+
+    testWidgets('edit text cell', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      await tester.editCell(
+        rowIndex: 0,
+        fieldType: FieldType.RichText,
+        input: 'hello world',
+      );
+
+      await tester.assertCellContent(
+        rowIndex: 0,
+        fieldType: FieldType.RichText,
+        content: 'hello world',
+      );
+
+      await tester.pumpAndSettle();
+    });
+
+    testWidgets('edit number cell', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      const fieldType = FieldType.Number;
+
+      // Create a number field
+      await tester.createField(fieldType, fieldType.name);
+
+      await tester.editCell(
+        rowIndex: 0,
+        fieldType: fieldType,
+        input: '-1',
+      );
+      // edit the next cell to force the previous cell at row 0 to lose focus
+      await tester.editCell(
+        rowIndex: 1,
+        fieldType: fieldType,
+        input: '0.2',
+      );
+      // -1 -> -1
+      await tester.assertCellContent(
+        rowIndex: 0,
+        fieldType: fieldType,
+        content: '-1',
+      );
+
+      // edit the next cell to force the previous cell at row 1 to lose focus
+      await tester.editCell(
+        rowIndex: 2,
+        fieldType: fieldType,
+        input: '.1',
+      );
+      // 0.2 -> 0.2
+      await tester.assertCellContent(
+        rowIndex: 1,
+        fieldType: fieldType,
+        content: '0.2',
+      );
+
+      // edit the next cell to force the previous cell at row 2 to lose focus
+      await tester.editCell(
+        rowIndex: 0,
+        fieldType: fieldType,
+        input: '',
+      );
+      // .1 -> 0.1
+      await tester.assertCellContent(
+        rowIndex: 2,
+        fieldType: fieldType,
+        content: '0.1',
+      );
+
+      await tester.pumpAndSettle();
+    });
+
+    testWidgets('edit checkbox cell', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      await tester.assertCheckboxCell(rowIndex: 0, isSelected: false);
+      await tester.tapCheckboxCellInGrid(rowIndex: 0);
+      await tester.assertCheckboxCell(rowIndex: 0, isSelected: true);
+
+      await tester.tapCheckboxCellInGrid(rowIndex: 1);
+      await tester.tapCheckboxCellInGrid(rowIndex: 2);
+      await tester.assertCheckboxCell(rowIndex: 1, isSelected: true);
+      await tester.assertCheckboxCell(rowIndex: 2, isSelected: true);
+
+      await tester.pumpAndSettle();
+    });
+
+    testWidgets('edit create time cell', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      const fieldType = FieldType.CreatedTime;
+      // Create a create time field
+      // The create time field is not editable
+      await tester.createField(fieldType, fieldType.name);
+
+      await tester.tapCellInGrid(rowIndex: 0, fieldType: fieldType);
+
+      await tester.findDateEditor(findsNothing);
+
+      await tester.pumpAndSettle();
+    });
+
+    testWidgets('edit last time cell', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      const fieldType = FieldType.LastEditedTime;
+      // Create a last time field
+      // The last time field is not editable
+      await tester.createField(fieldType, fieldType.name);
+
+      await tester.tapCellInGrid(rowIndex: 0, fieldType: fieldType);
+
+      await tester.findDateEditor(findsNothing);
+
+      await tester.pumpAndSettle();
+    });
+
+    testWidgets('edit time cell', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      const fieldType = FieldType.DateTime;
+      await tester.createField(fieldType, fieldType.name);
+
+      // Tap the cell to invoke the field editor
+      await tester.tapCellInGrid(rowIndex: 0, fieldType: fieldType);
+      await tester.findDateEditor(findsOneWidget);
+
+      // Select the date
+      await tester.selectDay(content: 3);
+
+      await tester.pumpAndSettle();
+    });
+  });
+}
@@ -0,0 +1,202 @@
+import 'package:appflowy/plugins/database_view/grid/presentation/grid_page.dart';
+import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import 'util/database_test_op.dart';
+import 'util/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('grid page', () {
+    const location = 'appflowy';
+
+    setUp(() async {
+      await TestFolder.cleanTestLocation(location);
+      await TestFolder.setTestLocation(location);
+    });
+
+    tearDown(() async {
+      await TestFolder.cleanTestLocation(location);
+    });
+
+    tearDownAll(() async {
+      await TestFolder.cleanTestLocation(null);
+    });
+
+    testWidgets('rename existing field', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      // Invoke the field editor
+      await tester.tapGridFieldWithName('Name');
+      await tester.tapEditPropertyButton();
+
+      await tester.renameField('hello world');
+      await tester.dismissFieldEditor();
+
+      await tester.tapGridFieldWithName('hello world');
+      await tester.pumpAndSettle();
+    });
+
+    testWidgets('update field type of existing field', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      // Invoke the field editor
+      await tester.tapGridFieldWithName('Type');
+      await tester.tapEditPropertyButton();
+
+      await tester.tapTypeOptionButton();
+      await tester.selectFieldType(FieldType.Checkbox);
+      await tester.dismissFieldEditor();
+
+      await tester.assertFieldTypeWithFieldName(
+        'Type',
+        FieldType.Checkbox,
+      );
+      await tester.pumpAndSettle();
+    });
+
+    testWidgets('create a field and rename it', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      // create a new grid
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      // create a field
+      await tester.createField(FieldType.Checklist, 'checklist');
+
+      // check the field is created successfully
+      await tester.findFieldWithName('checklist');
+      await tester.pumpAndSettle();
+    });
+
+    testWidgets('delete field', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      // create a field
+      await tester.createField(FieldType.Checkbox, 'New field 1');
+
+      // Delete the field
+      await tester.tapGridFieldWithName('New field 1');
+      await tester.tapDeletePropertyButton();
+
+      // confirm delete
+      await tester.tapDialogOkButton();
+
+      await tester.noFieldWithName('New field 1');
+      await tester.pumpAndSettle();
+    });
+
+    testWidgets('duplicate field', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      // create a field
+      await tester.scrollToRight(find.byType(GridPage));
+      await tester.tapNewPropertyButton();
+      await tester.renameField('New field 1');
+      await tester.dismissFieldEditor();
+      await tester.createField(FieldType.RichText, 'New field 1');
+
+      // Delete the field
+      await tester.tapGridFieldWithName('New field 1');
+      await tester.tapDuplicatePropertyButton();
+
+      await tester.findFieldWithName('New field 1 (copy)');
+      await tester.pumpAndSettle();
+    });
+
+    testWidgets('hide field', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      // create a field
+      await tester.scrollToRight(find.byType(GridPage));
+      await tester.tapNewPropertyButton();
+      await tester.renameField('New field 1');
+      await tester.dismissFieldEditor();
+
+      // Delete the field
+      await tester.tapGridFieldWithName('New field 1');
+      await tester.tapHidePropertyButton();
+
+      await tester.noFieldWithName('New field 1');
+      await tester.pumpAndSettle();
+    });
+
+    testWidgets('create checklist field ', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      await tester.scrollToRight(find.byType(GridPage));
+      await tester.tapNewPropertyButton();
+
+      // Open the type option menu
+      await tester.tapTypeOptionButton();
+
+      await tester.selectFieldType(FieldType.Checklist);
+
+      // After update the field type, the cells should be updated
+      await tester.findCellByFieldType(FieldType.Checklist);
+
+      await tester.pumpAndSettle();
+    });
+
+    testWidgets('create list of fields', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      for (final fieldType in [
+        FieldType.Checklist,
+        FieldType.DateTime,
+        FieldType.Number,
+        FieldType.URL,
+        FieldType.MultiSelect,
+        FieldType.LastEditedTime,
+        FieldType.CreatedTime,
+        FieldType.Checkbox,
+      ]) {
+        await tester.scrollToRight(find.byType(GridPage));
+        await tester.tapNewPropertyButton();
+        await tester.renameField(fieldType.name);
+
+        // Open the type option menu
+        await tester.tapTypeOptionButton();
+
+        await tester.selectFieldType(fieldType);
+        await tester.dismissFieldEditor();
+
+        // After update the field type, the cells should be updated
+        await tester.findCellByFieldType(fieldType);
+        await tester.pumpAndSettle();
+      }
+    });
+  });
+}
@@ -0,0 +1,241 @@
+import 'package:appflowy/plugins/database_view/widgets/row/row_banner.dart';
+import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import 'util/database_test_op.dart';
+import 'util/ime.dart';
+import 'util/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('grid', () {
+    const location = 'appflowy';
+
+    setUp(() async {
+      await TestFolder.cleanTestLocation(location);
+      await TestFolder.setTestLocation(location);
+    });
+
+    tearDown(() async {
+      await TestFolder.cleanTestLocation(location);
+    });
+
+    tearDownAll(() async {
+      await TestFolder.cleanTestLocation(null);
+    });
+
+    testWidgets('open first row of the grid', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      // Create a new grid
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      // Hover first row and then open the row page
+      await tester.openFirstRowDetailPage();
+    });
+
+    testWidgets('insert emoji in the row detail page', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      // Create a new grid
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      // Hover first row and then open the row page
+      await tester.openFirstRowDetailPage();
+
+      await tester.hoverRowBanner();
+
+      await tester.openEmojiPicker();
+      await tester.switchToEmojiList();
+      await tester.tapEmoji('😀');
+
+      // After select the emoji, the EmojiButton will show up
+      await tester.tapButton(find.byType(EmojiButton));
+    });
+
+    testWidgets('update emoji in the row detail page', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      // Create a new grid
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      // Hover first row and then open the row page
+      await tester.openFirstRowDetailPage();
+      await tester.hoverRowBanner();
+      await tester.openEmojiPicker();
+      await tester.switchToEmojiList();
+      await tester.tapEmoji('😀');
+
+      // Update existing selected emoji
+      await tester.tapButton(find.byType(EmojiButton));
+      await tester.switchToEmojiList();
+      await tester.tapEmoji('😅');
+
+      // The emoji already displayed in the row banner
+      final emojiText = find.byWidgetPredicate(
+        (widget) => widget is FlowyText && widget.title == '😅',
+      );
+
+      // The number of emoji should be two. One in the row displayed in the grid
+      // one in the row detail page.
+      expect(emojiText, findsNWidgets(2));
+    });
+
+    testWidgets('remove emoji in the row detail page', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      // Create a new grid
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      // Hover first row and then open the row page
+      await tester.openFirstRowDetailPage();
+      await tester.hoverRowBanner();
+      await tester.openEmojiPicker();
+      await tester.switchToEmojiList();
+      await tester.tapEmoji('😀');
+
+      // Remove the emoji
+      await tester.tapButton(find.byType(RemoveEmojiButton));
+      final emojiText = find.byWidgetPredicate(
+        (widget) => widget is FlowyText && widget.title == '😀',
+      );
+      expect(emojiText, findsNothing);
+    });
+
+    testWidgets('create list of fields in row detail page', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      // Create a new grid
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      // Hover first row and then open the row page
+      await tester.openFirstRowDetailPage();
+
+      for (final fieldType in [
+        FieldType.Checklist,
+        FieldType.DateTime,
+        FieldType.Number,
+        FieldType.URL,
+        FieldType.MultiSelect,
+        FieldType.LastEditedTime,
+        FieldType.CreatedTime,
+        FieldType.Checkbox,
+      ]) {
+        await tester.tapRowDetailPageCreatePropertyButton();
+        await tester.renameField(fieldType.name);
+
+        // Open the type option menu
+        await tester.tapTypeOptionButton();
+
+        await tester.selectFieldType(fieldType);
+        await tester.dismissFieldEditor();
+
+        // After update the field type, the cells should be updated
+        await tester.findCellByFieldType(fieldType);
+        await tester.scrollRowDetailByOffset(const Offset(0, -50));
+      }
+    });
+
+    testWidgets('check document is exist in row detail page', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      // Create a new grid
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      // Hover first row and then open the row page
+      await tester.openFirstRowDetailPage();
+
+      // Each row detail page should have a document
+      await tester.assertDocumentExistInRowDetailPage();
+    });
+
+    testWidgets('update the content of the document and re-open it',
+        (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      // Create a new grid
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      // Hover first row and then open the row page
+      await tester.openFirstRowDetailPage();
+
+      // Wait for the document to be loaded
+      await tester.wait(500);
+
+      // Focus on the editor
+      final textBlock = find.byType(TextBlockComponentWidget);
+      await tester.tapAt(tester.getCenter(textBlock));
+
+      // Input some text
+      const inputText = 'Hello world';
+      await tester.ime.insertText(inputText);
+      expect(
+        find.textContaining(inputText, findRichText: true),
+        findsOneWidget,
+      );
+
+      // Tap outside to dismiss the field
+      await tester.tapAt(Offset.zero);
+      await tester.pumpAndSettle();
+
+      // Re-open the document
+      await tester.openFirstRowDetailPage();
+      expect(
+        find.textContaining(inputText, findRichText: true),
+        findsOneWidget,
+      );
+    });
+
+    testWidgets('delete row in row detail page', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      // Create a new grid
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      // Hover first row and then open the row page
+      await tester.openFirstRowDetailPage();
+
+      await tester.tapRowDetailPageDeleteRowButton();
+      await tester.tapEscButton();
+
+      await tester.assertNumberOfRowsInGridPage(2);
+    });
+
+    testWidgets('duplicate row in row detail page', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      // Create a new grid
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      // Hover first row and then open the row page
+      await tester.openFirstRowDetailPage();
+
+      await tester.tapRowDetailPageDuplicateRowButton();
+      await tester.tapEscButton();
+
+      await tester.assertNumberOfRowsInGridPage(4);
+    });
+  });
+}
@@ -0,0 +1,85 @@
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import 'util/database_test_op.dart';
+import 'util/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('grid', () {
+    const location = 'appflowy';
+
+    setUp(() async {
+      await TestFolder.cleanTestLocation(location);
+      await TestFolder.setTestLocation(location);
+    });
+
+    tearDown(() async {
+      await TestFolder.cleanTestLocation(location);
+    });
+
+    tearDownAll(() async {
+      await TestFolder.cleanTestLocation(null);
+    });
+
+    testWidgets('create row of the grid', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+      await tester.tapCreateRowButtonInGrid();
+
+      // The initial number of rows is 3
+      await tester.assertNumberOfRowsInGridPage(4);
+      await tester.pumpAndSettle();
+    });
+
+    testWidgets('create row from row menu of the grid', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+      await tester.hoverOnFirstRowOfGrid();
+
+      await tester.tapCreateRowButtonInRowMenuOfGrid();
+
+      // The initial number of rows is 3
+      await tester.assertNumberOfRowsInGridPage(4);
+      await tester.assertRowCountInGridPage(4);
+      await tester.pumpAndSettle();
+    });
+
+    testWidgets('delete row of the grid', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+      await tester.hoverOnFirstRowOfGrid();
+
+      // Open the row menu and then click the delete
+      await tester.tapRowMenuButtonInGrid();
+      await tester.tapDeleteOnRowMenu();
+
+      // The initial number of rows is 3
+      await tester.assertNumberOfRowsInGridPage(2);
+      await tester.assertRowCountInGridPage(2);
+      await tester.pumpAndSettle();
+    });
+
+    testWidgets('check number of row indicator in the initial grid',
+        (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+      await tester.assertRowCountInGridPage(3);
+
+      await tester.pumpAndSettle();
+    });
+  });
+}
@@ -0,0 +1,66 @@
+import 'package:appflowy_backend/protobuf/flowy-database2/setting_entities.pbenum.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import 'util/database_test_op.dart';
+import 'util/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('grid', () {
+    const location = 'appflowy';
+
+    setUp(() async {
+      await TestFolder.cleanTestLocation(location);
+      await TestFolder.setTestLocation(location);
+    });
+
+    tearDown(() async {
+      await TestFolder.cleanTestLocation(location);
+    });
+
+    tearDownAll(() async {
+      await TestFolder.cleanTestLocation(null);
+    });
+
+    testWidgets('update layout', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      // open setting
+      await tester.tapDatabaseSettingButton();
+      // select the layout
+      await tester.tapDatabaseLayoutButton();
+      // select layout by board
+      await tester.selectDatabaseLayoutType(DatabaseLayoutPB.Board);
+      await tester.assertCurrentDatabaseLayoutType(DatabaseLayoutPB.Board);
+
+      await tester.pumpAndSettle();
+    });
+
+    testWidgets('update layout multiple times', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.tapAddButton();
+      await tester.tapCreateGridButton();
+
+      // open setting
+      await tester.tapDatabaseSettingButton();
+      await tester.tapDatabaseLayoutButton();
+      await tester.selectDatabaseLayoutType(DatabaseLayoutPB.Board);
+      await tester.assertCurrentDatabaseLayoutType(DatabaseLayoutPB.Board);
+
+      await tester.tapDatabaseSettingButton();
+      await tester.tapDatabaseLayoutButton();
+      await tester.selectDatabaseLayoutType(DatabaseLayoutPB.Calendar);
+      await tester.assertCurrentDatabaseLayoutType(DatabaseLayoutPB.Calendar);
+
+      await tester.pumpAndSettle();
+    });
+  });
+}
@@ -0,0 +1,110 @@
+import 'package:appflowy/plugins/database_view/board/presentation/board_page.dart';
+import 'package:appflowy/plugins/database_view/grid/presentation/grid_page.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/base/link_to_page_widget.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder2/protobuf.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flowy_infra/uuid.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import 'util/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('database view in document', () {
+    const location = 'database_view';
+
+    setUp(() async {
+      await TestFolder.cleanTestLocation(location);
+      await TestFolder.setTestLocation(location);
+    });
+
+    tearDown(() async {
+      await TestFolder.cleanTestLocation(null);
+    });
+
+    testWidgets('insert a referenced grid', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await insertReferenceDatabase(tester, ViewLayoutPB.Grid);
+
+      // validate the referenced grid is inserted
+      expect(
+        find.descendant(
+          of: find.byType(AppFlowyEditor),
+          matching: find.byType(GridPage),
+        ),
+        findsOneWidget,
+      );
+    });
+
+    testWidgets('insert a referenced board', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await insertReferenceDatabase(tester, ViewLayoutPB.Board);
+
+      // validate the referenced board is inserted
+      expect(
+        find.descendant(
+          of: find.byType(AppFlowyEditor),
+          matching: find.byType(BoardPage),
+        ),
+        findsOneWidget,
+      );
+    });
+
+    // testWidgets('insert a referenced calendar', (tester) async {
+    //   await tester.initializeAppFlowy();
+    //   await tester.tapGoButton();
+
+    //   await insertReferenceDatabase(tester, ViewLayoutPB.Calendar);
+
+    //   // validate the referenced grid is inserted
+    //   expect(
+    //     find.descendant(
+    //       of: find.byType(AppFlowyEditor),
+    //       matching: find.byType(CalendarPage),
+    //     ),
+    //     findsOneWidget,
+    //   );
+    // });
+  });
+}
+
+/// Insert a referenced database of [layout] into the document
+Future<void> insertReferenceDatabase(
+  WidgetTester tester,
+  ViewLayoutPB layout,
+) async {
+  // create a new grid
+  final id = uuid();
+  final name = '${layout.name}_$id';
+  await tester.createNewPageWithName(
+    layout,
+    name,
+  );
+  // create a new document
+  await tester.createNewPageWithName(
+    ViewLayoutPB.Document,
+    'insert_a_reference_${layout.name}',
+  );
+  // tap the first line of the document
+  await tester.editor.tapLineOfEditorAt(0);
+  // insert a referenced grid
+  await tester.editor.showSlashMenu();
+  await tester.editor.tapSlashMenuItemWithName(
+    layout.referencedMenuName,
+  );
+
+  final linkToPageMenu = find.byType(LinkToPageMenu);
+  expect(linkToPageMenu, findsOneWidget);
+  final referencedDatabase = find.descendant(
+    of: linkToPageMenu,
+    matching: find.findTextInFlowyText(name),
+  );
+  expect(referencedDatabase, findsOneWidget);
+  await tester.tapButton(referencedDatabase);
+}
@@ -0,0 +1,60 @@
+import 'dart:io';
+
+import 'package:flutter/services.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import 'util/mock/mock_file_picker.dart';
+import 'util/util.dart';
+import 'package:path/path.dart' as p;
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('import files', () {
+    const location = 'import_files';
+
+    setUp(() async {
+      await TestFolder.cleanTestLocation(location);
+      await TestFolder.setTestLocation(location);
+    });
+
+    tearDown(() async {
+      await TestFolder.cleanTestLocation(location);
+    });
+
+    tearDownAll(() async {
+      await TestFolder.cleanTestLocation(null);
+    });
+
+    testWidgets('import multiple markdown files', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      // expect to see a readme page
+      tester.expectToSeePageName(readme);
+
+      await tester.tapAddButton();
+      await tester.tapImportButton();
+
+      final testFileNames = ['test1.md', 'test2.md'];
+      final fileLocation = await tester.currentFileLocation();
+      for (final fileName in testFileNames) {
+        final str = await rootBundle.loadString(
+          p.join(
+            'assets/test/workspaces/markdowns',
+            fileName,
+          ),
+        );
+        File(p.join(fileLocation, fileName)).writeAsStringSync(str);
+      }
+      // mock get files
+      await mockPickFilePaths(testFileNames, name: location);
+
+      await tester.tapTextAndMarkdownButton();
+
+      tester.expectToSeePageName('test1');
+      tester.expectToSeePageName('test2');
+    });
+  });
+}
@@ -0,0 +1,45 @@
+import 'package:appflowy/workspace/presentation/settings/widgets/settings_language_view.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import 'util/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('document', () {
+    const location = 'appflowy';
+
+    setUpAll(() async {
+      await TestFolder.setTestLocation(location);
+    });
+
+    tearDownAll(() async {
+      await TestFolder.cleanTestLocation(null);
+    });
+
+    testWidgets(
+        'change the language successfully when launching the app for the first time',
+        (tester) async {
+      await tester.initializeAppFlowy();
+
+      await tester.tapLanguageSelectorOnWelcomePage();
+      expect(find.byType(LanguageItemsListView), findsOneWidget);
+
+      await tester.tapLanguageItem(languageCode: 'zh', countryCode: 'CN');
+      tester.expectToSeeText('开始');
+
+      await tester.tapLanguageItem(languageCode: 'en', scrollDelta: -100);
+      tester.expectToSeeText('Quick Start');
+
+      await tester.tapLanguageItem(languageCode: 'it', countryCode: 'IT');
+      tester.expectToSeeText('Andiamo');
+    });
+
+    /// Make sure this test is executed after the test above.
+    testWidgets('check the language after relaunching the app', (tester) async {
+      await tester.initializeAppFlowy();
+      tester.expectToSeeText('Andiamo');
+    });
+  });
+}
@@ -1,10 +1,11 @@
 import 'package:integration_test/integration_test.dart';

-import 'board_test.dart' as board_test;
 import 'switch_folder_test.dart' as switch_folder_test;
-import 'empty_document_test.dart' as empty_document_test;
-import 'open_ai_smart_menu_test.dart' as smart_menu_test;
 import 'document_test.dart' as document_test;
+import 'cover_image_test.dart' as cover_image_test;
+import 'share_markdown_test.dart' as share_markdown_test;
+import 'import_files_test.dart' as import_files_test;
+import 'document_with_database_test.dart' as document_with_database_test;

 /// The main task runner for all integration tests in AppFlowy.
 ///
@@ -16,8 +17,12 @@ import 'document_test.dart' as document_test;
 void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
  switch_folder_test.main();
-  board_test.main();
-  empty_document_test.main();
-  smart_menu_test.main();
+  cover_image_test.main();
  document_test.main();
+  share_markdown_test.main();
+  import_files_test.main();
+  document_with_database_test.main();
+  // board_test.main();
+  // empty_document_test.main();
+  // smart_menu_test.main();
 }
@@ -0,0 +1,108 @@
+import 'dart:io';
+
+import 'package:appflowy/plugins/document/presentation/share/share_button.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import 'util/mock/mock_file_picker.dart';
+import 'util/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('share markdown in document page', () {
+    const location = 'markdown';
+
+    setUp(() async {
+      await TestFolder.cleanTestLocation(location);
+      await TestFolder.setTestLocation(location);
+    });
+
+    tearDown(() async {
+      await TestFolder.cleanTestLocation(location);
+    });
+
+    tearDownAll(() async {
+      await TestFolder.cleanTestLocation(null);
+    });
+
+    testWidgets('click the share button in document page', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      // expect to see a readme page
+      tester.expectToSeePageName(readme);
+
+      // mock the file picker
+      final path = await mockSaveFilePath(location, 'test.md');
+      // click the share button and select markdown
+      await tester.tapShareButton();
+      await tester.tapMarkdownButton();
+
+      // expect to see the success dialog
+      tester.expectToExportSuccess();
+
+      final file = File(path);
+      final isExist = file.existsSync();
+      expect(isExist, true);
+      final markdown = file.readAsStringSync();
+      expect(markdown, expectedMarkdown);
+    });
+
+    testWidgets(
+      'share the markdown after renaming the document name',
+      (tester) async {
+        await tester.initializeAppFlowy();
+        await tester.tapGoButton();
+
+        // expect to see a readme page
+        tester.expectToSeePageName(readme);
+
+        // rename the document
+        await tester.hoverOnPageName(readme);
+        await tester.renamePage('example');
+
+        final shareButton = find.byType(ShareActionList);
+        final shareButtonState =
+            tester.state(shareButton) as ShareActionListState;
+        final path =
+            await mockSaveFilePath(location, '${shareButtonState.name}.md');
+
+        // click the share button and select markdown
+        await tester.tapShareButton();
+        await tester.tapMarkdownButton();
+
+        // expect to see the success dialog
+        tester.expectToExportSuccess();
+
+        final file = File(path);
+        final isExist = file.existsSync();
+        expect(isExist, true);
+      },
+    );
+  });
+}
+
+const expectedMarkdown = r'''
+# Welcome to AppFlowy!
+## Here are the basics
+- [ ] Click anywhere and just start typing.
+- [ ] Highlight any text, and use the editing menu to _style_ **your** <u>writing</u> `however` you ~~like.~~
+- [ ] As soon as you type `/` a menu will pop up. Select different types of content blocks you can add.
+- [ ] Type `/` followed by `/bullet` or `/num` to create a list.
+- [x] Click `+ New Page `button at the bottom of your sidebar to add a new page.
+- [ ] Click `+` next to any page title in the sidebar to quickly add a new subpage, `Document`, `Grid`, or `Kanban Board`.
+
+---
+
+## Keyboard shortcuts, markdown, and code block
+1. Keyboard shortcuts [guide](https://appflowy.gitbook.io/docs/essential-documentation/shortcuts)
+1. Markdown [reference](https://appflowy.gitbook.io/docs/essential-documentation/markdown)
+1. Type `/code` to insert a code block
+
+## Have a question❓
+> Click `?` at the bottom right for help and support.
+
+
+
+''';
@@ -1,5 +1,4 @@
-import 'package:appflowy/user/presentation/folder/folder_widget.dart';
-import 'package:flowy_infra_ui/style_widget/text_field.dart';
+import 'package:appflowy/workspace/application/settings/prelude.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';

@@ -25,69 +24,22 @@ void main() {
      await TestFolder.cleanTestLocation(null);
    });

-    testWidgets(
-        'customize folder name and path when launching app in first time',
-        (tester) async {
-      const folderName = 'appflowy';
-      await TestFolder.cleanTestLocation(folderName);
-
-      await tester.initializeAppFlowy();
-
-      // Click create button
-      await tester.tapCreateButton();
-
-      // Set directory
-      final cfw = find.byType(CreateFolderWidget);
-      expect(cfw, findsOneWidget);
-      final state = tester.state(cfw) as CreateFolderWidgetState;
-      final dir = await TestFolder.testLocation(null);
-      state.directory = dir.path;
-
-      // input folder name
-      final ftf = find.byType(FlowyTextField);
-      expect(ftf, findsOneWidget);
-      await tester.enterText(ftf, 'appflowy');
-
-      // Click create button again
-      await tester.tapCreateButton();
-
-      tester.expectToSeeWelcomePage();
-
-      await TestFolder.cleanTestLocation(folderName);
-    });
-
-    testWidgets('open a new folder when launching app in first time',
-        (tester) async {
-      const folderName = 'appflowy';
-      await TestFolder.cleanTestLocation(folderName);
-      await TestFolder.setTestLocation(folderName);
-
-      await tester.initializeAppFlowy();
-
-      // tap open button
-      await mockGetDirectoryPath(folderName);
-      await tester.tapOpenFolderButton();
-
-      await tester.wait(1000);
-      tester.expectToSeeWelcomePage();
-
-      await TestFolder.cleanTestLocation(folderName);
-    });
-
    testWidgets('switch to B from A, then switch to A again', (tester) async {
      const String userA = 'userA';
      const String userB = 'userB';

      await TestFolder.cleanTestLocation(userA);
+      await TestFolder.cleanTestLocation(userB);
      await TestFolder.setTestLocation(userA);

      await tester.initializeAppFlowy();

      await tester.tapGoButton();
-      tester.expectToSeeWelcomePage();
+      tester.expectToSeeHomePage();

      // switch to user B
      {
+        // set user name to userA
        await tester.openSettings();
        await tester.openSettingsPage(SettingsPage.user);
        await tester.enterUserName(userA);
@@ -99,15 +51,16 @@ void main() {
        await mockGetDirectoryPath(userB);
        await tester.tapCustomLocationButton();
        await tester.pumpAndSettle();
-        tester.expectToSeeWelcomePage();
+        tester.expectToSeeHomePage();
+
+        // set user name to userB
+        await tester.openSettings();
+        await tester.openSettingsPage(SettingsPage.user);
+        await tester.enterUserName(userB);
      }

      // switch to the userA
      {
-        await tester.openSettings();
-        await tester.openSettingsPage(SettingsPage.user);
-        await tester.enterUserName(userB);
-
        await tester.openSettingsPage(SettingsPage.files);
        await tester.pumpAndSettle();

@@ -116,8 +69,8 @@ void main() {
        await tester.tapCustomLocationButton();

        await tester.pumpAndSettle();
-        tester.expectToSeeWelcomePage();
-        expect(find.textContaining(userA), findsOneWidget);
+        tester.expectToSeeHomePage();
+        tester.expectToSeeUserName(userA);
      }

      // switch to the userB again
@@ -131,8 +84,8 @@ void main() {
        await tester.tapCustomLocationButton();

        await tester.pumpAndSettle();
-        tester.expectToSeeWelcomePage();
-        expect(find.textContaining(userB), findsOneWidget);
+        tester.expectToSeeHomePage();
+        tester.expectToSeeUserName(userB);
      }

      await TestFolder.cleanTestLocation(userA);
@@ -145,7 +98,7 @@ void main() {
      await tester.tapGoButton();

      // home and readme document
-      tester.expectToSeeWelcomePage();
+      tester.expectToSeeHomePage();

      // open settings and restore the location
      await tester.openSettings();
@@ -3,6 +3,7 @@ import 'dart:io';
 import 'package:appflowy/core/config/kv_keys.dart';
 import 'package:appflowy/main.dart' as app;
 import 'package:appflowy/startup/tasks/prelude.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
@@ -91,7 +92,16 @@ extension AppFlowyTestBase on WidgetTester {
    String tr, {
    int milliseconds = 500,
  }) async {
-    final button = find.text(tr, findRichText: true);
+    Finder button = find.text(
+      tr,
+      findRichText: true,
+      skipOffstage: false,
+    );
+    if (button.evaluate().isEmpty) {
+      button = find.byWidgetPredicate(
+        (widget) => widget is FlowyText && widget.title == tr,
+      );
+    }
    await tapButton(
      button,
      milliseconds: milliseconds,
@@ -116,3 +126,11 @@ extension AppFlowyTestBase on WidgetTester {
    return;
  }
 }
+
+extension AppFlowyFinderTestBase on CommonFinders {
+  Finder findTextInFlowyText(String text) {
+    return find.byWidgetPredicate(
+      (widget) => widget is FlowyText && widget.title == text,
+    );
+  }
+}
@@ -0,0 +1,263 @@
+import 'dart:ui';
+import 'package:appflowy_backend/log.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+
+import 'package:appflowy/plugins/document/presentation/share/share_button.dart';
+import 'package:appflowy/user/presentation/skip_log_in_screen.dart';
+import 'package:appflowy/workspace/presentation/home/menu/app/header/add_button.dart';
+import 'package:appflowy/workspace/presentation/home/menu/app/section/item.dart';
+import 'package:appflowy/workspace/presentation/settings/widgets/settings_language_view.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/widget/buttons/primary_button.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+import 'util.dart';
+
+extension CommonOperations on WidgetTester {
+  /// Get current file location of AppFlowy.
+  Future<String> currentFileLocation() async {
+    return TestFolder.currentLocation();
+  }
+
+  /// Tap the GetStart button on the launch page.
+  Future<void> tapGoButton() async {
+    final goButton = find.byType(GoButton);
+    await tapButton(goButton);
+  }
+
+  /// Tap the + button on the home page.
+  Future<void> tapAddButton() async {
+    final addButton = find.byType(AddButton);
+    await tapButton(addButton);
+  }
+
+  /// Tap the create document button.
+  ///
+  /// Must call [tapAddButton] first.
+  Future<void> tapCreateDocumentButton() async {
+    await tapButtonWithName(LocaleKeys.document_menuName.tr());
+  }
+
+  /// Tap the create grid button.
+  ///
+  /// Must call [tapAddButton] first.
+  Future<void> tapCreateGridButton() async {
+    await tapButtonWithName(LocaleKeys.grid_menuName.tr());
+  }
+
+  /// Tap the import button.
+  ///
+  /// Must call [tapAddButton] first.
+  Future<void> tapImportButton() async {
+    await tapButtonWithName(LocaleKeys.moreAction_import.tr());
+  }
+
+  /// Tap the import from text & markdown button.
+  ///
+  /// Must call [tapImportButton] first.
+  Future<void> tapTextAndMarkdownButton() async {
+    await tapButtonWithName(LocaleKeys.importPanel_textAndMarkdown.tr());
+  }
+
+  /// Tap the LanguageSelectorOnWelcomePage widget on the launch page.
+  Future<void> tapLanguageSelectorOnWelcomePage() async {
+    final languageSelector = find.byType(LanguageSelectorOnWelcomePage);
+    await tapButton(languageSelector);
+  }
+
+  /// Tap languageItem on LanguageItemsListView.
+  ///
+  /// [scrollDelta] is the distance to scroll the ListView.
+  /// Default value is 100
+  ///
+  /// If it is positive -> scroll down.
+  ///
+  /// If it is negative -> scroll up.
+  Future<void> tapLanguageItem({
+    required String languageCode,
+    String? countryCode,
+    double? scrollDelta,
+  }) async {
+    final languageItemsListView = find.descendant(
+      of: find.byType(ListView),
+      matching: find.byType(Scrollable),
+    );
+
+    final languageItem = find.byWidgetPredicate(
+      (widget) =>
+          widget is LanguageItem &&
+          widget.locale.languageCode == languageCode &&
+          widget.locale.countryCode == countryCode,
+    );
+
+    // scroll the ListView until zHCNLanguageItem shows on the screen.
+    await scrollUntilVisible(
+      languageItem,
+      scrollDelta ?? 100,
+      scrollable: languageItemsListView,
+      // maxHeight of LanguageItemsListView
+      maxScrolls: 400,
+    );
+
+    try {
+      await tapButton(languageItem);
+    } on FlutterError catch (e) {
+      Log.warn('tapLanguageItem error: $e');
+    }
+  }
+
+  /// Hover on the widget.
+  Future<void> hoverOnWidget(
+    Finder finder, {
+    Offset? offset,
+    Future<void> Function()? onHover,
+  }) async {
+    try {
+      final gesture = await createGesture(kind: PointerDeviceKind.mouse);
+      await gesture.addPointer(location: Offset.zero);
+      await pump();
+      await gesture.moveTo(offset ?? getCenter(finder));
+      await pumpAndSettle();
+      await onHover?.call();
+      await gesture.removePointer();
+    } catch (err) {
+      Log.error('hoverOnWidget error: $err');
+    }
+  }
+
+  /// Hover on the page name.
+  Future<void> hoverOnPageName(
+    String name, {
+    Future<void> Function()? onHover,
+    bool useLast = true,
+  }) async {
+    if (useLast) {
+      await hoverOnWidget(findPageName(name).last, onHover: onHover);
+    } else {
+      await hoverOnWidget(findPageName(name).first, onHover: onHover);
+    }
+  }
+
+  /// Tap the ... button beside the page name.
+  ///
+  /// Must call [hoverOnPageName] first.
+  Future<void> tapPageOptionButton() async {
+    final optionButton = find.byType(ViewDisclosureButton);
+    await tapButton(optionButton);
+  }
+
+  /// Tap the delete page button.
+  Future<void> tapDeletePageButton() async {
+    await tapPageOptionButton();
+    await tapButtonWithName(ViewDisclosureAction.delete.name);
+  }
+
+  /// Tap the rename page button.
+  Future<void> tapRenamePageButton() async {
+    await tapPageOptionButton();
+    await tapButtonWithName(ViewDisclosureAction.rename.name);
+  }
+
+  /// Rename the page.
+  Future<void> renamePage(String name) async {
+    await tapRenamePageButton();
+    await enterText(find.byType(TextFormField), name);
+    await tapOKButton();
+  }
+
+  Future<void> tapOKButton() async {
+    final okButton = find.byWidgetPredicate(
+      (widget) =>
+          widget is PrimaryTextButton &&
+          widget.label == LocaleKeys.button_OK.tr(),
+    );
+    await tapButton(okButton);
+  }
+
+  /// Tap the restore button.
+  ///
+  /// the restore button will show after the current page is deleted.
+  Future<void> tapRestoreButton() async {
+    final restoreButton = find.textContaining(
+      LocaleKeys.deletePagePrompt_restore.tr(),
+    );
+    await tapButton(restoreButton);
+  }
+
+  /// Tap the delete permanently button.
+  ///
+  /// the restore button will show after the current page is deleted.
+  Future<void> tapDeletePermanentlyButton() async {
+    final restoreButton = find.textContaining(
+      LocaleKeys.deletePagePrompt_deletePermanent.tr(),
+    );
+    await tapButton(restoreButton);
+  }
+
+  /// Tap the share button above the document page.
+  Future<void> tapShareButton() async {
+    final shareButton = find.byWidgetPredicate(
+      (widget) => widget is DocumentShareButton,
+    );
+    await tapButton(shareButton);
+  }
+
+  /// Tap the export markdown button
+  ///
+  /// Must call [tapShareButton] first.
+  Future<void> tapMarkdownButton() async {
+    final markdownButton = find.textContaining(
+      LocaleKeys.shareAction_markdown.tr(),
+    );
+    await tapButton(markdownButton);
+  }
+
+  Future<void> createNewPageWithName(ViewLayoutPB layout, String name) async {
+    // create a new page
+    await tapAddButton();
+    await tapButtonWithName(layout.menuName);
+    await pumpAndSettle();
+
+    // hover on it and change it's name
+    await hoverOnPageName(
+      LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
+      onHover: () async {
+        await renamePage(name);
+        await pumpAndSettle();
+      },
+    );
+    await pumpAndSettle();
+  }
+}
+
+extension ViewLayoutPBTest on ViewLayoutPB {
+  String get menuName {
+    switch (this) {
+      case ViewLayoutPB.Grid:
+        return LocaleKeys.grid_menuName.tr();
+      case ViewLayoutPB.Board:
+        return LocaleKeys.board_menuName.tr();
+      case ViewLayoutPB.Document:
+        return LocaleKeys.document_menuName.tr();
+      case ViewLayoutPB.Calendar:
+        return LocaleKeys.calendar_menuName.tr();
+      default:
+        throw UnsupportedError('Unsupported layout: $this');
+    }
+  }
+
+  String get referencedMenuName {
+    switch (this) {
+      case ViewLayoutPB.Grid:
+        return LocaleKeys.document_plugins_referencedGrid.tr();
+      case ViewLayoutPB.Board:
+        return LocaleKeys.document_plugins_referencedBoard.tr();
+      case ViewLayoutPB.Calendar:
+        return LocaleKeys.document_plugins_referencedCalendar.tr();
+      default:
+        throw UnsupportedError('Unsupported layout: $this');
+    }
+  }
+}
@@ -49,9 +49,11 @@ class TestWorkspaceService {

  /// Instructs the application to read workspace data from the workspace found under this [TestWorkspace]'s path.
  Future<void> setUpAll() async {
+    final root = await workspace.root;
+    final path = root.path;
    SharedPreferences.setMockInitialValues(
      {
-        KVKeys.pathLocation: await workspace.root.then((value) => value.path),
+        KVKeys.pathLocation: path,
      },
    );
  }
@@ -0,0 +1,481 @@
+import 'dart:ui';
+
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/database_view/application/setting/setting_bloc.dart';
+import 'package:appflowy/plugins/database_view/board/presentation/board_page.dart';
+import 'package:appflowy/plugins/database_view/calendar/presentation/calendar_page.dart';
+import 'package:appflowy/plugins/database_view/grid/presentation/widgets/header/field_cell_action_sheet.dart';
+import 'package:appflowy/plugins/database_view/grid/presentation/widgets/header/field_type_option_editor.dart';
+import 'package:appflowy/plugins/database_view/grid/presentation/widgets/toolbar/grid_layout.dart';
+import 'package:appflowy/plugins/database_view/widgets/row/row_document.dart';
+import 'package:appflowy/plugins/database_view/widgets/row/cells/date_cell/date_editor.dart';
+import 'package:appflowy/plugins/database_view/widgets/setting/database_setting.dart';
+import 'package:appflowy/plugins/database_view/widgets/setting/setting_button.dart';
+import 'package:appflowy_backend/protobuf/flowy-database2/setting_entities.pbenum.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/style_widget/icon_button.dart';
+import 'package:flowy_infra_ui/widget/buttons/primary_button.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:appflowy/plugins/database_view/grid/presentation/grid_page.dart';
+import 'package:appflowy/plugins/database_view/grid/presentation/widgets/footer/grid_footer.dart';
+import 'package:appflowy/plugins/database_view/grid/presentation/widgets/header/field_cell.dart';
+import 'package:appflowy/plugins/database_view/grid/presentation/widgets/header/field_editor.dart';
+import 'package:appflowy/plugins/database_view/grid/presentation/widgets/header/field_type_extension.dart';
+import 'package:appflowy/plugins/database_view/grid/presentation/widgets/row/row.dart';
+import 'package:appflowy/plugins/database_view/widgets/row/accessory/cell_accessory.dart';
+import 'package:appflowy/plugins/database_view/widgets/row/cells/cells.dart';
+import 'package:appflowy/plugins/database_view/widgets/row/row_action.dart';
+import 'package:appflowy/plugins/database_view/widgets/row/row_banner.dart';
+import 'package:appflowy/plugins/database_view/widgets/row/row_detail.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/emoji_picker/emoji_menu_item.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
+import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.dart';
+import 'package:table_calendar/table_calendar.dart';
+
+import 'base.dart';
+import 'common_operations.dart';
+
+extension AppFlowyDatabaseTest on WidgetTester {
+  Future<void> hoverOnFirstRowOfGrid() async {
+    final findRow = find.byType(GridRow);
+    expect(findRow, findsWidgets);
+
+    final firstRow = findRow.first;
+    await hoverOnWidget(firstRow);
+  }
+
+  Future<void> editCell({
+    required int rowIndex,
+    required FieldType fieldType,
+    required String input,
+  }) async {
+    final findRow = find.byType(GridRow);
+    final findCell = finderForFieldType(fieldType);
+
+    final cell = find.descendant(
+      of: findRow.at(rowIndex),
+      matching: findCell,
+    );
+
+    expect(cell, findsOneWidget);
+    await enterText(cell, input);
+    await pumpAndSettle();
+  }
+
+  Future<void> tapCheckboxCellInGrid({
+    required int rowIndex,
+  }) async {
+    final findRow = find.byType(GridRow);
+    final findCell = finderForFieldType(FieldType.Checkbox);
+
+    final cell = find.descendant(
+      of: findRow.at(rowIndex),
+      matching: findCell,
+    );
+
+    final button = find.descendant(
+      of: cell,
+      matching: find.byType(FlowyIconButton),
+    );
+
+    expect(cell, findsOneWidget);
+    await tapButton(button);
+  }
+
+  Future<void> assertCheckboxCell({
+    required int rowIndex,
+    required bool isSelected,
+  }) async {
+    final findRow = find.byType(GridRow);
+    final findCell = finderForFieldType(FieldType.Checkbox);
+
+    final cell = find.descendant(
+      of: findRow.at(rowIndex),
+      matching: findCell,
+    );
+
+    var finder = find.byType(CheckboxCellUncheck);
+    if (isSelected) {
+      finder = find.byType(CheckboxCellCheck);
+    }
+
+    expect(
+      find.descendant(
+        of: cell,
+        matching: finder,
+      ),
+      findsOneWidget,
+    );
+  }
+
+  Future<void> tapCellInGrid({
+    required int rowIndex,
+    required FieldType fieldType,
+  }) async {
+    final findRow = find.byType(GridRow);
+    final findCell = finderForFieldType(fieldType);
+
+    final cell = find.descendant(
+      of: findRow.at(rowIndex),
+      matching: findCell,
+    );
+
+    expect(cell, findsOneWidget);
+    await tapButton(cell);
+  }
+
+  Future<void> assertCellContent({
+    required int rowIndex,
+    required FieldType fieldType,
+    required String content,
+  }) async {
+    final findRow = find.byType(GridRow);
+    final findCell = finderForFieldType(fieldType);
+    final cell = find.descendant(
+      of: findRow.at(rowIndex),
+      matching: findCell,
+    );
+
+    final findContent = find.descendant(
+      of: cell,
+      matching: find.text(content),
+    );
+
+    expect(findContent, findsOneWidget);
+  }
+
+  Future<void> selectDay({
+    required int content,
+  }) async {
+    final findCalendar = find.byType(TableCalendar);
+    final findDay = find.text(content.toString());
+
+    final finder = find.descendant(
+      of: findCalendar,
+      matching: findDay,
+    );
+
+    await tapButton(finder);
+  }
+
+  Future<void> openFirstRowDetailPage() async {
+    await hoverOnFirstRowOfGrid();
+
+    final expandButton = find.byType(PrimaryCellAccessory);
+    expect(expandButton, findsOneWidget);
+    await tapButton(expandButton);
+  }
+
+  Future<void> hoverRowBanner() async {
+    final banner = find.byType(RowBanner);
+    expect(banner, findsOneWidget);
+
+    await startGesture(
+      getTopLeft(banner),
+      kind: PointerDeviceKind.mouse,
+    );
+
+    await pumpAndSettle();
+  }
+
+  Future<void> openEmojiPicker() async {
+    await tapButton(find.byType(EmojiPickerButton));
+    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> scrollGridByOffset(Offset offset) async {
+    await drag(find.byType(GridPage), offset);
+    await pumpAndSettle();
+  }
+
+  Future<void> scrollRowDetailByOffset(Offset offset) async {
+    await drag(find.byType(RowDetailPage), offset);
+    await pumpAndSettle();
+  }
+
+  Future<void> scrollToRight(Finder find) async {
+    final size = getSize(find);
+    await drag(find, Offset(-size.width, 0));
+    await pumpAndSettle(const Duration(milliseconds: 500));
+  }
+
+  Future<void> tapNewPropertyButton() async {
+    await tapButtonWithName(LocaleKeys.grid_field_newProperty.tr());
+    await pumpAndSettle();
+  }
+
+  Future<void> tapGridFieldWithName(String name) async {
+    final field = find.byWidgetPredicate(
+      (widget) => widget is FieldCellButton && widget.field.name == name,
+    );
+    await tapButton(field);
+    await pumpAndSettle();
+  }
+
+  /// Should call [tapGridFieldWithName] first.
+  Future<void> tapEditPropertyButton() async {
+    await tapButtonWithName(LocaleKeys.grid_field_editProperty.tr());
+    await pumpAndSettle(const Duration(milliseconds: 200));
+  }
+
+  /// Should call [tapGridFieldWithName] first.
+  Future<void> tapDeletePropertyButton() async {
+    final field = find.byWidgetPredicate(
+      (widget) =>
+          widget is FieldActionCell && widget.action == FieldAction.delete,
+    );
+    await tapButton(field);
+  }
+
+  /// Should call [tapGridFieldWithName] first.
+  Future<void> tapDialogOkButton() async {
+    final field = find.byWidgetPredicate(
+      (widget) =>
+          widget is PrimaryTextButton &&
+          widget.label == LocaleKeys.button_OK.tr(),
+    );
+    await tapButton(field);
+  }
+
+  /// Should call [tapGridFieldWithName] first.
+  Future<void> tapDuplicatePropertyButton() async {
+    final field = find.byWidgetPredicate(
+      (widget) =>
+          widget is FieldActionCell && widget.action == FieldAction.duplicate,
+    );
+    await tapButton(field);
+  }
+
+  /// Should call [tapGridFieldWithName] first.
+  Future<void> tapHidePropertyButton() async {
+    final field = find.byWidgetPredicate(
+      (widget) =>
+          widget is FieldActionCell && widget.action == FieldAction.hide,
+    );
+    await tapButton(field);
+  }
+
+  Future<void> tapRowDetailPageCreatePropertyButton() async {
+    await tapButton(find.byType(CreateRowFieldButton));
+  }
+
+  Future<void> tapRowDetailPageDeleteRowButton() async {
+    await tapButton(find.byType(RowDetailPageDeleteButton));
+  }
+
+  Future<void> tapRowDetailPageDuplicateRowButton() async {
+    await tapButton(find.byType(RowDetailPageDuplicateButton));
+  }
+
+  Future<void> tapTypeOptionButton() async {
+    await tapButton(find.byType(SwitchFieldButton));
+  }
+
+  Future<void> tapEscButton() async {
+    await sendKeyEvent(LogicalKeyboardKey.escape);
+  }
+
+  /// Must call [tapTypeOptionButton] first.
+  Future<void> selectFieldType(FieldType fieldType) async {
+    final fieldTypeButton = find.byWidgetPredicate(
+      (widget) => widget is FlowyText && widget.title == fieldType.title(),
+    );
+    await tapButton(fieldTypeButton);
+  }
+
+  /// Each field has its own cell, so we can find the corresponding cell by
+  /// the field type after create a new field.
+  Future<void> findCellByFieldType(FieldType fieldType) async {
+    final finder = finderForFieldType(fieldType);
+    expect(finder, findsWidgets);
+  }
+
+  Future<void> assertNumberOfFieldsInGridPage(int num) async {
+    expect(find.byType(GridFieldCell), findsNWidgets(num));
+  }
+
+  Future<void> assertNumberOfRowsInGridPage(int num) async {
+    expect(find.byType(GridRow), findsNWidgets(num));
+  }
+
+  Future<void> assertDocumentExistInRowDetailPage() async {
+    expect(find.byType(RowDocument), findsOneWidget);
+  }
+
+  /// Check the field type of the [FieldCellButton] is the same as the name.
+  Future<void> assertFieldTypeWithFieldName(
+    String name,
+    FieldType fieldType,
+  ) async {
+    final field = find.byWidgetPredicate(
+      (widget) =>
+          widget is FieldCellButton &&
+          widget.field.fieldType == fieldType &&
+          widget.field.name == name,
+    );
+
+    expect(field, findsOneWidget);
+  }
+
+  Future<void> findFieldWithName(String name) async {
+    final field = find.byWidgetPredicate(
+      (widget) => widget is FieldCellButton && widget.field.name == name,
+    );
+    expect(field, findsOneWidget);
+  }
+
+  Future<void> noFieldWithName(String name) async {
+    final field = find.byWidgetPredicate(
+      (widget) => widget is FieldCellButton && widget.field.name == name,
+    );
+    expect(field, findsNothing);
+  }
+
+  Future<void> renameField(String newName) async {
+    final textField = find.byType(FieldNameTextField);
+    expect(textField, findsOneWidget);
+    await enterText(textField, newName);
+    await pumpAndSettle();
+  }
+
+  Future<void> dismissFieldEditor() async {
+    await sendKeyEvent(LogicalKeyboardKey.escape);
+    await sendKeyEvent(LogicalKeyboardKey.escape);
+    await sendKeyEvent(LogicalKeyboardKey.escape);
+    await pumpAndSettle();
+  }
+
+  Future<void> findFieldEditor(dynamic matcher) async {
+    final finder = find.byType(FieldEditor);
+    expect(finder, matcher);
+  }
+
+  Future<void> findDateEditor(dynamic matcher) async {
+    final finder = find.byType(DateCellEditor);
+    expect(finder, matcher);
+  }
+
+  Future<void> tapCreateRowButtonInGrid() async {
+    await tapButton(find.byType(GridAddRowButton));
+  }
+
+  Future<void> tapCreateRowButtonInRowMenuOfGrid() async {
+    await tapButton(find.byType(InsertRowButton));
+  }
+
+  Future<void> tapRowMenuButtonInGrid() async {
+    await tapButton(find.byType(RowMenuButton));
+  }
+
+  /// Should call [tapRowMenuButtonInGrid] first.
+  Future<void> tapDeleteOnRowMenu() async {
+    await tapButtonWithName(LocaleKeys.grid_row_delete.tr());
+  }
+
+  Future<void> assertRowCountInGridPage(int num) async {
+    final text = find.byWidgetPredicate(
+      (widget) => widget is FlowyText && widget.title == rowCountString(num),
+    );
+    expect(text, findsOneWidget);
+  }
+
+  Future<void> createField(FieldType fieldType, String name) async {
+    await scrollToRight(find.byType(GridPage));
+    await tapNewPropertyButton();
+    await renameField(name);
+    await tapTypeOptionButton();
+    await selectFieldType(fieldType);
+    await dismissFieldEditor();
+  }
+
+  Future<void> tapDatabaseSettingButton() async {
+    await tapButton(find.byType(SettingButton));
+  }
+
+  /// Should call [tapDatabaseSettingButton] first.
+  Future<void> tapDatabaseLayoutButton() async {
+    final findSettingItem = find.byType(DatabaseSettingItem);
+    final findLayoutButton = find.byWidgetPredicate(
+      (widget) =>
+          widget is FlowyText &&
+          widget.title == DatabaseSettingAction.showLayout.title(),
+    );
+
+    final button = find.descendant(
+      of: findSettingItem,
+      matching: findLayoutButton,
+    );
+
+    await tapButton(button);
+  }
+
+  Future<void> selectDatabaseLayoutType(DatabaseLayoutPB layout) async {
+    final findLayoutCell = find.byType(DatabaseViewLayoutCell);
+    final findText = find.byWidgetPredicate(
+      (widget) => widget is FlowyText && widget.title == layout.layoutName(),
+    );
+
+    final button = find.descendant(
+      of: findLayoutCell,
+      matching: findText,
+    );
+
+    await tapButton(button);
+  }
+
+  Future<void> assertCurrentDatabaseLayoutType(DatabaseLayoutPB layout) async {
+    expect(finderForDatabaseLayoutType(layout), findsOneWidget);
+  }
+}
+
+Finder finderForDatabaseLayoutType(DatabaseLayoutPB layout) {
+  switch (layout) {
+    case DatabaseLayoutPB.Board:
+      return find.byType(BoardPage);
+    case DatabaseLayoutPB.Calendar:
+      return find.byType(CalendarPage);
+    case DatabaseLayoutPB.Grid:
+      return find.byType(GridPage);
+    default:
+      throw Exception('Unknown database layout type: $layout');
+  }
+}
+
+Finder finderForFieldType(FieldType fieldType) {
+  switch (fieldType) {
+    case FieldType.Checkbox:
+      return find.byType(GridCheckboxCell);
+    case FieldType.DateTime:
+      return find.byType(GridDateCell);
+    case FieldType.LastEditedTime:
+    case FieldType.CreatedTime:
+      return find.byType(GridDateCell);
+    case FieldType.SingleSelect:
+      return find.byType(GridSingleSelectCell);
+    case FieldType.MultiSelect:
+      return find.byType(GridMultiSelectCell);
+    case FieldType.Checklist:
+      return find.byType(GridChecklistCell);
+    case FieldType.Number:
+      return find.byType(GridNumberCell);
+    case FieldType.RichText:
+      return find.byType(GridTextCell);
+    case FieldType.URL:
+      return find.byType(GridURLCell);
+    default:
+      throw Exception('Unknown field type: $fieldType');
+  }
+}
@@ -0,0 +1,45 @@
+import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
+import 'package:flutter_test/flutter_test.dart';
+
+import 'ime.dart';
+import 'util.dart';
+
+extension EditorWidgetTester on WidgetTester {
+  EditorOperations get editor => EditorOperations(this);
+}
+
+class EditorOperations {
+  const EditorOperations(this.tester);
+
+  final WidgetTester tester;
+
+  /// Tap the line of editor at [index]
+  Future<void> tapLineOfEditorAt(int index) async {
+    final textBlocks = find.byType(TextBlockComponentWidget);
+    await tester.tapAt(tester.getTopRight(textBlocks.at(index)));
+  }
+
+  /// Hover on cover plugin button above the document
+  Future<void> hoverOnCoverPluginAddButton() async {
+    final editor = find.byWidgetPredicate(
+      (widget) => widget is AppFlowyEditor,
+    );
+    await tester.hoverOnWidget(
+      editor,
+      offset: tester.getTopLeft(editor).translate(20, 20),
+    );
+  }
+
+  /// trigger the slash command (selection menu)
+  Future<void> showSlashMenu() async {
+    await tester.ime.insertCharacter('/');
+  }
+
+  /// Tap the slash menu item with [name]
+  ///
+  /// Must call [showSlashMenu] first.
+  Future<void> tapSlashMenuItemWithName(String name) async {
+    final slashMenuItem = find.text(name, findRichText: true);
+    await tester.tapButton(slashMenuItem);
+  }
+}
@@ -0,0 +1,87 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/document/presentation/banner.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';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+const String readme = 'Read me';
+
+extension Expectation on WidgetTester {
+  /// Expect to see the home page and with a default read me page.
+  void expectToSeeHomePage() {
+    expect(find.byType(HomeStack), findsOneWidget);
+    expect(find.textContaining(readme), findsOneWidget);
+  }
+
+  /// Expect to see the page name on the home page.
+  void expectToSeePageName(String name) {
+    final pageName = findPageName(name);
+    expect(pageName, findsOneWidget);
+  }
+
+  /// Expect not to see the page name on the home page.
+  void expectNotToSeePageName(String name) {
+    final pageName = findPageName(name);
+    expect(pageName, findsNothing);
+  }
+
+  /// Expect to see the document banner.
+  void expectToSeeDocumentBanner() {
+    expect(find.byType(DocumentBanner), findsOneWidget);
+  }
+
+  /// Expect not to see the document banner.
+  void expectNotToSeeDocumentBanner() {
+    expect(find.byType(DocumentBanner), findsNothing);
+  }
+
+  /// Expect to the markdown file export success dialog.
+  void expectToExportSuccess() {
+    final exportSuccess = find.byWidgetPredicate(
+      (widget) =>
+          widget is FlowyText &&
+          widget.title == LocaleKeys.settings_files_exportFileSuccess.tr(),
+    );
+    expect(exportSuccess, findsOneWidget);
+  }
+
+  /// Expect to see the add button and icon button inside the document.
+  void expectToSeePluginAddCoverAndIconButton() {
+    final addCover = find.textContaining(
+      LocaleKeys.document_plugins_cover_addCover.tr(),
+    );
+    final addIcon = find.textContaining(
+      LocaleKeys.document_plugins_cover_addIcon.tr(),
+    );
+    expect(addCover, findsOneWidget);
+    expect(addIcon, findsOneWidget);
+  }
+
+  /// Expect to see the user name on the home page
+  void expectToSeeUserName(String name) {
+    final userName = find.byWidgetPredicate(
+      (widget) => widget is FlowyText && widget.title == name,
+    );
+    expect(userName, findsOneWidget);
+  }
+
+  /// Expect to see a text
+  void expectToSeeText(String text) {
+    Finder textWidget = find.textContaining(text, findRichText: true);
+    if (textWidget.evaluate().isEmpty) {
+      textWidget = find.byWidgetPredicate(
+        (widget) => widget is FlowyText && widget.title == text,
+      );
+    }
+    expect(textWidget, findsOneWidget);
+  }
+
+  /// Find the page name on the home page.
+  Finder findPageName(String name) {
+    return find.byWidgetPredicate(
+      (widget) => widget is ViewSectionItem && widget.view.name == name,
+    );
+  }
+}
@@ -0,0 +1,54 @@
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+extension IME on WidgetTester {
+  IMESimulator get ime => IMESimulator(this);
+}
+
+class IMESimulator {
+  IMESimulator(this.tester) {
+    client = findDeltaTextInputClient();
+  }
+
+  final WidgetTester tester;
+  late final DeltaTextInputClient client;
+
+  Future<void> insertText(String text) async {
+    for (final c in text.characters) {
+      await insertCharacter(c);
+    }
+  }
+
+  Future<void> insertCharacter(String character) async {
+    final value = client.currentTextEditingValue;
+    if (value == null) {
+      assert(false);
+      return;
+    }
+    final deltas = [
+      TextEditingDeltaInsertion(
+        textInserted: character,
+        oldText: value.text.replaceRange(
+          value.selection.start,
+          value.selection.end,
+          '',
+        ),
+        insertionOffset: value.selection.baseOffset,
+        selection: TextSelection.collapsed(
+          offset: value.selection.baseOffset + 1,
+        ),
+        composing: TextRange.empty,
+      ),
+    ];
+    client.updateEditingValueWithDeltas(deltas);
+    await tester.pumpAndSettle();
+  }
+
+  DeltaTextInputClient findDeltaTextInputClient() {
+    final finder = find.byType(KeyboardServiceWidget);
+    final KeyboardServiceWidgetState state = tester.state(finder);
+    return state.textInputService as DeltaTextInputClient;
+  }
+}
@@ -1,100 +0,0 @@
-import 'dart:ui';
-
-import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/plugins/document/presentation/banner.dart';
-import 'package:appflowy/user/presentation/skip_log_in_screen.dart';
-import 'package:appflowy/workspace/presentation/home/home_stack.dart';
-import 'package:appflowy/workspace/presentation/home/menu/app/header/add_button.dart';
-import 'package:appflowy/workspace/presentation/home/menu/app/section/item.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter_test/flutter_test.dart';
-
-import 'base.dart';
-
-const String readme = 'Read me';
-
-extension AppFlowyLaunch on WidgetTester {
-  Future<void> tapGoButton() async {
-    final goButton = find.byType(GoButton);
-    await tapButton(goButton);
-  }
-
-  Future<void> tapCreateButton() async {
-    await tapButtonWithName(LocaleKeys.settings_files_create.tr());
-  }
-
-  void expectToSeeWelcomePage() {
-    expect(find.byType(HomeStack), findsOneWidget);
-    expect(find.textContaining('Read me'), findsNWidgets(2));
-  }
-
-  Future<void> tapAddButton() async {
-    final addButton = find.byType(AddButton);
-    await tapButton(addButton);
-  }
-
-  Future<void> tapCreateDocumentButton() async {
-    await tapButtonWithName(LocaleKeys.document_menuName.tr());
-  }
-
-  Finder findPageName(String name) {
-    return find.byWidgetPredicate(
-      (widget) => widget is ViewSectionItem && widget.view.name == name,
-    );
-  }
-
-  void expectToSeePageName(String name) {
-    final pageName = findPageName(name);
-    expect(pageName, findsOneWidget);
-  }
-
-  void expectNotToSeePageName(String name) {
-    final pageName = findPageName(name);
-    expect(pageName, findsNothing);
-  }
-
-  Future<void> hoverOnPageName(String name) async {
-    final pageName = find.byWidgetPredicate(
-      (widget) => widget is ViewSectionItem && widget.view.name == name,
-    );
-
-    final gesture = await createGesture(kind: PointerDeviceKind.mouse);
-    await gesture.addPointer(location: Offset.zero);
-    addTearDown(gesture.removePointer);
-    await pump();
-    await gesture.moveTo(getCenter(pageName));
-    await pumpAndSettle();
-  }
-
-  Future<void> tapPageOptionButton() async {
-    final optionButton = find.byType(ViewDisclosureButton);
-    await tapButton(optionButton);
-  }
-
-  Future<void> tapDeletePageButton() async {
-    await tapPageOptionButton();
-    await tapButtonWithName(ViewDisclosureAction.delete.name);
-  }
-
-  void expectToSeeDocumentBanner() {
-    expect(find.byType(DocumentBanner), findsOneWidget);
-  }
-
-  void expectNotToSeeDocumentBanner() {
-    expect(find.byType(DocumentBanner), findsNothing);
-  }
-
-  Future<void> tapRestoreButton() async {
-    final restoreButton = find.textContaining(
-      LocaleKeys.deletePagePrompt_restore.tr(),
-    );
-    await tapButton(restoreButton);
-  }
-
-  Future<void> tapDeletePermanentlyButton() async {
-    final restoreButton = find.textContaining(
-      LocaleKeys.deletePagePrompt_deletePermanent.tr(),
-    );
-    await tapButton(restoreButton);
-  }
-}
@@ -1,20 +1,59 @@
-import 'package:appflowy/startup/startup.dart';
-import 'package:appflowy/util/file_picker/file_picker_impl.dart';
-import 'package:appflowy/util/file_picker/file_picker_service.dart';
+import 'dart:io';

+import 'package:appflowy/startup/startup.dart';
+import 'package:appflowy/util/file_picker/file_picker_service.dart';
+import 'package:file_picker/file_picker.dart' as fp;
+import 'package:path/path.dart' as p;
 import '../util.dart';

-class MockFilePicker extends FilePicker {
+class MockFilePicker implements FilePickerService {
  MockFilePicker({
-    required this.mockPath,
+    this.mockPath = '',
+    this.mockPaths = const [],
  });

  final String mockPath;
+  final List<String> mockPaths;

  @override
  Future<String?> getDirectoryPath({String? title}) {
    return Future.value(mockPath);
  }
+
+  @override
+  Future<String?> saveFile({
+    String? dialogTitle,
+    String? fileName,
+    String? initialDirectory,
+    fp.FileType type = fp.FileType.any,
+    List<String>? allowedExtensions,
+    bool lockParentWindow = false,
+  }) {
+    return Future.value(mockPath);
+  }
+
+  @override
+  Future<FilePickerResult?> pickFiles({
+    String? dialogTitle,
+    String? initialDirectory,
+    fp.FileType type = fp.FileType.any,
+    List<String>? allowedExtensions,
+    Function(fp.FilePickerStatus p1)? onFileLoading,
+    bool allowCompression = true,
+    bool allowMultiple = false,
+    bool withData = false,
+    bool withReadStream = false,
+    bool lockParentWindow = false,
+  }) {
+    final platformFiles = mockPaths
+        .map((e) => fp.PlatformFile(path: e, name: '', size: 0))
+        .toList();
+    return Future.value(
+      FilePickerResult(
+        platformFiles,
+      ),
+    );
+  }
 }

 Future<void> mockGetDirectoryPath(String? name) async {
@@ -27,3 +66,36 @@ Future<void> mockGetDirectoryPath(String? name) async {
  );
  return;
 }
+
+Future<String> mockSaveFilePath(String? name, String fileName) async {
+  final dir = await TestFolder.testLocation(name);
+  final path = p.join(dir.path, fileName);
+  getIt.unregister<FilePickerService>();
+  getIt.registerFactory<FilePickerService>(
+    () => MockFilePicker(
+      mockPath: path,
+    ),
+  );
+  return path;
+}
+
+Future<List<String>> mockPickFilePaths(
+  List<String> fileNames, {
+  String? name,
+  String? customPath,
+}) async {
+  late final Directory dir;
+  if (customPath != null) {
+    dir = Directory(customPath);
+  } else {
+    dir = await TestFolder.testLocation(name);
+  }
+  final paths = fileNames.map((e) => p.join(dir.path, e)).toList();
+  getIt.unregister<FilePickerService>();
+  getIt.registerFactory<FilePickerService>(
+    () => MockFilePicker(
+      mockPaths: paths,
+    ),
+  );
+  return paths;
+}
@@ -1,33 +1,13 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/workspace/application/settings/prelude.dart';
 import 'package:appflowy/workspace/presentation/settings/settings_dialog.dart';
+import 'package:appflowy/workspace/presentation/settings/widgets/settings_menu_element.dart';
 import 'package:appflowy/workspace/presentation/settings/widgets/settings_user_view.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter_test/flutter_test.dart';

 import 'base.dart';

-enum SettingsPage {
-  appearance,
-  language,
-  files,
-  user,
-}
-
-extension on SettingsPage {
-  String get name {
-    switch (this) {
-      case SettingsPage.appearance:
-        return LocaleKeys.settings_menu_appearance.tr();
-      case SettingsPage.language:
-        return LocaleKeys.settings_menu_language.tr();
-      case SettingsPage.files:
-        return LocaleKeys.settings_menu_files.tr();
-      case SettingsPage.user:
-        return LocaleKeys.settings_menu_user.tr();
-    }
-  }
-}
-
 extension AppFlowySettings on WidgetTester {
  /// Open settings page
  Future<void> openSettings() async {
@@ -41,7 +21,9 @@ extension AppFlowySettings on WidgetTester {

  /// Open the page that insides the settings page
  Future<void> openSettingsPage(SettingsPage page) async {
-    final button = find.text(page.name, findRichText: true);
+    final button = find.byWidgetPredicate(
+      (widget) => widget is SettingsMenuElement && widget.page == page,
+    );
    expect(button, findsOneWidget);
    await tapButton(button);
    return;
@@ -50,7 +32,7 @@ extension AppFlowySettings on WidgetTester {
  /// Restore the AppFlowy data storage location
  Future<void> restoreLocation() async {
    final button =
-        find.byTooltip(LocaleKeys.settings_files_restoreLocation.tr());
+        find.byTooltip(LocaleKeys.settings_files_recoverLocationTooltips.tr());
    expect(button, findsOneWidget);
    await tapButton(button);
    return;
@@ -64,8 +46,9 @@ extension AppFlowySettings on WidgetTester {
  }

  Future<void> tapCustomLocationButton() async {
-    final button =
-        find.byTooltip(LocaleKeys.settings_files_customizeLocation.tr());
+    final button = find.byTooltip(
+      LocaleKeys.settings_files_changeLocationTooltips.tr(),
+    );
    expect(button, findsOneWidget);
    await tapButton(button);
    return;
@@ -1,4 +1,6 @@
 export 'base.dart';
-export 'launch.dart';
+export 'common_operations.dart';
 export 'settings.dart';
 export 'data.dart';
+export 'expectation.dart';
+export 'editor_test_operations.dart';
@@ -43,7 +43,7 @@ class BlankPagePluginWidgetBuilder extends PluginWidgetBuilder
  Widget get leftBarItem => FlowyText.medium(LocaleKeys.blankPageTitle.tr());

  @override
-  Widget buildWidget(PluginContext context) => const BlankPage();
+  Widget buildWidget({PluginContext? context}) => const BlankPage();

  @override
  List<NavigationItem> get navigationItems => [this];
@@ -1,5 +1,6 @@
 import 'dart:async';
 import 'package:appflowy/plugins/database_view/application/field/field_listener.dart';
+import 'package:appflowy/plugins/database_view/application/row/row_meta_listener.dart';
 import 'package:appflowy/plugins/database_view/application/row/row_service.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.dart';
@@ -22,39 +23,45 @@ import 'cell_service.dart';
 ///
 // ignore: must_be_immutable
 class CellController<T, D> extends Equatable {
-  final DatabaseCellContext cellContext;
+  DatabaseCellContext _cellContext;
  final CellCache _cellCache;
  final CellCacheKey _cacheKey;
  final FieldBackendService _fieldBackendSvc;
-  final SingleFieldListener _fieldListener;
  final CellDataLoader<T> _cellDataLoader;
  final CellDataPersistence<D> _cellDataPersistence;

  CellListener? _cellListener;
+  RowMetaListener? _rowMetaListener;
+  SingleFieldListener? _fieldListener;
  CellDataNotifier<T?>? _cellDataNotifier;

  VoidCallback? _onCellFieldChanged;
+  VoidCallback? _onRowMetaChanged;
  Timer? _loadDataOperation;
  Timer? _saveDataOperation;

-  String get viewId => cellContext.viewId;
+  String get viewId => _cellContext.viewId;

-  RowId get rowId => cellContext.rowId;
+  RowId get rowId => _cellContext.rowId;

-  String get fieldId => cellContext.fieldInfo.id;
+  String get fieldId => _cellContext.fieldInfo.id;

-  FieldInfo get fieldInfo => cellContext.fieldInfo;
+  FieldInfo get fieldInfo => _cellContext.fieldInfo;

-  FieldType get fieldType => cellContext.fieldInfo.fieldType;
+  FieldType get fieldType => _cellContext.fieldInfo.fieldType;
+
+  String? get emoji => _cellContext.emoji;

  CellController({
-    required this.cellContext,
+    required DatabaseCellContext cellContext,
    required CellCache cellCache,
    required CellDataLoader<T> cellDataLoader,
    required CellDataPersistence<D> cellDataPersistence,
-  })  : _cellCache = cellCache,
+  })  : _cellContext = cellContext,
+        _cellCache = cellCache,
        _cellDataLoader = cellDataLoader,
        _cellDataPersistence = cellDataPersistence,
+        _rowMetaListener = RowMetaListener(cellContext.rowId),
        _fieldListener = SingleFieldListener(fieldId: cellContext.fieldId),
        _fieldBackendSvc = FieldBackendService(
          viewId: cellContext.viewId,
@@ -84,20 +91,22 @@ class CellController<T, D> extends Equatable {
    );

    /// 2.Listen on the field event and load the cell data if needed.
-    _fieldListener.start(
-      onFieldChanged: (result) {
-        result.fold(
-          (fieldPB) {
-            /// reloadOnFieldChanged should be true if you need to load the data when the corresponding field is changed
-            /// For example:
-            ///   ￥12 -> $12
-            if (_cellDataLoader.reloadOnFieldChanged) {
-              _loadData();
-            }
-            _onCellFieldChanged?.call();
-          },
-          (err) => Log.error(err),
-        );
+    _fieldListener?.start(
+      onFieldChanged: (fieldPB) {
+        /// reloadOnFieldChanged should be true if you need to load the data when the corresponding field is changed
+        /// For example:
+        ///   ￥12 -> $12
+        if (_cellDataLoader.reloadOnFieldChanged) {
+          _loadData();
+        }
+        _onCellFieldChanged?.call();
+      },
+    );
+
+    _rowMetaListener?.start(
+      callback: (newRowMeta) {
+        _cellContext = _cellContext.copyWith(rowMeta: newRowMeta);
+        _onRowMetaChanged?.call();
      },
    );
  }
@@ -105,9 +114,11 @@ class CellController<T, D> extends Equatable {
  /// Listen on the cell content or field changes
  VoidCallback? startListening({
    required void Function(T?) onCellChanged,
+    VoidCallback? onRowMetaChanged,
    VoidCallback? onCellFieldChanged,
  }) {
    _onCellFieldChanged = onCellFieldChanged;
+    _onRowMetaChanged = onRowMetaChanged;

    /// Notify the listener, the cell data was changed.
    onCellChangedFn() => onCellChanged(_cellDataNotifier?.value);
@@ -186,18 +197,26 @@ class CellController<T, D> extends Equatable {
  }

  Future<void> dispose() async {
+    await _rowMetaListener?.stop();
+    _rowMetaListener = null;
+
    await _cellListener?.stop();
+    _cellListener = null;
+
+    await _fieldListener?.stop();
+    _fieldListener = null;
+
    _loadDataOperation?.cancel();
    _saveDataOperation?.cancel();
    _cellDataNotifier?.dispose();
-    await _fieldListener.stop();
    _cellDataNotifier = null;
+    _onRowMetaChanged = null;
  }

  @override
  List<Object> get props => [
        _cellCache.get(_cacheKey) ?? "",
-        cellContext.rowId + cellContext.fieldInfo.id
+        _cellContext.rowId + _cellContext.fieldInfo.id
      ];
 }

@@ -47,7 +47,7 @@ class DateCellDataPersistence implements CellDataPersistence<DateCellData> {
  @override
  Future<Option<FlowyError>> save(DateCellData data) {
    final payload = DateChangesetPB.create()
-      ..cellPath = _makeCellPath(cellContext);
+      ..cellId = _makeCellPath(cellContext);
    if (data.dateTime != null) {
      final date = (data.dateTime!.millisecondsSinceEpoch ~/ 1000).toString();
      payload.date = date;
@@ -2,6 +2,7 @@ import 'dart:async';
 import 'dart:collection';
 import 'package:appflowy_backend/protobuf/flowy-database2/checklist_entities.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/date_entities.pb.dart';
+import 'package:appflowy_backend/protobuf/flowy-database2/row_entities.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/select_option.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/url_entities.pb.dart';
 import 'package:dartz/dartz.dart';
@@ -52,18 +53,23 @@ class CellBackendService {
 class DatabaseCellContext with _$DatabaseCellContext {
  const factory DatabaseCellContext({
    required String viewId,
-    required RowId rowId,
+    required RowMetaPB rowMeta,
    required FieldInfo fieldInfo,
  }) = _DatabaseCellContext;

  // ignore: unused_element
  const DatabaseCellContext._();

+  String get rowId => rowMeta.id;
+
  String get fieldId => fieldInfo.id;

  FieldType get fieldType => fieldInfo.fieldType;

  ValueKey key() {
-    return ValueKey("$rowId$fieldId${fieldInfo.fieldType}");
+    return ValueKey("${rowMeta.id}$fieldId${fieldInfo.fieldType}");
  }
+
+  /// Only the primary field can have an emoji.
+  String? get emoji => fieldInfo.isPrimary ? rowMeta.icon : null;
 }
@@ -1,4 +1,3 @@
-import 'package:appflowy/plugins/database_view/application/cell/cell_service.dart';
 import 'package:appflowy_backend/dispatch/dispatch.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/cell_entities.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/checklist_entities.pb.dart';
@@ -7,17 +6,23 @@ import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
 import 'package:dartz/dartz.dart';

 class ChecklistCellBackendService {
-  final DatabaseCellContext cellContext;
+  final String viewId;
+  final String fieldId;
+  final String rowId;

-  ChecklistCellBackendService({required this.cellContext});
+  ChecklistCellBackendService({
+    required this.viewId,
+    required this.fieldId,
+    required this.rowId,
+  });

  Future<Either<Unit, FlowyError>> create({
    required String name,
  }) {
    final payload = ChecklistCellDataChangesetPB.create()
-      ..viewId = cellContext.viewId
-      ..fieldId = cellContext.fieldInfo.id
-      ..rowId = cellContext.rowId
+      ..viewId = viewId
+      ..fieldId = fieldId
+      ..rowId = rowId
      ..insertOptions.add(name);

    return DatabaseEventUpdateChecklistCell(payload).send();
@@ -27,9 +32,9 @@ class ChecklistCellBackendService {
    required List<String> optionIds,
  }) {
    final payload = ChecklistCellDataChangesetPB.create()
-      ..viewId = cellContext.viewId
-      ..fieldId = cellContext.fieldInfo.id
-      ..rowId = cellContext.rowId
+      ..viewId = viewId
+      ..fieldId = fieldId
+      ..rowId = rowId
      ..deleteOptionIds.addAll(optionIds);

    return DatabaseEventUpdateChecklistCell(payload).send();
@@ -39,9 +44,9 @@ class ChecklistCellBackendService {
    required String optionId,
  }) {
    final payload = ChecklistCellDataChangesetPB.create()
-      ..viewId = cellContext.viewId
-      ..fieldId = cellContext.fieldInfo.id
-      ..rowId = cellContext.rowId
+      ..viewId = viewId
+      ..fieldId = fieldId
+      ..rowId = rowId
      ..selectedOptionIds.add(optionId);

    return DatabaseEventUpdateChecklistCell(payload).send();
@@ -51,9 +56,9 @@ class ChecklistCellBackendService {
    required SelectOptionPB option,
  }) {
    final payload = ChecklistCellDataChangesetPB.create()
-      ..viewId = cellContext.viewId
-      ..fieldId = cellContext.fieldInfo.id
-      ..rowId = cellContext.rowId
+      ..viewId = viewId
+      ..fieldId = fieldId
+      ..rowId = rowId
      ..updateOptions.add(option);

    return DatabaseEventUpdateChecklistCell(payload).send();
@@ -61,10 +66,9 @@ class ChecklistCellBackendService {

  Future<Either<ChecklistCellDataPB, FlowyError>> getCellData() {
    final payload = CellIdPB.create()
-      ..fieldId = cellContext.fieldInfo.id
-      ..viewId = cellContext.viewId
-      ..rowId = cellContext.rowId
-      ..rowId = cellContext.rowId;
+      ..viewId = viewId
+      ..fieldId = fieldId
+      ..rowId = rowId;

    return DatabaseEventGetChecklistCellData(payload).send();
  }
@@ -1,6 +1,4 @@
-import 'package:appflowy/plugins/database_view/application/cell/cell_service.dart';
 import 'package:appflowy/plugins/database_view/application/field/type_option/type_option_service.dart';
-import 'package:appflowy/plugins/database_view/application/row/row_service.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/select_option.pb.dart';
 import 'package:dartz/dartz.dart';
 import 'package:appflowy_backend/dispatch/dispatch.dart';
@@ -8,12 +6,15 @@ import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/cell_entities.pb.dart';

 class SelectOptionCellBackendService {
-  final DatabaseCellContext cellContext;
-  SelectOptionCellBackendService({required this.cellContext});
+  final String viewId;
+  final String fieldId;
+  final String rowId;

-  String get viewId => cellContext.viewId;
-  String get fieldId => cellContext.fieldInfo.id;
-  RowId get rowId => cellContext.rowId;
+  SelectOptionCellBackendService({
+    required this.viewId,
+    required this.fieldId,
+    required this.rowId,
+  });

  Future<Either<Unit, FlowyError>> create({
    required String name,
@@ -80,6 +80,7 @@ class DatabaseController {
  final DatabaseViewBackendService _databaseViewBackendSvc;
  final FieldController fieldController;
  DatabaseLayoutPB? databaseLayout;
+  DatabaseLayoutSettingPB? databaseLayoutSetting;
  late DatabaseViewCache _viewCache;

  // Callbacks
@@ -92,17 +93,17 @@ class DatabaseController {
  RowCache get rowCache => _viewCache.rowCache;

  // Listener
-  final DatabaseGroupListener groupListener;
-  final DatabaseLayoutSettingListener layoutListener;
-  final DatabaseCalendarLayoutListener calendarLayoutListener;
+  final DatabaseGroupListener _groupListener;
+  final DatabaseLayoutSettingListener _layoutListener;
+  final DatabaseCalendarLayoutListener _calendarLayoutListener;

  DatabaseController({required ViewPB view})
      : viewId = view.id,
        _databaseViewBackendSvc = DatabaseViewBackendService(viewId: view.id),
        fieldController = FieldController(viewId: view.id),
-        groupListener = DatabaseGroupListener(view.id),
-        layoutListener = DatabaseLayoutSettingListener(view.id),
-        calendarLayoutListener = DatabaseCalendarLayoutListener(view.id) {
+        _groupListener = DatabaseGroupListener(view.id),
+        _layoutListener = DatabaseLayoutSettingListener(view.id),
+        _calendarLayoutListener = DatabaseCalendarLayoutListener(view.id) {
    _viewCache = DatabaseViewCache(
      viewId: viewId,
      fieldController: fieldController,
@@ -159,7 +160,7 @@ class DatabaseController {
    });
  }

-  Future<Either<RowPB, FlowyError>> createRow({
+  Future<Either<RowMetaPB, FlowyError>> createRow({
    RowId? startRowId,
    String? groupId,
    void Function(RowDataBuilder builder)? withCells,
@@ -180,9 +181,9 @@ class DatabaseController {
  }

  Future<Either<Unit, FlowyError>> moveGroupRow({
-    required RowPB fromRow,
+    required RowMetaPB fromRow,
    required String groupId,
-    RowPB? toRow,
+    RowMetaPB? toRow,
  }) {
    return _databaseViewBackendSvc.moveGroupRow(
      fromRowId: fromRow.id,
@@ -192,12 +193,12 @@ class DatabaseController {
  }

  Future<Either<Unit, FlowyError>> moveRow({
-    required RowPB fromRow,
-    required RowPB toRow,
+    required String fromRowId,
+    required String toRowId,
  }) {
    return _databaseViewBackendSvc.moveRow(
-      fromRowId: fromRow.id,
-      toRowId: toRow.id,
+      fromRowId: fromRowId,
+      toRowId: toRowId,
    );
  }

@@ -224,7 +225,7 @@ class DatabaseController {
  Future<void> dispose() async {
    await _databaseViewBackendSvc.closeView();
    await fieldController.dispose();
-    await groupListener.stop();
+    await _groupListener.stop();
    await _viewCache.dispose();
    _databaseCallbacks = null;
    _groupCallbacks = null;
@@ -248,7 +249,12 @@ class DatabaseController {
    if (databaseLayout != null) {
      _databaseViewBackendSvc.getLayoutSetting(databaseLayout!).then((result) {
        result.fold(
-          (l) => _layoutCallbacks?.onLoadLayout(l),
+          (newDatabaseLayoutSetting) {
+            databaseLayoutSetting = newDatabaseLayoutSetting;
+            databaseLayoutSetting?.freeze();
+
+            _layoutCallbacks?.onLoadLayout(newDatabaseLayoutSetting);
+          },
          (r) => Log.error(r),
        );
      });
@@ -263,8 +269,8 @@ class DatabaseController {
      onRowsDeleted: (ids) {
        _databaseCallbacks?.onRowsDeleted?.call(ids);
      },
-      onRowsUpdated: (ids) {
-        _databaseCallbacks?.onRowsUpdated?.call(ids);
+      onRowsUpdated: (ids, reason) {
+        _databaseCallbacks?.onRowsUpdated?.call(ids, reason);
      },
      onRowsCreated: (ids) {
        _databaseCallbacks?.onRowsCreated?.call(ids);
@@ -285,7 +291,7 @@ class DatabaseController {
  }

  void _listenOnGroupChanged() {
-    groupListener.start(
+    _groupListener.start(
      onNumOfGroupsChanged: (result) {
        result.fold(
          (changeset) {
@@ -316,11 +322,14 @@ class DatabaseController {
  }

  void _listenOnLayoutChanged() {
-    layoutListener.start(
+    _layoutListener.start(
      onLayoutChanged: (result) {
        result.fold(
-          (l) {
-            _layoutCallbacks?.onLayoutChanged(l);
+          (newDatabaseLayoutSetting) {
+            databaseLayoutSetting = newDatabaseLayoutSetting;
+            databaseLayoutSetting?.freeze();
+
+            _layoutCallbacks?.onLayoutChanged(newDatabaseLayoutSetting);
          },
          (r) => Log.error(r),
        );
@@ -329,7 +338,7 @@ class DatabaseController {
  }

  void _listenOnCalendarLayoutChanged() {
-    calendarLayoutListener.start(
+    _calendarLayoutListener.start(
      onCalendarLayoutChanged: (result) {
        result.fold(
          (l) {
@@ -30,7 +30,7 @@ class DatabaseViewBackendService {
    return DatabaseEventGetDatabase(payload).send();
  }

-  Future<Either<RowPB, FlowyError>> createRow({
+  Future<Either<RowMetaPB, FlowyError>> createRow({
    RowId? startRowId,
    String? groupId,
    Map<String, String>? cellDataByFieldId,
@@ -13,7 +13,10 @@ typedef OnFiltersChanged = void Function(List<FilterInfo>);
 typedef OnDatabaseChanged = void Function(DatabasePB);

 typedef OnRowsCreated = void Function(List<RowId> ids);
-typedef OnRowsUpdated = void Function(List<RowId> ids);
+typedef OnRowsUpdated = void Function(
+  List<RowId> ids,
+  RowsChangedReason reason,
+);
 typedef OnRowsDeleted = void Function(List<RowId> ids);
 typedef OnNumOfRowsChanged = void Function(
  UnmodifiableListView<RowInfo> rows,
@@ -1,4 +1,3 @@
-import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pb.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
@@ -52,14 +51,11 @@ class FieldCellBloc extends Bloc<FieldCellEvent, FieldCellState> {

  void _startListening() {
    _fieldListener.start(
-      onFieldChanged: (result) {
+      onFieldChanged: (updatedField) {
        if (isClosed) {
          return;
        }
-        result.fold(
-          (field) => add(FieldCellEvent.didReceiveFieldUpdate(field)),
-          (err) => Log.error(err),
-        );
+        add(FieldCellEvent.didReceiveFieldUpdate(updatedField));
      },
    );
  }
@@ -1,4 +1,5 @@
 import 'package:appflowy/core/notification/grid_notification.dart';
+import 'package:appflowy_backend/log.dart';
 import 'package:dartz/dartz.dart';
 import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/notification.pb.dart';
@@ -7,12 +8,11 @@ import 'dart:async';
 import 'dart:typed_data';
 import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pb.dart';

-typedef UpdateFieldNotifiedValue = Either<FieldPB, FlowyError>;
+typedef UpdateFieldNotifiedValue = FieldPB;

 class SingleFieldListener {
  final String fieldId;
-  PublishNotifier<UpdateFieldNotifiedValue>? _updateFieldNotifier =
-      PublishNotifier();
+  void Function(UpdateFieldNotifiedValue)? _updateFieldNotifier;
  DatabaseNotificationListener? _listener;

  SingleFieldListener({required this.fieldId});
@@ -20,7 +20,7 @@ class SingleFieldListener {
  void start({
    required void Function(UpdateFieldNotifiedValue) onFieldChanged,
  }) {
-    _updateFieldNotifier?.addPublishListener(onFieldChanged);
+    _updateFieldNotifier = onFieldChanged;
    _listener = DatabaseNotificationListener(
      objectId: fieldId,
      handler: _handler,
@@ -34,9 +34,8 @@ class SingleFieldListener {
    switch (ty) {
      case DatabaseNotification.DidUpdateField:
        result.fold(
-          (payload) =>
-              _updateFieldNotifier?.value = left(FieldPB.fromBuffer(payload)),
-          (error) => _updateFieldNotifier?.value = right(error),
+          (payload) => _updateFieldNotifier?.call(FieldPB.fromBuffer(payload)),
+          (error) => Log.error(error),
        );
        break;
      default:
@@ -46,7 +45,6 @@ class SingleFieldListener {

  Future<void> stop() async {
    await _listener?.stop();
-    _updateFieldNotifier?.dispose();
    _updateFieldNotifier = null;
  }
 }
@@ -99,6 +99,14 @@ class FieldBackendService {
      );
    });
  }
+
+  /// Returns the primary field of the view.
+  static Future<Either<FieldPB, FlowyError>> getPrimaryField({
+    required String viewId,
+  }) {
+    final payload = DatabaseViewIdPB.create()..value = viewId;
+    return DatabaseEventGetPrimaryField(payload).send();
+  }
 }

@freezed
@@ -1,5 +1,4 @@
 import 'package:appflowy_backend/dispatch/dispatch.dart';
-import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/group.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
 import 'package:dartz/dartz.dart';
@@ -10,12 +9,10 @@ class GroupBackendService {

  Future<Either<Unit, FlowyError>> groupByField({
    required String fieldId,
-    required FieldType fieldType,
  }) {
    final payload = GroupByFieldPayloadPB.create()
      ..viewId = viewId
-      ..fieldId = fieldId
-      ..fieldType = fieldType;
+      ..fieldId = fieldId;

    return DatabaseEventSetGroupByField(payload).send();
  }
@@ -0,0 +1,163 @@
+import 'package:appflowy/plugins/database_view/application/field/field_listener.dart';
+import 'package:appflowy/plugins/database_view/application/field/field_service.dart';
+import 'package:appflowy/plugins/database_view/application/row/row_service.dart';
+import 'package:appflowy/workspace/application/view/prelude.dart';
+import 'package:appflowy_backend/log.dart';
+import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pb.dart';
+import 'package:appflowy_backend/protobuf/flowy-database2/row_entities.pb.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:freezed_annotation/freezed_annotation.dart';
+
+import 'row_meta_listener.dart';
+
+part 'row_banner_bloc.freezed.dart';
+
+class RowBannerBloc extends Bloc<RowBannerEvent, RowBannerState> {
+  final String viewId;
+  final RowBackendService _rowBackendSvc;
+  final RowMetaListener _metaListener;
+  SingleFieldListener? _fieldListener;
+
+  RowBannerBloc({
+    required this.viewId,
+    required RowMetaPB rowMeta,
+  })  : _rowBackendSvc = RowBackendService(viewId: viewId),
+        _metaListener = RowMetaListener(rowMeta.id),
+        super(RowBannerState.initial(rowMeta)) {
+    on<RowBannerEvent>(
+      (event, emit) async {
+        event.when(
+          initial: () async {
+            _loadPrimaryField();
+            await _listenRowMeteChanged();
+          },
+          didReceiveRowMeta: (RowMetaPB rowMeta) {
+            emit(
+              state.copyWith(
+                rowMeta: rowMeta,
+              ),
+            );
+          },
+          setCover: (String coverURL) {
+            _updateMeta(coverURL: coverURL);
+          },
+          setIcon: (String iconURL) {
+            _updateMeta(iconURL: iconURL);
+          },
+          didReceiveFieldUpdate: (updatedField) {
+            emit(
+              state.copyWith(
+                primaryField: updatedField,
+                loadingState: const LoadingState.finish(),
+              ),
+            );
+          },
+        );
+      },
+    );
+  }
+
+  @override
+  Future<void> close() async {
+    await _metaListener.stop();
+    await _fieldListener?.stop();
+    _fieldListener = null;
+
+    return super.close();
+  }
+
+  Future<void> _loadPrimaryField() async {
+    final fieldOrError =
+        await FieldBackendService.getPrimaryField(viewId: viewId);
+    fieldOrError.fold(
+      (primaryField) {
+        if (!isClosed) {
+          _fieldListener = SingleFieldListener(fieldId: primaryField.id);
+          _fieldListener?.start(
+            onFieldChanged: (updatedField) {
+              if (!isClosed) {
+                add(RowBannerEvent.didReceiveFieldUpdate(updatedField));
+              }
+            },
+          );
+          add(RowBannerEvent.didReceiveFieldUpdate(primaryField));
+        }
+      },
+      (r) => Log.error(r),
+    );
+  }
+
+  /// Listen the changes of the row meta and then update the banner
+  Future<void> _listenRowMeteChanged() async {
+    _metaListener.start(
+      callback: (rowMeta) {
+        add(RowBannerEvent.didReceiveRowMeta(rowMeta));
+      },
+    );
+  }
+
+  /// Update the meta of the row and the view
+  Future<void> _updateMeta({
+    String? iconURL,
+    String? coverURL,
+  }) async {
+    // Most of the time, the result is success, so we don't need to handle it.
+    await _rowBackendSvc
+        .updateMeta(
+      iconURL: iconURL,
+      coverURL: coverURL,
+      rowId: state.rowMeta.id,
+    )
+        .then((result) {
+      result.fold(
+        (l) => null,
+        (err) => Log.error(err),
+      );
+    });
+
+    // Set the icon and cover of the view
+    ViewBackendService.updateView(
+      viewId: viewId,
+      iconURL: iconURL,
+      coverURL: coverURL,
+    ).then((result) {
+      result.fold(
+        (l) => null,
+        (err) => Log.error(err),
+      );
+    });
+  }
+}
+
+@freezed
+class RowBannerEvent with _$RowBannerEvent {
+  const factory RowBannerEvent.initial() = _Initial;
+  const factory RowBannerEvent.didReceiveRowMeta(RowMetaPB rowMeta) =
+      _DidReceiveRowMeta;
+  const factory RowBannerEvent.didReceiveFieldUpdate(FieldPB field) =
+      _DidReceiveFieldUdate;
+  const factory RowBannerEvent.setIcon(String iconURL) = _SetIcon;
+  const factory RowBannerEvent.setCover(String coverURL) = _SetCover;
+}
+
+@freezed
+class RowBannerState with _$RowBannerState {
+  const factory RowBannerState({
+    ViewPB? view,
+    FieldPB? primaryField,
+    required RowMetaPB rowMeta,
+    required LoadingState loadingState,
+  }) = _RowBannerState;
+
+  factory RowBannerState.initial(RowMetaPB rowMetaPB) => RowBannerState(
+        rowMeta: rowMetaPB,
+        loadingState: const LoadingState.loading(),
+      );
+}
+
+@freezed
+class LoadingState with _$LoadingState {
+  const factory LoadingState.loading() = _Loading;
+  const factory LoadingState.finish() = _Finish;
+}
@@ -38,17 +38,21 @@ class RowCache {
  final RowCacheDelegate _delegate;
  final RowChangesetNotifier _rowChangeReasonNotifier;

+  /// Returns a unmodifiable list of RowInfo
  UnmodifiableListView<RowInfo> get rowInfos {
    final visibleRows = [..._rowList.rows];
    return UnmodifiableListView(visibleRows);
  }

+  /// Returns a unmodifiable map of rowId to RowInfo
  UnmodifiableMapView<RowId, RowInfo> get rowByRowId {
    return UnmodifiableMapView(_rowList.rowInfoByRowId);
  }

  CellCache get cellCache => _cellCache;

+  RowsChangedReason get changeReason => _rowChangeReasonNotifier.reason;
+
  RowCache({
    required this.viewId,
    required RowFieldsDelegate fieldsDelegate,
@@ -70,7 +74,7 @@ class RowCache {
    return _rowList.get(rowId);
  }

-  void setInitialRows(List<RowPB> rows) {
+  void setInitialRows(List<RowMetaPB> rows) {
    for (final row in rows) {
      final rowInfo = buildGridRow(row);
      _rowList.add(rowInfo);
@@ -128,7 +132,7 @@ class RowCache {
  void _insertRows(List<InsertedRowPB> insertRows) {
    for (final insertedRow in insertRows) {
      final insertedIndex =
-          _rowList.insert(insertedRow.index, buildGridRow(insertedRow.row));
+          _rowList.insert(insertedRow.index, buildGridRow(insertedRow.rowMeta));
      if (insertedIndex != null) {
        _rowChangeReasonNotifier
            .receive(RowsChangedReason.insert(insertedIndex));
@@ -138,20 +142,23 @@ class RowCache {

  void _updateRows(List<UpdatedRowPB> updatedRows) {
    if (updatedRows.isEmpty) return;
-    final List<RowPB> rowPBs = [];
+    final List<RowMetaPB> updatedList = [];
    for (final updatedRow in updatedRows) {
      for (final fieldId in updatedRow.fieldIds) {
        final key = CellCacheKey(
          fieldId: fieldId,
-          rowId: updatedRow.row.id,
+          rowId: updatedRow.rowId,
        );
        _cellCache.remove(key);
      }
-      rowPBs.add(updatedRow.row);
+      if (updatedRow.hasRowMeta()) {
+        updatedList.add(updatedRow.rowMeta);
+      }
    }

    final updatedIndexs =
-        _rowList.updateRows(rowPBs, (rowPB) => buildGridRow(rowPB));
+        _rowList.updateRows(updatedList, (rowId) => buildGridRow(rowId));
+
    if (updatedIndexs.isNotEmpty) {
      _rowChangeReasonNotifier.receive(RowsChangedReason.update(updatedIndexs));
    }
@@ -169,7 +176,7 @@ class RowCache {
  void _showRows(List<InsertedRowPB> visibleRows) {
    for (final insertedRow in visibleRows) {
      final insertedIndex =
-          _rowList.insert(insertedRow.index, buildGridRow(insertedRow.row));
+          _rowList.insert(insertedRow.index, buildGridRow(insertedRow.rowMeta));
      if (insertedIndex != null) {
        _rowChangeReasonNotifier
            .receive(RowsChangedReason.insert(insertedIndex));
@@ -197,8 +204,9 @@ class RowCache {
        if (onCellUpdated != null) {
          final rowInfo = _rowList.get(rowId);
          if (rowInfo != null) {
-            final CellContextByFieldId cellDataMap =
-                _makeGridCells(rowId, rowInfo.rowPB);
+            final CellContextByFieldId cellDataMap = _makeGridCells(
+              rowInfo.rowMeta,
+            );
            onCellUpdated(cellDataMap, _rowChangeReasonNotifier.reason);
          }
        }
@@ -220,12 +228,12 @@ class RowCache {
    _rowChangeReasonNotifier.removeListener(callback);
  }

-  CellContextByFieldId loadGridCells(RowId rowId) {
-    final RowPB? data = _rowList.get(rowId)?.rowPB;
-    if (data == null) {
-      _loadRow(rowId);
+  CellContextByFieldId loadGridCells(RowMetaPB rowMeta) {
+    final rowInfo = _rowList.get(rowMeta.id);
+    if (rowInfo == null) {
+      _loadRow(rowMeta.id);
    }
-    return _makeGridCells(rowId, data);
+    return _makeGridCells(rowMeta);
  }

  Future<void> _loadRow(RowId rowId) async {
@@ -233,57 +241,51 @@ class RowCache {
      ..viewId = viewId
      ..rowId = rowId;

-    final result = await DatabaseEventGetRow(payload).send();
+    final result = await DatabaseEventGetRowMeta(payload).send();
    result.fold(
-      (optionRow) => _refreshRow(optionRow),
+      (rowMetaPB) {
+        final rowInfo = _rowList.get(rowMetaPB.id);
+        final rowIndex = _rowList.indexOfRow(rowMetaPB.id);
+        if (rowInfo != null && rowIndex != null) {
+          final updatedRowInfo = rowInfo.copyWith(rowMeta: rowMetaPB);
+          _rowList.remove(rowMetaPB.id);
+          _rowList.insert(rowIndex, updatedRowInfo);
+
+          final UpdatedIndexMap updatedIndexs = UpdatedIndexMap();
+          updatedIndexs[rowMetaPB.id] = UpdatedIndex(
+            index: rowIndex,
+            rowId: rowMetaPB.id,
+          );
+
+          _rowChangeReasonNotifier
+              .receive(RowsChangedReason.update(updatedIndexs));
+        }
+      },
      (err) => Log.error(err),
    );
  }

-  CellContextByFieldId _makeGridCells(RowId rowId, RowPB? row) {
+  CellContextByFieldId _makeGridCells(RowMetaPB rowMeta) {
    // ignore: prefer_collection_literals
-    final cellDataMap = CellContextByFieldId();
+    final cellContextMap = CellContextByFieldId();
    for (final field in _delegate.fields) {
      if (field.visibility) {
-        cellDataMap[field.id] = DatabaseCellContext(
-          rowId: rowId,
+        cellContextMap[field.id] = DatabaseCellContext(
+          rowMeta: rowMeta,
          viewId: viewId,
          fieldInfo: field,
        );
      }
    }
-    return cellDataMap;
+    return cellContextMap;
  }

-  void _refreshRow(OptionalRowPB optionRow) {
-    if (!optionRow.hasRow()) {
-      return;
-    }
-    final updatedRow = optionRow.row;
-    updatedRow.freeze();
-
-    final rowInfo = _rowList.get(updatedRow.id);
-    final rowIndex = _rowList.indexOfRow(updatedRow.id);
-    if (rowInfo != null && rowIndex != null) {
-      final updatedRowInfo = rowInfo.copyWith(rowPB: updatedRow);
-      _rowList.remove(updatedRow.id);
-      _rowList.insert(rowIndex, updatedRowInfo);
-
-      final UpdatedIndexMap updatedIndexs = UpdatedIndexMap();
-      updatedIndexs[rowInfo.rowPB.id] = UpdatedIndex(
-        index: rowIndex,
-        rowId: updatedRowInfo.rowPB.id,
-      );
-
-      _rowChangeReasonNotifier.receive(RowsChangedReason.update(updatedIndexs));
-    }
-  }
-
-  RowInfo buildGridRow(RowPB rowPB) {
+  RowInfo buildGridRow(RowMetaPB rowMetaPB) {
    return RowInfo(
      viewId: viewId,
      fields: _delegate.fields,
-      rowPB: rowPB,
+      rowId: rowMetaPB.id,
+      rowMeta: rowMetaPB,
    );
  }
 }
@@ -310,9 +312,10 @@ class RowChangesetNotifier extends ChangeNotifier {
@unfreezed
 class RowInfo with _$RowInfo {
  factory RowInfo({
+    required String rowId,
    required String viewId,
    required UnmodifiableListView<FieldInfo> fields,
-    required RowPB rowPB,
+    required RowMetaPB rowMeta,
  }) = _RowInfo;
 }

@@ -1,12 +1,12 @@
+import 'package:appflowy_backend/protobuf/flowy-database2/row_entities.pb.dart';
 import 'package:flutter/material.dart';
 import '../cell/cell_service.dart';
 import 'row_cache.dart';
-import 'row_service.dart';

 typedef OnRowChanged = void Function(CellContextByFieldId, RowsChangedReason);

 class RowController {
-  final RowId rowId;
+  final RowMetaPB rowMeta;
  final String? groupId;
  final String viewId;
  final List<VoidCallback> _onRowChangedListeners = [];
@@ -14,24 +14,27 @@ class RowController {

  get cellCache => _rowCache.cellCache;

+  get rowId => rowMeta.id;
+
  RowController({
-    required this.rowId,
+    required this.rowMeta,
    required this.viewId,
    required RowCache rowCache,
    this.groupId,
  }) : _rowCache = rowCache;

  CellContextByFieldId loadData() {
-    return _rowCache.loadGridCells(rowId);
+    return _rowCache.loadGridCells(rowMeta);
  }

  void addListener({OnRowChanged? onRowChanged}) {
-    _onRowChangedListeners.add(
-      _rowCache.addListener(
-        rowId: rowId,
-        onCellUpdated: onRowChanged,
-      ),
+    final fn = _rowCache.addListener(
+      rowId: rowMeta.id,
+      onCellUpdated: onRowChanged,
    );
+
+    // Add the listener to the list so that we can remove it later.
+    _onRowChangedListeners.add(fn);
  }

  void dispose() {
@@ -25,10 +25,9 @@ class RowList {
  }

  void add(RowInfo rowInfo) {
-    final rowId = rowInfo.rowPB.id;
+    final rowId = rowInfo.rowId;
    if (contains(rowId)) {
-      final index =
-          _rowInfos.indexWhere((element) => element.rowPB.id == rowId);
+      final index = _rowInfos.indexWhere((element) => element.rowId == rowId);
      _rowInfos.removeAt(index);
      _rowInfos.insert(index, rowInfo);
    } else {
@@ -38,7 +37,7 @@ class RowList {
  }

  InsertedIndex? insert(int index, RowInfo rowInfo) {
-    final rowId = rowInfo.rowPB.id;
+    final rowId = rowInfo.rowId;
    var insertedIndex = index;
    if (_rowInfos.length <= insertedIndex) {
      insertedIndex = _rowInfos.length;
@@ -62,7 +61,7 @@ class RowList {
    if (rowInfo != null) {
      final index = _rowInfos.indexOf(rowInfo);
      if (index != -1) {
-        rowInfoByRowId.remove(rowInfo.rowPB.id);
+        rowInfoByRowId.remove(rowInfo.rowId);
        _rowInfos.remove(rowInfo);
      }
      return DeletedIndex(index: index, rowInfo: rowInfo);
@@ -73,23 +72,23 @@ class RowList {

  InsertedIndexs insertRows(
    List<InsertedRowPB> insertedRows,
-    RowInfo Function(RowPB) builder,
+    RowInfo Function(RowMetaPB) builder,
  ) {
    final InsertedIndexs insertIndexs = [];
    for (final insertRow in insertedRows) {
-      final isContains = contains(insertRow.row.id);
+      final isContains = contains(insertRow.rowMeta.id);

      var index = insertRow.index;
      if (_rowInfos.length < index) {
        index = _rowInfos.length;
      }
-      insert(index, builder(insertRow.row));
+      insert(index, builder(insertRow.rowMeta));

      if (!isContains) {
        insertIndexs.add(
          InsertedIndex(
            index: index,
-            rowId: insertRow.row.id,
+            rowId: insertRow.rowMeta.id,
          ),
        );
      }
@@ -105,10 +104,10 @@ class RowList {
    };

    _rowInfos.asMap().forEach((index, RowInfo rowInfo) {
-      if (deletedRowByRowId[rowInfo.rowPB.id] == null) {
+      if (deletedRowByRowId[rowInfo.rowId] == null) {
        newRows.add(rowInfo);
      } else {
-        rowInfoByRowId.remove(rowInfo.rowPB.id);
+        rowInfoByRowId.remove(rowInfo.rowId);
        deletedIndex.add(DeletedIndex(index: index, rowInfo: rowInfo));
      }
    });
@@ -117,19 +116,21 @@ class RowList {
  }

  UpdatedIndexMap updateRows(
-    List<RowPB> updatedRows,
-    RowInfo Function(RowPB) builder,
+    List<RowMetaPB> rowMetas,
+    RowInfo Function(RowMetaPB) builder,
  ) {
    final UpdatedIndexMap updatedIndexs = UpdatedIndexMap();
-    for (final RowPB updatedRow in updatedRows) {
-      final rowId = updatedRow.id;
+    for (final rowMeta in rowMetas) {
      final index = _rowInfos.indexWhere(
-        (rowInfo) => rowInfo.rowPB.id == rowId,
+        (rowInfo) => rowInfo.rowId == rowMeta.id,
      );
      if (index != -1) {
-        final rowInfo = builder(updatedRow);
+        final rowInfo = builder(rowMeta);
        insert(index, rowInfo);
-        updatedIndexs[rowId] = UpdatedIndex(index: index, rowId: rowId);
+        updatedIndexs[rowMeta.id] = UpdatedIndex(
+          index: index,
+          rowId: rowMeta.id,
+        );
      }
    }
    return updatedIndexs;
@@ -148,7 +149,7 @@ class RowList {

  void moveRow(RowId rowId, int oldIndex, int newIndex) {
    final index = _rowInfos.indexWhere(
-      (rowInfo) => rowInfo.rowPB.id == rowId,
+      (rowInfo) => rowInfo.rowId == rowId,
    );
    if (index != -1) {
      final rowInfo = remove(rowId)!.rowInfo;
@@ -0,0 +1,49 @@
+import 'dart:typed_data';
+
+import 'package:appflowy/core/notification/grid_notification.dart';
+import 'package:appflowy_backend/log.dart';
+import 'package:appflowy_backend/protobuf/flowy-error/protobuf.dart';
+import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
+import 'package:dartz/dartz.dart';
+
+typedef RowMetaCallback = void Function(RowMetaPB);
+
+class RowMetaListener {
+  final String rowId;
+  RowMetaCallback? _callback;
+  DatabaseNotificationListener? _listener;
+  RowMetaListener(this.rowId);
+
+  void start({required RowMetaCallback callback}) {
+    _callback = callback;
+    _listener = DatabaseNotificationListener(
+      objectId: rowId,
+      handler: _handler,
+    );
+  }
+
+  void _handler(
+    DatabaseNotification ty,
+    Either<Uint8List, FlowyError> result,
+  ) {
+    switch (ty) {
+      case DatabaseNotification.DidUpdateRowMeta:
+        result.fold(
+          (payload) {
+            if (_callback != null) {
+              _callback!(RowMetaPB.fromBuffer(payload));
+            }
+          },
+          (error) => Log.error(error),
+        );
+        break;
+      default:
+        break;
+    }
+  }
+
+  Future<void> stop() async {
+    await _listener?.stop();
+    _callback = null;
+  }
+}
@@ -12,7 +12,7 @@ class RowBackendService {
    required this.viewId,
  });

-  Future<Either<RowPB, FlowyError>> createRow(RowId rowId) {
+  Future<Either<RowMetaPB, FlowyError>> createRowAfterRow(RowId rowId) {
    final payload = CreateRowPayloadPB.create()
      ..viewId = viewId
      ..startRowId = rowId;
@@ -28,6 +28,33 @@ class RowBackendService {
    return DatabaseEventGetRow(payload).send();
  }

+  Future<Either<RowMetaPB, FlowyError>> getRowMeta(RowId rowId) {
+    final payload = RowIdPB.create()
+      ..viewId = viewId
+      ..rowId = rowId;
+
+    return DatabaseEventGetRowMeta(payload).send();
+  }
+
+  Future<Either<Unit, FlowyError>> updateMeta({
+    required String rowId,
+    String? iconURL,
+    String? coverURL,
+  }) {
+    final payload = UpdateRowMetaChangesetPB.create()
+      ..viewId = viewId
+      ..id = rowId;
+
+    if (iconURL != null) {
+      payload.iconUrl = iconURL;
+    }
+    if (coverURL != null) {
+      payload.coverUrl = coverURL;
+    }
+
+    return DatabaseEventUpdateRowMeta(payload).send();
+  }
+
  Future<Either<Unit, FlowyError>> deleteRow(RowId rowId) {
    final payload = RowIdPB.create()
      ..viewId = viewId
@@ -32,7 +32,6 @@ class DatabaseGroupBloc extends Bloc<DatabaseGroupEvent, DatabaseGroupState> {
          setGroupByField: (String fieldId, FieldType fieldType) async {
            final result = await _groupBackendSvc.groupByField(
              fieldId: fieldId,
-              fieldType: fieldType,
            );
            result.fold((l) => null, (err) => Log.error(err));
          },
@@ -1,4 +1,5 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy_backend/protobuf/flowy-database2/setting_entities.pbenum.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
@@ -45,6 +46,7 @@ enum DatabaseSettingAction {
  showProperties,
  showLayout,
  showGroup,
+  showCalendarLayout,
 }

 extension DatabaseSettingActionExtension on DatabaseSettingAction {
@@ -56,6 +58,8 @@ extension DatabaseSettingActionExtension on DatabaseSettingAction {
        return 'grid/setting/database_layout';
      case DatabaseSettingAction.showGroup:
        return 'grid/setting/group';
+      case DatabaseSettingAction.showCalendarLayout:
+        return 'grid/setting/calendar_layout';
    }
  }

@@ -67,6 +71,33 @@ extension DatabaseSettingActionExtension on DatabaseSettingAction {
        return LocaleKeys.grid_settings_databaseLayout.tr();
      case DatabaseSettingAction.showGroup:
        return LocaleKeys.grid_settings_group.tr();
+      case DatabaseSettingAction.showCalendarLayout:
+        return LocaleKeys.calendar_settings_name.tr();
    }
  }
 }
+
+/// Returns the list of actions that should be shown for the given database layout.
+List<DatabaseSettingAction> actionsForDatabaseLayout(DatabaseLayoutPB? layout) {
+  switch (layout) {
+    case DatabaseLayoutPB.Board:
+      return [
+        DatabaseSettingAction.showProperties,
+        DatabaseSettingAction.showLayout,
+        DatabaseSettingAction.showGroup,
+      ];
+    case DatabaseLayoutPB.Calendar:
+      return [
+        DatabaseSettingAction.showProperties,
+        DatabaseSettingAction.showLayout,
+        DatabaseSettingAction.showCalendarLayout,
+      ];
+    case DatabaseLayoutPB.Grid:
+      return [
+        DatabaseSettingAction.showProperties,
+        DatabaseSettingAction.showLayout,
+      ];
+    default:
+      return [];
+  }
+}
@@ -65,14 +65,16 @@ class DatabaseViewCache {
            }

            if (changeset.updatedRows.isNotEmpty) {
-              _callbacks?.onRowsUpdated
-                  ?.call(changeset.updatedRows.map((e) => e.row.id).toList());
+              _callbacks?.onRowsUpdated?.call(
+                changeset.updatedRows.map((e) => e.rowId).toList(),
+                _rowCache.changeReason,
+              );
            }

            if (changeset.insertedRows.isNotEmpty) {
              _callbacks?.onRowsCreated?.call(
                changeset.insertedRows
-                    .map((insertedRow) => insertedRow.row.id)
+                    .map((insertedRow) => insertedRow.rowMeta.id)
                    .toList(),
              );
            }
@@ -156,7 +156,7 @@ class BoardBloc extends Bloc<BoardEvent, BoardState> {
    );
  }

-  void _groupItemStartEditing(GroupPB group, RowPB row, bool isEdit) {
+  void _groupItemStartEditing(GroupPB group, RowMetaPB row, bool isEdit) {
    final fieldInfo = fieldController.getField(group.fieldId);
    if (fieldInfo == null) {
      Log.warn("fieldInfo should not be null");
@@ -230,7 +230,7 @@ class BoardBloc extends Bloc<BoardEvent, BoardState> {
        for (final group in updatedGroups) {
          final columnController =
              boardController.getGroupController(group.groupId);
-          columnController?.updateGroupName(group.desc);
+          columnController?.updateGroupName(group.groupName);
        }
      },
    );
@@ -285,7 +285,7 @@ class BoardBloc extends Bloc<BoardEvent, BoardState> {
  AppFlowyGroupData initializeGroupData(GroupPB group) {
    return AppFlowyGroupData(
      id: group.groupId,
-      name: group.desc,
+      name: group.groupName,
      items: _buildGroupItems(group),
      customData: GroupData(
        group: group,
@@ -302,12 +302,12 @@ class BoardEvent with _$BoardEvent {
  const factory BoardEvent.createHeaderRow(String groupId) = _CreateHeaderRow;
  const factory BoardEvent.didCreateRow(
    GroupPB group,
-    RowPB row,
+    RowMetaPB row,
    int? index,
  ) = _DidCreateRow;
  const factory BoardEvent.startEditingRow(
    GroupPB group,
-    RowPB row,
+    RowMetaPB row,
  ) = _StartEditRow;
  const factory BoardEvent.endEditingRow(RowId rowId) = _EndEditRow;
  const factory BoardEvent.didReceiveError(FlowyError error) = _DidReceiveError;
@@ -371,7 +371,7 @@ class GridFieldEquatable extends Equatable {
 }

 class GroupItem extends AppFlowyGroupItem {
-  final RowPB row;
+  final RowMetaPB row;
  final FieldInfo fieldInfo;

  GroupItem({
@@ -389,7 +389,7 @@ class GroupItem extends AppFlowyGroupItem {
 class GroupControllerDelegateImpl extends GroupControllerDelegate {
  final FieldController fieldController;
  final AppFlowyBoardController controller;
-  final void Function(String, RowPB, int?) onNewColumnItem;
+  final void Function(String, RowMetaPB, int?) onNewColumnItem;

  GroupControllerDelegateImpl({
    required this.controller,
@@ -398,7 +398,7 @@ class GroupControllerDelegateImpl extends GroupControllerDelegate {
  });

  @override
-  void insertRow(GroupPB group, RowPB row, int? index) {
+  void insertRow(GroupPB group, RowMetaPB row, int? index) {
    final fieldInfo = fieldController.getField(group.fieldId);
    if (fieldInfo == null) {
      Log.warn("fieldInfo should not be null");
@@ -426,7 +426,7 @@ class GroupControllerDelegateImpl extends GroupControllerDelegate {
  }

  @override
-  void updateRow(GroupPB group, RowPB row) {
+  void updateRow(GroupPB group, RowMetaPB row) {
    final fieldInfo = fieldController.getField(group.fieldId);
    if (fieldInfo == null) {
      Log.warn("fieldInfo should not be null");
@@ -442,7 +442,7 @@ class GroupControllerDelegateImpl extends GroupControllerDelegate {
  }

  @override
-  void addNewRow(GroupPB group, RowPB row, int? index) {
+  void addNewRow(GroupPB group, RowMetaPB row, int? index) {
    final fieldInfo = fieldController.getField(group.fieldId);
    if (fieldInfo == null) {
      Log.warn("fieldInfo should not be null");
@@ -465,7 +465,7 @@ class GroupControllerDelegateImpl extends GroupControllerDelegate {

 class BoardEditingRow {
  GroupPB group;
-  RowPB row;
+  RowMetaPB row;
  int? index;

  BoardEditingRow({
@@ -12,9 +12,9 @@ typedef OnGroupError = void Function(FlowyError);

 abstract class GroupControllerDelegate {
  void removeRow(GroupPB group, RowId rowId);
-  void insertRow(GroupPB group, RowPB row, int? index);
-  void updateRow(GroupPB group, RowPB row);
-  void addNewRow(GroupPB group, RowPB row, int? index);
+  void insertRow(GroupPB group, RowMetaPB row, int? index);
+  void updateRow(GroupPB group, RowMetaPB row);
+  void addNewRow(GroupPB group, RowMetaPB row, int? index);
 }

 class GroupController {
@@ -28,7 +28,7 @@ class GroupController {
    required this.delegate,
  }) : _listener = SingleGroupListener(group);

-  RowPB? rowAtIndex(int index) {
+  RowMetaPB? rowAtIndex(int index) {
    if (index < group.rows.length) {
      return group.rows[index];
    } else {
@@ -36,7 +36,7 @@ class GroupController {
    }
  }

-  RowPB? lastRow() {
+  RowMetaPB? lastRow() {
    if (group.rows.isEmpty) return null;
    return group.rows.last;
  }
@@ -55,15 +55,15 @@ class GroupController {
              final index = insertedRow.hasIndex() ? insertedRow.index : null;
              if (insertedRow.hasIndex() &&
                  group.rows.length > insertedRow.index) {
-                group.rows.insert(insertedRow.index, insertedRow.row);
+                group.rows.insert(insertedRow.index, insertedRow.rowMeta);
              } else {
-                group.rows.add(insertedRow.row);
+                group.rows.add(insertedRow.rowMeta);
              }

              if (insertedRow.isNew) {
-                delegate.addNewRow(group, insertedRow.row, index);
+                delegate.addNewRow(group, insertedRow.rowMeta, index);
              } else {
-                delegate.insertRow(group, insertedRow.row, index);
+                delegate.insertRow(group, insertedRow.rowMeta, index);
              }
            }

@@ -45,8 +45,12 @@ class BoardPlugin extends Plugin {
  BoardPlugin({
    required ViewPB view,
    required PluginType pluginType,
+    bool listenOnViewChanged = false,
  })  : _pluginType = pluginType,
-        notifier = ViewPluginNotifier(view: view);
+        notifier = ViewPluginNotifier(
+          view: view,
+          listenOnViewChanged: listenOnViewChanged,
+        );

  @override
  PluginWidgetBuilder get widgetBuilder =>
@@ -69,11 +73,11 @@ class BoardPluginWidgetBuilder extends PluginWidgetBuilder {
  Widget get leftBarItem => ViewLeftBarItem(view: view);

  @override
-  Widget buildWidget(PluginContext context) {
+  Widget buildWidget({PluginContext? context}) {
    notifier.isDeleted.addListener(() {
      notifier.isDeleted.value.fold(() => null, (deletedView) {
        if (deletedView.hasIndex()) {
-          context.onDeleted(view, deletedView.index);
+          context?.onDeleted(view, deletedView.index);
        }
      });
    });
@@ -231,7 +231,7 @@ class _BoardContentState extends State<BoardContent> {
  ) {
    final groupItem = afGroupItem as GroupItem;
    final groupData = afGroupData.customData as GroupData;
-    final rowPB = groupItem.row;
+    final rowMeta = groupItem.row;
    final rowCache = context.read<BoardBloc>().getRowCache();

    /// Return placeholder widget if the rowCache is null.
@@ -255,7 +255,7 @@ class _BoardContentState extends State<BoardContent> {
      margin: config.cardPadding,
      decoration: _makeBoxDecoration(context),
      child: RowCard<String>(
-        row: rowPB,
+        rowMeta: rowMeta,
        viewId: viewId,
        rowCache: rowCache,
        cardData: groupData.group.groupId,
@@ -267,7 +267,7 @@ class _BoardContentState extends State<BoardContent> {
          viewId,
          groupData.group.groupId,
          fieldController,
-          rowPB,
+          rowMeta,
          rowCache,
          context,
        ),
@@ -305,18 +305,19 @@ class _BoardContentState extends State<BoardContent> {
    String viewId,
    String groupId,
    FieldController fieldController,
-    RowPB rowPB,
+    RowMetaPB rowMetaPB,
    RowCache rowCache,
    BuildContext context,
  ) {
    final rowInfo = RowInfo(
      viewId: viewId,
      fields: UnmodifiableListView(fieldController.fieldInfos),
-      rowPB: rowPB,
+      rowMeta: rowMetaPB,
+      rowId: rowMetaPB.id,
    );

    final dataController = RowController(
-      rowId: rowInfo.rowPB.id,
+      rowMeta: rowInfo.rowMeta,
      viewId: rowInfo.viewId,
      rowCache: rowCache,
      groupId: groupId,
@@ -268,7 +268,7 @@ class CalendarBloc extends Bloc<CalendarEvent, CalendarState> {

    final eventData = CalendarDayEvent(
      event: eventPB,
-      eventId: eventPB.rowId,
+      eventId: eventPB.rowMeta.id,
      dateFieldId: eventPB.dateFieldId,
      date: date,
    );
@@ -310,7 +310,7 @@ class CalendarBloc extends Bloc<CalendarEvent, CalendarState> {
        }
        add(CalendarEvent.didDeleteEvents(rowIds));
      },
-      onRowsUpdated: (rowIds) async {
+      onRowsUpdated: (rowIds, reason) async {
        if (isClosed) {
          return;
        }
@@ -1,3 +1,5 @@
+import 'package:appflowy/plugins/database_view/application/layout/layout_setting_listener.dart';
+import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:bloc/bloc.dart';
 import 'package:dartz/dartz.dart';
@@ -9,10 +11,19 @@ typedef DayOfWeek = int;

 class CalendarSettingBloc
    extends Bloc<CalendarSettingEvent, CalendarSettingState> {
-  CalendarSettingBloc({required CalendarLayoutSettingPB? layoutSettings})
-      : super(CalendarSettingState.initial(layoutSettings)) {
+  final String viewId;
+  final DatabaseLayoutSettingListener _listener;
+
+  CalendarSettingBloc({
+    required this.viewId,
+    required CalendarLayoutSettingPB? layoutSettings,
+  })  : _listener = DatabaseLayoutSettingListener(viewId),
+        super(CalendarSettingState.initial(layoutSettings)) {
    on<CalendarSettingEvent>((event, emit) {
      event.when(
+        init: () {
+          _startListening();
+        },
        performAction: (action) {
          emit(state.copyWith(selectedAction: Some(action)));
        },
@@ -22,6 +33,44 @@ class CalendarSettingBloc
      );
    });
  }
+
+  void _startListening() {
+    _listener.start(
+      onLayoutChanged: (result) {
+        if (isClosed) {
+          return;
+        }
+
+        result.fold(
+          (setting) =>
+              add(CalendarSettingEvent.updateLayoutSetting(setting.calendar)),
+          (r) => Log.error(r),
+        );
+      },
+    );
+  }
+
+  @override
+  Future<void> close() async {
+    await _listener.stop();
+    return super.close();
+  }
+}
+
+@freezed
+class CalendarSettingEvent with _$CalendarSettingEvent {
+  const factory CalendarSettingEvent.init() = _Init;
+  const factory CalendarSettingEvent.performAction(
+    CalendarSettingAction action,
+  ) = _PerformAction;
+  const factory CalendarSettingEvent.updateLayoutSetting(
+    CalendarLayoutSettingPB setting,
+  ) = _UpdateLayoutSetting;
+}
+
+enum CalendarSettingAction {
+  properties,
+  layout,
 }

@freezed
@@ -39,18 +88,3 @@ class CalendarSettingState with _$CalendarSettingState {
        layoutSetting: layoutSettings == null ? none() : Some(layoutSettings),
      );
 }
-
-@freezed
-class CalendarSettingEvent with _$CalendarSettingEvent {
-  const factory CalendarSettingEvent.performAction(
-    CalendarSettingAction action,
-  ) = _PerformAction;
-  const factory CalendarSettingEvent.updateLayoutSetting(
-    CalendarLayoutSettingPB setting,
-  ) = _UpdateLayoutSetting;
-}
-
-enum CalendarSettingAction {
-  properties,
-  layout,
-}
@@ -45,8 +45,12 @@ class CalendarPlugin extends Plugin {
  CalendarPlugin({
    required ViewPB view,
    required PluginType pluginType,
+    bool listenOnViewChanged = false,
  })  : _pluginType = pluginType,
-        notifier = ViewPluginNotifier(view: view);
+        notifier = ViewPluginNotifier(
+          view: view,
+          listenOnViewChanged: listenOnViewChanged,
+        );

  @override
  PluginWidgetBuilder get widgetBuilder =>
@@ -69,11 +73,11 @@ class CalendarPluginWidgetBuilder extends PluginWidgetBuilder {
  Widget get leftBarItem => ViewLeftBarItem(view: view);

  @override
-  Widget buildWidget(PluginContext context) {
+  Widget buildWidget({PluginContext? context}) {
    notifier.isDeleted.addListener(() {
      notifier.isDeleted.value.fold(() => null, (deletedView) {
        if (deletedView.hasIndex()) {
-          context.onDeleted(view, deletedView.index);
+          context?.onDeleted(view, deletedView.index);
        }
      });
    });
@@ -301,7 +301,7 @@ class _EventCard extends StatelessWidget {
      // Add the key here to make sure the card is rebuilt when the cells
      // in this row are updated.
      key: ValueKey(event.eventId),
-      row: rowInfo!.rowPB,
+      rowMeta: rowInfo!.rowMeta,
      viewId: viewId,
      rowCache: rowCache,
      cardData: event.dateFieldId,
@@ -243,7 +243,7 @@ void showEventDetails({
  required RowCache rowCache,
 }) {
  final dataController = RowController(
-    rowId: event.eventId,
+    rowMeta: event.event.rowMeta,
    viewId: viewId,
    rowCache: rowCache,
  );
@@ -15,17 +15,25 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:protobuf/protobuf.dart';

-import 'calendar_setting.dart';
+abstract class ICalendarSetting {
+  /// Returns the current layout settings for the calendar view.
+  CalendarLayoutSettingPB? getLayoutSetting();
+
+  /// Updates the layout settings for the calendar view.
+  void updateLayoutSettings(CalendarLayoutSettingPB layoutSettings);
+}

 /// Widget that displays a list of settings that alters the appearance of the
 /// calendar
 class CalendarLayoutSetting extends StatefulWidget {
-  final CalendarSettingContext settingContext;
-  final Function(CalendarLayoutSettingPB? layoutSettings) onUpdated;
+  final String viewId;
+  final FieldController fieldController;
+  final ICalendarSetting calendarSettingController;

  const CalendarLayoutSetting({
-    required this.onUpdated,
-    required this.settingContext,
+    required this.viewId,
+    required this.fieldController,
+    required this.calendarSettingController,
    super.key,
  });

@@ -44,85 +52,90 @@ class _CalendarLayoutSettingState extends State<CalendarLayoutSetting> {

  @override
  Widget build(BuildContext context) {
-    return BlocBuilder<CalendarSettingBloc, CalendarSettingState>(
-      builder: (context, state) {
-        final CalendarLayoutSettingPB? settings = state.layoutSetting
-            .foldLeft(null, (previous, settings) => settings);
-
-        if (settings == null) {
-          return const CircularProgressIndicator();
-        }
-        final availableSettings = _availableCalendarSettings(settings);
-
-        final items = availableSettings.map((setting) {
-          switch (setting) {
-            case CalendarLayoutSettingAction.showWeekNumber:
-              return ShowWeekNumber(
-                showWeekNumbers: settings.showWeekNumbers,
-                onUpdated: (showWeekNumbers) {
-                  _updateLayoutSettings(
-                    context,
-                    showWeekNumbers: showWeekNumbers,
-                    onUpdated: widget.onUpdated,
-                  );
-                },
-              );
-            case CalendarLayoutSettingAction.showWeekends:
-              return ShowWeekends(
-                showWeekends: settings.showWeekends,
-                onUpdated: (showWeekends) {
-                  _updateLayoutSettings(
-                    context,
-                    showWeekends: showWeekends,
-                    onUpdated: widget.onUpdated,
-                  );
-                },
-              );
-            case CalendarLayoutSettingAction.firstDayOfWeek:
-              return FirstDayOfWeek(
-                firstDayOfWeek: settings.firstDayOfWeek,
-                popoverMutex: popoverMutex,
-                onUpdated: (firstDayOfWeek) {
-                  _updateLayoutSettings(
-                    context,
-                    onUpdated: widget.onUpdated,
-                    firstDayOfWeek: firstDayOfWeek,
-                  );
-                },
-              );
-            case CalendarLayoutSettingAction.layoutField:
-              return LayoutDateField(
-                fieldController: widget.settingContext.fieldController,
-                viewId: widget.settingContext.viewId,
-                fieldId: settings.fieldId,
-                popoverMutex: popoverMutex,
-                onUpdated: (fieldId) {
-                  _updateLayoutSettings(
-                    context,
-                    onUpdated: widget.onUpdated,
-                    layoutFieldId: fieldId,
-                  );
-                },
-              );
-            default:
-              return const SizedBox();
-          }
-        }).toList();
-
-        return SizedBox(
-          width: 200,
-          child: ListView.separated(
-            shrinkWrap: true,
-            controller: ScrollController(),
-            itemCount: items.length,
-            separatorBuilder: (context, index) =>
-                VSpace(GridSize.typeOptionSeparatorHeight),
-            physics: StyledScrollPhysics(),
-            itemBuilder: (BuildContext context, int index) => items[index],
-            padding: const EdgeInsets.all(6.0),
-          ),
-        );
+    return BlocProvider(
+      create: (context) {
+        return CalendarSettingBloc(
+          viewId: widget.viewId,
+          layoutSettings: widget.calendarSettingController.getLayoutSetting(),
+        )..add(
+            const CalendarSettingEvent.init(),
+          );
      },
+      child: BlocBuilder<CalendarSettingBloc, CalendarSettingState>(
+        builder: (context, state) {
+          final CalendarLayoutSettingPB? settings = state.layoutSetting
+              .foldLeft(null, (previous, settings) => settings);
+
+          if (settings == null) {
+            return const CircularProgressIndicator();
+          }
+          final availableSettings = _availableCalendarSettings(settings);
+          final items = availableSettings.map((setting) {
+            switch (setting) {
+              case CalendarLayoutSettingAction.showWeekNumber:
+                return ShowWeekNumber(
+                  showWeekNumbers: settings.showWeekNumbers,
+                  onUpdated: (showWeekNumbers) {
+                    _updateLayoutSettings(
+                      context,
+                      showWeekNumbers: showWeekNumbers,
+                    );
+                  },
+                );
+              case CalendarLayoutSettingAction.showWeekends:
+                return ShowWeekends(
+                  showWeekends: settings.showWeekends,
+                  onUpdated: (showWeekends) {
+                    _updateLayoutSettings(
+                      context,
+                      showWeekends: showWeekends,
+                    );
+                  },
+                );
+              case CalendarLayoutSettingAction.firstDayOfWeek:
+                return FirstDayOfWeek(
+                  firstDayOfWeek: settings.firstDayOfWeek,
+                  popoverMutex: popoverMutex,
+                  onUpdated: (firstDayOfWeek) {
+                    _updateLayoutSettings(
+                      context,
+                      firstDayOfWeek: firstDayOfWeek,
+                    );
+                  },
+                );
+              case CalendarLayoutSettingAction.layoutField:
+                return LayoutDateField(
+                  fieldController: widget.fieldController,
+                  viewId: widget.viewId,
+                  fieldId: settings.fieldId,
+                  popoverMutex: popoverMutex,
+                  onUpdated: (fieldId) {
+                    _updateLayoutSettings(
+                      context,
+                      layoutFieldId: fieldId,
+                    );
+                  },
+                );
+              default:
+                return const SizedBox();
+            }
+          }).toList();
+
+          return SizedBox(
+            width: 200,
+            child: ListView.separated(
+              shrinkWrap: true,
+              controller: ScrollController(),
+              itemCount: items.length,
+              separatorBuilder: (context, index) =>
+                  VSpace(GridSize.typeOptionSeparatorHeight),
+              physics: StyledScrollPhysics(),
+              itemBuilder: (BuildContext context, int index) => items[index],
+              padding: const EdgeInsets.all(6.0),
+            ),
+          );
+        },
+      ),
    );
  }

@@ -161,7 +174,6 @@ class _CalendarLayoutSettingState extends State<CalendarLayoutSetting> {

  void _updateLayoutSettings(
    BuildContext context, {
-    required Function(CalendarLayoutSettingPB? layoutSettings) onUpdated,
    bool? showWeekends,
    bool? showWeekNumbers,
    int? firstDayOfWeek,
@@ -190,7 +202,8 @@ class _CalendarLayoutSettingState extends State<CalendarLayoutSetting> {
    context
        .read<CalendarSettingBloc>()
        .add(CalendarSettingEvent.updateLayoutSetting(setting));
-    onUpdated(setting);
+
+    widget.calendarSettingController.updateLayoutSettings(setting);
  }
 }

@@ -1,137 +0,0 @@
-import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/plugins/database_view/application/field/field_controller.dart';
-import 'package:appflowy/plugins/database_view/calendar/application/calendar_setting_bloc.dart';
-import 'package:appflowy/plugins/database_view/grid/presentation/layout/sizes.dart';
-import 'package:appflowy/plugins/database_view/widgets/field/grid_property.dart';
-import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra/image.dart';
-import 'package:flowy_infra_ui/style_widget/button.dart';
-import 'package:flowy_infra_ui/style_widget/scrolling/styled_list.dart';
-import 'package:flowy_infra_ui/style_widget/text.dart';
-import 'package:flowy_infra_ui/widget/spacing.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:styled_widget/styled_widget.dart';
-
-import 'calendar_layout_setting.dart';
-
-/// The highest-level widget shown in the popover triggered by clicking the
-/// "Settings" button. Shows [AllCalendarSettings] by default, but replaces its
-/// contents with the submenu when a category is selected.
-class CalendarSetting extends StatelessWidget {
-  final CalendarSettingContext settingContext;
-  final CalendarLayoutSettingPB? layoutSettings;
-  final Function(CalendarLayoutSettingPB? layoutSettings) onUpdated;
-
-  const CalendarSetting({
-    required this.onUpdated,
-    required this.layoutSettings,
-    required this.settingContext,
-    super.key,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return BlocProvider<CalendarSettingBloc>(
-      create: (context) => CalendarSettingBloc(layoutSettings: layoutSettings),
-      child: BlocBuilder<CalendarSettingBloc, CalendarSettingState>(
-        builder: (context, state) {
-          final CalendarSettingAction? action =
-              state.selectedAction.foldLeft(null, (previous, action) => action);
-          switch (action) {
-            case CalendarSettingAction.properties:
-              return DatabasePropertyList(
-                viewId: settingContext.viewId,
-                fieldController: settingContext.fieldController,
-              );
-            case CalendarSettingAction.layout:
-              return CalendarLayoutSetting(
-                onUpdated: onUpdated,
-                settingContext: settingContext,
-              );
-            default:
-              return const AllCalendarSettings().padding(all: 6.0);
-          }
-        },
-      ),
-    );
-  }
-}
-
-/// Shows all of the available categories of settings that can be set here.
-/// For now, this only includes the Layout category.
-class AllCalendarSettings extends StatelessWidget {
-  const AllCalendarSettings({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    final items = CalendarSettingAction.values
-        .map((e) => _settingItem(context, e))
-        .toList();
-
-    return SizedBox(
-      width: 140,
-      child: ListView.separated(
-        shrinkWrap: true,
-        controller: ScrollController(),
-        itemCount: items.length,
-        separatorBuilder: (context, index) =>
-            VSpace(GridSize.typeOptionSeparatorHeight),
-        physics: StyledScrollPhysics(),
-        itemBuilder: (BuildContext context, int index) => items[index],
-      ),
-    );
-  }
-
-  Widget _settingItem(BuildContext context, CalendarSettingAction action) {
-    Widget? icon;
-    if (action.iconName() != null) {
-      icon = FlowySvg(
-        name: action.iconName()!,
-      );
-    }
-    return SizedBox(
-      height: GridSize.popoverItemHeight,
-      child: FlowyButton(
-        leftIcon: icon,
-        text: FlowyText.medium(action.title()),
-        onTap: () {
-          context
-              .read<CalendarSettingBloc>()
-              .add(CalendarSettingEvent.performAction(action));
-        },
-      ),
-    );
-  }
-}
-
-extension _SettingExtension on CalendarSettingAction {
-  String? iconName() {
-    switch (this) {
-      case CalendarSettingAction.properties:
-        return 'grid/setting/properties';
-      case CalendarSettingAction.layout:
-        return null;
-    }
-  }
-
-  String title() {
-    switch (this) {
-      case CalendarSettingAction.properties:
-        return LocaleKeys.grid_settings_Properties.tr();
-      case CalendarSettingAction.layout:
-        return LocaleKeys.grid_settings_layout.tr();
-    }
-  }
-}
-
-class CalendarSettingContext {
-  final String viewId;
-  final FieldController fieldController;
-
-  CalendarSettingContext({
-    required this.viewId,
-    required this.fieldController,
-  });
-}
@@ -11,7 +11,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';

 import '../../application/calendar_bloc.dart';
-import 'calendar_setting.dart';

 class CalendarToolbar extends StatelessWidget {
  const CalendarToolbar({super.key});
@@ -33,52 +32,6 @@ class CalendarToolbar extends StatelessWidget {
  }
 }

-class _SettingButton extends StatefulWidget {
-  const _SettingButton({Key? key}) : super(key: key);
-
-  @override
-  State<StatefulWidget> createState() => _SettingButtonState();
-}
-
-class _SettingButtonState extends State<_SettingButton> {
-  @override
-  Widget build(BuildContext context) {
-    return AppFlowyPopover(
-      direction: PopoverDirection.bottomWithRightAligned,
-      constraints: BoxConstraints.loose(const Size(300, 400)),
-      margin: EdgeInsets.zero,
-      child: FlowyTextButton(
-        LocaleKeys.settings_title.tr(),
-        fillColor: Colors.transparent,
-        hoverColor: AFThemeExtension.of(context).lightGreyHover,
-        padding: GridSize.typeOptionContentInsets,
-      ),
-      popupBuilder: (BuildContext popoverContext) {
-        final bloc = context.watch<CalendarBloc>();
-        final settingContext = CalendarSettingContext(
-          viewId: bloc.viewId,
-          fieldController: bloc.fieldController,
-        );
-        return CalendarSetting(
-          settingContext: settingContext,
-          layoutSettings: bloc.state.settings.fold(
-            () => null,
-            (settings) => settings,
-          ),
-          onUpdated: (layoutSettings) {
-            if (layoutSettings == null) {
-              return;
-            }
-            context
-                .read<CalendarBloc>()
-                .add(CalendarEvent.updateCalendarLayoutSetting(layoutSettings));
-          },
-        );
-      }, // use blocbuilder
-    );
-  }
-}
-
 class _UnscheduleEventsButton extends StatefulWidget {
  const _UnscheduleEventsButton({Key? key}) : super(key: key);

@@ -1,55 +0,0 @@
-import 'package:appflowy/startup/plugin/plugin.dart';
-import 'package:appflowy/startup/startup.dart';
-import 'package:appflowy/workspace/application/view/view_ext.dart';
-import 'package:appflowy/workspace/application/view/view_listener.dart';
-import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
-import '../../workspace/presentation/home/home_stack.dart';
-
-/// [DatabaseViewPlugin] is used to build the grid, calendar, and board.
-/// It is a wrapper of the [Plugin] class. The underlying [Plugin] is
-/// determined by the [ViewPB.pluginType] field.
-///
-class DatabaseViewPlugin extends Plugin {
-  final ViewListener _viewListener;
-  ViewPB _view;
-  Plugin _innerPlugin;
-
-  DatabaseViewPlugin({
-    required ViewPB view,
-  })  : _view = view,
-        _innerPlugin = _makeInnerPlugin(view),
-        _viewListener = ViewListener(view: view) {
-    _listenOnLayoutChanged();
-  }
-
-  @override
-  PluginId get id => _innerPlugin.id;
-
-  @override
-  PluginType get pluginType => _innerPlugin.pluginType;
-
-  @override
-  PluginWidgetBuilder get widgetBuilder => _innerPlugin.widgetBuilder;
-
-  void _listenOnLayoutChanged() {
-    _viewListener.start(
-      onViewUpdated: (result) {
-        result.fold(
-          (updatedView) {
-            if (_view.layout != updatedView.layout) {
-              _innerPlugin = _makeInnerPlugin(updatedView);
-
-              getIt<HomeStackManager>().setPlugin(_innerPlugin);
-            }
-            _view = updatedView;
-          },
-          (r) => null,
-        );
-      },
-    );
-  }
-}
-
-Plugin _makeInnerPlugin(ViewPB view) {
-  return makePlugin(pluginType: view.pluginType, data: view);
-}
@@ -33,18 +33,18 @@ class GridBloc extends Bloc<GridEvent, GridState> {
            final rowService = RowBackendService(
              viewId: rowInfo.viewId,
            );
-            await rowService.deleteRow(rowInfo.rowPB.id);
+            await rowService.deleteRow(rowInfo.rowId);
          },
          moveRow: (int from, int to) {
            final List<RowInfo> rows = [...state.rowInfos];

-            final fromRow = rows[from].rowPB;
-            final toRow = rows[to].rowPB;
+            final fromRow = rows[from].rowId;
+            final toRow = rows[to].rowId;

            rows.insert(to, rows.removeAt(from));
            emit(state.copyWith(rowInfos: rows));

-            databaseController.moveRow(fromRow: fromRow, toRow: toRow);
+            databaseController.moveRow(fromRowId: fromRow, toRowId: toRow);
          },
          didReceiveGridUpdate: (grid) {
            emit(state.copyWith(grid: Some(grid)));
@@ -56,7 +56,7 @@ class GridBloc extends Bloc<GridEvent, GridState> {
              ),
            );
          },
-          didReceiveRowUpdate: (newRowInfos, reason) {
+          didLoadRows: (newRowInfos, reason) {
            emit(
              state.copyWith(
                rowInfos: newRowInfos,
@@ -76,7 +76,7 @@ class GridBloc extends Bloc<GridEvent, GridState> {
    return super.close();
  }

-  RowCache? getRowCache(RowId rowId) {
+  RowCache getRowCache(RowId rowId) {
    return databaseController.rowCache;
  }

@@ -89,9 +89,14 @@ class GridBloc extends Bloc<GridEvent, GridState> {
      },
      onNumOfRowsChanged: (rowInfos, _, reason) {
        if (!isClosed) {
-          add(GridEvent.didReceiveRowUpdate(rowInfos, reason));
+          add(GridEvent.didLoadRows(rowInfos, reason));
        }
      },
+      onRowsUpdated: (rows, reason) {
+        add(
+          GridEvent.didLoadRows(databaseController.rowCache.rowInfos, reason),
+        );
+      },
      onFieldsChanged: (fields) {
        if (!isClosed) {
          add(GridEvent.didReceiveFieldUpdate(fields));
@@ -122,9 +127,9 @@ class GridEvent with _$GridEvent {
  const factory GridEvent.createRow() = _CreateRow;
  const factory GridEvent.deleteRow(RowInfo rowInfo) = _DeleteRow;
  const factory GridEvent.moveRow(int from, int to) = _MoveRow;
-  const factory GridEvent.didReceiveRowUpdate(
+  const factory GridEvent.didLoadRows(
    List<RowInfo> rows,
-    RowsChangedReason listState,
+    RowsChangedReason reason,
  ) = _DidReceiveRowUpdate;
  const factory GridEvent.didReceiveFieldUpdate(
    List<FieldInfo> fields,
@@ -4,7 +4,6 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
 import 'package:dartz/dartz.dart';

-import '../../../application/row/row_cache.dart';
 import '../../../application/row/row_service.dart';

 part 'row_action_sheet_bloc.freezed.dart';
@@ -13,19 +12,20 @@ class RowActionSheetBloc
    extends Bloc<RowActionSheetEvent, RowActionSheetState> {
  final RowBackendService _rowService;

-  RowActionSheetBloc({required RowInfo rowInfo})
-      : _rowService = RowBackendService(viewId: rowInfo.viewId),
-        super(RowActionSheetState.initial(rowInfo)) {
+  RowActionSheetBloc({
+    required String viewId,
+    required RowId rowId,
+  })  : _rowService = RowBackendService(viewId: viewId),
+        super(RowActionSheetState.initial(rowId)) {
    on<RowActionSheetEvent>(
      (event, emit) async {
        await event.when(
          deleteRow: () async {
-            final result = await _rowService.deleteRow(state.rowData.rowPB.id);
+            final result = await _rowService.deleteRow(state.rowId);
            logResult(result);
          },
          duplicateRow: () async {
-            final result =
-                await _rowService.duplicateRow(rowId: state.rowData.rowPB.id);
+            final result = await _rowService.duplicateRow(rowId: state.rowId);
            logResult(result);
          },
        );
@@ -47,10 +47,10 @@ class RowActionSheetEvent with _$RowActionSheetEvent {
@freezed
 class RowActionSheetState with _$RowActionSheetState {
  const factory RowActionSheetState({
-    required RowInfo rowData,
+    required RowId rowId,
  }) = _RowActionSheetState;

-  factory RowActionSheetState.initial(RowInfo rowData) => RowActionSheetState(
-        rowData: rowData,
+  factory RowActionSheetState.initial(RowId rowId) => RowActionSheetState(
+        rowId: rowId,
      );
 }
@@ -15,13 +15,16 @@ part 'row_bloc.freezed.dart';
 class RowBloc extends Bloc<RowEvent, RowState> {
  final RowBackendService _rowBackendSvc;
  final RowController _dataController;
+  final String viewId;
+  final String rowId;

  RowBloc({
-    required RowInfo rowInfo,
+    required this.rowId,
+    required this.viewId,
    required RowController dataController,
-  })  : _rowBackendSvc = RowBackendService(viewId: rowInfo.viewId),
+  })  : _rowBackendSvc = RowBackendService(viewId: viewId),
        _dataController = dataController,
-        super(RowState.initial(rowInfo, dataController.loadData())) {
+        super(RowState.initial(dataController.loadData())) {
    on<RowEvent>(
      (event, emit) async {
        await event.when(
@@ -29,7 +32,7 @@ class RowBloc extends Bloc<RowEvent, RowState> {
            await _startListening();
          },
          createRow: () {
-            _rowBackendSvc.createRow(rowInfo.rowPB.id);
+            _rowBackendSvc.createRowAfterRow(rowId);
          },
          didReceiveCells: (cellByFieldId, reason) async {
            final cells = cellByFieldId.values
@@ -78,18 +81,15 @@ class RowEvent with _$RowEvent {
@freezed
 class RowState with _$RowState {
  const factory RowState({
-    required RowInfo rowInfo,
    required CellContextByFieldId cellByFieldId,
    required UnmodifiableListView<GridCellEquatable> cells,
    RowsChangedReason? changeReason,
  }) = _RowState;

  factory RowState.initial(
-    RowInfo rowInfo,
    CellContextByFieldId cellByFieldId,
  ) =>
      RowState(
-        rowInfo: rowInfo,
        cellByFieldId: cellByFieldId,
        cells: UnmodifiableListView(
          cellByFieldId.values
@@ -27,7 +27,7 @@ class RowDetailBloc extends Bloc<RowDetailEvent, RowDetailState> {
            }
          },
          didReceiveCellDatas: (cells) {
-            emit(state.copyWith(gridCells: cells));
+            emit(state.copyWith(cells: cells));
          },
          deleteField: (fieldId) {
            _fieldBackendService(fieldId).deleteField();
@@ -95,10 +95,10 @@ class RowDetailEvent with _$RowDetailEvent {
@freezed
 class RowDetailState with _$RowDetailState {
  const factory RowDetailState({
-    required List<DatabaseCellContext> gridCells,
+    required List<DatabaseCellContext> cells,
  }) = _RowDetailState;

  factory RowDetailState.initial() => RowDetailState(
-        gridCells: List.empty(),
+        cells: List.empty(),
      );
 }
@@ -0,0 +1,126 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/workspace/application/view/view_service.dart';
+import 'package:appflowy_backend/log.dart';
+import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
+import 'package:appflowy_backend/protobuf/flowy-error/code.pbenum.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:freezed_annotation/freezed_annotation.dart';
+import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
+
+import '../../../application/row/row_service.dart';
+
+part 'row_document_bloc.freezed.dart';
+
+class RowDocumentBloc extends Bloc<RowDocumentEvent, RowDocumentState> {
+  final String rowId;
+  final RowBackendService _rowBackendSvc;
+
+  RowDocumentBloc({
+    required this.rowId,
+    required String viewId,
+  })  : _rowBackendSvc = RowBackendService(viewId: viewId),
+        super(RowDocumentState.initial()) {
+    on<RowDocumentEvent>(
+      (event, emit) async {
+        await event.when(
+          initial: () async {
+            _getRowDocumentView();
+          },
+          didReceiveRowDocument: (view) {
+            emit(
+              state.copyWith(
+                viewPB: view,
+                loadingState: const LoadingState.finish(),
+              ),
+            );
+          },
+          didReceiveError: (FlowyError error) {
+            emit(
+              state.copyWith(
+                loadingState: LoadingState.error(error),
+              ),
+            );
+          },
+        );
+      },
+    );
+  }
+
+  Future<void> _getRowDocumentView() async {
+    final rowDetailOrError = await _rowBackendSvc.getRowMeta(rowId);
+    rowDetailOrError.fold(
+      (RowMetaPB rowMeta) async {
+        final viewsOrError =
+            await ViewBackendService.getView(rowMeta.documentId);
+
+        if (isClosed) {
+          return;
+        }
+
+        viewsOrError.fold(
+          (view) => add(RowDocumentEvent.didReceiveRowDocument(view)),
+          (error) async {
+            if (error.code == ErrorCode.RecordNotFound.value) {
+              // By default, the document of the row is not exist. So creating a
+              // new document for the given document id of the row.
+              final documentView =
+                  await _createRowDocumentView(rowMeta.documentId);
+              if (documentView != null) {
+                add(RowDocumentEvent.didReceiveRowDocument(documentView));
+              }
+            } else {
+              add(RowDocumentEvent.didReceiveError(error));
+            }
+          },
+        );
+      },
+      (err) => Log.error('Failed to get row detail: $err'),
+    );
+  }
+
+  Future<ViewPB?> _createRowDocumentView(String viewId) async {
+    final result = await ViewBackendService.createOrphanView(
+      viewId: viewId,
+      name: LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
+      desc: '',
+      layoutType: ViewLayoutPB.Document,
+    );
+    return result.fold(
+      (view) => view,
+      (error) {
+        Log.error(error);
+        return null;
+      },
+    );
+  }
+}
+
+@freezed
+class RowDocumentEvent with _$RowDocumentEvent {
+  const factory RowDocumentEvent.initial() = _InitialRow;
+  const factory RowDocumentEvent.didReceiveRowDocument(ViewPB view) =
+      _DidReceiveRowDocument;
+  const factory RowDocumentEvent.didReceiveError(FlowyError error) =
+      _DidReceiveError;
+}
+
+@freezed
+class RowDocumentState with _$RowDocumentState {
+  const factory RowDocumentState({
+    ViewPB? viewPB,
+    required LoadingState loadingState,
+  }) = _RowDocumentState;
+
+  factory RowDocumentState.initial() => const RowDocumentState(
+        loadingState: LoadingState.loading(),
+      );
+}
+
+@freezed
+class LoadingState with _$LoadingState {
+  const factory LoadingState.loading() = _Loading;
+  const factory LoadingState.error(FlowyError error) = _Error;
+  const factory LoadingState.finish() = _Finish;
+}
@@ -45,8 +45,12 @@ class GridPlugin extends Plugin {
  GridPlugin({
    required ViewPB view,
    required PluginType pluginType,
+    bool listenOnViewChanged = false,
  })  : _pluginType = pluginType,
-        notifier = ViewPluginNotifier(view: view);
+        notifier = ViewPluginNotifier(
+          view: view,
+          listenOnViewChanged: listenOnViewChanged,
+        );

  @override
  PluginWidgetBuilder get widgetBuilder =>
@@ -69,11 +73,11 @@ class GridPluginWidgetBuilder extends PluginWidgetBuilder {
  Widget get leftBarItem => ViewLeftBarItem(view: view);

  @override
-  Widget buildWidget(PluginContext context) {
+  Widget buildWidget({PluginContext? context}) {
    notifier.isDeleted.addListener(() {
      notifier.isDeleted.value.fold(() => null, (deletedView) {
        if (deletedView.hasIndex()) {
-          context.onDeleted(view, deletedView.index);
+          context?.onDeleted(view, deletedView.index);
        }
      });
    });
@@ -1,5 +1,7 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/database_view/application/row/row_service.dart';
 import 'package:appflowy/plugins/database_view/widgets/row/cell_builder.dart';
+import 'package:appflowy_backend/log.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui_web.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_scroll_bar.dart';
@@ -78,7 +80,11 @@ class _GridPageState extends State<GridPage> {
            loading: (_) =>
                const Center(child: CircularProgressIndicator.adaptive()),
            finish: (result) => result.successOrFail.fold(
-              (_) => const GridShortcuts(child: FlowyGrid()),
+              (_) => GridShortcuts(
+                child: FlowyGrid(
+                  viewId: widget.view.id,
+                ),
+              ),
              (err) => FlowyErrorPage(err.toString()),
            ),
          );
@@ -89,7 +95,9 @@ class _GridPageState extends State<GridPage> {
 }

 class FlowyGrid extends StatefulWidget {
+  final String viewId;
  const FlowyGrid({
+    required this.viewId,
    super.key,
  });

@@ -125,6 +133,7 @@ class _FlowyGridState extends State<FlowyGrid> {
          scrollController: _scrollController,
          contentWidth: contentWidth,
          child: _GridRows(
+            viewId: widget.viewId,
            verticalScrollController: _scrollController.verticalController,
          ),
        );
@@ -155,7 +164,9 @@ class _FlowyGridState extends State<FlowyGrid> {
 }

 class _GridRows extends StatelessWidget {
+  final String viewId;
  const _GridRows({
+    required this.viewId,
    required this.verticalScrollController,
  });

@@ -207,7 +218,7 @@ class _GridRows extends StatelessWidget {
                final rowInfo = rowInfos[index];
                return _renderRow(
                  context,
-                  rowInfo,
+                  rowInfo.rowId,
                  index: index,
                  isSortEnabled: sortState.sortInfos.isNotEmpty,
                  isFilterEnabled: filterState.filters.isNotEmpty,
@@ -223,38 +234,38 @@ class _GridRows extends StatelessWidget {

  Widget _renderRow(
    BuildContext context,
-    RowInfo rowInfo, {
+    RowId rowId, {
    int? index,
    bool isSortEnabled = false,
    bool isFilterEnabled = false,
    Animation<double>? animation,
  }) {
-    final rowCache = context.read<GridBloc>().getRowCache(
-          rowInfo.rowPB.id,
-        );
+    final rowCache = context.read<GridBloc>().getRowCache(rowId);
+    final rowMeta = rowCache.getRow(rowId)?.rowMeta;

-    /// Return placeholder widget if the rowCache is null.
-    if (rowCache == null) return const SizedBox.shrink();
+    /// Return placeholder widget if the rowMeta is null.
+    if (rowMeta == null) return const SizedBox.shrink();

    final fieldController =
        context.read<GridBloc>().databaseController.fieldController;
    final dataController = RowController(
-      rowId: rowInfo.rowPB.id,
-      viewId: rowInfo.viewId,
+      viewId: viewId,
+      rowMeta: rowMeta,
      rowCache: rowCache,
    );

    final child = GridRow(
-      key: ValueKey(rowInfo.rowPB.id),
+      key: ValueKey(rowMeta.id),
+      rowId: rowId,
+      viewId: viewId,
      index: index,
      isDraggable: !isSortEnabled && !isFilterEnabled,
-      rowInfo: rowInfo,
      dataController: dataController,
      cellBuilder: GridCellBuilder(cellCache: dataController.cellCache),
      openDetailPage: (context, cellBuilder) {
        _openRowDetailPage(
          context,
-          rowInfo,
+          rowId,
          fieldController,
          rowCache,
          cellBuilder,
@@ -274,26 +285,32 @@ class _GridRows extends StatelessWidget {

  void _openRowDetailPage(
    BuildContext context,
-    RowInfo rowInfo,
+    RowId rowId,
    FieldController fieldController,
    RowCache rowCache,
    GridCellBuilder cellBuilder,
  ) {
-    final dataController = RowController(
-      viewId: rowInfo.viewId,
-      rowId: rowInfo.rowPB.id,
-      rowCache: rowCache,
-    );
+    final rowMeta = rowCache.getRow(rowId)?.rowMeta;
+    // Most of the cases, the rowMeta should not be null.
+    if (rowMeta != null) {
+      final dataController = RowController(
+        viewId: viewId,
+        rowMeta: rowMeta,
+        rowCache: rowCache,
+      );

-    FlowyOverlay.show(
-      context: context,
-      builder: (BuildContext context) {
-        return RowDetailPage(
-          cellBuilder: cellBuilder,
-          rowController: dataController,
-        );
-      },
-    );
+      FlowyOverlay.show(
+        context: context,
+        builder: (BuildContext context) {
+          return RowDetailPage(
+            cellBuilder: cellBuilder,
+            rowController: dataController,
+          );
+        },
+      );
+    } else {
+      Log.warn('RowMeta is null for rowId: $rowId');
+    }
  }
 }

@@ -357,10 +374,9 @@ class _RowCountBadge extends StatelessWidget {
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              FlowyText.medium(
-                '${LocaleKeys.grid_row_count.tr()} : ',
+                rowCountString(rowCount),
                color: Theme.of(context).hintColor,
              ),
-              FlowyText.medium(rowCount.toString()),
            ],
          ),
        );
@@ -368,3 +384,7 @@ class _RowCountBadge extends StatelessWidget {
    );
  }
 }
+
+String rowCountString(int count) {
+  return '${LocaleKeys.grid_row_count.tr()} : $count';
+}
@@ -52,11 +52,11 @@ class _FieldEditorState extends State<FieldEditor> {
  @override
  Widget build(BuildContext context) {
    final List<Widget> children = [
-      _FieldNameTextField(popoverMutex: popoverMutex),
+      FieldNameTextField(popoverMutex: popoverMutex),
      if (widget.onDeleted != null) _addDeleteFieldButton(),
      if (widget.onHidden != null) _addHideFieldButton(),
      if (!widget.typeOptionLoader.field.isPrimary)
-        _FieldTypeOptionCell(popoverMutex: popoverMutex),
+        FieldTypeOptionCell(popoverMutex: popoverMutex),
    ];
    return BlocProvider(
      create: (context) {
@@ -116,10 +116,10 @@ class _FieldEditorState extends State<FieldEditor> {
  }
 }

-class _FieldTypeOptionCell extends StatelessWidget {
+class FieldTypeOptionCell extends StatelessWidget {
  final PopoverMutex popoverMutex;

-  const _FieldTypeOptionCell({
+  const FieldTypeOptionCell({
    Key? key,
    required this.popoverMutex,
  }) : super(key: key);
@@ -130,7 +130,7 @@ class _FieldTypeOptionCell extends StatelessWidget {
      buildWhen: (p, c) => p.field != c.field,
      builder: (context, state) {
        return state.field.fold(
-          () => const SizedBox(),
+          () => const SizedBox.shrink(),
          (fieldInfo) {
            final dataController =
                context.read<FieldEditorBloc>().dataController;
@@ -145,18 +145,18 @@ class _FieldTypeOptionCell extends StatelessWidget {
  }
 }

-class _FieldNameTextField extends StatefulWidget {
+class FieldNameTextField extends StatefulWidget {
  final PopoverMutex popoverMutex;
-  const _FieldNameTextField({
+  const FieldNameTextField({
    required this.popoverMutex,
    Key? key,
  }) : super(key: key);

  @override
-  State<_FieldNameTextField> createState() => _FieldNameTextFieldState();
+  State<FieldNameTextField> createState() => _FieldNameTextFieldState();
 }

-class _FieldNameTextFieldState extends State<_FieldNameTextField> {
+class _FieldNameTextFieldState extends State<FieldNameTextField> {
  final textController = TextEditingController();
  FocusNode focusNode = FocusNode();

@@ -48,7 +48,7 @@ class FieldTypeOptionEditor extends StatelessWidget {
          );

          final List<Widget> children = [
-            _SwitchFieldButton(popoverMutex: popoverMutex),
+            SwitchFieldButton(popoverMutex: popoverMutex),
            if (typeOptionWidget != null) typeOptionWidget
          ];

@@ -73,9 +73,9 @@ class FieldTypeOptionEditor extends StatelessWidget {
  }
 }

-class _SwitchFieldButton extends StatelessWidget {
+class SwitchFieldButton extends StatelessWidget {
  final PopoverMutex popoverMutex;
-  const _SwitchFieldButton({
+  const SwitchFieldButton({
    required this.popoverMutex,
    Key? key,
  }) : super(key: key);
@@ -1,4 +1,4 @@
-import 'package:appflowy/plugins/database_view/application/row/row_cache.dart';
+import 'package:appflowy/plugins/database_view/application/row/row_service.dart';
 import 'package:appflowy/plugins/database_view/grid/application/row/row_action_sheet_bloc.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
@@ -14,13 +14,18 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import '../../layout/sizes.dart';

 class RowActions extends StatelessWidget {
-  final RowInfo rowData;
-  const RowActions({required this.rowData, Key? key}) : super(key: key);
+  final String viewId;
+  final RowId rowId;
+  const RowActions({
+    required this.viewId,
+    required this.rowId,
+    Key? key,
+  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
-      create: (context) => RowActionSheetBloc(rowInfo: rowData),
+      create: (context) => RowActionSheetBloc(viewId: viewId, rowId: rowId),
      child: BlocBuilder<RowActionSheetBloc, RowActionSheetState>(
        builder: (context, state) {
          final cells = _RowAction.values
@@ -1,6 +1,6 @@
 import 'package:appflowy/plugins/database_view/application/cell/cell_service.dart';
-import 'package:appflowy/plugins/database_view/application/row/row_cache.dart';
 import 'package:appflowy/plugins/database_view/application/row/row_data_controller.dart';
+import 'package:appflowy/plugins/database_view/application/row/row_service.dart';
 import 'package:appflowy/plugins/database_view/grid/application/row/row_bloc.dart';
 import 'package:appflowy/plugins/database_view/widgets/row/cell_builder.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
@@ -20,7 +20,8 @@ import "package:appflowy/generated/locale_keys.g.dart";
 import 'package:easy_localization/easy_localization.dart';

 class GridRow extends StatefulWidget {
-  final RowInfo rowInfo;
+  final RowId viewId;
+  final RowId rowId;
  final RowController dataController;
  final GridCellBuilder cellBuilder;
  final void Function(BuildContext, GridCellBuilder) openDetailPage;
@@ -30,7 +31,8 @@ class GridRow extends StatefulWidget {

  const GridRow({
    super.key,
-    required this.rowInfo,
+    required this.viewId,
+    required this.rowId,
    required this.dataController,
    required this.cellBuilder,
    required this.openDetailPage,
@@ -49,8 +51,9 @@ class _GridRowState extends State<GridRow> {
  void initState() {
    super.initState();
    _rowBloc = RowBloc(
-      rowInfo: widget.rowInfo,
+      rowId: widget.rowId,
      dataController: widget.dataController,
+      viewId: widget.viewId,
    );
    _rowBloc.add(const RowEvent.initial());
  }
@@ -61,7 +64,8 @@ class _GridRowState extends State<GridRow> {
      value: _rowBloc,
      child: _RowEnterRegion(
        child: BlocBuilder<RowBloc, RowState>(
-          buildWhen: (p, c) => p.rowInfo.rowPB.height != c.rowInfo.rowPB.height,
+          // The row need to rebuild when the cell count changes.
+          buildWhen: (p, c) => p.cellByFieldId.length != c.cellByFieldId.length,
          builder: (context, state) {
            final content = Expanded(
              child: RowContent(
@@ -126,7 +130,11 @@ class _RowLeadingState extends State<_RowLeading> {
      direction: PopoverDirection.rightWithCenterAligned,
      margin: const EdgeInsets.all(6),
      popupBuilder: (BuildContext popoverContext) {
-        return RowActions(rowData: context.read<RowBloc>().state.rowInfo);
+        final bloc = context.read<RowBloc>();
+        return RowActions(
+          viewId: bloc.viewId,
+          rowId: bloc.rowId,
+        );
      },
      child: Consumer<RegionStateNotifier>(
        builder: (context, state, _) {
@@ -143,11 +151,11 @@ class _RowLeadingState extends State<_RowLeading> {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
-        const _InsertButton(),
+        const InsertRowButton(),
        if (isDraggable) ...[
          ReorderableDragStartListener(
            index: widget.index!,
-            child: _MenuButton(
+            child: RowMenuButton(
              isDragEnabled: isDraggable,
              openMenu: () {
                popoverController.show();
@@ -155,7 +163,7 @@ class _RowLeadingState extends State<_RowLeading> {
            ),
          ),
        ] else ...[
-          _MenuButton(
+          RowMenuButton(
            openMenu: () {
              popoverController.show();
            },
@@ -168,8 +176,8 @@ class _RowLeadingState extends State<_RowLeading> {
  bool get isDraggable => widget.index != null && widget.isDraggable;
 }

-class _InsertButton extends StatelessWidget {
-  const _InsertButton({Key? key}) : super(key: key);
+class InsertRowButton extends StatelessWidget {
+  const InsertRowButton({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
@@ -188,20 +196,21 @@ class _InsertButton extends StatelessWidget {
  }
 }

-class _MenuButton extends StatefulWidget {
+class RowMenuButton extends StatefulWidget {
  final VoidCallback openMenu;
  final bool isDragEnabled;

-  const _MenuButton({
+  const RowMenuButton({
    required this.openMenu,
    this.isDragEnabled = false,
+    super.key,
  });

  @override
-  State<_MenuButton> createState() => _MenuButtonState();
+  State<RowMenuButton> createState() => _RowMenuButtonState();
 }

-class _MenuButtonState extends State<_MenuButton> {
+class _RowMenuButtonState extends State<RowMenuButton> {
  @override
  Widget build(BuildContext context) {
    return FlowyIconButton(
@@ -17,7 +17,7 @@ import 'container/card_container.dart';

 /// Edit a database row with card style widget
 class RowCard<CustomCardData> extends StatefulWidget {
-  final RowPB row;
+  final RowMetaPB rowMeta;
  final String viewId;
  final String? groupingFieldId;

@@ -46,7 +46,7 @@ class RowCard<CustomCardData> extends StatefulWidget {
  final RowCardStyleConfiguration styleConfiguration;

  const RowCard({
-    required this.row,
+    required this.rowMeta,
    required this.viewId,
    this.groupingFieldId,
    required this.isEditing,
@@ -81,7 +81,7 @@ class _RowCardState<T> extends State<RowCard<T>> {
      viewId: widget.viewId,
      groupFieldId: widget.groupingFieldId,
      isEditing: widget.isEditing,
-      row: widget.row,
+      rowMeta: widget.rowMeta,
      rowCache: widget.rowCache,
    )..add(const RowCardEvent.initial());

@@ -178,7 +178,8 @@ class _RowCardState<T> extends State<RowCard<T>> {
        throw UnimplementedError();
      case AccessoryType.more:
        return RowActions(
-          rowData: context.read<CardBloc>().rowInfo(),
+          viewId: context.read<CardBloc>().viewId,
+          rowId: context.read<CardBloc>().rowMeta.id,
        );
    }
  }
@@ -12,24 +12,24 @@ import '../../application/row/row_service.dart';
 part 'card_bloc.freezed.dart';

 class CardBloc extends Bloc<RowCardEvent, RowCardState> {
-  final RowPB row;
+  final RowMetaPB rowMeta;
  final String? groupFieldId;
  final RowBackendService _rowBackendSvc;
  final RowCache _rowCache;
  VoidCallback? _rowCallback;
+  final String viewId;

  CardBloc({
-    required this.row,
+    required this.rowMeta,
    required this.groupFieldId,
-    required String viewId,
+    required this.viewId,
    required RowCache rowCache,
    required bool isEditing,
  })  : _rowBackendSvc = RowBackendService(viewId: viewId),
        _rowCache = rowCache,
        super(
          RowCardState.initial(
-            row,
-            _makeCells(groupFieldId, rowCache.loadGridCells(row.id)),
+            _makeCells(groupFieldId, rowCache.loadGridCells(rowMeta)),
            isEditing,
          ),
        ) {
@@ -70,13 +70,14 @@ class CardBloc extends Bloc<RowCardEvent, RowCardState> {
      fields: UnmodifiableListView(
        state.cells.map((cell) => cell.fieldInfo).toList(),
      ),
-      rowPB: state.rowPB,
+      rowId: rowMeta.id,
+      rowMeta: rowMeta,
    );
  }

  Future<void> _startListening() async {
    _rowCallback = _rowCache.addListener(
-      rowId: row.id,
+      rowId: rowMeta.id,
      onCellUpdated: (cellMap, reason) {
        if (!isClosed) {
          final cells = _makeCells(groupFieldId, cellMap);
@@ -118,19 +119,16 @@ class RowCardEvent with _$RowCardEvent {
@freezed
 class RowCardState with _$RowCardState {
  const factory RowCardState({
-    required RowPB rowPB,
    required List<DatabaseCellContext> cells,
    required bool isEditing,
    RowsChangedReason? changeReason,
  }) = _RowCardState;

  factory RowCardState.initial(
-    RowPB rowPB,
    List<DatabaseCellContext> cells,
    bool isEditing,
  ) =>
      RowCardState(
-        rowPB: rowPB,
        cells: cells,
        isEditing: isEditing,
      );
@@ -32,8 +32,10 @@ class _ChecklistCardCellState extends State<ChecklistCardCell> {
    return BlocProvider.value(
      value: _cellBloc,
      child: BlocBuilder<ChecklistCardCellBloc, ChecklistCellState>(
-        builder: (context, state) =>
-            ChecklistProgressBar(percent: state.percent),
+        builder: (context, state) => Padding(
+          padding: const EdgeInsets.symmetric(vertical: 4),
+          child: ChecklistProgressBar(percent: state.percent),
+        ),
      ),
    );
  }
@@ -0,0 +1,67 @@
+import 'package:appflowy/workspace/application/view/view_ext.dart';
+import 'package:appflowy/workspace/application/view/view_listener.dart';
+import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
+import 'package:flutter/material.dart';
+
+class DatabaseViewWidget extends StatefulWidget {
+  const DatabaseViewWidget({
+    super.key,
+    required this.view,
+  });
+
+  final ViewPB view;
+
+  @override
+  State<DatabaseViewWidget> createState() => _DatabaseViewWidgetState();
+}
+
+class _DatabaseViewWidgetState extends State<DatabaseViewWidget> {
+  /// Listens to the view updates.
+  late final ViewListener _listener;
+
+  /// Notifies the view layout type changes. When the layout type changes,
+  /// the widget of the view will be updated.
+  late final ValueNotifier<ViewLayoutPB> _layoutTypeChangeNotifier;
+
+  /// The view will be updated by the [ViewListener].
+  late ViewPB view;
+
+  @override
+  void initState() {
+    super.initState();
+
+    view = widget.view;
+    _listenOnViewUpdated();
+  }
+
+  @override
+  void dispose() {
+    _layoutTypeChangeNotifier.dispose();
+    _listener.stop();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ValueListenableBuilder<ViewLayoutPB>(
+      valueListenable: _layoutTypeChangeNotifier,
+      builder: (_, __, ___) {
+        return view.plugin().widgetBuilder.buildWidget();
+      },
+    );
+  }
+
+  void _listenOnViewUpdated() {
+    _listener = ViewListener(viewId: widget.view.id)
+      ..start(
+        onViewUpdated: (updatedView) {
+          if (mounted) {
+            view = updatedView;
+            _layoutTypeChangeNotifier.value = view.layout;
+          }
+        },
+      );
+
+    _layoutTypeChangeNotifier = ValueNotifier(widget.view.layout);
+  }
+}
@@ -19,8 +19,8 @@ class GridCellAccessoryBuildContext {
  });
 }

-class GridCellAccessoryBuilder {
-  final GlobalKey _key = GlobalKey();
+class GridCellAccessoryBuilder<T extends State<StatefulWidget>> {
+  final GlobalKey<T> _key = GlobalKey();

  final Widget Function(Key key) _builder;

@@ -67,9 +67,16 @@ class _PrimaryCellAccessoryState extends State<PrimaryCellAccessory>
  Widget build(BuildContext context) {
    return Tooltip(
      message: LocaleKeys.tooltip_openAsPage.tr(),
-      child: svgWidget(
-        "grid/expander",
-        color: Theme.of(context).colorScheme.primary,
+      child: SizedBox(
+        width: 26,
+        height: 26,
+        child: Padding(
+          padding: const EdgeInsets.all(3.0),
+          child: svgWidget(
+            "grid/expander",
+            color: Theme.of(context).colorScheme.primary,
+          ),
+        ),
      ),
    );
  }
@@ -183,12 +190,7 @@ class CellAccessoryContainer extends StatelessWidget {
      final hover = FlowyHover(
        style:
            HoverStyle(hoverColor: AFThemeExtension.of(context).lightGreyHover),
-        builder: (_, onHover) => Container(
-          width: 26,
-          height: 26,
-          padding: const EdgeInsets.all(3),
-          child: accessory.build(),
-        ),
+        builder: (_, onHover) => accessory.build(),
      );
      return GestureDetector(
        behavior: HitTestBehavior.opaque,
@@ -14,6 +14,7 @@ import 'cells/select_option_cell/select_option_cell.dart';
 import 'cells/text_cell/text_cell.dart';
 import 'cells/url_cell/url_cell.dart';

+/// Build the cell widget in Grid style.
 class GridCellBuilder {
  final CellCache cellCache;
  GridCellBuilder({
@@ -0,0 +1,7 @@
+export 'checkbox_cell/checkbox_cell.dart';
+export 'checklist_cell/checklist_cell.dart';
+export 'date_cell/date_cell.dart';
+export 'number_cell/number_cell.dart';
+export 'select_option_cell/select_option_cell.dart';
+export 'text_cell/text_cell.dart';
+export 'url_cell/url_cell.dart';
@@ -40,8 +40,8 @@ class _CheckboxCellState extends GridCellState<GridCheckboxCell> {
      child: BlocBuilder<CheckboxCellBloc, CheckboxCellState>(
        builder: (context, state) {
          final icon = state.isSelected
-              ? svgWidget('editor/editor_check')
-              : svgWidget('editor/editor_uncheck');
+              ? const CheckboxCellCheck()
+              : const CheckboxCellUncheck();
          return Align(
            alignment: Alignment.centerLeft,
            child: Padding(
@@ -82,3 +82,21 @@ class _CheckboxCellState extends GridCellState<GridCheckboxCell> {
    }
  }
 }
+
+class CheckboxCellCheck extends StatelessWidget {
+  const CheckboxCellCheck({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return svgWidget('editor/editor_check');
+  }
+}
+
+class CheckboxCellUncheck extends StatelessWidget {
+  const CheckboxCellUncheck({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return svgWidget('editor/editor_uncheck');
+  }
+}
@@ -16,7 +16,9 @@ class ChecklistCardCellBloc
  ChecklistCardCellBloc({
    required this.cellController,
  })  : _checklistCellSvc = ChecklistCellBackendService(
-          cellContext: cellController.cellContext,
+          viewId: cellController.viewId,
+          fieldId: cellController.fieldId,
+          rowId: cellController.rowId,
        ),
        super(ChecklistCellState.initial(cellController)) {
    on<ChecklistCellEvent>(
@@ -19,7 +19,9 @@ class ChecklistCellEditorBloc
  ChecklistCellEditorBloc({
    required this.cellController,
  })  : _checklistCellService = ChecklistCellBackendService(
-          cellContext: cellController.cellContext,
+          viewId: cellController.viewId,
+          fieldId: cellController.fieldId,
+          rowId: cellController.rowId,
        ),
        super(ChecklistCellEditorState.initial(cellController)) {
    on<ChecklistCellEditorEvent>(
@@ -22,7 +22,7 @@ class ChecklistProgressBar extends StatelessWidget {
      percent: percent,
      padding: EdgeInsets.zero,
      progressColor: percent < 1.0
-          ? SelectOptionColorPB.Blue.toColor(context)
+          ? SelectOptionColorPB.Purple.toColor(context)
          : SelectOptionColorPB.Green.toColor(context),
      backgroundColor: AFThemeExtension.of(context).progressBarBGColor,
      barRadius: const Radius.circular(5),
@@ -1,15 +1,15 @@
 import 'dart:collection';
+
+import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database_view/application/cell/cell_controller_builder.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/select_option.pb.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
-import 'package:flowy_infra/theme_extension.dart';
-
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:textfield_tags/textfield_tags.dart';

 import '../../../../grid/presentation/layout/sizes.dart';
@@ -34,12 +34,14 @@ class SelectOptionCellEditor extends StatefulWidget {
 }

 class _SelectOptionCellEditorState extends State<SelectOptionCellEditor> {
-  late PopoverMutex popoverMutex;
+  final popoverMutex = PopoverMutex();
+  final tagController = TextfieldTagsController();

  @override
-  void initState() {
-    popoverMutex = PopoverMutex();
-    super.initState();
+  void dispose() {
+    popoverMutex.dispose();
+    tagController.dispose();
+    super.dispose();
  }

  @override
@@ -53,9 +55,17 @@ class _SelectOptionCellEditorState extends State<SelectOptionCellEditor> {
          return Column(
            mainAxisSize: MainAxisSize.min,
            children: [
-              _TextField(popoverMutex: popoverMutex),
+              _TextField(
+                popoverMutex: popoverMutex,
+                tagController: tagController,
+              ),
              const TypeOptionSeparator(spacing: 0.0),
-              Flexible(child: _OptionList(popoverMutex: popoverMutex)),
+              Flexible(
+                child: _OptionList(
+                  popoverMutex: popoverMutex,
+                  tagController: tagController,
+                ),
+              ),
            ],
          );
        },
@@ -66,8 +76,11 @@ class _SelectOptionCellEditorState extends State<SelectOptionCellEditor> {

 class _OptionList extends StatelessWidget {
  final PopoverMutex popoverMutex;
+  final TextfieldTagsController tagController;
+
  const _OptionList({
    required this.popoverMutex,
+    required this.tagController,
    Key? key,
  }) : super(key: key);

@@ -75,17 +88,16 @@ class _OptionList extends StatelessWidget {
  Widget build(BuildContext context) {
    return BlocBuilder<SelectOptionCellEditorBloc, SelectOptionEditorState>(
      builder: (context, state) {
-        final List<Widget> cells = [];
-        cells.add(const _Title());
-        cells.addAll(
-          state.options.map((option) {
-            return _SelectOptionCell(
+        final cells = [
+          _Title(onPressedAddButton: () => onPressedAddButton(context)),
+          ...state.options.map(
+            (option) => _SelectOptionCell(
              option: option,
              isSelected: state.selectedOptions.contains(option),
              popoverMutex: popoverMutex,
-            );
-          }).toList(),
-        );
+            ),
+          ),
+        ];

        state.createOption.fold(
          () => null,
@@ -94,30 +106,38 @@ class _OptionList extends StatelessWidget {
          },
        );

-        final list = ListView.separated(
+        return ListView.separated(
          shrinkWrap: true,
          controller: ScrollController(),
          itemCount: cells.length,
-          separatorBuilder: (context, index) {
-            return VSpace(GridSize.typeOptionSeparatorHeight);
-          },
+          separatorBuilder: (_, __) =>
+              VSpace(GridSize.typeOptionSeparatorHeight),
          physics: StyledScrollPhysics(),
-          itemBuilder: (BuildContext context, int index) => cells[index],
+          itemBuilder: (_, int index) => cells[index],
          padding: const EdgeInsets.only(top: 6.0, bottom: 12.0),
        );
-
-        return list;
      },
    );
  }
+
+  void onPressedAddButton(BuildContext context) {
+    final text = tagController.textEditingController?.text;
+    if (text != null) {
+      context.read<SelectOptionCellEditorBloc>().add(
+            SelectOptionEditorEvent.trySelectOption(text),
+          );
+    }
+    tagController.textEditingController?.clear();
+  }
 }

 class _TextField extends StatelessWidget {
  final PopoverMutex popoverMutex;
-  final TextfieldTagsController _tagController = TextfieldTagsController();
+  final TextfieldTagsController tagController;

-  _TextField({
+  const _TextField({
    required this.popoverMutex,
+    required this.tagController,
    Key? key,
  }) : super(key: key);

@@ -138,7 +158,7 @@ class _TextField extends StatelessWidget {
            selectedOptionMap: optionMap,
            distanceToText: _editorPanelWidth * 0.7,
            maxLength: 30,
-            tagController: _tagController,
+            tagController: tagController,
            textSeparators: const [','],
            onClick: () => popoverMutex.close(),
            newText: (text) {
@@ -174,7 +194,11 @@ class _TextField extends StatelessWidget {
 }

 class _Title extends StatelessWidget {
-  const _Title({Key? key}) : super(key: key);
+  const _Title({
+    required this.onPressedAddButton,
+  });
+
+  final VoidCallback onPressedAddButton;

  @override
  Widget build(BuildContext context) {
@@ -182,9 +206,27 @@ class _Title extends StatelessWidget {
      padding: const EdgeInsets.symmetric(horizontal: 12.0),
      child: SizedBox(
        height: GridSize.popoverItemHeight,
-        child: FlowyText.medium(
-          LocaleKeys.grid_selectOption_panelTitle.tr(),
-          color: Theme.of(context).hintColor,
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            FlowyText.medium(
+              LocaleKeys.grid_selectOption_panelTitle.tr(),
+              color: Theme.of(context).hintColor,
+            ),
+            Padding(
+              padding: const EdgeInsets.symmetric(
+                horizontal: 4.0,
+              ),
+              child: FlowyIconButton(
+                onPressed: onPressedAddButton,
+                width: 18,
+                icon: svgWidget(
+                  'home/add',
+                  color: Theme.of(context).iconTheme.color,
+                ),
+              ),
+            ),
+          ],
        ),
      ),
    );
@@ -192,8 +234,11 @@ class _Title extends StatelessWidget {
 }

 class _CreateOptionCell extends StatelessWidget {
+  const _CreateOptionCell({
+    required this.name,
+  });
+
  final String name;
-  const _CreateOptionCell({required this.name, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
@@ -231,6 +276,7 @@ class _SelectOptionCell extends StatefulWidget {
  final SelectOptionPB option;
  final PopoverMutex popoverMutex;
  final bool isSelected;
+
  const _SelectOptionCell({
    required this.option,
    required this.isSelected,
Author	SHA1	Message	Date
Lucas.Xu	430325c731	chore: bump version 0.2.2 (#2804 )	2023-06-15 18:55:21 +08:00
Lucas.Xu	d5884ad2b5	fix: unable insert a reference database (#2798 ) * fix: unable insert a reference database * test: add reference database tests * feat: set min height for document inside database	2023-06-15 16:33:44 +08:00
Kilu.He	95f8b2e9a4	chore: create redo/undo bridge (#2760 ) * chore: create redo/undo bridge * chore: update test * chore: review update * chore: review update * chore: react redo/undo * chore: review update * chore: add test * chore: review update * chore: generate document id * chore: update undo/redo * chore: update cargo lock	2023-06-15 10:37:51 +08:00
Nathan.foooandLucas.Xu	27dd719aa8	feat: row document (#2792 ) * chore: create orphan view handler * feat: save icon url and cover url in view * feat: implement emoji picker UI * chore: config ui * chore: config ui again * chore: replace RowPB with RowMetaPB to exposing more row information * fix: compile error * feat: show emoji in row * chore: update * test: insert emoji test * test: add update emoji test * test: add remove emoji test * test: add create field tests * test: add create row and delete row integration tests * test: add create row from row menu * test: document in row detail page * test: delete, duplicate row in row detail page * test: check the row count displayed in grid page * test: rename existing field in grid page * test: update field type of exisiting field in grid page * test: delete field test * test: add duplicate field test * test: add hide field test * test: add edit text cell test * test: add insert text to text cell test * test: add edit number cell test * test: add edit multiple number cells * test: add edit checkbox cell test * feat: integrate editor into database row * test: add edit create time and last edit time cell test * test: add edit date cell by selecting a date test * chore: remove unused code * chore: update checklist bg color * test: add update database layout test --------- Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io>	2023-06-14 22:16:33 +08:00
Yijing HuangandLucas.Xu	b8983e4466	feat: language selector on welcome page (#2796 ) * feat: add language selector on welcome page * feat: add hover effect and refactor layout * test: add basic languge selector testing * chore: increate place holder width * fix: add catch error for setLocale and finish the testing * chore: update comment * feat: refactor the skip login in page and add tests --------- Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io>	2023-06-14 19:14:41 +08:00
Kilu.HeandLucas.Xu	00c0934df6	Support text block add `link` (#2730 ) * feat: support text block href attribute * fix: double click didn't select range * fix: link update * chore: ts lint * chore: add new line Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io> * chore: update get word indices function --------- Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io>	2023-06-13 15:59:18 +08:00
Lucas.Xu	aca3c90eb3	chore: optimize the integration test UI	2023-06-12 21:53:39 +08:00
Lucas.Xu	8b4d1868e5	test: add integration test	2023-06-12 20:13:25 +08:00
Lucas.Xu	5bcf48a4f9	fix: the markdown file name doesn't update after renaming the document (#2777 ) * fix: the markdown file name doesn't update after renaming the document * test: add integration test	2023-06-12 14:29:09 +08:00
Lucas.Xu	335861706e	feat: support importing multiple md files all at once (#2778 )	2023-06-12 14:27:38 +08:00
Nathan.foooandLucas.Xu	4f5672c2af	refactor: create view interface (#2772 ) * refactor: create view interface * chore: update doc Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io> --------- Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io>	2023-06-12 12:57:01 +08:00
Lucas.Xu	b5d9a73194	chore: bump version 0.2.1 (#2762 )	2023-06-11 17:02:09 +08:00
Nathan.fooo	619d82f115	chore: bump up collab ref (#2764 )	2023-06-11 16:24:41 +08:00
Lucas.Xu	d5887b0a12	chore: enable codecov action (#2741 ) * chore: enable codecov action * test: fix integration test * test: fix switch_folder_test	2023-06-11 14:19:44 +08:00
Nathan.fooo Mathias Mogensen Lucas.Xu	c7f73551c7	fix: update database layout in document (#2757 ) * fix: update database layout in document * feat: create or ref calendar * Update frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/calendar/calendar_menu_item.dart Co-authored-by: Mathias Mogensen <42929161+Xazin@users.noreply.github.com> * fix: stop listen * feat: remove the redundant database view files * chore: rename the grid state --------- Co-authored-by: Mathias Mogensen <42929161+Xazin@users.noreply.github.com> Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io>	2023-06-11 08:49:10 +08:00
Lucas.Xu	ed04e247ba	fix: the share markdown feature doesn't work in 0.2.0 (#2756 ) * chore: bump version 0.2.0 * fix: the share markdown feature doesn't work in 0.2.0 * test: add integration test for share button	2023-06-10 22:38:25 +08:00
Nathan.fooo	2ecd0a67ad	feat: hide url cell accessory when the content is empty (#2754 )	2023-06-10 15:48:56 +08:00
Nathan.fooo	4ce94a9ceb	fix: adding vertical padding for progress bar (#2753 )	2023-06-10 14:57:52 +08:00
Nathan.fooo	d4e39389d2	fix: show calendar layout (#2752 )	2023-06-10 13:23:29 +08:00
Nathan.fooo	ab5a3dae3c	chore: upgrade rust version to 1.70 (#2749 ) * chore: upgrade rust version to 1.70 * ci: fix wanrings * ci: fix clippy warings	2023-06-09 22:23:07 +08:00
Nathan.fooo	133ac72317	ci: fix docker ci (#2745 ) * ci: fix permission	2023-06-09 19:48:16 +08:00
Nathan.fooo	e9be37a961	test: add database event tests (#2744 ) * chore: add tests * test: add tests * test: add tests	2023-06-09 18:57:29 +08:00
chirag paneliyaandLucas.Xu	0f9f5251f2	feat: added enter icon in add field. (#2707 ) * [FR] Added Enter Icon In Add Field. * Update frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_editor.dart Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io> * Update frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_editor.dart Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io> * Update frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_editor.dart Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io> * fix : missing trailing comma and code enhancement. * chore: format code --------- Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io>	2023-06-08 21:07:41 +08:00