refactor: Replace InputComponent with Select dropdown (#4719)

* 🔧 (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

src/frontend/src/components/GlobalVariableModal/GlobalVariableModal.tsx

@@ -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}
+          <Select
-            setSelectedOption={(e) => {
+            disabled={disabled}
-              setType(e);
+            onValueChange={setType}
-            }}
+            value={type}
-            selectedOption={type}
+            defaultValue={type}
-            password={false}
+          >
-            options={["Generic", "Credential"]}
+            <SelectTrigger
-            placeholder="Choose a type for the variable..."
+              className="h-full w-full"
-            id={"type-global-variables"}
+              data-testid="select-type-global-variables"
-          ></InputComponent>
+            >
+              <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

src/frontend/tests/core/features/globalVariables.spec.ts

@@ -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
+  await page.getByTestId("select-type-global-variables").first().click();
-    .getByTestId("popover-anchor-type-global-variables")
+  await page.getByText("Credential", { exact: true }).last().click();
-    .first()
-    .click();
-  await page.getByText("Credential", { exact: true }).click();
   await page
     .getByPlaceholder("Insert a value for the variable...")
     .fill("This is a test of credential variable value");

src/frontend/tests/extended/features/userSettings.spec.ts

@@ -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.getByTestId("select-type-global-variables").first().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.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();