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

refactor: Replace InputComponent with Select dropdown (#4719)

Browse source 
* 🔧 (nodeToolbarComponent/index.tsx): improve positioning logic for node toolbar based on scale and tool mode to enhance user experience

* ✨ (GlobalVariableModal.tsx): Refactor type selection in GlobalVariableModal to use a dropdown select component for better user experience and consistency.

* Revert "🔧 (nodeToolbarComponent/index.tsx): improve positioning logic for node toolbar based on scale and tool mode to enhance user experience"

This reverts commit 322ba353a6984fcf870cba8c82c26689381842da.

* ✨ (GlobalVariableModal.tsx): Add data-testid attribute to SelectTrigger for testing purposes
🔧 (globalVariables.spec.ts, userSettings.spec.ts): Update test scripts to interact with the SelectTrigger using data-testid attribute for consistency and improved testing accuracy

* 📝 (userSettings.spec.ts): remove commented out code for focusElementsOnBoard function to improve code readability and maintainability
This commit is contained in:
Cristhian Zanforlin Lousa 2024-11-21 21:45:01 -03:00 • committed by GitHub
commit 226453a606
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 33 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/frontend/src/components/GlobalVariableModal/GlobalVariableModal.tsx
View file

@ -14,6 +14,13 @@ import ForwardedIconComponent from "../genericIconComponent";
import InputComponent from "../inputComponent";
import { Input } from "../ui/input";
import { Label } from "../ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "../ui/select";
import { Textarea } from "../ui/textarea";
import sortByName from "./utils/sort-by-name";
@ -155,17 +162,28 @@ export default function GlobalVariableModal({
placeholder="Insert a name for the variable..."
></Input>
<Label>Type (optional)</Label>
<InputComponent
disabled={initialData?.type !== undefined}
setSelectedOption={(e) => {
setType(e);
}}
selectedOption={type}
password={false}
options={["Generic", "Credential"]}
placeholder="Choose a type for the variable..."
id={"type-global-variables"}
></InputComponent>
<Select
disabled={disabled}
onValueChange={setType}
value={type}
defaultValue={type}
>
<SelectTrigger
className="h-full w-full"
data-testid="select-type-global-variables"
>
<SelectValue placeholder="Choose a type for the variable..." />
</SelectTrigger>
<SelectContent id="type-global-variables">
{["Generic", "Credential"].map((option) => (
<SelectItem key={option} value={option}>
{option}
</SelectItem>
))}
</SelectContent>
</Select>
<Label>Value</Label>
{type === "Credential" ? (
<InputComponent

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

@ -63,7 +63,7 @@ test("user must be able to save or delete a global variable", async ({
await page
.getByPlaceholder("Insert a name for the variable...")
.fill(genericName);
await page.getByText("Generic", { exact: true }).isVisible();
await page.getByText("Generic", { exact: true }).first().isVisible();
await page
.getByPlaceholder("Insert a value for the variable...")
.fill("This is a test of generic variable value");
@ -75,11 +75,8 @@ test("user must be able to save or delete a global variable", async ({
await page
.getByPlaceholder("Insert a name for the variable...")
.fill(credentialName);
await page
.getByTestId("popover-anchor-type-global-variables")
.first()
.click();
await page.getByText("Credential", { exact: true }).click();
await page.getByTestId("select-type-global-variables").first().click();
await page.getByText("Credential", { exact: true }).last().click();
await page
.getByPlaceholder("Insert a value for the variable...")
.fill("This is a test of credential variable value");

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

@ -35,15 +35,7 @@ test("should interact with global variables", async ({ page }) => {
await page
.getByPlaceholder("Insert a name for the variable...")
.fill(randomName);
await page.getByTestId("anchor-popover-anchor-type-global-variables").click();
await page.getByPlaceholder("Search options...").fill("Generic");
await page.waitForTimeout(1000);
await page.getByText("Generic", { exact: true }).last().isVisible();
await page.getByText("Generic", { exact: true }).last().click();
await page.getByTestId("popover-anchor-type-global-variables").click();
await page.waitForTimeout(1000);
await page.getByPlaceholder("Search options...").fill("Generic");
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();
@ -108,18 +100,6 @@ test("should interact with global variables", async ({ page }) => {
await page.waitForTimeout(2000);
// const focusElementsOnBoard = async ({ page }) => {
// await page.waitForSelector(
// '[aria-label="Press Space to toggle all rows selection (unchecked)"]',
// { timeout: 30000, state: "visible" },
// );
// const focusElements = await page
// .getByLabel("Press Space to toggle all rows selection (unchecked)")
// .first();
// await focusElements.click();
// };
// await focusElementsOnBoard({ page });
await page.locator(".ag-checkbox-input").first().click();
await page.getByTestId("icon-Trash2").click();
await page.getByText("No data available").isVisible();