[BEAM-13101] [Playground] load examples using the api

playground/frontend/analysis_options.yaml

@@ -28,7 +28,7 @@ include: package:flutter_lints/flutter.yaml
 
 # exclude generated files
 analyzer:
-  exclude: [lib/api/**, test/**.mocks.dart, lib/**.g.dart]
+  exclude: [ lib/api/**, test/**.mocks.dart, lib/**.g.dart, build/** ]
 
 linter:
   # The lint rules applied to this project can be customized in the
@@ -43,6 +43,7 @@ linter:
   # `// ignore_for_file: name_of_lint` syntax on the line or in the file
   # producing the lint.
   rules:
+    eol_at_end_of_file: true
     avoid_web_libraries_in_flutter: false
 #     avoid_print: false  # Uncomment to disable the `avoid_print` rule
     prefer_single_quotes: true  # Uncomment to enable the `prefer_single_quotes` rule

playground/frontend/lib/api/v1/api.pb.dart

@@ -15,6 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 ///
 //  Generated code. Do not modify.
 //  source: api/v1/api.proto

playground/frontend/lib/api/v1/api.pbenum.dart

@@ -15,6 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 ///
 //  Generated code. Do not modify.
 //  source: api/v1/api.proto

playground/frontend/lib/api/v1/api.pbjson.dart

@@ -15,6 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 ///
 //  Generated code. Do not modify.
 //  source: api/v1/api.proto

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

@@ -60,7 +60,7 @@ class _EditorTextAreaState extends State<EditorTextArea> {
   void didChangeDependencies() {
     final themeProvider = Provider.of<ThemeProvider>(context, listen: true);
     _codeController = CodeController(
-      text: _codeController?.text ?? widget.example?.sources[widget.sdk] ?? '',
+      text: _codeController?.text ?? widget.example?.source ?? '',
       language: _getLanguageFromSdk(),
       theme: themeProvider.isDarkMode ? kDarkCodeTheme : kLightCodeTheme,
       onChange: (newSource) => widget.onSourceChange(newSource),

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

@@ -15,6 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import 'dart:math' as math;
 
 import 'package:expansion_widget/expansion_widget.dart';

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

@@ -19,6 +19,7 @@
 import 'package:flutter/material.dart';
 import 'package:playground/constants/sizes.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';
 import 'package:provider/provider.dart';
 
@@ -29,13 +30,15 @@ class ExpansionPanelItem extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Consumer<PlaygroundState>(
-      builder: (context, state, child) => MouseRegion(
+    return Consumer2<PlaygroundState, ExampleState>(
+      builder: (context, playgroundState, exampleState, child) => MouseRegion(
         cursor: SystemMouseCursors.click,
         child: GestureDetector(
-          onTap: () {
-            if (state.selectedExample != example) {
-              state.setExample(example);
+          onTap: () async {
+            if (playgroundState.selectedExample != example) {
+              final exampleWithInfo =
+                  await exampleState.loadExampleInfo(example);
+              playgroundState.setExample(exampleWithInfo);
             }
           },
           child: Container(

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

@@ -75,19 +75,19 @@ class SearchField extends StatelessWidget {
             cursorColor: ThemeColors.of(context).lightGreyColor,
             cursorWidth: kCursorSize,
             textAlignVertical: TextAlignVertical.center,
-            onFieldSubmitted: (String filterText) {
-              state.setFilterText(filterText);
-              state.sortCategories();
-            },
-            onChanged: (String filterText) {
-              state.setFilterText(filterText);
-              state.sortCategories();
-            },
+            onFieldSubmitted: (String filterText) =>
+                _onChange(state, filterText),
+            onChanged: (String filterText) => _onChange(state, filterText),
             maxLines: kMinLines,
             minLines: kMaxLines,
           ),
         ),
       ),
     );
   }
+
+  _onChange(ExampleSelectorState state, String filterText) {
+    state.setFilterText(filterText);
+    state.sortCategories();
+  }
 }

playground/frontend/lib/modules/examples/example_selector.dart

@@ -20,7 +20,6 @@ import 'package:flutter/material.dart';
 import 'package:playground/config/theme.dart';
 import 'package:playground/constants/sizes.dart';
 import 'package:playground/modules/examples/components/examples_components.dart';
-import 'package:playground/modules/examples/models/category_model.dart';
 import 'package:playground/modules/examples/models/selector_size_model.dart';
 import 'package:playground/pages/playground/states/example_selector_state.dart';
 import 'package:playground/pages/playground/states/examples_state.dart';
@@ -37,13 +36,11 @@ const double kLgContainerWidth = 400.0;
 class ExampleSelector extends StatefulWidget {
   final Function changeSelectorVisibility;
   final bool isSelectorOpened;
-  final List<CategoryModel> categories;
 
   const ExampleSelector({
     Key? key,
     required this.changeSelectorVisibility,
     required this.isSelectorOpened,
-    required this.categories,
   }) : super(key: key);
 
   @override
@@ -123,14 +120,14 @@ class _ExampleSelectorState extends State<ExampleSelector>
 
     return OverlayEntry(
       builder: (context) {
-        return Consumer<ExampleState>(
-          builder: (context, state, child) => Stack(
+        return Consumer2<ExampleState, PlaygroundState>(
+          builder: (context, exampleState, playgroundState, child) => Stack(
             children: [
               GestureDetector(
                 onTap: () {
                   animationController.reverse();
                   examplesDropdown?.remove();
-                  state.changeSelectorVisibility();
+                  exampleState.changeSelectorVisibility();
                 },
                 child: Container(
                   color: Colors.transparent,
@@ -140,8 +137,9 @@ class _ExampleSelectorState extends State<ExampleSelector>
               ),
               ChangeNotifierProvider(
                 create: (context) => ExampleSelectorState(
-                  state,
-                  state.categories!,
+                  exampleState,
+                  playgroundState,
+                  exampleState.getCategories(playgroundState.sdk)!,
                 ),
                 builder: (context, _) => Positioned(
                   left: posModel.xAlignment,

playground/frontend/lib/modules/examples/models/category_model.dart

@@ -22,5 +22,5 @@ class CategoryModel {
   final String name;
   final List<ExampleModel> examples;
 
-  const CategoryModel(this.name, this.examples);
+  const CategoryModel({required this.name, required this.examples});
 }

playground/frontend/lib/modules/examples/models/example_model.dart

@@ -16,8 +16,6 @@
  * limitations under the License.
  */
 
-import 'package:playground/modules/sdk/models/sdk.dart';
-
 enum ExampleType {
   all,
   example,
@@ -41,9 +39,27 @@ extension ExampleTypeToString on ExampleType {
 }
 
 class ExampleModel {
-  final Map<SDK, String> sources;
   final ExampleType type;
   final String name;
+  final String path;
+  final String description;
+  String? source;
+  String? outputs;
+
+  ExampleModel({
+    required this.name,
+    required this.path,
+    required this.description,
+    required this.type,
+    this.source,
+    this.outputs,
+  });
 
-  const ExampleModel(this.sources, this.name, this.type);
+  setSource(String source) {
+    this.source = source;
+  }
+
+  setOutputs(String outputs) {
+    this.outputs = outputs;
+  }
 }

playground/frontend/lib/modules/examples/models/outputs_model.dart

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+
+class OutputsModel {
+  final String output;
+  final String graph;
+  final String log;
+
+  OutputsModel(this.output, this.graph, this.log);
+}

playground/frontend/lib/modules/examples/repositories/example_client/example_client.dart

@@ -0,0 +1,33 @@
+/*
+ * 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:playground/modules/editor/repository/code_repository/code_client/output_response.dart';
+import 'package:playground/modules/examples/repositories/models/get_example_request.dart';
+import 'package:playground/modules/examples/repositories/models/get_example_response.dart';
+import 'package:playground/modules/examples/repositories/models/get_list_of_examples_request.dart';
+import 'package:playground/modules/examples/repositories/models/get_list_of_examples_response.dart';
+
+abstract class ExampleClient {
+  Future<GetListOfExampleResponse> getListOfExamples(
+    GetListOfExamplesRequestWrapper request,
+  );
+
+  Future<GetExampleResponse> getExample(GetExampleRequestWrapper request);
+
+  Future<OutputResponse> getExampleOutput(GetExampleRequestWrapper request);
+}