fix(datasets): Replace left panel layout by TableSelector (#24599)

Co-authored-by: Justin Park <justinpark@apache.org> (cherry picked from commit b2831b4)
apache · Jul 24, 2023 · d87724a · d87724a
1 parent 6281f50
commit d87724a
Show file tree

Hide file tree

Showing 7 changed files with 216 additions and 352 deletions.
diff --git a/superset-frontend/src/components/TableSelector/index.tsx b/superset-frontend/src/components/TableSelector/index.tsx
@@ -104,6 +104,7 @@ interface TableSelectorProps {
   tableValue?: string | string[];
   onTableSelectChange?: (value?: string | string[], schema?: string) => void;
   tableSelectMode?: 'single' | 'multiple';
+  customTableOptionLabelRenderer?: (table: Table) => JSX.Element;
 }
 
 export interface TableOption {
@@ -132,6 +133,7 @@ export const TableOption = ({ table }: { table: Table }) => {
         <WarningIconWithTooltip
           warningMarkdown={extra.warning_markdown}
           size="l"
+          marginRight={4}
         />
       )}
       {value}
@@ -164,6 +166,7 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
   tableSelectMode = 'single',
   tableValue = undefined,
   onTableSelectChange,
+  customTableOptionLabelRenderer,
 }) => {
   const { addSuccessToast } = useToasts();
   const [currentSchema, setCurrentSchema] = useState<string | undefined>(
@@ -203,9 +206,12 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
             value: table.value,
             label: <TableOption table={table} />,
             text: table.value,
+            ...(customTableOptionLabelRenderer && {
+              customLabel: customTableOptionLabelRenderer(table),
+            }),
           }))
         : [],
-    [data],
+    [data, customTableOptionLabelRenderer],
   );
 
   useEffect(() => {

diff --git a/superset-frontend/src/components/Tooltip/index.tsx b/superset-frontend/src/components/Tooltip/index.tsx
@@ -41,6 +41,9 @@ export const Tooltip = (props: TooltipProps) => {
               display: block;
             }
           }
+          .ant-tooltip-inner > p {
+            margin: 0;
+          }
         `}
       />
       <AntdTooltip

diff --git a/superset-frontend/src/components/WarningIconWithTooltip/index.tsx b/superset-frontend/src/components/WarningIconWithTooltip/index.tsx
@@ -24,11 +24,13 @@ import { Tooltip } from 'src/components/Tooltip';
 export interface WarningIconWithTooltipProps {
   warningMarkdown: string;
   size?: IconType['iconSize'];
+  marginRight?: number;
 }
 
 function WarningIconWithTooltip({
   warningMarkdown,
   size,
+  marginRight,
 }: WarningIconWithTooltipProps) {
   const theme = useTheme();
   return (
@@ -39,7 +41,7 @@ function WarningIconWithTooltip({
       <Icons.AlertSolid
         iconColor={theme.colors.alert.base}
         iconSize={size}
-        css={{ marginRight: theme.gridUnit * 2 }}
+        css={{ marginRight: marginRight ?? theme.gridUnit * 2 }}
       />
     </Tooltip>
   );