Merge upstream changes

.changeset/eleven-experts-rule.md

@@ -0,0 +1,9 @@
+---
+'@nhost/hasura-auth-js': minor
+'@nhost-examples/react-apollo': minor
+'@nhost-examples/vue-apollo': minor
+'@nhost/react': minor
+'@nhost/vue': minor
+---
+
+feat: add 'elevateEmailSecurityKey' to the SDKs along with integration into react-apollo and vue-apollo examples

.changeset/spicy-ducks-dress.md

@@ -0,0 +1,7 @@
+---
+'@nhost-examples/nextjs-server-components': minor
+'@nhost/hasura-storage-js': minor
+'@nhost/docs': minor
+---
+
+feat: Add support for authenticated download of files

docs/guides/ai/local-development.mdx

@@ -0,0 +1,45 @@
+---
+title: "Local Development"
+icon: code
+---
+
+If you are using the Nhost CLI for local development, as of [v0.12.0](https://github.com/nhost/cli/releases/tag/v1.12.0) you can also start Graphite locally. To do so, follow the next steps:
+
+
+
+<Steps>
+  <Step title="Configuring the Service">
+    Follow the steps highlighed in the ["Enabling Service"](enabling-service) guide and don't forget to add the relevant secrets to your `.secrets` file.
+  </Step>
+  <Step title="Start nhost">
+    Run `nhost up`:
+
+    ![nhost up](/images/guides/ai/local-development/nhost_up.png)
+
+    After starting the service the first thing you will notice is that there is a new `ai` service running.
+  </Step>
+  <Step title="Commit metadata changes">
+    As you start the AI service metadata changes may be proposed:
+
+    ![git status](/images/guides/ai/local-development/git_status.png)
+
+    We strongly recommmend you to commit them to your git repository so they can be deployed alongside your application.
+  </Step>
+</Steps>
+
+
+### Synhcronizing Auto-Embeddings
+
+If you add [auto-embeddings](/guides/ai/auto-embeddings) configuration locally and want to synchronize them with the cloud we recommend inserting them using a migration rather than with the auto-embeddings UI:
+
+![migration](/images/guides/ai/local-development/migration.png)
+
+And then running `nhost up` to download the updated metadata. Afterwards you should see both database migrations and functions' metadata changes in your local project:
+
+![git status](/images/guides/ai/local-development/git_status_functions.png)
+
+Pushing them to your deployment branch will also deploy them to your cloud project.
+
+### Synhcronizing Assistants
+
+Similar to auto-embeddings, if you want to synchronize [assistants](/guides/ai/assistants) we recommend you to insert them using a migration and then running `nhost up` to update any metadata if necessary. After pushing the proposed changes to the deployment branch all the changes should be deployed to the cloud project.

docs/mint.json

@@ -102,7 +102,7 @@
         "group": "AI",
         "pages": [
             "guides/ai/enabling-service",
-            "guides/ai/local_development",
+            "guides/ai/local-development",
             "guides/ai/auto-embeddings",
             "guides/ai/assistants",
             "guides/ai/dev-assistant"
@@ -319,12 +319,13 @@
               "group": "Storage",
               "pages": [
                 "reference/javascript/storage/hasura-storage-client",
-                "reference/javascript/storage/delete",
+                "reference/javascript/storage/upload",
+                "reference/javascript/storage/download",
                 "reference/javascript/storage/get-presigned-url",
                 "reference/javascript/storage/get-public-url",
+                "reference/javascript/storage/delete",
                 "reference/javascript/storage/set-access-token",
-                "reference/javascript/storage/set-admin-secret",
-                "reference/javascript/storage/upload"
+                "reference/javascript/storage/set-admin-secret"
               ]
             },
             {

docs/reference/javascript/storage/download.mdx

@@ -0,0 +1,27 @@
+---
+title: download()
+sidebarTitle: download()
+---
+
+Use `nhost.storage.download` to download a file. To download a file the user must have permission to select the file in the `storage.files` table.
+
+```ts
+const { file, error } = await nhost.storage.download({ fileId: '<File-ID>' })
+```
+
+## Parameters
+
+---
+
+**<span className="parameter-name">params</span>** <span className="optional-status">required</span> [`StorageDownloadFileParams`](/reference/javascript/storage/types/storage-download-file-params)
+
+| Property                                                                                   | Type                                      | Required | Notes                                                        |
+| :----------------------------------------------------------------------------------------- | :---------------------------------------- | :------: | :----------------------------------------------------------- |
+| <span className="parameter-name"><span className="light-grey">params.</span>fileId</span>  | <code>string</code>                       |    ✔️    |                                                              |
+| <span className="parameter-name"><span className="light-grey">params.</span>blur</span>    | <code>number</code>                       |          | Image blur, between 0 and 100                                |
+| <span className="parameter-name"><span className="light-grey">params.</span>quality</span> | <code>number</code>                       |          | Image quality, between 1 and 100, 100 being the best quality |
+| <span className="parameter-name"><span className="light-grey">params.</span>height</span>  | <code>number</code>                       |          | Image height, in pixels                                      |
+| <span className="parameter-name"><span className="light-grey">params.</span>width</span>   | <code>number</code>                       |          | Image width, in pixels                                       |
+| <span className="parameter-name"><span className="light-grey">params.</span>headers</span> | <code>Record&lt;string, string&gt;</code> |          | Optional headers to be sent with the request                 |
+
+---

docs/reference/javascript/storage/types/storage-download-file-params.mdx

@@ -0,0 +1,45 @@
+---
+title: StorageDownloadFileParams
+sidebarTitle: StorageDownloadFileParams
+description: No description provided.
+---
+
+# `StorageDownloadFileParams`
+
+## Parameters
+
+---
+
+**<span className="parameter-name">fileId</span>** <span className="optional-status">required</span> <code>string</code>
+
+---
+
+**<span className="parameter-name">blur</span>** <span className="optional-status">optional</span> <code>number</code>
+
+Image blur, between 0 and 100
+
+---
+
+**<span className="parameter-name">quality</span>** <span className="optional-status">optional</span> <code>number</code>
+
+Image quality, between 1 and 100, 100 being the best quality
+
+---
+
+**<span className="parameter-name">height</span>** <span className="optional-status">optional</span> <code>number</code>
+
+Image height, in pixels
+
+---
+
+**<span className="parameter-name">width</span>** <span className="optional-status">optional</span> <code>number</code>
+
+Image width, in pixels
+
+---
+
+**<span className="parameter-name">headers</span>** <span className="optional-status">optional</span> <code>Record&lt;string, string&gt;</code>
+
+Optional headers to be sent with the request
+
+---

docs/reference/javascript/storage/types/storage-download-file-response.mdx

@@ -0,0 +1,13 @@
+---
+title: StorageDownloadFileResponse
+sidebarTitle: StorageDownloadFileResponse
+description: No description provided.
+---
+
+# `StorageDownloadFileResponse`
+
+```ts
+type StorageDownloadFileResponse =
+  | { file: Blob; error: null }
+  | { file: null; error: Error }
+```

examples/quickstarts/nextjs-server-components/src/components/input.tsx

@@ -2,7 +2,7 @@
 
 import { DetailedHTMLProps, HTMLProps } from 'react'
 // @ts-ignore
-import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+import { useFormStatus } from 'react-dom'
 
 export default function Input({
   id,

examples/quickstarts/nextjs-server-components/src/components/submit-button.tsx

@@ -2,12 +2,12 @@
 
 import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react'
 // @ts-ignore
-import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+import { useFormStatus } from 'react-dom'
 import { twMerge } from 'tailwind-merge'
 
 type ButtonProps = {
-  type?: 'button' | 'submit' | 'reset' | undefined;
-} & DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+  type?: 'button' | 'submit' | 'reset' | undefined
+} & DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
 
 export default function SubmitButton({
   disabled,
@@ -16,7 +16,7 @@ export default function SubmitButton({
   children,
   ...rest
 }: ButtonProps) {
-  const { pending } = useFormStatus();
+  const { pending } = useFormStatus()
 
   return (
     <button
@@ -33,5 +33,5 @@ export default function SubmitButton({
     >
       {children}
     </button>
-  );
-}
+  )
+}

examples/quickstarts/nextjs-server-components/src/components/todo-item.tsx

@@ -32,6 +32,20 @@ const TodoItem = ({ todo }: { todo: Todo }) => {
     await deleteTodo(todo.id)
   }
 
+  const handleDownloadAttachment = async () => {
+    if (todo.attachment) {
+      const response = await nhost.storage.download({ fileId: todo.attachment.id })
+      if (response.file) {
+        const url = window.URL.createObjectURL(response.file)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = todo.title
+        a.click()
+        window.URL.revokeObjectURL(url)
+      }
+    }
+  }
+
   return (
     <div
       className={twMerge(
@@ -74,6 +88,12 @@ const TodoItem = ({ todo }: { todo: Todo }) => {
         </Link>
       )}
 
+      <button onClick={handleDownloadAttachment} className="w-6 h-6">
+        <svg xmlns="http://www.w3.org/2000/svg" strokeWidth={1.5} viewBox="0 0 512 512">
+          <path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" />
+        </svg>
+      </button>
+
       <button onClick={handleDeleteTodo} className="w-6 h-6">
         <svg
           xmlns="http://www.w3.org/2000/svg"

examples/quickstarts/nhost-backend/nhost/metadata/databases/default/tables/storage_files.yaml

@@ -54,16 +54,17 @@ insert_permissions:
     permission:
       check: {}
       columns:
-        - is_uploaded
-        - size
-        - bucket_id
-        - etag
-        - mime_type
-        - name
+        - id
         - created_at
         - updated_at
-        - id
+        - bucket_id
+        - name
+        - size
+        - mime_type
+        - etag
+        - is_uploaded
         - uploaded_by_user_id
+        - metadata
   - role: user
     permission:
       check: {}
@@ -78,16 +79,17 @@ select_permissions:
   - role: public
     permission:
       columns:
-        - is_uploaded
-        - size
-        - bucket_id
-        - etag
-        - mime_type
-        - name
+        - id
         - created_at
         - updated_at
-        - id
+        - bucket_id
+        - name
+        - size
+        - mime_type
+        - etag
+        - is_uploaded
         - uploaded_by_user_id
+        - metadata
       filter: {}
   - role: user
     permission:

examples/quickstarts/nhost-backend/nhost/nhost.toml

@@ -146,7 +146,7 @@ version = '14.6-20230406-2'
 [provider]
 
 [storage]
-version = '0.4.0'
+version = '0.5.1'
 
 [observability]
 [observability.grafana]

examples/react-apollo/graphql.config.yaml

@@ -1,5 +1,5 @@
 schema:
-  - http://local.graphql.nhost.run/v1:
+  - https://local.hasura.nhost.run/v1/graphql:
       headers:
         x-hasura-admin-secret: nhost-admin-secret
         x-hasura-role: user
@@ -15,7 +15,6 @@ generates:
         bigint: number
         citext: string
         timestamptz: string
-
     plugins:
       - typescript
       - typescript-operations

examples/react-apollo/nhost/metadata/databases/default/tables/public_notes.yaml

@@ -0,0 +1,62 @@
+table:
+  name: notes
+  schema: public
+configuration:
+  column_config:
+    created_at:
+      custom_name: createdAt
+    updated_at:
+      custom_name: updatedAt
+  custom_column_names:
+    created_at: createdAt
+    updated_at: updatedAt
+  custom_root_fields:
+    delete: deleteNotes
+    delete_by_pk: deleteNote
+    insert: inserNotes
+    insert_one: insertNote
+    select_aggregate: notesAggregate
+    select_by_pk: note
+    update: updateNotes
+    update_by_pk: updateNote
+object_relationships:
+  - name: user
+    using:
+      foreign_key_constraint_on: user_id
+insert_permissions:
+  - role: user
+    permission:
+      check:
+        user_id:
+          _eq: x-hasura-auth-elevated
+      set:
+        user_id: x-hasura-User-Id
+      columns:
+        - content
+select_permissions:
+  - role: user
+    permission:
+      columns:
+        - content
+        - created_at
+        - id
+        - updated_at
+      filter:
+        user_id:
+          _eq: X-Hasura-User-Id
+      allow_aggregations: true
+update_permissions:
+  - role: user
+    permission:
+      columns:
+        - content
+      filter:
+        user_id:
+          _eq: x-hasura-auth-elevated
+      check: null
+delete_permissions:
+  - role: user
+    permission:
+      filter:
+        user_id:
+          _eq: x-hasura-auth-elevated

examples/react-apollo/nhost/metadata/databases/default/tables/tables.yaml

@@ -7,6 +7,7 @@
 - "!include auth_user_roles.yaml"
 - "!include auth_user_security_keys.yaml"
 - "!include auth_users.yaml"
+- "!include public_notes.yaml"
 - "!include public_todos.yaml"
 - "!include storage_buckets.yaml"
 - "!include storage_files.yaml"