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

Automatically launch Devpod workspaces for your Backstage services

import React from 'react';
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__ */ React.createElement(InfoCard, { title: "Remote Development" }, hasGitUrl ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
    Select,
    {
      className: styles.select,
      value: selectedIde,
      onChange: (e) => setSelectedIde(e.target.value)
    },
    Object.entries(DevpodIDE).map(([key, value]) => /* @__PURE__ */ React.createElement(MenuItem, { key, value }, key.toLowerCase().replace("_", " ")))
  )), /* @__PURE__ */ React.createElement("p", null, "Your component can be opened in Devpod!"), /* @__PURE__ */ React.createElement(
    Button,
    {
      variant: "contained",
      color: "primary",
      href: devpodUrl,
      target: "_blank",
      rel: "noopener noreferrer",
      className: styles.link
    },
    "Open With DevPod",
    /* @__PURE__ */ React.createElement(VisuallyHidden, null, " (opens in Devpod)")
  ), /* @__PURE__ */ React.createElement(
    TextField,
    {
      label: "Command",
      className: styles.commandField,
      value: getDevpodCommand(),
      InputProps: {
        readOnly: true,
        endAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React.createElement(
          IconButton,
          {
            "aria-label": "copy to clipboard",
            onClick: handleCopy,
            className: styles.copyButton
          },
          /* @__PURE__ */ React.createElement(FileCopyIcon, null)
        ))
      },
      variant: "outlined",
      fullWidth: true
    }
  )) : /* @__PURE__ */ React.createElement("p", null, "No Git source URL found for this component"));
};

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