Homepage fix tools (#306)

* fixed table resizing on home page * cannot add gitlab token, cannot add gitlab tool/workflow * fixed tests relying on gitlab
dockstore · Jun 14, 2018 · b2949a1 · b2949a1
1 parent 0e6edad
commit b2949a1
Show file tree

Hide file tree

Showing 15 changed files with 64 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
+}