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

chore: update versions

.github/CODEOWNERS

@@ -1,14 +1,14 @@
 # Documentation
 # https://help.github.com/en/articles/about-code-owners
 
-/packages                                @plmercereau @szilarddoro
+/packages                                @szilarddoro
 /packages/docgen                         @szilarddoro
 /integrations/stripe-graphql-js          @elitan
-/.github                                 @plmercereau
-/dashboard/                              @szilarddoro @guicurcio
-/docs/                                   @guicurcio @elitan
-/config/                                 @plmercereau @szilarddoro
-/examples/                               @plmercereau
-/examples/codegen-react-apollo           @elitan @plmercereau
-/examples/codegen-react-query            @elitan @plmercereau
-/examples/react-apollo-crm               @elitan @plmercereau
+/.github                                 @szilarddoro
+/dashboard/                              @szilarddoro
+/docs/                                   @elitan
+/config/                                 @szilarddoro
+/examples/                               @szilarddoro
+/examples/codegen-react-apollo           @elitan @szilarddoro
+/examples/codegen-react-query            @elitan @szilarddoro
+/examples/react-apollo-crm               @elitan @szilarddoro

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

@@ -40,14 +40,14 @@ runs:
     - shell: bash
       name: Build packages
       if: ${{ inputs.BUILD == 'all' }}
-      run: pnpm build:all
+      run: pnpm run build:all
       env:
         TURBO_TOKEN: ${{ inputs.TURBO_TOKEN }}
         TURBO_TEAM: ${{ inputs.TURBO_TEAM }}
     - shell: bash
       name: Build everything in the monorepo
       if: ${{ inputs.BUILD == 'default' }}
-      run: pnpm build
+      run: pnpm run build
       env:
         TURBO_TOKEN: ${{ inputs.TURBO_TOKEN }}
         TURBO_TEAM: ${{ inputs.TURBO_TEAM }}

.github/workflows/changesets.yaml

@@ -98,7 +98,7 @@ jobs:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Build and push to Docker Hub
-        uses: docker/build-push-action@v3
+        uses: docker/build-push-action@v4
         timeout-minutes: 60
         with:
           context: .

.github/workflows/ci.yaml

@@ -8,7 +8,6 @@ on:
       - '**.md'
       - 'LICENSE'
   pull_request:
-    branches: [main]
     types: [opened, synchronize]
     paths-ignore:
       - 'assets/**'
@@ -56,7 +55,7 @@ jobs:
             | xargs -I@ realpath --relative-to=$PWD @ \
             | xargs -I@ jq "if (.scripts.e2e | length) != 0  then {name: .name, path: \"@\"} else null end" @/package.json \
             | awk "!/null/" \
-            | jq -c --slurp)
+            | jq -c --slurp 'map(select(length > 0))')
           echo "matrix=$PACKAGES" >> $GITHUB_OUTPUT
     outputs:
       matrix: ${{ steps.set-matrix.outputs.matrix }}

.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/tsconfig.base.json

@@ -45,6 +45,9 @@
       "@nhost/docgen": [
         "../packages/docgen/src/index.ts"
       ],
+      "@nhost/graphql-js": [
+        "../packages/graphql-js/src/index.ts"
+      ],
       "@nhost/hasura-auth-js": [
         "../packages/hasura-auth-js/src/index.ts"
       ],

config/vite.lib.config.js

@@ -1,7 +1,6 @@
 import replace from '@rollup/plugin-replace'
 import fs from 'fs'
 import path from 'path'
-
 import { defineConfig } from 'vite'
 import dts from 'vite-plugin-dts'
 import tsconfigPaths from 'vite-tsconfig-paths'
