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

chore: update versions

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: enhancement
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

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

@@ -5,6 +5,10 @@ inputs:
     description: 'Turborepo token'
   TURBO_TEAM:
     description: 'Turborepo team'
+  BUILD:
+    description: 'Build packages'
+    default: 'default'
+
 runs:
   using: 'composite'
   steps:
@@ -35,6 +39,14 @@ runs:
     # * They are reused through the Turborepo cache
     - shell: bash
       name: Build packages
+      if: ${{ inputs.BUILD == 'all' }}
+      run: pnpm build:all
+      env:
+        TURBO_TOKEN: ${{ inputs.TURBO_TOKEN }}
+        TURBO_TEAM: ${{ inputs.TURBO_TEAM }}
+    - shell: bash
+      name: Build everything in the monorepo
+      if: ${{ inputs.BUILD == 'default' }}
       run: pnpm build
       env:
         TURBO_TOKEN: ${{ inputs.TURBO_TOKEN }}

.github/actions/nhost-cli/README.md

@@ -0,0 +1,108 @@
+# Nhost CLI GitHub Action
+
+## Usage
+
+```yaml
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install the Nhost CLI
+        uses: ./.github/actions/nhost-cli
+```
+
+### Install the CLI and start the app
+
+```yaml
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install Nhost CLI and start the application
+        uses: ./.github/actions/nhost-cli
+        with:
+          start: true
+```
+
+### Set another working directory
+
+```yaml
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install Nhost CLI
+        uses: ./.github/actions/nhost-cli
+        with:
+          path: examples/react-apollo
+          start: true
+```
+
+### Don't wait for the app to be ready
+
+```yaml
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install Nhost CLI and start app
+        uses: ./.github/actions/nhost-cli
+        with:
+          start: true
+          wait: false
+```
+
+### Stop the app
+
+```yaml
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Start app
+        uses: ./.github/actions/nhost-cli
+        with:
+          start: true
+      - name: Do something
+        cmd: echo "do something"
+      - name: Stop
+        uses: ./.github/actions/nhost-cli
+        with:
+          stop: true
+```
+
+### Install a given value of the CLI
+
+```yaml
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install Nhost CLI
+        uses: ./.github/actions/nhost-cli
+        with:
+          version: v0.8.10
+```
+
+### Inject values into nhost/config.yaml
+
+```yaml
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install Nhost CLI
+        uses: ./.github/actions/nhost-cli
+        with:
+          config: |
+            services:
+              auth:
+                image: nhost/hasura-auth:0.16.1
+```

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

@@ -0,0 +1,75 @@
+name: Nhost CLI
+description: 'Action to install the Nhost CLI and to run an application'
+inputs:
+  start:
+    description: "Start the application. If false, the application won't be started"
+    default: 'false'
+  wait:
+    description: 'If starting the application, wait until it is ready'
+    default: 'true'
+  stop:
+    description: 'Stop the application'
+    default: 'false'
+  path:
+    description: 'Path to the application'
+    default: '.'
+  version:
+    description: 'Version of the Nhost CLI'
+    default: 'latest'
+  config:
+    description: 'Values to be injected into nhost/config.yaml'
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Check if Nhost CLI is already installed
+      id: check-nhost-cli
+      shell: bash
+      # TODO check if the version is the same
+      run: |
+        if [ -z "$(which nhost)" ]
+        then
+            echo "installed=false" >> $GITHUB_OUTPUT
+        else
+            echo "installed=true" >> $GITHUB_OUTPUT
+        fi
+    - name: Install Nhost CLI
+      if: ${{ steps.check-nhost-cli.outputs.installed == 'false' }}
+      shell: bash
+      run: bash <(curl --silent -L https://raw.githubusercontent.com/nhost/cli/main/get.sh) ${{ inputs.version }}
+    - name: Set custom configuration
+      if: ${{ inputs.config }}
+      shell: bash
+      working-directory: ${{ inputs.path }}
+      run: config="${{ inputs.config }}" yq -i '. *= env(config)' nhost/config.yaml
+    - name: Start the application
+      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
+    - name: Log on failure
+      if: steps.wait.outcome == 'failure'
+      shell: bash
+      working-directory: ${{ inputs.path }}
+      run: |
+        nhost logs
+        exit 1
+    - name: Stop the application
+      if: ${{ inputs.stop == 'true' }}
+      shell: bash
+      working-directory: ${{ inputs.path }}
+      run: nhost down

.github/labeler.yml

@@ -0,0 +1,22 @@
+dashboard:
+  - dashboard/**/*
+
+documentation:
+  - any:
+      - docs/**/*
+      - '!docs/docs/reference/docgen/**/*'
+
+examples:
+  - examples/**/*
+
+sdk:
+  - packages/**/*
+
+react:
+  - '{packages,examples}/*react*/**/*'
+
+nextjs:
+  - '{packages,examples}/*next*/**/*'
+
+vue:
+  - '{packages,examples}/*vue*/**/*'

.github/renovate.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:base"
+  ],
+  "docker-compose": {
+    "enabled": true
+  },
+  "ignoreDeps": [
+    "pnpm",
+    "node"
+  ],
+  "labels": [
+    "dependencies"
+  ]
+}

.github/workflows/changesets.yaml

@@ -148,3 +148,33 @@ jobs:
           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
+    runs-on: ubuntu-latest
+    needs:
+      - version
+      - publish-docker
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+        with:
+          repository: nhost/cli
+          token: ${{ secrets.GH_PAT }}
+          fetch-depth: 0
+      - name: Bump version in source code
+        run: |
+          IMAGE=$(echo ${{ env.DASHBOARD_PACKAGE }} | sed 's/@\(.\+\)\/\(.\+\)/\1\\\/\2/g')
+          VERSION="${{ needs.version.outputs.dashboardVersion }}"
+          EXPRESSION='s/"'$IMAGE':[0-9]\+\.[0-9]\+\.[0-9]\+"/"'$IMAGE':'$VERSION'"/g'
+          find ./ -type f -exec sed -i -e $EXPRESSION {} \;
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v4
+        with:
+          token: ${{ secrets.GH_PAT }}
+          commit-message: 'chore: bump nhost/dashboard to ${{ needs.version.outputs.dashboardVersion }}'
+          branch: bump-dashboard-version
+          delete-branch: true
+          title: 'chore: bump nhost/dashboard to ${{ needs.version.outputs.dashboardVersion }}'
+          body: |
+            This PR bumps the Nhost Dashboard Docker image to version ${{ needs.version.outputs.dashboardVersion }}.

.github/workflows/ci.yaml

@@ -1,11 +1,9 @@
-name: Packages
+name: Continuous Integration
 
 on:
   push:
     branches: [main]
     paths-ignore:
-      - 'dashboard/**'
-      - 'docs/**'
       - 'assets/**'
       - '**.md'
       - 'LICENSE'
@@ -13,15 +11,16 @@ on:
     branches: [main]
     types: [opened, synchronize]
     paths-ignore:
-      - 'dashboard/**'
-      - 'docs/**'
       - 'assets/**'
       - '**.md'
       - 'LICENSE'
-
 env:
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
   TURBO_TEAM: nhost
+  NEXT_PUBLIC_ENV: dev
+  NEXT_TELEMETRY_DISABLED: 1
+  NEXT_PUBLIC_NHOST_BACKEND_URL: http://localhost:1337
+
 jobs:
   build:
     name: Build @nhost packages
@@ -36,21 +35,34 @@ jobs:
         with:
           TURBO_TOKEN: ${{ env.TURBO_TOKEN }}
           TURBO_TEAM: ${{ env.TURBO_TEAM }}
+          BUILD: 'all'
+      - name: Check if the pnpm lockfile changed
+        id: changed-lockfile
+        uses: tj-actions/changed-files@v34
+        with:
+          files: pnpm-lock.yaml
+      # * Determine a pnpm filter argument for packages that have been modified.
+      # * If the lockfile has changed, we don't filter anything in order to run all the e2e tests.
+      - name: filter packages
+        id: filter-packages
+        if: steps.changed-lockfile.outputs.any_changed != 'true' && github.event_name == 'pull_request'
+        run: echo "filter=${{ format('--filter=...[origin/{0}]', github.base_ref) }}" >> $GITHUB_OUTPUT
       # * List packagesthat has an `e2e` script, except the root, and return an array of their name and path
       # * In a PR, only include packages that have been modified, and their dependencies
       - name: List examples with an e2e script
         id: set-matrix
         run: |
