Merge pull request #1808 from nhost/changeset-release/main

chore: update versions

dashboard/.eslintrc.js

@@ -21,6 +21,7 @@ module.exports = {
       'error',
       { allowArrowFunctions: true, allowFunctions: true },
     ],
+    'import/prefer-default-export': 'off',
     'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
     curly: ['error', 'all'],
     'no-restricted-exports': 'off',

dashboard/.gitignore

@@ -53,4 +53,5 @@ tailwind.json
 /test-results/
 /playwright-report/
 /playwright/.cache/
-storageState.json
+storageState.json
+e2e/.auth/*

dashboard/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nhost/dashboard
 
+## 0.14.3
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.16
+
+## 0.14.2
+
+### Patch Changes
+
+- 3cb67300: fix(logs): don't break UI when clearing time picker
+- 7453bf3b: feat(projects): show project creator info
+- c166dad0: chore(tests): improve auth page tests
+- 6a290bb2: chore(deps): bump `@types/react` to 18.0.32
+
 ## 0.14.1
 
 ### Patch Changes

dashboard/e2e/auth/ban-user.test.ts

@@ -0,0 +1,50 @@
+import {
+  TEST_PROJECT_NAME,
+  TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { faker } from '@faker-js/faker';
+import test, { expect } from '@playwright/test';
+
+test('should be able to ban and unban a user', async ({ page }) => {
+  await page.goto('/');
+
+  await openProject({
+    page,
+    projectName: TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: TEST_PROJECT_SLUG,
+  });
+
+  await page
+    .getByRole('navigation', { name: /main navigation/i })
+    .getByRole('link', { name: /auth/i })
+    .click();
+
+  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+
+  const email = generateTestEmail();
+  const password = faker.internet.password();
+
+  await createUser({ page, email, password });
+
+  await page
+    .getByRole('button', { name: `View ${email}`, exact: true })
+    .click();
+  await page.getByRole('button', { name: /actions/i }).click();
+  await page.getByRole('menuitem', { name: /ban user/i }).click();
+
+  await expect(
+    page.getByText(/user has been banned successfully./i),
+  ).toBeVisible();
+  await expect(page.locator('form').getByText(/^banned$/i)).toBeVisible();
+
+  await page.getByRole('button', { name: /actions/i }).click();
+  await page.getByRole('menuitem', { name: /unban user/i }).click();
+
+  await expect(
+    page.getByText(/user has been unbanned successfully./i),
+  ).toBeVisible();
+  await expect(page.locator('form').getByText(/^banned$/i)).not.toBeVisible();
+});

dashboard/e2e/auth/create-user.test.ts

@@ -0,0 +1,65 @@
+import {
+  TEST_PROJECT_NAME,
+  TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { faker } from '@faker-js/faker';
+import type { Page } from '@playwright/test';
+import test, { expect } from '@playwright/test';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.beforeEach(async () => {
+  await page.goto('/');
+
+  await openProject({
+    page,
+    projectName: TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: TEST_PROJECT_SLUG,
+  });
+
+  await page
+    .getByRole('navigation', { name: /main navigation/i })
+    .getByRole('link', { name: /auth/i })
+    .click();
+
+  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('should create a user', async () => {
+  const email = generateTestEmail();
+  const password = faker.internet.password();
+
+  await createUser({ page, email, password });
+
+  await expect(
+    page.getByRole('button', { name: `View ${email}`, exact: true }),
+  ).toBeVisible();
+});
+
+test('should not be able to create a user with an existing email', async () => {
+  const email = generateTestEmail();
+  const password = faker.internet.password();
+
+  await createUser({ page, email, password });
+
+  await expect(
+    page.getByRole('button', { name: `View ${email}`, exact: true }),
+  ).toBeVisible();
+
+  await createUser({ page, email, password });
+
+  await expect(
+    page.getByRole('dialog').getByText(/email already in use/i),
+  ).toBeVisible();
+});

dashboard/e2e/auth/delete-user.test.ts

@@ -0,0 +1,96 @@
+import {
+  TEST_PROJECT_NAME,
+  TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { faker } from '@faker-js/faker';
+import type { Page } from '@playwright/test';
+import test, { expect } from '@playwright/test';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.beforeEach(async () => {
+  await page.goto('/');
+
+  await openProject({
+    page,
+    projectName: TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: TEST_PROJECT_SLUG,
+  });
+
+  await page
+    .getByRole('navigation', { name: /main navigation/i })
+    .getByRole('link', { name: /auth/i })
+    .click();
+
+  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('should be able to delete a user', async () => {
+  const email = generateTestEmail();
+  const password = faker.internet.password();
+
+  await createUser({ page, email, password });
+
+  await expect(
+    page.getByRole('button', { name: `View ${email}`, exact: true }),
+  ).toBeVisible();
+
+  await page
+    .getByRole('button', { name: `More options for ${email}`, exact: true })
+    .click();
+  await page.getByRole('menuitem', { name: /delete user/i }).click();
+
+  await expect(page.getByRole('dialog')).toBeVisible();
+  await expect(
+    page.getByRole('heading', { name: /delete user/i }),
+  ).toBeVisible();
+  await expect(
+    page.getByText(`Are you sure you want to delete the "${email}" user?`),
+  ).toBeVisible();
+
+  await page.getByRole('button', { name: /delete/i, exact: true }).click();
+
+  await expect(page.getByRole('dialog')).not.toBeVisible();
+
+  await expect(
+    page.getByRole('button', { name: `View ${email}`, exact: true }),
+  ).not.toBeVisible();
+});
+
+test('should be able to delete a user from the details page', async () => {
+  const email = generateTestEmail();
+  const password = faker.internet.password();
+
+  await createUser({ page, email, password });
+
+  await page
+    .getByRole('button', { name: `View ${email}`, exact: true })
+    .click();
+
+  await page.getByRole('button', { name: /actions/i }).click();
+  await page.getByRole('menuitem', { name: /delete user/i }).click();
+
+  await expect(page.getByRole('dialog')).toBeVisible();
+  await expect(
+    page.getByRole('heading', { name: /delete user/i }),
+  ).toBeVisible();
+  await expect(
+    page.getByText(`Are you sure you want to delete the "${email}" user?`),
+  ).toBeVisible();
+
+  await page.getByRole('button', { name: /delete/i, exact: true }).click();
+  await expect(
+    page.getByRole('button', { name: `View ${email}`, exact: true }),
+  ).not.toBeVisible();
+});

dashboard/e2e/auth/user-management.test.ts

@@ -1,93 +0,0 @@
-import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { openProject } from '@/e2e/utils';
-import type { Page } from '@playwright/test';
-import { expect, test } from '@playwright/test';
-
-let page: Page;
-
-test.describe.configure({ mode: 'serial' });
-
-test.beforeAll(async ({ browser }) => {
-  page = await browser.newPage();
-
-  await page.goto('/');
-
-  await openProject({
-    page,
-    projectName: TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
-  });
-
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /auth/i })
-    .click();
-
-  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
-});
-
-test.afterAll(async () => {
-  await page.close();
-});
-
-test('should create a user', async () => {
-  await expect(
-    page.getByRole('heading', { name: /there are no users yet/i }),
-  ).toBeVisible();
-
-  await page
-    .getByRole('button', { name: /create user/i })
-    .first()
-    .click();
-
-  await expect(page.getByRole('dialog')).toBeVisible();
-  await expect(
-    page.getByRole('heading', { name: /create user/i }),
-  ).toBeVisible();
-
-  await page
-    .getByRole('textbox', { name: /email/i })
-    .fill('testuser@example.com');
-  await page.getByRole('textbox', { name: /password/i }).fill('test.password');
-  await page.getByRole('button', { name: /create/i, exact: true }).click();
-
-  await expect(page.getByRole('dialog')).not.toBeVisible();
-
-  await expect(
-    page.getByRole('button', { name: /view testuser@example.com/i }),
-  ).toBeVisible();
-});
-
-test('should delete a user', async () => {
-  await expect(
-    page.getByRole('button', { name: /view testuser@example.com/i }),
-  ).toBeVisible();
-
-  await page
-    .getByRole('button', { name: /more options for testuser@example.com/i })
-    .click();
-  await page.getByRole('menuitem', { name: /delete user/i }).click();
-
-  await expect(page.getByRole('dialog')).toBeVisible();
-  await expect(
-    page.getByRole('heading', { name: /delete user/i }),
-  ).toBeVisible();
-  await expect(
-    page.getByText(
-      /are you sure you want to delete the "testuser@example.com" user?/i,
-    ),
-  ).toBeVisible();
-
-  await page.getByRole('button', { name: /delete/i, exact: true }).click();
-
-  await expect(page.getByRole('dialog')).not.toBeVisible();
-
-  await expect(
-    page.getByRole('heading', { name: /there are no users yet/i }),
-  ).toBeVisible();
-});

dashboard/e2e/auth/verify-user.test.ts

@@ -0,0 +1,103 @@
+import {
+  TEST_PROJECT_NAME,
+  TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { faker } from '@faker-js/faker';
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.beforeEach(async () => {
+  await page.goto('/');
+
+  await openProject({
+    page,
+    projectName: TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: TEST_PROJECT_SLUG,
+  });
+
+  await page
+    .getByRole('navigation', { name: /main navigation/i })
+    .getByRole('link', { name: /auth/i })
+    .click();
+
+  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('should be able to verify the email of a user', async () => {
+  const email = generateTestEmail();
+  const password = faker.internet.password();
+
+  await createUser({ page, email, password });
+
+  await page
+    .getByRole('button', { name: `View ${email}`, exact: true })
+    .click();
+
+  await expect(
+    page.getByRole('checkbox', { name: /email verified/i }),
+  ).not.toBeChecked();
+  await page.getByRole('checkbox', { name: /email verified/i }).check();
+
+  await page.getByRole('button', { name: /save/i }).click();
+
+  await expect(
+    page.getByText(/user settings have been updated successfully./i),
+  ).toBeVisible();
+
+  await page
+    .getByRole('button', { name: `View ${email}`, exact: true })
+    .click();
+
+  await expect(
+    page.getByRole('checkbox', { name: /email verified/i }),
+  ).toBeChecked();
+});
+
+test('should be able to verify the phone number of a user', async () => {
+  const email = generateTestEmail();
+  const password = faker.internet.password();
+  const phoneNumber = faker.phone.number();
+
+  await createUser({ page, email, password });
+
+  await page
+    .getByRole('button', { name: `View ${email}`, exact: true })
+    .click();
+
+  await expect(
+    page.getByRole('checkbox', { name: /phone number verified/i }),
+  ).toBeDisabled();
+
+  await page.getByRole('textbox', { name: /phone number/i }).fill(phoneNumber);
+  await page.getByRole('checkbox', { name: /phone number verified/i }).check();
+  await page.getByRole('button', { name: /save/i }).click();
+
+  await expect(
+    page.getByText(/user settings have been updated successfully./i),
+  ).toBeVisible();
+
+  await page
+    .getByRole('button', { name: `View ${email}`, exact: true })
+    .click();
+
+  await expect(
+    page.getByRole('textbox', { name: /phone number/i }),
+  ).toHaveValue(phoneNumber);
+
+  await expect(
+    page.getByRole('checkbox', { name: /phone number verified/i }),
+  ).toBeChecked();
+});

dashboard/e2e/overview/overview.test.ts

@@ -72,7 +72,7 @@ test("should show the project's name, the Upgrade button and the Settings button
   await expect(
     page.getByRole('heading', { name: TEST_PROJECT_NAME }),
   ).toBeVisible();
-  await expect(page.getByText(/free plan/i)).toBeVisible();
+  await expect(page.getByText(/starter/i)).toBeVisible();
   await expect(page.getByRole('button', { name: /upgrade/i })).toBeVisible();
   await expect(
     page.getByRole('main').getByRole('link', { name: /settings/i }),

dashboard/e2e/setup/auth.setup.ts

@@ -3,12 +3,9 @@ import {
   TEST_USER_EMAIL,
   TEST_USER_PASSWORD,
 } from '@/e2e/env';
-import { chromium } from '@playwright/test';
-
-async function globalSetup() {
-  const browser = await chromium.launch();
-  const page = await browser.newPage({ baseURL: TEST_DASHBOARD_URL });
+import { test as setup } from '@playwright/test';
 
+setup('authenticate user', async ({ page }) => {
   await page.goto('/');
   await page.waitForURL('/signin');
   await page.getByRole('link', { name: /continue with email/i }).click();
@@ -19,9 +16,5 @@ async function globalSetup() {
   await page.getByRole('button', { name: /sign in/i }).click();
 
   await page.waitForURL(TEST_DASHBOARD_URL);
-  await page.context().storageState({ path: 'storageState.json' });
-
-  await browser.close();
-}
-
-export default globalSetup;
+  await page.context().storageState({ path: 'e2e/.auth/user.json' });
+});

dashboard/e2e/utils.ts

@@ -1,3 +1,4 @@
+import { faker } from '@faker-js/faker';
 import type { Page } from '@playwright/test';
 
 /**
@@ -148,3 +149,41 @@ export async function deleteTable({
   await page.getByRole('menuitem', { name: /delete table/i }).click();
   await page.getByRole('button', { name: /delete/i }).click();
 }
+
+/**
+ * Creates a new user.
+ *
+ * @param page - The Playwright page object.
+ * @param email - The email of the user to create.
+ * @param password - The password of the user to create.
+ * @returns A promise that resolves when the user is created.
+ */
+export async function createUser({
+  page,
+  email,
+  password,
+}: {
+  page: Page;
+  email: string;
+  password: string;
+}) {
+  await page
+    .getByRole('button', { name: /create user/i })
+    .first()
+    .click();
+
+  await page.getByRole('textbox', { name: /email/i }).fill(email);
+  await page.getByRole('textbox', { name: /password/i }).fill(password);
+  await page.getByRole('button', { name: /create/i, exact: true }).click();
+}
+
+/**
+ * Generates a test email address with the given prefix (if provided).
+ *
+ * @param prefix - The prefix to use for the email address. (Default: `Nhost_Test_`)
+ */
+export function generateTestEmail(prefix: string = 'Nhost_Test_') {
+  const email = faker.internet.email();
+
+  return [prefix, email].join('');
+}

