Merge pull request #16857 from [BEAM-13662] [Playground] Support mutl…

…ifile examples

* [BEAM-13771][Playground]
Add multifile value to the response to the frontend

* [BEAM-13771][Playground]
Regenerate files

* [BEAM-13771][Playground]
Regenerate files

* [BEAM-13662] playground - multifile example support

* [BEAM-13662] playground - support multifile

* [BEAM-13662] playground - redesign multifile examples

* [BEAM-13662] playground - support multifile examples

* [BEAM-13662] add licence

* [BEAM-13662] refactor popover list for better readability

* [BEAM-13662] refactor popover list for better readability

Co-authored-by: AydarZaynutdinov <aydar.zaynutdinov@akvelon.com>
Co-authored-by: Ilya <ilya.kozyrev@akvelon.com>

playground/frontend/lib/config.g.dart

@@ -16,14 +16,14 @@
  * limitations under the License.
  */
 
-const String kApiClientURL =
-    'https://backend-dot-datatokenization.uc.r.appspot.com';
 const String kAnalyticsUA = 'UA-73650088-1';
+const String kApiClientURL =
+    'https://backend-router-beta-dot-apache-beam-testing.appspot.com';
 const String kApiJavaClientURL =
-    'https://backend-dot-datatokenization.uc.r.appspot.com/java/';
+    'https://backend-java-beta-dot-apache-beam-testing.appspot.com';
 const String kApiGoClientURL =
-    'https://backend-dot-datatokenization.uc.r.appspot.com/go/';
+    'https://backend-go-beta-dot-apache-beam-testing.appspot.com';
 const String kApiPythonClientURL =
-    'https://backend-dot-datatokenization.uc.r.appspot.com/python/';
+    'https://backend-python-beta-dot-apache-beam-testing.appspot.com';
 const String kApiScioClientURL =
-    'https://backend-dot-datatokenization.uc.r.appspot.com/scio/';
+    'https://backend-scio-beta-dot-apache-beam-testing.appspot.com';

playground/frontend/lib/constants/assets.dart

@@ -33,6 +33,7 @@ const kCopyIconAsset = 'copy.svg';
 const kLinkIconAsset = 'link.svg';
 const kDragHorizontalIconAsset = 'drag_horizontal.svg';
 const kDragVerticalIconAsset = 'drag_vertical.svg';
+const kMultifileIconAsset = 'multifile.svg';
 
 // notifications icons
 const kErrorNotificationIconAsset = 'error_notification.svg';

playground/frontend/lib/constants/links.dart

@@ -24,3 +24,4 @@ const kApacheBeamGithubLink = 'https://github.com/apache/beam';
 const kBeamWebsiteLink = 'https://beam.apache.org/';
 const kScioGithubLink = 'https://github.com/spotify/scio';
 const kAboutBeamLink = 'https://beam.apache.org/get-started/beam-overview';
+const kAddExampleLink = 'https://beam.apache.org/get-started/try-beam-playground/#how-to-add-new-examples';

playground/frontend/lib/constants/sizes.dart

@@ -52,6 +52,7 @@ const double kCursorSize = 1.0;
 // container size
 const double kContainerHeight = 40.0;
 
+const double kCaptionFontSize = 10.0;
 const double kCodeFontSize = 14.0;
 const double kLabelFontSize = 16.0;
 const double kHintFontSize = 16.0;

playground/frontend/lib/l10n/app_en.arb

@@ -184,7 +184,23 @@
     "description": "Text value label"
   },
   "pipelineOptionsError": "Please check the format (example: --key1 value1 --key2 value2), only alphanumeric and \",*,/,-,:,;,',. symbols are allowed",
-  "@value": {
+  "@pipelineOptionsError": {
     "description": "Pipeline options parse error"
+  },
+  "viewOnGithub": "View on GitHub",
+  "@viewOnGithub": {
+    "description": "View on Github button"
+  },
+  "addExample": "Add your own example",
+  "@addExample": {
+    "description": "Add example link text"
+  },
+  "multifile": "Multifile",
+  "@multifile": {
+    "description": "Multifile example"
+  },
+  "multifileWarning": "Multifile not supported yet for running in playground. Open it on github.",
+  "@multifileWarning": {
+    "description": "Multifile not supported text"
   }
 }

