[WIP] Porting Masthead to Vue.js #9071

inkuzmin · 2019-12-06T17:10:53Z

This is a work in progress on porting the masthead to Vue.js.

client/galaxy/scripts/components/Masthead.vue

guerler · 2020-01-10T00:40:49Z

Thank you so much for working on this. I noticed that there is an issue with the navigation, an error is triggered when navigating to the admin panel and then back to the workflow list. I also noticed that the masthead is not rendered for the data libraries view.

inkuzmin · 2020-01-15T18:15:14Z

@guerler, thank you for checking it! I am going to try to fix the issues you've noticed tomorrow.

client/galaxy/scripts/layout/masthead.js

guerler · 2020-05-12T14:35:40Z

I assume you are referring to masthead_tests.js. I am not sure how useful those tests are given that we use Bootstrap Vue now. Maybe we should transfer some basic tests, but I'd be fine if you want to remove the legacy test file and you think thats appropriate. Btw the qunit tests for the workflow_editor.js were very useful. Thank you!

Implement hidden tabs also to match unit tests in qunit.

jmchilton · 2020-05-13T14:14:33Z

I tried to transfer a bunch of the tests - got everything transferred except some of the scratchbook interaction tests. I think they didn't work because I'm modeling the tab definitions with a POJO in the test instead of a Backbone collection. I think that probably represents the direction we want to go but if you'd like me to redo the test setup with a Backbone collection and get those last few assertions I can do that otherwise, I'll remove the qunit tests.

Hopefully whoever ports scratchbook.js to VueJS covers that remaining functionality with a unit test - also I think we have Selenium coverage for this because we run through the scratchbook tour.

I'll try working on figuring out the Selenium failures and cleaning up the unneeded code (if any) now.

Problem is the interactive tooltips that are off by default in bootstrap but not bootstrap-vue. interactive tooltips are better for accessibility though so best to just work around them for testing?

dannon · 2020-05-19T12:32:00Z

client/galaxy/scripts/components/Masthead/MastheadItem.vue

+        v-b-popover.manual.bottom="{ id: tab.id, content: popoverNote, html: true }"
+        @click="open(tab, $event)"
+    >
+        <template v-if="tab.icon">


It'd be great if future work could keep in mind and use the new(ish) vue-fontawesome work that was introduced to swap out the old style fontawesome classes and includes.

dannon · 2020-05-19T12:34:14Z

lib/galaxy/selenium/navigation.yml

-    user:
-      type: xpath
-      selector: '//li[@id="user"]'
+    # bootstrap-vue a tag doesn't work as link target, need to hit span inside


Hopefully this doesn't break many tours.

OlegZharkov · 2020-05-19T12:36:58Z

It looks like dropdown doesn't close on mouse click (click on outer area of dropdown div).

Update:
But I guess, it's a minor issue.

dannon · 2020-05-19T12:43:17Z

@OlegZharkov What browser? Anything weird in the console? It seems to work for me. (FF-DeveloperEdition)

OlegZharkov · 2020-05-19T12:49:56Z

@dannon
Chromium and Google Chrome version 81.0.4044.92. Same on firefox 76.
I will record a video

OlegZharkov · 2020-05-19T12:58:04Z

It looks like it doesn't happen on every path. It doesn't work on /, but works on /login. Do we use different js frameworks there by any chance?

dannon · 2020-05-19T13:00:26Z

@OlegZharkov I think it's that you're clicking inside the welcome iframe on /, and that's the difference. Can you investigate to see if other iframes have the same issue?

