@checkstack/dependency-frontend 0.3.5 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,106 @@
 # @checkstack/dependency-frontend
 
+## 0.4.1
+
+### Patch Changes
+
+- Updated dependencies [9016526]
+  - @checkstack/common@0.10.0
+  - @checkstack/catalog-common@2.2.0
+  - @checkstack/healthcheck-common@1.1.0
+  - @checkstack/dependency-common@1.1.0
+  - @checkstack/gitops-common@0.4.0
+  - @checkstack/dashboard-frontend@0.7.1
+  - @checkstack/frontend-api@0.5.1
+  - @checkstack/gitops-frontend@0.4.1
+  - @checkstack/ui@1.8.1
+  - @checkstack/signal-frontend@0.1.3
+
+## 0.4.0
+
+### Minor Changes
+
+- f6f9a5c: Add a GitOps `System.dependencies` extension and lock the matching UI.
+
+  Each entry references an upstream system by ref and tunes the impact:
+
+  ```yaml
+  apiVersion: checkstack.io/v1alpha1
+  kind: System
+  metadata: { name: payments-api }
+  spec:
+    dependencies:
+      - targetRef: { kind: System, name: payments-db }
+        impactType: critical
+        transitive: false
+        label: "primary store"
+  ```
+
+  The reconciler diffs the YAML-declared edges against the persisted ones
+  where this system is the source and converges via
+  create / update / delete. GitOps is the source of truth, so any edges
+  no longer listed are removed. Refs that resolve to the source system
+  itself are rejected; refs that fail to resolve abort the diff before
+  any mutation.
+
+  UI gates:
+
+  - The `DependencyEditor` (system editor drawer) hides Add and disables
+    Edit/Delete on upstream rows when the source system is GitOps-managed.
+    Downstream rows are gated per-row by the _other_ system's lock.
+  - The `DependencyMap` blocks `onConnect` when the source is locked,
+    surfaces a "Managed by GitOps" notice in the edge editor panel, and
+    disables Save/Delete there.
+
+### Patch Changes
+
+- 950d6ec: Fix mobile UserMenu items rendering at zero height, group menu items by
+  section, and unstack cramped card headers on small viewports.
+
+  - **UserMenu mobile bug**: On mobile, the user-menu Sheet rendered every
+    menu item as a grid row, which combined with `flex-shrink: 1` on each
+    item collapsed the buttons whose internal layout uses `display: flex`
+    (the items registered with `useNavigate` rather than `<Link>`) to zero
+    content height. Switched the mobile container to a flex column with
+    `[&>*]:shrink-0` and added `min-h-0` so the sheet scrolls correctly
+    when the list overflows.
+
+  - **UserMenu grouping**: Slot extensions now accept an optional `group`
+    field. The user menu buckets `UserMenuItemsSlot` extensions by `group`
+    and renders each group under a labeled header (`Workspace`,
+    `Reliability`, `Configuration`, `Documentation`, `Account`). Existing
+    core plugins are tagged with the appropriate group; third-party plugins
+    can pick any of these or supply their own label. Untagged extensions
+    render last with no header. `UserMenuItemsBottomSlot` is unaffected.
+
+  - **Card header responsiveness**: `CardHeaderRow` (the primitive shared by
+    Incident, Maintenance, Auth, Catalog, GitOps and other config cards) now
+    stacks vertically on narrow viewports and only switches to a single row
+    at the `sm` breakpoint, so titles and adjacent filter controls (e.g.
+    status `Select`, "Show resolved" checkbox) no longer cram together on
+    mobile. Refactored the Incident and Maintenance config pages to use the
+    primitive instead of a hand-rolled `flex items-center justify-between`
+    row, and made their `Select` triggers full-width on mobile.
+
+- Updated dependencies [42abfff]
+- Updated dependencies [3547670]
+- Updated dependencies [f6f9a5c]
+- Updated dependencies [1ef2e79]
+- Updated dependencies [aa89bc5]
+- Updated dependencies [950d6ec]
+- Updated dependencies [3547670]
+- Updated dependencies [3547670]
+  - @checkstack/common@0.9.0
+  - @checkstack/ui@1.8.0
+  - @checkstack/gitops-common@0.3.0
+  - @checkstack/gitops-frontend@0.4.0
+  - @checkstack/catalog-common@2.1.0
+  - @checkstack/frontend-api@0.5.0
+  - @checkstack/dashboard-frontend@0.7.0
+  - @checkstack/dependency-common@1.0.2
+  - @checkstack/healthcheck-common@1.0.2
+  - @checkstack/signal-frontend@0.1.2
+
 ## 0.3.5
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/dependency-frontend",
-  "version": "0.3.5",
+  "version": "0.4.1",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -13,14 +13,16 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/catalog-common": "2.0.0",
-    "@checkstack/common": "0.7.0",
-    "@checkstack/dashboard-frontend": "0.6.0",
-    "@checkstack/dependency-common": "1.0.0",
-    "@checkstack/frontend-api": "0.4.1",
-    "@checkstack/healthcheck-common": "1.0.0",
-    "@checkstack/signal-frontend": "0.1.0",
-    "@checkstack/ui": "1.7.0",
+    "@checkstack/catalog-common": "2.1.0",
+    "@checkstack/common": "0.9.0",
+    "@checkstack/dashboard-frontend": "0.7.0",
+    "@checkstack/dependency-common": "1.0.2",
+    "@checkstack/frontend-api": "0.5.0",
+    "@checkstack/gitops-common": "0.3.0",
+    "@checkstack/gitops-frontend": "0.4.0",
+    "@checkstack/healthcheck-common": "1.0.2",
+    "@checkstack/signal-frontend": "0.1.2",
+    "@checkstack/ui": "1.8.0",
     "@xyflow/react": "^12.10.2",
     "lucide-react": "^0.344.0",
     "react": "^18.2.0",
