Remove cylc hub button in single user mode

[datamel]

The cylc hub button on the dashboard used to be available in single user mode (cylc gui). If clicked this resulted in a 404 page.
This change adds a condition that the gui mode should be multi-user if the button is to display.

I am not sure the preference on the links in the dashboard if the cylc hub button is not visible.

I have stuck with keeping the help links to the right, and the functional links to the left; as currently is the case. I think this looks a little lopsided in single user mode. I’m happy to move the Cylc UI Quickstart to the left list and move the cylc hub to the right for aesthetics.

In single user mode the dashboard now looks as follows:

In multi-user mode:

These changes close #737
Sibling: cylc/cylc-uiserver#331

• I have read CONTRIBUTING.md and added my name as a Code Contributor.
• Contains logically grouped changes (else tidy your branch by rebase).
• Does not contain off-topic changes (use other PRs for other changes).
• Appropriate tests are included (unit and/or functional).
• No change log entry required (why? invisible to users).
• No documentation update required.

[hjoliver]

Looks good.

However, how about instead of removing it entirely, display a greyed-out hub icon and You are not running Cylc UI via Cylc Hub or similar. That would hint at additional multi-user capability that's available, and also explain why the Hub button isn't there, in case the lack of it (in comparison to screenshots and documentation, say) is confusing.

[oliver-sanders]

However, how about instead of removing it entirely, display a greyed-out hub icon

Sounds like a good idea, @datamel there is a prop builtin to the list component we are using which can do this

https://vuetifyjs.com/en/api/v-list-item/#props-disabled

I think it needs this diff:

- v-if=multiUserMode
+ :disabled=multiUserMode

[oliver-sanders]

Unit tests are failing due to a rogue .only, a rebase may resolve this, otherwise need to hunt it down:

 error: it.only not permitted (no-only-tests/no-only-tests) at tests/e2e/specs/dashboard.js:47:6:
  45 |       .should('equal', [...WorkflowStateOrder.entries()][0][0])
  46 |   })
> 47 |   it.only('Should disable the cylc hub button with a tooltip in single user mode', () => {
     |      ^
  48 |     cy
  49 |       .visit('/#/')
  50 |       .get('.container > :nth-child(3) > :nth-child(1)')

Functional tests failing?

[datamel]

I have made it so a tool tip comes up if you hover over the disabled button for cylc hub.

I am having difficulty testing this, cypress doesn't appear to have a hover function, though is a currently open issue. Instead it is recommend that we use .trigger instead but this does not function for disabled items.

In addition, vue.js renders this cylc-hub-button as an anchor tag

; which does not pick up on the be.disabled check of cypress (again recognised in issue on cypress). The recommended work around is to check cy.get(...).should('have.attr', 'disabled') which I can not get to work.
It seems that having a tooltip on a disabled v-list-item is tricky to test. If anyone has ideas then I'm happy to give any suggestions a go.

[oliver-sanders]

?

[datamel]

Sorry! Changing the page as my reloads were caching even with ctrl F5.

[oliver-sanders]

I am having difficulty testing this

Perhaps check/scan for the v-list-item--disabled class.

[MetRonnie]

The indentation is off (functionally doesn't matter but proper indentation makes it easier to see the HTML hierarchy)

[MetRonnie]

Indentation better now, but best to avoid putting tags on the same line like this:

<template v-slot:activator="{ on }"> <div v-on="on" >

[datamel]

@MetRonnie I'm not great at these things so have put it through an auto-prettify.

If you are happy then I think we can merge this.

[MetRonnie]

I have no idea why it would want to leave those on the same line. Anyway, it doesn't matter too much