Merge pull request #1910 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,58 @@
 # @nhost/dashboard
 
+## 0.16.4
+
+### Patch Changes
+
+- 3f396a9e: fix(projects): unpause after upgrading a paused project to pro
+- 3f396a9e: fix(projects): don't redirect to 404 page after project creation
+
+## 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
+
+- 2faf7907: chore(deps): bump `graphql-request` to v6
+- f1b5a944: chore(deps): bump `@vitejs/plugin-react` to v4
+- 7f1785ac: chore(deps): bump `@types/react` to v18.0.37
+  - @nhost/react-apollo@5.0.19
+
 ## 0.15.0
 
 ### Minor Changes

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.15.0",
+  "version": "0.16.4",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -51,7 +51,7 @@
     "generate-password": "^1.7.0",
     "graphiql": "^2.4.0",
     "graphql": "^16.6.0",
-    "graphql-request": "^4.3.0",
+    "graphql-request": "^6.0.0",
     "graphql-tag": "^2.12.6",
     "graphql-ws": "^5.11.2",
     "just-kebab-case": "^4.1.1",
@@ -105,14 +105,14 @@
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^16.11.7",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "18.0.34",
-    "@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",
     "@typescript-eslint/parser": "^5.43.0",
-    "@vitejs/plugin-react": "^3.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
     "@vitest/coverage-c8": "^0.30.0",
     "autoprefixer": "^10.4.13",
     "babel-loader": "^8.3.0",
@@ -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/ApplicationPaused.tsx

@@ -33,7 +33,8 @@ export default function ApplicationPaused() {
   } = useCurrentWorkspaceAndProject();
   const user = useUserData();
   const isOwner = currentWorkspace.workspaceMembers.some(
-    ({ id, type }) => id === user?.id && type === 'owner',
+    ({ type, user: workspaceUser }) =>
+      workspaceUser.id === user?.id && type === 'owner',
   );
   const [showDeletingModal, setShowDeletingModal] = useState(false);
   const [unpauseApplication, { loading: changingApplicationStateLoading }] =
