Fixes #37228 - Replace Ansible/Roles page with React component

[Thorben-D]

Feature #37228

The new component acts as a drop-in replacement for the previously used erb-table.

This is required by #707

[sbernhard]

What is blocking us from using this change? Possibly at the start of a new release cycle?

[nofaralfasi]

What is blocking us from using this change? Possibly at the start of a new release cycle?

I'll review it ASAP.

[nofaralfasi]

The functionality works well. However, the page is loading much slower than before. I’m wondering if it’s an issue on my side or if the new code is causing the app to load slower.

[Thorben-D]

@nofaralfasi
Unfortunately, this is a side-effect of React rendering the component on the client-side. I am unsure when exactly react-rails renders components, but it feels pretty late (c.f. /new/hosts). Rendering server-side would help in this regard, but that does not work when window or document are used.

[sbernhard]

Of course, the site load would be pretty fast but rendering the page takes longer as its done in the browser itself.
Should it have a spinner as this was done in Katello/Content-views for example?

[ekohl]

In Foreman we have the TableIndexPage component which is intended for these index pages. Have you considered using that and if so, why was it insufficient?

[MariaAga]

+1 to Ewouds question, the js loading is slower between ruby and js, but faster between full React pages.
Can this be a full react page? it will need to be added in webpack/routes/routes.js, config/routes.rb

[MariaAga]

webpacked_plugins_css_for is deprecated, plugin css is already loaded.'

[Thorben-D]

I think it would be best if #715 could be merged, so I can rebase this branch.

[Thorben-D]

Sorry for the delay, I was occupied otherwise.
Thank you for your feedback. I would actually prefer a full React page as-well! I chose this approach to keep the changes as low-profile as possible, but I am happy to move it to a full page.
Regarding TableIndexPage, I'm afraid, I couldn't get it to work... Do you have an example where this was used outside of foreman? (The page not the hooks!)

[MariaAga]

Webhooks use it here: https://github.com/theforeman/foreman_webhooks/blob/master/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/WebhooksIndexPage.js

[Thorben-D]

Thanks, that's what I was looking for.
I checked out the component and the biggest issue I see with it is the way the action buttons are handled.
The old page allows the selection of a smart proxy to import roles from through a dropdown button.
While ActionButtons does provide a dropdown, it is toggled by a "kebab" toggle and not a component with text on it.

[Thorben-D]

^^Nevermind, I just noticed the customToolbarItems prop...