From f54b842d80d35d25dc3be4fdca8ea861483c9621 Mon Sep 17 00:00:00 2001
From: Oleksii Orel <oorel@redhat.com>
Date: Wed, 21 Aug 2019 15:37:51 +0300
Subject: [PATCH 1/2] fix styles for scrolling pages for UD

Signed-off-by: Oleksii Orel <oorel@redhat.com>
---
 dashboard/src/app/index.styl                             | 9 +++++++++
 .../workspaces/create-workspace/create-workspace.styl    | 3 +--
 .../devfile-selector/devfile-selector.controller.ts      | 2 ++
 .../devfile-selector/devfile-selector.html               | 7 +++++--
 .../app/workspaces/list-workspaces/list-workspaces.styl  | 5 +++++
 5 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/dashboard/src/app/index.styl b/dashboard/src/app/index.styl
index 8d673b4f84d..33e1d57aae2 100644
--- a/dashboard/src/app/index.styl
+++ b/dashboard/src/app/index.styl
@@ -55,6 +55,7 @@ body
   font-family 'Open Sans'
   background-color $background-site-color
   min-width 600px
+  overflow hidden
 
 button,
 select,
@@ -95,7 +96,15 @@ md-option:hover
     transition none !important
 
 .main-page
+  max-height 100vh
   min-width 320px
+  overflow hidden
+  div#main-content
+    height 100%
+
+  @-moz-document url-prefix()
+    #main-content
+      max-height calc(100vh - 30px)
 
 .progress-line
   position absolute
diff --git a/dashboard/src/app/workspaces/create-workspace/create-workspace.styl b/dashboard/src/app/workspaces/create-workspace/create-workspace.styl
index 8b9d01a4af7..03f15776d54 100644
--- a/dashboard/src/app/workspaces/create-workspace/create-workspace.styl
+++ b/dashboard/src/app/workspaces/create-workspace/create-workspace.styl
@@ -18,8 +18,7 @@
 
 
 md-content.create-workspace-content
-  background-color $very-light-grey-background-color !important
-  overflow auto
+  background-color $very-light-grey-background-color
   padding 15px
 
   .che-label-container-label-name
