jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

feat: Revamp GlobalVariableModal (#5512)

Browse source 
* 📝 (GlobalVariableModal.tsx): Refactor GlobalVariableModal component to use Tabs component instead of Select for type selection and improve layout and styling of input fields and labels
🔧 (index.tsx): Add popoverWidth prop to InputComponent to allow setting the width of the popover in CustomInputPopover component
🔧 (index.tsx): Add popoverWidth prop to InputComponent in InputGlobalComponent to set the width of the popover to 315px

✨ (tabs-button.tsx): introduce new TabsButton component to handle tab functionality in UI components
📝 (tabs-button.tsx): add documentation for Tabs, TabsContent, TabsList, TabsTrigger components
📝 (components/index.ts): add popoverWidth property to InputComponentType to control the width of the popover in UI components

* ✨ (GlobalVariableModal.tsx): Add ForwardedIconComponent to display an icon next to the modal header text for better visual representation
📝 (GlobalVariableModal.tsx): Update TabsTrigger components to include data-testid attribute for testing purposes

✨ (index.tsx): Introduce new components OptionBadge, CommandItemContent, and SelectionIndicator to improve code organization and reusability
♻️ (index.tsx): Refactor handleRemoveOption function to have a more descriptive parameter signature and improve readability
📝 (index.tsx): Add comments to clarify the purpose of handleOptionSelect function and improve code documentation
📝 (index.tsx): Add comments to describe the purpose of getInputClassName and getAnchorClassName functions for better code understanding

✨ (globalVariables.spec.ts): improve placeholder text for variable name and value fields for better user understanding and experience

* 🐛 (GlobalVariableModal.tsx): Fix disabled state logic for TabsTrigger components to correctly reflect initialData type
📝 (GlobalVariableModal.tsx): Update label for submit button to dynamically change based on the presence of initialData

* 🐛 (index.tsx): Fix issue where options were not being correctly memoized as a Set to prevent unnecessary re-renders. Update memoizedOptions to correctly memoize options as a Set.

* 📝 (userSettings.spec.ts): Update placeholder text for variable name and value fields to improve clarity and user experience.
This commit is contained in:
Cristhian Zanforlin Lousa 2025-01-07 09:07:08 -03:00 • committed by GitHub
commit af4fb3774e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 327 additions and 194 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/frontend/tests/core/features/globalVariables.spec.ts
View file

@ -33,11 +33,11 @@ test(
await page.getByTestId("icon-Globe").nth(0).click();
await page.getByText("Add New Variable", { exact: true }).click();
await page
.getByPlaceholder("Insert a name for the variable...")
.getByPlaceholder("Enter a name for the variable...")
.fill(genericName);
await page.getByText("Generic", { exact: true }).first().isVisible();
await page
.getByPlaceholder("Insert a value for the variable...")
.getByPlaceholder("Enter a value for the variable...")
.fill("This is a test of generic variable value");
await page.getByText("Save Variable", { exact: true }).click();
expect(page.getByText(genericName, { exact: true })).not.toBeNull();
@ -45,12 +45,11 @@ test(
await page.getByText("Add New Variable", { exact: true }).click();
await page
.getByPlaceholder("Insert a name for the variable...")
.getByPlaceholder("Enter a name for the variable...")
.fill(credentialName);
await page.getByTestId("select-type-global-variables").first().click();
await page.getByText("Credential", { exact: true }).last().click();
await page.getByTestId("credential-tab").click();
await page
.getByPlaceholder("Insert a value for the variable...")
.getByPlaceholder("Enter a value for the variable...")
.fill("This is a test of credential variable value");
await page.getByText("Save Variable", { exact: true }).click();
expect(page.getByText(credentialName, { exact: true })).not.toBeNull();

23
src/frontend/tests/extended/features/userSettings.spec.ts
View file

@ -44,40 +44,39 @@ test(
.isVisible();
await page.getByText("Add New").click();
await page
.getByPlaceholder("Insert a name for the variable...")
.getByPlaceholder("Enter a name for the variable...")
.fill(randomName);
await page.getByTestId("select-type-global-variables").first().click();
await page.getByText("Generic", { exact: true }).last().isVisible();
await page.getByText("Generic", { exact: true }).last().click();
await page
.getByPlaceholder("Insert a value for the variable...")
.getByPlaceholder("Enter a value for the variable...")
.fill("testtesttesttesttesttesttesttest");
await page.getByTestId("popover-anchor-apply-to-fields").click();
await page.getByPlaceholder("Search options...").waitFor({
await page.getByPlaceholder("Fields").waitFor({
state: "visible",
timeout: 30000,
});
await page.getByPlaceholder("Search options...").fill("System");
await page.getByPlaceholder("Fields").fill("System");
await page.waitForSelector("text=System", { timeout: 30000 });
await page.getByText("System").last().click();
await page.getByPlaceholder("Search options...").fill("openAI");
await page.getByPlaceholder("Fields").fill("openAI");
await page.waitForSelector("text=openai", { timeout: 30000 });
await page.getByText("openai").last().click();
await page.getByPlaceholder("Search options...").waitFor({
await page.getByPlaceholder("Fields").waitFor({
state: "visible",
timeout: 30000,
});
await page.getByPlaceholder("Search options...").fill("ollama");
await page.getByPlaceholder("Fields").fill("ollama");
await page.keyboard.press("Escape");
await page.getByText("Save Variable", { exact: true }).click();
@ -87,13 +86,13 @@ test(
await page.getByText(randomName).last().click();
await page.getByText(randomName).last().click();
await page.getByPlaceholder("Insert a name for the variable...").waitFor({
await page.getByPlaceholder("Enter a name for the variable...").waitFor({
state: "visible",
timeout: 30000,
});
await page
.getByPlaceholder("Insert a name for the variable...")
.getByPlaceholder("Enter a name for the variable...")
.fill(randomName2);
await page.getByText("Update Variable", { exact: true }).last().click();
@ -102,13 +101,13 @@ test(
await page.getByText(randomName2).last().click();
await page.getByPlaceholder("Insert a name for the variable...").waitFor({
await page.getByPlaceholder("Enter a name for the variable...").waitFor({
state: "visible",
timeout: 30000,
});
await page
.getByPlaceholder("Insert a name for the variable...")
.getByPlaceholder("Enter a name for the variable...")
.fill(randomName3);
await page.getByText("Update Variable", { exact: true }).last().click();