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

chore: update versions

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

@@ -14,7 +14,7 @@ runs:
   steps:
     - uses: pnpm/action-setup@v2.2.4
       with:
-        version: 7.17.0
+        version: 8.6.0
         run_install: false
     - name: Get pnpm cache directory
       id: pnpm-cache-dir
@@ -23,9 +23,7 @@ runs:
     - uses: actions/cache@v3
       id: pnpm-cache
       with:
-        path: |
-          ${{ steps.pnpm-cache-dir.outputs.dir }}
-          ~/.cache/Cypress
+        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

.github/actions/nhost-cli/action.yaml

@@ -49,21 +49,9 @@ runs:
       if: ${{ inputs.start == 'true' }}
       shell: bash
       working-directory: ${{ inputs.path }}
-      run: nhost dev --no-browser &
-    - name: Wait for the app to be ready
-      id: wait
-      if: ${{ inputs.start == 'true' && inputs.wait == 'true' }}
-      shell: bash
-      working-directory: ${{ inputs.path }}
-      continue-on-error: true
       run: |
-        curl -sSf --connect-timeout 3 \
-          --max-time 5 \
-          --retry 300 \
-          --retry-delay 1 \
-          --retry-max-time 300 \
-          --retry-connrefused \
-          'http://localhost:9695' > /dev/null
+        cp .secrets.example .secrets
+        nhost up
     - name: Log on failure
       if: steps.wait.outcome == 'failure'
       shell: bash

.github/stale.yml

@@ -0,0 +1,16 @@
+# Configuration for probot-stale - https://github.com/probot/stale
+
+daysUntilStale: 180
+daysUntilClose: 7
+limitPerRun: 30
+onlyLabels: []
+exemptLabels: []
+
+exemptProjects: false
+exemptMilestones: false
+exemptAssignees: false
+staleLabel: stale
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.

.github/workflows/changesets.yaml

@@ -98,7 +98,7 @@ jobs:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Build and push to Docker Hub
-        uses: docker/build-push-action@v3
+        uses: docker/build-push-action@v4
         timeout-minutes: 60
         with:
           context: .
@@ -169,7 +169,7 @@ jobs:
           EXPRESSION='s/"'$IMAGE':[0-9]\+\.[0-9]\+\.[0-9]\+"/"'$IMAGE':'$VERSION'"/g'
           find ./ -type f -exec sed -i -e $EXPRESSION {} \;
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v4
+        uses: peter-evans/create-pull-request@v5
         with:
           token: ${{ secrets.GH_PAT }}
           commit-message: 'chore: bump nhost/dashboard to ${{ needs.version.outputs.dashboardVersion }}'

.github/workflows/ci.yaml

@@ -19,6 +19,12 @@ env:
   NEXT_PUBLIC_ENV: dev
   NEXT_TELEMETRY_DISABLED: 1
   NEXT_PUBLIC_NHOST_BACKEND_URL: http://localhost:1337
+  NHOST_TEST_DASHBOARD_URL: ${{ vars.NHOST_TEST_DASHBOARD_URL }}
+  NHOST_TEST_WORKSPACE_NAME: ${{ vars.NHOST_TEST_WORKSPACE_NAME }}
+  NHOST_TEST_PROJECT_NAME: ${{ vars.NHOST_TEST_PROJECT_NAME }}
+  NHOST_TEST_USER_EMAIL: ${{ secrets.NHOST_TEST_USER_EMAIL }}
+  NHOST_TEST_USER_PASSWORD: ${{ secrets.NHOST_TEST_USER_PASSWORD }}
+  NHOST_TEST_PROJECT_ADMIN_SECRET: ${{ secrets.NHOST_TEST_PROJECT_ADMIN_SECRET }}
 
 jobs:
   build:
@@ -37,7 +43,7 @@ jobs:
           BUILD: 'all'
       - name: Check if the pnpm lockfile changed
         id: changed-lockfile
-        uses: tj-actions/changed-files@v35
+        uses: tj-actions/changed-files@v36
         with:
           files: pnpm-lock.yaml
       # * Determine a pnpm filter argument for packages that have been modified.
@@ -60,47 +66,6 @@ jobs:
     outputs:
       matrix: ${{ steps.set-matrix.outputs.matrix }}
 
-  e2e:
-    name: 'e2e (${{ matrix.package.path }})'
-    needs: build
-    if: ${{ needs.build.outputs.matrix != '[]' && needs.build.outputs.matrix != '' }}
-    strategy:
-      # * Don't cancel other matrices when one fails
-      fail-fast: false
-      matrix:
-        package: ${{ fromJson(needs.build.outputs.matrix) }}
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      # * Install Node and dependencies. Package dependencies won't be downloaded again as they have been cached by the `build` job.
-      - name: Install Node and dependencies
-        uses: ./.github/actions/install-dependencies
-        with:
-          TURBO_TOKEN: ${{ env.TURBO_TOKEN }}
-          TURBO_TEAM: ${{ env.TURBO_TEAM }}
-      # * Install Nhost CLI if a `nhost/config.yaml` file is found
-      - name: Install Nhost CLI
-        if: hashFiles(format('{0}/nhost/config.yaml', matrix.package.path)) != ''
-        uses: ./.github/actions/nhost-cli
-      # * Run the `ci` script of the current package of the matrix. Dependencies build is cached by Turborepo
-      - name: Run e2e test
-        run: pnpm --filter="${{ matrix.package.name }}" run e2e
-      - id: file-name
-        if: ${{ failure() }}
-        name: Tranform package name into a valid file name
-        run: |
-          PACKAGE_FILE_NAME=$(echo "${{ matrix.package.name }}" | sed 's/@//g; s/\//-/g')
-          echo "fileName=$PACKAGE_FILE_NAME"  >> $GITHUB_OUTPUT
-      # * Run this step only if the previous step failed, and some Cypress screenshots/videos exist
-      - name: Upload Cypress videos and screenshots
-        if: ${{ failure() && hashFiles(format('{0}/cypress/screenshots/**', matrix.package.path), format('{0}/cypress/videos/**', matrix.package.path)) != ''}}
-        uses: actions/upload-artifact@v3
-        with:
-          name: cypress-${{ steps.file-name.outputs.fileName }}
-          path: |
-            ${{format('{0}/cypress/screenshots/**', matrix.package.path)}}
-            ${{format('{0}/cypress/videos/**', matrix.package.path)}}
-
   unit:
     name: Unit tests
     needs: build
@@ -141,3 +106,57 @@ jobs:
       # * Run every `lint` script in the workspace . Dependencies build is cached by Turborepo
       - name: Lint
         run: pnpm run lint:all
