Load frontend config before rendering App

Stop tests from leaking calls to globus.org

.github/workflows/containers.yml

@@ -38,7 +38,7 @@ jobs:
           cache-from: type=gha
           cache-to: type=gha,mode=max
           context: frontend/
-          file: frontend/docker/production/react/Dockerfile
+          file: frontend/Dockerfile
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.metadata.outputs.tags }}
           labels: ${{ steps.metadata.outputs.labels }}
@@ -66,7 +66,7 @@ jobs:
           cache-from: type=gha
           cache-to: type=gha,mode=max
           context: backend/
-          file: backend/docker/production/django/Dockerfile
+          file: backend/Dockerfile
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.metadata.outputs.tags }}
           labels: ${{ steps.metadata.outputs.labels }}

.github/workflows/frontend.yml

@@ -5,59 +5,50 @@ name: Front-end CI
 
 on:
   push:
-    branches: [master]
+    branches: [ master ]
   pull_request:
 
+
 defaults:
   run:
     working-directory: frontend
 
-env:
-  REACT_APP_KEYCLOAK_REALM: esgf
-  REACT_APP_KEYCLOAK_URL: https://esgf-login.ceda.ac.uk/
-  REACT_APP_KEYCLOAK_CLIENT_ID: metagrid-localhost
-
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-
-      - name: Use Node.js 22.x
-        uses: actions/setup-node@v4
-        with:
-          node-version: "22.x"
-
-      - name: Cache node modules
-        uses: actions/cache@v4
-        env:
-          cache-name: cache-node-modules
-        with:
-          path: ~/.cache/yarn
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-build-${{ env.cache-name }}-
-            ${{ runner.os }}-build-
-            ${{ runner.os }}-
-
-      - name: Install Dependencies
-        run: yarn install --frozen-lockfile
-
-      - name: Run Tests
-        env:
-          RELEASE: dev
-          ENV_FILE: .envs/.react
-          HTML_PATH: public
-        run: |
-          # Replaces react-scripts substitution during build for index.html and generates runtime_env.js
-          docker/production/react/entrypoint
-
-          yarn test:coverage
-
-      - name: Upload Coverage Report
-        uses: codecov/codecov-action@v3
-        env:
-          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
-        with:
-          file: "./frontend/coverage/coverage-final.json"
-          flags: frontend
+    - uses: actions/checkout@v4
+
+    - name: Use Node.js 22.x
+      uses: actions/setup-node@v4
+      with:
+        node-version: "22.x"
+
+    - name: Cache node modules
+      uses: actions/cache@v4
+      env:
+        cache-name: cache-node-modules
+      with:
+        path: ~/.cache/yarn
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-build-${{ env.cache-name }}-
+          ${{ runner.os }}-build-
+          ${{ runner.os }}-
+
+    - name: Install Dependencies
+      run: yarn install --frozen-lockfile
+
+    - name: Run Tests
+      env:
+        RELEASE: dev
+        HTML_PATH: public
+      run: yarn test:coverage
+
+    - name: Upload Coverage Report
+      uses: codecov/codecov-action@v3
+      env:
+        CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+      with:
+        file: "./frontend/coverage/coverage-final.json"
+        flags: frontend

.vscode/settings.json

@@ -77,5 +77,9 @@
   "[jsonc]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "python.analysis.extraPaths": ["backend/venv/bin/python"]
+  "python.analysis.extraPaths": ["backend/venv/bin/python"],
+  "jest.rootPath": "frontend/src",
+  "jest.jestCommandLine": "yarn test",
+  "python.testing.pytestEnabled": true,
+  "python.testing.pytestArgs": ["backend/"]
 }

backend/.envs/.postgres

@@ -2,4 +2,7 @@ POSTGRES_HOST=postgres
 POSTGRES_PORT=5432
 POSTGRES_DB=postgres
 POSTGRES_USER=postgres
-POSTGRES_PASSWORD=postgres
+POSTGRES_PASSWORD=postgres
+PGHOST=postgres
+PGPASSWORD=postgres
+PGUSER=postgres

backend/config/settings/base.py

@@ -99,7 +99,7 @@
 ]
 
 # https://docs.djangoproject.com/en/dev/ref/settings/#allowed-hosts
-ALLOWED_HOSTS = ["localhost", "0.0.0.0", "127.0.0.1"]
+ALLOWED_HOSTS = ["django", "localhost", "0.0.0.0", "127.0.0.1"]
 ROOT_URLCONF = "config.urls"
 
 # https://docs.djangoproject.com/en/dev/ref/settings/#secret-key
@@ -344,8 +344,8 @@
     "urn:globus:auth:scope:transfer.api.globus.org:all",
 ]
 
