Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixes #37675 - Change All Hosts kebab menu to match design #10252

Merged
merged 1 commit into from
Jul 26, 2024
Merged

Fixes #37675 - Change All Hosts kebab menu to match design #10252

merged 1 commit into from
Jul 26, 2024

Conversation

jeremylenz
Copy link
Contributor

@jeremylenz jeremylenz commented Jul 23, 2024 •
edited
Loading

  • Main kebab menu
  • Single-host table row kebab

This PR updates the kebab menus in the All Hosts page to match existing designs.

The design calls for a fly-out menu like this:
image

The problem is that the Patternfly <Dropdown> component does not support this fly-out menu style. Per the Patternfly documentation, it seems the only way to accomplish this was with a <Menu> component, and switch all the DropdownItems to MenuItems.

Menu does not handle its own open/closed state, so I had to introduce a new state and handlers for this. I use it both directly here in Foreman, and also in the ForemanActionsBarContext so that Katello can close its own submenu when the user clicks on something. Menu also doesn't handle its own positioning and apparently offers no easy way to pair with its MenuToggle, so I was forced to do some manual CSS there as well.

@github-actions github-actions bot added the UI label Jul 23, 2024
@jeremylenz jeremylenz mentioned this pull request Jul 23, 2024
Merged
2 tasks
@jeremylenz jeremylenz force-pushed the 37675-all-hosts-menu-foreman branch from 22e32b9 to e045366 Compare July 25, 2024 16:59
@jeremylenz jeremylenz marked this pull request as ready for review July 25, 2024 16:59
MariaAga
MariaAga reviewed Jul 25, 2024
View reviewed changes
webpack/assets/javascripts/react_app/components/HostsIndex/ActionKebab.scss Outdated
Comment on lines 1 to 4
.pf-c-menu.pf-m-flyout {
position: absolute;
top: 3.1em;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use more specific rule, for the host index, and add a space at the end

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actually might be better to "just" use a popper to do it properly https://v4-archive.patternfly.org/v4/demos/composable-menu/

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jeremylenz what do you think of the popper?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just saw your comment. I have never in my life seen that part of the PF documentation. 🙈 I hate the idea of using a ref, but I can change it if you think that's better.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I trust a popper just a bit more than top: 3.1em; 😅

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That was easier than I thought.. updated

@jeremylenz jeremylenz force-pushed the 37675-all-hosts-menu-foreman branch from e045366 to cf38a35 Compare July 25, 2024 20:24
@jeremylenz
Copy link
Contributor Author

@MariaAga CSS updated 👍

@jeremylenz jeremylenz force-pushed the 37675-all-hosts-menu-foreman branch from cf38a35 to b593baf Compare July 25, 2024 20:48
@jeremylenz
Copy link
Contributor Author

updated to eliminate custom CSS

MariaAga
MariaAga reviewed Jul 25, 2024
View reviewed changes
.byebug_history Outdated Show resolved Hide resolved
@jeremylenz jeremylenz force-pushed the 37675-all-hosts-menu-foreman branch from b593baf to c6a6832 Compare July 25, 2024 21:00
@jeremylenz
Fixes #37675 - Change All Hosts kebab menu to match design
d3b83e8 
Refs #37675 - Add registry for table row kebab actions
use Popper for menu toggle
@jeremylenz jeremylenz force-pushed the 37675-all-hosts-menu-foreman branch from c6a6832 to d3b83e8 Compare July 25, 2024 21:12
@MariaAga
Copy link
Member

I see , in console:

Warning: validateDOMNesting(...): <li> cannot appear as a descendant of <li>.
    in li (created by MenuItemBase)
    in MenuItemBase (created by MenuItem)

@jeremylenz
Copy link
Contributor Author

Yeah, see the description - I don't know that it will be possible to have a flyout menu without that. Hopefully I missed something else in the documentation and you're about to tell me :)

@jeremylenz
Copy link
Contributor Author

Oh nevermind, I meant to mention that in the description and then I didn't

MariaAga
MariaAga reviewed Jul 26, 2024
View reviewed changes
webpack/assets/javascripts/react_app/components/HostsIndex/TableRowActions/core.js
result[pluginName] = coreTableRowActionsRegistry[pluginName][tableName];
}
});
// { katello: { getActions: [Function: getActions] } }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

leftovers

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one is on purpose, so you know what the object looks like :)

@MariaAga
Copy link
Member

The console error can be fixed in the Katello pr and not here

MariaAga
MariaAga reviewed Jul 26, 2024
View reviewed changes
Copy link
Member

@MariaAga MariaAga left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Thanks @jeremylenz, can be merged after the code comment removal

MariaAga
MariaAga approved these changes Jul 26, 2024
View reviewed changes
Copy link
Member

@MariaAga MariaAga left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you @jeremylenz!

@MariaAga MariaAga merged commit 033aeb3 into theforeman:develop Jul 26, 2024
63 of 67 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@MariaAga MariaAga MariaAga approved these changes

Assignees
No one assigned
Labels
UI
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@jeremylenz @MariaAga