+
+  e2e:
+    name: 'E2E (Package: ${{ matrix.package.path }})'
+    needs: build
+    if: ${{ needs.build.outputs.matrix != '[]' && needs.build.outputs.matrix != '' }}
+    strategy:
+      # * Don't cancel other matrices when one fails
+      fail-fast: false
+      matrix:
+        package: ${{ fromJson(needs.build.outputs.matrix) }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      # * Install Node and dependencies. Package dependencies won't be downloaded again as they have been cached by the `build` job.
+      - name: Install Node and dependencies
+        uses: ./.github/actions/install-dependencies
+        with:
+          TURBO_TOKEN: ${{ env.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ env.TURBO_TEAM }}
+      # * Install Nhost CLI if a `nhost/config.yaml` file is found
+      - name: Install Nhost CLI
+        if: hashFiles(format('{0}/nhost/config.yaml', matrix.package.path)) != ''
+        uses: ./.github/actions/nhost-cli
+      - name: Fetch Dashboard Preview URL
+        id: fetch-dashboard-preview-url
+        uses: zentered/vercel-preview-url@v1.1.9
+        if: github.ref_name != 'main'
+        env:
+          VERCEL_TOKEN: ${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
+          GITHUB_REF: ${{ github.ref_name }}
+          GITHUB_REPOSITORY: ${{ github.repository }}
+        with:
+          vercel_team_id: ${{ secrets.DASHBOARD_VERCEL_TEAM_ID }}
+          vercel_project_id: ${{ secrets.DASHBOARD_STAGING_VERCEL_PROJECT_ID }}
+          vercel_state: BUILDING,READY,INITIALIZING
+      - name: Set Dashboard Preview URL
+        if: steps.fetch-dashboard-preview-url.outputs.preview_url != ''
+        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
+        run: pnpm --filter="${{ matrix.package.name }}" run e2e
+      - id: file-name
+        if: ${{ failure() }}
+        name: Transform package name into a valid file name
+        run: |
+          PACKAGE_FILE_NAME=$(echo "${{ matrix.package.name }}" | sed 's/@//g; s/\//-/g')
+          echo "fileName=$PACKAGE_FILE_NAME"  >> $GITHUB_OUTPUT
+      # * Run this step only if the previous step failed, and Playwright generated a report
+      - name: Upload Playwright Report
+        if: ${{ failure() && hashFiles(format('{0}/playwright-report/**', matrix.package.path)) != ''}}
+        uses: actions/upload-artifact@v3
+        with:
+          name: playwright-${{ steps.file-name.outputs.fileName }}
+          path: ${{format('{0}/playwright-report/**', matrix.package.path)}}

.github/workflows/dashboard.yaml

@@ -9,6 +9,7 @@ env:
   NEXT_PUBLIC_ENV: dev
   NEXT_TELEMETRY_DISABLED: 1
   NEXT_PUBLIC_NHOST_BACKEND_URL: http://localhost:1337
+
 jobs:
   build:
     name: Build

.github/workflows/renovate.yaml

@@ -1,89 +0,0 @@
-name: Renovate
-
-on:
-  pull_request:
-    branches: [main]
-    types: [closed]
-    paths-ignore:
-      - 'assets/**'
-      - '**.md'
-      - 'LICENSE'
-env:
-  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-  TURBO_TEAM: nhost
-
-jobs:
-  renovate-changeset:
-    name: Add changeset
-    if: github.event.pull_request.merged == true && startsWith(github.head_ref, 'renovate/')
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-          token: ${{ secrets.GH_PAT }}
-      # * Install Node and dependencies. Package downloads will be cached for the next jobs.
-      - name: Install Node and dependencies
-        uses: ./.github/actions/install-dependencies
-        with:
-          TURBO_TOKEN: ${{ env.TURBO_TOKEN }}
-          TURBO_TEAM: ${{ env.TURBO_TEAM }}
-          BUILD: 'none'
-      - name: Determine bumps
-        id: bumps
-        run: |
-          LAST_NON_PR_SHA=$(git log --no-merges main origin/${{ github.head_ref }} --format=format:%h -- | head -2 | tail -1)
-          echo "result<<EOF" >> $GITHUB_OUTPUT
-          pnpm recursive list --depth -1 --parseable \
-              --filter='!nhost-root' \
-              --filter=[$LAST_NON_PR_SHA] \
-              | xargs -I@ jq ".name" @/package.json \
-              | sort \
-              | uniq -u \
-              | awk '$0=$0": patch"' \
-              >> $GITHUB_OUTPUT
-          echo 'EOF' >> $GITHUB_OUTPUT
-      - name: Install dictionary
-        if: steps.bumps.outputs.result != ''
-        run: sudo apt-get install wbritish
-      - name: Generate changeset file name
-        id: file_name
-        if: steps.bumps.outputs.result != ''
-        run: |
-          FILE_NAME=$(shuf -n 3 /usr/share/dict/words | tr '\n' '-' | sed 's/-$//' | sed 's/'"'"'s//g' | tr '[:upper:]' '[:lower:]')
-          echo "result=./.changeset/${FILE_NAME}.md" >> $GITHUB_OUTPUT
-      - name: Create changeset file
-        if: steps.bumps.outputs.result != ''
-        run: |
-          cat <<EOF > ${{ steps.file_name.outputs.result }}
-          ---
-          ${{ steps.bumps.outputs.result }}
-          ---
-
-          ${{ github.event.pull_request.title }}
-          EOF
-      - name: Create Pull Request
-        id: cpr
-        uses: peter-evans/create-pull-request@v4
-        with:
-          token: ${{ secrets.GH_PAT }}
-          commit-message: ${{ github.event.pull_request.title }}
-          branch: renovate-changesets
-          delete-branch: true
-          title: 'chore: create changesest from Renovate bumps'
-          labels: |
-            dependencies
-          body: |
-            This PR creates the changesets from the Renovate dependencies that have been merged to main.
-      - name: Enable Pull Request Automerge
-        if: steps.cpr.outputs.pull-request-operation == 'created'
-        uses: peter-evans/enable-pull-request-automerge@v2
-        with:
-          token: ${{ secrets.GH_PAT }}
-          pull-request-number: ${{ steps.cpr.outputs.pull-request-number }}
-      - name: Auto approve
-        if: steps.cpr.outputs.pull-request-operation == 'created'
-        uses: juliangruber/approve-pull-request-action@v2
-        with:
-          github-token: ${{ secrets.GH_PAT }}
-          number: ${{ steps.cpr.outputs.pull-request-number }}

.github/workflows/test-nhost-cli-action.yaml

@@ -28,7 +28,7 @@ jobs:
           path: packages/nhost-js
           start: true
       - name: should be running
-        run: curl -sSf 'http://localhost:9695' > /dev/null
+        run: curl -sSf 'https://local.hasura.nhost.run' > /dev/null
 
   stop:
     runs-on: ubuntu-latest
@@ -48,28 +48,6 @@ jobs:
             exit 1
           fi
 
-  wait:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - name: Install the Nhost CLI and start the application
-        uses: ./.github/actions/nhost-cli
-        with:
-          path: packages/nhost-js
-          start: true
-          wait: false
-      - name: should not be ready
-        run: curl -sSf -o /dev/null 'http://localhost:9695' > /dev/null && exit 1 || true
-      - name: should eventually be ready
-        run: |
-          curl -sSf --connect-timeout 3 \
-            --max-time 5 \
-            --retry 300 \
-            --retry-delay 1 \
-            --retry-max-time 300 \
-            --retry-connrefused \
-            'http://localhost:9695' > /dev/null
-
   config:
     runs-on: ubuntu-latest
     steps:
@@ -79,14 +57,10 @@ jobs:
         with:
           path: packages/nhost-js
           start: true
-          config: |
-            services:
-              auth:
-                image: nhost/hasura-auth:0.15.0
       - name: should find the injected hasura-auth version
         run: |
-          VERSION=$(curl -sSf 'http://localhost:1337/v1/auth/version')
-          EXPECTED_VERSION='{"version":"v0.15.0"}'
+          VERSION=$(curl -sSf 'https://local.auth.nhost.run/v1/version')
+          EXPECTED_VERSION='{"version":"v0.20.1"}'
           if [ "$VERSION" != "$EXPECTED_VERSION" ]; then
             echo "Expected version $EXPECTED_VERSION but got $VERSION"
             exit 1
@@ -99,6 +73,6 @@ jobs:
       - name: Install the Nhost CLI
         uses: ./.github/actions/nhost-cli
         with:
-          version: v0.8.10
+          version: v1.0.1
       - name: should find the correct version
-        run: nhost version | head -n 1 | grep v0.8.10 || exit 1
+        run: nhost --version | head -n 1 | grep v1.0.1 || exit 1

.gitignore

@@ -26,6 +26,7 @@ tmp/
 .pnpm-store
 .turbo
 .env
+.secrets
 out/
 
 # Custom

config/.eslint.base.js

@@ -23,8 +23,8 @@ module.exports = {
     'e2e/**/*.ts',
     'e2e/**/*.d.ts'
   ],
-  plugins: ['@typescript-eslint', 'cypress'],
-  extends: ['plugin:cypress/recommended'],
+  plugins: ['@typescript-eslint'],
+  extends: [],
   parserOptions: {
     ecmaVersion: 2020,
     sourceType: 'module'

config/vite.lib.config.js

@@ -36,6 +36,7 @@ export default defineConfig({
     }
   },
   build: {
+    target: 'es2019',
     sourcemap: true,
     lib: {
       entry,

dashboard/.env.example

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

dashboard/.eslintrc.js

@@ -8,7 +8,11 @@ module.exports = {
     tsconfigRootDir: __dirname,
     project: './tsconfig.json',
   },
-  ignorePatterns: ['**/.eslintrc.js', '**/prettier.config.js'],
+  ignorePatterns: [
+    '**/.eslintrc.js',
+    '**/prettier.config.js',
+    '**/next.config.js',
+  ],
   rules: {
     'react/react-in-jsx-scope': 'off',
     'react/jsx-props-no-spreading': 'off',
@@ -21,9 +25,9 @@ module.exports = {
       'error',
       { allowArrowFunctions: true, allowFunctions: true },
     ],
+    'import/prefer-default-export': 'off',
     'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
     curly: ['error', 'all'],
-    'no-restricted-exports': 'off',
     'no-undef': 'off',
     'no-use-before-define': 'off',
     '@typescript-eslint/no-use-before-define': [
@@ -62,21 +66,11 @@ module.exports = {
           {
             group: ['..*'],
             message:
-              'Please use absolute imports instead. (e.g: @/ui/, @/hooks/, etc.)',
-          },
-          {
-            group: ['@/components/ui', '@/components/ui/*'],
-            message:
-              'Please use shorthand imports instead. (e.g: @/ui/ActivityIndicator, @/ui/Button, etc.)',
-          },
-          {
-            group: ['@/components/ui/v2*'],
-            message:
-              'Please use shorthand imports instead. (e.g: @/ui/v2/ActivityIndicator, @/ui/v2/Button, etc.)',
+              'Please use absolute imports instead. (e.g: @/components/, @/hooks/, etc.)',
           },
           {
             group: ['@testing-library/react*'],
-            message: 'Please use @/utils/testUtils instead.',
+            message: 'Please use @/tests/testUtils instead.',
           },
         ],
       },

dashboard/.gitignore

@@ -49,4 +49,9 @@ tailwind.json
 .idea
 
 # Do not ignore Logs page
-!src/**/logs*
+!src/**/logs*
+/test-results/
+/playwright-report/
+/playwright/.cache/
+storageState.json
+e2e/.auth/*

dashboard/.storybook/preview.js

@@ -51,7 +51,7 @@ export const decorators = [
   (Story) => (
     <NhostApolloProvider
       fetchPolicy="cache-first"
-      graphqlUrl="http://localhost:1337/v1/graphql"
+      graphqlUrl="https://local.graphql.nhost.run/v1"
     >
       <Story />
     </NhostApolloProvider>

dashboard/CHANGELOG.md

@@ -1,5 +1,349 @@
 # @nhost/dashboard
 
+## 0.17.3
+
+### Patch Changes
+
+- 01eeef9de: chore(misc): under the hood improvements
+- 21e13db05: chore(deps): bump `@types/react` to `v18.2.7` and `turbo` to `v1.10.1`
+- f16433ae6: chore(secrets): allow empty secrets and environment variables
+- aa3c62989: chore(cli): bump Nhost CLI version to v1.0
+  - @nhost/react-apollo@5.0.24
+  - @nhost/nextjs@1.13.26
+
+## 0.17.2
+
+### Patch Changes
+
+- 88a4983f: chore(misc): under the hood improvements
+
+## 0.17.1
+
+### Patch Changes
+
+- 9b0d4dde: feat(secrets): enable secrets
+
+## 0.17.0
+
+### Minor Changes
+
+- 15d84a19: Add postgres 14.6-20230525
+
+## 0.16.14
+
+### Patch Changes
+
+- 4c626174: chore: updated import paths, improved directory structure
+- cc047b71: chore(deps): bump `@fontsource` monorepo to `v5.0.0`
+- 99edd012: feat(account): add support for personal access tokens
+
+## 0.16.13
+
+### Patch Changes
+
+- 78c7109c: feat(settings): allow selecting service versions
+
+## 0.16.12
+
+### Patch Changes
+
+- 399009d6: fix(gql): don't enter an infinite loop when fetching remote app data
+- 329e5a91: fix(deployments): use the same sorting of deployments everywhere
+- 6d559d6e: chore(settings): add under the hood improvements to the settings page
+- 12eb236c: chore(deps): bump `prettier-plugin-tailwindcss` to `v0.3.0`
+- f9b81a2a: chore(deps): bump `turbo` to `v1.9.8`
+- 1345741b: fix(projects): don't redirect to 404 on project creation
+- Updated dependencies [7fea29a8]
+  - @nhost/react-apollo@5.0.23
+  - @nhost/nextjs@1.13.25
+
+## 0.16.11
+
+### Patch Changes
+
+- 1230b722: fix(projects): don't redirect to 404 on when the project is renamed
+  - @nhost/react-apollo@5.0.22
+  - @nhost/nextjs@1.13.24
+
+## 0.16.10
+
+### Patch Changes
+
+- Updated dependencies [da03bf39]
+  - @nhost/react-apollo@5.0.21
+  - @nhost/nextjs@1.13.23
+
+## 0.16.9
+
+### Patch Changes
+
+- 349aac36: fix(settings): use region domain when constructing the postgres connection string
+
+## 0.16.8
+
+### Patch Changes
+
+- 20fb69fa: chore(projects): change the way how API URLs are constructed
+
+## 0.16.7
+
+### Patch Changes
+
+- 49f9b837: chore(docker): bump `pnpm` to `v8.4.0` and `turbo` to `v1.9.3`
+- 3f478a4e: chore(deps): bump `vitest` to `v0.31.0`, `@types/react` to `v18.2.6` and `@types/react-dom` to `v18.2.4`
+
+## 0.16.6
+
+### Patch Changes
+
+- d926f156: fix(projects): redirect to 404 when an invalid project is opened
+- 49b99728: fix(projects): disable features for non-owner members of workspaces
+
+## 0.16.5
+
+### Patch Changes
+
+- 12e2855f: chore(deps): bump `jsdom` to v22
+- e4972b83: feat(metrics): add Grafana page
+
+## 0.16.4
+
+### Patch Changes
+
+- 3f396a9e: fix(projects): unpause after upgrading a paused project to pro
+- 3f396a9e: fix(projects): don't redirect to 404 page after project creation
+
+## 0.16.3
+
+### Patch Changes
+
+- Updated dependencies [90c60311]
+  - @nhost/react-apollo@5.0.20
+  - @nhost/nextjs@1.13.22
+
+## 0.16.2
+
+### Patch Changes
+
+- 0f34f0c6: fix(projects): disallow downgrading to free plan
+- 8da291ad: chore(deps): bump `@types/react` to v18.2.0 and `@types/react-dom` to v18.2.1
+
+## 0.16.1
+
+### Patch Changes
+
+- adc828a5: fix(gql): don't enter an infinite loop when fetching remote app data
+
+## 0.16.0
+
+### Minor Changes
+
+- 2fb1145f: feat(compute): add support for replicas
+
+### Patch Changes
+
+- d8ceccec: chore(env): remove deprecated `NHOST_BACKEND_URL` environment variable
+
+## 0.15.2
+
+### Patch Changes
+
+- 84b84ab7: fix(projects): filter projects by workspace
+
+## 0.15.1
+
+### Patch Changes
+
+- 2faf7907: chore(deps): bump `graphql-request` to v6
+- f1b5a944: chore(deps): bump `@vitejs/plugin-react` to v4
+- 7f1785ac: chore(deps): bump `@types/react` to v18.0.37
+  - @nhost/react-apollo@5.0.19
+
+## 0.15.0
+
+### Minor Changes
+
+- 85889ee8: feat(dashboard): add Compute management to the settings
+
+## 0.14.8
+
+### Patch Changes
+
+- 668c8771: chore(dialogs): unify dialog management of payment dialogs
+
+## 0.14.7
+
+### Patch Changes
+
+- d4ccc656: chore: cleanup unused code
+  - @nhost/react-apollo@5.0.18
+  - @nhost/nextjs@1.13.21
+
+## 0.14.6
+
+### Patch Changes
+
+- b299cfc9: chore(deps): bump `vitest` to v0.30.0
+- 411cb65b: chore(projects): refactor workspace and project hooks
+- 43b1b144: chore(deps): bump `@types/react` to v18.0.34 and `@types/react-dom` to v18.0.11
+- Updated dependencies [43b1b144]
+  - @nhost/react-apollo@5.0.17
+  - @nhost/nextjs@1.13.20
+
+## 0.14.5
+
+### Patch Changes
+
+- ba0d57ee: fix(i18n): revert i18n library
+- 3328ed05: feat(projects): improve overview when there is an error
+
+## 0.14.4
+
+### Patch Changes
+
+- 5e0920ba: chore(deps): bump `next-seo` to v6
+- 706c9dc3: chore(deps): bump `@types/react` to 18.0.33
+- 99f8f6b3: feat(metrics): show metrics on the overview
+
+## 0.14.3
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.16
+
+## 0.14.2
+
+### Patch Changes
+
+- 3cb67300: fix(logs): don't break UI when clearing time picker
+- 7453bf3b: feat(projects): show project creator info
+- c166dad0: chore(tests): improve auth page tests
+- 6a290bb2: chore(deps): bump `@types/react` to 18.0.32
+
+## 0.14.1
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.15
+- @nhost/nextjs@1.13.19
+
+## 0.14.0
+
+### Minor Changes
+
+- 6e1f03ea: feat(dashboard): add support for the Azure AD provider
+
+### Patch Changes
+
+- 1bd2c373: chore(deps): bump `turbo` to 1.8.6
+- d329b621: chore(deps): bump `@types/react` to 18.0.30
+- cb248f0d: fix(tests): avoid name collision in database tests
+- 867c8076: chore(deps): bump `@types/react` to 18.0.29
+
+## 0.13.10
+
+### Patch Changes
+
+- e93b06ab: fix(dashboard): remove left margin from workspace list on mobile
+- 1c4806bf: chore(deps): bump `sharp` to 0.32.0
+  - @nhost/react-apollo@5.0.14
+  - @nhost/nextjs@1.13.18
+
+## 0.13.9
+
+### Patch Changes
+
+- 912ed76c: chore(dashboard): bump `@apollo/client` to 3.7.10
+- Updated dependencies [912ed76c]
+  - @nhost/react-apollo@5.0.13
+
+## 0.13.8
+
+### Patch Changes
+
+- 7c127372: chore(dashboard): bump `react-error-boundary` to v4
+
+## 0.13.7
+
+### Patch Changes
+
+- 9130ab12: chore(dashboard): bump `yup` to v1 and `@hookform/resolvers` to v3
+
+## 0.13.6
+
+### Patch Changes
+
+- 253dd235: using new mutation to create projects + refactor Create Project page.
+
+## 0.13.5
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.12
+- @nhost/nextjs@1.13.17
+
+## 0.13.4
+
+### Patch Changes
+
+- b48bc034: fix(dashboard): disable new users
+- 798e591b: fix(dashboard): show correct date in data grid
+
+## 0.13.3
+
+### Patch Changes
+
+- bfb4c1a6: chore(dashboard): remove `useAxios` property
+- d8d8394b: Dashboard: allow to override hasura admin secret in docker
+- Updated dependencies [ce1ee40d]
+  - @nhost/nextjs@1.13.16
+  - @nhost/react-apollo@5.0.11
+
+## 0.13.2
+
+### Patch Changes
+
+- beed2eba: Fix docker entrypoint for dashboard
+- 2c8559a3: fix(dashboard): refresh project list after deleting a project
+- 4329d048: chore(dashboard): bump `graphiql` dependencies
+
+## 0.13.1
+
+### Patch Changes
+
+- cbb1fc5b: chore(dashboard): cleanup GraphQL operations
+
+## 0.13.0
+
+### Minor Changes
+
+- 088584e7: feat(dashboard): add support for custom local subdomains
+
+### Patch Changes
+
+- 2ac90dfd: fix(dashboard): improve mobile responsive layout
+- Updated dependencies [f375eacc]
+  - @nhost/nextjs@1.13.15
+  - @nhost/react-apollo@5.0.10
+
+## 0.12.4
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.9
+- @nhost/nextjs@1.13.14
+
+## 0.12.3
+
+### Patch Changes
+
+- 2b1338f7: chore(dashboard): bump `turbo` to 1.8.3
+- 5223ee93: fix(dashboard): show correct deployment status on the main page
+- 850a049c: chore(deps): update docker/build-push-action action to v4
+- Updated dependencies [850a049c]
+  - @nhost/nextjs@1.13.13
+  - @nhost/react-apollo@5.0.8
+
 ## 0.12.2
 
 ### Patch Changes

dashboard/Dockerfile

@@ -3,7 +3,7 @@ RUN apk add --no-cache libc6-compat
 RUN apk update
 WORKDIR /app
 
-RUN yarn global add turbo@1.6.3
+RUN yarn global add turbo@1.10.1
 COPY . .
 RUN turbo prune --scope="@nhost/dashboard" --docker
 
@@ -19,12 +19,17 @@ ENV NEXT_TELEMETRY_DISABLED 1
 ENV NEXT_PUBLIC_ENV dev
 ENV NEXT_PUBLIC_NHOST_PLATFORM false
 
-# placeholders for ports, will be replaced on runtime by entrypoint script
-ENV NEXT_PUBLIC_NHOST_MIGRATIONS_PORT __NEXT_PUBLIC_NHOST_MIGRATIONS_PORT__
-ENV NEXT_PUBLIC_NHOST_HASURA_PORT __NEXT_PUBLIC_NHOST_HASURA_PORT__
-ENV NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT __NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT__
+# placeholders for URLs, will be replaced on runtime by entrypoint script
+ENV NEXT_PUBLIC_NHOST_ADMIN_SECRET __NEXT_PUBLIC_NHOST_ADMIN_SECRET__
+ENV NEXT_PUBLIC_NHOST_AUTH_URL __NEXT_PUBLIC_NHOST_AUTH_URL__
+ENV NEXT_PUBLIC_NHOST_FUNCTIONS_URL __NEXT_PUBLIC_NHOST_FUNCTIONS_URL__
+ENV NEXT_PUBLIC_NHOST_GRAPHQL_URL __NEXT_PUBLIC_NHOST_GRAPHQL_URL__
+ENV NEXT_PUBLIC_NHOST_STORAGE_URL __NEXT_PUBLIC_NHOST_STORAGE_URL__
+ENV NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL __NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL__
+ENV NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL __NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL__
+ENV NEXT_PUBLIC_NHOST_HASURA_API_URL __NEXT_PUBLIC_NHOST_HASURA_API_URL__
 
-RUN yarn global add pnpm@7.17.0
+RUN yarn global add pnpm@8.6.0
 COPY .gitignore .gitignore
 COPY --from=pruner /app/out/json/ .
 COPY --from=pruner /app/out/pnpm-*.yaml .

dashboard/README.md

@@ -13,7 +13,7 @@ pnpm install
 
 Depending on the environment you wish to target you can configure environment variables in `.env.<target_environment>.local`.
 
-- `.env.development`: This file is used if you run `nhost dev`
+- `.env.development`: This file is used if you run `nhost up`
 - `.env.development.local`: This file is used if you run `pnpm dev`. It takes precedence over `.env.local` if available.
 - `.env.production.local`: This file is used if you run `pnpm build`. It takes precedence over `.env.local` if available.
 - `.env.local`: This file is used if you run either `pnpm dev` or `pnpm build`.
@@ -27,7 +27,7 @@ You can connect the Nhost Dashboard to your **locally running** Nhost backend in
 First, you need to run the following command to start your backend locally:
 
 ```bash
-cd <your_nhost_project> && nhost dev
+cd <your_nhost_project> && nhost up
 ```
 
 You can connect the Nhost Dashboard to your locally running backend by setting the following environment variables in `.env.development.local`:
@@ -35,8 +35,17 @@ You can connect the Nhost Dashboard to your locally running backend by setting t
 ```bash
 NEXT_PUBLIC_ENV=dev
 NEXT_PUBLIC_NHOST_PLATFORM=false
+NEXT_PUBLIC_NHOST_AUTH_URL=https://local.auth.nhost.run/v1
+NEXT_PUBLIC_NHOST_FUNCTIONS_URL=https://local.functions.nhost.run/v1
+NEXT_PUBLIC_NHOST_GRAPHQL_URL=https://local.graphql.nhost.run/v1
+NEXT_PUBLIC_NHOST_STORAGE_URL=https://local.storage.nhost.run/v1
+NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL=https://local.hasura.nhost.run
+NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL=https://local.hasura.nhost.run/v1/migrations
+NEXT_PUBLIC_NHOST_HASURA_API_URL=https://local.hasura.nhost.run
 ```
 
+This will connect the Nhost Dashboard to your locally running Nhost backend.
+
 ### Storybook
 
 Components are documented using [Storybook](https://storybook.js.org/). To run Storybook, run the following command:
@@ -45,30 +54,45 @@ Components are documented using [Storybook](https://storybook.js.org/). To run S
 pnpm storybook
 ```
 
-### Full list of environment variables
+### General Environment Variables
 
-| Name                                      | Description                                                                                                                                          |
-| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `NEXT_PUBLIC_ENV`                         | `dev`, `staging` or `prod`. Should be set to `dev` in most cases.                                                                                    |
-| `NEXT_PUBLIC_NHOST_PLATFORM`              | This should be set to `false` to connect the Nhost Dashboard to a locally running Nhost backend. Setting this to `true` turns off local development. |
-| `NEXT_PUBLIC_NHOST_LOCAL_MIGRATIONS_PORT` | Custom port that was passed to the CLI. Used only if local development is enabled. Default: `9693`                                                   |
-| `NEXT_PUBLIC_NHOST_LOCAL_HASURA_PORT`     | Custom port that was passed to the CLI. Used only if local development is enabled and `NEXT_PUBLIC_ENV` is `dev`. Default: `9695`                    |
-| `NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT`    | Custom port that was passed to the CLI. Used only if local development is enabled. Default: `1337`                                                   |
-| `NEXT_PUBLIC_NHOST_BACKEND_URL`           | Backend URL. Not necessary for local development.                                                                                                    |
-| `NEXT_PUBLIC_STRIPE_PK`                   | Stripe public key. Not necessary for local development.                                                                                              |
-| `NEXT_PUBLIC_GITHUB_APP_INSTALL_URL`      | URL of the GitHub application. Not necessary for local development.                                                                                  |
-| `NEXT_PUBLIC_ANALYTICS_WRITE_KEY`         | Analytics key. Not necessary for local development.                                                                                                  |
-| `NEXT_PUBLIC_NHOST_BRAGI_WEBSOCKET`       | URL of the Bragi websocket. Not necessary for local development.                                                                                     |
-| `NEXT_PUBLIC_MAINTENANCE_ACTIVE`          | Determines whether or not maintenance mode is active.                                                                                                |
-| `NEXT_PUBLIC_MAINTENANCE_END_DATE`        | Date when maintenance mode will end.                                                                                                                 |
-| `NEXT_PUBLIC_MAINTENANCE_UNLOCK_SECRET`   | Secret that can be used to bypass maintenance mode.                                                                                                  |
+| Name                             | Description                                                                                                                                                                                                          |
+| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `NEXT_PUBLIC_ENV`                | `dev`, `staging` or `prod`. This should be set to `dev` in most cases.                                                                                                                                               |
+| `NEXT_PUBLIC_NHOST_ADMIN_SECRET` | Admin secret for Hasura. Default: `nhost-admin-secret`                                                                                                                                                               |
+| `NEXT_PUBLIC_NHOST_PLATFORM`     | This should be set to `false` to connect the Nhost Dashboard to a locally running or a self-hosted Nhost backend. Setting this to `true` will connect the Nhost Dashboard to the cloud environment. Default: `false` |
+
+### Environment Variables for Local Development and Self-Hosting
+
+| Name                                          | Description                                                                                                                                                                                            |
+| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `NEXT_PUBLIC_NHOST_AUTH_URL`                  | The URL of the Auth service. When working locally, point it to the Auth service started by the CLI. When self-hosting, point it to the self-hosted Auth service.                                       |
+| `NEXT_PUBLIC_NHOST_FUNCTIONS_URL`             | The URL of the Functions service. When working locally, point it to the Functions service started by the CLI. When self-hosting, point it to the self-hosted Functions service.                        |
+| `NEXT_PUBLIC_NHOST_GRAPHQL_URL`               | The URL of the GraphQL service. When working locally, point it to the GraphQL service started by the CLI. When self-hosting, point it to the self-hosted GraphQL service.                              |
+| `NEXT_PUBLIC_NHOST_STORAGE_URL`               | The URL of the Storage service. When working locally, point it to the Storage service started by the CLI. When self-hosting, point it to the self-hosted Storage service.                              |
+| `NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL`        | The URL of the Hasura Console. When working locally, point it to the Hasura Console started by the CLI. When self-hosting, point it to the self-hosted Hasura Console.                                 |
+| `NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL` | The URL of Hasura's Migrations service. When working locally, point it to the Migrations service started by the CLI.                                                                                   |
+| `NEXT_PUBLIC_NHOST_HASURA_API_URL`            | The URL of Hasura's Schema and Metadata API. When working locally, point it to the Schema and Metadata API started by the CLI. When self-hosting, point it to the self-hosted Schema and Metadata API. |
+
+### Other Environment Variables
+
+| Name                                    | Description                                                                                 |
+| --------------------------------------- | ------------------------------------------------------------------------------------------- |
+| `NEXT_PUBLIC_NHOST_BACKEND_URL`         | Backend URL. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`.                   |
+| `NEXT_PUBLIC_STRIPE_PK`                 | Stripe public key. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`.             |
+| `NEXT_PUBLIC_GITHUB_APP_INSTALL_URL`    | URL of the GitHub application. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`. |
+| `NEXT_PUBLIC_ANALYTICS_WRITE_KEY`       | Analytics key. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`.                 |
+| `NEXT_PUBLIC_NHOST_BRAGI_WEBSOCKET`     | URL of the Bragi websocket. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`.    |
+| `NEXT_PUBLIC_MAINTENANCE_ACTIVE`        | Determines whether or not maintenance mode is active.                                       |
+| `NEXT_PUBLIC_MAINTENANCE_END_DATE`      | Date when maintenance mode will end.                                                        |
+| `NEXT_PUBLIC_MAINTENANCE_UNLOCK_SECRET` | Secret that can be used to bypass maintenance mode.                                         |
 
 ## ESLint Rules
 
 | Name                                         | Description                                                                                                                                                  |
 | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `react/react-in-jsx-scope`                   | Disabled because we don't need to import `React` anymore.                                                                                                    |
-| `react/jsx-props-no-spreading`               | Disabled because we heavily rely on props spreading in our `@/ui/v2` components.                                                                             |
+| `react/jsx-props-no-spreading`               | Disabled because we heavily rely on props spreading in our `@/components/ui/v2` components.                                                                  |
 | `react/require-default-props`                | Disabled because we use TypeScript instead of PropTypes.                                                                                                     |
 | `react-hooks/exhaustive-deps`                | Because we already had several rule violations when proper ESLint rules were introduced, we changed this rule to a warning.                                  |
 | `import/extensions`                          | JS / TS files should be imported without file extensions.                                                                                                    |
@@ -77,7 +101,6 @@ pnpm storybook
 | `import/order`                               | Until we have a better auto-formatter, we disable this rule.                                                                                                 |
 | `import/no-extraneous-dependencies`          | `devDependencies` should be excluded from the list of disallowed imports.                                                                                    |
 | `curly`                                      | By default it only enforces curly braces for multi-line blocks, but it should be enforced for single-line blocks as well.                                    |
-| `no-restricted-exports`                      | `export { default } from './module'` is used heavily in `@/ui/v2` which is a restricted export by default.                                                   |
 | `@typescript-eslint/no-use-before-define`    | Order of type references should be ignored.                                                                                                                  |
 | `no-undef`                                   | [Official TypeScript ESLint packages](https://github.com/typescript-eslint/typescript-eslint/issues/4671#issuecomment-1065948494) are turning off this rule. |
 | `@typescript-eslint/no-shadow`               | TypeScript specific implementation of `no-shadow`.                                                                                                           |
@@ -86,3 +109,22 @@ pnpm storybook
 | `@typescript-eslint/consistent-type-imports` | Enforces `import type { Type } from 'module'` syntax. It prevents false positive circular dependency errors.                                                 |
 | `@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
+
+End-to-end tests are written using [Playwright](https://playwright.dev/). To run the tests, run the following command:
+
+```bash
+pnpm e2e
+```
+
+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`:
+
+```
+NHOST_TEST_DASHBOARD_URL=<test_dashboard_url>
+NHOST_TEST_USER_EMAIL=<test_user_email>
+NHOST_TEST_USER_PASSWORD=<test_user_password>
+NHOST_TEST_WORKSPACE_NAME=<test_workspace_name>
+NHOST_TEST_PROJECT_NAME=<test_project_name>
+NHOST_TEST_PROJECT_ADMIN_SECRET=<test_project_admin_secret>
+```

dashboard/docker-entrypoint.sh

@@ -1,15 +1,25 @@
 #!/bin/sh
 
-set -e
+set -euo pipefail
 
-# read ports from env variables or use defaults
-NEXT_PUBLIC_NHOST_MIGRATIONS_PORT="${NEXT_PUBLIC_NHOST_MIGRATIONS_PORT:=9693}"
-NEXT_PUBLIC_NHOST_HASURA_PORT="${NEXT_PUBLIC_NHOST_HASURA_PORT:=9695}"
-NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT="${NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT:=1337}"
+# read URLs from env variables (with defaults)
+NEXT_PUBLIC_NHOST_ADMIN_SECRET="${NEXT_PUBLIC_NHOST_ADMIN_SECRET:-nhost-admin-secret}"
+NEXT_PUBLIC_NHOST_AUTH_URL="${NEXT_PUBLIC_NHOST_AUTH_URL:-http://localhost:1337/v1/auth}"
+NEXT_PUBLIC_NHOST_FUNCTIONS_URL="${NEXT_PUBLIC_NHOST_FUNCTIONS_URL:-http://localhost:1337/v1/functions}"
+NEXT_PUBLIC_NHOST_GRAPHQL_URL="${NEXT_PUBLIC_NHOST_GRAPHQL_URL:-http://localhost:1337/v1/graphql}"
+NEXT_PUBLIC_NHOST_STORAGE_URL="${NEXT_PUBLIC_NHOST_STORAGE_URL:-http://localhost:1337/v1/storage}"
+NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL="${NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL:-http://localhost:9695}"
+NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL="${NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL:-http://localhost:9693}"
+NEXT_PUBLIC_NHOST_HASURA_API_URL="${NEXT_PUBLIC_NHOST_HASURA_API_URL:-http://localhost:8080}"
 
 # replace placeholders
-find dashboard -type f -exec sed -i "s/__NEXT_PUBLIC_NHOST_MIGRATIONS_PORT__/${NEXT_PUBLIC_NHOST_MIGRATIONS_PORT}/g" {} +
-find dashboard -type f -exec sed -i "s/__NEXT_PUBLIC_NHOST_HASURA_PORT__/${NEXT_PUBLIC_NHOST_HASURA_PORT}/g" {} +
-find dashboard -type f -exec sed -i "s/__NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT__/${NEXT_PUBLIC_NHOST_LOCAL_BACKEND_PORT}/g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_ADMIN_SECRET__~${NEXT_PUBLIC_NHOST_ADMIN_SECRET}~g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_AUTH_URL__~${NEXT_PUBLIC_NHOST_AUTH_URL}~g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_FUNCTIONS_URL__~${NEXT_PUBLIC_NHOST_FUNCTIONS_URL}~g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_GRAPHQL_URL__~${NEXT_PUBLIC_NHOST_GRAPHQL_URL}~g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_STORAGE_URL__~${NEXT_PUBLIC_NHOST_STORAGE_URL}~g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL__~${NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL}~g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL__~${NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL}~g" {} +
+find dashboard -type f -exec sed -i "s~__NEXT_PUBLIC_NHOST_HASURA_API_URL__~${NEXT_PUBLIC_NHOST_HASURA_API_URL}~g" {} +
 
 exec "$@"

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

@@ -0,0 +1,51 @@
+import { faker } from '@faker-js/faker';
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.beforeEach(async () => {
+  await page.goto('/');
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('should be able to create then delete a personal access token', async () => {
+  await page.waitForLoadState('networkidle');
+  await page.getByRole('banner').getByRole('button').last().click();
+  await page.getByRole('link', { name: /account settings/i }).click();
+  await page
+    .getByRole('button', { name: /create personal access token/i })
+    .click();
+
+  const patName = faker.lorem.slug(3);
+
+  await page.getByRole('textbox', { name: /name/i }).fill(patName);
+  await page.getByRole('button', { name: /expiration/i }).click();
+  await page.getByRole('option', { name: /7 days/i }).click();
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await expect(
+    page.getByText(
+      /this token will not be shown again. make sure to copy it now./i,
+    ),
+  ).toBeVisible();
+
+  await page.getByRole('button', { name: /close/i }).click();
+
+  await expect(page.getByText(patName)).toBeVisible();
+
+  await page
+    .getByRole('button', { name: `More options for ${patName}`, exact: true })
+    .click();
+  await page.getByRole('menuitem', { name: /delete/i }).click();
+  await page.getByRole('button', { name: /delete/i }).click();
+
+  await expect(page.getByText(patName)).not.toBeVisible();
+});

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

@@ -0,0 +1,50 @@
+import {
+  TEST_PROJECT_NAME,
+  TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { faker } from '@faker-js/faker';
+import test, { expect } from '@playwright/test';
+
+test('should be able to ban and unban a user', async ({ page }) => {
+  await page.goto('/');
+
+  await openProject({
+    page,
+    projectName: TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: TEST_PROJECT_SLUG,
+  });
+
+  await page
+    .getByRole('navigation', { name: /main navigation/i })
+    .getByRole('link', { name: /auth/i })
+    .click();
+
+  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+
+  const email = generateTestEmail();
+  const password = faker.internet.password();
+
+  await createUser({ page, email, password });
+
+  await page
+    .getByRole('button', { name: `View ${email}`, exact: true })
+    .click();
+  await page.getByRole('button', { name: /actions/i }).click();
+  await page.getByRole('menuitem', { name: /ban user/i }).click();
+
+  await expect(
+    page.getByText(/user has been banned successfully./i),
+  ).toBeVisible();
+  await expect(page.locator('form').getByText(/^banned$/i)).toBeVisible();
+
+  await page.getByRole('button', { name: /actions/i }).click();
+  await page.getByRole('menuitem', { name: /unban user/i }).click();
+
+  await expect(
+    page.getByText(/user has been unbanned successfully./i),
+  ).toBeVisible();
+  await expect(page.locator('form').getByText(/^banned$/i)).not.toBeVisible();
+});

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

@@ -0,0 +1,65 @@
+import {
+  TEST_PROJECT_NAME,
+  TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { faker } from '@faker-js/faker';
+import type { Page } from '@playwright/test';
+import test, { expect } from '@playwright/test';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.beforeEach(async () => {
+  await page.goto('/');
+
+  await openProject({
+    page,
+    projectName: TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: TEST_PROJECT_SLUG,
+  });
+
+  await page
+    .getByRole('navigation', { name: /main navigation/i })
+    .getByRole('link', { name: /auth/i })
+    .click();
+
+  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('should create a user', async () => {
+  const email = generateTestEmail();
+  const password = faker.internet.password();
+
+  await createUser({ page, email, password });
+
+  await expect(
+    page.getByRole('button', { name: `View ${email}`, exact: true }),
+  ).toBeVisible();
+});
+
+test('should not be able to create a user with an existing email', async () => {
+  const email = generateTestEmail();
+  const password = faker.internet.password();
+
+  await createUser({ page, email, password });
+
+  await expect(
+    page.getByRole('button', { name: `View ${email}`, exact: true }),
+  ).toBeVisible();
+
+  await createUser({ page, email, password });
+
+  await expect(
+    page.getByRole('dialog').getByText(/email already in use/i),
+  ).toBeVisible();
+});

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

@@ -0,0 +1,96 @@
+import {
+  TEST_PROJECT_NAME,
+  TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { faker } from '@faker-js/faker';
+import type { Page } from '@playwright/test';
+import test, { expect } from '@playwright/test';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.beforeEach(async () => {
+  await page.goto('/');
+
+  await openProject({
+    page,
+    projectName: TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: TEST_PROJECT_SLUG,
+  });
+
+  await page
+    .getByRole('navigation', { name: /main navigation/i })
+    .getByRole('link', { name: /auth/i })
+    .click();
+
+  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('should be able to delete a user', async () => {
+  const email = generateTestEmail();
+  const password = faker.internet.password();
+
+  await createUser({ page, email, password });
+
+  await expect(
+    page.getByRole('button', { name: `View ${email}`, exact: true }),
+  ).toBeVisible();
+
+  await page
+    .getByRole('button', { name: `More options for ${email}`, exact: true })
+    .click();
+  await page.getByRole('menuitem', { name: /delete user/i }).click();
+
+  await expect(page.getByRole('dialog')).toBeVisible();
+  await expect(
+    page.getByRole('heading', { name: /delete user/i }),
+  ).toBeVisible();
+  await expect(
+    page.getByText(`Are you sure you want to delete the "${email}" user?`),
+  ).toBeVisible();
+
+  await page.getByRole('button', { name: /delete/i, exact: true }).click();
+
+  await expect(page.getByRole('dialog')).not.toBeVisible();
+
+  await expect(
+    page.getByRole('button', { name: `View ${email}`, exact: true }),
+  ).not.toBeVisible();
+});
+
+test('should be able to delete a user from the details page', async () => {
+  const email = generateTestEmail();
+  const password = faker.internet.password();
+
+  await createUser({ page, email, password });
+
+  await page
+    .getByRole('button', { name: `View ${email}`, exact: true })
+    .click();
+
+  await page.getByRole('button', { name: /actions/i }).click();
+  await page.getByRole('menuitem', { name: /delete user/i }).click();
+
+  await expect(page.getByRole('dialog')).toBeVisible();
+  await expect(
+    page.getByRole('heading', { name: /delete user/i }),
+  ).toBeVisible();
+  await expect(
+    page.getByText(`Are you sure you want to delete the "${email}" user?`),
+  ).toBeVisible();
+
+  await page.getByRole('button', { name: /delete/i, exact: true }).click();
+  await expect(
+    page.getByRole('button', { name: `View ${email}`, exact: true }),
+  ).not.toBeVisible();
+});

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

@@ -0,0 +1,103 @@
+import {
+  TEST_PROJECT_NAME,
+  TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { faker } from '@faker-js/faker';
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.beforeEach(async () => {
+  await page.goto('/');
+
+  await openProject({
+    page,
+    projectName: TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: TEST_PROJECT_SLUG,
+  });
+
+  await page
+    .getByRole('navigation', { name: /main navigation/i })
+    .getByRole('link', { name: /auth/i })
+    .click();
+
+  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('should be able to verify the email of a user', async () => {
+  const email = generateTestEmail();
+  const password = faker.internet.password();
+
+  await createUser({ page, email, password });
+
+  await page
+    .getByRole('button', { name: `View ${email}`, exact: true })
+    .click();
+
+  await expect(
+    page.getByRole('checkbox', { name: /email verified/i }),
+  ).not.toBeChecked();
+  await page.getByRole('checkbox', { name: /email verified/i }).check();
+
+  await page.getByRole('button', { name: /save/i }).click();
+
+  await expect(
+    page.getByText(/user settings have been updated successfully./i),
+  ).toBeVisible();
+
+  await page
+    .getByRole('button', { name: `View ${email}`, exact: true })
+    .click();
+
+  await expect(
+    page.getByRole('checkbox', { name: /email verified/i }),
+  ).toBeChecked();
+});
+
+test('should be able to verify the phone number of a user', async () => {
+  const email = generateTestEmail();
+  const password = faker.internet.password();
+  const phoneNumber = faker.phone.number();
+
+  await createUser({ page, email, password });
+
+  await page
+    .getByRole('button', { name: `View ${email}`, exact: true })
+    .click();
+
+  await expect(
+    page.getByRole('checkbox', { name: /phone number verified/i }),
+  ).toBeDisabled();
+
+  await page.getByRole('textbox', { name: /phone number/i }).fill(phoneNumber);
+  await page.getByRole('checkbox', { name: /phone number verified/i }).check();
+  await page.getByRole('button', { name: /save/i }).click();
+
+  await expect(
+    page.getByText(/user settings have been updated successfully./i),
+  ).toBeVisible();
+
+  await page
+    .getByRole('button', { name: `View ${email}`, exact: true })
+    .click();
+
+  await expect(
+    page.getByRole('textbox', { name: /phone number/i }),
+  ).toHaveValue(phoneNumber);
+
+  await expect(
+    page.getByRole('checkbox', { name: /phone number verified/i }),
+  ).toBeChecked();
+});

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

@@ -0,0 +1,280 @@
+import {
+  TEST_PROJECT_NAME,
+  TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { openProject, prepareTable } from '@/e2e/utils';
+import { faker } from '@faker-js/faker';
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+import { snakeCase } from 'snake-case';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.beforeEach(async () => {
+  await page.goto('/');
+
+  await openProject({
+    page,
+    projectName: TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: TEST_PROJECT_SLUG,
+  });
+
+  await page
+    .getByRole('navigation', { name: /main navigation/i })
+    .getByRole('link', { name: /database/i })
+    .click();
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('should create a simple table', async () => {
+  await page.getByRole('button', { name: /new table/i }).click();
+  await expect(page.getByText(/create a new table/i)).toBeVisible();
+
+  const tableName = snakeCase(faker.lorem.words(3));
+
+  await prepareTable({
+    page,
+    name: tableName,
+    primaryKey: 'id',
+    columns: [
+      { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
+      { name: 'title', type: 'text' },
+    ],
+  });
+
+  // create table
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+  );
+
+  await expect(
+    page.getByRole('link', { name: tableName, exact: true }),
+  ).toBeVisible();
+});
+
+test('should create a table with unique constraints', async () => {
+  await page.getByRole('button', { name: /new table/i }).click();
+  await expect(page.getByText(/create a new table/i)).toBeVisible();
+
+  const tableName = snakeCase(faker.lorem.words(3));
+
+  await prepareTable({
+    page,
+    name: tableName,
+    primaryKey: 'id',
+    columns: [
+      { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
+      { name: 'title', type: 'text', unique: true },
+      { name: 'isbn', type: 'text', unique: true },
+    ],
+  });
+
+  // create table
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+  );
+
+  await expect(
+    page.getByRole('link', { name: tableName, exact: true }),
+  ).toBeVisible();
+});
+
+test('should create a table with nullable columns', async () => {
+  await page.getByRole('button', { name: /new table/i }).click();
+  await expect(page.getByText(/create a new table/i)).toBeVisible();
+
+  const tableName = snakeCase(faker.lorem.words(3));
+
+  await prepareTable({
+    page,
+    name: tableName,
+    primaryKey: 'id',
+    columns: [
+      { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
+      { name: 'title', type: 'text', nullable: true },
+      { name: 'description', type: 'text', nullable: true },
+    ],
+  });
+
+  // create table
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+  );
+
+  await expect(
+    page.getByRole('link', { name: tableName, exact: true }),
+  ).toBeVisible();
+});
+
+test('should create a table with an identity column', async () => {
+  await page.getByRole('button', { name: /new table/i }).click();
+  await expect(page.getByText(/create a new table/i)).toBeVisible();
+
+  const tableName = snakeCase(faker.lorem.words(3));
+
+  await prepareTable({
+    page,
+    name: tableName,
+    primaryKey: 'id',
+    columns: [
+      { name: 'id', type: 'int4' },
+      { name: 'title', type: 'text', nullable: true },
+      { name: 'description', type: 'text', nullable: true },
+    ],
+  });
+
+  await page.getByRole('button', { name: /identity/i }).click();
+  await page.getByRole('option', { name: /id/i }).click();
+
+  // create table
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+  );
+
+  await expect(
+    page.getByRole('link', { name: tableName, exact: true }),
+  ).toBeVisible();
+});
+
+test('should create table with foreign key constraint', async () => {
+  await page.getByRole('button', { name: /new table/i }).click();
+  await expect(page.getByText(/create a new table/i)).toBeVisible();
+
+  const firstTableName = snakeCase(faker.lorem.words(3));
+
+  await prepareTable({
+    page,
+    name: firstTableName,
+    primaryKey: 'id',
+    columns: [
+      { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
+      { name: 'name', type: 'text' },
+    ],
+  });
+
+  // create table
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${firstTableName}`,
+  );
+
+  await page.getByRole('button', { name: /new table/i }).click();
+  await expect(page.getByText(/create a new table/i)).toBeVisible();
+
+  const secondTableName = snakeCase(faker.lorem.words(3));
+
+  await prepareTable({
+    page,
+    name: secondTableName,
+    primaryKey: 'id',
+    columns: [
+      { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
+      { name: 'title', type: 'text' },
+      { name: 'author_id', type: 'uuid' },
+    ],
+  });
+
+  await page.getByRole('button', { name: /add foreign key/i }).click();
+
+  // select column in current table
+  await page
+    .getByRole('button', { name: /column/i })
+    .first()
+    .click();
+  await page.getByRole('option', { name: /author_id/i }).click();
+
+  // select reference schema
+  await page.getByRole('button', { name: /schema/i }).click();
+  await page.getByRole('option', { name: /public/i }).click();
+
+  // select reference table
+  await page.getByRole('button', { name: /table/i }).click();
+  await page.getByRole('option', { name: firstTableName, exact: true }).click();
+
+  // select reference column
+  await page
+    .getByRole('button', { name: /column/i })
+    .nth(1)
+    .click();
+  await page.getByRole('option', { name: /id/i }).click();
+
+  await page.getByRole('button', { name: /add/i }).click();
+
+  await expect(
+    page.getByText(`public.${firstTableName}.id`, { exact: true }),
+  ).toBeVisible();
+
+  // create table
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${secondTableName}`,
+  );
+
+  await expect(
+    page.getByRole('link', { name: secondTableName, exact: true }),
+  ).toBeVisible();
+});
+
+test('should not be able to create a table with a name that already exists', async () => {
+  await page.getByRole('button', { name: /new table/i }).click();
+  await expect(page.getByText(/create a new table/i)).toBeVisible();
+
+  const tableName = snakeCase(faker.lorem.words(3));
+
+  await prepareTable({
+    page,
+    name: tableName,
+    primaryKey: 'id',
+    columns: [
+      { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
+      { name: 'name', type: 'text' },
+    ],
+  });
+
+  // create table
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+  );
+
+  await page.getByRole('button', { name: /new table/i }).click();
+  await expect(page.getByText(/create a new table/i)).toBeVisible();
+
+  await prepareTable({
+    page,
+    name: tableName,
+    primaryKey: 'id',
+    columns: [
+      { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
+      { name: 'title', type: 'text' },
+      { name: 'author_id', type: 'uuid' },
+    ],
+  });
+
+  // create table
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await expect(
+    page.getByText(/error: a table with this name already exists/i),
+  ).toBeVisible();
+});

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

@@ -0,0 +1,165 @@
+import {
+  TEST_PROJECT_NAME,
+  TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { deleteTable, openProject, prepareTable } from '@/e2e/utils';
+import { faker } from '@faker-js/faker';
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+import { snakeCase } from 'snake-case';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.beforeEach(async () => {
+  await page.goto('/');
+
+  await openProject({
+    page,
+    projectName: TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: TEST_PROJECT_SLUG,
+  });
+
+  await page
+    .getByRole('navigation', { name: /main navigation/i })
+    .getByRole('link', { name: /database/i })
+    .click();
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('should delete a table', async () => {
+  const tableName = snakeCase(faker.lorem.words(3));
+
+  await page.getByRole('button', { name: /new table/i }).click();
+
+  await prepareTable({
+    page,
+    name: tableName,
+    primaryKey: 'id',
+    columns: [
+      { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
+      { name: 'title', type: 'text' },
+    ],
+  });
+
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+  );
+
+  await deleteTable({
+    page,
+    name: tableName,
+  });
+
+  // navigate to next URL
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/**`,
+  );
+
+  await expect(
+    page.getByRole('link', { name: tableName, exact: true }),
+  ).not.toBeVisible();
+});
+
+test('should not be able to delete a table if other tables have foreign keys referencing it', async () => {
+  await page.getByRole('button', { name: /new table/i }).click();
+  await expect(page.getByText(/create a new table/i)).toBeVisible();
+
+  const firstTableName = snakeCase(faker.lorem.words(3));
+
+  await prepareTable({
+    page,
+    name: firstTableName,
+    primaryKey: 'id',
+    columns: [
+      { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
+      { name: 'name', type: 'text' },
+    ],
+  });
+
+  // create table
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${firstTableName}`,
+  );
+
+  await page.getByRole('button', { name: /new table/i }).click();
+  await expect(page.getByText(/create a new table/i)).toBeVisible();
+
+  const secondTableName = snakeCase(faker.lorem.words(3));
+
+  await prepareTable({
+    page,
+    name: secondTableName,
+    primaryKey: 'id',
+    columns: [
+      { name: 'id', type: 'uuid', defaultValue: 'gen_random_uuid()' },
+      { name: 'title', type: 'text' },
+      { name: 'author_id', type: 'uuid' },
+    ],
+  });
+
+  await page.getByRole('button', { name: /add foreign key/i }).click();
+
+  // select column in current table
+  await page
+    .getByRole('button', { name: /column/i })
+    .first()
+    .click();
+  await page.getByRole('option', { name: /author_id/i }).click();
+
+  // select reference schema
+  await page.getByRole('button', { name: /schema/i }).click();
+  await page.getByRole('option', { name: /public/i }).click();
+
+  // select reference table
+  await page.getByRole('button', { name: /table/i }).click();
+  await page.getByRole('option', { name: firstTableName, exact: true }).click();
+
+  // select reference column
+  await page
+    .getByRole('button', { name: /column/i })
+    .nth(1)
+    .click();
+  await page.getByRole('option', { name: /id/i }).click();
+
+  await page.getByRole('button', { name: /add/i }).click();
+
+  await expect(
+    page.getByText(`public.${firstTableName}.id`, { exact: true }),
+  ).toBeVisible();
+
+  // create table
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${secondTableName}`,
+  );
+
+  await expect(
+    page.getByRole('link', { name: secondTableName, exact: true }),
+  ).toBeVisible();
+
+  // try to delete the first table that is referenced by the second table
+  await deleteTable({
+    page,
+    name: firstTableName,
+  });
+
+  await expect(
+    page.getByText(
+      /constraint [a-zA-Z_]+ on table [a-zA-Z_]+ depends on table [a-zA-Z_]+/i,
+    ),
+  ).toBeVisible();
+});

dashboard/e2e/env.ts

@@ -0,0 +1,48 @@
+import slugify from 'slugify';
+
+/**
+ * URL of the dashboard to test against.
+ */
+export const TEST_DASHBOARD_URL = process.env.NHOST_TEST_DASHBOARD_URL;
+
+/**
+ * Name of the workspace to test against.
+ */
+export const TEST_WORKSPACE_NAME = process.env.NHOST_TEST_WORKSPACE_NAME;
+
+/**
+ * Slugified name of the workspace to test against.
+ */
+export const TEST_WORKSPACE_SLUG = slugify(TEST_WORKSPACE_NAME, {
+  lower: true,
+  strict: true,
+});
+
+/**
+ * Name of the project to test against.
+ */
+export const TEST_PROJECT_NAME = process.env.NHOST_TEST_PROJECT_NAME;
+
+/**
+ * Slugified name of the project to test against.
+ */
+export const TEST_PROJECT_SLUG = slugify(TEST_PROJECT_NAME, {
+  lower: true,
+  strict: true,
+});
+
+/**
+ * Hasura admin secret of the test project to use.
+ */
+export const TEST_PROJECT_ADMIN_SECRET =
+  process.env.NHOST_TEST_PROJECT_ADMIN_SECRET;
+
+/**
+ * Email of the test account to use.
+ */
+export const TEST_USER_EMAIL = process.env.NHOST_TEST_USER_EMAIL;
+
+/**
+ * Password of the test account to use.
+ */
+export const TEST_USER_PASSWORD = process.env.NHOST_TEST_USER_PASSWORD;

dashboard/e2e/overview/overview.test.ts

@@ -0,0 +1,122 @@
+import {
+  TEST_PROJECT_NAME,
+  TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_NAME,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { openProject } from '@/e2e/utils';
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+
+  await page.goto('/');
+  await openProject({
+    page,
+    projectName: TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: TEST_PROJECT_SLUG,
+  });
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+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,
+  );
+  await expect(
+    navLocator.getByRole('link', { name: /overview/i }),
+  ).toBeVisible();
+  await expect(
+    navLocator.getByRole('link', { name: /database/i }),
+  ).toBeVisible();
+  await expect(
+    navLocator.getByRole('link', { name: /graphql/i }),
+  ).toBeVisible();
+  await expect(navLocator.getByRole('link', { name: /hasura/i })).toBeVisible();
+  await expect(navLocator.getByRole('link', { name: /auth/i })).toBeVisible();
+  await expect(
+    navLocator.getByRole('link', { name: /storage/i }),
+  ).toBeVisible();
+  await expect(
+    navLocator.getByRole('link', { name: /deployments/i }),
+  ).toBeVisible();
+  await expect(
+    navLocator.getByRole('link', { name: /backups/i }),
+  ).toBeVisible();
+  await expect(navLocator.getByRole('link', { name: /logs/i })).toBeVisible();
+  await expect(
+    navLocator.getByRole('link', { name: /metrics/i }),
+  ).toBeVisible();
+  await expect(
+    navLocator.getByRole('link', { name: /settings/i }),
+  ).toBeVisible();
+});
+
+test('should show a header with a logo, the workspace name, and the project name', async () => {
+  await expect(
+    page.getByRole('banner').getByRole('link', { name: TEST_WORKSPACE_NAME }),
+  ).toBeVisible();
+
+  await expect(
+    page.getByRole('banner').getByRole('link', { name: TEST_PROJECT_NAME }),
+  ).toBeVisible();
+});
+
+test("should show the project's name, the Upgrade button and the Settings button", async () => {
+  await expect(
+    page.getByRole('heading', { name: TEST_PROJECT_NAME }),
+  ).toBeVisible();
+  await expect(page.getByText(/starter/i)).toBeVisible();
+  await expect(page.getByRole('button', { name: /upgrade/i })).toBeVisible();
+  await expect(
+    page.getByRole('main').getByRole('link', { name: /settings/i }),
+  ).toBeVisible();
+});
+
+test("should show the project's region and subdomain", async () => {
+  await expect(page.locator('p:has-text("Region") + div p').nth(0)).toHaveText(
+    /frankfurt \(eu-central-1\)/i,
+  );
+  await expect(
+    page.locator('p:has-text("Subdomain") + div p').nth(0),
+  ).toHaveText(/[a-z]{20}/i);
+});
+
+test('should not have a GitHub repository connected', async () => {
+  await expect(
+    page.getByRole('button', { name: /connect to github/i }),
+  ).toBeVisible();
+});
+
+test('should show metrics', async () => {
+  await expect(page.getByText(/cpu usage seconds\d+/i)).toBeVisible();
+  await expect(page.getByText(/total requests\d+/i)).toBeVisible();
+  await expect(page.getByText(/function invocations\d+/i)).toBeVisible();
+  await expect(
+    page.getByText(/egress volume\d+(\.\d+)? [a-zA-Z]+/i),
+  ).toBeVisible();
+  await expect(page.getByText(/logs\d+(\.\d+)? [a-zA-Z]+/i)).toBeVisible();
+});
+
+test('should show proper limits for the free project', async () => {
+  await expect(
+    page.getByText(/database\d+(\.\d+)? [a-zA-Z]+ of \d+(\.\d+)? [a-zA-Z]+/i),
+  ).toBeVisible();
+
+  await expect(
+    page.getByText(/storage\d+(\.\d+)? [a-zA-Z]+ of \d+(\.\d+)? [a-zA-Z]+/i),
+  ).toBeVisible();
+
+  await expect(page.getByText(/users[0-9]+ of [0-9]+/i)).toBeVisible();
+
+  await expect(page.getByText(/functions[0-9]+ of [0-9]+/i)).toBeVisible();
+});

dashboard/e2e/setup/auth.setup.ts

@@ -0,0 +1,20 @@
+import {
+  TEST_DASHBOARD_URL,
+  TEST_USER_EMAIL,
+  TEST_USER_PASSWORD,
+} from '@/e2e/env';
+import { test as setup } from '@playwright/test';
+
+setup('authenticate user', async ({ page }) => {
+  await page.goto('/');
+  await page.waitForURL('/signin');
+  await page.getByRole('link', { name: /continue with email/i }).click();
+
+  await page.waitForURL('/signin/email');
+  await page.getByLabel('Email').fill(TEST_USER_EMAIL);
+  await page.getByLabel('Password').fill(TEST_USER_PASSWORD);
+  await page.getByRole('button', { name: /sign in/i }).click();
+
+  await page.waitForURL(TEST_DASHBOARD_URL);
+  await page.context().storageState({ path: 'e2e/.auth/user.json' });
+});

dashboard/e2e/utils.ts

@@ -0,0 +1,189 @@
+import { faker } from '@faker-js/faker';
+import type { Page } from '@playwright/test';
+
+/**
+ * Open a project by navigating to the project's overview page.
+ *
+ * @param page - The Playwright page object.
+ * @param workspaceSlug - The slug of the workspace that contains the project.
+ * @param projectSlug - The slug of the project to open.
+ * @param projectName - The name of the project to open.
+ * @returns A promise that resolves when the project is opened.
+ */
+export async function openProject({
+  page,
+  projectName,
+  workspaceSlug,
+  projectSlug,
+}: {
+  page: Page;
+  workspaceSlug: string;
+  projectSlug: string;
+  projectName: string;
+}) {
+  await page.getByRole('link', { name: projectName }).click();
+  await page.waitForURL(`/${workspaceSlug}/${projectSlug}`);
+}
+
+/**
+ * Prepares a table by filling out the form.
+ *
+ * @param page - The Playwright page object.
+ * @param name - The name of the table to create.
+ * @param columns - The columns to create in the table.
+ * @returns A promise that resolves when the table is prepared.
+ */
+export async function prepareTable({
+  page,
+  name: tableName,
+  primaryKey,
+  columns,
+}: {
+  page: Page;
+  name: string;
+  primaryKey: string;
+  columns: Array<{
+    name: string;
+    type: string;
+    nullable?: boolean;
+    unique?: boolean;
+    defaultValue?: string;
+  }>;
+}) {
+  if (!columns.some(({ name }) => name === primaryKey)) {
+    throw new Error('Primary key must be one of the columns.');
+  }
+
+  await page.getByRole('textbox', { name: /name/i }).first().fill(tableName);
+
+  await Promise.all(
+    columns.map(
+      async (
+        { name: columnName, type, nullable, unique, defaultValue },
+        index,
+      ) => {
+        // set name
+        await page.getByPlaceholder(/name/i).nth(index).fill(columnName);
+
+        // set type
+        await page
+          .getByRole('table')
+          .getByRole('combobox', { name: /type/i })
+          .nth(index)
+          .type(type);
+        await page
+          .getByRole('table')
+          .getByRole('option', { name: type })
+          .first()
+          .click();
+
+        // optionally set default value
+        if (defaultValue) {
+          await page
+            .getByRole('table')
+            .getByRole('combobox', { name: /default value/i })
+            .nth(index)
+            .type(defaultValue);
+          await page
+            .getByRole('table')
+            .getByRole('option', { name: defaultValue })
+            .first()
+            .click();
+        }
+
+        // optionally check unique
+        if (unique) {
+          await page
+            .getByRole('checkbox', { name: /unique/i })
+            .nth(index)
+            .check();
+        }
+
+        // optionally check nullable
+        if (nullable) {
+          await page
+            .getByRole('checkbox', { name: /nullable/i })
+            .nth(index)
+            .check();
+        }
+
+        // add new column if not last
+        if (index < columns.length - 1) {
+          await page.getByRole('button', { name: /add column/i }).click();
+        }
+      },
+    ),
+  );
+
+  // select the first column as primary key
+  await page.getByRole('button', { name: /primary key/i }).click();
+  await page.getByRole('option', { name: primaryKey, exact: true }).click();
+}
+
+/**
+ * Deletes a table with the given name.
+ *
+ * @param page - The Playwright page object.
+ * @param name - The name of the table to delete.
+ * @returns A promise that resolves when the table is deleted.
+ */
+export async function deleteTable({
+  page,
+  name,
+}: {
+  page: Page;
+  name: string;
+}) {
+  const tableLink = page.getByRole('link', {
+    name,
+    exact: true,
+  });
+
+  await tableLink.hover();
+  await page
+    .getByRole('listitem')
+    .filter({ hasText: name })
+    .getByRole('button')
+    .click();
+
+  await page.getByRole('menuitem', { name: /delete table/i }).click();
+  await page.getByRole('button', { name: /delete/i }).click();
+}
+
+/**
+ * Creates a new user.
+ *
+ * @param page - The Playwright page object.
+ * @param email - The email of the user to create.
+ * @param password - The password of the user to create.
+ * @returns A promise that resolves when the user is created.
+ */
+export async function createUser({
+  page,
+  email,
+  password,
+}: {
+  page: Page;
+  email: string;
+  password: string;
+}) {
+  await page
+    .getByRole('button', { name: /create user/i })
+    .first()
+    .click();
+
+  await page.getByRole('textbox', { name: /email/i }).fill(email);
+  await page.getByRole('textbox', { name: /password/i }).fill(password);
+  await page.getByRole('button', { name: /create/i, exact: true }).click();
+}
+
+/**
+ * Generates a test email address with the given prefix (if provided).
+ *
+ * @param prefix - The prefix to use for the email address. (Default: `Nhost_Test_`)
+ */
+export function generateTestEmail(prefix: string = 'Nhost_Test_') {
+  const email = faker.internet.email();
+
+  return [prefix, email].join('');
+}

dashboard/global-teardown.ts

@@ -0,0 +1,66 @@
+import {
+  TEST_DASHBOARD_URL,
+  TEST_PROJECT_ADMIN_SECRET,
+  TEST_PROJECT_NAME,
+  TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { openProject } from '@/e2e/utils';
+import { chromium } from '@playwright/test';
+
+async function globalTeardown() {
+  const browser = await chromium.launch();
+
+  const context = await browser.newContext({
+    baseURL: TEST_DASHBOARD_URL,
+    storageState: 'e2e/.auth/user.json',
+  });
+
+  const page = await context.newPage();
+
+  await page.goto('/');
+
+  await openProject({
+    page,
+    projectName: TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: TEST_PROJECT_SLUG,
+  });
+
+  const pagePromise = context.waitForEvent('page');
+
+  await page.getByRole('link', { name: /hasura/i }).click();
+  await page.getByRole('link', { name: /open hasura/i }).click();
+
+  const hasuraPage = await pagePromise;
+  await hasuraPage.waitForLoadState();
+
+  const adminSecretInput = hasuraPage.getByPlaceholder(/enter admin-secret/i);
+
+  // note: a more ideal way would be to paste from clipboard, but Playwright
+  // doesn't support that yet
+  await adminSecretInput.fill(TEST_PROJECT_ADMIN_SECRET);
+  await adminSecretInput.press('Enter');
+
+  // note: getByRole doesn't work here
+  await hasuraPage.locator('a', { hasText: /data/i }).click();
+  await hasuraPage.getByRole('link', { name: /sql/i }).click();
+
+  await hasuraPage.locator('#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 $$;
+`);
+
+  await hasuraPage.getByRole('button', { name: /run!/i }).click();
+  await hasuraPage.getByText(/sql executed!/i).waitFor();
+}
+
+export default globalTeardown;

dashboard/graphql.config.yaml

@@ -1,5 +1,5 @@
 schema:
-  - http://localhost:1337/v1/graphql:
+  - https://local.graphql.nhost.run/v1:
       headers:
         x-hasura-admin-secret: nhost-admin-secret
 generates:

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.12.2",
+  "version": "0.17.3",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -8,28 +8,29 @@
     "build": "next build --no-lint",
     "analyze": "ANALYZE=true pnpm build --no-lint",
     "start": "next start",
-    "lint": "next lint --max-warnings 2",
+    "lint": "next lint --max-warnings 0",
     "test": "vitest",
     "codegen": "graphql-codegen --config graphql.config.yaml --errors-only",
-    "nhost:dev": "nhost dev -d",
+    "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"
+    "build-storybook": "build-storybook",
+    "e2e": "npx playwright@1.34.0 install --with-deps && playwright test"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.3",
+    "@apollo/client": "^3.7.10",
     "@codemirror/language": "^6.3.0",
     "@emotion/cache": "^11.10.5",
     "@emotion/react": "^11.10.5",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.10.5",
-    "@fontsource/inter": "^4.5.14",
-    "@fontsource/roboto-mono": "^4.5.8",
-    "@graphiql/react": "^0.15.0",
-    "@graphiql/toolkit": "^0.8.0",
+    "@fontsource/inter": "^5.0.0",
+    "@fontsource/roboto-mono": "^5.0.0",
+    "@graphiql/react": "^0.17.0",
+    "@graphiql/toolkit": "^0.8.2",
     "@headlessui/react": "^1.6.5",
     "@heroicons/react": "^1.0.6",
-    "@hookform/resolvers": "^2.9.10",
+    "@hookform/resolvers": "^3.0.0",
     "@mui/base": "^5.0.0-alpha.106",
     "@mui/material": "^5.10.14",
     "@mui/system": "^5.10.14",
@@ -37,7 +38,7 @@
     "@nhost/nextjs": "workspace:*",
     "@nhost/react-apollo": "workspace:*",
     "@segment/snippet": "^4.15.3",
-    "@stripe/react-stripe-js": "^1.10.0",
+    "@stripe/react-stripe-js": "^2.0.0",
     "@stripe/stripe-js": "^1.35.0",
     "@tailwindcss/forms": "^0.5.3",
     "@tanstack/react-query": "^4.16.1",
@@ -48,21 +49,20 @@
     "clsx": "^1.2.1",
     "date-fns": "^2.29.3",
     "generate-password": "^1.7.0",
-    "graphiql": "^2.2.0",
+    "graphiql": "^2.4.0",
     "graphql": "^16.6.0",
-    "graphql-request": "^4.3.0",
+    "graphql-request": "^6.0.0",
     "graphql-tag": "^2.12.6",
     "graphql-ws": "^5.11.2",
     "just-kebab-case": "^4.1.1",
     "lodash.debounce": "^4.0.8",
     "next": "^12.3.1",
-    "next-seo": "^5.14.1",
+    "next-seo": "^6.0.0",
     "node-pg-format": "^1.3.5",
     "pluralize": "^8.0.0",
-    "prettysize": "^2.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-error-boundary": "^3.1.4",
+    "react-error-boundary": "^4.0.0",
     "react-hook-form": "^7.42.1",
     "react-hot-toast": "^2.4.0",
     "react-is": "18.2.0",
@@ -70,23 +70,24 @@
     "react-merge-refs": "^1.1.0",
     "react-syntax-highlighter": "^15.4.5",
     "react-table": "^7.8.0",
-    "sharp": "^0.31.2",
+    "sharp": "^0.32.0",
     "slugify": "^1.6.5",
     "stripe": "^10.17.0",
     "tailwind-merge": "^1.8.0",
     "utility-types": "^3.10.0",
     "validator": "^13.7.0",
-    "yup": "^0.32.11",
+    "yup": "^1.0.2",
     "yup-password": "^0.2.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.2",
+    "@faker-js/faker": "^7.6.0",
     "@graphql-codegen/cli": "^3.0.0",
     "@graphql-codegen/typescript": "^3.0.0",
-    "@graphql-codegen/typescript-graphql-request": "^4.5.1",
     "@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",
     "@storybook/addon-actions": "^6.5.14",
     "@storybook/addon-essentials": "^6.5.14",
     "@storybook/addon-interactions": "^6.5.14",
@@ -103,19 +104,21 @@
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^16.11.7",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "18.0.28",
-    "@types/react-dom": "18.0.11",
+    "@types/react": "18.2.7",
+    "@types/react-dom": "18.2.4",
     "@types/react-table": "^7.7.12",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@types/validator": "^13.7.10",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",
-    "@vitejs/plugin-react": "^3.0.0",
-    "@vitest/coverage-c8": "^0.29.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "@vitest/coverage-c8": "^0.31.0",
     "autoprefixer": "^10.4.13",
     "babel-loader": "^8.3.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "csstype": "^3.0.10",
+    "dotenv": "^16.0.3",
+    "encoding": "^0.1.13",
     "eslint": "^8.28.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
@@ -125,7 +128,7 @@
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jsdom": "^21.0.0",
+    "jsdom": "^22.0.0",
     "lint-staged": ">=13",
     "msw": "^1.0.1",
     "msw-storybook-addon": "^1.6.3",
@@ -133,17 +136,17 @@
     "postcss": "^8.4.19",
     "prettier": "^2.7.1",
     "prettier-plugin-organize-imports": "^3.2.0",
-    "prettier-plugin-tailwindcss": "^0.2.0",
+    "prettier-plugin-tailwindcss": "^0.3.0",
     "react-date-fns-hooks": "^0.9.4",
     "require-from-string": "^2.0.2",
+    "snake-case": "^3.0.4",
     "storybook-addon-next-router": "^4.0.1",
     "tailwindcss": "^3.1.2",
     "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "^4.0.0",
     "vite": "^4.0.2",
     "vite-tsconfig-paths": "^4.0.3",
-    "vitest": "^0.29.0",
-    "webpack": "^5.75.0"
+    "vitest": "^0.31.0"
   },
   "browserslist": {
     "production": [
@@ -160,4 +163,4 @@
   "msw": {
     "workerDirectory": "public"
   }
-}
+}

dashboard/playwright.config.ts

@@ -0,0 +1,38 @@
+import { defineConfig, devices } from '@playwright/test';
+import dotenv from 'dotenv';
+import path from 'path';
+
+dotenv.config({ path: path.resolve(__dirname, '.env.test') });
+
+export default defineConfig({
+  testDir: './e2e',
+  timeout: 30 * 1000,
+  expect: {
+    timeout: 5000,
+  },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  globalTeardown: require.resolve('./global-teardown'),
+  use: {
+    actionTimeout: 0,
+    trace: 'on-first-retry',
+    baseURL: process.env.NHOST_TEST_DASHBOARD_URL,
+  },
+  projects: [
+    {
+      name: 'setup',
+      testMatch: ['**/setup/*.setup.ts'],
+    },
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: 'e2e/.auth/user.json',
+      },
+      dependencies: ['setup'],
+    },
+  ],
+});

dashboard/src/components/applications/ApplicationLive.tsx

@@ -1,94 +0,0 @@
-import MaintenanceAlert from '@/components/common/MaintenanceAlert';
-import RetryableErrorBoundary from '@/components/common/RetryableErrorBoundary';
-import Container from '@/components/layout/Container';
-import { features } from '@/components/overview/features';
-import { frameworks } from '@/components/overview/frameworks';
-import OverviewDeployments from '@/components/overview/OverviewDeployments';
-import OverviewDocumentation from '@/components/overview/OverviewDocumentation';
-import OverviewMigration from '@/components/overview/OverviewMigration';
-import OverviewProjectInfo from '@/components/overview/OverviewProjectInfo';
-import OverviewRepository from '@/components/overview/OverviewRepository';
-import OverviewTopBar from '@/components/overview/OverviewTopBar';
-import OverviewUsage from '@/components/overview/OverviewUsage';
-import useIsPlatform from '@/hooks/common/useIsPlatform';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import Divider from '@/ui/v2/Divider';
-
-export default function ApplicationLive() {
-  const isPlatform = useIsPlatform();
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const isProjectUsingRDS = currentApplication?.featureFlags.some(
-    (feature) => feature.name === 'fleetcontrol_use_rds',
-  );
-
-  if (!isPlatform) {
-    return (
-      <Container>
-        <OverviewTopBar />
-
-        <div className="grid grid-cols-1 gap-12 lg:grid-cols-3">
-          <div className="order-2 grid grid-flow-row gap-12 lg:order-1 lg:col-span-2">
-            <OverviewDocumentation
-              title="Pick your favorite framework and start learning"
-              description="Nhost integrates smoothly with all of the frameworks you already know."
-              cardElements={frameworks}
-            />
-
-            <OverviewDocumentation
-              title="Platform Documentation"
-              description="More in-depth documentation for key features."
-              cardElements={features}
-            />
-          </div>
-
-          <div className="order-1 grid grid-flow-row content-start gap-8 lg:order-2 lg:col-span-1 lg:gap-12">
-            <OverviewProjectInfo />
-            <Divider />
-            <OverviewUsage />
-          </div>
-        </div>
-      </Container>
-    );
-  }
-
-  return (
-    <Container>
-      <MaintenanceAlert />
-      <OverviewTopBar />
-
-      <div className="grid grid-cols-1 gap-12 pt-3 lg:grid-cols-3">
-        <div className="order-2 grid grid-flow-row gap-12 lg:order-1 lg:col-span-2">
-          <RetryableErrorBoundary>
-            <OverviewDeployments />
-          </RetryableErrorBoundary>
-
-          <OverviewDocumentation
-            title="Pick your favorite framework and start learning"
-            description="Nhost integrates smoothly with all of the frameworks you already know."
-            cardElements={frameworks}
-          />
-
-          <OverviewDocumentation
-            title="Platform Documentation"
-            description="More in-depth documentation for key features."
-            cardElements={features}
-          />
-        </div>
-
-        <div className="order-1 grid grid-flow-row content-start gap-8 lg:order-2 lg:col-span-1 lg:gap-12">
-          {isProjectUsingRDS && (
-            <>
-              <OverviewMigration />
-              <Divider />
-            </>
-          )}
-          <OverviewProjectInfo />
-          <Divider />
-          <OverviewRepository />
-          <Divider />
-          <OverviewUsage />
-        </div>
-      </div>
-    </Container>
-  );
-}

dashboard/src/components/applications/ApplicationMigrating.tsx

@@ -1,206 +0,0 @@
-import { useDialog } from '@/components/common/DialogProvider';
-import Container from '@/components/layout/Container';
-import ProjectStatusInfo from '@/components/project/ProjectStatusInfo';
-import useProjectRedirectWhenReady from '@/hooks/common/useProjectRedirectWhenReady';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { useInterval } from '@/hooks/useInterval';
-import { ApplicationStatus } from '@/types/application';
-import { Alert } from '@/ui/Alert';
-import Button from '@/ui/v2/Button';
-import Link from '@/ui/v2/Link';
-import Text from '@/ui/v2/Text';
-import { discordAnnounce } from '@/utils/discordAnnounce';
-import { triggerToast } from '@/utils/toast';
-import {
-  useInsertFeatureFlagMutation,
-  useUpdateApplicationMutation,
-} from '@/utils/__generated__/graphql';
-import { useUserEmail } from '@nhost/nextjs';
-import { useEffect, useState } from 'react';
-
-/**
- * Number of minutes to wait before enabling the "Cancel Migration" button.
- */
-const MIGRATION_CANCEL_TIMEOUT_MINUTES = 15;
-
-function MigrationDialog() {
-  const { closeAlertDialog } = useDialog();
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const [countdownTimer, setCountdownTimer] = useState(-1);
-
-  const minutes = Math.floor(countdownTimer / 60);
-  const seconds = Math.floor(countdownTimer % 60);
-
-  const countdownActive = countdownTimer > 0;
-
-  useEffect(() => {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    const rawTimestamp = localStorage.getItem(
-      `migration-${currentApplication?.id}`,
-    );
-
-    if (!rawTimestamp) {
-      return;
-    }
-
-    const timestamp = new Date(rawTimestamp);
-    const timeDifference =
-      timestamp.getTime() +
-      1000 * 60 * MIGRATION_CANCEL_TIMEOUT_MINUTES -
-      Date.now();
-
-    if (timeDifference < 0) {
-      setCountdownTimer(0);
-
-      return;
-    }
-
-    setCountdownTimer(timeDifference / 1000);
-  }, [currentApplication?.id]);
-
-  useInterval(
-    () =>
-      setCountdownTimer((prev) => {
-        if (prev === 0) {
-          return 0;
-        }
-
-        return prev - 1;
-      }),
-    1000,
-  );
-
-  useEffect(() => {
-    if (countdownTimer !== 0 || typeof window === 'undefined') {
-      return;
-    }
-
-    localStorage.removeItem(`migration-${currentApplication.id}`);
-  }, [countdownTimer, currentApplication.id]);
-
-  const [updateApplication] = useUpdateApplicationMutation({
-    refetchQueries: ['getOneUser'],
-  });
-  const [insertFeatureFlag] = useInsertFeatureFlagMutation();
-  const userEmail = useUserEmail();
-
-  async function handleCancelMigration() {
-    try {
-      await updateApplication({
-        variables: {
-          appId: currentApplication.id,
-          app: {
-            desiredState: ApplicationStatus.Live,
-          },
-        },
-      });
-
-      await insertFeatureFlag({
-        variables: {
-          flag: {
-            appId: currentApplication.id,
-            name: 'fleetcontrol_use_rds',
-            value: 'console',
-            description: 'Use RDS',
-          },
-        },
-      });
-
-      triggerToast(`${currentApplication.name} migration cancelled.`);
-    } catch (e) {
-      triggerToast(`Error trying to migrate ${currentApplication.name}`);
-      await discordAnnounce(
-        `Error trying to migrate app: ${currentApplication.subdomain} (${userEmail})`,
-      );
-    } finally {
-      closeAlertDialog();
-    }
-  }
-
-  return (
-    <div className="grid grid-flow-row gap-2 px-6">
-      <Text>
-        Cancelling this migration will revert your project to use the shared
-        Postgres instance.
-      </Text>
-
-      {!countdownActive && (
-        <Alert severity="warning" className="px-3 text-left">
-          Reach out to us at{' '}
-          <Link
-            underline="none"
-            target="_blank"
-            className="hover:underline focus:underline focus:outline-none"
-            href="https://discord.com/channels/552499021260914688/1029043079946182676"
-          >
-            #migratedb
-          </Link>{' '}
-          if you think the migration should have finished by now.
-        </Alert>
-      )}
-
-      <div className="grid grid-flow-row gap-2 pb-1">
-        <Button onClick={closeAlertDialog}>Continue Migration</Button>
-
-        <Button
-          onClick={handleCancelMigration}
-          variant="outlined"
-          color="secondary"
-          disabled={countdownActive}
-        >
-          {countdownActive
-            ? `Cancel in ${String(minutes).padStart(2, '0')}:${String(
-                seconds,
-              ).padStart(2, '0')}`
-            : 'Cancel Migration'}
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-export default function ApplicationMigrating() {
-  const { openAlertDialog } = useDialog();
-
-  useProjectRedirectWhenReady({ pollInterval: 10000 });
-
-  return (
-    <Container className="flex flex-col gap-6">
-      <ProjectStatusInfo
-        className="mx-auto max-w-sm"
-        title="Migration in progress"
-        description="Your project is being migrated to use a dedicated and more performant Postgres instance."
-        imageProps={{
-          src: '/assets/migrating.svg',
-          alt: 'Application Migrating',
-        }}
-      />
-      <Button
-        variant="borderless"
-        color="error"
-        className="mx-auto"
-        onClick={() =>
-          openAlertDialog({
-            title: 'Cancel Migration',
-            payload: <MigrationDialog />,
-            props: {
-              titleProps: {
-                className: 'px-6',
-              },
-              PaperProps: {
-                className: 'py-6 px-0 max-w-sm w-full',
-              },
-              hidePrimaryAction: true,
-              hideSecondaryAction: true,
-            },
-          })
-        }
-      >
-        Cancel Migration
-      </Button>
-    </Container>
-  );
-}

dashboard/src/components/applications/ApplicationPaused.tsx

@@ -1,136 +0,0 @@
-import ApplicationInfo from '@/components/applications/ApplicationInfo';
-import { ChangePlanModal } from '@/components/applications/ChangePlanModal';
-import { StagingMetadata } from '@/components/applications/StagingMetadata';
-import { useDialog } from '@/components/common/DialogProvider';
-import Container from '@/components/layout/Container';
-import { useUpdateApplicationMutation } from '@/generated/graphql';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { ApplicationStatus } from '@/types/application';
-import { Modal } from '@/ui';
-import Button from '@/ui/v2/Button';
-import Text from '@/ui/v2/Text';
-import { discordAnnounce } from '@/utils/discordAnnounce';
-import { triggerToast } from '@/utils/toast';
-import { updateOwnCache } from '@/utils/updateOwnCache';
-import { useUserData } from '@nhost/nextjs';
-import Image from 'next/image';
-import { useState } from 'react';
-import { RemoveApplicationModal } from './RemoveApplicationModal';
-
-export default function ApplicationPaused() {
-  const { openAlertDialog } = useDialog();
-  const { currentWorkspace, currentApplication } =
-    useCurrentWorkspaceAndApplication();
-  const [changingApplicationStateLoading, setChangingApplicationStateLoading] =
-    useState(false);
-  const [updateApplication, { client }] = useUpdateApplicationMutation();
-  const { id, email } = useUserData();
-  const isOwner = currentWorkspace.members.some(
-    ({ userId, type }) => userId === id && type === 'owner',
-  );
-  const isPro = currentApplication.plan.name === 'Pro';
-  const [showDeletingModal, setShowDeletingModal] = useState(false);
-
-  async function handleTriggerUnpausing() {
-    setChangingApplicationStateLoading(true);
-    try {
-      await updateApplication({
-        variables: {
-          appId: currentApplication.id,
-          app: {
-            desiredState: ApplicationStatus.Live,
-          },
-        },
-      });
-      await updateOwnCache(client);
-      discordAnnounce(
-        `App ${currentApplication.name} (${email}) set to awake.`,
-      );
-      triggerToast(`${currentApplication.name} set to awake.`);
-    } catch (e) {
-      triggerToast(`Error trying to awake ${currentApplication.name}`);
-    }
-  }
-  return (
-    <>
-      <Modal
-        showModal={showDeletingModal}
-        close={() => setShowDeletingModal(false)}
-      >
-        <RemoveApplicationModal
-          close={() => setShowDeletingModal(false)}
-          title={`Remove project ${currentApplication.name}?`}
-          description={`The project ${currentApplication.name} will be removed. All data will be lost and there will be no way to
-          recover the app once it has been deleted.`}
-        />
-      </Modal>
-
-      <Container className="mx-auto mt-20 grid max-w-sm grid-flow-row gap-2 text-center">
-        <div className="mx-auto flex w-centImage flex-col text-center">
-          <Image
-            src="/assets/PausedApp.svg"
-            alt="Closed Eye"
-            width={72}
-            height={72}
-          />
-        </div>
-
-        <Text variant="h3" component="h1" className="mt-4">
-          {currentApplication.name} is sleeping
-        </Text>
-
-        <Text className="mt-1">
-          Projects on the free plan stop responding to API calls after 7 days of
-          no traffic.
-        </Text>
-
-        {!isPro && (
-          <Button
-            className="mx-auto w-full max-w-[280px]"
-            onClick={() => {
-              openAlertDialog({
-                title: 'Upgrade your plan.',
-                payload: <ChangePlanModal />,
-                props: {
-                  PaperProps: { className: 'p-0' },
-                  hidePrimaryAction: true,
-                  hideSecondaryAction: true,
-                  hideTitle: true,
-                  maxWidth: 'lg',
-                },
-              });
-            }}
-          >
-            Upgrade to Pro to avoid autosleep
-          </Button>
-        )}
-
-        <div className="grid grid-flow-row gap-2">
-          <Button
-            variant="borderless"
-            className="mx-auto w-full max-w-[280px]"
-            loading={changingApplicationStateLoading}
-            disabled={changingApplicationStateLoading}
-            onClick={handleTriggerUnpausing}
-          >
-            Wake Up
-          </Button>
-
-          {isOwner && (
-            <Button
-              color="error"
-              variant="borderless"
-              className="mx-auto w-full max-w-[280px]"
-              onClick={() => setShowDeletingModal(true)}
-            >
-              Delete Project
-            </Button>
-          )}
-        </div>
-        <StagingMetadata>
-          <ApplicationInfo />
-        </StagingMetadata>
-      </Container>
-    </>
-  );
-}

dashboard/src/components/applications/ApplicationProvisioning.tsx

@@ -1,44 +0,0 @@
-import Container from '@/components/layout/Container';
-import { useCheckProvisioning } from '@/hooks/useCheckProvisioning';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { ApplicationStatus } from '@/types/application';
-import ActivityIndicator from '@/ui/v2/ActivityIndicator';
-import Text from '@/ui/v2/Text';
-import Image from 'next/image';
-import ApplicationInfo from './ApplicationInfo';
-import { AppLoader } from './AppLoader';
-import { StagingMetadata } from './StagingMetadata';
-
-export default function ApplicationProvisioning() {
-  const currentApplicationState = useCheckProvisioning();
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
-
-  return (
-    <Container className="mx-auto mt-8 grid max-w-sm grid-flow-row gap-4 text-center">
-      <div className="mx-auto flex w-centImage flex-col text-center">
-        <Image
-          src="/terminal-text.svg"
-          alt="Terminal with a green dot"
-          width={72}
-          height={72}
-        />
-      </div>
-
-      {currentApplicationState.state === ApplicationStatus.Empty ? (
-        <div className="grid grid-flow-row gap-1">
-          <Text variant="h3" component="h1">
-            Setting Up {currentApplication.name}
-          </Text>
-          <Text>This normally takes around 2 minutes</Text>
-          <ActivityIndicator className="mx-auto" />
-        </div>
-      ) : (
-        <AppLoader startLoader date={currentApplicationState.createdAt} />
-      )}
-
-      <StagingMetadata>
-        <ApplicationInfo />
-      </StagingMetadata>
-    </Container>
-  );
-}

dashboard/src/components/applications/ApplicationRestoring.tsx

@@ -1,48 +0,0 @@
-import Container from '@/components/layout/Container';
-import { useCheckProvisioning } from '@/hooks/useCheckProvisioning';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { ApplicationStatus } from '@/types/application';
-import ActivityIndicator from '@/ui/v2/ActivityIndicator';
-import Text from '@/ui/v2/Text';
-import Image from 'next/image';
-import ApplicationInfo from './ApplicationInfo';
-import { AppLoader } from './AppLoader';
-import { StagingMetadata } from './StagingMetadata';
-
-export default function ApplicationRestoring() {
-  const currentApplicationState = useCheckProvisioning();
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
-
-  return (
-    <Container className="mx-auto mt-8 grid max-w-sm grid-flow-row gap-4 text-center">
-      <div className="mx-auto flex w-centImage flex-col text-center">
-        <Image
-          src="/terminal-text.svg"
-          alt="Terminal with a green dot"
-          width={72}
-          height={72}
-        />
-      </div>
-      {currentApplicationState.state === ApplicationStatus.Empty ? (
-        <div className="grid grid-flow-row gap-1">
-          <Text variant="h3" component="h1">
-            Setting Up {currentApplication.name}
-          </Text>
-
-          <Text>This normally takes around 2 minutes</Text>
-
-          <ActivityIndicator className="mx-auto" />
-        </div>
-      ) : (
-        <AppLoader
-          startLoader
-          restoring
-          date={currentApplicationState.createdAt}
-        />
-      )}
-      <StagingMetadata>
-        <ApplicationInfo />
-      </StagingMetadata>
-    </Container>
-  );
-}

dashboard/src/components/applications/ChangePasswordModal.tsx

@@ -1,120 +0,0 @@
-import Box from '@/ui/v2/Box';
-import Button from '@/ui/v2/Button';
-import Input from '@/ui/v2/Input';
-import Text from '@/ui/v2/Text';
-import { nhost } from '@/utils/nhost';
-import { triggerToast } from '@/utils/toast';
-import React, { useState } from 'react';
-
-export function ChangePasswordModal({ close }: any) {
-  const [formState, setFormState] = useState<{
-    loading: boolean;
-    error: null | string;
-  }>({
-    loading: false,
-    error: null,
-  });
-
-  const [newPassword, setNewPassword] = useState('');
-  const [newPasswordConfirm, setNewPasswordConfirm] = useState('');
-
-  const handleSubmit = async (e: React.SyntheticEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    setFormState({
-      loading: true,
-      error: null,
-    });
-
-    if (newPassword !== newPasswordConfirm) {
-      setFormState({
-        loading: false,
-        error: 'Passwords do not match',
-      });
-
-      return;
-    }
-
-    const { error } = await nhost.auth.changePassword({ newPassword });
-
-    if (error) {
-      setFormState({
-        loading: false,
-        error: error.message,
-      });
-
-      return;
-    }
-
-    triggerToast(`Your password has been updated`);
-    close();
-  };
-
-  return (
-    <Box className="w-full max-w-md rounded-md px-6 py-6 text-left">
-      <form onSubmit={handleSubmit}>
-        <div className="grid grid-flow-row gap-4">
-          <div className="grid grid-flow-row gap-2">
-            <Text variant="h3">Choose New Password</Text>
-
-            <Text className="mt-2 font-normal">
-              Make sure to pick a strong password with at least 8 characters.
-            </Text>
-          </div>
-
-          <div className="grid grid-flow-row gap-2">
-            <Input
-              type="password"
-              id="newPassword"
-              name="newPassword"
-              label="New Password"
-              placeholder="New password"
-              autoFocus
-              value={newPassword}
-              onChange={(event) => setNewPassword(event.target.value)}
-              hideEmptyHelperText
-              fullWidth
-              required
-            />
-
-            <Input
-              type="password"
-              id="confirmNewPassword"
-              name="confirmNewPassword"
-              label="Confirm New Password"
-              placeholder="Confirm new password"
-              value={newPasswordConfirm}
-              onChange={(event) => setNewPasswordConfirm(event.target.value)}
-              hideEmptyHelperText
-              fullWidth
-              required
-            />
-          </div>
-
-          <div className="grid grid-flow-row gap-2">
-            {formState.error && (
-              <Text className="w-full px-4 text-center" color="error">
-                Error: {formState.error}
-              </Text>
-            )}
-
-            <Button type="submit" loading={formState.loading}>
-              Set New Password
-            </Button>
-
-            <Button
-              type="reset"
-              variant="outlined"
-              color="secondary"
-              onClick={close}
-            >
-              Cancel
-            </Button>
-          </div>
-        </div>
-      </form>
-    </Box>
-  );
-}
-
-export default ChangePasswordModal;

dashboard/src/components/applications/ChangePlanModal.tsx

@@ -1,253 +0,0 @@
-import { BillingPaymentMethodForm } from '@/components/billing-payment-method/BillingPaymentMethodForm';
-import { useDialog } from '@/components/common/DialogProvider';
-import { useUI } from '@/context/UIContext';
-import {
-  refetchGetApplicationPlanQuery,
-  useGetAppPlanAndGlobalPlansQuery,
-  useGetPaymentMethodsQuery,
-  useUpdateAppMutation,
-} from '@/generated/graphql';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { Modal } from '@/ui/Modal';
-import ActivityIndicator from '@/ui/v2/ActivityIndicator';
-import Box from '@/ui/v2/Box';
-import Button from '@/ui/v2/Button';
-import Checkbox from '@/ui/v2/Checkbox';
-import Text from '@/ui/v2/Text';
-import { planDescriptions } from '@/utils/planDescriptions';
-import { triggerToast } from '@/utils/toast';
-import { useTheme } from '@mui/material';
-import Image from 'next/image';
-import { useRouter } from 'next/router';
-import { useState } from 'react';
-
-function Plan({
-  planName,
-  price,
-  setPlan,
-  planId,
-  selectedPlanId,
-  currentPlan,
-}: any) {
-  return (
-    <button
-      type="button"
-      className="my-4 grid w-full grid-flow-col items-center justify-between px-1"
-      onClick={setPlan}
-      tabIndex={-1}
-    >
-      <div className="grid grid-flow-row gap-y-0.5">
-        <div className="flex flex-row items-center">
-          <Checkbox
-            onChange={setPlan}
-            checked={selectedPlanId === planId}
-            aria-label={planName}
-          />
-
-          <Text
-            variant="h3"
-            component="p"
-            className="ml-2 self-center font-medium"
-          >
-            {currentPlan.price > price ? 'Downgrade' : 'Upgrade'} to {planName}
-          </Text>
-        </div>
-        <Text variant="subtitle2" className="w-64 text-start">
-          {planDescriptions[planName]}
-        </Text>
-      </div>
-
-      <Text variant="h3" component="p">
-        $ {price}/mo
-      </Text>
-    </button>
-  );
-}
-
-export function ChangePlanModalWithData({ app, plans, close }: any) {
-  const theme = useTheme();
-  const [selectedPlanId, setSelectedPlanId] = useState('');
-  const { closeAlertDialog } = useDialog();
-
-  const { currentWorkspace, currentApplication } =
-    useCurrentWorkspaceAndApplication();
-
-  // get workspace payment methods
-  const { data } = useGetPaymentMethodsQuery({
-    variables: {
-      workspaceId: currentWorkspace.id,
-    },
-  });
-
-  const { openPaymentModal, closePaymentModal, paymentModal } = useUI();
-  const paymentMethodAvailable = data?.paymentMethods.length > 0;
-
-  const currentPlan = plans.find((plan) => plan.id === app.plan.id);
-  const selectedPlan = plans.find((plan) => plan.id === selectedPlanId);
-
-  const isDowngrade = currentPlan.price > selectedPlan?.price;
-
-  // graphql mutations
-  const [updateApp] = useUpdateAppMutation({
-    refetchQueries: [
-      refetchGetApplicationPlanQuery({
-        workspace: currentWorkspace.slug,
-        slug: currentApplication.slug,
-      }),
-    ],
-  });
-
-  // function handlers
-  const handleUpdateAppPlan = async () => {
-    await updateApp({
-      variables: {
-        id: app.id,
-        app: {
-          planId: selectedPlan.id,
-        },
-      },
-    });
-
-    if (isDowngrade) {
-      if (close) {
-        close();
-      }
-
-      closeAlertDialog();
-    }
-
-    triggerToast(
-      `${currentApplication.name} plan changed to ${selectedPlan.name}.`,
-    );
-  };
-
-  const handleChangePlanClick = async () => {
-    if (!selectedPlan) {
-      return;
-    }
-
-    if (!paymentMethodAvailable) {
-      openPaymentModal();
-
-      return;
-    }
-
-    await handleUpdateAppPlan();
-
-    if (close) {
-      close();
-    }
-
-    closeAlertDialog();
-  };
-
-  return (
-    <Box className="w-welcome rounded-lg p-6 text-left">
-      <Modal
-        showModal={paymentModal}
-        close={closePaymentModal}
-        dialogStyle={{ zIndex: theme.zIndex.modal + 1 }}
-      >
-        <BillingPaymentMethodForm
-          close={closePaymentModal}
-          onPaymentMethodAdded={handleUpdateAppPlan}
-          workspaceId={currentWorkspace.id}
-        />
-      </Modal>
-      <div className="flex flex-col">
-        <div className="mx-auto">
-          <Image
-            src="/assets/upgrade.svg"
-            alt="Nhost Logo"
-            width={72}
-            height={72}
-          />
-        </div>
-        <Text variant="h3" component="h2" className="mt-2 text-center">
-          Pick Your Plan
-        </Text>
-        <Text className="text-center">
-          You&apos;re currently on the <strong>{app.plan.name}</strong> plan.
-        </Text>
-
-        <div className="mt-5">
-          {plans
-            .filter((plan) => plan.id !== app.plan.id)
-            .map((plan) => (
-              <div className="mt-4" key={plan.id}>
-                <Plan
-                  planName={plan.name}
-                  currentPlan={currentPlan}
-                  key={plan.id}
-                  planId={plan.id}
-                  selectedPlanId={selectedPlanId}
-                  price={plan.price}
-                  setPlan={() => setSelectedPlanId(plan.id)}
-                />
-              </div>
-            ))}
-        </div>
-
-        <div className="mt-6 grid grid-flow-row gap-2">
-          <Button onClick={handleChangePlanClick} disabled={!selectedPlan}>
-            {!selectedPlan && 'Change Plan'}
-            {selectedPlan && isDowngrade && 'Downgrade'}
-            {selectedPlan && !isDowngrade && 'Upgrade'}
-          </Button>
-
-          <Button
-            variant="outlined"
-            color="secondary"
-            onClick={() => {
-              if (close) {
-                close();
-              }
-
-              closeAlertDialog();
-            }}
-          >
-            Cancel
-          </Button>
-        </div>
-      </div>
-    </Box>
-  );
-}
-
-export interface ChangePlanModalProps {
-  /**
-   * Function to close the modal if mounted on parent component.
-   *
-   * @deprecated Implement modal by using `openAlertDialog` hook instead.
-   */
-  close?: () => void;
-}
-
-export function ChangePlanModal({ close }: ChangePlanModalProps) {
-  const {
-    query: { workspaceSlug, appSlug },
-  } = useRouter();
-
-  const { data, loading, error } = useGetAppPlanAndGlobalPlansQuery({
-    variables: {
-      workspaceSlug: workspaceSlug as string,
-      appSlug: appSlug as string,
-    },
-    fetchPolicy: 'cache-first',
-  });
-
-  if (error) {
-    throw error;
-  }
-
-  if (loading) {
-    return (
-      <ActivityIndicator delay={500} label="Loading plans..." className="m-8" />
-    );
-  }
-
-  const { apps, plans } = data;
-  const app = apps[0];
-
-  return <ChangePlanModalWithData app={app} plans={plans} close={close} />;
-}

dashboard/src/components/applications/RenderWorkspacesWithApps.tsx

@@ -1,235 +0,0 @@
-import { FindOldApps } from '@/components/home';
-import type { UserData } from '@/hooks/useGetAllUserWorkspacesAndApplications';
-import type { ApplicationState } from '@/types/application';
-import { ApplicationStatus } from '@/types/application';
-import { Avatar } from '@/ui/Avatar';
-import StateBadge from '@/ui/StateBadge';
-import type { DeploymentStatus } from '@/ui/StatusCircle';
-import { StatusCircle } from '@/ui/StatusCircle';
-import Divider from '@/ui/v2/Divider';
-import Link from '@/ui/v2/Link';
-import List from '@/ui/v2/List';
-import { ListItem } from '@/ui/v2/ListItem';
-import Text from '@/ui/v2/Text';
-import { getApplicationStatusString } from '@/utils/helpers';
-import { formatDistance } from 'date-fns';
-import Image from 'next/image';
-import NavLink from 'next/link';
-import { Fragment } from 'react';
-
-function ApplicationCreatedAt({ createdAt }: any) {
-  return (
-    <Text component="span" className="text-sm">
-      created{' '}
-      {formatDistance(new Date(createdAt), new Date(), {
-        addSuffix: true,
-      })}
-    </Text>
-  );
-}
-
-function LastSuccessfulDeployment({ deployment }: any) {
-  return (
-    <span className="flex flex-row">
-      <Avatar
-        component="span"
-        name={deployment.commitUserName}
-        avatarUrl={deployment.commitUserAvatarUrl}
-        className="mr-1 h-4 w-4 self-center"
-      />
-      <Text component="span" className="self-center text-sm">
-        {deployment.commitUserName} deployed{' '}
-        {formatDistance(new Date(deployment.deploymentEndedAt), new Date(), {
-          addSuffix: true,
-        })}
-      </Text>
-    </span>
-  );
-}
-
-function CurrentDeployment({ deployment }: any) {
-  return (
-    <span className="flex flex-row">
-      <Avatar
-        component="span"
-        name={deployment.commitUserName}
-        avatarUrl={deployment.commitUserAvatarUrl}
-        className="mr-1 h-4 w-4 self-center"
-      />
-      <Text component="span" className="self-center text-sm">
-        {deployment.commitUserName} updated just now
-      </Text>
-    </span>
-  );
-}
-
-export function checkStatusOfTheApplication(
-  stateHistory: ApplicationState[] | [],
-) {
-  if (stateHistory.length === 0) {
-    return ApplicationStatus.Empty;
-  }
-
-  if (stateHistory[0].stateId === undefined) {
-    return ApplicationStatus.Empty;
-  }
-
-  return stateHistory[0].stateId;
-}
-
-export function RenderWorkspacesWithApps({
-  userData,
-  query,
-}: {
-  userData: UserData | null;
-  query: string;
-}) {
-  return (
-    <div>
-      {userData?.workspaces
-        .filter((workspace) =>
-          workspace.applications.map((app) =>
-            app.name.toLowerCase().includes(query.toLowerCase()),
-          ),
-        )
-        .sort((w1, w2) =>
-          // sort alphabetical order (A-Z)
-          w1.name.localeCompare(w2.name),
-        )
-        .map((workspace) => {
-          // early exit if no applications are available
-          if (workspace.applications.length === 0) {
-            return null;
-          }
-
-          const workspaceProjects = workspace.applications
-            .filter((app) =>
-              app.name.toLowerCase().includes(query.toLowerCase()),
-            )
-            .sort((appA, appB) => {
-              // sort apps based on either:
-              // 1. When the app was recently deployed, if there is any deployments available
-              // 2. When the app was created
-
-              const appASort =
-                appA.deployments.length > 0
-                  ? new Date(appA.deployments[0].deploymentEndedAt)
-                  : new Date(appA.createdAt);
-
-              const appBSort =
-                appB.deployments.length > 0
-                  ? new Date(appB.deployments[0].deploymentEndedAt)
-                  : new Date(appB.createdAt);
-
-              if (appASort > appBSort) {
-                return -1;
-              }
-              return 1;
-            });
-
-          return (
-            <div key={workspace.slug} className="my-8">
-              <NavLink href={`/${workspace.slug}`} passHref>
-                <Link
-                  href={`${workspace.slug}`}
-                  className="mb-1.5 block font-medium"
-                  underline="none"
-                  sx={{ color: 'text.primary' }}
-                >
-                  {workspace.name}
-                </Link>
-              </NavLink>
-              <List className="grid grid-flow-row border-y">
-                {workspaceProjects.map((app, index) => {
-                  const isDeployingToProduction = app.deployments[0]
-                    ? ['SCHEDULED', 'PENDING', 'DEPLOYING'].includes(
-                        app.deployments[0].deploymentStatus,
-                      )
-                    : false;
-
-                  return (
-                    <Fragment key={app.slug}>
-                      <ListItem.Root
-                        secondaryAction={
-                          <div className="grid grid-flow-col gap-px">
-                            {app.deployments[0] && (
-                              <div className="mr-2 flex self-center align-middle">
-                                <StatusCircle
-                                  status={
-                                    app.deployments[0]
-                                      .deploymentStatus as DeploymentStatus
-                                  }
-                                />
-                              </div>
-                            )}
-                            <StateBadge
-                              status={checkStatusOfTheApplication(
-                                app.appStates,
-                              )}
-                              title={getApplicationStatusString(
-                                checkStatusOfTheApplication(app.appStates),
-                              )}
-                            />
-                          </div>
-                        }
-                      >
-                        <NavLink
-                          href={`${workspace?.slug}/${app.slug}`}
-                          passHref
-                        >
-                          <ListItem.Button className="rounded-none">
-                            <ListItem.Avatar>
-                              <div className="h-10 w-10 overflow-hidden rounded-lg">
-                                <Image
-                                  src="/logos/new.svg"
-                                  alt="Nhost Logo"
-                                  width={40}
-                                  height={40}
-                                />
-                              </div>
-                            </ListItem.Avatar>
-
-                            <ListItem.Text
-                              primary={app.name}
-                              secondary={
-                                <>
-                                  {isDeployingToProduction && (
-                                    <CurrentDeployment
-                                      deployment={app.deployments[0]}
-                                    />
-                                  )}
-
-                                  {!isDeployingToProduction &&
-                                    app.deployments[0] && (
-                                      <LastSuccessfulDeployment
-                                        deployment={app.deployments[0]}
-                                      />
-                                    )}
-
-                                  {!isDeployingToProduction &&
-                                    !app.deployments[0] && (
-                                      <ApplicationCreatedAt
-                                        createdAt={app.createdAt}
-                                      />
-                                    )}
-                                </>
-                              }
-                            />
-                          </ListItem.Button>
-                        </NavLink>
-                      </ListItem.Root>
-
-                      {index < workspaceProjects.length - 1 && (
-                        <Divider component="li" />
-                      )}
-                    </Fragment>
-                  );
-                })}
-              </List>
-            </div>
-          );
-        })}
-      <FindOldApps />
-    </div>
-  );
-}

dashboard/src/components/applications/StagingMetadata.tsx

@@ -1,19 +0,0 @@
-import Status, { StatusEnum } from '@/ui/Status';
-import Box from '@/ui/v2/Box';
-import { isDevOrStaging } from '@/utils/helpers';
-import type { PropsWithChildren } from 'react';
-
-export function StagingMetadata({ children }: PropsWithChildren<unknown>) {
-  return (
-    isDevOrStaging() && (
-      <div className="mt-10">
-        <Box className="mx-auto flex flex-col rounded-md border p-5 text-center">
-          <Status status={StatusEnum.Deploying}>Internal info</Status>
-          {children}
-        </Box>
-      </div>
-    )
-  );
-}
-
-export default StagingMetadata;

dashboard/src/components/applications/UnlockFeatureByUpgrading.tsx

@@ -1,50 +0,0 @@
-import { ChangePlanModal } from '@/components/applications/ChangePlanModal';
-import { useDialog } from '@/components/common/DialogProvider';
-import { Alert } from '@/ui/Alert';
-import Button from '@/ui/v2/Button';
-import Text from '@/ui/v2/Text';
-import type { DetailedHTMLProps, HTMLProps } from 'react';
-import { twMerge } from 'tailwind-merge';
-
-export interface UnlockFeatureByUpgradingProps
-  extends DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement> {
-  /**
-   * Message to display in the alert.
-   */
-  message: string;
-}
-
-export function UnlockFeatureByUpgrading({
-  message,
-  className,
-  ...props
-}: UnlockFeatureByUpgradingProps) {
-  const { openAlertDialog } = useDialog();
-
-  return (
-    <div className={twMerge('flex', className)} {...props}>
-      <Alert className="grid w-full grid-flow-col place-content-between items-center gap-2">
-        <Text className="text-left">{message}</Text>
-
-        <Button
-          variant="borderless"
-          onClick={() => {
-            openAlertDialog({
-              title: 'Upgrade your plan.',
-              payload: <ChangePlanModal />,
-              props: {
-                PaperProps: { className: 'p-0' },
-                hidePrimaryAction: true,
-                hideSecondaryAction: true,
-                hideTitle: true,
-                maxWidth: 'lg',
-              },
-            });
-          }}
-        >
-          Upgrade
-        </Button>
-      </Alert>
-    </div>
-  );
-}

dashboard/src/components/applications/github/CheckGithubConfiguration.tsx

@@ -1,23 +0,0 @@
-import Link from '@/ui/v2/Link';
-import Text from '@/ui/v2/Text';
-
-export function CheckGithubConfiguration() {
-  return (
-    <Text className="mt-2 text-center text-xs">
-      Do you miss a repository, or do you need to connect another GitHub
-      account?{' '}
-      <Link
-        href={process.env.NEXT_PUBLIC_GITHUB_APP_INSTALL_URL}
-        target="_blank"
-        rel="noreferrer noopener"
-        className="text-xs font-medium"
-        underline="hover"
-      >
-        Manage your GitHub configuration
-      </Link>
-      .
-    </Text>
-  );
-}
-
-export default CheckGithubConfiguration;

dashboard/src/components/applications/github/GitHubInstallNhostApplication.tsx

@@ -1,35 +0,0 @@
-import GithubIcon from '@/components/icons/GithubIcon';
-import Button from '@/ui/v2/Button';
-import ArrowSquareOutIcon from '@/ui/v2/icons/ArrowSquareOutIcon';
-import Text from '@/ui/v2/Text';
-
-export default function GitHubInstallNhostApplication() {
-  return (
-    <div className="grid grid-flow-row justify-center gap-2 p-0.5">
-      <GithubIcon className="mx-auto h-8 w-8" />
-
-      <div className="text-center">
-        <Text variant="h3" component="h2">
-          Install the Nhost GitHub Application
-        </Text>
-
-        <Text variant="subtitle2">
-          Install the Nhost application on your GitHub account and update
-          permissions to automatically track repositories.
-        </Text>
-      </div>
-
-      <Button
-        href={process.env.NEXT_PUBLIC_GITHUB_APP_INSTALL_URL}
-        // Both `target` and `rel` are available when `href` is set. This is
-        // a limitation of MUI.
-        // @ts-ignore
-        target="_blank"
-        rel="noreferrer noopener"
-        endIcon={<ArrowSquareOutIcon className="h-4 w-4" />}
-      >
-        Configure the Nhost application on GitHub
-      </Button>
-    </div>
-  );
-}

dashboard/src/components/applications/github/GitHubNoRepositoriesAdded.tsx

@@ -1,62 +0,0 @@
-import { Avatar } from '@/ui/Avatar';
-import Divider from '@/ui/v2/Divider';
-import PlusCircleIcon from '@/ui/v2/icons/PlusCircleIcon';
-import Link from '@/ui/v2/Link';
-import List from '@/ui/v2/List';
-import { ListItem } from '@/ui/v2/ListItem';
-import Text from '@/ui/v2/Text';
-import { Fragment } from 'react';
-
-export function GitHubNoRepositoriesAdded({
-  filteredGitHubAppInstallations,
-}: any) {
-  return (
-    <div>
-      <Text className="mt-1 text-center text-lg font-medium">
-        No repositories found
-      </Text>
-
-      <Text className="text-center text-xs">
-        Check the Nhost app&apos;s settings on your GitHub account, or install
-        the app on a new account.
-      </Text>
-
-      <List className="my-2 border-y">
-        {filteredGitHubAppInstallations.map((githubApp, index) => (
-          <Fragment key={githubApp.id}>
-            <ListItem.Root
-              key={githubApp.id}
-              className="grid grid-flow-col gap-2 py-2.5 justify-start items-center"
-            >
-              <ListItem.Avatar>
-                <Avatar
-                  avatarUrl={githubApp.accountAvatarUrl as string}
-                  className="mr-1 h-5 w-5"
-                />
-              </ListItem.Avatar>
-
-              <ListItem.Text primary={githubApp.accountLogin} />
-            </ListItem.Root>
-
-            {index < filteredGitHubAppInstallations.length - 1 && (
-              <Divider component="li" />
-            )}
-          </Fragment>
-        ))}
-      </List>
-
-      <Link
-        href={process.env.NEXT_PUBLIC_GITHUB_APP_INSTALL_URL}
-        target="_blank"
-        rel="noreferrer noopener"
-        underline="hover"
-        className="grid grid-flow-col gap-1 items-center justify-start"
-      >
-        <PlusCircleIcon className="w-4 h-4" />
-        Configure the Nhost application on GitHub.
-      </Link>
-    </div>
-  );
-}
-
-export default GitHubNoRepositoriesAdded;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
+import type { CommonDialogProps } from '@/components/ui/v2/Dialog';
 import type { DialogFormProps } from '@/types/common';
-import type { CommonDialogProps } from '@/ui/v2/Dialog';
 import type { ReactElement, ReactNode } from 'react';
 import { createContext } from 'react';
 
@@ -22,7 +22,7 @@ export interface OpenDialogOptions {
   /**
    * Title of the dialog.
    */
-  title: ReactNode;
+  title?: ReactNode;
   /**
    * Component to render inside the dialog skeleton.
    */

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

@@ -1,7 +1,7 @@
-import RetryableErrorBoundary from '@/components/common/RetryableErrorBoundary';
-import AlertDialog from '@/ui/v2/AlertDialog';
-import { BaseDialog } from '@/ui/v2/Dialog';
-import Drawer from '@/ui/v2/Drawer';
+import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
+import { AlertDialog } from '@/components/ui/v2/AlertDialog';
+import { BaseDialog } from '@/components/ui/v2/Dialog';
+import { Drawer } from '@/components/ui/v2/Drawer';
 import { useRouter } from 'next/router';
 import type { BaseSyntheticEvent, PropsWithChildren } from 'react';
 import {

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

@@ -1,4 +1,4 @@
-import type { CommonDialogProps } from '@/ui/v2/Dialog';
+import type { CommonDialogProps } from '@/components/ui/v2/Dialog';
 import type { ReactElement, ReactNode } from 'react';
 import type { DialogConfig, OpenDialogOptions } from './DialogContext';
 

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

@@ -1,3 +1,4 @@
 export * from './DialogContext';
 export { default as DialogContext } from './DialogContext';
+export { default as DialogProvider } from './DialogProvider';
 export { default as useDialog } from './useDialog';

dashboard/src/components/common/ErrorBoundaryFallback/ErrorBoundaryFallback.tsx

@@ -1,11 +0,0 @@
-import ErrorMessage from '@/components/common/ErrorMessage';
-import type { FallbackProps } from 'react-error-boundary';
-
-export default function ErrorBoundaryFallback({
-  error,
-  resetErrorBoundary,
-}: FallbackProps) {
-  return (
-    <ErrorMessage onReset={resetErrorBoundary}>{error.message}</ErrorMessage>
-  );
-}

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

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

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

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

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

@@ -1,5 +1,11 @@
-import { FeedbackReceived } from '@/components/home/FeedbackReceived';
-import { SendFeedback } from '@/components/home/SendFeedback';
+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';
@@ -7,25 +13,136 @@ import { twMerge } from 'tailwind-merge';
 export interface FeedbackFormProps
   extends DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement> {}
 
-// TODO: Use `react-hook-form` here instead of the custom solution
+// 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);
 
-  return (
-    <div className={twMerge('max-w-md py-4 px-5', className)} {...props}>
-      {!feedbackSent ? (
-        <SendFeedback
-          setFeedbackSent={setFeedbackSent}
-          feedback={feedback}
-          setFeedback={setFeedback}
+  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}
         />
-      ) : (
-        <FeedbackReceived setFeedbackSent={setFeedbackSent} close={() => {}} />
+
+        <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 +1,2 @@
 export * from './FeedbackForm';
-export { default } from './FeedbackForm';
+export { default as FeedbackForm } from './FeedbackForm';

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 import type { NavLinkProps } from '@/components/common/NavLink';
-import NavLink from '@/components/common/NavLink';
-import type { SvgIconProps } from '@/ui/v2/icons/SvgIcon';
+import { NavLink } from '@/components/common/NavLink';
+import type { SvgIconProps } from '@/components/ui/v2/icons/SvgIcon';
 import type { ForwardedRef, PropsWithoutRef, ReactElement } from 'react';
 import { cloneElement, forwardRef, isValidElement } from 'react';
 import { twMerge } from 'tailwind-merge';

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

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

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

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

dashboard/src/components/common/InviteNotification/InviteNotification.tsx

@@ -1,19 +1,22 @@
-import { useGetWorkspaceMemberInvitesToManageQuery } from '@/generated/graphql';
-import useIsPlatform from '@/hooks/common/useIsPlatform';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { Text } from '@/components/ui/v2/Text';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
+import {
+  GetAllWorkspacesAndProjectsDocument,
+  GetWorkspaceMemberInvitesToManageDocument,
+  useGetWorkspaceMemberInvitesToManageQuery,
+} from '@/generated/graphql';
 import { useSubmitState } from '@/hooks/useSubmitState';
-import Box from '@/ui/v2/Box';
-import Button from '@/ui/v2/Button';
-import Text from '@/ui/v2/Text';
 import { nhost } from '@/utils/nhost';
 import { triggerToast } from '@/utils/toast';
-import { updateOwnCache } from '@/utils/updateOwnCache';
 import { useApolloClient } from '@apollo/client';
 import { alpha } from '@mui/system';
 import { useUserData } from '@nhost/nextjs';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 
-export function InviteAnnounce() {
+export default function InviteNotification() {
   const user = useUserData();
 
   const isPlatform = useIsPlatform();
@@ -24,13 +27,18 @@ export function InviteAnnounce() {
     useSubmitState();
 
   // @FIX: We probably don't want to poll every ten seconds for possible invites. (We can change later depending on how it works in production.) Maybe just on the workspace page?
-  const { data, loading, error, refetch, startPolling } =
-    useGetWorkspaceMemberInvitesToManageQuery({
-      variables: {
-        userId: user?.id,
-      },
-      skip: !isPlatform,
-    });
+  const {
+    data,
+    loading,
+    error,
+    refetch: refetchInvitations,
+    startPolling,
+  } = useGetWorkspaceMemberInvitesToManageQuery({
+    variables: {
+      userId: user?.id,
+    },
+    skip: !isPlatform || !user,
+  });
 
   useEffect(() => {
     startPolling(15000);
@@ -75,9 +83,14 @@ export function InviteAnnounce() {
       });
     }
 
-    await updateOwnCache(client);
+    await client.refetchQueries({
+      include: [
+        GetAllWorkspacesAndProjectsDocument,
+        GetWorkspaceMemberInvitesToManageDocument,
+      ],
+    });
     await router.push(`/${invite.workspace.slug}`);
-    await refetch();
+    await refetchInvitations();
     triggerToast('Workspace invite accepted');
     return setSubmitState({
       error: null,
@@ -99,7 +112,6 @@ export function InviteAnnounce() {
         workspaceMemberInviteId: inviteId,
         isAccepted: false,
       },
-      { useAxios: false },
     );
 
     if (ignoreError) {
@@ -115,7 +127,10 @@ export function InviteAnnounce() {
 
     // just refetch all data
     await client.refetchQueries({
-      include: ['getOneUser', 'getWorkspaceMemberInvitesToManage'],
+      include: [
+        GetAllWorkspacesAndProjectsDocument,
+        GetWorkspaceMemberInvitesToManageDocument,
+      ],
     });
 
     setIgnoreState({
@@ -183,5 +198,3 @@ export function InviteAnnounce() {
     </Box>
   );
 }
-
-export default InviteAnnounce;

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

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

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

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

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

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

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

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

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

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

dashboard/src/components/common/NavLink/NavLink.tsx

@@ -1,5 +1,5 @@
-import type { LinkProps } from '@/ui/v2/Link';
-import Link from '@/ui/v2/Link';
+import type { LinkProps } from '@/components/ui/v2/Link';
+import { Link } from '@/components/ui/v2/Link';
 import NextLink from 'next/link';
 import type { ForwardedRef, PropsWithoutRef } from 'react';
 import { forwardRef } from 'react';

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

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

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

@@ -1,9 +1,9 @@
-import type { ButtonProps } from '@/ui/v2/Button';
-import Button from '@/ui/v2/Button';
-import ChevronLeftIcon from '@/ui/v2/icons/ChevronLeftIcon';
-import ChevronRightIcon from '@/ui/v2/icons/ChevronRightIcon';
-import Input from '@/ui/v2/Input';
-import Text from '@/ui/v2/Text';
+import type { ButtonProps } from '@/components/ui/v2/Button';
+import { Button } from '@/components/ui/v2/Button';
+import { ChevronLeftIcon } from '@/components/ui/v2/icons/ChevronLeftIcon';
+import { ChevronRightIcon } from '@/components/ui/v2/icons/ChevronRightIcon';
+import { Input } from '@/components/ui/v2/Input';
+import { Text } from '@/components/ui/v2/Text';
 import type { DetailedHTMLProps, HTMLProps } from 'react';
 import { twMerge } from 'tailwind-merge';
 

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
-import Option from '@/ui/v2/Option';
-import type { SelectProps } from '@/ui/v2/Select';
-import Select from '@/ui/v2/Select';
-import useColorPreference from '@/ui/v2/useColorPreference';
+import { Option } from '@/components/ui/v2/Option';
+import type { SelectProps } from '@/components/ui/v2/Select';
+import { Select } from '@/components/ui/v2/Select';
+import { useColorPreference } from '@/components/ui/v2/useColorPreference';
 
 export interface ThemeSwitcherProps extends SelectProps<any> {}
 
@@ -22,6 +22,7 @@ export default function ThemeSwitcher({
         onChange?.(event, value);
       }}
       slotProps={{
+        ...props?.slotProps,
         listbox: { className: 'min-w-0 w-full' },
         popper: {
           disablePortal: false,

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

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

dashboard/src/components/common/UIProvider/UIContext.ts

@@ -0,0 +1,19 @@
+import { createContext } from 'react';
+
+export interface UIContextProps {
+  /**
+   * Determines whether or not the dashboard is in maintenance mode.
+   */
+  maintenanceActive: boolean;
+  /**
+   * The date and time when maintenance mode will end.
+   */
+  maintenanceEndDate: Date;
+}
+
+const UIContext = createContext<UIContextProps>({
+  maintenanceActive: false,
+  maintenanceEndDate: null,
+});
+
+export default UIContext;

dashboard/src/components/common/UIProvider/UIProvider.tsx

@@ -0,0 +1,30 @@
+import { useRouter } from 'next/router';
+import type { PropsWithChildren } from 'react';
+import { useMemo } from 'react';
+import type { UIContextProps } from './UIContext';
+import UIContext from './UIContext';
+
+export default function UIProvider(props: PropsWithChildren<unknown>) {
+  const router = useRouter();
+
+  const maintenanceUnlocked =
+    process.env.NEXT_PUBLIC_MAINTENANCE_UNLOCK_SECRET &&
+    process.env.NEXT_PUBLIC_MAINTENANCE_UNLOCK_SECRET ===
+      router.query.maintenanceUnlockSecret;
+
+  const value: UIContextProps = useMemo(
+    () => ({
+      maintenanceActive: maintenanceUnlocked
+        ? false
+        : process.env.NEXT_PUBLIC_MAINTENANCE_ACTIVE === 'true',
+      maintenanceEndDate:
+        process.env.NEXT_PUBLIC_MAINTENANCE_END_DATE &&
+        !Number.isNaN(Date.parse(process.env.NEXT_PUBLIC_MAINTENANCE_END_DATE))
+          ? new Date(Date.parse(process.env.NEXT_PUBLIC_MAINTENANCE_END_DATE))
+          : null,
+    }),
+    [maintenanceUnlocked],
+  );
+
+  return <UIContext.Provider value={value} {...props} />;
+}

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

@@ -0,0 +1,4 @@
+export * from './UIContext';
+export { default as UIContext } from './UIContext';
+export { default as UIProvider } from './UIProvider';
+export { default as useUI } from './useUI';

dashboard/src/components/common/UIProvider/useUI.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import UIContext from './UIContext';
+
+export default function useUI() {
+  const context = useContext(UIContext);
+
+  if (!context) {
+    throw new Error('useUI must be used within a UIProvider');
+  }
+
+  return context;
+}

dashboard/src/components/dashboard/AccountMenu.tsx

@@ -1,125 +0,0 @@
-import { ChangePasswordModal } from '@/components/applications/ChangePasswordModal';
-import ThemeSwitcher from '@/components/common/ThemeSwitcher';
-import { Avatar } from '@/ui/Avatar';
-import { Modal } from '@/ui/Modal';
-import Box from '@/ui/v2/Box';
-import Button from '@/ui/v2/Button';
-import { Dropdown, useDropdown } from '@/ui/v2/Dropdown';
-import PowerIcon from '@/ui/v2/icons/PowerIcon';
-import Text from '@/ui/v2/Text';
-import { nhost } from '@/utils/nhost';
-import { useApolloClient } from '@apollo/client';
-import { useUserData } from '@nhost/nextjs';
-import getConfig from 'next/config';
-import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
-
-interface AccountMenuContentProps {
-  onChangePasswordClick: VoidFunction;
-}
-
-function AccountMenuContent({
-  onChangePasswordClick,
-}: AccountMenuContentProps) {
-  const user = useUserData();
-  const router = useRouter();
-  const client = useApolloClient();
-  const { handleClose } = useDropdown();
-  const { publicRuntimeConfig } = getConfig();
-
-  return (
-    <Box className="relative grid w-full grid-flow-row gap-5 p-6">
-      <div className="grid grid-flow-row justify-center">
-        <Avatar
-          className="mx-auto mb-2 h-16 w-16 rounded-full"
-          name={user?.displayName}
-          avatarUrl={user?.avatarUrl}
-        />
-
-        <Text variant="h3" component="h2" className="text-center">
-          {nhost.auth.getUser()?.displayName}
-        </Text>
-
-        <Text className="text-center font-medium">
-          {nhost.auth.getUser()?.email}
-        </Text>
-      </div>
-
-      <div className="grid grid-flow-row gap-2">
-        <Button
-          variant="outlined"
-          color="secondary"
-          onClick={() => {
-            onChangePasswordClick();
-            handleClose();
-          }}
-        >
-          Change Password
-        </Button>
-
-        <Button color="error" disabled>
-          Remove Account
-        </Button>
-
-        <Button
-          variant="outlined"
-          color="secondary"
-          onClick={async () => {
-            await nhost.auth.signOut();
-            router.push('/signin');
-            await client.resetStore();
-          }}
-          endIcon={<PowerIcon className="mr-1 h-4 w-4" />}
-        >
-          Sign Out
-        </Button>
-      </div>
-
-      <ThemeSwitcher label="Theme" />
-
-      <Text className="text-center text-xs" color="disabled">
-        Dashboard Version: {publicRuntimeConfig?.version || 'n/a'}
-      </Text>
-    </Box>
-  );
-}
-
-export function AccountMenu() {
-  const user = useUserData();
-  const [changePasswordModal, setChangePasswordModal] = useState(false);
-
-  useEffect(() => {
-    if (window.location.hash.search('type=passwordReset') !== -1) {
-      setChangePasswordModal(true);
-    }
-  }, []);
-
-  return (
-    <>
-      <Modal
-        showModal={changePasswordModal}
-        close={() => setChangePasswordModal(false)}
-      >
-        <ChangePasswordModal close={() => setChangePasswordModal(false)} />
-      </Modal>
-
-      <Dropdown.Root>
-        <Dropdown.Trigger hideChevron className="rounded-full">
-          <Avatar
-            className="h-7 w-7 self-center rounded-full"
-            name={user?.displayName}
-            avatarUrl={user?.avatarUrl}
-          />
-        </Dropdown.Trigger>
-
-        <Dropdown.Content PaperProps={{ className: 'mt-1 max-w-xs w-full' }}>
-          <AccountMenuContent
-            onChangePasswordClick={() => setChangePasswordModal(true)}
-          />
-        </Dropdown.Content>
-      </Dropdown.Root>
-    </>
-  );
-}
-
-export default AccountMenu;