Issue25731 beam shortcut key sequence

playground/frontend/integration_test/common/common_finders.dart

@@ -26,7 +26,7 @@ import 'package:playground/modules/examples/components/description_popover/descr
 import 'package:playground/modules/examples/example_selector.dart';
 import 'package:playground/modules/sdk/components/sdk_selector.dart';
 import 'package:playground/modules/sdk/components/sdk_selector_row.dart';
-import 'package:playground/modules/shortcuts/components/shortcuts_modal.dart';
+import 'package:playground/modules/shortcuts/components/shortcuts_dialog.dart';
 import 'package:playground/pages/standalone_playground/widgets/editor_textarea_wrapper.dart';
 import 'package:playground/pages/standalone_playground/widgets/feedback/feedback_dropdown_content.dart';
 import 'package:playground/pages/standalone_playground/widgets/feedback/playground_feedback.dart';
@@ -117,6 +117,6 @@ extension CommonFindersExtension on CommonFinders {
   }
 
   Finder shortcutsModal() {
-    return byType(ShortcutsModal);
+    return byType(ShortcutsDialogContent);
   }
 }

playground/frontend/integration_test/miscellaneous_ui/shortcuts_modal_test.dart

@@ -38,7 +38,7 @@ Future<void> checkShortcutsModal(WidgetTester wt) async {
 
   expect(find.shortcutsModal(), findsOneWidget);
 
-  await wt.tap(find.text(appLocale.close));
+  await wt.sendKeyEvent(LogicalKeyboardKey.escape);
   await wt.pumpAndSettle();
 
   expect(find.shortcutsModal(), findsNothing);

playground/frontend/integration_test/standalone_editing_test.dart

@@ -43,9 +43,7 @@ Future<void> _checkAutocomplete(WidgetTester wt) async {
   await wt.enterCodeFieldText('\n\n\n\n\nsdk');
 
   final playgroundController = wt.findPlaygroundController();
-  await wt.runShortcut(
-    playgroundController.showSuggestionsShortcut.shortcuts,
-  );
+  await wt.runShortcut(playgroundController.showSuggestionsShortcut);
   await wt.pumpAndSettle();
 
   expect(find.text('sdkHttpMetadata'), findsOneWidget);

playground/frontend/integration_test/standalone_run_shortcuts_test.dart

@@ -50,7 +50,7 @@ Future<void> _checkResetShortcut(
 
   expect(controller.source, isNot(startSource));
 
-  await wt.runShortcut(controller.resetShortcut.shortcuts);
+  await wt.runShortcut(controller.resetShortcut);
   await wt.pumpAndSettle();
 
   expect(startSource, controller.source);
@@ -61,7 +61,7 @@ Future<void> _checkRunShortcut(
   PlaygroundController controller,
 ) async {
   final output = controller.codeRunner.resultLogOutput;
-  await wt.runShortcut(controller.runShortcut.shortcuts);
+  await wt.runShortcut(controller.runShortcut);
   await wt.pumpAndSettle();
 
   expect(output, isNot(controller.codeRunner.resultLogOutput));
@@ -74,7 +74,7 @@ Future<void> _checkClearOutputShortcut(
   expect(controller.codeRunner.resultLogOutput, isNotEmpty);
   expect(controller.codeRunner.resultLogOutput, isNotNull);
 
-  await wt.runShortcut(kClearOutputShortcut.shortcuts);
+  await wt.runShortcut(kClearOutputShortcut);
   await wt.pumpAndSettle();
 
   expect(controller.codeRunner.resultLogOutput, isEmpty);

playground/frontend/lib/modules/shortcuts/components/shortcuts_dialog.dart

@@ -0,0 +1,77 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:playground/constants/font_weight.dart';
+import 'package:playground/constants/sizes.dart';
+import 'package:playground/modules/shortcuts/components/shortcut_row.dart';
+import 'package:playground/modules/shortcuts/constants/global_shortcuts.dart';
+import 'package:playground_components/playground_components.dart';
+
+class ShortcutsDialogContent extends StatelessWidget {
+  static const _kModalMaxWidth = 400.0;
+  static const _kShortcutsMaxWidth = 200.0;
+
+  const ShortcutsDialogContent({
+    required this.playgroundController,
+  });
+
+  final PlaygroundController playgroundController;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: _kModalMaxWidth,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          ...[
+            ...playgroundController.shortcuts,
+            ...globalShortcuts,
+          ]
+              .map(
+                (shortcut) => Row(
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    ConstrainedBox(
+                      constraints:
+                          const BoxConstraints(maxWidth: _kShortcutsMaxWidth),
+                      child: ShortcutRow(shortcut: shortcut),
+                    ),
+                    const SizedBox(width: kMdSpacing),
+                    Expanded(
+                      child: Text(
+                        shortcut.actionIntent.slug.tr(),
+                        style: const TextStyle(fontWeight: kBoldWeight),
+                      ),
+                    ),
+                  ],
+                ),
+              )
+              .alternateWith(
+                const SizedBox(
+                  height: kXlSpacing,
+                ),
+              ),
+        ],
+      ),
+    );
+  }
+}

playground/frontend/lib/modules/shortcuts/constants/global_shortcuts.dart

