feat: Add new Column Management Modal component

[leSamo]

Column Management Modal

Associated ticket: RHINENG-3003

What

Implement a modal that a user can use to configure the visibility of individual table columns. The modal supports columns that are hidden by default and also those that should be unhideable.

Screencastfrom2024-04-1216-04-18-ezgif.com-video-to-gif-converter.webm

Why

Since there is a request (see the associated ticket above) to implement column management in tables in all apps across Insights it would make sense to abstract a component that could be reused. Currently, the only implementation of column management is in Insights Vulnerability (hidden inside kebab menu in table toolbar). This PR is based on the Vulnerability's implementation inspired by the PF column management demo.

Example usage in practice with Redux

// Hooks file
export const useColumnManagement = (columns, onApply) => {
    const [isModalOpen, setModalOpen] = useState(false);

    return [(
        <ColumnManagementModal
            appliedColumns={columns}
            applyColumns={newColumns => onApply(newColumns)}
            isModalOpen={isModalOpen}
            setModalOpen={setModalOpen}
        />), setModalOpen];
};

// Table file
const columns = useSelector(({ TableStore }) => TableStore.columns;
const [ColumnManagementModal, setColumnManagementModalOpen] = 
    useColumnManagement(columns, newColumns => dispatch(changeTableAction(newColumns)));

return (
    ...
    <Button onClick={() => setColumnManagementModalOpen(true)}>Manage columns</Button>
    ...
    { ColumnManagementModal }
    ...
)

[patternfly-build]

Preview: https://react-component-groups-pr-component-groups-129.surge.sh

A11y report: https://react-component-groups-pr-component-groups-129-a11y.surge.sh

[fhlavac]

@leSamo thank you for your contribution. It looks really good! I've added some comments. Some of them may be worth discussion. Please let me know what do you think or if you need any help 🙂

[andrew-ronaldson]

The only thing I am noticing is the modal buttons. There was a decision on PF to make the Cancel button be a plain text button rather than the secondary button styling. I found that our Managed columns react demo was not updated so I created an issue to make that change on our PatternFly site.

Screenshot is a v6 example but the Cancel button is shown accurately.

[leSamo]

Thank you @fhlavac for the comprehensive review, I have (hopefully) addressed all of your and @ andrew-ronaldson's comments.

[fhlavac]

@andrew-ronaldson can you please take a look? So this one can be merged

[andrew-ronaldson]

Looks good! I think the only comment I have leans more into the design guidelines. The example given includes a primary button as the trigger for this modal. That's fine on its own but if the table has a toolbar with other actions we should only have one primary button on the page. In OCP we had these buttons to trigger the manage column modal.

If I want to use this code in my product, can I easily change that primary button to a secondary or icon button? If that's the case I think we just need a bit of text pointing to design guidelines for buttons.

[fhlavac]

@andrew-ronaldson The primary button is just part of the example, not the component itself, so the user can use any trigger he wants. There is probably no need for this trigger to be part of the component. But perhaps we could update our examples to show the proposed trigger compliant with the guidelines? @leSamo what do you think?

[leSamo]

@andrew-ronaldson I changed the example button variant to secondary and added an icon to the example. The button is not part of the component, since there are various ways to implement it, I think the majority of the time the button will be inside of a kebab menu. Is this okay?

[andrew-ronaldson]

LGTM, thanks!

[github-actions]

🎉 This PR is included in version 5.2.0-prerelease.3 🎉

The release is available on:

• GitHub release
• npm package (@prerelease dist-tag)

Your semantic-release bot 📦🚀