[OPIK-5165] [FE] feat: v2 alerts page — project-scoped API integration (#5913)

andriidudar · claude · web-flow · commit 9c31921d2151 · 2026-03-27T13:23:11.000+01:00
* [OPIK-5165] [FE] feat: v2 alerts page — project-scoped API integration

- Create useProjectAlertsList hook for GET /projects/{projectId}/alerts
- Add project_id to Alert type
- Switch AlertsPage to project-scoped list endpoint
- Pass project_id in alert create/update payload
- Remove ProjectsSelectBox from EventTriggers (project is always active project)
- Remove scope:project trigger config building (BE auto-creates from project_id)
- Remove useProjectsSelectData from AddEditAlertPage
- Scope feedback score names dropdown to alert's project via entityIds
- Add project-alerts cache invalidation to all alert mutation hooks

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;

* fix(ExperimentsTab): pass projectId to experiment hooks in PromptPage

Resolve TODOs left from OPIK-4969 — now that OPIK-4968 landed,
pass activeProjectId to useExperimentsFeedbackScores and
useGroupedExperimentsList in the prompt detail ExperimentsTab.

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;

---------

Co-authored-by: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/apps/opik-frontend/src/api/alerts/useAlertCreateMutation.ts b/apps/opik-frontend/src/api/alerts/useAlertCreateMutation.ts
@@ -34,6 +34,7 @@ const useAlertCreateMutation = () => {
       });
     },
     onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["project-alerts"] });
       return queryClient.invalidateQueries({
         queryKey: [ALERTS_KEY],
       });
diff --git a/apps/opik-frontend/src/api/alerts/useAlertUpdateMutation.ts b/apps/opik-frontend/src/api/alerts/useAlertUpdateMutation.ts
@@ -37,6 +37,7 @@ const useAlertUpdateMutation = () => {
       });
     },
     onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["project-alerts"] });
       return queryClient.invalidateQueries({
         queryKey: [ALERTS_KEY],
       });
diff --git a/apps/opik-frontend/src/api/alerts/useAlertsBatchDeleteMutation.ts b/apps/opik-frontend/src/api/alerts/useAlertsBatchDeleteMutation.ts
@@ -32,6 +32,7 @@ const useAlertsBatchDeleteMutation = () => {
       });
     },
     onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["project-alerts"] });
       return queryClient.invalidateQueries({
         queryKey: [ALERTS_KEY],
       });
