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

chore: update versions

.changeset/config.json

@@ -5,6 +5,5 @@
   "linked": [],
   "access": "restricted",
   "baseBranch": "main",
-  "updateInternalDependencies": "patch",
-  "ignore": []
-}
+  "updateInternalDependencies": "patch"
+}

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

@@ -14,7 +14,7 @@ runs:
   steps:
     - uses: pnpm/action-setup@v2.2.4
       with:
-        version: 8.6.0
+        version: 8.6.2
         run_install: false
     - name: Get pnpm cache directory
       id: pnpm-cache-dir
@@ -26,10 +26,10 @@ runs:
         path: ${{ steps.pnpm-cache-dir.outputs.dir }}
         key: ${{ runner.os }}-node-${{ hashFiles('pnpm-lock.yaml') }}
         restore-keys: ${{ runner.os }}-node-
-    - name: Use Node.js 16
+    - name: Use Node.js v18
       uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version: 18
     - shell: bash
       name: Install packages
       run: pnpm install --frozen-lockfile

.github/workflows/changesets.yaml

@@ -10,6 +10,7 @@ on:
       - '**.md'
       - '!.changeset/**'
       - 'LICENSE'
+  workflow_dispatch:
 
 env:
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
@@ -41,6 +42,7 @@ jobs:
           commit: 'chore: update versions'
           title: 'chore: update versions'
           publish: pnpm run release
+          createGithubReleases: false
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
@@ -61,12 +63,39 @@ jobs:
     uses: ./.github/workflows/dashboard.yaml
     secrets: inherit
 
+  publish-vercel:
+    name: Publish to Vercel
+    runs-on: ubuntu-latest
+    needs:
+      - test
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Install Node and dependencies
+        uses: ./.github/actions/install-dependencies
+        with:
+          TURBO_TOKEN: ${{ env.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ env.TURBO_TEAM }}
+      - name: Setup Vercel CLI
+        run: pnpm add -g vercel
+      - name: Trigger a Vercel deployment
+        env:
+          VERCEL_ORG_ID: ${{ secrets.DASHBOARD_VERCEL_TEAM_ID }}
+          VERCEL_PROJECT_ID: ${{ secrets.DASHBOARD_VERCEL_PROJECT_ID }}
+        run: |
+          vercel pull --environment=production --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
+          vercel build --prod --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
+          vercel deploy --prebuilt --prod --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
+
   publish-docker:
     name: Publish to Docker Hub
     runs-on: ubuntu-latest
     needs:
       - test
       - version
+      - publish-vercel
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3
@@ -99,7 +128,7 @@ jobs:
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Build and push to Docker Hub
         uses: docker/build-push-action@v4
-        timeout-minutes: 60
+        timeout-minutes: 90
         with:
           context: .
           file: ./dashboard/Dockerfile
@@ -112,42 +141,6 @@ jobs:
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           push: true
-      - name: Create GitHub Release
-        uses: taiki-e/create-gh-release-action@v1
-        with:
-          changelog: dashboard/CHANGELOG.md
-          token: ${{ secrets.GITHUB_TOKEN }}
-          prefix: ${{ env.DASHBOARD_PACKAGE }}@
-          ref: refs/tags/${{ env.DASHBOARD_PACKAGE }}@${{ needs.version.outputs.dashboardVersion }}
-      - name: Remove tag on failure
-        if: failure()
-        run: git push --delete origin ${{ env.DASHBOARD_PACKAGE }}@${{ needs.version.outputs.dashboardVersion }}
-
-  publish-vercel:
-    name: Publish to Vercel
-    runs-on: ubuntu-latest
-    needs:
-      - publish-docker
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - name: Install Node and dependencies
-        uses: ./.github/actions/install-dependencies
-        with:
-          TURBO_TOKEN: ${{ env.TURBO_TOKEN }}
-          TURBO_TEAM: ${{ env.TURBO_TEAM }}
-      - name: Setup Vercel CLI
-        run: pnpm add -g vercel
-      - name: Trigger a Vercel deployment
-        env:
-          VERCEL_ORG_ID: ${{ secrets.DASHBOARD_VERCEL_TEAM_ID }}
-          VERCEL_PROJECT_ID: ${{ secrets.DASHBOARD_VERCEL_PROJECT_ID }}
-        run: |
-          vercel pull --environment=production --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
-          vercel build --prod --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
-          vercel deploy --prebuilt --prod --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
 
   bump-cli:
     name: Bump Dashboard version in the Nhost CLI

.github/workflows/ci.yaml

@@ -43,7 +43,7 @@ jobs:
           BUILD: 'all'
       - name: Check if the pnpm lockfile changed
         id: changed-lockfile
-        uses: tj-actions/changed-files@v36
+        uses: tj-actions/changed-files@v37
         with:
           files: pnpm-lock.yaml
       # * Determine a pnpm filter argument for packages that have been modified.
@@ -146,6 +146,7 @@ jobs:
         run: echo "NHOST_TEST_DASHBOARD_URL=https://${{ steps.fetch-dashboard-preview-url.outputs.preview_url }}" >> $GITHUB_ENV
       # * Run the `ci` script of the current package of the matrix. Dependencies build is cached by Turborepo
       - name: Run e2e tests
+        timeout-minutes: 15
         run: pnpm --filter="${{ matrix.package.name }}" run e2e
       - id: file-name
         if: ${{ failure() }}

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,56 @@
+name: "CodeQL"
+
+on:
+  push: {}
+  pull_request: {}
+  schedule:
+    - cron: '20 23 * * 3'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://git.io/codeql-language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v2
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v2
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2

.gitignore

@@ -19,10 +19,8 @@ logs/
 coverage/
 dist/
 umd/
-lib/
 node_modules/
 tmp/
-.docz/
 .pnpm-store
 .turbo
 .env
@@ -32,7 +30,6 @@ out/
 # Custom
 *.min.js
 *.map
-todo.md
 
 # Config files that are not part of the repository root anymore. Should be removed in the future.
 /.eslintignore
@@ -62,3 +59,7 @@ todo.md
 
 # Nhost CLI data
 .nhost
+
+# Nix
+.envrc
+.direnv/

.vscode/settings.json

@@ -2,5 +2,6 @@
   "editor.codeActionsOnSave": {
     "source.organizeImports": true
   },
-  "eslint.workingDirectories": ["./dashboard"]
+  "eslint.workingDirectories": ["./dashboard"],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

DEVELOPERS.md

@@ -1,16 +1,37 @@
-# Developer guide
+# Developer Guide
 
 ## Requirements
 
-- This repository works with **Node 16**
+### Node.js v18
 
