chore: update versions (#2900)

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/dashboard@1.30.0

### Minor Changes

- 50441a8: feat: add ui for project autoscaler settings and run services
autoscaler settings

## @nhost/docs@2.18.0

### Minor Changes

-   c4aa159: feat: added advanced TLS document

### Patch Changes

-   91f0465: feat: added turnstile guide

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

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

.github/workflows/gen_ai_review.yaml

@@ -0,0 +1,28 @@
+---
+name: "gen: AI review"
+on:
+  pull_request:
+    types: [opened, reopened, ready_for_review]
+  issue_comment:
+jobs:
+  pr_agent_job:
+    if: ${{ github.event.sender.type != 'Bot' }}
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    permissions:
+      issues: write
+      pull-requests: write
+      contents: write
+    name: Run pr agent on every pull request, respond to user comments
+    steps:
+      - name: PR Agent action step
+        id: pragent
+        uses: Codium-ai/pr-agent@v0.24
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          OPENAI_KEY: ${{ secrets.OPENAI_API_KEY }}
+          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
+          config.max_model_tokens: 100000
+          config.model: "anthropic/claude-3-5-sonnet-20240620"
+          config.model_turbo: "anthropic/claude-3-5-sonnet-20240620"
+          ignore.glob: "['pnpm-lock.yaml','**/pnpm-lock.yaml']"

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", "path-to-regexp"]
 }

dashboard/.env.example

@@ -24,3 +24,4 @@ NEXT_PUBLIC_ZENDESK_USER_EMAIL=
 
 CODEGEN_GRAPHQL_URL=https://local.graphql.nhost.run/v1
 CODEGEN_HASURA_ADMIN_SECRET=nhost-admin-secret
+NEXT_PUBLIC_TURNSTILE_SITE_KEY=FIXME

dashboard/.npmrc

@@ -1 +1,3 @@
-link-workspace-packages = false
+link-workspace-packages = false
+auto-install-peers = false
+resolution-mode=highest

dashboard/CHANGELOG.md

@@ -1,5 +1,89 @@
 # @nhost/dashboard
 
+## 1.30.0
+
+### Minor Changes
+
+- 50441a8: feat: add ui for project autoscaler settings and run services autoscaler settings
+
+## 1.29.0
+
+### Minor Changes
+
+- 55d8bb5: feat: integrate turnstile for signup verification
+- 2a2e54c: fix: update docs url in run services form tooltip
+- 18f942f: fix: display long error messages in error toast without overflow
+
+### Patch Changes
+
+- @nhost/react-apollo@13.0.0
+- @nhost/nextjs@2.1.22
+
+## 1.28.2
+
+### Patch Changes
+
+- 52a38fe: chore: update dependencies to address security vulnerabilities
+- Updated dependencies [52a38fe]
+  - @nhost/nextjs@2.1.21
+
+## 1.28.1
+
+### Patch Changes
+
+- 9735fa2: chore: remove broken link
+
+## 1.28.0
+
+### Minor Changes
+
+- 526183a: feat: allow filtering users in "make request as" in graphql section
+- be3b85b: feat: add conceal errors toggle on auth settings page
+
+### Patch Changes
+
+- 35a2f12: fix: prevent run service details from opening when attempting to delete
+  - @nhost/react-apollo@12.0.6
+  - @nhost/nextjs@2.1.20
+
+## 1.27.0
+
+### Minor Changes
+
+- a7cd02c: fix: resolve rate limit query
+
+## 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

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/auth/ban-user.test.ts

@@ -1,6 +1,6 @@
 import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
+  PRO_TEST_PROJECT_NAME,
+  PRO_TEST_PROJECT_SLUG,
   TEST_WORKSPACE_SLUG,
 } from '@/e2e/env';
 import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
