@nospt/backstage-plugin-apigee 1.1.1

package/dist/components/ApiDetailsDrawer.esm.js

@@ -0,0 +1,709 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Link } from '@backstage/core-components';
+import { useApi } from '@backstage/core-plugin-api';
+import { useRouteRef } from '@backstage/frontend-plugin-api';
+import { parseEntityRef } from '@backstage/catalog-model';
+import { catalogApiRef, entityRouteRef, EntityRefLink } from '@backstage/plugin-catalog-react';
+import { Text, ButtonIcon, Button, Tabs, TabList, Tab, TabPanel } from '@backstage/ui';
+import { RiCheckLine, RiShareLine, RiCloseLine, RiGithubFill, RiDownloadLine, RiFileCopyLine, RiExternalLinkLine, RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react';
+import { useState, useEffect, useMemo } from 'react';
+import { useLocation, useHref, useNavigate } from 'react-router-dom';
+import { LifecycleBadge } from './ApiCard.esm.js';
+import { BackstageIcon, ApigeeIcon } from './brandIcons.esm.js';
+import { toApiDetailViewModel, specFileName } from './apiDetailViewModel.esm.js';
+import { parseOperations } from './apiOperations.esm.js';
+import { generateSnippet, SNIPPET_LANGUAGES } from './codeSnippet.esm.js';
+import { HighlightedCode } from './codeHighlight.esm.js';
+import styles from './ApiDetailsDrawer.module.css.esm.js';
+
+function MetaRow({
+  label,
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: styles.metaRow, children: [
+    /* @__PURE__ */ jsx("dt", { className: styles.metaLabel, children: label }),
+    /* @__PURE__ */ jsx("dd", { className: styles.metaValue, children: children ?? value })
+  ] });
+}
+function OwnerValue({ vm }) {
+  if (vm.ownerRef) {
+    try {
+      parseEntityRef(vm.ownerRef, {
+        defaultKind: "group",
+        defaultNamespace: "default"
+      });
+      return /* @__PURE__ */ jsx(EntityRefLink, { entityRef: vm.ownerRef, defaultKind: "group" });
+    } catch {
+    }
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: vm.ownerLabel });
+}
+const METHOD_CLASS = {
+  GET: styles.methodGet,
+  POST: styles.methodPost,
+  PUT: styles.methodPut,
+  PATCH: styles.methodPatch,
+  DELETE: styles.methodDelete
+};
+function MethodBadge({ method }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: `${styles.methodBadge} ${METHOD_CLASS[method] ?? styles.methodOther}`,
+      children: method
+    }
+  );
+}
+function CopyButton({ text, label }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    ButtonIcon,
+    {
+      icon: copied ? /* @__PURE__ */ jsx(RiCheckLine, {}) : /* @__PURE__ */ jsx(RiFileCopyLine, {}),
+      variant: "tertiary",
+      onPress: handleCopy,
+      "aria-label": copied ? "Copied" : label
+    }
+  );
+}
+function ParamGroup({
+  title,
+  params
+}) {
+  if (params.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("section", { className: styles.operationSection, children: [
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        variant: "body-small",
+        weight: "bold",
+        as: "h4",
+        className: styles.operationSectionTitle,
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsx("ul", { className: styles.paramList, children: params.map((p) => /* @__PURE__ */ jsxs("li", { className: styles.paramItem, children: [
+      /* @__PURE__ */ jsx("span", { className: styles.paramName, children: p.name }),
+      p.required ? /* @__PURE__ */ jsx("span", { className: styles.paramRequired, children: "required" }) : null,
+      p.description ? /* @__PURE__ */ jsx("span", { className: styles.paramDescription, children: p.description }) : null
+    ] }, p.name)) })
+  ] });
+}
+function BodyBlock({ body }) {
+  const hasSchema = !!body.schema;
+  const hasExample = !!body.example;
+  const [view, setView] = useState();
+  const pick = (next) => setView((prev) => prev === next ? void 0 : next);
+  const text = view === "example" ? body.example : body.schema;
+  return /* @__PURE__ */ jsxs("div", { className: styles.bodyBlock, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.bodyBlockBar, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.bodyToggleGroup, children: [
+        hasExample ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `${styles.bodyToggle} ${view === "example" ? styles.bodyToggleActive : ""}`,
+            "aria-pressed": view === "example",
+            onClick: () => pick("example"),
+            children: "Example"
+          }
+        ) : null,
+        hasSchema ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `${styles.bodyToggle} ${view === "schema" ? styles.bodyToggleActive : ""}`,
+            "aria-pressed": view === "schema",
+            onClick: () => pick("schema"),
+            children: "Schema"
+          }
+        ) : null
+      ] }),
+      view && text ? /* @__PURE__ */ jsx(
+        CopyButton,
+        {
+          text,
+          label: view === "example" ? "Copy example" : "Copy schema"
+        }
+      ) : null
+    ] }),
+    view && text ? /* @__PURE__ */ jsx("pre", { className: styles.bodyCode, children: /* @__PURE__ */ jsx("code", { children: text }) }) : null
+  ] });
+}
+function CodeSnippetBlock({ op }) {
+  const [language, setLanguage] = useState("curl");
+  const snippet = useMemo(() => generateSnippet(op, language), [op, language]);
+  return /* @__PURE__ */ jsxs("div", { className: styles.snippetBlock, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.snippetHeaderRow, children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          variant: "body-small",
+          weight: "bold",
+          as: "h4",
+          className: styles.operationSectionTitle,
+          children: "Code snippet"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: styles.snippetActions, children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles.snippetLangGroup,
+            role: "group",
+            "aria-label": "Snippet language",
+            children: SNIPPET_LANGUAGES.map((lang) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `${styles.bodyToggle} ${language === lang.id ? styles.bodyToggleActive : ""}`,
+                "aria-pressed": language === lang.id,
+                onClick: () => setLanguage(lang.id),
+                children: lang.label
+              },
+              lang.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(CopyButton, { text: snippet, label: "Copy code snippet" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(HighlightedCode, { code: snippet })
+  ] });
+}
+function OperationDetail({ op }) {
+  const pathParams = op.parameters.filter((p) => p.in === "path");
+  const headerParams = op.parameters.filter((p) => p.in === "header");
+  const successResponses = op.responses.filter((r) => r.status.startsWith("2"));
+  const errorResponses = op.responses.filter((r) => !r.status.startsWith("2"));
+  const responseBody = successResponses.filter(
+    (r) => r.contentTypes.length > 0 || r.body
+  );
+  return /* @__PURE__ */ jsx("div", { className: styles.operationDetail, children: /* @__PURE__ */ jsxs("div", { className: styles.operationDetailColumns, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.operationDetailMain, children: [
+      /* @__PURE__ */ jsxs("dl", { className: styles.operationMeta, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.operationRow, children: [
+          /* @__PURE__ */ jsx("dt", { className: styles.operationLabel, children: "Operation ID" }),
+          /* @__PURE__ */ jsx("dd", { className: styles.operationValue, children: op.operationId ?? "\u2014" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.operationRow, children: [
+          /* @__PURE__ */ jsx("dt", { className: styles.operationLabel, children: "Path" }),
+          /* @__PURE__ */ jsx("dd", { className: styles.operationValue, children: /* @__PURE__ */ jsx("code", { className: styles.operationPath, children: op.path }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.operationRow, children: [
+          /* @__PURE__ */ jsx("dt", { className: styles.operationLabel, children: "Method" }),
+          /* @__PURE__ */ jsx("dd", { className: styles.operationValue, children: /* @__PURE__ */ jsx(MethodBadge, { method: op.method }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.operationRow, children: [
+          /* @__PURE__ */ jsx("dt", { className: styles.operationLabel, children: "Description" }),
+          /* @__PURE__ */ jsx("dd", { className: styles.operationValue, children: op.summary ?? "\u2014" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(ParamGroup, { title: "Path parameters", params: pathParams }),
+      /* @__PURE__ */ jsx(ParamGroup, { title: "Header parameters", params: headerParams }),
+      /* @__PURE__ */ jsxs("section", { className: styles.operationSection, children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            variant: "body-small",
+            weight: "bold",
+            as: "h4",
+            className: styles.operationSectionTitle,
+            children: "Request body"
+          }
+        ),
+        (() => {
+          if (op.requestBody && op.requestBody.contentTypes.length > 0) {
+            return /* @__PURE__ */ jsxs("div", { className: styles.contentTypes, children: [
+              op.requestBody.contentTypes.map((ct) => /* @__PURE__ */ jsx("span", { className: styles.contentTypeChip, children: ct }, ct)),
+              op.requestBody.required ? /* @__PURE__ */ jsx("span", { className: styles.paramRequired, children: "required" }) : null
+            ] });
+          }
+          if (op.requestBody?.body) {
+            return null;
+          }
+          return /* @__PURE__ */ jsx(Text, { variant: "body-small", color: "secondary", as: "p", children: "No request body." });
+        })(),
+        op.requestBody?.body ? /* @__PURE__ */ jsx(BodyBlock, { body: op.requestBody.body }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: styles.operationSection, children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            variant: "body-small",
+            weight: "bold",
+            as: "h4",
+            className: styles.operationSectionTitle,
+            children: "Response body"
+          }
+        ),
+        responseBody.length > 0 ? /* @__PURE__ */ jsx("ul", { className: styles.responseList, children: responseBody.map((r) => /* @__PURE__ */ jsxs("li", { className: styles.responseRow, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.responseStatus, children: r.status }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            r.contentTypes.length > 0 ? r.contentTypes.join(", ") : null,
+            r.body ? /* @__PURE__ */ jsx(BodyBlock, { body: r.body }) : null
+          ] })
+        ] }, r.status)) }) : /* @__PURE__ */ jsx(Text, { variant: "body-small", color: "secondary", as: "p", children: "No response body declared." })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: styles.operationSection, children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            variant: "body-small",
+            weight: "bold",
+            as: "h4",
+            className: styles.operationSectionTitle,
+            children: "Response errors"
+          }
+        ),
+        errorResponses.length > 0 ? /* @__PURE__ */ jsx("ul", { className: styles.responseList, children: errorResponses.map((r) => /* @__PURE__ */ jsxs("li", { className: styles.responseRow, children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${styles.responseStatus} ${styles.responseStatusError}`,
+              children: r.status
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: styles.responseMessage, children: r.description ?? "\u2014" })
+        ] }, r.status)) }) : /* @__PURE__ */ jsx(Text, { variant: "body-small", color: "secondary", as: "p", children: "No error responses declared." })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("aside", { className: styles.operationDetailSide, children: /* @__PURE__ */ jsx(CodeSnippetBlock, { op }) })
+  ] }) });
+}
+function OperationsPanel({ operations }) {
+  const [expanded, setExpanded] = useState(/* @__PURE__ */ new Set());
+  if (operations.length === 0) {
+    return /* @__PURE__ */ jsx(Text, { variant: "body-small", color: "secondary", as: "p", children: "No operations found in this specification." });
+  }
+  const toggle = (index) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+      return next;
+    });
+  };
+  return /* @__PURE__ */ jsx("ul", { className: styles.operationList, children: operations.map((item, index) => {
+    const isOpen = expanded.has(index);
+    return /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: styles.operationItem,
+          "aria-expanded": isOpen,
+          onClick: () => toggle(index),
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: styles.operationItemHead, children: [
+              /* @__PURE__ */ jsx(MethodBadge, { method: item.method }),
+              /* @__PURE__ */ jsx("code", { className: styles.operationPath, children: item.path }),
+              /* @__PURE__ */ jsx("span", { className: styles.operationChevron, children: isOpen ? /* @__PURE__ */ jsx(RiArrowDownSLine, { size: 16 }) : /* @__PURE__ */ jsx(RiArrowRightSLine, { size: 16 }) })
+            ] }),
+            item.summary ? /* @__PURE__ */ jsx("span", { className: styles.operationItemSummary, children: item.summary }) : null
+          ]
+        }
+      ),
+      isOpen ? /* @__PURE__ */ jsx(OperationDetail, { op: item }) : null
+    ] }, `${item.method} ${item.path} ${index}`);
+  }) });
+}
+function SpecSection({
+  definition,
+  fileBaseName,
+  definitionHref,
+  hasSpec
+}) {
+  const navigate = useNavigate();
+  const [copied, setCopied] = useState(false);
+  const [tab, setTab] = useState("operations");
+  const operations = useMemo(() => parseOperations(definition), [definition]);
+  const title = /* @__PURE__ */ jsx(
+    Text,
+    {
+      id: "apigee-spec-title",
+      variant: "title-x-small",
+      weight: "bold",
+      as: "h3",
+      className: styles.cardTitle,
+      children: "Specification"
+    }
+  );
+  if (!hasSpec || !definition.trim()) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: styles.cardHeaderRow, children: title }),
+      /* @__PURE__ */ jsx(Text, { variant: "body-small", color: "secondary", as: "p", children: "No specification available for preview." })
+    ] });
+  }
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(definition);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  const handleDownload = () => {
+    const blob = new Blob([definition], { type: "text/plain;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    try {
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = specFileName(fileBaseName, definition);
+      anchor.click();
+    } finally {
+      URL.revokeObjectURL(url);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.spec, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.cardHeaderRow, children: [
+      title,
+      /* @__PURE__ */ jsxs("div", { className: styles.specActions, children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            variant: "secondary",
+            iconStart: /* @__PURE__ */ jsx(RiDownloadLine, {}),
+            onPress: handleDownload,
+            children: "Download"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            variant: "secondary",
+            iconStart: /* @__PURE__ */ jsx(RiFileCopyLine, {}),
+            onPress: handleCopy,
+            children: copied ? "Copied!" : "Copy"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Tabs,
+      {
+        selectedKey: tab,
+        onSelectionChange: (key) => {
+          if (key === "openapi") {
+            if (definitionHref) navigate(definitionHref);
+            return;
+          }
+          setTab(String(key));
+        },
+        children: [
+          /* @__PURE__ */ jsxs(TabList, { "aria-label": "Specification format", className: styles.tabList, children: [
+            /* @__PURE__ */ jsx(Tab, { id: "operations", children: "Operations" }),
+            /* @__PURE__ */ jsx(Tab, { id: "raw", children: "Raw" }),
+            /* @__PURE__ */ jsx(Tab, { id: "openapi", isDisabled: !definitionHref, children: /* @__PURE__ */ jsxs("span", { className: styles.tabLabel, children: [
+              "OpenAPI ",
+              /* @__PURE__ */ jsx(RiExternalLinkLine, { "aria-hidden": true, size: 12 })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsx(TabPanel, { id: "operations", children: /* @__PURE__ */ jsx(OperationsPanel, { operations }) }),
+          /* @__PURE__ */ jsx(TabPanel, { id: "raw", children: /* @__PURE__ */ jsx("pre", { className: styles.code, children: /* @__PURE__ */ jsx("code", { children: definition }) }) })
+        ]
+      }
+    )
+  ] });
+}
+function ApiDetailsDrawerContent({
+  entity,
+  orgLabels,
+  onClose
+}) {
+  const catalogApi = useApi(catalogApiRef);
+  const entityRoute = useRouteRef(entityRouteRef);
+  const location = useLocation();
+  const shareHref = useHref({
+    pathname: location.pathname,
+    search: location.search,
+    hash: location.hash
+  });
+  const shareUrl = `${window.location.origin}${shareHref}`;
+  const [shareCopied, setShareCopied] = useState(false);
+  const handleShare = async () => {
+    try {
+      await navigator.clipboard.writeText(shareUrl);
+      setShareCopied(true);
+      setTimeout(() => setShareCopied(false), 2e3);
+    } catch {
+    }
+  };
+  const [component, setComponent] = useState();
+  const namespace = entity.metadata.namespace ?? "default";
+  const name = entity.metadata.name;
+  useEffect(() => {
+    let active = true;
+    catalogApi.getEntityByRef({ kind: "Component", namespace, name }).then((found) => {
+      if (active) {
+        setComponent(found ?? void 0);
+      }
+    }).catch(() => {
+      if (active) {
+        setComponent(void 0);
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, [catalogApi, namespace, name]);
+  const vm = useMemo(
+    () => toApiDetailViewModel(entity, component, orgLabels),
+    [entity, component, orgLabels]
+  );
+  const catalogHref = entityRoute ? entityRoute({
+    kind: vm.targetRef.kind.toLowerCase(),
+    namespace: vm.targetRef.namespace,
+    name: vm.targetRef.name
+  }) : void 0;
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    const id = requestAnimationFrame(() => setOpen(true));
+    return () => cancelAnimationFrame(id);
+  }, []);
+  useEffect(() => {
+    const onKey = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [onClose]);
+  const showDeployments = vm.deployments.environments.length > 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles.overlay,
+        "data-open": open,
+        onClick: onClose,
+        role: "presentation",
+        "aria-hidden": !open
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        className: styles.drawer,
+        "data-open": open,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": `${vm.name} API details`,
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: styles.header, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.headerText, children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  variant: "title-small",
+                  weight: "bold",
+                  as: "h2",
+                  className: styles.title,
+                  children: vm.name
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: styles.badges, children: [
+                vm.version ? /* @__PURE__ */ jsx("span", { className: `${styles.badge} ${styles.badgeVersion}`, children: vm.version }) : null,
+                /* @__PURE__ */ jsx(LifecycleBadge, { kind: vm.badge.kind, label: vm.badge.label })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: styles.headerActions, children: [
+              /* @__PURE__ */ jsx(
+                ButtonIcon,
+                {
+                  icon: shareCopied ? /* @__PURE__ */ jsx(RiCheckLine, {}) : /* @__PURE__ */ jsx(RiShareLine, {}),
+                  variant: "tertiary",
+                  onPress: handleShare,
+                  "aria-label": shareCopied ? "Link copied" : "Copy link to this API"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ButtonIcon,
+                {
+                  icon: /* @__PURE__ */ jsx(RiCloseLine, {}),
+                  variant: "tertiary",
+                  onPress: onClose,
+                  "aria-label": "Close"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles.body, children: [
+            /* @__PURE__ */ jsxs(
+              "section",
+              {
+                className: `${styles.card} ${styles.overviewCard}`,
+                "aria-labelledby": "apigee-overview-title",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      id: "apigee-overview-title",
+                      variant: "title-x-small",
+                      weight: "bold",
+                      as: "h3",
+                      className: styles.cardTitle,
+                      children: "Overview"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("dl", { className: styles.metaList, children: [
+                    /* @__PURE__ */ jsx(MetaRow, { label: "Title", value: vm.name }),
+                    vm.description ? /* @__PURE__ */ jsx(MetaRow, { label: "Description", value: vm.description }) : null,
+                    /* @__PURE__ */ jsx(MetaRow, { label: "Kind", value: vm.kind }),
+                    vm.type ? /* @__PURE__ */ jsx(MetaRow, { label: "Type", value: vm.type }) : null,
+                    vm.version ? /* @__PURE__ */ jsx(MetaRow, { label: "Version", value: vm.version }) : null,
+                    /* @__PURE__ */ jsx(MetaRow, { label: "Lifecycle", value: vm.badge.label }),
+                    /* @__PURE__ */ jsx(MetaRow, { label: "Owner", children: /* @__PURE__ */ jsx(OwnerValue, { vm }) }),
+                    vm.department ? /* @__PURE__ */ jsx(MetaRow, { label: "Department", value: vm.department }) : null,
+                    vm.tags.length > 0 ? /* @__PURE__ */ jsx(MetaRow, { label: "Tags", children: /* @__PURE__ */ jsx("div", { className: styles.tags, children: vm.tags.map((tag) => /* @__PURE__ */ jsx("span", { className: styles.tag, children: tag }, tag)) }) }) : null
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: styles.sideColumn, children: [
+              catalogHref || vm.sourceRepo || vm.apiHub ? /* @__PURE__ */ jsxs(
+                "section",
+                {
+                  className: `${styles.card} ${styles.linksCard}`,
+                  "aria-labelledby": "apigee-links-title",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        id: "apigee-links-title",
+                        variant: "title-x-small",
+                        weight: "bold",
+                        as: "h3",
+                        className: styles.cardTitle,
+                        children: "Links"
+                      }
+                    ),
+                    catalogHref ? /* @__PURE__ */ jsxs(Link, { to: catalogHref, className: styles.catalogLink, children: [
+                      /* @__PURE__ */ jsx(BackstageIcon, { size: 14 }),
+                      " View in catalog"
+                    ] }) : null,
+                    vm.sourceRepo ? /* @__PURE__ */ jsxs(Link, { to: vm.sourceRepo.url, className: styles.sourceRepo, children: [
+                      vm.sourceRepo.icon === "github" ? /* @__PURE__ */ jsx(RiGithubFill, { "aria-hidden": true, size: 14 }) : /* @__PURE__ */ jsx(ApigeeIcon, { size: 14 }),
+                      " ",
+                      vm.sourceRepo.title
+                    ] }) : null,
+                    vm.apiHub ? /* @__PURE__ */ jsxs(Link, { to: vm.apiHub.url, className: styles.apiHubLink, children: [
+                      vm.apiHub.icon === "apigee" ? /* @__PURE__ */ jsx(ApigeeIcon, { size: 14 }) : /* @__PURE__ */ jsx(RiGithubFill, { "aria-hidden": true, size: 14 }),
+                      " ",
+                      vm.apiHub.title
+                    ] }) : null
+                  ]
+                }
+              ) : null,
+              showDeployments ? /* @__PURE__ */ jsxs(
+                "section",
+                {
+                  className: `${styles.card} ${styles.deploymentsCard}`,
+                  "aria-labelledby": "apigee-deployments-title",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        id: "apigee-deployments-title",
+                        variant: "title-x-small",
+                        weight: "bold",
+                        as: "h3",
+                        className: styles.cardTitle,
+                        children: "Deployments"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: styles.deploymentsScroll, children: /* @__PURE__ */ jsxs("table", { className: styles.deploymentsTable, children: [
+                      /* @__PURE__ */ jsxs("thead", { children: [
+                        /* @__PURE__ */ jsxs("tr", { children: [
+                          /* @__PURE__ */ jsx(
+                            "th",
+                            {
+                              scope: "col",
+                              rowSpan: 2,
+                              className: styles.orgHeader,
+                              children: "Orgs"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "th",
+                            {
+                              scope: "colgroup",
+                              colSpan: vm.deployments.environments.length,
+                              children: "Revisions"
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsx("tr", { children: vm.deployments.environments.map((env) => /* @__PURE__ */ jsx("th", { scope: "col", children: env }, env)) })
+                      ] }),
+                      /* @__PURE__ */ jsx("tbody", { children: vm.deployments.rows.map((row) => /* @__PURE__ */ jsxs("tr", { children: [
+                        /* @__PURE__ */ jsx("th", { scope: "row", className: styles.orgCell, children: /* @__PURE__ */ jsx("span", { className: styles.orgBadge, children: row.label }) }),
+                        vm.deployments.environments.map((env) => /* @__PURE__ */ jsx("td", { children: row.revisions[env] ? /* @__PURE__ */ jsx("span", { className: styles.revisionBadge, children: row.revisions[env] }) : /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: styles.revisionEmpty,
+                            "aria-label": "Not deployed",
+                            children: "\u2014"
+                          }
+                        ) }, env))
+                      ] }, row.value)) })
+                    ] }) })
+                  ]
+                }
+              ) : null
+            ] }),
+            /* @__PURE__ */ jsx(
+              "section",
+              {
+                className: `${styles.card} ${styles.specCard}`,
+                "aria-labelledby": "apigee-spec-title",
+                children: /* @__PURE__ */ jsx(
+                  SpecSection,
+                  {
+                    definition: vm.definition,
+                    fileBaseName: vm.targetRef.name,
+                    definitionHref: catalogHref ? `${catalogHref}/definition` : void 0,
+                    hasSpec: vm.hasSpec
+                  }
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function ApiDetailsDrawer({
+  entity,
+  orgLabels,
+  onClose
+}) {
+  if (!entity) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    ApiDetailsDrawerContent,
+    {
+      entity,
+      orgLabels,
+      onClose
+    }
+  );
+}
+
+export { ApiDetailsDrawer };
+//# sourceMappingURL=ApiDetailsDrawer.esm.js.map