diff --git a/dashboard/src/app/workspaces/create-workspace/devfile-selector/devfile-selector.controller.ts b/dashboard/src/app/workspaces/create-workspace/devfile-selector/devfile-selector.controller.ts
index 345b04f1a54..f1c08f2f38c 100644
--- a/dashboard/src/app/workspaces/create-workspace/devfile-selector/devfile-selector.controller.ts
+++ b/dashboard/src/app/workspaces/create-workspace/devfile-selector/devfile-selector.controller.ts
@@ -24,6 +24,7 @@ export class DevfileSelectorController {
   private devfileRegistry: DevfileRegistry;
   private cheWorkspace: CheWorkspace;
   private devfiles: Array<IDevfileMetaData>;
+  devfileOrderBy: string;
   onDevfileSelect: Function;
   selectedDevfile: any;
 
@@ -33,6 +34,7 @@ export class DevfileSelectorController {
   constructor(devfileRegistry: DevfileRegistry, cheWorkspace: CheWorkspace) {
     this.devfileRegistry = devfileRegistry;
     this.cheWorkspace = cheWorkspace;
+    this.devfileOrderBy = 'displayName';
     this.loadDevfiles();
   }
 
diff --git a/dashboard/src/app/workspaces/create-workspace/devfile-selector/devfile-selector.html b/dashboard/src/app/workspaces/create-workspace/devfile-selector/devfile-selector.html
index 461f0264140..698785c7959 100644
--- a/dashboard/src/app/workspaces/create-workspace/devfile-selector/devfile-selector.html
+++ b/dashboard/src/app/workspaces/create-workspace/devfile-selector/devfile-selector.html
@@ -16,19 +16,22 @@
                                       che-column-title=""></che-list-header-column>
               <che-list-header-column flex="25"
                                       che-sort-value="devfileSelectorController.devfileOrderBy"
-                                      che-sort-item="name"
+                                      che-sort-item="displayName"
                                       che-column-title="Name"></che-list-header-column>
               <che-list-header-column flex="50"
                                       che-sort-value="devfileSelectorController.devfileOrderBy"
+                                      che-sort-item="description"
                                       che-column-title="Description"></che-list-header-column>            
               <che-list-header-column flex="10"
                                       che-sort-value="devfileSelectorController.devfileOrderBy"
+                                      che-sort-item="globalMemoryLimit"
                                       che-column-title="Required memory"></che-list-header-column>                                                
             </div>
           </div>
         </che-list-header>
         <che-list class="devfile-selector-devfile-list">
-          <div ng-repeat="devfile in devfileSelectorController.devfiles" data-devfile-id="{{devfile.displayName}}"
+          <div ng-repeat="devfile in devfileSelectorController.devfiles | orderBy:devfileSelectorController.devfileOrderBy"
+               data-devfile-id="{{devfile.displayName}}"
             class="devfile-selector-item" ng-class="{'devfile-selector-item-selected': (devfile === devfileSelectorController.selectedDevfile)}">
             <che-list-item flex ng-click="devfileSelectorController.devfileOnClick(devfile)">
               <div flex="100"
diff --git a/dashboard/src/app/workspaces/list-workspaces/list-workspaces.styl b/dashboard/src/app/workspaces/list-workspaces/list-workspaces.styl
index f6049857d51..373073abeb7 100644
--- a/dashboard/src/app/workspaces/list-workspaces/list-workspaces.styl
+++ b/dashboard/src/app/workspaces/list-workspaces/list-workspaces.styl
@@ -7,6 +7,11 @@
 .workspace-resources-locked
   background-color red
 
+.che-list che-workspace-item
+  @-moz-document url-prefix()
+    .che-list-item
+      height 40px
+
 .che-list che-workspace-item:not(:last-of-type) .che-list-item
   border-bottom 1px solid $list-separator-color
 

From 0fc655d48a6f8c03af1eea267cc450b3429e9edb Mon Sep 17 00:00:00 2001
From: Oleksii Orel <oorel@redhat.com>
Date: Thu, 22 Aug 2019 12:42:05 +0300
Subject: [PATCH 2/2] add scrolling to the list of plugins and to the list of
 editors for UD

Signed-off-by: Oleksii Orel <oorel@redhat.com>
---
 .../workspace-editors/workspace-editors.html  | 129 +++++++++--------
 .../workspace-plugins/workspace-plugins.html  | 131 ++++++++++--------
 .../src/components/widget/list/che-list.styl  |  24 ++++
 3 files changed, 163 insertions(+), 121 deletions(-)

diff --git a/dashboard/src/app/workspaces/workspace-details/workspace-editors/workspace-editors.html b/dashboard/src/app/workspaces/workspace-details/workspace-editors/workspace-editors.html
index 40f7e35f595..d616d9b81c6 100644
--- a/dashboard/src/app/workspaces/workspace-details/workspace-editors/workspace-editors.html
+++ b/dashboard/src/app/workspaces/workspace-details/workspace-editors/workspace-editors.html
@@ -1,68 +1,77 @@
 <md-progress-linear ng-show="workspaceEditorsController.isLoading" md-mode="indeterminate"></md-progress-linear>
 <div flex layout="column" md-theme="maincontent-theme" class="plugins-page">
-  <che-list-header che-hide-header="workspaceEditorsController.editors.length === 0">
-    <div flex="100"
-        layout="row"
-        layout-align="start stretch"
-        class="che-list-item-row">
-      <div layout="row" layout-align="center center" class="che-list-item-checkbox"></div>
-      <div flex layout="row" layout-align="start center" class="che-list-item-details">
-        <che-list-header-column flex="10" layout="column" layout-align="center start"
-                                che-sort-value="workspaceEditorsController.editorOrderBy"
-                                che-sort-item="isEnabled"
-                                che-column-title="Enable"></che-list-header-column>
-        <che-list-header-column flex="25" layout="column" layout-align="center start"
-                                che-sort-value="workspaceEditorsController.editorOrderBy"
-                                che-sort-item="displayName"
-                                che-column-title="Editor"></che-list-header-column>
-        <che-list-header-column flex="15" layout="column" layout-align="center start"
-                                che-column-title="Version"></che-list-header-column>
-        <che-list-header-column flex="50" layout="column" layout-align="center start"
-                                che-column-title="Description"></che-list-header-column>
-      </div>
-    </div>
-  </che-list-header>
-  <!-- editor list  -->
-  <che-list class="plugins-list" flex
-            ng-if="workspaceEditorsController.editors && workspaceEditorsController.editors.size > 0">
-    <div class="plugin-item"
-        ng-repeat="editor in workspaceEditorsController.cheListHelper.getVisibleItems() | orderBy:[workspaceEditorsController.editorOrderBy, 'displayName' ]">
-      <che-list-item flex>
-        <div flex="100"
-            layout="row"
-            layout-align="start stretch"
-            plugin-item-name="{{editor.displayName}}"
-            plugin-item-version="{{editor.version}}"
-            class="che-list-item-row">
-          <div layout="row" layout-align="center center" class="che-list-item-checkbox"></div>
-          <div flex layout="row" layout-align="start center">
-            <!-- isEnabled -->
-            <div flex="10">
-              <md-switch ng-model="editor.isEnabled"
-                        ng-change="workspaceEditorsController.updateEditor(editor)"
-                        aria-label="editor"
-                        plugin-switch="{{editor.displayName}}">
-              </md-switch>
-            </div>
-            <!-- Name -->
-            <div flex="25">
-              <span class="che-list-item-name" plugin-name="{{editor.name}}">{{editor.displayName}}</span>
-              <span ng-if="editor.publisher" class="che-list-item-secondary">({{editor.publisher}} publisher)</span>
-            </div>
-            <!-- Version -->
-            <div flex="15">
-                <select class="che-version-dropdown" ng-model="editor.selected" ng-change="workspaceEditorsController.updateSelectedEditorVersion(editor)" ng-init="editor.selected" ng-options="ver for ver in editor.versions">
-                </select>
-            </div>
-            <!-- Description -->
-            <div flex="50">
-              <span class="che-list-item-secondary" plugin-description="{{editor.description}}">{{editor.description}}</span>
+  <div class="che-scroll-list" ng-hide="workspaceEditorsController.editors.length === 0">
+    <div>
+      <div>
+        <che-list-header>
+          <div flex="100"
+               layout="row"
+               layout-align="start stretch"
+               class="che-list-item-row">
+            <div layout="row" layout-align="center center" class="che-list-item-checkbox"></div>
+            <div flex layout="row" layout-align="start center" class="che-list-item-details">
+              <che-list-header-column flex="10" layout="column" layout-align="center start"
+                                      che-sort-value="workspaceEditorsController.editorOrderBy"
+                                      che-sort-item="isEnabled"
+                                      che-column-title="Enable"></che-list-header-column>
+              <che-list-header-column flex="25" layout="column" layout-align="center start"
+                                      che-sort-value="workspaceEditorsController.editorOrderBy"
+                                      che-sort-item="displayName"
+                                      che-column-title="Editor"></che-list-header-column>
+              <che-list-header-column flex="15" layout="column" layout-align="center start"
+                                      che-column-title="Version"></che-list-header-column>
+              <che-list-header-column flex="50" layout="column" layout-align="center start"
+                                      che-column-title="Description"></che-list-header-column>
             </div>
           </div>
-        </div>
-      </che-list-item>
+        </che-list-header>
+        <!-- editor list  -->
+        <che-list class="plugins-list" flex
+                  ng-if="workspaceEditorsController.editors && workspaceEditorsController.editors.size > 0">
+          <div class="plugin-item"
+               ng-repeat="editor in workspaceEditorsController.cheListHelper.getVisibleItems() | orderBy:[workspaceEditorsController.editorOrderBy, 'displayName' ]">
+            <che-list-item flex>
+              <div flex="100"
+                   layout="row"
+                   layout-align="start stretch"
+                   plugin-item-name="{{editor.displayName}}"
+                   plugin-item-version="{{editor.version}}"
+                   class="che-list-item-row">
+                <div layout="row" layout-align="center center" class="che-list-item-checkbox"></div>
+                <div flex layout="row" layout-align="start center">
+                  <!-- isEnabled -->
+                  <div flex="10">
+                    <md-switch ng-model="editor.isEnabled"
+                               ng-change="workspaceEditorsController.updateEditor(editor)"
+                               aria-label="editor"
+                               plugin-switch="{{editor.displayName}}">
+                    </md-switch>
+                  </div>
+                  <!-- Name -->
+                  <div flex="25">
+                    <span class="che-list-item-name" plugin-name="{{editor.name}}">{{editor.displayName}}</span>
+                    <span ng-if="editor.publisher"
+                          class="che-list-item-secondary">({{editor.publisher}} publisher)</span>
+                  </div>
+                  <!-- Version -->
+                  <div flex="15">
+                    <select class="che-version-dropdown" ng-model="editor.selected"
+                            ng-change="workspaceEditorsController.updateSelectedEditorVersion(editor)"
+                            ng-init="editor.selected" ng-options="ver for ver in editor.versions">
+                    </select>
+                  </div>
+                  <!-- Description -->
+                  <div flex="50">
+                    <span class="che-list-item-secondary" plugin-description="{{editor.description}}">{{editor.description}}</span>
+                  </div>
+                </div>
+              </div>
+            </che-list-item>
+          </div>
+        </che-list>
+      </div>
     </div>
-  </che-list>
+  </div>
   <div class="che-list-empty">
     <span ng-show="workspaceEditorsController.editors.length === 0">
       There are no editors.
diff --git a/dashboard/src/app/workspaces/workspace-details/workspace-plugins/workspace-plugins.html b/dashboard/src/app/workspaces/workspace-details/workspace-plugins/workspace-plugins.html
index 0bf53fce640..c0a364383e9 100644
--- a/dashboard/src/app/workspaces/workspace-details/workspace-plugins/workspace-plugins.html
+++ b/dashboard/src/app/workspaces/workspace-details/workspace-plugins/workspace-plugins.html
@@ -9,70 +9,79 @@
                               on-change="workspacePluginsController.onSearchChanged(query)"></che-list-header-search>
     </div>
   </che-list-header-additional-parts>
-
-  <che-list-header che-hide-header="workspacePluginsController.cheListHelper.visibleItemsNumber === 0">
-    <div flex="100"
-        layout="row"
-        layout-align="start stretch"
-        class="che-list-item-row">
-      <div layout="row" layout-align="center center" class="che-list-item-checkbox"></div>
-      <div flex layout="row" layout-align="start center" class="che-list-item-details">
-        <che-list-header-column flex="10" layout="column" layout-align="center start"
-                                che-sort-value="workspacePluginsController.pluginOrderBy"
-                                che-sort-item="isEnabled"
-                                che-column-title="Enable"></che-list-header-column>
-        <che-list-header-column flex="25" layout="column" layout-align="center start"
-                                che-sort-value="workspacePluginsController.pluginOrderBy"
-                                che-sort-item="displayName"
-                                che-column-title="Plugin"></che-list-header-column>
-        <che-list-header-column flex="15" layout="column" layout-align="center start"
-                                che-column-title="Version"></che-list-header-column>
-        <che-list-header-column flex="50" layout="column" layout-align="center start"
-                                che-column-title="Description"></che-list-header-column>
-      </div>
-    </div>
-  </che-list-header>
-    <!-- plugins list  -->
-  <che-list class="plugins-list" flex
-            ng-if="workspacePluginsController.plugins && workspacePluginsController.plugins.size > 0">
-    <div class="plugin-item"
-        ng-repeat="plugin in workspacePluginsController.cheListHelper.getVisibleItems() | orderBy:[workspacePluginsController.pluginOrderBy, 'displayName' ]">
-      <che-list-item flex>
-        <div flex="100"
-            layout="row"
-            layout-align="start stretch"
-            plugin-item-name="{{plugin.displayName}}"
-            plugin-item-version="{{plugin.version}}"
-            class="che-list-item-row">
-          <div layout="row" layout-align="center center" class="che-list-item-checkbox"></div>
-          <div flex layout="row" layout-align="start center">
-            <!-- isEnabled -->
-            <div flex="10">
-              <md-switch ng-model="plugin.isEnabled"
-                        ng-change="workspacePluginsController.updatePlugin(plugin)"
-                        aria-label="plugin"
-                        plugin-switch="{{plugin.displayName}}">
-              </md-switch>
-            </div>
-            <!-- Name -->
-            <div flex="25">
-              <span class="che-list-item-name" plugin-name="{{plugin.displayName}}">{{plugin.displayName}}</span>
-              <span ng-if="plugin.publisher" class="che-list-item-secondary">({{plugin.publisher}} publisher)</span>
-            </div>
-            <!-- Version -->
-            <div flex="15">
-              <select class="che-version-dropdown" ng-model="plugin.selected" ng-change="workspacePluginsController.updateSelectedPlugin(plugin)" ng-init="plugin.selected" ng-options="ver for ver in plugin.versions">
-              </select>
-            </div>
-            <!-- Description -->
-            <div flex="50">
-              <span class="che-list-item-secondary" plugin-description="{{plugin.description}}">{{plugin.description}}</span>
+  <div class="che-scroll-list" ng-hide="workspacePluginsController.cheListHelper.visibleItemsNumber === 0">
+    <div>
+      <div>
+        <che-list-header>
+          <div flex="100"
+               layout="row"
+               layout-align="start stretch"
+               class="che-list-item-row">
+            <div layout="row" layout-align="center center" class="che-list-item-checkbox"></div>
+            <div flex layout="row" layout-align="start center" class="che-list-item-details">
+              <che-list-header-column flex="10" layout="column" layout-align="center start"
+                                      che-sort-value="workspacePluginsController.pluginOrderBy"
+                                      che-sort-item="isEnabled"
+                                      che-column-title="Enable"></che-list-header-column>
+              <che-list-header-column flex="25" layout="column" layout-align="center start"
+                                      che-sort-value="workspacePluginsController.pluginOrderBy"
+                                      che-sort-item="displayName"
+                                      che-column-title="Plugin"></che-list-header-column>
+              <che-list-header-column flex="15" layout="column" layout-align="center start"
+                                      che-column-title="Version"></che-list-header-column>
+              <che-list-header-column flex="50" layout="column" layout-align="center start"
+                                      che-column-title="Description"></che-list-header-column>
             </div>
           </div>
-        </div>
-      </che-list-item>
+        </che-list-header>
+        <!-- plugins list  -->
+        <che-list class="plugins-list" flex
+                  ng-if="workspacePluginsController.plugins && workspacePluginsController.plugins.size > 0">
+          <div class="plugin-item"
+               ng-repeat="plugin in workspacePluginsController.cheListHelper.getVisibleItems() | orderBy:[workspacePluginsController.pluginOrderBy, 'displayName' ]">
+            <che-list-item flex>
+              <div flex="100"
+                   layout="row"
+                   layout-align="start stretch"
+                   plugin-item-name="{{plugin.displayName}}"
+                   plugin-item-version="{{plugin.version}}"
+                   class="che-list-item-row">
+                <div layout="row" layout-align="center center" class="che-list-item-checkbox"></div>
+                <div flex layout="row" layout-align="start center">
+                  <!-- isEnabled -->
+                  <div flex="10">
+                    <md-switch ng-model="plugin.isEnabled"
+                               ng-change="workspacePluginsController.updatePlugin(plugin)"
+                               aria-label="plugin"
+                               plugin-switch="{{plugin.displayName}}">
+                    </md-switch>
+                  </div>
+                  <!-- Name -->
+                  <div flex="25">
+                      <span class="che-list-item-name"
+                            plugin-name="{{plugin.displayName}}">{{plugin.displayName}}</span>
+                    <span ng-if="plugin.publisher"
+                          class="che-list-item-secondary">({{plugin.publisher}} publisher)</span>
+                  </div>
+                  <!-- Version -->
+                  <div flex="15">
+                    <select class="che-version-dropdown" ng-model="plugin.selected"
+                            ng-change="workspacePluginsController.updateSelectedPlugin(plugin)"
+                            ng-init="plugin.selected" ng-options="ver for ver in plugin.versions">
+                    </select>
+                  </div>
+                  <!-- Description -->
+                  <div flex="50">
+                    <span class="che-list-item-secondary" plugin-description="{{plugin.description}}">{{plugin.description}}</span>
+                  </div>
+                </div>
+              </div>
+            </che-list-item>
+          </div>
+        </che-list>
+      </div>
     </div>
-  </che-list>
+  </div>
   <div class="che-list-empty">
     <span ng-show="workspacePluginsController.plugins.length > 0 && workspacePluginsController.cheListHelper.visibleItemsNumber === 0">
       No plugins found.
diff --git a/dashboard/src/components/widget/list/che-list.styl b/dashboard/src/components/widget/list/che-list.styl
index ca467718a89..76f871d01ca 100644
--- a/dashboard/src/components/widget/list/che-list.styl
+++ b/dashboard/src/components/widget/list/che-list.styl
@@ -8,3 +8,27 @@
   overflow-y auto
   display block
   width 100%
+
+.che-scroll-list
+  background-color lighten($very-light-grey-color, 28%)
+  border-top 1px solid lighten($very-light-grey-color, 4%)
+  border-radius 2px
+  width 100%
+  & > div
+    position relative
+    margin-top 47px
+    che-box-shadow()
+    & > div
+      overflow-y auto
+      max-height 672px
+      .che-list-item
+        height 47px
+    .che-list-header
+      .che-list-header-additional
+        display none
+      .che-list-item-row
+        margin -47px 0 0 0
+      .che-list-header-column > *
+        position absolute
+        line-height 47px
+        top -47px