Fixes Image selection dropdown scroll issue

[manaswinidas]

Closes: https://issues.redhat.com/browse/RHOAIENG-3412

Description

Fixes the image selection dropdown scroll issue. Upgraded SimpleDropdownSelect component to PF5.

Screen.Recording.2024-04-10.at.7.23.30.PM.mov

How Has This Been Tested?

Try creating a workbench after creating many custom images using the Notebook images section in the Settings section in the Dashboard. You should see a scroll bar while trying to select images in the Image selection, which doesn't break the layout.

Test Impact

Fixed failing tests due to the PF5 migration. Added new tests for scrollable dropdown selection

Request review criteria:

Self checklist (all need to be checked):

• The developer has manually tested the changes and verified that the changes work
• Commits have been squashed into descriptive, self-contained units of work (e.g. 'WIP' and 'Implements feedback' style messages have been removed)
• Testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
• The developer has added tests or explained why testing cannot be added (unit or cypress tests for related changes)

If you have UI changes:

• Included any necessary screenshots or gifs if it was a UI change.
• Included tags to the UX team if it was a UI/UX change (find relevant UX in the SMEs section).

After the PR is posted & before it merges:

• The developer has tested their solution on a cluster by using the image produced by the PR to main

[lucferbux]

Ok a couple of things here:

Have you tested wether this fix the issue? I would think it's still happening if we still have the css.

We should have coverage with mockup data that might be recreating the issue, we can talk about that async if you want.

Is this refactor gonna help other instances of this? Maybe we should just fix the issue of the height and do the refactor in another issue OR just do the refactor in all the instances, but it's not a great idea having both components.

[dpanshug]

/lgtm

[manaswinidas]

@lucferbux Fixed all test failures arising due to the migration. Added a new test to test scrollable dropdown selection as requested. Even manually tested the views on all the pages, seems to work fine. The CSS file you mentioned seems to fix some width issues instead of height and it's required coz the extra padding persists if we remove that CSS. This is ready for review.

[manaswinidas]

/lgtm Readding the label coz the last force-push only included a Cypress function name change from findDropdownItemById to findByDropdownId

[lucferbux]

/lgtm

Had to check the part of testId prop, but I think that's the only solution we can go for now, since that's how patternfly recommends using the testing id.

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: dpanshug, lucferbux

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [lucferbux]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment