@massdriver/backstage-plugin 1.0.0

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

@@ -0,0 +1,281 @@
+const MONEY = `{ amount currency }`;
+const PANEL_QUERY = `
+  query MassdriverInstancePanel($organizationId: ID!, $id: ID!) {
+    instance(organizationId: $organizationId, id: $id) {
+      id
+      name
+      status
+      version
+      createdAt
+      updatedAt
+      environment { id name }
+      component { id name }
+      cost {
+        lastDay ${MONEY}
+        lastMonth ${MONEY}
+        dailyAverage ${MONEY}
+        monthlyAverage ${MONEY}
+      }
+      secretFields { name required title description sha256 }
+      alarms(cursor: { limit: 50 }) {
+        cursor { next }
+        items { id currentState { id status } }
+      }
+    }
+  }
+`;
+const OVERVIEW_QUERY = `
+  query MassdriverInstanceOverview($organizationId: ID!, $id: ID!) {
+    instance(organizationId: $organizationId, id: $id) {
+      id
+      name
+      status
+      version
+      resolvedVersion
+      deployedVersion
+      availableUpgrade
+      effectiveAttributes
+      bundle { id name version description }
+      properties { name path value }
+      alarms(cursor: { limit: 50 }) {
+        cursor { next }
+        items {
+          id
+          displayName
+          cloudResourceId
+          comparisonOperator
+          threshold
+          period
+          metric {
+            namespace
+            name
+            statistic
+            dimensions { name value }
+          }
+          currentState { id status message occurredAt }
+        }
+      }
+    }
+  }
+`;
+const RESOURCES_QUERY = `
+  query MassdriverInstanceResources($organizationId: ID!, $id: ID!) {
+    instance(organizationId: $organizationId, id: $id) {
+      id
+      status
+      bundle {
+        id
+        resources {
+          name
+          required
+          resourceType { id name icon }
+        }
+      }
+      resources {
+        field
+        required
+        resourceType { id name icon }
+        resource {
+          id
+          name
+          origin
+          formats
+          payload
+          createdAt
+          updatedAt
+          instance { id name }
+        }
+      }
+    }
+  }
+`;
+const RESOURCE_CONSUMERS_QUERY = `
+  query MassdriverResourceConsumers($organizationId: ID!, $id: ID!) {
+    resource(organizationId: $organizationId, id: $id) {
+      id
+      connections(cursor: { limit: 50 }) {
+        cursor { next }
+        items {
+          id
+          fromField
+          toField
+          fromInstance { id name }
+          toInstance { id name }
+        }
+      }
+      environmentDefaults(cursor: { limit: 50 }) {
+        cursor { next }
+        items {
+          id
+          environment { id name project { id name } }
+        }
+      }
+      remoteReferences(cursor: { limit: 50 }) {
+        cursor { next }
+        items {
+          id
+          field
+          instance { id name }
+        }
+      }
+      grants(cursor: { limit: 50 }) {
+        cursor { next }
+        items { id action recipientConditions }
+      }
+    }
+  }
+`;
+const DEPENDENCIES_QUERY = `
+  query MassdriverInstanceDependencies($organizationId: ID!, $id: ID!) {
+    instance(organizationId: $organizationId, id: $id) {
+      id
+      status
+      bundle {
+        id
+        dependencies {
+          name
+          required
+          resourceType { id name icon connectionOrientation }
+        }
+      }
+      dependencies {
+        field
+        required
+        resource { id name }
+        resourceType { id name icon connectionOrientation }
+        source {
+          __typename
+          ... on Connection {
+            id
+            fromField
+            fromInstance {
+              id
+              name
+              status
+              environment { id }
+            }
+            link { id fromComponent { id name } }
+          }
+          ... on RemoteReference {
+            id
+            resource { id name resourceType { id name icon } }
+          }
+          ... on EnvironmentDefault {
+            id
+            resource { id name resourceType { id name icon } }
+          }
+        }
+      }
+    }
+  }
+`;
+const ALARMS_QUERY = `
+  query MassdriverInstanceAlarms($organizationId: ID!, $id: ID!) {
+    instance(organizationId: $organizationId, id: $id) {
+      id
+      alarms(cursor: { limit: 100 }) {
+        cursor { next }
+        items {
+          id
+          displayName
+          cloudResourceId
+          comparisonOperator
+          threshold
+          period
+          metric {
+            namespace
+            name
+            statistic
+            dimensions { name value }
+          }
+          currentState { id status message occurredAt }
+        }
+      }
+    }
+  }
+`;
+const HISTORY_QUERY = `
+  query MassdriverInstanceHistory(
+    $organizationId: ID!
+    $instanceId: ID!
+    $filter: DeploymentsFilter
+    $sort: DeploymentsSort
+  ) {
+    deployments(
+      organizationId: $organizationId
+      filter: $filter
+      sort: $sort
+      cursor: { limit: 50 }
+    ) {
+      cursor { next }
+      items {
+        id
+        status
+        action
+        version
+        message
+        createdAt
+        updatedAt
+        lastTransitionedAt
+        elapsedTime
+        deployedBy
+      }
+    }
+    instance(organizationId: $organizationId, id: $instanceId) {
+      id
+      createdAt
+      environment { id name }
+    }
+  }
+`;
+const DEPLOYMENT_QUERY = `
+  query MassdriverDeployment($organizationId: ID!, $id: UUID!) {
+    deployment(organizationId: $organizationId, id: $id) {
+      id
+      status
+      action
+      version
+      message
+      params
+      effectiveAttributes
+      createdAt
+      lastTransitionedAt
+      elapsedTime
+      deployedBy
+      instance {
+        id
+        component { id name }
+      }
+    }
+  }
+`;
+const DEPLOYMENT_LOGS_QUERY = `
+  query MassdriverDeploymentLogs($organizationId: ID!, $id: UUID!) {
+    deployment(organizationId: $organizationId, id: $id) {
+      id
+      status
+      action
+      version
+      instance {
+        id
+        component { id name }
+      }
+      logs {
+        timestamp
+        message
+      }
+    }
+  }
+`;
+const GUIDE_QUERY = `
+  query MassdriverInstanceGuide($organizationId: ID!, $id: ID!) {
+    instance(organizationId: $organizationId, id: $id) {
+      id
+      operatorGuide
+      bundle { id name version }
+    }
+  }
+`;
+
+export { ALARMS_QUERY, DEPENDENCIES_QUERY, DEPLOYMENT_LOGS_QUERY, DEPLOYMENT_QUERY, GUIDE_QUERY, HISTORY_QUERY, OVERVIEW_QUERY, PANEL_QUERY, RESOURCES_QUERY, RESOURCE_CONSUMERS_QUERY };
+//# sourceMappingURL=queries.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"queries.esm.js","sources":["../../../../src/features/environment/InstanceDrawer/queries.ts"],"sourcesContent":["// GraphQL documents for the read-only instance drawer. All are proxied through\n// the backend relay, which injects `organizationId`, so callers pass only the\n// remaining variables (see api.ts). Every normalizable selection includes `id`.\n\nconst MONEY = `{ amount currency }`;\n\nexport const PANEL_QUERY = `\n  query MassdriverInstancePanel($organizationId: ID!, $id: ID!) {\n    instance(organizationId: $organizationId, id: $id) {\n      id\n      name\n      status\n      version\n      createdAt\n      updatedAt\n      environment { id name }\n      component { id name }\n      cost {\n        lastDay ${MONEY}\n        lastMonth ${MONEY}\n        dailyAverage ${MONEY}\n        monthlyAverage ${MONEY}\n      }\n      secretFields { name required title description sha256 }\n      alarms(cursor: { limit: 50 }) {\n        cursor { next }\n        items { id currentState { id status } }\n      }\n    }\n  }\n`;\n\nexport const OVERVIEW_QUERY = `\n  query MassdriverInstanceOverview($organizationId: ID!, $id: ID!) {\n    instance(organizationId: $organizationId, id: $id) {\n      id\n      name\n      status\n      version\n      resolvedVersion\n      deployedVersion\n      availableUpgrade\n      effectiveAttributes\n      bundle { id name version description }\n      properties { name path value }\n      alarms(cursor: { limit: 50 }) {\n        cursor { next }\n        items {\n          id\n          displayName\n          cloudResourceId\n          comparisonOperator\n          threshold\n          period\n          metric {\n            namespace\n            name\n            statistic\n            dimensions { name value }\n          }\n          currentState { id status message occurredAt }\n        }\n      }\n    }\n  }\n`;\n\nexport const RESOURCES_QUERY = `\n  query MassdriverInstanceResources($organizationId: ID!, $id: ID!) {\n    instance(organizationId: $organizationId, id: $id) {\n      id\n      status\n      bundle {\n        id\n        resources {\n          name\n          required\n          resourceType { id name icon }\n        }\n      }\n      resources {\n        field\n        required\n        resourceType { id name icon }\n        resource {\n          id\n          name\n          origin\n          formats\n          payload\n          createdAt\n          updatedAt\n          instance { id name }\n        }\n      }\n    }\n  }\n`;\n\nexport const RESOURCE_CONSUMERS_QUERY = `\n  query MassdriverResourceConsumers($organizationId: ID!, $id: ID!) {\n    resource(organizationId: $organizationId, id: $id) {\n      id\n      connections(cursor: { limit: 50 }) {\n        cursor { next }\n        items {\n          id\n          fromField\n          toField\n          fromInstance { id name }\n          toInstance { id name }\n        }\n      }\n      environmentDefaults(cursor: { limit: 50 }) {\n        cursor { next }\n        items {\n          id\n          environment { id name project { id name } }\n        }\n      }\n      remoteReferences(cursor: { limit: 50 }) {\n        cursor { next }\n        items {\n          id\n          field\n          instance { id name }\n        }\n      }\n      grants(cursor: { limit: 50 }) {\n        cursor { next }\n        items { id action recipientConditions }\n      }\n    }\n  }\n`;\n\nexport const DEPENDENCIES_QUERY = `\n  query MassdriverInstanceDependencies($organizationId: ID!, $id: ID!) {\n    instance(organizationId: $organizationId, id: $id) {\n      id\n      status\n      bundle {\n        id\n        dependencies {\n          name\n          required\n          resourceType { id name icon connectionOrientation }\n        }\n      }\n      dependencies {\n        field\n        required\n        resource { id name }\n        resourceType { id name icon connectionOrientation }\n        source {\n          __typename\n          ... on Connection {\n            id\n            fromField\n            fromInstance {\n              id\n              name\n              status\n              environment { id }\n            }\n            link { id fromComponent { id name } }\n          }\n          ... on RemoteReference {\n            id\n            resource { id name resourceType { id name icon } }\n          }\n          ... on EnvironmentDefault {\n            id\n            resource { id name resourceType { id name icon } }\n          }\n        }\n      }\n    }\n  }\n`;\n\nexport const ALARMS_QUERY = `\n  query MassdriverInstanceAlarms($organizationId: ID!, $id: ID!) {\n    instance(organizationId: $organizationId, id: $id) {\n      id\n      alarms(cursor: { limit: 100 }) {\n        cursor { next }\n        items {\n          id\n          displayName\n          cloudResourceId\n          comparisonOperator\n          threshold\n          period\n          metric {\n            namespace\n            name\n            statistic\n            dimensions { name value }\n          }\n          currentState { id status message occurredAt }\n        }\n      }\n    }\n  }\n`;\n\n// `deployments` is capped at a single page of 50 (cursor.limit) — the web app's\n// infinite scroll is dropped as an acceptable read-only simplification, so an\n// instance with more than 50 deployments shows only its 50 most-recent. The\n// second root field (`instance`) sources the \"Initialized\" footer row.\nexport const HISTORY_QUERY = `\n  query MassdriverInstanceHistory(\n    $organizationId: ID!\n    $instanceId: ID!\n    $filter: DeploymentsFilter\n    $sort: DeploymentsSort\n  ) {\n    deployments(\n      organizationId: $organizationId\n      filter: $filter\n      sort: $sort\n      cursor: { limit: 50 }\n    ) {\n      cursor { next }\n      items {\n        id\n        status\n        action\n        version\n        message\n        createdAt\n        updatedAt\n        lastTransitionedAt\n        elapsedTime\n        deployedBy\n      }\n    }\n    instance(organizationId: $organizationId, id: $instanceId) {\n      id\n      createdAt\n      environment { id name }\n    }\n  }\n`;\n\n// Full snapshot of a single deployment for the read-only detail panel. `id` is a\n// `UUID!` here (the `deployment(id:)` field), unlike the list filter's `ID!`.\nexport const DEPLOYMENT_QUERY = `\n  query MassdriverDeployment($organizationId: ID!, $id: UUID!) {\n    deployment(organizationId: $organizationId, id: $id) {\n      id\n      status\n      action\n      version\n      message\n      params\n      effectiveAttributes\n      createdAt\n      lastTransitionedAt\n      elapsedTime\n      deployedBy\n      instance {\n        id\n        component { id name }\n      }\n    }\n  }\n`;\n\n// Initial log backfill for the read-only logs viewer. The live tail is streamed\n// separately via the `deploymentLogs` subscription (see realtime/queries.ts).\n// `id` is a `UUID!` here, matching `deployment(id:)`.\nexport const DEPLOYMENT_LOGS_QUERY = `\n  query MassdriverDeploymentLogs($organizationId: ID!, $id: UUID!) {\n    deployment(organizationId: $organizationId, id: $id) {\n      id\n      status\n      action\n      version\n      instance {\n        id\n        component { id name }\n      }\n      logs {\n        timestamp\n        message\n      }\n    }\n  }\n`;\n\nexport const GUIDE_QUERY = `\n  query MassdriverInstanceGuide($organizationId: ID!, $id: ID!) {\n    instance(organizationId: $organizationId, id: $id) {\n      id\n      operatorGuide\n      bundle { id name version }\n    }\n  }\n`;\n"],"names":[],"mappings":"AAIA,MAAM,KAAA,GAAQ,CAAA,mBAAA,CAAA;AAEP,MAAM,WAAA,GAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAA,EAYT,KAAK;AAAA,kBAAA,EACH,KAAK;AAAA,qBAAA,EACF,KAAK;AAAA,uBAAA,EACH,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWvB,MAAM,cAAA,GAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCvB,MAAM,eAAA,GAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCxB,MAAM,wBAAA,GAA2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCjC,MAAM,kBAAA,GAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6C3B,MAAM,YAAA,GAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BrB,MAAM,aAAA,GAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCtB,MAAM,gBAAA,GAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyBzB,MAAM,qBAAA,GAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmB9B,MAAM,WAAA,GAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

