@backstage/plugin-techdocs/dist/reader/components/TechDocsBuildLogs.esm.js

The Backstage plugin that renders technical documentation for your components

import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { LogViewer } from '@backstage/core-components';
import Button from '@material-ui/core/Button';
import Drawer from '@material-ui/core/Drawer';
import Grid from '@material-ui/core/Grid';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import { makeStyles, createStyles } from '@material-ui/core/styles';
import Close from '@material-ui/icons/Close';
import { useState } from 'react';
import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
import { techdocsTranslationRef } from '../../translation.esm.js';

const useDrawerStyles = makeStyles(
  (theme) => createStyles({
    paper: {
      width: "100%",
      [theme.breakpoints.up("sm")]: {
        width: "75%"
      },
      [theme.breakpoints.up("md")]: {
        width: "50%"
      },
      padding: theme.spacing(2.5)
    },
    root: {
      height: "100%",
      overflow: "hidden"
    },
    logs: {
      background: theme.palette.background.default
    }
  })
);
const TechDocsBuildLogsDrawerContent = ({
  buildLog,
  onClose
}) => {
  const classes = useDrawerStyles();
  const { t } = useTranslationRef(techdocsTranslationRef);
  const logText = buildLog.length === 0 ? t("buildLogs.waitingForLogs") : buildLog.join("\n");
  return /* @__PURE__ */ jsxs(
    Grid,
    {
      container: true,
      direction: "column",
      className: classes.root,
      spacing: 0,
      wrap: "nowrap",
      children: [
        /* @__PURE__ */ jsxs(
          Grid,
          {
            item: true,
            container: true,
            justifyContent: "space-between",
            alignItems: "center",
            spacing: 0,
            wrap: "nowrap",
            children: [
              /* @__PURE__ */ jsx(Typography, { variant: "h5", children: t("buildLogs.title") }),
              /* @__PURE__ */ jsx(
                IconButton,
                {
                  title: t("buildLogs.closeDrawer"),
                  onClick: onClose,
                  color: "inherit",
                  children: /* @__PURE__ */ jsx(Close, {})
                },
                "dismiss"
              )
            ]
          }
        ),
        /* @__PURE__ */ jsx(Grid, { item: true, xs: true, children: /* @__PURE__ */ jsx(LogViewer, { text: logText, classes: { root: classes.logs } }) })
      ]
    }
  );
};
const TechDocsBuildLogs = ({ buildLog }) => {
  const classes = useDrawerStyles();
  const [open, setOpen] = useState(false);
  const { t } = useTranslationRef(techdocsTranslationRef);
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(Button, { color: "inherit", onClick: () => setOpen(true), children: t("buildLogs.showBuildLogs") }),
    /* @__PURE__ */ jsx(
      Drawer,
      {
        classes: { paper: classes.paper },
        anchor: "right",
        open,
        onClose: () => setOpen(false),
        children: /* @__PURE__ */ jsx(
          TechDocsBuildLogsDrawerContent,
          {
            buildLog,
            onClose: () => setOpen(false)
          }
        )
      }
    )
  ] });
};

export { TechDocsBuildLogs, TechDocsBuildLogsDrawerContent };
//# sourceMappingURL=TechDocsBuildLogs.esm.js.map