remove not neccessary props between parent and admin tab

src/components/IOC/AdministerUndeployment/AdministerUndeployment.jsx

-import { useState, useEffect, useCallback, useContext, useMemo } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import {
   Box,
@@ -8,56 +8,47 @@ import {
   Tooltip,
   LinearProgress
 } from "@mui/material";
-import { ConfirmationDialog, useAPIMethod } from "@ess-ics/ce-ui-common";
-import Alert from "@mui/material/Alert";
+import { ConfirmationDialog } from "@ess-ics/ce-ui-common";
 import { AccessControl } from "../../auth/AccessControl";
-import { apiContext } from "../../../api/DeployApi";
+import { useUnDeployInDbMutation } from "../../../store/enhancedApi";
+import { ApiAlertError } from "../../common/Alerts/ApiAlertError";
 
-export const AdministerUndeployment = ({ ioc, buttonDisabled }) => {
+export const AdministerUndeployment = ({
+  ioc,
+  buttonDisabled,
+  setButtonDisabled
+}) => {
   const navigate = useNavigate();
-
-  // for the dialog
   const [error, setError] = useState();
   const [open, setOpen] = useState(false);
 
-  const client = useContext(apiContext);
-
-  const params = useMemo(
-    () => ({
-      ioc_id: ioc?.id
-    }),
-    [ioc]
-  );
-
-  const {
-    value: response,
-    wrapper: undeployIOC,
-    loading,
-    error: errorResponse
-  } = useAPIMethod({
-    fcn: client.apis.IOCs.unDeployInDb,
-    call: false,
-    params
-  });
+  const [
+    undeployInDB,
+    { value: undeployResponse, error: undeployInDBError, isLoading }
+  ] = useUnDeployInDbMutation();
 
   useEffect(() => {
-    setError(errorResponse?.message);
-  }, [errorResponse]);
+    setError(undeployInDBError);
+  }, [undeployInDBError]);
 
   const onClose = useCallback(() => {
     setOpen(false);
   }, []);
 
   const onConfirm = useCallback(() => {
-    undeployIOC();
-  }, [undeployIOC]);
+    setButtonDisabled(true);
+    undeployInDB({
+      iocId: ioc?.id
+    });
+    setButtonDisabled(false);
+  }, [undeployInDB, ioc, setButtonDisabled]);
 
   useEffect(() => {
-    if (response) {
+    if (undeployResponse) {
       setOpen(false);
       navigate(-1);
     }
-  }, [response, navigate]);
+  }, [undeployResponse, navigate]);
 
   let disabledButtonTitle = "";
   if (buttonDisabled || ioc.operationInProgress) {
@@ -97,7 +88,7 @@ export const AdministerUndeployment = ({ ioc, buttonDisabled }) => {
                 </Typography>{" "}
                 ?
               </Typography>
-              {loading ? <LinearProgress /> : null}
+              {isLoading && <LinearProgress />}
             </>
           }
           confirmText="Undeploy IOC"
@@ -124,7 +115,7 @@ export const AdministerUndeployment = ({ ioc, buttonDisabled }) => {
                 item
                 xs={12}
               >
-                <Alert severity="error">{error}</Alert>
+                <ApiAlertError error={error} />
               </Grid>
             ) : (
               <></>
@@ -137,12 +128,7 @@ export const AdministerUndeployment = ({ ioc, buttonDisabled }) => {
                 <span>
                   <Button
                     onClick={() => setOpen(true)}
-                    disabled={
-                      buttonDisabled ||
-                      ioc.operationInProgress ||
-                      !ioc.activeDeployment ||
-                      loading
-                    }
+                    disabled={buttonDisabled || !ioc.activeDeployment}
                     color="error"
                     variant="contained"
                   >

src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.jsx

-import { useState, useEffect, useCallback, useContext, useMemo } from "react";
-import { ConfirmationDialog, useAPIMethod } from "@ess-ics/ce-ui-common";
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { ConfirmationDialog } from "@ess-ics/ce-ui-common";
 import {
   Box,
   Button,
@@ -8,20 +8,15 @@ import {
   Tooltip,
   TextField,
   CircularProgress,
-  Alert,
   Autocomplete
 } from "@mui/material";
 import { AccessControl } from "../../auth/AccessControl";
 import { useTypingTimer } from "../../common/SearchBoxFilter/TypingTimer";
-import { apiContext } from "../../../api/DeployApi";
+import { useLazyListHostsQuery } from "../../../store/deployApi";
+import { useUpdateActiveDeploymentHostMutation } from "../../../store/enhancedApi";
+import { ApiAlertError } from "../../common/Alerts/ApiAlertError";
 
-export const ChangeHostAdmin = ({
-  ioc,
-  getIOC,
-  resetTab,
-  buttonDisabled,
-  setButtonDisabled
-}) => {
+export const ChangeHostAdmin = ({ ioc, buttonDisabled, setButtonDisabled }) => {
   const initHost = useMemo(
     () => ({
       fqdn: ioc.activeDeployment.host.fqdn,
@@ -30,79 +25,57 @@ export const ChangeHostAdmin = ({
     [ioc.activeDeployment.host]
   );
   const [host, setHost] = useState(initHost);
-  const client = useContext(apiContext);
+  const [error, setError] = useState();
+  const [open, setOpen] = useState(false);
+  const [query, onHostKeyUp] = useTypingTimer({ interval: 500 });
 
-  const {
-    value: hosts,
-    wrapper: getHosts,
-    loading: loadingHosts
-  } = useAPIMethod({
-    fcn: client.apis.Hosts.listHosts,
-    call: false
-  });
+  const [getHosts, { data: hosts, isLoading: loadingHosts }] =
+    useLazyListHostsQuery();
 
-  const [query, onHostKeyUp] = useTypingTimer({ interval: 500 });
+  const [updateHost, { data: updatedIoc, error: updateHostError }] =
+    useUpdateActiveDeploymentHostMutation();
 
   const noModification = useCallback(
     () => !host || host?.hostId === ioc.activeDeployment.host.hostId,
     [host, ioc]
   );
 
-  // for the dialog
-  const [error, setError] = useState();
-  const [open, setOpen] = useState(false);
+  const onClose = useCallback(() => {
+    setOpen(false);
+    setHost(initHost);
+  }, [setOpen, initHost]);
 
-  const {
-    value: updatedIoc,
-    wrapper: updateHost,
-    error: updateHostError
-  } = useAPIMethod({
-    fcn: client.apis.IOCs.updateActiveDeploymentHost,
-    call: false
-  });
+  const onConfirm = useCallback(() => {
+    setButtonDisabled(true);
+    updateHost({
+      iocId: ioc.id,
+      updateHostRequest: {
+        hostId: host?.hostId
+      }
+    });
+  }, [updateHost, ioc, host?.hostId, setButtonDisabled]);
 
   useEffect(() => {
     if (updateHostError) {
       setButtonDisabled(false);
-      setError(updateHostError?.message);
+      setError(updateHostError);
     }
   }, [updateHostError, setError, setButtonDisabled]);
 
   useEffect(() => {
     if (updatedIoc) {
-      getIOC();
       setHost({
         fqdn: updatedIoc.activeDeployment.host.fqdn,
         hostId: updatedIoc.activeDeployment.host.hostId
       });
-      resetTab();
       setButtonDisabled(false);
     }
-  }, [updatedIoc, getIOC, resetTab, setButtonDisabled]);
+  }, [updatedIoc, setButtonDisabled]);
 
   useEffect(() => {
     getHosts({ text: `${query}` });
   }, [query, getHosts]);
 
-  const onClose = useCallback(() => {
-    setOpen(false);
-    setHost(initHost);
-  }, [setOpen, initHost]);
-
-  const onConfirm = useCallback(() => {
-    setButtonDisabled(true);
-    updateHost(
-      {
-        ioc_id: ioc.id
-      },
-      {
-        requestBody: {
-          hostId: host?.hostId
-        }
-      }
-    );
-  }, [updateHost, ioc, host?.hostId, setButtonDisabled]);
-
   let disabledButtonTitle = "";
   if (buttonDisabled || ioc.operationInProgress) {
     disabledButtonTitle =
@@ -161,16 +134,6 @@ export const ChangeHostAdmin = ({
             container
             spacing={1}
           >
-            {error ? (
-              <Grid
-                item
-                xs={12}
-              >
-                <Alert severity="error">{error}</Alert>
-              </Grid>
-            ) : (
-              <></>
-            )}
             <Grid
               item
               xs={12}
@@ -223,6 +186,11 @@ export const ChangeHostAdmin = ({
               item
               xs={12}
             >
+              {error && (
+                <Box sx={{ marginBottom: 1 }}>
+                  <ApiAlertError error={error} />
+                </Box>
+              )}
               <Tooltip title={disabledButtonTitle}>
                 <span>
                   <Button

src/components/IOC/DeployIOC/DeployIOC.jsx

 import { useState, useEffect } from "react";
 import { Navigate } from "react-router-dom";
 import { IOCDeployDialog } from "../IOCDeployDialog";
-import { useStartJobMutation } from "../../../store/deployApi";
+import { useStartJobMutation } from "../../../store/enhancedApi";
 
 export function DeployIOC({
   open,

src/components/IOC/IOCDelete/IOCDelete.jsx

-import { useState, useEffect, useCallback, useContext, useMemo } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { Box, Button, Grid, Tooltip, Typography } from "@mui/material";
-import { ConfirmDangerActionDialog, useAPIMethod } from "@ess-ics/ce-ui-common";
-import Alert from "@mui/material/Alert";
+import { ConfirmDangerActionDialog } from "@ess-ics/ce-ui-common";
 import { useCustomSnackbar } from "../../common/snackbar";
 import { AccessControl } from "../../auth/AccessControl";
-import { apiContext } from "../../../api/DeployApi";
+import { useDeleteIocMutation } from "../../../store/enhancedApi";
+import { ApiAlertError } from "../../common/Alerts/ApiAlertError";
 
 export const IOCDelete = ({ ioc, buttonDisabled, setButtonDisabled }) => {
   const navigate = useNavigate();
   const showSnackBar = useCustomSnackbar();
-
-  // for the dialog
   const [error, setError] = useState();
   const [open, setOpen] = useState(false);
-
-  const client = useContext(apiContext);
-  const params = useMemo(
-    () => ({
-      ioc_id: ioc?.id
-    }),
-    [ioc]
-  );
-
-  const {
-    wrapper: deleteIOC,
-    dataReady: dataready,
-    error: errorResponse
-  } = useAPIMethod({
-    fcn: client.apis.IOCs.deleteIoc,
-    call: false,
-    params
-  });
+  const [deleteIOC, { data: deleteIOCResponse, error: deleteIOCError }] =
+    useDeleteIocMutation();
 
   useEffect(() => {
-    if (errorResponse) {
+    if (deleteIOCError) {
       setButtonDisabled(false);
-      setError(errorResponse?.message);
+      setError(deleteIOCError);
     }
-  }, [errorResponse, setError, setButtonDisabled]);
+  }, [deleteIOCError, setError, setButtonDisabled]);
 
   useEffect(() => {
-    if (dataready && !error) {
+    if (deleteIOCResponse) {
       setButtonDisabled(false);
       showSnackBar(`IOC ${ioc.namingName} deleted`, "success");
       navigate("/iocs");
     }
   }, [
-    dataready,
+    deleteIOCResponse,
     navigate,
     error,
     setButtonDisabled,
@@ -68,8 +50,10 @@ export const IOCDelete = ({ ioc, buttonDisabled, setButtonDisabled }) => {
 
   const onConfirm = useCallback(() => {
     setButtonDisabled(true);
-    deleteIOC();
-  }, [deleteIOC, setButtonDisabled]);
+    deleteIOC({
+      iocId: ioc?.id
+    });
+  }, [ioc, deleteIOC, setButtonDisabled]);
 
   return (
     <>
@@ -100,7 +84,7 @@ export const IOCDelete = ({ ioc, buttonDisabled, setButtonDisabled }) => {
               item
               xs={12}
             >
-              <Alert severity="error">{error}</Alert>
+              <ApiAlertError error={error} />
             </Grid>
           ) : (
             <></>

src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.jsx

-import { useState, useMemo, useEffect, useCallback, useContext } from "react";
-import { ConfirmationDialog, useAPIMethod } from "@ess-ics/ce-ui-common";
+import { useState, useEffect, useCallback } from "react";
+import { ConfirmationDialog } from "@ess-ics/ce-ui-common";
 import {
   Box,
   Button,
@@ -7,26 +7,21 @@ import {
   TextField,
   Tooltip,
   Typography,
-  Autocomplete,
-  Alert
+  Autocomplete
 } from "@mui/material";
 import { useTypingTimer } from "../../common/SearchBoxFilter/TypingTimer";
 import { AccessControl } from "../../auth/AccessControl";
-import { apiContext } from "../../../api/DeployApi";
-
-const createRequestParams = (query) => {
-  return {
-    query: query
-  };
-};
+import {
+  useLazyListProjectsQuery,
+  useLazyFetchIocByNameQuery
+} from "../../../store/deployApi";
+import { useUpdateIocMutation } from "../../../store/enhancedApi";
+import { ApiAlertError } from "../../common/Alerts/ApiAlertError";
 
-export const IOCDetailAdmin = ({
-  ioc,
-  getIOC,
-  resetTab,
-  buttonDisabled,
-  setButtonDisabled
-}) => {
+export const IOCDetailAdmin = ({ ioc, buttonDisabled, setButtonDisabled }) => {
+  const iocIsDeployed = Boolean(ioc.activeDeployment);
+  const [open, setOpen] = useState(false);
+  const [error, setError] = useState(null);
   const [gitId, setGitId] = useState(ioc.gitProjectId);
   const [nameQuery, onNameKeyUp] = useTypingTimer({ interval: 500 });
   const [repoQuery, onRepoKeyUp] = useTypingTimer({ interval: 500 });
@@ -36,48 +31,21 @@ export const IOCDetailAdmin = ({
     name: ioc.namingName
   });
 
-  // for the dialog
-  const [open, setOpen] = useState(false);
-  const [error, setError] = useState();
-  const client = useContext(apiContext);
-
-  const requestParams = useMemo(
-    () => createRequestParams(repoQuery),
-    [repoQuery]
-  );
-
-  const {
-    value: allowedGitProjects,
-    wrapper: getAllowedGitProjects,
-    loading: loadingAllowedGitProjects
-  } = useAPIMethod({
-    fcn: client.apis.Git.listProjects,
-    params: requestParams,
-    call: false
-  });
+  const [
+    getAllowedGitProjects,
+    { data: allowedGitProjects, isLoading: loadingAllowedGitProjects }
+  ] = useLazyListProjectsQuery();
 
-  const {
-    value: names,
-    wrapper: getNames,
-    loading: loadingNames
-  } = useAPIMethod({
-    fcn: client.apis.Names.fetchIOCByName,
-    call: false
-  });
+  const [getNames, { data: names, isLoading: loadingNames }] =
+    useLazyFetchIocByNameQuery();
 
-  const {
-    value: uioc,
-    wrapper: actionUpdateIoc,
-    error: updateError
-  } = useAPIMethod({
-    fcn: client.apis.IOCs.updateIoc,
-    call: false
-  });
+  const [updateIOC, { data: updatedIOC, error: updateError }] =
+    useUpdateIocMutation();
 
   useEffect(() => {
     if (updateError) {
       setButtonDisabled(false);
-      setError(updateError?.message);
+      setError(updateError);
     }
   }, [updateError, setError, setButtonDisabled]);
 
@@ -98,46 +66,36 @@ export const IOCDetailAdmin = ({
     setOpen(true);
   };
 
-  const onClose = useCallback(() => {
-    setOpen(false);
-  }, [setOpen]);
-
   const onConfirm = useCallback(() => {
     setButtonDisabled(true);
-    actionUpdateIoc(
-      { ioc_id: ioc?.id },
-      {
-        requestBody: {
-          gitProjectId: gitId,
-          namingUuid: name ? name.uuid : null
-        }
+    updateIOC({
+      iocId: ioc?.id,
+      iocUpdateRequest: {
+        gitProjectId: gitId,
+        namingUuid: name ? name.uuid : null
       }
-    );
-  }, [actionUpdateIoc, ioc, name, gitId, setButtonDisabled]);
+    });
+  }, [updateIOC, ioc, name, gitId, setButtonDisabled]);
 
   useEffect(() => {
-    if (uioc) {
-      getIOC();
-      resetTab();
+    if (updatedIOC) {
       setButtonDisabled(false);
     }
-  }, [uioc, getIOC, resetTab, setButtonDisabled]);
+  }, [updatedIOC, setButtonDisabled]);
 
   useEffect(() => {
     // fetch git repos only if user has entered a text and it wasn't previously fetched
     if (repoQuery && repoQuery.length > 2) {
-      getAllowedGitProjects();
+      getAllowedGitProjects({ query: repoQuery });
     }
   }, [repoQuery, getAllowedGitProjects]);
 
   useEffect(() => {
     if (nameQuery) {
-      getNames(nameQuery);
+      getNames({ query: nameQuery });
     }
   }, [nameQuery, getNames]);
 
-  const iocIsDeployed = Boolean(ioc.activeDeployment);
-
   let nameDisabledTitle = "";
   if (iocIsDeployed) {
     nameDisabledTitle =
@@ -286,7 +244,7 @@ export const IOCDetailAdmin = ({
         confirmText="Modify IOC"
         cancelText="Cancel"
         open={open}
-        onClose={onClose}
+        onClose={() => setOpen(false)}
         onConfirm={onConfirm}
       />
       <Box sx={{ pt: 2 }}>
@@ -323,7 +281,7 @@ export const IOCDetailAdmin = ({
             {gitRepoAutocomplete(false)}
           </AccessControl>
 
-          {error ? <Alert severity="error">{error}</Alert> : <></>}
+          {error && <ApiAlertError error={error} />}
 
           <Tooltip title={disabledButtonTitle}>
             <span>

src/components/IOC/IOCManage/IOCService.jsx

@@ -9,7 +9,7 @@ import { useState, useEffect, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { ConfirmationDialog } from "@ess-ics/ce-ui-common";
 import { AccessControl } from "../../auth/AccessControl";
-import { useStartJobMutation } from "../../../store/deployApi";
+import { useStartJobMutation } from "../../../store/enhancedApi";
 import { ApiAlertError } from "../../common/Alerts/ApiAlertError";
 
 export function IOCService({ ioc, currentCommand }) {

src/components/IOC/IOCManage/JobSection.tsx

@@ -15,11 +15,9 @@ export const JobSection = () => {
 
   const { data: jobs, isLoading } = useListJobsQuery(
     initRequestParams(pagination),
-    { pollingInterval: 30000 }
+    { pollingInterval: 5000 }
   );
 
-  console.log(jobs); //eslint-disable-line
-
   useEffect(() => {
     setPagination({ totalCount: jobs?.totalCount ?? 0 });
   }, [setPagination, jobs?.totalCount]);

src/components/IOC/UndeployIOC/UndeployIOC.jsx

 import { useState, useEffect } from "react";
 import { Navigate } from "react-router-dom";
 import { IOCUndeployDialog } from "../IOCUndeployDialog";
-import { useStartJobMutation } from "../../../store/deployApi";
+import { useStartJobMutation } from "../../../store/enhancedApi";
 
 export const UndeployIOC = ({ open, setOpen, submitCallback, ioc }) => {
   const [error, setError] = useState();

src/store/enhancedApi.ts

 import { deployApi } from "./deployApi";
 
 const enhancedApiWithTags = deployApi.enhanceEndpoints({
-  addTagTypes: ["StartJob"],
+  addTagTypes: [
+    "StartJob",
+    "UpdateIOC",
+    "UpdateActiveDeploymentHost",
+    "UndeployInDB",
+    "DeleteIOC"
+  ],
   endpoints: {
-    getIoc: { providesTags: ["StartJob"] },
+    getIoc: {
+      providesTags: [
+        "StartJob",
+        "UpdateIOC",
+        "UpdateActiveDeploymentHost",
+        "UndeployInDB",
+        "DeleteIOC"
+      ]
+    },
     listJobs: { providesTags: ["StartJob"] },
-    startJob: { invalidatesTags: ["StartJob"] }
+    startJob: { invalidatesTags: ["StartJob"] },
+    updateIoc: { invalidatesTags: ["UpdateIOC"] },
+    updateActiveDeploymentHost: {
+      invalidatesTags: ["UpdateActiveDeploymentHost"]
+    },
+    unDeployInDb: { invalidatesTags: ["UndeployInDB"] },
+    deleteIoc: { invalidatesTags: ["DeleteIOC"] }
   }
 });
 
-export const { useGetIocQuery, useListJobsQuery, useStartJobMutation } =
-  enhancedApiWithTags;
+export const {
+  useGetIocQuery,
+  useListJobsQuery,
+  useStartJobMutation,
+  useUpdateIocMutation,
+  useUpdateActiveDeploymentHostMutation,
+  useUnDeployInDbMutation,
+  useDeleteIocMutation
+} = enhancedApiWithTags;