@backstage/plugin-techdocs-module-addons-contrib/dist/ReportIssue/ReportIssueContent.esm.js

Plugin module for contributed TechDocs Addons

import { jsx } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import { makeStyles, Portal, Paper } from '@material-ui/core';
import { useGitTemplate } from './hooks.esm.js';
import { PAGE_MAIN_CONTENT_SELECTOR, PAGE_FEEDBACK_LINK_SELECTOR, ADDON_FEEDBACK_CONTAINER_SELECTOR, ADDON_FEEDBACK_CONTAINER_ID } from './constants.esm.js';
import { IssueLink } from './IssueLink.esm.js';
import { useShadowRootSelection, useShadowRootElements } from '@backstage/plugin-techdocs-react';

const useStyles = makeStyles((theme) => ({
  root: {
    transform: "translate(-100%, -100%)",
    position: "absolute",
    padding: theme.spacing(1),
    zIndex: theme.zIndex.tooltip,
    background: theme.palette.common.white
  }
}));
const ReportIssueAddonContent = ({
  debounceTime,
  templateBuilder,
  repository
}) => {
  const classes = useStyles();
  const [style, setStyle] = useState();
  const defaultTemplate = useGitTemplate(debounceTime);
  const selection = useShadowRootSelection(debounceTime);
  const [mainContent, feedbackLink] = useShadowRootElements([
    PAGE_MAIN_CONTENT_SELECTOR,
    PAGE_FEEDBACK_LINK_SELECTOR
  ]);
  let [feedbackContainer] = useShadowRootElements([
    ADDON_FEEDBACK_CONTAINER_SELECTOR
  ]);
  if (feedbackLink) {
    feedbackLink.style.display = "none";
  }
  useEffect(() => {
    if (!selection || !selection.containsNode(mainContent, true) || selection.containsNode(feedbackContainer, true)) {
      return;
    }
    const mainContentPosition = mainContent.getBoundingClientRect();
    const selectionPosition = selection.getRangeAt(0).getBoundingClientRect();
    const distanceFromTop = selectionPosition.top - mainContentPosition.top;
    const minDistanceFromTop = 50;
    let top = distanceFromTop < minDistanceFromTop ? 101 : distanceFromTop - 16;
    if (mainContentPosition.top < 0) {
      const absMainContentTop = Math.abs(mainContentPosition.top);
      if (distanceFromTop - absMainContentTop < minDistanceFromTop) {
        top += 89;
      }
    }
    setStyle({
      top: `${top}px`,
      left: `${selectionPosition.left + selectionPosition.width / 2}px`
    });
  }, [selection, mainContent, feedbackContainer]);
  if (!feedbackContainer) {
    feedbackContainer = document.createElement("div");
    feedbackContainer.setAttribute("id", ADDON_FEEDBACK_CONTAINER_ID);
    mainContent.prepend(feedbackContainer);
  }
  if (!selection || !selection.containsNode(mainContent, true)) {
    return null;
  }
  return /* @__PURE__ */ jsx(Portal, { container: feedbackContainer, children: /* @__PURE__ */ jsx(
    Paper,
    {
      "data-testid": "report-issue-addon",
      className: classes.root,
      style,
      children: /* @__PURE__ */ jsx(
        IssueLink,
        {
          repository,
          template: templateBuilder ? templateBuilder({ selection }) : defaultTemplate
        }
      )
    }
  ) });
};

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