fix: restore Connect button outline in MUI theme

[thisis-Shitanshu]

What

Fixes the Workspaces action controls rendering differently when Notebooks v2 is embedded in the Kubeflow Community Dashboard.

Fixes #1345

Root cause

The Connect and row-action controls use PatternFly MenuToggle variants.

When comparing the same UI at the same viewport in standalone Notebooks v2 and Community Dashboard, the variant-specific PatternFly tokens were already correct in both environments.

The difference was in which CSS declarations won the cascade:

• standalone: the PatternFly variant mappings win
• Community Dashboard: generic mod-arch-kubeflow / MUI compatibility mappings win

For the secondary Connect toggle this changed the final border, background, and horizontal padding.

For the plain row-actions toggle this changed the background and horizontal padding.

Fix

• Add a common class to both Connect variants.
• Restore the existing PatternFly secondary semantic mappings for the Connect control.
• Scope the workspace row-actions toggle through its action cell and restore its existing PatternFly plain mappings.
• Reuse PatternFly theme variables rather than hard-coding colors, spacing, or dimensions.

The overrides remain scoped to the affected Workspaces controls.

Verification

Compared the same Workspace at a 1111px viewport in:

• standalone Notebooks v2 / Tilt
• Community Distribution baseline
• Community Distribution with this PR

Before, Community resolved:

• Connect border: transparent
• Connect padding: 10px
• Connect background: #fff
• row-actions background: #fff
• row-actions padding: 10px

After the fix, the Community controls match the standalone variant semantics:

• Connect width: 134.953125px
• Connect height: 37px
• Connect padding: 24px / 24px
• Connect background: transparent
• Connect border: #1976d2
• row-actions: 37px × 37px
• row-actions padding: 8px / 8px
• row-actions background: transparent

Hover/focus behavior was also verified.

Checks:

• npm run prettier:check
• npm run test:lint
• npm run test:type-check
• npm run test:unit — 452 tests passed
• npm run build

[google-oss-prow]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign paulovmr for approval. For more information see the Kubernetes Code Review Process.

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

Details

Needs approval from an approver in each of these files:

• workspaces/frontend/OWNERS

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

[christian-heusel]

What you shared in your screenshot still looks different from the "expected" one in #1345, could you recheck the differences? From a broad look the spacing / button layout still seems to be different 😅

[christian-heusel]

/ok-to-test

[thisis-Shitanshu]

Hi @christian-heusel!

Thanks for catching that. I rechecked the controls against standalone at the same viewport and found the spacing/layout difference came from the same CSS cascade issue as the missing outline.

The PatternFly variant tokens were already correct, but in the Community Dashboard the generic MUI compatibility mappings were winning instead. This affected the Connect border, background and horizontal padding, and the adjacent plain row-action toggle's background/padding as well.

I've updated the fix to restore the existing PatternFly variant mappings only for these Workspaces controls, without hard-coding colors or dimensions. I also verified the updated Community build against standalone, including hover/focus states, and all frontend checks pass (452 tests).

Would appreciate another look when you have time 😊