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

chore: update versions

.github/stale.yml

@@ -0,0 +1,16 @@
+# Configuration for probot-stale - https://github.com/probot/stale
+
+daysUntilStale: 180
+daysUntilClose: 7
+limitPerRun: 30
+onlyLabels: []
+exemptLabels: []
+
+exemptProjects: false
+exemptMilestones: false
+exemptAssignees: false
+staleLabel: stale
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.

dashboard/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @nhost/dashboard
 
+## 0.16.3
+
+### Patch Changes
+
+- Updated dependencies [90c60311]
+  - @nhost/react-apollo@5.0.20
+  - @nhost/nextjs@1.13.22
+
+## 0.16.2
+
+### Patch Changes
+
+- 0f34f0c6: fix(projects): disallow downgrading to free plan
+- 8da291ad: chore(deps): bump `@types/react` to v18.2.0 and `@types/react-dom` to v18.2.1
+
+## 0.16.1
+
+### Patch Changes
+
+- adc828a5: fix(gql): don't enter an infinite loop when fetching remote app data
+
+## 0.16.0
+
+### Minor Changes
+
+- 2fb1145f: feat(compute): add support for replicas
+
+### Patch Changes
+
+- d8ceccec: chore(env): remove deprecated `NHOST_BACKEND_URL` environment variable
+
+## 0.15.2
+
+### Patch Changes
+
+- 84b84ab7: fix(projects): filter projects by workspace
+
 ## 0.15.1
 
 ### Patch Changes

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.15.1",
+  "version": "0.16.3",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -105,8 +105,8 @@
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^16.11.7",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "18.0.37",
-    "@types/react-dom": "18.0.11",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.1",
     "@types/react-table": "^7.7.12",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@types/validator": "^13.7.10",
@@ -147,7 +147,7 @@
     "tsconfig-paths-webpack-plugin": "^4.0.0",
     "vite": "^4.0.2",
     "vite-tsconfig-paths": "^4.0.3",
-    "vitest": "^0.30.0",
+    "vitest": "^0.30.1",
     "webpack": "^5.75.0"
   },
   "browserslist": {

dashboard/src/components/applications/ApplicationInfo.tsx

@@ -46,6 +46,10 @@ export default function ApplicationInfo() {
     }
   }
 
