Make all tabs visible for a workflow (#1931)

Style workflow versions so no scrolling necessary As part of that, revert "Swap position of Metrics and Tool tabs (#1926)" SEAB-6231
dockstore · Feb 2, 2024 · b786d89 · b786d89
1 parent 959b372
commit b786d89
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 22 deletions.
diff --git a/cypress/e2e/group2/myworkflows.ts b/cypress/e2e/group2/myworkflows.ts
@@ -537,10 +537,6 @@ describe('Dockstore my workflows part 3', () => {
       cy.visit('/my-workflows/github.com/A/l');
       isActiveTab('Info');
       tabs.forEach((tab) => {
-        if (tab === 'Tools') {
-          // Ugh, got to scroll to click this.
-          cy.get('#workflow_tabs').find('.mat-tab-header-pagination-after').first().click();
-        }
         goToTab(tab);
         isActiveTab(tab);
         if (tab === 'Versions') {

diff --git a/cypress/e2e/group3/metrics.ts b/cypress/e2e/group3/metrics.ts
@@ -6,7 +6,6 @@ describe('Dockstore Metrics', () => {
   setTokenUserViewPort();
   it('Should see no metrics banner', () => {
     cy.visit('/workflows/github.com/A/l:master');
-    cy.get('.mat-tab-header-pagination-after').click();
     goToTab('Metrics');
     cy.get('[data-cy=no-metrics-banner]').should('be.visible');
 
@@ -23,7 +22,6 @@ describe('Dockstore Metrics', () => {
       }).as('getMetrics');
     });
     cy.visit('/workflows/github.com/A/l:master');
-    cy.get('.mat-tab-header-pagination-after').click();
     cy.wait('@getMetrics');
     goToTab('Metrics');
 

diff --git a/cypress/e2e/immutableDatabaseTests/workflowDetails.ts b/cypress/e2e/immutableDatabaseTests/workflowDetails.ts
@@ -100,15 +100,13 @@ describe('Dockstore Workflow Details', () => {
     it('Should see No Metrics banner', () => {
       cy.visit('/workflows/github.com/A/l');
       cy.get('.mat-tab-label').should('have.length', 7);
-      cy.get('.mat-tab-header-pagination-after').click();
       goToTab('Metrics');
       cy.url().should('eq', Cypress.config().baseUrl + '/workflows/github.com/A/l:master?tab=metrics');
       cy.get('[data-cy=no-metrics-banner]').should('be.visible');
     });
   });
 
   it('Change tab to tools', () => {
-    cy.get('.mat-tab-header-pagination-after').click();
     goToTab('Tools');
     cy.url().should('eq', Cypress.config().baseUrl + '/workflows/github.com/A/l:master?tab=tools');
   });

diff --git a/src/app/shared/styles/workflow-container.component.scss b/src/app/shared/styles/workflow-container.component.scss
@@ -23,3 +23,9 @@ a.underline-none {
   width: 14rem;
   text-align: start;
 }
+
+:host ::ng-deep .mat-tab-label {
+  padding-left: 0.5em !important;
+  padding-right: 0.5em !important;
+  min-width: 0 !important;
+}
diff --git a/src/app/workflow/workflow.component.html b/src/app/workflow/workflow.component.html
@@ -374,10 +374,18 @@ <h3>
               </ng-template>
             </ng-template>
           </mat-tab>
-          <mat-tab id="metricsTab" label="Metrics">
-            <app-executions-tab [entry]="workflow" [version]="selectedVersion"></app-executions-tab>
-          </mat-tab>
           <div *ngIf="entryType === EntryType.BioWorkflow">
+            <mat-tab id="toolsTab" label="Tools">
+              <div *ngIf="!isStub()">
+                <app-tool-tab [selectedVersion]="selectedVersion" [canRead]="canRead" [canWrite]="canWrite" [isOwner]="isOwner">
+                </app-tool-tab>
+              </div>
+              <div *ngIf="isStub()" class="p-3">
+                <mat-card class="alert alert-warning mat-elevation-z" role="alert">
+                  <mat-icon class="alert-warning-icon">warning</mat-icon> To see tools, please refresh the workflow.
+                </mat-card>
+              </div>
+            </mat-tab>
             <mat-tab id="dagTab" label="DAG">
               <ng-template matTabContent>
                 <app-dag
@@ -401,18 +409,10 @@ <h3>
                 </div>
               </ng-template>
             </mat-tab>
-            <mat-tab id="toolsTab" label="Tools">
-              <div *ngIf="!isStub()">
-                <app-tool-tab [selectedVersion]="selectedVersion" [canRead]="canRead" [canWrite]="canWrite" [isOwner]="isOwner">
-                </app-tool-tab>
-              </div>
-              <div *ngIf="isStub()" class="p-3">
-                <mat-card class="alert alert-warning mat-elevation-z" role="alert">
-                  <mat-icon class="alert-warning-icon">warning</mat-icon> To see tools, please refresh the workflow.
-                </mat-card>
-              </div>
-            </mat-tab>
           </div>
+          <mat-tab id="metricsTab" label="Metrics">
+            <app-executions-tab [entry]="workflow" [version]="selectedVersion"></app-executions-tab>
+          </mat-tab>
           <mat-tab *ngIf="!isPublic() && isHosted() && isOwner" id="permissionsTab" label="Permissions">
             <app-permissions [workflow]="workflow"></app-permissions>
           </mat-tab>