Merge pull request #1714 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
+/.github                                 @szilarddoro
-/dashboard/                              @szilarddoro @guicurcio
+/dashboard/                              @szilarddoro
-/docs/                                   @guicurcio @elitan
+/docs/                                   @elitan
-/config/                                 @plmercereau @szilarddoro
+/config/                                 @szilarddoro
-/examples/                               @plmercereau
+/examples/                               @szilarddoro
-/examples/codegen-react-apollo           @elitan @plmercereau
+/examples/codegen-react-apollo           @elitan @szilarddoro
-/examples/codegen-react-query            @elitan @plmercereau
+/examples/codegen-react-query            @elitan @szilarddoro
-/examples/react-apollo-crm               @elitan @plmercereau
+/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 }}

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/.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,125 @@
 # @nhost/dashboard
 
+## 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
 

dashboard/README.md

@@ -59,6 +59,9 @@ pnpm storybook
 | `NEXT_PUBLIC_GITHUB_APP_INSTALL_URL`      | URL of the GitHub application. Not necessary for local development.                                                                                  |
 | `NEXT_PUBLIC_ANALYTICS_WRITE_KEY`         | Analytics key. Not necessary for local development.                                                                                                  |
 | `NEXT_PUBLIC_NHOST_BRAGI_WEBSOCKET`       | URL of the Bragi websocket. Not necessary for local development.                                                                                     |
