[OPIK-3506] [UX] Update AddEditCloneDashboardDialog footer UX: conditionally render "Cancel" button on DETAILS step (#4513)

1. Fixed metric type naming consistency: Updated all metric labels to match
   between dropdown and widget titles:
   - "Trace feedback scores" → "Trace metrics" (both places)
   - "Trace count" → "Number of traces" (both places)
   - "Thread feedback scores" → "Thread metrics" (both places)
   - "Thread count" → "Number of threads" (both places)

2. Added tooltips to widget name and description: When text is truncated,
   users can now hover to see the full content

3. Fixed Reset button behavior: Clicking Reset now closes edit mode immediately
   instead of keeping the input active

4. Improved group title clarity: Changed "by X" to "grouped by X" in experiment
   widgets for better readability (e.g., "Filtered metrics grouped by Dataset")

Author: andriidudar

apps/opik-frontend/src/components/pages-shared/dashboards/AddEditCloneDashboardDialog/AddEditCloneDashboardDialog.tsx

@@ -369,7 +369,7 @@ const AddEditCloneDashboardDialog: React.FC<
           )}
         </DialogAutoScrollBody>
 
-        <DialogFooter className="flex flex-row justify-between gap-2 border-t pt-4 sm:flex-row sm:justify-between">
+        <DialogFooter className="flex flex-row justify-between gap-2 sm:flex-row sm:justify-between">
           <div>
             {isCreateMode && currentStep === DialogStep.DETAILS && (
               <Button variant="outline" onClick={handleBack}>
@@ -380,11 +380,13 @@ const AddEditCloneDashboardDialog: React.FC<
           </div>
 
           <div className="flex gap-2">
-            <DialogClose asChild>
-              <Button variant="outline" disabled={isPending}>
-                Cancel
-              </Button>
-            </DialogClose>
+            {currentStep === DialogStep.DETAILS && (
+              <DialogClose asChild>
+                <Button variant="outline" disabled={isPending}>
+                  Cancel
+                </Button>
+              </DialogClose>
+            )}
 
             {currentStep === DialogStep.DETAILS && (
               <Button type="submit" form="dashboard-form" disabled={isPending}>

apps/opik-frontend/src/components/shared/Dashboard/widgets/ExperimentsFeedbackScoresWidget/helpers.ts

@@ -79,7 +79,7 @@ const buildFilterAndGroupTitle = (
   }
 
   if (hasGroups && groupByLabel) {
-    return `${baseLabel} by ${groupByLabel}`;
+    return `${baseLabel} grouped by ${groupByLabel}`;
   }
 
   return baseLabel;

apps/opik-frontend/src/components/shared/Dashboard/widgets/ProjectMetricsWidget/ProjectMetricsEditor.tsx

@@ -54,7 +54,7 @@ import { CHART_TYPE } from "@/constants/chart";
 const METRIC_OPTIONS = [
   {
     value: METRIC_NAME_TYPE.FEEDBACK_SCORES,
-    label: "Trace feedback scores",
+    label: "Trace metrics",
     filterType: "trace" as const,
   },
   {
@@ -94,7 +94,7 @@ const METRIC_OPTIONS = [
   },
   {
     value: METRIC_NAME_TYPE.THREAD_FEEDBACK_SCORES,
-    label: "Thread feedback scores",
+    label: "Thread metrics",
     filterType: "thread" as const,
   },
 ];

apps/opik-frontend/src/components/shared/Dashboard/widgets/ProjectMetricsWidget/helpers.ts

@@ -6,12 +6,12 @@ const DEFAULT_TITLE = "Project metrics";
 
 const METRIC_LABELS: Record<string, string> = {
   [METRIC_NAME_TYPE.FEEDBACK_SCORES]: "Trace metrics",
-  [METRIC_NAME_TYPE.TRACE_COUNT]: "Trace count",
+  [METRIC_NAME_TYPE.TRACE_COUNT]: "Number of traces",
   [METRIC_NAME_TYPE.TRACE_DURATION]: "Trace duration",
   [METRIC_NAME_TYPE.TOKEN_USAGE]: "Token usage",
   [METRIC_NAME_TYPE.COST]: "Estimated cost",
   [METRIC_NAME_TYPE.FAILED_GUARDRAILS]: "Failed guardrails",
-  [METRIC_NAME_TYPE.THREAD_COUNT]: "Thread count",
+  [METRIC_NAME_TYPE.THREAD_COUNT]: "Number of threads",
   [METRIC_NAME_TYPE.THREAD_DURATION]: "Thread duration",
   [METRIC_NAME_TYPE.THREAD_FEEDBACK_SCORES]: "Thread metrics",
 };

apps/opik-frontend/src/components/shared/InlineEditableText/InlineEditableText.tsx

@@ -55,8 +55,10 @@ const InlineEditableText: React.FunctionComponent<InlineEditableTextProps> = ({
   const handleReset = useCallback(() => {
     if (defaultValue !== undefined) {
       setEditValue(defaultValue);
+      onChange("");
+      setIsEditing(false);
     }
-  }, [defaultValue]);
+  }, [defaultValue, onChange]);
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -152,38 +154,40 @@ const InlineEditableText: React.FunctionComponent<InlineEditableTextProps> = ({
 
   // Default/Hover state
   return (
-    <div
-      className={cn(
-        "group/inline-edit flex h-8 cursor-pointer items-center gap-1 overflow-hidden rounded-md transition-colors hover:bg-muted",
-        className,
-      )}
-      onClick={handleStartEdit}
-      role="button"
-      tabIndex={0}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          handleStartEdit();
-        }
-      }}
-    >
-      <div className="min-w-0 flex-1 pl-2">
-        <span
-          className={cn(
-            "block truncate text-sm leading-5",
-            isTitle ? "font-medium text-foreground" : "text-foreground",
-            !value && "text-muted-slate",
-          )}
-        >
-          {displayValue}
-        </span>
-      </div>
-      <div className="hidden h-full items-center pr-2 group-hover/inline-edit:flex">
-        <div className="flex size-7 items-center justify-center rounded">
-          <Pencil className="size-3.5 text-foreground" />
+    <TooltipWrapper content={displayValue} side="top">
+      <div
+        className={cn(
+          "group/inline-edit flex h-8 cursor-pointer items-center gap-1 overflow-hidden rounded-md transition-colors hover:bg-muted",
+          className,
+        )}
+        onClick={handleStartEdit}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleStartEdit();
+          }
+        }}
+      >
+        <div className="min-w-0 flex-1 pl-2">
+          <span
+            className={cn(
+              "block truncate text-sm leading-5",
+              isTitle ? "font-medium text-foreground" : "text-foreground",
+              !value && "text-muted-slate",
+            )}
+          >
+            {displayValue}
+          </span>
+        </div>
+        <div className="hidden h-full items-center pr-2 group-hover/inline-edit:flex">
+          <div className="flex size-7 items-center justify-center rounded">
+            <Pencil className="size-3.5 text-foreground" />
+          </div>
         </div>
       </div>
-    </div>
+    </TooltipWrapper>
   );
 };