[OPIK-3613] [FE] Add clone capability for online score rules (#4654)

* [OPIK-3613] [FE] Add clone capability for online score rules

* Revision 2: Address PR comments from aadereiko

- Simplify isEdit logic to use mode directly
- Remove redundant isClone check in onSubmit
- Remove unnecessary formScope and formUIRuleType from useEffect dependencies
- Consolidate duplicate dialogs in OnlineEvaluationPage and RulesTab
- Remove clone dialogs from empty state sections

* fix linting

* fix linting

Author: BorisTkachenko

apps/opik-frontend/src/components/pages-shared/automations/AddEditRuleDialog/AddEditRuleDialog.tsx

@@ -148,6 +148,7 @@ type AddEditRuleDialogProps = {
   datasetColumnNames?: string[]; // Optional: dataset column names from playground
   hideScopeSelector?: boolean; // Optional: hide scope selector (e.g., for contexts that only support one scope)
   defaultScope?: EVALUATORS_RULE_SCOPE; // Optional: default scope for new rules
+  mode?: "create" | "edit" | "clone"; // Optional: dialog mode
 };
 
 const AddEditRuleDialog: React.FC<AddEditRuleDialogProps> = ({
@@ -159,6 +160,7 @@ const AddEditRuleDialog: React.FC<AddEditRuleDialogProps> = ({
   datasetColumnNames,
   hideScopeSelector = false,
   defaultScope,
+  mode,
 }) => {
   const isCodeMetricEnabled = useIsFeatureEnabled(
     FeatureToggleKeys.PYTHON_EVALUATOR_ENABLED,
@@ -182,12 +184,19 @@ const AddEditRuleDialog: React.FC<AddEditRuleDialogProps> = ({
     ? getUIRuleScope(defaultRule.type)
     : EVALUATORS_RULE_SCOPE.trace;
 
+  const getInitialRuleName = () => {
+    if (mode === "clone" && defaultRule) {
+      return `${defaultRule.name} (Copy)`;
+    }
+    return defaultRule?.name || "";
+  };
+
   const form: UseFormReturn<EvaluationRuleFormType> = useForm<
     z.infer<typeof EvaluationRuleFormSchema>
   >({
     resolver: zodResolver(EvaluationRuleFormSchema),
     defaultValues: {
-      ruleName: defaultRule?.name || "",
+      ruleName: getInitialRuleName(),
       projectIds:
         defaultRule?.projects?.map((p) => p.project_id) ||
         (projectId ? [projectId] : []),
@@ -249,8 +258,49 @@ const AddEditRuleDialog: React.FC<AddEditRuleDialogProps> = ({
         filters: [],
         llmJudgeDetails: cloneDeep(DEFAULT_LLM_AS_JUDGE_DATA[initialScope]),
       });
+    } else if (open && defaultRule && mode === "clone") {
+      // For clone mode, reset the form with cloned rule data and append " (Copy)" to name
+      const cloneFormData = {
+        ruleName: `${defaultRule.name} (Copy)`,
+        projectIds:
+          defaultRule.projects?.map((p) => p.project_id) ||
+          (projectId ? [projectId] : []),
+        samplingRate: defaultRule.sampling_rate ?? 1,
+        uiType: formUIRuleType,
+        scope: formScope,
+        type: getBackendRuleType(formScope, formUIRuleType),
+        enabled: defaultRule.enabled ?? true,
+        filters: normalizeFilters(
+          defaultRule.filters ?? [],
+          (formScope === EVALUATORS_RULE_SCOPE.thread
+            ? THREAD_FILTER_COLUMNS
+            : formScope === EVALUATORS_RULE_SCOPE.span
+              ? SPAN_FILTER_COLUMNS
+              : TRACE_FILTER_COLUMNS) as ColumnData<unknown>[],
+        ) as Filter[],
+        pythonCodeDetails:
+          defaultRule && isPythonCodeRule(defaultRule)
+            ? (defaultRule.code as PythonCodeObject)
+            : cloneDeep(DEFAULT_PYTHON_CODE_DATA[formScope]),
+        llmJudgeDetails:
+          defaultRule && isLLMJudgeRule(defaultRule)
+            ? convertLLMJudgeObjectToLLMJudgeData(
+                defaultRule.code as LLMJudgeObject,
+              )
+            : cloneDeep(DEFAULT_LLM_AS_JUDGE_DATA[formScope]),
+      };
+      form.reset(cloneFormData as EvaluationRuleFormType);
     }
-  }, [open, defaultRule, projectId, defaultScope, form]);
+  }, [
+    open,
+    defaultRule,
+    projectId,
+    defaultScope,
+    mode,
+    formScope,
+    formUIRuleType,
+    form,
+  ]);
 
   const handleScopeChange = useCallback(
     (value: EVALUATORS_RULE_SCOPE) => {
@@ -290,8 +340,13 @@ const AddEditRuleDialog: React.FC<AddEditRuleDialogProps> = ({
   const { mutate: createMutate } = useRuleCreateMutation();
   const { mutate: updateMutate } = useRuleUpdateMutation();
 
-  const isEdit = Boolean(defaultRule);
-  const title = isEdit ? "Edit rule" : "Create a new rule";
+  const isEdit = mode === "edit";
+  const isClone = mode === "clone";
+  const title = isEdit
+    ? "Edit rule"
+    : isClone
+      ? "Clone evaluation rule"
+      : "Create a new rule";
   const submitText = isEdit ? "Update rule" : "Create rule";
 
   const isCodeMetricEditBlock = !isCodeMetricEnabled && !isLLMJudge && isEdit;

apps/opik-frontend/src/components/pages-shared/automations/RuleRowActionsCell.tsx

@@ -5,7 +5,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
-import { MoreHorizontal, Pencil, Trash } from "lucide-react";
+import { MoreHorizontal, Pencil, Copy, Trash } from "lucide-react";
 import React, { useCallback, useRef, useState } from "react";
 import { EvaluatorsRule } from "@/types/automations";
 import { CellContext } from "@tanstack/react-table";
@@ -15,11 +15,12 @@ import CellWrapper from "@/components/shared/DataTableCells/CellWrapper";
 
 interface RuleRowActionsCellProps {
   openEditDialog: (ruleId: string) => void;
+  openCloneDialog: (ruleId: string) => void;
 }
 
 const RuleRowActionsCell: React.FC<
   RuleRowActionsCellProps & CellContext<EvaluatorsRule, unknown>
-> = ({ openEditDialog, row, column, table }) => {
+> = ({ openEditDialog, openCloneDialog, row, column, table }) => {
   const resetKeyRef = useRef(0);
   const rule = row.original;
   const [open, setOpen] = useState<boolean | number>(false);
@@ -63,6 +64,10 @@ Tip: To pause scoring without deleting, disable the rule.`}
             <Pencil className="mr-2 size-4" />
             Edit
           </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => openCloneDialog(rule.id)}>
+            <Copy className="mr-2 size-4" />
+            Clone
+          </DropdownMenuItem>
           <DropdownMenuItem
             onClick={() => {
               setOpen(1);

apps/opik-frontend/src/components/pages/OnlineEvaluationPage/OnlineEvaluationPage.tsx

@@ -146,6 +146,14 @@ export const OnlineEvaluationPage: React.FC = () => {
     updateType: "replaceIn",
   });
 
+  const [cloneRuleId, setCloneRuleId] = useQueryParam(
+    "cloneRule",
+    StringParam,
+    {
+      updateType: "replaceIn",
+    },
+  );
+
   const [filters = [], setFilters] = useQueryParam(`filters`, JsonParam, {
     updateType: "replaceIn",
   });
@@ -199,7 +207,13 @@ export const OnlineEvaluationPage: React.FC = () => {
   const rows: EvaluatorsRule[] = useMemo(() => data?.content ?? [], [data]);
 
   const editingRule = rows.find((r) => r.id === editRuleId);
-  const isDialogOpen = Boolean(editingRule) || openDialogForCreate;
+  const cloningRule = rows.find((r) => r.id === cloneRuleId);
+  const isDialogOpen =
+    Boolean(editingRule) || Boolean(cloningRule) || openDialogForCreate;
+
+  // Determine which rule to pass and what mode to use
+  const dialogRule = editingRule || cloningRule;
+  const dialogMode = editingRule ? "edit" : cloningRule ? "clone" : "create";
 
   const [selectedColumns, setSelectedColumns] = useLocalStorageState<string[]>(
     SELECTED_COLUMNS_KEY,
@@ -233,6 +247,14 @@ export const OnlineEvaluationPage: React.FC = () => {
     [setEditRuleId],
   );
 
+  const handleOpenCloneDialog = useCallback(
+    (ruleId: string) => {
+      setCloneRuleId(ruleId);
+      resetDialogKeyRef.current = resetDialogKeyRef.current + 1;
+    },
+    [setCloneRuleId],
+  );
+
   const columns = useMemo(() => {
     return [
       generateSelectColumDef<EvaluatorsRule>(),
@@ -264,11 +286,18 @@ export const OnlineEvaluationPage: React.FC = () => {
           <RuleRowActionsCell
             {...props}
             openEditDialog={handleOpenEditDialog}
+            openCloneDialog={handleOpenCloneDialog}
           />
         ),
       }),
     ];
-  }, [columnsOrder, selectedColumns, sortableBy, handleOpenEditDialog]);
+  }, [
+    columnsOrder,
+    selectedColumns,
+    sortableBy,
+    handleOpenEditDialog,
+    handleOpenCloneDialog,
+  ]);
 
   const resizeConfig = useMemo(
     () => ({
@@ -299,9 +328,10 @@ export const OnlineEvaluationPage: React.FC = () => {
       setOpenDialogForCreate(open);
       if (!open) {
         setEditRuleId(undefined);
+        setCloneRuleId(undefined);
       }
     },
-    [setEditRuleId],
+    [setEditRuleId, setCloneRuleId],
   );
 
   // Filter out "type" (Scope), "enabled" (Status), "sampling_rate", and "projects" from filter options
@@ -330,7 +360,8 @@ export const OnlineEvaluationPage: React.FC = () => {
           key={resetDialogKeyRef.current}
           open={isDialogOpen}
           setOpen={handleCloseDialog}
-          rule={editingRule}
+          rule={dialogRule}
+          mode={dialogMode}
         />
       </>
     );
@@ -403,7 +434,8 @@ export const OnlineEvaluationPage: React.FC = () => {
         key={resetDialogKeyRef.current}
         open={isDialogOpen}
         setOpen={handleCloseDialog}
-        rule={editingRule}
+        rule={dialogRule}
+        mode={dialogMode}
       />
     </div>
   );

apps/opik-frontend/src/components/pages/TracesPage/RulesTab/RulesTab.tsx

@@ -132,6 +132,14 @@ export const RulesTab: React.FC<RulesTabProps> = ({ projectId }) => {
     updateType: "replaceIn",
   });
 
+  const [cloneRuleId, setCloneRuleId] = useQueryParam(
+    "cloneRule",
+    StringParam,
+    {
+      updateType: "replaceIn",
+    },
+  );
+
   const [page = 1, setPage] = useQueryParam("page", NumberParam, {
     updateType: "replaceIn",
   });
@@ -166,7 +174,13 @@ export const RulesTab: React.FC<RulesTabProps> = ({ projectId }) => {
   const rows: EvaluatorsRule[] = useMemo(() => data?.content ?? [], [data]);
 
   const editingRule = rows.find((r) => r.id === editRuleId);
-  const isDialogOpen = Boolean(editingRule) || openDialogForCreate;
+  const cloningRule = rows.find((r) => r.id === cloneRuleId);
+  const isDialogOpen =
+    Boolean(editingRule) || Boolean(cloningRule) || openDialogForCreate;
+
+  // Determine which rule to pass and what mode to use
+  const dialogRule = editingRule || cloningRule;
+  const dialogMode = editingRule ? "edit" : cloningRule ? "clone" : "create";
 
   const [selectedColumns, setSelectedColumns] = useLocalStorageState<string[]>(
     SELECTED_COLUMNS_KEY,
@@ -200,6 +214,14 @@ export const RulesTab: React.FC<RulesTabProps> = ({ projectId }) => {
     [setEditRuleId],
   );
 
+  const handleOpenCloneDialog = useCallback(
+    (ruleId: string) => {
+      setCloneRuleId(ruleId);
+      resetDialogKeyRef.current = resetDialogKeyRef.current + 1;
+    },
+    [setCloneRuleId],
+  );
+
   const columns = useMemo(() => {
     return [
       generateSelectColumDef<EvaluatorsRule>(),
@@ -229,11 +251,17 @@ export const RulesTab: React.FC<RulesTabProps> = ({ projectId }) => {
           <RuleRowActionsCell
             {...props}
             openEditDialog={handleOpenEditDialog}
+            openCloneDialog={handleOpenCloneDialog}
           />
         ),
       }),
     ];
-  }, [columnsOrder, selectedColumns, handleOpenEditDialog]);
+  }, [
+    columnsOrder,
+    selectedColumns,
+    handleOpenEditDialog,
+    handleOpenCloneDialog,
+  ]);
 
   const resizeConfig = useMemo(
     () => ({
@@ -254,9 +282,10 @@ export const RulesTab: React.FC<RulesTabProps> = ({ projectId }) => {
       setOpenDialogForCreate(open);
       if (!open) {
         setEditRuleId(undefined);
+        setCloneRuleId(undefined);
       }
     },
-    [setEditRuleId],
+    [setEditRuleId, setCloneRuleId],
   );
 
   if (isPending) {
@@ -277,7 +306,8 @@ export const RulesTab: React.FC<RulesTabProps> = ({ projectId }) => {
           open={isDialogOpen}
           projectId={projectId}
           setOpen={handleCloseDialog}
-          rule={editingRule}
+          rule={dialogRule}
+          mode={dialogMode}
         />
       </>
     );
@@ -352,7 +382,8 @@ export const RulesTab: React.FC<RulesTabProps> = ({ projectId }) => {
         open={isDialogOpen}
         projectId={projectId}
         setOpen={handleCloseDialog}
-        rule={editingRule}
+        rule={dialogRule}
+        mode={dialogMode}
       />
     </>
   );