From ca59ff332cefeb3910ff5122e80f5bc012875c73 Mon Sep 17 00:00:00 2001 From: jrea Date: Wed, 10 Apr 2024 13:50:43 -0400 Subject: [PATCH] feat(react): use appUrl and apiUrl --- packages/react/README.md | 22 ++++++------------- .../GoogleLoginButton.stories.tsx | 2 +- .../GoogleLoginButton/GoogleLoginButton.tsx | 19 ++++++++-------- packages/react/src/SSO/SSO.stories.tsx | 9 ++++++++ packages/react/src/context/index.tsx | 18 ++++++++------- packages/react/src/context/types.ts | 3 ++- .../GoogleSSOButton.test.tsx | 9 ++------ packages/server/README.md | 2 +- 8 files changed, 41 insertions(+), 43 deletions(-) diff --git a/packages/react/README.md b/packages/react/README.md index c13cb71d..b47e336e 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -20,7 +20,13 @@ function App() { } ``` -Once added, there is a hook and components available for use. It is recommended to place the `` as high up in your render tree as possible, since it contains both stying and request wrappers. +## Configuration + +| Property | Type | Description | +| -------- | -------- | ----------------------------------------------------------------- | +| tenantId | `string` | ID of the tenant associated. | +| appUrl | `string` | the FQDN for a service running a `@niledatabase/server`-like API. | +| apiUrl | `string` | the API URL of your database | ## Dependencies @@ -135,17 +141,3 @@ function App() { ); } ``` - -## Available components - -[EntityForm](./src/components/EntityForm/README.md) - -[InstanceList](./src/components/InstanceList/README.md) - -[LoginForm](./src/components/LoginForm/README.md) - -[Metrics](./src/components/Metrics/README.md) - -[OrganizationForm](./src/components/OrganizationForm/README.md) - -[SignUpForm](./src/components/SignUpForm/README.md) diff --git a/packages/react/src/GoogleLoginButton/GoogleLoginButton.stories.tsx b/packages/react/src/GoogleLoginButton/GoogleLoginButton.stories.tsx index f3d404df..0fed7442 100644 --- a/packages/react/src/GoogleLoginButton/GoogleLoginButton.stories.tsx +++ b/packages/react/src/GoogleLoginButton/GoogleLoginButton.stories.tsx @@ -50,7 +50,7 @@ export function AlphaVersionWithOutProvider() { return (
- +
); diff --git a/packages/react/src/GoogleLoginButton/GoogleLoginButton.tsx b/packages/react/src/GoogleLoginButton/GoogleLoginButton.tsx index f59d3bcf..2c43560e 100644 --- a/packages/react/src/GoogleLoginButton/GoogleLoginButton.tsx +++ b/packages/react/src/GoogleLoginButton/GoogleLoginButton.tsx @@ -18,19 +18,18 @@ const LOGIN_PATH = 'users/oidc/google/login'; * @param props href: a string to override the URL provided by the context * @returns a JSX.Element to render */ -export default function GoogleSSOButton(props: { - href?: string; - databaseId?: string; - newTenantName?: string; -}) { - const { databaseId, newTenantName } = props; - const { basePath } = useNileConfig(); - const encodedDatabase = encodeURIComponent(databaseId ?? ''); - const contextHref = `${basePath}/databases/${encodedDatabase}/${LOGIN_PATH}`; +export default function GoogleSSOButton(props: { newTenantName?: string }) { + const { newTenantName } = props; + const { apiUrl } = useNileConfig(); + if (!apiUrl) { + // eslint-disable-next-line no-console + console.error('apiUrl is missing from '); + } + const contextHref = `${apiUrl}/${LOGIN_PATH}`; const query = newTenantName ? '?newTenant=' + encodeURIComponent(newTenantName) : ''; - const href = (props?.href ?? contextHref) + query; + const href = contextHref + query; return ( { alert('success!'); }} diff --git a/packages/react/src/context/index.tsx b/packages/react/src/context/index.tsx index d73a8fb3..472ba907 100644 --- a/packages/react/src/context/index.tsx +++ b/packages/react/src/context/index.tsx @@ -13,7 +13,7 @@ const defaultContext: NileContext = { basePath: 'https://api.thenile.dev', credentials: 'include', }), - basePath: '', + apiUrl: '', }; const context = createContext(defaultContext); @@ -37,7 +37,8 @@ export const NileProvider = (props: NileProviderProps) => { slotProps, tenantId, QueryProvider = BaseQueryProvider, - basePath = 'https://api.thenile.dev', + appUrl, + apiUrl = 'https://api.thenile.dev', api, } = props; @@ -46,13 +47,13 @@ export const NileProvider = (props: NileProviderProps) => { api: api ?? new Browser({ - basePath, + basePath: appUrl, credentials: 'include', }), tenantId: String(tenantId), - basePath, + apiUrl, }; - }, [api, basePath, tenantId]); + }, [api, apiUrl, appUrl, tenantId]); return ( @@ -68,13 +69,14 @@ const useNileContext = (): NileContext => { }; export const useNileConfig = (): NileReactConfig => { - const { basePath, tenantId } = useNileContext(); + const { apiUrl, tenantId, appUrl } = useNileContext(); return useMemo( () => ({ tenantId, - basePath, + apiUrl, + appUrl, }), - [basePath, tenantId] + [apiUrl, tenantId, appUrl] ); }; diff --git a/packages/react/src/context/types.ts b/packages/react/src/context/types.ts index ac58b789..ca9ecca1 100644 --- a/packages/react/src/context/types.ts +++ b/packages/react/src/context/types.ts @@ -3,7 +3,8 @@ import { Theme } from '@mui/joy/styles'; export interface NileReactConfig { tenantId?: string; - basePath?: string; // defaults to https://api.thenile.dev + apiUrl?: string; // the FQDN for the database + appUrl?: string; // the FQDN BE application the UI will send requests to, matching `Browser` in OpenAPI spec } export type NileContext = NileReactConfig & { diff --git a/packages/react/test/GoogleLoginButton/GoogleSSOButton.test.tsx b/packages/react/test/GoogleLoginButton/GoogleSSOButton.test.tsx index 5cc1d9a7..b3223023 100644 --- a/packages/react/test/GoogleLoginButton/GoogleSSOButton.test.tsx +++ b/packages/react/test/GoogleLoginButton/GoogleSSOButton.test.tsx @@ -8,15 +8,10 @@ import '../matchMedia.mock'; jest.mock('../../src/GoogleLoginButton/google.svg', () => 'svg'); describe('google sso button', () => { - it('renders with an href prop', () => { - const ref = 'somehref'; - render(); - expect(screen.getByRole('link').getAttribute('href')).toEqual(ref); - }); it('renders using the context', () => { render( - - + + ); screen.getByText('Continue with Google'); diff --git a/packages/server/README.md b/packages/server/README.md index 45d84010..19e8c20a 100644 --- a/packages/server/README.md +++ b/packages/server/README.md @@ -55,7 +55,7 @@ Configuration passed to `Server` takes precedence over `.env` vars. | db | `PoolConfig` | | Configuration object for [pg.Pool](https://node-postgres.com/apis/pool). | | db.host | `string` | NILEDB_HOST | Base host for DB. Defaut is `db.thenile.dev` | | api | `object` | | Configuration object for API settings. | -| api.basePath | `string` | NILEDB_API | Base host for API for a specific region. Default is `api.thenile.dev`. | +| api.basePath | `string` | NILEDB_API | Base host for API for a specific region. | | api.cookieKey | `string` | | Key for API cookie. Default is `token`. | | api.token | `string` | NILEDB_TOKEN | Token for API authentication. Mostly for debugging. | | debug | `boolean` | | Flag for enabling debug logging. |