Added a title widget type and the ability to add them

matt-aitken · matt-aitken · commit c954ae434b1d · 2026-02-09T16:39:13.000Z
diff --git a/apps/webapp/app/components/metrics/QueryWidget.tsx b/apps/webapp/app/components/metrics/QueryWidget.tsx
@@ -105,6 +105,9 @@ export const QueryWidgetConfig = z.discriminatedUnion("type", [
     type: z.literal("bignumber"),
     ...bigNumberConfigOptions,
   }),
+  z.object({
+    type: z.literal("title"),
+  }),
 ]);
 
 export type QueryWidgetConfig = z.infer<typeof QueryWidgetConfig>;
@@ -394,6 +397,10 @@ function QueryWidgetBody({
         </>
       );
     }
+    case "title": {
+      // Title widgets are rendered by TitleWidget, not QueryWidget
+      return null;
+    }
     default: {
       assertNever(type);
     }
diff --git a/apps/webapp/app/components/metrics/TitleWidget.tsx b/apps/webapp/app/components/metrics/TitleWidget.tsx
@@ -0,0 +1,126 @@
+import { useState } from "react";
+import { PencilIcon, TrashIcon } from "@heroicons/react/20/solid";
+import { cn } from "~/utils/cn";
+import { Button } from "../primitives/Buttons";
+import {
+  Popover,
+  PopoverContent,
+  PopoverMenuItem,
+  PopoverVerticalEllipseTrigger,
+} from "../primitives/Popover";
+import { Dialog, DialogContent, DialogFooter, DialogHeader } from "../primitives/Dialog";
+import { DialogClose } from "@radix-ui/react-dialog";
+import { Input } from "../primitives/Input";
+import { InputGroup } from "../primitives/InputGroup";
+import { Label } from "../primitives/Label";
+
+export type TitleWidgetProps = {
+  title: string;
+  isDraggable?: boolean;
+  isResizing?: boolean;
+  /** Callback when rename is clicked. Receives the new title. */
+  onRename?: (newTitle: string) => void;
+  /** Callback when delete is clicked. */
+  onDelete?: () => void;
+};
+
+export function TitleWidget({
+  title,
+  isDraggable,
+  isResizing,
+  onRename,
+  onDelete,
+}: TitleWidgetProps) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
+  const [renameValue, setRenameValue] = useState(title);
+
+  const hasMenu = onRename || onDelete;
+
+  return (
+    <div className="h-full">
+      <div
+        className={cn(
+          "group flex h-full items-center gap-2 rounded-lg border border-grid-bright bg-background-bright px-4",
+          isDraggable && "drag-handle cursor-grab active:cursor-grabbing",
+          isResizing && "select-none"
+        )}
+      >
+        <span className="min-w-0 flex-1 truncate text-lg font-medium text-text-bright">
+          {title}
+        </span>
+        {hasMenu && (
+          <div className="flex-shrink-0 opacity-0 transition-opacity group-hover:opacity-100">
+            <Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+              <PopoverVerticalEllipseTrigger isOpen={isMenuOpen} />
+              <PopoverContent align="end" className="p-0">
+                <div className="flex flex-col gap-1 p-1">
+                  {onRename && (
+                    <PopoverMenuItem
+                      icon={PencilIcon}
+                      title="Rename"
+                      onClick={() => {
+                        setRenameValue(title);
+                        setIsRenameDialogOpen(true);
+                        setIsMenuOpen(false);
+                      }}
+                    />
+                  )}
+                  {onDelete && (
+                    <PopoverMenuItem
+                      icon={TrashIcon}
+                      title="Delete"
+                      leadingIconClassName="text-error"
+                      className="text-error hover:!bg-error/10"
+                      onClick={() => {
+                        onDelete();
+                        setIsMenuOpen(false);
+                      }}
+                    />
+                  )}
+                </div>
+              </PopoverContent>
+            </Popover>
+          </div>
+        )}
+      </div>
+
+      {/* Rename Dialog */}
+      {onRename && (
+        <Dialog open={isRenameDialogOpen} onOpenChange={setIsRenameDialogOpen}>
+          <DialogContent className="sm:max-w-md">
+            <DialogHeader>Rename title</DialogHeader>
+            <form
+              className="space-y-4 pt-3"
+              onSubmit={(e) => {
+                e.preventDefault();
+                if (renameValue.trim()) {
+                  onRename(renameValue.trim());
+                  setIsRenameDialogOpen(false);
+                }
+              }}
+            >
+              <InputGroup>
+                <Label>Title</Label>
+                <Input
+                  value={renameValue}
+                  onChange={(e) => setRenameValue(e.target.value)}
+                  placeholder="Section title"
+                  autoFocus
+                />
+              </InputGroup>
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button variant="tertiary/medium">Cancel</Button>
+                </DialogClose>
+                <Button type="submit" variant="primary/medium" disabled={!renameValue.trim()}>
+                  Save
+                </Button>
+              </DialogFooter>
+            </form>
+          </DialogContent>
+        </Dialog>
+      )}
+    </div>
+  );
+}
diff --git a/apps/webapp/app/hooks/useDashboardEditor.ts b/apps/webapp/app/hooks/useDashboardEditor.ts
@@ -329,10 +329,15 @@ export function useDashboardEditor({
   // Action handlers
   // -------------------------------------------------------------------------
 
+  // Count only non-title widgets for limit checks (title widgets are free)
+  const countedWidgets = Object.values(state.widgets).filter(
+    (w) => w.display.type !== "title"
+  ).length;
+
   const addWidget = useCallback(
     (title: string, query: string, config: QueryWidgetConfig) => {
-      // Guard: check widget limit
-      if (widgetLimit !== undefined && Object.keys(state.widgets).length >= widgetLimit) {
+      // Guard: check widget limit (title widgets don't count)
+      if (widgetLimit !== undefined && countedWidgets >= widgetLimit) {
         onWidgetLimitReached?.();
         return;
       }
@@ -352,7 +357,29 @@ export function useDashboardEditor({
         config: JSON.stringify(config),
       });
     },
-    [state.layout, state.widgets, widgetLimit, onWidgetLimitReached, queueWidgetSync]
+    [state.layout, countedWidgets, widgetLimit, onWidgetLimitReached, queueWidgetSync]
+  );
+
+  const addTitleWidget = useCallback(
+    (title: string) => {
+      const id = nanoid(8);
+      const maxBottom = Math.max(0, ...state.layout.map((l) => l.y + l.h));
+      // Title widgets are fixed at h=2 and full width
+      const layoutItem: LayoutItem = { i: id, x: 0, y: maxBottom, w: 12, h: 2 };
+      const config: QueryWidgetConfig = { type: "title" };
+      const widget: Widget = { title, query: "", display: config };
+
+      // Update local state immediately
+      dispatch({ type: "ADD_WIDGET", payload: { id, widget, layoutItem } });
+
+      // Queue sync to server (processed sequentially)
+      queueWidgetSync("add", {
+        title,
+        query: "",
+        config: JSON.stringify(config),
+      });
+    },
+    [state.layout, queueWidgetSync]
   );
 
   const updateWidget = useCallback(
@@ -386,8 +413,8 @@ export function useDashboardEditor({
 
   const duplicateWidget = useCallback(
     (widgetId: string) => {
-      // Guard: check widget limit
-      if (widgetLimit !== undefined && Object.keys(state.widgets).length >= widgetLimit) {
+      // Guard: check widget limit (title widgets don't count)
+      if (widgetLimit !== undefined && countedWidgets >= widgetLimit) {
         onWidgetLimitReached?.();
         return;
       }
@@ -402,7 +429,7 @@ export function useDashboardEditor({
       // This is fine since we're optimistic - the server state will be consistent
       queueWidgetSync("duplicate", { widgetId });
     },
-    [state.widgets, widgetLimit, onWidgetLimitReached, queueWidgetSync]
+    [countedWidgets, widgetLimit, onWidgetLimitReached, queueWidgetSync]
   );
 
   const renameWidget = useCallback(
@@ -471,6 +498,7 @@ export function useDashboardEditor({
     /** Action dispatchers */
     actions: {
       addWidget,
+      addTitleWidget,
       updateWidget,
       renameWidget,
       deleteWidget,
diff --git a/apps/webapp/app/presenters/v3/MetricDashboardPresenter.server.ts b/apps/webapp/app/presenters/v3/MetricDashboardPresenter.server.ts
@@ -26,13 +26,15 @@ export const LayoutItem = z.object({
   y: z.number(),
   w: z.number(),
   h: z.number(),
+  minH: z.number().optional(),
+  maxH: z.number().optional(),
 });
 
 export type LayoutItem = z.infer<typeof LayoutItem>;
 
 export const Widget = z.object({
   title: z.string(),
-  query: z.string(),
+  query: z.string().default(""),
   display: QueryWidgetConfig,
 });
 
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.metrics.$dashboardKey/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.metrics.$dashboardKey/route.tsx
@@ -15,9 +15,10 @@ import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
 import { z } from "zod";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import ReactGridLayout from "react-grid-layout";
 import { MetricWidget } from "../resources.metric";
+import { TitleWidget } from "~/components/metrics/TitleWidget";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useEnvironment } from "~/hooks/useEnvironment";
@@ -153,6 +154,19 @@ export function MetricDashboard({
     [onLayoutChange]
   );
 
+  // Apply constraints for title widgets: fixed height of 2, allow horizontal resize only
+  const constrainedLayout = useMemo(
+    () =>
+      layout.map((item) => {
+        const widget = widgets[item.i];
+        if (widget?.display.type === "title") {
+          return { ...item, h: 2, minH: 2, maxH: 2 };
+        }
+        return item;
+      }),
+    [layout, widgets]
+  );
+
   return (
     <div className="grid max-h-full grid-rows-[auto_1fr] overflow-hidden">
       <div className="flex items-center gap-1 border-b border-b-grid-bright py-2 pl-2 pr-3">
@@ -173,7 +187,7 @@ export function MetricDashboard({
       >
         {mounted && (
           <ReactGridLayout
-            layout={layout}
+            layout={constrainedLayout}
             width={width}
             gridConfig={{ cols: 12, rowHeight: 30 }}
             resizeConfig={{
@@ -187,38 +201,50 @@ export function MetricDashboard({
           >
             {Object.entries(widgets).map(([key, widget]) => (
               <div key={key}>
-                <MetricWidget
-                  widgetKey={key}
-                  title={widget.title}
-                  query={widget.query}
-                  scope={scope}
-                  period={period ?? null}
-                  from={from ?? null}
-                  to={to ?? null}
-                  taskIdentifiers={tasks.length > 0 ? tasks : undefined}
-                  queues={queues.length > 0 ? queues : undefined}
-                  config={widget.display}
-                  organizationId={organization.id}
-                  projectId={project.id}
-                  environmentId={environment.id}
-                  refreshIntervalMs={60_000}
-                  isResizing={resizingItemId === key}
-                  isDraggable={editable}
-                  onEdit={
-                    onEditWidget
-                      ? (resultData) => onEditWidget(key, { ...widget, resultData })
-                      : undefined
-                  }
-                  onRename={
-                    onRenameWidget ? (newTitle) => onRenameWidget(key, newTitle) : undefined
-                  }
-                  onDelete={onDeleteWidget ? () => onDeleteWidget(key) : undefined}
-                  onDuplicate={
-                    onDuplicateWidget
-                      ? (resultData) => onDuplicateWidget(key, { ...widget, resultData })
-                      : undefined
-                  }
-                />
+                {widget.display.type === "title" ? (
+                  <TitleWidget
+                    title={widget.title}
+                    isDraggable={editable}
+                    isResizing={resizingItemId === key}
+                    onRename={
+                      onRenameWidget ? (newTitle) => onRenameWidget(key, newTitle) : undefined
+                    }
+                    onDelete={onDeleteWidget ? () => onDeleteWidget(key) : undefined}
+                  />
+                ) : (
+                  <MetricWidget
+                    widgetKey={key}
+                    title={widget.title}
+                    query={widget.query}
+                    scope={scope}
+                    period={period ?? null}
+                    from={from ?? null}
+                    to={to ?? null}
+                    taskIdentifiers={tasks.length > 0 ? tasks : undefined}
+                    queues={queues.length > 0 ? queues : undefined}
+                    config={widget.display}
+                    organizationId={organization.id}
+                    projectId={project.id}
+                    environmentId={environment.id}
+                    refreshIntervalMs={60_000}
+                    isResizing={resizingItemId === key}
+                    isDraggable={editable}
+                    onEdit={
+                      onEditWidget
+                        ? (resultData) => onEditWidget(key, { ...widget, resultData })
+                        : undefined
+                    }
+                    onRename={
+                      onRenameWidget ? (newTitle) => onRenameWidget(key, newTitle) : undefined
+                    }
+                    onDelete={onDeleteWidget ? () => onDeleteWidget(key) : undefined}
+                    onDuplicate={
+                      onDuplicateWidget
+                        ? (resultData) => onDuplicateWidget(key, { ...widget, resultData })
+                        : undefined
+                    }
+                  />
+                )}
               </div>
             ))}
           </ReactGridLayout>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.metrics.custom.$dashboardId/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.metrics.custom.$dashboardId/route.tsx
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardId.widgets.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardId.widgets.tsx
