@digital-ai/plugin-dai-release/dist/components/DenseTable/DenseTable.esm.js

Frontend functionalities for the dai-release backstage plugin

import { Table, Link } from '@backstage/core-components';
import React from 'react';
import { ReleasePopOverComponent } from '../ReleasePopOverComponent/ReleasePopOverComponent.esm.js';
import Typography from '@mui/material/Typography';
import capitalize from 'lodash/capitalize';
import { formatTimestamp } from '../../utils/dateTimeUtils.esm.js';
import { makeStyles } from '@material-ui/core';

const headerStyle = {
  textTransform: "capitalize",
  whiteSpace: "nowrap"
};
const cellStyle = { width: "auto", whiteSpace: "nowrap" };
const useStyles = makeStyles((theme) => ({
  empty: {
    padding: theme.spacing(2),
    display: "flex",
    justifyContent: "center"
  }
}));
const columnFactories = Object.freeze({
  createTitleColumns() {
    return {
      title: "Title",
      field: "title",
      cellStyle: { width: "180px", display: "block", lineHeight: "18px" },
      headerStyle,
      render: (row) => /* @__PURE__ */ React.createElement(Link, { to: row.releaseRedirectUri }, row.title),
      searchable: true,
      sorting: false
    };
  },
  createFolderColumns() {
    return {
      title: "Folder",
      field: "folder",
      cellStyle,
      headerStyle,
      render: (row) => capitalize(row.folder),
      searchable: true,
      sorting: false
    };
  },
  createStatusColumns() {
    return {
      title: "Status",
      field: "status",
      cellStyle,
      headerStyle,
      render: (row) => capitalize(row.status.replace("_", " ")),
      searchable: true,
      sorting: false
    };
  },
  createFromDateColumns() {
    return {
      title: "Start Date",
      field: "startDate",
      cellStyle,
      headerStyle,
      render: (row) => formatTimestamp(row.fromDate),
      searchable: true,
      sorting: false
    };
  },
  createEndDateColumns() {
    return {
      title: "End Date",
      field: "endDate",
      cellStyle,
      headerStyle,
      render: (row) => formatTimestamp(row.endDate),
      searchable: true,
      sorting: false
    };
  },
  createAdditionalDataColumns(setOpenModal, setModalPopupInputId, setModalTitle) {
    return {
      title: "",
      field: "",
      cellStyle,
      headerStyle,
      render: (_row) => /* @__PURE__ */ React.createElement(
        ReleasePopOverComponent,
        {
          folderId: _row.folderId,
          modalTitle: _row.title,
          setOpenModal,
          setFolderId: setModalPopupInputId,
          setModalTitle
        }
      ),
      searchable: false,
      sorting: false
    };
  }
});
const defaultColumns = (setOpenModal, setModalPopupInputId, setModalTitle) => [
  columnFactories.createTitleColumns(),
  columnFactories.createFolderColumns(),
  columnFactories.createStatusColumns(),
  columnFactories.createFromDateColumns(),
  columnFactories.createAdditionalDataColumns(
    setOpenModal,
    setModalPopupInputId,
    setModalTitle
  )
];
const DenseTable = ({
  tableData,
  loading,
  page,
  pageSize,
  totalCount,
  columns,
  onPageChange,
  onRowsPerPageChange
}) => {
  const classes = useStyles();
  return /* @__PURE__ */ React.createElement(
    Table,
    {
      columns,
      data: tableData,
      page,
      totalCount,
      isLoading: loading,
      options: {
        paging: true,
        search: true,
        showTitle: false,
        pageSize,
        pageSizeOptions: [5, 10, 20, 50],
        padding: "dense",
        showFirstLastPageButtons: true,
        showEmptyDataSourceMessage: !loading,
        toolbar: false
      },
      onPageChange,
      onRowsPerPageChange,
      style: { minWidth: "950px", width: "100%" },
      emptyContent: /* @__PURE__ */ React.createElement(Typography, { color: "textSecondary", className: classes.empty }, "No releases available")
    }
  );
};

export { DenseTable, columnFactories, defaultColumns };
//# sourceMappingURL=DenseTable.esm.js.map