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

chore: update versions

.github/workflows/renovate.yaml

@@ -1,89 +0,0 @@
-name: Renovate
-
-on:
-  pull_request:
-    branches: [main]
-    types: [closed]
-    paths-ignore:
-      - 'assets/**'
-      - '**.md'
-      - 'LICENSE'
-env:
-  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-  TURBO_TEAM: nhost
-
-jobs:
-  renovate-changeset:
-    name: Add changeset
-    if: github.event.pull_request.merged == true && startsWith(github.head_ref, 'renovate/')
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-          token: ${{ secrets.GH_PAT }}
-      # * Install Node and dependencies. Package downloads will be cached for the next jobs.
-      - name: Install Node and dependencies
-        uses: ./.github/actions/install-dependencies
-        with:
-          TURBO_TOKEN: ${{ env.TURBO_TOKEN }}
-          TURBO_TEAM: ${{ env.TURBO_TEAM }}
-          BUILD: 'none'
-      - name: Determine bumps
-        id: bumps
-        run: |
-          LAST_NON_PR_SHA=$(git log --no-merges main origin/${{ github.head_ref }} --format=format:%h -- | head -2 | tail -1)
-          echo "result<<EOF" >> $GITHUB_OUTPUT
-          pnpm recursive list --depth -1 --parseable \
-              --filter='!nhost-root' \
-              --filter=[$LAST_NON_PR_SHA] \
-              | xargs -I@ jq ".name" @/package.json \
-              | sort \
-              | uniq -u \
-              | awk '$0=$0": patch"' \
-              >> $GITHUB_OUTPUT
-          echo 'EOF' >> $GITHUB_OUTPUT
-      - name: Install dictionary
-        if: steps.bumps.outputs.result != ''
-        run: sudo apt-get install wbritish
-      - name: Generate changeset file name
-        id: file_name
-        if: steps.bumps.outputs.result != ''
-        run: |
-          FILE_NAME=$(shuf -n 3 /usr/share/dict/words | tr '\n' '-' | sed 's/-$//' | sed 's/'"'"'s//g' | tr '[:upper:]' '[:lower:]')
-          echo "result=./.changeset/${FILE_NAME}.md" >> $GITHUB_OUTPUT
-      - name: Create changeset file
-        if: steps.bumps.outputs.result != ''
-        run: |
-          cat <<EOF > ${{ steps.file_name.outputs.result }}
-          ---
-          ${{ steps.bumps.outputs.result }}
-          ---
-
-          ${{ github.event.pull_request.title }}
-          EOF
-      - name: Create Pull Request
-        id: cpr
-        uses: peter-evans/create-pull-request@v4
-        with:
-          token: ${{ secrets.GH_PAT }}
-          commit-message: ${{ github.event.pull_request.title }}
-          branch: renovate-changesets
-          delete-branch: true
-          title: 'chore: create changesest from Renovate bumps'
-          labels: |
-            dependencies
-          body: |
-            This PR creates the changesets from the Renovate dependencies that have been merged to main.
-      - name: Enable Pull Request Automerge
-        if: steps.cpr.outputs.pull-request-operation == 'created'
-        uses: peter-evans/enable-pull-request-automerge@v2
-        with:
-          token: ${{ secrets.GH_PAT }}
-          pull-request-number: ${{ steps.cpr.outputs.pull-request-number }}
-      - name: Auto approve
-        if: steps.cpr.outputs.pull-request-operation == 'created'
-        uses: juliangruber/approve-pull-request-action@v2
-        with:
-          github-token: ${{ secrets.GH_PAT }}
-          number: ${{ steps.cpr.outputs.pull-request-number }}

dashboard/.env.example

@@ -1,8 +1,17 @@
+# General Environment Variables
 NEXT_PUBLIC_ENV=dev
-NEXT_PUBLIC_NHOST_HASURA_URL=http://localhost:9695
-NEXT_PUBLIC_NHOST_MIGRATIONS_URL=http://localhost:9693
-NEXT_PUBLIC_NHOST_BACKEND_URL=http://localhost:1337
 NEXT_PUBLIC_NHOST_PLATFORM=false
+
+# Environment Variables for Self Hosting and Local Development
+NEXT_PUBLIC_NHOST_AUTH_URL=https://local.auth.nhost.run/v1
+NEXT_PUBLIC_NHOST_FUNCTIONS_URL=https://local.functions.nhost.run/v1
+NEXT_PUBLIC_NHOST_GRAPHQL_URL=https://local.graphql.nhost.run/v1
+NEXT_PUBLIC_NHOST_STORAGE_URL=https://local.storage.nhost.run/v1
+NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL=https://local.hasura.nhost.run
+NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL=https://local.hasura.nhost.run/v1/migrations
+NEXT_PUBLIC_NHOST_HASURA_API_URL=https://local.hasura.nhost.run
+
+# Environment Variables when running the Nhost Dashboard against the Nhost Backend
 NEXT_PUBLIC_STRIPE_PK=<nhost_stripe_public_key>
 NEXT_PUBLIC_GITHUB_APP_INSTALL_URL=<github_app_install_url>
 NEXT_PUBLIC_ANALYTICS_WRITE_KEY=<analytics_write_key>

dashboard/CHANGELOG.md

@@ -1,5 +1,62 @@
 # @nhost/dashboard
 
+## 0.13.6
+
+### Patch Changes
+
+- 253dd235: using new mutation to create projects + refactor Create Project page.
+
+## 0.13.5
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.12
+- @nhost/nextjs@1.13.17
+
+## 0.13.4
+
+### Patch Changes
+
+- b48bc034: fix(dashboard): disable new users
+- 798e591b: fix(dashboard): show correct date in data grid
+
+## 0.13.3
+
+### Patch Changes
+
+- bfb4c1a6: chore(dashboard): remove `useAxios` property
+- d8d8394b: Dashboard: allow to override hasura admin secret in docker
+- Updated dependencies [ce1ee40d]
+  - @nhost/nextjs@1.13.16
+  - @nhost/react-apollo@5.0.11
+
+## 0.13.2
+
+### Patch Changes
+
+- beed2eba: Fix docker entrypoint for dashboard
+- 2c8559a3: fix(dashboard): refresh project list after deleting a project
+- 4329d048: chore(dashboard): bump `graphiql` dependencies
+
+## 0.13.1
+
+### Patch Changes
+
+- cbb1fc5b: chore(dashboard): cleanup GraphQL operations
+
+## 0.13.0
+
+### Minor Changes
+
+- 088584e7: feat(dashboard): add support for custom local subdomains
+
+### Patch Changes
+
+- 2ac90dfd: fix(dashboard): improve mobile responsive layout
+- Updated dependencies [f375eacc]
+  - @nhost/nextjs@1.13.15
+  - @nhost/react-apollo@5.0.10
+
 ## 0.12.4
 
 ### Patch Changes

dashboard/Dockerfile

@@ -19,10 +19,15 @@ ENV NEXT_TELEMETRY_DISABLED 1
 ENV NEXT_PUBLIC_ENV dev
 ENV NEXT_PUBLIC_NHOST_PLATFORM false
 
-# placeholders for ports, will be replaced on runtime by entrypoint script
+# placeholders for URLs, will be replaced on runtime by entrypoint script
-ENV NEXT_PUBLIC_NHOST_MIGRATIONS_PORT __NEXT_PUBLIC_NHOST_MIGRATIONS_PORT__
+ENV NEXT_PUBLIC_NHOST_ADMIN_SECRET __NEXT_PUBLIC_NHOST_ADMIN_SECRET__
-ENV NEXT_PUBLIC_NHOST_HASURA_PORT __NEXT_PUBLIC_NHOST_HASURA_PORT__
+ENV NEXT_PUBLIC_NHOST_AUTH_URL __NEXT_PUBLIC_NHOST_AUTH_URL__
-ENV NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT __NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT__
+ENV NEXT_PUBLIC_NHOST_FUNCTIONS_URL __NEXT_PUBLIC_NHOST_FUNCTIONS_URL__
+ENV NEXT_PUBLIC_NHOST_GRAPHQL_URL __NEXT_PUBLIC_NHOST_GRAPHQL_URL__
+ENV NEXT_PUBLIC_NHOST_STORAGE_URL __NEXT_PUBLIC_NHOST_STORAGE_URL__
+ENV NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL __NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL__
+ENV NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL __NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL__
+ENV NEXT_PUBLIC_NHOST_HASURA_API_URL __NEXT_PUBLIC_NHOST_HASURA_API_URL__
 
 RUN yarn global add pnpm@7.17.0
 COPY .gitignore .gitignore

dashboard/README.md

@@ -35,8 +35,17 @@ You can connect the Nhost Dashboard to your locally running backend by setting t
 ```bash
 NEXT_PUBLIC_ENV=dev
 NEXT_PUBLIC_NHOST_PLATFORM=false
+NEXT_PUBLIC_NHOST_AUTH_URL=https://local.auth.nhost.run/v1
+NEXT_PUBLIC_NHOST_FUNCTIONS_URL=https://local.functions.nhost.run/v1
+NEXT_PUBLIC_NHOST_GRAPHQL_URL=https://local.graphql.nhost.run/v1
+NEXT_PUBLIC_NHOST_STORAGE_URL=https://local.storage.nhost.run/v1
+NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL=https://local.hasura.nhost.run
+NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL=https://local.hasura.nhost.run/v1/migrations
+NEXT_PUBLIC_NHOST_HASURA_API_URL=https://local.hasura.nhost.run
 ```
 
