@veecode-platform/plugin-kong-service-manager/dist/components/PluginsList/PluginsCards/CardComponent/CardComponent.esm.js

import React from 'react';
import { Card, CardHeader, Typography, IconButton, CardMedia, CardContent, CardActions, Button, CircularProgress } from '@material-ui/core';
import Edit from '@material-ui/icons/Edit';
import { usePluginsCardsStyles } from '../styles.esm.js';
import '../../../../context/KongServiceManagerContext.esm.js';
import { useKongServiceManagerContext } from '../../../../context/KongServiceManagerProvider.esm.js';
import { usePermission } from '@backstage/plugin-permission-react';
import { kongApplyPluginToServicePermission, kongUpdateServicePluginPermission, kongDisableServicePluginPermission } from '@veecode-platform/backstage-plugin-kong-service-manager-common';
import { PluginImage } from '@veecode-platform/plugin-kong-service-manager-react';

const CardComponent = (props) => {
  const [processingData, setProcessingData] = React.useState(false);
  const {
    handleToggleDrawer,
    setPluginState,
    disablePlugin,
    isRoute,
    disabledPluginFromRoute
  } = useKongServiceManagerContext();
  const {
    card,
    cardHeader,
    cardTitle,
    disabledTitle,
    cardIcon,
    disabledImg,
    description,
    button,
    spinner
  } = usePluginsCardsStyles();
  const { data, allowed } = props;
  const { loading: loadingApplyPluginPermission, allowed: canApplyPlugin } = usePermission({
    permission: kongApplyPluginToServicePermission
  });
  const { loading: loadingUpdatePluginPermission, allowed: canUpdatePlugin } = usePermission({
    permission: kongUpdateServicePluginPermission
  });
  const { loading: loadingDeletePluginPermission, allowed: canDeletePlugin } = usePermission({
    permission: kongDisableServicePluginPermission
  });
  const handlePluginEnable = async () => {
    if (data) {
      setPluginState(data);
      handleToggleDrawer();
      return;
    }
  };
  const handlePluginRemove = async () => {
    if (data.id) {
      setProcessingData(true);
      const id = data.id;
      if (isRoute) await disabledPluginFromRoute(id);
      else await disablePlugin(id);
      setProcessingData(false);
    }
  };
  const handleEditAction = () => {
    setPluginState(data);
    handleToggleDrawer();
    return;
  };
  return /* @__PURE__ */ React.createElement(Card, { key: data.name, className: card }, /* @__PURE__ */ React.createElement(
    CardHeader,
    {
      className: cardHeader,
      action: /* @__PURE__ */ React.createElement(React.Fragment, null, data.associated ? /* @__PURE__ */ React.createElement(React.Fragment, null, !loadingUpdatePluginPermission && /* @__PURE__ */ React.createElement(
        IconButton,
        {
          "aria-label": "settings",
          title: "Edit Plugin",
          disabled: !canUpdatePlugin || !allowed,
          onClick: handleEditAction
        },
        /* @__PURE__ */ React.createElement(Edit, null)
      )) : /* @__PURE__ */ React.createElement(React.Fragment, null)),
      title: /* @__PURE__ */ React.createElement(
        Typography,
        {
          variant: "h6",
          className: `${cardTitle} ${!allowed ? disabledTitle : ""}`
        },
        data.name
      )
    }
  ), /* @__PURE__ */ React.createElement(CardMedia, null, /* @__PURE__ */ React.createElement(
    PluginImage,
    {
      pluginSlug: data.slug,
      alt: "picture",
      className: `${cardIcon} ${!allowed ? disabledImg : ""}`
    }
  )), /* @__PURE__ */ React.createElement(CardContent, { className: description }, data.description), /* @__PURE__ */ React.createElement(CardActions, null, /* @__PURE__ */ React.createElement(React.Fragment, null, data.associated ? /* @__PURE__ */ React.createElement(React.Fragment, null, !loadingDeletePluginPermission && /* @__PURE__ */ React.createElement(
    Button,
    {
      color: "primary",
      variant: "contained",
      className: button,
      onClick: handlePluginRemove,
      disabled: processingData || !canDeletePlugin || !allowed
    },
    processingData ? /* @__PURE__ */ React.createElement(React.Fragment, null, "Disabling...", /* @__PURE__ */ React.createElement(CircularProgress, { className: spinner, size: 20 })) : /* @__PURE__ */ React.createElement(React.Fragment, null, "Disable")
  )) : /* @__PURE__ */ React.createElement(React.Fragment, null, !loadingApplyPluginPermission && /* @__PURE__ */ React.createElement(
    Button,
    {
      color: "primary",
      variant: "outlined",
      className: button,
      onClick: handlePluginEnable,
      disabled: !canApplyPlugin || !allowed
    },
    "Enable"
  )))));
};

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