Merge branch 'master' into task/WG-208--file-listing-component

.dockerignore

@@ -1,2 +1,9 @@
-node_modules/
 .git
+**/node_modules
+**/build
+
+# Angular jwt file
+**/jwt.ts
+
+# React project secrets
+**/secret_local.ts

.github/workflows/main.yml

@@ -64,7 +64,7 @@ jobs:
       - name: Setup Node.js for use with actions
         uses: actions/setup-node@v1
         with:
-          node-version: 16.x
+          node-version: 20.10.x
 
       - uses: actions/cache@v1
         with:
@@ -80,6 +80,7 @@ jobs:
       - name: Unit Tests
         run: |
           cd react
+          cp src/secret_local.example.ts src/secret_local.ts
           npm run test
   React-Linting:
     runs-on: ubuntu-latest
@@ -88,7 +89,7 @@ jobs:
     - name: Setup Node.js for use with actions
       uses: actions/setup-node@v1
       with:
-        node-version: 16.x
+        node-version: 20.10.x
 
     - uses: actions/cache@v1
       with:
@@ -112,7 +113,7 @@ jobs:
     - name: Setup Node.js for use with actions
       uses: actions/setup-node@v1
       with:
-        node-version: 16.x
+        node-version: 20.10.x
 
     - uses: actions/cache@v1
       with:
@@ -128,5 +129,5 @@ jobs:
     - name: Build
       run: |
         cd react
-        cp .env.example .env
+        cp src/secret_local.example.ts src/secret_local.ts
         npm run build

.gitignore

@@ -1,20 +1,14 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
+**/node_modules
+**/build
+**/dist
+**/tmp
+**/out-tsc
 
-# compiled output
-/dist
-src/environments/jwt.ts
-/tmp
-/out-tsc
+# Angular jwt file
+**/jwt.ts
 
-angular/dist
-angular/src/environments/jwt.ts
-angular/tmp
-angular/out-tsc
-# Only exists if Bazel was run
-/bazel-out
-__pycache__
-# dependencies
-node_modules
+# React project secrets
+**/secret_local.ts
 
 # profiling files
 chrome-profiler-events.json

Makefile

@@ -1,11 +1,20 @@
 TAG := $(shell git log --format=%h -1)
-IMAGE ?= taccaci/hazmapper:$(TAG)
+
+.PHONY: build-angular
+build-angular:
+	docker build -t taccaci/hazmapper:$(TAG) -f angular/Dockerfile .
+	docker tag taccaci/hazmapper:$(TAG) taccaci/hazmapper:latest
+
+.PHONY: build-react
+build-react:
+	docker build -t taccaci/hazmapper-react:$(TAG) -f react/Dockerfile .
+	docker tag taccaci/hazmapper-react:$(TAG) taccaci/hazmapper-react:latest
 
 .PHONY: build
 build:
-	docker build -t $(IMAGE) -f angular/Dockerfile .
-	docker tag taccaci/hazmapper:${TAG} taccaci/hazmapper:latest
+	make build-angular && make build-react
 
-.PHONY: deploy
-deploy:
-	docker push $(IMAGE)
+.PHONY: publish
+publish:
+	docker push taccaci/hazmapper:$(TAG)
+	docker push taccaci/hazmapper-react:$(TAG)

README.md

@@ -13,40 +13,18 @@ See https://github.com/TACC-Cloud/geoapi which is an associated restful API.
 
 ## Local React Development (work-in-progress)
 
-`react/` has the react client
+`react/` has the React client
 
-
-#### Environments
-
-Environments are handled by vite via `vite.config.ts` and the `.env` files.
-
-
-The `TARGET` specified in `.env` prefix determines which environment we are running/building in (this must be set inside the directory of each deployment).
+To get started, create a local secret file for local development:
 ```
-TARGET="TARGET ENVIRONMENT"
+cp react/src/secret_local.example.ts react/src/secret_local.ts
 ```
-Possible target environments are `development`, `staging`, and `production`.
-
 
