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

hyunnaye · 2023-03-02T15:50:37Z

Description
This PR adds a search feature onto the version dropdown in My Workflows and reorders the dropdown to alphabetical order.
Library used: https://www.npmjs.com/package/ngx-mat-select-search

Before change:

After change (search bar and alphabetical sorting):

Review Instructions
Review that the newly created integration test pass and the search feature correctly filters through the different versions of a workflow.

Issue
dockstore/dockstore#3722

Security
If there are any concerns that require extra attention from the security team, highlight them here.

Please make sure that you've checked the following before submitting your pull request. Thanks!

codecov · 2023-03-03T14:58:54Z

Codecov Report

Patch coverage: 6.25% and project coverage change: -0.19 ⚠️

Comparison is base (d515be7) 40.74% compared to head (19e0ed1) 40.56%.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #1720      +/-   ##
===========================================
- Coverage    40.74%   40.56%   -0.19%     
===========================================
  Files          349      349              
  Lines        10646    10676      +30     
  Branches      2728     2736       +8     
===========================================
- Hits          4338     4331       -7     
- Misses        4068     4103      +35     
- Partials      2240     2242       +2

Impacted Files	Coverage Δ
src/app/shared/modules/workflow.module.ts	`42.85% <ø> (ø)`
src/app/workflow/workflow.component.ts	`2.65% <6.25%> (-0.23%)`	⬇️

... and 7 files with indirect coverage changes

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

svonworl · 2023-03-07T17:53:00Z

Hi, Nayeon, thanks for the work on this. Could you please add a few comments at key spots in the code, it will help me to follow it.

coverbeck

Looks cool!

Some observations about using the control, that you might be constrained by what customization the control allows:

You have to click on the selection. For example, type develop, assuming there is a match; it only shows develop, but you then have to click on it. Could be just me, I try to use the mouse as little as possible.
If you type a matching version, then press tab (no click), you end up in a state where it doesn't display anything. Screenshot attached.
You could argue this both ways, but I don't like how it "remembers" your last search. I type develop, select it, now I want to look for master; it's still showing what I typed for develop beforehand.

src/app/workflow/workflow.component.ts

denis-yuen

question

denis-yuen · 2023-03-07T19:27:14Z

THIRD-PARTY-LICENSES.csv

@@ -805,6 +805,7 @@
 "make-fetch-happen@10.2.1","ISC","https://github.com/npm/make-fetch-happen"
 "make-fetch-happen@5.0.2","ISC","https://github.com/zkat/make-fetch-happen"
 "marked@4.2.3","MIT","https://github.com/markedjs/marked"
+"mat-select-search@1.2.21","Custom: https://github.com/shafi-sahal/MatSelectSearch",""


Was a big thread , didn't fully read through.
Did you consider https://github.com/bithost-gmbh/ngx-mat-select-search which seems to be more popular?
(this is a discussion, I know little about the two aside from seeing both in the thread and this one seems to have more commits/stars)

MIT License also a little more clearly open source than "custom"

I tried ngx-mat-select-search but I couldn't get it to compile due to various module errors like ERROR in ./node_modules/ngx-mat-select-search/fesm2020/ngx-mat-select-search.mjs 842:108-124 export 'MatIconButton' (imported as 'i4') was not found in '@angular/material/button' (possible exports: MatAnchor, MatButton, MatButtonModule)

Did you try version 5?
https://github.com/bithost-gmbh/ngx-mat-select-search#compatibility

no, i'll try that out right now!

changed to ngx-mat-select-search as it seemed to resolve Charles' issues above

hyunnaye · 2023-03-08T21:15:40Z

Looks cool!

Some observations about using the control, that you might be constrained by what customization the control allows:

You have to click on the selection. For example, type develop, assuming there is a match; it only shows develop, but you then have to click on it. Could be just me, I try to use the mouse as little as possible.

If you type a matching version, then press tab (no click), you end up in a state where it doesn't display anything. Screenshot attached.

You could argue this both ways, but I don't like how it "remembers" your last search. I type develop, select it, now I want to look for master; it's still showing what I typed for develop beforehand.

Thank you for this! I switched over to ngx-mat-select-search following Denis' comment and it seems to resolve this issue. I will rerequest review after verifying all tests pass in my latest commit

denis-yuen

Hmmm, so if I understand correctly, the build issues was the bad cache in the end?

hyunnaye · 2023-03-09T19:59:41Z

Hmmm, so if I understand correctly, the build issues was the bad cache in the end?

Yea, I changed the version on package.json and package-lock.json and that seems to fix it.. Very odd

denis-yuen · 2023-03-09T20:24:11Z

Hmmm, so if I understand correctly, the build issues was the bad cache in the end?

