@massdriver/backstage-plugin 1.0.0

package/dist/features/environment/GraphHeader/GraphHeader.esm.js

@@ -0,0 +1,247 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useApi } from '@backstage/frontend-plugin-api';
+import { useNavigate } from 'react-router-dom';
+import { parseEnvironmentId, projectUrl } from '@massdriver/backstage-plugin-common';
+import Box from '@massdriver/ui/Box';
+import Typography from '@massdriver/ui/Typography';
+import IconButton from '@massdriver/ui/IconButton';
+import Tooltip from '@massdriver/ui/Tooltip';
+import Divider from '@massdriver/ui/Divider';
+import { MenuItem } from '@massdriver/ui/Menu';
+import stylin from '@massdriver/ui/stylin';
+import ChevronLeftIcon from '@massdriver/ui/icons/ChevronLeftIcon';
+import AddIcon from '@massdriver/ui/icons/AddIcon';
+import { massdriverApiRef } from '../../../api.esm.js';
+import { ForkPill } from '../../../components/ForkPill.esm.js';
+import { RouterLinkAdapter } from '../../../components/RouterLinkAdapter.esm.js';
+import { internalRoutes } from '../../../internalRoutes.esm.js';
+import { useLiveRelayQuery } from '../realtime/useLiveRelayQuery.esm.js';
+import { Switcher } from './Switcher.esm.js';
+import { EnvironmentDefaults } from './EnvironmentDefaults.esm.js';
+import { HeaderActions } from './HeaderActions.esm.js';
+import { HEADER_PROJECTS_QUERY, HEADER_ENVIRONMENTS_QUERY } from './queries.esm.js';
+
+const GraphHeader = ({
+  projectId,
+  environmentId
+}) => {
+  const api = useApi(massdriverApiRef);
+  const navigate = useNavigate();
+  const projectsQuery = useLiveRelayQuery(
+    HEADER_PROJECTS_QUERY,
+    {}
+  );
+  const environmentsQuery = useLiveRelayQuery(
+    HEADER_ENVIRONMENTS_QUERY,
+    { filter: { projectId: { eq: projectId } } }
+  );
+  const headerPending = projectsQuery.loading || environmentsQuery.loading || Boolean(projectsQuery.error ?? environmentsQuery.error);
+  const projects = (projectsQuery.value?.projects?.items ?? []).filter(
+    Boolean
+  );
+  const environments = (environmentsQuery.value?.environments?.items ?? []).filter(Boolean);
+  const project = projects.find((item) => item.id === projectId) ?? null;
+  const environment = environments.find((item) => item.id === environmentId) ?? null;
+  const projectName = project?.name ?? (headerPending ? projectId : "\u2014");
+  const environmentFallback = headerPending ? parseEnvironmentId(environmentId).scopedEnvironmentId : "\u2014";
+  const createEnvironmentUrl = `${projectUrl(
+    api.appUrl,
+    api.organizationId,
+    projectId
+  )}/environments?createEnvironment=true`;
+  const handleProjectChange = async (selectedProjectId) => {
+    if (selectedProjectId === projectId) return;
+    try {
+      const data = await api.query(HEADER_ENVIRONMENTS_QUERY, {
+        filter: { projectId: { eq: selectedProjectId } }
+      });
+      const envs = (data.environments?.items ?? []).filter(
+        Boolean
+      );
+      navigate(
+        envs.length > 0 ? internalRoutes.environment(selectedProjectId, envs[0].id) : internalRoutes.projectTab(selectedProjectId, "overview")
+      );
+    } catch {
+      navigate(internalRoutes.projectTab(selectedProjectId, "overview"));
+    }
+  };
+  return /* @__PURE__ */ jsxs(HeaderRoot, { children: [
+    /* @__PURE__ */ jsxs(LeftZone, { children: [
+      /* @__PURE__ */ jsx(Tooltip, { title: "Back to project", arrow: true, enterDelay: 600, children: /* @__PURE__ */ jsx(
+        BackButton,
+        {
+          size: "small",
+          component: RouterLinkAdapter,
+          href: internalRoutes.project(projectId),
+          "aria-label": "Back to project",
+          children: /* @__PURE__ */ jsx(ChevronLeftIcon, { fontSize: "small" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        Switcher,
+        {
+          ariaLabel: "Switch project",
+          trigger: /* @__PURE__ */ jsx(TriggerLabel, { variant: "body2", color: "text.secondary", children: projectName }),
+          children: (close) => projects.map((item) => /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              selected: item.id === projectId,
+              onClick: () => {
+                close();
+                handleProjectChange(item.id);
+              },
+              children: item.name
+            },
+            item.id
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsx(Separator, { children: "/" }),
+      /* @__PURE__ */ jsx(
+        Switcher,
+        {
+          ariaLabel: "Switch environment",
+          trigger: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(TriggerLabel, { variant: "body2", children: environment ? environment.name : environmentFallback }),
+            environment ? /* @__PURE__ */ jsx(
+              ForkPill,
+              {
+                parent: environment.parent,
+                createdAt: environment.createdAt
+              }
+            ) : null
+          ] }),
+          children: (close) => [
+            /* @__PURE__ */ jsxs(
+              CreateMenuItem,
+              {
+                onClick: () => {
+                  close();
+                  window.open(createEnvironmentUrl, "_blank", "noopener");
+                },
+                children: [
+                  /* @__PURE__ */ jsx(AddIcon, { fontSize: "small" }),
+                  /* @__PURE__ */ jsx("span", { children: "Create new environment" })
+                ]
+              },
+              "__create__"
+            ),
+            /* @__PURE__ */ jsx(Divider, {}, "__divider__"),
+            ...environments.map((item) => /* @__PURE__ */ jsxs(
+              EnvironmentMenuItem,
+              {
+                selected: item.id === environmentId,
+                title: item.name,
+                onClick: () => {
+                  close();
+                  navigate(internalRoutes.environment(projectId, item.id));
+                },
+                children: [
+                  /* @__PURE__ */ jsx(EnvironmentMenuLabel, { children: item.name }),
+                  /* @__PURE__ */ jsx(ForkPill, { parent: item.parent, createdAt: item.createdAt })
+                ]
+              },
+              item.id
+            ))
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(CenterZone, { children: environment ? /* @__PURE__ */ jsx(EnvironmentDefaults, { environmentId: environment.id }) : null }),
+    /* @__PURE__ */ jsx(RightZone, { children: /* @__PURE__ */ jsx(
+      HeaderActions,
+      {
+        appUrl: api.appUrl,
+        organizationId: api.organizationId,
+        environment,
+        environments,
+        projectName: project?.name
+      }
+    ) })
+  ] });
+};
+const HeaderRoot = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  height: theme.spacing(6),
+  paddingLeft: theme.spacing(1),
+  paddingRight: theme.spacing(1.5),
+  gap: theme.spacing(1),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  backgroundColor: theme.palette.background.paper,
+  flexShrink: 0,
+  [theme.breakpoints.down("sm")]: {
+    overflowX: "auto",
+    overflowY: "hidden",
+    scrollbarWidth: "none",
+    "&::-webkit-scrollbar": { display: "none" }
+  }
+}));
+const LeftZone = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  minWidth: 0,
+  flexShrink: 1,
+  [theme.breakpoints.down("sm")]: {
+    flexShrink: 0
+  }
+}));
+const CenterZone = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flex: 1,
+  minWidth: 0,
+  [theme.breakpoints.down("sm")]: {
+    flex: "none"
+  }
+}));
+const RightZone = stylin(Box)({
+  display: "flex",
+  alignItems: "center",
+  flexShrink: 0
+});
+const BackButton = stylin(IconButton)(({ theme }) => ({
+  color: theme.palette.text.secondary
+}));
+const TriggerLabel = stylin(Typography)(({ theme }) => ({
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  maxWidth: theme.spacing(25),
+  lineHeight: 1.4,
+  [theme.breakpoints.down("md")]: {
+    maxWidth: theme.spacing(15)
+  }
+}));
+const Separator = stylin(Typography)(({ theme }) => ({
+  color: theme.palette.text.disabled,
+  fontSize: theme.typography.body2.fontSize,
+  lineHeight: 1,
+  userSelect: "none"
+}));
+const CreateMenuItem = stylin(MenuItem)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  color: theme.palette.primary.main,
+  fontWeight: theme.typography.fontWeightMedium,
+  "& > svg": { fontSize: 18 }
+}));
+const EnvironmentMenuItem = stylin(MenuItem)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1)
+}));
+const EnvironmentMenuLabel = stylin("span")({
+  flex: 1,
+  minWidth: 0,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+});
+
+export { GraphHeader };
+//# sourceMappingURL=GraphHeader.esm.js.map

