Merge branch 'main' into thiagohora/OPIK-121_allow_multiline_in_datas…

…et_description

apps/opik-frontend/e2e/pages/DatasetItemsPage.ts

@@ -46,12 +46,4 @@ export class DatasetItemsPage {
       .getByRole("button", { name: "Delete dataset item" })
       .click();
   }
-
-  async checkIsExistOnTable(name: string) {
-    await expect(this.table.getRowLocatorByCellText(name)).toBeVisible();
-  }
-
-  async checkIsNotExistOnTable(name: string) {
-    await expect(this.table.getRowLocatorByCellText(name)).not.toBeVisible();
-  }
 }

apps/opik-frontend/e2e/pages/DatasetsPage.ts

@@ -42,12 +42,4 @@ export class DatasetsPage {
     await this.page.getByRole("menuitem", { name: "Delete" }).click();
     await this.page.getByRole("button", { name: "Delete dataset" }).click();
   }
-
-  async checkIsExistOnTable(name: string) {
-    await expect(this.table.getRowLocatorByCellText(name)).toBeVisible();
-  }
-
-  async checkIsNotExistOnTable(name: string) {
-    await expect(this.table.getRowLocatorByCellText(name)).not.toBeVisible();
-  }
 }

apps/opik-frontend/e2e/pages/FeedbackDefinitionsPage.ts

@@ -115,16 +115,6 @@ export class FeedbackDefinitionsPage {
       .click();
   }
 
-  async checkIsExistOnTable(data: FeedbackDefinitionData) {
-    await expect(this.table.getRowLocatorByCellText(data.name)).toBeVisible();
-  }
-
-  async checkIsNotExistOnTable(data: FeedbackDefinitionData) {
-    await expect(
-      this.table.getRowLocatorByCellText(data.name),
-    ).not.toBeVisible();
-  }
-
   async checkNumericValueColumn(data: FeedbackDefinitionData) {
     const cell = this.table
       .getRowLocatorByCellText(data.name)

apps/opik-frontend/e2e/pages/ProjectsPage.ts

@@ -39,12 +39,4 @@ export class ProjectsPage {
     await this.page.getByLabel(`To validation, type "${name}"`).fill(name);
     await this.page.getByRole("button", { name: "Delete project" }).click();
   }
-
-  async checkIsExistOnTable(name: string) {
-    await expect(this.table.getRowLocatorByCellText(name)).toBeVisible();
-  }
-
-  async checkIsNotExistOnTable(name: string) {
-    await expect(this.table.getRowLocatorByCellText(name)).not.toBeVisible();
-  }
 }

apps/opik-frontend/e2e/pages/TracesPage.ts

@@ -2,13 +2,15 @@ import { Locator, Page } from "@playwright/test";
 import { SidePanel } from "@e2e/pages/components/SidePanel";
 import { Table } from "@e2e/pages/components/Table";
 import { Columns } from "@e2e/pages/components/Columns";
