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', () => {

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

@@ -97,8 +97,8 @@ describe('DatasourceControl', () => {
 
   it('should render health check message', () => {
     const wrapper = setup();
-    const alert = wrapper.find(Icon).first();
-    expect(alert.prop('name')).toBe('alert-solid');
+    const alert = wrapper.find(Icon);
+    expect(alert.at(1).prop('name')).toBe('alert-solid');
     const tooltip = wrapper.find(Tooltip).at(1);
     expect(tooltip.prop('title')).toBe(
       defaultProps.datasource.health_check_message,

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

@@ -0,0 +1,69 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { supersetTheme, ThemeProvider } from '@superset-ui/core';
+import DatasourcePanel from 'src/explore/components/DatasourcePanel';
+
+describe('datasourcepanel', () => {
+  const datasource = {
+    name: 'birth_names',
+    type: 'table',
+    uid: '1__table',
+    id: 1,
+    columns: [],
+    metrics: [],
+    database: {
+      backend: 'mysql',
+      name: 'main',
+    },
+  };
+  const props = {
+    datasource,
+    controls: {
+      datasource: {
+        validationErrors: null,
+        mapStateToProps: () => null,
+        type: 'DatasourceControl',
+        label: 'hello',
+        datasource,
+      },
+    },
+    actions: null,
+  };
+  it('should render', () => {
+    const { container } = render(
+      <ThemeProvider theme={supersetTheme}>
+        <DatasourcePanel {...props} />
+      </ThemeProvider>,
+    );
+    expect(container).toBeVisible();
+  });
+
+  it('should display items in controls', () => {
+    render(
+      <ThemeProvider theme={supersetTheme}>
+        <DatasourcePanel {...props} />
+      </ThemeProvider>,
+    );
+    expect(screen.getByText('birth_names')).toBeTruthy();
+    expect(screen.getByText('Columns')).toBeTruthy();
+    expect(screen.getByText('Metrics')).toBeTruthy();
+  });
+});