fix(ConfirmationModal/index.tsx): add missing dependencies to useEffect hook to prevent unnecessary re-renders

feat(ConfirmationModal/index.tsx): add support for open and onClose props to control modal visibility
fix(nodeToolbarComponent/index.tsx): import set function from lodash to fix missing set function error
feat(nodeToolbarComponent/index.tsx): add confirmation modal for sharing component functionality
fix(types/components/index.ts): add optional open and onClose props to ConfirmationModalType

The changes were made to improve the functionality and user experience of the ConfirmationModal and NodeToolbarComponent components.

In ConfirmationModal/index.tsx, the missing dependencies were added to the useEffect hook to prevent unnecessary re-renders. Additionally, support for the open and onClose props was added to control the visibility of the modal.

In NodeToolbarComponent/index.tsx, the set function was imported from lodash to fix the missing set function error. A confirmation modal was also added for the "Share" functionality, allowing users to share a component. The handleShareComponent function was implemented to handle the sharing logic.

In types/components/index.ts, the open and onClose props were added as optional to the ConfirmationModalType to reflect the changes made in the ConfirmationModal component.

src/frontend/src/modals/ConfirmationModal/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Button } from "../../components/ui/button";
 import { ConfirmationModalType } from "../../types/components";
 import { nodeIconsLucide } from "../../utils/styleUtils";
@@ -17,12 +17,18 @@ export default function ConfirmationModal({
   data,
   index,
   onConfirm,
+  open,
+  onClose,
 }: ConfirmationModalType) {
   const Icon: any = nodeIconsLucide[icon];
+  const [modalOpen, setModalOpen] = useState(open ?? false);
+
+  useEffect(() => {
+    if (onClose) onClose!(modalOpen);
+  }, [modalOpen]);
 
-  const [open, setOpen] = useState(false);
   return (
-    <BaseModal size="x-small" open={open} setOpen={setOpen}>
+    <BaseModal size="x-small" open={modalOpen} setOpen={setModalOpen}>
       <BaseModal.Trigger asChild={asChild}>{children}</BaseModal.Trigger>
       <BaseModal.Header description={titleHeader}>
         <span className="pr-2">{title}</span>
@@ -46,7 +52,7 @@ export default function ConfirmationModal({
         <Button
           className="ml-3"
           onClick={() => {
-            setOpen(false);
+            setModalOpen(false);
             onConfirm(index, data);
           }}
         >
@@ -56,7 +62,7 @@ export default function ConfirmationModal({
         <Button
           variant="outline"
           onClick={() => {
-            setOpen(false);
+            setModalOpen(false);
           }}
         >
           {cancelText}

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -12,6 +12,7 @@ import {
 import { alertContext } from "../../../../contexts/alertContext";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import { saveFlowStore } from "../../../../controllers/API";
+import ConfirmationModal from "../../../../modals/ConfirmationModal";
 import EditNodeModal from "../../../../modals/EditNodeModal";
 import { nodeToolbarPropsType } from "../../../../types/components";
 import {
@@ -64,8 +65,26 @@ export default function NodeToolbarComponent({
   const { paste, saveComponent } = useContext(TabsContext);
   const reactFlowInstance = useReactFlow();
   const [showModalAdvanced, setShowModalAdvanced] = useState(false);
+  const [showconfirmShare, setShowconfirmShare] = useState(false);
   const [selectedValue, setSelectedValue] = useState("");
 
+  function handleShareComponent() {
+    const componentFlow = cloneDeep(data);
+    saveFlowStore(createFlowComponent(componentFlow)).then(
+      () => {
+        saveComponent(componentFlow);
+        setSuccessData({
+          title: "Component shared successfully",
+        });
+      },
+      (err) => {
+        setErrorData({
+          title: "Error sharing component",
+          list: [err["response"]["data"]["detail"]],
+        });
+      }
+    );
+  }
   const handleSelectChange = (event) => {
     switch (event) {
       case "advanced":
@@ -79,21 +98,8 @@ export default function NodeToolbarComponent({
         downloadNode(createFlowComponent(cloneDeep(data)));
         break;
       case "Share":
-        const componentFlow = cloneDeep(data);
-        saveFlowStore(createFlowComponent(componentFlow)).then(
-          () => {
-            saveComponent(componentFlow);
-            setSuccessData({
-              title: "Component shared successfully",
-            });
-          },
-          (err) => {
-            setErrorData({
-              title: "Error sharing component",
-              list: [err["response"]["data"]["detail"]],
-            });
-          }
-        );
+        console.log("Share");
+        setShowconfirmShare(true);
         break;
       case "SaveAll":
         saveComponent(cloneDeep(data));
@@ -269,6 +275,28 @@ export default function NodeToolbarComponent({
               <></>
             </EditNodeModal>
           )}
+          {showconfirmShare && (
+            <ConfirmationModal
+              key={data.id}
+              index={0}
+              modalContentTitle="Are you sure you want to share this component?"
+              modalContent="This component will be available for everyone to use."
+              title="Share Component"
+              confirmationText="Share"
+              icon="Share2"
+              onConfirm={() => {
+                handleShareComponent();
+              }}
+              titleHeader=""
+              cancelText="Cancel"
+              open={showconfirmShare}
+              onClose={(modal) => {
+                setShowconfirmShare(modal);
+              }}
+            >
+              <div></div>
+            </ConfirmationModal>
+          )}
         </span>
       </div>
     </>

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

@@ -286,6 +286,8 @@ export type ConfirmationModalType = {
   data?: any;
   index: number;
   onConfirm: (index, data) => void;
+  open?: boolean;
+  onClose?: (close: boolean) => void;
 };
 
 export type UserManagementType = {