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}