feat: allow flow name to be edited from the main page or by clicking header (#5525)

* Added flowData to allow changing flow name without being on the flow

* Added being able to edit the flow name just by clicking the name

* Added handleEdit and edit details option on flow dropdown

* Added flow settings modal to grid and list

* Added flowData type and select option

* Update src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx

Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>

* Update src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx

Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>

* Update src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx

Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>

* Fixed useCallback import

* Implemented details boolean to not show endpoint, changed title of flow settings modal

* Changed Flow Settings to Edit Details

* Changed Flow Settings modal description

* Fixed empty name not appearing, fixed naming conditions not considered

* 📝 (editFlowSettingsComponent/index.tsx): add data-testid attribute to input element for flow name for testing purposes
✨ (edit-flow-name.spec.ts): create test to ensure user can edit flow name by clicking on the header or main page, with various random names generated for testing purposes

* Fixed tests that used Flow Settings

* Fixed tests that rely on flow name to open edit details

* Fixed tests

---------

Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Co-authored-by: anovazzi1 <otavio2204@gmail.com>
This commit is contained in:
Lucas Oliveira 2025-01-10 15:14:00 -03:00 • committed by GitHub
commit 3e482dbc29
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 456 additions and 162 deletions

View file

@ -128,8 +128,8 @@ test(
await page.getByTestId("fit_view").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("flow-configuration-button").click();
await page.getByText("Flow Settings", { exact: true }).last().click();
await page.getByTestId("flow_menu_trigger").click();
await page.getByText("Edit Details", { exact: true }).last().click();
await page.getByPlaceholder("Flow Name").fill(randomFlowName);
@ -201,8 +201,8 @@ test(
await page.getByTestId("fit_view").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("flow-configuration-button").click();
await page.getByText("Flow Settings", { exact: true }).last().click();
await page.getByTestId("flow_menu_trigger").click();
await page.getByText("Edit Details", { exact: true }).last().click();
await page.getByPlaceholder("Flow Name").fill(secondRandomFlowName);

View file

@ -116,8 +116,8 @@ test("should share component with share button", async ({ page }) => {
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForTimeout(1000);
const flowName = await page.getByTestId("flow_name").innerText();
await page.getByTestId("flow_name").click();
await page.getByText("Flow Settings").click();
await page.getByTestId("flow_menu_trigger").click();
await page.getByText("Edit Details").click();
const flowDescription = await page
.getByPlaceholder("Flow description")
.inputValue();