[front] - refac: rename NewDialog -> Dialog (#10167)

* refacto: rename NewDialog -> Dialog * [front] - fix: update @dust-tt/sparkle to stable version - Upgraded @dust-tt/sparkle dependency from 0.2.372-rc-1 to 0.2.372 removing the release candidate postfix - Updated package-lock.json to reflect the new stable version with updated integrity SHA
dust-tt · Jan 23, 2025 · 303b225 · 303b225
1 parent 33d472a
commit 303b225
Show file tree

Hide file tree

Showing 30 changed files with 520 additions and 530 deletions.
diff --git a/front/components/Confirm.tsx b/front/components/Confirm.tsx
@@ -1,10 +1,10 @@
 import {
-  NewDialog,
-  NewDialogContent,
-  NewDialogDescription,
-  NewDialogFooter,
-  NewDialogHeader,
-  NewDialogTitle,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
 } from "@dust-tt/sparkle";
 import React from "react";
 import { createPortal } from "react-dom";
@@ -70,7 +70,7 @@ export function ConfirmDialog({
   closeDialogFn: () => void;
 }) {
   return (
-    <NewDialog
+    <Dialog
       open={confirmData != null}
       onOpenChange={(open) => {
         if (!open) {
@@ -79,14 +79,12 @@ export function ConfirmDialog({
         }
       }}
     >
-      <NewDialogContent size="md">
-        <NewDialogHeader hideButton>
-          <NewDialogTitle>{confirmData?.title ?? ""}</NewDialogTitle>
-          <NewDialogDescription>
-            {confirmData?.message ?? ""}
-          </NewDialogDescription>
-        </NewDialogHeader>
-        <NewDialogFooter
+      <DialogContent size="md">
+        <DialogHeader hideButton>
+          <DialogTitle>{confirmData?.title ?? ""}</DialogTitle>
+          <DialogDescription>{confirmData?.message ?? ""}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter
           leftButtonProps={{
             label: "Cancel",
             variant: "outline",
@@ -104,7 +102,7 @@ export function ConfirmDialog({
             },
           }}
         />
-      </NewDialogContent>
-    </NewDialog>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/front/components/ConnectorPermissionsModal.tsx b/front/components/ConnectorPermissionsModal.tsx
@@ -4,18 +4,18 @@ import {
   Button,
   CloudArrowLeftRightIcon,
   ContentMessage,
+  Dialog,
+  DialogContainer,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
   Hoverable,
   Icon,
   Input,
   LockIcon,
   Modal,
-  NewDialog,
-  NewDialogContainer,
-  NewDialogContent,
-  NewDialogFooter,
-  NewDialogHeader,
-  NewDialogTitle,
-  NewDialogTrigger,
   Page,
   Sheet,
   SheetContainer,
@@ -402,25 +402,25 @@ function DataSourceEditionModal({
         )}
 
         <div className="flex items-center justify-center">
-          <NewDialog>
-            <NewDialogTrigger>
+          <Dialog>
+            <DialogTrigger>
               <Button
                 label="Edit Permissions"
                 icon={LockIcon}
                 variant="warning"
                 disabled={!isExtraConfigValid(extraConfig)}
               />
-            </NewDialogTrigger>
-            <NewDialogContent>
-              <NewDialogHeader>
-                <NewDialogTitle>Are you sure?</NewDialogTitle>
-              </NewDialogHeader>
-              <NewDialogContainer>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Are you sure?</DialogTitle>
+              </DialogHeader>
+              <DialogContainer>
                 The changes you are about to make may break existing{" "}
                 {connectorConfiguration.name} Data sources and the assistants
                 using them. Are you sure you want to continue?
-              </NewDialogContainer>
-              <NewDialogFooter
+              </DialogContainer>
+              <DialogFooter
                 leftButtonProps={{
                   label: "Cancel",
                   variant: "outline",
@@ -433,8 +433,8 @@ function DataSourceEditionModal({
                   },
                 }}
               />
-            </NewDialogContent>
-          </NewDialog>
+            </DialogContent>
+          </Dialog>
         </div>
       </>
     </DataSourceManagementModal>
@@ -537,30 +537,30 @@ function DataSourceDeletionModal({
           </div>
         </div>
         <div className="flex items-center justify-center">
-          <NewDialog>
-            <NewDialogTrigger>
+          <Dialog>
+            <DialogTrigger>
               <Button
                 label="Delete Connection"
                 icon={LockIcon}
                 variant="warning"
               />
-            </NewDialogTrigger>
-            <NewDialogContent>
-              <NewDialogHeader>
-                <NewDialogTitle>Are you sure?</NewDialogTitle>
-              </NewDialogHeader>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Are you sure?</DialogTitle>
+              </DialogHeader>
               {isLoading ? (
                 <div className="flex justify-center py-8">
                   <Spinner variant="dark" size="md" />
                 </div>
               ) : (
                 <>
-                  <NewDialogContainer>
+                  <DialogContainer>
                     The changes you are about to make will break existing
                     assistants using {connectorConfiguration.name}. Are you sure
                     you want to continue?
-                  </NewDialogContainer>
-                  <NewDialogFooter
+                  </DialogContainer>
+                  <DialogFooter
                     leftButtonProps={{
                       label: "Cancel",
                       variant: "outline",
@@ -575,8 +575,8 @@ function DataSourceDeletionModal({
                   />
                 </>
               )}
-            </NewDialogContent>
-          </NewDialog>
+            </DialogContent>
+          </Dialog>
         </div>
       </>
     </DataSourceManagementModal>

diff --git a/front/components/app/ReachedLimitPopup.tsx b/front/components/app/ReachedLimitPopup.tsx
@@ -1,11 +1,11 @@
 import {
+  Dialog,
+  DialogContainer,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
   Hoverable,
-  NewDialog,
-  NewDialogContainer,
-  NewDialogContent,
-  NewDialogFooter,
-  NewDialogHeader,
-  NewDialogTitle,
   Page,
 } from "@dust-tt/sparkle";
 import type { SubscriptionType, WorkspaceType } from "@dust-tt/types";
@@ -183,20 +183,20 @@ export function ReachedLimitPopup({
         isOpened={isFairUsageModalOpened}
         onClose={() => setIsFairUsageModalOpened(false)}
       />
-      <NewDialog
+      <Dialog
         open={isOpened}
         onOpenChange={(open) => {
           if (!open) {
             onClose();
           }
         }}
       >
-        <NewDialogContent>
-          <NewDialogHeader>
-            <NewDialogTitle>{title}</NewDialogTitle>
-          </NewDialogHeader>
-          <NewDialogContainer>{children}</NewDialogContainer>
-          <NewDialogFooter
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+          </DialogHeader>
+          <DialogContainer>{children}</DialogContainer>
+          <DialogFooter
             leftButtonProps={{
               label: "Cancel",
               variant: "outline",
@@ -207,8 +207,8 @@ export function ReachedLimitPopup({
               onClick: onValidate || (() => onClose()),
             }}
           />
-        </NewDialogContent>
-      </NewDialog>
+        </DialogContent>
+      </Dialog>
     </>
   );
 }
diff --git a/front/components/assistant/DeleteAssistantDialog.tsx b/front/components/assistant/DeleteAssistantDialog.tsx
@@ -1,11 +1,11 @@
 import {
-  NewDialog,
-  NewDialogContainer,
-  NewDialogContent,
-  NewDialogDescription,
-  NewDialogFooter,
-  NewDialogHeader,
-  NewDialogTitle,
+  Dialog,
+  DialogContainer,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
 } from "@dust-tt/sparkle";
 import type {
   LightAgentConfigurationType,
@@ -42,18 +42,18 @@ export function DeleteAssistantDialog({
   const doDelete = useDeleteAgentConfiguration({ owner, agentConfiguration });
 
   return (
-    <NewDialog
+    <Dialog
       open={isOpen}
       onOpenChange={(open) => {
         if (!open) {
           onClose();
         }
       }}
     >
-      <NewDialogContent size="md" isAlertDialog>
-        <NewDialogHeader hideButton>
-          <NewDialogTitle>Deleting the assistant</NewDialogTitle>
-          <NewDialogDescription>
+      <DialogContent size="md" isAlertDialog>
+        <DialogHeader hideButton>
+          <DialogTitle>Deleting the assistant</DialogTitle>
+          <DialogDescription>
             {isPrivateAssistant ? (
               "Deleting the assistant will be permanent."
             ) : (
@@ -70,12 +70,12 @@ export function DeleteAssistantDialog({
                 This will permanently delete the assistant for everyone.
               </div>
             )}
-          </NewDialogDescription>
-        </NewDialogHeader>
-        <NewDialogContainer>
+          </DialogDescription>
+        </DialogHeader>
+        <DialogContainer>
           <div className="font-bold">Are you sure you want to proceed?</div>
-        </NewDialogContainer>
-        <NewDialogFooter
+        </DialogContainer>
+        <DialogFooter
           leftButtonProps={{
             label: "Cancel",
             variant: "outline",
@@ -91,7 +91,7 @@ export function DeleteAssistantDialog({
             },
           }}
         />
-      </NewDialogContent>
-    </NewDialog>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/front/components/assistant/conversation/DeleteConversationsDialog.tsx b/front/components/assistant/conversation/DeleteConversationsDialog.tsx
@@ -1,11 +1,11 @@
 import {
-  NewDialog,
-  NewDialogContainer,
-  NewDialogContent,
-  NewDialogDescription,
-  NewDialogFooter,
-  NewDialogHeader,
-  NewDialogTitle,
+  Dialog,
+  DialogContainer,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
   Spinner,
 } from "@dust-tt/sparkle";
 import React from "react";
@@ -38,22 +38,22 @@ export const DeleteConversationsDialog = ({
       : `Are you sure you want to delete ${selectedCount} conversation${selectedCount && selectedCount > 1 ? "s" : ""}?`;
 
   return (
-    <NewDialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
-      <NewDialogContent>
-        <NewDialogHeader>
-          <NewDialogTitle>{title}</NewDialogTitle>
-          <NewDialogDescription>{description}</NewDialogDescription>
-        </NewDialogHeader>
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
         {isDeleting ? (
           <div className="flex justify-center py-8">
             <Spinner variant="dark" size="md" />
           </div>
         ) : (
           <>
-            <NewDialogContainer>
+            <DialogContainer>
               <b>This action cannot be undone.</b>
-            </NewDialogContainer>
-            <NewDialogFooter
+            </DialogContainer>
+            <DialogFooter
               leftButtonProps={{
                 label: "Cancel",
                 variant: "outline",
@@ -69,7 +69,7 @@ export const DeleteConversationsDialog = ({
             />
           </>
         )}
-      </NewDialogContent>
-    </NewDialog>
+      </DialogContent>
+    </Dialog>
   );
 };