update preview panel to align with latest ux

[christianvogt]

https://issues.redhat.com/browse/RHOAIENG-11539

Description

Updated the preview header to use a white background and made it sticky to the top so that the scrollable area is the drawer body.

No connection type name or description:

Has connection type name, description and category:

Popovers for field descriptions:

Updated dropdown review to include values:

Preview hidden default read only values. Use popover to see real value.

cc @simrandhaliw

Additional changes:

• update the config map types to include category
• updated serialization utils to handle category
• added reusable CategoryLabel component
• adjusted field table column widths
• used React.memo for performance improvements

How Has This Been Tested?

Existing tests. Manually. For the most part this is just look and feel changes.

• Enable the connection types feature flag
• Go to Settings -> Connection types
• Create a connection type
• Open the preview panel
• Create various fields with different values

Test Impact

N/A

Request review criteria:

Self checklist (all need to be checked):

• The developer has manually tested the changes and verified that the changes work
• Testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
• The developer has added tests or explained why testing cannot be added (unit or cypress tests for related changes)

If you have UI changes:

• Included any necessary screenshots or gifs if it was a UI change.
• Included tags to the UX team if it was a UI/UX change.

After the PR is posted & before it merges:

• The developer has tested their solution on a cluster by using the image produced by the PR to main

[christianvogt]

Rebased and fixed up unit tests 🤞

[christianvogt]

/retest

[christianvogt]

/retest

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

Approval requirements bypassed by manually added approval.

This pull-request has been approved by: jeff-phillips-18

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:

• frontend/OWNERS

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

[christianvogt]

Going to need #3119 fixed it seems to get around this test failure.

[christianvogt]

/retest

[christianvogt]

rebased

[jeff-phillips-18]

/lgtm