fix policy and group drag and drop bug

Issue-ID: SDC-3864
Signed-off-by: stasys10 <stasys.jurgaitis@est.tech>
Change-Id: Ib45b4a1b650a7d5959e4a6ff70d46d6dee0586c2

10 files changed, 13 insertions, 264 deletions

diff --git a/catalog-ui/src/app/ng2/pages/composition/composition-page.component.html b/catalog-ui/src/app/ng2/pages/composition/composition-page.component.html
index e1851d5c0c..090493941b 100644
--- a/catalog-ui/src/app/ng2/pages/composition/composition-page.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/composition-page.component.html
@@ -1,7 +1,6 @@
 <div class="workspace-composition-page">
     <div class="composition-graph">
         <composition-palette></composition-palette>
-        <app-palette-popup-panel></app-palette-popup-panel>
         <composition-graph dndDropzone [dndAllowExternal]=true [topologyTemplate]="topologyTemplate" [testId]="'canvas'"></composition-graph>
         <ng2-composition-panel [topologyTemplate]="topologyTemplate"></ng2-composition-panel>
     </div>
diff --git a/catalog-ui/src/app/ng2/pages/composition/composition-page.module.ts b/catalog-ui/src/app/ng2/pages/composition/composition-page.module.ts
index d0ca05b2be..18524a05be 100644
--- a/catalog-ui/src/app/ng2/pages/composition/composition-page.module.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/composition-page.module.ts
@@ -7,14 +7,13 @@ import {CompositionGraphModule} from "./graph/composition-graph.module";
 import {CompositionPageComponent} from "./composition-page.component";
 import {NgxsModule} from "@ngxs/store";
 import {PaletteModule} from "./palette/palette.module";
