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

Co-authored-by: Justin Park <justinpark@apache.org>
apache · Jul 20, 2023 · b2831b4 · b2831b4
1 parent df106aa
commit b2831b4
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>
  );