Merge pull request #538 from Lemoncode/vnext

copy paste functionallity

Author: brauliodiez

.github/workflows/ci.yml

@@ -22,3 +22,27 @@ jobs:
         run: npm run tsc-check
       - name: Tests front
         run: npm test
+
+  e2e-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Use Node.js 18.13.0
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18.13.0'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Check TypeScript Types
+        run: npm run tsc-check
+
+      - name: Run E2E tests
+        run: npm run ci:e2e

e2e/add-new-collection.spec.ts

@@ -0,0 +1,30 @@
+import { test, expect } from '@playwright/test';
+
+test('opens MongoDB Designer, adds collection, and checks "New Collection" visibility', async ({
+  page,
+}) => {
+  await page.goto('');
+
+  await page.getByRole('link', { name: 'Launch MongoDB Designer' }).click();
+  await expect(page).toHaveURL('http://localhost:5173/editor.html');
+
+  const newButton = page.getByRole('button', { name: 'New' });
+  await expect(newButton).toBeVisible();
+  await newButton.click();
+
+  const addCollectionButton = page
+    .getByRole('button', { name: 'Add Collection' })
+    .first();
+  await expect(addCollectionButton).toBeVisible();
+  await addCollectionButton.click();
+
+  const applyButton = page.getByRole('button', { name: 'Apply' });
+  await expect(applyButton).toBeVisible();
+  await expect(applyButton).toBeEnabled();
+  await applyButton.click();
+
+  const newCollectionText = page.locator('svg g text', {
+    hasText: 'New Collection',
+  });
+  await expect(newCollectionText).toBeVisible();
+});

package-lock.json

@@ -14,7 +14,8 @@
     "test": "vitest",
     "prepare": "husky || \"No need to install husky\"",
     "tsc-check": "tsc --noEmit",
-    "e2e": "playwright test --ui"
+    "e2e": "playwright test --ui",
+    "ci:e2e": "playwright test"
   },
   "dependencies": {
     "@lemoncode/fonk": "^1.5.4",

package.json

@@ -26,11 +26,6 @@ export default defineConfig({
       use: { ...devices['Desktop Firefox'] },
     },
 
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
-
     /* Test against mobile viewports. */
     // {
     //   name: 'Mobile Chrome',
@@ -54,6 +49,7 @@ export default defineConfig({
   /* Run your local dev server before starting the tests */
   webServer: {
     command: 'npm run dev',
+    url: BASE_URL,
     reuseExistingServer: !process.env.CI,
   },
 });

playwright.config.ts

@@ -0,0 +1,15 @@
+export const CopyIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 256 256"
+    >
+      <path
+        fill="currentColor"
+        d="M216 32H88a8 8 0 0 0-8 8v40H40a8 8 0 0 0-8 8v128a8 8 0 0 0 8 8h128a8 8 0 0 0 8-8v-40h40a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8m-56 176H48V96h112Zm48-48h-32V88a8 8 0 0 0-8-8H96V48h112Z"
+      />
+    </svg>
+  );
+};

src/common/components/icons/copy-icon.component.tsx

@@ -22,3 +22,5 @@ export * from './add-folder.component';
 export * from './down-icon';
 export * from './up-icon.component';
 export * from './remove-icon.component';
+export * from './copy-icon.component';
+export * from './paste-icon.component';

src/common/components/icons/index.ts

@@ -0,0 +1,15 @@
+export const PasteIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 256 256"
+    >
+      <path
+        fill="currentColor"
+        d="M200 32h-36.26a47.92 47.92 0 0 0-71.48 0H56a16 16 0 0 0-16 16v168a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m-72 0a32 32 0 0 1 32 32H96a32 32 0 0 1 32-32m72 184H56V48h26.75A47.9 47.9 0 0 0 80 64v8a8 8 0 0 0 8 8h80a8 8 0 0 0 8-8v-8a47.9 47.9 0 0 0-2.75-16H200Z"
+      />
+    </svg>
+  );
+};

src/common/components/icons/paste-icon.component.tsx

@@ -78,4 +78,8 @@ export interface CanvasSchemaContextVm {
   updateFullRelation: (relation: RelationVm) => void;
   deleteSelectedItem: (selectedElementId: GUID) => void;
   switchIsPristine: (isPristine: boolean) => void;
+  duplicateSelectedTable: () => void;
+  copySelectedTable: () => void;
+  pasteTable: () => void;
+  hasClipboardContent: boolean;
 }

