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

chore: update versions

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

@@ -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/workflows/changesets.yaml

@@ -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:
@@ -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 }}

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'

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,6 +25,7 @@ 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',

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

dashboard/Dockerfile

@@ -3,7 +3,7 @@ RUN apk add --no-cache libc6-compat
 RUN apk update
 WORKDIR /app
 
-RUN yarn global add turbo@1.8.3
+RUN yarn global add turbo@1.8.6
 COPY . .
 RUN turbo prune --scope="@nhost/dashboard" --docker
 
@@ -19,10 +19,15 @@ 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
 COPY .gitignore .gitignore

dashboard/README.md

@@ -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,23 +54,38 @@ 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
 
@@ -86,3 +110,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/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,119 @@
+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(
+    10,
+  );
+  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: /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.getByRole('textbox').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.4",
+  "version": "0.14.7",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -8,16 +8,17 @@
     "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",
     "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.31.2 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",
@@ -25,11 +26,11 @@
     "@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",
+    "@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,7 +49,7 @@
     "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-tag": "^2.12.6",
@@ -56,13 +57,12 @@
     "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,25 @@
     "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.31.2",
     "@storybook/addon-actions": "^6.5.14",
     "@storybook/addon-essentials": "^6.5.14",
     "@storybook/addon-interactions": "^6.5.14",
@@ -103,7 +105,7 @@
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^16.11.7",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "18.0.28",
+    "@types/react": "18.0.34",
     "@types/react-dom": "18.0.11",
     "@types/react-table": "^7.7.12",
     "@types/testing-library__jest-dom": "^5.14.5",
@@ -111,11 +113,12 @@
     "@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",
+    "@vitest/coverage-c8": "^0.30.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",
@@ -137,13 +140,14 @@
     "prettier-plugin-tailwindcss": "^0.2.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",
