fix checkbox issues

GoogleCloudPlatform · Sep 26, 2023 · 848b0b2 · 848b0b2
1 parent 9089c24
commit 848b0b2
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/radlab-ui/webapp/src/components/DeleteDeploymentModal.tsx b/radlab-ui/webapp/src/components/DeleteDeploymentModal.tsx
@@ -1,7 +1,6 @@
 import axios from "axios"
 import { useTranslation } from "next-i18next"
 import { useState } from "react"
-import { useNavigate } from "react-router-dom"
 import { alertStore, userStore } from "@/store"
 import { ALERT_TYPE } from "@/utils/types"
 import Loading from "@/navigation/Loading"
@@ -11,15 +10,16 @@ interface IDeleteDeploymentModal {
   deployId?: string
   deploymentIds?: string[]
   handleClick: Function
+  handleRefresh: Function
 }
 
 const DeleteDeploymentModal: React.FC<IDeleteDeploymentModal> = ({
   deployId,
   deploymentIds,
   handleClick,
+  handleRefresh,
 }) => {
   const [modal, setModal] = useState(true)
-  const navigate = useNavigate()
   const { t } = useTranslation()
   const setAlert = alertStore((state) => state.setAlert)
   const [loading, setLoading] = useState(false)
@@ -48,7 +48,7 @@ const DeleteDeploymentModal: React.FC<IDeleteDeploymentModal> = ({
             durationMs: 10000,
             type: ALERT_TYPE.SUCCESS,
           })
-          navigate("/deployments")
+          handleRefresh(true)
         } else {
           setAlert({
             message: t("delete-error"),

diff --git a/radlab-ui/webapp/src/components/modules/ModuleDeployment.tsx b/radlab-ui/webapp/src/components/modules/ModuleDeployment.tsx
@@ -25,13 +25,15 @@ interface ModuleDeploymentProps {
   defaultSortField?: SORT_FIELD
   defaultSortDirection?: SORT_DIRECTION
   headers: IHeader[]
+  handleRefresh: Function
 }
 
 const ModuleDeployment: React.FC<ModuleDeploymentProps> = ({
   deployments,
   defaultSortField,
   defaultSortDirection,
   headers,
+  handleRefresh,
 }) => {
   const [sortField, setSortField] = useState<SORT_FIELD>(
     defaultSortField || SORT_FIELD.MODULE,
@@ -44,6 +46,7 @@ const ModuleDeployment: React.FC<ModuleDeploymentProps> = ({
   const [isModal, setModal] = useState<boolean>(false)
   const { t } = useTranslation()
   const [deploymentId, setDeploymentId] = useState<string[]>([])
+  const [isCheckbox, setIsCheckbox] = useState<number>(0)
 
   const setSort = (header: IHeader) => () => {
     if (header.field === sortField) {
@@ -126,6 +129,7 @@ const ModuleDeployment: React.FC<ModuleDeploymentProps> = ({
       <DeleteDeploymentModal
         handleClick={handleClick}
         deploymentIds={deploymentId}
+        handleRefresh={handleRefresh}
       />
     )
   }
@@ -140,7 +144,19 @@ const ModuleDeployment: React.FC<ModuleDeploymentProps> = ({
     }
   }
 
-  useEffect(() => {}, [deploymentId])
+  useEffect(() => {
+    deployments &&
+      deployments.map((deployment) => {
+        if (deployment.hasOwnProperty("deletedAt")) {
+          //@ts-ignore
+          deployment["status"] = "DELETED"
+        }
+      })
+    const value = deployments?.filter(
+      (deployment) => deployment.status === DEPLOYMENT_STATUS.SUCCESS,
+    )
+    if (value && value.length) setIsCheckbox(value.length)
+  }, [deploymentId])
 
   return (
     <>
@@ -191,14 +207,15 @@ const ModuleDeployment: React.FC<ModuleDeploymentProps> = ({
                       />
                     </div>
                     <div className="flex gap-1">
-                      {header.label === "Module" && deploymentId.length > 0 && (
+                      {header.label === "Module" && (
                         <span className="flex gap-2">
                           <input
                             type="checkbox"
                             //@ts-ignore
                             checked={
                               isAllSelect && deploymentId.length && "checked"
                             }
+                            disabled={!isCheckbox && !deploymentId.length}
                             className="checkbox checkbox-xs checkbox-primary mt-1"
                             onChange={() =>
                               deployments &&

diff --git a/radlab-ui/webapp/src/routes/Deployments.tsx b/radlab-ui/webapp/src/routes/Deployments.tsx
@@ -53,6 +53,7 @@ const Deployments: React.FC<DeploymentsProps> = () => {
   const setModuleNames = moduleNamesStore((state) => state.setModuleNames)
 
   const [clearFilter, setClearFilter] = useState(false)
+  const [refresh, setRefresh] = useState(false)
 
   const fetchData = async () => {
     Promise.all([
@@ -104,10 +105,12 @@ const Deployments: React.FC<DeploymentsProps> = () => {
       })
   }
 
+  const handleRefresh = (state: boolean) => setRefresh(state)
+
   useEffect(() => {
     fetchData()
     fetchModules()
-  }, [deploymentTab])
+  }, [deploymentTab, refresh])
 
   const renderAllTab = () => {
     return (
@@ -191,6 +194,7 @@ const Deployments: React.FC<DeploymentsProps> = () => {
             deployments={filteredDeployments || listAllDeployments}
             defaultSortField={SORT_FIELD.CREATEDAT}
             defaultSortDirection={SORT_DIRECTION.DESC}
+            handleRefresh={handleRefresh}
           />
         ) : (
           renderEmptyState()
@@ -202,6 +206,7 @@ const Deployments: React.FC<DeploymentsProps> = () => {
             deployments={filteredDeployments || listMyDeployments}
             defaultSortField={SORT_FIELD.CREATEDAT}
             defaultSortDirection={SORT_DIRECTION.DESC}
+            handleRefresh={handleRefresh}
           />
         ) : (
           renderEmptyState()