[OPIK-3506] [FE] Resolve UX feedback for Dashboard beta release (#4484)

* [OPIK-3506] [FE] Update dashboard UX text labels

- Change widget tooltip to "Using the dashboard's default experiment settings"
- Update select experiments description for clarity
- Rename "Global dashboard configuration" to "Dashboard defaults"
- Simplify dashboard defaults description

* Revision 2: Update project widget text labels for consistency

- Change project info message to "Using the dashboard's default project settings"
- Update project selector description to match experiments widget terminology
- Ensures consistent UX language across all dashboard widgets

* Revision 3: Show experiment count instead of names in select

- Display "X experiments" when multiple experiments are selected
- Add tooltip showing all experiment names on hover
- Keep single experiment name display for clarity
- Improves UX by preventing overflow in dashboard creation dialog

* Revision 4: Change Select experiments icon to ListChecks

- Replace ListFilter icon with ListChecks for better clarity
- ListChecks better represents selecting items from a list
- Filter icon remains for Filter and group option

* Revision 7: Clear validation errors when changing template

- Add form.clearErrors() when selecting a new template
- Fixes issue where name field stays red after selecting different template
- Improves UX by resetting validation state on template change

* Revision 8: Update data source terminology for clarity

- Change "Filter and group" to "Filter experiments"
- Change "Select experiments" to "Manual selection"
- Improves UX with clearer, more descriptive terminology

* Revision 9: Improve filter/group section layout

- Add single description above both Filters and Group by sections
- Add hideBorder prop to FiltersAccordionSection and GroupsAccordionSection
- Remove Label wrapper from accordion triggers for cleaner text
- Use hideBorder={true} on GroupsAccordionSection to avoid double borders
- Add mb-2 to description for proper spacing

* Revision 10: Update dashboard select dropdown styling

Author: andriidudar

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

@@ -158,6 +158,8 @@ const AddEditCloneDashboardDialog: React.FC<
       shouldDirty: true,
       shouldTouch: true,
     });
