Shared Dock, PublishButton, DiscardButton, DiscardDraftDialog for the flow and dashboard editors
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -1,7 +1,6 @@
|
||||
import { useReactFlow } from "@xyflow/react"
|
||||
import {
|
||||
AlertCircle,
|
||||
Check,
|
||||
Maximize2,
|
||||
Pause,
|
||||
Pencil,
|
||||
@@ -9,16 +8,19 @@ import {
|
||||
PlayCircle,
|
||||
Plus,
|
||||
StepForward,
|
||||
WifiOff,
|
||||
X,
|
||||
} from "lucide-react"
|
||||
import { AnimatePresence, motion } from "motion/react"
|
||||
import { useEffect, useState } from "react"
|
||||
|
||||
import type { ValidationIssue } from "@/client"
|
||||
import {
|
||||
DiscardButton,
|
||||
Dock,
|
||||
DockSeparator,
|
||||
PublishButton,
|
||||
} from "@/components/Common/Dock"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { FluksioLoader } from "@/components/ui/fluksio-loader"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
@@ -133,17 +135,7 @@ export function FlowDock({
|
||||
<LogsPanel flow={flow} {...logs} />
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
variants={slideUp}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="exit"
|
||||
transition={transitions.emphasized}
|
||||
// Capped and wrapping: the canvas shell clips, so an uncapped row would
|
||||
// put the buttons at its ends out of reach on a phone rather than merely
|
||||
// look wrong. See DESIGN-GUIDELINES.md → Responsive.
|
||||
className="pointer-events-auto flex max-w-[calc(100vw-2rem)] flex-wrap items-center justify-center gap-1 rounded-full border border-border bg-card/80 px-1.5 py-1 shadow-e2 backdrop-blur-md pb-[max(0.25rem,env(safe-area-inset-bottom))]"
|
||||
>
|
||||
<Dock>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
@@ -160,10 +152,7 @@ export function FlowDock({
|
||||
<TooltipContent>Add a node (⌘P)</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Separator
|
||||
orientation="vertical"
|
||||
className="mx-0.5 !h-5 hidden md:block"
|
||||
/>
|
||||
<DockSeparator />
|
||||
|
||||
{/* A phone pinches to zoom and the graph fits itself, so this would only
|
||||
be taking room the rest of the bar needs. */}
|
||||
@@ -184,10 +173,7 @@ export function FlowDock({
|
||||
|
||||
{issues.length > 0 ? (
|
||||
<>
|
||||
<Separator
|
||||
orientation="vertical"
|
||||
className="mx-0.5 !h-5 hidden md:block"
|
||||
/>
|
||||
<DockSeparator />
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm-touch"
|
||||
@@ -208,10 +194,7 @@ export function FlowDock({
|
||||
</>
|
||||
) : null}
|
||||
|
||||
<Separator
|
||||
orientation="vertical"
|
||||
className="mx-0.5 !h-5 hidden md:block"
|
||||
/>
|
||||
<DockSeparator />
|
||||
|
||||
<LogsTrigger open={logs.open} onOpenChange={logs.onOpenChange} />
|
||||
|
||||
@@ -281,10 +264,7 @@ export function FlowDock({
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Separator
|
||||
orientation="vertical"
|
||||
className="mx-0.5 !h-5 hidden md:block"
|
||||
/>
|
||||
<DockSeparator />
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
@@ -302,67 +282,21 @@ export function FlowDock({
|
||||
<TooltipContent>Flow settings</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
{/* Throwing the edit away sits next to putting it live, and only exists
|
||||
while there is something to throw away. */}
|
||||
{hasDraft ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-touch"
|
||||
className="text-muted-foreground"
|
||||
onClick={onDiscard}
|
||||
aria-label="Discard the unpublished changes"
|
||||
data-testid="discard-draft"
|
||||
>
|
||||
<X />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Discard the unpublished changes</TooltipContent>
|
||||
</Tooltip>
|
||||
<DiscardButton testId="discard-draft" onClick={onDiscard} />
|
||||
) : null}
|
||||
|
||||
{/*
|
||||
* Saved state and publish are one control: the glyph never moves, it
|
||||
* simply stops being something you can press once there is nothing left
|
||||
* to put live. A button that appears and disappears moved everything
|
||||
* beside it just as the work was finished.
|
||||
*/}
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-touch"
|
||||
className="text-muted-foreground"
|
||||
onClick={onPublish}
|
||||
disabled={!hasDraft || publishing || saving || !connected}
|
||||
aria-label="Publish this flow"
|
||||
data-testid="publish-flow"
|
||||
>
|
||||
{!connected ? (
|
||||
<WifiOff className="size-3.5" />
|
||||
) : saving || publishing ? (
|
||||
<FluksioLoader className="size-3.5" />
|
||||
) : (
|
||||
<Check className="size-3.5" />
|
||||
)}
|
||||
</Button>
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
{!connected
|
||||
? "Reconnecting to the engine"
|
||||
: publishing
|
||||
? "Publishing"
|
||||
: saving
|
||||
? "Saving"
|
||||
: hasDraft
|
||||
? "Saved — publish to put it live"
|
||||
: "All changes saved"}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</motion.div>
|
||||
<PublishButton
|
||||
label="Publish this flow"
|
||||
testId="publish-flow"
|
||||
hasDraft={hasDraft}
|
||||
saving={saving}
|
||||
publishing={publishing}
|
||||
offline={!connected}
|
||||
draftHint="Saved — publish to put it live"
|
||||
onPublish={onPublish}
|
||||
/>
|
||||
</Dock>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -32,6 +32,7 @@ import {
|
||||
type MessageSpec,
|
||||
type NodeDef_Input,
|
||||
} from "@/client"
|
||||
import { DiscardDraftDialog } from "@/components/Common/Dock"
|
||||
import { useTheme } from "@/components/theme-provider"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
@@ -1462,41 +1463,25 @@ function FlowEditorInner({
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={discardOpen} onOpenChange={setDiscardOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Discard the unpublished changes?</DialogTitle>
|
||||
<DialogDescription>
|
||||
The canvas goes back to the version the engine is running. What
|
||||
you edited since is dropped, though the flow store's git history
|
||||
keeps it.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setDiscardOpen(false)}>
|
||||
Keep editing
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
disabled={discard.isPending}
|
||||
onClick={() => {
|
||||
setDiscardOpen(false)
|
||||
discard.mutate(undefined, {
|
||||
// The published document replaces what is on the canvas, and
|
||||
// the version counter goes back with it.
|
||||
onSuccess: () => {
|
||||
setFlowPanelOpen(false)
|
||||
onReload()
|
||||
},
|
||||
})
|
||||
}}
|
||||
data-testid="confirm-discard-draft"
|
||||
>
|
||||
Discard changes
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<DiscardDraftDialog
|
||||
open={discardOpen}
|
||||
onOpenChange={setDiscardOpen}
|
||||
pending={discard.isPending}
|
||||
testId="confirm-discard-draft"
|
||||
onConfirm={() =>
|
||||
discard.mutate(undefined, {
|
||||
// The published document replaces what is on the canvas, and
|
||||
// the version counter goes back with it.
|
||||
onSuccess: () => {
|
||||
setFlowPanelOpen(false)
|
||||
onReload()
|
||||
},
|
||||
})
|
||||
}
|
||||
>
|
||||
The canvas goes back to the version the engine is running. What you
|
||||
edited since is dropped, though the flow store's git history keeps it.
|
||||
</DiscardDraftDialog>
|
||||
|
||||
{/*
|
||||
* Not dismissable: until one version wins, every further save fails, so
|
||||
|
||||
Reference in New Issue
Block a user