DOCK-1525: reordering version dropdown in my workflow (#1720)

* added search package * added search library * package-lock * removed debug code * made search bar fixed * alphabetical sort * added test * added comments * added comments * changed library for search * added comments and changed label * removed other package * fixed bug; * added packages to license csv * update package.json * package.json * package.json * package-lock * removed unnecessary method * removed unnecessary method
dockstore · Mar 10, 2023 · b8c2ba5 · b8c2ba5
1 parent 80c555d
commit b8c2ba5
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 9 deletions.
diff --git a/THIRD-PARTY-LICENSES.csv b/THIRD-PARTY-LICENSES.csv
@@ -853,6 +853,7 @@
 "neo-async@2.6.2","MIT","https://github.com/suguru03/neo-async"
 "ng2-ui-auth@10.0.1","UNKNOWN",""
 "ngx-markdown@14.0.1","MIT","https://github.com/jfcere/ngx-markdown"
+"ngx-mat-select-search@5.0.0","MIT","https://github.com/bithost-gmbh/ngx-mat-select-search"
 "ngx-sharebuttons@8.1.0","MIT","https://github.com/murhafsousli/ngx-sharebuttons"
 "nice-napi@1.0.2","MIT","https://github.com/addaleax/nice-napi"
 "node-addon-api@3.2.1","MIT","https://github.com/nodejs/node-addon-api"

diff --git a/cypress/e2e/group2/myworkflows.ts b/cypress/e2e/group2/myworkflows.ts
@@ -521,6 +521,18 @@ describe('Dockstore my workflows', () => {
     });
   }
 });