package/dist/features/environment/GraphHeader/GraphHeader.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphHeader.esm.js","sources":["../../../../src/features/environment/GraphHeader/GraphHeader.tsx"],"sourcesContent":["import { useApi } from '@backstage/frontend-plugin-api';\nimport { useNavigate } from 'react-router-dom';\nimport {\n  parseEnvironmentId,\n  projectUrl,\n} from '@massdriver/backstage-plugin-common';\nimport Box from '@massdriver/ui/Box';\nimport Typography from '@massdriver/ui/Typography';\nimport IconButton from '@massdriver/ui/IconButton';\nimport Tooltip from '@massdriver/ui/Tooltip';\nimport Divider from '@massdriver/ui/Divider';\nimport { MenuItem } from '@massdriver/ui/Menu';\nimport stylin from '@massdriver/ui/stylin';\nimport ChevronLeftIcon from '@massdriver/ui/icons/ChevronLeftIcon';\nimport AddIcon from '@massdriver/ui/icons/AddIcon';\nimport { massdriverApiRef } from '../../../api';\nimport { ForkPill } from '../../../components/ForkPill';\nimport { RouterLinkAdapter } from '../../../components/RouterLinkAdapter';\nimport { internalRoutes } from '../../../internalRoutes';\nimport { useLiveRelayQuery } from '../realtime/useLiveRelayQuery';\nimport Switcher from './Switcher';\nimport EnvironmentDefaults from './EnvironmentDefaults';\nimport HeaderActions from './HeaderActions';\nimport {\n  HEADER_ENVIRONMENTS_QUERY,\n  HEADER_PROJECTS_QUERY,\n  type HeaderEnvironment,\n  type HeaderEnvironmentsResult,\n  type HeaderProject,\n  type HeaderProjectsResult,\n} from './queries';\n\n/**\n * Read-only environment graph header: back-to-project link, project + env\n * switchers, centered environment defaults, and right-hand actions. Ports the\n * web app's `GraphHeader` layout without any mutation surface.\n */\nexport const GraphHeader = ({\n  projectId,\n  environmentId,\n}: {\n  projectId: string;\n  environmentId: string;\n}) => {\n  const api = useApi(massdriverApiRef);\n  const navigate = useNavigate();\n\n  // Live queries: a project/environment created or renamed in the web app\n  // shows up in the switchers on the next realtime event.\n  const projectsQuery = useLiveRelayQuery<HeaderProjectsResult>(\n    HEADER_PROJECTS_QUERY,\n    {},\n  );\n  const environmentsQuery = useLiveRelayQuery<HeaderEnvironmentsResult>(\n    HEADER_ENVIRONMENTS_QUERY,\n    { filter: { projectId: { eq: projectId } } },\n  );\n  const headerPending =\n    projectsQuery.loading ||\n    environmentsQuery.loading ||\n    Boolean(projectsQuery.error ?? environmentsQuery.error);\n\n  const projects = (projectsQuery.value?.projects?.items ?? []).filter(\n    Boolean,\n  ) as HeaderProject[];\n  const environments = (\n    environmentsQuery.value?.environments?.items ?? []\n  ).filter(Boolean) as HeaderEnvironment[];\n  const project = projects.find(item => item.id === projectId) ?? null;\n  const environment =\n    environments.find(item => item.id === environmentId) ?? null;\n\n  // While loading (or if the header queries fail) fall back to the route ids —\n  // never pretend an existing project/environment is missing.\n  const projectName = project?.name ?? (headerPending ? projectId : '—');\n  const environmentFallback = headerPending\n    ? parseEnvironmentId(environmentId).scopedEnvironmentId\n    : '—';\n  const createEnvironmentUrl = `${projectUrl(\n    api.appUrl,\n    api.organizationId,\n    projectId,\n  )}/environments?createEnvironment=true`;\n\n  // Switching project navigates to that project's first environment graph, or\n  // its overview if it has no environments (mirrors the web app).\n  const handleProjectChange = async (selectedProjectId: string) => {\n    if (selectedProjectId === projectId) return;\n    try {\n      const data = (await api.query(HEADER_ENVIRONMENTS_QUERY, {\n        filter: { projectId: { eq: selectedProjectId } },\n      })) as HeaderEnvironmentsResult;\n      const envs = (data.environments?.items ?? []).filter(\n        Boolean,\n      ) as HeaderEnvironment[];\n      navigate(\n        envs.length > 0\n          ? internalRoutes.environment(selectedProjectId, envs[0].id)\n          : internalRoutes.projectTab(selectedProjectId, 'overview'),\n      );\n    } catch {\n      navigate(internalRoutes.projectTab(selectedProjectId, 'overview'));\n    }\n  };\n\n  return (\n    <HeaderRoot>\n      <LeftZone>\n        <Tooltip title=\"Back to project\" arrow enterDelay={600}>\n          <BackButton\n            size=\"small\"\n            component={RouterLinkAdapter}\n            href={internalRoutes.project(projectId)}\n            aria-label=\"Back to project\"\n          >\n            <ChevronLeftIcon fontSize=\"small\" />\n          </BackButton>\n        </Tooltip>\n\n        <Switcher\n          ariaLabel=\"Switch project\"\n          trigger={\n            <TriggerLabel variant=\"body2\" color=\"text.secondary\">\n              {projectName}\n            </TriggerLabel>\n          }\n        >\n          {close =>\n            projects.map(item => (\n              <MenuItem\n                key={item.id}\n                selected={item.id === projectId}\n                onClick={() => {\n                  close();\n                  handleProjectChange(item.id);\n                }}\n              >\n                {item.name}\n              </MenuItem>\n            ))\n          }\n        </Switcher>\n\n        <Separator>/</Separator>\n\n        <Switcher\n          ariaLabel=\"Switch environment\"\n          trigger={\n            <>\n              <TriggerLabel variant=\"body2\">\n                {environment ? environment.name : environmentFallback}\n              </TriggerLabel>\n              {environment ? (\n                <ForkPill\n                  parent={environment.parent}\n                  createdAt={environment.createdAt}\n                />\n              ) : null}\n            </>\n          }\n        >\n          {close => [\n            <CreateMenuItem\n              key=\"__create__\"\n              onClick={() => {\n                close();\n                window.open(createEnvironmentUrl, '_blank', 'noopener');\n              }}\n            >\n              <AddIcon fontSize=\"small\" />\n              <span>Create new environment</span>\n            </CreateMenuItem>,\n            <Divider key=\"__divider__\" />,\n            ...environments.map(item => (\n              <EnvironmentMenuItem\n                key={item.id}\n                selected={item.id === environmentId}\n                title={item.name}\n                onClick={() => {\n                  close();\n                  navigate(internalRoutes.environment(projectId, item.id));\n                }}\n              >\n                <EnvironmentMenuLabel>{item.name}</EnvironmentMenuLabel>\n                <ForkPill parent={item.parent} createdAt={item.createdAt} />\n              </EnvironmentMenuItem>\n            )),\n          ]}\n        </Switcher>\n      </LeftZone>\n\n      <CenterZone>\n        {environment ? (\n          <EnvironmentDefaults environmentId={environment.id} />\n        ) : null}\n      </CenterZone>\n\n      <RightZone>\n        <HeaderActions\n          appUrl={api.appUrl}\n          organizationId={api.organizationId}\n          environment={environment}\n          environments={environments}\n          projectName={project?.name}\n        />\n      </RightZone>\n    </HeaderRoot>\n  );\n};\n\nexport default GraphHeader;\n\nconst HeaderRoot = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  height: theme.spacing(6),\n  paddingLeft: theme.spacing(1),\n  paddingRight: theme.spacing(1.5),\n  gap: theme.spacing(1),\n  borderBottom: `1px solid ${theme.palette.divider}`,\n  backgroundColor: theme.palette.background.paper,\n  flexShrink: 0,\n  [theme.breakpoints.down('sm')]: {\n    overflowX: 'auto',\n    overflowY: 'hidden',\n    scrollbarWidth: 'none',\n    '&::-webkit-scrollbar': { display: 'none' },\n  },\n}));\n\nconst LeftZone = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(0.5),\n  minWidth: 0,\n  flexShrink: 1,\n  [theme.breakpoints.down('sm')]: {\n    flexShrink: 0,\n  },\n}));\n\nconst CenterZone = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  flex: 1,\n  minWidth: 0,\n  [theme.breakpoints.down('sm')]: {\n    flex: 'none',\n  },\n}));\n\nconst RightZone = stylin(Box)({\n  display: 'flex',\n  alignItems: 'center',\n  flexShrink: 0,\n});\n\nconst BackButton = stylin(IconButton)(({ theme }: { theme: any }) => ({\n  color: theme.palette.text.secondary,\n}));\n\nconst TriggerLabel = stylin(Typography)(({ theme }: { theme: any }) => ({\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  maxWidth: theme.spacing(25),\n  lineHeight: 1.4,\n  [theme.breakpoints.down('md')]: {\n    maxWidth: theme.spacing(15),\n  },\n}));\n\nconst Separator = stylin(Typography)(({ theme }: { theme: any }) => ({\n  color: theme.palette.text.disabled,\n  fontSize: theme.typography.body2.fontSize,\n  lineHeight: 1,\n  userSelect: 'none',\n}));\n\nconst CreateMenuItem = stylin(MenuItem)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  color: theme.palette.primary.main,\n  fontWeight: theme.typography.fontWeightMedium,\n  '& > svg': { fontSize: 18 },\n}));\n\nconst EnvironmentMenuItem = stylin(MenuItem)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n}));\n\nconst EnvironmentMenuLabel = stylin('span')({\n  flex: 1,\n  minWidth: 0,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n});\n"],"names":[],"mappings":"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"}

package/dist/features/environment/GraphHeader/HeaderActions.esm.js

@@ -0,0 +1,127 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { environmentUrl } from '@massdriver/backstage-plugin-common';
+import Box from '@massdriver/ui/Box';
+import Button from '@massdriver/ui/Button';
+import IconButton from '@massdriver/ui/IconButton';
+import Tooltip from '@massdriver/ui/Tooltip';
+import Divider from '@massdriver/ui/Divider';
+import stylin from '@massdriver/ui/stylin';
+import CompareArrowsIcon from '@massdriver/ui/icons/CompareArrowsIcon';
+import ForkRightIcon from '@massdriver/ui/icons/ForkRightIcon';
+import SettingsIcon from '@massdriver/ui/icons/SettingsIcon';
+import { CompareEnvironmentsDialog } from '../CompareEnvironmentsDialog/CompareEnvironmentsDialog.esm.js';
+
+const HeaderActions = ({
+  appUrl,
+  organizationId,
+  environment,
+  environments,
+  projectName
+}) => {
+  const [compareOpen, setCompareOpen] = useState(false);
+  const canCompare = environments.length >= 2;
+  const envBaseUrl = environment ? environmentUrl(appUrl, organizationId, environment.id) : null;
+  const forkUrl = envBaseUrl ? `${envBaseUrl}?forkEnvironment=true` : void 0;
+  const settingsUrl = envBaseUrl ? `${envBaseUrl}/settings` : void 0;
+  return /* @__PURE__ */ jsxs(Root, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: "Fork this environment", arrow: true, enterDelay: 400, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs(
+      Action,
+      {
+        variant: "text",
+        href: forkUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        disabled: !environment,
+        children: [
+          /* @__PURE__ */ jsx(ForkRightIcon, {}),
+          /* @__PURE__ */ jsx(Label, { children: "Fork" })
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        title: canCompare ? "Compare" : "Need at least two environments to compare",
+        arrow: true,
+        enterDelay: 400,
+        children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs(
+          Action,
+          {
+            variant: "text",
+            disabled: !canCompare,
+            onClick: () => setCompareOpen(true),
+            children: [
+              /* @__PURE__ */ jsx(CompareArrowsIcon, {}),
+              /* @__PURE__ */ jsx(Label, { children: "Compare" })
+            ]
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsx(StyledDivider, { orientation: "vertical", flexItem: true }),
+    /* @__PURE__ */ jsx(Tooltip, { title: "Environment settings", arrow: true, enterDelay: 400, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+      GearButton,
+      {
+        size: "small",
+        href: settingsUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        disabled: !environment,
+        "aria-label": "Environment settings",
+        children: /* @__PURE__ */ jsx(SettingsIcon, {})
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(
+      CompareEnvironmentsDialog,
+      {
+        open: compareOpen,
+        onClose: () => setCompareOpen(false),
+        projectName,
+        environments,
+        defaultSourceEnvironment: environment
+      }
+    )
+  ] });
+};
+const Root = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.25)
+}));
+const Action = stylin(Button)(({ theme }) => ({
+  alignItems: "center",
+  minWidth: theme.spacing(2.5),
+  gap: theme.spacing(0.5),
+  padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`,
+  color: theme.palette.text.secondary,
+  fontSize: theme.typography.caption.fontSize,
+  fontWeight: 500,
+  fontFamily: theme.typography.fontFamily,
+  whiteSpace: "nowrap",
+  transition: "color 120ms ease, background-color 120ms ease",
+  "& > svg": { fontSize: 18 },
+  "&:hover": {
+    color: theme.palette.text.primary,
+    backgroundColor: theme.palette.action.hover
+  }
+}));
+const Label = stylin("span")(({ theme }) => ({
+  [theme.breakpoints.down("md")]: {
+    display: "none"
+  }
+}));
+const GearButton = stylin(IconButton)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  "& > svg": { fontSize: 18 },
+  "&:hover": {
+    color: theme.palette.text.primary
+  }
+}));
+const StyledDivider = stylin(Divider)(({ theme }) => ({
+  marginLeft: theme.spacing(0.5),
+  marginRight: theme.spacing(0.5)
+}));
+
+export { HeaderActions, HeaderActions as default };
+//# sourceMappingURL=HeaderActions.esm.js.map

package/dist/features/environment/GraphHeader/HeaderActions.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderActions.esm.js","sources":["../../../../src/features/environment/GraphHeader/HeaderActions.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { environmentUrl } from '@massdriver/backstage-plugin-common';\nimport Box from '@massdriver/ui/Box';\nimport Button from '@massdriver/ui/Button';\nimport IconButton from '@massdriver/ui/IconButton';\nimport Tooltip from '@massdriver/ui/Tooltip';\nimport Divider from '@massdriver/ui/Divider';\nimport stylin from '@massdriver/ui/stylin';\nimport CompareArrowsIcon from '@massdriver/ui/icons/CompareArrowsIcon';\nimport ForkRightIcon from '@massdriver/ui/icons/ForkRightIcon';\nimport SettingsIcon from '@massdriver/ui/icons/SettingsIcon';\nimport CompareEnvironmentsDialog from '../CompareEnvironmentsDialog';\nimport type { HeaderEnvironment } from './queries';\n\n/**\n * Right-hand header actions. Fork + Settings deep-link out to the web app (this\n * plugin is read-only); Compare opens the local read-only comparison dialog.\n */\nexport const HeaderActions = ({\n  appUrl,\n  organizationId,\n  environment,\n  environments,\n  projectName,\n}: {\n  appUrl: string;\n  organizationId: string;\n  environment: HeaderEnvironment | null;\n  environments: HeaderEnvironment[];\n  projectName?: string;\n}) => {\n  const [compareOpen, setCompareOpen] = useState(false);\n\n  const canCompare = environments.length >= 2;\n  const envBaseUrl = environment\n    ? environmentUrl(appUrl, organizationId, environment.id)\n    : null;\n  const forkUrl = envBaseUrl ? `${envBaseUrl}?forkEnvironment=true` : undefined;\n  const settingsUrl = envBaseUrl ? `${envBaseUrl}/settings` : undefined;\n\n  return (\n    <Root>\n      <Tooltip title=\"Fork this environment\" arrow enterDelay={400}>\n        <span>\n          <Action\n            variant=\"text\"\n            href={forkUrl}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            disabled={!environment}\n          >\n            <ForkRightIcon />\n            <Label>Fork</Label>\n          </Action>\n        </span>\n      </Tooltip>\n\n      <Tooltip\n        title={\n          canCompare ? 'Compare' : 'Need at least two environments to compare'\n        }\n        arrow\n        enterDelay={400}\n      >\n        <span>\n          <Action\n            variant=\"text\"\n            disabled={!canCompare}\n            onClick={() => setCompareOpen(true)}\n          >\n            <CompareArrowsIcon />\n            <Label>Compare</Label>\n          </Action>\n        </span>\n      </Tooltip>\n\n      <StyledDivider orientation=\"vertical\" flexItem />\n\n      <Tooltip title=\"Environment settings\" arrow enterDelay={400}>\n        <span>\n          <GearButton\n            size=\"small\"\n            href={settingsUrl}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            disabled={!environment}\n            aria-label=\"Environment settings\"\n          >\n            <SettingsIcon />\n          </GearButton>\n        </span>\n      </Tooltip>\n\n      <CompareEnvironmentsDialog\n        open={compareOpen}\n        onClose={() => setCompareOpen(false)}\n        projectName={projectName}\n        environments={environments}\n        defaultSourceEnvironment={environment}\n      />\n    </Root>\n  );\n};\n\nexport default HeaderActions;\n\nconst Root = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(0.25),\n}));\n\nconst Action = stylin(Button)(({ theme }: { theme: any }) => ({\n  alignItems: 'center',\n  minWidth: theme.spacing(2.5),\n  gap: theme.spacing(0.5),\n  padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`,\n  color: theme.palette.text.secondary,\n  fontSize: theme.typography.caption.fontSize,\n  fontWeight: 500,\n  fontFamily: theme.typography.fontFamily,\n  whiteSpace: 'nowrap',\n  transition: 'color 120ms ease, background-color 120ms ease',\n  '& > svg': { fontSize: 18 },\n  '&:hover': {\n    color: theme.palette.text.primary,\n    backgroundColor: theme.palette.action.hover,\n  },\n}));\n\nconst Label = stylin('span')(({ theme }: { theme: any }) => ({\n  [theme.breakpoints.down('md')]: {\n    display: 'none',\n  },\n}));\n\nconst GearButton = stylin(IconButton)(({ theme }: { theme: any }) => ({\n  color: theme.palette.text.secondary,\n  '& > svg': { fontSize: 18 },\n  '&:hover': {\n    color: theme.palette.text.primary,\n  },\n}));\n\nconst StyledDivider = stylin(Divider)(({ theme }: { theme: any }) => ({\n  marginLeft: theme.spacing(0.5),\n  marginRight: theme.spacing(0.5),\n}));\n"],"names":[],"mappings":"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"}

package/dist/features/environment/GraphHeader/Switcher.esm.js

@@ -0,0 +1,75 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import Box from '@massdriver/ui/Box';
+import Menu from '@massdriver/ui/Menu';
+import ArrowDropDownIcon from '@massdriver/ui/icons/ArrowDropDownIcon';
+import stylin from '@massdriver/ui/stylin';
+
+const Switcher = ({
+  trigger,
+  children,
+  ariaLabel
+}) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const close = () => setAnchorEl(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Trigger,
+      {
+        role: "button",
+        tabIndex: 0,
+        "aria-label": ariaLabel,
+        onClick: (event) => setAnchorEl(event.currentTarget),
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            setAnchorEl(event.currentTarget);
+          }
+        },
+        children: [
+          trigger,
+          /* @__PURE__ */ jsx(DropdownIcon, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Menu,
+      {
+        anchorEl,
+        open,
+        onClose: close,
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        transformOrigin: { vertical: "top", horizontal: "left" },
+        MenuListProps: { sx: { py: 0.5 } },
+        slotProps: { paper: { sx: { maxWidth: 320, minWidth: 200 } } },
+        children: children(close)
+      }
+    )
+  ] });
+};
+const Trigger = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  cursor: "pointer",
+  padding: `${theme.spacing(0.5)} ${theme.spacing(0.75)}`,
+  borderRadius: theme.custom.general.borderRadius,
+  transition: "background-color 120ms ease",
+  minWidth: 0,
+  "&:hover": {
+    backgroundColor: theme.palette.action.hover
+  },
+  "&:focus-visible": {
+    outline: `2px solid ${theme.palette.primary.main}`,
+    outlineOffset: 2
+  }
+}));
+const DropdownIcon = stylin(ArrowDropDownIcon)(({ theme }) => ({
+  color: theme.palette.text.disabled,
+  fontSize: 16,
+  flexShrink: 0
+}));
+
+export { Switcher, Switcher as default };
+//# sourceMappingURL=Switcher.esm.js.map

