fix: change listivew card layouts to the new homepage card layout (#16171)

* initial commit

* removing CardStylesOverrides (unused)

Co-authored-by: Evan Rusackas <evan@preset.io>

superset-frontend/src/components/ListView/CardCollection.tsx

@@ -27,12 +27,21 @@ interface CardCollectionProps {
   prepareRow: TableInstance['prepareRow'];
   renderCard?: (row: any) => React.ReactNode;
   rows: TableInstance['rows'];
+  showThumbnails?: boolean;
 }
 
-const CardContainer = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(459px, 1fr));
-  grid-gap: ${({ theme }) => theme.gridUnit * 8}px;
+const CardContainer = styled.div<{ showThumbnails?: boolean }>`
+  ${({ theme, showThumbnails }) => `
+    display: grid;
+    grid-gap: ${theme.gridUnit * 12}px ${theme.gridUnit * 4}px;
+    grid-template-columns: repeat(auto-fit, 300px);
+    margin-top: ${theme.gridUnit * -6}px;
+    padding: ${
+      showThumbnails
+        ? `${theme.gridUnit * 8 + 3}px ${theme.gridUnit * 9}px`
+        : `${theme.gridUnit * 8 + 1}px ${theme.gridUnit * 9}px`
+    };
+  `}
 `;
 
 const CardWrapper = styled.div`
@@ -51,6 +60,7 @@ export default function CardCollection({
   prepareRow,
   renderCard,
   rows,
+  showThumbnails,
 }: CardCollectionProps) {
   function handleClick(
     event: React.MouseEvent<HTMLDivElement, MouseEvent>,
@@ -65,7 +75,7 @@ export default function CardCollection({
 
   if (!renderCard) return null;
   return (
-    <CardContainer>
+    <CardContainer showThumbnails={showThumbnails}>
       {loading &&
         rows.length === 0 &&
         [...new Array(25)].map((e, i) => (

superset-frontend/src/components/ListView/ListView.tsx

@@ -221,6 +221,7 @@ export interface ListViewProps<T extends object = any> {
   cardSortSelectOptions?: Array<CardSortSelectOption>;
   defaultViewMode?: ViewModeType;
   highlightRowId?: number;
+  showThumbnails?: boolean;
   emptyState?: {
     message?: string;
     slot?: React.ReactNode;
@@ -242,6 +243,7 @@ function ListView<T extends object = any>({
   disableBulkSelect = () => {},
   renderBulkSelectCopy = selected => t('%s Selected', selected.length),
   renderCard,
+  showThumbnails,
   cardSortSelectOptions,
   defaultViewMode = 'card',
   highlightRowId,
@@ -376,6 +378,7 @@ function ListView<T extends object = any>({
               renderCard={renderCard}
               rows={rows}
               loading={loading}
+              showThumbnails={showThumbnails}
             />
           )}
           {viewMode === 'table' && (

superset-frontend/src/views/CRUD/chart/ChartList.tsx

@@ -31,7 +31,6 @@ import {
   createErrorHandler,
   createFetchRelated,
   handleChartDelete,
-  CardStylesOverrides,
 } from 'src/views/CRUD/utils';
 import {
   useChartEditModal,
@@ -161,6 +160,9 @@ function ChartList(props: ChartListProps) {
   const [passwordFields, setPasswordFields] = useState<string[]>([]);
   const [preparingExport, setPreparingExport] = useState<boolean>(false);
 
+  const { userId } = props.user;
+  const userKey = getFromLocalStorage(userId.toString(), null);
+
   const openChartImportModal = () => {
     showImportModal(true);
   };
@@ -543,29 +545,25 @@ function ChartList(props: ChartListProps) {
   ];
 
   function renderCard(chart: Chart) {
-    const { userId } = props.user;
-    const userKey = getFromLocalStorage(userId.toString(), null);
     return (
-      <CardStylesOverrides>
-        <ChartCard
-          chart={chart}
-          showThumbnails={
-            userKey
-              ? userKey.thumbnails
-              : isFeatureEnabled(FeatureFlag.THUMBNAILS)
-          }
-          hasPerm={hasPerm}
-          openChartEditModal={openChartEditModal}
-          bulkSelectEnabled={bulkSelectEnabled}
-          addDangerToast={addDangerToast}
-          addSuccessToast={addSuccessToast}
-          refreshData={refreshData}
-          loading={loading}
-          favoriteStatus={favoriteStatus[chart.id]}
-          saveFavoriteStatus={saveFavoriteStatus}
-          handleBulkChartExport={handleBulkChartExport}
-        />
-      </CardStylesOverrides>
+      <ChartCard
+        chart={chart}
+        showThumbnails={
+          userKey
+            ? userKey.thumbnails
+            : isFeatureEnabled(FeatureFlag.THUMBNAILS)
+        }
+        hasPerm={hasPerm}
+        openChartEditModal={openChartEditModal}
+        bulkSelectEnabled={bulkSelectEnabled}
+        addDangerToast={addDangerToast}
+        addSuccessToast={addSuccessToast}
+        refreshData={refreshData}
+        loading={loading}
+        favoriteStatus={favoriteStatus[chart.id]}
+        saveFavoriteStatus={saveFavoriteStatus}
+        handleBulkChartExport={handleBulkChartExport}
+      />
     );
   }
   const subMenuButtons: SubMenuProps['buttons'] = [];
@@ -655,6 +653,11 @@ function ChartList(props: ChartListProps) {
               loading={loading}
               pageSize={PAGE_SIZE}
               renderCard={renderCard}
+              showThumbnails={
+                userKey
+                  ? userKey.thumbnails
+                  : isFeatureEnabled(FeatureFlag.THUMBNAILS)
+              }
               defaultViewMode={
                 isFeatureEnabled(FeatureFlag.LISTVIEWS_DEFAULT_CARD_VIEW)
                   ? 'card'

superset-frontend/src/views/CRUD/dashboard/DashboardList.tsx

@@ -25,7 +25,6 @@ import {
   createFetchRelated,
   createErrorHandler,
   handleDashboardDelete,
-  CardStylesOverrides,
 } from 'src/views/CRUD/utils';
 import { useListViewResource, useFavoriteStatus } from 'src/views/CRUD/hooks';
 import ConfirmStatusChange from 'src/components/ConfirmStatusChange';
@@ -140,6 +139,9 @@ function DashboardList(props: DashboardListProps) {
     refreshData();
   };
 
+  const { userId } = props.user;
+  const userKey = getFromLocalStorage(userId.toString(), null);
+
   const canCreate = hasPerm('can_write');
   const canEdit = hasPerm('can_write');
   const canDelete = hasPerm('can_write');
@@ -499,29 +501,25 @@ function DashboardList(props: DashboardListProps) {
   ];
 
   function renderCard(dashboard: Dashboard) {
-    const { userId } = props.user;
-    const userKey = getFromLocalStorage(userId.toString(), null);
     return (
-      <CardStylesOverrides>
-        <DashboardCard
-          dashboard={dashboard}
-          hasPerm={hasPerm}
-          bulkSelectEnabled={bulkSelectEnabled}
-          refreshData={refreshData}
-          showThumbnails={
-            userKey
-              ? userKey.thumbnails
-              : isFeatureEnabled(FeatureFlag.THUMBNAILS)
-          }
-          loading={loading}
-          addDangerToast={addDangerToast}
-          addSuccessToast={addSuccessToast}
-          openDashboardEditModal={openDashboardEditModal}
-          saveFavoriteStatus={saveFavoriteStatus}
-          favoriteStatus={favoriteStatus[dashboard.id]}
-          handleBulkDashboardExport={handleBulkDashboardExport}
-        />
-      </CardStylesOverrides>
+      <DashboardCard
+        dashboard={dashboard}
+        hasPerm={hasPerm}
+        bulkSelectEnabled={bulkSelectEnabled}
+        refreshData={refreshData}
+        showThumbnails={
+          userKey
+            ? userKey.thumbnails
+            : isFeatureEnabled(FeatureFlag.THUMBNAILS)
+        }
+        loading={loading}
+        addDangerToast={addDangerToast}
+        addSuccessToast={addSuccessToast}
+        openDashboardEditModal={openDashboardEditModal}
+        saveFavoriteStatus={saveFavoriteStatus}
+        favoriteStatus={favoriteStatus[dashboard.id]}
+        handleBulkDashboardExport={handleBulkDashboardExport}
+      />
     );
   }
 
@@ -614,6 +612,11 @@ function DashboardList(props: DashboardListProps) {
                 initialSort={initialSort}
                 loading={loading}
                 pageSize={PAGE_SIZE}
+                showThumbnails={
+                  userKey
+                    ? userKey.thumbnails
+                    : isFeatureEnabled(FeatureFlag.THUMBNAILS)
+                }
                 renderCard={renderCard}
                 defaultViewMode={
                   isFeatureEnabled(FeatureFlag.LISTVIEWS_DEFAULT_CARD_VIEW)

superset-frontend/src/views/CRUD/utils.tsx

@@ -284,12 +284,6 @@ export const loadingCardCount = 5;
 const breakpoints = [576, 768, 992, 1200];
 export const mq = breakpoints.map(bp => `@media (max-width: ${bp}px)`);
 
-export const CardStylesOverrides = styled.div`
-  .ant-card-cover > div {
-    height: 264px;
-  }
-`;
-
 export const CardContainer = styled.div<{
   showThumbnails?: boolean | undefined;
 }>`