playground/frontend/lib/modules/editor/components/run_button.dart

@@ -32,12 +32,14 @@ class RunButton extends StatelessWidget {
   final bool isRunning;
   final VoidCallback runCode;
   final VoidCallback cancelRun;
+  final bool disabled;
 
   const RunButton({
     Key? key,
     required this.isRunning,
     required this.runCode,
     required this.cancelRun,
+    this.disabled = false,
   }) : super(key: key);
 
   @override
@@ -71,9 +73,16 @@ class RunButton extends StatelessWidget {
                 }
                 return Text(buttonText);
               }),
-          onPressed: !isRunning ? runCode : cancelRun,
+          onPressed: onPressHandler(),
         ),
       ),
     );
   }
+
+  onPressHandler() {
+    if (disabled) {
+      return null;
+    }
+    return !isRunning ? runCode : cancelRun;
+  }
 }

playground/frontend/lib/modules/examples/components/description_popover/description_popover.dart

@@ -17,9 +17,13 @@
  */
 
 import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
+import 'package:playground/constants/assets.dart';
 import 'package:playground/constants/font_weight.dart';
 import 'package:playground/constants/sizes.dart';
 import 'package:playground/modules/examples/models/example_model.dart';
+import 'package:url_launcher/url_launcher.dart';
 
 const kDescriptionWidth = 300.0;
 
@@ -30,26 +34,43 @@ class DescriptionPopover extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final hasLink = example.link?.isNotEmpty ?? false;
     return SizedBox(
       width: kDescriptionWidth,
       child: Card(
         child: Padding(
           padding: const EdgeInsets.all(kLgSpacing),
           child: Wrap(
-            runSpacing: kSmSpacing,
+            runSpacing: kMdSpacing,
             children: [
-              Text(
-                example.name,
-                style: const TextStyle(
-                  fontSize: kTitleFontSize,
-                  fontWeight: kBoldWeight,
-                ),
-              ),
-              Text(example.description),
+              title,
+              description,
+              if (hasLink) getViewOnGithub(context),
             ],
           ),
         ),
       ),
     );
   }
+
+  Widget get title => Text(
+        example.name,
+        style: const TextStyle(
+          fontSize: kTitleFontSize,
+          fontWeight: kBoldWeight,
+        ),
+      );
+
+  Widget get description => Text(example.description);
+
+  Widget getViewOnGithub(BuildContext context) {
+    AppLocalizations appLocale = AppLocalizations.of(context)!;
+    return TextButton.icon(
+      icon: SvgPicture.asset(kGithubIconAsset),
+      onPressed: () {
+        launch(example.link ?? '');
+      },
+      label: Text(appLocale.viewOnGithub),
+    );
+  }
 }

playground/frontend/lib/modules/examples/components/description_popover/description_popover_button.dart

