@backstage/plugin-techdocs/dist/alpha/components/TechDocsReaderEntityCard.esm.js

The Backstage plugin that renders technical documentation for your components

import { jsx, jsxs } from 'react/jsx-runtime';
import { useTechDocsReaderPage } from '@backstage/plugin-techdocs-react';
import { getEntityRelations, EntityRefLink, EntityRefLinks } from '@backstage/plugin-catalog-react';
import { RELATION_OWNED_BY } from '@backstage/catalog-model';
import { Card, CardBody, Text } from '@backstage/ui';
import capitalize from 'lodash/capitalize';
import styles from './TechDocsReaderEntityCard.module.css.esm.js';
import { TechDocsReaderSearch } from './TechDocsReaderSearch.esm.js';

const TechDocsReaderEntityCard = (props) => {
  const { withSearch } = props;
  const {
    entityRef,
    entityMetadata: { value: entityMetadata, loading: entityMetadataLoading }
  } = useTechDocsReaderPage();
  if (entityMetadataLoading || !entityMetadata) return null;
  const { spec } = entityMetadata;
  const lifecycle = spec?.lifecycle;
  const ownedByRelations = getEntityRelations(
    entityMetadata,
    RELATION_OWNED_BY
  );
  return /* @__PURE__ */ jsx(Card, { className: styles.entityCard, children: /* @__PURE__ */ jsxs(CardBody, { className: styles.cardBody, children: [
    /* @__PURE__ */ jsxs("dl", { className: styles.definitionList, children: [
      /* @__PURE__ */ jsxs("div", { className: styles.definitionGroup, children: [
        /* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsxs(Text, { variant: "body-small", weight: "bold", children: [
          capitalize(entityMetadata.kind),
          ":"
        ] }) }),
        /* @__PURE__ */ jsx("dd", { className: styles.definitionValue, children: /* @__PURE__ */ jsx(
          EntityRefLink,
          {
            entityRef,
            title: entityMetadata.metadata.title,
            defaultKind: "Component"
          }
        ) })
      ] }),
      ownedByRelations.length > 0 && /* @__PURE__ */ jsxs("div", { className: styles.definitionGroup, children: [
        /* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx(Text, { variant: "body-small", weight: "bold", children: "Owner:" }) }),
        /* @__PURE__ */ jsx("dd", { className: styles.definitionValue, children: /* @__PURE__ */ jsx(
          EntityRefLinks,
          {
            entityRefs: ownedByRelations,
            defaultKind: "group"
          }
        ) })
      ] }),
      lifecycle && /* @__PURE__ */ jsxs("div", { className: styles.definitionGroup, children: [
        /* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx(Text, { variant: "body-small", weight: "bold", children: "Lifecycle:" }) }),
        /* @__PURE__ */ jsx("dd", { className: styles.definitionValue, children: /* @__PURE__ */ jsx(Text, { variant: "body-small", children: String(lifecycle) }) })
      ] })
    ] }),
    withSearch && /* @__PURE__ */ jsx("div", { className: styles.searchWrapper, children: /* @__PURE__ */ jsx(TechDocsReaderSearch, { entityId: entityRef }) })
  ] }) });
};

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