dashboard/global-teardown.ts

@@ -13,7 +13,7 @@ async function globalTeardown() {
 
   const context = await browser.newContext({
     baseURL: TEST_DASHBOARD_URL,
-    storageState: 'storageState.json',
+    storageState: 'e2e/.auth/user.json',
   });
 
   const page = await context.newPage();

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.14.1",
+  "version": "0.14.3",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -106,7 +106,7 @@
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^16.11.7",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "18.0.30",
+    "@types/react": "18.0.32",
     "@types/react-dom": "18.0.11",
     "@types/react-table": "^7.7.12",
     "@types/testing-library__jest-dom": "^5.14.5",

dashboard/playwright.config.ts

@@ -1,5 +1,4 @@
 import { defineConfig, devices } from '@playwright/test';
-
 import dotenv from 'dotenv';
 import path from 'path';
 
@@ -16,18 +15,24 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   workers: process.env.CI ? 1 : undefined,
   reporter: 'html',
-  globalSetup: require.resolve('./global-setup'),
   globalTeardown: require.resolve('./global-teardown'),
   use: {
     actionTimeout: 0,
     trace: 'on-first-retry',
-    storageState: 'storageState.json',
     baseURL: process.env.NHOST_TEST_DASHBOARD_URL,
   },
   projects: [
+    {
+      name: 'setup',
+      testMatch: ['**/setup/*.setup.ts'],
+    },
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: 'e2e/.auth/user.json',
+      },
+      dependencies: ['setup'],
     },
   ],
 });

dashboard/src/components/layout/ProjectLayout/ProjectLayout.tsx

@@ -9,6 +9,7 @@ import { useGetAllUserWorkspacesAndApplications } from '@/hooks/useGetAllUserWor
 import { useNavigationVisible } from '@/hooks/useNavigationVisible';
 import useNotFoundRedirect from '@/hooks/useNotFoundRedirect';
 import { useSetAppWorkspaceContextFromUserContext } from '@/hooks/useSetAppWorkspaceContextFromUserContext';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import type { BoxProps } from '@/ui/v2/Box';
 import Box from '@/ui/v2/Box';
 import { NextSeo } from 'next-seo';
@@ -30,9 +31,15 @@ function ProjectLayoutContent({
     ...mainContainerProps
   } = {},
 }: ProjectLayoutProps) {
-  const { currentApplication, currentWorkspace } =
+  // TODO: This will be removed once we migrated every occurrence to
+  // useCurrentWorkspaceAndProject()
+  const { currentWorkspace, currentApplication } =
     useCurrentWorkspaceAndApplication();
 
+  const { currentProject, loading, error } = useCurrentWorkspaceAndProject({
+    fetchPolicy: 'network-only',
+  });
+
   const router = useRouter();
   const shouldDisplayNav = useNavigationVisible();
   const isPlatform = useIsPlatform();
@@ -63,10 +70,14 @@ function ProjectLayoutContent({
     }
   }, [isPlatform, isRestrictedPath, router]);
 
