Skip to content

Commit b5f2517

Browse files
authored
[segment explorer] fix boundary trigger state (#81623)
1 parent d04d65b commit b5f2517

File tree

3 files changed

+16
-43
lines changed

3 files changed

+16
-43
lines changed

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

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -47,15 +47,6 @@
4747
cursor: not-allowed;
4848
}
4949

50-
.segment-boundary-trigger--boundary {
51-
background: var(--color-background-100);
52-
box-shadow: inset 0 0 0 1px var(--color-gray-400);
53-
}
54-
55-
.segment-boundary-trigger--boundary:hover {
56-
background: var(--color-gray-200);
57-
}
58-
5950
.segment-boundary-dropdown {
6051
padding: 8px;
6152
background: var(--color-background-100);

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

Lines changed: 14 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,7 @@ import './segment-boundary-trigger.css'
22
import { useCallback, useState, useRef, useMemo } from 'react'
33
import { Menu } from '@base-ui-components/react/menu'
44
import type { SegmentNodeState } from '../../../userspace/app/segment-explorer-node'
5-
import {
6-
isBoundaryFile,
7-
normalizeBoundaryFilename,
8-
} from '../../../../server/app-render/segment-explorer-path'
9-
import { cx } from '../../utils/cx'
5+
import { normalizeBoundaryFilename } from '../../../../server/app-render/segment-explorer-path'
106
import { useClickOutside } from '../errors/dev-tools-indicator/utils'
117

128
const composeRefs = (...refs: (React.Ref<HTMLButtonElement> | undefined)[]) => {
@@ -29,13 +25,7 @@ export function SegmentBoundaryTrigger({
2925
boundaries: Record<'not-found' | 'loading' | 'error', string | null>
3026
}) {
3127
const currNode = nodeState
32-
const {
33-
pagePath,
34-
boundaryType,
35-
type,
36-
setBoundaryType: onSelectBoundary,
37-
} = currNode
38-
const fileType = type
28+
const { pagePath, boundaryType, setBoundaryType: onSelectBoundary } = currNode
3929

4030
const [isOpen, setIsOpen] = useState(false)
4131
// TODO: move this shadowRoot ref util to a shared hook or into context
@@ -76,15 +66,12 @@ export function SegmentBoundaryTrigger({
7666
}, [boundaries, possibleExtension])
7767

7868
const fileName = (pagePath || '').split('/').pop() || ''
79-
const isBoundary = isBoundaryFile(fileType)
8069
const pageFileName = normalizeBoundaryFilename(
8170
boundaryType
8271
? `page.${possibleExtension}`
8372
: fileName || `page.${possibleExtension}`
8473
)
8574

86-
const isPageOrBoundary = fileType && !isBoundary
87-
8875
const triggerOptions = [
8976
{
9077
label: fileNames.loading,
@@ -158,15 +145,21 @@ export function SegmentBoundaryTrigger({
158145
return <Trigger {...triggerProps} ref={mergedRef} />
159146
}
160147

148+
const hasBoundary = useMemo(() => {
149+
const hasPageOrBoundary =
150+
nodeState.type !== 'layout' && nodeState.type !== 'template'
151+
return (
152+
hasPageOrBoundary && Object.values(boundaries).some((v) => v !== null)
153+
)
154+
}, [nodeState.type, boundaries])
155+
161156
return (
162157
<Menu.Root delay={0} modal={false} open={isOpen} onOpenChange={setIsOpen}>
163158
<Menu.Trigger
164-
className={cx(
165-
'segment-boundary-trigger',
166-
!isPageOrBoundary && 'segment-boundary-trigger--boundary'
167-
)}
159+
className="segment-boundary-trigger"
168160
data-nextjs-dev-overlay-segment-boundary-trigger-button
169161
render={MergedRefTrigger}
162+
disabled={!hasBoundary}
170163
/>
171164

172165
{/* @ts-expect-error remove this expect-error once shadowRoot is supported as container */}
@@ -330,13 +323,9 @@ function SwitchIcon(props: React.SVGProps<SVGSVGElement>) {
330323
)
331324
}
332325

333-
export function Trigger(props: React.ComponentProps<'button'>) {
326+
function Trigger(props: React.ComponentProps<'button'>) {
334327
return (
335-
<button
336-
{...props}
337-
className={cx('segment-boundary-trigger', props.className)}
338-
role="button"
339-
>
328+
<button {...props}>
340329
<span className="segment-boundary-trigger-text">
341330
<SwitchIcon className="plus-icon" />
342331
</span>

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

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
type SegmentTrieNode,
55
} from '../../segment-explorer-trie'
66
import { cx } from '../../utils/cx'
7-
import { SegmentBoundaryTrigger, Trigger } from './segment-boundary-trigger'
7+
import { SegmentBoundaryTrigger } from './segment-boundary-trigger'
88
import { Tooltip } from '../../../components/tooltip'
99
import { useCallback, useMemo } from 'react'
1010
import {
@@ -257,12 +257,6 @@ function PageSegmentTreeLayerPresentation({
257257

258258
const filesChildrenKeysBesidesSelectedBoundary = filesChildrenKeys
259259

260-
const isChildPageOrBoundary =
261-
firstChild &&
262-
firstChild.value &&
263-
firstChild.value.type !== 'layout' &&
264-
firstChild.value.type !== 'template'
265-
266260
return (
267261
<>
268262
{hasFilesChildren && (
@@ -359,13 +353,12 @@ function PageSegmentTreeLayerPresentation({
359353
)}
360354
</span>
361355
)}
362-
{firstChild && firstChild.value && isChildPageOrBoundary && (
356+
{firstChild && firstChild.value && (
363357
<SegmentBoundaryTrigger
364358
nodeState={firstChild.value}
365359
boundaries={boundaries}
366360
/>
367361
)}
368-
{!isChildPageOrBoundary && <Trigger disabled />}
369362
</div>
370363
</div>
371364
</div>

0 commit comments

Comments
 (0)