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

chore: update versions

.github/actions/install-dependencies/action.yaml

@@ -23,9 +23,7 @@ runs:
     - uses: actions/cache@v3
       id: pnpm-cache
       with:
-        path: |
-          ${{ steps.pnpm-cache-dir.outputs.dir }}
-          ~/.cache/Cypress
+        path: ${{ steps.pnpm-cache-dir.outputs.dir }}
         key: ${{ runner.os }}-node-${{ hashFiles('pnpm-lock.yaml') }}
         restore-keys: ${{ runner.os }}-node-
     - name: Use Node.js 16

.github/workflows/ci.yaml

@@ -19,6 +19,12 @@ env:
   NEXT_PUBLIC_ENV: dev
   NEXT_TELEMETRY_DISABLED: 1
   NEXT_PUBLIC_NHOST_BACKEND_URL: http://localhost:1337
+  NHOST_TEST_DASHBOARD_URL: ${{ vars.NHOST_TEST_DASHBOARD_URL }}
+  NHOST_TEST_WORKSPACE_NAME: ${{ vars.NHOST_TEST_WORKSPACE_NAME }}
+  NHOST_TEST_PROJECT_NAME: ${{ vars.NHOST_TEST_PROJECT_NAME }}
+  NHOST_TEST_USER_EMAIL: ${{ secrets.NHOST_TEST_USER_EMAIL }}
+  NHOST_TEST_USER_PASSWORD: ${{ secrets.NHOST_TEST_USER_PASSWORD }}
+  NHOST_TEST_PROJECT_ADMIN_SECRET: ${{ secrets.NHOST_TEST_PROJECT_ADMIN_SECRET }}
 
 jobs:
   build:
@@ -60,47 +66,6 @@ jobs:
     outputs:
       matrix: ${{ steps.set-matrix.outputs.matrix }}
 
-  e2e:
-    name: 'e2e (${{ matrix.package.path }})'
-    needs: build
-    if: ${{ needs.build.outputs.matrix != '[]' && needs.build.outputs.matrix != '' }}
-    strategy:
-      # * Don't cancel other matrices when one fails
-      fail-fast: false
-      matrix:
-        package: ${{ fromJson(needs.build.outputs.matrix) }}
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      # * Install Node and dependencies. Package dependencies won't be downloaded again as they have been cached by the `build` job.
-      - name: Install Node and dependencies
-        uses: ./.github/actions/install-dependencies
-        with:
-          TURBO_TOKEN: ${{ env.TURBO_TOKEN }}
-          TURBO_TEAM: ${{ env.TURBO_TEAM }}
-      # * Install Nhost CLI if a `nhost/config.yaml` file is found
-      - name: Install Nhost CLI
-        if: hashFiles(format('{0}/nhost/config.yaml', matrix.package.path)) != ''
-        uses: ./.github/actions/nhost-cli
-      # * Run the `ci` script of the current package of the matrix. Dependencies build is cached by Turborepo
-      - name: Run e2e test
-        run: pnpm --filter="${{ matrix.package.name }}" run e2e
-      - id: file-name
-        if: ${{ failure() }}
-        name: Tranform package name into a valid file name
-        run: |
-          PACKAGE_FILE_NAME=$(echo "${{ matrix.package.name }}" | sed 's/@//g; s/\//-/g')
-          echo "fileName=$PACKAGE_FILE_NAME"  >> $GITHUB_OUTPUT
-      # * Run this step only if the previous step failed, and some Cypress screenshots/videos exist
-      - name: Upload Cypress videos and screenshots
-        if: ${{ failure() && hashFiles(format('{0}/cypress/screenshots/**', matrix.package.path), format('{0}/cypress/videos/**', matrix.package.path)) != ''}}
-        uses: actions/upload-artifact@v3
-        with:
-          name: cypress-${{ steps.file-name.outputs.fileName }}
-          path: |
-            ${{format('{0}/cypress/screenshots/**', matrix.package.path)}}
-            ${{format('{0}/cypress/videos/**', matrix.package.path)}}
-
   unit:
     name: Unit tests
     needs: build
@@ -141,3 +106,57 @@ jobs:
       # * Run every `lint` script in the workspace . Dependencies build is cached by Turborepo
       - name: Lint
         run: pnpm run lint:all
+
+  e2e:
+    name: 'E2E (Package: ${{ matrix.package.path }})'
+    needs: build
+    if: ${{ needs.build.outputs.matrix != '[]' && needs.build.outputs.matrix != '' }}
+    strategy:
+      # * Don't cancel other matrices when one fails
+      fail-fast: false
+      matrix:
+        package: ${{ fromJson(needs.build.outputs.matrix) }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      # * Install Node and dependencies. Package dependencies won't be downloaded again as they have been cached by the `build` job.
+      - name: Install Node and dependencies
+        uses: ./.github/actions/install-dependencies
+        with:
+          TURBO_TOKEN: ${{ env.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ env.TURBO_TEAM }}
+      # * Install Nhost CLI if a `nhost/config.yaml` file is found
+      - name: Install Nhost CLI
+        if: hashFiles(format('{0}/nhost/config.yaml', matrix.package.path)) != ''
+        uses: ./.github/actions/nhost-cli
+      - name: Fetch Dashboard Preview URL
+        id: fetch-dashboard-preview-url
+        uses: zentered/vercel-preview-url@v1.1.9
+        if: github.ref_name != 'main'
+        env:
+          VERCEL_TOKEN: ${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
+          GITHUB_REF: ${{ github.ref_name }}
+          GITHUB_REPOSITORY: ${{ github.repository }}
+        with:
+          vercel_team_id: ${{ secrets.DASHBOARD_VERCEL_TEAM_ID }}
+          vercel_project_id: ${{ secrets.DASHBOARD_STAGING_VERCEL_PROJECT_ID }}
+          vercel_state: BUILDING,READY,INITIALIZING
+      - name: Set Dashboard Preview URL
+        if: steps.fetch-dashboard-preview-url.outputs.preview_url != ''
+        run: echo "NHOST_TEST_DASHBOARD_URL=https://${{ steps.fetch-dashboard-preview-url.outputs.preview_url }}" >> $GITHUB_ENV
+      # * Run the `ci` script of the current package of the matrix. Dependencies build is cached by Turborepo
+      - name: Run e2e tests
+        run: pnpm --filter="${{ matrix.package.name }}" run e2e
+      - id: file-name
+        if: ${{ failure() }}
+        name: Transform package name into a valid file name
+        run: |
+          PACKAGE_FILE_NAME=$(echo "${{ matrix.package.name }}" | sed 's/@//g; s/\//-/g')
+          echo "fileName=$PACKAGE_FILE_NAME"  >> $GITHUB_OUTPUT
+      # * Run this step only if the previous step failed, and Playwright generated a report
+      - name: Upload Playwright Report
+        if: ${{ failure() && hashFiles(format('{0}/playwright-report/**', matrix.package.path)) != ''}}
+        uses: actions/upload-artifact@v3
+        with:
+          name: playwright-${{ steps.file-name.outputs.fileName }}
+          path: ${{format('{0}/playwright-report/**', matrix.package.path)}}

.github/workflows/dashboard.yaml

@@ -9,6 +9,7 @@ env:
   NEXT_PUBLIC_ENV: dev
   NEXT_TELEMETRY_DISABLED: 1
   NEXT_PUBLIC_NHOST_BACKEND_URL: http://localhost:1337
+
 jobs:
   build:
     name: Build

.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 }}

config/.eslint.base.js

@@ -23,8 +23,8 @@ module.exports = {
     'e2e/**/*.ts',
     'e2e/**/*.d.ts'
   ],
