From b786d89b10c3989dc69fd794e75c6bb1df4f732e Mon Sep 17 00:00:00 2001
From: Charles Overbeck <coverbec@ucsc.edu>
Date: Fri, 2 Feb 2024 09:26:40 -0800
Subject: [PATCH] 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
---
 cypress/e2e/group2/myworkflows.ts             |  4 ---
 cypress/e2e/group3/metrics.ts                 |  2 --
 .../immutableDatabaseTests/workflowDetails.ts |  2 --
 .../styles/workflow-container.component.scss  |  6 ++++
 src/app/workflow/workflow.component.html      | 28 +++++++++----------
 5 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/cypress/e2e/group2/myworkflows.ts b/cypress/e2e/group2/myworkflows.ts
index e923b6745f..ca5b35c302 100644
--- 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
index ae48285940..62732a07bc 100644
--- 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
index 666a96a26e..bb3fe5e26a 100644
--- a/cypress/e2e/immutableDatabaseTests/workflowDetails.ts
+++ b/cypress/e2e/immutableDatabaseTests/workflowDetails.ts
@@ -100,7 +100,6 @@ 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');
@@ -108,7 +107,6 @@ describe('Dockstore Workflow Details', () => {
   });
 
   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
index 4656d87c7b..02ff05dd6d 100644
--- 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
index bf5db95b90..4fee318494 100644
--- 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>