webpack 4 upgrade

Issue-ID: SDC-1388
Change-Id: I44d61491ef802187baa4beb3b4fc2c9f1e8405e5
Signed-off-by: Einav Weiss Keidar <einavw@amdocs.com>

2 files changed, 20 insertions, 19 deletions

diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/Diagram.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/Diagram.jsx
index 129a1afc2b..bd5f78d85f 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/Diagram.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/diagram/Diagram.jsx
@@ -18,7 +18,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import _template from 'lodash/template';
 import _merge from 'lodash/merge';
-import * as d3 from 'd3';
+import { select, event as d3event } from 'd3-selection';
+import { zoom as d3zoom } from 'd3-zoom';
 
 import Common from '../../common/Common';
 import Logger from '../../common/Logger';
@@ -220,7 +221,7 @@ class Diagram extends React.Component {
         if (!this.svg) {
             const svgparams = _merge({}, this.options.svg);
             this.wrapper.innerHTML = this.templates.diagram(svgparams);
-            this.svg = d3.select(this.wrapper).select('svg');
+            this.svg = select(this.wrapper).select('svg');
         }
 
         if (this.state.height === 0) {
@@ -766,7 +767,7 @@ class Diagram extends React.Component {
             .on('mouseenter', function f() {
                 timer = setTimeout(() => {
                     self.application.selectLifeline(
-                        d3.select(this.parentNode).attr('data-id')
+                        select(this.parentNode).attr('data-id')
                     );
                 }, 150);
             })
@@ -775,7 +776,7 @@ class Diagram extends React.Component {
                 self.application.selectLifeline();
             })
             .on('click', function f() {
-                const id = d3.select(this.parentNode).attr('data-id');
+                const id = select(this.parentNode).attr('data-id');
                 window.postMessage({ source, id, type: 'lifeline' }, origin);
             });
 
@@ -784,7 +785,7 @@ class Diagram extends React.Component {
             .on('mouseenter', function f() {
                 timer = setTimeout(() => {
                     self.application.selectLifeline(
-                        d3.select(this.parentNode).attr('data-id')
+                        select(this.parentNode).attr('data-id')
                     );
                 }, 150);
             })
@@ -793,7 +794,7 @@ class Diagram extends React.Component {
                 self.application.selectLifeline();
             })
             .on('click', function f() {
-                const id = d3.select(this.parentNode).attr('data-id');
+                const id = select(this.parentNode).attr('data-id');
                 window.postMessage(
                     { source, id, type: 'lifelineHeader' },
                     origin
@@ -803,10 +804,10 @@ class Diagram extends React.Component {
         gCanvas
             .selectAll('.asdcs-diagram-message-selectable')
             .on('mouseenter', function f() {
-                self.events.message = { x: d3.event.pageX, y: d3.event.pageY };
+                self.events.message = { x: d3event.pageX, y: d3event.pageY };
                 timer = setTimeout(() => {
                     self.application.selectMessage(
-                        d3.select(this.parentNode).attr('data-id')
+                        select(this.parentNode).attr('data-id')
                     );
                 }, 200);
             })
@@ -816,7 +817,7 @@ class Diagram extends React.Component {
                 self.application.selectMessage();
             })
             .on('click', function f() {
-                const id = d3.select(this.parentNode).attr('data-id');
+                const id = select(this.parentNode).attr('data-id');
                 window.postMessage({ source, id, type: 'message' }, origin);
             });
     }
@@ -870,16 +871,16 @@ class Diagram extends React.Component {
     _initZoom(gContent, width, height) {
         const zoomed = function zoomed() {
             if (!this.initialTransformX && !this.initialTransformY) {
-                this.initialTransformX = d3.event.transform.x;
-                this.initialTransformY = d3.event.transform.y;
+                this.initialTransformX = d3event.transform.x;
+                this.initialTransformY = d3event.transform.y;
             }
 
             gContent.attr(
                 'transform',
-                `translate(${d3.event.transform.x -
-                    this.initialTransformX}, ${d3.event.transform.y -
-                    this.initialTransformY})scale(${d3.event.transform.k}, ${
-                    d3.event.transform.k
+                `translate(${d3event.transform.x -
+                    this.initialTransformX}, ${d3event.transform.y -
+                    this.initialTransformY})scale(${d3event.transform.k}, ${
+                    d3event.transform.k
                 })`
             );
         };
@@ -922,7 +923,7 @@ class Diagram extends React.Component {
             gContent.attr('transform', `scale(${scale})`);
         }
 
-        const zoom = d3.zoom().on('zoom', zoomed);
+        const zoom = d3zoom().on('zoom', zoomed);
 
         this.svg.call(zoom);
         this.svg.call(zoom.scaleBy, scale);
diff --git a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/icons/Icon.jsx b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/icons/Icon.jsx
index 51849676e4..71c9e69286 100644
--- a/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/icons/Icon.jsx
+++ b/dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/icons/Icon.jsx
@@ -25,8 +25,8 @@ import PropTypes from 'prop-types';
  */
 const Icon = function Icon({ glyph, className }) {
     return (
-        <svg viewBox="0 0 1000 1000" className={className}>
-            <use xlinkHref={glyph} className="asdcs-icon" />
+        <svg className={className} viewBox={glyph.viewBox}>
+            <use xlinkHref={`#${glyph.id}`} />
         </svg>
     );
 };
@@ -34,7 +34,7 @@ const Icon = function Icon({ glyph, className }) {
 /** Declare properties. */
 Icon.propTypes = {
     className: PropTypes.string,
-    glyph: PropTypes.string.isRequired
+    glyph: PropTypes.object.isRequired
 };
 
 export default Icon;