fix(react): support org oidc, update docs

packages/react/README.md

@@ -10,11 +10,10 @@ In the root of your react application, add a Nile provider. This will add a [Que
 
 ```typescript
 import { NileProvider } from '@theniledev/react';
-const API_URL = 'https://localhost:8080'; // location of nile instance
 
 function App() {
   return (
-    <NileProvider basePath={API_URL}>
+    <NileProvider>
       <div>Welcome to my great app</div>
     </NileProvider>
   );
@@ -49,7 +48,7 @@ function MyQueryProvider({ children }) {
 
 function App() {
   return (
-    <NileProvider basePath={API_URL} QueryProvider={MyQueryProvider}>
+    <NileProvider QueryProvider={MyQueryProvider}>
       <div>Welcome to my great app</div>
     </NileProvider>
   );
@@ -65,7 +64,7 @@ A custom theme can be given to the `NileProvider`, which will theme all componen
 ```typescript
 function App() {
   return (
-    <NileProvider basePath={API_URL} theme={theme}>
+    <NileProvider theme={theme}>
       <div>Welcome to my great app</div>
     </NileProvider>
   );
@@ -128,11 +127,9 @@ const customTheme = extendTheme({
   },
 });
 
-const API_URL = 'https://localhost:8080'; // location of nile instance
-
 function App() {
   return (
-    <NileProvider basePath={API_URL} theme={customTheme}>
+    <NileProvider theme={customTheme}>
       <div>Welcome to my great app</div>
     </NileProvider>
   );

packages/react/src/components/EntityForm/README.md

@@ -7,8 +7,6 @@ This provides a generic form for updating entities. By providing `fields`, a for
 ```typescript
 import { EntityForm, NileProvider, AttributeType } from '@theniledev/react';
 
-const API_URL = 'http://localhost:8080'; // location of the Nile endpoint
-
 const fields = [
   { name: 'dbName', label: 'Database name', required: true },
   { name: 'size', label: 'Size', type: AttributeType.Number },
@@ -26,7 +24,7 @@ const fields = [
 
 function App() {
   return (
-    <NileProvider basePath={API_URL}>
+    <NileProvider>
       <EntityForm
         entityType="myEntity"
         onSuccess={() => alert('success!')}

packages/react/src/components/GoogleLoginButton/README.md

@@ -0,0 +1,19 @@
+# GoogleLoginButton
+
+When SSO is configured on a workspace, this button can be added to a Nile app the handle SSO login. Optionally, if an `org` property is passed to the component, the user will be added to the organization and then redirected.
+
+## Usage
+
+```typescript
+import { GoogleLoginButton, NileProvider } from '@theniledev/react';
+
+function App() {
+  return (
+    <NileProvider>
+      <h1>🤩 My Great App🤩</h1>
+      <h2>Sign in</h2>
+      <GoogleLoginButton />
+    </NileProvider>
+  );
+}
+```

packages/react/src/components/GoogleLoginButton/index.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Button, Typography, Box, Stack } from '@mui/joy';
+
+import { useNile } from '../../context';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import GoogleLogo from './google.svg';
+
+type LogInGoogleProps = {
+  org?: string;
+};
+/**
+ * Basic component for a google login form
+ */
+export default function LogInGoogle(props: LogInGoogleProps) {
+  const nile = useNile();
+  const { org } = props;
+  const href = React.useMemo(() => {
+    if (org) {
+      return nile.organizations.oidc.GOOGLE(org);
+    }
+    return nile.workspaces.oidc.GOOGLE();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [org]);
+
+  return (
+    <Box
+      component="a"
+      href={href}
+      sx={{ display: 'flex', flex: 1, textDecoration: 'none' }}
+    >
+      <Box>
+        <Button sx={{ padding: 0, textTransform: 'initial', flex: 1 }}>
+          <Stack
+            direction="row"
+            sx={{
+              alignItems: 'center',
+              display: 'inline-flex',
+              color: 'rgb(255, 255, 255)',
+              boxShadow:
+                'rgb(0 0 0 / 24%) 0px 2px 2px 0px, rgb(0 0 0 / 24%) 0px 0px 1px 0px',
+              padding: '0px',
+              borderRadius: '4px',
+              border: '1px solid transparent',
+              fontSize: '14px',
+              fontWeight: '500',
+              backgroundColor: 'rgb(66, 133, 244)',
+              fontFamily: 'Roboto, sans-serif',
+              flex: 1,
+            }}
+          >
+            <Box
+              sx={{
+                padding: '11px',
+                background: 'rgb(255, 255, 255)',
+                borderTopLeftRadius: '4px',
+                borderBottomLeftRadius: '4px',
+                display: 'flex',
+                border: '1px solid rgb(66, 133, 244)',
+                borderRadius: '4px',
+              }}
+            >
+              <GoogleLogo />
+            </Box>
+            <Box
+              sx={{
+                padding: '10px',
+                borderTopRightRadius: '4px',
+                borderBottomRightRadius: '4px',
+                flex: 1,
+              }}
+            >
+              <Typography
+                sx={{ color: 'white' }}
+                fontWeight={700}
+                fontFamily="Roboto, sans-serif"
+                fontSize="14px"
+                height="20px"
+              >
+                Continue with Google
+              </Typography>
+            </Box>
+          </Stack>
+        </Button>
+      </Box>
+    </Box>
+  );
+}

packages/react/src/components/InstanceList/README.md

@@ -9,11 +9,9 @@ The default exports transparently handles request and loading state.
 ```typescript
 import { InstanceList, NileProvider } from '@theniledev/react';
 
-const API_URL = 'http://localhost:8080'; // location of the Nile endpoint
-
 function App() {
   return (
-    <NileProvider basePath={API_URL}>
+    <NileProvider>
       <InstanceList entity="myEntity" org="userOrg" />
     </NileProvider>
   );

packages/react/src/components/LoginForm/README.md

@@ -7,11 +7,9 @@ A basic email and password login form. After a user has been created or complete
 ```typescript
 import { LoginForm, NileProvider } from '@theniledev/react';
 
-const API_URL = 'http://localhost:8080'; // location of the Nile endpoint
-
 function App() {
   return (
-    <NileProvider basePath={API_URL}>
+    <NileProvider>
       <h1>🤩 My Great App🤩</h1>
       <h2>Sign in</h2>
       <LoginForm

packages/react/src/components/Metrics/MetricsBarChart.tsx

@@ -42,7 +42,7 @@ ChartJS.register(
  *   };
  *
  *   return (
- *     <NileProvider baseUrl="https://prod.thenile.dev" workspace="clustify">
+ *     <NileProvider workspace="clustify">
  *       <MetricsBarChart filter={filter} />
  *     </NileProvider>
  *   );

packages/react/src/components/Metrics/MetricsLineChart.tsx

@@ -42,7 +42,7 @@ ChartJS.register(
  *   };
  *
  *   return (
- *     <NileProvider baseUrl="https://prod.thenile.dev" workspace="clustify">
+ *     <NileProvider workspace="clustify">
  *       <MetricsLineChart filter={filter} />
  *     </NileProvider>
  *   );

packages/react/src/components/Metrics/README.md

@@ -21,7 +21,6 @@ The chart renders a single line. Provide either a `filter` object or an `aggrega
 ```typescript
 import { MetricsLineChart, NileProvider } from '@theniledev/react';
 
-const API_URL = 'http://localhost:8080'; // location of the Nile endpoint
 const WORKSPACE = 'myWorkspace'; // name of the workspace to use
 
 function App() {
@@ -39,7 +38,7 @@ function App() {
     aggregationType: 'sum',
   };
   return (
-    <NileProvider basePath={API_URL} workspace={WORKSPACE}>
+    <NileProvider workspace={WORKSPACE}>
       <h1>🤩Metrics the great🤩</h1>
       <h2>Requests</h2>
       <MetricsLineChart filter={filter} />
@@ -58,7 +57,6 @@ A timeseries chart renders a bar graph. Useful for viewing build-in metrics. Pro
 ```typescript
 import { MetricsBarChart, NileProvider } from '@theniledev/react';
 
-const API_URL = 'http://localhost:8080'; // location of the Nile endpoint
 const WORKSPACE = 'myWorkspace'; // name of the workspace to use
 
 function App() {
@@ -76,7 +74,7 @@ function App() {
     aggregationType: 'sum',
   };
   return (
-    <NileProvider basePath={API_URL} workspace={WORKSPACE}>
+    <NileProvider workspace={WORKSPACE}>
       <h1>🤩Metrics the great🤩</h1>
       <h2>Requests</h2>
       <MetricsBarChart filter={filter} />

packages/react/src/components/OrganizationForm/README.md

@@ -7,11 +7,9 @@ A form for a name of an organization.
 ```typescript
 import { OrganizationForm, NileProvider } from '@theniledev/react';
 
-const API_URL = 'http://localhost:8080'; // location of the Nile endpoint
-
 function App() {
   return (
-    <NileProvider basePath={API_URL}>
+    <NileProvider>
       <h1>🤩 My Great App🤩</h1>
       <h2>Create an organization</h2>
       <OrganizationForm

packages/react/src/components/SignUpForm/README.md

@@ -7,11 +7,9 @@ A basic email and password form, which is the first step on a user's journey in
 ```typescript
 import { SignUpForm, NileProvider } from '@theniledev/react';
 
-const API_URL = 'http://localhost:8080'; // location of the Nile endpoint
-
 function SignUp() {
   return (
-    <NileProvider basePath={API_URL}>
+    <NileProvider>
       <h1>🤩 My Great App🤩</h1>
       <h2>Sign in</h2>
       <SignUpForm

packages/react/src/index.ts

@@ -1,5 +1,5 @@
 export { default as LoginForm } from './components/LoginForm';
-export { default as GoogleLoginButton } from './components/LoginForm/GoogleLoginButton';
+export { default as GoogleLoginButton } from './components/GoogleLoginButton';
 export { default as SignUpForm } from './components/SignUpForm';
 export { default as InstanceList } from './components/InstanceList';
 export { default as EntityForm } from './components/EntityForm';

packages/react/stories/LoginForm.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, Story } from '@storybook/react';
 import Stack from '@mui/joy/Stack';
 
 import LoginForm from '../src/components/LoginForm';
-import GoogleLoginButton from '../src/components/LoginForm/GoogleLoginButton';
+import GoogleLoginButton from '../src/components/GoogleLoginButton';
 import { NileProvider } from '../src/context';
 
 const meta: Meta = {