Yea, I changed the version on package.json and package-lock.json and that seems to fix it.. Very odd

I think what happened is the first time the cache was generated, it was messed up and every subsequent build it pulled the messed up cache until you busted the cache with the change

coverbeck

I tried running it locally, and it looks and acts a lot nicer than the previous iteration. I did hve one question though that I left inline.

src/app/workflow/workflow.component.ts

sonarqubecloud · 2023-03-10T15:56:28Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

coverbeck

I left a comment with one more question, but assuming that's resolved, approved.

added search package

640a453

hyunnaye self-assigned this Mar 2, 2023

hyunnaye added 5 commits March 2, 2023 13:46

added search library

3e2b99e

package-lock

e615c9c

removed debug code

c2b6ab0

made search bar fixed

e9fd495

alphabetical sort

b7741bd

added test

dd084cb

hyunnaye requested review from coverbeck, denis-yuen, kathy-t and svonworl March 3, 2023 19:55

hyunnaye added 2 commits March 7, 2023 13:37

added comments

b408510

added comments

dcbde0f

coverbeck reviewed Mar 7, 2023

View reviewed changes

src/app/workflow/workflow.component.ts Outdated Show resolved Hide resolved

src/app/workflow/workflow.component.ts Outdated Show resolved Hide resolved

denis-yuen reviewed Mar 7, 2023

View reviewed changes

hyunnaye removed request for kathy-t and svonworl March 8, 2023 19:30

hyunnaye added 5 commits March 8, 2023 14:55

changed library for search

16b0c3a

added comments and changed label

82eb576

removed other package

3ba1770

fixed bug;

5b94545

added packages to license csv

981d36e

hyunnaye added 4 commits March 9, 2023 11:29

update package.json

ed38da5

merge

085fb1e

package.json

f761b6f

package.json

ef0b49a

package-lock

13de7dc

hyunnaye requested review from coverbeck, denis-yuen, kathy-t and svonworl March 9, 2023 19:40

denis-yuen approved these changes Mar 9, 2023

View reviewed changes

coverbeck reviewed Mar 10, 2023

View reviewed changes

src/app/workflow/workflow.component.ts Outdated Show resolved Hide resolved

svonworl approved these changes Mar 10, 2023

View reviewed changes

hyunnaye added 2 commits March 10, 2023 10:24

removed unnecessary method

c463856

removed unnecessary method

19e0ed1

hyunnaye requested a review from coverbeck March 10, 2023 16:16

kathy-t approved these changes Mar 10, 2023

View reviewed changes

coverbeck approved these changes Mar 10, 2023

View reviewed changes

hyunnaye merged commit b8c2ba5 into develop Mar 10, 2023

hyunnaye deleted the feature/DOCK-1525-version-dropdown branch March 10, 2023 19:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

hyunnaye commented Mar 2, 2023 •

edited

Loading

codecov bot commented Mar 3, 2023 •

edited

Loading

svonworl commented Mar 7, 2023

coverbeck left a comment

denis-yuen left a comment

denis-yuen Mar 7, 2023 •

edited

Loading

hyunnaye Mar 7, 2023

denis-yuen Mar 7, 2023

hyunnaye Mar 8, 2023

hyunnaye Mar 8, 2023

hyunnaye commented Mar 8, 2023

denis-yuen left a comment

hyunnaye commented Mar 9, 2023

denis-yuen commented Mar 9, 2023

coverbeck left a comment

sonarqubecloud bot commented Mar 10, 2023

coverbeck left a comment

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

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

Conversation

hyunnaye commented Mar 2, 2023 • edited Loading

codecov bot commented Mar 3, 2023 • edited Loading

Codecov Report

svonworl commented Mar 7, 2023

coverbeck left a comment

Choose a reason for hiding this comment

denis-yuen left a comment

Choose a reason for hiding this comment

denis-yuen Mar 7, 2023 • edited Loading

Choose a reason for hiding this comment

hyunnaye Mar 7, 2023

Choose a reason for hiding this comment

denis-yuen Mar 7, 2023

Choose a reason for hiding this comment

hyunnaye Mar 8, 2023

Choose a reason for hiding this comment

hyunnaye Mar 8, 2023

Choose a reason for hiding this comment

hyunnaye commented Mar 8, 2023

denis-yuen left a comment

Choose a reason for hiding this comment

hyunnaye commented Mar 9, 2023

denis-yuen commented Mar 9, 2023

coverbeck left a comment

Choose a reason for hiding this comment

sonarqubecloud bot commented Mar 10, 2023

coverbeck left a comment

Choose a reason for hiding this comment

hyunnaye commented Mar 2, 2023 •

edited

Loading

codecov bot commented Mar 3, 2023 •

edited

Loading

denis-yuen Mar 7, 2023 •

edited

Loading