(https://stackoverflow.com/questions/11351726/bootstrap-dropdown-doesnt-collapse-when-clicking-over-iframe -- the blur idea looks reasonable to me)

OlegZharkov · 2020-05-19T13:34:32Z

@dannon
Yes. It doesn't work on other iframes as well. The idea with blur should work. I can work on it. Currently trying...

dannon · 2020-05-19T13:43:52Z

@OlegZharkov Just saw the ping here, too. Feel free to take this over: https://github.com/galaxyproject/galaxy/compare/dev...dannon:fix-iframe-menuhide?expand=1

jmchilton · 2020-05-19T13:55:36Z

A big difference is interactive being on by default for the bootstrap-vue but not for bootstrap. So the menu is more persistent now. This is an accessibility thing - https://bootstrap-vue.org/docs/components/tooltip. I don't know if the blur thing is equivalent to just swapping that but something to consider, I didn't know about the option before looking into why the test behavior changed. 387fded

Update: I guess that was tooltips - not menus. Yeah ignore this.

inkuzmin added 2 commits December 6, 2019 19:02

port masthead to vue

db4c673

add tooltips

a61b3d2

galaxybot added triage status/WIP labels Dec 6, 2019

inkuzmin added 6 commits December 6, 2019 20:31

add popovers

c3b33fe

actions

3bd0508

port nav-note

71459d6

add scratch book

38042da

active tab

3545c38

fix scratch-book indicator

fe6ee3b

guerler reviewed Dec 17, 2019

View reviewed changes

client/galaxy/scripts/components/Masthead.vue Outdated Show resolved Hide resolved

guerler reviewed Dec 17, 2019

View reviewed changes

client/galaxy/scripts/components/Masthead.vue Outdated Show resolved Hide resolved

inkuzmin added 3 commits January 2, 2020 16:46

dot notation for property accessors

4500a78

prepare nav item to be refactored into a separate component

cd36bd2

refactor nav item (wip)

c368f68

jmchilton mentioned this pull request Jan 3, 2020

[WIP] Prototype of Minimal Workflow-Centric UI #9030

Closed

inkuzmin and others added 7 commits January 8, 2020 15:31

refactor some attributes as computed properties

4e6417d

format

33b1d56

remove the original navbar

7c50c6e

Merge branch 'dev' into navbar-vue

ab35cb5

Move masthead components to masthead directory

299b519

Format client

be4f6dc

Remove unused template helper

b1ff157

inkuzmin added 2 commits January 17, 2020 15:36

fix multilevel links

e19a1cf

show navbar at the libraries page

fae9c28

guerler reviewed Feb 4, 2020

View reviewed changes

client/galaxy/scripts/layout/masthead.js Outdated Show resolved Hide resolved

guerler reviewed Feb 4, 2020

View reviewed changes

client/galaxy/scripts/layout/masthead.js Outdated Show resolved Hide resolved

Merge branch 'dev' into navbar-vue

8dec1f8

jmchilton added 3 commits May 12, 2020 13:52

More masthead unit tests.

218c01e

Implement hidden tabs also to match unit tests in qunit.

Masthead - add unit test for active tab.

0690b3e

More progress on masthead tests.

99fa717

jmchilton added 6 commits May 13, 2020 12:54

Remove now unused menu tab code in layout/menu.js.

54fe0e8

Fix Selenium tests for masthead change.

48e7838

Another selenium fix.

5cc07cf

Another Selenium fix for masthead changes.

815d8b5

More selenium test fixes for new masthead.

387fded

Problem is the interactive tooltips that are off by default in bootstrap but not bootstrap-vue. interactive tooltips are better for accessibility though so best to just work around them for testing?

Remove masthead qunit tests (most ported to VueJS tests)

3964d1a

jmchilton force-pushed the navbar-vue branch from a87f264 to 3964d1a Compare May 14, 2020 23:53

dannon approved these changes May 19, 2020

View reviewed changes

dannon merged commit 29fdb27 into galaxyproject:dev May 19, 2020

dannon added area/UI-UX kind/refactoring cleanup or refactoring of existing code, no functional changes and removed status/WIP triage labels May 19, 2020

dannon added this to the 20.09 milestone May 19, 2020

OlegZharkov mentioned this pull request May 19, 2020

Hide masthead dropdown on iframe click #9789

Merged

This was referenced May 23, 2020

Fix masthead functionality for webhooks. #9810

Merged

More reactive, tested Masthead. #9822

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] Porting Masthead to Vue.js #9071

[WIP] Porting Masthead to Vue.js #9071

inkuzmin commented Dec 6, 2019 •

edited

Loading

guerler commented Jan 10, 2020

inkuzmin commented Jan 15, 2020

guerler commented May 12, 2020 •

edited

Loading

jmchilton commented May 13, 2020

dannon May 19, 2020

dannon May 19, 2020

OlegZharkov commented May 19, 2020 •

edited

Loading

dannon commented May 19, 2020 •

edited

Loading

OlegZharkov commented May 19, 2020 •

edited

Loading

OlegZharkov commented May 19, 2020 •

edited

Loading

dannon commented May 19, 2020 •

edited

Loading

OlegZharkov commented May 19, 2020

dannon commented May 19, 2020

jmchilton commented May 19, 2020 •

edited

Loading

[WIP] Porting Masthead to Vue.js #9071

[WIP] Porting Masthead to Vue.js #9071

Conversation

inkuzmin commented Dec 6, 2019 • edited Loading

guerler commented Jan 10, 2020

inkuzmin commented Jan 15, 2020

guerler commented May 12, 2020 • edited Loading

jmchilton commented May 13, 2020

dannon May 19, 2020

Choose a reason for hiding this comment

dannon May 19, 2020

Choose a reason for hiding this comment

OlegZharkov commented May 19, 2020 • edited Loading

dannon commented May 19, 2020 • edited Loading

OlegZharkov commented May 19, 2020 • edited Loading

OlegZharkov commented May 19, 2020 • edited Loading

dannon commented May 19, 2020 • edited Loading

OlegZharkov commented May 19, 2020

dannon commented May 19, 2020

jmchilton commented May 19, 2020 • edited Loading

inkuzmin commented Dec 6, 2019 •

edited

Loading

guerler commented May 12, 2020 •

edited

Loading

OlegZharkov commented May 19, 2020 •

edited

Loading

dannon commented May 19, 2020 •

edited

Loading

OlegZharkov commented May 19, 2020 •

edited

Loading

OlegZharkov commented May 19, 2020 •

edited

Loading

dannon commented May 19, 2020 •

edited

Loading

jmchilton commented May 19, 2020 •

edited

Loading