@@ -29,7 +31,7 @@
   "devDependencies": {
     "typescript": "^5.0.0",
     "@types/react": "^18.2.0",
-    "@checkstack/tsconfig": "0.0.6",
-    "@checkstack/scripts": "0.1.2"
+    "@checkstack/tsconfig": "0.0.7",
+    "@checkstack/scripts": "0.3.1"
   }
 }

package/src/components/DependencyEditor.tsx

@@ -31,7 +31,12 @@ import {
   AlertTriangle,
   RotateCcw,
   MapIcon,
+  GitBranch,
 } from "lucide-react";
+import {
+  useProvenanceLock,
+  useProvenanceLocks,
+} from "@checkstack/gitops-frontend";
 
 type Props = SlotContext<typeof SystemEditorSlot>;
 
@@ -58,6 +63,16 @@ export const DependencyEditor: React.FC<Props> = ({ systemId }) => {
   const depClient = usePluginClient(DependencyApi);
   const catalogClient = usePluginClient(CatalogApi);
 
+  // GitOps owns the *source* system's `dependencies` extension. Edits to
+  // upstream rows (this system → ...) are blocked when this system is
+  // managed; downstream rows belong to other source systems and are gated
+  // per-row via the bulk hook.
+  const { isLocked: sourceLocked } = useProvenanceLock({
+    kind: "System",
+    entityId: systemId,
+  });
+  const { getLock: getSystemLock } = useProvenanceLocks();
+
   const [isAdding, setIsAdding] = useState(false);
   const [selectedTargetId, setSelectedTargetId] = useState("");
   const [selectedImpactType, setSelectedImpactType] =
@@ -168,12 +183,29 @@ export const DependencyEditor: React.FC<Props> = ({ systemId }) => {
   return (
     <div className="space-y-3">
       <div className="flex items-center justify-between">
-        <Label>Dependencies</Label>
+        <Label className="flex items-center gap-2">
+          Dependencies
+          {sourceLocked && (
+            <span
+              className="inline-flex items-center gap-1 text-xs font-normal text-primary"
+              title="Managed by GitOps — edit the source YAML"
+            >
+              <GitBranch className="h-3 w-3" />
+              GitOps
+            </span>
+          )}
+        </Label>
         <Button
           type="button"
           variant="outline"
           size="sm"
           onClick={() => setIsAdding(!isAdding)}
+          disabled={sourceLocked}
+          title={
+            sourceLocked
+              ? "Managed by GitOps — declare dependencies in the System's YAML"
+              : undefined
+          }
         >
           <Plus className="h-3.5 w-3.5 mr-1" />
           Add
@@ -187,7 +219,7 @@ export const DependencyEditor: React.FC<Props> = ({ systemId }) => {
       )}
 
       {/* Add dependency form */}
-      {isAdding && (
+      {isAdding && !sourceLocked && (
         <div className="p-3 rounded-lg border border-border bg-muted/30 space-y-3">
           <div className="space-y-2">
             <label className="text-sm font-medium">Depends on (upstream)</label>
@@ -257,6 +289,7 @@ export const DependencyEditor: React.FC<Props> = ({ systemId }) => {
                 onDelete={() => handleDelete(dep)}
                 onUpdate={handleUpdate}
                 isUpdating={updateMutation.isPending}
+                isLocked={sourceLocked}
               />
             ))}
           </div>
@@ -271,17 +304,26 @@ export const DependencyEditor: React.FC<Props> = ({ systemId }) => {
             Depended By ({downstreamDeps.length})
           </h4>
           <div className="space-y-1">
-            {downstreamDeps.map((dep) => (
-              <DependencyRow
-                key={dep.id}
-                dependency={dep}
-                systemName={systemNameMap.get(dep.sourceSystemId) ?? dep.sourceSystemId}
-                direction="downstream"
-                onDelete={() => handleDelete(dep)}
-                onUpdate={handleUpdate}
-                isUpdating={updateMutation.isPending}
-              />
-            ))}
+            {downstreamDeps.map((dep) => {
+              // The "source" of a downstream edge is *another* system —
+              // its lock is what governs editability.
+              const otherSourceLocked = getSystemLock({
+                kind: "System",
+                entityId: dep.sourceSystemId,
+              }).isLocked;
+              return (
+                <DependencyRow
+                  key={dep.id}
+                  dependency={dep}
+                  systemName={systemNameMap.get(dep.sourceSystemId) ?? dep.sourceSystemId}
+                  direction="downstream"
+                  onDelete={() => handleDelete(dep)}
+                  onUpdate={handleUpdate}
+                  isUpdating={updateMutation.isPending}
+                  isLocked={otherSourceLocked}
+                />
+              );
+            })}
           </div>
         </div>
       )}
@@ -322,6 +364,7 @@ function DependencyRow({
   onDelete,
   onUpdate,
   isUpdating,
+  isLocked = false,
 }: {
   dependency: Dependency;
   systemName: string;
@@ -334,6 +377,8 @@ function DependencyRow({
     healthCheckRules?: { healthCheckId: string; overrideImpactType: ImpactType }[];
   }) => void;
   isUpdating: boolean;
+  /** When true, the source system of this edge is GitOps-managed. */
+  isLocked?: boolean;
 }) {
   const [isEditing, setIsEditing] = useState(false);
   const [editImpact, setEditImpact] = useState<ImpactType>(
@@ -366,7 +411,7 @@ function DependencyRow({
     setIsEditing(false);
   };
 
-  if (isEditing) {
+  if (isEditing && !isLocked) {
     return (
       <div className="p-3 rounded-lg border border-primary/30 bg-muted/30 space-y-3">
         <div className="flex items-center gap-2">
@@ -415,18 +460,26 @@ function DependencyRow({
     );
   }
 
+  const interactive = !isLocked;
   return (
     <div
-      className="flex items-center justify-between p-2 rounded border border-border bg-background hover:bg-muted/30 transition-colors cursor-pointer"
-      onClick={() => setIsEditing(true)}
-      role="button"
-      tabIndex={0}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          setIsEditing(true);
-        }
-      }}
+      className={`flex items-center justify-between p-2 rounded border border-border bg-background transition-colors ${
+        interactive ? "hover:bg-muted/30 cursor-pointer" : ""
+      }`}
+      onClick={interactive ? () => setIsEditing(true) : undefined}
+      role={interactive ? "button" : undefined}
+      tabIndex={interactive ? 0 : -1}
+      onKeyDown={
+        interactive
+          ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setIsEditing(true);
+              }
+            }
+          : undefined
+      }
+      title={isLocked ? "Managed by GitOps" : undefined}
     >
       <div className="flex items-center gap-2">
         {direction === "upstream" ? (
@@ -434,6 +487,9 @@ function DependencyRow({
         ) : (
           <ArrowDownRight className="h-4 w-4 text-muted-foreground" />
         )}
+        {isLocked && (
+          <GitBranch className="h-3 w-3 text-primary" aria-label="Managed by GitOps" />
+        )}
         <span className="text-sm font-medium">{systemName}</span>
         {dependency.label && (
           <span className="text-xs text-muted-foreground">
@@ -460,6 +516,8 @@ function DependencyRow({
           variant="ghost"
           size="icon"
           className="h-7 w-7"
+          disabled={isLocked}
+          title={isLocked ? "Managed by GitOps" : undefined}
           onClick={(e) => {
             e.stopPropagation();
             onDelete();

package/src/components/DependencyMapPage.tsx

@@ -31,6 +31,7 @@ import {
 import { Maximize2, Save, RefreshCw, Trash2 } from "lucide-react";
 import type { ImpactType } from "@checkstack/dependency-common";
 import { DependencyEdgeForm } from "./DependencyEdgeForm";
+import { useProvenanceLocks } from "@checkstack/gitops-frontend";
 
 import {
   SystemNodeComponent,
@@ -86,6 +87,9 @@ function DependencyMapContent() {
   const catalogClient = usePluginClient(CatalogApi);
   const healthCheckClient = usePluginClient(HealthCheckApi);
   const { fitView } = useReactFlow();
+  // GitOps owns the *source* system's `dependencies` extension. We use the
+  // bulk hook to gate edge mutations per edge based on the source's lock.
+  const { getLock: getSystemLock } = useProvenanceLocks();
   const [nodes, setNodes, onNodesChange] = useNodesState<SystemNode>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState<DependencyEdge>([]);
   const [hasUnsaved, setHasUnsaved] = useState(false);
@@ -217,6 +221,17 @@ function DependencyMapContent() {
       if (!connection.source || !connection.target) return;
       if (connection.source === connection.target) return;
 
+      const sourceLocked = getSystemLock({
+        kind: "System",
+        entityId: connection.source,
+      }).isLocked;
+      if (sourceLocked) {
+        toast.error(
+          "Source system is managed by GitOps — declare the dependency in its YAML.",
+        );
+        return;
+      }
+
       createDependency({
         sourceSystemId: connection.source,
         targetSystemId: connection.target,
@@ -224,7 +239,7 @@ function DependencyMapContent() {
         transitive: false,
       });
     },
-    [createDependency],
+    [createDependency, getSystemLock, toast],
   );
 
   // Track node positions for saving and for preserving in-memory positions
@@ -568,12 +583,17 @@ function DependencyMapContent() {
         </Panel>
 
         {/* Edge editor panel */}
-        {selectedEdge && (
+        {selectedEdge && (() => {
+          const edgeSourceLocked = getSystemLock({
+            kind: "System",
+            entityId: selectedEdge.sourceSystemId,
+          }).isLocked;
+          return (
           <Panel position="top-left">
             <div className="bg-card/95 backdrop-blur-sm border border-border rounded-lg shadow-lg p-4 w-72 space-y-3">
               <div className="space-y-1">
                 <p className="text-sm font-semibold text-foreground">
-                  Edit Dependency
+                  {edgeSourceLocked ? "Dependency (GitOps)" : "Edit Dependency"}
                 </p>
                 <p className="text-xs text-muted-foreground">
                   {systemNameMap.get(selectedEdge.sourceSystemId) ??
@@ -582,6 +602,12 @@ function DependencyMapContent() {
                   {systemNameMap.get(selectedEdge.targetSystemId) ??
                     selectedEdge.targetSystemId}
                 </p>
+                {edgeSourceLocked && (
+                  <p className="text-xs text-warning">
+                    The source system is managed by GitOps. Edit the
+                    dependency in its YAML.
+                  </p>
+                )}
               </div>
               <DependencyEdgeForm
                 impactType={selectedEdge.impactType}
@@ -610,7 +636,8 @@ function DependencyMapContent() {
                       systemId: selectedEdge.sourceSystemId,
                     })
                   }
-                  disabled={deleteMutation.isPending}
+                  disabled={deleteMutation.isPending || edgeSourceLocked}
+                  title={edgeSourceLocked ? "Managed by GitOps" : undefined}
                 >
                   <Trash2 className="h-3.5 w-3.5 mr-1" />
                   Delete
@@ -622,7 +649,7 @@ function DependencyMapContent() {
                     size="sm"
                     onClick={() => setSelectedEdge(undefined)}
                   >
-                    Cancel
+                    {edgeSourceLocked ? "Close" : "Cancel"}
                   </Button>
                   <Button
                     type="button"
@@ -639,7 +666,8 @@ function DependencyMapContent() {
                             : [],
                       })
                     }
-                    disabled={updateMutation.isPending}
+                    disabled={updateMutation.isPending || edgeSourceLocked}
+                    title={edgeSourceLocked ? "Managed by GitOps" : undefined}
                   >
                     {updateMutation.isPending ? "Saving..." : "Save"}
                   </Button>
@@ -647,7 +675,8 @@ function DependencyMapContent() {
               </div>
             </div>
           </Panel>
-        )}
+          );
+        })()}
       </ReactFlow>
     </div>
   );

package/src/index.tsx

@@ -51,6 +51,7 @@ export default createFrontendPlugin({
     createSlotExtension(UserMenuItemsSlot, {
       id: "dependency.user-menu.map",
       component: DependencyMenuItems,
+      metadata: { group: "Workspace" },
     }),
   ],
 });

package/tsconfig.json

@@ -19,6 +19,12 @@
     {
       "path": "../frontend-api"
     },
+    {
+      "path": "../gitops-common"
+    },
+    {
+      "path": "../gitops-frontend"
+    },
     {
       "path": "../healthcheck-common"
     },