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

Frontend functionalities for the dai-release backstage plugin

import { Page, Header, Content, Link, LinkButton } from '@backstage/core-components';
import { makeStyles, Grid } from '@material-ui/core';
import React, { useState, useEffect } from 'react';
import { FilterComponent } from '../FilterComponent/FilterComponent.esm.js';
import { ModalComponent } from '../ModalComponent/ModalComponent.esm.js';
import { PlusIcon } from '../../icon/icon.esm.js';
import { ReleasePopOverComponent } from '../ReleasePopOverComponent/ReleasePopOverComponent.esm.js';
import { ReleaseResponseErrorPanel } from '../ReleaseResponseErrorPanel/ReleaseResponseErrorPanel.esm.js';
import { ScrollableTable } from '../DenseScrollableTable/ScrollableTable.esm.js';
import { SearchHeaderComponent } from '../SearchHeaderComponent/SearchHeaderComponent.esm.js';
import Typography from '@mui/material/Typography';
import capitalize from 'lodash/capitalize';
import releaseLogoWhite from '../../assets/releaseLogoWhite.png';
import '../../api/DaiReleaseApi.esm.js';
import '@backstage/errors';
import 'moment';
import '@backstage/core-plugin-api';
import 'react-use';
import { useTemplates } from '../../hooks/useTemplates.esm.js';