-SOCIAL_AUTH_GLOBUS_KEY = env("GLOBUS_CLIENT_KEY", default=12345)
-SOCIAL_AUTH_GLOBUS_SECRET = env("GLOBUS_CLIENT_SECRET", default=12345)
+SOCIAL_AUTH_GLOBUS_KEY = env("GLOBUS_CLIENT_KEY", default="12345")
+SOCIAL_AUTH_GLOBUS_SECRET = env("GLOBUS_CLIENT_SECRET", default="12345")
 SOCIAL_AUTH_GLOBUS_AUTH_EXTRA_ARGUMENTS = {
     "requested_scopes": SOCIAL_AUTH_GLOBUS_SCOPE,
     "prompt": None,
@@ -394,7 +394,7 @@
     ),
     "REACT_APP_GLOBUS_REDIRECT": env(
         "REACT_APP_GLOBUS_REDIRECT",
-        default="https://localhost:8080/cart/items",
+        default="http://localhost:8080/cart/items",
     ),
     "REACT_APP_CLIENT_ID": env("REACT_APP_CLIENT_ID", default="frontend"),
     "REACT_APP_GLOBUS_NODES": env.list(
@@ -412,15 +412,15 @@
         "REACT_APP_KEYCLOAK_REALM", default="esgf"
     ),
     "REACT_APP_KEYCLOAK_URL": env(
-        "REACT_APP_KEYCLOAK_URL", default="https://esgf-login.ceda.ac.uk/"
+        "REACT_APP_KEYCLOAK_URL", default="http://localhost:1337"
     ),
     "REACT_APP_KEYCLOAK_CLIENT_ID": env(
         "REACT_APP_KEYCLOAK_CLIENT_ID", default="frontend"
     ),
-    "REACT_APP_HOTJAR_ID": env("REACT_APP_HOTJAR_ID", default=1234),
-    "REACT_APP_HOTJAR_SV": env("REACT_APP_HOTJAR_SV", default=1234),
+    "REACT_APP_HOTJAR_ID": env("REACT_APP_HOTJAR_ID", default="1234"),
+    "REACT_APP_HOTJAR_SV": env("REACT_APP_HOTJAR_SV", default="1234"),
     "REACT_APP_GOOGLE_ANALYTICS_TRACKING_ID": env(
-        "REACT_APP_GOOGLE_ANALYTICS_TRACKING_ID", default=""
+        "REACT_APP_GOOGLE_ANALYTICS_TRACKING_ID", default="GA-XXXXXX"
     ),
 }
 

backend/metagrid/api_proxy/tests/test_views.py

@@ -1,6 +1,12 @@
+import re
+
+import globus_sdk
+import responses
+from django.conf import settings
 from django.contrib.auth import get_user_model
 from django.test import override_settings
 from django.urls import reverse
+from globus_sdk._testing import load_response
 from rest_framework import status
 from rest_framework.test import APITestCase
 
@@ -14,29 +20,51 @@ def test_globus_auth_unauthenticated(self):
         assert response.data == {"is_authenticated": False}
         assert response.status_code == status.HTTP_200_OK
 
+    @responses.activate
     @override_settings(
         SOCIAL_AUTH_GLOBUS_KEY="1", SOCIAL_AUTH_GLOBUS_SECRET="2"
     )
     def test_globus_auth_begin(self):
+        responses.get(
+            "https://auth.globus.org//.well-known/openid-configuration",
+            json={
+                "authorization_endpoint": "https://auth.globus.org/v2/oauth2/authorize",
+            },
+        )
         response = self.client.get(
             reverse("social:begin", kwargs={"backend": "globus"})
         )
         self.assertEqual(response.status_code, 302)
 
+    @responses.activate
     def test_do_globus_get_endpoint(self):
         url = reverse("globus-get-endpoint")
+        endpoint_id = "12345"
+        endpoint_url_pattern = re.compile(
+            f"https://transfer.api.globus.org/.*/endpoint/{endpoint_id}"
+        )
+        load_response(
+            globus_sdk.ConfidentialAppAuthClient.oauth2_client_credentials_tokens
+        )
 
-        data = {"endpoint_id": "0247816e-cc0d-4e03-a509-10903f6dde11"}
-        response = self.client.get(url, data)
-        print(response.status_code)
+        responses.get(endpoint_url_pattern, json={"foo": "bar"})
+        response = self.client.get(url, {"endpoint_id": endpoint_id})
         assert response.status_code == status.HTTP_200_OK
 
+    @responses.activate
     def test_do_globus_search_endpoints(self):
         url = reverse("globus-search-endpoints")
-
         data = {"search_text": "0247816e-cc0d-4e03-a509-10903f6dde11"}
