feat(explore): UI changes in dataset panel on Explore page (apache#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/packages/superset-ui-chart-controls/package.json

@@ -28,6 +28,7 @@
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
+    "@ant-design/icons": "^4.2.2",
     "@emotion/react": "^11.4.1",
     "@superset-ui/core": "*",
     "@testing-library/dom": "^7.29.4",

superset-frontend/packages/superset-ui-chart-controls/src/components/CertifiedIconWithTooltip.tsx

@@ -53,9 +53,9 @@ function CertifiedIconWithTooltip({
       <svg
         xmlns="http://www.w3.org/2000/svg"
         enableBackground="new 0 0 24 24"
-        height="16"
+        height="14"
         viewBox="0 0 24 24"
-        width="16"
+        width="14"
       >
         <g>
           <path

superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx

@@ -17,9 +17,9 @@
  * under the License.
  */
 import React, { useState, ReactNode, useLayoutEffect } from 'react';
-import { styled } from '@superset-ui/core';
+import { css, styled, SupersetTheme } from '@superset-ui/core';
 import { Tooltip } from './Tooltip';
-import { ColumnTypeLabel } from './ColumnTypeLabel';
+import { ColumnTypeLabel } from './ColumnTypeLabel/ColumnTypeLabel';
 import InfoTooltipWithTrigger from './InfoTooltipWithTrigger';
 import CertifiedIconWithTooltip from './CertifiedIconWithTooltip';
 import { ColumnMeta } from '../types';
@@ -32,6 +32,8 @@ export type ColumnOptionProps = {
 };
 
 const StyleOverrides = styled.span`
+  display: flex;
+  align-items: center;
   svg {
     margin-right: ${({ theme }) => theme.gridUnit}px;
   }
@@ -54,15 +56,16 @@ export function ColumnOption({
   return (
     <StyleOverrides>
       {showType && type !== undefined && <ColumnTypeLabel type={type} />}
-      {column.is_certified && (
-        <CertifiedIconWithTooltip
-          metricName={column.metric_name}
-          certifiedBy={column.certified_by}
-          details={column.certification_details}
-        />
-      )}
       <Tooltip id="metric-name-tooltip" title={tooltipText}>
-        <span className="m-r-5 option-label column-option-label" ref={labelRef}>
+        <span
+          className="option-label column-option-label"
+          css={(theme: SupersetTheme) =>
+            css`
+              margin-right: ${theme.gridUnit}px;
+            `
+          }
+          ref={labelRef}
+        >
           {getColumnLabelText(column)}
         </span>
       </Tooltip>
@@ -76,6 +79,14 @@ export function ColumnOption({
           placement="top"
         />
       )}
+
+      {column.is_certified && (
+        <CertifiedIconWithTooltip
+          metricName={column.metric_name}
+          certifiedBy={column.certified_by}
+          details={column.certification_details}
+        />
+      )}
     </StyleOverrides>
   );
 }

superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx

@@ -0,0 +1,71 @@
+/* eslint-disable no-nested-ternary */
+/**
+ * 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, { ReactNode } from 'react';
+import { css, GenericDataType, styled, t } from '@superset-ui/core';
+import { ClockCircleOutlined, QuestionOutlined } from '@ant-design/icons';
+// TODO: move all icons to superset-ui/core
+import FunctionSvg from './type-icons/field_derived.svg';
+import BooleanSvg from './type-icons/field_boolean.svg';
+import StringSvg from './type-icons/field_abc.svg';
+import NumSvg from './type-icons/field_num.svg';
+
+export type ColumnLabelExtendedType = 'expression' | '';
+
+export type ColumnTypeLabelProps = {
+  type?: ColumnLabelExtendedType | GenericDataType;
+};
+
+const TypeIconWrapper = styled.div`
+  ${({ theme }) => css`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: ${theme.gridUnit * 6}px;
+    height: ${theme.gridUnit * 6}px;
+    margin-right: ${theme.gridUnit}px;
+
+    && svg {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  `};
+`;
+
+export function ColumnTypeLabel({ type }: ColumnTypeLabelProps) {
+  let typeIcon: ReactNode = (
+    <QuestionOutlined aria-label={t('unknown type icon')} />
+  );
+
+  if (type === '' || type === 'expression') {
+    typeIcon = <FunctionSvg aria-label={t('function type icon')} />;
+  } else if (type === GenericDataType.STRING) {
+    typeIcon = <StringSvg aria-label={t('string type icon')} />;
+  } else if (type === GenericDataType.NUMERIC) {
+    typeIcon = <NumSvg aria-label={t('numeric type icon')} />;
+  } else if (type === GenericDataType.BOOLEAN) {
+    typeIcon = <BooleanSvg aria-label={t('boolean type icon')} />;
+  } else if (type === GenericDataType.TEMPORAL) {
+    typeIcon = <ClockCircleOutlined aria-label={t('temporal type icon')} />;
+  }
+
+  return <TypeIconWrapper>{typeIcon}</TypeIconWrapper>;
+}
+
+export default ColumnTypeLabel;

superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/type-icons/svgType.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+declare module '*.svg' {
+  const content: any;
+  export default content;
+}

superset-frontend/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { kebabCase } from 'lodash';
 import { TooltipPlacement } from 'antd/lib/tooltip';
 import { t } from '@superset-ui/core';
@@ -30,6 +30,7 @@ export interface InfoTooltipWithTriggerProps {
   placement?: TooltipPlacement;
   bsStyle?: string;
   className?: string;
+  iconsStyle?: CSSProperties;
 }
 
 export function InfoTooltipWithTrigger({
@@ -40,6 +41,7 @@ export function InfoTooltipWithTrigger({
   icon = 'info-circle',
   className = 'text-muted',
   placement = 'right',
+  iconsStyle = {},
 }: InfoTooltipWithTriggerProps) {
   const iconClass = `fa fa-${icon} ${className} ${
     bsStyle ? `text-${bsStyle}` : ''
@@ -50,7 +52,7 @@ export function InfoTooltipWithTrigger({
       aria-label={t('Show info tooltip')}
       tabIndex={0}
       className={iconClass}
-      style={{ cursor: onClick ? 'pointer' : undefined }}
+      style={{ cursor: onClick ? 'pointer' : undefined, ...iconsStyle }}
       onClick={onClick}
       onKeyPress={
         onClick &&