+| `NEXT_PUBLIC_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/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.12.4",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -44,10 +44,8 @@
     "@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",
@@ -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/cli": "^3.0.0",
-    "@graphql-codegen/typescript": "^2.7.1",
+    "@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": "18.0.28",
-    "@types/react-dom": "18.0.10",
+    "@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/HasuraData.tsx

@@ -22,11 +22,9 @@ interface HasuraDataProps {
 export function HasuraData({ close }: HasuraDataProps) {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
   const isPlatform = useIsPlatform();
+  const projectAdminSecret = currentApplication?.config?.hasura.adminSecret;
 
-  if (
+  if (!currentApplication?.subdomain || !projectAdminSecret) {
-    !currentApplication?.subdomain ||
-    !currentApplication?.hasuraGraphqlAdminSecret
-  ) {
     return <LoadingScreen />;
   }
 
@@ -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)
+                {Array(projectAdminSecret.length).fill('•').join('')}
-                  .fill('•')
-                  .join('')}
               </Text>
 
               <IconButton
-                onClick={() =>
+                onClick={() => copy(projectAdminSecret, 'Hasura admin secret')}
-                  copy(
-                    currentApplication.hasuraGraphqlAdminSecret,
-                    '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]
+                  const [latestDeployment] = app.deployments;
-                    ? app.deployments[0].deploymentStatus === 'DEPLOYING'
-                    : false;
 
                   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]
+                                    latestDeployment.deploymentStatus as DeploymentStatus
-                                      .deploymentStatus as DeploymentStatus
                                   }
                                 />
                               </div>
                             )}
+
                             <StateBadge
                               status={checkStatusOfTheApplication(
                                 app.appStates,
@@ -190,27 +140,10 @@ export function RenderWorkspacesWithApps({
                             <ListItem.Text
                               primary={app.name}
                               secondary={
-                                <>
+                                <DeploymentStatusMessage
-                                  {isDeployingToProduction && (
+                                  appCreatedAt={app.createdAt}
-                                    <CurrentDeployment
+                                  deployment={latestDeployment}
-                                      deployment={app.deployments[0]}
+                                />
-                                    />
-                                  )}
-
-                                  {!isDeployingToProduction &&
-                                    app.deployments[0] && (
-                                      <LastSuccessfulDeployment
-                                        deployment={app.deployments[0]}
-                                      />
-                                    )}
-
-                                  {!isDeployingToProduction &&
-                                    !app.deployments[0] && (
-                                      <ApplicationCreatedAt
-                                        createdAt={app.createdAt}
-                                      />
-                                    )}
-                                </>
                               }
                             />
                           </ListItem.Button>

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>(
+  openDialog: (options: OpenDialogOptions) => void;
-    type: DialogType,
-    config?: DialogConfig<TPayload>,
-  ) => 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>(
+  openDrawer: (options: OpenDialogOptions) => void;
-    type: DialogType,
-    config?: DialogConfig<TPayload>,
-  ) => 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 {
+import type { BaseSyntheticEvent, PropsWithChildren } from 'react';
-  BaseSyntheticEvent,
-  DetailedHTMLProps,
-  HTMLProps,
-  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, title: dialogTitle, activeDialog, dialogProps },
-      open: dialogOpen,
-      activeDialogType,
-      dialogProps,
-      title: dialogTitle,
-      payload: dialogPayload,
-    },
     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(
+  const openDialog = useCallback((options: OpenDialogOptions) => {
-    <TConfig,>(type: DialogType, config?: DialogConfig<TConfig>) => {
+    dialogDispatch({ type: 'OPEN_DIALOG', payload: options });
-      dialogDispatch({ type: 'OPEN_DIALOG', payload: { type, config } });
+  }, []);
-    },
-    [],
-  );
 
   const closeDialog = useCallback(() => {
     dialogDispatch({ type: 'HIDE_DIALOG' });
@@ -152,12 +74,9 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
     dialogDispatch({ type: 'CLEAR_DIALOG_CONTENT' });
   }, []);
 
-  const openDrawer = useCallback(
+  const openDrawer = useCallback((options: OpenDialogOptions) => {
-    <TConfig,>(type: DialogType, config?: DialogConfig<TConfig>) => {
+    drawerDispatch({ type: 'OPEN_DRAWER', payload: options });
-      drawerDispatch({ type: 'OPEN_DRAWER', payload: { type, config } });
+  }, []);
-    },
-    [],
-  );
 
   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' && (
+          {isValidElement(activeDialog)
-            <EditWorkspaceNameForm {...sharedDialogProps} />
+            ? cloneElement(activeDialog, {
-          )}
+                ...activeDialog.props,
-
+                location: 'dialog',
-          {activeDialogType === 'CREATE_FOREIGN_KEY' && (
+                onSubmit: async (values?: any) => {
-            <CreateForeignKeyForm {...sharedDialogProps} />
+                  await activeDialog?.props?.onSubmit?.(values);
-          )}
+                  closeDialog();
-
+                },
-          {activeDialogType === 'EDIT_FOREIGN_KEY' && (
+                onCancel: () => {
-            <EditForeignKeyForm {...sharedDialogProps} />
+                  activeDialog?.props?.onCancel?.();
-          )}
+                  closeDialogWithDirtyGuard();
-
+                },
-          {activeDialogType === 'CREATE_ROLE' && (
+              })
-            <CreateRoleForm {...sharedDialogProps} />
+            : null}
-          )}
-
-          {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} />
-          )}
         </RetryableErrorBoundary>
       </BaseDialog>
 
@@ -436,51 +297,20 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
         }}
       >
         <RetryableErrorBoundary>
-          {activeDrawerType === 'CREATE_RECORD' && (
+          {isValidElement(activeDrawer)
-            <CreateRecordForm
+            ? cloneElement(activeDrawer, {
-              {...sharedDrawerProps}
+                ...activeDrawer.props,
-              columns={drawerPayload?.columns}
+                location: 'drawer',
-            />
+                onSubmit: async (values?: any) => {
-          )}
+                  await activeDrawer?.props?.onSubmit?.(values);
-
+                  closeDrawer();
-          {activeDrawerType === 'CREATE_COLUMN' && (
+                },
-            <CreateColumnForm {...sharedDrawerProps} />
+                onCancel: () => {
-          )}
+                  activeDrawer?.props?.onCancel?.();
-
+                  closeDrawerWithDirtyGuard();
-          {activeDrawerType === 'EDIT_COLUMN' && (
+                },
-            <EditColumnForm
+              })
-              {...sharedDrawerProps}
+            : null}
-              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} />
-          )}
         </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 { ReactElement, ReactNode } from 'react';
-import type { DialogConfig, DialogType } from './DialogContext';
+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: OpenDialogOptions }
-      type: 'OPEN_DIALOG';
-      payload: { type: DialogType; config?: DialogConfig };
-    }
   | { type: 'HIDE_DIALOG' }
   | { type: 'CLEAR_DIALOG_CONTENT' };
 
@@ -50,10 +51,9 @@ export function dialogReducer(
       return {
         ...state,
         open: true,
-        activeDialogType: action.payload?.type,
+        title: action.payload.title,
-        dialogProps: action.payload.config?.props,
+        activeDialog: action.payload.component,
-        title: action.payload.config?.title,
+        dialogProps: action.payload.props,
-        payload: action.payload.config?.payload,
       };
     case 'HIDE_DIALOG':
       return {
@@ -64,8 +64,7 @@ export function dialogReducer(
       return {
         ...state,
         title: undefined,
-        payload: undefined,
+        activeDialog: undefined,
-        activeDialogType: undefined,
         dialogProps: undefined,
       };
     default:
@@ -74,10 +73,7 @@ export function dialogReducer(
 }
 
 export type DrawerAction =
-  | {
+  | { type: 'OPEN_DRAWER'; payload: OpenDialogOptions }
-      type: 'OPEN_DRAWER';
-      payload: { type: DialogType; config?: DialogConfig };
-    }
   | { type: 'HIDE_DRAWER' }
   | { type: 'CLEAR_DRAWER_CONTENT' };
 
@@ -97,10 +93,9 @@ export function drawerReducer(
       return {
         ...state,
         open: true,
-        activeDialogType: action.payload?.type,
+        title: action.payload.title,
-        dialogProps: action.payload.config?.props,
+        activeDialog: action.payload.component,
-        title: action.payload.config?.title,
+        dialogProps: action.payload.props,
-        payload: action.payload.config?.payload,
       };
     case 'HIDE_DRAWER':
       return {
@@ -111,8 +106,7 @@ export function drawerReducer(
       return {
         ...state,
         title: undefined,
-        payload: undefined,
+        activeDialog: undefined,
-        activeDialogType: 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">
+    <Box className="relative grid w-full 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>
-
       <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');
+    onDirtyStateChange(isDirty, location);
-  }, [isDirty, onDirtyStateChange]);
+  }, [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={() =>
+          onClick={() => {
-            openDialog('CREATE_FOREIGN_KEY', {
+            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: {
+              component: (
-                selectedColumn: column.name,
+                <CreateForeignKeyForm
-                availableColumns: [column],
+                  selectedColumn={column.name}
-                onSubmit: (values: BaseForeignKeyFormValues) => {
+                  availableColumns={[column]}
-                  setValue('foreignKeyRelation', values);
+                  onSubmit={(values) => {
-                  onCreateSubmit();
+                    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={() =>
+            onClick={() => {
-              openDialog('EDIT_FOREIGN_KEY', {
+              openDialog({
                 title: 'Edit Foreign Key Relation',
-                payload: {
+                component: (
-                  foreignKeyRelation,
+                  <EditForeignKeyForm
-                  availableColumns: [column],
+                    foreignKeyRelation={foreignKeyRelation}
-                  selectedColumn: column.name,
+                    selectedColumn={column.name}
-                  onSubmit: (values: BaseForeignKeyFormValues) => {
+                    availableColumns={[column]}
-                    setValue('foreignKeyRelation', values);
+                    onSubmit={(values) => {
-                    onEditSubmit();
+                      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');
+    onDirtyStateChange(isDirty, location);
-  }, [isDirty, onDirtyStateChange]);
+  }, [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');
+    onDirtyStateChange(isDirty, location);
-  }, [isDirty, onDirtyStateChange]);
+  }, [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');
+    onDirtyStateChange(isDirty, location);
-  }, [isDirty, onDirtyStateChange]);
+  }, [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: {
+              component: (
-                foreignKeyRelation: fields[index],
+                <EditForeignKeyForm
-                availableColumns: columns.map((column, columnIndex) =>
+                  foreignKeyRelation={fields[index] as ForeignKeyRelation}
-                  columnIndex === primaryKeyIndex
+                  availableColumns={columns.map((column, columnIndex) =>
-                    ? { ...column, isPrimary: true }
+                    columnIndex === primaryKeyIndex
-                    : column,
+                      ? { ...column, isPrimary: true }
-                ),
+                      : column,
-                onSubmit: (values: BaseForeignKeyFormValues) =>
+                  )}
-                  handleEdit(values, index),
+                  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: {
+            component: (
-              availableColumns: columns.map((column, index) =>
+              <CreateForeignKeyForm
-                index === primaryKeyIndex
+                availableColumns={columns.map((column, index) =>
-                  ? { ...column, isPrimary: true }
+                  index === primaryKeyIndex
-                  : column,
+                    ? { ...column, isPrimary: true }
-              ),
+                    : column,
-              onSubmit: handleCreate,
+                )}
-            },
+                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: {
+      component: (
-        columns: memoizedColumns,
+        <CreateRecordForm
-        onSubmit: refetch,
+          // 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: {
+      component: <CreateColumnForm onSubmit={refetch} />,
-        onSubmit: refetch,
-      },
     });
   }
 
   async function handleEditColumnClick(
     column: DataBrowserGridColumn<NormalizedQueryDataRow>,
   ) {
-    openDrawer('EDIT_COLUMN', {
+    openDrawer({
       title: 'Edit Column',
-      payload: {
+      component: (
-        column,
+        <EditColumnForm
-        onSubmit: () => queryClient.refetchQueries([currentTablePath]),
+          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
-                      <Dropdown.Root
+                      id="table-management-menu"
-                        id="table-management-menu"
+                      onOpen={() => setSidebarMenuTable(tablePath)}
-                        onOpen={() => setSidebarMenuTable(tablePath)}
+                      onClose={() => setSidebarMenuTable(undefined)}
-                        onClose={() => setSidebarMenuTable(undefined)}
+                    >
+                      <Dropdown.Trigger
+                        asChild
+                        hideChevron
+                        disabled={tablePath === removableTable}
                       >
-                        <Dropdown.Trigger
+                        <IconButton
-                          asChild
+                          variant="borderless"
-                          hideChevron
+                          color={isSelected ? 'primary' : 'secondary'}
-                          disabled={tablePath === removableTable}
+                          className={twMerge(
+                            !isSelected &&
+                              'opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 group-active:opacity-100',
+                          )}
                         >
-                          <IconButton
+                          <DotsHorizontalIcon />
-                            variant="borderless"
+                        </IconButton>
-                            color={isSelected ? 'primary' : 'secondary'}
+                      </Dropdown.Trigger>
-                            className={twMerge(
+
-                              !isSelected &&
+                      <Dropdown.Content menu PaperProps={{ className: 'w-52' }}>
-                                'opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 group-active:opacity-100',
+                        {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 />
+                            <UsersIcon
-                          </IconButton>
+                              className="h-4 w-4"
-                        </Dropdown.Trigger>
+                              sx={{ color: 'text.secondary' }}
+                            />
 
-                        <Dropdown.Content
+                            <span>View Permissions</span>
-                          menu
+                          </Dropdown.Item>
-                          PaperProps={{ className: 'w-52' }}
+                        ) : (
-                        >
+                          [
-                          {isGitHubConnected ? (
+                            !isSelectedSchemaLocked && (
-                            <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>
-                          ) : (
-                            [
                               <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: {
+                                    component: (
-                                      onSubmit: async () => {
+                                      <EditTableForm
-                                        await queryClient.refetchQueries([
+                                        onSubmit={async () => {
-                                          `${dataSourceSlug}.${table.table_schema}.${table.table_name}`,
+                                          await queryClient.refetchQueries([
-                                        ]);
+                                            `${dataSourceSlug}.${table.table_schema}.${table.table_name}`,
-                                        await refetch();
+                                          ]);
-                                      },
+                                          await refetch();
-                                      schema: table.table_schema,
+                                        }}
-                                      table,
+                                        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"
+                            <Dropdown.Item
-                                className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
+                              key="edit-permissions"
-                                onClick={() =>
+                              className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
-                                  handleEditPermissionClick(
+                              onClick={() =>
-                                    table.table_schema,
+                                handleEditPermissionClick(
-                                    table.table_name,
+                                  table.table_schema,
-                                  )
+                                  table.table_name,
-                                }
+                                )
-                              >
+                              }
-                                <UsersIcon
+                            >
-                                  className="h-4 w-4"
+                              <UsersIcon
-                                  sx={{ color: 'text.secondary' }}
+                                className="h-4 w-4"
-                                />
+                                sx={{ color: 'text.secondary' }}
+                              />
 
-                                <span>Edit Permissions</span>
+                              <span>Edit Permissions</span>
-                              </Dropdown.Item>,
+                            </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.Item>
-                            ]
+                            ),
-                          )}
+                          ]
-                        </Dropdown.Content>
+                        )}
-                      </Dropdown.Root>
+                      </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');
+    onDirtyStateChange(isDirty, location);
-  }, [isDirty, onDirtyStateChange]);
+  }, [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 getAllPermissionVariables from '@/utils/settings/getAllPermissionVariables';
-import { useGetAppCustomClaimsQuery } from '@/utils/__generated__/graphql';
+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({
+  const { data: permissionVariablesData } = useGetRolesPermissionsQuery({
-    variables: { id: currentApplication?.id },
+    variables: { appId: currentApplication?.id },
     skip: !currentApplication?.id,
   });
   const {
@@ -74,8 +74,8 @@ export default function ColumnPresetsSection({
     throw tableError;
   }
 
-  const permissionVariableOptions = getPermissionVariablesArray(
+  const permissionVariableOptions = getAllPermissionVariables(
-    customClaimsData?.app?.authJwtCustomClaims,
+    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 getAllPermissionVariables from '@/utils/settings/getAllPermissionVariables';
-import { useGetAppCustomClaimsQuery } from '@/utils/__generated__/graphql';
+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({
+  } = useGetRolesPermissionsQuery({
-    variables: { id: currentApplication?.id },
+    variables: { appId: currentApplication?.id },
     skip: !isHasuraInput || !currentApplication?.id,
   });
 
@@ -199,8 +200,8 @@ export default function RuleValueInput({
     );
   }
 
-  const availableHasuraPermissionVariables = getPermissionVariablesArray(
+  const availableHasuraPermissionVariables = getAllPermissionVariables(
-    data?.app?.authJwtCustomClaims,
+    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={(
-      isOptionEqualToValue={(option, value) => {
+        option,
-        if (typeof value === 'string') {
+        value: string | number | AutocompleteOption<string>,
-          return option.value.toLowerCase() === (value as string).toLowerCase();
+      ) => {
+        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';
@@ -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(),
                   );

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="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>
+    );
+  }
+
+  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

@@ -262,7 +262,7 @@ export default function FilesDataGrid(props: FilesDataGridProps) {
         .setAdminSecret(
           process.env.NEXT_PUBLIC_ENV === 'dev'
             ? 'nhost-admin-secret'
-            : currentApplication.hasuraGraphqlAdminSecret,
+            : currentApplication.config?.hasura.adminSecret,
         )
         .upload({
           file,
@@ -277,7 +277,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

@@ -72,7 +72,7 @@ export default function FilesDataGridControls({
       const storageWithAdminSecret = appClient.storage.setAdminSecret(
         process.env.NEXT_PUBLIC_ENV === 'dev'
           ? 'nhost-admin-secret'
-          : currentApplication.hasuraGraphqlAdminSecret,
+          : currentApplication.config?.hasura.adminSecret,
       );
 
       // note: this is not an optimal solution, but we don't have a better way
@@ -120,7 +120,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 {
+const validationSchema = Yup.object({
-  /**
-   * New workspace name.
-   */
-  newWorkspaceName: string;
-}
-
-const validationSchema = Yup.object().shape({
   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', {
+    const { res, error: acceptError } = await nhost.functions.call(
-      workspaceMemberInviteId: invite.id,
+      '/accept-workspace-invite',
-      isAccepted: true,
+      {
-    });
+        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,7 +93,7 @@ export function InviteAnnounce() {
       error: null,
     });
 
-    const res = await nhost.functions.call(
+    const { error: ignoreError } = await nhost.functions.call(
       '/accept-workspace-invite',
       {
         workspaceMemberInviteId: inviteId,
@@ -99,12 +102,12 @@ export function InviteAnnounce() {
       { 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';
@@ -146,6 +147,7 @@ function OverviewDeploymentList() {
 export default function OverviewDeployments() {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
   const { openGitHubModal } = useGitHubModal();
+  const { maintenanceActive } = useUI();
 
   const { githubRepository } = currentApplication || {};
 
@@ -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,6 +1,7 @@
 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 Button from '@/ui/v2/Button';
@@ -16,6 +17,7 @@ export default function OverviewTopBar() {
     useCurrentWorkspaceAndApplication();
   const isPro = !currentApplication?.plan?.isFree;
   const { openAlertDialog } = useDialog();
+  const { maintenanceActive } = useUI();
 
   if (!isPlatform) {
     return (
@@ -104,6 +106,7 @@ export default function OverviewTopBar() {
           endIcon={<CogIcon className="h-4 w-4" />}
           variant="outlined"
           color="secondary"
+          disabled={maintenanceActive}
         >
           Settings
         </Button>

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 }] =
+  const [resetPostgresPasswordMutation] = useResetPostgresPasswordMutation();
-    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]"
+          slotProps={{
-          primaryActionButtonProps={{
+            root: {
-            variant: 'contained',
+              sx: { borderColor: (theme) => theme.palette.error.main },
-            color: 'error',
+            },
-            disabled: Boolean(errors?.databasePassword),
+            submitButton: {
-            loading,
+              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 {
+const validationSchema = Yup.object({
-  /**
+  enabled: Yup.boolean().label('Enabled'),
-   * Determines whether or not the allowed email settings are enabled.
+  allowedEmails: Yup.string().label('Allowed Emails'),
-   */
+  allowedEmailDomains: Yup.string().label('Allowed Email Domains'),
-  enabled: boolean;
+});
-  /**
+
-   * Set of email that are allowed to be used for project's users authentication.
+export type AllowedEmailSettingsFormValues = Yup.InferType<
-   */
+  typeof validationSchema
-  authAccessControlAllowedEmails: string;
+>;
-  /**
-   * Set of email domains that are allowed to be used for project's users authentication.
-   * @example 'nhost.io'
-   */
-  authAccessControlAllowedEmailDomains: string;
-}
 
 export default function AllowedEmailDomainsSettings() {
+  const { maintenanceActive } = useUI();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const [updateApp] = useUpdateAppMutation();
+  const [updateConfig] = useUpdateConfigMutation({
-
+    refetchQueries: [GetAuthenticationSettingsDocument],
-  const { data, loading, error } = useGetAppQuery({
-    variables: {
-      id: currentApplication?.id,
-    },
   });
 
+  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:
+      enabled: email?.allowed?.length > 0 || emailDomains?.allowed?.length > 0,
-        Boolean(data?.app?.authAccessControlAllowedEmails) ||
+      allowedEmails: email?.allowed?.join(', ') || '',
-        Boolean(data?.app?.authAccessControlAllowedEmailDomains),
+      allowedEmailDomains: emailDomains?.allowed?.join(', ') || '',
-      authAccessControlAllowedEmails: data?.app?.authAccessControlAllowedEmails,
-      authAccessControlAllowedEmailDomains:
-        data?.app?.authAccessControlAllowedEmailDomains,
     },
+    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,
+        appId: currentApplication.id,
-        app: {
+        config: {
-          authAccessControlAllowedEmails: values.enabled
+          auth: {
-            ? values.authAccessControlAllowedEmails
+            user: {
-            : '',
+              email: {
-          authAccessControlAllowedEmailDomains: values.enabled
+                blocked: email.blocked,
-            ? values.authAccessControlAllowedEmailDomains
+                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(
+    try {
-      updateAppMutation,
+      await toast.promise(
-      {
+        updateConfigPromise,
-        loading: `Allowed email settings are being updated...`,
+        {
-        success: `Allowed email settings have been updated successfully.`,
+          loading: `Allowed email settings are being updated...`,
-        error: `An error occurred while trying to update the project's allowed email settings.`,
+          success: `Allowed email settings have been updated successfully.`,
-      },
+          error: getServerError(
-      getToastStyleProps(),
+            `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}
+          switchId="enabled"
-          onEnabledChange={(switchEnabled) =>
-            setValue('enabled', switchEnabled, { shouldDirty: true })
-          }
           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')}
+            {...register('allowedEmails')}
-            name="authAccessControlAllowedEmails"
+            name="allowedEmails"
-            id="authAccessControlAllowedEmails"
+            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')}
+            {...register('allowedEmailDomains')}
-            name="authAccessControlAllowedEmailDomains"
+            name="allowedEmailDomains"
-            id="authAccessControlAllowedEmailDomains"
+            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 {
+const validationSchema = Yup.object({
-  /**
+  allowedUrls: Yup.string().label('Allowed Redirect URLs'),
-   * Set of URLs that are allowed to be redirected to after project's users authentication.
+});
-   */
+
-  authAccessControlAllowedRedirectUrls: string;
+export type AllowedRedirectURLFormValues = Yup.InferType<
-}
+  typeof validationSchema
+>;
 
 export default function AllowedRedirectURLsSettings() {
+  const { maintenanceActive } = useUI();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const [updateApp] = useUpdateAppMutation();
+  const [updateConfig] = useUpdateConfigMutation({
-
+    refetchQueries: [GetAuthenticationSettingsDocument],
-  const { data, loading, error } = useGetAppQuery({
-    variables: {
-      id: currentApplication?.id,
-    },
   });
 
+  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:
+      allowedUrls: allowedUrls?.join(', ') || '',
-        data?.app?.authAccessControlAllowedRedirectUrls,
     },
+    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,
+        appId: currentApplication.id,
-        app: {
+        config: {
-          ...values,
+          auth: {
+            redirections: {
+              allowedUrls: values.allowedUrls
+                ? values.allowedUrls.split(',').map((url) => url.trim())
+                : [],
+            },
+          },
         },
       },
     });
 
-    await toast.promise(
+    try {
-      updateAppMutation,
+      await toast.promise(
-      {
+        updateConfigPromise,
-        loading: `Allowed redirect URL settings are being updated...`,
+        {
-        success: `Allowed redirect URL settings have been updated successfully.`,
+          loading: `Allowed redirect URL settings are being updated...`,
-        error: `An error occurred while trying to update the project's allowed redirect URL settings.`,
+          success: `Allowed redirect URL settings have been updated successfully.`,
-      },
+          error: getServerError(
-      getToastStyleProps(),
+            `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={{
+          slotProps={{
-            disabled: !formState.isValid || !formState.isDirty,
+            submitButton: {
-            loading: formState.isSubmitting,
+              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')}
+            {...register('allowedUrls')}
-            name="authAccessControlAllowedRedirectUrls"
+            name="allowedUrls"
-            id="authAccessControlAllowedRedirectUrls"
+            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 {
+const validationSchema = Yup.object({
-  /**
+  enabled: Yup.boolean().label('Enabled'),
-   * Determines whether or not the blocked email settings are enabled.
+  blockedEmails: Yup.string().label('Blocked Emails'),
-   */
+  blockedEmailDomains: Yup.string().label('Blocked Email Domains'),
-  enabled: boolean;
+});
-  /**
+
-   * Set of emails that are blocked from registering to the user's project.
+export type BlockedEmailFormValues = Yup.InferType<typeof validationSchema>;
-   */
-  authAccessControlBlockedEmails: string;
-  /**
-   * Set of email domains that are blocked from registering to the user's project.
-   */
-  authAccessControlBlockedEmailDomains: string;
-}
 
 export default function BlockedEmailSettings() {
+  const { maintenanceActive } = useUI();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const [updateApp] = useUpdateAppMutation();
+  const [updateConfig] = useUpdateConfigMutation({
-
+    refetchQueries: [GetAuthenticationSettingsDocument],
-  const { data, loading, error } = useGetAppQuery({
-    variables: {
-      id: currentApplication?.id,
-    },
   });
 
+  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:
+      enabled: email?.blocked?.length > 0 || emailDomains?.blocked?.length > 0,
-        Boolean(data?.app?.authAccessControlBlockedEmails) ||
+      blockedEmails: email?.blocked?.join(', ') || '',
-        Boolean(data?.app?.authAccessControlBlockedEmailDomains),
+      blockedEmailDomains: emailDomains?.blocked?.join(', ') || '',
-      authAccessControlBlockedEmails: data?.app?.authAccessControlBlockedEmails,
-      authAccessControlBlockedEmailDomains:
-        data?.app?.authAccessControlBlockedEmailDomains,
     },
+    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,
+        appId: currentApplication.id,
-        app: {
+        config: {
-          authAccessControlBlockedEmails: values.enabled
+          auth: {
-            ? values.authAccessControlBlockedEmails
+            user: {
-            : '',
+              email: {
-          authAccessControlBlockedEmailDomains: values.enabled
+                allowed: email.allowed,
-            ? values.authAccessControlBlockedEmailDomains
+                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(
+    try {
-      updateAppMutation,
+      await toast.promise(
-      {
+        updateConfigPromise,
-        loading: `Blocked email and domain settings are being updated...`,
+        {
-        success: `Blocked email and domain settings have been updated successfully.`,
+          loading: `Blocked email and domain settings are being updated...`,
-        error: `An error occurred while trying to update the project's blocked email and domain settings.`,
+          success: `Blocked email and domain settings have been updated successfully.`,
-      },
+          error: getServerError(
-      getToastStyleProps(),
+            `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}
+          switchId="enabled"
-          onEnabledChange={(switchEnabled) =>
-            setValue('enabled', switchEnabled, { shouldDirty: true })
-          }
           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')}
+            {...register('blockedEmails')}
-            name="authAccessControlBlockedEmails"
+            name="blockedEmails"
-            id="authAccessControlBlockedEmails"
+            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')}
+            {...register('blockedEmailDomains')}
-            name="authAccessControlBlockedEmailDomains"
+            name="blockedEmailDomains"
-            id="authAccessControlBlockedEmailDomains"
+            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 {
+const validationSchema = Yup.object({
-  /**
+  clientUrl: Yup.string().label('Client URL'),
-   * The URL of the frontend app of where users are redirected after authenticating.
+});
-   */
+
-  authClientUrl: string;
+export type ClientURLFormValues = Yup.InferType<typeof validationSchema>;
-}
 
 export default function ClientURLSettings() {
+  const { maintenanceActive } = useUI();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const [updateApp] = useUpdateAppMutation({ refetchQueries: ['GetApp'] });
+  const [updateConfig] = useUpdateConfigMutation({
-
+    refetchQueries: [GetAuthenticationSettingsDocument],
-  const { data, loading, error } = useGetAppQuery({
-    variables: {
-      id: currentApplication?.id,
-    },
-    fetchPolicy: 'cache-first',
   });
 
+  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,
+        appId: currentApplication.id,
-        app: {
+        config: {
-          ...values,
+          auth: {
+            redirections: {
+              ...values,
+              allowedUrls,
+            },
+          },
         },
       },
     });
 
-    await toast.promise(
+    try {
-      updateAppMutation,
+      await toast.promise(
-      {
+        updateConfigPromise,
-        loading: `Client URL is being updated...`,
+        {
-        success: `Client URL has been updated successfully.`,
+          loading: `Client URL is being updated...`,
-        error: `An error occurred while trying to update the project's Client URL.`,
+          success: `Client URL has been updated successfully.`,
-      },
+          error: getServerError(
-      getToastStyleProps(),
+            `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={{
+          slotProps={{
-            disabled: !formState.isValid || !formState.isDirty,
+            submitButton: {
-            loading: formState.isSubmitting,
+              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')}
+            {...register('clientUrl')}
-            name="authClientUrl"
+            name="clientUrl"
-            id="authClientUrl"
+            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,
+  GetAuthenticationSettingsDocument,
-  useUpdateAppMutation,
+  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 {
+const validationSchema = Yup.object({
-  /**
+  disabled: Yup.boolean(),
-   * Disable new users from signing up to this project
+});
-   */
+
-  authDisableNewUsers: 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({
+  const { data, loading, error } = useGetAuthenticationSettingsQuery({
-    variables: {
+    variables: { appId: currentApplication?.id },
-      id: 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 { formState } = form;
-  const authDisableNewUsers = watch('authDisableNewUsers');
 
   const handleDisableNewUsersChange = async (
     values: DisableNewUsersFormValues,
   ) => {
-    const updateAppMutation = updateApp({
+    const updateConfigPromise = updateConfig({
       variables: {
-        id: currentApplication.id,
+        appId: currentApplication.id,
-        app: {
+        config: {
-          ...values,
+          auth: {
+            signUp: {
+              enabled: !values.disabled,
+            },
+          },
         },
       },
     });
 
-    await toast.promise(
+    try {
-      updateAppMutation,
+      await toast.promise(
-      {
+        updateConfigPromise,
-        loading: `Disabling new user sign ups...`,
+        {
-        success: `New user sign ups have been disabled successfully.`,
+          loading: `Disabling new user sign ups...`,
-        error: `An error occurred while trying to disable new user sign ups.`,
+          success: `New user sign ups have been disabled successfully.`,
-      },
+          error: getServerError(
-      getToastStyleProps(),
+            `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}
+          slotProps={{
-          primaryActionButtonProps={{
+            submitButton: {
-            disabled: !formState.isValid || !formState.isDirty,
+              disabled: !formState.isDirty || maintenanceActive,
-            loading: formState.isSubmitting,
+              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,
+  GetAuthenticationSettingsDocument,
-  useUpdateAppMutation,
+  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 {
+const validationSchema = Yup.object({
-  /**
+  enabled: Yup.boolean().label('Enabled'),
-   * Gravatar image to use as default.
+  default: Yup.string().label('Default Gravatar'),
-   */
+  rating: Yup.string().label('Gravatar Rating'),
-  authGravatarDefault: string;
+});
-  /**
+
-   * Gravatar image rating.
+export type GravatarFormValues = Yup.InferType<typeof validationSchema>;
-   */
-  authGravatarRating: string;
-  /**
-   * Enable Gravatar for this project
-   */
-  authGravatarEnabled: boolean;
-}
 
 export default function GravatarSettings() {
+  const { maintenanceActive } = useUI();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const [updateApp] = useUpdateAppMutation();
+  const [updateConfig] = useUpdateConfigMutation({
-
+    refetchQueries: [GetAuthenticationSettingsDocument],
-  const { data, loading, error } = useGetGravatarSettingsQuery({
-    variables: {
-      id: currentApplication?.id,
-    },
   });
 
+  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 || '',
+      default: defaultGravatar || '',
-      authGravatarRating: data?.app?.authGravatarRating || '',
+      rating: rating || '',
-      authGravatarEnabled: data?.app?.authGravatarEnabled || false,
+      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,
+        appId: currentApplication.id,
-        app: {
+        config: {
-          ...values,
+          auth: {
+            user: {
+              gravatar: values,
+            },
+          },
         },
       },
     });
 
-    await toast.promise(
+    try {
-      updateAppMutation,
+      await toast.promise(
-      {
+        updateConfigPromise,
-        loading: `Gravatar settings are being updated...`,
+        {
-        success: `Gravatar settings have been updated successfully.`,
+          loading: `Gravatar settings are being updated...`,
-        error: `An error occurred while trying to update the project's Gravatar settings.`,
+          success: `Gravatar settings have been updated successfully.`,
-      },
+          error: getServerError(
-      getToastStyleProps(),
+            `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={{
+          slotProps={{
-            disabled: !formState.isValid || !formState.isDirty,
+            submitButton: {
-            loading: formState.isSubmitting,
+              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')}
+            {...register('default')}
-            id="authGravatarDefault"
+            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')}
+            {...register('rating')}
-            id="authGravatarRating"
+            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,
+  GetAuthenticationSettingsDocument,
-  useUpdateAppMutation,
+  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 {
+const validationSchema = Yup.object({
-  /**
+  enabled: Yup.boolean().label('Enabled'),
-   * One Time Password issuer
+  issuer: Yup.string().label('OTP Issuer').nullable().required(),
-   */
+});
-  authMfaTotpIssuer: string;
+
-  /**
+export type MFASettingsFormValues = Yup.InferType<typeof validationSchema>;
-   * Enable Multi Factor Authentication for this project
-   */
-  authMfaEnabled: boolean;
-}
 
 export default function MFASettings() {
+  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 { enabled, issuer } = data?.config?.auth?.totp || {};
+
   const form = useForm<MFASettingsFormValues>({
     reValidateMode: 'onSubmit',
     defaultValues: {
-      authMfaTotpIssuer: data?.app?.authMfaTotpIssuer,
+      issuer,
-      authMfaEnabled: data?.app?.authMfaEnabled,
+      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,
+        appId: currentApplication.id,
-        app: {
+        config: {
-          ...values,
+          auth: {
+            totp: values,
+          },
         },
       },
     });
 
-    await toast.promise(
+    try {
-      updateAppMutation,
+      await toast.promise(
-      {
+        updateConfigPromise,
-        loading: `Multi-factor authentication settings are being updated...`,
+        {
-        success: `Multi-factor authentication settings have been updated successfully.`,
+          loading: `Multi-factor authentication settings are being updated...`,
-        error: `An error occurred while trying to update the project's multi-factor authentication settings.`,
+          success: `Multi-factor authentication settings have been updated successfully.`,
-      },
+          error: getServerError(
-      getToastStyleProps(),
+            `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={{
+          slotProps={{
-            disabled: !formState.isValid || !formState.isDirty,
+            submitButton: {
-            loading: formState.isSubmitting,
+              disabled: !formState.isDirty || maintenanceActive,
+              loading: formState.isSubmitting,
+            },
           }}
           docsLink="https://docs.nhost.io/authentication#multi-factor-authentication"
-          switchId="authMfaEnabled"
+          switchId="enabled"
-          enabled={authMfaEnabled}
           showSwitch
           className={twMerge(
             'grid grid-flow-row lg:grid-cols-5',
@@ -109,14 +116,16 @@ export default function MFASettings() {
           )}
         >
           <Input
-            {...register('authMfaTotpIssuer')}
+            {...register('issuer')}
-            name="authMfaTotpIssuer"
+            name="issuer"
-            id="authMfaTotpIssuer"
+            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 {
+export interface BaseEnvironmentVariableFormProps extends DialogFormProps {
-  /**
-   * 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 {
   /**
    * 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) =>
+    .test(
-      /^[a-zA-Z]{1,}[a-zA-Z0-9_]*$/i.test(value),
+      '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.'),
+  value: Yup.string().label('Value').nullable().required(),
-  prodValue: Yup.string().required('This field is 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');
+    onDirtyStateChange(isDirty, location);
-  }, [isDirty, onDirtyStateChange]);
+  }, [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', {
+          {...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,
-                  '',
-                );
-              }
-            },
-          })}
           id="name"
           label="Name"
           placeholder="EXAMPLE_NAME"
@@ -143,30 +120,18 @@ export default function BaseEnvironmentVariableForm({
         />
 
         <Input
-          {...register('prodValue')}
+          {...register('value')}
-          id="prodValue"
+          id="value"
-          label="Production Value"
+          label="Value"
           placeholder="Enter value"
           hideEmptyHelperText
-          error={!!errors.prodValue}
+          error={!!errors.value}
-          helperText={errors?.prodValue?.message}
+          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: '',
+      value: '',
-      prodValue: '',
     },
     reValidateMode: 'onSubmit',
     resolver: yupResolver(baseEnvironmentVariableFormValidationSchema),
@@ -41,14 +42,14 @@ export default function CreateEnvironmentVariableForm({
   const { currentApplication } = useCurrentWorkspaceAndApplication();
 
   const { data, loading, error } = useGetEnvironmentVariablesQuery({
-    variables: {
+    variables: { appId: currentApplication?.id },
-      id: currentApplication?.id,
-    },
     fetchPolicy: 'cache-only',
   });
 
-  const [insertEnvironmentVariables] = useInsertEnvironmentVariablesMutation({
+  const availableEnvironmentVariables = data?.config?.global?.environment || [];
-    refetchQueries: ['getEnvironmentVariables'],
+
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetEnvironmentVariablesDocument],
   });
 
   if (loading) {
@@ -68,13 +69,10 @@ export default function CreateEnvironmentVariableForm({
 
   async function handleSubmit({
     name,
-    prodValue,
+    value,
-    devValue,
   }: BaseEnvironmentVariableFormValues) {
     if (
-      data?.environmentVariables?.some(
+      availableEnvironmentVariables?.some((variable) => variable.name === name)
-        (environmentVariable) => environmentVariable.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,
-          { appId: currentApplication.id, name, prodValue, devValue },
+        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 || '',
+      value: originalEnvironmentVariable.value || '',
-      prodValue: originalEnvironmentVariable.prodValue || '',
     },
     reValidateMode: 'onSubmit',
     resolver: yupResolver(baseEnvironmentVariableFormValidationSchema),
@@ -48,14 +49,14 @@ export default function EditEnvironmentVariableForm({
   const { currentApplication } = useCurrentWorkspaceAndApplication();
 
   const { data, loading, error } = useGetEnvironmentVariablesQuery({
-    variables: {
+    variables: { appId: currentApplication?.id },
-      id: currentApplication?.id,
-    },
     fetchPolicy: 'cache-only',
   });
 
-  const [updateEnvironmentVariable] = useUpdateEnvironmentVariableMutation({
+  const availableEnvironmentVariables = data?.config?.global?.environment || [];
-    refetchQueries: ['getEnvironmentVariables'],
+
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetEnvironmentVariablesDocument],
   });
 
   if (loading) {
@@ -76,14 +77,13 @@ export default function EditEnvironmentVariableForm({
   async function handleSubmit({
     id,
     name,
-    prodValue,
+    value,
-    devValue,
   }: BaseEnvironmentVariableFormValues) {
     if (
-      data?.environmentVariables?.some(
+      availableEnvironmentVariables.some(
-        (environmentVariable) =>
+        (variable) =>
-          environmentVariable.name === name &&
+          variable.name === name &&
-          environmentVariable.name !== originalEnvironmentVariable.name,
+          variable.name !== originalEnvironmentVariable.name,
       )
     ) {
       setError('name', {
@@ -93,22 +93,36 @@ export default function EditEnvironmentVariableForm({
       return;
     }
 
-    const updateEnvironmentVariablePromise = updateEnvironmentVariable({
+    const updateConfigPromise = updateConfig({
       variables: {
-        id,
+        appId: currentApplication?.id,
-        environmentVariable: {
+        config: {
-          prodValue,
+          global: {
-          devValue,
+            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,
+  GetEnvironmentVariablesDocument,
-  useUpdateApplicationMutation,
+  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 {
+const validationSchema = Yup.object({
-  /**
-   * JWT secret.
-   */
-  jwtSecret: string;
-}
-
-const validationSchema = Yup.object().shape({
   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({
+  const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [
+    refetchQueries: [GetEnvironmentVariablesDocument],
-      refetchGetAppInjectedVariablesQuery({ id: currentApplication?.id }),
-    ],
   });
 
   const { onDirtyStateChange } = useDialog();
@@ -89,30 +84,42 @@ export default function EditJwtSecretForm({
   const isDirty = Object.keys(dirtyFields).length > 0;
 
   useEffect(() => {
-    onDirtyStateChange(isDirty, 'dialog');
+    onDirtyStateChange(isDirty, location);
-  }, [isDirty, onDirtyStateChange]);
+  }, [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: {
+        config: {
-          hasuraGraphqlJwtSecret: values.jwtSecret,
+          hasura: {
+            jwtSecrets: isArray ? parsedJwtSecret : [parsedJwtSecret],
+          },
         },
       },
     });
 
-    await toast.promise(
+    try {
-      updateAppPromise,
+      await toast.promise(
-      {
+        updateConfigPromise,
-        loading: 'Updating JWT secret...',
+        {
-        success: 'JWT secret has been updated successfully.',
+          loading: 'Updating JWT secret...',
-        error: 'An error occurred while updating the JWT secret.',
+          success: 'JWT secret has been updated successfully.',
-      },
+          error: (arg: Error) =>
-      getToastStyleProps(),
+            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: {
+    variables: { appId: currentApplication?.id },
-      id: currentApplication?.id,
+    fetchPolicy: 'cache-only',
-    },
   });
 
-  const [deleteEnvironmentVariable] = useDeleteEnvironmentVariableMutation({
+  const availableEnvironmentVariables = [
-    refetchQueries: ['getEnvironmentVariables'],
+    ...(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(
+    try {
-      deleteEnvironmentVariablePromise,
+      await toast.promise(
-      {
+        updateConfigPromise,
-        loading: 'Deleting environment variable...',
+        {
-        success: 'Environment variable has been deleted successfully.',
+          loading: 'Deleting environment variable...',
-        error: 'An error occurred while deleting the environment variable.',
+          success: 'Environment variable has been deleted successfully.',
-      },
+          error: getServerError(
-      getToastStyleProps(),
+            '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', {
+    openDialog({
-      title: 'Edit Environment Variables',
+      title: 'Edit Environment Variable',
-      payload: { originalEnvironmentVariable: originalVariable },
+      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) => {
+            {availableEnvironmentVariables.map((environmentVariable, index) => (
-              const timestamp = formatDistanceToNowStrict(
+              <Fragment key={environmentVariable.id}>
-                parseISO(environmentVariable.updatedAt),
+                <ListItem.Root
-                { addSuffix: true, roundingMethod: 'floor' },
+                  className="grid grid-cols-2 gap-2 px-4 lg:grid-cols-3"
-              );
+                  secondaryAction={
-
+                    <Dropdown.Root>
-              return (
+                      <Dropdown.Trigger
-                <Fragment key={environmentVariable.id}>
+                        asChild
-                  <ListItem.Root
+                        hideChevron
-                    className="grid grid-cols-2 gap-2 px-4 lg:grid-cols-3"
+                        className="absolute right-4 top-1/2 -translate-y-1/2"
-                    secondaryAction={
+                      >
-                      <Dropdown.Root>
+                        <IconButton
-                        <Dropdown.Trigger
+                          variant="borderless"
-                          asChild
+                          color="secondary"
-                          hideChevron
+                          disabled={maintenanceActive}
-                          className="absolute right-4 top-1/2 -translate-y-1/2"
                         >
-                          <IconButton variant="borderless" color="secondary">
+                          <DotsVerticalIcon />
-                            <DotsVerticalIcon />
+                        </IconButton>
-                          </IconButton>
+                      </Dropdown.Trigger>
-                        </Dropdown.Trigger>
 
-                        <Dropdown.Content
+                      <Dropdown.Content
-                          menu
+                        menu
-                          PaperProps={{ className: 'w-32' }}
+                        PaperProps={{ className: 'w-32' }}
-                          anchorOrigin={{
+                        anchorOrigin={{
-                            vertical: 'bottom',
+                          vertical: 'bottom',
-                            horizontal: 'right',
+                          horizontal: 'right',
-                          }}
+                        }}
-                          transformOrigin={{
+                        transformOrigin={{
-                            vertical: 'top',
+                          vertical: 'top',
-                            horizontal: 'right',
+                          horizontal: 'right',
-                          }}
+                        }}
+                      >
+                        <Dropdown.Item
+                          onClick={() => handleOpenEditor(environmentVariable)}
                         >
-                          <Dropdown.Item
+                          <Text className="font-medium">Edit</Text>
-                            onClick={() =>
+                        </Dropdown.Item>
-                              handleOpenEditor(environmentVariable)
-                            }
-                          >
-                            <Text className="font-medium">Edit</Text>
-                          </Dropdown.Item>
 
-                          <Divider component="li" />
+                        <Divider component="li" />
 
-                          <Dropdown.Item
+                        <Dropdown.Item
-                            onClick={() =>
+                          onClick={() =>
-                              handleConfirmDelete(environmentVariable)
+                            handleConfirmDelete(environmentVariable)
-                            }
+                          }
-                          >
+                        >
-                            <Text className="font-medium" color="error">
+                          <Text className="font-medium" color="error">
-                              Delete
+                            Delete
-                            </Text>
+                          </Text>
-                          </Dropdown.Item>
+                        </Dropdown.Item>
-                        </Dropdown.Content>
+                      </Dropdown.Content>
-                      </Dropdown.Root>
+                    </Dropdown.Root>
-                    }
+                  }
-                  >
+                >
-                    <ListItem.Text className="truncate">
+                  <ListItem.Text className="truncate">
-                      {environmentVariable.name}
+                    {environmentVariable.name}
-                    </ListItem.Text>
+                  </ListItem.Text>
+                </ListItem.Root>
 
-                    <Text
+                <Divider
-                      variant="subtitle1"
+                  component="li"
-                      className="truncate lg:col-span-2"
+                  className={twMerge(
-                    >
+                    index === availableEnvironmentVariables.length - 1
-                      {timestamp === '0 seconds ago' ||
+                      ? '!mt-4'
-                      timestamp === 'in 0 seconds'
+                      : '!my-4',
-                        ? 'Now'
+                  )}
-                        : timestamp}
+                />
-                    </Text>
+              </Fragment>
-                  </ListItem.Root>
+            ))}
-
-                  <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';
@@ -20,7 +22,8 @@ import generateAppServiceUrl, {
 } from '@/utils/common/generateAppServiceUrl';
 import { LOCAL_HASURA_URL } 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({
+  const { data, loading, error } = useGetEnvironmentVariablesQuery({
-    variables: { id: currentApplication?.id },
+    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: {
+      component: (
-        disabled: true,
+        <EditJwtSecretForm disabled jwtSecret={stringifiedJwtSecrets} />
-        jwtSecret: data?.app?.hasuraGraphqlJwtSecret,
+      ),
-      },
     });
   }
 
   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: {
+      component: <EditJwtSecretForm jwtSecret={stringifiedJwtSecrets} />,
-        jwtSecret: data?.app?.hasuraGraphqlJwtSecret,
-      },
     });
   }
 
@@ -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={{
+          slotProps={{
-            disabled: !formState.isValid || !formState.isDirty,
+            submitButton: {
-            loading: formState.isSubmitting,
+              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={{
+          slotProps={{
-            disabled: !formState.isValid || !formState.isDirty,
+            submitButton: {
-            loading: formState.isSubmitting,
+              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"

dashboard/src/components/settings/permissions/BasePermissionVariableForm/BasePermissionVariableForm.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,18 +8,7 @@ import { useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';
 import * as Yup from 'yup';
 
-export interface BasePermissionVariableFormValues {
+export interface BasePermissionVariableFormProps extends DialogFormProps {
-  /**
-   * Permission variable key.
-   */
-  key: string;
-  /**
-   * Permission variable value.
-   */
-  value: string;
-}
-
-export interface BasePermissionVariableFormProps {
   /**
    * Function to be called when the form is submitted.
    */
@@ -36,14 +26,19 @@ export interface BasePermissionVariableFormProps {
 }
 
 export const basePermissionVariableValidationSchema = Yup.object({
-  key: Yup.string().required('This field is required.'),
+  key: Yup.string().label('Field Name').nullable().required(),
-  value: Yup.string().required('This field is required.'),
+  value: Yup.string().label('Path').nullable().required(),
 });
 
+export type BasePermissionVariableFormValues = Yup.InferType<
+  typeof basePermissionVariableValidationSchema
+>;
+
 export default function BasePermissionVariableForm({
   onSubmit,
   onCancel,
   submitButtonText = 'Save',
+  location,
 }: BasePermissionVariableFormProps) {
   const { onDirtyStateChange } = useDialog();
   const form = useFormContext<BasePermissionVariableFormValues>();
@@ -56,8 +51,8 @@ export default function BasePermissionVariableForm({
   const isDirty = Object.keys(dirtyFields).length > 0;
 
   useEffect(() => {
-    onDirtyStateChange(isDirty, 'dialog');
+    onDirtyStateChange(isDirty, location);
-  }, [isDirty, onDirtyStateChange]);
+  }, [isDirty, location, onDirtyStateChange]);
 
   return (
     <div className="grid grid-flow-row gap-2 px-6 pb-6">

dashboard/src/components/settings/permissions/CreatePermissionVariableForm/CreatePermissionVariableForm.tsx

@@ -7,19 +7,19 @@ import BasePermissionVariableForm, {
 } from '@/components/settings/permissions/BasePermissionVariableForm';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
-import getPermissionVariablesArray from '@/utils/settings/getPermissionVariablesArray';
+import getAllPermissionVariables from '@/utils/settings/getAllPermissionVariables';
-import getPermissionVariablesObject from '@/utils/settings/getPermissionVariablesObject';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import {
-  useGetAppCustomClaimsQuery,
+  GetRolesPermissionsDocument,
-  useUpdateAppMutation,
+  useGetRolesPermissionsQuery,
+  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 CreatePermissionVariableFormProps
-  extends Pick<BasePermissionVariableFormProps, 'onCancel'> {
+  extends Pick<BasePermissionVariableFormProps, 'onCancel' | 'location'> {
   /**
    * Function to be called when the form is submitted.
    */
@@ -32,11 +32,14 @@ export default function CreatePermissionVariableForm({
 }: CreatePermissionVariableFormProps) {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
 
-  const { data, error, loading } = useGetAppCustomClaimsQuery({
+  const { data, error, loading } = useGetRolesPermissionsQuery({
-    variables: { id: currentApplication?.id },
+    variables: { appId: currentApplication?.id },
     fetchPolicy: 'cache-only',
   });
 
+  const { customClaims: permissionVariables } =
+    data?.config?.auth?.session?.accessToken || {};
+
   const form = useForm<BasePermissionVariableFormValues>({
     defaultValues: {
       key: '',
@@ -46,8 +49,8 @@ export default function CreatePermissionVariableForm({
     resolver: yupResolver(basePermissionVariableValidationSchema),
   });
 
-  const [updateApp] = useUpdateAppMutation({
+  const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: ['getAppCustomClaims'],
+    refetchQueries: [GetRolesPermissionsDocument],
   });
 
   if (loading) {
@@ -61,9 +64,8 @@ export default function CreatePermissionVariableForm({
   }
 
   const { setError } = form;
-  const availablePermissionVariables = getPermissionVariablesArray(
+  const availablePermissionVariables =
-    data?.app?.authJwtCustomClaims,
+    getAllPermissionVariables(permissionVariables);
-  );
 
   async function handleSubmit({
     key,
@@ -79,26 +81,29 @@ export default function CreatePermissionVariableForm({
       return;
     }
 
-    const permissionVariablesObject = getPermissionVariablesObject(
+    const existingPermissionVariables =
-      availablePermissionVariables.filter(
+      permissionVariables?.map((permissionVariable) => ({
-        (permissionVariable) => !permissionVariable.isSystemClaim,
+        key: permissionVariable.key,
-      ),
+        value: permissionVariable.value,
-    );
+      })) || [];
 
-    const updateAppPromise = updateApp({
+    const updateConfigPromise = updateConfig({
       variables: {
-        id: currentApplication?.id,
+        appId: currentApplication?.id,
-        app: {
+        config: {
-          authJwtCustomClaims: {
+          auth: {
-            ...permissionVariablesObject,
+            session: {
-            [key]: value,
+              accessToken: {
+                customClaims: [...existingPermissionVariables, { key, value }],
+              },
+            },
           },
         },
       },
     });
 
     await toast.promise(
-      updateAppPromise,
+      updateConfigPromise,
       {
         loading: 'Creating permission variable...',
         success: 'Permission variable has been created successfully.',

dashboard/src/components/settings/permissions/EditPermissionVariableForm/EditPermissionVariableForm.tsx

@@ -6,25 +6,25 @@ import BasePermissionVariableForm, {
   basePermissionVariableValidationSchema,
 } from '@/components/settings/permissions/BasePermissionVariableForm';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import type { CustomClaim } from '@/types/application';
+import type { PermissionVariable } from '@/types/application';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
-import getPermissionVariables from '@/utils/settings/getPermissionVariablesArray';
+import getAllPermissionVariables from '@/utils/settings/getAllPermissionVariables';
-import getPermissionVariablesObject from '@/utils/settings/getPermissionVariablesObject';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import {
-  useGetAppCustomClaimsQuery,
+  GetRolesPermissionsDocument,
-  useUpdateAppMutation,
+  useGetRolesPermissionsQuery,
+  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 EditPermissionVariableFormProps
-  extends Pick<BasePermissionVariableFormProps, 'onCancel'> {
+  extends Pick<BasePermissionVariableFormProps, 'onCancel' | 'location'> {
   /**
    * The permission variable to be edited.
    */
-  originalVariable: CustomClaim;
+  originalVariable: PermissionVariable;
   /**
    * Function to be called when the form is submitted.
    */
@@ -38,11 +38,14 @@ export default function EditPermissionVariableForm({
 }: EditPermissionVariableFormProps) {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
 
-  const { data, error, loading } = useGetAppCustomClaimsQuery({
+  const { data, error, loading } = useGetRolesPermissionsQuery({
-    variables: { id: currentApplication?.id },
+    variables: { appId: currentApplication?.id },
     fetchPolicy: 'cache-only',
   });
 
+  const { customClaims: permissionVariables } =
+    data?.config?.auth?.session?.accessToken || {};
+
   const form = useForm<BasePermissionVariableFormValues>({
     defaultValues: {
       key: originalVariable.key || '',
@@ -52,8 +55,8 @@ export default function EditPermissionVariableForm({
     resolver: yupResolver(basePermissionVariableValidationSchema),
   });
 
-  const [updateApp] = useUpdateAppMutation({
+  const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: ['getAppCustomClaims'],
+    refetchQueries: [GetRolesPermissionsDocument],
   });
 
   if (loading) {
@@ -67,9 +70,8 @@ export default function EditPermissionVariableForm({
   }
 
   const { setError } = form;
-  const availablePermissionVariables = getPermissionVariables(
+  const availablePermissionVariables =
-    data?.app?.authJwtCustomClaims,
+    getAllPermissionVariables(permissionVariables);
-  );
 
   async function handleSubmit({
     key,
@@ -92,36 +94,43 @@ export default function EditPermissionVariableForm({
         (permissionVariable) => permissionVariable.key === originalVariable.key,
       );
 
-    const updatedPermissionVariables = availablePermissionVariables.map(
+    const updatedPermissionVariables = availablePermissionVariables
-      (permissionVariable, index) => {
+      .map((permissionVariable, index) => {
-        if (index === originalPermissionVariableIndex) {
+        if (permissionVariable.isSystemVariable) {
-          return { key, value };
+          return null;
         }
 
-        return permissionVariable;
+        if (index === originalPermissionVariableIndex) {
-      },
+          return {
-    );
+            key,
+            value,
+          };
+        }
 
-    const permissionVariablesObject = getPermissionVariablesObject(
+        return {
-      updatedPermissionVariables.filter(
+          key: permissionVariable.key,
-        (permissionVariable) => !permissionVariable.isSystemClaim,
+          value: permissionVariable.value,
-      ),
+        };
-    );
+      })
+      .filter(Boolean);
 
-    const updateAppPromise = updateApp({
+    const updateConfigPromise = updateConfig({
       variables: {
-        id: currentApplication?.id,
+        appId: currentApplication?.id,
-        app: {
+        config: {
-          authJwtCustomClaims: {
+          auth: {
-            ...permissionVariablesObject,
+            session: {
-            [key]: value,
+              accessToken: {
+                customClaims: updatedPermissionVariables,
+              },
+            },
           },
         },
       },
     });
 
     await toast.promise(
-      updateAppPromise,
+      updateConfigPromise,
       {
         loading: 'Updating permission variable...',
         success: 'Permission variable has been updated successfully.',

dashboard/src/components/settings/permissions/PermissionVariableSettings/PermissionVariableSettings.tsx

@@ -1,7 +1,10 @@
 import { useDialog } from '@/components/common/DialogProvider';
+import CreatePermissionVariableForm from '@/components/settings/permissions/CreatePermissionVariableForm';
+import EditPermissionVariableForm from '@/components/settings/permissions/EditPermissionVariableForm';
 import SettingsContainer from '@/components/settings/SettingsContainer';
+import { useUI } from '@/context/UIContext';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import type { CustomClaim } from '@/types/application';
+import type { PermissionVariable } from '@/types/application';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
@@ -15,35 +18,33 @@ import List from '@/ui/v2/List';
 import { ListItem } from '@/ui/v2/ListItem';
 import Text from '@/ui/v2/Text';
 import Tooltip from '@/ui/v2/Tooltip';
-import getPermissionVariablesArray from '@/utils/settings/getPermissionVariablesArray';
+import getAllPermissionVariables from '@/utils/settings/getAllPermissionVariables';
+import getServerError from '@/utils/settings/getServerError';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import {
-  useGetAppCustomClaimsQuery,
+  GetRolesPermissionsDocument,
-  useUpdateAppMutation,
+  useGetRolesPermissionsQuery,
+  useUpdateConfigMutation,
 } from '@/utils/__generated__/graphql';
 import { Fragment } from 'react';
 import toast from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';
 
-export interface PermissionVariableSettingsFormValues {
-  /**
-   * Permission variables.
-   */
-  authJwtCustomClaims: CustomClaim[];
-}
-
 export default function PermissionVariableSettings() {
+  const { maintenanceActive } = useUI();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
   const { openDialog, openAlertDialog } = useDialog();
 
-  const { data, loading, error } = useGetAppCustomClaimsQuery({
+  const { data, loading, error } = useGetRolesPermissionsQuery({
-    variables: {
+    variables: { appId: currentApplication?.id },
-      id: currentApplication?.id,
+    fetchPolicy: 'cache-only',
-    },
   });
 
-  const [updateApp] = useUpdateAppMutation({
+  const { customClaims: permissionVariables } =
-    refetchQueries: ['getAppCustomClaims'],
+    data?.config?.auth?.session?.accessToken || {};
+
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetRolesPermissionsDocument],
   });
 
   if (loading) {
@@ -56,40 +57,44 @@ export default function PermissionVariableSettings() {
     throw error;
   }
 
-  async function handleDeleteVariable({ key }: CustomClaim) {
+  async function handleDeleteVariable({ id }: PermissionVariable) {
-    const filteredCustomClaims = Object.keys(
+    const updateConfigPromise = updateConfig({
-      data?.app?.authJwtCustomClaims,
-    ).filter((customClaimKey) => customClaimKey !== key);
-
-    const updateAppPromise = updateApp({
       variables: {
-        id: currentApplication?.id,
+        appId: currentApplication?.id,
-        app: {
+        config: {
-          authJwtCustomClaims: filteredCustomClaims.reduce(
+          auth: {
-            (customClaims, currentKey) => ({
+            session: {
-              ...customClaims,
+              accessToken: {
-              [currentKey]: data?.app?.authJwtCustomClaims[currentKey],
+                customClaims: permissionVariables
-            }),
+                  ?.filter((permissionVariable) => permissionVariable.id !== id)
-            {},
+                  .map((permissionVariable) => ({
-          ),
+                    key: permissionVariable.key,
+                    value: permissionVariable.value,
+                  })),
+              },
+            },
+          },
         },
       },
     });
 
     await toast.promise(
-      updateAppPromise,
+      updateConfigPromise,
       {
         loading: 'Deleting permission variable...',
         success: 'Permission variable has been deleted successfully.',
-        error: 'An error occurred while trying to delete permission variable.',
+        error: getServerError(
+          'An error occurred while trying to delete permission variable.',
+        ),
       },
       getToastStyleProps(),
     );
   }
 
   function handleOpenCreator() {
-    openDialog('CREATE_PERMISSION_VARIABLE', {
+    openDialog({
       title: 'Create Permission Variable',
+      component: <CreatePermissionVariableForm />,
       props: {
         titleProps: { className: '!pb-0' },
         PaperProps: { className: 'max-w-sm' },
@@ -97,10 +102,12 @@ export default function PermissionVariableSettings() {
     });
   }
 
-  function handleOpenEditor(originalVariable: CustomClaim) {
+  function handleOpenEditor(originalVariable: PermissionVariable) {
-    openDialog('EDIT_PERMISSION_VARIABLE', {
+    openDialog({
       title: 'Edit Permission Variable',
-      payload: { originalVariable },
+      component: (
+        <EditPermissionVariableForm originalVariable={originalVariable} />
+      ),
       props: {
         titleProps: { className: '!pb-0' },
         PaperProps: { className: 'max-w-sm' },
@@ -108,7 +115,7 @@ export default function PermissionVariableSettings() {
     });
   }
 
-  function handleConfirmDelete(originalVariable: CustomClaim) {
+  function handleConfirmDelete(originalVariable: PermissionVariable) {
     openAlertDialog({
       title: 'Delete Permission Variable',
       payload: (
@@ -126,9 +133,8 @@ export default function PermissionVariableSettings() {
     });
   }
 
-  const availablePermissionVariables = getPermissionVariablesArray(
+  const availablePermissionVariables =
-    data?.app?.authJwtCustomClaims,
+    getAllPermissionVariables(permissionVariables);
-  );
 
   return (
     <SettingsContainer
@@ -136,7 +142,7 @@ export default function PermissionVariableSettings() {
       description="Permission variables are used to define permission rules in the GraphQL API."
       docsLink="https://docs.nhost.io/graphql/permissions"
       rootClassName="gap-0"
-      className="px-0 my-2"
+      className="my-2 px-0"
       slotProps={{ submitButton: { className: 'invisible' } }}
     >
       <Box className="grid grid-cols-2 border-b-1 px-4 py-3">
@@ -146,28 +152,33 @@ export default function PermissionVariableSettings() {
 
       <div className="grid grid-flow-row gap-2">
         <List>
-          {availablePermissionVariables.map((customClaim, index) => (
+          {availablePermissionVariables.map((permissionVariable, index) => (
-            <Fragment key={customClaim.key}>
+            <Fragment key={permissionVariable.id}>
               <ListItem.Root
-                className="px-4 grid grid-cols-2"
+                className="grid grid-cols-2 px-4"
                 secondaryAction={
                   <Dropdown.Root>
                     <Tooltip
                       title={
-                        customClaim.isSystemClaim
+                        permissionVariable.isSystemVariable
                           ? "You can't edit system permission variables"
                           : ''
                       }
                       placement="right"
-                      disableHoverListener={!customClaim.isSystemClaim}
+                      disableHoverListener={
-                      hasDisabledChildren={customClaim.isSystemClaim}
+                        !permissionVariable.isSystemVariable
+                      }
+                      hasDisabledChildren={permissionVariable.isSystemVariable}
                       className="absolute right-4 top-1/2 -translate-y-1/2"
                     >
                       <Dropdown.Trigger asChild hideChevron>
                         <IconButton
                           variant="borderless"
                           color="secondary"
-                          disabled={customClaim.isSystemClaim}
+                          disabled={
+                            permissionVariable.isSystemVariable ||
+                            maintenanceActive
+                          }
                         >
                           <DotsVerticalIcon />
                         </IconButton>
@@ -187,7 +198,7 @@ export default function PermissionVariableSettings() {
                       }}
                     >
                       <Dropdown.Item
-                        onClick={() => handleOpenEditor(customClaim)}
+                        onClick={() => handleOpenEditor(permissionVariable)}
                       >
                         <Text className="font-medium">Edit</Text>
                       </Dropdown.Item>
@@ -195,7 +206,7 @@ export default function PermissionVariableSettings() {
                       <Divider component="li" />
 
                       <Dropdown.Item
-                        onClick={() => handleConfirmDelete(customClaim)}
+                        onClick={() => handleConfirmDelete(permissionVariable)}
                       >
                         <Text
                           className="font-medium"
@@ -213,15 +224,17 @@ export default function PermissionVariableSettings() {
                 <ListItem.Text
                   primary={
                     <>
-                      X-Hasura-{customClaim.key}{' '}
+                      X-Hasura-{permissionVariable.key}{' '}
-                      {customClaim.isSystemClaim && (
+                      {permissionVariable.isSystemVariable && (
-                        <LockIcon className="w-4 h-4" />
+                        <LockIcon className="h-4 w-4" />
                       )}
                     </>
                   }
                 />
 
-                <Text className="font-medium">user.{customClaim.value}</Text>
+                <Text className="font-medium">
+                  user.{permissionVariable.value}
+                </Text>
               </ListItem.Root>
 
               <Divider
@@ -237,10 +250,11 @@ export default function PermissionVariableSettings() {
         </List>
 
         <Button
-          className="justify-self-start mx-4"
+          className="mx-4 justify-self-start"
           variant="borderless"
           startIcon={<PlusIcon />}
           onClick={handleOpenCreator}
+          disabled={maintenanceActive}
         >
           Create Permission Variable
         </Button>

dashboard/src/components/settings/permissions/PermissionVariableSettings/index.ts

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

dashboard/src/components/settings/roles/BaseRoleForm/BaseRoleForm.tsx

@@ -1,5 +1,6 @@
 import { useDialog } from '@/components/common/DialogProvider';
 import Form from '@/components/common/Form';
+import type { DialogFormProps } from '@/types/common';
 import { Alert } from '@/ui/Alert';
 import Button from '@/ui/v2/Button';
 import Input from '@/ui/v2/Input';
@@ -8,14 +9,7 @@ import { useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';
 import * as Yup from 'yup';
 
-export interface BaseRoleFormValues {
+export interface BaseRoleFormProps extends DialogFormProps {
-  /**
-   * The name of the role.
-   */
-  name: string;
-}
-
-export interface BaseRoleFormProps {
   /**
    * Function to be called when the form is submitted.
    */
@@ -36,10 +30,15 @@ export const baseRoleFormValidationSchema = Yup.object({
   name: Yup.string().required('This field is required.'),
 });
 
+export type BaseRoleFormValues = Yup.InferType<
+  typeof baseRoleFormValidationSchema
+>;
+
 export default function BaseRoleForm({
   onSubmit,
   onCancel,
   submitButtonText = 'Save',
+  location,
 }: BaseRoleFormProps) {
   const { onDirtyStateChange } = useDialog();
   const form = useFormContext<BaseRoleFormValues>();
@@ -52,8 +51,8 @@ export default function BaseRoleForm({
   const isDirty = Object.keys(dirtyFields).length > 0;
 
   useEffect(() => {
-    onDirtyStateChange(isDirty, 'dialog');
+    onDirtyStateChange(isDirty, location);
-  }, [isDirty, onDirtyStateChange]);
+  }, [isDirty, location, onDirtyStateChange]);
 
   return (
     <div className="grid grid-flow-row gap-3 px-6 pb-6">

dashboard/src/components/settings/roles/CreateRoleForm/CreateRoleForm.tsx

@@ -7,18 +7,20 @@ import BaseRoleForm, {
 } from '@/components/settings/roles/BaseRoleForm';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
+import getServerError from '@/utils/settings/getServerError';
 import getUserRoles from '@/utils/settings/getUserRoles';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import {
-  useGetRolesQuery,
+  GetRolesPermissionsDocument,
-  useUpdateAppMutation,
+  useGetRolesPermissionsQuery,
+  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 CreateRoleFormProps
-  extends Pick<BaseRoleFormProps, 'onCancel'> {
+  extends Pick<BaseRoleFormProps, 'onCancel' | 'location'> {
   /**
    * Function to be called when the form is submitted.
    */
@@ -30,10 +32,11 @@ export default function CreateRoleForm({
   ...props
 }: CreateRoleFormProps) {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const { data, loading, error } = useGetRolesQuery({
+  const { data, loading, error } = useGetRolesPermissionsQuery({
-    variables: { id: currentApplication?.id },
+    variables: { appId: currentApplication?.id },
     fetchPolicy: 'cache-only',
   });
+  const { allowed: allowedRoles } = data?.config?.auth?.user?.roles || {};
 
   const form = useForm<BaseRoleFormValues>({
     defaultValues: {},
@@ -41,7 +44,9 @@ export default function CreateRoleForm({
     resolver: yupResolver(baseRoleFormValidationSchema),
   });
 
-  const [updateApp] = useUpdateAppMutation({ refetchQueries: ['getRoles'] });
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetRolesPermissionsDocument],
+  });
 
   if (loading) {
     return <ActivityIndicator delay={1000} label="Loading roles..." />;
@@ -52,7 +57,7 @@ export default function CreateRoleForm({
   }
 
   const { setError } = form;
-  const availableRoles = getUserRoles(data?.app?.authUserDefaultAllowedRoles);
+  const availableRoles = getUserRoles(allowedRoles);
 
   async function handleSubmit({ name }: BaseRoleFormValues) {
     if (availableRoles.some((role) => role.name === name)) {
@@ -61,26 +66,40 @@ export default function CreateRoleForm({
       return;
     }
 
-    const updateAppPromise = updateApp({
+    const updatedAllowedRoles = allowedRoles ? [...allowedRoles, name] : [name];
+
+    const updateConfigPromise = updateConfig({
       variables: {
-        id: currentApplication?.id,
+        appId: currentApplication?.id,
-        app: {
+        config: {
-          authUserDefaultAllowedRoles: `${data?.app?.authUserDefaultAllowedRoles},${name}`,
+          auth: {
+            user: {
+              roles: {
+                allowed: updatedAllowedRoles,
+              },
+            },
+          },
         },
       },
     });
 
-    await toast.promise(
+    try {
-      updateAppPromise,
+      await toast.promise(
-      {
+        updateConfigPromise,
-        loading: 'Creating role...',
+        {
-        success: 'Role has been created successfully.',
+          loading: 'Creating role...',
-        error: 'An error occurred while trying to create the role.',
+          success: 'Role has been created successfully.',
-      },
+          error: getServerError(
-      getToastStyleProps(),
+            'An error occurred while trying to create the role.',
-    );
+          ),
+        },
+        getToastStyleProps(),
+      );
 
-    await onSubmit?.();
+      onSubmit?.();
+    } catch (updateConfigError) {
+      console.error(updateConfigError);
+    }
   }
 
   return (

dashboard/src/components/settings/roles/EditRoleForm/EditRoleForm.tsx

@@ -8,17 +8,20 @@ import BaseRoleForm, {
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import type { Role } from '@/types/application';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
+import getServerError from '@/utils/settings/getServerError';
 import getUserRoles from '@/utils/settings/getUserRoles';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import {
-  useGetRolesQuery,
+  GetRolesPermissionsDocument,
-  useUpdateAppMutation,
+  useGetRolesPermissionsQuery,
+  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 EditRoleFormProps extends Pick<BaseRoleFormProps, 'onCancel'> {
+export interface EditRoleFormProps
+  extends Pick<BaseRoleFormProps, 'onCancel' | 'location'> {
   /**
    * The role to be edited.
    */
@@ -35,11 +38,14 @@ export default function EditRoleForm({
   ...props
 }: EditRoleFormProps) {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const { data, loading, error } = useGetRolesQuery({
+  const { data, loading, error } = useGetRolesPermissionsQuery({
-    variables: { id: currentApplication?.id },
+    variables: { appId: currentApplication?.id },
     fetchPolicy: 'cache-only',
   });
 
+  const { allowed: allowedRoles, default: defaultRole } =
+    data?.config?.auth?.user?.roles || {};
+
   const form = useForm<BaseRoleFormValues>({
     defaultValues: {
       name: originalRole.name || '',
@@ -48,8 +54,8 @@ export default function EditRoleForm({
     resolver: yupResolver(baseRoleFormValidationSchema),
   });
 
-  const [updateApp] = useUpdateAppMutation({
+  const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: ['getRoles'],
+    refetchQueries: [GetRolesPermissionsDocument],
   });
 
   if (loading) {
@@ -61,7 +67,7 @@ export default function EditRoleForm({
   }
 
   const { setError } = form;
-  const availableRoles = getUserRoles(data?.app?.authUserDefaultAllowedRoles);
+  const availableRoles = getUserRoles(allowedRoles);
 
   async function handleSubmit({ name }: BaseRoleFormValues) {
     if (
@@ -74,47 +80,55 @@ export default function EditRoleForm({
       return;
     }
 
-    const defaultAllowedRolesList =
+    const defaultAllowedRolesList = allowedRoles || [];
-      data?.app?.authUserDefaultAllowedRoles.split(',') || [];
 
     const originalRoleIndex = defaultAllowedRolesList.findIndex(
       (role) => role.trim() === originalRole.name,
     );
 
-    const updatedDefaultAllowedRoles = defaultAllowedRolesList
+    const updatedDefaultAllowedRoles = defaultAllowedRolesList.map(
-      .map((role, index) => {
+      (role, index) => {
         if (index === originalRoleIndex) {
           return name;
         }
 
         return role;
-      })
+      },
-      .join(',');
+    );
 
-    const updateAppPromise = updateApp({
+    const updateConfigPromise = updateConfig({
       variables: {
-        id: currentApplication?.id,
+        appId: currentApplication?.id,
-        app: {
+        config: {
-          authUserDefaultRole:
+          auth: {
-            data?.app?.authUserDefaultRole === originalRole.name
+            user: {
-              ? name
+              roles: {
-              : data?.app?.authUserDefaultRole,
+                default: defaultRole === originalRole.name ? name : defaultRole,
-          authUserDefaultAllowedRoles: updatedDefaultAllowedRoles,
+                allowed: updatedDefaultAllowedRoles,
+              },
+            },
+          },
         },
       },
     });
 
-    await toast.promise(
+    try {
-      updateAppPromise,
+      await toast.promise(
-      {
+        updateConfigPromise,
-        loading: 'Updating role...',
+        {
-        success: 'Role has been updated successfully.',
+          loading: 'Updating role...',
-        error: 'An error occurred while trying to update the role.',
+          success: 'Role has been updated successfully.',
-      },
+          error: getServerError(
-      getToastStyleProps(),
+            'An error occurred while trying to update the role.',
-    );
+          ),
+        },
+        getToastStyleProps(),
+      );
 
-    await onSubmit?.();
+      onSubmit?.();
+    } catch (updateConfigError) {
+      console.error(updateConfigError);
+    }
   }
 
   return (