@@ -12,9 +12,9 @@ test('should be able to ban and unban a user', async ({ page }) => {
 
   await openProject({
     page,
-    projectName: TEST_PROJECT_NAME,
+    projectName: PRO_TEST_PROJECT_NAME,
     workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
+    projectSlug: PRO_TEST_PROJECT_SLUG,
   });
 
   await page
@@ -22,7 +22,9 @@ test('should be able to ban and unban a user', async ({ page }) => {
     .getByRole('link', { name: /auth/i })
     .click();
 
-  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/users`,
+  );
 
   const email = generateTestEmail();
   const password = faker.internet.password();

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

@@ -1,6 +1,6 @@
 import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
+  PRO_TEST_PROJECT_NAME,
+  PRO_TEST_PROJECT_SLUG,
   TEST_WORKSPACE_SLUG,
 } from '@/e2e/env';
 import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
@@ -19,9 +19,9 @@ test.beforeEach(async () => {
 
   await openProject({
     page,
-    projectName: TEST_PROJECT_NAME,
+    projectName: PRO_TEST_PROJECT_NAME,
     workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
+    projectSlug: PRO_TEST_PROJECT_SLUG,
   });
 
   await page
@@ -29,7 +29,9 @@ test.beforeEach(async () => {
     .getByRole('link', { name: /auth/i })
     .click();
 
-  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/users`,
+  );
 });
 
 test.afterAll(async () => {

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

@@ -1,6 +1,6 @@
 import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
+  PRO_TEST_PROJECT_NAME,
+  PRO_TEST_PROJECT_SLUG,
   TEST_WORKSPACE_SLUG,
 } from '@/e2e/env';
 import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
@@ -19,9 +19,9 @@ test.beforeEach(async () => {
 
   await openProject({
     page,
-    projectName: TEST_PROJECT_NAME,
+    projectName: PRO_TEST_PROJECT_NAME,
     workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
+    projectSlug: PRO_TEST_PROJECT_SLUG,
   });
 
   await page
@@ -29,7 +29,9 @@ test.beforeEach(async () => {
     .getByRole('link', { name: /auth/i })
     .click();
 
-  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/users`,
+  );
 });
 
 test.afterAll(async () => {

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

@@ -1,6 +1,6 @@
 import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
+  PRO_TEST_PROJECT_NAME,
+  PRO_TEST_PROJECT_SLUG,
   TEST_WORKSPACE_SLUG,
 } from '@/e2e/env';
 import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
@@ -19,9 +19,9 @@ test.beforeEach(async () => {
 
   await openProject({
     page,
-    projectName: TEST_PROJECT_NAME,
+    projectName: PRO_TEST_PROJECT_NAME,
     workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
+    projectSlug: PRO_TEST_PROJECT_SLUG,
   });
 
   await page
@@ -29,7 +29,9 @@ test.beforeEach(async () => {
     .getByRole('link', { name: /auth/i })
     .click();
 
-  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/users`,
+  );
 });
 
 test.afterAll(async () => {

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

@@ -1,6 +1,6 @@
 import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
+  PRO_TEST_PROJECT_NAME,
+  PRO_TEST_PROJECT_SLUG,
   TEST_WORKSPACE_SLUG,
 } from '@/e2e/env';
 import { openProject, prepareTable } from '@/e2e/utils';
@@ -20,9 +20,9 @@ test.beforeEach(async () => {
 
   await openProject({
     page,
-    projectName: TEST_PROJECT_NAME,
+    projectName: PRO_TEST_PROJECT_NAME,
     workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
+    projectSlug: PRO_TEST_PROJECT_SLUG,
   });
 
   await page
@@ -55,7 +55,7 @@ test('should create a simple table', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
   );
 
   await expect(
@@ -84,7 +84,7 @@ test('should create a table with unique constraints', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
   );
 
   await expect(
@@ -113,7 +113,7 @@ test('should create a table with nullable columns', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
   );
 
   await expect(
@@ -146,7 +146,7 @@ test('should create a table with an identity column', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
   );
 
   await expect(
@@ -174,7 +174,7 @@ test('should create table with foreign key constraint', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${firstTableName}`,
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${firstTableName}`,
   );
 
   await page.getByRole('button', { name: /new table/i }).click();
@@ -219,7 +219,7 @@ test('should create table with foreign key constraint', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${secondTableName}`,
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${secondTableName}`,
   );
 
   await expect(
@@ -247,7 +247,7 @@ test('should not be able to create a table with a name that already exists', asy
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
   );
 
   await page.getByRole('button', { name: /new table/i }).click();

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

@@ -1,6 +1,6 @@
 import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
+  PRO_TEST_PROJECT_NAME,
+  PRO_TEST_PROJECT_SLUG,
   TEST_WORKSPACE_SLUG,
 } from '@/e2e/env';
 import { deleteTable, openProject, prepareTable } from '@/e2e/utils';
@@ -20,9 +20,9 @@ test.beforeEach(async () => {
 
   await openProject({
     page,
-    projectName: TEST_PROJECT_NAME,
+    projectName: PRO_TEST_PROJECT_NAME,
     workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
+    projectSlug: PRO_TEST_PROJECT_SLUG,
   });
 
   await page
@@ -53,7 +53,7 @@ test('should delete a table', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
   );
 
   await deleteTable({
@@ -63,7 +63,7 @@ test('should delete a table', async () => {
 
   // navigate to next URL
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/**`,
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/**`,
   );
 
   await expect(
@@ -91,7 +91,7 @@ test('should not be able to delete a table if other tables have foreign keys ref
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${firstTableName}`,
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${firstTableName}`,
   );
 
   await page.getByRole('button', { name: /new table/i }).click();
@@ -138,7 +138,7 @@ test('should not be able to delete a table if other tables have foreign keys ref
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${secondTableName}`,
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${secondTableName}`,
   );
 
   await expect(

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,73 @@
+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');
+
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await expect(
+    page.getByRole('heading', { name: /confirm resources/i }),
+  ).toBeVisible();
+
+  await page.getByRole('button', { name: /confirm/i }).click();
+
+  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.getByRole('button', { name: /delete service/i }).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/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "1.24.0",
+  "version": "1.30.0",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -35,6 +35,7 @@
     "@heroicons/react": "^1.0.6",
     "@hookform/resolvers": "^3.3.4",
     "@iarna/toml": "^2.2.5",
+    "@marsidev/react-turnstile": "^1.0.2",
     "@mui/base": "5.0.0-beta.31",
     "@mui/material": "^5.15.14",
     "@mui/system": "^5.15.14",
@@ -65,7 +66,7 @@
     "graphql-ws": "^5.16.0",
     "just-kebab-case": "^4.2.0",
     "lodash.debounce": "^4.0.8",
-    "next": "^14.1.4",
+    "next": "^14.2.10",
     "next-seo": "^6.5.0",
     "node-pg-format": "^1.3.5",
     "pluralize": "^8.0.0",
@@ -165,7 +166,7 @@
     "tailwindcss": "^3.4.3",
     "ts-node": "^10.9.2",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "vite": "^5.2.7",
+    "vite": "^5.4.6",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^0.32.4"
   },

dashboard/playwright.config.ts

@@ -10,10 +10,10 @@ export default defineConfig({
   expect: {
     timeout: 5000,
   },
-  fullyParallel: true,
+  fullyParallel: false,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
+  workers: 1,
   reporter: 'html',
   globalTeardown: require.resolve('./global-teardown'),
   use: {

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

@@ -38,9 +38,12 @@ export default function Header({ className, ...props }: HeaderProps) {
   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 () => {};
     }
 
@@ -51,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
@@ -92,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">

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/SettingsSidebar/SettingsSidebar.tsx

@@ -221,6 +221,13 @@ 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>

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

@@ -112,18 +112,24 @@ export default function ErrorToast({
             bounce: 0.1,
           }}
         >
-          <div className="flex w-full flex-row items-center justify-between space-x-4">
-            <button onClick={close} type="button" aria-label="Close">
+          <div className="flex w-full flex-row items-center justify-between gap-4">
+            <button
+              className="flex-shrink-0"
+              onClick={close}
+              type="button"
+              aria-label="Close"
+            >
               <XIcon className="h-4 w-4 text-white" />
             </button>
-            <span>
+            <span className="flex-grow overflow-hidden break-words">
               {msg ?? 'An unkown error has occured, please try again later!'}
             </span>
 
             <button
               type="button"
               onClick={() => setShowInfo(!showInfo)}
-              className="flex flex-row items-center justify-center space-x-2 text-white"
+              className="flex flex-shrink-0 flex-row items-center justify-center space-x-2 text-white"
+              aria-label="Show error details"
             >
               <span>Info</span>
               {showInfo ? (

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

@@ -0,0 +1,45 @@
+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 InfoOutlinedIcon(props: IconProps, ref: ForwardedRef<SVGSVGElement>) {
+  return (
+    <SvgIcon
+      width="24"
+      height="24"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-label="Info"
+      stroke="currentColor"
+      ref={ref}
+      {...props}
+    >
+      <path
+        fill="none"
+        d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fill="none"
+        d="M12 16V12"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fill="none"
+        d="M12 8H12.01"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </SvgIcon>
+  );
+}
+
+InfoOutlinedIcon.displayName = 'NhostInfoOutlinedIcon';
+
+export default forwardRef(InfoOutlinedIcon);

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

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

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/features/authentication/settings/components/ConcealErrorsSettings/ConcealErrorsSettings.tsx

@@ -0,0 +1,136 @@
+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 { 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 {
+  GetAuthenticationSettingsDocument,
+  useGetAuthenticationSettingsQuery,
+  useUpdateConfigMutation,
+} from '@/utils/__generated__/graphql';
+import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import * as Yup from 'yup';
+
+const validationSchema = Yup.object({
+  enabled: Yup.boolean(),
+});
+
+export type ToggleConcealErrorsFormValues = Yup.InferType<
+  typeof validationSchema
+>;
+
+export default function ConcealErrorsSettings() {
+  const { openDialog } = useDialog();
+  const isPlatform = useIsPlatform();
+  const { maintenanceActive } = useUI();
+  const localMimirClient = useLocalMimirClient();
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetAuthenticationSettingsDocument],
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const { data, loading, error } = useGetAuthenticationSettingsQuery({
+    variables: { appId: currentProject?.id },
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const form = useForm<ToggleConcealErrorsFormValues>({
+    reValidateMode: 'onSubmit',
+    defaultValues: {
+      enabled: data?.config?.auth?.misc?.concealErrors,
+    },
+  });
+
+  useEffect(() => {
+    if (!loading) {
+      form.reset({
+        enabled: data?.config?.auth?.misc?.concealErrors,
+      });
+    }
+  }, [loading, data, form]);
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        delay={1000}
+        label="Loading conceal error settings..."
+        className="justify-center"
+      />
+    );
+  }
+
+  if (error) {
+    throw error;
+  }
+
+  const { formState } = form;
+
+  const handleToggleConcealErrors = async (
+    values: ToggleConcealErrorsFormValues,
+  ) => {
+    const updateConfigPromise = updateConfig({
+      variables: {
+        appId: currentProject.id,
+        config: {
+          auth: {
+            misc: {
+              concealErrors: values.enabled,
+            },
+          },
+        },
+      },
+    });
+
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(values);
+
+        if (!isPlatform) {
+          openDialog({
+            title: 'Apply your changes',
+            component: <ApplyLocalSettingsDialog />,
+            props: {
+              PaperProps: {
+                className: 'max-w-2xl',
+              },
+            },
+          });
+        }
+      },
+      {
+        loadingMessage: 'Updating conceal error settings...',
+        successMessage: 'Conceal error settings updated successfully.',
+        errorMessage:
+          'Failed to update conceal error settings. Please try again.',
+      },
+    );
+  };
+
+  return (
+    <FormProvider {...form}>
+      <Form onSubmit={handleToggleConcealErrors}>
+        <SettingsContainer
+          title="Conceal errors"
+          description="If set, conceals sensitive error messages to prevent leaking information about user accounts."
+          switchId="enabled"
+          showSwitch
+          slotProps={{
+            submitButton: {
+              disabled: !formState.isDirty || maintenanceActive,
+              loading: formState.isSubmitting,
+            },
+          }}
+          className="hidden"
+        />
+      </Form>
+    </FormProvider>
+  );
+}

dashboard/src/features/authentication/settings/components/ConcealErrorsSettings/index.ts

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

dashboard/src/features/authentication/settings/gql/getAuthenticationSettings.gql

@@ -50,6 +50,9 @@ query GetAuthenticationSettings($appId: uuid!) {
           default
         }
       }
+      misc {
+        concealErrors
+      }
       version
     }
   }

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/dataGrid/components/DataBrowserSidebar/DataBrowserSidebar.tsx

@@ -12,7 +12,6 @@ import { Chip } from '@/components/ui/v2/Chip';
 import { Divider } from '@/components/ui/v2/Divider';
 import { Dropdown } from '@/components/ui/v2/Dropdown';
 import { IconButton } from '@/components/ui/v2/IconButton';
-import { ArrowRightIcon } from '@/components/ui/v2/icons/ArrowRightIcon';
 import { DotsHorizontalIcon } from '@/components/ui/v2/icons/DotsHorizontalIcon';
 import { LockIcon } from '@/components/ui/v2/icons/LockIcon';
 import { PencilIcon } from '@/components/ui/v2/icons/PencilIcon';
@@ -20,7 +19,6 @@ import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
 import { TerminalIcon } from '@/components/ui/v2/icons/TerminalIcon';
 import { TrashIcon } from '@/components/ui/v2/icons/TrashIcon';
 import { UsersIcon } from '@/components/ui/v2/icons/UsersIcon';
-import { Link } from '@/components/ui/v2/Link';
 import { List } from '@/components/ui/v2/List';
 import { ListItem } from '@/components/ui/v2/ListItem';
 import { Option } from '@/components/ui/v2/Option';
@@ -312,15 +310,6 @@ function DataBrowserSidebarContent({
               Your project is connected to GitHub. Please use the CLI to make
               schema changes.
             </Text>
-            <Link
-              href="https://docs.nhost.io/platform/github-integration"
-              target="_blank"
-              rel="noopener noreferrer"
-              underline="hover"
-              className="grid items-center justify-start grid-flow-col gap-1"
-            >
-              Learn More <ArrowRightIcon />
-            </Link>
           </Box>
         )}
         {!isSelectedSchemaLocked && (

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/graphql/common/components/UserSelect/UserSelect.tsx

@@ -1,11 +1,12 @@
-import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
-import { Option } from '@/components/ui/v2/Option';
-import { Select } from '@/components/ui/v2/Select';
+import { Autocomplete } from '@/components/ui/v2/Autocomplete';
 import { DEFAULT_ROLES } from '@/features/graphql/common/utils/constants';
-import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import { useRemoteApplicationGQLClient } from '@/hooks/useRemoteApplicationGQLClient';
-import type { RemoteAppGetUsersCustomQuery } from '@/utils/__generated__/graphql';
-import { useRemoteAppGetUsersCustomQuery } from '@/utils/__generated__/graphql';
+import {
+  useRemoteAppGetUsersCustomLazyQuery,
+  type RemoteAppGetUsersCustomQuery,
+} from '@/utils/__generated__/graphql';
+import { debounce } from '@mui/material/utils';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 export interface UserSelectProps {
   /**
@@ -13,7 +14,7 @@ export interface UserSelectProps {
    */
   onUserChange: (userId: string, availableRoles?: string[]) => void;
   /**
-   * Class name to be applied to the `<Select />` element.
+   * Class name to be applied to the `<Autocomplete />` element.
    */
   className?: string;
 }
@@ -22,35 +23,87 @@ export default function UserSelect({
   onUserChange,
   ...props
 }: UserSelectProps) {
-  const { currentProject } = useCurrentWorkspaceAndProject();
+  const [inputValue, setInputValue] = useState('');
+  const [users, setUsers] = useState([]);
+  const [active, setActive] = useState(true);
+
   const userApplicationClient = useRemoteApplicationGQLClient();
-  const { data, loading, error } = useRemoteAppGetUsersCustomQuery({
+
+  const [fetchAppUsers, { loading }] = useRemoteAppGetUsersCustomLazyQuery({
     client: userApplicationClient,
-    variables: { where: {}, limit: 250, offset: 0 },
-    skip: !currentProject,
+    variables: {
+      where: {},
+      limit: 250,
+      offset: 0,
+    },
   });
 
-  if (loading) {
-    return (
-      <div className={props.className}>
-        <ActivityIndicator label="Loading users..." delay={500} />
-      </div>
-    );
-  }
+  const fetchUsers = useCallback(
+    async (
+      request: { input: string },
+      callback: (results?: RemoteAppGetUsersCustomQuery['users']) => void,
+    ) => {
+      const ilike = `%${request.input === 'Admin' ? '' : request.input}%`;
+      const { data } = await fetchAppUsers({
+        client: userApplicationClient,
+        variables: {
+          where: {
+            displayName: { _ilike: ilike },
+          },
+          limit: 250,
+          offset: 0,
+        },
+      });
 
-  if (error) {
-    throw error;
-  }
+      callback(data?.users);
+    },
+    [fetchAppUsers, userApplicationClient],
+  );
+
+  const fetchOptions = useMemo(() => debounce(fetchUsers, 1000), [fetchUsers]);
+
+  useEffect(() => {
+    fetchOptions({ input: inputValue }, (results) => {
+      if (active || inputValue === '') {
+        setUsers(results);
+      }
+    });
+  }, [inputValue, fetchOptions, active]);
+
+  const autocompleteOptions = [
+    {
+      value: 'admin',
+      label: 'Admin',
+      group: 'Admin',
+    },
+    ...users.map((user) => ({
+      value: user.id,
+      label: user.displayName,
+      group: 'Users',
+    })),
+  ];
 
   return (
-    <Select
+    <Autocomplete
       {...props}
       id="user-select"
-      label="Make Request As"
-      hideEmptyHelperText
-      defaultValue="admin"
-      slotProps={{ root: { className: 'truncate' } }}
-      onChange={(_event, userId) => {
+      label="Make request as"
+      options={autocompleteOptions}
+      defaultValue={{
+        value: 'admin',
+        label: 'Admin',
+        group: 'Admin',
+      }}
+      autoComplete
+      fullWidth
+      autoSelect
+      groupBy={(option) => option.group}
+      autoHighlight
+      includeInputInList
+      loading={loading}
+      onChange={(_event, _value, reason, details) => {
+        setActive(false);
+        const userId = details.option.value;
         if (typeof userId !== 'string') {
           return;
         }
@@ -61,22 +114,23 @@ export default function UserSelect({
           return;
         }
 
-        const user: RemoteAppGetUsersCustomQuery['users'][0] = data?.users.find(
+        const user: RemoteAppGetUsersCustomQuery['users'][0] = users.find(
           ({ id }) => id === userId,
         );
 
-        const roles = user?.roles.map(({ role }) => role);
+        const roles = user?.roles?.map(({ role }) => role);
 
-        onUserChange(user.id, roles);
+        onUserChange(userId, roles ?? DEFAULT_ROLES);
+
+        fetchUsers({ input: '' }, (results) => {
+          if (results) {
+            setUsers(results);
+          }
+        });
       }}
-    >
-      <Option value="admin">Admin</Option>
-
-      {data?.users.map(({ id, displayName, email, phoneNumber }) => (
-        <Option key={id} value={id}>
-          {displayName || email || phoneNumber || id}
-        </Option>
-      ))}
-    </Select>
+      onInputChange={(event, newInputValue) => {
+        setInputValue(newInputValue);
+      }}
+    />
   );
 }

dashboard/src/features/graphql/common/hooks/index.ts

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

dashboard/src/features/graphql/common/hooks/useGetAppUsers.ts

@@ -0,0 +1,54 @@
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useRemoteApplicationGQLClient } from '@/hooks/useRemoteApplicationGQLClient';
+import type {
+  RemoteAppGetUsersCustomQuery,
+  RemoteAppGetUsersCustomQueryVariables,
+} from '@/utils/__generated__/graphql';
+import { useRemoteAppGetUsersCustomQuery } from '@/utils/__generated__/graphql';
+import type { QueryHookOptions } from '@apollo/client';
+
+export type UseFilesOptions = {
+  searchString?: string;
+  limit?: number;
+  offset?: number;
+  /**
+   * Custom options for the query.
+   */
+  options?: QueryHookOptions<
+    RemoteAppGetUsersCustomQuery,
+    RemoteAppGetUsersCustomQueryVariables
+  >;
+};
+
+export default function useGetAppUsers({
+  searchString,
+  limit = 250,
+  offset = 0,
+  options = {},
+}: UseFilesOptions) {
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const userApplicationClient = useRemoteApplicationGQLClient();
+  const { data, error, loading } = useRemoteAppGetUsersCustomQuery({
+    ...options,
+    client: userApplicationClient,
+    variables: {
+      ...options.variables,
+      where: searchString
+        ? {
+            displayName: { _ilike: `%${searchString}%` },
+          }
+        : {},
+      limit,
+      offset,
+    },
+    skip: !currentProject,
+  });
+
+  const users = data?.users || [];
+
+  return {
+    users,
+    loading,
+    error,
+  };
+}

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/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/utils/planDescriptions/planDescriptions.ts

@@ -1,6 +1,6 @@
 const planDescriptions = {
   Starter: '1 GB database, 5 GB of file storage, 10 GB of network traffic.',
-  Pro: '10 GB database, 25 GB of file storage, 50 GB of network traffic, and backups.',
+  Pro: '10 GB database, 50 GB of file storage, 50 GB of network traffic, and backups.',
   Team: 'Reach out to us at support@nhost.io to have your private channel set up.',
 };
 

dashboard/src/features/projects/rate-limiting/settings/components/AuthLimitingForm/AuthLimitingForm.tsx

@@ -0,0 +1,303 @@
+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 { Divider } from '@/components/ui/v2/Divider';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
+import { rateLimitingItemValidationSchema } from '@/features/projects/rate-limiting/settings/components/validationSchemas';
+import { useLocalMimirClient } from '@/hooks/useLocalMimirClient';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
+import { useUpdateRateLimitConfigMutation } from '@/utils/__generated__/graphql';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { RateLimitField } from 'features/projects/rate-limiting/settings/components/RateLimitField';
+import { useGetRateLimits } from 'features/projects/rate-limiting/settings/hooks/useGetRateLimits';
+import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import * as Yup from 'yup';
+
+export const validationSchema = Yup.object({
+  enabled: Yup.boolean().label('Enabled'),
+  bruteForce: rateLimitingItemValidationSchema,
+  emails: rateLimitingItemValidationSchema,
+  global: rateLimitingItemValidationSchema,
+  signups: rateLimitingItemValidationSchema,
+  sms: rateLimitingItemValidationSchema,
+});
+
+export type AuthLimitingFormValues = Yup.InferType<typeof validationSchema>;
+
+export default function AuthLimitingForm() {
+  const { openDialog } = useDialog();
+  const { maintenanceActive } = useUI();
+  const isPlatform = useIsPlatform();
+
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const localMimirClient = useLocalMimirClient();
+
+  const [updateRateLimitConfig] = useUpdateRateLimitConfigMutation({
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const { authRateLimit, loading } = useGetRateLimits();
+  const {
+    bruteForce,
+    emails,
+    global,
+    signups,
+    sms,
+    enabled: authRateEnabled,
+  } = authRateLimit;
+
+  const {
+    limit: bruteForceLimit,
+    interval: bruteForceInterval,
+    intervalUnit: bruteForceIntervalUnit,
+  } = bruteForce;
+  const {
+    limit: emailsLimit,
+    interval: emailsInterval,
+    intervalUnit: emailsIntervalUnit,
+  } = emails;
+  const {
+    limit: globalLimit,
+    interval: globalInterval,
+    intervalUnit: globalIntervalUnit,
+  } = global;
+  const {
+    limit: signupsLimit,
+    interval: signupsInterval,
+    intervalUnit: signupsIntervalUnit,
+  } = signups;
+  const {
+    limit: smsLimit,
+    interval: smsInterval,
+    intervalUnit: smsIntervalUnit,
+  } = sms;
+
+  const form = useForm<AuthLimitingFormValues>({
+    defaultValues: {
+      enabled: authRateEnabled,
+      bruteForce: {
+        limit: bruteForceLimit,
+        interval: bruteForceInterval,
+        intervalUnit: bruteForceIntervalUnit,
+      },
+      emails: {
+        limit: emailsLimit,
+        interval: emailsInterval,
+        intervalUnit: emailsIntervalUnit,
+      },
+      global: {
+        limit: globalLimit,
+        interval: globalInterval,
+        intervalUnit: globalIntervalUnit,
+      },
+      signups: {
+        limit: signupsLimit,
+        interval: signupsInterval,
+        intervalUnit: signupsIntervalUnit,
+      },
+      sms: {
+        limit: smsLimit,
+        interval: smsInterval,
+        intervalUnit: smsIntervalUnit,
+      },
+    },
+    reValidateMode: 'onSubmit',
+    resolver: yupResolver(validationSchema),
+  });
+
+  useEffect(() => {
+    if (!loading && authRateEnabled) {
+      form.reset({
+        enabled: authRateEnabled,
+        bruteForce: {
+          limit: bruteForceLimit,
+          interval: bruteForceInterval,
+          intervalUnit: bruteForceIntervalUnit,
+        },
+        emails: {
+          limit: emailsLimit,
+          interval: emailsInterval,
+          intervalUnit: emailsIntervalUnit,
+        },
+        global: {
+          limit: globalLimit,
+          interval: globalInterval,
+          intervalUnit: globalIntervalUnit,
+        },
+        signups: {
+          limit: signupsLimit,
+          interval: signupsInterval,
+          intervalUnit: signupsIntervalUnit,
+        },
+        sms: {
+          limit: smsLimit,
+          interval: smsInterval,
+          intervalUnit: smsIntervalUnit,
+        },
+      });
+    }
+  }, [
+    loading,
+    form,
+    authRateEnabled,
+    bruteForceLimit,
+    bruteForceInterval,
+    bruteForceIntervalUnit,
+    emailsLimit,
+    emailsInterval,
+    emailsIntervalUnit,
+    globalLimit,
+    globalInterval,
+    globalIntervalUnit,
+    signupsLimit,
+    signupsInterval,
+    signupsIntervalUnit,
+    smsLimit,
+    smsInterval,
+    smsIntervalUnit,
+  ]);
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        delay={1000}
+        label="Loading rate limits..."
+        className="justify-center"
+      />
+    );
+  }
+
+  const {
+    register,
+    formState: { errors },
+    formState,
+    watch,
+  } = form;
+
+  const enabled = watch('enabled');
+
+  const handleSubmit = async (formValues: AuthLimitingFormValues) => {
+    const updateConfigPromise = updateRateLimitConfig({
+      variables: {
+        appId: currentProject.id,
+        config: {
+          auth: {
+            rateLimit: formValues.enabled
+              ? {
+                  bruteForce: {
+                    limit: formValues.bruteForce.limit,
+                    interval: `${formValues.bruteForce.interval}${formValues.bruteForce.intervalUnit}`,
+                  },
+                  emails: {
+                    limit: formValues.emails.limit,
+                    interval: `${formValues.emails.interval}${formValues.emails.intervalUnit}`,
+                  },
+                  global: {
+                    limit: formValues.global.limit,
+                    interval: `${formValues.global.interval}${formValues.global.intervalUnit}`,
+                  },
+                  signups: {
+                    limit: formValues.signups.limit,
+                    interval: `${formValues.signups.interval}${formValues.signups.intervalUnit}`,
+                  },
+                  sms: {
+                    limit: formValues.sms.limit,
+                    interval: `${formValues.sms.interval}${formValues.sms.intervalUnit}`,
+                  },
+                }
+              : null,
+          },
+        },
+      },
+    });
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(formValues);
+
+        if (!isPlatform) {
+          openDialog({
+            title: 'Apply your changes',
+            component: <ApplyLocalSettingsDialog />,
+            props: {
+              PaperProps: {
+                className: 'max-w-2xl',
+              },
+            },
+          });
+        }
+      },
+      {
+        loadingMessage: 'Updating Auth rate limit settings...',
+        successMessage: 'Auth rate limit settings updated successfully',
+        errorMessage: 'Failed to update Auth rate limit settings',
+      },
+    );
+  };
+
+  return (
+    <FormProvider {...form}>
+      <Form
+        onSubmit={handleSubmit}
+        className="flex h-full flex-col overflow-hidden"
+      >
+        <SettingsContainer
+          title="Auth"
+          slotProps={{
+            submitButton: {
+              disabled: !formState.isDirty || maintenanceActive,
+              loading: formState.isSubmitting,
+            },
+          }}
+          className="flex flex-col px-0"
+        >
+          <Divider />
+          <RateLimitField
+            disabled={!enabled}
+            register={register}
+            errors={errors.bruteForce}
+            id="bruteForce"
+            title="Brute Force"
+          />
+          <Divider />
+          <RateLimitField
+            disabled={!enabled}
+            register={register}
+            errors={errors.emails}
+            id="emails"
+            title="Emails"
+          />
+          <Divider />
+          <RateLimitField
+            disabled={!enabled}
+            register={register}
+            errors={errors.global}
+            id="global"
+            title="Global"
+          />
+          <Divider />
+          <RateLimitField
+            disabled={!enabled}
+            register={register}
+            errors={errors.signups}
+            id="signups"
+            title="Signups"
+          />
+          <Divider />
+          <RateLimitField
+            disabled={!enabled}
+            register={register}
+            errors={errors.sms}
+            id="sms"
+            title="SMS"
+          />
+        </SettingsContainer>
+      </Form>
+    </FormProvider>
+  );
+}

dashboard/src/features/projects/rate-limiting/settings/components/AuthLimitingForm/index.ts

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

dashboard/src/features/projects/rate-limiting/settings/components/RateLimitField/RateLimitField.tsx

@@ -0,0 +1,88 @@
+import { ControlledSelect } from '@/components/form/ControlledSelect';
+import { Box } from '@/components/ui/v2/Box';
+import { Input } from '@/components/ui/v2/Input';
+import { Option } from '@/components/ui/v2/Option';
+import { Text } from '@/components/ui/v2/Text';
+import { intervalUnitOptions } from '@/features/projects/rate-limiting/settings/components/validationSchemas';
+import type {
+  FieldError,
+  FieldErrorsImpl,
+  Merge,
+  UseFormRegister,
+} from 'react-hook-form';
+
+interface RateLimitFieldProps {
+  register: UseFormRegister<any>;
+  errors: Merge<
+    FieldError,
+    FieldErrorsImpl<{
+      limit: number;
+      interval: number;
+      intervalUnit: string;
+    }>
+  >;
+  disabled?: boolean;
+  title?: string;
+  id: string;
+}
+
+export default function RateLimitField({
+  register,
+  disabled,
+  id,
+  errors,
+  title,
+}: RateLimitFieldProps) {
+  return (
+    <Box className="px-4">
+      {title ? <Text className="py-4 font-semibold">{title}</Text> : null}
+      <div className="flex flex-col gap-8 lg:flex-row">
+        <div className="flex flex-row items-center gap-2">
+          <Text>Limit</Text>
+          <Input
+            {...register(`${id}.limit`)}
+            disabled={disabled}
+            id={`${id}.limit`}
+            type="number"
+            placeholder=""
+            className="max-w-60"
+            hideEmptyHelperText
+            error={!!errors?.limit}
+            helperText={errors?.limit?.message}
+            autoComplete="off"
+          />
+        </div>
+        <div className="flex flex-row items-center gap-2">
+          <Text>Interval</Text>
+          <Input
+            {...register(`${id}.interval`)}
+            disabled={disabled}
+            id={`${id}.interval`}
+            type="number"
+            placeholder=""
+            hideEmptyHelperText
+            className="max-w-32"
+            error={!!errors?.interval}
+            helperText={errors?.interval?.message}
+            autoComplete="off"
+          />
+          <ControlledSelect
+            {...register(`${id}.intervalUnit`)}
+            disabled={disabled}
+            variant="normal"
+            id={`${id}.intervalUnit`}
+            className="w-27"
+            defaultValue="m"
+            hideEmptyHelperText
+          >
+            {intervalUnitOptions.map(({ value, label }) => (
+              <Option key={`${id}.intervalUnit.${value}`} value={value}>
+                {label}
+              </Option>
+            ))}
+          </ControlledSelect>
+        </div>
+      </div>
+    </Box>
+  );
+}

dashboard/src/features/projects/rate-limiting/settings/components/RateLimitField/index.ts

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

dashboard/src/features/projects/rate-limiting/settings/components/RateLimitingForm/RateLimitingForm.tsx

@@ -0,0 +1,169 @@
+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 { Divider } from '@/components/ui/v2/Divider';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
+import { rateLimitingItemValidationSchema } from '@/features/projects/rate-limiting/settings/components/validationSchemas';
+import { useLocalMimirClient } from '@/hooks/useLocalMimirClient';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
+import {
+  useUpdateRateLimitConfigMutation,
+  type ConfigConfigUpdateInput,
+} from '@/utils/__generated__/graphql';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { RateLimitField } from 'features/projects/rate-limiting/settings/components/RateLimitField';
+import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import * as Yup from 'yup';
+
+export const validationSchema = Yup.object({
+  enabled: Yup.boolean().label('Enabled'),
+  rateLimit: rateLimitingItemValidationSchema,
+});
+
+export interface RateLimitDefaultValues {
+  enabled: boolean;
+  rateLimit: { limit: number; interval: number; intervalUnit: string };
+}
+
+export interface RateLimitingFormProps {
+  defaultValues: RateLimitDefaultValues;
+  serviceName: keyof ConfigConfigUpdateInput;
+  title: string;
+  loading: boolean;
+}
+
+export type RateLimitingFormValues = Yup.InferType<typeof validationSchema>;
+
+export default function RateLimitingForm({
+  defaultValues,
+  serviceName,
+  title,
+  loading,
+}: RateLimitingFormProps) {
+  const { openDialog } = useDialog();
+  const { maintenanceActive } = useUI();
+  const isPlatform = useIsPlatform();
+
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const localMimirClient = useLocalMimirClient();
+
+  const [updateRateLimitConfig] = useUpdateRateLimitConfigMutation({
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const form = useForm<RateLimitingFormValues>({
+    defaultValues: defaultValues.enabled
+      ? defaultValues
+      : {
+          enabled: false,
+          rateLimit: {
+            limit: 0,
+            interval: 0,
+            intervalUnit: 's',
+          },
+        },
+    reValidateMode: 'onSubmit',
+    resolver: yupResolver(validationSchema),
+  });
+
+  useEffect(() => {
+    if (!loading && defaultValues.enabled) {
+      form.reset(defaultValues);
+    }
+  }, [loading, defaultValues, form]);
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        delay={1000}
+        label="Loading rate limits..."
+        className="justify-center"
+      />
+    );
+  }
+
+  const {
+    register,
+    formState: { errors },
+    formState,
+    watch,
+  } = form;
+
+  const enabled = watch('enabled');
+
+  const handleSubmit = async (formValues: RateLimitingFormValues) => {
+    const updateConfigPromise = updateRateLimitConfig({
+      variables: {
+        appId: currentProject.id,
+        config: {
+          [serviceName]: {
+            rateLimit: formValues.enabled
+              ? {
+                  limit: formValues.rateLimit.limit,
+                  interval: `${formValues.rateLimit.interval}${formValues.rateLimit.intervalUnit}`,
+                }
+              : null,
+          },
+        },
+      },
+    });
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(formValues);
+
+        if (!isPlatform) {
+          openDialog({
+            title: 'Apply your changes',
+            component: <ApplyLocalSettingsDialog />,
+            props: {
+              PaperProps: {
+                className: 'max-w-2xl',
+              },
+            },
+          });
+        }
+      },
+      {
+        loadingMessage: `Updating ${title} rate limit settings...`,
+        successMessage: `${title} rate limit settings updated successfully`,
+        errorMessage: `Failed to update ${title} rate limit settings`,
+      },
+    );
+  };
+
+  return (
+    <FormProvider {...form}>
+      <Form
+        onSubmit={handleSubmit}
+        className="flex h-full flex-col overflow-hidden"
+      >
+        <SettingsContainer
+          title={title}
+          switchId="enabled"
+          showSwitch
+          slotProps={{
+            submitButton: {
+              disabled: !formState.isDirty || maintenanceActive,
+              loading: formState.isSubmitting,
+            },
+          }}
+          className="flex flex-col px-0"
+        >
+          <Divider />
+          <RateLimitField
+            disabled={!enabled}
+            register={register}
+            errors={errors.rateLimit}
+            id="rateLimit"
+          />
+        </SettingsContainer>
+      </Form>
+    </FormProvider>
+  );
+}

dashboard/src/features/projects/rate-limiting/settings/components/RateLimitingForm/index.ts

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

dashboard/src/features/projects/rate-limiting/settings/components/RunServiceLimitingForm/RunServiceLimitingForm.tsx

@@ -0,0 +1,194 @@
+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 { Divider } from '@/components/ui/v2/Divider';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
+import { rateLimitingItemValidationSchema } from '@/features/projects/rate-limiting/settings/components/validationSchemas';
+import { useLocalMimirClient } from '@/hooks/useLocalMimirClient';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
+import { useUpdateRunServiceConfigMutation } from '@/utils/__generated__/graphql';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { RateLimitField } from 'features/projects/rate-limiting/settings/components/RateLimitField';
+import type { UseGetRunServiceRateLimitsReturn } from 'features/projects/rate-limiting/settings/hooks/useGetRunServiceRateLimits/useGetRunServiceRateLimits';
+import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import * as Yup from 'yup';
+
+export const validationSchema = Yup.object({
+  enabled: Yup.boolean().label('Enabled'),
+  ports: Yup.array().of(rateLimitingItemValidationSchema),
+});
+
+export type RunServiceLimitingFormValues = Yup.InferType<
+  typeof validationSchema
+>;
+
+export interface RunServiceLimitingFormProps {
+  title?: string;
+  serviceId?: string;
+  loading?: boolean;
+  enabledDefault?: boolean;
+  ports?: UseGetRunServiceRateLimitsReturn['services'][0]['ports'];
+}
+
+export default function RunServiceLimitingForm({
+  title,
+  serviceId,
+  ports,
+  loading,
+  enabledDefault,
+}: RunServiceLimitingFormProps) {
+  const { openDialog } = useDialog();
+  const { maintenanceActive } = useUI();
+  const isPlatform = useIsPlatform();
+
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const localMimirClient = useLocalMimirClient();
+
+  const [updateRunServiceRateLimit] = useUpdateRunServiceConfigMutation({
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const form = useForm<RunServiceLimitingFormValues>({
+    defaultValues: {
+      enabled: enabledDefault,
+      ports: [
+        ...ports.map((port) => ({
+          limit: port?.rateLimit?.limit,
+          interval: port?.rateLimit?.interval,
+          intervalUnit: port?.rateLimit?.intervalUnit,
+        })),
+      ],
+    },
+    reValidateMode: 'onSubmit',
+    resolver: yupResolver(validationSchema),
+  });
+
+  useEffect(() => {
+    if (!loading && enabledDefault) {
+      form.reset({
+        enabled: enabledDefault,
+        ports: [
+          ...ports.map((port) => ({
+            limit: port?.rateLimit?.limit,
+            interval: port?.rateLimit?.interval,
+            intervalUnit: port?.rateLimit?.intervalUnit,
+          })),
+        ],
+      });
+    }
+  }, [loading, enabledDefault, ports, form]);
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        delay={1000}
+        label="Loading rate limits..."
+        className="justify-center"
+      />
+    );
+  }
+
+  const {
+    register,
+    formState: { errors },
+    formState,
+    watch,
+  } = form;
+
+  const enabled = watch('enabled');
+
+  const handleSubmit = async (formValues: RunServiceLimitingFormValues) => {
+    const updateConfigPromise = updateRunServiceRateLimit({
+      variables: {
+        appID: currentProject?.id,
+        serviceID: serviceId,
+        config: {
+          ports: ports.map((port, index) => {
+            const rateLimit = formValues.ports[index];
+            return {
+              ...port,
+              rateLimit: enabled
+                ? {
+                    limit: rateLimit.limit,
+                    interval: `${rateLimit.interval}${rateLimit.intervalUnit}`,
+                  }
+                : null,
+            };
+          }),
+        },
+      },
+    });
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(formValues);
+
+        if (!isPlatform) {
+          openDialog({
+            title: 'Apply your changes',
+            component: <ApplyLocalSettingsDialog />,
+            props: {
+              PaperProps: {
+                className: 'max-w-2xl',
+              },
+            },
+          });
+        }
+      },
+      {
+        loadingMessage: 'Updating Run service rate limit settings...',
+        successMessage: 'Run service rate limit settings updated successfully',
+        errorMessage: 'Failed to update Run service rate limit settings',
+      },
+    );
+  };
+
+  return (
+    <FormProvider {...form}>
+      <Form
+        onSubmit={handleSubmit}
+        className="flex h-full flex-col overflow-hidden"
+      >
+        <SettingsContainer
+          title={title}
+          switchId="enabled"
+          showSwitch
+          slotProps={{
+            submitButton: {
+              disabled: !formState.isDirty || maintenanceActive,
+              loading: formState.isSubmitting,
+            },
+          }}
+          className="flex flex-col px-0"
+        >
+          <Divider />
+          {ports.map((port, index) => {
+            if (port?.type !== 'http' || !port?.publish) {
+              return null;
+            }
+
+            const fieldTitle = `${port.type} <-> ${port.port}`.toUpperCase();
+            const showDivider = index < ports.length - 1;
+            return (
+              <div key={`ports.${port.port}`}>
+                <RateLimitField
+                  title={fieldTitle}
+                  disabled={!enabled}
+                  register={register}
+                  errors={errors.ports}
+                  id={`ports.${index}`}
+                />
+                {showDivider && <Divider />}
+              </div>
+            );
+          })}
+        </SettingsContainer>
+      </Form>
+    </FormProvider>
+  );
+}

dashboard/src/features/projects/rate-limiting/settings/components/RunServiceLimitingForm/index.ts

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

dashboard/src/features/projects/rate-limiting/settings/components/validationSchemas.ts

@@ -0,0 +1,23 @@
+import * as Yup from 'yup';
+
+export const rateLimitingItemValidationSchema = Yup.object({
+  limit: Yup.number()
+    .required('Limit is required.')
+    .min(1)
+    .positive('Limit must be a positive number')
+    .typeError('Limit must be a number.'),
+  interval: Yup.number()
+    .required('Interval is required.')
+    .min(1)
+    .positive('Interval must be a positive number')
+    .typeError('Interval must be a number.'),
+  intervalUnit: Yup.string()
+    .required('Interval unit is required.')
+    .oneOf(['s', 'm', 'h']),
+});
+
+export const intervalUnitOptions = [
+  { value: 's', label: 'seconds' },
+  { value: 'm', label: 'minutes' },
+  { value: 'h', label: 'hours' },
+];

dashboard/src/features/projects/rate-limiting/settings/hooks/useGetRateLimits/index.ts

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

dashboard/src/features/projects/rate-limiting/settings/hooks/useGetRateLimits/useGetRateLimits.ts

@@ -0,0 +1,120 @@
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
+import { useLocalMimirClient } from '@/hooks/useLocalMimirClient';
+import { useGetRateLimitConfigQuery } from '@/utils/__generated__/graphql';
+import { DEFAULT_RATE_LIMITS } from 'features/projects/rate-limiting/settings/utils/constants';
+import { parseIntervalNameUnit } from 'features/projects/rate-limiting/settings/utils/parseIntervalNameUnit';
+
+export default function useGetRateLimits() {
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const isPlatform = useIsPlatform();
+  const localMimirClient = useLocalMimirClient();
+
+  const { data, loading } = useGetRateLimitConfigQuery({
+    variables: {
+      appId: currentProject?.id,
+      resolve: true,
+    },
+    skip: !currentProject,
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const authRateLimit = data?.config?.auth?.rateLimit;
+  const hasuraRateLimit = data?.config?.hasura?.rateLimit;
+  const storageRateLimit = data?.config?.storage?.rateLimit;
+  const functionsRateLimit = data?.config?.functions?.rateLimit;
+
+  const { bruteForce, emails, global, signups, sms } = authRateLimit || {};
+  const { limit: bruteForceLimit, interval: bruteForceIntervalStr } =
+    bruteForce || {};
+  const { interval: bruteForceInterval, intervalUnit: bruteForceIntervalUnit } =
+    parseIntervalNameUnit(bruteForceIntervalStr);
+
+  const { limit: emailsLimit, interval: emailsIntervalStr } = emails || {};
+  const { interval: emailsInterval, intervalUnit: emailsIntervalUnit } =
+    parseIntervalNameUnit(emailsIntervalStr);
+
+  const { limit: globalLimit, interval: globalIntervalStr } = global || {};
+  const { interval: globalInterval, intervalUnit: globalIntervalUnit } =
+    parseIntervalNameUnit(globalIntervalStr);
+
+  const { limit: signupsLimit, interval: signupsIntervalStr } = signups || {};
+  const { interval: signupsInterval, intervalUnit: signupsIntervalUnit } =
+    parseIntervalNameUnit(signupsIntervalStr);
+
+  const { limit: smsLimit, interval: smsIntervalStr } = sms || {};
+  const { interval: smsInterval, intervalUnit: smsIntervalUnit } =
+    parseIntervalNameUnit(smsIntervalStr);
+
+  const { limit: hasuraLimit, interval: hasuraIntervalStr } =
+    hasuraRateLimit || {};
+  const { interval: hasuraInterval, intervalUnit: hasuraIntervalUnit } =
+    parseIntervalNameUnit(hasuraIntervalStr);
+
+  const { limit: storageLimit, interval: storageIntervalStr } =
+    storageRateLimit || {};
+  const { interval: storageInterval, intervalUnit: storageIntervalUnit } =
+    parseIntervalNameUnit(storageIntervalStr);
+
+  const { limit: functionsLimit, interval: functionsIntervalStr } =
+    functionsRateLimit || {};
+  const { interval: functionsInterval, intervalUnit: functionsIntervalUnit } =
+    parseIntervalNameUnit(functionsIntervalStr);
+
+  return {
+    authRateLimit: {
+      enabled: !!authRateLimit,
+      bruteForce: {
+        limit: bruteForceLimit || DEFAULT_RATE_LIMITS.limit,
+        interval: bruteForceInterval || DEFAULT_RATE_LIMITS.interval,
+        intervalUnit:
+          bruteForceIntervalUnit || DEFAULT_RATE_LIMITS.intervalUnit,
+      },
+      emails: {
+        limit: emailsLimit || DEFAULT_RATE_LIMITS.limit,
+        interval: emailsInterval || DEFAULT_RATE_LIMITS.interval,
+        intervalUnit: emailsIntervalUnit || DEFAULT_RATE_LIMITS.intervalUnit,
+      },
+      global: {
+        limit: globalLimit || DEFAULT_RATE_LIMITS.limit,
+        interval: globalInterval || DEFAULT_RATE_LIMITS.interval,
+        intervalUnit: globalIntervalUnit || DEFAULT_RATE_LIMITS.intervalUnit,
+      },
+      signups: {
+        limit: signupsLimit || DEFAULT_RATE_LIMITS.limit,
+        interval: signupsInterval || DEFAULT_RATE_LIMITS.interval,
+        intervalUnit: signupsIntervalUnit || DEFAULT_RATE_LIMITS.intervalUnit,
+      },
+      sms: {
+        limit: smsLimit || DEFAULT_RATE_LIMITS.limit,
+        interval: smsInterval || DEFAULT_RATE_LIMITS.interval,
+        intervalUnit: smsIntervalUnit || DEFAULT_RATE_LIMITS.intervalUnit,
+      },
+    },
+    hasuraDefaultValues: {
+      enabled: !!hasuraRateLimit,
+      rateLimit: {
+        limit: hasuraLimit || DEFAULT_RATE_LIMITS.limit,
+        interval: hasuraInterval || DEFAULT_RATE_LIMITS.interval,
+        intervalUnit: hasuraIntervalUnit || DEFAULT_RATE_LIMITS.intervalUnit,
+      },
+    },
+    storageDefaultValues: {
+      enabled: !!storageRateLimit,
+      rateLimit: {
+        limit: storageLimit || DEFAULT_RATE_LIMITS.limit,
+        interval: storageInterval || DEFAULT_RATE_LIMITS.interval,
+        intervalUnit: storageIntervalUnit || DEFAULT_RATE_LIMITS.intervalUnit,
+      },
+    },
+    functionsDefaultValues: {
+      enabled: !!functionsRateLimit,
+      rateLimit: {
+        limit: functionsLimit || DEFAULT_RATE_LIMITS.limit,
+        interval: functionsInterval || DEFAULT_RATE_LIMITS.interval,
+        intervalUnit: functionsIntervalUnit || DEFAULT_RATE_LIMITS.intervalUnit,
+      },
+    },
+    loading,
+  };
+}

dashboard/src/features/projects/rate-limiting/settings/hooks/useGetRunServiceRateLimits/index.ts

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

dashboard/src/features/projects/rate-limiting/settings/hooks/useGetRunServiceRateLimits/useGetRunServiceRateLimits.ts

@@ -0,0 +1,107 @@
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
+import { useLocalMimirClient } from '@/hooks/useLocalMimirClient';
+import {
+  useGetLocalRunServiceRateLimitQuery,
+  useGetRunServicesRateLimitQuery,
+  type GetRunServicesRateLimitQuery,
+} from '@/utils/__generated__/graphql';
+import { DEFAULT_RATE_LIMITS } from 'features/projects/rate-limiting/settings/utils/constants';
+import { parseIntervalNameUnit } from 'features/projects/rate-limiting/settings/utils/parseIntervalNameUnit';
+import { useMemo } from 'react';
+
+type RunService = Pick<
+  GetRunServicesRateLimitQuery['app']['runServices'][0],
+  'config'
+> & {
+  id?: string;
+  serviceID?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  subdomain?: string;
+};
+
+export interface UseGetRunServiceRateLimitsReturn {
+  services: {
+    name?: string;
+    id?: string;
+    enabled?: boolean;
+    ports?: {
+      type?: string;
+      port?: string;
+      publish?: boolean;
+      rateLimit?: {
+        limit?: number;
+        interval?: number;
+        intervalUnit?: string;
+      };
+    }[];
+  }[];
+  loading: boolean;
+}
+
+export default function useGetRunServiceRateLimits(): UseGetRunServiceRateLimitsReturn {
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const isPlatform = useIsPlatform();
+  const localMimirClient = useLocalMimirClient();
+  const { data, loading: loadingPlatformServices } =
+    useGetRunServicesRateLimitQuery({
+      variables: {
+        appID: currentProject?.id,
+        resolve: false,
+      },
+      skip: !isPlatform,
+    });
+
+  const { loading: loadingLocalServices, data: localServicesData } =
+    useGetLocalRunServiceRateLimitQuery({
+      variables: { appID: currentProject?.id, resolve: false },
+      skip: isPlatform,
+      client: localMimirClient,
+    });
+
+  const platformServices = useMemo(
+    () => data?.app?.runServices.map((service) => service) ?? [],
+    [data],
+  );
+
+  const localServices = useMemo(
+    () => localServicesData?.runServiceConfigs.map((service) => service) ?? [],
+    [localServicesData],
+  );
+
+  const services: RunService[] = isPlatform ? platformServices : localServices;
+  const loading = isPlatform ? loadingPlatformServices : loadingLocalServices;
+
+  const servicesInfo = services.map((service) => {
+    const enabled = service?.config?.ports?.some(
+      (port) => port?.rateLimit && port?.type === 'http' && port?.publish,
+    );
+
+    const ports = service?.config?.ports?.map((port) => {
+      const { interval, intervalUnit } = parseIntervalNameUnit(
+        port?.rateLimit?.interval,
+      );
+      const rateLimit = {
+        limit: port?.rateLimit?.limit || DEFAULT_RATE_LIMITS.limit,
+        interval: interval || DEFAULT_RATE_LIMITS.interval,
+        intervalUnit: intervalUnit || DEFAULT_RATE_LIMITS.intervalUnit,
+      };
+      return {
+        type: port?.type,
+        publish: port?.publish,
+        port: port?.port,
+        rateLimit,
+      };
+    });
+
+    return {
+      enabled,
+      name: service.config?.name,
+      id: service.id ?? service.serviceID,
+      ports,
+    };
+  });
+
+  return { services: servicesInfo, loading };
+}

dashboard/src/features/projects/rate-limiting/settings/utils/constants/constants.ts

@@ -0,0 +1,5 @@
+export const DEFAULT_RATE_LIMITS = {
+  limit: 1000,
+  interval: 5,
+  intervalUnit: 'm',
+};

dashboard/src/features/projects/rate-limiting/settings/utils/constants/index.ts

@@ -0,0 +1 @@
+export * from './constants';

dashboard/src/features/projects/rate-limiting/settings/utils/parseIntervalNameUnit/index.ts

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

dashboard/src/features/projects/rate-limiting/settings/utils/parseIntervalNameUnit/parseIntervalNameUnit.ts

@@ -0,0 +1,18 @@
+export default function parseIntervalNameUnit(interval: string) {
+  if (!interval) {
+    return {};
+  }
+  const regex = /^(\d+)([a-zA-Z])$/;
+  const match = interval.match(regex);
+
+  if (!match) {
+    return {};
+  }
+
+  const [, intervalValue, intervalUnit] = match;
+
+  return {
+    interval: parseInt(intervalValue, 10),
+    intervalUnit,
+  };
+}

dashboard/src/features/projects/resources/settings/components/ResourcesForm/ResourcesForm.test.tsx

@@ -14,6 +14,7 @@ import {
   fireEvent,
   render,
   screen,
+  waitFor,
   waitForElementToBeRemoved,
   within,
 } from '@/tests/testUtils';
@@ -78,7 +79,7 @@ test('should show the sliders if the switch is enabled', async () => {
   await user.click(screen.getByRole('checkbox'));
 
   expect(screen.queryByText(/enable this feature/i)).not.toBeInTheDocument();
-  expect(screen.getAllByRole('slider')).toHaveLength(12);
+  expect(screen.getAllByRole('slider')).toHaveLength(9);
 });
 
 test('should not show an empty state message if there is data available', async () => {
@@ -89,7 +90,7 @@ test('should not show an empty state message if there is data available', async
   ).toBeInTheDocument();
 
   expect(screen.queryByText(/enable this feature/i)).not.toBeInTheDocument();
-  expect(screen.getAllByRole('slider')).toHaveLength(12);
+  expect(screen.getAllByRole('slider')).toHaveLength(9);
   expect(screen.getByText(/^vcpus:/i)).toHaveTextContent(/vcpus: 8/i);
   expect(screen.getByText(/^memory:/i)).toHaveTextContent(/memory: 16384 mib/i);
 });
@@ -267,7 +268,7 @@ test('should display a red button when custom resources are disabled', async ()
     await screen.findByRole('slider', { name: /total available vcpu/i }),
   ).toBeInTheDocument();
 
-  await user.click(screen.getByRole('checkbox'));
+  await user.click(screen.getAllByRole('checkbox')[0]);
 
   expect(screen.getByText(/enable this feature/i)).toBeInTheDocument();
   expect(screen.getByText(/approximate cost:/i)).toHaveTextContent(
@@ -297,7 +298,8 @@ test('should hide the pricing information when custom resource allocation is dis
     await screen.findByRole('slider', { name: /total available vcpu/i }),
   ).toBeInTheDocument();
 
-  await user.click(screen.getByRole('checkbox'));
+  await user.click(screen.getAllByRole('checkbox')[0]);
+
   await user.click(screen.getByRole('button', { name: /save/i }));
 
   expect(await screen.findByRole('dialog')).toBeInTheDocument();
@@ -333,6 +335,8 @@ test('should show a warning message when resources are overallocated', async ()
 });
 
 test('should change pricing based on selected replicas', async () => {
+  const user = userEvent.setup();
+
   render(<ResourcesForm />);
 
   expect(
@@ -343,23 +347,31 @@ test('should change pricing based on selected replicas', async () => {
     /approximate cost: \$425\.00\/mo/i,
   );
 
-  changeSliderValue(
-    screen.getByRole('slider', { name: /hasura graphql replicas/i }),
-    2,
+  const hasuraReplicasInput = screen.getAllByPlaceholderText('Replicas')[0];
+
+  await user.click(hasuraReplicasInput);
+  await user.clear(hasuraReplicasInput);
+  await user.type(hasuraReplicasInput, '2');
+
+  await new Promise((resolve) => {
+    setTimeout(resolve, 1000);
+  });
+
+  await waitFor(() =>
+    expect(screen.getByText(/approximate cost:/i)).toHaveTextContent(
+      /approximate cost: \$525\.00\/mo/i,
+    ),
   );
 
-  expect(screen.getByText(/approximate cost:/i)).toHaveTextContent(
-    /approximate cost: \$525\.00\/mo/i,
-  );
+  await user.click(hasuraReplicasInput);
+  await user.clear(hasuraReplicasInput);
+  await user.type(hasuraReplicasInput, '1');
 
-  changeSliderValue(
-    screen.getByRole('slider', { name: /hasura graphql replicas/i }),
-    1,
-  );
-
-  expect(screen.getByText(/approximate cost:/i)).toHaveTextContent(
-    /approximate cost: \$425\.00\/mo/i,
-  );
+  await waitFor(() => {
+    expect(screen.getByText(/approximate cost:/i)).toHaveTextContent(
+      /approximate cost: \$425\.00\/mo/i,
+    );
+  });
 });
 
 test('should validate if vCPU and Memory match the 1:2 ratio if more than 1 replica is selected', async () => {
@@ -378,10 +390,10 @@ test('should validate if vCPU and Memory match the 1:2 ratio if more than 1 repl
     20 * RESOURCE_VCPU_MULTIPLIER,
   );
 
-  changeSliderValue(
-    screen.getByRole('slider', { name: /storage replicas/i }),
-    2,
-  );
+  const storageReplicasInput = screen.getAllByPlaceholderText('Replicas')[2];
+  await user.click(storageReplicasInput);
+  await user.clear(storageReplicasInput);
+  await user.type(storageReplicasInput, '2');
 
   changeSliderValue(
     screen.getByRole('slider', { name: /storage vcpu/i }),
@@ -402,12 +414,13 @@ test('should validate if vCPU and Memory match the 1:2 ratio if more than 1 repl
     ),
   ).toBeInTheDocument();
 
-  const validationErrorMessage = screen.getByLabelText(
-    /vcpu and memory for this service must match the 1:2 ratio if more than one replica is selected\./i,
-  );
-
-  expect(validationErrorMessage).toBeInTheDocument();
-  expect(validationErrorMessage).toHaveStyle({ color: '#f13154' });
+  await waitFor(() => {
+    const validationErrorMessage = screen.getByText(
+      /vCPU and Memory for this service must follow a 1:2 ratio when more than one replica is selected or when the autoscaler is activated\./i,
+    );
+    expect(validationErrorMessage).toBeInTheDocument();
+    expect(validationErrorMessage).toHaveStyle({ color: '#f13154' });
+  });
 });
 
 test('should take replicas into account when confirming the resources', async () => {
@@ -436,11 +449,11 @@ test('should take replicas into account when confirming the resources', async ()
     4 * RESOURCE_MEMORY_MULTIPLIER,
   );
 
-  // setting up hasura
-  changeSliderValue(
-    screen.getByRole('slider', { name: /hasura graphql replicas/i }),
-    3,
-  );
+  const hasuraReplicasInput = screen.getAllByPlaceholderText('Replicas')[0];
+  await user.click(hasuraReplicasInput);
+  await user.clear(hasuraReplicasInput);
+  await user.type(hasuraReplicasInput, '3');
+
   changeSliderValue(
     screen.getByRole('slider', { name: /hasura graphql vcpu/i }),
     2.5 * RESOURCE_VCPU_MULTIPLIER,
@@ -450,8 +463,12 @@ test('should take replicas into account when confirming the resources', async ()
     5 * RESOURCE_MEMORY_MULTIPLIER,
   );
 
+  const authReplicasInput = screen.getAllByPlaceholderText('Replicas')[1];
   // setting up auth
-  changeSliderValue(screen.getByRole('slider', { name: /auth replicas/i }), 2);
+  await user.click(authReplicasInput);
+  await user.clear(authReplicasInput);
+  await user.type(authReplicasInput, '2');
+
   changeSliderValue(
     screen.getByRole('slider', { name: /auth vcpu/i }),
     1.5 * RESOURCE_VCPU_MULTIPLIER,
@@ -461,11 +478,12 @@ test('should take replicas into account when confirming the resources', async ()
     3 * RESOURCE_MEMORY_MULTIPLIER,
   );
 
+  const storageReplicasInput = screen.getAllByPlaceholderText('Replicas')[2];
   // setting up storage
-  changeSliderValue(
-    screen.getByRole('slider', { name: /storage replicas/i }),
-    4,
-  );
+  await user.click(storageReplicasInput);
+  await user.clear(storageReplicasInput);
+  await user.type(storageReplicasInput, '4');
+
   changeSliderValue(
     screen.getByRole('slider', { name: /storage vcpu/i }),
     2.5 * RESOURCE_VCPU_MULTIPLIER,

dashboard/src/features/projects/resources/settings/components/ResourcesForm/ResourcesForm.tsx

@@ -37,12 +37,14 @@ function getInitialServiceResources(
   data: GetResourcesQuery,
   service: Exclude<keyof GetResourcesQuery['config'], '__typename'>,
 ) {
-  const { compute, replicas } = data?.config?.[service]?.resources || {};
+  const { compute, replicas, autoscaler } =
+    data?.config?.[service]?.resources || {};
 
   return {
     replicas,
     vcpu: compute?.cpu || 0,
     memory: compute?.memory || 0,
+    autoscale: autoscaler || null,
   };
 }
 
@@ -100,21 +102,29 @@ export default function ResourcesForm() {
         replicas: initialDatabaseResources.replicas || 1,
         vcpu: initialDatabaseResources.vcpu || 1000,
         memory: initialDatabaseResources.memory || 2048,
+        autoscale: !!initialDatabaseResources.autoscale || false,
+        maxReplicas: initialDatabaseResources.autoscale?.maxReplicas || 10,
       },
       hasura: {
         replicas: initialHasuraResources.replicas || 1,
         vcpu: initialHasuraResources.vcpu || 500,
         memory: initialHasuraResources.memory || 1536,
+        autoscale: !!initialHasuraResources.autoscale || false,
+        maxReplicas: initialHasuraResources.autoscale?.maxReplicas || 10,
       },
       auth: {
         replicas: initialAuthResources.replicas || 1,
         vcpu: initialAuthResources.vcpu || 250,
         memory: initialAuthResources.memory || 256,
+        autoscale: !!initialAuthResources.autoscale || false,
+        maxReplicas: initialAuthResources.autoscale?.maxReplicas || 10,
       },
       storage: {
         replicas: initialStorageResources.replicas || 1,
         vcpu: initialStorageResources.vcpu || 250,
         memory: initialStorageResources.memory || 256,
+        autoscale: !!initialStorageResources.autoscale || false,
+        maxReplicas: initialStorageResources.autoscale?.maxReplicas || 10,
       },
     },
     resolver: yupResolver(resourceSettingsValidationSchema),
@@ -181,6 +191,11 @@ export default function ResourcesForm() {
                     memory: formValues.database.memory,
                   },
                   replicas: formValues.database.replicas,
+                  autoscaler: formValues.database.autoscale
+                    ? {
+                        maxReplicas: formValues.database.maxReplicas,
+                      }
+                    : null,
                 }
               : null,
           },
@@ -192,6 +207,11 @@ export default function ResourcesForm() {
                     memory: formValues.hasura.memory,
                   },
                   replicas: formValues.hasura.replicas,
+                  autoscaler: formValues.hasura.autoscale
+                    ? {
+                        maxReplicas: formValues.hasura.maxReplicas,
+                      }
+                    : null,
                 }
               : null,
           },
@@ -203,6 +223,11 @@ export default function ResourcesForm() {
                     memory: formValues.auth.memory,
                   },
                   replicas: formValues.auth.replicas,
+                  autoscaler: formValues.auth.autoscale
+                    ? {
+                        maxReplicas: formValues.auth.maxReplicas,
+                      }
+                    : null,
                 }
               : null,
           },
@@ -214,6 +239,11 @@ export default function ResourcesForm() {
                     memory: formValues.storage.memory,
                   },
                   replicas: formValues.storage.replicas,
+                  autoscaler: formValues.storage.autoscale
+                    ? {
+                        maxReplicas: formValues.storage.maxReplicas,
+                      }
+                    : null,
                 }
               : null,
           },
@@ -253,21 +283,29 @@ export default function ResourcesForm() {
           totalAvailableMemory: 4096,
           database: {
             replicas: 1,
+            maxReplicas: 1,
+            autoscale: false,
             vcpu: 1000,
             memory: 2048,
           },
           hasura: {
             replicas: 1,
+            maxReplicas: 1,
+            autoscale: false,
             vcpu: 500,
             memory: 1536,
           },
           auth: {
             replicas: 1,
+            maxReplicas: 1,
+            autoscale: false,
             vcpu: 250,
             memory: 256,
           },
           storage: {
             replicas: 1,
+            maxReplicas: 1,
+            autoscale: false,
             vcpu: 250,
             memory: 256,
           },

dashboard/src/features/projects/resources/settings/components/ServiceResourcesFormFragment/ServiceResourcesFormFragment.tsx

@@ -1,24 +1,30 @@
+import { ControlledSwitch } from '@/components/form/ControlledSwitch';
 import { Box } from '@/components/ui/v2/Box';
 import { ExclamationIcon } from '@/components/ui/v2/icons/ExclamationIcon';
+import { InfoOutlinedIcon } from '@/components/ui/v2/icons/InfoOutlinedIcon';
+import { Input } from '@/components/ui/v2/Input';
 import { Slider } from '@/components/ui/v2/Slider';
 import { Text } from '@/components/ui/v2/Text';
+import { Link } from '@/components/ui/v2/Link';
 import { Tooltip } from '@/components/ui/v2/Tooltip';
 import { prettifyMemory } from '@/features/projects/resources/settings/utils/prettifyMemory';
 import { prettifyVCPU } from '@/features/projects/resources/settings/utils/prettifyVCPU';
 import type { ResourceSettingsFormValues } from '@/features/projects/resources/settings/utils/resourceSettingsValidationSchema';
+import { Alert } from '@/components/ui/v2/Alert';
 import {
   MAX_SERVICE_MEMORY,
-  MAX_SERVICE_REPLICAS,
   MAX_SERVICE_VCPU,
   MIN_SERVICE_MEMORY,
-  MIN_SERVICE_REPLICAS,
   MIN_SERVICE_VCPU,
 } from '@/features/projects/resources/settings/utils/resourceSettingsValidationSchema';
 import {
+  RESOURCE_MEMORY_LOCKED_STEP,
   RESOURCE_MEMORY_STEP,
   RESOURCE_VCPU_STEP,
 } from '@/utils/constants/common';
+import debounce from 'lodash.debounce';
 import { useFormContext, useWatch } from 'react-hook-form';
+import { ArrowSquareOutIcon } from '@/components/ui/v2/icons/ArrowSquareOutIcon';
 
 export interface ServiceResourcesFormFragmentProps {
   /**
@@ -52,10 +58,14 @@ export default function ServiceResourcesFormFragment({
     setValue,
     trigger: triggerValidation,
     formState,
+    register,
   } = useFormContext<ResourceSettingsFormValues>();
   const formValues = useWatch<ResourceSettingsFormValues>();
   const serviceValues = formValues[serviceKey];
 
+  const isRatioLocked = serviceValues.replicas > 1 || serviceValues.autoscale;
+  const resourceMemoryStep = isRatioLocked ? RESOURCE_MEMORY_LOCKED_STEP : RESOURCE_MEMORY_STEP;
+
   // Total allocated CPU for all resources
   const totalAllocatedVCPU = Object.keys(formValues)
     .filter(
@@ -83,15 +93,27 @@ export default function ServiceResourcesFormFragment({
     formValues.totalAvailableMemory - totalAllocatedMemory;
   const allowedMemory = remainingMemory + serviceValues.memory;
 
-  function handleReplicaChange(value: string) {
+  // Debounce revalidation to prevent excessive re-renders
+  const handleReplicaChange = debounce((value: string) => {
     const updatedReplicas = parseInt(value, 10);
 
-    if (updatedReplicas < MIN_SERVICE_REPLICAS) {
-      return;
-    }
-
     setValue(`${serviceKey}.replicas`, updatedReplicas, { shouldDirty: true });
-    triggerValidation(`${serviceKey}.replicas`);
+    triggerValidation(`${serviceKey}.replicas`)
+    triggerValidation(`${serviceKey}.memory`);
+  }, 500);
+
+  const handleMaxReplicasChange = debounce((value: string) => {
+    const updatedMaxReplicas = parseInt(value, 10);
+
+    setValue(`${serviceKey}.maxReplicas`, updatedMaxReplicas, {
+      shouldDirty: true,
+    });
+    triggerValidation(`${serviceKey}.maxReplicas`);
+    triggerValidation(`${serviceKey}.memory`);
+  }, 500);
+
+  const handleSwitchChange = () => {
+    triggerValidation(`${serviceKey}.memory`);
   }
 
   function handleVCPUChange(value: string) {
@@ -103,9 +125,13 @@ export default function ServiceResourcesFormFragment({
 
     setValue(`${serviceKey}.vcpu`, updatedVCPU, { shouldDirty: true });
 
+    if (isRatioLocked) {
+      setValue(`${serviceKey}.memory`, updatedVCPU * 2.048, { shouldDirty: true });
+    }
+
     // trigger validation for "replicas" field
     if (!disableReplicas) {
-      triggerValidation(`${serviceKey}.replicas`);
+      triggerValidation(`${serviceKey}.memory`);
     }
   }
 
@@ -118,9 +144,13 @@ export default function ServiceResourcesFormFragment({
 
     setValue(`${serviceKey}.memory`, updatedMemory, { shouldDirty: true });
 
+    if (isRatioLocked) {
+      setValue(`${serviceKey}.vcpu`, updatedMemory / 2.048, { shouldDirty: true });
+    }
+
     // trigger validation for "replicas" field
     if (!disableReplicas) {
-      triggerValidation(`${serviceKey}.replicas`);
+      triggerValidation(`${serviceKey}.memory`);
     }
   }
 
@@ -135,7 +165,7 @@ export default function ServiceResourcesFormFragment({
       </Box>
 
       <Box className="grid grid-flow-row gap-2">
-        <Box className="grid grid-flow-col items-center justify-between gap-2">
+        <Box className="grid items-center justify-between grid-flow-col gap-2">
           <Text>
             Allocated vCPUs:{' '}
             <span className="font-medium">
@@ -165,7 +195,7 @@ export default function ServiceResourcesFormFragment({
       </Box>
 
       <Box className="grid grid-flow-row gap-2">
-        <Box className="grid grid-flow-col items-center justify-between gap-2">
+        <Box className="grid items-center justify-between grid-flow-col gap-2">
           <Text>
             Allocated Memory:{' '}
             <span className="font-medium">
@@ -187,53 +217,112 @@ export default function ServiceResourcesFormFragment({
           value={serviceValues.memory}
           onChange={(_event, value) => handleMemoryChange(value.toString())}
           max={MAX_SERVICE_MEMORY}
-          step={RESOURCE_MEMORY_STEP}
+          step={resourceMemoryStep}
           allowed={allowedMemory}
           aria-label={`${title} Memory`}
           marks
         />
+        {formState.errors[serviceKey]?.memory?.message ? (
+          <Alert severity="error">
+            {formState.errors[serviceKey]?.memory?.message}
+          </Alert>
+        ) : null}
       </Box>
 
       {!disableReplicas && (
-        <Box className="grid grid-flow-row gap-2">
-          <Box className="grid grid-flow-col items-center justify-start gap-2">
-            <Text
-              color={
-                formState.errors?.[serviceKey]?.replicas?.message
-                  ? 'error'
-                  : 'primary'
-              }
-              aria-errormessage={`${serviceKey}-replicas-error-tooltip`}
-            >
-              Replicas:{' '}
-              <span className="font-medium">{serviceValues.replicas}</span>
-            </Text>
-
-            {formState.errors?.[serviceKey]?.replicas?.message ? (
-              <Tooltip
-                title={formState.errors[serviceKey].replicas.message}
-                id={`${serviceKey}-replicas-error-tooltip`}
-              >
-                <ExclamationIcon
-                  color="error"
-                  className="h-4 w-4"
-                  aria-hidden="false"
-                />
-              </Tooltip>
-            ) : null}
+        <Box className="flex flex-col justify-between gap-4 lg:flex-row">
+          <Box className="flex flex-col gap-4 lg:flex-row lg:gap-8">
+            <Box className="flex flex-row items-center gap-2">
+              {formState.errors?.[serviceKey]?.replicas?.message ? (
+                <Tooltip
+                  title={formState.errors[serviceKey]?.replicas?.message}
+                  id={`${serviceKey}-replicas-error-tooltip`}
+                >
+                  <ExclamationIcon
+                    color="error"
+                    className="w-4 h-4"
+                    aria-hidden="false"
+                  />
+                </Tooltip>
+              ) : null}
+              <Text className="w-28 lg:w-auto">Replicas</Text>
+              <Input
+                {...register(`${serviceKey}.replicas`)}
+                onChange={(event) => handleReplicaChange(event.target.value)}
+                type="number"
+                id={`${serviceKey}.replicas`}
+                data-testid={`${serviceKey}.replicas`}
+                placeholder="Replicas"
+                className="max-w-28"
+                hideEmptyHelperText
+                error={!!formState.errors?.[serviceKey]?.replicas}
+                fullWidth
+                autoComplete="off"
+              />
+            </Box>
+            <Box className="flex flex-row items-center gap-2">
+              {formState.errors?.[serviceKey]?.maxReplicas?.message ? (
+                <Tooltip
+                  title={formState.errors[serviceKey]?.maxReplicas?.message}
+                  id={`${serviceKey}-maxReplicas-error-tooltip`}
+                >
+                  <ExclamationIcon
+                    color="error"
+                    className="w-4 h-4"
+                    aria-hidden="false"
+                  />
+                </Tooltip>
+              ) : null}
+              <Text className="w-28 text-nowrap lg:w-auto">Max Replicas</Text>
+              <Input
+                {...register(`${serviceKey}.maxReplicas`)}
+                onChange={(event) =>
+                  handleMaxReplicasChange(event.target.value)
+                }
+                type="number"
+                id={`${serviceKey}.maxReplicas`}
+                placeholder="10"
+                disabled={!formValues[serviceKey].autoscale}
+                className="max-w-28"
+                hideEmptyHelperText
+                error={!!formState.errors?.[serviceKey]?.maxReplicas}
+                fullWidth
+                autoComplete="off"
+              />
+            </Box>
+          </Box>
+          <Box className="flex flex-row items-center gap-3">
+            <ControlledSwitch
+              {...register(`${serviceKey}.autoscale`)}
+              onChange={handleSwitchChange}
+            />
+            <Text>Autoscaler</Text>
+            <Tooltip
+              title={`Enable autoscaler to automatically provision extra ${title} replicas when needed.`}
+            >
+              <InfoOutlinedIcon className="w-4 h-4 text-black" />
+            </Tooltip>
           </Box>
-
-          <Slider
-            value={serviceValues.replicas}
-            onChange={(_event, value) => handleReplicaChange(value.toString())}
-            min={0}
-            max={MAX_SERVICE_REPLICAS}
-            step={1}
-            aria-label={`${title} Replicas`}
-            marks
-          />
         </Box>
       )}
+
+      {
+        !disableReplicas && (
+          <Text>
+            Learn more about{' '}
+            <Link
+              href="https://docs.nhost.io/platform/service-replicas"
+              target="_blank"
+              rel="noopener noreferrer"
+              underline="hover"
+              className="font-medium"
+            >
+              Service Replicas
+              <ArrowSquareOutIcon className="w-4 h-4 ml-1" />
+            </Link>
+          </Text>
+        )
+      }
     </Box>
   );
 }

dashboard/src/features/projects/resources/settings/components/TotalResourcesFormFragment/TotalResourcesFormFragment.tsx

@@ -2,6 +2,7 @@ import { Alert } from '@/components/ui/v2/Alert';
 import { Box } from '@/components/ui/v2/Box';
 import { ArrowRightIcon } from '@/components/ui/v2/icons/ArrowRightIcon';
 import { Slider, sliderClasses } from '@/components/ui/v2/Slider';
+import { calculateBillableResources } from '@/features/projects/resources/settings/utils/calculateBillableResources';
 import { Text } from '@/components/ui/v2/Text';
 import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
 import { useProPlan } from '@/features/projects/common/hooks/useProPlan';
@@ -46,6 +47,7 @@ export default function TotalResourcesFormFragment({
     error: proPlanError,
     loading: proPlanLoading,
   } = useProPlan();
+  
   const { setValue } = useFormContext<ResourceSettingsFormValues>();
   const formValues = useWatch<ResourceSettingsFormValues>();
 
@@ -65,9 +67,38 @@ export default function TotalResourcesFormFragment({
     (formValues.totalAvailableVCPU / RESOURCE_VCPU_MULTIPLIER) *
     RESOURCE_VCPU_PRICE;
 
-  const updatedPrice = isPlatform
-    ? priceForTotalAvailableVCPU + proPlan.price
-    : 0;
+  const billableResources = calculateBillableResources(
+    {
+      replicas: formValues.database?.replicas,
+      vcpu: formValues.database?.vcpu,
+    },
+    {
+      replicas: formValues.hasura?.replicas,
+      vcpu: formValues.hasura?.vcpu,
+    },
+    {
+      replicas: formValues.auth?.replicas,
+      vcpu: formValues.auth?.vcpu,
+    },
+    {
+      replicas: formValues.storage?.replicas,
+      vcpu: formValues.storage?.vcpu,
+    },
+  );
+
+  const computeUpdatedPrice = () => {
+    if (!isPlatform) {
+      return 0;
+    }
+
+    return (
+      Math.max(
+        priceForTotalAvailableVCPU,
+        (billableResources.vcpu / RESOURCE_VCPU_MULTIPLIER) *
+          RESOURCE_VCPU_PRICE,
+      ) + proPlan.price
+    );
+  };
 
   const { vcpu: allocatedVCPU, memory: allocatedMemory } =
     getAllocatedResources(formValues);
@@ -114,14 +145,14 @@ export default function TotalResourcesFormFragment({
               Total available compute for your project:
             </Text>
 
-            {initialPrice !== updatedPrice && (
+            {initialPrice !== computeUpdatedPrice() && (
               <Text className="flex flex-row items-center justify-end gap-2">
                 <Text component="span" color="secondary">
                   ${initialPrice.toFixed(2)}/mo
                 </Text>
                 <ArrowRightIcon />
                 <Text component="span" className="font-medium">
-                  ${updatedPrice.toFixed(2)}/mo
+                  ${computeUpdatedPrice().toFixed(2)}/mo
                 </Text>
               </Text>
             )}

dashboard/src/features/projects/resources/settings/gql/getResources.gql

@@ -6,6 +6,9 @@ fragment ServiceResources on ConfigConfig {
         memory
       }
       replicas
+      autoscaler {
+        maxReplicas
+      }
     }
   }
   hasura {
@@ -15,6 +18,9 @@ fragment ServiceResources on ConfigConfig {
         memory
       }
       replicas
+      autoscaler {
+        maxReplicas
+      }
     }
   }
   postgres {
@@ -24,6 +30,9 @@ fragment ServiceResources on ConfigConfig {
         memory
       }
       replicas
+      autoscaler {
+        maxReplicas
+      }
     }
   }
   storage {
@@ -33,6 +42,9 @@ fragment ServiceResources on ConfigConfig {
         memory
       }
       replicas
+      autoscaler {
+        maxReplicas
+      }
     }
   }
 }

dashboard/src/features/projects/resources/settings/utils/resourceSettingsValidationSchema/resourceSettingsValidationSchema.ts

@@ -81,23 +81,13 @@ const serviceValidationSchema = Yup.object({
     .label('Replicas')
     .required()
     .min(1)
-    .max(MAX_SERVICE_REPLICAS)
-    .test(
-      'is-matching-ratio',
-      `vCPU and Memory for this service must match the 1:${RESOURCE_VCPU_MEMORY_RATIO} ratio if more than one replica is selected.`,
-      (replicas: number, { parent }) => {
-        if (replicas === 1) {
-          return true;
-        }
-
-        return (
-          parent.memory /
-            RESOURCE_MEMORY_MULTIPLIER /
-            (parent.vcpu / RESOURCE_VCPU_MULTIPLIER) ===
-          RESOURCE_VCPU_MEMORY_RATIO
-        );
-      },
-    ),
+    .max(MAX_SERVICE_REPLICAS),
+  maxReplicas: Yup.number()
+    .label('Max Replicas')
+    .required()
+    .min(MIN_SERVICE_REPLICAS)
+    .max(MAX_SERVICE_REPLICAS),
+  autoscale: Yup.boolean().label('Autoscale').required(),
   vcpu: Yup.number()
     .label('vCPUs')
     .required()
@@ -106,7 +96,23 @@ const serviceValidationSchema = Yup.object({
   memory: Yup.number()
     .required()
     .min(MIN_SERVICE_MEMORY)
-    .max(MAX_SERVICE_MEMORY),
+    .max(MAX_SERVICE_MEMORY)
+    .test(
+      'is-matching-ratio',
+      `vCPU and Memory for this service must follow a 1:${RESOURCE_VCPU_MEMORY_RATIO} ratio when more than one replica is selected or when the autoscaler is activated.`,
+      (memory: number, { parent }) => {
+        if (parent.replicas === 1 && !parent.autoscale) {
+          return true;
+        }
+
+        return (
+          memory /
+            RESOURCE_MEMORY_MULTIPLIER /
+            (parent.vcpu / RESOURCE_VCPU_MULTIPLIER) ===
+          RESOURCE_VCPU_MEMORY_RATIO
+        );
+      },
+    ),
 });
 
 export const resourceSettingsValidationSchema = Yup.object({

dashboard/src/features/services/components/ServiceForm/ServiceForm.tsx

@@ -78,6 +78,7 @@ export default function ServiceForm({
         memory: 128,
       },
       replicas: 1,
+      autoscaler: null,
     },
     reValidateMode: 'onSubmit',
     resolver: yupResolver(validationSchema),
@@ -102,6 +103,9 @@ export default function ServiceForm({
   const getFormattedConfig = (values: ServiceFormValues) => {
     // Remove any __typename property from the values
     const sanitizedValues = removeTypename(values) as ServiceFormValues;
+    const sanitizedInitialDataPorts = initialData?.ports
+      ? removeTypename(initialData.ports)
+      : [];
 
     const config: ConfigRunServiceConfigInsertInput = {
       name: sanitizedValues.name,
@@ -120,6 +124,11 @@ export default function ServiceForm({
           capacity: item.capacity,
         })),
         replicas: sanitizedValues.replicas,
+        autoscaler: sanitizedValues.autoscaler
+          ? {
+              maxReplicas: sanitizedValues.autoscaler?.maxReplicas,
+            }
+          : null,
       },
       environment: sanitizedValues.environment.map((item) => ({
         name: item.name,
@@ -130,6 +139,10 @@ export default function ServiceForm({
         type: item.type,
         publish: item.publish,
         ingresses: item.ingresses,
+        rateLimit:
+          sanitizedInitialDataPorts.find(
+            (port) => port.port === item.port && port.type === item.type,
+          )?.rateLimit ?? null,
       })),
       healthCheck: sanitizedValues.healthCheck
         ? {

dashboard/src/features/services/components/ServiceForm/ServiceFormTypes.ts

@@ -25,6 +25,12 @@ export const validationSchema = Yup.object({
     memory: Yup.number().min(MIN_SERVICES_MEM).max(MAX_SERVICES_MEM).required(),
   }),
   replicas: Yup.number().min(0).max(MAX_SERVICE_REPLICAS).required(),
+  autoscaler: Yup.object()
+    .shape({
+      maxReplicas: Yup.number().min(0).max(MAX_SERVICE_REPLICAS),
+    })
+    .nullable()
+    .default(undefined),
   ports: Yup.array().of(
     Yup.object().shape({
       port: Yup.number().required(),
@@ -69,7 +75,16 @@ export interface ServiceFormProps extends DialogFormProps {
   /**
    * if there is initialData then it's an update operation
    */
-  initialData?: ServiceFormValues & { subdomain?: string }; // subdomain is only set on the backend
+  initialData?: Omit<ServiceFormValues, 'ports'> & {
+    subdomain?: string;
+    ports: {
+      port: number;
+      type: PortTypes;
+      publish: boolean;
+      ingresses?: { fqdn?: string[] }[] | null;
+      rateLimit?: { limit: number; interval: string } | null;
+    }[];
+  }; // subdomain is only set on the backend
 
   /**
    * Function to be called when the operation is cancelled.

dashboard/src/features/services/components/ServiceForm/components/ComputeFormSection/ComputeFormSection.tsx

@@ -70,7 +70,7 @@ export default function ComputeFormSection({
                 <a
                   target="_blank"
                   rel="noopener noreferrer"
-                  href="https://docs.nhost.io/run/resources"
+                  href="https://docs.nhost.io/guides/run/resources"
                   className="underline"
                 >
                   resources

dashboard/src/features/services/components/ServiceForm/components/PortsFormSection/PortsFormSection.tsx

@@ -38,7 +38,8 @@ export default function PortsFormSection() {
 
   const showURL = (index: number) =>
     formValues.subdomain &&
-    formValues.ports[index]?.type === PortTypes.HTTP &&
+    (formValues.ports[index]?.type === PortTypes.HTTP ||
+      formValues.ports[index]?.type === PortTypes.GRPC) &&
     formValues.ports[index]?.publish;
 
   return (
@@ -106,7 +107,7 @@ export default function PortsFormSection() {
                   },
                 }}
               >
-                {['http', 'tcp', 'udp']?.map((portType) => (
+                {['http', 'tcp', 'udp', 'grpc']?.map((portType) => (
                   <Option key={portType} value={portType}>
                     {portType}
                   </Option>
@@ -136,7 +137,7 @@ export default function PortsFormSection() {
               <InfoCard
                 title="URL"
                 value={getRunServicePortURL(
-                  currentProject?.subdomain,
+                  formValues?.subdomain,
                   currentProject?.region.name,
                   currentProject?.region.domain,
                   formValues.ports[index],

dashboard/src/features/services/components/ServiceForm/components/PortsFormSection/PortsFormSectionTypes.ts

@@ -2,4 +2,5 @@ export enum PortTypes {
   HTTP = 'http',
   TCP = 'tcp',
   UDP = 'udp',
+  GRPC = 'grpc',
 }

dashboard/src/features/services/components/ServiceForm/components/ReplicasFormSection/ReplicasFormSection.tsx

@@ -1,16 +1,32 @@
 import { Box } from '@/components/ui/v2/Box';
 import { InfoIcon } from '@/components/ui/v2/icons/InfoIcon';
-import { Slider } from '@/components/ui/v2/Slider';
+import { InfoOutlinedIcon } from '@/components/ui/v2/icons/InfoOutlinedIcon';
+import { Input } from '@/components/ui/v2/Input';
+import { Switch } from '@/components/ui/v2/Switch';
 import { Text } from '@/components/ui/v2/Text';
 import { Tooltip } from '@/components/ui/v2/Tooltip';
-import { MAX_SERVICE_REPLICAS } from '@/features/projects/resources/settings/utils/resourceSettingsValidationSchema';
 import type { ServiceFormValues } from '@/features/services/components/ServiceForm/ServiceFormTypes';
+import { useState } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 
 export default function ReplicasFormSection() {
-  const { setValue } = useFormContext<ServiceFormValues>();
+  const {
+    register,
+    setValue,
+    trigger: triggerValidation,
+  } = useFormContext<ServiceFormValues>();
+  const { replicas, autoscaler } = useWatch<ServiceFormValues>();
+  const [autoscalerEnabled, setAutoscalerEnabled] = useState(!!autoscaler);
 
-  const { replicas } = useWatch<ServiceFormValues>();
+  const toggleAutoscalerEnabled = async (enabled: boolean) => {
+    setAutoscalerEnabled(enabled);
+
+    if (!enabled) {
+      setValue('autoscaler', null);
+    } else {
+      setValue('autoscaler.maxReplicas', 10);
+    }
+  };
 
   const handleReplicasChange = (value: string) => {
     const updatedReplicas = parseInt(value, 10);
@@ -20,42 +36,85 @@ export default function ReplicasFormSection() {
     // TODO Trigger revalidate storage
   };
 
+  const handleMaxReplicasChange = (value: string) => {
+    const updatedReplicas = parseInt(value, 10);
+
+    setValue('autoscaler.maxReplicas', updatedReplicas, { shouldDirty: true });
+
+    triggerValidation('autoscaler.maxReplicas');
+  };
+
   return (
-    <Box className="space-y-4 rounded border-1 p-4">
+    <Box className="p-4 space-y-4 rounded border-1">
       <Box className="flex flex-row items-center space-x-2">
         <Text variant="h4" className="font-semibold">
           Replicas ({replicas})
         </Text>
         <Tooltip
           title={
-            <span>
-              Number of replicas for the service. Multiple replicas can process
-              requests/work in parallel. You can set replicas to 0 to pause the
-              service. Refer to{' '}
+            <Text className="text-white">
+              Learn more about{' '}
               <a
                 target="_blank"
                 rel="noopener noreferrer"
-                href="https://docs.nhost.io/run/resources"
+                href="https://docs.nhost.io/platform/service-replicas"
                 className="underline"
               >
-                resources
-              </a>{' '}
-              for more information.
-            </span>
+                Service Replicas
+              </a>
+            </Text>
           }
         >
-          <InfoIcon aria-label="Info" className="h-4 w-4" color="primary" />
+          <InfoIcon aria-label="Info" className="w-4 h-4" color="primary" />
         </Tooltip>
       </Box>
-      <Slider
-        value={replicas}
-        onChange={(_event, value) => handleReplicasChange(value.toString())}
-        min={0}
-        max={MAX_SERVICE_REPLICAS}
-        step={1}
-        aria-label="Replicas"
-        marks
-      />
+
+      <Box className="flex flex-col justify-between gap-4 lg:flex-row">
+        <Box className="flex flex-col gap-4 lg:flex-row lg:gap-8">
+          <Box className="flex flex-row items-center gap-2">
+            <Text className="w-28 lg:w-auto">Replicas</Text>
+            <Input
+              {...register('replicas')}
+              onChange={(event) => handleReplicasChange(event.target.value)}
+              type="number"
+              id="replicas"
+              placeholder="Replicas"
+              className="max-w-28"
+              hideEmptyHelperText
+              fullWidth
+              onWheel={(e) => (e.target as HTMLInputElement).blur()}
+              autoComplete="off"
+            />
+          </Box>
+          <Box className="flex flex-row items-center gap-2">
+            <Text className="w-28 text-nowrap lg:w-auto">Max Replicas</Text>
+            <Input
+              value={autoscaler?.maxReplicas}
+              onChange={(event) => handleMaxReplicasChange(event.target.value)}
+              type="number"
+              id="maxReplicas"
+              placeholder="10"
+              disabled={!autoscalerEnabled}
+              className="max-w-28"
+              hideEmptyHelperText
+              fullWidth
+              onWheel={(e) => (e.target as HTMLInputElement).blur()}
+              autoComplete="off"
+            />
+          </Box>
+        </Box>
+        <Box className="flex flex-row items-center gap-3">
+          <Switch
+            checked={autoscalerEnabled}
+            onChange={(e) => toggleAutoscalerEnabled(e.target.checked)}
+            className="self-center"
+          />
+          <Text>Autoscaler</Text>
+          <Tooltip title="Enable autoscaler to automatically provision extra run service replicas when needed.">
+            <InfoOutlinedIcon className="w-4 h-4 text-black" />
+          </Tooltip>
+        </Box>
+      </Box>
     </Box>
   );
 }

dashboard/src/features/services/components/ServiceForm/components/ServiceConfirmationDialog/ServiceConfirmationDialog.tsx

@@ -7,6 +7,7 @@ import { Tooltip } from '@/components/ui/v2/Tooltip';
 import { COST_PER_VCPU } from '@/features/projects/resources/settings/utils/resourceSettingsValidationSchema';
 import type { ServiceFormValues } from '@/features/services/components/ServiceForm/ServiceFormTypes';
 import { RESOURCE_VCPU_MULTIPLIER } from '@/utils/constants/common';
+import { useState } from 'react';
 
 export interface ServiceConfirmationDialogProps {
   /**
@@ -28,10 +29,21 @@ export default function ServiceConfirmationDialog({
   onCancel,
   onSubmit,
 }: ServiceConfirmationDialogProps) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
   const approximatePriceForService = parseFloat(
     (formValues.compute.cpu * formValues.replicas * COST_PER_VCPU).toFixed(2),
   );
 
+  const handleSubmit = async () => {
+    setIsSubmitting(true);
+    try {
+      await onSubmit();
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
   return (
     <div className="grid grid-flow-row gap-6 px-6 pb-6">
       <Box className="grid grid-flow-row gap-4">
@@ -74,7 +86,12 @@ export default function ServiceConfirmationDialog({
       </Box>
 
       <Box className="grid grid-flow-row gap-2">
-        <Button color="primary" onClick={onSubmit} autoFocus>
+        <Button
+          loading={isSubmitting}
+          color="primary"
+          onClick={handleSubmit}
+          autoFocus
+        >
           Confirm
         </Button>
 

dashboard/src/features/services/components/ServicesList/ServicesList.tsx

@@ -67,11 +67,13 @@ export default function ServicesList({
               type: item.type as PortTypes,
               publish: item.publish,
               ingresses: item.ingresses,
+              rateLimit: item.rateLimit,
             })),
             compute: service.config?.resources?.compute ?? {
               cpu: 62,
               memory: 128,
             },
+            autoscaler: service?.config?.resources?.autoscaler,
             replicas: service.config?.resources?.replicas,
             storage: service.config?.resources?.storage,
           }}
@@ -179,7 +181,10 @@ export default function ServicesList({
               <Dropdown.Item
                 className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
                 sx={{ color: 'error.main' }}
-                onClick={() => deleteService(service)}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  deleteService(service);
+                }}
                 disabled={!isPlatform}
               >
                 <TrashIcon className="w-4 h-4" />
@@ -193,4 +198,4 @@ export default function ServicesList({
       ))}
     </Box>
   );
-}
+}

dashboard/src/gql/app/settings/rate-limiting/getRateLimitConfig.gql

@@ -0,0 +1,46 @@
+query getRateLimitConfig($appId: uuid!, $resolve: Boolean!) {
+  config(appID: $appId, resolve: $resolve) {
+    hasura {
+      rateLimit {
+        limit
+        interval
+      }
+    }
+    storage {
+      rateLimit {
+        limit
+        interval
+      }
+    }
+    functions {
+      rateLimit {
+        limit
+        interval
+      }
+    }
+    auth {
+      rateLimit {
+        bruteForce {
+          limit
+          interval
+        }
+        emails {
+          limit
+          interval
+        }
+        global {
+          limit
+          interval
+        }
+        signups {
+          limit
+          interval
+        }
+        sms {
+          limit
+          interval
+        }
+      }
+    }
+  }
+}

dashboard/src/gql/app/settings/rate-limiting/updateRateLimitConfig.gql

@@ -0,0 +1,49 @@
+mutation UpdateRateLimitConfig(
+  $appId: uuid!
+  $config: ConfigConfigUpdateInput!
+) {
+  updateConfig(appID: $appId, config: $config) {
+    hasura {
+      rateLimit {
+        limit
+        interval
+      }
+    }
+    storage {
+      rateLimit {
+        limit
+        interval
+      }
+    }
+    functions {
+      rateLimit {
+        limit
+        interval
+      }
+    }
+    auth {
+      rateLimit {
+        bruteForce {
+          limit
+          interval
+        }
+        emails {
+          limit
+          interval
+        }
+        global {
+          limit
+          interval
+        }
+        signups {
+          limit
+          interval
+        }
+        sms {
+          limit
+          interval
+        }
+      }
+    }
+  }
+}

dashboard/src/gql/app/settings/updateDatabaseVersion.graphql

@@ -0,0 +1,3 @@
+mutation UpdateDatabaseVersion($appId: uuid!, $version: String!) {
+  changeDatabaseVersion(appID: $appId, version: $version)
+}

dashboard/src/gql/logs/getSystemLogs.gql

@@ -0,0 +1,11 @@
+query getSystemLogs(
+  $appID: String!
+  $action: String!
+  $from: Timestamp
+  $to: Timestamp
+) {
+  systemLogs(appID: $appID, action: $action, from: $from) {
+    timestamp
+    log
+  }
+}

dashboard/src/gql/services/getRunService.graphql

@@ -19,6 +19,9 @@ query getRunService($id: uuid!, $resolve: Boolean!) {
           capacity
         }
         replicas
+        autoscaler {
+          maxReplicas
+        }
       }
       environment {
         name

dashboard/src/gql/services/getRunServices.graphql

@@ -15,6 +15,9 @@ fragment RunServiceConfig on ConfigRunServiceConfig {
       capacity
     }
     replicas
+    autoscaler {
+      maxReplicas
+    }
   }
   environment {
     name
@@ -27,6 +30,10 @@ fragment RunServiceConfig on ConfigRunServiceConfig {
     ingresses {
       fqdn
     }
+    rateLimit {
+      limit
+      interval
+    }
   }
   healthCheck {
     port

dashboard/src/gql/services/getRunServicesRateLimit.gql

@@ -0,0 +1,38 @@
+fragment RunServiceRateLimit on ConfigRunServiceConfig {
+  name
+  ports {
+    port
+    type
+    publish
+    rateLimit {
+      limit
+      interval
+    }
+    ingresses {
+      fqdn
+    }
+  }
+}
+
+query getRunServicesRateLimit($appID: uuid!, $resolve: Boolean!) {
+  app(id: $appID) {
+    runServices {
+      id
+      createdAt
+      updatedAt
+      subdomain
+      config(resolve: $resolve) {
+        ...RunServiceRateLimit
+      }
+    }
+  }
+}
+
+query getLocalRunServiceRateLimit($appID: uuid!, $resolve: Boolean!) {
+  runServiceConfigs(appID: $appID, resolve: $resolve) {
+    serviceID
+    config {
+      ...RunServiceRateLimit
+    }
+  }
+}

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

@@ -43,6 +43,8 @@ export default function AppIndexPage() {
       return <ApplicationUnpausing />;
     case ApplicationStatus.Restoring:
       return <ApplicationRestoring />;
+    case ApplicationStatus.Migrating:
+      return <ApplicationLive />;
     default:
       return <ApplicationUnknown />;
   }

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

@@ -60,6 +60,7 @@ export default function ServicesPage() {
                     cpu: 62,
                     memory: 128,
                   },
+                  autoscaler: parsedConfig?.resources?.autoscaler,
                   image: parsedConfig?.image?.image,
                   command: parsedConfig?.command?.join(' '),
                   ports: parsedConfig?.ports.map((item) => ({

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

@@ -6,6 +6,7 @@ import { AllowedRedirectURLsSettings } from '@/features/authentication/settings/
 import { AuthServiceVersionSettings } from '@/features/authentication/settings/components/AuthServiceVersionSettings';
 import { BlockedEmailSettings } from '@/features/authentication/settings/components/BlockedEmailSettings';
 import { ClientURLSettings } from '@/features/authentication/settings/components/ClientURLSettings';
+import { ConcealErrorsSettings } from '@/features/authentication/settings/components/ConcealErrorsSettings';
 import { DisableNewUsersSettings } from '@/features/authentication/settings/components/DisableNewUsersSettings';
 import { GravatarSettings } from '@/features/authentication/settings/components/GravatarSettings';
 import { MFASettings } from '@/features/authentication/settings/components/MFASettings';
@@ -43,7 +44,7 @@ export default function SettingsAuthenticationPage() {
 
   return (
     <Container
-      className="grid max-w-5xl grid-flow-row bg-transparent gap-y-6"
+      className="grid max-w-5xl grid-flow-row gap-y-6 bg-transparent"
       rootClassName="bg-transparent"
     >
       <AuthServiceVersionSettings />
@@ -55,6 +56,7 @@ export default function SettingsAuthenticationPage() {
       <SessionSettings />
       <GravatarSettings />
       <DisableNewUsersSettings />
+      <ConcealErrorsSettings />
     </Container>
   );
 }