From 36641924d210a42f9fe8fb9d5e2ad313adcaf804 Mon Sep 17 00:00:00 2001
From: Stanislas Polu <spolu@proton.me>
Date: Fri, 29 Sep 2023 12:32:27 +0200
Subject: [PATCH] Fix modal actions (#1878)

---
 sparkle/package-lock.json             | 4 ++--
 sparkle/package.json                  | 2 +-
 sparkle/src/components/Modal.tsx      | 4 +++-
 sparkle/src/stories/Modal.stories.tsx | 6 ++++++
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
index ac6bf8bdf590..bb5e70815139 100644
--- a/sparkle/package-lock.json
+++ b/sparkle/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.1.89",
+  "version": "0.1.92",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@dust-tt/sparkle",
-      "version": "0.1.89",
+      "version": "0.1.92",
       "license": "ISC",
       "dependencies": {
         "@headlessui/react": "^1.7.17"
diff --git a/sparkle/package.json b/sparkle/package.json
index 183f76db7616..e8356d7fe414 100644
--- a/sparkle/package.json
+++ b/sparkle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.1.91",
+  "version": "0.1.92",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",
diff --git a/sparkle/src/components/Modal.tsx b/sparkle/src/components/Modal.tsx
index f9e0142b04a2..56c62e54e2d0 100644
--- a/sparkle/src/components/Modal.tsx
+++ b/sparkle/src/components/Modal.tsx
@@ -4,7 +4,7 @@ import React, { Fragment } from "react";
 import { classNames } from "@sparkle/lib/utils";
 
 import { BarHeader, BarHeaderButtonBarProps } from "./BarHeader";
-import { ButtonProps } from "./Button";
+import { Button, ButtonProps } from "./Button";
 
 interface ModalProps {
   isOpen: boolean;
@@ -20,6 +20,7 @@ interface ModalProps {
 export function Modal({
   isOpen,
   onClose,
+  action,
   children,
   hasChanged,
   onSave,
@@ -78,6 +79,7 @@ export function Modal({
               >
                 <BarHeader
                   title={title || ""}
+                  leftActions={action ? <Button {...action} /> : undefined}
                   rightActions={<BarHeader.ButtonBar {...buttonBarProps} />}
                 />
                 <div
diff --git a/sparkle/src/stories/Modal.stories.tsx b/sparkle/src/stories/Modal.stories.tsx
index 44cb3325c17b..90a0dec4662b 100644
--- a/sparkle/src/stories/Modal.stories.tsx
+++ b/sparkle/src/stories/Modal.stories.tsx
@@ -31,6 +31,12 @@ export const ModalExample = () => {
       <Modal
         isOpen={isOpenWithActionAndChange}
         onClose={() => setIsOpenWithActionAndChange(false)}
+        action={{
+          labelVisible: true,
+          label: "An action",
+          variant: "tertiary",
+          size: "xs",
+        }}
         hasChanged={true}
       >
         <div className="s-mt-4 s-h-72 s-text-left">I'm the modal content</div>