ChangeHostAdmin.js

import React, { useState, useRef, useEffect, useCallback } from "react";
import AccessControl from "../../auth/AccessControl";
import { SimpleAccordion } from "../../common/Accordion/SimpleAccordion";
import {
  Button,
  Typography,
  Grid,
  Tooltip,
  TextField
} from "@material-ui/core";
import { SimpleModal } from "../../common/SimpleModal/SimpleModal";
import { ConfirmationDialog } from "../../dialog/ConfirmationDialog";
import {
  useUpdateActiveDeploymentHost,
  useCSEntrySearch
} from "../../../api/SwaggerApi";
import { Alert, Autocomplete } from "@material-ui/lab";
import { useTypingTimer } from "../../common/SearchBoxFilter/TypingTimer";
import { transformHostQuery } from "../../common/Helper";

export default function ChangeHostAdmin({
  ioc,
  getIOC,
  resetTab,
  buttonDisabled
}) {
  const initHost = {
    csEntryHost: {
      fqdn: ioc.activeDeployment.host.fqdn,
      id: ioc.activeDeployment.host.csEntryId
    }
  };

  const [hosts, getHosts] = useCSEntrySearch();
  const [host, setHost] = useState(initHost);
  const [query, onHostKeyUp] = useTypingTimer({ interval: 500 });

  function onError(message) {
    setError(message);
  }

  const noModification = useCallback(
    () => !host || host.csEntryHost.id === ioc.activeDeployment.host.csEntryId,
    [host, ioc]
  );

  // for the dialog
  const [error, setError] = useState();
  const [adHocDialogOpen, setAdHocDialogOpen] = useState(false);
  const [adHocDialogTitle, setAdHocDiatlogTitle] = useState();
  const [adHocDialogDescription, setAdHocDialogDescription] = useState();
  const callbackRef = useRef();

  const [updatedIoc, updateHost] = useUpdateActiveDeploymentHost(
    ioc.id,
    onError
  );
  const [comment, setComment] = useState("");

  useEffect(() => {
    if (updatedIoc) {
      getIOC();
      resetTab();
    }
  }, [updatedIoc, getIOC, resetTab]);

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

  const openModifyModal = () => {
    setAdHocDiatlogTitle("Modifying deployment host");
    setAdHocDialogDescription(
      <>
        <Typography style={{ display: "inline-block" }}>
          Are you sure want to modify deployment host of &nbsp;
        </Typography>
        <Typography
          style={{ fontFamily: "monospace", display: "inline-block" }}
        >
          {" "}
          {ioc.namingName}?{" "}
        </Typography>
      </>
    );
    callbackRef.current = modifyHost;
    setAdHocDialogOpen(true);
  };

  const modifyHost = () => {
    updateHost({
      hostCSEntryId: host.csEntryHost.id,
      comment: comment
    });
  };

  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={() => <></>}
      >
        <>
          <SimpleModal
            open={adHocDialogOpen}
            setOpen={setAdHocDialogOpen}
          >
            <ConfirmationDialog
              open={adHocDialogOpen}
              setOpen={setAdHocDialogOpen}
              title={adHocDialogTitle}
              description={adHocDialogDescription}
              callback={callbackRef.current}
            />
          </SimpleModal>

          <SimpleAccordion
            summary="Change deployment host"
            defaultExpanded
          >
            <Grid
              container
              spacing={1}
            >
              {error ? (
                <Grid
                  item
                  xs={12}
                >
                  <Alert severity="error">{error}</Alert>
                </Grid>
              ) : (
                <></>
              )}
              <Grid
                item
                xs={12}
              >
                <Autocomplete
                  autoHighlight
                  id="host"
                  options={hosts.hostList}
                  defaultValue={initHost}
                  getOptionLabel={(option) => {
                    return option?.csEntryHost?.fqdn;
                  }}
                  renderInput={(params) => (
                    <TextField
                      {...params}
                      label="host"
                      variant="outlined"
                      required
                    />
                  )}
                  onChange={(event, value, reason) => {
                    setHost(value);
                  }}
                  onInputChange={(event, value, reason) => {
                    event && onHostKeyUp(event.nativeEvent);
                  }}
                  autoSelect
                  filterOptions={(options, state) => options}
                />
              </Grid>
              <Grid
                item
                xs={12}
              >
                <TextField
                  id="comment"
                  autoComplete="off"
                  label="Deployment comment"
                  variant="outlined"
                  onChange={(event) => setComment(event.target.value)}
                  fullWidth
                />
              </Grid>
              <Grid
                item
                xs={12}
              >
                <Tooltip title={disabledButtonTitle}>
                  <span>
                    <Button
                      color="primary"
                      variant="contained"
                      onClick={openModifyModal}
                      disabled={
                        buttonDisabled ||
                        ioc.operationInProgress ||
                        !ioc.activeDeployment ||
                        noModification()
                      }
                    >
                      CHANGE HOST
                    </Button>
                  </span>
                </Tooltip>
              </Grid>
            </Grid>
          </SimpleAccordion>
        </>
      </AccessControl>
    </>
  );
}