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

The Backstage plugin that renders technical documentation for your components

import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import Helmet from 'react-helmet';
import Grid from '@material-ui/core/Grid';
import Skeleton from '@material-ui/lab/Skeleton';
import CodeIcon from '@material-ui/icons/Code';
import { TechDocsAddonLocations } from '@backstage/plugin-techdocs-react';
import { getEntityRelations, EntityRefLink, EntityRefLinks } from '@backstage/plugin-catalog-react';
import { RELATION_OWNED_BY } from '@backstage/catalog-model';
import { HeaderLabel, Header } from '@backstage/core-components';
import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
import { useRouteRef } from '@backstage/core-plugin-api';
import capitalize from 'lodash/capitalize';
import { rootRouteRef } from '../../../routes.esm.js';
import { techdocsTranslationRef } from '../../../translation.esm.js';
import { useTechDocsReaderHeaderData } from '../../../hooks/useTechDocsReaderHeaderData.esm.js';

const skeleton = /* @__PURE__ */ jsx(Skeleton, { animation: "wave", variant: "text", height: 40 });
const TechDocsReaderPageHeader = (props) => {
  const { children } = props;
  const { t } = useTranslationRef(techdocsTranslationRef);
  const {
    title,
    subtitle,
    entityRef,
    entityMetadata,
    tabTitle,
    hidden,
    showSourceLink,
    sourceLink,
    addons
  } = useTechDocsReaderHeaderData();
  const docsRootLink = useRouteRef(rootRouteRef)();
  if (hidden) return null;
  const { spec } = entityMetadata || {};
  const lifecycle = spec?.lifecycle;
  const ownedByRelations = entityMetadata ? getEntityRelations(entityMetadata, RELATION_OWNED_BY) : [];
  const labels = /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      HeaderLabel,
      {
        label: capitalize(entityMetadata?.kind || "entity"),
        value: /* @__PURE__ */ jsx(
          EntityRefLink,
          {
            color: "inherit",
            entityRef,
            title: entityMetadata?.metadata.title,
            defaultKind: "Component"
          }
        )
      }
    ),
    ownedByRelations.length > 0 && /* @__PURE__ */ jsx(
      HeaderLabel,
      {
        label: t("readerPageHeader.owner"),
        value: /* @__PURE__ */ jsx(
          EntityRefLinks,
          {
            color: "inherit",
            entityRefs: ownedByRelations,
            defaultKind: "group"
          }
        )
      }
    ),
    lifecycle ? /* @__PURE__ */ jsx(
      HeaderLabel,
      {
        label: t("readerPageHeader.lifecycle"),
        value: String(lifecycle)
      }
    ) : null,
    showSourceLink ? /* @__PURE__ */ jsx(
      HeaderLabel,
      {
        label: "",
        value: /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", alignItems: "center", children: [
          /* @__PURE__ */ jsx(Grid, { style: { padding: 0 }, item: true, children: /* @__PURE__ */ jsx(CodeIcon, { style: { marginTop: "-25px" } }) }),
          /* @__PURE__ */ jsx(Grid, { style: { padding: 0 }, item: true, children: t("readerPageHeader.source") })
        ] }),
        url: sourceLink
      }
    ) : null
  ] });
  return /* @__PURE__ */ jsxs(
    Header,
    {
      type: "Documentation",
      typeLink: docsRootLink,
      title: title || skeleton,
      subtitle: subtitle === "" ? void 0 : subtitle || skeleton,
      children: [
        /* @__PURE__ */ jsx(Helmet, { titleTemplate: "%s", children: /* @__PURE__ */ jsx("title", { children: tabTitle }) }),
        labels,
        children,
        addons.renderComponentsByLocation(TechDocsAddonLocations.Header)
      ]
    }
  );
};

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