Merge branch 'staging' into block-navigation-to-setting-when-not-admin

.eslintrc.json

@@ -11,10 +11,18 @@
     "plugin:react/recommended"
   ],
   "rules": {
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": true
+      }
+    ]
   },
   "parser": "@typescript-eslint/parser",
-  "ignorePatterns": ["components/ui/"],
+  "ignorePatterns": [
+    "components/ui/"
+  ],
   "overrides": [
     {
       "files": [

.gitignore

@@ -41,3 +41,5 @@ next-env.d.ts
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+/e2e/playwright/.auth
+/playwright

app/components/ui/Button.tsx

@@ -42,8 +42,8 @@ const getClassName = (variant: Variant, disable: boolean | undefined, open: bool
             className += icon ? " gap-3.5" : ""
             break
         case "Secondary":
-            className += " px-3 py-2 bg-[#555577]"
-            className += !disable ? " hover:bg-[#57577B]" : ""
+            className += " px-3 py-2 bg-[#57577B]"
+            className += !disable ? " hover:bg-[#444466]" : ""
             break
         default:
     }

app/components/ui/combobox.tsx

@@ -95,9 +95,8 @@ export default function Combobox({ isSelectGraph, disabled = false, inTable, typ
         setOpen(o)
         if (onOpenChange) onOpenChange(o)
       }}>
-        <DropdownMenuTrigger asChild>
+        <DropdownMenuTrigger disabled={disabled} asChild>
           <Button
-            disabled={disabled}
             className={cn(inTable ? "text-sm font-light" : "text-2xl")}
             label={selectedValue || `Select ${type || "Graph"}`}
             open={open}

app/graph/GraphView.tsx

@@ -455,13 +455,13 @@ const GraphView = forwardRef(({ graph, runQuery, historyQuery, fetchCount }: {
                         <div className="w-full flex items-center gap-8">
                             <p>Query</p>
                             <form
-                                className="w-1 grow flex border border-[#343459] rounded-lg overflow-hidden"
+                                className="w-1 grow flex rounded-lg overflow-hidden"
                                 onSubmit={(e) => {
                                     e.preventDefault()
                                     runQuery(query)
                                 }}
                             >
-                                <div className="relative flex grow w-1">
+                                <div className="relative border border-[#343459] flex grow w-1">
                                     <Editor
                                         className="Editor"
                                         language="cypher"
@@ -474,17 +474,17 @@ const GraphView = forwardRef(({ graph, runQuery, historyQuery, fetchCount }: {
                                     />
                                     <DialogTrigger asChild>
                                         <Button
-                                            className="absolute top-0 right-0 p-3"
+                                            className="absolute top-0 right-0 p-2.5"
                                             title="Maximize"
                                             icon={<Maximize2 size={20} />}
                                         />
                                     </DialogTrigger>
                                 </div>
                                 <Button
                                     ref={submitQuery}
-                                    className="bg-[#59597C] border border-[#737392] p-2 px-8"
+                                    className="rounded-none px-8"
+                                    variant="Secondary"
                                     label="Run"
-                                    title="Run (Ctrl+Enter)"
                                     type="submit"
                                 />
                             </form>

app/graph/toolbar.tsx

@@ -44,15 +44,15 @@ export default function Toolbar({ disabled, chartRef, onDeleteElement, onAddEnti
         <div className="flex items-center gap-6 p-1">
             <div className="flex gap-4">
                 <Button
-                    disabled={disabled}
+                    disabled
                     variant="Secondary"
                     label="Add Entity"
                     className="flex items-center gap-2"
                     onClick={onAddEntity}
                     icon={<PlusCircle />}
                     />
                 <Button
-                    disabled={disabled}
+                    disabled
                     variant="Secondary"
                     className="flex items-center gap-2"
                     label="Add Relation"

app/login/LoginForm.tsx

@@ -17,8 +17,8 @@ const DEFAULT_PORT = "6379";
 export default function LoginForm() {
   const router = useRouter();
   const [error, setError] = useState(false);
-  const [host, setHost] = useState(DEFAULT_HOST);
-  const [port, setPort] = useState(DEFAULT_PORT);
+  const [host, setHost] = useState("");
+  const [port, setPort] = useState("");
   const [TLS, setTLS] = useState(false);
   const [CA, setCA] = useState<string>();
   const [username, setUsername] = useState("");
@@ -33,8 +33,8 @@ export default function LoginForm() {
     const usernameParam = searchParams.get("username");
     const tls = searchParams.get("tls");
 
-    setHost(decodeURIComponent(hostParam || DEFAULT_HOST));
-    setPort(decodeURIComponent(portParam || DEFAULT_PORT));
+    setHost(decodeURIComponent(hostParam || ""));
+    setPort(decodeURIComponent(portParam || ""));
     setUsername(decodeURIComponent(usernameParam ?? ""));
     setTLS(tls === "true")
   }, [searchParams]);

app/settings/Configurations.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useState, KeyboardEvent } from "react";
 import { Toast, cn, prepareArg, securedFetch } from "@/lib/utils";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import Input from "../components/ui/Input";
+import Button from "../components/ui/Button";
 
 type Config = {
     name: string,
@@ -194,10 +195,7 @@ export default function Configurations() {
                             <TableRow key={name} className={cn("border-none", !(index % 2) && "bg-[#57577B] hover:bg-[#57577B]")}>
                                 <TableCell className="w-[20%] py-8">{name}</TableCell>
                                 <TableCell className="w-[70%]">{description}</TableCell>
-                                <TableCell onClick={() => {
-                                    setEditable(name)
-                                    setConfigValue(value.toString())
-                                }}>
+                                <TableCell>
                                     {
                                         editable === name && !disableRunTimeConfigs.has(name) ?
                                             <Input
@@ -211,7 +209,14 @@ export default function Configurations() {
                                                 onKeyDown={(e) => handelSetConfig(e, name)}
                                                 value={configValue}
                                             />
-                                            : value
+                                            : <Button
+                                                label={typeof value === "number" ? value.toString() : value}
+                                                onClick={() => {
+                                                    setEditable(name)
+                                                    setConfigValue(value.toString())
+                                                }}
+                                            />
+
                                     }
                                 </TableCell>
                             </TableRow>

app/settings/users/Users.tsx

@@ -42,11 +42,11 @@ export default function Users() {
 
     const handelSetRole = async (role: string, username?: string) => {
         const updatedUsers = await Promise.all(users.map(async user => {
-            const updated = username ? user.username === username : user.selected
+            const selected = username ? user.username === username : user.selected
 
-            if (!updated) return user
+            if (!selected) return user
 
-            const result = await securedFetch(`api/user/${username}/?role=${role}`, {
+            const result = await securedFetch(`api/user/${user.username}/?role=${role}`, {
                 method: 'PATCH'
             })
 

e2e/config/urls.json

@@ -0,0 +1,16 @@
+{
+    "api": {
+        "addGraphUrl": "http://localhost:3000/api/graph/",
+        "LoginApiUrl": "http://localhost:3000/api/auth/providers",
+        "deleteGraphUrl": "http://localhost:3000/api/graph/"
+    },
+
+    "falkorDBWeb": "https://www.falkordb.com/",
+    "localHost": "http://localhost:3000",
+    "loginUrl":"http://localhost:3000/login",
+    "graphUrl": "http://localhost:3000/graph",
+    "schemaUrl": "http://localhost:3000/schema",
+    "settingsUrl": "http://localhost:3000/settings",
+    "documentationUrl": "https://docs.falkordb.com/",
+    "supportUrl": "https://www.falkordb.com/contact-us/"
+}

e2e/config/user.json

@@ -0,0 +1,14 @@
+{
+    "user1":{
+        "userName": "test1",
+        "role": "Read-Write",
+        "password": "Test111@",
+        "confirmPassword": "Test111@"
+    },
+    "user2":{
+        "userName": "test2",
+        "role": "Read-Write",
+        "password": "Test222@",
+        "confirmPassword": "Test222@"
+    }
+}

e2e/infra/api/apiRequests.ts

@@ -0,0 +1,25 @@
+import { APIRequestContext, request } from "@playwright/test"
+
+
+const getRequest = async (url: string, body: any, availableRequest?: APIRequestContext, headers?: Record<string, string>) => {
+  const requestOptions = {
+    data: body,
+    headers: headers || undefined,
+  };
+
+  const requestContext = availableRequest || (await request.newContext());
+  return await requestContext.get(url, requestOptions);
+};
+
+const deleteRequest = async (url: string, headers?: Record<string, string>) => {
+  const requestOptions = {
+    headers: headers || undefined,
+  };
+
+  const requestContext = await request.newContext();
+  return await requestContext.delete(url, requestOptions);
+};
+
+
+
+export{ getRequest, deleteRequest }

e2e/infra/ui/basePage.ts

@@ -0,0 +1,22 @@
+import { Page } from 'playwright';
+
+export default class BasePage {
+    protected page: Page;
+
+    constructor(page: Page) {
+        this.page = page;
+    }
+
+    async initPage(){
+        await this.page.waitForLoadState()
+    }
+
+    getCurrentURL() : string {
+        return this.page.url();
+    }
+
+    async refreshPage(){
+        await this.page.reload();
+    }
+
+}

e2e/infra/ui/browserWrapper.ts

@@ -0,0 +1,66 @@
+import { chromium, Browser, BrowserContext, Page } from 'playwright';
+import BasePage from './basePage';
+
+export default class BrowserWrapper {
+
+    private browser: Browser | null = null;
+
+    private context: BrowserContext | null = null;
+
+    private page: Page | null = null;
+
+    async createNewPage<T extends BasePage>(pageClass: new (page: Page) => T, url?: string) {
+        if (!this.browser) {
+            this.browser = await chromium.launch();
+        }
+        if (!this.context) {
+            this.context = await this.browser.newContext();
+        }
+        if (!this.page) {
+            this.page = await this.context.newPage();
+        }
+        if (url) {
+            await this.navigateTo(url)
+        }
+
+        const pageInstance = new pageClass(this.page);
+        return pageInstance;
+    }
+
+    getContext(): BrowserContext | null {
+        return this.context;
+    }
+
+    async getPage() {
+        if (!this.page) {
+            throw new Error('Browser is not launched yet!');
+        }
+        return this.page;
+    }
+
+    async setPageToFullScreen() {
+        if (!this.page) {
+            throw new Error('Browser is not launched yet!');
+        }
+        await this.page.setViewportSize({ width: 1920, height: 1080 });
+    }
+
+    async navigateTo(url: string) {
+        if (!this.page) {
+            throw new Error('Browser is not launched yet!');
+        }
+        await this.page.goto(url);
+    }
+
+    async closePage() {
+        this.page ? await this.page.close() : this.page = null;
+    }
+
+    async closeBrowser() {
+        if (this.browser) {
+            await this.browser.close();
+        }
+    }
+
+}
+

e2e/infra/utils.ts

@@ -0,0 +1,21 @@
+import { Locator, Page } from "playwright";
+
+export const waitForElementToBeVisible = async (locator:Locator,time=400,retry=5):Promise<boolean> => {
+
+    while(retry >0){
+       if(await locator.isVisible()){
+        return true
+       }
+       retry = retry-1
+       await delay(time)
+    }
+    return false
+}
+
+export function delay(ms: number) {
+    return new Promise( resolve => setTimeout(resolve, ms) );
+}
+
+export const waitForTimeOut = async (page: Page, time=500) => {
+    await page.waitForTimeout(time);
+}