site: Add download site

WORKSPACE

@@ -1,5 +1,6 @@
 workspace(
     name = "envoy_distro",
+    managed_directories = {"@npm": ["site:node_modules"]},
 )
 
 load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
@@ -35,3 +36,18 @@ envoy_dependency_imports()
 load("aptly_deps.bzl", "aptly_dependencies")
 
 aptly_dependencies()
+
+load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
+http_archive(
+    name = "build_bazel_rules_nodejs",
+    sha256 = "0fa2d443571c9e02fcb7363a74ae591bdcce2dd76af8677a95965edf329d778a",
+    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/3.6.0/rules_nodejs-3.6.0.tar.gz"],
+)
+
+load("@build_bazel_rules_nodejs//:index.bzl", "yarn_install")
+
+yarn_install(
+    name = "npm",
+    package_json = "//site:package.json",
+    yarn_lock = "//site:yarn.lock",
+)

dist/BUILD

@@ -20,9 +20,10 @@ genrule(
     name = "html",
     outs = ["site.tar"],
     cmd = """
-    tar -chf $@ -C $(location :repos) .
+    tar -chf $@ -C $(location //site:build) .
     """,
     tools = [
         ":repos",
+        "//site:build",
     ],
 )

site/.dir-locals.el

@@ -0,0 +1 @@
+((nil . ((create-lockfiles . nil))))

site/.npmignore

@@ -0,0 +1 @@
+.#*

site/BUILD.bazel

@@ -0,0 +1,128 @@
+load("@bazel_skylib//rules:write_file.bzl", "write_file")
+load("@build_bazel_rules_nodejs//:index.bzl", "copy_to_bin", "nodejs_test")
+load("@npm//react-scripts:index.bzl", "react_scripts", "react_scripts_test")
+
+# Filename conventions described at
+# https://create-react-app.dev/docs/running-tests#filename-conventions
+_TESTS = [
+    "src/**/*.test.js*",
+    "src/**/*.test.ts*",
+    "src/**/*.spec.js*",
+    "src/**/*.spec.ts*",
+    "src/**/__tests__/**/*.js*",
+    "src/**/__tests__/**/*.ts*",
+]
+
+# We don't want to teach react-scripts to include from multiple directories
+# So we copy everything it wants to read to the output "bin" directory
+copy_to_bin(
+    name = "copy_static_files",
+    srcs = glob(
+        [
+            "public/*",
+            "src/**/*",
+        ],
+        exclude = _TESTS,
+    ) + [
+        "package.json",
+        "tsconfig.json",
+    ],
+)
+
+# react-scripts can only work if the working directory is the root of the application.
+# So we'll need to chdir before it runs.
+write_file(
+    name = "write_chdir_script",
+    out = "chdir.js",
+    content = ["process.chdir(__dirname)"],
+)
+
+_RUNTIME_DEPS = [
+    "chdir.js",
+    "copy_static_files",
+    "@npm//react",
+    "@npm//react-dom",
+]
+
+react_scripts(
+    # Note: If you want to change the name make sure you update BUILD_PATH below accordingly
+    # https://create-react-app.dev/docs/advanced-configuration/
+    name = "build",
+    args = [
+        "--node_options=--require=../$(location chdir.js)",
+        "build",
+    ],
+    data = _RUNTIME_DEPS + [
+        "@npm//@types",
+        "@npm//react-redux",
+        "@npm//@reduxjs/toolkit",
+        "@npm//bootstrap",
+        "@npm//javascript-time-ago",
+        "@npm//prop-types-exact",
+        "@npm//prismjs",
+        "@npm//reactstrap",
+    ],
+    env = {
+        "BUILD_PATH": "./build",
+    },
+    output_dir = True,
+    visibility = ["//visibility:public"],
+)
+
+nodejs_test(
+    name = "build_smoke_test",
+    data = [
+        "build",
+        "@npm//@bazel/runfiles",
+    ],
+    entry_point = "build_smoke_test.js",
+)
+
+copy_to_bin(
+    name = "copy_test_files",
+    srcs = glob(_TESTS),
+)
+
+react_scripts_test(
+    name = "test",
+    args = [
+        "--node_options=--require=$(rootpath chdir.js)",
+        "test",
+        # ibazel is the watch mode for Bazel when running tests
+        # Because Bazel is really a CI system that runs locally
+        "--watchAll=false",
+        "--no-cache",
+        "--no-watchman",
+        "--ci",
+    ],
+    data = _RUNTIME_DEPS + [
+        "copy_test_files",
+        "@npm//@testing-library/jest-dom",
+        "@npm//@testing-library/react",
+        "@npm//@testing-library/user-event",
+    ],
+    # Need to set the pwd to avoid jest needing a runfiles helper
+    # Windows users with permissions can use --enable_runfiles
+    # to make this test work
+    tags = ["no-bazelci-windows"],
+)
+
+
+react_scripts(
+    name = "start",
+    args = [
+        "--node_options=--require=../$(location chdir.js)",
+        "start",
+    ],
+    data = _RUNTIME_DEPS,
+    tags = [
+        # This tag instructs ibazel to pipe into stdin a event describing actions.
+        # ibazel send EOF to stdin by default and `react-scripts start` will stop when getting EOF in stdin.
+        # So use this to prevent EOF.
+        "ibazel_notify_changes",
+    ],
+    env = {
+        "HOST": "0.0.0.0",
+        "REACT_APP_HOST": "0.0.0.0",
+    },
+)

