@checkstack/dependency-frontend 0.5.2 → 0.5.4

package/CHANGELOG.md

@@ -1,5 +1,66 @@
 # @checkstack/dependency-frontend
 
+## 0.5.4
+
+### Patch Changes
+
+- 50123c7: Fix the dependency map page's scrolling and make its header consistent with the
+  rest of the app. The page sized its canvas with a fixed `calc(100vh - 12rem)`,
+  which could overshoot the available space (double-scroll) depending on viewport
+  chrome, and it used a bespoke `<h1>` header with no icon. It now renders through
+  `PageLayout` (with the `GitBranch` nav icon and `fillHeight`), so the React Flow
+  canvas fills the app shell's bounded flex content area and only it scrolls/pans -
+  the page itself never scrolls.
+- fb705df: Upgrade React 18 to React 19 across the platform.
+
+  **BREAKING (runtime frontend plugins):** React is shared as a Module Federation
+  singleton, so the host now provides **React 19** to every runtime plugin.
+  Frontend plugins built against React 18 must be rebuilt against React 19
+  (`react` / `react-dom` `^19`). The scaffold templates and the host/plugin MF
+  `requiredVersion` are updated to `^19`. `react` (and now `react-dom`) are pinned
+  to a single version across the workspace via syncpack so the singleton can never
+  skew (react and react-dom must match exactly).
+
+  The React 19 removed-API surface was audited - the codebase used only no-arg
+  `useRef()` (now `useRef<T | undefined>(undefined)`); no `ReactDOM.render`,
+  legacy context, string refs, or function-component `defaultProps`. This also
+  clears the `IMPORT_IS_UNDEFINED` build warnings for `React.use` /
+  `React.useOptimistic` (react-router 7 feature-detection), which React 19 exports.
+
+  The downstream `*-frontend` packages (and `@checkstack/infrastructure-common`)
+  receive only the mechanical `react` dependency bump (`patch`); the framework
+  packages carrying the shared-singleton change are bumped `minor`.
+
+- Updated dependencies [9d8961c]
+- Updated dependencies [fb705df]
+  - @checkstack/ui@1.15.0
+  - @checkstack/frontend-api@0.8.0
+  - @checkstack/dashboard-frontend@0.8.4
+  - @checkstack/gitops-frontend@0.5.4
+  - @checkstack/signal-frontend@0.2.3
+  - @checkstack/catalog-common@2.3.3
+  - @checkstack/dependency-common@1.2.3
+  - @checkstack/common@0.14.1
+  - @checkstack/gitops-common@0.6.2
+  - @checkstack/healthcheck-common@1.5.3
+
+## 0.5.3
+
+### Patch Changes
+
+- Updated dependencies [ed251b6]
+- Updated dependencies [968c12f]
+  - @checkstack/ui@1.14.0
+  - @checkstack/dashboard-frontend@0.8.3
+  - @checkstack/gitops-frontend@0.5.3
+  - @checkstack/catalog-common@2.3.2
+  - @checkstack/common@0.14.1
+  - @checkstack/dependency-common@1.2.2
+  - @checkstack/frontend-api@0.7.2
+  - @checkstack/gitops-common@0.6.2
+  - @checkstack/healthcheck-common@1.5.2
+  - @checkstack/signal-frontend@0.2.2
+
 ## 0.5.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/dependency-frontend",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -13,25 +13,25 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/catalog-common": "2.3.2",
+    "@checkstack/catalog-common": "2.3.3",
     "@checkstack/common": "0.14.1",
-    "@checkstack/dashboard-frontend": "0.8.2",
-    "@checkstack/dependency-common": "1.2.2",
-    "@checkstack/frontend-api": "0.7.2",
+    "@checkstack/dashboard-frontend": "0.8.4",
+    "@checkstack/dependency-common": "1.2.3",
+    "@checkstack/frontend-api": "0.8.0",
     "@checkstack/gitops-common": "0.6.2",
-    "@checkstack/gitops-frontend": "0.5.2",
-    "@checkstack/healthcheck-common": "1.5.2",
-    "@checkstack/signal-frontend": "0.2.2",
-    "@checkstack/ui": "1.13.2",
+    "@checkstack/gitops-frontend": "0.5.4",
+    "@checkstack/healthcheck-common": "1.5.3",
+    "@checkstack/signal-frontend": "0.2.3",
+    "@checkstack/ui": "1.15.0",
     "@xyflow/react": "^12.11.0",
     "lucide-react": "^1.17.0",
-    "react": "^18.3.1",
+    "react": "19.2.7",
     "react-router-dom": "^7.16.0"
   },
   "devDependencies": {
     "typescript": "^5.0.0",
-    "@types/react": "^18.2.0",
+    "@types/react": "^19.0.0",
     "@checkstack/tsconfig": "0.0.7",
-    "@checkstack/scripts": "0.4.2"
+    "@checkstack/scripts": "0.6.0"
   }
 }

package/src/components/DependencyMapPage.tsx

@@ -26,11 +26,12 @@ import {
   Button,
   Badge,
   LoadingSpinner,
+  PageLayout,
   useToast,
   usePerformance,
   cn,
 } from "@checkstack/ui";
-import { Maximize2, Save, RefreshCw, Trash2 } from "lucide-react";
+import { Maximize2, Save, RefreshCw, Trash2, GitBranch } from "lucide-react";
 import type { ImpactType } from "@checkstack/dependency-common";
 import { DependencyEdgeForm } from "./DependencyEdgeForm";
 import { useProvenanceLocks } from "@checkstack/gitops-frontend";
@@ -96,7 +97,9 @@ function DependencyMapContent() {
   const [nodes, setNodes, onNodesChange] = useNodesState<SystemNode>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState<DependencyEdge>([]);
   const [hasUnsaved, setHasUnsaved] = useState(false);
-  const saveTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const saveTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined,
+  );
 
   // Edge editor state
   const [selectedEdge, setSelectedEdge] = useState<
@@ -409,14 +412,14 @@ function DependencyMapContent() {
 
   if (loading) {
     return (
-      <div className="h-[calc(100vh-12rem)] flex items-center justify-center">
+      <div className="flex-1 min-h-0 flex items-center justify-center">
         <LoadingSpinner />
       </div>
     );
   }
 
   return (
-    <div className="h-[calc(100vh-12rem)] rounded-xl border border-border overflow-hidden bg-background/50">
+    <div className="flex-1 min-h-0 rounded-xl border border-border overflow-hidden bg-background/50">
       <ReactFlow<SystemNode, DependencyEdge>
         nodes={nodes}
         edges={edges}
@@ -699,24 +702,22 @@ function DependencyMapContent() {
 }
 
 /**
- * Dependency Map page — wrapped in ReactFlowProvider and Suspense.
+ * Dependency Map page — standard PageLayout header (matching the GitBranch nav
+ * icon), full-height so the canvas fills the viewport. Wrapped in
+ * ReactFlowProvider and Suspense.
  */
 const DependencyMapPageContent = () => {
   return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-foreground">Dependency Map</h1>
-          <p className="text-sm text-muted-foreground mt-1">
-            Interactive topology view of system dependencies. Drag nodes to
-            rearrange — positions auto-save.
-          </p>
-        </div>
-      </div>
+    <PageLayout
+      title="Dependency Map"
+      subtitle="Interactive topology view of system dependencies. Drag nodes to rearrange; positions auto-save."
+      icon={GitBranch}
+      fillHeight
+    >
       <ReactFlowProvider>
         <DependencyMapContent />
       </ReactFlowProvider>
-    </div>
+    </PageLayout>
   );
 };