-  if (!currentWorkspace || !currentApplication || isRestrictedPath) {
+  if (!currentWorkspace || !currentApplication || isRestrictedPath || loading) {
     return <LoadingScreen />;
   }
 
+  if (error) {
+    throw error;
+  }
+
   if (!isPlatform) {
     return (
       <>
@@ -104,7 +115,7 @@ function ProjectLayoutContent({
       >
         {children}
 
-        <NextSeo title={currentApplication.name} />
+        <NextSeo title={currentProject.name} />
       </Box>
     </>
   );

dashboard/src/components/logs/LogsTimePicker/LogsTimePicker.tsx

@@ -4,6 +4,7 @@ import { useDropdown } from '@/ui/v2/Dropdown';
 import type { InputProps } from '@/ui/v2/Input';
 import Input from '@/ui/v2/Input';
 import { format, set } from 'date-fns';
+import type { ChangeEvent } from 'react';
 
 export interface LogTimePickerProps extends InputProps {
   /**
@@ -22,21 +23,21 @@ function LogsTimePicker({
 }: any) {
   const { handleClose } = useDropdown();
 
-  const handleCancel = () => {
+  function handleCancel() {
     handleClose();
-  };
+  }
 
-  const handleApply = () => {
+  function handleApply() {
     onChange(selectedDate);
     handleClose();
-  };
+  }
 
-  const handleTimePicking = (event) => {
-    const [hours, minutes, seconds] = event.target.value.split(':');
+  function handleChange(event: ChangeEvent<HTMLInputElement>) {
+    const [hours, minutes, seconds] = event.target.value?.split(':') || [];
 
-    const hoursNumber = parseInt(hours, 10);
-    const minutesNumber = parseInt(minutes, 10);
-    const secondsNumber = parseInt(seconds, 10);
+    const hoursNumber = parseInt(hours || '0', 10);
+    const minutesNumber = parseInt(minutes || '0', 10);
+    const secondsNumber = parseInt(seconds || '0', 10);
 
     const newDate = set(new Date(selectedDate), {
       hours: hoursNumber,
@@ -51,7 +52,7 @@ function LogsTimePicker({
     }
 
     setSelectedDate(newDate);
-  };
+  }
 
   return (
     <div className="mx-auto grid grid-flow-row items-center self-center">
@@ -64,7 +65,7 @@ function LogsTimePicker({
             formControl: { className: 'grid grid-flow-col gap-x-3' },
             label: { sx: { fontSize: '14px' } },
           }}
-          onChange={handleTimePicking}
+          onChange={handleChange}
           type="time"
           label="Select Time"
           sx={{

dashboard/src/components/overview/OverviewProjectInfo/OverviewProjectInfo.tsx

@@ -1,11 +1,11 @@
 import InfoCard from '@/components/overview/InfoCard';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import Text from '@/ui/v2/Text';
 import Image from 'next/image';
 
 export default function OverviewProjectInfo() {
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const { region, subdomain } = currentApplication || {};
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const { region, subdomain } = currentProject || {};
   const isRegionAvailable =
     region?.awsName && region?.countryCode && region?.city;
 
@@ -13,14 +13,14 @@ export default function OverviewProjectInfo() {
     <div className="grid grid-flow-row content-start gap-6">
       <Text variant="h3">Project Info</Text>
 
-      {currentApplication && (
+      {currentProject && (
         <div className="grid grid-flow-row gap-3">
           <InfoCard
             title="Region"
             value={region?.awsName}
             customValue={
-              region.countryCode &&
-              region.city && (
+              region?.countryCode &&
+              region?.city && (
                 <div className="grid grid-flow-col items-center gap-1 self-center">
                   <Image
                     src={`/assets/flags/${region.countryCode}.svg`}
@@ -29,7 +29,7 @@ export default function OverviewProjectInfo() {
                     height={12}
                   />
 
-                  <Text className="text-sm font-medium truncate">
+                  <Text className="truncate text-sm font-medium">
                     {region.city} ({region.awsName})
                   </Text>
                 </div>

dashboard/src/components/overview/OverviewTopBar/OverviewTopBar.tsx

@@ -2,20 +2,19 @@ import { ChangePlanModal } from '@/components/applications/ChangePlanModal';
 import { useDialog } from '@/components/common/DialogProvider';
 import { useUI } from '@/context/UIContext';
 import useIsPlatform from '@/hooks/common/useIsPlatform';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import Box from '@/ui/v2/Box';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import Button from '@/ui/v2/Button';
 import Chip from '@/ui/v2/Chip';
 import CogIcon from '@/ui/v2/icons/CogIcon';
 import Text from '@/ui/v2/Text';
+import { formatDistanceToNowStrict, parseISO } from 'date-fns';
 import Image from 'next/image';
 import Link from 'next/link';
 
 export default function OverviewTopBar() {
   const isPlatform = useIsPlatform();
-  const { currentWorkspace, currentApplication } =
-    useCurrentWorkspaceAndApplication();
-  const isPro = !currentApplication?.plan?.isFree;
+  const { currentWorkspace, currentProject } = useCurrentWorkspaceAndProject();
+  const isPro = !currentProject?.plan?.isFree;
   const { openAlertDialog } = useDialog();
   const { maintenanceActive } = useUI();
 
@@ -44,63 +43,92 @@ export default function OverviewTopBar() {
 
   return (
     <div className="grid items-center gap-4 pb-5 md:grid-flow-col md:place-content-between md:py-5">
-      <div className="grid items-center gap-2 md:grid-flow-col">
+      <div className="grid items-center gap-4 md:grid-flow-col">
         <div className="grid grid-flow-col items-center justify-start gap-2">
           <div className="h-10 w-10 overflow-hidden rounded-lg">
             <Image
               src="/logos/new.svg"
               alt="Nhost Logo"
-              width={40}
-              height={40}
+              width={56}
+              height={56}
             />
           </div>
 
-          <Text variant="h2" component="h1">
-            {currentApplication.name}
-          </Text>
-        </div>
-
-        <Box className="grid grid-flow-col items-center justify-start gap-2">
-          {isPro ? (
-            <Chip
-              className="self-center font-medium"
-              size="small"
-              label="Pro Plan"
-              color="primary"
-            />
-          ) : (
-            <>
-              <Chip
-                className="self-center font-medium"
-                size="small"
-                label="Free Plan"
-                color="default"
-                variant="filled"
-              />
-              <Button
-                variant="borderless"
-                className="mr-2"
-                onClick={() => {
-                  openAlertDialog({
-                    title: 'Upgrade your plan.',
-                    payload: <ChangePlanModal />,
-                    props: {
-                      PaperProps: { className: 'p-0 max-w-xl w-full' },
-                      hidePrimaryAction: true,
-                      hideSecondaryAction: true,
-                      hideTitle: true,
-                    },
-                  });
-                }}
+          <div className="grid grid-flow-row">
+            <div className="grid grid-flow-row items-center justify-start md:grid-flow-col md:gap-3">
+              <Text
+                variant="h2"
+                component="h1"
+                className="grid grid-flow-col items-center gap-3"
               >
-                Upgrade
-              </Button>
-            </>
-          )}
-        </Box>
+                {currentProject.name}
+              </Text>
+
+              {currentProject.creator && (
+                <Text
+                  color="secondary"
+                  variant="subtitle2"
+                  className="md:hidden"
+                >
+                  Created by{' '}
+                  {currentProject.creator?.displayName ||
+                    currentProject.creator?.email}{' '}
+                  {formatDistanceToNowStrict(
+                    parseISO(currentProject.createdAt),
+                  )}{' '}
+                  ago
+                </Text>
+              )}
+
+              <div className="mt-1 inline-grid grid-flow-col items-center justify-start gap-2 md:mt-0">
+                <Chip
+                  size="small"
+                  label={isPro ? 'Pro' : 'Starter'}
+                  color={isPro ? 'primary' : 'default'}
+                />
+
+                {!isPro && (
+                  <Button
+                    variant="borderless"
+                    className="mr-2"
+                    onClick={() => {
+                      openAlertDialog({
+                        title: 'Upgrade your plan.',
+                        payload: <ChangePlanModal />,
+                        props: {
+                          PaperProps: { className: 'p-0 max-w-xl w-full' },
+                          hidePrimaryAction: true,
+                          hideSecondaryAction: true,
+                          hideTitle: true,
+                        },
+                      });
+                    }}
+                  >
+                    Upgrade
+                  </Button>
+                )}
+              </div>
+            </div>
+
+            {currentProject.creator && (
+              <Text
+                color="secondary"
+                variant="subtitle2"
+                className="hidden md:block"
+              >
+                Created by{' '}
+                {currentProject.creator?.displayName ||
+                  currentProject.creator?.email}{' '}
+                {formatDistanceToNowStrict(parseISO(currentProject.createdAt))}{' '}
+                ago
+              </Text>
+            )}
+          </div>
+        </div>
       </div>
+
       <Link
-        href={`/${currentWorkspace.slug}/${currentApplication.slug}/settings/general`}
+        href={`/${currentWorkspace.slug}/${currentProject.slug}/settings/general`}
         passHref
       >
         <Button

dashboard/src/components/ui/v2/ListItem/ListItemText.tsx

@@ -11,7 +11,7 @@ const StyledListItemText = styled(MaterialListItemText)(({ theme }) => ({
   display: 'grid',
   justifyContent: 'start',
   gridAutoFlow: 'row',
-  gap: theme.spacing(0.5),
+  gap: theme.spacing(0.25),
   fontSize: theme.typography.pxToRem(15),
   [`&.${listItemTextClasses.root}`]: {
     margin: 0,

dashboard/src/components/users/CreateUserForm/CreateUserForm.tsx

@@ -32,7 +32,6 @@ export const validationSchema = Yup.object({
     .required('This field is required.'),
   password: Yup.string()
     .label('Users Password')
-    .min(8, 'Password must be at least 8 characters long.')
     .required('This field is required.'),
 });
 
@@ -99,7 +98,7 @@ export default function CreateUserForm({
         }),
         {
           loading: 'Creating user...',
-          success: 'User created successfully.',
+          success: 'User has been created successfully.',
           error: getServerError(
             'An error occurred while trying to create the user.',
           ),

dashboard/src/components/users/EditUserForm/EditUserForm.tsx

@@ -19,6 +19,7 @@ import Option from '@/ui/v2/Option';
 import Text from '@/ui/v2/Text';
 import getReadableProviderName from '@/utils/common/getReadableProviderName';
 import { copy } from '@/utils/copy';
+import getServerError from '@/utils/settings/getServerError';
 import getUserRoles from '@/utils/settings/getUserRoles';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import {
@@ -168,11 +169,13 @@ export default function EditUserForm({
       {
         loading: shouldBan ? 'Banning user...' : 'Unbanning user...',
         success: shouldBan
-          ? 'User banned successfully'
-          : 'User unbanned successfully.',
-        error: shouldBan
-          ? 'An error occurred while trying to ban the user.'
-          : 'An error occurred while trying to unban the user.',
+          ? 'User has been banned successfully.'
+          : 'User has been unbanned successfully.',
+        error: getServerError(
+          shouldBan
+            ? 'An error occurred while trying to ban the user.'
+            : 'An error occurred while trying to unban the user.',
+        ),
       },
       getToastStyleProps(),
     );
@@ -213,7 +216,7 @@ export default function EditUserForm({
                     Actions
                   </Button>
                 </Dropdown.Trigger>
-                <Dropdown.Content menu disablePortal className="h-full w-full">
+                <Dropdown.Content menu className="h-full w-full">
                   <Dropdown.Item
                     className="font-medium"
                     sx={{ color: 'error.main' }}
@@ -316,6 +319,7 @@ export default function EditUserForm({
                     id="emailVerified"
                     name="emailVerified"
                     label="Verified"
+                    aria-label="Email Verified"
                   />
                 )
               }
@@ -354,6 +358,7 @@ export default function EditUserForm({
                     id="phoneNumberVerified"
                     name="phoneNumberVerified"
                     label="Verified"
+                    aria-label="Phone Number Verified"
                     disabled={!form.watch('phoneNumber')}
                   />
                 )

dashboard/src/components/users/UsersBody/UsersBody.tsx

@@ -151,7 +151,7 @@ export default function UsersBody({ users, onSubmit }: UsersBodyProps) {
       updateUserMutationPromise,
       {
         loading: `Updating user's settings...`,
-        success: 'User settings updated successfully.',
+        success: 'User settings have been updated successfully.',
         error: getServerError(
           `An error occurred while trying to update this user's settings.`,
         ),

dashboard/src/components/workspace/WorkspaceApps.tsx

@@ -1,21 +1,31 @@
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import Status, { StatusEnum } from '@/ui/Status';
+import RetryableErrorBoundary from '@/components/common/RetryableErrorBoundary';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
+import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
+import Chip from '@/ui/v2/Chip';
 import Divider from '@/ui/v2/Divider';
 import PlusCircleIcon from '@/ui/v2/icons/PlusCircleIcon';
 import List from '@/ui/v2/List';
 import { ListItem } from '@/ui/v2/ListItem';
 import Text from '@/ui/v2/Text';
+import { formatDistanceToNowStrict, parseISO } from 'date-fns';
 import Image from 'next/image';
 import NavLink from 'next/link';
 import { Fragment } from 'react';
 
 function AllWorkspaceApps() {
-  const { currentWorkspace } = useCurrentWorkspaceAndApplication();
-  const noApplications = currentWorkspace?.applications.length === 0;
+  const { currentWorkspace, loading, error } = useCurrentWorkspaceAndProject();
 
-  if (noApplications) {
+  if (loading) {
+    return <ActivityIndicator label="Loading projects..." delay={1000} />;
+  }
+
+  if (error) {
+    throw error;
+  }
+
+  if (currentWorkspace?.projects?.length === 0) {
     return (
       <Box className="flex flex-row border-y py-4">
         <Text className="text-xs" color="secondary">
@@ -29,25 +39,50 @@ function AllWorkspaceApps() {
     <List>
       <Divider component="li" />
 
-      {currentWorkspace?.applications.map((app) => (
-        <Fragment key={app.id}>
+      {currentWorkspace?.projects.map((project) => (
+        <Fragment key={project.id}>
           <ListItem.Root>
-            <NavLink href={`${currentWorkspace?.slug}/${app.slug}`} passHref>
-              <ListItem.Button className="grid grid-flow-col justify-between gap-2">
-                <div className="grid grid-flow-col items-center gap-2">
-                  <div className="h-8 w-8 overflow-hidden rounded-lg">
-                    <Image
-                      src="/logos/new.svg"
-                      alt="Nhost Logo"
-                      width={32}
-                      height={32}
-                    />
-                  </div>
+            <NavLink
+              href={`${currentWorkspace?.slug}/${project.slug}`}
+              passHref
+            >
+              <ListItem.Button className="grid grid-flow-col items-center justify-between gap-2">
+                <div className="grid grid-flow-col items-center justify-start gap-2">
+                  <ListItem.Avatar>
+                    <div className="h-8 w-8 overflow-hidden rounded-lg">
+                      <Image
+                        src="/logos/new.svg"
+                        alt="Nhost Logo"
+                        width={32}
+                        height={32}
+                      />
+                    </div>
+                  </ListItem.Avatar>
 
-                  <Text className="font-medium">{app.name}</Text>
+                  <ListItem.Text
+                    primary={project.name}
+                    secondary={
+                      project.creator ? (
+                        <span>
+                          {`Created by ${
+                            project.creator.displayName || project.creator.email
+                          } ${formatDistanceToNowStrict(
+                            parseISO(project.createdAt),
+                          )} ago`}
+                        </span>
+                      ) : undefined
+                    }
+                    secondaryTypographyProps={{
+                      className: 'text-xs',
+                    }}
+                  />
                 </div>
 
-                <Status status={StatusEnum.Plan}>{app.plan.name}</Status>
+                <Chip
+                  size="small"
+                  label={project.plan.isFree ? 'Starter' : 'Pro'}
+                  color={project.plan.isFree ? 'default' : 'primary'}
+                />
               </ListItem.Button>
             </NavLink>
           </ListItem.Root>
@@ -59,30 +94,35 @@ function AllWorkspaceApps() {
   );
 }
 export default function WorkspaceApps() {
-  const { currentWorkspace } = useCurrentWorkspaceAndApplication();
+  const { currentWorkspace, loading } = useCurrentWorkspaceAndProject();
 
   return (
     <div className="mt-9">
       <div className="mx-auto max-w-3xl font-display">
-        <div className="mb-4 flex flex-row place-content-between">
+        <div className="mb-4 grid grid-flow-col items-center justify-between gap-2">
           <Text className="text-lg font-medium">Projects</Text>
-          <NavLink
-            href={{
-              pathname: '/new',
-              query: { workspace: currentWorkspace.slug },
-            }}
-          >
-            <Button
-              variant="outlined"
-              color="secondary"
-              startIcon={<PlusCircleIcon />}
+
+          {!loading && (
+            <NavLink
+              href={{
+                pathname: '/new',
+                query: { workspace: currentWorkspace?.slug },
+              }}
             >
-              New Project
-            </Button>
-          </NavLink>
+              <Button
+                variant="outlined"
+                color="secondary"
+                startIcon={<PlusCircleIcon />}
+              >
+                New Project
+              </Button>
+            </NavLink>
+          )}
         </div>
 
-        <AllWorkspaceApps />
+        <RetryableErrorBoundary errorMessageProps={{ className: 'px-0' }}>
+          <AllWorkspaceApps />
+        </RetryableErrorBoundary>
       </div>
     </div>
   );

dashboard/src/gql/app/getWorkspaceAndProject.graphql

@@ -0,0 +1,26 @@
+fragment Workspace on workspaces {
+  id
+  name
+  slug
+  workspaceMembers {
+    id
+    user {
+      id
+      email
+      displayName
+    }
+    type
+  }
+  projects: apps {
+    ...Project
+  }
+}
+
+query GetWorkspaceAndProject($workspaceSlug: String!, $projectSlug: String) {
+  workspaces(where: { slug: { _eq: $workspaceSlug } }) {
+    ...Workspace
+  }
+  projects: apps(where: { slug: { _eq: $projectSlug } }) {
+    ...Project
+  }
+}

dashboard/src/gql/fragments/project.gql

@@ -0,0 +1,59 @@
+fragment Project on apps {
+  id
+  slug
+  name
+  repositoryProductionBranch
+  subdomain
+  isProvisioned
+  createdAt
+  desiredState
+  nhostBaseFolder
+  providersUpdated
+  config(resolve: true) {
+    hasura {
+      adminSecret
+    }
+  }
+  featureFlags {
+    description
+    id
+    name
+    value
+  }
+  appStates(order_by: { createdAt: desc }, limit: 1) {
+    id
+    appId
+    message
+    stateId
+    createdAt
+  }
+  region {
+    id
+    countryCode
+    awsName
+    city
+  }
+  plan {
+    id
+    name
+    isFree
+  }
+  githubRepository {
+    fullName
+  }
+  deployments(limit: 4, order_by: { deploymentEndedAt: desc }) {
+    id
+    commitSHA
+    commitMessage
+    commitUserName
+    deploymentStartedAt
+    deploymentEndedAt
+    commitUserAvatarUrl
+    deploymentStatus
+  }
+  creator {
+    id
+    email
+    displayName
+  }
+}

dashboard/src/gql/user/getOneUser.gql

@@ -1,58 +1,3 @@
-fragment Project on apps {
-  id
-  slug
-  name
-  repositoryProductionBranch
-  subdomain
-  isProvisioned
-  createdAt
-  desiredState
-  nhostBaseFolder
-  providersUpdated
-  config(resolve: true) {
-    hasura {
-      adminSecret
-    }
-  }
-  featureFlags {
-    description
-    id
-    name
-    value
-  }
-  appStates(order_by: { createdAt: desc }, limit: 1) {
-    id
-    appId
-    message
-    stateId
-    createdAt
-  }
-  region {
-    id
-    countryCode
-    awsName
-    city
-  }
-  plan {
-    id
-    name
-    isFree
-  }
-  githubRepository {
-    fullName
-  }
-  deployments(limit: 4, order_by: { deploymentEndedAt: desc }) {
-    id
-    commitSHA
-    commitMessage
-    commitUserName
-    deploymentStartedAt
-    deploymentEndedAt
-    commitUserAvatarUrl
-    deploymentStatus
-  }
-}
-
 query getOneUser($userId: uuid!) {
   user(id: $userId) {
     id

dashboard/src/hooks/useCheckProvisioning.tsx

@@ -39,6 +39,8 @@ export function useCheckProvisioning() {
 
   const memoizedUpdateCache = useCallback(updateOwnCache, [client]);
 
+  const currentApplicationId = currentApplication?.id;
+
   useEffect(() => {
     startPolling(2000);
   }, [startPolling]);
@@ -84,7 +86,7 @@ export function useCheckProvisioning() {
         createdAt: data.app.appStates[0].createdAt,
       });
       discordAnnounce(
-        `Application ${currentApplication.id} errored after provisioning: ${data.app.appStates[0].message}`,
+        `Application ${currentApplicationId} errored after provisioning: ${data.app.appStates[0].message}`,
       );
       stopPolling();
       memoizedUpdateCache();
@@ -93,7 +95,7 @@ export function useCheckProvisioning() {
     data,
     stopPolling,
     memoizedUpdateCache,
-    currentApplication.id,
+    currentApplicationId,
     currentApplicationState.state,
   ]);
 

dashboard/src/hooks/v2/useCurrentWorkspaceAndProject/index.ts

@@ -0,0 +1 @@
+export { default as useCurrentWorkspaceAndProject } from './useCurrentWorkspaceAndProject';

dashboard/src/hooks/v2/useCurrentWorkspaceAndProject/useCurrentWorkspaceAndProject.ts

@@ -0,0 +1,115 @@
+import useIsPlatform from '@/hooks/common/useIsPlatform';
+import type { Project, Workspace } from '@/types/application';
+import { ApplicationStatus } from '@/types/application';
+import { getHasuraAdminSecret } from '@/utils/env';
+import type { GetWorkspaceAndProjectQueryHookResult } from '@/utils/__generated__/graphql';
+import { useGetWorkspaceAndProjectQuery } from '@/utils/__generated__/graphql';
+import type { QueryHookOptions } from '@apollo/client';
+import { useRouter } from 'next/router';
+
+export interface UseCurrentWorkspaceAndProjectOptions {
+  /**
+   * The fetch policy to use.
+   *
+   * @default 'cache-first'
+   */
+  fetchPolicy?: QueryHookOptions['fetchPolicy'];
+}
+
+export interface UseCurrentWorkspaceAndProjectReturnType {
+  /**
+   * The current workspace.
+   */
+  currentWorkspace: Workspace;
+  /**
+   * The current project.
+   */
+  currentProject: Project;
+  /**
+   * Whether the query is loading.
+   */
+  loading?: GetWorkspaceAndProjectQueryHookResult['loading'];
+  /**
+   * The error if any.
+   */
+  error?: GetWorkspaceAndProjectQueryHookResult['error'];
+}
+
+export default function useCurrentWorkspaceAndProject(
+  options?: UseCurrentWorkspaceAndProjectOptions,
+): UseCurrentWorkspaceAndProjectReturnType {
+  const isPlatform = useIsPlatform();
+
+  const {
+    query: { workspaceSlug, appSlug },
+    isReady,
+  } = useRouter();
+
+  const { data, loading, error } = useGetWorkspaceAndProjectQuery({
+    variables: {
+      workspaceSlug: (workspaceSlug as string) || '',
+      projectSlug: (appSlug as string) || '',
+    },
+    fetchPolicy: options?.fetchPolicy || 'cache-first',
+    skip: !isPlatform || !isReady || !workspaceSlug,
+  });
+
+  if (!isPlatform) {
+    const localProject: Project = {
+      id: 'local',
+      slug: 'local',
+      name: 'local',
+      appStates: [
+        {
+          id: 'local',
+          appId: 'local',
+          stateId: ApplicationStatus.Live,
+          createdAt: new Date().toISOString(),
+        },
+      ],
+      deployments: [],
+      subdomain: 'local',
+      region: {
+        id: null,
+        countryCode: null,
+        city: null,
+        awsName: null,
+      },
+      isProvisioned: true,
+      createdAt: new Date().toISOString(),
+      desiredState: ApplicationStatus.Live,
+      featureFlags: [],
+      providersUpdated: true,
+      repositoryProductionBranch: null,
+      nhostBaseFolder: null,
+      plan: null,
+      config: {
+        hasura: {
+          adminSecret: getHasuraAdminSecret(),
+        },
+      },
+    };
+
+    return {
+      currentWorkspace: {
+        id: 'local',
+        slug: 'local',
+        name: 'local',
+        projects: [localProject],
+        workspaceMembers: [],
+      },
+      currentProject: localProject,
+      loading: false,
+    };
+  }
+
+  const [currentWorkspace] = data?.workspaces || [];
+  const [currentProject] = data?.projects || [];
+
+  return {
+    currentWorkspace,
+    currentProject,
+    loading: data ? false : loading,
+    error,
+  };
+}

dashboard/src/pages/[workspaceSlug]/[appSlug]/database/browser/[dataSourceSlug]/index.tsx

@@ -16,9 +16,7 @@ export default function DataBrowserDatabaseDetailsPage() {
         description={
           <span>
             Database{' '}
-            <InlineCode className="bg-gray-200 bg-opacity-80 px-1.5 text-sm">
-              {dataSourceSlug}
-            </InlineCode>{' '}
+            <InlineCode className="px-1.5 text-sm">{dataSourceSlug}</InlineCode>{' '}
             does not exist.
           </span>
         }

dashboard/src/pages/[workspaceSlug]/[appSlug]/logs/index.tsx

@@ -134,9 +134,5 @@ export default function LogsPage() {
 }
 
 LogsPage.getLayout = function getLayout(page: ReactElement) {
-  return (
-    <ProjectLayout mainContainerProps={{ className: 'bg-gray-50' }}>
-      {page}
-    </ProjectLayout>
-  );
+  return <ProjectLayout>{page}</ProjectLayout>;
 };

dashboard/src/types/application.ts

@@ -6,6 +6,7 @@ import type {
   PermissionVariableFragment,
   ProjectFragment,
   SecretFragment,
+  WorkspaceFragment,
 } from '@/utils/__generated__/graphql';
 
 /**
@@ -62,6 +63,7 @@ export type FeatureFlag = {
   value: string;
 };
 
+export type Workspace = WorkspaceFragment;
 export type Project = ProjectFragment;
 
 export interface PermissionVariable extends PermissionVariableFragment {

dashboard/src/utils/__generated__/graphql.ts

@@ -16563,6 +16563,16 @@ export type GetRemoteAppRolesQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type GetRemoteAppRolesQuery = { __typename?: 'query_root', authRoles: Array<{ __typename?: 'authRoles', role: string }> };
 
+export type WorkspaceFragment = { __typename?: 'workspaces', id: any, name: string, slug: string, workspaceMembers: Array<{ __typename?: 'workspaceMembers', id: any, type: string, user: { __typename?: 'users', id: any, email?: any | null, displayName: string } }>, projects: Array<{ __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, isProvisioned: boolean, createdAt: any, desiredState: number, nhostBaseFolder: string, providersUpdated?: boolean | null, config?: { __typename?: 'ConfigConfig', hasura: { __typename?: 'ConfigHasura', adminSecret: string } } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, isFree: boolean }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }>, creator?: { __typename?: 'users', id: any, email?: any | null, displayName: string } | null }> };
+
+export type GetWorkspaceAndProjectQueryVariables = Exact<{
+  workspaceSlug: Scalars['String'];
+  projectSlug?: InputMaybe<Scalars['String']>;
+}>;
+
+
+export type GetWorkspaceAndProjectQuery = { __typename?: 'query_root', workspaces: Array<{ __typename?: 'workspaces', id: any, name: string, slug: string, workspaceMembers: Array<{ __typename?: 'workspaceMembers', id: any, type: string, user: { __typename?: 'users', id: any, email?: any | null, displayName: string } }>, projects: Array<{ __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, isProvisioned: boolean, createdAt: any, desiredState: number, nhostBaseFolder: string, providersUpdated?: boolean | null, config?: { __typename?: 'ConfigConfig', hasura: { __typename?: 'ConfigHasura', adminSecret: string } } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, isFree: boolean }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }>, creator?: { __typename?: 'users', id: any, email?: any | null, displayName: string } | null }> }>, projects: Array<{ __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, isProvisioned: boolean, createdAt: any, desiredState: number, nhostBaseFolder: string, providersUpdated?: boolean | null, config?: { __typename?: 'ConfigConfig', hasura: { __typename?: 'ConfigHasura', adminSecret: string } } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, isFree: boolean }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }>, creator?: { __typename?: 'users', id: any, email?: any | null, displayName: string } | null }> };
+
 export type InsertApplicationMutationVariables = Exact<{
   app: Apps_Insert_Input;
 }>;
@@ -16790,6 +16800,8 @@ export type GetFilesAggregateQueryVariables = Exact<{
 
 export type GetFilesAggregateQuery = { __typename?: 'query_root', filesAggregate: { __typename?: 'files_aggregate', aggregate?: { __typename?: 'files_aggregate_fields', count: number } | null } };
 
+export type ProjectFragment = { __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, isProvisioned: boolean, createdAt: any, desiredState: number, nhostBaseFolder: string, providersUpdated?: boolean | null, config?: { __typename?: 'ConfigConfig', hasura: { __typename?: 'ConfigHasura', adminSecret: string } } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, isFree: boolean }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }>, creator?: { __typename?: 'users', id: any, email?: any | null, displayName: string } | null };
+
 export type GithubRepositoryFragment = { __typename?: 'githubRepositories', id: any, name: string, fullName: string, private: boolean, githubAppInstallation: { __typename?: 'githubAppInstallations', id: any, accountLogin?: string | null, accountType?: string | null, accountAvatarUrl?: string | null } };
 
 export type GetGithubRepositoriesQueryVariables = Exact<{ [key: string]: never; }>;
@@ -17014,14 +17026,12 @@ export type GetFreeAndActiveProjectsQueryVariables = Exact<{
 
 export type GetFreeAndActiveProjectsQuery = { __typename?: 'query_root', freeAndActiveProjects: Array<{ __typename?: 'apps', id: any }> };
 
-export type ProjectFragment = { __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, isProvisioned: boolean, createdAt: any, desiredState: number, nhostBaseFolder: string, providersUpdated?: boolean | null, config?: { __typename?: 'ConfigConfig', hasura: { __typename?: 'ConfigHasura', adminSecret: string } } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, isFree: boolean }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }> };
-
 export type GetOneUserQueryVariables = Exact<{
   userId: Scalars['uuid'];
 }>;
 
 
-export type GetOneUserQuery = { __typename?: 'query_root', user?: { __typename?: 'users', id: any, displayName: string, avatarUrl: string, workspaceMembers: Array<{ __typename?: 'workspaceMembers', id: any, userId: any, workspaceId: any, type: string, workspace: { __typename?: 'workspaces', creatorUserId?: any | null, id: any, slug: string, name: string, apps: Array<{ __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, isProvisioned: boolean, createdAt: any, desiredState: number, nhostBaseFolder: string, providersUpdated?: boolean | null, config?: { __typename?: 'ConfigConfig', hasura: { __typename?: 'ConfigHasura', adminSecret: string } } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, isFree: boolean }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }> }> } }> } | null };
+export type GetOneUserQuery = { __typename?: 'query_root', user?: { __typename?: 'users', id: any, displayName: string, avatarUrl: string, workspaceMembers: Array<{ __typename?: 'workspaceMembers', id: any, userId: any, workspaceId: any, type: string, workspace: { __typename?: 'workspaces', creatorUserId?: any | null, id: any, slug: string, name: string, apps: Array<{ __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, isProvisioned: boolean, createdAt: any, desiredState: number, nhostBaseFolder: string, providersUpdated?: boolean | null, config?: { __typename?: 'ConfigConfig', hasura: { __typename?: 'ConfigHasura', adminSecret: string } } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, isFree: boolean }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }>, creator?: { __typename?: 'users', id: any, email?: any | null, displayName: string } | null }> } }> } | null };
 
 export type GetUserAllWorkspacesQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -17223,6 +17233,86 @@ export const GetAppByWorkspaceAndNameFragmentDoc = gql`
   }
 }
     `;
+export const ProjectFragmentDoc = gql`
+    fragment Project on apps {
+  id
+  slug
+  name
+  repositoryProductionBranch
+  subdomain
+  isProvisioned
+  createdAt
+  desiredState
+  nhostBaseFolder
+  providersUpdated
+  config(resolve: true) {
+    hasura {
+      adminSecret
+    }
+  }
+  featureFlags {
+    description
+    id
+    name
+    value
+  }
+  appStates(order_by: {createdAt: desc}, limit: 1) {
+    id
+    appId
+    message
+    stateId
+    createdAt
+  }
+  region {
+    id
+    countryCode
+    awsName
+    city
+  }
+  plan {
+    id
+    name
+    isFree
+  }
+  githubRepository {
+    fullName
+  }
+  deployments(limit: 4, order_by: {deploymentEndedAt: desc}) {
+    id
+    commitSHA
+    commitMessage
+    commitUserName
+    deploymentStartedAt
+    deploymentEndedAt
+    commitUserAvatarUrl
+    deploymentStatus
+  }
+  creator {
+    id
+    email
+    displayName
+  }
+}
+    `;
+export const WorkspaceFragmentDoc = gql`
+    fragment Workspace on workspaces {
+  id
+  name
+  slug
+  workspaceMembers {
+    id
+    user {
+      id
+      email
+      displayName
+    }
+    type
+  }
+  projects: apps {
+    ...Project
+  }
+}
+    ${ProjectFragmentDoc}`;
 export const PrefetchNewAppRegionsFragmentDoc = gql`
     fragment PrefetchNewAppRegions on regions {
   id
@@ -17391,62 +17481,6 @@ export const RemoteAppGetUsersFragmentDoc = gql`
   disabled
 }
     `;
-export const ProjectFragmentDoc = gql`
-    fragment Project on apps {
-  id
-  slug
-  name
-  repositoryProductionBranch
-  subdomain
-  isProvisioned
-  createdAt
-  desiredState
-  nhostBaseFolder
-  providersUpdated
-  config(resolve: true) {
-    hasura {
-      adminSecret
-    }
-  }
-  featureFlags {
-    description
-    id
-    name
-    value
-  }
-  appStates(order_by: {createdAt: desc}, limit: 1) {
-    id
-    appId
-    message
-    stateId
-    createdAt
-  }
-  region {
-    id
-    countryCode
-    awsName
-    city
-  }
-  plan {
-    id
-    name
-    isFree
-  }
-  githubRepository {
-    fullName
-  }
-  deployments(limit: 4, order_by: {deploymentEndedAt: desc}) {
-    id
-    commitSHA
-    commitMessage
-    commitUserName
-    deploymentStartedAt
-    deploymentEndedAt
-    commitUserAvatarUrl
-    deploymentStatus
-  }
-}
-    `;
 export const GetWorkspaceMembersWorkspaceMemberFragmentDoc = gql`
     fragment getWorkspaceMembersWorkspaceMember on workspaceMembers {
   id
@@ -17919,6 +17953,49 @@ export type GetRemoteAppRolesQueryResult = Apollo.QueryResult<GetRemoteAppRolesQ
 export function refetchGetRemoteAppRolesQuery(variables?: GetRemoteAppRolesQueryVariables) {
       return { query: GetRemoteAppRolesDocument, variables: variables }
     }
+export const GetWorkspaceAndProjectDocument = gql`
+    query GetWorkspaceAndProject($workspaceSlug: String!, $projectSlug: String) {
+  workspaces(where: {slug: {_eq: $workspaceSlug}}) {
+    ...Workspace
+  }
+  projects: apps(where: {slug: {_eq: $projectSlug}}) {
+    ...Project
+  }
+}
+    ${WorkspaceFragmentDoc}
+${ProjectFragmentDoc}`;
+
+/**
+ * __useGetWorkspaceAndProjectQuery__
+ *
+ * To run a query within a React component, call `useGetWorkspaceAndProjectQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetWorkspaceAndProjectQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetWorkspaceAndProjectQuery({
+ *   variables: {
+ *      workspaceSlug: // value for 'workspaceSlug'
+ *      projectSlug: // value for 'projectSlug'
+ *   },
+ * });
+ */
+export function useGetWorkspaceAndProjectQuery(baseOptions: Apollo.QueryHookOptions<GetWorkspaceAndProjectQuery, GetWorkspaceAndProjectQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetWorkspaceAndProjectQuery, GetWorkspaceAndProjectQueryVariables>(GetWorkspaceAndProjectDocument, options);
+      }
+export function useGetWorkspaceAndProjectLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetWorkspaceAndProjectQuery, GetWorkspaceAndProjectQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetWorkspaceAndProjectQuery, GetWorkspaceAndProjectQueryVariables>(GetWorkspaceAndProjectDocument, options);
+        }
+export type GetWorkspaceAndProjectQueryHookResult = ReturnType<typeof useGetWorkspaceAndProjectQuery>;
+export type GetWorkspaceAndProjectLazyQueryHookResult = ReturnType<typeof useGetWorkspaceAndProjectLazyQuery>;
+export type GetWorkspaceAndProjectQueryResult = Apollo.QueryResult<GetWorkspaceAndProjectQuery, GetWorkspaceAndProjectQueryVariables>;
+export function refetchGetWorkspaceAndProjectQuery(variables: GetWorkspaceAndProjectQueryVariables) {
+      return { query: GetWorkspaceAndProjectDocument, variables: variables }
+    }
 export const InsertApplicationDocument = gql`
     mutation insertApplication($app: apps_insert_input!) {
   insertApp(object: $app) {

docs/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/docs
 
+## 0.0.15
+
+### Patch Changes
+
+- 0795d1c6: chore: add link to event triggers on the serverless functions page
+
 ## 0.0.14
 
 ### Patch Changes

docs/docs/serverless-functions.mdx

@@ -84,6 +84,8 @@ older (`functions/_utils/<utils-files>.js`).
 
 [Environment variables](/platform/environment-variables) are available inside your Serverless Functions. Both in production and when running Nhost locally using the [Nhost CLI](/cli).
 
+The same [environment variables that are used to configure event triggers](https://docs.nhost.io/database/event-triggers#format) can be used to authenticate regular serverless functions.
+
 ## Examples
 
 We have multiple examples of Serverless Functions in our [Nhost repository](https://github.com/nhost/nhost/tree/main/examples/serverless-functions/functions).

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/docs",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",

integrations/apollo/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nhost/apollo
 
+## 5.2.1
+
+### Patch Changes
+
+- 0d73e87a: fix(ws): don't open unnecessary connections
+- 0d73e87a: fix(ws): increase retry attempts and implement exponential backoff
+
 ## 5.2.0
 
 ### Patch Changes

integrations/apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/apollo",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "description": "Nhost Apollo Client library",
   "license": "MIT",
   "keywords": [

integrations/apollo/src/index.ts

@@ -72,7 +72,22 @@ export const createApolloClient = ({
     ? createRestartableClient({
         url: uri.startsWith('https') ? uri.replace(/^https/, 'wss') : uri.replace(/^http/, 'ws'),
         shouldRetry: () => true,
-        retryAttempts: 10,
+        retryAttempts: 100,
+        retryWait: async (retries) => {
+          // start with 1 second delay
+          const baseDelay = 1000
+
+          // max 3 seconds of jitter
+          const maxJitter = 3000
+
+          // exponential backoff with jitter
+          return new Promise((resolve) =>
+            setTimeout(
+              resolve,
+              baseDelay * Math.pow(2, retries) + Math.floor(Math.random() * maxJitter)
+            )
+          )
+        },
         connectionParams: () => ({
           headers: {
             ...headers,
@@ -141,7 +156,7 @@ export const createApolloClient = ({
       // update token
       token = state.context.accessToken.value
 
-      if (!isBrowser) {
+      if (!isBrowser || !wsClient?.isOpen()) {
         return
       }
 

integrations/apollo/src/ws.ts

@@ -3,6 +3,7 @@ import { Client, ClientOptions, createClient } from 'graphql-ws'
 
 export interface RestartableClient extends Client {
   restart(): void
+  isOpen(): boolean
 }
 
 export function createRestartableClient(options: ClientOptions): RestartableClient {
@@ -10,6 +11,8 @@ export function createRestartableClient(options: ClientOptions): RestartableClie
   let restart = () => {
     restartRequested = true
   }
+
+  let connectionOpen = false
   let socket: WebSocket
   let timedOut: NodeJS.Timeout
 
@@ -46,6 +49,7 @@ export function createRestartableClient(options: ClientOptions): RestartableClie
       opened: (originalSocket) => {
         socket = originalSocket as WebSocket
         options.on?.opened?.(socket)
+        connectionOpen = true
 
         restart = () => {
           if (socket.readyState === WebSocket.OPEN) {
@@ -63,12 +67,17 @@ export function createRestartableClient(options: ClientOptions): RestartableClie
           restartRequested = false
           restart()
         }
+      },
+      closed: (event) => {
+        options?.on?.closed?.(event)
+        connectionOpen = false
       }
     }
   })
 
   return {
     ...client,
-    restart: () => restart()
+    restart: () => restart(),
+    isOpen: () => connectionOpen
   }
 }

integrations/react-apollo/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nhost/react-apollo
 
+## 5.0.16
+
+### Patch Changes
+
+- Updated dependencies [0d73e87a]
+- Updated dependencies [0d73e87a]
+  - @nhost/apollo@5.2.1
+
 ## 5.0.15
 
 ### Patch Changes

integrations/react-apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-apollo",
-  "version": "5.0.15",
+  "version": "5.0.16",
   "description": "Nhost React Apollo client",
   "license": "MIT",
   "keywords": [

integrations/react-urql/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/react-urql
 
+## 2.0.14
+
+### Patch Changes
+
+- 09cf5d4b: chore(deps): bump `urql` to v4
+
 ## 2.0.13
 
 ### Patch Changes

integrations/react-urql/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-urql",
-  "version": "2.0.13",
+  "version": "2.0.14",
   "description": "Nhost React URQL client",
   "license": "MIT",
   "keywords": [
@@ -75,6 +75,6 @@
     "graphql": "16.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "urql": "^3.0.3"
+    "urql": "^4.0.0"
   }
 }

pnpm-lock.yaml

@@ -126,7 +126,7 @@ importers:
       '@types/lodash.debounce': ^4.0.7
       '@types/node': ^16.11.7
       '@types/pluralize': ^0.0.29
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
       '@types/react-dom': 18.0.11
       '@types/react-table': ^7.7.12
       '@types/testing-library__jest-dom': ^5.14.5
@@ -209,19 +209,19 @@ importers:
       '@apollo/client': 3.7.10_xe4twbeoqswbn2uas4ov5melbq
       '@codemirror/language': 6.3.1
       '@emotion/cache': 11.10.5
-      '@emotion/react': 11.10.5_lzn74h6sajlbfmrxbix4okzmpi
+      '@emotion/react': 11.10.5_4axclqp2w4dacbol6jjujtzxpe
       '@emotion/server': 11.4.0
-      '@emotion/styled': 11.10.5_4jddrkedmmycnrpdaatf3tfj3a
+      '@emotion/styled': 11.10.5_bfhdvbzfic63ikh7ivls5gocd4
       '@fontsource/inter': 4.5.14
       '@fontsource/roboto-mono': 4.5.8
-      '@graphiql/react': 0.17.0_7bopqva7rdmx76dydi5rwteyri
+      '@graphiql/react': 0.17.0_jafotdrcagalnfovtj2hdjrrzu
       '@graphiql/toolkit': 0.8.2_7fbl5omhlrpwpn5f5culy6mafe
       '@headlessui/react': 1.7.4_biqbaboplfbrettd7655fr4n2y
       '@heroicons/react': 1.0.6_react@18.2.0
       '@hookform/resolvers': 3.0.0_react-hook-form@7.42.1
-      '@mui/base': 5.0.0-alpha.106_4qaawyptjkcgzqorucvhm3koke
-      '@mui/material': 5.10.14_ogvxv7hqfgg53da5eqs77qdqde
-      '@mui/system': 5.10.14_yunkbz2mvya45l5iqzwl5ypfyq
+      '@mui/base': 5.0.0-alpha.106_6hfup3cnntiu7o7txcf7sadj7u
+      '@mui/material': 5.10.14_4j2ofb32vdfzknkna6ykhtr3a4
+      '@mui/system': 5.10.14_c3ugyn66sbetme4rmxiiuchocm
       '@mui/x-date-pickers': 5.0.8_p6r6qp7wldbu5ojdsmv4yukx2q
       '@nhost/nextjs': link:../packages/nextjs
       '@nhost/react-apollo': link:../integrations/react-apollo
@@ -237,7 +237,7 @@ importers:
       clsx: 1.2.1
       date-fns: 2.29.3
       generate-password: 1.7.0
-      graphiql: 2.4.0_7bopqva7rdmx76dydi5rwteyri
+      graphiql: 2.4.0_jafotdrcagalnfovtj2hdjrrzu
       graphql: 16.6.0
       graphql-request: 4.3.0_rjjjs2nwgns3bcvnnqb5eu5nry
       graphql-tag: 2.12.6_graphql@16.6.0
@@ -279,7 +279,7 @@ importers:
       '@playwright/test': 1.31.2
       '@storybook/addon-actions': 6.5.14_biqbaboplfbrettd7655fr4n2y
       '@storybook/addon-essentials': 6.5.14_2d2r642xwmvaauuvastzobrbwe
-      '@storybook/addon-interactions': 6.5.14_hvoc3iuqa2ltaiia3y4i66hvou
+      '@storybook/addon-interactions': 6.5.14_xrprhm3rjsj4pifo74vlqwj5ne
       '@storybook/addon-links': 6.5.14_biqbaboplfbrettd7655fr4n2y
       '@storybook/addon-postcss': 2.0.0_webpack@5.75.0
       '@storybook/builder-webpack5': 6.5.14_uddrmzyyotmol3pts5dayjifei
@@ -293,7 +293,7 @@ importers:
       '@types/lodash.debounce': 4.0.7
       '@types/node': 16.18.11
       '@types/pluralize': 0.0.29
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
       '@types/react-dom': 18.0.11
       '@types/react-table': 7.7.12
       '@types/testing-library__jest-dom': 5.14.5
@@ -879,7 +879,7 @@ importers:
       graphql-ws: ^5.11.2
       react: ^18.2.0
       react-dom: ^18.2.0
-      urql: ^3.0.3
+      urql: ^4.0.0
     dependencies:
       '@urql/devtools': 2.0.3_graphql@16.6.0
       '@urql/exchange-refocus': 1.0.0_graphql@16.6.0
@@ -890,7 +890,7 @@ importers:
       graphql: 16.6.0
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
-      urql: 3.0.3_onqnqwb3ubg5opvemcqf7c2qhy
+      urql: 4.0.0_onqnqwb3ubg5opvemcqf7c2qhy
 
   integrations/stripe-graphql-js:
     specifiers:
@@ -1120,6 +1120,17 @@ importers:
 
 packages:
 
+  /@0no-co/graphql.web/1.0.0_graphql@16.6.0:
+    resolution: {integrity: sha512-JBq2pWyDchE1vVjj/+c4dzZ8stbpew4RrzpZ3vYdn1WJFGHfYg6YIX1fDdMKtSXJJM9FUlsoDOxemr9WMM2p+A==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+    peerDependenciesMeta:
+      graphql:
+        optional: true
+    dependencies:
+      graphql: 16.6.0
+    dev: true
+
   /@adobe/css-tools/4.0.1:
     resolution: {integrity: sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==}
     dev: true
@@ -4543,7 +4554,7 @@ packages:
       '@date-io/core': 2.16.0
     dev: false
 
-  /@design-systems/utils/2.12.0_4qaawyptjkcgzqorucvhm3koke:
+  /@design-systems/utils/2.12.0_6hfup3cnntiu7o7txcf7sadj7u:
     resolution: {integrity: sha512-Y/d2Zzr+JJfN6u1gbuBUb1ufBuLMJJRZQk+dRmw8GaTpqKx5uf7cGUYGTwN02dIb3I+Tf+cW8jcGBTRiFxdYFg==}
     peerDependencies:
       '@types/react': '*'
@@ -4551,7 +4562,7 @@ packages:
       react-dom: '>= 16.8.6'
     dependencies:
       '@babel/runtime': 7.20.1
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
       clsx: 1.2.1
       focus-lock: 0.8.1
       react: 18.2.0
@@ -4559,15 +4570,15 @@ packages:
       react-merge-refs: 1.1.0
     dev: true
 
-  /@devtools-ds/object-inspector/1.2.0_4qaawyptjkcgzqorucvhm3koke:
+  /@devtools-ds/object-inspector/1.2.0_6hfup3cnntiu7o7txcf7sadj7u:
     resolution: {integrity: sha512-VztcwqVwScSvYdvJVZBJYsVO/2Pew3JPpFV3T9fuCHQLlHcLYOV3aU/kBS2ScuE2O1JN0ZbobLqFLa3vQF54Fw==}
     peerDependencies:
       react: '>= 16.8.6'
     dependencies:
       '@babel/runtime': 7.7.2
       '@devtools-ds/object-parser': 1.2.0
-      '@devtools-ds/themes': 1.2.0_4qaawyptjkcgzqorucvhm3koke
-      '@devtools-ds/tree': 1.2.0_4qaawyptjkcgzqorucvhm3koke
+      '@devtools-ds/themes': 1.2.0_6hfup3cnntiu7o7txcf7sadj7u
+      '@devtools-ds/tree': 1.2.0_6hfup3cnntiu7o7txcf7sadj7u
       clsx: 1.1.0
       react: 18.2.0
     transitivePeerDependencies:
@@ -4581,13 +4592,13 @@ packages:
       '@babel/runtime': 7.5.5
     dev: true
 
-  /@devtools-ds/themes/1.2.0_4qaawyptjkcgzqorucvhm3koke:
+  /@devtools-ds/themes/1.2.0_6hfup3cnntiu7o7txcf7sadj7u:
     resolution: {integrity: sha512-LimEITorE6yWZWWuMc6OiBfLQgPrQqWbyMEmfRUDPa3PHXoAY4SpDxczfg31fgyRDUNWnZhjaJH5bBbu8VEbIw==}
     peerDependencies:
       react: '>= 16.8.6'
     dependencies:
       '@babel/runtime': 7.5.5
-      '@design-systems/utils': 2.12.0_4qaawyptjkcgzqorucvhm3koke
+      '@design-systems/utils': 2.12.0_6hfup3cnntiu7o7txcf7sadj7u
       clsx: 1.1.0
       react: 18.2.0
     transitivePeerDependencies:
@@ -4595,13 +4606,13 @@ packages:
       - react-dom
     dev: true
 
-  /@devtools-ds/tree/1.2.0_4qaawyptjkcgzqorucvhm3koke:
+  /@devtools-ds/tree/1.2.0_6hfup3cnntiu7o7txcf7sadj7u:
     resolution: {integrity: sha512-hC4g4ocuo2eg7jsnzKdauxH0sDQiPW3KSM2+uK3kRgcmr9PzpBD5Kob+Y/WFSVKswFleftOGKL4BQLuRv0sPxA==}
     peerDependencies:
       react: '>= 16.8.6'
     dependencies:
       '@babel/runtime': 7.7.2
-      '@devtools-ds/themes': 1.2.0_4qaawyptjkcgzqorucvhm3koke
+      '@devtools-ds/themes': 1.2.0_6hfup3cnntiu7o7txcf7sadj7u
       clsx: 1.1.0
       react: 18.2.0
     transitivePeerDependencies:
@@ -4939,7 +4950,7 @@ packages:
       '@docusaurus/react-loadable': 5.5.2_react@18.2.0
       '@docusaurus/types': 2.4.0_biqbaboplfbrettd7655fr4n2y
       '@types/history': 4.7.11
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
       '@types/react-router-config': 5.0.6
       '@types/react-router-dom': 5.3.3
       react: 18.2.0
@@ -5285,7 +5296,7 @@ packages:
     peerDependencies:
       react: '*'
     dependencies:
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
       prop-types: 15.8.1
       react: 18.2.0
 
@@ -5356,7 +5367,7 @@ packages:
       '@docusaurus/utils': 2.4.0_@docusaurus+types@2.4.0
       '@docusaurus/utils-common': 2.4.0_@docusaurus+types@2.4.0
       '@types/history': 4.7.11
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
       '@types/react-router-config': 5.0.6
       clsx: 1.2.1
       parse-numeric-range: 1.3.0
@@ -5446,7 +5457,7 @@ packages:
       react-dom: ^16.8.4 || ^17.0.0
     dependencies:
       '@types/history': 4.7.11
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
       commander: 5.1.0
       joi: 17.7.0
       react: 18.2.0
@@ -5686,7 +5697,7 @@ packages:
     resolution: {integrity: sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==}
     dev: false
 
-  /@emotion/react/11.10.5_lzn74h6sajlbfmrxbix4okzmpi:
+  /@emotion/react/11.10.5_4axclqp2w4dacbol6jjujtzxpe:
     resolution: {integrity: sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==}
     peerDependencies:
       '@babel/core': ^7.0.0
@@ -5706,7 +5717,7 @@ packages:
       '@emotion/use-insertion-effect-with-fallbacks': 1.0.0_react@18.2.0
       '@emotion/utils': 1.2.0
       '@emotion/weak-memoize': 0.3.0
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
       hoist-non-react-statics: 3.3.2
       react: 18.2.0
     dev: false
@@ -5786,7 +5797,7 @@ packages:
     resolution: {integrity: sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==}
     dev: false
 
-  /@emotion/styled/11.10.5_4jddrkedmmycnrpdaatf3tfj3a:
+  /@emotion/styled/11.10.5_bfhdvbzfic63ikh7ivls5gocd4:
     resolution: {integrity: sha512-8EP6dD7dMkdku2foLoruPCNkRevzdcBaY6q0l0OsbyJK+x8D9HWjX27ARiSIKNF634hY9Zdoedh8bJCiva8yZw==}
     peerDependencies:
       '@babel/core': ^7.0.0
@@ -5803,11 +5814,11 @@ packages:
       '@babel/runtime': 7.19.4
       '@emotion/babel-plugin': 11.10.5_@babel+core@7.20.2
       '@emotion/is-prop-valid': 1.2.0
-      '@emotion/react': 11.10.5_lzn74h6sajlbfmrxbix4okzmpi
+      '@emotion/react': 11.10.5_4axclqp2w4dacbol6jjujtzxpe
       '@emotion/serialize': 1.1.1
       '@emotion/use-insertion-effect-with-fallbacks': 1.0.0_react@18.2.0
       '@emotion/utils': 1.2.0
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
       react: 18.2.0
     dev: false
 
@@ -6419,7 +6430,7 @@ packages:
   /@gqty/utils/1.0.0:
     resolution: {integrity: sha512-QJMlzts//d0H5mlekOZgx1a4KsTYXfxmRhhx8g/8mvzdaNVPxhFzCsv3+ljTOzbW3A08qy4jXQPWAMoTefSJDQ==}
 
-  /@graphiql/react/0.17.0_7bopqva7rdmx76dydi5rwteyri:
+  /@graphiql/react/0.17.0_jafotdrcagalnfovtj2hdjrrzu:
     resolution: {integrity: sha512-mn8FfucLJzFLQQ5OoJ9U1Dvnva1smOxBL89D2TSM2B6mmDyQIRhFXmjzUTPdsqwpauFiqkDaQZiqX7T/ZPrg/w==}
     peerDependencies:
       graphql: ^15.5.0 || ^16.0.0
@@ -6428,7 +6439,7 @@ packages:
     dependencies:
       '@graphiql/toolkit': 0.8.2_7fbl5omhlrpwpn5f5culy6mafe
       '@reach/combobox': 0.17.0_biqbaboplfbrettd7655fr4n2y
-      '@reach/dialog': 0.17.0_4qaawyptjkcgzqorucvhm3koke
+      '@reach/dialog': 0.17.0_6hfup3cnntiu7o7txcf7sadj7u
       '@reach/listbox': 0.17.0_biqbaboplfbrettd7655fr4n2y
       '@reach/menu-button': 0.17.0_7i5myeigehqah43i5u7wbekgba
       '@reach/tooltip': 0.17.0_biqbaboplfbrettd7655fr4n2y
@@ -8689,7 +8700,7 @@ packages:
       - supports-color
     dev: true
 
-  /@mui/base/5.0.0-alpha.106_4qaawyptjkcgzqorucvhm3koke:
+  /@mui/base/5.0.0-alpha.106_6hfup3cnntiu7o7txcf7sadj7u:
     resolution: {integrity: sha512-xJQQtwPCPwr6hGWTBdvDwHYwExn3Bw7nPQkN8Fuz8kHpZqoMVWQvvaFS557AIkkI2AFLV3DxVIMjbCvrIntBWg==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -8702,10 +8713,10 @@ packages:
     dependencies:
       '@babel/runtime': 7.20.1
       '@emotion/is-prop-valid': 1.2.0
-      '@mui/types': 7.2.1_@types+react@18.0.30
+      '@mui/types': 7.2.1_@types+react@18.0.32
       '@mui/utils': 5.10.14_react@18.2.0
       '@popperjs/core': 2.11.6
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
       clsx: 1.2.1
       prop-types: 15.8.1
       react: 18.2.0
@@ -8717,7 +8728,7 @@ packages:
     resolution: {integrity: sha512-qLgIJNOR9Dre8JiZ/neVzOf4jf88J6YtOkQqugtMrleLjbfRVUSS4LWl9CSOjNq76quYdmYWnSDgfQqOooT2cQ==}
     dev: false
 
-  /@mui/material/5.10.14_ogvxv7hqfgg53da5eqs77qdqde:
+  /@mui/material/5.10.14_4j2ofb32vdfzknkna6ykhtr3a4:
     resolution: {integrity: sha512-HWzKVAykePMx54WtxVwZyL1W4k3xlHYIqwMw0CaXAvgB3UE9yjABZuuGr8vG5Z6CSNWamzd+s1x8u7pQPFl9og==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -8735,14 +8746,14 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.20.1
-      '@emotion/react': 11.10.5_lzn74h6sajlbfmrxbix4okzmpi
-      '@emotion/styled': 11.10.5_4jddrkedmmycnrpdaatf3tfj3a
-      '@mui/base': 5.0.0-alpha.106_4qaawyptjkcgzqorucvhm3koke
+      '@emotion/react': 11.10.5_4axclqp2w4dacbol6jjujtzxpe
+      '@emotion/styled': 11.10.5_bfhdvbzfic63ikh7ivls5gocd4
+      '@mui/base': 5.0.0-alpha.106_6hfup3cnntiu7o7txcf7sadj7u
       '@mui/core-downloads-tracker': 5.10.14
-      '@mui/system': 5.10.14_yunkbz2mvya45l5iqzwl5ypfyq
-      '@mui/types': 7.2.1_@types+react@18.0.30
+      '@mui/system': 5.10.14_c3ugyn66sbetme4rmxiiuchocm
+      '@mui/types': 7.2.1_@types+react@18.0.32
       '@mui/utils': 5.10.14_react@18.2.0
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
       '@types/react-transition-group': 4.4.5
       clsx: 1.2.1
       csstype: 3.1.1
@@ -8753,7 +8764,7 @@ packages:
       react-transition-group: 4.4.5_biqbaboplfbrettd7655fr4n2y
     dev: false
 
-  /@mui/private-theming/5.10.14_2thlp7g7odiqm7dwhn3rlhxaa4:
+  /@mui/private-theming/5.10.14_b7lksjcz5zr4rqebyeqormarua:
     resolution: {integrity: sha512-3aIBe8WK65CwAPDY8nB11hYnzE1CZMymi76UnaFrA/DdGDwl5Y8F6uB+StKrkVmsqF1po7Mp2odqVkHj320gXw==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -8765,7 +8776,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.20.1
       '@mui/utils': 5.10.14_react@18.2.0
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
       prop-types: 15.8.1
       react: 18.2.0
     dev: false
@@ -8785,14 +8796,14 @@ packages:
     dependencies:
       '@babel/runtime': 7.20.1
       '@emotion/cache': 11.10.5
-      '@emotion/react': 11.10.5_lzn74h6sajlbfmrxbix4okzmpi
-      '@emotion/styled': 11.10.5_4jddrkedmmycnrpdaatf3tfj3a
+      '@emotion/react': 11.10.5_4axclqp2w4dacbol6jjujtzxpe
+      '@emotion/styled': 11.10.5_bfhdvbzfic63ikh7ivls5gocd4
       csstype: 3.1.1
       prop-types: 15.8.1
       react: 18.2.0
     dev: false
 
-  /@mui/system/5.10.14_yunkbz2mvya45l5iqzwl5ypfyq:
+  /@mui/system/5.10.14_c3ugyn66sbetme4rmxiiuchocm:
     resolution: {integrity: sha512-2de7XCjRb1j8Od0Stmo0LwFMLpOMNT4wzfINuExXI1TVSuyxXIXUxiC5FEgJW3GMvf/a7SUR8VOiMoKlKWzukw==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -8809,20 +8820,20 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.20.1
-      '@emotion/react': 11.10.5_lzn74h6sajlbfmrxbix4okzmpi
-      '@emotion/styled': 11.10.5_4jddrkedmmycnrpdaatf3tfj3a
-      '@mui/private-theming': 5.10.14_2thlp7g7odiqm7dwhn3rlhxaa4
+      '@emotion/react': 11.10.5_4axclqp2w4dacbol6jjujtzxpe
+      '@emotion/styled': 11.10.5_bfhdvbzfic63ikh7ivls5gocd4
+      '@mui/private-theming': 5.10.14_b7lksjcz5zr4rqebyeqormarua
       '@mui/styled-engine': 5.10.14_dovxhg2tvkkxkdnqyoum6wzcxm
-      '@mui/types': 7.2.1_@types+react@18.0.30
+      '@mui/types': 7.2.1_@types+react@18.0.32
       '@mui/utils': 5.10.14_react@18.2.0
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
       clsx: 1.2.1
       csstype: 3.1.1
       prop-types: 15.8.1
       react: 18.2.0
     dev: false
 
-  /@mui/types/7.2.1_@types+react@18.0.30:
+  /@mui/types/7.2.1_@types+react@18.0.32:
     resolution: {integrity: sha512-c5mSM7ivD8EsqK6HUi9hQPr5V7TJ/IRThUQ9nWNYPdhCGriTSQV4vL6DflT99LkM+wLiIS1rVjphpEWxERep7A==}
     peerDependencies:
       '@types/react': '*'
@@ -8830,7 +8841,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
     dev: false
 
   /@mui/utils/5.10.14_react@18.2.0:
@@ -8895,10 +8906,10 @@ packages:
       '@date-io/dayjs': 2.16.0
       '@date-io/luxon': 2.16.1
       '@date-io/moment': 2.16.1
-      '@emotion/react': 11.10.5_lzn74h6sajlbfmrxbix4okzmpi
-      '@emotion/styled': 11.10.5_4jddrkedmmycnrpdaatf3tfj3a
-      '@mui/material': 5.10.14_ogvxv7hqfgg53da5eqs77qdqde
-      '@mui/system': 5.10.14_yunkbz2mvya45l5iqzwl5ypfyq
+      '@emotion/react': 11.10.5_4axclqp2w4dacbol6jjujtzxpe
+      '@emotion/styled': 11.10.5_bfhdvbzfic63ikh7ivls5gocd4
+      '@mui/material': 5.10.14_4j2ofb32vdfzknkna6ykhtr3a4
+      '@mui/system': 5.10.14_c3ugyn66sbetme4rmxiiuchocm
       '@mui/utils': 5.10.9_react@18.2.0
       '@types/react-transition-group': 4.4.5
       clsx: 1.2.1
@@ -9664,7 +9675,7 @@ packages:
       tslib: 2.5.0
     dev: false
 
-  /@reach/dialog/0.17.0_4qaawyptjkcgzqorucvhm3koke:
+  /@reach/dialog/0.17.0_6hfup3cnntiu7o7txcf7sadj7u:
     resolution: {integrity: sha512-AnfKXugqDTGbeG3c8xDcrQDE4h9b/vnc27Sa118oQSquz52fneUeX9MeFb5ZEiBJK8T5NJpv7QUTBIKnFCAH5A==}
     peerDependencies:
       react: ^16.8.0 || 17.x
@@ -9675,8 +9686,8 @@ packages:
       prop-types: 15.8.1
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
-      react-focus-lock: 2.9.2_2thlp7g7odiqm7dwhn3rlhxaa4
-      react-remove-scroll: 2.5.5_2thlp7g7odiqm7dwhn3rlhxaa4
+      react-focus-lock: 2.9.2_b7lksjcz5zr4rqebyeqormarua
+      react-remove-scroll: 2.5.5_b7lksjcz5zr4rqebyeqormarua
       tslib: 2.5.0
     transitivePeerDependencies:
       - '@types/react'
@@ -10195,7 +10206,7 @@ packages:
       - webpack-command
     dev: true
 
-  /@storybook/addon-interactions/6.5.14_hvoc3iuqa2ltaiia3y4i66hvou:
+  /@storybook/addon-interactions/6.5.14_xrprhm3rjsj4pifo74vlqwj5ne:
     resolution: {integrity: sha512-Stw/m3+T6ILrQPwyPgRNYtXZTBk9wE0KOSOUVrc6VixCcXm43nIYkUFiq4NL86lCBR4RKewfgl8U3Rn6chE8Tg==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -10206,7 +10217,7 @@ packages:
       react-dom:
         optional: true
     dependencies:
-      '@devtools-ds/object-inspector': 1.2.0_4qaawyptjkcgzqorucvhm3koke
+      '@devtools-ds/object-inspector': 1.2.0_6hfup3cnntiu7o7txcf7sadj7u
       '@storybook/addons': 6.5.14_biqbaboplfbrettd7655fr4n2y
       '@storybook/api': 6.5.14_biqbaboplfbrettd7655fr4n2y
       '@storybook/client-logger': 6.5.14
@@ -12475,7 +12486,7 @@ packages:
   /@types/react-dom/18.0.11:
     resolution: {integrity: sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==}
     dependencies:
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
     dev: true
 
   /@types/react-dom/18.0.9:
@@ -12487,39 +12498,39 @@ packages:
   /@types/react-is/17.0.3:
     resolution: {integrity: sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==}
     dependencies:
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
     dev: false
 
   /@types/react-router-config/5.0.6:
     resolution: {integrity: sha512-db1mx37a1EJDf1XeX8jJN7R3PZABmJQXR8r28yUjVMFSjkmnQo6X6pOEEmNl+Tp2gYQOGPdYbFIipBtdElZ3Yg==}
     dependencies:
       '@types/history': 4.7.11
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
       '@types/react-router': 5.1.18
 
   /@types/react-router-dom/5.3.3:
     resolution: {integrity: sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==}
     dependencies:
       '@types/history': 4.7.11
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
       '@types/react-router': 5.1.18
 
   /@types/react-router/5.1.18:
     resolution: {integrity: sha512-YYknwy0D0iOwKQgz9v8nOzt2J6l4gouBmDnWqUUznltOTaon+r8US8ky8HvN0tXvc38U9m6z/t2RsVsnd1zM0g==}
     dependencies:
       '@types/history': 4.7.11
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
 
   /@types/react-table/7.7.12:
     resolution: {integrity: sha512-bRUent+NR/WwtDGwI/BqhZ8XnHghwHw0HUKeohzB5xN3K2qKWYE5w19e7GCuOkL1CXD9Gi1HFy7TIm2AvgWUHg==}
     dependencies:
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
     dev: true
 
   /@types/react-transition-group/4.4.5:
     resolution: {integrity: sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==}
     dependencies:
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
     dev: false
 
   /@types/react/18.0.25:
@@ -12537,8 +12548,8 @@ packages:
       csstype: 3.1.1
     dev: true
 
-  /@types/react/18.0.30:
-    resolution: {integrity: sha512-AnME2cHDH11Pxt/yYX6r0w448BfTwQOLEhQEjCdwB7QskEI7EKtxhGUsExTQe/MsY3D9D5rMtu62WRocw9A8FA==}
+  /@types/react/18.0.32:
+    resolution: {integrity: sha512-gYGXdtPQ9Cj0w2Fwqg5/ak6BcK3Z15YgjSqtyDizWUfx7mQ8drs0NBUzRRsAdoFVTO8kJ8L2TL8Skm7OFPnLUw==}
     dependencies:
       '@types/prop-types': 15.7.5
       '@types/scheduler': 0.16.2
@@ -13291,7 +13302,17 @@ packages:
     dependencies:
       '@graphql-typed-document-node/core': 3.1.1_graphql@16.6.0
       graphql: 16.6.0
-      wonka: 6.1.1
+      wonka: 6.3.1
+    dev: false
+
+  /@urql/core/4.0.2_graphql@16.6.0:
+    resolution: {integrity: sha512-GrJhMDqFP0URS47h6tMSHN/hmeTB1BNWnlXkWTxZo+b2ZB1+E9rgsuG2VTfaErXtZySGLwyCsDHtT+kZLN2cMA==}
+    dependencies:
+      '@0no-co/graphql.web': 1.0.0_graphql@16.6.0
+      wonka: 6.3.1
+    transitivePeerDependencies:
+      - graphql
+    dev: true
 
   /@urql/devtools/2.0.3_graphql@16.6.0:
     resolution: {integrity: sha512-TktPLiBS9LcBPHD6qcnb8wqOVcg3Bx0iCtvQ80uPpfofwwBGJmqnQTjUdEFU6kwaLOFZULQ9+Uo4831G823mQw==}
@@ -20728,14 +20749,14 @@ packages:
     resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
     dev: true
 
-  /graphiql/2.4.0_7bopqva7rdmx76dydi5rwteyri:
+  /graphiql/2.4.0_jafotdrcagalnfovtj2hdjrrzu:
     resolution: {integrity: sha512-lJ6OYDQkhAMZePrz8g6r9vMVmxa4SY9eEzzyJxsgE+jA+6PFKds2e8/tDAaCYfX0HNv84nc7W/th1vsHIdgYiA==}
     peerDependencies:
       graphql: ^15.5.0 || ^16.0.0
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      '@graphiql/react': 0.17.0_7bopqva7rdmx76dydi5rwteyri
+      '@graphiql/react': 0.17.0_jafotdrcagalnfovtj2hdjrrzu
       '@graphiql/toolkit': 0.8.2_7fbl5omhlrpwpn5f5culy6mafe
       entities: 2.2.0
       graphql: 16.6.0
@@ -26619,7 +26640,7 @@ packages:
   /react-fast-compare/3.2.0:
     resolution: {integrity: sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==}
 
-  /react-focus-lock/2.9.2_2thlp7g7odiqm7dwhn3rlhxaa4:
+  /react-focus-lock/2.9.2_b7lksjcz5zr4rqebyeqormarua:
     resolution: {integrity: sha512-5JfrsOKyA5Zn3h958mk7bAcfphr24jPoMoznJ8vaJF6fUrPQ8zrtEd3ILLOK8P5jvGxdMd96OxWNjDzATfR2qw==}
     peerDependencies:
       '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -26629,13 +26650,13 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.20.1
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
       focus-lock: 0.11.3
       prop-types: 15.8.1
       react: 18.2.0
       react-clientside-effect: 1.2.6_react@18.2.0
-      use-callback-ref: 1.3.0_2thlp7g7odiqm7dwhn3rlhxaa4
-      use-sidecar: 1.1.2_2thlp7g7odiqm7dwhn3rlhxaa4
+      use-callback-ref: 1.3.0_b7lksjcz5zr4rqebyeqormarua
+      use-sidecar: 1.1.2_b7lksjcz5zr4rqebyeqormarua
     dev: false
 
   /react-helmet-async/1.3.0_biqbaboplfbrettd7655fr4n2y:
@@ -26777,7 +26798,7 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /react-remove-scroll-bar/2.3.4_2thlp7g7odiqm7dwhn3rlhxaa4:
+  /react-remove-scroll-bar/2.3.4_b7lksjcz5zr4rqebyeqormarua:
     resolution: {integrity: sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -26787,13 +26808,13 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
       react: 18.2.0
-      react-style-singleton: 2.2.1_2thlp7g7odiqm7dwhn3rlhxaa4
+      react-style-singleton: 2.2.1_b7lksjcz5zr4rqebyeqormarua
       tslib: 2.5.0
     dev: false
 
-  /react-remove-scroll/2.5.5_2thlp7g7odiqm7dwhn3rlhxaa4:
+  /react-remove-scroll/2.5.5_b7lksjcz5zr4rqebyeqormarua:
     resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -26803,13 +26824,13 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
       react: 18.2.0
-      react-remove-scroll-bar: 2.3.4_2thlp7g7odiqm7dwhn3rlhxaa4
-      react-style-singleton: 2.2.1_2thlp7g7odiqm7dwhn3rlhxaa4
+      react-remove-scroll-bar: 2.3.4_b7lksjcz5zr4rqebyeqormarua
+      react-style-singleton: 2.2.1_b7lksjcz5zr4rqebyeqormarua
       tslib: 2.5.0
-      use-callback-ref: 1.3.0_2thlp7g7odiqm7dwhn3rlhxaa4
-      use-sidecar: 1.1.2_2thlp7g7odiqm7dwhn3rlhxaa4
+      use-callback-ref: 1.3.0_b7lksjcz5zr4rqebyeqormarua
+      use-sidecar: 1.1.2_b7lksjcz5zr4rqebyeqormarua
     dev: false
 
   /react-router-config/5.1.1_rlw3ibuvnpt5jvejeevjcf4ije:
@@ -26884,7 +26905,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /react-style-singleton/2.2.1_2thlp7g7odiqm7dwhn3rlhxaa4:
+  /react-style-singleton/2.2.1_b7lksjcz5zr4rqebyeqormarua:
     resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -26894,7 +26915,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
       get-nonce: 1.0.1
       invariant: 2.2.4
       react: 18.2.0
@@ -30388,8 +30409,21 @@ packages:
       graphql: 16.6.0
       react: 18.2.0
       wonka: 6.1.1
+    dev: false
 
-  /use-callback-ref/1.3.0_2thlp7g7odiqm7dwhn3rlhxaa4:
+  /urql/4.0.0_onqnqwb3ubg5opvemcqf7c2qhy:
+    resolution: {integrity: sha512-JY+h1rTLThB9lgoasy9TehL/W2yuzhyRazr6TzLB9ST8+Nm9lKKuyuoLvywhSOHdXtz2FJVFFUeJHE3S+ZfaWA==}
+    peerDependencies:
+      react: '>= 16.8.0'
+    dependencies:
+      '@urql/core': 4.0.2_graphql@16.6.0
+      react: 18.2.0
+      wonka: 6.3.1
+    transitivePeerDependencies:
+      - graphql
+    dev: true
+
+  /use-callback-ref/1.3.0_b7lksjcz5zr4rqebyeqormarua:
     resolution: {integrity: sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -30399,7 +30433,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
       react: 18.2.0
       tslib: 2.5.0
     dev: false
@@ -30464,7 +30498,7 @@ packages:
       use-isomorphic-layout-effect: 1.1.2_react@18.2.0
     dev: false
 
-  /use-sidecar/1.1.2_2thlp7g7odiqm7dwhn3rlhxaa4:
+  /use-sidecar/1.1.2_b7lksjcz5zr4rqebyeqormarua:
     resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -30474,7 +30508,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.0.30
+      '@types/react': 18.0.32
       detect-node-es: 1.1.0
       react: 18.2.0
       tslib: 2.5.0
@@ -31794,6 +31828,10 @@ packages:
 
   /wonka/6.1.1:
     resolution: {integrity: sha512-shBtyZ0KFvUadtnDGlTRA4mF4pgcRoyZKikdputKhmShoXWcZDvlg6CUw6Jx9nTL7Ub8QUJoIarPpxdlosg9cw==}
+    dev: false
+
+  /wonka/6.3.1:
+    resolution: {integrity: sha512-nJyGPcjuBiaLFn8QAlrHd+QjV9AlPO7snOWAhgx6aX0nQLMV6Wi0nqfrkmsXIH0efngbDOroOz2QyLnZMF16Hw==}
 
   /word-wrap/1.2.3:
     resolution: {integrity: sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==}