src/core/providers/canvas-schema/canvas-schema-vlatest.model.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { produce } from 'immer';
 import { CanvasSchemaContext } from './canvas-schema.context';
 import {
@@ -157,6 +157,75 @@ export const CanvasSchemaProvider: React.FC<Props> = props => {
     }));
   };
 
+  const duplicateSelectedTable = () => {
+    setSchema(prevSchema => {
+      if (!prevSchema.selectedElementId) return prevSchema;
+
+      const selectedTable = prevSchema.tables.find(
+        table => table.id === prevSchema.selectedElementId
+      );
+
+      if (!selectedTable) return prevSchema;
+
+      // Create duplicate with new IDs
+      const duplicateTable: TableVm = {
+        ...selectedTable,
+        id: crypto.randomUUID(), // Generate new ID
+        x: selectedTable.x + 50, // Offset position
+        y: selectedTable.y + 50,
+        fields: selectedTable.fields.map(field => ({
+          ...field,
+          id: crypto.randomUUID(), // New IDs for fields
+        })),
+      };
+
+      return {
+        ...prevSchema,
+        tables: [...prevSchema.tables, duplicateTable],
+        isPristine: false,
+      };
+    });
+  };
+
+  const [clipboardTable, setClipboardTable] = useState<TableVm | null>(null);
+  const [pasteOffset, setPasteOffset] = useState({ x: 0, y: 0 });
+
+  const copySelectedTable = () => {
+    const selectedTable = canvasSchema.tables.find(
+      table => table.id === canvasSchema.selectedElementId
+    );
+    if (selectedTable) {
+      setClipboardTable(selectedTable);
+      setPasteOffset({ x: 0, y: 0 }); // Reset offset on copy
+    }
+  };
+
+  const pasteTable = () => {
+    if (clipboardTable) {
+      // Increment offset
+      const newOffset = { x: pasteOffset.x + 50, y: pasteOffset.y + 50 };
+
+      const newTable: TableVm = {
+        ...clipboardTable,
+        id: crypto.randomUUID(),
+        x: clipboardTable.x + newOffset.x,
+        y: clipboardTable.y + newOffset.y,
+        fields: clipboardTable.fields.map(field => ({
+          ...field,
+          id: crypto.randomUUID(),
+        })),
+      };
+
+      setSchema(prev => ({
+        ...prev,
+        tables: [...prev.tables, newTable],
+        isPristine: false,
+      }));
+
+      setPasteOffset(newOffset);
+    }
+  };
+
   return (
     <CanvasSchemaContext.Provider
       value={{
@@ -177,6 +246,10 @@ export const CanvasSchemaProvider: React.FC<Props> = props => {
         updateFullRelation,
         deleteSelectedItem,
         switchIsPristine: switchIsPristine,
+        duplicateSelectedTable,
+        copySelectedTable,
+        pasteTable,
+        hasClipboardContent: Boolean(clipboardTable),
       }}
     >
       {children}

src/core/providers/canvas-schema/canvas-schema.provider.tsx

@@ -42,6 +42,9 @@ export const CanvasPod: React.FC = () => {
     doRedo,
     deleteSelectedItem,
     loadSchema,
+    duplicateSelectedTable,
+    copySelectedTable,
+    pasteTable,
   } = useCanvasSchemaContext();
   const {
     canvasViewSettings,
@@ -221,6 +224,24 @@ export const CanvasPod: React.FC = () => {
           deleteSelectedItem(canvasSchema.selectedElementId);
         }
       }
+
+      // Add Cmd/Ctrl+D for duplicate
+      if ((e.metaKey || e.ctrlKey) && e.key === 'd') {
+        e.preventDefault(); // Prevent browser default
+        duplicateSelectedTable();
+      }
+
+      // Add Cmd/Ctrl+C for copy
+      if ((e.metaKey || e.ctrlKey) && e.key === 'c') {
+        e.preventDefault(); // Prevent browser default
+        copySelectedTable();
+      }
+
+      // Add Cmd/Ctrl+V for paste
+      if ((e.metaKey || e.ctrlKey) && e.key === 'v') {
+        e.preventDefault(); // Prevent browser default
+        pasteTable();
+      }
     };
 
     modalDialog.isOpen

src/pods/canvas/canvas.pod.tsx

@@ -0,0 +1,20 @@
+import { useCanvasSchemaContext } from '@/core/providers/canvas-schema';
+import { CopyIcon } from '@/common/components/icons';
+import { ToolbarButton } from '@/pods/toolbar/components/toolbar-button';
+import classes from '@/pods/toolbar/toolbar.pod.module.css';
+import { SHORTCUTS } from '../../shortcut/shortcut.const';
+
+export const CopyButton = () => {
+  const { canvasSchema, copySelectedTable } = useCanvasSchemaContext();
+
+  return (
+    <ToolbarButton
+      icon={<CopyIcon />}
+      label="Copy"
+      onClick={copySelectedTable}
+      className={`${classes.button} hide-mobile`}
+      disabled={!canvasSchema.selectedElementId}
+      shortcutOptions={SHORTCUTS.copy}
+    />
+  );
+};

src/pods/toolbar/components/copy-button/copy-button.component.tsx

@@ -0,0 +1 @@
+export * from './copy-button.component';

src/pods/toolbar/components/copy-button/index.ts

@@ -0,0 +1,20 @@
+import { useCanvasSchemaContext } from '@/core/providers/canvas-schema';
+import { CopyIcon } from '@/common/components/icons';
+import { ToolbarButton } from '@/pods/toolbar/components/toolbar-button';
+import classes from '@/pods/toolbar/toolbar.pod.module.css';
+import { SHORTCUTS } from '../../shortcut/shortcut.const';
+
+export const DuplicateButton = () => {
+  const { canvasSchema, duplicateSelectedTable } = useCanvasSchemaContext();
+
+  return (
+    <ToolbarButton
+      icon={<CopyIcon />}
+      label="Duplicate Table"
+      onClick={duplicateSelectedTable}
+      className={`${classes.button} hide-mobile`}
+      disabled={!canvasSchema.selectedElementId}
+      shortcutOptions={SHORTCUTS.duplicate}
+    />
+  );
+};

src/pods/toolbar/components/duplicate-button/duplicate-button.component.tsx

@@ -0,0 +1 @@
+export * from './duplicate-button.component';

src/pods/toolbar/components/duplicate-button/index.ts

@@ -12,3 +12,6 @@ export * from './redo-button';
 export * from './delete-button';
 export * from './add-collection';
 export * from './about-button';
+export * from './duplicate-button';
+export * from './copy-button';
+export * from './paste-button';

src/pods/toolbar/components/index.ts

@@ -0,0 +1 @@
+export * from './paste-button.component';

src/pods/toolbar/components/paste-button/index.ts

@@ -0,0 +1,20 @@
+import { useCanvasSchemaContext } from '@/core/providers/canvas-schema';
+import { PasteIcon } from '@/common/components/icons';
+import { ToolbarButton } from '@/pods/toolbar/components/toolbar-button';
+import classes from '@/pods/toolbar/toolbar.pod.module.css';
+import { SHORTCUTS } from '../../shortcut/shortcut.const';
+
+export const PasteButton = () => {
+  const { pasteTable, hasClipboardContent } = useCanvasSchemaContext();
+
+  return (
+    <ToolbarButton
+      icon={<PasteIcon />}
+      label="Paste"
+      onClick={pasteTable}
+      className={`${classes.button} hide-mobile`}
+      disabled={!hasClipboardContent}
+      shortcutOptions={SHORTCUTS.Paste}
+    />
+  );
+};

src/pods/toolbar/components/paste-button/paste-button.component.tsx

@@ -77,4 +77,22 @@ export const SHORTCUTS: Shortcut = {
     targetKey: ['-', '-'],
     targetKeyLabel: '"-"',
   },
+  duplicate: {
+    description: 'Duplicate',
+    id: 'duplicate-button-shortcut',
+    targetKey: ['d'],
+    targetKeyLabel: 'D',
+  },
+  copy: {
+    description: 'Copy',
+    id: 'copy-button-shortcut',
+    targetKey: ['c'],
+    targetKeyLabel: 'C',
+  },
+  paste: {
+    description: 'Paste',
+    id: 'paste-button-shortcut',
+    targetKey: ['v'],
+    targetKeyLabel: 'V',
+  },
 };

src/pods/toolbar/shortcut/shortcut.const.ts

@@ -15,6 +15,8 @@ import {
   DeleteButton,
   AboutButton,
   CanvasSettingButton,
+  CopyButton,
+  PasteButton,
 } from './components';
 import classes from './toolbar.pod.module.css';
 
@@ -28,6 +30,8 @@ export const ToolbarPod: React.FC = () => {
       <ZoomOutButton />
       <AddCollection />
       <RelationButton />
+      <CopyButton />
+      <PasteButton />
       <UndoButton />
       <RedoButton />
       <ExportButton />