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

import React, { 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__ */ React.createElement("a", { ...props, target: "_blank", rel: "noopener noreferrer" }, 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__ */ React.createElement(Paper, { className: classes.paper }, activitiesLoading ? /* @__PURE__ */ React.createElement(Progress, null) : null, filteredIssues ? /* @__PURE__ */ React.createElement(React.Fragment, null, filteredIssues.map((entry) => /* @__PURE__ */ React.createElement(Box, { key: entry.id }, parse(entry.title, options), /* @__PURE__ */ React.createElement(Box, null, parse(
    sanitizeHtml(entry.summary || entry.content || "", {
      disallowedTagsMode: "escape"
    }),
    options
  )), /* @__PURE__ */ React.createElement(Box, { display: "flex", alignItems: "center", mt: 1 }, entry.icon ? /* @__PURE__ */ React.createElement(Tooltip, { title: entry.icon.title }, /* @__PURE__ */ React.createElement("img", { src: entry.icon.url, alt: entry.icon.title })) : null, /* @__PURE__ */ React.createElement(Tooltip, { title: entry.time.value }, /* @__PURE__ */ React.createElement(
    Typography,
    {
      variant: "caption",
      className: entry.icon ? classes.time : classes.timeNoIcon
    },
    entry.time.elapsed
  ))), /* @__PURE__ */ React.createElement(Divider, null))), /* @__PURE__ */ React.createElement(Box, { display: "flex", justifyContent: "center", pt: 1 }, disableButton ? "No more activities" : /* @__PURE__ */ React.createElement(Link, { onClick: showMore, className: classes.link }, activitiesLoading ? "Loading.." : "Show more.."))) : null);
};

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