fix(ui/tooltip.tsx): update tooltip class name to improve styling and animation

feat(modals/shareModal/index.tsx): add ConfirmationModal component for updating components and show confirmation dialog before updating
fix(types/components/index.ts): make index property optional in ConfirmationModalType

src/frontend/src/components/ui/tooltip.tsx

@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+        "z-45 overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
         className
       )}
       {...props}

src/frontend/src/modals/shareModal/index.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useContext, useEffect, useState } from "react";
+import { ReactNode, useContext, useEffect, useMemo, useState } from "react";
 import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
 import { TagsSelector } from "../../components/tagsSelectorComponent";
@@ -18,6 +18,7 @@ import {
   removeFileNameFromComponents,
 } from "../../utils/reactflowUtils";
 import { getTagsIds } from "../../utils/storeUtils";
+import ConfirmationModal from "../ConfirmationModal";
 import BaseModal from "../baseModal";
 
 export default function ShareModal({
@@ -124,6 +125,66 @@ export default function ShareModal({
     );
   };
 
+  const handleUpdateComponent = () => {
+    handleShareComponent();
+    if (setOpen) setOpen(false);
+    else internalSetOpen(false);
+  };
+
+  let modalConfirmationButton = useMemo(() => {
+    return (
+      <>
+        {unavaliableNames.includes(name) ? (
+          <ConfirmationModal
+            title="Update"
+            titleHeader={name}
+            modalContentTitle="Attention!"
+            cancelText="Cancel"
+            confirmationText="Update"
+            icon={"Group"}
+            onConfirm={() => {
+              handleUpdateComponent();
+            }}
+            size={"x-small"}
+          >
+            <ConfirmationModal.Content>
+              <span>
+                Are you sure you want to update this{" "}
+                {nameComponent.toLowerCase()}?
+              </span>
+              <br></br>
+              <span className=" text-xs text-destructive ">
+                Warning: This action cannot be undone.
+              </span>
+            </ConfirmationModal.Content>
+            <ConfirmationModal.Trigger>
+              <div className="text-right">
+                <Button type="button">
+                  {is_component ? "Save and " : ""}Share{" "}
+                  {!is_component ? "Flow" : ""}
+                </Button>
+              </div>
+            </ConfirmationModal.Trigger>
+          </ConfirmationModal>
+        ) : (
+          <>
+            <Button
+              onClick={() => {
+                handleShareComponent();
+                if (setOpen) setOpen(false);
+                else internalSetOpen(false);
+              }}
+              type="button"
+            >
+              {is_component ? "Save and " : ""}Share{" "}
+              {!is_component ? "Flow" : ""}
+            </Button>
+          </>
+        )}
+      </>
+    );
+  }, [unavaliableNames]);
+
   return (
     <BaseModal
       size="smaller-h-full"
@@ -191,17 +252,7 @@ export default function ShareModal({
       </BaseModal.Content>
 
       <BaseModal.Footer>
-        <Button
-          disabled={unavaliableNames.includes(name)}
-          onClick={() => {
-            handleShareComponent();
-            if (setOpen) setOpen(false);
-            else internalSetOpen(false);
-          }}
-          type="button"
-        >
-          {is_component ? "Save and " : ""}Share {!is_component ? "Flow" : ""}
-        </Button>
+        <>{modalConfirmationButton}</>
       </BaseModal.Footer>
     </BaseModal>
   );

src/frontend/src/types/components/index.ts

@@ -294,7 +294,7 @@ export type ConfirmationModalType = {
   ];
   icon: string;
   data?: any;
-  index: number;
+  index?: number;
   onConfirm: (index, data) => void;
   open?: boolean;
   onClose?: (close: boolean) => void;