+This will connect the Nhost Dashboard to your locally running Nhost backend.
+
 ### Storybook
 
 Components are documented using [Storybook](https://storybook.js.org/). To run Storybook, run the following command:
@@ -45,23 +54,39 @@ Components are documented using [Storybook](https://storybook.js.org/). To run S
 pnpm storybook
 ```
 
-### Full list of environment variables
+### General Environment Variables
 
-| Name                                      | Description                                                                                                                                          |
+| Name                             | Description                                                                                                                                                                                                          |
-| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `NEXT_PUBLIC_ENV`                         | `dev`, `staging` or `prod`. Should be set to `dev` in most cases.                                                                                    |
+| `NEXT_PUBLIC_ENV`                | `dev`, `staging` or `prod`. This should be set to `dev` in most cases.                                                                                                                                               |
-| `NEXT_PUBLIC_NHOST_PLATFORM`              | This should be set to `false` to connect the Nhost Dashboard to a locally running Nhost backend. Setting this to `true` turns off local development. |
+| `NEXT_PUBLIC_NHOST_ADMIN_SECRET` | Admin secret for Hasura. Default: `nhost-admin-secret`                                                                                                                                                               |
-| `NEXT_PUBLIC_NHOST_LOCAL_MIGRATIONS_PORT` | Custom port that was passed to the CLI. Used only if local development is enabled. Default: `9693`                                                   |
+| `NEXT_PUBLIC_NHOST_PLATFORM`     | This should be set to `false` to connect the Nhost Dashboard to a locally running or a self-hosted Nhost backend. Setting this to `true` will connect the Nhost Dashboard to the cloud environment. Default: `false` |
-| `NEXT_PUBLIC_NHOST_LOCAL_HASURA_PORT`     | Custom port that was passed to the CLI. Used only if local development is enabled and `NEXT_PUBLIC_ENV` is `dev`. Default: `9695`                    |
+
-| `NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT`    | Custom port that was passed to the CLI. Used only if local development is enabled. Default: `1337`                                                   |
+### Environment Variables for Local Development and Self-Hosting
-| `NEXT_PUBLIC_NHOST_BACKEND_URL`           | Backend URL. Not necessary for local development.                                                                                                    |
+
-| `NEXT_PUBLIC_STRIPE_PK`                   | Stripe public key. Not necessary for local development.                                                                                              |
+| Name | Description |
-| `NEXT_PUBLIC_GITHUB_APP_INSTALL_URL`      | URL of the GitHub application. Not necessary for local development.                                                                                  |
+| ---- | ----------- |
-| `NEXT_PUBLIC_ANALYTICS_WRITE_KEY`         | Analytics key. Not necessary for local development.                                                                                                  |
+
-| `NEXT_PUBLIC_NHOST_BRAGI_WEBSOCKET`       | URL of the Bragi websocket. Not necessary for local development.                                                                                     |
+| `NEXT_PUBLIC_NHOST_AUTH_URL` | The URL of the Auth service. When working locally, point it to the Auth service started by the CLI. When self-hosting, point it to the self-hosted Auth service. |
-| `NEXT_PUBLIC_MAINTENANCE_ACTIVE`          | Determines whether or not maintenance mode is active.                                                                                                |
+| `NEXT_PUBLIC_NHOST_FUNCTIONS_URL` | The URL of the Functions service. When working locally, point it to the Functions service started by the CLI. When self-hosting, point it to the self-hosted Functions service. |
-| `NEXT_PUBLIC_MAINTENANCE_END_DATE`        | Date when maintenance mode will end.                                                                                                                 |
+| `NEXT_PUBLIC_NHOST_GRAPHQL_URL` | The URL of the GraphQL service. When working locally, point it to the GraphQL service started by the CLI. When self-hosting, point it to the self-hosted GraphQL service. |
-| `NEXT_PUBLIC_MAINTENANCE_UNLOCK_SECRET`   | Secret that can be used to bypass maintenance mode.                                                                                                  |
+| `NEXT_PUBLIC_NHOST_STORAGE_URL` | The URL of the Storage service. When working locally, point it to the Storage service started by the CLI. When self-hosting, point it to the self-hosted Storage service. |
+| `NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL` | The URL of the Hasura Console. When working locally, point it to the Hasura Console started by the CLI. When self-hosting, point it to the self-hosted Hasura Console. |
+| `NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL` | The URL of Hasura's Migrations service. When working locally, point it to the Migrations service started by the CLI. |
+| `NEXT_PUBLIC_NHOST_HASURA_API_URL` | The URL of Hasura's Schema and Metadata API. When working locally, point it to the Schema and Metadata API started by the CLI. When self-hosting, point it to the self-hosted Schema and Metadata API. |
+
+### Other Environment Variables
+
+| Name                                    | Description                                                                                 |
+| --------------------------------------- | ------------------------------------------------------------------------------------------- |
+| `NEXT_PUBLIC_NHOST_BACKEND_URL`         | Backend URL. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`.                   |
+| `NEXT_PUBLIC_STRIPE_PK`                 | Stripe public key. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`.             |
+| `NEXT_PUBLIC_GITHUB_APP_INSTALL_URL`    | URL of the GitHub application. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`. |
+| `NEXT_PUBLIC_ANALYTICS_WRITE_KEY`       | Analytics key. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`.                 |
+| `NEXT_PUBLIC_NHOST_BRAGI_WEBSOCKET`     | URL of the Bragi websocket. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`.    |
+| `NEXT_PUBLIC_MAINTENANCE_ACTIVE`        | Determines whether or not maintenance mode is active.                                       |
+| `NEXT_PUBLIC_MAINTENANCE_END_DATE`      | Date when maintenance mode will end.                                                        |
+| `NEXT_PUBLIC_MAINTENANCE_UNLOCK_SECRET` | Secret that can be used to bypass maintenance mode.                                         |
 
 ## ESLint Rules
 

dashboard/docker-entrypoint.sh

@@ -1,15 +1,25 @@
 #!/bin/sh
 
-set -e
+set -euo pipefail
 
-# read ports from env variables or use defaults
+# read URLs from env variables (with defaults)
-NEXT_PUBLIC_NHOST_MIGRATIONS_PORT="${NEXT_PUBLIC_NHOST_MIGRATIONS_PORT:=9693}"
+NEXT_PUBLIC_NHOST_ADMIN_SECRET="${NEXT_PUBLIC_NHOST_ADMIN_SECRET:-nhost-admin-secret}"
-NEXT_PUBLIC_NHOST_HASURA_PORT="${NEXT_PUBLIC_NHOST_HASURA_PORT:=9695}"
+NEXT_PUBLIC_NHOST_AUTH_URL="${NEXT_PUBLIC_NHOST_AUTH_URL:-http://localhost:1337/v1/auth}"
-NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT="${NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT:=1337}"
+NEXT_PUBLIC_NHOST_FUNCTIONS_URL="${NEXT_PUBLIC_NHOST_FUNCTIONS_URL:-http://localhost:1337/v1/functions}"
+NEXT_PUBLIC_NHOST_GRAPHQL_URL="${NEXT_PUBLIC_NHOST_GRAPHQL_URL:-http://localhost:1337/v1/graphql}"
+NEXT_PUBLIC_NHOST_STORAGE_URL="${NEXT_PUBLIC_NHOST_STORAGE_URL:-http://localhost:1337/v1/storage}"
+NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL="${NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL:-http://localhost:9695}"
+NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL="${NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL:-http://localhost:9693}"
+NEXT_PUBLIC_NHOST_HASURA_API_URL="${NEXT_PUBLIC_NHOST_HASURA_API_URL:-http://localhost:8080}"
 
 # replace placeholders
-find dashboard -type f -exec sed -i "s/__NEXT_PUBLIC_NHOST_MIGRATIONS_PORT__/${NEXT_PUBLIC_NHOST_MIGRATIONS_PORT}/g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_ADMIN_SECRET__~${NEXT_PUBLIC_NHOST_ADMIN_SECRET}~g" {} +
-find dashboard -type f -exec sed -i "s/__NEXT_PUBLIC_NHOST_HASURA_PORT__/${NEXT_PUBLIC_NHOST_HASURA_PORT}/g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_AUTH_URL__~${NEXT_PUBLIC_NHOST_AUTH_URL}~g" {} +
-find dashboard -type f -exec sed -i "s/__NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT__/${NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT}/g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_FUNCTIONS_URL__~${NEXT_PUBLIC_NHOST_FUNCTIONS_URL}~g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_GRAPHQL_URL__~${NEXT_PUBLIC_NHOST_GRAPHQL_URL}~g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_STORAGE_URL__~${NEXT_PUBLIC_NHOST_STORAGE_URL}~g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL__~${NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL}~g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL__~${NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL}~g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_HASURA_API_URL__~${NEXT_PUBLIC_NHOST_HASURA_API_URL}~g" {} +
 
 exec "$@"

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.12.4",
+  "version": "0.13.6",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -25,8 +25,8 @@
     "@emotion/styled": "^11.10.5",
     "@fontsource/inter": "^4.5.14",
     "@fontsource/roboto-mono": "^4.5.8",
-    "@graphiql/react": "^0.15.0",
+    "@graphiql/react": "^0.17.0",
-    "@graphiql/toolkit": "^0.8.0",
+    "@graphiql/toolkit": "^0.8.2",
     "@headlessui/react": "^1.6.5",
     "@heroicons/react": "^1.0.6",
     "@hookform/resolvers": "^2.9.10",
@@ -37,7 +37,7 @@
     "@nhost/nextjs": "workspace:*",
     "@nhost/react-apollo": "workspace:*",
     "@segment/snippet": "^4.15.3",
-    "@stripe/react-stripe-js": "^1.10.0",
+    "@stripe/react-stripe-js": "^2.0.0",
     "@stripe/stripe-js": "^1.35.0",
     "@tailwindcss/forms": "^0.5.3",
     "@tanstack/react-query": "^4.16.1",
@@ -48,7 +48,7 @@
     "clsx": "^1.2.1",
     "date-fns": "^2.29.3",
     "generate-password": "^1.7.0",
-    "graphiql": "^2.2.0",
+    "graphiql": "^2.4.0",
     "graphql": "^16.6.0",
     "graphql-request": "^4.3.0",
     "graphql-tag": "^2.12.6",

dashboard/src/components/applications/ApplicationInfo.tsx

@@ -9,28 +9,39 @@ import Link from '@/ui/v2/Link';
 import Text from '@/ui/v2/Text';
 import { copy } from '@/utils/copy';
 import { getApplicationStatusString } from '@/utils/helpers';
-import { triggerToast } from '@/utils/toast';
+import getServerError from '@/utils/settings/getServerError';
 import { formatDistance } from 'date-fns';
 import { useRouter } from 'next/router';
+import { toast } from 'react-hot-toast';
 
 export default function ApplicationInfo() {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const [deleteApplication, { client }] = useDeleteApplicationMutation({
+  const [deleteApplication] = useDeleteApplicationMutation({
     refetchQueries: [GetOneUserDocument],
   });
   const router = useRouter();
 
   async function handleClickRemove() {
-    await deleteApplication({
+    try {
-      variables: {
+      await toast.promise(
-        appId: currentApplication.id,
+        deleteApplication({
-      },
+          variables: {
-    });
+            appId: currentApplication.id,
-    await router.push('/');
+          },
-    await client.refetchQueries({
+        }),
-      include: ['getOneUser'],
+        {
-    });
+          loading: 'Deleting project...',
-    triggerToast(`${currentApplication.name} deleted`);
+          success: 'The project has been deleted successfully.',
+          error: getServerError(
+            'An error occurred while deleting the project. Please try again.',
+          ),
+        },
+      );
+
+      await router.push('/');
+    } catch {
+      // Note: The toast will handle the error.
+    }
   }
 
   return (

dashboard/src/components/applications/ApplicationPaused.tsx

@@ -3,54 +3,81 @@ import { ChangePlanModal } from '@/components/applications/ChangePlanModal';
 import { StagingMetadata } from '@/components/applications/StagingMetadata';
 import { useDialog } from '@/components/common/DialogProvider';
 import Container from '@/components/layout/Container';
-import { useUpdateApplicationMutation } from '@/generated/graphql';
+import {
+  GetOneUserDocument,
+  useGetFreeAndActiveProjectsQuery,
+  useUnpauseApplicationMutation,
+} from '@/generated/graphql';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { ApplicationStatus } from '@/types/application';
 import { Modal } from '@/ui';
+import { Alert } from '@/ui/Alert';
+import ActivityIndicator from '@/ui/v2/ActivityIndicator';
+import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
 import Text from '@/ui/v2/Text';
-import { discordAnnounce } from '@/utils/discordAnnounce';
+import { MAX_FREE_PROJECTS } from '@/utils/CONSTANTS';
-import { triggerToast } from '@/utils/toast';
+import { getToastStyleProps } from '@/utils/settings/settingsConstants';
-import { updateOwnCache } from '@/utils/updateOwnCache';
+import type { ApolloError } from '@apollo/client';
 import { useUserData } from '@nhost/nextjs';
 import Image from 'next/image';
 import { useState } from 'react';
+import { toast } from 'react-hot-toast';
 import { RemoveApplicationModal } from './RemoveApplicationModal';
 
 export default function ApplicationPaused() {
   const { openAlertDialog } = useDialog();
   const { currentWorkspace, currentApplication } =
     useCurrentWorkspaceAndApplication();
-  const [changingApplicationStateLoading, setChangingApplicationStateLoading] =
+  const { id } = useUserData();
-    useState(false);
-  const [updateApplication, { client }] = useUpdateApplicationMutation();
-  const { id, email } = useUserData();
   const isOwner = currentWorkspace.members.some(
     ({ userId, type }) => userId === id && type === 'owner',
   );
-  const isPro = currentApplication.plan.name === 'Pro';
   const [showDeletingModal, setShowDeletingModal] = useState(false);
+  const [unpauseApplication, { loading: changingApplicationStateLoading }] =
+    useUnpauseApplicationMutation({
+      refetchQueries: [GetOneUserDocument],
+    });
+
+  const { data, loading } = useGetFreeAndActiveProjectsQuery({
+    variables: { userId: id },
+    fetchPolicy: 'cache-and-network',
+  });
+
+  const numberOfFreeAndLiveProjects = data?.freeAndActiveProjects.length || 0;
+  const wakeUpDisabled = numberOfFreeAndLiveProjects >= MAX_FREE_PROJECTS;
 
   async function handleTriggerUnpausing() {
-    setChangingApplicationStateLoading(true);
     try {
-      await updateApplication({
+      await toast.promise(
-        variables: {
+        unpauseApplication({ variables: { appId: currentApplication.id } }),
-          appId: currentApplication.id,
+        {
-          app: {
+          loading: 'Starting the project...',
-            desiredState: ApplicationStatus.Live,
+          success: `The project has been started successfully.`,
+          error: (arg: ApolloError) => {
+            // we need to get the internal error message from the GraphQL error
+            const { internal } = arg.graphQLErrors[0]?.extensions || {};
+            const { message } = (internal as Record<string, any>)?.error || {};
+
+            // we use the default Apollo error message if we can't find the
+            // internal error message
+            return (
+              message ||
+              arg.message ||
+              'An error occurred while waking up the project. Please try again.'
+            );
           },
         },
-      });
+        getToastStyleProps(),
-      await updateOwnCache(client);
-      discordAnnounce(
-        `App ${currentApplication.name} (${email}) set to awake.`,
       );
-      triggerToast(`${currentApplication.name} set to awake.`);
+    } catch {
-    } catch (e) {
+      // Note: The toast will handle the error.
-      triggerToast(`Error trying to awake ${currentApplication.name}`);
     }
   }
+
+  if (loading) {
+    return <ActivityIndicator label="Loading user data..." delay={1000} />;
+  }
+
   return (
     <>
       <Modal
@@ -65,7 +92,7 @@ export default function ApplicationPaused() {
         />
       </Modal>
 
-      <Container className="mx-auto mt-20 grid max-w-sm grid-flow-row gap-2 text-center">
+      <Container className="mx-auto mt-20 grid max-w-lg grid-flow-row gap-4 text-center">
         <div className="mx-auto flex w-centImage flex-col text-center">
           <Image
             src="/assets/PausedApp.svg"
@@ -75,16 +102,18 @@ export default function ApplicationPaused() {
           />
         </div>
 
-        <Text variant="h3" component="h1" className="mt-4">
+        <Box className="grid grid-flow-row gap-1">
-          {currentApplication.name} is sleeping
+          <Text variant="h3" component="h1">
-        </Text>
+            {currentApplication.name} is sleeping
+          </Text>
 
-        <Text className="mt-1">
+          <Text>
-          Projects on the free plan stop responding to API calls after 7 days of
+            Starter projects stop responding to API calls after 7 days of
-          no traffic.
+            inactivity. Upgrade to Pro to avoid autosleep.
-        </Text>
+          </Text>
+        </Box>
 
-        {!isPro && (
+        <Box className="grid grid-flow-row gap-2">
           <Button
             className="mx-auto w-full max-w-[280px]"
             onClick={() => {
@@ -101,32 +130,41 @@ export default function ApplicationPaused() {
               });
             }}
           >
-            Upgrade to Pro to avoid autosleep
+            Upgrade to Pro
-          </Button>
-        )}
-
-        <div className="grid grid-flow-row gap-2">
-          <Button
-            variant="borderless"
-            className="mx-auto w-full max-w-[280px]"
-            loading={changingApplicationStateLoading}
-            disabled={changingApplicationStateLoading}
-            onClick={handleTriggerUnpausing}
-          >
-            Wake Up
           </Button>
 
-          {isOwner && (
+          <div className="grid grid-flow-row gap-2">
             <Button
-              color="error"
               variant="borderless"
               className="mx-auto w-full max-w-[280px]"
-              onClick={() => setShowDeletingModal(true)}
+              loading={changingApplicationStateLoading}
+              disabled={changingApplicationStateLoading || wakeUpDisabled}
+              onClick={handleTriggerUnpausing}
             >
-              Delete Project
+              Wake Up
             </Button>
-          )}
+
-        </div>
+            {wakeUpDisabled && (
+              <Alert severity="warning" className="mx-auto max-w-xs text-left">
+                Note: Only one free project can be active at any given time.
+                Please pause your active free project before unpausing{' '}
+                {currentApplication.name}.
+              </Alert>
+            )}
+
+            {isOwner && (
+              <Button
+                color="error"
+                variant="borderless"
+                className="mx-auto w-full max-w-[280px]"
+                onClick={() => setShowDeletingModal(true)}
+              >
+                Delete Project
+              </Button>
+            )}
+          </div>
+        </Box>
+
         <StagingMetadata>
           <ApplicationInfo />
         </StagingMetadata>

dashboard/src/components/applications/ChangePlanModal.tsx

@@ -32,12 +32,12 @@ function Plan({
   return (
     <button
       type="button"
-      className="my-4 grid w-full grid-flow-col items-center justify-between px-1"
+      className="my-4 grid w-full grid-flow-col items-center justify-between gap-2 px-1"
       onClick={setPlan}
       tabIndex={-1}
     >
       <div className="grid grid-flow-row gap-y-0.5">
-        <div className="flex flex-row items-center">
+        <div className="grid grid-flow-col items-center justify-start gap-2">
           <Checkbox
             onChange={setPlan}
             checked={selectedPlanId === planId}
@@ -47,12 +47,13 @@ function Plan({
           <Text
             variant="h3"
             component="p"
-            className="ml-2 self-center font-medium"
+            className="self-center text-left font-medium"
           >
             {currentPlan.price > price ? 'Downgrade' : 'Upgrade'} to {planName}
           </Text>
         </div>
-        <Text variant="subtitle2" className="w-64 text-start">
+
+        <Text variant="subtitle2" className="w-full max-w-[256px] text-start">
           {planDescriptions[planName]}
         </Text>
       </div>
@@ -142,7 +143,7 @@ export function ChangePlanModalWithData({ app, plans, close }: any) {
   };
 
   return (
-    <Box className="w-welcome rounded-lg p-6 text-left">
+    <Box className="w-full max-w-xl rounded-lg p-6 text-left">
       <Modal
         showModal={paymentModal}
         close={closePaymentModal}

dashboard/src/components/applications/HasuraData.tsx

@@ -12,7 +12,7 @@ import generateAppServiceUrl, {
   defaultRemoteBackendSlugs,
 } from '@/utils/common/generateAppServiceUrl';
 import { copy } from '@/utils/copy';
-import { LOCAL_HASURA_URL } from '@/utils/env';
+import { getHasuraConsoleServiceUrl } from '@/utils/env';
 import Image from 'next/image';
 
 interface HasuraDataProps {
@@ -30,7 +30,7 @@ export function HasuraData({ close }: HasuraDataProps) {
 
   const hasuraUrl =
     process.env.NEXT_PUBLIC_ENV === 'dev' || !isPlatform
-      ? `${LOCAL_HASURA_URL}/console`
+      ? `${getHasuraConsoleServiceUrl()}`
       : generateAppServiceUrl(
           currentApplication?.subdomain,
           currentApplication?.region.awsName,

dashboard/src/components/applications/RemoveApplicationModal.tsx

@@ -6,7 +6,10 @@ import Divider from '@/ui/v2/Divider';
 import Text from '@/ui/v2/Text';
 import { discordAnnounce } from '@/utils/discordAnnounce';
 import { triggerToast } from '@/utils/toast';
-import { useDeleteApplicationMutation } from '@/utils/__generated__/graphql';
+import {
+  GetOneUserDocument,
+  useDeleteApplicationMutation,
+} from '@/utils/__generated__/graphql';
 import router from 'next/router';
 import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
@@ -42,7 +45,9 @@ export function RemoveApplicationModal({
   description,
   className,
 }: RemoveApplicationModalProps) {
-  const [deleteApplication, { client }] = useDeleteApplicationMutation();
+  const [deleteApplication] = useDeleteApplicationMutation({
+    refetchQueries: [GetOneUserDocument],
+  });
   const [loadingRemove, setLoadingRemove] = useState(false);
   const { currentApplication } = useCurrentWorkspaceAndApplication();
 
@@ -73,9 +78,6 @@ export function RemoveApplicationModal({
     }
     close();
     await router.push('/');
-    await client.refetchQueries({
-      include: ['getOneUser'],
-    });
     triggerToast(`${currentApplication.name} deleted`);
   }
 

dashboard/src/components/applications/RenderWorkspacesWithApps.tsx

@@ -111,9 +111,8 @@ export function RenderWorkspacesWithApps({
                             )}
 
                             <StateBadge
-                              status={checkStatusOfTheApplication(
+                              state={checkStatusOfTheApplication(app.appStates)}
-                                app.appStates,
+                              desiredState={app.desiredState}
-                              )}
                               title={getApplicationStatusString(
                                 checkStatusOfTheApplication(app.appStates),
                               )}

dashboard/src/components/applications/StagingMetadata.tsx

@@ -6,7 +6,7 @@ import type { PropsWithChildren } from 'react';
 export function StagingMetadata({ children }: PropsWithChildren<unknown>) {
   return (
     isDevOrStaging() && (
-      <div className="mt-10">
+      <div className="mx-auto mt-10 max-w-sm">
         <Box className="mx-auto flex flex-col rounded-md border p-5 text-center">
           <Status status={StatusEnum.Deploying}>Internal info</Status>
           {children}

dashboard/src/components/applications/UnlockFeatureByUpgrading.tsx

@@ -33,11 +33,10 @@ export function UnlockFeatureByUpgrading({
               title: 'Upgrade your plan.',
               payload: <ChangePlanModal />,
               props: {
-                PaperProps: { className: 'p-0' },
+                PaperProps: { className: 'p-0 max-w-xl w-full' },
                 hidePrimaryAction: true,
                 hideSecondaryAction: true,
                 hideTitle: true,
-                maxWidth: 'lg',
               },
             });
           }}

dashboard/src/components/applications/graphql/UserSelect.tsx

@@ -1,3 +1,4 @@
+import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import { useRemoteApplicationGQLClient } from '@/hooks/useRemoteApplicationGQLClient';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Option from '@/ui/v2/Option';
@@ -18,10 +19,12 @@ export interface UserSelectProps {
 }
 
 export function UserSelect({ onUserChange, ...props }: UserSelectProps) {
+  const { currentApplication } = useCurrentWorkspaceAndApplication();
   const userApplicationClient = useRemoteApplicationGQLClient();
   const { data, loading, error } = useRemoteAppGetUsersCustomQuery({
     client: userApplicationClient,
     variables: { where: {}, limit: 250, offset: 0 },
+    skip: !currentApplication,
   });
 
   if (loading) {
@@ -36,8 +39,6 @@ export function UserSelect({ onUserChange, ...props }: UserSelectProps) {
     throw error;
   }
 
-  const { users } = data;
-
   return (
     <Select
       {...props}
@@ -57,7 +58,7 @@ export function UserSelect({ onUserChange, ...props }: UserSelectProps) {
           return;
         }
 
-        const user: RemoteAppGetUsersCustomQuery['users'][0] = users.find(
+        const user: RemoteAppGetUsersCustomQuery['users'][0] = data?.users.find(
           ({ id }) => id === userId,
         );
 
@@ -68,7 +69,7 @@ export function UserSelect({ onUserChange, ...props }: UserSelectProps) {
     >
       <Option value="admin">Admin</Option>
 
-      {users.map(({ id, displayName, email, phoneNumber }) => (
+      {data?.users.map(({ id, displayName, email, phoneNumber }) => (
         <Option key={id} value={id}>
           {displayName || email || phoneNumber || id}
         </Option>

dashboard/src/components/billing-payment-method/BillingPaymentMethodForm.tsx

@@ -22,7 +22,9 @@ import {
 import { loadStripe } from '@stripe/stripe-js';
 import React, { useState } from 'react';
 
-const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PK!);
+const stripePromise = process.env.NEXT_PUBLIC_STRIPE_PK
+  ? loadStripe(process.env.NEXT_PUBLIC_STRIPE_PK)
+  : null;
 
 type AddPaymentMethodFormProps = {
   close: () => void;
@@ -74,7 +76,8 @@ function AddPaymentMethodForm({
 
       if (createPaymentMethodError) {
         throw new Error(
-          createPaymentMethodError.message || 'Unknown error occurred.',
+          createPaymentMethodError.message ||
+            'An unknown error occurred. Please try again.',
         );
       }
 
@@ -88,7 +91,10 @@ function AddPaymentMethodForm({
       );
 
       if (attachPaymentMethodError) {
-        throw Error((attachPaymentMethodError as any).response.data);
+        throw new Error(
+          (attachPaymentMethodError as any)?.response?.data ||
+            'An unknown error occurred. Please try again.',
+        );
       }
 
       // update workspace with new country code in database
@@ -149,7 +155,7 @@ function AddPaymentMethodForm({
   };
 
   return (
-    <Box className="w-modal2 px-6 pt-6 pb-6 text-left rounded-lg">
+    <Box className="w-modal2 rounded-lg px-6 pt-6 pb-6 text-left">
       <div className="flex flex-col">
         <form onSubmit={handleSubmit}>
           <Text className="text-center text-lg font-medium">
@@ -201,7 +207,7 @@ function AddPaymentMethodForm({
 
 type BillingPaymentMethodFormProps = {
   close: () => void;
-  onPaymentMethodAdded?: () => Promise<void>;
+  onPaymentMethodAdded?: (e?: any) => Promise<void>;
   workspaceId: string;
 };
 

dashboard/src/components/common/DataGridDateCell/DataGridDateCell.tsx

@@ -46,7 +46,7 @@ export default function DataGridDateCell<TData extends object>({
       : undefined;
 
   const { year, month, day, hour, minute, second } = getDateComponents(date, {
-    adjustTimezone: specificType === 'timetz' || specificType === 'timestamptz',
+    adjustTimezone: ['date', 'timetz', 'timestamptz'].includes(specificType),
   });
 
   const { inputRef, focusCell, isEditing, cancelEditCell } =

dashboard/src/components/deployments/DeploymentListItem/DeploymentListItem.tsx

@@ -59,12 +59,12 @@ export default function DeploymentListItem({
   return (
     <ListItem.Root>
       <ListItem.Button
-        className="grid grid-flow-col items-center justify-between gap-2 rounded-none px-2 py-2"
+        className="grid grid-flow-col items-center justify-between gap-2 rounded-none p-2"
         component={NavLink}
         href={`/${currentWorkspace.slug}/${currentApplication.slug}/deployments/${deployment.id}`}
         aria-label={commitMessage || 'No commit message'}
       >
-        <div className="flex cursor-pointer flex-row items-center justify-center space-x-2 self-center">
+        <div className="grid grid-flow-col items-center justify-center gap-2 self-center">
           <ListItem.Avatar>
             <Avatar
               name={deployment.commitUserName}
@@ -85,7 +85,7 @@ export default function DeploymentListItem({
           />
         </div>
 
-        <div className="grid grid-flow-col items-center gap-2">
+        <div className="grid grid-flow-col items-center justify-end gap-2">
           {showRedeploy && (
             <Tooltip
               title={
@@ -142,16 +142,16 @@ export default function DeploymentListItem({
           )}
 
           {isLive && (
-            <div className="flex w-12 justify-end">
+            <div className="hidden w-12 justify-end sm:flex">
               <Chip size="small" color="success" label="Live" />
             </div>
           )}
 
-          <div className="w-16 text-right font-mono text-sm- font-medium">
+          <div className="hidden w-16 text-right font-mono text-sm- font-medium sm:block">
             {deployment.commitSHA.substring(0, 7)}
           </div>
 
-          <div className="w-[80px] text-right font-mono text-sm- font-medium">
+          <div className="text-right font-mono text-sm- font-medium sm:w-20">
             <AppDeploymentDuration
               startedAt={deployment.deploymentStartedAt}
               endedAt={deployment.deploymentEndedAt}

dashboard/src/components/deployments/DeploymentStatusMessage/DeploymentStatusMessage.tsx

@@ -45,14 +45,14 @@ export default function DeploymentStatusMessage({
 
   if (!isDeployingToProduction && deployment?.deploymentEndedAt) {
     return (
-      <span className="flex flex-row">
+      <span className="grid grid-flow-col">
         <Avatar
           component="span"
           name={deployment.commitUserName}
           avatarUrl={deployment.commitUserAvatarUrl}
           className="mr-1 h-4 w-4 self-center"
         />
-        <Text component="span" className="self-center text-sm">
+        <Text component="span" className="self-center truncate text-sm">
           {deployment.commitUserName} deployed{' '}
           {formatDistance(new Date(deployment.deploymentEndedAt), new Date(), {
             addSuffix: true,

dashboard/src/components/files/FilesDataGrid/FilesDataGrid.tsx

@@ -12,6 +12,7 @@ import useBuckets from '@/hooks/useBuckets';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import useFiles from '@/hooks/useFiles';
 import useFilesAggregate from '@/hooks/useFilesAggregate';
+import { getHasuraAdminSecret } from '@/utils/env';
 import { showLoadingToast, triggerToast } from '@/utils/toast';
 import type { Files } from '@/utils/__generated__/graphql';
 import { Order_By as OrderBy } from '@/utils/__generated__/graphql';
@@ -261,7 +262,7 @@ export default function FilesDataGrid(props: FilesDataGridProps) {
       const { fileMetadata, error: fileError } = await appClient.storage
         .setAdminSecret(
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : currentApplication.config?.hasura.adminSecret,
         )
         .upload({

dashboard/src/components/files/FilesDataGridControls/FilesDataGridControls.tsx

@@ -12,6 +12,7 @@ import Button from '@/ui/v2/Button';
 import Chip from '@/ui/v2/Chip';
 import type { InputProps } from '@/ui/v2/Input';
 import Input from '@/ui/v2/Input';
+import { getHasuraAdminSecret } from '@/utils/env';
 import { triggerToast } from '@/utils/toast';
 import type { Files } from '@/utils/__generated__/graphql';
 import type { PropsWithoutRef } from 'react';
@@ -71,7 +72,7 @@ export default function FilesDataGridControls({
     try {
       const storageWithAdminSecret = appClient.storage.setAdminSecret(
         process.env.NEXT_PUBLIC_ENV === 'dev'
-          ? 'nhost-admin-secret'
+          ? getHasuraAdminSecret()
           : currentApplication.config?.hasura.adminSecret,
       );
 

dashboard/src/components/home/InviteAnnounce.tsx

@@ -99,7 +99,6 @@ export function InviteAnnounce() {
         workspaceMemberInviteId: inviteId,
         isAccepted: false,
       },
-      { useAxios: false },
     );
 
     if (ignoreError) {

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

@@ -76,7 +76,7 @@ function OverviewDeploymentList() {
 
   if (!deployments?.length) {
     return (
-      <Box className="grid grid-flow-row items-center justify-items-center gap-5 overflow-hidden rounded-lg border-1 py-12 px-48 shadow-sm">
+      <Box className="grid grid-flow-row items-center justify-items-center gap-5 overflow-hidden rounded-lg border-1 py-12 px-4 shadow-sm">
         <RocketIcon
           strokeWidth={1}
           className="h-10 w-10"
@@ -86,7 +86,7 @@ function OverviewDeploymentList() {
           <Text className="text-center font-medium" variant="h3">
             No Deployments
           </Text>
-          <Text variant="subtitle1" className="text-center">
+          <Text variant="subtitle1" className="max-w-md text-center">
             We&apos;ll deploy changes automatically when you push to the
             deployment branch in your connected GitHub repository
           </Text>
@@ -166,14 +166,14 @@ export default function OverviewDeployments() {
     <div className="flex flex-col">
       <OverviewDeploymentsTopBar />
 
-      <Box className="grid grid-flow-row items-center justify-items-center gap-5 rounded-lg border-1 py-12 px-48 shadow-sm">
+      <Box className="grid grid-flow-row items-center justify-items-center gap-5 rounded-lg border-1 py-12 px-4 shadow-sm">
         <RocketIcon strokeWidth={1} className="h-10 w-10" />
 
         <div className="grid grid-flow-row gap-1">
           <Text className="text-center font-medium" variant="h3">
             No Deployments
           </Text>
-          <Text variant="subtitle1" className="text-center">
+          <Text variant="subtitle1" className="max-w-sm text-center">
             Connect your project with a GitHub repository to create your first
             deployment
           </Text>

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

@@ -1,9 +1,9 @@
 import { ChangePlanModal } from '@/components/applications/ChangePlanModal';
-
 import { useDialog } from '@/components/common/DialogProvider';
 import { useUI } from '@/context/UIContext';
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
 import Chip from '@/ui/v2/Chip';
 import CogIcon from '@/ui/v2/icons/CogIcon';
@@ -43,9 +43,9 @@ export default function OverviewTopBar() {
   }
 
   return (
-    <div className="flex flex-row place-content-between items-center py-5">
+    <div className="grid items-center gap-4 pb-5 md:grid-flow-col md:place-content-between md:py-5">
-      <div className="flex flex-row items-center space-x-2">
+      <div className="grid items-center gap-2 md:grid-flow-col">
-        <div className="grid grid-flow-col items-center gap-2">
+        <div className="grid grid-flow-col items-center justify-start gap-2">
           <div className="h-10 w-10 overflow-hidden rounded-lg">
             <Image
               src="/logos/new.svg"
@@ -60,43 +60,44 @@ export default function OverviewTopBar() {
           </Text>
         </div>
 
-        {isPro ? (
+        <Box className="grid grid-flow-col items-center justify-start gap-2">
-          <Chip
+          {isPro ? (
-            className="self-center font-medium"
-            size="small"
-            label="Pro Plan"
-            color="primary"
-          />
-        ) : (
-          <>
             <Chip
               className="self-center font-medium"
               size="small"
-              label="Free Plan"
+              label="Pro Plan"
-              color="default"
+              color="primary"
-              variant="filled"
             />
-            <Button
+          ) : (
-              variant="borderless"
+            <>
-              className="mr-2"
+              <Chip
-              onClick={() => {
+                className="self-center font-medium"
-                openAlertDialog({
+                size="small"
-                  title: 'Upgrade your plan.',
+                label="Free Plan"
-                  payload: <ChangePlanModal />,
+                color="default"
-                  props: {
+                variant="filled"
-                    PaperProps: { className: 'p-0' },
+              />
-                    hidePrimaryAction: true,
+              <Button
-                    hideSecondaryAction: true,
+                variant="borderless"
-                    hideTitle: true,
+                className="mr-2"
-                    maxWidth: 'lg',
+                onClick={() => {
-                  },
+                  openAlertDialog({
-                });
+                    title: 'Upgrade your plan.',
-              }}
+                    payload: <ChangePlanModal />,
-            >
+                    props: {
-              Upgrade
+                      PaperProps: { className: 'p-0 max-w-xl w-full' },
-            </Button>
+                      hidePrimaryAction: true,
-          </>
+                      hideSecondaryAction: true,
-        )}
+                      hideTitle: true,
+                    },
+                  });
+                }}
+              >
+                Upgrade
+              </Button>
+            </>
+          )}
+        </Box>
       </div>
       <Link
         href={`/${currentWorkspace.slug}/${currentApplication.slug}/settings/general`}

dashboard/src/components/overview/OverviewUsage/OverviewUsage.tsx

@@ -79,6 +79,7 @@ export function OverviewUsageMetrics() {
   const isPlatform = useIsPlatform();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
   const remoteAppClient = useRemoteApplicationGQLClient();
+
   const [metrics, setMetrics] = useState({
     functions: 0,
     storage: 0,
@@ -98,6 +99,7 @@ export function OverviewUsageMetrics() {
 
   const { data: remoteAppMetricsData } = useGetRemoteAppMetricsQuery({
     client: remoteAppClient,
+    skip: !currentApplication,
   });
 
   useEffect(() => {

dashboard/src/components/settings/authentication/DisableNewUsersSettings/DisableNewUsersSettings.tsx

@@ -35,7 +35,7 @@ export default function DisableNewUsersSettings() {
   const form = useForm<DisableNewUsersFormValues>({
     reValidateMode: 'onSubmit',
     defaultValues: {
-      disabled: !!data?.config?.auth?.signUp?.enabled,
+      disabled: !data?.config?.auth?.signUp?.enabled,
     },
   });
 

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

@@ -20,7 +20,7 @@ import generateAppServiceUrl, {
   defaultLocalBackendSlugs,
   defaultRemoteBackendSlugs,
 } from '@/utils/common/generateAppServiceUrl';
-import { LOCAL_HASURA_URL } from '@/utils/env';
+import { getHasuraConsoleServiceUrl } from '@/utils/env';
 import { generateRemoteAppUrl } from '@/utils/helpers';
 import getJwtSecretsWithoutFalsyValues from '@/utils/settings/getJwtSecretsWithoutFalsyValues';
 import { useGetEnvironmentVariablesQuery } from '@/utils/__generated__/graphql';
@@ -109,7 +109,7 @@ export default function SystemEnvironmentVariableSettings() {
       key: 'NHOST_HASURA_URL',
       value:
         process.env.NEXT_PUBLIC_ENV === 'dev' || !isPlatform
-          ? `${LOCAL_HASURA_URL}/console`
+          ? `${getHasuraConsoleServiceUrl()}/console`
           : generateAppServiceUrl(
               currentApplication?.subdomain,
               currentApplication?.region.awsName,

dashboard/src/components/ui/StateBadge.tsx

@@ -5,7 +5,11 @@ export interface StateBadgeProps {
   /**
    * This is the current state of the application.
    */
-  status: ApplicationStatus;
+  state: ApplicationStatus;
+  /**
+   * This is the desired state of the application.
+   */
+  desiredState: ApplicationStatus;
   /**
    * The title to show on the application state badge.
    */
@@ -24,20 +28,28 @@ function getNormalizedTitle(title: string) {
   return title;
 }
 
-export default function StateBadge({ title, status }: StateBadgeProps) {
+export default function StateBadge({
+  title,
+  state,
+  desiredState,
+}: StateBadgeProps) {
+  if (
+    desiredState === ApplicationStatus.Paused &&
+    state === ApplicationStatus.Live
+  ) {
+    return <Chip size="small" color="default" label="Pausing" />;
+  }
+
   const normalizedTitle = getNormalizedTitle(title);
 
   if (
-    status === ApplicationStatus.Empty ||
+    state === ApplicationStatus.Empty ||
-    status === ApplicationStatus.Unpausing
+    state === ApplicationStatus.Unpausing
   ) {
     return <Chip size="small" label={normalizedTitle} color="warning" />;
   }
 
-  if (
+  if (state === ApplicationStatus.Errored || state === ApplicationStatus.Live) {
-    status === ApplicationStatus.Errored ||
-    status === ApplicationStatus.Live
-  ) {
     return <Chip size="small" label={normalizedTitle} color="success" />;
   }
 

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

@@ -6,7 +6,7 @@ import SvgIcon from '@/ui/v2/icons/SvgIcon';
 import { styled } from '@mui/material';
 import type { RadioProps as MaterialRadioProps } from '@mui/material/Radio';
 import MaterialRadio from '@mui/material/Radio';
-import type { ForwardedRef, PropsWithoutRef } from 'react';
+import type { ForwardedRef, PropsWithoutRef, ReactNode } from 'react';
 import { forwardRef } from 'react';
 
 export interface RadioProps extends MaterialRadioProps {
@@ -17,7 +17,7 @@ export interface RadioProps extends MaterialRadioProps {
   /**
    * Label to be displayed next to the radio button.
    */
-  label?: string;
+  label?: ReactNode;
   /**
    * Props to be passed to individual component slots.
    */

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

@@ -1,7 +1,9 @@
 import { styled } from '@mui/material';
 import Box from '@mui/material/Box';
 import type { TooltipProps as MaterialTooltipProps } from '@mui/material/Tooltip';
-import MaterialTooltip, { tooltipClasses } from '@mui/material/Tooltip';
+import MaterialTooltip, {
+  tooltipClasses as materialTooltipClasses,
+} from '@mui/material/Tooltip';
 import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
 
@@ -21,7 +23,7 @@ export interface TooltipProps extends MaterialTooltipProps {
 }
 
 const StyledTooltip = styled(Box)(({ theme }) => ({
-  [`&.${tooltipClasses.tooltip}`]: {
+  [`&.${materialTooltipClasses.tooltip}`]: {
     fontSize: '0.9375rem',
     lineHeight: '1.375rem',
     backgroundColor:
@@ -36,9 +38,23 @@ const StyledTooltip = styled(Box)(({ theme }) => ({
       '0px 1px 4px rgba(14, 24, 39, 0.1), 0px 8px 24px rgba(14, 24, 39, 0.1)',
     maxWidth: '17.5rem',
   },
-  [`&.${tooltipClasses.tooltipPlacementBottom}`]: {
+  [`& .${materialTooltipClasses.arrow}`]: {
+    color:
+      theme.palette.mode === 'dark'
+        ? theme.palette.grey[300]
+        : theme.palette.grey[700],
+  },
+  [`&.${materialTooltipClasses.tooltipPlacementBottom}`]: {
     marginTop: `${theme.spacing(0.75)} !important`,
   },
+  [`&.${materialTooltipClasses.tooltipPlacementBottom} .${materialTooltipClasses.arrow}`]:
+    {
+      marginTop: `${theme.spacing(-0.5)} !important`,
+      color:
+        theme.palette.mode === 'dark'
+          ? theme.palette.grey[300]
+          : theme.palette.grey[700],
+    },
 }));
 
 function Tooltip(
@@ -69,6 +85,8 @@ function Tooltip(
   );
 }
 
+export { materialTooltipClasses as tooltipClasses };
+
 Tooltip.displayName = 'NhostTooltip';
 
 export default forwardRef(Tooltip);

dashboard/src/components/ui/v2/createTheme/createTheme.ts

@@ -21,14 +21,17 @@ export default function createTheme(mode: PaletteMode) {
       },
       h2: {
         fontSize: '1.625rem',
+        lineHeight: '2.375rem',
         fontWeight: 500,
       },
       h3: {
         fontSize: '1.125rem',
+        lineHeight: '1.5rem',
         fontWeight: 500,
       },
       h4: {
         fontSize: '1rem',
+        lineHeight: '1.375rem',
         fontWeight: 500,
       },
       subtitle1: {

dashboard/src/components/workspace/WorkspaceInvoices.tsx

@@ -12,8 +12,8 @@ export function WorkspaceInvoices() {
 
   return (
     <div className="mt-18">
-      <div className="mx-auto max-w-3xl font-display grid grid-flow-row gap-2 justify-start">
+      <div className="mx-auto grid max-w-3xl grid-flow-row justify-start gap-2 font-display">
-        <Text className="font-medium text-lg">Invoices</Text>
+        <Text className="text-lg font-medium">Invoices</Text>
 
         <Button
           variant="outlined"
@@ -23,7 +23,6 @@ export function WorkspaceInvoices() {
             const { res, error } = await nhost.functions.call(
               '/stripe-create-portal',
               { workspaceId: currentWorkspace.id },
-              { useAxios: false },
             );
 
             if (error) {

dashboard/src/gql/app/getAppRolesAndPermissions.graphql

@@ -1,14 +0,0 @@
-fragment GetAppRoles on apps {
-  id
-  slug
-  subdomain
-  name
-  authUserDefaultAllowedRoles
-  authUserDefaultRole
-}
-
-query getAppRolesAndPermissions($id: uuid!) {
-  app(id: $id) {
-    ...GetAppRoles
-  }
-}

dashboard/src/gql/app/pauseApplication.graphql

@@ -0,0 +1,5 @@
+mutation PauseApplication($appId: uuid!) {
+  updateApp(pk_columns: { id: $appId }, _set: { desiredState: 6 }) {
+    id
+  }
+}

dashboard/src/gql/app/unpauseApplication.graphql

@@ -0,0 +1,5 @@
+mutation UnpauseApplication($appId: uuid!) {
+  updateApp(pk_columns: { id: $appId }, _set: { desiredState: 5 }) {
+    id
+  }
+}

dashboard/src/gql/remote-app/getFunctionLogs.graphql

@@ -1,15 +0,0 @@
-query getFunctionsLogs($subdomain: String!) {
-  getFunctionLogs(subdomain: $subdomain) {
-    functionPath
-    createdAt
-    message
-  }
-}
-
-query getFunctionLog($subdomain: String!, $functionPaths: [String!]) {
-  getFunctionLogs(subdomain: $subdomain, functionPaths: $functionPaths) {
-    functionPath
-    createdAt
-    message
-  }
-}

dashboard/src/gql/remote-app/getGravatarSettings.graphql

@@ -1,7 +0,0 @@
-query getGravatarSettings($id: uuid!) {
-  app(id: $id) {
-    authGravatarEnabled
-    authGravatarDefault
-    authGravatarRating
-  }
-}

dashboard/src/gql/remote-app/restoreDatabaseBackup.graphql

@@ -1,7 +0,0 @@
-mutation restoreDatabaseBackup($appId: uuid!, $backupId: uuid!) {
-  restoreDatabaseBackup(appId: $appId, backupId: $backupId)
-}
-
-mutation scheduleRestoreDatabaseBackup($appId: uuid!, $backupId: uuid!) {
-  scheduleRestoreDatabaseBackup(appId: $appId, backupId: $backupId)
-}

dashboard/src/gql/user/getFreeAndActiveProjects.graphql

@@ -0,0 +1,11 @@
+query GetFreeAndActiveProjects($userId: uuid!) {
+  freeAndActiveProjects: apps(
+    where: {
+      creatorUserId: { _eq: $userId }
+      plan: { isFree: { _eq: true } }
+      desiredState: { _eq: 5 }
+    }
+  ) {
+    id
+  }
+}

dashboard/src/hooks/common/useIsHealthy/useIsHealthy.ts

@@ -1,5 +1,6 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
-import { useNhostClient } from '@nhost/nextjs';
+import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import { useQuery } from '@tanstack/react-query';
 
 /**
@@ -7,12 +8,19 @@ import { useQuery } from '@tanstack/react-query';
  */
 export default function useIsHealthy() {
   const isPlatform = useIsPlatform();
-  const client = useNhostClient();
+  const { currentApplication } = useCurrentWorkspaceAndApplication();
+
+  const appUrl = generateAppServiceUrl(
+    currentApplication?.subdomain,
+    currentApplication?.region?.awsName,
+    'auth',
+  );
+
   const { failureCount, status } = useQuery(
     ['/healthz'],
-    () => fetch(`${client.auth.url}/healthz`),
+    () => fetch(`${appUrl}/healthz`),
     {
-      enabled: !isPlatform,
+      enabled: !isPlatform && !!currentApplication,
       retry: true,
       retryDelay: 5000,
       cacheTime: 0,

dashboard/src/hooks/common/useIsPlatform/useIsPlatform.ts

@@ -1,6 +1,8 @@
+import { isPlatform } from '@/utils/env';
+
 /**
  * Returns `true` if all features of the dashboard should be enabled.
  */
 export default function useIsPlatform() {
-  return process.env.NEXT_PUBLIC_NHOST_PLATFORM === 'true';
+  return isPlatform();
 }

dashboard/src/hooks/dataBrowser/useCreateColumnMutation/createColumnMigration.ts

@@ -7,7 +7,7 @@ import type {
 } from '@/types/dataBrowser';
 import { getPreparedHasuraQuery } from '@/utils/dataBrowser/hasuraQueryHelpers';
 import normalizeQueryError from '@/utils/dataBrowser/normalizeQueryError';
-import { LOCAL_MIGRATIONS_URL } from '@/utils/env';
+import { getHasuraMigrationsApiUrl } from '@/utils/env';
 import prepareCreateColumnQuery from './prepareCreateColumnQuery';
 
 export interface CreateColumnMigrationVariables {
@@ -34,7 +34,7 @@ export default async function createColumnMigration({
     column,
   });
 
-  const response = await fetch(`${LOCAL_MIGRATIONS_URL}/apis/migrate`, {
+  const response = await fetch(`${getHasuraMigrationsApiUrl()}/apis/migrate`, {
     method: 'POST',
     headers: {
       'x-hasura-admin-secret': adminSecret,

dashboard/src/hooks/dataBrowser/useCreateColumnMutation/useCreateColumnMutation.ts

@@ -1,6 +1,7 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -52,7 +53,7 @@ export default function useCreateColumnMutation({
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useCreateRecordMutation/useCreateRecordMutation.ts

@@ -1,5 +1,6 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -53,7 +54,7 @@ export default function useCreateRecordMutation<TData extends object = {}>({
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useCreateTableMutation/createTableMigration.ts

@@ -7,7 +7,7 @@ import type {
 } from '@/types/dataBrowser';
 import { getPreparedHasuraQuery } from '@/utils/dataBrowser/hasuraQueryHelpers';
 import normalizeQueryError from '@/utils/dataBrowser/normalizeQueryError';
-import { LOCAL_MIGRATIONS_URL } from '@/utils/env';
+import { getHasuraMigrationsApiUrl } from '@/utils/env';
 import prepareCreateTableQuery from './prepareCreateTableQuery';
 
 export interface CreateTableMigrationVariables {
@@ -28,7 +28,7 @@ export default async function createTableMigration({
 }: CreateTableMigrationOptions & CreateTableMigrationVariables) {
   const args = prepareCreateTableQuery({ dataSource, schema, table });
 
-  const response = await fetch(`${LOCAL_MIGRATIONS_URL}/apis/migrate`, {
+  const response = await fetch(`${getHasuraMigrationsApiUrl()}/apis/migrate`, {
     method: 'POST',
     headers: {
       'x-hasura-admin-secret': adminSecret,

dashboard/src/hooks/dataBrowser/useCreateTableMutation/useCreateTableMutation.ts

@@ -1,6 +1,7 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -50,7 +51,7 @@ export default function useCreateTableMutation({
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useDatabaseQuery/useDatabaseQuery.ts

@@ -1,5 +1,6 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -51,7 +52,7 @@ export default function useDatabaseQuery(
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useDeleteColumnMutation/deleteColumnMigration.ts

@@ -8,7 +8,7 @@ import type {
 } from '@/types/dataBrowser';
 import { getPreparedHasuraQuery } from '@/utils/dataBrowser/hasuraQueryHelpers';
 import normalizeQueryError from '@/utils/dataBrowser/normalizeQueryError';
-import { LOCAL_MIGRATIONS_URL } from '@/utils/env';
+import { getHasuraMigrationsApiUrl } from '@/utils/env';
 
 export interface DeleteColumnMigrationVariables {
   /**
@@ -46,7 +46,7 @@ export default async function deleteColumnMigration({
     },
   });
 
-  const response = await fetch(`${LOCAL_MIGRATIONS_URL}/apis/migrate`, {
+  const response = await fetch(`${getHasuraMigrationsApiUrl()}/apis/migrate`, {
     method: 'POST',
     headers: {
       'x-hasura-admin-secret': adminSecret,

dashboard/src/hooks/dataBrowser/useDeleteColumnMutation/useDeleteColumnMutation.ts

@@ -1,6 +1,7 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -53,7 +54,7 @@ export default function useDeleteColumnMutation({
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useDeleteRecordMutation/useDeleteRecordMutation.ts

@@ -1,5 +1,6 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -49,7 +50,7 @@ export default function useDeleteRecordMutation({
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useDeleteTableMutation/deleteTableMigration.ts

@@ -9,7 +9,7 @@ import {
   getPreparedHasuraQuery,
 } from '@/utils/dataBrowser/hasuraQueryHelpers';
 import normalizeQueryError from '@/utils/dataBrowser/normalizeQueryError';
-import { LOCAL_MIGRATIONS_URL } from '@/utils/env';
+import { getHasuraMigrationsApiUrl } from '@/utils/env';
 
 export interface DeleteTableMigrationVariables {
   /**
@@ -40,7 +40,7 @@ export default async function deleteTable({
     ),
   ];
 
-  const response = await fetch(`${LOCAL_MIGRATIONS_URL}/apis/migrate`, {
+  const response = await fetch(`${getHasuraMigrationsApiUrl()}/apis/migrate`, {
     method: 'POST',
     headers: {
       'x-hasura-admin-secret': adminSecret,

dashboard/src/hooks/dataBrowser/useDeleteTableMutation/useDeleteTableMutation.ts

@@ -1,6 +1,7 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -48,7 +49,7 @@ export default function useDeleteTableMutation({
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useManagePermissionMutation/managePermissionMigration.ts

@@ -7,7 +7,7 @@ import type {
   QueryResult,
 } from '@/types/dataBrowser';
 import normalizeQueryError from '@/utils/dataBrowser/normalizeQueryError';
-import { LOCAL_MIGRATIONS_URL } from '@/utils/env';
+import { getHasuraMigrationsApiUrl } from '@/utils/env';
 
 export interface ManagePermissionMigrationVariables {
   /**
@@ -113,7 +113,7 @@ export default async function managePermissionMigration({
     };
   }
 
-  const response = await fetch(`${LOCAL_MIGRATIONS_URL}/apis/migrate`, {
+  const response = await fetch(`${getHasuraMigrationsApiUrl()}/apis/migrate`, {
     method: 'POST',
     headers: {
       'x-hasura-admin-secret': adminSecret,

dashboard/src/hooks/dataBrowser/useManagePermissionMutation/useManagePermissionMutation.ts

@@ -1,6 +1,7 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -56,7 +57,7 @@ export default function useManagePermissionMutation({
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useMetadataQuery/useMetadataQuery.ts

@@ -1,5 +1,6 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -53,7 +54,7 @@ export default function useMetadataQuery(
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useTableQuery/useTableQuery.ts

@@ -1,5 +1,6 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -53,7 +54,7 @@ export default function useTableQuery(
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useTrackForeignKeyRelationsMutation/trackForeignKeyRelationsMigration.ts

@@ -6,7 +6,7 @@ import type {
   QueryResult,
 } from '@/types/dataBrowser';
 import normalizeQueryError from '@/utils/dataBrowser/normalizeQueryError';
-import { LOCAL_MIGRATIONS_URL } from '@/utils/env';
+import { getHasuraMigrationsApiUrl } from '@/utils/env';
 import prepareTrackForeignKeyRelationsMetadata from './prepareTrackForeignKeyRelationsMetadata';
 
 export interface TrackForeignKeyRelationsMigrationVariables {
@@ -46,7 +46,7 @@ export default async function trackForeignKeyRelationsMigration({
     foreignKeyRelations,
   });
 
-  const response = await fetch(`${LOCAL_MIGRATIONS_URL}/apis/migrate`, {
+  const response = await fetch(`${getHasuraMigrationsApiUrl()}/apis/migrate`, {
     method: 'POST',
     headers: {
       'x-hasura-admin-secret': adminSecret,

dashboard/src/hooks/dataBrowser/useTrackForeignKeyRelationsMutation/useTrackForeignKeyRelationsMutation.ts

@@ -1,6 +1,7 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -50,7 +51,7 @@ export default function useTrackForeignKeyRelationMutation({
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useTrackTableMutation/trackTableMigration.ts

@@ -6,7 +6,7 @@ import type {
   QueryResult,
 } from '@/types/dataBrowser';
 import normalizeQueryError from '@/utils/dataBrowser/normalizeQueryError';
-import { LOCAL_MIGRATIONS_URL } from '@/utils/env';
+import { getHasuraMigrationsApiUrl } from '@/utils/env';
 
 export interface TrackTableMigrationVariables {
   /**
@@ -24,7 +24,7 @@ export default async function trackTableMigration({
   adminSecret,
   table,
 }: TrackTableMigrationOptions & TrackTableMigrationVariables) {
-  const response = await fetch(`${LOCAL_MIGRATIONS_URL}/apis/migrate`, {
+  const response = await fetch(`${getHasuraMigrationsApiUrl()}/apis/migrate`, {
     method: 'POST',
     headers: {
       'x-hasura-admin-secret': adminSecret,

dashboard/src/hooks/dataBrowser/useTrackTableMutation/useTrackTableMutation.ts

@@ -1,6 +1,7 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -48,7 +49,7 @@ export default function useTrackTableMutation({
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useUpdateColumnMutation/updateColumnMigration.ts

@@ -7,7 +7,7 @@ import type {
 } from '@/types/dataBrowser';
 import { getEmptyDownMigrationMessage } from '@/utils/dataBrowser/hasuraQueryHelpers';
 import normalizeQueryError from '@/utils/dataBrowser/normalizeQueryError';
-import { LOCAL_MIGRATIONS_URL } from '@/utils/env';
+import { getHasuraMigrationsApiUrl } from '@/utils/env';
 import prepareUpdateColumnQuery from './prepareUpdateColumnQuery';
 
 export interface UpdateColumnMigrationVariables {
@@ -66,7 +66,7 @@ export default async function updateColumnMigration({
     ];
   }
 
-  const response = await fetch(`${LOCAL_MIGRATIONS_URL}/apis/migrate`, {
+  const response = await fetch(`${getHasuraMigrationsApiUrl()}/apis/migrate`, {
     method: 'POST',
     headers: {
       'x-hasura-admin-secret': adminSecret,

dashboard/src/hooks/dataBrowser/useUpdateColumnMutation/useUpdateColumnMutation.ts

@@ -1,6 +1,7 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -53,7 +54,7 @@ export default function useUpdateColumnMutation({
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useUpdateRecordMutation/useUpdateRecordMutation.ts

@@ -1,5 +1,6 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -53,7 +54,7 @@ export default function useUpdateRecordMutation<TData extends object = {}>({
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/dataBrowser/useUpdateTableMutation/updateTableMigration.ts

@@ -10,7 +10,7 @@ import type {
 } from '@/types/dataBrowser';
 import { getEmptyDownMigrationMessage } from '@/utils/dataBrowser/hasuraQueryHelpers';
 import normalizeQueryError from '@/utils/dataBrowser/normalizeQueryError';
-import { LOCAL_MIGRATIONS_URL } from '@/utils/env';
+import { getHasuraMigrationsApiUrl } from '@/utils/env';
 import prepareUpdateTableQuery from './prepareUpdateTableQuery';
 
 export interface UpdateTableMigrationVariables {
@@ -57,7 +57,7 @@ export default async function updateTableMigration({
     return;
   }
 
-  const response = await fetch(`${LOCAL_MIGRATIONS_URL}/apis/migrate`, {
+  const response = await fetch(`${getHasuraMigrationsApiUrl()}/apis/migrate`, {
     method: 'POST',
     headers: {
       'x-hasura-admin-secret': adminSecret,

dashboard/src/hooks/dataBrowser/useUpdateTableMutation/useUpdateTableMutation.ts

@@ -1,6 +1,7 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -49,7 +50,7 @@ export default function useUpdateTableMutation({
         appUrl: customAppUrl || appUrl,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : customAdminSecret ||
               currentApplication?.config?.hasura.adminSecret,
         dataSource: customDataSource || (dataSourceSlug as string),

dashboard/src/hooks/overview/useDatabaseSizeOfApplication/fetchProjectDatabaseSize.ts

@@ -1,6 +1,7 @@
 import type { QueryError, QueryResult } from '@/types/dataBrowser';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import normalizeQueryError from '@/utils/dataBrowser/normalizeQueryError';
+import { isPlatform } from '@/utils/env';
 
 export interface FetchProjectDatabaseSizeOptions {
   /**
@@ -32,6 +33,7 @@ export default async function fetchProjectDatabaseSize({
   region,
   adminSecret,
 }: FetchProjectDatabaseSizeOptions): Promise<FetchProjectDatabaseSizeReturnType> {
+  const IS_PLATFORM = isPlatform();
   const response = await fetch(
     `${generateAppServiceUrl(subdomain, region, 'hasura')}/v2/query`,
     {
@@ -43,7 +45,7 @@ export default async function fetchProjectDatabaseSize({
         type: 'run_sql',
         args: {
           sql: `SELECT pg_database_size('${
-            subdomain === 'localhost' ? 'postgres' : subdomain
+            !IS_PLATFORM ? 'postgres' : subdomain
           }');`,
         },
       }),

dashboard/src/hooks/overview/useDatabaseSizeOfApplication/useDatabaseSizeOfApplication.ts

@@ -1,4 +1,5 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import type { FetchProjectDatabaseSizeReturnType } from './fetchProjectDatabaseSize';
@@ -21,14 +22,11 @@ export default function useDatabaseSizeOfApplication(
     queryKey,
     () =>
       fetchProjectDatabaseSize({
-        subdomain:
+        subdomain: currentApplication?.subdomain,
-          process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'localhost'
-            : currentApplication?.subdomain,
         region: currentApplication?.region?.awsName,
         adminSecret:
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : currentApplication?.config?.hasura.adminSecret,
       }),
     {

dashboard/src/hooks/useAppClient.ts

@@ -1,7 +1,13 @@
-import { LOCAL_SUBDOMAIN } from '@/utils/env';
+import {
+  getAuthServiceUrl,
+  getFunctionsServiceUrl,
+  getGraphqlServiceUrl,
+  getStorageServiceUrl,
+} from '@/utils/env';
 import { isDevOrStaging } from '@/utils/helpers';
 import type { NhostNextClientConstructorParams } from '@nhost/nextjs';
 import { NhostClient } from '@nhost/nextjs';
+import useIsPlatform from './common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from './useCurrentWorkspaceAndApplication';
 
 export type UseAppClientOptions = NhostNextClientConstructorParams;
@@ -17,11 +23,22 @@ export type UseAppClientReturn = NhostClient;
 export function useAppClient(
   options?: UseAppClientOptions,
 ): UseAppClientReturn {
+  const isPlatform = useIsPlatform();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
 
+  if (!isPlatform) {
+    return new NhostClient({
+      authUrl: getAuthServiceUrl(),
+      graphqlUrl: getGraphqlServiceUrl(),
+      storageUrl: getStorageServiceUrl(),
+      functionsUrl: getFunctionsServiceUrl(),
+      ...options,
+    });
+  }
+
   if (process.env.NEXT_PUBLIC_ENV === 'dev' || !currentApplication) {
     return new NhostClient({
-      subdomain: LOCAL_SUBDOMAIN,
+      subdomain: 'local',
       ...options,
     });
   }

dashboard/src/hooks/useCheckProvisioning.tsx

@@ -1,4 +1,7 @@
-import { useGetApplicationStateQuery } from '@/generated/graphql';
+import {
+  GetOneUserDocument,
+  useGetApplicationStateQuery,
+} from '@/generated/graphql';
 import { ApplicationStatus } from '@/types/application';
 import { discordAnnounce } from '@/utils/discordAnnounce';
 import { useCallback, useEffect, useState } from 'react';
@@ -30,7 +33,7 @@ export function useCheckProvisioning() {
 
   async function updateOwnCache() {
     await client.refetchQueries({
-      include: ['getOneUser'],
+      include: [GetOneUserDocument],
     });
   }
 

dashboard/src/hooks/useCurrentWorkspaceAndApplication.tsx

@@ -2,6 +2,7 @@ import { useUserDataContext } from '@/context/workspace1-context';
 import type { Project } from '@/types/application';
 import { ApplicationStatus } from '@/types/application';
 import type { Workspace } from '@/types/workspace';
+import { getHasuraAdminSecret } from '@/utils/env';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import useIsPlatform from './common/useIsPlatform';
@@ -40,7 +41,7 @@ export function useCurrentWorkspaceAndApplication(): UseCurrentWorkspaceAndAppli
           },
         ],
         deployments: [],
-        subdomain: 'localhost',
+        subdomain: 'local',
         region: {
           id: null,
           countryCode: null,
@@ -57,7 +58,7 @@ export function useCurrentWorkspaceAndApplication(): UseCurrentWorkspaceAndAppli
         plan: null,
         config: {
           hasura: {
-            adminSecret: 'nhost-admin-secret',
+            adminSecret: getHasuraAdminSecret(),
           },
         },
       };

dashboard/src/hooks/useFiles.ts

@@ -1,4 +1,5 @@
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import type {
   Files_Order_By as FilesOrderBy,
   GetFilesQuery,
@@ -92,7 +93,7 @@ export default function useFiles({
                     headers: {
                       'x-hasura-admin-secret':
                         process.env.NEXT_PUBLIC_ENV === 'dev'
-                          ? 'nhost-admin-secret'
+                          ? getHasuraAdminSecret()
                           : currentApplication?.config?.hasura.adminSecret,
                     },
                     mode: 'cors',

dashboard/src/hooks/useNotFoundRedirect.tsx

@@ -11,7 +11,7 @@ export default function useNotFoundRedirect() {
   const router = useRouter();
   const {
     query: { workspaceSlug, appSlug, updating },
-  } = useRouter();
+  } = router;
 
   const notIn404Already = router.pathname !== '/404';
   const noResolvedWorkspace = workspaceSlug && currentWorkspace === undefined;

dashboard/src/hooks/useRemoteApplicationGQLClient.tsx

@@ -1,5 +1,6 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
 import { useMemo } from 'react';
 
@@ -10,30 +11,28 @@ import { useMemo } from 'react';
 export function useRemoteApplicationGQLClient() {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
 
-  const userApplicationClient = useMemo(
+  const userApplicationClient = useMemo(() => {
-    () =>
+    if (!currentApplication) {
-      new ApolloClient({
+      return new ApolloClient({ cache: new InMemoryCache() });
-        cache: new InMemoryCache(),
+    }
-        link: new HttpLink({
+
-          uri: generateAppServiceUrl(
+    return new ApolloClient({
-            currentApplication?.subdomain,
+      cache: new InMemoryCache(),
-            currentApplication?.region.awsName,
+      link: new HttpLink({
-            'graphql',
+        uri: generateAppServiceUrl(
-          ),
+          currentApplication?.subdomain,
-          headers: {
+          currentApplication?.region.awsName,
-            'x-hasura-admin-secret':
+          'graphql',
-              process.env.NEXT_PUBLIC_ENV === 'dev'
+        ),
-                ? 'nhost-admin-secret'
+        headers: {
-                : currentApplication?.config?.hasura.adminSecret,
+          'x-hasura-admin-secret':
-          },
+            process.env.NEXT_PUBLIC_ENV === 'dev'
-        }),
+              ? getHasuraAdminSecret()
+              : currentApplication?.config?.hasura.adminSecret,
+        },
       }),
-    [
+    });
-      currentApplication?.subdomain,
+  }, [currentApplication]);
-      currentApplication?.region,
-      currentApplication?.config?.hasura.adminSecret,
-    ],
-  );
 
   return userApplicationClient;
 }

dashboard/src/hooks/useSetAppWorkspaceContextFromUserContext.tsx

@@ -1,5 +1,6 @@
 import { useWorkspaceContext } from '@/context/workspace-context';
 import { useUserDataContext } from '@/context/workspace1-context';
+import { getHasuraAdminSecret } from '@/utils/env';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 import { useCurrentWorkspaceAndApplication } from './useCurrentWorkspaceAndApplication';
@@ -39,7 +40,7 @@ export const useSetAppWorkspaceContextFromUserContext = () => {
       appIsProvisioned: currentApplication.isProvisioned,
       appAdminSecret:
         process.env.NEXT_PUBLIC_ENV === 'dev'
-          ? 'nhost-admin-secret'
+          ? getHasuraAdminSecret()
           : currentApplication.config?.hasura.adminSecret,
       repository: currentApplication.githubRepository,
       provisioning:

dashboard/src/pages/[workspaceSlug]/[appSlug]/settings/general/index.tsx

@@ -6,8 +6,10 @@ import SettingsContainer from '@/components/settings/SettingsContainer';
 import SettingsLayout from '@/components/settings/SettingsLayout';
 import { useUI } from '@/context/UIContext';
 import {
+  GetOneUserDocument,
   useDeleteApplicationMutation,
-  useUpdateAppMutation,
+  usePauseApplicationMutation,
+  useUpdateApplicationMutation,
 } from '@/generated/graphql';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import Input from '@/ui/v2/Input';
@@ -15,7 +17,6 @@ import { discordAnnounce } from '@/utils/discordAnnounce';
 import { slugifyString } from '@/utils/helpers';
 import getServerError from '@/utils/settings/getServerError';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
-import { updateOwnCache } from '@/utils/updateOwnCache';
 import { useApolloClient } from '@apollo/client';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useRouter } from 'next/router';
@@ -37,11 +38,16 @@ export type ProjectNameValidationSchema = Yup.InferType<
 
 export default function SettingsGeneralPage() {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const { openDialog, closeDialog } = useDialog();
+  const { openDialog, openAlertDialog, closeDialog } = useDialog();
-  const [updateApp] = useUpdateAppMutation();
+  const [updateApp] = useUpdateApplicationMutation();
   const client = useApolloClient();
+  const [pauseApplication] = usePauseApplicationMutation({
+    variables: { appId: currentApplication?.id },
+    refetchQueries: [GetOneUserDocument],
+  });
   const [deleteApplication] = useDeleteApplicationMutation({
     variables: { appId: currentApplication?.id },
+    refetchQueries: [GetOneUserDocument],
   });
   const { currentWorkspace } = useCurrentWorkspaceAndApplication();
   const router = useRouter();
@@ -60,7 +66,7 @@ export default function SettingsGeneralPage() {
 
   const { register, formState } = form;
 
-  const handleProjectNameChange = async (data: ProjectNameValidationSchema) => {
+  async function handleProjectNameChange(data: ProjectNameValidationSchema) {
     // In this bit of code we spread the props of the current path (e.g. /workspace/...) and add one key-value pair: `updating: true`.
     // We want to indicate that the currently we're in the process of running a mutation state that will affect the routing behaviour of the website
     // i.e. redirecting to 404 if there's no workspace/project with that slug.
@@ -82,7 +88,7 @@ export default function SettingsGeneralPage() {
 
     const updateAppMutation = updateApp({
       variables: {
-        id: currentApplication.id,
+        appId: currentApplication.id,
         app: {
           name: data.name,
           slug: newProjectSlug,
@@ -107,35 +113,50 @@ export default function SettingsGeneralPage() {
     }
 
     try {
-      await client.refetchQueries({
-        include: ['getOneUser'],
-      });
       form.reset(undefined, { keepValues: true, keepDirty: false });
       await router.push(
         `/${currentWorkspace.slug}/${newProjectSlug}/settings/general`,
       );
+      await client.refetchQueries({ include: [GetOneUserDocument] });
     } catch (error) {
       await discordAnnounce(
-        error.message || 'Error while trying to update application cache',
+        error.message ||
+          'An error occurred while trying to update application cache.',
       );
     }
-  };
+  }
 
-  const handleDeleteApplication = async () => {
+  async function handleDeleteApplication() {
     await toast.promise(
       deleteApplication(),
       {
         loading: `Deleting ${currentApplication.name}...`,
-        success: `${currentApplication.name} deleted`,
+        success: `${currentApplication.name} has been deleted successfully.`,
         error: getServerError(
-          `Error while trying to ${currentApplication.name} project name`,
+          `An error occurred while trying to delete the project "${currentApplication.name}". Please try again.`,
         ),
       },
       getToastStyleProps(),
     );
+
     await router.push('/');
-    await updateOwnCache(client);
+  }
-  };
+
+  async function handlePauseApplication() {
+    await toast.promise(
+      pauseApplication(),
+      {
+        loading: `Pausing ${currentApplication.name}...`,
+        success: `${currentApplication.name} will be paused, but please note that it may take some time to complete the process.`,
+        error: getServerError(
+          `An error occurred while trying to pause the project "${currentApplication.name}". Please try again.`,
+        ),
+      },
+      getToastStyleProps(),
+    );
+
+    await router.push('/');
+  }
 
   return (
     <Container
@@ -171,6 +192,32 @@ export default function SettingsGeneralPage() {
         </Form>
       </FormProvider>
 
+      {currentApplication.plan.isFree && (
+        <SettingsContainer
+          title="Pause Project"
+          description="While your project is paused, it will not be accessible. You can wake it up anytime after."
+          submitButtonText="Pause"
+          slotProps={{
+            submitButton: {
+              type: 'button',
+              color: 'primary',
+              variant: 'contained',
+              disabled: maintenanceActive,
+              onClick: () => {
+                openAlertDialog({
+                  title: 'Pause Project?',
+                  payload:
+                    'Are you sure you want to pause this project? It will not be accessible until you unpause it.',
+                  props: {
+                    onPrimaryAction: handlePauseApplication,
+                  },
+                });
+              },
+            },
+          }}
+        />
+      )}
+
       <SettingsContainer
         title="Delete Project"
         description="The project will be permanently deleted, including its database, metadata, files, etc. This action is irreversible and can not be undone."

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

@@ -4,6 +4,7 @@ import FilesDataGrid from '@/components/files/FilesDataGrid';
 import ProjectLayout from '@/components/layout/ProjectLayout';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { getHasuraAdminSecret } from '@/utils/env';
 import { NhostApolloProvider } from '@nhost/react-apollo';
 import type { ReactElement } from 'react';
 
@@ -25,7 +26,7 @@ export default function StoragePage() {
       headers={{
         'x-hasura-admin-secret':
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
+            ? getHasuraAdminSecret()
             : currentApplication.config?.hasura.adminSecret,
       }}
     >

dashboard/src/pages/new.tsx

@@ -11,23 +11,25 @@ import { Modal } from '@/ui/Modal';
 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 IconButton from '@/ui/v2/IconButton';
 import CopyIcon from '@/ui/v2/icons/CopyIcon';
 import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
 import Option from '@/ui/v2/Option';
+import Radio from '@/ui/v2/Radio';
+import RadioGroup from '@/ui/v2/RadioGroup';
 import Select from '@/ui/v2/Select';
 import type { TextProps } from '@/ui/v2/Text';
 import Text from '@/ui/v2/Text';
+import Tooltip from '@/ui/v2/Tooltip';
+import { MAX_FREE_PROJECTS } from '@/utils/CONSTANTS';
 import { copy } from '@/utils/copy';
-import { discordAnnounce } from '@/utils/discordAnnounce';
 import { getErrorMessage } from '@/utils/getErrorMessage';
-import { getCurrentEnvironment, slugifyString } from '@/utils/helpers';
+import { getCurrentEnvironment } from '@/utils/helpers';
-import { nhost } from '@/utils/nhost';
 import { planDescriptions } from '@/utils/planDescriptions';
 import generateRandomDatabasePassword from '@/utils/settings/generateRandomDatabasePassword';
 import { resetDatabasePasswordValidationSchema } from '@/utils/settings/resetDatabasePasswordValidationSchema';
+import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import { triggerToast } from '@/utils/toast';
 import type {
   PrefetchNewAppPlansFragment,
@@ -35,19 +37,25 @@ import type {
   PrefetchNewAppWorkspaceFragment,
 } from '@/utils/__generated__/graphql';
 import {
+  useGetFreeAndActiveProjectsQuery,
   useInsertApplicationMutation,
   usePrefetchNewAppQuery,
 } from '@/utils/__generated__/graphql';
+import type { ApolloError } from '@apollo/client';
+import { useUserData } from '@nhost/nextjs';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import type { ReactElement } from 'react';
 import { cloneElement, isValidElement, useState } from 'react';
+import { toast } from 'react-hot-toast';
+import slugify from 'slugify';
 import { twMerge } from 'tailwind-merge';
 
 type NewAppPageProps = {
   regions: PrefetchNewAppRegionsFragment[];
   plans: PrefetchNewAppPlansFragment[];
   workspaces: PrefetchNewAppWorkspaceFragment[];
+  numberOfFreeAndLiveProjects: number;
   preSelectedWorkspace: PrefetchNewAppWorkspaceFragment;
   preSelectedRegion: PrefetchNewAppRegionsFragment;
 };
@@ -56,6 +64,7 @@ export function NewProjectPageContent({
   regions,
   plans,
   workspaces,
+  numberOfFreeAndLiveProjects,
   preSelectedWorkspace,
   preSelectedRegion,
 }: NewAppPageProps) {
@@ -86,15 +95,23 @@ export function NewProjectPageContent({
     generateRandomDatabasePassword(),
   );
 
-  const [plan, setPlan] = useState(plans[0]);
+  // find the first acceptable plan as default plan
+  const defaultSelectedPlan = plans.find((plan) => {
+    if (!plan.isFree) {
+      return true;
+    }
+    return numberOfFreeAndLiveProjects < MAX_FREE_PROJECTS;
+  });
+
+  const [plan, setPlan] = useState(defaultSelectedPlan);
 
   // state
   const { submitState, setSubmitState } = useSubmitState();
-  const [applicationError, setApplicationError] = useState<any>('');
   const [showPaymentModal, setShowPaymentModal] = useState(false);
 
   // graphql mutations
-  const [insertApp] = useInsertApplicationMutation();
+
+  const [insertApp] = useInsertApplicationMutation({});
   const { refetchUserData } = useLazyRefetchUserData();
 
   // options
@@ -119,8 +136,6 @@ export function NewProjectPageContent({
     (availableWorkspace) => availableWorkspace.id === selectedWorkspace.id,
   );
 
-  const user = nhost.auth.getUser();
-
   const isK8SPostgresEnabledInCurrentEnvironment = features[
     'k8s-postgres'
   ].enabled.find((e) => e === getCurrentEnvironment());
@@ -133,30 +148,24 @@ export function NewProjectPageContent({
     setDatabasePassword(newRandomDatabasePassword);
   };
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!plan.isFree && workspace.paymentMethods.length === 0) {
+      setShowPaymentModal(true);
+      return;
+    }
+
     setSubmitState({
       error: null,
       loading: true,
     });
 
     if (name.length < 1 || name.length > 32) {
-      setApplicationError(
-        `The project name must be between 1 and 32 characters`,
-      );
       setSubmitState({
-        error: null,
+        error: Error('The project name must be between 1 and 32 characters'),
         loading: false,
       });
-    }
-
-    const slug = slugifyString(name);
-
-    if (slug.length < 1 || slug.length > 32) {
-      setSubmitState({
-        error: Error('The project slug must be between 1 and 32 characters.'),
-        loading: false,
-      });
-
       return;
     }
 
@@ -173,14 +182,11 @@ export function NewProjectPageContent({
       }
     }
 
-    // NOTE: Maybe we'll reintroduce this way of creating the subdomain in the future
+    const slug = slugify(name, { lower: true, strict: true });
-    // https://www.rfc-editor.org/rfc/rfc1034#section-3.1
-    // subdomain max length is 63 characters
-    // const subdomain = `${slug}-${workspaceSlug}`.substring(0, 63);
 
     try {
-      if (isK8SPostgresEnabledInCurrentEnvironment) {
+      await toast.promise(
-        await insertApp({
+        insertApp({
           variables: {
             app: {
               name,
@@ -188,37 +194,40 @@ export function NewProjectPageContent({
               planId: plan.id,
               workspaceId: selectedWorkspace.id,
               regionId: selectedRegion.id,
-              postgresPassword: databasePassword,
+              postgresPassword: isK8SPostgresEnabledInCurrentEnvironment
+                ? databasePassword
+                : undefined,
             },
           },
-        });
+        }),
-      } else {
+        {
-        await insertApp({
+          loading: 'Creating the project...',
-          variables: {
+          success: 'The project has been created successfully.',
-            app: {
+          error: (arg: ApolloError) => {
-              name,
+            // we need to get the internal error message from the GraphQL error
-              slug,
+            const { internal } = arg.graphQLErrors[0]?.extensions || {};
-              planId: plan.id,
+            const { message } = (internal as Record<string, any>)?.error || {};
-              workspaceId: selectedWorkspace.id,
-              regionId: selectedRegion.id,
-            },
-          },
-        });
-      }
 
-      triggerToast(`New project ${name} created`);
+            // we use the default Apollo error message if we can't find the
-    } catch (error) {
+            // internal error message
-      discordAnnounce(
+            return (
-        `Error creating project: ${error.message}. (${user.email})`,
+              message ||
+              arg.message ||
+              'An error occurred while creating the project. Please try again.'
+            );
+          },
+        },
+        getToastStyleProps(),
       );
+
+      await refetchUserData();
+      await router.push(`/${selectedWorkspace.slug}/${slug}`);
+    } catch (error) {
       setSubmitState({
-        error: Error(getErrorMessage(error, 'application')),
+        error: null,
         loading: false,
       });
     }
-
-    await refetchUserData();
-    router.push(`/${selectedWorkspace.slug}/${slug}`);
   };
 
   if (!selectedWorkspace) {
@@ -243,384 +252,376 @@ export function NewProjectPageContent({
 
   return (
     <Container>
-      <div className="mx-auto grid max-w-[760px] grid-flow-row gap-4 py-6 sm:py-14">
+      <form onSubmit={handleSubmit}>
-        <Text variant="h2" component="h1">
+        <div className="mx-auto grid max-w-[760px] grid-flow-row gap-4 py-6 sm:py-14">
-          New Project
+          <Text variant="h2" component="h1">
-        </Text>
+            New Project
+          </Text>
 
-        <div className="grid grid-flow-row gap-4">
+          <div className="grid grid-flow-row gap-4">
-          <Input
-            id="name"
-            autoComplete="off"
-            label="Project Name"
-            variant="inline"
-            fullWidth
-            hideEmptyHelperText
-            placeholder="Project Name"
-            onChange={(event) => {
-              setSubmitState({
-                error: null,
-                loading: false,
-              });
-              setApplicationError('');
-              setName(event.target.value);
-            }}
-            value={name}
-            autoFocus
-          />
-
-          <Select
-            id="workspace"
-            label="Workspace"
-            variant="inline"
-            hideEmptyHelperText
-            placeholder="Select Workspace"
-            slotProps={{
-              root: { className: 'grid grid-flow-col gap-1' },
-            }}
-            onChange={(_event, value) => {
-              const workspaceInList = workspaces.find(({ id }) => id === value);
-              setPlan(plans[0]);
-              setSelectedWorkspace({
-                id: workspaceInList.id,
-                name: workspaceInList.name,
-                disabled: false,
-                slug: workspaceInList.slug,
-              });
-            }}
-            value={selectedWorkspace.id}
-            renderValue={(option) => (
-              <span className="inline-grid grid-flow-col items-center gap-2">
-                {option?.label}
-              </span>
-            )}
-          >
-            {workspaceOptions.map((option) => (
-              <Option
-                value={option.id}
-                key={option.id}
-                className="grid grid-flow-col items-center gap-2"
-              >
-                <span className="inline-block h-6 w-6 overflow-hidden rounded-md">
-                  <Image
-                    src="/logos/new.svg"
-                    alt="Nhost Logo"
-                    width={24}
-                    height={24}
-                  />
-                </span>
-
-                {option.name}
-              </Option>
-            ))}
-          </Select>
-
-          {isK8SPostgresEnabledInCurrentEnvironment && (
             <Input
-              name="databasePassword"
+              id="name"
-              id="databasePassword"
+              autoComplete="off"
-              autoComplete="new-password"
+              label="Project Name"
-              label="Database Password"
-              value={databasePassword}
               variant="inline"
-              type="password"
+              fullWidth
-              error={!!passwordError}
               hideEmptyHelperText
-              endAdornment={
+              placeholder="Project Name"
-                <InputAdornment position="end" className="mr-2">
+              onChange={(event) => {
-                  <IconButton
-                    color="secondary"
-                    onClick={() => {
-                      copy(databasePassword, 'Postgres password');
-                    }}
-                    variant="borderless"
-                    aria-label="Copy password"
-                  >
-                    <CopyIcon className="h-4 w-4" />
-                  </IconButton>
-                </InputAdornment>
-              }
-              slotProps={{
-                // Note: this is supposed to fix a `validateDOMNesting` error
-                helperText: { component: 'div' },
-              }}
-              helperText={
-                <div className="grid max-w-xs grid-flow-row gap-2">
-                  {passwordError && (
-                    <Text
-                      variant="subtitle2"
-                      sx={{
-                        color: (theme) =>
-                          `${theme.palette.error.main} !important`,
-                      }}
-                    >
-                      {passwordError}
-                    </Text>
-                  )}
-
-                  <Box className="font-medium">
-                    The root Postgres password for your database - it must be
-                    strong and hard to guess.{' '}
-                    <Button
-                      type="button"
-                      variant="borderless"
-                      color="secondary"
-                      onClick={handleGenerateRandomPassword}
-                      className="px-1 py-0.5 text-xs underline underline-offset-2 hover:underline"
-                      tabIndex={-1}
-                    >
-                      Generate a password
-                    </Button>
-                  </Box>
-                </div>
-              }
-              onChange={async (e) => {
-                e.preventDefault();
                 setSubmitState({
                   error: null,
                   loading: false,
                 });
-                if (e.target.value.length === 0) {
+                setName(event.target.value);
-                  setDatabasePassword(e.target.value);
-                  setPasswordError('Please enter a password');
-
-                  return;
-                }
-                setDatabasePassword(e.target.value);
-                setPasswordError('');
-                try {
-                  await resetDatabasePasswordValidationSchema.validate({
-                    databasePassword: e.target.value,
-                  });
-                  setPasswordError('');
-                } catch (validationError) {
-                  setPasswordError(validationError.message);
-                }
               }}
-              fullWidth
+              value={name}
+              autoFocus
             />
-          )}
 
-          <Select
+            <Select
-            id="region"
+              id="workspace"
-            label="Region"
+              label="Workspace"
-            variant="inline"
+              variant="inline"
-            hideEmptyHelperText
+              hideEmptyHelperText
-            placeholder="Select Region"
+              placeholder="Select Workspace"
-            slotProps={{
+              slotProps={{
-              root: { className: 'grid grid-flow-col gap-1' },
+                root: { className: 'grid grid-flow-col gap-1' },
-            }}
+              }}
-            onChange={(_event, value) => {
+              onChange={(_event, value) => {
-              const regionInList = regions.find(({ id }) => id === value);
+                const workspaceInList = workspaces.find(
-              setPlan(plans[0]);
+                  ({ id }) => id === value,
-              setSelectedRegion({
+                );
-                id: regionInList.id,
+                setPlan(plans[0]);
-                name: regionInList.country.name,
+                setSelectedWorkspace({
-                disabled: false,
+                  id: workspaceInList.id,
-                code: regionInList.country.code,
+                  name: workspaceInList.name,
-              });
+                  disabled: false,
-            }}
+                  slug: workspaceInList.slug,
-            value={selectedRegion.id}
+                });
-            renderValue={(option) => {
+              }}
-              const [flag, , country] = (option?.label as any[]) || [];
+              value={selectedWorkspace.id}
-
+              renderValue={(option) => (
-              return (
+                <span className="inline-grid grid-flow-col items-center gap-2">
-                <span className="inline-grid grid-flow-col grid-rows-none items-center gap-x-2">
+                  {option?.label}
-                  {flag}
-
-                  {isValidElement<TextProps>(country)
-                    ? cloneElement(country, {
-                        ...country.props,
-                        variant: 'body1',
-                      })
-                    : null}
-                </span>
-              );
-            }}
-          >
-            {regionOptions.map((option) => (
-              <Option
-                value={option.id}
-                key={option.id}
-                className={twMerge(
-                  'relative grid grid-flow-col grid-rows-2 items-center justify-start gap-x-3',
-                  option.disabled && 'pointer-events-none opacity-50',
-                )}
-                disabled={option.disabled}
-              >
-                <span className="row-span-2 flex">
-                  <Image
-                    src={`/assets/flags/${option.code}.svg`}
-                    alt={`${option.country} country flag`}
-                    width={16}
-                    height={12}
-                  />
                 </span>
+              )}
+            >
+              {workspaceOptions.map((option) => (
+                <Option
+                  value={option.id}
+                  key={option.id}
+                  className="grid grid-flow-col items-center gap-2"
+                >
+                  <span className="inline-block h-6 w-6 overflow-hidden rounded-md">
+                    <Image
+                      src="/logos/new.svg"
+                      alt="Nhost Logo"
+                      width={24}
+                      height={24}
+                    />
+                  </span>
 
-                <Text className="row-span-1 font-medium">{option.name}</Text>
+                  {option.name}
+                </Option>
+              ))}
+            </Select>
 
-                <Text variant="subtitle2" className="row-span-1">
+            {isK8SPostgresEnabledInCurrentEnvironment && (
-                  {option.country}
+              <Input
-                </Text>
+                name="databasePassword"
+                id="databasePassword"
+                autoComplete="new-password"
+                label="Database Password"
+                value={databasePassword}
+                variant="inline"
+                type="password"
+                error={!!passwordError}
+                hideEmptyHelperText
+                endAdornment={
+                  <InputAdornment position="end" className="mr-2">
+                    <IconButton
+                      color="secondary"
+                      onClick={() => {
+                        copy(databasePassword, 'Postgres password');
+                      }}
+                      variant="borderless"
+                      aria-label="Copy password"
+                    >
+                      <CopyIcon className="h-4 w-4" />
+                    </IconButton>
+                  </InputAdornment>
+                }
+                slotProps={{
+                  // Note: this is supposed to fix a `validateDOMNesting` error
+                  helperText: { component: 'div' },
+                }}
+                helperText={
+                  <div className="grid max-w-xs grid-flow-row gap-2">
+                    {passwordError && (
+                      <Text
+                        variant="subtitle2"
+                        sx={{
+                          color: (theme) =>
+                            `${theme.palette.error.main} !important`,
+                        }}
+                      >
+                        {passwordError}
+                      </Text>
+                    )}
 
-                {option.disabled && (
+                    <Box className="font-medium">
-                  <Text
+                      The root Postgres password for your database - it must be
-                    variant="subtitle2"
+                      strong and hard to guess.{' '}
-                    className="absolute top-1/2 right-4 -translate-y-1/2"
+                      <Button
-                  >
+                        type="button"
-                    Disabled
+                        variant="borderless"
-                  </Text>
+                        color="secondary"
-                )}
+                        onClick={handleGenerateRandomPassword}
-              </Option>
+                        className="px-1 py-0.5 text-xs underline underline-offset-2 hover:underline"
-            ))}
+                        tabIndex={-1}
-          </Select>
+                      >
+                        Generate a password
+                      </Button>
+                    </Box>
+                  </div>
+                }
+                onChange={async (e) => {
+                  e.preventDefault();
+                  setSubmitState({
+                    error: null,
+                    loading: false,
+                  });
+                  setDatabasePassword(e.target.value);
 
-          <div className="grid w-full grid-cols-8 gap-x-4 gap-y-2">
+                  try {
-            <div className="col-span-8 sm:col-span-2">
+                    await resetDatabasePasswordValidationSchema.validate({
-              <Text className="text-xs font-medium">Plan</Text>
+                      databasePassword: e.target.value,
-              <Text variant="subtitle2">You can change this later.</Text>
+                    });
-            </div>
+                    setPasswordError('');
+                  } catch (validationError) {
+                    setPasswordError(validationError.message);
+                  }
+                }}
+                fullWidth
+              />
+            )}
 
-            <div className="col-span-8 sm:col-span-6">
+            <Select
-              {plans.map((currentPlan) => {
+              id="region"
-                const checked = plan.id === currentPlan.id;
+              label="Region"
+              variant="inline"
+              hideEmptyHelperText
+              placeholder="Select Region"
+              slotProps={{
+                root: { className: 'grid grid-flow-col gap-1' },
+              }}
+              onChange={(_event, value) => {
+                const regionInList = regions.find(({ id }) => id === value);
+                setSelectedRegion({
+                  id: regionInList.id,
+                  name: regionInList.country.name,
+                  disabled: false,
+                  code: regionInList.country.code,
+                });
+              }}
+              value={selectedRegion.id}
+              renderValue={(option) => {
+                const [flag, , country] = (option?.label as any[]) || [];
 
                 return (
-                  <Box
+                  <span className="inline-grid grid-flow-col grid-rows-none items-center gap-x-2">
-                    className="border-t py-4 last-of-type:border-b"
+                    {flag}
-                    key={currentPlan.id}
-                  >
-                    <Checkbox
-                      label={
-                        <>
-                          <span className="inline-block max-w-xs">
-                            <span className="font-medium">
-                              {currentPlan.name}:
-                            </span>{' '}
-                            {planDescriptions[currentPlan.name]}
-                          </span>
 
-                          {currentPlan.isFree ? (
+                    {isValidElement<TextProps>(country)
-                            <Text variant="h3" component="span">
+                      ? cloneElement(country, {
-                              Free
+                          ...country.props,
-                            </Text>
+                          variant: 'body1',
-                          ) : (
+                        })
-                            <Text
+                      : null}
-                              variant="h3"
+                  </span>
-                              component="span"
-                              className="inline-grid grid-flow-col items-center gap-1"
-                            >
-                              $ {currentPlan.price}{' '}
-                              <Text variant="subtitle2" component="span">
-                                / mo
-                              </Text>
-                            </Text>
-                          )}
-                        </>
-                      }
-                      componentsProps={{
-                        formControlLabel: {
-                          className: 'flex',
-                          componentsProps: {
-                            typography: {
-                              className:
-                                'font-regular text-xs grid grid-flow-col justify-between items-center w-full',
-                            },
-                          },
-                        },
-                      }}
-                      checked={checked}
-                      key={currentPlan.id}
-                      onChange={(event, inputChecked) => {
-                        if (!inputChecked) {
-                          event.preventDefault();
-
-                          return;
-                        }
-
-                        setPlan(currentPlan);
-                      }}
-                    />
-                  </Box>
                 );
-              })}
-            </div>
-          </div>
-        </div>
-
-        {submitState.error && (
-          <Alert severity="error" className="text-left">
-            <Text className="font-medium">Warning</Text>{' '}
-            <Text className="font-medium">
-              {submitState.error &&
-                getErrorMessage(submitState.error, 'application')}{' '}
-              asdsda
-            </Text>
-          </Alert>
-        )}
-
-        <div className="flex justify-end">
-          {showPaymentModal && (
-            <Modal
-              showModal={showPaymentModal}
-              close={() => {
-                setShowPaymentModal(false);
               }}
             >
-              <BillingPaymentMethodForm
+              {regionOptions.map((option) => (
+                <Option
+                  value={option.id}
+                  key={option.id}
+                  className={twMerge(
+                    'relative grid grid-flow-col grid-rows-2 items-center justify-start gap-x-3',
+                    option.disabled && 'pointer-events-none opacity-50',
+                  )}
+                  disabled={option.disabled}
+                >
+                  <span className="row-span-2 flex">
+                    <Image
+                      src={`/assets/flags/${option.code}.svg`}
+                      alt={`${option.country} country flag`}
+                      width={16}
+                      height={12}
+                    />
+                  </span>
+
+                  <Text className="row-span-1 font-medium">{option.name}</Text>
+
+                  <Text variant="subtitle2" className="row-span-1">
+                    {option.country}
+                  </Text>
+
+                  {option.disabled && (
+                    <Text
+                      variant="subtitle2"
+                      className="absolute top-1/2 right-4 -translate-y-1/2"
+                    >
+                      Disabled
+                    </Text>
+                  )}
+                </Option>
+              ))}
+            </Select>
+
+            <div className="grid w-full grid-cols-8 gap-x-4 gap-y-2">
+              <div className="col-span-8 sm:col-span-2">
+                <Text className="text-xs font-medium">Plan</Text>
+                <Text variant="subtitle2">You can change this later.</Text>
+              </div>
+
+              <RadioGroup
+                value={plan.id}
+                onChange={(_event, value) => {
+                  setPlan(plans.find((p) => p.id === value));
+                }}
+                className="col-span-8 space-y-2 sm:col-span-6"
+              >
+                {plans.map((currentPlan) => {
+                  const disabledPlan =
+                    currentPlan.isFree &&
+                    numberOfFreeAndLiveProjects >= MAX_FREE_PROJECTS;
+
+                  return (
+                    <Tooltip
+                      visible={disabledPlan}
+                      title="Only one free project can be active at any given time. Please pause your active free project before creating a new one."
+                      key={currentPlan.id}
+                      slotProps={{
+                        tooltip: { className: '!max-w-xs w-full text-center' },
+                      }}
+                    >
+                      <Box className="w-full rounded-md border">
+                        <Radio
+                          slotProps={{
+                            formControl: {
+                              className: 'p-3 w-full',
+                              slotProps: {
+                                typography: { className: 'w-full' },
+                              },
+                            },
+                          }}
+                          value={currentPlan.id}
+                          disabled={disabledPlan}
+                          label={
+                            <div className="flex w-full items-center justify-between ">
+                              <div className="inline-block max-w-xs">
+                                <Text className="font-medium text-[inherit]">
+                                  {currentPlan.name}
+                                </Text>
+                                <Text className="text-xs text-[inherit]">
+                                  {planDescriptions[currentPlan.name]}
+                                </Text>
+                              </div>
+
+                              {currentPlan.isFree ? (
+                                <Text
+                                  variant="h3"
+                                  component="span"
+                                  className="text-[inherit]"
+                                >
+                                  Free
+                                </Text>
+                              ) : (
+                                <Text variant="h3" component="span">
+                                  ${currentPlan.price}/mo
+                                </Text>
+                              )}
+                            </div>
+                          }
+                        />
+                      </Box>
+                    </Tooltip>
+                  );
+                })}
+              </RadioGroup>
+            </div>
+          </div>
+
+          {submitState.error && (
+            <Alert severity="error" className="text-left">
+              <Text className="font-medium">Error</Text>{' '}
+              <Text className="font-medium">
+                {submitState.error &&
+                  getErrorMessage(submitState.error, 'application')}{' '}
+              </Text>
+            </Alert>
+          )}
+
+          <div className="flex justify-end">
+            {showPaymentModal && (
+              <Modal
+                showModal={showPaymentModal}
                 close={() => {
                   setShowPaymentModal(false);
                 }}
-                onPaymentMethodAdded={handleSubmit}
+              >
-                workspaceId={workspace.id}
+                <BillingPaymentMethodForm
-              />
+                  close={() => {
-            </Modal>
+                    setShowPaymentModal(false);
-          )}
+                  }}
+                  onPaymentMethodAdded={handleSubmit}
+                  workspaceId={workspace.id}
+                />
+              </Modal>
+            )}
 
-          <Button
+            <Button
-            onClick={() => {
+              type="submit"
-              if (!plan.isFree && workspace.paymentMethods.length === 0) {
+              loading={submitState.loading}
-                setShowPaymentModal(true);
+              disabled={!!passwordError || maintenanceActive}
-
+              id="create-app"
-                return;
+            >
-              }
+              Create Project
-
+            </Button>
-              handleSubmit();
+          </div>
-            }}
-            type="submit"
-            loading={submitState.loading}
-            disabled={
-              !!applicationError ||
-              !!submitState.error ||
-              !!passwordError ||
-              maintenanceActive
-            }
-            id="create-app"
-          >
-            Create Project
-          </Button>
         </div>
-      </div>
+      </form>
     </Container>
   );
 }
 
 export default function NewProjectPage() {
-  const { data, loading, error } = usePrefetchNewAppQuery();
   const router = useRouter();
+  const user = useUserData();
 
-  if (error) {
+  const { data, loading, error } = usePrefetchNewAppQuery();
-    throw error;
+
+  const {
+    data: freeAndActiveProjectsData,
+    loading: freeAndActiveProjectsLoading,
+    error: freeAndActiveProjectsError,
+  } = useGetFreeAndActiveProjectsQuery({
+    variables: { userId: user?.id },
+    fetchPolicy: 'cache-and-network',
+  });
+
+  if (error || freeAndActiveProjectsError) {
+    throw error || freeAndActiveProjectsError;
   }
 
-  if (loading) {
+  if (loading || freeAndActiveProjectsLoading) {
     return (
       <ActivityIndicator delay={500} label="Loading plans and regions..." />
     );
   }
 
   const { workspace } = router.query;
-
   const { regions, plans, workspaces } = data;
 
   // get pre-selected workspace
@@ -629,13 +630,16 @@ export default function NewProjectPage() {
     ? workspaces.find((w) => w.slug === workspace)
     : workspaces[0];
 
-  const preSelectedRegion = regions.filter((region) => region.active)[0];
+  const preSelectedRegion = regions.find((region) => region.active);
 
   return (
     <NewProjectPageContent
       regions={regions}
       plans={plans}
       workspaces={workspaces}
+      numberOfFreeAndLiveProjects={
+        freeAndActiveProjectsData?.freeAndActiveProjects.length
+      }
       preSelectedWorkspace={preSelectedWorkspace}
       preSelectedRegion={preSelectedRegion}
     />

dashboard/src/utils/CONSTANTS.ts

@@ -22,3 +22,8 @@ export const READ_ONLY_SCHEMAS = ['auth', 'storage'];
  * Key used to store the color preference in local storage.
  */
 export const COLOR_PREFERENCE_STORAGE_KEY = 'nhost-color-preference';
+
+/**
+ * Maximum number of free projects a user is allowed to have.
+ */
+export const MAX_FREE_PROJECTS = 1;

dashboard/src/utils/common/generateAppServiceUrl/generateAppServiceUrl.test.ts

@@ -14,6 +14,13 @@ beforeEach(() => {
   process.env = {
     NEXT_PUBLIC_NHOST_PLATFORM: 'false',
     NEXT_PUBLIC_ENV: 'dev',
+    NEXT_PUBLIC_NHOST_AUTH_URL: 'https://localdev.nhost.run/v1/auth',
+    NEXT_PUBLIC_NHOST_FUNCTIONS_URL: 'https://localdev.nhost.run/v1/functions',
+    NEXT_PUBLIC_NHOST_GRAPHQL_URL: 'https://localdev.nhost.run/v1/graphql',
+    NEXT_PUBLIC_NHOST_STORAGE_URL: 'https://localdev.nhost.run/v1/storage',
+    NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL: 'http://localhost:9695',
+    NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL: 'http://localhost:9693',
+    NEXT_PUBLIC_NHOST_HASURA_API_URL: 'http://localhost:8080',
     ...env,
   };
 });
@@ -73,8 +80,10 @@ test('should generate staging subdomains in staging environment', () => {
 });
 
 test('should generate no slug for Hasura neither in local mode nor in remote mode', () => {
+  process.env.NEXT_PUBLIC_NHOST_HASURA_API_URL = 'http://localhost:8082';
+
   expect(generateAppServiceUrl('test', 'eu-west-1', 'hasura')).toBe(
-    'http://localhost:1337',
+    'http://localhost:8082',
   );
 
   process.env.NEXT_PUBLIC_NHOST_PLATFORM = 'true';
@@ -91,15 +100,6 @@ test('should generate no slug for Hasura neither in local mode nor in remote mod
   );
 });
 
-test('should be able to override the default local backend slugs', () => {
-  expect(
-    generateAppServiceUrl('test', 'eu-west-1', 'storage', {
-      ...defaultLocalBackendSlugs,
-      storage: '/v1/storage',
-    }),
-  ).toBe('http://localhost:1337/v1/storage');
-});
-
 test('should be able to override the default remote backend slugs', () => {
   process.env.NEXT_PUBLIC_NHOST_PLATFORM = 'true';
   process.env.NEXT_PUBLIC_ENV = 'production';
@@ -115,41 +115,59 @@ test('should be able to override the default remote backend slugs', () => {
   ).toBe('https://test.hasura.eu-west-1.nhost.run/lorem-ipsum');
 });
 
-test('should generate a basic subdomain without region in local mode', () => {
+test('should construct service URLs based on environment variables', () => {
-  expect(generateAppServiceUrl('test', 'eu-west-1', 'auth')).toBe(
+  process.env.NEXT_PUBLIC_NHOST_HASURA_API_URL = 'https://localdev0.nhost.run';
-    `http://localhost:1337/v1/auth`,
+
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'hasura')).toBe(
+    `https://localdev0.nhost.run`,
   );
 
+  process.env.NEXT_PUBLIC_NHOST_AUTH_URL =
+    'https://localdev1.nhost.run/v1/auth';
+
+  expect(generateAppServiceUrl('test', 'eu-west-1', 'auth')).toBe(
+    `https://localdev1.nhost.run/v1/auth`,
+  );
+
+  process.env.NEXT_PUBLIC_NHOST_STORAGE_URL =
+    'https://localdev2.nhost.run/v1/storage';
+
   expect(generateAppServiceUrl('test', 'eu-west-1', 'storage')).toBe(
-    'http://localhost:1337/v1/files',
+    'https://localdev2.nhost.run/v1/storage',
   );
 
+  process.env.NEXT_PUBLIC_NHOST_GRAPHQL_URL =
+    'https://localdev3.nhost.run/v1/graphql';
+
   expect(generateAppServiceUrl('test', 'eu-west-1', 'graphql')).toBe(
-    'http://localhost:1337/v1/graphql',
+    'https://localdev3.nhost.run/v1/graphql',
   );
 
+  process.env.NEXT_PUBLIC_NHOST_FUNCTIONS_URL =
+    'https://localdev4.nhost.run/v1/functions';
+
   expect(generateAppServiceUrl('test', 'eu-west-1', 'functions')).toBe(
-    'http://localhost:1337/v1/functions',
+    'https://localdev4.nhost.run/v1/functions',
   );
 });
 
 test('should generate a basic subdomain with a custom port if provided', () => {
-  const CUSTOM_BACKEND_PORT = '1338';
+  process.env.NEXT_PUBLIC_NHOST_BACKEND_URL = `http://localhost:1338`;
-  process.env.NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT = CUSTOM_BACKEND_PORT;
+  process.env.NEXT_PUBLIC_NHOST_PLATFORM = 'true';
 
   expect(generateAppServiceUrl('test', 'eu-west-1', 'auth')).toBe(
-    `http://localhost:${CUSTOM_BACKEND_PORT}/v1/auth`,
+    `http://localhost:1338/v1/auth`,
   );
 
   expect(generateAppServiceUrl('test', 'eu-west-1', 'storage')).toBe(
-    `http://localhost:${CUSTOM_BACKEND_PORT}/v1/files`,
+    `http://localhost:1338/v1/files`,
   );
 
   expect(generateAppServiceUrl('test', 'eu-west-1', 'graphql')).toBe(
-    `http://localhost:${CUSTOM_BACKEND_PORT}/v1/graphql`,
+    `http://localhost:1338/v1/graphql`,
   );
 
   expect(generateAppServiceUrl('test', 'eu-west-1', 'functions')).toBe(
-    `http://localhost:${CUSTOM_BACKEND_PORT}/v1/functions`,
+    `http://localhost:1338/v1/functions`,
   );
 });

dashboard/src/utils/common/generateAppServiceUrl/generateAppServiceUrl.ts

@@ -1,3 +1,12 @@
+import {
+  getAuthServiceUrl,
+  getFunctionsServiceUrl,
+  getGraphqlServiceUrl,
+  getHasuraApiUrl,
+  getStorageServiceUrl,
+  isPlatform,
+} from '@/utils/env';
+
 export type NhostService =
   | 'auth'
   | 'graphql'
@@ -31,7 +40,8 @@ export const defaultRemoteBackendSlugs: Record<NhostService, string> = {
 };
 
 /**
- * Generates a service specific URL for a project.
+ * Generates a service specific URL for a project. Provided `subdomain` is
+ * omitted if the dashboard is running in local mode.
  *
  * @param subdomain - The project's subdomain
  * @param region - The project's region
@@ -47,19 +57,30 @@ export default function generateAppServiceUrl(
   localBackendSlugs = defaultLocalBackendSlugs,
   remoteBackendSlugs = defaultRemoteBackendSlugs,
 ) {
-  if (process.env.NEXT_PUBLIC_NHOST_PLATFORM !== 'true') {
+  const IS_PLATFORM = isPlatform();
-    return `http://localhost:${
+
-      process.env.NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT || 1337
+  if (!IS_PLATFORM) {
-    }${localBackendSlugs[service]}`;
+    const serviceUrls: Record<typeof service, string> = {
+      auth: getAuthServiceUrl(),
+      graphql: getGraphqlServiceUrl(),
+      storage: getStorageServiceUrl(),
+      functions: getFunctionsServiceUrl(),
+      hasura: getHasuraApiUrl(),
+    };
+
+    if (!serviceUrls[service]) {
+      throw new Error(
+        `Service URL for "${service}" is not defined. Please check your .env file.`,
+      );
+    }
+
+    return serviceUrls[service];
   }
 
+  // This is only used when running the dashboard locally against its own
+  // backend.
   if (process.env.NEXT_PUBLIC_ENV === 'dev') {
-    return `${
+    return `${process.env.NEXT_PUBLIC_NHOST_BACKEND_URL}${localBackendSlugs[service]}`;
-      process.env.NEXT_PUBLIC_NHOST_BACKEND_URL ||
-      `http://localhost:${
-        process.env.NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT || 1337
-      }`
-    }${localBackendSlugs[service]}`;
   }
 
   if (process.env.NEXT_PUBLIC_ENV === 'staging') {

dashboard/src/utils/discordAnnounce.ts

@@ -4,6 +4,10 @@ import { isDevOrStaging } from './helpers';
  * @param content {string} This string to log on the particular channel.
  */
 export const discordAnnounce = async (content: string) => {
+  if (!process.env.NEXT_PUBLIC_DISCORD_LOGGING) {
+    return;
+  }
+
   const username = isDevOrStaging() ? 'console-next(dev)' : 'console-next';
 
   const params = {

dashboard/src/utils/env.ts

@@ -1,36 +1,92 @@
 /**
- * URL of Hasura's Migration API. This is only used when local development is
+ * Determines whether the Nhost Dashboard is running in a cloud environment.
- * enabled.
  */
-export const LOCAL_MIGRATIONS_URL = `http://localhost:${
+export function isPlatform() {
-  process.env.NEXT_PUBLIC_NHOST_LOCAL_MIGRATIONS_PORT || 9693
+  return process.env.NEXT_PUBLIC_NHOST_PLATFORM === 'true';
-}`;
+}
-
-/**
- * Port of the locally running backend.s
- */
-export const LOCAL_BACKEND_PORT =
-  process.env.NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT;
-
-/**
- * Local subdomain. This is only used when local development is enabled.
- */
-export const LOCAL_SUBDOMAIN = LOCAL_BACKEND_PORT
-  ? `localhost:${LOCAL_BACKEND_PORT}`
-  : 'localhost';
-
-/**
- * URL of Hasura Console. This is only used when running the Nhost Dashboard
- * locally.
- */
-export const LOCAL_HASURA_URL = `http://localhost:${
-  process.env.NEXT_PUBLIC_NHOST_LOCAL_HASURA_PORT || 9695
-}`;
 
 /**
  * Backend URL for the locally running instance. This is only used when running
  * the Nhost Dashboard locally.
  */
-export const LOCAL_BACKEND_URL = `http://localhost:${
+export function getLocalBackendUrl() {
-  process.env.NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT || 1337
+  return `http://localhost:${
-}`;
+    process.env.NEXT_PUBLIC_NHOST_LOCAL_SERVICES_PORT || '1337'
+  }`;
+}
+
+/**
+ * Admin secret for Hasura.
+ */
+export function getHasuraAdminSecret() {
+  return process.env.NEXT_PUBLIC_NHOST_ADMIN_SECRET || 'nhost-admin-secret';
+}
+
+/**
+ * Custom URL of the Auth service.
+ */
+export function getAuthServiceUrl() {
+  return (
+    process.env.NEXT_PUBLIC_NHOST_AUTH_URL || 'https://local.auth.nhost.run/v1'
+  );
+}
+
+/**
+ * Custom URL of the GraphQL service.
+ */
+export function getGraphqlServiceUrl() {
+  return (
+    process.env.NEXT_PUBLIC_NHOST_GRAPHQL_URL ||
+    'https://local.graphql.nhost.run/v1'
+  );
+}
+
+/**
+ * Custom URL of the Storage service.
+ */
+export function getStorageServiceUrl() {
+  return (
+    process.env.NEXT_PUBLIC_NHOST_STORAGE_URL ||
+    'https://local.storage.nhost.run/v1'
+  );
+}
+
+/**
+ * Custom URL of the Functions service.
+ */
+export function getFunctionsServiceUrl() {
+  return (
+    process.env.NEXT_PUBLIC_NHOST_FUNCTIONS_URL ||
+    'https://local.functions.nhost.run/v1'
+  );
+}
+
+/**
+ * Custom URL of the Hasura service.
+ */
+export function getHasuraConsoleServiceUrl() {
+  return (
+    process.env.NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL ||
+    'https://local.hasura.nhost.run'
+  );
+}
+
+/**
+ * Custom URL of the Hasura Migrations API.
+ */
+export function getHasuraMigrationsApiUrl() {
+  return (
+    process.env.NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL ||
+    'https://local.hasura.nhost.run/v1/migrations'
+  );
+}
+
+/**
+ * Custom URL of the Hasura Schema and Metadata API.
+ */
+export function getHasuraApiUrl() {
+  return (
+    process.env.NEXT_PUBLIC_NHOST_HASURA_API_URL ||
+    'https://local.hasura.nhost.run'
+  );
+}

dashboard/src/utils/helpers.ts

@@ -1,7 +1,7 @@
 import features from '@/data/features.json';
 import { ApplicationStatus } from '@/types/application';
+import { getLocalBackendUrl } from '@/utils/env';
 import slugify from 'slugify';
-import { LOCAL_BACKEND_URL } from './env';
 import type { DeploymentRowFragment } from './__generated__/graphql';
 
 export function getLastLiveDeployment(deployments?: DeploymentRowFragment[]) {
@@ -57,11 +57,11 @@ export function getCurrentEnvironment(): Environment {
 
 export function generateRemoteAppUrl(subdomain: string): string {
   if (process.env.NEXT_PUBLIC_NHOST_PLATFORM !== 'true') {
-    return LOCAL_BACKEND_URL;
+    return getLocalBackendUrl();
   }
 
   if (process.env.NEXT_PUBLIC_ENV === 'dev') {
-    return process.env.NEXT_PUBLIC_NHOST_BACKEND_URL || LOCAL_BACKEND_URL;
+    return process.env.NEXT_PUBLIC_NHOST_BACKEND_URL;
   }
 
   if (process.env.NEXT_PUBLIC_ENV === 'staging') {

dashboard/src/utils/msw/mocks/rest/hasuraMetadataQuery.ts

@@ -1,7 +1,7 @@
 import { rest } from 'msw';
 
 const hasuraMetadataQuery = rest.post(
-  'http://localhost:1337/v1/metadata',
+  'http://localhost:8080/v1/metadata',
   (_req, res, ctx) =>
     res(
       ctx.delay(250),

dashboard/src/utils/msw/mocks/rest/tableQuery.ts

@@ -1,7 +1,7 @@
 import { rest } from 'msw';
 
 const tableQuery = rest.post(
-  'http://localhost:1337/v2/query',
+  'http://localhost:8080/v2/query',
   async (req, res, ctx) => {
     const body = await req.json();
 

dashboard/src/utils/nhost.ts

@@ -1,9 +1,25 @@
+import {
+  getAuthServiceUrl,
+  getFunctionsServiceUrl,
+  getGraphqlServiceUrl,
+  getStorageServiceUrl,
+  isPlatform,
+} from '@/utils/env';
 import { NhostClient } from '@nhost/nextjs';
-import { LOCAL_SUBDOMAIN } from './env';
 
-export const nhost =
+// eslint-disable-next-line no-nested-ternary
-  process.env.NEXT_PUBLIC_NHOST_PLATFORM === 'true'
+export const nhost = isPlatform()
-    ? new NhostClient({ backendUrl: process.env.NEXT_PUBLIC_NHOST_BACKEND_URL })
+  ? new NhostClient({ backendUrl: process.env.NEXT_PUBLIC_NHOST_BACKEND_URL })
-    : new NhostClient({ subdomain: LOCAL_SUBDOMAIN });
+  : getAuthServiceUrl() &&
+    getGraphqlServiceUrl() &&
+    getStorageServiceUrl() &&
+    getFunctionsServiceUrl()
+  ? new NhostClient({
+      authUrl: getAuthServiceUrl(),
+      graphqlUrl: getGraphqlServiceUrl(),
+      storageUrl: getStorageServiceUrl(),
+      functionsUrl: getFunctionsServiceUrl(),
+    })
+  : new NhostClient({ subdomain: 'local' });
 
 export default nhost;

dashboard/src/utils/testUtils.tsx

@@ -31,6 +31,19 @@ const queryClient = new QueryClient({
   },
 });
 
+process.env = {
+  NODE_ENV: 'development',
+  NEXT_PUBLIC_NHOST_PLATFORM: 'false',
+  NEXT_PUBLIC_ENV: 'dev',
+  NEXT_PUBLIC_NHOST_AUTH_URL: 'https://localdev.nhost.run/v1/auth',
+  NEXT_PUBLIC_NHOST_FUNCTIONS_URL: 'https://localdev.nhost.run/v1/functions',
+  NEXT_PUBLIC_NHOST_GRAPHQL_URL: 'https://localdev.nhost.run/v1/graphql',
+  NEXT_PUBLIC_NHOST_STORAGE_URL: 'https://localdev.nhost.run/v1/storage',
+  NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL: 'http://localhost:9695',
+  NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL: 'http://localhost:9693',
+  NEXT_PUBLIC_NHOST_HASURA_API_URL: 'http://localhost:8080',
+};
+
 export const mockRouter: NextRouter = {
   basePath: '',
   pathname: '/',

docs/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/docs
 
+## 0.0.14
+
+### Patch Changes
+
+- bfb4c1a6: fix(docs): restore autogenerated `@nhost/nhost-js` docs
+
 ## 0.0.13
 
 ### Patch Changes

docs/docs/reference/index.md

@@ -10,7 +10,7 @@ In this section:
 - [Overview](/reference/javascript)
 - [Authentication](/reference/javascript/auth)
 - [Storage](/reference/javascript/storage)
-- [Functions](/reference/javascript/functions)
+- [Functions](/reference/javascript/nhost-js/functions)
 - [GraphQL](/reference/javascript/graphql)
 
 ### React

docs/docs/reference/javascript/functions/content/01-call.mdx

@@ -1,60 +0,0 @@
----
-title: call()
-sidebar_label: call()
-slug: /reference/javascript/functions/call
-description: Use `nhost.functions.call` to call (sending a POST request to) a serverless function.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/functions/index.ts#L55
----
-
-# `call()`
-
-## Overload 1 of 2
-
-Use `nhost.functions.call` to call (sending a POST request to) a serverless function.
-
-:::caution Deprecated
-Axios will be replaced by cross-fetch in the near future. Only the headers configuration will be kept.
-:::
-
-### Parameters
-
----
-
-**<span className="parameter-name">url</span>** <span className="optional-status">required</span> <code>string</code>
-
----
-
-**<span className="parameter-name">data</span>** <span className="optional-status">optional</span> <code>D</code>
-
----
-
-**<span className="parameter-name">config</span>** <span className="optional-status">optional</span> <code>AxiosRequestConfig&lt;any&gt; &amp; { useAxios: "true" } &amp; [`NhostFunctionCallConfig`](/reference/javascript/functions/types/nhost-function-call-config) &amp; { useAxios: "true" }</code>
-
----
-
-## Overload 2 of 2
-
-Use `nhost.functions.call` to call (sending a POST request to) a serverless function.
-
-```ts
-await nhost.functions.call('send-welcome-email', {
-  email: 'joe@example.com',
-  name: 'Joe Doe'
-})
-```
-
-### Parameters
-
----
-
-**<span className="parameter-name">url</span>** <span className="optional-status">required</span> <code>string</code>
-
----
-
-**<span className="parameter-name">data</span>** <span className="optional-status">required</span> <code>D</code>
-
----
-
-**<span className="parameter-name">config</span>** <span className="optional-status">optional</span> <code>[`NhostFunctionCallConfig`](/reference/javascript/functions/types/nhost-function-call-config) &amp; { useAxios: "false" }</code>
-
----

docs/docs/reference/javascript/functions/content/02-set-access-token.mdx

@@ -1,23 +0,0 @@
----
-title: setAccessToken()
-sidebar_label: setAccessToken()
-slug: /reference/javascript/functions/set-access-token
-description: Use `nhost.functions.setAccessToken` to a set an access token to be used in subsequent functions requests. Note that if you're signin in users with `nhost.auth.signIn()` the access token will be set automatically.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/functions/index.ts#L155
----
-
-# `setAccessToken()`
-
-Use `nhost.functions.setAccessToken` to a set an access token to be used in subsequent functions requests. Note that if you're signin in users with `nhost.auth.signIn()` the access token will be set automatically.
-
-```ts
-nhost.functions.setAccessToken('some-access-token')
-```
-
-## Parameters
-
----
-
-**<span className="parameter-name">accessToken</span>** <span className="optional-status">required</span> <code>undefined &#124; string</code>
-
----

docs/docs/reference/javascript/functions/index.mdx

@@ -1,22 +0,0 @@
----
-title: NhostFunctionsClient
-sidebar_label: Functions
-description: No description provided.
-slug: /reference/javascript/functions
-custom_edit_url: https://github.com/nhost/nhost/edit/main/docs/docs/reference/javascript/functions/index.mdx
----
-
-# `NhostFunctionsClient`
-
-## Parameters
-
----
-
-**<span className="parameter-name">params</span>** <span className="optional-status">required</span> [`NhostFunctionsConstructorParams`](/reference/javascript/functions/types/nhost-functions-constructor-params)
-
-| Property                                                                                       | Type                | Required | Notes                                                                                     |
-| :--------------------------------------------------------------------------------------------- | :------------------ | :------: | :---------------------------------------------------------------------------------------- |
-| <span className="parameter-name"><span className="light-grey">params.</span>url</span>         | <code>string</code> |    ✔️    | Serverless Functions endpoint.                                                            |
-| <span className="parameter-name"><span className="light-grey">params.</span>adminSecret</span> | <code>string</code> |          | Admin secret. When set, it is sent as an `x-hasura-admin-secret` header for all requests. |
-
----

docs/docs/reference/javascript/functions/types/nhost-function-call-config.mdx

@@ -1,19 +0,0 @@
----
-title: NhostFunctionCallConfig
-sidebar_label: NhostFunctionCallConfig
-description: Subset of RequestInit parameters that are supported by the functions client
-displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/functions/types.ts#L41
----
-
-# `NhostFunctionCallConfig`
-
-Subset of RequestInit parameters that are supported by the functions client
-
-## Parameters
-
----
-
-**<span className="parameter-name">headers</span>** <span className="optional-status">optional</span> <code>Record&lt;string, string&gt;</code>
-
----

docs/docs/reference/javascript/functions/types/nhost-function-call-response.mdx

@@ -1,15 +0,0 @@
----
-title: NhostFunctionCallResponse
-sidebar_label: NhostFunctionCallResponse
-description: No description provided.
-displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/functions/types.ts#L15
----
-
-# `NhostFunctionCallResponse`
-
-```ts
-type NhostFunctionCallResponse =
-  | { res: { data: T; status: number; statusText: string }; error: null }
-  | { res: null; error: ErrorPayload }
-```

docs/docs/reference/javascript/functions/types/nhost-functions-constructor-params.mdx

@@ -1,25 +0,0 @@
----
-title: NhostFunctionsConstructorParams
-sidebar_label: NhostFunctionsConstructorParams
-description: No description provided.
-displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/functions/types.ts#L4
----
-
-# `NhostFunctionsConstructorParams`
-
-## Parameters
-
----
-
-**<span className="parameter-name">url</span>** <span className="optional-status">required</span> <code>string</code>
-
-Serverless Functions endpoint.
-
----
-
-**<span className="parameter-name">adminSecret</span>** <span className="optional-status">optional</span> <code>string</code>
-
-Admin secret. When set, it is sent as an `x-hasura-admin-secret` header for all requests.
-
----

docs/docs/reference/javascript/index.mdx

@@ -10,7 +10,7 @@ The Nhost JavaScript client is the primary way of interacting with your Nhost pr
 
 - [Authentication](/reference/javascript/auth)
 - [Storage](/reference/javascript/storage)
-- [Functions](/reference/javascript/functions)
+- [Functions](/reference/javascript/nhost-js/functions)
 - [GraphQL](/reference/javascript/graphql)
 
 ## Installation

docs/package.json

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

docs/sidebars.js

@@ -111,12 +111,12 @@ const sidebars = {
           label: 'Functions',
           link: {
             type: 'doc',
-            id: 'reference/javascript/functions/index'
+            id: 'reference/docgen/javascript/nhost-js/content/nhost-functions-client/index'
           },
           items: [
             {
               type: 'autogenerated',
-              dirName: 'reference/javascript/functions/content'
+              dirName: 'reference/docgen/javascript/nhost-js/content/nhost-functions-client/content'
             }
           ]
         },