feat: drag and drop from palette @W-19284238

src/design/messaging-api/domain-types.ts

@@ -19,6 +19,13 @@ interface WithComponentId {
   componentId: string;
 }
 
+interface WithComponentType {
+  /**
+   * The component type that the event is related to.
+   */
+  componentType: string;
+}
+
 /**
  * @inline
  * @hidden
@@ -196,8 +203,7 @@ export interface ClientAcknowledgedEvent extends WithBaseEvent {
  */
 export interface ClientWindowDragEnteredEvent
   extends WithBaseEvent,
-    WithClientVector,
-    WithComponentId {
+    WithComponentType {
   eventType: 'ClientWindowDragEntered';
 }
 /**
@@ -208,7 +214,7 @@ export interface ClientWindowDragEnteredEvent
 export interface ClientWindowDragMovedEvent
   extends WithBaseEvent,
     WithClientVector,
-    WithComponentId {
+    WithComponentType {
   eventType: 'ClientWindowDragMoved';
 }
 /**
@@ -218,8 +224,7 @@ export interface ClientWindowDragMovedEvent
  */
 export interface ClientWindowDragExitedEvent
   extends WithBaseEvent,
-    WithClientVector,
-    WithComponentId {
+    WithComponentType {
   eventType: 'ClientWindowDragExited';
 }
 /**
@@ -229,8 +234,7 @@ export interface ClientWindowDragExitedEvent
  */
 export interface ClientWindowDragDroppedEvent
   extends WithBaseEvent,
-    WithClientVector,
-    WithComponentId {
+    WithComponentType {
   eventType: 'ClientWindowDragDropped';
 }
 /**
@@ -354,10 +358,6 @@ export interface ComponentMovedToRegionEvent
    * The region that the component is being moved from.
    */
   sourceRegionId: string;
-  /**
-   * The id of the component that the component was moved from.
-   */
-  sourceComponentId: string;
 }
 /**
  * Emits when a component is hovered over.
@@ -421,14 +421,13 @@ export interface ComponentDeletedEvent extends WithBaseEvent, WithComponentId {
  */
 export interface ComponentAddedToRegionEvent<
   TProps extends Record<string, unknown> = Record<string, unknown>
-> extends WithBaseEvent,
-    WithComponentId {
+> extends WithBaseEvent {
   eventType: 'ComponentAddedToRegion';
   /**
    * The specifier of the component to add.
    * This will be used to lookup the component in the registry.
    */
-  componentSpecifier: string;
+  componentType: string;
   /**
    * The properties of the component to add.
    * These will be used to initialize the component.
@@ -442,17 +441,27 @@ export interface ComponentAddedToRegionEvent<
    * The id of the region that the component is being added to.
    */
   targetRegionId: string;
+  /**
+   * When an insertComponentId is provided, this will insert the new component before or after the component with that component id.
+   */
+  insertType?: 'before' | 'after';
+  /**
+   * The id of the component this component should be inserted before or after.
+   * If not provided, then it is up to the host to determine where in the target region this is inserted.
+   */
+  insertComponentId?: string;
 }
 /**
  * Emits when a component drag starts from the host or client.
  * @target isomorphic
  * @group Events
  */
-export interface ComponentDragStartedEvent
-  extends WithBaseEvent,
-    WithComponentId,
-    Partial<WithClientVector> {
+export interface ComponentDragStartedEvent extends WithBaseEvent {
   eventType: 'ComponentDragStarted';
+  /**
+   * The type of the component that is being dragged.
+   */
+  componentType: string;
 }
 /**
  * Emits when an error occurs.

src/design/messaging-api/messenging-api.test.ts

@@ -356,7 +356,7 @@ describe('Messaging API', () => {
 
     describe.each`
       method                         | eventName                   | payload
-      ${'addComponentToRegion'}      | ${'ComponentAddedToRegion'} | ${{componentId: 'test-component', componentSpecifier: 'test-specifier', componentProperties: {test: 'value'}, targetComponentId: 'target-component', targetRegionId: 'test-region'}}
+      ${'addComponentToRegion'}      | ${'ComponentAddedToRegion'} | ${{componentId: 'test-component', componentType: 'test-specifier', componentProperties: {test: 'value'}, targetComponentId: 'target-component', targetRegionId: 'test-region'}}
       ${'moveComponentToRegion'}     | ${'ComponentMovedToRegion'} | ${{componentId: 'test-component', targetComponentId: 'target-component', targetRegionId: 'target-region', sourceRegionId: 'source-region', sourceComponentId: 'source-component'}}
       ${'notifyClientReady'}         | ${'ClientReady'}            | ${{clientId: 'test-client'}}
       ${'startComponentDrag'}        | ${'ComponentDragStarted'}   | ${{componentId: 'test-component', x: 100, y: 200}}
@@ -400,7 +400,7 @@ describe('Messaging API', () => {
 
     describe.each`
       method                                 | eventName                        | payload
-      ${'addComponentToRegion'}              | ${'ComponentAddedToRegion'}      | ${{componentId: 'test-component', componentSpecifier: 'test-specifier', componentProperties: {test: 'value'}, targetComponentId: 'target-component', targetRegionId: 'test-region'}}
+      ${'addComponentToRegion'}              | ${'ComponentAddedToRegion'}      | ${{componentId: 'test-component', componentType: 'test-specifier', componentProperties: {test: 'value'}, targetComponentId: 'target-component', targetRegionId: 'test-region'}}
       ${'moveComponentToRegion'}             | ${'ComponentMovedToRegion'}      | ${{componentId: 'test-component', targetComponentId: 'target-component', targetRegionId: 'target-region', sourceRegionId: 'source-region', sourceComponentId: 'source-component'}}
       ${'startComponentDrag'}                | ${'ComponentDragStarted'}        | ${{componentId: 'test-component', x: 100, y: 200}}
       ${'hoverInToComponent'}                | ${'ComponentHoveredIn'}          | ${{componentId: 'test-component'}}

src/design/react/components/ComponentDecorator.test.tsx

@@ -90,7 +90,7 @@ describe('design/react/ComponentDecorator', () => {
 
       const finalResult = Object.assign(result, {
         host,
-        element: result.container.querySelector('.pd-design--decorator'),
+        element: result.container.querySelector('.pd-design__decorator'),
       }) as Result;
 
       return finalResult;
@@ -150,22 +150,32 @@ describe('design/react/ComponentDecorator', () => {
     describe('when the component is a fragment', () => {
       it('should include the corresponding fragment class', async () => {
         const {element} = await testBed.render(TestComponent, {
-          designMetadata: {id: 'test-1', isFragment: true},
+          designMetadata: {
+            id: 'test-1',
+            isFragment: true,
+            regionDirection: 'row',
+            regionId: 'test-region',
+          },
         });
 
-        expect(element.classList.contains('pd-design--fragment')).toBe(true);
-        expect(element.classList.contains('pd-design--component')).toBe(false);
+        expect(element.classList.contains('pd-design__fragment')).toBe(true);
+        expect(element.classList.contains('pd-design__component')).toBe(false);
       });
     });
 
     describe('when the component is a component', () => {
       it('should include the corresponding component class', async () => {
         const {element} = await testBed.render(TestComponent, {
-          designMetadata: {id: 'test-1', isFragment: false},
+          designMetadata: {
+            id: 'test-1',
+            isFragment: false,
+            regionDirection: 'row',
+            regionId: 'test-region',
+          },
         });
 
-        expect(element.classList.contains('pd-design--fragment')).toBe(false);
-        expect(element.classList.contains('pd-design--component')).toBe(true);
+        expect(element.classList.contains('pd-design__fragment')).toBe(false);
+        expect(element.classList.contains('pd-design__component')).toBe(true);
       });
     });
 
@@ -182,8 +192,12 @@ describe('design/react/ComponentDecorator', () => {
       it('should show the frame', async () => {
         const {element} = await testBed.render(TestComponent);
 
-        expect(element.classList.contains('pd-design--show-frame')).toBe(true);
-        expect(element.classList.contains('pd-design--hovered')).toBe(true);
+        expect(element.classList.contains('pd-design__frame--visible')).toBe(
+          true
+        );
+        expect(
+          element.classList.contains('pd-design__decorator--hovered')
+        ).toBe(true);
       });
 
       it('should notify the host of the hover', async () => {
@@ -203,9 +217,9 @@ describe('design/react/ComponentDecorator', () => {
           hoverOutSpy = jest.fn();
           testBed.afterRender(async ({host, element}) => {
             await waitFor(() => {
-              expect(element.classList.contains('pd-design--hovered')).toBe(
-                true
-              );
+              expect(
+                element.classList.contains('pd-design__decorator--hovered')
+              ).toBe(true);
             });
 
             host.on('ComponentHoveredOut', hoverOutSpy);
@@ -226,10 +240,12 @@ describe('design/react/ComponentDecorator', () => {
         it('should not show the frame', async () => {
           const {element} = await testBed.render(TestComponent);
 
-          expect(element.classList.contains('pd-design--show-frame')).toBe(
+          expect(element.classList.contains('pd-design__frame--visible')).toBe(
             false
           );
-          expect(element.classList.contains('pd-design--hovered')).toBe(false);
+          expect(
+            element.classList.contains('pd-design__decorator--hovered')
+          ).toBe(false);
         });
       });
     });
@@ -240,8 +256,12 @@ describe('design/react/ComponentDecorator', () => {
 
         element.click();
 
-        expect(element.classList.contains('pd-design--show-frame')).toBe(true);
-        expect(element.classList.contains('pd-design--selected')).toBe(true);
+        expect(element.classList.contains('pd-design__frame--visible')).toBe(
+          true
+        );
+        expect(
+          element.classList.contains('pd-design__decorator--selected')
+        ).toBe(true);
       });
 
       it('should notify the host of the selection', async () => {
@@ -272,15 +292,15 @@ describe('design/react/ComponentDecorator', () => {
           fireEvent.click(element);
 
           await waitFor(() => {
-            expect(element.classList.contains('pd-design--show-frame')).toBe(
-              true
-            );
+            expect(
+              element.classList.contains('pd-design__frame--visible')
+            ).toBe(true);
           });
 
           host.on('ComponentDeleted', hostSpy);
           const deleteButton = await testBed.findBySelector(
             element,
-            '.pd-design__toolbox-button'
+            '.pd-design__frame__delete-icon'
           );
           fireEvent.click(deleteButton);
         });
@@ -292,6 +312,8 @@ describe('design/react/ComponentDecorator', () => {
             id: 'test-1',
             parentId: 'test-parent',
             regionId: 'test-region',
+            regionDirection: 'row',
+            isFragment: false,
           },
         });