@@ -31,10 +31,10 @@ class NewExampleIntent extends BeamIntent {
 }
 
 final kClearOutputShortcut = BeamShortcut(
-  shortcuts: LogicalKeySet(
+  keys: [
     LogicalKeyboardKeyExtension.metaOrControl,
     LogicalKeyboardKey.keyB,
-  ),
+  ],
   actionIntent: const ClearOutputIntent(),
   createAction: (BuildContext context) => CallbackAction(
     onInvoke: (_) => Provider.of<PlaygroundController>(
@@ -45,10 +45,10 @@ final kClearOutputShortcut = BeamShortcut(
 );
 
 final kNewExampleShortcut = BeamShortcut(
-  shortcuts: LogicalKeySet(
+  keys: [
     LogicalKeyboardKeyExtension.metaOrControl,
     LogicalKeyboardKey.keyM,
-  ),
+  ],
   actionIntent: const NewExampleIntent(),
   createAction: (_) => CallbackAction(
     onInvoke: (_) => launchUrl(Uri.parse('/')),

playground/frontend/lib/pages/standalone_playground/widgets/more_actions.dart

@@ -25,7 +25,7 @@ import 'package:url_launcher/url_launcher.dart';
 
 import '../../../constants/links.dart';
 import '../../../modules/analytics/analytics_service.dart';
-import '../../../modules/shortcuts/components/shortcuts_modal.dart';
+import '../../../modules/shortcuts/components/shortcuts_dialog.dart';
 import '../../../src/assets/assets.gen.dart';
 
 enum HeaderAction {
@@ -85,9 +85,11 @@ class _MoreActionsState extends State<MoreActions> {
               title: Text(appLocale.shortcuts),
               onTap: () {
                 AnalyticsService.get(context).trackOpenShortcutsModal();
-                showDialog<void>(
+                BeamDialog.show(
+                  actions: [BeamCloseButton()],
                   context: context,
-                  builder: (BuildContext context) => ShortcutsModal(
+                  title: Text(appLocale.shortcuts),
+                  child: ShortcutsDialogContent(
                     playgroundController: widget.playgroundController,
                   ),
                 );

playground/frontend/playground_components/assets/translations/en.yaml

@@ -43,6 +43,9 @@ widgets:
 
   codeEditor:
     label: 'Code Text Area'
+
+  closeButton:
+    label: 'Close'
 
   output:
     filter:

playground/frontend/playground_components/lib/playground_components.dart

@@ -59,12 +59,14 @@ export 'src/services/symbols/loaders/yaml.dart';
 export 'src/theme/switch_notifier.dart';
 export 'src/theme/theme.dart';
 export 'src/util/async.dart';
+export 'src/util/iterable.dart';
 export 'src/util/logical_keyboard_key.dart';
 export 'src/util/pipeline_options.dart';
 export 'src/util/string.dart';
 
 export 'src/widgets/bubble.dart';
 export 'src/widgets/clickable.dart';
+export 'src/widgets/close_button.dart';
 export 'src/widgets/complexity.dart';
 export 'src/widgets/dialog.dart';
 export 'src/widgets/divider.dart';

playground/frontend/playground_components/lib/src/controllers/playground_controller.dart

@@ -312,34 +312,34 @@ class PlaygroundController with ChangeNotifier {
   }
 
   late BeamShortcut runShortcut = BeamShortcut(
-    shortcuts: LogicalKeySet(
+    keys: [
       LogicalKeyboardKeyExtension.metaOrControl,
       LogicalKeyboardKey.enter,
-    ),
+    ],
     actionIntent: const RunIntent(),
     createAction: (BuildContext context) => CallbackAction(
       onInvoke: (_) => codeRunner.runCode(),
     ),
   );
 
   late BeamShortcut resetShortcut = BeamShortcut(
-    shortcuts: LogicalKeySet(
+    keys: [
       LogicalKeyboardKeyExtension.metaOrControl,
       LogicalKeyboardKey.shift,
       LogicalKeyboardKey.keyE,
-    ),
+    ],
     actionIntent: const ResetIntent(),
     createAction: (BuildContext context) => CallbackAction(
       onInvoke: (_) => reset(),
     ),
   );
 
   late BeamShortcut showSuggestionsShortcut = BeamShortcut(
-    shortcuts: LogicalKeySet(
+    keys: [
       LogicalKeyboardKeyExtension.metaOrControl,
       LogicalKeyboardKey.shift,
       LogicalKeyboardKey.keyS,
-    ),
+    ],
     actionIntent: const ShowSuggestionsIntent(),
     createAction: (BuildContext context) => CallbackAction(
       onInvoke: (_) => showSuggestions(),

playground/frontend/playground_components/lib/src/models/shortcut.dart

@@ -22,26 +22,32 @@ import 'package:flutter/services.dart';
 import 'intents.dart';
 
 class BeamShortcut {
-  final LogicalKeySet shortcuts;
+  // Keys in the order to be shown or mocked.
+  //
+  // A list is required because a [LogicalKeySet] discards the original order.
+  final List<LogicalKeyboardKey> keys;
+
+  LogicalKeySet get keySet => LogicalKeySet.fromSet(keys.toSet());
+
   final BeamIntent actionIntent;
   final CallbackAction Function(BuildContext) createAction;
 
   BeamShortcut({
-    required this.shortcuts,
+    required this.keys,
     required this.actionIntent,
     required this.createAction,
   });
 
-  static const _metaKeyName = 'CMD/CTRL';
+  static const _metaKeyName = 'Command';
   static const _glue = ' + ';
 
   String get title {
-    return shortcuts.keys
-        .map(getKeyDisplayName)
+    return keys
+        .map(_getKeyDisplayName)
         .join(_glue);
   }
 
-  String getKeyDisplayName(LogicalKeyboardKey e) {
+  String _getKeyDisplayName(LogicalKeyboardKey e) {
     if (e.keyId == LogicalKeyboardKey.meta.keyId) {
       return _metaKeyName;
     }