-  plugins: ['@typescript-eslint', 'cypress'],
-  extends: ['plugin:cypress/recommended'],
+  plugins: ['@typescript-eslint'],
+  extends: [],
   parserOptions: {
     ecmaVersion: 2020,
     sourceType: 'module'

dashboard/.eslintrc.js

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

dashboard/.gitignore

@@ -49,4 +49,9 @@ tailwind.json
 .idea
 
 # Do not ignore Logs page
-!src/**/logs*
+!src/**/logs*
+/test-results/
+/playwright-report/
+/playwright/.cache/
+storageState.json
+e2e/.auth/*

dashboard/.storybook/preview.js

@@ -51,7 +51,7 @@ export const decorators = [
   (Story) => (
     <NhostApolloProvider
       fetchPolicy="cache-first"
-      graphqlUrl="http://localhost:1337/v1/graphql"
+      graphqlUrl="https://local.graphql.nhost.run/v1"
     >
       <Story />
     </NhostApolloProvider>

dashboard/CHANGELOG.md

@@ -1,5 +1,107 @@
 # @nhost/dashboard
 
+## 0.14.2
+
+### Patch Changes
+
+- 3cb67300: fix(logs): don't break UI when clearing time picker
+- 7453bf3b: feat(projects): show project creator info
+- c166dad0: chore(tests): improve auth page tests
+- 6a290bb2: chore(deps): bump `@types/react` to 18.0.32
+
+## 0.14.1
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.15
+- @nhost/nextjs@1.13.19
+
+## 0.14.0
+
+### Minor Changes
+
+- 6e1f03ea: feat(dashboard): add support for the Azure AD provider
+
+### Patch Changes
+
+- 1bd2c373: chore(deps): bump `turbo` to 1.8.6
+- d329b621: chore(deps): bump `@types/react` to 18.0.30
+- cb248f0d: fix(tests): avoid name collision in database tests
+- 867c8076: chore(deps): bump `@types/react` to 18.0.29
+
+## 0.13.10
+
+### Patch Changes
+
+- e93b06ab: fix(dashboard): remove left margin from workspace list on mobile
+- 1c4806bf: chore(deps): bump `sharp` to 0.32.0
+  - @nhost/react-apollo@5.0.14
+  - @nhost/nextjs@1.13.18
+
+## 0.13.9
+
+### Patch Changes
+
+- 912ed76c: chore(dashboard): bump `@apollo/client` to 3.7.10
+- Updated dependencies [912ed76c]
+  - @nhost/react-apollo@5.0.13
+
+## 0.13.8
+
+### Patch Changes
+
+- 7c127372: chore(dashboard): bump `react-error-boundary` to v4
+
+## 0.13.7
+
+### Patch Changes
+
+- 9130ab12: chore(dashboard): bump `yup` to v1 and `@hookform/resolvers` to v3
+
+## 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

dashboard/Dockerfile

@@ -3,7 +3,7 @@ RUN apk add --no-cache libc6-compat
 RUN apk update
 WORKDIR /app
 
-RUN yarn global add turbo@1.8.3
+RUN yarn global add turbo@1.8.6
 COPY . .
 RUN turbo prune --scope="@nhost/dashboard" --docker
 
@@ -20,6 +20,7 @@ ENV NEXT_PUBLIC_ENV dev
 ENV NEXT_PUBLIC_NHOST_PLATFORM false
 
 # placeholders for URLs, will be replaced on runtime by entrypoint script
+ENV NEXT_PUBLIC_NHOST_ADMIN_SECRET __NEXT_PUBLIC_NHOST_ADMIN_SECRET__
 ENV NEXT_PUBLIC_NHOST_AUTH_URL __NEXT_PUBLIC_NHOST_AUTH_URL__
 ENV NEXT_PUBLIC_NHOST_FUNCTIONS_URL __NEXT_PUBLIC_NHOST_FUNCTIONS_URL__
 ENV NEXT_PUBLIC_NHOST_GRAPHQL_URL __NEXT_PUBLIC_NHOST_GRAPHQL_URL__

dashboard/README.md

@@ -111,3 +111,22 @@ pnpm storybook
 | `@typescript-eslint/consistent-type-imports` | Enforces `import type { Type } from 'module'` syntax. It prevents false positive circular dependency errors.                                                 |
 | `@typescript-eslint/naming-convention`       | Enforces a consistent naming convention.                                                                                                                     |
 | `no-restricted-imports`                      | Enforces absolute imports and consistent import paths for components from `src/components/ui` folder.                                                        |
+
+### End-to-End Tests
+
+End-to-end tests are written using [Playwright](https://playwright.dev/). To run the tests, run the following command:
+
+```bash
+pnpm e2e
+```
+
+Most of the tests require access to the Nhost test user. To run these tests, you need to set the following environment variables in `.env.test`:
+
+```
+NHOST_TEST_DASHBOARD_URL=<test_dashboard_url>
+NHOST_TEST_USER_EMAIL=<test_user_email>
+NHOST_TEST_USER_PASSWORD=<test_user_password>
+NHOST_TEST_WORKSPACE_NAME=<test_workspace_name>
+NHOST_TEST_PROJECT_NAME=<test_project_name>
+NHOST_TEST_PROJECT_ADMIN_SECRET=<test_project_admin_secret>
+```

dashboard/docker-entrypoint.sh

@@ -3,15 +3,17 @@
 set -euo pipefail
 
 # read URLs from env variables (with defaults)
-NEXT_PUBLIC_NHOST_AUTH_URL="${NEXT_PUBLIC_NHOST_AUTH_URL:-"http://localhost:1337/v1/auth"}"
-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"}"
+NEXT_PUBLIC_NHOST_ADMIN_SECRET="${NEXT_PUBLIC_NHOST_ADMIN_SECRET:-nhost-admin-secret}"
+NEXT_PUBLIC_NHOST_AUTH_URL="${NEXT_PUBLIC_NHOST_AUTH_URL:-http://localhost:1337/v1/auth}"
+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_ADMIN_SECRET__~${NEXT_PUBLIC_NHOST_ADMIN_SECRET}~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_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" {} +

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

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

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

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

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

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

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

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

dashboard/e2e/database/create-table.test.ts

@@ -0,0 +1,280 @@
+import {
+  TEST_PROJECT_NAME,
+  TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { openProject, prepareTable } from '@/e2e/utils';
+import { faker } from '@faker-js/faker';
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+import { snakeCase } from 'snake-case';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.beforeEach(async () => {
+  await page.goto('/');
+
+  await openProject({
+    page,
+    projectName: TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: TEST_PROJECT_SLUG,
+  });
+
+  await page
+    .getByRole('navigation', { name: /main navigation/i })
+    .getByRole('link', { name: /database/i })
+    .click();
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('should create a simple table', async () => {
+  await page.getByRole('button', { name: /new table/i }).click();
+  await expect(page.getByText(/create a new table/i)).toBeVisible();
+
+  const tableName = snakeCase(faker.lorem.words(3));
+
+  await prepareTable({
+    page,
+    name: tableName,
+    primaryKey: 'id',
+    columns: [
+      { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
+      { name: 'title', type: 'text' },
+    ],
+  });
+
+  // create table
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+  );
+
+  await expect(
+    page.getByRole('link', { name: tableName, exact: true }),
+  ).toBeVisible();
+});
+
+test('should create a table with unique constraints', async () => {
+  await page.getByRole('button', { name: /new table/i }).click();
+  await expect(page.getByText(/create a new table/i)).toBeVisible();
+
+  const tableName = snakeCase(faker.lorem.words(3));
+
+  await prepareTable({
+    page,
+    name: tableName,
+    primaryKey: 'id',
+    columns: [
+      { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
+      { name: 'title', type: 'text', unique: true },
+      { name: 'isbn', type: 'text', unique: true },
+    ],
+  });
+
+  // create table
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+  );
+
+  await expect(
+    page.getByRole('link', { name: tableName, exact: true }),
+  ).toBeVisible();
+});
+
+test('should create a table with nullable columns', async () => {
+  await page.getByRole('button', { name: /new table/i }).click();
+  await expect(page.getByText(/create a new table/i)).toBeVisible();
+
+  const tableName = snakeCase(faker.lorem.words(3));
+
+  await prepareTable({
+    page,
+    name: tableName,
+    primaryKey: 'id',
+    columns: [
+      { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
+      { name: 'title', type: 'text', nullable: true },
+      { name: 'description', type: 'text', nullable: true },
+    ],
+  });
+
+  // create table
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+  );
+
+  await expect(
+    page.getByRole('link', { name: tableName, exact: true }),
+  ).toBeVisible();
+});
+
+test('should create a table with an identity column', async () => {
+  await page.getByRole('button', { name: /new table/i }).click();
+  await expect(page.getByText(/create a new table/i)).toBeVisible();
+
+  const tableName = snakeCase(faker.lorem.words(3));
+
+  await prepareTable({
+    page,
+    name: tableName,
+    primaryKey: 'id',
+    columns: [
+      { name: 'id', type: 'int4' },
+      { name: 'title', type: 'text', nullable: true },
+      { name: 'description', type: 'text', nullable: true },
+    ],
+  });
+
+  await page.getByRole('button', { name: /identity/i }).click();
+  await page.getByRole('option', { name: /id/i }).click();
+
+  // create table
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+  );
+
+  await expect(
+    page.getByRole('link', { name: tableName, exact: true }),
+  ).toBeVisible();
+});
+
+test('should create table with foreign key constraint', async () => {
+  await page.getByRole('button', { name: /new table/i }).click();
+  await expect(page.getByText(/create a new table/i)).toBeVisible();
+
+  const firstTableName = snakeCase(faker.lorem.words(3));
+
+  await prepareTable({
+    page,
+    name: firstTableName,
+    primaryKey: 'id',
+    columns: [
+      { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
+      { name: 'name', type: 'text' },
+    ],
+  });
+
+  // create table
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${firstTableName}`,
+  );
+
+  await page.getByRole('button', { name: /new table/i }).click();
+  await expect(page.getByText(/create a new table/i)).toBeVisible();
+
+  const secondTableName = snakeCase(faker.lorem.words(3));
+
+  await prepareTable({
+    page,
+    name: secondTableName,
+    primaryKey: 'id',
+    columns: [
+      { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
+      { name: 'title', type: 'text' },
+      { name: 'author_id', type: 'uuid' },
+    ],
+  });
+
+  await page.getByRole('button', { name: /add foreign key/i }).click();
+
+  // select column in current table
+  await page
+    .getByRole('button', { name: /column/i })
+    .first()
+    .click();
+  await page.getByRole('option', { name: /author_id/i }).click();
+
+  // select reference schema
+  await page.getByRole('button', { name: /schema/i }).click();
+  await page.getByRole('option', { name: /public/i }).click();
+
+  // select reference table
+  await page.getByRole('button', { name: /table/i }).click();
+  await page.getByRole('option', { name: firstTableName, exact: true }).click();
+
+  // select reference column
+  await page
+    .getByRole('button', { name: /column/i })
+    .nth(1)
+    .click();
+  await page.getByRole('option', { name: /id/i }).click();
+
+  await page.getByRole('button', { name: /add/i }).click();
+
+  await expect(
+    page.getByText(`public.${firstTableName}.id`, { exact: true }),
+  ).toBeVisible();
+
+  // create table
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${secondTableName}`,
+  );
+
+  await expect(
+    page.getByRole('link', { name: secondTableName, exact: true }),
+  ).toBeVisible();
+});
+
+test('should not be able to create a table with a name that already exists', async () => {
+  await page.getByRole('button', { name: /new table/i }).click();
+  await expect(page.getByText(/create a new table/i)).toBeVisible();
+
+  const tableName = snakeCase(faker.lorem.words(3));
+
+  await prepareTable({
+    page,
+    name: tableName,
+    primaryKey: 'id',
+    columns: [
+      { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
+      { name: 'name', type: 'text' },
+    ],
+  });
+
+  // create table
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+  );
+
+  await page.getByRole('button', { name: /new table/i }).click();
+  await expect(page.getByText(/create a new table/i)).toBeVisible();
+
+  await prepareTable({
+    page,
+    name: tableName,
+    primaryKey: 'id',
+    columns: [
+      { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
+      { name: 'title', type: 'text' },
+      { name: 'author_id', type: 'uuid' },
+    ],
+  });
+
+  // create table
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await expect(
+    page.getByText(/error: a table with this name already exists/i),
+  ).toBeVisible();
+});

dashboard/e2e/database/delete-table.test.ts

@@ -0,0 +1,165 @@
+import {
+  TEST_PROJECT_NAME,
+  TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { deleteTable, openProject, prepareTable } from '@/e2e/utils';
+import { faker } from '@faker-js/faker';
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+import { snakeCase } from 'snake-case';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.beforeEach(async () => {
+  await page.goto('/');
+
+  await openProject({
+    page,
+    projectName: TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: TEST_PROJECT_SLUG,
+  });
+
+  await page
+    .getByRole('navigation', { name: /main navigation/i })
+    .getByRole('link', { name: /database/i })
+    .click();
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('should delete a table', async () => {
+  const tableName = snakeCase(faker.lorem.words(3));
+
+  await page.getByRole('button', { name: /new table/i }).click();
+
+  await prepareTable({
+    page,
+    name: tableName,
+    primaryKey: 'id',
+    columns: [
+      { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
+      { name: 'title', type: 'text' },
+    ],
+  });
+
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+  );
+
+  await deleteTable({
+    page,
+    name: tableName,
+  });
+
+  // navigate to next URL
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/**`,
+  );
+
+  await expect(
+    page.getByRole('link', { name: tableName, exact: true }),
+  ).not.toBeVisible();
+});
+
+test('should not be able to delete a table if other tables have foreign keys referencing it', async () => {
+  await page.getByRole('button', { name: /new table/i }).click();
+  await expect(page.getByText(/create a new table/i)).toBeVisible();
+
+  const firstTableName = snakeCase(faker.lorem.words(3));
+
+  await prepareTable({
+    page,
+    name: firstTableName,
+    primaryKey: 'id',
+    columns: [
+      { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
+      { name: 'name', type: 'text' },
+    ],
+  });
+
+  // create table
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${firstTableName}`,
+  );
+
+  await page.getByRole('button', { name: /new table/i }).click();
+  await expect(page.getByText(/create a new table/i)).toBeVisible();
+
+  const secondTableName = snakeCase(faker.lorem.words(3));
+
+  await prepareTable({
+    page,
+    name: secondTableName,
+    primaryKey: 'id',
+    columns: [
+      { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
+      { name: 'title', type: 'text' },
+      { name: 'author_id', type: 'uuid' },
+    ],
+  });
+
+  await page.getByRole('button', { name: /add foreign key/i }).click();
+
+  // select column in current table
+  await page
+    .getByRole('button', { name: /column/i })
+    .first()
+    .click();
+  await page.getByRole('option', { name: /author_id/i }).click();
+
+  // select reference schema
+  await page.getByRole('button', { name: /schema/i }).click();
+  await page.getByRole('option', { name: /public/i }).click();
+
+  // select reference table
+  await page.getByRole('button', { name: /table/i }).click();
+  await page.getByRole('option', { name: firstTableName, exact: true }).click();
+
+  // select reference column
+  await page
+    .getByRole('button', { name: /column/i })
+    .nth(1)
+    .click();
+  await page.getByRole('option', { name: /id/i }).click();
+
+  await page.getByRole('button', { name: /add/i }).click();
+
+  await expect(
+    page.getByText(`public.${firstTableName}.id`, { exact: true }),
+  ).toBeVisible();
+
+  // create table
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${secondTableName}`,
+  );
+
+  await expect(
+    page.getByRole('link', { name: secondTableName, exact: true }),
+  ).toBeVisible();
+
+  // try to delete the first table that is referenced by the second table
+  await deleteTable({
+    page,
+    name: firstTableName,
+  });
+
+  await expect(
+    page.getByText(
+      /constraint [a-zA-Z_]+ on table [a-zA-Z_]+ depends on table [a-zA-Z_]+/i,
+    ),
+  ).toBeVisible();
+});

dashboard/e2e/env.ts

@@ -0,0 +1,48 @@
+import slugify from 'slugify';
+
+/**
+ * URL of the dashboard to test against.
+ */
+export const TEST_DASHBOARD_URL = process.env.NHOST_TEST_DASHBOARD_URL;
+
+/**
+ * Name of the workspace to test against.
+ */
+export const TEST_WORKSPACE_NAME = process.env.NHOST_TEST_WORKSPACE_NAME;
+
+/**
+ * Slugified name of the workspace to test against.
+ */
+export const TEST_WORKSPACE_SLUG = slugify(TEST_WORKSPACE_NAME, {
+  lower: true,
+  strict: true,
+});
+
+/**
+ * Name of the project to test against.
+ */
+export const TEST_PROJECT_NAME = process.env.NHOST_TEST_PROJECT_NAME;
+
+/**
+ * Slugified name of the project to test against.
+ */
+export const TEST_PROJECT_SLUG = slugify(TEST_PROJECT_NAME, {
+  lower: true,
+  strict: true,
+});
+
+/**
+ * Hasura admin secret of the test project to use.
+ */
+export const TEST_PROJECT_ADMIN_SECRET =
+  process.env.NHOST_TEST_PROJECT_ADMIN_SECRET;
+
+/**
+ * Email of the test account to use.
+ */
+export const TEST_USER_EMAIL = process.env.NHOST_TEST_USER_EMAIL;
+
+/**
+ * Password of the test account to use.
+ */
+export const TEST_USER_PASSWORD = process.env.NHOST_TEST_USER_PASSWORD;

dashboard/e2e/overview/overview.test.ts

@@ -0,0 +1,109 @@
+import {
+  TEST_PROJECT_NAME,
+  TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_NAME,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { openProject } from '@/e2e/utils';
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+
+  await page.goto('/');
+  await openProject({
+    page,
+    projectName: TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: TEST_PROJECT_SLUG,
+  });
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('should show a sidebar with menu items', async () => {
+  const navLocator = page.getByRole('navigation', { name: /main navigation/i });
+  await expect(navLocator).toBeVisible();
+  await expect(navLocator.getByRole('list').getByRole('listitem')).toHaveCount(
+    10,
+  );
+  await expect(
+    navLocator.getByRole('link', { name: /overview/i }),
+  ).toBeVisible();
+  await expect(
+    navLocator.getByRole('link', { name: /database/i }),
+  ).toBeVisible();
+  await expect(
+    navLocator.getByRole('link', { name: /graphql/i }),
+  ).toBeVisible();
+  await expect(navLocator.getByRole('link', { name: /hasura/i })).toBeVisible();
+  await expect(navLocator.getByRole('link', { name: /auth/i })).toBeVisible();
+  await expect(
+    navLocator.getByRole('link', { name: /storage/i }),
+  ).toBeVisible();
+  await expect(
+    navLocator.getByRole('link', { name: /deployments/i }),
+  ).toBeVisible();
+  await expect(
+    navLocator.getByRole('link', { name: /backups/i }),
+  ).toBeVisible();
+  await expect(navLocator.getByRole('link', { name: /logs/i })).toBeVisible();
+  await expect(
+    navLocator.getByRole('link', { name: /settings/i }),
+  ).toBeVisible();
+});
+
+test('should show a header with a logo, the workspace name, and the project name', async () => {
+  await expect(
+    page.getByRole('banner').getByRole('link', { name: TEST_WORKSPACE_NAME }),
+  ).toBeVisible();
+
+  await expect(
+    page.getByRole('banner').getByRole('link', { name: TEST_PROJECT_NAME }),
+  ).toBeVisible();
+});
+
+test("should show the project's name, the Upgrade button and the Settings button", async () => {
+  await expect(
+    page.getByRole('heading', { name: TEST_PROJECT_NAME }),
+  ).toBeVisible();
+  await expect(page.getByText(/starter/i)).toBeVisible();
+  await expect(page.getByRole('button', { name: /upgrade/i })).toBeVisible();
+  await expect(
+    page.getByRole('main').getByRole('link', { name: /settings/i }),
+  ).toBeVisible();
+});
+
+test("should show the project's region and subdomain", async () => {
+  await expect(page.locator('p:has-text("Region") + div p').nth(0)).toHaveText(
+    /frankfurt \(eu-central-1\)/i,
+  );
+  await expect(
+    page.locator('p:has-text("Subdomain") + div p').nth(0),
+  ).toHaveText(/[a-z]{20}/i);
+});
+
+test('should not have a GitHub repository connected', async () => {
+  await expect(
+    page.getByRole('button', { name: /connect to github/i }),
+  ).toBeVisible();
+});
+
+test('should show proper limits for the free project', async () => {
+  // Limit for Database
+  await expect(page.getByText(/of 500 MB/i)).toBeVisible();
+
+  // Limit for Storage
+  await expect(page.getByText(/of 1 GB/i)).toBeVisible();
+
+  // Limit for Users
+  await expect(page.getByText(/of 10000/i)).toBeVisible();
+
+  // Limit for Functions
+  await expect(page.getByText(/of 10$/i, { exact: true })).toBeVisible();
+});

dashboard/e2e/setup/auth.setup.ts

@@ -0,0 +1,20 @@
+import {
+  TEST_DASHBOARD_URL,
+  TEST_USER_EMAIL,
+  TEST_USER_PASSWORD,
+} from '@/e2e/env';
+import { test as setup } from '@playwright/test';
+
+setup('authenticate user', async ({ page }) => {
+  await page.goto('/');
+  await page.waitForURL('/signin');
+  await page.getByRole('link', { name: /continue with email/i }).click();
+
+  await page.waitForURL('/signin/email');
+  await page.getByLabel('Email').fill(TEST_USER_EMAIL);
+  await page.getByLabel('Password').fill(TEST_USER_PASSWORD);
+  await page.getByRole('button', { name: /sign in/i }).click();
+
+  await page.waitForURL(TEST_DASHBOARD_URL);
+  await page.context().storageState({ path: 'e2e/.auth/user.json' });
+});

dashboard/e2e/utils.ts

@@ -0,0 +1,189 @@
+import { faker } from '@faker-js/faker';
+import type { Page } from '@playwright/test';
+
+/**
+ * Open a project by navigating to the project's overview page.
+ *
+ * @param page - The Playwright page object.
+ * @param workspaceSlug - The slug of the workspace that contains the project.
+ * @param projectSlug - The slug of the project to open.
+ * @param projectName - The name of the project to open.
+ * @returns A promise that resolves when the project is opened.
+ */
+export async function openProject({
+  page,
+  projectName,
+  workspaceSlug,
+  projectSlug,
+}: {
+  page: Page;
+  workspaceSlug: string;
+  projectSlug: string;
+  projectName: string;
+}) {
+  await page.getByRole('link', { name: projectName }).click();
+  await page.waitForURL(`/${workspaceSlug}/${projectSlug}`);
+}
+
+/**
+ * Prepares a table by filling out the form.
+ *
+ * @param page - The Playwright page object.
+ * @param name - The name of the table to create.
+ * @param columns - The columns to create in the table.
+ * @returns A promise that resolves when the table is prepared.
+ */
+export async function prepareTable({
+  page,
+  name: tableName,
+  primaryKey,
+  columns,
+}: {
+  page: Page;
+  name: string;
+  primaryKey: string;
+  columns: Array<{
+    name: string;
+    type: string;
+    nullable?: boolean;
+    unique?: boolean;
+    defaultValue?: string;
+  }>;
+}) {
+  if (!columns.some(({ name }) => name === primaryKey)) {
+    throw new Error('Primary key must be one of the columns.');
+  }
+
+  await page.getByRole('textbox', { name: /name/i }).first().fill(tableName);
+
+  await Promise.all(
+    columns.map(
+      async (
+        { name: columnName, type, nullable, unique, defaultValue },
+        index,
+      ) => {
+        // set name
+        await page.getByPlaceholder(/name/i).nth(index).fill(columnName);
+
+        // set type
+        await page
+          .getByRole('table')
+          .getByRole('combobox', { name: /type/i })
+          .nth(index)
+          .type(type);
+        await page
+          .getByRole('table')
+          .getByRole('option', { name: type })
+          .first()
+          .click();
+
+        // optionally set default value
+        if (defaultValue) {
+          await page
+            .getByRole('table')
+            .getByRole('combobox', { name: /default value/i })
+            .nth(index)
+            .type(defaultValue);
+          await page
+            .getByRole('table')
+            .getByRole('option', { name: defaultValue })
+            .first()
+            .click();
+        }
+
+        // optionally check unique
+        if (unique) {
+          await page
+            .getByRole('checkbox', { name: /unique/i })
+            .nth(index)
+            .check();
+        }
+
+        // optionally check nullable
+        if (nullable) {
+          await page
+            .getByRole('checkbox', { name: /nullable/i })
+            .nth(index)
+            .check();
+        }
+
+        // add new column if not last
+        if (index < columns.length - 1) {
+          await page.getByRole('button', { name: /add column/i }).click();
+        }
+      },
+    ),
+  );
+
+  // select the first column as primary key
+  await page.getByRole('button', { name: /primary key/i }).click();
+  await page.getByRole('option', { name: primaryKey, exact: true }).click();
+}
+
+/**
+ * Deletes a table with the given name.
+ *
+ * @param page - The Playwright page object.
+ * @param name - The name of the table to delete.
+ * @returns A promise that resolves when the table is deleted.
+ */
+export async function deleteTable({
+  page,
+  name,
+}: {
+  page: Page;
+  name: string;
+}) {
+  const tableLink = page.getByRole('link', {
+    name,
+    exact: true,
+  });
+
+  await tableLink.hover();
+  await page
+    .getByRole('listitem')
+    .filter({ hasText: name })
+    .getByRole('button')
+    .click();
+
+  await page.getByRole('menuitem', { name: /delete table/i }).click();
+  await page.getByRole('button', { name: /delete/i }).click();
+}
+
+/**
+ * Creates a new user.
+ *
+ * @param page - The Playwright page object.
+ * @param email - The email of the user to create.
+ * @param password - The password of the user to create.
+ * @returns A promise that resolves when the user is created.
+ */
+export async function createUser({
+  page,
+  email,
+  password,
+}: {
+  page: Page;
+  email: string;
+  password: string;
+}) {
+  await page
+    .getByRole('button', { name: /create user/i })
+    .first()
+    .click();
+
+  await page.getByRole('textbox', { name: /email/i }).fill(email);
+  await page.getByRole('textbox', { name: /password/i }).fill(password);
+  await page.getByRole('button', { name: /create/i, exact: true }).click();
+}
+
+/**
+ * Generates a test email address with the given prefix (if provided).
+ *
+ * @param prefix - The prefix to use for the email address. (Default: `Nhost_Test_`)
+ */
+export function generateTestEmail(prefix: string = 'Nhost_Test_') {
+  const email = faker.internet.email();
+
+  return [prefix, email].join('');
+}

dashboard/global-teardown.ts

@@ -0,0 +1,66 @@
+import {
+  TEST_DASHBOARD_URL,
+  TEST_PROJECT_ADMIN_SECRET,
+  TEST_PROJECT_NAME,
+  TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { openProject } from '@/e2e/utils';
+import { chromium } from '@playwright/test';
+
+async function globalTeardown() {
+  const browser = await chromium.launch();
+
+  const context = await browser.newContext({
+    baseURL: TEST_DASHBOARD_URL,
+    storageState: 'e2e/.auth/user.json',
+  });
+
+  const page = await context.newPage();
+
+  await page.goto('/');
+
+  await openProject({
+    page,
+    projectName: TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: TEST_PROJECT_SLUG,
+  });
+
+  const pagePromise = context.waitForEvent('page');
+
+  await page.getByRole('link', { name: /hasura/i }).click();
+  await page.getByRole('link', { name: /open hasura/i }).click();
+
+  const hasuraPage = await pagePromise;
+  await hasuraPage.waitForLoadState();
+
+  const adminSecretInput = hasuraPage.getByPlaceholder(/enter admin-secret/i);
+
+  // note: a more ideal way would be to paste from clipboard, but Playwright
+  // doesn't support that yet
+  await adminSecretInput.fill(TEST_PROJECT_ADMIN_SECRET);
+  await adminSecretInput.press('Enter');
+
+  // note: getByRole doesn't work here
+  await hasuraPage.locator('a', { hasText: /data/i }).click();
+  await hasuraPage.getByRole('link', { name: /sql/i }).click();
+
+  await hasuraPage.getByRole('textbox').fill(`
+DO $$ DECLARE
+  tablename text;
+BEGIN
+  FOR tablename IN
+    SELECT table_name FROM information_schema.tables
+    WHERE table_schema = 'public'
+  LOOP
+    EXECUTE 'DROP TABLE IF EXISTS public.' || quote_ident(tablename) || ' CASCADE';
+  END LOOP;
+END $$;
+`);
+
+  await hasuraPage.getByRole('button', { name: /run!/i }).click();
+  await hasuraPage.getByText(/sql executed!/i).waitFor();
+}
+
+export default globalTeardown;

dashboard/graphql.config.yaml

@@ -1,5 +1,5 @@
 schema:
-  - http://localhost:1337/v1/graphql:
+  - https://local.graphql.nhost.run/v1:
       headers:
         x-hasura-admin-secret: nhost-admin-secret
 generates:

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.13.0",
+  "version": "0.14.2",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -14,10 +14,11 @@
     "nhost:dev": "nhost dev -d",
     "format": "prettier --write \"src/**/*.{js,ts,tsx,jsx,json,md}\" --plugin-search-dir=.",
     "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "e2e": "npx playwright@1.31.2 install --with-deps && playwright test"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.3",
+    "@apollo/client": "^3.7.10",
     "@codemirror/language": "^6.3.0",
     "@emotion/cache": "^11.10.5",
     "@emotion/react": "^11.10.5",
@@ -25,11 +26,11 @@
     "@emotion/styled": "^11.10.5",
     "@fontsource/inter": "^4.5.14",
     "@fontsource/roboto-mono": "^4.5.8",
-    "@graphiql/react": "^0.15.0",
-    "@graphiql/toolkit": "^0.8.0",
+    "@graphiql/react": "^0.17.0",
+    "@graphiql/toolkit": "^0.8.2",
     "@headlessui/react": "^1.6.5",
     "@heroicons/react": "^1.0.6",
-    "@hookform/resolvers": "^2.9.10",
+    "@hookform/resolvers": "^3.0.0",
     "@mui/base": "^5.0.0-alpha.106",
     "@mui/material": "^5.10.14",
     "@mui/system": "^5.10.14",
@@ -37,7 +38,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 +49,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",
@@ -62,7 +63,7 @@
     "prettysize": "^2.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-error-boundary": "^3.1.4",
+    "react-error-boundary": "^4.0.0",
     "react-hook-form": "^7.42.1",
     "react-hot-toast": "^2.4.0",
     "react-is": "18.2.0",
@@ -70,23 +71,25 @@
     "react-merge-refs": "^1.1.0",
     "react-syntax-highlighter": "^15.4.5",
     "react-table": "^7.8.0",
-    "sharp": "^0.31.2",
+    "sharp": "^0.32.0",
     "slugify": "^1.6.5",
     "stripe": "^10.17.0",
     "tailwind-merge": "^1.8.0",
     "utility-types": "^3.10.0",
     "validator": "^13.7.0",
-    "yup": "^0.32.11",
+    "yup": "^1.0.2",
     "yup-password": "^0.2.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.2",
+    "@faker-js/faker": "^7.6.0",
     "@graphql-codegen/cli": "^3.0.0",
     "@graphql-codegen/typescript": "^3.0.0",
     "@graphql-codegen/typescript-graphql-request": "^4.5.1",
     "@graphql-codegen/typescript-operations": "^3.0.0",
     "@graphql-codegen/typescript-react-apollo": "^3.3.1",
     "@next/bundle-analyzer": "^12.3.1",
+    "@playwright/test": "^1.31.2",
     "@storybook/addon-actions": "^6.5.14",
     "@storybook/addon-essentials": "^6.5.14",
     "@storybook/addon-interactions": "^6.5.14",
@@ -103,7 +106,7 @@
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^16.11.7",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "18.0.28",
+    "@types/react": "18.0.32",
     "@types/react-dom": "18.0.11",
     "@types/react-table": "^7.7.12",
     "@types/testing-library__jest-dom": "^5.14.5",
@@ -116,6 +119,7 @@
     "babel-loader": "^8.3.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "csstype": "^3.0.10",
+    "dotenv": "^16.0.3",
     "encoding": "^0.1.13",
     "eslint": "^8.28.0",
     "eslint-config-airbnb": "19.0.4",
@@ -137,6 +141,7 @@
     "prettier-plugin-tailwindcss": "^0.2.0",
     "react-date-fns-hooks": "^0.9.4",
     "require-from-string": "^2.0.2",
+    "snake-case": "^3.0.4",
     "storybook-addon-next-router": "^4.0.1",
     "tailwindcss": "^3.1.2",
     "ts-node": "^10.9.1",
@@ -161,4 +166,4 @@
   "msw": {
     "workerDirectory": "public"
   }
-}
+}

dashboard/playwright.config.ts

@@ -0,0 +1,38 @@
+import { defineConfig, devices } from '@playwright/test';
+import dotenv from 'dotenv';
+import path from 'path';
+
+dotenv.config({ path: path.resolve(__dirname, '.env.test') });
+
+export default defineConfig({
+  testDir: './e2e',
+  timeout: 30 * 1000,
+  expect: {
+    timeout: 5000,
+  },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  globalTeardown: require.resolve('./global-teardown'),
+  use: {
+    actionTimeout: 0,
+    trace: 'on-first-retry',
+    baseURL: process.env.NHOST_TEST_DASHBOARD_URL,
+  },
+  projects: [
+    {
+      name: 'setup',
+      testMatch: ['**/setup/*.setup.ts'],
+    },
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: 'e2e/.auth/user.json',
+      },
+      dependencies: ['setup'],
+    },
+  ],
+});

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({
-      variables: {
-        appId: currentApplication.id,
-      },
-    });
-    await router.push('/');
-    await client.refetchQueries({
-      include: ['getOneUser'],
-    });
-    triggerToast(`${currentApplication.name} deleted`);
+    try {
+      await toast.promise(
+        deleteApplication({
+          variables: {
+            appId: currentApplication.id,
+          },
+        }),
+        {
+          loading: 'Deleting project...',
+          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 { triggerToast } from '@/utils/toast';
-import { updateOwnCache } from '@/utils/updateOwnCache';
+import { MAX_FREE_PROJECTS } from '@/utils/CONSTANTS';
+import { getToastStyleProps } from '@/utils/settings/settingsConstants';
+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] =
-    useState(false);
-  const [updateApplication, { client }] = useUpdateApplicationMutation();
-  const { id, email } = useUserData();
+  const { id } = 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({
-        variables: {
-          appId: currentApplication.id,
-          app: {
-            desiredState: ApplicationStatus.Live,
+      await toast.promise(
+        unpauseApplication({ variables: { appId: currentApplication.id } }),
+        {
+          loading: 'Starting the project...',
+          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.'
+            );
           },
         },
-      });
-      await updateOwnCache(client);
-      discordAnnounce(
-        `App ${currentApplication.name} (${email}) set to awake.`,
+        getToastStyleProps(),
       );
-      triggerToast(`${currentApplication.name} set to awake.`);
-    } catch (e) {
-      triggerToast(`Error trying to awake ${currentApplication.name}`);
+    } catch {
+      // Note: The toast will handle the error.
     }
   }
+
+  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">
-          {currentApplication.name} is sleeping
-        </Text>
+        <Box className="grid grid-flow-row gap-1">
+          <Text variant="h3" component="h1">
+            {currentApplication.name} is sleeping
+          </Text>
 
-        <Text className="mt-1">
-          Projects on the free plan stop responding to API calls after 7 days of
-          no traffic.
-        </Text>
+          <Text>
+            Starter projects stop responding to API calls after 7 days of
+            inactivity. Upgrade to Pro to avoid autosleep.
+          </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
-          </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
+            Upgrade to Pro
           </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/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(
-                                app.appStates,
-                              )}
+                              state={checkStatusOfTheApplication(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/billing-payment-method/BillingPaymentMethodForm.tsx

@@ -76,7 +76,8 @@ function AddPaymentMethodForm({
 
       if (createPaymentMethodError) {
         throw new Error(
-          createPaymentMethodError.message || 'Unknown error occurred.',
+          createPaymentMethodError.message ||
+            'An unknown error occurred. Please try again.',
         );
       }
 
@@ -90,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
@@ -151,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">
@@ -203,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/dataBrowser/EditPermissionsForm/validationSchemas.ts

@@ -39,17 +39,17 @@ const ruleGroupSchema = Yup.object().shape({
 
 const baseValidationSchema = Yup.object().shape({
   filter: ruleGroupSchema.nullable().required('Please select a filter type.'),
-  columns: Yup.array().of(Yup.string()).nullable(true),
+  columns: Yup.array().of(Yup.string()).nullable(),
 });
 
 const selectValidationSchema = baseValidationSchema.shape({
   limit: Yup.number()
     .label('Limit')
     .min(0, 'Limit must not be negative.')
-    .nullable(true),
-  allowAggregations: Yup.boolean().nullable(true),
-  queryRootFields: Yup.array().of(Yup.string()).nullable(true),
-  subscriptionRootFields: Yup.array().of(Yup.string()).nullable(true),
+    .nullable(),
+  allowAggregations: Yup.boolean().nullable(),
+  queryRootFields: Yup.array().of(Yup.string()).nullable(),
+  subscriptionRootFields: Yup.array().of(Yup.string()).nullable(),
 });
 
 const columnPresetSchema = Yup.object().shape({
@@ -88,17 +88,17 @@ const columnPresetSchema = Yup.object().shape({
 });
 
 const insertValidationSchema = baseValidationSchema.shape({
-  backendOnly: Yup.boolean().nullable(true),
-  columnPresets: Yup.array().of(columnPresetSchema).nullable(true),
+  backendOnly: Yup.boolean().nullable(),
+  columnPresets: Yup.array().of(columnPresetSchema).nullable(),
 });
 
 const updateValidationSchema = baseValidationSchema.shape({
-  backendOnly: Yup.boolean().nullable(true),
-  columnPresets: Yup.array().of(columnPresetSchema).nullable(true),
+  backendOnly: Yup.boolean().nullable(),
+  columnPresets: Yup.array().of(columnPresetSchema).nullable(),
 });
 
 const deleteValidationSchema = baseValidationSchema.shape({
-  columnPresets: Yup.array().of(columnPresetSchema).nullable(true),
+  columnPresets: Yup.array().of(columnPresetSchema).nullable(),
 });
 
 const validationSchemas: Record<DatabaseAction, Yup.ObjectSchema<any>> = {

dashboard/src/components/home/InviteAnnounce.tsx

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

dashboard/src/components/home/Sidebar.tsx

@@ -7,7 +7,7 @@ import Link from 'next/link';
 
 export default function Sidebar() {
   return (
-    <div className="grid grid-flow-row gap-8 mt-2 ml-10 w-full md:grid md:w-workspaceSidebar content-start">
+    <div className="mt-2 grid w-full grid-flow-row content-start gap-8 md:ml-10 md:grid md:w-workspaceSidebar">
       <WorkspaceSection />
       <Resources />
 

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

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

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

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

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

@@ -2,8 +2,9 @@ import { UserDataProvider } from '@/context/workspace1-context';
 import type { Project } from '@/types/application';
 import { ApplicationStatus } from '@/types/application';
 import type { Workspace } from '@/types/workspace';
+import nhostGraphQLLink from '@/utils/msw/mocks/graphql/nhostGraphQLLink';
 import { render, screen, waitForElementToBeRemoved } from '@/utils/testUtils';
-import { graphql, rest } from 'msw';
+import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import { afterAll, beforeAll, vi } from 'vitest';
 import OverviewDeployments from '.';
@@ -73,13 +74,11 @@ const mockWorkspace: Workspace = {
   applications: [mockApplication],
 };
 
-const mockGraphqlLink = graphql.link('http://localhost:1337/v1/graphql');
-
 const server = setupServer(
-  rest.get('http://localhost:1337/v1/graphql', (req, res, ctx) =>
+  rest.get('https://local.graphql.nhost.run/v1', (_req, res, ctx) =>
     res(ctx.status(200)),
   ),
-  mockGraphqlLink.operation(async (req, res, ctx) =>
+  nhostGraphQLLink.operation(async (_req, res, ctx) =>
     res(
       ctx.data({
         deployments: [],
@@ -143,7 +142,7 @@ test('should render an empty state when GitHub is connected, but there are no de
 
 test('should render a list of deployments', async () => {
   server.use(
-    mockGraphqlLink.operation(async (req, res, ctx) => {
+    nhostGraphQLLink.operation(async (req, res, ctx) => {
       const requestPayload = await req.json();
 
       if (requestPayload.operationName === 'ScheduledOrPendingDeploymentsSub') {
@@ -193,7 +192,7 @@ test('should render a list of deployments', async () => {
 
 test('should disable redeployments if a deployment is already in progress', async () => {
   server.use(
-    mockGraphqlLink.operation(async (req, res, ctx) => {
+    nhostGraphQLLink.operation(async (req, res, ctx) => {
       const requestPayload = await req.json();
 
       if (requestPayload.operationName === 'ScheduledOrPendingDeploymentsSub') {

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

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

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

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

dashboard/src/components/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/signInMethods/AppleProviderSettings/AppleProviderSettings.tsx

@@ -24,22 +24,30 @@ import { twMerge } from 'tailwind-merge';
 import * as Yup from 'yup';
 
 const validationSchema = Yup.object({
-  teamId: Yup.string().label('Team ID').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
-  keyId: Yup.string().label('Key ID').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
-  clientId: Yup.string().label('Client ID').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
-  privateKey: Yup.string().label('Private Key').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
+  teamId: Yup.string()
+    .label('Team ID')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  keyId: Yup.string()
+    .label('Key ID')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  clientId: Yup.string()
+    .label('Client ID')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  privateKey: Yup.string()
+    .label('Private Key')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
   enabled: Yup.boolean(),
 });
 

dashboard/src/components/settings/signInMethods/AzureADProviderSettings/AzureADProviderSettings.tsx

@@ -0,0 +1,201 @@
+import Form from '@/components/common/Form';
+import SettingsContainer from '@/components/settings/SettingsContainer';
+import BaseProviderSettings from '@/components/settings/signInMethods/BaseProviderSettings';
+import { useUI } from '@/context/UIContext';
+import {
+  GetSignInMethodsDocument,
+  useGetSignInMethodsQuery,
+  useUpdateConfigMutation,
+} from '@/generated/graphql';
+import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import ActivityIndicator from '@/ui/v2/ActivityIndicator';
+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 generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { copy } from '@/utils/copy';
+import getServerError from '@/utils/settings/getServerError';
+import { getToastStyleProps } from '@/utils/settings/settingsConstants';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { FormProvider, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import { twMerge } from 'tailwind-merge';
+import * as Yup from 'yup';
+
+const validationSchema = Yup.object({
+  clientId: Yup.string()
+    .label('Client ID')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  clientSecret: Yup.string()
+    .label('Client Secret')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  tenant: Yup.string()
+    .label('Tenant')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  enabled: Yup.boolean(),
+});
+
+export type AzureADProviderFormValues = Yup.InferType<typeof validationSchema>;
+
+export default function AzureADProviderSettings() {
+  const { maintenanceActive } = useUI();
+  const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetSignInMethodsDocument],
+  });
+
+  const { data, loading, error } = useGetSignInMethodsQuery({
+    variables: { appId: currentApplication?.id },
+    fetchPolicy: 'cache-only',
+  });
+
+  const { clientId, clientSecret, tenant, enabled } =
+    data?.config?.auth?.method?.oauth?.azuread || {};
+
+  const form = useForm<AzureADProviderFormValues>({
+    reValidateMode: 'onSubmit',
+    defaultValues: {
+      clientId: clientId || '',
+      clientSecret: clientSecret || '',
+      tenant: tenant || '',
+      enabled: enabled || false,
+    },
+    resolver: yupResolver(validationSchema),
+  });
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        delay={1000}
+        label="Loading settings for Azure AD..."
+        className="justify-center"
+      />
+    );
+  }
+
+  if (error) {
+    throw error;
+  }
+
+  const { register, formState, watch } = form;
+  const authEnabled = watch('enabled');
+
+  const handleProviderUpdate = async (values: AzureADProviderFormValues) => {
+    const updateConfigPromise = updateConfig({
+      variables: {
+        appId: currentApplication.id,
+        config: {
+          auth: {
+            method: {
+              oauth: {
+                azuread: values,
+              },
+            },
+          },
+        },
+      },
+    });
+
+    try {
+      await toast.promise(
+        updateConfigPromise,
+        {
+          loading: `Azure AD settings are being updated...`,
+          success: `Azure AD settings have been updated successfully.`,
+          error: getServerError(
+            `An error occurred while trying to update the project's Azure AD settings.`,
+          ),
+        },
+        getToastStyleProps(),
+      );
+
+      form.reset(values);
+    } catch {
+      // Note: The toast will handle the error.
+    }
+  };
+
+  return (
+    <FormProvider {...form}>
+      <Form onSubmit={handleProviderUpdate}>
+        <SettingsContainer
+          title="Azure AD"
+          description="Allow users to sign in with Azure AD."
+          slotProps={{
+            submitButton: {
+              disabled: !formState.isDirty || maintenanceActive,
+              loading: formState.isSubmitting,
+            },
+          }}
+          icon="/assets/brands/azuread.svg"
+          switchId="enabled"
+          showSwitch
+          className={twMerge(
+            'grid grid-flow-row grid-cols-2 gap-y-4 gap-x-3 px-4 py-2',
+            !authEnabled && 'hidden',
+          )}
+        >
+          <BaseProviderSettings providerName="azuread" />
+          <Input
+            {...register('tenant')}
+            name="tenant"
+            id="tenant"
+            label="Tenant ID"
+            placeholder="Tenant ID"
+            className="col-span-2"
+            fullWidth
+            hideEmptyHelperText
+            error={!!formState.errors?.tenant}
+            helperText={formState.errors?.tenant?.message}
+          />
+          <Input
+            name="redirectUrl"
+            id="redirectUrl"
+            defaultValue={`${generateAppServiceUrl(
+              currentApplication.subdomain,
+              currentApplication.region.awsName,
+              'auth',
+            )}/signin/provider/azuread/callback`}
+            className="col-span-2"
+            fullWidth
+            hideEmptyHelperText
+            label="Redirect URL"
+            disabled
+            endAdornment={
+              <InputAdornment position="end" className="absolute right-2">
+                <IconButton
+                  sx={{ minWidth: 0, padding: 0 }}
+                  color="secondary"
+                  variant="borderless"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    copy(
+                      `${generateAppServiceUrl(
+                        currentApplication.subdomain,
+                        currentApplication.region.awsName,
+                        'auth',
+                      )}/signin/provider/azuread/callback`,
+                      'Redirect URL',
+                    );
+                  }}
+                >
+                  <CopyIcon className="h-4 w-4" />
+                </IconButton>
+              </InputAdornment>
+            }
+          />
+        </SettingsContainer>
+      </Form>
+    </FormProvider>
+  );
+}

dashboard/src/components/settings/signInMethods/AzureADProviderSettings/index.ts

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

dashboard/src/components/settings/signInMethods/BaseProviderSettings/BaseProviderSettings.tsx

@@ -3,14 +3,18 @@ import { useFormContext } from 'react-hook-form';
 import * as Yup from 'yup';
 
 export const baseProviderValidationSchema = Yup.object({
-  clientId: Yup.string().label('Client ID').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
-  clientSecret: Yup.string().label('Client Secret').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
+  clientId: Yup.string()
+    .label('Client ID')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  clientSecret: Yup.string()
+    .label('Client Secret')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
   enabled: Yup.bool(),
 });
 

dashboard/src/components/settings/signInMethods/SMSSettings/SMSSettings.tsx

@@ -22,19 +22,23 @@ import { twMerge } from 'tailwind-merge';
 import * as Yup from 'yup';
 
 const validationSchema = Yup.object({
-  accountSid: Yup.string().label('Account SID').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
-  authToken: Yup.string().label('Auth Token').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
+  accountSid: Yup.string()
+    .label('Account SID')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  authToken: Yup.string()
+    .label('Auth Token')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
   messagingServiceId: Yup.string()
     .label('Messaging Service ID')
     .when('enabled', {
       is: true,
-      then: Yup.string().required(),
+      then: (schema) => schema.required(),
     }),
   enabled: Yup.boolean().label('Enabled'),
 });

dashboard/src/components/settings/signInMethods/TwitterProviderSettings/TwitterProviderSettings.tsx

@@ -23,14 +23,18 @@ import { twMerge } from 'tailwind-merge';
 import * as Yup from 'yup';
 
 const validationSchema = Yup.object({
-  consumerSecret: Yup.string().label('Consumer Secret').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
-  consumerKey: Yup.string().label('Consumer Key').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
+  consumerSecret: Yup.string()
+    .label('Consumer Secret')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  consumerKey: Yup.string()
+    .label('Consumer Key')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
   enabled: Yup.boolean(),
 });
 

dashboard/src/components/settings/signInMethods/WorkOsProviderSettings/WorkOsProviderSettings.tsx

@@ -24,22 +24,30 @@ import { twMerge } from 'tailwind-merge';
 import * as Yup from 'yup';
 
 const validationSchema = Yup.object({
-  clientId: Yup.string().label('Client ID').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
-  clientSecret: Yup.string().label('Client Secret').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
-  organization: Yup.string().label('Organization').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
-  connection: Yup.string().label('Connection').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
+  clientId: Yup.string()
+    .label('Client ID')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  clientSecret: Yup.string()
+    .label('Client Secret')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  organization: Yup.string()
+    .label('Organization')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  connection: Yup.string()
+    .label('Connection')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
   enabled: Yup.boolean(),
 });
 

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 ||
-    status === ApplicationStatus.Unpausing
+    state === ApplicationStatus.Empty ||
+    state === ApplicationStatus.Unpausing
   ) {
     return <Chip size="small" label={normalizedTitle} color="warning" />;
   }
 
-  if (
-    status === ApplicationStatus.Errored ||
-    status === ApplicationStatus.Live
-  ) {
+  if (state === ApplicationStatus.Errored || state === ApplicationStatus.Live) {
     return <Chip size="small" label={normalizedTitle} color="success" />;
   }
 

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

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

dashboard/src/components/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/users/CreateUserForm/CreateUserForm.tsx

@@ -32,7 +32,6 @@ export const validationSchema = Yup.object({
     .required('This field is required.'),
   password: Yup.string()
     .label('Users Password')
-    .min(8, 'Password must be at least 8 characters long.')
     .required('This field is required.'),
 });
 
@@ -99,7 +98,7 @@ export default function CreateUserForm({
         }),
         {
           loading: 'Creating user...',
-          success: 'User created successfully.',
+          success: 'User has been created successfully.',
           error: getServerError(
             'An error occurred while trying to create the user.',
           ),
@@ -165,7 +164,7 @@ export default function CreateUserForm({
           </Alert>
         )}
         <div className="grid grid-flow-row gap-2">
-          <Button type="submit" loading={isSubmitting} disabled={isSubmitting}>
+          <Button type="submit" disabled={isSubmitting}>
             Create
           </Button>
 

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

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

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

@@ -151,7 +151,7 @@ export default function UsersBody({ users, onSubmit }: UsersBodyProps) {
       updateUserMutationPromise,
       {
         loading: `Updating user's settings...`,
-        success: 'User settings updated successfully.',
+        success: 'User settings have been updated successfully.',
         error: getServerError(
           `An error occurred while trying to update this user's settings.`,
         ),
@@ -242,7 +242,11 @@ export default function UsersBody({ users, onSubmit }: UsersBodyProps) {
             secondaryAction={
               <Dropdown.Root>
                 <Dropdown.Trigger asChild hideChevron>
-                  <IconButton variant="borderless" color="secondary">
+                  <IconButton
+                    variant="borderless"
+                    color="secondary"
+                    aria-label={`More options for ${user.displayName}`}
+                  >
                     <DotsHorizontalIcon />
                   </IconButton>
                 </Dropdown.Trigger>
@@ -282,6 +286,7 @@ export default function UsersBody({ users, onSubmit }: UsersBodyProps) {
             <ListItem.Button
               className="grid h-full w-full grid-cols-1 py-2.5 lg:grid-cols-6"
               onClick={() => handleViewUser(user)}
+              aria-label={`View ${user.displayName}`}
             >
               <div className="col-span-2 grid grid-flow-col place-content-start gap-4">
                 <Avatar

dashboard/src/components/workspace/WorkspaceApps.tsx

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

dashboard/src/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">
-        <Text className="font-medium text-lg">Invoices</Text>
+      <div className="mx-auto grid max-w-3xl grid-flow-row justify-start gap-2 font-display">
+        <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/getWorkspaceAndProject.graphql

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

dashboard/src/gql/app/pauseApplication.graphql

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

dashboard/src/gql/app/settings/signInMethods/getSignInMethods.graphql

@@ -100,6 +100,12 @@ query GetSignInMethods($appId: uuid!) {
             connection
             organization
           }
+          azuread {
+            enabled
+            clientId
+            clientSecret
+            tenant
+          }
         }
       }
     }

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/fragments/project.gql

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

dashboard/src/gql/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/gql/user/getOneUser.gql

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

dashboard/src/hooks/useCheckProvisioning.tsx

@@ -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,12 +33,14 @@ export function useCheckProvisioning() {
 
   async function updateOwnCache() {
     await client.refetchQueries({
-      include: ['getOneUser'],
+      include: [GetOneUserDocument],
     });
   }
 
   const memoizedUpdateCache = useCallback(updateOwnCache, [client]);
 
+  const currentApplicationId = currentApplication?.id;
+
   useEffect(() => {
     startPolling(2000);
   }, [startPolling]);
@@ -81,7 +86,7 @@ export function useCheckProvisioning() {
         createdAt: data.app.appStates[0].createdAt,
       });
       discordAnnounce(
-        `Application ${currentApplication.id} errored after provisioning: ${data.app.appStates[0].message}`,
+        `Application ${currentApplicationId} errored after provisioning: ${data.app.appStates[0].message}`,
       );
       stopPolling();
       memoizedUpdateCache();
@@ -90,7 +95,7 @@ export function useCheckProvisioning() {
     data,
     stopPolling,
     memoizedUpdateCache,
-    currentApplication.id,
+    currentApplicationId,
     currentApplicationState.state,
   ]);
 

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/v2/useCurrentWorkspaceAndProject/index.ts

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

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

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

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

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

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

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

dashboard/src/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 [updateApp] = useUpdateAppMutation();
+  const { openDialog, openAlertDialog, closeDialog } = useDialog();
+  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]/settings/sign-in-methods/index.tsx

@@ -2,6 +2,7 @@ import Container from '@/components/layout/Container';
 import SettingsLayout from '@/components/settings/SettingsLayout';
 import AnonymousSignInSettings from '@/components/settings/signInMethods/AnonymousSignInSettings';
 import AppleProviderSettings from '@/components/settings/signInMethods/AppleProviderSettings';
+import AzureADProviderSettings from '@/components/settings/signInMethods/AzureADProviderSettings';
 import DiscordProviderSettings from '@/components/settings/signInMethods/DiscordProviderSettings';
 import EmailAndPasswordSettings from '@/components/settings/signInMethods/EmailAndPasswordSettings';
 import FacebookProviderSettings from '@/components/settings/signInMethods/FacebookProviderSettings';
@@ -56,6 +57,7 @@ export default function SettingsSignInMethodsPage() {
       <SMSSettings />
       {!currentApplication.providersUpdated && <ProvidersUpdatedAlert />}
       <AppleProviderSettings />
+      <AzureADProviderSettings />
       <DiscordProviderSettings />
       <FacebookProviderSettings />
       <GitHubProviderSettings />

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 { nhost } from '@/utils/nhost';
+import { getCurrentEnvironment } from '@/utils/helpers';
 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
-    // https://www.rfc-editor.org/rfc/rfc1034#section-3.1
-    // subdomain max length is 63 characters
-    // const subdomain = `${slug}-${workspaceSlug}`.substring(0, 63);
+    const slug = slugify(name, { lower: true, strict: true });
 
     try {
-      if (isK8SPostgresEnabledInCurrentEnvironment) {
-        await insertApp({
+      await toast.promise(
+        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({
-          variables: {
-            app: {
-              name,
-              slug,
-              planId: plan.id,
-              workspaceId: selectedWorkspace.id,
-              regionId: selectedRegion.id,
-            },
-          },
-        });
-      }
+        }),
+        {
+          loading: 'Creating the project...',
+          success: 'The project has been created 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 || {};
 
-      triggerToast(`New project ${name} created`);
-    } catch (error) {
-      discordAnnounce(
-        `Error creating project: ${error.message}. (${user.email})`,
+            // we use the default Apollo error message if we can't find the
+            // internal error message
+            return (
+              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">
-        <Text variant="h2" component="h1">
-          New Project
-        </Text>
+      <form onSubmit={handleSubmit}>
+        <div className="mx-auto grid max-w-[760px] grid-flow-row gap-4 py-6 sm:py-14">
+          <Text variant="h2" component="h1">
+            New Project
+          </Text>
 
-        <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 && (
+          <div className="grid grid-flow-row gap-4">
             <Input
-              name="databasePassword"
-              id="databasePassword"
-              autoComplete="new-password"
-              label="Database Password"
-              value={databasePassword}
+              id="name"
+              autoComplete="off"
+              label="Project Name"
               variant="inline"
-              type="password"
-              error={!!passwordError}
+              fullWidth
               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>
-                  )}
-
-                  <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();
+              placeholder="Project Name"
+              onChange={(event) => {
                 setSubmitState({
                   error: null,
                   loading: false,
                 });
-                if (e.target.value.length === 0) {
-                  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);
-                }
+                setName(event.target.value);
               }}
-              fullWidth
+              value={name}
+              autoFocus
             />
-          )}
 
-          <Select
-            id="region"
-            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);
-              setPlan(plans[0]);
-              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 (
-                <span className="inline-grid grid-flow-col grid-rows-none items-center gap-x-2">
-                  {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}
-                  />
+            <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>
 
-                <Text className="row-span-1 font-medium">{option.name}</Text>
+                  {option.name}
+                </Option>
+              ))}
+            </Select>
 
-                <Text variant="subtitle2" className="row-span-1">
-                  {option.country}
-                </Text>
+            {isK8SPostgresEnabledInCurrentEnvironment && (
+              <Input
+                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 && (
-                  <Text
-                    variant="subtitle2"
-                    className="absolute top-1/2 right-4 -translate-y-1/2"
-                  >
-                    Disabled
-                  </Text>
-                )}
-              </Option>
-            ))}
-          </Select>
+                    <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,
+                  });
+                  setDatabasePassword(e.target.value);
 
-          <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>
+                  try {
+                    await resetDatabasePasswordValidationSchema.validate({
+                      databasePassword: e.target.value,
+                    });
+                    setPasswordError('');
+                  } catch (validationError) {
+                    setPasswordError(validationError.message);
+                  }
+                }}
+                fullWidth
+              />
+            )}
 
-            <div className="col-span-8 sm:col-span-6">
-              {plans.map((currentPlan) => {
-                const checked = plan.id === currentPlan.id;
+            <Select
+              id="region"
+              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
-                    className="border-t py-4 last-of-type:border-b"
-                    key={currentPlan.id}
-                  >
-                    <Checkbox
-                      label={
-                        <>
-                          <span className="inline-block max-w-xs">
-                            <span className="font-medium">
-                              {currentPlan.name}:
-                            </span>{' '}
-                            {planDescriptions[currentPlan.name]}
-                          </span>
+                  <span className="inline-grid grid-flow-col grid-rows-none items-center gap-x-2">
+                    {flag}
 
-                          {currentPlan.isFree ? (
-                            <Text variant="h3" component="span">
-                              Free
-                            </Text>
-                          ) : (
-                            <Text
-                              variant="h3"
-                              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>
+                    {isValidElement<TextProps>(country)
+                      ? cloneElement(country, {
+                          ...country.props,
+                          variant: 'body1',
+                        })
+                      : null}
+                  </span>
                 );
-              })}
-            </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}
-              />
-            </Modal>
-          )}
+              >
+                <BillingPaymentMethodForm
+                  close={() => {
+                    setShowPaymentModal(false);
+                  }}
+                  onPaymentMethodAdded={handleSubmit}
+                  workspaceId={workspace.id}
+                />
+              </Modal>
+            )}
 
-          <Button
-            onClick={() => {
-              if (!plan.isFree && workspace.paymentMethods.length === 0) {
-                setShowPaymentModal(true);
-
-                return;
-              }
-
-              handleSubmit();
-            }}
-            type="submit"
-            loading={submitState.loading}
-            disabled={
-              !!applicationError ||
-              !!submitState.error ||
-              !!passwordError ||
-              maintenanceActive
-            }
-            id="create-app"
-          >
-            Create Project
-          </Button>
+            <Button
+              type="submit"
+              loading={submitState.loading}
+              disabled={!!passwordError || maintenanceActive}
+              id="create-app"
+            >
+              Create Project
+            </Button>
+          </div>
         </div>
-      </div>
+      </form>
     </Container>
   );
 }
 
 export default function NewProjectPage() {
-  const { data, loading, error } = usePrefetchNewAppQuery();
   const router = useRouter();
+  const user = useUserData();
 
-  if (error) {
-    throw error;
+  const { data, loading, error } = usePrefetchNewAppQuery();
+
+  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/types/application.ts

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

dashboard/src/utils/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/dataBrowser/validationSchemaHelpers/validationSchemaHelpers.ts

@@ -7,7 +7,7 @@ export interface ColumnDetails {
   hasDefaultValue: boolean;
 }
 
-function createGenericValidationSchema<T extends yup.BaseSchema>(
+function createGenericValidationSchema<T extends yup.Schema>(
   genericSchema: T,
   { isNullable, hasDefaultValue, isIdentity }: ColumnDetails,
 ): T {
@@ -136,7 +136,10 @@ export function createDynamicValidationSchema(
       };
     }
 
-    if (column.type === 'text' && column.specificType === 'jsonb') {
+    if (
+      column.type === 'text' &&
+      (column.specificType === 'jsonb' || column.specificType === 'json')
+    ) {
       return {
         ...schema,
         [column.id]: createJSONValidationSchema(details),

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/msw/mocks/graphql/nhostGraphQLLink.ts

@@ -1,5 +1,5 @@
 import { graphql } from 'msw';
 
-const nhostGraphQLLink = graphql.link('http://localhost:1337/v1/graphql');
+const nhostGraphQLLink = graphql.link('https://local.graphql.nhost.run/v1');
 
 export default nhostGraphQLLink;

dashboard/src/utils/testUtils.tsx

@@ -79,7 +79,7 @@ function Providers({ children }: PropsWithChildren<{}>) {
               <NhostApolloProvider
                 nhost={nhost}
                 link={createHttpLink({
-                  uri: 'http://localhost:1337/v1/graphql',
+                  uri: 'https://local.graphql.nhost.run/v1',
                 })}
               >
                 <WorkspaceProvider>

dashboard/tsconfig.json

@@ -19,6 +19,7 @@
     "baseUrl": "./src",
     "useUnknownInCatchVariables": false,
     "paths": {
+      "@/e2e/*": ["../e2e/*"],
       "@/components/*": ["components/*"],
       "@/hooks/*": ["hooks/*"],
       "@/utils/*": ["utils/*"],

dashboard/tsconfig.test.json

@@ -4,6 +4,7 @@
     "jsx": "react-jsx",
     "types": ["vitest/globals"],
     "paths": {
+      "@/e2e/*": ["../e2e/*"],
       "@/components/*": ["components/*"],
       "@/hooks/*": ["hooks/*"],
       "@/utils/*": ["utils/*"],

dashboard/vitest.config.ts

@@ -10,5 +10,6 @@ export default defineConfig({
     environment: 'jsdom',
     globals: true,
     setupFiles: 'src/setupTests.ts',
+    include: ['src/**/*.(spec|test).{js,jsx,ts,tsx}'],
   },
 });

docs/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nhost/docs
 
+## 0.0.15
+
+### Patch Changes
+
+- 0795d1c6: chore: add link to event triggers on the serverless functions page
+
+## 0.0.14
+
+### Patch Changes
+
+- bfb4c1a6: fix(docs): restore autogenerated `@nhost/nhost-js` docs
+
 ## 0.0.13
 
 ### Patch Changes

docs/docs/authentication/sign-in-methods/4-google.mdx

@@ -56,6 +56,7 @@ Follow this guide to sign in users with Google.
 - Click on **Credentials** under **APIs & Services** in the left menu.
 - Click **+ CREATE CREDENTIALS** and then **OAuth client ID** in the top menu.
 - On the **Create OAuth client ID** page for **Application Type** select **Web application**.
+- Under **Authorized JavaScript origins**, add your project's redirect URL for the Google sign-in method in the following format: `https://<subdomain>.auth.<region>.nhost.run`
 - Under **Authorized redirect URIs** add your **OAuth Callback URL** from Nhost.
 - Click **CREATE**.
 

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/docs/serverless-functions.mdx

@@ -31,11 +31,11 @@ export default (req: Request, res: Response) => {
 To get the `Request`, and `Response` types you can install the `@types/express` package.
 
 ```bash
-npm install -d @types/express
+npm install -D @types/express
 # or yarn
-yarn add -d @types/express
+yarn add -D @types/express
 # or pnpm
-pnpm add -d @types/express
+pnpm add -D @types/express
 ```
 
 :::
@@ -84,6 +84,8 @@ older (`functions/_utils/<utils-files>.js`).
 
 [Environment variables](/platform/environment-variables) are available inside your Serverless Functions. Both in production and when running Nhost locally using the [Nhost CLI](/cli).
 
+The same [environment variables that are used to configure event triggers](https://docs.nhost.io/database/event-triggers#format) can be used to authenticate regular serverless functions.
+
 ## Examples
 
 We have multiple examples of Serverless Functions in our [Nhost repository](https://github.com/nhost/nhost/tree/main/examples/serverless-functions/functions).