+        endpoint_url_pattern = re.compile(
+            "https://transfer.api.globus.org/.*/endpoint_search"
+        )
+
+        load_response(
+            globus_sdk.ConfidentialAppAuthClient.oauth2_client_credentials_tokens
+        )
+        responses.get(endpoint_url_pattern, json={"DATA": "dummy"})
+
         response = self.client.get(url, data)
-        print(response.status_code)
         assert response.status_code == status.HTTP_200_OK
 
     def test_globus_auth_complete(self):
@@ -64,8 +92,10 @@ def test_globus_auth_logout(self):
         response = self.client.get(url)
         self.assertEqual(response.status_code, status.HTTP_302_FOUND)
 
+    @responses.activate
     def test_wget(self):
         url = reverse("do-wget")
+        responses.get(settings.WGET_URL)
         response = self.client.get(
             url,
             {
@@ -74,9 +104,11 @@ def test_wget(self):
         )
         assert response.status_code == status.HTTP_200_OK
 
+    @responses.activate
     def test_search(self):
         url = reverse("do-search")
         postdata = {"project": "CMIP6", "limit": 0}
+        responses.get(settings.SEARCH_URL)
         response = self.client.get(url, postdata)
         assert response.status_code == status.HTTP_200_OK
 
@@ -85,12 +117,17 @@ def test_search(self):
     #     response = self.client.get(url)
     #     assert response.status_code == status.HTTP_200_OK
 
+    @responses.activate
     def test_citation(self):
         url = reverse("do-citation")
         jo = {
             "citurl": "https://cera-www.dkrz.de/WDCC/meta/CMIP6/CMIP6.CMIP.IPSL.IPSL-CM6A-LR.abrupt-4xCO2.r12i1p1f1.Amon.n2oglobal.gr.v20191003.json"
         }
 
+        responses.get(
+            "https://cera-www.dkrz.de/WDCC/meta/CMIP6/CMIP6.CMIP.IPSL.IPSL-CM6A-LR.abrupt-4xCO2.r12i1p1f1.Amon.n2oglobal.gr.v20191003.json"
+        )
+
         response = self.client.post(url, jo, format="json")
         assert response.status_code == status.HTTP_200_OK
 

backend/requirements/local.txt

@@ -17,6 +17,7 @@ pytest-django==4.8.0  # https://github.com/pytest-dev/pytest-django
 pytest-sugar==1.0.0  # https://github.com/Frozenball/pytest-sugar
 pytest-watch==4.2.0  # https://github.com/joeyespo/pytest-watch
 factory-boy==3.3.0  # https://github.com/FactoryBoy/factory_boy
+responses==0.25.0  # https://github.com/getsentry/responses
 
 # Developer Tools
 # ------------------------------------------------------------------------------

docker-compose.prod-overlay.yml

@@ -2,3 +2,7 @@ services:
   keycloak:
     command: start
     volumes: []
+
+  react:
+    build:
+      target: prod

docker-compose.yml

@@ -23,7 +23,7 @@ services:
     ports:
       - 5432:5432
     healthcheck:
-      test: [ "CMD", "pg_isready", "-U", "postgres", "-d", "postgres" ]
+      test: ["CMD", "pg_isready", "-U", "postgres", "-d", "postgres"]
       start_period: 5s
       interval: 5s
       timeout: 2s
@@ -48,8 +48,12 @@ services:
           - django
 
   react:
-    build: frontend
+    build:
+      context: frontend
+      target: build
     image: metagrid_local_react
+    environment:
+      - PORT=8080
     depends_on:
       - django
     networks:
@@ -66,7 +70,7 @@ services:
     volumes:
       - ./keycloak/realm.json:/opt/keycloak/data/import/realm.json
     ports:
-      - 1337:1337
+      - 1337:8080
     networks:
       metagrid:
         ipv4_address: 10.89.9.84

frontend/Dockerfile

@@ -15,9 +15,10 @@ RUN yarn install --frozen-lock-file --network-timeout=1000000
 # Add app
 COPY . ./
 RUN yarn build
+CMD [ "yarn", "start" ]
 
 # Build production environment
-FROM nginxinc/nginx-unprivileged:stable
+FROM nginxinc/nginx-unprivileged:stable AS prod
 COPY --from=build /app/build /usr/share/nginx/html
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 

frontend/package.json

@@ -12,6 +12,7 @@
     "test:coverage": "CI=1 react-scripts test --coverage",
     "test:watch": "react-scripts test --runInBand"
   },
+  "proxy": "http://django:5000",
   "browserslist": {
     "production": [
       ">0.2%",
@@ -77,6 +78,7 @@
     "react": "18.2.0",
     "react-async": "10.0.1",
     "react-dom": "18.2.0",
+    "react-ga4": "^2.1.0",
     "react-hotjar": "2.2.1",
     "react-joyride": "2.5.3",
     "react-markdown": "9.0.1",