ChangeHostAdmin.tsx

import { useState, useEffect, useCallback, useMemo } from "react";
import { ConfirmationDialog } from "@ess-ics/ce-ui-common";
import {
  Box,
  Button,
  Typography,
  Grid,
  Tooltip,
  TextField,
  CircularProgress,
  Autocomplete
} from "@mui/material";
import { AccessControl } from "../../auth/AccessControl";
import { useTypingTimer } from "../../common/SearchBoxFilter/TypingTimer";
import { useLazyListHostsQuery } from "../../../store/deployApi";
import { useUpdateActiveDeploymentHostMutation } from "../../../store/enhancedApi";
import { ApiAlertError } from "../../common/Alerts/ApiAlertError";

export const ChangeHostAdmin = ({ ioc, buttonDisabled, setButtonDisabled }) => {
  const initHost = useMemo(
    () => ({
      fqdn: ioc.activeDeployment.host.fqdn,
      hostId: ioc.activeDeployment.host.hostId
    }),
    [ioc.activeDeployment.host]
  );
  const [host, setHost] = useState(initHost);
  const [error, setError] = useState();
  const [open, setOpen] = useState(false);
  const [query, onHostKeyUp] = useTypingTimer({ interval: 500 });

  const [getHosts, { data: hosts, isLoading: loadingHosts }] =
    useLazyListHostsQuery();

  const [updateHost, { data: updatedIoc, error: updateHostError }] =
    useUpdateActiveDeploymentHostMutation();

  const noModification = useCallback(
    () => !host || host?.hostId === ioc.activeDeployment.host.hostId,
    [host, ioc]
  );

  const onClose = useCallback(() => {
    setOpen(false);
    setHost(initHost);
  }, [setOpen, initHost]);

  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);
    }
  }, [updateHostError, setError, setButtonDisabled]);

  useEffect(() => {
    if (updatedIoc) {
      setHost({
        fqdn: updatedIoc.activeDeployment.host.fqdn,
        hostId: updatedIoc.activeDeployment.host.hostId
      });
      setButtonDisabled(false);
    }
  }, [updatedIoc, setButtonDisabled]);

  useEffect(() => {
    getHosts({ text: `${query}` });
  }, [query, getHosts]);

  let disabledButtonTitle = "";
  if (buttonDisabled || ioc.operationInProgress) {
    disabledButtonTitle =
      "There is an ongoing operation, you cannot 'undeploy' the IOC right now";
  } else {
    if (!ioc.activeDeployment) {
      disabledButtonTitle = "IOC has no active deployment";
    }
  }

  return (
    <>
      <AccessControl
        allowedRoles={["DeploymentToolAdmin"]}
        renderNoAccess={() => <></>}
      >
        <ConfirmationDialog
          title={
            <Typography
              variant="h2"
              marginY={1}
            >
              Modifying deployment host
            </Typography>
          }
          content={
            <>
              <Typography component="span">
                Are you sure want to modify deployment host of
                <Typography
                  component="span"
                  fontFamily="monospace"
                >
                  {" "}
                  {ioc.namingName}
                </Typography>{" "}
                ?
              </Typography>
            </>
          }
          confirmText="Modify Host"
          cancelText="Cancel"
          open={open}
          onClose={onClose}
          onConfirm={onConfirm}
        />
        <Box sx={{ pt: 2 }}>
          <Typography
            sx={{ my: 2.5 }}
            component="h2"
            variant="h3"
          >
            Change deployment host
          </Typography>
          <Grid
            container
            spacing={1}
          >
            <Grid
              item
              xs={12}
            >
              <Autocomplete
                autoHighlight
                id="host"
                options={query ? (hosts?.netBoxHosts ?? []) : []}
                loading={loadingHosts}
                clearOnBlur={false}
                value={host}
                getOptionLabel={(option) => {
                  return option?.fqdn ?? "";
                }}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    label="host"
                    variant="outlined"
                    required
                    InputProps={{
                      ...params.InputProps,
                      endAdornment: (
                        <>
                          {loadingHosts ? (
                            <CircularProgress
                              color="inherit"
                              size={20}
                            />
                          ) : null}
                          {params.InputProps.endAdornment}
                        </>
                      )
                    }}
                  />
                )}
                onChange={(_event, value) => {
                  setHost(value);
                }}
                onInputChange={(event) => {
                  if (event) {
                    onHostKeyUp(event.nativeEvent);
                  }
                }}
                autoSelect
                filterOptions={(options) => options}
              />
            </Grid>
            <Grid
              item
              xs={12}
            >
              {error && (
                <Box sx={{ marginBottom: 1 }}>
                  <ApiAlertError error={error} />
                </Box>
              )}
              <Tooltip title={disabledButtonTitle}>
                <span>
                  <Button
                    color="primary"
                    variant="contained"
                    onClick={() => setOpen(true)}
                    disabled={
                      buttonDisabled ||
                      ioc.operationInProgress ||
                      !ioc.activeDeployment ||
                      noModification()
                    }
                  >
                    CHANGE HOST
                  </Button>
                </span>
              </Tooltip>
            </Grid>
          </Grid>
        </Box>
      </AccessControl>
    </>
  );
};