diff --git a/apps/opik-frontend/src/api/alerts/useProjectAlertsList.ts b/apps/opik-frontend/src/api/alerts/useProjectAlertsList.ts
@@ -0,0 +1,57 @@
+import { QueryFunctionContext, useQuery } from "@tanstack/react-query";
+import api, { PROJECTS_REST_ENDPOINT, QueryConfig } from "@/api/api";
+import { AlertsListResponse } from "@/types/alerts";
+import { Sorting } from "@/types/sorting";
+import { Filter } from "@/types/filters";
+import { processSorting } from "@/lib/sorting";
+import { generateSearchByFieldFilters, processFilters } from "@/lib/filters";
+
+type UseProjectAlertsListParams = {
+  projectId: string;
+  search?: string;
+  filters?: Filter[];
+  sorting?: Sorting;
+  page: number;
+  size: number;
+};
+
+const getProjectAlertsList = async (
+  { signal }: QueryFunctionContext,
+  {
+    projectId,
+    search,
+    filters,
+    sorting,
+    size,
+    page,
+  }: UseProjectAlertsListParams,
+) => {
+  const { data } = await api.get<AlertsListResponse>(
+    `${PROJECTS_REST_ENDPOINT}${projectId}/alerts`,
+    {
+      signal,
+      params: {
+        ...processFilters(
+          filters,
+          generateSearchByFieldFilters("name", search),
+        ),
+        ...processSorting(sorting),
+        size,
+        page,
+      },
+    },
+  );
+
+  return data;
+};
+
+export default function useProjectAlertsList(
+  params: UseProjectAlertsListParams,
+  options?: QueryConfig<AlertsListResponse>,
+) {
+  return useQuery({
+    queryKey: ["project-alerts", params],
+    queryFn: (context) => getProjectAlertsList(context, params),
+    ...options,
+  });
+}
diff --git a/apps/opik-frontend/src/types/alerts.ts b/apps/opik-frontend/src/types/alerts.ts
@@ -65,6 +65,7 @@ export interface AlertMetadata {
 export interface Alert {
   id?: string;
   name: string;
+  project_id?: string;
   enabled: boolean;
   alert_type?: ALERT_TYPE;
   metadata?: AlertMetadata;
diff --git a/apps/opik-frontend/src/v2/layout/SideBar/ProjectSelector/ProjectSelector.tsx b/apps/opik-frontend/src/v2/layout/SideBar/ProjectSelector/ProjectSelector.tsx
@@ -68,7 +68,6 @@ const ProjectSelector: React.FC = () => {
 
   const handleSelect = useCallback(
     (projectId: string) => {
-      setActiveProject(workspaceName, projectId);
       setOpen(false);
       setSearch("");
       navigate({
diff --git a/apps/opik-frontend/src/v2/pages/AlertsPage/AddEditAlertPage/AddEditAlertPage.tsx b/apps/opik-frontend/src/v2/pages/AlertsPage/AddEditAlertPage/AddEditAlertPage.tsx
@@ -1,10 +1,9 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useEffect } from "react";
 import { useParams } from "@tanstack/react-router";
 import Loader from "@/shared/Loader/Loader";
 import useAlertById from "@/api/alerts/useAlertById";
 import useBreadcrumbsStore from "@/store/BreadcrumbsStore";
 import AlertForm from "./AlertForm";
-import { useProjectsSelectData } from "@/v2/pages-shared/automations/ProjectsSelectBox";
 
 const AddEditAlertPage: React.FunctionComponent = () => {
   const { alertId } = useParams({ strict: false });
@@ -17,23 +16,17 @@ const AddEditAlertPage: React.FunctionComponent = () => {
     { enabled: isEdit },
   );
 
-  const { projects, isLoading } = useProjectsSelectData({});
-
   useEffect(() => {
     if (isEdit && alert?.name) {
       setBreadcrumbParam("alertId", alertId!, alert.name);
     }
   }, [isEdit, alertId, alert?.name, setBreadcrumbParam]);
 
-  const projectIds = useMemo(() => projects.map((p) => p.id), [projects]);
-
-  if ((isEdit && isPending) || isLoading) {
+  if (isEdit && isPending) {
     return <Loader />;
   }
 
-  return (
-    <AlertForm alert={isEdit ? alert : undefined} projectsIds={projectIds} />
-  );
+  return <AlertForm alert={isEdit ? alert : undefined} />;
 };
 
 export default AddEditAlertPage;
diff --git a/apps/opik-frontend/src/v2/pages/AlertsPage/AddEditAlertPage/AlertForm.tsx b/apps/opik-frontend/src/v2/pages/AlertsPage/AddEditAlertPage/AlertForm.tsx
@@ -31,13 +31,9 @@ import {
 
 type AlertFormProps = {
   alert?: Alert;
-  projectsIds: string[];
 };
 
-const AlertForm: React.FunctionComponent<AlertFormProps> = ({
-  alert,
-  projectsIds,
-}) => {
+const AlertForm: React.FunctionComponent<AlertFormProps> = ({ alert }) => {
   const navigate = useNavigate();
   const workspaceName = useAppStore((state) => state.activeWorkspaceName);
   const activeProjectId = useActiveProjectId();
@@ -65,7 +61,7 @@ const AlertForm: React.FunctionComponent<AlertFormProps> = ({
             value,
           }))
         : [],
-      triggers: alertTriggersToFormTriggers(alert?.triggers ?? [], projectsIds),
+      triggers: alertTriggersToFormTriggers(alert?.triggers ?? []),
     },
   });
 
@@ -76,6 +72,7 @@ const AlertForm: React.FunctionComponent<AlertFormProps> = ({
       name: formData.name.trim(),
       enabled: formData.enabled,
       alert_type: formData.alertType,
+      project_id: activeProjectId ?? undefined,
       metadata: {
         ...alert?.metadata,
         base_url: buildFullBaseUrl(),
@@ -99,9 +96,9 @@ const AlertForm: React.FunctionComponent<AlertFormProps> = ({
               )
             : undefined,
       },
-      triggers: formTriggersToAlertTriggers(formData.triggers, projectsIds),
+      triggers: formTriggersToAlertTriggers(formData.triggers),
     };
-  }, [form, projectsIds, alert?.metadata]);
+  }, [form, activeProjectId, alert?.metadata]);
 
   const handleNavigateBack = useCallback(() => {
     navigate({
@@ -239,7 +236,10 @@ const AlertForm: React.FunctionComponent<AlertFormProps> = ({
 
               <WebhookSettings form={form} />
 
-              <EventTriggers form={form} projectsIds={projectsIds} />
+              <EventTriggers
+                form={form}
+                projectId={alert?.project_id || activeProjectId!}
+              />
 
               <Separator className="lg:hidden" />
 
diff --git a/apps/opik-frontend/src/v2/pages/AlertsPage/AddEditAlertPage/EventTriggers.tsx b/apps/opik-frontend/src/v2/pages/AlertsPage/AddEditAlertPage/EventTriggers.tsx
@@ -19,7 +19,6 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/ui/popover";
 import { Separator } from "@/ui/separator";
 import { Input } from "@/ui/input";
 import SelectBox from "@/shared/SelectBox/SelectBox";
-import ProjectsSelectBox from "@/v2/pages-shared/automations/ProjectsSelectBox";
 import { DropdownOption } from "@/types/shared";
 import { AlertFormType } from "./schema";
 import { TRIGGER_CONFIG } from "./helpers";
@@ -33,7 +32,7 @@ import FeedbackScoreConditions, {
 
 type EventTriggersProps = {
   form: UseFormReturn<AlertFormType>;
-  projectsIds: string[];
+  projectId: string;
 };
 
 const WINDOW_OPTIONS: DropdownOption<string>[] = [
@@ -77,7 +76,7 @@ function getThresholdPlaceholder(eventType: ALERT_EVENT_TYPE): string {
 
 const EventTriggers: React.FunctionComponent<EventTriggersProps> = ({
   form,
-  projectsIds,
+  projectId,
 }) => {
   const triggersError = form.formState.errors.triggers;
   const isGuardrailsEnabled = useIsFeatureEnabled(
@@ -103,7 +102,6 @@ const EventTriggers: React.FunctionComponent<EventTriggersProps> = ({
 
       append({
         eventType,
-        projectIds: projectsIds,
         ...(isFeedbackScoreTrigger
           ? {
               conditions: [DEFAULT_FEEDBACK_SCORE_CONDITION],
@@ -202,6 +200,7 @@ const EventTriggers: React.FunctionComponent<EventTriggersProps> = ({
         form={form}
         triggerIndex={index}
         eventType={eventType}
+        projectId={projectId}
       />
     );
   };
@@ -333,27 +332,6 @@ const EventTriggers: React.FunctionComponent<EventTriggersProps> = ({
                             </Label>
                             <Description>{config.description}</Description>
                           </div>
-
-                          {config.hasScope && (
-                            <FormField
-                              control={form.control}
-                              name={
-                                `triggers.${index}.projectIds` as Path<AlertFormType>
-                              }
-                              render={({ field }) => (
-                                <FormItem className="justify-center">
-                                  <ProjectsSelectBox
-                                    value={field.value as string[]}
-                                    onValueChange={field.onChange}
-                                    multiselect={true}
-                                    className="h-8 w-40"
-                                    showSelectAll={true}
-                                    minWidth={204}
-                                  />
-                                </FormItem>
-                              )}
-                            />
-                          )}
                         </div>
                         {isThresholdTrigger &&
                           renderThresholdConfig(index, field.eventType)}
diff --git a/apps/opik-frontend/src/v2/pages/AlertsPage/AddEditAlertPage/FeedbackScoreConditions.tsx b/apps/opik-frontend/src/v2/pages/AlertsPage/AddEditAlertPage/FeedbackScoreConditions.tsx
@@ -20,6 +20,7 @@ type FeedbackScoreConditionsProps = {
   form: UseFormReturn<AlertFormType>;
   triggerIndex: number;
   eventType: ALERT_EVENT_TYPE;
+  projectId: string;
 };
 
 export const DEFAULT_FEEDBACK_SCORE_CONDITION: FeedbackScoreConditionType = {
@@ -51,6 +52,7 @@ const FeedbackScoreConditions: React.FC<FeedbackScoreConditionsProps> = ({
   form,
   triggerIndex,
   eventType,
+  projectId,
 }) => {
   const conditionsFieldArray = useFieldArray({
     control: form.control,
@@ -141,6 +143,7 @@ const FeedbackScoreConditions: React.FC<FeedbackScoreConditionsProps> = ({
                             value={field.value as string}
                             onChange={field.onChange}
                             scoreSource={scoreSource}
+                            entityIds={[projectId]}
                             multiselect={false}
                             className={cn("h-8 rounded-r-none", {
                               "border-destructive": Boolean(
diff --git a/apps/opik-frontend/src/v2/pages/AlertsPage/AddEditAlertPage/helpers.ts b/apps/opik-frontend/src/v2/pages/AlertsPage/AddEditAlertPage/helpers.ts
@@ -98,30 +98,6 @@ export const TRIGGER_CONFIG: Record<ALERT_EVENT_TYPE, TriggerConfig> = {
   },
 };
 
-const getProjectIdsFromTriggerConfigs = (
-  triggerConfigs?: AlertTriggerConfig[],
-): string[] => {
-  const projectConfig = triggerConfigs?.find(
-    (config) => config.type === ALERT_TRIGGER_CONFIG_TYPE["scope:project"],
-  );
-
-  if (projectConfig) {
-    const projectIds = projectConfig.config_value?.project_ids;
-    if (!projectIds || projectIds.trim() === "") {
-      return [];
-    }
-    try {
-      // Parse JSON array format
-      return JSON.parse(projectIds);
-    } catch {
-      // Fallback to comma-separated format for backwards compatibility
-      return projectIds.split(",");
-    }
-  }
-
-  return [];
-};
-
 const getThresholdFromTriggerConfigs = (
   configType: ALERT_TRIGGER_CONFIG_TYPE,
   triggerConfigs?: AlertTriggerConfig[],
@@ -168,21 +144,6 @@ const getAllThresholdConditionsFromTriggerConfigs = (
   return conditions;
 };
 
-const createProjectScopeTriggerConfig = (
-  projectIds: string[],
-): AlertTriggerConfig[] => {
-  if (projectIds.length === 0) return [];
-
-  return [
-    {
-      type: ALERT_TRIGGER_CONFIG_TYPE["scope:project"],
-      config_value: {
-        project_ids: JSON.stringify(projectIds),
-      },
-    },
-  ];
-};
-
 const createThresholdTriggerConfig = (
   configType: ALERT_TRIGGER_CONFIG_TYPE,
   threshold?: string,
@@ -215,15 +176,10 @@ const createThresholdTriggerConfig = (
 
 export const alertTriggersToFormTriggers = (
   triggers: AlertTrigger[],
-  allProjectIds: string[],
 ): TriggerFormType[] => {
   if (!triggers || triggers.length === 0) return [];
 
   return triggers.map((trigger) => {
-    const triggerProjectIds = getProjectIdsFromTriggerConfigs(
-      trigger.trigger_configs,
-    );
-
     // Extract threshold and window for cost/latency/errors triggers
     let thresholdData = {};
     if (trigger.event_type === ALERT_EVENT_TYPE.trace_cost) {
@@ -257,8 +213,6 @@ export const alertTriggersToFormTriggers = (
 
     return {
       eventType: trigger.event_type,
-      projectIds:
-        triggerProjectIds.length > 0 ? triggerProjectIds : allProjectIds,
       ...thresholdData,
       ...(conditions.length > 0 ? { conditions } : {}),
     };
@@ -267,16 +221,10 @@ export const alertTriggersToFormTriggers = (
 
 export const formTriggersToAlertTriggers = (
   triggers: TriggerFormType[],
-  allProjectIds: string[],
 ): AlertTrigger[] => {
   return triggers.map((trigger) => {
     const configs: AlertTriggerConfig[] = [];
 
-    // Add project scope config if needed
-    if (trigger.projectIds.length !== allProjectIds.length) {
-      configs.push(...createProjectScopeTriggerConfig(trigger.projectIds));
-    }
-
     // Add threshold config for cost/latency/errors triggers
     if (trigger.eventType === ALERT_EVENT_TYPE.trace_cost) {
       configs.push(
diff --git a/apps/opik-frontend/src/v2/pages/AlertsPage/AddEditAlertPage/schema.ts b/apps/opik-frontend/src/v2/pages/AlertsPage/AddEditAlertPage/schema.ts
@@ -16,7 +16,6 @@ export const FeedbackScoreConditionSchema = z.object({
 export const TriggerSchema = z
   .object({
     eventType: z.nativeEnum(ALERT_EVENT_TYPE),
-    projectIds: z.array(z.string()).default([]),
     threshold: z.string().optional(),
     window: z.string().optional(),
     name: z.string().optional(), // Feedback score name (deprecated, use conditions)
diff --git a/apps/opik-frontend/src/v2/pages/AlertsPage/AlertsPage.tsx b/apps/opik-frontend/src/v2/pages/AlertsPage/AlertsPage.tsx
diff --git a/apps/opik-frontend/src/v2/pages/PromptPage/ExperimentsTab/ExperimentsTab.tsx b/apps/opik-frontend/src/v2/pages/PromptPage/ExperimentsTab/ExperimentsTab.tsx
