chore: update versions (#2824)

This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @nhost/apollo@7.1.5

### Patch Changes

-   @nhost/nhost-js@3.1.8

## @nhost/react-apollo@12.0.5

### Patch Changes

-   @nhost/apollo@7.1.5
-   @nhost/react@3.5.5

## @nhost/react-urql@9.0.5

### Patch Changes

-   @nhost/react@3.5.5

## @nhost/hasura-auth-js@2.5.5

### Patch Changes

- caa8bd7: fix: add error handling logic to transition to the signedOut
state when the token is invalid or expired

## @nhost/nextjs@2.1.19

### Patch Changes

-   @nhost/react@3.5.5

## @nhost/nhost-js@3.1.8

### Patch Changes

-   Updated dependencies [caa8bd7]
    -   @nhost/hasura-auth-js@2.5.5

## @nhost/react@3.5.5

### Patch Changes

-   @nhost/nhost-js@3.1.8

## @nhost/vue@2.6.5

### Patch Changes

-   @nhost/nhost-js@3.1.8

## @nhost/dashboard@1.26.0

### Minor Changes

-   3773ad7: chore: update pricing information
- b63250d: fix: not allow run service creation form resubmission while
creating a run service
-   a44a1d4: feat: add rate limits settings page

### Patch Changes

-   @nhost/react-apollo@12.0.5
-   @nhost/nextjs@2.1.19

## @nhost/docs@2.15.0

### Minor Changes

-   40c0d7b: │feat: added subdomain/region information
-   a18b545: feat: added postgres upgrade docs

## @nhost-examples/cli@0.3.10

### Patch Changes

-   @nhost/nhost-js@3.1.8

## @nhost-examples/codegen-react-apollo@0.4.10

### Patch Changes

-   @nhost/react@3.5.5
-   @nhost/react-apollo@12.0.5

## @nhost-examples/codegen-react-query@0.4.10

### Patch Changes

-   @nhost/react@3.5.5

## @nhost-examples/codegen-react-urql@0.3.10

### Patch Changes

-   @nhost/react@3.5.5
-   @nhost/react-urql@9.0.5

## @nhost-examples/multi-tenant-one-to-many@2.2.10

### Patch Changes

-   @nhost/nhost-js@3.1.8

## @nhost-examples/nextjs@0.3.10

### Patch Changes

-   @nhost/react@3.5.5
-   @nhost/react-apollo@12.0.5
-   @nhost/nextjs@2.1.19

## @nhost-examples/node-storage@0.2.10

### Patch Changes

-   @nhost/nhost-js@3.1.8

## @nhost-examples/nextjs-server-components@0.4.11

### Patch Changes

-   @nhost/nhost-js@3.1.8

## @nhost-examples/react-apollo@0.8.11

### Patch Changes

-   @nhost/react@3.5.5
-   @nhost/react-apollo@12.0.5

## @nhost-examples/react-gqty@1.2.10

### Patch Changes

-   @nhost/react@3.5.5

## @nhost-examples/react-native@0.0.4

### Patch Changes

-   @nhost/react@3.5.5
-   @nhost/react-apollo@12.0.5

## @nhost-examples/vue-apollo@0.6.10

### Patch Changes

-   @nhost/nhost-js@3.1.8
-   @nhost/apollo@7.1.5
-   @nhost/vue@2.6.5

## @nhost-examples/vue-quickstart@0.2.10

### Patch Changes

-   @nhost/apollo@7.1.5
-   @nhost/vue@2.6.5

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

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

@@ -12,7 +12,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: pnpm/action-setup@v2.2.4
+    - uses: pnpm/action-setup@v4
       with:
         version: 8.10.5
         run_install: false

.github/workflows/ci.yaml

@@ -22,6 +22,7 @@ env:
   NHOST_TEST_DASHBOARD_URL: ${{ vars.NHOST_TEST_DASHBOARD_URL }}
   NHOST_TEST_WORKSPACE_NAME: ${{ vars.NHOST_TEST_WORKSPACE_NAME }}
   NHOST_TEST_PROJECT_NAME: ${{ vars.NHOST_TEST_PROJECT_NAME }}
+  NHOST_PRO_TEST_PROJECT_NAME: ${{ vars.NHOST_PRO_TEST_PROJECT_NAME }}
   NHOST_TEST_USER_EMAIL: ${{ secrets.NHOST_TEST_USER_EMAIL }}
   NHOST_TEST_USER_PASSWORD: ${{ secrets.NHOST_TEST_USER_PASSWORD }}
   NHOST_TEST_PROJECT_ADMIN_SECRET: ${{ secrets.NHOST_TEST_PROJECT_ADMIN_SECRET }}

audit-ci.jsonc

@@ -2,5 +2,5 @@
   // $schema provides code completion hints to IDEs.
   "$schema": "https://github.com/IBM/audit-ci/raw/main/docs/schema.json",
   "moderate": true,
-  "allowlist": ["trim-newlines"]
+  "allowlist": ["vue-template-compiler", "micromatch"]
 }

dashboard/.env.example

@@ -17,5 +17,10 @@ NEXT_PUBLIC_GITHUB_APP_INSTALL_URL=<github_app_install_url>
 NEXT_PUBLIC_ANALYTICS_WRITE_KEY=<analytics_write_key>
 NEXT_PUBLIC_NHOST_BRAGI_WEBSOCKET=<nhost_bragi_websocket>
 
+NEXT_PUBLIC_ZENDESK_URL=
+NEXT_PUBLIC_ZENDESK_API_KEY=
+NEXT_PUBLIC_ZENDESK_USER_EMAIL=
+
+
 CODEGEN_GRAPHQL_URL=https://local.graphql.nhost.run/v1
 CODEGEN_HASURA_ADMIN_SECRET=nhost-admin-secret

dashboard/CHANGELOG.md

@@ -1,5 +1,136 @@
 # @nhost/dashboard
 
+## 1.26.0
+
+### Minor Changes
+
+- 3773ad7: chore: update pricing information
+- b63250d: fix: not allow run service creation form resubmission while creating a run service
+- a44a1d4: feat: add rate limits settings page
+
+### Patch Changes
+
+- @nhost/react-apollo@12.0.5
+- @nhost/nextjs@2.1.19
+
+## 1.25.0
+
+### Minor Changes
+
+- d1ceede: feat: add setting to migrate postgres major and/or minor versions
+- e5d3d1a: fix: allow manually typing column for custom check in database row permissions
+
+### Patch Changes
+
+- @nhost/react-apollo@12.0.4
+- @nhost/nextjs@2.1.18
+
+## 1.24.1
+
+### Patch Changes
+
+- 49f2e55: fix: use service subdomain in service form and service details dialog
+- 598b988: fix: use current project subdomain in ServiceDetailsDialog component
+
+## 1.24.0
+
+### Minor Changes
+
+- abb24af: chore: add redirect to support page when project is locked
+- 18a6455: feat: show contact us info and locked reason when project is locked
+
+### Patch Changes
+
+- e31eefa: fix: include ingresses field when updating run services
+
+## 1.23.0
+
+### Minor Changes
+
+- 33284d3: fix: don't show double scrollbar in configuration editor
+
+### Patch Changes
+
+- @nhost/react-apollo@12.0.3
+- @nhost/nextjs@2.1.17
+
+## 1.22.0
+
+### Minor Changes
+
+- 998c037: fix: align drop-down list in select component
+- 807b8c0: fix: show city name in region selection for project creation
+
+## 1.21.0
+
+### Minor Changes
+
+- a2efeed: fix: improve project health error handling, add unknown state and polling interval for health state
+
+## 1.20.0
+
+### Minor Changes
+
+- 8ea4210: fix: error toasts can be closed individually, instead of dismissing all toasts at once
+- 58919ba: chore: add blink animation when project health service is updating
+
+## 1.19.0
+
+### Minor Changes
+
+- b519862: fix: get configuration in configuration editor using local development environment
+
+## 1.18.0
+
+### Minor Changes
+
+- 502abad: feat: add services health checks indicators to the overview page
+- b3ff6ad: chore: update title text on service status modal
+- dbadf59: feat: add project configuration TOML editor to the settings page
+
+## 1.17.0
+
+### Minor Changes
+
+- 77fba27: fix: postgres version validation when activating ai in ai settings page
+- ac6d1b6: feat: use name instead of awsName
+
+## 1.16.3
+
+### Patch Changes
+
+- 87a37cf: fix: remove unnecessary isPlatform check from verify button disable logic on custom domains
+  - @nhost/react-apollo@12.0.2
+  - @nhost/nextjs@2.1.16
+
+## 1.16.2
+
+### Patch Changes
+
+- a9413af: fix: update `GetAllWorkspacesAndProjects` query polling to use exponential backoff
+  - @nhost/react-apollo@12.0.1
+  - @nhost/nextjs@2.1.15
+
+## 1.16.1
+
+### Patch Changes
+
+- @nhost/react-apollo@12.0.0
+- @nhost/nextjs@2.1.14
+
+## 1.16.0
+
+### Minor Changes
+
+- c6d5c5c: feat: add toggle switch to enable/disable public access in the database settings
+
+## 1.15.2
+
+### Patch Changes
+
+- @nhost/react-apollo@11.0.4
+- @nhost/nextjs@2.1.13
+
 ## 1.15.1
 
 ### Patch Changes

dashboard/e2e/account/pat/manage-pat.test.ts