site/build_smoke_test.js

@@ -0,0 +1,7 @@
+const assert = require('assert');
+const fs = require('fs');
+const {runfiles} = require('@bazel/runfiles');
+
+// Make sure there's a file like build/static/js/main.12345678.chunk.js
+const jsDir = runfiles.resolvePackageRelative('build/static/js');
+assert.ok(fs.readdirSync(jsDir).some(f => /main\.[0-9a-f]{8}\.chunk\.js/.test(f)));

site/chdir.js

@@ -0,0 +1 @@
+process.chdir(__dirname)

site/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "site",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@babel/helper-regex": "^7.10.5",
+    "@octokit/rest": "^18.0.12",
+    "@reduxjs/toolkit": "^1.4.0",
+    "bootstrap": "^4.5.3",
+    "javascript-time-ago": "^2.3.8",
+    "js-yaml": "^3.14.0",
+    "js-yaml-loader": "^1.2.2",
+    "parse-github-event": "^1.1.3",
+    "prismjs": "^1.24.1",
+    "prop-types-exact": "^1.2.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-markdown": "^5.0.3",
+    "react-redux": "^7.2.4",
+    "react-scripts": "4.0.1",
+    "reactstrap": "^8.7.1",
+    "typescript": "^4.3.5",
+    "web-vitals": "^2.1.0",
+    "yarn": "^1.22.10"
+  },
+  "devDependencies": {
+    "@bazel/ibazel": "^0.15.10",
+    "@bazel/runfiles": "^3.7.0",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/user-event": "^12.3.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.3.2",
+    "enzyme": "^3.11.0",
+    "patch-package": "^6.2.2"
+  },
+  "scripts": {
+    "start": "ibazel run //:start",
+    "build": "bazel build //:build",
+    "test": "ibazel test //:test",
+    "postinstall": "patch-package",
+    "lint": "./node_modules/.bin/eslint --max-warnings 0 src"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "jest": {
+    "coverageReporters": [
+      "lcov",
+      "text"
+    ],
+    "coveragePathIgnorePatterns": [
+      "node_modules"
+    ],
+    "collectCoverageFrom": [
+      "**/*.{js,jsx}",
+      "!**/*.eslintrc.js",
+      "!**/coverage/**",
+      "!**/dist/**",
+      "!**/node_modules/**"
+    ],
+    "testMatch": [
+      "**/tests/**/*.js?(x)"
+    ]
+  }
+}

site/patches/jest-haste-map+26.6.2.patch

@@ -0,0 +1,21 @@
+diff --git a/node_modules/jest-haste-map/build/crawlers/node.js b/node_modules/jest-haste-map/build/crawlers/node.js
+index 1e7372c..3d3d5f7 100644
+--- a/node_modules/jest-haste-map/build/crawlers/node.js
++++ b/node_modules/jest-haste-map/build/crawlers/node.js
+@@ -217,7 +217,16 @@ function find(roots, extensions, ignore, callback) {
+
+ function findNative(roots, extensions, ignore, callback) {
+   const args = Array.from(roots);
++  // In bazel's execution environment, all source/test files are symlinked
++  // into a sandboxed directory rather than copied over directly.
++  // Jest's crawler is currently set up to use find's type flag to filter only for files.
++  // This excludes symlinked files.
++  // https://github.com/facebook/jest/pull/9351#issuecomment-780637294
++  args.push('(');
+   args.push('-type', 'f');
++  args.push('-o');
++  args.push('-type', 'l');
++  args.push(')');
+
+   if (extensions.length) {
+     args.push('(');

site/public/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Experiment with envoy configurations and containers"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>Envoy playground</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

site/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "Envoy playground",
+  "name": "Envoy proxy, services and networking playground",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

site/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

site/src/app/app.js

@@ -0,0 +1,39 @@
+
+import React from 'react';
+
+import {Provider} from 'react-redux';
+
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './css/playground-site.css';
+
+import {EnvoyDistroPage} from '../layout';
+import {EnvoyDistroSiteContext} from "./context";
+import EnvoyDistroSite from './site';
+
+import store from "./store";
+
+
+export default class EnvoyDistroSiteApp extends React.PureComponent {
+
+    state = {site: null}
+
+    async componentDidMount () {
+        const site = new EnvoyDistroSite(store);
+        await site.load();
+        this.setState({site});
+    }
+
+    render () {
+        const {site} = this.state;
+        if (!site) {
+            return '';
+        }
+        return (
+            <Provider store={store}>
+              <EnvoyDistroSiteContext.Provider value={site}>
+                <EnvoyDistroPage />
+              </EnvoyDistroSiteContext.Provider>
+            </Provider>
+        );
+    }
+}

site/src/app/context.js

@@ -0,0 +1,7 @@
+
+import React from 'react';
+
+const EnvoyDistroSiteContext = React.createContext();
+
+
+export {EnvoyDistroSiteContext};