[Tour of Beam][Frontend] Content Tree and SDK models (apache#23316) (a…

…pache#23417)

* Content Tree and SDK models (apache#23316)

models from JSON (apache#23316)

removed generated files (apache#23316)

const model constructors (apache#23316)

fvm config (apache#23316)

ignore *g.dart files (apache#23316)

server node, group, unit models

abstract node model (apache#23316)

node type in enums (apache#23316)

gitignore sort (apache#23316)

sdk model (apache#23316)

api calls (apache#23316)

getSdks in SdkDropdown (apache#23316)

requests in functions (apache#23316)

k in functions (apache#23316)

server folder in models (apache#23316)

review comments (apache#23316)

Move response model files (apache#23316)

Add CloudFunctionsTobClient (apache#23316)

Move a file (apache#23316)

Rename a file (apache#23316)

ContentTreeCache (apache#23316)

ContentTreeCache (apache#23316)

* Update README with building manual (apache#23316)

* Move hardcoded URLs to a config file (apache#23316)

Co-authored-by: darkhan.nausharipov <[email protected]>
Co-authored-by: Alexey Inkin <[email protected]>

.gitignore

@@ -120,12 +120,13 @@ website/www/yarn-error.log
 **/node_modules
 
 # Dart/Flutter
-**/.dart_tool
-**/.packages
 **/.flutter-plugins
 **/.flutter-plugins-dependencies
+**/.dart_tool
 **/generated_plugin_registrant.dart
+**/*.g.dart
 **/*.mocks.dart
+**/.packages
 
 # Ignore Beam Playground Terraform
 **/.terraform

learning/tour-of-beam/frontend/README.md

@@ -22,9 +22,25 @@
 
  # About
 
- # Getting started
- Flutter installation guide: https://docs.flutter.dev/get-started/install
- Run the app: `flutter run --web-renderer html`
+## Getting started
+Running, debugging, and testing all require this first step that fetches
+dependencies and generates code:
+
+```bash
+cd ../../../playground/frontend/playground_components
+flutter pub get
+flutter pub run build_runner build
+cd ../../../learning/tour-of-beam/frontend
+flutter pub get
+flutter pub run build_runner build
+```
+
+### Run
+
+The following command is used to build and serve the frontend app locally:
+
+`$ flutter run -d chrome`
+
 
  # Deployment
 

learning/tour-of-beam/frontend/lib/cache/content_tree.dart

@@ -0,0 +1,52 @@
+/*
+ * 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 'dart:async';
+
+import 'package:flutter/widgets.dart';
+
+import '../models/content_tree.dart';
+import '../repositories/client/client.dart';
+
+class ContentTreeCache extends ChangeNotifier {
+  final TobClient client;
+
+  ContentTreeModel? _contentTree;
+  Future<ContentTreeModel>? _future;
+
+  ContentTreeCache({
+    required this.client,
+  });
+
+  ContentTreeModel? getContentTree() {
+    if (_future == null) {
+      unawaited(_loadContentTree());
+    }
+
+    return _contentTree;
+  }
+
+  Future<ContentTreeModel?> _loadContentTree() async {
+    _future = client.getContentTree();
+    final result = await _future!;
+    _contentTree = result;
+
+    notifyListeners();
+    return _contentTree;
+  }
+}

learning/tour-of-beam/frontend/lib/cache/sdk_cache.dart

@@ -0,0 +1,53 @@
+/*
+ * 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 'dart:async';
+
+import 'package:flutter/widgets.dart';
+
+import '../models/sdk.dart';
+import '../repositories/client/client.dart';
+import '../repositories/models/get_sdks_response.dart';
+
+class SdkCache extends ChangeNotifier {
+  final TobClient client;
+
+  final _sdks = <SdkModel>[];
+  Future<GetSdksResponse>? _future;
+
+  SdkCache({
+    required this.client,
+  });
+
+  List<SdkModel> getSdks() {
+    if (_future == null) {
+      unawaited(_loadSdks());
+    }
+
+    return _sdks;
+  }
+
+  Future<List<SdkModel>> _loadSdks() async {
+    _future = client.getSdks();
+    final result = await _future!;
+
+    _sdks.addAll(result.sdks);
+    notifyListeners();
+    return _sdks;
+  }
+}

learning/tour-of-beam/frontend/lib/components/builders/content_tree.dart

@@ -0,0 +1,45 @@
+/*
+ * 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/widgets.dart';
+import 'package:get_it/get_it.dart';
+
+import '../../cache/content_tree.dart';
+import '../../models/content_tree.dart';
+
+class ContentTreeBuilder extends StatelessWidget {
+  final ValueWidgetBuilder<ContentTreeModel?> builder;
+
+  const ContentTreeBuilder({
+    required this.builder,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final cache = GetIt.instance.get<ContentTreeCache>();
+
+    return AnimatedBuilder(
+      animation: cache,
+      builder: (context, child) => builder(
+        context,
+        cache.getContentTree(),
+        child,
+      ),
+    );
+  }
+}

learning/tour-of-beam/frontend/lib/components/builders/sdks_builder.dart

@@ -0,0 +1,41 @@
+/*
+ * 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/widgets.dart';
+import 'package:get_it/get_it.dart';
+
+import '../../cache/sdk_cache.dart';
+import '../../models/sdk.dart';
+
+class SdksBuilder extends StatelessWidget {
+  final ValueWidgetBuilder<List<SdkModel>> builder;
+
+  const SdksBuilder({
+    required this.builder,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final cache = GetIt.instance.get<SdkCache>();
+
+    return AnimatedBuilder(
+      animation: cache,
+      builder: (context, child) => builder(context, cache.getSdks(), child),
+    );
+  }
+}

learning/tour-of-beam/frontend/lib/components/sdk_dropdown.dart

@@ -19,30 +19,40 @@
 import 'package:flutter/material.dart';
 import 'package:playground_components/playground_components.dart';
 
+import 'builders/sdks_builder.dart';
+
 class SdkDropdown extends StatelessWidget {
   const SdkDropdown();
 
   @override
   Widget build(BuildContext context) {
-    return _DropdownWrapper(
-      child: DropdownButton(
-        value: 'Java',
-        onChanged: (sdk) {
-          // TODO(nausharipov): change SDK
-        },
-        items: const ['Java', 'Python', 'Go']
-            .map(
-              (sdk) => DropdownMenuItem(
-                value: sdk,
-                child: Text(sdk),
-              ),
-            )
-            .toList(growable: false),
-        isDense: true,
-        alignment: Alignment.center,
-        focusColor: BeamColors.transparent,
-        borderRadius: BorderRadius.circular(BeamSizes.size6),
-      ),
+    return SdksBuilder(
+      builder: (context, sdks, _) {
+        if (sdks.isEmpty) {
+          return Container();
+        }
+
+        return _DropdownWrapper(
+          child: DropdownButton(
+            value: sdks.first.id,
+            onChanged: (sdk) {
+              // TODO(nausharipov): change SDK
+            },
+            items: sdks
+                .map(
+                  (sdk) => DropdownMenuItem(
+                    value: sdk.id,
+                    child: Text(sdk.title),
+                  ),
+                )
+                .toList(growable: false),
+            isDense: true,
+            alignment: Alignment.center,
+            focusColor: BeamColors.transparent,
+            borderRadius: BorderRadius.circular(BeamSizes.size6),
+          ),
+        );
+      },
     );
   }
 }

learning/tour-of-beam/frontend/lib/config.dart

@@ -0,0 +1,39 @@
+/*
+ * 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.
+ */
+
+// TODO(alexeyinkin): Generate this file on deployment.
+
+const _cloudFunctionsProjectRegion = 'us-central1';
+const _cloudFunctionsProjectId = 'tour-of-beam-2';
+const cloudFunctionsBaseUrl = 'https://'
+    '$_cloudFunctionsProjectRegion-$_cloudFunctionsProjectId'
+    '.cloudfunctions.net';
+
+// Copied from Playground's config.g.dart
+
+const String kAnalyticsUA = 'UA-73650088-2';
+const String kApiClientURL =
+    'https://backend-router-beta-dot-apache-beam-testing.appspot.com';
+const String kApiJavaClientURL =
+    'https://backend-java-beta-dot-apache-beam-testing.appspot.com';
+const String kApiGoClientURL =
+    'https://backend-go-beta-dot-apache-beam-testing.appspot.com';
+const String kApiPythonClientURL =
+    'https://backend-python-beta-dot-apache-beam-testing.appspot.com';
+const String kApiScioClientURL =
+    'https://backend-scio-beta-dot-apache-beam-testing.appspot.com';

learning/tour-of-beam/frontend/lib/locator.dart

@@ -16,9 +16,15 @@
  * limitations under the License.
  */
 
-//import 'package:get_it/get_it.dart';
+import 'package:get_it/get_it.dart';
+
+import 'cache/content_tree.dart';
+import 'cache/sdk_cache.dart';
+import 'repositories/client/cloud_functions_client.dart';
 
 Future<void> initializeServiceLocator() async {
-  // See https://github.com/alexeyinkin/mefolio-standalone/blob/main/flutter/lib/locator.dart
-  // as an example.
+  final client = CloudFunctionsTobClient();
+
+  GetIt.instance.registerSingleton(ContentTreeCache(client: client));
+  GetIt.instance.registerSingleton(SdkCache(client: client));
 }