ref(saved-entities): Use SimpleTable for SavedEntityTable styling (#97412)

malwilley · web-flow · commit 4747b843c7d2 · 2025-08-11T11:04:29.000-07:00
diff --git a/static/app/components/savedEntityTable.tsx b/static/app/components/savedEntityTable.tsx
@@ -9,10 +9,10 @@ import {Tooltip} from 'sentry/components/core/tooltip';
 import {DropdownMenu, type MenuItemProps} from 'sentry/components/dropdownMenu';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
 import LoadingError from 'sentry/components/loadingError';
-import Panel from 'sentry/components/panels/panel';
 import Placeholder from 'sentry/components/placeholder';
 import {ProjectList} from 'sentry/components/projectList';
 import {ProvidedFormattedQuery} from 'sentry/components/searchQueryBuilder/formattedQuery';
+import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import {getAbsoluteSummary} from 'sentry/components/timeRangeSelector/utils';
 import TimeSince from 'sentry/components/timeSince';
 import {IconEllipsis, IconStar} from 'sentry/icons';
@@ -62,90 +62,36 @@ export function SavedEntityTable({
   'data-test-id': dataTestId,
 }: SavedEntityTableProps) {
   return (
-    <StyledPanelTable className={className} data-test-id={dataTestId}>
+    <SimpleTable className={className} data-test-id={dataTestId}>
       {header}
-      {isError && <LoadingError />}
+      {isError && (
+        <SimpleTable.Empty>
+          <LoadingError />
+        </SimpleTable.Empty>
+      )}
       {isLoading && <LoadingSkeleton pageSize={pageSize} />}
       {!isError && !isLoading && isEmpty && (
-        <EmptyContainer>
+        <SimpleTable.Empty>
           <EmptyStateWarning small>{emptyMessage}</EmptyStateWarning>
-        </EmptyContainer>
+        </SimpleTable.Empty>
       )}
       {children}
-    </StyledPanelTable>
+    </SimpleTable>
   );
 }
 
-SavedEntityTable.Header = styled('div')`
-  display: grid;
-  grid-template-columns: subgrid;
-  grid-column: 1/-1;
+SavedEntityTable.Header = SimpleTable.Header;
 
-  height: 36px;
-  background-color: ${p => p.theme.backgroundSecondary};
-  border-radius: ${p => p.theme.borderRadius} ${p => p.theme.borderRadius} 0 0;
-`;
+SavedEntityTable.HeaderCell = SimpleTable.HeaderCell;
 
-SavedEntityTable.HeaderCell = styled('div')<{
-  gridArea?: string;
-  noBorder?: boolean;
+SavedEntityTable.Row = styled(SimpleTable.Row, {
+  shouldForwardProp: prop => prop !== 'isFirst' && prop !== 'disableHover',
+})<{
+  isFirst: boolean;
+  disableHover?: boolean;
 }>`
-  display: flex;
-  align-items: center;
-  padding: 0 ${space(1.5)};
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  border-width: 0 1px 0 0;
-  border-style: solid;
-  border-image: linear-gradient(
-      to bottom,
-      transparent,
-      transparent 30%,
-      ${p => p.theme.border} 30%,
-      ${p => p.theme.border} 70%,
-      transparent 70%,
-      transparent
-    )
-    1;
-
-  &:last-child,
-  &:empty {
-    border: 0;
-  }
-
-  ${p =>
-    p.noBorder &&
-    css`
-      border: 0;
-    `}
-
-  color: ${p => p.theme.subText};
-  font-weight: ${p => p.theme.fontWeight.bold};
-
-  ${p =>
-    p.gridArea &&
-    css`
-      grid-area: ${p.gridArea};
-    `}
-`;
-
-SavedEntityTable.Row = styled('div')<{isFirst: boolean; disableHover?: boolean}>`
-  display: grid;
-  position: relative;
-  grid-template-columns: subgrid;
-  grid-column: 1/-1;
   height: 40px;
 
-  ${p =>
-    p.isFirst &&
-    css`
-      border-top: 1px solid ${p.theme.border};
-    `}
-
-  &:not(:last-child) {
-    border-bottom: 1px solid ${p => p.theme.innerBorder};
-  }
-
   &:last-child {
     border-radius: 0 0 ${p => p.theme.borderRadius} ${p => p.theme.borderRadius};
   }
@@ -159,14 +105,11 @@ SavedEntityTable.Row = styled('div')<{isFirst: boolean; disableHover?: boolean}>
     `}
 `;
 
-SavedEntityTable.Cell = styled('div')<{
-  'data-column'?: string;
-  gridArea?: string;
+SavedEntityTable.Cell = styled(SimpleTable.RowCell, {
+  shouldForwardProp: prop => prop !== 'hasButton',
+})<{
   hasButton?: boolean;
 }>`
-  display: flex;
-  align-items: center;
-  padding: ${space(1)} ${space(1.5)};
   height: 40px;
 
   /* Buttons already provide some padding */
@@ -175,12 +118,6 @@ SavedEntityTable.Cell = styled('div')<{
     css`
       padding: 0 ${space(0.5)};
     `}
-
-  ${p =>
-    p.gridArea &&
-    css`
-      grid-area: ${p['data-column']};
-    `}
 `;
 
 SavedEntityTable.CellStar = function CellStar({
@@ -349,19 +286,6 @@ const LoadingCell = styled(SavedEntityTable.Cell)`
   grid-column: 1/-1;
 `;
 
-const StyledPanelTable = styled(Panel)`
-  display: grid;
-  white-space: nowrap;
-  font-size: ${p => p.theme.fontSize.md};
-`;
-
-const EmptyContainer = styled('div')`
-  grid-column: 1/-1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
 const FormattedQueryNoWrap = styled(ProvidedFormattedQuery)`
   flex-wrap: nowrap;
   overflow: hidden;
diff --git a/static/app/components/tables/simpleTable/index.tsx b/static/app/components/tables/simpleTable/index.tsx
@@ -6,6 +6,7 @@ import InteractionStateLayer from 'sentry/components/core/interactionStateLayer'
 import {Flex} from 'sentry/components/core/layout/flex';
 import Panel from 'sentry/components/panels/panel';
 import {IconArrow} from 'sentry/icons';
+import {defined} from 'sentry/utils';
 
 interface TableProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -31,9 +32,11 @@ function HeaderCell({
   children,
   sort,
   handleSortClick,
+  divider = defined(children) ? true : false,
   ...props
 }: HTMLAttributes<HTMLDivElement> & {
   children?: React.ReactNode;
+  divider?: boolean;
   handleSortClick?: () => void;
   sort?: 'asc' | 'desc';
 }) {
@@ -48,7 +51,7 @@ function HeaderCell({
       role="columnheader"
       as={canSort ? 'button' : 'div'}
     >
-      {children && <HeaderDivider />}
+      {divider && <HeaderDivider />}
       {canSort && <InteractionStateLayer />}
       <HeadingText>{children}</HeadingText>
       {isSorted && (
diff --git a/static/app/views/dashboards/manage/tableView/table.tsx b/static/app/views/dashboards/manage/tableView/table.tsx
@@ -62,7 +62,7 @@ export function DashboardTable({
         header={
           <SavedEntityTable.Header>
             <SavedEntityTable.HeaderCell data-column="star" />
-            <SavedEntityTable.HeaderCell data-column="name">
+            <SavedEntityTable.HeaderCell data-column="name" divider={false}>
               {t('Name')}
             </SavedEntityTable.HeaderCell>
             <SavedEntityTable.HeaderCell data-column="project">
@@ -83,7 +83,7 @@ export function DashboardTable({
             <SavedEntityTable.HeaderCell data-column="last-visited">
               {t('Last Viewed')}
             </SavedEntityTable.HeaderCell>
-            <SavedEntityTable.HeaderCell data-column="created" noBorder>
+            <SavedEntityTable.HeaderCell data-column="created">
               {t('Date Created')}
             </SavedEntityTable.HeaderCell>
             <SavedEntityTable.HeaderCell data-column="actions" />
diff --git a/static/app/views/explore/savedQueries/savedQueriesTable.tsx b/static/app/views/explore/savedQueries/savedQueriesTable.tsx
@@ -177,7 +177,7 @@ export function SavedQueriesTable({
         header={
           <SavedEntityTable.Header>
             <SavedEntityTable.HeaderCell data-column="star" />
-            <SavedEntityTable.HeaderCell data-column="name">
+            <SavedEntityTable.HeaderCell data-column="name" divider={false}>
               {t('Name')}
             </SavedEntityTable.HeaderCell>
             {hasLogsSavedQueriesEnabled && (
@@ -197,7 +197,7 @@ export function SavedQueriesTable({
             <SavedEntityTable.HeaderCell data-column="created-by">
               {t('Creator')}
             </SavedEntityTable.HeaderCell>
-            <SavedEntityTable.HeaderCell data-column="last-visited" noBorder>
+            <SavedEntityTable.HeaderCell data-column="last-visited">
               {t('Last Viewed')}
             </SavedEntityTable.HeaderCell>
             <SavedEntityTable.HeaderCell data-column="actions" />
diff --git a/static/app/views/issueList/issueViews/issueViewsList/issueViewsTable.tsx b/static/app/views/issueList/issueViews/issueViewsList/issueViewsTable.tsx
@@ -51,7 +51,7 @@ export function IssueViewsTable({
       header={
         <SavedEntityTable.Header>
           <SavedEntityTable.HeaderCell data-column="star" />
-          <SavedEntityTable.HeaderCell data-column="name">
+          <SavedEntityTable.HeaderCell data-column="name" divider={false}>
             {t('Name')}
           </SavedEntityTable.HeaderCell>
           <SavedEntityTable.HeaderCell data-column="project">
@@ -74,7 +74,7 @@ export function IssueViewsTable({
           <SavedEntityTable.HeaderCell data-column="created">
             {t('Created')}
           </SavedEntityTable.HeaderCell>
-          <SavedEntityTable.HeaderCell data-column="stars" noBorder>
+          <SavedEntityTable.HeaderCell data-column="stars">
             {t('Stars')}
           </SavedEntityTable.HeaderCell>
           <SavedEntityTable.HeaderCell data-column="actions" />
