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

chore: update versions

.changeset/config.json

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

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

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

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

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

.github/workflows/changesets.yaml

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

.github/workflows/ci.yaml

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

.github/workflows/codeql-analysis.yml

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

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

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

.gitignore

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

.vscode/settings.json

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

DEVELOPERS.md

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

README.md

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

config/vite.react.config.js

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

dashboard/.eslintrc.js

@@ -25,13 +25,9 @@ module.exports = {
       'error',
       { allowArrowFunctions: true, allowFunctions: true },
     ],
-    'import/no-named-as-default': 'off',
     'import/prefer-default-export': 'off',
     'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
-    // TODO: Temporarily disable this rule because of a WIP refactoring
-    'import/no-named-as-default': 'off',
     curly: ['error', 'all'],
-    'no-restricted-exports': 'off',
     'no-undef': 'off',
     'no-use-before-define': 'off',
     '@typescript-eslint/no-use-before-define': [
@@ -70,17 +66,7 @@ module.exports = {
           {
             group: ['..*'],
             message:
-              'Please use absolute imports instead. (e.g: @/ui/, @/hooks/, etc.)',
-          },
-          {
-            group: ['@/components/ui', '@/components/ui/*'],
-            message:
-              'Please use shorthand imports instead. (e.g: @/ui/ActivityIndicator, @/ui/Button, etc.)',
-          },
-          {
-            group: ['@/components/ui/v2*'],
-            message:
-              'Please use shorthand imports instead. (e.g: @/ui/v2/ActivityIndicator, @/ui/v2/Button, etc.)',
+              'Please use absolute imports instead. (e.g: @/components/, @/hooks/, etc.)',
           },
           {
             group: ['@testing-library/react*'],

dashboard/.storybook/preview.js

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

dashboard/CHANGELOG.md

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

dashboard/Dockerfile

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

dashboard/README.md

@@ -3,17 +3,33 @@
 This is the Nhost Dashboard, a web application that allows you to manage your Nhost projects.
 To get started, you need to have an Nhost project. If you don't have one, you can [create a project here](https://app.nhost.io).
 
+First, install the dependencies:
+
 ```bash
 pnpm install
 ```
 
+Then, build the packages that are used by the Nhost Dashboard:
+
+```bash
+pnpm -w build
+```
+
+Finally, run the development server:
+
+```bash
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) to see the result in your browser.
+
 ## Environment
 
 ### Setup Environment Variables
 
 Depending on the environment you wish to target you can configure environment variables in `.env.<target_environment>.local`.
 
-- `.env.development`: This file is used if you run `nhost dev`
+- `.env.development`: This file is used if you run `nhost up`
 - `.env.development.local`: This file is used if you run `pnpm dev`. It takes precedence over `.env.local` if available.
 - `.env.production.local`: This file is used if you run `pnpm build`. It takes precedence over `.env.local` if available.
 - `.env.local`: This file is used if you run either `pnpm dev` or `pnpm build`.
@@ -27,7 +43,7 @@ You can connect the Nhost Dashboard to your **locally running** Nhost backend in
 First, you need to run the following command to start your backend locally:
 
 ```bash
-cd <your_nhost_project> && nhost dev
+cd <your_nhost_project> && nhost up
 ```
 
 You can connect the Nhost Dashboard to your locally running backend by setting the following environment variables in `.env.development.local`:
@@ -54,6 +70,12 @@ Components are documented using [Storybook](https://storybook.js.org/). To run S
 pnpm storybook
 ```
 
+By default, Storybook will run on port `6006`. You can change this by passing the `--port` flag:
+
+```bash
+pnpm storybook --port 6007
+```
+
 ### General Environment Variables
 
 | Name                             | Description                                                                                                                                                                                                          |
@@ -92,7 +114,7 @@ pnpm storybook
 | Name                                         | Description                                                                                                                                                  |
 | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `react/react-in-jsx-scope`                   | Disabled because we don't need to import `React` anymore.                                                                                                    |
-| `react/jsx-props-no-spreading`               | Disabled because we heavily rely on props spreading in our `@/ui/v2` components.                                                                             |
+| `react/jsx-props-no-spreading`               | Disabled because we heavily rely on props spreading in our `@/components/ui/v2` components.                                                                  |
 | `react/require-default-props`                | Disabled because we use TypeScript instead of PropTypes.                                                                                                     |
 | `react-hooks/exhaustive-deps`                | Because we already had several rule violations when proper ESLint rules were introduced, we changed this rule to a warning.                                  |
 | `import/extensions`                          | JS / TS files should be imported without file extensions.                                                                                                    |
@@ -101,7 +123,6 @@ pnpm storybook
 | `import/order`                               | Until we have a better auto-formatter, we disable this rule.                                                                                                 |
 | `import/no-extraneous-dependencies`          | `devDependencies` should be excluded from the list of disallowed imports.                                                                                    |
 | `curly`                                      | By default it only enforces curly braces for multi-line blocks, but it should be enforced for single-line blocks as well.                                    |
-| `no-restricted-exports`                      | `export { default } from './module'` is used heavily in `@/ui/v2` which is a restricted export by default.                                                   |
 | `@typescript-eslint/no-use-before-define`    | Order of type references should be ignored.                                                                                                                  |
 | `no-undef`                                   | [Official TypeScript ESLint packages](https://github.com/typescript-eslint/typescript-eslint/issues/4671#issuecomment-1065948494) are turning off this rule. |
 | `@typescript-eslint/no-shadow`               | TypeScript specific implementation of `no-shadow`.                                                                                                           |
@@ -111,15 +132,19 @@ pnpm storybook
 | `@typescript-eslint/naming-convention`       | Enforces a consistent naming convention.                                                                                                                     |
 | `no-restricted-imports`                      | Enforces absolute imports and consistent import paths for components from `src/components/ui` folder.                                                        |
 
-### End-to-End Tests
+### Unit Tests
 
-End-to-end tests are written using [Playwright](https://playwright.dev/). To run the tests, run the following command:
+Unit tests are written using [Vitest](https://vitest.dev/). To run the tests, run the following command:
 
 ```bash
-pnpm e2e
+pnpm test
 ```
 
-Most of the tests require access to the Nhost test user. To run these tests, you need to set the following environment variables in `.env.test`:
+### End-to-End Tests
+
+Most of the end-to-end tests require access to an Nhost test user and a live project. You can register a user and create a test project on the [Nhost Dashboard](https://app.nhost.io/).
+
+Next, you need to create a project. Create a `.env.test` file with the following variables:
 
 ```
 NHOST_TEST_DASHBOARD_URL=<test_dashboard_url>
@@ -129,3 +154,20 @@ NHOST_TEST_WORKSPACE_NAME=<test_workspace_name>
 NHOST_TEST_PROJECT_NAME=<test_project_name>
 NHOST_TEST_PROJECT_ADMIN_SECRET=<test_project_admin_secret>
 ```
+
+**Required Variables**:
+
+- `NHOST_TEST_DASHBOARD_URL`: The URL to run the tests against (e.g: http://localhost:3000 or https://staging.app.nhost.io)
+- `NHOST_TEST_USER_EMAIL`: Email address of the test user that owns the test project
+- `NHOST_TEST_USER_PASSWORD`: Password of the test user that owns the test project
+- `NHOST_TEST_WORKSPACE_NAME`: Name of the workspace that contains the test project
+- `NHOST_TEST_PROJECT_NAME`: Name of the test project
+- `NHOST_TEST_PROJECT_ADMIN_SECRET`: Admin secret of the test project
+
+Make sure to copy the workspace and project information from the [Nhost Dashboard](https://app.nhost.io/).
+
+End-to-end tests are written using [Playwright](https://playwright.dev/). To run the tests, run the following command:
+
+```bash
+pnpm e2e
+```

dashboard/e2e/overview/overview.test.ts

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

dashboard/global-teardown.ts

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

dashboard/graphite.graphql.config.yaml

@@ -0,0 +1,14 @@
+schema:
+  - https://local.graphql.nhost.run/v1:
+      headers:
+        x-hasura-admin-secret: nhost-admin-secret
+generates:
+  src/utils/__generated__/graphite.graphql.ts:
+    documents:
+      - 'src/gql/graphite/**/*.gql'
+    plugins:
+      - 'typescript'
+      - 'typescript-operations'
+      - 'typescript-react-apollo'
+    config:
+      withRefetchFn: true

dashboard/graphql.config.yaml

@@ -7,6 +7,7 @@ generates:
     documents:
       - 'src/**/*.graphql'
       - 'src/**/*.gql'
+      - '!src/gql/graphite/**/*.gql'
     plugins:
       - 'typescript'
       - 'typescript-operations'

dashboard/hypertune.graphql

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

dashboard/hypertune.json

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

dashboard/package.json

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

dashboard/public/assets/brands/bitbucket.svg

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

dashboard/public/assets/brands/gitlab.svg

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

dashboard/public/assets/brands/strava.svg

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

dashboard/public/assets/hasuramodal.svg

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

dashboard/src/components/applications/HasuraData.tsx

@@ -1,118 +0,0 @@
-import { LoadingScreen } from '@/components/common/LoadingScreen';
-import { useCurrentWorkspaceAndProject } from '@/features/projects/hooks/useCurrentWorkspaceAndProject';
-import { useIsPlatform } from '@/features/projects/hooks/useIsPlatform';
-import Box from '@/ui/v2/Box';
-import Button from '@/ui/v2/Button';
-import IconButton from '@/ui/v2/IconButton';
-import ArrowSquareOutIcon from '@/ui/v2/icons/ArrowSquareOutIcon';
-import CopyIcon from '@/ui/v2/icons/CopyIcon';
-import Text from '@/ui/v2/Text';
-import {
-  defaultLocalBackendSlugs,
-  defaultRemoteBackendSlugs,
-  generateAppServiceUrl,
-} from '@/utils/common/generateAppServiceUrl';
-import { copy } from '@/utils/copy';
-import { getHasuraConsoleServiceUrl } from '@/utils/env';
-import Image from 'next/image';
-
-interface HasuraDataProps {
-  close?: () => void;
-}
-
-export function HasuraData({ close }: HasuraDataProps) {
-  const { currentProject } = useCurrentWorkspaceAndProject();
-  const isPlatform = useIsPlatform();
-  const projectAdminSecret = currentProject?.config?.hasura.adminSecret;
-
-  if (!currentProject?.subdomain || !projectAdminSecret) {
-    return <LoadingScreen />;
-  }
-
-  const hasuraUrl =
-    process.env.NEXT_PUBLIC_ENV === 'dev' || !isPlatform
-      ? `${getHasuraConsoleServiceUrl()}`
-      : generateAppServiceUrl(
-          currentProject?.subdomain,
-          currentProject?.region,
-          'hasura',
-          defaultLocalBackendSlugs,
-          { ...defaultRemoteBackendSlugs, hasura: '/console' },
-        );
-
-  return (
-    <div className="mx-auto w-full max-w-md px-6 py-4 text-left">
-      <div className="grid grid-flow-row gap-1">
-        <div className="mx-auto">
-          <Image
-            src="/assets/hasuramodal.svg"
-            width={72}
-            height={72}
-            alt="Hasura"
-          />
-        </div>
-
-        <Text variant="h3" component="h1" className="text-center">
-          Open Hasura
-        </Text>
-
-        <Text className="text-center">
-          Hasura is the dashboard you&apos;ll use to edit your schema and
-          permissions as well as browse data. Copy the admin secret to your
-          clipboard and enter it in the next screen.
-        </Text>
-
-        <Box className="mt-6 border-y-1">
-          <div className="grid w-full grid-cols-1 place-content-between items-center py-2 sm:grid-cols-3">
-            <Text className="col-span-1 text-center font-medium sm:justify-start sm:text-left">
-              Admin Secret
-            </Text>
-
-            <div className="col-span-1 grid grid-flow-col items-center justify-center gap-2 sm:col-span-2 sm:justify-end">
-              <Text className="font-medium" variant="subtitle2">
-                {Array(projectAdminSecret.length).fill('•').join('')}
-              </Text>
-
-              <IconButton
-                onClick={() => copy(projectAdminSecret, 'Hasura admin secret')}
-                variant="borderless"
-                color="secondary"
-                className="min-w-0 p-1"
-                aria-label="Copy admin secret"
-              >
-                <CopyIcon className="h-4 w-4" />
-              </IconButton>
-            </div>
-          </div>
-        </Box>
-
-        <div className="mt-6 grid grid-flow-row gap-2">
-          <Button
-            href={hasuraUrl}
-            // Both `target` and `rel` are available when `href` is set. This is
-            // a limitation of MUI.
-            // @ts-ignore
-            target="_blank"
-            rel="noreferrer noopener"
-            endIcon={<ArrowSquareOutIcon className="h-4 w-4" />}
-          >
-            Open Hasura
-          </Button>
-
-          {close && (
-            <Button
-              variant="outlined"
-              color="secondary"
-              className="text-sm+ font-normal"
-              onClick={close}
-            >
-              Cancel
-            </Button>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default HasuraData;

dashboard/src/components/applications/RestoreBackupModal.tsx

@@ -1,97 +0,0 @@
-import { useCurrentWorkspaceAndProject } from '@/features/projects/hooks/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 { useRestoreApplicationDatabaseMutation } from '@/utils/__generated__/graphql';
-import { triggerToast } from '@/utils/toast';
-import { formatISO9075 } from 'date-fns';
-import { useState } from 'react';
-
-export interface RestoreBackupModalModalProps {
-  /**
-   * Call this function to imperatively close the modal.
-   */
-  close: any;
-  /**
-   * Arbitrary data passed down to the modal.
-   *
-   */
-  data: any;
-}
-
-export function RestoreBackupModal({
-  close,
-  data,
-}: RestoreBackupModalModalProps) {
-  const { id: backupId, createdAt } = data;
-
-  const [isSure, setIsSure] = useState(false);
-  const [mutationIsCompleted, setMutationIsCompleted] = useState(false);
-  const { currentProject } = useCurrentWorkspaceAndProject();
-
-  const [restoreApplicationDatabase, { loading }] =
-    useRestoreApplicationDatabaseMutation();
-
-  const handleSubmit = async () => {
-    setMutationIsCompleted(false);
-    try {
-      await restoreApplicationDatabase({
-        variables: {
-          backupId,
-          appId: currentProject.id,
-        },
-      });
-    } catch (error) {
-      setMutationIsCompleted(false);
-      triggerToast('Database backup restoration failed');
-      return;
-    }
-    setMutationIsCompleted(true);
-    triggerToast('Database backup successfully scheduled for restoration.');
-  };
-
-  if (mutationIsCompleted) {
-    return (
-      <Box className="w-modal rounded-lg p-6">
-        <div className="flex flex-col">
-          <Text className="text-center text-lg font-medium">
-            The backup has been restored successfully.
-          </Text>
-
-          <Button className="mt-5" onClick={close}>
-            OK
-          </Button>
-        </div>
-      </Box>
-    );
-  }
-
-  return (
-    <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
-        </Text>
-        <Text className="mt-2 text-center font-normal">
-          You current database will be deleted, and the backup created{' '}
-          <span className="font-semibold">
-            {formatISO9075(new Date(createdAt))}
-          </span>{' '}
-          will be restored.
-        </Text>
-
-        <Box className="my-4 border-y py-2 px-2">
-          <Checkbox
-            checked={isSure}
-            onChange={(_event, checked) => setIsSure(checked)}
-            label="I'm sure I want to restore this backup."
-          />
-        </Box>
-        <Button onClick={handleSubmit} disabled={!isSure} loading={loading}>
-          Restore
-        </Button>
-      </div>
-    </Box>
-  );
-}

dashboard/src/components/applications/StagingMetadata.tsx

@@ -1,19 +0,0 @@
-import Status, { StatusEnum } from '@/ui/Status';
-import Box from '@/ui/v2/Box';
-import { isDevOrStaging } from '@/utils/helpers';
-import type { PropsWithChildren } from 'react';
-
-export function StagingMetadata({ children }: PropsWithChildren<unknown>) {
-  return (
-    isDevOrStaging() && (
-      <div className="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}
-        </Box>
-      </div>
-    )
-  );
-}
-
-export default StagingMetadata;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
+import type { CommonDialogProps } from '@/components/ui/v2/Dialog';
 import type { DialogFormProps } from '@/types/common';
-import type { CommonDialogProps } from '@/ui/v2/Dialog';
 import type { ReactElement, ReactNode } from 'react';
 import { createContext } from 'react';
 

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

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

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

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

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

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

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

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

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

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

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

@@ -1,31 +0,0 @@
-import { FeedbackReceived } from '@/components/home/FeedbackReceived';
-import { SendFeedback } from '@/components/home/SendFeedback';
-import type { DetailedHTMLProps, HTMLProps } from 'react';
-import { useState } from 'react';
-import { twMerge } from 'tailwind-merge';
-
-export interface FeedbackFormProps
-  extends DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement> {}
-
-// TODO: Use `react-hook-form` here instead of the custom solution
-export default function FeedbackForm({
-  className,
-  ...props
-}: FeedbackFormProps) {
-  const [feedback, setFeedback] = useState('');
-  const [feedbackSent, setFeedbackSent] = useState(false);
-
-  return (
-    <div className={twMerge('max-w-md py-4 px-5', className)} {...props}>
-      {!feedbackSent ? (
-        <SendFeedback
-          setFeedbackSent={setFeedbackSent}
-          feedback={feedback}
-          setFeedback={setFeedback}
-        />
-      ) : (
-        <FeedbackReceived setFeedbackSent={setFeedbackSent} close={() => {}} />
-      )}
-    </div>
-  );
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,13 +1,13 @@
-import { useIsPlatform } from '@/features/projects/hooks/useIsPlatform';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { Text } from '@/components/ui/v2/Text';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
 import {
   GetAllWorkspacesAndProjectsDocument,
   GetWorkspaceMemberInvitesToManageDocument,
   useGetWorkspaceMemberInvitesToManageQuery,
 } from '@/generated/graphql';
 import { useSubmitState } from '@/hooks/useSubmitState';
-import Box from '@/ui/v2/Box';
-import Button from '@/ui/v2/Button';
-import Text from '@/ui/v2/Text';
 import { nhost } from '@/utils/nhost';
 import { triggerToast } from '@/utils/toast';
 import { useApolloClient } from '@apollo/client';
@@ -16,7 +16,7 @@ import { useUserData } from '@nhost/nextjs';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 
-export function InviteAnnounce() {
+export default function InviteNotification() {
   const user = useUserData();
 
   const isPlatform = useIsPlatform();
@@ -198,5 +198,3 @@ export function InviteAnnounce() {
     </Box>
   );
 }
-
-export default InviteAnnounce;

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

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

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

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

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

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

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

@@ -1,9 +1,9 @@
-import type { ButtonProps } from '@/ui/v2/Button';
-import Button from '@/ui/v2/Button';
-import ChevronLeftIcon from '@/ui/v2/icons/ChevronLeftIcon';
-import ChevronRightIcon from '@/ui/v2/icons/ChevronRightIcon';
-import Input from '@/ui/v2/Input';
-import Text from '@/ui/v2/Text';
+import type { ButtonProps } from '@/components/ui/v2/Button';
+import { Button } from '@/components/ui/v2/Button';
+import { ChevronLeftIcon } from '@/components/ui/v2/icons/ChevronLeftIcon';
+import { ChevronRightIcon } from '@/components/ui/v2/icons/ChevronRightIcon';
+import { Input } from '@/components/ui/v2/Input';
+import { Text } from '@/components/ui/v2/Text';
 import type { DetailedHTMLProps, HTMLProps } from 'react';
 import { twMerge } from 'tailwind-merge';
 
@@ -15,6 +15,7 @@ export type PaginationProps = DetailedHTMLProps<
    * Total number of pages.
    */
   totalNrOfPages: number;
+
   /**
    * Number of total elements per page.
    */
@@ -23,6 +24,10 @@ export type PaginationProps = DetailedHTMLProps<
    * Total number of elements.
    */
   totalNrOfElements: number;
+  /**
+   * Label of the elements displayed ex: pages, users...
+   */
+  itemsLabel: string;
   /**
    * Current page number.
    */
@@ -64,6 +69,7 @@ export default function Pagination({
   elementsPerPage,
   onPageChange,
   totalNrOfElements,
+  itemsLabel,
   ...props
 }: PaginationProps) {
   return (
@@ -132,7 +138,7 @@ export default function Pagination({
           {totalNrOfElements < currentPageNumber * elementsPerPage
             ? totalNrOfElements
             : currentPageNumber * elementsPerPage}{' '}
-          of {totalNrOfElements} users
+          of {totalNrOfElements} {itemsLabel}
         </Text>
       </div>
     </div>

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

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

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

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

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

@@ -1,7 +1,7 @@
-import Option from '@/ui/v2/Option';
-import type { SelectProps } from '@/ui/v2/Select';
-import Select from '@/ui/v2/Select';
-import useColorPreference from '@/ui/v2/useColorPreference';
+import { Option } from '@/components/ui/v2/Option';
+import type { SelectProps } from '@/components/ui/v2/Select';
+import { Select } from '@/components/ui/v2/Select';
+import { useColorPreference } from '@/components/ui/v2/useColorPreference';
 
 export interface ThemeSwitcherProps extends SelectProps<any> {}
 

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

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

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

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

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

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

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

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

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

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

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

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

dashboard/src/components/dataGrid/DataGrid/DataGrid.tsx

@@ -1,19 +1,19 @@
-import DataGridBody from '@/components/common/DataGridBody';
-import DataGridFrame from '@/components/common/DataGridFrame';
-import type { DataGridHeaderProps } from '@/components/common/DataGridHeader';
-import DataGridHeader from '@/components/common/DataGridHeader';
-import { DataGridProvider } from '@/context/DataGridContext';
+import type { UseDataGridOptions } from '@/components/dataGrid/DataGrid/useDataGrid';
+import { DataGridBody } from '@/components/dataGrid/DataGridBody';
+import { DataGridConfigProvider } from '@/components/dataGrid/DataGridConfigProvider';
+import { DataGridFrame } from '@/components/dataGrid/DataGridFrame';
+import type { DataGridHeaderProps } from '@/components/dataGrid/DataGridHeader';
+import { DataGridHeader } from '@/components/dataGrid/DataGridHeader';
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { Box } from '@/components/ui/v2/Box';
 import { DataBrowserEmptyState } from '@/features/database/dataGrid/components/DataBrowserEmptyState';
 import type { DataBrowserGridColumn } from '@/features/database/dataGrid/types/dataBrowser';
-import type { UseDataGridOptions } from '@/hooks/useDataGrid';
-import useDataGrid from '@/hooks/useDataGrid';
-import ActivityIndicator from '@/ui/v2/ActivityIndicator';
-import Box from '@/ui/v2/Box';
 import type { ForwardedRef } from 'react';
 import { forwardRef, useEffect, useRef } from 'react';
 import mergeRefs from 'react-merge-refs';
 import type { Column, Row, SortingRule, TableOptions } from 'react-table';
 import { twMerge } from 'tailwind-merge';
+import useDataGrid from './useDataGrid';
 
 export interface DataGridProps<TColumnData extends object>
   extends Omit<UseDataGridOptions<TColumnData>, 'tableRef'> {
@@ -130,7 +130,7 @@ function DataGrid<TColumnData extends object>(
   }, [allowSort, dataGridProps.state.sortBy, onSort, toggleAllRowsSelected]);
 
   return (
-    <DataGridProvider
+    <DataGridConfigProvider
       toggleAllRowsSelected={toggleAllRowsSelected}
       setSortBy={setSortBy}
       tableRef={tableRef}
@@ -176,7 +176,7 @@ function DataGrid<TColumnData extends object>(
 
         {loading && <ActivityIndicator delay={1000} className="my-4" />}
       </>
-    </DataGridProvider>
+    </DataGridConfigProvider>
   );
 }
 

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

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

dashboard/src/components/dataGrid/DataGrid/useDataGrid.tsx

@@ -1,4 +1,4 @@
-import Checkbox from '@/ui/v2/Checkbox';
+import { Checkbox } from '@/components/ui/v2/Checkbox';
 import type { MutableRefObject } from 'react';
 import { useMemo } from 'react';
 import type { PluginHook, TableInstance, TableOptions } from 'react-table';

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

@@ -1,11 +1,11 @@
-import type { DataGridProps } from '@/components/common/DataGrid';
-import DataGridCell from '@/components/common/DataGridCell';
+import type { DataGridProps } from '@/components/dataGrid/DataGrid';
+import { DataGridCell } from '@/components/dataGrid/DataGridCell';
+import { useDataGridConfig } from '@/components/dataGrid/DataGridConfigProvider';
+import type { BoxProps } from '@/components/ui/v2/Box';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
 import type { DataBrowserGridColumn } from '@/features/database/dataGrid/types/dataBrowser';
-import useDataGridConfig from '@/hooks/useDataGridConfig';
-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 type { DetailedHTMLProps, HTMLProps, KeyboardEvent } from 'react';
 import { Fragment, useMemo, useRef } from 'react';
 import type { Row } from 'react-table';
@@ -178,6 +178,22 @@ export default function DataGridBody<T extends object>({
     }
   }
 
+  const getBackgroundCellColor = (
+    row: Row<T>,
+    column: DataBrowserGridColumn<T>,
+  ) => {
+    // Grey out files not uploaded
+    if (!row.values.isUploaded) {
+      return 'grey.200';
+    }
+
+    if (column.isDisabled) {
+      return 'grey.100';
+    }
+
+    return 'background.paper';
+  };
+
   return (
     <div {...getTableBodyProps()} ref={bodyRef} {...props}>
       {rows.length === 0 && !loading && (
@@ -260,9 +276,7 @@ export default function DataGridBody<T extends object>({
                     })}
                     cell={cell}
                     sx={{
-                      backgroundColor: column.isDisabled
-                        ? 'grey.100'
-                        : 'background.paper',
+                      backgroundColor: getBackgroundCellColor(row, column),
                       color: isCellDisabled ? 'text.secondary' : 'text.primary',
                     }}
                     className={twMerge(

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

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

dashboard/src/components/dataGrid/DataGridBooleanCell/DataGridBooleanCell.tsx

@@ -1,7 +1,7 @@
-import type { CommonDataGridCellProps } from '@/components/common/DataGridCell';
-import { useDataGridCell } from '@/components/common/DataGridCell';
-import ReadOnlyToggle from '@/components/common/ReadOnlyToggle';
-import { Dropdown } from '@/ui/v2/Dropdown';
+import type { CommonDataGridCellProps } from '@/components/dataGrid/DataGridCell';
+import { useDataGridCell } from '@/components/dataGrid/DataGridCell';
+import { ReadOnlyToggle } from '@/components/presentational/ReadOnlyToggle';
+import { Dropdown } from '@/components/ui/v2/Dropdown';
 import type { KeyboardEvent as ReactKeyboardEvent, MouseEvent } from 'react';
 import { twMerge } from 'tailwind-merge';
 
@@ -70,7 +70,7 @@ export default function DataGridBooleanCell<TData extends object>({
       <Dropdown.Trigger
         id="boolean-trigger"
         className={twMerge(
-          'h-full w-full border-none outline-none p-0',
+          'h-full w-full border-none p-0 outline-none',
           isEditing && 'p-1.5',
         )}
         ref={inputRef}

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

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

dashboard/src/components/dataGrid/DataGridCell/DataGridCell.tsx

@@ -1,12 +1,12 @@
 import { useDialog } from '@/components/common/DialogProvider';
+import type { BoxProps } from '@/components/ui/v2/Box';
+import { Box } from '@/components/ui/v2/Box';
+import { Tooltip, useTooltip } from '@/components/ui/v2/Tooltip';
 import type {
   ColumnType,
   DataBrowserGridCell,
   DataBrowserGridCellProps,
 } from '@/features/database/dataGrid/types/dataBrowser';
-import type { BoxProps } from '@/ui/v2/Box';
-import Box from '@/ui/v2/Box';
-import Tooltip, { useTooltip } from '@/ui/v2/Tooltip';
 import { triggerToast } from '@/utils/toast';
 import type { FocusEvent, KeyboardEvent, MouseEvent } from 'react';
 import {

dashboard/src/components/dataGrid/DataGridCell/index.ts

@@ -1,5 +1,5 @@
 export * from './DataGridCell';
-export { default } from './DataGridCell';
+export { default as DataGridCell } from './DataGridCell';
 export * from './DataGridCellProvider';
 export { default as DataGridCellProvider } from './DataGridCellProvider';
 export { default as useDataGridCell } from './useDataGridCell';

dashboard/src/components/dataGrid/DataGridConfigProvider/DataGridConfigContext.ts

@@ -0,0 +1,6 @@
+import type { UseDataGridReturn } from '@/components/dataGrid/DataGrid';
+import { createContext } from 'react';
+
+const DataGridConfigContext = createContext<Partial<UseDataGridReturn>>(null);
+
+export default DataGridConfigContext;

dashboard/src/components/dataGrid/DataGridConfigProvider/DataGridConfigProvider.tsx

@@ -0,0 +1,16 @@
+import type { UseDataGridReturn } from '@/components/dataGrid/DataGrid';
+import type { PropsWithChildren } from 'react';
+import DataGridConfigContext from './DataGridConfigContext';
+
+export default function DataGridConfigProvider<T extends object = {}>({
+  children,
+  ...value
+}: PropsWithChildren<UseDataGridReturn<T>>) {
+  return (
+    <DataGridConfigContext.Provider
+      value={value as unknown as UseDataGridReturn<{}>}
+    >
+      {children}
+    </DataGridConfigContext.Provider>
+  );
+}

dashboard/src/components/dataGrid/DataGridConfigProvider/index.ts

@@ -0,0 +1,3 @@
+export { default as DataGridConfigContext } from './DataGridConfigContext';
+export { default as DataGridConfigProvider } from './DataGridConfigProvider';
+export { default as useDataGridConfig } from './useDataGridConfig';

dashboard/src/components/dataGrid/DataGridConfigProvider/useDataGridConfig.ts

@@ -0,0 +1,15 @@
+import type { UseDataGridReturn } from '@/components/dataGrid/DataGrid';
+import { useContext } from 'react';
+import DataGridConfigContext from './DataGridConfigContext';
+
+export default function useDataGridConfig<T extends object = {}>() {
+  const context = useContext(DataGridConfigContext);
+
+  if (!context) {
+    throw new Error(
+      `useDataGridConfig must be used within a DataGridConfigContext`,
+    );
+  }
+
+  return context as unknown as UseDataGridReturn<T>;
+}

dashboard/src/components/dataGrid/DataGridDateCell/DataGridDateCell.tsx

@@ -1,9 +1,9 @@
-import type { CommonDataGridCellProps } from '@/components/common/DataGridCell';
-import { useDataGridCell } from '@/components/common/DataGridCell';
-import Input, { inputClasses } from '@/ui/v2/Input';
-import type { TextProps } from '@/ui/v2/Text';
-import Text from '@/ui/v2/Text';
-import { getDateComponents } from '@/utils/formatDate';
+import type { CommonDataGridCellProps } from '@/components/dataGrid/DataGridCell';
+import { useDataGridCell } from '@/components/dataGrid/DataGridCell';
+import { Input, inputClasses } from '@/components/ui/v2/Input';
+import type { TextProps } from '@/components/ui/v2/Text';
+import { Text } from '@/components/ui/v2/Text';
+import { getDateComponents } from '@/utils/getDateComponents';
 import type { ChangeEvent, KeyboardEvent } from 'react';
 import { twMerge } from 'tailwind-merge';
 

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

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