@veecode-platform/plugin-kong-service-manager/dist/components/RoutesList/TableComponent/TableComponent.esm.js

import Chip from '@material-ui/core/Chip';
import Typography from '@material-ui/core/Typography';
import React from 'react';
import { Table, Link } from '@backstage/core-components';
import { Tooltip, Fade, Box, IconButton } from '@material-ui/core';
import '@backstage/plugin-catalog-react';
import '@material-ui/lab';
import '../../../context/KongServiceManagerContext.esm.js';
import { useKongServiceManagerContext } from '../../../context/KongServiceManagerProvider.esm.js';
import '@material-ui/core/InputBase';
import '@material-ui/icons/Search';
import '../../shared/SearchBar/styles.esm.js';
import '../../shared/BoxComponent/styles.esm.js';
import 'react-router-dom';
import '@material-ui/icons/OpenInNew';
import '@material-ui/icons/RemoveRedEye';
import '@material-ui/icons/VisibilityOff';
import '@material-ui/icons/Close';
import '@material-ui/icons/Info';
import '@material-ui/icons/ArrowDropDown';
import '@material-ui/icons/ArrowDropUp';
import '@material-ui/icons/AccountCircle';
import '@material-ui/icons/Add';
import '@material-ui/icons/Remove';
import '@material-ui/icons/Undo';
import '../../shared/SelectComponent/Select.esm.js';
import { HtmlTooltip } from '../../shared/HtmlTooltip/HtmlTooltip.esm.js';
import '../../shared/ButtonComponent/styles.esm.js';
import '../../shared/LoadingComponent/styles.esm.js';
import '../../shared/MissingAnnotation/styles.esm.js';
import '../../shared/Fields/Fields.esm.js';
import '../../shared/SkeletonComponent/styles.esm.js';
import { MethodLabel } from '../../shared/MethodLabel/MethodLabel.esm.js';
import MoreIcon from '@material-ui/icons/More';
import DeleteIcon from '@material-ui/icons/Delete';
import Edit from '@material-ui/icons/Edit';
import { ConfirmDeleteDialog } from '../ConfirmDeleteDialog/ConfirmDeleteDialog.esm.js';
import { useTableComponentStyle, tableStyle } from './styles.esm.js';
import { kongUpdateRoutePermission, kongRouteDeletePermission } from '@veecode-platform/backstage-plugin-kong-service-manager-common';
import { usePermission } from '@backstage/plugin-permission-react';
import { transformPath } from '../../../utils/helpers/transformPath.esm.js';