@@ -21,7 +20,9 @@ export default defineConfig({
       exclude: ['**/*.spec.ts', '**/*.test.ts', '**/tests/**'],
       entryRoot: 'src',
       // Was defaulting to true until version 1.7
-      skipDiagnostics: true
+      skipDiagnostics: true,
+      // Was defaulting to true until version 2.0
+      copyDtsFiles: true
     })
   ],
   test: {
@@ -61,7 +62,6 @@ export default defineConfig({
           '@apollo/client/utilities': '@apollo/client/utilities',
           'graphql-ws': 'graphql-ws',
           xstate: 'xstate',
-          axios: 'axios',
           'js-cookie': 'Cookies',
           react: 'React',
           'react-dom': 'ReactDOM',

dashboard/.env.example

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

dashboard/.eslintrc.js

@@ -30,6 +30,7 @@ module.exports = {
       'error',
       { ignoreTypeReferences: true },
     ],
+    'no-console': ['warn', { allow: ['error'] }],
     'no-shadow': 'off',
     '@typescript-eslint/no-shadow': 'error',
     'no-unused-vars': 'off',

dashboard/CHANGELOG.md

@@ -1,5 +1,162 @@
 # @nhost/dashboard
 
+## 0.13.3
+
+### Patch Changes
+
+- bfb4c1a6: chore(dashboard): remove `useAxios` property
+- d8d8394b: Dashboard: allow to override hasura admin secret in docker
+- Updated dependencies [ce1ee40d]
+  - @nhost/nextjs@1.13.16
+  - @nhost/react-apollo@5.0.11
+
+## 0.13.2
+
+### Patch Changes
+
+- beed2eba: Fix docker entrypoint for dashboard
+- 2c8559a3: fix(dashboard): refresh project list after deleting a project
+- 4329d048: chore(dashboard): bump `graphiql` dependencies
+
+## 0.13.1
+
+### Patch Changes
+
+- cbb1fc5b: chore(dashboard): cleanup GraphQL operations
+
+## 0.13.0
+
+### Minor Changes
+
+- 088584e7: feat(dashboard): add support for custom local subdomains
+
+### Patch Changes
+
+- 2ac90dfd: fix(dashboard): improve mobile responsive layout
+- Updated dependencies [f375eacc]
+  - @nhost/nextjs@1.13.15
+  - @nhost/react-apollo@5.0.10
+
+## 0.12.4
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.9
+- @nhost/nextjs@1.13.14
+
+## 0.12.3
+
+### Patch Changes
+
+- 2b1338f7: chore(dashboard): bump `turbo` to 1.8.3
+- 5223ee93: fix(dashboard): show correct deployment status on the main page
+- 850a049c: chore(deps): update docker/build-push-action action to v4
+- Updated dependencies [850a049c]
+  - @nhost/nextjs@1.13.13
+  - @nhost/react-apollo@5.0.8
+
+## 0.12.2
+
+### Patch Changes
+
+- 4bf40995: chore(deps): bump `typescript` to `4.9.5`
+- 8bb097c9: chore(deps): bump `vitest`
+- 35d52aab: chore(deps): replace `cross-fetch` with `isomorphic-unfetch`
+- Updated dependencies [4bf40995]
+- Updated dependencies [8bb097c9]
+- Updated dependencies [35d52aab]
+  - @nhost/react-apollo@5.0.7
+  - @nhost/nextjs@1.13.12
+
+## 0.12.1
+
+### Patch Changes
+
+- c96d7ccd: fix(dashboard): fix docker builds
+
+## 0.12.0
+
+### Minor Changes
+
+- d1671210: feat(dashboard): use mimir to manage project configuration
+
+### Patch Changes
+
+- f65e4de9: chore(deps): bump @graphql-codegen monorepo to v3
+
+## 0.11.20
+
+### Patch Changes
+
+- 4b4f0d01: chore(dashboard): improve dialog management
+
+## 0.11.19
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.6
+- @nhost/nextjs@1.13.11
+
+## 0.11.18
+
+### Patch Changes
+
+- 01318860: fix(nhost-js): use correct URL for functions requests
+- Updated dependencies [01318860]
+  - @nhost/react-apollo@5.0.5
+  - @nhost/nextjs@1.13.10
+
+## 0.11.17
+
+### Patch Changes
+
+- f673adea: fix(dashboard): set correct Content-Type for user creation
+- 445d8ef4: chore(deps): bump `@nhost/react-apollo` to 5.0.4
+- 445d8ef4: chore(deps): bump `@nhost/nextjs` to 1.13.9
+- 0368663d: fix(dashboard): allow permission editing for auth and storage schemas
+- Updated dependencies [445d8ef4]
+- Updated dependencies [445d8ef4]
+  - @nhost/react-apollo@5.0.4
+  - @nhost/nextjs@1.13.9
+
+## 0.11.16
+
+### Patch Changes
+
+- b755e908: fix(dashboard): use correct date for last seen
+- 2d9145f9: chore(deps): revert GraphQL client
+- 1ddf704c: fix(dashboard): don't show false positive message for failed user creation
+  - @nhost/react-apollo@5.0.3
+  - @nhost/nextjs@1.13.8
+
+## 0.11.15
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.2
+- @nhost/nextjs@1.13.7
+
+## 0.11.14
+
+### Patch Changes
+
+- 2cc18dcb: fix(dashboard): prevent permission editor dropdown from being always open
+
+## 0.11.13
+
+### Patch Changes
+
+- 3343a363: chore(dashboard): bump `@testing-library/react` to v14 and `@testing-library/dom` to v9
+  - @nhost/react-apollo@5.0.1
+  - @nhost/nextjs@1.13.6
+
+## 0.11.12
+
+### Patch Changes
+
+- 87eda76e: chore(dashboard): bump `@types/react` to v18.0.28 and `@types/react-dom` to v18.0.11
+- 6f0ac570: feat(dashboard): show dashboard version in account menu
+
 ## 0.11.11
 
 ### Patch 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.6.3
+RUN yarn global add turbo@1.8.3
 COPY . .
 RUN turbo prune --scope="@nhost/dashboard" --docker
 
@@ -11,7 +11,7 @@ FROM node:16-alpine AS builder
 ARG TURBO_TOKEN
 ARG TURBO_TEAM
 
-RUN apk add --no-cache libc6-compat
+RUN apk add --no-cache libc6-compat python3 make g++
 RUN apk update
 WORKDIR /app
 
@@ -19,10 +19,15 @@ ENV NEXT_TELEMETRY_DISABLED 1
 ENV NEXT_PUBLIC_ENV dev
 ENV NEXT_PUBLIC_NHOST_PLATFORM false
 
-# placeholders for ports, will be replaced on runtime by entrypoint script
-ENV NEXT_PUBLIC_NHOST_MIGRATIONS_PORT __NEXT_PUBLIC_NHOST_MIGRATIONS_PORT__
-ENV NEXT_PUBLIC_NHOST_HASURA_PORT __NEXT_PUBLIC_NHOST_HASURA_PORT__
-ENV NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT __NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT__
+# 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__
+ENV NEXT_PUBLIC_NHOST_STORAGE_URL __NEXT_PUBLIC_NHOST_STORAGE_URL__
+ENV NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL __NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL__
+ENV NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL __NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL__
+ENV NEXT_PUBLIC_NHOST_HASURA_API_URL __NEXT_PUBLIC_NHOST_HASURA_API_URL__
 
 RUN yarn global add pnpm@7.17.0
 COPY .gitignore .gitignore

dashboard/README.md

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

dashboard/docker-entrypoint.sh

@@ -1,15 +1,25 @@
 #!/bin/sh
 
-set -e
+set -euo pipefail
 
-# read ports from env variables or use defaults
-NEXT_PUBLIC_NHOST_MIGRATIONS_PORT="${NEXT_PUBLIC_NHOST_MIGRATIONS_PORT:=9693}"
-NEXT_PUBLIC_NHOST_HASURA_PORT="${NEXT_PUBLIC_NHOST_HASURA_PORT:=9695}"
-NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT="${NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT:=1337}"
+# read URLs from env variables (with defaults)
+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_MIGRATIONS_PORT__/${NEXT_PUBLIC_NHOST_MIGRATIONS_PORT}/g" {} +
-find dashboard -type f -exec sed -i "s/__NEXT_PUBLIC_NHOST_HASURA_PORT__/${NEXT_PUBLIC_NHOST_HASURA_PORT}/g" {} +
-find dashboard -type f -exec sed -i "s/__NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT__/${NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT}/g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_ADMIN_SECRET__~${NEXT_PUBLIC_NHOST_ADMIN_SECRET}~g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_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" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_STORAGE_URL__~${NEXT_PUBLIC_NHOST_STORAGE_URL}~g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL__~${NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL}~g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL__~${NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL}~g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_HASURA_API_URL__~${NEXT_PUBLIC_NHOST_HASURA_API_URL}~g" {} +
 
 exec "$@"

dashboard/next.config.js

@@ -2,6 +2,7 @@ const path = require('path');
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 });
+const { version } = require('./package.json');
 
 module.exports = withBundleAnalyzer({
   reactStrictMode: true,
@@ -10,6 +11,9 @@ module.exports = withBundleAnalyzer({
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../../'),
   },
+  publicRuntimeConfig: {
+    version,
+  },
   eslint: {
     dirs: ['src'],
   },

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.11.11",
+  "version": "0.13.3",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -25,8 +25,8 @@
     "@emotion/styled": "^11.10.5",
     "@fontsource/inter": "^4.5.14",
     "@fontsource/roboto-mono": "^4.5.8",
-    "@graphiql/react": "^0.15.0",
-    "@graphiql/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",
@@ -37,20 +37,18 @@
     "@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",
     "@tanstack/react-table": "^8.5.30",
     "@tanstack/react-virtual": "^3.0.0-beta.23",
     "analytics-node": "^6.2.0",
-    "axios": "^0.27.2",
     "bcryptjs": "^2.4.3",
     "clsx": "^1.2.1",
-    "cross-fetch": "^3.1.5",
     "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",
@@ -65,7 +63,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "^3.1.4",
-    "react-hook-form": "^7.39.5",
+    "react-hook-form": "^7.42.1",
     "react-hot-toast": "^2.4.0",
     "react-is": "18.2.0",
     "react-loading-skeleton": "^2.2.0",
@@ -83,10 +81,10 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.2",
-    "@graphql-codegen/cli": "^2.8.0",
-    "@graphql-codegen/typescript": "^2.7.1",
+    "@graphql-codegen/cli": "^3.0.0",
+    "@graphql-codegen/typescript": "^3.0.0",
     "@graphql-codegen/typescript-graphql-request": "^4.5.1",
-    "@graphql-codegen/typescript-operations": "^2.5.1",
+    "@graphql-codegen/typescript-operations": "^3.0.0",
     "@graphql-codegen/typescript-react-apollo": "^3.3.1",
     "@next/bundle-analyzer": "^12.3.1",
     "@storybook/addon-actions": "^6.5.14",
@@ -98,26 +96,27 @@
     "@storybook/manager-webpack5": "^6.5.14",
     "@storybook/react": "^6.5.14",
     "@storybook/testing-library": "^0.0.13",
-    "@testing-library/dom": "^8.19.0",
+    "@testing-library/dom": "^9.0.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^16.11.7",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "18.0.25",
-    "@types/react-dom": "18.0.10",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
     "@types/react-table": "^7.7.12",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@types/validator": "^13.7.10",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",
     "@vitejs/plugin-react": "^3.0.0",
-    "@vitest/coverage-c8": "^0.27.0",
+    "@vitest/coverage-c8": "^0.29.0",
     "autoprefixer": "^10.4.13",
     "babel-loader": "^8.3.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "csstype": "^3.0.10",
+    "encoding": "^0.1.13",
     "eslint": "^8.28.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
@@ -131,6 +130,7 @@
     "lint-staged": ">=13",
     "msw": "^1.0.1",
     "msw-storybook-addon": "^1.6.3",
+    "node-fetch": "^3.3.0",
     "postcss": "^8.4.19",
     "prettier": "^2.7.1",
     "prettier-plugin-organize-imports": "^3.2.0",
@@ -141,10 +141,9 @@
     "tailwindcss": "^3.1.2",
     "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "^4.0.0",
-    "typescript": "^4.8.4",
     "vite": "^4.0.2",
     "vite-tsconfig-paths": "^4.0.3",
-    "vitest": "^0.27.0",
+    "vitest": "^0.29.0",
     "webpack": "^5.75.0"
   },
   "browserslist": {

dashboard/public/avatars/user.svg

@@ -1,6 +0,0 @@
-<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="200" height="200" fill="white" fill-opacity="0.15"/>
-<rect width="200" height="200" fill="#263245" fill-opacity="0.08"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M71 84C71 67.9837 83.9837 55 100 55C116.016 55 129 67.9837 129 84C129 100.016 116.016 113 100 113C83.9837 113 71 100.016 71 84ZM100 49C80.67 49 65 64.67 65 84C65 97.6014 72.7585 109.391 84.0914 115.184C79.3584 116.509 74.7892 118.425 70.496 120.903C61.5257 126.08 54.0757 133.527 48.8946 142.495C48.0657 143.929 48.5568 145.764 49.9914 146.593C51.4261 147.422 53.261 146.931 54.0898 145.496C58.7443 137.44 65.4368 130.75 73.4952 126.099C81.5536 121.448 90.694 119 99.9982 119C109.302 119 118.443 121.449 126.501 126.1C134.559 130.751 141.252 137.441 145.906 145.497C146.735 146.932 148.57 147.423 150.004 146.594C151.439 145.765 151.93 143.93 151.101 142.496C145.92 133.527 138.471 126.081 129.5 120.903C125.208 118.426 120.639 116.509 115.907 115.185C127.241 109.392 135 97.6021 135 84C135 64.67 119.33 49 100 49Z" fill="white" fill-opacity="0.15"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M71 84C71 67.9837 83.9837 55 100 55C116.016 55 129 67.9837 129 84C129 100.016 116.016 113 100 113C83.9837 113 71 100.016 71 84ZM100 49C80.67 49 65 64.67 65 84C65 97.6014 72.7585 109.391 84.0914 115.184C79.3584 116.509 74.7892 118.425 70.496 120.903C61.5257 126.08 54.0757 133.527 48.8946 142.495C48.0657 143.929 48.5568 145.764 49.9914 146.593C51.4261 147.422 53.261 146.931 54.0898 145.496C58.7443 137.44 65.4368 130.75 73.4952 126.099C81.5536 121.448 90.694 119 99.9982 119C109.302 119 118.443 121.449 126.501 126.1C134.559 130.751 141.252 137.441 145.906 145.497C146.735 146.932 148.57 147.423 150.004 146.594C151.439 145.765 151.93 143.93 151.101 142.496C145.92 133.527 138.471 126.081 129.5 120.903C125.208 118.426 120.639 116.509 115.907 115.185C127.241 109.392 135 97.6021 135 84C135 64.67 119.33 49 100 49Z" fill="#263245" fill-opacity="0.25"/>
-</svg>

dashboard/src/components/applications/ApplicationInfo.tsx

@@ -1,4 +1,7 @@
-import { useDeleteApplicationMutation } from '@/generated/graphql';
+import {
+  GetOneUserDocument,
+  useDeleteApplicationMutation,
+} from '@/generated/graphql';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import Button from '@/ui/v2/Button';
 import ArrowRightIcon from '@/ui/v2/icons/ArrowRightIcon';
@@ -12,7 +15,9 @@ import { useRouter } from 'next/router';
 
 export default function ApplicationInfo() {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const [deleteApplication, { client }] = useDeleteApplicationMutation();
+  const [deleteApplication, { client }] = useDeleteApplicationMutation({
+    refetchQueries: [GetOneUserDocument],
+  });
   const router = useRouter();
 
   async function handleClickRemove() {

dashboard/src/components/applications/ApplicationLive.tsx

@@ -1,3 +1,4 @@
+import MaintenanceAlert from '@/components/common/MaintenanceAlert';
 import RetryableErrorBoundary from '@/components/common/RetryableErrorBoundary';
 import Container from '@/components/layout/Container';
 import { features } from '@/components/overview/features';
@@ -52,6 +53,7 @@ export default function ApplicationLive() {
 
   return (
     <Container>
+      <MaintenanceAlert />
       <OverviewTopBar />
 
       <div className="grid grid-cols-1 gap-12 pt-3 lg:grid-cols-3">

dashboard/src/components/applications/ChangePlanModal.tsx

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

dashboard/src/components/applications/HasuraData.tsx

@@ -12,7 +12,7 @@ import generateAppServiceUrl, {
   defaultRemoteBackendSlugs,
 } from '@/utils/common/generateAppServiceUrl';
 import { copy } from '@/utils/copy';
-import { LOCAL_HASURA_URL } from '@/utils/env';
+import { getHasuraConsoleServiceUrl } from '@/utils/env';
 import Image from 'next/image';
 
 interface HasuraDataProps {
@@ -22,17 +22,15 @@ interface HasuraDataProps {
 export function HasuraData({ close }: HasuraDataProps) {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
   const isPlatform = useIsPlatform();
+  const projectAdminSecret = currentApplication?.config?.hasura.adminSecret;
 
-  if (
-    !currentApplication?.subdomain ||
-    !currentApplication?.hasuraGraphqlAdminSecret
-  ) {
+  if (!currentApplication?.subdomain || !projectAdminSecret) {
     return <LoadingScreen />;
   }
 
   const hasuraUrl =
     process.env.NEXT_PUBLIC_ENV === 'dev' || !isPlatform
-      ? `${LOCAL_HASURA_URL}/console`
+      ? `${getHasuraConsoleServiceUrl()}`
       : generateAppServiceUrl(
           currentApplication?.subdomain,
           currentApplication?.region.awsName,
@@ -71,18 +69,11 @@ export function HasuraData({ close }: HasuraDataProps) {
 
             <div className="col-span-1 grid grid-flow-col items-center justify-center gap-2 sm:col-span-2 sm:justify-end">
               <Text className="font-medium" variant="subtitle2">
-                {Array(currentApplication.hasuraGraphqlAdminSecret.length)
-                  .fill('•')
-                  .join('')}
+                {Array(projectAdminSecret.length).fill('•').join('')}
               </Text>
 
               <IconButton
-                onClick={() =>
-                  copy(
-                    currentApplication.hasuraGraphqlAdminSecret,
-                    'Hasura admin secret',
-                  )
-                }
+                onClick={() => copy(projectAdminSecret, 'Hasura admin secret')}
                 variant="borderless"
                 color="secondary"
                 className="min-w-0 p-1"

dashboard/src/components/applications/RenderWorkspacesWithApps.tsx

@@ -1,8 +1,8 @@
+import DeploymentStatusMessage from '@/components/deployments/DeploymentStatusMessage';
 import { FindOldApps } from '@/components/home';
 import type { UserData } from '@/hooks/useGetAllUserWorkspacesAndApplications';
-import type { Application, ApplicationState } from '@/types/application';
+import type { ApplicationState } from '@/types/application';
 import { ApplicationStatus } from '@/types/application';
-import { Avatar } from '@/ui/Avatar';
 import StateBadge from '@/ui/StateBadge';
 import type { DeploymentStatus } from '@/ui/StatusCircle';
 import { StatusCircle } from '@/ui/StatusCircle';
@@ -10,59 +10,11 @@ import Divider from '@/ui/v2/Divider';
 import Link from '@/ui/v2/Link';
 import List from '@/ui/v2/List';
 import { ListItem } from '@/ui/v2/ListItem';
-import Text from '@/ui/v2/Text';
 import { getApplicationStatusString } from '@/utils/helpers';
-import { formatDistance } from 'date-fns';
 import Image from 'next/image';
 import NavLink from 'next/link';
 import { Fragment } from 'react';
 
-function ApplicationCreatedAt({ createdAt }: any) {
-  return (
-    <Text component="span" className="text-sm">
-      created{' '}
-      {formatDistance(new Date(createdAt), new Date(), {
-        addSuffix: true,
-      })}
-    </Text>
-  );
-}
-
-function LastSuccessfulDeployment({ deployment }: any) {
-  return (
-    <span className="flex flex-row">
-      <Avatar
-        component="span"
-        name={deployment.commitUserName}
-        avatarUrl={deployment.commitUserAvatarUrl}
-        className="mr-1 h-4 w-4 self-center"
-      />
-      <Text component="span" className="self-center text-sm">
-        {deployment.commitUserName} deployed{' '}
-        {formatDistance(new Date(deployment.deploymentEndedAt), new Date(), {
-          addSuffix: true,
-        })}
-      </Text>
-    </span>
-  );
-}
-
-function CurrentDeployment({ deployment }: any) {
-  return (
-    <span className="flex flex-row">
-      <Avatar
-        component="span"
-        name={deployment.commitUserName}
-        avatarUrl={deployment.commitUserAvatarUrl}
-        className="mr-1 h-4 w-4 self-center"
-      />
-      <Text className="self-center text-sm">
-        {deployment.commitUserName} updated just now
-      </Text>
-    </span>
-  );
-}
-
 export function checkStatusOfTheApplication(
   stateHistory: ApplicationState[] | [],
 ) {
@@ -103,7 +55,7 @@ export function RenderWorkspacesWithApps({
           }
 
           const workspaceProjects = workspace.applications
-            .filter((app: Application) =>
+            .filter((app) =>
               app.name.toLowerCase().includes(query.toLowerCase()),
             )
             .sort((appA, appB) => {
@@ -141,25 +93,23 @@ export function RenderWorkspacesWithApps({
               </NavLink>
               <List className="grid grid-flow-row border-y">
                 {workspaceProjects.map((app, index) => {
-                  const isDeployingToProduction = app.deployments[0]
-                    ? app.deployments[0].deploymentStatus === 'DEPLOYING'
-                    : false;
+                  const [latestDeployment] = app.deployments;
 
                   return (
                     <Fragment key={app.slug}>
                       <ListItem.Root
                         secondaryAction={
                           <div className="grid grid-flow-col gap-px">
-                            {app.deployments[0] && (
+                            {latestDeployment && (
                               <div className="mr-2 flex self-center align-middle">
                                 <StatusCircle
                                   status={
-                                    app.deployments[0]
-                                      .deploymentStatus as DeploymentStatus
+                                    latestDeployment.deploymentStatus as DeploymentStatus
                                   }
                                 />
                               </div>
                             )}
+
                             <StateBadge
                               status={checkStatusOfTheApplication(
                                 app.appStates,
@@ -190,27 +140,10 @@ export function RenderWorkspacesWithApps({
                             <ListItem.Text
                               primary={app.name}
                               secondary={
-                                <>
-                                  {isDeployingToProduction && (
-                                    <CurrentDeployment
-                                      deployment={app.deployments[0]}
-                                    />
-                                  )}
-
-                                  {!isDeployingToProduction &&
-                                    app.deployments[0] && (
-                                      <LastSuccessfulDeployment
-                                        deployment={app.deployments[0]}
-                                      />
-                                    )}
-
-                                  {!isDeployingToProduction &&
-                                    !app.deployments[0] && (
-                                      <ApplicationCreatedAt
-                                        createdAt={app.createdAt}
-                                      />
-                                    )}
-                                </>
+                                <DeploymentStatusMessage
+                                  appCreatedAt={app.createdAt}
+                                  deployment={latestDeployment}
+                                />
                               }
                             />
                           </ListItem.Button>

dashboard/src/components/applications/UnlockFeatureByUpgrading.tsx

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

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

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

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

@@ -22,7 +22,9 @@ import {
 import { loadStripe } from '@stripe/stripe-js';
 import React, { useState } from 'react';
 
-const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PK!);
+const stripePromise = process.env.NEXT_PUBLIC_STRIPE_PK
+  ? loadStripe(process.env.NEXT_PUBLIC_STRIPE_PK)
+  : null;
 
 type AddPaymentMethodFormProps = {
   close: () => void;

dashboard/src/components/common/ControlledAutocomplete/ControlledAutocomplete.tsx

@@ -52,7 +52,9 @@ function ControlledAutocomplete(
 
   return (
     <Autocomplete
-      inputValue={typeof field.value === 'string' ? field.value : undefined}
+      inputValue={
+        typeof field.value !== 'object' ? field.value.toString() : undefined
+      }
       {...props}
       {...field}
       ref={mergeRefs([field.ref, ref])}

dashboard/src/components/common/DataGridPreviewCell/DataGridPreviewCell.tsx

@@ -205,7 +205,7 @@ export default function DataGridPreviewCell<TData extends object>({
     }
 
     const { presignedUrl } = await appClient.storage
-      .setAdminSecret(currentApplication.hasuraGraphqlAdminSecret)
+      .setAdminSecret(currentApplication.config?.hasura.adminSecret)
       .getPresignedUrl({ fileId: id });
 
     if (!presignedUrl) {

dashboard/src/components/common/DialogProvider/DialogContext.ts

@@ -1,31 +1,8 @@
+import type { DialogFormProps } from '@/types/common';
 import type { CommonDialogProps } from '@/ui/v2/Dialog';
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import { createContext } from 'react';
 
-/**
- * Available dialog types.
- */
-export type DialogType =
-  | 'EDIT_WORKSPACE_NAME'
-  | 'CREATE_RECORD'
-  | 'CREATE_COLUMN'
-  | 'EDIT_COLUMN'
-  | 'CREATE_TABLE'
-  | 'EDIT_TABLE'
-  | 'EDIT_PERMISSIONS'
-  | 'CREATE_FOREIGN_KEY'
-  | 'EDIT_FOREIGN_KEY'
-  | 'CREATE_ROLE'
-  | 'EDIT_ROLE'
-  | 'CREATE_USER'
-  | 'CREATE_PERMISSION_VARIABLE'
-  | 'EDIT_PERMISSION_VARIABLE'
-  | 'CREATE_ENVIRONMENT_VARIABLE'
-  | 'EDIT_ENVIRONMENT_VARIABLE'
-  | 'EDIT_USER'
-  | 'EDIT_USER_PASSWORD'
-  | 'EDIT_JWT_SECRET';
-
 export interface DialogConfig<TPayload = unknown> {
   /**
    * Title of the dialog.
@@ -41,21 +18,36 @@ export interface DialogConfig<TPayload = unknown> {
   payload?: TPayload;
 }
 
+export interface OpenDialogOptions {
+  /**
+   * Title of the dialog.
+   */
+  title: ReactNode;
+  /**
+   * Component to render inside the dialog skeleton.
+   */
+  component: ReactElement<{
+    location?: 'drawer' | 'dialog';
+    onCancel?: () => void;
+    onSubmit?: (args?: any) => Promise<any> | void;
+  }>;
+  /**
+   * Props to pass to the root dialog component.
+   */
+  props?: Partial<CommonDialogProps>;
+}
+
 export interface DialogContextProps {
   /**
-   * Call this function to open a dialog.
+   * Call this function to open a dialog. It will automatically apply the
+   * necessary functionality to the dialog.
    */
-  openDialog: <TPayload = unknown>(
-    type: DialogType,
-    config?: DialogConfig<TPayload>,
-  ) => void;
+  openDialog: (options: OpenDialogOptions) => void;
   /**
-   * Call this function to open a drawer.
+   * Call this function to open a drawer. It will automatically apply the
+   * necessary functionality to the drawer.
    */
-  openDrawer: <TPayload = unknown>(
-    type: DialogType,
-    config?: DialogConfig<TPayload>,
-  ) => void;
+  openDrawer: (options: OpenDialogOptions) => void;
   /**
    * Call this function to open an alert dialog.
    */
@@ -87,7 +79,7 @@ export interface DialogContextProps {
    */
   onDirtyStateChange: (
     isDirty: boolean,
-    location?: 'drawer' | 'dialog',
+    location?: DialogFormProps['location'],
   ) => void;
   /**
    * Call this function to open a dirty confirmation dialog.

dashboard/src/components/common/DialogProvider/DialogProvider.tsx

@@ -1,30 +1,12 @@
 import RetryableErrorBoundary from '@/components/common/RetryableErrorBoundary';
-import CreateForeignKeyForm from '@/components/dataBrowser/CreateForeignKeyForm';
-import EditForeignKeyForm from '@/components/dataBrowser/EditForeignKeyForm';
-import EditWorkspaceNameForm from '@/components/home/EditWorkspaceNameForm';
-import CreateEnvironmentVariableForm from '@/components/settings/environmentVariables/CreateEnvironmentVariableForm';
-import EditEnvironmentVariableForm from '@/components/settings/environmentVariables/EditEnvironmentVariableForm';
-import EditJwtSecretForm from '@/components/settings/environmentVariables/EditJwtSecretForm';
-import CreatePermissionVariableForm from '@/components/settings/permissions/CreatePermissionVariableForm';
-import EditPermissionVariableForm from '@/components/settings/permissions/EditPermissionVariableForm';
-import CreateRoleForm from '@/components/settings/roles/CreateRoleForm';
-import EditRoleForm from '@/components/settings/roles/EditRoleForm';
-import CreateUserForm from '@/components/users/CreateUserForm';
-import EditUserForm from '@/components/users/EditUserForm';
-import EditUserPasswordForm from '@/components/users/EditUserPasswordForm';
-import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import AlertDialog from '@/ui/v2/AlertDialog';
 import { BaseDialog } from '@/ui/v2/Dialog';
 import Drawer from '@/ui/v2/Drawer';
-import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
-import type {
-  BaseSyntheticEvent,
-  DetailedHTMLProps,
-  HTMLProps,
-  PropsWithChildren,
-} from 'react';
+import type { BaseSyntheticEvent, PropsWithChildren } from 'react';
 import {
+  cloneElement,
+  isValidElement,
   useCallback,
   useEffect,
   useMemo,
@@ -33,7 +15,7 @@ import {
   useState,
 } from 'react';
 import { twMerge } from 'tailwind-merge';
-import type { DialogConfig, DialogType } from './DialogContext';
+import type { DialogConfig, OpenDialogOptions } from './DialogContext';
 import DialogContext from './DialogContext';
 import {
   alertDialogReducer,
@@ -41,67 +23,11 @@ import {
   drawerReducer,
 } from './dialogReducers';
 
-function LoadingComponent({
-  className,
-  ...props
-}: DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement> = {}) {
-  return (
-    <div
-      {...props}
-      className={twMerge(
-        'grid items-center justify-center px-6 py-4',
-        className,
-      )}
-    >
-      <ActivityIndicator
-        circularProgressProps={{ className: 'w-5 h-5' }}
-        label="Loading form..."
-      />
-    </div>
-  );
-}
-
-const CreateRecordForm = dynamic(
-  () => import('@/components/dataBrowser/CreateRecordForm'),
-  { ssr: false, loading: () => LoadingComponent() },
-);
-
-const CreateColumnForm = dynamic(
-  () => import('@/components/dataBrowser/CreateColumnForm'),
-  { ssr: false, loading: () => LoadingComponent() },
-);
-
-const EditColumnForm = dynamic(
-  () => import('@/components/dataBrowser/EditColumnForm'),
-  { ssr: false, loading: () => LoadingComponent() },
-);
-
-const CreateTableForm = dynamic(
-  () => import('@/components/dataBrowser/CreateTableForm'),
-  { ssr: false, loading: () => LoadingComponent() },
-);
-
-const EditTableForm = dynamic(
-  () => import('@/components/dataBrowser/EditTableForm'),
-  { ssr: false, loading: () => LoadingComponent() },
-);
-
-const EditPermissionsForm = dynamic(
-  () => import('@/components/dataBrowser/EditPermissionsForm'),
-  { ssr: false, loading: () => LoadingComponent() },
-);
-
 function DialogProvider({ children }: PropsWithChildren<unknown>) {
   const router = useRouter();
 
   const [
-    {
-      open: dialogOpen,
-      activeDialogType,
-      dialogProps,
-      title: dialogTitle,
-      payload: dialogPayload,
-    },
+    { open: dialogOpen, title: dialogTitle, activeDialog, dialogProps },
     dialogDispatch,
   ] = useReducer(dialogReducer, {
     open: false,
@@ -110,10 +36,9 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
   const [
     {
       open: drawerOpen,
-      activeDialogType: activeDrawerType,
-      dialogProps: drawerProps,
       title: drawerTitle,
-      payload: drawerPayload,
+      activeDialog: activeDrawer,
+      dialogProps: drawerProps,
     },
     drawerDispatch,
   ] = useReducer(drawerReducer, {
@@ -136,12 +61,9 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
   const isDialogDirty = useRef(false);
   const [showDirtyConfirmation, setShowDirtyConfirmation] = useState(false);
 
-  const openDialog = useCallback(
-    <TConfig,>(type: DialogType, config?: DialogConfig<TConfig>) => {
-      dialogDispatch({ type: 'OPEN_DIALOG', payload: { type, config } });
-    },
-    [],
-  );
+  const openDialog = useCallback((options: OpenDialogOptions) => {
+    dialogDispatch({ type: 'OPEN_DIALOG', payload: options });
+  }, []);
 
   const closeDialog = useCallback(() => {
     dialogDispatch({ type: 'HIDE_DIALOG' });
@@ -152,12 +74,9 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
     dialogDispatch({ type: 'CLEAR_DIALOG_CONTENT' });
   }, []);
 
-  const openDrawer = useCallback(
-    <TConfig,>(type: DialogType, config?: DialogConfig<TConfig>) => {
-      drawerDispatch({ type: 'OPEN_DRAWER', payload: { type, config } });
-    },
-    [],
-  );
+  const openDrawer = useCallback((options: OpenDialogOptions) => {
+    drawerDispatch({ type: 'OPEN_DRAWER', payload: options });
+  }, []);
 
   const closeDrawer = useCallback(() => {
     drawerDispatch({ type: 'HIDE_DRAWER' });
@@ -228,9 +147,6 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
     [closeDialog, openDirtyConfirmation],
   );
 
-  // We are coupling this logic with the location of the dialog content which is
-  // not ideal. We shoule figure out a better logic for tracking the dirty
-  // state in the future.
   const onDirtyStateChange = useCallback(
     (dirty: boolean, location: 'drawer' | 'dialog' = 'drawer') => {
       if (location === 'dialog') {
@@ -271,25 +187,6 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
     ],
   );
 
-  const sharedDialogProps = {
-    ...dialogPayload,
-    onSubmit: async (values: any) => {
-      await dialogPayload?.onSubmit?.(values);
-
-      closeDialog();
-    },
-    onCancel: closeDialogWithDirtyGuard,
-  };
-
-  const sharedDrawerProps = {
-    onSubmit: async () => {
-      await drawerPayload?.onSubmit();
-
-      closeDrawer();
-    },
-    onCancel: closeDrawerWithDirtyGuard,
-  };
-
   useEffect(() => {
     function handleCloseDrawerAndDialog() {
       if (isDrawerDirty.current || isDialogDirty.current) {
@@ -367,56 +264,20 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
         <RetryableErrorBoundary
           errorMessageProps={{ className: 'pt-0 pb-5 px-6' }}
         >
-          {activeDialogType === 'EDIT_WORKSPACE_NAME' && (
-            <EditWorkspaceNameForm {...sharedDialogProps} />
-          )}
-
-          {activeDialogType === 'CREATE_FOREIGN_KEY' && (
-            <CreateForeignKeyForm {...sharedDialogProps} />
-          )}
-
-          {activeDialogType === 'EDIT_FOREIGN_KEY' && (
-            <EditForeignKeyForm {...sharedDialogProps} />
-          )}
-
-          {activeDialogType === 'CREATE_ROLE' && (
-            <CreateRoleForm {...sharedDialogProps} />
-          )}
-
-          {activeDialogType === 'EDIT_ROLE' && (
-            <EditRoleForm {...sharedDialogProps} />
-          )}
-
-          {activeDialogType === 'CREATE_USER' && (
-            <CreateUserForm {...sharedDialogProps} />
-          )}
-
-          {activeDialogType === 'CREATE_PERMISSION_VARIABLE' && (
-            <CreatePermissionVariableForm {...sharedDialogProps} />
-          )}
-
-          {activeDialogType === 'EDIT_PERMISSION_VARIABLE' && (
-            <EditPermissionVariableForm {...sharedDialogProps} />
-          )}
-
-          {activeDialogType === 'CREATE_ENVIRONMENT_VARIABLE' && (
-            <CreateEnvironmentVariableForm {...sharedDialogProps} />
-          )}
-
-          {activeDialogType === 'EDIT_ENVIRONMENT_VARIABLE' && (
-            <EditEnvironmentVariableForm {...sharedDialogProps} />
-          )}
-
-          {activeDialogType === 'EDIT_USER_PASSWORD' && (
-            <EditUserPasswordForm
-              {...sharedDialogProps}
-              user={sharedDialogProps?.user}
-            />
-          )}
-
-          {activeDialogType === 'EDIT_JWT_SECRET' && (
-            <EditJwtSecretForm {...sharedDialogProps} />
-          )}
+          {isValidElement(activeDialog)
+            ? cloneElement(activeDialog, {
+                ...activeDialog.props,
+                location: 'dialog',
+                onSubmit: async (values?: any) => {
+                  await activeDialog?.props?.onSubmit?.(values);
+                  closeDialog();
+                },
+                onCancel: () => {
+                  activeDialog?.props?.onCancel?.();
+                  closeDialogWithDirtyGuard();
+                },
+              })
+            : null}
         </RetryableErrorBoundary>
       </BaseDialog>
 
@@ -436,51 +297,20 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
         }}
       >
         <RetryableErrorBoundary>
-          {activeDrawerType === 'CREATE_RECORD' && (
-            <CreateRecordForm
-              {...sharedDrawerProps}
-              columns={drawerPayload?.columns}
-            />
-          )}
-
-          {activeDrawerType === 'CREATE_COLUMN' && (
-            <CreateColumnForm {...sharedDrawerProps} />
-          )}
-
-          {activeDrawerType === 'EDIT_COLUMN' && (
-            <EditColumnForm
-              {...sharedDrawerProps}
-              column={drawerPayload?.column}
-            />
-          )}
-
-          {activeDrawerType === 'CREATE_TABLE' && (
-            <CreateTableForm
-              {...sharedDrawerProps}
-              schema={drawerPayload?.schema}
-            />
-          )}
-
-          {activeDrawerType === 'EDIT_TABLE' && (
-            <EditTableForm
-              {...sharedDrawerProps}
-              table={drawerPayload?.table}
-              schema={drawerPayload?.schema}
-            />
-          )}
-
-          {activeDrawerType === 'EDIT_PERMISSIONS' && (
-            <EditPermissionsForm
-              {...sharedDrawerProps}
-              disabled={drawerPayload?.disabled}
-              schema={drawerPayload?.schema}
-              table={drawerPayload?.table}
-            />
-          )}
-
-          {activeDrawerType === 'EDIT_USER' && (
-            <EditUserForm {...sharedDrawerProps} {...drawerPayload} />
-          )}
+          {isValidElement(activeDrawer)
+            ? cloneElement(activeDrawer, {
+                ...activeDrawer.props,
+                location: 'drawer',
+                onSubmit: async (values?: any) => {
+                  await activeDrawer?.props?.onSubmit?.(values);
+                  closeDrawer();
+                },
+                onCancel: () => {
+                  activeDrawer?.props?.onCancel?.();
+                  closeDrawerWithDirtyGuard();
+                },
+              })
+            : null}
         </RetryableErrorBoundary>
       </Drawer>
 

dashboard/src/components/common/DialogProvider/dialogReducers.ts

@@ -1,6 +1,6 @@
 import type { CommonDialogProps } from '@/ui/v2/Dialog';
-import type { ReactNode } from 'react';
-import type { DialogConfig, DialogType } from './DialogContext';
+import type { ReactElement, ReactNode } from 'react';
+import type { DialogConfig, OpenDialogOptions } from './DialogContext';
 
 export interface DialogState {
   /**
@@ -12,9 +12,13 @@ export interface DialogState {
    */
   open?: boolean;
   /**
-   * Type of the currently active dialog.
+   * Component to render inside the dialog skeleton.
    */
-  activeDialogType?: DialogType;
+  activeDialog?: ReactElement<{
+    location?: 'drawer' | 'dialog';
+    onCancel?: () => void;
+    onSubmit?: (args?: any) => Promise<any> | void;
+  }>;
   /**
    * Props passed to the currently active dialog.
    */
@@ -27,10 +31,7 @@ export interface DialogState {
 }
 
 export type DialogAction =
-  | {
-      type: 'OPEN_DIALOG';
-      payload: { type: DialogType; config?: DialogConfig };
-    }
+  | { type: 'OPEN_DIALOG'; payload: OpenDialogOptions }
   | { type: 'HIDE_DIALOG' }
   | { type: 'CLEAR_DIALOG_CONTENT' };
 
@@ -50,10 +51,9 @@ export function dialogReducer(
       return {
         ...state,
         open: true,
-        activeDialogType: action.payload?.type,
-        dialogProps: action.payload.config?.props,
-        title: action.payload.config?.title,
-        payload: action.payload.config?.payload,
+        title: action.payload.title,
+        activeDialog: action.payload.component,
+        dialogProps: action.payload.props,
       };
     case 'HIDE_DIALOG':
       return {
@@ -64,8 +64,7 @@ export function dialogReducer(
       return {
         ...state,
         title: undefined,
-        payload: undefined,
-        activeDialogType: undefined,
+        activeDialog: undefined,
         dialogProps: undefined,
       };
     default:
@@ -74,10 +73,7 @@ export function dialogReducer(
 }
 
 export type DrawerAction =
-  | {
-      type: 'OPEN_DRAWER';
-      payload: { type: DialogType; config?: DialogConfig };
-    }
+  | { type: 'OPEN_DRAWER'; payload: OpenDialogOptions }
   | { type: 'HIDE_DRAWER' }
   | { type: 'CLEAR_DRAWER_CONTENT' };
 
@@ -97,10 +93,9 @@ export function drawerReducer(
       return {
         ...state,
         open: true,
-        activeDialogType: action.payload?.type,
-        dialogProps: action.payload.config?.props,
-        title: action.payload.config?.title,
-        payload: action.payload.config?.payload,
+        title: action.payload.title,
+        activeDialog: action.payload.component,
+        dialogProps: action.payload.props,
       };
     case 'HIDE_DRAWER':
       return {
@@ -111,8 +106,7 @@ export function drawerReducer(
       return {
         ...state,
         title: undefined,
-        payload: undefined,
-        activeDialogType: undefined,
+        activeDialog: undefined,
         dialogProps: undefined,
       };
     default:

dashboard/src/components/common/Form/Form.tsx

@@ -1,6 +1,7 @@
 import type { BoxProps } from '@/ui/v2/Box';
 import Box from '@/ui/v2/Box';
 import type { KeyboardEvent } from 'react';
+import { useRef } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 export interface FormProps extends BoxProps {
@@ -11,6 +12,7 @@ export interface FormProps extends BoxProps {
 }
 
 export default function Form({ onSubmit, onKeyDown, ...props }: FormProps) {
+  const formRef = useRef<HTMLDivElement>();
   const {
     handleSubmit,
     formState: { isSubmitting },
@@ -25,6 +27,15 @@ export default function Form({ onSubmit, onKeyDown, ...props }: FormProps) {
       return;
     }
 
+    const submitButton = Array.from(
+      formRef.current.getElementsByTagName('button'),
+    ).find((item) => item.type === 'submit');
+
+    // Disabling submit if the submit button is disabled
+    if (submitButton?.disabled) {
+      return;
+    }
+
     event.preventDefault();
 
     handleSubmit(onSubmit)(event);
@@ -35,6 +46,7 @@ export default function Form({ onSubmit, onKeyDown, ...props }: FormProps) {
     // so keyboard events must be handled on the form element itself.
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     <Box
+      ref={formRef}
       component="form"
       {...props}
       onKeyDown={(event) => {

dashboard/src/components/common/FormActivityIndicator/FormActivityIndicator.tsx

@@ -0,0 +1,26 @@
+import ActivityIndicator from '@/ui/v2/ActivityIndicator';
+import type { BoxProps } from '@/ui/v2/Box';
+import Box from '@/ui/v2/Box';
+import { twMerge } from 'tailwind-merge';
+
+export interface FormActivityIndicatorProps extends BoxProps {}
+
+export default function FormActivityIndicator({
+  className,
+  ...props
+}: FormActivityIndicatorProps) {
+  return (
+    <Box
+      {...props}
+      className={twMerge(
+        'grid items-center justify-center px-6 py-4',
+        className,
+      )}
+    >
+      <ActivityIndicator
+        circularProgressProps={{ className: 'w-5 h-5' }}
+        label="Loading form..."
+      />
+    </Box>
+  );
+}

dashboard/src/components/common/FormActivityIndicator/index.ts

@@ -0,0 +1,2 @@
+export * from './FormActivityIndicator';
+export { default } from './FormActivityIndicator';

dashboard/src/components/common/Header/Header.tsx

@@ -1,9 +1,9 @@
 import Breadcrumbs from '@/components/common/Breadcrumbs';
 import FeedbackForm from '@/components/common/FeedbackForm';
+import LocalAccountMenu from '@/components/common/LocalAccountMenu';
 import Logo from '@/components/common/Logo';
 import MobileNav from '@/components/common/MobileNav';
 import NavLink from '@/components/common/NavLink';
-import ThemeSwitcher from '@/components/common/ThemeSwitcher';
 import { AccountMenu } from '@/components/dashboard/AccountMenu';
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import Box from '@/ui/v2/Box';
@@ -23,6 +23,7 @@ export default function Header({ className, ...props }: HeaderProps) {
 
   return (
     <Box
+      component="header"
       className={twMerge(
         'z-40 grid w-full transform-gpu grid-flow-col items-center justify-between gap-2 border-b-1 px-4 py-3',
         className,
@@ -73,7 +74,7 @@ export default function Header({ className, ...props }: HeaderProps) {
           Docs
         </NavLink>
 
-        {isPlatform ? <AccountMenu /> : <ThemeSwitcher className="w-52" />}
+        {isPlatform ? <AccountMenu /> : <LocalAccountMenu />}
       </div>
 
       <MobileNav className="sm:hidden" />

dashboard/src/components/common/IconLink/IconLink.tsx

@@ -38,6 +38,12 @@ function IconLink(
                   : [icon.props?.sx]),
                 {
                   color: (theme) => {
+                    if (props.disabled) {
+                      return theme.palette.mode === 'dark'
+                        ? 'text.secondary'
+                        : 'text.primary';
+                    }
+
                     if (active) {
                       return 'primary.main';
                     }

dashboard/src/components/common/LocalAccountMenu/LocalAccountMenu.tsx

@@ -0,0 +1,39 @@
+import ThemeSwitcher from '@/components/common/ThemeSwitcher';
+import { Dropdown } from '@/ui/v2/Dropdown';
+import IconButton from '@/ui/v2/IconButton';
+import UserIcon from '@/ui/v2/icons/UserIcon';
+import Text from '@/ui/v2/Text';
+import getConfig from 'next/config';
+
+export default function LocalAccountMenu() {
+  const { publicRuntimeConfig } = getConfig();
+
+  return (
+    <Dropdown.Root className="justify-self-center">
+      <Dropdown.Trigger hideChevron asChild>
+        <IconButton
+          variant="borderless"
+          color="secondary"
+          className="h-7 w-7 rounded-full"
+          sx={{
+            backgroundColor: (theme) => `${theme.palette.grey[300]} !important`,
+          }}
+        >
+          <UserIcon className="h-4 w-4" />
+        </IconButton>
+      </Dropdown.Trigger>
+
+      <Dropdown.Content
+        PaperProps={{
+          className: 'mt-1 p-6 grid grid-flow-row gap-4 w-full max-w-xs',
+        }}
+      >
+        <ThemeSwitcher label="Theme" />
+
+        <Text className="text-center text-xs" color="disabled">
+          Dashboard Version: {publicRuntimeConfig?.version || 'n/a'}
+        </Text>
+      </Dropdown.Content>
+    </Dropdown.Root>
+  );
+}

dashboard/src/components/common/LocalAccountMenu/index.ts

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

dashboard/src/components/common/MaintenanceAlert/MaintenanceAlert.tsx

@@ -0,0 +1,46 @@
+import { useUI } from '@/context/UIContext';
+import { Alert } from '@/ui/Alert';
+
+export default function MaintenanceAlert() {
+  const { maintenanceActive, maintenanceEndDate } = useUI();
+
+  if (!maintenanceActive) {
+    return null;
+  }
+
+  const dateTimeFormat = Intl.DateTimeFormat(undefined, {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    timeZoneName: 'short',
+  });
+
+  const parts = dateTimeFormat.formatToParts(maintenanceEndDate);
+
+  const year = parts.find((part) => part.type === 'year')?.value;
+  const month = parts.find((part) => part.type === 'month')?.value;
+  const day = parts.find((part) => part.type === 'day')?.value;
+  const hour = parts.find((part) => part.type === 'hour')?.value;
+  const minute = parts.find((part) => part.type === 'minute')?.value;
+  const timeZone = parts.find((part) => part.type === 'timeZoneName')?.value;
+
+  return (
+    <Alert severity="warning" className="mt-4">
+      <p>
+        We&apos;re currently doing maintenance on our infrastructure. Project
+        creation and project settings are temporarily disabled during the
+        maintenance period.
+      </p>
+
+      {maintenanceEndDate && (
+        <p>
+          Maintenance is expected to be completed at {year}-{month}-{day} {hour}
+          :{minute} {timeZone}.
+        </p>
+      )}
+    </Alert>
+  );
+}

dashboard/src/components/common/MaintenanceAlert/index.ts

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

dashboard/src/components/common/MobileNav/MobileNav.tsx

@@ -20,6 +20,7 @@ import type { ListItemButtonProps } from '@/ui/v2/ListItem';
 import { ListItem } from '@/ui/v2/ListItem';
 import Text from '@/ui/v2/Text';
 import { useSignOut } from '@nhost/nextjs';
+import getConfig from 'next/config';
 import { useRouter } from 'next/router';
 import type { ReactNode } from 'react';
 import { cloneElement, Fragment, isValidElement, useState } from 'react';
@@ -89,6 +90,7 @@ export default function MobileNav({ className, ...props }: MobileNavProps) {
   const { signOut } = useSignOut();
   const { setUserContext } = useUserDataContext();
   const router = useRouter();
+  const { publicRuntimeConfig } = getConfig();
 
   return (
     <>
@@ -256,6 +258,10 @@ export default function MobileNav({ className, ...props }: MobileNavProps) {
                 </ListItem.Button>
               </ListItem.Root>
             </List>
+
+            <Text className="text-center text-xs" color="secondary">
+              Dashboard Version: {publicRuntimeConfig?.version || 'n/a'}
+            </Text>
           </section>
         )}
       </Drawer>

dashboard/src/components/common/ThemeSwitcher/ThemeSwitcher.tsx

@@ -21,6 +21,13 @@ export default function ThemeSwitcher({
 
         onChange?.(event, value);
       }}
+      slotProps={{
+        listbox: { className: 'min-w-0 w-full' },
+        popper: {
+          disablePortal: false,
+          className: 'z-[10000] w-[270px] w-full',
+        },
+      }}
     >
       <Option value="light">Light</Option>
       <Option value="dark">Dark</Option>

dashboard/src/components/dashboard/AccountMenu.tsx

@@ -10,6 +10,7 @@ import Text from '@/ui/v2/Text';
 import { nhost } from '@/utils/nhost';
 import { useApolloClient } from '@apollo/client';
 import { useUserData } from '@nhost/nextjs';
+import getConfig from 'next/config';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
@@ -24,23 +25,10 @@ function AccountMenuContent({
   const router = useRouter();
   const client = useApolloClient();
   const { handleClose } = useDropdown();
+  const { publicRuntimeConfig } = getConfig();
 
   return (
-    <Box className="relative grid w-account grid-flow-row gap-5 p-6">
-      <Button
-        variant="borderless"
-        color="secondary"
-        className="absolute top-6 right-4 grid grid-flow-col items-center gap-px self-start font-medium"
-        onClick={async () => {
-          await nhost.auth.signOut();
-          router.push('/signin');
-          await client.resetStore();
-        }}
-        endIcon={<PowerIcon className="mr-1 h-4 w-4" />}
-      >
-        Sign Out
-      </Button>
-
+    <Box className="relative grid w-full grid-flow-row gap-5 p-6">
       <div className="grid grid-flow-row justify-center">
         <Avatar
           className="mx-auto mb-2 h-16 w-16 rounded-full"
@@ -72,9 +60,26 @@ function AccountMenuContent({
         <Button color="error" disabled>
           Remove Account
         </Button>
+
+        <Button
+          variant="outlined"
+          color="secondary"
+          onClick={async () => {
+            await nhost.auth.signOut();
+            router.push('/signin');
+            await client.resetStore();
+          }}
+          endIcon={<PowerIcon className="mr-1 h-4 w-4" />}
+        >
+          Sign Out
+        </Button>
       </div>
 
-      <ThemeSwitcher label="Theme" fullWidth />
+      <ThemeSwitcher label="Theme" />
+
+      <Text className="text-center text-xs" color="disabled">
+        Dashboard Version: {publicRuntimeConfig?.version || 'n/a'}
+      </Text>
     </Box>
   );
 }
@@ -107,7 +112,7 @@ export function AccountMenu() {
           />
         </Dropdown.Trigger>
 
-        <Dropdown.Content PaperProps={{ className: 'mt-1' }}>
+        <Dropdown.Content PaperProps={{ className: 'mt-1 max-w-xs w-full' }}>
           <AccountMenuContent
             onChangePasswordClick={() => setChangePasswordModal(true)}
           />

dashboard/src/components/dataBrowser/BaseColumnForm/BaseColumnForm.tsx

@@ -3,6 +3,7 @@ import ControlledCheckbox from '@/components/common/ControlledCheckbox';
 import { useDialog } from '@/components/common/DialogProvider';
 import Form from '@/components/common/Form';
 import InlineCode from '@/components/common/InlineCode';
+import type { DialogFormProps } from '@/types/common';
 import type { ColumnType, DatabaseColumn } from '@/types/dataBrowser';
 import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
@@ -22,7 +23,7 @@ import ForeignKeyEditor from './ForeignKeyEditor';
 
 export type BaseColumnFormValues = DatabaseColumn;
 
-export interface BaseColumnFormProps {
+export interface BaseColumnFormProps extends DialogFormProps {
   /**
    * Function to be called when the form is submitted.
    */
@@ -60,6 +61,7 @@ export default function BaseColumnForm({
   onSubmit: handleExternalSubmit,
   onCancel,
   submitButtonText = 'Save',
+  location,
 }: BaseColumnFormProps) {
   const { onDirtyStateChange } = useDialog();
 
@@ -91,8 +93,8 @@ export default function BaseColumnForm({
   const isDirty = Object.keys(dirtyFields).length > 0;
 
   useEffect(() => {
-    onDirtyStateChange(isDirty, 'drawer');
-  }, [isDirty, onDirtyStateChange]);
+    onDirtyStateChange(isDirty, location);
+  }, [isDirty, location, onDirtyStateChange]);
 
   return (
     <Form

dashboard/src/components/dataBrowser/BaseColumnForm/ForeignKeyEditor.tsx

@@ -1,5 +1,6 @@
 import { useDialog } from '@/components/common/DialogProvider';
-import type { BaseForeignKeyFormValues } from '@/components/dataBrowser/BaseForeignKeyForm';
+import CreateForeignKeyForm from '@/components/dataBrowser/CreateForeignKeyForm';
+import EditForeignKeyForm from '@/components/dataBrowser/EditForeignKeyForm';
 import type { DatabaseColumn } from '@/types/dataBrowser';
 import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
@@ -29,7 +30,7 @@ const ForeignKeyEditorInput = forwardRef(
   ) => {
     const { openDialog } = useDialog();
     const { setValue } = useFormContext();
-    const column = useWatch<Partial<DatabaseColumn>>();
+    const column = useWatch() as DatabaseColumn;
     const { foreignKeyRelation } = column;
 
     if (!column.foreignKeyRelation) {
@@ -39,8 +40,8 @@ const ForeignKeyEditorInput = forwardRef(
           className="py-1"
           disabled={!column.name || !column.type}
           ref={ref}
-          onClick={() =>
-            openDialog('CREATE_FOREIGN_KEY', {
+          onClick={() => {
+            openDialog({
               title: (
                 <span className="grid grid-flow-row">
                   <span>Add a Foreign Key Relation</span>
@@ -51,16 +52,18 @@ const ForeignKeyEditorInput = forwardRef(
                   </Text>
                 </span>
               ),
-              payload: {
-                selectedColumn: column.name,
-                availableColumns: [column],
-                onSubmit: (values: BaseForeignKeyFormValues) => {
-                  setValue('foreignKeyRelation', values);
-                  onCreateSubmit();
-                },
-              },
-            })
-          }
+              component: (
+                <CreateForeignKeyForm
+                  selectedColumn={column.name}
+                  availableColumns={[column]}
+                  onSubmit={(values) => {
+                    setValue('foreignKeyRelation', values);
+                    onCreateSubmit();
+                  }}
+                />
+              ),
+            });
+          }}
         >
           Add Foreign Key
         </Button>
@@ -86,20 +89,22 @@ const ForeignKeyEditorInput = forwardRef(
         <div className="grid grid-flow-col">
           <Button
             ref={ref}
-            onClick={() =>
-              openDialog('EDIT_FOREIGN_KEY', {
+            onClick={() => {
+              openDialog({
                 title: 'Edit Foreign Key Relation',
-                payload: {
-                  foreignKeyRelation,
-                  availableColumns: [column],
-                  selectedColumn: column.name,
-                  onSubmit: (values: BaseForeignKeyFormValues) => {
-                    setValue('foreignKeyRelation', values);
-                    onEditSubmit();
-                  },
-                },
-              })
-            }
+                component: (
+                  <EditForeignKeyForm
+                    foreignKeyRelation={foreignKeyRelation}
+                    selectedColumn={column.name}
+                    availableColumns={[column]}
+                    onSubmit={(values) => {
+                      setValue('foreignKeyRelation', values);
+                      onEditSubmit();
+                    }}
+                  />
+                ),
+              });
+            }}
             variant="borderless"
             className="min-w-[initial] py-1 px-2"
           >

dashboard/src/components/dataBrowser/BaseForeignKeyForm/BaseForeignKeyForm.tsx

@@ -2,6 +2,7 @@ import ControlledSelect from '@/components/common/ControlledSelect';
 import { useDialog } from '@/components/common/DialogProvider';
 import Form from '@/components/common/Form';
 import useDatabaseQuery from '@/hooks/dataBrowser/useDatabaseQuery';
+import type { DialogFormProps } from '@/types/common';
 import type { DatabaseColumn, ForeignKeyRelation } from '@/types/dataBrowser';
 import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
@@ -23,7 +24,7 @@ export interface BaseForeignKeyFormValues extends ForeignKeyRelation {
   disableOriginColumn?: boolean;
 }
 
-export interface BaseForeignKeyFormProps {
+export interface BaseForeignKeyFormProps extends DialogFormProps {
   /**
    * Available columns in the table.
    */
@@ -64,6 +65,7 @@ export function BaseForeignKeyForm({
   onSubmit: handleExternalSubmit,
   onCancel,
   submitButtonText = 'Save',
+  location,
 }: BaseForeignKeyFormProps) {
   const { onDirtyStateChange } = useDialog();
 
@@ -86,8 +88,8 @@ export function BaseForeignKeyForm({
   const isDirty = Object.keys(dirtyFields).length > 0;
 
   useEffect(() => {
-    onDirtyStateChange(isDirty, 'dialog');
-  }, [isDirty, onDirtyStateChange]);
+    onDirtyStateChange(isDirty, location);
+  }, [isDirty, location, onDirtyStateChange]);
 
   return (
     <Form

dashboard/src/components/dataBrowser/BaseRecordForm/BaseRecordForm.tsx

@@ -1,6 +1,7 @@
 import { useDialog } from '@/components/common/DialogProvider';
 import Form from '@/components/common/Form';
 import DatabaseRecordInputGroup from '@/components/dataBrowser/DatabaseRecordInputGroup';
+import type { DialogFormProps } from '@/types/common';
 import type {
   ColumnInsertOptions,
   DataBrowserGridColumn,
@@ -10,7 +11,7 @@ import Button from '@/ui/v2/Button';
 import { useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';
 
-export interface BaseRecordFormProps {
+export interface BaseRecordFormProps extends DialogFormProps {
   /**
    * The columns of the table.
    */
@@ -36,6 +37,7 @@ export default function BaseRecordForm({
   onSubmit: handleExternalSubmit,
   onCancel,
   submitButtonText = 'Save',
+  location,
 }: BaseRecordFormProps) {
   const { onDirtyStateChange } = useDialog();
   const { requiredColumns, optionalColumns } = columns.reduce(
@@ -70,8 +72,8 @@ export default function BaseRecordForm({
   const isDirty = Object.keys(dirtyFields).length > 0;
 
   useEffect(() => {
-    onDirtyStateChange(isDirty, 'drawer');
-  }, [isDirty, onDirtyStateChange]);
+    onDirtyStateChange(isDirty, location);
+  }, [isDirty, location, onDirtyStateChange]);
 
   // Stores columns in a map to have constant time lookup. This is necessary
   // for tables with many columns.

dashboard/src/components/dataBrowser/BaseTableForm/BaseTableForm.tsx

@@ -1,6 +1,7 @@
 import { useDialog } from '@/components/common/DialogProvider';
 import Form from '@/components/common/Form';
 import { baseColumnValidationSchema } from '@/components/dataBrowser/BaseColumnForm';
+import type { DialogFormProps } from '@/types/common';
 import type { DatabaseTable, ForeignKeyRelation } from '@/types/dataBrowser';
 import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
@@ -30,7 +31,7 @@ export interface BaseTableFormValues
   foreignKeyRelations?: ForeignKeyRelation[];
 }
 
-export interface BaseTableFormProps {
+export interface BaseTableFormProps extends DialogFormProps {
   /**
    * Function to be called when the form is submitted.
    */
@@ -99,7 +100,9 @@ function NameInput() {
 function FormFooter({
   onCancel,
   submitButtonText,
-}: Pick<BaseTableFormProps, 'onCancel' | 'submitButtonText'>) {
+  location,
+}: Pick<BaseTableFormProps, 'onCancel' | 'submitButtonText'> &
+  Pick<DialogFormProps, 'location'>) {
   const { onDirtyStateChange } = useDialog();
   const { isSubmitting, dirtyFields } = useFormState();
 
@@ -108,8 +111,8 @@ function FormFooter({
   const isDirty = Object.keys(dirtyFields).length > 0;
 
   useEffect(() => {
-    onDirtyStateChange(isDirty, 'drawer');
-  }, [isDirty, onDirtyStateChange]);
+    onDirtyStateChange(isDirty, location);
+  }, [isDirty, location, onDirtyStateChange]);
 
   return (
     <Box className="grid flex-shrink-0 grid-flow-col justify-between gap-3 border-t-1 p-2">
@@ -135,6 +138,7 @@ function FormFooter({
 }
 
 export default function BaseTableForm({
+  location,
   onSubmit: handleExternalSubmit,
   onCancel,
   submitButtonText = 'Save',
@@ -168,7 +172,11 @@ export default function BaseTableForm({
         <ForeignKeyEditorSection />
       </div>
 
-      <FormFooter onCancel={onCancel} submitButtonText={submitButtonText} />
+      <FormFooter
+        onCancel={onCancel}
+        submitButtonText={submitButtonText}
+        location={location}
+      />
     </Form>
   );
 }

dashboard/src/components/dataBrowser/BaseTableForm/ForeignKeyEditorSection.tsx

@@ -1,5 +1,7 @@
 import { useDialog } from '@/components/common/DialogProvider';
 import type { BaseForeignKeyFormValues } from '@/components/dataBrowser/BaseForeignKeyForm';
+import CreateForeignKeyForm from '@/components/dataBrowser/CreateForeignKeyForm';
+import EditForeignKeyForm from '@/components/dataBrowser/EditForeignKeyForm';
 import type { DatabaseColumn, ForeignKeyRelation } from '@/types/dataBrowser';
 import Button from '@/ui/v2/Button';
 import PlusIcon from '@/ui/v2/icons/PlusIcon';
@@ -68,18 +70,19 @@ export default function ForeignKeyEditorSection() {
           onEdit={() => {
             const primaryKeyIndex = getValues('primaryKeyIndex');
 
-            openDialog('EDIT_FOREIGN_KEY', {
+            openDialog({
               title: 'Edit Foreign Key Relation',
-              payload: {
-                foreignKeyRelation: fields[index],
-                availableColumns: columns.map((column, columnIndex) =>
-                  columnIndex === primaryKeyIndex
-                    ? { ...column, isPrimary: true }
-                    : column,
-                ),
-                onSubmit: (values: BaseForeignKeyFormValues) =>
-                  handleEdit(values, index),
-              },
+              component: (
+                <EditForeignKeyForm
+                  foreignKeyRelation={fields[index] as ForeignKeyRelation}
+                  availableColumns={columns.map((column, columnIndex) =>
+                    columnIndex === primaryKeyIndex
+                      ? { ...column, isPrimary: true }
+                      : column,
+                  )}
+                  onSubmit={(values) => handleEdit(values, index)}
+                />
+              ),
             });
           }}
           onDelete={() => remove(index)}
@@ -105,7 +108,7 @@ export default function ForeignKeyEditorSection() {
         onClick={() => {
           const primaryKeyIndex = getValues('primaryKeyIndex');
 
-          openDialog('CREATE_FOREIGN_KEY', {
+          openDialog({
             title: (
               <span className="grid grid-flow-row">
                 <span>Add a Foreign Key Relation</span>
@@ -116,14 +119,16 @@ export default function ForeignKeyEditorSection() {
                 </Text>
               </span>
             ),
-            payload: {
-              availableColumns: columns.map((column, index) =>
-                index === primaryKeyIndex
-                  ? { ...column, isPrimary: true }
-                  : column,
-              ),
-              onSubmit: handleCreate,
-            },
+            component: (
+              <CreateForeignKeyForm
+                availableColumns={columns.map((column, index) =>
+                  index === primaryKeyIndex
+                    ? { ...column, isPrimary: true }
+                    : column,
+                )}
+                onSubmit={handleCreate}
+              />
+            ),
           });
         }}
       >

dashboard/src/components/dataBrowser/ColumnAutocomplete/ColumnAutocomplete.test.tsx

@@ -1,4 +1,4 @@
-import customClaimsQuery from '@/utils/msw/mocks/graphql/customClaimsQuery';
+import permissionVariablesQuery from '@/utils/msw/mocks/graphql/permissionVariablesQuery';
 import hasuraMetadataQuery from '@/utils/msw/mocks/rest/hasuraMetadataQuery';
 import tableQuery from '@/utils/msw/mocks/rest/tableQuery';
 import { render, screen } from '@/utils/testUtils';
@@ -6,7 +6,11 @@ import { setupServer } from 'msw/node';
 import { test, vi } from 'vitest';
 import ColumnAutocomplete from './ColumnAutocomplete';
 
-const server = setupServer(tableQuery, hasuraMetadataQuery, customClaimsQuery);
+const server = setupServer(
+  tableQuery,
+  hasuraMetadataQuery,
+  permissionVariablesQuery,
+);
 
 beforeAll(() => server.listen({ onUnhandledRequest: 'warn' }));
 afterEach(() => server.resetHandlers());

dashboard/src/components/dataBrowser/CreateColumnForm/CreateColumnForm.tsx

@@ -15,11 +15,11 @@ import { useRouter } from 'next/router';
 import { FormProvider, useForm } from 'react-hook-form';
 
 export interface CreateColumnFormProps
-  extends Pick<BaseColumnFormProps, 'onCancel'> {
+  extends Pick<BaseColumnFormProps, 'onCancel' | 'location'> {
   /**
    * Function to be called when the form is submitted.
    */
-  onSubmit?: () => Promise<void>;
+  onSubmit?: (args?: any) => Promise<any>;
 }
 
 export default function CreateColumnForm({

dashboard/src/components/dataBrowser/CreateForeignKeyForm/CreateForeignKeyForm.tsx

@@ -13,7 +13,10 @@ import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 export interface CreateForeignKeyFormProps
-  extends Pick<BaseForeignKeyFormProps, 'onCancel' | 'availableColumns'> {
+  extends Pick<
+    BaseForeignKeyFormProps,
+    'onCancel' | 'availableColumns' | 'location'
+  > {
   /**
    * Column selected by default.
    */
@@ -21,7 +24,7 @@ export interface CreateForeignKeyFormProps
   /**
    * Function to be called when the form is submitted.
    */
-  onSubmit?: (values: BaseForeignKeyFormValues) => Promise<void>;
+  onSubmit?: (values: BaseForeignKeyFormValues) => Promise<void> | void;
 }
 
 export default function CreateForeignKeyForm({
@@ -51,9 +54,7 @@ export default function CreateForeignKeyForm({
     setError(undefined);
 
     try {
-      if (onSubmit) {
-        await onSubmit(values);
-      }
+      await onSubmit?.(values);
     } catch (submitError) {
       if (submitError && submitError instanceof Error) {
         setError(submitError);

dashboard/src/components/dataBrowser/CreateRecordForm/CreateRecordForm.tsx

@@ -10,11 +10,11 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
 
 export interface CreateRecordFormProps
-  extends Pick<BaseRecordFormProps, 'columns' | 'onCancel'> {
+  extends Pick<BaseRecordFormProps, 'columns' | 'onCancel' | 'location'> {
   /**
    * Function to be called when the form is submitted.
    */
-  onSubmit?: () => Promise<void>;
+  onSubmit?: (args?: any) => Promise<any>;
 }
 
 export default function CreateRecordForm({

dashboard/src/components/dataBrowser/CreateTableForm/CreateTableForm.tsx

@@ -17,7 +17,7 @@ import { useRouter } from 'next/router';
 import { FormProvider, useForm } from 'react-hook-form';
 
 export interface CreateTableFormProps
-  extends Pick<BaseTableFormProps, 'onCancel'> {
+  extends Pick<BaseTableFormProps, 'onCancel' | 'location'> {
   /**
    * Schema where the table should be created.
    */
@@ -25,7 +25,7 @@ export interface CreateTableFormProps
   /**
    * Function to be called when the form is submitted.
    */
-  onSubmit?: () => Promise<void>;
+  onSubmit?: (args?: any) => Promise<any>;
 }
 
 export default function CreateTableForm({

dashboard/src/components/dataBrowser/DataBrowserGrid/DataBrowserGrid.tsx

@@ -5,6 +5,7 @@ import DataGridDateCell from '@/components/common/DataGridDateCell';
 import DataGridNumericCell from '@/components/common/DataGridNumericCell';
 import DataGridTextCell from '@/components/common/DataGridTextCell';
 import { useDialog } from '@/components/common/DialogProvider';
+import FormActivityIndicator from '@/components/common/FormActivityIndicator';
 import InlineCode from '@/components/common/InlineCode';
 import DataBrowserEmptyState from '@/components/dataBrowser/DataBrowserEmptyState';
 import DataBrowserGridControls from '@/components/dataBrowser/DataBrowserGridControls';
@@ -28,9 +29,25 @@ import {
 } from '@/utils/dataBrowser/postgresqlConstants';
 import { isSchemaLocked } from '@/utils/dataBrowser/schemaHelpers';
 import { useQueryClient } from '@tanstack/react-query';
+import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
+const CreateColumnForm = dynamic(
+  () => import('@/components/dataBrowser/CreateColumnForm'),
+  { ssr: false, loading: () => <FormActivityIndicator /> },
+);
+
+const EditColumnForm = dynamic(
+  () => import('@/components/dataBrowser/EditColumnForm'),
+  { ssr: false, loading: () => <FormActivityIndicator /> },
+);
+
+const CreateRecordForm = dynamic(
+  () => import('@/components/dataBrowser/CreateRecordForm'),
+  { ssr: false, loading: () => <FormActivityIndicator /> },
+);
+
 export interface DataBrowserGridProps extends Partial<DataGridProps<any>> {}
 
 export function createDataGridColumn(
@@ -273,33 +290,36 @@ export default function DataBrowserGrid({
   const memoizedData = useMemo(() => rows, [rows]);
 
   async function handleInsertRowClick() {
-    openDrawer('CREATE_RECORD', {
+    openDrawer({
       title: 'Insert a New Row',
-      payload: {
-        columns: memoizedColumns,
-        onSubmit: refetch,
-      },
+      component: (
+        <CreateRecordForm
+          // TODO: Create proper typings for data browser columns
+          columns={memoizedColumns as unknown as DataBrowserGridColumn[]}
+          onSubmit={refetch}
+        />
+      ),
     });
   }
 
   async function handleInsertColumnClick() {
-    openDrawer('CREATE_COLUMN', {
+    openDrawer({
       title: 'Insert a New Column',
-      payload: {
-        onSubmit: refetch,
-      },
+      component: <CreateColumnForm onSubmit={refetch} />,
     });
   }
 
   async function handleEditColumnClick(
     column: DataBrowserGridColumn<NormalizedQueryDataRow>,
   ) {
-    openDrawer('EDIT_COLUMN', {
+    openDrawer({
       title: 'Edit Column',
-      payload: {
-        column,
-        onSubmit: () => queryClient.refetchQueries([currentTablePath]),
-      },
+      component: (
+        <EditColumnForm
+          column={column}
+          onSubmit={() => queryClient.refetchQueries([currentTablePath])}
+        />
+      ),
     });
   }
 

dashboard/src/components/dataBrowser/DataBrowserSidebar/DataBrowserSidebar.tsx

@@ -1,4 +1,5 @@
 import { useDialog } from '@/components/common/DialogProvider';
+import FormActivityIndicator from '@/components/common/FormActivityIndicator';
 import InlineCode from '@/components/common/InlineCode';
 import NavLink from '@/components/common/NavLink';
 import RetryableErrorBoundary from '@/components/common/RetryableErrorBoundary';
@@ -31,11 +32,36 @@ import Select from '@/ui/v2/Select';
 import Text from '@/ui/v2/Text';
 import { isSchemaLocked } from '@/utils/dataBrowser/schemaHelpers';
 import { useQueryClient } from '@tanstack/react-query';
+import dynamic from 'next/dynamic';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
+const CreateTableForm = dynamic(
+  () => import('@/components/dataBrowser/CreateTableForm'),
+  {
+    ssr: false,
+    loading: () => <FormActivityIndicator />,
+  },
+);
+
+const EditTableForm = dynamic(
+  () => import('@/components/dataBrowser/EditTableForm'),
+  {
+    ssr: false,
+    loading: () => <FormActivityIndicator />,
+  },
+);
+
+const EditPermissionsForm = dynamic(
+  () => import('@/components/dataBrowser/EditPermissionsForm'),
+  {
+    ssr: false,
+    loading: () => <FormActivityIndicator />,
+  },
+);
+
 export interface DataBrowserSidebarProps extends Omit<BoxProps, 'children'> {
   /**
    * Function to be called when a sidebar item is clicked.
@@ -200,7 +226,7 @@ function DataBrowserSidebarContent({
     table: string,
     disabled?: boolean,
   ) {
-    openDrawer('EDIT_PERMISSIONS', {
+    openDrawer({
       title: (
         <span className="inline-grid grid-flow-col items-center gap-2">
           Permissions
@@ -208,22 +234,18 @@ function DataBrowserSidebarContent({
           <Chip label="Preview" size="small" color="info" component="span" />
         </span>
       ),
+      component: (
+        <EditPermissionsForm
+          disabled={disabled}
+          schema={schema}
+          table={table}
+        />
+      ),
       props: {
         PaperProps: {
           className: 'lg:w-[65%] lg:max-w-7xl',
         },
       },
-      payload: {
-        onSubmit: async () => {
-          await queryClient.refetchQueries([
-            `${dataSourceSlug}.${schema}.${table}`,
-          ]);
-          await refetch();
-        },
-        disabled,
-        schema,
-        table,
-      },
     });
   }
 
@@ -296,9 +318,11 @@ function DataBrowserSidebarContent({
           endIcon={<PlusIcon />}
           className="mt-1 w-full justify-between px-2"
           onClick={() => {
-            openDrawer('CREATE_TABLE', {
+            openDrawer({
               title: 'Create a New Table',
-              payload: { onSubmit: refetch, schema: selectedSchema },
+              component: (
+                <CreateTableForm onSubmit={refetch} schema={selectedSchema} />
+              ),
             });
 
             onSidebarItemClick();
@@ -328,69 +352,68 @@ function DataBrowserSidebarContent({
                   className="group"
                   key={tablePath}
                   secondaryAction={
-                    !isSelectedSchemaLocked && (
-                      <Dropdown.Root
-                        id="table-management-menu"
-                        onOpen={() => setSidebarMenuTable(tablePath)}
-                        onClose={() => setSidebarMenuTable(undefined)}
+                    <Dropdown.Root
+                      id="table-management-menu"
+                      onOpen={() => setSidebarMenuTable(tablePath)}
+                      onClose={() => setSidebarMenuTable(undefined)}
+                    >
+                      <Dropdown.Trigger
+                        asChild
+                        hideChevron
+                        disabled={tablePath === removableTable}
                       >
-                        <Dropdown.Trigger
-                          asChild
-                          hideChevron
-                          disabled={tablePath === removableTable}
+                        <IconButton
+                          variant="borderless"
+                          color={isSelected ? 'primary' : 'secondary'}
+                          className={twMerge(
+                            !isSelected &&
+                              'opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 group-active:opacity-100',
+                          )}
                         >
-                          <IconButton
-                            variant="borderless"
-                            color={isSelected ? 'primary' : 'secondary'}
-                            className={twMerge(
-                              !isSelected &&
-                                'opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 group-active:opacity-100',
-                            )}
+                          <DotsHorizontalIcon />
+                        </IconButton>
+                      </Dropdown.Trigger>
+
+                      <Dropdown.Content menu PaperProps={{ className: 'w-52' }}>
+                        {isGitHubConnected ? (
+                          <Dropdown.Item
+                            className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
+                            onClick={() =>
+                              handleEditPermissionClick(
+                                table.table_schema,
+                                table.table_name,
+                                true,
+                              )
+                            }
                           >
-                            <DotsHorizontalIcon />
-                          </IconButton>
-                        </Dropdown.Trigger>
+                            <UsersIcon
+                              className="h-4 w-4"
+                              sx={{ color: 'text.secondary' }}
+                            />
 
-                        <Dropdown.Content
-                          menu
-                          PaperProps={{ className: 'w-52' }}
-                        >
-                          {isGitHubConnected ? (
-                            <Dropdown.Item
-                              className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
-                              onClick={() =>
-                                handleEditPermissionClick(
-                                  table.table_schema,
-                                  table.table_name,
-                                  true,
-                                )
-                              }
-                            >
-                              <UsersIcon
-                                className="h-4 w-4"
-                                sx={{ color: 'text.secondary' }}
-                              />
-
-                              <span>View Permissions</span>
-                            </Dropdown.Item>
-                          ) : (
-                            [
+                            <span>View Permissions</span>
+                          </Dropdown.Item>
+                        ) : (
+                          [
+                            !isSelectedSchemaLocked && (
                               <Dropdown.Item
                                 key="edit-table"
                                 className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
                                 onClick={() =>
-                                  openDrawer('EDIT_TABLE', {
+                                  openDrawer({
                                     title: 'Edit Table',
-                                    payload: {
-                                      onSubmit: async () => {
-                                        await queryClient.refetchQueries([
-                                          `${dataSourceSlug}.${table.table_schema}.${table.table_name}`,
-                                        ]);
-                                        await refetch();
-                                      },
-                                      schema: table.table_schema,
-                                      table,
-                                    },
+                                    component: (
+                                      <EditTableForm
+                                        onSubmit={async () => {
+                                          await queryClient.refetchQueries([
+                                            `${dataSourceSlug}.${table.table_schema}.${table.table_name}`,
+                                          ]);
+                                          await refetch();
+                                        }}
+                                        schema={table.table_schema}
+                                        table={table}
+                                      />
+                                    ),
                                   })
                                 }
                               >
@@ -400,32 +423,38 @@ function DataBrowserSidebarContent({
                                 />
 
                                 <span>Edit Table</span>
-                              </Dropdown.Item>,
+                              </Dropdown.Item>
+                            ),
+                            !isSelectedSchemaLocked && (
                               <Divider
                                 key="edit-table-separator"
                                 component="li"
-                              />,
-                              <Dropdown.Item
-                                key="edit-permissions"
-                                className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
-                                onClick={() =>
-                                  handleEditPermissionClick(
-                                    table.table_schema,
-                                    table.table_name,
-                                  )
-                                }
-                              >
-                                <UsersIcon
-                                  className="h-4 w-4"
-                                  sx={{ color: 'text.secondary' }}
-                                />
+                              />
+                            ),
+                            <Dropdown.Item
+                              key="edit-permissions"
+                              className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
+                              onClick={() =>
+                                handleEditPermissionClick(
+                                  table.table_schema,
+                                  table.table_name,
+                                )
+                              }
+                            >
+                              <UsersIcon
+                                className="h-4 w-4"
+                                sx={{ color: 'text.secondary' }}
+                              />
 
-                                <span>Edit Permissions</span>
-                              </Dropdown.Item>,
+                              <span>Edit Permissions</span>
+                            </Dropdown.Item>,
+                            !isSelectedSchemaLocked && (
                               <Divider
                                 key="edit-permissions-separator"
                                 component="li"
-                              />,
+                              />
+                            ),
+                            !isSelectedSchemaLocked && (
                               <Dropdown.Item
                                 key="delete-table"
                                 className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
@@ -443,12 +472,12 @@ function DataBrowserSidebarContent({
                                 />
 
                                 <span>Delete Table</span>
-                              </Dropdown.Item>,
-                            ]
-                          )}
-                        </Dropdown.Content>
-                      </Dropdown.Root>
-                    )
+                              </Dropdown.Item>
+                            ),
+                          ]
+                        )}
+                      </Dropdown.Content>
+                    </Dropdown.Root>
                   }
                 >
                   <ListItem.Button
@@ -518,7 +547,7 @@ export default function DataBrowserSidebar({
       document.removeEventListener('keydown', closeSidebarWhenEscapeIsPressed);
   }, []);
 
-  if (isPlatform && !currentApplication?.hasuraGraphqlAdminSecret) {
+  if (isPlatform && !currentApplication?.config?.hasura.adminSecret) {
     return null;
   }
 

dashboard/src/components/dataBrowser/EditColumnForm/EditColumnForm.tsx

@@ -18,7 +18,7 @@ import { useRouter } from 'next/router';
 import { FormProvider, useForm } from 'react-hook-form';
 
 export interface EditColumnFormProps
-  extends Pick<BaseColumnFormProps, 'onCancel'> {
+  extends Pick<BaseColumnFormProps, 'onCancel' | 'location'> {
   /**
    * Column to be edited.
    */

dashboard/src/components/dataBrowser/EditForeignKeyForm/EditForeignKeyForm.tsx

@@ -14,7 +14,10 @@ import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 export interface EditForeignKeyFormProps
-  extends Pick<BaseForeignKeyFormProps, 'onCancel' | 'availableColumns'> {
+  extends Pick<
+    BaseForeignKeyFormProps,
+    'onCancel' | 'availableColumns' | 'location'
+  > {
   /**
    * Foreign key relation to be edited.
    */
@@ -26,7 +29,7 @@ export interface EditForeignKeyFormProps
   /**
    * Function to be called when the form is submitted.
    */
-  onSubmit?: (values: BaseForeignKeyFormValues) => Promise<void>;
+  onSubmit?: (values: BaseForeignKeyFormValues) => Promise<void> | void;
 }
 
 export default function EditForeignKeyForm({
@@ -57,9 +60,7 @@ export default function EditForeignKeyForm({
     setError(undefined);
 
     try {
-      if (onSubmit) {
-        await onSubmit(values);
-      }
+      await onSubmit?.(values);
     } catch (submitError) {
       if (submitError && submitError instanceof Error) {
         setError(submitError);

dashboard/src/components/dataBrowser/EditPermissionsForm/EditPermissionsForm.tsx

@@ -3,6 +3,7 @@ import useMetadataQuery from '@/hooks/dataBrowser/useMetadataQuery';
 import useTableQuery from '@/hooks/dataBrowser/useTableQuery';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import { useRemoteApplicationGQLClient } from '@/hooks/useRemoteApplicationGQLClient';
+import type { DialogFormProps } from '@/types/common';
 import type {
   DatabaseAccessLevel,
   DatabaseAction,
@@ -30,7 +31,7 @@ import { twMerge } from 'tailwind-merge';
 import RolePermissionEditorForm from './RolePermissionEditorForm';
 import RolePermissionsRow from './RolePermissionsRow';
 
-export interface EditPermissionsFormProps {
+export interface EditPermissionsFormProps extends DialogFormProps {
   /**
    * Determines whether the form is disabled or not.
    */
@@ -54,6 +55,7 @@ export default function EditPermissionsForm({
   schema,
   table,
   onCancel,
+  location,
 }: EditPermissionsFormProps) {
   const [role, setRole] = useState<string>();
   const [action, setAction] = useState<DatabaseAction>();
@@ -181,6 +183,7 @@ export default function EditPermissionsForm({
 
     return (
       <RolePermissionEditorForm
+        location={location}
         resourceVersion={metadata?.resourceVersion}
         disabled={disabled}
         schema={schema}

dashboard/src/components/dataBrowser/EditPermissionsForm/RolePermissionEditorForm.tsx

@@ -2,6 +2,7 @@ import { useDialog } from '@/components/common/DialogProvider';
 import Form from '@/components/common/Form';
 import HighlightedText from '@/components/common/HighlightedText';
 import useManagePermissionMutation from '@/hooks/dataBrowser/useManagePermissionMutation';
+import type { DialogFormProps } from '@/types/common';
 import type {
   DatabaseAction,
   HasuraMetadataPermission,
@@ -13,6 +14,7 @@ import Button from '@/ui/v2/Button';
 import Text from '@/ui/v2/Text';
 import convertToHasuraPermissions from '@/utils/dataBrowser/convertToHasuraPermissions';
 import convertToRuleGroup from '@/utils/dataBrowser/convertToRuleGroup';
+import getServerError from '@/utils/settings/getServerError';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useQueryClient } from '@tanstack/react-query';
@@ -72,7 +74,7 @@ export interface RolePermissionEditorFormValues {
   computedFields?: string[];
 }
 
-export interface RolePermissionEditorFormProps {
+export interface RolePermissionEditorFormProps extends DialogFormProps {
   /**
    * Determines whether or not the form is disabled.
    */
@@ -169,6 +171,7 @@ export default function RolePermissionEditorForm({
   onCancel,
   permission,
   disabled,
+  location,
 }: RolePermissionEditorFormProps) {
   const queryClient = useQueryClient();
   const {
@@ -214,8 +217,8 @@ export default function RolePermissionEditorForm({
   const isDirty = Object.keys(dirtyFields).length > 0;
 
   useEffect(() => {
-    onDirtyStateChange(isDirty, 'drawer');
-  }, [isDirty, onDirtyStateChange]);
+    onDirtyStateChange(isDirty, location);
+  }, [isDirty, location, onDirtyStateChange]);
 
   async function handleSubmit(values: RolePermissionEditorFormValues) {
     const managePermissionPromise = managePermission({
@@ -245,7 +248,7 @@ export default function RolePermissionEditorForm({
             : permission?.check,
         backend_only: values.backendOnly,
         computed_fields:
-          permission?.computed_fields.length > 0
+          permission?.computed_fields?.length > 0
             ? permission?.computed_fields
             : null,
       },
@@ -256,12 +259,12 @@ export default function RolePermissionEditorForm({
       {
         loading: 'Saving permission...',
         success: 'Permission has been saved successfully.',
-        error: 'An error occurred while saving the permission.',
+        error: getServerError('An error occurred while saving the permission.'),
       },
       getToastStyleProps(),
     );
 
-    onDirtyStateChange(false, 'drawer');
+    onDirtyStateChange(false, location);
     onSubmit?.();
   }
 
@@ -270,7 +273,7 @@ export default function RolePermissionEditorForm({
       openDirtyConfirmation({
         props: {
           onPrimaryAction: () => {
-            onDirtyStateChange(false, 'drawer');
+            onDirtyStateChange(false, location);
             onCancel?.();
           },
         },
@@ -295,12 +298,14 @@ export default function RolePermissionEditorForm({
       {
         loading: 'Deleting permission...',
         success: 'Permission has been deleted successfully.',
-        error: 'An error occurred while deleting the permission.',
+        error: getServerError(
+          'An error occurred while deleting the permission.',
+        ),
       },
       getToastStyleProps(),
     );
 
-    onDirtyStateChange(false, 'drawer');
+    onDirtyStateChange(false, location);
     onSubmit?.();
   }
 

dashboard/src/components/dataBrowser/EditPermissionsForm/sections/ColumnPresetsSection.tsx

@@ -11,8 +11,8 @@ import XIcon from '@/ui/v2/icons/XIcon';
 import InputLabel from '@/ui/v2/InputLabel';
 import Option from '@/ui/v2/Option';
 import Text from '@/ui/v2/Text';
-import getPermissionVariablesArray from '@/utils/settings/getPermissionVariablesArray';
-import { useGetAppCustomClaimsQuery } from '@/utils/__generated__/graphql';
+import getAllPermissionVariables from '@/utils/settings/getAllPermissionVariables';
+import { useGetRolesPermissionsQuery } from '@/utils/__generated__/graphql';
 import { useTheme } from '@mui/material';
 import clsx from 'clsx';
 import { useFieldArray, useFormContext, useWatch } from 'react-hook-form';
@@ -51,8 +51,8 @@ export default function ColumnPresetsSection({
   } = useTableQuery([`default.${schema}.${table}`], { schema, table });
 
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const { data: customClaimsData } = useGetAppCustomClaimsQuery({
-    variables: { id: currentApplication?.id },
+  const { data: permissionVariablesData } = useGetRolesPermissionsQuery({
+    variables: { appId: currentApplication?.id },
     skip: !currentApplication?.id,
   });
   const {
@@ -74,8 +74,8 @@ export default function ColumnPresetsSection({
     throw tableError;
   }
 
-  const permissionVariableOptions = getPermissionVariablesArray(
-    customClaimsData?.app?.authJwtCustomClaims,
+  const permissionVariableOptions = getAllPermissionVariables(
+    permissionVariablesData?.config?.auth?.session?.accessToken?.customClaims,
   ).map(({ key }) => ({
     label: `X-Hasura-${key}`,
     value: `X-Hasura-${key}`,
@@ -136,7 +136,7 @@ export default function ColumnPresetsSection({
                   disableClearable={false}
                   clearIcon={
                     <XIcon
-                      className="w-4 h-4 mt-px"
+                      className="mt-px h-4 w-4"
                       sx={{ color: theme.palette.text.primary }}
                     />
                   }
@@ -187,7 +187,7 @@ export default function ColumnPresetsSection({
                   disabled={disabled}
                   variant="outlined"
                   color="secondary"
-                  className="shrink-0 grow-0 flex-[40px]"
+                  className="flex-[40px] shrink-0 grow-0"
                   onClick={() => {
                     if (fields.length === 1) {
                       remove(index);
@@ -199,7 +199,7 @@ export default function ColumnPresetsSection({
                     remove(index);
                   }}
                 >
-                  <XIcon className="w-4 h-4" />
+                  <XIcon className="h-4 w-4" />
                 </IconButton>
               </div>
             ))}

dashboard/src/components/dataBrowser/EditPermissionsForm/sections/RowPermissionsSection.tsx

@@ -6,6 +6,7 @@ import Input from '@/ui/v2/Input';
 import Radio from '@/ui/v2/Radio';
 import RadioGroup from '@/ui/v2/RadioGroup';
 import Text from '@/ui/v2/Text';
+import type { FocusEvent } from 'react';
 import { useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import PermissionSettingsSection from './PermissionSettingsSection';
@@ -130,7 +131,13 @@ export default function RowPermissionsSection({
 
       {action === 'select' && (
         <Input
-          {...register('limit')}
+          {...register('limit', {
+            onBlur: (event: FocusEvent<HTMLInputElement>) => {
+              if (!event.target.value) {
+                setValue('limit', null);
+              }
+            },
+          })}
           disabled={disabled}
           id="limit"
           type="number"

dashboard/src/components/dataBrowser/EditPermissionsForm/validationSchemas.ts

@@ -43,7 +43,10 @@ const baseValidationSchema = Yup.object().shape({
 });
 
 const selectValidationSchema = baseValidationSchema.shape({
-  limit: Yup.number().min(0, 'Limit must not be negative.').nullable(true),
+  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),

dashboard/src/components/dataBrowser/EditTableForm/EditTableForm.tsx

@@ -23,7 +23,7 @@ import { useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 export interface EditTableFormProps
-  extends Pick<BaseTableFormProps, 'onCancel'> {
+  extends Pick<BaseTableFormProps, 'onCancel' | 'location'> {
   /**
    * Schema where the table is located.
    */

dashboard/src/components/dataBrowser/RuleGroupEditor/RuleGroupEditor.stories.tsx

@@ -2,7 +2,7 @@ import Form from '@/components/common/Form';
 import type { RuleGroup } from '@/types/dataBrowser';
 import Button from '@/ui/v2/Button';
 import Text from '@/ui/v2/Text';
-import customClaimsQuery from '@/utils/msw/mocks/graphql/customClaimsQuery';
+import permissionVariablesQuery from '@/utils/msw/mocks/graphql/permissionVariablesQuery';
 import hasuraMetadataQuery from '@/utils/msw/mocks/rest/hasuraMetadataQuery';
 import tableQuery from '@/utils/msw/mocks/rest/tableQuery';
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
@@ -36,7 +36,7 @@ const defaultParameters = {
     },
   },
   msw: {
-    handlers: [tableQuery, hasuraMetadataQuery, customClaimsQuery],
+    handlers: [tableQuery, hasuraMetadataQuery, permissionVariablesQuery],
   },
 };
 

dashboard/src/components/dataBrowser/RuleGroupEditor/RuleValueInput.tsx

@@ -6,11 +6,12 @@ import ColumnAutocomplete from '@/components/dataBrowser/ColumnAutocomplete';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import type { HasuraOperator } from '@/types/dataBrowser';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
+import type { AutocompleteOption } from '@/ui/v2/Autocomplete';
 import type { InputProps } from '@/ui/v2/Input';
 import { inputClasses } from '@/ui/v2/Input';
 import Option from '@/ui/v2/Option';
-import getPermissionVariablesArray from '@/utils/settings/getPermissionVariablesArray';
-import { useGetAppCustomClaimsQuery } from '@/utils/__generated__/graphql';
+import getAllPermissionVariables from '@/utils/settings/getAllPermissionVariables';
+import { useGetRolesPermissionsQuery } from '@/utils/__generated__/graphql';
 import { useController, useFormContext, useWatch } from 'react-hook-form';
 import useRuleGroupEditor from './useRuleGroupEditor';
 
@@ -116,8 +117,8 @@ export default function RuleValueInput({
     data,
     loading,
     error: customClaimsError,
-  } = useGetAppCustomClaimsQuery({
-    variables: { id: currentApplication?.id },
+  } = useGetRolesPermissionsQuery({
+    variables: { appId: currentApplication?.id },
     skip: !isHasuraInput || !currentApplication?.id,
   });
 
@@ -199,8 +200,8 @@ export default function RuleValueInput({
     );
   }
 
-  const availableHasuraPermissionVariables = getPermissionVariablesArray(
-    data?.app?.authJwtCustomClaims,
+  const availableHasuraPermissionVariables = getAllPermissionVariables(
+    data?.config?.auth?.session?.accessToken?.customClaims,
   ).map(({ key }) => ({
     value: `X-Hasura-${key}`,
     label: `X-Hasura-${key}`,
@@ -211,12 +212,13 @@ export default function RuleValueInput({
     <ControlledAutocomplete
       disabled={disabled}
       freeSolo={!isHasuraInput}
-      autoSelect={!isHasuraInput}
       autoHighlight={isHasuraInput}
-      open
-      isOptionEqualToValue={(option, value) => {
-        if (typeof value === 'string') {
-          return option.value.toLowerCase() === (value as string).toLowerCase();
+      isOptionEqualToValue={(
+        option,
+        value: string | number | AutocompleteOption<string>,
+      ) => {
+        if (typeof value !== 'object') {
+          return option.value.toLowerCase() === value?.toString().toLowerCase();
         }
 
         return option.value.toLowerCase() === value.value.toLowerCase();

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

@@ -10,6 +10,7 @@ import ArrowCounterclockwiseIcon from '@/ui/v2/icons/ArrowCounterclockwiseIcon';
 import ChevronRightIcon from '@/ui/v2/icons/ChevronRightIcon';
 import { ListItem } from '@/ui/v2/ListItem';
 import Tooltip from '@/ui/v2/Tooltip';
+import getServerError from '@/utils/settings/getServerError';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import type { DeploymentRowFragment } from '@/utils/__generated__/graphql';
 import { useInsertDeploymentMutation } from '@/utils/__generated__/graphql';
@@ -58,12 +59,12 @@ export default function DeploymentListItem({
   return (
     <ListItem.Root>
       <ListItem.Button
-        className="grid grid-flow-col items-center justify-between gap-2 rounded-none px-2 py-2"
+        className="grid grid-flow-col items-center justify-between gap-2 rounded-none p-2"
         component={NavLink}
         href={`/${currentWorkspace.slug}/${currentApplication.slug}/deployments/${deployment.id}`}
         aria-label={commitMessage || 'No commit message'}
       >
-        <div className="flex cursor-pointer flex-row items-center justify-center space-x-2 self-center">
+        <div className="grid grid-flow-col items-center justify-center gap-2 self-center">
           <ListItem.Avatar>
             <Avatar
               name={deployment.commitUserName}
@@ -84,7 +85,7 @@ export default function DeploymentListItem({
           />
         </div>
 
-        <div className="grid grid-flow-col items-center gap-2">
+        <div className="grid grid-flow-col items-center justify-end gap-2">
           {showRedeploy && (
             <Tooltip
               title={
@@ -122,7 +123,9 @@ export default function DeploymentListItem({
                     {
                       loading: 'Scheduling deployment...',
                       success: 'Deployment has been scheduled successfully.',
-                      error: 'An error occurred when scheduling deployment.',
+                      error: getServerError(
+                        'An error occurred when scheduling deployment.',
+                      ),
                     },
                     getToastStyleProps(),
                   );
@@ -139,16 +142,16 @@ export default function DeploymentListItem({
           )}
 
           {isLive && (
-            <div className="flex w-12 justify-end">
+            <div className="hidden w-12 justify-end sm:flex">
               <Chip size="small" color="success" label="Live" />
             </div>
           )}
 
-          <div className="w-16 text-right font-mono text-sm- font-medium">
+          <div className="hidden w-16 text-right font-mono text-sm- font-medium sm:block">
             {deployment.commitSHA.substring(0, 7)}
           </div>
 
-          <div className="w-[80px] text-right font-mono text-sm- font-medium">
+          <div className="text-right font-mono text-sm- font-medium sm:w-20">
             <AppDeploymentDuration
               startedAt={deployment.deploymentStartedAt}
               endedAt={deployment.deploymentEndedAt}

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

@@ -0,0 +1,94 @@
+import type { Deployment } from '@/types/application';
+import { render, screen } from '@/utils/testUtils';
+import { test, vi } from 'vitest';
+import DeploymentStatusMessage from './DeploymentStatusMessage';
+
+const defaultDeployment: Deployment = {
+  id: 'de305d54-75b4-431b-adb2-eb6b9e546013',
+  commitUserName: 'john.doe',
+  commitUserAvatarUrl: 'https://example.com/avatar.png',
+  deploymentStartedAt: '2023-02-24T12:00:00.000Z',
+  deploymentEndedAt: null,
+  deploymentStatus: 'SCHEDULED',
+  commitSHA: '1234567890',
+  commitMessage: 'Update README.md',
+};
+
+beforeAll(() => {
+  vi.useFakeTimers();
+});
+
+afterAll(() => {
+  vi.useRealTimers();
+});
+
+test('should render the avatar of the user who deployed the application', () => {
+  render(
+    <DeploymentStatusMessage
+      deployment={defaultDeployment}
+      appCreatedAt="2023-02-24"
+    />,
+  );
+
+  expect(
+    screen.getByRole('img', {
+      name: `Avatar of ${defaultDeployment.commitUserName}`,
+    }),
+  ).toHaveAttribute(
+    'style',
+    `background-image: url(${defaultDeployment.commitUserAvatarUrl});`,
+  );
+});
+
+test('should render "updated just now" when the deployment is in progress and has not ended', () => {
+  render(
+    <DeploymentStatusMessage
+      deployment={defaultDeployment}
+      appCreatedAt="2023-02-24"
+    />,
+  );
+
+  expect(screen.getByText(/updated just now/i)).toBeInTheDocument();
+});
+
+test('should render "updated just now" when the deployment\'s status is DEPLOYED, but it doesn\'t have an end date for some reason', () => {
+  render(
+    <DeploymentStatusMessage
+      deployment={{
+        ...defaultDeployment,
+        deploymentStatus: 'DEPLOYED',
+        deploymentEndedAt: null,
+      }}
+      appCreatedAt="2023-02-24"
+    />,
+  );
+
+  expect(screen.getByText(/updated just now/i)).toBeInTheDocument();
+});
+
+test('should render "deployed 1 day ago" when the deployment has ended', () => {
+  vi.setSystemTime(new Date('2023-02-25T12:25:00.000Z'));
+
+  render(
+    <DeploymentStatusMessage
+      deployment={{
+        ...defaultDeployment,
+        deploymentStatus: 'DEPLOYED',
+        deploymentEndedAt: '2023-02-24T12:15:00.000Z',
+      }}
+      appCreatedAt="2023-02-24"
+    />,
+  );
+
+  expect(screen.getByText(/deployed 1 day ago/i)).toBeInTheDocument();
+});
+
+test('should render "created 1 day ago" if the application does not have a deployment', () => {
+  vi.setSystemTime(new Date('2023-02-25T12:25:00.000Z'));
+
+  render(
+    <DeploymentStatusMessage deployment={null} appCreatedAt="2023-02-24" />,
+  );
+
+  expect(screen.getByText(/created 1 day ago/i)).toBeInTheDocument();
+});

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

@@ -0,0 +1,73 @@
+import type { Deployment } from '@/types/application';
+import { Avatar } from '@/ui/Avatar';
+import Text from '@/ui/v2/Text';
+import formatDistance from 'date-fns/formatDistance';
+
+export interface DeploymentStatusMessageProps {
+  /**
+   * The deployment to render the status message for.
+   */
+  deployment: Partial<Deployment>;
+  /**
+   * The date the application was created.
+   */
+  appCreatedAt: string;
+}
+
+export default function DeploymentStatusMessage({
+  deployment,
+  appCreatedAt,
+}: DeploymentStatusMessageProps) {
+  const isDeployingToProduction = [
+    'SCHEDULED',
+    'PENDING',
+    'DEPLOYING',
+  ].includes(deployment?.deploymentStatus);
+
+  if (
+    isDeployingToProduction ||
+    (deployment && !deployment.deploymentEndedAt)
+  ) {
+    return (
+      <span className="flex flex-row">
+        <Avatar
+          component="span"
+          name={deployment.commitUserName}
+          avatarUrl={deployment.commitUserAvatarUrl}
+          className="mr-1 h-4 w-4 self-center"
+        />
+        <Text component="span" className="self-center text-sm">
+          {deployment.commitUserName} updated just now
+        </Text>
+      </span>
+    );
+  }
+
+  if (!isDeployingToProduction && deployment?.deploymentEndedAt) {
+    return (
+      <span className="grid grid-flow-col">
+        <Avatar
+          component="span"
+          name={deployment.commitUserName}
+          avatarUrl={deployment.commitUserAvatarUrl}
+          className="mr-1 h-4 w-4 self-center"
+        />
+        <Text component="span" className="self-center truncate text-sm">
+          {deployment.commitUserName} deployed{' '}
+          {formatDistance(new Date(deployment.deploymentEndedAt), new Date(), {
+            addSuffix: true,
+          })}
+        </Text>
+      </span>
+    );
+  }
+
+  return (
+    <Text component="span" className="text-sm">
+      created{' '}
+      {formatDistance(new Date(appCreatedAt), new Date(), {
+        addSuffix: true,
+      })}
+    </Text>
+  );
+}

dashboard/src/components/deployments/DeploymentStatusMessage/index.ts

@@ -0,0 +1,2 @@
+export * from './DeploymentStatusMessage';
+export { default } from './DeploymentStatusMessage';

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

@@ -12,6 +12,7 @@ import useBuckets from '@/hooks/useBuckets';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import useFiles from '@/hooks/useFiles';
 import useFilesAggregate from '@/hooks/useFilesAggregate';
+import { getHasuraAdminSecret } from '@/utils/env';
 import { showLoadingToast, triggerToast } from '@/utils/toast';
 import type { Files } from '@/utils/__generated__/graphql';
 import { Order_By as OrderBy } from '@/utils/__generated__/graphql';
@@ -261,8 +262,8 @@ export default function FilesDataGrid(props: FilesDataGridProps) {
       const { fileMetadata, error: fileError } = await appClient.storage
         .setAdminSecret(
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
-            : currentApplication.hasuraGraphqlAdminSecret,
+            ? getHasuraAdminSecret()
+            : currentApplication.config?.hasura.adminSecret,
         )
         .upload({
           file,
@@ -277,7 +278,7 @@ export default function FilesDataGrid(props: FilesDataGridProps) {
       }
 
       if (fileError) {
-        throw fileError;
+        throw new Error(fileError.message);
       }
 
       triggerToast(`File has been uploaded successfully (${fileMetadata?.id})`);

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

@@ -12,6 +12,7 @@ import Button from '@/ui/v2/Button';
 import Chip from '@/ui/v2/Chip';
 import type { InputProps } from '@/ui/v2/Input';
 import Input from '@/ui/v2/Input';
+import { getHasuraAdminSecret } from '@/utils/env';
 import { triggerToast } from '@/utils/toast';
 import type { Files } from '@/utils/__generated__/graphql';
 import type { PropsWithoutRef } from 'react';
@@ -71,8 +72,8 @@ export default function FilesDataGridControls({
     try {
       const storageWithAdminSecret = appClient.storage.setAdminSecret(
         process.env.NEXT_PUBLIC_ENV === 'dev'
-          ? 'nhost-admin-secret'
-          : currentApplication.hasuraGraphqlAdminSecret,
+          ? getHasuraAdminSecret()
+          : currentApplication.config?.hasura.adminSecret,
       );
 
       // note: this is not an optimal solution, but we don't have a better way
@@ -120,7 +121,7 @@ export default function FilesDataGridControls({
       {...props}
     >
       {numberOfSelectedFiles > 0 ? (
-        <div className="mx-auto h-[40px] grid grid-flow-col justify-start items-center gap-2">
+        <div className="mx-auto grid h-[40px] grid-flow-col items-center justify-start gap-2">
           <Chip
             color="info"
             size="small"

dashboard/src/components/home/EditWorkspaceNameForm/EditWorkspaceNameForm.tsx

@@ -1,7 +1,10 @@
+import { useDialog } from '@/components/common/DialogProvider';
 import Form from '@/components/common/Form';
+import type { DialogFormProps } from '@/types/common';
 import Button from '@/ui/v2/Button';
 import Input from '@/ui/v2/Input';
 import { slugifyString } from '@/utils/helpers';
+import getServerError from '@/utils/settings/getServerError';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import {
   refetchGetOneUserQuery,
@@ -11,11 +14,12 @@ import {
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useUserData } from '@nhost/nextjs';
 import { useRouter } from 'next/router';
+import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';
 
-export interface EditWorkspaceNameFormProps {
+export interface EditWorkspaceNameFormProps extends DialogFormProps {
   /**
    * The current workspace name if this is an edit operation.
    */
@@ -44,14 +48,7 @@ export interface EditWorkspaceNameFormProps {
   onCancel?: VoidFunction;
 }
 
-export interface EditWorkspaceNameFormValues {
-  /**
-   * New workspace name.
-   */
-  newWorkspaceName: string;
-}
-
-const validationSchema = Yup.object().shape({
+const validationSchema = Yup.object({
   newWorkspaceName: Yup.string()
     .required('Workspace name is required.')
     .min(4, 'The new Workspace name must be at least 4 characters.')
@@ -71,14 +68,20 @@ const validationSchema = Yup.object().shape({
     ),
 });
 
-export default function EditWorkspaceName({
+export type EditWorkspaceNameFormValues = Yup.InferType<
+  typeof validationSchema
+>;
+
+export default function EditWorkspaceNameForm({
   disabled,
   onSubmit,
   onCancel,
   currentWorkspaceName,
   currentWorkspaceId,
   submitButtonText = 'Create',
+  location,
 }: EditWorkspaceNameFormProps) {
+  const { onDirtyStateChange } = useDialog();
   const currentUser = useUserData();
   const [insertWorkspace, { client }] = useInsertWorkspaceMutation();
   const [updateWorkspaceName] = useUpdateWorkspaceMutation({
@@ -105,6 +108,10 @@ export default function EditWorkspaceName({
   } = form;
   const isDirty = Object.keys(dirtyFields).length > 0;
 
+  useEffect(() => {
+    onDirtyStateChange(isDirty, location);
+  }, [isDirty, location, onDirtyStateChange]);
+
   async function handleSubmit({
     newWorkspaceName,
   }: EditWorkspaceNameFormValues) {
@@ -112,6 +119,8 @@ export default function EditWorkspaceName({
 
     try {
       if (currentWorkspaceId) {
+        onDirtyStateChange(false, location);
+
         // In this bit of code we spread the props of the current path (e.g. /workspace/...) and add one key-value pair: `mutating: 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.
@@ -133,7 +142,9 @@ export default function EditWorkspaceName({
           {
             loading: 'Updating workspace name...',
             success: 'Workspace name has been updated successfully.',
-            error: 'An error occurred while updating the workspace name.',
+            error: getServerError(
+              'An error occurred while updating the workspace name.',
+            ),
           },
           getToastStyleProps(),
         );
@@ -160,7 +171,9 @@ export default function EditWorkspaceName({
           {
             loading: 'Creating new workspace...',
             success: 'The new workspace has been created successfully.',
-            error: 'An error occurred while creating the new workspace.',
+            error: getServerError(
+              'An error occurred while creating the new workspace.',
+            ),
           },
           getToastStyleProps(),
         );
@@ -186,6 +199,9 @@ export default function EditWorkspaceName({
       include: ['getOneUser'],
     });
 
+    // The form has been submitted, it's not dirty anymore
+    onDirtyStateChange(false, location);
+
     await router.push(slug);
     onSubmit?.();
   }
@@ -194,9 +210,9 @@ export default function EditWorkspaceName({
     <FormProvider {...form}>
       <Form
         onSubmit={handleSubmit}
-        className="flex flex-col content-between flex-auto pt-2 pb-6 overflow-hidden"
+        className="flex flex-auto flex-col content-between overflow-hidden pt-2 pb-6"
       >
-        <div className="flex-auto px-6 overflow-y-auto">
+        <div className="flex-auto overflow-y-auto px-6">
           <Input
             {...register('newWorkspaceName')}
             error={Boolean(errors.newWorkspaceName?.message)}

dashboard/src/components/home/IndexHeaderApps.tsx

@@ -1,3 +1,4 @@
+import { useUI } from '@/context/UIContext';
 import Button from '@/ui/v2/Button';
 import PlusCircleIcon from '@/ui/v2/icons/PlusCircleIcon';
 import SearchIcon from '@/ui/v2/icons/SearchIcon';
@@ -11,6 +12,8 @@ interface IndexHeaderAppsProps {
 }
 
 export function IndexHeaderApps({ query, setQuery }: IndexHeaderAppsProps) {
+  const { maintenanceActive } = useUI();
+
   return (
     <div className="mx-auto mb-6 grid w-full grid-flow-col place-content-between items-center py-2">
       <Text variant="h2" component="h1" className="hidden md:block">
@@ -36,6 +39,7 @@ export function IndexHeaderApps({ query, setQuery }: IndexHeaderAppsProps) {
           variant="outlined"
           color="secondary"
           startIcon={<PlusCircleIcon />}
+          disabled={maintenanceActive}
         >
           New Project
         </Button>

dashboard/src/components/home/InviteAnnounce.tsx

@@ -58,16 +58,19 @@ export function InviteAnnounce() {
       error: null,
       loading: true,
     });
-    const res = await nhost.functions.call('/accept-workspace-invite', {
-      workspaceMemberInviteId: invite.id,
-      isAccepted: true,
-    });
+    const { res, error: acceptError } = await nhost.functions.call(
+      '/accept-workspace-invite',
+      {
+        workspaceMemberInviteId: invite.id,
+        isAccepted: true,
+      },
+    );
 
-    if (res?.res?.status !== 200) {
+    if (res?.status !== 200) {
       triggerToast('An error occurred when trying to accept the invitation.');
 
       return setSubmitState({
-        error: res.error,
+        error: new Error(acceptError.message),
         loading: false,
       });
     }
@@ -90,21 +93,20 @@ export function InviteAnnounce() {
       error: null,
     });
 
-    const res = await nhost.functions.call(
+    const { error: ignoreError } = await nhost.functions.call(
       '/accept-workspace-invite',
       {
         workspaceMemberInviteId: inviteId,
         isAccepted: false,
       },
-      { useAxios: false },
     );
 
-    if (res?.error) {
+    if (ignoreError) {
       triggerToast('An error occurred when trying to ignore the invitation.');
 
       setIgnoreState({
         loading: false,
-        error: new Error(res.error.message),
+        error: new Error(ignoreError.message),
       });
 
       return;

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

@@ -1,5 +1,5 @@
 import { UserDataProvider } from '@/context/workspace1-context';
-import type { Application } from '@/types/application';
+import type { Project } from '@/types/application';
 import { ApplicationStatus } from '@/types/application';
 import type { Workspace } from '@/types/workspace';
 import { render, screen, waitForElementToBeRemoved } from '@/utils/testUtils';
@@ -36,12 +36,11 @@ vi.mock('next/router', () => ({
   }),
 }));
 
-const mockApplication: Application = {
+const mockApplication: Project = {
   id: '1',
   name: 'Test Application',
   slug: 'test-application',
   appStates: [],
-  hasuraGraphqlAdminSecret: 'nhost-admin-secret',
   subdomain: '',
   isProvisioned: true,
   region: {
@@ -56,6 +55,14 @@ const mockApplication: Application = {
   featureFlags: [],
   providersUpdated: true,
   githubRepository: { fullName: 'test/git-project' },
+  repositoryProductionBranch: null,
+  nhostBaseFolder: null,
+  plan: null,
+  config: {
+    hasura: {
+      adminSecret: 'nhost-admin-secret',
+    },
+  },
 };
 
 const mockWorkspace: Workspace = {

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

@@ -1,6 +1,7 @@
 import useGitHubModal from '@/components/applications/github/useGitHubModal';
 import DeploymentListItem from '@/components/deployments/DeploymentListItem';
 import GithubIcon from '@/components/icons/GithubIcon';
+import { useUI } from '@/context/UIContext';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Box from '@/ui/v2/Box';
@@ -75,7 +76,7 @@ function OverviewDeploymentList() {
 
   if (!deployments?.length) {
     return (
-      <Box className="grid grid-flow-row items-center justify-items-center gap-5 overflow-hidden rounded-lg border-1 py-12 px-48 shadow-sm">
+      <Box className="grid grid-flow-row items-center justify-items-center gap-5 overflow-hidden rounded-lg border-1 py-12 px-4 shadow-sm">
         <RocketIcon
           strokeWidth={1}
           className="h-10 w-10"
@@ -85,7 +86,7 @@ function OverviewDeploymentList() {
           <Text className="text-center font-medium" variant="h3">
             No Deployments
           </Text>
-          <Text variant="subtitle1" className="text-center">
+          <Text variant="subtitle1" className="max-w-md text-center">
             We&apos;ll deploy changes automatically when you push to the
             deployment branch in your connected GitHub repository
           </Text>
@@ -146,6 +147,7 @@ function OverviewDeploymentList() {
 export default function OverviewDeployments() {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
   const { openGitHubModal } = useGitHubModal();
+  const { maintenanceActive } = useUI();
 
   const { githubRepository } = currentApplication || {};
 
@@ -164,14 +166,14 @@ export default function OverviewDeployments() {
     <div className="flex flex-col">
       <OverviewDeploymentsTopBar />
 
-      <Box className="grid grid-flow-row items-center justify-items-center gap-5 rounded-lg border-1 py-12 px-48 shadow-sm">
+      <Box className="grid grid-flow-row items-center justify-items-center gap-5 rounded-lg border-1 py-12 px-4 shadow-sm">
         <RocketIcon strokeWidth={1} className="h-10 w-10" />
 
         <div className="grid grid-flow-row gap-1">
           <Text className="text-center font-medium" variant="h3">
             No Deployments
           </Text>
-          <Text variant="subtitle1" className="text-center">
+          <Text variant="subtitle1" className="max-w-sm text-center">
             Connect your project with a GitHub repository to create your first
             deployment
           </Text>
@@ -183,6 +185,7 @@ export default function OverviewDeployments() {
             color="primary"
             className="w-full"
             onClick={openGitHubModal}
+            disabled={maintenanceActive}
           >
             <GithubIcon className="mr-1.5 h-4 w-4 self-center" />
             Connect to GitHub

dashboard/src/components/overview/OverviewRepository/OverviewRepository.tsx

@@ -1,4 +1,5 @@
 import GithubIcon from '@/components/icons/GithubIcon';
+import { useUI } from '@/context/UIContext';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
@@ -8,6 +9,7 @@ import NavLink from 'next/link';
 export default function OverviewRepository() {
   const { currentWorkspace, currentApplication } =
     useCurrentWorkspaceAndApplication();
+  const { maintenanceActive } = useUI();
 
   return (
     <div>
@@ -28,6 +30,7 @@ export default function OverviewRepository() {
               color="secondary"
               className="w-full border-1 hover:border-1"
               startIcon={<GithubIcon />}
+              disabled={maintenanceActive}
             >
               Connect to GitHub
             </Button>
@@ -39,7 +42,7 @@ export default function OverviewRepository() {
           sx={{ backgroundColor: 'grey.200' }}
         >
           <Box
-            className="grid grid-flow-col gap-1.5 ml-2"
+            className="ml-2 grid grid-flow-col gap-1.5"
             sx={{ backgroundColor: 'transparent' }}
           >
             <GithubIcon className="h-4 w-4 self-center" />
@@ -52,7 +55,11 @@ export default function OverviewRepository() {
             href={`/${currentWorkspace.slug}/${currentApplication.slug}/settings/git`}
             passHref
           >
-            <Button variant="borderless" size="small">
+            <Button
+              variant="borderless"
+              size="small"
+              disabled={maintenanceActive}
+            >
               Edit
             </Button>
           </NavLink>

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

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

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

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

dashboard/src/components/settings/ResetDatabasePasswordSettings/ResetDatabasePasswordSettings.tsx

@@ -1,5 +1,6 @@
 import Form from '@/components/common/Form';
 import SettingsContainer from '@/components/settings/SettingsContainer';
+import { useUI } from '@/context/UIContext';
 import {
   useResetPostgresPasswordMutation,
   useUpdateApplicationMutation,
@@ -28,6 +29,7 @@ export interface ResetDatabasePasswordFormValues {
 
 export default function ResetDatabasePasswordSettings() {
   const [updateApplication] = useUpdateApplicationMutation();
+  const { maintenanceActive } = useUI();
 
   const form = useForm<ResetDatabasePasswordFormValues>({
     reValidateMode: 'onSubmit',
@@ -44,11 +46,10 @@ export default function ResetDatabasePasswordSettings() {
     setValue,
     getValues,
     register,
-    formState: { errors },
+    formState: { errors, isDirty, isSubmitting },
   } = form;
 
-  const [resetPostgresPasswordMutation, { loading }] =
-    useResetPostgresPasswordMutation();
+  const [resetPostgresPasswordMutation] = useResetPostgresPasswordMutation();
   const user = useUserData();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
 
@@ -99,12 +100,16 @@ export default function ResetDatabasePasswordSettings() {
           title="Reset Password"
           description="This password is used for accessing your database."
           submitButtonText="Reset"
-          rootClassName="border-[#F87171]"
-          primaryActionButtonProps={{
-            variant: 'contained',
-            color: 'error',
-            disabled: Boolean(errors?.databasePassword),
-            loading,
+          slotProps={{
+            root: {
+              sx: { borderColor: (theme) => theme.palette.error.main },
+            },
+            submitButton: {
+              variant: 'contained',
+              color: 'error',
+              disabled: !isDirty || maintenanceActive,
+              loading: isSubmitting,
+            },
           }}
           className="grid grid-flow-row pb-4"
         >

dashboard/src/components/settings/SettingsSidebar/SettingsSidebar.tsx

@@ -179,6 +179,15 @@ export default function SettingsSidebar({
             >
               Environment Variables
             </SettingsNavLink>
+
+            <SettingsNavLink
+              href="/secrets"
+              exact={false}
+              onClick={handleSelect}
+              className="hidden"
+            >
+              Secrets
+            </SettingsNavLink>
           </List>
         </nav>
       </Box>

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

@@ -1,68 +1,61 @@
 import Form from '@/components/common/Form';
 import SettingsContainer from '@/components/settings/SettingsContainer';
-import { useGetAppQuery, useUpdateAppMutation } from '@/generated/graphql';
+import { useUI } from '@/context/UIContext';
+import {
+  GetAuthenticationSettingsDocument,
+  useGetAuthenticationSettingsQuery,
+  useUpdateConfigMutation,
+} from '@/generated/graphql';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Input from '@/ui/v2/Input';
+import getServerError from '@/utils/settings/getServerError';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
-import { useEffect } from 'react';
+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';
 
-export interface AllowedEmailSettingsFormValues {
-  /**
-   * Determines whether or not the allowed email settings are enabled.
-   */
-  enabled: boolean;
-  /**
-   * Set of email that are allowed to be used for project's users authentication.
-   */
-  authAccessControlAllowedEmails: string;
-  /**
-   * Set of email domains that are allowed to be used for project's users authentication.
-   * @example 'nhost.io'
-   */
-  authAccessControlAllowedEmailDomains: string;
-}
+const validationSchema = Yup.object({
+  enabled: Yup.boolean().label('Enabled'),
+  allowedEmails: Yup.string().label('Allowed Emails'),
+  allowedEmailDomains: Yup.string().label('Allowed Email Domains'),
+});
+
+export type AllowedEmailSettingsFormValues = Yup.InferType<
+  typeof validationSchema
+>;
 
 export default function AllowedEmailDomainsSettings() {
+  const { maintenanceActive } = useUI();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const [updateApp] = useUpdateAppMutation();
-
-  const { data, loading, error } = useGetAppQuery({
-    variables: {
-      id: currentApplication?.id,
-    },
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetAuthenticationSettingsDocument],
   });
 
+  const { data, loading, error } = useGetAuthenticationSettingsQuery({
+    variables: { appId: currentApplication?.id },
+    fetchPolicy: 'cache-only',
+  });
+
+  const { email, emailDomains } = data?.config?.auth?.user || {};
+
   const form = useForm<AllowedEmailSettingsFormValues>({
     reValidateMode: 'onSubmit',
     defaultValues: {
-      enabled:
-        Boolean(data?.app?.authAccessControlAllowedEmails) ||
-        Boolean(data?.app?.authAccessControlAllowedEmailDomains),
-      authAccessControlAllowedEmails: data?.app?.authAccessControlAllowedEmails,
-      authAccessControlAllowedEmailDomains:
-        data?.app?.authAccessControlAllowedEmailDomains,
+      enabled: email?.allowed?.length > 0 || emailDomains?.allowed?.length > 0,
+      allowedEmails: email?.allowed?.join(', ') || '',
+      allowedEmailDomains: emailDomains?.allowed?.join(', ') || '',
     },
+    resolver: yupResolver(validationSchema),
   });
 
-  const { register, formState, setValue, watch } = form;
+  const { register, formState, watch } = form;
   const enabled = watch('enabled');
+
   const isDirty = Object.keys(formState.dirtyFields).length > 0;
 
-  useEffect(() => {
-    if (
-      !data.app?.authAccessControlAllowedEmails &&
-      !data.app?.authAccessControlAllowedEmailDomains
-    ) {
-      return;
-    }
-
-    setValue('enabled', true, { shouldDirty: false });
-  }, [data.app, setValue]);
-
   if (loading) {
     return (
       <ActivityIndicator
@@ -80,29 +73,51 @@ export default function AllowedEmailDomainsSettings() {
   const handleAllowedEmailDomainsChange = async (
     values: AllowedEmailSettingsFormValues,
   ) => {
-    const updateAppMutation = updateApp({
+    const updateConfigPromise = updateConfig({
       variables: {
-        id: currentApplication.id,
-        app: {
-          authAccessControlAllowedEmails: values.enabled
-            ? values.authAccessControlAllowedEmails
-            : '',
-          authAccessControlAllowedEmailDomains: values.enabled
-            ? values.authAccessControlAllowedEmailDomains
-            : '',
+        appId: currentApplication.id,
+        config: {
+          auth: {
+            user: {
+              email: {
+                blocked: email.blocked,
+                allowed:
+                  values.enabled && values.allowedEmails
+                    ? values.allowedEmails
+                        .split(',')
+                        .map((allowedEmail) => allowedEmail.trim())
+                    : [],
+              },
+              emailDomains: {
+                blocked: emailDomains.blocked,
+                allowed:
+                  values.enabled && values.allowedEmailDomains
+                    ? values.allowedEmailDomains
+                        .split(',')
+                        .map((allowedEmailDomain) => allowedEmailDomain.trim())
+                    : [],
+              },
+            },
+          },
         },
       },
     });
 
-    await toast.promise(
-      updateAppMutation,
-      {
-        loading: `Allowed email settings are being updated...`,
-        success: `Allowed email settings have been updated successfully.`,
-        error: `An error occurred while trying to update the project's allowed email settings.`,
-      },
-      getToastStyleProps(),
-    );
+    try {
+      await toast.promise(
+        updateConfigPromise,
+        {
+          loading: `Allowed email settings are being updated...`,
+          success: `Allowed email settings have been updated successfully.`,
+          error: getServerError(
+            `An error occurred while trying to update the project's allowed email settings.`,
+          ),
+        },
+        getToastStyleProps(),
+      );
+    } catch {
+      // Note: The toast will handle the error
+    }
 
     form.reset(values);
   };
@@ -115,15 +130,12 @@ export default function AllowedEmailDomainsSettings() {
           description="Allow specific email addresses and domains to sign up."
           slotProps={{
             submitButton: {
-              disabled: !formState.isValid || !isDirty,
+              disabled: !isDirty || maintenanceActive,
               loading: formState.isSubmitting,
             },
           }}
           docsLink="https://docs.nhost.io/authentication#allowed-emails-and-domains"
-          enabled={enabled}
-          onEnabledChange={(switchEnabled) =>
-            setValue('enabled', switchEnabled, { shouldDirty: true })
-          }
+          switchId="enabled"
           showSwitch
           className={twMerge(
             'row-span-2 grid grid-flow-row gap-4 px-4 lg:grid-cols-3',
@@ -131,9 +143,9 @@ export default function AllowedEmailDomainsSettings() {
           )}
         >
           <Input
-            {...register('authAccessControlAllowedEmails')}
-            name="authAccessControlAllowedEmails"
-            id="authAccessControlAllowedEmails"
+            {...register('allowedEmails')}
+            name="allowedEmails"
+            id="allowedEmails"
             placeholder="These emails (separated by comma, e.g, david@ikea.com, lisa@mycompany.com)"
             className="col-span-2"
             label="Allowed Emails (comma separated)"
@@ -141,9 +153,9 @@ export default function AllowedEmailDomainsSettings() {
             hideEmptyHelperText
           />
           <Input
-            {...register('authAccessControlAllowedEmailDomains')}
-            name="authAccessControlAllowedEmailDomains"
-            id="authAccessControlAllowedEmailDomains"
+            {...register('allowedEmailDomains')}
+            name="allowedEmailDomains"
+            id="allowedEmailDomains"
             label="Allowed Email Domains (comma sepated list)"
             placeholder="These email domains (separated by comma, e.g, ikea.com, mycompany.com)"
             className="col-span-2"

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

@@ -1,36 +1,49 @@
 import Form from '@/components/common/Form';
 import SettingsContainer from '@/components/settings/SettingsContainer';
-import { useGetAppQuery, useUpdateAppMutation } from '@/generated/graphql';
+import { useUI } from '@/context/UIContext';
+import {
+  GetAuthenticationSettingsDocument,
+  useGetAuthenticationSettingsQuery,
+  useUpdateConfigMutation,
+} from '@/generated/graphql';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Input from '@/ui/v2/Input';
+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 * as Yup from 'yup';
 
-export interface AllowedRedirectURLFormValues {
-  /**
-   * Set of URLs that are allowed to be redirected to after project's users authentication.
-   */
-  authAccessControlAllowedRedirectUrls: string;
-}
+const validationSchema = Yup.object({
+  allowedUrls: Yup.string().label('Allowed Redirect URLs'),
+});
+
+export type AllowedRedirectURLFormValues = Yup.InferType<
+  typeof validationSchema
+>;
 
 export default function AllowedRedirectURLsSettings() {
+  const { maintenanceActive } = useUI();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const [updateApp] = useUpdateAppMutation();
-
-  const { data, loading, error } = useGetAppQuery({
-    variables: {
-      id: currentApplication?.id,
-    },
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetAuthenticationSettingsDocument],
   });
 
+  const { data, loading, error } = useGetAuthenticationSettingsQuery({
+    variables: { appId: currentApplication?.id },
+    fetchPolicy: 'cache-only',
+  });
+
+  const { allowedUrls } = data?.config?.auth?.redirections || {};
+
   const form = useForm<AllowedRedirectURLFormValues>({
     reValidateMode: 'onSubmit',
     defaultValues: {
-      authAccessControlAllowedRedirectUrls:
-        data?.app?.authAccessControlAllowedRedirectUrls,
+      allowedUrls: allowedUrls?.join(', ') || '',
     },
+    resolver: yupResolver(validationSchema),
   });
 
   if (loading) {
@@ -52,26 +65,38 @@ export default function AllowedRedirectURLsSettings() {
   const handleAllowedRedirectURLsChange = async (
     values: AllowedRedirectURLFormValues,
   ) => {
-    const updateAppMutation = updateApp({
+    const updateConfigPromise = updateConfig({
       variables: {
-        id: currentApplication.id,
-        app: {
-          ...values,
+        appId: currentApplication.id,
+        config: {
+          auth: {
+            redirections: {
+              allowedUrls: values.allowedUrls
+                ? values.allowedUrls.split(',').map((url) => url.trim())
+                : [],
+            },
+          },
         },
       },
     });
 
-    await toast.promise(
-      updateAppMutation,
-      {
-        loading: `Allowed redirect URL settings are being updated...`,
-        success: `Allowed redirect URL settings have been updated successfully.`,
-        error: `An error occurred while trying to update the project's allowed redirect URL settings.`,
-      },
-      getToastStyleProps(),
-    );
+    try {
+      await toast.promise(
+        updateConfigPromise,
+        {
+          loading: `Allowed redirect URL settings are being updated...`,
+          success: `Allowed redirect URL settings have been updated successfully.`,
+          error: getServerError(
+            `An error occurred while trying to update the project's allowed redirect URL settings.`,
+          ),
+        },
+        getToastStyleProps(),
+      );
 
-    form.reset(values);
+      form.reset(values);
+    } catch {
+      // Note: The toast will handle the error.
+    }
   };
 
   return (
@@ -80,17 +105,19 @@ export default function AllowedRedirectURLsSettings() {
         <SettingsContainer
           title="Allowed Redirect URLs"
           description="Allowed URLs where users can be redirected to after authentication. Separate multiple redirect URLs with comma."
-          primaryActionButtonProps={{
-            disabled: !formState.isValid || !formState.isDirty,
-            loading: formState.isSubmitting,
+          slotProps={{
+            submitButton: {
+              disabled: !formState.isDirty || maintenanceActive,
+              loading: formState.isSubmitting,
+            },
           }}
           docsLink="https://docs.nhost.io/authentication#allowed-redirect-urls"
           className="grid grid-flow-row px-4 lg:grid-cols-5"
         >
           <Input
-            {...register('authAccessControlAllowedRedirectUrls')}
-            name="authAccessControlAllowedRedirectUrls"
-            id="authAccessControlAllowedRedirectUrls"
+            {...register('allowedUrls')}
+            name="allowedUrls"
+            id="allowedUrls"
             placeholder="http://localhost:3000, http://localhost:4000"
             className="col-span-2"
             fullWidth

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

@@ -1,67 +1,58 @@
 import Form from '@/components/common/Form';
 import SettingsContainer from '@/components/settings/SettingsContainer';
-import { useGetAppQuery, useUpdateAppMutation } from '@/generated/graphql';
+import { useUI } from '@/context/UIContext';
+import {
+  GetAuthenticationSettingsDocument,
+  useGetAuthenticationSettingsQuery,
+  useUpdateConfigMutation,
+} from '@/generated/graphql';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Input from '@/ui/v2/Input';
+import getServerError from '@/utils/settings/getServerError';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
-import { useEffect } from 'react';
+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';
 
-export interface BlockedEmailFormValues {
-  /**
-   * Determines whether or not the blocked email settings are enabled.
-   */
-  enabled: boolean;
-  /**
-   * Set of emails that are blocked from registering to the user's project.
-   */
-  authAccessControlBlockedEmails: string;
-  /**
-   * Set of email domains that are blocked from registering to the user's project.
-   */
-  authAccessControlBlockedEmailDomains: string;
-}
+const validationSchema = Yup.object({
+  enabled: Yup.boolean().label('Enabled'),
+  blockedEmails: Yup.string().label('Blocked Emails'),
+  blockedEmailDomains: Yup.string().label('Blocked Email Domains'),
+});
+
+export type BlockedEmailFormValues = Yup.InferType<typeof validationSchema>;
 
 export default function BlockedEmailSettings() {
+  const { maintenanceActive } = useUI();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const [updateApp] = useUpdateAppMutation();
-
-  const { data, loading, error } = useGetAppQuery({
-    variables: {
-      id: currentApplication?.id,
-    },
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetAuthenticationSettingsDocument],
   });
 
+  const { data, loading, error } = useGetAuthenticationSettingsQuery({
+    variables: { appId: currentApplication?.id },
+    fetchPolicy: 'cache-only',
+  });
+
+  const { email, emailDomains } = data?.config?.auth?.user || {};
+
   const form = useForm<BlockedEmailFormValues>({
     reValidateMode: 'onSubmit',
     defaultValues: {
-      enabled:
-        Boolean(data?.app?.authAccessControlBlockedEmails) ||
-        Boolean(data?.app?.authAccessControlBlockedEmailDomains),
-      authAccessControlBlockedEmails: data?.app?.authAccessControlBlockedEmails,
-      authAccessControlBlockedEmailDomains:
-        data?.app?.authAccessControlBlockedEmailDomains,
+      enabled: email?.blocked?.length > 0 || emailDomains?.blocked?.length > 0,
+      blockedEmails: email?.blocked?.join(', ') || '',
+      blockedEmailDomains: emailDomains?.blocked?.join(', ') || '',
     },
+    resolver: yupResolver(validationSchema),
   });
 
-  const { register, formState, setValue, watch } = form;
+  const { register, formState, watch } = form;
   const enabled = watch('enabled');
   const isDirty = Object.keys(formState.dirtyFields).length > 0;
 
-  useEffect(() => {
-    if (
-      !data.app?.authAccessControlBlockedEmails &&
-      !data.app?.authAccessControlBlockedEmailDomains
-    ) {
-      return;
-    }
-
-    setValue('enabled', true, { shouldDirty: false });
-  }, [data.app, setValue]);
-
   if (loading) {
     return (
       <ActivityIndicator
@@ -79,31 +70,63 @@ export default function BlockedEmailSettings() {
   const handleAllowedEmailDomainsChange = async (
     values: BlockedEmailFormValues,
   ) => {
-    const updateAppMutation = updateApp({
+    const updateConfigPromise = updateConfig({
       variables: {
-        id: currentApplication.id,
-        app: {
-          authAccessControlBlockedEmails: values.enabled
-            ? values.authAccessControlBlockedEmails
-            : '',
-          authAccessControlBlockedEmailDomains: values.enabled
-            ? values.authAccessControlBlockedEmailDomains
-            : '',
+        appId: currentApplication.id,
+        config: {
+          auth: {
+            user: {
+              email: {
+                allowed: email.allowed,
+                blocked:
+                  values.enabled && values.blockedEmails
+                    ? [
+                        ...new Set(
+                          values.blockedEmails
+                            .split(',')
+                            .map((blockedEmail) => blockedEmail.trim()),
+                        ),
+                      ]
+                    : [],
+              },
+              emailDomains: {
+                allowed: emailDomains.allowed,
+                blocked:
+                  values.enabled && values.blockedEmailDomains
+                    ? [
+                        ...new Set(
+                          values.blockedEmailDomains
+                            .split(',')
+                            .map((blockedEmailDomain) =>
+                              blockedEmailDomain.trim(),
+                            ),
+                        ),
+                      ]
+                    : [],
+              },
+            },
+          },
         },
       },
     });
 
-    await toast.promise(
-      updateAppMutation,
-      {
-        loading: `Blocked email and domain settings are being updated...`,
-        success: `Blocked email and domain settings have been updated successfully.`,
-        error: `An error occurred while trying to update the project's blocked email and domain settings.`,
-      },
-      getToastStyleProps(),
-    );
+    try {
+      await toast.promise(
+        updateConfigPromise,
+        {
+          loading: `Blocked email and domain settings are being updated...`,
+          success: `Blocked email and domain settings have been updated successfully.`,
+          error: getServerError(
+            `An error occurred while trying to update the project's blocked email and domain settings.`,
+          ),
+        },
+        getToastStyleProps(),
+      );
 
-    form.reset(values);
+      form.reset(values);
+    } catch {
+      // Note: The toast will handle the error.
+    }
   };
 
   return (
@@ -114,15 +137,12 @@ export default function BlockedEmailSettings() {
           description="Block specific email addresses and domains to sign up."
           slotProps={{
             submitButton: {
-              disabled: !formState.isValid || !isDirty,
+              disabled: !isDirty || maintenanceActive,
               loading: formState.isSubmitting,
             },
           }}
           docsLink="https://docs.nhost.io/authentication#blocked-emails-and-domains"
-          enabled={enabled}
-          onEnabledChange={(switchEnabled) =>
-            setValue('enabled', switchEnabled, { shouldDirty: true })
-          }
+          switchId="enabled"
           showSwitch
           className={twMerge(
             'row-span-2 grid grid-flow-row gap-4 px-4 lg:grid-cols-3',
@@ -130,9 +150,9 @@ export default function BlockedEmailSettings() {
           )}
         >
           <Input
-            {...register('authAccessControlBlockedEmails')}
-            name="authAccessControlBlockedEmails"
-            id="authAccessControlBlockedEmails"
+            {...register('blockedEmails')}
+            name="blockedEmails"
+            id="blockedEmails"
             placeholder="These emails (separated by comma, e.g, david@ikea.com, lisa@mycompany.com)"
             className="col-span-2"
             label="Blocked Emails (comma separated)"
@@ -140,9 +160,9 @@ export default function BlockedEmailSettings() {
             hideEmptyHelperText
           />
           <Input
-            {...register('authAccessControlBlockedEmailDomains')}
-            name="authAccessControlBlockedEmailDomains"
-            id="authAccessControlBlockedEmailDomains"
+            {...register('blockedEmailDomains')}
+            name="blockedEmailDomains"
+            id="blockedEmailDomains"
             label="Blocked Email Domains (comma sepated list)"
             placeholder="These email domains (separated by comma, e.g, ikea.com, mycompany.com)"
             className="col-span-2"

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

@@ -1,36 +1,47 @@
 import Form from '@/components/common/Form';
 import SettingsContainer from '@/components/settings/SettingsContainer';
-import { useGetAppQuery, useUpdateAppMutation } from '@/generated/graphql';
+import { useUI } from '@/context/UIContext';
+import {
+  GetAuthenticationSettingsDocument,
+  useGetAuthenticationSettingsQuery,
+  useUpdateConfigMutation,
+} from '@/generated/graphql';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Input from '@/ui/v2/Input';
+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 * as Yup from 'yup';
 
-export interface ClientURLFormValues {
-  /**
-   * The URL of the frontend app of where users are redirected after authenticating.
-   */
-  authClientUrl: string;
-}
+const validationSchema = Yup.object({
+  clientUrl: Yup.string().label('Client URL'),
+});
+
+export type ClientURLFormValues = Yup.InferType<typeof validationSchema>;
 
 export default function ClientURLSettings() {
+  const { maintenanceActive } = useUI();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const [updateApp] = useUpdateAppMutation({ refetchQueries: ['GetApp'] });
-
-  const { data, loading, error } = useGetAppQuery({
-    variables: {
-      id: currentApplication?.id,
-    },
-    fetchPolicy: 'cache-first',
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetAuthenticationSettingsDocument],
   });
 
+  const { data, loading, error } = useGetAuthenticationSettingsQuery({
+    variables: { appId: currentApplication?.id },
+    fetchPolicy: 'cache-only',
+  });
+
+  const { clientUrl, allowedUrls } = data?.config?.auth?.redirections || {};
+
   const form = useForm<ClientURLFormValues>({
     reValidateMode: 'onSubmit',
     defaultValues: {
-      authClientUrl: data?.app?.authClientUrl,
+      clientUrl,
     },
+    resolver: yupResolver(validationSchema),
   });
 
   if (loading) {
@@ -50,26 +61,37 @@ export default function ClientURLSettings() {
   const { register, formState } = form;
 
   const handleClientURLChange = async (values: ClientURLFormValues) => {
-    const updateAppMutation = updateApp({
+    const updateConfigPromise = updateConfig({
       variables: {
-        id: currentApplication.id,
-        app: {
-          ...values,
+        appId: currentApplication.id,
+        config: {
+          auth: {
+            redirections: {
+              ...values,
+              allowedUrls,
+            },
+          },
         },
       },
     });
 
-    await toast.promise(
-      updateAppMutation,
-      {
-        loading: `Client URL is being updated...`,
-        success: `Client URL has been updated successfully.`,
-        error: `An error occurred while trying to update the project's Client URL.`,
-      },
-      getToastStyleProps(),
-    );
+    try {
+      await toast.promise(
+        updateConfigPromise,
+        {
+          loading: `Client URL is being updated...`,
+          success: `Client URL has been updated successfully.`,
+          error: getServerError(
+            `An error occurred while trying to update the project's Client URL.`,
+          ),
+        },
+        getToastStyleProps(),
+      );
 
-    form.reset(values);
+      form.reset(values);
+    } catch {
+      // Note: The toast will handle the error.
+    }
   };
 
   return (
@@ -78,22 +100,26 @@ export default function ClientURLSettings() {
         <SettingsContainer
           title="Client URL"
           description="This should be the URL of your frontend app where users are redirected after authenticating."
-          primaryActionButtonProps={{
-            disabled: !formState.isValid || !formState.isDirty,
-            loading: formState.isSubmitting,
+          slotProps={{
+            submitButton: {
+              disabled: !formState.isDirty || maintenanceActive,
+              loading: formState.isSubmitting,
+            },
           }}
           docsLink="https://docs.nhost.io/authentication#client-url"
           className="grid grid-flow-row lg:grid-cols-5"
         >
           <Input
-            {...register('authClientUrl')}
-            name="authClientUrl"
-            id="authClientUrl"
+            {...register('clientUrl')}
+            name="clientUrl"
+            id="clientUrl"
             placeholder="http://localhost:3000"
             className="col-span-2"
             fullWidth
             hideEmptyHelperText
             aria-label="Client URL"
+            error={!!formState.errors?.clientUrl}
+            helperText={formState.errors?.clientUrl?.message}
           />
         </SettingsContainer>
       </Form>

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

@@ -1,46 +1,44 @@
 import Form from '@/components/common/Form';
 import SettingsContainer from '@/components/settings/SettingsContainer';
+import { useUI } from '@/context/UIContext';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
+import getServerError from '@/utils/settings/getServerError';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import {
-  useGetAuthSettingsQuery,
-  useUpdateAppMutation,
+  GetAuthenticationSettingsDocument,
+  useGetAuthenticationSettingsQuery,
+  useUpdateConfigMutation,
 } from '@/utils/__generated__/graphql';
-import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
+import * as Yup from 'yup';
 
-export interface DisableNewUsersFormValues {
-  /**
-   * Disable new users from signing up to this project
-   */
-  authDisableNewUsers: boolean;
-}
+const validationSchema = Yup.object({
+  disabled: Yup.boolean(),
+});
+
+export type DisableNewUsersFormValues = Yup.InferType<typeof validationSchema>;
 
 export default function DisableNewUsersSettings() {
+  const { maintenanceActive } = useUI();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const [updateApp] = useUpdateAppMutation();
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetAuthenticationSettingsDocument],
+  });
 
-  const { data, loading, error } = useGetAuthSettingsQuery({
-    variables: {
-      id: currentApplication.id,
-    },
+  const { data, loading, error } = useGetAuthenticationSettingsQuery({
+    variables: { appId: currentApplication?.id },
+    fetchPolicy: 'cache-only',
   });
 
   const form = useForm<DisableNewUsersFormValues>({
     reValidateMode: 'onSubmit',
     defaultValues: {
-      authDisableNewUsers: data?.app?.authDisableNewUsers,
+      disabled: !!data?.config?.auth?.signUp?.enabled,
     },
   });
 
-  useEffect(() => {
-    form.reset(() => ({
-      authDisableNewUsers: data?.app?.authDisableNewUsers,
-    }));
-  }, [data?.app?.authDisableNewUsers, form, form.reset]);
-
   if (loading) {
     return (
       <ActivityIndicator
@@ -55,32 +53,41 @@ export default function DisableNewUsersSettings() {
     throw error;
   }
 
-  const { formState, watch } = form;
-  const authDisableNewUsers = watch('authDisableNewUsers');
+  const { formState } = form;
 
   const handleDisableNewUsersChange = async (
     values: DisableNewUsersFormValues,
   ) => {
-    const updateAppMutation = updateApp({
+    const updateConfigPromise = updateConfig({
       variables: {
-        id: currentApplication.id,
-        app: {
-          ...values,
+        appId: currentApplication.id,
+        config: {
+          auth: {
+            signUp: {
+              enabled: !values.disabled,
+            },
+          },
         },
       },
     });
 
-    await toast.promise(
-      updateAppMutation,
-      {
-        loading: `Disabling new user sign ups...`,
-        success: `New user sign ups have been disabled successfully.`,
-        error: `An error occurred while trying to disable new user sign ups.`,
-      },
-      getToastStyleProps(),
-    );
+    try {
+      await toast.promise(
+        updateConfigPromise,
+        {
+          loading: `Disabling new user sign ups...`,
+          success: `New user sign ups have been disabled successfully.`,
+          error: getServerError(
+            `An error occurred while trying to disable new user sign ups.`,
+          ),
+        },
+        getToastStyleProps(),
+      );
 
-    form.reset(values);
+      form.reset(values);
+    } catch {
+      // Note: The toast will handle the error.
+    }
   };
 
   return (
@@ -88,14 +95,15 @@ export default function DisableNewUsersSettings() {
       <Form onSubmit={handleDisableNewUsersChange}>
         <SettingsContainer
           title="Disable New Users"
-          description="If set, newly registered users are disabled and won’t be able to sign in."
+          description="If set, newly registered users are disabled and won't be able to sign in."
           docsLink="https://docs.nhost.io/authentication#disable-new-users"
-          switchId="authDisableNewUsers"
+          switchId="disabled"
           showSwitch
-          enabled={authDisableNewUsers}
-          primaryActionButtonProps={{
-            disabled: !formState.isValid || !formState.isDirty,
-            loading: formState.isSubmitting,
+          slotProps={{
+            submitButton: {
+              disabled: !formState.isDirty || maintenanceActive,
+              loading: formState.isSubmitting,
+            },
           }}
           className="hidden"
         />

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

@@ -1,65 +1,63 @@
 import ControlledSelect from '@/components/common/ControlledSelect';
 import Form from '@/components/common/Form';
 import SettingsContainer from '@/components/settings/SettingsContainer';
+import { useUI } from '@/context/UIContext';
 import {
-  useGetGravatarSettingsQuery,
-  useUpdateAppMutation,
+  GetAuthenticationSettingsDocument,
+  useGetAuthenticationSettingsQuery,
+  useUpdateConfigMutation,
 } from '@/generated/graphql';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Option from '@/ui/v2/Option';
+import getServerError from '@/utils/settings/getServerError';
 import {
   AUTH_GRAVATAR_DEFAULT,
   AUTH_GRAVATAR_RATING,
   getToastStyleProps,
 } from '@/utils/settings/settingsConstants';
-import { useEffect } from 'react';
+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';
 
-export interface GravatarFormValues {
-  /**
-   * Gravatar image to use as default.
-   */
-  authGravatarDefault: string;
-  /**
-   * Gravatar image rating.
-   */
-  authGravatarRating: string;
-  /**
-   * Enable Gravatar for this project
-   */
-  authGravatarEnabled: boolean;
-}
+const validationSchema = Yup.object({
+  enabled: Yup.boolean().label('Enabled'),
+  default: Yup.string().label('Default Gravatar'),
+  rating: Yup.string().label('Gravatar Rating'),
+});
+
+export type GravatarFormValues = Yup.InferType<typeof validationSchema>;
 
 export default function GravatarSettings() {
+  const { maintenanceActive } = useUI();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const [updateApp] = useUpdateAppMutation();
-
-  const { data, loading, error } = useGetGravatarSettingsQuery({
-    variables: {
-      id: currentApplication?.id,
-    },
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetAuthenticationSettingsDocument],
   });
 
+  const { data, loading, error } = useGetAuthenticationSettingsQuery({
+    variables: { appId: currentApplication?.id },
+    fetchPolicy: 'cache-only',
+  });
+
+  const {
+    default: defaultGravatar,
+    rating,
+    enabled,
+  } = data?.config?.auth?.user?.gravatar || {};
+
   const form = useForm<GravatarFormValues>({
     reValidateMode: 'onSubmit',
     defaultValues: {
-      authGravatarDefault: data?.app?.authGravatarDefault || '',
-      authGravatarRating: data?.app?.authGravatarRating || '',
-      authGravatarEnabled: data?.app?.authGravatarEnabled || false,
+      default: defaultGravatar || '',
+      rating: rating || '',
+      enabled: enabled || false,
     },
+    resolver: yupResolver(validationSchema),
   });
 
-  useEffect(() => {
-    form.reset(() => ({
-      authGravatarDefault: data?.app?.authGravatarDefault || '',
-      authGravatarRating: data?.app?.authGravatarRating || '',
-      authGravatarEnabled: data?.app?.authGravatarEnabled || false,
-    }));
-  }, [data?.app, form, form.reset]);
-
   if (loading) {
     return (
       <ActivityIndicator
@@ -75,29 +73,39 @@ export default function GravatarSettings() {
   }
 
   const { register, formState, watch } = form;
-  const authGravatarEnabled = watch('authGravatarEnabled');
+  const gravatarEnabled = watch('enabled') ?? false;
 
   const handleGravatarSettingsChange = async (values: GravatarFormValues) => {
-    const updateAppMutation = updateApp({
+    const updateConfigPromise = updateConfig({
       variables: {
-        id: currentApplication.id,
-        app: {
-          ...values,
+        appId: currentApplication.id,
+        config: {
+          auth: {
+            user: {
+              gravatar: values,
+            },
+          },
         },
       },
     });
 
-    await toast.promise(
-      updateAppMutation,
-      {
-        loading: `Gravatar settings are being updated...`,
-        success: `Gravatar settings have been updated successfully.`,
-        error: `An error occurred while trying to update the project's Gravatar settings.`,
-      },
-      getToastStyleProps(),
-    );
+    try {
+      await toast.promise(
+        updateConfigPromise,
+        {
+          loading: `Gravatar settings are being updated...`,
+          success: `Gravatar settings have been updated successfully.`,
+          error: getServerError(
+            `An error occurred while trying to update the project's Gravatar settings.`,
+          ),
+        },
+        getToastStyleProps(),
+      );
 
-    form.reset(values);
+      form.reset(values);
+    } catch {
+      // Note: The toast will handle the error.
+    }
   };
 
   return (
@@ -106,22 +114,23 @@ export default function GravatarSettings() {
         <SettingsContainer
           title="Gravatar"
           description="Use Gravatars for avatar URLs for users."
-          primaryActionButtonProps={{
-            disabled: !formState.isValid || !formState.isDirty,
-            loading: formState.isSubmitting,
+          slotProps={{
+            submitButton: {
+              disabled: !formState.isDirty || maintenanceActive,
+              loading: formState.isSubmitting,
+            },
           }}
           docsLink="https://docs.nhost.io/authentication#gravatar"
-          switchId="authGravatarEnabled"
+          switchId="enabled"
           showSwitch
-          enabled={authGravatarEnabled}
           className={twMerge(
             'grid grid-flow-col grid-cols-5 grid-rows-2 gap-y-6',
-            !authGravatarEnabled && 'hidden',
+            !gravatarEnabled && 'hidden',
           )}
         >
           <ControlledSelect
-            {...register('authGravatarDefault')}
-            id="authGravatarDefault"
+            {...register('default')}
+            id="default"
             className="col-span-5 lg:col-span-2"
             placeholder="Default Gravatar"
             hideEmptyHelperText
@@ -135,8 +144,8 @@ export default function GravatarSettings() {
             ))}
           </ControlledSelect>
           <ControlledSelect
-            {...register('authGravatarRating')}
-            id="authGravatarRating"
+            {...register('rating')}
+            id="rating"
             className="col-span-5 lg:col-span-2"
             placeholder="Gravatar Rating"
             hideEmptyHelperText

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

@@ -1,54 +1,52 @@
 import Form from '@/components/common/Form';
 import SettingsContainer from '@/components/settings/SettingsContainer';
+import { useUI } from '@/context/UIContext';
 import {
-  useGetAuthSettingsQuery,
-  useUpdateAppMutation,
+  GetAuthenticationSettingsDocument,
+  useGetAuthenticationSettingsQuery,
+  useUpdateConfigMutation,
 } from '@/generated/graphql';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Input from '@/ui/v2/Input';
+import getServerError from '@/utils/settings/getServerError';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
-import { useEffect } from 'react';
+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';
 
-export interface MFASettingsFormValues {
-  /**
-   * One Time Password issuer
-   */
-  authMfaTotpIssuer: string;
-  /**
-   * Enable Multi Factor Authentication for this project
-   */
-  authMfaEnabled: boolean;
-}
+const validationSchema = Yup.object({
+  enabled: Yup.boolean().label('Enabled'),
+  issuer: Yup.string().label('OTP Issuer').nullable().required(),
+});
+
+export type MFASettingsFormValues = Yup.InferType<typeof validationSchema>;
 
 export default function MFASettings() {
+  const { maintenanceActive } = useUI();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const [updateApp] = useUpdateAppMutation();
-
-  const { data, loading, error } = useGetAuthSettingsQuery({
-    variables: {
-      id: currentApplication?.id,
-    },
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetAuthenticationSettingsDocument],
   });
 
+  const { data, loading, error } = useGetAuthenticationSettingsQuery({
+    variables: { appId: currentApplication?.id },
+    fetchPolicy: 'cache-only',
+  });
+
+  const { enabled, issuer } = data?.config?.auth?.totp || {};
+
   const form = useForm<MFASettingsFormValues>({
     reValidateMode: 'onSubmit',
     defaultValues: {
-      authMfaTotpIssuer: data?.app?.authMfaTotpIssuer,
-      authMfaEnabled: data?.app?.authMfaEnabled,
+      issuer,
+      enabled,
     },
+    resolver: yupResolver(validationSchema),
   });
 
-  useEffect(() => {
-    form.reset(() => ({
-      authMfaTotpIssuer: data?.app?.authMfaTotpIssuer,
-      authMfaEnabled: data?.app?.authMfaEnabled,
-    }));
-  }, [data?.app, form, form.reset]);
-
   if (loading) {
     return (
       <ActivityIndicator
@@ -64,29 +62,37 @@ export default function MFASettings() {
   }
 
   const { register, formState, watch } = form;
-  const authMfaEnabled = watch('authMfaEnabled');
+  const authMfaEnabled = watch('enabled');
 
   const handleMFASettingsChange = async (values: MFASettingsFormValues) => {
-    const updateAppMutation = updateApp({
+    const updateConfigPromise = updateConfig({
       variables: {
-        id: currentApplication.id,
-        app: {
-          ...values,
+        appId: currentApplication.id,
+        config: {
+          auth: {
+            totp: values,
+          },
         },
       },
     });
 
-    await toast.promise(
-      updateAppMutation,
-      {
-        loading: `Multi-factor authentication settings are being updated...`,
-        success: `Multi-factor authentication settings have been updated successfully.`,
-        error: `An error occurred while trying to update the project's multi-factor authentication settings.`,
-      },
-      getToastStyleProps(),
-    );
+    try {
+      await toast.promise(
+        updateConfigPromise,
+        {
+          loading: `Multi-factor authentication settings are being updated...`,
+          success: `Multi-factor authentication settings have been updated successfully.`,
+          error: getServerError(
+            `An error occurred while trying to update the project's multi-factor authentication settings.`,
+          ),
+        },
+        getToastStyleProps(),
+      );
 
-    form.reset(values);
+      form.reset(values);
+    } catch {
+      // Note: The toast will handle the error.
+    }
   };
 
   return (
@@ -95,13 +101,14 @@ export default function MFASettings() {
         <SettingsContainer
           title="Multi-Factor Authentication"
           description="Enable users to use MFA to sign in"
-          primaryActionButtonProps={{
-            disabled: !formState.isValid || !formState.isDirty,
-            loading: formState.isSubmitting,
+          slotProps={{
+            submitButton: {
+              disabled: !formState.isDirty || maintenanceActive,
+              loading: formState.isSubmitting,
+            },
           }}
           docsLink="https://docs.nhost.io/authentication#multi-factor-authentication"
-          switchId="authMfaEnabled"
-          enabled={authMfaEnabled}
+          switchId="enabled"
           showSwitch
           className={twMerge(
             'grid grid-flow-row lg:grid-cols-5',
@@ -109,14 +116,16 @@ export default function MFASettings() {
           )}
         >
           <Input
-            {...register('authMfaTotpIssuer')}
-            name="authMfaTotpIssuer"
-            id="authMfaTotpIssuer"
+            {...register('issuer')}
+            name="issuer"
+            id="issuer"
             label="OTP Issuer"
             placeholder="Name of the One Time Password (OTP) issuer"
             className="col-span-2"
             fullWidth
             hideEmptyHelperText
+            error={!!formState.errors?.issuer}
+            helperText={formState.errors?.issuer?.message}
           />
         </SettingsContainer>
       </Form>

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

@@ -1,5 +1,6 @@
 import { useDialog } from '@/components/common/DialogProvider';
 import Form from '@/components/common/Form';
+import type { DialogFormProps } from '@/types/common';
 import Button from '@/ui/v2/Button';
 import Input from '@/ui/v2/Input';
 import Text from '@/ui/v2/Text';
@@ -7,26 +8,7 @@ import { useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';
 import * as Yup from 'yup';
 
-export interface BaseEnvironmentVariableFormValues {
-  /**
-   * Identifier of the environment variable.
-   */
-  id: string;
-  /**
-   * The name of the role.
-   */
-  name: string;
-  /**
-   * Development environment variable value.
-   */
-  devValue: string;
-  /**
-   * Production environment variable value.
-   */
-  prodValue: string;
-}
-
-export interface BaseEnvironmentVariableFormProps {
+export interface BaseEnvironmentVariableFormProps extends DialogFormProps {
   /**
    * Determines the mode of the form.
    *
@@ -50,8 +32,11 @@ export interface BaseEnvironmentVariableFormProps {
 }
 
 export const baseEnvironmentVariableFormValidationSchema = Yup.object({
+  id: Yup.string().label('ID'),
   name: Yup.string()
-    .required('This field is required.')
+    .label('Name')
+    .nullable()
+    .required()
     .test(
       'isEnvVarPermitted',
       'This is a reserved name.',
@@ -77,18 +62,24 @@ export const baseEnvironmentVariableFormValidationSchema = Yup.object({
           (prefix) => !value.startsWith(prefix),
         ),
     )
-    .test('isEnvVarValid', `The name must start with a letter.`, (value) =>
-      /^[a-zA-Z]{1,}[a-zA-Z0-9_]*$/i.test(value),
+    .test(
+      'isEnvVarValid',
+      'A name must start with a letter and can only contain letters, numbers, and underscores.',
+      (value) => /^[a-zA-Z]{1,}[a-zA-Z0-9_]*$/i.test(value),
     ),
-  devValue: Yup.string().required('This field is required.'),
-  prodValue: Yup.string().required('This field is required.'),
+  value: Yup.string().label('Value').nullable().required(),
 });
 
+export type BaseEnvironmentVariableFormValues = Yup.InferType<
+  typeof baseEnvironmentVariableFormValidationSchema
+>;
+
 export default function BaseEnvironmentVariableForm({
   mode = 'edit',
   onSubmit,
   onCancel,
   submitButtonText = 'Save',
+  location,
 }: BaseEnvironmentVariableFormProps) {
   const { onDirtyStateChange } = useDialog();
   const form = useFormContext<BaseEnvironmentVariableFormValues>();
@@ -103,8 +94,8 @@ export default function BaseEnvironmentVariableForm({
   const isDirty = Object.keys(dirtyFields).length > 0;
 
   useEffect(() => {
-    onDirtyStateChange(isDirty, 'dialog');
-  }, [isDirty, onDirtyStateChange]);
+    onDirtyStateChange(isDirty, location);
+  }, [isDirty, location, onDirtyStateChange]);
 
   return (
     <div className="grid grid-flow-row gap-6 px-6 pb-6">
@@ -115,21 +106,7 @@ export default function BaseEnvironmentVariableForm({
 
       <Form onSubmit={onSubmit} className="grid grid-flow-row gap-4">
         <Input
-          {...register('name', {
-            onChange: (event) => {
-              if (
-                event.target.value &&
-                !/^[a-zA-Z]{1,}[a-zA-Z0-9_]*$/g.test(event.target.value)
-              ) {
-                // we need to prevent invalid characters from being entered
-                // eslint-disable-next-line no-param-reassign
-                event.target.value = event.target.value.replace(
-                  /[^a-zA-Z0-9_]/g,
-                  '',
-                );
-              }
-            },
-          })}
+          {...register('name')}
           id="name"
           label="Name"
           placeholder="EXAMPLE_NAME"
@@ -143,30 +120,18 @@ export default function BaseEnvironmentVariableForm({
         />
 
         <Input
-          {...register('prodValue')}
-          id="prodValue"
-          label="Production Value"
+          {...register('value')}
+          id="value"
+          label="Value"
           placeholder="Enter value"
           hideEmptyHelperText
-          error={!!errors.prodValue}
-          helperText={errors?.prodValue?.message}
+          error={!!errors.value}
+          helperText={errors?.value?.message}
           fullWidth
           autoComplete="off"
           autoFocus={mode === 'edit'}
         />
 
-        <Input
-          {...register('devValue')}
-          id="devValue"
-          label="Development Value"
-          placeholder="Enter value"
-          hideEmptyHelperText
-          error={!!errors.devValue}
-          helperText={errors?.devValue?.message}
-          fullWidth
-          autoComplete="off"
-        />
-
         <div className="grid grid-flow-row gap-2">
           <Button type="submit" loading={isSubmitting}>
             {submitButtonText}

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

@@ -7,17 +7,19 @@ import BaseEnvironmentVariableForm, {
 } from '@/components/settings/environmentVariables/BaseEnvironmentVariableForm';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
+import getServerError from '@/utils/settings/getServerError';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import {
+  GetEnvironmentVariablesDocument,
   useGetEnvironmentVariablesQuery,
-  useInsertEnvironmentVariablesMutation,
+  useUpdateConfigMutation,
 } from '@/utils/__generated__/graphql';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 
 export interface CreateEnvironmentVariableFormProps
-  extends Pick<BaseEnvironmentVariableFormProps, 'onCancel'> {
+  extends Pick<BaseEnvironmentVariableFormProps, 'onCancel' | 'location'> {
   /**
    * Function to be called when the form is submitted.
    */
@@ -31,8 +33,7 @@ export default function CreateEnvironmentVariableForm({
   const form = useForm<BaseEnvironmentVariableFormValues>({
     defaultValues: {
       name: '',
-      devValue: '',
-      prodValue: '',
+      value: '',
     },
     reValidateMode: 'onSubmit',
     resolver: yupResolver(baseEnvironmentVariableFormValidationSchema),
@@ -41,14 +42,14 @@ export default function CreateEnvironmentVariableForm({
   const { currentApplication } = useCurrentWorkspaceAndApplication();
 
   const { data, loading, error } = useGetEnvironmentVariablesQuery({
-    variables: {
-      id: currentApplication?.id,
-    },
+    variables: { appId: currentApplication?.id },
     fetchPolicy: 'cache-only',
   });
 
-  const [insertEnvironmentVariables] = useInsertEnvironmentVariablesMutation({
-    refetchQueries: ['getEnvironmentVariables'],
+  const availableEnvironmentVariables = data?.config?.global?.environment || [];
+
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetEnvironmentVariablesDocument],
   });
 
   if (loading) {
@@ -68,13 +69,10 @@ export default function CreateEnvironmentVariableForm({
 
   async function handleSubmit({
     name,
-    prodValue,
-    devValue,
+    value,
   }: BaseEnvironmentVariableFormValues) {
     if (
-      data?.environmentVariables?.some(
-        (environmentVariable) => environmentVariable.name === name,
-      )
+      availableEnvironmentVariables?.some((variable) => variable.name === name)
     ) {
       setError('name', {
         message: 'This environment variable already exists.',
@@ -83,20 +81,34 @@ export default function CreateEnvironmentVariableForm({
       return;
     }
 
-    const insertEnvironmentVariablePromise = insertEnvironmentVariables({
+    const updateConfigPromise = updateConfig({
       variables: {
-        environmentVariables: [
-          { appId: currentApplication.id, name, prodValue, devValue },
-        ],
+        appId: currentApplication?.id,
+        config: {
+          global: {
+            environment: [
+              ...(availableEnvironmentVariables?.map((variable) => ({
+                name: variable.name,
+                value: variable.value,
+              })) || []),
+              {
+                name,
+                value,
+              },
+            ],
+          },
+        },
       },
     });
 
     await toast.promise(
-      insertEnvironmentVariablePromise,
+      updateConfigPromise,
       {
         loading: 'Creating environment variable...',
         success: 'Environment variable has been created successfully.',
-        error: 'An error occurred while creating the environment variable.',
+        error: getServerError(
+          'An error occurred while creating the environment variable.',
+        ),
       },
       getToastStyleProps(),
     );

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

@@ -8,17 +8,19 @@ import BaseEnvironmentVariableForm, {
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import type { EnvironmentVariable } from '@/types/application';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
+import getServerError from '@/utils/settings/getServerError';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import {
+  GetEnvironmentVariablesDocument,
   useGetEnvironmentVariablesQuery,
-  useUpdateEnvironmentVariableMutation,
+  useUpdateConfigMutation,
 } from '@/utils/__generated__/graphql';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 
 export interface EditEnvironmentVariableFormProps
-  extends Pick<BaseEnvironmentVariableFormProps, 'onCancel'> {
+  extends Pick<BaseEnvironmentVariableFormProps, 'onCancel' | 'location'> {
   /**
    * The environment variable to edit.
    */
@@ -38,8 +40,7 @@ export default function EditEnvironmentVariableForm({
     defaultValues: {
       id: originalEnvironmentVariable.id || '',
       name: originalEnvironmentVariable.name || '',
-      devValue: originalEnvironmentVariable.devValue || '',
-      prodValue: originalEnvironmentVariable.prodValue || '',
+      value: originalEnvironmentVariable.value || '',
     },
     reValidateMode: 'onSubmit',
     resolver: yupResolver(baseEnvironmentVariableFormValidationSchema),
@@ -48,14 +49,14 @@ export default function EditEnvironmentVariableForm({
   const { currentApplication } = useCurrentWorkspaceAndApplication();
 
   const { data, loading, error } = useGetEnvironmentVariablesQuery({
-    variables: {
-      id: currentApplication?.id,
-    },
+    variables: { appId: currentApplication?.id },
     fetchPolicy: 'cache-only',
   });
 
-  const [updateEnvironmentVariable] = useUpdateEnvironmentVariableMutation({
-    refetchQueries: ['getEnvironmentVariables'],
+  const availableEnvironmentVariables = data?.config?.global?.environment || [];
+
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetEnvironmentVariablesDocument],
   });
 
   if (loading) {
@@ -76,14 +77,13 @@ export default function EditEnvironmentVariableForm({
   async function handleSubmit({
     id,
     name,
-    prodValue,
-    devValue,
+    value,
   }: BaseEnvironmentVariableFormValues) {
     if (
-      data?.environmentVariables?.some(
-        (environmentVariable) =>
-          environmentVariable.name === name &&
-          environmentVariable.name !== originalEnvironmentVariable.name,
+      availableEnvironmentVariables.some(
+        (variable) =>
+          variable.name === name &&
+          variable.name !== originalEnvironmentVariable.name,
       )
     ) {
       setError('name', {
@@ -93,22 +93,36 @@ export default function EditEnvironmentVariableForm({
       return;
     }
 
-    const updateEnvironmentVariablePromise = updateEnvironmentVariable({
+    const updateConfigPromise = updateConfig({
       variables: {
-        id,
-        environmentVariable: {
-          prodValue,
-          devValue,
+        appId: currentApplication?.id,
+        config: {
+          global: {
+            environment: [
+              ...availableEnvironmentVariables
+                .filter((variable) => variable.id !== id)
+                .map((variable) => ({
+                  name: variable.name,
+                  value: variable.value,
+                })),
+              {
+                name,
+                value,
+              },
+            ],
+          },
         },
       },
     });
 
     await toast.promise(
-      updateEnvironmentVariablePromise,
+      updateConfigPromise,
       {
         loading: 'Updating environment variable...',
         success: 'Environment variable has been updated successfully.',
-        error: 'An error occurred while updating the environment variable.',
+        error: getServerError(
+          'An error occurred while updating the environment variable.',
+        ),
       },
       getToastStyleProps(),
     );

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

@@ -1,12 +1,13 @@
 import { useDialog } from '@/components/common/DialogProvider';
 import Form from '@/components/common/Form';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import type { DialogFormProps } from '@/types/common';
 import Button from '@/ui/v2/Button';
 import Input from '@/ui/v2/Input';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import {
-  refetchGetAppInjectedVariablesQuery,
-  useUpdateApplicationMutation,
+  GetEnvironmentVariablesDocument,
+  useUpdateConfigMutation,
 } from '@/utils/__generated__/graphql';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useEffect } from 'react';
@@ -14,7 +15,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';
 
-export interface EditJwtSecretFormProps {
+export interface EditJwtSecretFormProps extends DialogFormProps {
   /**
    * Initial JWT secret.
    */
@@ -39,14 +40,7 @@ export interface EditJwtSecretFormProps {
   onCancel?: VoidFunction;
 }
 
-export interface EditJwtSecretFormValues {
-  /**
-   * JWT secret.
-   */
-  jwtSecret: string;
-}
-
-const validationSchema = Yup.object().shape({
+const validationSchema = Yup.object({
   jwtSecret: Yup.string()
     .nullable()
     .required('This field is required.')
@@ -60,18 +54,19 @@ const validationSchema = Yup.object().shape({
     }),
 });
 
+export type EditJwtSecretFormValues = Yup.InferType<typeof validationSchema>;
+
 export default function EditJwtSecretForm({
   disabled,
   jwtSecret,
   onSubmit,
   onCancel,
   submitButtonText = 'Save',
+  location,
 }: EditJwtSecretFormProps) {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const [updateApplication] = useUpdateApplicationMutation({
-    refetchQueries: [
-      refetchGetAppInjectedVariablesQuery({ id: currentApplication?.id }),
-    ],
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetEnvironmentVariablesDocument],
   });
 
   const { onDirtyStateChange } = useDialog();
@@ -89,30 +84,42 @@ export default function EditJwtSecretForm({
   const isDirty = Object.keys(dirtyFields).length > 0;
 
   useEffect(() => {
-    onDirtyStateChange(isDirty, 'dialog');
-  }, [isDirty, onDirtyStateChange]);
+    onDirtyStateChange(isDirty, location);
+  }, [isDirty, location, onDirtyStateChange]);
 
   async function handleSubmit(values: EditJwtSecretFormValues) {
-    const updateAppPromise = updateApplication({
+    const parsedJwtSecret = JSON.parse(values.jwtSecret);
+    const isArray = Array.isArray(parsedJwtSecret);
+
+    const updateConfigPromise = updateConfig({
       variables: {
         appId: currentApplication?.id,
-        app: {
-          hasuraGraphqlJwtSecret: values.jwtSecret,
+        config: {
+          hasura: {
+            jwtSecrets: isArray ? parsedJwtSecret : [parsedJwtSecret],
+          },
         },
       },
     });
 
-    await toast.promise(
-      updateAppPromise,
-      {
-        loading: 'Updating JWT secret...',
-        success: 'JWT secret has been updated successfully.',
-        error: 'An error occurred while updating the JWT secret.',
-      },
-      getToastStyleProps(),
-    );
+    try {
+      await toast.promise(
+        updateConfigPromise,
+        {
+          loading: 'Updating JWT secret...',
+          success: 'JWT secret has been updated successfully.',
+          error: (arg: Error) =>
+            arg?.message
+              ? `Error: ${arg.message}`
+              : 'An error occurred while updating the JWT secret.',
+        },
+        getToastStyleProps(),
+      );
 
-    onSubmit?.();
+      onSubmit?.();
+    } catch {
+      // Note: error is handled above
+    }
   }
 
   return (
@@ -121,7 +128,7 @@ export default function EditJwtSecretForm({
         onSubmit={handleSubmit}
         className="flex flex-auto flex-col content-between overflow-hidden pb-4"
       >
-        <div className="px-6 overflow-y-auto flex-auto">
+        <div className="flex-auto overflow-y-auto px-6">
           <Input
             {...register('jwtSecret')}
             error={Boolean(errors.jwtSecret?.message)}

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

@@ -1,5 +1,8 @@
 import { useDialog } from '@/components/common/DialogProvider';
+import CreateEnvironmentVariableForm from '@/components/settings/environmentVariables/CreateEnvironmentVariableForm';
+import EditEnvironmentVariableForm from '@/components/settings/environmentVariables/EditEnvironmentVariableForm';
 import SettingsContainer from '@/components/settings/SettingsContainer';
+import { useUI } from '@/context/UIContext';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import type { EnvironmentVariable } from '@/types/application';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
@@ -13,34 +16,49 @@ import PlusIcon from '@/ui/v2/icons/PlusIcon';
 import List from '@/ui/v2/List';
 import { ListItem } from '@/ui/v2/ListItem';
 import Text from '@/ui/v2/Text';
+import getServerError from '@/utils/settings/getServerError';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import {
-  useDeleteEnvironmentVariableMutation,
+  GetEnvironmentVariablesDocument,
   useGetEnvironmentVariablesQuery,
+  useUpdateConfigMutation,
 } from '@/utils/__generated__/graphql';
-import { formatDistanceToNowStrict, parseISO } from 'date-fns';
 import { Fragment } from 'react';
 import toast from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';
 
-export interface PermissionVariableSettingsFormValues {
+export interface EnvironmentVariableSettingsFormValues {
   /**
-   * Permission variables.
+   * Environment variables.
    */
   environmentVariables: EnvironmentVariable[];
 }
 
 export default function EnvironmentVariableSettings() {
   const { openDialog, openAlertDialog } = useDialog();
+  const { maintenanceActive } = useUI();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
   const { data, loading, error } = useGetEnvironmentVariablesQuery({
-    variables: {
-      id: currentApplication?.id,
-    },
+    variables: { appId: currentApplication?.id },
+    fetchPolicy: 'cache-only',
   });
 
-  const [deleteEnvironmentVariable] = useDeleteEnvironmentVariableMutation({
-    refetchQueries: ['getEnvironmentVariables'],
+  const availableEnvironmentVariables = [
+    ...(data?.config?.global?.environment || []),
+  ].sort((a, b) => {
+    if (a.name < b.name) {
+      return -1;
+    }
+
+    if (a.name > b.name) {
+      return 1;
+    }
+
+    return 0;
+  });
+
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetEnvironmentVariablesDocument],
   });
 
   if (loading) {
@@ -57,26 +75,43 @@ export default function EnvironmentVariableSettings() {
   }
 
   async function handleDeleteVariable({ id }: EnvironmentVariable) {
-    const deleteEnvironmentVariablePromise = deleteEnvironmentVariable({
+    const updateConfigPromise = updateConfig({
       variables: {
-        id,
+        appId: currentApplication?.id,
+        config: {
+          global: {
+            environment: availableEnvironmentVariables
+              .filter((variable) => variable.id !== id)
+              .map((variable) => ({
+                name: variable.name,
+                value: variable.value,
+              })),
+          },
+        },
       },
     });
 
-    await toast.promise(
-      deleteEnvironmentVariablePromise,
-      {
-        loading: 'Deleting environment variable...',
-        success: 'Environment variable has been deleted successfully.',
-        error: 'An error occurred while deleting the environment variable.',
-      },
-      getToastStyleProps(),
-    );
+    try {
+      await toast.promise(
+        updateConfigPromise,
+        {
+          loading: 'Deleting environment variable...',
+          success: 'Environment variable has been deleted successfully.',
+          error: getServerError(
+            'An error occurred while deleting the environment variable.',
+          ),
+        },
+        getToastStyleProps(),
+      );
+    } catch {
+      // Note: The toast will handle the error.
+    }
   }
 
   function handleOpenCreator() {
-    openDialog('CREATE_ENVIRONMENT_VARIABLE', {
+    openDialog({
       title: 'Create Environment Variable',
+      component: <CreateEnvironmentVariableForm />,
       props: {
         titleProps: { className: '!pb-0' },
         PaperProps: { className: 'gap-2 max-w-sm' },
@@ -85,9 +120,13 @@ export default function EnvironmentVariableSettings() {
   }
 
   function handleOpenEditor(originalVariable: EnvironmentVariable) {
-    openDialog('EDIT_ENVIRONMENT_VARIABLE', {
-      title: 'Edit Environment Variables',
-      payload: { originalEnvironmentVariable: originalVariable },
+    openDialog({
+      title: 'Edit Environment Variable',
+      component: (
+        <EditEnvironmentVariableForm
+          originalEnvironmentVariable={originalVariable}
+        />
+      ),
       props: {
         titleProps: { className: '!pb-0' },
         PaperProps: { className: 'gap-2 max-w-sm' },
@@ -113,12 +152,6 @@ export default function EnvironmentVariableSettings() {
     });
   }
 
-  const availableEnvironmentVariables =
-    [...data.environmentVariables].sort(
-      (a, b) =>
-        new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
-    ) || [];
-
   return (
     <SettingsContainer
       title="Project Environment Variables"
@@ -134,95 +167,79 @@ export default function EnvironmentVariableSettings() {
     >
       <Box className="grid grid-cols-2 gap-2 border-b-1 px-4 py-3 lg:grid-cols-3">
         <Text className="font-medium">Variable Name</Text>
-        <Text className="font-medium lg:col-span-2">Updated</Text>
       </Box>
 
       <div className="grid grid-flow-row gap-2">
         {availableEnvironmentVariables.length > 0 && (
           <List>
-            {availableEnvironmentVariables.map((environmentVariable, index) => {
-              const timestamp = formatDistanceToNowStrict(
-                parseISO(environmentVariable.updatedAt),
-                { addSuffix: true, roundingMethod: 'floor' },
-              );
-
-              return (
-                <Fragment key={environmentVariable.id}>
-                  <ListItem.Root
-                    className="grid grid-cols-2 gap-2 px-4 lg:grid-cols-3"
-                    secondaryAction={
-                      <Dropdown.Root>
-                        <Dropdown.Trigger
-                          asChild
-                          hideChevron
-                          className="absolute right-4 top-1/2 -translate-y-1/2"
+            {availableEnvironmentVariables.map((environmentVariable, index) => (
+              <Fragment key={environmentVariable.id}>
+                <ListItem.Root
+                  className="grid grid-cols-2 gap-2 px-4 lg:grid-cols-3"
+                  secondaryAction={
+                    <Dropdown.Root>
+                      <Dropdown.Trigger
+                        asChild
+                        hideChevron
+                        className="absolute right-4 top-1/2 -translate-y-1/2"
+                      >
+                        <IconButton
+                          variant="borderless"
+                          color="secondary"
+                          disabled={maintenanceActive}
                         >
-                          <IconButton variant="borderless" color="secondary">
-                            <DotsVerticalIcon />
-                          </IconButton>
-                        </Dropdown.Trigger>
+                          <DotsVerticalIcon />
+                        </IconButton>
+                      </Dropdown.Trigger>
 
-                        <Dropdown.Content
-                          menu
-                          PaperProps={{ className: 'w-32' }}
-                          anchorOrigin={{
-                            vertical: 'bottom',
-                            horizontal: 'right',
-                          }}
-                          transformOrigin={{
-                            vertical: 'top',
-                            horizontal: 'right',
-                          }}
+                      <Dropdown.Content
+                        menu
+                        PaperProps={{ className: 'w-32' }}
+                        anchorOrigin={{
+                          vertical: 'bottom',
+                          horizontal: 'right',
+                        }}
+                        transformOrigin={{
+                          vertical: 'top',
+                          horizontal: 'right',
+                        }}
+                      >
+                        <Dropdown.Item
+                          onClick={() => handleOpenEditor(environmentVariable)}
                         >
-                          <Dropdown.Item
-                            onClick={() =>
-                              handleOpenEditor(environmentVariable)
-                            }
-                          >
-                            <Text className="font-medium">Edit</Text>
-                          </Dropdown.Item>
+                          <Text className="font-medium">Edit</Text>
+                        </Dropdown.Item>
 
-                          <Divider component="li" />
+                        <Divider component="li" />
 
-                          <Dropdown.Item
-                            onClick={() =>
-                              handleConfirmDelete(environmentVariable)
-                            }
-                          >
-                            <Text className="font-medium" color="error">
-                              Delete
-                            </Text>
-                          </Dropdown.Item>
-                        </Dropdown.Content>
-                      </Dropdown.Root>
-                    }
-                  >
-                    <ListItem.Text className="truncate">
-                      {environmentVariable.name}
-                    </ListItem.Text>
+                        <Dropdown.Item
+                          onClick={() =>
+                            handleConfirmDelete(environmentVariable)
+                          }
+                        >
+                          <Text className="font-medium" color="error">
+                            Delete
+                          </Text>
+                        </Dropdown.Item>
+                      </Dropdown.Content>
+                    </Dropdown.Root>
+                  }
+                >
+                  <ListItem.Text className="truncate">
+                    {environmentVariable.name}
+                  </ListItem.Text>
+                </ListItem.Root>
 
-                    <Text
-                      variant="subtitle1"
-                      className="truncate lg:col-span-2"
-                    >
-                      {timestamp === '0 seconds ago' ||
-                      timestamp === 'in 0 seconds'
-                        ? 'Now'
-                        : timestamp}
-                    </Text>
-                  </ListItem.Root>
-
-                  <Divider
-                    component="li"
-                    className={twMerge(
-                      index === availableEnvironmentVariables.length - 1
-                        ? '!mt-4'
-                        : '!my-4',
-                    )}
-                  />
-                </Fragment>
-              );
-            })}
+                <Divider
+                  component="li"
+                  className={twMerge(
+                    index === availableEnvironmentVariables.length - 1
+                      ? '!mt-4'
+                      : '!my-4',
+                  )}
+                />
+              </Fragment>
+            ))}
           </List>
         )}
 
@@ -231,6 +248,7 @@ export default function EnvironmentVariableSettings() {
           variant="borderless"
           startIcon={<PlusIcon />}
           onClick={handleOpenCreator}
+          disabled={maintenanceActive}
         >
           Create Environment Variable
         </Button>

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

@@ -1,6 +1,8 @@
 import { useDialog } from '@/components/common/DialogProvider';
 import InlineCode from '@/components/common/InlineCode';
+import EditJwtSecretForm from '@/components/settings/environmentVariables/EditJwtSecretForm';
 import SettingsContainer from '@/components/settings/SettingsContainer';
+import { useUI } from '@/context/UIContext';
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useAppClient } from '@/hooks/useAppClient';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
@@ -18,9 +20,10 @@ import generateAppServiceUrl, {
   defaultLocalBackendSlugs,
   defaultRemoteBackendSlugs,
 } from '@/utils/common/generateAppServiceUrl';
-import { LOCAL_HASURA_URL } from '@/utils/env';
+import { getHasuraConsoleServiceUrl } from '@/utils/env';
 import { generateRemoteAppUrl } from '@/utils/helpers';
-import { useGetAppInjectedVariablesQuery } from '@/utils/__generated__/graphql';
+import getJwtSecretsWithoutFalsyValues from '@/utils/settings/getJwtSecretsWithoutFalsyValues';
+import { useGetEnvironmentVariablesQuery } from '@/utils/__generated__/graphql';
 import { Fragment, useState } from 'react';
 
 export default function SystemEnvironmentVariableSettings() {
@@ -28,10 +31,22 @@ export default function SystemEnvironmentVariableSettings() {
   const [showWebhookSecret, setShowWebhookSecret] = useState(false);
 
   const { openDialog } = useDialog();
+  const { maintenanceActive } = useUI();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const { data, loading, error } = useGetAppInjectedVariablesQuery({
-    variables: { id: currentApplication?.id },
+  const { data, loading, error } = useGetEnvironmentVariablesQuery({
+    variables: { appId: currentApplication?.id },
+    fetchPolicy: 'cache-only',
   });
+
+  const { jwtSecrets, webhookSecret, adminSecret } = data?.config?.hasura || {};
+  const jwtSecretsWithoutFalsyValues = getJwtSecretsWithoutFalsyValues(
+    jwtSecrets || [],
+  );
+  const stringifiedJwtSecrets =
+    jwtSecretsWithoutFalsyValues.length === 1
+      ? JSON.stringify(jwtSecretsWithoutFalsyValues[0], null, 2)
+      : JSON.stringify(jwtSecretsWithoutFalsyValues, null, 2);
+
   const isPlatform = useIsPlatform();
 
   const appClient = useAppClient();
@@ -50,7 +65,7 @@ export default function SystemEnvironmentVariableSettings() {
   }
 
   function showViewJwtSecretModal() {
-    openDialog('EDIT_JWT_SECRET', {
+    openDialog({
       title: (
         <span className="grid grid-flow-row">
           <span>Auth JWT Secret</span>
@@ -61,15 +76,14 @@ export default function SystemEnvironmentVariableSettings() {
           </Text>
         </span>
       ),
-      payload: {
-        disabled: true,
-        jwtSecret: data?.app?.hasuraGraphqlJwtSecret,
-      },
+      component: (
+        <EditJwtSecretForm disabled jwtSecret={stringifiedJwtSecrets} />
+      ),
     });
   }
 
   function showEditJwtSecretModal() {
-    openDialog('EDIT_JWT_SECRET', {
+    openDialog({
       title: (
         <span className="grid grid-flow-row">
           <span>Edit JWT Secret</span>
@@ -80,9 +94,7 @@ export default function SystemEnvironmentVariableSettings() {
           </Text>
         </span>
       ),
-      payload: {
-        jwtSecret: data?.app?.hasuraGraphqlJwtSecret,
-      },
+      component: <EditJwtSecretForm jwtSecret={stringifiedJwtSecrets} />,
     });
   }
 
@@ -97,7 +109,7 @@ export default function SystemEnvironmentVariableSettings() {
       key: 'NHOST_HASURA_URL',
       value:
         process.env.NEXT_PUBLIC_ENV === 'dev' || !isPlatform
-          ? `${LOCAL_HASURA_URL}/console`
+          ? `${getHasuraConsoleServiceUrl()}/console`
           : generateAppServiceUrl(
               currentApplication?.subdomain,
               currentApplication?.region.awsName,
@@ -107,7 +119,7 @@ export default function SystemEnvironmentVariableSettings() {
             ),
     },
     { key: 'NHOST_AUTH_URL', value: appClient.auth.url },
-    { key: 'NHOST_GRAPHQL_URL', value: appClient.graphql.url },
+    { key: 'NHOST_GRAPHQL_URL', value: appClient.graphql.httpUrl },
     { key: 'NHOST_STORAGE_URL', value: appClient.storage.url },
     { key: 'NHOST_FUNCTIONS_URL', value: appClient.functions.url },
   ];
@@ -134,7 +146,7 @@ export default function SystemEnvironmentVariableSettings() {
             <Text className="truncate" color="secondary">
               {showAdminSecret ? (
                 <InlineCode className="!text-sm font-medium">
-                  {currentApplication?.hasuraGraphqlAdminSecret}
+                  {adminSecret}
                 </InlineCode>
               ) : (
                 '●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●'
@@ -167,7 +179,7 @@ export default function SystemEnvironmentVariableSettings() {
             <Text className="truncate" color="secondary">
               {showWebhookSecret ? (
                 <InlineCode className="!text-sm font-medium">
-                  {data?.app?.webhookSecret}
+                  {webhookSecret}
                 </InlineCode>
               ) : (
                 '●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●'
@@ -231,6 +243,7 @@ export default function SystemEnvironmentVariableSettings() {
               variant="borderless"
               onClick={showEditJwtSecretModal}
               size="small"
+              disabled={maintenanceActive}
             >
               Edit JWT Secret
             </Button>

dashboard/src/components/settings/git/BaseDirectorySettings/BaseDirectorySettings.tsx

@@ -1,11 +1,13 @@
 import Form from '@/components/common/Form';
 import InlineCode from '@/components/common/InlineCode';
 import SettingsContainer from '@/components/settings/SettingsContainer';
+import { useUI } from '@/context/UIContext';
 import { useUpdateAppMutation } from '@/generated/graphql';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import { Alert } from '@/ui/Alert';
 import Input from '@/ui/v2/Input';
 import { discordAnnounce } from '@/utils/discordAnnounce';
+import getServerError from '@/utils/settings/getServerError';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import { useApolloClient } from '@apollo/client';
 import { useEffect } from 'react';
@@ -20,6 +22,7 @@ export interface BaseDirectoryFormValues {
 }
 
 export default function BaseDirectorySettings() {
+  const { maintenanceActive } = useUI();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
   const [updateApp] = useUpdateAppMutation();
   const client = useApolloClient();
@@ -54,7 +57,9 @@ export default function BaseDirectorySettings() {
       {
         loading: `The base directory is being updated...`,
         success: `The base directory has been updated successfully.`,
-        error: `An error occurred while trying to update the project's base directory.`,
+        error: getServerError(
+          `An error occurred while trying to update the project's base directory.`,
+        ),
       },
       getToastStyleProps(),
     );
@@ -84,9 +89,11 @@ export default function BaseDirectorySettings() {
               <InlineCode className="text-xs">nhost</InlineCode> folder.
             </>
           }
-          primaryActionButtonProps={{
-            disabled: !formState.isValid || !formState.isDirty,
-            loading: formState.isSubmitting,
+          slotProps={{
+            submitButton: {
+              disabled: !formState.isDirty || maintenanceActive,
+              loading: formState.isSubmitting,
+            },
           }}
           docsLink="https://docs.nhost.io/platform/github-integration#base-directory"
           className="grid grid-flow-row lg:grid-cols-5"

dashboard/src/components/settings/git/DeploymentBranchSettings/DeploymentBranchSettings.tsx

@@ -1,10 +1,12 @@
 import Form from '@/components/common/Form';
 import SettingsContainer from '@/components/settings/SettingsContainer';
+import { useUI } from '@/context/UIContext';
 import { useUpdateAppMutation } from '@/generated/graphql';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import { Alert } from '@/ui/Alert';
 import Input from '@/ui/v2/Input';
 import { discordAnnounce } from '@/utils/discordAnnounce';
+import getServerError from '@/utils/settings/getServerError';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import { useApolloClient } from '@apollo/client';
 import { useEffect } from 'react';
@@ -19,6 +21,7 @@ export interface DeploymentBranchFormValues {
 }
 
 export default function DeploymentBranchSettings() {
+  const { maintenanceActive } = useUI();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
   const [updateApp] = useUpdateAppMutation();
   const client = useApolloClient();
@@ -57,7 +60,9 @@ export default function DeploymentBranchSettings() {
       {
         loading: `The deployment branch is being updated...`,
         success: `The deployment branch has been updated successfully.`,
-        error: `An error occurred while trying to update the project's deployment branch.`,
+        error: getServerError(
+          `An error occurred while trying to update the project's deployment branch.`,
+        ),
       },
       getToastStyleProps(),
     );
@@ -79,9 +84,11 @@ export default function DeploymentBranchSettings() {
         <SettingsContainer
           title="Deployment Branch"
           description="All commits pushed to this deployment branch will trigger a deployment. You can switch to a different branch here."
-          primaryActionButtonProps={{
-            disabled: !formState.isValid || !formState.isDirty,
-            loading: formState.isSubmitting,
+          slotProps={{
+            submitButton: {
+              disabled: !formState.isDirty || maintenanceActive,
+              loading: formState.isSubmitting,
+            },
           }}
           docsLink="https://docs.nhost.io/platform/github-integration#deployment-branch"
           className="grid grid-flow-row lg:grid-cols-5"