DOCK-1689: added primary indicator and icon

cypress/e2e/immutableDatabaseTests/workflowDetails.ts

@@ -13,9 +13,10 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-import { goToTab, isActiveTab, setTokenUserViewPort } from '../../support/commands';
+import { goToTab, isActiveTab, resetDB, setTokenUserViewPort } from '../../support/commands';
 
 describe('Variations of URL', () => {
+  resetDB();
   setTokenUserViewPort();
   it('Should redirect to canonical url (encoding)', () => {
     cy.visit('/workflows/github.com%2FA%2Fl');
@@ -126,3 +127,17 @@ describe('Find workflow by alias', () => {
     cy.url().should('eq', Cypress.config().baseUrl + '/workflows/github.com/A/l');
   });
 });
+
+describe('Test primary descriptor bubble', () => {
+  resetDB();
+  it('go to a workflow with multiple files', () => {
+    cy.visit('/workflows/github.com/A/l');
+    goToTab('Files');
+    cy.get('[data-cy=primary-descriptor-bubble]').should('be.visible');
+    cy.get('mat-form-field').click();
+    cy.contains('.mat-option-text', 'arguments.cwl').click();
+    cy.get('[data-cy=primary-descriptor-bubble]').should('not.exist');
+    cy.get('[data-cy=go-to-primary-icon]').should('be.visible').click();
+    cy.get('[data-cy=primary-descriptor-bubble]').should('be.visible');
+  });
+});

src/app/file-tree/file-tree.component.html

@@ -8,15 +8,21 @@
       <!-- The already selected file -->
       <button *ngIf="!node.child && data.selectedFile.absolutePath === node.absolutePath" mat-raised-button disabled>
         <mat-icon class="mr-2" [attr.aria-label]="'file icon'">description</mat-icon>{{ node.name }}
+        <span *ngIf="primaryDescriptorPath === node.absolutePath" class="bubble preview-bubble" data-cy="primary-descriptor-bubble"
+          >Primary</span
+        >
       </button>
       <!-- The not-selected files -->
       <button (click)="selectFile(node)" *ngIf="!(!node.child && data.selectedFile.absolutePath === node.absolutePath)" mat-stroked-button>
         <mat-icon color="primary" class="mr-2" [attr.aria-label]="'file icon'">description</mat-icon>{{ node.name }}
+        <span *ngIf="primaryDescriptorPath === node.absolutePath" class="bubble preview-bubble" data-cy="primary-descriptor-bubble"
+          >Primary</span
+        >
       </button>
     </mat-tree-node>
 
     <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
-      <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.name">
+      <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.name" [attr.data-cy]="'toggle-' + node.name">
         <mat-icon color="primary">
           {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
         </mat-icon>

src/app/file-tree/file-tree.component.spec.ts

@@ -1,9 +1,13 @@
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatButtonModule } from '@angular/material/button';
-import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTreeModule } from '@angular/material/tree';
 import { SourceFile } from 'app/shared/swagger';
+import { DescriptorLanguageService } from '../shared/entry/descriptor-language.service';
+import { SourceFileTabsService } from '../source-file-tabs/source-file-tabs.service';
+import { DescriptorLanguageStubService, SourceFileTabsStubService } from '../test/service-stubs';
 
 import { FileTreeComponent } from './file-tree.component';
 
@@ -15,10 +19,12 @@ describe('FileTreeComponent', () => {
     waitForAsync(() => {
       TestBed.configureTestingModule({
         declarations: [FileTreeComponent],
-        imports: [MatButtonModule, MatIconModule, MatTreeModule, MatDialogModule],
+        imports: [MatButtonModule, MatIconModule, MatTreeModule, MatDialogModule, HttpClientTestingModule],
         providers: [
           { provide: MatDialogRef, useValue: {} },
           { provide: MAT_DIALOG_DATA, useValue: [] },
+          { provide: SourceFileTabsService, useClass: SourceFileTabsStubService },
+          { provide: DescriptorLanguageService, useClass: DescriptorLanguageStubService },
         ],
       }).compileComponents();
     })

src/app/file-tree/file-tree.component.ts

@@ -3,6 +3,7 @@ import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'
 import { FlatTreeControl } from '@angular/cdk/tree';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { SourceFile } from 'app/shared/swagger';
+import { ToolDescriptor } from '../shared/openapi';
 
 /** File node data with possible child nodes. */
 export interface FileNode {
@@ -44,14 +45,24 @@ export class FileTreeComponent {
 
   /** The MatTreeFlatDataSource connects the control and flattener to provide data. */
   dataSource: MatTreeFlatDataSource<FileNode, FlatTreeNode>;
+  primaryDescriptorPath: string;
   constructor(
     private matDialogRef: MatDialogRef<FileTreeComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: { files: SourceFile[]; selectedFile: SourceFile }
+    @Inject(MAT_DIALOG_DATA)
+    public data: {
+      files: SourceFile[];
+      selectedFile: SourceFile;
+      entryPath: string;
+      versionName: string;
+      descriptorType: ToolDescriptor.TypeEnum;
+      versionPath: string;
+    }
   ) {
     this.treeFlattener = new MatTreeFlattener(this.transformer, this.getLevel, this.isExpandable, this.getChildren);
     this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);
     this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
     this.dataSource.data = this.convertSourceFilesToTree(data.files);
+    this.primaryDescriptorPath = '';
   }
 
   /** Transform the data to something the tree can read. */
@@ -105,6 +116,9 @@ export class FileTreeComponent {
             children: accumulator[pathSegment].result,
             absolutePath: '/' + array.slice(0, index + 1).join('/'),
           });
+          if (this.isPrimaryDescriptor(pathSegment)) {
+            this.primaryDescriptorPath = pathSegment;
+          }
         }
         return accumulator[pathSegment];
       }, level);