package/dist/features/environment/GraphHeader/Switcher.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switcher.esm.js","sources":["../../../../src/features/environment/GraphHeader/Switcher.tsx"],"sourcesContent":["import { useState, type ReactNode } from 'react';\nimport Box from '@massdriver/ui/Box';\nimport Menu from '@massdriver/ui/Menu';\nimport ArrowDropDownIcon from '@massdriver/ui/icons/ArrowDropDownIcon';\nimport stylin from '@massdriver/ui/stylin';\n\n/**\n * A click-to-open dropdown built on `@massdriver/ui/Menu`. Replaces the web\n * app's Apollo-backed `InfiniteSelect` with a plain menu — the header already\n * has the full option list in memory, so no infinite scroll is needed.\n *\n * `trigger` renders the label; `children` is a render-prop given a `close`\n * callback to build the menu body.\n */\nexport const Switcher = ({\n  trigger,\n  children,\n  ariaLabel,\n}: {\n  trigger: ReactNode;\n  children: (close: () => void) => ReactNode;\n  ariaLabel?: string;\n}) => {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const open = Boolean(anchorEl);\n  const close = () => setAnchorEl(null);\n\n  return (\n    <>\n      <Trigger\n        role=\"button\"\n        tabIndex={0}\n        aria-label={ariaLabel}\n        onClick={(event: any) => setAnchorEl(event.currentTarget)}\n        onKeyDown={(event: any) => {\n          if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            setAnchorEl(event.currentTarget);\n          }\n        }}\n      >\n        {trigger}\n        <DropdownIcon />\n      </Trigger>\n      <Menu\n        anchorEl={anchorEl}\n        open={open}\n        onClose={close}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'left' }}\n        MenuListProps={{ sx: { py: 0.5 } }}\n        slotProps={{ paper: { sx: { maxWidth: 320, minWidth: 200 } } }}\n      >\n        {children(close)}\n      </Menu>\n    </>\n  );\n};\n\nexport default Switcher;\n\nconst Trigger = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(0.5),\n  cursor: 'pointer',\n  padding: `${theme.spacing(0.5)} ${theme.spacing(0.75)}`,\n  borderRadius: theme.custom.general.borderRadius,\n  transition: 'background-color 120ms ease',\n  minWidth: 0,\n  '&:hover': {\n    backgroundColor: theme.palette.action.hover,\n  },\n  '&:focus-visible': {\n    outline: `2px solid ${theme.palette.primary.main}`,\n    outlineOffset: 2,\n  },\n}));\n\nconst DropdownIcon = stylin(ArrowDropDownIcon)(({ theme }: { theme: any }) => ({\n  color: theme.palette.text.disabled,\n  fontSize: 16,\n  flexShrink: 0,\n}));\n"],"names":[],"mappings":"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"}

