refactor: standardize toolbar select item widths and improve alignment (#4539)
* 📝 (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
This commit is contained in:
Cristhian Zanforlin Lousa
GitHub
parent
8d89bf4ff4
commit
654d4815dc
17 changed files with 45 additions and 23 deletions
10
.github/workflows/typescript_test.yml
vendored
10
.github/workflows/typescript_test.yml
vendored
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
</NodeToolbar>
|
||||
);
|
||||
|
|
@ -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",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ const SelectItem = React.forwardRef<
|
|||
<SelectPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-3 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
"relative flex w-full cursor-pointer select-none items-center rounded-sm px-3 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ export default function NodeToolbarComponent({
|
|||
onCloseAdvancedModal,
|
||||
updateNode,
|
||||
isOutdated,
|
||||
setOpenShowMoreOptions,
|
||||
}: nodeToolbarPropsType): JSX.Element {
|
||||
const version = useDarkStore((state) => 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 (
|
||||
<>
|
||||
<div
|
||||
|
|
@ -544,13 +550,22 @@ export default function NodeToolbarComponent({
|
|||
</ShadTooltip>
|
||||
</div>
|
||||
|
||||
<Select onValueChange={handleSelectChange} value={selectedValue!}>
|
||||
<SelectTrigger ref={selectTriggerRef}>
|
||||
<Select
|
||||
onValueChange={handleSelectChange}
|
||||
value={selectedValue!}
|
||||
onOpenChange={handleOpenChange}
|
||||
open
|
||||
>
|
||||
<SelectTrigger ref={selectTriggerRef} className="w-62">
|
||||
<></>
|
||||
</SelectTrigger>
|
||||
<SelectContent
|
||||
className="relative min-w-[14rem] bg-background"
|
||||
style={{ transform: `scale(${scale})`, transformOrigin: "top" }}
|
||||
className={"relative top-1 w-56 bg-background"}
|
||||
style={{
|
||||
transform: `scale(${scale})`,
|
||||
transformOrigin: "top",
|
||||
left: scale === 1 ? "4.5rem" : `${1.7 * (scale - 1)}rem`,
|
||||
}}
|
||||
>
|
||||
{hasCode && (
|
||||
<SelectItem value={"code"}>
|
||||
|
|
|
|||
|
|
@ -545,6 +545,7 @@ export type nodeToolbarPropsType = {
|
|||
isOutdated: boolean;
|
||||
updateNode: () => void;
|
||||
closeToolbar?: () => void;
|
||||
setOpenShowMoreOptions?: (open: boolean) => void;
|
||||
};
|
||||
|
||||
export type parsedDataType = {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}) => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue