Shared Dock, PublishButton, DiscardButton, DiscardDraftDialog for the flow and dashboard editors

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/components/Dashboard/DashboardEditor.tsx

@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { useNavigate } from "@tanstack/react-router"
-import { Check, ExternalLink, Pencil, Plus, Settings2, X } from "lucide-react"
+import { Check, ExternalLink, Pencil, Plus, Settings2 } from "lucide-react"
 import { motion } from "motion/react"
 import { type CSSProperties, useEffect, useRef, useState } from "react"
 import {
@@ -18,18 +18,15 @@ import {
   type Placement,
   type WidgetDef,
 } from "@/client"
+import {
+  DiscardButton,
+  DiscardDraftDialog,
+  Dock,
+  DockSeparator,
+  PublishButton,
+} from "@/components/Common/Dock"
 import { CanvasTitle } from "@/components/Flow/CanvasTitle"
 import { Button } from "@/components/ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
-import { FluksioLoader } from "@/components/ui/fluksio-loader"
-import { Separator } from "@/components/ui/separator"
 import {
   Tooltip,
   TooltipContent,
@@ -576,16 +573,7 @@ export function DashboardEditor({
             arranging never mounts the lock, so the controls are live. */}
         {edit ? null : <LockNotice dashboard={draft} />}
 
-        <motion.div
-          variants={slideUp}
-          initial="hidden"
-          animate="visible"
-          exit="exit"
-          transition={transitions.emphasized}
-          // Capped and wrapping, like the flow dock; see DESIGN-GUIDELINES.md
-          // → Responsive.
-          className="pointer-events-auto absolute bottom-4 left-1/2 z-10 flex max-w-[calc(100vw-2rem)] -translate-x-1/2 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 className="absolute bottom-4 left-1/2 z-10 -translate-x-1/2">
           {edit ? (
             <>
               {/* A canvas can be shrunk to less than what is arranged on it,
@@ -669,66 +657,24 @@ export function DashboardEditor({
                 <TooltipContent>Dashboard settings</TooltipContent>
               </Tooltip>
 
-              {/* Only while there is something to throw away. */}
               {hasDraft ? (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      size="icon-touch"
-                      className="text-muted-foreground"
-                      onClick={() => setDiscardOpen(true)}
-                      aria-label="Discard the unpublished changes"
-                      data-testid="discard-dashboard"
-                    >
-                      <X />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    Discard the unpublished changes
-                  </TooltipContent>
-                </Tooltip>
+                <DiscardButton
+                  testId="discard-dashboard"
+                  onClick={() => setDiscardOpen(true)}
+                />
               ) : null}
 
-              {/* Saved state and publish are one control, as in the flow dock:
-                  the glyph stays put and simply stops being pressable. */}
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <span>
-                    <Button
-                      variant="ghost"
-                      size="icon-touch"
-                      className="text-muted-foreground"
-                      onClick={() => void publishDashboard()}
-                      disabled={
-                        !hasDraft || publish.isPending || save.isPending
-                      }
-                      aria-label="Publish this dashboard"
-                      data-testid="publish-dashboard"
-                    >
-                      {save.isPending || publish.isPending ? (
-                        <FluksioLoader className="size-3.5" />
-                      ) : (
-                        <Check className="size-3.5" />
-                      )}
-                    </Button>
-                  </span>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {publish.isPending
-                    ? "Publishing"
-                    : save.isPending
-                      ? "Saving"
-                      : hasDraft
-                        ? "Saved — publish to put it on the panels"
-                        : "All changes saved"}
-                </TooltipContent>
-              </Tooltip>
-
-              <Separator
-                orientation="vertical"
-                className="mx-0.5 !h-5 hidden md:block"
+              <PublishButton
+                label="Publish this dashboard"
+                testId="publish-dashboard"
+                hasDraft={hasDraft}
+                saving={save.isPending}
+                publishing={publish.isPending}
+                draftHint="Saved — publish to put it on the panels"
+                onPublish={() => void publishDashboard()}
               />
+
+              <DockSeparator />
             </>
           ) : null}
 
@@ -767,7 +713,7 @@ export function DashboardEditor({
             )}
             {edit ? "Done" : "Edit"}
           </Button>
-        </motion.div>
+        </Dock>
       </div>
 
       {edit ? (
@@ -798,37 +744,20 @@ export function DashboardEditor({
             onClose={() => setSettingsOpen(false)}
           />
 
-          <Dialog open={discardOpen} onOpenChange={setDiscardOpen}>
-            <DialogContent>
-              <DialogHeader>
-                <DialogTitle>Discard the unpublished changes?</DialogTitle>
-                <DialogDescription>
-                  The dashboard goes back to what the panels are showing. What
-                  you edited since is dropped.
-                </DialogDescription>
-              </DialogHeader>
-              <DialogFooter>
-                <Button variant="outline" onClick={() => setDiscardOpen(false)}>
-                  Keep editing
-                </Button>
-                <Button
-                  variant="destructive"
-                  disabled={discard.isPending}
-                  onClick={() => {
-                    setDiscardOpen(false)
-                    // Leaving edit mode remounts the editor, which is how the
-                    // published document replaces the working copy.
-                    discard.mutate(undefined, {
-                      onSuccess: () => setEdit(false),
-                    })
-                  }}
-                  data-testid="confirm-discard-dashboard"
-                >
-                  Discard changes
-                </Button>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
+          <DiscardDraftDialog
+            open={discardOpen}
+            onOpenChange={setDiscardOpen}
+            pending={discard.isPending}
+            testId="confirm-discard-dashboard"
+            // Leaving edit mode remounts the editor, which is how the
+            // published document replaces the working copy.
+            onConfirm={() =>
+              discard.mutate(undefined, { onSuccess: () => setEdit(false) })
+            }
+          >
+            The dashboard goes back to what the panels are showing. What you
+            edited since is dropped.
+          </DiscardDraftDialog>
         </>
       ) : null}
     </LookProvider>