package/dist/features/environment/GraphHeader/queries.esm.js

@@ -0,0 +1,60 @@
+const HEADER_PROJECTS_QUERY = `
+  query MassdriverHeaderProjects($organizationId: ID!) {
+    projects(organizationId: $organizationId, cursor: { limit: 100 }) {
+      items {
+        id
+        name
+      }
+    }
+  }
+`;
+const HEADER_ENVIRONMENTS_QUERY = `
+  query MassdriverHeaderEnvironments(
+    $organizationId: ID!
+    $filter: EnvironmentsFilter
+  ) {
+    environments(
+      organizationId: $organizationId
+      filter: $filter
+      cursor: { limit: 100 }
+    ) {
+      items {
+        id
+        name
+        createdAt
+        parent {
+          id
+          name
+          createdAt
+        }
+      }
+    }
+  }
+`;
+const ENVIRONMENT_DEFAULTS_QUERY = `
+  query MassdriverEnvironmentDefaults(
+    $organizationId: ID!
+    $environmentId: ID!
+  ) {
+    environment(organizationId: $organizationId, id: $environmentId) {
+      id
+      defaults(cursor: { limit: 100 }) {
+        items {
+          id
+          resource {
+            id
+            name
+            resourceType {
+              id
+              name
+              icon
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+export { ENVIRONMENT_DEFAULTS_QUERY, HEADER_ENVIRONMENTS_QUERY, HEADER_PROJECTS_QUERY };
+//# sourceMappingURL=queries.esm.js.map

package/dist/features/environment/GraphHeader/queries.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"queries.esm.js","sources":["../../../../src/features/environment/GraphHeader/queries.ts"],"sourcesContent":["// Queries backing the read-only environment graph header. `organizationId` is\n// injected by the backend relay, so callers pass only the other variables.\n\n// Both switcher queries carry an explicit cursor bound: the current\n// project/environment is resolved by `.find()` over the returned page, so an\n// unbounded (default-page) query could fail to resolve an entity that sorts\n// past the first page — the header would show '—' for a project/environment\n// that exists.\nexport const HEADER_PROJECTS_QUERY = `\n  query MassdriverHeaderProjects($organizationId: ID!) {\n    projects(organizationId: $organizationId, cursor: { limit: 100 }) {\n      items {\n        id\n        name\n      }\n    }\n  }\n`;\n\nexport const HEADER_ENVIRONMENTS_QUERY = `\n  query MassdriverHeaderEnvironments(\n    $organizationId: ID!\n    $filter: EnvironmentsFilter\n  ) {\n    environments(\n      organizationId: $organizationId\n      filter: $filter\n      cursor: { limit: 100 }\n    ) {\n      items {\n        id\n        name\n        createdAt\n        parent {\n          id\n          name\n          createdAt\n        }\n      }\n    }\n  }\n`;\n\nexport const ENVIRONMENT_DEFAULTS_QUERY = `\n  query MassdriverEnvironmentDefaults(\n    $organizationId: ID!\n    $environmentId: ID!\n  ) {\n    environment(organizationId: $organizationId, id: $environmentId) {\n      id\n      defaults(cursor: { limit: 100 }) {\n        items {\n          id\n          resource {\n            id\n            name\n            resourceType {\n              id\n              name\n              icon\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n\nexport interface HeaderProject {\n  id: string;\n  name: string;\n}\n\nexport interface HeaderEnvironment {\n  id: string;\n  name: string;\n  createdAt?: string | null;\n  parent?: { id: string; name?: string; createdAt?: string } | null;\n}\n\nexport interface HeaderProjectsResult {\n  projects: { items?: (HeaderProject | null)[] | null } | null;\n}\n\nexport interface HeaderEnvironmentsResult {\n  environments: { items?: (HeaderEnvironment | null)[] | null } | null;\n}\n\nexport interface ResourceType {\n  id: string;\n  name: string;\n  icon?: string | null;\n}\n\nexport interface EnvironmentDefaultItem {\n  id: string;\n  resource: {\n    id: string;\n    name: string;\n    resourceType: ResourceType;\n  };\n}\n\nexport interface EnvironmentDefaultsResult {\n  environment: {\n    id: string;\n    defaults?: { items?: (EnvironmentDefaultItem | null)[] | null } | null;\n  } | null;\n}\n"],"names":[],"mappings":"AAQO,MAAM,qBAAA,GAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW9B,MAAM,yBAAA,GAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBlC,MAAM,0BAAA,GAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}