+describe('Version Dropdown should have search capabilities', () => {
+  setTokenUserViewPort();
+  it('Search result should exclude master version', () => {
+    cy.visit('/my-workflows/github.com/A/l');
+    cy.get('[data-cy=version-dropdown]').should('contain', 'master').click();
+    cy.get('mat-option').should('contain', 'master').should('be.visible');
+    cy.get('mat-option').should('contain', 'test').should('be.visible');
+    cy.get('[data-cy=version-dropdown-search-field]').should('be.visible').type('test');
+    cy.get('mat-option').should('not.contain', 'master');
+    cy.get('mat-option').should('contain', 'test').should('be.visible');
+  });
+});
 describe('Should handle no workflows correctly', () => {
   resetDB();
   setTokenUserViewPortCurator(); // Curator has no workflows

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dockstore-ui2",
-  "version": "2.8.0",
+  "version": "2.10.0",
   "license": "Apache License 2.0",
   "config": {
     "webservice_version": "1.13.0",
@@ -74,6 +74,7 @@
     "material-design-icons-iconfont": "^6.1.0",
     "ng2-ui-auth": "^10.0.1",
     "ngx-markdown": "^14.0.1",
+    "ngx-mat-select-search": "^5.0.0",
     "ngx-sharebuttons": "^8.0.5",
     "rxjs": "^6.6.7",
     "ts-md5": "^1.2.8",

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -113,6 +113,7 @@ import { TosBannerComponent } from './tosBanner/tos-banner.component';
 import { ExporterStepComponent } from './workflow/snapshot-exporter-modal/exporter-step/exporter-step.component';
 import { SnaphotExporterModalComponent } from './workflow/snapshot-exporter-modal/snaphot-exporter-modal.component';
 import { ViewService } from './workflow/view/view.service';
+import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 
 export const myCustomTooltipDefaults: MatTooltipDefaultOptions = {
   showDelay: 500,
@@ -183,6 +184,7 @@ export function configurationServiceFactory(configurationService: ConfigurationS
     StarringModule,
     OrganizationStarringModule,
     OrganizationStargazersModule,
+    NgxMatSelectSearchModule,
     routing,
     StargazersModule,
     MarkdownModule.forRoot(),

diff --git a/src/app/shared/modules/workflow.module.ts b/src/app/shared/modules/workflow.module.ts
@@ -60,6 +60,7 @@ 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';
+import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 
 @NgModule({
   declarations: [
@@ -100,6 +101,7 @@ import { SourceFileTabsService } from '../../source-file-tabs/source-file-tabs.s
     SnackbarModule,
     CategoryButtonModule,
     MySidebarModule,
+    NgxMatSelectSearchModule,
   ],
   providers: [
     DateService,

diff --git a/src/app/workflow/workflow.component.html b/src/app/workflow/workflow.component.html
@@ -71,10 +71,22 @@ <h3 id="workflow-path" data-cy="workflowTitle" fxLayout="row" fxLayoutAlign="sta
         </span>
       </h3>
       <div *ngIf="!publicPage && workflow.workflowVersions && workflow.workflowVersions.length > 0" class="input-group">
-        <mat-form-field>
-          <mat-select (selectionChange)="onSelectedVersionChange(selectedVersion)" [(value)]="selectedVersion">
-            <mat-option *ngFor="let workflowVersion of workflow.workflowVersions" [value]="workflowVersion"
-              >{{ workflowVersion.name }}
+        <mat-form-field data-cy="version-dropdown">
+          <mat-select
+            (selectionChange)="onSelectedVersionChange(selectedVersion)"
+            [(value)]="selectedVersion"
+            [formControl]="workflowVersionsCtrl"
+          >
+            <mat-option>
+              <ngx-mat-select-search
+                data-cy="version-dropdown-search-field"
+                [formControl]="versionFilterCtrl"
+                placeholderLabel="Search version"
+                noEntriesFoundLabel="No matching version found"
+              ></ngx-mat-select-search>
+            </mat-option>
+            <mat-option *ngFor="let version of filteredVersions | async" [value]="version">
+              {{ version.name }}
             </mat-option>
           </mat-select>
         </mat-form-field>

diff --git a/src/app/workflow/workflow.component.ts b/src/app/workflow/workflow.component.ts
@@ -22,7 +22,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { AlertService } from 'app/shared/alert/state/alert.service';
 import { BioWorkflow } from 'app/shared/swagger/model/bioWorkflow';
 import { Service } from 'app/shared/swagger/model/service';
-import { Observable } from 'rxjs';
+import { Observable, ReplaySubject } from 'rxjs';
 import { finalize, takeUntil } from 'rxjs/operators';
 import { AlertQuery } from '../shared/alert/state/alert.query';
 import { BioschemaService } from '../shared/bioschema.service';
@@ -58,6 +58,7 @@ import { EntriesService, WorkflowSubClass } from '../shared/openapi';
 import { Title } from '@angular/platform-browser';
 import { EntryCategoriesService } from '../categories/state/entry-categories.service';
 import RoleEnum = Permission.RoleEnum;
+import { FormControl } from '@angular/forms';
 
 @Component({
   selector: 'app-workflow',
@@ -97,6 +98,11 @@ export class WorkflowComponent extends Entry implements AfterViewInit, OnInit {
   public WorkflowModel = Workflow;
   public WorkflowVersionModel = WorkflowVersion;
   public launchSupport$: Observable<boolean>;
+  public workflowVersionAlphabetical: Array<Tag | WorkflowVersion> = [];
+  public workflowVersionsCtrl: FormControl<Tag | WorkflowVersion> = new FormControl<Tag | WorkflowVersion>(null); //control for the selected version
+  public versionFilterCtrl: FormControl<string> = new FormControl<string>(''); // control for the MatSelect filter keyword
+  public filteredVersions: ReplaySubject<Array<Tag | WorkflowVersion>> = new ReplaySubject<Array<Tag | WorkflowVersion>>(1);
+
   @Input() user;
 
   constructor(
@@ -167,6 +173,10 @@ export class WorkflowComponent extends Entry implements AfterViewInit, OnInit {
 
   ngOnInit() {
     this.init();
+    //watch for changes in search
+    this.versionFilterCtrl.valueChanges.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
+      this.filterVersions();
+    });
   }
 
   ngAfterViewInit() {
@@ -181,7 +191,6 @@ export class WorkflowComponent extends Entry implements AfterViewInit, OnInit {
         }
       });
     }
-
     this.updateTabSelection();
   }
 
@@ -302,11 +311,31 @@ export class WorkflowComponent extends Entry implements AfterViewInit, OnInit {
             this.gA4GHFilesService.updateFiles(trsID, this.selectedVersion.name, [this.workflow.descriptorType]);
           }
         }
+        this.workflowVersionAlphabetical = this.workflow.workflowVersions.slice().sort((a, b) => {
+          return a.name.localeCompare(b.name);
+        });
+        this.filteredVersions.next(this.workflowVersionAlphabetical.slice());
+        this.workflowVersionsCtrl.setValue(this.selectedVersion);
       }
       this.setUpWorkflow(workflow);
     });
   }
 
+  //function for filtering list of versions according to search
+  protected filterVersions() {
+    if (!this.workflowVersionAlphabetical) {
+      return;
+    }
+    let search = this.versionFilterCtrl.value;
+    if (!search) {
+      this.filteredVersions.next(this.workflowVersionAlphabetical.slice());
+      return;
+    } else {
+      search = search.toLowerCase();
+    }
+    this.filteredVersions.next(this.workflowVersionAlphabetical.filter((version) => version.name.toLowerCase().indexOf(search) > -1));
+  }
+
   public getTRSID(): string {
     let id: string;
     if (this.entryType === EntryType.Tool) {