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

The Backstage plugin that renders technical documentation for your components

import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useState } from 'react';
import useAsync from 'react-use/esm/useAsync';
import { makeStyles } from '@material-ui/core/styles';
import { useEntityOwnership, EntityListProvider, catalogApiRef, CATALOG_FILTER_EXISTS } from '@backstage/plugin-catalog-react';
import './Tables/EntityListDocsTable.esm.js';
import { DocsTable } from './Tables/DocsTable.esm.js';
import { DocsCardGrid } from './Grids/DocsCardGrid.esm.js';
import { ContentHeader, SupportButton, Content, Progress, WarningPanel, CodeSnippet, HeaderTabs } from '@backstage/core-components';
import '@material-ui/core/Typography';
import { InfoCardGrid } from './Grids/InfoCardGrid.esm.js';
import { TechDocsPageWrapper } from './TechDocsPageWrapper.esm.js';
import { TechDocsIndexPage } from './TechDocsIndexPage.esm.js';
import { useApi } from '@backstage/core-plugin-api';
import { TECHDOCS_ANNOTATION } from '@backstage/plugin-techdocs-common';

const panels = {
  DocsTable,
  DocsCardGrid,
  TechDocsIndexPage,
  InfoCardGrid
};
const CustomDocsPanel = ({
  config,
  entities,
  index
}) => {
  const useStyles = makeStyles({
    panelContainer: {
      marginBottom: "2rem",
      ...config.panelCSS ? config.panelCSS : {}
    }
  });
  const classes = useStyles();
  const { loading: loadingOwnership, isOwnedEntity } = useEntityOwnership();
  const Panel = panels[config.panelType];
  const shownEntities = entities.filter((entity) => {
    if (config.filterPredicate === "ownedByUser") {
      if (loadingOwnership) {
        return false;
      }
      return isOwnedEntity(entity);
    }
    return typeof config.filterPredicate === "function" && config.filterPredicate(entity);
  });
  const Header = config.panelProps?.CustomHeader || (() => /* @__PURE__ */ jsx(ContentHeader, { title: config.title, description: config.description, children: index === 0 ? /* @__PURE__ */ jsx(SupportButton, { children: "Discover documentation in your ecosystem." }) : null }));
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(Header, {}),
    /* @__PURE__ */ jsx("div", { className: classes.panelContainer, children: /* @__PURE__ */ jsx(EntityListProvider, { children: /* @__PURE__ */ jsx(
      Panel,
      {
        "data-testid": "techdocs-custom-panel",
        entities: shownEntities,
        ...config.panelProps
      }
    ) }) })
  ] });
};
const TechDocsCustomHome = (props) => {
  const { tabsConfig, filter, CustomPageWrapper } = props;
  const [selectedTab, setSelectedTab] = useState(0);
  const catalogApi = useApi(catalogApiRef);
  const {
    value: entities,
    loading,
    error
  } = useAsync(async () => {
    const response = await catalogApi.getEntities({
      filter: {
        ...filter,
        [`metadata.annotations.${TECHDOCS_ANNOTATION}`]: CATALOG_FILTER_EXISTS
      },
      fields: [
        "apiVersion",
        "kind",
        "metadata",
        "relations",
        "spec.owner",
        "spec.type"
      ]
    });
    return response.items.filter((entity) => {
      return !!entity.metadata.annotations?.[TECHDOCS_ANNOTATION];
    });
  });
  const currentTabConfig = tabsConfig[selectedTab];
  if (loading) {
    return /* @__PURE__ */ jsx(TechDocsPageWrapper, { CustomPageWrapper, children: /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(Progress, {}) }) });
  }
  if (error) {
    return /* @__PURE__ */ jsx(TechDocsPageWrapper, { CustomPageWrapper, children: /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(
      WarningPanel,
      {
        severity: "error",
        title: "Could not load available documentation.",
        children: /* @__PURE__ */ jsx(CodeSnippet, { language: "text", text: error.toString() })
      }
    ) }) });
  }
  return /* @__PURE__ */ jsxs(TechDocsPageWrapper, { CustomPageWrapper, children: [
    /* @__PURE__ */ jsx(
      HeaderTabs,
      {
        selectedIndex: selectedTab,
        onChange: (index) => setSelectedTab(index),
        tabs: tabsConfig.map(({ label }, index) => ({
          id: index.toString(),
          label
        }))
      }
    ),
    /* @__PURE__ */ jsx(Content, { "data-testid": "techdocs-content", children: currentTabConfig.panels.map((config, index) => /* @__PURE__ */ jsx(
      CustomDocsPanel,
      {
        config,
        entities: !!entities ? entities : [],
        index
      },
      index
    )) })
  ] });
};

export { CustomDocsPanel, TechDocsCustomHome };
//# sourceMappingURL=TechDocsCustomHome.esm.js.map