[segment explorer] capture defined boundaries

Author: huozhi

packages/next/src/client/components/layout-router.tsx

@@ -665,7 +665,16 @@ export default function OuterLayoutRouter({
         .SegmentStateProvider as typeof import('../../next-devtools/userspace/app/segment-explorer-node').SegmentStateProvider as typeof import('../../next-devtools/userspace/app/segment-explorer-node').SegmentStateProvider
 
       child = (
-        <SegmentStateProvider key={stateKey}>{child}</SegmentStateProvider>
+        <SegmentStateProvider
+          key={stateKey}
+          boundaries={{
+            notFound: !!notFound,
+            loading: !!loadingModuleData,
+            error: !!error,
+          }}
+        >
+          {child}
+        </SegmentStateProvider>
       )
     }
 

packages/next/src/next-devtools/dev-overlay/components/overview/segment-boundary-trigger.tsx

@@ -3,9 +3,11 @@ import { Menu } from '@base-ui-components/react/menu'
 import type { SegmentNodeState } from '../../../userspace/app/segment-explorer-node'
 
 export function SegmentBoundaryTrigger({
+  boundaries,
   onSelectBoundary,
   offset,
 }: {
+  boundaries: SegmentNodeState['boundaries']
   onSelectBoundary: SegmentNodeState['setBoundaryType']
   offset: number
 }) {
@@ -16,10 +18,26 @@ export function SegmentBoundaryTrigger({
   })
   const shadowRootRef = useRef<ShadowRoot>(shadowRoot)
 
+  console.log('boundaries', boundaries)
   const triggerOptions = [
-    { label: 'Trigger Loading', value: 'loading', icon: <LoadingIcon /> },
-    { label: 'Trigger Error', value: 'error', icon: <ErrorIcon /> },
-    { label: 'Trigger Not Found', value: 'not-found', icon: <NotFoundIcon /> },
+    {
+      label: 'Loading',
+      value: 'loading',
+      icon: <LoadingIcon />,
+      disabled: !boundaries.loading,
+    },
+    {
+      label: 'Error',
+      value: 'error',
+      icon: <ErrorIcon />,
+      disabled: !boundaries.error,
+    },
+    {
+      label: 'Not Found',
+      value: 'not-found',
+      icon: <NotFoundIcon />,
+      disabled: !boundaries.notFound,
+    },
   ]
 
   const resetOption = {
@@ -74,6 +92,7 @@ export function SegmentBoundaryTrigger({
                   key={option.value}
                   className="segment-boundary-dropdown-item"
                   onClick={() => handleSelect(option.value)}
+                  disabled={option.disabled}
                 >
                   {option.icon}
                   {option.label}
@@ -86,6 +105,14 @@ export function SegmentBoundaryTrigger({
                 key={resetOption.value}
                 className="segment-boundary-dropdown-item"
                 onClick={() => handleSelect(resetOption.value)}
+                // disable reset if there is no boundary
+                disabled={
+                  !(
+                    boundaries.loading ||
+                    boundaries.error ||
+                    boundaries.notFound
+                  )
+                }
               >
                 {resetOption.icon}
                 {resetOption.label}
@@ -274,9 +301,14 @@ export const styles = `
     width: 100%;
   }
 
+  .segment-boundary-dropdown-item[data-disabled] {
+    color: var(--color-gray-400);
+    cursor: not-allowed;
+  }
+
   .segment-boundary-dropdown-item svg {
     margin-right: 12px;
-    color: var(--color-gray-900);
+    color: currentColor;
   }
 
   .segment-boundary-dropdown-item:hover {

packages/next/src/next-devtools/dev-overlay/components/overview/segment-explorer.tsx

@@ -208,6 +208,7 @@ function PageSegmentTreeLayerPresentation({
                 <SegmentBoundaryTrigger
                   offset={6}
                   onSelectBoundary={pageChild.value.setBoundaryType}
+                  boundaries={pageChild.value.boundaries}
                 />
               )}
             </div>

packages/next/src/next-devtools/userspace/app/segment-explorer-node.tsx

@@ -19,6 +19,7 @@ export const SEGMENT_EXPLORER_SIMULATED_ERROR_MESSAGE =
 export type SegmentNodeState = {
   type: string
   pagePath: string
+  boundaries: { notFound: boolean; loading: boolean; error: boolean }
   boundaryType: string | null
   setBoundaryType: (type: 'error' | 'not-found' | 'loading' | null) => void
 }
@@ -30,15 +31,16 @@ function SegmentTrieNode({
   type: string
   pagePath: string
 }): React.ReactNode {
-  const { boundaryType, setBoundaryType } = useSegmentState()
+  const { boundaryType, setBoundaryType, boundaries } = useSegmentState()
   const nodeState: SegmentNodeState = useMemo(
     () => ({
       type,
       pagePath,
+      boundaries,
       boundaryType,
       setBoundaryType,
     }),
-    [type, pagePath, boundaryType, setBoundaryType]
+    [type, pagePath, boundaryType, setBoundaryType, boundaries]
   )
 
   // Use `useLayoutEffect` to ensure the state is updated during suspense.
@@ -112,14 +114,22 @@ export function SegmentViewNode({
 }
 
 const SegmentStateContext = createContext<{
+  boundaries: { notFound: boolean; loading: boolean; error: boolean }
   boundaryType: 'not-found' | 'error' | 'loading' | null
   setBoundaryType: (type: 'not-found' | 'error' | 'loading' | null) => void
 }>({
+  boundaries: { notFound: false, loading: false, error: false },
   boundaryType: null,
   setBoundaryType: () => {},
 })
 
-export function SegmentStateProvider({ children }: { children: ReactNode }) {
+export function SegmentStateProvider({
+  children,
+  boundaries,
+}: {
+  children: ReactNode
+  boundaries: { notFound: boolean; loading: boolean; error: boolean }
+}) {
   const [boundaryType, setBoundaryType] = useState<
     'not-found' | 'error' | 'loading' | null
   >(null)
@@ -143,7 +153,11 @@ export function SegmentStateProvider({ children }: { children: ReactNode }) {
   return (
     <SegmentStateContext.Provider
       key={errorBoundaryKey}
-      value={{ boundaryType, setBoundaryType: setBoundaryTypeAndReload }}
+      value={{
+        boundaryType,
+        setBoundaryType: setBoundaryTypeAndReload,
+        boundaries,
+      }}
     >
       {children}
     </SegmentStateContext.Provider>