+    "vitest": "^0.30.0",
     "webpack": "^5.75.0"
   },
   "browserslist": {
@@ -161,4 +165,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/AppLoader.tsx

@@ -1,6 +1,6 @@
 import FeedbackForm from '@/components/common/FeedbackForm';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import { useInterval } from '@/hooks/useInterval';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Button from '@/ui/v2/Button';
 import { Dropdown } from '@/ui/v2/Dropdown';
@@ -33,7 +33,7 @@ export function AppLoader({
   date,
   restoring,
 }: AppLoaderProps) {
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const { currentProject } = useCurrentWorkspaceAndProject();
 
   let timeElapsedSinceEventCreation: number;
 
@@ -41,11 +41,11 @@ export function AppLoader({
     timeElapsedSinceEventCreation = getRelativeDateByApplicationState(date);
   } else if (unpause) {
     timeElapsedSinceEventCreation = getRelativeDateByApplicationState(
-      currentApplication.appStates[0].createdAt,
+      currentProject.appStates[0].createdAt,
     );
   } else {
     timeElapsedSinceEventCreation = getRelativeDateByApplicationState(
-      currentApplication.createdAt,
+      currentProject.createdAt,
     );
   }
 
@@ -63,9 +63,9 @@ export function AppLoader({
     <div className="grid grid-flow-row gap-2">
       <div className="grid grid-flow-row gap-1">
         <Text variant="h3" component="h1">
-          {restoring && `Restoring ${currentApplication.name} from backup`}
-          {!restoring && unpause && `Unpausing ${currentApplication.name}`}
-          {!restoring && !unpause && `Provisioning ${currentApplication.name}`}
+          {restoring && `Restoring ${currentProject.name} from backup`}
+          {!restoring && unpause && `Unpausing ${currentProject.name}`}
+          {!restoring && !unpause && `Provisioning ${currentProject.name}`}
         </Text>
         <Text>This normally takes around 2 minutes</Text>
       </div>

dashboard/src/components/applications/ApplicationErrored.tsx

@@ -2,7 +2,7 @@ import FeedbackForm from '@/components/common/FeedbackForm';
 import Container from '@/components/layout/Container';
 import { useAppCreatedAt } from '@/hooks/useAppCreatedAt';
 import { useCurrentDate } from '@/hooks/useCurrentDate';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import type { ApplicationState } from '@/types/application';
 import { ApplicationStatus } from '@/types/application';
 import { Modal } from '@/ui/Modal';
@@ -10,30 +10,28 @@ import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Button from '@/ui/v2/Button';
 import { Dropdown } from '@/ui/v2/Dropdown';
 import Text from '@/ui/v2/Text';
-import { discordAnnounce } from '@/utils/discordAnnounce';
-import { getPreviousApplicationState } from '@/utils/getPreviousApplicationState';
-import { getApplicationStatusString } from '@/utils/helpers';
-import { triggerToast } from '@/utils/toast';
-import { updateOwnCache } from '@/utils/updateOwnCache';
 import {
   useDeleteApplicationMutation,
   useGetApplicationStateQuery,
   useInsertApplicationMutation,
   useUpdateApplicationMutation,
 } from '@/utils/__generated__/graphql';
+import { discordAnnounce } from '@/utils/discordAnnounce';
+import { getPreviousApplicationState } from '@/utils/getPreviousApplicationState';
+import { getApplicationStatusString } from '@/utils/helpers';
+import { triggerToast } from '@/utils/toast';
+import { updateOwnCache } from '@/utils/updateOwnCache';
 import { useApolloClient } from '@apollo/client';
 import { useUserData } from '@nhost/nextjs';
 import Image from 'next/image';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import ApplicationInfo from './ApplicationInfo';
 import ApplicationLive from './ApplicationLive';
-import ApplicationUnknown from './ApplicationUnknown';
 import { RemoveApplicationModal } from './RemoveApplicationModal';
 import { StagingMetadata } from './StagingMetadata';
 
 export default function ApplicationErrored() {
-  const { currentWorkspace, currentApplication } =
-    useCurrentWorkspaceAndApplication();
+  const { currentWorkspace, currentProject } = useCurrentWorkspaceAndProject();
   const [changingApplicationStateLoading, setChangingApplicationStateLoading] =
     useState(false);
 
@@ -44,12 +42,13 @@ export default function ApplicationErrored() {
   // state, but we want to query again to double-check that we have the latest state
   // of the application. @GC.
   const { data, loading, error } = useGetApplicationStateQuery({
-    variables: { appId: currentApplication.id },
+    variables: { appId: currentProject?.id },
+    skip: !currentProject,
   });
 
-  const [previousState, setPreviousState] = useState<ApplicationStatus | null>(
-    null,
-  );
+  const previousState = data?.app?.appStates
+    ? getPreviousApplicationState(data.app.appStates)
+    : null;
 
   const [showRecreateModal, setShowRecreateModal] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
@@ -57,8 +56,8 @@ export default function ApplicationErrored() {
   const client = useApolloClient();
   const { currentDate } = useCurrentDate();
   const user = useUserData();
-  const isOwner = currentWorkspace.members.some(
-    ({ userId, type }) => userId === user?.id && type === 'owner',
+  const isOwner = currentWorkspace.workspaceMembers.some(
+    ({ id, type }) => id === user?.id && type === 'owner',
   );
 
   const { appCreatedAt } = useAppCreatedAt();
@@ -70,15 +69,15 @@ export default function ApplicationErrored() {
     try {
       await deleteApplication({
         variables: {
-          appId: currentApplication.id,
+          appId: currentProject.id,
         },
       });
 
-      triggerToast(`${currentApplication.name} deleted`);
+      triggerToast(`${currentProject?.name} deleted`);
     } catch (e) {
-      triggerToast(`Error deleting ${currentApplication.name}`);
+      triggerToast(`Error deleting ${currentProject?.name}`);
       discordAnnounce(
-        `Error deleting app: ${currentApplication.name} (${user.email})`,
+        `Error deleting app: ${currentProject?.name} (${user.email})`,
       );
       return;
     }
@@ -86,19 +85,19 @@ export default function ApplicationErrored() {
       await insertApp({
         variables: {
           app: {
-            name: currentApplication.name,
-            slug: currentApplication.slug,
-            planId: currentApplication.plan.id,
+            name: currentProject.name,
+            slug: currentProject.slug,
+            planId: currentProject.plan.id,
             workspaceId: currentWorkspace.id,
-            regionId: currentApplication.region.id,
+            regionId: currentProject.region.id,
           },
         },
       });
-      discordAnnounce(`Recreating: ${currentApplication.name} (${user.email})`);
-      triggerToast(`Recreating ${currentApplication.name} `);
+      discordAnnounce(`Recreating: ${currentProject?.name} (${user.email})`);
+      triggerToast(`Recreating ${currentProject?.name} `);
       await updateOwnCache(client);
     } catch (e) {
-      triggerToast(`Error trying to recreate: ${currentApplication.name}`);
+      triggerToast(`Error trying to recreate: ${currentProject?.name}`);
     }
   }
 
@@ -107,18 +106,18 @@ export default function ApplicationErrored() {
     try {
       await updateApplication({
         variables: {
-          appId: currentApplication.id,
+          appId: currentProject?.id,
           app: {
             desiredState: ApplicationStatus.Live,
           },
         },
       });
 
-      triggerToast(`${currentApplication.name} set to awake.`);
+      triggerToast(`${currentProject?.name} set to awake.`);
     } catch (e) {
-      triggerToast(`Error trying to awake ${currentApplication.name}`);
+      triggerToast(`Error trying to awake ${currentProject?.name}`);
       discordAnnounce(
-        `Error trying to awake app: ${currentApplication.name} (${user.email})`,
+        `Error trying to awake app: ${currentProject?.name} (${user.email})`,
       );
     }
   }
@@ -140,20 +139,6 @@ export default function ApplicationErrored() {
     await recreateApplication();
   }
 
-  useEffect(() => {
-    if (loading) {
-      return;
-    }
-    if (error) {
-      return;
-    }
-
-    const previousAcceptedState = getPreviousApplicationState(
-      data.app.appStates,
-    );
-    setPreviousState(previousAcceptedState);
-  }, [setPreviousState, data, loading, error]);
-
   if (loading || previousState === null) {
     return (
       <Container className="mx-auto mt-12 max-w-sm text-center">
@@ -170,19 +155,13 @@ export default function ApplicationErrored() {
     return null;
   }
 
-  if (previousState === ApplicationStatus.Live) {
-    return <ApplicationLive />;
-  }
-
-  // For now, if the application errored and the previous state to this error is an UPDATING state, we want to show the dashboard,
-  // it's likely that most services are up and we shouldn't block all functionality. In the future, we're going to have a way to
-  // redeploy the app again, and get to a healthy state. @GC
-  if (previousState === ApplicationStatus.Updating) {
-    return <ApplicationLive />;
-  }
-
-  if (previousState === ApplicationStatus.Empty) {
-    return <ApplicationUnknown />;
+  if (
+    previousState === ApplicationStatus.Updating ||
+    previousState === ApplicationStatus.Empty
+  ) {
+    return (
+      <ApplicationLive errorMessage="Error deploying the project most likely due to invalid configuration. Please review your project's configuration and logs for more information." />
+    );
   }
 
   return (
@@ -196,8 +175,8 @@ export default function ApplicationErrored() {
           // which instead of deleting just an application, it deletes and recreates.
           handler={recreateApplication}
           close={() => setShowRecreateModal(false)}
-          title={`Recreate project ${currentApplication.name}?`}
-          description={`The project ${currentApplication.name} will be removed and then re-created. All data will be lost and there will be no way to
+          title={`Recreate project ${currentProject.name}?`}
+          description={`The project ${currentProject?.name} will be removed and then re-created. All data will be lost and there will be no way to
           recover the app once it has been deleted.`}
         />
       </Modal>
@@ -208,8 +187,8 @@ export default function ApplicationErrored() {
       >
         <RemoveApplicationModal
           close={() => setShowDeleteModal(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
+          title={`Remove project ${currentProject.name}?`}
+          description={`The project ${currentProject?.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>

dashboard/src/components/applications/ApplicationInfo.tsx

@@ -1,36 +1,49 @@
 import {
-  GetOneUserDocument,
+  GetAllWorkspacesAndProjectsDocument,
   useDeleteApplicationMutation,
 } from '@/generated/graphql';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import Button from '@/ui/v2/Button';
 import ArrowRightIcon from '@/ui/v2/icons/ArrowRightIcon';
 import Link from '@/ui/v2/Link';
 import Text from '@/ui/v2/Text';
 import { copy } from '@/utils/copy';
 import { getApplicationStatusString } from '@/utils/helpers';
-import { triggerToast } from '@/utils/toast';
+import getServerError from '@/utils/settings/getServerError';
+import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import { formatDistance } from 'date-fns';
 import { useRouter } from 'next/router';
+import { toast } from 'react-hot-toast';
 
 export default function ApplicationInfo() {
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const [deleteApplication, { client }] = useDeleteApplicationMutation({
-    refetchQueries: [GetOneUserDocument],
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const [deleteApplication] = useDeleteApplicationMutation({
+    refetchQueries: [GetAllWorkspacesAndProjectsDocument],
   });
   const router = useRouter();
 
   async function handleClickRemove() {
-    await deleteApplication({
-      variables: {
-        appId: currentApplication.id,
-      },
-    });
-    await router.push('/');
-    await client.refetchQueries({
-      include: ['getOneUser'],
-    });
-    triggerToast(`${currentApplication.name} deleted`);
+    try {
+      await toast.promise(
+        deleteApplication({
+          variables: {
+            appId: currentProject.id,
+          },
+        }),
+        {
+          loading: 'Deleting project...',
+          success: 'The project has been deleted successfully.',
+          error: getServerError(
+            'An error occurred while deleting the project. Please try again.',
+          ),
+        },
+        getToastStyleProps(),
+      );
+
+      await router.push('/');
+    } catch {
+      // Note: The toast will handle the error.
+    }
   }
 
   return (
@@ -40,10 +53,10 @@ export default function ApplicationInfo() {
 
         <Button
           variant="borderless"
-          onClick={() => copy(currentApplication.id, 'Application ID')}
+          onClick={() => copy(currentProject.id, 'Application ID')}
           className="py-1 text-xs"
         >
-          {currentApplication.id}
+          {currentProject.id}
         </Button>
       </div>
 
@@ -54,27 +67,27 @@ export default function ApplicationInfo() {
           variant="borderless"
           onClick={() =>
             copy(
-              currentApplication.desiredState.toString(),
+              currentProject.desiredState.toString(),
               'Application Desired State',
             )
           }
           className="py-1 text-xs"
         >
-          {getApplicationStatusString(currentApplication.desiredState)}
+          {getApplicationStatusString(currentProject.desiredState)}
         </Button>
       </div>
 
       <div className="grid grid-flow-row gap-0.5">
         <Text variant="subtitle2">Region:</Text>
 
-        <Text variant="subtitle1">{currentApplication.region.city}</Text>
+        <Text variant="subtitle1">{currentProject.region.city}</Text>
       </div>
 
       <div className="grid grid-flow-row gap-0.5">
         <Text variant="subtitle2">Created:</Text>
 
         <Text variant="subtitle1">
-          {formatDistance(new Date(currentApplication.createdAt), new Date(), {
+          {formatDistance(new Date(currentProject.createdAt), new Date(), {
             addSuffix: true,
           })}
         </Text>
@@ -82,7 +95,7 @@ export default function ApplicationInfo() {
 
       <div className="grid grid-flow-row gap-2">
         <Link
-          href={`https://staging.nhost.run/console/data/default/schema/public/tables/app_state_history/browse?filter=app_id%3B%24eq%3B${currentApplication.id}`}
+          href={`https://staging.nhost.run/console/data/default/schema/public/tables/app_state_history/browse?filter=app_id%3B%24eq%3B${currentProject.id}`}
           target="_blank"
           rel="noreferrer noopener"
           className="grid grid-flow-col items-center justify-center gap-1 p-2"

dashboard/src/components/applications/ApplicationLive.tsx

@@ -1,29 +1,36 @@
 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 OverviewMetrics from '@/components/overview/OverviewMetrics/OverviewMetrics';
 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 { features } from '@/components/overview/features';
+import { frameworks } from '@/components/overview/frameworks';
 import useIsPlatform from '@/hooks/common/useIsPlatform';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { Alert } from '@/ui/Alert';
 import Divider from '@/ui/v2/Divider';
 
-export default function ApplicationLive() {
+export interface ApplicationLiveProps {
+  /**
+   * Error message to display in the alert.
+   */
+  errorMessage?: string;
+}
+
+export default function ApplicationLive({
+  errorMessage,
+}: ApplicationLiveProps) {
   const isPlatform = useIsPlatform();
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const isProjectUsingRDS = currentApplication?.featureFlags.some(
-    (feature) => feature.name === 'fleetcontrol_use_rds',
-  );
 
   if (!isPlatform) {
     return (
       <Container>
+        {errorMessage && <Alert severity="error">{errorMessage}</Alert>}
+
         <OverviewTopBar />
 
         <div className="grid grid-cols-1 gap-12 lg:grid-cols-3">
@@ -54,10 +61,17 @@ export default function ApplicationLive() {
   return (
     <Container>
       <MaintenanceAlert />
+
+      {errorMessage && <Alert severity="error">{errorMessage}</Alert>}
+
       <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">
+        <div className="grid grid-flow-row gap-12 lg:col-span-2">
+          <RetryableErrorBoundary>
+            <OverviewMetrics />
+          </RetryableErrorBoundary>
+
           <RetryableErrorBoundary>
             <OverviewDeployments />
           </RetryableErrorBoundary>
@@ -66,28 +80,38 @@ export default function ApplicationLive() {
             title="Pick your favorite framework and start learning"
             description="Nhost integrates smoothly with all of the frameworks you already know."
             cardElements={frameworks}
+            className="hidden lg:block"
           />
 
           <OverviewDocumentation
             title="Platform Documentation"
             description="More in-depth documentation for key features."
             cardElements={features}
+            className="hidden lg:block"
           />
         </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 />
-            </>
-          )}
+        <div className="grid grid-flow-row content-start gap-8 lg:col-span-1 lg:gap-12">
           <OverviewProjectInfo />
           <Divider />
           <OverviewRepository />
           <Divider />
           <OverviewUsage />
         </div>
+
+        <OverviewDocumentation
+          title="Pick your favorite framework and start learning"
+          description="Nhost integrates smoothly with all of the frameworks you already know."
+          cardElements={frameworks}
+          className="lg:hidden"
+        />
+
+        <OverviewDocumentation
+          title="Platform Documentation"
+          description="More in-depth documentation for key features."
+          cardElements={features}
+          className="lg:hidden"
+        />
       </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

@@ -3,54 +3,87 @@ 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 {
+  GetAllWorkspacesAndProjectsDocument,
+  useGetFreeAndActiveProjectsQuery,
+  useUnpauseApplicationMutation,
+} from '@/generated/graphql';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import { Modal } from '@/ui';
+import { Alert } from '@/ui/Alert';
+import ActivityIndicator from '@/ui/v2/ActivityIndicator';
+import Box from '@/ui/v2/Box';
 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 { MAX_FREE_PROJECTS } from '@/utils/CONSTANTS';
+import { getToastStyleProps } from '@/utils/settings/settingsConstants';
+import type { ApolloError } from '@apollo/client';
 import { useUserData } from '@nhost/nextjs';
 import Image from 'next/image';
 import { useState } from 'react';
+import { toast } from 'react-hot-toast';
 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 { openDialog } = useDialog();
+  const {
+    currentWorkspace,
+    currentProject,
+    refetch: refetchWorkspaceAndProject,
+  } = useCurrentWorkspaceAndProject();
+  const user = useUserData();
+  const isOwner = currentWorkspace.workspaceMembers.some(
+    ({ id, type }) => id === user?.id && type === 'owner',
   );
-  const isPro = currentApplication.plan.name === 'Pro';
   const [showDeletingModal, setShowDeletingModal] = useState(false);
+  const [unpauseApplication, { loading: changingApplicationStateLoading }] =
+    useUnpauseApplicationMutation({
+      refetchQueries: [GetAllWorkspacesAndProjectsDocument],
+    });
+
+  const { data, loading } = useGetFreeAndActiveProjectsQuery({
+    variables: { userId: user?.id },
+    fetchPolicy: 'cache-and-network',
+    skip: !user,
+  });
+
+  const numberOfFreeAndLiveProjects = data?.freeAndActiveProjects.length || 0;
+  const wakeUpDisabled = numberOfFreeAndLiveProjects >= MAX_FREE_PROJECTS;
 
   async function handleTriggerUnpausing() {
-    setChangingApplicationStateLoading(true);
     try {
-      await updateApplication({
-        variables: {
-          appId: currentApplication.id,
-          app: {
-            desiredState: ApplicationStatus.Live,
+      await toast.promise(
+        unpauseApplication({ variables: { appId: currentProject.id } }),
+        {
+          loading: 'Starting the project...',
+          success: `The project has been started successfully.`,
+          error: (arg: ApolloError) => {
+            // we need to get the internal error message from the GraphQL error
+            const { internal } = arg.graphQLErrors[0]?.extensions || {};
+            const { message } = (internal as Record<string, any>)?.error || {};
+
+            // we use the default Apollo error message if we can't find the
+            // internal error message
+            return (
+              message ||
+              arg.message ||
+              'An error occurred while waking up the project. Please try again.'
+            );
           },
         },
-      });
-      await updateOwnCache(client);
-      discordAnnounce(
-        `App ${currentApplication.name} (${email}) set to awake.`,
+        getToastStyleProps(),
       );
-      triggerToast(`${currentApplication.name} set to awake.`);
-    } catch (e) {
-      triggerToast(`Error trying to awake ${currentApplication.name}`);
+
+      await refetchWorkspaceAndProject();
+    } catch {
+      // Note: The toast will handle the error.
     }
   }
+
+  if (loading) {
+    return <ActivityIndicator label="Loading user data..." delay={1000} />;
+  }
+
   return (
     <>
       <Modal
@@ -59,13 +92,13 @@ export default function ApplicationPaused() {
       >
         <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
+          title={`Remove project ${currentProject.name}?`}
+          description={`The project ${currentProject.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">
+      <Container className="mx-auto mt-20 grid max-w-lg grid-flow-row gap-4 text-center">
         <div className="mx-auto flex w-centImage flex-col text-center">
           <Image
             src="/assets/PausedApp.svg"
@@ -75,22 +108,24 @@ export default function ApplicationPaused() {
           />
         </div>
 
-        <Text variant="h3" component="h1" className="mt-4">
-          {currentApplication.name} is sleeping
-        </Text>
+        <Box className="grid grid-flow-row gap-1">
+          <Text variant="h3" component="h1">
+            {currentProject.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>
+          <Text>
+            Starter projects stop responding to API calls after 7 days of
+            inactivity. Upgrade to Pro to avoid autosleep.
+          </Text>
+        </Box>
 
-        {!isPro && (
+        <Box className="grid grid-flow-row gap-2">
           <Button
             className="mx-auto w-full max-w-[280px]"
             onClick={() => {
-              openAlertDialog({
+              openDialog({
                 title: 'Upgrade your plan.',
-                payload: <ChangePlanModal />,
+                component: <ChangePlanModal />,
                 props: {
                   PaperProps: { className: 'p-0' },
                   hidePrimaryAction: true,
@@ -101,32 +136,41 @@ export default function ApplicationPaused() {
               });
             }}
           >
-            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
+            Upgrade to Pro
           </Button>
 
-          {isOwner && (
+          <div className="grid grid-flow-row gap-2">
             <Button
-              color="error"
               variant="borderless"
               className="mx-auto w-full max-w-[280px]"
-              onClick={() => setShowDeletingModal(true)}
+              loading={changingApplicationStateLoading}
+              disabled={changingApplicationStateLoading || wakeUpDisabled}
+              onClick={handleTriggerUnpausing}
             >
-              Delete Project
+              Wake Up
             </Button>
-          )}
-        </div>
+
+            {wakeUpDisabled && (
+              <Alert severity="warning" className="mx-auto max-w-xs text-left">
+                Note: Only one free project can be active at any given time.
+                Please pause your active free project before unpausing{' '}
+                {currentProject.name}.
+              </Alert>
+            )}
+
+            {isOwner && (
+              <Button
+                color="error"
+                variant="borderless"
+                className="mx-auto w-full max-w-[280px]"
+                onClick={() => setShowDeletingModal(true)}
+              >
+                Delete Project
+              </Button>
+            )}
+          </div>
+        </Box>
+
         <StagingMetadata>
           <ApplicationInfo />
         </StagingMetadata>

dashboard/src/components/applications/ApplicationProvisioning.tsx

@@ -1,17 +1,17 @@
 import Container from '@/components/layout/Container';
 import { useCheckProvisioning } from '@/hooks/useCheckProvisioning';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 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 ApplicationInfo from './ApplicationInfo';
 import { StagingMetadata } from './StagingMetadata';
 
 export default function ApplicationProvisioning() {
-  const currentApplicationState = useCheckProvisioning();
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const currentProjectState = useCheckProvisioning();
+  const { currentProject } = useCurrentWorkspaceAndProject();
 
   return (
     <Container className="mx-auto mt-8 grid max-w-sm grid-flow-row gap-4 text-center">
@@ -24,16 +24,16 @@ export default function ApplicationProvisioning() {
         />
       </div>
 
-      {currentApplicationState.state === ApplicationStatus.Empty ? (
+      {currentProjectState.state === ApplicationStatus.Empty ? (
         <div className="grid grid-flow-row gap-1">
           <Text variant="h3" component="h1">
-            Setting Up {currentApplication.name}
+            Setting Up {currentProject.name}
           </Text>
           <Text>This normally takes around 2 minutes</Text>
           <ActivityIndicator className="mx-auto" />
         </div>
       ) : (
-        <AppLoader startLoader date={currentApplicationState.createdAt} />
+        <AppLoader startLoader date={currentProjectState.createdAt} />
       )}
 
       <StagingMetadata>

dashboard/src/components/applications/ApplicationRestoring.tsx

@@ -1,17 +1,17 @@
 import Container from '@/components/layout/Container';
 import { useCheckProvisioning } from '@/hooks/useCheckProvisioning';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 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 ApplicationInfo from './ApplicationInfo';
 import { StagingMetadata } from './StagingMetadata';
 
 export default function ApplicationRestoring() {
-  const currentApplicationState = useCheckProvisioning();
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const currentProjectState = useCheckProvisioning();
+  const { currentProject } = useCurrentWorkspaceAndProject();
 
   return (
     <Container className="mx-auto mt-8 grid max-w-sm grid-flow-row gap-4 text-center">
@@ -23,10 +23,10 @@ export default function ApplicationRestoring() {
           height={72}
         />
       </div>
-      {currentApplicationState.state === ApplicationStatus.Empty ? (
+      {currentProjectState.state === ApplicationStatus.Empty ? (
         <div className="grid grid-flow-row gap-1">
           <Text variant="h3" component="h1">
-            Setting Up {currentApplication.name}
+            Setting Up {currentProject.name}
           </Text>
 
           <Text>This normally takes around 2 minutes</Text>
@@ -34,11 +34,7 @@ export default function ApplicationRestoring() {
           <ActivityIndicator className="mx-auto" />
         </div>
       ) : (
-        <AppLoader
-          startLoader
-          restoring
-          date={currentApplicationState.createdAt}
-        />
+        <AppLoader startLoader restoring date={currentProjectState.createdAt} />
       )}
       <StagingMetadata>
         <ApplicationInfo />

dashboard/src/components/applications/ApplicationUnknown.tsx

@@ -1,6 +1,6 @@
 import FeedbackForm from '@/components/common/FeedbackForm';
 import Container from '@/components/layout/Container';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import { Modal } from '@/ui/Modal';
 import Button from '@/ui/v2/Button';
 import { Dropdown } from '@/ui/v2/Dropdown';
@@ -13,12 +13,11 @@ import { RemoveApplicationModal } from './RemoveApplicationModal';
 import { StagingMetadata } from './StagingMetadata';
 
 export default function ApplicationUnknown() {
-  const { currentWorkspace, currentApplication } =
-    useCurrentWorkspaceAndApplication();
+  const { currentWorkspace, currentProject } = useCurrentWorkspaceAndProject();
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const user = useUserData();
-  const isOwner = currentWorkspace.members.some(
-    ({ userId, type }) => userId === user?.id && type === 'owner',
+  const isOwner = currentWorkspace.workspaceMembers.some(
+    ({ id, type }) => id === user?.id && type === 'owner',
   );
 
   return (
@@ -29,8 +28,8 @@ export default function ApplicationUnknown() {
       >
         <RemoveApplicationModal
           close={() => setShowDeleteModal(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
+          title={`Remove project ${currentProject.name}?`}
+          description={`The project ${currentProject.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>

dashboard/src/components/applications/ChangePlanModal.tsx

@@ -5,9 +5,9 @@ import {
   refetchGetApplicationPlanQuery,
   useGetAppPlanAndGlobalPlansQuery,
   useGetPaymentMethodsQuery,
-  useUpdateAppMutation,
+  useUpdateApplicationMutation,
 } from '@/generated/graphql';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import { Modal } from '@/ui/Modal';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Box from '@/ui/v2/Box';
@@ -32,12 +32,12 @@ function Plan({
   return (
     <button
       type="button"
-      className="my-4 grid w-full grid-flow-col items-center justify-between px-1"
+      className="my-4 grid w-full grid-flow-col items-center justify-between gap-2 px-1"
       onClick={setPlan}
       tabIndex={-1}
     >
       <div className="grid grid-flow-row gap-y-0.5">
-        <div className="flex flex-row items-center">
+        <div className="grid grid-flow-col items-center justify-start gap-2">
           <Checkbox
             onChange={setPlan}
             checked={selectedPlanId === planId}
@@ -47,12 +47,13 @@ function Plan({
           <Text
             variant="h3"
             component="p"
-            className="ml-2 self-center font-medium"
+            className="self-center text-left font-medium"
           >
             {currentPlan.price > price ? 'Downgrade' : 'Upgrade'} to {planName}
           </Text>
         </div>
-        <Text variant="subtitle2" className="w-64 text-start">
+
+        <Text variant="subtitle2" className="w-full max-w-[256px] text-start">
           {planDescriptions[planName]}
         </Text>
       </div>
@@ -69,14 +70,14 @@ export function ChangePlanModalWithData({ app, plans, close }: any) {
   const [selectedPlanId, setSelectedPlanId] = useState('');
   const { closeAlertDialog } = useDialog();
 
-  const { currentWorkspace, currentApplication } =
-    useCurrentWorkspaceAndApplication();
+  const { currentWorkspace, currentProject } = useCurrentWorkspaceAndProject();
 
   // get workspace payment methods
   const { data } = useGetPaymentMethodsQuery({
     variables: {
-      workspaceId: currentWorkspace.id,
+      workspaceId: currentWorkspace?.id,
     },
+    skip: !currentWorkspace,
   });
 
   const { openPaymentModal, closePaymentModal, paymentModal } = useUI();
@@ -88,11 +89,11 @@ export function ChangePlanModalWithData({ app, plans, close }: any) {
   const isDowngrade = currentPlan.price > selectedPlan?.price;
 
   // graphql mutations
-  const [updateApp] = useUpdateAppMutation({
+  const [updateApp] = useUpdateApplicationMutation({
     refetchQueries: [
       refetchGetApplicationPlanQuery({
         workspace: currentWorkspace.slug,
-        slug: currentApplication.slug,
+        slug: currentProject.slug,
       }),
     ],
   });
@@ -101,7 +102,7 @@ export function ChangePlanModalWithData({ app, plans, close }: any) {
   const handleUpdateAppPlan = async () => {
     await updateApp({
       variables: {
-        id: app.id,
+        appId: app.id,
         app: {
           planId: selectedPlan.id,
         },
@@ -117,7 +118,7 @@ export function ChangePlanModalWithData({ app, plans, close }: any) {
     }
 
     triggerToast(
-      `${currentApplication.name} plan changed to ${selectedPlan.name}.`,
+      `${currentProject.name} plan changed to ${selectedPlan.name}.`,
     );
   };
 
@@ -142,7 +143,7 @@ export function ChangePlanModalWithData({ app, plans, close }: any) {
   };
 
   return (
-    <Box className="w-welcome rounded-lg p-6 text-left">
+    <Box className="w-full max-w-xl rounded-lg p-6 text-left">
       <Modal
         showModal={paymentModal}
         close={closePaymentModal}

dashboard/src/components/applications/HasuraData.tsx

@@ -1,6 +1,6 @@
 import { LoadingScreen } from '@/components/common/LoadingScreen';
 import useIsPlatform from '@/hooks/common/useIsPlatform';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
 import IconButton from '@/ui/v2/IconButton';
@@ -12,7 +12,7 @@ import generateAppServiceUrl, {
   defaultRemoteBackendSlugs,
 } from '@/utils/common/generateAppServiceUrl';
 import { copy } from '@/utils/copy';
-import { LOCAL_HASURA_URL } from '@/utils/env';
+import { getHasuraConsoleServiceUrl } from '@/utils/env';
 import Image from 'next/image';
 
 interface HasuraDataProps {
@@ -20,20 +20,20 @@ interface HasuraDataProps {
 }
 
 export function HasuraData({ close }: HasuraDataProps) {
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const { currentProject } = useCurrentWorkspaceAndProject();
   const isPlatform = useIsPlatform();
-  const projectAdminSecret = currentApplication?.config?.hasura.adminSecret;
+  const projectAdminSecret = currentProject?.config?.hasura.adminSecret;
 
-  if (!currentApplication?.subdomain || !projectAdminSecret) {
+  if (!currentProject?.subdomain || !projectAdminSecret) {
     return <LoadingScreen />;
   }
 
   const hasuraUrl =
     process.env.NEXT_PUBLIC_ENV === 'dev' || !isPlatform
-      ? `${LOCAL_HASURA_URL}/console`
+      ? `${getHasuraConsoleServiceUrl()}`
       : generateAppServiceUrl(
-          currentApplication?.subdomain,
-          currentApplication?.region.awsName,
+          currentProject?.subdomain,
+          currentProject?.region.awsName,
           'hasura',
           defaultLocalBackendSlugs,
           { ...defaultRemoteBackendSlugs, hasura: '/console' },

dashboard/src/components/applications/RemoveApplicationModal.tsx

@@ -1,12 +1,15 @@
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
 import Checkbox from '@/ui/v2/Checkbox';
 import Divider from '@/ui/v2/Divider';
 import Text from '@/ui/v2/Text';
+import {
+  GetAllWorkspacesAndProjectsDocument,
+  useDeleteApplicationMutation,
+} from '@/utils/__generated__/graphql';
 import { discordAnnounce } from '@/utils/discordAnnounce';
 import { triggerToast } from '@/utils/toast';
-import { useDeleteApplicationMutation } from '@/utils/__generated__/graphql';
 import router from 'next/router';
 import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
@@ -42,13 +45,15 @@ export function RemoveApplicationModal({
   description,
   className,
 }: RemoveApplicationModalProps) {
-  const [deleteApplication, { client }] = useDeleteApplicationMutation();
+  const [deleteApplication] = useDeleteApplicationMutation({
+    refetchQueries: [GetAllWorkspacesAndProjectsDocument],
+  });
   const [loadingRemove, setLoadingRemove] = useState(false);
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const { currentProject } = useCurrentWorkspaceAndProject();
 
   const [remove, setRemove] = useState(false);
   const [remove2, setRemove2] = useState(false);
-  const appName = currentApplication?.name;
+  const appName = currentProject?.name;
 
   async function handleClick() {
     setLoadingRemove(true);
@@ -65,7 +70,7 @@ export function RemoveApplicationModal({
     try {
       await deleteApplication({
         variables: {
-          appId: currentApplication.id,
+          appId: currentProject.id,
         },
       });
     } catch (error) {
@@ -73,10 +78,7 @@ export function RemoveApplicationModal({
     }
     close();
     await router.push('/');
-    await client.refetchQueries({
-      include: ['getOneUser'],
-    });
-    triggerToast(`${currentApplication.name} deleted`);
+    triggerToast(`${currentProject.name} deleted`);
   }
 
   return (

dashboard/src/components/applications/RenderWorkspacesWithApps.tsx

@@ -1,166 +0,0 @@
-import DeploymentStatusMessage from '@/components/deployments/DeploymentStatusMessage';
-import { FindOldApps } from '@/components/home';
-import type { UserData } from '@/hooks/useGetAllUserWorkspacesAndApplications';
-import type { ApplicationState } from '@/types/application';
-import { ApplicationStatus } from '@/types/application';
-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 { getApplicationStatusString } from '@/utils/helpers';
-import Image from 'next/image';
-import NavLink from 'next/link';
-import { Fragment } from 'react';
-
-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 [latestDeployment] = app.deployments;
-
-                  return (
-                    <Fragment key={app.slug}>
-                      <ListItem.Root
-                        secondaryAction={
-                          <div className="grid grid-flow-col gap-px">
-                            {latestDeployment && (
-                              <div className="mr-2 flex self-center align-middle">
-                                <StatusCircle
-                                  status={
-                                    latestDeployment.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={
-                                <DeploymentStatusMessage
-                                  appCreatedAt={app.createdAt}
-                                  deployment={latestDeployment}
-                                />
-                              }
-                            />
-                          </ListItem.Button>
-                        </NavLink>
-                      </ListItem.Root>
-
-                      {index < workspaceProjects.length - 1 && (
-                        <Divider component="li" />
-                      )}
-                    </Fragment>
-                  );
-                })}
-              </List>
-            </div>
-          );
-        })}
-      <FindOldApps />
-    </div>
-  );
-}

dashboard/src/components/applications/RestoreBackupModal.tsx

@@ -1,10 +1,10 @@
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 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 { triggerToast } from '@/utils/toast';
 import { useRestoreApplicationDatabaseMutation } from '@/utils/__generated__/graphql';
+import { triggerToast } from '@/utils/toast';
 import { formatISO9075 } from 'date-fns';
 import { useState } from 'react';
 
@@ -28,7 +28,7 @@ export function RestoreBackupModal({
 
   const [isSure, setIsSure] = useState(false);
   const [mutationIsCompleted, setMutationIsCompleted] = useState(false);
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const { currentProject } = useCurrentWorkspaceAndProject();
 
   const [restoreApplicationDatabase, { loading }] =
     useRestoreApplicationDatabaseMutation();
@@ -39,7 +39,7 @@ export function RestoreBackupModal({
       await restoreApplicationDatabase({
         variables: {
           backupId,
-          appId: currentApplication.id,
+          appId: currentProject.id,
         },
       });
     } catch (error) {
@@ -53,9 +53,9 @@ export function RestoreBackupModal({
 
   if (mutationIsCompleted) {
     return (
-      <Box className="w-modal p-6 rounded-lg">
+      <Box className="w-modal rounded-lg p-6">
         <div className="flex flex-col">
-          <Text className="text-center font-medium text-lg">
+          <Text className="text-center text-lg font-medium">
             The backup has been restored successfully.
           </Text>
 
@@ -68,7 +68,7 @@ export function RestoreBackupModal({
   }
 
   return (
-    <Box className="w-modal px-6 py-6 text-left rounded-lg">
+    <Box className="w-modal rounded-lg px-6 py-6 text-left">
       <div className="flex flex-col">
         <Text className="text-center text-lg font-medium">
           Restore Database Backup

dashboard/src/components/applications/StagingMetadata.tsx

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

dashboard/src/components/applications/UnlockFeatureByUpgrading.tsx

@@ -19,7 +19,7 @@ export function UnlockFeatureByUpgrading({
   className,
   ...props
 }: UnlockFeatureByUpgradingProps) {
-  const { openAlertDialog } = useDialog();
+  const { openDialog } = useDialog();
 
   return (
     <div className={twMerge('flex', className)} {...props}>
@@ -29,15 +29,14 @@ export function UnlockFeatureByUpgrading({
         <Button
           variant="borderless"
           onClick={() => {
-            openAlertDialog({
+            openDialog({
               title: 'Upgrade your plan.',
-              payload: <ChangePlanModal />,
+              component: <ChangePlanModal />,
               props: {
-                PaperProps: { className: 'p-0' },
+                PaperProps: { className: 'p-0 max-w-xl w-full' },
                 hidePrimaryAction: true,
                 hideSecondaryAction: true,
                 hideTitle: true,
-                maxWidth: 'lg',
               },
             });
           }}

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

@@ -1,5 +1,5 @@
 import type { ConnectGithubModalState } from '@/components/applications/ConnectGithubModal';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import { FormProvider, useForm } from 'react-hook-form';
 import { EditRepositorySettingsModal } from './EditRepositorySettingsModal';
 
@@ -21,13 +21,13 @@ export function EditRepositorySettings({
   selectedRepoId,
   handleSelectAnotherRepository,
 }: EditRepositorySettingsProps) {
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const { currentProject } = useCurrentWorkspaceAndProject();
 
   const form = useForm<EditRepositorySettingsFormData>({
     reValidateMode: 'onSubmit',
     defaultValues: {
-      productionBranch: currentApplication.repositoryProductionBranch || 'main',
-      repoBaseFolder: currentApplication.nhostBaseFolder,
+      productionBranch: currentProject?.repositoryProductionBranch || 'main',
+      repoBaseFolder: currentProject?.nhostBaseFolder,
     },
   });
 

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

@@ -2,8 +2,8 @@ import type { EditRepositorySettingsFormData } from '@/components/applications/g
 import { useDialog } from '@/components/common/DialogProvider';
 import ErrorBoundaryFallback from '@/components/common/ErrorBoundaryFallback';
 import GithubIcon from '@/components/icons/GithubIcon';
-import { useUpdateAppMutation } from '@/generated/graphql';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useUpdateApplicationMutation } from '@/generated/graphql';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import Button from '@/ui/v2/Button';
 import Text from '@/ui/v2/Text';
 import { discordAnnounce } from '@/utils/discordAnnounce';
@@ -27,9 +27,9 @@ export function EditRepositorySettingsModal({
   const isNotCompleted = !watch('productionBranch') || !watch('repoBaseFolder');
   const { closeAlertDialog } = useDialog();
 
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const { currentProject } = useCurrentWorkspaceAndProject();
 
-  const [updateApp, { loading }] = useUpdateAppMutation();
+  const [updateApp, { loading }] = useUpdateApplicationMutation();
 
   const client = useApolloClient();
 
@@ -37,10 +37,10 @@ export function EditRepositorySettingsModal({
     data: EditRepositorySettingsFormData,
   ) => {
     try {
-      if (!currentApplication.githubRepository || selectedRepoId) {
+      if (!currentProject.githubRepository || selectedRepoId) {
         await updateApp({
           variables: {
-            id: currentApplication.id,
+            appId: currentProject.id,
             app: {
               githubRepositoryId: selectedRepoId,
               repositoryProductionBranch: data.productionBranch,
@@ -51,7 +51,7 @@ export function EditRepositorySettingsModal({
       } else {
         await updateApp({
           variables: {
-            id: currentApplication.id,
+            appId: currentProject.id,
             app: {
               repositoryProductionBranch: data.productionBranch,
               nhostBaseFolder: data.repoBaseFolder,
@@ -69,7 +69,7 @@ export function EditRepositorySettingsModal({
       triggerToast('GitHub repository settings successfully updated.');
     } catch (error) {
       await discordAnnounce(
-        `Error while trying to edit repository GitHub integration: ${currentApplication.slug}.`,
+        `Error while trying to edit repository GitHub integration: ${currentProject.slug}.`,
       );
       throw error;
     }

dashboard/src/components/applications/graphql/UserSelect.tsx

@@ -1,4 +1,5 @@
 import { useRemoteApplicationGQLClient } from '@/hooks/useRemoteApplicationGQLClient';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Option from '@/ui/v2/Option';
 import Select from '@/ui/v2/Select';
@@ -18,10 +19,12 @@ export interface UserSelectProps {
 }
 
 export function UserSelect({ onUserChange, ...props }: UserSelectProps) {
+  const { currentProject } = useCurrentWorkspaceAndProject();
   const userApplicationClient = useRemoteApplicationGQLClient();
   const { data, loading, error } = useRemoteAppGetUsersCustomQuery({
     client: userApplicationClient,
     variables: { where: {}, limit: 250, offset: 0 },
+    skip: !currentProject,
   });
 
   if (loading) {
@@ -36,8 +39,6 @@ export function UserSelect({ onUserChange, ...props }: UserSelectProps) {
     throw error;
   }
 
-  const { users } = data;
-
   return (
     <Select
       {...props}
@@ -57,7 +58,7 @@ export function UserSelect({ onUserChange, ...props }: UserSelectProps) {
           return;
         }
 
-        const user: RemoteAppGetUsersCustomQuery['users'][0] = users.find(
+        const user: RemoteAppGetUsersCustomQuery['users'][0] = data?.users.find(
           ({ id }) => id === userId,
         );
 
@@ -68,7 +69,7 @@ export function UserSelect({ onUserChange, ...props }: UserSelectProps) {
     >
       <Option value="admin">Admin</Option>
 
-      {users.map(({ id, displayName, email, phoneNumber }) => (
+      {data?.users.map(({ id, displayName, email, phoneNumber }) => (
         <Option key={id} value={id}>
           {displayName || email || phoneNumber || id}
         </Option>

dashboard/src/components/billing-payment-method/BillingPaymentMethodForm.tsx

@@ -22,7 +22,9 @@ import {
 import { loadStripe } from '@stripe/stripe-js';
 import React, { useState } from 'react';
 
-const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PK!);
+const stripePromise = process.env.NEXT_PUBLIC_STRIPE_PK
+  ? loadStripe(process.env.NEXT_PUBLIC_STRIPE_PK)
+  : null;
 
 type AddPaymentMethodFormProps = {
   close: () => void;
@@ -74,7 +76,8 @@ function AddPaymentMethodForm({
 
       if (createPaymentMethodError) {
         throw new Error(
-          createPaymentMethodError.message || 'Unknown error occurred.',
+          createPaymentMethodError.message ||
+            'An unknown error occurred. Please try again.',
         );
       }
 
@@ -88,7 +91,10 @@ function AddPaymentMethodForm({
       );
 
       if (attachPaymentMethodError) {
-        throw Error((attachPaymentMethodError as any).response.data);
+        throw new Error(
+          (attachPaymentMethodError as any)?.response?.data ||
+            'An unknown error occurred. Please try again.',
+        );
       }
 
       // update workspace with new country code in database
@@ -149,7 +155,7 @@ function AddPaymentMethodForm({
   };
 
   return (
-    <Box className="w-modal2 px-6 pt-6 pb-6 text-left rounded-lg">
+    <Box className="w-modal2 rounded-lg px-6 pt-6 pb-6 text-left">
       <div className="flex flex-col">
         <form onSubmit={handleSubmit}>
           <Text className="text-center text-lg font-medium">
@@ -201,7 +207,7 @@ function AddPaymentMethodForm({
 
 type BillingPaymentMethodFormProps = {
   close: () => void;
-  onPaymentMethodAdded?: () => Promise<void>;
+  onPaymentMethodAdded?: (e?: any) => Promise<void>;
   workspaceId: string;
 };
 

dashboard/src/components/common/Breadcrumbs/Breadcrumbs.tsx

@@ -1,6 +1,6 @@
 import NavLink from '@/components/common/NavLink';
 import useIsPlatform from '@/hooks/common/useIsPlatform';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import type { BoxProps } from '@/ui/v2/Box';
 import Box from '@/ui/v2/Box';
 import Text from '@/ui/v2/Text';
@@ -10,8 +10,7 @@ export interface BreadcrumbsProps extends BoxProps {}
 
 export default function Breadcrumbs({ className, ...props }: BreadcrumbsProps) {
   const isPlatform = useIsPlatform();
-  const { currentWorkspace, currentApplication } =
-    useCurrentWorkspaceAndApplication();
+  const { currentWorkspace, currentProject } = useCurrentWorkspaceAndProject();
 
   if (!isPlatform) {
     return (
@@ -61,16 +60,16 @@ export default function Breadcrumbs({ className, ...props }: BreadcrumbsProps) {
         </>
       )}
 
-      {currentApplication && (
+      {currentProject && (
         <>
           <Text color="disabled">/</Text>
 
           <NavLink
-            href={`/${currentWorkspace.slug}/${currentApplication.slug}`}
+            href={`/${currentWorkspace.slug}/${currentProject.slug}`}
             className="truncate text-[13px] hover:underline sm:text-sm"
             sx={{ color: 'text.primary' }}
           >
-            {currentApplication.name}
+            {currentProject.name}
           </NavLink>
         </>
       )}

dashboard/src/components/common/DataGridDateCell/DataGridDateCell.tsx

@@ -46,7 +46,7 @@ export default function DataGridDateCell<TData extends object>({
       : undefined;
 
   const { year, month, day, hour, minute, second } = getDateComponents(date, {
-    adjustTimezone: specificType === 'timetz' || specificType === 'timestamptz',
+    adjustTimezone: ['date', 'timetz', 'timestamptz'].includes(specificType),
   });
 
   const { inputRef, focusCell, isEditing, cancelEditCell } =

dashboard/src/components/common/DataGridPreviewCell/DataGridPreviewCell.tsx

@@ -3,7 +3,7 @@ import { FileIcon } from '@/components/icons/FileIcon';
 import PDFPreview from '@/components/icons/PDFPreview';
 import VideoPreview from '@/components/icons/VideoPreview';
 import { useAppClient } from '@/hooks/useAppClient';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import { Modal } from '@/ui/Modal';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Box from '@/ui/v2/Box';
@@ -166,7 +166,7 @@ export default function DataGridPreviewCell<TData extends object>({
   value: { fetchBlob, id, mimeType, alt, blob },
   fallbackPreview = null,
 }: DataGridPreviewCellProps<TData>) {
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const { currentProject } = useCurrentWorkspaceAndProject();
   const appClient = useAppClient();
   const { objectUrl, loading, error } = useBlob({ fetchBlob, blob, mimeType });
   const [showModal, setShowModal] = useState(false);
@@ -205,7 +205,7 @@ export default function DataGridPreviewCell<TData extends object>({
     }
 
     const { presignedUrl } = await appClient.storage
-      .setAdminSecret(currentApplication.config?.hasura.adminSecret)
+      .setAdminSecret(currentProject?.config?.hasura.adminSecret)
       .getPresignedUrl({ fileId: id });
 
     if (!presignedUrl) {

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

@@ -3,7 +3,6 @@ import FeedbackForm from '@/components/common/FeedbackForm';
 import NavLink from '@/components/common/NavLink';
 import ThemeSwitcher from '@/components/common/ThemeSwitcher';
 import { Nav } from '@/components/dashboard/Nav';
-import { useUserDataContext } from '@/context/workspace1-context';
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import useProjectRoutes from '@/hooks/common/useProjectRoutes';
 import { useNavigationVisible } from '@/hooks/useNavigationVisible';
@@ -19,6 +18,7 @@ import List from '@/ui/v2/List';
 import type { ListItemButtonProps } from '@/ui/v2/ListItem';
 import { ListItem } from '@/ui/v2/ListItem';
 import Text from '@/ui/v2/Text';
+import { useApolloClient } from '@apollo/client';
 import { useSignOut } from '@nhost/nextjs';
 import getConfig from 'next/config';
 import { useRouter } from 'next/router';
@@ -88,7 +88,7 @@ export default function MobileNav({ className, ...props }: MobileNavProps) {
   const [menuOpen, setMenuOpen] = useState(false);
   const [showChangePasswordModal, setShowChangePasswordModal] = useState(false);
   const { signOut } = useSignOut();
-  const { setUserContext } = useUserDataContext();
+  const apolloClient = useApolloClient();
   const router = useRouter();
   const { publicRuntimeConfig } = getConfig();
 
@@ -236,7 +236,7 @@ export default function MobileNav({ className, ...props }: MobileNavProps) {
                     setShowChangePasswordModal(true);
                   }}
                 >
-                  Change password
+                  Change Password
                 </ListItem.Button>
               </ListItem.Root>
 
@@ -248,13 +248,13 @@ export default function MobileNav({ className, ...props }: MobileNavProps) {
                   color="secondary"
                   className="justify-start border-none px-2 py-2.5 text-[16px]"
                   onClick={async () => {
-                    setUserContext({ workspaces: [] });
                     setMenuOpen(false);
+                    await apolloClient.clearStore();
                     await signOut();
                     await router.push('/signin');
                   }}
                 >
-                  Sign out
+                  Sign Out
                 </ListItem.Button>
               </ListItem.Root>
             </List>

dashboard/src/components/dashboard/AccountMenu.tsx

@@ -7,9 +7,8 @@ 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 { useSignOut, useUserData } from '@nhost/nextjs';
 import getConfig from 'next/config';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
@@ -22,8 +21,9 @@ function AccountMenuContent({
   onChangePasswordClick,
 }: AccountMenuContentProps) {
   const user = useUserData();
+  const { signOut } = useSignOut();
   const router = useRouter();
-  const client = useApolloClient();
+  const apolloClient = useApolloClient();
   const { handleClose } = useDropdown();
   const { publicRuntimeConfig } = getConfig();
 
@@ -37,12 +37,10 @@ function AccountMenuContent({
         />
 
         <Text variant="h3" component="h2" className="text-center">
-          {nhost.auth.getUser()?.displayName}
+          {user?.displayName}
         </Text>
 
-        <Text className="text-center font-medium">
-          {nhost.auth.getUser()?.email}
-        </Text>
+        <Text className="text-center font-medium">{user?.email}</Text>
       </div>
 
       <div className="grid grid-flow-row gap-2">
@@ -57,17 +55,13 @@ function AccountMenuContent({
           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();
+            await apolloClient.clearStore();
+            await signOut();
+            await router.push('/signin');
           }}
           endIcon={<PowerIcon className="mr-1 h-4 w-4" />}
         >

dashboard/src/components/dashboard/ContainerIndexApplications.tsx

@@ -1,13 +0,0 @@
-import type { ReactNode } from 'react';
-
-interface ContainerIndexApplicationsProps {
-  children?: ReactNode | ReactNode[];
-}
-
-export function ContainerIndexApplications({
-  children,
-}: ContainerIndexApplicationsProps) {
-  return <div className="flex flex-col font-display md:w-app">{children}</div>;
-}
-
-export default ContainerIndexApplications;

dashboard/src/components/dashboard/NoApplications.tsx

@@ -1,55 +0,0 @@
-import { useWorkspaceContext } from '@/context/workspace-context';
-import { useUserDataContext } from '@/context/workspace1-context';
-import Button from '@/ui/v2/Button';
-import Text from '@/ui/v2/Text';
-import { darken } from '@mui/system';
-import Link from 'next/link';
-
-export function NoApplications() {
-  const { userContext } = useUserDataContext();
-  const { workspaceContext } = useWorkspaceContext();
-
-  return (
-    <div className="noapps mt-4 h-80 rounded-md text-center font-display font-normal">
-      <div className="pt-12">
-        <Text
-          className="text-center text-2xl font-semibold"
-          sx={{ color: 'common.white' }}
-        >
-          Welcome to Nhost!
-        </Text>
-        <Text className="mt-2" sx={{ color: 'common.white' }}>
-          Let&apos;s set up your first backend - the Nhost way.
-        </Text>
-        <div className="inline-block pt-10">
-          <Link href="/new" passHref>
-            <Button
-              sx={{
-                backgroundColor: (theme) =>
-                  `${theme.palette.common.white} !important`,
-                color: (theme) => `${theme.palette.common.black} !important`,
-                '&:hover': {
-                  backgroundColor: (theme) =>
-                    `${darken(theme.palette.common.white, 0.1)} !important`,
-                },
-              }}
-              disabled={
-                !workspaceContext.id && userContext.workspaces.length === 0
-              }
-            >
-              Create Your First Project
-            </Button>
-          </Link>
-        </div>
-        <div>
-          <Text className="mt-9 opacity-40" sx={{ color: 'common.white' }}>
-            Looking for your old projects? They&apos;re still on
-            console.nhost.io during this beta.
-          </Text>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default NoApplications;

dashboard/src/components/dataBrowser/DataBrowserGrid/DataBrowserGrid.tsx

@@ -13,8 +13,8 @@ import useDeleteColumnWithToastMutation from '@/hooks/dataBrowser/useDeleteColum
 import useTableQuery from '@/hooks/dataBrowser/useTableQuery';
 import type { UpdateRecordVariables } from '@/hooks/dataBrowser/useUpdateRecordMutation';
 import useUpdateRecordWithToastMutation from '@/hooks/dataBrowser/useUpdateRecordMutation/useUpdateRecordWithToastMutation';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import useTablePath from '@/hooks/useTablePath';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import type {
   DataBrowserGridColumn,
   NormalizedQueryDataRow,
@@ -163,8 +163,8 @@ export default function DataBrowserGrid({
   const isSchemaEditable = !isSchemaLocked(schemaSlug as string);
   const { openDrawer, openAlertDialog } = useDialog();
 
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const isGitHubConnected = !!currentApplication?.githubRepository;
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const isGitHubConnected = !!currentProject?.githubRepository;
 
   const limit = 25;
   const [currentOffset, setCurrentOffset] = useState<number | null>(

dashboard/src/components/dataBrowser/DataBrowserGridControls/DataBrowserGridControls.tsx

@@ -2,8 +2,8 @@ import type { DataGridPaginationProps } from '@/components/common/DataGridPagina
 import DataGridPagination from '@/components/common/DataGridPagination';
 import { useDialog } from '@/components/common/DialogProvider';
 import useDeleteRecordMutation from '@/hooks/dataBrowser/useDeleteRecordMutation';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import useDataGridConfig from '@/hooks/useDataGridConfig';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import type { DataBrowserGridColumn } from '@/types/dataBrowser';
 import type { BoxProps } from '@/ui/v2/Box';
 import Box from '@/ui/v2/Box';
@@ -50,8 +50,8 @@ export default function DataBrowserGridControls({
   onInsertColumnClick,
   ...props
 }: DataBrowserGridControlsProps) {
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const isGitHubConnected = !!currentApplication?.githubRepository;
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const isGitHubConnected = !!currentProject?.githubRepository;
   const queryClient = useQueryClient();
   const { openAlertDialog } = useDialog();
 

dashboard/src/components/dataBrowser/DataBrowserSidebar/DataBrowserSidebar.tsx

@@ -6,7 +6,7 @@ import RetryableErrorBoundary from '@/components/common/RetryableErrorBoundary';
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import useDatabaseQuery from '@/hooks/dataBrowser/useDatabaseQuery';
 import useDeleteTableWithToastMutation from '@/hooks/dataBrowser/useDeleteTableMutation/useDeleteTableWithToastMutation';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import FloatingActionButton from '@/ui/FloatingActionButton';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Backdrop from '@/ui/v2/Backdrop';
@@ -74,8 +74,8 @@ function DataBrowserSidebarContent({
 }: Pick<DataBrowserSidebarProps, 'onSidebarItemClick'>) {
   const queryClient = useQueryClient();
   const { openDrawer, openAlertDialog } = useDialog();
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const isGitHubConnected = !!currentApplication?.githubRepository;
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const isGitHubConnected = !!currentProject?.githubRepository;
 
   const router = useRouter();
   const {
@@ -516,7 +516,7 @@ export default function DataBrowserSidebar({
   ...props
 }: DataBrowserSidebarProps) {
   const isPlatform = useIsPlatform();
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const { currentProject } = useCurrentWorkspaceAndProject();
 
   const [expanded, setExpanded] = useState(false);
 
@@ -547,7 +547,7 @@ export default function DataBrowserSidebar({
       document.removeEventListener('keydown', closeSidebarWhenEscapeIsPressed);
   }, []);
 
-  if (isPlatform && !currentApplication?.config?.hasura.adminSecret) {
+  if (isPlatform && !currentProject?.config?.hasura.adminSecret) {
     return null;
   }
 

dashboard/src/components/dataBrowser/EditPermissionsForm/EditPermissionsForm.tsx

@@ -1,8 +1,8 @@
 import { useDialog } from '@/components/common/DialogProvider';
 import useMetadataQuery from '@/hooks/dataBrowser/useMetadataQuery';
 import useTableQuery from '@/hooks/dataBrowser/useTableQuery';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import { useRemoteApplicationGQLClient } from '@/hooks/useRemoteApplicationGQLClient';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import type { DialogFormProps } from '@/types/common';
 import type {
   DatabaseAccessLevel,
@@ -13,9 +13,6 @@ import { Alert } from '@/ui/Alert';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
-import FullPermissionIcon from '@/ui/v2/icons/FullPermissionIcon';
-import NoPermissionIcon from '@/ui/v2/icons/NoPermissionIcon';
-import PartialPermissionIcon from '@/ui/v2/icons/PartialPermissionIcon';
 import Link from '@/ui/v2/Link';
 import Table from '@/ui/v2/Table';
 import TableBody from '@/ui/v2/TableBody';
@@ -24,6 +21,9 @@ import TableContainer from '@/ui/v2/TableContainer';
 import TableHead from '@/ui/v2/TableHead';
 import TableRow from '@/ui/v2/TableRow';
 import Text from '@/ui/v2/Text';
+import FullPermissionIcon from '@/ui/v2/icons/FullPermissionIcon';
+import NoPermissionIcon from '@/ui/v2/icons/NoPermissionIcon';
+import PartialPermissionIcon from '@/ui/v2/icons/PartialPermissionIcon';
 import { useGetRemoteAppRolesQuery } from '@/utils/__generated__/graphql';
 import NavLink from 'next/link';
 import { useState } from 'react';
@@ -61,8 +61,7 @@ export default function EditPermissionsForm({
   const [action, setAction] = useState<DatabaseAction>();
 
   const { closeDrawerWithDirtyGuard } = useDialog();
-  const { currentWorkspace, currentApplication } =
-    useCurrentWorkspaceAndApplication();
+  const { currentWorkspace, currentProject } = useCurrentWorkspaceAndProject();
 
   const client = useRemoteApplicationGQLClient();
   const {
@@ -330,7 +329,7 @@ export default function EditPermissionsForm({
           <Alert className="text-left">
             Please go to the{' '}
             <NavLink
-              href={`/${currentWorkspace.slug}/${currentApplication.slug}/settings/roles-and-permissions`}
+              href={`/${currentWorkspace.slug}/${currentProject.slug}/settings/roles-and-permissions`}
               passHref
             >
               <Link

dashboard/src/components/dataBrowser/EditPermissionsForm/sections/ColumnPresetsSection.tsx

@@ -1,18 +1,18 @@
 import ControlledSelect from '@/components/common/ControlledSelect';
 import type { RolePermissionEditorFormValues } from '@/components/dataBrowser/EditPermissionsForm/RolePermissionEditorForm';
 import useTableQuery from '@/hooks/dataBrowser/useTableQuery';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Autocomplete from '@/ui/v2/Autocomplete';
 import Button from '@/ui/v2/Button';
 import IconButton from '@/ui/v2/IconButton';
-import PlusIcon from '@/ui/v2/icons/PlusIcon';
-import XIcon from '@/ui/v2/icons/XIcon';
 import InputLabel from '@/ui/v2/InputLabel';
 import Option from '@/ui/v2/Option';
 import Text from '@/ui/v2/Text';
-import getAllPermissionVariables from '@/utils/settings/getAllPermissionVariables';
+import PlusIcon from '@/ui/v2/icons/PlusIcon';
+import XIcon from '@/ui/v2/icons/XIcon';
 import { useGetRolesPermissionsQuery } from '@/utils/__generated__/graphql';
+import getAllPermissionVariables from '@/utils/settings/getAllPermissionVariables';
 import { useTheme } from '@mui/material';
 import clsx from 'clsx';
 import { useFieldArray, useFormContext, useWatch } from 'react-hook-form';
@@ -50,10 +50,10 @@ export default function ColumnPresetsSection({
     error: tableError,
   } = useTableQuery([`default.${schema}.${table}`], { schema, table });
 
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const { currentProject } = useCurrentWorkspaceAndProject();
   const { data: permissionVariablesData } = useGetRolesPermissionsQuery({
-    variables: { appId: currentApplication?.id },
-    skip: !currentApplication?.id,
+    variables: { appId: currentProject?.id },
+    skip: !currentProject?.id,
   });
   const {
     setValue,

dashboard/src/components/dataBrowser/EditPermissionsForm/validationSchemas.ts

@@ -39,17 +39,17 @@ const ruleGroupSchema = Yup.object().shape({
 
 const baseValidationSchema = Yup.object().shape({
   filter: ruleGroupSchema.nullable().required('Please select a filter type.'),
-  columns: Yup.array().of(Yup.string()).nullable(true),
+  columns: Yup.array().of(Yup.string()).nullable(),
 });
 
 const selectValidationSchema = baseValidationSchema.shape({
   limit: Yup.number()
     .label('Limit')
     .min(0, 'Limit must not be negative.')
-    .nullable(true),
-  allowAggregations: Yup.boolean().nullable(true),
-  queryRootFields: Yup.array().of(Yup.string()).nullable(true),
-  subscriptionRootFields: Yup.array().of(Yup.string()).nullable(true),
+    .nullable(),
+  allowAggregations: Yup.boolean().nullable(),
+  queryRootFields: Yup.array().of(Yup.string()).nullable(),
+  subscriptionRootFields: Yup.array().of(Yup.string()).nullable(),
 });
 
 const columnPresetSchema = Yup.object().shape({
@@ -88,17 +88,17 @@ const columnPresetSchema = Yup.object().shape({
 });
 
 const insertValidationSchema = baseValidationSchema.shape({
-  backendOnly: Yup.boolean().nullable(true),
-  columnPresets: Yup.array().of(columnPresetSchema).nullable(true),
+  backendOnly: Yup.boolean().nullable(),
+  columnPresets: Yup.array().of(columnPresetSchema).nullable(),
 });
 
 const updateValidationSchema = baseValidationSchema.shape({
-  backendOnly: Yup.boolean().nullable(true),
-  columnPresets: Yup.array().of(columnPresetSchema).nullable(true),
+  backendOnly: Yup.boolean().nullable(),
+  columnPresets: Yup.array().of(columnPresetSchema).nullable(),
 });
 
 const deleteValidationSchema = baseValidationSchema.shape({
-  columnPresets: Yup.array().of(columnPresetSchema).nullable(true),
+  columnPresets: Yup.array().of(columnPresetSchema).nullable(),
 });
 
 const validationSchemas: Record<DatabaseAction, Yup.ObjectSchema<any>> = {

dashboard/src/components/dataBrowser/RuleGroupEditor/RuleGroupEditor.tsx

@@ -1,12 +1,12 @@
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import type { Rule, RuleGroup } from '@/types/dataBrowser';
 import { Alert } from '@/ui/Alert';
 import type { BoxProps } from '@/ui/v2/Box';
 import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
-import PlusIcon from '@/ui/v2/icons/PlusIcon';
 import Link from '@/ui/v2/Link';
 import Text from '@/ui/v2/Text';
+import PlusIcon from '@/ui/v2/icons/PlusIcon';
 import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
 import { useMemo } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
@@ -69,7 +69,7 @@ export default function RuleGroupEditor({
   sx,
   ...props
 }: RuleGroupEditorProps) {
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const { currentProject } = useCurrentWorkspaceAndProject();
   const form = useFormContext();
 
   const { control, getValues } = form;
@@ -127,7 +127,7 @@ export default function RuleGroupEditor({
           depth > 6 && { backgroundColor: 'secondary.800' },
         ]}
       >
-        <div className="grid grid-flow-row gap-4 lg:gap-2 py-4">
+        <div className="grid grid-flow-row gap-4 py-4 lg:gap-2">
           {(rules as (Rule & { id: string })[]).map((rule, ruleIndex) => (
             <div className="grid grid-cols-[70px_1fr] gap-2" key={rule.id}>
               <div>
@@ -188,13 +188,13 @@ export default function RuleGroupEditor({
               <Text>
                 This rule group contains one or more objects (e.g: _exists) that
                 are not supported by our dashboard yet.{' '}
-                {currentApplication && (
+                {currentProject && (
                   <span>
                     Please{' '}
                     <Link
                       href={`${generateAppServiceUrl(
-                        currentApplication.subdomain,
-                        currentApplication.region?.awsName,
+                        currentProject.subdomain,
+                        currentProject.region?.awsName,
                         'hasura',
                       )}/console/data/default/schema/${schema}/tables/${table}/permissions`}
                       underline="hover"
@@ -212,8 +212,8 @@ export default function RuleGroupEditor({
         </div>
 
         {!disabled && (
-          <div className="grid grid-flow-row lg:grid-flow-col lg:justify-between gap-2 pb-2">
-            <div className="grid grid-flow-row lg:grid-flow-col gap-2 lg:justify-start">
+          <div className="grid grid-flow-row gap-2 pb-2 lg:grid-flow-col lg:justify-between">
+            <div className="grid grid-flow-row gap-2 lg:grid-flow-col lg:justify-start">
               <Button
                 startIcon={<PlusIcon />}
                 variant="borderless"

dashboard/src/components/dataBrowser/RuleGroupEditor/RuleValueInput.tsx

@@ -3,15 +3,15 @@ import ControlledSelect from '@/components/common/ControlledSelect';
 import ReadOnlyToggle from '@/components/common/ReadOnlyToggle';
 import type { ColumnAutocompleteProps } from '@/components/dataBrowser/ColumnAutocomplete';
 import ColumnAutocomplete from '@/components/dataBrowser/ColumnAutocomplete';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import type { HasuraOperator } from '@/types/dataBrowser';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import type { AutocompleteOption } from '@/ui/v2/Autocomplete';
 import type { InputProps } from '@/ui/v2/Input';
 import { inputClasses } from '@/ui/v2/Input';
 import Option from '@/ui/v2/Option';
-import getAllPermissionVariables from '@/utils/settings/getAllPermissionVariables';
 import { useGetRolesPermissionsQuery } from '@/utils/__generated__/graphql';
+import getAllPermissionVariables from '@/utils/settings/getAllPermissionVariables';
 import { useController, useFormContext, useWatch } from 'react-hook-form';
 import useRuleGroupEditor from './useRuleGroupEditor';
 
@@ -96,7 +96,7 @@ export default function RuleValueInput({
   helperText,
 }: RuleValueInputProps) {
   const { schema, table, disabled } = useRuleGroupEditor();
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const { currentProject } = useCurrentWorkspaceAndProject();
   const { setValue } = useFormContext();
   const inputName = `${name}.value`;
   const operator: HasuraOperator = useWatch({ name: `${name}.operator` });
@@ -118,8 +118,8 @@ export default function RuleValueInput({
     loading,
     error: customClaimsError,
   } = useGetRolesPermissionsQuery({
-    variables: { appId: currentApplication?.id },
-    skip: !isHasuraInput || !currentApplication?.id,
+    variables: { appId: currentProject?.id },
+    skip: !isHasuraInput || !currentProject?.id,
   });
 
   if (operator === '_is_null') {

dashboard/src/components/deployments/DeploymentListItem/DeploymentListItem.tsx

@@ -1,19 +1,19 @@
 import NavLink from '@/components/common/NavLink';
 import AppDeploymentDuration from '@/components/deployments/AppDeploymentDuration';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import { Avatar } from '@/ui/Avatar';
 import type { DeploymentStatus } from '@/ui/StatusCircle';
 import { StatusCircle } from '@/ui/StatusCircle';
 import Button from '@/ui/v2/Button';
 import Chip from '@/ui/v2/Chip';
-import ArrowCounterclockwiseIcon from '@/ui/v2/icons/ArrowCounterclockwiseIcon';
-import ChevronRightIcon from '@/ui/v2/icons/ChevronRightIcon';
 import { ListItem } from '@/ui/v2/ListItem';
 import Tooltip from '@/ui/v2/Tooltip';
-import getServerError from '@/utils/settings/getServerError';
-import { getToastStyleProps } from '@/utils/settings/settingsConstants';
+import ArrowCounterclockwiseIcon from '@/ui/v2/icons/ArrowCounterclockwiseIcon';
+import ChevronRightIcon from '@/ui/v2/icons/ChevronRightIcon';
 import type { DeploymentRowFragment } from '@/utils/__generated__/graphql';
 import { useInsertDeploymentMutation } from '@/utils/__generated__/graphql';
+import getServerError from '@/utils/settings/getServerError';
+import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import { formatDistanceToNowStrict, parseISO } from 'date-fns';
 import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';
@@ -44,8 +44,7 @@ export default function DeploymentListItem({
   showRedeploy,
   disableRedeploy,
 }: DeploymentListItemProps) {
-  const { currentWorkspace, currentApplication } =
-    useCurrentWorkspaceAndApplication();
+  const { currentWorkspace, currentProject } = useCurrentWorkspaceAndProject();
 
   const relativeDateOfDeployment = deployment.deploymentStartedAt
     ? formatDistanceToNowStrict(parseISO(deployment.deploymentStartedAt), {
@@ -59,12 +58,12 @@ export default function DeploymentListItem({
   return (
     <ListItem.Root>
       <ListItem.Button
-        className="grid grid-flow-col items-center justify-between gap-2 rounded-none px-2 py-2"
+        className="grid grid-flow-col items-center justify-between gap-2 rounded-none p-2"
         component={NavLink}
-        href={`/${currentWorkspace.slug}/${currentApplication.slug}/deployments/${deployment.id}`}
+        href={`/${currentWorkspace.slug}/${currentProject.slug}/deployments/${deployment.id}`}
         aria-label={commitMessage || 'No commit message'}
       >
-        <div className="flex cursor-pointer flex-row items-center justify-center space-x-2 self-center">
+        <div className="grid grid-flow-col items-center justify-center gap-2 self-center">
           <ListItem.Avatar>
             <Avatar
               name={deployment.commitUserName}
@@ -85,7 +84,7 @@ export default function DeploymentListItem({
           />
         </div>
 
-        <div className="grid grid-flow-col items-center gap-2">
+        <div className="grid grid-flow-col items-center justify-end gap-2">
           {showRedeploy && (
             <Tooltip
               title={
@@ -108,7 +107,7 @@ export default function DeploymentListItem({
                   const insertDeploymentPromise = insertDeployment({
                     variables: {
                       object: {
-                        appId: currentApplication?.id,
+                        appId: currentProject?.id,
                         commitMessage: deployment.commitMessage,
                         commitSHA: deployment.commitSHA,
                         commitUserAvatarUrl: deployment.commitUserAvatarUrl,
@@ -142,16 +141,16 @@ export default function DeploymentListItem({
           )}
 
           {isLive && (
-            <div className="flex w-12 justify-end">
+            <div className="hidden w-12 justify-end sm:flex">
               <Chip size="small" color="success" label="Live" />
             </div>
           )}
 
-          <div className="w-16 text-right font-mono text-sm- font-medium">
+          <div className="hidden w-16 text-right font-mono text-sm- font-medium sm:block">
             {deployment.commitSHA.substring(0, 7)}
           </div>
 
-          <div className="w-[80px] text-right font-mono text-sm- font-medium">
+          <div className="text-right font-mono text-sm- font-medium sm:w-20">
             <AppDeploymentDuration
               startedAt={deployment.deploymentStartedAt}
               endedAt={deployment.deploymentEndedAt}

dashboard/src/components/deployments/DeploymentStatusMessage/DeploymentStatusMessage.tsx

@@ -45,14 +45,14 @@ export default function DeploymentStatusMessage({
 
   if (!isDeployingToProduction && deployment?.deploymentEndedAt) {
     return (
-      <span className="flex flex-row">
+      <span className="grid grid-flow-col">
         <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">
+        <Text component="span" className="self-center truncate text-sm">
           {deployment.commitUserName} deployed{' '}
           {formatDistance(new Date(deployment.deploymentEndedAt), new Date(), {
             addSuffix: true,

dashboard/src/components/files/FilesDataGrid/FilesDataGrid.tsx

@@ -9,12 +9,13 @@ import FilesDataGridControls from '@/components/files/FilesDataGridControls';
 import { FileIcon } from '@/components/icons/FileIcon';
 import { useAppClient } from '@/hooks/useAppClient';
 import useBuckets from '@/hooks/useBuckets';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import useFiles from '@/hooks/useFiles';
 import useFilesAggregate from '@/hooks/useFilesAggregate';
-import { showLoadingToast, triggerToast } from '@/utils/toast';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import type { Files } from '@/utils/__generated__/graphql';
 import { Order_By as OrderBy } from '@/utils/__generated__/graphql';
+import { getHasuraAdminSecret } from '@/utils/env';
+import { showLoadingToast, triggerToast } from '@/utils/toast';
 import debounce from 'lodash.debounce';
 import { useRouter } from 'next/router';
 import type { ChangeEvent } from 'react';
@@ -30,7 +31,7 @@ export type FilesDataGridProps = Partial<DataGridProps<StoredFile>>;
 
 export default function FilesDataGrid(props: FilesDataGridProps) {
   const router = useRouter();
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const { currentProject } = useCurrentWorkspaceAndProject();
   const appClient = useAppClient();
   const [searchString, setSearchString] = useState<string | null>(null);
   const [currentOffset, setCurrentOffset] = useState<number | null>(
@@ -261,8 +262,8 @@ export default function FilesDataGrid(props: FilesDataGridProps) {
       const { fileMetadata, error: fileError } = await appClient.storage
         .setAdminSecret(
           process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? 'nhost-admin-secret'
-            : currentApplication.config?.hasura.adminSecret,
+            ? getHasuraAdminSecret()
+            : currentProject.config?.hasura.adminSecret,
         )
         .upload({
           file,

dashboard/src/components/files/FilesDataGridControls/FilesDataGridControls.tsx

@@ -2,8 +2,8 @@ import type { DataGridPaginationProps } from '@/components/common/DataGridPagina
 import DataGridPagination from '@/components/common/DataGridPagination';
 import { useDialog } from '@/components/common/DialogProvider';
 import { useAppClient } from '@/hooks/useAppClient';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import useDataGridConfig from '@/hooks/useDataGridConfig';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import type { FileUploadButtonProps } from '@/ui/FileUploadButton';
 import FileUploadButton from '@/ui/FileUploadButton';
 import type { BoxProps } from '@/ui/v2/Box';
@@ -12,8 +12,9 @@ import Button from '@/ui/v2/Button';
 import Chip from '@/ui/v2/Chip';
 import type { InputProps } from '@/ui/v2/Input';
 import Input from '@/ui/v2/Input';
-import { triggerToast } from '@/utils/toast';
 import type { Files } from '@/utils/__generated__/graphql';
+import { getHasuraAdminSecret } from '@/utils/env';
+import { triggerToast } from '@/utils/toast';
 import type { PropsWithoutRef } from 'react';
 import { useState } from 'react';
 import type { Row } from 'react-table';
@@ -37,7 +38,7 @@ export default function FilesDataGridControls({
   ...props
 }: FilesDataGridControlsProps) {
   const { openAlertDialog } = useDialog();
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const { currentProject } = useCurrentWorkspaceAndProject();
   const appClient = useAppClient();
   const [deleteLoading, setDeleteLoading] = useState(false);
 
@@ -71,8 +72,8 @@ export default function FilesDataGridControls({
     try {
       const storageWithAdminSecret = appClient.storage.setAdminSecret(
         process.env.NEXT_PUBLIC_ENV === 'dev'
-          ? 'nhost-admin-secret'
-          : currentApplication.config?.hasura.adminSecret,
+          ? getHasuraAdminSecret()
+          : currentProject.config?.hasura.adminSecret,
       );
 
       // note: this is not an optimal solution, but we don't have a better way

dashboard/src/components/home/AllWorkspaceApplications.tsx

@@ -1,14 +0,0 @@
-import { RenderWorkspacesWithApps } from '@/components/applications/RenderWorkspacesWithApps';
-import type { UserData } from '@/hooks/useGetAllUserWorkspacesAndApplications';
-
-export function AllWorkspacesApplications({
-  userData,
-  query,
-}: {
-  userData: UserData | null;
-  query: string;
-}) {
-  return <RenderWorkspacesWithApps query={query} userData={userData} />;
-}
-
-export default AllWorkspacesApplications;

dashboard/src/components/home/Applications.tsx

@@ -1,47 +0,0 @@
-import { LoadingScreen } from '@/components/common/LoadingScreen';
-import { ContainerIndexApplications } from '@/components/dashboard/ContainerIndexApplications';
-import { NoApplications } from '@/components/dashboard/NoApplications';
-import { AllWorkspacesApplications } from '@/components/home/AllWorkspaceApplications';
-import { IndexHeaderApps } from '@/components/home/IndexHeaderApps';
-import { useUserDataContext } from '@/context/workspace1-context';
-import { useCheckApplications } from '@/hooks/useCheckApplications';
-import type { UserData } from '@/hooks/useGetAllUserWorkspacesAndApplications';
-import { useEffect, useState } from 'react';
-
-export function Applications() {
-  const [filtered, setFiltered] = useState<UserData | null>(null);
-  const [query, setQuery] = useState('');
-
-  const { userContext } = useUserDataContext();
-
-  useEffect(() => {
-    setFiltered(userContext);
-  }, [userContext]);
-
-  const { loading, error, noApplications } = useCheckApplications();
-
-  if (loading) {
-    return <LoadingScreen />;
-  }
-
-  if (error) {
-    throw error;
-  }
-
-  if (noApplications) {
-    return (
-      <ContainerIndexApplications>
-        <NoApplications />
-      </ContainerIndexApplications>
-    );
-  }
-
-  return (
-    <ContainerIndexApplications>
-      <IndexHeaderApps query={query} setQuery={setQuery} />
-      <AllWorkspacesApplications query={query} userData={filtered} />
-    </ContainerIndexApplications>
-  );
-}
-
-export default Applications;

dashboard/src/components/home/EditWorkspaceNameForm/EditWorkspaceNameForm.tsx

@@ -3,14 +3,14 @@ import Form from '@/components/common/Form';
 import type { DialogFormProps } from '@/types/common';
 import Button from '@/ui/v2/Button';
 import Input from '@/ui/v2/Input';
-import { slugifyString } from '@/utils/helpers';
-import getServerError from '@/utils/settings/getServerError';
-import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import {
-  refetchGetOneUserQuery,
+  GetAllWorkspacesAndProjectsDocument,
   useInsertWorkspaceMutation,
   useUpdateWorkspaceMutation,
 } from '@/utils/__generated__/graphql';
+import { slugifyString } from '@/utils/helpers';
+import getServerError from '@/utils/settings/getServerError';
+import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useUserData } from '@nhost/nextjs';
 import { useRouter } from 'next/router';
@@ -85,11 +85,7 @@ export default function EditWorkspaceNameForm({
   const currentUser = useUserData();
   const [insertWorkspace, { client }] = useInsertWorkspaceMutation();
   const [updateWorkspaceName] = useUpdateWorkspaceMutation({
-    refetchQueries: [
-      refetchGetOneUserQuery({
-        userId: currentUser.id,
-      }),
-    ],
+    refetchQueries: [GetAllWorkspacesAndProjectsDocument],
     awaitRefetchQueries: true,
     ignoreResults: true,
   });
@@ -196,7 +192,7 @@ export default function EditWorkspaceNameForm({
     }
 
     await client.refetchQueries({
-      include: ['getOneUser'],
+      include: [GetAllWorkspacesAndProjectsDocument],
     });
 
     // The form has been submitted, it's not dirty anymore

dashboard/src/components/home/EditWorkspaceNameForm/index.ts

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

dashboard/src/components/home/FindOldApps.tsx

@@ -1,25 +0,0 @@
-import Link from '@/ui/v2/Link';
-import Text from '@/ui/v2/Text';
-
-export function FindOldApps() {
-  return (
-    <div className="mt-4">
-      <Text className="font-medium" color="secondary">
-        Looking for your old apps? They&apos;re still on{' '}
-        <span className="pb-0.25">
-          <Link
-            href="https://console.nhost.io"
-            target="_blank"
-            rel="noreferrer"
-            underline="hover"
-          >
-            console.nhost.io
-          </Link>
-        </span>{' '}
-        during this beta.
-      </Text>
-    </div>
-  );
-}
-
-export default FindOldApps;

dashboard/src/components/home/IndexHeaderApps.tsx

@@ -1,51 +0,0 @@
-import { useUI } from '@/context/UIContext';
-import Button from '@/ui/v2/Button';
-import PlusCircleIcon from '@/ui/v2/icons/PlusCircleIcon';
-import SearchIcon from '@/ui/v2/icons/SearchIcon';
-import Input from '@/ui/v2/Input';
-import Text from '@/ui/v2/Text';
-import Link from 'next/link';
-
-interface IndexHeaderAppsProps {
-  query?: any;
-  setQuery?: any;
-}
-
-export function IndexHeaderApps({ query, setQuery }: IndexHeaderAppsProps) {
-  const { maintenanceActive } = useUI();
-
-  return (
-    <div className="mx-auto mb-6 grid w-full grid-flow-col place-content-between items-center py-2">
-      <Text variant="h2" component="h1" className="hidden md:block">
-        My Projects
-      </Text>
-
-      <Input
-        placeholder="Find Project"
-        startAdornment={
-          <SearchIcon
-            className="ml-2 -mr-1 h-4 w-4 shrink-0"
-            sx={{ color: 'text.disabled' }}
-          />
-        }
-        value={query}
-        onChange={(event) => {
-          setQuery(event.target.value);
-        }}
-      />
-
-      <Link href="/new" passHref>
-        <Button
-          variant="outlined"
-          color="secondary"
-          startIcon={<PlusCircleIcon />}
-          disabled={maintenanceActive}
-        >
-          New Project
-        </Button>
-      </Link>
-    </div>
-  );
-}
-
-export default IndexHeaderApps;

dashboard/src/components/home/InviteAnnounce.tsx

@@ -1,4 +1,8 @@
-import { useGetWorkspaceMemberInvitesToManageQuery } from '@/generated/graphql';
+import {
+  GetAllWorkspacesAndProjectsDocument,
+  GetWorkspaceMemberInvitesToManageDocument,
+  useGetWorkspaceMemberInvitesToManageQuery,
+} from '@/generated/graphql';
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useSubmitState } from '@/hooks/useSubmitState';
 import Box from '@/ui/v2/Box';
@@ -29,7 +33,7 @@ export function InviteAnnounce() {
       variables: {
         userId: user?.id,
       },
-      skip: !isPlatform,
+      skip: !isPlatform || !user,
     });
 
   useEffect(() => {
@@ -99,7 +103,6 @@ export function InviteAnnounce() {
         workspaceMemberInviteId: inviteId,
         isAccepted: false,
       },
-      { useAxios: false },
     );
 
     if (ignoreError) {
@@ -115,7 +118,10 @@ export function InviteAnnounce() {
 
     // just refetch all data
     await client.refetchQueries({
-      include: ['getOneUser', 'getWorkspaceMemberInvitesToManage'],
+      include: [
+        GetAllWorkspacesAndProjectsDocument,
+        GetWorkspaceMemberInvitesToManageDocument,
+      ],
     });
 
     setIgnoreState({

dashboard/src/components/home/Resources.tsx

@@ -1,27 +0,0 @@
-import { Resource } from '@/components/home/Resource';
-import Text from '@/ui/v2/Text';
-
-export default function Resources() {
-  return (
-    <div>
-      <Text color="disabled">Resources</Text>
-      <div className="mt-4 flex flex-col space-y-1">
-        <Resource
-          text="Documentation"
-          logo="Question"
-          link="https://docs.nhost.io"
-        />
-        <Resource
-          text="Javascript Client"
-          logo="js"
-          link="https://docs.nhost.io/reference/javascript/"
-        />
-        <Resource
-          text="Nhost CLI"
-          logo="CLI"
-          link="https://docs.nhost.io/platform/cli"
-        />
-      </div>
-    </div>
-  );
-}

dashboard/src/components/home/SendFeedback.tsx

@@ -1,5 +1,5 @@
 import { useInsertFeedbackOneMutation } from '@/generated/graphql';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import { Avatar } from '@/ui/Avatar';
 import Button from '@/ui/v2/Button';
 import Input from '@/ui/v2/Input';
@@ -8,7 +8,7 @@ import { useUserData } from '@nhost/nextjs';
 import * as React from 'react';
 
 export function SendFeedback({ setFeedbackSent, feedback, setFeedback }: any) {
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const { currentProject } = useCurrentWorkspaceAndProject();
   const [insertFeedback, { loading }] = useInsertFeedbackOneMutation();
   const user = useUserData();
 
@@ -16,7 +16,7 @@ export function SendFeedback({ setFeedbackSent, feedback, setFeedback }: any) {
     e.preventDefault();
 
     const feedbackWithProjectInfo = [
-      currentApplication && `Project ID: ${currentApplication.id}`,
+      currentProject && `Project ID: ${currentProject.id}`,
       typeof window !== 'undefined' && `URL: ${window.location.href}`,
       feedback,
     ]

dashboard/src/components/home/Sidebar.tsx

@@ -1,56 +0,0 @@
-import { Resources } from '@/components/home';
-import GithubIcon from '@/components/icons/GithubIcon';
-import { WorkspaceSection } from '@/components/workspace/WorkspaceSection';
-import Button from '@/ui/v2/Button';
-import Image from 'next/image';
-import Link from 'next/link';
-
-export default function Sidebar() {
-  return (
-    <div className="grid grid-flow-row gap-8 mt-2 ml-10 w-full md:grid md:w-workspaceSidebar content-start">
-      <WorkspaceSection />
-      <Resources />
-
-      <div className="grid grid-flow-row gap-2">
-        <Link
-          href="https://github.com/nhost/nhost"
-          passHref
-          target="_blank"
-          rel="noreferrer noopener"
-        >
-          <Button
-            className="grid grid-flow-col gap-1"
-            variant="outlined"
-            color="secondary"
-            startIcon={<GithubIcon />}
-          >
-            Star us on GitHub
-          </Button>
-        </Link>
-
-        <Link
-          href="https://discord.com/invite/9V7Qb2U"
-          passHref
-          target="_blank"
-          rel="noreferrer noopener"
-        >
-          <Button
-            className="grid grid-flow-col gap-1"
-            variant="outlined"
-            color="secondary"
-            aria-labelledby="discord-button-label"
-          >
-            <Image
-              src="/assets/brands/discord.svg"
-              alt="Discord Logo"
-              width={24}
-              height={24}
-            />
-
-            <span id="discord-button-label">Join Discord</span>
-          </Button>
-        </Link>
-      </div>
-    </div>
-  );
-}

dashboard/src/components/home/Sidebar/Sidebar.tsx

@@ -0,0 +1,165 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import { EditWorkspaceNameForm } from '@/components/home/EditWorkspaceNameForm';
+import { Resource } from '@/components/home/Resource';
+import GithubIcon from '@/components/icons/GithubIcon';
+import type { Workspace } from '@/types/application';
+import ActivityIndicator from '@/ui/v2/ActivityIndicator';
+import type { BoxProps } from '@/ui/v2/Box';
+import Box from '@/ui/v2/Box';
+import Button from '@/ui/v2/Button';
+import List from '@/ui/v2/List';
+import { ListItem } from '@/ui/v2/ListItem';
+import Text from '@/ui/v2/Text';
+import PlusCircleIcon from '@/ui/v2/icons/PlusCircleIcon';
+import Image from 'next/image';
+import NavLink from 'next/link';
+import { twMerge } from 'tailwind-merge';
+
+export interface SidebarProps extends BoxProps {
+  /**
+   * List of workspaces to be displayed.
+   */
+  workspaces: Workspace[];
+}
+
+export default function Sidebar({
+  className,
+  workspaces,
+  ...props
+}: SidebarProps) {
+  const { openDialog } = useDialog();
+
+  return (
+    <Box
+      component="aside"
+      className={twMerge(
+        'grid w-full grid-flow-row content-start gap-8 md:grid',
+        className,
+      )}
+      {...props}
+    >
+      <section className="grid grid-flow-row gap-2">
+        <Text color="secondary">My Workspaces</Text>
+
+        {workspaces.length > 0 ? (
+          <List className="grid grid-flow-row gap-2">
+            {workspaces.map(({ id, name, slug }) => (
+              <ListItem.Root key={id}>
+                <NavLink href={`/${slug}`} passHref>
+                  <ListItem.Button
+                    dense
+                    aria-label={`View ${name}`}
+                    className="!p-1"
+                  >
+                    <ListItem.Avatar className="h-8 w-8">
+                      <div className="inline-block h-8 w-8 overflow-hidden rounded-lg">
+                        <Image
+                          src="/logos/new.svg"
+                          alt="Nhost Logo"
+                          width={32}
+                          height={32}
+                        />
+                      </div>
+                    </ListItem.Avatar>
+                    <ListItem.Text primary={name} />
+                  </ListItem.Button>
+                </NavLink>
+              </ListItem.Root>
+            ))}
+          </List>
+        ) : (
+          <ActivityIndicator
+            label="Creating your first workspace..."
+            className="py-1"
+          />
+        )}
+
+        <Button
+          variant="borderless"
+          color="secondary"
+          startIcon={<PlusCircleIcon />}
+          className="justify-self-start"
+          onClick={() => {
+            openDialog({
+              title: (
+                <span className="grid grid-flow-row">
+                  <span>New Workspace</span>
+
+                  <Text variant="subtitle1" component="span">
+                    Invite team members to workspaces to work collaboratively.
+                  </Text>
+                </span>
+              ),
+              component: <EditWorkspaceNameForm />,
+            });
+          }}
+        >
+          New Workspace
+        </Button>
+      </section>
+
+      <section className="grid grid-flow-row gap-2">
+        <Text color="secondary">Resources</Text>
+
+        <div className="grid grid-flow-row gap-2">
+          <Resource
+            text="Documentation"
+            logo="Question"
+            link="https://docs.nhost.io"
+          />
+          <Resource
+            text="JavaScript Client"
+            logo="js"
+            link="https://docs.nhost.io/reference/javascript/"
+          />
+          <Resource
+            text="Nhost CLI"
+            logo="CLI"
+            link="https://docs.nhost.io/platform/cli"
+          />
+        </div>
+      </section>
+
+      <section className="grid grid-flow-row gap-2">
+        <NavLink
+          href="https://github.com/nhost/nhost"
+          passHref
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <Button
+            className="grid grid-flow-col gap-1"
+            variant="outlined"
+            color="secondary"
+            startIcon={<GithubIcon />}
+          >
+            Star us on GitHub
+          </Button>
+        </NavLink>
+
+        <NavLink
+          href="https://discord.com/invite/9V7Qb2U"
+          passHref
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <Button
+            className="grid grid-flow-col gap-1"
+            variant="outlined"
+            color="secondary"
+            aria-labelledby="discord-button-label"
+          >
+            <Image
+              src="/assets/brands/discord.svg"
+              alt="Discord Logo"
+              width={24}
+              height={24}
+            />
+
+            <span id="discord-button-label">Join Discord</span>
+          </Button>
+        </NavLink>
+      </section>
+    </Box>
+  );
+}

dashboard/src/components/home/Sidebar/index.ts

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

dashboard/src/components/home/WorkspaceAndProjectList/WorkspaceAndProjectList.tsx

@@ -0,0 +1,225 @@
+import DeploymentStatusMessage from '@/components/deployments/DeploymentStatusMessage';
+import { useUI } from '@/context/UIContext';
+import type { ApplicationState, Workspace } from '@/types/application';
+import { ApplicationStatus } from '@/types/application';
+import StateBadge from '@/ui/StateBadge';
+import type { DeploymentStatus } from '@/ui/StatusCircle';
+import { StatusCircle } from '@/ui/StatusCircle';
+import type { BoxProps } from '@/ui/v2/Box';
+import Box from '@/ui/v2/Box';
+import type { ButtonProps } from '@/ui/v2/Button';
+import Button from '@/ui/v2/Button';
+import type { InputProps } from '@/ui/v2/Input';
+import Input from '@/ui/v2/Input';
+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 PlusCircleIcon from '@/ui/v2/icons/PlusCircleIcon';
+import SearchIcon from '@/ui/v2/icons/SearchIcon';
+import { getApplicationStatusString } from '@/utils/helpers';
+import { Divider } from '@mui/material';
+import debounce from 'lodash.debounce';
+import Image from 'next/image';
+import NavLink from 'next/link';
+import type { ChangeEvent, PropsWithoutRef } from 'react';
+import { Fragment, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export interface WorkspaceAndProjectListProps extends BoxProps {
+  /**
+   * List of workspaces to be displayed.
+   */
+  workspaces: Workspace[];
+  /**
+   * Props to be passed to individual slots.
+   */
+  slotProps?: {
+    root?: BoxProps;
+    header?: BoxProps;
+    search?: PropsWithoutRef<InputProps>;
+    button?: PropsWithoutRef<ButtonProps>;
+  };
+}
+
+function checkStatusOfTheApplication(stateHistory: ApplicationState[] | []) {
+  if (stateHistory.length === 0) {
+    return ApplicationStatus.Empty;
+  }
+
+  if (stateHistory[0].stateId === undefined) {
+    return ApplicationStatus.Empty;
+  }
+
+  return stateHistory[0].stateId;
+}
+
+export default function WorkspaceAndProjectList({
+  workspaces,
+  className,
+  slotProps = {},
+  ...props
+}: WorkspaceAndProjectListProps) {
+  const [query, setQuery] = useState('');
+  const { maintenanceActive } = useUI();
+
+  const handleQueryChange = debounce((event: ChangeEvent<HTMLInputElement>) => {
+    slotProps?.search?.onChange?.(event);
+    setQuery(event.target.value);
+  }, 500);
+
+  const filteredWorkspaces = workspaces
+    .map((workspace) => ({
+      ...workspace,
+      projects: workspace.projects.filter((project) =>
+        project.name.toLowerCase().includes(query.toLowerCase()),
+      ),
+    }))
+    .filter((workspace) => workspace.projects.length > 0);
+
+  return (
+    <Box
+      {...props}
+      {...slotProps.root}
+      className={twMerge(
+        'grid grid-flow-row content-start gap-4',
+        className,
+        slotProps.root?.className,
+      )}
+    >
+      <Box
+        {...slotProps.header}
+        className={twMerge(
+          'grid grid-flow-col place-content-between items-center',
+          slotProps.header?.className,
+        )}
+      >
+        <Text variant="h2" component="h1" className="hidden md:block">
+          My Projects
+        </Text>
+
+        <Input
+          placeholder="Find Project"
+          startAdornment={
+            <SearchIcon
+              className="ml-2 -mr-1 h-4 w-4 shrink-0"
+              sx={{ color: 'text.disabled' }}
+            />
+          }
+          {...slotProps.search}
+          onChange={handleQueryChange}
+        />
+
+        <NavLink href="/new" passHref>
+          <Button
+            variant="outlined"
+            color="secondary"
+            startIcon={<PlusCircleIcon />}
+            disabled={maintenanceActive}
+            {...slotProps.button}
+          >
+            New Project
+          </Button>
+        </NavLink>
+      </Box>
+
+      <Box className="my-8 grid grid-flow-row gap-8">
+        {filteredWorkspaces.map((workspace) => (
+          <div key={workspace.slug}>
+            <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">
+              {workspace.projects.map((project, index) => {
+                const [latestDeployment] = project.deployments;
+
+                return (
+                  <Fragment key={project.slug}>
+                    <ListItem.Root
+                      secondaryAction={
+                        <div className="grid grid-flow-col gap-px">
+                          {latestDeployment && (
+                            <div className="mr-2 flex self-center align-middle">
+                              <StatusCircle
+                                status={
+                                  latestDeployment.deploymentStatus as DeploymentStatus
+                                }
+                              />
+                            </div>
+                          )}
+
+                          <StateBadge
+                            state={checkStatusOfTheApplication(
+                              project.appStates,
+                            )}
+                            desiredState={project.desiredState}
+                            title={getApplicationStatusString(
+                              checkStatusOfTheApplication(project.appStates),
+                            )}
+                          />
+                        </div>
+                      }
+                    >
+                      <NavLink
+                        href={`${workspace?.slug}/${project.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={project.name}
+                            secondary={
+                              <DeploymentStatusMessage
+                                appCreatedAt={project.createdAt}
+                                deployment={latestDeployment}
+                              />
+                            }
+                          />
+                        </ListItem.Button>
+                      </NavLink>
+                    </ListItem.Root>
+
+                    {index < workspace.projects.length - 1 && (
+                      <Divider component="li" role="listitem" />
+                    )}
+                  </Fragment>
+                );
+              })}
+            </List>
+          </div>
+        ))}
+      </Box>
+
+      <Text className="font-medium" color="secondary">
+        Looking for your old apps? They&apos;re still on{' '}
+        <Link
+          href="https://console.nhost.io"
+          target="_blank"
+          rel="noreferrer"
+          underline="always"
+        >
+          console.nhost.io
+        </Link>{' '}
+        during this beta.
+      </Text>
+    </Box>
+  );
+}

dashboard/src/components/home/WorkspaceAndProjectList/index.ts

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

dashboard/src/components/home/index.tsx

@@ -1,3 +0,0 @@
-export { FindOldApps } from './FindOldApps';
-export { IndexHeaderApps } from './IndexHeaderApps';
-export { default as Resources } from './Resources';

dashboard/src/components/layout/ProjectLayout/ProjectLayout.tsx

@@ -4,11 +4,9 @@ import type { AuthenticatedLayoutProps } from '@/components/layout/Authenticated
 import AuthenticatedLayout from '@/components/layout/AuthenticatedLayout';
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import useProjectRoutes from '@/hooks/common/useProjectRoutes';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { useGetAllUserWorkspacesAndApplications } from '@/hooks/useGetAllUserWorkspacesAndApplications';
 import { useNavigationVisible } from '@/hooks/useNavigationVisible';
 import useNotFoundRedirect from '@/hooks/useNotFoundRedirect';
-import { useSetAppWorkspaceContextFromUserContext } from '@/hooks/useSetAppWorkspaceContextFromUserContext';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import type { BoxProps } from '@/ui/v2/Box';
 import Box from '@/ui/v2/Box';
 import { NextSeo } from 'next-seo';
@@ -30,8 +28,7 @@ function ProjectLayoutContent({
     ...mainContainerProps
   } = {},
 }: ProjectLayoutProps) {
-  const { currentApplication, currentWorkspace } =
-    useCurrentWorkspaceAndApplication();
+  const { currentProject, loading, error } = useCurrentWorkspaceAndProject();
 
   const router = useRouter();
   const shouldDisplayNav = useNavigationVisible();
@@ -49,8 +46,6 @@ function ProjectLayoutContent({
       ),
     );
 
-  useGetAllUserWorkspacesAndApplications(false);
-  useSetAppWorkspaceContextFromUserContext();
   useNotFoundRedirect();
 
   useEffect(() => {
@@ -63,10 +58,14 @@ function ProjectLayoutContent({
     }
   }, [isPlatform, isRestrictedPath, router]);
 
-  if (!currentWorkspace || !currentApplication || isRestrictedPath) {
+  if (isRestrictedPath || loading) {
     return <LoadingScreen />;
   }
 
+  if (error) {
+    throw error;
+  }
+
   if (!isPlatform) {
     return (
       <>
@@ -104,7 +103,7 @@ function ProjectLayoutContent({
       >
         {children}
 
-        <NextSeo title={currentApplication.name} />
+        <NextSeo title={currentProject.name} />
       </Box>
     </>
   );

dashboard/src/components/layout/UnauthenticatedLayout/UnauthenticatedLayout.tsx

@@ -4,7 +4,6 @@ import type { BaseLayoutProps } from '@/components/layout/BaseLayout';
 import BaseLayout from '@/components/layout/BaseLayout';
 import Container from '@/components/layout/Container';
 import useIsPlatform from '@/hooks/common/useIsPlatform';
-import { useCleanWorkspaceContext } from '@/hooks/use-cleanWorkspaceContext';
 import Box from '@/ui/v2/Box';
 import ThemeProvider from '@/ui/v2/ThemeProvider';
 import GlobalStyles from '@mui/material/GlobalStyles';
@@ -22,7 +21,6 @@ export default function UnauthenticatedLayout({
   const router = useRouter();
   const isPlatform = useIsPlatform();
   const { isAuthenticated, isLoading } = useAuthenticationStatus();
-  useCleanWorkspaceContext();
 
   useEffect(() => {
     if (!isPlatform || (!isLoading && isAuthenticated)) {

dashboard/src/components/logs/LogsHeader/LogsHeader.tsx

@@ -1,5 +1,5 @@
 import LogsDatePicker from '@/components/logs/LogsDatePicker';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import type { AvailableLogsServices, LogsCustomInterval } from '@/types/logs';
 import type { BoxProps } from '@/ui/v2/Box';
 import Box from '@/ui/v2/Box';
@@ -127,8 +127,8 @@ export default function LogsHeader({
   onServiceChange,
   ...props
 }: LogsHeaderProps) {
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const applicationCreationDate = new Date(currentApplication.createdAt);
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const applicationCreationDate = new Date(currentProject.createdAt);
 
   /**
    * Will subtract the `customInterval` time in minutes from the current date.

dashboard/src/components/logs/LogsTimePicker/LogsTimePicker.tsx

@@ -4,6 +4,7 @@ import { useDropdown } from '@/ui/v2/Dropdown';
 import type { InputProps } from '@/ui/v2/Input';
 import Input from '@/ui/v2/Input';
 import { format, set } from 'date-fns';
+import type { ChangeEvent } from 'react';
 
 export interface LogTimePickerProps extends InputProps {
   /**
@@ -22,21 +23,21 @@ function LogsTimePicker({
 }: any) {
   const { handleClose } = useDropdown();
 
-  const handleCancel = () => {
+  function handleCancel() {
     handleClose();
-  };
+  }
 
-  const handleApply = () => {
+  function handleApply() {
     onChange(selectedDate);
     handleClose();
-  };
+  }
 
-  const handleTimePicking = (event) => {
-    const [hours, minutes, seconds] = event.target.value.split(':');
+  function handleChange(event: ChangeEvent<HTMLInputElement>) {
+    const [hours, minutes, seconds] = event.target.value?.split(':') || [];
 
-    const hoursNumber = parseInt(hours, 10);
-    const minutesNumber = parseInt(minutes, 10);
-    const secondsNumber = parseInt(seconds, 10);
+    const hoursNumber = parseInt(hours || '0', 10);
+    const minutesNumber = parseInt(minutes || '0', 10);
+    const secondsNumber = parseInt(seconds || '0', 10);
 
     const newDate = set(new Date(selectedDate), {
       hours: hoursNumber,
@@ -51,7 +52,7 @@ function LogsTimePicker({
     }
 
     setSelectedDate(newDate);
-  };
+  }
 
   return (
     <div className="mx-auto grid grid-flow-row items-center self-center">
@@ -64,7 +65,7 @@ function LogsTimePicker({
             formControl: { className: 'grid grid-flow-col gap-x-3' },
             label: { sx: { fontSize: '14px' } },
           }}
-          onChange={handleTimePicking}
+          onChange={handleChange}
           type="time"
           label="Select Time"
           sx={{

dashboard/src/components/overview/MetricsCard/MetricsCard.tsx

@@ -0,0 +1,58 @@
+import type { BoxProps } from '@/ui/v2/Box';
+import Box from '@/ui/v2/Box';
+import Text from '@/ui/v2/Text';
+import Tooltip from '@/ui/v2/Tooltip';
+import { InfoIcon } from '@/ui/v2/icons/InfoIcon';
+import { twMerge } from 'tailwind-merge';
+
+export interface MetricsCardProps extends BoxProps {
+  /**
+   * Label of the card.
+   */
+  label?: string;
+  /**
+   * Value of the card.
+   */
+  value?: string;
+  /**
+   * Tooltip of the card.
+   */
+  tooltip?: string;
+}
+
+export default function MetricsCard({
+  label,
+  value,
+  tooltip,
+  className,
+}: MetricsCardProps) {
+  return (
+    <Box
+      className={twMerge(
+        'grid grid-flow-row gap-2 rounded-md px-4 py-3',
+        className,
+      )}
+      sx={{ backgroundColor: 'grey.200' }}
+    >
+      <div className="grid grid-flow-col items-center justify-between gap-2">
+        {label && (
+          <Text className="truncate font-medium" color="secondary">
+            {label}
+          </Text>
+        )}
+
+        {tooltip && (
+          <Tooltip title={tooltip}>
+            <InfoIcon className="h-4 w-4" />
+          </Tooltip>
+        )}
+      </div>
+
+      {value && (
+        <Text variant="h2" component="p" className="truncate">
+          {value}
+        </Text>
+      )}
+    </Box>
+  );
+}

dashboard/src/components/overview/MetricsCard/index.ts

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

dashboard/src/components/overview/OverviewDeployments/OverviewDeployments.test.tsx

@@ -1,9 +1,8 @@
-import { UserDataProvider } from '@/context/workspace1-context';
 import type { Project } from '@/types/application';
 import { ApplicationStatus } from '@/types/application';
 import type { Workspace } from '@/types/workspace';
-import { render, screen, waitForElementToBeRemoved } from '@/utils/testUtils';
-import { graphql, rest } from 'msw';
+import { queryClient, render, screen } from '@/utils/testUtils';
+import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import { afterAll, beforeAll, vi } from 'vitest';
 import OverviewDeployments from '.';
@@ -73,19 +72,10 @@ const mockWorkspace: Workspace = {
   applications: [mockApplication],
 };
 
-const mockGraphqlLink = graphql.link('http://localhost:1337/v1/graphql');
-
 const server = setupServer(
-  rest.get('http://localhost:1337/v1/graphql', (req, res, ctx) =>
+  rest.get('https://local.graphql.nhost.run/v1', (_req, res, ctx) =>
     res(ctx.status(200)),
   ),
-  mockGraphqlLink.operation(async (req, res, ctx) =>
-    res(
-      ctx.data({
-        deployments: [],
-      }),
-    ),
-  ),
 );
 
 beforeAll(() => {
@@ -94,48 +84,89 @@ beforeAll(() => {
   server.listen();
 });
 
-afterEach(() => server.resetHandlers());
+afterEach(() => {
+  server.resetHandlers(
+    rest.get('https://local.graphql.nhost.run/v1', (_req, res, ctx) =>
+      res(ctx.status(200)),
+    ),
+  );
+  queryClient.clear();
+});
 
 afterAll(() => {
   server.close();
   vi.restoreAllMocks();
 });
 
-test('should render an empty state when GitHub is not connected', () => {
-  render(
-    <UserDataProvider
-      initialWorkspaces={[
-        {
-          ...mockWorkspace,
-          applications: [{ ...mockApplication, githubRepository: null }],
-        },
-      ]}
-    >
-      <OverviewDeployments />
-    </UserDataProvider>,
+test('should render an empty state when GitHub is not connected', async () => {
+  server.use(
+    rest.post('https://local.graphql.nhost.run/v1', async (req, res, ctx) => {
+      const { operationName } = await req.json();
+
+      if (operationName === 'GetWorkspaceAndProject') {
+        return res(
+          ctx.json({
+            data: {
+              workspaces: [
+                {
+                  ...mockWorkspace,
+                  projects: [{ ...mockApplication, githubRepository: null }],
+                },
+              ],
+              projects: [{ ...mockApplication, githubRepository: null }],
+            },
+          }),
+        );
+      }
+
+      return res(
+        ctx.json({
+          data: {
+            deployments: [],
+          },
+        }),
+      );
+    }),
   );
 
-  expect(screen.getByText(/no deployments/i)).toBeInTheDocument();
+  render(<OverviewDeployments />);
+
+  expect(await screen.findByText(/no deployments/i)).toBeInTheDocument();
   expect(
-    screen.getByRole('button', { name: /connect to github/i }),
+    await screen.findByRole('button', { name: /connect to github/i }),
   ).toBeInTheDocument();
 });
 
 test('should render an empty state when GitHub is connected, but there are no deployments', async () => {
-  render(
-    <UserDataProvider initialWorkspaces={[mockWorkspace]}>
-      <OverviewDeployments />
-    </UserDataProvider>,
+  server.use(
+    rest.post('https://local.graphql.nhost.run/v1', async (_req, res, ctx) => {
+      const { operationName } = await _req.json();
+
+      if (operationName === 'GetWorkspaceAndProject') {
+        return res(
+          ctx.json({
+            data: {
+              workspaces: [mockWorkspace],
+              projects: [mockApplication],
+            },
+          }),
+        );
+      }
+
+      return res(ctx.json({ data: { deployments: [] } }));
+    }),
   );
 
-  expect(screen.getByText(/^deployments$/i)).toBeInTheDocument();
-  expect(screen.getByRole('link', { name: /view all/i })).toBeInTheDocument();
+  render(<OverviewDeployments />);
 
-  await waitForElementToBeRemoved(() => screen.queryByRole('progressbar'));
+  expect(await screen.findByText(/^deployments$/i)).toBeInTheDocument();
+  expect(
+    await screen.findByRole('link', { name: /view all/i }),
+  ).toBeInTheDocument();
 
-  expect(screen.getByText(/no deployments/i)).toBeInTheDocument();
-  expect(screen.getByText(/test\/git-project/i)).toBeInTheDocument();
-  expect(screen.getByRole('link', { name: /edit/i })).toHaveAttribute(
+  expect(await screen.findByText(/no deployments/i)).toBeInTheDocument();
+  expect(await screen.findByText(/test\/git-project/i)).toBeInTheDocument();
+  expect(await screen.findByRole('link', { name: /edit/i })).toHaveAttribute(
     'href',
     '/test-workspace/test-application/settings/git',
   );
@@ -143,103 +174,124 @@ test('should render an empty state when GitHub is connected, but there are no de
 
 test('should render a list of deployments', async () => {
   server.use(
-    mockGraphqlLink.operation(async (req, res, ctx) => {
-      const requestPayload = await req.json();
+    rest.post('https://local.graphql.nhost.run/v1', async (_req, res, ctx) => {
+      const { operationName } = await _req.json();
 
-      if (requestPayload.operationName === 'ScheduledOrPendingDeploymentsSub') {
-        return res(ctx.data({ deployments: [] }));
+      if (operationName === 'ScheduledOrPendingDeploymentsSub') {
+        return res(ctx.json({ data: { deployments: [] } }));
       }
 
-      return res(
-        ctx.data({
-          deployments: [
-            {
-              id: '1',
-              commitSHA: 'abc123',
-              deploymentStartedAt: '2021-08-01T00:00:00.000Z',
-              deploymentEndedAt: '2021-08-01T00:05:00.000Z',
-              deploymentStatus: 'DEPLOYED',
-              commitUserName: 'test.user',
-              commitUserAvatarUrl: 'http://images.example.com/avatar.png',
-              commitMessage: 'Test commit message',
-            },
-          ],
-        }),
-      );
-    }),
-  );
-
-  render(
-    <UserDataProvider initialWorkspaces={[mockWorkspace]}>
-      <OverviewDeployments />
-    </UserDataProvider>,
-  );
-
-  await waitForElementToBeRemoved(() => screen.queryByRole('progressbar'));
-
-  expect(screen.getByText(/test commit message/i)).toBeInTheDocument();
-  expect(screen.getByLabelText(/avatar/i)).toHaveStyle(
-    'background-image: url(http://images.example.com/avatar.png)',
-  );
-  expect(
-    screen.getByRole('link', {
-      name: /test commit message/i,
-    }),
-  ).toHaveAttribute('href', '/test-workspace/test-application/deployments/1');
-  expect(screen.getByText(/5m 0s/i)).toBeInTheDocument();
-  expect(screen.getByText(/live/i)).toBeInTheDocument();
-  expect(screen.getByRole('button', { name: /redeploy/i })).not.toBeDisabled();
-});
-
-test('should disable redeployments if a deployment is already in progress', async () => {
-  server.use(
-    mockGraphqlLink.operation(async (req, res, ctx) => {
-      const requestPayload = await req.json();
-
-      if (requestPayload.operationName === 'ScheduledOrPendingDeploymentsSub') {
+      if (operationName === 'GetWorkspaceAndProject') {
         return res(
-          ctx.data({
-            deployments: [
-              {
-                id: '2',
-                commitSHA: 'abc234',
-                deploymentStartedAt: '2021-08-02T00:00:00.000Z',
-                deploymentEndedAt: null,
-                deploymentStatus: 'PENDING',
-                commitUserName: 'test.user',
-                commitUserAvatarUrl: 'http://images.example.com/avatar.png',
-                commitMessage: 'Test commit message',
-              },
-            ],
+          ctx.json({
+            data: {
+              workspaces: [mockWorkspace],
+              projects: [mockApplication],
+            },
           }),
         );
       }
 
       return res(
-        ctx.data({
-          deployments: [
-            {
-              id: '1',
-              commitSHA: 'abc123',
-              deploymentStartedAt: '2021-08-01T00:00:00.000Z',
-              deploymentEndedAt: '2021-08-01T00:05:00.000Z',
-              deploymentStatus: 'DEPLOYED',
-              commitUserName: 'test.user',
-              commitUserAvatarUrl: 'http://images.example.com/avatar.png',
-              commitMessage: 'Test commit message',
-            },
-          ],
+        ctx.json({
+          data: {
+            deployments: [
+              {
+                id: '1',
+                commitSHA: 'abc123',
+                deploymentStartedAt: '2021-08-01T00:00:00.000Z',
+                deploymentEndedAt: '2021-08-01T00:05:00.000Z',
+                deploymentStatus: 'DEPLOYED',
+                commitUserName: 'test.user',
+                commitUserAvatarUrl: 'http://images.example.com/avatar.png',
+                commitMessage: 'Test commit message',
+              },
+            ],
+          },
         }),
       );
     }),
   );
 
-  render(
-    <UserDataProvider initialWorkspaces={[mockWorkspace]}>
-      <OverviewDeployments />
-    </UserDataProvider>,
+  render(<OverviewDeployments />);
+
+  expect(await screen.findByText(/test commit message/i)).toBeInTheDocument();
+  expect(await screen.findByLabelText(/avatar/i)).toHaveStyle(
+    'background-image: url(http://images.example.com/avatar.png)',
+  );
+  expect(
+    await screen.findByRole('link', {
+      name: /test commit message/i,
+    }),
+  ).toHaveAttribute('href', '/test-workspace/test-application/deployments/1');
+  expect(await screen.findByText(/5m 0s/i)).toBeInTheDocument();
+  expect(await screen.findByText(/live/i)).toBeInTheDocument();
+  expect(
+    await screen.findByRole('button', { name: /redeploy/i }),
+  ).not.toBeDisabled();
+});
+
+test('should disable redeployments if a deployment is already in progress', async () => {
+  server.use(
+    rest.post('https://local.graphql.nhost.run/v1', async (req, res, ctx) => {
+      const { operationName } = await req.json();
+
+      if (operationName === 'ScheduledOrPendingDeploymentsSub') {
+        return res(
+          ctx.json({
+            data: {
+              deployments: [
+                {
+                  id: '2',
+                  commitSHA: 'abc234',
+                  deploymentStartedAt: '2021-08-02T00:00:00.000Z',
+                  deploymentEndedAt: null,
+                  deploymentStatus: 'PENDING',
+                  commitUserName: 'test.user',
+                  commitUserAvatarUrl: 'http://images.example.com/avatar.png',
+                  commitMessage: 'Test commit message',
+                },
+              ],
+            },
+          }),
+        );
+      }
+
+      if (operationName === 'GetWorkspaceAndProject') {
+        return res(
+          ctx.json({
+            data: {
+              workspaces: [mockWorkspace],
+              projects: [mockApplication],
+            },
+          }),
+        );
+      }
+
+      return res(
+        ctx.json({
+          data: {
+            deployments: [
+              {
+                id: '1',
+                commitSHA: 'abc123',
+                deploymentStartedAt: '2021-08-01T00:00:00.000Z',
+                deploymentEndedAt: '2021-08-01T00:05:00.000Z',
+                deploymentStatus: 'DEPLOYED',
+                commitUserName: 'test.user',
+                commitUserAvatarUrl: 'http://images.example.com/avatar.png',
+                commitMessage: 'Test commit message',
+              },
+            ],
+          },
+        }),
+      );
+    }),
   );
 
-  await waitForElementToBeRemoved(() => screen.queryByRole('progressbar'));
-  expect(screen.getByRole('button', { name: /redeploy/i })).toBeDisabled();
+  render(<OverviewDeployments />);
+
+  expect(
+    await screen.findByRole('button', { name: /redeploy/i }),
+  ).toBeDisabled();
 });

dashboard/src/components/overview/OverviewDeployments/OverviewDeployments.tsx

@@ -2,28 +2,26 @@ import useGitHubModal from '@/components/applications/github/useGitHubModal';
 import DeploymentListItem from '@/components/deployments/DeploymentListItem';
 import GithubIcon from '@/components/icons/GithubIcon';
 import { useUI } from '@/context/UIContext';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
 import Divider from '@/ui/v2/Divider';
-import ChevronRightIcon from '@/ui/v2/icons/ChevronRightIcon';
-import RocketIcon from '@/ui/v2/icons/RocketIcon';
 import List from '@/ui/v2/List';
 import Text from '@/ui/v2/Text';
-import { getLastLiveDeployment } from '@/utils/helpers';
+import ChevronRightIcon from '@/ui/v2/icons/ChevronRightIcon';
+import RocketIcon from '@/ui/v2/icons/RocketIcon';
 import {
   useGetDeploymentsSubSubscription,
   useScheduledOrPendingDeploymentsSubSubscription,
 } from '@/utils/__generated__/graphql';
+import { getLastLiveDeployment } from '@/utils/helpers';
 import NavLink from 'next/link';
 import { Fragment } from 'react';
 
 function OverviewDeploymentsTopBar() {
-  const { currentWorkspace, currentApplication } =
-    useCurrentWorkspaceAndApplication();
-
-  const { githubRepository } = currentApplication || {};
+  const { currentWorkspace, currentProject } = useCurrentWorkspaceAndProject();
+  const isGitHubConnected = !!currentProject?.githubRepository;
 
   return (
     <div className="grid grid-flow-col place-content-between items-center gap-2 pb-4">
@@ -32,10 +30,10 @@ function OverviewDeploymentsTopBar() {
       </Text>
 
       <NavLink
-        href={`/${currentWorkspace?.slug}/${currentApplication?.slug}/deployments`}
+        href={`/${currentWorkspace?.slug}/${currentProject?.slug}/deployments`}
         passHref
       >
-        <Button variant="borderless" disabled={!githubRepository}>
+        <Button variant="borderless" disabled={!isGitHubConnected}>
           View all
           <ChevronRightIcon className="ml-1 inline-block h-4 w-4" />
         </Button>
@@ -45,11 +43,10 @@ function OverviewDeploymentsTopBar() {
 }
 
 function OverviewDeploymentList() {
-  const { currentWorkspace, currentApplication } =
-    useCurrentWorkspaceAndApplication();
+  const { currentWorkspace, currentProject } = useCurrentWorkspaceAndProject();
   const { data, loading } = useGetDeploymentsSubSubscription({
     variables: {
-      id: currentApplication?.id,
+      id: currentProject?.id,
       limit: 5,
       offset: 0,
     },
@@ -60,7 +57,7 @@ function OverviewDeploymentList() {
     loading: scheduledOrPendingDeploymentsLoading,
   } = useScheduledOrPendingDeploymentsSubSubscription({
     variables: {
-      appId: currentApplication?.id,
+      appId: currentProject?.id,
     },
   });
 
@@ -76,7 +73,7 @@ function OverviewDeploymentList() {
 
   if (!deployments?.length) {
     return (
-      <Box className="grid grid-flow-row items-center justify-items-center gap-5 overflow-hidden rounded-lg border-1 py-12 px-48 shadow-sm">
+      <Box className="grid grid-flow-row items-center justify-items-center gap-5 overflow-hidden rounded-lg border-1 py-12 px-4 shadow-sm">
         <RocketIcon
           strokeWidth={1}
           className="h-10 w-10"
@@ -86,7 +83,7 @@ function OverviewDeploymentList() {
           <Text className="text-center font-medium" variant="h3">
             No Deployments
           </Text>
-          <Text variant="subtitle1" className="text-center">
+          <Text variant="subtitle1" className="max-w-md text-center">
             We&apos;ll deploy changes automatically when you push to the
             deployment branch in your connected GitHub repository
           </Text>
@@ -102,12 +99,12 @@ function OverviewDeploymentList() {
           >
             <GithubIcon className="h-4 w-4 self-center" />
             <Text variant="body1" className="self-center font-normal">
-              {currentApplication?.githubRepository?.fullName}
+              {currentProject?.githubRepository?.fullName}
             </Text>
           </Box>
 
           <NavLink
-            href={`/${currentWorkspace.slug}/${currentApplication.slug}/settings/git`}
+            href={`/${currentWorkspace.slug}/${currentProject.slug}/settings/git`}
             passHref
           >
             <Button variant="borderless" size="small">
@@ -145,14 +142,17 @@ function OverviewDeploymentList() {
 }
 
 export default function OverviewDeployments() {
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const { currentProject, loading } = useCurrentWorkspaceAndProject();
   const { openGitHubModal } = useGitHubModal();
   const { maintenanceActive } = useUI();
+  const isGitHubConnected = !!currentProject?.githubRepository;
 
-  const { githubRepository } = currentApplication || {};
+  if (loading) {
+    return <ActivityIndicator label="Loading project info..." delay={1000} />;
+  }
 
   // GitHub repo connected. Show deployments
-  if (githubRepository) {
+  if (isGitHubConnected) {
     return (
       <div className="flex flex-col">
         <OverviewDeploymentsTopBar />
@@ -166,14 +166,14 @@ export default function OverviewDeployments() {
     <div className="flex flex-col">
       <OverviewDeploymentsTopBar />
 
-      <Box className="grid grid-flow-row items-center justify-items-center gap-5 rounded-lg border-1 py-12 px-48 shadow-sm">
+      <Box className="grid grid-flow-row items-center justify-items-center gap-5 rounded-lg border-1 py-12 px-4 shadow-sm">
         <RocketIcon strokeWidth={1} className="h-10 w-10" />
 
         <div className="grid grid-flow-row gap-1">
           <Text className="text-center font-medium" variant="h3">
             No Deployments
           </Text>
-          <Text variant="subtitle1" className="text-center">
+          <Text variant="subtitle1" className="max-w-sm text-center">
             Connect your project with a GitHub repository to create your first
             deployment
           </Text>

dashboard/src/components/overview/OverviewDocumentation/OverviewDocumentation.tsx

@@ -35,7 +35,7 @@ export default function OverviewDocumentation({
         <Text color="secondary">{description}</Text>
       </div>
 
-      <div className="mt-6 grid grid-flow-row items-center gap-6 xs:grid-cols-2 lg:grid-cols-4 lg:gap-4">
+      <div className="mt-6 grid grid-flow-row items-center gap-6 xs:grid-cols-2 lg:gap-4 xl:grid-cols-4">
         {cardElements.map(
           ({
             title: cardTitle,

dashboard/src/components/overview/OverviewMetrics/OverviewMetrics.tsx

@@ -0,0 +1,84 @@
+import type { MetricsCardProps } from '@/components/overview/MetricsCard';
+import { MetricsCard } from '@/components/overview/MetricsCard';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
+import Text from '@/ui/v2/Text';
+import { useGetProjectMetricsQuery } from '@/utils/__generated__/graphql';
+import { prettifyNumber } from '@/utils/common/prettifyNumber';
+import { prettifySize } from '@/utils/common/prettifySize';
+import { twMerge } from 'tailwind-merge';
+
+const now = new Date();
+
+export default function OverviewMetrics() {
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const { data, loading, error } = useGetProjectMetricsQuery({
+    variables: {
+      appId: currentProject?.id,
+      subdomain: currentProject?.subdomain,
+      from: new Date(now.getFullYear(), now.getMonth(), 1),
+    },
+    skip: !currentProject?.id,
+  });
+
+  const cardElements: MetricsCardProps[] = [
+    {
+      label: 'CPU Usage Seconds',
+      tooltip: 'Total time the service has used the CPUs',
+      value: prettifyNumber(data?.cpuSecondsUsage?.value || 0),
+    },
+    {
+      label: 'Total Requests',
+      tooltip:
+        'Total amount of requests your services have received excluding functions',
+      value: prettifyNumber(data?.totalRequests?.value || 0, {
+        numberOfDecimals: data?.totalRequests?.value > 1000 ? 2 : 0,
+      }),
+    },
+    {
+      label: 'Function Invocations',
+      tooltip: 'Number of times your functions have been called',
+      value: prettifyNumber(data?.functionInvocations?.value || 0, {
+        numberOfDecimals: 0,
+      }),
+    },
+    {
+      label: 'Egress Volume',
+      tooltip: 'Amount of data your services have sent to users',
+      value: prettifySize(data?.egressVolume?.value || 0),
+    },
+    {
+      label: 'Logs',
+      tooltip: 'Amount of logs stored',
+      value: prettifySize(data?.logsVolume?.value || 0),
+    },
+  ];
+
+  if (!data && error) {
+    throw error;
+  }
+
+  return (
+    <div className="grid grid-flow-row gap-4">
+      <div className="grid grid-cols-1 justify-start gap-4 xs:grid-cols-2 md:grid-cols-3">
+        {cardElements.map(({ label, value, tooltip, className, ...props }) => (
+          <MetricsCard
+            {...props}
+            key={label}
+            label={!loading ? label : null}
+            value={!loading ? value : null}
+            tooltip={!loading ? tooltip : null}
+            className={twMerge(
+              'min-h-[92px]',
+              loading && 'animate-pulse',
+              className,
+            )}
+          />
+        ))}
+      </div>
+
+      <Text color="disabled">
+        Your resource usage since the beginning of the month.
+      </Text>
+    </div>
+  );
+}

dashboard/src/components/overview/OverviewMetrics/index.ts

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

dashboard/src/components/overview/OverviewMigration/OverviewMigration.tsx

@@ -1,141 +0,0 @@
-import { useDialog } from '@/components/common/DialogProvider';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { ApplicationStatus } from '@/types/application';
-import { Alert } from '@/ui/Alert';
-import Box from '@/ui/v2/Box';
-import Button from '@/ui/v2/Button';
-import Chip from '@/ui/v2/Chip';
-import Text from '@/ui/v2/Text';
-import { triggerToast } from '@/utils/toast';
-import { useUpdateApplicationMutation } from '@/utils/__generated__/graphql';
-
-const migrationSteps = [
-  {
-    title: 'Your project will be paused',
-  },
-  {
-    title: 'Your database will be migrated to its own dedicated instance',
-  },
-  {
-    title: 'Your project will be resumed',
-  },
-];
-
-export default function OverviewMigration() {
-  const { openAlertDialog } = useDialog();
-  const [updateApplication] = useUpdateApplicationMutation({
-    refetchQueries: ['getOneUser'],
-  });
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
-
-  return (
-    <div className="pb-12">
-      <div className="flex flex-col gap-2">
-        <Text variant="h3">
-          Migrate Database
-          <span className="relative -top-0.5 ml-2 self-center">
-            <Chip label="New" color="primary" size="small" />
-          </span>
-        </Text>
-
-        <Text variant="subtitle1" className="!font-medium">
-          Migrate your project&apos;s data to its own Postgres instance and get
-          root access to your database.
-        </Text>
-      </div>
-
-      <div className="mt-6 flex flex-row place-content-between rounded-lg">
-        <Button
-          variant="outlined"
-          color="secondary"
-          className="w-full border-1 hover:border-1"
-          onClick={() => {
-            openAlertDialog({
-              title: 'Migrate Database',
-              payload: (
-                <div className="flex flex-col gap-6 pb-8">
-                  <Text>
-                    Your project&apos;s data will be moved to a new and
-                    dedicated Postgres instance with root access.
-                  </Text>
-
-                  <div className="flex flex-col gap-4">
-                    <Text>Steps to migrate:</Text>
-                    <div className="grid grid-rows-3 gap-4">
-                      {migrationSteps.map((step, index) => (
-                        <div key={step.title} className="col-span-1">
-                          <div className="flex h-11 flex-row gap-3">
-                            <div className="flex items-center">
-                              <Box
-                                className="flex h-8 w-8 flex-col items-center justify-center self-center rounded-md align-middle font-semibold"
-                                sx={{ backgroundColor: 'grey.200' }}
-                              >
-                                <Text
-                                  component="span"
-                                  className="font-semibold"
-                                  color="secondary"
-                                >
-                                  {index + 1}
-                                </Text>
-                              </Box>
-                            </div>
-                            <div className="flex w-[312px] items-center">
-                              <Text>{step.title}</Text>
-                            </div>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                  <Alert className="text-left">
-                    You can expect some downtime while we are moving your data
-                    around. The time to migrate is dependent on your database
-                    size.
-                  </Alert>
-                </div>
-              ),
-              props: {
-                contentProps: {
-                  className: 'py-0',
-                },
-                PaperProps: {
-                  className: 'max-w-[29.25rem] mx-auto p-6 rounded-lg',
-                },
-                primaryButtonText: 'Start Migration',
-
-                onPrimaryAction: async () => {
-                  try {
-                    await updateApplication({
-                      variables: {
-                        appId: currentApplication.id,
-                        app: {
-                          desiredState: ApplicationStatus.Migrating,
-                        },
-                      },
-                    });
-
-                    localStorage.setItem(
-                      `migration-${currentApplication.id}`,
-                      new Date().toISOString(),
-                    );
-
-                    triggerToast(`${currentApplication.name} set to migrate.`);
-                  } catch (e) {
-                    triggerToast(
-                      `Error trying to migrate ${currentApplication.name}`,
-                    );
-                  }
-                },
-                actionsProps: {
-                  className: 'flex flex-row-reverse place-content-between',
-                },
-              },
-            });
-          }}
-        >
-          Start Migrating
-        </Button>
-      </div>
-    </div>
-  );
-}

dashboard/src/components/overview/OverviewMigration/index.ts

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

dashboard/src/components/overview/OverviewProjectInfo/OverviewProjectInfo.tsx

@@ -1,11 +1,11 @@
 import InfoCard from '@/components/overview/InfoCard';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import Text from '@/ui/v2/Text';
 import Image from 'next/image';
 
 export default function OverviewProjectInfo() {
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const { region, subdomain } = currentApplication || {};
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const { region, subdomain } = currentProject || {};
   const isRegionAvailable =
     region?.awsName && region?.countryCode && region?.city;
 
@@ -13,14 +13,14 @@ export default function OverviewProjectInfo() {
     <div className="grid grid-flow-row content-start gap-6">
       <Text variant="h3">Project Info</Text>
 
-      {currentApplication && (
+      {currentProject && (
         <div className="grid grid-flow-row gap-3">
           <InfoCard
             title="Region"
             value={region?.awsName}
             customValue={
-              region.countryCode &&
-              region.city && (
+              region?.countryCode &&
+              region?.city && (
                 <div className="grid grid-flow-col items-center gap-1 self-center">
                   <Image
                     src={`/assets/flags/${region.countryCode}.svg`}
@@ -29,7 +29,7 @@ export default function OverviewProjectInfo() {
                     height={12}
                   />
 
-                  <Text className="text-sm font-medium truncate">
+                  <Text className="truncate text-sm font-medium">
                     {region.city} ({region.awsName})
                   </Text>
                 </div>

dashboard/src/components/overview/OverviewRepository/OverviewRepository.tsx

@@ -1,28 +1,27 @@
 import GithubIcon from '@/components/icons/GithubIcon';
 import { useUI } from '@/context/UIContext';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
 import Text from '@/ui/v2/Text';
 import NavLink from 'next/link';
 
 export default function OverviewRepository() {
-  const { currentWorkspace, currentApplication } =
-    useCurrentWorkspaceAndApplication();
+  const { currentWorkspace, currentProject } = useCurrentWorkspaceAndProject();
   const { maintenanceActive } = useUI();
 
   return (
     <div>
       <Text variant="h3">Repository</Text>
       <Text variant="subtitle1" className="mt-2 !font-medium">
-        {!currentApplication.githubRepository
+        {!currentProject.githubRepository
           ? 'Connect your project with a GitHub repository to create your first deployment.'
           : 'GitHub is connected.'}
       </Text>
-      {!currentApplication.githubRepository ? (
+      {!currentProject.githubRepository ? (
         <div className="mt-6 flex flex-row place-content-between rounded-lg">
           <NavLink
-            href={`/${currentWorkspace.slug}/${currentApplication.slug}/settings/git`}
+            href={`/${currentWorkspace.slug}/${currentProject.slug}/settings/git`}
             passHref
           >
             <Button
@@ -47,12 +46,12 @@ export default function OverviewRepository() {
           >
             <GithubIcon className="h-4 w-4 self-center" />
             <Text variant="body1" className="self-center font-normal">
-              {currentApplication.githubRepository.fullName}
+              {currentProject.githubRepository.fullName}
             </Text>
           </Box>
 
           <NavLink
-            href={`/${currentWorkspace.slug}/${currentApplication.slug}/settings/git`}
+            href={`/${currentWorkspace.slug}/${currentProject.slug}/settings/git`}
             passHref
           >
             <Button

dashboard/src/components/overview/OverviewTopBar/OverviewTopBar.tsx

@@ -1,22 +1,21 @@
 import { ChangePlanModal } from '@/components/applications/ChangePlanModal';
-
 import { useDialog } from '@/components/common/DialogProvider';
 import { useUI } from '@/context/UIContext';
 import useIsPlatform from '@/hooks/common/useIsPlatform';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import Button from '@/ui/v2/Button';
 import Chip from '@/ui/v2/Chip';
 import CogIcon from '@/ui/v2/icons/CogIcon';
 import Text from '@/ui/v2/Text';
+import { formatDistanceToNowStrict, parseISO } from 'date-fns';
 import Image from 'next/image';
 import Link from 'next/link';
 
 export default function OverviewTopBar() {
   const isPlatform = useIsPlatform();
-  const { currentWorkspace, currentApplication } =
-    useCurrentWorkspaceAndApplication();
-  const isPro = !currentApplication?.plan?.isFree;
-  const { openAlertDialog } = useDialog();
+  const { currentWorkspace, currentProject } = useCurrentWorkspaceAndProject();
+  const isPro = !currentProject?.plan?.isFree;
+  const { openDialog } = useDialog();
   const { maintenanceActive } = useUI();
 
   if (!isPlatform) {
@@ -43,63 +42,93 @@ export default function OverviewTopBar() {
   }
 
   return (
-    <div className="flex flex-row place-content-between items-center py-5">
-      <div className="flex flex-row items-center space-x-2">
-        <div className="grid grid-flow-col items-center gap-2">
+    <div className="grid items-center gap-4 pb-5 md:grid-flow-col md:place-content-between md:py-5">
+      <div className="grid items-center gap-4 md:grid-flow-col">
+        <div className="grid grid-flow-col items-center justify-start gap-2">
           <div className="h-10 w-10 overflow-hidden rounded-lg">
             <Image
               src="/logos/new.svg"
               alt="Nhost Logo"
-              width={40}
-              height={40}
+              width={56}
+              height={56}
             />
           </div>
 
-          <Text variant="h2" component="h1">
-            {currentApplication.name}
-          </Text>
-        </div>
+          <div className="grid grid-flow-row">
+            <div className="grid grid-flow-row items-center justify-start md:grid-flow-col md:gap-3">
+              <Text
+                variant="h2"
+                component="h1"
+                className="grid grid-flow-col items-center gap-3"
+              >
+                {currentProject.name}
+              </Text>
 
-        {isPro ? (
-          <Chip
-            className="self-center font-medium"
-            size="small"
-            label="Pro Plan"
-            color="primary"
-          />
-        ) : (
-          <>
-            <Chip
-              className="self-center font-medium"
-              size="small"
-              label="Free Plan"
-              color="default"
-              variant="filled"
-            />
-            <Button
-              variant="borderless"
-              className="mr-2"
-              onClick={() => {
-                openAlertDialog({
-                  title: 'Upgrade your plan.',
-                  payload: <ChangePlanModal />,
-                  props: {
-                    PaperProps: { className: 'p-0' },
-                    hidePrimaryAction: true,
-                    hideSecondaryAction: true,
-                    hideTitle: true,
-                    maxWidth: 'lg',
-                  },
-                });
-              }}
-            >
-              Upgrade
-            </Button>
-          </>
-        )}
+              {currentProject.creator && (
+                <Text
+                  color="secondary"
+                  variant="subtitle2"
+                  className="md:hidden"
+                >
+                  Created by{' '}
+                  {currentProject.creator?.displayName ||
+                    currentProject.creator?.email}{' '}
+                  {formatDistanceToNowStrict(
+                    parseISO(currentProject.createdAt),
+                  )}{' '}
+                  ago
+                </Text>
+              )}
+
+              <div className="mt-1 inline-grid grid-flow-col items-center justify-start gap-2 md:mt-0">
+                <Chip
+                  size="small"
+                  label={isPro ? 'Pro' : 'Starter'}
+                  color={isPro ? 'primary' : 'default'}
+                />
+
+                {!isPro && (
+                  <Button
+                    variant="borderless"
+                    className="mr-2"
+                    onClick={() => {
+                      openDialog({
+                        title: 'Upgrade your plan.',
+                        component: <ChangePlanModal />,
+                        props: {
+                          PaperProps: { className: 'p-0 max-w-xl w-full' },
+                          hidePrimaryAction: true,
+                          hideSecondaryAction: true,
+                          hideTitle: true,
+                        },
+                      });
+                    }}
+                  >
+                    Upgrade
+                  </Button>
+                )}
+              </div>
+            </div>
+
+            {currentProject.creator && (
+              <Text
+                color="secondary"
+                variant="subtitle2"
+                className="hidden md:block"
+              >
+                Created by{' '}
+                {currentProject.creator?.displayName ||
+                  currentProject.creator?.email}{' '}
+                {formatDistanceToNowStrict(parseISO(currentProject.createdAt))}{' '}
+                ago
+              </Text>
+            )}
+          </div>
+        </div>
       </div>
+
       <Link
-        href={`/${currentWorkspace.slug}/${currentApplication.slug}/settings/general`}
+        href={`/${currentWorkspace.slug}/${currentProject.slug}/settings/general`}
         passHref
       >
         <Button