const useStyles = makeStyles(() => ({
  logoStyle: {
    width: "300px"
  },
  layoutSec: {
    paddingTop: "0"
  }
}));
const useEmptyStyles = makeStyles((theme) => ({
  empty: {
    padding: theme.spacing(2),
    display: "flex",
    justifyContent: "center"
  }
}));
const TemplateHomePageComponent = () => {
  const classes = useStyles();
  const emptyClasses = useEmptyStyles();
  const {
    loading,
    error,
    data,
    tags,
    hasMore,
    searchTitle,
    instance,
    instanceList,
    openModal,
    modalPopupInputId,
    modalTitle,
    modalPopupData,
    setTags,
    setPage,
    setSearchTitle,
    setInstance,
    setLoading,
    setHasMore,
    setData,
    setOpenModal,
    setModalPopupInputId,
    setModalTitle,
    setModalPopupData
  } = useTemplates();
  const loadMoreData = async () => {
    if (loading || !hasMore) return;
    setLoading(true);
    setPage((prevPage) => prevPage + 1);
  };
  const onClosePopupModal = () => {
    setOpenModal(false);
  };
  const [showDrawer, onShowDrawer] = useState(false);
  const [filterCount, setFilterCount] = useState(0);
  const resetState = () => {
    setData([]);
    setHasMore(true);
    setLoading(true);
  };
  useEffect(() => {
    const count = (tags.length > 0 ? tags.length : 0) + (searchTitle.length > 0 ? 1 : 0);
    setFilterCount(count);
  }, [tags, searchTitle]);
  const [customSearchQuery, setCustomSearchQuery] = useState("");
  const filteredData = customSearchQuery ? data.filter(
    (row) => ["title", "folder"].some(
      (key) => row[key]?.toString().toLowerCase().includes(customSearchQuery?.toLowerCase())
    )
  ) : data;
  const handleCustomSearchChange = (customSearchStr) => {
    setCustomSearchQuery(customSearchStr);
  };
  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
    Header,
    {
      title: /* @__PURE__ */ React.createElement(
        "img",
        {
          src: releaseLogoWhite,
          alt: "Release logo",
          className: classes.logoStyle
        }
      ),
      pageTitleOverride: "Digital.ai Release"
    }
  ), /* @__PURE__ */ React.createElement(Content, { className: classes.layoutSec }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 3, direction: "column" }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
    SearchHeaderComponent,
    {
      displayFilterIcon: true,
      displaySearchFilter: false,
      displayTableSearchFilter: true,
      searchTitleTextField: "Search by name",
      titleName: "Templates",
      searchTitle,
      instance,
      instanceList,
      error,
      filterCount,
      customSearch: customSearchQuery,
      onCustomSearch: handleCustomSearchChange,
      onSearchByTitle: setSearchTitle,
      onShowDrawer,
      onSetInstance: setInstance,
      resetState
    }
  ), /* @__PURE__ */ React.createElement(
    FilterComponent,
    {
      filterCount,
      showDrawer,
      onShowDrawer,
      tags,
      searchTitle,
      onSetTags: setTags,
      onSearchByTitle: setSearchTitle,
      resetState
    }
  ), error && !loading ? /* @__PURE__ */ React.createElement(ReleaseResponseErrorPanel, { error }) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
    ScrollableTable,
    {
      loading,
      loadMoreData,
      data: filteredData,
      emptyContent: /* @__PURE__ */ React.createElement(
        Typography,
        {
          color: "textSecondary",
          className: emptyClasses.empty
        },
        "No templates available"
      ),
      columns: [
        {
          label: "Name",
          headerStyle: {
            width: "calc(35% + 0px)",
            maxWidth: "calc(35% + 0px)",
            lineHeight: "14px",
            whiteSpace: "nowrap",
            boxSizing: "border-box",
            textTransform: "capitalize",
            padding: "8px 16px"
          },
          render: (row) => /* @__PURE__ */ React.createElement(Link, { to: row.titleRedirectUri }, row.title || "\xA0"),
          cellStyle: {
            width: "calc(35% + 0px)",
            minWidth: "calc(35% + 0px)",
            lineHeight: "14px",
            boxSizing: "border-box",
            whiteSpace: "normal",
            overflow: "hidden",
            textOverflow: "ellipsis"
          }
        },
        {
          label: "Folder",
          headerStyle: {
            width: "calc(20% + 0px)",
            lineHeight: "14px",
            whiteSpace: "nowrap",
            boxSizing: "border-box",
            textTransform: "capitalize",
            padding: "8px 16px"
          },
          render: (row) => capitalize(row.folder || "\xA0"),
          cellStyle: {
            width: "20vw",
            lineHeight: "14px",
            boxSizing: "border-box",
            whiteSpace: "normal"
          }
        },
        {
          label: "Action",
          headerStyle: {
            width: "calc(15% + 0px)",
            lineHeight: "14px",
            whiteSpace: "nowrap",
            boxSizing: "border-box",
            textTransform: "capitalize",
            padding: "8px 16px"
          },
          render: (row) => /* @__PURE__ */ React.createElement("div", { style: { width: "150px", height: "40px" } }, /* @__PURE__ */ React.createElement(
            LinkButton,
            {
              to: row.newReleaseRedirectUri,
              color: "default",
              variant: "outlined",
              style: {
                width: "150px",
                height: "40px",
                textTransform: "none"
              },
              startIcon: /* @__PURE__ */ React.createElement(PlusIcon, null)
            },
            "New Release"
          )),
          cellStyle: { width: "15vw", lineHeight: "14px" }
        },
        {
          label: "",
          headerStyle: {
            width: "calc(3% + 0px)",
            whiteSpace: "nowrap",
            lineHeight: "14px",
            boxSizing: "border-box",
            padding: "8px 16px"
          },
          render: (row) => /* @__PURE__ */ React.createElement(
            ReleasePopOverComponent,
            {
              folderId: row.folderId,
              modalTitle: row.title,
              setOpenModal,
              setFolderId: setModalPopupInputId,
              setModalTitle
            }
          ),
          cellStyle: {
            width: "3vw",
            whiteSpace: "nowrap",
            lineHeight: "14px"
          }
        }
      ]
    }
  ), openModal && /* @__PURE__ */ React.createElement(
    ModalComponent,
    {
      onClose: onClosePopupModal,
      instance,
      modalPopupInputId,
      modalTitle: `Meta information - ${modalTitle}`,
      openModal,
      modalPopupData,
      sourcePage: "template",
      setModalPopupData
    }
  ))))));
};

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