-          FILTER_MODIFIED="${{ github.event_name == 'pull_request' && format('--filter=...[origin/{0}]', github.base_ref) || '' }}"
-          PACKAGES=$(pnpm recursive list --depth -1 --parseable --filter='!nhost-root' $FILTER_MODIFIED \
+          PACKAGES=$(pnpm recursive list --depth -1 --parseable --filter='!nhost-root' ${{ steps.filter-packages.outputs.filter }} \
+            | xargs -I@ realpath --relative-to=$PWD @ \
             | xargs -I@ jq "if (.scripts.e2e | length) != 0  then {name: .name, path: \"@\"} else null end" @/package.json \
             | awk "!/null/" \
             | jq -c --slurp)
           echo "matrix=$PACKAGES" >> $GITHUB_OUTPUT
     outputs:
       matrix: ${{ steps.set-matrix.outputs.matrix }}
+
   e2e:
-    name: 'e2e: ${{ matrix.package.name }}'
+    name: 'e2e (${{ matrix.package.path }})'
     needs: build
     if: ${{ needs.build.outputs.matrix != '[]' && needs.build.outputs.matrix != '' }}
     strategy:
@@ -70,7 +82,7 @@ jobs:
       # * Install Nhost CLI if a `nhost/config.yaml` file is found
       - name: Install Nhost CLI
         if: hashFiles(format('{0}/nhost/config.yaml', matrix.package.path)) != ''
-        run: curl -L https://raw.githubusercontent.com/nhost/cli/main/get.sh | bash
+        uses: ./.github/actions/nhost-cli
       # * Run the `ci` script of the current package of the matrix. Dependencies build is cached by Turborepo
       - name: Run e2e test
         run: pnpm --filter="${{ matrix.package.name }}" run e2e
@@ -89,6 +101,7 @@ jobs:
           path: |
             ${{format('{0}/cypress/screenshots/**', matrix.package.path)}}
             ${{format('{0}/cypress/videos/**', matrix.package.path)}}
+
   unit:
     name: Unit tests
     needs: build
@@ -103,7 +116,7 @@ jobs:
           TURBO_TEAM: ${{ env.TURBO_TEAM }}
       # * Run every `test` script in the workspace . Dependencies build is cached by Turborepo
       - name: Run unit tests
-        run: pnpm run test
+        run: pnpm run test:all
       - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v3
         with:
@@ -113,6 +126,7 @@ jobs:
         run: |
           echo '### Code coverage' >> $GITHUB_STEP_SUMMARY
           echo 'Visit [codecov](https://app.codecov.io/gh/nhost/nhost/) to see the code coverage reports' >> $GITHUB_STEP_SUMMARY
+
   lint:
     name: Lint
     needs: build
@@ -127,4 +141,4 @@ jobs:
           TURBO_TEAM: ${{ env.TURBO_TEAM }}
       # * Run every `lint` script in the workspace . Dependencies build is cached by Turborepo
       - name: Lint
-        run: pnpm run lint
+        run: pnpm run lint:all

.github/workflows/contributors.yaml

@@ -10,6 +10,6 @@ jobs:
     name: A job to automate contrib in readme
     steps:
       - name: Contribute List
-        uses: akhilmhdh/contributors-readme-action@v2.3.4
+        uses: akhilmhdh/contributors-readme-action@v2.3.6
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/dashboard.yaml

@@ -2,24 +2,17 @@ name: 'Dashboard'
 
 on:
   workflow_call:
-  pull_request:
-    branches: [main]
-    types: [opened, synchronize]
-    paths:
-      - 'packages/**'
-      - 'dashboard/**'
 
 env:
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
   TURBO_TEAM: nhost
+  NEXT_PUBLIC_ENV: dev
+  NEXT_TELEMETRY_DISABLED: 1
+  NEXT_PUBLIC_NHOST_BACKEND_URL: http://localhost:1337
 jobs:
   build:
     name: Build
     runs-on: ubuntu-latest
-    env:
-      NEXT_PUBLIC_ENV: dev
-      NEXT_TELEMETRY_DISABLED: 1
-      NEXT_PUBLIC_NHOST_BACKEND_URL: http://localhost:1337
     steps:
       - uses: actions/checkout@v3
       - name: Install Node and dependencies
@@ -33,10 +26,6 @@ jobs:
   tests:
     name: Tests
     runs-on: ubuntu-latest
-    env:
-      NEXT_PUBLIC_ENV: dev
-      NEXT_TELEMETRY_DISABLED: 1
-      NEXT_PUBLIC_NHOST_BACKEND_URL: http://localhost:1337
     steps:
       - uses: actions/checkout@v3
       - name: Install Node and dependencies
@@ -50,10 +39,6 @@ jobs:
   lint:
     name: Lint
     runs-on: ubuntu-latest
-    env:
-      NEXT_PUBLIC_ENV: dev
-      NEXT_TELEMETRY_DISABLED: 1
-      NEXT_PUBLIC_NHOST_BACKEND_URL: http://localhost:1337
     steps:
       - uses: actions/checkout@v3
       - name: Install Node and dependencies

.github/workflows/labeler.yaml

@@ -0,0 +1,15 @@
+name: 'Pull Request Labeler'
+on:
+  - pull_request_target
+
+jobs:
+  triage:
+    permissions:
+      contents: read
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/labeler@v4
+        with:
+          repo-token: '${{ secrets.GH_PAT }}'
+          sync-labels: ''

.github/workflows/renovate.yaml

@@ -0,0 +1,68 @@
+name: Renovate
+
+on:
+  pull_request:
+    branches: [main]
+    types: [closed]
+    paths-ignore:
+      - 'assets/**'
+      - '**.md'
+      - 'LICENSE'
+env:
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: nhost
+
+jobs:
+  renovate-changeset:
+    name: Add changeset
+    if: github.event.pull_request.merged == true && startsWith(github.head_ref, 'renovate/')
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      # * Install Node and dependencies. Package downloads will be cached for the next jobs.
+      - name: Install Node and dependencies
+        uses: ./.github/actions/install-dependencies
+        with:
+          TURBO_TOKEN: ${{ env.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ env.TURBO_TEAM }}
+          BUILD: 'none'
+      - name: Determine bumps
+        id: bumps
+        run: |
+          LAST_NON_PR_SHA=$(git log --no-merges main origin/${{ github.head_ref }} --format=format:%h -- | head -2 | tail -1)
+          echo "result<<EOF" >> $GITHUB_OUTPUT
+          pnpm recursive list --depth -1 --parseable \
+              --filter='!nhost-root' \
+              --filter=[$LAST_NON_PR_SHA] \
+              | xargs -I@ jq ".name" @/package.json \
+              | sort \
+              | uniq -u \
+              | awk '$0=$0": patch"' \
+              >> $GITHUB_OUTPUT
+          echo 'EOF' >> $GITHUB_OUTPUT
+      - name: Install dictionary
+        if: steps.bumps.outputs.result != ''
+        run: sudo apt-get install wbritish
+      - name: Generate changeset file name
+        id: file_name
+        if: steps.bumps.outputs.result != ''
+        run: |
+          FILE_NAME=$(shuf -n 3 /usr/share/dict/words | tr '\n' '-' | sed 's/-$//' | sed 's/'"'"'s//g' | tr '[:upper:]' '[:lower:]')
+          echo "result=./.changeset/${FILE_NAME}.md" >> $GITHUB_OUTPUT
+      - name: Create changeset file
+        if: steps.bumps.outputs.result != ''
+        run: |
+          cat <<EOF > ${{ steps.file_name.outputs.result }}
+          ---
+          ${{ steps.bumps.outputs.result }}
+          ---
+
+          ${{ github.event.pull_request.title }}
+          EOF
+      - uses: stefanzweifel/git-auto-commit-action@v4
+        if: steps.bumps.outputs.result != ''
+        with:
+          commit_message: ${{ github.event.pull_request.title }}
+          branch: main

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

@@ -0,0 +1,104 @@
+name: Test Nhost CLI action
+
+on:
+  pull_request:
+    branches: [main]
+    types: [opened, synchronize]
+    paths:
+      - '.github/actions/nhost-cli/**'
+      - '!.github/actions/nhost-cli/**/*.md'
+
+jobs:
+  install:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install the Nhost CLI
+        uses: ./.github/actions/nhost-cli
+      - name: should succeed running the nhost command
+        run: nhost
+
+  start:
+    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
+      - name: should be running
+        run: curl -sSf 'http://localhost:9695' > /dev/null
+
+  stop:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install the Nhost CLI, start and stop the application
+        uses: ./.github/actions/nhost-cli
+        with:
+          path: packages/nhost-js
+          start: true
+          stop: true
+      - name: should have no live docker container
+        run: |
+          if [ -z "docker ps -q" ]; then
+            echo "Some docker containers are still running"
+            docker ps
+            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:
+      - uses: actions/checkout@v3
+      - name: Install the Nhost CLI and run the application
+        uses: ./.github/actions/nhost-cli
+        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"}'
+          if [ "$VERSION" != "$EXPECTED_VERSION" ]; then
+            echo "Expected version $EXPECTED_VERSION but got $VERSION"
+            exit 1
+          fi
+
+  version:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install the Nhost CLI
+        uses: ./.github/actions/nhost-cli
+        with:
+          version: v0.8.10
+      - name: should find the correct version
+        run: nhost version | head -n 1 | grep v0.8.10 || exit 1

.npmrc

@@ -0,0 +1 @@
+prefer-workspace-packages = true

.prettierignore

@@ -14,4 +14,5 @@ package.json
 tsconfig.json
 tsconfig.*.json
 *.d.ts
-.next
+.next
+**/pnpm-lock.yaml

README.md

@@ -258,21 +258,28 @@ Here are some ways of contributing to making Nhost better:
             <sub><b>Subhendu Kundu</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/badgifter">
+            <img src="https://avatars.githubusercontent.com/u/50094885?v=4" width="100;" alt="badgifter"/>
+            <br />
+            <sub><b>Bad Gifter</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/heygambo">
             <img src="https://avatars.githubusercontent.com/u/449438?v=4" width="100;" alt="heygambo"/>
             <br />
             <sub><b>Christian Gambardella</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/dbarrosop">
             <img src="https://avatars.githubusercontent.com/u/6246622?v=4" width="100;" alt="dbarrosop"/>
             <br />
             <sub><b>David Barroso</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/hajek-raven">
             <img src="https://avatars.githubusercontent.com/u/7288737?v=4" width="100;" alt="hajek-raven"/>
@@ -294,13 +301,21 @@ Here are some ways of contributing to making Nhost better:
             <sub><b>Jerry Jäppinen</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/wollerman">
+            <img src="https://avatars.githubusercontent.com/u/1610241?v=4" width="100;" alt="wollerman"/>
+            <br />
+            <sub><b>Matt Wollerman</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/mdp18">
             <img src="https://avatars.githubusercontent.com/u/11698527?v=4" width="100;" alt="mdp18"/>
             <br />
             <sub><b>Max</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/mustafa-hanif">
             <img src="https://avatars.githubusercontent.com/u/30019262?v=4" width="100;" alt="mustafa-hanif"/>
@@ -314,8 +329,7 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Nicolas Bourdin</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/piromsurang">
             <img src="https://avatars.githubusercontent.com/u/17776837?v=4" width="100;" alt="piromsurang"/>
@@ -343,7 +357,8 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Muttenzer</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/alexander-mart">
             <img src="https://avatars.githubusercontent.com/u/14993551?v=4" width="100;" alt="alexander-mart"/>
@@ -357,8 +372,7 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Amir Ahmic</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/akd-io">
             <img src="https://avatars.githubusercontent.com/u/30059155?v=4" width="100;" alt="akd-io"/>
@@ -386,7 +400,8 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Chris Wetherell</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/rustyb">
             <img src="https://avatars.githubusercontent.com/u/53086?v=4" width="100;" alt="rustyb"/>
@@ -400,8 +415,7 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Dago</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/dminkovsky">
             <img src="https://avatars.githubusercontent.com/u/218725?v=4" width="100;" alt="dminkovsky"/>
@@ -429,7 +443,8 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Helio Alves</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/nkhdo">
             <img src="https://avatars.githubusercontent.com/u/26102306?v=4" width="100;" alt="nkhdo"/>
@@ -437,14 +452,20 @@ Here are some ways of contributing to making Nhost better:
             <sub><b>Hoang Do</b></sub>
         </a>
     </td>
+    <td align="center">
+        <a href="https://github.com/iangabrielsanchez">
+            <img src="https://avatars.githubusercontent.com/u/9511946?v=4" width="100;" alt="iangabrielsanchez"/>
+            <br />
+            <sub><b>Ian Gabriel Sanchez</b></sub>
+        </a>
+    </td>
     <td align="center">
         <a href="https://github.com/eltociear">
             <img src="https://avatars.githubusercontent.com/u/22633385?v=4" width="100;" alt="eltociear"/>
             <br />
             <sub><b>Ikko Ashimine</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/jladuval">
             <img src="https://avatars.githubusercontent.com/u/1935359?v=4" width="100;" alt="jladuval"/>
@@ -465,7 +486,8 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Lucas Bois</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/MarcelloTheArcane">
             <img src="https://avatars.githubusercontent.com/u/21159570?v=4" width="100;" alt="MarcelloTheArcane"/>
@@ -486,8 +508,7 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Nirmalya Ghosh</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/quentin-decre">
             <img src="https://avatars.githubusercontent.com/u/1137511?v=4" width="100;" alt="quentin-decre"/>
@@ -508,7 +529,8 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Simon Altschuler</b></sub>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
         <a href="https://github.com/atapas">
             <img src="https://avatars.githubusercontent.com/u/3633137?v=4" width="100;" alt="atapas"/>
@@ -529,8 +551,7 @@ Here are some ways of contributing to making Nhost better:
             <br />
             <sub><b>Vadim</b></sub>
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
         <a href="https://github.com/TheRedLancer">
             <img src="https://avatars.githubusercontent.com/u/58493767?v=4" width="100;" alt="TheRedLancer"/>

config/.eslint.base.js

@@ -19,7 +19,9 @@ module.exports = {
     '*.spec.ts',
     '*.spec.tsx',
     'tests/**/*.ts',
-    'tests/**/*.d.ts'
+    'tests/**/*.d.ts',
+    'e2e/**/*.ts',
+    'e2e/**/*.d.ts'
   ],
   plugins: ['@typescript-eslint', 'cypress'],
   extends: ['plugin:cypress/recommended'],

config/.lintstagedrc.js

@@ -1,6 +1,4 @@
 module.exports = {
-  '(packages|integrations)/(docgen|hasura-auth-js|hasura-storage-js|nextjs|nhost-js|react|core|vue)/src/**/*.{js,ts,jsx,tsx}':
-    ['pnpm docgen', 'git add docs'],
   '(nhost-cloud.yaml|**/nhost/config.yaml)': () => [
     'pnpm sync-versions',
     "git add ':(glob)**/nhost/config.yaml'"

config/tsconfig.base.json

@@ -28,22 +28,47 @@
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "sourceMap": true,
-    "types": ["node"],
+    "types": [
+      "node"
+    ],
     "typeRoots": [
-      "./node_modules/@types", "**/*/dist", "**/*/build", "**/*/.next", "**/*/umd"
+      "./node_modules/@types",
+      "**/*/dist",
+      "**/*/build",
+      "**/*/.next",
+      "**/*/umd"
     ],
     "paths": {
-      "@nhost/apollo": ["../packages/apollo/src/index.ts"],
-      "@nhost/core": ["../packages/core/src/index.ts"],
-      "@nhost/docgen": ["../packages/docgen/src/index.ts"],
-      "@nhost/hasura-auth-js": ["../packages/hasura-auth-js/src/index.ts"],
-      "@nhost/hasura-storage-js": ["../packages/hasura-storage-js/src/index.ts"],
-      "@nhost/nextjs": ["../packages/nextjs/src/index.ts"],
-      "@nhost/nhost-js": ["../packages/nhost-js/src/index.ts"],
-      "@nhost/react": ["../packages/react/src/index.ts"],
-      "@nhost/react-apollo": ["../packages/react-apollo/src/index.ts"],
-      "@nhost/react-auth": ["../packages/react-auth/src/index.ts"],
-      "@nhost/vue": ["../packages/vue/src/index.ts"]
+      "@nhost/apollo": [
+        "../packages/apollo/src/index.ts"
+      ],
+      "@nhost/docgen": [
+        "../packages/docgen/src/index.ts"
+      ],
+      "@nhost/hasura-auth-js": [
+        "../packages/hasura-auth-js/src/index.ts"
+      ],
+      "@nhost/hasura-storage-js": [
+        "../packages/hasura-storage-js/src/index.ts"
+      ],
+      "@nhost/nextjs": [
+        "../packages/nextjs/src/index.ts"
+      ],
+      "@nhost/nhost-js": [
+        "../packages/nhost-js/src/index.ts"
+      ],
+      "@nhost/react": [
+        "../packages/react/src/index.ts"
+      ],
+      "@nhost/react-apollo": [
+        "../packages/react-apollo/src/index.ts"
+      ],
+      "@nhost/react-auth": [
+        "../packages/react-auth/src/index.ts"
+      ],
+      "@nhost/vue": [
+        "../packages/vue/src/index.ts"
+      ]
     }
   },
   "exclude": [

dashboard/CHANGELOG.md

@@ -1,5 +1,90 @@
 # @nhost/dashboard
 
+## 0.7.10
+
+### Patch Changes
+
+- Updated dependencies [57db5b83]
+  - @nhost/nextjs@1.11.0
+  - @nhost/nhost-js@1.7.0
+  - @nhost/react@0.17.0
+  - @nhost/react-apollo@4.11.0
+
+## 0.7.9
+
+### Patch Changes
+
+- a6d31dc2: fix(dashboard): don't break the UI when project is not loaded yet
+
+## 0.7.8
+
+### Patch Changes
+
+- 7f251111: Use `NhostProvider` instead of `NhostReactProvider` and `NhostNextProvider`
+
+  `NhostReactProvider` and `NhostNextProvider` are now deprecated
+
+- f4d70f88: fix(dashboard): do not break when region is nullish
+- 4a9471cc: Windows Live Provider displayed link updated to match backend url
+- 594488e4: fix(dashboard): do not show error when submitting Apple provider settings
+- Updated dependencies [7f251111]
+  - @nhost/nextjs@1.10.0
+  - @nhost/react@0.16.0
+  - @nhost/react-apollo@4.10.0
+
+## 0.7.7
+
+### Patch Changes
+
+- 80b604ad: fix(dashboard): use correct Hasura slug
+
+## 0.7.6
+
+### Patch Changes
+
+- 2d2beb53: fix(dashboard): prevent error on GraphQL page
+- ac8efcbd: chore(dashboard): deprecate old DNS name
+
+## 0.7.5
+
+### Patch Changes
+
+- 132a4f4b: chore(dashboard): remove unused dependencies
+- 132a4f4b: chore(deps): synchronize @types/react-dom and @types/react versions
+- db57572f: fix(dashboard): correct section paddings when no env vars
+- Updated dependencies [132a4f4b]
+  - @nhost/react@0.15.2
+  - @nhost/react-apollo@4.9.2
+  - @nhost/nextjs@1.9.3
+
+## 0.7.4
+
+### Patch Changes
+
+- 34d85e54: chore(deps): update dependency critters to ^0.0.16
+- 9b93cf95: chore(deps): update dependency @netlify/functions to ^0.11.0
+- e0439030: chore(deps): update dependency @types/react-dom to v18.0.9
+- Updated dependencies [82124329]
+  - @nhost/nextjs@1.9.2
+
+## 0.7.3
+
+### Patch Changes
+
+- a1193da4: fix(dashboard): remove character limit from env var inputs
+
+## 0.7.2
+
+### Patch Changes
+
+- 44f13f62: chore(dashboard): cleanup unused files
+
+## 0.7.1
+
+### Patch Changes
+
+- e01cb2ed: chore(dashboard): change settings sidebar menu item density
+
 ## 0.7.0
 
 ### Minor Changes

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.7.0",
+  "version": "0.7.10",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -25,7 +25,7 @@
     "@emotion/styled": "^11.10.5",
     "@fontsource/inter": "^4.5.14",
     "@fontsource/roboto-mono": "^4.5.8",
-    "@graphiql/react": "^0.14.0",
+    "@graphiql/react": "^0.15.0",
     "@graphiql/toolkit": "^0.8.0",
     "@headlessui/react": "^1.6.5",
     "@heroicons/react": "^1.0.6",
@@ -34,12 +34,13 @@
     "@mui/material": "^5.10.14",
     "@mui/system": "^5.10.14",
     "@mui/x-date-pickers": "^5.0.8",
-    "@nhost/core": "^0.9.4",
-    "@nhost/nextjs": "^1.9.1",
-    "@nhost/nhost-js": "^1.6.2",
-    "@nhost/react": "^0.15.1",
-    "@nhost/react-apollo": "^4.9.1",
+    "@nhost/nextjs": "workspace:*",
+    "@nhost/nhost-js": "workspace:*",
+    "@nhost/react": "workspace:*",
+    "@nhost/react-apollo": "workspace:*",
     "@segment/snippet": "^4.15.3",
+    "@stripe/react-stripe-js": "^1.10.0",
+    "@stripe/stripe-js": "^1.35.0",
     "@tailwindcss/forms": "^0.5.3",
     "@tanstack/react-query": "^4.16.1",
     "@tanstack/react-table": "^8.5.30",
@@ -51,21 +52,20 @@
     "cross-fetch": "^3.1.5",
     "date-fns": "^2.29.3",
     "generate-password": "^1.7.0",
-    "graphiql": "^2.1.0",
+    "graphiql": "^2.2.0",
     "graphql": "^16.6.0",
     "graphql-request": "^4.3.0",
     "graphql-tag": "^2.12.6",
     "graphql-ws": "^5.11.2",
-    "jsonwebtoken": "^8.5.1",
     "lodash.debounce": "^4.0.8",
     "next": "^12.3.1",
     "next-seo": "^5.14.1",
     "node-pg-format": "^1.3.5",
     "pluralize": "^8.0.0",
     "prettysize": "^2.0.0",
-    "randomstring": "^1.2.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-error-boundary": "^3.1.4",
     "react-hook-form": "^7.39.5",
     "react-hot-toast": "^2.4.0",
     "react-is": "17.0.2",
@@ -75,7 +75,6 @@
     "react-table": "^7.8.0",
     "sharp": "^0.31.2",
     "slugify": "^1.6.5",
-    "smartlook-client": "^6.0.0",
     "stripe": "^10.17.0",
     "tailwind-merge": "^1.8.0",
     "utility-types": "^3.10.0",
@@ -90,7 +89,6 @@
     "@graphql-codegen/typescript-graphql-request": "^4.5.1",
     "@graphql-codegen/typescript-operations": "^2.5.1",
     "@graphql-codegen/typescript-react-apollo": "^3.3.1",
-    "@netlify/functions": "^0.7.2",
     "@next/bundle-analyzer": "^12.3.1",
     "@storybook/addon-actions": "^6.5.13",
     "@storybook/addon-essentials": "^6.5.13",
@@ -101,18 +99,15 @@
     "@storybook/manager-webpack5": "^6.5.13",
     "@storybook/react": "^6.5.13",
     "@storybook/testing-library": "^0.0.13",
-    "@stripe/react-stripe-js": "^1.10.0",
-    "@stripe/stripe-js": "^1.35.0",
     "@testing-library/dom": "^8.19.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/express": "^4.17.14",
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^18.11.9",
     "@types/pluralize": "^0.0.29",
     "@types/react": "18.0.25",
-    "@types/react-dom": "18.0.8",
+    "@types/react-dom": "18.0.9",
     "@types/react-table": "^7.7.12",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@types/validator": "^13.7.10",
@@ -123,10 +118,7 @@
     "autoprefixer": "^10.4.13",
     "babel-loader": "^8.3.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
-    "concurrently": "^6.3.0",
-    "critters": "^0.0.10",
     "csstype": "^3.0.10",
-    "dotenv": "^10.0.0",
     "eslint": "^8.28.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
@@ -136,20 +128,17 @@
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "express": "^4.18.2",
-    "express-validator": "^6.14.2",
     "jsdom": "^20.0.3",
     "lint-staged": ">=13",
     "msw": "^0.49.0",
     "postcss": "^8.4.19",
-    "postmark": "^2.7.8",
     "prettier": "^2.7.1",
     "prettier-plugin-organize-imports": "^3.2.0",
-    "prettier-plugin-tailwindcss": "^0.1.13",
+    "prettier-plugin-tailwindcss": "^0.2.0",
     "react-date-fns-hooks": "^0.9.4",
-    "react-error-boundary": "^3.1.4",
     "require-from-string": "^2.0.2",
     "tailwindcss": "^3.1.2",
+    "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "^4.0.0",
     "typescript": "^4.8.4",
     "vite": "^3.2.4",

dashboard/src/components/applications/ChangeApplicationName.tsx

@@ -1,107 +0,0 @@
-import { useWorkspaceContext } from '@/context/workspace-context';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { Alert } from '@/ui/Alert';
-import Button from '@/ui/v2/Button';
-import Input from '@/ui/v2/Input';
-import Text from '@/ui/v2/Text';
-import { discordAnnounce } from '@/utils/discordAnnounce';
-import { inputErrorMessages } from '@/utils/getErrorMessage';
-import { slugifyString } from '@/utils/helpers';
-import { triggerToast } from '@/utils/toast';
-import { updateOwnCache } from '@/utils/updateOwnCache';
-import { useUpdateApplicationMutation } from '@/utils/__generated__/graphql';
-import { useRouter } from 'next/router';
-import React, { useState } from 'react';
-
-export function ChangeApplicationName({ close }: any) {
-  const [updateAppName, { client }] = useUpdateApplicationMutation({});
-  const { workspaceContext } = useWorkspaceContext();
-  const [name, setName] = useState(workspaceContext.appName);
-  const [applicationError, setApplicationError] = useState<any>('');
-  const { currentWorkspace, currentApplication } =
-    useCurrentWorkspaceAndApplication();
-  const router = useRouter();
-
-  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
-    e.preventDefault();
-    const slug = slugifyString(name);
-    if (slug.length < 4 || slug.length > 32) {
-      setApplicationError('Slug should be within 4 and 32 characters.');
-      return;
-    }
-    if (!inputErrorMessages(name, setName, setApplicationError, 'project')) {
-      return;
-    }
-
-    try {
-      await updateAppName({
-        variables: {
-          appId: currentApplication.id,
-          app: {
-            name,
-            slug,
-          },
-        },
-      });
-
-      triggerToast('Project name changed');
-    } catch (error) {
-      await discordAnnounce(
-        `Error trying to delete project: ${currentApplication.name}`,
-      );
-    }
-
-    await updateOwnCache(client);
-    await router.push(`/${currentWorkspace.slug}/${slug}`);
-  }
-
-  return (
-    <div className="w-modal px-6 py-6 text-left">
-      <div className="flex flex-col">
-        <Text variant="h3" component="h2">
-          Change Project Name
-        </Text>
-
-        <form onSubmit={handleSubmit}>
-          <div className="mt-4 grid grid-flow-row gap-2">
-            <Input
-              label="New Project Name"
-              id="projectName"
-              value={name}
-              onChange={(e) => {
-                setName(e.target.value);
-                setApplicationError('');
-              }}
-              fullWidth
-              autoFocus
-              helperText={`https://app.nhost.io/${
-                currentWorkspace.slug
-              }/${slugifyString(name)}`}
-            />
-
-            {applicationError && (
-              <Alert severity="error">{applicationError}</Alert>
-            )}
-          </div>
-
-          <div className="mt-4 grid grid-flow-row gap-2">
-            <Button type="submit" disabled={applicationError}>
-              Save
-            </Button>
-
-            <Button
-              type="button"
-              variant="outlined"
-              color="secondary"
-              onClick={close}
-            >
-              Close
-            </Button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}
-
-export default ChangeApplicationName;

dashboard/src/components/applications/EditSMSSettingsModal.tsx

@@ -1,327 +0,0 @@
-import ErrorBoundaryFallback from '@/components/common/ErrorBoundaryFallback';
-import TwilioIcon from '@/components/icons/TwilioIcon';
-import {
-  useGetSmsSettingsQuery,
-  useUpdateAppMutation,
-} from '@/generated/graphql';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { Button, Input } from '@/ui';
-import { Alert } from '@/ui/Alert';
-import DelayedLoading from '@/ui/DelayedLoading';
-import { Text } from '@/ui/Text';
-import { showLoadingToast, triggerToast } from '@/utils/toast';
-import { useApolloClient } from '@apollo/client';
-import { useEffect } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
-import {
-  Controller,
-  FormProvider,
-  useForm,
-  useFormContext,
-} from 'react-hook-form';
-import toast from 'react-hot-toast';
-
-export function EditSMSSettingsForm({
-  close,
-  isAlreadyEnabled,
-}: {
-  close: () => void;
-  isAlreadyEnabled: boolean;
-}) {
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const {
-    handleSubmit,
-    watch,
-    formState: { isSubmitting, errors },
-  } = useFormContext<EditSMSSettingsFormData>();
-  const { control } = useFormContext<EditSMSSettingsFormData>();
-
-  const [updateApp] = useUpdateAppMutation();
-  let toastId: string;
-
-  const client = useApolloClient();
-  const isNotCompleted =
-    !watch('accountSID') ||
-    !watch('authToken') ||
-    !watch('messagingServiceSID');
-
-  const handleEditSMSSettings = async (data: EditSMSSettingsFormData) => {
-    try {
-      toastId = showLoadingToast('Updating SMS settings...');
-      await updateApp({
-        variables: {
-          id: currentApplication.id,
-          app: {
-            authSmsTwilioAccountSid: data.accountSID,
-            authSmsTwilioAuthToken: data.authToken,
-            authSmsTwilioMessagingServiceId: data.messagingServiceSID,
-            authSmsPasswordlessEnabled: true,
-          },
-        },
-      });
-      await client.refetchQueries({ include: ['getSMSSettings'] });
-      toast.remove(toastId);
-      triggerToast('SMS settings updated successfully.');
-      close();
-    } catch (error) {
-      if (toastId) {
-        toast.remove(toastId);
-      }
-      throw error;
-    }
-  };
-
-  return (
-    <form
-      onSubmit={handleSubmit(handleEditSMSSettings)}
-      className="flex w-full flex-col pb-1"
-      autoComplete="off"
-    >
-      {errors &&
-        Object.entries(errors).map(([type, error]) => (
-          <Alert key={type} className="mb-4" severity="error">
-            {error.message}
-          </Alert>
-        ))}
-
-      <div>
-        <div className="flex flex-row place-content-between border-t border-b px-2 py-2.5">
-          <div className="flex w-full flex-row">
-            <Text
-              color="greyscaleDark"
-              className="self-center font-medium"
-              size="normal"
-            >
-              Account SID
-            </Text>
-          </div>
-          <div className="flex w-full">
-            <Controller
-              name="accountSID"
-              control={control}
-              rules={{
-                required: true,
-                pattern: {
-                  value: /^[a-zA-Z0-9-_]+$/,
-                  message:
-                    'The Account SID must contain only letters, hyphens, and numbers.',
-                },
-              }}
-              render={({ field }) => (
-                <Input
-                  {...field}
-                  id="accountSID"
-                  placeholder="Account SID"
-                  required
-                  value={field.value || ''}
-                  onChange={(value: string) => {
-                    if (value && !/^[a-zA-Z0-9-_]+$/gi.test(value)) {
-                      // prevent the user from entering invalid characters
-                      return;
-                    }
-
-                    field.onChange(value);
-                  }}
-                />
-              )}
-            />
-          </div>
-        </div>
-        <div className="flex flex-row place-content-between border-b px-2 py-2.5">
-          <div className="flex w-full flex-row">
-            <Text
-              color="greyscaleDark"
-              className="self-center font-medium"
-              size="normal"
-            >
-              Auth Token
-            </Text>
-          </div>
-          <div className="flex w-full">
-            <Controller
-              name="authToken"
-              control={control}
-              rules={{
-                required: true,
-                pattern: {
-                  value: /^[a-zA-Z0-9-_]+$/,
-                  message:
-                    'The Auth Token must contain only letters, hyphens, and numbers.',
-                },
-              }}
-              render={({ field }) => (
-                <Input
-                  {...field}
-                  id="authToken"
-                  placeholder="Auth Token"
-                  required
-                  value={field.value || ''}
-                  onChange={(value: string) => {
-                    if (value && !/^[a-zA-Z0-9-_/.]+$/gi.test(value)) {
-                      return;
-                    }
-
-                    field.onChange(value);
-                  }}
-                />
-              )}
-            />
-          </div>
-        </div>
-        <div className="flex flex-row place-content-between border-b px-2 py-2.5">
-          <div className="flex w-full flex-row">
-            <Text
-              color="greyscaleDark"
-              className="self-center font-medium"
-              size="normal"
-            >
-              Messaging Service SID
-            </Text>
-          </div>
-          <div className="flex w-full">
-            <Controller
-              name="messagingServiceSID"
-              control={control}
-              rules={{
-                required: true,
-                pattern: {
-                  value: /^[+a-zA-Z0-9-_/.]+$/,
-                  message:
-                    'The Messaging Service SID must either be a valid phone number or contain only letters, hyphens, and numbers.',
-                },
-              }}
-              render={({ field }) => (
-                <Input
-                  {...field}
-                  id="messagingServiceSID"
-                  required
-                  placeholder="Messaging Service SID"
-                  value={field.value || ''}
-                  onChange={(value: string) => {
-                    if (value && !/^[+a-zA-Z0-9-_/.]+$/gi.test(value)) {
-                      return;
-                    }
-                    field.onChange(value);
-                  }}
-                />
-              )}
-            />
-          </div>
-        </div>
-      </div>
-      <div className="flex flex-col">
-        <Button
-          variant="primary"
-          type="submit"
-          className="text-grayscaleDark mt-2 border text-sm+ font-normal"
-          loading={isSubmitting}
-          disabled={isSubmitting || isNotCompleted}
-        >
-          {isAlreadyEnabled ? 'Update SMS Settings' : 'Enable SMS'}
-        </Button>
-      </div>
-    </form>
-  );
-}
-
-export function EditSMSSettingsModal({
-  close,
-  isAlreadyEnabled,
-}: {
-  close: () => void;
-  isAlreadyEnabled: boolean;
-}) {
-  return (
-    <div className="w-modal px-6 py-4 text-left">
-      <div className="flex flex-col">
-        <div className="mx-auto mt-2.5">
-          <TwilioIcon className=" text-greyscaleDark" />
-        </div>
-        <Text
-          variant="subHeading"
-          color="greyscaleDark"
-          size="large"
-          className="mt-3 text-center"
-        >
-          Set up Twilio SMS Service
-        </Text>
-        <Text
-          variant="body"
-          color="greyscaleDark"
-          size="small"
-          className="mt-0.5 mb-6 text-center font-normal"
-        >
-          SMS messages are sent through Twilio. Create an account and a
-          messaging service at https://console.twilio.com.
-        </Text>
-        <div>
-          <ErrorBoundary fallbackRender={ErrorBoundaryFallback}>
-            <EditSMSSettingsForm
-              close={close}
-              isAlreadyEnabled={isAlreadyEnabled}
-            />
-          </ErrorBoundary>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export interface EditSMSSettingsProps {
-  close: () => void;
-}
-
-export interface EditSMSSettingsFormData {
-  accountSID: string;
-  authToken: string;
-  messagingServiceSID: string;
-}
-
-export function EditSMSSettings({ close }: EditSMSSettingsProps) {
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
-
-  const form = useForm<EditSMSSettingsFormData>({
-    reValidateMode: 'onSubmit',
-    defaultValues: {
-      accountSID: '',
-      authToken: '',
-      messagingServiceSID: '',
-    },
-  });
-
-  const { data, loading, error } = useGetSmsSettingsQuery({
-    variables: {
-      id: currentApplication.id,
-    },
-  });
-
-  useEffect(() => {
-    if (!data) {
-      return;
-    }
-
-    form.setValue('accountSID', data.app.authSmsTwilioAccountSid);
-    form.setValue('authToken', data.app.authSmsTwilioAuthToken);
-    form.setValue(
-      'messagingServiceSID',
-      data.app.authSmsTwilioMessagingServiceId,
-    );
-  }, [data, form]);
-
-  if (loading) {
-    return <DelayedLoading delay={500} />;
-  }
-
-  if (error) {
-    throw error;
-  }
-
-  return (
-    <FormProvider {...form}>
-      <EditSMSSettingsModal
-        close={close}
-        isAlreadyEnabled={data.app.authSmsPasswordlessEnabled}
-      />
-    </FormProvider>
-  );
-}

dashboard/src/components/applications/EnableSMSSignIn.tsx

@@ -1,134 +0,0 @@
-import {
-  useGetSmsSettingsQuery,
-  useUpdateAppMutation,
-} from '@/generated/graphql';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { Text, Toggle } from '@/ui';
-import DelayedLoading from '@/ui/DelayedLoading';
-import { showLoadingToast, triggerToast } from '@/utils/toast';
-import { useApolloClient } from '@apollo/client';
-import clsx from 'clsx';
-import Image from 'next/image';
-import { useEffect, useState } from 'react';
-import toast from 'react-hot-toast';
-
-export function EnableSMSSignIn({ openSMSSettingsModal }: any) {
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const [updateApp] = useUpdateAppMutation();
-
-  const { data, loading, error } = useGetSmsSettingsQuery({
-    variables: {
-      id: currentApplication.id,
-    },
-  });
-
-  const [enableSMSLoginMethod, setEnableSMSLoginMethod] = useState(false);
-  const client = useApolloClient();
-  let toastId: string;
-
-  useEffect(() => {
-    if (!data) {
-      return;
-    }
-
-    setEnableSMSLoginMethod(data.app.authSmsPasswordlessEnabled);
-  }, [data]);
-
-  if (loading) {
-    return <DelayedLoading delay={500} />;
-  }
-
-  if (error) {
-    throw error;
-  }
-
-  const handleDisable = async () => {
-    try {
-      toastId = showLoadingToast('Disabling SMS login...');
-      await updateApp({
-        variables: {
-          id: currentApplication.id,
-          app: {
-            authSmsPasswordlessEnabled: false,
-          },
-        },
-      });
-      setEnableSMSLoginMethod(false);
-      await client.refetchQueries({ include: ['getSMSSettings'] });
-      toast.remove(toastId);
-      triggerToast('Passwordless SMS disabled.');
-    } catch (updateError) {
-      if (toastId) {
-        toast.remove(toastId);
-      }
-
-      throw updateError;
-    }
-  };
-
-  return (
-    <div className="mt-20">
-      <div className="mx-auto font-display">
-        <div className="flex flex-col place-content-between">
-          <div className="">
-            <div className="flex flex-row place-content-between">
-              <div className="relative flex flex-row">
-                <Image
-                  src="/assets/SMS.svg"
-                  width={24}
-                  height={24}
-                  alt="Phone Number (SMS)"
-                />
-                <Text
-                  variant="body"
-                  size="large"
-                  className="ml-2 font-medium"
-                  color="greyscaleDark"
-                >
-                  Phone Number (SMS)
-                </Text>
-                <div>
-                  <button
-                    type="button"
-                    className={clsx(
-                      'ml-2 align-bottom text-sm- font-medium text-blue transition-opacity duration-300',
-                      !enableSMSLoginMethod && 'invisible opacity-0',
-                      enableSMSLoginMethod && 'opacity-100',
-                    )}
-                    onClick={() => openSMSSettingsModal()}
-                  >
-                    Edit SMS settings
-                  </button>
-                </div>
-              </div>
-              <div className="flex flex-row">
-                <Toggle
-                  checked={enableSMSLoginMethod}
-                  onChange={async () => {
-                    if (enableSMSLoginMethod) {
-                      await handleDisable();
-                    } else {
-                      openSMSSettingsModal();
-                    }
-                  }}
-                />
-              </div>
-            </div>
-            <div className="mt-3 flex flex-row self-center align-middle">
-              <Text
-                variant="body"
-                size="normal"
-                color="greyscaleDark"
-                className="self-center"
-              >
-                Sign in users with Phone Number (SMS).
-              </Text>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default EnableSMSSignIn;

dashboard/src/components/applications/HasuraData.tsx

@@ -6,7 +6,7 @@ import ArrowSquareOutIcon from '@/ui/v2/icons/ArrowSquareOutIcon';
 import Link from '@/ui/v2/Link';
 import Text from '@/ui/v2/Text';
 import { LOCAL_HASURA_URL } from '@/utils/env';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import Image from 'next/image';
 
 interface HasuraDataProps {
@@ -26,7 +26,11 @@ export function HasuraData({ close }: HasuraDataProps) {
   const hasuraUrl =
     process.env.NEXT_PUBLIC_ENV === 'dev'
       ? LOCAL_HASURA_URL
-      : generateRemoteAppUrl(currentApplication.subdomain);
+      : `${generateAppServiceUrl(
+          currentApplication?.subdomain,
+          currentApplication?.region.awsName,
+          'hasura',
+        )}/console`;
 
   return (
     <div className="mx-auto w-full max-w-md px-6 py-4 text-left">
@@ -60,7 +64,7 @@ export function HasuraData({ close }: HasuraDataProps) {
 
         <div className="mt-6 grid grid-flow-row gap-2">
           <Link
-            href={`${hasuraUrl}/console`}
+            href={hasuraUrl}
             target="_blank"
             rel="noreferrer noopener"
             className="grid grid-flow-col items-center justify-center gap-1 rounded-[4px] bg-btn p-2 text-sm+ font-medium text-white hover:ring-2 motion-safe:transition-all"

dashboard/src/components/applications/JWTSecretModal.tsx

@@ -1,224 +0,0 @@
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { useSubmitState } from '@/hooks/useSubmitState';
-import { Alert } from '@/ui/Alert';
-import Button from '@/ui/v2/Button';
-import Input from '@/ui/v2/Input';
-import Text from '@/ui/v2/Text';
-import { triggerToast } from '@/utils/toast';
-import {
-  refetchGetAppInjectedVariablesQuery,
-  useUpdateApplicationMutation,
-} from '@/utils/__generated__/graphql';
-import { useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export interface EditCustomUserJWTTokenData {
-  customUserJWTToken: string;
-}
-
-export type JWTSecretModalState = 'SHOW' | 'EDIT';
-
-export interface JWTSecretModalProps {
-  close: () => void;
-  data?: any;
-  jwtSecret: string;
-  initialModalState?: JWTSecretModalState;
-}
-
-export function EditJWTSecretModal({ close }: any) {
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const { submitState, setSubmitState } = useSubmitState();
-
-  const [updateApplication] = useUpdateApplicationMutation({
-    refetchQueries: [
-      refetchGetAppInjectedVariablesQuery({ id: currentApplication.id }),
-    ],
-  });
-
-  const {
-    handleSubmit,
-    control,
-    formState: { isSubmitting },
-  } = useForm<EditCustomUserJWTTokenData>({
-    reValidateMode: 'onSubmit',
-    defaultValues: {
-      customUserJWTToken: '',
-    },
-  });
-
-  const handleEditJWTSecret = async (data: EditCustomUserJWTTokenData) => {
-    setSubmitState({
-      error: null,
-      loading: false,
-      fieldsWithError: [],
-    });
-    try {
-      JSON.parse(data.customUserJWTToken);
-    } catch (error) {
-      setSubmitState({
-        error: new Error('The custom JWT token should be valid json.'),
-        loading: false,
-        fieldsWithError: [],
-      });
-      return;
-    }
-
-    try {
-      await updateApplication({
-        variables: {
-          appId: currentApplication.id,
-          app: {
-            hasuraGraphqlJwtSecret: data.customUserJWTToken,
-          },
-        },
-      });
-      triggerToast(
-        `Successfully added custom JWT token to ${currentApplication.name}.`,
-      );
-      close();
-    } catch (error) {
-      triggerToast(
-        `Error adding custom JWT token to ${currentApplication.name}`,
-      );
-      setSubmitState({ error, loading: false, fieldsWithError: [] });
-    }
-  };
-
-  return (
-    <form
-      className="w-modal px-6 py-4"
-      onSubmit={handleSubmit(handleEditJWTSecret)}
-    >
-      <div className="grid grid-flow-row gap-2">
-        <div className="grid grid-flow-row text-left">
-          <Text variant="h3" component="h2">
-            Add Custom JWT Secret
-          </Text>
-
-          <Text variant="subtitle2">
-            You can add your custom JWT key here. Hasura will use this key to
-            validate the identity of your users.
-          </Text>
-        </div>
-
-        {submitState.error && (
-          <Alert severity="error">{submitState.error.message}</Alert>
-        )}
-
-        <Controller
-          name="customUserJWTToken"
-          control={control}
-          rules={{
-            required: true,
-          }}
-          render={({ field }) => (
-            <Input
-              {...field}
-              placeholder="Paste your custom JWT token here..."
-              componentsProps={{
-                inputRoot: {
-                  className: 'font-mono bg-header',
-                },
-              }}
-              aria-label="Custom JWT token"
-              type="text"
-              value={field.value}
-              onBlur={() =>
-                setSubmitState({
-                  error: null,
-                  loading: false,
-                  fieldsWithError: [],
-                })
-              }
-              multiline
-              rows={6}
-              fullWidth
-              hideEmptyHelperText
-            />
-          )}
-        />
-
-        <div className="grid grid-flow-row gap-2">
-          <Button type="submit" loading={isSubmitting}>
-            Save Changes
-          </Button>
-
-          <Button variant="outlined" color="secondary" onClick={close}>
-            Cancel
-          </Button>
-        </div>
-      </div>
-    </form>
-  );
-}
-
-export function ShowJWTTokenModal({ JWTKey, editJWTSecret }: any) {
-  return (
-    <div className="w-modal px-6 py-4">
-      <div className="grid grid-flow-row gap-2">
-        <div className="grid grid-flow-row text-left">
-          <Text variant="h3" component="h2">
-            Auth JWT Secret
-          </Text>
-          <Text variant="subtitle2">
-            This is the key used for generating JWTs. It&apos;s HMAC-SHA-based
-            and the same as configured in Hasura.
-          </Text>
-        </div>
-        <div>
-          <Input
-            defaultValue={JWTKey}
-            multiline
-            disabled
-            fullWidth
-            hideEmptyHelperText
-            rows={6}
-            componentsProps={{
-              inputRoot: { className: 'font-mono' },
-            }}
-          />
-        </div>
-
-        <div className="mx-auto max-w-sm text-center">
-          <Text variant="subtitle2">
-            Already using a third party auth service? <br />
-            <button
-              type="button"
-              className="mt-0.5 ml-0.5 text-xs font-medium text-blue"
-              onClick={() => {
-                editJWTSecret();
-              }}
-            >
-              Add your custom JWT token
-            </button>
-          </Text>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function JWTSecretModal({
-  close,
-  data,
-  jwtSecret,
-  initialModalState,
-}: any) {
-  const [jwtSecretModalState, setJwtSecretModalState] =
-    useState<JWTSecretModalState>(initialModalState || 'SHOW');
-
-  const editJWTSecret = () => {
-    setJwtSecretModalState('EDIT');
-  };
-
-  if (jwtSecretModalState === 'EDIT') {
-    return <EditJWTSecretModal close={close} />;
-  }
-
-  return (
-    <ShowJWTTokenModal
-      JWTKey={jwtSecret || data}
-      editJWTSecret={editJWTSecret}
-    />
-  );
-}

dashboard/src/components/applications/SelectedWorkspaceOnNewApp.tsx

@@ -1,28 +0,0 @@
-import { Avatar } from '@/ui/Avatar';
-import { Text } from '@/ui/Text';
-import { nhost } from '@/utils/nhost';
-import Image from 'next/image';
-
-export function SelectedWorkspaceOnNewApp({ current }: any) {
-  const user = nhost.auth.getUser();
-
-  return (
-    <div className="flex flex-row space-x-2 self-center">
-      {current.name === 'Default Workspace' ? (
-        <Avatar
-          className="h-5 w-5 self-center rounded-full"
-          name={user?.displayName}
-          avatarUrl={user?.avatarUrl}
-        />
-      ) : (
-        <div className="h-5 w-5 overflow-hidden rounded-md">
-          <Image src="/logos/new.svg" alt="Nhost Logo" width={20} height={20} />
-        </div>
-      )}
-      <Text size="small" color="greyscaleDark" className="font-normal">
-        {current.name}
-      </Text>
-    </div>
-  );
-}
-export default SelectedWorkspaceOnNewApp;

dashboard/src/components/applications/index.tsx

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

dashboard/src/components/home/ErrorComponent.tsx

@@ -1,17 +0,0 @@
-import { Text } from '@/ui/Text';
-
-interface ErrorComponentProps {
-  message: string;
-}
-
-function ErrorComponent({ message }: ErrorComponentProps) {
-  return (
-    <div className="my-4 rounded-md bg-warning px-4 py-2 text-dark">
-      <Text className="font-medium text-textOrange">Error</Text>
-      <Text className="pt-2 font-medium text-dimBlack" size="normal">
-        {message}
-      </Text>
-    </div>
-  );
-}
-export default ErrorComponent;

dashboard/src/components/icons/Copy.tsx

@@ -1,22 +0,0 @@
-function Copy({ stroke = '#21324B', ...props }: any) {
-  return (
-    <svg fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        d="M10.5 10.5h3v-8h-8v3"
-        stroke={stroke}
-        strokeWidth={1.25}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M10.5 5.5h-8v8h8v-8z"
-        stroke={stroke}
-        strokeWidth={1.25}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-export default Copy;

dashboard/src/components/icons/Eye.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react';
-
-function Eye(props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className="h-6 w-6"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      {...props}
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={2}
-        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-      />
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={2}
-        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-      />
-    </svg>
-  );
-}
-
-export default Eye;

dashboard/src/components/icons/EyeOff.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react';
-
-function EyeOff(
-  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
-) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className="h-6 w-6"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      {...props}
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={2}
-        d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
-      />
-    </svg>
-  );
-}
-
-export default EyeOff;

dashboard/src/components/icons/Lock.tsx

@@ -1,14 +0,0 @@
-export default function Lock(
-  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
-) {
-  return (
-    <svg fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8 1.75a1.5 1.5 0 0 0-1.5 1.5v1.5h3v-1.5A1.5 1.5 0 0 0 8 1.75Zm-3 1.5v1.5H3c-.69 0-1.25.56-1.25 1.25v7c0 .69.56 1.25 1.25 1.25h10c.69 0 1.25-.56 1.25-1.25V6c0-.69-.56-1.25-1.25-1.25h-2v-1.5a3 3 0 0 0-6 0Zm-1.75 3h9.5v6.5h-9.5v-6.5ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-        fill="#21324B"
-      />
-    </svg>
-  );
-}

dashboard/src/components/icons/Plus.tsx

@@ -1,21 +0,0 @@
-import * as React from 'react';
-
-function Plus(props: any) {
-  return (
-    <svg
-      viewBox="0 0 32 32"
-      stroke="currentColor"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M16 4.75C9.787 4.75 4.75 9.787 4.75 16S9.787 27.25 16 27.25 27.25 22.213 27.25 16 22.213 4.75 16 4.75zM3.25 16C3.25 8.958 8.958 3.25 16 3.25S28.75 8.958 28.75 16 23.042 28.75 16 28.75 3.25 23.042 3.25 16zm12 .75H10v-1.5h5.25V10h1.5v5.25H22v1.5h-5.25V22h-1.5v-5.25z"
-      />
-    </svg>
-  );
-}
-
-export default Plus;

dashboard/src/components/icons/TwilioIcon.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-
-function TwilioIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      width={108}
-      height={32}
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M16.864 0c8.844 0 15.984 7.147 15.984 16s-7.14 16-15.984 16C8.019 32 .88 24.853.88 16S8.02 0 16.864 0Zm0 4.267c-6.5 0-11.722 5.226-11.722 11.733a11.694 11.694 0 0 0 11.722 11.733c6.5 0 11.721-5.226 11.721-11.733A11.694 11.694 0 0 0 16.864 4.267Zm27.173 2.026c.213-.106.426.107.426.214v4.586h8.525c.106 0 .32.214.32.32l.639 2.667.639 2.667.107.32.106-.32 1.599-5.334c0-.213.213-.32.32-.32h4.262c.106 0 .32.214.32.32l1.704 5.654.107-.32 1.385-5.334c0-.213.213-.32.32-.32h10.869c.106 0 .213.214.213.32V25.6c0 .213-.213.32-.32.32h-5.434c-.213 0-.32-.213-.32-.32V12.16l-4.05 13.44c0 .187-.162.292-.275.315l-.044.005H60.98c-.107 0-.32-.213-.32-.32l-.853-2.88-.959-3.093L56.93 25.6c0 .213-.213.32-.32.32h-4.475c-.106 0-.32-.213-.32-.32l-4.049-13.44v3.413c0 .214-.213.32-.32.32h-3.09v3.627c0 1.067.533 1.493 1.492 1.493.426 0 .96-.106 1.492-.32.106-.106.32 0 .32.214v4.266c-.96.534-2.345.854-3.836.854-3.517 0-5.435-1.6-5.435-5.12v-5.014h-1.385c-.213 0-.32-.213-.32-.32V11.52c0-.213.213-.32.32-.32h1.385V8.32c0-.213.106-.32.32-.32l5.328-1.707Zm54.984 4.48c4.689 0 8.099 3.52 8.099 7.574 0 4.053-3.41 7.573-8.205 7.573-4.689 0-8.099-3.52-8.099-7.573 0-4.054 3.41-7.574 8.205-7.574Zm-16.197-4.48c.213 0 .32.107.32.214v18.986c0 .214-.213.32-.32.32H77.39c-.213 0-.32-.213-.32-.32V6.613c0-.213.213-.32.32-.32h5.434Zm7.14 4.8c.213 0 .32.214.32.32v13.974c0 .213-.214.32-.32.32h-5.435c-.213 0-.32-.214-.32-.32V11.413c0-.213.214-.32.32-.32h5.435ZM12.92 16.64a3.322 3.322 0 0 1 3.303 3.307 3.322 3.322 0 0 1-3.303 3.306 3.322 3.322 0 0 1-3.303-3.306 3.322 3.322 0 0 1 3.303-3.307Zm7.886 0a3.322 3.322 0 0 1 3.303 3.307 3.322 3.322 0 0 1-3.303 3.306 3.322 3.322 0 0 1-3.304-3.306 3.322 3.322 0 0 1 3.304-3.307Zm78.214-.747c-1.385 0-2.344 1.174-2.344 2.56 0 1.387 1.066 2.56 2.344 2.56 1.386 0 2.345-1.173 2.345-2.56 0-1.493-1.066-2.666-2.345-2.56ZM20.807 8.747a3.322 3.322 0 0 1 3.303 3.306 3.322 3.322 0 0 1-3.303 3.307 3.322 3.322 0 0 1-3.304-3.307 3.322 3.322 0 0 1 3.304-3.306Zm-7.886 0a3.322 3.322 0 0 1 3.303 3.306 3.322 3.322 0 0 1-3.303 3.307 3.322 3.322 0 0 1-3.303-3.307 3.322 3.322 0 0 1 3.303-3.306Zm62.87-2.454c.107 0 .213.107.32.214V9.92c0 .213-.213.32-.32.32h-5.647c-.213 0-.32-.213-.32-.32V6.613c0-.213.213-.32.32-.32h5.647Zm14.28 0c.213 0 .319.107.319.214V9.92c0 .213-.213.32-.32.32h-5.647c-.213 0-.32-.213-.32-.32V6.613c0-.213.213-.32.32-.32h5.647Z"
-        fill="#F22F46"
-      />
-    </svg>
-  );
-}
-
-export default TwilioIcon;

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

@@ -5,6 +5,9 @@ import Image from 'next/image';
 
 export default function OverviewProjectInfo() {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const { region, subdomain } = currentApplication || {};
+  const isRegionAvailable =
+    region?.awsName && region?.countryCode && region?.city;
 
   return (
     <div className="grid grid-flow-row content-start gap-6">
@@ -16,28 +19,28 @@ export default function OverviewProjectInfo() {
         <div className="grid grid-flow-row gap-3">
           <InfoCard
             title="Region"
-            value={currentApplication.region?.awsName}
+            value={region?.awsName}
             customValue={
-              currentApplication.region && (
+              region.countryCode &&
+              region.city && (
                 <div className="grid grid-flow-col items-center gap-1 self-center">
                   <Image
-                    src={`/assets/${currentApplication.region.countryCode}.svg`}
-                    alt={`Logo of ${currentApplication.region.countryCode}`}
+                    src={`/assets/${region.countryCode}.svg`}
+                    alt={`Logo of ${region.countryCode}`}
                     width={16}
                     height={16}
                   />
 
                   <Text className="text-sm font-medium text-greyscaleDark">
-                    {currentApplication.region.city} (
-                    {currentApplication.region.awsName})
+                    {region.city} ({region.awsName})
                   </Text>
                 </div>
               )
             }
-            disableCopy={!currentApplication.region}
+            disableCopy={!isRegionAvailable}
           />
 
-          <InfoCard title="Subdomain" value={currentApplication.subdomain} />
+          <InfoCard title="Subdomain" value={subdomain} />
         </div>
       )}
     </div>

dashboard/src/components/settings/ResetDatabasePasswordSettings/ResetDatabasePasswordSettings.tsx

@@ -11,7 +11,7 @@ import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
 import { copy } from '@/utils/copy';
 import { discordAnnounce } from '@/utils/discordAnnounce';
-import generateRandomDatabasePassword from '@/utils/settings/generateRandomDatabasePassword/generateRandomDatabasePassword';
+import generateRandomDatabasePassword from '@/utils/settings/generateRandomDatabasePassword';
 import { resetDatabasePasswordValidationSchema } from '@/utils/settings/resetDatabasePasswordValidationSchema';
 import { triggerToast } from '@/utils/toast';
 import { yupResolver } from '@hookform/resolvers/yup';

dashboard/src/components/settings/SettingsSidebar/SettingsSidebar.tsx

@@ -48,6 +48,7 @@ function SettingsNavLink({
   return (
     <ListItem.Root>
       <ListItem.Button
+        dense
         href={finalUrl}
         component={NavLink}
         selected={active}

dashboard/src/components/settings/environmentVariables/BaseEnvironmentVariableForm/BaseEnvironmentVariableForm.tsx

@@ -130,7 +130,6 @@ export default function BaseEnvironmentVariableForm({
               }
             },
           })}
-          inputProps={{ maxLength: 100 }}
           id="name"
           label="Name"
           placeholder="EXAMPLE_NAME"
@@ -145,7 +144,6 @@ export default function BaseEnvironmentVariableForm({
 
         <Input
           {...register('prodValue')}
-          inputProps={{ maxLength: 100 }}
           id="prodValue"
           label="Production Value"
           placeholder="Enter value"
@@ -159,7 +157,6 @@ export default function BaseEnvironmentVariableForm({
 
         <Input
           {...register('devValue')}
-          inputProps={{ maxLength: 100 }}
           id="devValue"
           label="Development Value"
           placeholder="Enter value"

dashboard/src/components/settings/environmentVariables/EnvironmentVariableSettings/EnvironmentVariableSettings.tsx

@@ -125,7 +125,10 @@ export default function EnvironmentVariableSettings() {
       docsLink="https://docs.nhost.io/platform/environment-variables"
       docsTitle="Environment Variables"
       rootClassName="gap-0"
-      className="px-0 my-2"
+      className={twMerge(
+        'px-0 my-2',
+        availableEnvironmentVariables.length === 0 && 'gap-2',
+      )}
       slotProps={{ submitButton: { className: 'hidden' } }}
     >
       <div className="grid grid-cols-2 lg:grid-cols-3 gap-2 border-b-1 border-gray-200 px-4 py-3">
@@ -134,91 +137,98 @@ export default function EnvironmentVariableSettings() {
       </div>
 
       <div className="grid grid-flow-row gap-2">
-        <List>
-          {availableEnvironmentVariables.map((environmentVariable, index) => {
-            const timestamp = formatDistanceToNowStrict(
-              parseISO(environmentVariable.updatedAt),
-              { addSuffix: true, roundingMethod: 'floor' },
-            );
+        {availableEnvironmentVariables.length > 0 && (
+          <List>
+            {availableEnvironmentVariables.map((environmentVariable, index) => {
+              const timestamp = formatDistanceToNowStrict(
+                parseISO(environmentVariable.updatedAt),
+                { addSuffix: true, roundingMethod: 'floor' },
+              );
 
-            return (
-              <Fragment key={environmentVariable.id}>
-                <ListItem.Root
-                  className="px-4 grid grid-cols-2 lg:grid-cols-3 gap-2"
-                  secondaryAction={
-                    <Dropdown.Root>
-                      <Dropdown.Trigger
-                        asChild
-                        hideChevron
-                        className="absolute right-4 top-1/2 -translate-y-1/2"
-                      >
-                        <IconButton variant="borderless" color="secondary">
-                          <DotsVerticalIcon />
-                        </IconButton>
-                      </Dropdown.Trigger>
-
-                      <Dropdown.Content
-                        menu
-                        PaperProps={{ className: 'w-32' }}
-                        anchorOrigin={{
-                          vertical: 'bottom',
-                          horizontal: 'right',
-                        }}
-                        transformOrigin={{
-                          vertical: 'top',
-                          horizontal: 'right',
-                        }}
-                      >
-                        <Dropdown.Item
-                          onClick={() => handleOpenEditor(environmentVariable)}
+              return (
+                <Fragment key={environmentVariable.id}>
+                  <ListItem.Root
+                    className="px-4 grid grid-cols-2 lg:grid-cols-3 gap-2"
+                    secondaryAction={
+                      <Dropdown.Root>
+                        <Dropdown.Trigger
+                          asChild
+                          hideChevron
+                          className="absolute right-4 top-1/2 -translate-y-1/2"
                         >
-                          <Text className="font-medium">Edit</Text>
-                        </Dropdown.Item>
+                          <IconButton variant="borderless" color="secondary">
+                            <DotsVerticalIcon />
+                          </IconButton>
+                        </Dropdown.Trigger>
 
-                        <Divider component="li" />
-
-                        <Dropdown.Item
-                          onClick={() =>
-                            handleConfirmDelete(environmentVariable)
-                          }
+                        <Dropdown.Content
+                          menu
+                          PaperProps={{ className: 'w-32' }}
+                          anchorOrigin={{
+                            vertical: 'bottom',
+                            horizontal: 'right',
+                          }}
+                          transformOrigin={{
+                            vertical: 'top',
+                            horizontal: 'right',
+                          }}
                         >
-                          <Text
-                            className="font-medium"
-                            sx={{
-                              color: (theme) => theme.palette.error.main,
-                            }}
+                          <Dropdown.Item
+                            onClick={() =>
+                              handleOpenEditor(environmentVariable)
+                            }
                           >
-                            Delete
-                          </Text>
-                        </Dropdown.Item>
-                      </Dropdown.Content>
-                    </Dropdown.Root>
-                  }
-                >
-                  <ListItem.Text className="truncate">
-                    {environmentVariable.name}
-                  </ListItem.Text>
+                            <Text className="font-medium">Edit</Text>
+                          </Dropdown.Item>
 
-                  <Text variant="subtitle1" className="lg:col-span-2 truncate">
-                    {timestamp === '0 seconds ago' ||
-                    timestamp === 'in 0 seconds'
-                      ? 'Now'
-                      : timestamp}
-                  </Text>
-                </ListItem.Root>
+                          <Divider component="li" />
 
-                <Divider
-                  component="li"
-                  className={twMerge(
-                    index === availableEnvironmentVariables.length - 1
-                      ? '!mt-4'
-                      : '!my-4',
-                  )}
-                />
-              </Fragment>
-            );
-          })}
-        </List>
+                          <Dropdown.Item
+                            onClick={() =>
+                              handleConfirmDelete(environmentVariable)
+                            }
+                          >
+                            <Text
+                              className="font-medium"
+                              sx={{
+                                color: (theme) => theme.palette.error.main,
+                              }}
+                            >
+                              Delete
+                            </Text>
+                          </Dropdown.Item>
+                        </Dropdown.Content>
+                      </Dropdown.Root>
+                    }
+                  >
+                    <ListItem.Text className="truncate">
+                      {environmentVariable.name}
+                    </ListItem.Text>
+
+                    <Text
+                      variant="subtitle1"
+                      className="lg:col-span-2 truncate"
+                    >
+                      {timestamp === '0 seconds ago' ||
+                      timestamp === 'in 0 seconds'
+                        ? 'Now'
+                        : timestamp}
+                    </Text>
+                  </ListItem.Root>
+
+                  <Divider
+                    component="li"
+                    className={twMerge(
+                      index === availableEnvironmentVariables.length - 1
+                        ? '!mt-4'
+                        : '!my-4',
+                    )}
+                  />
+                </Fragment>
+              );
+            })}
+          </List>
+        )}
 
         <Button
           className="justify-self-start mx-4"

dashboard/src/components/settings/environmentVariables/SystemEnvironmentVariableSettings/SystemEnvironmentVariableSettings.tsx

@@ -14,7 +14,7 @@ import List from '@/ui/v2/List';
 import { ListItem } from '@/ui/v2/ListItem';
 import Text from '@/ui/v2/Text';
 import { LOCAL_HASURA_URL } from '@/utils/env';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl, generateRemoteAppUrl } from '@/utils/helpers';
 import { useGetAppInjectedVariablesQuery } from '@/utils/__generated__/graphql';
 import { Fragment, useState } from 'react';
 
@@ -71,11 +71,6 @@ export default function SystemEnvironmentVariableSettings() {
     });
   }
 
-  const hasuraUrl =
-    process.env.NEXT_PUBLIC_ENV === 'dev'
-      ? LOCAL_HASURA_URL
-      : generateRemoteAppUrl(currentApplication.subdomain);
-
   const systemEnvironmentVariables = [
     {
       key: 'NHOST_BACKEND_URL',
@@ -83,7 +78,17 @@ export default function SystemEnvironmentVariableSettings() {
     },
     { key: 'NHOST_SUBDOMAIN', value: currentApplication.subdomain },
     { key: 'NHOST_REGION', value: currentApplication.region.awsName },
-    { key: 'NHOST_HASURA_URL', value: `${hasuraUrl}/console` },
+    {
+      key: 'NHOST_HASURA_URL',
+      value:
+        process.env.NEXT_PUBLIC_ENV === 'dev'
+          ? LOCAL_HASURA_URL
+          : `${generateAppServiceUrl(
+              currentApplication.subdomain,
+              currentApplication.region.awsName,
+              'hasura',
+            )}/console`,
+    },
     { key: 'NHOST_AUTH_URL', value: appClient.auth.url },
     { key: 'NHOST_GRAPHQL_URL', value: appClient.graphql.url },
     { key: 'NHOST_STORAGE_URL', value: appClient.storage.url },

dashboard/src/components/settings/signInMethods/AppleProviderSettings/AppleProviderSettings.tsx

@@ -11,7 +11,7 @@ import CopyIcon from '@/ui/v2/icons/CopyIcon';
 import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
 import { copy } from '@/utils/copy';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import { toastStyleProps } from '@/utils/settings/settingsConstants';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -23,7 +23,6 @@ export interface AppleProviderFormValues {
   authAppleKeyId: string;
   authAppleClientId: string;
   authApplePrivateKey: string;
-  authAppleScope: string;
 }
 
 export default function AppleProviderSettings() {
@@ -38,7 +37,6 @@ export default function AppleProviderSettings() {
         authAppleKeyId,
         authAppleClientId,
         authApplePrivateKey,
-        authAppleScope,
       },
     },
     loading,
@@ -57,7 +55,6 @@ export default function AppleProviderSettings() {
       authAppleKeyId,
       authAppleClientId,
       authApplePrivateKey,
-      authAppleScope,
       authAppleEnabled,
     },
   });
@@ -83,9 +80,7 @@ export default function AppleProviderSettings() {
     const updateAppMutation = updateApp({
       variables: {
         id: currentApplication.id,
-        app: {
-          ...values,
-        },
+        app: values,
       },
     });
 
@@ -96,7 +91,7 @@ export default function AppleProviderSettings() {
         success: `Apple settings have been updated successfully.`,
         error: `An error occurred while trying to update the project's Apple settings.`,
       },
-      { ...toastStyleProps },
+      toastStyleProps,
     );
 
     form.reset(values);
@@ -108,9 +103,11 @@ export default function AppleProviderSettings() {
         <SettingsContainer
           title="Apple"
           description="Allow users to sign in with Apple."
-          primaryActionButtonProps={{
-            disabled: !formState.isValid || !formState.isDirty,
-            loading: formState.isSubmitting,
+          slotProps={{
+            submitButton: {
+              disabled: !formState.isValid || !formState.isDirty,
+              loading: formState.isSubmitting,
+            },
           }}
           docsLink="https://docs.nhost.io/authentication/sign-in-with-apple"
           docsTitle="how to sign in users with Apple"
@@ -134,9 +131,9 @@ export default function AppleProviderSettings() {
             hideEmptyHelperText
           />
           <Input
-            {...register('authAppleScope')}
-            name="authAppleScope"
-            id="authAppleScope"
+            {...register('authAppleClientId')}
+            name="authAppleClientId"
+            id="authAppleClientId"
             label="Service ID"
             placeholder="Apple Service ID"
             className="col-span-1"
@@ -168,9 +165,11 @@ export default function AppleProviderSettings() {
           <Input
             name="redirectUrl"
             id="redirectUrl"
-            defaultValue={`${generateRemoteAppUrl(
+            defaultValue={`${generateAppServiceUrl(
               currentApplication.subdomain,
-            )}/v1/auth/signin/provider/apple/callback`}
+              currentApplication.region.awsName,
+              'auth',
+            )}/v1/signin/provider/apple/callback`}
             className="col-span-2"
             fullWidth
             hideEmptyHelperText
@@ -185,9 +184,11 @@ export default function AppleProviderSettings() {
                   onClick={(e) => {
                     e.stopPropagation();
                     copy(
-                      `${generateRemoteAppUrl(
+                      `${generateAppServiceUrl(
                         currentApplication.subdomain,
-                      )}/v1/auth/signin/provider/apple/callback`,
+                        currentApplication.region.awsName,
+                        'auth',
+                      )}/v1/signin/provider/apple/callback`,
                       'Redirect URL',
                     );
                   }}

dashboard/src/components/settings/signInMethods/DiscordProviderSettings/DiscordProviderSettings.tsx

@@ -13,7 +13,7 @@ import CopyIcon from '@/ui/v2/icons/CopyIcon';
 import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
 import { copy } from '@/utils/copy';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import { toastStyleProps } from '@/utils/settings/settingsConstants';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -112,9 +112,11 @@ export default function DiscordProviderSettings() {
             fullWidth
             hideEmptyHelperText
             label="Redirect URL"
-            defaultValue={`${generateRemoteAppUrl(
+            defaultValue={`${generateAppServiceUrl(
               currentApplication.subdomain,
-            )}/v1/auth/signin/provider/discord/callback`}
+              currentApplication.region.awsName,
+              'auth',
+            )}/v1/signin/provider/discord/callback`}
             disabled
             endAdornment={
               <InputAdornment position="end" className="absolute right-2">
@@ -125,9 +127,11 @@ export default function DiscordProviderSettings() {
                   onClick={(e) => {
                     e.stopPropagation();
                     copy(
-                      `${generateRemoteAppUrl(
+                      `${generateAppServiceUrl(
                         currentApplication.subdomain,
-                      )}/v1/auth/signin/provider/discord/callback`,
+                        currentApplication.region.awsName,
+                        'auth',
+                      )}/v1/signin/provider/discord/callback`,
                       'Redirect URL',
                     );
                   }}

dashboard/src/components/settings/signInMethods/FacebookProviderSettings/FacebookProviderSettings.tsx

@@ -13,7 +13,7 @@ import CopyIcon from '@/ui/v2/icons/CopyIcon';
 import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
 import { copy } from '@/utils/copy';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import { toastStyleProps } from '@/utils/settings/settingsConstants';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -112,9 +112,11 @@ export default function FacebookProviderSettings() {
             fullWidth
             hideEmptyHelperText
             label="Redirect URL"
-            defaultValue={`${generateRemoteAppUrl(
+            defaultValue={`${generateAppServiceUrl(
               currentApplication.subdomain,
-            )}/v1/auth/signin/provider/facebook/callback`}
+              currentApplication.region.awsName,
+              'auth',
+            )}/v1/signin/provider/facebook/callback`}
             disabled
             endAdornment={
               <InputAdornment position="end" className="absolute right-2">
@@ -125,9 +127,11 @@ export default function FacebookProviderSettings() {
                   onClick={(e) => {
                     e.stopPropagation();
                     copy(
-                      `${generateRemoteAppUrl(
+                      `${generateAppServiceUrl(
                         currentApplication.subdomain,
-                      )}/v1/auth/signin/provider/facebook/callback`,
+                        currentApplication.region.awsName,
+                        'auth',
+                      )}/v1/signin/provider/facebook/callback`,
                       'Redirect URL',
                     );
                   }}

dashboard/src/components/settings/signInMethods/GitHubProviderSettings/GitHubProviderSettings.tsx

@@ -13,7 +13,7 @@ import CopyIcon from '@/ui/v2/icons/CopyIcon';
 import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
 import { copy } from '@/utils/copy';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import { toastStyleProps } from '@/utils/settings/settingsConstants';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -112,9 +112,11 @@ export default function GitHubProviderSettings() {
             fullWidth
             hideEmptyHelperText
             label="Redirect URL"
-            defaultValue={`${generateRemoteAppUrl(
+            defaultValue={`${generateAppServiceUrl(
               currentApplication.subdomain,
-            )}/v1/auth/signin/provider/github/callback`}
+              currentApplication.region.awsName,
+              'auth',
+            )}/v1/signin/provider/github/callback`}
             disabled
             endAdornment={
               <InputAdornment position="end" className="absolute right-2">
@@ -125,9 +127,11 @@ export default function GitHubProviderSettings() {
                   onClick={(e) => {
                     e.stopPropagation();
                     copy(
-                      `${generateRemoteAppUrl(
+                      `${generateAppServiceUrl(
                         currentApplication.subdomain,
-                      )}/v1/auth/signin/provider/github/callback`,
+                        currentApplication.region.awsName,
+                        'auth',
+                      )}/v1/signin/provider/github/callback`,
                       'Redirect URL',
                     );
                   }}

dashboard/src/components/settings/signInMethods/GoogleProviderSettings/GoogleProviderSettings.tsx

@@ -13,7 +13,7 @@ import CopyIcon from '@/ui/v2/icons/CopyIcon';
 import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
 import { copy } from '@/utils/copy';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import { toastStyleProps } from '@/utils/settings/settingsConstants';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -112,9 +112,11 @@ export default function GoogleProviderSettings() {
             fullWidth
             hideEmptyHelperText
             label="Redirect URL"
-            defaultValue={`${generateRemoteAppUrl(
+            defaultValue={`${generateAppServiceUrl(
               currentApplication.subdomain,
-            )}/v1/auth/signin/provider/google/callback`}
+              currentApplication.region.awsName,
+              'auth',
+            )}/v1/signin/provider/google/callback`}
             disabled
             endAdornment={
               <InputAdornment position="end" className="absolute right-2">
@@ -125,9 +127,11 @@ export default function GoogleProviderSettings() {
                   onClick={(e) => {
                     e.stopPropagation();
                     copy(
-                      `${generateRemoteAppUrl(
+                      `${generateAppServiceUrl(
                         currentApplication.subdomain,
-                      )}/v1/auth/signin/provider/google/callback`,
+                        currentApplication.region.awsName,
+                        'auth',
+                      )}/v1/signin/provider/google/callback`,
                       'Redirect URL',
                     );
                   }}

dashboard/src/components/settings/signInMethods/LinkedInProviderSettings/LinkedInProviderSettings.tsx

@@ -13,7 +13,7 @@ import CopyIcon from '@/ui/v2/icons/CopyIcon';
 import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
 import { copy } from '@/utils/copy';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import { toastStyleProps } from '@/utils/settings/settingsConstants';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -112,9 +112,11 @@ export default function LinkedInProviderSettings() {
             fullWidth
             hideEmptyHelperText
             label="Redirect URL"
-            defaultValue={`${generateRemoteAppUrl(
+            defaultValue={`${generateAppServiceUrl(
               currentApplication.subdomain,
-            )}/v1/auth/signin/provider/linkedin/callback`}
+              currentApplication.region.awsName,
+              'auth',
+            )}/v1/signin/provider/linkedin/callback`}
             disabled
             endAdornment={
               <InputAdornment position="end" className="absolute right-2">
@@ -125,9 +127,11 @@ export default function LinkedInProviderSettings() {
                   onClick={(e) => {
                     e.stopPropagation();
                     copy(
-                      `${generateRemoteAppUrl(
+                      `${generateAppServiceUrl(
                         currentApplication.subdomain,
-                      )}/v1/auth/signin/provider/linkedin/callback`,
+                        currentApplication.region.awsName,
+                        'auth',
+                      )}/v1/signin/provider/linkedin/callback`,
                       'Redirect URL',
                     );
                   }}

dashboard/src/components/settings/signInMethods/ProvidersUpdatedAlert/ProvidersUpdatedAlert.tsx

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

dashboard/src/components/settings/signInMethods/ProvidersUpdatedAlert/index.ts

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

dashboard/src/components/settings/signInMethods/SpotifyProviderSettings/SpotifyProviderSettings.tsx

@@ -13,7 +13,7 @@ import CopyIcon from '@/ui/v2/icons/CopyIcon';
 import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
 import { copy } from '@/utils/copy';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import { toastStyleProps } from '@/utils/settings/settingsConstants';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -112,9 +112,11 @@ export default function SpotifyProviderSettings() {
             fullWidth
             hideEmptyHelperText
             label="Redirect URL"
-            defaultValue={`${generateRemoteAppUrl(
+            defaultValue={`${generateAppServiceUrl(
               currentApplication.subdomain,
-            )}/v1/auth/signin/provider/spotify/callback`}
+              currentApplication.region.awsName,
+              'auth',
+            )}/v1/signin/provider/spotify/callback`}
             disabled
             endAdornment={
               <InputAdornment position="end" className="absolute right-2">
@@ -125,9 +127,11 @@ export default function SpotifyProviderSettings() {
                   onClick={(e) => {
                     e.stopPropagation();
                     copy(
-                      `${generateRemoteAppUrl(
+                      `${generateAppServiceUrl(
                         currentApplication.subdomain,
-                      )}/v1/auth/signin/provider/spotify/callback`,
+                        currentApplication.region.awsName,
+                        'auth',
+                      )}/v1/signin/provider/spotify/callback`,
                       'Redirect URL',
                     );
                   }}

dashboard/src/components/settings/signInMethods/TwitchProviderSettings/TwitchProviderSettings.tsx

@@ -13,7 +13,7 @@ import CopyIcon from '@/ui/v2/icons/CopyIcon';
 import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
 import { copy } from '@/utils/copy';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import { toastStyleProps } from '@/utils/settings/settingsConstants';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -112,9 +112,11 @@ export default function TwitchProviderSettings() {
             fullWidth
             hideEmptyHelperText
             label="Redirect URL"
-            defaultValue={`${generateRemoteAppUrl(
+            defaultValue={`${generateAppServiceUrl(
               currentApplication.subdomain,
-            )}/v1/auth/signin/provider/twitch/callback`}
+              currentApplication.region.awsName,
+              'auth',
+            )}/v1/signin/provider/twitch/callback`}
             disabled
             endAdornment={
               <InputAdornment position="end" className="absolute right-2">
@@ -125,9 +127,11 @@ export default function TwitchProviderSettings() {
                   onClick={(e) => {
                     e.stopPropagation();
                     copy(
-                      `${generateRemoteAppUrl(
+                      `${generateAppServiceUrl(
                         currentApplication.subdomain,
-                      )}/v1/auth/signin/provider/twitch/callback`,
+                        currentApplication.region.awsName,
+                        'auth',
+                      )}/v1/signin/provider/twitch/callback`,
                       'Redirect URL',
                     );
                   }}

dashboard/src/components/settings/signInMethods/TwitterProviderSettings/TwitterProviderSettings.tsx

@@ -11,7 +11,7 @@ import CopyIcon from '@/ui/v2/icons/CopyIcon';
 import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
 import { copy } from '@/utils/copy';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import { toastStyleProps } from '@/utils/settings/settingsConstants';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -125,9 +125,11 @@ export default function TwitterProviderSettings() {
           <Input
             name="redirectUrl"
             id="redirectUrl"
-            defaultValue={`${generateRemoteAppUrl(
+            defaultValue={`${generateAppServiceUrl(
               currentApplication.subdomain,
-            )}/v1/auth/signin/provider/twitter/callback`}
+              currentApplication.region.awsName,
+              'auth',
+            )}/v1/signin/provider/twitter/callback`}
             className="col-span-2"
             fullWidth
             hideEmptyHelperText
@@ -142,9 +144,11 @@ export default function TwitterProviderSettings() {
                   onClick={(e) => {
                     e.stopPropagation();
                     copy(
-                      `${generateRemoteAppUrl(
+                      `${generateAppServiceUrl(
                         currentApplication.subdomain,
-                      )}/v1/auth/signin/provider/twitter/callback`,
+                        currentApplication.region.awsName,
+                        'auth',
+                      )}/v1/signin/provider/twitter/callback`,
                       'Redirect URL',
                     );
                   }}

dashboard/src/components/settings/signInMethods/WindowsLiveProviderSettings/WindowsLiveProviderSettings.tsx

@@ -13,7 +13,7 @@ import CopyIcon from '@/ui/v2/icons/CopyIcon';
 import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
 import { copy } from '@/utils/copy';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import { toastStyleProps } from '@/utils/settings/settingsConstants';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -111,9 +111,11 @@ export default function WindowsLiveProviderSettings() {
             fullWidth
             hideEmptyHelperText
             label="Redirect URL"
-            defaultValue={`${generateRemoteAppUrl(
+            defaultValue={`${generateAppServiceUrl(
               currentApplication.subdomain,
-            )}/v1/auth/signin/provider/microsoft/callback`}
+              currentApplication.region.awsName,
+              'auth',
+            )}/v1/signin/provider/windowslive/callback`}
             disabled
             endAdornment={
               <InputAdornment position="end" className="absolute right-2">
@@ -124,9 +126,11 @@ export default function WindowsLiveProviderSettings() {
                   onClick={(e) => {
                     e.stopPropagation();
                     copy(
-                      `${generateRemoteAppUrl(
+                      `${generateAppServiceUrl(
                         currentApplication.subdomain,
-                      )}/v1/auth/signin/provider/microsoft/callback`,
+                        currentApplication.region.awsName,
+                        'auth',
+                      )}/v1/signin/provider/windowslive/callback`,
                       'Redirect URL',
                     );
                   }}

dashboard/src/components/settings/signInMethods/WorkOsProviderSettings/WorkOsProviderSettings.tsx

@@ -11,7 +11,7 @@ import CopyIcon from '@/ui/v2/icons/CopyIcon';
 import Input from '@/ui/v2/Input';
 import InputAdornment from '@/ui/v2/InputAdornment';
 import { copy } from '@/utils/copy';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import { toastStyleProps } from '@/utils/settings/settingsConstants';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
@@ -163,9 +163,11 @@ export default function WorkOsProviderSettings() {
           <Input
             name="redirectUrl"
             id="redirectUrl"
-            defaultValue={`${generateRemoteAppUrl(
+            defaultValue={`${generateAppServiceUrl(
               currentApplication.subdomain,
-            )}/v1/auth/signin/provider/workos/callback`}
+              currentApplication.region.awsName,
+              'auth',
+            )}/v1/signin/provider/workos/callback`}
             className="col-span-6"
             fullWidth
             hideEmptyHelperText
@@ -180,9 +182,11 @@ export default function WorkOsProviderSettings() {
                   onClick={(e) => {
                     e.stopPropagation();
                     copy(
-                      `${generateRemoteAppUrl(
+                      `${generateAppServiceUrl(
                         currentApplication.subdomain,
-                      )}/v1/auth/signin/provider/workos/callback`,
+                        currentApplication.region.awsName,
+                        'auth',
+                      )}/v1/signin/provider/workos/callback`,
                       'Redirect URL',
                     );
                   }}

dashboard/src/components/ui/Divider.tsx

@@ -1,30 +0,0 @@
-import clsx from 'clsx';
-import type { HTMLAttributes } from 'react';
-
-export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Determines the vertical margin of the divider.
-   *
-   * @default 'high'
-   */
-  spacing?: 'low' | 'medium' | 'high';
-  /**
-   * Arbitrary classnames to be added to the divider.
-   *
-   */
-  className?: string;
-}
-
-export function Divider({ spacing = 'high', className }: DividerProps) {
-  return (
-    <div
-      className={clsx(
-        'order-3 mx-auto h-[0.25px] w-full self-stretch bg-verydark opacity-20',
-        spacing === 'low' && 'my-12',
-        spacing === 'medium' && 'my-16',
-        spacing === 'high' && 'my-20',
-        className,
-      )}
-    />
-  );
-}

dashboard/src/components/ui/InlineInput/InlineInput.tsx

@@ -1,121 +0,0 @@
-import clsx from 'clsx';
-import type {
-  DetailedHTMLProps,
-  ForwardedRef,
-  HTMLProps,
-  ReactNode,
-} from 'react';
-import { forwardRef } from 'react';
-
-export interface InputFieldProps
-  extends DetailedHTMLProps<HTMLProps<HTMLInputElement>, HTMLInputElement> {
-  /**
-   * Props to be passed to the input wrapper.
-   */
-  wrapperProps?: Omit<
-    DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement>,
-    'children'
-  >;
-  /**
-   * Props to be passed to the label element.
-   */
-  labelProps?: Omit<
-    DetailedHTMLProps<HTMLProps<HTMLLabelElement>, HTMLLabelElement>,
-    'htmlFor' | 'children'
-  >;
-  /**
-   * Input label.
-   */
-  label?: string;
-  /**
-   * Start input adornment for this component.
-   */
-  startAdornment?: ReactNode;
-  /**
-   * Error to be displayed.
-   */
-  error?: ReactNode;
-}
-
-const InlineInput = forwardRef(
-  (
-    {
-      label,
-      labelProps,
-      startAdornment,
-      wrapperProps,
-      className,
-      error,
-      ...props
-    }: InputFieldProps,
-    ref: ForwardedRef<HTMLInputElement>,
-  ) => {
-    const { className: labelClassName, ...restLabelProps } = labelProps || {};
-    const { className: wrapperClassName, ...restWrapperProps } =
-      wrapperProps || {};
-
-    return (
-      <div className="grid grid-flow-row gap-1">
-        <div
-          className={clsx(
-            'grid grid-cols-5 items-center gap-y-1 py-1.5',
-            wrapperClassName,
-          )}
-          {...restWrapperProps}
-        >
-          {label && (
-            <label
-              htmlFor={props.id}
-              className={clsx(
-                'col-span-2 text-sm+ font-medium text-greyscaleDark',
-                labelClassName,
-              )}
-              {...restLabelProps}
-            >
-              {label}
-            </label>
-          )}
-
-          <div
-            className={clsx(
-              'flex flex-row place-content-start items-center rounded-sm px-2 py-1',
-              error
-                ? 'outline outline-2 outline-red'
-                : 'focus-within:outline focus-within:outline-2 focus-within:outline-blue',
-              label ? 'col-span-3' : 'col-span-5',
-            )}
-          >
-            {startAdornment && (
-              <label className="flex-shrink-0" htmlFor={props.id}>
-                {startAdornment}
-              </label>
-            )}
-
-            <input
-              className={clsx(
-                'h-full w-full rounded-sm+ px-0.5 font-display text-sm+ text-greyscaleDark focus:outline-none',
-                className,
-              )}
-              aria-invalid={Boolean(error)}
-              ref={ref}
-              {...props}
-            />
-          </div>
-
-          {error && (
-            <div
-              className="col-span-5 text-right text-xs text-red"
-              role="alert"
-            >
-              {error}
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  },
-);
-
-InlineInput.displayName = 'NhostInlineInput';
-
-export default InlineInput;

dashboard/src/components/ui/InlineInput/index.ts

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

dashboard/src/components/ui/Plans.tsx

@@ -1,77 +0,0 @@
-import type { PrefetchNewAppPlansFragment } from '@/generated/graphql';
-import { Text } from '@/ui/Text';
-import Checkbox from '@/ui/v2/Checkbox';
-import { planDescriptions } from '@/utils/planDescriptions';
-import { RadioGroup } from '@headlessui/react';
-import clsx from 'clsx';
-import React from 'react';
-
-interface PlanSelectorProps {
-  options: PrefetchNewAppPlansFragment[];
-  value: PrefetchNewAppPlansFragment;
-  onChange:
-    | React.Dispatch<React.SetStateAction<PrefetchNewAppPlansFragment>>
-    | any;
-}
-
-export function PlanSelector({ options, value, onChange }: PlanSelectorProps) {
-  return (
-    <RadioGroup value={value} onChange={onChange}>
-      <RadioGroup.Label className="sr-only">Pricing plans</RadioGroup.Label>
-      <div className="relative  divide-y-1 border-t-1 border-b-1 bg-white">
-        {options.map((plan) => (
-          <RadioGroup.Option key={plan.name} value={plan}>
-            {({ checked }) => (
-              <div className="cu flex cursor-pointer flex-row place-content-between items-center py-4 font-display">
-                <RadioGroup.Label
-                  as="div"
-                  className="flex flex-row font-medium"
-                >
-                  <Checkbox
-                    aria-describedby="plan"
-                    checked={plan.name === value.name}
-                  />
-
-                  <div className="flex w-80">
-                    <div className=" self-center pl-2 text-xs font-medium text-greyscaleDark">
-                      <span className="font-bold">{plan.name}:</span>{' '}
-                      <span className="leading-4">
-                        {planDescriptions[plan.name]}
-                      </span>
-                    </div>
-                  </div>
-                </RadioGroup.Label>
-                <div className="flex">
-                  <span
-                    className={clsx(
-                      'self-center font-medium',
-                      checked ? 'text-indigo-900' : 'text-black',
-                    )}
-                  >
-                    <div className="mr-3 self-center text-lg text-greyscaleDark">
-                      {plan.isFree ? (
-                        'Free'
-                      ) : (
-                        <div className="flex flex-row">
-                          $ {plan.price}{' '}
-                          <Text
-                            size="tiny"
-                            className="ml-1 self-center tracking-wide"
-                          >
-                            / mo
-                          </Text>
-                        </div>
-                      )}
-                    </div>
-                  </span>
-                </div>
-              </div>
-            )}
-          </RadioGroup.Option>
-        ))}
-      </div>
-    </RadioGroup>
-  );
-}
-
-export default PlanSelector;

dashboard/src/components/ui/Tooltip/Tooltip.tsx

@@ -1,49 +0,0 @@
-import type { ForwardedRef, PropsWithChildren } from 'react';
-import { forwardRef } from 'react';
-
-export interface TooltipProps extends PropsWithChildren<unknown> {
-  /**
-   * Title of the tooltip.
-   */
-  title: string;
-  /**
-   * Determine if the tooltip should be shown.
-   */
-  disabled?: boolean;
-}
-
-export const Tooltip = forwardRef(
-  (
-    { title, children, disabled }: TooltipProps,
-    ref: ForwardedRef<HTMLDivElement>,
-  ) => (
-    <div className="group relative" ref={ref}>
-      {children}
-
-      {!disabled && (
-        <div className="absolute left-2 bottom-1 z-50 hidden group-hover:block">
-          <svg
-            className="absolute -top-2 left-3 z-50 mr-3 h-3 w-3 -rotate-180 transform text-greyscaleDark"
-            x="0px"
-            y="0px"
-            viewBox="0 0 255 255"
-            xmlSpace="preserve"
-          >
-            <polygon
-              className="border border-greyscaleDark fill-current text-greyscaleDark"
-              points="0,0 127.5,127.5 255,0"
-            />
-          </svg>
-
-          <div className="text-sharp absolute left-0 z-50 mt-1 w-40 origin-top-left rounded-md bg-greyscaleDark p-2 font-display text-sm- font-medium text-white shadow-2xl">
-            {title}
-          </div>
-        </div>
-      )}
-    </div>
-  ),
-);
-
-Tooltip.displayName = 'NhostTooltip';
-
-export default Tooltip;

dashboard/src/components/ui/Tooltip/index.ts

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

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

@@ -34,7 +34,7 @@ const StyledListItemButton = styled(MaterialListItemButton)(({ theme }) => ({
   alignItems: 'center',
   gap: theme.spacing(),
   [`&.${getListItemButtonUtilityClass('dense')}`]: {
-    padding: theme.spacing(0.75, 1.25),
+    padding: theme.spacing(1, 1.25),
   },
   [`&.${listItemButtonClasses.selected}`]: {
     backgroundColor: theme.palette.primary.light,

dashboard/src/components/users/AddUser.tsx

@@ -4,7 +4,7 @@ import { Modal } from '@/ui/Modal';
 import Button from '@/ui/v2/Button';
 import Input from '@/ui/v2/Input';
 import Text from '@/ui/v2/Text';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import { triggerToast } from '@/utils/toast';
 import { useApolloClient } from '@apollo/client';
 import axios from 'axios';
@@ -43,9 +43,11 @@ export function AddUserModal({ modalIsOpen, setModalIsOpen }: any) {
       return;
     }
 
-    const signUpUrl = `${generateRemoteAppUrl(
+    const signUpUrl = `${generateAppServiceUrl(
       currentApplication?.subdomain,
-    )}/v1/auth/signup/email-password`;
+      currentApplication?.region.awsName,
+      'auth',
+    )}/v1/signup/email-password`;
 
     try {
       await axios.post(signUpUrl, {

dashboard/src/components/workspace/WorkspaceSelectorNewApp.tsx

@@ -1,29 +0,0 @@
-import { Avatar } from '@/ui/Avatar';
-import { Text } from '@/ui/Text';
-import { nhost } from '@/utils/nhost';
-import Image from 'next/image';
-
-export function WorkspaceSelectorNewApp({ option }: any) {
-  const user = nhost.auth.getUser();
-
-  return (
-    <div className="flex flex-row items-center py-0.5">
-      {option.name === 'Default Workspace' ? (
-        <Avatar
-          className="h-6 w-6 rounded-full"
-          name={user?.displayName}
-          avatarUrl={user?.avatarUrl}
-        />
-      ) : (
-        <div className="h-6 w-6 overflow-hidden rounded-md">
-          <Image src="/logos/new.svg" alt="Nhost Logo" width={24} height={24} />
-        </div>
-      )}
-      <Text className="ml-2 font-medium" color="greyscaleDark">
-        {option.name}
-      </Text>
-    </div>
-  );
-}
-
-export default WorkspaceSelectorNewApp;

dashboard/src/gql/app/getAppByWorkspaceAndName.graphql

@@ -7,6 +7,7 @@ fragment GetAppByWorkspaceAndName on apps {
   name
   createdAt
   isProvisioned
+  providersUpdated
   githubRepository {
     id
     name

dashboard/src/gql/settings/confirmProvidersUpdated.gql

@@ -0,0 +1,5 @@
+mutation confirmProvidersUpdated($id: uuid!) {
+  updateApp(pk_columns: { id: $id }, _set: { providersUpdated: true }) {
+    id
+  }
+}

dashboard/src/gql/user/getOneUser.gql

@@ -24,6 +24,7 @@ query getOneUser($userId: uuid!) {
           createdAt
           desiredState
           nhostBaseFolder
+          providersUpdated
           featureFlags {
             description
             id

dashboard/src/hooks/dataBrowser/useCreateColumnMutation/useCreateColumnMutation.ts

@@ -1,6 +1,6 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -38,7 +38,11 @@ export default function useCreateColumnMutation({
     query: { dataSourceSlug, schemaSlug, tableSlug },
   } = useRouter();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const appUrl = generateRemoteAppUrl(currentApplication?.subdomain);
+  const appUrl = generateAppServiceUrl(
+    currentApplication?.subdomain,
+    currentApplication?.region.awsName,
+    'hasura',
+  );
   const mutationFn = isPlatform ? createColumn : createColumnMigration;
 
   const mutation = useMutation(

dashboard/src/hooks/dataBrowser/useCreateRecordMutation/useCreateRecordMutation.ts

@@ -1,5 +1,5 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -40,7 +40,11 @@ export default function useCreateRecordMutation<TData extends object = {}>({
     query: { dataSourceSlug, schemaSlug, tableSlug },
   } = useRouter();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const appUrl = generateRemoteAppUrl(currentApplication?.subdomain);
+  const appUrl = generateAppServiceUrl(
+    currentApplication?.subdomain,
+    currentApplication?.region.awsName,
+    'hasura',
+  );
 
   const mutation = useMutation(
     (variables) =>

dashboard/src/hooks/dataBrowser/useCreateTableMutation/useCreateTableMutation.ts

@@ -1,6 +1,6 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -36,7 +36,11 @@ export default function useCreateTableMutation({
   } = useRouter();
 
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const appUrl = generateRemoteAppUrl(currentApplication?.subdomain);
+  const appUrl = generateAppServiceUrl(
+    currentApplication?.subdomain,
+    currentApplication?.region.awsName,
+    'hasura',
+  );
   const mutationFn = isPlatform ? createTable : createTableMigration;
 
   const mutation = useMutation(

dashboard/src/hooks/dataBrowser/useDatabaseQuery/useDatabaseQuery.ts

@@ -1,5 +1,5 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -38,7 +38,11 @@ export default function useDatabaseQuery(
     isReady,
   } = useRouter();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const appUrl = generateRemoteAppUrl(currentApplication?.subdomain);
+  const appUrl = generateAppServiceUrl(
+    currentApplication?.subdomain,
+    currentApplication?.region.awsName,
+    'hasura',
+  );
 
   const query = useQuery<FetchDatabaseReturnType>(
     queryKey,

dashboard/src/hooks/dataBrowser/useDeleteColumnMutation/useDeleteColumnMutation.ts

@@ -1,6 +1,6 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -39,7 +39,11 @@ export default function useDeleteColumnMutation({
     query: { dataSourceSlug, schemaSlug, tableSlug },
   } = useRouter();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const appUrl = generateRemoteAppUrl(currentApplication?.subdomain);
+  const appUrl = generateAppServiceUrl(
+    currentApplication?.subdomain,
+    currentApplication?.region.awsName,
+    'hasura',
+  );
   const mutationFn = isPlatform ? deleteColumn : deleteColumnMigration;
 
   const mutation = useMutation(

dashboard/src/hooks/dataBrowser/useDeleteRecordMutation/useDeleteRecordMutation.ts

@@ -1,5 +1,5 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -36,7 +36,11 @@ export default function useDeleteRecordMutation({
     query: { dataSourceSlug, schemaSlug, tableSlug },
   } = useRouter();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const appUrl = generateRemoteAppUrl(currentApplication?.subdomain);
+  const appUrl = generateAppServiceUrl(
+    currentApplication?.subdomain,
+    currentApplication?.region.awsName,
+    'hasura',
+  );
 
   const mutation = useMutation(
     (variables) =>

dashboard/src/hooks/dataBrowser/useDeleteTableMutation/useDeleteTableMutation.ts

@@ -1,6 +1,6 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -34,7 +34,11 @@ export default function useDeleteTableMutation({
     query: { dataSourceSlug },
   } = useRouter();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const appUrl = generateRemoteAppUrl(currentApplication?.subdomain);
+  const appUrl = generateAppServiceUrl(
+    currentApplication?.subdomain,
+    currentApplication?.region.awsName,
+    'hasura',
+  );
   const mutationFn = isPlatform ? deleteTable : deleteTableMigration;
 
   const mutation = useMutation(

dashboard/src/hooks/dataBrowser/useMetadataQuery/useMetadataQuery.ts

@@ -1,5 +1,5 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -39,7 +39,11 @@ export default function useMetadataQuery(
     isReady,
   } = useRouter();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const appUrl = generateRemoteAppUrl(currentApplication?.subdomain);
+  const appUrl = generateAppServiceUrl(
+    currentApplication?.subdomain,
+    currentApplication?.region.awsName,
+    'hasura',
+  );
 
   const query = useQuery<FetchMetadataReturnType>(
     queryKey,

dashboard/src/hooks/dataBrowser/useTableQuery/useTableQuery.ts

@@ -1,5 +1,5 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -39,7 +39,11 @@ export default function useTableQuery(
     isReady,
   } = useRouter();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const appUrl = generateRemoteAppUrl(currentApplication?.subdomain);
+  const appUrl = generateAppServiceUrl(
+    currentApplication?.subdomain,
+    currentApplication?.region.awsName,
+    'hasura',
+  );
 
   return useQuery<FetchTableReturnType>(
     queryKey,

dashboard/src/hooks/dataBrowser/useTrackForeignKeyRelationsMutation/useTrackForeignKeyRelationsMutation.ts

@@ -1,6 +1,6 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -34,7 +34,11 @@ export default function useTrackForeignKeyRelationMutation({
     query: { dataSourceSlug },
   } = useRouter();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const appUrl = generateRemoteAppUrl(currentApplication?.subdomain);
+  const appUrl = generateAppServiceUrl(
+    currentApplication?.subdomain,
+    currentApplication?.region.awsName,
+    'hasura',
+  );
   const mutationFn = isPlatform
     ? trackForeignKeyRelations
     : trackForeignKeyRelationsMigration;

dashboard/src/hooks/dataBrowser/useTrackTableMutation/useTrackTableMutation.ts

@@ -1,6 +1,6 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -35,7 +35,11 @@ export default function useTrackTableMutation({
     query: { dataSourceSlug, schemaSlug },
   } = useRouter();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const appUrl = generateRemoteAppUrl(currentApplication?.subdomain);
+  const appUrl = generateAppServiceUrl(
+    currentApplication?.subdomain,
+    currentApplication?.region.awsName,
+    'hasura',
+  );
   const mutationFn = isPlatform ? trackTable : trackTableMigration;
 
   const mutation = useMutation(

dashboard/src/hooks/dataBrowser/useUpdateColumnMutation/useUpdateColumnMutation.ts

@@ -1,6 +1,6 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -39,7 +39,11 @@ export default function useUpdateColumnMutation({
     query: { dataSourceSlug, schemaSlug, tableSlug },
   } = useRouter();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const appUrl = generateRemoteAppUrl(currentApplication?.subdomain);
+  const appUrl = generateAppServiceUrl(
+    currentApplication?.subdomain,
+    currentApplication?.region.awsName,
+    'hasura',
+  );
   const mutationFn = isPlatform ? updateColumn : updateColumnMigration;
 
   const mutation = useMutation(

dashboard/src/hooks/dataBrowser/useUpdateRecordMutation/useUpdateRecordMutation.ts

@@ -1,5 +1,5 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -40,7 +40,11 @@ export default function useUpdateRecordMutation<TData extends object = {}>({
     query: { dataSourceSlug, schemaSlug, tableSlug },
   } = useRouter();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const appUrl = generateRemoteAppUrl(currentApplication?.subdomain);
+  const appUrl = generateAppServiceUrl(
+    currentApplication?.subdomain,
+    currentApplication?.region.awsName,
+    'hasura',
+  );
 
   const mutation = useMutation(
     (variables) =>

dashboard/src/hooks/dataBrowser/useUpdateTableMutation/useUpdateTableMutation.ts

@@ -1,6 +1,6 @@
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import type { MutationOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -35,7 +35,11 @@ export default function useUpdateTableMutation({
     query: { dataSourceSlug, schemaSlug },
   } = useRouter();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const appUrl = generateRemoteAppUrl(currentApplication?.subdomain);
+  const appUrl = generateAppServiceUrl(
+    currentApplication?.subdomain,
+    currentApplication?.region.awsName,
+    'hasura',
+  );
   const mutationFn = isPlatform ? updateTable : updateTableMigration;
 
   const mutation = useMutation(

dashboard/src/hooks/overview/useDatabaseSizeOfApplication/fetchProjectDatabaseSize.ts

@@ -1,12 +1,16 @@
 import type { QueryError, QueryResult } from '@/types/data-browser';
 import normalizeQueryError from '@/utils/dataBrowser/normalizeQueryError';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 
 export interface FetchProjectDatabaseSizeOptions {
   /**
    * Project subdomain.
    */
   subdomain: string;
+  /**
+   * Project region.
+   */
+  region: string;
   /**
    * Admin secret for the project.
    */
@@ -25,24 +29,26 @@ export interface FetchProjectDatabaseSizeReturnType {
  */
 export default async function fetchProjectDatabaseSize({
   subdomain,
+  region,
   adminSecret,
 }: FetchProjectDatabaseSizeOptions): Promise<FetchProjectDatabaseSizeReturnType> {
-  const appEndpoint = `${generateRemoteAppUrl(subdomain)}/v2/query`;
-
-  const response = await fetch(appEndpoint, {
-    method: 'POST',
-    headers: {
-      'x-hasura-admin-secret': adminSecret,
-    },
-    body: JSON.stringify({
-      type: 'run_sql',
-      args: {
-        sql: `SELECT pg_database_size('${
-          subdomain === 'localhost' ? 'postgres' : subdomain
-        }');`,
+  const response = await fetch(
+    `${generateAppServiceUrl(subdomain, region, 'hasura')}/v2/query`,
+    {
+      method: 'POST',
+      headers: {
+        'x-hasura-admin-secret': adminSecret,
       },
-    }),
-  });
+      body: JSON.stringify({
+        type: 'run_sql',
+        args: {
+          sql: `SELECT pg_database_size('${
+            subdomain === 'localhost' ? 'postgres' : subdomain
+          }');`,
+        },
+      }),
+    },
+  );
 
   const responseData: QueryResult<string[]> | QueryError =
     await response.json();

dashboard/src/hooks/overview/useDatabaseSizeOfApplication/useDatabaseSizeOfApplication.ts

@@ -22,6 +22,7 @@ export default function useDatabaseSizeOfApplication(
     () =>
       fetchProjectDatabaseSize({
         subdomain: currentApplication?.subdomain,
+        region: currentApplication?.region.awsName,
         adminSecret: currentApplication?.hasuraGraphqlAdminSecret,
       }),
     {

dashboard/src/hooks/use-getAppURL.tsx

@@ -1,15 +0,0 @@
-import { useRouter } from 'next/router';
-
-export const useGetAppURL = (): {
-  workspaceSlug: string;
-  appSlug: string;
-} => {
-  const router = useRouter();
-
-  const workspaceSlug = router.query.workspaceSlug as string;
-  const appSlug = router.query.appSlug as string;
-
-  return { workspaceSlug, appSlug };
-};
-
-export default useGetAppURL;

dashboard/src/hooks/useCurrentWorkspaceAndApplication.tsx

@@ -42,11 +42,17 @@ export function useCurrentWorkspaceAndApplication(): UseCurrentWorkspaceAndAppli
         ],
         deployments: [],
         subdomain: 'localhost',
-        region: null,
+        region: {
+          id: null,
+          countryCode: null,
+          city: null,
+          awsName: null,
+        },
         isProvisioned: true,
         createdAt: new Date().toISOString(),
         desiredState: ApplicationStatus.Live,
         featureFlags: [],
+        providersUpdated: true,
       };
 
       setCurrentWorkspaceAndApplication({

dashboard/src/hooks/useFiles.ts

@@ -1,4 +1,4 @@
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import type {
   Files_Order_By as FilesOrderBy,
   GetFilesQuery,
@@ -66,9 +66,11 @@ export default function useFiles({
                 init: RequestInit,
                 size?: { width?: number; height?: number },
               ) => {
-                const fetchUrl = `${generateRemoteAppUrl(
+                const fetchUrl = `${generateAppServiceUrl(
                   currentApplication.subdomain,
-                )}/v1/storage/files/${file.id}`;
+                  currentApplication.region.awsName,
+                  'storage',
+                )}/v1/files/${file.id}`;
 
                 const fetchParams = new URLSearchParams();
 

dashboard/src/hooks/useRemoteApplicationGQLClient.tsx

@@ -1,5 +1,5 @@
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
 import { useMemo } from 'react';
 
@@ -15,9 +15,11 @@ export function useRemoteApplicationGQLClient() {
       new ApolloClient({
         cache: new InMemoryCache(),
         link: new HttpLink({
-          uri: `${generateRemoteAppUrl(
+          uri: `${generateAppServiceUrl(
             currentApplication?.subdomain,
-          )}/v1/graphql`,
+            currentApplication?.region.awsName,
+            'graphql',
+          )}/v1`,
           headers: {
             'x-hasura-admin-secret':
               process.env.NEXT_PUBLIC_ENV === 'dev'
@@ -28,6 +30,7 @@ export function useRemoteApplicationGQLClient() {
       }),
     [
       currentApplication?.subdomain,
+      currentApplication?.region,
       currentApplication?.hasuraGraphqlAdminSecret,
     ],
   );

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

@@ -13,7 +13,7 @@ import DelayedLoading from '@/ui/DelayedLoading';
 import { Modal } from '@/ui/Modal';
 import Status, { StatusEnum } from '@/ui/Status';
 import { Text } from '@/ui/Text';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import { useGetAppFunctionsMetadataQuery } from '@/utils/__generated__/graphql';
 import { ChevronRightIcon } from '@heroicons/react/solid';
 import clsx from 'clsx';
@@ -252,9 +252,11 @@ export default function FunctionsPage() {
         <div className="text-center">
           <Text size="tiny" color="greyscaleDark" className="font-medium">
             Base URL for function endpoints is{' '}
-            {`${generateRemoteAppUrl(
+            {`${generateAppServiceUrl(
               currentApplication.subdomain,
-            )}/v1/functions/`}
+              currentApplication.region.awsName,
+              'functions',
+            )}/v1`}
           </Text>
         </div>
       </div>

dashboard/src/pages/[workspaceSlug]/[appSlug]/functions/[functionId].tsx

@@ -8,7 +8,7 @@ import ProjectLayout from '@/components/layout/ProjectLayout';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import { useGetAllUserWorkspacesAndApplications } from '@/hooks/useGetAllUserWorkspacesAndApplications';
 import { Text } from '@/ui/Text';
-import { generateRemoteAppUrl, yieldFunction } from '@/utils/helpers';
+import { generateAppServiceUrl, yieldFunction } from '@/utils/helpers';
 import { useGetAppFunctionsMetadataQuery } from '@/utils/__generated__/graphql';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
@@ -84,15 +84,19 @@ export default function FunctionDetailsPage() {
               </Text>
               <a
                 className="ml-2 text-xs font-medium text-greyscaleGrey"
-                href={`${generateRemoteAppUrl(
+                href={`${generateAppServiceUrl(
                   currentApplication.subdomain,
-                )}/v1/functions${currentFunction?.route}`}
+                  currentApplication.region.awsName,
+                  'functions',
+                )}/v1${currentFunction?.route}`}
                 target="_blank"
                 rel="noreferrer"
               >
-                {`${generateRemoteAppUrl(
+                {`${generateAppServiceUrl(
                   currentApplication.subdomain,
-                )}/v1/functions${currentFunction?.route}`}
+                  currentApplication.region.awsName,
+                  'functions',
+                )}/v1${currentFunction?.route}`}
               </a>
             </div>
           </div>

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

@@ -9,7 +9,7 @@ import PlayIcon from '@/ui/v2/icons/PlayIcon';
 import Option from '@/ui/v2/Option';
 import Select from '@/ui/v2/Select';
 import Tooltip from '@/ui/v2/Tooltip';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import { triggerToast } from '@/utils/toast';
 import {
   DOC_EXPLORER_PLUGIN,
@@ -260,11 +260,15 @@ export default function GraphQLPage() {
     return <LoadingScreen />;
   }
 
-  const appUrl = generateRemoteAppUrl(currentApplication.subdomain);
+  const appUrl = generateAppServiceUrl(
+    currentApplication.subdomain,
+    currentApplication.region.awsName,
+    'graphql',
+  );
 
   const subscriptionUrl = `${appUrl
     .replace('https', 'wss')
-    .replace('http', 'ws')}/v1/graphql`;
+    .replace('http', 'ws')}/v1`;
 
   const headers = {
     'content-type': 'application/json',
@@ -273,7 +277,7 @@ export default function GraphQLPage() {
   };
 
   const fetcher = createGraphiQLFetcher({
-    url: `${appUrl}/v1/graphql`,
+    url: `${appUrl}/v1`,
     headers,
     wsClient: createClient({
       url: subscriptionUrl,

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

@@ -1,5 +1,5 @@
 import Container from '@/components/layout/Container';
-import AllowedEmailDomainsSettings from '@/components/settings/authentication/AllowedEmailSettings/AllowedEmailSettings';
+import AllowedEmailDomainsSettings from '@/components/settings/authentication/AllowedEmailSettings';
 import AllowedRedirectURLsSettings from '@/components/settings/authentication/AllowedRedirectURLsSettings';
 import BlockedEmailSettings from '@/components/settings/authentication/BlockedEmailSettings';
 import ClientURLSettings from '@/components/settings/authentication/ClientURLSettings';

dashboard/src/pages/[workspaceSlug]/[appSlug]/settings/roles-and-permissions/index.tsx

@@ -1,6 +1,6 @@
 import Container from '@/components/layout/Container';
 import PermissionVariableSettings from '@/components/settings/permissions/PermissionVariableSettings';
-import RolesSettings from '@/components/settings/roles/RoleSettings/RoleSettings';
+import RolesSettings from '@/components/settings/roles/RoleSettings';
 import SettingsLayout from '@/components/settings/SettingsLayout';
 import type { ReactElement } from 'react';
 

dashboard/src/pages/[workspaceSlug]/[appSlug]/settings/sign-in-methods/index.tsx

@@ -9,6 +9,7 @@ import GitHubProviderSettings from '@/components/settings/signInMethods/GitHubPr
 import GoogleProviderSettings from '@/components/settings/signInMethods/GoogleProviderSettings';
 import LinkedInProviderSettings from '@/components/settings/signInMethods/LinkedInProviderSettings';
 import MagicLinkSettings from '@/components/settings/signInMethods/MagicLinkSettings';
+import ProvidersUpdatedAlert from '@/components/settings/signInMethods/ProvidersUpdatedAlert';
 import SMSSettings from '@/components/settings/signInMethods/SMSSettings';
 import SpotifyProviderSettings from '@/components/settings/signInMethods/SpotifyProviderSettings';
 import TwitchProviderSettings from '@/components/settings/signInMethods/TwitchProviderSettings';
@@ -55,6 +56,7 @@ export default function SettingsSignInMethodsPage() {
       <WebAuthnSettings />
       <AnonymousSignInSettings />
       <SMSSettings />
+      {!currentApplication.providersUpdated && <ProvidersUpdatedAlert />}
       <AppleProviderSettings />
       <DiscordProviderSettings />
       <FacebookProviderSettings />

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

@@ -3,7 +3,7 @@ import RetryableErrorBoundary from '@/components/common/RetryableErrorBoundary';
 import FilesDataGrid from '@/components/files/FilesDataGrid';
 import ProjectLayout from '@/components/layout/ProjectLayout';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import { NhostApolloProvider } from '@nhost/react-apollo';
 import type { ReactElement } from 'react';
 
@@ -16,9 +16,11 @@ export default function StoragePage() {
 
   return (
     <NhostApolloProvider
-      graphqlUrl={`${generateRemoteAppUrl(
-        currentApplication?.subdomain,
-      )}/v1/graphql`}
+      graphqlUrl={`${generateAppServiceUrl(
+        currentApplication.subdomain,
+        currentApplication.region.awsName,
+        'graphql',
+      )}/v1`}
       fetchPolicy="cache-first"
       headers={{
         'x-hasura-admin-secret':

dashboard/src/pages/[workspaceSlug]/[appSlug]/users/[userId].tsx

@@ -20,7 +20,7 @@ import Option from '@/ui/v2/Option';
 import Select from '@/ui/v2/Select';
 import Text from '@/ui/v2/Text';
 import { copy } from '@/utils/copy';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import { triggerToast } from '@/utils/toast';
 import type {
   GetRemoteAppUserAuthRolesFragment,
@@ -629,9 +629,11 @@ export default function UserDetailsByIdPage() {
 
   return (
     <NhostApolloProvider
-      graphqlUrl={`${generateRemoteAppUrl(
+      graphqlUrl={`${generateAppServiceUrl(
         currentApplication.subdomain,
-      )}/v1/graphql`}
+        currentApplication.region.awsName,
+        'graphql',
+      )}/v1`}
       fetchPolicy="cache-first"
       headers={{
         'x-hasura-admin-secret':

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

@@ -3,7 +3,7 @@ import Container from '@/components/layout/Container';
 import ProjectLayout from '@/components/layout/ProjectLayout';
 import UsersList from '@/components/users/UsersList';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import { generateRemoteAppUrl } from '@/utils/helpers';
+import { generateAppServiceUrl } from '@/utils/helpers';
 import { NhostApolloProvider } from '@nhost/react-apollo';
 import type { ReactElement } from 'react';
 
@@ -16,9 +16,11 @@ export default function UsersPage() {
 
   return (
     <NhostApolloProvider
-      graphqlUrl={`${generateRemoteAppUrl(
+      graphqlUrl={`${generateAppServiceUrl(
         currentApplication.subdomain,
-      )}/v1/graphql`}
+        currentApplication.region.awsName,
+        'graphql',
+      )}/v1`}
       fetchPolicy="cache-first"
       headers={{
         'x-hasura-admin-secret':

dashboard/src/pages/_app.tsx

@@ -21,7 +21,7 @@ import '@fontsource/roboto-mono/400.css';
 import '@fontsource/roboto-mono/500.css';
 import { ThemeProvider } from '@mui/material';
 import CssBaseline from '@mui/material/CssBaseline';
-import { NhostNextProvider } from '@nhost/nextjs';
+import { NhostProvider } from '@nhost/nextjs';
 import { NhostApolloProvider } from '@nhost/react-apollo';
 import * as snippet from '@segment/snippet';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -89,7 +89,7 @@ function MyApp({
 
       <QueryClientProvider client={queryClient}>
         <CacheProvider value={emotionCache}>
-          <NhostNextProvider nhost={nhost}>
+          <NhostProvider nhost={nhost}>
             <NhostApolloProvider
               fetchPolicy="cache-first"
               nhost={nhost}
@@ -118,7 +118,7 @@ function MyApp({
                 </UserDataProvider>
               </WorkspaceProvider>
             </NhostApolloProvider>
-          </NhostNextProvider>
+          </NhostProvider>
         </CacheProvider>
       </QueryClientProvider>
     </ErrorBoundary>

dashboard/src/pages/new.tsx

@@ -23,7 +23,7 @@ import { getErrorMessage } from '@/utils/getErrorMessage';
 import { getCurrentEnvironment, slugifyString } from '@/utils/helpers';
 import { nhost } from '@/utils/nhost';
 import { planDescriptions } from '@/utils/planDescriptions';
-import generateRandomDatabasePassword from '@/utils/settings/generateRandomDatabasePassword/generateRandomDatabasePassword';
+import generateRandomDatabasePassword from '@/utils/settings/generateRandomDatabasePassword';
 import { resetDatabasePasswordValidationSchema } from '@/utils/settings/resetDatabasePasswordValidationSchema';
 
 import { triggerToast } from '@/utils/toast';

dashboard/src/types/application.ts

@@ -76,6 +76,7 @@ export type Application = {
   desiredState: DesiredState;
   nhostBaseFolder?: string;
   featureFlags: FeatureFlag[];
+  providersUpdated: boolean;
 };
 
 export type CustomClaim = {