From 654d4815dca32d9c77ebc2c48fedd1b76dfa0417 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Wed, 13 Nov 2024 09:03:48 -0300 Subject: [PATCH] refactor: standardize toolbar select item widths and improve alignment (#4539) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 📝 (select-custom.tsx): Update styling in SelectItem component to improve consistency and readability 📝 (nodeToolbarComponent/index.tsx): Refactor SelectItem components to include consistent width styling for better alignment and visual appeal * ✨ (nodeToolbarComponent/index.tsx): Center align select items by adding 'm-auto' class to improve visual presentation. * ✨ (GenericNode/index.tsx): Add functionality to toggle show more options in GenericNode component 🔧 (nodeToolbarComponent/index.tsx): Pass setOpenShowMoreOptions function to toggle show more options in NodeToolbarComponent 📝 (components/index.ts): Update nodeToolbarPropsType to include setOpenShowMoreOptions function for better type checking * ✨ (nodeToolbarComponent/index.tsx): Update styles and dimensions for better UI consistency and alignment in the Node Toolbar Component. * 🔧 (nodeToolbarComponent/index.tsx): Remove unnecessary 'm-auto' class from SelectItem components to improve code readability and reduce redundancy. * 📝 (select-custom.tsx): Update styling in SelectItem component to improve consistency and readability 📝 (nodeToolbarComponent/index.tsx): Refactor SelectItem components to include consistent width styling for better alignment and visual appeal * ✨ (nodeToolbarComponent/index.tsx): Center align select items by adding 'm-auto' class to improve visual presentation. * ✨ (GenericNode/index.tsx): Add functionality to toggle show more options in GenericNode component 🔧 (nodeToolbarComponent/index.tsx): Pass setOpenShowMoreOptions function to toggle show more options in NodeToolbarComponent 📝 (components/index.ts): Update nodeToolbarPropsType to include setOpenShowMoreOptions function for better type checking * ✨ (nodeToolbarComponent/index.tsx): Update styles and dimensions for better UI consistency and alignment in the Node Toolbar Component. * 🔧 (nodeToolbarComponent/index.tsx): Remove unnecessary 'm-auto' class from SelectItem components to improve code readability and reduce redundancy. * ✨ (actionsMainPage-shard-1.spec.ts): Update test descriptions to use "Document Q&A" instead of "Document QA" for consistency 📝 (Basic Prompting.spec.ts, Blog Writer.spec.ts, Document QA.spec.ts, Dynamic Agent.spec.ts, Hierarchical Agent.spec.ts, Memory Chatbot.spec.ts, Sequential Task Agent.spec.ts, Simple Agent.spec.ts, Travel Planning Agent.spec.ts, Vector Store.spec.ts): Remove 'skip' from test descriptions to enable running the tests. * 🔧 (typescript_test.yml): Update shardIndex and shardTotal values to run tests on a single shard for simplicity 📝 (typescript_test.yml): Comment out unused test commands to improve readability and reduce confusion ✅ (starter-projects.spec.ts): Remove skip from test case to ensure it is executed as intended --- .github/workflows/typescript_test.yml | 10 ++++---- .../src/CustomNodes/GenericNode/index.tsx | 4 ++++ .../src/components/ui/select-custom.tsx | 2 +- .../components/nodeToolbarComponent/index.tsx | 23 +++++++++++++++---- src/frontend/src/types/components/index.ts | 1 + .../features/actionsMainPage-shard-1.spec.ts | 4 ++-- .../core/integrations/Basic Prompting.spec.ts | 2 +- .../core/integrations/Blog Writer.spec.ts | 2 +- .../core/integrations/Document QA.spec.ts | 4 ++-- .../core/integrations/Dynamic Agent.spec.ts | 2 +- .../integrations/Hierarchical Agent.spec.ts | 2 +- .../core/integrations/Memory Chatbot.spec.ts | 2 +- .../Sequential Task Agent.spec.ts | 2 +- .../core/integrations/Simple Agent.spec.ts | 2 +- .../Travel Planning Agent.spec.ts | 2 +- .../core/integrations/Vector Store.spec.ts | 2 +- .../integrations/starter-projects.spec.ts | 2 +- 17 files changed, 45 insertions(+), 23 deletions(-) diff --git a/.github/workflows/typescript_test.yml b/.github/workflows/typescript_test.yml index ffaed61e3..d39013fb5 100644 --- a/.github/workflows/typescript_test.yml +++ b/.github/workflows/typescript_test.yml @@ -39,8 +39,10 @@ jobs: strategy: fail-fast: false matrix: - shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] - shardTotal: [10] + # shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] + # shardTotal: [10] + shardIndex: [1] + shardTotal: [1] env: OPENAI_API_KEY: ${{ inputs.openai_api_key || secrets.OPENAI_API_KEY }} STORE_API_KEY: ${{ inputs.store_api_key || secrets.STORE_API_KEY }} @@ -119,8 +121,8 @@ jobs: max_attempts: 2 command: | cd src/frontend - npx playwright test ${{ inputs.tests_folder }} --shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --list - npx playwright test ${{ inputs.tests_folder }} --trace on --shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --workers 2 + # npx playwright test ${{ inputs.tests_folder }} --shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --list + # npx playwright test ${{ inputs.tests_folder }} --trace on --shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --workers 2 - name: Upload blob report to GitHub Actions Artifacts if: always() diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 2b0a0b71f..d15158a3e 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -167,6 +167,8 @@ export default function GenericNode({ const shortcuts = useShortcutsStore((state) => state.shortcuts); + const [openShowMoreOptions, setOpenShowMoreOptions] = useState(false); + const renderOutputParameter = ( output: OutputFieldType, idx: number, @@ -232,6 +234,7 @@ export default function GenericNode({ onCloseAdvancedModal={() => {}} updateNode={handleUpdateCode} isOutdated={isOutdated && isUserEdited} + setOpenShowMoreOptions={setOpenShowMoreOptions} /> ); @@ -335,6 +338,7 @@ export default function GenericNode({ : `h-[4.065rem] w-48 rounded-[0.75rem] ${!selected ? "border-[1px] border-border ring-[0.5px] ring-border" : ""}`, "generic-node-div group/node relative", !hasOutputs && "pb-4", + openShowMoreOptions && "nowheel", )} >
state.version); const [showModalAdvanced, setShowModalAdvanced] = useState(false); @@ -344,6 +345,10 @@ export default function NodeToolbarComponent({ (selectTriggerRef.current! as HTMLElement)?.click(); }; + const handleOpenChange = (open: boolean) => { + setOpenShowMoreOptions && setOpenShowMoreOptions(open); + }; + const [toolMode, setToolMode] = useState(() => { // Check if tool mode is explicitly set on the node const hasToolModeProperty = data.node?.tool_mode; @@ -380,6 +385,7 @@ export default function NodeToolbarComponent({ }, [zoom]); if (scale === null) return <>; + return ( <>
- + <> {hasCode && ( diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 030cbbbb1..f1d095eba 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -545,6 +545,7 @@ export type nodeToolbarPropsType = { isOutdated: boolean; updateNode: () => void; closeToolbar?: () => void; + setOpenShowMoreOptions?: (open: boolean) => void; }; export type parsedDataType = { diff --git a/src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts b/src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts index 4b17c6f4a..bfde1d1e4 100644 --- a/src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts +++ b/src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts @@ -93,7 +93,7 @@ test("search flows", async ({ page }) => { await page.getByTestId("icon-ChevronLeft").first().click(); await page.getByText("New Flow", { exact: true }).click(); await page.getByTestId("side_nav_options_all-templates").click(); - await page.getByRole("heading", { name: "Document QA" }).click(); + await page.getByRole("heading", { name: "Document Q&A" }).click(); await page.waitForSelector('[data-testid="icon-ChevronLeft"]', { timeout: 100000, @@ -102,7 +102,7 @@ test("search flows", async ({ page }) => { await page.getByTestId("icon-ChevronLeft").first().click(); await page.getByPlaceholder("Search flows").fill("Memory Chatbot"); await page.getByText("Memory Chatbot", { exact: true }).isVisible(); - await page.getByText("Document QA", { exact: true }).isHidden(); + await page.getByText("Document Q&A", { exact: true }).isHidden(); await page.getByText("Basic Prompting", { exact: true }).isHidden(); }); diff --git a/src/frontend/tests/core/integrations/Basic Prompting.spec.ts b/src/frontend/tests/core/integrations/Basic Prompting.spec.ts index 19c6e7ed3..3d9092c34 100644 --- a/src/frontend/tests/core/integrations/Basic Prompting.spec.ts +++ b/src/frontend/tests/core/integrations/Basic Prompting.spec.ts @@ -2,7 +2,7 @@ import { test } from "@playwright/test"; import * as dotenv from "dotenv"; import path from "path"; -test.skip("Basic Prompting (Hello, World)", async ({ page }) => { +test("Basic Prompting (Hello, World)", async ({ page }) => { test.skip( !process?.env?.OPENAI_API_KEY, "OPENAI_API_KEY required to run this test", diff --git a/src/frontend/tests/core/integrations/Blog Writer.spec.ts b/src/frontend/tests/core/integrations/Blog Writer.spec.ts index 77cc44103..22bfe7323 100644 --- a/src/frontend/tests/core/integrations/Blog Writer.spec.ts +++ b/src/frontend/tests/core/integrations/Blog Writer.spec.ts @@ -2,7 +2,7 @@ import { expect, test } from "@playwright/test"; import * as dotenv from "dotenv"; import path from "path"; -test.skip("Blog Writer", async ({ page }) => { +test("Blog Writer", async ({ page }) => { test.skip( !process?.env?.OPENAI_API_KEY, "OPENAI_API_KEY required to run this test", diff --git a/src/frontend/tests/core/integrations/Document QA.spec.ts b/src/frontend/tests/core/integrations/Document QA.spec.ts index f9b04e175..b10f96261 100644 --- a/src/frontend/tests/core/integrations/Document QA.spec.ts +++ b/src/frontend/tests/core/integrations/Document QA.spec.ts @@ -2,7 +2,7 @@ import { test } from "@playwright/test"; import * as dotenv from "dotenv"; import path from "path"; -test.skip("Document QA", async ({ page }) => { +test("Document Q&A", async ({ page }) => { test.skip( !process?.env?.OPENAI_API_KEY, "OPENAI_API_KEY required to run this test", @@ -38,7 +38,7 @@ test.skip("Document QA", async ({ page }) => { } await page.getByTestId("side_nav_options_all-templates").click(); - await page.getByRole("heading", { name: "Document QA" }).click(); + await page.getByRole("heading", { name: "Document Q&A" }).click(); await page.waitForTimeout(1000); await page.getByTestId("fit_view").click(); diff --git a/src/frontend/tests/core/integrations/Dynamic Agent.spec.ts b/src/frontend/tests/core/integrations/Dynamic Agent.spec.ts index fbf6ba526..881e18342 100644 --- a/src/frontend/tests/core/integrations/Dynamic Agent.spec.ts +++ b/src/frontend/tests/core/integrations/Dynamic Agent.spec.ts @@ -2,7 +2,7 @@ import { expect, test } from "@playwright/test"; import * as dotenv from "dotenv"; import path from "path"; -test.skip("Dynamic Agent", async ({ page }) => { +test("Dynamic Agent", async ({ page }) => { test.skip( !process?.env?.OPENAI_API_KEY, "OPENAI_API_KEY required to run this test", diff --git a/src/frontend/tests/core/integrations/Hierarchical Agent.spec.ts b/src/frontend/tests/core/integrations/Hierarchical Agent.spec.ts index bd35b1668..7561deec5 100644 --- a/src/frontend/tests/core/integrations/Hierarchical Agent.spec.ts +++ b/src/frontend/tests/core/integrations/Hierarchical Agent.spec.ts @@ -3,7 +3,7 @@ import * as dotenv from "dotenv"; import path from "path"; import uaParser from "ua-parser-js"; -test.skip("Hierarchical Tasks Agent", async ({ page }) => { +test("Hierarchical Tasks Agent", async ({ page }) => { test.skip( !process?.env?.OPENAI_API_KEY, "OPENAI_API_KEY required to run this test", diff --git a/src/frontend/tests/core/integrations/Memory Chatbot.spec.ts b/src/frontend/tests/core/integrations/Memory Chatbot.spec.ts index d37d96226..d1686ebef 100644 --- a/src/frontend/tests/core/integrations/Memory Chatbot.spec.ts +++ b/src/frontend/tests/core/integrations/Memory Chatbot.spec.ts @@ -2,7 +2,7 @@ import { test } from "@playwright/test"; import * as dotenv from "dotenv"; import path from "path"; -test.skip("Memory Chatbot", async ({ page }) => { +test("Memory Chatbot", async ({ page }) => { test.skip( !process?.env?.OPENAI_API_KEY, "OPENAI_API_KEY required to run this test", diff --git a/src/frontend/tests/core/integrations/Sequential Task Agent.spec.ts b/src/frontend/tests/core/integrations/Sequential Task Agent.spec.ts index e6db9ca40..f3755343c 100644 --- a/src/frontend/tests/core/integrations/Sequential Task Agent.spec.ts +++ b/src/frontend/tests/core/integrations/Sequential Task Agent.spec.ts @@ -3,7 +3,7 @@ import * as dotenv from "dotenv"; import path from "path"; import uaParser from "ua-parser-js"; -test.skip("Sequential Task Agent", async ({ page }) => { +test("Sequential Task Agent", async ({ page }) => { test.skip( !process?.env?.OPENAI_API_KEY, "OPENAI_API_KEY required to run this test", diff --git a/src/frontend/tests/core/integrations/Simple Agent.spec.ts b/src/frontend/tests/core/integrations/Simple Agent.spec.ts index f6df1dfec..3ea090d10 100644 --- a/src/frontend/tests/core/integrations/Simple Agent.spec.ts +++ b/src/frontend/tests/core/integrations/Simple Agent.spec.ts @@ -3,7 +3,7 @@ import * as dotenv from "dotenv"; import path from "path"; import uaParser from "ua-parser-js"; -test.skip("Simple Agent", async ({ page }) => { +test("Simple Agent", async ({ page }) => { test.skip( !process?.env?.OPENAI_API_KEY, "OPENAI_API_KEY required to run this test", diff --git a/src/frontend/tests/core/integrations/Travel Planning Agent.spec.ts b/src/frontend/tests/core/integrations/Travel Planning Agent.spec.ts index 77519289b..a8dac04bb 100644 --- a/src/frontend/tests/core/integrations/Travel Planning Agent.spec.ts +++ b/src/frontend/tests/core/integrations/Travel Planning Agent.spec.ts @@ -2,7 +2,7 @@ import { expect, test } from "@playwright/test"; import * as dotenv from "dotenv"; import path from "path"; -test.skip("Travel Planning Agent", async ({ page }) => { +test("Travel Planning Agent", async ({ page }) => { test.skip( !process?.env?.OPENAI_API_KEY, "OPENAI_API_KEY required to run this test", diff --git a/src/frontend/tests/core/integrations/Vector Store.spec.ts b/src/frontend/tests/core/integrations/Vector Store.spec.ts index 2a7693893..66ababddf 100644 --- a/src/frontend/tests/core/integrations/Vector Store.spec.ts +++ b/src/frontend/tests/core/integrations/Vector Store.spec.ts @@ -2,7 +2,7 @@ import { Page, test } from "@playwright/test"; import path from "path"; import uaParser from "ua-parser-js"; -test.skip("Vector Store RAG", async ({ page }) => { +test("Vector Store RAG", async ({ page }) => { test.skip( !process?.env?.OPENAI_API_KEY, "OPENAI_API_KEY required to run this test", diff --git a/src/frontend/tests/core/integrations/starter-projects.spec.ts b/src/frontend/tests/core/integrations/starter-projects.spec.ts index d483c7a5b..aeb537671 100644 --- a/src/frontend/tests/core/integrations/starter-projects.spec.ts +++ b/src/frontend/tests/core/integrations/starter-projects.spec.ts @@ -1,6 +1,6 @@ const { test, expect } = require("@playwright/test"); -test.skip("vector store from starter projects should have its connections and nodes on the flow", async ({ +test("vector store from starter projects should have its connections and nodes on the flow", async ({ page, request, }) => {