Add scrollbars to Input/Output table

Issue-ID: SDC-1686
Change-Id: I384bc04685a8f5cbbaedcb6d499fac7c0ed300ea
Signed-off-by: Malek <malek.zoabi@amdocs.com>

8 files changed, 141 insertions, 12 deletions

diff --git a/workflow-designer-ui/src/main/frontend/package.json b/workflow-designer-ui/src/main/frontend/package.json
index dfd022c2..ddc761df 100644
--- a/workflow-designer-ui/src/main/frontend/package.json
+++ b/workflow-designer-ui/src/main/frontend/package.json
@@ -32,6 +32,7 @@
 		"lodash.set": "^4.3.2",
 		"md5": "^2.2.1",
 		"moment": "^2.18.1",
+		"perfect-scrollbar": "^1.4.0",
 		"prop-types": "^15.6.1",
 		"qs": "^6.5.2",
 		"react": "^16.2.0",
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/_components.scss b/workflow-designer-ui/src/main/frontend/resources/scss/_components.scss
index 974317e8..93c75bf5 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/_components.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/_components.scss
@@ -8,5 +8,4 @@
 @import 'components/loader';
 @import 'components/tree';
 @import 'components/customModal';
-
-
+@import 'components/scrollbars';
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_scrollbars.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_scrollbars.scss
new file mode 100644
index 00000000..d036c714
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_scrollbars.scss
@@ -0,0 +1,63 @@
+.ps__rail-x {
+    opacity: 1;
+    height: 4px;
+    /* there must be 'bottom' or 'top' for ps__rail-x */
+    bottom: 0px;
+}
+
+.ps__rail-y {
+    opacity: 1;
+    width: 4px;
+    /* there must be 'right' or 'left' for ps__rail-y */
+    right: 0;
+}
+
+.ps__thumb-x {
+    background-color: $light-gray;
+    border-radius: 0px;
+    height: 4px;
+    /* there must be 'bottom' for ps__thumb-x */
+    bottom: 0px;
+}
+
+.ps__thumb-y {
+    background-color: $light-gray;
+    border-radius: 0px;
+    width: 4px;
+    /* there must be 'right' for ps__thumb-y */
+    right: 0px;
+}
+
+.ps:hover > .ps__rail-x,
+.ps:hover > .ps__rail-y,
+.ps--focus > .ps__rail-x,
+.ps--focus > .ps__rail-y,
+.ps--scrolling-x > .ps__rail-x,
+.ps--scrolling-y > .ps__rail-y {
+    opacity: 1;
+    background-color: transparent;
+}
+
+.ps .ps__rail-x:hover,
+.ps .ps__rail-y:hover,
+.ps .ps__rail-x:focus,
+.ps .ps__rail-y:focus,
+.ps .ps__rail-x.ps--clicking,
+.ps .ps__rail-y.ps--clicking {
+    opacity: 1;
+    background-color: transparent;
+}
+
+.ps__rail-x:hover > .ps__thumb-x,
+.ps__rail-x:focus > .ps__thumb-x,
+.ps__rail-x.ps--clicking .ps__thumb-x {
+    background-color: $light-gray;
+    height: 4px;
+}
+
+.ps__rail-y:hover > .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y,
+.ps__rail-y.ps--clicking .ps__thumb-y {
+    background-color: $light-gray;
+    width: 4px;
+}
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss
index bc12a150..56a8dd6b 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss
@@ -45,17 +45,17 @@
     }
 
     &__table {
-        min-height: 102px;
-        max-height: calc(100vh - 202px);
-        overflow-y: auto;
         &__thead {
             background-color: $silver;
             @include body-1-emphasis;
-            position: -webkit-sticky;
-            position: sticky;
-            top: 0px;
-            z-index: 1;
         }
+        .scrollbars {
+            min-height: 102px;
+            max-height: calc(100vh - 243px);
+            overflow: auto;
+            position: relative;
+        }
+
         &__tbody {
         }
     }
@@ -83,7 +83,7 @@
         flex: 1;
         display: flex;
         align-items: center;
-        padding: 20px 17px;
+        padding: 22px 17px;
         &--empty {
             padding: 20px;
             color: $dark-gray;
@@ -114,7 +114,7 @@
             .sdc-label__error {
                 margin: unset;
                 position: absolute;
-                bottom: -20px;
+                bottom: -22px;
             }
         }
     }
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/style.scss b/workflow-designer-ui/src/main/frontend/resources/scss/style.scss
index 49278565..88e33a9c 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/style.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/style.scss
@@ -2,5 +2,6 @@
 @import '../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
 @import 'common';
 @import '../../node_modules/sdc-ui/lib/css/style.css';
+@import '../../node_modules/perfect-scrollbar/css/perfect-scrollbar.css';
 @import 'components';
 @import 'features';
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/InputOutputView.jsx b/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/InputOutputView.jsx
index 82b02c6c..6b76933e 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/InputOutputView.jsx
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/InputOutputView.jsx
@@ -20,6 +20,7 @@ import { Translate, I18n } from 'react-redux-i18n';
 import cn from 'classnames';
 import { SVGIcon } from 'sdc-ui/lib/react';
 
+import Scrollbars from 'shared/scroll/Scrollbars';
 import SearchInput from 'shared/searchInput/SearchInput';
 import { getValidationsError } from 'features/version/inputOutput/inputOutputValidations';
 import Tab from 'features/version/inputOutput/views/Tab';
@@ -202,7 +203,9 @@ class InputOutputView extends React.Component {
                 <div className="input-output__table">
                     <TableHead />
                     <TableBody isCertified={isCertified}>
-                        {dataRowsView}
+                        <Scrollbars className="scrollbars">
+                            {dataRowsView}
+                        </Scrollbars>
                     </TableBody>
                 </div>
             </div>
diff --git a/workflow-designer-ui/src/main/frontend/src/shared/scroll/Scrollbars.js b/workflow-designer-ui/src/main/frontend/src/shared/scroll/Scrollbars.js
new file mode 100644
index 00000000..e5ec8cee
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/src/shared/scroll/Scrollbars.js
@@ -0,0 +1,58 @@
+/*
+* Copyright © 2018 European Support Limited
+*
+* 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.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import PerfectScrollbar from 'perfect-scrollbar';
+
+class Scrollbars extends React.Component {
+    containerRef = React.createRef();
+    scrollbars = null;
+
+    componentDidMount() {
+        const container = this.containerRef.current;
+
+        this.scrollbars = new PerfectScrollbar(container);
+    }
+
+    componentDidUpdate() {
+        if (this.scrollbars) {
+            this.scrollbars.update();
+        }
+    }
+
+    componentWillUnmount() {
+        this.scrollbars.destroy();
+        this.scrollbars = null;
+    }
+
+    render() {
+        const { children, className } = this.props;
+
+        return (
+            <div className={className} ref={this.containerRef}>
+                {children}
+            </div>
+        );
+    }
+}
+
+Scrollbars.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+};
+
+export default Scrollbars;
diff --git a/workflow-designer-ui/src/main/frontend/yarn.lock b/workflow-designer-ui/src/main/frontend/yarn.lock
index 68f2ed3f..8d668081 100644
--- a/workflow-designer-ui/src/main/frontend/yarn.lock
+++ b/workflow-designer-ui/src/main/frontend/yarn.lock
@@ -8703,6 +8703,10 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+perfect-scrollbar@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.4.0.tgz#5d014ef9775e1f43058a1dbae9ed1daf0e7091f1"
+
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"