-Then, for local development, the `GEOAPI_BACKEND` specified in `.env` will allow testing different backends.
+Add the jwt retrieved from [Getting started](###getting-started) to `react/src/secret_local.ts`.  
 
+The `geoapiBackend` in ( see [react/src/secret_local.example.ts](react/src/secret_local.example.ts) ) can be used to select which backend `geoapi` is used by Hazmapper during local development (e.g. `EnvironmentType.Production`, `EnvironmentType.Staging`, `EnvironmentType.Dev`, * `EnvironmentType.Local`
 
-First, to set the target backend for local development, edit the `.env` file and add the target backend.
-Possible target backends are `development`, `staging`, and `production`.
-```
-GEOAPI_BACKEND="TARGET BACKEND"
-```
-
-
-Then add the jwt retrieved from [Getting started](###getting-started) to `.env`.
-
-```
-JWT="YOUR JWT FROM ABOVE"
-```
-
-
-Furthermore, additional environments defined in `vite.config.ts` will be accessible in the react codebase via `process.env.*`. (e.g. `process.env.apiUrl`)
-
+See https://github.com/TACC-Cloud/geoapi for more details on running geoapi locally.
 
 #### Run
 
@@ -55,11 +33,12 @@ npm ci
 npm run dev
 ```
 
+Navigate to `http://localhost:4200/` or `http://hazmapper.local:4200/`.  (Note that `hazmapper.local` needs to be added to your `/etc/hosts`)
+
 #### Running unit tests
 
 Run `npm run test`
 
-
 #### Running linters
 
 Run `npm run lint` to run linter
@@ -78,7 +57,7 @@ The app will automatically reload if you change any of the source files.
 
 ### Configuring which geoapi-backend is used
 
-The `backend` in [src/environments/environment.ts](src/environments/environment.ts) can be used to select which backend `geoapi` is used by the app:
+The `backend` in [angular/src/environments/environment.ts](angular/src/environments/environment.ts) can be used to select which backend `geoapi` is used by the app:
 
 * `EnvironmentType.Production`
 * `EnvironmentType.Staging`
@@ -103,8 +82,3 @@ Run `npm run lint:css -- --fix` to fix css files.
 ### Code scaffolding
 
 Run `ng generate component components/component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Kubernetes (Production/Staging environments)
-
-Information on Kubernetes configuration for production and staging environments can be found in the [kube/README.md](kube/README.md) including information
-on kube commands and Jenkins deployment workflows.

angular/src/app/services/env.service.ts

@@ -155,7 +155,7 @@ export class EnvService {
     } else if (/^hazmapper.tacc.utexas.edu/.test(hostname) && pathname.startsWith('/dev')) {
       this._env = EnvironmentType.Dev;
       this._apiUrl = this.getApiUrl(this.env);
-      this._taggitUrl = origin + '/taggit-dev'; /* doesn't yet exist */
+      this._taggitUrl = origin + '/taggit-dev';
       this._portalUrl = this.getPortalUrl(this.env);
       this._clientId = 'oEuGsl7xi015wnrEpxIeUmvzc6Qa';
       this._baseHref = '/dev/';

react/.gitignore

@@ -25,3 +25,4 @@ dist-ssr
 
 # Environment
 .env
+secret_local.ts

react/Dockerfile

@@ -0,0 +1,16 @@
+FROM node:20.10.0-alpine3.18 as node
+
+RUN mkdir /www
+COPY react /www
+WORKDIR /www
+
+# Creating dummy local file as it is not dynamically loaded; not actually used in prod  TODO_REACT
+COPY react/src/secret_local.example.ts src/secret_local.ts
+
+RUN npm ci
+RUN npm run build
+
+FROM nginx:1.24-alpine
+WORKDIR /
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=node /www/dist/ /usr/share/nginx/html

react/index.html

@@ -5,7 +5,28 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Hazmapper</title>
-
+    <base id="base" />
+    <script>
+      var hostname = window.location.hostname;
+      var pathname = window.location.pathname;
+      // Set base URL dynamically
+      if (/^hazmapper.tacc.utexas.edu/.test(hostname) && pathname.startsWith('/staging-react')) {
+          document.getElementById('base').href = '/staging-react/';
+      } else if (/^hazmapper.tacc.utexas.edu/.test(hostname) && pathname.startsWith('/dev-react')) {
+          document.getElementById('base').href = '/dev-react/';
+      } else if (/^hazmapper.tacc.utexas.edu/.test(hostname)) {
+          document.getElementById('base').href = '/hazmapper-react/';
+      } else if (/^hazmapper.tacc.utexas.edu/.test(hostname) && pathname.startsWith('/staging')) {
+          document.getElementById('base').href = '/staging/';
+      } else if (/^hazmapper.tacc.utexas.edu/.test(hostname) && pathname.startsWith('/dev')) {
+          document.getElementById('base').href = '/dev/';
+      } else if (/^hazmapper.tacc.utexas.edu/.test(hostname)) {
+          document.getElementById('base').href = '/hazmapper/';
+      } else {
+          document.getElementById('base').href = '/';
+      }
+      // TODO_REACT: Works but has issue. https://tacc-main.atlassian.net/browse/WG-224
+  </script>
   </head>
   <body>
     <div id="root"></div>

react/jest.config.cjs

@@ -28,9 +28,9 @@ module.exports = {
   coverageDirectory: 'coverage',
 
   // An array of regexp pattern strings used to skip coverage collection
-  // coveragePathIgnorePatterns: [
-  //   "\\\\node_modules\\\\"
-  // ],
+  coveragePathIgnorePatterns: [
+    "src/core-components/"
+  ],
 
   // Indicates which provider should be used to instrument code for coverage
   // coverageProvider: "babel",

react/package.json

@@ -5,7 +5,7 @@
     "type": "module",
     "scripts": {
         "dev": "vite",
-        "build": "tsc && vite build",
+        "build": "tsc && vite build --base=./",
         "preview": "vite preview",
         "test": "jest --testPathIgnorePatterns='<rootDir>/src/core-components/'",
         "lint": "npm run lint:js && npm run prettier:check",

react/src/AppRouter.tsx

@@ -16,6 +16,7 @@ import Callback from './pages/Callback/Callback';
 import StreetviewCallback from './pages/StreetviewCallback/StreetviewCallback';
 import { RootState } from './redux/store';
 import { isTokenValid } from './utils/authUtils';
+import { useBasePath } from './hooks/environment';
 
 interface ProtectedRouteProps {
   isAuthenticated: boolean;
@@ -41,8 +42,10 @@ function AppRouter() {
     isTokenValid(state.auth.token)
   );
 
+  const basePath = useBasePath();
+
   return (
-    <BrowserRouter>
+    <BrowserRouter basename={basePath}>
       <Routes>
         <Route
           path={ROUTES.MAIN}

react/src/__fixtures__/appConfigurationFixture.ts

@@ -0,0 +1,32 @@
+import {
+  GeoapiBackendEnvironment,
+  AppConfiguration,
+  MapillaryConfiguration,
+} from '../types';
+
+const clientId = 'abc_123_JWT';
+const jwtId = 'abc_123_client_id';
+
+export const mapillaryConfig: MapillaryConfiguration = {
+  authUrl: 'https://www.mapillary.com/connect',
+  tokenUrl: 'https://graph.mapillary.com/token',
+  apiUrl: 'https://graph.mapillary.com/',
+  tileUrl: 'https://tiles.mapillary.com/',
+  scope:
+    'user:email+user:read+user:write+public:write+public:upload+private:read+private:write+private:upload',
+  clientSecret: '',
+  clientId: '',
+  clientToken: '',
+};
+
+export const localDevConfiguration: AppConfiguration = {
+  basePath: '/',
+  clientId: clientId,
+  geoapiBackend: GeoapiBackendEnvironment.Local,
+  geoapiUrl: 'http://localhost:8888',
+  designSafeUrl: 'https://agave.designsafe-ci.org/',
+  designsafePortalUrl: 'https://designsafeci-dev.tacc.utexas.edu/',
+  mapillary: mapillaryConfig,
+  taggitUrl: 'http://localhost:4200/taggit-staging',
+  jwt: jwtId,
+};

react/src/__fixtures__/authStateFixtures.ts

@@ -0,0 +1,17 @@
+import { AuthState } from '../types';
+
+export const authenticatedUser: AuthState = {
+  user: {
+    username: 'user',
+    email: '[email protected]',
+  },
+  token: {
+    token: 'auth-token',
+    expires: 3153600000000, // 2070
+  },
+};
+
+export const unauthenticatedUser: AuthState = {
+  user: null,
+  token: null,
+};

react/src/hooks/environment/index.ts

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