@@ -120,20 +121,22 @@ export default function ApplicationPaused() {
         </Box>
 
         <Box className="grid grid-flow-row gap-2">
-          <Button
-            className="mx-auto w-full max-w-[280px]"
-            onClick={() => {
-              openDialog({
-                component: <ChangePlanModal />,
-                props: {
-                  PaperProps: { className: 'p-0' },
-                  maxWidth: 'lg',
-                },
-              });
-            }}
-          >
-            Upgrade to Pro
-          </Button>
+          {isOwner && (
+            <Button
+              className="mx-auto w-full max-w-[280px]"
+              onClick={() => {
+                openDialog({
+                  component: <ChangePlanModal />,
+                  props: {
+                    PaperProps: { className: 'p-0' },
+                    maxWidth: 'lg',
+                  },
+                });
+              }}
+            >
+              Upgrade to Pro
+            </Button>
+          )}
 
           <div className="grid grid-flow-row gap-2">
             <Button

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

@@ -6,29 +6,25 @@ import {
   useGetPaymentMethodsQuery,
   useUpdateApplicationMutation,
 } from '@/generated/graphql';
+import useApplicationState from '@/hooks/useApplicationState';
 import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
+import { ApplicationStatus } from '@/types/application';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 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';
+import getServerError from '@/utils/settings/getServerError';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import { useState } from 'react';
+import { useEffect, 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 +45,7 @@ function Plan({
             component="p"
             className="self-center text-left font-medium"
           >
-            {currentPlan.price > price ? 'Downgrade' : 'Upgrade'} to {planName}
+            Upgrade to {planName}
           </Text>
         </div>
 
@@ -59,7 +55,7 @@ function Plan({
       </div>
 
       <Text variant="h3" component="p">
-        $ {price}/mo
+        ${price}/mo
       </Text>
     </button>
   );
@@ -68,12 +64,14 @@ function Plan({
 export function ChangePlanModalWithData({ app, plans, close }: any) {
   const [selectedPlanId, setSelectedPlanId] = useState('');
   const { closeAlertDialog } = useDialog();
+  const [pollingCurrentProject, setPollingCurrentProject] = useState(false);
 
   const {
     currentWorkspace,
     currentProject,
     refetch: refetchWorkspaceAndProject,
   } = useCurrentWorkspaceAndProject();
+  const { state } = useApplicationState();
 
   const { data } = useGetPaymentMethodsQuery({
     variables: {
@@ -88,7 +86,28 @@ 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;
+  useEffect(() => {
+    if (!pollingCurrentProject || state === ApplicationStatus.Paused) {
+      return;
+    }
+
+    close?.();
+    closeAlertDialog();
+    setShowPaymentModal(false);
+    setPollingCurrentProject(false);
+  }, [state, pollingCurrentProject, close, closeAlertDialog]);
+
+  useEffect(() => {
+    if (!pollingCurrentProject) {
+      return () => {};
+    }
+
+    const interval = setInterval(() => {
+      refetchWorkspaceAndProject();
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [pollingCurrentProject, refetchWorkspaceAndProject, currentProject]);
 
   const [updateApp] = useUpdateApplicationMutation({
     refetchQueries: [
@@ -107,6 +126,7 @@ export function ChangePlanModalWithData({ app, plans, close }: any) {
             appId: app.id,
             app: {
               planId: selectedPlan.id,
+              desiredState: 5,
             },
           },
         }),
@@ -120,11 +140,7 @@ export function ChangePlanModalWithData({ app, plans, close }: any) {
         getToastStyleProps(),
       );
 
-      await refetchWorkspaceAndProject();
-
-      close?.();
-      closeAlertDialog();
-      setShowPaymentModal(false);
+      setPollingCurrentProject(true);
     } catch (error) {
       // Note: Error is handled by the toast.
     }
@@ -142,12 +158,96 @@ export function ChangePlanModalWithData({ app, plans, close }: any) {
     }
 
     await handleUpdateAppPlan();
-
-    setShowPaymentModal(false);
-    close?.();
-    closeAlertDialog();
   };
 
+  if (pollingCurrentProject) {
+    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">
+            Successfully upgraded to {currentPlan.name}
+          </Text>
+
+          <ActivityIndicator
+            label="We are unpausing your project. This may take some time..."
+            className="mx-auto mt-2"
+          />
+
+          <Button
+            variant="outlined"
+            color="secondary"
+            className="mx-auto mt-4 w-full max-w-sm"
+            onClick={() => {
+              if (close) {
+                close();
+              }
+
+              closeAlertDialog();
+            }}
+          >
+            Cancel
+          </Button>
+        </div>
+      </Box>
+    );
+  }
+
+  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
@@ -176,7 +276,7 @@ export function ChangePlanModalWithData({ app, plans, close }: any) {
           You&apos;re currently on the <strong>{app.plan.name}</strong> plan.
         </Text>
 
-        <div className="mt-5">
+        <div className="mt-2">
           {plans
             .filter((plan) => plan.id !== app.plan.id)
             .map((plan) => (
@@ -194,11 +294,13 @@ export function ChangePlanModalWithData({ app, plans, close }: any) {
             ))}
         </div>
 
-        <div className="mt-6 grid grid-flow-row gap-2">
-          <Button onClick={handleChangePlanClick} disabled={!selectedPlan}>
-            {!selectedPlan && 'Change Plan'}
-            {selectedPlan && isDowngrade && 'Downgrade'}
-            {selectedPlan && !isDowngrade && 'Upgrade'}
+        <div className="mt-2 grid grid-flow-row gap-2">
+          <Button
+            onClick={handleChangePlanClick}
+            disabled={!selectedPlan}
+            loading={pollingCurrentProject}
+          >
+            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/ResetDatabasePasswordSettings/ResetDatabasePasswordSettings.tsx

@@ -56,7 +56,9 @@ export default function ResetDatabasePasswordSettings() {
   const handleGenerateRandomPassword = () => {
     const newRandomDatabasePassword = generateRandomDatabasePassword();
     triggerToast('New random database password generated.');
-    setValue('databasePassword', newRandomDatabasePassword);
+    setValue('databasePassword', newRandomDatabasePassword, {
+      shouldDirty: true,
+    });
   };
 
   const handleChangeDatabasePassword = async (

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/useNotFoundRedirect.tsx

@@ -6,52 +6,36 @@ import { useEffect } from 'react';
  * Redirects to 404 page if either currentWorkspace/currentProject resolves to undefined.
  */
 export default function useNotFoundRedirect() {
-  const { currentProject, currentWorkspace, loading } =
-    useCurrentWorkspaceAndProject();
   const router = useRouter();
   const {
     query: { workspaceSlug, appSlug, updating },
     isReady,
   } = router;
 
-  const notIn404Already = router.pathname !== '/404';
-  const noResolvedWorkspace =
-    isReady && !loading && workspaceSlug && currentWorkspace === undefined;
-  const noResolvedApplication =
-    isReady &&
-    !loading &&
-    workspaceSlug &&
-    appSlug &&
-    currentProject === undefined;
-
-  const inSettingsDatabasePage = router.pathname.includes('/settings/database');
+  const { currentProject, currentWorkspace, loading } =
+    useCurrentWorkspaceAndProject();
 
   useEffect(() => {
-    // This code is checking if the URL has a query of the form `?updating=true`
-    // If it does (`updating` is true) this useEffect will immediately exit without executing
-    //  any further statements (e.g. the page will show a loader until `updating` is false).
-    // This is to prevent the user from being redirected to the 404 page while we are updating
-    // either the workspace slug or application slug.
-    if (updating) {
+    if (
+      updating ||
+      !isReady ||
+      loading ||
+      router.pathname === '/404' ||
+      (workspaceSlug && currentWorkspace && appSlug && currentProject) ||
+      (workspaceSlug && currentWorkspace)
+    ) {
       return;
     }
 
-    if (noResolvedWorkspace && notIn404Already) {
-      router.replace('/404');
-    }
-
-    if (noResolvedApplication && notIn404Already) {
-      router.replace('/404');
-    }
+    router.replace('/404');
   }, [
-    isReady,
-    updating,
     currentProject,
     currentWorkspace,
-    noResolvedApplication,
-    noResolvedWorkspace,
-    notIn404Already,
+    isReady,
+    loading,
+    appSlug,
     router,
-    inSettingsDatabasePage,
+    updating,
+    workspaceSlug,
   ]);
 }

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/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

@@ -0,0 +1,40 @@
+---
+title: 'Compute Resources'
+sidebar_position: 1
+image: /img/og/platform/compute-resources.png
+---
+
+Compute resources are the fundamental units that represent the processing power and memory available to your Nhost projects. The primary compute resources are vCPU and RAM. This documentation outlines the key aspects of compute resources in the context of the Nhost Cloud Platform.
+
+
+## Shared vs Dedicated Compute
+
+Free Projects are given a total of 2 shared vCPUs and 1 GiB of RAM:
+	
+ - Postgres: 0.5 vCPU / 256 MiB
+ - Hasura GraphQL: 0.5 vCPU / 384 MiB
+ - Auth: 0.5 vCPU / 256 MiB
+ - Storage: 0.5 vCPU / 128 MiB
+
+Pro Projects are given a total of 2 shared vCPUs and 2 GiB of RAM:
+	
+ - Postgres: 0.5 vCPU / 512 MiB
+ - Hasura GraphQL: 0.5 vCPU / 768 MiB
+ - Auth: 0.5 vCPU / 384 MiB
+ - Storage: 0.5 vCPU / 384 MiB
+
+This is fine if your apps mostly run at low to medium load, occasionally burst for brief periods of time, and can tolerate drops in performance. It is important to understand that the availability of CPU time is not guaranteed.
+
+### Dedicated Compute
+
+On the other hand, for high production workloads where latency is important, or variable performance is not at all tolerable, you should consider configuring your project to use dedicated compute resources. 
+With dedicated compute, resources are guaranteed for your project so you don't have to contend for them.
+
+In addition to the resources fully dedicated to the project, apps are allowed to burst if demand requires it and resources are available. If properly sized, dedicated resources should guarantee the performance of your application while allowing for occassional burts.
+
+To configure dedicated compute to your projects, all you have to do is navigate to the project's settings, and click on "Compute Resources" (see image below). There you will be able to choose the total amount of resources you want to dedicate, and spread those resources amongst all services.
+
+
+![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;
+}

examples/codegen-react-query/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost-examples/codegen-react-query
 
+## 0.1.9
+
+### Patch Changes
+
+- 2faf7907: chore(deps): bump `graphql-request` to v6
+
 ## 0.1.8
 
 ### Patch Changes

examples/codegen-react-query/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost-examples/codegen-react-query",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "private": true,
   "scripts": {
     "codegen": "graphql-codegen",
@@ -20,7 +20,7 @@
     "@tanstack/react-query-devtools": "^4.2.3",
     "clsx": "^1.2.1",
     "graphql": "15.7.2",
-    "graphql-request": "^5.1.0",
+    "graphql-request": "^6.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

integrations/apollo/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @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
+
+- 117398f5: Adds async headers that waits for valid token before establishing connection to backend.
+
 ## 5.2.2
 
 ### Patch Changes

integrations/apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/apollo",
-  "version": "5.2.2",
+  "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/apollo/src/index.ts

@@ -11,7 +11,7 @@ import {
 import { setContext } from '@apollo/client/link/context'
 import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
 import { getMainDefinition } from '@apollo/client/utilities'
-import { NhostClient } from '@nhost/nhost-js'
+import { AuthContext, NhostClient } from '@nhost/nhost-js'
 
 import { createRestartableClient } from './ws'
 const isBrowser = typeof window !== 'undefined'
@@ -56,9 +56,33 @@ export const createApolloClient = ({
   const uri = backendUrl
   const interpreter = nhost?.auth.client.interpreter
 
-  let token: string | null = null
+  let accessToken: AuthContext['accessToken'] | null = null
+
+  const isTokenValid = () =>
+    !!accessToken?.value && !!accessToken?.expiresAt && accessToken?.expiresAt > new Date()
+
+  const isTokenValidOrNull = () => !accessToken || isTokenValid()
+
+  const awaitValidTokenOrNull = () => {
+    if (isTokenValidOrNull()) {
+      return
+    }
+
+    return new Promise((resolve) => {
+      // doing this as an interval to avoid race conditions.
+      const interval = setInterval(() => {
+        if (isTokenValidOrNull()) {
+          clearInterval(interval)
+          resolve(true)
+        }
+      }, 100)
+    })
+  }
+
+  const getAuthHeaders = async () => {
+    // wait for valid access token
+    await awaitValidTokenOrNull()
 
-  function getAuthHeaders() {
     // add headers
     const resHeaders = {
       ...headers,
@@ -67,8 +91,8 @@ export const createApolloClient = ({
 
     // add auth headers if signed in
     // or add 'public' role if not signed in
-    if (token) {
-      resHeaders.authorization = `Bearer ${token}`
+    if (accessToken) {
+      resHeaders.authorization = `Bearer ${accessToken.value}`
     } else {
       // ? Not sure it changes anything for Hasura
       resHeaders.role = publicRole
@@ -97,10 +121,10 @@ export const createApolloClient = ({
             )
           )
         },
-        connectionParams: () => ({
+        connectionParams: async () => ({
           headers: {
             ...headers,
-            ...getAuthHeaders()
+            ...(await getAuthHeaders())
           }
         })
       })
@@ -108,12 +132,14 @@ export const createApolloClient = ({
 
   const wsLink = wsClient ? new GraphQLWsLink(wsClient) : null
 
-  const httpLink = setContext((_, { headers }) => ({
-    headers: {
-      ...headers,
-      ...getAuthHeaders()
+  const httpLink = setContext(async (_, { headers }) => {
+    return {
+      headers: {
+        ...headers,
+        ...(await getAuthHeaders())
+      }
     }
-  })).concat(createHttpLink({ uri }))
+  }).concat(createHttpLink({ uri }))
 
   const splitLink = wsLink
     ? split(
@@ -162,7 +188,7 @@ export const createApolloClient = ({
   interpreter?.onTransition(async (state, event) => {
     if (['SIGNOUT', 'SIGNED_IN', 'TOKEN_CHANGED'].includes(event.type)) {
       if (event.type === 'SIGNOUT') {
-        token = null
+        accessToken = null
 
         try {
           await client.resetStore()
@@ -175,7 +201,7 @@ export const createApolloClient = ({
       }
 
       // update token
-      token = state.context.accessToken.value
+      accessToken = state.context.accessToken
 
       if (!isBrowser || !wsClient?.isOpen()) {
         return

integrations/google-translation/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/google-translation
 
+## 0.0.4
+
+### Patch Changes
+
+- 2faf7907: chore(deps): bump `graphql-request` to v6
+
 ## 0.0.3
 
 ### Patch Changes

integrations/google-translation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/google-translation",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Google Translation GraphQL API",
   "license": "MIT",
   "keywords": [
@@ -45,7 +45,7 @@
     "@graphql-yoga/node": "^2.13.13",
     "@pothos/core": "^3.22.5",
     "graphql": "^16.6.0",
-    "graphql-request": "^5.0.0"
+    "graphql-request": "^6.0.0"
   },
   "devDependencies": {
     "@types/node": "^16.11.7",

integrations/react-apollo/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @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
+
+- Updated dependencies [117398f5]
+  - @nhost/apollo@5.2.3
+
 ## 5.0.18
 
 ### Patch Changes

integrations/react-apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-apollo",
-  "version": "5.0.18",
+  "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"

package.json

@@ -61,7 +61,7 @@
     "@types/node": "^16.11.7",
     "@typescript-eslint/eslint-plugin": "^5.42.1",
     "@typescript-eslint/parser": "^5.42.1",
-    "@vitejs/plugin-react": "^3.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
     "@vitest/coverage-c8": "^0.30.0",
     "eslint": "^8.26.0",
     "eslint-config-react-app": "^7.0.1",
@@ -76,7 +76,7 @@
     "husky": "^8.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
-    "turbo": "1.8.8",
+    "turbo": "1.9.3",
     "typedoc": "^0.22.18",
     "typescript": "4.9.5",
     "vite": "^4.0.2",

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,19 @@
 # @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
+
+- a5b895a8: chore(deps): bump `@vueuse/core` to v10
+
 ## 1.13.20
 
 ### Patch Changes

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/vue",
-  "version": "1.13.20",
+  "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"
@@ -65,7 +66,7 @@
   },
   "dependencies": {
     "@nhost/nhost-js": "workspace:*",
-    "@vueuse/core": "^9.0.0",
+    "@vueuse/core": "^10.0.0",
     "@xstate/vue": "^2.0.0",
     "jwt-decode": "^3.1.2"
   },