🪟 🎨 New stream details panel

[dizel852]

What

Resolves #18242

How

Adds new Stream Details Panel

Design:
https://www.figma.com/file/liLQhcbpVHiEDW18kiXQe3/01_03_CONNECTIONS?node-id=2376%3A52243
Proto:
https://www.figma.com/proto/liLQhcbpVHiEDW18kiXQe3/01_03_CONNECTIONS?page-id=972%3A36208&node-id=972%3A36212&viewport=446%2C338%2C0.09&scaling=min-zoom&starting-point-node-id=972%3A36212

Reading order

Since our current implementation of <Table/>(link) is pretty hard to reuse(styled-components) and extend in new components, we've made a decision(on daily sync) to create a new one. This also finally gives us the ability to fix typings and existing errors in the future without breaking existing tables.

• next/StreamFieldsTable/StreamFieldsTableHeader.tsx - actually, we don't need it anymore, since the "streams flow header" become a part of the actual header(thanks to column grouping in react-table link). I've not removed it since I saw it also uses in other PR .
• /next/NextTable/NextTable.module.scss - I've tried to extract the "base" styles that we use in the <Table /> component. Props like light, highlighted, customPadding, customWidth were not migrated to the new component, since they mostly were used to style the table, and now we can do it in another way
• Typings still need to be improved @timroes

[teallarson]

Looks awesome! Left a few comments.

One important piece that isn't supported here is scrolling in a long fields list (try PokeAPI).

[dizel852]

Fixes and updates:
Had a sync with @edmundito and @Upmitt. Discussed what needs to be addressed:

• fix arrow icon color: change color to grey-200
• replace faArrowRight icon with the icon Nico has provided in the design
• add space around the Panel container
• make the first column and source icon aligned with the toggle button
• update folder structure
• fix panel header issues: no_namespace label is not present when there is no namespace; fix sync mode label

Regarding the empty Cursor and PK columns:

• Leave them empty as is (@edmundito @Upmitt please confirm)

Also, regarding case when we have cursor defined(and can't change it):
Fill in the Cursor column with <RadioButton />s, set the "disable" state to them all, and make the only one selected(the defined cursor name)

Since we do not have a style for <RadioButton /> with a disabled state atm, agreed to make it in another PR.
Created an issue to keep it tracked: #20089

[dizel852]

@edmundito regarding explicitly importing React package:
https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports

Actually, we don't need to do it anymore from React v17.
IMO I personally prefer to import everything explicitly. 🙂

[krishnaglick]

Did a light pass over the code and tried it out locally, things looking good to me.
I would definitely defer to Edmundo for final approval.

All comments are fixed. Got approvals from other reviewers.