Merge pull request #184 from arc53/feature/upload-exit-btn

Feature/upload exit btn

application/app.py

@@ -410,8 +410,11 @@ def delete_old():
     if dirs[0] not in ['indexes', 'vectors']:
         return {"status": 'error'}
     path_clean = '/'.join(dirs)
-    shutil.rmtree(path)
     vectors_collection.delete_one({'location': path})
+    try:
+        shutil.rmtree(path_clean)
+    except FileNotFoundError:
+        pass
     return {"status": 'ok'}
 
 # handling CORS

frontend/src/Navigation.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import { NavLink } from 'react-router-dom';
 import Arrow1 from './assets/arrow.svg';
 import Arrow2 from './assets/dropdown-arrow.svg';
+import Exit from './assets/exit.svg';
 import Message from './assets/message.svg';
 import Hamburger from './assets/hamburger.svg';
 import Key from './assets/key.svg';
@@ -21,6 +22,7 @@ import {
 } from './preferences/preferenceSlice';
 import { useOutsideAlerter } from './hooks';
 import Upload from './upload/Upload';
+import { Doc } from './preferences/preferenceApi';
 
 export default function Navigation({
   navState,
@@ -48,6 +50,24 @@ export default function Navigation({
     useState<ActiveState>('INACTIVE');
 
   const navRef = useRef(null);
+  const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
+
+  const handleDeleteClick = (index: number, doc: Doc) => {
+    const docPath = 'indexes/' + 'local' + '/' + doc.name;
+
+    fetch(`${apiHost}/api/delete_old?path=${docPath}`, {
+      method: 'GET',
+    })
+      .then(() => {
+        // remove the image element from the DOM
+        const imageElement = document.querySelector(
+          `#img-${index}`,
+        ) as HTMLElement;
+        const parentElement = imageElement.parentNode as HTMLElement;
+        parentElement.parentNode?.removeChild(parentElement);
+      })
+      .catch((error) => console.error(error));
+  };
   useOutsideAlerter(
     navRef,
     () => {
@@ -149,11 +169,23 @@ export default function Navigation({
                             dispatch(setSelectedDocs(doc));
                             setIsDocsListOpen(false);
                           }}
-                          className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100"
+                          className="flex h-10 w-full cursor-pointer items-center justify-between border-x-2 border-b-2 hover:bg-gray-100"
                         >
-                          <p className="ml-5 py-3">
+                          <p className="ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3">
                             {doc.name} {doc.version}
                           </p>
+                          {doc.location === 'local' ? (
+                            <img
+                              src={Exit}
+                              alt="Exit"
+                              className="mr-4 h-3 w-3 cursor-pointer hover:opacity-50"
+                              id={`img-${index}`}
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                handleDeleteClick(index, doc);
+                              }}
+                            />
+                          ) : null}
                         </div>
                       );
                     }
@@ -163,6 +195,7 @@ export default function Navigation({
                     <p className="ml-5 py-3">No default documentation.</p>
                   </div>
                 )}
+                )
               </div>
             )}
           </div>