🪟 🎨 Show Source-defined cursor and primary key fields on new Stream Details panel

[dizel852]

What

Resolves #20227

Based on #20335 (need to be merged first)

How

Show Source-defined Cursor and PK fields on the new Stream Details panel, since we can't change them - they are with disabled state and tooltip.

Notes: tooltip wasn't in the requirements, I've added it since it can be helpful for a user to explain why selected fields can't be changed by providing a learn more link.

[krishnaglick]

Can we change the mouse on disabled cursor fields not-allowed?

[dizel852]

Can we change the mouse on disabled cursor fields not-allowed?

Sure, will fix that

[krishnaglick]

LGTM

[teallarson]

I like the Tooltip! I wonder if it would be helpful to show for all elements in the column (ie: the disabled and off ones too, so a user knows why they can't interact with them)

I also cannot remember where we ended up on with whether to always show these two columns, or only if the sync mode requires a cursor and/or primary key? I see they are always present.

That said, I don't think either of those pieces are blocking this and code lgtm

[dizel852]

@tealjulia Thanks for the review!

I like the Tooltip! I wonder if it would be helpful to show for all elements in the column (ie: the disabled and off ones too, so a user knows why they can't interact with them)

I implemented that at first but wasn't sure if that was right, since we put a lot of tooltips in DOM. And most of them won't be shown. Let's confirm that with @edmundito @Upmitt @andyjih

I also cannot remember where we ended up on with whether to always show these two columns, or only if the sync mode requires a cursor and/or primary key? I see they are always present.

That was discussed on call with @Upmitt and @edmundito. As far as I remember, we agreed to show them always(even if sync mode doesn't support them). But let's confirm that with @edmundito @Upmitt @andyjih