+  if (!currentProject) {
+    return null;
+  }
+
   return (
     <div className="mt-4 grid grid-flow-row gap-4">
       <div className="grid grid-flow-row justify-center gap-0.5">

dashboard/src/components/applications/ApplicationProvisioning.tsx

@@ -27,7 +27,7 @@ export default function ApplicationProvisioning() {
       {currentProjectState.state === ApplicationStatus.Empty ? (
         <div className="grid grid-flow-row gap-1">
           <Text variant="h3" component="h1">
-            Setting Up {currentProject.name}
+            Setting Up {currentProject?.name}
           </Text>
           <Text>This normally takes around 2 minutes</Text>
           <ActivityIndicator className="mx-auto" />

dashboard/src/components/applications/ApplicationRestoring.tsx

@@ -26,7 +26,7 @@ export default function ApplicationRestoring() {
       {currentProjectState.state === ApplicationStatus.Empty ? (
         <div className="grid grid-flow-row gap-1">
           <Text variant="h3" component="h1">
-            Setting Up {currentProject.name}
+            Setting Up {currentProject?.name}
           </Text>
 
           <Text>This normally takes around 2 minutes</Text>

dashboard/src/components/applications/ChangePlanModal.tsx

@@ -12,6 +12,7 @@ import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
 import Checkbox from '@/ui/v2/Checkbox';
 import { BaseDialog } from '@/ui/v2/Dialog';
+import Link from '@/ui/v2/Link';
 import Text from '@/ui/v2/Text';
 import { planDescriptions } from '@/utils/planDescriptions';
 import getServerError from '@/utils/settings/getServerError/getServerError';
@@ -21,14 +22,7 @@ import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { toast } from 'react-hot-toast';
 
-function Plan({
-  planName,
-  price,
-  setPlan,
-  planId,
-  selectedPlanId,
-  currentPlan,
-}: any) {
+function Plan({ planName, price, setPlan, planId, selectedPlanId }: any) {
   return (
     <button
       type="button"
@@ -49,7 +43,7 @@ function Plan({
             component="p"
             className="self-center text-left font-medium"
           >
-            {currentPlan.price > price ? 'Downgrade' : 'Upgrade'} to {planName}
+            Upgrade to {planName}
           </Text>
         </div>
 
@@ -88,8 +82,6 @@ export function ChangePlanModalWithData({ app, plans, close }: any) {
   const currentPlan = plans.find((plan) => plan.id === app.plan.id);
   const selectedPlan = plans.find((plan) => plan.id === selectedPlanId);
 
-  const isDowngrade = currentPlan.price > selectedPlan?.price;
-
   const [updateApp] = useUpdateApplicationMutation({
     refetchQueries: [
       refetchGetApplicationPlanQuery({
@@ -148,6 +140,53 @@ export function ChangePlanModalWithData({ app, plans, close }: any) {
     closeAlertDialog();
   };
 
+  if (app.plan.id !== plans.find((plan) => plan.isFree)?.id) {
+    return (
+      <Box className="mx-auto w-full max-w-xl rounded-lg p-6 text-left">
+        <div className="flex flex-col">
+          <div className="mx-auto">
+            <Image
+              src="/assets/upgrade.svg"
+              alt="Nhost Logo"
+              width={72}
+              height={72}
+            />
+          </div>
+          <Text variant="h3" component="h2" className="mt-2 text-center">
+            Downgrade is not available
+          </Text>
+
+          <Text className="mt-1 text-center">
+            You can&apos;t downgrade from a paid plan to a free plan here.
+          </Text>
+
+          <Text className="text-center">
+            Please contact us at{' '}
+            <Link href="mailto:info@nhost.io">info@nhost.io</Link> if you want
+            to downgrade.
+          </Text>
+
+          <div className="mt-6 grid grid-flow-row gap-2">
+            <Button
+              variant="outlined"
+              color="secondary"
+              className="mx-auto w-full max-w-sm"
+              onClick={() => {
+                if (close) {
+                  close();
+                }
+
+                closeAlertDialog();
+              }}
+            >
+              Cancel
+            </Button>
+          </div>
+        </div>
+      </Box>
+    );
+  }
+
   return (
     <Box className="w-full max-w-xl rounded-lg p-6 text-left">
       <BaseDialog
@@ -196,9 +235,7 @@ export function ChangePlanModalWithData({ app, plans, close }: any) {
 
         <div className="mt-6 grid grid-flow-row gap-2">
           <Button onClick={handleChangePlanClick} disabled={!selectedPlan}>
-            {!selectedPlan && 'Change Plan'}
-            {selectedPlan && isDowngrade && 'Downgrade'}
-            {selectedPlan && !isDowngrade && 'Upgrade'}
+            Upgrade
           </Button>
 
           <Button

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

@@ -103,7 +103,7 @@ function ProjectLayoutContent({
       >
         {children}
 
-        <NextSeo title={currentProject.name} />
+        <NextSeo title={currentProject?.name} />
       </Box>
     </>
   );

dashboard/src/components/overview/OverviewDeployments/OverviewDeployments.test.tsx

@@ -1,7 +1,5 @@
+import { mockApplication, mockWorkspace } from '@/tests/mocks';
 import { queryClient, render, screen } from '@/tests/testUtils';
-import type { Project } from '@/types/application';
-import { ApplicationStatus } from '@/types/application';
-import type { Workspace } from '@/types/workspace';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import { afterAll, beforeAll, vi } from 'vitest';
@@ -35,43 +33,6 @@ vi.mock('next/router', () => ({
   }),
 }));
 
-const mockApplication: Project = {
-  id: '1',
-  name: 'Test Application',
-  slug: 'test-application',
-  appStates: [],
-  subdomain: '',
-  isProvisioned: true,
-  region: {
-    awsName: 'us-east-1',
-    city: 'New York',
-    countryCode: 'US',
-    id: '1',
-  },
-  createdAt: new Date().toISOString(),
-  deployments: [],
-  desiredState: ApplicationStatus.Live,
-  featureFlags: [],
-  providersUpdated: true,
-  githubRepository: { fullName: 'test/git-project' },
-  repositoryProductionBranch: null,
-  nhostBaseFolder: null,
-  plan: null,
-  config: {
-    hasura: {
-      adminSecret: 'nhost-admin-secret',
-    },
-  },
-};
-
-const mockWorkspace: Workspace = {
-  id: '1',
-  name: 'Test Workspace',
-  slug: 'test-workspace',
-  members: [],
-  applications: [mockApplication],
-};
-
 const server = setupServer(
   rest.get('https://local.graphql.nhost.run/v1', (_req, res, ctx) =>
     res(ctx.status(200)),

dashboard/src/components/settings/environmentVariables/SystemEnvironmentVariableSettings/SystemEnvironmentVariableSettings.tsx

@@ -22,7 +22,6 @@ import generateAppServiceUrl, {
   defaultRemoteBackendSlugs,
 } from '@/utils/common/generateAppServiceUrl';
 import { getHasuraConsoleServiceUrl } from '@/utils/env';
-import { generateRemoteAppUrl } from '@/utils/helpers';
 import getJwtSecretsWithoutFalsyValues from '@/utils/settings/getJwtSecretsWithoutFalsyValues';
 import { Fragment, useState } from 'react';
 
@@ -99,10 +98,6 @@ export default function SystemEnvironmentVariableSettings() {
   }
 
   const systemEnvironmentVariables = [
-    {
-      key: 'NHOST_BACKEND_URL',
-      value: generateRemoteAppUrl(currentProject.subdomain),
-    },
     { key: 'NHOST_SUBDOMAIN', value: currentProject.subdomain },
     { key: 'NHOST_REGION', value: currentProject.region.awsName },
     {

dashboard/src/components/settings/resources/ResourcesConfirmationDialog/ResourcesConfirmationDialog.tsx

@@ -1,24 +1,26 @@
+import { calculateBillableResources } from '@/features/settings/resources/utils/calculateBillableResources';
 import { prettifyMemory } from '@/features/settings/resources/utils/prettifyMemory';
 import { prettifyVCPU } from '@/features/settings/resources/utils/prettifyVCPU';
-import useProPlan from '@/hooks/common/useProPlan';
+import type { ResourceSettingsFormValues } from '@/features/settings/resources/utils/resourceSettingsValidationSchema';
+import { useProPlan } from '@/hooks/common/useProPlan';
 import { Alert } from '@/ui/Alert';
 import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
 import Divider from '@/ui/v2/Divider';
 import Text from '@/ui/v2/Text';
+import Tooltip from '@/ui/v2/Tooltip';
+import { InfoIcon } from '@/ui/v2/icons/InfoIcon';
 import {
   RESOURCE_VCPU_MULTIPLIER,
   RESOURCE_VCPU_PRICE,
+  RESOURCE_VCPU_PRICE_PER_MINUTE,
 } from '@/utils/CONSTANTS';
 
 export interface ResourcesConfirmationDialogProps {
   /**
-   * Price of the new plan.
+   * The updated resources that the user has selected.
    */
-  updatedResources: {
-    vcpu: number;
-    memory: number;
-  };
+  formValues: ResourceSettingsFormValues;
   /**
    * Function to be called when the user clicks the cancel button.
    */
@@ -30,13 +32,47 @@ export interface ResourcesConfirmationDialogProps {
 }
 
 export default function ResourcesConfirmationDialog({
-  updatedResources,
+  formValues,
   onCancel,
   onSubmit,
 }: ResourcesConfirmationDialogProps) {
   const { data: proPlan, loading, error } = useProPlan();
+
+  const priceForTotalAvailableVCPU =
+    (formValues.totalAvailableVCPU / RESOURCE_VCPU_MULTIPLIER) *
+    RESOURCE_VCPU_PRICE;
+
+  const billableResources = calculateBillableResources(
+    {
+      replicas: formValues.database?.replicas,
+      vcpu: formValues.database?.vcpu,
+      memory: formValues.database?.memory,
+    },
+    {
+      replicas: formValues.hasura?.replicas,
+      vcpu: formValues.hasura?.vcpu,
+      memory: formValues.hasura?.memory,
+    },
+    {
+      replicas: formValues.auth?.replicas,
+      vcpu: formValues.auth?.vcpu,
+      memory: formValues.auth?.memory,
+    },
+    {
+      replicas: formValues.storage?.replicas,
+      vcpu: formValues.storage?.vcpu,
+      memory: formValues.storage?.memory,
+    },
+  );
+
+  const totalBillableVCPU = formValues.enabled ? billableResources.vcpu : 0;
+  const totalBillableMemory = formValues.enabled ? billableResources.memory : 0;
+
   const updatedPrice =
-    RESOURCE_VCPU_PRICE * (updatedResources.vcpu / RESOURCE_VCPU_MULTIPLIER);
+    Math.max(
+      priceForTotalAvailableVCPU,
+      (billableResources.vcpu / RESOURCE_VCPU_MULTIPLIER) * RESOURCE_VCPU_PRICE,
+    ) + proPlan.price;
 
   if (!loading && !proPlan) {
     return (
@@ -50,9 +86,22 @@ export default function ResourcesConfirmationDialog({
     throw error;
   }
 
+  const databaseResources = `${prettifyVCPU(
+    formValues.database.vcpu,
+  )} vCPU + ${prettifyMemory(formValues.database.memory)}`;
+  const hasuraResources = `${prettifyVCPU(
+    formValues.hasura.vcpu,
+  )} vCPU + ${prettifyMemory(formValues.hasura.memory)}`;
+  const authResources = `${prettifyVCPU(
+    formValues.auth.vcpu,
+  )} vCPU + ${prettifyMemory(formValues.auth.memory)}`;
+  const storageResources = `${prettifyVCPU(
+    formValues.storage.vcpu,
+  )} vCPU + ${prettifyMemory(formValues.storage.memory)}`;
+
   return (
     <div className="grid grid-flow-row gap-6 px-6 pb-6">
-      {updatedResources.vcpu > 0 ? (
+      {totalBillableVCPU > 0 ? (
         <Text className="text-center">
           Please allow some time for the selected resources to take effect.
         </Text>
@@ -69,28 +118,96 @@ export default function ResourcesConfirmationDialog({
           <Text>${proPlan.price.toFixed(2)}/mo</Text>
         </Box>
 
-        <Box className="grid grid-flow-col items-center justify-between gap-2">
-          <Box className="grid grid-flow-row gap-0.5">
-            <Text className="font-medium">Dedicated Resources</Text>
-            <Text className="text-xs" color="secondary">
-              {prettifyVCPU(updatedResources.vcpu)} vCPUs +{' '}
-              {prettifyMemory(updatedResources.memory)} of Memory
+        <Box className="grid grid-flow-row gap-1.5">
+          <Box className="grid grid-flow-col items-center justify-between gap-2">
+            <Box className="grid grid-flow-row gap-0.5">
+              <Text className="font-medium">Dedicated Resources</Text>
+            </Box>
+            <Text>
+              $
+              {(
+                (totalBillableVCPU / RESOURCE_VCPU_MULTIPLIER) *
+                RESOURCE_VCPU_PRICE_PER_MINUTE
+              ).toFixed(4)}
+              /min
             </Text>
           </Box>
-          <Text>${updatedPrice.toFixed(2)}/mo</Text>
+
+          <Box className="grid w-full grid-flow-row gap-1.5">
+            <Box className="grid grid-flow-col justify-between gap-2">
+              <Text className="text-xs" color="secondary">
+                PostgreSQL Database
+              </Text>
+
+              <Text className="text-xs" color="secondary">
+                {formValues.database.replicas > 1
+                  ? `${databaseResources} (${formValues.database.replicas} replicas)`
+                  : databaseResources}
+              </Text>
+            </Box>
+
+            <Box className="grid grid-flow-col justify-between gap-2">
+              <Text className="text-xs" color="secondary">
+                Hasura GraphQL
+              </Text>
+              <Text className="text-xs" color="secondary">
+                {formValues.hasura.replicas > 1
+                  ? `${hasuraResources} (${formValues.hasura.replicas} replicas)`
+                  : hasuraResources}
+              </Text>
+            </Box>
+
+            <Box className="grid grid-flow-col justify-between gap-2">
+              <Text className="text-xs" color="secondary">
+                Auth
+              </Text>
+              <Text className="text-xs" color="secondary">
+                {formValues.auth.replicas > 1
+                  ? `${authResources} (${formValues.auth.replicas} replicas)`
+                  : authResources}
+              </Text>
+            </Box>
+            <Box className="grid grid-flow-col justify-between gap-2">
+              <Text className="text-xs" color="secondary">
+                Storage
+              </Text>
+              <Text className="text-xs" color="secondary">
+                {formValues.storage.replicas > 1
+                  ? `${storageResources} (${formValues.storage.replicas} replicas)`
+                  : storageResources}
+              </Text>
+            </Box>
+
+            <Box className="grid grid-flow-col justify-between gap-2">
+              <Text className="text-xs font-medium" color="secondary">
+                Total
+              </Text>
+              <Text className="text-xs font-medium" color="secondary">
+                {prettifyVCPU(totalBillableVCPU)} vCPU +{' '}
+                {prettifyMemory(totalBillableMemory)}
+              </Text>
+            </Box>
+          </Box>
         </Box>
 
         <Divider />
 
         <Box className="grid grid-flow-col justify-between gap-2">
-          <Text className="font-medium">Total</Text>
-          <Text>${(updatedPrice + proPlan.price).toFixed(2)}/mo</Text>
+          <Box className="grid grid-flow-col items-center gap-1.5">
+            <Text className="font-medium">Approximate Cost</Text>
+
+            <Tooltip title="$0.0012/minute for every 1 vCPU and 2 GiB of RAM">
+              <InfoIcon aria-label="Info" className="h-4 w-4" color="primary" />
+            </Tooltip>
+          </Box>
+
+          <Text>${updatedPrice.toFixed(2)}/mo</Text>
         </Box>
       </Box>
 
       <Box className="grid grid-flow-row gap-2">
         <Button
-          color={updatedResources.vcpu > 0 ? 'primary' : 'error'}
+          color={totalBillableVCPU > 0 ? 'primary' : 'error'}
           onClick={onSubmit}
           autoFocus
         >

dashboard/src/components/settings/resources/ResourcesForm/ResourcesForm.test.tsx

@@ -1,3 +1,4 @@
+import { mockMatchMediaValue, mockRouter } from '@/tests/mocks';
 import {
   getProPlanOnlyQuery,
   getWorkspaceAndProjectQuery,
@@ -12,7 +13,6 @@ import {
   fireEvent,
   render,
   screen,
-  waitFor,
   waitForElementToBeRemoved,
   within,
 } from '@/tests/testUtils';
@@ -22,49 +22,16 @@ import {
 } from '@/utils/CONSTANTS';
 import userEvent from '@testing-library/user-event';
 import { setupServer } from 'msw/node';
-import { test, vi } from 'vitest';
+import { expect, test, vi } from 'vitest';
 import ResourcesForm from './ResourcesForm';
 
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
-  value: vi.fn().mockImplementation((query) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: vi.fn(),
-    removeListener: vi.fn(),
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  })),
+  value: vi.fn().mockImplementation(mockMatchMediaValue),
 });
 
 vi.mock('next/router', () => ({
-  useRouter: vi.fn().mockReturnValue({
-    basePath: '',
-    pathname: '/test-workspace/test-application',
-    route: '/[workspaceSlug]/[appSlug]',
-    asPath: '/test-workspace/test-application',
-    isLocaleDomain: false,
-    isReady: true,
-    isPreview: false,
-    query: {
-      workspaceSlug: 'test-workspace',
-      appSlug: 'test-application',
-    },
-    push: vi.fn(),
-    replace: vi.fn(),
-    reload: vi.fn(),
-    back: vi.fn(),
-    prefetch: vi.fn(),
-    beforePopState: vi.fn(),
-    events: {
-      on: vi.fn(),
-      off: vi.fn(),
-      emit: vi.fn(),
-    },
-    isFallback: false,
-  }),
+  useRouter: vi.fn().mockReturnValue(mockRouter),
 }));
 
 const server = setupServer(
@@ -79,7 +46,10 @@ beforeAll(() => {
   server.listen();
 });
 afterEach(() => server.resetHandlers());
-afterAll(() => server.close());
+afterAll(() => {
+  server.close();
+  vi.restoreAllMocks();
+});
 
 // Note: Workaround based on https://github.com/testing-library/user-event/issues/871#issuecomment-1059317998
 function changeSliderValue(slider: HTMLElement, value: number) {
@@ -92,9 +62,7 @@ test('should show an empty state message that the feature must be enabled if no
 
   render(<ResourcesForm />);
 
-  await waitForElementToBeRemoved(() => screen.getByRole('progressbar'));
-
-  expect(screen.getByText(/enable this feature/i)).toBeInTheDocument();
+  expect(await screen.findByText(/enable this feature/i)).toBeInTheDocument();
 });
 
 test('should show the sliders if the switch is enabled', async () => {
@@ -103,28 +71,23 @@ test('should show the sliders if the switch is enabled', async () => {
 
   render(<ResourcesForm />);
 
-  await waitForElementToBeRemoved(() => screen.getByRole('progressbar'));
-
-  expect(screen.getByText(/enable this feature/i)).toBeInTheDocument();
+  expect(await screen.findByText(/enable this feature/i)).toBeInTheDocument();
 
   await user.click(screen.getByRole('checkbox'));
 
   expect(screen.queryByText(/enable this feature/i)).not.toBeInTheDocument();
-  expect(screen.getAllByRole('slider')).toHaveLength(9);
+  expect(screen.getAllByRole('slider')).toHaveLength(12);
 });
 
 test('should not show an empty state message if there is data available', async () => {
   render(<ResourcesForm />);
 
-  await waitForElementToBeRemoved(() => screen.getByRole('progressbar'));
-  await waitFor(() =>
-    expect(
-      screen.queryByRole('slider', { name: /total available vcpu/i }),
-    ).toBeInTheDocument(),
-  );
+  expect(
+    await screen.findByRole('slider', { name: /total available vcpu/i }),
+  ).toBeInTheDocument();
 
   expect(screen.queryByText(/enable this feature/i)).not.toBeInTheDocument();
-  expect(screen.getAllByRole('slider')).toHaveLength(9);
+  expect(screen.getAllByRole('slider')).toHaveLength(12);
   expect(screen.getByText(/^vcpus:/i)).toHaveTextContent(/vcpus: 8/i);
   expect(screen.getByText(/^memory:/i)).toHaveTextContent(/memory: 16384 mib/i);
 });
@@ -132,7 +95,9 @@ test('should not show an empty state message if there is data available', async
 test('should show a warning message if not all the resources are allocated', async () => {
   render(<ResourcesForm />);
 
-  await waitForElementToBeRemoved(() => screen.getByRole('progressbar'));
+  expect(
+    await screen.findByRole('slider', { name: /total available vcpu/i }),
+  ).toBeInTheDocument();
 
   changeSliderValue(
     screen.getByRole('slider', {
@@ -145,14 +110,16 @@ test('should show a warning message if not all the resources are allocated', asy
   expect(screen.getByText(/^memory:/i)).toHaveTextContent(/memory: 18432 mib/i);
 
   expect(
-    screen.getByText(/you now have 1 vcpus and 2048 mib of memory unused./i),
+    screen.getByText(/you have 1 vcpus and 2048 mib of memory unused./i),
   ).toBeInTheDocument();
 });
 
 test('should update the price when the top slider is changed', async () => {
   render(<ResourcesForm />);
 
-  await waitForElementToBeRemoved(() => screen.getByRole('progressbar'));
+  expect(
+    await screen.findByRole('slider', { name: /total available vcpu/i }),
+  ).toBeInTheDocument();
 
   expect(screen.queryByText(/\$200\.00\/mo/i)).not.toBeInTheDocument();
 
@@ -172,7 +139,9 @@ test('should show a validation error when the form is submitted when not everyth
   const user = userEvent.setup();
   render(<ResourcesForm />);
 
-  await waitForElementToBeRemoved(() => screen.getByRole('progressbar'));
+  expect(
+    await screen.findByRole('slider', { name: /total available vcpu/i }),
+  ).toBeInTheDocument();
 
   expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
 
@@ -186,8 +155,10 @@ test('should show a validation error when the form is submitted when not everyth
   await user.click(screen.getByRole('button', { name: /save/i }));
 
   expect(
-    screen.getAllByText(/you now have 1 vcpus and 2048 mib of memory unused./i),
-  ).toHaveLength(2);
+    screen.getByText(/you have 1 vcpus and 2048 mib of memory unused./i),
+  ).toBeInTheDocument();
+
+  expect(screen.getByText(/invalid configuration/i)).toBeInTheDocument();
 });
 
 test('should show a confirmation dialog when the form is submitted', async () => {
@@ -196,12 +167,9 @@ test('should show a confirmation dialog when the form is submitted', async () =>
   const user = userEvent.setup();
   render(<ResourcesForm />);
 
-  await waitForElementToBeRemoved(() => screen.getByRole('progressbar'));
-  await waitFor(() =>
-    expect(
-      screen.queryByRole('slider', { name: /total available vcpu/i }),
-    ).toBeInTheDocument(),
-  );
+  expect(
+    await screen.findByRole('slider', { name: /total available vcpu/i }),
+  ).toBeInTheDocument();
 
   changeSliderValue(
     screen.getByRole('slider', {
@@ -212,36 +180,36 @@ test('should show a confirmation dialog when the form is submitted', async () =>
 
   changeSliderValue(
     screen.getByRole('slider', { name: /database vcpu/i }),
-    2.25 * RESOURCE_VCPU_MULTIPLIER,
+    2 * RESOURCE_VCPU_MULTIPLIER,
   );
   changeSliderValue(
     screen.getByRole('slider', { name: /hasura graphql vcpu/i }),
-    2.25 * RESOURCE_VCPU_MULTIPLIER,
+    2.5 * RESOURCE_VCPU_MULTIPLIER,
   );
   changeSliderValue(
     screen.getByRole('slider', { name: /auth vcpu/i }),
-    2.25 * RESOURCE_VCPU_MULTIPLIER,
+    1.5 * RESOURCE_VCPU_MULTIPLIER,
   );
   changeSliderValue(
     screen.getByRole('slider', { name: /storage vcpu/i }),
-    2.25 * RESOURCE_VCPU_MULTIPLIER,
+    3 * RESOURCE_VCPU_MULTIPLIER,
   );
 
   changeSliderValue(
     screen.getByRole('slider', { name: /database memory/i }),
-    4.5 * RESOURCE_MEMORY_MULTIPLIER,
+    4.75 * RESOURCE_MEMORY_MULTIPLIER,
   );
   changeSliderValue(
     screen.getByRole('slider', { name: /hasura graphql memory/i }),
-    4.5 * RESOURCE_MEMORY_MULTIPLIER,
+    4.25 * RESOURCE_MEMORY_MULTIPLIER,
   );
   changeSliderValue(
     screen.getByRole('slider', { name: /auth memory/i }),
-    4.5 * RESOURCE_MEMORY_MULTIPLIER,
+    4 * RESOURCE_MEMORY_MULTIPLIER,
   );
   changeSliderValue(
     screen.getByRole('slider', { name: /storage memory/i }),
-    4.5 * RESOURCE_MEMORY_MULTIPLIER,
+    5 * RESOURCE_MEMORY_MULTIPLIER,
   );
 
   await user.click(screen.getByRole('button', { name: /save/i }));
@@ -253,15 +221,21 @@ test('should show a confirmation dialog when the form is submitted', async () =>
     }),
   ).toBeInTheDocument();
   expect(
-    within(screen.getByRole('dialog')).getByText(
-      /9 vcpus \+ 18432 mib of memory/i,
-      { exact: true },
-    ),
-  ).toBeInTheDocument();
+    within(screen.getByRole('dialog')).getByText(/postgresql database/i)
+      .parentElement,
+  ).toHaveTextContent(/2 vcpu \+ 4864 mib/i);
   expect(
-    within(screen.getByRole('dialog')).getByText(/\$475\.00\/mo/i, {
-      exact: true,
-    }),
+    within(screen.getByRole('dialog')).getByText(/hasura graphql/i)
+      .parentElement,
+  ).toHaveTextContent(/2.5 vcpu \+ 4352 mib/i);
+  expect(
+    within(screen.getByRole('dialog')).getByText(/auth/i).parentElement,
+  ).toHaveTextContent(/1.5 vcpu \+ 4096 mib/i);
+  expect(
+    within(screen.getByRole('dialog')).getByText(/storage/i).parentElement,
+  ).toHaveTextContent(/3 vcpu \+ 5120 mib/i);
+  expect(
+    within(screen.getByRole('dialog')).getByText(/\$475\.00\/mo/i),
   ).toBeInTheDocument();
 
   // we need to mock the query again because the mutation updated the resources
@@ -270,7 +244,8 @@ test('should show a confirmation dialog when the form is submitted', async () =>
 
   await user.click(screen.getByRole('button', { name: /confirm/i }));
 
-  await waitForElementToBeRemoved(() => screen.getByRole('dialog'));
+  await waitForElementToBeRemoved(() => screen.queryByRole('dialog'));
+
   expect(
     await screen.findByText(/resources have been updated successfully./i),
   ).toBeInTheDocument();
@@ -286,13 +261,15 @@ test('should display a red button when custom resources are disabled', async ()
 
   render(<ResourcesForm />);
 
-  await waitForElementToBeRemoved(() => screen.getByRole('progressbar'));
+  expect(
+    await screen.findByRole('slider', { name: /total available vcpu/i }),
+  ).toBeInTheDocument();
 
   await user.click(screen.getByRole('checkbox'));
 
   expect(screen.getByText(/enable this feature/i)).toBeInTheDocument();
-  expect(screen.getByText(/total cost:/i)).toHaveTextContent(
-    /total cost: \$25\.00\/mo/i,
+  expect(screen.getByText(/approximate cost:/i)).toHaveTextContent(
+    /approximate cost: \$25\.00\/mo/i,
   );
 
   await user.click(screen.getByRole('button', { name: /save/i }));
@@ -307,14 +284,16 @@ test('should display a red button when custom resources are disabled', async ()
   });
 });
 
-test('should hide the footer when custom resource allocation is disabled', async () => {
+test('should hide the pricing information when custom resource allocation is disabled', async () => {
   server.use(updateConfigMutation);
 
   const user = userEvent.setup();
 
   render(<ResourcesForm />);
 
-  await waitForElementToBeRemoved(() => screen.getByRole('progressbar'));
+  expect(
+    await screen.findByRole('slider', { name: /total available vcpu/i }),
+  ).toBeInTheDocument();
 
   await user.click(screen.getByRole('checkbox'));
   await user.click(screen.getByRole('button', { name: /save/i }));
@@ -325,7 +304,203 @@ test('should hide the footer when custom resource allocation is disabled', async
 
   await user.click(screen.getByRole('button', { name: /confirm/i }));
 
-  await waitForElementToBeRemoved(() => screen.getByRole('dialog'));
+  await waitForElementToBeRemoved(() => screen.queryByRole('dialog'));
 
-  expect(screen.queryByText(/total cost:/i)).not.toBeInTheDocument();
+  expect(screen.queryByText(/approximate cost:/i)).not.toBeInTheDocument();
+});
+
+test('should show a warning message when resources are overallocated', async () => {
+  render(<ResourcesForm />);
+
+  expect(
+    await screen.findByRole('slider', { name: /total available vcpu/i }),
+  ).toBeInTheDocument();
+
+  changeSliderValue(
+    screen.getByRole('slider', {
+      name: /total available vcpu/i,
+    }),
+    7 * RESOURCE_VCPU_MULTIPLIER,
+  );
+
+  expect(
+    screen.getByText(
+      /^you have 1 vCPUs and 2048 mib of memory overallocated\. reduce it before saving or increase the total amount\./i,
+    ),
+  ).toBeInTheDocument();
+});
+
+test('should change pricing based on selected replicas', async () => {
+  render(<ResourcesForm />);
+
+  expect(
+    await screen.findByRole('slider', { name: /total available vcpu/i }),
+  ).toBeInTheDocument();
+
+  expect(screen.getByText(/approximate cost:/i)).toHaveTextContent(
+    /approximate cost: \$425\.00\/mo/i,
+  );
+
+  changeSliderValue(
+    screen.getByRole('slider', { name: /hasura graphql replicas/i }),
+    2,
+  );
+
+  expect(screen.getByText(/approximate cost:/i)).toHaveTextContent(
+    /approximate cost: \$525\.00\/mo/i,
+  );
+
+  changeSliderValue(
+    screen.getByRole('slider', { name: /hasura graphql replicas/i }),
+    1,
+  );
+
+  expect(screen.getByText(/approximate cost:/i)).toHaveTextContent(
+    /approximate cost: \$425\.00\/mo/i,
+  );
+});
+
+test('should validate if vCPU and Memory match the 1:2 ratio if more than 1 replica is selected', async () => {
+  const user = userEvent.setup();
+
+  render(<ResourcesForm />);
+
+  expect(
+    await screen.findByRole('slider', { name: /total available vcpu/i }),
+  ).toBeInTheDocument();
+
+  changeSliderValue(
+    screen.getByRole('slider', {
+      name: /total available vcpu/i,
+    }),
+    20 * RESOURCE_VCPU_MULTIPLIER,
+  );
+
+  changeSliderValue(
+    screen.getByRole('slider', { name: /storage replicas/i }),
+    2,
+  );
+
+  changeSliderValue(
+    screen.getByRole('slider', { name: /storage vcpu/i }),
+    1 * RESOURCE_VCPU_MULTIPLIER,
+  );
+
+  changeSliderValue(
+    screen.getByRole('slider', { name: /storage memory/i }),
+    6 * RESOURCE_MEMORY_MULTIPLIER,
+  );
+
+  await user.click(screen.getByRole('button', { name: /save/i }));
+
+  expect(screen.getByText(/invalid configuration/i)).toBeInTheDocument();
+  expect(
+    screen.getByText(
+      /please check the form for errors and the allocation for each service and try again\./i,
+    ),
+  ).toBeInTheDocument();
+
+  const validationErrorMessage = screen.getByLabelText(
+    /vcpu and memory for this service must match the 1:2 ratio if more than one replica is selected\./i,
+  );
+
+  expect(validationErrorMessage).toBeInTheDocument();
+  expect(validationErrorMessage).toHaveStyle({ color: '#f13154' });
+});
+
+test('should take replicas into account when confirming the resources', async () => {
+  const user = userEvent.setup();
+
+  render(<ResourcesForm />);
+
+  expect(
+    await screen.findByRole('slider', { name: /total available vcpu/i }),
+  ).toBeInTheDocument();
+
+  changeSliderValue(
+    screen.getByRole('slider', {
+      name: /total available vcpu/i,
+    }),
+    8.5 * RESOURCE_VCPU_MULTIPLIER,
+  );
+
+  // setting up database
+  changeSliderValue(
+    screen.getByRole('slider', { name: /database vcpu/i }),
+    2 * RESOURCE_VCPU_MULTIPLIER,
+  );
+  changeSliderValue(
+    screen.getByRole('slider', { name: /database memory/i }),
+    4 * RESOURCE_MEMORY_MULTIPLIER,
+  );
+
+  // setting up hasura
+  changeSliderValue(
+    screen.getByRole('slider', { name: /hasura graphql replicas/i }),
+    3,
+  );
+  changeSliderValue(
+    screen.getByRole('slider', { name: /hasura graphql vcpu/i }),
+    2.5 * RESOURCE_VCPU_MULTIPLIER,
+  );
+  changeSliderValue(
+    screen.getByRole('slider', { name: /hasura graphql memory/i }),
+    5 * RESOURCE_MEMORY_MULTIPLIER,
+  );
+
+  // setting up auth
+  changeSliderValue(screen.getByRole('slider', { name: /auth replicas/i }), 2);
+  changeSliderValue(
+    screen.getByRole('slider', { name: /auth vcpu/i }),
+    1.5 * RESOURCE_VCPU_MULTIPLIER,
+  );
+  changeSliderValue(
+    screen.getByRole('slider', { name: /auth memory/i }),
+    3 * RESOURCE_MEMORY_MULTIPLIER,
+  );
+
+  // setting up storage
+  changeSliderValue(
+    screen.getByRole('slider', { name: /storage replicas/i }),
+    4,
+  );
+  changeSliderValue(
+    screen.getByRole('slider', { name: /storage vcpu/i }),
+    2.5 * RESOURCE_VCPU_MULTIPLIER,
+  );
+  changeSliderValue(
+    screen.getByRole('slider', { name: /storage memory/i }),
+    5 * RESOURCE_MEMORY_MULTIPLIER,
+  );
+
+  await user.click(screen.getByRole('button', { name: /save/i }));
+
+  expect(await screen.findByRole('dialog')).toBeInTheDocument();
+
+  const dialog = screen.getByRole('dialog');
+
+  expect(
+    within(dialog).getByText(/postgresql database/i).parentElement,
+  ).toHaveTextContent(/2 vcpu \+ 4096 mib/i);
+
+  expect(
+    within(dialog).getByText(/hasura graphql/i).parentElement,
+  ).toHaveTextContent(/2\.5 vcpu \+ 5120 mib \(3 replicas\)/i);
+
+  expect(within(dialog).getByText(/auth/i).parentElement).toHaveTextContent(
+    /1\.5 vcpu \+ 3072 mib \(2 replicas\)/i,
+  );
+
+  expect(within(dialog).getByText(/storage/i).parentElement).toHaveTextContent(
+    /2\.5 vcpu \+ 5120 mib \(4 replicas\)/i,
+  );
+
+  // total must contain the sum of all resources when replicas are taken into
+  // account
+  expect(within(dialog).getByText(/total/i).parentElement).toHaveTextContent(
+    /22\.5 vcpu \+ 46080 mib/i,
+  );
+
+  expect(within(dialog).getByText(/\$0.0270\/min/i)).toBeInTheDocument();
+  expect(within(dialog).getByText(/\$1150\.00\/mo/i)).toBeInTheDocument();
 });

dashboard/src/components/settings/resources/ResourcesForm/ResourcesForm.tsx

@@ -4,18 +4,15 @@ import SettingsContainer from '@/components/settings/SettingsContainer';
 import ResourcesConfirmationDialog from '@/components/settings/resources/ResourcesConfirmationDialog';
 import ServiceResourcesFormFragment from '@/components/settings/resources/ServiceResourcesFormFragment';
 import TotalResourcesFormFragment from '@/components/settings/resources/TotalResourcesFormFragment';
-import { prettifyMemory } from '@/features/settings/resources/utils/prettifyMemory';
-import { prettifyVCPU } from '@/features/settings/resources/utils/prettifyVCPU';
+import { calculateBillableResources } from '@/features/settings/resources/utils/calculateBillableResources';
 import type { ResourceSettingsFormValues } from '@/features/settings/resources/utils/resourceSettingsValidationSchema';
 import { resourceSettingsValidationSchema } from '@/features/settings/resources/utils/resourceSettingsValidationSchema';
-import useProPlan from '@/hooks/common/useProPlan';
+import { useProPlan } from '@/hooks/common/useProPlan';
 import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import { Alert } from '@/ui/Alert';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Box from '@/ui/v2/Box';
-import Button from '@/ui/v2/Button';
 import Divider from '@/ui/v2/Divider';
-import Text from '@/ui/v2/Text';
 import {
   RESOURCE_VCPU_MULTIPLIER,
   RESOURCE_VCPU_PRICE,
@@ -27,29 +24,27 @@ import {
   useUpdateConfigMutation,
 } from '@/utils/__generated__/graphql';
 import getServerError from '@/utils/settings/getServerError';
-import getUnallocatedResources from '@/utils/settings/getUnallocatedResources';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';
+import ResourcesFormFooter from './ResourcesFormFooter';
 
 function getInitialServiceResources(
   data: GetResourcesQuery,
   service: Exclude<keyof GetResourcesQuery['config'], '__typename'>,
 ) {
-  const { cpu, memory } = data?.config?.[service]?.resources?.compute || {};
+  const { compute, replicas } = data?.config?.[service]?.resources || {};
 
   return {
-    vcpu: cpu || 0,
-    memory: memory || 0,
+    replicas,
+    vcpu: compute?.cpu || 0,
+    memory: compute?.memory || 0,
   };
 }
 
 export default function ResourcesForm() {
-  const [validationError, setValidationError] = useState<Error | null>(null);
-
   const { openDialog, closeDialog } = useDialog();
   const { currentProject } = useCurrentWorkspaceAndProject();
 
@@ -95,14 +90,26 @@ export default function ResourcesForm() {
       enabled: totalInitialVCPU > 0 && totalInitialMemory > 0,
       totalAvailableVCPU: totalInitialVCPU || 2000,
       totalAvailableMemory: totalInitialMemory || 4096,
-      hasuraVCPU: initialHasuraResources.vcpu || 500,
-      hasuraMemory: initialHasuraResources.memory || 1536,
-      databaseVCPU: initialDatabaseResources.vcpu || 1000,
-      databaseMemory: initialDatabaseResources.memory || 2048,
-      authVCPU: initialAuthResources.vcpu || 250,
-      authMemory: initialAuthResources.memory || 256,
-      storageVCPU: initialStorageResources.vcpu || 250,
-      storageMemory: initialStorageResources.memory || 256,
+      database: {
+        replicas: initialDatabaseResources.replicas || 1,
+        vcpu: initialDatabaseResources.vcpu || 1000,
+        memory: initialDatabaseResources.memory || 2048,
+      },
+      hasura: {
+        replicas: initialHasuraResources.replicas || 1,
+        vcpu: initialHasuraResources.vcpu || 500,
+        memory: initialHasuraResources.memory || 1536,
+      },
+      auth: {
+        replicas: initialAuthResources.replicas || 1,
+        vcpu: initialAuthResources.vcpu || 250,
+        memory: initialAuthResources.memory || 256,
+      },
+      storage: {
+        replicas: initialStorageResources.replicas || 1,
+        vcpu: initialStorageResources.vcpu || 250,
+        memory: initialStorageResources.memory || 256,
+      },
     },
     resolver: yupResolver(resourceSettingsValidationSchema),
   });
@@ -127,16 +134,32 @@ export default function ResourcesForm() {
 
   const { watch, formState } = form;
   const isDirty = Object.keys(formState.dirtyFields).length > 0;
+  const hasFormErrors = Object.keys(formState.errors).length > 0;
 
   const enabled = watch('enabled');
-  const totalAvailableVCPU = enabled ? watch('totalAvailableVCPU') : 0;
+
+  const billableResources = calculateBillableResources(
+    {
+      replicas: initialDatabaseResources.replicas,
+      vcpu: initialDatabaseResources.vcpu,
+    },
+    {
+      replicas: initialHasuraResources.replicas,
+      vcpu: initialHasuraResources.vcpu,
+    },
+    {
+      replicas: initialAuthResources.replicas,
+      vcpu: initialAuthResources.vcpu,
+    },
+    {
+      replicas: initialStorageResources.replicas,
+      vcpu: initialStorageResources.vcpu,
+    },
+  );
 
   const initialPrice =
-    RESOURCE_VCPU_PRICE * (totalInitialVCPU / RESOURCE_VCPU_MULTIPLIER) +
-    proPlan.price;
-  const updatedPrice =
-    RESOURCE_VCPU_PRICE * (totalAvailableVCPU / RESOURCE_VCPU_MULTIPLIER) +
-    proPlan.price;
+    proPlan.price +
+    (billableResources.vcpu / RESOURCE_VCPU_MULTIPLIER) * RESOURCE_VCPU_PRICE;
 
   async function handleSubmit(formValues: ResourceSettingsFormValues) {
     const updateConfigPromise = updateConfig({
@@ -144,46 +167,46 @@ export default function ResourcesForm() {
         appId: currentProject?.id,
         config: {
           postgres: {
-            resources: enabled
+            resources: formValues.enabled
               ? {
                   compute: {
-                    cpu: formValues.databaseVCPU,
-                    memory: formValues.databaseMemory,
+                    cpu: formValues.database.vcpu,
+                    memory: formValues.database.memory,
                   },
-                  replicas: 1,
+                  replicas: formValues.database.replicas,
                 }
               : null,
           },
           hasura: {
-            resources: enabled
+            resources: formValues.enabled
               ? {
                   compute: {
-                    cpu: formValues.hasuraVCPU,
-                    memory: formValues.hasuraMemory,
+                    cpu: formValues.hasura.vcpu,
+                    memory: formValues.hasura.memory,
                   },
-                  replicas: 1,
+                  replicas: formValues.hasura.replicas,
                 }
               : null,
           },
           auth: {
-            resources: enabled
+            resources: formValues.enabled
               ? {
                   compute: {
-                    cpu: formValues.authVCPU,
-                    memory: formValues.authMemory,
+                    cpu: formValues.auth.vcpu,
+                    memory: formValues.auth.memory,
                   },
-                  replicas: 1,
+                  replicas: formValues.auth.replicas,
                 }
               : null,
           },
           storage: {
-            resources: enabled
+            resources: formValues.enabled
               ? {
                   compute: {
-                    cpu: formValues.storageVCPU,
-                    memory: formValues.storageMemory,
+                    cpu: formValues.storage.vcpu,
+                    memory: formValues.storage.memory,
                   },
-                  replicas: 1,
+                  replicas: formValues.storage.replicas,
                 }
               : null,
           },
@@ -209,14 +232,26 @@ export default function ResourcesForm() {
           enabled: false,
           totalAvailableVCPU: 2000,
           totalAvailableMemory: 4096,
-          hasuraVCPU: 500,
-          hasuraMemory: 1536,
-          databaseVCPU: 1000,
-          databaseMemory: 2048,
-          authVCPU: 250,
-          authMemory: 256,
-          storageVCPU: 250,
-          storageMemory: 256,
+          database: {
+            replicas: 1,
+            vcpu: 1000,
+            memory: 2048,
+          },
+          hasura: {
+            replicas: 1,
+            vcpu: 500,
+            memory: 1536,
+          },
+          auth: {
+            replicas: 1,
+            vcpu: 250,
+            memory: 256,
+          },
+          storage: {
+            replicas: 1,
+            vcpu: 250,
+            memory: 256,
+          },
         });
       } else {
         form.reset(null, { keepValues: true, keepDirty: false });
@@ -227,41 +262,13 @@ export default function ResourcesForm() {
   }
 
   function handleConfirm(formValues: ResourceSettingsFormValues) {
-    setValidationError(null);
-
-    const { vcpu: unallocatedVCPU, memory: unallocatedMemory } =
-      getUnallocatedResources(formValues);
-    const hasUnusedResources = unallocatedVCPU > 0 || unallocatedMemory > 0;
-
-    if (hasUnusedResources) {
-      const unusedResourceMessage = [
-        unallocatedVCPU > 0 ? `${prettifyVCPU(unallocatedVCPU)} vCPUs` : '',
-        unallocatedMemory > 0
-          ? `${prettifyMemory(unallocatedMemory)} of Memory`
-          : '',
-      ]
-        .filter(Boolean)
-        .join(' and ');
-
-      setValidationError(
-        new Error(
-          `You now have ${unusedResourceMessage} unused. Allocate it to any of the services before saving.`,
-        ),
-      );
-
-      return;
-    }
-
     openDialog({
-      title: enabled
+      title: formValues.enabled
         ? 'Confirm Dedicated Resources'
         : 'Disable Dedicated Resources',
       component: (
         <ResourcesConfirmationDialog
-          updatedResources={{
-            vcpu: enabled ? formValues.totalAvailableVCPU : 0,
-            memory: enabled ? formValues.totalAvailableMemory : 0,
-          }}
+          formValues={formValues}
           onCancel={closeDialog}
           onSubmit={async () => {
             await handleSubmit(formValues);
@@ -304,47 +311,46 @@ export default function ResourcesForm() {
               <ServiceResourcesFormFragment
                 title="PostgreSQL Database"
                 description="Manage how much compute you need for the PostgreSQL Database."
-                cpuKey="databaseVCPU"
-                memoryKey="databaseMemory"
+                serviceKey="database"
+                disableReplicas
               />
               <Divider />
               <ServiceResourcesFormFragment
                 title="Hasura GraphQL"
                 description="Manage how much compute you need for the Hasura GraphQL API."
-                cpuKey="hasuraVCPU"
-                memoryKey="hasuraMemory"
+                serviceKey="hasura"
               />
               <Divider />
               <ServiceResourcesFormFragment
                 title="Auth"
                 description="Manage how much compute you need for Auth."
-                cpuKey="authVCPU"
-                memoryKey="authMemory"
+                serviceKey="auth"
               />
               <Divider />
               <ServiceResourcesFormFragment
                 title="Storage"
                 description="Manage how much compute you need for Storage."
-                cpuKey="storageVCPU"
-                memoryKey="storageMemory"
+                serviceKey="storage"
               />
-              {validationError && (
+
+              {hasFormErrors && (
                 <Box className="px-4 pb-4">
                   <Alert
                     severity="error"
                     className="flex flex-col gap-2 text-left"
                   >
-                    <strong>
-                      Please use all the available vCPUs and Memory
-                    </strong>
+                    <strong>Invalid Configuration</strong>
 
-                    <p>{validationError.message}</p>
+                    <p>
+                      Please check the form for errors and the allocation for
+                      each service and try again.
+                    </p>
                   </Alert>
                 </Box>
               )}
             </>
           ) : (
-            <Box className={twMerge('px-4', (enabled || isDirty) && 'pb-4')}>
+            <Box className={twMerge('px-4', 'pb-4')}>
               <Alert className="text-left">
                 Enable this feature to access custom resource allocation for
                 your services.
@@ -352,29 +358,7 @@ export default function ResourcesForm() {
             </Box>
           )}
 
-          {(enabled || isDirty) && (
-            <Box className="flex flex-row items-center justify-between border-t px-4 pt-4">
-              <span />
-
-              <Box className="flex flex-row items-center gap-4">
-                <Text>
-                  Total cost:{' '}
-                  <span className="font-medium">
-                    ${updatedPrice.toFixed(2)}/mo
-                  </span>
-                </Text>
-
-                <Button
-                  type="submit"
-                  variant={isDirty ? 'contained' : 'outlined'}
-                  color={isDirty ? 'primary' : 'secondary'}
-                  disabled={!isDirty}
-                >
-                  Save
-                </Button>
-              </Box>
-            </Box>
-          )}
+          <ResourcesFormFooter />
         </SettingsContainer>
       </Form>
     </FormProvider>

dashboard/src/components/settings/resources/ResourcesForm/ResourcesFormFooter.tsx

@@ -0,0 +1,118 @@
+import { calculateBillableResources } from '@/features/settings/resources/utils/calculateBillableResources';
+import type { ResourceSettingsFormValues } from '@/features/settings/resources/utils/resourceSettingsValidationSchema';
+import { useProPlan } from '@/hooks/common/useProPlan';
+import ActivityIndicator from '@/ui/v2/ActivityIndicator';
+import Box from '@/ui/v2/Box';
+import Button from '@/ui/v2/Button';
+import Link from '@/ui/v2/Link';
+import Text from '@/ui/v2/Text';
+import Tooltip from '@/ui/v2/Tooltip';
+import ArrowSquareOutIcon from '@/ui/v2/icons/ArrowSquareOutIcon';
+import { InfoIcon } from '@/ui/v2/icons/InfoIcon';
+import {
+  RESOURCE_VCPU_MULTIPLIER,
+  RESOURCE_VCPU_PRICE,
+} from '@/utils/CONSTANTS';
+import { useFormState, useWatch } from 'react-hook-form';
+
+export default function ResourcesFormFooter() {
+  const {
+    data: proPlan,
+    loading: proPlanLoading,
+    error: proPlanError,
+  } = useProPlan();
+
+  const formState = useFormState<ResourceSettingsFormValues>();
+  const isDirty = Object.keys(formState.dirtyFields).length > 0;
+
+  const enabled = useWatch<ResourceSettingsFormValues>({ name: 'enabled' });
+  const [totalAvailableVCPU, database, hasura, auth, storage] = useWatch<
+    ResourceSettingsFormValues,
+    ['totalAvailableVCPU', 'database', 'hasura', 'auth', 'storage']
+  >({
+    name: ['totalAvailableVCPU', 'database', 'hasura', 'auth', 'storage'],
+  });
+
+  if (proPlanLoading) {
+    return <ActivityIndicator label="Loading plan details..." delay={1000} />;
+  }
+
+  if (proPlanError) {
+    throw proPlanError;
+  }
+
+  const priceForTotalAvailableVCPU =
+    (totalAvailableVCPU / RESOURCE_VCPU_MULTIPLIER) * RESOURCE_VCPU_PRICE;
+
+  const billableResources = calculateBillableResources(
+    {
+      replicas: database?.replicas,
+      vcpu: database?.vcpu,
+    },
+    {
+      replicas: hasura?.replicas,
+      vcpu: hasura?.vcpu,
+    },
+    {
+      replicas: auth?.replicas,
+      vcpu: auth?.vcpu,
+    },
+    {
+      replicas: storage?.replicas,
+      vcpu: storage?.vcpu,
+    },
+  );
+
+  const updatedPrice = enabled
+    ? Math.max(
+        priceForTotalAvailableVCPU,
+        (billableResources.vcpu / RESOURCE_VCPU_MULTIPLIER) *
+          RESOURCE_VCPU_PRICE,
+      ) + proPlan.price
+    : proPlan.price;
+
+  return (
+    <Box
+      className="grid items-center gap-4 border-t px-4 pt-4 lg:grid-flow-col lg:justify-between lg:gap-2"
+      component="footer"
+    >
+      <Text>
+        Learn more about{' '}
+        <Link
+          href="https://docs.nhost.io/platform/compute"
+          target="_blank"
+          rel="noopener noreferrer"
+          underline="hover"
+          className="font-medium"
+        >
+          Compute Resources
+          <ArrowSquareOutIcon className="ml-1 h-4 w-4" />
+        </Link>
+      </Text>
+
+      {(enabled || isDirty) && (
+        <Box className="grid grid-flow-col items-center justify-between gap-4">
+          <Box className="grid grid-flow-col items-center gap-1.5">
+            <Text>
+              Approximate cost:{' '}
+              <span className="font-medium">${updatedPrice.toFixed(2)}/mo</span>
+            </Text>
+
+            <Tooltip title="$0.0012/minute for every 1 vCPU and 2 GiB of RAM">
+              <InfoIcon aria-label="Info" className="h-4 w-4" color="primary" />
+            </Tooltip>
+          </Box>
+
+          <Button
+            type="submit"
+            variant={isDirty ? 'contained' : 'outlined'}
+            color={isDirty ? 'primary' : 'secondary'}
+            disabled={!isDirty}
+          >
+            Save
+          </Button>
+        </Box>
+      )}
+    </Box>
+  );
+}

dashboard/src/components/settings/resources/ServiceResourcesFormFragment/ServiceResourcesFormFragment.tsx

@@ -3,13 +3,17 @@ import { prettifyVCPU } from '@/features/settings/resources/utils/prettifyVCPU';
 import type { ResourceSettingsFormValues } from '@/features/settings/resources/utils/resourceSettingsValidationSchema';
 import {
   MAX_SERVICE_MEMORY,
+  MAX_SERVICE_REPLICAS,
   MAX_SERVICE_VCPU,
   MIN_SERVICE_MEMORY,
+  MIN_SERVICE_REPLICAS,
   MIN_SERVICE_VCPU,
 } from '@/features/settings/resources/utils/resourceSettingsValidationSchema';
 import Box from '@/ui/v2/Box';
 import Slider from '@/ui/v2/Slider';
 import Text from '@/ui/v2/Text';
+import Tooltip from '@/ui/v2/Tooltip';
+import { ExclamationIcon } from '@/ui/v2/icons/ExclamationIcon';
 import { RESOURCE_MEMORY_STEP, RESOURCE_VCPU_STEP } from '@/utils/CONSTANTS';
 import { useFormContext, useWatch } from 'react-hook-form';
 
@@ -23,79 +27,98 @@ export interface ServiceResourcesFormFragmentProps {
    */
   description: string;
   /**
-   * Form field name for CPU.
+   * Form field name for service.
    */
-  cpuKey: Exclude<
+  serviceKey: Exclude<
     keyof ResourceSettingsFormValues,
     'enabled' | 'totalAvailableVCPU' | 'totalAvailableMemory'
   >;
   /**
-   * Form field name for Memory.
+   * Whether to disable the replicas field.
    */
-  memoryKey: Exclude<
-    keyof ResourceSettingsFormValues,
-    'enabled' | 'totalAvailableVCPU' | 'totalAvailableMemory'
-  >;
+  disableReplicas?: boolean;
 }
 
 export default function ServiceResourcesFormFragment({
   title,
   description,
-  cpuKey,
-  memoryKey,
+  serviceKey,
+  disableReplicas = false,
 }: ServiceResourcesFormFragmentProps) {
-  const { setValue } = useFormContext<ResourceSettingsFormValues>();
+  const {
+    setValue,
+    trigger: triggerValidation,
+    formState,
+  } = useFormContext<ResourceSettingsFormValues>();
   const formValues = useWatch<ResourceSettingsFormValues>();
+  const serviceValues = formValues[serviceKey];
 
   // Total allocated CPU for all resources
-  const totalAllocatedCPU = Object.keys(formValues)
-    .filter((key) => key.endsWith('CPU') && key !== 'totalAvailableVCPU')
-    .reduce((acc, key) => acc + formValues[key], 0);
+  const totalAllocatedVCPU = Object.keys(formValues)
+    .filter(
+      (key) =>
+        !['enabled', 'totalAvailableVCPU', 'totalAvailableMemory'].includes(
+          key,
+        ),
+    )
+    .reduce((acc, key) => acc + formValues[key].vcpu, 0);
 
   // Total allocated memory for all resources
   const totalAllocatedMemory = Object.keys(formValues)
-    .filter((key) => key.endsWith('Memory') && key !== 'totalAvailableMemory')
-    .reduce((acc, key) => acc + formValues[key], 0);
+    .filter(
+      (key) =>
+        !['enabled', 'totalAvailableVCPU', 'totalAvailableMemory'].includes(
+          key,
+        ),
+    )
+    .reduce((acc, key) => acc + formValues[key].memory, 0);
 
-  const remainingCPU = formValues.totalAvailableVCPU - totalAllocatedCPU;
-  const allowedCPU = remainingCPU + formValues[cpuKey];
+  const remainingVCPU = formValues.totalAvailableVCPU - totalAllocatedVCPU;
+  const allowedVCPU = remainingVCPU + serviceValues.vcpu;
 
   const remainingMemory =
     formValues.totalAvailableMemory - totalAllocatedMemory;
-  const allowedMemory = remainingMemory + formValues[memoryKey];
+  const allowedMemory = remainingMemory + serviceValues.memory;
 
-  function handleCPUChange(value: string) {
-    const updatedCPU = parseFloat(value);
-    const exceedsAvailableCPU =
-      updatedCPU + (totalAllocatedCPU - formValues[cpuKey]) >
-      formValues.totalAvailableVCPU;
+  function handleReplicaChange(value: string) {
+    const updatedReplicas = parseInt(value, 10);
 
-    if (
-      Number.isNaN(updatedCPU) ||
-      exceedsAvailableCPU ||
-      updatedCPU < MIN_SERVICE_VCPU
-    ) {
+    if (updatedReplicas < MIN_SERVICE_REPLICAS) {
       return;
     }
 
-    setValue(cpuKey, updatedCPU, { shouldDirty: true });
+    setValue(`${serviceKey}.replicas`, updatedReplicas, { shouldDirty: true });
+    triggerValidation(`${serviceKey}.replicas`);
+  }
+
+  function handleVCPUChange(value: string) {
+    const updatedVCPU = parseFloat(value);
+
+    if (Number.isNaN(updatedVCPU) || updatedVCPU < MIN_SERVICE_VCPU) {
+      return;
+    }
+
+    setValue(`${serviceKey}.vcpu`, updatedVCPU, { shouldDirty: true });
+
+    // trigger validation for "replicas" field
+    if (!disableReplicas) {
+      triggerValidation(`${serviceKey}.replicas`);
+    }
   }
 
   function handleMemoryChange(value: string) {
     const updatedMemory = parseFloat(value);
-    const exceedsAvailableMemory =
-      updatedMemory + (totalAllocatedMemory - formValues[memoryKey]) >
-      formValues.totalAvailableMemory;
 
-    if (
-      Number.isNaN(updatedMemory) ||
-      exceedsAvailableMemory ||
-      updatedMemory < MIN_SERVICE_MEMORY
-    ) {
+    if (Number.isNaN(updatedMemory) || updatedMemory < MIN_SERVICE_MEMORY) {
       return;
     }
 
-    setValue(memoryKey, updatedMemory, { shouldDirty: true });
+    setValue(`${serviceKey}.memory`, updatedMemory, { shouldDirty: true });
+
+    // trigger validation for "replicas" field
+    if (!disableReplicas) {
+      triggerValidation(`${serviceKey}.replicas`);
+    }
   }
 
   return (
@@ -113,14 +136,14 @@ export default function ServiceResourcesFormFragment({
           <Text>
             Allocated vCPUs:{' '}
             <span className="font-medium">
-              {prettifyVCPU(formValues[cpuKey])}
+              {prettifyVCPU(serviceValues.vcpu)}
             </span>
           </Text>
 
-          {remainingCPU > 0 && formValues[cpuKey] < MAX_SERVICE_VCPU && (
+          {remainingVCPU > 0 && serviceValues.vcpu < MAX_SERVICE_VCPU && (
             <Text className="text-sm">
               <span className="font-medium">
-                {prettifyVCPU(remainingCPU)} vCPUs
+                {prettifyVCPU(remainingVCPU)} vCPUs
               </span>{' '}
               remaining
             </Text>
@@ -128,11 +151,11 @@ export default function ServiceResourcesFormFragment({
         </Box>
 
         <Slider
-          value={formValues[cpuKey]}
-          onChange={(_event, value) => handleCPUChange(value.toString())}
+          value={serviceValues.vcpu}
+          onChange={(_event, value) => handleVCPUChange(value.toString())}
           max={MAX_SERVICE_VCPU}
           step={RESOURCE_VCPU_STEP}
-          allowed={allowedCPU}
+          allowed={allowedVCPU}
           aria-label={`${title} vCPU`}
           marks
         />
@@ -143,11 +166,11 @@ export default function ServiceResourcesFormFragment({
           <Text>
             Allocated Memory:{' '}
             <span className="font-medium">
-              {prettifyMemory(formValues[memoryKey])}
+              {prettifyMemory(serviceValues.memory)}
             </span>
           </Text>
 
-          {remainingMemory > 0 && formValues[memoryKey] < MAX_SERVICE_MEMORY && (
+          {remainingMemory > 0 && serviceValues.memory < MAX_SERVICE_MEMORY && (
             <Text className="text-sm">
               <span className="font-medium">
                 {prettifyMemory(remainingMemory)} of Memory
@@ -158,7 +181,7 @@ export default function ServiceResourcesFormFragment({
         </Box>
 
         <Slider
-          value={formValues[memoryKey]}
+          value={serviceValues.memory}
           onChange={(_event, value) => handleMemoryChange(value.toString())}
           max={MAX_SERVICE_MEMORY}
           step={RESOURCE_MEMORY_STEP}
@@ -167,6 +190,47 @@ export default function ServiceResourcesFormFragment({
           marks
         />
       </Box>
+
+      {!disableReplicas && (
+        <Box className="grid grid-flow-row gap-2">
+          <Box className="grid grid-flow-col items-center justify-start gap-2">
+            <Text
+              color={
+                formState.errors?.[serviceKey]?.replicas?.message
+                  ? 'error'
+                  : 'primary'
+              }
+              aria-errormessage={`${serviceKey}-replicas-error-tooltip`}
+            >
+              Replicas:{' '}
+              <span className="font-medium">{serviceValues.replicas}</span>
+            </Text>
+
+            {formState.errors?.[serviceKey]?.replicas?.message ? (
+              <Tooltip
+                title={formState.errors[serviceKey].replicas.message}
+                id={`${serviceKey}-replicas-error-tooltip`}
+              >
+                <ExclamationIcon
+                  color="error"
+                  className="h-4 w-4"
+                  aria-hidden="false"
+                />
+              </Tooltip>
+            ) : null}
+          </Box>
+
+          <Slider
+            value={serviceValues.replicas}
+            onChange={(_event, value) => handleReplicaChange(value.toString())}
+            min={0}
+            max={MAX_SERVICE_REPLICAS}
+            step={1}
+            aria-label={`${title} Replicas`}
+            marks
+          />
+        </Box>
+      )}
     </Box>
   );
 }

dashboard/src/components/settings/resources/TotalResourcesFormFragment/TotalResourcesFormFragment.tsx

@@ -1,12 +1,13 @@
+import { calculateBillableResources } from '@/features/settings/resources/utils/calculateBillableResources';
+import { getAllocatedResources } from '@/features/settings/resources/utils/getAllocatedResources';
 import { prettifyMemory } from '@/features/settings/resources/utils/prettifyMemory';
 import { prettifyVCPU } from '@/features/settings/resources/utils/prettifyVCPU';
 import type { ResourceSettingsFormValues } from '@/features/settings/resources/utils/resourceSettingsValidationSchema';
 import {
   MAX_TOTAL_VCPU,
-  MIN_TOTAL_MEMORY,
   MIN_TOTAL_VCPU,
 } from '@/features/settings/resources/utils/resourceSettingsValidationSchema';
-import useProPlan from '@/hooks/common/useProPlan';
+import { useProPlan } from '@/hooks/common/useProPlan';
 import { Alert } from '@/ui/Alert';
 import Box from '@/ui/v2/Box';
 import Slider, { sliderClasses } from '@/ui/v2/Slider';
@@ -19,7 +20,6 @@ import {
   RESOURCE_VCPU_PRICE,
   RESOURCE_VCPU_STEP,
 } from '@/utils/CONSTANTS';
-import getUnallocatedResources from '@/utils/settings/getUnallocatedResources';
 import { alpha, styled } from '@mui/material';
 import { useFormContext, useWatch } from 'react-hook-form';
 
@@ -59,51 +59,72 @@ export default function TotalResourcesFormFragment({
     throw proPlanError;
   }
 
-  const allocatedCPU =
-    formValues.databaseVCPU +
-    formValues.hasuraVCPU +
-    formValues.authVCPU +
-    formValues.storageVCPU;
-  const allocatedMemory =
-    formValues.databaseMemory +
-    formValues.hasuraMemory +
-    formValues.authMemory +
-    formValues.storageMemory;
+  const priceForTotalAvailableVCPU =
+    (formValues.totalAvailableVCPU / RESOURCE_VCPU_MULTIPLIER) *
+    RESOURCE_VCPU_PRICE;
+
+  const billableResources = calculateBillableResources(
+    {
+      replicas: formValues.database?.replicas,
+      vcpu: formValues.database?.vcpu,
+      memory: formValues.database?.memory,
+    },
+    {
+      replicas: formValues.hasura?.replicas,
+      vcpu: formValues.hasura?.vcpu,
+      memory: formValues.hasura?.memory,
+    },
+    {
+      replicas: formValues.auth?.replicas,
+      vcpu: formValues.auth?.vcpu,
+      memory: formValues.auth?.memory,
+    },
+    {
+      replicas: formValues.storage?.replicas,
+      vcpu: formValues.storage?.vcpu,
+      memory: formValues.storage?.memory,
+    },
+  );
 
   const updatedPrice =
-    RESOURCE_VCPU_PRICE *
-      (formValues.totalAvailableVCPU / RESOURCE_VCPU_MULTIPLIER) +
-    proPlan.price;
+    Math.max(
+      priceForTotalAvailableVCPU,
+      (billableResources.vcpu / RESOURCE_VCPU_MULTIPLIER) * RESOURCE_VCPU_PRICE,
+    ) + proPlan.price;
 
-  const { vcpu: unallocatedVCPU, memory: unallocatedMemory } =
-    getUnallocatedResources(formValues);
+  const { vcpu: allocatedVCPU, memory: allocatedMemory } =
+    getAllocatedResources(formValues);
+  const remainingVCPU = formValues.totalAvailableVCPU - allocatedVCPU;
+  const remainingMemory = formValues.totalAvailableMemory - allocatedMemory;
+  const hasUnusedResources = remainingVCPU > 0 || remainingMemory > 0;
+  const hasOverallocatedResources = remainingVCPU < 0 || remainingMemory < 0;
 
-  const hasUnusedResources = unallocatedVCPU > 0 || unallocatedMemory > 0;
   const unusedResourceMessage = [
-    unallocatedVCPU > 0 ? `${prettifyVCPU(unallocatedVCPU)} vCPUs` : '',
-    unallocatedMemory > 0
-      ? `${prettifyMemory(unallocatedMemory)} of Memory`
-      : '',
+    remainingVCPU > 0 ? `${prettifyVCPU(remainingVCPU)} vCPUs` : '',
+    remainingMemory > 0 ? `${prettifyMemory(remainingMemory)} of Memory` : '',
   ]
     .filter(Boolean)
     .join(' and ');
 
-  function handleCPUChange(value: string) {
-    const updatedCPU = parseFloat(value);
+  const overallocatedResourceMessage = [
+    remainingVCPU < 0 ? `${prettifyVCPU(-remainingVCPU)} vCPUs` : '',
+    remainingMemory < 0 ? `${prettifyMemory(-remainingMemory)} of Memory` : '',
+  ]
+    .filter(Boolean)
+    .join(' and ');
+
+  function handleVCPUChange(value: string) {
+    const updatedVCPU = parseFloat(value);
     const updatedMemory =
-      (updatedCPU / RESOURCE_VCPU_MULTIPLIER) *
+      (updatedVCPU / RESOURCE_VCPU_MULTIPLIER) *
       RESOURCE_VCPU_MEMORY_RATIO *
       RESOURCE_MEMORY_MULTIPLIER;
 
-    if (
-      Number.isNaN(updatedCPU) ||
-      updatedCPU < Math.max(MIN_TOTAL_VCPU, allocatedCPU) ||
-      updatedMemory < Math.max(MIN_TOTAL_MEMORY, allocatedMemory)
-    ) {
+    if (Number.isNaN(updatedVCPU) || updatedVCPU < MIN_TOTAL_VCPU) {
       return;
     }
 
-    setValue('totalAvailableVCPU', updatedCPU, { shouldDirty: true });
+    setValue('totalAvailableVCPU', updatedVCPU, { shouldDirty: true });
     setValue('totalAvailableMemory', updatedMemory, { shouldDirty: true });
   }
 
@@ -147,7 +168,7 @@ export default function TotalResourcesFormFragment({
 
           <StyledAvailableCpuSlider
             value={formValues.totalAvailableVCPU}
-            onChange={(_event, value) => handleCPUChange(value.toString())}
+            onChange={(_event, value) => handleVCPUChange(value.toString())}
             max={MAX_TOTAL_VCPU}
             step={RESOURCE_VCPU_STEP}
             aria-label="Total Available vCPU"
@@ -155,19 +176,34 @@ export default function TotalResourcesFormFragment({
         </Box>
 
         <Alert
-          severity={hasUnusedResources ? 'warning' : 'info'}
+          severity={
+            hasUnusedResources || hasOverallocatedResources ? 'warning' : 'info'
+          }
           className="grid grid-flow-row gap-2 rounded-t-none rounded-b-[5px] text-left"
         >
-          {hasUnusedResources ? (
+          {hasUnusedResources && !hasOverallocatedResources && (
             <>
               <strong>Please use all the available vCPUs and Memory</strong>
 
               <p>
-                You now have {unusedResourceMessage} unused. Allocate it to any
-                of the services before saving.
+                You have {unusedResourceMessage} unused. Allocate it to any of
+                the services before saving.
               </p>
             </>
-          ) : (
+          )}
+
+          {hasOverallocatedResources && (
+            <>
+              <strong>Overallocated Resources</strong>
+
+              <p>
+                You have {overallocatedResourceMessage} overallocated. Reduce it
+                before saving or increase the total amount.
+              </p>
+            </>
+          )}
+
+          {!hasUnusedResources && !hasOverallocatedResources && (
             <>
               <strong>You&apos;re All Set</strong>
 

dashboard/src/components/ui/v2/Slider/Slider.tsx

@@ -46,7 +46,7 @@ const StyledSlider = styled(MaterialSlider)(({ theme }) => ({
     backgroundColor: theme.palette.primary.main,
     [`&:focus, &:hover, &.${materialSliderClasses.active}, &.${materialSliderClasses.focusVisible}`]:
       {
-        boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.3)}`,
+        boxShadow: `0 0 0 3px ${alpha(theme.palette.primary.main, 0.35)}`,
       },
   },
 }));

dashboard/src/components/ui/v2/icons/ExclamationIcon/ExclamationIcon.tsx

@@ -0,0 +1,34 @@
+import type { IconProps } from '@/ui/v2/icons';
+import SvgIcon from '@/ui/v2/icons/SvgIcon';
+import type { ForwardedRef } from 'react';
+import { forwardRef } from 'react';
+
+function ExclamationIcon(props: IconProps, ref: ForwardedRef<SVGSVGElement>) {
+  return (
+    <SvgIcon
+      width="16"
+      height="16"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      aria-label="Exclamation mark"
+      ref={ref}
+      {...props}
+    >
+      <path
+        opacity=".2"
+        d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.75 5.5V4h-1.5v5.5h1.5v-4Zm0 5.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+}
+
+ExclamationIcon.displayName = 'NhostExclamationIcon';
+
+export default forwardRef(ExclamationIcon);

dashboard/src/components/ui/v2/icons/ExclamationIcon/index.ts

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

dashboard/src/features/settings/resources/utils/calculateBillableResources/calculateBillableResources.test.ts

@@ -0,0 +1,47 @@
+import calculateBillableResources from './calculateBillableResources';
+
+test('should return zero if no services are provided', () => {
+  expect(calculateBillableResources()).toMatchObject({ vcpu: 0, memory: 0 });
+});
+
+test('should return the correct cost for a single service', () => {
+  expect(
+    calculateBillableResources({ replicas: 1, vcpu: 250, memory: 500 }),
+  ).toMatchObject({
+    vcpu: 250,
+    memory: 500,
+  });
+});
+
+test('should return the correct cost for multiple services', () => {
+  expect(
+    calculateBillableResources(
+      { replicas: 1, vcpu: 250, memory: 250 },
+      { replicas: 1, vcpu: 250, memory: 500 },
+    ),
+  ).toMatchObject({ vcpu: 500, memory: 750 });
+});
+
+test('should return the correct cost for multiple services with different vCPU and replica counts', () => {
+  expect(
+    calculateBillableResources(
+      { replicas: 2, vcpu: 250, memory: 500 },
+      { replicas: 1, vcpu: 500, memory: 750 },
+    ),
+  ).toMatchObject({ vcpu: 1000, memory: 1750 });
+});
+
+test('should not count services with no replicas or vCPU and memory', () => {
+  expect(
+    calculateBillableResources(
+      // should count
+      { replicas: 1, vcpu: 250 },
+      // shouldn't count
+      { replicas: 1 },
+      // shouldn't count
+      { vcpu: 250, memory: 1000 },
+      // should count
+      { replicas: 1, memory: 500 },
+    ),
+  ).toMatchObject({ vcpu: 250, memory: 500 });
+});

dashboard/src/features/settings/resources/utils/calculateBillableResources/calculateBillableResources.ts

@@ -0,0 +1,37 @@
+/**
+ * Calculate the approximate cost of a list of services.
+ *
+ * @param services - The list of services to calculate the cost of.
+ * @returns The approximate cost of the services.
+ */
+export default function calculateBillableResources(
+  ...services: { replicas?: number; vcpu?: number; memory?: number }[]
+) {
+  return services.reduce(
+    (total, { replicas, vcpu, memory }) => {
+      if (!replicas || (!vcpu && !memory)) {
+        return total;
+      }
+
+      if (!vcpu && memory) {
+        return {
+          ...total,
+          memory: total.memory + memory * replicas,
+        };
+      }
+
+      if (vcpu && !memory) {
+        return {
+          ...total,
+          vcpu: total.vcpu + vcpu * replicas,
+        };
+      }
+
+      return {
+        vcpu: total.vcpu + vcpu * replicas,
+        memory: total.memory + memory * replicas,
+      };
+    },
+    { vcpu: 0, memory: 0 } as { vcpu: number; memory: number },
+  );
+}

dashboard/src/features/settings/resources/utils/calculateBillableResources/index.ts

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

dashboard/src/features/settings/resources/utils/getAllocatedResources/getAllocatedResources.test.ts

@@ -0,0 +1,60 @@
+import { test } from 'vitest';
+import getAllocatedResources from './getAllocatedResources';
+
+test('should return the total number of allocated resources', () => {
+  expect(
+    getAllocatedResources({
+      enabled: true,
+      totalAvailableVCPU: 1,
+      totalAvailableMemory: 2,
+      database: {
+        replicas: 1,
+        vcpu: 0,
+        memory: 0.5,
+      },
+      hasura: {
+        replicas: 1,
+        vcpu: 0,
+        memory: 0.5,
+      },
+      auth: {
+        replicas: 1,
+        vcpu: 0,
+        memory: 0.5,
+      },
+      storage: {
+        replicas: 1,
+        vcpu: 0,
+        memory: 0.5,
+      },
+    }),
+  ).toEqual({ vcpu: 0, memory: 2 });
+
+  expect(
+    getAllocatedResources({
+      enabled: true,
+      totalAvailableVCPU: 1,
+      totalAvailableMemory: 2,
+      database: {
+        replicas: 1,
+        vcpu: 0.25,
+        memory: 0,
+      },
+      hasura: {
+        replicas: 1,
+        vcpu: 0.25,
+        memory: 0,
+      },
+      auth: {
+        replicas: 1,
+        vcpu: 0.25,
+        memory: 0,
+      },
+      storage: {
+        replicas: 1,
+        vcpu: 0.25,
+        memory: 0,
+      },
+    }),
+  ).toEqual({ vcpu: 1, memory: 0 });
+});

dashboard/src/features/settings/resources/utils/getAllocatedResources/getAllocatedResources.ts

@@ -0,0 +1,34 @@
+import type { ResourceSettingsFormValues } from '@/features/settings/resources/utils/resourceSettingsValidationSchema';
+
+/**
+ * Returns the allocated resources based on the form values.
+ *
+ * @param formValues - The form values.
+ * @returns The allocated resources.
+ */
+export default function getAllocatedResources(
+  formValues: Partial<ResourceSettingsFormValues>,
+) {
+  return Object.keys(formValues).reduce(
+    ({ vcpu, memory }, currentKey) => {
+      // Skip attributes that are not related to any of the services.
+      if (
+        typeof formValues[currentKey] !== 'object' ||
+        !(
+          'vcpu' in formValues[currentKey] && 'memory' in formValues[currentKey]
+        )
+      ) {
+        return { vcpu, memory };
+      }
+
+      return {
+        vcpu: vcpu + (formValues[currentKey].vcpu || 0),
+        memory: memory + (formValues[currentKey].memory || 0),
+      };
+    },
+    {
+      vcpu: 0,
+      memory: 0,
+    },
+  );
+}

dashboard/src/features/settings/resources/utils/getAllocatedResources/index.ts

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

dashboard/src/features/settings/resources/utils/resourceSettingsValidationSchema/resourceSettingsValidationSchema.ts

@@ -28,6 +28,16 @@ export const MAX_TOTAL_VCPU = 60 * RESOURCE_VCPU_MULTIPLIER;
  */
 export const MAX_TOTAL_MEMORY = MAX_TOTAL_VCPU * RESOURCE_VCPU_MEMORY_RATIO;
 
+/**
+ * The minimum amount of replicas that has to be allocated per service.
+ */
+export const MIN_SERVICE_REPLICAS = 1;
+
+/**
+ * The maximum amount of replicas that can be allocated per service.
+ */
+export const MAX_SERVICE_REPLICAS = 32;
+
 /**
  * The minimum amount of CPU that has to be allocated per service.
  */
@@ -51,58 +61,75 @@ export const MAX_SERVICE_MEMORY =
   RESOURCE_VCPU_MEMORY_RATIO *
   RESOURCE_MEMORY_MULTIPLIER;
 
+const serviceValidationSchema = Yup.object({
+  replicas: Yup.number()
+    .label('Replicas')
+    .required()
+    .min(1)
+    .max(MAX_SERVICE_REPLICAS)
+    .test(
+      'is-matching-ratio',
+      `vCPU and Memory for this service must match the 1:${RESOURCE_VCPU_MEMORY_RATIO} ratio if more than one replica is selected.`,
+      (replicas: number, { parent }) => {
+        if (replicas === 1) {
+          return true;
+        }
+
+        return (
+          parent.memory /
+            RESOURCE_MEMORY_MULTIPLIER /
+            (parent.vcpu / RESOURCE_VCPU_MULTIPLIER) ===
+          RESOURCE_VCPU_MEMORY_RATIO
+        );
+      },
+    ),
+  vcpu: Yup.number()
+    .label('vCPUs')
+    .required()
+    .min(MIN_SERVICE_VCPU)
+    .max(MAX_SERVICE_VCPU),
+  memory: Yup.number()
+    .required()
+    .min(MIN_SERVICE_MEMORY)
+    .max(MAX_SERVICE_MEMORY),
+});
+
 export const resourceSettingsValidationSchema = Yup.object({
   enabled: Yup.boolean(),
   totalAvailableVCPU: Yup.number()
     .label('Total Available vCPUs')
     .required()
     .min(MIN_TOTAL_VCPU)
-    .max(MAX_TOTAL_VCPU),
+    .max(MAX_TOTAL_VCPU)
+    .test(
+      'is-equal-to-services',
+      'Total vCPUs must be equal to the sum of all services.',
+      (totalAvailableVCPU: number, { parent }) =>
+        parent.database.vcpu +
+          parent.hasura.vcpu +
+          parent.auth.vcpu +
+          parent.storage.vcpu ===
+        totalAvailableVCPU,
+    ),
   totalAvailableMemory: Yup.number()
     .label('Available Memory')
     .required()
     .min(MIN_TOTAL_MEMORY)
-    .max(MAX_TOTAL_MEMORY),
-  databaseVCPU: Yup.number()
-    .label('Database vCPUs')
-    .required()
-    .min(MIN_SERVICE_VCPU)
-    .max(MAX_SERVICE_VCPU),
-  databaseMemory: Yup.number()
-    .label('Database Memory')
-    .required()
-    .min(MIN_SERVICE_MEMORY)
-    .max(MAX_SERVICE_MEMORY),
-  hasuraVCPU: Yup.number()
-    .label('Hasura GraphQL vCPUs')
-    .required()
-    .min(MIN_SERVICE_VCPU)
-    .max(MAX_SERVICE_VCPU),
-  hasuraMemory: Yup.number()
-    .label('Hasura GraphQL Memory')
-    .required()
-    .min(MIN_SERVICE_MEMORY)
-    .max(MAX_SERVICE_MEMORY),
-  authVCPU: Yup.number()
-    .label('Auth vCPUs')
-    .required()
-    .min(MIN_SERVICE_VCPU)
-    .max(MAX_SERVICE_VCPU),
-  authMemory: Yup.number()
-    .label('Auth Memory')
-    .required()
-    .min(MIN_SERVICE_MEMORY)
-    .max(MAX_SERVICE_MEMORY),
-  storageVCPU: Yup.number()
-    .label('Storage vCPUs')
-    .required()
-    .min(MIN_SERVICE_VCPU)
-    .max(MAX_SERVICE_VCPU),
-  storageMemory: Yup.number()
-    .label('Storage Memory')
-    .required()
-    .min(MIN_SERVICE_MEMORY)
-    .max(MAX_SERVICE_MEMORY),
+    .max(MAX_TOTAL_MEMORY)
+    .test(
+      'is-equal-to-services',
+      'Total memory must be equal to the sum of all services.',
+      (totalAvailableMemory: number, { parent }) =>
+        parent.database.memory +
+          parent.hasura.memory +
+          parent.auth.memory +
+          parent.storage.memory ===
+        totalAvailableMemory,
+    ),
+  database: serviceValidationSchema.required(),
+  hasura: serviceValidationSchema.required(),
+  auth: serviceValidationSchema.required(),
+  storage: serviceValidationSchema.required(),
 });
 
 export type ResourceSettingsFormValues = Yup.InferType<

dashboard/src/gql/app/getWorkspaceAndProject.graphql

@@ -2,7 +2,4 @@ query GetWorkspaceAndProject($workspaceSlug: String!, $projectSlug: String) {
   workspaces(where: { slug: { _eq: $workspaceSlug } }) {
     ...Workspace
   }
-  projects: apps(where: { slug: { _eq: $projectSlug } }) {
-    ...Project
-  }
 }

dashboard/src/gql/app/settings/resources/getResources.graphql

@@ -5,6 +5,7 @@ fragment ServiceResources on ConfigConfig {
         cpu
         memory
       }
+      replicas
     }
   }
   hasura {
@@ -13,6 +14,7 @@ fragment ServiceResources on ConfigConfig {
         cpu
         memory
       }
+      replicas
     }
   }
   postgres {
@@ -21,6 +23,7 @@ fragment ServiceResources on ConfigConfig {
         cpu
         memory
       }
+      replicas
     }
   }
   storage {
@@ -29,6 +32,7 @@ fragment ServiceResources on ConfigConfig {
         cpu
         memory
       }
+      replicas
     }
   }
 }

dashboard/src/hooks/common/useProPlan/index.ts

@@ -1 +1 @@
-export { default } from './useProPlan';
+export { default as useProPlan } from './useProPlan';

dashboard/src/hooks/common/useProPlan/useProPlan.ts

@@ -9,7 +9,7 @@ export default function useProPlan() {
         },
       },
     },
-    fetchPolicy: 'cache-and-network',
+    fetchPolicy: 'cache-first',
   });
 
   return { data: data?.plans?.at(0), ...rest };

dashboard/src/hooks/useRemoteApplicationGQLClient.tsx

@@ -9,10 +9,10 @@ import { useMemo } from 'react';
  * @returns A function that returns a new ApolloClient instance.
  */
 export function useRemoteApplicationGQLClient() {
-  const { currentProject } = useCurrentWorkspaceAndProject();
+  const { currentProject, loading } = useCurrentWorkspaceAndProject();
 
   const userApplicationClient = useMemo(() => {
-    if (!currentProject) {
+    if (loading) {
       return new ApolloClient({ cache: new InMemoryCache() });
     }
 
@@ -32,7 +32,12 @@ export function useRemoteApplicationGQLClient() {
         },
       }),
     });
-  }, [currentProject]);
+  }, [
+    loading,
+    currentProject?.subdomain,
+    currentProject?.region.awsName,
+    currentProject?.config?.hasura.adminSecret,
+  ]);
 
   return userApplicationClient;
 }

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

@@ -6,6 +6,7 @@ import { getHasuraAdminSecret } from '@/utils/env';
 import { useNhostClient, useUserData } from '@nhost/nextjs';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
+import { useMemo } from 'react';
 
 export interface UseCurrentWorkspaceAndProjectReturnType {
   /**
@@ -48,14 +49,12 @@ export default function useCurrentWorkspaceAndProject(): UseCurrentWorkspaceAndP
     isFetching,
     refetch,
   } = useQuery(
-    ['currentWorkspaceAndProject', workspaceSlug, appSlug],
+    ['currentWorkspaceAndProject', workspaceSlug],
     () =>
       client.graphql.request<{
         workspaces: Workspace[];
-        projects?: Project[];
       }>(GetWorkspaceAndProjectDocument, {
         workspaceSlug: (workspaceSlug as string) || '',
-        projectSlug: (appSlug as string) || '',
       }),
     {
       keepPreviousData: true,
@@ -66,6 +65,18 @@ export default function useCurrentWorkspaceAndProject(): UseCurrentWorkspaceAndP
     },
   );
 
+  // Return the current workspace and project if using the Nhost backend
+  const [currentWorkspace] = response?.data?.workspaces || [];
+  const currentProject = useMemo(
+    () =>
+      appSlug
+        ? currentWorkspace?.projects?.find(
+            (project) => project.slug === appSlug,
+          )
+        : null,
+    [appSlug, currentWorkspace?.projects],
+  );
+
   // Return a default project if working locally
   if (!isPlatform) {
     const localProject: Project = {
@@ -117,9 +128,6 @@ export default function useCurrentWorkspaceAndProject(): UseCurrentWorkspaceAndP
     };
   }
 
-  // Return the current workspace and project if using the Nhost backend
-  const [currentWorkspace] = response?.data?.workspaces || [];
-  const [currentProject] = response?.data?.projects || [];
   const error = Array.isArray(response?.error || {})
     ? response?.error[0]
     : response?.error;

dashboard/src/tests/mocks.ts

@@ -1,11 +1,21 @@
-import type { Project } from '@/types/application';
+import type { Project, Workspace } from '@/types/application';
 import { ApplicationStatus } from '@/types/application';
-import type { Workspace } from '@/types/workspace';
 import { faker } from '@faker-js/faker';
 import type { NhostSession } from '@nhost/nextjs';
 import type { NextRouter } from 'next/router';
 import { vi } from 'vitest';
 
+export const mockMatchMediaValue = (query: any) => ({
+  matches: false,
+  media: query,
+  onchange: null,
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+  dispatchEvent: vi.fn(),
+});
+
 export const mockRouter: NextRouter = {
   basePath: '',
   pathname: '/test-workspace/test-application',
@@ -14,7 +24,10 @@ export const mockRouter: NextRouter = {
   isLocaleDomain: false,
   isReady: true,
   isPreview: false,
-  query: {},
+  query: {
+    workspaceSlug: 'test-workspace',
+    appSlug: 'test-application',
+  },
   push: vi.fn(),
   replace: vi.fn(),
   reload: vi.fn(),
@@ -67,8 +80,8 @@ export const mockWorkspace: Workspace = {
   id: '1',
   name: 'Test Workspace',
   slug: 'test-workspace',
-  members: [],
-  applications: [mockApplication],
+  workspaceMembers: [],
+  projects: [mockApplication],
 };
 
 export const mockSession: NhostSession = {

dashboard/src/tests/msw/mocks/graphql/resourceSettingsQuery.ts

@@ -43,6 +43,7 @@ export const resourcesAvailableQuery = nhostGraphQLLink.query(
                 cpu: 2000,
                 memory: 4096,
               },
+              replicas: 1,
             },
           },
           hasura: {
@@ -51,6 +52,7 @@ export const resourcesAvailableQuery = nhostGraphQLLink.query(
                 cpu: 2000,
                 memory: 4096,
               },
+              replicas: 1,
             },
           },
           auth: {
@@ -59,6 +61,7 @@ export const resourcesAvailableQuery = nhostGraphQLLink.query(
                 cpu: 2000,
                 memory: 4096,
               },
+              replicas: 1,
             },
           },
           storage: {
@@ -67,6 +70,7 @@ export const resourcesAvailableQuery = nhostGraphQLLink.query(
                 cpu: 2000,
                 memory: 4096,
               },
+              replicas: 1,
             },
           },
         },
@@ -90,6 +94,7 @@ export const resourcesUpdatedQuery = nhostGraphQLLink.query(
                 cpu: 2250,
                 memory: 4608,
               },
+              replicas: 1,
             },
           },
           hasura: {
@@ -98,6 +103,7 @@ export const resourcesUpdatedQuery = nhostGraphQLLink.query(
                 cpu: 2250,
                 memory: 4608,
               },
+              replicas: 1,
             },
           },
           auth: {
@@ -106,6 +112,7 @@ export const resourcesUpdatedQuery = nhostGraphQLLink.query(
                 cpu: 2250,
                 memory: 4608,
               },
+              replicas: 1,
             },
           },
           storage: {
@@ -114,6 +121,7 @@ export const resourcesUpdatedQuery = nhostGraphQLLink.query(
                 cpu: 2250,
                 memory: 4608,
               },
+              replicas: 1,
             },
           },
         },

dashboard/src/tests/testUtils.tsx

@@ -11,8 +11,16 @@ import { ThemeProvider } from '@mui/material/styles';
 import { NhostClient, NhostProvider } from '@nhost/nextjs';
 import { NhostApolloProvider } from '@nhost/react-apollo';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import type { Queries, RenderOptions, queries } from '@testing-library/react';
-import { render as rtlRender } from '@testing-library/react';
+import type {
+  Queries,
+  RenderOptions,
+  queries,
+  waitForOptions,
+} from '@testing-library/react';
+import {
+  render as rtlRender,
+  waitForElementToBeRemoved as rtlWaitForElementToBeRemoved,
+} from '@testing-library/react';
 import { RouterContext } from 'next/dist/shared/lib/router-context';
 import type { PropsWithChildren, ReactElement } from 'react';
 import { Toaster } from 'react-hot-toast';
@@ -87,5 +95,18 @@ function render<
   });
 }
 
+async function waitForElementToBeRemoved<T>(
+  callback: T | (() => T),
+  options?: waitForOptions,
+): Promise<void> {
+  try {
+    await rtlWaitForElementToBeRemoved(callback, options);
+  } catch {
+    // We shouldn't fail if the element was to be removed but it wasn't there in
+    // the first place.
+    await Promise.resolve();
+  }
+}
+
 export * from '@testing-library/react';
-export { render };
+export { render, waitForElementToBeRemoved };

dashboard/src/types/workspace.ts

@@ -1,12 +0,0 @@
-import type { WorkspaceMembers } from '@/utils/__generated__/graphql';
-import type { Project } from './application';
-
-export type Workspace = {
-  id: string;
-  name: string;
-  slug: string;
-  creatorUserId?: string;
-  members: WorkspaceMembers[];
-  applications: Project[];
-  default?: boolean;
-};

dashboard/src/utils/CONSTANTS.ts

@@ -57,6 +57,11 @@ export const RESOURCE_MEMORY_STEP = 128;
  */
 export const RESOURCE_VCPU_PRICE = 50;
 
+/**
+ * Price per vCPU and 2 GiB of RAM per minute.
+ */
+export const RESOURCE_VCPU_PRICE_PER_MINUTE = 0.0012;
+
 /**
  * Maximum number of free projects a user is allowed to have.
  */

dashboard/src/utils/__generated__/graphql.ts

@@ -27,6 +27,7 @@ export type Scalars = {
   citext: any;
   float64: any;
   jsonb: any;
+  refresh_token_type: any;
   smallint: any;
   timestamp: any;
   timestamptz: any;
@@ -904,6 +905,7 @@ export type ConfigConfig = {
   functions?: Maybe<ConfigFunctions>;
   global?: Maybe<ConfigGlobal>;
   hasura: ConfigHasura;
+  observability?: Maybe<ConfigObservability>;
   postgres?: Maybe<ConfigPostgres>;
   provider?: Maybe<ConfigProvider>;
   storage?: Maybe<ConfigStorage>;
@@ -917,6 +919,7 @@ export type ConfigConfigComparisonExp = {
   functions?: InputMaybe<ConfigFunctionsComparisonExp>;
   global?: InputMaybe<ConfigGlobalComparisonExp>;
   hasura?: InputMaybe<ConfigHasuraComparisonExp>;
+  observability?: InputMaybe<ConfigObservabilityComparisonExp>;
   postgres?: InputMaybe<ConfigPostgresComparisonExp>;
   provider?: InputMaybe<ConfigProviderComparisonExp>;
   storage?: InputMaybe<ConfigStorageComparisonExp>;
@@ -927,6 +930,7 @@ export type ConfigConfigInsertInput = {
   functions?: InputMaybe<ConfigFunctionsInsertInput>;
   global?: InputMaybe<ConfigGlobalInsertInput>;
   hasura: ConfigHasuraInsertInput;
+  observability?: InputMaybe<ConfigObservabilityInsertInput>;
   postgres?: InputMaybe<ConfigPostgresInsertInput>;
   provider?: InputMaybe<ConfigProviderInsertInput>;
   storage?: InputMaybe<ConfigStorageInsertInput>;
@@ -937,6 +941,7 @@ export type ConfigConfigUpdateInput = {
   functions?: InputMaybe<ConfigFunctionsUpdateInput>;
   global?: InputMaybe<ConfigGlobalUpdateInput>;
   hasura?: InputMaybe<ConfigHasuraUpdateInput>;
+  observability?: InputMaybe<ConfigObservabilityUpdateInput>;
   postgres?: InputMaybe<ConfigPostgresUpdateInput>;
   provider?: InputMaybe<ConfigProviderUpdateInput>;
   storage?: InputMaybe<ConfigStorageUpdateInput>;
@@ -1033,6 +1038,26 @@ export type ConfigGlobalUpdateInput = {
   environment?: InputMaybe<Array<ConfigEnvironmentVariableUpdateInput>>;
 };
 
+export type ConfigGrafana = {
+  __typename?: 'ConfigGrafana';
+  adminPassword: Scalars['String'];
+};
+
+export type ConfigGrafanaComparisonExp = {
+  _and?: InputMaybe<Array<ConfigGrafanaComparisonExp>>;
+  _not?: InputMaybe<ConfigGrafanaComparisonExp>;
+  _or?: InputMaybe<Array<ConfigGrafanaComparisonExp>>;
+  adminPassword?: InputMaybe<ConfigStringComparisonExp>;
+};
+
+export type ConfigGrafanaInsertInput = {
+  adminPassword: Scalars['String'];
+};
+
+export type ConfigGrafanaUpdateInput = {
+  adminPassword?: InputMaybe<Scalars['String']>;
+};
+
 export type ConfigHasura = {
   __typename?: 'ConfigHasura';
   adminSecret: Scalars['String'];
@@ -1222,6 +1247,26 @@ export type ConfigLocaleComparisonExp = {
   _nin?: InputMaybe<Array<Scalars['ConfigLocale']>>;
 };
 
+export type ConfigObservability = {
+  __typename?: 'ConfigObservability';
+  grafana?: Maybe<ConfigGrafana>;
+};
+
+export type ConfigObservabilityComparisonExp = {
+  _and?: InputMaybe<Array<ConfigObservabilityComparisonExp>>;
+  _not?: InputMaybe<ConfigObservabilityComparisonExp>;
+  _or?: InputMaybe<Array<ConfigObservabilityComparisonExp>>;
+  grafana?: InputMaybe<ConfigGrafanaComparisonExp>;
+};
+
+export type ConfigObservabilityInsertInput = {
+  grafana?: InputMaybe<ConfigGrafanaInsertInput>;
+};
+
+export type ConfigObservabilityUpdateInput = {
+  grafana?: InputMaybe<ConfigGrafanaUpdateInput>;
+};
+
 export type ConfigPortComparisonExp = {
   _eq?: InputMaybe<Scalars['ConfigPort']>;
   _in?: InputMaybe<Array<Scalars['ConfigPort']>>;
@@ -3490,14 +3535,22 @@ export type AuthRefreshTokens = {
   __typename?: 'authRefreshTokens';
   createdAt: Scalars['timestamptz'];
   expiresAt: Scalars['timestamptz'];
+  metadata?: Maybe<Scalars['jsonb']>;
   /** DEPRECATED: auto-generated refresh token id. Will be replaced by a genereric id column that will be used as a primary key, not the refresh token itself. Use refresh_token_hash instead. */
   refreshToken: Scalars['uuid'];
   refreshTokenHash?: Maybe<Scalars['String']>;
+  type: Scalars['refresh_token_type'];
   /** An object relationship */
   user: Users;
   userId: Scalars['uuid'];
 };
 
+
+/** User refresh tokens. Hasura auth uses them to rotate new access tokens as long as the refresh token is not expired. Don't modify its structure as Hasura Auth relies on it to function properly. */
+export type AuthRefreshTokensMetadataArgs = {
+  path?: InputMaybe<Scalars['String']>;
+};
+
 /** aggregated selection of "auth.refresh_tokens" */
 export type AuthRefreshTokens_Aggregate = {
   __typename?: 'authRefreshTokens_aggregate';
@@ -3538,6 +3591,11 @@ export type AuthRefreshTokens_Aggregate_Order_By = {
   min?: InputMaybe<AuthRefreshTokens_Min_Order_By>;
 };
 
+/** append existing jsonb value of filtered columns with new jsonb value */
+export type AuthRefreshTokens_Append_Input = {
+  metadata?: InputMaybe<Scalars['jsonb']>;
+};
+
 /** input type for inserting array relation for remote table "auth.refresh_tokens" */
 export type AuthRefreshTokens_Arr_Rel_Insert_Input = {
   data: Array<AuthRefreshTokens_Insert_Input>;
@@ -3552,8 +3610,10 @@ export type AuthRefreshTokens_Bool_Exp = {
   _or?: InputMaybe<Array<AuthRefreshTokens_Bool_Exp>>;
   createdAt?: InputMaybe<Timestamptz_Comparison_Exp>;
   expiresAt?: InputMaybe<Timestamptz_Comparison_Exp>;
+  metadata?: InputMaybe<Jsonb_Comparison_Exp>;
   refreshToken?: InputMaybe<Uuid_Comparison_Exp>;
   refreshTokenHash?: InputMaybe<String_Comparison_Exp>;
+  type?: InputMaybe<Refresh_Token_Type_Comparison_Exp>;
   user?: InputMaybe<Users_Bool_Exp>;
   userId?: InputMaybe<Uuid_Comparison_Exp>;
 };
@@ -3564,12 +3624,29 @@ export enum AuthRefreshTokens_Constraint {
   RefreshTokensPkey = 'refresh_tokens_pkey'
 }
 
+/** delete the field or element with specified path (for JSON arrays, negative integers count from the end) */
+export type AuthRefreshTokens_Delete_At_Path_Input = {
+  metadata?: InputMaybe<Array<Scalars['String']>>;
+};
+
+/** delete the array element with specified index (negative integers count from the end). throws an error if top level container is not an array */
+export type AuthRefreshTokens_Delete_Elem_Input = {
+  metadata?: InputMaybe<Scalars['Int']>;
+};
+
+/** delete key/value pair or string element. key/value pairs are matched based on their key value */
+export type AuthRefreshTokens_Delete_Key_Input = {
+  metadata?: InputMaybe<Scalars['String']>;
+};
+
 /** input type for inserting data into table "auth.refresh_tokens" */
 export type AuthRefreshTokens_Insert_Input = {
   createdAt?: InputMaybe<Scalars['timestamptz']>;
   expiresAt?: InputMaybe<Scalars['timestamptz']>;
+  metadata?: InputMaybe<Scalars['jsonb']>;
   /** DEPRECATED: auto-generated refresh token id. Will be replaced by a genereric id column that will be used as a primary key, not the refresh token itself. Use refresh_token_hash instead. */
   refreshToken?: InputMaybe<Scalars['uuid']>;
+  type?: InputMaybe<Scalars['refresh_token_type']>;
   user?: InputMaybe<Users_Obj_Rel_Insert_Input>;
   userId?: InputMaybe<Scalars['uuid']>;
 };
@@ -3582,6 +3659,7 @@ export type AuthRefreshTokens_Max_Fields = {
   /** DEPRECATED: auto-generated refresh token id. Will be replaced by a genereric id column that will be used as a primary key, not the refresh token itself. Use refresh_token_hash instead. */
   refreshToken?: Maybe<Scalars['uuid']>;
   refreshTokenHash?: Maybe<Scalars['String']>;
+  type?: Maybe<Scalars['refresh_token_type']>;
   userId?: Maybe<Scalars['uuid']>;
 };
 
@@ -3592,6 +3670,7 @@ export type AuthRefreshTokens_Max_Order_By = {
   /** DEPRECATED: auto-generated refresh token id. Will be replaced by a genereric id column that will be used as a primary key, not the refresh token itself. Use refresh_token_hash instead. */
   refreshToken?: InputMaybe<Order_By>;
   refreshTokenHash?: InputMaybe<Order_By>;
+  type?: InputMaybe<Order_By>;
   userId?: InputMaybe<Order_By>;
 };
 
@@ -3603,6 +3682,7 @@ export type AuthRefreshTokens_Min_Fields = {
   /** DEPRECATED: auto-generated refresh token id. Will be replaced by a genereric id column that will be used as a primary key, not the refresh token itself. Use refresh_token_hash instead. */
   refreshToken?: Maybe<Scalars['uuid']>;
   refreshTokenHash?: Maybe<Scalars['String']>;
+  type?: Maybe<Scalars['refresh_token_type']>;
   userId?: Maybe<Scalars['uuid']>;
 };
 
@@ -3613,6 +3693,7 @@ export type AuthRefreshTokens_Min_Order_By = {
   /** DEPRECATED: auto-generated refresh token id. Will be replaced by a genereric id column that will be used as a primary key, not the refresh token itself. Use refresh_token_hash instead. */
   refreshToken?: InputMaybe<Order_By>;
   refreshTokenHash?: InputMaybe<Order_By>;
+  type?: InputMaybe<Order_By>;
   userId?: InputMaybe<Order_By>;
 };
 
@@ -3636,8 +3717,10 @@ export type AuthRefreshTokens_On_Conflict = {
 export type AuthRefreshTokens_Order_By = {
   createdAt?: InputMaybe<Order_By>;
   expiresAt?: InputMaybe<Order_By>;
+  metadata?: InputMaybe<Order_By>;
   refreshToken?: InputMaybe<Order_By>;
   refreshTokenHash?: InputMaybe<Order_By>;
+  type?: InputMaybe<Order_By>;
   user?: InputMaybe<Users_Order_By>;
   userId?: InputMaybe<Order_By>;
 };
@@ -3648,6 +3731,11 @@ export type AuthRefreshTokens_Pk_Columns_Input = {
   refreshToken: Scalars['uuid'];
 };
 
+/** prepend existing jsonb value of filtered columns with new jsonb value */
+export type AuthRefreshTokens_Prepend_Input = {
+  metadata?: InputMaybe<Scalars['jsonb']>;
+};
+
 /** select columns of table "auth.refresh_tokens" */
 export enum AuthRefreshTokens_Select_Column {
   /** column name */
@@ -3655,10 +3743,14 @@ export enum AuthRefreshTokens_Select_Column {
   /** column name */
   ExpiresAt = 'expiresAt',
   /** column name */
+  Metadata = 'metadata',
+  /** column name */
   RefreshToken = 'refreshToken',
   /** column name */
   RefreshTokenHash = 'refreshTokenHash',
   /** column name */
+  Type = 'type',
+  /** column name */
   UserId = 'userId'
 }
 
@@ -3666,8 +3758,10 @@ export enum AuthRefreshTokens_Select_Column {
 export type AuthRefreshTokens_Set_Input = {
   createdAt?: InputMaybe<Scalars['timestamptz']>;
   expiresAt?: InputMaybe<Scalars['timestamptz']>;
+  metadata?: InputMaybe<Scalars['jsonb']>;
   /** DEPRECATED: auto-generated refresh token id. Will be replaced by a genereric id column that will be used as a primary key, not the refresh token itself. Use refresh_token_hash instead. */
   refreshToken?: InputMaybe<Scalars['uuid']>;
+  type?: InputMaybe<Scalars['refresh_token_type']>;
   userId?: InputMaybe<Scalars['uuid']>;
 };
 
@@ -3683,9 +3777,11 @@ export type AuthRefreshTokens_Stream_Cursor_Input = {
 export type AuthRefreshTokens_Stream_Cursor_Value_Input = {
   createdAt?: InputMaybe<Scalars['timestamptz']>;
   expiresAt?: InputMaybe<Scalars['timestamptz']>;
+  metadata?: InputMaybe<Scalars['jsonb']>;
   /** DEPRECATED: auto-generated refresh token id. Will be replaced by a genereric id column that will be used as a primary key, not the refresh token itself. Use refresh_token_hash instead. */
   refreshToken?: InputMaybe<Scalars['uuid']>;
   refreshTokenHash?: InputMaybe<Scalars['String']>;
+  type?: InputMaybe<Scalars['refresh_token_type']>;
   userId?: InputMaybe<Scalars['uuid']>;
 };
 
@@ -3696,12 +3792,26 @@ export enum AuthRefreshTokens_Update_Column {
   /** column name */
   ExpiresAt = 'expiresAt',
   /** column name */
+  Metadata = 'metadata',
+  /** column name */
   RefreshToken = 'refreshToken',
   /** column name */
+  Type = 'type',
+  /** column name */
   UserId = 'userId'
 }
 
 export type AuthRefreshTokens_Updates = {
+  /** append existing jsonb value of filtered columns with new jsonb value */
+  _append?: InputMaybe<AuthRefreshTokens_Append_Input>;
+  /** delete the field or element with specified path (for JSON arrays, negative integers count from the end) */
+  _delete_at_path?: InputMaybe<AuthRefreshTokens_Delete_At_Path_Input>;
+  /** delete the array element with specified index (negative integers count from the end). throws an error if top level container is not an array */
+  _delete_elem?: InputMaybe<AuthRefreshTokens_Delete_Elem_Input>;
+  /** delete key/value pair or string element. key/value pairs are matched based on their key value */
+  _delete_key?: InputMaybe<AuthRefreshTokens_Delete_Key_Input>;
+  /** prepend existing jsonb value of filtered columns with new jsonb value */
+  _prepend?: InputMaybe<AuthRefreshTokens_Prepend_Input>;
   /** sets the columns of the filtered rows to the given values */
   _set?: InputMaybe<AuthRefreshTokens_Set_Input>;
   where: AuthRefreshTokens_Bool_Exp;
@@ -11168,6 +11278,11 @@ export type Mutation_RootUpdateAuthProvidersArgs = {
 
 /** mutation root */
 export type Mutation_RootUpdateAuthRefreshTokenArgs = {
+  _append?: InputMaybe<AuthRefreshTokens_Append_Input>;
+  _delete_at_path?: InputMaybe<AuthRefreshTokens_Delete_At_Path_Input>;
+  _delete_elem?: InputMaybe<AuthRefreshTokens_Delete_Elem_Input>;
+  _delete_key?: InputMaybe<AuthRefreshTokens_Delete_Key_Input>;
+  _prepend?: InputMaybe<AuthRefreshTokens_Prepend_Input>;
   _set?: InputMaybe<AuthRefreshTokens_Set_Input>;
   pk_columns: AuthRefreshTokens_Pk_Columns_Input;
 };
@@ -11175,6 +11290,11 @@ export type Mutation_RootUpdateAuthRefreshTokenArgs = {
 
 /** mutation root */
 export type Mutation_RootUpdateAuthRefreshTokensArgs = {
+  _append?: InputMaybe<AuthRefreshTokens_Append_Input>;
+  _delete_at_path?: InputMaybe<AuthRefreshTokens_Delete_At_Path_Input>;
+  _delete_elem?: InputMaybe<AuthRefreshTokens_Delete_Elem_Input>;
+  _delete_key?: InputMaybe<AuthRefreshTokens_Delete_Key_Input>;
+  _prepend?: InputMaybe<AuthRefreshTokens_Prepend_Input>;
   _set?: InputMaybe<AuthRefreshTokens_Set_Input>;
   where: AuthRefreshTokens_Bool_Exp;
 };
@@ -12971,7 +13091,6 @@ export type Query_Root = {
   /** fetch aggregated fields from the table: "cli_tokens" */
   cliTokensAggregate: CliTokens_Aggregate;
   config?: Maybe<ConfigConfig>;
-  configRawJSON: Scalars['String'];
   configs: Array<ConfigAppConfig>;
   /** fetch data from the table: "continents" */
   continents: Array<Continents>;
@@ -13495,12 +13614,6 @@ export type Query_RootConfigArgs = {
 };
 
 
-export type Query_RootConfigRawJsonArgs = {
-  appID: Scalars['uuid'];
-  resolve: Scalars['Boolean'];
-};
-
-
 export type Query_RootConfigsArgs = {
   resolve: Scalars['Boolean'];
   where?: InputMaybe<ConfigConfigComparisonExp>;
@@ -13946,6 +14059,19 @@ export type Query_RootWorkspacesAggregateArgs = {
   where?: InputMaybe<Workspaces_Bool_Exp>;
 };
 
+/** Boolean expression to compare columns of type "refresh_token_type". All fields are combined with logical 'AND'. */
+export type Refresh_Token_Type_Comparison_Exp = {
+  _eq?: InputMaybe<Scalars['refresh_token_type']>;
+  _gt?: InputMaybe<Scalars['refresh_token_type']>;
+  _gte?: InputMaybe<Scalars['refresh_token_type']>;
+  _in?: InputMaybe<Array<Scalars['refresh_token_type']>>;
+  _is_null?: InputMaybe<Scalars['Boolean']>;
+  _lt?: InputMaybe<Scalars['refresh_token_type']>;
+  _lte?: InputMaybe<Scalars['refresh_token_type']>;
+  _neq?: InputMaybe<Scalars['refresh_token_type']>;
+  _nin?: InputMaybe<Array<Scalars['refresh_token_type']>>;
+};
+
 /** columns and relationships of "regions" */
 export type Regions = {
   __typename?: 'regions';
@@ -17706,7 +17832,7 @@ export type GetWorkspaceAndProjectQueryVariables = Exact<{
 }>;
 
 
-export type GetWorkspaceAndProjectQuery = { __typename?: 'query_root', workspaces: Array<{ __typename?: 'workspaces', id: any, name: string, slug: string, creatorUserId?: any | null, 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, price: number, 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, price: number, 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 GetWorkspaceAndProjectQuery = { __typename?: 'query_root', workspaces: Array<{ __typename?: 'workspaces', id: any, name: string, slug: string, creatorUserId?: any | null, 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, price: number, 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;
@@ -17751,14 +17877,14 @@ export type GetEnvironmentVariablesQueryVariables = Exact<{
 
 export type GetEnvironmentVariablesQuery = { __typename?: 'query_root', config?: { __typename: 'ConfigConfig', id: 'ConfigConfig', global?: { __typename?: 'ConfigGlobal', environment?: Array<{ __typename?: 'ConfigEnvironmentVariable', name: string, value: string, id: string }> | null } | null, hasura: { __typename?: 'ConfigHasura', adminSecret: string, webhookSecret: string, jwtSecrets?: Array<{ __typename?: 'ConfigJWTSecret', issuer?: string | null, key?: string | null, type?: string | null, jwk_url?: any | null, header?: string | null, claims_namespace_path?: string | null, claims_namespace?: string | null, claims_format?: string | null, audience?: string | null, allowed_skew?: any | null }> | null } } | null };
 
-export type ServiceResourcesFragment = { __typename?: 'ConfigConfig', auth?: { __typename?: 'ConfigAuth', resources?: { __typename?: 'ConfigResources', compute: { __typename?: 'ConfigResourcesCompute', cpu: any, memory: any } } | null } | null, hasura: { __typename?: 'ConfigHasura', resources?: { __typename?: 'ConfigResources', compute: { __typename?: 'ConfigResourcesCompute', cpu: any, memory: any } } | null }, postgres?: { __typename?: 'ConfigPostgres', resources?: { __typename?: 'ConfigResources', compute: { __typename?: 'ConfigResourcesCompute', cpu: any, memory: any } } | null } | null, storage?: { __typename?: 'ConfigStorage', resources?: { __typename?: 'ConfigResources', compute: { __typename?: 'ConfigResourcesCompute', cpu: any, memory: any } } | null } | null };
+export type ServiceResourcesFragment = { __typename?: 'ConfigConfig', auth?: { __typename?: 'ConfigAuth', resources?: { __typename?: 'ConfigResources', replicas: any, compute: { __typename?: 'ConfigResourcesCompute', cpu: any, memory: any } } | null } | null, hasura: { __typename?: 'ConfigHasura', resources?: { __typename?: 'ConfigResources', replicas: any, compute: { __typename?: 'ConfigResourcesCompute', cpu: any, memory: any } } | null }, postgres?: { __typename?: 'ConfigPostgres', resources?: { __typename?: 'ConfigResources', replicas: any, compute: { __typename?: 'ConfigResourcesCompute', cpu: any, memory: any } } | null } | null, storage?: { __typename?: 'ConfigStorage', resources?: { __typename?: 'ConfigResources', replicas: any, compute: { __typename?: 'ConfigResourcesCompute', cpu: any, memory: any } } | null } | null };
 
 export type GetResourcesQueryVariables = Exact<{
   appId: Scalars['uuid'];
 }>;
 
 
-export type GetResourcesQuery = { __typename?: 'query_root', config?: { __typename?: 'ConfigConfig', auth?: { __typename?: 'ConfigAuth', resources?: { __typename?: 'ConfigResources', compute: { __typename?: 'ConfigResourcesCompute', cpu: any, memory: any } } | null } | null, hasura: { __typename?: 'ConfigHasura', resources?: { __typename?: 'ConfigResources', compute: { __typename?: 'ConfigResourcesCompute', cpu: any, memory: any } } | null }, postgres?: { __typename?: 'ConfigPostgres', resources?: { __typename?: 'ConfigResources', compute: { __typename?: 'ConfigResourcesCompute', cpu: any, memory: any } } | null } | null, storage?: { __typename?: 'ConfigStorage', resources?: { __typename?: 'ConfigResources', compute: { __typename?: 'ConfigResourcesCompute', cpu: any, memory: any } } | null } | null } | null };
+export type GetResourcesQuery = { __typename?: 'query_root', config?: { __typename?: 'ConfigConfig', auth?: { __typename?: 'ConfigAuth', resources?: { __typename?: 'ConfigResources', replicas: any, compute: { __typename?: 'ConfigResourcesCompute', cpu: any, memory: any } } | null } | null, hasura: { __typename?: 'ConfigHasura', resources?: { __typename?: 'ConfigResources', replicas: any, compute: { __typename?: 'ConfigResourcesCompute', cpu: any, memory: any } } | null }, postgres?: { __typename?: 'ConfigPostgres', resources?: { __typename?: 'ConfigResources', replicas: any, compute: { __typename?: 'ConfigResourcesCompute', cpu: any, memory: any } } | null } | null, storage?: { __typename?: 'ConfigStorage', resources?: { __typename?: 'ConfigResources', replicas: any, compute: { __typename?: 'ConfigResourcesCompute', cpu: any, memory: any } } | null } | null } | null };
 
 export type PermissionVariableFragment = { __typename?: 'ConfigAuthsessionaccessTokenCustomClaims', key: string, value: string, id: string };
 
@@ -18257,6 +18383,7 @@ export const ServiceResourcesFragmentDoc = gql`
         cpu
         memory
       }
+      replicas
     }
   }
   hasura {
@@ -18265,6 +18392,7 @@ export const ServiceResourcesFragmentDoc = gql`
         cpu
         memory
       }
+      replicas
     }
   }
   postgres {
@@ -18273,6 +18401,7 @@ export const ServiceResourcesFragmentDoc = gql`
         cpu
         memory
       }
+      replicas
     }
   }
   storage {
@@ -18281,6 +18410,7 @@ export const ServiceResourcesFragmentDoc = gql`
         cpu
         memory
       }
+      replicas
     }
   }
 }
@@ -18827,12 +18957,8 @@ export const GetWorkspaceAndProjectDocument = gql`
   workspaces(where: {slug: {_eq: $workspaceSlug}}) {
     ...Workspace
   }
-  projects: apps(where: {slug: {_eq: $projectSlug}}) {
-    ...Project
-  }
 }
-    ${WorkspaceFragmentDoc}
-${ProjectFragmentDoc}`;
+    ${WorkspaceFragmentDoc}`;
 
 /**
  * __useGetWorkspaceAndProjectQuery__

dashboard/src/utils/helpers.ts

@@ -1,6 +1,5 @@
 import features from '@/data/features.json';
 import { ApplicationStatus } from '@/types/application';
-import { getLocalBackendUrl } from '@/utils/env';
 import slugify from 'slugify';
 import type { DeploymentRowFragment } from './__generated__/graphql';
 
@@ -55,22 +54,6 @@ export function getCurrentEnvironment(): Environment {
   return (process.env.NEXT_PUBLIC_ENV || 'dev') as Environment;
 }
 
-export function generateRemoteAppUrl(subdomain: string): string {
-  if (process.env.NEXT_PUBLIC_NHOST_PLATFORM !== 'true') {
-    return getLocalBackendUrl();
-  }
-
-  if (process.env.NEXT_PUBLIC_ENV === 'dev') {
-    return process.env.NEXT_PUBLIC_NHOST_BACKEND_URL;
-  }
-
-  if (process.env.NEXT_PUBLIC_ENV === 'staging') {
-    return `https://${subdomain}.staging.nhost.run`;
-  }
-
-  return `https://${subdomain}.nhost.run`;
-}
-
 /**
  * Converts the state number of the application to its string equivalent.
  * @param appStatus The current state of the application.

dashboard/src/utils/settings/getUnallocatedResources/getUnallocatedResources.test.ts

@@ -1,88 +0,0 @@
-import { test } from 'vitest';
-import getUnallocatedResources from './getUnallocatedResources';
-
-test('should return 0 for CPU and Memory if all the available resources are allocated', () => {
-  expect(
-    getUnallocatedResources({
-      enabled: true,
-      totalAvailableVCPU: 4,
-      totalAvailableMemory: 8,
-      databaseVCPU: 1,
-      databaseMemory: 2,
-      hasuraVCPU: 1,
-      hasuraMemory: 2,
-      authVCPU: 1,
-      authMemory: 2,
-      storageVCPU: 1,
-      storageMemory: 2,
-    }),
-  ).toEqual({ vcpu: 0, memory: 0 });
-});
-
-test('should return the unallocated resources if not everything is allocated', () => {
-  expect(
-    getUnallocatedResources({
-      enabled: true,
-      totalAvailableVCPU: 1,
-      totalAvailableMemory: 2,
-      databaseVCPU: 0,
-      databaseMemory: 0.5,
-      hasuraVCPU: 0,
-      hasuraMemory: 0.5,
-      authVCPU: 0,
-      authMemory: 0.5,
-      storageVCPU: 0,
-      storageMemory: 0.5,
-    }),
-  ).toEqual({ vcpu: 1, memory: 0 });
-
-  expect(
-    getUnallocatedResources({
-      enabled: true,
-      totalAvailableVCPU: 1,
-      totalAvailableMemory: 2,
-      databaseVCPU: 0.25,
-      databaseMemory: 0,
-      hasuraVCPU: 0.25,
-      hasuraMemory: 0,
-      authVCPU: 0.25,
-      authMemory: 0,
-      storageVCPU: 0.25,
-      storageMemory: 0,
-    }),
-  ).toEqual({ vcpu: 0, memory: 2 });
-});
-
-test('should return negative values if services are overallocated', () => {
-  expect(
-    getUnallocatedResources({
-      enabled: true,
-      totalAvailableVCPU: 1,
-      totalAvailableMemory: 2,
-      databaseVCPU: 0.5,
-      databaseMemory: 0.5,
-      hasuraVCPU: 0.5,
-      hasuraMemory: 0.5,
-      authVCPU: 0.5,
-      authMemory: 0.5,
-      storageVCPU: 0.5,
-      storageMemory: 0.5,
-    }),
-  ).toEqual({ vcpu: -1, memory: 0 });
-
-  expect(
-    getUnallocatedResources({
-      enabled: true,
-      totalAvailableVCPU: 1,
-      totalAvailableMemory: 2,
-      databaseVCPU: 0.25,
-      databaseMemory: 1,
-      hasuraVCPU: 0.25,
-      hasuraMemory: 1,
-      authVCPU: 0.25,
-      authMemory: 1,
-      storageVCPU: 0.25,
-      storageMemory: 1,
-    }),
-  ).toEqual({ vcpu: 0, memory: -2 });
-});

dashboard/src/utils/settings/getUnallocatedResources/getUnallocatedResources.ts

@@ -1,29 +0,0 @@
-import type { ResourceSettingsFormValues } from '@/features/settings/resources/utils/resourceSettingsValidationSchema';
-
-/**
- * Returns the unallocated resources based on the form values.
- *
- * @param formValues - The form values.
- * @returns The unallocated resources. Negative values mean that the resources
- * are overallocated.
- */
-export default function getUnallocatedResources(
-  formValues: Partial<ResourceSettingsFormValues>,
-) {
-  const allocatedVCPU =
-    formValues.databaseVCPU +
-    formValues.hasuraVCPU +
-    formValues.authVCPU +
-    formValues.storageVCPU;
-
-  const allocatedMemory =
-    formValues.databaseMemory +
-    formValues.hasuraMemory +
-    formValues.authMemory +
-    formValues.storageMemory;
-
-  return {
-    vcpu: formValues.totalAvailableVCPU - allocatedVCPU,
-    memory: formValues.totalAvailableMemory - allocatedMemory,
-  };
-}

dashboard/src/utils/settings/getUnallocatedResources/index.ts

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

dashboard/vitest.config.ts

@@ -6,7 +6,7 @@ export default defineConfig({
   // @ts-ignore
   plugins: [tsconfigPaths({ projects: ['./tsconfig.test.json'] }), react()],
   test: {
-    testTimeout: 5000,
+    testTimeout: 20000,
     environment: 'jsdom',
     globals: true,
     setupFiles: 'src/setupTests.ts',

docs/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nhost/docs
 
+## 0.1.1
+
+### Patch Changes
+
+- f6639ae0: docs: add migration info
+
+## 0.1.0
+
+### Minor Changes
+
+- d72ae3f3: Add section on Service Replicas
+
 ## 0.0.16
 
 ### Patch Changes

docs/docs/authentication/index.mdx

@@ -12,7 +12,7 @@ Nhost Authentication lets you authenticate users using different sign-in methods
 - [Email and Password](/authentication/sign-in-with-email-and-password)
 - [Magic Link](/authentication/sign-in-with-magic-link)
 - [Phone Number (SMS)](/authentication/sign-in-with-phone-number-sms)
-- [Security Keys (WebAuthn)](/authentication/sign-in-with-phone-number-sms)
+- [Security Keys (WebAuthn)](/authentication/sign-in-with-security-keys)
 - [Apple](/authentication/sign-in-with-apple)
 - [Discord](/authentication/sign-in-with-discord)
 - [Facebook](/authentication/sign-in-with-facebook)

docs/docs/cli/index.mdx

@@ -95,6 +95,55 @@ const nhost = new NhostClient({
 })
 ```
 
+### Migration from `localhost` to `local`
+
+`localhost` as the `subdomain` is deprecated and will be removed in the future.
+
+Make sure you have the latest version of the CLI and the SDK installed:
+
+```bash
+sudo nhost upgrade
+```
+
+Install the latest version of the SDK:
+
+<Tabs groupId="package-manager">
+  <TabItem value="npm" label="npm" default>
+
+```bash
+npm install @nhost/nhost-js@latest # or @nhost/react@latest / @nhost/nextjs@latest / @nhost/vue@latest
+```
+
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+
+```bash
+yarn add @nhost/nhost-js@latest # or @nhost/react@latest / @nhost/nextjs@latest / @nhost/vue@latest
+```
+
+  </TabItem>
+  <TabItem value="pnpm" label="pnpm">
+
+```bash
+pnpm add @nhost/nhost-js@latest # or @nhost/react@latest / @nhost/nextjs@latest / @nhost/vue@latest
+```
+
+  </TabItem>
+</Tabs>
+
+Then change `localhost` to `local` in your code:
+
+```js
+import { NhostClient } from '@nhost/nhost-js'
+
+const nhost = new NhostClient({
+  // code-block-error-line
+-  subdomain: 'localhost'
+  // code-block-success-line
++  subdomain: 'local'
+})
+```
+
 ## Emails
 
 During local development with the CLI, all transactional emails from Nhost Authentication are sent to a local Mailhog services, instead of to the recipient's email address.

docs/docs/platform/compute.mdx

@@ -36,3 +36,5 @@ To configure dedicated compute to your projects, all you have to do is navigate
 
 
 ![Compute Resources](/img/platform/compute-resources/dashboard-slider.png)
+
+To further improve availability and fault tolerance, you can also leverage Service Replicas. To learn more, check out the documentation for [Service Replicas](https://docs.nhost.io/platform/service-replicas).

docs/docs/platform/git.mdx

@@ -1,6 +1,6 @@
 ---
 title: 'Git'
-sidebar_position: 1
+sidebar_position: 2
 image: /img/og/platform/github-integration.png
 ---
 

docs/docs/platform/service-replicas.mdx

@@ -0,0 +1,57 @@
+---
+title: 'Service Replicas'
+sidebar_position: 1
+image: /img/og/platform/service-replicas.png
+---
+
+Service Replicas is a feature that allows you to create multiple replicas of your services, enhancing availability and fault tolerance for your Nhost apps. By distributing user requests among replicas, your apps can handle more traffic and provide a better user experience. This documentation touches on the key aspects of Service Replicas in the context of the Nhost Cloud Platform.
+
+![Service Replicas](/img/platform/service-replicas/replicas-diagram.png)
+
+To read the announcement, check out our [blog post](https://nhost.io/blog/service-replicas).
+
+## Supported Services
+
+Replicas can be configured for the following services:
+
+- Hasura
+- Auth
+- Storage
+
+Currently, we don't support replicas for Postgres.
+
+## Configuring Service Replicas
+
+To configure Service Replicas for your project, follow these steps:
+
+1. Navigate to your project's settings in the Nhost Dashboard.
+2. Click on "Compute Resources".
+3. Locate the "Replicas" slider for each service (Hasura, Auth, and Storage).
+4. Adjust the number of replicas for each service as needed.
+5. Save your changes.
+
+Please note that when setting multiple replicas for a service, the 1:2 ratio between CPU and RAM for that service has to be respected. With only one replica, this ratio does not need to be respected at the service level.
+
+## Benefits
+
+- Improved fault tolerance: Multiple replicas ensure that if one instance crashes duo to an unexpected issue, the other replicas can continue to serve user requests.
+- Improved availability: Distributing user requests among multiple replicas allows your apps to handle more traffic and maintain a high level of performance.
+- Load balancing: Distributing workloads evenly among replicas to prevent bottlenecks and ensure smooth performance during peak times.
+
+## Pricing
+
+Pricing is based on the size of each replica and the total number of replicas you have configured for each service:
+
+- If you allocate 1 vCPU and 2 GiB of RAM to the auth service, for example, the cost for a single replica is $50.
+- If you configure 3 replicas for auth, the total cost for all replicas would be $150 (3 replicas x $50 per replica).
+
+Please note that Service Replicas is available only for projects on the Pro plan or higher.
+
+## Caveats
+
+- Postgres replication: As mentioned earlier, we do not have support for multiple replicas of Postgres. This feature may be added in the future.
+- Resource ratio: When configuring multiple replicas for a service, you must adhere to the 1:2 ratio between CPU and RAM for that service.
+
+![Compute Resources](/img/platform/compute-resources/dashboard-slider.png)
+
+For more information on compute resources and scaling your apps, refer to our documentation on [Compute Resources](https://docs.nhost.io/platform/compute).

docs/docusaurus.config.js

@@ -176,7 +176,17 @@ const config = {
       prism: {
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,
-        defaultLanguage: 'javascript'
+        defaultLanguage: 'javascript',
+        magicComments: [
+          {
+            className: 'code-block-error-line',
+            line: 'code-block-error-line'
+          },
+          {
+            className: 'code-block-success-line',
+            line: 'code-block-success-line'
+          }
+        ]
       },
       algolia: {
         appId: '3A3MJQTKHU',

docs/package.json

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

docs/src/css/custom.css

@@ -270,3 +270,19 @@ h1 > code {
   font-size: 90%;
   margin: 0 4px;
 }
+
+.code-block-error-line {
+  background-color: #ff000020;
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+  border-left: 3px solid #ff000080;
+}
+
+.code-block-success-line {
+  background-color: #00ff0020;
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+  border-left: 3px solid #00ff0080;
+}

integrations/apollo/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nhost/apollo
 
+## 5.2.4
+
+### Patch Changes
+
+- 90c60311: chore(deps): add `types` to `package.json`
+- Updated dependencies [90c60311]
+  - @nhost/nhost-js@2.2.2
+
 ## 5.2.3
 
 ### Patch Changes

integrations/apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/apollo",
-  "version": "5.2.3",
+  "version": "5.2.4",
   "description": "Nhost Apollo Client library",
   "license": "MIT",
   "keywords": [
@@ -33,6 +33,7 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
+      "types": "./dist/index.d.ts",
       "import": {
         "node": "./dist/index.cjs.js",
         "default": "./dist/index.esm.js"

integrations/react-apollo/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @nhost/react-apollo
 
+## 5.0.20
+
+### Patch Changes
+
+- 90c60311: chore(deps): add `types` to `package.json`
+- Updated dependencies [90c60311]
+  - @nhost/apollo@5.2.4
+  - @nhost/react@2.0.16
+
 ## 5.0.19
 
 ### Patch Changes

integrations/react-apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-apollo",
-  "version": "5.0.19",
+  "version": "5.0.20",
   "description": "Nhost React Apollo client",
   "license": "MIT",
   "keywords": [
@@ -34,6 +34,7 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
+      "types": "./dist/index.d.ts",
       "import": {
         "node": "./dist/index.cjs.js",
         "default": "./dist/index.esm.js"

integrations/react-urql/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nhost/react-urql
 
+## 2.0.17
+
+### Patch Changes
+
+- 90c60311: chore(deps): add `types` to `package.json`
+- Updated dependencies [90c60311]
+  - @nhost/react@2.0.16
+
 ## 2.0.16
 
 ### Patch Changes

integrations/react-urql/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-urql",
-  "version": "2.0.16",
+  "version": "2.0.17",
   "description": "Nhost React URQL client",
   "license": "MIT",
   "keywords": [
@@ -32,6 +32,7 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
+      "types": "./dist/index.d.ts",
       "import": {
         "node": "./dist/index.cjs.js",
         "default": "./dist/index.esm.js"

packages/graphql-js/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/graphql-js
 
+## 0.1.1
+
+### Patch Changes
+
+- 90c60311: chore(deps): add `types` to `package.json`
+
 ## 0.1.0
 
 ### Minor Changes

packages/graphql-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/graphql-js",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Nhost GraphQL client",
   "license": "MIT",
   "keywords": [
@@ -27,6 +27,7 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
+      "types": "./dist/index.d.ts",
       "import": {
         "node": "./dist/index.cjs.js",
         "default": "./dist/index.esm.js"

packages/hasura-auth-js/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/hasura-auth-js
 
+## 2.1.1
+
+### Patch Changes
+
+- 90c60311: chore(deps): add `types` to `package.json`
+
 ## 2.1.0
 
 ### Minor Changes

packages/hasura-auth-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/hasura-auth-js",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Hasura-auth client",
   "license": "MIT",
   "keywords": [
@@ -31,6 +31,7 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
+      "types": "./dist/index.d.ts",
       "import": {
         "node": "./dist/index.cjs.js",
         "default": "./dist/index.esm.js"

packages/hasura-storage-js/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/hasura-storage-js
 
+## 2.1.1
+
+### Patch Changes
+
+- 90c60311: chore(deps): add `types` to `package.json`
+
 ## 2.1.0
 
 ### Minor Changes

packages/hasura-storage-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/hasura-storage-js",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Hasura-storage client",
   "license": "MIT",
   "keywords": [
@@ -29,6 +29,7 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
+      "types": "./dist/index.d.ts",
       "import": {
         "node": "./dist/index.cjs.js",
         "default": "./dist/index.esm.js"

packages/nextjs/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nhost/nextjs
 
+## 1.13.22
+
+### Patch Changes
+
+- 90c60311: chore(deps): add `types` to `package.json`
+- Updated dependencies [90c60311]
+  - @nhost/react@2.0.16
+
 ## 1.13.21
 
 ### Patch Changes

packages/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/nextjs",
-  "version": "1.13.21",
+  "version": "1.13.22",
   "description": "Nhost NextJS library",
   "license": "MIT",
   "keywords": [
@@ -35,6 +35,7 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
+      "types": "./dist/index.d.ts",
       "import": {
         "node": "./dist/index.cjs.js",
         "default": "./dist/index.esm.js"

packages/nhost-js/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @nhost/nhost-js
 
+## 2.2.2
+
+### Patch Changes
+
+- 90c60311: chore(deps): add `types` to `package.json`
+- Updated dependencies [90c60311]
+  - @nhost/graphql-js@0.1.1
+  - @nhost/hasura-auth-js@2.1.1
+  - @nhost/hasura-storage-js@2.1.1
+
 ## 2.2.1
 
 ### Patch Changes

packages/nhost-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/nhost-js",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "Nhost JavaScript SDK",
   "license": "MIT",
   "keywords": [
@@ -32,6 +32,7 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
+      "types": "./dist/index.d.ts",
       "import": {
         "node": "./dist/index.cjs.js",
         "default": "./dist/index.esm.js"

packages/react/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nhost/react
 
+## 2.0.16
+
+### Patch Changes
+
+- 90c60311: chore(deps): add `types` to `package.json`
+- Updated dependencies [90c60311]
+  - @nhost/nhost-js@2.2.2
+
 ## 2.0.15
 
 ### Patch Changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "description": "Nhost React library",
   "license": "MIT",
   "keywords": [
@@ -33,6 +33,7 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
+      "types": "./dist/index.d.ts",
       "import": {
         "node": "./dist/index.cjs.js",
         "default": "./dist/index.esm.js"

packages/vue/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nhost/vue
 
+## 1.13.22
+
+### Patch Changes
+
+- 90c60311: chore(deps): add `types` to `package.json`
+- Updated dependencies [90c60311]
+  - @nhost/nhost-js@2.2.2
+
 ## 1.13.21
 
 ### Patch Changes

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/vue",
-  "version": "1.13.21",
+  "version": "1.13.22",
   "description": "Nhost Vue library",
   "license": "MIT",
   "keywords": [
@@ -33,6 +33,7 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
+      "types": "./dist/index.d.ts",
       "import": {
         "node": "./dist/index.cjs.js",
         "default": "./dist/index.esm.js"

pnpm-lock.yaml

@@ -126,8 +126,8 @@ importers:
       '@types/lodash.debounce': ^4.0.7
       '@types/node': ^16.11.7
       '@types/pluralize': ^0.0.29
-      '@types/react': 18.0.37
-      '@types/react-dom': 18.0.11
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.1
       '@types/react-table': ^7.7.12
       '@types/testing-library__jest-dom': ^5.14.5
       '@types/validator': ^13.7.10
@@ -200,7 +200,7 @@ importers:
       validator: ^13.7.0
       vite: ^4.0.2
       vite-tsconfig-paths: ^4.0.3
-      vitest: ^0.30.0
+      vitest: ^0.30.1
       webpack: ^5.75.0
       yup: ^1.0.2
       yup-password: ^0.2.2
@@ -208,19 +208,19 @@ importers:
       '@apollo/client': 3.7.10_xe4twbeoqswbn2uas4ov5melbq
       '@codemirror/language': 6.3.1
       '@emotion/cache': 11.10.5
-      '@emotion/react': 11.10.5_cqbnlhpst5s4upgh7mkdscv5me
+      '@emotion/react': 11.10.5_f4rnmcvwkfjmsvnuua2jnhfpve
       '@emotion/server': 11.4.0
-      '@emotion/styled': 11.10.5_xflitrccjjaeurmgxgjvmntw4q
+      '@emotion/styled': 11.10.5_wwcuv5apinz3dbzb4qbts7wkk4
       '@fontsource/inter': 4.5.14
       '@fontsource/roboto-mono': 4.5.8
-      '@graphiql/react': 0.17.0_4y4xajzwih2mwcyvvz5n3z6ol4
+      '@graphiql/react': 0.17.0_hvzwglx44tkqrk3qutu7lxftl4
       '@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_jf7puk66b2eiqxne3oe3xlxkou
-      '@mui/material': 5.10.14_ldn4mk3ukty6svu26iwhlv53zm
-      '@mui/system': 5.10.14_pna7rrcn5choknb5ggpv7cm5xq
+      '@mui/base': 5.0.0-alpha.106_cis5wmpl6sllca25ejrqakjpau
+      '@mui/material': 5.10.14_pkdnygquhgg5xs3cz7lm3zkv5u
+      '@mui/system': 5.10.14_sfxweiy34wszbolhfyhknrxrw4
       '@mui/x-date-pickers': 5.0.8_p6r6qp7wldbu5ojdsmv4yukx2q
       '@nhost/nextjs': link:../packages/nextjs
       '@nhost/react-apollo': link:../integrations/react-apollo
@@ -236,7 +236,7 @@ importers:
       clsx: 1.2.1
       date-fns: 2.29.3
       generate-password: 1.7.0
-      graphiql: 2.4.0_4y4xajzwih2mwcyvvz5n3z6ol4
+      graphiql: 2.4.0_hvzwglx44tkqrk3qutu7lxftl4
       graphql: 16.6.0
       graphql-request: 6.0.0_rjjjs2nwgns3bcvnnqb5eu5nry
       graphql-tag: 2.12.6_graphql@16.6.0
@@ -277,7 +277,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_hsarfn6kvmmvdlo5khhfvlymn4
+      '@storybook/addon-interactions': 6.5.14_lu5ulwo4rqrsz33fcmhra2bkim
       '@storybook/addon-links': 6.5.14_biqbaboplfbrettd7655fr4n2y
       '@storybook/addon-postcss': 2.0.0_webpack@5.75.0
       '@storybook/builder-webpack5': 6.5.14_uddrmzyyotmol3pts5dayjifei
@@ -291,15 +291,15 @@ importers:
       '@types/lodash.debounce': 4.0.7
       '@types/node': 16.18.11
       '@types/pluralize': 0.0.29
-      '@types/react': 18.0.37
-      '@types/react-dom': 18.0.11
+      '@types/react': 18.2.0
+      '@types/react-dom': 18.2.1
       '@types/react-table': 7.7.12
       '@types/testing-library__jest-dom': 5.14.5
       '@types/validator': 13.7.10
       '@typescript-eslint/eslint-plugin': 5.43.0_ivdjtymx6ubvknadox4oh4qsue
       '@typescript-eslint/parser': 5.43.0_eslint@8.28.0
       '@vitejs/plugin-react': 4.0.0_vite@4.0.4
-      '@vitest/coverage-c8': 0.30.0_vitest@0.30.0
+      '@vitest/coverage-c8': 0.30.0_vitest@0.30.1
       autoprefixer: 10.4.13_postcss@8.4.19
       babel-loader: 8.3.0_npabyccmuonwo2rku4k53xo3hi
       babel-plugin-transform-remove-console: 6.9.4
@@ -333,7 +333,7 @@ importers:
       tsconfig-paths-webpack-plugin: 4.0.0
       vite: 4.0.4_@types+node@16.18.11
       vite-tsconfig-paths: 4.0.3_vite@4.0.4
-      vitest: 0.30.0_jsdom@21.0.0
+      vitest: 0.30.1_jsdom@21.0.0
       webpack: 5.75.0
 
   docs:
@@ -5670,7 +5670,7 @@ packages:
       '@date-io/core': 2.16.0
     dev: false
 
-  /@design-systems/utils/2.12.0_jf7puk66b2eiqxne3oe3xlxkou:
+  /@design-systems/utils/2.12.0_cis5wmpl6sllca25ejrqakjpau:
     resolution: {integrity: sha512-Y/d2Zzr+JJfN6u1gbuBUb1ufBuLMJJRZQk+dRmw8GaTpqKx5uf7cGUYGTwN02dIb3I+Tf+cW8jcGBTRiFxdYFg==}
     peerDependencies:
       '@types/react': '*'
@@ -5678,7 +5678,7 @@ packages:
       react-dom: '>= 16.8.6'
     dependencies:
       '@babel/runtime': 7.21.0
-      '@types/react': 18.0.37
+      '@types/react': 18.2.0
       clsx: 1.2.1
       focus-lock: 0.8.1
       react: 18.2.0
@@ -5686,15 +5686,15 @@ packages:
       react-merge-refs: 1.1.0
     dev: true
 
-  /@devtools-ds/object-inspector/1.2.0_jf7puk66b2eiqxne3oe3xlxkou:
+  /@devtools-ds/object-inspector/1.2.0_cis5wmpl6sllca25ejrqakjpau:
     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_jf7puk66b2eiqxne3oe3xlxkou
-      '@devtools-ds/tree': 1.2.0_jf7puk66b2eiqxne3oe3xlxkou
+      '@devtools-ds/themes': 1.2.0_cis5wmpl6sllca25ejrqakjpau
+      '@devtools-ds/tree': 1.2.0_cis5wmpl6sllca25ejrqakjpau
       clsx: 1.1.0
       react: 18.2.0
     transitivePeerDependencies:
@@ -5708,13 +5708,13 @@ packages:
       '@babel/runtime': 7.5.5
     dev: true
 
-  /@devtools-ds/themes/1.2.0_jf7puk66b2eiqxne3oe3xlxkou:
+  /@devtools-ds/themes/1.2.0_cis5wmpl6sllca25ejrqakjpau:
     resolution: {integrity: sha512-LimEITorE6yWZWWuMc6OiBfLQgPrQqWbyMEmfRUDPa3PHXoAY4SpDxczfg31fgyRDUNWnZhjaJH5bBbu8VEbIw==}
     peerDependencies:
       react: '>= 16.8.6'
     dependencies:
       '@babel/runtime': 7.5.5
-      '@design-systems/utils': 2.12.0_jf7puk66b2eiqxne3oe3xlxkou
+      '@design-systems/utils': 2.12.0_cis5wmpl6sllca25ejrqakjpau
       clsx: 1.1.0
       react: 18.2.0
     transitivePeerDependencies:
@@ -5722,13 +5722,13 @@ packages:
       - react-dom
     dev: true
 
-  /@devtools-ds/tree/1.2.0_jf7puk66b2eiqxne3oe3xlxkou:
+  /@devtools-ds/tree/1.2.0_cis5wmpl6sllca25ejrqakjpau:
     resolution: {integrity: sha512-hC4g4ocuo2eg7jsnzKdauxH0sDQiPW3KSM2+uK3kRgcmr9PzpBD5Kob+Y/WFSVKswFleftOGKL4BQLuRv0sPxA==}
     peerDependencies:
       react: '>= 16.8.6'
     dependencies:
       '@babel/runtime': 7.7.2
-      '@devtools-ds/themes': 1.2.0_jf7puk66b2eiqxne3oe3xlxkou
+      '@devtools-ds/themes': 1.2.0_cis5wmpl6sllca25ejrqakjpau
       clsx: 1.1.0
       react: 18.2.0
     transitivePeerDependencies:
@@ -6066,7 +6066,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.37
+      '@types/react': 18.2.0
       '@types/react-router-config': 5.0.6
       '@types/react-router-dom': 5.3.3
       react: 18.2.0
@@ -6412,7 +6412,7 @@ packages:
     peerDependencies:
       react: '*'
     dependencies:
-      '@types/react': 18.0.37
+      '@types/react': 18.2.0
       prop-types: 15.8.1
       react: 18.2.0
 
@@ -6483,7 +6483,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.37
+      '@types/react': 18.2.0
       '@types/react-router-config': 5.0.6
       clsx: 1.2.1
       parse-numeric-range: 1.3.0
@@ -6573,7 +6573,7 @@ packages:
       react-dom: ^16.8.4 || ^17.0.0
     dependencies:
       '@types/history': 4.7.11
-      '@types/react': 18.0.37
+      '@types/react': 18.2.0
       commander: 5.1.0
       joi: 17.7.0
       react: 18.2.0
@@ -6813,7 +6813,7 @@ packages:
     resolution: {integrity: sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==}
     dev: false
 
-  /@emotion/react/11.10.5_cqbnlhpst5s4upgh7mkdscv5me:
+  /@emotion/react/11.10.5_f4rnmcvwkfjmsvnuua2jnhfpve:
     resolution: {integrity: sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==}
     peerDependencies:
       '@babel/core': ^7.0.0
@@ -6833,7 +6833,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.37
+      '@types/react': 18.2.0
       hoist-non-react-statics: 3.3.2
       react: 18.2.0
     dev: false
@@ -6913,7 +6913,7 @@ packages:
     resolution: {integrity: sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==}
     dev: false
 
-  /@emotion/styled/11.10.5_xflitrccjjaeurmgxgjvmntw4q:
+  /@emotion/styled/11.10.5_wwcuv5apinz3dbzb4qbts7wkk4:
     resolution: {integrity: sha512-8EP6dD7dMkdku2foLoruPCNkRevzdcBaY6q0l0OsbyJK+x8D9HWjX27ARiSIKNF634hY9Zdoedh8bJCiva8yZw==}
     peerDependencies:
       '@babel/core': ^7.0.0
@@ -6930,11 +6930,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_cqbnlhpst5s4upgh7mkdscv5me
+      '@emotion/react': 11.10.5_f4rnmcvwkfjmsvnuua2jnhfpve
       '@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.37
+      '@types/react': 18.2.0
       react: 18.2.0
     dev: false
 
@@ -7546,7 +7546,7 @@ packages:
   /@gqty/utils/1.0.0:
     resolution: {integrity: sha512-QJMlzts//d0H5mlekOZgx1a4KsTYXfxmRhhx8g/8mvzdaNVPxhFzCsv3+ljTOzbW3A08qy4jXQPWAMoTefSJDQ==}
 
-  /@graphiql/react/0.17.0_4y4xajzwih2mwcyvvz5n3z6ol4:
+  /@graphiql/react/0.17.0_hvzwglx44tkqrk3qutu7lxftl4:
     resolution: {integrity: sha512-mn8FfucLJzFLQQ5OoJ9U1Dvnva1smOxBL89D2TSM2B6mmDyQIRhFXmjzUTPdsqwpauFiqkDaQZiqX7T/ZPrg/w==}
     peerDependencies:
       graphql: ^15.5.0 || ^16.0.0
@@ -7555,7 +7555,7 @@ packages:
     dependencies:
       '@graphiql/toolkit': 0.8.2_7fbl5omhlrpwpn5f5culy6mafe
       '@reach/combobox': 0.17.0_biqbaboplfbrettd7655fr4n2y
-      '@reach/dialog': 0.17.0_jf7puk66b2eiqxne3oe3xlxkou
+      '@reach/dialog': 0.17.0_cis5wmpl6sllca25ejrqakjpau
       '@reach/listbox': 0.17.0_biqbaboplfbrettd7655fr4n2y
       '@reach/menu-button': 0.17.0_7i5myeigehqah43i5u7wbekgba
       '@reach/tooltip': 0.17.0_biqbaboplfbrettd7655fr4n2y
@@ -9470,7 +9470,7 @@ packages:
     dependencies:
       '@types/istanbul-lib-coverage': 2.0.4
       '@types/istanbul-reports': 3.0.1
-      '@types/node': 18.11.18
+      '@types/node': 16.18.11
       '@types/yargs': 15.0.14
       chalk: 4.1.2
     dev: true
@@ -9481,7 +9481,7 @@ packages:
     dependencies:
       '@types/istanbul-lib-coverage': 2.0.4
       '@types/istanbul-reports': 3.0.1
-      '@types/node': 18.11.18
+      '@types/node': 16.18.11
       '@types/yargs': 16.0.4
       chalk: 4.1.2
     dev: true
@@ -9493,7 +9493,7 @@ packages:
       '@jest/schemas': 29.0.0
       '@types/istanbul-lib-coverage': 2.0.4
       '@types/istanbul-reports': 3.0.1
-      '@types/node': 18.11.18
+      '@types/node': 16.18.11
       '@types/yargs': 17.0.13
       chalk: 4.1.2
 
@@ -9529,6 +9529,10 @@ packages:
   /@jridgewell/sourcemap-codec/1.4.14:
     resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
 
+  /@jridgewell/sourcemap-codec/1.4.15:
+    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
+    dev: true
+
   /@jridgewell/trace-mapping/0.3.17:
     resolution: {integrity: sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==}
     dependencies:
@@ -9823,7 +9827,7 @@ packages:
       - supports-color
     dev: true
 
-  /@mui/base/5.0.0-alpha.106_jf7puk66b2eiqxne3oe3xlxkou:
+  /@mui/base/5.0.0-alpha.106_cis5wmpl6sllca25ejrqakjpau:
     resolution: {integrity: sha512-xJQQtwPCPwr6hGWTBdvDwHYwExn3Bw7nPQkN8Fuz8kHpZqoMVWQvvaFS557AIkkI2AFLV3DxVIMjbCvrIntBWg==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -9836,10 +9840,10 @@ packages:
     dependencies:
       '@babel/runtime': 7.20.1
       '@emotion/is-prop-valid': 1.2.0
-      '@mui/types': 7.2.1_@types+react@18.0.37
+      '@mui/types': 7.2.1_@types+react@18.2.0
       '@mui/utils': 5.10.14_react@18.2.0
       '@popperjs/core': 2.11.6
-      '@types/react': 18.0.37
+      '@types/react': 18.2.0
       clsx: 1.2.1
       prop-types: 15.8.1
       react: 18.2.0
@@ -9851,7 +9855,7 @@ packages:
     resolution: {integrity: sha512-qLgIJNOR9Dre8JiZ/neVzOf4jf88J6YtOkQqugtMrleLjbfRVUSS4LWl9CSOjNq76quYdmYWnSDgfQqOooT2cQ==}
     dev: false
 
-  /@mui/material/5.10.14_ldn4mk3ukty6svu26iwhlv53zm:
+  /@mui/material/5.10.14_pkdnygquhgg5xs3cz7lm3zkv5u:
     resolution: {integrity: sha512-HWzKVAykePMx54WtxVwZyL1W4k3xlHYIqwMw0CaXAvgB3UE9yjABZuuGr8vG5Z6CSNWamzd+s1x8u7pQPFl9og==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -9869,14 +9873,14 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.20.1
-      '@emotion/react': 11.10.5_cqbnlhpst5s4upgh7mkdscv5me
-      '@emotion/styled': 11.10.5_xflitrccjjaeurmgxgjvmntw4q
-      '@mui/base': 5.0.0-alpha.106_jf7puk66b2eiqxne3oe3xlxkou
+      '@emotion/react': 11.10.5_f4rnmcvwkfjmsvnuua2jnhfpve
+      '@emotion/styled': 11.10.5_wwcuv5apinz3dbzb4qbts7wkk4
+      '@mui/base': 5.0.0-alpha.106_cis5wmpl6sllca25ejrqakjpau
       '@mui/core-downloads-tracker': 5.10.14
-      '@mui/system': 5.10.14_pna7rrcn5choknb5ggpv7cm5xq
-      '@mui/types': 7.2.1_@types+react@18.0.37
+      '@mui/system': 5.10.14_sfxweiy34wszbolhfyhknrxrw4
+      '@mui/types': 7.2.1_@types+react@18.2.0
       '@mui/utils': 5.10.14_react@18.2.0
-      '@types/react': 18.0.37
+      '@types/react': 18.2.0
       '@types/react-transition-group': 4.4.5
       clsx: 1.2.1
       csstype: 3.1.1
@@ -9887,7 +9891,7 @@ packages:
       react-transition-group: 4.4.5_biqbaboplfbrettd7655fr4n2y
     dev: false
 
-  /@mui/private-theming/5.10.14_24ukasupqqblpyncii3ycicuiu:
+  /@mui/private-theming/5.10.14_3mjolpizrsjgnt7s4ahgoveqvu:
     resolution: {integrity: sha512-3aIBe8WK65CwAPDY8nB11hYnzE1CZMymi76UnaFrA/DdGDwl5Y8F6uB+StKrkVmsqF1po7Mp2odqVkHj320gXw==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -9899,7 +9903,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.21.0
       '@mui/utils': 5.10.14_react@18.2.0
-      '@types/react': 18.0.37
+      '@types/react': 18.2.0
       prop-types: 15.8.1
       react: 18.2.0
     dev: false
@@ -9919,14 +9923,14 @@ packages:
     dependencies:
       '@babel/runtime': 7.21.0
       '@emotion/cache': 11.10.5
-      '@emotion/react': 11.10.5_cqbnlhpst5s4upgh7mkdscv5me
-      '@emotion/styled': 11.10.5_xflitrccjjaeurmgxgjvmntw4q
+      '@emotion/react': 11.10.5_f4rnmcvwkfjmsvnuua2jnhfpve
+      '@emotion/styled': 11.10.5_wwcuv5apinz3dbzb4qbts7wkk4
       csstype: 3.1.1
       prop-types: 15.8.1
       react: 18.2.0
     dev: false
 
-  /@mui/system/5.10.14_pna7rrcn5choknb5ggpv7cm5xq:
+  /@mui/system/5.10.14_sfxweiy34wszbolhfyhknrxrw4:
     resolution: {integrity: sha512-2de7XCjRb1j8Od0Stmo0LwFMLpOMNT4wzfINuExXI1TVSuyxXIXUxiC5FEgJW3GMvf/a7SUR8VOiMoKlKWzukw==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -9943,20 +9947,20 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.20.1
-      '@emotion/react': 11.10.5_cqbnlhpst5s4upgh7mkdscv5me
-      '@emotion/styled': 11.10.5_xflitrccjjaeurmgxgjvmntw4q
-      '@mui/private-theming': 5.10.14_24ukasupqqblpyncii3ycicuiu
+      '@emotion/react': 11.10.5_f4rnmcvwkfjmsvnuua2jnhfpve
+      '@emotion/styled': 11.10.5_wwcuv5apinz3dbzb4qbts7wkk4
+      '@mui/private-theming': 5.10.14_3mjolpizrsjgnt7s4ahgoveqvu
       '@mui/styled-engine': 5.10.14_dovxhg2tvkkxkdnqyoum6wzcxm
-      '@mui/types': 7.2.1_@types+react@18.0.37
+      '@mui/types': 7.2.1_@types+react@18.2.0
       '@mui/utils': 5.10.14_react@18.2.0
-      '@types/react': 18.0.37
+      '@types/react': 18.2.0
       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.37:
+  /@mui/types/7.2.1_@types+react@18.2.0:
     resolution: {integrity: sha512-c5mSM7ivD8EsqK6HUi9hQPr5V7TJ/IRThUQ9nWNYPdhCGriTSQV4vL6DflT99LkM+wLiIS1rVjphpEWxERep7A==}
     peerDependencies:
       '@types/react': '*'
@@ -9964,7 +9968,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.0.37
+      '@types/react': 18.2.0
     dev: false
 
   /@mui/utils/5.10.14_react@18.2.0:
@@ -10029,10 +10033,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_cqbnlhpst5s4upgh7mkdscv5me
-      '@emotion/styled': 11.10.5_xflitrccjjaeurmgxgjvmntw4q
-      '@mui/material': 5.10.14_ldn4mk3ukty6svu26iwhlv53zm
-      '@mui/system': 5.10.14_pna7rrcn5choknb5ggpv7cm5xq
+      '@emotion/react': 11.10.5_f4rnmcvwkfjmsvnuua2jnhfpve
+      '@emotion/styled': 11.10.5_wwcuv5apinz3dbzb4qbts7wkk4
+      '@mui/material': 5.10.14_pkdnygquhgg5xs3cz7lm3zkv5u
+      '@mui/system': 5.10.14_sfxweiy34wszbolhfyhknrxrw4
       '@mui/utils': 5.10.9_react@18.2.0
       '@types/react-transition-group': 4.4.5
       clsx: 1.2.1
@@ -10798,7 +10802,7 @@ packages:
       tslib: 2.5.0
     dev: false
 
-  /@reach/dialog/0.17.0_jf7puk66b2eiqxne3oe3xlxkou:
+  /@reach/dialog/0.17.0_cis5wmpl6sllca25ejrqakjpau:
     resolution: {integrity: sha512-AnfKXugqDTGbeG3c8xDcrQDE4h9b/vnc27Sa118oQSquz52fneUeX9MeFb5ZEiBJK8T5NJpv7QUTBIKnFCAH5A==}
     peerDependencies:
       react: ^16.8.0 || 17.x
@@ -10809,8 +10813,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_24ukasupqqblpyncii3ycicuiu
-      react-remove-scroll: 2.5.5_24ukasupqqblpyncii3ycicuiu
+      react-focus-lock: 2.9.2_3mjolpizrsjgnt7s4ahgoveqvu
+      react-remove-scroll: 2.5.5_3mjolpizrsjgnt7s4ahgoveqvu
       tslib: 2.5.0
     transitivePeerDependencies:
       - '@types/react'
@@ -11329,7 +11333,7 @@ packages:
       - webpack-command
     dev: true
 
-  /@storybook/addon-interactions/6.5.14_hsarfn6kvmmvdlo5khhfvlymn4:
+  /@storybook/addon-interactions/6.5.14_lu5ulwo4rqrsz33fcmhra2bkim:
     resolution: {integrity: sha512-Stw/m3+T6ILrQPwyPgRNYtXZTBk9wE0KOSOUVrc6VixCcXm43nIYkUFiq4NL86lCBR4RKewfgl8U3Rn6chE8Tg==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -11340,7 +11344,7 @@ packages:
       react-dom:
         optional: true
     dependencies:
-      '@devtools-ds/object-inspector': 1.2.0_jf7puk66b2eiqxne3oe3xlxkou
+      '@devtools-ds/object-inspector': 1.2.0_cis5wmpl6sllca25ejrqakjpau
       '@storybook/addons': 6.5.14_biqbaboplfbrettd7655fr4n2y
       '@storybook/api': 6.5.14_biqbaboplfbrettd7655fr4n2y
       '@storybook/client-logger': 6.5.14
@@ -13202,7 +13206,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.20.1
       '@testing-library/dom': 9.0.0
-      '@types/react-dom': 18.0.11
+      '@types/react-dom': 18.2.1
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
     dev: true
@@ -13367,7 +13371,7 @@ packages:
     resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
     dependencies:
       '@types/minimatch': 5.1.2
-      '@types/node': 18.11.18
+      '@types/node': 16.18.11
     dev: true
 
   /@types/glob/8.1.0:
@@ -13380,7 +13384,7 @@ packages:
   /@types/graceful-fs/4.1.5:
     resolution: {integrity: sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==}
     dependencies:
-      '@types/node': 18.11.18
+      '@types/node': 16.18.11
     dev: true
 
   /@types/hast/2.3.4:
@@ -13527,7 +13531,7 @@ packages:
   /@types/node-fetch/2.6.2:
     resolution: {integrity: sha512-DHqhlq5jeESLy19TYhLakJ07kNumXWjcDdxXsLUMJZ6ue8VZJj4kLPQVE/2mdHh3xZziNF1xppu5lwmS53HR+A==}
     dependencies:
-      '@types/node': 18.11.18
+      '@types/node': 16.18.11
       form-data: 3.0.1
     dev: true
 
@@ -13606,42 +13610,48 @@ packages:
       '@types/react': 18.0.34
     dev: true
 
+  /@types/react-dom/18.2.1:
+    resolution: {integrity: sha512-8QZEV9+Kwy7tXFmjJrp3XUKQSs9LTnE0KnoUb0YCguWBiNW0Yfb2iBMYZ08WPg35IR6P3Z0s00B15SwZnO26+w==}
+    dependencies:
+      '@types/react': 18.2.0
+    dev: true
+
   /@types/react-is/17.0.3:
     resolution: {integrity: sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==}
     dependencies:
-      '@types/react': 18.0.37
+      '@types/react': 18.2.0
     dev: false
 
   /@types/react-router-config/5.0.6:
     resolution: {integrity: sha512-db1mx37a1EJDf1XeX8jJN7R3PZABmJQXR8r28yUjVMFSjkmnQo6X6pOEEmNl+Tp2gYQOGPdYbFIipBtdElZ3Yg==}
     dependencies:
       '@types/history': 4.7.11
-      '@types/react': 18.0.37
+      '@types/react': 18.2.0
       '@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.37
+      '@types/react': 18.2.0
       '@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.37
+      '@types/react': 18.2.0
 
   /@types/react-table/7.7.12:
     resolution: {integrity: sha512-bRUent+NR/WwtDGwI/BqhZ8XnHghwHw0HUKeohzB5xN3K2qKWYE5w19e7GCuOkL1CXD9Gi1HFy7TIm2AvgWUHg==}
     dependencies:
-      '@types/react': 18.0.37
+      '@types/react': 18.2.0
     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.37
+      '@types/react': 18.2.0
     dev: false
 
   /@types/react/18.0.34:
@@ -13651,8 +13661,8 @@ packages:
       '@types/scheduler': 0.16.2
       csstype: 3.1.1
 
-  /@types/react/18.0.37:
-    resolution: {integrity: sha512-4yaZZtkRN3ZIQD3KSEwkfcik8s0SWV+82dlJot1AbGYHCzJkWP3ENBY6wYeDRmKZ6HkrgoGAmR2HqdwYGp6OEw==}
+  /@types/react/18.2.0:
+    resolution: {integrity: sha512-0FLj93y5USLHdnhIhABk83rm8XEGA7kH3cr+YUlvxoUGp1xNt/DINUMvqPxLyOQMzLmZe8i4RTHbvb8MC7NmrA==}
     dependencies:
       '@types/prop-types': 15.7.5
       '@types/scheduler': 0.16.2
@@ -13774,7 +13784,7 @@ packages:
   /@types/webpack-sources/3.2.0:
     resolution: {integrity: sha512-Ft7YH3lEVRQ6ls8k4Ff1oB4jN6oy/XmU6tQISKdhfh+1mR+viZFphS6WL0IrtDOzvefmJg5a0s7ZQoRXwqTEFg==}
     dependencies:
-      '@types/node': 18.11.18
+      '@types/node': 16.18.11
       '@types/source-list-map': 0.1.2
       source-map: 0.7.4
     dev: true
@@ -13782,7 +13792,7 @@ packages:
   /@types/webpack/4.41.33:
     resolution: {integrity: sha512-PPajH64Ft2vWevkerISMtnZ8rTs4YmRbs+23c402J0INmxDKCrhZNvwZYtzx96gY2wAtXdrK1BS2fiC8MlLr3g==}
     dependencies:
-      '@types/node': 18.11.18
+      '@types/node': 16.18.11
       '@types/tapable': 1.0.8
       '@types/uglify-js': 3.17.1
       '@types/webpack-sources': 3.2.0
@@ -14542,6 +14552,17 @@ packages:
       vitest: 0.30.0
     dev: true
 
+  /@vitest/coverage-c8/0.30.0_vitest@0.30.1:
+    resolution: {integrity: sha512-NC0GgT4hUyPYUJHE9Sx9gU41pbYWBFI+3nUuZ/ZiQU8WQy27xQJSYGkDmB6wFeAyS5IxUXqhCRsBOK9fEvgmtA==}
+    peerDependencies:
+      vitest: '>=0.30.0 <1'
+    dependencies:
+      c8: 7.13.0
+      picocolors: 1.0.0
+      std-env: 3.3.2
+      vitest: 0.30.1_jsdom@21.0.0
+    dev: true
+
   /@vitest/expect/0.30.0:
     resolution: {integrity: sha512-b/jLWBqi6WQHfezWm8VjgXdIyfejAurtxqdyCdDqoToCim5W/nDxKjFAADitEHPz80oz+IP+c+wmkGKBucSpiw==}
     dependencies:
@@ -14550,6 +14571,14 @@ packages:
       chai: 4.3.7
     dev: true
 
+  /@vitest/expect/0.30.1:
+    resolution: {integrity: sha512-c3kbEtN8XXJSeN81iDGq29bUzSjQhjES2WR3aColsS4lPGbivwLtas4DNUe0jD9gg/FYGIteqOenfU95EFituw==}
+    dependencies:
+      '@vitest/spy': 0.30.1
+      '@vitest/utils': 0.30.1
+      chai: 4.3.7
+    dev: true
+
   /@vitest/runner/0.30.0:
     resolution: {integrity: sha512-Xh4xkdRcymdeRNrSwjhgarCTSgnQu2J59wsFI6i4UhKrL5whzo5+vWyq7iWK1ht3fppPeNAtvkbqUDf+OJSCbQ==}
     dependencies:
@@ -14559,6 +14588,15 @@ packages:
       pathe: 1.1.0
     dev: true
 
+  /@vitest/runner/0.30.1:
+    resolution: {integrity: sha512-W62kT/8i0TF1UBCNMRtRMOBWJKRnNyv9RrjIgdUryEe0wNpGZvvwPDLuzYdxvgSckzjp54DSpv1xUbv4BQ0qVA==}
+    dependencies:
+      '@vitest/utils': 0.30.1
+      concordance: 5.0.4
+      p-limit: 4.0.0
+      pathe: 1.1.0
+    dev: true
+
   /@vitest/snapshot/0.30.0:
     resolution: {integrity: sha512-e4eSGCy36Bw3/Tkir9qYJDlFsUz3NALFPNJSxzlY8CFl901TV9iZdKgpqXpyG1sAhLO0tPHThBAMHRi8hRA8cg==}
     dependencies:
@@ -14567,12 +14605,26 @@ packages:
       pretty-format: 27.5.1
     dev: true
 
+  /@vitest/snapshot/0.30.1:
+    resolution: {integrity: sha512-fJZqKrE99zo27uoZA/azgWyWbFvM1rw2APS05yB0JaLwUIg9aUtvvnBf4q7JWhEcAHmSwbrxKFgyBUga6tq9Tw==}
+    dependencies:
+      magic-string: 0.30.0
+      pathe: 1.1.0
+      pretty-format: 27.5.1
+    dev: true
+
   /@vitest/spy/0.30.0:
     resolution: {integrity: sha512-olTWyG5gVWdfhCrdgxWQb2K3JYtj1/ZwInFFOb4GZ2HFI91PUWHWHhLRPORxwRwVvoXD1MS1162vPJZuHlKJkg==}
     dependencies:
       tinyspy: 2.1.0
     dev: true
 
+  /@vitest/spy/0.30.1:
+    resolution: {integrity: sha512-YfJeIf37GvTZe04ZKxzJfnNNuNSmTEGnla2OdL60C8od16f3zOfv9q9K0nNii0NfjDJRt/CVN/POuY5/zTS+BA==}
+    dependencies:
+      tinyspy: 2.1.0
+    dev: true
+
   /@vitest/utils/0.30.0:
     resolution: {integrity: sha512-qFZgoOKQ+rJV9xG4BBxgOSilnLQ2gkfG4I+z1wBuuQ3AD33zQrnB88kMFfzsot1E1AbF3dNK1e4CU7q3ojahRA==}
     dependencies:
@@ -14581,6 +14633,14 @@ packages:
       pretty-format: 27.5.1
     dev: true
 
+  /@vitest/utils/0.30.1:
+    resolution: {integrity: sha512-/c8Xv2zUVc+rnNt84QF0Y0zkfxnaGhp87K2dYJMLtLOIckPzuxLVzAtFCicGFdB4NeBHNzTRr1tNn7rCtQcWFA==}
+    dependencies:
+      concordance: 5.0.4
+      loupe: 2.3.6
+      pretty-format: 27.5.1
+    dev: true
+
   /@volar/code-gen/0.38.9:
     resolution: {integrity: sha512-n6LClucfA+37rQeskvh9vDoZV1VvCVNy++MAPKj2dT4FT+Fbmty/SDQqnsEBtdEe6E3OQctFvA/IcKsx3Mns0A==}
     dependencies:
@@ -16108,7 +16168,7 @@ packages:
   /axios/0.25.0_debug@4.3.4:
     resolution: {integrity: sha512-cD8FOb0tRH3uuEe6+evtAbgJtfxr7ly3fQjYcMcuPlgkwVS9xboaVIpcDV+cYQe+yGykgwZCs1pzjntcGa6l5g==}
     dependencies:
-      follow-redirects: 1.15.2
+      follow-redirects: 1.15.2_debug@4.3.4
     transitivePeerDependencies:
       - debug
     dev: true
@@ -17468,6 +17528,13 @@ packages:
     requiresBuild: true
     dev: true
 
+  /commander/9.5.0:
+    resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
+    engines: {node: ^12.20.0 || >=14}
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /common-path-prefix/3.0.0:
     resolution: {integrity: sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==}
     dev: true
@@ -17531,7 +17598,7 @@ packages:
       js-string-escape: 1.0.1
       lodash: 4.17.21
       md5-hex: 3.0.1
-      semver: 7.3.8
+      semver: 7.5.0
       well-known-symbols: 2.0.0
     dev: true
 
@@ -21243,6 +21310,19 @@ packages:
     peerDependenciesMeta:
       debug:
         optional: true
+    dev: false
+
+  /follow-redirects/1.15.2_debug@4.3.4:
+    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dependencies:
+      debug: 4.3.4
+    dev: true
 
   /for-each/0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
@@ -21516,7 +21596,7 @@ packages:
     resolution: {integrity: sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==}
     engines: {node: '>= 4.0'}
     os: [darwin]
-    deprecated: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
+    deprecated: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2
     requiresBuild: true
     dependencies:
       bindings: 1.5.0
@@ -21936,14 +22016,14 @@ packages:
     resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
     dev: true
 
-  /graphiql/2.4.0_4y4xajzwih2mwcyvvz5n3z6ol4:
+  /graphiql/2.4.0_hvzwglx44tkqrk3qutu7lxftl4:
     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_4y4xajzwih2mwcyvvz5n3z6ol4
+      '@graphiql/react': 0.17.0_hvzwglx44tkqrk3qutu7lxftl4
       '@graphiql/toolkit': 0.8.2_7fbl5omhlrpwpn5f5culy6mafe
       entities: 2.2.0
       graphql: 16.6.0
@@ -23617,7 +23697,7 @@ packages:
     dependencies:
       '@jest/types': 26.6.2
       '@types/graceful-fs': 4.1.5
-      '@types/node': 18.11.18
+      '@types/node': 16.18.11
       anymatch: 3.1.2
       fb-watchman: 2.0.1
       graceful-fs: 4.2.10
@@ -23676,7 +23756,7 @@ packages:
     resolution: {integrity: sha512-S5wqyz0DXnNJPd/xfIzZ5Xnp1HrJWBczg8mMfMpN78OJ5eDxXyf+Ygld9wX1DnUWbIbhM1YDY95NjR4CBXkb2g==}
     engines: {node: '>= 10.14.2'}
     dependencies:
-      '@types/node': 18.11.18
+      '@types/node': 16.18.11
       graceful-fs: 4.2.10
     dev: true
 
@@ -23685,7 +23765,7 @@ packages:
     engines: {node: '>= 10.14.2'}
     dependencies:
       '@jest/types': 26.6.2
-      '@types/node': 18.11.18
+      '@types/node': 16.18.11
       chalk: 4.1.2
       graceful-fs: 4.2.10
       is-ci: 2.0.0
@@ -23697,7 +23777,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/types': 29.3.1
-      '@types/node': 18.11.18
+      '@types/node': 16.18.11
       chalk: 4.1.2
       ci-info: 3.5.0
       graceful-fs: 4.2.10
@@ -23707,7 +23787,7 @@ packages:
     resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==}
     engines: {node: '>= 10.13.0'}
     dependencies:
-      '@types/node': 18.11.18
+      '@types/node': 16.18.11
       merge-stream: 2.0.0
       supports-color: 7.2.0
     dev: true
@@ -23716,7 +23796,7 @@ packages:
     resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
     engines: {node: '>= 10.13.0'}
     dependencies:
-      '@types/node': 18.11.18
+      '@types/node': 16.18.11
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
@@ -24572,7 +24652,7 @@ packages:
     resolution: {integrity: sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==}
     engines: {node: '>=12'}
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.14
+      '@jridgewell/sourcemap-codec': 1.4.15
     dev: true
 
   /mailhog/4.16.0:
@@ -27820,7 +27900,7 @@ packages:
   /react-fast-compare/3.2.0:
     resolution: {integrity: sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==}
 
-  /react-focus-lock/2.9.2_24ukasupqqblpyncii3ycicuiu:
+  /react-focus-lock/2.9.2_3mjolpizrsjgnt7s4ahgoveqvu:
     resolution: {integrity: sha512-5JfrsOKyA5Zn3h958mk7bAcfphr24jPoMoznJ8vaJF6fUrPQ8zrtEd3ILLOK8P5jvGxdMd96OxWNjDzATfR2qw==}
     peerDependencies:
       '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -27830,13 +27910,13 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.21.0
-      '@types/react': 18.0.37
+      '@types/react': 18.2.0
       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_24ukasupqqblpyncii3ycicuiu
-      use-sidecar: 1.1.2_24ukasupqqblpyncii3ycicuiu
+      use-callback-ref: 1.3.0_3mjolpizrsjgnt7s4ahgoveqvu
+      use-sidecar: 1.1.2_3mjolpizrsjgnt7s4ahgoveqvu
     dev: false
 
   /react-helmet-async/1.3.0_biqbaboplfbrettd7655fr4n2y:
@@ -27978,7 +28058,7 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /react-remove-scroll-bar/2.3.4_24ukasupqqblpyncii3ycicuiu:
+  /react-remove-scroll-bar/2.3.4_3mjolpizrsjgnt7s4ahgoveqvu:
     resolution: {integrity: sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -27988,13 +28068,13 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.0.37
+      '@types/react': 18.2.0
       react: 18.2.0
-      react-style-singleton: 2.2.1_24ukasupqqblpyncii3ycicuiu
+      react-style-singleton: 2.2.1_3mjolpizrsjgnt7s4ahgoveqvu
       tslib: 2.5.0
     dev: false
 
-  /react-remove-scroll/2.5.5_24ukasupqqblpyncii3ycicuiu:
+  /react-remove-scroll/2.5.5_3mjolpizrsjgnt7s4ahgoveqvu:
     resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -28004,13 +28084,13 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.0.37
+      '@types/react': 18.2.0
       react: 18.2.0
-      react-remove-scroll-bar: 2.3.4_24ukasupqqblpyncii3ycicuiu
-      react-style-singleton: 2.2.1_24ukasupqqblpyncii3ycicuiu
+      react-remove-scroll-bar: 2.3.4_3mjolpizrsjgnt7s4ahgoveqvu
+      react-style-singleton: 2.2.1_3mjolpizrsjgnt7s4ahgoveqvu
       tslib: 2.5.0
-      use-callback-ref: 1.3.0_24ukasupqqblpyncii3ycicuiu
-      use-sidecar: 1.1.2_24ukasupqqblpyncii3ycicuiu
+      use-callback-ref: 1.3.0_3mjolpizrsjgnt7s4ahgoveqvu
+      use-sidecar: 1.1.2_3mjolpizrsjgnt7s4ahgoveqvu
     dev: false
 
   /react-router-config/5.1.1_rlw3ibuvnpt5jvejeevjcf4ije:
@@ -28085,7 +28165,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /react-style-singleton/2.2.1_24ukasupqqblpyncii3ycicuiu:
+  /react-style-singleton/2.2.1_3mjolpizrsjgnt7s4ahgoveqvu:
     resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -28095,7 +28175,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.0.37
+      '@types/react': 18.2.0
       get-nonce: 1.0.1
       invariant: 2.2.4
       react: 18.2.0
@@ -28954,6 +29034,14 @@ packages:
     dependencies:
       lru-cache: 6.0.0
 
+  /semver/7.5.0:
+    resolution: {integrity: sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      lru-cache: 6.0.0
+    dev: true
+
   /send/0.18.0:
     resolution: {integrity: sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==}
     engines: {node: '>= 0.8.0'}
@@ -31610,7 +31698,7 @@ packages:
       - graphql
     dev: true
 
-  /use-callback-ref/1.3.0_24ukasupqqblpyncii3ycicuiu:
+  /use-callback-ref/1.3.0_3mjolpizrsjgnt7s4ahgoveqvu:
     resolution: {integrity: sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -31620,7 +31708,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.0.37
+      '@types/react': 18.2.0
       react: 18.2.0
       tslib: 2.5.0
     dev: false
@@ -31685,7 +31773,7 @@ packages:
       use-isomorphic-layout-effect: 1.1.2_react@18.2.0
     dev: false
 
-  /use-sidecar/1.1.2_24ukasupqqblpyncii3ycicuiu:
+  /use-sidecar/1.1.2_3mjolpizrsjgnt7s4ahgoveqvu:
     resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -31695,7 +31783,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.0.37
+      '@types/react': 18.2.0
       detect-node-es: 1.1.0
       react: 18.2.0
       tslib: 2.5.0
@@ -31887,6 +31975,27 @@ packages:
       - terser
     dev: true
 
+  /vite-node/0.30.1_@types+node@16.18.11:
+    resolution: {integrity: sha512-vTikpU/J7e6LU/8iM3dzBo8ZhEiKZEKRznEMm+mJh95XhWaPrJQraT/QsT2NWmuEf+zgAoMe64PKT7hfZ1Njmg==}
+    engines: {node: '>=v14.18.0'}
+    hasBin: true
+    dependencies:
+      cac: 6.7.14
+      debug: 4.3.4
+      mlly: 1.2.0
+      pathe: 1.1.0
+      picocolors: 1.0.0
+      vite: 4.0.4_@types+node@16.18.11
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
   /vite-plugin-dts/2.0.2_vite@4.0.2:
     resolution: {integrity: sha512-i3HBlrdqE2FQxQqrNwFj9P2ei/I7lt/d3Q8NOE1JCz/gNYhNf/oUeIJamIdWQUNQGhUd/Y6mtpm3kOYPw1gz8Q==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -32279,8 +32388,8 @@ packages:
       - terser
     dev: true
 
-  /vitest/0.30.0_jsdom@21.0.0:
-    resolution: {integrity: sha512-2WW4WeTHtrLFeoiuotWvEW6khozx1NvMGYoGsNz2btdddEbqvEdPJIouIdoiC5i61Rl1ctZvm9cn2R9TcPQlzw==}
+  /vitest/0.30.1_jsdom@21.0.0:
+    resolution: {integrity: sha512-y35WTrSTlTxfMLttgQk4rHcaDkbHQwDP++SNwPb+7H8yb13Q3cu2EixrtHzF27iZ8v0XCciSsLg00RkPAzB/aA==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
     peerDependencies:
@@ -32312,12 +32421,12 @@ packages:
     dependencies:
       '@types/chai': 4.3.4
       '@types/chai-subset': 1.3.3
-      '@types/node': 18.11.18
-      '@vitest/expect': 0.30.0
-      '@vitest/runner': 0.30.0
-      '@vitest/snapshot': 0.30.0
-      '@vitest/spy': 0.30.0
-      '@vitest/utils': 0.30.0
+      '@types/node': 16.18.11
+      '@vitest/expect': 0.30.1
+      '@vitest/runner': 0.30.1
+      '@vitest/snapshot': 0.30.1
+      '@vitest/spy': 0.30.1
+      '@vitest/utils': 0.30.1
       acorn: 8.8.2
       acorn-walk: 8.2.0
       cac: 6.7.14
@@ -32334,8 +32443,8 @@ packages:
       strip-literal: 1.0.1
       tinybench: 2.4.0
       tinypool: 0.4.0
-      vite: 4.0.4_@types+node@18.11.18
-      vite-node: 0.30.0_@types+node@18.11.18
+      vite: 4.0.4_@types+node@16.18.11
+      vite-node: 0.30.1_@types+node@16.18.11
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less
@@ -33428,7 +33537,7 @@ packages:
       lodash.isequal: 4.5.0
       validator: 13.7.0
     optionalDependencies:
-      commander: 9.4.1
+      commander: 9.5.0
     dev: true
 
   /zen-observable-ts/1.2.5: