From b2949a1437f316b054f0659b92ca2251d688a77c Mon Sep 17 00:00:00 2001
From: Denis Yuen <denis.yuen@oicr.on.ca>
Date: Thu, 14 Jun 2018 16:59:53 -0400
Subject: [PATCH] Homepage fix tools (#306)

* fixed table resizing on home page
* cannot add gitlab token, cannot add gitlab tool/workflow
* fixed tests relying on gitlab
---
 cypress/integration/dropdown.js                  | 13 ++++++++-----
 src/app/container/container.component.html       |  2 +-
 .../register-tool/register-tool.component.ts     | 12 ++++++++++--
 src/app/containers/list/list.component.html      |  2 +-
 src/app/containers/list/list.component.ts        |  1 +
 src/app/home/home.component.html                 | 16 ++++++++++------
 src/app/home/home.component.ts                   |  6 ++++++
 .../accounts/external/accounts.component.ts      | 15 ++++++++-------
 src/app/myworkflows/myworkflows.component.css    |  1 -
 .../register-workflow-modal.component.ts         |  6 +++++-
 .../workflow/versions/versions.component.html    |  4 ++--
 src/app/workflow/workflow.component.html         |  2 +-
 src/app/workflows/list/list.component.html       |  2 +-
 src/app/workflows/list/list.component.ts         |  1 +
 src/styles.scss                                  | 10 +++++++++-
 15 files changed, 64 insertions(+), 29 deletions(-)

diff --git a/cypress/integration/dropdown.js b/cypress/integration/dropdown.js
index 39f32dcfd8..049503f482 100644
--- a/cypress/integration/dropdown.js
+++ b/cypress/integration/dropdown.js
@@ -1,4 +1,5 @@
 describe('Dropdown test', function() {
+    // TODO: GitLab tests are commented out
     require('./helper.js')
 
     beforeEach(function() {
@@ -44,7 +45,7 @@ describe('Dropdown test', function() {
             cy.get('#unlink-GitHub').should('be.visible')
             cy.get('#unlink-Quay').should('be.visible')
             cy.get('#link-Bitbucket').should('be.visible')
-            cy.get('#link-GitLab').should('be.visible')
+            // cy.get('#link-GitLab').should('be.visible')
     }
     describe('Go to setup page', function() {
         beforeEach(function() {
@@ -55,10 +56,12 @@ describe('Dropdown test', function() {
         });
 
         it('Should show all accounts as linked (except GitLab and Bitbucket)', function() {
-            everythingOk();
-            cy.visit(String(global.baseUrl) + '/auth/gitlab.com?code=somefakeid', {'failOnStatusCode': false}).then((resp) => {
-                expect(resp.status).to.eq('')
-            })
+            // everythingOk();
+            // cy.visit(String(global.baseUrl) + '/auth/gitlab.com?code=somefakeid', {'failOnStatusCode': false}).then((resp) => {
+            //     expect(resp.status).to.eq('')
+            // })
+            // TODO: Gitlab is being very slow, hopefully one day we can remove this
+            // cy.wait(10000);
             everythingOk();
             cy.visit(String(global.baseUrl) + '/auth/bitbucket.org?code=somefakeid', {'failOnStatusCode': false}).then((resp) => {
                 expect(resp.status).to.eq('')
diff --git a/src/app/container/container.component.html b/src/app/container/container.component.html
index 6917624dfb..eb61dbc4fa 100644
--- a/src/app/container/container.component.html
+++ b/src/app/container/container.component.html
@@ -81,7 +81,7 @@ <h3 class="pull-right">
   </div>
   <div *ngIf="!publicPage">
     <h3>
-      <div class="pull-right">
+      <div class="pull-right my-entry-button-group">
         <div class="btn-group" role="group">
           <button id="publishToolButton" type="button" [ngClass]="{'disabled': publishDisable()}" class="btn btn-warning" (click)="publish()" [(ngModel)]="published"
             [disabled]="!thisisValid" btnCheckbox>
diff --git a/src/app/container/register-tool/register-tool.component.ts b/src/app/container/register-tool/register-tool.component.ts
index 09214d7537..29a165f57c 100644
--- a/src/app/container/register-tool/register-tool.component.ts
+++ b/src/app/container/register-tool/register-tool.component.ts
@@ -50,11 +50,19 @@ export class RegisterToolComponent implements OnInit, AfterViewChecked {
   }
 
   friendlyRegistryKeys(): Array<string> {
-    return this.registerToolService.friendlyRegistryKeys();
+    // TODO: Remove this section when GitLab is enabled
+    const friendlyRegistryKeys = this.registerToolService.friendlyRegistryKeys();
+    return friendlyRegistryKeys.filter(key => key !== 'GitLab');
+    // TODO: Uncomment this section when GitLab is enabled
+    // return this.registerToolService.friendlyRegistryKeys();
   }
 
   friendlyRepositoryKeys(): Array<string> {
-    return this.registerToolService.friendlyRepositoryKeys();
+    // TODO: Remove this section when GitLab is enabled
+    const friendlyRepositoryKeys = this.registerToolService.friendlyRepositoryKeys();
+    return friendlyRepositoryKeys.filter(key => key !== 'GitLab');
+    // TODO: Uncomment this section when GitLab is enabled
+    // return this.registerToolService.friendlyRepositoryKeys();
   }
 
   isInvalidPrivateTool() {
diff --git a/src/app/containers/list/list.component.html b/src/app/containers/list/list.component.html
index 038df0c7de..188e2865f5 100644
--- a/src/app/containers/list/list.component.html
+++ b/src/app/containers/list/list.component.html
@@ -15,7 +15,7 @@
   -->
 
 <div class="separation">
-    <table datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions" class="table row-border hover">
+    <table datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions" class="table row-border hover" style="width:100%">
       <thead>
         <tr>
           <th>Name</th>
diff --git a/src/app/containers/list/list.component.ts b/src/app/containers/list/list.component.ts
index 41768b7774..ac44f660cc 100644
--- a/src/app/containers/list/list.component.ts
+++ b/src/app/containers/list/list.component.ts
@@ -47,6 +47,7 @@ export class ListContainersComponent extends ToolLister {
   dtOptions = {
     /* No ordering applied by DataTables during initialisation */
     order: [],
+    scrollX: true,
     columnDefs: [
       {
         orderable: false,
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index d743a5b889..5dffec9fe4 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -20,7 +20,7 @@
       <div class="col-md-6 splash">
         <h1 class="title">Create, Share, Use</h1>
         <h2 class="title caption">Search Docker Tools and Workflows for the Sciences:</h2>
-        <div class="btn-group">
+        <div class="btn-group col-md-10 col-sm-8 col-xs-12">
           <input #search type="text" placeholder="Enter Keyword..." class="search left fully-rounded search-home form-control"
           (keyup.enter)="goToSearch(search.value)">
         </div>
@@ -79,24 +79,28 @@ <h4 class="title caption">
   </div>
 </div>
 <div class="container mainScreen" #mainScreen>
-  <div class="row">
+  <div>
     <div class="col-md-9 col-sm-12 home-list">
         <tabset class="homeComponent" type="tabs">
-          <tab id="toolTab" [customClass]="browseToolsTab">
+          <tab id="toolTab" [customClass]="browseToolsTab" (select)="onSelect($event)">
             <ng-template tabHeading>
               <img class="site-icons-tab" src="assets/images/dockstore/dockstore-tools-blue.png">
               Browse Tools
             </ng-template>
             <p>A tool is a docker container with an associated descriptor describing how to run it.</p>
-            <app-list-containers [previewMode]="true"></app-list-containers>
+            <span *ngIf="selectedTab === 'toolTab'">
+                <app-list-containers [previewMode]="true"></app-list-containers>
+            </span>
           </tab>
-          <tab id="workflowTab" [customClass]="browseWorkflowsTab">
+          <tab id="workflowTab" [customClass]="browseWorkflowsTab" (select)="onSelect($event)">
             <ng-template tabHeading>
               <img class="site-icons-tab" src="assets/images/dockstore/dockstore-workflows-green.png">
               Browse Workflows
             </ng-template>
             <p> A workflow is a series of tools strung together, with an associated descriptor describing how to run it.</p>
-            <app-list-workflows [previewMode]="true"></app-list-workflows>
+            <span *ngIf="selectedTab === 'workflowTab'">
+                <app-list-workflows [previewMode]="true"></app-list-workflows>
+            </span>
           </tab>
         </tabset>
     </div>
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 03b85fc372..bd47fe2566 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -15,6 +15,7 @@
  */
 
 import {AfterViewInit, Component, OnInit} from '@angular/core';
+import { TabDirective } from 'ngx-bootstrap/tabs';
 import { TwitterService } from '../shared/twitter.service';
 import {UserService} from '../loginComponents/user.service';
 import {User} from '../shared/swagger/model/user';
@@ -27,6 +28,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
   public browseToolsTab = 'browseToolsTab';
   public browseWorkflowsTab = 'browseWorkflowsTab';
   public user: User;
+  public selectedTab = 'toolTab';
   constructor(private twitterService: TwitterService, private userService: UserService) {
   }
 
@@ -42,5 +44,9 @@ export class HomeComponent implements OnInit, AfterViewInit {
     window.location.href = '/search?search=' + searchValue;
   }
 
+  onSelect(data: TabDirective): void {
+    this.selectedTab = data.id;
+  }
+
 
 }
diff --git a/src/app/loginComponents/accounts/external/accounts.component.ts b/src/app/loginComponents/accounts/external/accounts.component.ts
index c016e67809..5b0fac882d 100644
--- a/src/app/loginComponents/accounts/external/accounts.component.ts
+++ b/src/app/loginComponents/accounts/external/accounts.component.ts
@@ -23,6 +23,7 @@ import { TrackLoginService } from '../../../shared/track-login.service';
 })
 export class AccountsExternalComponent implements OnInit, OnDestroy {
 
+  // TODO: Uncomment section when GitLab is enabled
   accountsInfo: Array<any> = [
     {
       name: 'GitHub',
@@ -44,13 +45,13 @@ export class AccountsExternalComponent implements OnInit, OnDestroy {
       bold: 'Optional',
       message: 'Bitbucket credentials are used for pulling source code from Bitbucket.',
       show: false
-    },
-    {
-      name: 'GitLab',
-      source: TokenSource.GITLAB,
-      bold: 'Optional',
-      message: 'GitLab credentials are used for pulling source code from GitLab.',
-      show: false
+    // },
+    // {
+    //   name: 'GitLab',
+    //   source: TokenSource.GITLAB,
+    //   bold: 'Optional',
+    //   message: 'GitLab credentials are used for pulling source code from GitLab.',
+    //   show: false
     }
   ];
 
diff --git a/src/app/myworkflows/myworkflows.component.css b/src/app/myworkflows/myworkflows.component.css
index 9153727ab3..f9b3ebf702 100644
--- a/src/app/myworkflows/myworkflows.component.css
+++ b/src/app/myworkflows/myworkflows.component.css
@@ -13,4 +13,3 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-
diff --git a/src/app/workflow/register-workflow-modal/register-workflow-modal.component.ts b/src/app/workflow/register-workflow-modal/register-workflow-modal.component.ts
index 614d249121..7119549440 100644
--- a/src/app/workflow/register-workflow-modal/register-workflow-modal.component.ts
+++ b/src/app/workflow/register-workflow-modal/register-workflow-modal.component.ts
@@ -47,7 +47,11 @@ export class RegisterWorkflowModalComponent implements OnInit, AfterViewChecked
   }
 
   friendlyRepositoryKeys(): Array<string> {
-    return this.registerWorkflowModalService.friendlyRepositoryKeys();
+    // TODO: Remove this section when GitLab is enabled
+    const friendlyRepositoryKeys = this.registerWorkflowModalService.friendlyRepositoryKeys();
+    return friendlyRepositoryKeys.filter(key => key !== 'GitLab');
+    // TODO: Uncomment this section when GitLab is enabled
+    // return this.registerWorkflowModalService.friendlyRepositoryKeys();
   }
 
   getDescriptorTypes(): Array<string> {
diff --git a/src/app/workflow/versions/versions.component.html b/src/app/workflow/versions/versions.component.html
index 0460ba35d0..744aa1f735 100644
--- a/src/app/workflow/versions/versions.component.html
+++ b/src/app/workflow/versions/versions.component.html
@@ -14,8 +14,8 @@
   ~    limitations under the License.
   -->
 
-<div>
-  <table class="table workflow-versions-grid table-bordered table-condensed table-striped">
+<div class="table-responsive">
+  <table class="table workflow-versions-grid table-bordered table-condensed table-striped" style="overflow: auto;">
     <thead>
     <tr>
       <th>
diff --git a/src/app/workflow/workflow.component.html b/src/app/workflow/workflow.component.html
index 9bfb94eac9..6a8176216e 100644
--- a/src/app/workflow/workflow.component.html
+++ b/src/app/workflow/workflow.component.html
@@ -80,7 +80,7 @@ <h3 id="workflow-path">
   </div>
   <div *ngIf="!publicPage">
     <h3>
-      <div class="pull-right">
+      <div class="pull-right my-entry-button-group">
         <div class="btn-group" role="group">
           <button id="publishButton" type="button" [ngClass]="{'disabled': publishDisable()}" class="btn btn-warning" (click)="publish()" [(ngModel)]="published" [disabled]="publishDisable()" btnCheckbox>
             {{workflow?.is_published ? 'Unpublish' : 'Publish'}}
diff --git a/src/app/workflows/list/list.component.html b/src/app/workflows/list/list.component.html
index 0bf269239b..b3d15fffc9 100644
--- a/src/app/workflows/list/list.component.html
+++ b/src/app/workflows/list/list.component.html
@@ -15,7 +15,7 @@
   -->
 
 <div class="separation">
-    <table datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions" class="table row-border hover">
+    <table datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions" class="table row-border hover" style="width:100%">
       <thead>
         <tr>
           <th>Name</th>
diff --git a/src/app/workflows/list/list.component.ts b/src/app/workflows/list/list.component.ts
index b9c7203548..ce15ab0351 100644
--- a/src/app/workflows/list/list.component.ts
+++ b/src/app/workflows/list/list.component.ts
@@ -42,6 +42,7 @@ export class ListWorkflowsComponent extends ToolLister {
   dtOptions = {
     /* No ordering applied by DataTables during initialisation */
     order: [],
+    scrollX: true,
     rowCallback: (row: Node, data: any[] | Object, index: number) => {
       const self = this;
       $('td', row).unbind('click');
diff --git a/src/styles.scss b/src/styles.scss
index e99044228f..089520c510 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -374,7 +374,7 @@ img.site-icons-tab {
 }
 
 .search-home {
-  width: 475px;
+  width: 100% !important;
 }
 
 input[type=text]:focus,
@@ -1214,3 +1214,11 @@ td.hljs-ln-code {
 .footer-link:hover {
   text-decoration: underline;
 }
+
+.my-entry-button-group {
+  margin-bottom: 5px;
+}
+
+.nav-tabs.nav-justified > li > a {
+  margin: 0px !important;
+}