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

chore: update versions

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

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

.github/workflows/ci.yaml

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

.gitignore

@@ -62,3 +62,7 @@ todo.md
 
 # Nhost CLI data
 .nhost
+
+# Nix
+.envrc
+.direnv/

DEVELOPERS.md

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

README.md

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

dashboard/.storybook/preview.js

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

dashboard/CHANGELOG.md

@@ -1,5 +1,119 @@
 # @nhost/dashboard
 
+## 0.19.1
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.32
+- @nhost/nextjs@1.13.34
+
+## 0.19.0
+
+### Minor Changes
+
+- 9c61c69a7: chore(dashboard):add postgres 14.6-20230705-1 to the version selector
+
+### Patch Changes
+
+- 47bda15ff: feat(settings): add warning to pull config
+
+## 0.18.0
+
+### Minor Changes
+
+- ee0b9b8ed: chore(dashboard):add hasura v2.28.2 and v2.29.0 to the version selector
+
+## 0.17.20
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.31
+- @nhost/nextjs@1.13.33
+
+## 0.17.19
+
+### Patch Changes
+
+- f866120a6: fix(users): use the password length from the config
+
+## 0.17.18
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.30
+- @nhost/nextjs@1.13.32
+
+## 0.17.17
+
+### Patch Changes
+
+- ea7b102c0: fix(pat): highlight expired tokens
+
+## 0.17.16
+
+### Patch Changes
+
+- b3b64a3b7: chore(deps): bump `@types/react` to `v18.2.14` and `@types/react-dom` to `v18.2.6`
+- 32b221f94: chore(deps): bump `graphiql` to `v3`
+- 3a56c12df: chore(deps): bump `turbo` to `v1.10.6`
+- Updated dependencies [b3b64a3b7]
+  - @nhost/react-apollo@5.0.29
+  - @nhost/nextjs@1.13.31
+
+## 0.17.15
+
+### Patch Changes
+
+- f41fdc12a: chore(deps): bump `turbo` to `1.10.5`
+- 6199c1c55: fix(projects): don't redirect to 404 page
+- Updated dependencies [07a45fde0]
+  - @nhost/react-apollo@5.0.28
+  - @nhost/nextjs@1.13.30
+
+## 0.17.14
+
+### Patch Changes
+
+- 80b22724d: chore(deps): bump `@types/react` to `v18.2.13`, `@types/react-dom` to `v18.2.6` and `@storybook/testing-library` to `v0.2.0`
+
+## 0.17.13
+
+### Patch Changes
+
+- cc02902cb: chore(docs): update environment variable documentation
+
+## 0.17.12
+
+### Patch Changes
+
+- 660d339e1: fix(storybook): don't break storybook
+- 660d339e1: fix(tests): prevent warnings during tests
+  - @nhost/react-apollo@5.0.27
+  - @nhost/nextjs@1.13.29
+
+## 0.17.11
+
+### Patch Changes
+
+- bd4d0c270: chore(dashboard):add postgres 14.6-20230613-1 to the version selector
+
+## 0.17.10
+
+### Patch Changes
+
+- c8c2a10b2: fix(database): don't break the password reset flow
+- e70b45498: chore(deps): bump `@types/react` to `v18.2.12` and `@types/react-dom` to `v18.2.5`
+
+## 0.17.9
+
+### Patch Changes
+
+- 842055099: chore(deps): bump `turbo` to `v1.10.3` and `pnpm` to `v8.6.2`
+- fd12aa0a8: chore(projects): remove the postgres password input from the project creation screen
+- 022b76e78: chore(deps): bump `@types/react` to `v18.2.11`
+- 3555ab2b7: chore(deps): bump `vitest` monorepo to `v0.32.0`
+- c43e54922: feat(backups): add download button to backups
+
 ## 0.17.8
 
 ### Patch Changes

dashboard/Dockerfile

@@ -3,7 +3,7 @@ RUN apk add --no-cache libc6-compat
 RUN apk update
 WORKDIR /app
 
-RUN yarn global add turbo@1.10.1
+RUN yarn global add turbo@1.10.6
 COPY . .
 RUN turbo prune --scope="@nhost/dashboard" --docker
 
@@ -29,7 +29,7 @@ ENV NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL __NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL_
 ENV NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL __NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL__
 ENV NEXT_PUBLIC_NHOST_HASURA_API_URL __NEXT_PUBLIC_NHOST_HASURA_API_URL__
 
-RUN yarn global add pnpm@8.5.1
+RUN yarn global add pnpm@8.6.2
 COPY .gitignore .gitignore
 COPY --from=pruner /app/out/json/ .
 COPY --from=pruner /app/out/pnpm-*.yaml .

dashboard/README.md

@@ -3,10 +3,26 @@
 This is the Nhost Dashboard, a web application that allows you to manage your Nhost projects.
 To get started, you need to have an Nhost project. If you don't have one, you can [create a project here](https://app.nhost.io).
 
+First, install the dependencies:
+
 ```bash
 pnpm install
 ```
 
+Then, build the packages that are used by the Nhost Dashboard:
+
+```bash
+pnpm -w build
+```
+
+Finally, run the development server:
+
+```bash
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) to see the result in your browser.
+
 ## Environment
 
 ### Setup Environment Variables
@@ -54,6 +70,12 @@ Components are documented using [Storybook](https://storybook.js.org/). To run S
 pnpm storybook
 ```
 
+By default, Storybook will run on port `6006`. You can change this by passing the `--port` flag:
+
+```bash
+pnpm storybook --port 6007
+```
+
 ### General Environment Variables
 
 | Name                             | Description                                                                                                                                                                                                          |
@@ -110,15 +132,19 @@ pnpm storybook
 | `@typescript-eslint/naming-convention`       | Enforces a consistent naming convention.                                                                                                                     |
 | `no-restricted-imports`                      | Enforces absolute imports and consistent import paths for components from `src/components/ui` folder.                                                        |
 
-### End-to-End Tests
+### Unit Tests
 
