Implement an interactive getting started guide for the Web Editor

[m-mohr]

Something like https://github.com/pulsardev/vue-tour

[m-mohr]

The tour related to OIDC login needs to be a bit more fine-grained. Especially, we would want to explain the Client ID field if it is shown.

@christophfriedrich is right with his comment though, so we need to find a solution later:

I can try whether I can detect whether there is OIDC auth on the current server or not, but at the moment I wouldn't know how to do this in Tour.vue :thinking: Is this info available via some this. variable?

Can you provide me with an explanation you would like to see for Client ID? I don't know too much about it myself...

See also: https://github.com/Open-EO/openeo-web-editor/pull/199#discussion_r701868036

[christophfriedrich]

The info is indirectly available by querying the DOM for whether the corresponding UI elements are there. Not the nicest way, but works.

https://github.com/Open-EO/openeo-web-editor/blob/8e254f63a3a86fb7770306fb24104c5c2cc56b5a/src/components/Tour.vue#L127

which is

if (document.querySelector('#credentials > .tabsHeader > button[title=Internal]') !== null) {

Another way of doing this:

if (Array.from(document.getElementsByTagName('button')).some(e => e.title == 'Internal')) {

[m-mohr]

Open issue reported by @christophfriedrich:

The only issue I still encountered and can't really think of a way to fix: When a user is on the e.g. "Internal" tab, starts the tour, and then switches over to "No credentials", the tour crashes because the step for the input fields (login-credentials) was already loaded, but the target has since been removed from the DOM...

[m-mohr]

esa requests a tour for the data processing / batch job area.