[ENH] - Add user-friendly button to get back to JHub "home"

[kcpevey]

Feature description

Its non-intuitive to go: File -> Hub Control Panel to get back to the landing page which has Start/Stop Server and the header for Envrionment Management, User management, Grafana, etc.

As we are adding jhub apps as an optional landing page, we need to a way to make it more intuitive for folks to get back to this "home" page.

Is there a way to add items to the File menus in JLab? So we could add more intuitive names (e.g. Home takes you back to the landing page).

Or would there be a way to add the current JHub header to the JLab interface?

Value and/or benefit

More intuitive interface for end users

Anything else?

No response

[dharhas]

Or we have a Home button/icon in the menu bar.

[dharhas]

cc: @krassowski since he might know more about JupyterLab customizability.

[krassowski]

Is there a way to add items to the File menus in JLab?

Yes, this can be accomplished by dropping a JSON configuration file into a stardardised location (if you want users to be able to modify the menus), or by adding it from an extension (if you believe this is an important item and want to prevent user from accidentally removing it when fiddling with the settings). Happy to help here.

Or would there be a way to add the current JHub header to the JLab interface?

We could create a tiny extension that would do that, possibly styling it more in-line with other Jlab components; there is for example some space in the top bar (next to menu) where some control functions could be easily exposed. A separate header is also an option but it has UX and maintenance tread-offs.

[dharhas]

So our bigger issue is that JHub and JLab have two independent menu structures.

Right now I think a link/icon back to 'Home' and another one for 'Environment Management' would be the simplest to do without solving the larger issue.

This is an important functionality and does not need to be user editable.

[dharhas]

@marcelovilla

[marcelovilla]

Yes, this can be accomplished by dropping a JSON configuration file into a stardardised location (if you want users to be able to modify the menus), or by adding it from an extension (if you believe this is an important item and want to prevent user from accidentally removing it when fiddling with the settings). Happy to help here.

@krassowski: is the first option referring to https://jupyterlab.readthedocs.io/en/stable/extension/extension_points.html#main-menu?

[krassowski]

In principle yes, this is documenting the JSON format I was referring, but rather than defining a new menu you possibly could just change the label of the existing one; or disable the old entry one and add a new one. In that case you could use overrides.json file. For exact format reference I would just open JSON Settings Editor (not the UI form-based settings) and copy-paste from there.

[pavithraes]

Notes from the Nebari sync:

• Add a menu item called "Home" before "File" that goes to Jupyterhub home
• Add another "Environment Management" item which links to <deployment-url>/conda-store/ (note that conda-store menu item will be removed once the jupyterlab-conda-store extension)

[marcelovilla]

I was able to create a new menu item and add an item to go to the control panel using the following JSON:

{
    "menus": [
        {
            "id": "jp-mainmenu-home",
            "disabled": false,
            "label": "Home",
            "rank": 0,
            "items": [
                {
                    "command": "hub:control-panel",
                    "rank": 2
                }
            ]
        }
    ]
}

However, I have two concerns:

1. It does not seem like we can actually add a command to the menu item itself (Home in the screenshot) but rather only to its subitems (Hub Control Panel). This means that clicking on the Home item won't take the user to the Hub Control Panel; it will open up the menu and let the user click on the subitem to go the Hub Control Panel.
2. If we wanted to add another Menu Item to go to an arbitrary URL (e.g., conda-store) it does not seem like we can use the overrides.json file as it is expecting a preexisting command. I'm referring to [BUG] - Disable conda-store jupyterlab extension #2181

[krassowski]

It does not seem like we can actually add a command to the menu item itself

