Merge branch 'nik_dev_setup_for_ui' into 'master'

Support .env for dev/debug purposes. Clarify how to start Platform UI locally for dev/debugging, with predefined JWT

See merge request postgres-ai/database-lab!853

Author: NikolayS

ui/README.md

@@ -1,6 +1,6 @@
-# Database Lab Engine and Database Lab Engine UI
+# Database Lab Engine UI and DBLab Platform UI
 
-## Database Lab - thin database clones for faster development
+## DBLab - thin database clones and database branching for faster development
 
 _Proceed to [Database Lab Engine repository](https://gitlab.com/postgres-ai/database-lab) for more information about technology itself._
 Database Lab Engine (DLE) is an open-source (Apache 2.0) technology that allows blazing-fast cloning of Postgres databases of any size in seconds. This helps solve many problems such as:
@@ -27,24 +27,22 @@ At the root:
 - `<npm command> -w <package-name>` - for specific package
 
 #### Examples
-
 - `npm ci -ws` - install deps of all packages
 - `npm run build -ws` - build all packages
 - `npm run start -w @postgres.ai/platform` - run platform UI locally in dev mode
 - `npm run start -w @postgres.ai/ce` - run community edition UI locally in dev mode
 
 _Important note: don't use commands for `@postgres.ai/shared` - it's dependent package, which can't be running or built_
 
-### How to start "platform"
-
-- `cd ui`
-- `npm ci -ws` - install dependencies, must be done once to install dependencies for all packages
-- `source packages/platform/deploy/configs/production.sh` - set up environment variables, should be run for each new terminal session
-- `npm run start -w @postgres.ai/platform` - start dev server
-- To sign in locally - sign in on [console.postgres.ai](https://console.postgres.ai) and copy `token` from Local Storage to your localhost's Local Storage
+### How to start Platform UI with a predefined JWT token
+- `cd ui/packages/platform`
+- `cp .env_example_dev .env`
+- edit `.env` setting:
+    - `REACT_APP_API_URL_PREFIX` to point to dev API server (e.g., staging API server: `https://v2.postgres.ai/api/general`).
+    - `REACT_APP_TOKEN_DEBUG` to have your JWT ready work with the same server. Note that it has an expiration date so it needs to be periodically refreshed.
+- `pnpm run start` - start Platform for local debugging/development
 
 ### How to start "ce"
-
 - `cd ui`
 - `npm ci -ws` - install dependencies, must be done once to install dependencies for all packages
 - `npm run start -w @postgres.ai/ce` - start dev server

ui/packages/platform/.env_example_dev

@@ -0,0 +1,2 @@
+REACT_APP_API_URL_PREFIX=https://v2.postgres.ai/api/general
+REACT_APP_TOKEN_DEBUG=__YOUR_JWT_TOKEN_FROM_STAGING__

ui/packages/platform/.gitignore

@@ -0,0 +1 @@
+.env

ui/packages/platform/package.json

@@ -43,6 +43,7 @@
     "d3-flame-graph": "^2.1.3",
     "date-fns": "^2.22.1",
     "dompurify": "^2.0.12",
+    "dotenv": "^10.0.0",
     "es6-promise": "^4.2.8",
     "formik": "^2.2.9",
     "get-user-locale": "^1.4.0",

ui/packages/platform/src/api/api.js

@@ -17,7 +17,7 @@ function encodeData(data) {
 class Api {
   constructor(setting) {
     this.server = setting.server
-    this.apiServer = setting.apiServer
+    this.apiServer = process.env.REACT_APP_API_URL_PREFIX || setting.apiServer // if set in .env (e.g., for dev/debug), use it
   }
 
   get(url, query, options) {

ui/packages/platform/src/config/env.ts

@@ -10,3 +10,10 @@ export const SENTRY_DSN = process.env.REACT_APP_SENTRY_DSN
 export const API_URL_PREFIX = process.env.REACT_APP_API_SERVER ?? ''
 export const WS_URL_PREFIX = process.env.REACT_APP_WS_URL_PREFIX ?? ''
 export const BUILD_TIMESTAMP = process.env.BUILD_TIMESTAMP
+
+// For debug purposes or during development, allow to pre-set the JWT token.
+const token = process.env.REACT_APP_TOKEN_DEBUG;
+if (token) {
+  localStorage.setItem('token', token);
+  console.warn('WARNING: JWT token is being set from the environment variable. This appears to be a debugging or development setup.');
+}