Apply PF Breaking Change Best Practices to MUI Theme Stylesheet

[jenny-s51]

Description

Updates theming overrides to align with PF breaking change standards.

How Has This Been Tested?

N/A, refactoring only.
To test modal refactoring updates:

1. Model Registry list view -> Actions menu on table row -> "Archive model"
2. Model Registry list view -> Actions menu next to "Register Model" button in toolbar -> Click "View Archived Models" -> Archived models list view -> Actions menu on table row -> "Restore Model"
3. Model Registry list view -> Click on model -> Versions Tab -> Actions menu on table row -> Click "Archive model version"
4. Model Registry list view -> Click on model -> Versions Tab -> Actions menu next to "Register Model" button in toolbar -> Click "View Archived Versions"-> Archived versions list view -> Actions menu on table row -> "Restore Version"

Merge criteria:

• All the commits have been signed-off (To pass the DCO check)

• The commits have meaningful messages; the author will squash them after approval or in case of manual merges will ask to merge with squash.
• Testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
• The developer has manually tested the changes and verified that the changes work.
• Code changes follow the kubeflow contribution guidelines.

If you have UI changes

• The developer has added tests or explained why testing cannot be added.
• Included any necessary screenshots or gifs if it was a UI change.
• Verify that UI/UX changes conform the UX guidelines for Kubeflow.

[alexcreasy]

Thanks for the contribution Jenny! I haven't tested this out yet, just read through the code, but it looks good.

There are just a few tiny changes related to checking in Red Hat references to the community codebase to take care of.

I'll update this if I find anything during testing :)

[alexcreasy]

Small nit, we shouldn't check Red Hat references into the community codebase, could you remove the link to the internal JIRA please? :)

[jenny-s51]

Thank you for reviewing @alexcreasy - updated the stylesheet to apply your feedback.

[lucferbux]

@jenny-s51 I was trying to spot which css is overriding the button corner radious, but running it i've spotted this issue:

I'm sorry i cannot add it in the right line 😅

The attribute is --pf-v6-c-button--BorderRadius: 50%

[jenny-s51]

Nice catch, thanks @lucferbux ! I've pushed a fix for the buttons and am still investigating as the modals will require some refactoring make sure the Alert in the modal is rendered and themed correctly. DashboardModalFooter currently uses Stack andActionsList around the buttons to render the Alert like this:

When using a form input in a modal, the PF recommendation is to render Alerts at the top of the form. Currently working on updating the modals to apply this change.

[jenny-s51]

Updated from the deprecated PF5 model to use the PF6 modal and refactored the components per PF6 standards. The action buttons now have the correct shape (cc @lucferbux ), and the alert is shown at the top of the modal form per the design guidelines: https://staging-v6.patternfly.org/components/forms/form/design-guidelines#error-validation-on-submission

[lucferbux]

/lgtm

So far breaking down some components into constants is a really great pattern, we are breaking a little bit the 1:1 match with downstream but checking the latest changes is not that big of a deal and would benefit in the future.

@ederign @alexcreasy could you guys take a look and approve?

[google-oss-prow]

@lucferbux: changing LGTM is restricted to collaborators

In response to this:

/lgtm

So far breaking down some components into constants is a really great pattern, we are breaking a little bit the 1:1 match with downstream but checking the latest changes is not that big of a deal and would benefit in the future.

@ederign @alexcreasy could you guys take a look and approve?

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[google-oss-prow]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: ederign, 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:

• clients/ui/OWNERS [ederign]

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

[ederign]

/lgtm