@terasky/backstage-plugin-devpod/dist/components/DevpodComponent/DevpodComponent.esm.js

Automatically launch Devpod workspaces for your Backstage services

import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useDevpod } from '../../hooks/useDevpod.esm.js';
import { InfoCard } from '@backstage/core-components';
import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.esm.js';
import { makeStyles, Select, MenuItem, Button, TextField, InputAdornment, IconButton } from '@material-ui/core';
import { DevpodIDE } from '../../types.esm.js';
import FileCopyIcon from '@material-ui/icons/FileCopy';

const isDevpodAvailable = (entity) => {
  const sourceAnnotation = entity.metadata?.annotations?.["backstage.io/source-location"] || "";
  return sourceAnnotation.startsWith("url:");
};
const useStyles = makeStyles((theme) => ({
  link: {
    textDecoration: "underline",
    "&:hover": {
      textDecoration: "none"
    }
  },
  select: {
    minWidth: 200,
    marginBottom: 16
  },
  commandField: {
    marginTop: theme.spacing(2),
    width: "100%"
  },
  copyButton: {
    padding: theme.spacing(0.5)
  }
}));
const DevpodComponent = () => {
  const { hasGitUrl, devpodUrl, selectedIde, setSelectedIde, componentName } = useDevpod();
  const styles = useStyles();
  const getDevpodCommand = () => {
    const hashParts = devpodUrl.split("#");
    const encodedGitUrl = hashParts[1]?.split("&")[0] || "";
    const gitUrl = decodeURIComponent(encodedGitUrl);
    const workspaceName = `${componentName}-${Math.random().toString(36).substring(2, 6)}`;
    return `devpod up --source git:${gitUrl} --ide ${selectedIde.toLowerCase()} ${workspaceName}`;
  };
  const handleCopy = () => {
    navigator.clipboard.writeText(getDevpodCommand());
  };
  return /* @__PURE__ */ jsx(InfoCard, { title: "Remote Development", children: hasGitUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
      Select,
      {
        className: styles.select,
        value: selectedIde,
        onChange: (e) => setSelectedIde(e.target.value),
        children: Object.entries(DevpodIDE).map(([key, value]) => /* @__PURE__ */ jsx(MenuItem, { value, children: key.toLowerCase().replace("_", " ") }, key))
      }
    ) }),
    /* @__PURE__ */ jsx("p", { children: "Your component can be opened in Devpod!" }),
    /* @__PURE__ */ jsxs(
      Button,
      {
        variant: "contained",
        color: "primary",
        href: devpodUrl,
        target: "_blank",
        rel: "noopener noreferrer",
        className: styles.link,
        children: [
          "Open With DevPod",
          /* @__PURE__ */ jsx(VisuallyHidden, { children: " (opens in Devpod)" })
        ]
      }
    ),
    /* @__PURE__ */ jsx(
      TextField,
      {
        label: "Command",
        className: styles.commandField,
        value: getDevpodCommand(),
        InputProps: {
          readOnly: true,
          endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
            IconButton,
            {
              "aria-label": "copy to clipboard",
              onClick: handleCopy,
              className: styles.copyButton,
              children: /* @__PURE__ */ jsx(FileCopyIcon, {})
            }
          ) })
        },
        variant: "outlined",
        fullWidth: true
      }
    )
  ] }) : /* @__PURE__ */ jsx("p", { children: "No Git source URL found for this component" }) });
};

export { DevpodComponent, isDevpodAvailable };
//# sourceMappingURL=DevpodComponent.esm.js.map