feat: card view bulk select (#10607)

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

@@ -20,11 +20,12 @@ import React from 'react';
 import { TableInstance } from 'react-table';
 import styled from '@superset-ui/style';
 
-interface Props {
-  renderCard?: (row: any) => React.ReactNode;
-  prepareRow: TableInstance['prepareRow'];
-  rows: TableInstance['rows'];
+interface CardCollectionProps {
+  bulkSelectEnabled?: boolean;
   loading: boolean;
+  prepareRow: TableInstance['prepareRow'];
+  renderCard?: (row: any) => React.ReactNode;
+  rows: TableInstance['rows'];
 }
 
 const CardContainer = styled.div`
@@ -36,19 +37,44 @@ const CardContainer = styled.div`
     ${({ theme }) => theme.gridUnit * 4}px;
 `;
 
+const CardWrapper = styled.div`
+  border: 2px solid transparent;
+  &.card-selected {
+    border: 2px solid ${({ theme }) => theme.colors.primary.base};
+  }
+`;
+
 export default function CardCollection({
-  renderCard,
-  prepareRow,
-  rows,
+  bulkSelectEnabled,
   loading,
-}: Props) {
+  prepareRow,
+  renderCard,
+  rows,
+}: CardCollectionProps) {
+  function handleClick(event: React.FormEvent, onClick: any) {
+    if (bulkSelectEnabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick();
+    }
+  }
+
   return (
     <CardContainer>
       {rows.map(row => {
         if (!renderCard) return null;
         prepareRow(row);
         return (
-          <div key={row.id}>{renderCard({ ...row.original, loading })}</div>
+          <CardWrapper
+            className={
+              row.isSelected && bulkSelectEnabled ? 'card-selected' : ''
+            }
+            key={row.id}
+            onClick={e => handleClick(e, row.toggleRowSelected())}
+            role="none"
+          >
+            {renderCard({ ...row.original, loading })}
+          </CardWrapper>
         );
       })}
     </CardContainer>

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

@@ -325,6 +325,7 @@ const ListView: FunctionComponent<ListViewProps> = ({
           )}
           {viewingMode === 'card' && (
             <CardCollection
+              bulkSelectEnabled={bulkSelectEnabled}
               prepareRow={prepareRow}
               renderCard={renderCard}
               rows={rows}

superset-frontend/src/components/ListViewCard/index.tsx

@@ -134,7 +134,7 @@ const CoverFooterRight = styled.div`
 
 interface CardProps {
   title: React.ReactNode;
-  url: string;
+  url: string | undefined;
   imgURL: string;
   imgFallbackURL: string;
   description: string;

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

@@ -525,7 +525,7 @@ class ChartList extends React.PureComponent<Props, State> {
     return (
       <ListViewCard
         title={props.slice_name}
-        url={props.url}
+        url={this.state.bulkSelectEnabled ? undefined : props.url}
         imgURL={props.thumbnail_url ?? ''}
         imgFallbackURL={'/static/assets/images/chart-card-fallback.png'}
         description={t('Last modified %s', props.changed_on_delta_humanized)}

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

@@ -530,7 +530,7 @@ class DashboardList extends React.PureComponent<Props, State> {
       <ListViewCard
         title={props.dashboard_title}
         titleRight={<Label>{props.published ? 'published' : 'draft'}</Label>}
-        url={props.url}
+        url={this.state.bulkSelectEnabled ? undefined : props.url}
         imgURL={props.thumbnail_url}
         imgFallbackURL="/static/assets/images/dashboard-card-fallback.png"
         description={t('Last modified %s', props.changed_on_delta_humanized)}