+
+    form.clearErrors();
   };
 
   const handleBack = () => {

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

@@ -50,7 +50,7 @@ const DashboardProjectSettingsButton: React.FC = () => {
 
   return (
     <Popover>
-      <TooltipWrapper content="Global dashboard configuration">
+      <TooltipWrapper content="Dashboard defaults">
         <PopoverTrigger asChild>
           <Button size="icon-sm" variant="outline">
             <Settings className="size-3.5" />
@@ -60,13 +60,10 @@ const DashboardProjectSettingsButton: React.FC = () => {
       <PopoverContent align="end" className="w-80">
         <div className="space-y-4">
           <div>
-            <h3 className="comet-title-s mb-2">
-              Global dashboard configuration
-            </h3>
+            <h3 className="comet-title-s mb-2">Dashboard defaults</h3>
             <Description>
               Set the default project and experiments for all widgets.
-              Individual widgets can override these settings with their own
-              configuration.
+              Individual widgets can override these settings if needed.
             </Description>
           </div>
           <div>

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

@@ -56,14 +56,14 @@ export const SelectItem: React.FC<SelectItemProps> = ({
     return (
       <DropdownMenuItem
         className={cn(
-          "min-h-12 cursor-pointer items-start gap-2 py-2 pl-6",
+          "min-h-12 cursor-pointer items-start gap-2 py-2 pl-8",
           isSelected && "bg-primary-foreground",
         )}
         onSelect={() => onSelect(id)}
       >
         {isSelected && (
           <Check
-            className="absolute left-1 top-2.5 size-3.5 text-foreground"
+            className="absolute left-2 top-2.5 size-3.5 text-muted-slate"
             strokeWidth="3"
           />
         )}
@@ -74,7 +74,7 @@ export const SelectItem: React.FC<SelectItemProps> = ({
           )}
         />
         <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-          <div className="comet-body-s truncate">{name}</div>
+          <div className="comet-body-s truncate text-foreground">{name}</div>
           {description && (
             <TooltipWrapper content={description}>
               <div className="comet-body-xs line-clamp-2 text-muted-foreground">
@@ -91,14 +91,14 @@ export const SelectItem: React.FC<SelectItemProps> = ({
   return (
     <div
       className={cn(
-        "group relative flex min-h-12 cursor-pointer items-start gap-2 rounded-md py-2 pl-6 pr-4 hover:bg-primary-foreground",
+        "group relative flex min-h-12 cursor-pointer items-start gap-2 rounded-md py-2 pl-8 pr-4 hover:bg-primary-foreground",
         isSelected && "bg-primary-foreground",
       )}
       onClick={() => onSelect(id)}
     >
       {isSelected && (
         <Check
-          className="absolute left-1 top-2.5 size-3.5 text-foreground"
+          className="absolute left-2 top-2.5 size-3.5 text-muted-slate"
           strokeWidth="3"
         />
       )}
@@ -109,7 +109,7 @@ export const SelectItem: React.FC<SelectItemProps> = ({
         )}
       />
       <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-        <div className="comet-body-s truncate">{name}</div>
+        <div className="comet-body-s truncate text-foreground">{name}</div>
         {description && (
           <TooltipWrapper content={description}>
             <div className="comet-body-xs line-clamp-2 text-muted-foreground">
@@ -124,7 +124,7 @@ export const SelectItem: React.FC<SelectItemProps> = ({
             <Button
               variant="ghost"
               size="icon-xs"
-              className="mt-0.5 opacity-0 group-hover:opacity-100"
+              className="mt-0.5 text-muted-slate opacity-0 group-hover:opacity-100"
               onClick={(e) => e.stopPropagation()}
             >
               <MoreVertical className="size-4" />
@@ -140,6 +140,7 @@ export const SelectItem: React.FC<SelectItemProps> = ({
                 e.stopPropagation();
                 onEdit?.(dashboard);
               }}
+              className="hover:text-primary"
             >
               <Pencil className="mr-2 size-4" />
               Edit
@@ -159,7 +160,7 @@ export const SelectItem: React.FC<SelectItemProps> = ({
                 e.stopPropagation();
                 onDelete?.(dashboard);
               }}
-              className="text-destructive focus:text-destructive"
+              className="text-destructive focus:bg-transparent focus:text-destructive"
             >
               <Trash2 className="mr-2 size-4" />
               Delete

apps/opik-frontend/src/components/pages-shared/experiments/ExperimentsSelectBox/ExperimentsSelectBox.tsx

@@ -9,6 +9,7 @@ import { DropdownOption } from "@/types/shared";
 import useAppStore from "@/store/AppStore";
 import { Experiment } from "@/types/datasets";
 import { Sorting } from "@/types/sorting";
+import TooltipWrapper from "@/components/shared/TooltipWrapper/TooltipWrapper";
 
 const DEFAULT_LOADED_EXPERIMENT_ITEMS = 1000;
 const MORE_LOADED_EXPERIMENT_ITEMS = 10000;
@@ -159,6 +160,22 @@ const ExperimentsSelectBox: React.FC<ExperimentsSelectBoxProps> = (props) => {
       : experimentOptions;
   }, [experiments, customOptions]);
 
+  const renderExperimentsTitle = useCallback(
+    (selectedOptions: DropdownOption<string>[]) => {
+      const count = selectedOptions.length;
+      if (count === 1) {
+        return <div className="truncate">{selectedOptions[0].label}</div>;
+      }
+      const experimentNames = selectedOptions.map((o) => o.label).join(", ");
+      return (
+        <TooltipWrapper content={experimentNames}>
+          <div className="truncate">{count} experiments</div>
+        </TooltipWrapper>
+      );
+    },
+    [],
+  );
+
   const loadableSelectBoxProps = props.multiselect
     ? {
         options,
@@ -168,6 +185,7 @@ const ExperimentsSelectBox: React.FC<ExperimentsSelectBoxProps> = (props) => {
         multiselect: true as const,
         showSelectAll: props.showSelectAll,
         selectAllLabel: props.selectAllLabel || "All experiments",
+        renderTitle: renderExperimentsTitle,
       }
     : {
         options,

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

@@ -244,7 +244,7 @@ const ExperimentsFeedbackScoresWidget: React.FunctionComponent<
 
   const infoMessage =
     isUsingGlobalExperiments && isSelectExperimentsMode
-      ? "Using global experiment configuration"
+      ? "Using the dashboard's default experiment settings"
       : undefined;
 
   // Limit to first 10 experiments

apps/opik-frontend/src/components/shared/Dashboard/widgets/ExperimentsFeedbackScoresWidget/ExperimentsFeedbackScoresWidgetEditor.tsx

@@ -26,7 +26,7 @@ import FeedbackDefinitionsAndScoresSelectBox, {
   ScoreSource,
 } from "@/components/pages-shared/experiments/FeedbackDefinitionsAndScoresSelectBox/FeedbackDefinitionsAndScoresSelectBox";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
-import { Filter, ListFilter } from "lucide-react";
+import { Filter, ListChecks } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 import { Filters } from "@/types/filters";
@@ -283,19 +283,19 @@ const ExperimentsFeedbackScoresWidgetEditor = forwardRef<
                   >
                     <ToggleGroupItem
                       value={EXPERIMENT_DATA_SOURCE.FILTER_AND_GROUP}
-                      aria-label="Filter and group"
+                      aria-label="Filter experiments"
                       className="gap-1.5"
                     >
                       <Filter className="size-3.5" />
-                      <span>Filter and group</span>
+                      <span>Filter experiments</span>
                     </ToggleGroupItem>
                     <ToggleGroupItem
                       value={EXPERIMENT_DATA_SOURCE.SELECT_EXPERIMENTS}
-                      aria-label="Select experiments"
+                      aria-label="Manual selection"
                       className="gap-1.5"
                     >
-                      <ListFilter className="size-3.5" />
-                      <span>Select experiments</span>
+                      <ListChecks className="size-3.5" />
+                      <span>Manual selection</span>
                     </ToggleGroupItem>
                   </ToggleGroup>
                 </FormControl>
@@ -328,7 +328,7 @@ const ExperimentsFeedbackScoresWidgetEditor = forwardRef<
                 ]);
                 return (
                   <FormItem>
-                    <FormLabel>Select experiments</FormLabel>
+                    <FormLabel>Manual selection</FormLabel>
                     <FormControl>
                       <ExperimentsSelectBox
                         value={field.value || []}
@@ -345,9 +345,9 @@ const ExperimentsFeedbackScoresWidgetEditor = forwardRef<
                       />
                     </FormControl>
                     <Description>
-                      Select experiments for this widget. If not set, the
-                      dashboard&apos;s global experiment configuration will be
-                      used.
+                      Widgets use the dashboard&apos;s experiment settings by
+                      default. You can override them here and select different
+                      experiments.
                     </Description>
                     <FormMessage />
                   </FormItem>

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

@@ -24,6 +24,7 @@ import GroupsAccordionSection, {
 } from "@/components/shared/GroupsAccordionSection/GroupsAccordionSection";
 import DatasetSelectBox from "@/components/pages-shared/experiments/DatasetSelectBox/DatasetSelectBox";
 import ExperimentsPathsAutocomplete from "@/components/pages-shared/experiments/ExperimentsPathsAutocomplete/ExperimentsPathsAutocomplete";
+import { Description } from "@/components/ui/description";
 
 type ExperimentColumnData = {
   id: string;
@@ -167,14 +168,18 @@ const ExperimentWidgetDataSection = <T extends FieldValues>({
       : undefined;
 
   return (
-    <div className={cn("flex flex-col gap-4", className)}>
+    <div className={cn("flex flex-col", className)}>
+      <Description className="mb-2">
+        Add filters to focus on specific experiments and group them by
+        configuration to aggregate feedback scores.
+      </Description>
+
       <FiltersAccordionSection
         columns={EXPERIMENT_DATA_COLUMNS as ColumnData<unknown>[]}
         config={dataConfig}
         filters={filters}
         onChange={setFilters}
         label="Filters"
-        description="Add filters to focus the widget on specific experiments."
         errors={parsedFilterErrors}
       />
 
@@ -184,10 +189,10 @@ const ExperimentWidgetDataSection = <T extends FieldValues>({
         groups={groups}
         onChange={setGroups}
         label="Group by"
-        description="Group experiments by configuration to aggregate feedback scores."
         errors={parsedGroupErrors}
         className="w-full"
         hideSorting
+        hideBorder
       />
     </div>
   );

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

@@ -2,7 +2,6 @@ import React, { useCallback } from "react";
 import { Plus } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
 import { Description } from "@/components/ui/description";
 import { FormErrorSkeleton } from "@/components/ui/form";
 import { cn } from "@/lib/utils";
@@ -34,6 +33,7 @@ type FiltersAccordionSectionProps<TColumnData> = {
   description?: string;
   className?: string;
   errors?: (FilterValidationError | undefined)[];
+  hideBorder?: boolean;
 };
 
 const FiltersAccordionSection = <TColumnData,>({
@@ -45,6 +45,7 @@ const FiltersAccordionSection = <TColumnData,>({
   description = "Add filters",
   className = "",
   errors,
+  hideBorder = false,
 }: FiltersAccordionSectionProps<TColumnData>) => {
   const handleAddFilter = useCallback(() => {
     const newFilter: Filter = {
@@ -58,11 +59,9 @@ const FiltersAccordionSection = <TColumnData,>({
 
   return (
     <Accordion type="single" collapsible className={cn("w-full", className)}>
-      <AccordionItem value="filters" className="border-t">
+      <AccordionItem value="filters" className={hideBorder ? "" : "border-t"}>
         <AccordionTrigger className="py-3 hover:no-underline">
-          <Label className="text-sm font-medium">
-            {label} {filters.length > 0 && `(${filters.length})`}
-          </Label>
+          {label} {filters.length > 0 && `(${filters.length})`}
         </AccordionTrigger>
         <AccordionContent className="flex flex-col gap-4 px-3 pb-3">
           <Description>{description}</Description>

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

@@ -2,7 +2,6 @@ import React, { useCallback } from "react";
 import { Plus } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
 import { Description } from "@/components/ui/description";
 import { FormErrorSkeleton } from "@/components/ui/form";
 import {
@@ -36,6 +35,7 @@ type GroupsAccordionSectionProps<TColumnData> = {
   className?: string;
   errors?: (GroupValidationError | undefined)[];
   hideSorting?: boolean;
+  hideBorder?: boolean;
 };
 
 const GroupsAccordionSection = <TColumnData,>({
@@ -48,6 +48,7 @@ const GroupsAccordionSection = <TColumnData,>({
   className = "",
   errors,
   hideSorting = false,
+  hideBorder = false,
 }: GroupsAccordionSectionProps<TColumnData>) => {
   const handleAddGroup = useCallback(() => {
     if (groups.length >= MAX_GROUP_LEVELS) return;
@@ -65,11 +66,9 @@ const GroupsAccordionSection = <TColumnData,>({
 
   return (
     <Accordion type="single" collapsible className={className}>
-      <AccordionItem value="groups" className="border-t">
+      <AccordionItem value="groups" className={hideBorder ? "" : "border-t"}>
         <AccordionTrigger className="py-3 hover:no-underline">
-          <Label className="text-sm font-medium">
-            {label} {groups.length > 0 && `(${groups.length})`}
-          </Label>
+          {label} {groups.length > 0 && `(${groups.length})`}
         </AccordionTrigger>
         <AccordionContent className="flex flex-col gap-4 px-3 pb-3">
           <Description>{description}</Description>

apps/opik-frontend/src/lib/dashboard/utils.ts

@@ -32,10 +32,11 @@ export const UNSET_PROJECT_OPTION = [
 
 export const UNSET_PROJECT_VALUE = "";
 
-export const GLOBAL_PROJECT_CONFIG_MESSAGE = "Using global project config";
+export const GLOBAL_PROJECT_CONFIG_MESSAGE =
+  "Using the dashboard's default project settings";
 
 export const WIDGET_PROJECT_SELECTOR_DESCRIPTION =
-  "Pick the project for this widget. If not set, the dashboard's global project config will be used.";
+  "Widgets use the dashboard's project settings by default. You can override them here and select a different project.";
 
 export const resolveProjectIdFromConfig = (
   widgetProjectId: string | undefined,