From 37e72b5cd24ed9c7f44562dc1b481c6dcc343f7e Mon Sep 17 00:00:00 2001 From: Oleksandr Raspopov <38541764+Alexander-frenki@users.noreply.github.com> Date: Mon, 23 Dec 2024 15:15:23 +0100 Subject: [PATCH] chore: implement dynamic basename routing for branch-based urls (#871) Co-authored-by: Oleksandr Raspopov --- .env-ui.sample | 3 ++- ui/.env.sample | 4 +++- ui/scripts/deploy.sh | 1 + ui/src/adapters/env.ts | 4 ++++ ui/src/components/shared/RouterProvide.tsx | 11 +++++++++++ ui/src/contexts/Env.tsx | 1 + ui/src/domain/env.ts | 1 + ui/src/index.tsx | 18 +++++++++--------- 8 files changed, 32 insertions(+), 11 deletions(-) create mode 100644 ui/src/components/shared/RouterProvide.tsx diff --git a/.env-ui.sample b/.env-ui.sample index e6d839ca1..13c9a6a76 100644 --- a/.env-ui.sample +++ b/.env-ui.sample @@ -5,4 +5,5 @@ ISSUER_UI_WARNING_MESSAGE= ISSUER_UI_IPFS_GATEWAY_URL=https://ipfs-proxy-cache.privado.id ISSUER_UI_SCHEMA_EXPLORER_AND_BUILDER_URL=https://tools.privado.id ISSUER_UI_DISPLAY_METHOD_BUILDER_URL=https://display-method-dev.privado.id -ISSUER_UI_INSECURE=false \ No newline at end of file +ISSUER_UI_INSECURE=false +ISSUER_UI_BASE_URL=/ \ No newline at end of file diff --git a/ui/.env.sample b/ui/.env.sample index 3f9e8c99a..e6df98dbb 100644 --- a/ui/.env.sample +++ b/ui/.env.sample @@ -12,4 +12,6 @@ VITE_WARNING_MESSAGE=This Issuer Node is for testing purposes only. It is public VITE_IPFS_GATEWAY_URL=https://ipfs-proxy-cache.privado.id VITE_SCHEMA_EXPLORER_AND_BUILDER_URL=https://tools.privado.id -VITE_DISPLAY_METHOD_BUILDER_URL=https://display-method-dev.privado.id \ No newline at end of file +VITE_DISPLAY_METHOD_BUILDER_URL=https://display-method-dev.privado.id + +VITE_BASE_URL=/ \ No newline at end of file diff --git a/ui/scripts/deploy.sh b/ui/scripts/deploy.sh index b1724f2d9..da3767317 100755 --- a/ui/scripts/deploy.sh +++ b/ui/scripts/deploy.sh @@ -15,6 +15,7 @@ echo "VITE_WARNING_MESSAGE=$ISSUER_UI_WARNING_MESSAGE" >> $ENV_FILENAME echo "VITE_IPFS_GATEWAY_URL=$ISSUER_UI_IPFS_GATEWAY_URL" >> $ENV_FILENAME echo "VITE_SCHEMA_EXPLORER_AND_BUILDER_URL=$ISSUER_UI_SCHEMA_EXPLORER_AND_BUILDER_URL" >> $ENV_FILENAME echo "VITE_DISPLAY_METHOD_BUILDER_URL=$ISSUER_UI_DISPLAY_METHOD_BUILDER_URL" >> $ENV_FILENAME +echo "VITE_BASE_URL"=$ISSUER_UI_BASE_URL >> $ENV_FILENAME # Build app cd /app && npm run build diff --git a/ui/src/adapters/env.ts b/ui/src/adapters/env.ts index b85b308c8..c8d83bf43 100644 --- a/ui/src/adapters/env.ts +++ b/ui/src/adapters/env.ts @@ -8,6 +8,7 @@ export type EnvInput = { VITE_API_PASSWORD: string; VITE_API_URL: string; VITE_API_USERNAME: string; + VITE_BASE_URL?: string; VITE_BUILD_TAG?: string; VITE_DISPLAY_METHOD_BUILDER_URL: string; VITE_IPFS_GATEWAY_URL: string; @@ -23,6 +24,7 @@ export const envParser = getStrictParser()( VITE_API_PASSWORD: z.string().min(1), VITE_API_URL: z.string().url(), VITE_API_USERNAME: z.string().min(1), + VITE_BASE_URL: z.string().optional(), VITE_BUILD_TAG: z.string().optional(), VITE_DISPLAY_METHOD_BUILDER_URL: z.string(), VITE_IPFS_GATEWAY_URL: z.string().url(), @@ -39,6 +41,7 @@ export const envParser = getStrictParser()( VITE_API_PASSWORD, VITE_API_URL, VITE_API_USERNAME, + VITE_BASE_URL, VITE_BUILD_TAG, VITE_DISPLAY_METHOD_BUILDER_URL, VITE_IPFS_GATEWAY_URL, @@ -52,6 +55,7 @@ export const envParser = getStrictParser()( url: VITE_API_URL, username: VITE_API_USERNAME, }, + baseUrl: VITE_BASE_URL, buildTag: VITE_BUILD_TAG, displayMethodBuilderUrl: VITE_DISPLAY_METHOD_BUILDER_URL, ipfsGatewayUrl: VITE_IPFS_GATEWAY_URL, diff --git a/ui/src/components/shared/RouterProvide.tsx b/ui/src/components/shared/RouterProvide.tsx new file mode 100644 index 000000000..a6d81fb38 --- /dev/null +++ b/ui/src/components/shared/RouterProvide.tsx @@ -0,0 +1,11 @@ +import { PropsWithChildren } from "react"; +import { BrowserRouter } from "react-router-dom"; +import { useEnvContext } from "src/contexts/Env"; +import { ROOT_PATH } from "src/utils/constants"; + +export function RouterProvider(props: PropsWithChildren) { + const env = useEnvContext(); + const baseName = env.baseUrl || ROOT_PATH; + + return {props.children}; +} diff --git a/ui/src/contexts/Env.tsx b/ui/src/contexts/Env.tsx index 3e2d0d79d..71581064f 100644 --- a/ui/src/contexts/Env.tsx +++ b/ui/src/contexts/Env.tsx @@ -12,6 +12,7 @@ const defaultEnvContext: Env = { url: "", username: "", }, + baseUrl: "", displayMethodBuilderUrl: "", ipfsGatewayUrl: "", issuer: { diff --git a/ui/src/domain/env.ts b/ui/src/domain/env.ts index 52b86d995..d65175841 100644 --- a/ui/src/domain/env.ts +++ b/ui/src/domain/env.ts @@ -4,6 +4,7 @@ export type Env = { url: string; username: string; }; + baseUrl?: string; buildTag?: string; displayMethodBuilderUrl: string; ipfsGatewayUrl: string; diff --git a/ui/src/index.tsx b/ui/src/index.tsx index 9d3b41022..8eef57c00 100644 --- a/ui/src/index.tsx +++ b/ui/src/index.tsx @@ -3,9 +3,9 @@ import { extend as extendDayJsWith } from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; -import { BrowserRouter } from "react-router-dom"; import { Router } from "src/components/shared/Router"; +import { RouterProvider } from "src/components/shared/RouterProvide"; import { EnvProvider } from "src/contexts/Env"; import { IdentityProvider } from "src/contexts/Identity"; import { IssuerStateProvider } from "src/contexts/IssuerState"; @@ -26,18 +26,18 @@ const root = createRoot(rootElement); root.render( - - - - + + + + - - - - + + + + );