Add deletion & naming for folders and workspaces (#67)

* Add naming on creation & deletion for workspaces & folders

* Update tests
---------

Co-authored-by: JMLizano <[email protected]>

lynxkite-app/src/lynxkite/app/main.py

@@ -1,5 +1,5 @@
 import os
-
+import shutil
 if os.environ.get("NX_CUGRAPH_AUTOCONFIG", "").strip().lower() == "true":
     import cudf.pandas
 
@@ -66,6 +66,16 @@ async def save_and_execute(req: SaveRequest):
     return req.ws
 
 
+@app.post("/api/delete")
+async def delete_workspace(req: dict):
+    json_path: pathlib.Path = DATA_PATH / req["path"]
+    crdt_path: pathlib.Path = CRDT_PATH / f"{req["path"]}.crdt"
+    assert json_path.is_relative_to(DATA_PATH)
+    assert crdt_path.is_relative_to(CRDT_PATH)
+    json_path.unlink()
+    crdt_path.unlink()
+
+
 @app.get("/api/load")
 def load(path: str):
     path = DATA_PATH / path
@@ -76,7 +86,7 @@ def load(path: str):
 
 
 DATA_PATH = pathlib.Path.cwd() / "data"
-
+CRDT_PATH = pathlib.Path.cwd() / "crdt_data"
 
 @dataclasses.dataclass(order=True)
 class DirectoryEntry:
@@ -107,6 +117,18 @@ def make_dir(req: dict):
     return list_dir(path.parent)
 
 
+@app.post("/api/dir/delete")
+def delete_dir(req: dict):
+    path: pathlib.Path = DATA_PATH / req["path"]
+    assert all([
+        path.is_relative_to(DATA_PATH),
+        path.exists(),
+        path.is_dir()
+    ])
+    shutil.rmtree(path)
+    return list_dir(path.parent)
+
+
 @app.get("/api/service/{module_path:path}")
 async def service_get(req: fastapi.Request, module_path: str):
     """Executors can provide extra HTTP APIs through the /api/service endpoint."""

lynxkite-app/web/src/Directory.tsx

@@ -1,7 +1,9 @@
 // The directory browser.
-import { useParams } from "react-router";
+import { useParams, useNavigate } from "react-router";
+import { useState } from "react";
 import useSWR from 'swr'
 
+
 import logo from './assets/logo.png';
 // @ts-ignore
 import Home from '~icons/tabler/home'
@@ -13,13 +15,22 @@ import FolderPlus from '~icons/tabler/folder-plus'
 import File from '~icons/tabler/file'
 // @ts-ignore
 import FilePlus from '~icons/tabler/file-plus'
+// @ts-ignore
+import Trash from '~icons/tabler/trash';
+
+
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json());
 
 export default function () {
   const { path } = useParams();
   const encodedPath = encodeURIComponent(path || '');
-  const list = useSWR(`/api/dir/list?path=${encodedPath}`, fetcher)
+  let list = useSWR(`/api/dir/list?path=${encodedPath}`, fetcher);
+  const navigate = useNavigate();
+  const [isCreatingDir, setIsCreatingDir] = useState(false);
+  const [isCreatingWorkspace, setIsCreatingWorkspace] = useState(false);
+  
+  
   function link(item: any) {
     if (item.type === 'directory') {
       return `/dir/${item.name}`;
@@ -27,61 +38,136 @@ export default function () {
       return `/edit/${item.name}`;
     }
   }
+  
   function shortName(item: any) {
     return item.name.split('/').pop();
   }
-  function newName(list: any[]) {
+
+  function newName(list: any[], baseName: string = "Untitled") {
     let i = 0;
     while (true) {
-      const name = `Untitled${i ? ` ${i}` : ''}`;
+      const name = `${baseName}${i ? ` ${i}` : ''}`;
       if (!list.find(item => item.name === name)) {
         return name;
       }
       i++;
     }
   }
-  function newWorkspaceIn(path: string, list: any[]) {
-    const pathSlash = path ? `${path}/` : '';
-    return `/edit/${pathSlash}${newName(list)}`;
+  
+  function newWorkspaceIn(path: string, list: any[], workspaceName?: string) {
+    const pathSlash = path ? `${path}/` : "";
+    const name = workspaceName || newName(list);
+    navigate(`/edit/${pathSlash}${name}`, {replace: true});
   }
-  async function newFolderIn(path: string, list: any[]) {
-    const pathSlash = path ? `${path}/` : '';
-    const name = newName(list);
+  
+
+  async function newFolderIn(path: string, list: any[], folderName?: string) {
+    const name = folderName || newName(list, "New Folder");
+    const pathSlash = path ? `${path}/` : "";
+  
     const res = await fetch(`/api/dir/mkdir`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ path: pathSlash + name }),
     });
     list = await res.json();
+    if (res.ok) {
+      navigate(`/dir/${pathSlash}${name}`);
+    } else {
+      alert("Failed to create folder.");
+    }
+  }
+  
+  async function deleteItem(item: any) {
+    if (!window.confirm(`Are you sure you want to delete "${item.name}"?`)) return;
+    const pathSlash = path ? `${path}/` : "";
+
+    const apiPath = item.type === "directory" ? `/api/dir/delete`: `/api/delete`;
+    const res = await fetch(apiPath, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ path: pathSlash + item.name }),
+    });
+    list = await res.json();
   }
 
   return (
     <div className="directory">
       <div className="logo">
-        <a href="https://lynxkite.com/"><img src={logo} className="logo-image" alt="LynxKite logo" /></a>
+        <a href="https://lynxkite.com/">
+          <img src={logo} className="logo-image" alt="LynxKite logo" />
+        </a>
         <div className="tagline">The Complete Graph Data Science Platform</div>
       </div>
+
       <div className="entry-list">
         {list.error && <p className="error">{list.error.message}</p>}
-        {list.isLoading &&
+        {list.isLoading && (
           <div className="loading spinner-border" role="status">
             <span className="visually-hidden">Loading...</span>
-          </div>}
-        {list.data &&
+          </div>
+        )}
+
+        {list.data && (
           <>
             <div className="actions">
-              <a href={newWorkspaceIn(path || "", list.data)}><FilePlus /> New workspace</a>
-              <a href="" onClick={() => newFolderIn(path || "", list.data)}><FolderPlus /> New folder</a>
+                <div className="new-workspace">
+                  {isCreatingWorkspace && 
+                    // @ts-ignore
+                    <form onSubmit={(e) => {e.preventDefault(); newWorkspaceIn(path || "", list.data, e.target.workspaceName.value.trim())}}>
+                      <input
+                        type="text"
+                        name="workspaceName"
+                        defaultValue={newName(list.data)}
+                        placeholder={newName(list.data)}
+                      />
+                    </form>
+                  }
+                  <button type="button" onClick={() => setIsCreatingWorkspace(true)}>
+                    <FolderPlus /> New workspace
+                  </button>
+                </div>
+
+                <div className="new-folder">
+                  {isCreatingDir && 
+                    // @ts-ignore
+                    <form onSubmit={(e) =>{e.preventDefault(); newFolderIn(path || "", list.data, e.target.folderName.value.trim())}}>
+                      <input
+                        type="text"
+                        name="folderName"
+                        defaultValue={newName(list.data)}
+                        placeholder={newName(list.data)}
+                      />
+                    </form>
+                  }
+                  <button type="button" onClick={() => setIsCreatingDir(true)}>
+                    <FolderPlus /> New folder
+                  </button>
+                </div>
             </div>
-            {path && <div className="breadcrumbs"><a href="/dir/"><Home /></a> {path} </div>}
-            {list.data.map((item: any) =>
-              <a key={link(item)} className="entry" href={link(item)}>
-                {item.type === 'directory' ? <Folder /> : <File />}
-                {shortName(item)}
-              </a>
+
+            {path && (
+              <div className="breadcrumbs">
+                <a href="/dir/">
+                  <Home />
+                </a>{" "}
+                <span className="current-folder">{path}</span>
+              </div>
             )}
+
+            {list.data.map((item: any) => (
+              <div key={item.name} className="entry">
+                <a key={link(item)} className="entry" href={link(item)}>
+                  {item.type === 'directory' ? <Folder /> : <File />}
+                  {shortName(item)}
+                </a>
+                <button onClick={() => { deleteItem(item) }}>
+                  <Trash />
+                </button>
+              </div>
+            ))}
           </>
-        }
+        )}
       </div>
     </div>
   );

lynxkite-app/web/src/index.css

@@ -285,13 +285,15 @@ body {
   }
 
   .entry-list .entry {
-    display: block;
+    display: flex;
     border-bottom: 1px solid whitesmoke;
     padding-left: 10px;
     color: #004165;
     cursor: pointer;
     user-select: none;
     text-decoration: none;
+    justify-content: space-between;
+    padding-right: 10px;
   }
 
   .entry-list .open .entry,

lynxkite-app/web/tests/basic.spec.ts

@@ -1,17 +1,21 @@
 // Tests some basic operations like box creation, deletion, and dragging.
 import { test, expect } from '@playwright/test';
-import { Workspace } from './lynxkite';
+import { Splash, Workspace } from './lynxkite';
 
 
 let workspace: Workspace;
 
 
 test.beforeEach(async ({ browser }) => {
-  workspace = await Workspace.empty(await browser.newPage());
-  await workspace.setEnv('PyTorch model'); // Workaround until we fix the default environment
-  await workspace.setEnv('LynxKite Graph Analytics');
+  workspace = await Workspace.empty(await browser.newPage(), 'basic_spec_test');
 });
 
+test.afterEach(async ({ }) => {
+  await workspace.close();
+  const splash = await new Splash(workspace.page);
+  splash.page.on('dialog', async dialog => { await dialog.accept(); });
+  await splash.deleteEntry('basic_spec_test');
+});
 
 test('Box creation & deletion per env', async () => {
   const envs = await workspace.getEnvs();

lynxkite-app/web/tests/directory.spec.ts

@@ -0,0 +1,98 @@
+// Tests some basic operations like box creation, deletion, and dragging.
+import { test, expect } from '@playwright/test';
+import { Workspace, Splash } from './lynxkite';
+
+
+test.describe("Directory operations", () => {
+
+  let splash: Splash;
+
+  test.beforeAll(async ({ browser }) => {
+    const page = await browser.newPage()
+    // To make deletion confirmation dialog to be automatically accepted
+    page.on('dialog', async dialog => { await dialog.accept(); });
+    splash = await Splash.open(page);
+  });
+
+
+  test('Create workspace with default name', async () => {
+    const workspace = await Workspace.empty(splash.page);
+    // Not checking for exact match, since there may be pre-existing "Untitled" workspaces
+    expect(workspace.name).toContain('Untitled');
+    await workspace.close();
+    await splash.deleteEntry(workspace.name);
+  });
+
+  test('Create & delete workspace', async () => {
+    const workspaceName = `TestWorkspace-${Date.now()}`;
+    const workspace = await Workspace.empty(splash.page, workspaceName);
+    await workspace.expectCurrentWorkspaceIs(workspaceName);
+    // Add a box so the workspace is saved
+    await workspace.addBox('Import Parquet');
+    await workspace.close();
+    await splash.deleteEntry(workspaceName);
+    await expect(splash.getEntry(workspaceName)).not.toBeVisible();
+  });
+
+  test('Create & delete folder', async () => {
+    const folderName = `TestFolder-${Date.now()}`;
+    await splash.createFolder(folderName);
+    await expect(splash.currentFolder()).toHaveText(folderName);
+    await splash.goHome();
+    await splash.deleteEntry(folderName);
+    await expect(splash.getEntry(folderName)).not.toBeVisible();
+  });
+
+  test('Create folder with default name', async () => {
+    await splash.createFolder();
+    await expect(splash.currentFolder()).toContainText('Untitled');
+  });
+});
+
+
+test.describe.serial('Nested folders & workspaces operations', () => {
+
+  let splash;
+
+  test.beforeEach(() => {
+    // Nested navigation doesn't work yet
+    test.skip();
+  });
+
+  test.beforeAll(async ({ browser }) => {
+    const page = await browser.newPage()
+    // To make deletion confirmation dialog to be automatically accepted
+    page.on('dialog', async dialog => { await dialog.accept(); });
+    splash = await Splash.open(page);
+    await splash.createFolder('TestFolder');
+  });
+
+  test.afterAll(async () => {
+    //cleanup
+    test.skip();
+    await splash.goHome();
+    await splash.deleteEntry('TestFolder');
+  });
+
+  test('Create nested folder', async () => {
+    await splash.createFolder('TestFolder2');
+    await expect(splash.currentFolder()).toHaveText('TestFolder2');
+    await splash.toParent();
+  });
+
+  test('Delete nested folder', async () => {
+    await splash.deleteEntry('TestFolder2');
+    await expect(splash.getEntry('TestFolder2')).not.toBeVisible();
+  });
+
+  test('Create nested workspace', async () => {
+    const workspace = splash.createWorkspace('TestWorkspace');
+    await workspace.expectCurrentWorkspaceIs('TestWorkspace');
+    await workspace.close();
+  });
+
+  test('Delete nested workspace', async () => {
+    await splash.deleteEntry('TestWorkspace');
+    await expect(splash.getEntry('TestWorkspace')).not.toBeVisible();
+  });
+});

lynxkite-app/web/tests/errors.spec.ts

@@ -1,15 +1,20 @@
 // Tests error reporting.
 import { test, expect } from '@playwright/test';
-import { Workspace } from './lynxkite';
+import { Splash, Workspace } from './lynxkite';
 
 
 let workspace: Workspace;
 
 
 test.beforeEach(async ({ browser }) => {
-  workspace = await Workspace.empty(await browser.newPage());
-  await workspace.setEnv('PyTorch model'); // Workaround until we fix the default environment
-  await workspace.setEnv('LynxKite Graph Analytics');
+  workspace = await Workspace.empty(await browser.newPage(), 'error_spec_test');
+});
+
+test.afterEach(async ({ }) => {
+  await workspace.close();
+  const splash = await new Splash(workspace.page);
+  splash.page.on('dialog', async dialog => { await dialog.accept(); });
+  await splash.deleteEntry('error_spec_test');
 });
 
 

lynxkite-app/web/tests/examples.spec.ts

@@ -42,6 +42,14 @@ test.fail('RAG chatbot app', async ({ page }) => {
 });
 
 
+test.fail('night demo', async ({ page }) => {
+    // airlines.graphml file not found
+    // requires cugraph
+    const ws = await Workspace.open(page, "night demo");
+    expect(await ws.isErrorFree()).toBeTruthy();
+});
+
+
 test('Pillow example', async ({ page }) => {
     const ws = await Workspace.open(page, "Image processing");
     expect(await ws.isErrorFree()).toBeTruthy();

lynxkite-app/web/tests/lynxkite.ts

@@ -13,15 +13,17 @@ export const ROOT = 'automated-tests';
 
 export class Workspace {
   readonly page: Page;
+  name: string;
 
-  constructor(page: Page) {
+  constructor(page: Page, workspaceName: string) {
     this.page = page;
+    this.name = workspaceName;
   }
 
   // Starts with a brand new workspace.
   static async empty(page: Page, workspaceName?: string): Promise<Workspace> {
     const splash = await Splash.open(page);
-    return await splash.openNewWorkspace(workspaceName ?? 'test-example');
+    return await splash.createWorkspace(workspaceName);
   }
 
   static async open(page: Page, workspaceName: string): Promise<Workspace> {
@@ -31,7 +33,7 @@ export class Workspace {
     await ws.expectCurrentWorkspaceIs(workspaceName);
     return ws
   }
-  
+
   async getEnvs() {
     // Return all available workspace environments
     return await this.page.locator('select[name="workspace-env"] option').allInnerTexts();
@@ -66,7 +68,7 @@ export class Workspace {
     
     // Some x,y offset, otherwise the box handle may fall outside the viewport.
     await this.page.locator('.react-flow__pane').click({ position: { x: 20, y: 20 }});
-    await this.page.getByText(boxName).click();
+    await this.page.locator('.node-search').getByText(boxName).click();
     await this.page.keyboard.press('Escape');
     // Workaround to wait for the deselection animation after choosing a box. Otherwise, the next box will not be added.
     await new Promise(resolve => setTimeout(resolve, 200));
@@ -138,6 +140,10 @@ export class Workspace {
     }
     return true;
   }
+
+  async close() { 
+    await this.page.locator('a[href="/dir/"]').click();
+  }
 }
 
 
@@ -166,15 +172,53 @@ export class Splash {
     return this.page.getByRole('link', { name: name });
   }
 
-  async openNewWorkspace(name: string) {
-    // TODO: Support workspace naming
-    await this.page.getByRole('link', { name: 'New workspace' }).click();
-    const ws = new Workspace(this.page);
+  getEntry(name: string) {
+    return this.page.locator('.entry').filter({ hasText: name }).first();
+  }
+
+  async createWorkspace(name?: string) {
+    await this.page.getByRole('button', { name: 'New workspace' }).click();
+    await this.page.locator('input[name="workspaceName"]').click();
+    let workspaceName: string;
+    if (name) {
+      workspaceName = name;
+      await this.page.locator('input[name="workspaceName"]').fill(name);
+    } else {
+      workspaceName = await this.page.locator('input[name="workspaceName"]').inputValue();
+    }
+    await this.page.locator('input[name="workspaceName"]').press('Enter');
+    const ws = new Workspace(this.page, workspaceName);
+    // Workaround until we fix the default environment
+    await ws.setEnv('PyTorch model'); 
+    await ws.setEnv('LynxKite Graph Analytics');
     return ws;
   }
 
   async openWorkspace(name: string) {
     await this.workspace(name).click();
-    return new Workspace(this.page);
+    return new Workspace(this.page, name);
   }
+
+  async createFolder(folderName?: string) {
+    await this.page.getByRole('button', { name: 'New folder' }).click();
+    await this.page.locator('input[name="folderName"]').click();
+    if (folderName) {
+      await this.page.locator('input[name="folderName"]').fill(folderName);
+    }
+    await this.page.locator('input[name="folderName"]').press('Enter');
+  }
+
+  async deleteEntry(entryName: string) {
+    await this.getEntry(entryName).locator('button').click();
+    await this.page.reload();
+  }
+
+  currentFolder() {
+    return this.page.locator('.current-folder');
+  }
+
+  async goHome() {
+    await this.page.locator('a[href="/dir/"]').click();
+  }
+
 }

lynxkite-app/web/tests/upload.spec.ts

@@ -1,6 +1,6 @@
 // Test uploading a file in an import box.
 import { test, expect } from '@playwright/test';
-import { Workspace } from './lynxkite';
+import { Splash, Workspace } from './lynxkite';
 import { join, dirname  } from 'path';
 import { fileURLToPath } from 'url';
 
@@ -9,9 +9,14 @@ let workspace: Workspace;
 
 
 test.beforeEach(async ({ browser }) => {
-  workspace = await Workspace.empty(await browser.newPage());
-  await workspace.setEnv('PyTorch model'); // Workaround until we fix the default environment
-  await workspace.setEnv('LynxKite Graph Analytics');
+  workspace = await Workspace.empty(await browser.newPage(), 'upload_spec_test');
+});
+
+test.afterEach(async ({ }) => {
+  await workspace.close();
+  const splash = await new Splash(workspace.page);
+  splash.page.on('dialog', async dialog => { await dialog.accept(); });
+  await splash.deleteEntry('upload_spec_test');
 });