diff --git a/superset-frontend/src/components/ListView/CardCollection.tsx b/superset-frontend/src/components/ListView/CardCollection.tsx index a0a0a98ce9a..d91498c9147 100644 --- a/superset-frontend/src/components/ListView/CardCollection.tsx +++ b/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, @@ -65,7 +75,7 @@ export default function CardCollection({ if (!renderCard) return null; return ( - + {loading && rows.length === 0 && [...new Array(25)].map((e, i) => ( diff --git a/superset-frontend/src/components/ListView/ListView.tsx b/superset-frontend/src/components/ListView/ListView.tsx index f74e799ee29..195cae2d465 100644 --- a/superset-frontend/src/components/ListView/ListView.tsx +++ b/superset-frontend/src/components/ListView/ListView.tsx @@ -221,6 +221,7 @@ export interface ListViewProps { cardSortSelectOptions?: Array; defaultViewMode?: ViewModeType; highlightRowId?: number; + showThumbnails?: boolean; emptyState?: { message?: string; slot?: React.ReactNode; @@ -242,6 +243,7 @@ function ListView({ disableBulkSelect = () => {}, renderBulkSelectCopy = selected => t('%s Selected', selected.length), renderCard, + showThumbnails, cardSortSelectOptions, defaultViewMode = 'card', highlightRowId, @@ -376,6 +378,7 @@ function ListView({ renderCard={renderCard} rows={rows} loading={loading} + showThumbnails={showThumbnails} /> )} {viewMode === 'table' && ( diff --git a/superset-frontend/src/views/CRUD/chart/ChartList.tsx b/superset-frontend/src/views/CRUD/chart/ChartList.tsx index d7b5bf10256..63936166793 100644 --- a/superset-frontend/src/views/CRUD/chart/ChartList.tsx +++ b/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([]); const [preparingExport, setPreparingExport] = useState(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 ( - - - + ); } 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' diff --git a/superset-frontend/src/views/CRUD/dashboard/DashboardList.tsx b/superset-frontend/src/views/CRUD/dashboard/DashboardList.tsx index d89c520dfde..9c2bd841c09 100644 --- a/superset-frontend/src/views/CRUD/dashboard/DashboardList.tsx +++ b/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 ( - - - + ); } @@ -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) diff --git a/superset-frontend/src/views/CRUD/utils.tsx b/superset-frontend/src/views/CRUD/utils.tsx index 54d10e78020..08535e1b91b 100644 --- a/superset-frontend/src/views/CRUD/utils.tsx +++ b/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; }>`