-- We use [pnpm](https://pnpm.io/) as a package manager to speed up development and builds, and as a basis for our monorepo. You need to make sure it's installed on your machine. There are [several ways to install it](https://pnpm.io/installation), but the easiest way is with `npm`:
+_⚠️ Node.js v16 is also supported for the time being but support will be dropped in the near future_.
+
+### [pnpm](https://pnpm.io/) package manager
+
+The easiest way to install `pnpm` if it's not installed on your machine yet is to use `npm`:
 
 ```sh
 $ npm install -g pnpm
 ```
 
-- Our tests and examples use the Nhost CLI, to run the backend services locally. You can follow the installation instructions in [our documentation](https://docs.nhost.io/get-started/cli-workflow/install-cli).
+### [Nhost CLI](https://docs.nhost.io/cli)
+
+- The CLI is primarily used for running the E2E tests
+- Please refer to the [installation guide](https://docs.nhost.io/get-started/cli-workflow/install-cli) if you have not installed it yet
+
+## File Structure
+
+The repository is organized as a monorepo, with the following structure (only relevant folders are shown):
+
+```
+assets/            # Assets used in the README
+config/            # Configuration files for the monorepo
+dashboard/         # Dashboard
+docs/              # Documentation website
+examples/          # Example projects
+packages/          # Core packages
+integrations/      # These are packages that rely on the core packages
+```
 
 ## Get started
 
@@ -31,25 +52,25 @@ $ pnpm install
 
 ### Development
 
-Although package references are correctly updated on the fly for TypeScript, example projects won't
-see the changes because they are depending on the build output. To fix this, you can run packages
-in development mode.
+Although package references are correctly updated on the fly for TypeScript, example projects and the dashboard won't see the changes because they are depending on the build output. To fix this, you can run packages in development mode.
 
-Running packages in development mode is as simple as:
+Running packages in development mode from the root folder is as simple as:
 
 ```sh
 $ pnpm dev
 ```
 
-Our packages are linked together using [PNPM's workspace](https://pnpm.io/workspaces) feature. Vite automatically detects changes in the dependencies and rebuilds everything, so that the changes are immediately reflected in the other packages.
+Our packages are linked together using [PNPM's workspace](https://pnpm.io/workspaces) feature. Next.js and Vite automatically detect changes in the dependencies and rebuild everything, so the changes will be reflected in the examples and the dashboard.
 
-### Use examples
+**Note:** It's possible that Next.js or Vite throw an error when you run `pnpm dev`. Restarting the process should fix it.
+
+### Use Examples
 
 Examples are a great way to test your changes in practice. Make sure you've `pnpm dev` running in your terminal and then run an example.
 
 Let's follow the instructions to run [react-apollo example](https://github.com/nhost/nhost/blob/main/examples/react-apollo/README.md).
 
-## Run the documentation website locally
+## Edit Documentation
 
 The easier way to contribute to our documentation is to go to the `docs` folder and follow the [instructions to start local development](https://github.com/nhost/nhost/blob/main/docs/README.md):
 
@@ -60,9 +81,9 @@ $ pnpm install
 $ pnpm start
 ```
 
-## Run test suites
+## Run Test Suites
 
-### Unit tests
+### Unit Tests
 
 You can run the unit tests with the following command from the repository root:
 
@@ -70,7 +91,7 @@ You can run the unit tests with the following command from the repository root:
 $ pnpm test
 ```
 
-### End-to-end tests
+### E2E Tests
 
 Each package that defines end-to-end tests embeds their own Nhost configuration, that will be automatically when running the tests. As a result, you must make sure you are not running the Nhost CLI before running the tests.
 
@@ -83,24 +104,60 @@ $ pnpm e2e
 ## Changesets
 
 If you've made changes to the packages, you must describe those changes so that they can be reflected in the next release.
-We use [changesets](https://github.com/changesets/changesets) to support our versioning and release workflows. When you submit a pull request, a bot checks if some changesets are present, and if not, it directs you to add them.
+We use [changesets](https://github.com/changesets/changesets) to support our versioning and release workflows. When you submit a pull request, a bot checks if changesets are present, and if not, it asks you to add them.
 
-The most comprehensive way to add a changeset is to run the following command in the repository root:
+To create a changeset, run the following command from the repository root:
 
 ```sh
 $ pnpm changeset
 ```
 
-This will create a file in the `.changeset` directory. You can edit it to give more details about the change you just made.
+This command will guide you through the process of creating a changeset. It will create a file in the `.changeset` directory.
 
 You can take a look at the changeset documentation: [How to add a changeset](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).
 
-## Committing changes
+### Selecting the Version
 
-You'll notice that `git commit` takes a few seconds to run. We set a commit hook that scans the changes in the code, automatically generates documentation from the inline [TSDoc](https://tsdoc.org/) annotations, and adds these generated documentation files to the commit. They automatically update the [reference documentation](https://docs.nhost.io/reference).
+When you create a changeset, you will be asked to select the version of the package that you are bumping. The versioning scheme is as follows:
 
+- **major**
+  - For breaking changes (e.g: changing the function signature, etc.)
+  - Should be avoided as much as possible as it will require users to update their code. Instead, consider supporting both the old and the new API simultaneously for a while.
+  - For example: `v1.5.8` -> `v2.0.0`
+- **minor**
+  - For new features (e.g: adding a new page to the dashboard, etc.)
+  - For example: `v1.5.8` -> `v1.6.0`
+- **patch**
+  - For bug fixes (e.g: fixing a typo, etc.)
+  - For example: `v1.5.8` -> `v1.5.9`
 
-<!-- ## Good practices
-- lint
-- prettier
-- documentation -->
+### Writing Good Changesets
+
+A concise summary that describes the changes should be added to each PR. This summary will be used as the changeset description.
+
+The following structure is used for describing changes:
+
+- **The type of the change**:
+
+  - fix
+  - feat
+  - chore
+  - docs
+
+- **The scope of the change** (_broader scopes (e.g: dashboard, hasura-storage-js, etc.) are not recommended as GitHub Releases already contain which project is being bumped_):
+
+  - projects
+  - deployments
+  - deps
+  - etc.
+
+- **A short summary of the changes that were made**
+
+**Examples:**
+
+- `fix(deployments): use correct timestamp for deployment details`
+- `chore(deps): bump @types/react to v18.2.8`
+- `feat(secrets): enable secrets`
+- etc.
+
+You can always take a look at examples of changesets in the [GitHub Releases section](https://github.com/nhost/nhost/releases).

README.md

@@ -34,7 +34,7 @@ Nhost consists of open source software:
 - Authentication: [Hasura Auth](https://github.com/nhost/hasura-auth/)
 - Storage: [Hasura Storage](https://github.com/nhost/hasura-storage)
 - Serverless Functions: Node.js (JavaScript and TypeScript)
-- [Nhost CLI](https://docs.nhost.io/reference/cli) for local development
+- [Nhost CLI](https://docs.nhost.io/cli) for local development
 
 ## Architecture of Nhost
 
@@ -97,7 +97,7 @@ Nhost is frontend agnostic, which means Nhost works with all frontend frameworks
 
 # Resources
 
-- Start developing locally with the [Nhost CLI](https://docs.nhost.io/reference/cli)
+- Start developing locally with the [Nhost CLI](https://docs.nhost.io/cli)
 
 ## Nhost Clients
 

config/vite.react.config.js

@@ -7,7 +7,8 @@ import baseLibConfig from './vite.lib.config'
 export default defineConfig({
   ...baseLibConfig,
   optimizeDeps: {
-    include: ['react/jsx-runtime']
+    include: ['react/jsx-runtime'],
+    exclude: ['react-hook-form']
   },
   plugins: [react({ jsxRuntime: 'classic' }), ...baseLibConfig.plugins]
 })

dashboard/.storybook/preview.js

@@ -2,13 +2,14 @@ import '@fontsource/inter';
 import '@fontsource/inter/500.css';
 import '@fontsource/inter/700.css';
 import { CssBaseline, ThemeProvider } from '@mui/material';
+import { NhostClient, NhostProvider } from '@nhost/nextjs';
 import { NhostApolloProvider } from '@nhost/react-apollo';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Buffer } from 'buffer';
 import { initialize, mswDecorator } from 'msw-storybook-addon';
 import { RouterContext } from 'next/dist/shared/lib/router-context';
+import { createTheme } from '../src/components/ui/v2/createTheme';
 import '../src/styles/globals.css';
-import createTheme from '../src/theme/createTheme';
 
 global.Buffer = Buffer;
 
@@ -56,5 +57,10 @@ export const decorators = [
       <Story />
     </NhostApolloProvider>
   ),
+  (Story) => (
+    <NhostProvider nhost={new NhostClient({ subdomain: 'local' })}>
+      <Story />
+    </NhostProvider>
+  ),
   mswDecorator,
 ];

dashboard/CHANGELOG.md

@@ -1,5 +1,400 @@
 # @nhost/dashboard
 
+## 1.0.1
+
+### Patch Changes
+
+- @nhost/react-apollo@7.0.1
+- @nhost/nextjs@2.0.1
+
+## 1.0.0
+
+### Major Changes
+
+- bc9eff6e4: chore: remove support for using backendUrl when instantiating the Nhost client
+
+### Patch Changes
+
+- Updated dependencies [bc9eff6e4]
+  - @nhost/nextjs@2.0.0
+  - @nhost/react-apollo@7.0.0
+
+## 0.21.1
+
+### Patch Changes
+
+- 97ced73a3: fix(dashboard): prevent dashboard from resolving secrets
+
+## 0.21.0
+
+### Minor Changes
+
+- ed1a8d458: Update alert message on increasing PostgreSQL's volume capacity
+- 2e2248fd4: feat(dashboard): add SQL editor
+
+## 0.20.28
+
+### Patch Changes
+
+- 7c2c31082: feat: add support for users to delete their account
+  - @nhost/react-apollo@6.0.1
+  - @nhost/nextjs@1.13.40
+
+## 0.20.27
+
+### Patch Changes
+
+- fa79b7709: chore(dashboard): tweaks and fixes to the service form and dialog
+- 8df84d782: fix(dashboard): allow resetting custom domains
+  - @nhost/react-apollo@6.0.0
+  - @nhost/nextjs@1.13.39
+
+## 0.20.26
+
+### Patch Changes
+
+- 331ba0376: feat(dashboard): add postgres storage capacity modifier in the settings
+- b7f801874: feat(dashboard): add new settings page for custom domains
+
+## 0.20.25
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.38
+
+## 0.20.24
+
+### Patch Changes
+
+- e10389ecf: fix(dashboard): disable run tab when developing locally
+  - @nhost/react-apollo@5.0.37
+
+## 0.20.23
+
+### Patch Changes
+
+- c01568a7d: chore(dashboard): show alert to update oauth providers
+
+## 0.20.22
+
+### Patch Changes
+
+- c3efb7ec8: feat(dashboard): query latest announcement from platform
+
+## 0.20.21
+
+### Patch Changes
+
+- 3e46d3873: chore: update link to node18 announcement
+
+## 0.20.20
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.36
+- @nhost/nextjs@1.13.38
+
+## 0.20.19
+
+### Patch Changes
+
+- 75c4c8ae3: feat(dashboard): make env value input multiline
+
+## 0.20.18
+
+### Patch Changes
+
+- 425d485f8: fix(dashboard): make sure dedicated resources pricing follows total resources
+
+## 0.20.17
+
+### Patch Changes
+
+- ae324f67f: fix(dashboard): remove unused graphql fields
+
+## 0.20.16
+
+### Patch Changes
+
+- df5b4302c: chore(dashboard): remove run feature flag
+- bf4a1f6c2: feat(dashboard): fetch auth, postgres, hasura and storage versions from dashboard
+- 34fc08ca7: fix(dashboard/run): show correct private registry in service details
+- 885d10620: chore(dashboard): change feedback to contact us
+
+## 0.20.15
+
+### Patch Changes
+
+- ed16c8b5d: feat(run): add a confirmation dialog when deleting a run service
+- 216990888: fix(run): center loading indicator when selecting a project
+
+## 0.20.14
+
+### Patch Changes
+
+- 9fbea9787: feat: add node18 announcement
+
+## 0.20.13
+
+### Patch Changes
+
+- e84acf469: fix(run): handle subdomain undefined error when creating a new service
+
+## 0.20.12
+
+### Patch Changes
+
+- b7c799d62: feat(run): add dialog to copy registry and URLs
+
+## 0.20.11
+
+### Patch Changes
+
+- 8903e6abd: fix(dashboard): show correct egress limit in usage stats
+
+## 0.20.10
+
+### Patch Changes
+
+- 666a75a23: feat(dashboard): add functions execution time and egress volume to usage stats
+
+## 0.20.9
+
+### Patch Changes
+
+- 5e1e80aa8: fix(dashboard): show correct locales in user details
+  - @nhost/react-apollo@5.0.35
+  - @nhost/nextjs@1.13.37
+
+## 0.20.8
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.34
+- @nhost/nextjs@1.13.36
+
+## 0.20.7
+
+### Patch Changes
+
+- 4a7ede11e: fix: distinguish files that were not uploaded
+- 202b64723: feat(nhost-run): add support for one-click-install run services
+- 074a0fa11: feat(dashboard): add settings toggle to enable/disable antivirus
+  - @nhost/react-apollo@5.0.33
+  - @nhost/nextjs@1.13.35
+
+## 0.20.6
+
+### Patch Changes
+
+- b20761e97: feat(services): add pricing info and confirmation dialog
+- 90df6d81d: fix(services): handle null values when editing a service
+- aa8508467: fix: query service logs correctly
+  feat: enable multiline support for environment value input
+
+## 0.20.5
+
+### Patch Changes
+
+- 8d7f84b8d: fix: make announcement adapt to theme
+
+## 0.20.4
+
+### Patch Changes
+
+- 3b75bfce2: fix: make announcement close properly
+- f49819075: fix: show correct values when dedicated resources are disabled
+
+## 0.20.3
+
+### Patch Changes
+
+- e643bd362: fix(services): fix errors when config is null
+- bcdab66bf: feat: add annoucement for nhost run
+- f967a2e59: added note about storage not being able to be downsized
+- 311c7756d: chore(services): consistent naming for compute
+
+## 0.20.2
+
+### Patch Changes
+
+- 9073182d5: chore(dashboard): bump `turbo` to 1.10.11
+- ece717d6e: feat(logs): show services in the logs page
+- 82b335311: feat(metrics): change grafana link to point to the dashboards
+- b135ef695: fix(services): set command as optional and set min replicas to 0
+
+## 0.20.1
+
+### Patch Changes
+
+- 3d5c34f4c: fix(auth): fix users pagination limit
+
+## 0.20.0
+
+### Minor Changes
+
+- c99d117d1: feat(services): add support for custom services
+
+## 0.19.2
+
+### Patch Changes
+
+- face99ccd: chore(deps): bump turbo version
+- cfe527307: style: tweak pull config warning in dark mode
+- a9d7da8af: chore(deps): update dependency @types/pluralize to ^0.0.30
+- 9aa4371ef: chore: add hasura-auth version 0.21.2
+- d14e112bf: chore(deps): update dependency prettier-plugin-tailwindcss to ^0.4.0
+- d3e8bb94a: chore(deps): update dependency vite-plugin-dts to v3
+
+## 0.19.1
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.32
+- @nhost/nextjs@1.13.34
+
+## 0.19.0
+
+### Minor Changes
+
+- 9c61c69a7: chore(dashboard):add postgres 14.6-20230705-1 to the version selector
+
+### Patch Changes
+
+- 47bda15ff: feat(settings): add warning to pull config
+
+## 0.18.0
+
+### Minor Changes
+
+- ee0b9b8ed: chore(dashboard):add hasura v2.28.2 and v2.29.0 to the version selector
+
+## 0.17.20
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.31
+- @nhost/nextjs@1.13.33
+
+## 0.17.19
+
+### Patch Changes
+
+- f866120a6: fix(users): use the password length from the config
+
+## 0.17.18
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.30
+- @nhost/nextjs@1.13.32
+
+## 0.17.17
+
+### Patch Changes
+
+- ea7b102c0: fix(pat): highlight expired tokens
+
+## 0.17.16
+
+### Patch Changes
+
+- b3b64a3b7: chore(deps): bump `@types/react` to `v18.2.14` and `@types/react-dom` to `v18.2.6`
+- 32b221f94: chore(deps): bump `graphiql` to `v3`
+- 3a56c12df: chore(deps): bump `turbo` to `v1.10.6`
+- Updated dependencies [b3b64a3b7]
+  - @nhost/react-apollo@5.0.29
+  - @nhost/nextjs@1.13.31
+
+## 0.17.15
+
+### Patch Changes
+
+- f41fdc12a: chore(deps): bump `turbo` to `1.10.5`
+- 6199c1c55: fix(projects): don't redirect to 404 page
+- Updated dependencies [07a45fde0]
+  - @nhost/react-apollo@5.0.28
+  - @nhost/nextjs@1.13.30
+
+## 0.17.14
+
+### Patch Changes
+
+- 80b22724d: chore(deps): bump `@types/react` to `v18.2.13`, `@types/react-dom` to `v18.2.6` and `@storybook/testing-library` to `v0.2.0`
+
+## 0.17.13
+
+### Patch Changes
+
+- cc02902cb: chore(docs): update environment variable documentation
+
+## 0.17.12
+
+### Patch Changes
+
+- 660d339e1: fix(storybook): don't break storybook
+- 660d339e1: fix(tests): prevent warnings during tests
+  - @nhost/react-apollo@5.0.27
+  - @nhost/nextjs@1.13.29
+
+## 0.17.11
+
+### Patch Changes
+
+- bd4d0c270: chore(dashboard):add postgres 14.6-20230613-1 to the version selector
+
+## 0.17.10
+
+### Patch Changes
+
+- c8c2a10b2: fix(database): don't break the password reset flow
+- e70b45498: chore(deps): bump `@types/react` to `v18.2.12` and `@types/react-dom` to `v18.2.5`
+
+## 0.17.9
+
+### Patch Changes
+
+- 842055099: chore(deps): bump `turbo` to `v1.10.3` and `pnpm` to `v8.6.2`
+- fd12aa0a8: chore(projects): remove the postgres password input from the project creation screen
+- 022b76e78: chore(deps): bump `@types/react` to `v18.2.11`
+- 3555ab2b7: chore(deps): bump `vitest` monorepo to `v0.32.0`
+- c43e54922: feat(backups): add download button to backups
+
+## 0.17.8
+
+### Patch Changes
+
+- d0457fe5c: feat(settings): improve the dashboard and config parity
+  - @nhost/react-apollo@5.0.26
+  - @nhost/nextjs@1.13.28
+
+## 0.17.7
+
+### Patch Changes
+
+- 4f0368b95: fix(account): don't break account settings page
+
+## 0.17.6
+
+### Patch Changes
+
+- 64a8f41d0: chore(resources): lower the maximum allowed resources per service
+
+## 0.17.5
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.25
+- @nhost/nextjs@1.13.27
+
+## 0.17.4
+
+### Patch Changes
+
+- 9b1d0f7a5: fix(deployments): use correct timestamp for deployment details
+- 6d2963ffa: chore(deps): bump `@types/react` to `v18.2.8`
+- 8871267b9: chore(deps): downgrade `pnpm` to `v8.5.1` because of no Turborepo support
+
 ## 0.17.3
 
 ### Patch Changes

dashboard/Dockerfile

@@ -1,13 +1,13 @@
-FROM node:16-alpine AS pruner
+FROM node:18-alpine AS pruner
 RUN apk add --no-cache libc6-compat
 RUN apk update
 WORKDIR /app
 
-RUN yarn global add turbo@1.10.1
+RUN yarn global add turbo@1.10.11
 COPY . .
 RUN turbo prune --scope="@nhost/dashboard" --docker
 
-FROM node:16-alpine AS builder
+FROM node:18-alpine AS builder
 ARG TURBO_TOKEN
 ARG TURBO_TEAM
 
@@ -29,7 +29,7 @@ ENV NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL __NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL_
 ENV NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL __NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL__
 ENV NEXT_PUBLIC_NHOST_HASURA_API_URL __NEXT_PUBLIC_NHOST_HASURA_API_URL__
 
-RUN yarn global add pnpm@8.6.0
+RUN yarn global add pnpm@8.6.2
 COPY .gitignore .gitignore
 COPY --from=pruner /app/out/json/ .
 COPY --from=pruner /app/out/pnpm-*.yaml .
@@ -40,7 +40,7 @@ COPY turbo.json turbo.json
 COPY config/ config/
 RUN pnpm build:dashboard
 
-FROM node:16-alpine AS runner
+FROM node:18-alpine AS runner
 WORKDIR /app
 
 RUN addgroup --system --gid 1001 nodejs

dashboard/README.md

@@ -3,10 +3,26 @@
 This is the Nhost Dashboard, a web application that allows you to manage your Nhost projects.
 To get started, you need to have an Nhost project. If you don't have one, you can [create a project here](https://app.nhost.io).
 
+First, install the dependencies:
+
 ```bash
 pnpm install
 ```
 
+Then, build the packages that are used by the Nhost Dashboard:
+
+```bash
+pnpm -w build
+```
+
+Finally, run the development server:
+
+```bash
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) to see the result in your browser.
+
 ## Environment
 
 ### Setup Environment Variables
@@ -54,6 +70,12 @@ Components are documented using [Storybook](https://storybook.js.org/). To run S
 pnpm storybook
 ```
 
+By default, Storybook will run on port `6006`. You can change this by passing the `--port` flag:
+
+```bash
+pnpm storybook --port 6007
+```
+
 ### General Environment Variables
 
 | Name                             | Description                                                                                                                                                                                                          |
@@ -110,15 +132,19 @@ pnpm storybook
 | `@typescript-eslint/naming-convention`       | Enforces a consistent naming convention.                                                                                                                     |
 | `no-restricted-imports`                      | Enforces absolute imports and consistent import paths for components from `src/components/ui` folder.                                                        |
 
-### End-to-End Tests
+### Unit Tests
 
-End-to-end tests are written using [Playwright](https://playwright.dev/). To run the tests, run the following command:
+Unit tests are written using [Vitest](https://vitest.dev/). To run the tests, run the following command:
 
 ```bash
-pnpm e2e
+pnpm test
 ```
 
-Most of the tests require access to the Nhost test user. To run these tests, you need to set the following environment variables in `.env.test`:
+### End-to-End Tests
+
+Most of the end-to-end tests require access to an Nhost test user and a live project. You can register a user and create a test project on the [Nhost Dashboard](https://app.nhost.io/).
+
+Next, you need to create a project. Create a `.env.test` file with the following variables:
 
 ```
 NHOST_TEST_DASHBOARD_URL=<test_dashboard_url>
@@ -128,3 +154,20 @@ NHOST_TEST_WORKSPACE_NAME=<test_workspace_name>
 NHOST_TEST_PROJECT_NAME=<test_project_name>
 NHOST_TEST_PROJECT_ADMIN_SECRET=<test_project_admin_secret>
 ```
+
+**Required Variables**:
+
+- `NHOST_TEST_DASHBOARD_URL`: The URL to run the tests against (e.g: http://localhost:3000 or https://staging.app.nhost.io)
+- `NHOST_TEST_USER_EMAIL`: Email address of the test user that owns the test project
+- `NHOST_TEST_USER_PASSWORD`: Password of the test user that owns the test project
+- `NHOST_TEST_WORKSPACE_NAME`: Name of the workspace that contains the test project
+- `NHOST_TEST_PROJECT_NAME`: Name of the test project
+- `NHOST_TEST_PROJECT_ADMIN_SECRET`: Admin secret of the test project
+
+Make sure to copy the workspace and project information from the [Nhost Dashboard](https://app.nhost.io/).
+
+End-to-end tests are written using [Playwright](https://playwright.dev/). To run the tests, run the following command:
+
+```bash
+pnpm e2e
+```

dashboard/e2e/overview/overview.test.ts

@@ -30,7 +30,7 @@ test('should show a sidebar with menu items', async () => {
   const navLocator = page.getByRole('navigation', { name: /main navigation/i });
   await expect(navLocator).toBeVisible();
   await expect(navLocator.getByRole('list').getByRole('listitem')).toHaveCount(
-    11,
+    12,
   );
   await expect(
     navLocator.getByRole('link', { name: /overview/i }),

dashboard/global-teardown.ts

@@ -9,7 +9,7 @@ import { openProject } from '@/e2e/utils';
 import { chromium } from '@playwright/test';
 
 async function globalTeardown() {
-  const browser = await chromium.launch();
+  const browser = await chromium.launch({ slowMo: 1000 });
 
   const context = await browser.newContext({
     baseURL: TEST_DASHBOARD_URL,
@@ -46,18 +46,23 @@ async function globalTeardown() {
   await hasuraPage.locator('a', { hasText: /data/i }).click();
   await hasuraPage.getByRole('link', { name: /sql/i }).click();
 
-  await hasuraPage.locator('#raw_sql > textarea').fill(`
-DO $$ DECLARE
-  tablename text;
-BEGIN
-  FOR tablename IN
-    SELECT table_name FROM information_schema.tables
-    WHERE table_schema = 'public'
-  LOOP
-    EXECUTE 'DROP TABLE IF EXISTS public.' || quote_ident(tablename) || ' CASCADE';
-  END LOOP;
-END $$;
-`);
+  // Set the value of the Ace code editor using JavaScript evaluation in the browser context
+  await hasuraPage.evaluate(() => {
+    const editor = ace.edit('raw_sql');
+
+    editor.setValue(`
+        DO $$ DECLARE
+          tablename text;
+        BEGIN
+          FOR tablename IN
+            SELECT table_name FROM information_schema.tables
+            WHERE table_schema = 'public'
+          LOOP
+            EXECUTE 'DROP TABLE IF EXISTS public.' || quote_ident(tablename) || ' CASCADE';
+          END LOOP;
+        END $$;
+     `);
+  });
 
   await hasuraPage.getByRole('button', { name: /run!/i }).click();
   await hasuraPage.getByText(/sql executed!/i).waitFor();

dashboard/hypertune.graphql

@@ -0,0 +1,5 @@
+query InitQuery {
+  root {
+    enableServices
+  }
+}

dashboard/hypertune.json

@@ -0,0 +1,5 @@
+{
+  "projectId": 2596,
+  "token": "U2FsdGVkX19+V8BJnVR0xLEC+42OW5qZl/A0i6beAaRmJoIhFh5Yf6eIKBzLbV9h",
+  "outputDirectoryPath": "src/hypertune"
+}

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.17.3",
+  "version": "1.0.1",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -11,22 +11,22 @@
     "lint": "next lint --max-warnings 0",
     "test": "vitest",
     "codegen": "graphql-codegen --config graphql.config.yaml --errors-only",
-    "nhost:dev": "nhost up",
     "format": "prettier --write \"src/**/*.{js,ts,tsx,jsx,json,md}\" --plugin-search-dir=.",
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook",
-    "e2e": "npx playwright@1.34.0 install --with-deps && playwright test"
+    "install-browsers": "pnpm dlx playwright@1.31.0 install --with-deps",
+    "e2e": "pnpm install-browsers && pnpm dlx playwright@1.31.0 test"
   },
   "dependencies": {
     "@apollo/client": "^3.7.10",
-    "@codemirror/language": "^6.3.0",
+    "@codemirror/lang-sql": "^6.5.4",
     "@emotion/cache": "^11.10.5",
     "@emotion/react": "^11.10.5",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.10.5",
     "@fontsource/inter": "^5.0.0",
     "@fontsource/roboto-mono": "^5.0.0",
-    "@graphiql/react": "^0.17.0",
+    "@graphiql/react": "^0.18.0",
     "@graphiql/toolkit": "^0.8.2",
     "@headlessui/react": "^1.6.5",
     "@heroicons/react": "^1.0.6",
@@ -44,16 +44,19 @@
     "@tanstack/react-query": "^4.16.1",
     "@tanstack/react-table": "^8.5.30",
     "@tanstack/react-virtual": "^3.0.0-beta.23",
+    "@uiw/codemirror-theme-github": "^4.21.20",
+    "@uiw/react-codemirror": "^4.21.20",
     "analytics-node": "^6.2.0",
     "bcryptjs": "^2.4.3",
     "clsx": "^1.2.1",
     "date-fns": "^2.29.3",
     "generate-password": "^1.7.0",
-    "graphiql": "^2.4.0",
+    "graphiql": "^3.0.0",
     "graphql": "^16.6.0",
     "graphql-request": "^6.0.0",
     "graphql-tag": "^2.12.6",
     "graphql-ws": "^5.11.2",
+    "hypertune": "^1.4.4",
     "just-kebab-case": "^4.1.1",
     "lodash.debounce": "^4.0.8",
     "next": "^12.3.1",
@@ -65,12 +68,15 @@
     "react-error-boundary": "^4.0.0",
     "react-hook-form": "^7.42.1",
     "react-hot-toast": "^2.4.0",
+    "react-intersection-observer": "^9.5.2",
     "react-is": "18.2.0",
     "react-loading-skeleton": "^2.2.0",
     "react-merge-refs": "^1.1.0",
+    "react-resizable-layout": "^0.7.2",
     "react-syntax-highlighter": "^15.4.5",
     "react-table": "^7.8.0",
     "sharp": "^0.32.0",
+    "shell-quote": "^1.8.1",
     "slugify": "^1.6.5",
     "stripe": "^10.17.0",
     "tailwind-merge": "^1.8.0",
@@ -87,7 +93,7 @@
     "@graphql-codegen/typescript-operations": "^3.0.0",
     "@graphql-codegen/typescript-react-apollo": "^3.3.1",
     "@next/bundle-analyzer": "^12.3.1",
-    "@playwright/test": "^1.34.0",
+    "@playwright/test": "1.31.0",
     "@storybook/addon-actions": "^6.5.14",
     "@storybook/addon-essentials": "^6.5.14",
     "@storybook/addon-interactions": "^6.5.14",
@@ -96,23 +102,27 @@
     "@storybook/builder-webpack5": "^6.5.14",
     "@storybook/manager-webpack5": "^6.5.14",
     "@storybook/react": "^6.5.14",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/testing-library": "^0.2.0",
     "@testing-library/dom": "^9.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
+    "@types/ace": "^0.0.48",
+    "@types/bcryptjs": "^2.4.2",
+    "@types/jest": "^29.5.3",
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^16.11.7",
-    "@types/pluralize": "^0.0.29",
-    "@types/react": "18.2.7",
-    "@types/react-dom": "18.2.4",
+    "@types/pluralize": "^0.0.30",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
     "@types/react-table": "^7.7.12",
+    "@types/shell-quote": "^1.7.1",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@types/validator": "^13.7.10",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",
     "@vitejs/plugin-react": "^4.0.0",
-    "@vitest/coverage-c8": "^0.31.0",
+    "@vitest/coverage-v8": "^0.32.0",
     "autoprefixer": "^10.4.13",
     "babel-loader": "^8.3.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
@@ -136,7 +146,7 @@
     "postcss": "^8.4.19",
     "prettier": "^2.7.1",
     "prettier-plugin-organize-imports": "^3.2.0",
-    "prettier-plugin-tailwindcss": "^0.3.0",
+    "prettier-plugin-tailwindcss": "^0.4.0",
     "react-date-fns-hooks": "^0.9.4",
     "require-from-string": "^2.0.2",
     "snake-case": "^3.0.4",
@@ -146,7 +156,7 @@
     "tsconfig-paths-webpack-plugin": "^4.0.0",
     "vite": "^4.0.2",
     "vite-tsconfig-paths": "^4.0.3",
-    "vitest": "^0.31.0"
+    "vitest": "^0.32.0"
   },
   "browserslist": {
     "production": [

dashboard/public/assets/brands/bitbucket.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#2684FF" fill-rule="evenodd" d="M3.41 4.393a.563.563 0 0 1 .434-.195l16.416.003a.562.562 0 0 1 .563.652l-2.388 14.66a.562.562 0 0 1-.563.472H6.417a.765.765 0 0 1-.748-.639L3.281 4.851a.562.562 0 0 1 .13-.458Zm6.832 10.282h3.656l.886-5.173H9.252l.99 5.173Z" clip-rule="evenodd"/><path fill="url(#a)" d="M20.063 9.502h-5.279l-.886 5.173h-3.656l-4.317 5.124a.762.762 0 0 0 .492.186h11.458a.562.562 0 0 0 .563-.473l1.625-10.01Z"/><defs><linearGradient id="a" x1="16.692" x2="10.594" y1="7.717" y2="16.375" gradientUnits="userSpaceOnUse"><stop offset=".18" stop-color="#0052CC"/><stop offset="1" stop-color="#2684FF"/></linearGradient></defs></svg>

dashboard/public/assets/brands/gitlab.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#E24329" fill-rule="evenodd" d="m12 19.996 3.223-9.917H8.777L12 19.995Z" clip-rule="evenodd"/><path fill="#FC6D26" fill-rule="evenodd" d="m12 19.996-3.223-9.917H4.261L12 19.996Z" clip-rule="evenodd"/><path fill="#FCA326" fill-rule="evenodd" d="m4.262 10.079-.98 3.013a.667.667 0 0 0 .243.746L12 19.996l-7.738-9.917Z" clip-rule="evenodd"/><path fill="#E24329" fill-rule="evenodd" d="M4.261 10.079h4.517L6.837 4.106a.333.333 0 0 0-.635 0l-1.94 5.973Z" clip-rule="evenodd"/><path fill="#FC6D26" fill-rule="evenodd" d="m12 19.996 3.222-9.917h4.516L12 19.996Z" clip-rule="evenodd"/><path fill="#FCA326" fill-rule="evenodd" d="m19.738 10.079.98 3.013a.667.667 0 0 1-.243.746L12 19.996l7.738-9.917Z" clip-rule="evenodd"/><path fill="#E24329" fill-rule="evenodd" d="M19.739 10.079h-4.517l1.941-5.973a.334.334 0 0 1 .635 0l1.94 5.973Z" clip-rule="evenodd"/></svg>

dashboard/public/assets/brands/strava.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#FE7203" d="M4.125 5.25c0-.621.504-1.125 1.125-1.125h13.5c.621 0 1.125.504 1.125 1.125v13.5c0 .621-.504 1.125-1.125 1.125H5.25a1.125 1.125 0 0 1-1.125-1.125V5.25Z"/><path fill="url(#a)" d="M4.125 5.25c0-.621.504-1.125 1.125-1.125h13.5c.621 0 1.125.504 1.125 1.125v13.5c0 .621-.504 1.125-1.125 1.125H5.25a1.125 1.125 0 0 1-1.125-1.125V5.25Z"/><path fill="#fff" fill-rule="evenodd" d="m10.917 12.787 2.461 4.43 2.363-4.43h-1.477l-.886 1.674-.984-1.674h-1.477Z" clip-rule="evenodd" opacity=".6"/><path fill="#fff" fill-rule="evenodd" d="m11.213 6.586 3.051 6.201H8.063l3.15-6.201Zm0 3.74 1.18 2.461h-2.46l1.28-2.46Z" clip-rule="evenodd"/><defs><linearGradient id="a" x1="12" x2="12" y1="4.125" y2="19.875" gradientUnits="userSpaceOnUse"><stop stop-color="#FB2F01" stop-opacity="0"/><stop offset="1" stop-color="#FB2F01"/></linearGradient></defs></svg>

dashboard/public/assets/hasuramodal.svg

@@ -1,25 +1 @@
-<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 8C0 3.58172 3.58172 0 8 0H64C68.4183 0 72 3.58172 72 8V64C72 68.4183 68.4183 72 64 72H8C3.58172 72 0 68.4183 0 64V8Z" fill="#1EB4D4"/>
-<path d="M0 8C0 3.58172 3.58172 0 8 0H64C68.4183 0 72 3.58172 72 8V64C72 68.4183 68.4183 72 64 72H8C3.58172 72 0 68.4183 0 64V8Z" fill="url(#paint0_linear_1_85)" fill-opacity="0.2"/>
-<g filter="url(#filter0_d_1_85)">
-<circle cx="36" cy="39" r="16" fill="#35BCD8"/>
-</g>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M51.3994 17.2212C52.831 21.3475 52.831 26.737 51.7362 29.3896C51.1889 30.6948 51.1467 32.2106 51.5678 33.558C52.1152 35.2001 52.4099 36.9264 52.4099 38.7791C52.4099 48.0001 44.9573 55.3685 35.7783 55.2001C27.0625 55.0738 19.6941 47.6633 19.4836 38.9896C19.4415 37.0948 19.7362 35.2001 20.3257 33.5159C20.7889 32.1685 20.7889 30.6948 20.2415 29.3896C19.1889 26.7791 19.1467 21.3896 20.5783 17.1791C20.9152 16.4212 22.0941 16.6738 22.0941 17.4738V17.7685C22.3467 21.7685 23.8625 24.1685 26.052 24.9685C26.3889 25.137 26.8099 25.0948 27.1467 24.8843C29.7152 23.3264 32.7046 22.358 35.9467 22.358C39.1889 22.358 42.2204 23.2843 44.7467 24.8843C45.1257 25.137 45.6731 25.137 46.0099 24.9685C48.1573 23.9159 49.5889 21.7685 49.8415 17.8106V17.5159C49.8836 16.7159 51.0204 16.4633 51.3994 17.2212ZM36.1994 26.2738C29.1257 26.1054 23.3152 31.9159 23.4836 39.0317C23.5678 45.7264 29.0836 51.158 35.7362 51.3264C42.852 51.4106 48.6204 45.6422 48.4941 38.5685C48.3678 31.8738 42.8941 26.358 36.1994 26.2738ZM34.9362 32.8844L37.8836 37.4318L40.7468 41.9792C40.9152 42.2318 40.9994 42.5265 40.9994 42.8213C40.9994 43.3686 40.7047 43.8739 40.2415 44.1686C39.6941 44.5055 38.9783 44.5055 38.431 44.1265C38.2204 44.0002 38.052 43.8739 37.9678 43.6634L36.3257 41.3055C36.1994 41.0528 35.9047 41.0528 35.6941 41.2634L33.3783 43.9581C33.0836 44.2528 32.7047 44.4634 32.2415 44.4634C31.8626 44.4634 31.4415 44.3371 31.1468 44.0844C30.5152 43.495 30.4731 42.4844 31.0626 41.8528L34.1783 38.4423C34.3047 38.2318 34.3889 37.9371 34.2204 37.6844L32.2415 34.5686C32.0731 34.316 31.9889 34.0213 31.9889 33.7265C31.9889 33.1792 32.2836 32.6739 32.7468 32.3792C33.5047 31.916 34.4731 32.1265 34.9362 32.8844Z" fill="white"/>
-<defs>
-<filter id="filter0_d_1_85" x="17" y="23" width="38" height="41" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1_85"/>
-<feOffset dy="6"/>
-<feGaussianBlur stdDeviation="3.5"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.231373 0 0 0 0 0.278431 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_85"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_85" result="shape"/>
-</filter>
-<linearGradient id="paint0_linear_1_85" x1="0" y1="0" x2="72" y2="72" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-</defs>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" fill="none"><path fill="#1EB4D4" d="M0 8a8 8 0 0 1 8-8h56a8 8 0 0 1 8 8v56a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8V8Z"/><path fill="url(#a)" fill-opacity=".2" d="M0 8a8 8 0 0 1 8-8h56a8 8 0 0 1 8 8v56a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8V8Z"/><g filter="url(#b)"><circle cx="36" cy="39" r="16" fill="#35BCD8"/></g><path fill="#fff" fill-rule="evenodd" d="M51.4 17.221c1.431 4.127 1.431 9.516.336 12.169-.547 1.305-.59 2.82-.168 4.168.547 1.642.842 3.368.842 5.221 0 9.221-7.453 16.59-16.632 16.421-8.715-.126-16.084-7.537-16.294-16.21-.043-1.895.252-3.79.842-5.474.463-1.347.463-2.821-.085-4.126-1.052-2.61-1.094-8 .337-12.21.337-.759 1.516-.506 1.516.294v.294c.253 4 1.768 6.4 3.958 7.2.337.169.758.127 1.095-.084 2.568-1.558 5.558-2.526 8.8-2.526 3.242 0 6.273.926 8.8 2.526.379.253.926.253 1.263.084 2.147-1.052 3.579-3.2 3.832-7.157v-.295c.042-.8 1.178-1.053 1.557-.295Zm-15.2 9.053c-7.074-.169-12.885 5.642-12.716 12.758.084 6.694 5.6 12.126 12.252 12.294 7.116.085 12.884-5.684 12.758-12.758-.126-6.694-5.6-12.21-12.295-12.294Zm-1.264 6.61 2.948 4.548 2.863 4.547c.168.253.252.547.252.842 0 .548-.294 1.053-.758 1.348a1.662 1.662 0 0 1-1.81-.042c-.21-.127-.379-.253-.463-.464l-1.642-2.357c-.127-.253-.421-.253-.632-.043l-2.316 2.695c-.294.295-.673.505-1.136.505-.38 0-.8-.126-1.095-.379a1.59 1.59 0 0 1-.084-2.231l3.115-3.41c.127-.211.21-.506.042-.759l-1.978-3.115a1.518 1.518 0 0 1-.253-.843c0-.547.295-1.052.758-1.347.758-.463 1.726-.252 2.19.505Z" clip-rule="evenodd"/><defs><linearGradient id="a" x1="0" x2="72" y1="0" y2="72" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><filter id="b" width="38" height="41" x="17" y="23" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feMorphology in="SourceAlpha" radius="4" result="effect1_dropShadow_1_85"/><feOffset dy="6"/><feGaussianBlur stdDeviation="3.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0.231373 0 0 0 0 0.278431 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_1_85"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_1_85" result="shape"/></filter></defs></svg>

dashboard/src/components/common/ContactUs/ContactUs.tsx

@@ -0,0 +1,70 @@
+import { Link } from '@/components/ui/v2/Link';
+import { Text } from '@/components/ui/v2/Text';
+import type { DetailedHTMLProps, HTMLProps } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export interface ContactUsProps
+  extends DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement> {}
+
+export default function FeedbackForm({ className, ...props }: ContactUsProps) {
+  return (
+    <div
+      className={twMerge(
+        'grid max-w-md grid-flow-row gap-2 py-4 px-5',
+        className,
+      )}
+      {...props}
+    >
+      <Text variant="h3" component="h2">
+        Contact us
+      </Text>
+
+      <Text>
+        To report issues with Nhost, please open a GitHub issue in the{' '}
+        <Link
+          href="https://github.com/nhost/nhost/issues/new"
+          target="_blank"
+          rel="noopener noreferrer"
+          underline="hover"
+        >
+          nhost/nhost
+        </Link>{' '}
+        repository.
+      </Text>
+      <Text>
+        For issues related to the CLI, please visit the{' '}
+        <Link
+          href="https://github.com/nhost/cli/issues/new"
+          target="_blank"
+          rel="noopener noreferrer"
+          underline="hover"
+        >
+          nhost/cli
+        </Link>{' '}
+        repository.
+      </Text>
+      <Text>
+        If you need assistance or have any questions, feel free to join us on{' '}
+        <Link
+          href="https://discord.com/invite/9V7Qb2U"
+          target="_blank"
+          rel="noopener noreferrer"
+          underline="hover"
+        >
+          Discord
+        </Link>
+        . Alternatively, if you prefer, you can also open a{' '}
+        <Link
+          href="https://github.com/nhost/nhost/discussions/new/choose"
+          target="_blank"
+          rel="noopener noreferrer"
+          underline="hover"
+        >
+          GitHub discussion
+        </Link>
+        .
+      </Text>
+      <Text>We&apos;re here to help, so don&apos;t hesitate to reach out!</Text>
+    </div>
+  );
+}

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

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

dashboard/src/components/common/DepricationNotice/DepricationNotice.tsx

@@ -0,0 +1,28 @@
+import { Alert } from '@/components/ui/v2/Alert';
+import { Text } from '@/components/ui/v2/Text';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+
+export default function DepricationNotice() {
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  return (
+    !currentProject?.providersUpdated && (
+      <Alert severity="warning" className="grid place-content-center">
+        <Text color="warning" className="max-w-3xl text-sm">
+          On December 1st the old backend domain will cease to work. You need to
+          make sure your client is instantiated using the subdomain and region
+          and update your oauth2 settings. You can find more information{' '}
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            className="underline"
+            href="https://github.com/nhost/nhost/discussions/2303"
+          >
+            here
+          </a>
+          .
+        </Text>
+      </Alert>
+    )
+  );
+}

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

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

dashboard/src/components/common/FeedbackForm/FeedbackForm.tsx

@@ -1,148 +0,0 @@
-import { Avatar } from '@/components/ui/v2/Avatar';
-import { Button } from '@/components/ui/v2/Button';
-import { Input } from '@/components/ui/v2/Input';
-import { Text } from '@/components/ui/v2/Text';
-import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
-import { useInsertFeedbackOneMutation } from '@/utils/__generated__/graphql';
-import { useUserData } from '@nhost/nextjs';
-import Image from 'next/image';
-import type { DetailedHTMLProps, HTMLProps } from 'react';
-import { useState } from 'react';
-import { twMerge } from 'tailwind-merge';
-
-export interface FeedbackFormProps
-  extends DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement> {}
-
-// TODO: Use `react-hook-form` here instead of the custom form implementation
-export default function FeedbackForm({
-  className,
-  ...props
-}: FeedbackFormProps) {
-  const { currentProject } = useCurrentWorkspaceAndProject();
-  const [insertFeedback, { loading }] = useInsertFeedbackOneMutation();
-  const user = useUserData();
-
-  const [feedback, setFeedback] = useState('');
-  const [feedbackSent, setFeedbackSent] = useState(false);
-
-  function handleClose() {
-    setTimeout(() => {
-      setFeedbackSent(false);
-    }, 500);
-  }
-
-  async function handleSubmit(e: React.SyntheticEvent<HTMLFormElement>) {
-    e.preventDefault();
-
-    const feedbackWithProjectInfo = [
-      currentProject && `Project ID: ${currentProject.id}`,
-      typeof window !== 'undefined' && `URL: ${window.location.href}`,
-      feedback,
-    ]
-      .filter(Boolean)
-      .join('\n\n');
-
-    try {
-      await insertFeedback({
-        variables: {
-          feedback: {
-            feedback: feedbackWithProjectInfo,
-          },
-        },
-      });
-      setFeedbackSent(true);
-      setFeedback('');
-    } catch (error) {
-      // TODO: Display error to user and use a logging solution
-    }
-  }
-
-  if (feedbackSent) {
-    return (
-      <div
-        className={twMerge(
-          'grid max-w-md grid-flow-row justify-center gap-4 py-4 px-5 text-center',
-          className,
-        )}
-        {...props}
-      >
-        <Image
-          src="/assets/FeedbackReceived.svg"
-          alt="Light bulb with a checkmark"
-          width={72}
-          height={72}
-        />
-
-        <div className="grid grid-flow-row gap-2">
-          <Text variant="h3" component="h2" className="text-center">
-            Feedback Received
-          </Text>
-
-          <Text>
-            Thanks for sending us your thoughts! Feel free to send more feedback
-            as you explore the beta, and stay tuned for updates.
-          </Text>
-        </div>
-
-        <Button
-          variant="outlined"
-          color="secondary"
-          className="mt-2 text-sm+ font-normal"
-          onClick={handleClose}
-        >
-          Go Back
-        </Button>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={twMerge(
-        'grid max-w-md grid-flow-row gap-2 py-4 px-5',
-        className,
-      )}
-      {...props}
-    >
-      <Text variant="h3" component="h2">
-        Leave Feedback
-      </Text>
-
-      <Text>
-        Nhost is still in beta and not everything is in place yet, but we&apos;d
-        love to know what you think of it so far.
-      </Text>
-
-      <form onSubmit={handleSubmit} className="grid grid-flow-row gap-2">
-        <div className="grid grid-flow-col place-content-between gap-2">
-          <Text className="font-medium">
-            What do you think we should improve?
-          </Text>
-
-          <Avatar
-            className="h-6 w-6 rounded-full"
-            alt={user?.displayName}
-            src={user?.avatarUrl}
-          >
-            {user?.displayName}
-          </Avatar>
-        </div>
-
-        <Input
-          multiline
-          value={feedback}
-          onChange={(event) => setFeedback(event.target.value)}
-          placeholder="Your feedback"
-          rows={6}
-          required
-          fullWidth
-          hideEmptyHelperText
-        />
-
-        <Button type="submit" disabled={!feedback} loading={loading}>
-          Send Feedback
-        </Button>
-      </form>
-    </div>
-  );
-}

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

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

dashboard/src/components/common/Pagination/Pagination.tsx

@@ -15,6 +15,7 @@ export type PaginationProps = DetailedHTMLProps<
    * Total number of pages.
    */
   totalNrOfPages: number;
+
   /**
    * Number of total elements per page.
    */
@@ -23,6 +24,10 @@ export type PaginationProps = DetailedHTMLProps<
    * Total number of elements.
    */
   totalNrOfElements: number;
+  /**
+   * Label of the elements displayed ex: pages, users...
+   */
+  itemsLabel: string;
   /**
    * Current page number.
    */
@@ -64,6 +69,7 @@ export default function Pagination({
   elementsPerPage,
   onPageChange,
   totalNrOfElements,
+  itemsLabel,
   ...props
 }: PaginationProps) {
   return (
@@ -132,7 +138,7 @@ export default function Pagination({
           {totalNrOfElements < currentPageNumber * elementsPerPage
             ? totalNrOfElements
             : currentPageNumber * elementsPerPage}{' '}
-          of {totalNrOfElements} users
+          of {totalNrOfElements} {itemsLabel}
         </Text>
       </div>
     </div>

dashboard/src/components/common/UpgradeToProBanner/UpgradeToProBanner.tsx

@@ -0,0 +1,100 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import { NhostIcon } from '@/components/presentational/NhostIcon';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { ArrowSquareOutIcon } from '@/components/ui/v2/icons/ArrowSquareOutIcon';
+import { Link } from '@/components/ui/v2/Link';
+import { Text } from '@/components/ui/v2/Text';
+import { ChangePlanModal } from '@/features/projects/common/components/ChangePlanModal';
+import { useIsCurrentUserOwner } from '@/features/projects/common/hooks/useIsCurrentUserOwner';
+
+import Image from 'next/image';
+
+interface UpgradeToProBannerProps {
+  title: string;
+  description: string;
+}
+
+export default function UpgradeToProBanner({
+  title,
+  description,
+}: UpgradeToProBannerProps) {
+  const { openDialog, openAlertDialog } = useDialog();
+  const isOwner = useIsCurrentUserOwner();
+
+  return (
+    <Box
+      sx={{ backgroundColor: 'primary.light' }}
+      className="flex flex-col p-4 space-y-4 rounded-md lg:flex-row lg:items-center lg:space-y-0"
+    >
+      <div className="flex flex-col justify-between space-y-4">
+        <div className="space-y-2">
+          <div className="flex flex-col space-y-2 xs:flex-row xs:space-y-0 xs:space-x-2">
+            <Text>Available with</Text>
+            <div className="flex flex-row space-x-2">
+              <NhostIcon />
+              <Text sx={{ color: 'primary.main' }} className="font-semibold">
+                Nhost Pro
+              </Text>
+            </div>
+          </div>
+          <Text variant="h3">{title}</Text>
+          <Text>{description}</Text>
+        </div>
+
+        <div className="flex flex-col space-y-2 lg:flex-row lg:items-center lg:space-y-0 lg:space-x-2">
+          <Button
+            className="rounded-md"
+            onClick={() => {
+              if (isOwner) {
+                openDialog({
+                  component: <ChangePlanModal />,
+                  props: {
+                    PaperProps: { className: 'p-0 max-w-xl w-full' },
+                  },
+                });
+              } else {
+                openAlertDialog({
+                  title: "You can't upgrade this project",
+                  payload: (
+                    <Text variant="subtitle1" component="span">
+                      Ask an owner of this workspace to upgrade the project.
+                    </Text>
+                  ),
+                  props: {
+                    secondaryButtonText: 'I understand',
+                    hidePrimaryAction: true,
+                  },
+                });
+              }
+            }}
+          >
+            Upgrade to Pro
+          </Button>
+          <Link
+            href="https://nhost.io/pricing"
+            target="_blank"
+            rel="noopener noreferrer"
+            underline="hover"
+            className="font-medium text-center"
+            sx={{
+              color: 'text.secondary',
+            }}
+          >
+            See all features
+            <ArrowSquareOutIcon className="w-4 h-4 ml-1" />
+          </Link>
+        </div>
+      </div>
+
+      <div className="max-w-xs mx-auto">
+        <Image
+          src="/illustration-unbox.png"
+          width={400}
+          height={260}
+          objectFit="contain"
+        />
+      </div>
+    </Box>
+  );
+}

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

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

dashboard/src/components/dataGrid/DataGridBody/DataGridBody.tsx

@@ -178,6 +178,22 @@ export default function DataGridBody<T extends object>({
     }
   }
 
+  const getBackgroundCellColor = (
+    row: Row<T>,
+    column: DataBrowserGridColumn<T>,
+  ) => {
+    // Grey out files not uploaded
+    if (!row.values.isUploaded) {
+      return 'grey.200';
+    }
+
+    if (column.isDisabled) {
+      return 'grey.100';
+    }
+
+    return 'background.paper';
+  };
+
   return (
     <div {...getTableBodyProps()} ref={bodyRef} {...props}>
       {rows.length === 0 && !loading && (
@@ -260,9 +276,7 @@ export default function DataGridBody<T extends object>({
                     })}
                     cell={cell}
                     sx={{
-                      backgroundColor: column.isDisabled
-                        ? 'grey.100'
-                        : 'background.paper',
+                      backgroundColor: getBackgroundCellColor(row, column),
                       color: isCellDisabled ? 'text.secondary' : 'text.primary',
                     }}
                     className={twMerge(

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

@@ -1,4 +1,4 @@
-import { FeedbackForm } from '@/components/common/FeedbackForm';
+import { ContactUs } from '@/components/common/ContactUs';
 import { NavLink } from '@/components/common/NavLink';
 import { AccountMenu } from '@/components/layout/AccountMenu';
 import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
@@ -54,7 +54,7 @@ export default function Header({ className, ...props }: HeaderProps) {
       sx={{ backgroundColor: 'background.paper' }}
       {...props}
     >
-      <div className="grid grid-flow-col items-center gap-3">
+      <div className="grid grid-flow-col items-center gap-3 ">
         <NavLink href="/" className="w-12">
           <Logo className="mx-auto cursor-pointer" />
         </NavLink>
@@ -75,14 +75,14 @@ export default function Header({ className, ...props }: HeaderProps) {
               hideChevron
               className="rounded-md px-2.5 py-1.5 text-sm motion-safe:transition-colors"
             >
-              Feedback
+              Contact us
             </Dropdown.Trigger>
 
             <Dropdown.Content
               transformOrigin={{ vertical: 'top', horizontal: 'right' }}
               anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
             >
-              <FeedbackForm className="max-w-md" />
+              <ContactUs className="max-w-md" />
             </Dropdown.Content>
           </Dropdown.Root>
         )}

dashboard/src/components/layout/MobileNav/MobileNav.tsx

@@ -1,4 +1,4 @@
-import { FeedbackForm } from '@/components/common/FeedbackForm';
+import { ContactUs } from '@/components/common/ContactUs';
 import { NavLink } from '@/components/common/NavLink';
 import { ThemeSwitcher } from '@/components/common/ThemeSwitcher';
 import { Nav } from '@/components/presentational/Nav';
@@ -171,7 +171,7 @@ export default function MobileNav({ className, ...props }: MobileNavProps) {
                       className="w-full"
                       role={undefined}
                     >
-                      <ListItem.Text>Feedback</ListItem.Text>
+                      <ListItem.Text>Contact us</ListItem.Text>
                     </ListItem.Button>
                   </ListItem.Root>
                 </Dropdown.Trigger>
@@ -180,7 +180,7 @@ export default function MobileNav({ className, ...props }: MobileNavProps) {
                   transformOrigin={{ vertical: 'top', horizontal: 'center' }}
                   anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
                 >
-                  <FeedbackForm className="max-w-md" />
+                  <ContactUs className="max-w-md" />
                 </Dropdown.Content>
               </Dropdown.Root>
             )}

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

@@ -114,7 +114,7 @@ export default function SettingsContainer({
     <Box
       {...root}
       className={twMerge(
-        'grid grid-flow-row gap-4 rounded-lg border-1 py-4',
+        'grid grid-flow-row gap-4 overflow-hidden rounded-lg border-1 py-4',
         root?.className || rootClassName,
       )}
     >
@@ -128,7 +128,11 @@ export default function SettingsContainer({
             icon}
 
           <div className="grid grid-flow-row gap-1">
-            <Text className="text-lg font-semibold">{title}</Text>
+            {typeof title === 'string' ? (
+              <Text className="text-lg font-semibold">{title}</Text>
+            ) : (
+              title
+            )}
 
             {description && <Text color="secondary">{description}</Text>}
           </div>

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

@@ -1,9 +1,14 @@
+import DepricationNotice from '@/components/common/DepricationNotice/DepricationNotice';
 import type { ProjectLayoutProps } from '@/components/layout/ProjectLayout';
 import { ProjectLayout } from '@/components/layout/ProjectLayout';
 import type { SettingsSidebarProps } from '@/components/layout/SettingsSidebar';
 import { SettingsSidebar } from '@/components/layout/SettingsSidebar';
 import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
+import { Alert } from '@/components/ui/v2/Alert';
 import { Box } from '@/components/ui/v2/Box';
+import { Text } from '@/components/ui/v2/Text';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useTheme } from '@mui/material';
 import { twMerge } from 'tailwind-merge';
 
 export interface SettingsLayoutProps extends ProjectLayoutProps {
@@ -22,6 +27,10 @@ export default function SettingsLayout({
   sidebarProps: { className: sidebarClassName, ...sidebarProps } = {},
   ...props
 }: SettingsLayoutProps) {
+  const theme = useTheme();
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const hasGitRepo = !!currentProject?.githubRepository;
+
   return (
     <ProjectLayout
       mainContainerProps={{
@@ -37,9 +46,49 @@ export default function SettingsLayout({
 
       <Box
         sx={{ backgroundColor: 'background.default' }}
-        className="flex w-full flex-auto flex-col overflow-x-hidden"
+        className="flex w-full flex-auto flex-col overflow-scroll overflow-x-hidden"
       >
-        <RetryableErrorBoundary>{children}</RetryableErrorBoundary>
+        <RetryableErrorBoundary>
+          <div className="flex flex-col space-y-2">
+            <DepricationNotice />
+            {hasGitRepo && (
+              <Alert
+                severity="warning"
+                className="grid grid-flow-row place-content-center gap-2"
+              >
+                <Text color="warning" className="text-sm ">
+                  As you have a connected repository, make sure to synchronize
+                  your changes with{' '}
+                  <code
+                    className={twMerge(
+                      'rounded-md px-2 py-px',
+                      theme.palette.mode === 'dark'
+                        ? 'bg-brown text-copper'
+                        : 'bg-slate-200 text-slate-700',
+                    )}
+                  >
+                    nhost config pull
+                  </code>{' '}
+                  or they may be reverted with the next push.
+                  <br />
+                  If there are multiple projects linked to the same repository
+                  and you only want these changes to apply to a subset of them,
+                  please check out{' '}
+                  <a
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="underline"
+                    href="https://docs.nhost.io/cli/overlays"
+                  >
+                    docs.nhost.io/cli/overlays
+                  </a>{' '}
+                  for guidance.
+                </Text>
+              </Alert>
+            )}
+          </div>
+          {children}
+        </RetryableErrorBoundary>
       </Box>
     </ProjectLayout>
   );

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

@@ -7,7 +7,6 @@ import { List } from '@/components/ui/v2/List';
 import type { ListItemButtonProps } from '@/components/ui/v2/ListItem';
 import { ListItem } from '@/components/ui/v2/ListItem';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
-import { isK8SPostgresEnabledInCurrentEnvironment } from '@/utils/helpers';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
@@ -135,15 +134,13 @@ export default function SettingsSidebar({
             >
               Compute Resources
             </SettingsNavLink>
-            {isK8SPostgresEnabledInCurrentEnvironment && (
-              <SettingsNavLink
-                href="/database"
-                exact={false}
-                onClick={handleSelect}
-              >
-                Database
-              </SettingsNavLink>
-            )}
+            <SettingsNavLink
+              href="/database"
+              exact={false}
+              onClick={handleSelect}
+            >
+              Database
+            </SettingsNavLink>
             <SettingsNavLink
               href="/hasura"
               exact={false}
@@ -203,6 +200,14 @@ export default function SettingsSidebar({
             >
               Secrets
             </SettingsNavLink>
+
+            <SettingsNavLink
+              href="/custom-domains"
+              exact={false}
+              onClick={handleSelect}
+            >
+              Custom Domains
+            </SettingsNavLink>
           </List>
         </nav>
       </Box>

dashboard/src/components/presentational/NhostIcon/NhostIcon.tsx

@@ -0,0 +1,35 @@
+import type { ForwardedRef, SVGProps } from 'react';
+import { forwardRef } from 'react';
+
+function NhostIcon(
+  props: SVGProps<SVGSVGElement>,
+  ref: ForwardedRef<SVGSVGElement>,
+) {
+  return (
+    <svg
+      ref={ref}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="Logo of Nhost"
+      {...props}
+    >
+      <g clipPath="url(#clip0_9802_20458)">
+        <rect width="24" height="24" fill="#0052CD" />
+        <path
+          d="M17.4656 7.39804L12.4705 4.51369C12.0223 4.25553 11.466 4.25553 11.0169 4.51369C10.5688 4.77276 10.2906 5.25455 10.2906 5.77179V6.14813L9.96517 5.95996C9.51702 5.70179 8.96069 5.70179 8.51163 5.95996C8.06348 6.21903 7.78531 6.70082 7.78531 7.21896V7.5953L7.45988 7.40713C7.01173 7.14897 6.4554 7.14897 6.00634 7.40713C5.55819 7.66621 5.28003 8.14799 5.28003 8.66614V17.7037C5.28003 17.9637 5.43093 18.2055 5.66546 18.3182C5.89908 18.4318 6.1827 18.4009 6.38632 18.24L8.86342 16.2865L12.6832 18.4918C12.7886 18.5527 12.9068 18.5827 13.025 18.5827C13.1431 18.5827 13.2613 18.5518 13.3668 18.4918C13.5777 18.37 13.7086 18.1437 13.7086 17.9001V12.4613C13.7086 11.5687 13.2286 10.7378 12.4559 10.2915L11.2033 9.56789V5.7727C11.2033 5.57998 11.3069 5.4 11.4742 5.30364C11.6414 5.20728 11.8487 5.20728 12.0159 5.30364L17.0111 8.18708C17.5028 8.4707 17.8083 9.00066 17.8083 9.56789V16.3402C17.8083 16.5329 17.7046 16.7129 17.5374 16.8092L16.2138 17.5737V11.0142C16.2138 10.1215 15.7339 9.29064 14.9612 8.84431L11.8859 7.06897V8.12072L14.5058 9.63334C14.9976 9.91696 15.303 10.446 15.303 11.0142V17.9673C15.303 18.21 15.4339 18.4373 15.6448 18.5591C15.7502 18.62 15.8684 18.65 15.9866 18.65C16.1048 18.65 16.2229 18.6191 16.3284 18.5591L17.9937 17.5974C18.4419 17.3383 18.72 16.8565 18.72 16.3383V9.56608C18.7182 8.67614 18.2382 7.84438 17.4656 7.39804ZM11.9987 11.0805C12.4905 11.3641 12.7959 11.8932 12.7959 12.4613V17.5064L9.63246 15.6802L10.6478 14.8803C10.9996 14.603 11.2014 14.1876 11.2014 13.7394V10.6215L11.9987 11.0805ZM10.2906 10.0942V13.7376C10.2906 13.9049 10.2152 14.0603 10.0842 14.163L6.19088 17.2328V8.66523C6.19088 8.47251 6.29451 8.29253 6.46177 8.19617C6.62903 8.09981 6.83629 8.09981 7.00355 8.19617L7.78531 8.64705V15.1057L8.69616 14.3876V7.21896C8.69616 7.02625 8.79979 6.84626 8.96705 6.7499C9.13431 6.65355 9.34157 6.65355 9.50883 6.7499L10.2906 7.20078V9.04157L9.37975 8.51524V9.56789L10.2906 10.0942Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_9802_20458">
+          <rect width="24" height="24" rx="4" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export default forwardRef(NhostIcon);

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

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

dashboard/src/components/settings/ProvidersUpdatedAlert.tsx

@@ -0,0 +1,100 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import { Alert } from '@/components/ui/v2/Alert';
+import { Button } from '@/components/ui/v2/Button';
+import { ArrowSquareOutIcon } from '@/components/ui/v2/icons/ArrowSquareOutIcon';
+import { Link } from '@/components/ui/v2/Link';
+import { Text } from '@/components/ui/v2/Text';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { useConfirmProvidersUpdatedMutation } from '@/utils/__generated__/graphql';
+import { useTheme } from '@mui/material';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+
+export default function ProvidersUpdatedAlert() {
+  const theme = useTheme();
+  const { openAlertDialog } = useDialog();
+  const [confirmed, setConfirmed] = useState(true);
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  const [confirmProvidersUpdated] = useConfirmProvidersUpdatedMutation({
+    variables: { id: currentProject?.id },
+  });
+
+  async function handleSubmitConfirmation() {
+    const confirmProvidersUpdatedPromise = confirmProvidersUpdated();
+
+    await toast.promise(
+      confirmProvidersUpdatedPromise,
+      {
+        loading: 'Confirming...',
+        success: 'Your settings have been updated successfully.',
+        error: 'An error occurred while trying to confirm the message.',
+      },
+      getToastStyleProps(),
+    );
+
+    setConfirmed(false);
+  }
+
+  function handleOpenConfirmationDialog() {
+    openAlertDialog({
+      title: 'Confirm all providers updated?',
+      payload: (
+        <Text variant="subtitle1" component="span">
+          Please make sure to update all providers before continuing. Your
+          sign-in flows might break if you don&apos;t.
+        </Text>
+      ),
+      props: {
+        onPrimaryAction: handleSubmitConfirmation,
+      },
+    });
+  }
+
+  if (!confirmed) {
+    return null;
+  }
+
+  return (
+    <Alert
+      severity="warning"
+      className="grid items-center grid-flow-row gap-2 p-4 place-items-center lg:grid-flow-col lg:place-content-between"
+    >
+      <div className="grid grid-flow-row gap-1 text-left">
+        <Text className="font-semibold">
+          Please update the Redirect URL for all providers being used
+        </Text>
+
+        <Text className="text-sm+">
+          We are deprecating your project&apos;s old DNS name in favor of
+          individual DNS names for each service. Please make sure to update your
+          providers to use the new auth specific URL under <b>Redirect URL</b>{' '}
+          before the 1st of February 2023.{' '}
+          <Link
+            href="https://github.com/nhost/nhost/discussions/1319"
+            target="_blank"
+            rel="noopener noreferrer"
+            underline="hover"
+            className="font-medium"
+          >
+            Read the discussion here.
+            <ArrowSquareOutIcon className="w-4 h-4 ml-1" />
+          </Link>
+        </Text>
+      </div>
+
+      <Button
+        variant="borderless"
+        className={
+          theme.palette.mode === 'dark'
+            ? 'text-white hover:bg-brown'
+            : 'text-black hover:bg-orange-300'
+        }
+        onClick={handleOpenConfirmationDialog}
+      >
+        I have updated all Redirect URLs
+      </Button>
+    </Alert>
+  );
+}

dashboard/src/components/settings/index.ts

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

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

@@ -1,6 +1,6 @@
 import type { BoxProps } from '@/components/ui/v2/Box';
 import { Box } from '@/components/ui/v2/Box';
-import { twMerge } from 'tailwind-merge';
+import { styled } from '@mui/material';
 
 export interface AlertProps extends BoxProps {
   /**
@@ -11,19 +11,25 @@ export interface AlertProps extends BoxProps {
   severity?: 'info' | 'success' | 'warning' | 'error';
 }
 
+const StyledBox = styled(Box)(({ theme }) => ({
+  borderRadius: 4,
+  padding: theme.spacing(1.5, 2),
+  textAlign: 'center',
+  fontSize: theme.typography.pxToRem(15),
+  lineHeight: theme.typography.pxToRem(22),
+  '@media (prefers-reduced-motion: no-preference)': {
+    transition: theme.transitions.create('background-color'),
+  },
+}));
+
 export default function Alert({
   severity = 'info',
   children,
-  className,
   sx,
   ...props
 }: AlertProps) {
   return (
-    <Box
-      className={twMerge(
-        'rounded-sm+ bg-opacity-20 p-4 text-center text-sm+ motion-safe:transition-colors',
-        className,
-      )}
+    <StyledBox
       sx={[
         ...(Array.isArray(sx) ? sx : [sx]),
         severity === 'error' && {
@@ -43,6 +49,6 @@ export default function Alert({
       {...props}
     >
       {children}
-    </Box>
+    </StyledBox>
   );
 }

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

@@ -1,5 +1,6 @@
 import { Chip } from '@/components/ui/v2/Chip';
 import type { FormControlProps } from '@/components/ui/v2/FormControl';
+import { CheckIcon } from '@/components/ui/v2/icons/CheckIcon';
 import { ChevronDownIcon } from '@/components/ui/v2/icons/ChevronDownIcon';
 import { XIcon } from '@/components/ui/v2/icons/XIcon';
 import type { InputProps } from '@/components/ui/v2/Input';
@@ -134,6 +135,13 @@ const StyledAutocomplete = styled(MaterialAutocomplete)(({ theme }) => ({
   MaterialAutocompleteProps<AutocompleteOption, boolean, boolean, boolean>
 >;
 
+const StyledOptionBase = styled(OptionBase)(({ theme }) => ({
+  display: 'grid !important',
+  gridAutoFlow: 'column',
+  justifyContent: 'space-between !important',
+  gap: theme.spacing(0.5),
+}));
+
 export const AutocompletePopper = styled(PopperUnstyled)(({ theme }) => ({
   zIndex: theme.zIndex.modal + 1,
   boxShadow: 'none',
@@ -326,6 +334,7 @@ function Autocomplete(
             <StyledTag
               deleteIcon={<XIcon />}
               size="small"
+              sx={{ fontSize: (theme) => theme.typography.pxToRem(12) }}
               label={
                 typeof option !== 'object' ? option.toString() : option.value
               }
@@ -349,17 +358,32 @@ function Autocomplete(
         optionProps,
         option: string | number | AutocompleteOption<string>,
       ) => {
+        const selected = optionProps['aria-selected'];
+
         if (typeof option !== 'object') {
-          return <OptionBase {...optionProps}>{option.toString()}</OptionBase>;
+          return (
+            <StyledOptionBase {...optionProps} key={option.toString()}>
+              {option.toString()}
+              {selected && props.multiple && (
+                <CheckIcon sx={{ width: 16, height: 16 }} />
+              )}
+            </StyledOptionBase>
+          );
         }
 
         return (
-          <OptionBase
+          <StyledOptionBase
             {...optionProps}
             key={option.dropdownLabel || option.label}
           >
-            {option.dropdownLabel || option.label}
-          </OptionBase>
+            <>
+              <span>{option.dropdownLabel || option.label}</span>
+
+              {selected && props.multiple && (
+                <CheckIcon key="asd" sx={{ width: 16, height: 16 }} />
+              )}
+            </>
+          </StyledOptionBase>
         );
       }}
       filterOptions={

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

@@ -7,14 +7,15 @@ import MaterialLinearProgress, {
 
 export interface LinearProgressProps extends MaterialLinearProgressProps {}
 
-const LinearProgress = styled(MaterialLinearProgress)(({ theme }) => ({
+const LinearProgress = styled(MaterialLinearProgress)(({ theme, value }) => ({
   height: 12,
   borderRadius: 1,
   [`&.${linearProgressClasses.colorPrimary}`]: {
     backgroundColor: theme.palette.grey[300],
   },
   [`& .${linearProgressClasses.bar}`]: {
-    backgroundColor: theme.palette.primary.main,
+    backgroundColor:
+      value >= 100 ? theme.palette.error.dark : theme.palette.primary.main,
   },
 }));
 

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

@@ -1,11 +1,18 @@
-import { styled } from '@mui/material';
+import { textClasses } from '@/components/ui/v2/Text';
+import { getTypographyUtilityClass, styled } from '@mui/material';
 import type { ListItemTextProps as MaterialListItemTextProps } from '@mui/material/ListItemText';
 import MaterialListItemText, {
-  listItemTextClasses,
+  listItemTextClasses as materialListItemTextClasses,
 } from '@mui/material/ListItemText';
+import clsx from 'clsx';
 
 export interface ListItemTextProps extends MaterialListItemTextProps {}
 
+const listItemTextClasses = {
+  ...materialListItemTextClasses,
+  warning: getTypographyUtilityClass('colorWarning'),
+};
+
 const StyledListItemText = styled(MaterialListItemText)(({ theme }) => ({
   color: theme.palette.text.primary,
   display: 'grid',
@@ -16,6 +23,9 @@ const StyledListItemText = styled(MaterialListItemText)(({ theme }) => ({
   [`&.${listItemTextClasses.root}`]: {
     margin: 0,
   },
+  [`&.${listItemTextClasses.warning}`]: {
+    color: theme.palette.warning.dark,
+  },
   [`& > .${listItemTextClasses.primary}`]: {
     fontWeight: 500,
     textOverflow: 'ellipsis',
@@ -29,8 +39,23 @@ const StyledListItemText = styled(MaterialListItemText)(({ theme }) => ({
   },
 }));
 
-function ListItemText({ children, ...props }: ListItemTextProps) {
-  return <StyledListItemText {...props}>{children}</StyledListItemText>;
+function ListItemText({
+  children,
+  color = 'primary',
+  className,
+  ...props
+}: ListItemTextProps) {
+  return (
+    <StyledListItemText
+      className={clsx(
+        color === 'warning' && textClasses.colorWarning,
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </StyledListItemText>
+  );
 }
 
 ListItemText.displayName = 'NhostListItemText';

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

@@ -18,7 +18,7 @@ export type TextProps<
    *
    * @default 'primary'
    */
-  color?: 'primary' | 'secondary' | 'disabled' | 'error';
+  color?: 'primary' | 'secondary' | 'disabled' | 'error' | 'warning';
   /**
    * The component used for the root node.
    */
@@ -31,6 +31,7 @@ const textClasses = {
   colorSecondary: getTypographyUtilityClass('colorSecondary'),
   colorDisabled: getTypographyUtilityClass('colorDisabled'),
   colorError: getTypographyUtilityClass('colorError'),
+  colorWarning: getTypographyUtilityClass('colorWarning'),
 };
 
 const StyledTypography = styled(MaterialTypography)<TextProps>(({ theme }) => ({
@@ -50,6 +51,9 @@ const StyledTypography = styled(MaterialTypography)<TextProps>(({ theme }) => ({
   [`&.${textClasses.colorError}`]: {
     color: theme.palette.error.main,
   },
+  [`&.${textClasses.colorWarning}`]: {
+    color: theme.palette.warning.dark,
+  },
 }));
 
 function Text<
@@ -70,6 +74,7 @@ function Text<
         color === 'secondary' && textClasses.colorSecondary,
         color === 'disabled' && textClasses.colorDisabled,
         color === 'error' && textClasses.colorError,
+        color === 'warning' && textClasses.colorWarning,
         className,
       )}
       {...props}

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

@@ -0,0 +1,44 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+
+function ArrowsClockwise(props: IconProps) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-label="Update"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M11.0103 6.23227H14.0103V3.23227"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.11084 4.11091C4.62156 3.60019 5.22788 3.19506 5.89517 2.91866C6.56246 2.64226 7.27766 2.5 7.99993 2.5C8.7222 2.5 9.4374 2.64226 10.1047 2.91866C10.772 3.19506 11.3783 3.60019 11.889 4.11091L14.0103 6.23223"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.98975 9.76773H1.98975V12.7677"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.8892 11.8891C11.3785 12.3998 10.7722 12.8049 10.1049 13.0813C9.43762 13.3577 8.72242 13.5 8.00015 13.5C7.27788 13.5 6.56269 13.3577 5.89539 13.0813C5.2281 12.8049 4.62179 12.3998 4.11107 11.8891L1.98975 9.76776"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+ArrowsClockwise.displayName = 'NhostArrowsClockwise';
+
+export default ArrowsClockwise;

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

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

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

@@ -0,0 +1,40 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+
+function CubeIcon(props: IconProps) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M14 11.0826V4.91742C14 4.8287 13.9764 4.74158 13.9316 4.665C13.8868 4.58841 13.8225 4.52513 13.7451 4.48163L8.24513 1.38788C8.17029 1.34578 8.08587 1.32367 8 1.32367C7.91413 1.32367 7.82971 1.34578 7.75487 1.38788L2.25487 4.48163C2.17754 4.52513 2.11318 4.58841 2.0684 4.665C2.02361 4.74158 2 4.8287 2 4.91742V11.0826C2 11.1713 2.02361 11.2584 2.0684 11.335C2.11318 11.4116 2.17754 11.4749 2.25487 11.5184L7.75487 14.6121C7.82971 14.6542 7.91413 14.6763 8 14.6763C8.08587 14.6763 8.17029 14.6542 8.24513 14.6121L13.7451 11.5184C13.8225 11.4749 13.8868 11.4116 13.9316 11.335C13.9764 11.2584 14 11.1713 14 11.0826Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.9311 4.66414L8.0594 8.00001L2.06934 4.66357"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.05916 8L8.00049 14.6763"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+CubeIcon.displayName = 'NhostCubeIcon';
+
+export default CubeIcon;

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

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

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

@@ -0,0 +1,27 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+import { SvgIcon } from '@/components/ui/v2/icons/SvgIcon';
+
+function ServicesIcon(props: IconProps) {
+  return (
+    <SvgIcon
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="Services"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.89295 4.15125H9.21701C9.28097 4.15125 9.33291 4.09959 9.33326 4.03565V2.8556C9.33291 2.79163 9.28097 2.73999 9.21701 2.73999H7.89295C7.82909 2.73999 7.77734 2.79174 7.77734 2.8556V4.03562C7.77734 4.09948 7.82911 4.15125 7.89295 4.15125ZM5.53406 5.84862H4.21001C4.14594 5.84826 4.09411 5.79643 4.09375 5.73236V4.55298C4.09411 4.48902 4.14606 4.43738 4.21001 4.43738H5.53406C5.5979 4.43738 5.64967 4.48912 5.64967 4.55298V5.73236C5.64967 5.79631 5.59801 5.84826 5.53406 5.84862ZM14.6307 6.48419C15.4316 6.48419 15.8114 6.77094 15.8521 6.80325L16 6.92016L15.9386 7.09971C15.8408 7.34738 15.69 7.57067 15.4968 7.75398C15.2062 8.04139 14.6791 8.38436 13.8221 8.38436H13.6839C13.337 9.26145 12.8707 10.2484 12.0879 11.1345C11.6196 11.6644 11.0689 12.1152 10.457 12.4696C9.71438 12.8901 8.90665 13.1835 8.06725 13.3376C7.4634 13.45 6.85036 13.5056 6.23616 13.5036C4.87658 13.5036 3.67717 13.2453 2.93893 12.7932C2.28012 12.3908 1.77374 11.7333 1.43337 10.8407C1.13576 10.0277 0.989105 9.1673 1.00063 8.30169C1.00204 8.04363 1.21146 7.83507 1.46954 7.83472H11.3503C11.471 7.8302 12.0678 7.77917 12.4399 7.57185C12.1318 7.08484 12.0446 6.51519 12.188 5.9087C12.2639 5.59123 12.3932 5.28898 12.5703 5.01479L12.7118 4.81068L12.9268 4.93471L12.9269 4.93473C12.9668 4.9583 13.8447 5.47632 13.9996 6.53843C14.2082 6.50325 14.4192 6.48511 14.6307 6.48419ZM3.7092 7.54529H2.38514C2.32128 7.54529 2.26953 7.49353 2.26953 7.42967V6.25029V6.24964C2.26953 6.1858 2.32128 6.13403 2.38514 6.13403H3.7092H3.70985C3.77369 6.13439 3.82516 6.18643 3.8248 6.25029V7.42969C3.8248 7.49353 3.77306 7.54529 3.7092 7.54529ZM4.21003 7.54529H5.53409C5.59794 7.54529 5.64969 7.49353 5.64969 7.42969V6.25029C5.65005 6.18643 5.59858 6.13439 5.53472 6.13403H5.53407H4.21001C4.14579 6.13403 4.09375 6.18607 4.09375 6.25029V7.42967C4.09413 7.49363 4.14606 7.54529 4.21003 7.54529ZM7.38597 7.54529H6.06191C5.99808 7.54529 5.94631 7.49353 5.94629 7.42967V6.25029V6.24964C5.94629 6.1858 5.99803 6.13403 6.06189 6.13403H7.38595H7.3866C7.45046 6.13439 7.50193 6.18643 7.50157 6.25029V7.42969C7.50157 7.49353 7.44983 7.54529 7.38597 7.54529ZM7.89295 7.54529H9.21701C9.28097 7.54529 9.33291 7.49365 9.33326 7.42969V6.25029C9.33326 6.18607 9.28122 6.13403 9.21701 6.13403H7.89295C7.82909 6.13403 7.77734 6.1858 7.77734 6.24964V6.25029V7.42967C7.77734 7.49353 7.82911 7.54529 7.89295 7.54529ZM6.06189 5.84862H7.38595C7.4499 5.84826 7.50156 5.79631 7.50156 5.73236V4.55298C7.50156 4.48912 7.44979 4.43738 7.38595 4.43738H6.06189C5.99804 4.43738 5.94629 4.48915 5.94629 4.55298V5.73236C5.94629 5.79631 5.99795 5.84826 6.06189 5.84862ZM9.21701 5.84862H7.89295C7.82901 5.84826 7.77734 5.79631 7.77734 5.73236V4.55298C7.77734 4.48915 7.82909 4.43738 7.89295 4.43738H9.21701C9.28097 4.43738 9.33291 4.48902 9.33326 4.55298V5.73236C9.33291 5.79643 9.28108 5.84826 9.21701 5.84862ZM11.0637 7.54529H9.73963C9.67579 7.54529 9.62402 7.49353 9.62402 7.42967V6.25029V6.24964C9.62402 6.1858 9.67579 6.13403 9.73963 6.13403H11.0637C11.1279 6.13403 11.1799 6.18607 11.1799 6.25029V7.42969C11.1796 7.49365 11.1277 7.54529 11.0637 7.54529Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+}
+
+ServicesIcon.displayName = 'NhostServicesIcon';
+
+export default ServicesIcon;

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

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

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

@@ -0,0 +1,26 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+import { SvgIcon } from '@/components/ui/v2/icons/SvgIcon';
+
+function TerminalIcon(props: IconProps) {
+  return (
+    <SvgIcon
+      width="16"
+      height="16"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      aria-label="Trash"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.49851 3.43968L2.93795 2.94141L1.94141 4.06252L2.50196 4.56079L6.37134 8.00024L2.50196 11.4397L1.94141 11.938L2.93795 13.0591L3.49851 12.5608L7.99851 8.56079C8.15863 8.41847 8.25024 8.21446 8.25024 8.00024C8.25024 7.78601 8.15863 7.582 7.99851 7.43968L3.49851 3.43968ZM7.99987 11.2502H7.24987V12.7502H7.99987H13.9999H14.7499V11.2502H13.9999H7.99987Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+}
+
+TerminalIcon.displayName = 'NhostTerminalIcon';
+
+export default TerminalIcon;

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

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

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

@@ -0,0 +1,40 @@
+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 WarningIcon(props: IconProps, ref: ForwardedRef<SVGSVGElement>) {
+  return (
+    <SvgIcon
+      width="16"
+      height="16"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      aria-label="Warning"
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M8 5.5V9.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.135 2.49904L1.63648 11.9986C1.5485 12.1506 1.5021 12.3231 1.50195 12.4987C1.50181 12.6743 1.54792 12.8469 1.63565 12.999C1.72338 13.1512 1.84964 13.2776 2.00172 13.3654C2.15379 13.4533 2.32633 13.4995 2.50196 13.4995H13.499C13.6746 13.4995 13.8472 13.4533 13.9992 13.3654C14.1513 13.2776 14.2776 13.1512 14.3653 12.999C14.453 12.8469 14.4991 12.6743 14.499 12.4987C14.4988 12.3231 14.4524 12.1506 14.3645 11.9986L8.86594 2.49904C8.7781 2.34728 8.6519 2.22129 8.49999 2.1337C8.34809 2.04611 8.17582 2 8.00047 2C7.82512 2 7.65285 2.04611 7.50095 2.1337C7.34904 2.22129 7.22284 2.34728 7.135 2.49904V2.49904Z"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8 12C8.41421 12 8.75 11.6642 8.75 11.25C8.75 10.8358 8.41421 10.5 8 10.5C7.58579 10.5 7.25 10.8358 7.25 11.25C7.25 11.6642 7.58579 12 8 12Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+}
+
+WarningIcon.displayName = 'NhostWarningIcon';
+
+export default forwardRef(WarningIcon);

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

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

dashboard/src/data/features.json

@@ -1,5 +0,0 @@
-{
-  "k8s-postgres": {
-    "enabled": ["dev", "staging", "production"]
-  }
-}

dashboard/src/features/account/settings/components/DeleteAccount/DeleteAccount.tsx

@@ -0,0 +1,161 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import { SettingsContainer } from '@/components/layout/SettingsContainer';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { Checkbox } from '@/components/ui/v2/Checkbox';
+import { Text } from '@/components/ui/v2/Text';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import {
+  useDeleteUserAccountMutation,
+  useGetAllWorkspacesAndProjectsQuery,
+} from '@/utils/__generated__/graphql';
+import { type ApolloError } from '@apollo/client';
+import { useSignOut, useUserData } from '@nhost/nextjs';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { twMerge } from 'tailwind-merge';
+
+function ConfirmDeleteAccountModal({
+  close,
+  onDelete,
+}: {
+  onDelete?: () => Promise<any>;
+  close: () => void;
+}) {
+  const [remove, setRemove] = useState(false);
+  const [loadingRemove, setLoadingRemove] = useState(false);
+
+  const user = useUserData();
+
+  const { data, loading } = useGetAllWorkspacesAndProjectsQuery({
+    skip: !user,
+  });
+
+  const userHasProjects =
+    !loading && data?.workspaces.some((workspace) => workspace.projects.length);
+
+  const userData = useUserData();
+
+  const [deleteUserAccount] = useDeleteUserAccountMutation({
+    variables: { id: userData?.id },
+  });
+
+  const onClickConfirm = async () => {
+    setLoadingRemove(true);
+
+    await toast.promise(
+      deleteUserAccount(),
+      {
+        loading: 'Deleting your account...',
+        success: `The account has been deleted successfully.`,
+        error: (arg: ApolloError) => {
+          // we need to get the internal error message from the GraphQL error
+          const { internal } = arg.graphQLErrors[0]?.extensions || {};
+          const { message } = (internal as Record<string, any>)?.error || {};
+
+          // we use the default Apollo error message if we can't find the
+          // internal error message
+          return (
+            message ||
+            arg.message ||
+            'An error occurred while deleting your account. Please try again.'
+          );
+        },
+      },
+      getToastStyleProps(),
+    );
+
+    onDelete?.();
+    close();
+  };
+
+  return (
+    <Box className={twMerge('w-full rounded-lg p-6 text-left')}>
+      <div className="grid grid-flow-row gap-1">
+        <Text variant="h3" component="h2">
+          Delete Account?
+        </Text>
+
+        {userHasProjects && (
+          <Text
+            variant="subtitle2"
+            className="font-bold"
+            sx={{ color: (theme) => `${theme.palette.error.main} !important` }}
+          >
+            You still have active projects. Please delete your projects before
+            proceeding with the account deletion.
+          </Text>
+        )}
+
+        <Box className="my-4">
+          <Checkbox
+            id="accept-1"
+            label={`I'm sure I want to delete my account`}
+            className="py-2"
+            checked={remove}
+            onChange={(_event, checked) => setRemove(checked)}
+            aria-label="Confirm Delete Project #1"
+          />
+        </Box>
+
+        <div className="grid grid-flow-row gap-2">
+          <Button
+            color="error"
+            onClick={onClickConfirm}
+            disabled={userHasProjects}
+            loading={loadingRemove}
+          >
+            Delete
+          </Button>
+
+          <Button variant="outlined" color="secondary" onClick={close}>
+            Cancel
+          </Button>
+        </div>
+      </div>
+    </Box>
+  );
+}
+
+export default function DeleteAccount() {
+  const router = useRouter();
+  const { signOut } = useSignOut();
+
+  const { openDialog, closeDialog } = useDialog();
+
+  const onDelete = async () => {
+    await signOut();
+    await router.push('/signin');
+  };
+
+  const confirmDeleteAccount = async () => {
+    openDialog({
+      component: (
+        <ConfirmDeleteAccountModal close={closeDialog} onDelete={onDelete} />
+      ),
+    });
+  };
+
+  return (
+    <SettingsContainer
+      title="Delete Account"
+      description="Please proceed with caution as the removal of your Personal Account and its contents from the Nhost platform is irreversible. This action will permanently delete your account and all associated data."
+      className="px-0"
+      slotProps={{
+        submitButton: { className: 'hidden' },
+        footer: { className: 'hidden' },
+      }}
+    >
+      <Box className="grid grid-flow-row border-t-1">
+        <Button
+          color="error"
+          className="mx-4 mt-4 justify-self-end"
+          onClick={confirmDeleteAccount}
+        >
+          Delete Personal Account
+        </Button>
+      </Box>
+    </SettingsContainer>
+  );
+}

dashboard/src/features/account/settings/components/DeleteAccount/index.ts

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

dashboard/src/features/account/settings/components/PATSettings/PATSettings.tsx

@@ -9,9 +9,11 @@ import { Dropdown } from '@/components/ui/v2/Dropdown';
 import { IconButton } from '@/components/ui/v2/IconButton';
 import { DotsVerticalIcon } from '@/components/ui/v2/icons/DotsVerticalIcon';
 import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
+import { WarningIcon } from '@/components/ui/v2/icons/WarningIcon';
 import { List } from '@/components/ui/v2/List';
 import { ListItem } from '@/components/ui/v2/ListItem';
 import { Text } from '@/components/ui/v2/Text';
+import { Tooltip } from '@/components/ui/v2/Tooltip';
 import { CreatePATForm } from '@/features/account/settings/components/CreatePATForm';
 import { getToastStyleProps } from '@/utils/constants/settings';
 import { getServerError } from '@/utils/getServerError';
@@ -133,69 +135,91 @@ export default function PATSettings() {
       <Box className="grid grid-flow-row gap-2">
         {availablePersonalAccessTokens.length > 0 && (
           <List>
-            {availablePersonalAccessTokens.map((pat, index) => (
-              <Fragment key={pat.id}>
-                <ListItem.Root
-                  className="grid grid-cols-3 gap-2 px-4 pr-12"
-                  secondaryAction={
-                    <Dropdown.Root>
-                      <Dropdown.Trigger
-                        asChild
-                        hideChevron
-                        className="absolute right-4 top-1/2 -translate-y-1/2"
-                      >
-                        <IconButton
-                          variant="borderless"
-                          color="secondary"
-                          disabled={maintenanceActive}
-                          aria-label={`More options for ${pat.name}`}
+            {availablePersonalAccessTokens.map((pat, index) => {
+              const tokenHasExpired = new Date(pat.expiresAt) < new Date();
+
+              return (
+                <Fragment key={pat.id}>
+                  <ListItem.Root
+                    className="grid grid-cols-3 gap-2 px-4 pr-12"
+                    secondaryAction={
+                      <Dropdown.Root>
+                        <Dropdown.Trigger
+                          asChild
+                          hideChevron
+                          className="absolute right-4 top-1/2 -translate-y-1/2"
                         >
-                          <DotsVerticalIcon />
-                        </IconButton>
-                      </Dropdown.Trigger>
+                          <IconButton
+                            variant="borderless"
+                            color="secondary"
+                            disabled={maintenanceActive}
+                            aria-label={`More options for ${pat.name}`}
+                          >
+                            <DotsVerticalIcon />
+                          </IconButton>
+                        </Dropdown.Trigger>
 
-                      <Dropdown.Content
-                        menu
-                        PaperProps={{ className: 'w-32' }}
-                        anchorOrigin={{
-                          vertical: 'bottom',
-                          horizontal: 'right',
-                        }}
-                        transformOrigin={{
-                          vertical: 'top',
-                          horizontal: 'right',
-                        }}
-                      >
-                        <Dropdown.Item onClick={() => handleConfirmDelete(pat)}>
-                          <Text className="font-medium" color="error">
-                            Delete
-                          </Text>
-                        </Dropdown.Item>
-                      </Dropdown.Content>
-                    </Dropdown.Root>
-                  }
-                >
-                  <ListItem.Text className="truncate">{pat.name}</ListItem.Text>
+                        <Dropdown.Content
+                          menu
+                          PaperProps={{ className: 'w-32' }}
+                          anchorOrigin={{
+                            vertical: 'bottom',
+                            horizontal: 'right',
+                          }}
+                          transformOrigin={{
+                            vertical: 'top',
+                            horizontal: 'right',
+                          }}
+                        >
+                          <Dropdown.Item
+                            onClick={() => handleConfirmDelete(pat)}
+                          >
+                            <Text className="font-medium" color="error">
+                              Delete
+                            </Text>
+                          </Dropdown.Item>
+                        </Dropdown.Content>
+                      </Dropdown.Root>
+                    }
+                  >
+                    <ListItem.Text
+                      className="truncate"
+                      color={tokenHasExpired ? 'warning' : 'primary'}
+                    >
+                      <span className="mr-2">{pat.name}</span>
+                      {tokenHasExpired && (
+                        <Tooltip title="This personal access token is expired.">
+                          <WarningIcon className="h-4 w-4" />
+                        </Tooltip>
+                      )}
+                    </ListItem.Text>
 
-                  <Text className="truncate">
-                    {new Date(pat.expiresAt).toLocaleDateString()}
-                  </Text>
+                    <Text
+                      className="truncate"
+                      color={tokenHasExpired ? 'warning' : 'primary'}
+                    >
+                      {new Date(pat.expiresAt).toLocaleDateString()}
+                    </Text>
 
-                  <Text className="truncate">
-                    {new Date(pat.createdAt).toLocaleDateString()}
-                  </Text>
-                </ListItem.Root>
+                    <Text
+                      className="truncate"
+                      color={tokenHasExpired ? 'warning' : 'primary'}
+                    >
+                      {new Date(pat.createdAt).toLocaleDateString()}
+                    </Text>
+                  </ListItem.Root>
 
-                <Divider
-                  component="li"
-                  className={twMerge(
-                    index === availablePersonalAccessTokens.length - 1
-                      ? '!mt-4'
-                      : '!my-4',
-                  )}
-                />
-              </Fragment>
-            ))}
+                  <Divider
+                    component="li"
+                    className={twMerge(
+                      index === availablePersonalAccessTokens.length - 1
+                        ? '!mt-4'
+                        : '!my-4',
+                    )}
+                  />
+                </Fragment>
+              );
+            })}
           </List>
         )}
 

dashboard/src/features/account/settings/gql/deleteUserAccount.gql

@@ -0,0 +1,5 @@
+mutation deleteUserAccount($id: uuid!) {
+  deleteUser(id: $id) {
+    __typename
+  }
+}

dashboard/src/features/account/settings/gql/getPersonalAccessTokens.gql

@@ -1,6 +1,6 @@
 query GetPersonalAccessTokens {
   personalAccessTokens: authRefreshTokens(
-    where: { type: { _eq: "pat" } }
+    where: { type: { _eq: pat } }
     order_by: { expiresAt: asc }
   ) {
     id

dashboard/src/features/authentication/settings/components/AppleProviderSettings/AppleProviderSettings.tsx

@@ -98,7 +98,7 @@ export default function AppleProviderSettings() {
   const { register, formState, watch } = form;
   const authEnabled = watch('enabled');
 
-  const handleProviderUpdate = async (values: AppleProviderFormValues) => {
+  async function handleSubmit(formValues: AppleProviderFormValues) {
     const updateConfigPromise = updateConfig({
       variables: {
         appId: currentProject.id,
@@ -107,7 +107,7 @@ export default function AppleProviderSettings() {
             method: {
               oauth: {
                 apple: {
-                  ...values,
+                  ...formValues,
                   scope: [],
                 },
               },
@@ -130,15 +130,15 @@ export default function AppleProviderSettings() {
         getToastStyleProps(),
       );
 
-      form.reset(values);
+      form.reset(formValues);
     } catch {
       // Note: The toast will handle the error.
     }
-  };
+  }
 
   return (
     <FormProvider {...form}>
-      <Form onSubmit={handleProviderUpdate}>
+      <Form onSubmit={handleSubmit}>
         <SettingsContainer
           title="Apple"
           description="Allow users to sign in with Apple."
@@ -214,7 +214,7 @@ export default function AppleProviderSettings() {
           />
           <Input
             name="redirectUrl"
-            id="redirectUrl"
+            id="apple-redirectUrl"
             defaultValue={`${generateAppServiceUrl(
               currentProject.subdomain,
               currentProject.region,

dashboard/src/features/authentication/settings/components/AuthServiceVersionSettings/AuthServiceVersionSettings.tsx

@@ -7,7 +7,9 @@ import { filterOptions } from '@/components/ui/v2/Autocomplete';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import {
   GetAuthenticationSettingsDocument,
+  Software_Type_Enum,
   useGetAuthenticationSettingsQuery,
+  useGetSoftwareVersionsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
 import { getToastStyleProps } from '@/utils/constants/settings';
@@ -28,14 +30,6 @@ export type AuthServiceVersionFormValues = Yup.InferType<
   typeof validationSchema
 >;
 
-const AVAILABLE_AUTH_VERSIONS = [
-  '0.20.1',
-  '0.20.0',
-  '0.19.3',
-  '0.19.2',
-  '0.19.1',
-];
-
 export default function AuthServiceVersionSettings() {
   const { maintenanceActive } = useUI();
   const { currentProject } = useCurrentWorkspaceAndProject();
@@ -48,9 +42,16 @@ export default function AuthServiceVersionSettings() {
     fetchPolicy: 'cache-only',
   });
 
+  const { data: authVersionsData } = useGetSoftwareVersionsQuery({
+    variables: {
+      software: Software_Type_Enum.Auth,
+    },
+  });
+
   const { version } = data?.config?.auth || {};
+  const versions = authVersionsData?.softwareVersions || [];
   const availableVersions = Array.from(
-    new Set(AVAILABLE_AUTH_VERSIONS).add(version),
+    new Set(versions.map((el) => el.version)).add(version),
   )
     .sort()
     .reverse()

dashboard/src/features/authentication/settings/components/AzureADProviderSettings/AzureADProviderSettings.tsx

@@ -90,7 +90,7 @@ export default function AzureADProviderSettings() {
   const { register, formState, watch } = form;
   const authEnabled = watch('enabled');
 
-  const handleProviderUpdate = async (values: AzureADProviderFormValues) => {
+  async function handleSubmit(formValues: AzureADProviderFormValues) {
     const updateConfigPromise = updateConfig({
       variables: {
         appId: currentProject.id,
@@ -98,7 +98,7 @@ export default function AzureADProviderSettings() {
           auth: {
             method: {
               oauth: {
-                azuread: values,
+                azuread: formValues,
               },
             },
           },
@@ -119,15 +119,15 @@ export default function AzureADProviderSettings() {
         getToastStyleProps(),
       );
 
-      form.reset(values);
+      form.reset(formValues);
     } catch {
       // Note: The toast will handle the error.
     }
-  };
+  }
 
   return (
     <FormProvider {...form}>
-      <Form onSubmit={handleProviderUpdate}>
+      <Form onSubmit={handleSubmit}>
         <SettingsContainer
           title="Azure AD"
           description="Allow users to sign in with Azure AD."
@@ -160,7 +160,7 @@ export default function AzureADProviderSettings() {
           />
           <Input
             name="redirectUrl"
-            id="redirectUrl"
+            id="azuerad-redirectUrl"
             defaultValue={`${generateAppServiceUrl(
               currentProject.subdomain,
               currentProject.region,

dashboard/src/features/authentication/settings/components/BitbucketProviderSettings/BitbucketProviderSettings.tsx

@@ -0,0 +1,167 @@
+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 { IconButton } from '@/components/ui/v2/IconButton';
+import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
+import { Input } from '@/components/ui/v2/Input';
+import { InputAdornment } from '@/components/ui/v2/InputAdornment';
+import type { BaseProviderSettingsFormValues } from '@/features/authentication/settings/components/BaseProviderSettings';
+import {
+  BaseProviderSettings,
+  baseProviderValidationSchema,
+} from '@/features/authentication/settings/components/BaseProviderSettings';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { generateAppServiceUrl } from '@/features/projects/common/utils/generateAppServiceUrl';
+import {
+  GetSignInMethodsDocument,
+  useGetSignInMethodsQuery,
+  useUpdateConfigMutation,
+} from '@/generated/graphql';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { copy } from '@/utils/copy';
+import { getServerError } from '@/utils/getServerError';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { FormProvider, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import { twMerge } from 'tailwind-merge';
+
+export default function BitbucketProviderSettings() {
+  const { maintenanceActive } = useUI();
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetSignInMethodsDocument],
+  });
+
+  const { data, loading, error } = useGetSignInMethodsQuery({
+    variables: { appId: currentProject?.id },
+    fetchPolicy: 'cache-only',
+  });
+
+  const { clientId, clientSecret, enabled } =
+    data?.config?.auth?.method?.oauth?.bitbucket || {};
+
+  const form = useForm<BaseProviderSettingsFormValues>({
+    reValidateMode: 'onSubmit',
+    defaultValues: {
+      clientId: clientId || '',
+      clientSecret: clientSecret || '',
+      enabled: enabled || false,
+    },
+    resolver: yupResolver(baseProviderValidationSchema),
+  });
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        delay={1000}
+        label="Loading settings for Bitbucket..."
+        className="justify-center"
+      />
+    );
+  }
+
+  if (error) {
+    throw error;
+  }
+
+  const { formState, watch } = form;
+  const authEnabled = watch('enabled');
+
+  async function handleSubmit(formValues: BaseProviderSettingsFormValues) {
+    const updateConfigPromise = updateConfig({
+      variables: {
+        appId: currentProject.id,
+        config: {
+          auth: {
+            method: {
+              oauth: {
+                bitbucket: formValues,
+              },
+            },
+          },
+        },
+      },
+    });
+
+    try {
+      await toast.promise(
+        updateConfigPromise,
+        {
+          loading: `Bitbucket settings are being updated...`,
+          success: `Bitbucket settings have been updated successfully.`,
+          error: getServerError(
+            `An error occurred while trying to update the project's Bitbucket settings.`,
+          ),
+        },
+        getToastStyleProps(),
+      );
+
+      form.reset(formValues);
+    } catch {
+      // Note: The toast will handle the error.
+    }
+  }
+
+  return (
+    <FormProvider {...form}>
+      <Form onSubmit={handleSubmit}>
+        <SettingsContainer
+          title="Bitbucket"
+          description="Allow users to sign in with Bitbucket."
+          slotProps={{
+            submitButton: {
+              disabled: !formState.isDirty || maintenanceActive,
+              loading: formState.isSubmitting,
+            },
+          }}
+          icon="/assets/brands/bitbucket.svg"
+          switchId="enabled"
+          showSwitch
+          className={twMerge(
+            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-y-4 gap-x-3 px-4 py-2',
+            !authEnabled && 'hidden',
+          )}
+        >
+          <BaseProviderSettings providerName="bitbucket" />
+          <Input
+            name="redirectUrl"
+            id="bitbucket-redirectUrl"
+            className="col-span-2"
+            fullWidth
+            hideEmptyHelperText
+            label="Redirect URL"
+            defaultValue={`${generateAppServiceUrl(
+              currentProject.subdomain,
+              currentProject.region,
+              'auth',
+            )}/signin/provider/bitbucket/callback`}
+            disabled
+            endAdornment={
+              <InputAdornment position="end" className="absolute right-2">
+                <IconButton
+                  sx={{ minWidth: 0, padding: 0 }}
+                  color="secondary"
+                  variant="borderless"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    copy(
+                      `${generateAppServiceUrl(
+                        currentProject.subdomain,
+                        currentProject.region,
+                        'auth',
+                      )}/signin/provider/bitbucket/callback`,
+                      'Redirect URL',
+                    );
+                  }}
+                >
+                  <CopyIcon className="h-4 w-4" />
+                </IconButton>
+              </InputAdornment>
+            }
+          />
+        </SettingsContainer>
+      </Form>
+    </FormProvider>
+  );
+}

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

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

dashboard/src/features/authentication/settings/components/DiscordProviderSettings/DiscordProviderSettings.tsx

@@ -68,9 +68,7 @@ export default function DiscordProviderSettings() {
   const { formState, watch } = form;
   const authEnabled = watch('enabled');
 
-  const handleProviderUpdate = async (
-    values: BaseProviderSettingsFormValues,
-  ) => {
+  async function handleSubmit(formValues: BaseProviderSettingsFormValues) {
     const updateConfigPromise = updateConfig({
       variables: {
         appId: currentProject?.id,
@@ -79,7 +77,7 @@ export default function DiscordProviderSettings() {
             method: {
               oauth: {
                 discord: {
-                  ...values,
+                  ...formValues,
                   scope: [],
                 },
               },
@@ -102,15 +100,15 @@ export default function DiscordProviderSettings() {
         getToastStyleProps(),
       );
 
-      form.reset(values);
+      form.reset(formValues);
     } catch {
       // Note: The toast will handle the error.
     }
-  };
+  }
 
   return (
     <FormProvider {...form}>
-      <Form onSubmit={handleProviderUpdate}>
+      <Form onSubmit={handleSubmit}>
         <SettingsContainer
           title="Discord"
           description="Allow users to sign in with Discord."
@@ -133,7 +131,7 @@ export default function DiscordProviderSettings() {
           <BaseProviderSettings providerName="discord" />
           <Input
             name="redirectUrl"
-            id="redirectUrl"
+            id="discord-redirectUrl"
             className="col-span-2"
             fullWidth
             hideEmptyHelperText

dashboard/src/features/authentication/settings/components/EmailAndPasswordSettings/EmailAndPasswordSettings.tsx

@@ -3,6 +3,7 @@ import { ControlledCheckbox } from '@/components/form/ControlledCheckbox';
 import { Form } from '@/components/form/Form';
 import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { Input } from '@/components/ui/v2/Input';
 import { Text } from '@/components/ui/v2/Text';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import {
@@ -20,6 +21,11 @@ import * as Yup from 'yup';
 const validationSchema = Yup.object({
   emailVerificationRequired: Yup.boolean(),
   hibpEnabled: Yup.boolean(),
+  passwordMinLength: Yup.number()
+    .label('Minimum password length')
+    .min(3)
+    .typeError('Minimum password length must be a number')
+    .required(),
 });
 
 export type EmailAndPasswordFormValues = Yup.InferType<typeof validationSchema>;
@@ -36,7 +42,7 @@ export default function EmailAndPasswordSettings() {
     fetchPolicy: 'cache-only',
   });
 
-  const { hibpEnabled, emailVerificationRequired } =
+  const { hibpEnabled, emailVerificationRequired, passwordMinLength } =
     data?.config?.auth?.method?.emailPassword || {};
 
   const form = useForm<EmailAndPasswordFormValues>({
@@ -44,6 +50,7 @@ export default function EmailAndPasswordSettings() {
     defaultValues: {
       hibpEnabled: hibpEnabled || false,
       emailVerificationRequired: emailVerificationRequired || false,
+      passwordMinLength: passwordMinLength || 9,
     },
     resolver: yupResolver(validationSchema),
   });
@@ -62,18 +69,16 @@ export default function EmailAndPasswordSettings() {
     throw error;
   }
 
-  const { formState } = form;
+  const { formState, register } = form;
 
-  const handleEmailAndPasswordSettingsChange = async (
-    values: EmailAndPasswordFormValues,
-  ) => {
+  async function handleSubmit(formValues: EmailAndPasswordFormValues) {
     const updateConfigPromise = updateConfig({
       variables: {
         appId: currentProject.id,
         config: {
           auth: {
             method: {
-              emailPassword: values,
+              emailPassword: formValues,
             },
           },
         },
@@ -93,15 +98,15 @@ export default function EmailAndPasswordSettings() {
         getToastStyleProps(),
       );
 
-      form.reset(values);
+      form.reset(formValues);
     } catch {
       // Note: The toast will handle the error.
     }
-  };
+  }
 
   return (
     <FormProvider {...form}>
-      <Form onSubmit={handleEmailAndPasswordSettingsChange}>
+      <Form onSubmit={handleSubmit}>
         <SettingsContainer
           title="Email and Password"
           description="Allow users to sign in with email and password."
@@ -118,6 +123,19 @@ export default function EmailAndPasswordSettings() {
             },
           }}
         >
+          <Input
+            {...register('passwordMinLength')}
+            id="passwordMinLength"
+            name="passwordMinLength"
+            type="number"
+            label="Minimum required password length"
+            fullWidth
+            className="lg:max-w-[50%]"
+            error={Boolean(formState.errors.passwordMinLength?.message)}
+            helperText={formState.errors.passwordMinLength?.message}
+            slotProps={{ inputRoot: { min: 3 } }}
+          />
+
           <ControlledCheckbox
             name="emailVerificationRequired"
             id="emailVerificationRequired"

dashboard/src/features/authentication/settings/components/FacebookProviderSettings/FacebookProviderSettings.tsx

@@ -68,9 +68,7 @@ export default function FacebookProviderSettings() {
   const { formState, watch } = form;
   const authEnabled = watch('enabled');
 
-  const handleProviderUpdate = async (
-    values: BaseProviderSettingsFormValues,
-  ) => {
+  async function handleSubmit(formValues: BaseProviderSettingsFormValues) {
     const updateConfigPromise = updateConfig({
       variables: {
         appId: currentProject.id,
@@ -79,7 +77,7 @@ export default function FacebookProviderSettings() {
             method: {
               oauth: {
                 facebook: {
-                  ...values,
+                  ...formValues,
                   scope: [],
                 },
               },
@@ -102,15 +100,15 @@ export default function FacebookProviderSettings() {
         getToastStyleProps(),
       );
 
-      form.reset(values);
+      form.reset(formValues);
     } catch {
       // Note: The toast will handle the error.
     }
-  };
+  }
 
   return (
     <FormProvider {...form}>
-      <Form onSubmit={handleProviderUpdate}>
+      <Form onSubmit={handleSubmit}>
         <SettingsContainer
           title="Facebook"
           description="Allow users to sign in with Facebook."
@@ -133,7 +131,7 @@ export default function FacebookProviderSettings() {
           <BaseProviderSettings providerName="facebook" />
           <Input
             name="redirectUrl"
-            id="redirectUrl"
+            id="facebook-redirectUrl"
             className="col-span-2"
             fullWidth
             hideEmptyHelperText

dashboard/src/features/authentication/settings/components/GitHubProviderSettings/GitHubProviderSettings.tsx

@@ -70,9 +70,7 @@ export default function GitHubProviderSettings() {
   const { formState, watch } = form;
   const authEnabled = watch('enabled');
 
-  const handleProviderUpdate = async (
-    values: BaseProviderSettingsFormValues,
-  ) => {
+  async function handleSubmit(formValues: BaseProviderSettingsFormValues) {
     const updateConfigPromise = updateConfig({
       variables: {
         appId: currentProject.id,
@@ -81,7 +79,7 @@ export default function GitHubProviderSettings() {
             method: {
               oauth: {
                 github: {
-                  ...values,
+                  ...formValues,
                   scope: [],
                 },
               },
@@ -104,15 +102,15 @@ export default function GitHubProviderSettings() {
         getToastStyleProps(),
       );
 
-      form.reset(values);
+      form.reset(formValues);
     } catch {
       // Note: The toast will handle the error.
     }
-  };
+  }
 
   return (
     <FormProvider {...form}>
-      <Form onSubmit={handleProviderUpdate}>
+      <Form onSubmit={handleSubmit}>
         <SettingsContainer
           title="GitHub"
           description="Allow users to sign in with GitHub."
@@ -139,7 +137,7 @@ export default function GitHubProviderSettings() {
           <BaseProviderSettings providerName="github" />
           <Input
             name="redirectUrl"
-            id="redirectUrl"
+            id="github-redirectUrl"
             className="col-span-2"
             fullWidth
             hideEmptyHelperText

dashboard/src/features/authentication/settings/components/GitLabProviderSettings/GitLabProviderSettings.tsx

@@ -0,0 +1,170 @@
+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 { IconButton } from '@/components/ui/v2/IconButton';
+import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
+import { Input } from '@/components/ui/v2/Input';
+import { InputAdornment } from '@/components/ui/v2/InputAdornment';
+import type { BaseProviderSettingsFormValues } from '@/features/authentication/settings/components/BaseProviderSettings';
+import {
+  BaseProviderSettings,
+  baseProviderValidationSchema,
+} from '@/features/authentication/settings/components/BaseProviderSettings';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { generateAppServiceUrl } from '@/features/projects/common/utils/generateAppServiceUrl';
+import {
+  GetSignInMethodsDocument,
+  useGetSignInMethodsQuery,
+  useUpdateConfigMutation,
+} from '@/generated/graphql';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { copy } from '@/utils/copy';
+import { getServerError } from '@/utils/getServerError';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { FormProvider, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import { twMerge } from 'tailwind-merge';
+
+export default function GitLabProviderSettings() {
+  const { maintenanceActive } = useUI();
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetSignInMethodsDocument],
+  });
+
+  const { data, loading, error } = useGetSignInMethodsQuery({
+    variables: { appId: currentProject?.id },
+    fetchPolicy: 'cache-only',
+  });
+
+  const { clientId, clientSecret, enabled } =
+    data?.config?.auth?.method?.oauth?.gitlab || {};
+
+  const form = useForm<BaseProviderSettingsFormValues>({
+    reValidateMode: 'onSubmit',
+    defaultValues: {
+      clientId: clientId || '',
+      clientSecret: clientSecret || '',
+      enabled: enabled || false,
+    },
+    resolver: yupResolver(baseProviderValidationSchema),
+  });
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        delay={1000}
+        label="Loading settings for GitLab..."
+        className="justify-center"
+      />
+    );
+  }
+
+  if (error) {
+    throw error;
+  }
+
+  const { formState, watch } = form;
+  const authEnabled = watch('enabled');
+
+  async function handleSubmit(values: BaseProviderSettingsFormValues) {
+    const updateConfigPromise = updateConfig({
+      variables: {
+        appId: currentProject.id,
+        config: {
+          auth: {
+            method: {
+              oauth: {
+                gitlab: {
+                  ...values,
+                  scope: [],
+                },
+              },
+            },
+          },
+        },
+      },
+    });
+
+    try {
+      await toast.promise(
+        updateConfigPromise,
+        {
+          loading: `GitLab settings are being updated...`,
+          success: `GitLab settings have been updated successfully.`,
+          error: getServerError(
+            `An error occurred while trying to update the project's GitLab settings.`,
+          ),
+        },
+        getToastStyleProps(),
+      );
+
+      form.reset(values);
+    } catch {
+      // Note: The toast will handle the error.
+    }
+  }
+
+  return (
+    <FormProvider {...form}>
+      <Form onSubmit={handleSubmit}>
+        <SettingsContainer
+          title="GitLab"
+          description="Allow users to sign in with GitLab."
+          slotProps={{
+            submitButton: {
+              disabled: !formState.isDirty || maintenanceActive,
+              loading: formState.isSubmitting,
+            },
+          }}
+          icon="/assets/brands/gitlab.svg"
+          switchId="enabled"
+          showSwitch
+          className={twMerge(
+            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-y-4 gap-x-3 px-4 py-2',
+            !authEnabled && 'hidden',
+          )}
+        >
+          <BaseProviderSettings providerName="gitlab" />
+          <Input
+            name="redirectUrl"
+            id="gitlab-redirectUrl"
+            className="col-span-2"
+            fullWidth
+            hideEmptyHelperText
+            label="Redirect URL"
+            defaultValue={`${generateAppServiceUrl(
+              currentProject.subdomain,
+              currentProject.region,
+              'auth',
+            )}/signin/provider/gitlab/callback`}
+            disabled
+            endAdornment={
+              <InputAdornment position="end" className="absolute right-2">
+                <IconButton
+                  sx={{ minWidth: 0, padding: 0 }}
+                  color="secondary"
+                  variant="borderless"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    copy(
+                      `${generateAppServiceUrl(
+                        currentProject.subdomain,
+                        currentProject.region,
+                        'auth',
+                      )}/signin/provider/gitlab/callback`,
+                      'Redirect URL',
+                    );
+                  }}
+                >
+                  <CopyIcon className="h-4 w-4" />
+                </IconButton>
+              </InputAdornment>
+            }
+          />
+        </SettingsContainer>
+      </Form>
+    </FormProvider>
+  );
+}

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

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

dashboard/src/features/authentication/settings/components/GoogleProviderSettings/GoogleProviderSettings.tsx

@@ -68,9 +68,7 @@ export default function GoogleProviderSettings() {
   const { formState, watch } = form;
   const authEnabled = watch('enabled');
 
-  const handleProviderUpdate = async (
-    values: BaseProviderSettingsFormValues,
-  ) => {
+  async function handleSubmit(formValues: BaseProviderSettingsFormValues) {
     const updateConfigPromise = updateConfig({
       variables: {
         appId: currentProject.id,
@@ -79,7 +77,7 @@ export default function GoogleProviderSettings() {
             method: {
               oauth: {
                 google: {
-                  ...values,
+                  ...formValues,
                   scope: [],
                 },
               },
@@ -102,15 +100,15 @@ export default function GoogleProviderSettings() {
         getToastStyleProps(),
       );
 
-      form.reset(values);
+      form.reset(formValues);
     } catch {
       // Note: The toast will handle the error.
     }
-  };
+  }
 
   return (
     <FormProvider {...form}>
-      <Form onSubmit={handleProviderUpdate}>
+      <Form onSubmit={handleSubmit}>
         <SettingsContainer
           title="Google"
           description="Allow users to sign in with Google."
@@ -133,7 +131,7 @@ export default function GoogleProviderSettings() {
           <BaseProviderSettings providerName="google" />
           <Input
             name="redirectUrl"
-            id="redirectUrl"
+            id="google-redirectUrl"
             className="col-span-2"
             fullWidth
             hideEmptyHelperText

dashboard/src/features/authentication/settings/components/LinkedInProviderSettings/LinkedInProviderSettings.tsx

@@ -68,9 +68,7 @@ export default function LinkedInProviderSettings() {
   const { formState, watch } = form;
   const authEnabled = watch('enabled');
 
-  const handleProviderUpdate = async (
-    values: BaseProviderSettingsFormValues,
-  ) => {
+  async function handleSubmit(formValues: BaseProviderSettingsFormValues) {
     const updateConfigPromise = updateConfig({
       variables: {
         appId: currentProject.id,
@@ -79,7 +77,7 @@ export default function LinkedInProviderSettings() {
             method: {
               oauth: {
                 linkedin: {
-                  ...values,
+                  ...formValues,
                   scope: [],
                 },
               },
@@ -102,15 +100,15 @@ export default function LinkedInProviderSettings() {
         getToastStyleProps(),
       );
 
-      form.reset(values);
+      form.reset(formValues);
     } catch {
       // Note: The toast will handle the error.
     }
-  };
+  }
 
   return (
     <FormProvider {...form}>
-      <Form onSubmit={handleProviderUpdate}>
+      <Form onSubmit={handleSubmit}>
         <SettingsContainer
           title="LinkedIn"
           description="Allow users to sign in with LinkedIn."
@@ -133,7 +131,7 @@ export default function LinkedInProviderSettings() {
           <BaseProviderSettings providerName="linkedin" />
           <Input
             name="redirectUrl"
-            id="redirectUrl"
+            id="linkedin-redirectUrl"
             className="col-span-2"
             fullWidth
             hideEmptyHelperText

dashboard/src/features/authentication/settings/components/SessionSettings/SessionSettings.tsx

@@ -0,0 +1,145 @@
+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 { Input } from '@/components/ui/v2/Input';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import {
+  GetAuthenticationSettingsDocument,
+  useGetAuthenticationSettingsQuery,
+  useUpdateConfigMutation,
+} from '@/generated/graphql';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { getServerError } from '@/utils/getServerError';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { FormProvider, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import * as Yup from 'yup';
+
+const validationSchema = Yup.object({
+  accessTokenExpiresIn: Yup.number()
+    .label('Access token expiration')
+    .typeError('Access token expiration must be a number')
+    .required(),
+  refreshTokenExpiresIn: Yup.number()
+    .label('Refresh token expiration')
+    .typeError('Refresh token expiration must be a number')
+    .required(),
+});
+
+export type SessionFormValues = Yup.InferType<typeof validationSchema>;
+
+export default function SessionSettings() {
+  const { maintenanceActive } = useUI();
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetAuthenticationSettingsDocument],
+  });
+
+  const { data, loading, error } = useGetAuthenticationSettingsQuery({
+    variables: { appId: currentProject?.id },
+    fetchPolicy: 'cache-only',
+  });
+
+  const { accessToken, refreshToken } = data?.config?.auth?.session || {};
+
+  const form = useForm<SessionFormValues>({
+    reValidateMode: 'onSubmit',
+    defaultValues: {
+      accessTokenExpiresIn: accessToken?.expiresIn || 900,
+      refreshTokenExpiresIn: refreshToken?.expiresIn || 43200,
+    },
+    resolver: yupResolver(validationSchema),
+  });
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        delay={1000}
+        label="Loading session settings..."
+        className="justify-center"
+      />
+    );
+  }
+
+  if (error) {
+    throw error;
+  }
+
+  const { register, formState } = form;
+  const isDirty = Object.keys(formState.dirtyFields).length > 0;
+
+  const handleSessionSettingsChange = async (formValues: SessionFormValues) => {
+    const updateConfigPromise = updateConfig({
+      variables: {
+        appId: currentProject.id,
+        config: {
+          auth: {
+            session: {
+              accessToken: { expiresIn: formValues.accessTokenExpiresIn },
+              refreshToken: { expiresIn: formValues.refreshTokenExpiresIn },
+            },
+          },
+        },
+      },
+    });
+
+    try {
+      await toast.promise(
+        updateConfigPromise,
+        {
+          loading: `Session settings are being updated...`,
+          success: `Session settings have been updated successfully.`,
+          error: getServerError(
+            `An error occurred while trying to update the project's session settings.`,
+          ),
+        },
+        getToastStyleProps(),
+      );
+
+      form.reset(formValues);
+    } catch {
+      // Note: The toast will handle the error.
+    }
+  };
+
+  return (
+    <FormProvider {...form}>
+      <Form onSubmit={handleSessionSettingsChange}>
+        <SettingsContainer
+          title="Session"
+          description="Change the expiration time of the access and refresh tokens."
+          slotProps={{
+            submitButton: {
+              disabled: !isDirty || maintenanceActive,
+              loading: formState.isSubmitting,
+            },
+          }}
+          className="grid grid-cols-5 grid-rows-2 gap-y-6"
+        >
+          <Input
+            {...register('accessTokenExpiresIn')}
+            id="accessTokenExpiresIn"
+            type="number"
+            label="Access Token Expires In (Seconds)"
+            fullWidth
+            className="col-span-5 lg:col-span-2"
+            error={Boolean(formState.errors.accessTokenExpiresIn?.message)}
+            helperText={formState.errors.accessTokenExpiresIn?.message}
+          />
+
+          <Input
+            {...register('refreshTokenExpiresIn')}
+            id="refreshTokenExpiresIn"
+            type="number"
+            label="Refresh Token Expires In (Seconds)"
+            fullWidth
+            className="col-span-5 row-start-2 lg:col-span-2"
+            error={Boolean(formState.errors.refreshTokenExpiresIn?.message)}
+            helperText={formState.errors.refreshTokenExpiresIn?.message}
+          />
+        </SettingsContainer>
+      </Form>
+    </FormProvider>
+  );
+}

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

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

dashboard/src/features/authentication/settings/components/SpotifyProviderSettings/SpotifyProviderSettings.tsx

@@ -68,9 +68,7 @@ export default function SpotifyProviderSettings() {
   const { formState, watch } = form;
   const authEnabled = watch('enabled');
 
-  const handleProviderUpdate = async (
-    values: BaseProviderSettingsFormValues,
-  ) => {
+  async function handleSubmit(formValues: BaseProviderSettingsFormValues) {
     const updateConfigPromise = updateConfig({
       variables: {
         appId: currentProject.id,
@@ -79,7 +77,7 @@ export default function SpotifyProviderSettings() {
             method: {
               oauth: {
                 spotify: {
-                  ...values,
+                  ...formValues,
                   scope: [],
                 },
               },
@@ -102,15 +100,15 @@ export default function SpotifyProviderSettings() {
         getToastStyleProps(),
       );
 
-      form.reset(values);
+      form.reset(formValues);
     } catch {
       // Note: The toast will handle the error.
     }
-  };
+  }
 
   return (
     <FormProvider {...form}>
-      <Form onSubmit={handleProviderUpdate}>
+      <Form onSubmit={handleSubmit}>
         <SettingsContainer
           title="Spotify"
           description="Allow users to sign in with Spotify."
@@ -133,7 +131,7 @@ export default function SpotifyProviderSettings() {
           <BaseProviderSettings providerName="spotify" />
           <Input
             name="redirectUrl"
-            id="redirectUrl"
+            id="spotify-redirectUrl"
             className="col-span-2"
             fullWidth
             hideEmptyHelperText

dashboard/src/features/authentication/settings/components/StravaProviderSettings/StravaProviderSettings.tsx

@@ -0,0 +1,170 @@
+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 { IconButton } from '@/components/ui/v2/IconButton';
+import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
+import { Input } from '@/components/ui/v2/Input';
+import { InputAdornment } from '@/components/ui/v2/InputAdornment';
+import type { BaseProviderSettingsFormValues } from '@/features/authentication/settings/components/BaseProviderSettings';
+import {
+  BaseProviderSettings,
+  baseProviderValidationSchema,
+} from '@/features/authentication/settings/components/BaseProviderSettings';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { generateAppServiceUrl } from '@/features/projects/common/utils/generateAppServiceUrl';
+import {
+  GetSignInMethodsDocument,
+  useGetSignInMethodsQuery,
+  useUpdateConfigMutation,
+} from '@/generated/graphql';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { copy } from '@/utils/copy';
+import { getServerError } from '@/utils/getServerError';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { FormProvider, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import { twMerge } from 'tailwind-merge';
+
+export default function StravaProviderSettings() {
+  const { maintenanceActive } = useUI();
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetSignInMethodsDocument],
+  });
+
+  const { data, loading, error } = useGetSignInMethodsQuery({
+    variables: { appId: currentProject?.id },
+    fetchPolicy: 'cache-only',
+  });
+
+  const { clientId, clientSecret, enabled } =
+    data?.config?.auth?.method?.oauth?.strava || {};
+
+  const form = useForm<BaseProviderSettingsFormValues>({
+    reValidateMode: 'onSubmit',
+    defaultValues: {
+      clientId: clientId || '',
+      clientSecret: clientSecret || '',
+      enabled: enabled || false,
+    },
+    resolver: yupResolver(baseProviderValidationSchema),
+  });
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        delay={1000}
+        label="Loading settings for Strava..."
+        className="justify-center"
+      />
+    );
+  }
+
+  if (error) {
+    throw error;
+  }
+
+  const { formState, watch } = form;
+  const authEnabled = watch('enabled');
+
+  async function handleSubmit(values: BaseProviderSettingsFormValues) {
+    const updateConfigPromise = updateConfig({
+      variables: {
+        appId: currentProject.id,
+        config: {
+          auth: {
+            method: {
+              oauth: {
+                strava: {
+                  ...values,
+                  scope: [],
+                },
+              },
+            },
+          },
+        },
+      },
+    });
+
+    try {
+      await toast.promise(
+        updateConfigPromise,
+        {
+          loading: `Strava settings are being updated...`,
+          success: `Strava settings have been updated successfully.`,
+          error: getServerError(
+            `An error occurred while trying to update the project's Strava settings.`,
+          ),
+        },
+        getToastStyleProps(),
+      );
+
+      form.reset(values);
+    } catch {
+      // Note: The toast will handle the error.
+    }
+  }
+
+  return (
+    <FormProvider {...form}>
+      <Form onSubmit={handleSubmit}>
+        <SettingsContainer
+          title="Strava"
+          description="Allow users to sign in with Strava."
+          slotProps={{
+            submitButton: {
+              disabled: !formState.isDirty || maintenanceActive,
+              loading: formState.isSubmitting,
+            },
+          }}
+          icon="/assets/brands/strava.svg"
+          switchId="enabled"
+          showSwitch
+          className={twMerge(
+            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-y-4 gap-x-3 px-4 py-2',
+            !authEnabled && 'hidden',
+          )}
+        >
+          <BaseProviderSettings providerName="strava" />
+          <Input
+            name="redirectUrl"
+            id="strava-redirectUrl"
+            className="col-span-2"
+            fullWidth
+            hideEmptyHelperText
+            label="Redirect URL"
+            defaultValue={`${generateAppServiceUrl(
+              currentProject.subdomain,
+              currentProject.region,
+              'auth',
+            )}/signin/provider/strava/callback`}
+            disabled
+            endAdornment={
+              <InputAdornment position="end" className="absolute right-2">
+                <IconButton
+                  sx={{ minWidth: 0, padding: 0 }}
+                  color="secondary"
+                  variant="borderless"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    copy(
+                      `${generateAppServiceUrl(
+                        currentProject.subdomain,
+                        currentProject.region,
+                        'auth',
+                      )}/signin/provider/strava/callback`,
+                      'Redirect URL',
+                    );
+                  }}
+                >
+                  <CopyIcon className="h-4 w-4" />
+                </IconButton>
+              </InputAdornment>
+            }
+          />
+        </SettingsContainer>
+      </Form>
+    </FormProvider>
+  );
+}

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

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

dashboard/src/features/authentication/settings/components/TwitchProviderSettings/TwitchProviderSettings.tsx

@@ -70,9 +70,7 @@ export default function TwitchProviderSettings() {
   const { formState, watch } = form;
   const authEnabled = watch('enabled');
 
-  const handleProviderUpdate = async (
-    values: BaseProviderSettingsFormValues,
-  ) => {
+  async function handleSubmit(formValues: BaseProviderSettingsFormValues) {
     const updateConfigPromise = updateConfig({
       variables: {
         appId: currentProject.id,
@@ -81,7 +79,7 @@ export default function TwitchProviderSettings() {
             method: {
               oauth: {
                 twitch: {
-                  ...values,
+                  ...formValues,
                   scope: [],
                 },
               },
@@ -104,15 +102,15 @@ export default function TwitchProviderSettings() {
         getToastStyleProps(),
       );
 
-      form.reset(values);
+      form.reset(formValues);
     } catch {
       // Note: The toast will handle the error.
     }
-  };
+  }
 
   return (
     <FormProvider {...form}>
-      <Form onSubmit={handleProviderUpdate}>
+      <Form onSubmit={handleSubmit}>
         <SettingsContainer
           title="Twitch"
           description="Allow users to sign in with Twitch."
@@ -139,7 +137,7 @@ export default function TwitchProviderSettings() {
           <BaseProviderSettings providerName="twitch" />
           <Input
             name="redirectUrl"
-            id="redirectUrl"
+            id="twitch-redirectUrl"
             className="col-span-2"
             fullWidth
             hideEmptyHelperText

dashboard/src/features/authentication/settings/components/TwitterProviderSettings/TwitterProviderSettings.tsx

@@ -82,7 +82,7 @@ export default function TwitterProviderSettings() {
   const { register, formState, watch } = form;
   const authEnabled = watch('enabled');
 
-  const handleProviderUpdate = async (values: TwitterProviderFormValues) => {
+  async function handleSubmit(formValues: TwitterProviderFormValues) {
     const updateConfigPromise = updateConfig({
       variables: {
         appId: currentProject.id,
@@ -90,7 +90,7 @@ export default function TwitterProviderSettings() {
           auth: {
             method: {
               oauth: {
-                twitter: values,
+                twitter: formValues,
               },
             },
           },
@@ -111,15 +111,15 @@ export default function TwitterProviderSettings() {
         getToastStyleProps(),
       );
 
-      form.reset(values);
+      form.reset(formValues);
     } catch {
       // Note: The toast will handle the error.
     }
-  };
+  }
 
   return (
     <FormProvider {...form}>
-      <Form onSubmit={handleProviderUpdate}>
+      <Form onSubmit={handleSubmit}>
         <SettingsContainer
           title="Twitter"
           description="Allow users to sign in with Twitter."
@@ -164,7 +164,7 @@ export default function TwitterProviderSettings() {
           />
           <Input
             name="redirectUrl"
-            id="redirectUrl"
+            id="twitter-redirectUrl"
             defaultValue={`${generateAppServiceUrl(
               currentProject.subdomain,
               currentProject.region,

dashboard/src/features/authentication/settings/components/WebAuthnSettings/WebAuthnSettings.tsx

@@ -66,7 +66,10 @@ export default function WebAuthnSettings() {
         config: {
           auth: {
             method: {
-              webauthn: values,
+              webauthn: {...values,
+              relyingParty: {
+                name: currentProject.name,
+              }},
             },
           },
         },

dashboard/src/features/authentication/settings/components/WindowsLiveProviderSettings/WindowsLiveProviderSettings.tsx

@@ -68,9 +68,7 @@ export default function WindowsLiveProviderSettings() {
   const { formState, watch } = form;
   const authEnabled = watch('enabled');
 
-  const handleProviderUpdate = async (
-    values: BaseProviderSettingsFormValues,
-  ) => {
+  async function handleSubmit(formValues: BaseProviderSettingsFormValues) {
     const updateConfigPromise = updateConfig({
       variables: {
         appId: currentProject.id,
@@ -79,7 +77,7 @@ export default function WindowsLiveProviderSettings() {
             method: {
               oauth: {
                 windowslive: {
-                  ...values,
+                  ...formValues,
                   scope: [],
                 },
               },
@@ -102,15 +100,15 @@ export default function WindowsLiveProviderSettings() {
         getToastStyleProps(),
       );
 
-      form.reset(values);
+      form.reset(formValues);
     } catch {
       // Note: The toast will handle the error.
     }
-  };
+  }
 
   return (
     <FormProvider {...form}>
-      <Form onSubmit={handleProviderUpdate}>
+      <Form onSubmit={handleSubmit}>
         <SettingsContainer
           title="Windows Live"
           description="Allow users to sign in with Windows Live."
@@ -132,7 +130,7 @@ export default function WindowsLiveProviderSettings() {
           <BaseProviderSettings providerName="windowslive" />
           <Input
             name="redirectUrl"
-            id="redirectUrl"
+            id="windowslive-redirectUrl"
             className="col-span-2"
             fullWidth
             hideEmptyHelperText

dashboard/src/features/authentication/settings/components/WorkOsProviderSettings/WorkOsProviderSettings.tsx

@@ -97,7 +97,7 @@ export default function WorkOsProviderSettings() {
   const { register, formState, watch } = form;
   const authEnabled = watch('enabled');
 
-  const handleProviderUpdate = async (values: WorkOsProviderFormValues) => {
+  async function handleSubmit(formValues: WorkOsProviderFormValues) {
     const updateConfigPromise = updateConfig({
       variables: {
         appId: currentProject.id,
@@ -105,7 +105,7 @@ export default function WorkOsProviderSettings() {
           auth: {
             method: {
               oauth: {
-                workos: values,
+                workos: formValues,
               },
             },
           },
@@ -126,15 +126,15 @@ export default function WorkOsProviderSettings() {
         getToastStyleProps(),
       );
 
-      form.reset(values);
+      form.reset(formValues);
     } catch {
       // Note: The toast will handle the error.
     }
-  };
+  }
 
   return (
     <FormProvider {...form}>
-      <Form onSubmit={handleProviderUpdate}>
+      <Form onSubmit={handleSubmit}>
         <SettingsContainer
           title="WorkOS"
           description="Allow users to sign in with WorkOS."
@@ -181,7 +181,7 @@ export default function WorkOsProviderSettings() {
           />
           <Input
             name="redirectUrl"
-            id="redirectUrl"
+            id="workos-redirectUrl"
             defaultValue={`${generateAppServiceUrl(
               currentProject.subdomain,
               currentProject.region,

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

@@ -1,5 +1,5 @@
 query GetAuthenticationSettings($appId: uuid!) {
-  config(appID: $appId, resolve: true) {
+  config(appID: $appId, resolve: false) {
     id: __typename
     __typename
     auth {
@@ -16,6 +16,21 @@ query GetAuthenticationSettings($appId: uuid!) {
       signUp {
         enabled
       }
+      session {
+        accessToken {
+          expiresIn
+        }
+        refreshToken {
+          expiresIn
+        }
+      }
+      resources {
+        networking {
+          ingresses {
+            fqdn
+          }
+        }
+      }
       user {
         email {
           allowed
@@ -30,6 +45,10 @@ query GetAuthenticationSettings($appId: uuid!) {
           default
           rating
         }
+        locale {
+          allowed
+          default
+        }
       }
       version
     }

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

@@ -24,6 +24,7 @@ import { copy } from '@/utils/copy';
 import { getServerError } from '@/utils/getServerError';
 import {
   RemoteAppGetUsersDocument,
+  useGetProjectLocalesQuery,
   useGetRolesPermissionsQuery,
   useUpdateRemoteAppUserMutation,
 } from '@/utils/__generated__/graphql';
@@ -146,6 +147,14 @@ export default function EditUserForm({
     dataRoles?.config?.auth?.user?.roles?.allowed,
   );
 
+  const { data } = useGetProjectLocalesQuery({
+    variables: {
+      appId: currentProject?.id,
+    },
+  });
+
+  const allowedLocales = data?.config?.auth?.user?.locale?.allowed || [];
+
   /**
    * This will change the `disabled` field in the user to its opposite.
    * If the user is disabled, it will be enabled and vice versa.
@@ -374,12 +383,11 @@ export default function EditUserForm({
               error={!!errors.locale}
               helperText={errors?.locale?.message}
             >
-              <Option key="en" value="en">
-                en
-              </Option>
-              <Option key="fr" value="fr">
-                fr
-              </Option>
+              {allowedLocales.map((locale) => (
+                <Option key={locale} value={locale}>
+                  {locale}
+                </Option>
+              ))}
             </ControlledSelect>
           </Box>
           <Box

dashboard/src/features/authentication/users/components/EditUserPasswordForm/EditUserPasswordForm.tsx

@@ -3,12 +3,16 @@ import { Form } from '@/components/form/Form';
 import { Alert } from '@/components/ui/v2/Alert';
 import { Button } from '@/components/ui/v2/Button';
 import { Input } from '@/components/ui/v2/Input';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import { useRemoteApplicationGQLClient } from '@/hooks/useRemoteApplicationGQLClient';
 import type { DialogFormProps } from '@/types/common';
 import { getToastStyleProps } from '@/utils/constants/settings';
 import { getServerError } from '@/utils/getServerError';
 import type { RemoteAppGetUsersQuery } from '@/utils/__generated__/graphql';
-import { useUpdateRemoteAppUserMutation } from '@/utils/__generated__/graphql';
+import {
+  useGetSignInMethodsQuery,
+  useUpdateRemoteAppUserMutation,
+} from '@/utils/__generated__/graphql';
 import { yupResolver } from '@hookform/resolvers/yup';
 import bcrypt from 'bcryptjs';
 import { useState } from 'react';
@@ -27,19 +31,6 @@ export interface EditUserPasswordFormProps extends DialogFormProps {
   user: RemoteAppGetUsersQuery['users'][0];
 }
 
-export const validationSchema = Yup.object({
-  password: Yup.string()
-    .label('Users Password')
-    .min(8, 'Password must be at least 8 characters long.')
-    .required('This field is required.'),
-  cpassword: Yup.string()
-    .required('Confirm Password is required')
-    .min(8, 'Password must be at least 8 characters long.')
-    .oneOf([Yup.ref('password')], 'Passwords do not match'),
-});
-
-export type EditUserPasswordFormValues = Yup.InferType<typeof validationSchema>;
-
 export default function EditUserPasswordForm({
   onCancel,
   user,
@@ -49,26 +40,52 @@ export default function EditUserPasswordForm({
     client: remoteProjectGQLClient,
   });
   const { closeDialog } = useDialog();
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const { data } = useGetSignInMethodsQuery({
+    variables: { appId: currentProject?.id },
+    skip: !currentProject?.id,
+  });
+
+  const passwordMinLength =
+    data?.config?.auth?.method?.emailPassword?.passwordMinLength || 1;
+
+  const validationSchema = Yup.object({
+    password: Yup.string()
+      .label('Password')
+      .min(
+        passwordMinLength,
+        `Password must be at least ${passwordMinLength} characters long.`,
+      )
+      .required('This field is required.'),
+    cpassword: Yup.string()
+      .label('Password Confirmation')
+      .min(
+        passwordMinLength,
+        `Password must be at least ${passwordMinLength} characters long.`,
+      )
+      .oneOf([Yup.ref('password')], 'Passwords do not match')
+      .required('This field is required.'),
+  });
 
   const [editUserPasswordFormError, setEditUserPasswordFormError] =
     useState<Error | null>(null);
 
-  const form = useForm<EditUserPasswordFormValues>({
+  const form = useForm<Yup.InferType<typeof validationSchema>>({
     defaultValues: {},
     reValidateMode: 'onSubmit',
     resolver: yupResolver(validationSchema),
   });
 
-  const handleSubmit = async ({ password }: EditUserPasswordFormValues) => {
+  const handleSubmit = async ({
+    password,
+  }: Yup.InferType<typeof validationSchema>) => {
     setEditUserPasswordFormError(null);
     const passwordHash = await bcrypt.hash(password, 10);
 
     const updateUserPasswordPromise = updateUser({
       variables: {
         id: user.id,
-        user: {
-          passwordHash,
-        },
+        user: { passwordHash },
       },
       client: remoteProjectGQLClient,
     });

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

@@ -3,6 +3,7 @@ import { Button } from '@/components/ui/v2/Button';
 import { Text } from '@/components/ui/v2/Text';
 import hasuraMetadataQuery from '@/tests/msw/mocks/rest/hasuraMetadataQuery';
 import tableQuery from '@/tests/msw/mocks/rest/tableQuery';
+import tokenQuery from '@/tests/msw/mocks/rest/tokenQuery';
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
@@ -34,7 +35,7 @@ const defaultParameters = {
     },
   },
   msw: {
-    handlers: [tableQuery, hasuraMetadataQuery],
+    handlers: [tokenQuery, tableQuery, hasuraMetadataQuery],
   },
 };
 

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

@@ -2,8 +2,9 @@ import permissionVariablesQuery from '@/tests/msw/mocks/graphql/permissionVariab
 import hasuraMetadataQuery from '@/tests/msw/mocks/rest/hasuraMetadataQuery';
 import tableQuery from '@/tests/msw/mocks/rest/tableQuery';
 import { render, screen } from '@/tests/testUtils';
+import '@testing-library/jest-dom';
 import { setupServer } from 'msw/node';
-import { test, vi } from 'vitest';
+import { afterAll, afterEach, beforeAll, test, vi } from 'vitest';
 import ColumnAutocomplete from './ColumnAutocomplete';
 
 const server = setupServer(

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

@@ -17,6 +17,7 @@ import { DotsHorizontalIcon } from '@/components/ui/v2/icons/DotsHorizontalIcon'
 import { LockIcon } from '@/components/ui/v2/icons/LockIcon';
 import { PencilIcon } from '@/components/ui/v2/icons/PencilIcon';
 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';
@@ -86,7 +87,9 @@ function DataBrowserSidebarContent({
   const isGitHubConnected = !!currentProject?.githubRepository;
 
   const router = useRouter();
+
   const {
+    asPath,
     query: { workspaceSlug, appSlug, dataSourceSlug, schemaSlug, tableSlug },
   } = router;
 
@@ -108,6 +111,8 @@ function DataBrowserSidebarContent({
    */
   const [sidebarMenuTable, setSidebarMenuTable] = useState<string>();
 
+  const sqlEditorHref = `/${workspaceSlug}/${appSlug}/database/browser/default/editor`;
+
   useEffect(() => {
     if (selectedSchema) {
       return;
@@ -258,194 +263,135 @@ function DataBrowserSidebarContent({
   }
 
   return (
-    <div className="grid gap-1">
-      {schemas && schemas.length > 0 && (
-        <Select
-          renderValue={(option) => (
-            <span className="grid grid-flow-col items-center gap-1">
-              {option?.label}
-            </span>
-          )}
-          slotProps={{
-            listbox: { className: 'max-w-[220px] min-w-[initial] w-full' },
-            popper: { className: 'max-w-[220px] min-w-[initial] w-full' },
-          }}
-          value={selectedSchema}
-          onChange={(_event, value) => setSelectedSchema(value as string)}
-        >
-          {schemas.map((schema) => (
-            <Option
-              className="grid grid-flow-col items-center gap-1"
-              value={schema.schema_name}
-              key={schema.schema_name}
-            >
-              <Text className="text-sm">
-                <Text component="span" color="disabled">
-                  schema.
-                </Text>
-                <Text component="span" className="font-medium">
-                  {schema.schema_name}
-                </Text>
-              </Text>
-              {(isSchemaLocked(schema.schema_name) || isGitHubConnected) && (
-                <LockIcon
-                  className="h-3 w-3"
-                  sx={{ color: 'text.secondary' }}
-                />
-              )}
-            </Option>
-          ))}
-        </Select>
-      )}
-
-      {isGitHubConnected && (
-        <Box
-          className="mt-1.5 grid grid-flow-row justify-items-start gap-2 rounded-md p-2"
-          sx={{ backgroundColor: 'grey.200' }}
-        >
-          <Text>
-            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 grid-flow-col items-center justify-start gap-1"
+    <Box className="flex h-full flex-col justify-between">
+      <Box className="flex flex-col px-2">
+        {schemas && schemas.length > 0 && (
+          <Select
+            renderValue={(option) => (
+              <span className="grid grid-flow-col items-center gap-1">
+                {option?.label}
+              </span>
+            )}
+            slotProps={{
+              listbox: { className: 'max-w-[220px] min-w-[initial] w-full' },
+              popper: { className: 'max-w-[220px] min-w-[initial] w-full' },
+            }}
+            value={selectedSchema}
+            onChange={(_event, value) => setSelectedSchema(value as string)}
           >
-            Learn More <ArrowRightIcon />
-          </Link>
-        </Box>
-      )}
-
-      {!isSelectedSchemaLocked && (
-        <Button
-          variant="borderless"
-          endIcon={<PlusIcon />}
-          className="mt-1 w-full justify-between px-2"
-          onClick={() => {
-            openDrawer({
-              title: 'Create a New Table',
-              component: (
-                <CreateTableForm onSubmit={refetch} schema={selectedSchema} />
-              ),
-            });
-
-            onSidebarItemClick();
-          }}
-          disabled={isGitHubConnected}
-        >
-          New Table
-        </Button>
-      )}
-
-      {schemas && schemas.length > 0 && tablesInSelectedSchema.length === 0 && (
-        <Text className="py-1.5 px-2 text-xs" color="disabled">
-          No tables found.
-        </Text>
-      )}
-
-      <nav aria-label="Database navigation">
-        {tablesInSelectedSchema.length > 0 && (
-          <List className="grid gap-1 pb-6">
-            {tablesInSelectedSchema.map((table) => {
-              const tablePath = `${table.table_schema}.${table.table_name}`;
-              const isSelected = `${schemaSlug}.${tableSlug}` === tablePath;
-              const isSidebarMenuOpen = sidebarMenuTable === tablePath;
-
-              return (
-                <ListItem.Root
-                  className="group"
-                  key={tablePath}
-                  secondaryAction={
-                    <Dropdown.Root
-                      id="table-management-menu"
-                      onOpen={() => setSidebarMenuTable(tablePath)}
-                      onClose={() => setSidebarMenuTable(undefined)}
-                    >
-                      <Dropdown.Trigger
-                        asChild
-                        hideChevron
-                        disabled={tablePath === removableTable}
+            {schemas.map((schema) => (
+              <Option
+                className="grid grid-flow-col items-center gap-1"
+                value={schema.schema_name}
+                key={schema.schema_name}
+              >
+                <Text className="text-sm">
+                  <Text component="span" color="disabled">
+                    schema.
+                  </Text>
+                  <Text component="span" className="font-medium">
+                    {schema.schema_name}
+                  </Text>
+                </Text>
+                {(isSchemaLocked(schema.schema_name) || isGitHubConnected) && (
+                  <LockIcon
+                    className="h-3 w-3"
+                    sx={{ color: 'text.secondary' }}
+                  />
+                )}
+              </Option>
+            ))}
+          </Select>
+        )}
+        {isGitHubConnected && (
+          <Box
+            className="mt-1.5 grid grid-flow-row justify-items-start gap-2 rounded-md p-2"
+            sx={{ backgroundColor: 'grey.200' }}
+          >
+            <Text>
+              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 grid-flow-col items-center justify-start gap-1"
+            >
+              Learn More <ArrowRightIcon />
+            </Link>
+          </Box>
+        )}
+        {!isSelectedSchemaLocked && (
+          <Button
+            variant="borderless"
+            endIcon={<PlusIcon />}
+            className="mt-1 w-full justify-between px-2"
+            onClick={() => {
+              openDrawer({
+                title: 'Create a New Table',
+                component: (
+                  <CreateTableForm onSubmit={refetch} schema={selectedSchema} />
+                ),
+              });
+              onSidebarItemClick();
+            }}
+            disabled={isGitHubConnected}
+          >
+            New Table
+          </Button>
+        )}
+        {schemas && schemas.length > 0 && tablesInSelectedSchema.length === 0 && (
+          <Text className="py-1.5 px-2 text-xs" color="disabled">
+            No tables found.
+          </Text>
+        )}
+        <nav aria-label="Database navigation">
+          {tablesInSelectedSchema.length > 0 && (
+            <List className="grid gap-1 pb-6">
+              {tablesInSelectedSchema.map((table) => {
+                const tablePath = `${table.table_schema}.${table.table_name}`;
+                const isSelected = `${schemaSlug}.${tableSlug}` === tablePath;
+                const isSidebarMenuOpen = sidebarMenuTable === tablePath;
+                return (
+                  <ListItem.Root
+                    className="group"
+                    key={tablePath}
+                    secondaryAction={
+                      <Dropdown.Root
+                        id="table-management-menu"
+                        onOpen={() => setSidebarMenuTable(tablePath)}
+                        onClose={() => setSidebarMenuTable(undefined)}
                       >
-                        <IconButton
-                          variant="borderless"
-                          color={isSelected ? 'primary' : 'secondary'}
-                          className={twMerge(
-                            !isSelected &&
-                              'opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 group-active:opacity-100',
-                          )}
+                        <Dropdown.Trigger
+                          asChild
+                          hideChevron
+                          disabled={tablePath === removableTable}
                         >
-                          <DotsHorizontalIcon />
-                        </IconButton>
-                      </Dropdown.Trigger>
-
-                      <Dropdown.Content menu PaperProps={{ className: 'w-52' }}>
-                        {isGitHubConnected ? (
-                          <Dropdown.Item
-                            className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
-                            onClick={() =>
-                              handleEditPermissionClick(
-                                table.table_schema,
-                                table.table_name,
-                                true,
-                              )
-                            }
+                          <IconButton
+                            variant="borderless"
+                            color={isSelected ? 'primary' : 'secondary'}
+                            className={twMerge(
+                              !isSelected &&
+                                'opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 group-active:opacity-100',
+                            )}
                           >
-                            <UsersIcon
-                              className="h-4 w-4"
-                              sx={{ color: 'text.secondary' }}
-                            />
-
-                            <span>View Permissions</span>
-                          </Dropdown.Item>
-                        ) : (
-                          [
-                            !isSelectedSchemaLocked && (
-                              <Dropdown.Item
-                                key="edit-table"
-                                className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
-                                onClick={() =>
-                                  openDrawer({
-                                    title: 'Edit Table',
-                                    component: (
-                                      <EditTableForm
-                                        onSubmit={async () => {
-                                          await queryClient.refetchQueries([
-                                            `${dataSourceSlug}.${table.table_schema}.${table.table_name}`,
-                                          ]);
-                                          await refetch();
-                                        }}
-                                        schema={table.table_schema}
-                                        table={table}
-                                      />
-                                    ),
-                                  })
-                                }
-                              >
-                                <PencilIcon
-                                  className="h-4 w-4"
-                                  sx={{ color: 'text.secondary' }}
-                                />
-
-                                <span>Edit Table</span>
-                              </Dropdown.Item>
-                            ),
-                            !isSelectedSchemaLocked && (
-                              <Divider
-                                key="edit-table-separator"
-                                component="li"
-                              />
-                            ),
+                            <DotsHorizontalIcon />
+                          </IconButton>
+                        </Dropdown.Trigger>
+                        <Dropdown.Content
+                          menu
+                          PaperProps={{ className: 'w-52' }}
+                        >
+                          {isGitHubConnected ? (
                             <Dropdown.Item
-                              key="edit-permissions"
                               className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
                               onClick={() =>
                                 handleEditPermissionClick(
                                   table.table_schema,
                                   table.table_name,
+                                  true,
                                 )
                               }
                             >
@@ -453,68 +399,135 @@ function DataBrowserSidebarContent({
                                 className="h-4 w-4"
                                 sx={{ color: 'text.secondary' }}
                               />
-
-                              <span>Edit Permissions</span>
-                            </Dropdown.Item>,
-                            !isSelectedSchemaLocked && (
-                              <Divider
-                                key="edit-permissions-separator"
-                                component="li"
-                              />
-                            ),
-                            !isSelectedSchemaLocked && (
+                              <span>View Permissions</span>
+                            </Dropdown.Item>
+                          ) : (
+                            [
+                              !isSelectedSchemaLocked && (
+                                <Dropdown.Item
+                                  key="edit-table"
+                                  className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
+                                  onClick={() =>
+                                    openDrawer({
+                                      title: 'Edit Table',
+                                      component: (
+                                        <EditTableForm
+                                          onSubmit={async () => {
+                                            await queryClient.refetchQueries([
+                                              `${dataSourceSlug}.${table.table_schema}.${table.table_name}`,
+                                            ]);
+                                            await refetch();
+                                          }}
+                                          schema={table.table_schema}
+                                          table={table}
+                                        />
+                                      ),
+                                    })
+                                  }
+                                >
+                                  <PencilIcon
+                                    className="h-4 w-4"
+                                    sx={{ color: 'text.secondary' }}
+                                  />
+                                  <span>Edit Table</span>
+                                </Dropdown.Item>
+                              ),
+                              !isSelectedSchemaLocked && (
+                                <Divider
+                                  key="edit-table-separator"
+                                  component="li"
+                                />
+                              ),
                               <Dropdown.Item
-                                key="delete-table"
+                                key="edit-permissions"
                                 className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
-                                sx={{ color: 'error.main' }}
                                 onClick={() =>
-                                  handleDeleteTableClick(
+                                  handleEditPermissionClick(
                                     table.table_schema,
                                     table.table_name,
                                   )
                                 }
                               >
-                                <TrashIcon
+                                <UsersIcon
                                   className="h-4 w-4"
-                                  sx={{ color: 'error.main' }}
+                                  sx={{ color: 'text.secondary' }}
                                 />
-
-                                <span>Delete Table</span>
-                              </Dropdown.Item>
-                            ),
-                          ]
-                        )}
-                      </Dropdown.Content>
-                    </Dropdown.Root>
-                  }
-                >
-                  <ListItem.Button
-                    dense
-                    selected={isSelected}
-                    disabled={tablePath === removableTable}
-                    className="group-focus-within:pr-9 group-hover:pr-9 group-active:pr-9"
-                    sx={{
-                      paddingRight:
-                        (isSelected || isSidebarMenuOpen) &&
-                        '2.25rem !important',
-                    }}
-                    component={NavLink}
-                    href={`/${workspaceSlug}/${appSlug}/database/browser/default/${table.table_schema}/${table.table_name}`}
-                    onClick={() => {
-                      if (onSidebarItemClick) {
-                        onSidebarItemClick(`default.${tablePath}`);
-                      }
-                    }}
+                                <span>Edit Permissions</span>
+                              </Dropdown.Item>,
+                              !isSelectedSchemaLocked && (
+                                <Divider
+                                  key="edit-permissions-separator"
+                                  component="li"
+                                />
+                              ),
+                              !isSelectedSchemaLocked && (
+                                <Dropdown.Item
+                                  key="delete-table"
+                                  className="grid grid-flow-col items-center gap-2 p-2 text-sm+ font-medium"
+                                  sx={{ color: 'error.main' }}
+                                  onClick={() =>
+                                    handleDeleteTableClick(
+                                      table.table_schema,
+                                      table.table_name,
+                                    )
+                                  }
+                                >
+                                  <TrashIcon
+                                    className="h-4 w-4"
+                                    sx={{ color: 'error.main' }}
+                                  />
+                                  <span>Delete Table</span>
+                                </Dropdown.Item>
+                              ),
+                            ]
+                          )}
+                        </Dropdown.Content>
+                      </Dropdown.Root>
+                    }
                   >
-                    <ListItem.Text>{table.table_name}</ListItem.Text>
-                  </ListItem.Button>
-                </ListItem.Root>
-              );
-            })}
-          </List>
-        )}
-      </nav>
-    </div>
+                    <ListItem.Button
+                      dense
+                      selected={isSelected}
+                      disabled={tablePath === removableTable}
+                      className="group-focus-within:pr-9 group-hover:pr-9 group-active:pr-9"
+                      sx={{
+                        paddingRight:
+                          (isSelected || isSidebarMenuOpen) &&
+                          '2.25rem !important',
+                      }}
+                      component={NavLink}
+                      href={`/${workspaceSlug}/${appSlug}/database/browser/default/${table.table_schema}/${table.table_name}`}
+                      onClick={() => {
+                        if (onSidebarItemClick) {
+                          onSidebarItemClick(`default.${tablePath}`);
+                        }
+                      }}
+                    >
+                      <ListItem.Text>{table.table_name}</ListItem.Text>
+                    </ListItem.Button>
+                  </ListItem.Root>
+                );
+              })}
+            </List>
+          )}
+        </nav>
+      </Box>
+
+      <Box className="border-t">
+        <ListItem.Button
+          dense
+          selected={asPath === sqlEditorHref}
+          className="flex border group-focus-within:pr-9 group-hover:pr-9 group-active:pr-9"
+          component={NavLink}
+          href={sqlEditorHref}
+        >
+          <div className="flex w-full flex-row items-center justify-center space-x-4">
+            <TerminalIcon />
+            <span className="flex">SQL Editor</span>
+          </div>
+        </ListItem.Button>
+      </Box>
+    </Box>
   );
 }
 
@@ -580,7 +593,7 @@ export default function DataBrowserSidebar({
       <Box
         component="aside"
         className={twMerge(
-          'absolute top-0 z-[35] h-full w-full overflow-auto border-r-1 px-2 pt-2 pb-17 motion-safe:transition-transform sm:relative sm:z-0 sm:h-full sm:py-2.5 sm:transition-none',
+          'absolute top-0 z-[35] h-full w-full overflow-auto border-r-1 pt-2 pb-17 motion-safe:transition-transform sm:relative sm:z-0 sm:h-full sm:pt-2.5 sm:pb-0 sm:transition-none',
           expanded ? 'translate-x-0' : '-translate-x-full sm:translate-x-0',
           className,
         )}

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

@@ -0,0 +1,263 @@
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { Alert } from '@/components/ui/v2/Alert';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { InfoIcon } from '@/components/ui/v2/icons/InfoIcon';
+import { PlayIcon } from '@/components/ui/v2/icons/PlayIcon';
+import { Input } from '@/components/ui/v2/Input';
+import { Switch } from '@/components/ui/v2/Switch';
+import { Table } from '@/components/ui/v2/Table';
+import { TableBody } from '@/components/ui/v2/TableBody';
+import { TableCell } from '@/components/ui/v2/TableCell';
+import { TableHead } from '@/components/ui/v2/TableHead';
+import { TableRow } from '@/components/ui/v2/TableRow';
+import { Text } from '@/components/ui/v2/Text';
+import { Tooltip } from '@/components/ui/v2/Tooltip';
+import { useRunSQL } from '@/features/database/dataGrid/hooks/useRunSQL';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
+import { PostgreSQL, sql } from '@codemirror/lang-sql';
+import { useTheme } from '@mui/material';
+import { githubDark, githubLight } from '@uiw/codemirror-theme-github';
+import CodeMirror from '@uiw/react-codemirror';
+import { useCallback, useState } from 'react';
+import { useResizable } from 'react-resizable-layout';
+
+export default function SQLEditor() {
+  const theme = useTheme();
+  const isPlatform = useIsPlatform();
+
+  const [sqlCode, setSQLCode] = useState('');
+  const [track, setTrack] = useState(false);
+  const [cascade, setCascade] = useState(false);
+  const [readOnly, setReadOnly] = useState(false);
+  const [isMigration, setIsMigration] = useState(false);
+  const [migrationName, setMigrationName] = useState('');
+
+  const onChange = useCallback((value: string) => setSQLCode(value), []);
+
+  const { runSQL, loading, errorMessage, commandOk, rows, columns } = useRunSQL(
+    sqlCode,
+    track,
+    cascade,
+    readOnly,
+    isMigration,
+    migrationName,
+  );
+
+  const { position, separatorProps } = useResizable({
+    axis: 'y',
+    initial: 400,
+    min: 50,
+    reverse: true,
+  });
+
+  return (
+    <Box className="flex flex-1 flex-col justify-center overflow-hidden">
+      <Box className="flex flex-col space-y-2 border-b p-4">
+        <Text className="font-semibold">Raw SQL</Text>
+        <Box className="flex flex-col justify-between space-y-2 lg:flex-row lg:space-y-0 lg:space-x-4">
+          <Box className="flex w-full flex-col space-y-2 lg:flex-row lg:space-x-4 lg:space-y-0 xl:h-10">
+            <Box className="flex items-center space-x-2">
+              <Switch
+                label={
+                  <Text variant="subtitle1" component="span">
+                    Track this
+                  </Text>
+                }
+                checked={track}
+                onChange={(event) => setTrack(event.currentTarget.checked)}
+              />
+              <Tooltip title="If you are creating tables, views or functions, checking this will also expose them over the GraphQL API as top level fields. Functions only intended to be used as computed fields should not be tracked.">
+                <InfoIcon
+                  aria-label="Info"
+                  className="h-4 w-4"
+                  color="primary"
+                />
+              </Tooltip>
+            </Box>
+
+            <Box className="flex items-center space-x-2">
+              <Switch
+                label={
+                  <Text variant="subtitle1" component="span">
+                    Cascade metadata
+                  </Text>
+                }
+                checked={cascade}
+                onChange={(e) => setCascade(e.target.checked)}
+              />
+
+              <Tooltip title="Cascade actions on all dependent metadata references, like relationships and permissions">
+                <InfoIcon
+                  aria-label="Info"
+                  className="h-4 w-4"
+                  color="primary"
+                />
+              </Tooltip>
+            </Box>
+
+            <Box className="flex items-center space-x-2">
+              <Switch
+                label={
+                  <Text variant="subtitle1" component="span">
+                    Read only
+                  </Text>
+                }
+                checked={readOnly}
+                onChange={(e) => setReadOnly(e.target.checked)}
+              />
+
+              <Tooltip title="When set to true, the request will be run in READ ONLY transaction access mode which means only select queries will be successful. This flag ensures that the GraphQL schema is not modified and is hence highly performant.">
+                <InfoIcon
+                  aria-label="Info"
+                  className="h-4 w-4"
+                  color="primary"
+                />
+              </Tooltip>
+            </Box>
+
+            {!isPlatform && (
+              <Box className="flex flex-col space-x-0 space-y-2 xl:flex-row xl:space-x-4 xl:space-y-0">
+                <Box className="flex items-center space-x-2">
+                  <Switch
+                    label={
+                      <Text variant="subtitle1" component="span">
+                        This is a migration
+                      </Text>
+                    }
+                    checked={isMigration}
+                    onChange={(e) => setIsMigration(e.target.checked)}
+                  />
+                  <Tooltip title="Create a migration file with the SQL statement">
+                    <InfoIcon
+                      aria-label="Info"
+                      className="h-4 w-4"
+                      color="primary"
+                    />
+                  </Tooltip>
+                </Box>
+
+                {isMigration && (
+                  <Input
+                    name="isMigration"
+                    id="isMigration"
+                    placeholder="migration_name"
+                    className="h-auto w-auto max-w-md"
+                    fullWidth
+                    hideEmptyHelperText
+                    onChange={(e) => setMigrationName(e.target.value)}
+                  />
+                )}
+              </Box>
+            )}
+          </Box>
+          <Button
+            disabled={loading || !sqlCode.trim()}
+            variant="contained"
+            className="self-start"
+            startIcon={<PlayIcon />}
+            onClick={runSQL}
+          >
+            Run
+          </Button>
+        </Box>
+      </Box>
+
+      <CodeMirror
+        value={sqlCode}
+        height="100%"
+        className="min-h-[100px] flex-1 overflow-y-auto"
+        theme={theme.palette.mode === 'light' ? githubLight : githubDark}
+        extensions={[sql({ dialect: PostgreSQL })]}
+        onChange={onChange}
+      />
+
+      <Box
+        className="h-2 border-t hover:cursor-row-resize"
+        sx={{
+          background: theme.palette.background.default,
+        }}
+        {...separatorProps}
+      />
+
+      <Box
+        className="flex items-start overflow-auto p-4"
+        style={{ height: position }}
+      >
+        {loading && (
+          <ActivityIndicator
+            className="mx-auto self-center"
+            circularProgressProps={{
+              className: 'w-5 h-5',
+            }}
+          />
+        )}
+
+        {errorMessage && (
+          <Alert
+            severity="error"
+            className="mx-auto grid grid-flow-row place-content-center gap-2 self-center"
+          >
+            <code>{errorMessage}</code>
+          </Alert>
+        )}
+
+        {!loading && !errorMessage && commandOk && (
+          <Alert
+            severity="success"
+            className="mx-auto grid grid-flow-row place-content-center gap-2 self-center"
+          >
+            <code>Success, no rows returned</code>
+          </Alert>
+        )}
+
+        {!loading && !errorMessage && (
+          <Table
+            style={{
+              tableLayout: 'auto',
+            }}
+            className="w-auto"
+          >
+            <TableHead
+              sx={{
+                background: theme.palette.background.default,
+              }}
+            >
+              <TableRow>
+                {columns.map((header) => (
+                  <TableCell
+                    key={header}
+                    scope="col"
+                    className="whitespace-nowrap border px-6 py-3 font-bold"
+                  >
+                    {header}
+                  </TableCell>
+                ))}
+              </TableRow>
+            </TableHead>
+
+            <TableBody>
+              {rows.map((row, rowIndex) => (
+                <TableRow
+                  // eslint-disable-next-line react/no-array-index-key
+                  key={String(rowIndex)}
+                  // className="px-6 py-4 border whitespace-nowrap"
+                >
+                  {row.map((value, valueIndex) => (
+                    <TableCell
+                      // eslint-disable-next-line react/no-array-index-key
+                      key={`${value}-${valueIndex}`}
+                      className="whitespace-nowrap border px-6 py-4"
+                    >
+                      {value}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </Box>
+    </Box>
+  );
+}

dashboard/src/features/database/dataGrid/components/SQLEditor/index.ts

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

dashboard/src/features/database/dataGrid/hooks/useRunSQL/index.ts

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

dashboard/src/features/database/dataGrid/hooks/useRunSQL/useRunSQL.ts

@@ -0,0 +1,283 @@
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { generateAppServiceUrl } from '@/features/projects/common/utils/generateAppServiceUrl';
+import { getToastStyleProps } from '@/utils/constants/settings';
+import { getHasuraAdminSecret } from '@/utils/env';
+import { parseIdentifiersFromSQL } from '@/utils/sql';
+import toast from 'react-hot-toast';
+import { useState } from 'react';
+
+export default function useRunSQL(
+  sqlCode: string,
+  track: boolean,
+  cascade: boolean,
+  readOnly: boolean,
+  isMigration: boolean,
+  migrationName: string,
+) {
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  const [loading, setLoading] = useState(false);
+  const [commandOk, setCommandOk] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [columns, setColumns] = useState<string[]>([]);
+  const [rows, setRows] = useState<string[][]>([[]]);
+
+  const appUrl = generateAppServiceUrl(
+    currentProject?.subdomain,
+    currentProject?.region,
+    'hasura',
+  );
+
+  const adminSecret =
+    process.env.NEXT_PUBLIC_ENV === 'dev'
+      ? getHasuraAdminSecret()
+      : currentProject?.config?.hasura.adminSecret;
+
+  const toastStyle = getToastStyleProps();
+
+  const createMigration = async (
+    inputSQL: string,
+    migration: string,
+    isCascade: boolean,
+  ) => {
+    try {
+      const migrationApiResponse = await fetch(`${appUrl}/apis/migrate`, {
+        method: 'POST',
+        headers: { 'x-hasura-admin-secret': adminSecret },
+        body: JSON.stringify({
+          name: migration,
+          datasource: 'default',
+          up: [
+            {
+              type: 'run_sql',
+              args: {
+                source: 'default',
+                sql: inputSQL,
+                cascade: isCascade,
+                read_only: false,
+              },
+            },
+          ],
+          down: [
+            {
+              type: 'run_sql',
+              args: {
+                source: 'default',
+                sql: '-- Could not auto-generate a down migration.',
+                cascade: isCascade,
+                read_only: false,
+              },
+            },
+          ],
+        }),
+      });
+
+      if (!migrationApiResponse.ok) {
+        throw new Error('Migration API call failed');
+      }
+
+      return {
+        error: null,
+      };
+    } catch (createMigrationError) {
+      toast.error('An error happened when calling the migration API', {
+        style: toastStyle.style,
+        ...toastStyle.error,
+      });
+
+      return {
+        error: createMigrationError,
+      };
+    }
+  };
+
+  const sendSQLToHasura = async (
+    inputSQL: string,
+    isCascade: boolean,
+    isReadOnly: boolean,
+  ) => {
+    try {
+      if (!inputSQL) {
+        return {
+          result_type: 'error',
+          columns: [],
+          rows: [],
+          queryApiError: 'No SQL provided',
+        };
+      }
+
+      const response = await fetch(`${appUrl}/v2/query`, {
+        method: 'POST',
+        headers: { 'x-hasura-admin-secret': adminSecret },
+        body: JSON.stringify({
+          type: 'run_sql',
+          args: {
+            source: 'default',
+            sql: inputSQL,
+            cascade: isCascade,
+            read_only: isReadOnly,
+          },
+        }),
+      });
+
+      if (!response.ok) {
+        const errorResponse = await response.json();
+        const queryApiError =
+          errorResponse?.internal?.error?.message || 'Unknown error';
+        return {
+          result_type: 'error',
+          columns: [],
+          rows: [],
+          error: queryApiError,
+        };
+      }
+
+      const responseBody = await response.json();
+
+      if (responseBody?.result_type === 'TuplesOk') {
+        return {
+          result_type: 'TuplesOk',
+          columns: responseBody.result[0],
+          rows: responseBody.result.slice(1),
+          error: '',
+        };
+      }
+
+      if (responseBody?.result_type === 'CommandOk') {
+        return {
+          result_type: 'CommandOk',
+          columns: [],
+          rows: [],
+          error: '',
+        };
+      }
+
+      // If the result_type is neither TuplesOk nor CommandOk
+      return {
+        result_type: 'error',
+        columns: [],
+        rows: [],
+        error: 'Unknown response type',
+      };
+    } catch (error) {
+      return {
+        result_type: 'error',
+        columns: [],
+        rows: [],
+        error: error.message || 'Unknown error',
+      };
+    }
+  };
+
+  const updateMetadata = async (inputSQL: string) => {
+    const entities = parseIdentifiersFromSQL(inputSQL);
+
+    const tablesOrViewEntities = entities.filter(
+      (entity) => entity.type !== 'function',
+    );
+    const functionEntities = entities.filter(
+      (entity) => entity.type === 'function',
+    );
+
+    const trackTablesOrViews = tablesOrViewEntities.map(({ name, schema }) => ({
+      type: 'pg_track_table',
+      args: {
+        source: 'default',
+        table: {
+          name,
+          schema,
+        },
+      },
+    }));
+
+    const trackFunctions = functionEntities.map(({ name, schema }) => ({
+      type: 'pg_track_function',
+      args: {
+        source: 'default',
+        function: {
+          name,
+          schema,
+          configuration: {},
+        },
+      },
+    }));
+
+    const metaDataPayload = {
+      source: 'default',
+      type: 'bulk',
+      args: [...trackTablesOrViews, ...trackFunctions],
+    };
+
+    try {
+      if (entities.length > 0) {
+        const metadataApiResponse = await fetch(`${appUrl}/v1/metadata`, {
+          method: 'POST',
+          headers: { 'x-hasura-admin-secret': adminSecret },
+          body: JSON.stringify(metaDataPayload),
+        });
+
+        if (!metadataApiResponse.ok) {
+          throw new Error('Metadata API call failed');
+        }
+      }
+    } catch (error) {
+      toast.error('An error happened when calling the metadata API', {
+        style: toastStyle.style,
+        ...toastStyle.error,
+      });
+    }
+  };
+
+  const runSQL = async () => {
+    setLoading(true);
+    setCommandOk(false);
+    setErrorMessage('');
+
+    if (isMigration) {
+      const { error: createMigrationError } = await createMigration(
+        sqlCode,
+        migrationName,
+        cascade,
+      );
+
+      setCommandOk(!createMigrationError);
+
+      if (createMigrationError) {
+        setErrorMessage('An unknown error occurred');
+      }
+
+      // if running the migration fails then we don't update the metadata
+      if (track && !createMigrationError) {
+        await updateMetadata(sqlCode);
+      }
+    } else {
+      const {
+        result_type,
+        error: $error,
+        columns: $columns,
+        rows: $rows,
+      } = await sendSQLToHasura(sqlCode, cascade, readOnly);
+
+      setCommandOk(result_type === 'CommandOk');
+      setColumns($columns);
+      setRows($rows);
+      setErrorMessage($error);
+
+      // if running the sql fails then we don't update the metadata
+      if (track && !$error) {
+        await updateMetadata(sqlCode);
+      }
+    }
+
+    setLoading(false);
+  };
+
+  return {
+    runSQL,
+    loading,
+    errorMessage,
+    commandOk,
+    rows,
+    columns,
+  };
+}

dashboard/src/features/database/dataGrid/hooks/useTableQuery/fetchTable.ts

@@ -187,11 +187,11 @@ export default async function fetchTable({
       const queryError = responseData as QueryError;
       const schemaNotFound =
         POSTGRESQL_ERROR_CODES.SCHEMA_NOT_FOUND ===
-        queryError.internal.error.status_code;
+        queryError.internal?.error?.status_code;
 
       const tableNotFound =
         POSTGRESQL_ERROR_CODES.TABLE_NOT_FOUND ===
-        queryError.internal.error.status_code;
+        queryError.internal?.error?.status_code;
 
       if (schemaNotFound || tableNotFound) {
         return {
@@ -203,7 +203,7 @@ export default async function fetchTable({
       }
 
       if (
-        queryError.internal.error.status_code ===
+        queryError.internal?.error?.status_code ===
         POSTGRESQL_ERROR_CODES.COLUMNS_NOT_FOUND
       ) {
         return {
@@ -214,7 +214,7 @@ export default async function fetchTable({
         };
       }
 
-      throw new Error(queryError.internal.error.message);
+      throw new Error(queryError.internal?.error?.message);
     }
 
     if ('error' in responseData) {

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

@@ -1,5 +1,6 @@
 import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { Alert } from '@/components/ui/v2/Alert';
 import { Button } from '@/components/ui/v2/Button';
 import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
 import type { InputProps } from '@/components/ui/v2/Input';
@@ -91,28 +92,33 @@ export default function DatabaseConnectionInfo() {
             disabled
             value={inputValue}
             className={className}
+            slotProps={{ inputRoot: { className: '!pr-8 truncate' } }}
             fullWidth
             hideEmptyHelperText
             endAdornment={
-              name !== 'postgresPassword' && (
-                <InputAdornment position="end" className="absolute right-2">
-                  <Button
-                    sx={{ minWidth: 0, padding: 0 }}
-                    color="secondary"
-                    variant="borderless"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      copy(inputValue as string, `${label}`);
-                    }}
-                  >
-                    <CopyIcon className="h-4 w-4" />
-                  </Button>
-                </InputAdornment>
-              )
+              <InputAdornment position="end" className="absolute right-2">
+                <Button
+                  sx={{ minWidth: 0, padding: 0 }}
+                  color="secondary"
+                  variant="borderless"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    copy(inputValue as string, `${label}`);
+                  }}
+                >
+                  <CopyIcon className="h-4 w-4" />
+                </Button>
+              </InputAdornment>
             }
           />
         ),
       )}
+
+      <Alert severity="info" className="col-span-6 text-left">
+        To connect to the Postgres database directly, generate a new password,
+        securely save it, and then modify your connection string with the newly
+        created password.
+      </Alert>
     </SettingsContainer>
   );
 }

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

@@ -7,7 +7,9 @@ import { filterOptions } from '@/components/ui/v2/Autocomplete';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import {
   GetPostgresSettingsDocument,
+  Software_Type_Enum,
   useGetPostgresSettingsQuery,
+  useGetSoftwareVersionsQuery,
   useUpdateConfigMutation,
 } from '@/generated/graphql';
 import { getToastStyleProps } from '@/utils/constants/settings';
@@ -30,13 +32,6 @@ export type DatabaseServiceVersionFormValues = Yup.InferType<
   typeof validationSchema
 >;
 
-const AVAILABLE_POSTGRES_VERSIONS = [
-  '14.6-20230525',
-  '14.6-20230406-2',
-  '14.6-20230406-1',
-  '14.6-20230404',
-];
-
 export default function DatabaseServiceVersionSettings() {
   const { maintenanceActive } = useUI();
   const { currentProject } = useCurrentWorkspaceAndProject();
@@ -49,9 +44,16 @@ export default function DatabaseServiceVersionSettings() {
     fetchPolicy: 'cache-only',
   });
 
+  const { data: databaseVersionsData } = useGetSoftwareVersionsQuery({
+    variables: {
+      software: Software_Type_Enum.PostgreSql,
+    },
+  });
+
   const { version } = data?.config?.postgres || {};
+  const databaseVersions = databaseVersionsData?.softwareVersions || [];
   const availableVersions = Array.from(
-    new Set(AVAILABLE_POSTGRES_VERSIONS).add(version),
+    new Set(databaseVersions.map((el) => el.version)).add(version),
   )
     .sort()
     .reverse()