That would not be a top-level menu itm but a button, right? The menu by definition should open a list of items and having a non-standard addition which behaves differently would go against the good UX practice and accessibility (https://www.w3.org/WAI/tutorials/menus/application-menus/); there is a lot of behaviour baked into the menu, for example when you open one and move mouse to the next one it activates; it would not be clear what should happen then if top-level items were allowed to be standalone buttons, nor .

That said, adding a button to the top bar can be done with a very simple extension; I would however suggest to style it slightly differently from the top-level application menu items. For that matter you could even replace the Jupyter Logo in the top left corner with a home button/icon.

If we wanted to add another Menu Item to go to an arbitrary URL

Yes, I would recommend adding a simple extension implementing the command. You could re-purpose help:open for opening URLs as tabs:

{
    "menus": [
        {
            "id": "jp-mainmenu-home",
            "disabled": false,
            "label": "Home",
            "rank": 0,
            "items": [
                {
                    "command": "help:open",
                    "args": {
                        "url": "https://google.com",
                        "text": "Open Jupyter.org"
                    },
                    "rank": 2
                }
            ]
        }
    ]
}

We could separate text and title argument in core JupyterLab.

#2181

This seems to suggest that you want to change window.location.href? But you would still want to make an API call to change the default? Thus maybe a custom command is desirable. Sorry I do not have enough context yet.

[marcelovilla]

@krassowski thank you for all your help; it has been really useful. As you might have noticed, I don't have any experience customizing Jupyterlab.

What I'm trying to achieve here is to create two UI elements (initially I thought Menu Items but your button suggestion sounds compelling) for the user to go to two URLs:

1. Home: in this case is the Hub Control Panel
2. Conda Store: in this case is `<deployment_url>/conda-store

For element 1, I can already leverage the hub:control-panel command and just specify that in the overrides.json file, just like in my previous example.

For element 2, the URL should be opened in another browser tab not a Jupyterlab tab; so while your suggestion of repurposing help:open works, it is not ideal.

I was trying to implement both UI elements using the overrides.json file because we are already using it in Nebari for other specific configurations and it would be a very straightforward approach (if feasible) to create these two UI elements. However, I am now wondering if at least for element 2, the only way to achieve it is via a Jupyterlab extension.

[dharhas]

Or should we do a new menu item with

• Nebari
  • Home
  • Environment Manager

[marcelovilla]

I just found out that you can pass a newBrowserTab flag as an argument for the help:open command. Thank you @krassowski—that was a very good pointer.

@dharhas and @kcpevey what are your feelings about having two Menu Items with one subitem each that open the Hub Control Panel and conda-store? It would look something like this:

I personally believe that having two new Menu Items with just one subitem each is far from ideal and that a better alternative would be to have them as buttons. However, I think that would mean that we cannot use the overrides.json file for this and we would rather need to create two minimal extensions. I am unsure on how difficult would be to pack them with Nebari and make sure they are correctly installed (as I am assuming we won't create these extensions as exteneral dependencies like for example jupyterlab-conda-store).

[marcelovilla]

Or should we do a new menu item with

* Nebari
  
  * Home
  * Environment Manager

This is easily achievable and we could add more subitems in the future if we have the need for it. Do you think this would make it more intuitive for users?

[dharhas]

Agreed. For now we avoid a custom extension.

Let's make a menu item called "Nebari" and we put several links in there.

Ideally it should be the links we see in Hub/JHub-Apps services except Jupyter and VSCode

• Launcher (Goes back to the Hub/Launcher Page)
• Environment Management
• User Management
• Monitoring
• Argo Workflows

For some deployments this might include MLFlow and other things. jhub-apps gets this list dynamically I think. @aktech or @jbouder can you clarify where jhub-apps gets its services list from.

[dharhas]

Open question should we put the menu item before File or at the rightmost end of the menu bar.

[jbouder]

@dharhas those values are currently provided to the UI by the jhub_apps endpoint. I believe they're provided through a config on the backend.

[marcelovilla]

Open question should we put the menu item before File or at the rightmost end of the menu bar.

For me it would make more sense to have it as the last item (i.e., rightmost) of the Menu but I can be talked into putting it first.

[jbouder]

I agree. Putting it before File doesn't feel right :)

[dharhas]

@marcelovilla for this release lets hardcode the list I mentioned earlier. We will worry about a dynamic list for the next release.