@roadiehq/backstage-plugin-argo-cd/dist/components/DetailsDrawer.esm.js

import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
import { makeStyles, Button, Drawer, Grid, Typography, IconButton } from '@material-ui/core';
import { useState, Fragment } from 'react';
import { StructuredMetadataTable } from '@backstage/core-components';
import OpenInNewIcon from '@material-ui/icons/OpenInNew';
import CloseIcon from '@material-ui/icons/Close';
import MaterialButton from '@material-ui/core/Button';
import { useApi, configApiRef } from '@backstage/core-plugin-api';

const useStyles = makeStyles({
  paper: {
    padding: "2em"
  },
  header: {
    display: "flex",
    flexDirection: "row",
    paddingBottom: "2em"
  },
  button: {
    textTransform: "none",
    justifyContent: "flex-start",
    fontWeight: "bold"
  },
  icon: {
    fontSize: 20
  },
  content: {
    height: "80%"
  }
});
const DetailsDrawerComponent = (rowData, baseUrl) => {
  const classes = useStyles();
  const [state, setState] = useState(false);
  const configApi = useApi(configApiRef);
  const namespaced = configApi.getOptionalBoolean("argocd.namespacedApps") ?? false;
  const toggleDrawer = (open) => (event) => {
    if (event.type === "keydown" && (event.key === "Tab" || event.key === "Shift")) {
      return;
    }
    setState(open);
  };
  const tableContent = {
    "Argo CD Instance": rowData.metadata?.instance?.name ?? "",
    repoUrl: rowData.spec?.source?.repoURL || rowData.spec?.sources?.[0]?.repoURL,
    repoPath: rowData.spec?.source?.path || rowData.spec?.sources?.[0]?.path,
    destinationServer: rowData.spec?.destination?.server || rowData.spec?.destination?.name,
    destinationNamespace: rowData.spec?.destination?.namespace,
    syncStatus: rowData.status?.sync?.status,
    images: rowData.status?.summary?.images,
    ...baseUrl && {
      link: /* @__PURE__ */ jsx(
        MaterialButton,
        {
          variant: "outlined",
          color: "primary",
          size: "small",
          title: "Open Argo CD Dashboard",
          endIcon: /* @__PURE__ */ jsx(OpenInNewIcon, {}),
          target: "_blank",
          href: `${baseUrl}/applications/${namespaced ? `${rowData.metadata.namespace}/${rowData.metadata.name}` : rowData.metadata.name}`,
          children: "Open Argo CD Dashboard"
        }
      )
    }
  };
  const drawerContents = () => /* @__PURE__ */ jsxs(Fragment$1, { children: [
    /* @__PURE__ */ jsxs("div", { className: classes.header, children: [
      /* @__PURE__ */ jsx(
        Grid,
        {
          container: true,
          direction: "column",
          justifyContent: "flex-start",
          alignItems: "flex-start",
          children: /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(Typography, { variant: "h5", children: [
            "Argo Name: ",
            rowData.metadata.name
          ] }) })
        }
      ),
      /* @__PURE__ */ jsx(
        IconButton,
        {
          title: "Close the drawer",
          onClick: () => setState(false),
          color: "inherit",
          children: /* @__PURE__ */ jsx(CloseIcon, {})
        },
        "dismiss"
      )
    ] }),
    /* @__PURE__ */ jsx("div", { className: classes.content, children: /* @__PURE__ */ jsx(StructuredMetadataTable, { metadata: tableContent }) })
  ] });
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      Button,
      {
        title: rowData.metadata.name,
        className: classes.button,
        onClick: toggleDrawer(true),
        children: rowData.metadata.name
      }
    ),
    /* @__PURE__ */ jsx(
      Drawer,
      {
        anchor: "right",
        classes: { paper: classes.paper },
        open: state,
        onClose: toggleDrawer(false),
        children: drawerContents()
      }
    )
  ] });
};

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