feat(explore-datasource): add new datasource tab to explore view (#12008)

* update to datsource tab

* second update

* style updates

* update style and fix metrics bug

* updates to datsource panel

* backgrounds and borders

* more updates

* shuffling some paddings around

* more updates

* moving some more paddings around!

* Fixing sidebar width

* using Global to adjust body layout

* update test and fix bug

* removing hotkeys

* layout fixes for short content, simplifying some class names

* more styles

* add tooltip to collapse and div clickable

* more updates

* more updates for styles and add list component

* update from comments

* vising cosmetic issue with line-wrapping drop down caret on controls sections

* controls area scrolling properly again.

* change lists to old list and updates from comments

* border radius from theme

* add length field and updates from comments

* more changes from comments

* integrate health with new control

* change callapse back from stylsheet more udpates

* substitution string

* more substitution strings

* fix tests

* datasource alignment

* taking margin off the search input

* update input to flex

* fix lint

* adjusting column/metric label stylng

* fixing scrollable area layout, one more color variable

* simplifying some styles

* nixing a bad left margin

* Using gridunit for padding

* using gridUnit for padding

* define types for datsource panel

* fixing a padding issue

Co-authored-by: Evan Rusackas <evan@preset.io>

superset-frontend/spec/javascripts/explore/components/ControlPanelSection_spec.jsx

@@ -53,7 +53,11 @@ describe('ControlPanelSection', () => {
     });
 
     it('renders a label if present', () => {
-      expect(wrapper.find(Panel.Title).dive().text()).toContain('my label');
+      expect(
+        wrapper
+          .find('[data-test="clickable-control-panel-section-title"]')
+          .text(),
+      ).toContain('my label');
     });
 
     it('renders a InfoTooltipWithTrigger if label and tooltip is present', () => {