fix(shareModal/index.tsx): fix typo in variable name 'unavaliableNames' to 'unavailableNames' for better readability

feat(shareModal/index.tsx): add confirmation modal to prompt user to replace existing component with current one if name already exists

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

@@ -47,7 +47,7 @@ export default function ShareModal({
   const [name, setName] = useState(component?.name ?? "");
   const [description, setDescription] = useState(component?.description ?? "");
   const [internalOpen, internalSetOpen] = useState(children ? false : true);
-
+  const [openConfirmationModal, setOpenConfirmationModal] = useState(false);
   const nameComponent = is_component ? "Component" : "Flow";
 
   const [tags, setTags] = useState<{ id: string; name: string }[]>([]);
@@ -161,11 +161,11 @@ export default function ShareModal({
     else internalSetOpen(false);
   };
 
-  let modalConfirmationButton = useMemo(() => {
+  let modalConfirmation = useMemo(() => {
     return (
       <>
-        {unavaliableNames.find((element) => element.name === name) ? (
         <ConfirmationModal
+          open={openConfirmationModal}
           title={`Replace`}
           cancelText="Cancel"
           confirmationText="Replace"
@@ -174,13 +174,16 @@ export default function ShareModal({
           index={6}
           onConfirm={() => {
             handleUpdateComponent();
+            setOpenConfirmationModal(false);
+          }}
+          onCancel={() => {
+            setOpenConfirmationModal(false);
           }}
-            onCancel={() => {}}
         >
           <ConfirmationModal.Content>
             <span>
-                It seems {name} already exists. Do you want to replace it with
+              It seems {name} already exists. Do you want to replace it with the
-                the current?
+              current?
             </span>
             <br></br>
             <span className=" text-xs text-destructive ">
@@ -188,55 +191,21 @@ export default function ShareModal({
             </span>
           </ConfirmationModal.Content>
           <ConfirmationModal.Trigger>
-              <div className="text-right">
+            <></>
-                <Button disabled={loadingNames} type="button">
-                  {loadingNames ? (
-                    <>
-                      <div className="center w-16">
-                        <Loader2 className="m-auto h-4 w-4 animate-spin"></Loader2>
-                      </div>
-                    </>
-                  ) : (
-                    <>
-                      {is_component && !loadingNames ? "Save and " : ""}Share{" "}
-                      {!is_component && !loadingNames ? "Flow" : ""}
-                    </>
-                  )}
-                </Button>
-              </div>
           </ConfirmationModal.Trigger>
         </ConfirmationModal>
-        ) : (
-          <>
-            <Button
-              disabled={loadingNames}
-              onClick={() => {
-                handleShareComponent();
-                if (setOpen) setOpen(false);
-                else internalSetOpen(false);
-              }}
-              type="button"
-            >
-              {loadingNames ? (
-                <>
-                  <div className="center w-16">
-                    <Loader2 className="m-auto h-4 w-4 animate-spin"></Loader2>
-                  </div>
-                </>
-              ) : (
-                <>
-                  {is_component && !loadingNames ? "Save and " : ""}Share{" "}
-                  {!is_component && !loadingNames ? "Flow" : ""}
-                </>
-              )}
-            </Button>
-          </>
-        )}
       </>
     );
-  }, [unavaliableNames, name, loadingNames, handleShareComponent]);
+  }, [
+    unavaliableNames,
+    name,
+    loadingNames,
+    handleShareComponent,
+    openConfirmationModal,
+  ]);
 
   return (
+    <>
       <BaseModal
         size="smaller-h-full"
         open={(!disabled && open) ?? internalOpen}
@@ -297,14 +266,46 @@ export default function ShareModal({
             </label>
           </div>
           <span className=" text-xs text-destructive ">
-          Warning: Deselecting this box will exclusively eliminate API keys from
+            Warning: Deselecting this box will exclusively eliminate API keys
-          fields explicitly designated for API keys.
+            from fields explicitly designated for API keys.
           </span>
         </BaseModal.Content>
 
         <BaseModal.Footer>
-        <>{modalConfirmationButton}</>
+          <div className="text-right">
+            <Button
+              disabled={loadingNames}
+              type="button"
+              onClick={() => {
+                const isNameAvailable = !unavaliableNames.some(
+                  (element) => element.name === name
+                );
+
+                if (isNameAvailable) {
+                  handleShareComponent();
+                  (setOpen || internalSetOpen)(false);
+                } else {
+                  setOpenConfirmationModal(true);
+                }
+              }}
+            >
+              {loadingNames ? (
+                <>
+                  <div className="center w-16">
+                    <Loader2 className="m-auto h-4 w-4 animate-spin"></Loader2>
+                  </div>
+                </>
+              ) : (
+                <>
+                  {is_component && !loadingNames ? "Save and " : ""}Share{" "}
+                  {!is_component && !loadingNames ? "Flow" : ""}
+                </>
+              )}
+            </Button>
+          </div>
         </BaseModal.Footer>
       </BaseModal>
+      <>{modalConfirmation}</>
+    </>
   );
 }