+import { Filters } from "@e2e/pages/components/Filters";
 
 export class TracesPage {
   readonly sidebarScores: Locator;
   readonly tableScores: Locator;
   readonly title: Locator;
 
   readonly columns: Columns;
+  readonly filters: Filters;
   readonly sidePanel: SidePanel;
   readonly table: Table;
 
@@ -18,6 +20,7 @@ export class TracesPage {
     this.title = page.getByRole("heading", { name: "Traces" });
 
     this.columns = new Columns(page);
+    this.filters = new Filters(page);
     this.sidePanel = new SidePanel(page, "traces");
     this.table = new Table(page);
   }
@@ -68,7 +71,7 @@ export class TracesPage {
   async setCategoricalScore(name: string, categoryName: string) {
     await this.getScoreValueCell(name)
       .getByRole("radio", { name: categoryName })
-      .click();
+      .click({ position: { y: 0, x: 0 } });
   }
 
   async setNumericalScore(name: string, value: number) {

apps/opik-frontend/e2e/pages/components/Columns.ts

@@ -9,36 +9,40 @@ export class Columns {
     this.button = page.getByRole("button", { name: "Columns" });
   }
 
-  async selectAll() {
+  async open() {
     await this.button.click();
+  }
 
-    const checkboxes = await this.page
-      .getByRole("button")
-      .filter({ has: this.page.locator(`[data-state="unchecked"]`) })
-      .all();
-
-    for (let i = checkboxes.length - 1; i >= 0; i--) {
-      await checkboxes[i].click();
-    }
-
+  async close() {
     await this.page.keyboard.down("Escape");
   }
 
-  async select(column: string) {
-    await this.button.click();
-
-    const checkboxes = await this.page
+  async getCheckboxes(
+    state: "checked" | "unchecked" = "unchecked",
+    column?: string,
+  ) {
+    return await this.page
       .getByRole("button")
       .filter({
-        has: this.page.locator(`[data-state="unchecked"]`),
+        has: this.page.locator(`[data-state="${state}"]`),
         hasText: column,
       })
       .all();
+  }
 
+  async selectAll() {
+    await this.open();
+    const checkboxes = await this.getCheckboxes();
     for (let i = checkboxes.length - 1; i >= 0; i--) {
       await checkboxes[i].click();
     }
+    await this.close();
+  }
 
-    await this.page.keyboard.down("Escape");
+  async select(column: string) {
+    await this.open();
+    const checkboxes = await this.getCheckboxes("unchecked", column);
+    if (checkboxes[0]) await checkboxes[0].click();
+    await this.close();
   }
 }

apps/opik-frontend/e2e/pages/components/Filters.ts

@@ -0,0 +1,96 @@
+import { Locator, Page } from "@playwright/test";
+
+export class Filters {
+  readonly page: Page;
+  readonly button: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.button = page.getByRole("button", { name: "Filters" });
+  }
+
+  async open() {
+    await this.button.click();
+  }
+
+  async close() {
+    await this.page.keyboard.down("Escape");
+  }
+
+  async clearAll() {
+    await this.page.getByRole("button", { name: "Clear all" }).click();
+  }
+
+  async addFilter() {
+    await this.page.getByRole("button", { name: "Add filter" }).click();
+  }
+
+  async selectColumn(column: string) {
+    await this.page.getByTestId("filter-column").click();
+    await this.page.getByLabel(column, { exact: true }).click();
+  }
+
+  async selectOperator(operator: string) {
+    await this.page.getByTestId("filter-operator").click();
+    await this.page.getByLabel(operator, { exact: true }).click();
+  }
+
+  async presetData(column: string, operator: string) {
+    await this.open();
+    await this.clearAll();
+    await this.addFilter();
+    await this.selectColumn(column);
+    await this.selectOperator(operator);
+  }
+
+  async applyStringFilter(column: string, operator: string, value: string) {
+    await this.presetData(column, operator);
+    await this.page.getByTestId("filter-string-input").fill(value);
+    // wait for debounce input update value
+    await this.page.waitForTimeout(500);
+    await this.close();
+  }
+
+  async applyNumberFilter(column: string, operator: string, value: number) {
+    await this.presetData(column, operator);
+    await this.page.getByTestId("filter-number-input").fill(String(value));
+    // wait for debounce input update value
+    await this.page.waitForTimeout(500);
+    await this.close();
+  }
+
+  async applyListFilter(column: string, operator: string, value: string) {
+    await this.presetData(column, operator);
+    await this.page.getByTestId("filter-list-input").fill(value);
+    // wait for debounce input update value
+    await this.page.waitForTimeout(500);
+    await this.close();
+  }
+
+  async applyDictionaryFilter(
+    column: string,
+    operator: string,
+    key: string,
+    value: string,
+  ) {
+    await this.presetData(column, operator);
+    await this.page.getByTestId("filter-dictionary-key-input").fill(key);
+    // wait for debounce input update value
+    await this.page.waitForTimeout(500);
+    await this.page.getByTestId("filter-dictionary-value-input").fill(value);
+    // wait for debounce input update value
+    await this.page.waitForTimeout(500);
+    await this.close();
+  }
+
+  async applyTimeFilter(column: string, operator: string, day: string) {
+    await this.presetData(column, operator);
+    await this.page.getByRole("button", { name: "Pick a date" }).click();
+    await this.page.getByRole("gridcell", { name: day, exact: true }).click();
+    // close date piker
+    await this.page.keyboard.down("Escape");
+    // delay to allow close datepicker
+    await this.page.waitForTimeout(200);
+    await this.close();
+  }
+}

apps/opik-frontend/e2e/pages/components/Table.ts

@@ -31,4 +31,12 @@ export class Table {
       .getByRole("button", { name: "Actions menu" })
       .click();
   }
+
+  async checkIsExist(name: string) {
+    await expect(this.getRowLocatorByCellText(name)).toBeVisible();
+  }
+
+  async checkIsNotExist(name: string) {
+    await expect(this.getRowLocatorByCellText(name)).not.toBeVisible();
+  }
 }

apps/opik-frontend/e2e/test-data/trace.ts

@@ -29,4 +29,6 @@ export const TRACE_2 = {
   expected_output: {
     response: "Buenos días, ¿cómo estás?",
   },
+  start_time: "2024-10-02T12:06:16.346Z",
+  end_time: "2024-10-02T12:06:28.846Z",
 };

apps/opik-frontend/e2e/tests/datasets/dataset-items-page.spec.ts

@@ -16,10 +16,10 @@ test.describe("Dataset items page", () => {
 
     const input = `{ "prompt": "${DATASET_ITEM_1.input.prompt}" }`;
 
-    await datasetItemsPage.checkIsExistOnTable(input);
+    await datasetItemsPage.table.checkIsExist(input);
 
     await datasetItemsPage.deleteDatasetItem(input);
-    await datasetItemsPage.checkIsNotExistOnTable(input);
+    await datasetItemsPage.table.checkIsNotExist(input);
   });
 
   test("Check open sidebar", async ({

apps/opik-frontend/e2e/tests/datasets/datasets-page.spec.ts

@@ -32,9 +32,9 @@ test.describe("Datasets page", () => {
     await datasetsPage.goto();
 
     await datasetsPage.addDataset(DATASET_1.name, DATASET_1.description);
-    await datasetsPage.checkIsExistOnTable(DATASET_1.name);
+    await datasetsPage.table.checkIsExist(DATASET_1.name);
 
     await datasetsPage.deleteDataset(DATASET_1.name);
-    await datasetsPage.checkIsNotExistOnTable(DATASET_1.name);
+    await datasetsPage.table.checkIsNotExist(DATASET_1.name);
   });
 });

apps/opik-frontend/e2e/tests/feedback-definitions/feedback-definition.spec.ts

@@ -42,31 +42,31 @@ test.describe("Feedback definitions page", () => {
     await feedbackDefinitionsPage.addFeedbackDefinition(
       CATEGORICAL_FEEDBACK_DEFINITION,
     );
-    await feedbackDefinitionsPage.checkIsExistOnTable(
-      CATEGORICAL_FEEDBACK_DEFINITION,
+    await feedbackDefinitionsPage.table.checkIsExist(
+      CATEGORICAL_FEEDBACK_DEFINITION.name,
     );
 
     // create and validate numerical feedback definition
     await feedbackDefinitionsPage.addFeedbackDefinition(
       NUMERICAL_FEEDBACK_DEFINITION,
     );
-    await feedbackDefinitionsPage.checkIsExistOnTable(
-      NUMERICAL_FEEDBACK_DEFINITION,
+    await feedbackDefinitionsPage.table.checkIsExist(
+      NUMERICAL_FEEDBACK_DEFINITION.name,
     );
 
     // delete and validate feedback definitions
     await feedbackDefinitionsPage.deleteFeedbackDefinition(
       CATEGORICAL_FEEDBACK_DEFINITION,
     );
-    await feedbackDefinitionsPage.checkIsNotExistOnTable(
-      CATEGORICAL_FEEDBACK_DEFINITION,
+    await feedbackDefinitionsPage.table.checkIsNotExist(
+      CATEGORICAL_FEEDBACK_DEFINITION.name,
     );
 
     await feedbackDefinitionsPage.deleteFeedbackDefinition(
       NUMERICAL_FEEDBACK_DEFINITION,
     );
-    await feedbackDefinitionsPage.checkIsNotExistOnTable(
-      NUMERICAL_FEEDBACK_DEFINITION,
+    await feedbackDefinitionsPage.table.checkIsNotExist(
+      NUMERICAL_FEEDBACK_DEFINITION.name,
     );
   });
 
@@ -83,8 +83,8 @@ test.describe("Feedback definitions page", () => {
       CATEGORICAL_FEEDBACK_DEFINITION_MODIFIED,
     );
 
-    await feedbackDefinitionsPage.checkIsExistOnTable(
-      CATEGORICAL_FEEDBACK_DEFINITION_MODIFIED,
+    await feedbackDefinitionsPage.table.checkIsExist(
+      CATEGORICAL_FEEDBACK_DEFINITION_MODIFIED.name,
     );
 
     // modify and validate categorical to numeric feedback definition
@@ -93,8 +93,8 @@ test.describe("Feedback definitions page", () => {
       NUMERICAL_FEEDBACK_DEFINITION_MODIFIED,
     );
 
-    await feedbackDefinitionsPage.checkIsExistOnTable(
-      NUMERICAL_FEEDBACK_DEFINITION_MODIFIED,
+    await feedbackDefinitionsPage.table.checkIsExist(
+      NUMERICAL_FEEDBACK_DEFINITION_MODIFIED.name,
     );
   });
 

apps/opik-frontend/e2e/tests/projects/projects-page.spec.ts

@@ -7,7 +7,7 @@ test.describe("Projects page", () => {
     await expect(projectsPage.title).toBeVisible();
 
     // check if Default project exists
-    await projectsPage.checkIsExistOnTable(PROJECT_NAME_DEFAULT);
+    await projectsPage.table.checkIsExist(PROJECT_NAME_DEFAULT);
 
     await projectsPage.table.hasRowCount(2);
 
@@ -35,10 +35,10 @@ test.describe("Projects page", () => {
     await projectsPage.goto();
 
     await projectsPage.addProject(PROJECT_NAME);
-    await projectsPage.checkIsExistOnTable(PROJECT_NAME);
+    await projectsPage.table.checkIsExist(PROJECT_NAME);
 
     await projectsPage.deleteProject(PROJECT_NAME);
-    await projectsPage.checkIsNotExistOnTable(PROJECT_NAME);
+    await projectsPage.table.checkIsNotExist(PROJECT_NAME);
   });
 
   test("Check deleting default projects", async ({ page, projectsPage }) => {

apps/opik-frontend/e2e/tests/traces/trace-panel.spec.ts

@@ -224,7 +224,6 @@ test.describe("Trace panel", () => {
   });
 
   test("Check add/delete tags to trace", async ({
-    page,
     project,
     trace1,
     tracesPage,
@@ -261,7 +260,6 @@ test.describe("Trace panel", () => {
   });
 
   test("Check add/delete tags to span", async ({
-    page,
     project,
     span,
     tracesPage,