From a3ac5061fee56484a8dbc238fcb2bf156a917465 Mon Sep 17 00:00:00 2001
From: Lily Kuang <lily@preset.io>
Date: Tue, 18 Aug 2020 18:04:36 -0700
Subject: [PATCH] feat: card view bulk select (#10607)

---
 .../components/ListView/CardCollection.tsx    | 44 +++++++++++++++----
 .../src/components/ListView/ListView.tsx      |  1 +
 .../src/components/ListViewCard/index.tsx     |  2 +-
 .../src/views/CRUD/chart/ChartList.tsx        |  2 +-
 .../views/CRUD/dashboard/DashboardList.tsx    |  2 +-
 5 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/superset-frontend/src/components/ListView/CardCollection.tsx b/superset-frontend/src/components/ListView/CardCollection.tsx
index 6668850369..065f8c35e0 100644
--- a/superset-frontend/src/components/ListView/CardCollection.tsx
+++ b/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>
diff --git a/superset-frontend/src/components/ListView/ListView.tsx b/superset-frontend/src/components/ListView/ListView.tsx
index 8a50c26136..edcaa614e2 100644
--- a/superset-frontend/src/components/ListView/ListView.tsx
+++ b/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}
diff --git a/superset-frontend/src/components/ListViewCard/index.tsx b/superset-frontend/src/components/ListViewCard/index.tsx
index 25e731ddef..f6c5af81bb 100644
--- a/superset-frontend/src/components/ListViewCard/index.tsx
+++ b/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;
diff --git a/superset-frontend/src/views/CRUD/chart/ChartList.tsx b/superset-frontend/src/views/CRUD/chart/ChartList.tsx
index 2f196437b3..5b2de1b851 100644
--- a/superset-frontend/src/views/CRUD/chart/ChartList.tsx
+++ b/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)}
diff --git a/superset-frontend/src/views/CRUD/dashboard/DashboardList.tsx b/superset-frontend/src/views/CRUD/dashboard/DashboardList.tsx
index bdd4936cc7..6e6e467b6f 100644
--- a/superset-frontend/src/views/CRUD/dashboard/DashboardList.tsx
+++ b/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)}