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

chore: update versions

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

@@ -23,9 +23,7 @@ runs:
     - uses: actions/cache@v3
       id: pnpm-cache
       with:
-        path: |
-          ${{ steps.pnpm-cache-dir.outputs.dir }}
-          ~/.cache/Cypress
+        path: ${{ steps.pnpm-cache-dir.outputs.dir }}
         key: ${{ runner.os }}-node-${{ hashFiles('pnpm-lock.yaml') }}
         restore-keys: ${{ runner.os }}-node-
     - name: Use Node.js 16

.github/workflows/ci.yaml

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

.github/workflows/dashboard.yaml

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

config/.eslint.base.js

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

dashboard/.eslintrc.js

@@ -21,6 +21,7 @@ module.exports = {
       'error',
       { allowArrowFunctions: true, allowFunctions: true },
     ],
+    'import/prefer-default-export': 'off',
     'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
     curly: ['error', 'all'],
     'no-restricted-exports': 'off',

dashboard/.gitignore

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

dashboard/.storybook/preview.js

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

dashboard/CHANGELOG.md

@@ -1,5 +1,69 @@
 # @nhost/dashboard
 
+## 0.14.3
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.16
+
+## 0.14.2
+
+### Patch Changes
+
+- 3cb67300: fix(logs): don't break UI when clearing time picker
+- 7453bf3b: feat(projects): show project creator info
+- c166dad0: chore(tests): improve auth page tests
+- 6a290bb2: chore(deps): bump `@types/react` to 18.0.32
+
+## 0.14.1
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.15
+- @nhost/nextjs@1.13.19
+
+## 0.14.0
+
+### Minor Changes
+
+- 6e1f03ea: feat(dashboard): add support for the Azure AD provider
+
+### Patch Changes
+
+- 1bd2c373: chore(deps): bump `turbo` to 1.8.6
+- d329b621: chore(deps): bump `@types/react` to 18.0.30
+- cb248f0d: fix(tests): avoid name collision in database tests
+- 867c8076: chore(deps): bump `@types/react` to 18.0.29
+
+## 0.13.10
+
+### Patch Changes
+
+- e93b06ab: fix(dashboard): remove left margin from workspace list on mobile
+- 1c4806bf: chore(deps): bump `sharp` to 0.32.0
+  - @nhost/react-apollo@5.0.14
+  - @nhost/nextjs@1.13.18
+
+## 0.13.9
+
+### Patch Changes
+
+- 912ed76c: chore(dashboard): bump `@apollo/client` to 3.7.10
+- Updated dependencies [912ed76c]
+  - @nhost/react-apollo@5.0.13
+
+## 0.13.8
+
+### Patch Changes
+
+- 7c127372: chore(dashboard): bump `react-error-boundary` to v4
+
+## 0.13.7
+
+### Patch Changes
+
+- 9130ab12: chore(dashboard): bump `yup` to v1 and `@hookform/resolvers` to v3
+
 ## 0.13.6
 
 ### Patch Changes

dashboard/Dockerfile

@@ -3,7 +3,7 @@ RUN apk add --no-cache libc6-compat
 RUN apk update
 WORKDIR /app
 
-RUN yarn global add turbo@1.8.3
+RUN yarn global add turbo@1.8.6
 COPY . .
 RUN turbo prune --scope="@nhost/dashboard" --docker
 

dashboard/README.md

@@ -111,3 +111,22 @@ pnpm storybook
 | `@typescript-eslint/consistent-type-imports` | Enforces `import type { Type } from 'module'` syntax. It prevents false positive circular dependency errors.                                                 |
 | `@typescript-eslint/naming-convention`       | Enforces a consistent naming convention.                                                                                                                     |
 | `no-restricted-imports`                      | Enforces absolute imports and consistent import paths for components from `src/components/ui` folder.                                                        |