-import {PalettePopupPanelComponent} from "./palette/palette-popup-panel/palette-popup-panel.component";
 import { CompositionPanelModule } from "app/ng2/pages/composition/panel/composition-panel.module";
 import {CompositionService} from "./composition.service";
 import {DndModule} from "ngx-drag-drop";
 import {GraphState} from "./common/store/graph.state";
 
 @NgModule({
-    declarations: [CompositionPageComponent, PalettePopupPanelComponent],
+    declarations: [CompositionPageComponent],
     imports: [CommonModule,
         CompositionGraphModule,
         CompositionPanelModule,
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts
index 1328747f88..6bbf1afab9 100644
--- a/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts
@@ -184,6 +184,10 @@ export class CompositionGraphComponent implements AfterViewInit {
     }
 
     public onDrop = (dndEvent: DndDropEvent) => {
+        if (dndEvent.data.categoryType=="POLICY" || dndEvent.data.categoryType=="GROUP"){
+            this.compositionGraphPaletteUtils.addPolicyOrGroupFromPalette(dndEvent);
+            return;
+        }
         this.compositionGraphPaletteUtils.addNodeFromPalette(this._cy, dndEvent);
     }
 
@@ -600,10 +604,6 @@ export class CompositionGraphComponent implements AfterViewInit {
             this.notificationService.push(new NotificationSettings('success', 'Policy Updated', 'Success'));
         });
 
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, (leftPaletteComponent: LeftPaletteComponent) => {
-            this.compositionGraphPaletteUtils.onComponentHoverIn(leftPaletteComponent, this._cy);
-        });
-
         this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_ADD_ZONE_INSTANCE_FROM_PALETTE,
             (component: TopologyTemplate, paletteComponent: LeftPaletteComponent, startPosition: Point) => {
 
@@ -620,11 +620,6 @@ export class CompositionGraphComponent implements AfterViewInit {
                 });
             });
 
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_OUT, () => {
-            this._cy.emit('hidehandles');
-            this.matchCapabilitiesRequirementsUtils.resetFadedNodes(this._cy);
-        });
-
         this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_START, (dragElement, dragComponent) => {
             this.dragElement = dragElement;
             this.dragComponent = ComponentInstanceFactory.createComponentInstanceFromComponent(dragComponent, this.workspaceService.metadata.categories[0].useServiceSubstitutionForNestedServices);
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-palette-utils.ts b/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-palette-utils.ts
index 72780ec0e5..8383c24f26 100644
--- a/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-palette-utils.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-palette-utils.ts
@@ -18,7 +18,7 @@
  * ============LICENSE_END=========================================================
  */
 
-import {Injectable} from "@angular/core";
+import {Component, Injectable} from "@angular/core";
 import {CompositionGraphGeneralUtils, RequirementAndCapabilities} from "./composition-graph-general-utils";
 import {CommonGraphUtils} from "../common/common-graph-utils";
 import {EventListenerService} from "../../../../../services/event-listener-service";
@@ -54,38 +54,6 @@ export class CompositionGraphPaletteUtils {
     }
 
     /**
-     *
-     * @param Calculate matching nodes, highlight the matching nodes and fade the non matching nodes
-     * @param leftPaletteComponent
-     * @param _cy
-     * @returns void
-     * @private
-     */
-
-    public onComponentHoverIn = (leftPaletteComponent: LeftPaletteComponent, _cy: Cy.Instance) => {
-        const nodesData = this.nodesGraphUtils.getAllNodesData(_cy.nodes());
-        const nodesLinks = this.generalGraphUtils.getAllCompositionCiLinks(_cy);
-
-        if (this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.containsKey(leftPaletteComponent.uniqueId)) {
-            const reqAndCap: RequirementAndCapabilities = this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.getValue(leftPaletteComponent.uniqueId);
-            const filteredNodesData = this.matchCapabilitiesRequirementsUtils.findMatchingNodesToComponentInstance(
-                { uniqueId: leftPaletteComponent.uniqueId, requirements: reqAndCap.requirements, capabilities: reqAndCap.capabilities} as ComponentInstance, nodesData, nodesLinks);
-
-            this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, _cy);
-            this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, _cy);
-        } else {
-
-            this.topologyTemplateService.getCapabilitiesAndRequirements(leftPaletteComponent.componentType, leftPaletteComponent.uniqueId).subscribe((response: ComponentGenericResponse) => {
-                let reqAndCap: RequirementAndCapabilities = {
-                    capabilities: response.capabilities,
-                    requirements: response.requirements
-                }
-                this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.setValue(leftPaletteComponent.uniqueId, reqAndCap);
-            });
-        }
-    }
-
-    /**
      * Calculate the dragged element (html element) position on canvas
      * @param cy
      * @param event
@@ -228,5 +196,12 @@ export class CompositionGraphPaletteUtils {
             });
         }
     }
+
+    addPolicyOrGroupFromPalette(dndEvent: DndDropEvent) {
+        let draggedComponent:LeftPaletteComponent = dndEvent.data;
+        let dropPosition:Point = dndEvent.event;
+        let component:Component = dndEvent.data;
+        this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ADD_ZONE_INSTANCE_FROM_PALETTE, draggedComponent, component, dropPosition);
+    }
 }
 
diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/__snapshots__/palette.component.spec.ts.snap b/catalog-ui/src/app/ng2/pages/composition/palette/__snapshots__/palette.component.spec.ts.snap
index 74517e1eb0..e5bd4a9079 100644
--- a/catalog-ui/src/app/ng2/pages/composition/palette/__snapshots__/palette.component.spec.ts.snap
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/__snapshots__/palette.component.spec.ts.snap
@@ -9,8 +9,6 @@ exports[`palette component should match current snapshot of palette component 1`
   onDragStart={[Function Function]}
   onDraggableMoved={[Function Function]}
   onDrop={[Function Function]}
-  onMouseOut={[Function Function]}
-  onMouseOver={[Function Function]}
   onSearchChanged={[Function Function]}
   position={[Function Point]}
 >
diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component.html b/catalog-ui/src/app/ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component.html
deleted file mode 100644
index 86847eb28a..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!--
- ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~      http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
-  
-<div class="popup-panel" [ngClass]="{'hide':!isShowPanel}" [style.left]="popupPanelPosition.x + 'px'" [style.top]="popupPanelPosition.y + 'px'"
-     (mousedown)="addZoneInstance()"
-     (mouseenter)="onMouseEnter()"
-     (mouseleave)="onMouseLeave()">
-    <div class="popup-panel-group">
-        <div class="popup-panel-plus">+</div>
-        <div class="popup-panel-title">{{panelTitle}}</div>
-    </div>
-</div>
-<!--<popup-menu-list [menuItemsData]="getMenuItems()">-->
-
-
-
-<!--</popup-menu-list>-->
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component.less b/catalog-ui/src/app/ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component.less
deleted file mode 100644
index 24f0485e76..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component.less
+++ /dev/null
@@ -1,37 +0,0 @@
-.popup-panel {
-  position: absolute;
-  display: inline-block;
-  background-color: white;
-  border: solid 1px #d2d2d2;
-  border-top: solid 3px #13a7df;
-  left: 208px; top: 0px;
-  width: 140px;
-  height: 40px;
-  z-index: 10000;
-
-  &:hover {
-    background-color: whitesmoke;
-  }
-
-  .popup-panel-group {
-    padding-left: 8px;
-    padding-top: 8px;
-    cursor: pointer;
-
-    .popup-panel-plus {
-      border-radius: 50%;
-      color: white;
-      background-color: #13a7df;
-      width: 20px;
-      text-align: center;
-      display: inline-block;
-    }
-    
-    .popup-panel-title {
-      padding-left: 10px;
-      display: inline-block;
-    }
-    
-  }
-
-}
diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component.ts b/catalog-ui/src/app/ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component.ts
deleted file mode 100644
index 5d98fc7f78..0000000000
--- a/catalog-ui/src/app/ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import {Component, OnInit} from '@angular/core';
-import {GRAPH_EVENTS, SdcElementType} from "app/utils";
-import {LeftPaletteComponent, Point} from "app/models";
-import {EventListenerService} from "app/services";
-import {LeftPaletteMetadataTypes} from "app/models/components/displayComponent";
-
-@Component({
-    selector: 'app-palette-popup-panel',
-    templateUrl: './palette-popup-panel.component.html',
-    styleUrls: [ './palette-popup-panel.component.less' ],
-})
-export class PalettePopupPanelComponent implements OnInit {
-
-    public panelTitle: string;
-    public isShowPanel: boolean;
-    private component: Component;
-    private displayComponent: LeftPaletteComponent;
-    private popupPanelPosition:Point = new Point(0,0);
-
-    constructor(private eventListenerService: EventListenerService) {
-        this.isShowPanel = false;
-    }
-
-    ngOnInit() {
-        this.registerObserverCallbacks();
-    }
-
-    public onMouseEnter() {
-        this.isShowPanel = true;
-    }
-
-    public getMenuItems = () => {
-        return [{
-            text: 'Delete',
-            iconName: 'trash-o',
-            iconType: 'common',
-            iconMode: 'secondary',
-            iconSize: 'small',
-            type: '',
-            action: () => this.addZoneInstance()
-        }];
-    }
-
-    public onMouseLeave() {
-        this.isShowPanel = false;
-    }
-
-    public addZoneInstance(): void {
-        if(this.displayComponent) {
-            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ADD_ZONE_INSTANCE_FROM_PALETTE, this.component, this.displayComponent, this.popupPanelPosition);
-            this.hidePopupPanel();
-        }
-    }
-
-    private registerObserverCallbacks() {
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_SHOW_POPUP_PANEL,
-            (displayComponent: LeftPaletteComponent, sectionElem: HTMLElement) => {
-                this.showPopupPanel(displayComponent, sectionElem);
-            });
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HIDE_POPUP_PANEL, () => this.hidePopupPanel());
-    }
-
-    private getPopupPanelPosition (sectionElem: HTMLElement):Point {
-        let pos: ClientRect = sectionElem.getBoundingClientRect();
-        let offsetX: number = -30;
-        const offsetY: number = pos.height / 2; 
-        return new Point((pos.right + offsetX), (pos.top - offsetY + window.pageYOffset));
-    };
-
-    private setPopupPanelTitle(component: LeftPaletteComponent): void {
-        if (component.componentSubType === SdcElementType.GROUP) {
-            this.panelTitle = "Add Group";
-            return;
-        }
-
-        if (component.componentSubType === SdcElementType.POLICY) {
-            this.panelTitle = "Add Policy";
-            return;
-        }
-    }
-
-    private showPopupPanel(displayComponent:LeftPaletteComponent, sectionElem: HTMLElement) {
-        if(!this.isShowPanel){
-            this.displayComponent = displayComponent;
-            this.setPopupPanelTitle(displayComponent);
-            this.popupPanelPosition = this.getPopupPanelPosition(sectionElem);
-            this.isShowPanel = true;
-        }
-    };
-    
-    private hidePopupPanel() {
-        if(this.isShowPanel){
-            this.isShowPanel = false;
-        }
-    };
-}
diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.spec.ts
index efa9cd3370..e96102bd9b 100644
--- a/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.spec.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.spec.ts
@@ -5,10 +5,8 @@ import {EventListenerService} from "../../../../services/event-listener-service"
 import {PaletteElementComponent} from "./palette-element/palette-element.component";
 import {PaletteComponent} from "./palette.component";
 import {ConfigureFn, configureTests} from "../../../../../jest/test-config.helper";
-import {GRAPH_EVENTS} from "../../../../utils/constants";
 import {KeyValuePipe} from "../../../pipes/key-value.pipe";
 import {ResourceNamePipe} from "../../../pipes/resource-name.pipe";
-import {LeftPaletteComponent} from "../../../../models/components/displayComponent";
 import {Observable} from "rxjs/Observable";
 import {leftPaletteElements} from "../../../../../jest/mocks/left-paeltte-elements.mock";
 import {NgxsModule, Select} from '@ngxs/store';
@@ -53,30 +51,6 @@ describe('palette component', () => {
         expect(fixture).toMatchSnapshot();
     });
 
-    it('should call on palette component hover in event', () => {
-        let paletteObject =  <LeftPaletteComponent>{categoryType: 'COMPONENT'};
-        fixture.componentInstance.onMouseOver(mockedEvent, paletteObject);
-        expect(eventServiceMock.notifyObservers).toHaveBeenCalledWith(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, paletteObject);
-    });
-
-    it('should call on palette component hover out event', () => {
-        let paletteObject =  <LeftPaletteComponent>{categoryType: 'COMPONENT'};
-        fixture.componentInstance.onMouseOut(paletteObject);
-        expect(eventServiceMock.notifyObservers).toHaveBeenCalledWith(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_OUT);
-    });
-
-    it('should call show popup panel event', () => {
-        let paletteObject =  <LeftPaletteComponent>{categoryType: 'GROUP'};
-        fixture.componentInstance.onMouseOver(mockedEvent, paletteObject);
-        expect(eventServiceMock.notifyObservers).toHaveBeenCalledWith(GRAPH_EVENTS.ON_PALETTE_COMPONENT_SHOW_POPUP_PANEL, paletteObject, mockedEvent.target);
-    });
-
-    it('should call  hide popup panel event', () => {
-        let paletteObject =  <LeftPaletteComponent>{categoryType: 'GROUP'};
-        fixture.componentInstance.onMouseOut(paletteObject);
-        expect(eventServiceMock.notifyObservers).toHaveBeenCalledWith(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HIDE_POPUP_PANEL);
-    });
-
     it('should build Palette By Categories without searchText', () => {
         fixture.componentInstance.buildPaletteByCategories();
         expect(fixture.componentInstance.paletteElements["Generic"]["Network"].length).toBe(5);
diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.ts b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.ts
index e91798ef36..673efa4172 100644
--- a/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.ts
@@ -106,14 +106,6 @@ export class PaletteComponent {
         return counter;
     }
 
-    private isGroupOrPolicy(component: LeftPaletteComponent): boolean {
-        if (component &&
-            (component.categoryType === LeftPaletteMetadataTypes.Group ||
-            component.categoryType === LeftPaletteMetadataTypes.Policy)) {
-            return true;
-        }
-        return false;
-    }
     @HostListener('document:dragover', ['$event'])
     public onDrag(event) {
         this.position.x = event.clientX;
@@ -153,22 +145,4 @@ export class PaletteComponent {
         
     }
 
-    public onMouseOver = (sectionElem:MouseEvent, displayComponent:LeftPaletteComponent) => {
-        console.debug("On palette element MOUSE HOVER: ", displayComponent);
-        if (this.isGroupOrPolicy(displayComponent)) {
-            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_SHOW_POPUP_PANEL, displayComponent, sectionElem.target);
-        } else {
-            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, displayComponent);
-        }
-    };
-
-    public onMouseOut = (displayComponent:LeftPaletteComponent) => {
-        console.debug("On palette element MOUSE OUT: ", displayComponent);
-        if (this.isGroupOrPolicy(displayComponent)) {
-            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HIDE_POPUP_PANEL);
-        } else {
-            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_OUT);
-        }
-    };
-
 }