Merge upstream changes

dashboard/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @nhost/dashboard
 
+## 0.20.20
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.36
+- @nhost/nextjs@1.13.38
+
+## 0.20.19
+
+### Patch Changes
+
+- 75c4c8ae3: feat(dashboard): make env value input multiline
+
+## 0.20.18
+
+### Patch Changes
+
+- 425d485f8: fix(dashboard): make sure dedicated resources pricing follows total resources
+
 ## 0.20.17
 
 ### Patch Changes

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.20.17",
+  "version": "0.20.20",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",

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

@@ -128,6 +128,8 @@ export default function BaseEnvironmentVariableForm({
           error={!!errors.value}
           helperText={errors?.value?.message}
           fullWidth
+          multiline
+          rows={5}
           autoComplete="off"
           autoFocus={mode === 'edit'}
         />

docs/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @nhost/docs
 
+## 0.6.2
+
+### Patch Changes
+
+- 4fe4a1696: return `refreshToken` immediately after signIn and signUp
+
+## 0.6.1
+
+### Patch Changes
+
+- 612d75496: updated postgres and graphql documentation
+- 3b3e83a21: fix(docs): correct rendering of mermaid diagrams in dark mode
+- 765b398b2: added jit settings documentation
+- 30aae1557: minor fix to performance documentation
+- a3efc1d13: docs: added storage/antivirus documentation
+
 ## 0.6.0
 
 ### Minor Changes

docs/docs/database/extensions.mdx

@@ -140,7 +140,19 @@ The pg_stat_statements module provides a means for tracking planning and executi
 
 ### Managing
 
-Enabled by default.
+To install the extension you can create a migration with the following contents:
+
+```
+SET ROLE postgres;
+CREATE EXTENSION pg_stat_statements;
+```
+
+To uninstall it, you can use the following migration:
+
+```
+SET ROLE postgres;
+DROP EXTENSION pg_stat_statements;
+```
 
 ### Resources
 

docs/docs/database/performance.mdx

@@ -41,15 +41,20 @@ Monitoring slow queries is a highly effective method for tackling performance is
 
 [PgHero](https://github.com/ankane/pghero) is one of such tools you can use to idenfity and address slow queries. You can easily run pghero alongside your postgres with [Nhost Run](/run):
 
-1. Click on this [one-click install link](https://app.nhost.io:/run-one-click-install?config=eyJuYW1lIjoicGdoZXJvIiwiaW1hZ2UiOnsiaW1hZ2UiOiJkb2NrZXIuaW8vYW5rYW5lL3BnaGVybzpsYXRlc3QifSwiY29tbWFuZCI6W10sInJlc291cmNlcyI6eyJjb21wdXRlIjp7ImNwdSI6MTI1LCJtZW1vcnkiOjI1Nn0sInN0b3JhZ2UiOltdLCJyZXBsaWNhcyI6MX0sImVudmlyb25tZW50IjpbeyJuYW1lIjoiREFUQUJBU0VfVVJMIiwidmFsdWUiOiJwb3N0Z3JlczovL3Bvc3RncmVzOltQQVNTV09SRF1AcG9zdGdyZXMtc2VydmljZTo1NDMyL1tTVUJET01BSU5dP3NzbG1vZGU9ZGlzYWJsZSJ9LHsibmFtZSI6IlBHSEVST19VU0VSTkFNRSIsInZhbHVlIjoiW1VTRVJdIn0seyJuYW1lIjoiUEdIRVJPX1BBU1NXT1JEIiwidmFsdWUiOiJbUEFTU1dPUkRdIn1dLCJwb3J0cyI6W3sicG9ydCI6ODA4MCwidHlwZSI6Imh0dHAiLCJwdWJsaXNoIjp0cnVlfV19)
-2. Select your project:
+1. First, make sure the extension [pg_stat_statements](/database/extensions#pg_stat_statements) is enabled.
+
+2. Click on this [one-click install link](https://app.nhost.io:/run-one-click-install?config=eyJuYW1lIjoicGdoZXJvIiwiaW1hZ2UiOnsiaW1hZ2UiOiJkb2NrZXIuaW8vYW5rYW5lL3BnaGVybzpsYXRlc3QifSwiY29tbWFuZCI6W10sInJlc291cmNlcyI6eyJjb21wdXRlIjp7ImNwdSI6MTI1LCJtZW1vcnkiOjI1Nn0sInN0b3JhZ2UiOltdLCJyZXBsaWNhcyI6MX0sImVudmlyb25tZW50IjpbeyJuYW1lIjoiREFUQUJBU0VfVVJMIiwidmFsdWUiOiJwb3N0Z3JlczovL3Bvc3RncmVzOltQQVNTV09SRF1AcG9zdGdyZXMtc2VydmljZTo1NDMyL1tTVUJET01BSU5dP3NzbG1vZGU9ZGlzYWJsZSJ9LHsibmFtZSI6IlBHSEVST19VU0VSTkFNRSIsInZhbHVlIjoiW1VTRVJdIn0seyJuYW1lIjoiUEdIRVJPX1BBU1NXT1JEIiwidmFsdWUiOiJbUEFTU1dPUkRdIn1dLCJwb3J0cyI6W3sicG9ydCI6ODA4MCwidHlwZSI6Imh0dHAiLCJwdWJsaXNoIjp0cnVlfV19)
+
+3. Select your project:
 ![select your project](/img/database/performance/pghero_01.png)
-3. Replace the placeholders with your postgres password, subdomain and a user and password to protect your pghero service. Finally, click on create.
+
+4. Replace the placeholders with your postgres password, subdomain and a user and password to protect your pghero service. Finally, click on create.
 ![fill run service details](/img/database/performance/pghero_02.png)
-4. After confirming the service, copy the URL:
+
+5. After confirming the service, copy the URL:
 ![run service details](/img/database/performance/pghero_03.png)
 
-5. Finally, you can open the link you just copied to access pghero:
+6. Finally, you can open the link you just copied to access pghero:
 
 ![pghero](/img/database/performance/pghero_04.png)
 

docs/docs/database/settings.mdx

@@ -22,6 +22,7 @@ Below you can find the official schema (cue) and an example to configure your po
 
     // postgres settings of the same name in camelCase, optional
 	settings?: {
+        jit:                           "off" | "on" | *"on"
 		maxConnections:                int32 | *100
 		sharedBuffers:                 string | *"128MB"
 		effectiveCacheSize:            string | *"4GB"
@@ -54,6 +55,7 @@ cpu = 1000
 memory = 2048
 
 [postgres.settings]
+jit = "off"
 maxConnections = 100
 sharedBuffers = '256MB'
 effectiveCacheSize = '768MB'

docs/docs/graphql/permissions.mdx

@@ -144,6 +144,14 @@ One of the most common permission requirements is that authenticated users shoul
 1. Select the **columns** you want the user to be able to read. In our case, we'll allow the user to read all columns.
 1. Click **Save**.
 
+## Known issues
+
+### Permissions are slow
+
+In certain situations, permission checks can cause significant delays. One way to identify this issue is by comparing the execution time of a GraphQL query when performed as an admin versus as a regular user. To resolve such cases, disabling the Just-in-Time (JIT) compilation in [Postgres](/database/settings) can be beneficial.
+
+[Github issue](https://github.com/hasura/graphql-engine/issues/3672)
+
 ## Next Steps
 
 Hasura has more in-depth documentation related to permissions that you can learn from:

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/docs",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",

examples/quickstarts/nextjs-server-components/.env.development

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_NHOST_SUBDOMAIN=local
+NEXT_PUBLIC_NHOST_REGION=

examples/quickstarts/nextjs-server-components/.eslintrc.js

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

examples/quickstarts/nextjs-server-components/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/quickstarts/nextjs-server-components/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @nhost-examples/nextjs-server-components
+
+## 0.1.0
+
+### Minor Changes
+
+- 4fe4a1696: new quickstart project that demonstrates how to use the Nhost SDK with Next.js 13 server components
+
+### Patch Changes
+
+- @nhost/nhost-js@2.2.17

examples/quickstarts/nextjs-server-components/README.md

@@ -0,0 +1,70 @@
+# Nhost with Next.js Server Components
+
+This quickstart showcases how to correctly add authentication to a Next.js 13 project using the new App Router and Server Components. The other parts of the SDK (Storage / GraphQL/ Functions) should work the same as before.
+
+## Authentication
+
+1. **Saving the auth session**
+
+   To enable authentication with Server Components we have to store the auth session in a cookie. This should be done right after any **signIn** or **signUp** operation. See example [here](https://github.com/nhost/nhost/blob/main/examples/quickstarts/nextjs-server-components/src/app/server-actions/auth/sign-in-email-password.ts).
+
+2. **Oauth & refresh session middleware**
+
+   Create a middleware at the root of your project that calls the helper method `manageAuthSession`. Feel free to copy paste the the contents of the `/utils` folder to your project. The second argument for `manageAuthSession` is for handling the case where there's an error refreshing the current session with the `refreshToken` stored in the cookie.
+
+   ```typescript
+   import { manageAuthSession } from '@utils/nhost'
+   import { NextRequest, NextResponse } from 'next/server'
+
+   export async function middleware(request: NextRequest) {
+     return manageAuthSession(request, () =>
+       NextResponse.redirect(new URL('/auth/sign-in', request.url))
+     )
+   }
+   ```
+
+3. **Protected routes**
+
+   To make sure only authenticated users access some Server Components, wrap them in the Higher Order Server Component `withAuthAsync`.
+
+   ```typescript
+   import withAuthAsync from '@utils/auth-guard'
+
+   const MyProtectedServerComponent = async () => {
+     return <h2>Protected</h2>
+   }
+
+   export default withAuthAsync(MyProtectedServerComponent)
+   ```
+
+## Get Started
+
+1. Clone the repository
+
+   ```sh
+   git clone https://github.com/nhost/nhost
+   cd nhost
+   ```
+
+2. Install and build dependencies
+
+   ```sh
+   pnpm install
+   pnpm build
+   ```
+
+3. Terminal 1: Start the Nhost Backend
+
+   > Make sure you have the [Nhost CLI installed](https://docs.nhost.io/platform/cli).
+
+   ```sh
+   cd examples/quickstarts/nhost-backend
+   nhost up
+   ```
+
+4. Terminal 2: Start the Next.js application
+
+   ```sh
+   cd examples/quickstarts/nextjs-server-components
+   pnpm dev
+   ```

examples/quickstarts/nextjs-server-components/next.config.js

@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    serverActions: true
+  }
+}
+
+module.exports = nextConfig

examples/quickstarts/nextjs-server-components/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@nhost-examples/nextjs-server-components",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.8.2",
+    "@nhost/nhost-js": "workspace:^",
+    "autoprefixer": "10.4.15",
+    "cookies-next": "^3.0.0",
+    "eslint": "8.48.0",
+    "eslint-config-next": "13.4.19",
+    "form-data": "^4.0.0",
+    "js-cookie": "^3.0.5",
+    "next": "13.4.19",
+    "postcss": "8.4.29",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwind-merge": "^1.8.0",
+    "tailwindcss": "3.3.3",
+    "typescript": "5.2.2",
+    "xstate": "^4.38.2"
+  },
+  "devDependencies": {
+    "@types/js-cookie": "^3.0.2",
+    "@types/node": "20.5.6",
+    "@types/react": "18.2.21",
+    "@types/react-dom": "18.2.7"
+  }
+}

examples/quickstarts/nextjs-server-components/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

examples/quickstarts/nextjs-server-components/src/app/auth/sign-in/email-password/page.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import Input from '@components/input'
+import SubmitButton from '@components/submit-button'
+import { signIn } from '@server-actions/auth'
+import { useState } from 'react'
+
+export default function SignInWithEmailAndPassword() {
+  const [error, setError] = useState('')
+
+  async function handleSignIn(formData: FormData) {
+    const response = await signIn(formData)
+
+    if (response?.error) {
+      setError(response.error)
+    }
+  }
+
+  return (
+    <div className="flex flex-col items-center">
+      <h1 className="text-2xl font-semibold text-center">Sign in with email and password</h1>
+
+      {error && <p className="mt-3 font-semibold text-center text-red-500">{error}</p>}
+
+      <form className="w-full max-w-lg space-y-5" action={handleSignIn}>
+        <Input label="Email" id="email" name="email" type="email" required />
+
+        <Input label="Password" id="password" name="password" type="password" required />
+
+        <SubmitButton type="submit" className="w-full">
+          Sign in
+        </SubmitButton>
+      </form>
+    </div>
+  )
+}