+
+### End-to-End Tests
+
+End-to-end tests are written using [Playwright](https://playwright.dev/). To run the tests, run the following command:
+
+```bash
+pnpm e2e
+```
+
+Most of the tests require access to the Nhost test user. To run these tests, you need to set the following environment variables in `.env.test`:
+
+```
+NHOST_TEST_DASHBOARD_URL=<test_dashboard_url>
+NHOST_TEST_USER_EMAIL=<test_user_email>
+NHOST_TEST_USER_PASSWORD=<test_user_password>
+NHOST_TEST_WORKSPACE_NAME=<test_workspace_name>
+NHOST_TEST_PROJECT_NAME=<test_project_name>
+NHOST_TEST_PROJECT_ADMIN_SECRET=<test_project_admin_secret>
+```

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

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

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

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

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

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

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

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

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

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

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

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

dashboard/e2e/env.ts

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

dashboard/e2e/overview/overview.test.ts

@@ -0,0 +1,109 @@
+import {
+  TEST_PROJECT_NAME,
+  TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_NAME,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { openProject } from '@/e2e/utils';
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+
+  await page.goto('/');
+  await openProject({
+    page,
+    projectName: TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: TEST_PROJECT_SLUG,
+  });
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('should show a sidebar with menu items', async () => {
+  const navLocator = page.getByRole('navigation', { name: /main navigation/i });
+  await expect(navLocator).toBeVisible();
+  await expect(navLocator.getByRole('list').getByRole('listitem')).toHaveCount(
+    10,
+  );
+  await expect(
+    navLocator.getByRole('link', { name: /overview/i }),
+  ).toBeVisible();
+  await expect(
+    navLocator.getByRole('link', { name: /database/i }),
+  ).toBeVisible();
+  await expect(
+    navLocator.getByRole('link', { name: /graphql/i }),
+  ).toBeVisible();
+  await expect(navLocator.getByRole('link', { name: /hasura/i })).toBeVisible();
+  await expect(navLocator.getByRole('link', { name: /auth/i })).toBeVisible();
+  await expect(
+    navLocator.getByRole('link', { name: /storage/i }),
+  ).toBeVisible();
+  await expect(
+    navLocator.getByRole('link', { name: /deployments/i }),
+  ).toBeVisible();
+  await expect(
+    navLocator.getByRole('link', { name: /backups/i }),
+  ).toBeVisible();
+  await expect(navLocator.getByRole('link', { name: /logs/i })).toBeVisible();
+  await expect(
+    navLocator.getByRole('link', { name: /settings/i }),
+  ).toBeVisible();
+});
+
+test('should show a header with a logo, the workspace name, and the project name', async () => {
+  await expect(
+    page.getByRole('banner').getByRole('link', { name: TEST_WORKSPACE_NAME }),
+  ).toBeVisible();
+
+  await expect(
+    page.getByRole('banner').getByRole('link', { name: TEST_PROJECT_NAME }),
+  ).toBeVisible();
+});
+
+test("should show the project's name, the Upgrade button and the Settings button", async () => {
+  await expect(
+    page.getByRole('heading', { name: TEST_PROJECT_NAME }),
+  ).toBeVisible();
+  await expect(page.getByText(/starter/i)).toBeVisible();
+  await expect(page.getByRole('button', { name: /upgrade/i })).toBeVisible();
+  await expect(
+    page.getByRole('main').getByRole('link', { name: /settings/i }),
+  ).toBeVisible();
+});
+
+test("should show the project's region and subdomain", async () => {
+  await expect(page.locator('p:has-text("Region") + div p').nth(0)).toHaveText(
+    /frankfurt \(eu-central-1\)/i,
+  );
+  await expect(
+    page.locator('p:has-text("Subdomain") + div p').nth(0),
+  ).toHaveText(/[a-z]{20}/i);
+});
+
+test('should not have a GitHub repository connected', async () => {
+  await expect(
+    page.getByRole('button', { name: /connect to github/i }),
+  ).toBeVisible();
+});
+
+test('should show proper limits for the free project', async () => {
+  // Limit for Database
+  await expect(page.getByText(/of 500 MB/i)).toBeVisible();
+
+  // Limit for Storage
+  await expect(page.getByText(/of 1 GB/i)).toBeVisible();
+
+  // Limit for Users
+  await expect(page.getByText(/of 10000/i)).toBeVisible();
+
+  // Limit for Functions
+  await expect(page.getByText(/of 10$/i, { exact: true })).toBeVisible();
+});

dashboard/e2e/setup/auth.setup.ts

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

dashboard/e2e/utils.ts

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

dashboard/global-teardown.ts

@@ -0,0 +1,66 @@
+import {
+  TEST_DASHBOARD_URL,
+  TEST_PROJECT_ADMIN_SECRET,
+  TEST_PROJECT_NAME,
+  TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { openProject } from '@/e2e/utils';
+import { chromium } from '@playwright/test';
+
+async function globalTeardown() {
+  const browser = await chromium.launch();
+
+  const context = await browser.newContext({
+    baseURL: TEST_DASHBOARD_URL,
+    storageState: 'e2e/.auth/user.json',
+  });
+
+  const page = await context.newPage();
+
+  await page.goto('/');
+
+  await openProject({
+    page,
+    projectName: TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: TEST_PROJECT_SLUG,
+  });
+
+  const pagePromise = context.waitForEvent('page');
+
+  await page.getByRole('link', { name: /hasura/i }).click();
+  await page.getByRole('link', { name: /open hasura/i }).click();
+
+  const hasuraPage = await pagePromise;
+  await hasuraPage.waitForLoadState();
+
+  const adminSecretInput = hasuraPage.getByPlaceholder(/enter admin-secret/i);
+
+  // note: a more ideal way would be to paste from clipboard, but Playwright
+  // doesn't support that yet
+  await adminSecretInput.fill(TEST_PROJECT_ADMIN_SECRET);
+  await adminSecretInput.press('Enter');
+
+  // note: getByRole doesn't work here
+  await hasuraPage.locator('a', { hasText: /data/i }).click();
+  await hasuraPage.getByRole('link', { name: /sql/i }).click();
+
+  await hasuraPage.getByRole('textbox').fill(`
+DO $$ DECLARE
+  tablename text;
+BEGIN
+  FOR tablename IN
+    SELECT table_name FROM information_schema.tables
+    WHERE table_schema = 'public'
+  LOOP
+    EXECUTE 'DROP TABLE IF EXISTS public.' || quote_ident(tablename) || ' CASCADE';
+  END LOOP;
+END $$;
+`);
+
+  await hasuraPage.getByRole('button', { name: /run!/i }).click();
+  await hasuraPage.getByText(/sql executed!/i).waitFor();
+}
+
+export default globalTeardown;

dashboard/graphql.config.yaml

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

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.13.6",
+  "version": "0.14.3",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -14,10 +14,11 @@
     "nhost:dev": "nhost dev -d",
     "format": "prettier --write \"src/**/*.{js,ts,tsx,jsx,json,md}\" --plugin-search-dir=.",
     "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "e2e": "npx playwright@1.31.2 install --with-deps && playwright test"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.3",
+    "@apollo/client": "^3.7.10",
     "@codemirror/language": "^6.3.0",
     "@emotion/cache": "^11.10.5",
     "@emotion/react": "^11.10.5",
@@ -29,7 +30,7 @@
     "@graphiql/toolkit": "^0.8.2",
     "@headlessui/react": "^1.6.5",
     "@heroicons/react": "^1.0.6",
-    "@hookform/resolvers": "^2.9.10",
+    "@hookform/resolvers": "^3.0.0",
     "@mui/base": "^5.0.0-alpha.106",
     "@mui/material": "^5.10.14",
     "@mui/system": "^5.10.14",
@@ -62,7 +63,7 @@
     "prettysize": "^2.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-error-boundary": "^3.1.4",
+    "react-error-boundary": "^4.0.0",
     "react-hook-form": "^7.42.1",
     "react-hot-toast": "^2.4.0",
     "react-is": "18.2.0",
@@ -70,23 +71,25 @@
     "react-merge-refs": "^1.1.0",
     "react-syntax-highlighter": "^15.4.5",
     "react-table": "^7.8.0",
-    "sharp": "^0.31.2",
+    "sharp": "^0.32.0",
     "slugify": "^1.6.5",
     "stripe": "^10.17.0",
     "tailwind-merge": "^1.8.0",
     "utility-types": "^3.10.0",
     "validator": "^13.7.0",
-    "yup": "^0.32.11",
+    "yup": "^1.0.2",
     "yup-password": "^0.2.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.2",
+    "@faker-js/faker": "^7.6.0",
     "@graphql-codegen/cli": "^3.0.0",
     "@graphql-codegen/typescript": "^3.0.0",
     "@graphql-codegen/typescript-graphql-request": "^4.5.1",
     "@graphql-codegen/typescript-operations": "^3.0.0",
     "@graphql-codegen/typescript-react-apollo": "^3.3.1",
     "@next/bundle-analyzer": "^12.3.1",
+    "@playwright/test": "^1.31.2",
     "@storybook/addon-actions": "^6.5.14",
     "@storybook/addon-essentials": "^6.5.14",
     "@storybook/addon-interactions": "^6.5.14",
@@ -103,7 +106,7 @@
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^16.11.7",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "18.0.28",
+    "@types/react": "18.0.32",
     "@types/react-dom": "18.0.11",
     "@types/react-table": "^7.7.12",
     "@types/testing-library__jest-dom": "^5.14.5",
@@ -116,6 +119,7 @@
     "babel-loader": "^8.3.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "csstype": "^3.0.10",
+    "dotenv": "^16.0.3",
     "encoding": "^0.1.13",
     "eslint": "^8.28.0",
     "eslint-config-airbnb": "19.0.4",
@@ -137,6 +141,7 @@
     "prettier-plugin-tailwindcss": "^0.2.0",
     "react-date-fns-hooks": "^0.9.4",
     "require-from-string": "^2.0.2",
+    "snake-case": "^3.0.4",
     "storybook-addon-next-router": "^4.0.1",
     "tailwindcss": "^3.1.2",
     "ts-node": "^10.9.1",
@@ -161,4 +166,4 @@
   "msw": {
     "workerDirectory": "public"
   }
-}
+}

dashboard/playwright.config.ts

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

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

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

dashboard/src/components/home/Sidebar.tsx

@@ -7,7 +7,7 @@ import Link from 'next/link';
 
 export default function Sidebar() {
   return (
-    <div className="grid grid-flow-row gap-8 mt-2 ml-10 w-full md:grid md:w-workspaceSidebar content-start">
+    <div className="mt-2 grid w-full grid-flow-row content-start gap-8 md:ml-10 md:grid md:w-workspaceSidebar">
       <WorkspaceSection />
       <Resources />
 

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

@@ -9,6 +9,7 @@ import { useGetAllUserWorkspacesAndApplications } from '@/hooks/useGetAllUserWor
 import { useNavigationVisible } from '@/hooks/useNavigationVisible';
 import useNotFoundRedirect from '@/hooks/useNotFoundRedirect';
 import { useSetAppWorkspaceContextFromUserContext } from '@/hooks/useSetAppWorkspaceContextFromUserContext';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import type { BoxProps } from '@/ui/v2/Box';
 import Box from '@/ui/v2/Box';
 import { NextSeo } from 'next-seo';
@@ -30,9 +31,15 @@ function ProjectLayoutContent({
     ...mainContainerProps
   } = {},
 }: ProjectLayoutProps) {
-  const { currentApplication, currentWorkspace } =
+  // TODO: This will be removed once we migrated every occurrence to
+  // useCurrentWorkspaceAndProject()
+  const { currentWorkspace, currentApplication } =
     useCurrentWorkspaceAndApplication();
 
+  const { currentProject, loading, error } = useCurrentWorkspaceAndProject({
+    fetchPolicy: 'network-only',
+  });
+
   const router = useRouter();
   const shouldDisplayNav = useNavigationVisible();
   const isPlatform = useIsPlatform();
@@ -63,10 +70,14 @@ function ProjectLayoutContent({
     }
   }, [isPlatform, isRestrictedPath, router]);
 
-  if (!currentWorkspace || !currentApplication || isRestrictedPath) {
+  if (!currentWorkspace || !currentApplication || isRestrictedPath || loading) {
     return <LoadingScreen />;
   }
 
+  if (error) {
+    throw error;
+  }
+
   if (!isPlatform) {
     return (
       <>
@@ -104,7 +115,7 @@ function ProjectLayoutContent({
       >
         {children}
 
-        <NextSeo title={currentApplication.name} />
+        <NextSeo title={currentProject.name} />
       </Box>
     </>
   );

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

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

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

@@ -2,8 +2,9 @@ import { UserDataProvider } from '@/context/workspace1-context';
 import type { Project } from '@/types/application';
 import { ApplicationStatus } from '@/types/application';
 import type { Workspace } from '@/types/workspace';
+import nhostGraphQLLink from '@/utils/msw/mocks/graphql/nhostGraphQLLink';
 import { render, screen, waitForElementToBeRemoved } from '@/utils/testUtils';
-import { graphql, rest } from 'msw';
+import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import { afterAll, beforeAll, vi } from 'vitest';
 import OverviewDeployments from '.';
@@ -73,13 +74,11 @@ const mockWorkspace: Workspace = {
   applications: [mockApplication],
 };
 
-const mockGraphqlLink = graphql.link('http://localhost:1337/v1/graphql');
-
 const server = setupServer(
-  rest.get('http://localhost:1337/v1/graphql', (req, res, ctx) =>
+  rest.get('https://local.graphql.nhost.run/v1', (_req, res, ctx) =>
     res(ctx.status(200)),
   ),
-  mockGraphqlLink.operation(async (req, res, ctx) =>
+  nhostGraphQLLink.operation(async (_req, res, ctx) =>
     res(
       ctx.data({
         deployments: [],
@@ -143,7 +142,7 @@ test('should render an empty state when GitHub is connected, but there are no de
 
 test('should render a list of deployments', async () => {
   server.use(
-    mockGraphqlLink.operation(async (req, res, ctx) => {
+    nhostGraphQLLink.operation(async (req, res, ctx) => {
       const requestPayload = await req.json();
 
       if (requestPayload.operationName === 'ScheduledOrPendingDeploymentsSub') {
@@ -193,7 +192,7 @@ test('should render a list of deployments', async () => {
 
 test('should disable redeployments if a deployment is already in progress', async () => {
   server.use(
-    mockGraphqlLink.operation(async (req, res, ctx) => {
+    nhostGraphQLLink.operation(async (req, res, ctx) => {
       const requestPayload = await req.json();
 
       if (requestPayload.operationName === 'ScheduledOrPendingDeploymentsSub') {

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

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

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

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

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

@@ -24,22 +24,30 @@ import { twMerge } from 'tailwind-merge';
 import * as Yup from 'yup';
 
 const validationSchema = Yup.object({
-  teamId: Yup.string().label('Team ID').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
-  keyId: Yup.string().label('Key ID').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
-  clientId: Yup.string().label('Client ID').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
-  privateKey: Yup.string().label('Private Key').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
+  teamId: Yup.string()
+    .label('Team ID')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  keyId: Yup.string()
+    .label('Key ID')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  clientId: Yup.string()
+    .label('Client ID')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  privateKey: Yup.string()
+    .label('Private Key')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
   enabled: Yup.boolean(),
 });
 

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

@@ -0,0 +1,201 @@
+import Form from '@/components/common/Form';
+import SettingsContainer from '@/components/settings/SettingsContainer';
+import BaseProviderSettings from '@/components/settings/signInMethods/BaseProviderSettings';
+import { useUI } from '@/context/UIContext';
+import {
+  GetSignInMethodsDocument,
+  useGetSignInMethodsQuery,
+  useUpdateConfigMutation,
+} from '@/generated/graphql';
+import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import ActivityIndicator from '@/ui/v2/ActivityIndicator';
+import IconButton from '@/ui/v2/IconButton';
+import CopyIcon from '@/ui/v2/icons/CopyIcon';
+import Input from '@/ui/v2/Input';
+import InputAdornment from '@/ui/v2/InputAdornment';
+import generateAppServiceUrl from '@/utils/common/generateAppServiceUrl';
+import { copy } from '@/utils/copy';
+import getServerError from '@/utils/settings/getServerError';
+import { getToastStyleProps } from '@/utils/settings/settingsConstants';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { FormProvider, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import { twMerge } from 'tailwind-merge';
+import * as Yup from 'yup';
+
+const validationSchema = Yup.object({
+  clientId: Yup.string()
+    .label('Client ID')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  clientSecret: Yup.string()
+    .label('Client Secret')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  tenant: Yup.string()
+    .label('Tenant')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  enabled: Yup.boolean(),
+});
+
+export type AzureADProviderFormValues = Yup.InferType<typeof validationSchema>;
+
+export default function AzureADProviderSettings() {
+  const { maintenanceActive } = useUI();
+  const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetSignInMethodsDocument],
+  });
+
+  const { data, loading, error } = useGetSignInMethodsQuery({
+    variables: { appId: currentApplication?.id },
+    fetchPolicy: 'cache-only',
+  });
+
+  const { clientId, clientSecret, tenant, enabled } =
+    data?.config?.auth?.method?.oauth?.azuread || {};
+
+  const form = useForm<AzureADProviderFormValues>({
+    reValidateMode: 'onSubmit',
+    defaultValues: {
+      clientId: clientId || '',
+      clientSecret: clientSecret || '',
+      tenant: tenant || '',
+      enabled: enabled || false,
+    },
+    resolver: yupResolver(validationSchema),
+  });
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        delay={1000}
+        label="Loading settings for Azure AD..."
+        className="justify-center"
+      />
+    );
+  }
+
+  if (error) {
+    throw error;
+  }
+
+  const { register, formState, watch } = form;
+  const authEnabled = watch('enabled');
+
+  const handleProviderUpdate = async (values: AzureADProviderFormValues) => {
+    const updateConfigPromise = updateConfig({
+      variables: {
+        appId: currentApplication.id,
+        config: {
+          auth: {
+            method: {
+              oauth: {
+                azuread: values,
+              },
+            },
+          },
+        },
+      },
+    });
+
+    try {
+      await toast.promise(
+        updateConfigPromise,
+        {
+          loading: `Azure AD settings are being updated...`,
+          success: `Azure AD settings have been updated successfully.`,
+          error: getServerError(
+            `An error occurred while trying to update the project's Azure AD settings.`,
+          ),
+        },
+        getToastStyleProps(),
+      );
+
+      form.reset(values);
+    } catch {
+      // Note: The toast will handle the error.
+    }
+  };
+
+  return (
+    <FormProvider {...form}>
+      <Form onSubmit={handleProviderUpdate}>
+        <SettingsContainer
+          title="Azure AD"
+          description="Allow users to sign in with Azure AD."
+          slotProps={{
+            submitButton: {
+              disabled: !formState.isDirty || maintenanceActive,
+              loading: formState.isSubmitting,
+            },
+          }}
+          icon="/assets/brands/azuread.svg"
+          switchId="enabled"
+          showSwitch
+          className={twMerge(
+            'grid grid-flow-row grid-cols-2 gap-y-4 gap-x-3 px-4 py-2',
+            !authEnabled && 'hidden',
+          )}
+        >
+          <BaseProviderSettings providerName="azuread" />
+          <Input
+            {...register('tenant')}
+            name="tenant"
+            id="tenant"
+            label="Tenant ID"
+            placeholder="Tenant ID"
+            className="col-span-2"
+            fullWidth
+            hideEmptyHelperText
+            error={!!formState.errors?.tenant}
+            helperText={formState.errors?.tenant?.message}
+          />
+          <Input
+            name="redirectUrl"
+            id="redirectUrl"
+            defaultValue={`${generateAppServiceUrl(
+              currentApplication.subdomain,
+              currentApplication.region.awsName,
+              'auth',
+            )}/signin/provider/azuread/callback`}
+            className="col-span-2"
+            fullWidth
+            hideEmptyHelperText
+            label="Redirect URL"
+            disabled
+            endAdornment={
+              <InputAdornment position="end" className="absolute right-2">
+                <IconButton
+                  sx={{ minWidth: 0, padding: 0 }}
+                  color="secondary"
+                  variant="borderless"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    copy(
+                      `${generateAppServiceUrl(
+                        currentApplication.subdomain,
+                        currentApplication.region.awsName,
+                        'auth',
+                      )}/signin/provider/azuread/callback`,
+                      'Redirect URL',
+                    );
+                  }}
+                >
+                  <CopyIcon className="h-4 w-4" />
+                </IconButton>
+              </InputAdornment>
+            }
+          />
+        </SettingsContainer>
+      </Form>
+    </FormProvider>
+  );
+}

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

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

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

@@ -3,14 +3,18 @@ import { useFormContext } from 'react-hook-form';
 import * as Yup from 'yup';
 
 export const baseProviderValidationSchema = Yup.object({
-  clientId: Yup.string().label('Client ID').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
-  clientSecret: Yup.string().label('Client Secret').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
+  clientId: Yup.string()
+    .label('Client ID')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  clientSecret: Yup.string()
+    .label('Client Secret')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
   enabled: Yup.bool(),
 });
 

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

@@ -22,19 +22,23 @@ import { twMerge } from 'tailwind-merge';
 import * as Yup from 'yup';
 
 const validationSchema = Yup.object({
-  accountSid: Yup.string().label('Account SID').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
-  authToken: Yup.string().label('Auth Token').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
+  accountSid: Yup.string()
+    .label('Account SID')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  authToken: Yup.string()
+    .label('Auth Token')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
   messagingServiceId: Yup.string()
     .label('Messaging Service ID')
     .when('enabled', {
       is: true,
-      then: Yup.string().required(),
+      then: (schema) => schema.required(),
     }),
   enabled: Yup.boolean().label('Enabled'),
 });

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

@@ -23,14 +23,18 @@ import { twMerge } from 'tailwind-merge';
 import * as Yup from 'yup';
 
 const validationSchema = Yup.object({
-  consumerSecret: Yup.string().label('Consumer Secret').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
-  consumerKey: Yup.string().label('Consumer Key').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
+  consumerSecret: Yup.string()
+    .label('Consumer Secret')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  consumerKey: Yup.string()
+    .label('Consumer Key')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
   enabled: Yup.boolean(),
 });
 

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

@@ -24,22 +24,30 @@ import { twMerge } from 'tailwind-merge';
 import * as Yup from 'yup';
 
 const validationSchema = Yup.object({
-  clientId: Yup.string().label('Client ID').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
-  clientSecret: Yup.string().label('Client Secret').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
-  organization: Yup.string().label('Organization').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
-  connection: Yup.string().label('Connection').when('enabled', {
-    is: true,
-    then: Yup.string().required(),
-  }),
+  clientId: Yup.string()
+    .label('Client ID')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  clientSecret: Yup.string()
+    .label('Client Secret')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  organization: Yup.string()
+    .label('Organization')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
+  connection: Yup.string()
+    .label('Connection')
+    .when('enabled', {
+      is: true,
+      then: (schema) => schema.required(),
+    }),
   enabled: Yup.boolean(),
 });
 

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

@@ -11,7 +11,7 @@ const StyledListItemText = styled(MaterialListItemText)(({ theme }) => ({
   display: 'grid',
   justifyContent: 'start',
   gridAutoFlow: 'row',
-  gap: theme.spacing(0.5),
+  gap: theme.spacing(0.25),
   fontSize: theme.typography.pxToRem(15),
   [`&.${listItemTextClasses.root}`]: {
     margin: 0,

dashboard/src/components/users/CreateUserForm/CreateUserForm.tsx

@@ -32,7 +32,6 @@ export const validationSchema = Yup.object({
     .required('This field is required.'),
   password: Yup.string()
     .label('Users Password')
-    .min(8, 'Password must be at least 8 characters long.')
     .required('This field is required.'),
 });
 
@@ -99,7 +98,7 @@ export default function CreateUserForm({
         }),
         {
           loading: 'Creating user...',
-          success: 'User created successfully.',
+          success: 'User has been created successfully.',
           error: getServerError(
             'An error occurred while trying to create the user.',
           ),
@@ -165,7 +164,7 @@ export default function CreateUserForm({
           </Alert>
         )}
         <div className="grid grid-flow-row gap-2">
-          <Button type="submit" loading={isSubmitting} disabled={isSubmitting}>
+          <Button type="submit" disabled={isSubmitting}>
             Create
           </Button>
 

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

@@ -19,6 +19,7 @@ import Option from '@/ui/v2/Option';
 import Text from '@/ui/v2/Text';
 import getReadableProviderName from '@/utils/common/getReadableProviderName';
 import { copy } from '@/utils/copy';
+import getServerError from '@/utils/settings/getServerError';
 import getUserRoles from '@/utils/settings/getUserRoles';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import {
@@ -168,11 +169,13 @@ export default function EditUserForm({
       {
         loading: shouldBan ? 'Banning user...' : 'Unbanning user...',
         success: shouldBan
-          ? 'User banned successfully'
-          : 'User unbanned successfully.',
-        error: shouldBan
-          ? 'An error occurred while trying to ban the user.'
-          : 'An error occurred while trying to unban the user.',
+          ? 'User has been banned successfully.'
+          : 'User has been unbanned successfully.',
+        error: getServerError(
+          shouldBan
+            ? 'An error occurred while trying to ban the user.'
+            : 'An error occurred while trying to unban the user.',
+        ),
       },
       getToastStyleProps(),
     );
@@ -213,7 +216,7 @@ export default function EditUserForm({
                     Actions
                   </Button>
                 </Dropdown.Trigger>
-                <Dropdown.Content menu disablePortal className="h-full w-full">
+                <Dropdown.Content menu className="h-full w-full">
                   <Dropdown.Item
                     className="font-medium"
                     sx={{ color: 'error.main' }}
@@ -316,6 +319,7 @@ export default function EditUserForm({
                     id="emailVerified"
                     name="emailVerified"
                     label="Verified"
+                    aria-label="Email Verified"
                   />
                 )
               }
@@ -354,6 +358,7 @@ export default function EditUserForm({
                     id="phoneNumberVerified"
                     name="phoneNumberVerified"
                     label="Verified"
+                    aria-label="Phone Number Verified"
                     disabled={!form.watch('phoneNumber')}
                   />
                 )

dashboard/src/components/users/UsersBody/UsersBody.tsx

@@ -151,7 +151,7 @@ export default function UsersBody({ users, onSubmit }: UsersBodyProps) {
       updateUserMutationPromise,
       {
         loading: `Updating user's settings...`,
-        success: 'User settings updated successfully.',
+        success: 'User settings have been updated successfully.',
         error: getServerError(
           `An error occurred while trying to update this user's settings.`,
         ),
@@ -242,7 +242,11 @@ export default function UsersBody({ users, onSubmit }: UsersBodyProps) {
             secondaryAction={
               <Dropdown.Root>
                 <Dropdown.Trigger asChild hideChevron>
-                  <IconButton variant="borderless" color="secondary">
+                  <IconButton
+                    variant="borderless"
+                    color="secondary"
+                    aria-label={`More options for ${user.displayName}`}
+                  >
                     <DotsHorizontalIcon />
                   </IconButton>
                 </Dropdown.Trigger>
@@ -282,6 +286,7 @@ export default function UsersBody({ users, onSubmit }: UsersBodyProps) {
             <ListItem.Button
               className="grid h-full w-full grid-cols-1 py-2.5 lg:grid-cols-6"
               onClick={() => handleViewUser(user)}
+              aria-label={`View ${user.displayName}`}
             >
               <div className="col-span-2 grid grid-flow-col place-content-start gap-4">
                 <Avatar

dashboard/src/components/workspace/WorkspaceApps.tsx

@@ -1,21 +1,31 @@
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
-import Status, { StatusEnum } from '@/ui/Status';
+import RetryableErrorBoundary from '@/components/common/RetryableErrorBoundary';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
+import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
+import Chip from '@/ui/v2/Chip';
 import Divider from '@/ui/v2/Divider';
 import PlusCircleIcon from '@/ui/v2/icons/PlusCircleIcon';
 import List from '@/ui/v2/List';
 import { ListItem } from '@/ui/v2/ListItem';
 import Text from '@/ui/v2/Text';
+import { formatDistanceToNowStrict, parseISO } from 'date-fns';
 import Image from 'next/image';
 import NavLink from 'next/link';
 import { Fragment } from 'react';
 
 function AllWorkspaceApps() {
-  const { currentWorkspace } = useCurrentWorkspaceAndApplication();
-  const noApplications = currentWorkspace?.applications.length === 0;
+  const { currentWorkspace, loading, error } = useCurrentWorkspaceAndProject();
 
-  if (noApplications) {
+  if (loading) {
+    return <ActivityIndicator label="Loading projects..." delay={1000} />;
+  }
+
+  if (error) {
+    throw error;
+  }
+
+  if (currentWorkspace?.projects?.length === 0) {
     return (
       <Box className="flex flex-row border-y py-4">
         <Text className="text-xs" color="secondary">
@@ -29,25 +39,50 @@ function AllWorkspaceApps() {
     <List>
       <Divider component="li" />
 
-      {currentWorkspace?.applications.map((app) => (
-        <Fragment key={app.id}>
+      {currentWorkspace?.projects.map((project) => (
+        <Fragment key={project.id}>
           <ListItem.Root>
-            <NavLink href={`${currentWorkspace?.slug}/${app.slug}`} passHref>
-              <ListItem.Button className="grid grid-flow-col justify-between gap-2">
-                <div className="grid grid-flow-col items-center gap-2">
-                  <div className="h-8 w-8 overflow-hidden rounded-lg">
-                    <Image
-                      src="/logos/new.svg"
-                      alt="Nhost Logo"
-                      width={32}
-                      height={32}
-                    />
-                  </div>
+            <NavLink
+              href={`${currentWorkspace?.slug}/${project.slug}`}
+              passHref
+            >
+              <ListItem.Button className="grid grid-flow-col items-center justify-between gap-2">
+                <div className="grid grid-flow-col items-center justify-start gap-2">
+                  <ListItem.Avatar>
+                    <div className="h-8 w-8 overflow-hidden rounded-lg">
+                      <Image
+                        src="/logos/new.svg"
+                        alt="Nhost Logo"
+                        width={32}
+                        height={32}
+                      />
+                    </div>
+                  </ListItem.Avatar>
 
-                  <Text className="font-medium">{app.name}</Text>
+                  <ListItem.Text
+                    primary={project.name}
+                    secondary={
+                      project.creator ? (
+                        <span>
+                          {`Created by ${
+                            project.creator.displayName || project.creator.email
+                          } ${formatDistanceToNowStrict(
+                            parseISO(project.createdAt),
+                          )} ago`}
+                        </span>
+                      ) : undefined
+                    }
+                    secondaryTypographyProps={{
+                      className: 'text-xs',
+                    }}
+                  />
                 </div>
 
-                <Status status={StatusEnum.Plan}>{app.plan.name}</Status>
+                <Chip
+                  size="small"
+                  label={project.plan.isFree ? 'Starter' : 'Pro'}
+                  color={project.plan.isFree ? 'default' : 'primary'}
+                />
               </ListItem.Button>
             </NavLink>
           </ListItem.Root>
@@ -59,30 +94,35 @@ function AllWorkspaceApps() {
   );
 }
 export default function WorkspaceApps() {
-  const { currentWorkspace } = useCurrentWorkspaceAndApplication();
+  const { currentWorkspace, loading } = useCurrentWorkspaceAndProject();
 
   return (
     <div className="mt-9">
       <div className="mx-auto max-w-3xl font-display">
-        <div className="mb-4 flex flex-row place-content-between">
+        <div className="mb-4 grid grid-flow-col items-center justify-between gap-2">
           <Text className="text-lg font-medium">Projects</Text>
-          <NavLink
-            href={{
-              pathname: '/new',
-              query: { workspace: currentWorkspace.slug },
-            }}
-          >
-            <Button
-              variant="outlined"
-              color="secondary"
-              startIcon={<PlusCircleIcon />}
+
+          {!loading && (
+            <NavLink
+              href={{
+                pathname: '/new',
+                query: { workspace: currentWorkspace?.slug },
+              }}
             >
-              New Project
-            </Button>
-          </NavLink>
+              <Button
+                variant="outlined"
+                color="secondary"
+                startIcon={<PlusCircleIcon />}
+              >
+                New Project
+              </Button>
+            </NavLink>
+          )}
         </div>
 
-        <AllWorkspaceApps />
+        <RetryableErrorBoundary errorMessageProps={{ className: 'px-0' }}>
+          <AllWorkspaceApps />
+        </RetryableErrorBoundary>
       </div>
     </div>
   );

dashboard/src/gql/app/getWorkspaceAndProject.graphql

@@ -0,0 +1,26 @@
+fragment Workspace on workspaces {
+  id
+  name
+  slug
+  workspaceMembers {
+    id
+    user {
+      id
+      email
+      displayName
+    }
+    type
+  }
+  projects: apps {
+    ...Project
+  }
+}
+
+query GetWorkspaceAndProject($workspaceSlug: String!, $projectSlug: String) {
+  workspaces(where: { slug: { _eq: $workspaceSlug } }) {
+    ...Workspace
+  }
+  projects: apps(where: { slug: { _eq: $projectSlug } }) {
+    ...Project
+  }
+}

dashboard/src/gql/app/settings/signInMethods/getSignInMethods.graphql

@@ -100,6 +100,12 @@ query GetSignInMethods($appId: uuid!) {
             connection
             organization
           }
+          azuread {
+            enabled
+            clientId
+            clientSecret
+            tenant
+          }
         }
       }
     }

dashboard/src/gql/fragments/project.gql

@@ -0,0 +1,59 @@
+fragment Project on apps {
+  id
+  slug
+  name
+  repositoryProductionBranch
+  subdomain
+  isProvisioned
+  createdAt
+  desiredState
+  nhostBaseFolder
+  providersUpdated
+  config(resolve: true) {
+    hasura {
+      adminSecret
+    }
+  }
+  featureFlags {
+    description
+    id
+    name
+    value
+  }
+  appStates(order_by: { createdAt: desc }, limit: 1) {
+    id
+    appId
+    message
+    stateId
+    createdAt
+  }
+  region {
+    id
+    countryCode
+    awsName
+    city
+  }
+  plan {
+    id
+    name
+    isFree
+  }
+  githubRepository {
+    fullName
+  }
+  deployments(limit: 4, order_by: { deploymentEndedAt: desc }) {
+    id
+    commitSHA
+    commitMessage
+    commitUserName
+    deploymentStartedAt
+    deploymentEndedAt
+    commitUserAvatarUrl
+    deploymentStatus
+  }
+  creator {
+    id
+    email
+    displayName
+  }
+}

dashboard/src/gql/user/getOneUser.gql

@@ -1,58 +1,3 @@
-fragment Project on apps {
-  id
-  slug
-  name
-  repositoryProductionBranch
-  subdomain
-  isProvisioned
-  createdAt
-  desiredState
-  nhostBaseFolder
-  providersUpdated
-  config(resolve: true) {
-    hasura {
-      adminSecret
-    }
-  }
-  featureFlags {
-    description
-    id
-    name
-    value
-  }
-  appStates(order_by: { createdAt: desc }, limit: 1) {
-    id
-    appId
-    message
-    stateId
-    createdAt
-  }
-  region {
-    id
-    countryCode
-    awsName
-    city
-  }
-  plan {
-    id
-    name
-    isFree
-  }
-  githubRepository {
-    fullName
-  }
-  deployments(limit: 4, order_by: { deploymentEndedAt: desc }) {
-    id
-    commitSHA
-    commitMessage
-    commitUserName
-    deploymentStartedAt
-    deploymentEndedAt
-    commitUserAvatarUrl
-    deploymentStatus
-  }
-}
-
 query getOneUser($userId: uuid!) {
   user(id: $userId) {
     id

dashboard/src/hooks/useCheckProvisioning.tsx

@@ -39,6 +39,8 @@ export function useCheckProvisioning() {
 
   const memoizedUpdateCache = useCallback(updateOwnCache, [client]);
 
+  const currentApplicationId = currentApplication?.id;
+
   useEffect(() => {
     startPolling(2000);
   }, [startPolling]);
@@ -84,7 +86,7 @@ export function useCheckProvisioning() {
         createdAt: data.app.appStates[0].createdAt,
       });
       discordAnnounce(
-        `Application ${currentApplication.id} errored after provisioning: ${data.app.appStates[0].message}`,
+        `Application ${currentApplicationId} errored after provisioning: ${data.app.appStates[0].message}`,
       );
       stopPolling();
       memoizedUpdateCache();
@@ -93,7 +95,7 @@ export function useCheckProvisioning() {
     data,
     stopPolling,
     memoizedUpdateCache,
-    currentApplication.id,
+    currentApplicationId,
     currentApplicationState.state,
   ]);
 

dashboard/src/hooks/v2/useCurrentWorkspaceAndProject/index.ts

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

dashboard/src/hooks/v2/useCurrentWorkspaceAndProject/useCurrentWorkspaceAndProject.ts

@@ -0,0 +1,115 @@
+import useIsPlatform from '@/hooks/common/useIsPlatform';
+import type { Project, Workspace } from '@/types/application';
+import { ApplicationStatus } from '@/types/application';
+import { getHasuraAdminSecret } from '@/utils/env';
+import type { GetWorkspaceAndProjectQueryHookResult } from '@/utils/__generated__/graphql';
+import { useGetWorkspaceAndProjectQuery } from '@/utils/__generated__/graphql';
+import type { QueryHookOptions } from '@apollo/client';
+import { useRouter } from 'next/router';
+
+export interface UseCurrentWorkspaceAndProjectOptions {
+  /**
+   * The fetch policy to use.
+   *
+   * @default 'cache-first'
+   */
+  fetchPolicy?: QueryHookOptions['fetchPolicy'];
+}
+
+export interface UseCurrentWorkspaceAndProjectReturnType {
+  /**
+   * The current workspace.
+   */
+  currentWorkspace: Workspace;
+  /**
+   * The current project.
+   */
+  currentProject: Project;
+  /**
+   * Whether the query is loading.
+   */
+  loading?: GetWorkspaceAndProjectQueryHookResult['loading'];
+  /**
+   * The error if any.
+   */
+  error?: GetWorkspaceAndProjectQueryHookResult['error'];
+}
+
+export default function useCurrentWorkspaceAndProject(
+  options?: UseCurrentWorkspaceAndProjectOptions,
+): UseCurrentWorkspaceAndProjectReturnType {
+  const isPlatform = useIsPlatform();
+
+  const {
+    query: { workspaceSlug, appSlug },
+    isReady,
+  } = useRouter();
+
+  const { data, loading, error } = useGetWorkspaceAndProjectQuery({
+    variables: {
+      workspaceSlug: (workspaceSlug as string) || '',
+      projectSlug: (appSlug as string) || '',
+    },
+    fetchPolicy: options?.fetchPolicy || 'cache-first',
+    skip: !isPlatform || !isReady || !workspaceSlug,
+  });
+
+  if (!isPlatform) {
+    const localProject: Project = {
+      id: 'local',
+      slug: 'local',
+      name: 'local',
+      appStates: [
+        {
+          id: 'local',
+          appId: 'local',
+          stateId: ApplicationStatus.Live,
+          createdAt: new Date().toISOString(),
+        },
+      ],
+      deployments: [],
+      subdomain: 'local',
+      region: {
+        id: null,
+        countryCode: null,
+        city: null,
+        awsName: null,
+      },
+      isProvisioned: true,
+      createdAt: new Date().toISOString(),
+      desiredState: ApplicationStatus.Live,
+      featureFlags: [],
+      providersUpdated: true,
+      repositoryProductionBranch: null,
+      nhostBaseFolder: null,
+      plan: null,
+      config: {
+        hasura: {
+          adminSecret: getHasuraAdminSecret(),
+        },
+      },
+    };
+
+    return {
+      currentWorkspace: {
+        id: 'local',
+        slug: 'local',
+        name: 'local',
+        projects: [localProject],
+        workspaceMembers: [],
+      },
+      currentProject: localProject,
+      loading: false,
+    };
+  }
+
+  const [currentWorkspace] = data?.workspaces || [];
+  const [currentProject] = data?.projects || [];
+
+  return {
+    currentWorkspace,
+    currentProject,
+    loading: data ? false : loading,
+    error,
+  };
+}

dashboard/src/pages/[workspaceSlug]/[appSlug]/database/browser/[dataSourceSlug]/index.tsx

@@ -16,9 +16,7 @@ export default function DataBrowserDatabaseDetailsPage() {
         description={
           <span>
             Database{' '}
-            <InlineCode className="bg-gray-200 bg-opacity-80 px-1.5 text-sm">
-              {dataSourceSlug}
-            </InlineCode>{' '}
+            <InlineCode className="px-1.5 text-sm">{dataSourceSlug}</InlineCode>{' '}
             does not exist.
           </span>
         }

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

@@ -134,9 +134,5 @@ export default function LogsPage() {
 }
 
 LogsPage.getLayout = function getLayout(page: ReactElement) {
-  return (
-    <ProjectLayout mainContainerProps={{ className: 'bg-gray-50' }}>
-      {page}
-    </ProjectLayout>
-  );
+  return <ProjectLayout>{page}</ProjectLayout>;
 };

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

@@ -2,6 +2,7 @@ import Container from '@/components/layout/Container';
 import SettingsLayout from '@/components/settings/SettingsLayout';
 import AnonymousSignInSettings from '@/components/settings/signInMethods/AnonymousSignInSettings';
 import AppleProviderSettings from '@/components/settings/signInMethods/AppleProviderSettings';
+import AzureADProviderSettings from '@/components/settings/signInMethods/AzureADProviderSettings';
 import DiscordProviderSettings from '@/components/settings/signInMethods/DiscordProviderSettings';
 import EmailAndPasswordSettings from '@/components/settings/signInMethods/EmailAndPasswordSettings';
 import FacebookProviderSettings from '@/components/settings/signInMethods/FacebookProviderSettings';
@@ -56,6 +57,7 @@ export default function SettingsSignInMethodsPage() {
       <SMSSettings />
       {!currentApplication.providersUpdated && <ProvidersUpdatedAlert />}
       <AppleProviderSettings />
+      <AzureADProviderSettings />
       <DiscordProviderSettings />
       <FacebookProviderSettings />
       <GitHubProviderSettings />

dashboard/src/types/application.ts

@@ -6,6 +6,7 @@ import type {
   PermissionVariableFragment,
   ProjectFragment,
   SecretFragment,
+  WorkspaceFragment,
 } from '@/utils/__generated__/graphql';
 
 /**
@@ -62,6 +63,7 @@ export type FeatureFlag = {
   value: string;
 };
 
+export type Workspace = WorkspaceFragment;
 export type Project = ProjectFragment;
 
 export interface PermissionVariable extends PermissionVariableFragment {

dashboard/src/utils/__generated__/graphql.ts

@@ -25,7 +25,9 @@ export type Scalars = {
   bpchar: any;
   bytea: any;
   citext: any;
+  float64: any;
   jsonb: any;
+  labels: any;
   smallint: any;
   timestamp: any;
   timestamptz: any;
@@ -1035,7 +1037,9 @@ export type ConfigGlobalUpdateInput = {
 export type ConfigHasura = {
   __typename?: 'ConfigHasura';
   adminSecret: Scalars['String'];
+  events?: Maybe<ConfigHasuraEvents>;
   jwtSecrets?: Maybe<Array<ConfigJwtSecret>>;
+  logs?: Maybe<ConfigHasuraLogs>;
   resources?: Maybe<ConfigResources>;
   settings?: Maybe<ConfigHasuraSettings>;
   version?: Maybe<Scalars['String']>;
@@ -1047,22 +1051,66 @@ export type ConfigHasuraComparisonExp = {
   _not?: InputMaybe<ConfigHasuraComparisonExp>;
   _or?: InputMaybe<Array<ConfigHasuraComparisonExp>>;
   adminSecret?: InputMaybe<ConfigStringComparisonExp>;
+  events?: InputMaybe<ConfigHasuraEventsComparisonExp>;
   jwtSecrets?: InputMaybe<ConfigJwtSecretComparisonExp>;
+  logs?: InputMaybe<ConfigHasuraLogsComparisonExp>;
   resources?: InputMaybe<ConfigResourcesComparisonExp>;
   settings?: InputMaybe<ConfigHasuraSettingsComparisonExp>;
   version?: InputMaybe<ConfigStringComparisonExp>;
   webhookSecret?: InputMaybe<ConfigStringComparisonExp>;
 };
 
+export type ConfigHasuraEvents = {
+  __typename?: 'ConfigHasuraEvents';
+  httpPoolSize?: Maybe<Scalars['ConfigUint32']>;
+};
+
+export type ConfigHasuraEventsComparisonExp = {
+  _and?: InputMaybe<Array<ConfigHasuraEventsComparisonExp>>;
+  _not?: InputMaybe<ConfigHasuraEventsComparisonExp>;
+  _or?: InputMaybe<Array<ConfigHasuraEventsComparisonExp>>;
+  httpPoolSize?: InputMaybe<ConfigUint32ComparisonExp>;
+};
+
+export type ConfigHasuraEventsInsertInput = {
+  httpPoolSize?: InputMaybe<Scalars['ConfigUint32']>;
+};
+
+export type ConfigHasuraEventsUpdateInput = {
+  httpPoolSize?: InputMaybe<Scalars['ConfigUint32']>;
+};
+
 export type ConfigHasuraInsertInput = {
   adminSecret: Scalars['String'];
+  events?: InputMaybe<ConfigHasuraEventsInsertInput>;
   jwtSecrets?: InputMaybe<Array<ConfigJwtSecretInsertInput>>;
+  logs?: InputMaybe<ConfigHasuraLogsInsertInput>;
   resources?: InputMaybe<ConfigResourcesInsertInput>;
   settings?: InputMaybe<ConfigHasuraSettingsInsertInput>;
   version?: InputMaybe<Scalars['String']>;
   webhookSecret: Scalars['String'];
 };
 
+export type ConfigHasuraLogs = {
+  __typename?: 'ConfigHasuraLogs';
+  level?: Maybe<Scalars['String']>;
+};
+
+export type ConfigHasuraLogsComparisonExp = {
+  _and?: InputMaybe<Array<ConfigHasuraLogsComparisonExp>>;
+  _not?: InputMaybe<ConfigHasuraLogsComparisonExp>;
+  _or?: InputMaybe<Array<ConfigHasuraLogsComparisonExp>>;
+  level?: InputMaybe<ConfigStringComparisonExp>;
+};
+
+export type ConfigHasuraLogsInsertInput = {
+  level?: InputMaybe<Scalars['String']>;
+};
+
+export type ConfigHasuraLogsUpdateInput = {
+  level?: InputMaybe<Scalars['String']>;
+};
+
 export type ConfigHasuraSettings = {
   __typename?: 'ConfigHasuraSettings';
   enableRemoteSchemaPermissions?: Maybe<Scalars['Boolean']>;
@@ -1085,7 +1133,9 @@ export type ConfigHasuraSettingsUpdateInput = {
 
 export type ConfigHasuraUpdateInput = {
   adminSecret?: InputMaybe<Scalars['String']>;
+  events?: InputMaybe<ConfigHasuraEventsUpdateInput>;
   jwtSecrets?: InputMaybe<Array<ConfigJwtSecretUpdateInput>>;
+  logs?: InputMaybe<ConfigHasuraLogsUpdateInput>;
   resources?: InputMaybe<ConfigResourcesUpdateInput>;
   settings?: InputMaybe<ConfigHasuraSettingsUpdateInput>;
   version?: InputMaybe<Scalars['String']>;
@@ -1639,6 +1689,24 @@ export type Log = {
   timestamp: Scalars['Timestamp'];
 };
 
+export type Metrics = {
+  __typename?: 'Metrics';
+  rows: Array<RowMetric>;
+};
+
+export type RowMetric = {
+  __typename?: 'RowMetric';
+  labels?: Maybe<Scalars['labels']>;
+  time: Scalars['Timestamp'];
+  value?: Maybe<Scalars['float64']>;
+};
+
+export type StatsLiveApps = {
+  __typename?: 'StatsLiveApps';
+  appID: Array<Scalars['uuid']>;
+  count: Scalars['Int'];
+};
+
 /** Boolean expression to compare columns of type "String". All fields are combined with logical 'AND'. */
 export type String_Comparison_Exp = {
   _eq?: InputMaybe<Scalars['String']>;
@@ -4878,6 +4946,7 @@ export type Backups = {
   appId: Scalars['uuid'];
   completedAt?: Maybe<Scalars['timestamptz']>;
   createdAt: Scalars['timestamptz'];
+  expiresAt?: Maybe<Scalars['timestamptz']>;
   id: Scalars['uuid'];
   size: Scalars['bigint'];
 };
@@ -4965,6 +5034,7 @@ export type Backups_Bool_Exp = {
   appId?: InputMaybe<Uuid_Comparison_Exp>;
   completedAt?: InputMaybe<Timestamptz_Comparison_Exp>;
   createdAt?: InputMaybe<Timestamptz_Comparison_Exp>;
+  expiresAt?: InputMaybe<Timestamptz_Comparison_Exp>;
   id?: InputMaybe<Uuid_Comparison_Exp>;
   size?: InputMaybe<Bigint_Comparison_Exp>;
 };
@@ -4986,6 +5056,7 @@ export type Backups_Insert_Input = {
   appId?: InputMaybe<Scalars['uuid']>;
   completedAt?: InputMaybe<Scalars['timestamptz']>;
   createdAt?: InputMaybe<Scalars['timestamptz']>;
+  expiresAt?: InputMaybe<Scalars['timestamptz']>;
   id?: InputMaybe<Scalars['uuid']>;
   size?: InputMaybe<Scalars['bigint']>;
 };
@@ -4996,6 +5067,7 @@ export type Backups_Max_Fields = {
   appId?: Maybe<Scalars['uuid']>;
   completedAt?: Maybe<Scalars['timestamptz']>;
   createdAt?: Maybe<Scalars['timestamptz']>;
+  expiresAt?: Maybe<Scalars['timestamptz']>;
   id?: Maybe<Scalars['uuid']>;
   size?: Maybe<Scalars['bigint']>;
 };
@@ -5005,6 +5077,7 @@ export type Backups_Max_Order_By = {
   appId?: InputMaybe<Order_By>;
   completedAt?: InputMaybe<Order_By>;
   createdAt?: InputMaybe<Order_By>;
+  expiresAt?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
   size?: InputMaybe<Order_By>;
 };
@@ -5015,6 +5088,7 @@ export type Backups_Min_Fields = {
   appId?: Maybe<Scalars['uuid']>;
   completedAt?: Maybe<Scalars['timestamptz']>;
   createdAt?: Maybe<Scalars['timestamptz']>;
+  expiresAt?: Maybe<Scalars['timestamptz']>;
   id?: Maybe<Scalars['uuid']>;
   size?: Maybe<Scalars['bigint']>;
 };
@@ -5024,6 +5098,7 @@ export type Backups_Min_Order_By = {
   appId?: InputMaybe<Order_By>;
   completedAt?: InputMaybe<Order_By>;
   createdAt?: InputMaybe<Order_By>;
+  expiresAt?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
   size?: InputMaybe<Order_By>;
 };
@@ -5050,6 +5125,7 @@ export type Backups_Order_By = {
   appId?: InputMaybe<Order_By>;
   completedAt?: InputMaybe<Order_By>;
   createdAt?: InputMaybe<Order_By>;
+  expiresAt?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
   size?: InputMaybe<Order_By>;
 };
@@ -5068,6 +5144,8 @@ export enum Backups_Select_Column {
   /** column name */
   CreatedAt = 'createdAt',
   /** column name */
+  ExpiresAt = 'expiresAt',
+  /** column name */
   Id = 'id',
   /** column name */
   Size = 'size'
@@ -5078,6 +5156,7 @@ export type Backups_Set_Input = {
   appId?: InputMaybe<Scalars['uuid']>;
   completedAt?: InputMaybe<Scalars['timestamptz']>;
   createdAt?: InputMaybe<Scalars['timestamptz']>;
+  expiresAt?: InputMaybe<Scalars['timestamptz']>;
   id?: InputMaybe<Scalars['uuid']>;
   size?: InputMaybe<Scalars['bigint']>;
 };
@@ -5128,6 +5207,7 @@ export type Backups_Stream_Cursor_Value_Input = {
   appId?: InputMaybe<Scalars['uuid']>;
   completedAt?: InputMaybe<Scalars['timestamptz']>;
   createdAt?: InputMaybe<Scalars['timestamptz']>;
+  expiresAt?: InputMaybe<Scalars['timestamptz']>;
   id?: InputMaybe<Scalars['uuid']>;
   size?: InputMaybe<Scalars['bigint']>;
 };
@@ -5152,6 +5232,8 @@ export enum Backups_Update_Column {
   /** column name */
   CreatedAt = 'createdAt',
   /** column name */
+  ExpiresAt = 'expiresAt',
+  /** column name */
   Id = 'id',
   /** column name */
   Size = 'size'
@@ -9150,6 +9232,7 @@ export type Mutation_Root = {
   /** insert a single row into the table: "regions" */
   insert_regions_one?: Maybe<Regions>;
   migrateRDSToPostgres: Scalars['Boolean'];
+  pauseInactiveApps: Array<Scalars['String']>;
   resetPostgresPassword: Scalars['Boolean'];
   restoreApplicationDatabase: Scalars['Boolean'];
   /** update single row of the table: "apps" */
@@ -9338,9 +9421,16 @@ export type Mutation_Root = {
 };
 
 
+/** mutation root */
+export type Mutation_RootBackupAllApplicationsDatabaseArgs = {
+  expireInDays?: InputMaybe<Scalars['Int']>;
+};
+
+
 /** mutation root */
 export type Mutation_RootBackupApplicationDatabaseArgs = {
   appID: Scalars['String'];
+  expireInDays?: InputMaybe<Scalars['Int']>;
 };
 
 
@@ -11947,6 +12037,41 @@ export type Query_Root = {
   files: Array<Files>;
   /** fetch aggregated fields from the table: "storage.files" */
   filesAggregate: Files_Aggregate;
+  /**
+   * Returns CPU metrics for a given application.
+   * If `from` and `to` are not provided, they default to an hour ago and now, respectively.
+   *
+   * CPU usage is calculated as the average CPU usage over the period of 1m.
+   *
+   * Unit returned is millicores.
+   */
+  getCPUMetrics: Metrics;
+  /**
+   * Returns memory metrics for a given application.
+   * If `from` and `to` are not provided, they default to an hour ago and now, respectively.
+   *
+   * Memory usage is returned in MiB.
+   */
+  getMemoryMetrics: Metrics;
+  /**
+   * Returns disk capacity for the volume used by postgres to store the database.
+   * If `from` and `to` are not provided, they default to an hour ago and now, respectively.
+   *
+   * Disk usage is returned in MiB.
+   */
+  getPostgresVolumeCapacity: Metrics;
+  /**
+   * Returns disk usage for the volume used by postgres to store the database.
+   * If `from` and `to` are not provided, they default to an hour ago and now, respectively.
+   *
+   * Disk usage is returned in MiB.
+   */
+  getPostgresVolumeUsage: Metrics;
+  /**
+   * Return requests per second for a given application by service.
+   * If `from` and `to` are not provided, they default to an hour ago and now, respectively.
+   */
+  getRequestsPerSecond: Metrics;
   /** fetch data from the table: "github_app_installations" using primary key columns */
   githubAppInstallation?: Maybe<GithubAppInstallations>;
   /** fetch data from the table: "github_app_installations" */
@@ -11982,6 +12107,13 @@ export type Query_Root = {
   regions_aggregate: Regions_Aggregate;
   /** fetch data from the table: "regions" using primary key columns */
   regions_by_pk?: Maybe<Regions>;
+  /**
+   * Returns lists of apps that have some live traffic in the give time range.
+   * From defaults to 24 hours ago and to defaults to now.
+   *
+   * Requests that returned a 4xx or 5xx status code are not counted as live traffic.
+   */
+  statsLiveApps: StatsLiveApps;
   systemConfig?: Maybe<ConfigSystemConfig>;
   systemConfigs: Array<ConfigAppSystemConfig>;
   /** fetch data from the table: "auth.users" using primary key columns */
@@ -12511,6 +12643,41 @@ export type Query_RootFilesAggregateArgs = {
 };
 
 
+export type Query_RootGetCpuMetricsArgs = {
+  appID: Scalars['String'];
+  from?: InputMaybe<Scalars['Timestamp']>;
+  to?: InputMaybe<Scalars['Timestamp']>;
+};
+
+
+export type Query_RootGetMemoryMetricsArgs = {
+  appID: Scalars['String'];
+  from?: InputMaybe<Scalars['Timestamp']>;
+  to?: InputMaybe<Scalars['Timestamp']>;
+};
+
+
+export type Query_RootGetPostgresVolumeCapacityArgs = {
+  appID: Scalars['String'];
+  from?: InputMaybe<Scalars['Timestamp']>;
+  to?: InputMaybe<Scalars['Timestamp']>;
+};
+
+
+export type Query_RootGetPostgresVolumeUsageArgs = {
+  appID: Scalars['String'];
+  from?: InputMaybe<Scalars['Timestamp']>;
+  to?: InputMaybe<Scalars['Timestamp']>;
+};
+
+
+export type Query_RootGetRequestsPerSecondArgs = {
+  appID: Scalars['String'];
+  from?: InputMaybe<Scalars['Timestamp']>;
+  to?: InputMaybe<Scalars['Timestamp']>;
+};
+
+
 export type Query_RootGithubAppInstallationArgs = {
   id: Scalars['uuid'];
 };
@@ -12634,6 +12801,12 @@ export type Query_RootRegions_By_PkArgs = {
 };
 
 
+export type Query_RootStatsLiveAppsArgs = {
+  from?: InputMaybe<Scalars['Timestamp']>;
+  to?: InputMaybe<Scalars['Timestamp']>;
+};
+
+
 export type Query_RootSystemConfigArgs = {
   appID: Scalars['uuid'];
 };
@@ -16390,6 +16563,16 @@ export type GetRemoteAppRolesQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type GetRemoteAppRolesQuery = { __typename?: 'query_root', authRoles: Array<{ __typename?: 'authRoles', role: string }> };
 
+export type WorkspaceFragment = { __typename?: 'workspaces', id: any, name: string, slug: string, workspaceMembers: Array<{ __typename?: 'workspaceMembers', id: any, type: string, user: { __typename?: 'users', id: any, email?: any | null, displayName: string } }>, projects: Array<{ __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, isProvisioned: boolean, createdAt: any, desiredState: number, nhostBaseFolder: string, providersUpdated?: boolean | null, config?: { __typename?: 'ConfigConfig', hasura: { __typename?: 'ConfigHasura', adminSecret: string } } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, isFree: boolean }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }>, creator?: { __typename?: 'users', id: any, email?: any | null, displayName: string } | null }> };
+
+export type GetWorkspaceAndProjectQueryVariables = Exact<{
+  workspaceSlug: Scalars['String'];
+  projectSlug?: InputMaybe<Scalars['String']>;
+}>;
+
+
+export type GetWorkspaceAndProjectQuery = { __typename?: 'query_root', workspaces: Array<{ __typename?: 'workspaces', id: any, name: string, slug: string, workspaceMembers: Array<{ __typename?: 'workspaceMembers', id: any, type: string, user: { __typename?: 'users', id: any, email?: any | null, displayName: string } }>, projects: Array<{ __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, isProvisioned: boolean, createdAt: any, desiredState: number, nhostBaseFolder: string, providersUpdated?: boolean | null, config?: { __typename?: 'ConfigConfig', hasura: { __typename?: 'ConfigHasura', adminSecret: string } } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, isFree: boolean }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }>, creator?: { __typename?: 'users', id: any, email?: any | null, displayName: string } | null }> }>, projects: Array<{ __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, isProvisioned: boolean, createdAt: any, desiredState: number, nhostBaseFolder: string, providersUpdated?: boolean | null, config?: { __typename?: 'ConfigConfig', hasura: { __typename?: 'ConfigHasura', adminSecret: string } } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, isFree: boolean }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }>, creator?: { __typename?: 'users', id: any, email?: any | null, displayName: string } | null }> };
+
 export type InsertApplicationMutationVariables = Exact<{
   app: Apps_Insert_Input;
 }>;
@@ -16480,7 +16663,7 @@ export type GetSignInMethodsQueryVariables = Exact<{
 }>;
 
 
-export type GetSignInMethodsQuery = { __typename?: 'query_root', config?: { __typename: 'ConfigConfig', id: 'ConfigConfig', provider?: { __typename: 'ConfigProvider', id: 'ConfigProvider', sms?: { __typename?: 'ConfigSms', accountSid: string, authToken: string, messagingServiceId: string, provider?: string | null } | null } | null, auth?: { __typename: 'ConfigAuth', id: 'ConfigAuth', method?: { __typename?: 'ConfigAuthMethod', emailPassword?: { __typename?: 'ConfigAuthMethodEmailPassword', emailVerificationRequired?: boolean | null, hibpEnabled?: boolean | null } | null, emailPasswordless?: { __typename?: 'ConfigAuthMethodEmailPasswordless', enabled?: boolean | null } | null, smsPasswordless?: { __typename?: 'ConfigAuthMethodSmsPasswordless', enabled?: boolean | null } | null, anonymous?: { __typename?: 'ConfigAuthMethodAnonymous', enabled?: boolean | null } | null, webauthn?: { __typename?: 'ConfigAuthMethodWebauthn', enabled?: boolean | null } | null, oauth?: { __typename?: 'ConfigAuthMethodOauth', apple?: { __typename?: 'ConfigAuthMethodOauthApple', enabled?: boolean | null, clientId?: string | null, keyId?: string | null, teamId?: string | null, privateKey?: string | null } | null, discord?: { __typename?: 'ConfigStandardOauthProviderWithScope', enabled?: boolean | null, clientId?: string | null, clientSecret?: string | null, scope?: Array<string> | null } | null, facebook?: { __typename?: 'ConfigStandardOauthProviderWithScope', enabled?: boolean | null, clientId?: string | null, clientSecret?: string | null, scope?: Array<string> | null } | null, github?: { __typename?: 'ConfigStandardOauthProviderWithScope', enabled?: boolean | null, clientId?: string | null, clientSecret?: string | null, scope?: Array<string> | null } | null, google?: { __typename?: 'ConfigStandardOauthProviderWithScope', enabled?: boolean | null, clientId?: string | null, clientSecret?: string | null, scope?: Array<string> | null } | null, linkedin?: { __typename?: 'ConfigStandardOauthProviderWithScope', enabled?: boolean | null, clientId?: string | null, clientSecret?: string | null, scope?: Array<string> | null } | null, spotify?: { __typename?: 'ConfigStandardOauthProviderWithScope', enabled?: boolean | null, clientId?: string | null, clientSecret?: string | null, scope?: Array<string> | null } | null, twitch?: { __typename?: 'ConfigStandardOauthProviderWithScope', enabled?: boolean | null, clientId?: string | null, clientSecret?: string | null, scope?: Array<string> | null } | null, twitter?: { __typename?: 'ConfigAuthMethodOauthTwitter', enabled?: boolean | null, consumerKey?: string | null, consumerSecret?: string | null } | null, windowslive?: { __typename?: 'ConfigStandardOauthProviderWithScope', enabled?: boolean | null, clientId?: string | null, clientSecret?: string | null, scope?: Array<string> | null } | null, workos?: { __typename?: 'ConfigAuthMethodOauthWorkos', enabled?: boolean | null, clientId?: string | null, clientSecret?: string | null, connection?: string | null, organization?: string | null } | null } | null } | null } | null } | null };
+export type GetSignInMethodsQuery = { __typename?: 'query_root', config?: { __typename: 'ConfigConfig', id: 'ConfigConfig', provider?: { __typename: 'ConfigProvider', id: 'ConfigProvider', sms?: { __typename?: 'ConfigSms', accountSid: string, authToken: string, messagingServiceId: string, provider?: string | null } | null } | null, auth?: { __typename: 'ConfigAuth', id: 'ConfigAuth', method?: { __typename?: 'ConfigAuthMethod', emailPassword?: { __typename?: 'ConfigAuthMethodEmailPassword', emailVerificationRequired?: boolean | null, hibpEnabled?: boolean | null } | null, emailPasswordless?: { __typename?: 'ConfigAuthMethodEmailPasswordless', enabled?: boolean | null } | null, smsPasswordless?: { __typename?: 'ConfigAuthMethodSmsPasswordless', enabled?: boolean | null } | null, anonymous?: { __typename?: 'ConfigAuthMethodAnonymous', enabled?: boolean | null } | null, webauthn?: { __typename?: 'ConfigAuthMethodWebauthn', enabled?: boolean | null } | null, oauth?: { __typename?: 'ConfigAuthMethodOauth', apple?: { __typename?: 'ConfigAuthMethodOauthApple', enabled?: boolean | null, clientId?: string | null, keyId?: string | null, teamId?: string | null, privateKey?: string | null } | null, discord?: { __typename?: 'ConfigStandardOauthProviderWithScope', enabled?: boolean | null, clientId?: string | null, clientSecret?: string | null, scope?: Array<string> | null } | null, facebook?: { __typename?: 'ConfigStandardOauthProviderWithScope', enabled?: boolean | null, clientId?: string | null, clientSecret?: string | null, scope?: Array<string> | null } | null, github?: { __typename?: 'ConfigStandardOauthProviderWithScope', enabled?: boolean | null, clientId?: string | null, clientSecret?: string | null, scope?: Array<string> | null } | null, google?: { __typename?: 'ConfigStandardOauthProviderWithScope', enabled?: boolean | null, clientId?: string | null, clientSecret?: string | null, scope?: Array<string> | null } | null, linkedin?: { __typename?: 'ConfigStandardOauthProviderWithScope', enabled?: boolean | null, clientId?: string | null, clientSecret?: string | null, scope?: Array<string> | null } | null, spotify?: { __typename?: 'ConfigStandardOauthProviderWithScope', enabled?: boolean | null, clientId?: string | null, clientSecret?: string | null, scope?: Array<string> | null } | null, twitch?: { __typename?: 'ConfigStandardOauthProviderWithScope', enabled?: boolean | null, clientId?: string | null, clientSecret?: string | null, scope?: Array<string> | null } | null, twitter?: { __typename?: 'ConfigAuthMethodOauthTwitter', enabled?: boolean | null, consumerKey?: string | null, consumerSecret?: string | null } | null, windowslive?: { __typename?: 'ConfigStandardOauthProviderWithScope', enabled?: boolean | null, clientId?: string | null, clientSecret?: string | null, scope?: Array<string> | null } | null, workos?: { __typename?: 'ConfigAuthMethodOauthWorkos', enabled?: boolean | null, clientId?: string | null, clientSecret?: string | null, connection?: string | null, organization?: string | null } | null, azuread?: { __typename?: 'ConfigAuthMethodOauthAzuread', enabled?: boolean | null, clientId?: string | null, clientSecret?: string | null, tenant?: string | null } | null } | null } | null } | null } | null };
 
 export type GetSmtpSettingsQueryVariables = Exact<{
   appId: Scalars['uuid'];
@@ -16617,6 +16800,8 @@ export type GetFilesAggregateQueryVariables = Exact<{
 
 export type GetFilesAggregateQuery = { __typename?: 'query_root', filesAggregate: { __typename?: 'files_aggregate', aggregate?: { __typename?: 'files_aggregate_fields', count: number } | null } };
 
+export type ProjectFragment = { __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, isProvisioned: boolean, createdAt: any, desiredState: number, nhostBaseFolder: string, providersUpdated?: boolean | null, config?: { __typename?: 'ConfigConfig', hasura: { __typename?: 'ConfigHasura', adminSecret: string } } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, isFree: boolean }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }>, creator?: { __typename?: 'users', id: any, email?: any | null, displayName: string } | null };
+
 export type GithubRepositoryFragment = { __typename?: 'githubRepositories', id: any, name: string, fullName: string, private: boolean, githubAppInstallation: { __typename?: 'githubAppInstallations', id: any, accountLogin?: string | null, accountType?: string | null, accountAvatarUrl?: string | null } };
 
 export type GetGithubRepositoriesQueryVariables = Exact<{ [key: string]: never; }>;
@@ -16841,14 +17026,12 @@ export type GetFreeAndActiveProjectsQueryVariables = Exact<{
 
 export type GetFreeAndActiveProjectsQuery = { __typename?: 'query_root', freeAndActiveProjects: Array<{ __typename?: 'apps', id: any }> };
 
-export type ProjectFragment = { __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, isProvisioned: boolean, createdAt: any, desiredState: number, nhostBaseFolder: string, providersUpdated?: boolean | null, config?: { __typename?: 'ConfigConfig', hasura: { __typename?: 'ConfigHasura', adminSecret: string } } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, isFree: boolean }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }> };
-
 export type GetOneUserQueryVariables = Exact<{
   userId: Scalars['uuid'];
 }>;
 
 
-export type GetOneUserQuery = { __typename?: 'query_root', user?: { __typename?: 'users', id: any, displayName: string, avatarUrl: string, workspaceMembers: Array<{ __typename?: 'workspaceMembers', id: any, userId: any, workspaceId: any, type: string, workspace: { __typename?: 'workspaces', creatorUserId?: any | null, id: any, slug: string, name: string, apps: Array<{ __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, isProvisioned: boolean, createdAt: any, desiredState: number, nhostBaseFolder: string, providersUpdated?: boolean | null, config?: { __typename?: 'ConfigConfig', hasura: { __typename?: 'ConfigHasura', adminSecret: string } } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, isFree: boolean }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }> }> } }> } | null };
+export type GetOneUserQuery = { __typename?: 'query_root', user?: { __typename?: 'users', id: any, displayName: string, avatarUrl: string, workspaceMembers: Array<{ __typename?: 'workspaceMembers', id: any, userId: any, workspaceId: any, type: string, workspace: { __typename?: 'workspaces', creatorUserId?: any | null, id: any, slug: string, name: string, apps: Array<{ __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, isProvisioned: boolean, createdAt: any, desiredState: number, nhostBaseFolder: string, providersUpdated?: boolean | null, config?: { __typename?: 'ConfigConfig', hasura: { __typename?: 'ConfigHasura', adminSecret: string } } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, isFree: boolean }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }>, creator?: { __typename?: 'users', id: any, email?: any | null, displayName: string } | null }> } }> } | null };
 
 export type GetUserAllWorkspacesQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -17050,6 +17233,86 @@ export const GetAppByWorkspaceAndNameFragmentDoc = gql`
   }
 }
     `;
+export const ProjectFragmentDoc = gql`
+    fragment Project on apps {
+  id
+  slug
+  name
+  repositoryProductionBranch
+  subdomain
+  isProvisioned
+  createdAt
+  desiredState
+  nhostBaseFolder
+  providersUpdated
+  config(resolve: true) {
+    hasura {
+      adminSecret
+    }
+  }
+  featureFlags {
+    description
+    id
+    name
+    value
+  }
+  appStates(order_by: {createdAt: desc}, limit: 1) {
+    id
+    appId
+    message
+    stateId
+    createdAt
+  }
+  region {
+    id
+    countryCode
+    awsName
+    city
+  }
+  plan {
+    id
+    name
+    isFree
+  }
+  githubRepository {
+    fullName
+  }
+  deployments(limit: 4, order_by: {deploymentEndedAt: desc}) {
+    id
+    commitSHA
+    commitMessage
+    commitUserName
+    deploymentStartedAt
+    deploymentEndedAt
+    commitUserAvatarUrl
+    deploymentStatus
+  }
+  creator {
+    id
+    email
+    displayName
+  }
+}
+    `;
+export const WorkspaceFragmentDoc = gql`
+    fragment Workspace on workspaces {
+  id
+  name
+  slug
+  workspaceMembers {
+    id
+    user {
+      id
+      email
+      displayName
+    }
+    type
+  }
+  projects: apps {
+    ...Project
+  }
+}
+    ${ProjectFragmentDoc}`;
 export const PrefetchNewAppRegionsFragmentDoc = gql`
     fragment PrefetchNewAppRegions on regions {
   id
@@ -17218,62 +17481,6 @@ export const RemoteAppGetUsersFragmentDoc = gql`
   disabled
 }
     `;
-export const ProjectFragmentDoc = gql`
-    fragment Project on apps {
-  id
-  slug
-  name
-  repositoryProductionBranch
-  subdomain
-  isProvisioned
-  createdAt
-  desiredState
-  nhostBaseFolder
-  providersUpdated
-  config(resolve: true) {
-    hasura {
-      adminSecret
-    }
-  }
-  featureFlags {
-    description
-    id
-    name
-    value
-  }
-  appStates(order_by: {createdAt: desc}, limit: 1) {
-    id
-    appId
-    message
-    stateId
-    createdAt
-  }
-  region {
-    id
-    countryCode
-    awsName
-    city
-  }
-  plan {
-    id
-    name
-    isFree
-  }
-  githubRepository {
-    fullName
-  }
-  deployments(limit: 4, order_by: {deploymentEndedAt: desc}) {
-    id
-    commitSHA
-    commitMessage
-    commitUserName
-    deploymentStartedAt
-    deploymentEndedAt
-    commitUserAvatarUrl
-    deploymentStatus
-  }
-}
-    `;
 export const GetWorkspaceMembersWorkspaceMemberFragmentDoc = gql`
     fragment getWorkspaceMembersWorkspaceMember on workspaceMembers {
   id
@@ -17746,6 +17953,49 @@ export type GetRemoteAppRolesQueryResult = Apollo.QueryResult<GetRemoteAppRolesQ
 export function refetchGetRemoteAppRolesQuery(variables?: GetRemoteAppRolesQueryVariables) {
       return { query: GetRemoteAppRolesDocument, variables: variables }
     }
+export const GetWorkspaceAndProjectDocument = gql`
+    query GetWorkspaceAndProject($workspaceSlug: String!, $projectSlug: String) {
+  workspaces(where: {slug: {_eq: $workspaceSlug}}) {
+    ...Workspace
+  }
+  projects: apps(where: {slug: {_eq: $projectSlug}}) {
+    ...Project
+  }
+}
+    ${WorkspaceFragmentDoc}
+${ProjectFragmentDoc}`;
+
+/**
+ * __useGetWorkspaceAndProjectQuery__
+ *
+ * To run a query within a React component, call `useGetWorkspaceAndProjectQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetWorkspaceAndProjectQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetWorkspaceAndProjectQuery({
+ *   variables: {
+ *      workspaceSlug: // value for 'workspaceSlug'
+ *      projectSlug: // value for 'projectSlug'
+ *   },
+ * });
+ */
+export function useGetWorkspaceAndProjectQuery(baseOptions: Apollo.QueryHookOptions<GetWorkspaceAndProjectQuery, GetWorkspaceAndProjectQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetWorkspaceAndProjectQuery, GetWorkspaceAndProjectQueryVariables>(GetWorkspaceAndProjectDocument, options);
+      }
+export function useGetWorkspaceAndProjectLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetWorkspaceAndProjectQuery, GetWorkspaceAndProjectQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetWorkspaceAndProjectQuery, GetWorkspaceAndProjectQueryVariables>(GetWorkspaceAndProjectDocument, options);
+        }
+export type GetWorkspaceAndProjectQueryHookResult = ReturnType<typeof useGetWorkspaceAndProjectQuery>;
+export type GetWorkspaceAndProjectLazyQueryHookResult = ReturnType<typeof useGetWorkspaceAndProjectLazyQuery>;
+export type GetWorkspaceAndProjectQueryResult = Apollo.QueryResult<GetWorkspaceAndProjectQuery, GetWorkspaceAndProjectQueryVariables>;
+export function refetchGetWorkspaceAndProjectQuery(variables: GetWorkspaceAndProjectQueryVariables) {
+      return { query: GetWorkspaceAndProjectDocument, variables: variables }
+    }
 export const InsertApplicationDocument = gql`
     mutation insertApplication($app: apps_insert_input!) {
   insertApp(object: $app) {
@@ -18282,6 +18532,12 @@ export const GetSignInMethodsDocument = gql`
             connection
             organization
           }
+          azuread {
+            enabled
+            clientId
+            clientSecret
+            tenant
+          }
         }
       }
     }

dashboard/src/utils/dataBrowser/validationSchemaHelpers/validationSchemaHelpers.ts

@@ -7,7 +7,7 @@ export interface ColumnDetails {
   hasDefaultValue: boolean;
 }
 
-function createGenericValidationSchema<T extends yup.BaseSchema>(
+function createGenericValidationSchema<T extends yup.Schema>(
   genericSchema: T,
   { isNullable, hasDefaultValue, isIdentity }: ColumnDetails,
 ): T {
@@ -136,7 +136,10 @@ export function createDynamicValidationSchema(
       };
     }
 
-    if (column.type === 'text' && column.specificType === 'jsonb') {
+    if (
+      column.type === 'text' &&
+      (column.specificType === 'jsonb' || column.specificType === 'json')
+    ) {
       return {
         ...schema,
         [column.id]: createJSONValidationSchema(details),

dashboard/src/utils/msw/mocks/graphql/nhostGraphQLLink.ts

@@ -1,5 +1,5 @@
 import { graphql } from 'msw';
 
-const nhostGraphQLLink = graphql.link('http://localhost:1337/v1/graphql');
+const nhostGraphQLLink = graphql.link('https://local.graphql.nhost.run/v1');
 
 export default nhostGraphQLLink;

dashboard/src/utils/testUtils.tsx

@@ -79,7 +79,7 @@ function Providers({ children }: PropsWithChildren<{}>) {
               <NhostApolloProvider
                 nhost={nhost}
                 link={createHttpLink({
-                  uri: 'http://localhost:1337/v1/graphql',
+                  uri: 'https://local.graphql.nhost.run/v1',
                 })}
               >
                 <WorkspaceProvider>

dashboard/tsconfig.json

@@ -19,6 +19,7 @@
     "baseUrl": "./src",
     "useUnknownInCatchVariables": false,
     "paths": {
+      "@/e2e/*": ["../e2e/*"],
       "@/components/*": ["components/*"],
       "@/hooks/*": ["hooks/*"],
       "@/utils/*": ["utils/*"],

dashboard/tsconfig.test.json

@@ -4,6 +4,7 @@
     "jsx": "react-jsx",
     "types": ["vitest/globals"],
     "paths": {
+      "@/e2e/*": ["../e2e/*"],
       "@/components/*": ["components/*"],
       "@/hooks/*": ["hooks/*"],
       "@/utils/*": ["utils/*"],

dashboard/vitest.config.ts

@@ -10,5 +10,6 @@ export default defineConfig({
     environment: 'jsdom',
     globals: true,
     setupFiles: 'src/setupTests.ts',
+    include: ['src/**/*.(spec|test).{js,jsx,ts,tsx}'],
   },
 });

docs/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/docs
 
+## 0.0.15
+
+### Patch Changes
+
+- 0795d1c6: chore: add link to event triggers on the serverless functions page
+
 ## 0.0.14
 
 ### Patch Changes

docs/docs/authentication/sign-in-methods/4-google.mdx

@@ -56,6 +56,7 @@ Follow this guide to sign in users with Google.
 - Click on **Credentials** under **APIs & Services** in the left menu.
 - Click **+ CREATE CREDENTIALS** and then **OAuth client ID** in the top menu.
 - On the **Create OAuth client ID** page for **Application Type** select **Web application**.
+- Under **Authorized JavaScript origins**, add your project's redirect URL for the Google sign-in method in the following format: `https://<subdomain>.auth.<region>.nhost.run`
 - Under **Authorized redirect URIs** add your **OAuth Callback URL** from Nhost.
 - Click **CREATE**.
 

docs/docs/serverless-functions.mdx

@@ -31,11 +31,11 @@ export default (req: Request, res: Response) => {
 To get the `Request`, and `Response` types you can install the `@types/express` package.
 
 ```bash
-npm install -d @types/express
+npm install -D @types/express
 # or yarn
-yarn add -d @types/express
+yarn add -D @types/express
 # or pnpm
-pnpm add -d @types/express
+pnpm add -D @types/express
 ```
 
 :::
@@ -84,6 +84,8 @@ older (`functions/_utils/<utils-files>.js`).
 
 [Environment variables](/platform/environment-variables) are available inside your Serverless Functions. Both in production and when running Nhost locally using the [Nhost CLI](/cli).
 
+The same [environment variables that are used to configure event triggers](https://docs.nhost.io/database/event-triggers#format) can be used to authenticate regular serverless functions.
+
 ## Examples
 
 We have multiple examples of Serverless Functions in our [Nhost repository](https://github.com/nhost/nhost/tree/main/examples/serverless-functions/functions).

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/docs",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
@@ -16,9 +16,9 @@
   },
   "dependencies": {
     "@algolia/client-search": "^4.9.1",
-    "@docusaurus/core": "2.3.1",
-    "@docusaurus/plugin-sitemap": "2.3.1",
-    "@docusaurus/preset-classic": "2.3.1",
+    "@docusaurus/core": "2.4.0",
+    "@docusaurus/plugin-sitemap": "2.4.0",
+    "@docusaurus/preset-classic": "2.4.0",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "docusaurus-plugin-image-zoom": "^0.1.1",
@@ -30,7 +30,7 @@
     "unist-util-visit": "^2.0.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.3.1",
+    "@docusaurus/module-type-aliases": "2.4.0",
     "@tsconfig/docusaurus": "^1.0.6",
     "typescript": "^4.8.4"
   },

examples/codegen-react-apollo/nhost/config.yaml

@@ -13,7 +13,7 @@ services:
       postgres_password: postgres
       postgres_user: postgres
   auth:
-    image: nhost/hasura-auth:0.16.1
+    image: nhost/hasura-auth:0.16.2
   storage:
     image: nhost/hasura-storage:0.3.0
 auth:

examples/codegen-react-query/nhost/config.yaml

@@ -13,7 +13,7 @@ services:
       postgres_password: postgres
       postgres_user: postgres
   auth:
-    image: nhost/hasura-auth:0.16.1
+    image: nhost/hasura-auth:0.16.2
   storage:
     image: nhost/hasura-storage:0.3.0
 auth:

examples/codegen-react-urql/nhost/config.yaml

@@ -13,7 +13,7 @@ services:
       postgres_password: postgres
       postgres_user: postgres
   auth:
-    image: nhost/hasura-auth:0.16.1
+    image: nhost/hasura-auth:0.16.2
   storage:
     image: nhost/hasura-storage:0.3.0
 auth:

examples/nextjs/.eslintrc.js

@@ -1,9 +1,5 @@
 module.exports = {
-  extends: [
-    '../../config/.eslintrc.js',
-    'plugin:react/jsx-runtime',
-    'plugin:@next/next/recommended'
-  ],
+  extends: ['../../config/.eslintrc.js', 'plugin:@next/next/recommended'],
   rules: {
     'react/react-in-jsx-scope': 'off'
   }

examples/react-apollo/.gitignore

@@ -25,5 +25,7 @@ yarn-error.log*
 .nhost
 functions/node_modules
 
-cypress/videos
-cypress/screenshots
+/test-results/
+/playwright-report/
+/playwright/.cache/
+storageState.json

examples/react-apollo/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost-examples/react-apollo
 
+## 0.1.10
+
+### Patch Changes
+
+- caba147b: chore(examples): improve tests of the React Apollo example
+
 ## 0.1.9
 
 ### Patch Changes

examples/react-apollo/cypress.config.ts

@@ -1,16 +0,0 @@
-import { defineConfig } from 'cypress'
-
-export default defineConfig({
-  e2e: {
-    baseUrl: 'http://localhost:3000',
-    chromeWebSecurity: false,
-    // * for some reason, the mailhog API is not systematically available
-    // * when using `localhost` instead of `127.0.0.1`
-    mailHogUrl: 'http://127.0.0.1:8025',
-    env: {
-      backendUrl: 'http://localhost:1337'
-    },
-    defaultCommandTimeout: 20000,
-    requestTimeout: 20000
-  }
-} as Cypress.ConfigOptions)

examples/react-apollo/cypress/e2e/1-unauthenticated/authentication-guards.cy.ts

@@ -1,8 +0,0 @@
-context('Authentication guards', () => {
-  it('should redirect to /sign-in when not authenticated', () => {
-    cy.visit('/')
-    cy.location('pathname').should('equal', '/sign-in')
-    cy.visit('/apollo')
-    cy.location('pathname').should('equal', '/sign-in')
-  })
-})

examples/react-apollo/cypress/e2e/1-unauthenticated/forgot-password.cy.ts

@@ -1,21 +0,0 @@
-import { faker } from '@faker-js/faker'
-
-context('Forgot password', () => {
-  it('should reset password', () => {
-    const email = faker.internet.email()
-    const password = faker.internet.password(8)
-
-    cy.signUpEmailPassword(email, password)
-    cy.contains('Verification email sent').should('be.visible')
-
-    cy.visit('/sign-in')
-    cy.findByRole('button', { name: /Continue with email \+ password/i }).click()
-    cy.findByRole('button', { name: /Forgot Password?/i }).click()
-
-    cy.findByPlaceholderText('Email Address').type(email)
-    cy.findByRole('button', { name: /Reset your password/i }).click()
-
-    cy.confirmEmail(email)
-    cy.contains('Profile page')
-  })
-})

examples/react-apollo/cypress/e2e/2-sign-up/anonymous.cy.ts

@@ -1,51 +0,0 @@
-import { faker } from '@faker-js/faker'
-
-context('Anonymous users', () => {
-  beforeEach(() => {
-    cy.signInAnonymous()
-  })
-
-  it('should sign-up anonymously', () => {
-    cy.contains('You signed in anonymously')
-  })
-
-  it('should deanonymise with email+password', () => {
-    cy.fetchUserData()
-      .its('id')
-      .then((id) => {
-        const email = faker.internet.email()
-        const password = faker.internet.password()
-        cy.signUpEmailPassword(email, password)
-        cy.contains('Verification email sent').should('be.visible')
-        cy.confirmEmail(email)
-        cy.contains('You signed in anonymously').should('not.exist')
-
-        cy.fetchUserData().then((user) => {
-          cy.wrap(user).its('id').should('equal', id)
-          cy.wrap(user).its('email').should('equal', email)
-        })
-      })
-  })
-
-  it('should deanonymise with a magic link', () => {
-    cy.fetchUserData()
-      .its('id')
-      .then((id) => {
-        const email = faker.internet.email()
-        cy.signUpEmailPasswordless(email)
-        cy.contains('Verification email sent').should('be.visible')
-        cy.confirmEmail(email)
-        cy.goToHomePage()
-        cy.contains('You signed in anonymously').should('not.exist')
-
-        cy.fetchUserData().then((user) => {
-          cy.wrap(user).its('id').should('equal', id)
-          cy.wrap(user).its('email').should('equal', email)
-        })
-      })
-  })
-
-  // TODO implement deanonymisation with Oauth?
-  // TODO forbid email/password change, MFA activation, and password reset when the following PR is released
-  // * https://github.com/nhost/hasura-auth/pull/190
-})

examples/react-apollo/cypress/e2e/2-sign-up/email-password.cy.ts

@@ -1,28 +0,0 @@
-import { faker } from '@faker-js/faker'
-
-context('Sign up with email+password', () => {
-  it('should sign-up with email and password', () => {
-    const email = faker.internet.email()
-    const password = faker.internet.password()
-    cy.signUpEmailPassword(email, password)
-    cy.contains('Verification email sent').should('be.visible')
-    cy.confirmEmail(email)
-    cy.contains('You are authenticated')
-  })
-
-  it('shoud raise an error when trying to sign up with an existing email', () => {
-    const email = faker.internet.email()
-    const password = faker.internet.password(10)
-    cy.signUpEmailPassword(email, password)
-    cy.contains('Verification email sent').should('be.visible')
-    cy.signUpEmailPassword(email, password)
-    cy.contains('Email already in use').should('be.visible')
-  })
-
-  // TODO implement in the UI
-  it.skip('should fail when network is not available', () => {
-    cy.disconnectBackend()
-    cy.signUpEmailPassword(faker.internet.email(), faker.internet.password())
-    cy.contains('Error').should('be.visible')
-  })
-})

examples/react-apollo/cypress/e2e/2-sign-up/email-passwordless.cy.ts

@@ -1,17 +0,0 @@
-import { faker } from '@faker-js/faker'
-
-context('Sign up with a magic link', () => {
-  it('should sign-up with a magic link', () => {
-    const email = faker.internet.email()
-    cy.signUpEmailPasswordless(email)
-    cy.contains('Verification email sent').should('be.visible')
-    cy.confirmEmail(email)
-    cy.contains('Profile page')
-  })
-
-  it('should fail when network is not available', () => {
-    cy.disconnectBackend()
-    cy.signUpEmailPasswordless(faker.internet.email())
-    cy.contains('Error').should('be.visible')
-  })
-})

examples/react-apollo/cypress/e2e/3-sign-in/email-password.cy.ts

@@ -1,74 +0,0 @@
-import totp from 'totp-generator'
-
-import { faker } from '@faker-js/faker'
-import { Decoder } from '@nuintun/qrcode'
-
-context('Sign in with email+password', () => {
-  it('should sign-in with email and password', () => {
-    const email = faker.internet.email()
-    const password = faker.internet.password()
-    cy.signUpEmailPassword(email, password)
-    cy.contains('Verification email sent').should('be.visible')
-    cy.confirmEmail(email)
-    cy.signOut()
-    cy.contains('Sign in to the Application').should('be.visible')
-    cy.signInEmailPassword(email, password)
-
-    cy.contains('You are authenticated')
-  })
-
-  // TODO implement in the UI
-  it.skip('should fail when network is not available', () => {
-    const email = faker.internet.email()
-    const password = faker.internet.password()
-    cy.disconnectBackend()
-    cy.signInEmailPassword(email, password)
-    cy.contains('Error').should('be.visible')
-  })
-
-  it('should activate and sign-in with MFA', () => {
-    // * Sign-up with email+password
-    const email = faker.internet.email()
-    const password = faker.internet.email()
-    cy.signUpEmailPassword(email, password)
-    cy.contains('Verification email sent').should('be.visible')
-    cy.confirmEmail(email)
-
-    cy.getNavBar()
-      .findByRole('button', { name: /Profile/i })
-      .click()
-
-    cy.findByText(/Activate 2-step verification/i)
-      .parent()
-      .findByRole('button')
-      .click()
-
-    cy.findAllByAltText(/qrcode/i).then(async (img) => {
-      // * Activate MFA
-      const result = await new Decoder().scan(img.prop('src'))
-      const [, params] = result.data.split('?')
-      const { secret, algorithm, digits, period } = Object.fromEntries(new URLSearchParams(params))
-      const code = totp(secret, {
-        algorithm: algorithm.replace('SHA1', 'SHA-1'),
-        digits: parseInt(digits),
-        period: parseInt(period)
-      })
-      cy.findByPlaceholderText('Enter activation code').type(code)
-      cy.findByRole('button', { name: /Activate/i }).click()
-      cy.contains('MFA has been activated!!!')
-      cy.signOut()
-
-      // * Sign-in with MFA
-      cy.visit('/sign-in')
-      cy.findByRole('button', { name: /Continue with email \+ password/i }).click()
-      cy.findByPlaceholderText('Email Address').type(email)
-      cy.findByPlaceholderText('Password').type(password)
-      cy.findByRole('button', { name: /Sign in/i }).click()
-      cy.contains('Send 2-step verification code')
-      const newCode = totp(secret, { timestamp: Date.now() })
-      cy.findByPlaceholderText('One-time password').type(newCode)
-      cy.findByRole('button', { name: /Send 2-step verification code/i }).click()
-      cy.contains('You are authenticated')
-    })
-  })
-})

examples/react-apollo/cypress/e2e/3-sign-in/token.cy.ts

@@ -1,22 +0,0 @@
-context('Automatic sign-in with a refresh token', () => {
-  it('should sign in automatically with a refresh token', () => {
-    cy.signUpAndConfirmEmail()
-    cy.contains('Profile page')
-    cy.clearLocalStorage()
-    cy.reload()
-    cy.contains('Sign in to the Application')
-    cy.visitPathWithRefreshToken('/profile')
-    cy.contains('Profile page')
-  })
-
-  it('should fail automatic sign-in when network is not available', () => {
-    cy.signUpAndConfirmEmail()
-    cy.contains('Profile page')
-    cy.disconnectBackend()
-    cy.clearLocalStorage()
-    cy.reload()
-    cy.contains('Sign in to the Application')
-    cy.visitPathWithRefreshToken('/profile')
-    cy.contains('Could not sign in automatically. Retrying to get user information..')
-  })
-})

examples/react-apollo/cypress/e2e/4-authenticated/apollo.cy.ts

@@ -1,45 +0,0 @@
-import { faker } from '@faker-js/faker'
-
-context('Apollo', () => {
-  const addItemTest = (sentence: string) => {
-    cy.getNavBar()
-      .findByRole('button', { name: /Apollo/i })
-      .click()
-    cy.contains('Todo list')
-    cy.focused().type(sentence)
-    cy.findByRole('button', { name: /Add/i }).click()
-  }
-
-  it('should add an item to the todo list when normally authenticated', () => {
-    cy.signUpAndConfirmEmail()
-    const sentence = faker.lorem.sentence()
-    addItemTest(sentence)
-    cy.get('li').contains(sentence)
-  })
-
-  it('should add an item to the todo list when anonymous', () => {
-    cy.signInAnonymous()
-    const sentence = faker.lorem.sentence()
-    addItemTest(sentence)
-    cy.get('li').contains(sentence)
-  })
-
-  it('should add an item to the todo list after a token refresh', () => {
-    // * This test has a limitation: Hasura's clock is not changing, so the previous JWT will still be valid.
-    cy.signUpAndConfirmEmail()
-    const now = Date.now()
-    cy.clock(now)
-    cy.tick(4 * 7 * 24 * 60 * 60 * 1000)
-    const sentence = faker.lorem.sentence()
-    addItemTest(sentence)
-    cy.get('li').contains(sentence)
-  })
-
-  it('should not add an item when backend is disconnected', () => {
-    cy.signUpAndConfirmEmail()
-    cy.disconnectBackend()
-    addItemTest(faker.lorem.sentence())
-    cy.contains('Network error')
-    cy.get('ul').should('be.empty')
-  })
-})

examples/react-apollo/cypress/e2e/4-authenticated/change-email.cy.ts

@@ -1,30 +0,0 @@
-import { faker } from '@faker-js/faker'
-
-context('Change email', () => {
-  it('should change email', () => {
-    const newEmail = faker.internet.email()
-    cy.signUpAndConfirmEmail()
-    cy.findByPlaceholderText('New email').type(newEmail)
-    cy.findByText(/Change Email/i)
-      .parent()
-      .findByRole('button')
-      .click()
-    cy.contains('Please check your inbox and follow the link to confirm the email change').should(
-      'be.visible'
-    )
-    cy.signOut()
-    cy.confirmEmail(newEmail)
-    cy.contains('Profile page')
-  })
-
-  it('should not accept an invalid email', () => {
-    const newEmail = faker.random.alphaNumeric()
-    cy.signUpAndConfirmEmail()
-    cy.findByPlaceholderText('New email').type(newEmail)
-    cy.findByText(/Change Email/i)
-      .parent()
-      .findByRole('button')
-      .click()
-    cy.contains('Email is incorrectly formatted').should('be.visible')
-  })
-})

examples/react-apollo/cypress/e2e/4-authenticated/change-password.cy.ts

@@ -1,29 +0,0 @@
-import { faker } from '@faker-js/faker'
-
-context('Change password', () => {
-  it('should change password', () => {
-    const email = faker.internet.email()
-    const newPassword = faker.internet.password()
-    cy.signUpAndConfirmEmail(email)
-    cy.findByPlaceholderText('New password').type(newPassword)
-    cy.findByText(/Change Password/i)
-      .parent()
-      .findByRole('button')
-      .click()
-    cy.contains('Password changed successfully').should('be.visible')
-    cy.signOut()
-    cy.signInEmailPassword(email, newPassword)
-    cy.contains('You are authenticated')
-  })
-
-  it('should not accept an invalid password', () => {
-    const newPassword = faker.random.alphaNumeric(2)
-    cy.signUpAndConfirmEmail()
-    cy.findByPlaceholderText('New password').type(newPassword)
-    cy.findByText(/Change Password/i)
-      .parent()
-      .findByRole('button')
-      .click()
-    cy.contains('Password is incorrectly formatted').should('be.visible')
-  })
-})

examples/react-apollo/cypress/e2e/4-authenticated/file-uploads.cy.ts

@@ -1,75 +0,0 @@
-context('File uploads', () => {
-  it('should upload a single file', () => {
-    cy.signUpAndConfirmEmail()
-    cy.findByRole('button', { name: /Storage/i }).click()
-    cy.findByRole('button', { name: /Drag a file here or click to select/i })
-      .children('input[type=file]')
-      .selectFile(
-        {
-          contents: Cypress.Buffer.from('file contents'),
-          fileName: 'file.txt',
-          mimeType: 'text/plain',
-          lastModified: Date.now()
-        },
-        { force: true }
-      )
-      .parent()
-      .contains('Successfully uploaded')
-  })
-
-  it('should upload two files using the same single file uploader', () => {
-    cy.signUpAndConfirmEmail()
-    cy.findByRole('button', { name: /Storage/i }).click()
-    cy.findByRole('button', { name: /Drag a file here or click to select/i })
-      .children('input[type=file]')
-      .selectFile(
-        {
-          contents: Cypress.Buffer.from('file contents'),
-          fileName: 'file.txt',
-          mimeType: 'text/plain',
-          lastModified: Date.now()
-        },
-        { force: true }
-      )
-      .selectFile(
-        {
-          contents: Cypress.Buffer.from('file contents'),
-          fileName: 'file.txt',
-          mimeType: 'text/plain',
-          lastModified: Date.now()
-        },
-        { force: true }
-      )
-      .parent()
-      .contains('Successfully uploaded')
-  })
-
-  it('should upload multiple files', () => {
-    const files: Required<Cypress.FileReferenceObject>[] = [
-      {
-        contents: Cypress.Buffer.from('file contents'),
-        fileName: 'file1.txt',
-        mimeType: 'text/plain',
-        lastModified: Date.now()
-      },
-      {
-        contents: Cypress.Buffer.from('file contents'),
-        fileName: 'file2.txt',
-        mimeType: 'text/plain',
-        lastModified: Date.now()
-      }
-    ]
-    cy.signUpAndConfirmEmail()
-    cy.findByRole('button', { name: /Storage/i }).click()
-    cy.findByRole('button', { name: /Drag files here or click to select/i })
-      .children('input[type=file]')
-      .selectFile(files, { force: true })
-    cy.findByRole('button', { name: /Upload/i }).click()
-    cy.findByRole('button', { name: /Successfully uploaded/i }).should('be.visible')
-    cy.findByRole('table').within(() => {
-      files.forEach((file) => {
-        cy.contains(file.fileName).parent().findByTitle('success').should('exist')
-      })
-    })
-  })
-})

examples/react-apollo/cypress/e2e/4-authenticated/sign-out.cy.ts

@@ -1,13 +0,0 @@
-context('Sign out', () => {
-  beforeEach(() => {
-    cy.signUpAndConfirmEmail()
-  })
-
-  it('should sign out', () => {
-    cy.visitPathWithRefreshToken()
-    cy.goToProfilePage()
-    cy.contains('Profile page')
-    cy.signOut()
-    cy.contains('Sign in to the Application')
-  })
-})

examples/react-apollo/cypress/e2e/4-authenticated/token-refresh.cy.ts

@@ -1,30 +0,0 @@
-import { faker } from '@faker-js/faker'
-
-context('Token refresh', () => {
-  it('should refresh token one minute before it expires', () => {
-    const email = faker.internet.email()
-    cy.signUpEmailPasswordless(email)
-    cy.contains('Verification email sent').should('be.visible')
-    const now = Date.now()
-    cy.clock(now)
-    cy.confirmEmail(email)
-
-    cy.intercept(Cypress.env('backendUrl') + '/v1/auth/token').as('tokenRequest')
-    cy.tick(14 * 60 * 1000)
-    cy.wait('@tokenRequest').its('response.statusCode').should('eq', 200)
-  })
-
-  it('should refresh session from localStorage after 4 weeks of inactivity', () => {
-    const email = faker.internet.email()
-    cy.signUpEmailPasswordless(email)
-    cy.contains('Verification email sent').should('be.visible')
-    const now = Date.now()
-    cy.clock(now)
-    cy.confirmEmail(email)
-    cy.contains('Profile page')
-
-    cy.tick(4 * 7 * 24 * 60 * 60 * 1000)
-    cy.reload()
-    cy.contains('Profile page')
-  })
-})

examples/react-apollo/cypress/support/e2e.ts

@@ -1,139 +0,0 @@
-import { faker } from '@faker-js/faker'
-import { User } from '@nhost/react'
-
-import '@testing-library/cypress/add-commands'
-import 'cypress-mailhog'
-declare module 'mocha' {
-  export interface Context {
-    refreshToken?: string
-  }
-}
-declare global {
-  namespace Cypress {
-    interface Chainable {
-      signUpEmailPassword(email: string, password: string): Chainable<Element>
-      signUpEmailPasswordless(email: string): Chainable<Element>
-      signInEmailPassword(email: string, password: string): Chainable<Element>
-      signInAnonymous(): Chainable<Element>
-      /** Sign in from the refresh token stored in the global state */
-      visitPathWithRefreshToken(path?: string): Chainable<Element>
-      /** Click on the 'Sign Out' item of the left side menu to sign out the current user */
-      signOut(): Chainable<Element>
-      /** Run a sign-up + authentication sequence with passwordless to use an authenticated user in other tests */
-      signUpAndConfirmEmail(email?: string): Chainable<Element>
-      /** Gets a confirmation email and click on the link */
-      confirmEmail(email: string): Chainable<Element>
-      /** Save the refresh token in the global state so it can be reused with `this.refreshToken` */
-      saveRefreshToken(): Chainable<Element>
-      /** Make the Nhost backend unavailable */
-      disconnectBackend(): Chainable<Element>
-      /** Get the left side navigation bar */
-      getNavBar(): Chainable<Element>
-      /** Go to the profile page */
-      goToProfilePage(): Chainable<Element>
-      /** Go to the home page */
-      goToHomePage(): Chainable<Element>
-      /** Go getch the user ID in the profile page*/
-      fetchUserData(): Chainable<User>
-    }
-  }
-}
-
-Cypress.Commands.add('signUpEmailPassword', (email, password) => {
-  cy.visit('/sign-up')
-  cy.findByRole('button', { name: /Continue with email \+ password/i }).click()
-  cy.findByPlaceholderText('First name').type(faker.name.firstName())
-  cy.findByPlaceholderText('Last name').type(faker.name.lastName())
-  cy.findByPlaceholderText('Email Address').type(email)
-  cy.findByPlaceholderText('Password').type(password)
-  cy.findByPlaceholderText('Confirm Password').type(password)
-  cy.findByRole('button', { name: /Continue with email \+ password/i }).click()
-})
-
-Cypress.Commands.add('signUpEmailPasswordless', (email) => {
-  cy.visit('/sign-up')
-  cy.findByRole('button', { name: /Continue with a magic link/i }).click()
-  cy.findByPlaceholderText('Email Address').type(email)
-  cy.findByRole('button', { name: /Continue with email/i }).click()
-})
-
-Cypress.Commands.add('signInEmailPassword', (email, password) => {
-  cy.visit('/sign-in')
-  cy.findByRole('button', { name: /Continue with email \+ password/i }).click()
-  cy.findByPlaceholderText('Email Address').type(email)
-  cy.findByPlaceholderText('Password').type(password)
-  cy.findByRole('button', { name: /Sign in/i }).click()
-  cy.saveRefreshToken()
-})
-
-Cypress.Commands.add('signInAnonymous', () => {
-  cy.visit('/sign-in')
-  cy.findByRole('link', { name: /sign in anonymously/i }).click()
-  cy.saveRefreshToken()
-})
-
-Cypress.Commands.add('visitPathWithRefreshToken', function (path = '/') {
-  cy.visit(path + '#refreshToken=' + this.refreshToken)
-})
-
-Cypress.Commands.add('signOut', () => {
-  cy.getNavBar()
-    .findByRole('button', { name: /Sign Out/i })
-    .click()
-})
-
-Cypress.Commands.add('confirmEmail', (email) => {
-  cy.mhGetMailsByRecipient(email, 1)
-    .should('have.length', 1)
-    .then(([message]) => {
-      cy.visit(message.Content.Headers['X-Link'][0])
-      cy.saveRefreshToken()
-    })
-})
-
-Cypress.Commands.add('signUpAndConfirmEmail', (givenEmail) => {
-  const email = givenEmail || faker.internet.email()
-  cy.signUpEmailPasswordless(email)
-  cy.contains('Verification email sent').should('be.visible')
-  cy.confirmEmail(email)
-})
-
-Cypress.Commands.add('saveRefreshToken', () => {
-  cy.getNavBar()
-    .findByRole('button', { name: /Sign Out/i })
-    .then(() => localStorage.getItem('nhostRefreshToken'))
-    .as('refreshToken')
-})
-
-Cypress.Commands.add('disconnectBackend', () => {
-  cy.intercept(Cypress.env('backendUrl') + '/**', {
-    forceNetworkError: true
-  })
-})
-
-Cypress.Commands.add('getNavBar', () => {
-  cy.findByRole(`navigation`, { name: /main navigation/i })
-})
-
-Cypress.Commands.add('goToProfilePage', () => {
-  cy.getNavBar()
-    .findByRole('button', { name: /Profile/i })
-    .click()
-})
-
-Cypress.Commands.add('goToHomePage', () => {
-  cy.getNavBar().findByRole('button', { name: /Home/i }).click()
-})
-
-Cypress.Commands.add('fetchUserData', () => {
-  cy.goToProfilePage()
-  cy.findByText('User information')
-    .parent()
-    .within(() => {
-      cy.get('pre')
-        .invoke('text')
-        .then((text) => JSON.parse(text))
-        .as('user')
-    })
-  return cy.get<User>('@user')
-})

examples/react-apollo/e2e/authenticated/apollo.test.ts

@@ -0,0 +1,52 @@
+import { faker } from '@faker-js/faker'
+import { expect, test } from '@playwright/test'
+import { signInAnonymously, signUpWithEmailAndPassword, verifyEmail } from '../utils'
+
+test('should add an item to the todo list when authenticated with email and password', async ({
+  page
+}) => {
+  const email = faker.internet.email()
+  const password = faker.internet.password()
+  const sentence = faker.lorem.sentence()
+
+  await page.goto('/')
+
+  await signUpWithEmailAndPassword({ page, email, password })
+  await expect(page.getByText(/verification email sent/i)).toBeVisible()
+
+  const newPage = await verifyEmail({ page, email, context: page.context() })
+  await newPage.getByRole('button', { name: /apollo/i }).click()
+  await expect(newPage.getByText(/todo list/i)).toBeVisible()
+  await newPage.getByRole('textbox').fill(sentence)
+  await newPage.getByRole('button', { name: /add/i }).click()
+  await expect(newPage.getByRole('listitem').first()).toHaveText(sentence)
+})
+
+test('should add an item to the todo list when authenticated anonymously', async ({ page }) => {
+  const sentence = faker.lorem.sentence()
+
+  await page.goto('/')
+
+  await signInAnonymously({ page })
+  await page.getByRole('button', { name: /apollo/i }).click()
+  await expect(page.getByText(/todo list/i)).toBeVisible()
+  await page.getByRole('textbox').fill(sentence)
+  await page.getByRole('button', { name: /add/i }).click()
+  await expect(page.getByRole('listitem').first()).toHaveText(sentence)
+})
+
+test('should fail when network is not available', async ({ page }) => {
+  const sentence = faker.lorem.sentence()
+
+  await page.goto('/')
+
+  await signInAnonymously({ page })
+  await page.getByRole('button', { name: /apollo/i }).click()
+  await expect(page.getByText(/todo list/i)).toBeVisible()
+
+  await page.route('**', (route) => route.abort('internetdisconnected'))
+  await page.getByRole('textbox').fill(sentence)
+  await page.getByRole('button', { name: /add/i }).click()
+
+  await expect(page.getByText(/network error/i)).toBeVisible()
+})

examples/react-apollo/e2e/authenticated/change-email.test.ts

@@ -0,0 +1,56 @@
+import { faker } from '@faker-js/faker'
+import { expect, test } from '@playwright/test'
+import { signUpWithEmailAndPassword, verifyEmail } from '../utils'
+
+test('should be able to change email', async ({ page }) => {
+  const email = faker.internet.email()
+  const password = faker.internet.password()
+
+  await page.goto('/')
+
+  await signUpWithEmailAndPassword({ page, email, password })
+  await expect(page.getByText(/verification email sent/i)).toBeVisible()
+
+  const newPage = await verifyEmail({ page, email, context: page.context() })
+  await newPage.getByRole('button', { name: /profile/i }).click()
+
+  const newEmail = faker.internet.email()
+
+  await newPage.getByPlaceholder(/new email/i).fill(newEmail)
+  await newPage.locator('h1:has-text("Change email") + div button:has-text("Change")').click()
+
+  await expect(
+    newPage.getByText(/please check your inbox and follow the link to confirm the email change/i)
+  ).toBeVisible()
+
+  await newPage.getByRole('button', { name: /sign out/i }).click()
+
+  const updatedEmailPage = await verifyEmail({
+    page: newPage,
+    email: newEmail,
+    context: page.context(),
+    linkText: /change email/i
+  })
+
+  await expect(updatedEmailPage.getByText(/profile page/i)).toBeVisible()
+})
+
+test('should not accept an invalid email', async ({ page }) => {
+  const email = faker.internet.email()
+  const password = faker.internet.password()
+
+  await page.goto('/')
+
+  await signUpWithEmailAndPassword({ page, email, password })
+  await expect(page.getByText(/verification email sent/i)).toBeVisible()
+
+  const newPage = await verifyEmail({ page, email, context: page.context() })
+  await newPage.getByRole('button', { name: /profile/i }).click()
+
+  const newEmail = faker.random.alphaNumeric()
+
+  await newPage.getByPlaceholder(/new email/i).fill(newEmail)
+  await newPage.locator('h1:has-text("Change email") + div button:has-text("Change")').click()
+
+  await expect(newPage.getByText(/email is incorrectly formatted/i)).toBeVisible()
+})

examples/react-apollo/e2e/authenticated/change-password.test.ts

@@ -0,0 +1,47 @@
+import { faker } from '@faker-js/faker'
+import { expect, test } from '@playwright/test'
+import { signInWithEmailAndPassword, signUpWithEmailAndPassword, verifyEmail } from '../utils'
+
+test('should be able to change password', async ({ page }) => {
+  const email = faker.internet.email()
+  const password = faker.internet.password()
+
+  await page.goto('/')
+
+  await signUpWithEmailAndPassword({ page, email, password })
+  await expect(page.getByText(/verification email sent/i)).toBeVisible()
+
+  const newPage = await verifyEmail({ page, email, context: page.context() })
+  await newPage.getByRole('button', { name: /profile/i }).click()
+
+  const newPassword = faker.internet.password()
+
+  await newPage.getByPlaceholder(/new password/i).fill(newPassword)
+  await newPage.locator('h1:has-text("Change password") + div button:has-text("Change")').click()
+  await expect(newPage.getByText(/password changed successfully/i)).toBeVisible()
+
+  await newPage.getByRole('button', { name: /sign out/i }).click()
+
+  await signInWithEmailAndPassword({ page: newPage, email, password: newPassword })
+  await expect(newPage.getByText(/you are authenticated/i)).toBeVisible()
+})
+
+test('should not accept an invalid email', async ({ page }) => {
+  const email = faker.internet.email()
+  const password = faker.internet.password()
+
+  await page.goto('/')
+
+  await signUpWithEmailAndPassword({ page, email, password })
+  await expect(page.getByText(/verification email sent/i)).toBeVisible()
+
+  const newPage = await verifyEmail({ page, email, context: page.context() })
+  await newPage.getByRole('button', { name: /profile/i }).click()
+
+  const newPassword = faker.internet.password(2)
+
+  await newPage.getByPlaceholder(/new password/i).fill(newPassword)
+  await newPage.locator('h1:has-text("Change password") + div button:has-text("Change")').click()
+
+  await expect(newPage.getByText(/password is incorrectly formatted/i)).toBeVisible()
+})

examples/react-apollo/e2e/authenticated/file-upload.test.ts

@@ -0,0 +1,97 @@
+import { faker } from '@faker-js/faker'
+import { expect, test } from '@playwright/test'
+import { signUpWithEmailAndPassword, verifyEmail } from '../utils'
+
+test('should upload a single file', async ({ page }) => {
+  const email = faker.internet.email()
+  const password = faker.internet.password()
+
+  await page.goto('/')
+
+  await signUpWithEmailAndPassword({ page, email, password })
+  await expect(page.getByText(/verification email sent/i)).toBeVisible()
+
+  const newPage = await verifyEmail({ page, email, context: page.context() })
+  await newPage.getByRole('button', { name: /storage/i }).click()
+
+  await newPage
+    .getByRole('button', { name: /drag a file here or click to select/i })
+    .locator('input[type=file]')
+    .setInputFiles({
+      buffer: Buffer.from('file contents', 'utf-8'),
+      name: 'file.txt',
+      mimeType: 'text/plain'
+    })
+
+  await expect(newPage.getByText(/successfully uploaded/i)).toBeVisible()
+})
+
+test('should upload two files using the same single file uploader', async ({ page }) => {
+  const email = faker.internet.email()
+  const password = faker.internet.password()
+
+  await page.goto('/')
+
+  await signUpWithEmailAndPassword({ page, email, password })
+  await expect(page.getByText(/verification email sent/i)).toBeVisible()
+
+  const newPage = await verifyEmail({ page, email, context: page.context() })
+  await newPage.getByRole('button', { name: /storage/i }).click()
+
+  await newPage
+    .getByRole('button', { name: /drag a file here or click to select/i })
+    .locator('input[type=file]')
+    .setInputFiles({
+      buffer: Buffer.from('file contents 1', 'utf-8'),
+      name: 'file1.txt',
+      mimeType: 'text/plain'
+    })
+
+  await expect(newPage.getByText(/successfully uploaded/i)).toBeVisible()
+
+  await newPage
+    .getByRole('button', { name: /successfully uploaded/i })
+    .locator('input[type=file]')
+    .setInputFiles({
+      buffer: Buffer.from('file contents 2', 'utf-8'),
+      name: 'file2.txt',
+      mimeType: 'text/plain'
+    })
+
+  await expect(newPage.getByText(/successfully uploaded/i)).toBeVisible()
+})
+
+test('should upload multiple files at once', async ({ page }) => {
+  const email = faker.internet.email()
+  const password = faker.internet.password()
+
+  await page.goto('/')
+
+  await signUpWithEmailAndPassword({ page, email, password })
+  await expect(page.getByText(/verification email sent/i)).toBeVisible()
+
+  const newPage = await verifyEmail({ page, email, context: page.context() })
+  await newPage.getByRole('button', { name: /storage/i }).click()
+
+  await newPage
+    .getByRole('button', { name: /drag files here or click to select/i })
+    .locator('input[type=file]')
+    .setInputFiles([
+      {
+        buffer: Buffer.from('file contents 1', 'utf-8'),
+        name: 'file1.txt',
+        mimeType: 'text/plain'
+      },
+      {
+        buffer: Buffer.from('file contents 2', 'utf-8'),
+        name: 'file2.txt',
+        mimeType: 'text/plain'
+      }
+    ])
+
+  await expect(newPage.getByRole('row').nth(0)).toHaveText('file1.txt')
+  await expect(newPage.getByRole('row').nth(1)).toHaveText('file2.txt')
+  await newPage.getByRole('button', { name: /upload/i }).click()
+
+  await expect(newPage.getByText(/successfully uploaded/i)).toBeVisible()
+})

examples/react-apollo/e2e/config.ts

@@ -0,0 +1,3 @@
+export const baseURL = 'http://localhost:3000'
+export const mailhogURL = 'http://localhost:8025'
+export const authBackendURL = 'https://local.auth.nhost.run'

examples/react-apollo/e2e/sign-in/auto-sign-in.test.ts

@@ -0,0 +1,72 @@
+import { faker } from '@faker-js/faker'
+import { expect, test } from '@playwright/test'
+import { authBackendURL, baseURL } from '../config'
+import {
+  clearStorage,
+  getValueFromLocalStorage,
+  signUpWithEmailAndPassword,
+  verifyEmail
+} from '../utils'
+
+test('should sign in automatically with a refresh token', async ({ page }) => {
+  await page.goto('/')
+
+  const email = faker.internet.email()
+  const password = faker.internet.password()
+
+  await signUpWithEmailAndPassword({ page, email, password })
+  await expect(page.getByText(/verification email sent/i)).toBeVisible()
+
+  const newPage = await verifyEmail({ page, email, context: page.context() })
+
+  await expect(newPage.getByText(/you are authenticated/i)).toBeVisible()
+
+  const refreshToken = await getValueFromLocalStorage({
+    page: newPage,
+    origin: baseURL,
+    key: 'nhostRefreshToken'
+  })
+
+  // Clear storage and reload the page
+  await clearStorage({ page: newPage })
+  await newPage.reload()
+
+  await expect(newPage.getByText(/sign in to the application/i)).toBeVisible()
+
+  // User should be signed in automatically
+  await newPage.goto(`${baseURL}/profile#refreshToken=${refreshToken}`)
+  await expect(newPage.getByText(/profile page/i)).toBeVisible()
+})
+
+test('should fail automatic sign-in when network is not available', async ({ page }) => {
+  await page.goto('/')
+
+  const email = faker.internet.email()
+  const password = faker.internet.password()
+
+  await signUpWithEmailAndPassword({ page, email, password })
+  await expect(page.getByText(/verification email sent/i)).toBeVisible()
+
+  const newPage = await verifyEmail({ page, email, context: page.context() })
+
+  await expect(newPage.getByText(/you are authenticated/i)).toBeVisible()
+
+  const refreshToken = await getValueFromLocalStorage({
+    page: newPage,
+    origin: baseURL,
+    key: 'nhostRefreshToken'
+  })
+
+  // Clear storage and reload the page
+  await clearStorage({ page: newPage })
+  await newPage.reload()
+
+  await expect(newPage.getByText(/sign in to the application/i)).toBeVisible()
+  await newPage.route(`${authBackendURL}/**`, (route) => route.abort('internetdisconnected'))
+
+  // User should be signed in automatically
+  await newPage.goto(`${baseURL}/profile#refreshToken=${refreshToken}`)
+  await expect(
+    newPage.getByText(/could not sign in automatically. retrying to get user information/i)
+  ).toBeVisible()
+})

examples/react-apollo/e2e/sign-in/email-password.test.ts

@@ -0,0 +1,84 @@
+import { faker } from '@faker-js/faker'
+import type { Page } from '@playwright/test'
+import { expect, test } from '@playwright/test'
+import totp from 'totp-generator'
+import { baseURL } from '../config'
+import {
+  decodeQRCode,
+  signInWithEmailAndPassword,
+  signUpWithEmailAndPassword,
+  verifyEmail
+} from '../utils'
+
+const email = faker.internet.email()
+const password = faker.internet.password()
+
+let page: Page
+
+test.describe.configure({ mode: 'serial' })
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage()
+
+  await page.goto('/')
+  await signUpWithEmailAndPassword({ page, email, password })
+  await expect(page.getByText(/verification email sent/i)).toBeVisible()
+
+  const newPage = await verifyEmail({ page, email, context: page.context() })
+  await expect(newPage.getByText(/you are authenticated/i)).toBeVisible()
+  await newPage.getByRole('button', { name: /sign out/i }).click()
+
+  page = newPage
+})
+
+test.afterEach(async () => {
+  await page.getByRole('button', { name: /sign out/i }).click()
+})
+
+test.afterAll(() => {
+  page.close()
+})
+
+test('should sign in with email and password', async () => {
+  await page.goto('/')
+
+  await signInWithEmailAndPassword({ page, email, password })
+  await expect(page.getByText(/you are authenticated/i)).toBeVisible()
+})
+
+// TODO: Create email verification test
+
+test('should activate and sign in with MFA', async () => {
+  await page.goto('/')
+
+  await signInWithEmailAndPassword({ page, email, password })
+  await page.waitForURL(baseURL)
+  await page.getByRole('button', { name: /profile/i }).click()
+  await page.getByRole('button', { name: /generate/i }).click()
+
+  const image = page.getByAltText(/qrcode/i)
+  const src = await image.getAttribute('src')
+
+  const { secret, algorithm, digits, period } = decodeQRCode(src)
+
+  const code = totp(secret, {
+    algorithm: algorithm.replace('SHA1', 'SHA-1'),
+    digits: parseInt(digits),
+    period: parseInt(period)
+  })
+
+  await page.getByPlaceholder(/enter activation code/i).fill(code)
+  await page.getByRole('button', { name: /activate/i }).click()
+  await expect(page.getByText(/mfa has been activated/i)).toBeVisible()
+  await page.getByRole('button', { name: /sign out/i }).click()
+
+  await page.getByRole('button', { name: /continue with email \+ password/i }).click()
+  await signInWithEmailAndPassword({ page, email, password })
+  await expect(page.getByText(/send 2-step verification code/i)).toBeVisible()
+
+  const newCode = totp(secret, { timestamp: Date.now() })
+
+  await page.getByPlaceholder(/one-time password/i).fill(newCode)
+  await page.getByRole('button', { name: /send 2-step verification code/i }).click()
+  await expect(page.getByText(/you are authenticated/i)).toBeVisible()
+})

examples/react-apollo/e2e/sign-up/anonymous.test.ts

@@ -0,0 +1,53 @@
+import { faker } from '@faker-js/faker'
+import { expect, test } from '@playwright/test'
+import {
+  getUserData,
+  signInAnonymously,
+  signUpWithEmailAndPassword,
+  signUpWithEmailPasswordless,
+  verifyEmail,
+  verifyMagicLink
+} from '../utils'
+
+test('should deanonymize with email and password', async ({ page, context }) => {
+  const email = faker.internet.email()
+  const password = faker.internet.password(8)
+
+  await page.goto('/')
+
+  await signInAnonymously({ page })
+  await page.getByRole('button', { name: /profile/i }).click()
+
+  const userData = await getUserData(page)
+
+  await signUpWithEmailAndPassword({ page, email, password })
+  await expect(page.getByText(/verification email sent/i)).toBeVisible()
+
+  const authenticatedPage = await verifyEmail({ page, context, email })
+  await authenticatedPage.getByRole('button', { name: /profile/i }).click()
+
+  const updatedUserData = await getUserData(authenticatedPage)
+  expect(updatedUserData.id).toBe(userData.id)
+  expect(updatedUserData.email).toBe(email)
+})
+
+test('should deanonymize with a magic link', async ({ page, context }) => {
+  const email = faker.internet.email()
+
+  await page.goto('/')
+
+  await signInAnonymously({ page })
+  await page.getByRole('button', { name: /profile/i }).click()
+
+  const userData = await getUserData(page)
+
+  await signUpWithEmailPasswordless({ page, email })
+  await expect(page.getByText(/verification email sent/i)).toBeVisible()
+
+  const authenticatedPage = await verifyMagicLink({ page, context, email })
+  await authenticatedPage.getByRole('button', { name: /profile/i }).click()
+
+  const updatedUserData = await getUserData(authenticatedPage)
+  expect(updatedUserData.id).toBe(userData.id)
+  expect(updatedUserData.email).toBe(email)
+})

examples/react-apollo/e2e/sign-up/email-password.test.ts

@@ -0,0 +1,44 @@
+import { faker } from '@faker-js/faker'
+import { expect, test } from '@playwright/test'
+import { signUpWithEmailAndPassword, verifyEmail } from '../utils'
+
+test('should sign up with email and password', async ({ page, context }) => {
+  page.goto('/')
+
+  const email = faker.internet.email()
+  const password = faker.internet.password()
+
+  await signUpWithEmailAndPassword({ page, email, password })
+  await expect(page.getByText(/verification email sent/i)).toBeVisible()
+
+  const authenticatedPage = await verifyEmail({ page, context, email })
+  await expect(authenticatedPage.getByText(/you are authenticated/i)).toBeVisible()
+})
+
+test('should raise an error when trying to sign up with an existing email', async ({ page }) => {
+  page.goto('/')
+
+  const email = faker.internet.email()
+  const password = faker.internet.password()
+
+  await signUpWithEmailAndPassword({ page, email, password })
+  await expect(page.getByText(/verification email sent/i)).toBeVisible()
+
+  // close modal
+  await page.getByRole('dialog').getByRole('button').click()
+
+  await signUpWithEmailAndPassword({ page, email, password })
+  await expect(page.getByText(/email already in use/i)).toBeVisible()
+})
+
+test('should fail when network is not available', async ({ page }) => {
+  await page.goto('/')
+
+  const email = faker.internet.email()
+  const password = faker.internet.password()
+
+  await page.route('**', (route) => route.abort('internetdisconnected'))
+  await signUpWithEmailAndPassword({ page, email, password })
+
+  await expect(page.getByText(/network error/i)).toBeVisible()
+})

examples/react-apollo/e2e/sign-up/email-passwordless.test.ts

@@ -0,0 +1,27 @@
+import { faker } from '@faker-js/faker'
+import { expect, test } from '@playwright/test'
+import { signUpWithEmailPasswordless, verifyMagicLink } from '../utils'
+
+test('should sign up with a magic link', async ({ page, context }) => {
+  page.goto('/')
+
+  const email = faker.internet.email()
+
+  await signUpWithEmailPasswordless({ page, email })
+  await expect(page.getByText(/verification email sent/i)).toBeVisible()
+
+  const authenticatedPage = await verifyMagicLink({ page, context, email })
+  await authenticatedPage.getByRole('button', { name: /home/i }).click()
+  await expect(authenticatedPage.getByText(/you are authenticated/i)).toBeVisible()
+})
+
+test('should fail when network is not available', async ({ page }) => {
+  await page.goto('/')
+
+  const email = faker.internet.email()
+
+  await page.route('**', (route) => route.abort('internetdisconnected'))
+  await signUpWithEmailPasswordless({ page, email })
+
+  await expect(page.getByText(/network error/i)).toBeVisible()
+})

examples/react-apollo/e2e/unauthenticated/authentication-guards.test.ts

@@ -0,0 +1,14 @@
+import { expect, test } from '@playwright/test'
+import { baseURL } from '../config'
+
+test('should redirect to /sign-in when not authenticated', async ({ page }) => {
+  await page.goto(`${baseURL}`)
+  await page.waitForURL(`${baseURL}/sign-in`)
+
+  await expect(page.getByText(/sign in to the application/i)).toBeVisible()
+
+  await page.goto(`${baseURL}/apollo`)
+  await page.waitForURL(`${baseURL}/sign-in`)
+
+  await expect(page.getByText(/sign in to the application/i)).toBeVisible()
+})

examples/react-apollo/e2e/unauthenticated/forgot-password.test.ts

@@ -0,0 +1,28 @@
+import { faker } from '@faker-js/faker'
+import { expect, test } from '@playwright/test'
+import { baseURL } from '../config'
+import { resetPassword, signUpWithEmailAndPassword } from '../utils'
+
+test('should reset password', async ({ page, context }) => {
+  await page.goto('/')
+
+  const email = faker.internet.email()
+  const password = faker.internet.password(8)
+
+  await signUpWithEmailAndPassword({ page, email, password })
+  await expect(page.getByText(/verification email sent/i)).toBeVisible()
+
+  await page.goto(`${baseURL}/sign-in`)
+  await page.getByRole('button', { name: /continue with email \+ password/i }).click()
+  await page.getByRole('button', { name: /forgot password?/i }).click()
+
+  await page.getByPlaceholder('Email Address').type(email)
+  await page.getByRole('button', { name: /reset your password/i }).click()
+
+  const authenticatedPage = await resetPassword({ page, context, email })
+
+  await authenticatedPage.waitForLoadState()
+  await authenticatedPage.getByRole('button', { name: /profile/i }).click()
+
+  await expect(authenticatedPage.getByText(/profile page/i)).toBeVisible()
+})

examples/react-apollo/e2e/utils.ts

@@ -0,0 +1,265 @@
+import { faker } from '@faker-js/faker'
+import type { User } from '@nhost/react'
+import type { BrowserContext, Page } from '@playwright/test'
+import jsQR from 'jsqr'
+import { PNG } from 'pngjs'
+import { baseURL, mailhogURL } from './config'
+
+/**
+ * Returns the user data from the profile page.
+ *
+ * @param page - The page to get the user data from.
+ * @returns The user data.
+ */
+export async function getUserData(page: Page) {
+  const textContent = await page.locator('h1:has-text("User information") + div pre').textContent()
+  const userData = textContent ? JSON.parse(textContent) : {}
+
+  return userData as User
+}
+
+/**
+ * Returns a promise that resolves when the sign up flow is completed.
+ *
+ * @param page - The page to sign up with.
+ * @param email - The email address to sign up with.
+ * @param password - The password to sign up with.
+ */
+export async function signUpWithEmailAndPassword({
+  page,
+  email,
+  password
+}: {
+  page: Page
+  email: string
+  password: string
+}) {
+  await page.getByRole('button', { name: /home/i }).click()
+  await page.getByRole('link', { name: /sign up/i }).click()
+  await page.getByRole('button', { name: /continue with email \+ password/i }).click()
+  await page.getByPlaceholder(/first name/i).type(faker.name.firstName())
+  await page.getByPlaceholder(/last name/i).type(faker.name.lastName())
+  await page.getByPlaceholder(/email address/i).type(email)
+  await page.getByPlaceholder(/^password$/i).type(password)
+  await page.getByPlaceholder(/confirm password/i).type(password)
+  await page.getByRole('button', { name: /continue with email \+ password/i }).click()
+}
+
+/**
+ * Returns a promise that resolves when the sign in flow is completed.
+ *
+ * @param page - The page to sign in with.
+ * @param email - The email address to sign in with.
+ * @param password - The password to sign in with.
+ */
+export async function signInWithEmailAndPassword({
+  page,
+  email,
+  password
+}: {
+  page: Page
+  email: string
+  password: string
+}) {
+  await page.getByRole('button', { name: /home/i }).click()
+  await page.getByRole('button', { name: /continue with email \+ password/i }).click()
+  await page.getByPlaceholder(/email address/i).type(email)
+  await page.getByPlaceholder(/password/i).type(password)
+  await page.getByRole('button', { name: /sign in/i }).click()
+}
+
+/**
+ * Returns a promise that resolves when the sign in flow is completed.
+ *
+ * @param page - The page to sign in with.
+ */
+export async function signInAnonymously({ page }: { page: Page }) {
+  await page.getByRole('button', { name: /home/i }).click()
+  await page.getByRole('link', { name: /sign in anonymously/i }).click()
+  await page.waitForURL(baseURL)
+}
+
+/**
+ * Returns a promise that resolves when the sign up flow is completed.
+ *
+ * @param page - The page to sign up with.
+ * @param email - The email address to sign up with.
+ */
+export async function signUpWithEmailPasswordless({ page, email }: { page: Page; email: string }) {
+  await page.getByRole('button', { name: /home/i }).click()
+  await page.getByRole('link', { name: /sign up/i }).click()
+  await page.getByRole('button', { name: /continue with a magic link/i }).click()
+  await page.getByPlaceholder(/email address/i).fill(email)
+  await page.getByRole('button', { name: /continue with email/i }).click()
+}
+
+/**
+ * Returns a promise that resolves to a new page that is opened after clicking
+ * the magic link in the email.
+ *
+ * @param email - The email address to reset the password for.
+ * @param page - The page to click the magic link in.
+ * @param context - The browser context.
+ * @returns A promise that resolves to a new page.
+ */
+export async function verifyMagicLink({
+  email,
+  page,
+  context
+}: {
+  email: string
+  page: Page
+  context: BrowserContext
+}) {
+  await page.goto(mailhogURL)
+  await page.locator('.messages > .msglist-message', { hasText: email }).nth(0).click()
+
+  // Based on: https://playwright.dev/docs/pages#handling-new-pages
+  const authenticatedPagePromise = context.waitForEvent('page')
+
+  await page
+    .frameLocator('#preview-html')
+    .getByRole('link', { name: /sign in/i })
+    .click()
+
+  const authenticatedPage = await authenticatedPagePromise
+  await authenticatedPage.waitForLoadState()
+
+  return authenticatedPage
+}
+
+/**
+ * Returns a promise that resolves to a new page that is opened after clicking
+ * the reset password link in the email.
+ *
+ * @param email - The email address to reset the password for.
+ * @param page - The page to click the reset password link in.
+ * @param context - The browser context.
+ * @returns A promise that resolves to a new page.
+ */
+export async function resetPassword({
+  email,
+  page,
+  context
+}: {
+  email: string
+  page: Page
+  context: BrowserContext
+}) {
+  await page.goto(mailhogURL)
+  await page.locator('.messages > .msglist-message', { hasText: email }).nth(0).click()
+
+  // Based on: https://playwright.dev/docs/pages#handling-new-pages
+  const authenticatedPagePromise = context.waitForEvent('page')
+
+  await page
+    .frameLocator('#preview-html')
+    .getByRole('link', { name: /reset password/i })
+    .click()
+
+  const authenticatedPage = await authenticatedPagePromise
+  await authenticatedPage.waitForLoadState()
+
+  return authenticatedPage
+}
+
+/**
+ * Returns a promise that resolves to a new page that is opened after clicking
+ * the verify email link in the email.
+ *
+ * @param email - The email address to verify.
+ * @param page - The page to click the verify email link in.
+ * @param context - The browser context.
+ * @param linkText - The text of the link to click.
+ * @returns A promise that resolves to a new page.
+ */
+export async function verifyEmail({
+  email,
+  page,
+  context,
+  linkText = /verify email/i
+}: {
+  email: string
+  page: Page
+  context: BrowserContext
+  linkText?: string | RegExp
+}) {
+  await page.goto(mailhogURL)
+  await page.locator('.messages > .msglist-message', { hasText: email }).nth(0).click()
+
+  // Based on: https://playwright.dev/docs/pages#handling-new-pages
+  const authenticatedPagePromise = context.waitForEvent('page')
+
+  await page.frameLocator('#preview-html').getByRole('link', { name: linkText }).click()
+
+  const authenticatedPage = await authenticatedPagePromise
+  await authenticatedPage.waitForLoadState()
+
+  return authenticatedPage
+}
+
+/**
+ * Returns decoded data from a QR code.
+ *
+ * @param base64String - The base64 encoded string of the QR code.
+ * @returns The decoded data.
+ */
+export function decodeQRCode(base64String?: string | null) {
+  if (!base64String) {
+    return {
+      secret: '',
+      algorithm: '',
+      digits: '',
+      period: ''
+    }
+  }
+
+  const buffer = Buffer.from(base64String.replace('data:image/png;base64,', ''), 'base64')
+  const pngData = PNG.sync.read(buffer)
+
+  const decoded = jsQR(Uint8ClampedArray.from(pngData.data), pngData.width, pngData.height)
+  const params = decoded?.data?.split('?').at(-1)
+
+  // note: we are decoding MFA here
+  const { secret, algorithm, digits, period } = Object.fromEntries(new URLSearchParams(params))
+
+  return { secret, algorithm, digits, period }
+}
+
+/**
+ * Clears the local and session storage for a page.
+ *
+ * @param page - The page to clear the storage for.
+ */
+export async function clearStorage({ page }: { page: Page }) {
+  await page.evaluate(() => {
+    localStorage.clear()
+    sessionStorage.clear()
+  })
+}
+
+/**
+ * Returns a promise that resolves to the value of a key in local storage.
+ *
+ * @param page - The page to get the value from.
+ * @param origin - The origin of the local storage.
+ * @param key - The key to get the value for.
+ * @returns The value of the key in local storage.
+ */
+export async function getValueFromLocalStorage({
+  page,
+  origin: externalOrigin,
+  key
+}: {
+  page: Page
+  origin: string
+  key: string
+}) {
+  const storageState = await page.context().storageState()
+  const localStorage = storageState.origins.find(
+    ({ origin }) => origin === externalOrigin
+  )?.localStorage
+  const value = localStorage?.find(({ name }) => name === key)?.value
+
+  return value || null
+}