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

The Backstage plugin that renders technical documentation for your components

import { jsx, Fragment } from 'react/jsx-runtime';
import useCopyToClipboard from 'react-use/esm/useCopyToClipboard';
import { useRouteRef, useApi, configApiRef } from '@backstage/core-plugin-api';
import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
import { rootDocsRouteRef } from '../../../routes.esm.js';
import { Table, EmptyState, LinkButton } from '@backstage/core-components';
import { techdocsTranslationRef } from '../../../translation.esm.js';
import { actionFactories } from './actions.esm.js';
import { defaultColumns, columnFactories } from './columns.esm.js';
import { entitiesToDocsMapper } from './helpers.esm.js';

const DocsTableComponent = (props) => {
  const { entities, title, loading, columns, actions, options } = props;
  const [, copyToClipboard] = useCopyToClipboard();
  const getRouteToReaderPageFor = useRouteRef(rootDocsRouteRef);
  const config = useApi(configApiRef);
  const { t } = useTranslationRef(techdocsTranslationRef);
  if (!entities) return null;
  const documents = entitiesToDocsMapper(
    entities,
    getRouteToReaderPageFor,
    config
  );
  const defaultActions = [
    actionFactories.createCopyDocsUrlAction(copyToClipboard, t)
  ];
  const pageSize = 20;
  const paging = documents && documents.length > pageSize;
  return /* @__PURE__ */ jsx(Fragment, { children: loading || documents && documents.length > 0 ? /* @__PURE__ */ jsx(
    Table,
    {
      isLoading: loading,
      options: {
        paging,
        pageSize,
        search: true,
        actionsColumnIndex: -1,
        ...options
      },
      data: documents,
      columns: columns || defaultColumns,
      actions: actions || defaultActions,
      title: title ? `${title} (${documents.length})` : `${t("table.title.all")} (${documents.length})`,
      localization: {
        header: {
          actions: t("table.header.actions")
        },
        toolbar: {
          searchPlaceholder: t("table.toolbar.searchPlaceholder")
        },
        pagination: {
          labelRowsSelect: t("table.pagination.labelRowsSelect")
        },
        body: {
          emptyDataSourceMessage: t("table.body.emptyDataSourceMessage")
        }
      }
    }
  ) : /* @__PURE__ */ jsx(
    EmptyState,
    {
      missing: "data",
      title: t("table.emptyState.title"),
      description: t("table.emptyState.description"),
      action: /* @__PURE__ */ jsx(
        LinkButton,
        {
          color: "primary",
          to: "https://backstage.io/docs/features/techdocs/getting-started",
          variant: "contained",
          children: t("table.emptyState.docsButton")
        }
      )
    }
  ) });
};
const DocsTable = DocsTableComponent;
DocsTable.columns = columnFactories;
DocsTable.actions = actionFactories;

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