package/dist/features/environment/InstanceDrawer/tabs/ConfigTab.esm.js

@@ -0,0 +1,170 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import Box from '@massdriver/ui/Box';
+import Button from '@massdriver/ui/Button';
+import CodeBlock from '@massdriver/ui/CodeBlock';
+import TextField from '@massdriver/ui/TextField';
+import ToggleButton from '@massdriver/ui/ToggleButton';
+import ToggleButtonGroup from '@massdriver/ui/ToggleButtonGroup';
+import Tooltip from '@massdriver/ui/Tooltip';
+import Typography from '@massdriver/ui/Typography';
+import stylin from '@massdriver/ui/stylin';
+import { DataSourceProvider, Form } from '@massdriver/forms';
+import '@mui/material/Chip';
+import '@mui/material/Drawer';
+import '@mui/material/OutlinedInput';
+import '@mui/material/Select';
+import { toggleButtonClasses } from '@mui/material/ToggleButton';
+import { useInstanceApiQuery } from '../useInstanceApiQuery.esm.js';
+import { TabState } from '../TabState.esm.js';
+import { formsDataSource } from '../formsDataSource.esm.js';
+
+const CONFIG_QUERY = `
+  query MassdriverInstanceConfig($organizationId: ID!, $id: ID!) {
+    instance(organizationId: $organizationId, id: $id) {
+      id
+      name
+      params
+      paramsSchema
+      uiSchema
+    }
+  }
+`;
+const FORM_VIEW_TOOLTIP = "Show the config as a form.";
+const JSON_VIEW_TOOLTIP = "Show the raw JSON params.";
+const PROPOSE_TOOLTIP = "This view is read-only. Open in Massdriver to propose or deploy changes.";
+const parseMap = (value) => {
+  if (value == null) return void 0;
+  if (typeof value === "object") return value;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return void 0;
+  }
+};
+const noop = () => {
+};
+const ConfigTab = ({ instanceId }) => {
+  const { value, loading, error } = useInstanceApiQuery(CONFIG_QUERY, instanceId);
+  const instance = value?.instance;
+  const [viewMode, setViewMode] = useState("form");
+  const schema = useMemo(
+    () => parseMap(instance?.paramsSchema),
+    [instance?.paramsSchema]
+  );
+  const uiSchema = useMemo(
+    () => parseMap(instance?.uiSchema) || {},
+    [instance?.uiSchema]
+  );
+  const formData = useMemo(
+    () => parseMap(instance?.params) ?? {},
+    [instance?.params]
+  );
+  return /* @__PURE__ */ jsx(TabState, { loading, error, children: schema ? /* @__PURE__ */ jsxs(Root, { children: [
+    /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(
+      ViewToggle,
+      {
+        value: viewMode,
+        exclusive: true,
+        size: "small",
+        onChange: (_event, next) => next && setViewMode(next),
+        "aria-label": "Config view mode",
+        children: [
+          /* @__PURE__ */ jsx(Tooltip, { title: FORM_VIEW_TOOLTIP, placement: "top", arrow: true, children: /* @__PURE__ */ jsx(ToggleButton, { value: "form", "aria-label": "Form view", children: "Form" }) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: JSON_VIEW_TOOLTIP, placement: "top", arrow: true, children: /* @__PURE__ */ jsx(ToggleButton, { value: "json", "aria-label": "JSON view", children: "JSON" }) })
+        ]
+      }
+    ) }),
+    viewMode === "json" ? /* @__PURE__ */ jsxs(JsonViewSection, { children: [
+      /* @__PURE__ */ jsx(JsonViewCaption, { variant: "caption", children: "Read-only view of the raw JSON params." }),
+      /* @__PURE__ */ jsx(JsonCodeBlock, { children: JSON.stringify(formData ?? {}, null, 2) })
+    ] }) : /* @__PURE__ */ jsxs(FormSection, { children: [
+      /* @__PURE__ */ jsx(DataSourceProvider, { value: formsDataSource, children: /* @__PURE__ */ jsx(
+        Form,
+        {
+          id: "instance-config",
+          schema,
+          uiSchema,
+          formData,
+          readonly: true,
+          onChange: noop,
+          children: /* @__PURE__ */ jsx(Fragment, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsx(MessageRow, { children: /* @__PURE__ */ jsx(
+        TextField,
+        {
+          label: "Deployment message",
+          helperText: "Optional. Shown in the deployment history.",
+          fullWidth: true,
+          multiline: true,
+          minRows: 1,
+          maxRows: 4,
+          value: "",
+          disabled: true
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsx(Tooltip, { title: PROPOSE_TOOLTIP, placement: "top", children: /* @__PURE__ */ jsx(ButtonWrap, { children: /* @__PURE__ */ jsx(Button, { variant: "outlined", disabled: true, children: "Propose" }) }) }) })
+    ] })
+  ] }) : /* @__PURE__ */ jsx(Empty, { children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "This instance has no configuration schema." }) }) });
+};
+const Root = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(2)
+}));
+const Header = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: theme.spacing(2),
+  paddingBottom: theme.spacing(1.5),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  minHeight: theme.spacing(5.5)
+}));
+const ViewToggle = stylin(ToggleButtonGroup)(({ theme }) => ({
+  width: theme.spacing(16),
+  height: theme.spacing(3.5),
+  [`& .${toggleButtonClasses.root}`]: {
+    flex: 1,
+    height: "100%",
+    fontWeight: 400,
+    fontSize: theme.typography.pxToRem(13),
+    paddingTop: 0,
+    paddingBottom: 0
+  }
+}));
+const FormSection = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(2)
+}));
+const JsonViewSection = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(1)
+}));
+const JsonCodeBlock = stylin(CodeBlock)(({ theme }) => ({
+  maxHeight: theme.spacing(50)
+}));
+const JsonViewCaption = stylin(Typography)(({ theme }) => ({
+  color: theme.palette.text.secondary
+}));
+const MessageRow = stylin(Box)({
+  display: "flex",
+  flexDirection: "column"
+});
+const Footer = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing(1),
+  marginTop: theme.spacing(1)
+}));
+const ButtonWrap = stylin("span")({
+  display: "inline-flex"
+});
+const Empty = stylin(Box)(({ theme }) => ({
+  padding: theme.spacing(2)
+}));
+
+export { ConfigTab, ConfigTab as default };
+//# sourceMappingURL=ConfigTab.esm.js.map

