[Bug]: Imported Custom Notebook image is not listed in the Image selection dropdown

[rossbrigoli]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

After successfully importing a notebook image on the BYON page, the notebook does not appear in the Image Selection dropdown box of the Create workbench page. However, when launching JupyterHub using the Launch application of the Jupyter tile under Application->Enabled, the imported image appears as a new radio button.

The image stream is created successfully after import. The backend ImageStream API also returns all the ImageStreams, including the newly imported ones.

After a quick investigation, I learned that the FrontEnd dashboard app does not include ImageStreams if it does not have the following annotation:

opendatahub.io/notebook-image-order: <any-number>

If I manually add this annotation to the ImageStream resource, it then appears in dropdown list.

When importing Notebook images, this annotation is not added to the ImageStream object.

Expected Behavior

After importing a Notebook image, it should be available in the Image selection dropdown list of the Create Workbench page.

Steps To Reproduce

1. Under Settings>Notebook Images, import any notebook images
2. Go to any Data Science projects and click Create Workbench
3. Expand the Image selection dropdown list
4. You will not find the Notebook images that you just imported

Workaround (if any)

Add the following annotation to the ImageStream object:

opendatahub.io/notebook-image-order: 1

What browsers are you seeing the problem on?

Chrome

Open Data Hub Version

Red Hat OpenShift Data Science 1.27.0

Anything else

[rossbrigoli]

I just realized that the new image is actually in the list. But it's not visible until you scroll down with the mouse wheel while your mouse pointer is on the dropdown list.

It adds the new notebook image to the dropdown list but the list height does not grow taller, and there is no scroll bar displayed. So perhaps the fix is to either show a scrollbar of increase the height of the list.

[shalberd]

correct, this has nothing to do with imagestream annotation opendatahub.io/notebook-image-order

@lucferbux @kywalker-rh A scrollbar added to the images dropdown list in frontend code UI of odh dashboard workbench sounds like a good idea to avoid these kinds of confusions.

[andrewballantyne]

Interesting... this sounds like a Patternfly (our component library) Bug. Our Image Stream component should look like it can scroll especially if we are moving towards most custom image approach.

Upon investigating the code... The component supports a maxHeight but doesn't seem to showcase that it can scroll if you use it. We can definitely log this issue with Patternfly and try to fix it in the Dashboard while we wait for a more proper fix.

Sorry for the confusion in the UI -- definitely a visual bug.

[shalberd]

Maybe it's even be a good idea to have two lists, one for standard Out of The Box Imagestreams, one for byon Imagestreams, but only if there are some present.

Or a dropdown with groups of items (standard, byon) https://www.patternfly.org/v4/components/dropdown/#with-groups-of-items

Our Image Stream component should look like it can scroll especially if we are moving towards most custom image approach

Yes, the issue with the missing scrollbar remains.

There was some talk about " setting a max height on the dropdown that fits within the modal.", so having the dropdown inside a modal and so on.

Combination of modal with dropdown could allow for a scrollbar, indirectly.

[andrewballantyne]

cc @kywalker-rh -- I believe an intern did the original mocks, but Kyle was part of the effort for the design behind the single dropdown.

I think when we implement the desired changes behind the UX work for custom notebooks to include OOTB images, the admin will be able to sort the order of the images and disable OOTB ones from showing up. This should help significantly with the effort behind "finding the one I want" -- be it custom or OOTB. The work will be behind #1266

[DaoDaoNoCode]

The scrollbar on Mac OS is actually a user setting, see the essay here https://support.vagaro.com/hc/en-us/articles/204347160-Disable-Disappearing-Scroll-Bars-Mac.
When I turn it on, I can see it...

[DaoDaoNoCode]

@kywalker-rh We might need some UX support here. When we are in the dropdown and the height of the dropdown menu is limited (because the list could be very long), is there a good way to indicate that we still have some content if you scroll down? (the scrollbar could be hidden by the system settings)

[kywalker-rh]

@DaoDaoNoCode I think ultimately we need to see if the PatternFly team has dealt with this in the past, but first, are we restricting the dropdown to a specific size? I.e. Do we let it get larger if there are more images?

And a follow-on to that, if we are restricting it to a specific size, is that based on PF guidance, or another reason?

[DaoDaoNoCode]

@kywalker-rh There could be a lot of images in the list. If we let the dropdown grow along with the image number, it could break the page because there could be an extremely long dropdown menu.

[lucferbux]

@kywalker-rh do we know if patternfly has some indicator to deal with scrolling behaviour? macOS hides the scrollbar by default to mimic what happens in touch based inputs (iOSification of the desktop), it's a pain in the ass sometimes but we shouldn't override that behaviour.

[rossbrigoli]

How about setting the height of the dropdown box to be a little taller or shorter so it always shows a little bit of the next item? Say if you have 4 items, set the height to 3.5 items tall. This way the user is aware that there are more items below.

[andrewballantyne]

@rossbrigoli the content is somewhat dynamic in height -- you can have two lines or one.

[DaoDaoNoCode]

Created an issue in PatternFly patternfly/patternfly-design#1276 to track this issue down.

[DaoDaoNoCode]

patternfly/patternfly-design#1276 This comment in the PF issue is very helpful, we could either create some custom toolbar styles by ourselves referring to the code sandbox demo in the comment or wait for the PF solution (If they adopt the feature request)

[adnankhan666]

https://issues.redhat.com/browse/RHOAIENG-581