task/DES-2641: Optionally render React components in the UI (#1149)

* commit to main

* bootstrap nx client

* Local dev setup works.

* migrate to single-app Nx setup

* bootstrap workspace module with default boilerplate

* Add component/hook modules and bootstrap tests with msw

* Add router/module for workspace app code

* toggle React UI using the RENDER_REACT feature flag in conf

* remove committed workspace index template

* add React linting/tests to pipeline

* fix pipeline warning

* revert docker-compose changes

---------

Co-authored-by: Van Go <[email protected]>

.github/workflows/main.yml

@@ -60,3 +60,32 @@ jobs:
 
     - run: npm ci
     - run: npm run test
+
+  React_NX_unit_tests:
+    runs-on: ubuntu-22.04
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        fetch-depth: 0
+
+    - name: Setup Node.js for use with actions
+      uses: actions/setup-node@v3
+      with:
+        node-version: 20
+        cache: npm
+
+    - run: npm ci
+      working-directory: client
+
+    - uses: nrwl/nx-set-shas@v3
+      # Check linting/formatting of workspace files.
+    - run: npx nx format:check
+      working-directory: client
+
+    # Lint/test/build any apps and libs that have been impacted by the diff.
+    - run: npx nx affected --target=lint --parallel=3
+      working-directory: client
+    - run: npx nx affected --target=test --parallel=3 --ci --code-coverage
+      working-directory: client
+    - run: npx nx affected --target=build --parallel=3
+      working-directory: client

.gitignore

@@ -25,8 +25,8 @@ mysql.cnf
 designsafe/templates/base.html
 designsafe/apps/applications/templates/designsafe/apps/applications/index.html
 designsafe/apps/data/templates/data/data_depot.html
-designsafe/apps/workspace/templates/designsafe/apps/workspace/index.html
 designsafe/apps/rapid/templates/designsafe/apps/rapid/rapid_base.html
+designsafe/apps/workspace/templates/designsafe/apps/workspace/index.html
 designsafe/apps/geo/templates/designsafe/apps/geo/index.html
 designsafe/apps/search/templates/designsafe/apps/search/index.html
 designsafe/apps/dashboard/templates/designsafe/apps/dashboard/index.html
@@ -53,9 +53,8 @@ data/NEHRI/
 # stats
 stats/
 
-# no node modules or package-lock
+# no node modules
 node_modules/
-package-lock.json
 
 # in case you leave that here
 datadump.json

client/.eslintignore

@@ -0,0 +1 @@
+node_modules

client/.eslintrc.base.json

@@ -0,0 +1,35 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nx"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": ["@client/hooks", "@client/test-fixtures"],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nx/typescript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nx/javascript"],
+      "rules": {}
+    }
+  ]
+}

client/.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ],
+  "extends": ["plugin:@nx/react", "./.eslintrc.base.json"]
+}

client/.gitignore

@@ -0,0 +1,41 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+dist
+tmp
+/out-tsc
+
+# dependencies
+node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+
+.nx/cache

client/.prettierignore

@@ -0,0 +1,4 @@
+# Add files here to ignore them from prettier formatting
+/dist
+/coverage
+/.nx/cache

client/.prettierrc

@@ -0,0 +1,3 @@
+{
+    "singleQuote": true
+}

client/README.md

