feat: add simple ui to delete projects on frontend (#1314)

* feat: add simple ui to delete projects on frontend

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

src/frontend/src/api/CreateProjectService.ts

@@ -513,7 +513,6 @@ const DeleteProjectService: Function = (url: string) => {
     };
 
     await deleteProject(url);
-    // TODO extra cleanup required?
   };
 };
 

src/frontend/src/components/ManageProject/DeleteTab/ProjectDeleteTab.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import Button from '@/components/common/Button';
+import { Modal } from '@/components/common/Modal';
+import CoreModules from '@/shared/CoreModules';
+import { DeleteProjectService } from '@/api/CreateProjectService';
+
+const FormUpdateTab = ({ projectId, projectName }) => {
+  const dispatch = CoreModules.useAppDispatch();
+  const [showModal, setShowModal] = useState(false);
+  const [confirmProjectName, setConfirmProjectName] = useState('');
+  const [confirmEnabled, setConfirmEnabled] = useState(false);
+
+  const onDelete = () => {
+    setShowModal(true);
+  };
+
+  const onSave = () => {
+    if (confirmProjectName === projectName) {
+      dispatch(DeleteProjectService(`${import.meta.env.VITE_API_URL}/projects/${projectId}`));
+      setShowModal(false);
+    }
+  };
+
+  const closeModal = () => {
+    setShowModal(false);
+    setConfirmProjectName('');
+    setConfirmEnabled(false);
+  };
+
+  const handleConfirmChange = (e) => {
+    const inputText = e.target.value;
+    setConfirmProjectName(inputText);
+    setConfirmEnabled(inputText === projectName);
+  };
+
+  return (
+    <div className="fmtm-flex fmtm-flex-col fmtm-items-center fmtm-gap-10">
+      <div className="fmtm-flex fmtm-justify-left">
+        <Button onClick={onDelete} btnText="DELETE PROJECT" btnType="primary" className="fmtm-rounded-md" />
+      </div>
+      <Modal
+        className="fmtm-w-[700px]"
+        description={
+          <div className="text-center">
+            <h2>Are you sure?</h2>
+            <p>Please confirm the project name to proceed:</p>
+            <input type="text" value={confirmProjectName} onChange={handleConfirmChange} />
+            <div className="fmtm-flex fmtm-justify-center fmtm-gap-4">
+              <Button onClick={onSave} btnText="Confirm" btnType="primary" disabled={!confirmEnabled} />
+              <Button onClick={closeModal} btnText="Cancel" btnType="secondary" />
+            </div>
+          </div>
+        }
+        open={showModal}
+        onOpenChange={setShowModal}
+      />
+    </div>
+  );
+};
+
+export default FormUpdateTab;

src/frontend/src/components/ManageProject/DeleteTab/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ProjectDeleteTab from './ProjectDeleteTab';
+
+const EditTab = ({ projectId, projectName }) => {
+  return (
+    <div className="fmtm-max-w-[29.5rem]">
+      <ProjectDeleteTab projectId={projectId} projectName={projectName} />
+    </div>
+  );
+};
+
+export default EditTab;

src/frontend/src/utilfunctions/cookieUtils.ts

@@ -1,27 +1,26 @@
-export function setCookie(name: string, value:string) {
-    document.cookie = `${name}=${value}; Path=/;`;
-  }
-
-  // export function removeCookie(name, domain = '') {
-  //   document.cookie = `${name}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT; domain=${domain}`;
-  // }
-
-  export function removeCookie(name:string) {
-    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:01 GMT"`;
-  }
-
-  export default function getCookie(name:string) {
-    let cookieValue:string|null = null;
-    if (document.cookie && document.cookie !== '') {
-      const cookies = document.cookie.split(';');
-      for (let i = 0; i < cookies.length; i += 1) {
-        const cookie = cookies[i].toString().replace(/^([\s]*)|([\s]*)$/g, '');
-        if (cookie.substring(0, name.length + 1) === `${name}=`) {
-          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-          break;
-        }
+export function setCookie(name: string, value: string) {
+  document.cookie = `${name}=${value}; Path=/;`;
+}
+
+// export function removeCookie(name, domain = '') {
+//   document.cookie = `${name}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT; domain=${domain}`;
+// }
+
+export function removeCookie(name: string) {
+  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:01 GMT"`;
+}
+
+export default function getCookie(name: string) {
+  let cookieValue: string | null = null;
+  if (document.cookie && document.cookie !== '') {
+    const cookies = document.cookie.split(';');
+    for (let i = 0; i < cookies.length; i += 1) {
+      const cookie = cookies[i].toString().replace(/^([\s]*)|([\s]*)$/g, '');
+      if (cookie.substring(0, name.length + 1) === `${name}=`) {
+        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+        break;
       }
     }
-    return cookieValue;
   }
-
+  return cookieValue;
+}

src/frontend/src/utilities/ProtectedRoute.jsx

@@ -9,7 +9,7 @@ const ProtectedRoute = ({ children }) => {
   if (import.meta.env.MODE === 'development') {
     return children;
   }
-  console.log(import.meta.env,'test');
+  console.log(import.meta.env, 'test');
   // const token = CoreModules.useAppSelector((state) => state.login.loginToken);
   const changedDomainToUnderscore = import.meta.env.VITE_FMTM_DOMAIN.replace('.', '_');
   const token = getCookie(changedDomainToUnderscore);

src/frontend/src/views/ManageProject.tsx

@@ -1,5 +1,6 @@
 import EditTab from '../components/ManageProject/EditTab';
 import UserTab from '../components/ManageProject/UserTab';
+import DeleteTab from '../components/ManageProject/DeleteTab';
 import React, { useEffect, useState } from 'react';
 import AssetModules from '../shared/AssetModules.js';
 import CoreModules from '@/shared/CoreModules';
@@ -11,6 +12,7 @@ import { useAppSelector } from '@/types/reduxTypes';
 const tabList = [
   { id: 'users', name: 'USERS', icon: <AssetModules.PersonIcon style={{ fontSize: '20px' }} /> },
   { id: 'edit', name: 'EDIT', icon: <AssetModules.EditIcon style={{ fontSize: '20px' }} /> },
+  { id: 'delete', name: 'DELETE', icon: <AssetModules.DeleteIcon style={{ fontSize: '20px' }} /> },
 ];
 const ManageProject = () => {
   const dispatch = CoreModules.useAppDispatch();
@@ -54,7 +56,13 @@ const ManageProject = () => {
         <h2 className="fmtm-font-archivo fmtm-text-xl fmtm-font-semibold fmtm-text-[#484848] fmtm-tracking-wider fmtm-mb-8">
           {editProjectDetails?.name}
         </h2>
-        {tabView === 'users' ? <UserTab /> : <EditTab projectId={decodedProjectId} />}
+        {tabView === 'users' ? (
+          <UserTab />
+        ) : tabView === 'edit' ? (
+          <EditTab projectId={decodedProjectId} />
+        ) : (
+          <DeleteTab projectId={decodedProjectId} projectName={editProjectDetails?.name} />
+        )}
       </div>
     </div>
   );

src/frontend/src/views/Organisation.tsx

@@ -15,7 +15,7 @@ const Organisation = () => {
 
   const { type } = windowDimention();
   //get window dimension
-  console.log(import.meta.env,'test');
+  console.log(import.meta.env, 'test');
 
   const [searchKeyword, setSearchKeyword] = useState<string>('');
   const [activeTab, setActiveTab] = useState<0 | 1>(0);