From e15e28e2d62111e00e9e1f0aa4cd0356d8d09f9f Mon Sep 17 00:00:00 2001
From: Patrick Franco Braz <patrickfbraz@poli.ufrj.br>
Date: Thu, 16 Nov 2023 14:49:40 -0300
Subject: [PATCH] refactor(datahub-web-react): allows proxying to external
 datahub-frontend servers (#9250)

---
 datahub-web-react/.env              | 3 ++-
 datahub-web-react/README.md         | 8 ++++++++
 datahub-web-react/src/setupProxy.js | 8 +++++---
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/datahub-web-react/.env b/datahub-web-react/.env
index d503159eca..e5529bbdaa 100644
--- a/datahub-web-react/.env
+++ b/datahub-web-react/.env
@@ -1,4 +1,5 @@
 PUBLIC_URL=/assets
 REACT_APP_THEME_CONFIG=theme_light.config.json
 SKIP_PREFLIGHT_CHECK=true
-BUILD_PATH=build/yarn
\ No newline at end of file
+BUILD_PATH=build/yarn
+REACT_APP_PROXY_TARGET=http://localhost:9002
\ No newline at end of file
diff --git a/datahub-web-react/README.md b/datahub-web-react/README.md
index 8bf592b11a..560f5315b2 100644
--- a/datahub-web-react/README.md
+++ b/datahub-web-react/README.md
@@ -51,6 +51,14 @@ need to be deployed, still at `http://localhost:9002`, to service GraphQL API re
 
 Optionally you could also start the app with the mock server without running the docker containers by executing `yarn start:mock`. See [here](src/graphql-mock/fixtures/searchResult/userSearchResult.ts#L6) for available login users.
 
+### Testing your customizations
+
+There is two options to test your customizations:
+* **Option 1**: Initialize the docker containers with the `quickstart.sh` script (or if any custom docker-compose file) and then run `yarn start` in this directory. This will start a forwarding server at `localhost:3000` that will use the `datahub-frontend` server at `http://localhost:9002` to fetch real data.
+* **Option 2**: Change the environment variable `REACT_APP_PROXY_TARGET` in the `.env` file to point to your `datahub-frontend` server (ex: https://my_datahub_host.com) and then run `yarn start` in this directory. This will start a forwarding server at `localhost:3000` that will use the `datahub-frontend` server at some domain to fetch real data.
+
+The option 2 is useful if you want to test your React customizations without having to run the hole DataHub stack locally. However, if you changed other components of the DataHub stack, you will need to run the hole stack locally (building the docker images) and use the option 1.
+
 ### Functional testing
 
 In order to start a server and run frontend unit tests using react-testing-framework, run:
diff --git a/datahub-web-react/src/setupProxy.js b/datahub-web-react/src/setupProxy.js
index 478c015705..165e394a50 100644
--- a/datahub-web-react/src/setupProxy.js
+++ b/datahub-web-react/src/setupProxy.js
@@ -2,6 +2,8 @@ const logInFilter = function (pathname, req) {
   return pathname.match('^/logIn') && req.method === 'POST';
 };
 
+const proxyTarget = process.env.REACT_APP_PROXY_TARGET || 'http://localhost:9002';
+
 if (process.env.REACT_APP_MOCK === 'true' || process.env.REACT_APP_MOCK === 'cy') {
     // no proxy needed, MirageJS will intercept all http requests
     module.exports = function () {};
@@ -13,21 +15,21 @@ if (process.env.REACT_APP_MOCK === 'true' || process.env.REACT_APP_MOCK === 'cy'
         app.use(
             '/logIn',
             createProxyMiddleware(logInFilter, {
-                target: 'http://localhost:9002',
+                target: proxyTarget,
                 changeOrigin: true,
             }),
         );
         app.use(
             '/authenticate',
             createProxyMiddleware({
-                target: 'http://localhost:9002',
+                target: proxyTarget,
                 changeOrigin: true,
             }),
         );
         app.use(
             '/api/v2/graphql',
             createProxyMiddleware({
-                target: 'http://localhost:9002',
+                target: proxyTarget,
                 changeOrigin: true,
             }),
         );