Bdomen react api utils

experimental/reporting-ui/src/main/react/reporting-ui/BUILD.bazel

@@ -5,7 +5,23 @@ load("@aspect_rules_webpack//webpack:defs.bzl", "webpack_bundle", "webpack_devse
 npm_link_all_packages()
 
 js_library(
-    name = "build_node_deps",
+    name = "app",
+    srcs = [
+        "app.css",
+        "app.tsx",
+        "index.css",
+        "index.tsx",
+        "logo.tsx",
+        "report_web_vitals.ts",
+    ],
+    visibility = [
+        "//experimental/reporting-ui/src/main/react/reporting-ui:__subpackages__",
+        "//experimental/reporting-ui/src/test/react/reporting-ui:__subpackages__",
+    ],
+)
+
+js_library(
+    name = "node_deps",
     srcs = [
         "//:node_modules/babel-loader",
         "//:node_modules/css-loader",
@@ -37,26 +53,30 @@ js_library(
 webpack_bundle(
     name = "webpack_bundle",
     srcs = [
+        ":app",
         ":webpack_config",
         "//:tsconfig",
+        "//experimental/reporting-ui/src/main/react/reporting-ui/client",
+        "//experimental/reporting-ui/src/main/react/reporting-ui/model/reporting",
         "//experimental/reporting-ui/src/main/react/reporting-ui/public",
-        "//experimental/reporting-ui/src/main/react/reporting-ui/src:src_files",
     ],
     node_modules = "//:node_modules",
     output_dir = True,
     webpack_config = ":webpack_config",
     deps = [
-        ":build_node_deps",
+        ":node_deps",
     ],
 )
 
 webpack_devserver(
     name = "webpack_devserver",
     data = [
-        ":build_node_deps",
+        ":app",
+        ":node_deps",
         "//:tsconfig",
+        "//experimental/reporting-ui/src/main/react/reporting-ui/client",
+        "//experimental/reporting-ui/src/main/react/reporting-ui/model/reporting",
         "//experimental/reporting-ui/src/main/react/reporting-ui/public",
-        "//experimental/reporting-ui/src/main/react/reporting-ui/src:src_files",
     ],
     node_modules = "//:node_modules",
     webpack_config = ":webpack_config",

experimental/reporting-ui/src/main/react/reporting-ui/src/App.tsx → experimental/reporting-ui/src/main/react/reporting-ui/app.tsx

@@ -14,7 +14,7 @@
 
 import React from 'react';
 import Logo from './logo';
-import './App.css';
+import './app.css';
 
 function App() {
   return (

experimental/reporting-ui/src/main/react/reporting-ui/client/BUILD.bazel

@@ -0,0 +1,18 @@
+load("@aspect_rules_js//js:defs.bzl", "js_library")
+
+package(
+    default_visibility = [
+        "//experimental/reporting-ui/src/main/react/reporting-ui:__subpackages__",
+        "//experimental/reporting-ui/src/test/react/reporting-ui:__subpackages__",
+    ],
+)
+
+js_library(
+    name = "client",
+    srcs = [
+        "initialize.ts",
+    ],
+    deps = [
+        "//experimental/reporting-ui/src/main/react/reporting-ui/client/reporting",
+    ],
+)

experimental/reporting-ui/src/main/react/reporting-ui/client/initialize.ts

@@ -0,0 +1,30 @@
+// Copyright 2023 The Cross-Media Measurement Authors
+//
+// Licensed 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 { ReportingClient } from "./reporting/client"
+
+type ConfigProps = {
+  reportingClient: ReportingClient;
+}
+
+class AppConfig {
+  reportingApi?: ReportingClient;
+
+  initialize(props:ConfigProps) {
+    this.reportingApi = props.reportingClient;
+  }
+}
+
+const appConfig = new AppConfig();
+export default appConfig;

experimental/reporting-ui/src/main/react/reporting-ui/client/reporting/BUILD.bazel

@@ -0,0 +1,18 @@
+load("@aspect_rules_js//js:defs.bzl", "js_library")
+
+package(
+    default_visibility = [
+        "//experimental/reporting-ui/src/main/react/reporting-ui:__subpackages__",
+    ],
+)
+
+js_library(
+    name = "reporting",
+    srcs = [
+        "client.ts",
+        "client_impl.ts",
+    ],
+    deps = [
+        "//experimental/reporting-ui/src/main/react/reporting-ui/model/reporting",
+    ],
+)

experimental/reporting-ui/src/main/react/reporting-ui/client/reporting/client.ts

@@ -0,0 +1,24 @@
+// Copyright 2023 The Cross-Media Measurement Authors
+//
+// Licensed 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 {
+  GetReportRequest,
+  GetReportResponse,
+  ListReportsResponse,
+} from '../../model/reporting';
+
+export interface ReportingClient {
+  listReports(): Promise<ListReportsResponse>;
+  getReport(req: GetReportRequest): Promise<GetReportResponse>;
+}

experimental/reporting-ui/src/main/react/reporting-ui/client/reporting/client_impl.ts

@@ -0,0 +1,61 @@
+// Copyright 2023 The Cross-Media Measurement Authors
+//
+// Licensed 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 {
+  GetReportRequest,
+  GetReportResponse,
+  InitApiProps,
+  ListReportsResponse,
+  Report,
+  TERMINAL_STATES,
+} from '../../model/reporting';
+
+export class ReportingClientImpl {
+  // eslint-disable-next-line node/no-unsupported-features/node-builtins
+  baseUrl: URL;
+  cache: Map<string, any> = new Map();
+
+  constructor(props: InitApiProps) {
+    this.baseUrl = props.endpoint;
+  }
+
+  async listReports(): Promise<ListReportsResponse> {
+    const res = await fetch(this.baseUrl.toString() + '/api/reports');
+    const reports = await res.json();
+    const response = Object.freeze({
+      reports,
+    });
+    return response;
+  }
+
+  async getReport(req: GetReportRequest): Promise<GetReportResponse> {
+    const key = JSON.stringify(req);
+
+    if (this.cache.has(key)) {
+      return this.cache.get(key);
+    }
+
+    const res = await fetch(this.baseUrl.toString() + '/api/reports' + req.id);
+    const report: Report = await res.json();
+    const response = Object.freeze({
+      report,
+    });
+
+    if (TERMINAL_STATES.includes(report.status)) {
+      this.cache.set(key, response);
+    }
+
+    return response;
+  }
+}

experimental/reporting-ui/src/main/react/reporting-ui/client/reporting/testing/BUILD.bazel

@@ -0,0 +1,34 @@
+load("@aspect_rules_js//js:defs.bzl", "js_library")
+load("@aspect_rules_webpack//webpack:defs.bzl", "webpack_devserver")
+
+package(
+    default_testonly = True,
+)
+
+js_library(
+    name = "fake_app",
+    srcs = [
+        "fake_reporting_client.ts",
+        "index.tsx",
+    ],
+    deps = [
+        "//:node_modules/react",
+        "//:node_modules/react-dom",
+        "//experimental/reporting-ui/src/main/react/reporting-ui/client",
+        "//experimental/reporting-ui/src/main/react/reporting-ui/model/reporting",
+    ],
+)
+
+webpack_devserver(
+    name = "webpack_testserver",
+    data = [
+        ":fake_app",
+        "//:tsconfig",
+        "//experimental/reporting-ui/src/main/react/reporting-ui:app",
+        "//experimental/reporting-ui/src/main/react/reporting-ui:node_deps",
+        "//experimental/reporting-ui/src/main/react/reporting-ui/model/reporting",
+        "//experimental/reporting-ui/src/main/react/reporting-ui/public",
+    ],
+    node_modules = "//:node_modules",
+    webpack_config = ":webpack.config.js",
+)