const TableComponent = (props) => {
  const [showDialog, setShowDialog] = React.useState(false);
  const [routeId, setRouteId] = React.useState();
  const { removeRoute } = useKongServiceManagerContext();
  const { tooltipContent, label, tags, actions } = useTableComponentStyle();
  const { isLoading, dataProps, handleEditModal, refreshList } = props;
  const { loading: loadingUpdateRoutePermission, allowed: canUpdateRoute } = usePermission({
    permission: kongUpdateRoutePermission
  });
  const { loading: loadingDeleteRoutePermission, allowed: canDeleteRoute } = usePermission({
    permission: kongRouteDeletePermission
  });
  const handleOpenDialog = (routeIdParams) => {
    setRouteId(routeIdParams);
    setShowDialog(true);
  };
  const handleCloseDialog = () => {
    setShowDialog(false);
  };
  const generateData = (rowData) => {
    const data = [];
    if (rowData) {
      rowData.map((r) => {
        data.push({
          id: r.name,
          name: r.name,
          protocols: r.protocols,
          methods: r.methods,
          hosts: r.hosts,
          paths: r.paths,
          tags: r.tags
        });
      });
    }
    return data;
  };
  const handleRemoveRoute = async () => {
    if (!routeId) return;
    await removeRoute();
    refreshList();
    handleCloseDialog();
  };
  const columns = [
    {
      id: "name",
      title: "Name",
      field: "name",
      highlight: true,
      type: "string",
      align: "center",
      width: "1fr",
      render: (row) => /* @__PURE__ */ React.createElement(Tooltip, { title: row.id }, /* @__PURE__ */ React.createElement(Link, { to: row.id, className: label }, row.name))
    },
    {
      id: "protocols",
      title: "Protocols",
      highlight: true,
      render: (row) => /* @__PURE__ */ React.createElement(React.Fragment, null, row.protocols && row.protocols.length ? row.protocols.map((protocol) => /* @__PURE__ */ React.createElement(Typography, { variant: "body2", key: protocol }, protocol)) : " - "),
      align: "center",
      width: "1fr"
    },
    {
      id: "methods",
      title: "Methods",
      highlight: true,
      render: (row) => /* @__PURE__ */ React.createElement(React.Fragment, null, row.methods && row.methods.length > 0 ? row.methods.map((method) => /* @__PURE__ */ React.createElement(MethodLabel, { key: method, variant: method })) : " - "),
      align: "center",
      width: "1fr"
    },
    {
      id: "hosts",
      title: "Hosts",
      highlight: true,
      render: (row) => /* @__PURE__ */ React.createElement(React.Fragment, null, row.hosts && row.hosts.length > 0 ? row.hosts.map((host) => /* @__PURE__ */ React.createElement(Typography, { variant: "body2", key: host }, host)) : " - "),
      align: "center",
      width: "1fr"
    },
    {
      id: "paths",
      title: "Paths",
      highlight: true,
      render: (row) => /* @__PURE__ */ React.createElement(React.Fragment, null, row.paths && row.paths.length > 0 ? row.paths.map((path) => /* @__PURE__ */ React.createElement(Typography, { variant: "body2", key: path }, transformPath(path))) : " - "),
      align: "center",
      width: "1fr"
    },
    {
      id: "tags",
      title: "Tags",
      highlight: true,
      render: (row) => /* @__PURE__ */ React.createElement(
        HtmlTooltip,
        {
          arrow: true,
          placement: "bottom",
          TransitionComponent: Fade,
          TransitionProps: { timeout: 600 },
          title: /* @__PURE__ */ React.createElement(Box, { className: tooltipContent }, row.tags && row.tags.length > 0 ? row.tags.map((tag) => /* @__PURE__ */ React.createElement(Chip, { key: tag, label: tag })) : /* @__PURE__ */ React.createElement(Typography, { variant: "caption", color: "textPrimary" }, "No Tags ..."))
        },
        /* @__PURE__ */ React.createElement("div", { className: tags }, /* @__PURE__ */ React.createElement(MoreIcon, null))
      ),
      align: "center",
      width: "1fr"
    },
    {
      id: "actions",
      title: "Actions",
      highlight: true,
      render: (row) => /* @__PURE__ */ React.createElement("div", { className: actions }, !loadingUpdateRoutePermission && /* @__PURE__ */ React.createElement(
        IconButton,
        {
          "aria-label": "Edit",
          title: "Edit Route",
          onClick: () => handleEditModal?.(row),
          disabled: !canUpdateRoute
        },
        /* @__PURE__ */ React.createElement(Edit, null)
      ), !loadingDeleteRoutePermission && /* @__PURE__ */ React.createElement(
        IconButton,
        {
          "aria-label": "Delete",
          title: "Delete Route",
          onClick: () => handleOpenDialog(row.id),
          disabled: !canDeleteRoute
        },
        /* @__PURE__ */ React.createElement(DeleteIcon, null)
      )),
      align: "center",
      width: "1fr"
    }
  ];
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
    Table,
    {
      isLoading,
      options: {
        paging: true,
        padding: "dense",
        minBodyHeight: "55vh",
        paginationType: "stepped",
        paginationPosition: "bottom",
        pageSize: 10,
        pageSizeOptions: [5, 10, 20, 50]
      },
      data: generateData(dataProps),
      columns,
      title: "",
      style: tableStyle
    }
  ), /* @__PURE__ */ React.createElement(ConfirmDeleteDialog, { show: showDialog, handleClose: handleCloseDialog, handleSubmit: handleRemoveRoute }));
};

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