@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 { useEffect } from 'react';
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 { useTechDocsAddons, useTechDocsReaderPage, TechDocsAddonLocations } from '@backstage/plugin-techdocs-react';
import { entityPresentationApiRef, getEntityRelations, EntityRefLink, EntityRefLinks } from '@backstage/plugin-catalog-react';
import { RELATION_OWNED_BY, stringifyEntityRef } from '@backstage/catalog-model';
import { HeaderLabel, Header } from '@backstage/core-components';
import { useApi, configApiRef, useRouteRef } from '@backstage/core-plugin-api';
import capitalize from 'lodash/capitalize';
import { rootRouteRef } from '../../../routes.esm.js';
import { useParams } from 'react-router-dom';

const skeleton = /* @__PURE__ */ jsx(Skeleton, { animation: "wave", variant: "text", height: 40 });
const TechDocsReaderPageHeader = (props) => {
  const { children } = props;
  const addons = useTechDocsAddons();
  const configApi = useApi(configApiRef);
  const entityPresentationApi = useApi(entityPresentationApiRef);
  const { "*": path = "" } = useParams();
  const {
    title,
    setTitle,
    subtitle,
    setSubtitle,
    entityRef,
    metadata: { value: metadata, loading: metadataLoading },
    entityMetadata: { value: entityMetadata, loading: entityMetadataLoading }
  } = useTechDocsReaderPage();
  useEffect(() => {
    if (!metadata) return;
    setTitle(metadata.site_name);
    setSubtitle(() => {
      let { site_description } = metadata;
      if (!site_description || site_description === "None") {
        site_description = "";
      }
      return site_description;
    });
  }, [metadata, setTitle, setSubtitle]);
  const appTitle = configApi.getOptional("app.title") || "Backstage";
  const { locationMetadata, spec } = entityMetadata || {};
  const lifecycle = spec?.lifecycle;
  const ownedByRelations = entityMetadata ? getEntityRelations(entityMetadata, RELATION_OWNED_BY) : [];
  const docsRootLink = useRouteRef(rootRouteRef)();
  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: "Owner",
        value: /* @__PURE__ */ jsx(
          EntityRefLinks,
          {
            color: "inherit",
            entityRefs: ownedByRelations,
            defaultKind: "group"
          }
        )
      }
    ),
    lifecycle ? /* @__PURE__ */ jsx(HeaderLabel, { label: "Lifecycle", value: String(lifecycle) }) : null,
    locationMetadata && locationMetadata.type !== "dir" && locationMetadata.type !== "file" ? /* @__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: "Source" })
        ] }),
        url: locationMetadata.target
      }
    ) : null
  ] });
  const noEntMetadata = !entityMetadataLoading && entityMetadata === void 0;
  const noTdMetadata = !metadataLoading && metadata === void 0;
  if (noEntMetadata || noTdMetadata) return null;
  const stringEntityRef = stringifyEntityRef(entityRef);
  const entityDisplayName = entityPresentationApi.forEntity(stringEntityRef).snapshot.primaryTitle;
  const removeTrailingSlash = (str) => str.replace(/\/$/, "");
  const normalizeAndSpace = (str) => str.replace(/-/g, " ").split(" ").map(capitalize).join(" ");
  let techdocsTabTitleItems = [];
  if (path !== "")
    techdocsTabTitleItems = removeTrailingSlash(path).split("/").slice(0, 3).map(normalizeAndSpace);
  const tabTitleItems = [appTitle, entityDisplayName, ...techdocsTabTitleItems];
  const tabTitle = tabTitleItems.join(" | ");
  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