package/dist/features/environment/InstanceDrawer/tabs/ConfigTab.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigTab.esm.js","sources":["../../../../../src/features/environment/InstanceDrawer/tabs/ConfigTab.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport Box from '@massdriver/ui/Box';\nimport Button from '@massdriver/ui/Button';\nimport CodeBlock from '@massdriver/ui/CodeBlock';\nimport TextField from '@massdriver/ui/TextField';\nimport ToggleButton from '@massdriver/ui/ToggleButton';\nimport ToggleButtonGroup from '@massdriver/ui/ToggleButtonGroup';\nimport Tooltip from '@massdriver/ui/Tooltip';\nimport Typography from '@massdriver/ui/Typography';\nimport stylin from '@massdriver/ui/stylin';\nimport { Form, DataSourceProvider } from '@massdriver/forms';\nimport { toggleButtonClasses } from '../../../../theme/muiClasses';\nimport { useInstanceApiQuery } from '../useInstanceApiQuery';\nimport { TabState } from '../TabState';\nimport { formsDataSource } from '../formsDataSource';\n\nconst CONFIG_QUERY = `\n  query MassdriverInstanceConfig($organizationId: ID!, $id: ID!) {\n    instance(organizationId: $organizationId, id: $id) {\n      id\n      name\n      params\n      paramsSchema\n      uiSchema\n    }\n  }\n`;\n\nconst FORM_VIEW_TOOLTIP = 'Show the config as a form.';\nconst JSON_VIEW_TOOLTIP = 'Show the raw JSON params.';\nconst PROPOSE_TOOLTIP =\n  'This view is read-only. Open in Massdriver to propose or deploy changes.';\n\ninterface ConfigInstance {\n  id: string;\n  params?: string | null;\n  paramsSchema?: string | null;\n  uiSchema?: string | null;\n}\n\n// paramsSchema / uiSchema / params come back as JSON-encoded strings; parse to\n// objects the way the web app's `parseMap` does for the same fields.\nconst parseMap = (value: unknown): any => {\n  if (value == null) return undefined;\n  if (typeof value === 'object') return value;\n  try {\n    return JSON.parse(value as string);\n  } catch {\n    return undefined;\n  }\n};\n\nconst noop = () => {};\n\n/**\n * Read-only instance config. Mirrors the web app's ConfigTab: a Form/JSON view\n * toggle, the schema-driven RJSF `Form` (rendered `readonly`, submit suppressed\n * via `<></>` children), the raw-params `CodeBlock`, and a disabled Propose\n * button. Everything is read-only — the drawer header's \"Open in Massdriver\"\n * deep-links here to actually edit/propose/deploy. Data-fetching fields resolve\n * through the relay via the injected `formsDataSource`.\n */\nexport const ConfigTab = ({ instanceId }: { instanceId: string | null }) => {\n  const { value, loading, error } = useInstanceApiQuery<{\n    instance: ConfigInstance | null;\n  }>(CONFIG_QUERY, instanceId);\n  const instance = value?.instance;\n\n  const [viewMode, setViewMode] = useState<'form' | 'json'>('form');\n\n  const schema = useMemo(\n    () => parseMap(instance?.paramsSchema),\n    [instance?.paramsSchema],\n  );\n  const uiSchema = useMemo(\n    () => parseMap(instance?.uiSchema) || {},\n    [instance?.uiSchema],\n  );\n  const formData = useMemo(\n    () => parseMap(instance?.params) ?? {},\n    [instance?.params],\n  );\n\n  return (\n    <TabState loading={loading} error={error}>\n      {schema ? (\n        <Root>\n          <Header>\n            <ViewToggle\n              value={viewMode}\n              exclusive\n              size=\"small\"\n              onChange={(_event: unknown, next: 'form' | 'json' | null) =>\n                next && setViewMode(next)\n              }\n              aria-label=\"Config view mode\"\n            >\n              <Tooltip title={FORM_VIEW_TOOLTIP} placement=\"top\" arrow>\n                <ToggleButton value=\"form\" aria-label=\"Form view\">\n                  Form\n                </ToggleButton>\n              </Tooltip>\n              <Tooltip title={JSON_VIEW_TOOLTIP} placement=\"top\" arrow>\n                <ToggleButton value=\"json\" aria-label=\"JSON view\">\n                  JSON\n                </ToggleButton>\n              </Tooltip>\n            </ViewToggle>\n          </Header>\n\n          {viewMode === 'json' ? (\n            <JsonViewSection>\n              <JsonViewCaption variant=\"caption\">\n                Read-only view of the raw JSON params.\n              </JsonViewCaption>\n              <JsonCodeBlock>\n                {JSON.stringify(formData ?? {}, null, 2)}\n              </JsonCodeBlock>\n            </JsonViewSection>\n          ) : (\n            <FormSection>\n              <DataSourceProvider value={formsDataSource}>\n                <Form\n                  id=\"instance-config\"\n                  schema={schema}\n                  uiSchema={uiSchema}\n                  formData={formData}\n                  readonly\n                  onChange={noop}\n                >\n                  <></>\n                </Form>\n              </DataSourceProvider>\n\n              <MessageRow>\n                <TextField\n                  label=\"Deployment message\"\n                  helperText=\"Optional. Shown in the deployment history.\"\n                  fullWidth\n                  multiline\n                  minRows={1}\n                  maxRows={4}\n                  value=\"\"\n                  disabled\n                />\n              </MessageRow>\n\n              <Footer>\n                <Tooltip title={PROPOSE_TOOLTIP} placement=\"top\">\n                  <ButtonWrap>\n                    <Button variant=\"outlined\" disabled>\n                      Propose\n                    </Button>\n                  </ButtonWrap>\n                </Tooltip>\n              </Footer>\n            </FormSection>\n          )}\n        </Root>\n      ) : (\n        <Empty>\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            This instance has no configuration schema.\n          </Typography>\n        </Empty>\n      )}\n    </TabState>\n  );\n};\n\nexport default ConfigTab;\n\nconst Root = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n}));\n\nconst Header = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: theme.spacing(2),\n  paddingBottom: theme.spacing(1.5),\n  borderBottom: `1px solid ${theme.palette.divider}`,\n  minHeight: theme.spacing(5.5),\n}));\n\n// Ported from apps/web/features/environments/sections/InstancePanel/tabs/ConfigTab/ConfigTab.view.js\nconst ViewToggle = stylin(ToggleButtonGroup)(({ theme }: { theme: any }) => ({\n  width: theme.spacing(16),\n  height: theme.spacing(3.5),\n  [`& .${toggleButtonClasses.root}`]: {\n    flex: 1,\n    height: '100%',\n    fontWeight: 400,\n    fontSize: theme.typography.pxToRem(13),\n    paddingTop: 0,\n    paddingBottom: 0,\n  },\n}));\n\nconst FormSection = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n}));\n\nconst JsonViewSection = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1),\n}));\n\nconst JsonCodeBlock = stylin(CodeBlock)(({ theme }: { theme: any }) => ({\n  maxHeight: theme.spacing(50),\n}));\n\nconst JsonViewCaption = stylin(Typography)(({ theme }: { theme: any }) => ({\n  color: theme.palette.text.secondary,\n}));\n\nconst MessageRow = stylin(Box)({\n  display: 'flex',\n  flexDirection: 'column',\n});\n\nconst Footer = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  gap: theme.spacing(1),\n  marginTop: theme.spacing(1),\n}));\n\nconst ButtonWrap = stylin('span')({\n  display: 'inline-flex',\n});\n\nconst Empty = stylin(Box)(({ theme }: { theme: any }) => ({\n  padding: theme.spacing(2),\n}));\n"],"names":[],"mappings":"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"}