@@ -0,0 +1,61 @@
+# Client
+
+<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
+
+✨ **This workspace has been generated by [Nx, a Smart, fast and extensible build system.](https://nx.dev)** ✨
+
+## Start the app
+
+To start the development server run `nx serve client`. Open your browser and navigate to http://localhost:4200/. Happy coding!
+
+## Generate code
+
+If you happen to use Nx plugins, you can leverage code generators that might come with it.
+
+Run `nx list` to get a list of available plugins and whether they have generators. Then run `nx list <plugin-name>` to see what generators are available.
+
+Learn more about [Nx generators on the docs](https://nx.dev/plugin-features/use-code-generators).
+
+## Running tasks
+
+To execute tasks with Nx use the following syntax:
+
+```
+nx <target> <project> <...options>
+```
+
+You can also run multiple targets:
+
+```
+nx run-many -t <target1> <target2>
+```
+
+..or add `-p` to filter specific projects
+
+```
+nx run-many -t <target1> <target2> -p <proj1> <proj2>
+```
+
+Targets can be defined in the `package.json` or `projects.json`. Learn more [in the docs](https://nx.dev/core-features/run-tasks).
+
+## Want better Editor Integration?
+
+Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.
+
+## Ready to deploy?
+
+Just run `nx build demoapp` to build the application. The build artifacts will be stored in the `dist/` directory, ready to be deployed.
+
+## Set up CI!
+
+Nx comes with local caching already built-in (check your `nx.json`). On CI you might want to go a step further.
+
+- [Set up remote caching](https://nx.dev/core-features/share-your-cache)
+- [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution)
+- [Learn more how to setup CI](https://nx.dev/recipes/ci)
+
+## Connect with us!
+
+- [Join the community](https://nx.dev/community)
+- [Subscribe to the Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
+- [Follow us on Twitter](https://twitter.com/nxdevtools)

client/e2e/.eslintrc.json

@@ -0,0 +1,26 @@
+{
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["src/**/*.{ts,js,tsx,jsx}"],
+      "rules": {}
+    }
+  ],
+  "extends": ["plugin:playwright/recommended", "../.eslintrc.base.json"]
+}

client/e2e/playwright.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig } from '@playwright/test';
+import { nxE2EPreset } from '@nx/playwright/preset';
+
+import { workspaceRoot } from '@nx/devkit';
+
+// For CI, you may want to set BASE_URL to the deployed application.
+const baseURL = process.env['BASE_URL'] || 'http://localhost:4200';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  ...nxE2EPreset(__filename, { testDir: './src' }),
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    baseURL,
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npx nx serve client',
+    url: 'http://localhost:4200',
+    reuseExistingServer: !process.env.CI,
+    cwd: workspaceRoot,
+  },
+});

client/e2e/project.json

@@ -0,0 +1,20 @@
+{
+  "name": "e2e",
+  "$schema": "../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "e2e/src",
+  "targets": {
+    "e2e": {
+      "executor": "@nx/playwright:playwright",
+      "outputs": ["{workspaceRoot}/dist/.playwright/e2e"],
+      "options": {
+        "config": "e2e/playwright.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    }
+  },
+  "implicitDependencies": ["client"]
+}

client/e2e/src/example.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('/');
+
+  // Expect h1 to contain a substring.
+  expect(await page.locator('h1').innerText()).toContain('Welcome');
+});

client/index.html

@@ -0,0 +1,2 @@
+<link rel="stylesheet" href="/src/styles.css" />
+<script type="module" src="/src/main.tsx"></script>

client/modules/_hooks/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

client/modules/_hooks/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.base.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

client/modules/_hooks/README.md

@@ -0,0 +1,7 @@
+# hooks
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test hooks` to execute the unit tests via [Vitest](https://vitest.dev/).

client/modules/_hooks/project.json

@@ -0,0 +1,20 @@
+{
+  "name": "hooks",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "modules/hooks/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    },
+    "test": {
+      "executor": "@nx/vite:test",
+      "outputs": ["{options.reportsDirectory}"],
+      "options": {
+        "reportsDirectory": "../../coverage/modules/hooks"
+      }
+    }
+  }
+}

client/modules/_hooks/src/apiClient.ts

@@ -0,0 +1,9 @@
+import axios from 'axios';
+
+const apiClient = axios.create({
+  timeout: 30000,
+  xsrfHeaderName: 'X-CSRFToken',
+  xsrfCookieName: 'csrftoken',
+});
+
+export default apiClient;

client/modules/_hooks/src/index.ts

@@ -0,0 +1 @@
+export * from './workspace';

client/modules/_hooks/src/workspace/index.ts

@@ -0,0 +1 @@
+export { default as useAppsListing } from './useAppsListing';