📝 (addNewVariableButton.tsx): reformat code for better readability and maintainability

📝 (addNewVariableButton.tsx): fix typo in variable name 'unavaliableFields' to 'unavailableFields'
📝 (addNewVariableButton.tsx): add id attribute to InputComponent for better accessibility
📝 (headerComponent/index.tsx): add data-testid attribute to user-profile-settings button for easier testing
📝 (inputComponent/index.tsx): add data-testid attribute to popover anchor element for easier testing
✨ (userSettings.spec.ts): add end-to-end tests for user settings page, including testing profile gradient, interacting with global variables, and checking shortcuts

src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx

@@ -22,9 +22,9 @@ export default function AddNewVariableButton({ children }): JSX.Element {
   const [open, setOpen] = useState(false);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const componentFields = useTypesStore((state) => state.ComponentFields);
-  const unavaliableFields =new Set(Object.keys(useGlobalVariablesStore(
+  const unavaliableFields = new Set(
-    (state) => state.unavaliableFields
+    Object.keys(useGlobalVariablesStore((state) => state.unavaliableFields))
-  )));
+  );
 
   const availableFields = Array.from(componentFields).filter(
     (field) => !unavaliableFields.has(field)
@@ -97,6 +97,7 @@ export default function AddNewVariableButton({ children }): JSX.Element {
             password={false}
             options={["Generic", "Credential"]}
             placeholder="Choose a type for the variable..."
+            id={"type-global-variables"}
           ></InputComponent>
           <Label>Value</Label>
           <Textarea
@@ -114,6 +115,7 @@ export default function AddNewVariableButton({ children }): JSX.Element {
             password={false}
             options={availableFields}
             placeholder="Choose a field for the variable..."
+            id={"apply-to-fields"}
           ></InputComponent>
         </div>
       </BaseModal.Content>

src/frontend/src/components/headerComponent/index.tsx

@@ -174,6 +174,7 @@ export default function Header(): JSX.Element {
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <button
+                  data-testid="user-profile-settings"
                   className={
                     "h-7 w-7 rounded-full focus-visible:outline-0 " +
                     (userData?.profile_image ??

src/frontend/src/components/inputComponent/index.tsx

@@ -247,6 +247,7 @@ export default function InputComponent({
             </PopoverContentWithoutPortal>
           </Popover>
           <div
+            data-testid={"popover-anchor-" + id}
             className={cn(
               "pointer-events-auto absolute inset-y-0 h-full w-full cursor-pointer",
               ((selectedOption !== "" || !onChange) && setSelectedOption) ||

src/frontend/tests/end-to-end/userSettings.spec.ts

@@ -0,0 +1,91 @@
+import { test } from "@playwright/test";
+
+test("should see general profile gradient", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+  await page.getByTestId("user-profile-settings").click();
+  await page.getByText("Settings").click();
+  await page.getByText("General").nth(2).isVisible();
+  await page.getByText("Profile Gradient").isVisible();
+});
+
+test("should interact with global variables", async ({ page }) => {
+  const randomName = Math.random().toString(36).substring(2);
+
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+  await page.getByTestId("user-profile-settings").click();
+  await page.getByText("Settings").click();
+  await page.getByText("Global Variables").click();
+  await page.getByText("Global Variables").nth(2);
+  await page.getByText("Global Variables", { exact: true }).nth(1).isVisible();
+  await page.getByText("Add New").click();
+  await page
+    .getByPlaceholder("Insert a name for the variable...")
+    .fill(randomName);
+  await page.getByTestId("popover-anchor-type-global-variables").click();
+  await page.getByPlaceholder("Search options...").fill("Generic");
+  await page.waitForTimeout(2000);
+  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(2000);
+  await page.getByPlaceholder("Search options...").fill("Generic");
+  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...")
+    .fill("testtesttesttesttesttesttesttest");
+  await page.getByTestId("popover-anchor-apply-to-fields").click();
+  await page.waitForTimeout(2000);
+
+  await page.getByPlaceholder("Search options...").fill("System Message");
+
+  await page.getByText("System Message").first().click();
+
+  await page.getByPlaceholder("Search options...").fill("openAI");
+
+  await page.getByText("OpenAI API Base").first().click();
+
+  await page.getByPlaceholder("Search options...").fill("llama");
+
+  await page.getByText("Ollama").first().click();
+
+  await page.keyboard.press("Escape");
+  await page.getByText("Save Variable", { exact: true }).click();
+
+  await page.getByText(randomName).isVisible();
+
+  await page
+    .getByLabel("Press Space to toggle all rows selection (unchecked)")
+    .nth(0)
+    .click();
+  await page.getByTestId("icon-Trash2").click();
+  await page.getByText("No Rows To Show").isVisible();
+});
+
+test("should see shortcuts", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+  await page.getByTestId("user-profile-settings").click();
+  await page.getByText("Settings").click();
+  await page.getByText("General").nth(2).isVisible();
+  await page.getByText("Shortcuts").nth(0).click();
+  await page.getByText("Shortcuts", { exact: true }).nth(1).isVisible();
+  await page
+    .getByText("Advanced Settings Component", { exact: true })
+    .isVisible();
+  await page.getByText("Minimize Component", { exact: true }).isVisible();
+  await page.getByText("Code Component", { exact: true }).isVisible();
+  await page.getByText("Copy Component", { exact: true }).isVisible();
+  await page.getByText("Duplicate Component", { exact: true }).isVisible();
+  await page.getByText("Share Component", { exact: true }).isVisible();
+  await page.getByText("Docs Component", { exact: true }).isVisible();
+  await page.getByText("Save Component", { exact: true }).isVisible();
+  await page.getByText("Delete Component", { exact: true }).isVisible();
+  await page.getByText("Open Playground", { exact: true }).isVisible();
+  await page.getByText("Undo", { exact: true }).isVisible();
+  await page.getByText("Redo", { exact: true }).isVisible();
+});