justinpark commented on code in PR #32548:
URL: https://github.com/apache/superset/pull/32548#discussion_r1996297120


##########
superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelItem.tsx:
##########
@@ -123,146 +76,95 @@ const SectionHeaderButton = styled.button`
   border: none;
   background: transparent;
   width: 100%;
-  padding-inline: 0px;
+  height: 100%;
+  padding-inline: 0;
 `;
 
 const SectionHeader = styled.span`
-  ${({ theme }) => `
+  ${({ theme }) => css`
+    color: ${theme.colors.grayscale.dark1};
     font-size: ${theme.typography.sizes.m}px;
+    font-weight: ${theme.typography.weights.medium};
     line-height: 1.3;
   `}
 `;
 
-const Box = styled.div`
-  ${({ theme }) => `
-    border: 1px ${theme.colors.grayscale.light4} solid;
-    border-radius: ${theme.gridUnit}px;
-    font-size: ${theme.typography.sizes.s}px;
-    padding: ${theme.gridUnit}px;
-    color: ${theme.colors.grayscale.light1};
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+const Divider = styled.div`
+  ${({ theme }) => css`
+    height: 16px;
+    border-bottom: 1px solid ${theme.colors.grayscale.light3};
   `}
 `;
 
-const DatasourcePanelItem: FC<Props> = ({ index, style, data }) => {
-  const {
-    metricSlice: _metricSlice,
-    columnSlice,
-    totalMetrics,
-    totalColumns,
-    width,
-    showAllMetrics,
-    onShowAllMetricsChange,
-    showAllColumns,
-    onShowAllColumnsChange,
-    collapseMetrics,
-    onCollapseMetricsChange,
-    collapseColumns,
-    onCollapseColumnsChange,
-    hiddenMetricCount,
-    hiddenColumnCount,
-  } = data;
-  const metricSlice = collapseMetrics ? [] : _metricSlice;
-
-  const EXTRA_LINES = collapseMetrics ? 1 : 2;
-  const isColumnSection = collapseMetrics
-    ? index >= 1
-    : index > metricSlice.length + EXTRA_LINES;
-  const HEADER_LINE = isColumnSection
-    ? metricSlice.length + EXTRA_LINES + 1
-    : 0;
-  const SUBTITLE_LINE = HEADER_LINE + 1;
-  const BOTTOM_LINE =
-    (isColumnSection ? columnSlice.length : metricSlice.length) +
-    (collapseMetrics ? HEADER_LINE : SUBTITLE_LINE) +
-    1;
-  const collapsed = isColumnSection ? collapseColumns : collapseMetrics;
-  const setCollapse = isColumnSection
-    ? onCollapseColumnsChange
-    : onCollapseMetricsChange;
-  const showAll = isColumnSection ? showAllColumns : showAllMetrics;
-  const setShowAll = isColumnSection
-    ? onShowAllColumnsChange
-    : onShowAllMetricsChange;
+export interface DatasourcePanelItemProps {
+  index: number;
+  style: CSSProperties;
+  data: {
+    flattenedItems: FlattenedItem[];
+    folderMap: Map<string, Folder>;
+    width: number;
+    onToggleCollapse: (folderId: string) => void;
+  };
+}
+
+const DatasourcePanelItem = ({
+  index,
+  style,
+  data,
+}: DatasourcePanelItemProps) => {
+  const { flattenedItems, folderMap, width, onToggleCollapse } = data;
+  const item = flattenedItems[index];
   const theme = useTheme();
-  const hiddenCount = isColumnSection ? hiddenColumnCount : hiddenMetricCount;
+
+  if (!item) return null;
+
+  const folder = folderMap.get(item.folderId);
+  if (!folder) return null;
+
+  const indentation = item.depth * theme.gridUnit * 4;
 
   return (
     <div
-      style={style}
-      css={css`
-        padding: 0 ${theme.gridUnit * 4}px;
-      `}
+      style={{
+        ...style,
+        paddingLeft: theme.gridUnit * 4 + indentation,
+        paddingRight: theme.gridUnit * 4,
+      }}
     >
-      {index === HEADER_LINE && (
-        <SectionHeaderButton onClick={() => setCollapse(!collapsed)}>
-          <SectionHeader>
-            {isColumnSection ? t('Columns') : t('Metrics')}
-          </SectionHeader>
-          {collapsed ? (
+      {item.type === 'header' && (
+        <SectionHeaderButton onClick={() => onToggleCollapse(folder.id)}>
+          <SectionHeader>{folder.name}</SectionHeader>
+          {folder.isCollapsed ? (
             <Icons.DownOutlined iconSize="s" />
           ) : (
             <Icons.UpOutlined iconSize="s" />
           )}
         </SectionHeaderButton>
       )}
-      {index === SUBTITLE_LINE && !collapsed && (
-        <div
-          css={css`
-            display: flex;
-            gap: ${theme.gridUnit * 2}px;
-            justify-content: space-between;
-            align-items: baseline;
-          `}
-        >
-          <div
-            className="field-length"
-            css={css`
-              flex-shrink: 0;
-            `}
-          >
-            {isColumnSection
-              ? t(`Showing %s of %s`, columnSlice?.length, totalColumns)

Review Comment:
   Removing the display of total counts would be a significant regression for 
Airbnb users. I request that at least the count for items not included in the 
folder be restored.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]


---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to