@backstage/plugin-techdocs/dist/home/components/Grids/InfoCardGrid.esm.js

The Backstage plugin that renders technical documentation for your components

import { jsx, jsxs } from 'react/jsx-runtime';
import useAsync from 'react-use/esm/useAsync';
import { stringifyEntityRef } from '@backstage/catalog-model';
import { useRouteRef, useApi, configApiRef } from '@backstage/core-plugin-api';
import { Progress, ItemCardGrid, InfoCard, Link } from '@backstage/core-components';
import { entityPresentationApiRef } from '@backstage/plugin-catalog-react';
import { makeStyles } from '@material-ui/core/styles';
import { rootDocsRouteRef } from '../../../routes.esm.js';
import { toLowerMaybe } from '../../../helpers.esm.js';

const useStyles = makeStyles(
  (theme) => ({
    linkSpacer: {
      paddingTop: theme.spacing(0.2)
    },
    readMoreLink: {
      paddingTop: theme.spacing(0.2)
    }
  }),
  { name: "BackstageInfoCardGrid" }
);
const InfoCardGrid = (props) => {
  const { entities, linkContent, linkDestination } = props;
  const classes = useStyles();
  const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
  const config = useApi(configApiRef);
  const linkRoute = (entity) => {
    if (linkDestination) {
      const destination = linkDestination(entity);
      if (destination) {
        return destination;
      }
    }
    return getRouteToReaderPageFor({
      namespace: toLowerMaybe(entity.metadata.namespace ?? "default", config),
      kind: toLowerMaybe(entity.kind, config),
      name: toLowerMaybe(entity.metadata.name, config)
    });
  };
  const entityPresentationApi = useApi(entityPresentationApiRef);
  const { value: entityRefToPresentation, loading } = useAsync(async () => {
    return new Map(
      await Promise.all(
        entities?.map(async (entity) => {
          const presentation = await entityPresentationApi.forEntity(entity).promise;
          return [stringifyEntityRef(entity), presentation];
        }) || []
      )
    );
  });
  if (loading) return /* @__PURE__ */ jsx(Progress, {});
  if (!entities || !entities?.length) return null;
  return /* @__PURE__ */ jsx(ItemCardGrid, { "data-testid": "info-card-container", children: entities.map((entity) => /* @__PURE__ */ jsxs(
    InfoCard,
    {
      "data-testid": entity?.metadata?.title,
      title: entityRefToPresentation?.get(stringifyEntityRef(entity))?.primaryTitle,
      children: [
        /* @__PURE__ */ jsx("div", { children: entity?.metadata?.description }),
        /* @__PURE__ */ jsx("div", { className: classes.linkSpacer }),
        /* @__PURE__ */ jsx(
          Link,
          {
            to: linkRoute(entity),
            className: classes.readMoreLink,
            "data-testid": "read-docs-link",
            children: linkContent || "Read Docs"
          }
        )
      ]
    },
    entity.metadata.name
  )) });
};

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