@@ -28,13 +28,17 @@ class DescriptionPopoverButton extends StatelessWidget {
   final ExampleModel example;
   final Alignment followerAnchor;
   final Alignment targetAnchor;
+  final void Function()? onOpen;
+  final void Function()? onClose;
 
   const DescriptionPopoverButton({
     Key? key,
     this.parentContext,
     required this.example,
     required this.followerAnchor,
     required this.targetAnchor,
+    this.onOpen,
+    this.onClose,
   }) : super(key: key);
 
   @override
@@ -62,12 +66,15 @@ class DescriptionPopoverButton extends StatelessWidget {
     ExampleModel example,
     Alignment followerAnchor,
     Alignment targetAnchor,
-  ) {
+  ) async {
     // close previous description dialog
     Navigator.of(context, rootNavigator: true).popUntil((route) {
       return route.isFirst;
     });
-    showAlignedDialog(
+    if (onOpen != null) {
+      onOpen!();
+    }
+    await showAlignedDialog(
       context: context,
       builder: (dialogContext) => DescriptionPopover(
         example: example,
@@ -76,5 +83,8 @@ class DescriptionPopoverButton extends StatelessWidget {
       targetAnchor: targetAnchor,
       barrierColor: Colors.transparent,
     );
+    if (onClose != null) {
+      onClose!();
+    }
   }
 }

playground/frontend/lib/modules/examples/components/example_list/example_item_actions.dart

@@ -0,0 +1,66 @@
+/*
+ * 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:flutter/material.dart';
+import 'package:playground/modules/examples/components/description_popover/description_popover_button.dart';
+import 'package:playground/modules/examples/models/example_model.dart';
+import 'package:playground/modules/examples/models/popover_state.dart';
+import 'package:provider/provider.dart';
+
+import '../multifile_popover/multifile_popover_button.dart';
+
+class ExampleItemActions extends StatelessWidget {
+  final ExampleModel example;
+  final BuildContext parentContext;
+
+  const ExampleItemActions(
+      {Key? key, required this.parentContext, required this.example})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        if (example.isMultiFile) multifilePopover,
+        descriptionPopover,
+      ],
+    );
+  }
+
+  Widget get multifilePopover => MultifilePopoverButton(
+        parentContext: parentContext,
+        example: example,
+        followerAnchor: Alignment.topLeft,
+        targetAnchor: Alignment.topRight,
+        onOpen: () => _setPopoverOpen(parentContext, true),
+        onClose: () => _setPopoverOpen(parentContext, false),
+      );
+
+  Widget get descriptionPopover => DescriptionPopoverButton(
+        parentContext: parentContext,
+        example: example,
+        followerAnchor: Alignment.topLeft,
+        targetAnchor: Alignment.topRight,
+        onOpen: () => _setPopoverOpen(parentContext, true),
+        onClose: () => _setPopoverOpen(parentContext, false),
+      );
+
+  void _setPopoverOpen(BuildContext context, bool isOpen) {
+    Provider.of<PopoverState>(context, listen: false).setOpen(isOpen);
+  }
+}

playground/frontend/lib/modules/examples/components/example_list/expansion_panel_item.dart

@@ -19,7 +19,7 @@
 import 'package:flutter/material.dart';
 import 'package:playground/constants/sizes.dart';
 import 'package:playground/modules/analytics/analytics_service.dart';
-import 'package:playground/modules/examples/components/description_popover/description_popover_button.dart';
+import 'package:playground/modules/examples/components/example_list/example_item_actions.dart';
 import 'package:playground/modules/examples/models/example_model.dart';
 import 'package:playground/pages/playground/states/examples_state.dart';
 import 'package:playground/pages/playground/states/playground_state.dart';
@@ -72,12 +72,7 @@ class ExpansionPanelItem extends StatelessWidget {
                         ? const TextStyle(fontWeight: FontWeight.bold)
                         : const TextStyle(),
                   ),
-                  DescriptionPopoverButton(
-                    parentContext: context,
-                    example: example,
-                    followerAnchor: Alignment.topLeft,
-                    targetAnchor: Alignment.topRight,
-                  ),
+                  ExampleItemActions(parentContext: context, example: example),
                 ],
               ),
             ),

playground/frontend/lib/modules/examples/components/multifile_popover/multifile_popover.dart

@@ -0,0 +1,67 @@
+/*
+ * 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:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
+import 'package:playground/constants/assets.dart';
+import 'package:playground/constants/font_weight.dart';
+import 'package:playground/constants/sizes.dart';
+import 'package:playground/modules/examples/models/example_model.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+const kMultifileWidth = 300.0;
+
+class MultifilePopover extends StatelessWidget {
+  final ExampleModel example;
+
+  const MultifilePopover({Key? key, required this.example}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    AppLocalizations appLocale = AppLocalizations.of(context)!;
+    return SizedBox(
+      width: kMultifileWidth,
+      child: Card(
+        child: Padding(
+          padding: const EdgeInsets.all(kLgSpacing),
+          child: Wrap(
+            runSpacing: kMdSpacing,
+            children: [
+              Text(
+                appLocale.multifile,
+                style: const TextStyle(
+                  fontSize: kTitleFontSize,
+                  fontWeight: kBoldWeight,
+                ),
+              ),
+              Text(appLocale.multifileWarning),
+              TextButton.icon(
+                icon: SvgPicture.asset(kGithubIconAsset),
+                onPressed: () {
+                  launch(example.link ?? '');
+                },
+                label: Text(appLocale.viewOnGithub),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}