@@ -17,7 +17,7 @@ test.afterAll(async () => {
 });
 
 test('should be able to create then delete a personal access token', async () => {
-  await page.waitForLoadState('networkidle');
+  await page.waitForTimeout(1000);
   await page.getByRole('banner').getByRole('button').last().click();
   await page.getByRole('link', { name: /account settings/i }).click();
   await page

dashboard/e2e/ai/assistants.test.ts

@@ -0,0 +1,60 @@
+import {
+  PRO_TEST_PROJECT_NAME,
+  PRO_TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { openProject } from '@/e2e/utils';
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.beforeEach(async () => {
+  await page.goto('/');
+
+  await openProject({
+    page,
+    projectName: PRO_TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: PRO_TEST_PROJECT_SLUG,
+  });
+
+  await page
+    .getByRole('navigation', { name: /main navigation/i })
+    .getByRole('link', { name: /ai/i })
+    .click();
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('should create and delete an Assistant', async () => {
+  await page.getByRole('link', { name: 'Assistants' }).click();
+
+  await expect(page.getByText(/no assistants are configured/i)).toBeVisible();
+
+  await page.getByRole('button', { name: 'Create a new assistant' }).click();
+  await page.getByLabel('Name').fill('test');
+  await page.getByLabel('Description').fill('test');
+  await page.getByLabel('Instructions').fill('test');
+  await page.getByLabel('Model').fill('gpt-3.5-turbo-1106');
+
+  await page.getByRole('button', { name: 'Create' }).click();
+
+  await expect(page.getByRole('heading', { name: /test/i })).toBeVisible();
+
+  await page.getByLabel(/more options/i).click();
+  await page.getByRole('menuitem', { name: /delete test/i }).click();
+
+  await page.getByLabel('Confirm Delete Assistant').check();
+  await page.getByRole('button', { name: 'Delete Assistant' }).click();
+
+  await expect(
+    page.getByRole('heading', { name: /no assistants are configured/i }),
+  ).toBeVisible();
+});

dashboard/e2e/ai/auto-embeddings.test.ts

@@ -0,0 +1,55 @@
+import {
+  PRO_TEST_PROJECT_NAME,
+  PRO_TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { openProject } from '@/e2e/utils';
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.beforeEach(async () => {
+  await page.goto('/');
+
+  await openProject({
+    page,
+    projectName: PRO_TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: PRO_TEST_PROJECT_SLUG,
+  });
+
+  await page
+    .getByRole('navigation', { name: /main navigation/i })
+    .getByRole('link', { name: /ai/i })
+    .click();
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('should create and delete an Auto-Embeddings', async () => {
+  await page.getByRole('button', { name: 'Add a new Auto-Embeddings' }).click();
+
+  await page.getByLabel('Name').fill('test');
+  await page.getByLabel('Schema').fill('auth');
+  await page.getByLabel('Table').fill('users');
+  await page.getByLabel('Column').fill('email');
+
+  await page.getByRole('button', { name: 'Create' }).click();
+  await expect(page.getByRole('heading', { name: /test/i })).toBeVisible();
+
+  await page.getByLabel(/more options/i).click();
+  await page.getByRole('menuitem', { name: /delete test/i }).click();
+
+  await page.getByLabel('Confirm Delete Auto-').check();
+  await page.getByRole('button', { name: 'Delete Auto-Embeddings' }).click();
+  await expect(
+    page.getByRole('heading', { name: /No Auto-Embeddings are configured/i }),
+  ).toBeVisible();
+});

dashboard/e2e/env.ts

@@ -23,6 +23,11 @@ export const TEST_WORKSPACE_SLUG = slugify(TEST_WORKSPACE_NAME, {
  */
 export const TEST_PROJECT_NAME = process.env.NHOST_TEST_PROJECT_NAME;
 
+/**
+ * Name of the pro test project to test against.
+ */
+export const PRO_TEST_PROJECT_NAME = process.env.NHOST_PRO_TEST_PROJECT_NAME;
+
 /**
  * Slugified name of the project to test against.
  */
@@ -31,6 +36,14 @@ export const TEST_PROJECT_SLUG = slugify(TEST_PROJECT_NAME, {
   strict: true,
 });
 
+/**
+ * Slugified name of the pro project to test against.
+ */
+export const PRO_TEST_PROJECT_SLUG = slugify(PRO_TEST_PROJECT_NAME, {
+  lower: true,
+  strict: true,
+});
+
 /**
  * Hasura admin secret of the test project to use.
  */

dashboard/e2e/run/run.test.ts

@@ -0,0 +1,95 @@
+import {
+  PRO_TEST_PROJECT_NAME,
+  PRO_TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { openProject } from '@/e2e/utils';
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.beforeEach(async () => {
+  await page.goto('/');
+
+  await openProject({
+    page,
+    projectName: PRO_TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: PRO_TEST_PROJECT_SLUG,
+  });
+
+  await page
+    .getByRole('navigation', { name: /main navigation/i })
+    .getByRole('link', { name: /run/i })
+    .click();
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('should create and delete a run service', async () => {
+  await page.getByRole('button', { name: 'Add service' }).first().click();
+  await expect(page.getByText(/create a new service/i)).toBeVisible();
+  await page.getByPlaceholder(/service name/i).click();
+  await page.getByPlaceholder(/service name/i).fill('test');
+
+  const sliderRail = page.locator(
+    '.space-y-4 > .MuiSlider-root > .MuiSlider-rail',
+  );
+
+  // Get the bounding box of the slider rail to determine where to click
+  const box = await sliderRail.boundingBox();
+
+  if (box) {
+    // Calculate the position to click (start of the rail)
+    const x = box.x + 1; // A little offset to ensure click inside the rail
+    const y = box.y + box.height / 2; // Middle of the rail height-wise
+
+    // Perform the click
+    await page.mouse.click(x, y);
+  }
+
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await expect(
+    page.getByRole('heading', { name: /confirm resources/i }),
+  ).toBeVisible();
+
+  await page.waitForTimeout(1000);
+
+  await page.getByRole('button', { name: /confirm/i }).click();
+
+  await expect(page.getByRole('dialog')).toBeVisible();
+
+  await expect(
+    page.getByRole('heading', { name: /service details/i }),
+  ).toBeVisible();
+
+  await page.getByRole('button', { name: /ok/i }).click();
+
+  await expect(page.getByRole('heading', { name: /test/i })).toBeVisible();
+  await page.getByLabel(/more options/i).click();
+  await page.getByRole('menuitem', { name: /delete service/i }).click();
+
+  await page.getByLabel(/confirm delete project #/i).check();
+  await page
+    .getByText(/delete service/i)
+    .nth(2)
+    .click();
+
+  await page.getByLabel('Close').click();
+
+  await expect(
+    page
+      .getByRole('main')
+      .locator('div')
+      .filter({ hasText: 'No custom services are' })
+      .nth(2),
+  ).toBeVisible();
+});

dashboard/global-teardown.ts

@@ -43,8 +43,8 @@ async function globalTeardown() {
   await adminSecretInput.press('Enter');
 
   // note: getByRole doesn't work here
-  await hasuraPage.locator('a', { hasText: /data/i }).click();
-  await hasuraPage.getByRole('link', { name: /sql/i }).click();
+  await hasuraPage.locator('a', { hasText: /data/i }).nth(0).click();
+  await hasuraPage.locator('[data-test="sql-link"]').click();
 
   // Set the value of the Ace code editor using JavaScript evaluation in the browser context
   await hasuraPage.evaluate(() => {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "1.15.1",
+  "version": "1.26.0",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -21,17 +21,20 @@
   "dependencies": {
     "@apollo/client": "^3.9.9",
     "@codemirror/lang-sql": "^6.6.2",
+    "@codemirror/language": "^6.10.1",
+    "@codemirror/legacy-modes": "^6.4.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.5",
     "@fontsource/inter": "^5.0.17",
     "@fontsource/roboto-mono": "^5.0.17",
-    "@graphiql/react": "^0.20.3",
+    "@graphiql/react": "^0.22.3",
     "@graphiql/toolkit": "^0.9.1",
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^1.0.6",
     "@hookform/resolvers": "^3.3.4",
+    "@iarna/toml": "^2.2.5",
     "@mui/base": "5.0.0-beta.31",
     "@mui/material": "^5.15.14",
     "@mui/system": "^5.15.14",
@@ -45,6 +48,8 @@
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-table": "^8.15.3",
     "@tanstack/react-virtual": "^3.2.0",
+    "@uidotdev/usehooks": "^2.4.1",
+    "@uiw/codemirror-theme-bbedit": "^4.22.2",
     "@uiw/codemirror-theme-github": "^4.21.25",
     "@uiw/react-codemirror": "^4.21.25",
     "analytics-node": "^6.2.0",
@@ -53,7 +58,7 @@
     "date-fns": "^2.30.0",
     "framer-motion": "^10.18.0",
     "generate-password": "^1.7.1",
-    "graphiql": "^3.1.1",
+    "graphiql": "^3.3.1",
     "graphql": "16.8.1",
     "graphql-request": "^6.1.0",
     "graphql-tag": "^2.12.6",

dashboard/public/assets/LockedApp.svg

@@ -0,0 +1,12 @@
+<svg width="72" height="73" viewBox="0 0 72 73" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_10501_253)">
+<path d="M0 8.5C0 4.08172 3.58172 0.5 8 0.5H64C68.4183 0.5 72 4.08172 72 8.5V64.5C72 68.9183 68.4183 72.5 64 72.5H8C3.58172 72.5 0 68.9183 0 64.5V8.5Z" fill="#9C73DF" fill-opacity="0.2"/>
+<path d="M43.1203 35.5H29.7687C28.7153 35.5 27.8613 36.3954 27.8613 37.5V44.5C27.8613 45.6046 28.7153 46.5 29.7687 46.5H43.1203C44.1737 46.5 45.0276 45.6046 45.0276 44.5V37.5C45.0276 36.3954 44.1737 35.5 43.1203 35.5Z" stroke="#9C73DF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.6758 35.5V31.5C31.6758 30.1739 32.1782 28.9021 33.0724 27.9645C33.9667 27.0268 35.1795 26.5 36.4442 26.5C37.7089 26.5 38.9217 27.0268 39.816 27.9645C40.7102 28.9021 41.2126 30.1739 41.2126 31.5V35.5" stroke="#9C73DF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_10501_253">
+<rect width="72" height="72" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>

dashboard/src/components/form/CountrySelector/CountrySelector.tsx

@@ -29,7 +29,7 @@ export default function CountrySelector({
         listbox: { className: 'min-w-0 w-full' },
         popper: {
           disablePortal: false,
-          className: 'z-[10000] w-[270px] w-full',
+          className: 'z-[10000] w-[270px]',
         },
       }}
     >

dashboard/src/components/layout/Header/Header.tsx

@@ -1,4 +1,3 @@
-import { ContactUs } from '@/components/common/ContactUs';
 import { useDialog } from '@/components/common/DialogProvider';
 import { NavLink } from '@/components/common/NavLink';
 import { AccountMenu } from '@/components/layout/AccountMenu';
@@ -9,11 +8,9 @@ import { Logo } from '@/components/presentational/Logo';
 import { Box } from '@/components/ui/v2/Box';
 import { Button } from '@/components/ui/v2/Button';
 import { Chip } from '@/components/ui/v2/Chip';
-import { Dropdown } from '@/components/ui/v2/Dropdown';
 import { GraphiteIcon } from '@/components/ui/v2/icons/GraphiteIcon';
 import { DevAssistant } from '@/features/ai/DevAssistant';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
-import { useIsCurrentUserOwner } from '@/features/projects/common/hooks/useIsCurrentUserOwner';
 import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
 import { ApplicationStatus } from '@/types/application';
 import { getToastStyleProps } from '@/utils/constants/settings';
@@ -38,14 +35,15 @@ export default function Header({ className, ...props }: HeaderProps) {
   const { currentProject, refetch: refetchProject } =
     useCurrentWorkspaceAndProject();
 
-  const isOwner = useIsCurrentUserOwner();
-
   const isProjectUpdating =
     currentProject?.appStates[0]?.stateId === ApplicationStatus.Updating;
 
+  const isProjectMigratingDatabase =
+    currentProject?.appStates[0]?.stateId === ApplicationStatus.Migrating;
+
   // Poll for project updates
   useEffect(() => {
-    if (!isProjectUpdating) {
+    if (!isProjectUpdating && !isProjectMigratingDatabase) {
       return () => {};
     }
 
@@ -56,7 +54,7 @@ export default function Header({ className, ...props }: HeaderProps) {
     return () => {
       clearInterval(interval);
     };
-  }, [isProjectUpdating, refetchProject]);
+  }, [isProjectUpdating, isProjectMigratingDatabase, refetchProject]);
 
   const openDevAssistant = () => {
     // The dev assistant can be only answer questions related to a particular project
@@ -97,6 +95,13 @@ export default function Header({ className, ...props }: HeaderProps) {
         {isProjectUpdating && (
           <Chip size="small" label="Updating" color="warning" />
         )}
+        {isProjectMigratingDatabase && (
+          <Chip
+            size="small"
+            label="Upgrading Postgres version"
+            color="warning"
+          />
+        )}
       </div>
 
       <div className="hidden grid-flow-col items-center gap-2 sm:grid">
@@ -105,25 +110,19 @@ export default function Header({ className, ...props }: HeaderProps) {
         </Button>
 
         {isPlatform && (
-          <Dropdown.Root>
-            <Dropdown.Trigger
-              hideChevron
-              className="rounded-md px-2.5 py-1.5 text-sm motion-safe:transition-colors"
-            >
-              Contact us
-            </Dropdown.Trigger>
-
-            <Dropdown.Content
-              transformOrigin={{ vertical: 'top', horizontal: 'right' }}
-              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-            >
-              <ContactUs
-                className="max-w-md"
-                isTeam={currentProject?.plan?.name === 'Team'}
-                isOwner={isOwner}
-              />
-            </Dropdown.Content>
-          </Dropdown.Root>
+          <NavLink
+            underline="none"
+            href="/support"
+            className="mr-2 rounded-md px-2.5 py-1.5 text-sm motion-safe:transition-colors"
+            sx={{
+              color: 'text.primary',
+              '&:hover': { backgroundColor: 'grey.200' },
+            }}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Support
+          </NavLink>
         )}
 
         <NavLink

dashboard/src/components/layout/SettingsContainer/SettingsContainer.tsx

@@ -63,6 +63,10 @@ export interface SettingsContainerProps
    * @default false
    */
   showSwitch?: boolean;
+  /**
+   * Custom element to be rendered at the top-right corner of the section.
+   */
+  topRightElement?: ReactNode;
   /**
    * Custom class names passed to the root element.
    */
@@ -108,6 +112,7 @@ export default function SettingsContainer({
   showSwitch = false,
   rootClassName,
   docsTitle,
+  topRightElement,
   slotProps: { root, switch: switchSlot, submitButton, footer } = {},
 }: SettingsContainerProps) {
   return (
@@ -137,6 +142,7 @@ export default function SettingsContainer({
             {description && <Text color="secondary">{description}</Text>}
           </div>
         </div>
+        {topRightElement}
         {!switchId && showSwitch && (
           <Switch
             checked={enabled}

dashboard/src/components/layout/SettingsLayout/SettingsLayout.tsx

@@ -45,48 +45,53 @@ export default function SettingsLayout({
 
       <Box
         sx={{ backgroundColor: 'background.default' }}
-        className="flex w-full flex-auto flex-col overflow-scroll overflow-x-hidden"
+        className="flex w-full flex-auto flex-col overflow-y-auto overflow-x-hidden"
       >
-        <RetryableErrorBoundary>
-          <div className="flex flex-col space-y-2">
-            {hasGitRepo && (
-              <Alert
-                severity="warning"
-                className="grid grid-flow-row place-content-center gap-2"
-              >
-                <Text color="warning" className="text-sm ">
-                  As you have a connected repository, make sure to synchronize
-                  your changes with{' '}
-                  <code
-                    className={twMerge(
-                      'rounded-md px-2 py-px',
-                      theme.palette.mode === 'dark'
-                        ? 'bg-brown text-copper'
-                        : 'bg-slate-200 text-slate-700',
-                    )}
-                  >
-                    nhost config pull
-                  </code>{' '}
-                  or they may be reverted with the next push.
-                  <br />
-                  If there are multiple projects linked to the same repository
-                  and you only want these changes to apply to a subset of them,
-                  please check out{' '}
-                  <a
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="underline"
-                    href="https://docs.nhost.io/cli/overlays"
-                  >
-                    docs.nhost.io/cli/overlays
-                  </a>{' '}
-                  for guidance.
-                </Text>
-              </Alert>
-            )}
-          </div>
-          {children}
-        </RetryableErrorBoundary>
+        <Box
+          sx={{ backgroundColor: 'background.default' }}
+          className="flex h-full flex-col"
+        >
+          <RetryableErrorBoundary>
+            <div className="flex flex-col space-y-2">
+              {hasGitRepo && (
+                <Alert
+                  severity="warning"
+                  className="grid grid-flow-row place-content-center gap-2"
+                >
+                  <Text color="warning" className="text-sm ">
+                    As you have a connected repository, make sure to synchronize
+                    your changes with{' '}
+                    <code
+                      className={twMerge(
+                        'rounded-md px-2 py-px',
+                        theme.palette.mode === 'dark'
+                          ? 'bg-brown text-copper'
+                          : 'bg-slate-200 text-slate-700',
+                      )}
+                    >
+                      nhost config pull
+                    </code>{' '}
+                    or they may be reverted with the next push.
+                    <br />
+                    If there are multiple projects linked to the same repository
+                    and you only want these changes to apply to a subset of
+                    them, please check out{' '}
+                    <a
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="underline"
+                      href="https://docs.nhost.io/cli/overlays"
+                    >
+                      docs.nhost.io/cli/overlays
+                    </a>{' '}
+                    for guidance.
+                  </Text>
+                </Alert>
+              )}
+            </div>
+            {children}
+          </RetryableErrorBoundary>
+        </Box>
       </Box>
     </ProjectLayout>
   );

dashboard/src/components/layout/SettingsSidebar/SettingsSidebar.tsx

@@ -3,6 +3,7 @@ import { Backdrop } from '@/components/ui/v2/Backdrop';
 import type { BoxProps } from '@/components/ui/v2/Box';
 import { Box } from '@/components/ui/v2/Box';
 import { IconButton } from '@/components/ui/v2/IconButton';
+import { SlidersIcon } from '@/components/ui/v2/icons/SlidersIcon';
 import { List } from '@/components/ui/v2/List';
 import type { ListItemButtonProps } from '@/components/ui/v2/ListItem';
 import { ListItem } from '@/components/ui/v2/ListItem';
@@ -27,12 +28,17 @@ interface SettingsNavLinkProps extends ListItemButtonProps {
    * @default true
    */
   exact?: boolean;
+  /**
+   * Class name passed to the text element.
+   */
+  textClassName?: string;
 }
 
 function SettingsNavLink({
   exact = true,
   href,
   children,
+  textClassName,
   ...props
 }: SettingsNavLinkProps) {
   const router = useRouter();
@@ -52,7 +58,7 @@ function SettingsNavLink({
         selected={active}
         {...props}
       >
-        <ListItem.Text>{children}</ListItem.Text>
+        <ListItem.Text className={textClassName}>{children}</ListItem.Text>
       </ListItem.Button>
     </ListItem.Root>
   );
@@ -114,13 +120,13 @@ export default function SettingsSidebar({
       <Box
         component="aside"
         className={twMerge(
-          'absolute top-0 z-[35] h-full w-full overflow-auto border-r-1 px-2 pb-17 pt-2 motion-safe:transition-transform md:relative md:z-0 md:h-full md:py-2.5 md:transition-none',
+          'absolute top-0 z-[35] flex h-full w-full flex-col justify-between overflow-auto border-r-1 pb-17 pt-2 motion-safe:transition-transform md:relative md:z-0 md:h-full md:pb-0 md:pt-2.5 md:transition-none',
           expanded ? 'translate-x-0' : '-translate-x-full md:translate-x-0',
           className,
         )}
         {...props}
       >
-        <nav aria-label="Settings navigation">
+        <nav aria-label="Settings navigation" className="px-2">
           <List className="grid gap-2">
             <SettingsNavLink
               href="/general"
@@ -215,11 +221,32 @@ export default function SettingsSidebar({
             >
               Custom Domains
             </SettingsNavLink>
+            <SettingsNavLink
+              href="/rate-limiting"
+              exact={false}
+              onClick={handleSelect}
+            >
+              Rate Limiting
+            </SettingsNavLink>
             <SettingsNavLink href="/ai" exact={false} onClick={handleSelect}>
               AI
             </SettingsNavLink>
           </List>
         </nav>
+        <Box className="border-t">
+          <SettingsNavLink
+            href="/editor"
+            exact={false}
+            onClick={handleSelect}
+            className="flex w-full border group-focus-within:pr-9 group-hover:pr-9 group-active:pr-9"
+            textClassName="flex w-full justify-center"
+          >
+            <div className="flex w-full flex-row items-center justify-center space-x-4 py-2.5">
+              <SlidersIcon />
+              <span className="flex">Configuration Editor</span>
+            </div>
+          </SettingsNavLink>
+        </Box>
       </Box>
 
       <IconButton

dashboard/src/components/presentational/CodeBlock/CodeBlock.tsx

@@ -0,0 +1,132 @@
+import { clsx } from 'clsx';
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ForwardedRef,
+  type ReactElement,
+} from 'react';
+
+import { Box } from '@/components/ui/v2/Box';
+import { CopyToClipboardButton as CopyToClipboardButtonOriginal } from './CopyToClipboardButton';
+import { getNodeText } from './getNodeText';
+
+export interface CodeBlockPropsBase {
+  filename?: string;
+  /**
+   *  Color of the filename text and the border underneath it when content is being shown.
+   */
+  filenameColor?: string;
+  /**
+   * Text of the toast that appears when the code is copied to the clipboard.
+   */
+  copyToClipboardToastTitle?: string;
+}
+
+export type CodeBlockProps = CodeBlockPropsBase &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof CodeBlockPropsBase>;
+
+/**
+ * Different from CodeGroup because we cannot use Headless UI's Tab component outside a Tab.Group
+ * Styling should look the same though.
+ */
+function CodeTabBar({
+  filename,
+  filenameColor,
+  children,
+}: {
+  filename: string;
+  filenameColor?: string;
+  children?: ReactElement;
+}) {
+  return (
+    <div className="flex text-xs leading-6 text-slate-400">
+      <div
+        className="flex flex-none items-center border-b border-t border-t-transparent px-4 py-1"
+        style={{ color: filenameColor, borderBottomColor: filenameColor }}
+      >
+        {filename}
+      </div>
+      <div className="bg-codeblock-tabs flex flex-auto items-center rounded-t border border-slate-500/30">
+        {children && (
+          <div className="flex flex-auto items-center justify-end space-x-4 px-4">
+            {children}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface CopyToClipboardButtonProps
+  extends Partial<
+    ComponentPropsWithoutRef<typeof CopyToClipboardButtonOriginal>
+  > {
+  filenameColor?: string;
+  tooltipColor?: string;
+  toastTitle?: string;
+}
+
+function CopyToClipboardButton({
+  tooltipColor,
+  filenameColor,
+  textToCopy,
+  toastTitle,
+  ...props
+}: CopyToClipboardButtonProps) {
+  return (
+    <CopyToClipboardButtonOriginal
+      textToCopy={textToCopy}
+      title={toastTitle}
+      {...props}
+    />
+  );
+}
+
+export const CodeBlock = forwardRef(
+  (
+    {
+      filename,
+      filenameColor,
+      children,
+      className,
+      copyToClipboardToastTitle,
+      ...props
+    }: CodeBlockProps,
+    ref: ForwardedRef<HTMLDivElement>,
+  ) => (
+    <Box
+      sx={{
+        backgroundColor: (theme) =>
+          theme.palette.mode === 'dark' ? 'grey.200' : 'grey.200',
+      }}
+      className={clsx(
+        'not-prose relative mt-5 px-2',
+        filename && 'pt-2',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    >
+      {filename ? (
+        <CodeTabBar filename={filename} filenameColor={filenameColor}>
+          <CopyToClipboardButton
+            filenameColor={filenameColor}
+            textToCopy={getNodeText(children)}
+            toastTitle={copyToClipboardToastTitle}
+            className="relative"
+          />
+        </CodeTabBar>
+      ) : (
+        <CopyToClipboardButton
+          filenameColor={filenameColor}
+          textToCopy={getNodeText(children)}
+          toastTitle={copyToClipboardToastTitle}
+          className="absolute right-3 top-0"
+        />
+      )}
+      <pre className="overflow-x-auto">
+        <code className="font-mono">{children}</code>
+      </pre>
+    </Box>
+  ),
+);

dashboard/src/components/presentational/CodeBlock/CopyToClipboardButton.tsx

@@ -0,0 +1,55 @@
+import { clsx } from 'clsx';
+import { useEffect, useState } from 'react';
+
+import {
+  IconButton,
+  type IconButtonProps,
+} from '@/components/ui/v2/IconButton';
+import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
+import { copy } from '@/utils/copy';
+
+export function CopyToClipboardButton({
+  textToCopy,
+  className,
+  title,
+  ...props
+}: {
+  textToCopy: string;
+  title: string;
+} & IconButtonProps) {
+  const [disabled, setDisabled] = useState(true);
+
+  useEffect(() => {
+    // Hide copy button if the browser does not support it
+    if (typeof window !== 'undefined' && !navigator?.clipboard) {
+      console.error(
+        "The browser's Clipboard API is unavailable. The Clipboard API is only available on HTTPS.",
+      );
+      setDisabled(true);
+    } else {
+      setDisabled(false);
+    }
+  }, []);
+
+  // Hide copy button if you would copy an empty string
+  if (!textToCopy || disabled) {
+    return null;
+  }
+
+  return (
+    <IconButton
+      variant="borderless"
+      color="secondary"
+      className={clsx('group', className)}
+      onClick={(event) => {
+        event.stopPropagation();
+
+        copy(textToCopy, title);
+      }}
+      aria-label={textToCopy}
+      {...props}
+    >
+      <CopyIcon className="top-5 h-4 w-4" />
+    </IconButton>
+  );
+}

dashboard/src/components/presentational/CodeBlock/getNodeText.ts

@@ -0,0 +1,17 @@
+// Gets the text from a component as if you selected it with a mouse and copied it.
+export const getNodeText = (node: any): string => {
+  if (['string', 'number'].includes(typeof node)) {
+    // Convert number into string
+    return node.toString();
+  }
+
+  if (node instanceof Array) {
+    return node.map(getNodeText).join('');
+  }
+
+  if (typeof node === 'object' && node?.props?.children) {
+    return getNodeText(node.props.children);
+  }
+
+  return '';
+};

dashboard/src/components/presentational/CodeBlock/index.ts

@@ -0,0 +1,8 @@
+import {
+  CodeBlock,
+  type CodeBlockProps,
+  type CodeBlockPropsBase,
+} from './CodeBlock';
+
+export type { CodeBlockPropsBase, CodeBlockProps };
+export { CodeBlock };

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

@@ -0,0 +1,28 @@
+import { styled } from '@mui/material';
+import type { AccordionProps as MaterialAccordionProps } from '@mui/material/Accordion';
+
+import MaterialAccordion, { accordionClasses } from '@mui/material/Accordion';
+
+export interface AccordionProps extends MaterialAccordionProps {}
+
+const Accordion = styled(MaterialAccordion)<AccordionProps>(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: theme.typography.pxToRem(12),
+  lineHeight: theme.typography.pxToRem(16),
+  borderBottom: `transparent solid 0px`,
+  boxShadow: `none`,
+  [`&.${accordionClasses.disabled}`]: {
+    backgroundColor: 'transparent',
+  },
+  [`&.${accordionClasses.root}`]: {
+    overflowX: 'hidden',
+  },
+  [`&.${accordionClasses.expanded}`]: {
+    marginTop: 0,
+    marginBottom: 0,
+  },
+}));
+
+Accordion.displayName = 'NhostAccordion';
+
+export default Accordion;

dashboard/src/components/ui/v2/Accordion/AccordionActions.tsx

@@ -0,0 +1,18 @@
+import { styled } from '@mui/material';
+import type { AccordionActionsProps as MaterialAccordionActionsProps } from '@mui/material/AccordionActions';
+
+import MaterialAccordionActions from '@mui/material/AccordionActions';
+
+export interface AccordionActionsProps extends MaterialAccordionActionsProps {}
+
+const AccordionActions = styled(
+  MaterialAccordionActions,
+)<AccordionActionsProps>(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: theme.typography.pxToRem(12),
+  lineHeight: theme.typography.pxToRem(16),
+}));
+
+AccordionActions.displayName = 'NhostAccordionActions';
+
+export default AccordionActions;

dashboard/src/components/ui/v2/Accordion/AccordionDetails.tsx

@@ -0,0 +1,21 @@
+import { styled } from '@mui/material';
+import type { AccordionDetailsProps as MaterialAccordionDetailsProps } from '@mui/material/AccordionDetails';
+
+import MaterialAccordionDetails from '@mui/material/AccordionDetails';
+
+export interface AccordionDetailsProps extends MaterialAccordionDetailsProps {}
+
+const AccordionDetails = styled(
+  MaterialAccordionDetails,
+)<AccordionDetailsProps>(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: theme.typography.pxToRem(12),
+  lineHeight: theme.typography.pxToRem(16),
+  backgroundColor: theme.palette.grey[200],
+  marginTop: 0,
+  marginBottom: 0,
+}));
+
+AccordionDetails.displayName = 'NhostAccordionDetails';
+
+export default AccordionDetails;

dashboard/src/components/ui/v2/Accordion/AccordionSummary.tsx

@@ -0,0 +1,24 @@
+import { styled } from '@mui/material';
+import type { AccordionSummaryProps as MaterialAccordionSummaryProps } from '@mui/material/AccordionSummary';
+
+import MaterialAccordionSummary, {
+  accordionSummaryClasses,
+} from '@mui/material/AccordionSummary';
+
+export interface AccordionSummaryProps extends MaterialAccordionSummaryProps {}
+
+const AccordionSummary = styled(
+  MaterialAccordionSummary,
+)<AccordionSummaryProps>(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: theme.typography.pxToRem(12),
+  lineHeight: theme.typography.pxToRem(16),
+  [`&.${accordionSummaryClasses.disabled}`]: {
+    backgroundColor: 'transparent',
+    opacity: 1,
+  },
+}));
+
+AccordionSummary.displayName = 'NhostAccordionSummary';
+
+export default AccordionSummary;

dashboard/src/components/ui/v2/Accordion/index.ts

@@ -0,0 +1,19 @@
+import AccordionRoot from './Accordion';
+import AccordionActions from './AccordionActions';
+import AccordionDetails from './AccordionDetails';
+import AccordionSummary from './AccordionSummary';
+
+export { default as BaseAccordion } from './Accordion';
+export * from './AccordionActions';
+export { default as AccordionActions } from './AccordionActions';
+export * from './AccordionDetails';
+export { default as AccordionDetails } from './AccordionDetails';
+export * from './AccordionSummary';
+export { default as AccordionSummary } from './AccordionSummary';
+
+export const Accordion = {
+  Root: AccordionRoot,
+  Details: AccordionDetails,
+  Summary: AccordionSummary,
+  Actions: AccordionActions,
+};

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

@@ -0,0 +1,47 @@
+import { styled } from '@mui/material';
+import type { BadgeProps as MaterialBadgeProps } from '@mui/material/Badge';
+import MaterialBadge from '@mui/material/Badge';
+import type { ElementType } from 'react';
+
+export interface BadgeProps extends MaterialBadgeProps {
+  /**
+   * Custom component for the root node.
+   */
+  component?: ElementType;
+}
+
+const Badge = styled(MaterialBadge)<BadgeProps>(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: theme.typography.pxToRem(12),
+  lineHeight: theme.typography.pxToRem(16),
+  fontWeight: 500,
+  padding: 0,
+  '& .MuiBadge-dot': {
+    minWidth: '0.625rem',
+    minHeight: '0.625rem',
+    borderRadius: '50%',
+  },
+  '& .MuiBadge-standard': {
+    padding: 0,
+    margin: 0,
+    minWidth: '0.625rem',
+    height: '0.625rem',
+    borderRadius: '50%',
+  },
+  '& .MuiBadge-colorError': {
+    backgroundColor: theme.palette.error.main,
+  },
+  '& .MuiBadge-colorWarning': {
+    backgroundColor: theme.palette.warning.main,
+  },
+  '& .MuiBadge-colorSuccess': {
+    backgroundColor: theme.palette.success.dark,
+  },
+  '& .MuiBadge-colorSecondary': {
+    backgroundColor: theme.palette.grey[500],
+  },
+}));
+
+Badge.displayName = 'NhostBadge';
+
+export default Badge;

dashboard/src/components/ui/v2/Badge/index.ts

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

dashboard/src/components/ui/v2/Dialog/DialogRoot.tsx

@@ -1,12 +1,12 @@
 import { Backdrop } from '@/components/ui/v2/Backdrop';
 import type { ButtonProps } from '@/components/ui/v2/Button';
+import type { DialogTitleProps } from '@/components/ui/v2/Dialog';
 import { styled } from '@mui/material';
 import type { DialogProps as MaterialDialogProps } from '@mui/material/Dialog';
 import MaterialDialog from '@mui/material/Dialog';
 import type { DialogActionsProps } from '@mui/material/DialogActions';
 import type { DialogContentProps } from '@mui/material/DialogContent';
 import type { DialogContentTextProps } from '@mui/material/DialogContentText';
-import type { DialogTitleProps } from '@mui/material/DialogTitle';
 import Paper from '@mui/material/Paper';
 import type { ReactNode } from 'react';
 

dashboard/src/components/ui/v2/ErrorToast/ErrorToast.test.tsx

@@ -0,0 +1,85 @@
+import { render, screen } from '@/tests/testUtils';
+import { test } from 'vitest';
+import ErrorToast from './ErrorToast';
+
+const oneMemberByWorkspaceError = {
+  name: 'ApolloError',
+  graphQLErrors: [
+    {
+      message: 'database query error',
+      extensions: {
+        path: '$.selectionSet.insertApp.args.object',
+        code: 'unexpected',
+        internal: {
+          arguments: [],
+          error: {
+            description: null,
+            exec_status: 'FatalError',
+            hint: null,
+            message:
+              'Only one workspace member is allowed for individual plans',
+            status_code: 'P0001',
+          },
+          prepared: false,
+          statement: '.....',
+        },
+      },
+    },
+  ],
+  protocolErrors: [],
+  clientErrors: [],
+  networkError: null,
+  message: 'database query error',
+};
+
+const changeNodeInvalidVersionError = {
+  name: 'ApolloError',
+  graphQLErrors: [
+    {
+      message:
+        'failed to resolve config: failed to validate config: config is not valid: #Config.functions.node.version: 2 errors in empty disjunction: (and 2 more errors)',
+      path: ['replaceConfigRawJSON'],
+    },
+  ],
+  protocolErrors: [],
+  clientErrors: [],
+  networkError: null,
+  message:
+    'failed to resolve config: failed to validate config: config is not valid: #Config.functions.node.version: 2 errors in empty disjunction: (and 2 more errors)',
+};
+
+test('should render the error message when creating a project with an individual plan in a workspace with multiple users', () => {
+  const errorMessage =
+    'An error occurred while creating the project. Please try again.';
+  render(
+    <ErrorToast
+      isVisible
+      errorMessage={errorMessage}
+      error={oneMemberByWorkspaceError}
+      close={() => {}}
+    />,
+  );
+
+  expect(
+    screen.getByText(
+      /Only one workspace member is allowed for individual plans/i,
+    ),
+  ).toBeInTheDocument();
+});
+
+test('should render the error message when changing the node version to an invalid value in configuration editor', () => {
+  const errorMessage =
+    'An error occurred while saving configuration. Please try again.';
+  render(
+    <ErrorToast
+      isVisible
+      errorMessage={errorMessage}
+      error={changeNodeInvalidVersionError}
+      close={() => {}}
+    />,
+  );
+  const regex =
+    /failed to resolve config: failed to validate config: config is not valid: #Config\.functions\.node\.version: 2 errors in empty disjunction: \(and 2 more errors\)/i;
+
+  expect(screen.getByText(regex)).toBeInTheDocument();
+});

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

@@ -32,7 +32,7 @@ const getInternalErrorMessage = (
     const graphqlError = error.graphQLErrors?.[0];
     const graphqlExtensionsError = graphqlError?.extensions?.internal
       ?.error as { message: string };
-    return graphqlError.message || graphqlExtensionsError?.message || null;
+    return graphqlExtensionsError?.message || graphqlError.message || null;
   }
 
   if (error instanceof Error) {

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

@@ -8,6 +8,17 @@ import { createTheme as createMuiTheme } from '@mui/material/styles';
  * @param mode - Color mode
  * @returns Material UI theme
  */
+
+declare module '@mui/material/styles' {
+  interface Palette {
+    beige: Palette['primary'];
+  }
+
+  interface PaletteOptions {
+    beige?: PaletteOptions['primary'];
+  }
+}
+
 export default function createTheme(mode: PaletteMode) {
   return createMuiTheme({
     shape: {

dashboard/src/components/ui/v2/icons/CommunityIcon/CommunityIcon.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+export default function CommunityIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={16}
+      height={16}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M5.5 10C7.29493 10 8.75 8.54493 8.75 6.75C8.75 4.95507 7.29493 3.5 5.5 3.5C3.70507 3.5 2.25 4.95507 2.25 6.75C2.25 8.54493 3.70507 10 5.5 10Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M9.71338 3.62107C10.1604 3.49513 10.6292 3.46644 11.0882 3.53693C11.5473 3.60743 11.9859 3.77547 12.3745 4.02975C12.7631 4.28403 13.0927 4.61863 13.3411 5.01102C13.5896 5.40342 13.751 5.84449 13.8146 6.30453C13.8782 6.76457 13.8425 7.2329 13.7098 7.67797C13.5772 8.12304 13.3507 8.53452 13.0457 8.8847C12.7406 9.23487 12.364 9.51561 11.9413 9.70799C11.5187 9.90038 11.0596 9.99996 10.5952 10"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M1 12.3373C1.50758 11.6153 2.18143 11.026 2.96466 10.6192C3.74788 10.2124 4.61748 10 5.50005 10C6.38262 9.99997 7.25224 10.2123 8.0355 10.619C8.81875 11.0258 9.49264 11.615 10.0003 12.337"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.5952 10C11.4779 9.99936 12.3477 10.2114 13.131 10.6182C13.9143 11.025 14.5881 11.6146 15.0952 12.337"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

dashboard/src/components/ui/v2/icons/CommunityIcon/index.ts

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

dashboard/src/components/ui/v2/icons/DiscordIcon/DiscordIcon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+export default function DiscordIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={14}
+      height={14}
+      viewBox="0 0 14 14"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M3.40571 1.5H12.5943C13.3691 1.5 14 2.13086 14 2.91257V15.2143L12.5257 13.9114L11.696 13.1434L10.8183 12.3274L11.1817 13.596H3.40571C2.63086 13.596 2 12.9651 2 12.1834V2.91257C2 2.13086 2.63086 1.5 3.40571 1.5ZM9.49486 9.9C9.70057 10.1606 9.94743 10.4554 9.94743 10.4554C11.4629 10.4074 12.0457 9.41314 12.0457 9.41314C12.0457 7.20514 11.0583 5.41543 11.0583 5.41543C10.0709 4.67486 9.13143 4.69543 9.13143 4.69543L9.03543 4.80514C10.2011 5.16171 10.7429 5.676 10.7429 5.676C10.0297 5.28514 9.33029 5.09314 8.67886 5.01771C8.18514 4.96286 7.712 4.97657 7.29371 5.03143C7.2578 5.03143 7.2271 5.03665 7.19251 5.04254C7.18748 5.0434 7.18237 5.04427 7.17714 5.04514C6.93714 5.06571 6.35429 5.15486 5.62057 5.47714C5.36686 5.59371 5.216 5.676 5.216 5.676C5.216 5.676 5.78514 5.13429 7.01943 4.77771L6.95086 4.69543C6.95086 4.69543 6.01143 4.67486 5.024 5.41543C5.024 5.41543 4.03657 7.20514 4.03657 9.41314C4.03657 9.41314 4.61257 10.4074 6.128 10.4554C6.128 10.4554 6.38171 10.1469 6.58743 9.88628C5.71657 9.62571 5.38743 9.07714 5.38743 9.07714C5.38743 9.07714 5.456 9.12514 5.57943 9.19371C5.58629 9.20057 5.59314 9.20743 5.60686 9.21428C5.61714 9.22114 5.62743 9.22628 5.63771 9.23143C5.648 9.23657 5.65829 9.24171 5.66857 9.24857C5.84 9.34457 6.01143 9.42 6.16914 9.48171C6.45029 9.59143 6.78629 9.70114 7.17714 9.77657C7.69143 9.87257 8.29486 9.90686 8.95314 9.78343C9.27543 9.72857 9.60457 9.63257 9.94743 9.48857C10.1874 9.39943 10.4549 9.26914 10.736 9.084C10.736 9.084 10.3931 9.64628 9.49486 9.9ZM6.05942 8.01421C6.05942 7.59593 6.36799 7.25307 6.75885 7.25307C7.1497 7.25307 7.46513 7.59593 7.45827 8.01421C7.45827 8.4325 7.1497 8.77536 6.75885 8.77536C6.37485 8.77536 6.05942 8.4325 6.05942 8.01421ZM8.56227 8.01421C8.56227 7.59593 8.87084 7.25307 9.2617 7.25307C9.65256 7.25307 9.96113 7.59593 9.96113 8.01421C9.96113 8.4325 9.65256 8.77536 9.2617 8.77536C8.8777 8.77536 8.56227 8.4325 8.56227 8.01421Z"
+          fill="currentColor"
+        />
+      </svg>
+    </svg>
+  );
+}

dashboard/src/components/ui/v2/icons/DiscordIcon/index.ts

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

dashboard/src/components/ui/v2/icons/EnvelopeIcon/EnvelopeIcon.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+export default function EnvelopeIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={14}
+      height={14}
+      viewBox="0 0 14 14"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M2 3.5H14V12C14 12.1326 13.9473 12.2598 13.8536 12.3536C13.7598 12.4473 13.6326 12.5 13.5 12.5H2.5C2.36739 12.5 2.24021 12.4473 2.14645 12.3536C2.05268 12.2598 2 12.1326 2 12V3.5Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M14 3.5L8 9L2 3.5"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </svg>
+  );
+}

dashboard/src/components/ui/v2/icons/EnvelopeIcon/index.ts

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

dashboard/src/components/ui/v2/icons/ExclamationFilledIcon/ExclamationFilledIcon.tsx

@@ -0,0 +1,33 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+import { SvgIcon } from '@/components/ui/v2/icons/SvgIcon';
+import type { ForwardedRef } from 'react';
+import { forwardRef } from 'react';
+
+function ExclamationFilledIcon(
+  props: IconProps,
+  ref: ForwardedRef<SVGSVGElement>,
+) {
+  return (
+    <SvgIcon
+      width="7"
+      height="7"
+      viewBox="0 0 7 7"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="Exclamation mark"
+      ref={ref}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7 3.5C7 5.433 5.433 7 3.5 7C1.567 7 0 5.433 0 3.5C0 1.567 1.567 0 3.5 0C5.433 0 7 1.567 7 3.5ZM3.96667 5.36667C3.96667 5.6244 3.75773 5.83333 3.5 5.83333C3.24227 5.83333 3.03333 5.6244 3.03333 5.36667C3.03333 5.10893 3.24227 4.9 3.5 4.9C3.75773 4.9 3.96667 5.10893 3.96667 5.36667ZM3.5 1.16667C3.20564 1.16667 2.97296 1.41615 2.99345 1.70979L3.16724 4.20075C3.17943 4.37554 3.32478 4.51111 3.5 4.51111C3.67522 4.51111 3.82057 4.37554 3.83276 4.20075L4.00655 1.70979C4.02704 1.41615 3.79436 1.16667 3.5 1.16667Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+}
+
+ExclamationFilledIcon.displayName = 'NhostExclamationFilledIcon';
+
+export default forwardRef(ExclamationFilledIcon);

dashboard/src/components/ui/v2/icons/ExclamationFilledIcon/index.ts

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

dashboard/src/components/ui/v2/icons/PowerOffIcon/PowerOffIcon.tsx

@@ -0,0 +1,27 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+import { SvgIcon } from '@/components/ui/v2/icons/SvgIcon';
+
+function PowerOffIcon(props: IconProps) {
+  return (
+    <SvgIcon
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      {...props}
+    >
+      <path
+        fill="none"
+        d="M18.36 6.64A9 9 0 0 1 20.77 15M6.16 6.16a9 9 0 1 0 12.68 12.68M12 2v4M2 2l20 20"
+      />
+    </SvgIcon>
+  );
+}
+
+PowerOffIcon.displayName = 'NhostPowerOffIcon';
+
+export default PowerOffIcon;

dashboard/src/components/ui/v2/icons/PowerOffIcon/index.ts

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

dashboard/src/components/ui/v2/icons/QuestionMarkIcon/QuestionMarkIcon.tsx

@@ -0,0 +1,21 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+import { SvgIcon } from '@/components/ui/v2/icons/SvgIcon';
+
+function QuestionMarkIcon(props: IconProps) {
+  return (
+    <SvgIcon
+      width="320"
+      height="512"
+      aria-label="Question mark"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 320 512"
+      {...props}
+    >
+      <path d="M80 160c0-35.3 28.7-64 64-64h32c35.3 0 64 28.7 64 64v3.6c0 21.8-11.1 42.1-29.4 53.8l-42.2 27.1c-25.2 16.2-40.4 44.1-40.4 74V320c0 17.7 14.3 32 32 32s32-14.3 32-32v-1.4c0-8.2 4.2-15.8 11-20.2l42.2-27.1c36.6-23.6 58.8-64.1 58.8-107.7V160c0-70.7-57.3-128-128-128H144C73.3 32 16 89.3 16 160c0 17.7 14.3 32 32 32s32-14.3 32-32zm80 320a40 40 0 1 0 0-80 40 40 0 1 0 0 80z" />
+    </SvgIcon>
+  );
+}
+
+QuestionMarkIcon.displayName = 'NhostQuestionMarkIcon';
+
+export default QuestionMarkIcon;

dashboard/src/components/ui/v2/icons/QuestionMarkIcon/index.ts

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

dashboard/src/components/ui/v2/icons/RepeatIcon/RepeatIcon.tsx

@@ -0,0 +1,31 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+import { SvgIcon } from '@/components/ui/v2/icons/SvgIcon';
+
+function RepeatIcon(props: IconProps) {
+  return (
+    <SvgIcon
+      aria-label="Repeat"
+      width="16"
+      height="20"
+      viewBox="0 0 16 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M11.4062 11.9779H15.9998L13.7035 8L11.4062 11.9779Z"
+        fill="currentColor"
+      />
+      <path
+        d="M13.1959 16.2243C13.1959 17.466 11.9655 18.4759 10.4525 18.4759L4.05328 18.4749C2.54037 18.4749 1.30989 17.2444 1.30989 15.7315V4.26843C1.30989 2.75552 2.54034 1.52504 4.05328 1.52504H10.4525C11.9654 1.52504 13.1959 2.535 13.1959 3.77661V6.53613C13.1959 6.81655 13.4235 7.04415 13.7039 7.04415C13.9844 7.04415 14.212 6.81655 14.212 6.53613V3.77557C14.212 1.97409 12.5253 0.508057 10.4526 0.508057L4.05333 0.509073C1.98056 0.509073 0.293945 2.19574 0.293945 4.26846V15.7326C0.293945 17.8054 1.98061 19.492 4.05333 19.492H10.4526C12.5253 19.492 14.212 18.0258 14.212 16.2245L14.212 13.5H13.1959L13.1959 16.2243Z"
+        fill="currentColor"
+        stroke="currentColor"
+        strokeWidth="0.5"
+      />
+    </SvgIcon>
+  );
+}
+
+RepeatIcon.displayName = 'NhostRepeatIcon';
+
+export default RepeatIcon;

dashboard/src/components/ui/v2/icons/RepeatIcon/index.ts

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

dashboard/src/components/ui/v2/icons/ServicesOutlinedIcon/ServicesOutlinedIcon.tsx

@@ -0,0 +1,63 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+import { SvgIcon } from '@/components/ui/v2/icons/SvgIcon';
+
+function ServicesOutlinedIcon(props: IconProps) {
+  return (
+    <SvgIcon
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="Services"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.8521 7.06294C15.8143 7.03192 15.485 6.77435 14.7986 6.73709C14.7878 6.7365 14.7769 6.73597 14.7659 6.73549C14.7223 6.7336 14.6772 6.7326 14.6307 6.7326C14.458 6.73338 14.2857 6.74604 14.1147 6.77049C14.0763 6.77598 14.0379 6.78208 13.9996 6.78876C13.9966 6.76748 13.9934 6.74642 13.9899 6.72556C13.9367 6.41145 13.8247 6.14509 13.6926 5.92522C13.5869 5.74941 13.4683 5.60332 13.3565 5.48631C13.1377 5.25722 12.9451 5.13955 12.9269 5.12843L12.7118 5L12.5703 5.21132C12.4532 5.39906 12.3569 5.59952 12.2832 5.80884C12.2455 5.916 12.2137 6.02549 12.188 6.13679C12.1785 6.17826 12.17 6.21957 12.1626 6.26069C12.0784 6.72436 12.1218 7.16514 12.2887 7.56346C12.3311 7.66471 12.3815 7.76323 12.4399 7.85868C12.0678 8.07332 11.471 8.12616 11.3503 8.13083H1.46954C1.21146 8.1312 1.00204 8.34712 1.00063 8.6143C0.989105 9.51047 1.13576 10.4013 1.43337 11.2429C1.77374 12.1671 2.28012 12.8478 2.93893 13.2644C3.67717 13.7325 4.87658 14 6.23616 14C6.85036 14.0019 7.4634 13.9444 8.06725 13.8281C8.90666 13.6685 9.71439 13.3648 10.457 12.9294C11.0689 12.5625 11.6196 12.0958 12.0879 11.5472C12.8644 10.6371 13.3296 9.62426 13.6755 8.72167C13.6783 8.7144 13.6811 8.70714 13.6839 8.69989H13.8221C14.6792 8.69989 15.2062 8.3448 15.4969 8.04724C15.69 7.85746 15.8408 7.62628 15.9386 7.36986L16 7.18397L15.8521 7.06294ZM11.9029 9.4592C11.6843 9.49512 11.4987 9.51062 11.3978 9.51453L11.374 9.51544H2.35702C2.41226 9.93468 2.51073 10.3477 2.65136 10.7474C2.90985 11.445 3.24967 11.8492 3.60646 12.0748L3.60778 12.0757C4.05853 12.3615 4.98755 12.6153 6.23616 12.6153H6.24016C6.77497 12.6171 7.30873 12.567 7.83441 12.4657L7.83733 12.4652C8.53499 12.3325 9.20535 12.0806 9.82092 11.7205C10.31 11.4265 10.7488 11.0538 11.1211 10.6177M11.9029 9.4592C11.6864 9.86254 11.4322 10.2531 11.1211 10.6177L11.9029 9.4592Z"
+        fill="currentColor"
+      />
+      <path
+        d="M2.38514 7.54505H3.7092C3.77306 7.54505 3.8248 7.49328 3.8248 7.42944V6.25005C3.82516 6.18619 3.77369 6.13415 3.70985 6.13379C3.70964 6.13379 3.70941 6.13379 3.7092 6.13379H2.38514C2.32128 6.13379 2.26953 6.18556 2.26953 6.24939V6.25005V7.42942C2.26953 7.49328 2.32128 7.54505 2.38514 7.54505Z"
+        fill="currentColor"
+      />
+      <path
+        d="M4.21003 7.54505H5.53409C5.59794 7.54505 5.64969 7.49328 5.64969 7.42944V6.25005C5.65005 6.18619 5.59857 6.13415 5.53472 6.13379C5.53451 6.13379 5.53427 6.13379 5.53407 6.13379H4.21001C4.14579 6.13379 4.09375 6.18583 4.09375 6.25005V7.42942C4.09413 7.49339 4.14606 7.54505 4.21003 7.54505Z"
+        fill="currentColor"
+      />
+      <path
+        d="M6.06192 7.54505H7.38597C7.44983 7.54505 7.50157 7.49328 7.50157 7.42944V6.25005C7.50193 6.18619 7.45046 6.13415 7.3866 6.13379C7.38639 6.13379 7.38616 6.13379 7.38595 6.13379H6.06189C5.99804 6.13379 5.94629 6.18556 5.94629 6.24939V6.25005V7.42942C5.94631 7.49328 5.99808 7.54505 6.06192 7.54505Z"
+        fill="currentColor"
+      />
+      <path
+        d="M7.89295 7.54505H9.21701C9.28097 7.54505 9.33291 7.49341 9.33326 7.42944V6.25005C9.33326 6.18583 9.28122 6.13379 9.21701 6.13379H7.89295C7.82909 6.13379 7.77734 6.18556 7.77734 6.24939V6.25005V7.42942C7.77734 7.49328 7.82911 7.54505 7.89295 7.54505Z"
+        fill="currentColor"
+      />
+      <path
+        d="M4.21001 5.84874H5.53406C5.59801 5.84839 5.64967 5.79643 5.64967 5.73249V4.55311C5.64967 4.48925 5.5979 4.4375 5.53406 4.4375H4.21001C4.14606 4.4375 4.09411 4.48914 4.09375 4.55311V5.73249C4.09411 5.79656 4.14594 5.84839 4.21001 5.84874Z"
+        fill="currentColor"
+      />
+      <path
+        d="M6.06189 5.84874H7.38595C7.4499 5.84839 7.50156 5.79643 7.50156 5.73249V4.55311C7.50156 4.48925 7.44979 4.4375 7.38595 4.4375H6.06189C5.99804 4.4375 5.94629 4.48927 5.94629 4.55311V5.73249C5.94629 5.79643 5.99795 5.84839 6.06189 5.84874Z"
+        fill="currentColor"
+      />
+      <path
+        d="M7.89295 5.84874H9.21701C9.28108 5.84839 9.33291 5.79656 9.33326 5.73249V4.55311C9.33291 4.48914 9.28097 4.4375 9.21701 4.4375H7.89295C7.82909 4.4375 7.77734 4.48927 7.77734 4.55311V5.73249C7.77734 5.79643 7.82901 5.84839 7.89295 5.84874Z"
+        fill="currentColor"
+      />
+      <path
+        d="M7.89295 4.1515H9.21701C9.28097 4.1515 9.33291 4.09983 9.33326 4.03589V2.85584C9.33291 2.79188 9.28097 2.74023 9.21701 2.74023H7.89295C7.82909 2.74023 7.77734 2.79198 7.77734 2.85584V4.03587C7.77734 4.09973 7.82911 4.1515 7.89295 4.1515Z"
+        fill="currentColor"
+      />
+      <path
+        d="M9.73963 7.54505H11.0637C11.1277 7.54505 11.1796 7.49341 11.1799 7.42944V6.25005C11.1799 6.18583 11.1279 6.13379 11.0637 6.13379H9.73963C9.67579 6.13379 9.62402 6.18556 9.62402 6.24939V6.25005V7.42942C9.62402 7.49328 9.67579 7.54505 9.73963 7.54505Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+}
+
+ServicesOutlinedIcon.displayName = 'NhostServicesIcon';
+
+export default ServicesOutlinedIcon;

dashboard/src/components/ui/v2/icons/ServicesOutlinedIcon/index.ts

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

dashboard/src/components/ui/v2/icons/SlidersIcon/SlidersIcon.tsx

@@ -0,0 +1,34 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+import { SvgIcon } from '@/components/ui/v2/icons/SvgIcon';
+
+function SlidersIcon(props: IconProps) {
+  return (
+    <SvgIcon
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="Sliders"
+      {...props}
+    >
+      <line x1="21" x2="14" y1="4" y2="4" />
+      <line x1="10" x2="3" y1="4" y2="4" />
+      <line x1="21" x2="12" y1="12" y2="12" />
+      <line x1="8" x2="3" y1="12" y2="12" />
+      <line x1="21" x2="16" y1="20" y2="20" />
+      <line x1="12" x2="3" y1="20" y2="20" />
+      <line x1="14" x2="14" y1="2" y2="6" />
+      <line x1="8" x2="8" y1="10" y2="14" />
+      <line x1="16" x2="16" y1="18" y2="22" />
+    </SvgIcon>
+  );
+}
+
+SlidersIcon.displayName = 'NhostSlidersIcon';
+
+export default SlidersIcon;

dashboard/src/components/ui/v2/icons/SlidersIcon/index.ts

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

dashboard/src/components/ui/v2/theme/getDesignTokens/getDesignTokens.ts

@@ -63,6 +63,9 @@ export default function getDesignTokens(mode: PaletteMode): PaletteOptions {
         paper: '#171d26',
       },
       divider: '#2f363d',
+      beige: {
+        main: '#362c22',
+      },
     };
   }
 
@@ -125,5 +128,8 @@ export default function getDesignTokens(mode: PaletteMode): PaletteOptions {
       paper: '#ffffff',
     },
     divider: '#eaedf0',
+    beige: {
+      main: '#e5d1bf',
+    },
   };
 }

dashboard/src/features/ai/AssistantForm/components/ArgumentsFormSection/ArgumentsFormSection.tsx

@@ -117,7 +117,7 @@ export default function ArgumentsFormSection({
                       listbox: { className: 'min-w-0 w-full' },
                       popper: {
                         disablePortal: false,
-                        className: 'z-[10000] w-[270px] w-full',
+                        className: 'z-[10000] w-[270px]',
                       },
                     }}
                   >

dashboard/src/features/ai/settings/components/AISettings.tsx

@@ -32,8 +32,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';
 import { DisableAIServiceConfirmationDialog } from './DisableAIServiceConfirmationDialog';
-
-const MIN_POSTGRES_VERSION_SUPPORTING_AI = '14.6-20231018-1';
+import { isPostgresVersionValidForAI } from '@/features/ai/settings/utils/isPostgresVersionValidForAI';
 
 const validationSchema = Yup.object({
   version: Yup.object({
@@ -165,7 +164,7 @@ export default function AISettings() {
   ]);
 
   const toggleAIService = async (enabled: boolean) => {
-    if (postgresVersion < MIN_POSTGRES_VERSION_SUPPORTING_AI) {
+    if (!isPostgresVersionValidForAI(postgresVersion)) {
       toast.error(
         'In order to enable the AI service you need to update your database version to 14.6-20231018-1 or newer.',
         {
@@ -495,3 +494,4 @@ export default function AISettings() {
     </Box>
   );
 }
+

dashboard/src/features/ai/settings/utils/isPostgresVersionValidForAI/index.ts

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

dashboard/src/features/ai/settings/utils/isPostgresVersionValidForAI/isPostgresVersionValidForAI.test.ts

@@ -0,0 +1,22 @@
+import { test, vi } from 'vitest';
+
+import isPostgresVersionValidForAI from './isPostgresVersionValidForAI';
+
+beforeEach(() => {
+  vi.resetModules();
+});
+
+test('greater than minimum version, minor version with two digits, should be valid', () => {
+  const postgresVersion = '14.11-20240515-1';
+  expect(isPostgresVersionValidForAI(postgresVersion)).toBe(true);
+});
+
+test('less than minimum version, should be invalid', () => {
+  const postgresVersion = '14.6-20221110-1';
+  expect(isPostgresVersionValidForAI(postgresVersion)).toBe(false);
+});
+
+test('equal to minimum version, should be valid', () => {
+  const postgresVersion = '14.6-20231018-1';
+  expect(isPostgresVersionValidForAI(postgresVersion)).toBe(true);
+});

dashboard/src/features/ai/settings/utils/isPostgresVersionValidForAI/isPostgresVersionValidForAI.ts

@@ -0,0 +1,18 @@
+/**
+ * Check if the given postgres version is valid for enabling AI in the project
+ *
+ * @param postgresVersion - Postgres version used in the project.
+ * @returns Whether is valid for enabling AI.
+ */
+export default function isPostgresVersionValidForAI(
+  postgresVersion: string,
+): boolean {
+  const MIN_POSTGRES_VERSION_SUPPORTING_AI = '14.6-20231018-1';
+
+  if (/^14\.6-/.test(postgresVersion)) {
+    return postgresVersion >= MIN_POSTGRES_VERSION_SUPPORTING_AI;
+  }
+
+  // Note: No need to account for versions less than 14.6
+  return true;
+}

dashboard/src/features/database/common/hooks/useEstimatedDatabaseMigrationDowntime/index.ts

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

dashboard/src/features/database/common/hooks/useEstimatedDatabaseMigrationDowntime/useEstimatedDatabaseMigrationDowntime.ts

@@ -0,0 +1,93 @@
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import {
+  useGetApplicationBackupsQuery,
+  type GetApplicationBackupsQuery,
+  type GetApplicationBackupsQueryVariables,
+} from '@/utils/__generated__/graphql';
+import type { QueryHookOptions } from '@apollo/client';
+
+interface TimePeriod {
+  value: number;
+  unit: 'hours' | 'minutes';
+  downtime: string;
+  downtimeShort: string;
+}
+
+export interface UseEstimatedDatabaseMigrationDowntimeOptions
+  extends QueryHookOptions<
+    GetApplicationBackupsQuery,
+    GetApplicationBackupsQueryVariables
+  > {}
+
+const DEFAULT_ESTIMATED_DOWNTIME: TimePeriod = {
+  value: 10,
+  unit: 'minutes',
+  downtime: '10 minutes',
+  downtimeShort: '10min',
+};
+
+function getEstimatedTime(diff: number): TimePeriod {
+  if (diff > 1000 * 3600) {
+    const value = Math.floor(diff / (1000 * 3600));
+    const unitStr = value === 1 ? 'hour' : 'hours';
+    return {
+      value,
+      unit: 'hours',
+      downtime: `${value} ${unitStr}`,
+      downtimeShort: `${value}hr`,
+    };
+  }
+  // 10 minutes is the minimum estimated downtime
+  if (diff > 1000 * 60 * 10) {
+    const value = Math.floor(diff / (1000 * 60));
+    const unitStr = value === 1 ? 'minute' : 'minutes';
+    return {
+      value,
+      unit: 'minutes',
+      downtime: `${value} ${unitStr}`,
+      downtimeShort: `${value}min`,
+    };
+  }
+
+  return DEFAULT_ESTIMATED_DOWNTIME;
+}
+
+/*
+ * This hook returns the estimated downtime for a database migration.
+ * The estimated downtime is calculated based on the time taken to complete the last backup.
+ * If there are no backups, the estimated downtime is set to 10 minutes.
+ */
+
+export default function useEstimatedDatabaseMigrationDowntime(
+  options: UseEstimatedDatabaseMigrationDowntimeOptions = {},
+): TimePeriod {
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  const isPlanFree = currentProject?.plan?.isFree;
+
+  const { data, loading, error } = useGetApplicationBackupsQuery({
+    ...options,
+    variables: { ...options.variables, appId: currentProject?.id },
+    skip: isPlanFree,
+  });
+
+  if (loading || error) {
+    return DEFAULT_ESTIMATED_DOWNTIME;
+  }
+
+  const backups = data?.app?.backups;
+
+  let estimatedMilliseconds = 1000 * 60 * 10; // DEFAULT ESTIMATED DOWNTIME is 10 minutes
+
+  if (!isPlanFree && backups?.length > 0) {
+    const lastBackup = backups[0];
+    const createdAt = new Date(lastBackup.createdAt);
+    const completedAt = new Date(lastBackup.completedAt);
+    const diff = completedAt.valueOf() - createdAt.valueOf();
+    estimatedMilliseconds = diff * 2;
+  }
+
+  const estimated = getEstimatedTime(estimatedMilliseconds);
+
+  return estimated;
+}

dashboard/src/features/database/common/hooks/useGetPostgresVersion/index.ts

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

dashboard/src/features/database/common/hooks/useGetPostgresVersion/useGetPostgresVersion.ts

@@ -0,0 +1,37 @@
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
+import { useLocalMimirClient } from '@/hooks/useLocalMimirClient';
+import { useGetPostgresSettingsQuery } from '@/utils/__generated__/graphql';
+
+/**
+ * Queries the postgres version of the current project.
+ * @returns Major, minor and full version of the postgres database. Loading and error states.
+ */
+export default function useGetPostgresVersion() {
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const localMimirClient = useLocalMimirClient();
+  const isPlatform = useIsPlatform();
+
+  const {
+    data: postgresSettingsData,
+    loading,
+    error,
+  } = useGetPostgresSettingsQuery({
+    variables: { appId: currentProject?.id },
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const { version } = postgresSettingsData?.config?.postgres || {};
+  const [postgresMajor, postgresMinor] = version?.split('.') || [
+    undefined,
+    undefined,
+  ];
+
+  return {
+    version,
+    postgresMajor,
+    postgresMinor,
+    loading,
+    error,
+  };
+}

dashboard/src/features/database/common/hooks/useIsDatabaseMigrating/index.ts

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

dashboard/src/features/database/common/hooks/useIsDatabaseMigrating/useIsDatabaseMigrating.ts

@@ -0,0 +1,98 @@
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import {
+  useGetApplicationStateQuery,
+  type GetApplicationStateQuery,
+  type GetApplicationStateQueryVariables,
+} from '@/generated/graphql';
+import { ApplicationStatus } from '@/types/application';
+import type { QueryHookOptions } from '@apollo/client';
+import { useVisibilityChange } from '@uidotdev/usehooks';
+import { useEffect } from 'react';
+
+export interface UseIsDatabaseMigratingOptions
+  extends QueryHookOptions<
+    GetApplicationStateQuery,
+    GetApplicationStateQueryVariables
+  > {
+  shouldPoll?: boolean;
+}
+
+/*
+ * This hook returns information about the current state of database migration.
+ * @param options - Options for the query.
+ *
+ * @returns - An object with two properties:
+ * - isMigrating: true if the database is currently migrating.
+ * - shouldShowUpgradeLogs: true if the database is currently migrating or the application is not live after a migration.
+ */
+export default function useIsDatabaseMigrating(
+  options: UseIsDatabaseMigratingOptions = {},
+): {
+  isMigrating: boolean;
+  shouldShowUpgradeLogs: boolean;
+} {
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  const isVisible = useVisibilityChange();
+
+  const {
+    data: appStatesData,
+    startPolling,
+    stopPolling,
+  } = useGetApplicationStateQuery({
+    ...options,
+    variables: { ...options.variables, appId: currentProject?.id },
+    skip: !currentProject,
+    skipPollAttempt: () => !isVisible,
+  });
+
+  useEffect(() => {
+    if (options.shouldPoll) {
+      startPolling(options.pollInterval || 5000);
+    }
+
+    return () => stopPolling();
+  }, [stopPolling, startPolling, options.shouldPoll, options.pollInterval]);
+
+  // Return true if the application is migrating or if the application is not live after a migration
+  const shouldShowUpgradeLogs = (
+    appStates: GetApplicationStateQuery['app']['appStates'],
+  ) => {
+    for (let i = 0; i < appStates.length; i += 1) {
+      if (appStates[i].stateId === ApplicationStatus.Live) {
+        return false;
+      }
+      if (appStates[i].stateId === ApplicationStatus.Migrating) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+
+  // Return true if the application is currently migrating
+  const isMigrating = (
+    appStates: GetApplicationStateQuery['app']['appStates'],
+  ) => {
+    for (let i = 0; i < appStates.length; i += 1) {
+      if (appStates[i].stateId === ApplicationStatus.Live) {
+        return false;
+      }
+      if (appStates[i].stateId === ApplicationStatus.Errored) {
+        return false;
+      }
+      if (appStates[i].stateId === ApplicationStatus.Migrating) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+
+  return {
+    isMigrating: isMigrating(appStatesData?.app?.appStates || []),
+    shouldShowUpgradeLogs: shouldShowUpgradeLogs(
+      appStatesData?.app?.appStates || [],
+    ),
+  };
+}

dashboard/src/features/database/common/hooks/useMigrationLogs/index.ts

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

dashboard/src/features/database/common/hooks/useMigrationLogs/useMigrationLogs.ts

@@ -0,0 +1,107 @@
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import {
+  useGetApplicationStateQuery,
+  useGetSystemLogsQuery,
+  type GetApplicationStateQuery,
+  type GetApplicationStateQueryVariables,
+  type GetSystemLogsQuery,
+  type GetSystemLogsQueryVariables,
+} from '@/generated/graphql';
+import { ApplicationStatus } from '@/types/application';
+import type { ApolloError, QueryHookOptions } from '@apollo/client';
+import { useVisibilityChange } from '@uidotdev/usehooks';
+import { useEffect } from 'react';
+
+export interface UseIsDatabaseMigratingOptions
+  extends QueryHookOptions<
+    GetApplicationStateQuery,
+    GetApplicationStateQueryVariables
+  > {
+  shouldPoll?: boolean;
+}
+
+export interface UseMigrationLogsOptions
+  extends QueryHookOptions<GetSystemLogsQuery, GetSystemLogsQueryVariables> {
+  shouldPoll?: boolean;
+}
+
+export interface Log {
+  level: string;
+  msg: string;
+  time: string;
+}
+
+/*
+ * Returns logs for the current database migration.
+ * @param options - Options for the getSystemLogs query.
+ * @returns - An object with three properties:
+ * - logs: Logs for the current/latest database migration.
+ * - loading: true if the getLogs query is in a loading state.
+ * - error: Error object if the query failed.
+ */
+export default function useMigrationLogs(
+  options: UseMigrationLogsOptions = {},
+): {
+  logs: Partial<Log>[];
+  loading: boolean;
+  error: ApolloError;
+} {
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  const isVisible = useVisibilityChange();
+
+  const { data: appStatesData } = useGetApplicationStateQuery({
+    variables: { appId: currentProject?.id },
+    skip: !currentProject,
+  });
+
+  const migrationStartTimestamp = appStatesData?.app?.appStates?.find(
+    (state) => state.stateId === ApplicationStatus.Migrating,
+  )?.createdAt;
+
+  const from = new Date(migrationStartTimestamp);
+
+  const { data, loading, error, startPolling, stopPolling } =
+    useGetSystemLogsQuery({
+      ...options,
+      variables: {
+        ...options.variables,
+        appID: currentProject.id,
+        action: 'change-database-version',
+        from,
+      },
+      skip: !currentProject || !from,
+      skipPollAttempt: () => !isVisible,
+    });
+
+  useEffect(() => {
+    if (options.shouldPoll) {
+      startPolling(options.pollInterval || 5000);
+    }
+
+    return () => stopPolling();
+  }, [stopPolling, startPolling, options.shouldPoll, options.pollInterval]);
+
+  const systemLogs = data?.systemLogs ?? [];
+  const sortedLogs = [...systemLogs];
+  sortedLogs.sort(
+    (a, b) => new Date(a.timestamp).valueOf() - new Date(b.timestamp).valueOf(),
+  ); // sort in ascending order
+
+  const logs = sortedLogs.map(({ log }) => {
+    let logObj: Partial<Log> = {};
+    try {
+      logObj = JSON.parse(log);
+      return logObj;
+    } catch (e) {
+      console.error('Failed to parse log', log);
+      return undefined;
+    }
+  });
+
+  return {
+    logs,
+    loading,
+    error,
+  };
+}

dashboard/src/features/database/dataGrid/components/ColumnAutocomplete/ColumnAutocomplete.tsx

@@ -19,6 +19,7 @@ import { useAutocomplete } from '@mui/base/useAutocomplete';
 import type { AutocompleteRenderGroupParams } from '@mui/material/Autocomplete';
 import { autocompleteClasses } from '@mui/material/Autocomplete';
 import type {
+  ChangeEvent,
   ForwardedRef,
   HTMLAttributes,
   PropsWithoutRef,
@@ -209,6 +210,7 @@ function ColumnAutocomplete(
     ]);
   }
 
+
   const options = useColumnGroups({
     selectedSchema,
     selectedTable,
@@ -241,6 +243,33 @@ function ColumnAutocomplete(
     onChange: handleChange,
   });
 
+  
+  function handleInputValueChange(event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
+    const {value} = event.target
+    setInputValue(value)
+
+    setSelectedColumn(
+      {
+        value,
+        label: value,
+        metadata: selectedColumn?.metadata || {
+          table_schema: selectedSchema,
+          table_name: selectedTable,
+        }
+      });
+
+    onChange?.(event, {
+      value:
+        selectedRelationships.length > 0
+          ? [relationshipDotNotation, value].join('.')
+          : value,
+      columnMetadata: {
+        table_schema: selectedSchema,
+        table_name: selectedTable,
+      },
+    });
+  }
+
   return (
     <>
       <div {...getRootProps()} className={rootClassName}>
@@ -293,7 +322,7 @@ function ColumnAutocomplete(
           helperText={
             String(tableError || metadataError || '') || props.helperText
           }
-          onChange={(event) => setInputValue(event.target.value)}
+          onChange={handleInputValueChange}
           value={inputValue}
           startAdornment={
             selectedColumn || relationshipDotNotation ? (
@@ -305,7 +334,7 @@ function ColumnAutocomplete(
                 className="!ml-2 flex-shrink-0 truncate lg:max-w-[200px]"
               >
                 <Text component="span" color="disabled">
-                  {defaultTable}
+                  {selectedTable}
                 </Text>
                 .
                 {relationshipDotNotation && (

dashboard/src/features/database/settings/components/DatabaseConnectionInfo/DatabaseConnectionInfo.tsx

@@ -1,3 +1,7 @@
+import { ApplyLocalSettingsDialog } from '@/components/common/ApplyLocalSettingsDialog';
+import { useDialog } from '@/components/common/DialogProvider';
+import { useUI } from '@/components/common/UIProvider';
+import { Form } from '@/components/form/Form';
 import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { Alert } from '@/components/ui/v2/Alert';
@@ -7,11 +11,32 @@ import type { InputProps } from '@/components/ui/v2/Input';
 import { Input } from '@/components/ui/v2/Input';
 import { InputAdornment } from '@/components/ui/v2/InputAdornment';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
 import { generateAppServiceUrl } from '@/features/projects/common/utils/generateAppServiceUrl';
+import { useLocalMimirClient } from '@/hooks/useLocalMimirClient';
 import { copy } from '@/utils/copy';
-import { useGetPostgresSettingsQuery } from '@/utils/__generated__/graphql';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
+import {
+  useGetPostgresSettingsQuery,
+  useUpdateConfigMutation,
+} from '@/utils/__generated__/graphql';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { FormProvider, useForm } from 'react-hook-form';
+import * as Yup from 'yup';
+
+const databasePublicAccessValidationSchema = Yup.object({
+  enablePublicAccess: Yup.bool(),
+});
+
+type DatabasePublicAccessFormValues = Yup.InferType<
+  typeof databasePublicAccessValidationSchema
+>;
 
 export default function DatabaseConnectionInfo() {
+  const { openDialog } = useDialog();
+  const isPlatform = useIsPlatform();
+  const { maintenanceActive } = useUI();
+  const localMimirClient = useLocalMimirClient();
   const { currentProject } = useCurrentWorkspaceAndProject();
 
   const { data, loading, error } = useGetPostgresSettingsQuery({
@@ -19,6 +44,61 @@ export default function DatabaseConnectionInfo() {
     fetchPolicy: 'cache-only',
   });
 
+  const [updateConfig] = useUpdateConfigMutation({
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const enablePublicAccess =
+    !!data?.config?.postgres?.resources?.enablePublicAccess;
+
+  const form = useForm<DatabasePublicAccessFormValues>({
+    reValidateMode: 'onSubmit',
+    defaultValues: {
+      enablePublicAccess,
+    },
+    resolver: yupResolver(databasePublicAccessValidationSchema),
+  });
+
+  async function handleSubmit(formValues: DatabasePublicAccessFormValues) {
+    const updateConfigPromise = updateConfig({
+      variables: {
+        appId: currentProject.id,
+        config: {
+          postgres: {
+            resources: {
+              enablePublicAccess: formValues.enablePublicAccess,
+            },
+          },
+        },
+      },
+    });
+
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(formValues);
+
+        if (!isPlatform) {
+          openDialog({
+            title: 'Apply your changes',
+            component: <ApplyLocalSettingsDialog />,
+            props: {
+              PaperProps: {
+                className: 'max-w-2xl',
+              },
+            },
+          });
+        }
+      },
+      {
+        loadingMessage: 'Database settings are being updated...',
+        successMessage: 'Database settings have been updated successfully.',
+        errorMessage:
+          "An error occurred while trying to update the project's database settings.",
+      },
+    );
+  }
+
   if (loading) {
     return (
       <ActivityIndicator
@@ -76,49 +156,72 @@ export default function DatabaseConnectionInfo() {
     },
   ];
 
-  return (
-    <SettingsContainer
-      title="Connection Info"
-      description="Connect directly to the Postgres database with this information."
-      slotProps={{ footer: { className: 'hidden' } }}
-      className="grid grid-cols-6 gap-4 pb-2"
-    >
-      {settingsDatabaseCustomInputs.map(
-        ({ name, label, className, value: inputValue }) => (
-          <Input
-            key={name}
-            label={label}
-            required
-            disabled
-            value={inputValue}
-            className={className}
-            slotProps={{ inputRoot: { className: '!pr-8 truncate' } }}
-            fullWidth
-            hideEmptyHelperText
-            endAdornment={
-              <InputAdornment position="end" className="absolute right-2">
-                <Button
-                  sx={{ minWidth: 0, padding: 0 }}
-                  color="secondary"
-                  variant="borderless"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    copy(inputValue as string, `${label}`);
-                  }}
-                >
-                  <CopyIcon className="h-4 w-4" />
-                </Button>
-              </InputAdornment>
-            }
-          />
-        ),
-      )}
+  const { formState } = form;
 
-      <Alert severity="info" className="col-span-6 text-left">
-        To connect to the Postgres database directly, generate a new password,
-        securely save it, and then modify your connection string with the newly
-        created password.
-      </Alert>
-    </SettingsContainer>
+  return (
+    <FormProvider {...form}>
+      <Form onSubmit={handleSubmit}>
+        <SettingsContainer
+          title="Public access"
+          description={
+            enablePublicAccess
+              ? 'Connect directly to the Postgres database with this information.'
+              : 'Enable public access to your Postgres database.'
+          }
+          slotProps={{
+            submitButton: {
+              disabled: !formState.isDirty || maintenanceActive,
+              loading: formState.isSubmitting,
+            },
+          }}
+          className="grid grid-cols-6 gap-4 pb-2"
+          switchId="enablePublicAccess"
+          showSwitch
+        >
+          {enablePublicAccess && (
+            <>
+              {settingsDatabaseCustomInputs.map(
+                ({ name, label, className, value: inputValue }) => (
+                  <Input
+                    key={name}
+                    label={label}
+                    required
+                    disabled
+                    value={inputValue}
+                    className={className}
+                    slotProps={{ inputRoot: { className: '!pr-8 truncate' } }}
+                    fullWidth
+                    hideEmptyHelperText
+                    endAdornment={
+                      <InputAdornment
+                        position="end"
+                        className="absolute right-2"
+                      >
+                        <Button
+                          sx={{ minWidth: 0, padding: 0 }}
+                          color="secondary"
+                          variant="borderless"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            copy(inputValue as string, `${label}`);
+                          }}
+                        >
+                          <CopyIcon className="w-4 h-4" />
+                        </Button>
+                      </InputAdornment>
+                    }
+                  />
+                ),
+              )}
+              <Alert severity="info" className="col-span-6 text-left">
+                To connect to the Postgres database directly, generate a new
+                password, securely save it, and then modify your connection
+                string with the newly created password.
+              </Alert>
+            </>
+          )}
+        </SettingsContainer>
+      </Form>
+    </FormProvider>
   );
 }

dashboard/src/features/database/settings/components/DatabaseMigrateDisabledError/DatabaseMigrateDisabledError.tsx

@@ -0,0 +1,27 @@
+import { Alert } from '@/components/ui/v2/Alert';
+import { XIcon } from '@/components/ui/v2/icons/XIcon';
+import { Text } from '@/components/ui/v2/Text';
+
+export default function DatabaseMigrateWarning() {
+  return (
+    <Alert severity="error" className="flex flex-col gap-3 text-left">
+      <Text
+        className="flex items-center gap-1 font-semibold"
+        sx={{
+          color: 'error.main',
+        }}
+      >
+        <XIcon className="h-4 w-4" /> Error: Database version upgrade not
+        possible
+      </Text>
+      <Text
+        sx={{
+          color: 'error.main',
+        }}
+      >
+        Your project isn&apos;t currently in a healthy state. Please, review
+        before proceeding with the upgrade.
+      </Text>
+    </Alert>
+  );
+}

dashboard/src/features/database/settings/components/DatabaseMigrateDisabledError/index.ts

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

dashboard/src/features/database/settings/components/DatabaseMigrateDowntimeWarning/DatabaseMigrateDowntimeWarning.tsx

@@ -0,0 +1,38 @@
+import { Alert } from '@/components/ui/v2/Alert';
+import { Box } from '@/components/ui/v2/Box';
+import { Text } from '@/components/ui/v2/Text';
+import { useEstimatedDatabaseMigrationDowntime } from '@/features/database/common/hooks/useEstimatedDatabaseMigrationDowntime';
+
+export default function DatabaseMigrateDowntimeWarning() {
+  const { downtimeShort } = useEstimatedDatabaseMigrationDowntime();
+
+  return (
+    <Alert severity="warning" className="flex flex-col gap-3  text-left">
+      <div className="flex flex-col gap-2 lg:flex-row lg:justify-between">
+        <Text className="flex items-start gap-1 font-semibold">
+          <span>⚠</span> Warning: upgrading Postgres major version
+        </Text>
+        <div className="flex">
+          <Box
+            sx={{
+              backgroundColor: 'beige.main',
+            }}
+            className="py-1/2 flex items-center justify-center text-nowrap rounded-full px-2 font-semibold"
+          >
+            Estimated downtime ~{downtimeShort}
+          </Box>
+        </div>
+      </div>
+      <div className="flex flex-col gap-4">
+        <Text>
+          Upgrading a major version of Postgres requires downtime. The amount of
+          downtime will depend on your database size, so plan ahead in order to
+          reduce the impact on your users.
+        </Text>
+        <Text>
+          Note that it isn&apos;t possible to downgrade between major versions.
+        </Text>
+      </div>
+    </Alert>
+  );
+}

dashboard/src/features/database/settings/components/DatabaseMigrateDowntimeWarning/index.ts

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

dashboard/src/features/database/settings/components/DatabaseMigrateLogsModal/DatabaseMigrateLogsModal.tsx

@@ -0,0 +1,112 @@
+import { Box } from '@/components/ui/v2/Box';
+import { Text } from '@/components/ui/v2/Text';
+import { useMigrationLogs } from '@/features/database/common/hooks/useMigrationLogs';
+
+export default function DatabaseMigrateLogsModal() {
+  const { logs, loading, error } = useMigrationLogs({
+    shouldPoll: true,
+  });
+
+  if (error) {
+    return (
+      <Box className="pt-2">
+        <Box
+          className="min-h-80 p-4"
+          sx={{
+            backgroundColor: (theme) =>
+              theme.palette.mode === 'dark' ? 'grey.300' : 'grey.700',
+          }}
+        >
+          <Text
+            className="font-mono"
+            sx={{
+              color: (theme) =>
+                theme.palette.mode === 'dark' ? 'grey.900' : 'grey.100',
+            }}
+          >
+            Could not fetch logs. Error: {error.message}
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (loading) {
+    return (
+      <Box className="pt-2">
+        <Box
+          className="min-h-80 p-4"
+          sx={{
+            backgroundColor: (theme) =>
+              theme.palette.mode === 'dark' ? 'grey.300' : 'grey.700',
+          }}
+        >
+          <Text
+            className="font-mono"
+            sx={{
+              color: (theme) =>
+                theme.palette.mode === 'dark' ? 'grey.900' : 'grey.100',
+            }}
+          >
+            Loading...
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (logs.length === 0) {
+    return (
+      <Box className="pt-2">
+        <Box
+          className="min-h-80 p-4"
+          sx={{
+            backgroundColor: (theme) =>
+              theme.palette.mode === 'dark' ? 'grey.300' : 'grey.700',
+          }}
+        >
+          <Text
+            className="font-mono"
+            sx={{
+              color: (theme) =>
+                theme.palette.mode === 'dark' ? 'grey.900' : 'grey.100',
+            }}
+          >
+            No logs found
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box className="pt-2">
+      <Box
+        className="min-h-80 p-4"
+        sx={{
+          backgroundColor: (theme) =>
+            theme.palette.mode === 'dark' ? 'grey.300' : 'grey.700',
+        }}
+      >
+        {logs.map((logObj) => {
+          if (logObj?.level && logObj?.msg) {
+            return (
+              <Text
+                key={`${logObj.msg}${logObj.time}`}
+                className="font-mono"
+                sx={{
+                  color: (theme) =>
+                    theme.palette.mode === 'dark' ? 'grey.900' : 'grey.100',
+                }}
+              >
+                {logObj.level.toUpperCase()}: {logObj.msg}
+              </Text>
+            );
+          }
+
+          return undefined;
+        })}
+      </Box>
+    </Box>
+  );
+}

dashboard/src/features/database/settings/components/DatabaseMigrateLogsModal/index.ts

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

dashboard/src/features/database/settings/components/DatabaseMigrateVersionConfirmationDialog/DatabaseMigrateVersionConfirmationDialog.tsx

@@ -0,0 +1,121 @@
+import { ApplyLocalSettingsDialog } from '@/components/common/ApplyLocalSettingsDialog';
+import { useDialog } from '@/components/common/DialogProvider';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { Text } from '@/components/ui/v2/Text';
+import { useEstimatedDatabaseMigrationDowntime } from '@/features/database/common/hooks/useEstimatedDatabaseMigrationDowntime';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
+import { useLocalMimirClient } from '@/hooks/useLocalMimirClient';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
+import {
+  GetPostgresSettingsDocument,
+  GetWorkspaceAndProjectDocument,
+  useUpdateDatabaseVersionMutation,
+} from '@/utils/__generated__/graphql';
+import { useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export interface DatabaseMigrateVersionConfirmationDialogProps {
+  /**
+   * Function to be called when the user clicks the cancel button.
+   */
+  onCancel: () => void;
+  /**
+   * Function to be called when the user clicks the proceed button.
+   */
+  onProceed: () => void;
+  /**
+   * New version to migrate to.
+   */
+  postgresVersion: string;
+}
+
+export default function DatabaseMigrateVersionConfirmationDialog({
+  onCancel,
+  onProceed,
+  postgresVersion,
+}: DatabaseMigrateVersionConfirmationDialogProps) {
+  const isPlatform = useIsPlatform();
+  const { openDialog, closeDialog } = useDialog();
+  const localMimirClient = useLocalMimirClient();
+  const [loading, setLoading] = useState(false);
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const [updatePostgresMajor] = useUpdateDatabaseVersionMutation({
+    refetchQueries: [
+      GetPostgresSettingsDocument,
+      GetWorkspaceAndProjectDocument,
+    ],
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const { downtime } = useEstimatedDatabaseMigrationDowntime({
+    fetchPolicy: 'cache-only',
+  });
+
+  async function handleClick() {
+    setLoading(true);
+
+    await execPromiseWithErrorToast(
+      async () => {
+        await updatePostgresMajor({
+          variables: {
+            appId: currentProject.id,
+            version: postgresVersion,
+          },
+        });
+
+        onProceed();
+        closeDialog();
+
+        if (!isPlatform) {
+          openDialog({
+            title: 'Apply your changes',
+            component: <ApplyLocalSettingsDialog />,
+            props: {
+              PaperProps: {
+                className: 'max-w-2xl',
+              },
+            },
+          });
+        }
+      },
+      {
+        loadingMessage: 'Updating postgres version...',
+        successMessage: 'Major version upgrade started.',
+        errorMessage:
+          'An error occurred while updating the database version. Please try again later.',
+      },
+    );
+  }
+
+  return (
+    <Box className={twMerge('w-full rounded-lg p-6 pt-0 text-left')}>
+      <div className="grid grid-flow-row gap-6">
+        <Text>
+          The upgrade process will require an{' '}
+          <span className="font-semibold">
+            estimated {downtime} of downtime
+          </span>
+          . To continue with the upgrade process, click on &quot;Proceed&quot;.
+        </Text>
+
+        <div className="grid grid-flow-col gap-4">
+          <Button
+            variant="outlined"
+            color="secondary"
+            onClick={() => {
+              onCancel();
+              closeDialog();
+            }}
+          >
+            Cancel
+          </Button>
+          <Button onClick={handleClick} loading={loading}>
+            Proceed
+          </Button>
+        </div>
+      </div>
+    </Box>
+  );
+}

dashboard/src/features/database/settings/components/DatabaseMigrateVersionConfirmationDialog/index.ts

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

dashboard/src/features/database/settings/components/DatabaseServiceVersionSettings/DatabaseServiceVersionSettings.tsx

@@ -5,28 +5,46 @@ import { ControlledAutocomplete } from '@/components/form/ControlledAutocomplete
 import { Form } from '@/components/form/Form';
 import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { RepeatIcon } from '@/components/ui/v2/icons/RepeatIcon';
+import { useGetPostgresVersion } from '@/features/database/common/hooks/useGetPostgresVersion';
+import { useIsDatabaseMigrating } from '@/features/database/common/hooks/useIsDatabaseMigrating';
+import { DatabaseMigrateDisabledError } from '@/features/database/settings/components/DatabaseMigrateDisabledError';
+import { DatabaseMigrateDowntimeWarning } from '@/features/database/settings/components/DatabaseMigrateDowntimeWarning';
+import { DatabaseMigrateLogsModal } from '@/features/database/settings/components/DatabaseMigrateLogsModal';
+import { DatabaseMigrateVersionConfirmationDialog } from '@/features/database/settings/components/DatabaseMigrateVersionConfirmationDialog';
+import { DatabaseUpdateInProgressWarning } from '@/features/database/settings/components/DatabaseUpdateInProgressWarning';
+import { useAppState } from '@/features/projects/common/hooks/useAppState';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
 import {
   GetPostgresSettingsDocument,
+  GetWorkspaceAndProjectDocument,
   Software_Type_Enum,
-  useGetPostgresSettingsQuery,
   useGetSoftwareVersionsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
 import { useLocalMimirClient } from '@/hooks/useLocalMimirClient';
+import { ApplicationStatus } from '@/types/application';
 import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
 const validationSchema = Yup.object({
-  version: Yup.object({
+  majorVersion: Yup.object({
     label: Yup.string().required(),
-    value: Yup.string().required(),
+    value: Yup.string().required('Major version is a required field'),
   })
-    .label('Postgres Version')
+    .label('Postgres major version')
+    .required(),
+  minorVersion: Yup.object({
+    label: Yup.string().required(),
+    value: Yup.string().required('Minor version is a required field'),
+  })
+    .label('Postgres minor version')
     .required(),
 });
 
@@ -34,21 +52,31 @@ export type DatabaseServiceVersionFormValues = Yup.InferType<
   typeof validationSchema
 >;
 
+type DatabaseServiceField = Required<
+  Yup.InferType<typeof validationSchema>['majorVersion']
+>;
+
 export default function DatabaseServiceVersionSettings() {
   const isPlatform = useIsPlatform();
-  const { openDialog } = useDialog();
+  const { openDialog, closeDialog } = useDialog();
   const { maintenanceActive } = useUI();
   const localMimirClient = useLocalMimirClient();
   const { currentProject } = useCurrentWorkspaceAndProject();
   const [updateConfig] = useUpdateConfigMutation({
-    refetchQueries: [GetPostgresSettingsDocument],
+    refetchQueries: [
+      GetPostgresSettingsDocument,
+      GetWorkspaceAndProjectDocument,
+    ],
     ...(!isPlatform ? { client: localMimirClient } : {}),
   });
 
-  const { data, loading, error } = useGetPostgresSettingsQuery({
-    variables: { appId: currentProject?.id },
-    ...(!isPlatform ? { client: localMimirClient } : {}),
-  });
+  const {
+    version: postgresVersion,
+    postgresMajor: currentPostgresMajor,
+    postgresMinor: currentPostgresMinor,
+    error: postgresSettingsError,
+    loading: loadingPostgresSettings,
+  } = useGetPostgresVersion();
 
   const { data: databaseVersionsData } = useGetSoftwareVersionsQuery({
     variables: {
@@ -57,14 +85,11 @@ export default function DatabaseServiceVersionSettings() {
     skip: !isPlatform,
   });
 
-  const { version } = data?.config?.postgres || {};
-
   const databaseVersions = databaseVersionsData?.softwareVersions || [];
   const availableVersions = Array.from(
-    new Set(databaseVersions.map((el) => el.version)).add(version),
+    new Set(databaseVersions.map((el) => el.version)).add(postgresVersion),
   )
     .sort()
-    .reverse()
     .map((availableVersion) => ({
       label: availableVersion,
       value: availableVersion,
@@ -72,46 +97,140 @@ export default function DatabaseServiceVersionSettings() {
 
   const form = useForm<DatabaseServiceVersionFormValues>({
     reValidateMode: 'onSubmit',
-    defaultValues: { version: { label: '', value: '' } },
+    defaultValues: {
+      minorVersion: { label: '', value: '' },
+      majorVersion: { label: '', value: '' },
+    },
     resolver: yupResolver(validationSchema),
   });
 
+  const { formState, watch } = form;
+
+  const selectedMajor = watch('majorVersion').value;
+  const selectedMinor = watch('minorVersion').value;
+
+  const getMajorAndMinorVersions = (): {
+    availableMajorVersions: DatabaseServiceField[];
+    majorToMinorVersions: Record<string, DatabaseServiceField[]>;
+  } => {
+    const majorToMinorVersions = {};
+    const availableMajorVersions = [];
+    availableVersions.forEach((availableVersion) => {
+      if (!availableVersion.value) {
+        return;
+      }
+      const [major, minor] = availableVersion.value.split('.');
+
+      // Don't suggest versions that are lower than the current Postgres major version (can't downgrade)
+      if (Number(major) < Number(currentPostgresMajor)) {
+        return;
+      }
+
+      if (availableMajorVersions.every((item) => item.value !== major)) {
+        availableMajorVersions.push({
+          label: major,
+          value: major,
+        });
+      }
+
+      if (!majorToMinorVersions[major]) {
+        majorToMinorVersions[major] = [];
+      }
+
+      majorToMinorVersions[major].push({
+        label: minor,
+        value: minor,
+      });
+    });
+    return {
+      availableMajorVersions,
+      majorToMinorVersions,
+    };
+  };
+
+  const { availableMajorVersions, majorToMinorVersions } = useMemo(
+    getMajorAndMinorVersions,
+    [availableVersions, currentPostgresMajor],
+  );
+  const availableMinorVersions = majorToMinorVersions[selectedMajor] || [];
+
   useEffect(() => {
-    if (!loading && version) {
+    if (
+      !loadingPostgresSettings &&
+      currentPostgresMajor &&
+      currentPostgresMinor
+    ) {
       form.reset({
-        version: {
-          label: version,
-          value: version,
+        majorVersion: {
+          label: currentPostgresMajor,
+          value: currentPostgresMajor,
+        },
+        minorVersion: {
+          label: currentPostgresMinor,
+          value: currentPostgresMinor,
         },
       });
     }
-  }, [loading, version, form]);
+  }, [
+    loadingPostgresSettings,
+    currentPostgresMajor,
+    currentPostgresMinor,
+    form,
+  ]);
 
-  if (loading) {
-    return (
-      <ActivityIndicator
-        delay={1000}
-        label="Loading Postgres version..."
-        className="justify-center"
-      />
-    );
-  }
+  const { isMigrating, shouldShowUpgradeLogs } = useIsDatabaseMigrating({
+    shouldPoll: true,
+  });
 
-  if (error) {
-    throw error;
-  }
+  const showMigrateWarning =
+    Number(selectedMajor) > Number(currentPostgresMajor);
 
-  const { formState } = form;
+  const { state } = useAppState();
+  const applicationUpdating =
+    state === ApplicationStatus.Updating ||
+    state === ApplicationStatus.Migrating;
+  const applicationUnhealthy =
+    state !== ApplicationStatus.Live && !applicationUpdating;
+  const isMajorVersionDirty = formState?.dirtyFields?.majorVersion;
+  const isMinorVersionDirty = formState?.dirtyFields?.minorVersion;
+  const isDirty = isMajorVersionDirty || isMinorVersionDirty;
+  const versionFieldsDisabled =
+    applicationUpdating || applicationUnhealthy || maintenanceActive;
+  const saveDisabled = versionFieldsDisabled || !isDirty;
 
   const handleDatabaseServiceVersionsChange = async (
     formValues: DatabaseServiceVersionFormValues,
   ) => {
+    const newVersion = `${formValues.majorVersion.value}.${formValues.minorVersion.value}`;
+
+    // Major version change
+    if (isMajorVersionDirty) {
+      openDialog({
+        title: 'Update Postgres MAJOR version',
+        component: (
+          <DatabaseMigrateVersionConfirmationDialog
+            postgresVersion={newVersion}
+            onCancel={() => {}}
+            onProceed={() => {}}
+          />
+        ),
+        props: {
+          PaperProps: {
+            className: 'max-w-2xl',
+          },
+        },
+      });
+
+      return;
+    }
+
+    // Minor version change
     const updateConfigPromise = updateConfig({
       variables: {
         appId: currentProject.id,
         config: {
           postgres: {
-            version: formValues.version.value,
+            version: newVersion,
           },
         },
       },
@@ -143,6 +262,33 @@ export default function DatabaseServiceVersionSettings() {
     );
   };
 
+  const openLatestUpgradeLogsModal = async () => {
+    openDialog({
+      component: <DatabaseMigrateLogsModal />,
+      props: {
+        PaperProps: { className: 'p-0 max-w-2xl w-full' },
+        titleProps: {
+          onClose: closeDialog,
+        },
+      },
+      title: 'Postgres upgrade logs',
+    });
+  };
+
+  if (loadingPostgresSettings) {
+    return (
+      <ActivityIndicator
+        delay={1000}
+        label="Loading Postgres version..."
+        className="justify-center"
+      />
+    );
+  }
+
+  if (postgresSettingsError) {
+    throw postgresSettingsError;
+  }
+
   return (
     <FormProvider {...form}>
       <Form onSubmit={handleDatabaseServiceVersionsChange}>
@@ -151,54 +297,144 @@ export default function DatabaseServiceVersionSettings() {
           description="The version of Postgres to use."
           slotProps={{
             submitButton: {
-              disabled: !formState.isDirty || maintenanceActive,
+              disabled: saveDisabled,
               loading: formState.isSubmitting,
             },
           }}
           docsLink="https://hub.docker.com/r/nhost/postgres/tags"
           docsTitle="the latest releases"
-          className="grid grid-flow-row px-4 gap-x-4 gap-y-2 lg:grid-cols-5"
+          className="flex flex-col"
+          topRightElement={
+            shouldShowUpgradeLogs ? (
+              <Button
+                variant="outlined"
+                color="primary"
+                size="medium"
+                className="self-center"
+                onClick={openLatestUpgradeLogsModal}
+                startIcon={<RepeatIcon className="h-4 w-4" />}
+              >
+                View latest upgrade logs
+              </Button>
+            ) : null
+          }
         >
-          <ControlledAutocomplete
-            id="version"
-            name="version"
-            autoHighlight
-            freeSolo
-            getOptionLabel={(option) => {
-              if (typeof option === 'string') {
-                return option || '';
-              }
-
-              return option.value;
-            }}
-            isOptionEqualToValue={() => false}
-            filterOptions={(options, { inputValue }) => {
-              const inputValueLower = inputValue.toLowerCase();
-              const matched = [];
-              const otherOptions = [];
-
-              options.forEach((option) => {
-                const optionLabelLower = option.label.toLowerCase();
-
-                if (optionLabelLower.startsWith(inputValueLower)) {
-                  matched.push(option);
-                } else {
-                  otherOptions.push(option);
+          <Box className="grid grid-flow-row gap-x-4 gap-y-2 lg:grid-cols-5">
+            <ControlledAutocomplete
+              id="majorVersion"
+              name="majorVersion"
+              autoHighlight
+              freeSolo
+              disabled={versionFieldsDisabled}
+              getOptionLabel={(option) => {
+                if (typeof option === 'string') {
+                  return option || '';
                 }
-              });
 
-              const result = [...matched, ...otherOptions];
+                return option.value;
+              }}
+              showCustomOption="auto"
+              isOptionEqualToValue={() => false}
+              filterOptions={(options, { inputValue }) => {
+                const inputValueLower = inputValue.toLowerCase();
+                const matched = [];
+                const otherOptions = [];
 
-              return result;
-            }}
-            fullWidth
-            className="lg:col-span-2"
-            options={availableVersions}
-            error={!!formState.errors?.version?.message}
-            helperText={formState.errors?.version?.message}
-            showCustomOption="auto"
-            customOptionLabel={(value) => `Use custom value: "${value}"`}
-          />
+                options.forEach((option) => {
+                  const optionLabelLower = option.label.toLowerCase();
+
+                  if (optionLabelLower.startsWith(inputValueLower)) {
+                    matched.push(option);
+                  } else {
+                    otherOptions.push(option);
+                  }
+                });
+
+                const result = [...matched, ...otherOptions];
+
+                return result;
+              }}
+              onChange={(_event, value) => {
+                if (typeof value !== 'string' && !Array.isArray(value)) {
+                  if (value.value !== selectedMajor) {
+                    const nextAvailableMinorVersions =
+                      majorToMinorVersions[value.value] || [];
+
+                    const isSelectedMinorAvailable =
+                      nextAvailableMinorVersions.some(
+                        (minor) => minor.value === selectedMinor,
+                      );
+
+                    // If the selected minor version is not available in the new major version, select the first available minor version
+                    if (
+                      !isSelectedMinorAvailable &&
+                      nextAvailableMinorVersions.length > 0
+                    ) {
+                      form.setValue(
+                        'minorVersion',
+                        nextAvailableMinorVersions[0],
+                      );
+                    }
+                  }
+                  form.setValue('majorVersion', value);
+                }
+              }}
+              fullWidth
+              className="lg:col-span-1"
+              label="MAJOR"
+              options={availableMajorVersions}
+              error={!!formState.errors?.majorVersion?.value?.message}
+              helperText={formState.errors?.majorVersion?.value?.message}
+              customOptionLabel={(value) => `Use custom value: "${value}"`}
+            />
+            <ControlledAutocomplete
+              id="minorVersion"
+              name="minorVersion"
+              autoHighlight
+              freeSolo
+              disabled={versionFieldsDisabled}
+              getOptionLabel={(option) => {
+                if (typeof option === 'string') {
+                  return option || '';
+                }
+
+                return option.value;
+              }}
+              isOptionEqualToValue={() => false}
+              filterOptions={(options, { inputValue }) => {
+                const inputValueLower = inputValue.toLowerCase();
+                const matched = [];
+                const otherOptions = [];
+
+                options.forEach((option) => {
+                  const optionLabelLower = option.label.toLowerCase();
+
+                  if (optionLabelLower.startsWith(inputValueLower)) {
+                    matched.push(option);
+                  } else {
+                    otherOptions.push(option);
+                  }
+                });
+
+                const result = [...matched, ...otherOptions];
+
+                return result;
+              }}
+              fullWidth
+              className="lg:col-span-2"
+              label="MINOR"
+              options={availableMinorVersions}
+              error={!!formState.errors?.minorVersion?.value?.message}
+              helperText={formState.errors?.minorVersion?.value?.message}
+              showCustomOption="auto"
+              customOptionLabel={(value) => `Use custom value: "${value}"`}
+            />
+          </Box>
+          {showMigrateWarning && <DatabaseMigrateDowntimeWarning />}
+          {applicationUpdating && <DatabaseUpdateInProgressWarning />}
+          {applicationUnhealthy && !isMigrating && (
+            <DatabaseMigrateDisabledError />
+          )}
         </SettingsContainer>
       </Form>
     </FormProvider>

dashboard/src/features/database/settings/components/DatabaseUpdateInProgressWarning/DatabaseUpdateInProgressWarning.tsx

@@ -0,0 +1,14 @@
+import { Alert } from '@/components/ui/v2/Alert';
+import { ClockIcon } from '@/components/ui/v2/icons/ClockIcon';
+import { Text } from '@/components/ui/v2/Text';
+
+export default function DatabaseMigrateWarning() {
+  return (
+    <Alert severity="warning" className="flex flex-col gap-3 text-left">
+      <Text className="flex items-center gap-1 font-semibold">
+        <ClockIcon className="h-4 w-4" /> An update is in progress
+      </Text>
+      <Text>You can edit the version only after the update is complete.</Text>
+    </Alert>
+  );
+}

dashboard/src/features/database/settings/components/DatabaseUpdateInProgressWarning/index.ts

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

dashboard/src/features/database/settings/gql/getPostgresSettings.gql

@@ -13,6 +13,7 @@ query GetPostgresSettings($appId: uuid!) {
         storage {
           capacity
         }
+        enablePublicAccess
       }
     }
   }

dashboard/src/features/projects/common/components/Announcements/Announcements.tsx

@@ -5,7 +5,9 @@ import { useGetAnnouncementsQuery } from '@/utils/__generated__/graphql';
 import formatDistance from 'date-fns/formatDistance';
 
 export default function Announcements() {
-  const { data, loading, error } = useGetAnnouncementsQuery();
+  const { data, loading, error } = useGetAnnouncementsQuery({
+    fetchPolicy: 'cache-first',
+  });
 
   const announcements = data?.announcements || [];
 

dashboard/src/features/projects/common/components/ApplicationLive/ApplicationLive.tsx

@@ -7,6 +7,7 @@ import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
 import { OverviewDeployments } from '@/features/projects/overview/components/OverviewDeployments';
 import { OverviewDocumentation } from '@/features/projects/overview/components/OverviewDocumentation';
 import { OverviewMetrics } from '@/features/projects/overview/components/OverviewMetrics';
+import { OverviewProjectHealth } from '@/features/projects/overview/components/OverviewProjectHealth';
 import { OverviewProjectInfo } from '@/features/projects/overview/components/OverviewProjectInfo';
 import { OverviewRepository } from '@/features/projects/overview/components/OverviewRepository';
 import { OverviewTopBar } from '@/features/projects/overview/components/OverviewTopBar';
@@ -92,6 +93,8 @@ export default function ApplicationLive({
         </div>
 
         <div className="grid grid-flow-row content-start gap-8 lg:col-span-1 lg:gap-12">
+          <OverviewProjectHealth />
+          <Divider />
           <OverviewProjectInfo />
           <Divider />
           <OverviewRepository />

dashboard/src/features/projects/common/components/ApplicationLockedReason/ApplicationLockedReason.tsx

@@ -0,0 +1,40 @@
+import { Alert } from '@/components/ui/v2/Alert';
+import { Box } from '@/components/ui/v2/Box';
+import { Text } from '@/components/ui/v2/Text';
+import Link from 'next/link';
+
+interface ApplicationLockedReasonProps {
+  reason?: string;
+}
+
+export default function ApplicationLockedReason({
+  reason,
+}: ApplicationLockedReasonProps) {
+  return (
+    <Alert severity="warning" className="mx-auto max-w-xs gap-2 p-6 ">
+      <Text className="pb-4 text-left">
+        Your project has been temporarily locked due to the following reason:
+      </Text>
+      <Box
+        className="rounded-md p-2"
+        sx={{
+          backgroundColor: 'beige.main',
+        }}
+      >
+        <Text className="px-2 py-1 font-semibold">{reason}</Text>
+      </Box>
+      <Text className="pt-4 text-left">
+        Please{' '}
+        <Link
+          className="font-semibold underline underline-offset-2"
+          href="/support"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          contact our support
+        </Link>{' '}
+        team for assistance.
+      </Text>
+    </Alert>
+  );
+}

dashboard/src/features/projects/common/components/ApplicationLockedReason/index.ts

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

dashboard/src/features/projects/common/components/ApplicationPaused/ApplicationPaused.tsx

@@ -2,25 +2,24 @@ import { useDialog } from '@/components/common/DialogProvider';
 import { Container } from '@/components/layout/Container';
 import { Modal } from '@/components/ui/v1/Modal';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
-import { Alert } from '@/components/ui/v2/Alert';
 import { Box } from '@/components/ui/v2/Box';
 import { Button } from '@/components/ui/v2/Button';
 import { Text } from '@/components/ui/v2/Text';
 import { ApplicationInfo } from '@/features/projects/common/components/ApplicationInfo';
+import { ApplicationLockedReason } from '@/features/projects/common/components/ApplicationLockedReason';
+import { ApplicationPausedReason } from '@/features/projects/common/components/ApplicationPausedReason';
+import { ApplicationPausedSymbol } from '@/features/projects/common/components/ApplicationPausedSymbol';
 import { ChangePlanModal } from '@/features/projects/common/components/ChangePlanModal';
 import { RemoveApplicationModal } from '@/features/projects/common/components/RemoveApplicationModal';
 import { StagingMetadata } from '@/features/projects/common/components/StagingMetadata';
+import { useAppPausedReason } from '@/features/projects/common/hooks/useAppPausedReason';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import { useIsCurrentUserOwner } from '@/features/projects/common/hooks/useIsCurrentUserOwner';
 import {
   GetAllWorkspacesAndProjectsDocument,
-  useGetFreeAndActiveProjectsQuery,
   useUnpauseApplicationMutation,
 } from '@/generated/graphql';
-import { MAX_FREE_PROJECTS } from '@/utils/constants/common';
 import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
-import { useUserData } from '@nhost/nextjs';
-import Image from 'next/image';
 import { useState } from 'react';
 
 export default function ApplicationPaused() {
@@ -28,7 +27,6 @@ export default function ApplicationPaused() {
   const { currentProject, refetch: refetchWorkspaceAndProject } =
     useCurrentWorkspaceAndProject();
   const isOwner = useIsCurrentUserOwner();
-  const user = useUserData();
 
   const [showDeletingModal, setShowDeletingModal] = useState(false);
   const [unpauseApplication, { loading: changingApplicationStateLoading }] =
@@ -36,13 +34,8 @@ export default function ApplicationPaused() {
       refetchQueries: [{ query: GetAllWorkspacesAndProjectsDocument }],
     });
 
-  const { data, loading } = useGetFreeAndActiveProjectsQuery({
-    variables: { userId: user?.id },
-    skip: !user,
-  });
-
-  const numberOfFreeAndLiveProjects = data?.freeAndActiveProjects.length || 0;
-  const wakeUpDisabled = numberOfFreeAndLiveProjects >= MAX_FREE_PROJECTS;
+  const { isLocked, lockedReason, freeAndLiveProjectsNumberExceeded, loading } =
+    useAppPausedReason();
 
   async function handleTriggerUnpausing() {
     await execPromiseWithErrorToast(
@@ -77,75 +70,67 @@ export default function ApplicationPaused() {
         />
       </Modal>
 
-      <Container className="mx-auto mt-20 grid max-w-lg grid-flow-row gap-4 text-center">
+      <Container className="mx-auto mt-20 grid max-w-lg grid-flow-row gap-6 text-center">
         <div className="mx-auto flex w-centImage flex-col text-center">
-          <Image
-            src="/assets/PausedApp.svg"
-            alt="Closed Eye"
-            width={72}
-            height={72}
-          />
+          <ApplicationPausedSymbol isLocked={isLocked} />
         </div>
 
-        <Box className="grid grid-flow-row gap-1">
+        <Box className="grid grid-flow-row gap-6">
           <Text variant="h3" component="h1">
-            {currentProject.name} is sleeping
+            {currentProject.name} is {isLocked ? 'locked' : 'paused'}
           </Text>
+          {isLocked ? (
+            <ApplicationLockedReason reason={lockedReason} />
+          ) : (
+            <>
+              <ApplicationPausedReason
+                freeAndLiveProjectsNumberExceeded={
+                  freeAndLiveProjectsNumberExceeded
+                }
+              />
+              <div className="grid grid-flow-row gap-4">
+                {isOwner && (
+                  <Button
+                    className="mx-auto w-full max-w-xs"
+                    onClick={() => {
+                      openDialog({
+                        component: <ChangePlanModal />,
+                        props: {
+                          PaperProps: { className: 'p-0' },
+                          maxWidth: 'lg',
+                        },
+                      });
+                    }}
+                  >
+                    Upgrade to Pro
+                  </Button>
+                )}
+                <Button
+                  variant="borderless"
+                  className="mx-auto w-full max-w-xs"
+                  loading={changingApplicationStateLoading}
+                  disabled={
+                    changingApplicationStateLoading ||
+                    freeAndLiveProjectsNumberExceeded
+                  }
+                  onClick={handleTriggerUnpausing}
+                >
+                  Wake Up
+                </Button>
 
-          <Text>
-            Starter projects stop responding to API calls after 7 days of
-            inactivity. Upgrade to Pro to avoid autosleep.
-          </Text>
-        </Box>
-
-        <Box className="grid grid-flow-row gap-2">
-          {isOwner && (
-            <Button
-              className="mx-auto w-full max-w-[280px]"
-              onClick={() => {
-                openDialog({
-                  component: <ChangePlanModal />,
-                  props: {
-                    PaperProps: { className: 'p-0' },
-                    maxWidth: 'lg',
-                  },
-                });
-              }}
-            >
-              Upgrade to Pro
-            </Button>
+                {isOwner && (
+                  <Button
+                    color="error"
+                    variant="outlined"
+                    className="mx-auto w-full max-w-xs"
+                    onClick={() => setShowDeletingModal(true)}
+                  >
+                    Delete Project
+                  </Button>
+                )}
+              </div>
+            </>
           )}
-
-          <div className="grid grid-flow-row gap-2">
-            <Button
-              variant="borderless"
-              className="mx-auto w-full max-w-[280px]"
-              loading={changingApplicationStateLoading}
-              disabled={changingApplicationStateLoading || wakeUpDisabled}
-              onClick={handleTriggerUnpausing}
-            >
-              Wake Up
-            </Button>
-
-            {wakeUpDisabled && (
-              <Alert severity="warning" className="mx-auto max-w-xs text-left">
-                Note: Only one free project can be active at any given time.
-                Please pause your active free project before unpausing{' '}
-                {currentProject.name}.
-              </Alert>
-            )}
-
-            {isOwner && (
-              <Button
-                color="error"
-                variant="borderless"
-                className="mx-auto w-full max-w-[280px]"
-                onClick={() => setShowDeletingModal(true)}
-              >
-                Delete Project
-              </Button>
-            )}
-          </div>
         </Box>
 
         <StagingMetadata>

dashboard/src/features/projects/common/components/ApplicationPausedReason/ApplicationPausedReason.tsx

@@ -0,0 +1,31 @@
+import { Alert } from '@/components/ui/v2/Alert';
+import { Text } from '@/components/ui/v2/Text';
+
+interface ApplicationPausedReasonProps {
+  freeAndLiveProjectsNumberExceeded?: boolean;
+}
+
+export default function ApplicationPausedReason({
+  freeAndLiveProjectsNumberExceeded,
+}: ApplicationPausedReasonProps) {
+  return (
+    <Alert
+      severity="warning"
+      className="mx-auto flex max-w-xs flex-col gap-4 p-6 text-left"
+    >
+      <Text>
+        Starter projects will stop responding to API calls after 7 days of
+        inactivity, so consider
+        <span className="font-semibold"> upgrading to Pro </span>to avoid
+        auto-sleep.
+      </Text>
+      {freeAndLiveProjectsNumberExceeded && (
+        <Text>
+          Additionally, only 1 free project can be active at any given time, so
+          please pause your current active free project before unpausing
+          another.
+        </Text>
+      )}
+    </Alert>
+  );
+}

dashboard/src/features/projects/common/components/ApplicationPausedReason/index.ts

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

dashboard/src/features/projects/common/components/ApplicationPausedSymbol/ApplicationPausedSymbol.tsx

@@ -0,0 +1,23 @@
+import Image from 'next/image';
+
+export default function ApplicationPausedSymbol({
+  isLocked,
+}: {
+  isLocked?: boolean;
+}) {
+  if (isLocked) {
+    return (
+      <Image src="/assets/LockedApp.svg" alt="Lock" width={72} height={72} />
+    );
+  }
+
+  // paused
+  return (
+    <Image
+      src="/assets/PausedApp.svg"
+      alt="Closed Eye"
+      width={72}
+      height={72}
+    />
+  );
+}

dashboard/src/features/projects/common/components/ApplicationPausedSymbol/index.ts

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

dashboard/src/features/projects/common/components/ChangePlanModal/ChangePlanModal.tsx

@@ -2,8 +2,8 @@ import { useDialog } from '@/components/common/DialogProvider';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { Box } from '@/components/ui/v2/Box';
 import { Button } from '@/components/ui/v2/Button';
-import { Checkbox } from '@/components/ui/v2/Checkbox';
 import { BaseDialog } from '@/components/ui/v2/Dialog';
+import { Radio } from '@/components/ui/v2/Radio';
 import { Text } from '@/components/ui/v2/Text';
 import { useAppState } from '@/features/projects/common/hooks/useAppState';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
@@ -31,7 +31,7 @@ function Plan({ planName, price, setPlan, planId, selectedPlanId }: any) {
     >
       <div className="grid grid-flow-row gap-y-0.5">
         <div className="grid grid-flow-col items-center justify-start gap-2">
-          <Checkbox
+          <Radio
             onChange={setPlan}
             checked={selectedPlanId === planId}
             aria-label={planName}
@@ -241,7 +241,21 @@ export function ChangePlanModalWithData({ app, plans, close }: any) {
             ))}
         </div>
 
-        <div className="mt-2 grid grid-flow-row gap-2">
+        <div className="mt-0">
+          <Text variant="subtitle2" className="w-full px-1">
+            For a complete list of features, visit our{' '}
+            <a
+              href="https://nhost.io/pricing"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline"
+            >
+              pricing page
+            </a>
+          </Text>
+        </div>
+
+        <div className="mt-6 grid grid-flow-row gap-2">
           <Button
             onClick={handleChangePlanClick}
             disabled={!selectedPlan}

dashboard/src/features/projects/common/components/settings/TOMLEditor/TOMLEditor.tsx

@@ -0,0 +1,192 @@
+import { ApplyLocalSettingsDialog } from '@/components/common/ApplyLocalSettingsDialog';
+import { useDialog } from '@/components/common/DialogProvider';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { Text } from '@/components/ui/v2/Text';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
+import { useLocalMimirClient } from '@/hooks/useLocalMimirClient';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
+import {
+  useGetConfigRawJsonQuery,
+  useReplaceConfigRawJsonMutation,
+} from '@/utils/__generated__/graphql';
+import { StreamLanguage } from '@codemirror/language';
+import { toml } from '@codemirror/legacy-modes/mode/toml';
+import * as TOML from '@iarna/toml';
+import { useTheme } from '@mui/material';
+import { bbedit } from '@uiw/codemirror-theme-bbedit';
+import { githubDark } from '@uiw/codemirror-theme-github';
+import CodeMirror from '@uiw/react-codemirror';
+import { useCallback, useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
+
+export default function TOMLEditor() {
+  const theme = useTheme();
+  const isPlatform = useIsPlatform();
+
+  const [tomlCode, setTOMLCode] = useState('');
+  const [previousTOMLCode, setPreviousTOMLCode] = useState(''); // used to revert changes
+  const [isDirty, setIsDirty] = useState(false);
+  const [isSaving, setIsSaving] = useState(false); // used to show loading spinner on save
+
+  const { openDialog } = useDialog();
+
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  const localMimirClient = useLocalMimirClient();
+
+  // fetch the initial TOML code from the server
+  const { data, loading } = useGetConfigRawJsonQuery({
+    variables: {
+      appID: currentProject?.id,
+    },
+    skip: !currentProject,
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const [saveConfigMutation] = useReplaceConfigRawJsonMutation({
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const removeTOMLIndentation = (tomlStr: string) => {
+    const trimmedLines = tomlStr.split('\n').map((line) => line.trimStart());
+    return trimmedLines.join('\n');
+  };
+
+  useEffect(() => {
+    // Load TOML code from the server on initial load
+    if (!loading && data) {
+      const jsonData = JSON.parse(data?.configRawJSON);
+      const tomlStr = TOML.stringify(jsonData);
+      const unindentedTOMLConfig = removeTOMLIndentation(tomlStr);
+      setTOMLCode(unindentedTOMLConfig);
+      setPreviousTOMLCode(unindentedTOMLConfig);
+    }
+  }, [loading, data]);
+
+  const onChange = useCallback((value: string) => {
+    setTOMLCode(value);
+    setIsDirty(true);
+  }, []);
+
+  const handleRevert = () => {
+    setTOMLCode(previousTOMLCode);
+    setIsDirty(false);
+  };
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    let jsonEditedConfig;
+    try {
+      jsonEditedConfig = TOML.parse(tomlCode);
+    } catch (error) {
+      const toastStyle = getToastStyleProps();
+      const { line, col } = error;
+      let message = `An error occurred while parsing the TOML file. Please check the syntax.`;
+      if (line !== undefined && col !== undefined) {
+        message = `An error occurred while parsing the TOML file. Please check the syntax at line ${line}, column ${col}.`;
+      }
+      toast.error(message, {
+        style: toastStyle.style,
+        ...toastStyle.error,
+      });
+      setIsSaving(false);
+      return;
+    }
+    const rawJSONString = JSON.stringify(jsonEditedConfig);
+
+    await execPromiseWithErrorToast(
+      async () => {
+        const {
+          data: { replaceConfigRawJSON: updatedConfig },
+        } = await saveConfigMutation({
+          variables: {
+            appID: currentProject?.id,
+            rawJSON: rawJSONString,
+          },
+        });
+
+        if (updatedConfig) {
+          const jsonUpdatedConfig = JSON.parse(updatedConfig);
+          const updatedTOMLConfig = TOML.stringify(jsonUpdatedConfig);
+          const unindentedTOMLConfig = removeTOMLIndentation(updatedTOMLConfig);
+          setTOMLCode(unindentedTOMLConfig);
+          setPreviousTOMLCode(unindentedTOMLConfig);
+        }
+
+        if (!isPlatform) {
+          openDialog({
+            title: 'Apply your changes',
+            component: <ApplyLocalSettingsDialog />,
+            props: {
+              PaperProps: {
+                className: 'max-w-2xl',
+              },
+            },
+          });
+        }
+        setIsDirty(false);
+        setIsSaving(false);
+      },
+      {
+        loadingMessage: 'Saving configuration...',
+        successMessage: 'Configuration has been saved successfully.',
+        errorMessage:
+          'An error occurred while saving configuration. Please try again.',
+        onError: () => {
+          setIsSaving(false);
+        },
+      },
+    );
+  };
+
+  return (
+    <>
+      <Box className="flex w-full flex-col space-y-2 border-b p-4">
+        <Text className="font-semibold">Configuration Editor</Text>
+      </Box>
+      <Box className="h-full overflow-auto">
+        {loading ? (
+          <Box
+            className="h-full w-full animate-pulse"
+            sx={{ backgroundColor: 'grey.200' }}
+          />
+        ) : (
+          <CodeMirror
+            value={tomlCode}
+            height="100%"
+            width="100%"
+            theme={theme.palette.mode === 'light' ? bbedit : githubDark}
+            basicSetup={{
+              searchKeymap: false,
+            }}
+            extensions={[StreamLanguage.define(toml)]}
+            onChange={onChange}
+          />
+        )}
+      </Box>
+      <Box className="grid w-full grid-flow-col justify-end gap-3 place-self-end border-t-1 px-4 py-3 md:justify-between">
+        <Button
+          variant="outlined"
+          disabled={loading || !isDirty}
+          onClick={handleRevert}
+          color="secondary"
+        >
+          Revert changes
+        </Button>
+
+        <Button
+          type="submit"
+          disabled={loading || !isDirty}
+          loading={isSaving}
+          className="justify-self-end"
+          onClick={handleSave}
+        >
+          Save
+        </Button>
+      </Box>
+    </>
+  );
+}

dashboard/src/features/projects/common/components/settings/TOMLEditor/index.ts

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

dashboard/src/features/projects/common/hooks/useAppPausedReason/index.ts

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

dashboard/src/features/projects/common/hooks/useAppPausedReason/useAppPausedReason.ts

@@ -0,0 +1,45 @@
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { MAX_FREE_PROJECTS } from '@/utils/constants/common';
+import {
+  useGetFreeAndActiveProjectsQuery,
+  useGetProjectIsLockedQuery,
+} from '@/utils/__generated__/graphql';
+import { useUserData } from '@nhost/nextjs';
+
+/**
+ * This hook returns the reason why the application is paused.
+ * It returns the locked reason and if the user has exceeded the number of free and live projects.
+ */
+
+export default function useAppPausedReason(): {
+  isLocked: boolean;
+  lockedReason: string | undefined;
+  freeAndLiveProjectsNumberExceeded: boolean;
+  loading: boolean;
+} {
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const user = useUserData();
+  const { data, loading } = useGetFreeAndActiveProjectsQuery({
+    variables: { userId: user?.id },
+    skip: !user,
+  });
+
+  const { data: isLockedData } = useGetProjectIsLockedQuery({
+    variables: { appId: currentProject.id },
+    skip: !currentProject,
+  });
+
+  const isLocked = isLockedData?.app?.isLocked;
+  const lockedReason = isLockedData?.app?.isLockedReason;
+
+  const numberOfFreeAndLiveProjects = data?.freeAndActiveProjects.length || 0;
+  const freeAndLiveProjectsNumberExceeded =
+    numberOfFreeAndLiveProjects >= MAX_FREE_PROJECTS;
+
+  return {
+    isLocked,
+    lockedReason,
+    freeAndLiveProjectsNumberExceeded,
+    loading,
+  };
+}

dashboard/src/features/projects/common/hooks/useCurrentWorkspaceAndProject/useCurrentWorkspaceAndProject.ts

@@ -108,7 +108,7 @@ export default function useCurrentWorkspaceAndProject(): UseCurrentWorkspaceAndP
         id: null,
         countryCode: null,
         city: null,
-        awsName: null,
+        name: null,
         domain: null,
       },
       createdAt: new Date().toISOString(),

dashboard/src/features/projects/common/hooks/useNavigationVisible/useNavigationVisible.ts

@@ -38,6 +38,13 @@ export default function useNavigationVisible() {
     return false;
   }
 
+  if (
+    state === ApplicationStatus.Migrating &&
+    currentProject.desiredState === ApplicationStatus.Live
+  ) {
+    return true;
+  }
+
   if (
     state === ApplicationStatus.Live ||
     state === ApplicationStatus.Updating

dashboard/src/features/projects/common/hooks/useServiceStatus/index.ts

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

dashboard/src/features/projects/common/hooks/useServiceStatus/useServiceStatus.ts

@@ -0,0 +1,72 @@
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
+import type { ServiceHealthInfo } from '@/features/projects/overview/health';
+import {
+  useGetProjectServicesHealthQuery,
+  type GetProjectServicesHealthQuery,
+  type GetProjectServicesHealthQueryVariables,
+} from '@/utils/__generated__/graphql';
+import type { QueryHookOptions } from '@apollo/client';
+import { useVisibilityChange } from '@uidotdev/usehooks';
+import { useEffect } from 'react';
+
+export interface UseServiceStatusOptions
+  extends QueryHookOptions<
+    GetProjectServicesHealthQuery,
+    GetProjectServicesHealthQueryVariables
+  > {
+  shouldPoll?: boolean;
+}
+
+export default function useServiceStatus(
+  options: UseServiceStatusOptions = {},
+) {
+  const isPlatform = useIsPlatform();
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  const isVisible = useVisibilityChange();
+
+  const { data, loading, refetch, startPolling, stopPolling } =
+    useGetProjectServicesHealthQuery({
+      ...options,
+      variables: { ...options.variables, appId: currentProject?.id },
+      skip: !isPlatform || !currentProject,
+      skipPollAttempt: () => !isVisible,
+    });
+
+  // Fetch when mounted
+  useEffect(() => {
+    refetch();
+  }, [refetch]);
+
+  useEffect(() => {
+    if (options.shouldPoll) {
+      startPolling(options.pollInterval || 10000);
+    }
+
+    return () => stopPolling();
+  }, [stopPolling, startPolling, options.shouldPoll, options.pollInterval]);
+
+  const serviceMap: { [key: string]: ServiceHealthInfo | undefined } = {};
+  data?.getProjectStatus?.services.forEach((service) => {
+    serviceMap[service.name] = service;
+  });
+  const {
+    'hasura-auth': auth,
+    'hasura-storage': storage,
+    postgres,
+    hasura,
+    ai,
+    ...run
+  } = serviceMap;
+
+  return {
+    loading,
+    auth,
+    storage,
+    postgres,
+    hasura,
+    ai,
+    run,
+  };
+}

dashboard/src/features/projects/common/hooks/useSoftwareVersionsInfo/index.ts

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

dashboard/src/features/projects/common/hooks/useSoftwareVersionsInfo/useSoftwareVersionsInfo.ts

@@ -0,0 +1,156 @@
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
+import {
+  Software_Type_Enum,
+  useGetConfiguredVersionsQuery,
+  useGetRecommendedSoftwareVersionsQuery,
+  type GetConfiguredVersionsQuery,
+  type GetConfiguredVersionsQueryVariables,
+} from '@/utils/__generated__/graphql';
+import type { QueryHookOptions } from '@apollo/client';
+import { useVisibilityChange } from '@uidotdev/usehooks';
+import { useEffect } from 'react';
+
+export interface UseSoftwareVersionsInfoOptions
+  extends QueryHookOptions<
+    GetConfiguredVersionsQuery,
+    GetConfiguredVersionsQueryVariables
+  > {}
+
+type ServiceVersionInfo = {
+  configuredVersion: string | undefined;
+  recommendedVersions: string[];
+  isVersionMismatch: boolean;
+};
+
+export default function useSoftwareVersionsInfo(
+  options: UseSoftwareVersionsInfoOptions = {},
+): {
+  loading: boolean;
+  auth: ServiceVersionInfo;
+  storage: ServiceVersionInfo;
+  postgres: ServiceVersionInfo;
+  hasura: ServiceVersionInfo;
+  ai: ServiceVersionInfo;
+  isAIEnabled: boolean;
+} {
+  const isPlatform = useIsPlatform();
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  const isVisible = useVisibilityChange();
+
+  // Recommended software versions are not polled by default
+  const { data: recommendedVersionsData, loading: loadingRecommendedVersions } =
+    useGetRecommendedSoftwareVersionsQuery({
+      skip: !isPlatform || !currentProject,
+    });
+
+  const {
+    data: configuredVersionsData,
+    loading: loadingConfiguredVersions,
+    refetch: refetchConfiguredVersions,
+    stopPolling,
+  } = useGetConfiguredVersionsQuery({
+    ...options,
+    variables: { ...options.variables, appId: currentProject?.id },
+    skip: !isPlatform || !currentProject,
+    skipPollAttempt: () => !isVisible,
+    pollInterval: options.pollInterval || 10000,
+  });
+
+  // fetch when mounted
+  useEffect(() => {
+    refetchConfiguredVersions();
+    return () => stopPolling();
+  }, [refetchConfiguredVersions, stopPolling]);
+
+  const recommendedVersions = {
+    'hasura-auth': [],
+    'hasura-storage': [],
+    postgres: [],
+    hasura: [],
+    ai: [],
+  };
+
+  recommendedVersionsData?.softwareVersions.forEach(({ software, version }) => {
+    switch (software) {
+      case Software_Type_Enum.Auth:
+        recommendedVersions['hasura-auth'].push(version);
+        break;
+      case Software_Type_Enum.Storage:
+        recommendedVersions['hasura-storage'].push(version);
+        break;
+      case Software_Type_Enum.PostgreSql:
+        recommendedVersions.postgres.push(version);
+        break;
+      case Software_Type_Enum.Hasura:
+        recommendedVersions.hasura.push(version);
+        break;
+      case Software_Type_Enum.Graphite:
+        recommendedVersions.ai.push(version);
+        break;
+      default:
+        break;
+    }
+  });
+
+  const isVersionMismatch = (
+    service: string,
+    configuredVersion: string | undefined,
+  ) =>
+    !recommendedVersions[service].some(
+      (version) => version === configuredVersion,
+    );
+
+  // Check if configured version can't be found in recommended versions
+  const isAuthVersionMismatch = isVersionMismatch(
+    'hasura-auth',
+    configuredVersionsData?.config?.auth?.version,
+  );
+  const isStorageVersionMismatch = isVersionMismatch(
+    'hasura-storage',
+    configuredVersionsData?.config?.storage?.version,
+  );
+  const isPostgresVersionMismatch = isVersionMismatch(
+    'postgres',
+    configuredVersionsData?.config?.postgres?.version,
+  );
+  const isHasuraVersionMismatch = isVersionMismatch(
+    'hasura',
+    configuredVersionsData?.config?.hasura?.version,
+  );
+  const isAIVersionMismatch = isVersionMismatch(
+    'ai',
+    configuredVersionsData?.config?.ai?.version,
+  );
+
+  return {
+    loading: loadingConfiguredVersions || loadingRecommendedVersions,
+    auth: {
+      configuredVersion: configuredVersionsData?.config?.auth?.version,
+      recommendedVersions: recommendedVersions['hasura-auth'],
+      isVersionMismatch: isAuthVersionMismatch,
+    },
+    storage: {
+      configuredVersion: configuredVersionsData?.config?.storage?.version,
+      recommendedVersions: recommendedVersions['hasura-storage'],
+      isVersionMismatch: isStorageVersionMismatch,
+    },
+    postgres: {
+      configuredVersion: configuredVersionsData?.config?.postgres?.version,
+      recommendedVersions: recommendedVersions.postgres,
+      isVersionMismatch: isPostgresVersionMismatch,
+    },
+    hasura: {
+      configuredVersion: configuredVersionsData?.config?.hasura?.version,
+      recommendedVersions: recommendedVersions.hasura,
+      isVersionMismatch: isHasuraVersionMismatch,
+    },
+    ai: {
+      configuredVersion: configuredVersionsData?.config?.ai?.version,
+      recommendedVersions: recommendedVersions.ai,
+      isVersionMismatch: isAIVersionMismatch,
+    },
+    isAIEnabled: Boolean(configuredVersionsData?.config?.ai),
+  };
+}

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

@@ -31,7 +31,7 @@ afterEach(() => {
 
 const region: ProjectFragment['region'] = {
   id: '1',
-  awsName: 'eu-west-1',
+  name: 'eu-west-1',
   domain: 'nhost.run',
   city: 'Dublin',
   countryCode: 'IE',