-
Notifications
You must be signed in to change notification settings - Fork 115
feat(compare): side-by-side YAML diff for two resources #754
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
9 commits
Select commit
Hold shift + click to select a range
3554310
feat(compare): side-by-side YAML diff for two resources
nadaverell 9c9e089
fix(compare): review-pass polish
nadaverell b9132f2
fix(compare): fill width at wide viewports + clear bottom overlay
nadaverell 757d17c
chore(visual-test): require explicit viewport before navigating
nadaverell bd5e0e7
docs(compare): add Compare Resources section to README
nadaverell 54d8789
feat(compare): Raw metadata toggle + layout-toggle UX consistency
nadaverell 5805484
fix(compare): Cursor Bugbot triage — CRD group, picker side, picker s…
nadaverell 10b91e7
fix(compare): apiGroup URL param, per-side loading, dual-error banner
nadaverell 0e39127
fix(drawer): icon-only Compare button + bump drawer min width to 520
nadaverell File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
192 changes: 192 additions & 0 deletions
192
packages/k8s-ui/src/components/compare/CompareResourcePicker.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,192 @@ | ||
| import { useEffect, useMemo, useRef, useState } from 'react' | ||
| import { clsx } from 'clsx' | ||
| import { GitCompare, Search, X } from 'lucide-react' | ||
| import { DialogPortal } from '../ui/DialogPortal' | ||
| import { pluralToKind } from '../../utils/navigation' | ||
| import type { CompareResourceRef } from './ResourceCompareView' | ||
| import { sortCandidates, filterCandidates } from './sort' | ||
| import { SIDE_TONES, type CompareSide } from './types' | ||
|
|
||
| export interface CompareResourcePickerProps { | ||
| open: boolean | ||
| onClose: () => void | ||
| /** The resource the user is comparing *from*. */ | ||
| source: CompareResourceRef | ||
| /** Which side the source occupies — drives the chip color/label in the dialog header. | ||
| * Defaults to 'a': the launcher flow's source becomes A in the resulting URL. */ | ||
| sourceSide?: CompareSide | ||
| /** Candidate resources — same kind as source. Source is filtered out automatically. */ | ||
| candidates: CompareResourceRef[] | ||
| loading?: boolean | ||
| error?: unknown | ||
| onPick: (r: CompareResourceRef) => void | ||
| } | ||
|
|
||
| export function CompareResourcePicker({ | ||
| open, | ||
| onClose, | ||
| source, | ||
| sourceSide = 'a', | ||
| candidates, | ||
| loading, | ||
| error, | ||
| onPick, | ||
| }: CompareResourcePickerProps) { | ||
| const [query, setQuery] = useState('') | ||
| const [highlightIdx, setHighlightIdx] = useState(0) | ||
| const listRef = useRef<HTMLUListElement | null>(null) | ||
|
|
||
| // Reset query + highlight every time the picker opens. The drawer flow keeps | ||
| // the picker mounted across opens, so without this a previous session's | ||
| // search would leak into the next compare. | ||
| useEffect(() => { | ||
| if (open) { | ||
| setQuery('') | ||
| setHighlightIdx(0) | ||
| } | ||
| }, [open]) | ||
|
|
||
| const filtered = useMemo( | ||
| () => filterCandidates(sortCandidates(candidates, source), query), | ||
| [candidates, source, query], | ||
| ) | ||
|
|
||
| // Clamp on any filter shape change — list length OR query (the user typing | ||
| // can swap which rows are visible without changing length). | ||
| useEffect(() => { | ||
| setHighlightIdx(prev => (prev >= filtered.length ? 0 : prev)) | ||
| }, [filtered.length, query]) | ||
|
|
||
| useEffect(() => { | ||
| if (!listRef.current) return | ||
| const el = listRef.current.querySelector<HTMLElement>(`[data-idx="${highlightIdx}"]`) | ||
| el?.scrollIntoView({ block: 'nearest' }) | ||
| }, [highlightIdx]) | ||
|
|
||
| function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) { | ||
| // Empty list: arrow keys would otherwise compute Math.min(0+1, -1) = -1. | ||
| if (filtered.length === 0) return | ||
| if (e.key === 'ArrowDown') { | ||
| e.preventDefault() | ||
| setHighlightIdx(i => Math.min(i + 1, filtered.length - 1)) | ||
|
cursor[bot] marked this conversation as resolved.
|
||
| } else if (e.key === 'ArrowUp') { | ||
| e.preventDefault() | ||
| setHighlightIdx(i => Math.max(i - 1, 0)) | ||
| } else if (e.key === 'Enter') { | ||
| e.preventDefault() | ||
| const pick = filtered[highlightIdx] | ||
| if (pick) onPick(pick) | ||
| } else if (e.key === 'Home') { | ||
| e.preventDefault() | ||
| setHighlightIdx(0) | ||
| } else if (e.key === 'End') { | ||
| e.preventDefault() | ||
| setHighlightIdx(filtered.length - 1) | ||
| } | ||
| } | ||
|
|
||
| const sourceLabel = sourceSide === 'a' ? 'A' : 'B' | ||
| const sourceChipBg = SIDE_TONES[sourceSide].chipBg | ||
|
|
||
| return ( | ||
| <DialogPortal open={open} onClose={onClose} className="max-w-xl w-full max-h-[70vh] flex flex-col"> | ||
| <div className="flex items-center justify-between px-4 py-3 border-b border-theme-border shrink-0"> | ||
| <div className="flex items-center gap-2"> | ||
| <GitCompare className="w-5 h-5 text-skyhook-400" /> | ||
| <h3 className="text-sm font-semibold text-theme-text-primary"> | ||
| {sourceSide === 'a' | ||
| ? `Compare to another ${pluralToKind(source.kind)}` | ||
| : `Replace side B with another ${pluralToKind(source.kind)}`} | ||
| </h3> | ||
| </div> | ||
| <button | ||
| onClick={onClose} | ||
| className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded" | ||
| aria-label="Close" | ||
| > | ||
| <X className="w-5 h-5" /> | ||
| </button> | ||
| </div> | ||
|
|
||
| <div className="px-4 py-3 border-b border-theme-border shrink-0 space-y-2"> | ||
| <div className="text-xs text-theme-text-secondary flex items-center gap-1.5 flex-wrap"> | ||
| <span className={clsx('inline-flex items-center justify-center w-4 h-4 rounded text-[10px] font-bold leading-none', sourceChipBg)}> | ||
| {sourceLabel} | ||
| </span> | ||
| <span className="font-mono text-theme-text-primary"> | ||
| {source.namespace && <span className="opacity-60">{source.namespace}/</span>} | ||
| {source.name} | ||
| </span> | ||
| </div> | ||
| <div className="relative"> | ||
| <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-theme-text-tertiary pointer-events-none" /> | ||
| <input | ||
| autoFocus | ||
| type="text" | ||
| value={query} | ||
| onChange={e => setQuery(e.target.value)} | ||
| onKeyDown={handleKeyDown} | ||
| placeholder="Search by name or namespace… ↑↓ navigate, ↵ pick" | ||
| className="w-full pl-9 pr-3 py-2 text-sm bg-theme-elevated border border-theme-border rounded-lg text-theme-text-primary placeholder:text-theme-text-tertiary focus:outline-none focus:border-skyhook-400" | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex-1 min-h-0 overflow-y-auto"> | ||
| {loading && ( | ||
| <div className="flex items-center justify-center py-8 text-theme-text-secondary text-sm"> | ||
| Loading {source.kind}… | ||
| </div> | ||
| )} | ||
| {error != null && ( | ||
| <div className="flex items-center justify-center py-8 text-red-400 text-sm"> | ||
| {error instanceof Error ? error.message : String(error)} | ||
| </div> | ||
| )} | ||
| {!loading && error == null && filtered.length === 0 && ( | ||
| <div className="flex flex-col items-center justify-center py-12 text-theme-text-tertiary text-sm gap-1"> | ||
| {candidates.length <= 1 | ||
| ? `No other ${source.kind} available to compare against.` | ||
| : 'No matches.'} | ||
| </div> | ||
| )} | ||
| {!loading && error == null && filtered.length > 0 && ( | ||
| <ul ref={listRef} className="divide-y divide-theme-border/50"> | ||
| {filtered.map((c, idx) => { | ||
| const sameNs = c.namespace === source.namespace | ||
| const isActive = idx === highlightIdx | ||
| return ( | ||
| <li key={`${c.namespace}/${c.name}`} data-idx={idx}> | ||
| <button | ||
| onClick={() => onPick(c)} | ||
| onMouseEnter={() => setHighlightIdx(idx)} | ||
| className={clsx( | ||
| 'w-full text-left px-4 py-2.5 transition-colors', | ||
| 'flex items-baseline gap-2', | ||
| isActive ? 'bg-skyhook-500/10' : 'hover:bg-theme-hover', | ||
| )} | ||
| > | ||
| <span className="text-sm font-mono text-theme-text-primary truncate flex-1"> | ||
| {c.name} | ||
| </span> | ||
| {c.namespace && ( | ||
| <span | ||
| className={clsx( | ||
| 'text-xs font-mono shrink-0', | ||
| sameNs ? 'text-skyhook-400' : 'text-theme-text-tertiary', | ||
| )} | ||
| title={sameNs ? 'Same namespace as the source — likely target' : undefined} | ||
| > | ||
| {c.namespace} | ||
| </span> | ||
| )} | ||
| </button> | ||
| </li> | ||
| ) | ||
| })} | ||
| </ul> | ||
| )} | ||
| </div> | ||
| </DialogPortal> | ||
| ) | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,130 @@ | ||
| import { clsx } from 'clsx' | ||
| import { GitCompare, X, ArrowRight } from 'lucide-react' | ||
| import { Tooltip } from '../ui/Tooltip' | ||
| import { pluralToKind } from '../../utils/navigation' | ||
| import { SIDE_TONES, type CompareSide, type NamespacedRef } from './types' | ||
|
|
||
| export type CompareTrayPick = NamespacedRef | ||
|
|
||
| export interface CompareTrayProps { | ||
| /** Plural kind (e.g. "deployments") — used to label the tray. */ | ||
| kind: string | ||
| picks: CompareTrayPick[] | ||
| onRemove: (index: number) => void | ||
| /** Called when the user hits the Compare CTA. Only invoked when 2 picks. */ | ||
| onCompare: () => void | ||
| /** Exit compare mode entirely (clears picks). */ | ||
| onExit: () => void | ||
| } | ||
|
|
||
| export function CompareTray({ kind, picks, onRemove, onCompare, onExit }: CompareTrayProps) { | ||
| const slotA = picks[0] | ||
| const slotB = picks[1] | ||
| const ready = !!(slotA && slotB) | ||
| const kindLabel = pluralToKind(kind) | ||
|
|
||
| return ( | ||
| <div | ||
| role="region" | ||
| aria-label="Compare resources tray" | ||
| className={clsx( | ||
| 'shrink-0 border-t border-skyhook-500/30 bg-theme-surface/95 backdrop-blur', | ||
| 'shadow-[0_-8px_24px_-12px_rgba(0,0,0,0.35)]', | ||
| )} | ||
| > | ||
| <div className="h-0.5 w-full bg-gradient-to-r from-blue-400/70 via-skyhook-400/40 to-emerald-400/70" /> | ||
|
|
||
| {/* Right padding clears the fixed bottom-right overlay buttons (debug / shortcut-help). */} | ||
| <div className="flex items-center gap-3 pl-4 pr-20 py-2.5"> | ||
| <div className="flex items-center gap-2 shrink-0"> | ||
| <GitCompare className="w-4 h-4 text-skyhook-400" /> | ||
| <span className="text-xs font-semibold text-theme-text-primary uppercase tracking-wider"> | ||
| Compare {kindLabel} | ||
| </span> | ||
| <span className="text-[10px] text-theme-text-tertiary font-medium px-1.5 py-0.5 rounded bg-theme-elevated"> | ||
| {picks.length}/2 | ||
| </span> | ||
| </div> | ||
|
|
||
| <div className="flex items-center gap-2 min-w-0 flex-1"> | ||
| <PickSlot side="a" pick={slotA} onRemove={() => onRemove(0)} /> | ||
| <ArrowRight className="w-3.5 h-3.5 text-theme-text-tertiary shrink-0" /> | ||
| <PickSlot side="b" pick={slotB} onRemove={() => onRemove(1)} /> | ||
| </div> | ||
|
|
||
| <button | ||
| onClick={onCompare} | ||
| disabled={!ready} | ||
| className={clsx( | ||
| 'shrink-0 flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg transition-colors', | ||
| ready | ||
| ? 'btn-brand' | ||
| : 'text-theme-text-disabled bg-theme-elevated border border-theme-border-light cursor-not-allowed', | ||
| )} | ||
| > | ||
| <GitCompare className="w-3.5 h-3.5" /> | ||
| Compare | ||
| </button> | ||
|
|
||
| <Tooltip content="Exit compare mode (Esc)"> | ||
| <button | ||
| onClick={onExit} | ||
| className="shrink-0 p-1.5 rounded-lg text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated transition-colors" | ||
| aria-label="Exit compare mode" | ||
| > | ||
| <X className="w-4 h-4" /> | ||
| </button> | ||
| </Tooltip> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| function PickSlot({ | ||
| side, | ||
| pick, | ||
| onRemove, | ||
| }: { | ||
| side: CompareSide | ||
| pick?: CompareTrayPick | ||
| onRemove: () => void | ||
| }) { | ||
| const tones = SIDE_TONES[side] | ||
|
|
||
| if (!pick) { | ||
| return ( | ||
| <div className="group flex items-center gap-2 pl-1.5 pr-2.5 py-1 rounded-lg border border-dashed border-theme-border-light text-xs font-mono min-w-0 max-w-[22rem] text-theme-text-tertiary italic flex-1"> | ||
| <span className={clsx('inline-flex items-center justify-center w-4 h-4 rounded text-[10px] font-bold leading-none shrink-0 opacity-50', tones.chipBg)}> | ||
| {side === 'a' ? 'A' : 'B'} | ||
| </span> | ||
| <span className="truncate">Pick {side === 'a' ? 'a resource' : 'a second resource'} from the table…</span> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const full = pick.namespace ? `${pick.namespace}/${pick.name}` : pick.name | ||
| return ( | ||
| <div | ||
| className={clsx( | ||
| 'group flex items-center gap-2 pl-1.5 pr-1.5 py-1 rounded-lg border text-xs font-mono min-w-0 max-w-[22rem] flex-1', | ||
| tones.containerBorder, tones.containerBg, | ||
| )} | ||
| title={full} | ||
| > | ||
| <span className={clsx('inline-flex items-center justify-center w-4 h-4 rounded text-[10px] font-bold leading-none shrink-0', tones.chipBg)}> | ||
| {side === 'a' ? 'A' : 'B'} | ||
| </span> | ||
| <span className="text-theme-text-primary truncate min-w-0 flex-1"> | ||
| {pick.namespace && <span className="opacity-60">{pick.namespace}/</span>} | ||
| {pick.name} | ||
| </span> | ||
| <button | ||
| onClick={onRemove} | ||
| className="shrink-0 p-0.5 rounded text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-elevated/70" | ||
| aria-label={`Remove ${side === 'a' ? 'A' : 'B'}`} | ||
| > | ||
| <X className="w-3 h-3" /> | ||
| </button> | ||
| </div> | ||
| ) | ||
| } |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.