@veecode-platform/plugin-kong-service-manager/dist/components/SpecList/PullRequesModal/PullRequestModal.esm.js

import { Modal, Fade, Box, Paper, Typography, Tooltip, IconButton, TextField, CircularProgress } from '@material-ui/core';
import React from 'react';
import { usePullRequestStyles } from './styles.esm.js';
import '@backstage/core-components';
import '@backstage/plugin-catalog-react';
import '@material-ui/lab';
import '../../../context/KongServiceManagerContext.esm.js';
import { useKongServiceManagerContext } from '../../../context/KongServiceManagerProvider.esm.js';
import '@material-ui/core/InputBase';
import '@material-ui/icons/Search';
import '../../shared/SearchBar/styles.esm.js';
import '../../shared/BoxComponent/styles.esm.js';
import { useNavigate } from 'react-router-dom';
import { CircleCloseIcon } from '../../shared/icons/Icons.esm.js';
import '../../shared/SelectComponent/Select.esm.js';
import '../../shared/HtmlTooltip/HtmlTooltip.esm.js';
import { ButtonComponent } from '../../shared/ButtonComponent/ButtonComponent.esm.js';
import '../../shared/LoadingComponent/styles.esm.js';
import '../../shared/MissingAnnotation/styles.esm.js';
import '../../shared/Fields/Fields.esm.js';
import '../../shared/SkeletonComponent/styles.esm.js';
import { checkGitProvider } from '../../../utils/helpers/checkGitProvider.esm.js';
import { ANNOTATION_LOCATION } from '@backstage/catalog-model';
import { FeedbackComponent } from '../../shared/FeedbackComponent/FeedbackComponent.esm.js';
import { addPullRequestResponse } from './state/pullRequestResponseState/actions.esm.js';
import { PullRequestResponseReducer, initialPullRequestResponseState } from './state/pullRequestResponseState/reducer.esm.js';
import { transformPath } from '../../../utils/helpers/transformPath.esm.js';

const PullRequestModal = (props) => {
  const [title, setTitle] = React.useState("");
  const [message, setMessage] = React.useState("");
  const [showFeedback, setShowFeedback] = React.useState(false);
  const [pullRequestResponseState, pullRequestResponseDispatch] = React.useReducer(
    PullRequestResponseReducer,
    initialPullRequestResponseState
  );
  const [processingData, setProcessingData] = React.useState(false);
  const { show, handleCloseModal, route } = props;
  const {
    modalOnBlur,
    modalContent,
    modalBody,
    container,
    titleBar,
    titleContent,
    modalHeader,
    content,
    pullRequestCard,
    input,
    footer,
    spinner,
    cancel,
    submit
  } = usePullRequestStyles();
  const navigate = useNavigate();
  const {
    entity,
    kongSpecs,
    pluginsToSpecState,
    applyKongServicePluginsToSpec,
    applyKongRoutePluginsToSpec
  } = useKongServiceManagerContext();
  const location = entity?.metadata.annotations?.[ANNOTATION_LOCATION];
  const provider = checkGitProvider(location);
  const goBack = () => navigate(-1);
  const preparatePullRequest = async () => {
    if (pluginsToSpecState && kongSpecs) {
      setProcessingData(true);
      let response;
      if (route) {
        response = await applyKongRoutePluginsToSpec(
          kongSpecs[0],
          title,
          message,
          location,
          route.path,
          route.method.toLowerCase(),
          pluginsToSpecState
        );
      } else {
        response = await applyKongServicePluginsToSpec(
          kongSpecs[0],
          title,
          message,
          location,
          pluginsToSpecState
        );
      }
      if (response) {
        pullRequestResponseDispatch(
          addPullRequestResponse({
            status: response.status === 201 ? "success" : "error",
            message: response.message
          })
        );
        setShowFeedback(true);
        setTimeout(() => {
          setShowFeedback(false);
          handleCloseModal();
        }, 3e3);
      }
    }
  };
  React.useEffect(() => {
    if (provider) {
      setTitle(`Update to ${kongSpecs[0]}`);
    }
  }, [kongSpecs]);
  React.useEffect(() => {
    if (pluginsToSpecState.length > 0) {
      const plugins = pluginsToSpecState.flatMap((item) => item.name);
      if (route) {
        setMessage(
          `Add/Update Kong plugins to path: ${transformPath(
            route.path
          )}, method: ${route.method.toString()} 

${plugins.map((plugin) => `\u2714\uFE0F ${plugin}
`).join("")}`
        );
      } else {
        setMessage(
          `Add/Update Kong plugins to spec: 

${plugins.map((plugin) => `\u2714\uFE0F ${plugin}
`).join("")}`
        );
      }
    }
  }, [pluginsToSpecState]);
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
    Modal,
    {
      open: show,
      onClose: handleCloseModal,
      "aria-labelledby": "modal-modal-pull-request-card",
      "aria-describedby": "modal-modal-create-pull-request",
      className: modalOnBlur,
      closeAfterTransition: true
    },
    /* @__PURE__ */ React.createElement(Fade, { in: show }, /* @__PURE__ */ React.createElement(Box, { className: modalContent }, /* @__PURE__ */ React.createElement("div", { className: modalBody }, /* @__PURE__ */ React.createElement(Paper, { className: container }, /* @__PURE__ */ React.createElement(Box, { className: titleBar }, /* @__PURE__ */ React.createElement(
      Typography,
      {
        variant: "h6",
        className: titleContent
      },
      `Commit to ${provider}`
    ), /* @__PURE__ */ React.createElement("div", { className: modalHeader }, /* @__PURE__ */ React.createElement(Tooltip, { title: "Close" }, /* @__PURE__ */ React.createElement(IconButton, { onClick: handleCloseModal }, /* @__PURE__ */ React.createElement(CircleCloseIcon, null))))), /* @__PURE__ */ React.createElement("div", { className: content }, /* @__PURE__ */ React.createElement(Box, { className: pullRequestCard }, /* @__PURE__ */ React.createElement(
      TextField,
      {
        className: input,
        id: "title",
        label: "Title",
        variant: "outlined",
        fullWidth: true,
        value: title,
        onChange: (e) => setTitle(e.target.value)
      }
    ), /* @__PURE__ */ React.createElement(
      TextField,
      {
        className: input,
        id: "message",
        label: "Message",
        variant: "outlined",
        fullWidth: true,
        multiline: true,
        minRows: 12,
        value: message,
        onChange: (e) => setMessage(e.target.value)
      }
    ), /* @__PURE__ */ React.createElement("div", { className: footer }, /* @__PURE__ */ React.createElement(
      ButtonComponent,
      {
        classes: cancel,
        handleClick: goBack,
        isDisabled: processingData
      },
      "Cancel"
    ), /* @__PURE__ */ React.createElement(
      ButtonComponent,
      {
        classes: submit,
        handleClick: preparatePullRequest,
        isDisabled: processingData
      },
      processingData ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CircularProgress, { className: spinner, size: 20 }), " ", "Creating ...") : /* @__PURE__ */ React.createElement(React.Fragment, null, "Create Pull Request")
    )))))), showFeedback && /* @__PURE__ */ React.createElement(
      FeedbackComponent,
      {
        variant: pullRequestResponseState.status,
        message: pullRequestResponseState.message
      }
    )))
  ));
};

export { PullRequestModal };
//# sourceMappingURL=PullRequestModal.esm.js.map