fix: show delete field dialog

frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/row_detail.dart

@@ -2,6 +2,7 @@ import 'package:app_flowy/plugins/grid/application/cell/cell_service/cell_servic
 import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart';
 import 'package:app_flowy/plugins/grid/application/row/row_data_controller.dart';
 import 'package:app_flowy/plugins/grid/application/row/row_detail_bloc.dart';
+import 'package:app_flowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@@ -112,13 +113,20 @@ class _PropertyList extends StatelessWidget {
       builder: (context, state) {
         return Column(
           children: [
-            Expanded(
+            Expanded(child: _wrapScrollbar(buildList(state))),
-              child: ScrollbarListStack(
+            const VSpace(10),
-                axis: Axis.vertical,
+            _CreateFieldButton(
-                controller: _scrollController,
+              viewId: viewId,
-                barSize: GridSize.scrollBarSize,
+              onClosed: _handleDidCreateField,
-                autoHideScrollbar: false,
+            ),
-                child: ListView.separated(
+          ],
+        );
+      },
+    );
+  }
+
+  Widget buildList(RowDetailState state) {
+    return ListView.separated(
       controller: _scrollController,
       itemCount: state.gridCells.length,
       itemBuilder: (BuildContext context, int index) {
@@ -130,13 +138,20 @@ class _PropertyList extends StatelessWidget {
       separatorBuilder: (BuildContext context, int index) {
         return const VSpace(2);
       },
-                ),
+    );
-              ),
+  }
-            ),
+
-            const VSpace(10),
+  Widget _wrapScrollbar(Widget child) {
-            _CreateFieldButton(
+    return ScrollbarListStack(
-              viewId: viewId,
+      axis: Axis.vertical,
-              onClosed: () {
+      controller: _scrollController,
+      barSize: GridSize.scrollBarSize,
+      autoHideScrollbar: false,
+      child: child,
+    );
+  }
+
+  void _handleDidCreateField() {
     WidgetsBinding.instance.addPostFrameCallback((_) {
       _scrollController.animateTo(
         _scrollController.position.maxScrollExtent,
@@ -144,35 +159,15 @@ class _PropertyList extends StatelessWidget {
         curve: Curves.ease,
       );
     });
-              },
-              onOpened: (controller) {
-                return FieldEditor(
-                  gridId: viewId,
-                  typeOptionLoader: NewFieldTypeOptionLoader(gridId: viewId),
-                  onDeleted: (fieldId) {
-                    controller.close();
-                    context
-                        .read<RowDetailBloc>()
-                        .add(RowDetailEvent.deleteField(fieldId));
-                  },
-                );
-              },
-            ),
-          ],
-        );
-      },
-    );
   }
 }
 
 class _CreateFieldButton extends StatefulWidget {
   final String viewId;
-  final Widget Function(PopoverController) onOpened;
   final VoidCallback onClosed;
 
   const _CreateFieldButton({
     required this.viewId,
-    required this.onOpened,
     required this.onClosed,
     Key? key,
   }) : super(key: key);
@@ -213,8 +208,24 @@ class _CreateFieldButtonState extends State<_CreateFieldButton> {
           leftIcon: svgWidget("home/add"),
         ),
       ),
-      popupBuilder: (BuildContext context) =>
+      popupBuilder: (BuildContext popOverContext) {
-          widget.onOpened(popoverController),
+        return FieldEditor(
+          gridId: widget.viewId,
+          typeOptionLoader: NewFieldTypeOptionLoader(gridId: widget.viewId),
+          onDeleted: (fieldId) {
+            popoverController.close();
+
+            NavigatorAlertDialog(
+              title: LocaleKeys.grid_field_deleteFieldPromptMessage.tr(),
+              confirm: () {
+                context
+                    .read<RowDetailBloc>()
+                    .add(RowDetailEvent.deleteField(fieldId));
+              },
+            ).show(context);
+          },
+        );
+      },
     );
   }
 
@@ -260,22 +271,37 @@ class _RowDetailCellState extends State<_RowDetailCell> {
       ),
     );
 
-    return ConstrainedBox(
+    return IntrinsicHeight(
+      child: ConstrainedBox(
         constraints: const BoxConstraints(minHeight: 40),
-      child: IntrinsicHeight(
         child: Row(
           crossAxisAlignment: CrossAxisAlignment.stretch,
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            SizedBox(
+            AppFlowyPopover(
-              width: 150,
-              child: Popover(
               controller: popover,
-                offset: const Offset(20, 0),
-                popupBuilder: (popoverContext) {
-                  return OverlayContainer(
               constraints: BoxConstraints.loose(const Size(240, 600)),
-                    child: FieldEditor(
+              popupBuilder: (popoverContext) => buildFieldEditor(),
+              child: SizedBox(
+                width: 150,
+                child: FieldCellButton(
+                  field: widget.cellId.fieldContext.field,
+                  onTap: () {
+                    popover.show();
+                  },
+                ),
+              ),
+            ),
+            const HSpace(10),
+            Expanded(child: gesture),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget buildFieldEditor() {
+    return FieldEditor(
       gridId: widget.cellId.gridId,
       fieldName: widget.cellId.fieldContext.field.name,
       isGroupField: widget.cellId.fieldContext.isGroupField,
@@ -285,24 +311,16 @@ class _RowDetailCellState extends State<_RowDetailCell> {
       ),
       onDeleted: (fieldId) {
         popover.close();
+
+        NavigatorAlertDialog(
+          title: LocaleKeys.grid_field_deleteFieldPromptMessage.tr(),
+          confirm: () {
             context
                 .read<RowDetailBloc>()
                 .add(RowDetailEvent.deleteField(fieldId));
           },
-                    ),
+        ).show(context);
-                  );
       },
-                child: FieldCellButton(
-                  field: widget.cellId.fieldContext.field,
-                  onTap: () => popover.show(),
-                ),
-              ),
-            ),
-            const HSpace(10),
-            Expanded(child: gesture),
-          ],
-        ),
-      ),
     );
   }
 }

frontend/app_flowy/lib/workspace/presentation/widgets/dialogs.dart

@@ -86,42 +86,6 @@ class _CreateTextFieldDialog extends State<NavigatorTextFieldDialog> {
   }
 }
 
-class PopoverAlertView extends StatelessWidget {
-  final String title;
-  final void Function()? cancel;
-  final void Function()? confirm;
-
-  const PopoverAlertView({
-    required this.title,
-    this.confirm,
-    this.cancel,
-    Key? key,
-  }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    final theme = context.watch<AppTheme>();
-    return StyledDialog(
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: <Widget>[
-          ...[
-            FlowyText.medium(title, color: theme.shader4),
-          ],
-          if (confirm != null) ...[
-            const VSpace(20),
-            OkCancelButton(
-              onOkPressed: confirm,
-              onCancelPressed: cancel,
-            )
-          ]
-        ],
-      ),
-    );
-  }
-}
-
 class NavigatorAlertDialog extends StatefulWidget {
   final String title;
   final void Function()? cancel;