feat(explore): UI changes in dataset panel on Explore page (#19394)

* feat(explore): Implement new design for dataset panel

* Fixes

* Replace drag handle in dashboard builder

* Add missing types

* Type fix

* Fix tests

* Fix non-dnd version

* Fix test

* Replace margin with height

superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelDragOption/index.tsx

@@ -18,29 +18,36 @@
  */
 import React from 'react';
 import { useDrag } from 'react-dnd';
-import { Metric, styled } from '@superset-ui/core';
+import { css, Metric, styled } from '@superset-ui/core';
+import { ColumnMeta } from '@superset-ui/chart-controls';
 import { DndItemType } from 'src/explore/components/DndItemType';
 import {
   StyledColumnOption,
   StyledMetricOption,
 } from 'src/explore/components/optionRenderers';
-import { ColumnMeta } from '@superset-ui/chart-controls';
+import Icons from 'src/components/Icons';
+
 import { DatasourcePanelDndItem } from '../types';
 
 const DatasourceItemContainer = styled.div`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: ${({ theme }) => theme.gridUnit * 6}px;
-  cursor: pointer;
-
-  > div {
+  ${({ theme }) => css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     width: 100%;
-  }
+    height: ${theme.gridUnit * 6}px;
+    padding: 0 ${theme.gridUnit}px;
 
-  :hover {
-    background-color: ${({ theme }) => theme.colors.grayscale.light2};
-  }
+    // hack to make the drag preview image corners rounded
+    transform: translate(0, 0);
+    background-color: inherit;
+    border-radius: 4px;
+
+    > div {
+      min-width: 0;
+      margin-right: ${theme.gridUnit * 2}px;
+    }
+  `}
 `;
 
 interface DatasourcePanelDragOptionProps extends DatasourcePanelDndItem {
@@ -79,6 +86,7 @@ export default function DatasourcePanelDragOption(
       ) : (
         <StyledMetricOption metric={value as MetricOption} {...optionProps} />
       )}
+      <Icons.Drag />
     </DatasourceItemContainer>
   );
 }

superset-frontend/src/explore/components/DatasourcePanel/index.tsx

@@ -17,6 +17,7 @@
  * under the License.
  */
 import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { css, styled, t } from '@superset-ui/core';
 import {
   ControlConfig,
   DatasourceMeta,
@@ -24,7 +25,6 @@ import {
 } from '@superset-ui/chart-controls';
 import { debounce } from 'lodash';
 import { matchSorter, rankings } from 'match-sorter';
-import { css, styled, t } from '@superset-ui/core';
 import Collapse from 'src/components/Collapse';
 import { Input } from 'src/components/Input';
 import { FAST_DEBOUNCE } from 'src/constants';
@@ -49,6 +49,10 @@ export interface Props {
   shouldForceUpdate?: number;
 }
 
+const enableExploreDnd = isFeatureEnabled(
+  FeatureFlag.ENABLE_EXPLORE_DRAG_AND_DROP,
+);
+
 const Button = styled.button`
   background: none;
   border: none;
@@ -63,7 +67,7 @@ const ButtonContainer = styled.div`
 
 const DatasourceContainer = styled.div`
   ${({ theme }) => css`
-    background-color: ${theme.colors.grayscale.light4};
+    background-color: ${theme.colors.grayscale.light5};
     position: relative;
     height: 100%;
     display: flex;
@@ -97,26 +101,55 @@ const DatasourceContainer = styled.div`
 `;
 
 const LabelWrapper = styled.div`
-  overflow: hidden;
-  text-overflow: ellipsis;
+  ${({ theme }) => css`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: ${theme.typography.sizes.s}px;
+    background-color: ${theme.colors.grayscale.light4};
+    margin: ${theme.gridUnit * 2}px 0;
+    border-radius: 4px;
+    padding: 0 ${theme.gridUnit}px;
 
-  & > span {
-    white-space: nowrap;
-  }
-
-  .option-label {
-    display: inline;
-  }
-
-  .metric-option {
-    & > svg {
-      min-width: ${({ theme }) => `${theme.gridUnit * 4}px`};
+    &:first-of-type {
+      margin-top: 0;
     }
-    & > .option-label {
-      overflow: hidden;
-      text-overflow: ellipsis;
+    &:last-of-type {
+      margin-bottom: 0;
     }
-  }
+
+    ${enableExploreDnd &&
+    css`
+      padding: 0;
+      cursor: pointer;
+      &:hover {
+        background-color: ${theme.colors.grayscale.light3};
+      }
+    `}
+
+    & > span {
+      white-space: nowrap;
+    }
+
+    .option-label {
+      display: inline;
+    }
+
+    .metric-option {
+      & > svg {
+        min-width: ${theme.gridUnit * 4}px;
+      }
+      & > .option-label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  `}
+`;
+
+const SectionHeader = styled.span`
+  ${({ theme }) => css`
+    font-size: ${theme.typography.sizes.s}px;
+  `}
 `;
 
 const LabelContainer = (props: {
@@ -134,10 +167,6 @@ const LabelContainer = (props: {
   );
 };
 
-const enableExploreDnd = isFeatureEnabled(
-  FeatureFlag.ENABLE_EXPLORE_DRAG_AND_DROP,
-);
-
 export default function DataSourcePanel({
   datasource,
   controls: { datasource: datasourceControl },
@@ -273,13 +302,12 @@ export default function DataSourcePanel({
         />
         <div className="field-selections">
           <Collapse
-            bordered
             defaultActiveKey={['metrics', 'column']}
             expandIconPosition="right"
             ghost
           >
             <Collapse.Panel
-              header={<span className="header">{t('Metrics')}</span>}
+              header={<SectionHeader>{t('Metrics')}</SectionHeader>}
               key="metrics"
             >
               <div className="field-length">
@@ -315,7 +343,7 @@ export default function DataSourcePanel({
               )}
             </Collapse.Panel>
             <Collapse.Panel
-              header={<span className="header">{t('Columns')}</span>}
+              header={<SectionHeader>{t('Columns')}</SectionHeader>}
               key="column"
             >
               <div className="field-length">