@roadiehq/backstage-plugin-jira/dist/components/EntityJiraActivityStreamCard/ActivityStream.esm.js

import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { useState, useCallback } from 'react';
import { makeStyles, createStyles, Paper, Box, Tooltip, Typography, Divider, Link } from '@material-ui/core';
import { Progress } from '@backstage/core-components';
import parse, { attributesToProps, domToReact } from 'html-react-parser';
import sanitizeHtml from 'sanitize-html';
import { useActivityStream } from '../../hooks/useActivityStream.esm.js';
import '@backstage/core-plugin-api';
import 'react-use';
import '../../api/index.esm.js';

const useStyles = makeStyles(
  (theme) => createStyles({
    paper: {
      padding: theme.spacing(2),
      backgroundColor: theme.palette.type === "dark" ? "#333" : "#f6f8fa",
      color: theme.palette.text.primary,
      marginTop: theme.spacing(1),
      overflowY: "auto",
      maxHeight: "290px",
      "& a": {
        color: theme.palette.primary.main
      },
      "& hr": {
        backgroundColor: theme.palette.divider,
        margin: theme.spacing(1, 0)
      },
      "& blockquote": {
        background: theme.palette.type === "dark" ? "#424242" : "#e0f0ff",
        borderLeft: "1px solid #c2d9ef",
        color: theme.palette.text.primary,
        fontStyle: "normal",
        margin: theme.spacing(1, 0),
        overflowX: "auto",
        overflowY: "hidden",
        padding: theme.spacing(0, 1)
      },
      "& > :last-child > hr": {
        display: "none"
      },
      "&::-webkit-scrollbar-track": {
        backgroundColor: theme.palette.type === "dark" ? "#555" : "#F5F5F5",
        borderRadius: "5px"
      },
      "&::-webkit-scrollbar": {
        width: "5px",
        backgroundColor: theme.palette.type === "dark" ? "#555" : "#F5F5F5",
        borderRadius: "5px"
      },
      "&::-webkit-scrollbar-thumb": {
        border: `1px solid ${theme.palette.type === "dark" ? "#555" : "#F5F5F5"}`,
        backgroundColor: theme.palette.type === "dark" ? "#F5F5F5" : "#555",
        borderRadius: "4px"
      },
      "& span": {
        fontSize: "0.7rem"
      }
    },
    time: {
      lineHeight: 0,
      marginLeft: theme.spacing(1)
    },
    timeNoIcon: {
      lineHeight: 0,
      margin: "8px 0"
    },
    link: {
      cursor: "pointer"
    }
  })
);
const options = {
  replace: (node) => {
    if (!node) return null;
    if (node.name === "a") {
      const props = attributesToProps(
        node.attribs
      );
      return /* @__PURE__ */ jsx("a", { ...props, target: "_blank", rel: "noopener noreferrer", children: node.children && domToReact(node.children) });
    }
    return null;
  }
};
const ActivityStream = ({
  projectKey,
  tokenType,
  componentName,
  ticketIds,
  label
}) => {
  const classes = useStyles();
  const [size, setSize] = useState(25);
  const [disableButton, setDisableButton] = useState(false);
  const isBearerAuth = tokenType?.includes("Bearer") ? true : false;
  const { activities, activitiesLoading, activitiesError } = useActivityStream(
    size,
    projectKey,
    componentName,
    ticketIds,
    label,
    isBearerAuth
  );
  const showMore = useCallback(() => {
    setSize(size + 10);
    if (activities && activities.length < size) {
      setDisableButton(true);
    }
  }, [size, activities]);
  if (activitiesError) return null;
  const filteredIssues = activities?.filter(
    (entry) => !entry?.icon?.title.includes("Sub-task")
  );
  return /* @__PURE__ */ jsxs(Paper, { className: classes.paper, children: [
    activitiesLoading ? /* @__PURE__ */ jsx(Progress, {}) : null,
    filteredIssues ? /* @__PURE__ */ jsxs(Fragment, { children: [
      filteredIssues.map((entry) => /* @__PURE__ */ jsxs(Box, { children: [
        parse(entry.title, options),
        /* @__PURE__ */ jsx(Box, { children: parse(
          sanitizeHtml(entry.summary || entry.content || "", {
            disallowedTagsMode: "escape"
          }),
          options
        ) }),
        /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", mt: 1, children: [
          entry.icon ? /* @__PURE__ */ jsx(Tooltip, { title: entry.icon.title, children: /* @__PURE__ */ jsx("img", { src: entry.icon.url, alt: entry.icon.title }) }) : null,
          /* @__PURE__ */ jsx(Tooltip, { title: entry.time.value, children: /* @__PURE__ */ jsx(
            Typography,
            {
              variant: "caption",
              className: entry.icon ? classes.time : classes.timeNoIcon,
              children: entry.time.elapsed
            }
          ) })
        ] }),
        /* @__PURE__ */ jsx(Divider, {})
      ] }, entry.id)),
      /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", pt: 1, children: disableButton ? "No more activities" : /* @__PURE__ */ jsx(Link, { onClick: showMore, className: classes.link, children: activitiesLoading ? "Loading.." : "Show more.." }) })
    ] }) : null
  ] });
};

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