@@ -129,4 +143,8 @@ export class FileTreeComponent {
       this.treeControl.collapseAll();
     }
   }
+
+  isPrimaryDescriptor(path: string): boolean {
+    return path == this.data.versionPath;
+  }
 }

src/app/shared/modules/workflow.module.ts

@@ -59,6 +59,7 @@ import { MarkdownWrapperModule } from './markdown-wrapper.module';
 import { SnackbarModule } from './snackbar.module';
 import { CategoryButtonModule } from './../../categories/button/category-button.module';
 import { MySidebarModule } from '../modules/my-sidebar.module';
+import { SourceFileTabsService } from '../../source-file-tabs/source-file-tabs.service';
 
 @NgModule({
   declarations: [
@@ -109,6 +110,7 @@ import { MySidebarModule } from '../modules/my-sidebar.module';
     RefreshService,
     RegisterWorkflowModalService,
     VersionModalService,
+    SourceFileTabsService,
   ],
   exports: [
     WorkflowComponent,

src/app/source-file-tabs/source-file-tabs.component.html

@@ -31,16 +31,67 @@
         </div>
         <div *ngIf="fileTab.value.length > 0">
           <mat-toolbar color="primary">
-            <div class="w-100" fxLayout="row" fxLayoutAlign="space-between center">
-              <button color="accent" *ngIf="fileTab.value.length > 10" mat-raised-button (click)="openFileTree(fileTab.value)">
-                Select File
-              </button>
-              <span class="no-wrap" *ngIf="fileTab.value.length > 10"> {{ fileName }} </span>
-              <mat-form-field *ngIf="fileTab.value.length <= 10" class="w-50">
-                <mat-select [value]="currentFile" (selectionChange)="matSelectChange($event)">
-                  <mat-option [value]="file" *ngFor="let file of fileTab.value"> {{ file.path }} </mat-option>
-                </mat-select>
-              </mat-form-field>
+            <div fxFlex="grow" fxLayout="row" fxLayoutAlign="space-between center">
+              <span *ngIf="fileTab.value.length > 10">
+                <button color="accent" data-cy="select-file-button" mat-raised-button (click)="openFileTree(fileTab.value)">
+                  Select File
+                </button>
+              </span>
+              <span fxFlex="40">
+                <span *ngIf="fileTab.value.length > 10" fxLayoutAlign="center center">
+                  <span class="no-wrap"> {{ fileName }} </span>
+                  <span
+                    *ngIf="isCurrentFilePrimary"
+                    class="bubble preview-bubble primary-bubble-header"
+                    data-cy="primary-descriptor-bubble"
+                  >
+                    Primary
+                  </span>
+                  <a
+                    color="secondary"
+                    type="button"
+                    *ngIf="!isCurrentFilePrimary"
+                    (click)="selectFile(primaryDescriptors[0])"
+                    matTooltip="View the primary descriptor"
+                    mat-icon-button
+                    data-cy="go-to-primary-icon"
+                  >
+                    <mat-icon aria-hidden="false" aria-label="Navigate to Primary Descriptor file" fontIcon="home"></mat-icon>
+                  </a>
+                </span>
+
+                <mat-form-field class="w-100" *ngIf="fileTab.value.length <= 10">
+                  <mat-select [value]="currentFile" (selectionChange)="matSelectChange($event)">
+                    <mat-select-trigger>
+                      {{ currentFile.path }}
+                      <span
+                        *ngIf="isCurrentFilePrimary"
+                        class="bubble preview-bubble primary-bubble-header"
+                        data-cy="primary-descriptor-bubble"
+                        >Primary</span
+                      >
+                    </mat-select-trigger>
+                    <mat-option [value]="file" *ngFor="let file of fileTab.value">
+                      {{ file.path }}
+                      <span *ngIf="primaryDescriptorPath === file.path" class="bubble preview-bubble" data-cy="primary-descriptor-bubble"
+                        >Primary</span
+                      >
+                    </mat-option>
+                  </mat-select>
+                </mat-form-field>
+
+                <a
+                  color="secondary"
+                  type="button"
+                  *ngIf="!isCurrentFilePrimary && fileTab.value.length <= 10"
+                  (click)="selectFile(primaryDescriptors[0])"
+                  matTooltip="View the primary descriptor"
+                  mat-icon-button
+                  data-cy="go-to-primary-icon"
+                >
+                  <mat-icon aria-hidden="false" aria-label="Navigate to Primary Descriptor file" fontIcon="home"></mat-icon>
+                </a>
+              </span>
               <span>
                 <a
                   mat-icon-button

src/app/source-file-tabs/source-file-tabs.component.scss

@@ -0,0 +1,4 @@
+.primary-bubble-header {
+  font-size: 14px !important;
+  padding: 0 1rem !important;
+}

src/app/source-file-tabs/source-file-tabs.component.ts

@@ -9,7 +9,6 @@ import { FileService } from 'app/shared/file.service';
 import { SourceFile, ToolDescriptor, WorkflowVersion } from 'app/shared/openapi';
 import { finalize } from 'rxjs/operators';
 import { SourceFileTabsService } from './source-file-tabs.service';
-
 import { WorkflowQuery } from '../shared/state/workflow.query';
 import { Observable } from 'rxjs';
 
@@ -26,6 +25,7 @@ export class SourceFileTabsComponent implements OnChanges {
     private workflowQuery: WorkflowQuery
   ) {
     this.isPublished$ = this.workflowQuery.workflowIsPublished$;
+    this.primaryDescriptors = [];
   }
   // Used to generate the TRS file path
   @Input() entryPath: string;
@@ -42,6 +42,9 @@ export class SourceFileTabsComponent implements OnChanges {
   relativePath: string;
   downloadFilePath: string;
   fileTabs: Map<string, SourceFile[]>;
+  primaryDescriptors: SourceFile[] | null;
+  primaryDescriptorPath: string;
+  isCurrentFilePrimary: boolean | null;
   protected isPublished$: Observable<boolean>;
   /**
    * To prevent the Angular's keyvalue pipe from sorting by key
@@ -74,6 +77,12 @@ export class SourceFileTabsComponent implements OnChanges {
           if (this.fileTabs.size > 0) {
             this.changeFileType(this.fileTabs.values().next().value);
           }
+          sourceFiles.forEach((sourceFile) => {
+            if (this.isPrimaryDescriptor(sourceFile.path)) {
+              this.primaryDescriptors.push(sourceFile);
+              this.primaryDescriptorPath = sourceFile.path;
+            }
+          });
         },
         () => {
           this.displayError = true;
@@ -107,6 +116,7 @@ export class SourceFileTabsComponent implements OnChanges {
       this.downloadFilePath = null;
     }
     this.currentFile = file;
+    this.isCurrentFilePrimary = this.isPrimaryDescriptor(this.currentFile.path);
   }
 
   matTabChange(event: MatTabChangeEvent) {
@@ -119,7 +129,17 @@ export class SourceFileTabsComponent implements OnChanges {
 
   openFileTree(sourceFiles: SourceFile[]) {
     this.matDialog
-      .open(FileTreeComponent, { width: bootstrap4largeModalSize, data: { files: sourceFiles, selectedFile: this.currentFile } })
+      .open(FileTreeComponent, {
+        width: bootstrap4largeModalSize,
+        data: {
+          files: sourceFiles,
+          selectedFile: this.currentFile,
+          entryPath: this.entryPath,
+          versionName: this.version.name,
+          descriptorType: this.descriptorType,
+          versionPath: this.version.workflow_path,
+        },
+      })
       .afterClosed()
       .subscribe((absoluteFilePath) => {
         const foundFile = sourceFiles.find((file) => file.absolutePath === absoluteFilePath);
@@ -132,4 +152,8 @@ export class SourceFileTabsComponent implements OnChanges {
   downloadFileContent() {
     this.fileService.downloadFileContent(this.currentFile.content, this.fileName);
   }
+
+  isPrimaryDescriptor(path: string): boolean {
+    return path === this.version.workflow_path;
+  }
 }

src/app/source-file-tabs/source-file-tabs.service.spec.ts

@@ -4,19 +4,22 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { DescriptorTypeCompatService } from 'app/shared/descriptor-type-compat.service';
 import { FileService } from 'app/shared/file.service';
 import { WorkflowsService } from 'app/shared/swagger';
-import { DescriptorTypeCompatStubService, FileStubService, WorkflowsStubService } from 'app/test/service-stubs';
+import { DescriptorTypeCompatStubService, FileStubService, ProviderStubService, WorkflowsStubService } from 'app/test/service-stubs';
+import { ProviderService } from '../shared/provider.service';
 import { SourceFileTabsService } from './source-file-tabs.service';
 import { DescriptorLanguageService } from '../shared/entry/descriptor-language.service';
+import { WorkflowModule } from '../shared/modules/workflow.module';
 
 describe('SourceFileTabsService', () => {
   beforeEach(() =>
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
+      imports: [HttpClientTestingModule, WorkflowModule],
       providers: [
         { provide: FileService, useClass: FileStubService },
         { provide: WorkflowsService, useClass: WorkflowsStubService },
         { provide: DescriptorTypeCompatService, useClass: DescriptorTypeCompatStubService },
         { provide: DescriptorLanguageService, useClass: DescriptorLanguageService },
+        { provide: ProviderService, useClass: ProviderStubService },
       ],
     })
   );