-End-to-end tests are written using [Playwright](https://playwright.dev/). To run the tests, run the following command:
+Unit tests are written using [Vitest](https://vitest.dev/). To run the tests, run the following command:
 
 ```bash
-pnpm e2e
+pnpm test
 ```
 
-Most of the tests require access to the Nhost test user. To run these tests, you need to set the following environment variables in `.env.test`:
+### End-to-End Tests
+
+Most of the end-to-end tests require access to an Nhost test user and a live project. You can register a user and create a test project on the [Nhost Dashboard](https://app.nhost.io/).
+
+Next, you need to create a project. Create a `.env.test` file with the following variables:
 
 ```
 NHOST_TEST_DASHBOARD_URL=<test_dashboard_url>
@@ -128,3 +154,20 @@ NHOST_TEST_WORKSPACE_NAME=<test_workspace_name>
 NHOST_TEST_PROJECT_NAME=<test_project_name>
 NHOST_TEST_PROJECT_ADMIN_SECRET=<test_project_admin_secret>
 ```
+
+**Required Variables**:
+
+- `NHOST_TEST_DASHBOARD_URL`: The URL to run the tests against (e.g: http://localhost:3000 or https://staging.app.nhost.io)
+- `NHOST_TEST_USER_EMAIL`: Email address of the test user that owns the test project
+- `NHOST_TEST_USER_PASSWORD`: Password of the test user that owns the test project
+- `NHOST_TEST_WORKSPACE_NAME`: Name of the workspace that contains the test project
+- `NHOST_TEST_PROJECT_NAME`: Name of the test project
+- `NHOST_TEST_PROJECT_ADMIN_SECRET`: Admin secret of the test project
+
+Make sure to copy the workspace and project information from the [Nhost Dashboard](https://app.nhost.io/).
+
+End-to-end tests are written using [Playwright](https://playwright.dev/). To run the tests, run the following command:
+
+```bash
+pnpm e2e
+```

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.17.8",
+  "version": "0.19.1",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -11,11 +11,11 @@
     "lint": "next lint --max-warnings 0",
     "test": "vitest",
     "codegen": "graphql-codegen --config graphql.config.yaml --errors-only",
-    "nhost:dev": "nhost up",
     "format": "prettier --write \"src/**/*.{js,ts,tsx,jsx,json,md}\" --plugin-search-dir=.",
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook",
-    "e2e": "npx playwright@1.34.0 install --with-deps && playwright test"
+    "install-browsers": "pnpm dlx playwright@1.31.0 install --with-deps",
+    "e2e": "pnpm install-browsers && pnpm dlx playwright@1.31.0 test"
   },
   "dependencies": {
     "@apollo/client": "^3.7.10",
@@ -26,7 +26,7 @@
     "@emotion/styled": "^11.10.5",
     "@fontsource/inter": "^5.0.0",
     "@fontsource/roboto-mono": "^5.0.0",
-    "@graphiql/react": "^0.17.0",
+    "@graphiql/react": "^0.18.0",
     "@graphiql/toolkit": "^0.8.2",
     "@headlessui/react": "^1.6.5",
     "@heroicons/react": "^1.0.6",
@@ -49,7 +49,7 @@
     "clsx": "^1.2.1",
     "date-fns": "^2.29.3",
     "generate-password": "^1.7.0",
-    "graphiql": "^2.4.0",
+    "graphiql": "^3.0.0",
     "graphql": "^16.6.0",
     "graphql-request": "^6.0.0",
     "graphql-tag": "^2.12.6",
@@ -87,7 +87,7 @@
     "@graphql-codegen/typescript-operations": "^3.0.0",
     "@graphql-codegen/typescript-react-apollo": "^3.3.1",
     "@next/bundle-analyzer": "^12.3.1",
-    "@playwright/test": "^1.34.0",
+    "@playwright/test": "1.31.0",
     "@storybook/addon-actions": "^6.5.14",
     "@storybook/addon-essentials": "^6.5.14",
     "@storybook/addon-interactions": "^6.5.14",
@@ -96,23 +96,24 @@
     "@storybook/builder-webpack5": "^6.5.14",
     "@storybook/manager-webpack5": "^6.5.14",
     "@storybook/react": "^6.5.14",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/testing-library": "^0.2.0",
     "@testing-library/dom": "^9.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
+    "@types/bcryptjs": "^2.4.2",
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^16.11.7",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "18.2.8",
-    "@types/react-dom": "18.2.4",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
     "@types/react-table": "^7.7.12",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@types/validator": "^13.7.10",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",
     "@vitejs/plugin-react": "^4.0.0",
-    "@vitest/coverage-c8": "^0.31.0",
+    "@vitest/coverage-v8": "^0.32.0",
     "autoprefixer": "^10.4.13",
     "babel-loader": "^8.3.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
@@ -146,7 +147,7 @@
     "tsconfig-paths-webpack-plugin": "^4.0.0",
     "vite": "^4.0.2",
     "vite-tsconfig-paths": "^4.0.3",
-    "vitest": "^0.31.0"
+    "vitest": "^0.32.0"
   },
   "browserslist": {
     "production": [

dashboard/src/components/layout/SettingsLayout/SettingsLayout.tsx

@@ -3,7 +3,10 @@ import { ProjectLayout } from '@/components/layout/ProjectLayout';
 import type { SettingsSidebarProps } from '@/components/layout/SettingsSidebar';
 import { SettingsSidebar } from '@/components/layout/SettingsSidebar';
 import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
+import { Alert } from '@/components/ui/v2/Alert';
 import { Box } from '@/components/ui/v2/Box';
+import { Text } from '@/components/ui/v2/Text';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import { twMerge } from 'tailwind-merge';
 
 export interface SettingsLayoutProps extends ProjectLayoutProps {
@@ -22,6 +25,9 @@ export default function SettingsLayout({
   sidebarProps: { className: sidebarClassName, ...sidebarProps } = {},
   ...props
 }: SettingsLayoutProps) {
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const hasGitRepo = !!currentProject?.githubRepository;
+
   return (
     <ProjectLayout
       mainContainerProps={{
@@ -37,9 +43,39 @@ export default function SettingsLayout({
 
       <Box
         sx={{ backgroundColor: 'background.default' }}
-        className="flex w-full flex-auto flex-col overflow-x-hidden"
+        className="flex w-full flex-auto flex-col overflow-scroll overflow-x-hidden"
       >
-        <RetryableErrorBoundary>{children}</RetryableErrorBoundary>
+        <RetryableErrorBoundary>
+          {hasGitRepo && (
+            <Alert
+              severity="warning"
+              className="grid grid-flow-row place-content-center gap-2"
+            >
+              <Text color="warning" className="text-sm ">
+                As you have a connected repository, make sure to synchronize
+                your changes with{' '}
+                <code className="rounded-md bg-slate-200 px-2 py-px text-slate-500">
+                  nhost config pull
+                </code>{' '}
+                or they may be reverted with the next push.
+                <br />
+                If there are multiple projects linked to the same repository and
+                you only want these changes to apply to a subset of them, please
+                check out{' '}
+                <a
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline"
+                  href="https://docs.nhost.io/cli/overlays"
+                >
+                  docs.nhost.io/cli/overlays
+                </a>{' '}
+                for guidance.
+              </Text>
+            </Alert>
+          )}
+          {children}
+        </RetryableErrorBoundary>
       </Box>
     </ProjectLayout>
   );

dashboard/src/components/layout/SettingsSidebar/SettingsSidebar.tsx

@@ -7,7 +7,6 @@ import { List } from '@/components/ui/v2/List';
 import type { ListItemButtonProps } from '@/components/ui/v2/ListItem';
 import { ListItem } from '@/components/ui/v2/ListItem';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
-import { isK8SPostgresEnabledInCurrentEnvironment } from '@/utils/helpers';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
@@ -135,15 +134,13 @@ export default function SettingsSidebar({
             >
               Compute Resources
             </SettingsNavLink>
-            {isK8SPostgresEnabledInCurrentEnvironment && (
-              <SettingsNavLink
-                href="/database"
-                exact={false}
-                onClick={handleSelect}
-              >
-                Database
-              </SettingsNavLink>
-            )}
+            <SettingsNavLink
+              href="/database"
+              exact={false}
+              onClick={handleSelect}
+            >
+              Database
+            </SettingsNavLink>
             <SettingsNavLink
               href="/hasura"
               exact={false}

dashboard/src/components/ui/v2/Alert/Alert.tsx

@@ -1,6 +1,6 @@
 import type { BoxProps } from '@/components/ui/v2/Box';
 import { Box } from '@/components/ui/v2/Box';
-import { twMerge } from 'tailwind-merge';
+import { styled } from '@mui/material';
 
 export interface AlertProps extends BoxProps {
   /**
@@ -11,19 +11,25 @@ export interface AlertProps extends BoxProps {
   severity?: 'info' | 'success' | 'warning' | 'error';
 }
 
+const StyledBox = styled(Box)(({ theme }) => ({
+  borderRadius: 4,
+  padding: theme.spacing(1.5, 2),
+  textAlign: 'center',
+  fontSize: theme.typography.pxToRem(15),
+  lineHeight: theme.typography.pxToRem(22),
+  '@media (prefers-reduced-motion: no-preference)': {
+    transition: theme.transitions.create('background-color'),
+  },
+}));
+
 export default function Alert({
   severity = 'info',
   children,
-  className,
   sx,
   ...props
 }: AlertProps) {
   return (
-    <Box
-      className={twMerge(
-        'rounded-sm+ bg-opacity-20 p-4 text-center text-sm+ motion-safe:transition-colors',
-        className,
-      )}
+    <StyledBox
       sx={[
         ...(Array.isArray(sx) ? sx : [sx]),
         severity === 'error' && {
@@ -43,6 +49,6 @@ export default function Alert({
       {...props}
     >
       {children}
-    </Box>
+    </StyledBox>
   );
 }

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

@@ -1,11 +1,18 @@
-import { styled } from '@mui/material';
+import { textClasses } from '@/components/ui/v2/Text';
+import { getTypographyUtilityClass, styled } from '@mui/material';
 import type { ListItemTextProps as MaterialListItemTextProps } from '@mui/material/ListItemText';
 import MaterialListItemText, {
-  listItemTextClasses,
+  listItemTextClasses as materialListItemTextClasses,
 } from '@mui/material/ListItemText';
+import clsx from 'clsx';
 
 export interface ListItemTextProps extends MaterialListItemTextProps {}
 
+const listItemTextClasses = {
+  ...materialListItemTextClasses,
+  warning: getTypographyUtilityClass('colorWarning'),
+};
+
 const StyledListItemText = styled(MaterialListItemText)(({ theme }) => ({
   color: theme.palette.text.primary,
   display: 'grid',
@@ -16,6 +23,9 @@ const StyledListItemText = styled(MaterialListItemText)(({ theme }) => ({
   [`&.${listItemTextClasses.root}`]: {
     margin: 0,
   },
+  [`&.${listItemTextClasses.warning}`]: {
+    color: theme.palette.warning.dark,
+  },
   [`& > .${listItemTextClasses.primary}`]: {
     fontWeight: 500,
     textOverflow: 'ellipsis',
@@ -29,8 +39,23 @@ const StyledListItemText = styled(MaterialListItemText)(({ theme }) => ({
   },
 }));
 
-function ListItemText({ children, ...props }: ListItemTextProps) {
-  return <StyledListItemText {...props}>{children}</StyledListItemText>;
+function ListItemText({
+  children,
+  color = 'primary',
+  className,
+  ...props
+}: ListItemTextProps) {
+  return (
+    <StyledListItemText
+      className={clsx(
+        color === 'warning' && textClasses.colorWarning,
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </StyledListItemText>
+  );
 }
 
 ListItemText.displayName = 'NhostListItemText';

dashboard/src/components/ui/v2/Text/Text.tsx

@@ -18,7 +18,7 @@ export type TextProps<
    *
    * @default 'primary'
    */
-  color?: 'primary' | 'secondary' | 'disabled' | 'error';
+  color?: 'primary' | 'secondary' | 'disabled' | 'error' | 'warning';
   /**
    * The component used for the root node.
    */
@@ -31,6 +31,7 @@ const textClasses = {
   colorSecondary: getTypographyUtilityClass('colorSecondary'),
   colorDisabled: getTypographyUtilityClass('colorDisabled'),
   colorError: getTypographyUtilityClass('colorError'),
+  colorWarning: getTypographyUtilityClass('colorWarning'),
 };
 
 const StyledTypography = styled(MaterialTypography)<TextProps>(({ theme }) => ({
@@ -50,6 +51,9 @@ const StyledTypography = styled(MaterialTypography)<TextProps>(({ theme }) => ({
   [`&.${textClasses.colorError}`]: {
     color: theme.palette.error.main,
   },
+  [`&.${textClasses.colorWarning}`]: {
+    color: theme.palette.warning.dark,
+  },
 }));
 
 function Text<
@@ -70,6 +74,7 @@ function Text<
         color === 'secondary' && textClasses.colorSecondary,
         color === 'disabled' && textClasses.colorDisabled,
         color === 'error' && textClasses.colorError,
+        color === 'warning' && textClasses.colorWarning,
         className,
       )}
       {...props}

dashboard/src/components/ui/v2/icons/WarningIcon/WarningIcon.tsx

@@ -0,0 +1,40 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+import { SvgIcon } from '@/components/ui/v2/icons/SvgIcon';
+import type { ForwardedRef } from 'react';
+import { forwardRef } from 'react';
+
+function WarningIcon(props: IconProps, ref: ForwardedRef<SVGSVGElement>) {
+  return (
+    <SvgIcon
+      width="16"
+      height="16"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      aria-label="Warning"
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M8 5.5V9.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.135 2.49904L1.63648 11.9986C1.5485 12.1506 1.5021 12.3231 1.50195 12.4987C1.50181 12.6743 1.54792 12.8469 1.63565 12.999C1.72338 13.1512 1.84964 13.2776 2.00172 13.3654C2.15379 13.4533 2.32633 13.4995 2.50196 13.4995H13.499C13.6746 13.4995 13.8472 13.4533 13.9992 13.3654C14.1513 13.2776 14.2776 13.1512 14.3653 12.999C14.453 12.8469 14.4991 12.6743 14.499 12.4987C14.4988 12.3231 14.4524 12.1506 14.3645 11.9986L8.86594 2.49904C8.7781 2.34728 8.6519 2.22129 8.49999 2.1337C8.34809 2.04611 8.17582 2 8.00047 2C7.82512 2 7.65285 2.04611 7.50095 2.1337C7.34904 2.22129 7.22284 2.34728 7.135 2.49904V2.49904Z"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8 12C8.41421 12 8.75 11.6642 8.75 11.25C8.75 10.8358 8.41421 10.5 8 10.5C7.58579 10.5 7.25 10.8358 7.25 11.25C7.25 11.6642 7.58579 12 8 12Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+}
+
+WarningIcon.displayName = 'NhostWarningIcon';
+
+export default forwardRef(WarningIcon);

dashboard/src/components/ui/v2/icons/WarningIcon/index.ts

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

dashboard/src/data/features.json

@@ -1,5 +0,0 @@
-{
-  "k8s-postgres": {
-    "enabled": ["dev", "staging", "production"]
-  }
-}

dashboard/src/features/account/settings/components/PATSettings/PATSettings.tsx

@@ -9,9 +9,11 @@ import { Dropdown } from '@/components/ui/v2/Dropdown';
 import { IconButton } from '@/components/ui/v2/IconButton';
 import { DotsVerticalIcon } from '@/components/ui/v2/icons/DotsVerticalIcon';
 import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
+import { WarningIcon } from '@/components/ui/v2/icons/WarningIcon';
 import { List } from '@/components/ui/v2/List';
 import { ListItem } from '@/components/ui/v2/ListItem';
 import { Text } from '@/components/ui/v2/Text';
+import { Tooltip } from '@/components/ui/v2/Tooltip';
 import { CreatePATForm } from '@/features/account/settings/components/CreatePATForm';
 import { getToastStyleProps } from '@/utils/constants/settings';
 import { getServerError } from '@/utils/getServerError';
@@ -133,69 +135,91 @@ export default function PATSettings() {
       <Box className="grid grid-flow-row gap-2">
         {availablePersonalAccessTokens.length > 0 && (
           <List>
-            {availablePersonalAccessTokens.map((pat, index) => (
-              <Fragment key={pat.id}>
-                <ListItem.Root
-                  className="grid grid-cols-3 gap-2 px-4 pr-12"
-                  secondaryAction={
-                    <Dropdown.Root>
-                      <Dropdown.Trigger
-                        asChild
-                        hideChevron
-                        className="absolute right-4 top-1/2 -translate-y-1/2"
-                      >
-                        <IconButton
-                          variant="borderless"
-                          color="secondary"
-                          disabled={maintenanceActive}
-                          aria-label={`More options for ${pat.name}`}
+            {availablePersonalAccessTokens.map((pat, index) => {
+              const tokenHasExpired = new Date(pat.expiresAt) < new Date();
+
+              return (
+                <Fragment key={pat.id}>
+                  <ListItem.Root
+                    className="grid grid-cols-3 gap-2 px-4 pr-12"
+                    secondaryAction={
+                      <Dropdown.Root>
+                        <Dropdown.Trigger
+                          asChild
+                          hideChevron
+                          className="absolute right-4 top-1/2 -translate-y-1/2"
                         >
-                          <DotsVerticalIcon />
-                        </IconButton>
-                      </Dropdown.Trigger>
+                          <IconButton
+                            variant="borderless"
+                            color="secondary"
+                            disabled={maintenanceActive}
+                            aria-label={`More options for ${pat.name}`}
+                          >
+                            <DotsVerticalIcon />
+                          </IconButton>
+                        </Dropdown.Trigger>
 
-                      <Dropdown.Content
-                        menu
-                        PaperProps={{ className: 'w-32' }}
-                        anchorOrigin={{
-                          vertical: 'bottom',
-                          horizontal: 'right',
-                        }}
-                        transformOrigin={{
-                          vertical: 'top',
-                          horizontal: 'right',
-                        }}
-                      >
-                        <Dropdown.Item onClick={() => handleConfirmDelete(pat)}>
-                          <Text className="font-medium" color="error">
-                            Delete
-                          </Text>
-                        </Dropdown.Item>
-                      </Dropdown.Content>
-                    </Dropdown.Root>
-                  }
-                >
-                  <ListItem.Text className="truncate">{pat.name}</ListItem.Text>
+                        <Dropdown.Content
+                          menu
+                          PaperProps={{ className: 'w-32' }}
+                          anchorOrigin={{
+                            vertical: 'bottom',
+                            horizontal: 'right',
+                          }}
+                          transformOrigin={{
+                            vertical: 'top',
+                            horizontal: 'right',
+                          }}
+                        >
+                          <Dropdown.Item
+                            onClick={() => handleConfirmDelete(pat)}
+                          >
+                            <Text className="font-medium" color="error">
+                              Delete
+                            </Text>
+                          </Dropdown.Item>
+                        </Dropdown.Content>
+                      </Dropdown.Root>
+                    }
+                  >
+                    <ListItem.Text
+                      className="truncate"
+                      color={tokenHasExpired ? 'warning' : 'primary'}
+                    >
+                      <span className="mr-2">{pat.name}</span>
+                      {tokenHasExpired && (
+                        <Tooltip title="This personal access token is expired.">
+                          <WarningIcon className="h-4 w-4" />
+                        </Tooltip>
+                      )}
+                    </ListItem.Text>
 
-                  <Text className="truncate">
-                    {new Date(pat.expiresAt).toLocaleDateString()}
-                  </Text>
+                    <Text
+                      className="truncate"
+                      color={tokenHasExpired ? 'warning' : 'primary'}
+                    >
+                      {new Date(pat.expiresAt).toLocaleDateString()}
+                    </Text>
 
-                  <Text className="truncate">
-                    {new Date(pat.createdAt).toLocaleDateString()}
-                  </Text>
-                </ListItem.Root>
+                    <Text
+                      className="truncate"
+                      color={tokenHasExpired ? 'warning' : 'primary'}
+                    >
+                      {new Date(pat.createdAt).toLocaleDateString()}
+                    </Text>
+                  </ListItem.Root>
 
-                <Divider
-                  component="li"
-                  className={twMerge(
-                    index === availablePersonalAccessTokens.length - 1
-                      ? '!mt-4'
-                      : '!my-4',
-                  )}
-                />
-              </Fragment>
-            ))}
+                  <Divider
+                    component="li"
+                    className={twMerge(
+                      index === availablePersonalAccessTokens.length - 1
+                        ? '!mt-4'
+                        : '!my-4',
+                    )}
+                  />
+                </Fragment>
+              );
+            })}
           </List>
         )}
 

dashboard/src/features/authentication/settings/components/WebAuthnSettings/WebAuthnSettings.tsx

@@ -66,7 +66,10 @@ export default function WebAuthnSettings() {
         config: {
           auth: {
             method: {
-              webauthn: values,
+              webauthn: {...values,
+              relyingParty: {
+                name: currentProject.name,
+              }},
             },
           },
         },

dashboard/src/features/authentication/users/components/EditUserPasswordForm/EditUserPasswordForm.tsx

@@ -3,12 +3,16 @@ import { Form } from '@/components/form/Form';
 import { Alert } from '@/components/ui/v2/Alert';
 import { Button } from '@/components/ui/v2/Button';
 import { Input } from '@/components/ui/v2/Input';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import { useRemoteApplicationGQLClient } from '@/hooks/useRemoteApplicationGQLClient';
 import type { DialogFormProps } from '@/types/common';
 import { getToastStyleProps } from '@/utils/constants/settings';
 import { getServerError } from '@/utils/getServerError';
 import type { RemoteAppGetUsersQuery } from '@/utils/__generated__/graphql';
-import { useUpdateRemoteAppUserMutation } from '@/utils/__generated__/graphql';
+import {
+  useGetSignInMethodsQuery,
+  useUpdateRemoteAppUserMutation,
+} from '@/utils/__generated__/graphql';
 import { yupResolver } from '@hookform/resolvers/yup';
 import bcrypt from 'bcryptjs';
 import { useState } from 'react';
@@ -27,19 +31,6 @@ export interface EditUserPasswordFormProps extends DialogFormProps {
   user: RemoteAppGetUsersQuery['users'][0];
 }
 
-export const validationSchema = Yup.object({
-  password: Yup.string()
-    .label('Users Password')
-    .min(8, 'Password must be at least 8 characters long.')
-    .required('This field is required.'),
-  cpassword: Yup.string()
-    .required('Confirm Password is required')
-    .min(8, 'Password must be at least 8 characters long.')
-    .oneOf([Yup.ref('password')], 'Passwords do not match'),
-});
-
-export type EditUserPasswordFormValues = Yup.InferType<typeof validationSchema>;
-
 export default function EditUserPasswordForm({
   onCancel,
   user,
@@ -49,26 +40,52 @@ export default function EditUserPasswordForm({
     client: remoteProjectGQLClient,
   });
   const { closeDialog } = useDialog();
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const { data } = useGetSignInMethodsQuery({
+    variables: { appId: currentProject?.id },
+    skip: !currentProject?.id,
+  });
+
+  const passwordMinLength =
+    data?.config?.auth?.method?.emailPassword?.passwordMinLength || 1;
+
+  const validationSchema = Yup.object({
+    password: Yup.string()
+      .label('Password')
+      .min(
+        passwordMinLength,
+        `Password must be at least ${passwordMinLength} characters long.`,
+      )
+      .required('This field is required.'),
+    cpassword: Yup.string()
+      .label('Password Confirmation')
+      .min(
+        passwordMinLength,
+        `Password must be at least ${passwordMinLength} characters long.`,
+      )
+      .oneOf([Yup.ref('password')], 'Passwords do not match')
+      .required('This field is required.'),
+  });
 
   const [editUserPasswordFormError, setEditUserPasswordFormError] =
     useState<Error | null>(null);
 
-  const form = useForm<EditUserPasswordFormValues>({
+  const form = useForm<Yup.InferType<typeof validationSchema>>({
     defaultValues: {},
     reValidateMode: 'onSubmit',
     resolver: yupResolver(validationSchema),
   });
 
-  const handleSubmit = async ({ password }: EditUserPasswordFormValues) => {
+  const handleSubmit = async ({
+    password,
+  }: Yup.InferType<typeof validationSchema>) => {
     setEditUserPasswordFormError(null);
     const passwordHash = await bcrypt.hash(password, 10);
 
     const updateUserPasswordPromise = updateUser({
       variables: {
         id: user.id,
-        user: {
-          passwordHash,
-        },
+        user: { passwordHash },
       },
       client: remoteProjectGQLClient,
     });

dashboard/src/features/database/dataGrid/components/ColumnAutocomplete/ColumnAutocomplete.stories.tsx

@@ -3,6 +3,7 @@ import { Button } from '@/components/ui/v2/Button';
 import { Text } from '@/components/ui/v2/Text';
 import hasuraMetadataQuery from '@/tests/msw/mocks/rest/hasuraMetadataQuery';
 import tableQuery from '@/tests/msw/mocks/rest/tableQuery';
+import tokenQuery from '@/tests/msw/mocks/rest/tokenQuery';
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
@@ -34,7 +35,7 @@ const defaultParameters = {
     },
   },
   msw: {
-    handlers: [tableQuery, hasuraMetadataQuery],
+    handlers: [tokenQuery, tableQuery, hasuraMetadataQuery],
   },
 };
 

dashboard/src/features/database/dataGrid/hooks/useTableQuery/fetchTable.ts

@@ -187,11 +187,11 @@ export default async function fetchTable({
       const queryError = responseData as QueryError;
       const schemaNotFound =
         POSTGRESQL_ERROR_CODES.SCHEMA_NOT_FOUND ===
-        queryError.internal.error.status_code;
+        queryError.internal?.error?.status_code;
 
       const tableNotFound =
         POSTGRESQL_ERROR_CODES.TABLE_NOT_FOUND ===
-        queryError.internal.error.status_code;
+        queryError.internal?.error?.status_code;
 
       if (schemaNotFound || tableNotFound) {
         return {
@@ -203,7 +203,7 @@ export default async function fetchTable({
       }
 
       if (
-        queryError.internal.error.status_code ===
+        queryError.internal?.error?.status_code ===
         POSTGRESQL_ERROR_CODES.COLUMNS_NOT_FOUND
       ) {
         return {
@@ -214,7 +214,7 @@ export default async function fetchTable({
         };
       }
 
-      throw new Error(queryError.internal.error.message);
+      throw new Error(queryError.internal?.error?.message);
     }
 
     if ('error' in responseData) {

dashboard/src/features/database/settings/components/DatabaseConnectionInfo/DatabaseConnectionInfo.tsx

@@ -1,5 +1,6 @@
 import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { Alert } from '@/components/ui/v2/Alert';
 import { Button } from '@/components/ui/v2/Button';
 import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
 import type { InputProps } from '@/components/ui/v2/Input';
@@ -91,28 +92,33 @@ export default function DatabaseConnectionInfo() {
             disabled
             value={inputValue}
             className={className}
+            slotProps={{ inputRoot: { className: '!pr-8 truncate' } }}
             fullWidth
             hideEmptyHelperText
             endAdornment={
-              name !== 'postgresPassword' && (
-                <InputAdornment position="end" className="absolute right-2">
-                  <Button
-                    sx={{ minWidth: 0, padding: 0 }}
-                    color="secondary"
-                    variant="borderless"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      copy(inputValue as string, `${label}`);
-                    }}
-                  >
-                    <CopyIcon className="h-4 w-4" />
-                  </Button>
-                </InputAdornment>
-              )
+              <InputAdornment position="end" className="absolute right-2">
+                <Button
+                  sx={{ minWidth: 0, padding: 0 }}
+                  color="secondary"
+                  variant="borderless"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    copy(inputValue as string, `${label}`);
+                  }}
+                >
+                  <CopyIcon className="h-4 w-4" />
+                </Button>
+              </InputAdornment>
             }
           />
         ),
       )}
+
+      <Alert severity="info" className="col-span-6 text-left">
+        To connect to the Postgres database directly, generate a new password,
+        securely save it, and then modify your connection string with the newly
+        created password.
+      </Alert>
     </SettingsContainer>
   );
 }

dashboard/src/features/database/settings/components/DatabaseServiceVersionSettings/DatabaseServiceVersionSettings.tsx

@@ -31,6 +31,8 @@ export type DatabaseServiceVersionFormValues = Yup.InferType<
 >;
 
 const AVAILABLE_POSTGRES_VERSIONS = [
+  '14.6-20230705-1',
+  '14.6-20230613-1',
   '14.6-20230525',
   '14.6-20230406-2',
   '14.6-20230406-1',

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

@@ -1,3 +1,4 @@
+import { useDialog } from '@/components/common/DialogProvider';
 import { useUI } from '@/components/common/UIProvider';
 import { Form } from '@/components/form/Form';
 import { SettingsContainer } from '@/components/layout/SettingsContainer';
@@ -6,30 +7,27 @@ import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
 import { Input } from '@/components/ui/v2/Input';
 import { InputAdornment } from '@/components/ui/v2/InputAdornment';
 import { generateRandomDatabasePassword } from '@/features/database/common/utils/generateRandomDatabasePassword';
+import type { ResetDatabasePasswordFormValues } from '@/features/database/settings/utils/resetDatabasePasswordValidationSchema';
 import { resetDatabasePasswordValidationSchema } from '@/features/database/settings/utils/resetDatabasePasswordValidationSchema';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
-import {
-  useResetPostgresPasswordMutation,
-  useUpdateApplicationMutation,
-} from '@/generated/graphql';
+import { useResetDatabasePasswordMutation } from '@/generated/graphql';
+import { useLeaveConfirm } from '@/hooks/useLeaveConfirm';
 import { copy } from '@/utils/copy';
 import { discordAnnounce } from '@/utils/discordAnnounce';
 import { triggerToast } from '@/utils/toast';
 import { yupResolver } from '@hookform/resolvers/yup';
+import { alpha } from '@mui/system';
 import { useUserData } from '@nhost/nextjs';
 import { FormProvider, useForm } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
 
-export interface ResetDatabasePasswordFormValues {
-  /**
-   * The new password to set for the database.
-   */
-  databasePassword: string;
-}
-
 export default function ResetDatabasePasswordSettings() {
-  const [updateApplication] = useUpdateApplicationMutation();
+  const [resetPassword, { loading: resetPasswordLoading }] =
+    useResetDatabasePasswordMutation();
   const { maintenanceActive } = useUI();
+  const user = useUserData();
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const { openAlertDialog } = useDialog();
 
   const form = useForm<ResetDatabasePasswordFormValues>({
     reValidateMode: 'onSubmit',
@@ -46,41 +44,36 @@ export default function ResetDatabasePasswordSettings() {
     setValue,
     getValues,
     register,
-    formState: { errors, isDirty, isSubmitting },
+    formState: { errors, dirtyFields, isSubmitting },
   } = form;
 
-  const [resetPostgresPasswordMutation] = useResetPostgresPasswordMutation();
-  const user = useUserData();
-  const { currentProject } = useCurrentWorkspaceAndProject();
+  const isDirty = Object.keys(dirtyFields).length > 0;
 
-  const handleGenerateRandomPassword = () => {
+  useLeaveConfirm({ isDirty });
+
+  function handleGenerateRandomPassword() {
     const newRandomDatabasePassword = generateRandomDatabasePassword();
-    triggerToast('New random database password generated.');
+    triggerToast(
+      'Random database password was generated and copied to clipboard. Submit the form to save it.',
+    );
+    copy(newRandomDatabasePassword);
     setValue('databasePassword', newRandomDatabasePassword, {
       shouldDirty: true,
     });
-  };
+  }
 
-  const handleChangeDatabasePassword = async (
-    values: ResetDatabasePasswordFormValues,
-  ) => {
+  async function handleChangeDatabasePassword(
+    formValues: ResetDatabasePasswordFormValues,
+  ) {
     try {
-      await resetPostgresPasswordMutation({
-        variables: {
-          appID: currentProject.id,
-          newPassword: values.databasePassword,
-        },
-      });
-      await updateApplication({
+      await resetPassword({
         variables: {
           appId: currentProject.id,
-          app: {
-            postgresPassword: values.databasePassword,
-          },
+          newPassword: formValues.databasePassword,
         },
       });
 
-      form.reset(values);
+      form.reset(formValues);
 
       triggerToast(
         `The database password for ${currentProject.name} has been updated successfully.`,
@@ -93,24 +86,45 @@ export default function ResetDatabasePasswordSettings() {
         `An error occurred while trying to update the database password: ${currentProject.name} (${user.email}): ${e.message}`,
       );
     }
-  };
+  }
+
+  function handleSubmit(formValues: ResetDatabasePasswordFormValues) {
+    openAlertDialog({
+      title: 'Confirm Change',
+      payload: 'Are you sure you want to change the database password?',
+      props: {
+        primaryButtonColor: 'error',
+        primaryButtonText: 'Confirm',
+        onPrimaryAction: () => handleChangeDatabasePassword(formValues),
+      },
+    });
+  }
 
   return (
     <FormProvider {...form}>
-      <Form onSubmit={handleChangeDatabasePassword}>
+      <Form onSubmit={handleSubmit}>
         <SettingsContainer
           title="Reset Password"
-          description="This password is used for accessing your database."
-          submitButtonText="Reset"
+          description="This password will be used for accessing your database."
+          submitButtonText="Save"
           slotProps={{
             root: {
-              sx: { borderColor: (theme) => theme.palette.error.main },
+              sx: {
+                borderColor: (theme) =>
+                  isDirty
+                    ? theme.palette.error.main
+                    : alpha(theme.palette.error.main, 0.5),
+                '@media (prefers-reduced-motion: no-preference)': {
+                  transition: (theme) =>
+                    theme.transitions.create('border-color'),
+                },
+              },
             },
             submitButton: {
-              variant: 'contained',
-              color: 'error',
+              variant: isDirty ? 'contained' : 'outlined',
+              color: isDirty ? 'error' : 'secondary',
               disabled: !isDirty || maintenanceActive,
-              loading: isSubmitting,
+              loading: isSubmitting || resetPasswordLoading,
             },
           }}
           className="grid grid-flow-row pb-4"
@@ -126,6 +140,7 @@ export default function ResetDatabasePasswordSettings() {
             hideEmptyHelperText
             slotProps={{
               input: { className: 'lg:w-1/2' },
+              inputRoot: { className: '!pr-8' },
               helperText: { component: 'div' },
             }}
             helperText={

dashboard/src/features/database/settings/components/ResetDatabasePasswordSettings/index.ts

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

dashboard/src/features/database/settings/gql/resetDatabasePassword.gql

@@ -0,0 +1,3 @@
+mutation ResetDatabasePassword($appId: String!, $newPassword: String!) {
+  resetPostgresPassword(appID: $appId, newPassword: $newPassword)
+}

dashboard/src/features/database/settings/utils/resetDatabasePasswordValidationSchema/resetDatabasePasswordValidationSchema.ts

@@ -16,4 +16,8 @@ export const resetDatabasePasswordValidationSchema = yup.object().shape({
     .minUppercase(1),
 });
 
+export type ResetDatabasePasswordFormValues = yup.InferType<
+  typeof resetDatabasePasswordValidationSchema
+>;
+
 export default resetDatabasePasswordValidationSchema;

dashboard/src/features/hasura/settings/components/HasuraCorsDomainSettings/HasuraCorsDomainSettings.test.tsx

@@ -1,3 +1,4 @@
+import tokenQuery from '@/tests/msw/mocks/rest/tokenQuery';
 import { render, screen, waitFor } from '@/tests/testUtils';
 import { graphql } from 'msw';
 import { setupServer } from 'msw/node';
@@ -5,6 +6,7 @@ import { beforeAll, expect, test } from 'vitest';
 import HasuraCorsDomainSettings from './HasuraCorsDomainSettings';
 
 const server = setupServer(
+  tokenQuery,
   graphql.query('GetHasuraSettings', (_req, res, ctx) =>
     res(
       ctx.data({
@@ -15,7 +17,14 @@ const server = setupServer(
             version: 'v2.25.1-ce',
             settings: {
               corsDomain: ['*'],
+              enableAllowList: false,
+              enableRemoteSchemaPermissions: false,
+              enableConsole: false,
+              devMode: false,
+              enabledAPIs: [],
             },
+            logs: [],
+            events: [],
           },
         },
       }),
@@ -56,7 +65,14 @@ test('should enable switch by default when CORS domain is set to one or more dom
               version: 'v2.25.1-ce',
               settings: {
                 corsDomain: ['https://example.com', 'https://*.example.com'],
+                enableAllowList: false,
+                enableRemoteSchemaPermissions: false,
+                enableConsole: false,
+                devMode: false,
+                enabledAPIs: [],
               },
+              logs: [],
+              events: [],
             },
           },
         }),

dashboard/src/features/hasura/settings/components/HasuraServiceVersionSettings/HasuraServiceVersionSettings.tsx

@@ -31,6 +31,9 @@ export type HasuraServiceVersionFormValues = Yup.InferType<
 >;
 
 const AVAILABLE_HASURA_VERSIONS = [
+  'v2.29.0-ce',
+  'v2.28.2-ce',
+  'v2.27.0-ce',
   'v2.25.1-ce',
   'v2.25.0-ce',
   'v2.24.1-ce',

dashboard/src/features/projects/backups/components/BackupList/BackupList.tsx

@@ -0,0 +1,72 @@
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { Table } from '@/components/ui/v2/Table';
+import { TableBody } from '@/components/ui/v2/TableBody';
+import { TableCell } from '@/components/ui/v2/TableCell';
+import { TableContainer } from '@/components/ui/v2/TableContainer';
+import { TableHead } from '@/components/ui/v2/TableHead';
+import { TableRow } from '@/components/ui/v2/TableRow';
+import { Text } from '@/components/ui/v2/Text';
+import { BackupListItem } from '@/features/projects/backups/components/BackupListItem';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useGetApplicationBackupsQuery } from '@/utils/__generated__/graphql';
+
+export default function BackupList() {
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const { data, loading, error } = useGetApplicationBackupsQuery({
+    variables: { appId: currentProject.id },
+  });
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        delay={500}
+        className="my-5"
+        label="Loading backups..."
+      />
+    );
+  }
+
+  if (error) {
+    throw error;
+  }
+
+  const { backups } = data.app;
+
+  return (
+    <TableContainer sx={{ backgroundColor: 'background.paper' }}>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Date</TableCell>
+            <TableCell>Size</TableCell>
+            <TableCell>Backed up</TableCell>
+            <TableCell />
+          </TableRow>
+        </TableHead>
+
+        <TableBody>
+          {backups.length === 0 && (
+            <TableRow>
+              <TableCell>
+                <Text className="text-xs" color="secondary">
+                  No backups are available.
+                </Text>
+              </TableCell>
+              <TableCell />
+              <TableCell />
+              <TableCell />
+            </TableRow>
+          )}
+
+          {backups.map((backup) => (
+            <BackupListItem
+              key={backup.id}
+              backup={backup}
+              projectId={currentProject.id}
+            />
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}

dashboard/src/features/projects/backups/components/BackupList/index.ts

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

dashboard/src/features/projects/backups/components/BackupListItem/BackupListItem.tsx

@@ -0,0 +1,94 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import { Button } from '@/components/ui/v2/Button';
+import { TableCell } from '@/components/ui/v2/TableCell';
+import { TableRow } from '@/components/ui/v2/TableRow';
+import { RestoreBackupModal } from '@/features/projects/backups/components/RestoreBackupModal';
+import type { Backup } from '@/types/application';
+import { prettifySize } from '@/utils/prettifySize';
+import { triggerToast } from '@/utils/toast';
+import { useGetBackupPresignedUrlLazyQuery } from '@/utils/__generated__/graphql';
+import { format, formatDistanceStrict, parseISO } from 'date-fns';
+import { twMerge } from 'tailwind-merge';
+
+export interface BackupListItemProps {
+  /**
+   * Project ID.
+   */
+  projectId: string;
+  /**
+   * Backup data.
+   */
+  backup: Backup;
+}
+
+export default function BackupListItem({
+  projectId,
+  backup,
+}: BackupListItemProps) {
+  const { id, createdAt, size } = backup;
+  const { openDialog, closeDialog } = useDialog();
+  const [fetchPresignedUrl, { loading: loadingPresignedUrl }] =
+    useGetBackupPresignedUrlLazyQuery({
+      variables: {
+        appId: projectId,
+        backupId: id,
+      },
+    });
+
+  async function downloadBackup() {
+    const { data: presignedUrlData, error } = await fetchPresignedUrl();
+
+    if (error) {
+      triggerToast(
+        'An error occurred while fetching the presigned URL. Please try again later.',
+      );
+
+      return;
+    }
+
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    window.open(presignedUrlData.getBackupPresignedUrl.url, '_blank');
+  }
+
+  function restoreBackup() {
+    openDialog({
+      title: 'Restore Backup',
+      component: <RestoreBackupModal backup={backup} close={closeDialog} />,
+    });
+  }
+
+  return (
+    <TableRow>
+      <TableCell className="text-xs">
+        {format(parseISO(createdAt), 'yyyy-MM-dd HH:mm:ss')}
+      </TableCell>
+      <TableCell className="text-xs">{prettifySize(size)}</TableCell>
+      <TableCell className="text-xs">
+        {formatDistanceStrict(new Date(createdAt), new Date(), {
+          addSuffix: true,
+        })}
+      </TableCell>
+      <TableCell
+        className={twMerge(
+          'grid grid-flow-col justify-end gap-2',
+          !loadingPresignedUrl && 'pl-8',
+        )}
+      >
+        <Button
+          variant="borderless"
+          onClick={downloadBackup}
+          loading={loadingPresignedUrl}
+        >
+          Download
+        </Button>
+
+        <Button variant="borderless" onClick={restoreBackup}>
+          Restore
+        </Button>
+      </TableCell>
+    </TableRow>
+  );
+}

dashboard/src/features/projects/backups/components/BackupListItem/index.ts

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

dashboard/src/features/projects/backups/components/RestoreBackupModal/RestoreBackupModal.tsx

@@ -3,38 +3,38 @@ import { Button } from '@/components/ui/v2/Button';
 import { Checkbox } from '@/components/ui/v2/Checkbox';
 import { Text } from '@/components/ui/v2/Text';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import type { Backup } from '@/types/application';
 import { triggerToast } from '@/utils/toast';
 import { useRestoreApplicationDatabaseMutation } from '@/utils/__generated__/graphql';
-import { formatISO9075 } from 'date-fns';
+import { format, parseISO } from 'date-fns';
 import { useState } from 'react';
 
-export interface RestoreBackupModalModalProps {
+export interface RestoreBackupModalProps {
   /**
    * Call this function to imperatively close the modal.
    */
-  close: any;
+  close: VoidFunction;
   /**
-   * Arbitrary data passed down to the modal.
-   *
+   * Backup data.
    */
-  data: any;
+  backup: Backup;
 }
 
 export default function RestoreBackupModal({
   close,
-  data,
-}: RestoreBackupModalModalProps) {
-  const { id: backupId, createdAt } = data;
+  backup,
+}: RestoreBackupModalProps) {
+  const { id: backupId, createdAt } = backup;
 
   const [isSure, setIsSure] = useState(false);
-  const [mutationIsCompleted, setMutationIsCompleted] = useState(false);
+  const [restoreCompleted, setRestoreCompleted] = useState(false);
   const { currentProject } = useCurrentWorkspaceAndProject();
 
   const [restoreApplicationDatabase, { loading }] =
     useRestoreApplicationDatabaseMutation();
 
-  const handleSubmit = async () => {
-    setMutationIsCompleted(false);
+  async function handleSubmit() {
+    setRestoreCompleted(false);
     try {
       await restoreApplicationDatabase({
         variables: {
@@ -43,55 +43,49 @@ export default function RestoreBackupModal({
         },
       });
     } catch (error) {
-      setMutationIsCompleted(false);
+      setRestoreCompleted(false);
       triggerToast('Database backup restoration failed');
       return;
     }
-    setMutationIsCompleted(true);
+    setRestoreCompleted(true);
     triggerToast('Database backup successfully scheduled for restoration.');
-  };
+  }
 
-  if (mutationIsCompleted) {
+  if (restoreCompleted) {
     return (
-      <Box className="w-modal rounded-lg p-6">
-        <div className="flex flex-col">
-          <Text className="text-center text-lg font-medium">
-            The backup has been restored successfully.
-          </Text>
+      <Box className="grid grid-flow-row gap-4 px-6 pb-6">
+        <Text>The backup has been restored successfully.</Text>
 
-          <Button className="mt-5" onClick={close}>
-            OK
-          </Button>
-        </div>
+        <Button onClick={close}>OK</Button>
       </Box>
     );
   }
 
   return (
-    <Box className="w-modal rounded-lg px-6 py-6 text-left">
-      <div className="flex flex-col">
-        <Text className="text-center text-lg font-medium">
-          Restore Database Backup
-        </Text>
-        <Text className="mt-2 text-center font-normal">
-          You current database will be deleted, and the backup created{' '}
-          <span className="font-semibold">
-            {formatISO9075(new Date(createdAt))}
-          </span>{' '}
-          will be restored.
-        </Text>
+    <Box className="grid grid-flow-row gap-2 px-6 pb-6">
+      <Text>
+        You current database will be deleted, and the backup created at{' '}
+        <span className="font-semibold">
+          {format(parseISO(createdAt), 'yyyy-MM-dd HH:mm:ss')}
+        </span>{' '}
+        will be restored.
+      </Text>
 
-        <Box className="my-4 border-y py-2 px-2">
-          <Checkbox
-            checked={isSure}
-            onChange={(_event, checked) => setIsSure(checked)}
-            label="I'm sure I want to restore this backup."
-          />
-        </Box>
-        <Button onClick={handleSubmit} disabled={!isSure} loading={loading}>
-          Restore
-        </Button>
-      </div>
+      <Box className="pt-1 pb-2.5">
+        <Checkbox
+          checked={isSure}
+          onChange={(_event, checked) => setIsSure(checked)}
+          label="I'm sure I want to restore this backup"
+        />
+      </Box>
+
+      <Button onClick={handleSubmit} disabled={!isSure} loading={loading}>
+        Restore
+      </Button>
+
+      <Button variant="outlined" color="secondary" onClick={close}>
+        Cancel
+      </Button>
     </Box>
   );
 }

dashboard/src/features/projects/backups/gql/backup.gql

@@ -0,0 +1,6 @@
+fragment Backup on backups {
+  id
+  size
+  createdAt
+  completedAt
+}

dashboard/src/features/projects/backups/gql/getApplicationBackups.graphql

@@ -1,10 +1,7 @@
 query getApplicationBackups($appId: uuid!) {
   app(id: $appId) {
     backups(order_by: { createdAt: desc }) {
-      id
-      size
-      createdAt
-      completedAt
+      ...Backup
     }
   }
 }

dashboard/src/features/projects/backups/gql/getBackupPresignedUrl.gql

@@ -0,0 +1,14 @@
+query GetBackupPresignedUrl(
+  $appId: String!
+  $backupId: String!
+  $expireInMinutes: Int
+) {
+  getBackupPresignedUrl: getBackupPresignedURL(
+    appID: $appId
+    backupID: $backupId
+    expireInMinutes: $expireInMinutes
+  ) {
+    url
+    expiresAt: expires_at
+  }
+}

dashboard/src/features/projects/common/components/StagingMetadata/StagingMetadata.tsx

@@ -49,7 +49,7 @@ export default function StagingMetadata({
   return (
     isDevOrStaging() && (
       <div className="mx-auto mt-10 max-w-sm">
-        <Box className="mx-auto flex flex-col rounded-md border p-5 text-center">
+        <Box className="mx-auto grid grid-flow-row justify-items-center rounded-md border p-5 text-center">
           <Status status={StatusEnum.Deploying}>Internal info</Status>
           {children}
         </Box>

dashboard/src/features/projects/common/hooks/useCurrentWorkspaceAndProject/useCurrentWorkspaceAndProject.ts

@@ -3,7 +3,7 @@ import type { Project, Workspace } from '@/types/application';
 import { ApplicationStatus } from '@/types/application';
 import { getHasuraAdminSecret } from '@/utils/env';
 import { GetWorkspaceAndProjectDocument } from '@/utils/__generated__/graphql';
-import { useNhostClient, useUserData } from '@nhost/nextjs';
+import { useAuthenticationStatus, useNhostClient } from '@nhost/nextjs';
 import type { RefetchOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
@@ -34,14 +34,24 @@ export interface UseCurrentWorkspaceAndProjectReturnType {
 
 export default function useCurrentWorkspaceAndProject(): UseCurrentWorkspaceAndProjectReturnType {
   const client = useNhostClient();
-  const user = useUserData();
   const isPlatform = useIsPlatform();
+  const { isAuthenticated, isLoading: isAuthLoading } =
+    useAuthenticationStatus();
 
   const {
     query: { workspaceSlug, appSlug },
-    isReady,
+    isReady: isRouterReady,
   } = useRouter();
 
+  const isWorkspaceSlugAvailable = Boolean(workspaceSlug);
+
+  const shouldFetchWorkspaceAndProject =
+    isPlatform &&
+    isRouterReady &&
+    isWorkspaceSlugAvailable &&
+    isAuthenticated &&
+    !isAuthLoading;
+
   // We can't use the hook exported by the codegen here because there are cases
   // where it doesn't target the Nhost backend, but the currently active project
   // instead.
@@ -59,7 +69,7 @@ export default function useCurrentWorkspaceAndProject(): UseCurrentWorkspaceAndP
       }),
     {
       keepPreviousData: true,
-      enabled: isPlatform && isReady && !!workspaceSlug && !!user,
+      enabled: shouldFetchWorkspaceAndProject,
       // multiple components are relying on this query, so we don't want to
       // refetch it too often - kind of a hack, should be improved later
       staleTime: 1000,
@@ -142,7 +152,7 @@ export default function useCurrentWorkspaceAndProject(): UseCurrentWorkspaceAndP
   return {
     currentWorkspace,
     currentProject,
-    loading: response ? false : isFetching,
+    loading: response ? false : isFetching || isAuthLoading,
     error: response?.error
       ? new Error(error?.message || 'Unknown error occurred.')
       : null,

dashboard/src/features/projects/common/utils/generateAppServiceUrl/generateAppServiceUrl.ts

@@ -1,4 +1,3 @@
-import type { ProjectFragment } from '@/utils/__generated__/graphql';
 import {
   getAuthServiceUrl,
   getDatabaseServiceUrl,
@@ -8,6 +7,7 @@ import {
   getStorageServiceUrl,
   isPlatform,
 } from '@/utils/env';
+import type { ProjectFragment } from '@/utils/__generated__/graphql';
 
 export type NhostService =
   | 'auth'

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

@@ -123,7 +123,7 @@ export default function SystemEnvironmentVariableSettings() {
   return (
     <SettingsContainer
       title="System Environment Variables"
-      description="Environment Variables are key-value pairs configured outside your source code. They are used to store environment-specific values such as API keys."
+      description="System environment variables are automatically generated from the configuration file and your project's subdomain and region."
       docsLink="https://docs.nhost.io/platform/environment-variables#system-environment-variables"
       rootClassName="gap-0"
       className="mt-2 mb-2.5 px-0"

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

@@ -1,4 +1,5 @@
 import { mockApplication, mockWorkspace } from '@/tests/mocks';
+import tokenQuery from '@/tests/msw/mocks/rest/tokenQuery';
 import { queryClient, render, screen } from '@/tests/testUtils';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
@@ -34,6 +35,7 @@ vi.mock('next/router', () => ({
 }));
 
 const server = setupServer(
+  tokenQuery,
   rest.get('https://local.graphql.nhost.run/v1', (_req, res, ctx) =>
     res(ctx.status(200)),
   ),
@@ -135,6 +137,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(
+    tokenQuery,
     rest.post('https://local.graphql.nhost.run/v1', async (_req, res, ctx) => {
       const { operationName } = await _req.json();
 
@@ -194,6 +197,7 @@ test('should render a list of deployments', async () => {
 
 test('should disable redeployments if a deployment is already in progress', async () => {
   server.use(
+    tokenQuery,
     rest.post('https://local.graphql.nhost.run/v1', async (req, res, ctx) => {
       const { operationName } = await req.json();
 

dashboard/src/features/projects/resources/settings/components/ResourcesForm/ResourcesForm.test.tsx

@@ -9,6 +9,7 @@ import {
   resourcesUpdatedQuery,
 } from '@/tests/msw/mocks/graphql/resourceSettingsQuery';
 import updateConfigMutation from '@/tests/msw/mocks/graphql/updateConfigMutation';
+import tokenQuery from '@/tests/msw/mocks/rest/tokenQuery';
 import {
   fireEvent,
   render,
@@ -35,6 +36,7 @@ vi.mock('next/router', () => ({
 }));
 
 const server = setupServer(
+  tokenQuery,
   resourcesAvailableQuery,
   getProPlanOnlyQuery,
   getWorkspaceAndProjectQuery,

dashboard/src/gql/database/resetPostgresPassword.graphql

@@ -1,3 +0,0 @@
-mutation resetPostgresPassword($appID: String!, $newPassword: String!) {
-  resetPostgresPassword(appID: $appID, newPassword: $newPassword)
-}

dashboard/src/hooks/useLeaveConfirm/index.ts

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

dashboard/src/hooks/useLeaveConfirm/useLeaveConfirm.ts

@@ -0,0 +1,48 @@
+import { useDialog } from '@/components/common/DialogProvider';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+
+export interface UseLeaveConfirmProps {
+  /**
+   * Whether the form is dirty or not.
+   */
+  isDirty?: boolean;
+}
+
+/**
+ * This hook will show a confirmation dialog when the user tries to leave the
+ * current page while the form is dirty.
+ */
+export default function useLeaveConfirm({ isDirty }: UseLeaveConfirmProps) {
+  const router = useRouter();
+  const { openAlertDialog } = useDialog();
+  const [isConfirmed, setConfirmed] = useState(false);
+
+  useEffect(() => {
+    function onRouteChangeStart(route: string) {
+      if (!isDirty || isConfirmed) {
+        return;
+      }
+
+      openAlertDialog({
+        title: 'Unsaved changes',
+        payload:
+          'You have unsaved local changes. Are you sure you want to discard them?',
+        props: {
+          primaryButtonColor: 'error',
+          primaryButtonText: 'Discard',
+          onPrimaryAction: () => {
+            setConfirmed(true);
+            router.push(route);
+          },
+        },
+      });
+
+      throw new Error('Route change aborted');
+    }
+
+    router.events.on('routeChangeStart', onRouteChangeStart);
+
+    return () => router.events.off('routeChangeStart', onRouteChangeStart);
+  }, [isConfirmed, isDirty, openAlertDialog, router, router.events]);
+}

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

@@ -1,150 +1,13 @@
 import { Container } from '@/components/layout/Container';
 import { ProjectLayout } from '@/components/layout/ProjectLayout';
 import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
-import { Modal } from '@/components/ui/v1/Modal';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
-import { Box } from '@/components/ui/v2/Box';
-import { Button } from '@/components/ui/v2/Button';
 import { Chip } from '@/components/ui/v2/Chip';
 import { Text } from '@/components/ui/v2/Text';
-import { RestoreBackupModal } from '@/features/projects/backups/components/RestoreBackupModal';
+import { BackupList } from '@/features/projects/backups/components/BackupList';
 import { UpgradeNotification } from '@/features/projects/common/components/UpgradeNotification';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
-import { useGetApplicationBackupsQuery } from '@/generated/graphql';
-import { prettifySize } from '@/utils/prettifySize';
-import { formatDistanceStrict, formatISO9075 } from 'date-fns';
 import type { ReactElement } from 'react';
-import { useState } from 'react';
-
-export type Backup = {
-  id: string;
-  createdAt: string;
-  size: number;
-};
-
-function BackupsHeader() {
-  const { currentProject } = useCurrentWorkspaceAndProject();
-  const { plan } = currentProject;
-  return (
-    <div className="flex flex-row place-content-between">
-      <div>
-        <Text className="text-2xl font-medium" variant="h1">
-          Backups
-        </Text>
-      </div>
-
-      <Chip
-        color={plan.isFree ? 'default' : 'success'}
-        label={plan.isFree ? 'Off' : 'Live'}
-        size="small"
-      />
-    </div>
-  );
-}
-
-function BackupRow({ backup }: any) {
-  const { id, createdAt, size } = backup;
-
-  const [restoreModalOpen, setRestoreModalOpen] = useState(false);
-
-  return (
-    <>
-      {restoreModalOpen && (
-        <Modal
-          showModal={restoreModalOpen}
-          close={() => setRestoreModalOpen(false)}
-          Component={RestoreBackupModal}
-          data={{ id, createdAt }}
-        />
-      )}
-      <Box className="flex flex-row place-content-between py-3">
-        <Text className="w-drop self-center text-xs font-medium">
-          {formatISO9075(new Date(createdAt))}
-        </Text>
-        <Text className="w-drop self-center text-xs font-medium">
-          {prettifySize(size)}
-        </Text>
-        <Text className="w-drop self-center text-xs font-medium">
-          {formatDistanceStrict(new Date(createdAt), new Date(), {
-            addSuffix: true,
-          })}
-        </Text>
-        <div className="w-20">
-          <Button
-            variant="borderless"
-            onClick={() => setRestoreModalOpen(true)}
-          >
-            Restore
-          </Button>
-        </div>
-      </Box>
-    </>
-  );
-}
-
-function BackupsTable() {
-  const { currentProject } = useCurrentWorkspaceAndProject();
-
-  const { data, loading, error } = useGetApplicationBackupsQuery({
-    variables: { appId: currentProject.id },
-  });
-
-  if (loading) {
-    return (
-      <ActivityIndicator
-        delay={500}
-        className="my-5"
-        label="Loading backups..."
-      />
-    );
-  }
-
-  if (error) {
-    throw error;
-  }
-
-  const { backups } = data.app;
-
-  return (
-    <>
-      <Box className="flex flex-row place-content-between border-b-1 py-2">
-        <Text className="w-drop text-xs font-bold">Backup</Text>
-        <Text className="w-drop text-xs font-bold">Size</Text>
-        <Text className="w-drop text-xs font-bold">Backed Up</Text>
-        <div className="w-20" />
-      </Box>
-      <Box className="border-b-1">
-        {backups.length === 0 ? (
-          <div className="flex flex-row px-1 py-4">
-            <Text className="text-xs">No backups yet.</Text>
-          </div>
-        ) : (
-          <div className="divide divide-y-1">
-            {backups.map((backup) => (
-              <BackupRow key={backup.id} backup={backup} />
-            ))}
-          </div>
-        )}
-      </Box>
-    </>
-  );
-}
-
-function SectionContainer({ title }: any) {
-  return (
-    <div className="mt-6 w-full">
-      <Text className="text-lg font-medium">{title}</Text>
-      <Text className="font-normal">
-        The database backup includes database schema, database data and Hasura
-        metadata. It does not include the actual files in Storage.
-      </Text>
-
-      <div className="mt-6">
-        <BackupsTable />
-      </div>
-    </div>
-  );
-}
 
 function BackupsContent() {
   const { currentProject } = useCurrentWorkspaceAndProject();
@@ -159,13 +22,43 @@ function BackupsContent() {
     );
   }
 
-  return <SectionContainer title="Database" />;
+  return (
+    <div className="mt-6 grid w-full grid-flow-row gap-6">
+      <div>
+        <Text className="font-medium">Database</Text>
+        <Text color="secondary">
+          The database backup includes database schema, database data and Hasura
+          metadata. It does not include the actual files in Storage.
+        </Text>
+      </div>
+
+      <BackupList />
+    </div>
+  );
 }
 
 export default function BackupsPage() {
+  const { currentProject, loading } = useCurrentWorkspaceAndProject();
+  const { plan } = currentProject;
+
+  if (loading) {
+    return <ActivityIndicator label="Loading project..." delay={1000} />;
+  }
+
   return (
     <Container className="max-w-2.5xl">
-      <BackupsHeader />
+      <div className="grid grid-flow-col justify-between gap-2">
+        <Text className="text-2xl font-medium" variant="h1">
+          Backups
+        </Text>
+
+        <Chip
+          color={plan.isFree ? 'default' : 'success'}
+          label={plan.isFree ? 'Off' : 'Live'}
+          size="small"
+        />
+      </div>
+
       <RetryableErrorBoundary>
         <BackupsContent />
       </RetryableErrorBoundary>

dashboard/src/pages/new.tsx

@@ -6,10 +6,7 @@ import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { Alert } from '@/components/ui/v2/Alert';
 import { Box } from '@/components/ui/v2/Box';
 import { Button } from '@/components/ui/v2/Button';
-import { IconButton } from '@/components/ui/v2/IconButton';
-import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
 import { Input } from '@/components/ui/v2/Input';
-import { InputAdornment } from '@/components/ui/v2/InputAdornment';
 import { Option } from '@/components/ui/v2/Option';
 import { Radio } from '@/components/ui/v2/Radio';
 import { RadioGroup } from '@/components/ui/v2/RadioGroup';
@@ -17,18 +14,12 @@ import { Select } from '@/components/ui/v2/Select';
 import type { TextProps } from '@/components/ui/v2/Text';
 import { Text } from '@/components/ui/v2/Text';
 import { Tooltip } from '@/components/ui/v2/Tooltip';
-import features from '@/data/features.json';
-import { generateRandomDatabasePassword } from '@/features/database/common/utils/generateRandomDatabasePassword';
-import { resetDatabasePasswordValidationSchema } from '@/features/database/settings/utils/resetDatabasePasswordValidationSchema';
 import { planDescriptions } from '@/features/projects/common/utils/planDescriptions';
 import { BillingPaymentMethodForm } from '@/features/projects/workspaces/components/BillingPaymentMethodForm';
 import { useSubmitState } from '@/hooks/useSubmitState';
 import { MAX_FREE_PROJECTS } from '@/utils/constants/common';
 import { getToastStyleProps } from '@/utils/constants/settings';
-import { copy } from '@/utils/copy';
 import { getErrorMessage } from '@/utils/getErrorMessage';
-import { getCurrentEnvironment } from '@/utils/helpers';
-import { triggerToast } from '@/utils/toast';
 import type {
   PrefetchNewAppPlansFragment,
   PrefetchNewAppRegionsFragment,
@@ -73,7 +64,6 @@ export function NewProjectPageContent({
 
   // form
   const [name, setName] = useState('');
-  const [passwordError, setPasswordError] = useState('');
 
   const [selectedWorkspace, setSelectedWorkspace] = useState({
     id: preSelectedWorkspace.id,
@@ -89,10 +79,6 @@ export function NewProjectPageContent({
     code: preSelectedRegion.country.code,
   });
 
-  const [databasePassword, setDatabasePassword] = useState(
-    generateRandomDatabasePassword(),
-  );
-
   // find the first acceptable plan as default plan
   const defaultSelectedPlan = plans.find((plan) => {
     if (!plan.isFree) {
@@ -131,18 +117,6 @@ export function NewProjectPageContent({
     (availableWorkspace) => availableWorkspace.id === selectedWorkspace.id,
   );
 
-  const isK8SPostgresEnabledInCurrentEnvironment = features[
-    'k8s-postgres'
-  ].enabled.find((e) => e === getCurrentEnvironment());
-
-  // function handlers
-  const handleGenerateRandomPassword = () => {
-    const newRandomDatabasePassword = generateRandomDatabasePassword();
-    setPasswordError('');
-    triggerToast('New random database password generated.');
-    setDatabasePassword(newRandomDatabasePassword);
-  };
-
   async function handleCreateProject(event: FormEvent) {
     event.preventDefault();
 
@@ -159,19 +133,6 @@ export function NewProjectPageContent({
       return;
     }
 
-    if (isK8SPostgresEnabledInCurrentEnvironment) {
-      try {
-        await resetDatabasePasswordValidationSchema.validate({
-          databasePassword,
-        });
-      } catch (validationError) {
-        setSubmitState({
-          error: Error(validationError.errors),
-          loading: false,
-        });
-      }
-    }
-
     const slug = slugify(name, { lower: true, strict: true });
 
     try {
@@ -184,9 +145,6 @@ export function NewProjectPageContent({
               planId: plan.id,
               workspaceId: selectedWorkspace.id,
               regionId: selectedRegion.id,
-              postgresPassword: isK8SPostgresEnabledInCurrentEnvironment
-                ? databasePassword
-                : undefined,
             },
           },
         }),
@@ -343,86 +301,6 @@ export function NewProjectPageContent({
               ))}
             </Select>
 
-            {isK8SPostgresEnabledInCurrentEnvironment && (
-              <Input
-                name="databasePassword"
-                id="databasePassword"
-                autoComplete="new-password"
-                label="Database Password"
-                value={databasePassword}
-                variant="inline"
-                type="password"
-                error={!!passwordError}
-                hideEmptyHelperText
-                endAdornment={
-                  <InputAdornment position="end" className="mr-2">
-                    <IconButton
-                      color="secondary"
-                      onClick={() => {
-                        copy(databasePassword, 'Postgres password');
-                      }}
-                      variant="borderless"
-                      aria-label="Copy password"
-                    >
-                      <CopyIcon className="h-4 w-4" />
-                    </IconButton>
-                  </InputAdornment>
-                }
-                slotProps={{
-                  // Note: this is supposed to fix a `validateDOMNesting` error
-                  helperText: { component: 'div' },
-                }}
-                helperText={
-                  <div className="grid max-w-xs grid-flow-row gap-2">
-                    {passwordError && (
-                      <Text
-                        variant="subtitle2"
-                        sx={{
-                          color: (theme) =>
-                            `${theme.palette.error.main} !important`,
-                        }}
-                      >
-                        {passwordError}
-                      </Text>
-                    )}
-
-                    <Box className="font-medium">
-                      The root Postgres password for your database - it must be
-                      strong and hard to guess.{' '}
-                      <Button
-                        type="button"
-                        variant="borderless"
-                        color="secondary"
-                        onClick={handleGenerateRandomPassword}
-                        className="px-1 py-0.5 text-xs underline underline-offset-2 hover:underline"
-                        tabIndex={-1}
-                      >
-                        Generate a password
-                      </Button>
-                    </Box>
-                  </div>
-                }
-                onChange={async (e) => {
-                  e.preventDefault();
-                  setSubmitState({
-                    error: null,
-                    loading: false,
-                  });
-                  setDatabasePassword(e.target.value);
-
-                  try {
-                    await resetDatabasePasswordValidationSchema.validate({
-                      databasePassword: e.target.value,
-                    });
-                    setPasswordError('');
-                  } catch (validationError) {
-                    setPasswordError(validationError.message);
-                  }
-                }}
-                fullWidth
-              />
-            )}
-
             <Select
               id="region"
               label="Region"
@@ -499,7 +377,7 @@ export function NewProjectPageContent({
             <div className="grid w-full grid-cols-8 gap-x-4 gap-y-2">
               <div className="col-span-8 sm:col-span-2">
                 <Text className="text-xs font-medium">Plan</Text>
-                <Text variant="subtitle2">You can change this later.</Text>
+                <Text variant="subtitle2">You can change this later</Text>
               </div>
 
               <RadioGroup
@@ -584,7 +462,7 @@ export function NewProjectPageContent({
             <Button
               type="submit"
               loading={submitState.loading}
-              disabled={!!passwordError || maintenanceActive}
+              disabled={maintenanceActive}
               id="create-app"
             >
               Create Project

dashboard/src/tests/mocks.ts

@@ -88,6 +88,7 @@ export const mockWorkspace: Workspace = {
   slug: 'test-workspace',
   workspaceMembers: [],
   projects: [mockApplication],
+  creatorUserId: '1',
 };
 
 export const mockSession: NhostSession = {

dashboard/src/tests/msw/mocks/rest/hasuraMetadataQuery.ts

@@ -1,7 +1,7 @@
 import { rest } from 'msw';
 
 const hasuraMetadataQuery = rest.post(
-  'http://localhost:8080/v1/metadata',
+  'https://local.hasura.nhost.run/v1/metadata',
   (_req, res, ctx) =>
     res(
       ctx.delay(250),

dashboard/src/tests/msw/mocks/rest/tableQuery.ts

@@ -1,7 +1,7 @@
 import { rest } from 'msw';
 
 const tableQuery = rest.post(
-  'http://localhost:8080/v2/query',
+  'https://local.hasura.nhost.run/v2/query',
   async (req, res, ctx) => {
     const body = await req.json();
 

dashboard/src/tests/msw/mocks/rest/tokenQuery.ts

@@ -0,0 +1,32 @@
+import { faker } from '@faker-js/faker';
+import type { NhostSession } from '@nhost/nextjs';
+import { rest } from 'msw';
+
+const tokenQuery = rest.post(
+  `https://local.auth.nhost.run/v1/token`,
+  (_req, res, ctx) =>
+    res(
+      ctx.json<NhostSession>({
+        accessToken: faker.datatype.string(40),
+        refreshToken: faker.datatype.uuid(),
+        accessTokenExpiresIn: 900,
+        user: {
+          id: faker.datatype.uuid(),
+          createdAt: faker.date.past().toUTCString(),
+          displayName: `${faker.name.firstName()} ${faker.name.lastName()}`,
+          avatarUrl: faker.internet.avatar(),
+          locale: 'en',
+          isAnonymous: false,
+          emailVerified: true,
+          defaultRole: 'user',
+          roles: ['user', 'me'],
+          phoneNumber: null,
+          phoneNumberVerified: false,
+          activeMfaType: null,
+          metadata: {},
+        },
+      }),
+    ),
+);
+
+export default tokenQuery;

dashboard/src/tests/testUtils.tsx

@@ -32,13 +32,13 @@ process.env = {
   NODE_ENV: 'development',
   NEXT_PUBLIC_NHOST_PLATFORM: 'false',
   NEXT_PUBLIC_ENV: 'dev',
-  NEXT_PUBLIC_NHOST_AUTH_URL: 'https://localdev.nhost.run/v1/auth',
-  NEXT_PUBLIC_NHOST_FUNCTIONS_URL: 'https://localdev.nhost.run/v1/functions',
-  NEXT_PUBLIC_NHOST_GRAPHQL_URL: 'https://localdev.nhost.run/v1/graphql',
-  NEXT_PUBLIC_NHOST_STORAGE_URL: 'https://localdev.nhost.run/v1/storage',
-  NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL: 'http://localhost:9695',
-  NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL: 'http://localhost:9693',
-  NEXT_PUBLIC_NHOST_HASURA_API_URL: 'http://localhost:8080',
+  NEXT_PUBLIC_NHOST_AUTH_URL: 'https://local.auth.nhost.run/v1',
+  NEXT_PUBLIC_NHOST_FUNCTIONS_URL: 'https://local.functions.nhost.run/v1',
+  NEXT_PUBLIC_NHOST_GRAPHQL_URL: 'https://local.graphql.nhost.run/v1',
+  NEXT_PUBLIC_NHOST_STORAGE_URL: 'https://local.storage.nhost.run/v1',
+  NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL: 'https://local.hasura.nhost.run',
+  NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL: 'https://local.hasura.nhost.run',
+  NEXT_PUBLIC_NHOST_HASURA_API_URL: 'https://local.hasura.nhost.run',
 };
 
 export const queryClient = new QueryClient({

dashboard/src/types/application.ts

@@ -1,5 +1,6 @@
 import type {
   AppStateHistoryFragment,
+  BackupFragment,
   DeploymentRowFragment,
   EnvironmentVariableFragment,
   PermissionVariableFragment,
@@ -39,6 +40,7 @@ export type ApplicationState = AppStateHistoryFragment;
 export type Deployment = DeploymentRowFragment;
 export type Workspace = WorkspaceFragment;
 export type Project = ProjectFragment;
+export type Backup = BackupFragment;
 
 export interface PermissionVariable extends PermissionVariableFragment {
   isSystemVariable?: boolean;

dashboard/src/utils/__generated__/graphql.ts

@@ -1746,7 +1746,6 @@ export type ConfigSystemConfigPostgres = {
   connectionString: ConfigSystemConfigPostgresConnectionString;
   database: Scalars['String'];
   enabled?: Maybe<Scalars['Boolean']>;
-  password: Scalars['String'];
 };
 
 export type ConfigSystemConfigPostgresComparisonExp = {
@@ -1756,7 +1755,6 @@ export type ConfigSystemConfigPostgresComparisonExp = {
   connectionString?: InputMaybe<ConfigSystemConfigPostgresConnectionStringComparisonExp>;
   database?: InputMaybe<ConfigStringComparisonExp>;
   enabled?: InputMaybe<ConfigBooleanComparisonExp>;
-  password?: InputMaybe<ConfigStringComparisonExp>;
 };
 
 export type ConfigSystemConfigPostgresConnectionString = {
@@ -1795,14 +1793,12 @@ export type ConfigSystemConfigPostgresInsertInput = {
   connectionString: ConfigSystemConfigPostgresConnectionStringInsertInput;
   database: Scalars['String'];
   enabled?: InputMaybe<Scalars['Boolean']>;
-  password: Scalars['String'];
 };
 
 export type ConfigSystemConfigPostgresUpdateInput = {
   connectionString?: InputMaybe<ConfigSystemConfigPostgresConnectionStringUpdateInput>;
   database?: InputMaybe<Scalars['String']>;
   enabled?: InputMaybe<Scalars['Boolean']>;
-  password?: InputMaybe<Scalars['String']>;
 };
 
 export type ConfigSystemConfigUpdateInput = {
@@ -2549,7 +2545,6 @@ export type Apps = {
   /** An object relationship */
   plan: Plans;
   planId: Scalars['uuid'];
-  postgresPassword: Scalars['String'];
   providersUpdated?: Maybe<Scalars['Boolean']>;
   /** An object relationship */
   region: Regions;
@@ -2787,7 +2782,6 @@ export type Apps_Bool_Exp = {
   paused?: InputMaybe<Boolean_Comparison_Exp>;
   plan?: InputMaybe<Plans_Bool_Exp>;
   planId?: InputMaybe<Uuid_Comparison_Exp>;
-  postgresPassword?: InputMaybe<String_Comparison_Exp>;
   providersUpdated?: InputMaybe<Boolean_Comparison_Exp>;
   region?: InputMaybe<Regions_Bool_Exp>;
   regionId?: InputMaybe<Uuid_Comparison_Exp>;
@@ -2859,7 +2853,6 @@ export type Apps_Insert_Input = {
   paused?: InputMaybe<Scalars['Boolean']>;
   plan?: InputMaybe<Plans_Obj_Rel_Insert_Input>;
   planId?: InputMaybe<Scalars['uuid']>;
-  postgresPassword?: InputMaybe<Scalars['String']>;
   providersUpdated?: InputMaybe<Scalars['Boolean']>;
   region?: InputMaybe<Regions_Obj_Rel_Insert_Input>;
   regionId?: InputMaybe<Scalars['uuid']>;
@@ -2886,7 +2879,6 @@ export type Apps_Max_Fields = {
   name?: Maybe<Scalars['String']>;
   nhostBaseFolder?: Maybe<Scalars['String']>;
   planId?: Maybe<Scalars['uuid']>;
-  postgresPassword?: Maybe<Scalars['String']>;
   regionId?: Maybe<Scalars['uuid']>;
   repositoryProductionBranch?: Maybe<Scalars['String']>;
   slug?: Maybe<Scalars['String']>;
@@ -2909,7 +2901,6 @@ export type Apps_Max_Order_By = {
   name?: InputMaybe<Order_By>;
   nhostBaseFolder?: InputMaybe<Order_By>;
   planId?: InputMaybe<Order_By>;
-  postgresPassword?: InputMaybe<Order_By>;
   regionId?: InputMaybe<Order_By>;
   repositoryProductionBranch?: InputMaybe<Order_By>;
   slug?: InputMaybe<Order_By>;
@@ -2933,7 +2924,6 @@ export type Apps_Min_Fields = {
   name?: Maybe<Scalars['String']>;
   nhostBaseFolder?: Maybe<Scalars['String']>;
   planId?: Maybe<Scalars['uuid']>;
-  postgresPassword?: Maybe<Scalars['String']>;
   regionId?: Maybe<Scalars['uuid']>;
   repositoryProductionBranch?: Maybe<Scalars['String']>;
   slug?: Maybe<Scalars['String']>;
@@ -2956,7 +2946,6 @@ export type Apps_Min_Order_By = {
   name?: InputMaybe<Order_By>;
   nhostBaseFolder?: InputMaybe<Order_By>;
   planId?: InputMaybe<Order_By>;
-  postgresPassword?: InputMaybe<Order_By>;
   regionId?: InputMaybe<Order_By>;
   repositoryProductionBranch?: InputMaybe<Order_By>;
   slug?: InputMaybe<Order_By>;
@@ -3017,7 +3006,6 @@ export type Apps_Order_By = {
   paused?: InputMaybe<Order_By>;
   plan?: InputMaybe<Plans_Order_By>;
   planId?: InputMaybe<Order_By>;
-  postgresPassword?: InputMaybe<Order_By>;
   providersUpdated?: InputMaybe<Order_By>;
   region?: InputMaybe<Regions_Order_By>;
   regionId?: InputMaybe<Order_By>;
@@ -3073,8 +3061,6 @@ export enum Apps_Select_Column {
   /** column name */
   PlanId = 'planId',
   /** column name */
-  PostgresPassword = 'postgresPassword',
-  /** column name */
   ProvidersUpdated = 'providersUpdated',
   /** column name */
   RegionId = 'regionId',
@@ -3134,7 +3120,6 @@ export type Apps_Set_Input = {
   /** whether or not this app is paused */
   paused?: InputMaybe<Scalars['Boolean']>;
   planId?: InputMaybe<Scalars['uuid']>;
-  postgresPassword?: InputMaybe<Scalars['String']>;
   providersUpdated?: InputMaybe<Scalars['Boolean']>;
   regionId?: InputMaybe<Scalars['uuid']>;
   repositoryProductionBranch?: InputMaybe<Scalars['String']>;
@@ -3204,7 +3189,6 @@ export type Apps_Stream_Cursor_Value_Input = {
   /** whether or not this app is paused */
   paused?: InputMaybe<Scalars['Boolean']>;
   planId?: InputMaybe<Scalars['uuid']>;
-  postgresPassword?: InputMaybe<Scalars['String']>;
   providersUpdated?: InputMaybe<Scalars['Boolean']>;
   regionId?: InputMaybe<Scalars['uuid']>;
   repositoryProductionBranch?: InputMaybe<Scalars['String']>;
@@ -3259,8 +3243,6 @@ export enum Apps_Update_Column {
   /** column name */
   PlanId = 'planId',
   /** column name */
-  PostgresPassword = 'postgresPassword',
-  /** column name */
   ProvidersUpdated = 'providersUpdated',
   /** column name */
   RegionId = 'regionId',
@@ -19053,6 +19035,14 @@ export type GetPostgresSettingsQueryVariables = Exact<{
 
 export type GetPostgresSettingsQuery = { __typename?: 'query_root', systemConfig?: { __typename?: 'ConfigSystemConfig', postgres: { __typename?: 'ConfigSystemConfigPostgres', database: string } } | null, config?: { __typename: 'ConfigConfig', id: 'ConfigConfig', postgres?: { __typename?: 'ConfigPostgres', version?: string | null } | null } | null };
 
+export type ResetDatabasePasswordMutationVariables = Exact<{
+  appId: Scalars['String'];
+  newPassword: Scalars['String'];
+}>;
+
+
+export type ResetDatabasePasswordMutation = { __typename?: 'mutation_root', resetPostgresPassword: boolean };
+
 export type GetHasuraSettingsQueryVariables = Exact<{
   appId: Scalars['uuid'];
 }>;
@@ -19060,6 +19050,24 @@ export type GetHasuraSettingsQueryVariables = Exact<{
 
 export type GetHasuraSettingsQuery = { __typename?: 'query_root', config?: { __typename: 'ConfigConfig', id: 'ConfigConfig', hasura: { __typename?: 'ConfigHasura', version?: string | null, settings?: { __typename?: 'ConfigHasuraSettings', enableAllowList?: boolean | null, enableRemoteSchemaPermissions?: boolean | null, enableConsole?: boolean | null, devMode?: boolean | null, corsDomain?: Array<any> | null, enabledAPIs?: Array<any> | null } | null, logs?: { __typename?: 'ConfigHasuraLogs', level?: string | null } | null, events?: { __typename?: 'ConfigHasuraEvents', httpPoolSize?: any | null } | null } } | null };
 
+export type BackupFragment = { __typename?: 'backups', id: any, size: any, createdAt: any, completedAt?: any | null };
+
+export type GetApplicationBackupsQueryVariables = Exact<{
+  appId: Scalars['uuid'];
+}>;
+
+
+export type GetApplicationBackupsQuery = { __typename?: 'query_root', app?: { __typename?: 'apps', backups: Array<{ __typename?: 'backups', id: any, size: any, createdAt: any, completedAt?: any | null }> } | null };
+
+export type GetBackupPresignedUrlQueryVariables = Exact<{
+  appId: Scalars['String'];
+  backupId: Scalars['String'];
+  expireInMinutes?: InputMaybe<Scalars['Int']>;
+}>;
+
+
+export type GetBackupPresignedUrlQuery = { __typename?: 'query_root', getBackupPresignedUrl: { __typename?: 'BackupPresignedURL', url: string, expiresAt: any } };
+
 export type ServiceResourcesFragment = { __typename?: 'ConfigConfig', auth?: { __typename?: 'ConfigAuth', resources?: { __typename?: 'ConfigResources', replicas: any, compute: { __typename?: 'ConfigResourcesCompute', cpu: any, memory: any } } | null } | null, hasura: { __typename?: 'ConfigHasura', resources?: { __typename?: 'ConfigResources', replicas: any, compute: { __typename?: 'ConfigResourcesCompute', cpu: any, memory: any } } | null }, postgres?: { __typename?: 'ConfigPostgres', resources?: { __typename?: 'ConfigResources', replicas: any, compute: { __typename?: 'ConfigResourcesCompute', cpu: any, memory: any } } | null } | null, storage?: { __typename?: 'ConfigStorage', resources?: { __typename?: 'ConfigResources', replicas: any, compute: { __typename?: 'ConfigResourcesCompute', cpu: any, memory: any } } | null } | null };
 
 export type GetResourcesQueryVariables = Exact<{
@@ -19100,13 +19108,6 @@ export type GetAppPlanAndGlobalPlansQueryVariables = Exact<{
 
 export type GetAppPlanAndGlobalPlansQuery = { __typename?: 'query_root', apps: Array<{ __typename?: 'apps', id: any, subdomain: string, workspace: { __typename?: 'workspaces', id: any, paymentMethods: Array<{ __typename?: 'paymentMethods', id: any }> }, plan: { __typename?: 'plans', id: any, name: string } }>, plans: Array<{ __typename?: 'plans', id: any, name: string, isFree: boolean, price: number, featureMaxDbSize: number }> };
 
-export type GetApplicationBackupsQueryVariables = Exact<{
-  appId: Scalars['uuid'];
-}>;
-
-
-export type GetApplicationBackupsQuery = { __typename?: 'query_root', app?: { __typename?: 'apps', backups: Array<{ __typename?: 'backups', id: any, size: any, createdAt: any, completedAt?: any | null }> } | null };
-
 export type GetApplicationPlanQueryVariables = Exact<{
   workspace: Scalars['String'];
   slug: Scalars['String'];
@@ -19265,14 +19266,6 @@ export type GetCountriesQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type GetCountriesQuery = { __typename?: 'query_root', countries: Array<{ __typename?: 'countries', code: any, name: string }> };
 
-export type ResetPostgresPasswordMutationVariables = Exact<{
-  appID: Scalars['String'];
-  newPassword: Scalars['String'];
-}>;
-
-
-export type ResetPostgresPasswordMutation = { __typename?: 'mutation_root', resetPostgresPassword: boolean };
-
 export type DeploymentRowFragment = { __typename?: 'deployments', id: any, commitSHA: string, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, deploymentStatus?: string | null, commitUserName?: string | null, commitUserAvatarUrl?: string | null, commitMessage?: string | null };
 
 export type ScheduledOrPendingDeploymentsSubSubscriptionVariables = Exact<{
@@ -19586,6 +19579,14 @@ export type UpdateWorkspaceMutationVariables = Exact<{
 
 export type UpdateWorkspaceMutation = { __typename?: 'mutation_root', updateWorkspace?: { __typename?: 'workspaces', id: any, name: string, email: string, companyName: string, addressLine1: string, addressLine2: string, addressPostalCode: string, addressCity: string, addressCountryCode?: string | null, slug: string, taxIdType: string, taxIdValue: string } | null };
 
+export const BackupFragmentDoc = gql`
+    fragment Backup on backups {
+  id
+  size
+  createdAt
+  completedAt
+}
+    `;
 export const ServiceResourcesFragmentDoc = gql`
     fragment ServiceResources on ConfigConfig {
   auth {
@@ -20109,6 +20110,38 @@ export type GetPostgresSettingsQueryResult = Apollo.QueryResult<GetPostgresSetti
 export function refetchGetPostgresSettingsQuery(variables: GetPostgresSettingsQueryVariables) {
       return { query: GetPostgresSettingsDocument, variables: variables }
     }
+export const ResetDatabasePasswordDocument = gql`
+    mutation ResetDatabasePassword($appId: String!, $newPassword: String!) {
+  resetPostgresPassword(appID: $appId, newPassword: $newPassword)
+}
+    `;
+export type ResetDatabasePasswordMutationFn = Apollo.MutationFunction<ResetDatabasePasswordMutation, ResetDatabasePasswordMutationVariables>;
+
+/**
+ * __useResetDatabasePasswordMutation__
+ *
+ * To run a mutation, you first call `useResetDatabasePasswordMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useResetDatabasePasswordMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [resetDatabasePasswordMutation, { data, loading, error }] = useResetDatabasePasswordMutation({
+ *   variables: {
+ *      appId: // value for 'appId'
+ *      newPassword: // value for 'newPassword'
+ *   },
+ * });
+ */
+export function useResetDatabasePasswordMutation(baseOptions?: Apollo.MutationHookOptions<ResetDatabasePasswordMutation, ResetDatabasePasswordMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<ResetDatabasePasswordMutation, ResetDatabasePasswordMutationVariables>(ResetDatabasePasswordDocument, options);
+      }
+export type ResetDatabasePasswordMutationHookResult = ReturnType<typeof useResetDatabasePasswordMutation>;
+export type ResetDatabasePasswordMutationResult = Apollo.MutationResult<ResetDatabasePasswordMutation>;
+export type ResetDatabasePasswordMutationOptions = Apollo.BaseMutationOptions<ResetDatabasePasswordMutation, ResetDatabasePasswordMutationVariables>;
 export const GetHasuraSettingsDocument = gql`
     query GetHasuraSettings($appId: uuid!) {
   config(appID: $appId, resolve: true) {
@@ -20165,6 +20198,91 @@ export type GetHasuraSettingsQueryResult = Apollo.QueryResult<GetHasuraSettingsQ
 export function refetchGetHasuraSettingsQuery(variables: GetHasuraSettingsQueryVariables) {
       return { query: GetHasuraSettingsDocument, variables: variables }
     }
+export const GetApplicationBackupsDocument = gql`
+    query getApplicationBackups($appId: uuid!) {
+  app(id: $appId) {
+    backups(order_by: {createdAt: desc}) {
+      ...Backup
+    }
+  }
+}
+    ${BackupFragmentDoc}`;
+
+/**
+ * __useGetApplicationBackupsQuery__
+ *
+ * To run a query within a React component, call `useGetApplicationBackupsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetApplicationBackupsQuery` 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 } = useGetApplicationBackupsQuery({
+ *   variables: {
+ *      appId: // value for 'appId'
+ *   },
+ * });
+ */
+export function useGetApplicationBackupsQuery(baseOptions: Apollo.QueryHookOptions<GetApplicationBackupsQuery, GetApplicationBackupsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetApplicationBackupsQuery, GetApplicationBackupsQueryVariables>(GetApplicationBackupsDocument, options);
+      }
+export function useGetApplicationBackupsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetApplicationBackupsQuery, GetApplicationBackupsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetApplicationBackupsQuery, GetApplicationBackupsQueryVariables>(GetApplicationBackupsDocument, options);
+        }
+export type GetApplicationBackupsQueryHookResult = ReturnType<typeof useGetApplicationBackupsQuery>;
+export type GetApplicationBackupsLazyQueryHookResult = ReturnType<typeof useGetApplicationBackupsLazyQuery>;
+export type GetApplicationBackupsQueryResult = Apollo.QueryResult<GetApplicationBackupsQuery, GetApplicationBackupsQueryVariables>;
+export function refetchGetApplicationBackupsQuery(variables: GetApplicationBackupsQueryVariables) {
+      return { query: GetApplicationBackupsDocument, variables: variables }
+    }
+export const GetBackupPresignedUrlDocument = gql`
+    query GetBackupPresignedUrl($appId: String!, $backupId: String!, $expireInMinutes: Int) {
+  getBackupPresignedUrl: getBackupPresignedURL(
+    appID: $appId
+    backupID: $backupId
+    expireInMinutes: $expireInMinutes
+  ) {
+    url
+    expiresAt: expires_at
+  }
+}
+    `;
+
+/**
+ * __useGetBackupPresignedUrlQuery__
+ *
+ * To run a query within a React component, call `useGetBackupPresignedUrlQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetBackupPresignedUrlQuery` 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 } = useGetBackupPresignedUrlQuery({
+ *   variables: {
+ *      appId: // value for 'appId'
+ *      backupId: // value for 'backupId'
+ *      expireInMinutes: // value for 'expireInMinutes'
+ *   },
+ * });
+ */
+export function useGetBackupPresignedUrlQuery(baseOptions: Apollo.QueryHookOptions<GetBackupPresignedUrlQuery, GetBackupPresignedUrlQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetBackupPresignedUrlQuery, GetBackupPresignedUrlQueryVariables>(GetBackupPresignedUrlDocument, options);
+      }
+export function useGetBackupPresignedUrlLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetBackupPresignedUrlQuery, GetBackupPresignedUrlQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetBackupPresignedUrlQuery, GetBackupPresignedUrlQueryVariables>(GetBackupPresignedUrlDocument, options);
+        }
+export type GetBackupPresignedUrlQueryHookResult = ReturnType<typeof useGetBackupPresignedUrlQuery>;
+export type GetBackupPresignedUrlLazyQueryHookResult = ReturnType<typeof useGetBackupPresignedUrlLazyQuery>;
+export type GetBackupPresignedUrlQueryResult = Apollo.QueryResult<GetBackupPresignedUrlQuery, GetBackupPresignedUrlQueryVariables>;
+export function refetchGetBackupPresignedUrlQuery(variables: GetBackupPresignedUrlQueryVariables) {
+      return { query: GetBackupPresignedUrlDocument, variables: variables }
+    }
 export const GetResourcesDocument = gql`
     query GetResources($appId: uuid!) {
   config(appID: $appId, resolve: true) {
@@ -20358,49 +20476,6 @@ export type GetAppPlanAndGlobalPlansQueryResult = Apollo.QueryResult<GetAppPlanA
 export function refetchGetAppPlanAndGlobalPlansQuery(variables: GetAppPlanAndGlobalPlansQueryVariables) {
       return { query: GetAppPlanAndGlobalPlansDocument, variables: variables }
     }
-export const GetApplicationBackupsDocument = gql`
-    query getApplicationBackups($appId: uuid!) {
-  app(id: $appId) {
-    backups(order_by: {createdAt: desc}) {
-      id
-      size
-      createdAt
-      completedAt
-    }
-  }
-}
-    `;
-
-/**
- * __useGetApplicationBackupsQuery__
- *
- * To run a query within a React component, call `useGetApplicationBackupsQuery` and pass it any options that fit your needs.
- * When your component renders, `useGetApplicationBackupsQuery` 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 } = useGetApplicationBackupsQuery({
- *   variables: {
- *      appId: // value for 'appId'
- *   },
- * });
- */
-export function useGetApplicationBackupsQuery(baseOptions: Apollo.QueryHookOptions<GetApplicationBackupsQuery, GetApplicationBackupsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<GetApplicationBackupsQuery, GetApplicationBackupsQueryVariables>(GetApplicationBackupsDocument, options);
-      }
-export function useGetApplicationBackupsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetApplicationBackupsQuery, GetApplicationBackupsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<GetApplicationBackupsQuery, GetApplicationBackupsQueryVariables>(GetApplicationBackupsDocument, options);
-        }
-export type GetApplicationBackupsQueryHookResult = ReturnType<typeof useGetApplicationBackupsQuery>;
-export type GetApplicationBackupsLazyQueryHookResult = ReturnType<typeof useGetApplicationBackupsLazyQuery>;
-export type GetApplicationBackupsQueryResult = Apollo.QueryResult<GetApplicationBackupsQuery, GetApplicationBackupsQueryVariables>;
-export function refetchGetApplicationBackupsQuery(variables: GetApplicationBackupsQueryVariables) {
-      return { query: GetApplicationBackupsDocument, variables: variables }
-    }
 export const GetApplicationPlanDocument = gql`
     query getApplicationPlan($workspace: String!, $slug: String!) {
   apps(where: {workspace: {slug: {_eq: $workspace}}, slug: {_eq: $slug}}) {
@@ -21353,38 +21428,6 @@ export type GetCountriesQueryResult = Apollo.QueryResult<GetCountriesQuery, GetC
 export function refetchGetCountriesQuery(variables?: GetCountriesQueryVariables) {
       return { query: GetCountriesDocument, variables: variables }
     }
-export const ResetPostgresPasswordDocument = gql`
-    mutation resetPostgresPassword($appID: String!, $newPassword: String!) {
-  resetPostgresPassword(appID: $appID, newPassword: $newPassword)
-}
-    `;
-export type ResetPostgresPasswordMutationFn = Apollo.MutationFunction<ResetPostgresPasswordMutation, ResetPostgresPasswordMutationVariables>;
-
-/**
- * __useResetPostgresPasswordMutation__
- *
- * To run a mutation, you first call `useResetPostgresPasswordMutation` within a React component and pass it any options that fit your needs.
- * When your component renders, `useResetPostgresPasswordMutation` returns a tuple that includes:
- * - A mutate function that you can call at any time to execute the mutation
- * - An object with fields that represent the current status of the mutation's execution
- *
- * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
- *
- * @example
- * const [resetPostgresPasswordMutation, { data, loading, error }] = useResetPostgresPasswordMutation({
- *   variables: {
- *      appID: // value for 'appID'
- *      newPassword: // value for 'newPassword'
- *   },
- * });
- */
-export function useResetPostgresPasswordMutation(baseOptions?: Apollo.MutationHookOptions<ResetPostgresPasswordMutation, ResetPostgresPasswordMutationVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useMutation<ResetPostgresPasswordMutation, ResetPostgresPasswordMutationVariables>(ResetPostgresPasswordDocument, options);
-      }
-export type ResetPostgresPasswordMutationHookResult = ReturnType<typeof useResetPostgresPasswordMutation>;
-export type ResetPostgresPasswordMutationResult = Apollo.MutationResult<ResetPostgresPasswordMutation>;
-export type ResetPostgresPasswordMutationOptions = Apollo.BaseMutationOptions<ResetPostgresPasswordMutation, ResetPostgresPasswordMutationVariables>;
 export const ScheduledOrPendingDeploymentsSubDocument = gql`
     subscription ScheduledOrPendingDeploymentsSub($appId: uuid!) {
   deployments(

dashboard/src/utils/copy/copy.ts

@@ -1,9 +1,13 @@
 import { triggerToast } from '@/utils/toast';
 
-export default function copy(toCopy: string, name: string) {
+export default function copy(toCopy: string, name?: string) {
   navigator.clipboard.writeText(toCopy).catch(() => {
     triggerToast('Error while copying');
   });
 
+  if (!name) {
+    return;
+  }
+
   triggerToast(`${name} copied to clipboard`);
 }

dashboard/src/utils/helpers/helpers.ts

@@ -1,4 +1,3 @@
-import features from '@/data/features.json';
 import { ApplicationStatus } from '@/types/application';
 import type { DeploymentRowFragment } from '@/utils/__generated__/graphql';
 import slugify from 'slugify';
@@ -73,7 +72,3 @@ export function getRelativeDateByApplicationState(date: string) {
 
   return Math.floor(difference / 1000);
 }
-
-export const isK8SPostgresEnabledInCurrentEnvironment = features[
-  'k8s-postgres'
-].enabled.find((e) => e === getCurrentEnvironment());

dashboard/src/utils/toast/getColor.ts

@@ -4,7 +4,7 @@ export default function getColor() {
   const colorPreference =
     typeof window !== 'undefined'
       ? window.localStorage.getItem(COLOR_PREFERENCE_STORAGE_KEY)
-      : 'light';
+      : 'system';
   const prefersDarkMode =
     typeof window !== 'undefined'
       ? window.matchMedia('(prefers-color-scheme: dark)').matches

dashboard/src/utils/toast/triggerToast.tsx

@@ -2,17 +2,18 @@ import { Box } from '@/components/ui/v2/Box';
 import { createTheme } from '@/components/ui/v2/createTheme';
 import { ThemeProvider } from '@mui/material';
 import clsx from 'clsx';
+import type { ReactNode } from 'react';
 import { toast } from 'react-hot-toast';
 import getColor from './getColor';
 
-export default function triggerToast(text: string) {
+export default function triggerToast(text: ReactNode) {
   const color = getColor();
 
   toast.custom((t) => (
     <ThemeProvider theme={createTheme(color)}>
       <Box
         className={clsx(
-          'rounded-sm+ px-2 py-1.5 font-normal shadow-md',
+          'rounded-sm+ px-2 py-1.5 text-center font-normal shadow-md',
           t.visible ? 'animate-enter' : 'animate-leave',
         )}
         sx={{

dashboard/tsconfig.json

@@ -33,5 +33,5 @@
     "incremental": true
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules", ".nhost", "nhost", "functions"]
+  "exclude": ["node_modules", ".nhost", "nhost", "functions", "playwright.config.ts"]
 }

docs/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @nhost/docs
 
+## 0.4.0
+
+### Minor Changes
+
+- c6fa8da6d: fix(docs): remove outdated reference/cli
+
+## 0.3.5
+
+### Patch Changes
+
+- 923abd365: chore(deps): update dependency @tsconfig/docusaurus to v2
+
+## 0.3.4
+
+### Patch Changes
+
+- a5305e6b5: docs: update old URLs to the new format
+
+## 0.3.3
+
+### Patch Changes
+
+- cc02902cb: chore(docs): update environment variable documentation
+
 ## 0.3.2
 
 ### Patch Changes

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

@@ -63,8 +63,8 @@ Follow this guide to sign in users with Apple.
 - Click the checkbox to enable "Sign in with Apple".
 - Click **Configure** next to "Sign in with Apple".
 - Make sure your newly created Bundle ID is selected under Primary App ID.
-- Add your base auth domain under "Domains and Subdomains". E.g. `<subdomain>.nhost.run`.
-- Add the full callback URL under "Return URLs". E.g. `https://<subdomain>.nhost.run/v1/auth/signin/provider/apple/callback`.
+- Add your base auth domain under "Domains and Subdomains". E.g. `<subdomain>.auth.<region>.nhost.run`.
+- Add the full callback URL under "Return URLs". E.g. `https://<subdomain>.auth.<region>.nhost.run/v1/signin/provider/apple/callback`.
 - Click **Next**.
 - Click **Done**.
 - Click **Continue** in the top right corner.

docs/docs/cli/index.mdx

@@ -35,4 +35,4 @@ sudo nhost sw upgrade
 - [Local Development](/cli/local-development)
 - [Migrate to Nhost Config](/cli/migrate-config)
 - [Multiple Projects in Parallel](/cli/multiple-projects)
-- [CLI commands reference](/reference/cli)
+- [CLI Documentation](/cli)

docs/docs/cli/overlays.mdx

@@ -0,0 +1,77 @@
+---
+title: 'Configuration Overlays'
+sidebar_label: 'Configuration Overlays'
+sidebar_position: 4
+---
+
+## Introduction
+
+Nhost uses a single configuration file to configure both cloud projects and the local development environment, ensuring a near-identical replica of the production environment. This approach also simplifies connecting a repository to multiple projects, keeping them in sync with minimal effort. However, in cases where minor differences need to be accommodated, Nhost offers overlays - files containing operations to modify the configuration file:
+
+```
+[
+  {
+    "op": "replace",
+    "path": "/auth/method/emailPassword/emailVerificationRequired",
+    "value": false
+  },
+  {
+    "op": "replace",
+    "path": "/auth/redirections/clientUrl",
+    "value": "https://staging.myapp.io"
+  },
+  {
+    "op": "add",
+    "path": "/global/environment/3",
+    "value": {
+      "name": "ENVIRONMENT",
+      "value": "staging"
+    }
+  }
+]
+```
+The overlay above will perform the following changes to the configuration file:
+
+1.	Disable email verification
+2.	Set the correct client URL for the staging environment
+3.	Add the environment variable `ENVIRONMENT=staging`
+
+:::info
+Overlays are based on [RFC6902](https://www.rfc-editor.org/rfc/rfc6902)
+:::
+
+It's important to note that overlays in Nhost do not modify the original files, but rather manipulate the resulting configuration at runtime. This allows multiple environments to safely share the same base configuration and rely on the overlay to accommodate differences. Additionally, changes to the base configuration file will propagate to all environments unless an overlay operation prevents it, making overlays a convenient and efficient way to manage configuration differences.
+
+## Creating Overlays
+
+You can create overlays with the CLI command `nhost config edit [--subdomain $SUBDOMAIN]`:
+
+![open editor](/img/overlays/1.png)
+
+:::info
+If you need to create an overlay for your local development environment remember to use `local` as subdomain
+:::
+
+This will open an editor with the configuration for your `$SUBDOMAIN`:
+
+![editor](/img/overlays/2.png)
+
+You can perform as many changes as needed using overlays. For example, you can add an environment variable, enable Hasura remote permissions, and change the client URL.
+
+![editor](/img/overlays/3.png)
+
+You can verify the overlay by checking the file `nhost/overlays/$SUBDOMAIN.json`
+
+![verify overlay](/img/overlays/4.png)
+
+## Viewing Configuration
+
+To verify that your final configuration is correct, you can use the command `nhost config show [--subdomain $SUBDOMAIN]`. This command will apply the specified overlay (if it exists) and render the configuration using the local secrets.
+
+![view configuration](/img/overlays/5.png)
+
+## Validating Configuration
+
+Finally, you can validate your configuration overlay with the command `nhost config validate [--subdomain $SUBDOMAIN]`
+
+![view configuration](/img/overlays/6.png)

docs/docs/cli/patching-local-environment.mdx

@@ -1,108 +0,0 @@
----
-title: 'Patching Local Environment'
-sidebar_label: 'Patching Local Environment'
-sidebar_position: 4
----
-
-In some cases you may need to modify your configuration file to accommodate minor deviations from your production environment. For instance, imagine your `nhost.toml` file looks like:
-
-```
-[global]
-[[global.environment]]
-name = 'ENVIRONMENT'
-value = 'production'
-
-... (omitted for brevity)
-
-[hasura]
-version = 'v2.24.1-ce'
-
-... (omitted for brevity)
-
-[hasura.logs]
-level = 'warn'
-
-... (omitted for brevity)
-
-[auth.redirections]
-clientUrl = 'https://my.app.com'
-
-... (omitted for brevity)
-
-[auth.method.oauth]
-[auth.method.oauth.apple]
-enabled = true
-clientId = '{{ secrets.APPLE_CLIENT_ID }}'
-keyId = '{{ secrets.APPLE_KEY_ID }}'
-teamId = '{{ secrets.APPLE_TEAM_ID }}'
-privateKey = '{{ secrets.APPLE_PRIVATE_KEY }}'
-
-... (omitted for brevity)
-
-```
-
-While this may work in production you may want to do minor tweaks in your local development. To do so we rely on [JSON patches RFC6902](https://datatracker.ietf.org/doc/html/rfc6902). To make use of it just drop a file under `nhost/overlays/local.yaml`. For instance, a file with the following contents would apply minor modifications to your local environment without affecting production:
-
-```
-- op: replace
-  path: /hasura/version               # override hasura version
-  value: "v2.25.1-ce"
-
-- op: replace
-  path: /global/environment/0         # replace first environment variables
-  value:
-    name: ENVIRONMENT
-    value: development
-
-- op: add                             # add a new env var
-  path: /global/environment/-
-  value:
-    name: FUNCTION_LOG_LEVEL
-    value: debug
-
-- op: replace                         # change the client url to local
-  path: /auth/redirections/clientUrl
-  value: http://localhost:3000
-
-- op: remove                          # remove apple authentication
-  path: /auth/method/oauth/apple
-```
-
-To verify that the file is being manipulated as we desire we can use the `nhost` cli:
-
-```
-$ nhost config show
-[global]
-[[global.environment]]
-name = 'ENVIRONMENT'
-value = 'development'
-
-[[global.environment]]
-name = 'FUNCTION_LOG_LEVEL'
-value = 'debug'
-
-... (omitted for brevity)
-
-[hasura]
-version = 'v2.25.1-ce'
-
-... (omitted for brevity)
-
-[auth.redirections]
-clientUrl = 'http://localhost:3000'
-
-... (omitted for brevity)
-
-[auth.method.oauth]
-[auth.method.oauth.apple]
-enabled = false
-
-... (omitted for brevity)
-
-```
-
-Once you have finished making changes, don't forget to restart your development environment by running the command `nhost up` after modifying your configuration.
-
-:::info
-While it may be convenient to modify your local environment for development, the further it deviates from production, the harder it is to detect issues before release. Therefore, we recommend keeping changes strictly necessary
-:::

docs/docs/graphql/remote-schemas/stripe.mdx

@@ -138,13 +138,21 @@ export default server
 
 Add `STRIPE_SECRET_KEY` as an environment variable.
 
-If you're using Nhost, add `STRIPE_SECRET_KEY` to `.env.development` like this:
+If you're using Nhost, add `STRIPE_SECRET_KEY` to `nhost.toml` like this:
+
+```
+[[ global.environment ]]
+name=STRIPE_SECRET_KEY
+value='{{ secrets.STRIPE_SECRET_KEY }}'
+```
+
+And then add to your `.secrets` file:
 
 ```
 STRIPE_SECRET_KEY=sk_test_***
 ```
 
-And add the production key (`sk_live_***`) to [environment variables](/platform/environment-variables) in the Nhost dashboard.
+In production set your secret with your stripe production key (`sk_live_***`) in the Nhost dashboard.
 
 Learn more about [Stripe API keys](https://stripe.com/docs/keys#obtain-api-keys).
 

docs/docs/platform/environment-variables.mdx

@@ -6,10 +6,6 @@ image: /img/og/platform/environment-variables.png
 
 Environment Variables are key-value pairs configured outside your source code. They are used to store environment-specific values such as API keys.
 
-You can manage your project's Environment Variables in Nhost Dashboard under **Variables**. When you define a new variable, you can set one value for **production** and one for **development**.
-
-![Environment Variables](/img/platform/environment-variables/environment-variables.png)
-
 Environment Variables are available for:
 
 - [Hasura GraphQL Engine](/graphql)
@@ -17,13 +13,44 @@ Environment Variables are available for:
 
 When an Environment Variable has updated the changes happen immediately for Hasura GraphQL Engine. For Serverless Functions, a new deployment via [Git](/platform/git) is required.
 
+## Custom Environment Variables
+
+You can manage your project's Environment Variables in the Nhost Dashboard or by using the configuration file.
+
+### Dashboard
+
+![Environment Variables](/img/platform/environment-variables/environment-variables.png)
+
+Environment Variables can be managed in the Nhost Dashboard under **Settings** → **Environment Variables**.
+
+### Configuration File
+
+Environment Variables can also be managed by adding new `[[global.environment]]` sections to the `nhost.toml` file.
+
+```toml
+[global]
+[[global.environment]]
+name = 'MY_ENV_VAR'
+value = '<first-value>'
+
+[[global.environment]]
+name = 'MY_OTHER_ENV_VAR'
+value = '<second-value>'
+
+# ... omitted for brevity
+```
+
+These environment variables will also be available on the Nhost Dashboard after committing and pushing the changes to your Git repository.
+
 ## System Environment Variables
 
-System Environment Variables are automatically available in production and during local development. The following system Environment Variables are available:
+System environment variables are automatically generated from the configuration file and your project's subdomain and region.
+
+The following system environment variables are available:
 
 - `NHOST_ADMIN_SECRET`
 - `NHOST_WEBHOOK_SECRET`
-- `NHOST_BACKEND_URL` ([deprecated](https://github.com/nhost/nhost/discussions/1319))
+- ~~`NHOST_BACKEND_URL`~~ ([deprecated](https://github.com/nhost/nhost/discussions/1319))
 - `NHOST_SUBDOMAIN`
 - `NHOST_REGION`
 - `NHOST_HASURA_URL`
@@ -33,7 +60,9 @@ System Environment Variables are automatically available in production and durin
 - `NHOST_FUNCTIONS_URL`
 - `NHOST_JWT_SECRET`
 
-Example values:
+`NHOST_ADMIN_SECRET`, `NHOST_WEBHOOK_SECRET` and `NHOST_JWT_SECRET` are populated with values from the configuration file. The rest of the system environment variables are populated with values from your project's subdomain and region.
+
+**Example values**:
 
 ```text
 NHOST_ADMIN_SECRET=e7w36ag287qn5qry795f6ymm57qgvqup
@@ -58,10 +87,3 @@ NHOST_FUNCTIONS_URL=https://abc123abc.functions.eu-central-1.nhost.run/v1
 
 NHOST_JWT_SECRET={"type": "HS256", "key": "vumpbe2w2mgaqj5yqfp7dvxu6kywtvsgb68ejpdaqxerea8jwrsszdp2dhkjxsh4df69pzm3ja6ukedx8ja43zdt6q9kgbgg2w9vh2sedeppukud9a2qzy29v3afdn7m"}
 ```
-
-## Development Environment Variables
-
-When developing locally using the [CLI](/cli), Environment Variables set in `.env.development` are available in your local environment. There are two ways to manage them:
-
-1. Edit the `.env.development` file manually.
-2. Add development Environment Variables in the Nhost Dashboard and use `nhost env pull` to sync them. This way, your team members will also have access to the same Environment Variables.

docs/docs/platform/multiple-environments.mdx

@@ -41,6 +41,11 @@ Once you've tested your changes in the staging environment, you can create a new
 
 This will automatically trigger a new deployment to the production project on the Nhost platform.
 
+## Configuration Overlays
+
+While Nhost uses a single file to deploy all of the environments connected to the same repository and branch, overlays allow you to accommodate for minor differences in those environments by allowing you to define rules to modify the base configuration. For details on overlays head to [Configuration Overlays](/cli/overlays)
+
+
 ## Summary
 
 Now you have two environments, one for staging and one for production. You can use this workflow to do local development, and test your changes in a staging environment before deploying them to production.

docs/docs/reference/cli/down.mdx

@@ -1,16 +0,0 @@
----
-title: 'down'
-sidebar_position: 3
----
-
-Delete all containers created by `nhost up`
-
-```bash
-nhost down
-```
-
-To delete all containers **and the local database**, append `--data` to the command.
-
-```bash
-nhost down --data
-```

docs/docs/reference/cli/global-flags.mdx

@@ -1,22 +0,0 @@
----
-title: 'Global Flags'
-sidebar_position: 9
----
-
-### `--debug`, `-d`
-
-Turn on debug output.
-
-```bash
-nhost up --debug
-nhost init -d
-```
-
-### `--log-file`, `-f`
-
-Save output to a given file.
-
-```bash
-nhost up -d --log-file some-file.txt
-nhost logs -f some-file.txt
-```

docs/docs/reference/cli/index.mdx

@@ -1,6 +0,0 @@
----
-title: 'CLI'
-sidebar_position: 1
----
-
-This section is a reference for the commands available in the [Nhost CLI](/cli).

docs/docs/reference/cli/init.mdx

@@ -1,24 +0,0 @@
----
-title: 'init'
-sidebar_position: 1
----
-
-Initialize a local Nhost project.
-
-```
-nhost init
-```
-
-If you have an existing Nhost project in Nhost Cloud that you want to use as a starting point for local development and for the [Git-based workflow](/platform/git), run `nhost init --remote`.
-
-The `nhost init --remote` command does the following:
-
-- Creates a new local Nhost project.
-- Pulls the database migrations and Hasura metadata from the Nhost Cloud project.
-- Resets the remote Nhost Cloud project's database migrations.
-
-:::warning
-
-The `nhost init --remote` command should only be run **once**. Running it multiple times will reset the remote Nhost Cloud project's database migrations which can cause migration conflict issues in your development team.
-
-:::

docs/docs/reference/cli/link.mdx

@@ -1,10 +0,0 @@
----
-title: 'link'
-sidebar_position: 4
----
-
-Link the local Nhost project in your working directory to a project in Nhost Cloud.
-
-```bash
-nhost link
-```

docs/docs/reference/cli/list.mdx

@@ -1,10 +0,0 @@
----
-title: 'list'
-sidebar_position: 7
----
-
-List projects in Nhost Cloud.
-
-```bash
-nhost list
-```

docs/docs/reference/cli/login.mdx

@@ -1,10 +0,0 @@
----
-title: 'login'
-sidebar_position: 5
----
-
-Authenticate the CLI with your Nhost user.
-
-```bash
-nhost login
-```

docs/docs/reference/cli/logout.mdx

@@ -1,10 +0,0 @@
----
-title: 'logout'
-sidebar_position: 6
----
-
-Remove authentication for the CLI.
-
-```bash
-nhost logout
-```

docs/docs/reference/cli/logs.mdx

@@ -1,10 +0,0 @@
----
-title: 'logs'
-sidebar_position: 9
----
-
-View logs of all services.
-
-```bash
-nhost logs
-```

docs/docs/reference/cli/up.mdx

@@ -1,19 +0,0 @@
----
-title: 'up'
-sidebar_position: 2
----
-
-To launch the development environment for your project, use the command `nhost up`. Once the environment is running, this command will
-
-- Apply database migrations.
-- Apply Hasura metadata.
-
-```bash
-nhost up
-```
-
-If it's the first time you start the project, [seed data](/database#seed-data) will be applied.
-
-## Stop
-
-Use `ctrl+c` to stop the development environment.

docs/docs/reference/cli/upgrade.mdx

@@ -1,10 +0,0 @@
----
-title: 'upgrade'
-sidebar_position: 8
----
-
-Upgrade the CLI to the latest version.
-
-```bash
-nhost upgrade
-```

docs/docs/reference/index.md

@@ -30,7 +30,3 @@ In this section:
 - [Getting started](/reference/vue)
 - [Protecting routes](/reference/vue/protecting-routes)
 - [Apollo GraphQL](/reference/vue/apollo)
-
-### Nhost CLI
-
-- [CLI overview](/reference/cli)

docs/docs/serverless-functions.mdx

@@ -69,12 +69,12 @@ HTTP endpoints are automatically generated based on the file structure inside `f
 
 Here's an example of four Serverless Functions with their files and their HTTP endpoints:
 
-| File                        | HTTP Endpoint                                                     |
-| --------------------------- | ----------------------------------------------------------------- |
-| `functions/index.js`        | `https://[project-subdomain].nhost.run/v1/functions/`             |
-| `functions/users/index.ts`  | `https://[project-subdomain].nhost.run/v1/functions/users`        |
-| `functions/users/active.ts` | `https://[project-subdomain].nhost.run/v1/functions/users/active` |
-| `functions/my-company.js`   | `https://[project-subdomain].nhost.run/v1/functions/my-company`   |
+| File                        | HTTP Endpoint                                                      |
+| --------------------------- | ------------------------------------------------------------------ |
+| `functions/index.js`        | `https://[subdomain].functions.[region].nhost.run/v1/`             |
+| `functions/users/index.ts`  | `https://[subdomain].functions.[region].nhost.run/v1/users`        |
+| `functions/users/active.ts` | `https://[subdomain].functions.[region].nhost.run/v1/users/active` |
+| `functions/my-company.js`   | `https://[subdomain].functions.[region].nhost.run/v1/my-company`   |
 
 You can prepend files and folders with an underscore (`_`) to prevent them from being treated as Serverless Functions and
 be turned into HTTP endpoints. This is useful if you have, for example, a utils file (`functions/_utils.js`) or a utils-f

docs/docs/storage.mdx

@@ -48,7 +48,7 @@ Learn more about [`upload()`](/reference/javascript/storage/upload).
   <TabItem value="http" label="HTTP" default>
 
 ```http
-POST /v1/storage/files HTTP/1.1
+POST https://local.storage.nhost.run/v1/files HTTP/1.1
 ```
 
   </TabItem>
@@ -80,7 +80,7 @@ Learn more about [`getPublicUrl()`](/reference/javascript/storage/get-public-url
   <TabItem value="http" label="HTTP" default>
 
 ```http
-GET /v1/storage/files/{file_id} HTTP/1.1
+GET https://local.storage.nhost.run/v1/files/{file_id} HTTP/1.1
 ```
 
   </TabItem>
@@ -109,7 +109,7 @@ Learn more about [`getPresignedUrl()`](/reference/javascript/storage/get-presign
   <TabItem value="http" label="HTTP" default>
 
 ```http
-GET /v1/storage/files/{file_id}/presignedurl HTTP/1.1
+GET https://local.storage.nhost.run/v1/files/{file_id}/presignedurl HTTP/1.1
 ```
 
   </TabItem>
@@ -132,7 +132,7 @@ Learn more about [`delete()`](/reference/javascript/storage/delete).
   <TabItem value="http" label="HTTP" default>
 
 ```http
-DELETE /v1/storage/files/{file_id} HTTP/1.1
+DELETE https://local.storage.nhost.run/v1/files/{file_id} HTTP/1.1
 ```
 
   </TabItem>
@@ -193,7 +193,7 @@ Image Transformation works on both public and pre-signed URLs.
 **Example**: Transform an image to 500px width (`?w=500`):
 
 ```text
-https://[subdomain].nhost.run/v1/storage/files/08e6fa32-0880-4d0e-a832-278198acb363?w=500
+https://[subdomain].storage.[region].nhost.run/v1/files/08e6fa32-0880-4d0e-a832-278198acb363?w=500
 ```
 
 ## Example: CRM System

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/docs",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.4.1",
-    "@tsconfig/docusaurus": "^1.0.6",
+    "@tsconfig/docusaurus": "^2.0.0",
     "typescript": "^4.8.4"
   },
   "browserslist": {

docs/sidebars.js

@@ -183,23 +183,6 @@ const sidebars = {
           dirName: 'reference/docgen/vue/content'
         }
       ]
-    },
-    {
-      type: 'category',
-      label: 'CLI',
-      link: { type: 'doc', id: 'reference/cli/index' },
-      items: [
-        'reference/cli/init',
-        'reference/cli/up',
-        'reference/cli/down',
-        'reference/cli/link',
-        'reference/cli/login',
-        'reference/cli/logout',
-        'reference/cli/list',
-        'reference/cli/upgrade',
-        'reference/cli/logs',
-        'reference/cli/global-flags'
-      ]
     }
   ]
 }

examples/codegen-react-apollo/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @nhost-examples/codegen-react-apollo
 
+## 0.1.10
+
+### Patch Changes
+
+- b3b64a3b7: chore(deps): bump `@types/react` to `v18.2.14` and `@types/react-dom` to `v18.2.6`
+- Updated dependencies [b3b64a3b7]
+  - @nhost/react-apollo@5.0.29
+  - @nhost/react@2.0.25
+
 ## 0.1.9
 
 ### Patch Changes

examples/codegen-react-apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost-examples/codegen-react-apollo",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "private": true,
   "scripts": {
     "codegen": "graphql-codegen",
@@ -29,8 +29,8 @@
     "@graphql-typed-document-node/core": "^3.1.1",
     "@tailwindcss/forms": "^0.5.3",
     "@types/node": "^18.11.9",
-    "@types/react": "^18.0.34",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
     "@vitejs/plugin-react": "^3.0.0",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.19",

examples/codegen-react-query/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nhost-examples/codegen-react-query
 
+## 0.1.11
+
+### Patch Changes
+
+- b3b64a3b7: chore(deps): bump `@types/react` to `v18.2.14` and `@types/react-dom` to `v18.2.6`
+- Updated dependencies [b3b64a3b7]
+  - @nhost/react@2.0.25
+
 ## 0.1.10
 
 ### Patch Changes

examples/codegen-react-query/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost-examples/codegen-react-query",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "private": true,
   "scripts": {
     "codegen": "graphql-codegen",
@@ -30,8 +30,8 @@
     "@graphql-typed-document-node/core": "^3.1.1",
     "@tailwindcss/forms": "^0.5.3",
     "@types/node": "^16.11.56",
-    "@types/react": "^18.0.34",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
     "autoprefixer": "^10.4.13",
     "eslint": "^8.23.0",
     "postcss": "^8.4.20",

examples/codegen-react-urql/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @nhost-examples/react-urql
 
+## 0.0.7
+
+### Patch Changes
+
+- b3b64a3b7: chore(deps): bump `@types/react` to `v18.2.14` and `@types/react-dom` to `v18.2.6`
+- Updated dependencies [b3b64a3b7]
+  - @nhost/react-urql@2.0.26
+  - @nhost/react@2.0.25
+
 ## 0.0.6
 
 ### Patch Changes

examples/codegen-react-urql/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nhost-examples/codegen-react-urql",
   "private": true,
-  "version": "0.0.6",
+  "version": "0.0.7",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -23,8 +23,8 @@
     "@graphql-typed-document-node/core": "^3.1.1",
     "@tailwindcss/forms": "^0.5.3",
     "@types/node": "^16.11.7",
-    "@types/react": "^18.0.34",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
     "@vitejs/plugin-react": "^3.0.0",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.19",

examples/nextjs/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @nhost-examples/nextjs
 
+## 0.1.12
+
+### Patch Changes
+
+- b3b64a3b7: chore(deps): bump `@types/react` to `v18.2.14` and `@types/react-dom` to `v18.2.6`
+- Updated dependencies [b3b64a3b7]
+  - @nhost/react-apollo@5.0.29
+  - @nhost/react@2.0.25
+  - @nhost/nextjs@1.13.31
+
 ## 0.1.11
 
 ### Patch Changes

examples/nextjs/nhost/metadata/backend_configs.yaml

@@ -0,0 +1 @@
+{}