feat(react): use appUrl and apiUrl

niledatabase · Apr 10, 2024 · ca59ff3 · ca59ff3
1 parent 506a3ce
commit ca59ff3
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 43 deletions.
diff --git 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 `<NileProvider />` 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
@@ -50,7 +50,7 @@ export function AlphaVersionWithOutProvider() {
   return (
     <CssVarsProvider>
       <div style={{ maxWidth: '20rem', margin: '0 auto' }}>
-        <GoogleLoginButton href="some href" />
+        <GoogleLoginButton />
       </div>
     </CssVarsProvider>
   );

diff --git 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 <NileProvider />');
+  }
+  const contextHref = `${apiUrl}/${LOGIN_PATH}`;
   const query = newTenantName
     ? '?newTenant=' + encodeURIComponent(newTenantName)
     : '';
-  const href = (props?.href ?? contextHref) + query;
+  const href = contextHref + query;
   return (
     <Box
       component="a"

diff --git a/packages/react/src/SSO/SSO.stories.tsx b/packages/react/src/SSO/SSO.stories.tsx
@@ -41,6 +41,15 @@ export function OktaSSO() {
         data-joy-color-scheme="dark"
       >
         <Okta
+          providers={[
+            {
+              provider: 'okta',
+              tenantId: '',
+              configUrl: '',
+              clientId: '',
+              redirectURI: '',
+            },
+          ]}
           onSuccess={() => {
             alert('success!');
           }}

diff --git 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<NileContext>(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 (
     <QueryProvider>
@@ -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
@@ -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
@@ -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(<GoogleSSOButton href={ref} />);
-    expect(screen.getByRole('link').getAttribute('href')).toEqual(ref);
-  });
   it('renders using the context', () => {
     render(
-      <NileProvider>
-        <GoogleSSOButton databaseId="databaseId" />
+      <NileProvider apiUrl="https://api.thenile.dev/databases/databaseId">
+        <GoogleSSOButton />
       </NileProvider>
     );
     screen.getByText('Continue with Google');

diff --git 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.                                         |