refactor: upload

frontend/src/modals/WrapperModal.tsx

@@ -2,10 +2,15 @@ import React, { useEffect, useRef } from 'react';
 import { WrapperModalProps } from './types';
 import Exit from '../assets/exit.svg';
 
-const WrapperModal: React.FC<WrapperModalProps> = ({ children, close }) => {
+const WrapperModal: React.FC<WrapperModalProps> = ({
+  children,
+  close,
+  isPerformingTask,
+}) => {
   const modalRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    if (isPerformingTask) return;
     const handleClickOutside = (event: MouseEvent) => {
       if (
         modalRef.current &&
@@ -36,9 +41,11 @@ const WrapperModal: React.FC<WrapperModalProps> = ({ children, close }) => {
         ref={modalRef}
         className="relative w-11/12 rounded-2xl bg-white p-10 dark:bg-outer-space sm:w-[512px]"
       >
-        <button className="absolute top-3 right-4 m-2 w-3" onClick={close}>
+        {!isPerformingTask && (
-          <img className="filter dark:invert" src={Exit} />
+          <button className="absolute top-3 right-4 m-2 w-3" onClick={close}>
-        </button>
+            <img className="filter dark:invert" src={Exit} />
+          </button>
+        )}
         {children}
       </div>
     </div>

frontend/src/modals/types/index.ts

@@ -1,4 +1,5 @@
 export type WrapperModalProps = {
   children?: React.ReactNode;
+  isPerformingTask?: boolean;
   close: () => void;
 };

frontend/src/upload/Upload.tsx

@@ -600,7 +600,30 @@ function Upload({
             ) : (
               <button
                 onClick={uploadRemote}
-                className={`ml-2 cursor-pointer rounded-3xl bg-purple-30 py-2 px-6 text-sm text-white hover:bg-[#6F3FD1]`}
+                className={`ml-2 cursor-pointer rounded-3xl bg-purple-30 py-2 px-6 text-sm text-white hover:bg-[#6F3FD1] ${
+                  urlName.trim().length === 0 ||
+                  url.trim().length === 0 ||
+                  (urlType.label === 'Reddit' &&
+                    (redditData.client_id.length === 0 ||
+                      redditData.client_secret.length === 0 ||
+                      redditData.user_agent.length === 0 ||
+                      redditData.search_queries.length === 0 ||
+                      redditData.number_posts === 0)) ||
+                  (urlType.label === 'GitHub' && repoUrl.trim().length === 0)
+                    ? 'bg-opacity-80 text-opacity-80'
+                    : ''
+                }`}
+                disabled={
+                  urlName.trim().length === 0 ||
+                  url.trim().length === 0 ||
+                  (urlType.label === 'Reddit' &&
+                    (redditData.client_id.length === 0 ||
+                      redditData.client_secret.length === 0 ||
+                      redditData.user_agent.length === 0 ||
+                      redditData.search_queries.length === 0 ||
+                      redditData.number_posts === 0)) ||
+                  (urlType.label === 'GitHub' && repoUrl.trim().length === 0)
+                }
               >
                 {t('modals.uploadDoc.train')}
               </button>
@@ -627,6 +650,7 @@ function Upload({
 
   return (
     <WrapperModal
+      isPerformingTask={progress !== undefined && progress.percentage < 100}
       close={() => {
         close();
         setDocName('');