feat: SIP-34 card/grid views for dashboards and charts (#10526)

superset-frontend/.storybook/main.js

@@ -22,7 +22,7 @@ const path = require('path');
 const customConfig = require('../webpack.config.js');
 
 module.exports = {
-  stories: ['../src/components/**/*.stories.jsx'],
+  stories: ['../src/components/**/*.stories.(t|j)sx'],
   addons: [
     '@storybook/addon-actions',
     '@storybook/addon-links',

superset-frontend/spec/javascripts/views/CRUD/chart/ChartList_spec.jsx

@@ -24,7 +24,9 @@ import fetchMock from 'fetch-mock';
 import { supersetTheme, ThemeProvider } from '@superset-ui/style';
 
 import ChartList from 'src/views/CRUD/chart/ChartList';
-import ListView from 'src/components/ListView/ListView';
+import ListView from 'src/components/ListView';
+import PropertiesModal from 'src/explore/components/PropertiesModal';
+import ListViewCard from 'src/components/ListViewCard';
 
 // store needed for withToasts(ChartTable)
 const mockStore = configureStore([thunk]);
@@ -96,4 +98,19 @@ describe('ChartList', () => {
       `"http://localhost/api/v1/chart/?q=(order_column:changed_on_delta_humanized,order_direction:desc,page:0,page_size:25)"`,
     );
   });
+
+  it('renders a card view', () => {
+    expect(wrapper.find(ListViewCard)).toExist();
+  });
+
+  it('renders a table view', () => {
+    wrapper.find('[data-test="list-view"]').first().simulate('click');
+    expect(wrapper.find('table')).toExist();
+  });
+
+  it('edits', () => {
+    expect(wrapper.find(PropertiesModal)).not.toExist();
+    wrapper.find('[data-test="pencil"]').first().simulate('click');
+    expect(wrapper.find(PropertiesModal)).toExist();
+  });
 });

superset-frontend/spec/javascripts/views/CRUD/dashboard/DashboardList_spec.jsx

@@ -24,8 +24,9 @@ import fetchMock from 'fetch-mock';
 import { supersetTheme, ThemeProvider } from '@superset-ui/style';
 
 import DashboardList from 'src/views/CRUD/dashboard/DashboardList';
-import ListView from 'src/components/ListView/ListView';
+import ListView from 'src/components/ListView';
 import PropertiesModal from 'src/dashboard/components/PropertiesModal';
+import ListViewCard from 'src/components/ListViewCard';
 
 // store needed for withToasts(DashboardTable)
 const mockStore = configureStore([thunk]);
@@ -88,6 +89,16 @@ describe('DashboardList', () => {
       `"http://localhost/api/v1/dashboard/?q=(order_column:changed_on_delta_humanized,order_direction:desc,page:0,page_size:25)"`,
     );
   });
+
+  it('renders a card view', () => {
+    expect(wrapper.find(ListViewCard)).toExist();
+  });
+
+  it('renders a table view', () => {
+    wrapper.find('[data-test="list-view"]').first().simulate('click');
+    expect(wrapper.find('table')).toExist();
+  });
+
   it('edits', () => {
     expect(wrapper.find(PropertiesModal)).not.toExist();
     wrapper.find('[data-test="pencil"]').first().simulate('click');

superset-frontend/spec/javascripts/views/CRUD/dataset/DatasetList_spec.jsx

@@ -24,7 +24,7 @@ import fetchMock from 'fetch-mock';
 import { supersetTheme, ThemeProvider } from '@superset-ui/style';
 
 import DatasetList from 'src/views/CRUD/dataset/DatasetList';
-import ListView from 'src/components/ListView/ListView';
+import ListView from 'src/components/ListView';
 import Button from 'src/components/Button';
 import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox';
 import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';

superset-frontend/spec/javascripts/welcome/DashboardTable_spec.tsx

@@ -23,7 +23,7 @@ import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
 import { supersetTheme, ThemeProvider } from '@superset-ui/style';
 
-import ListView from 'src/components/ListView/ListView';
+import ListView from 'src/components/ListView';
 import DashboardTable from 'src/welcome/DashboardTable';
 
 // store needed for withToasts(DashboardTable)

superset-frontend/src/components/AvatarIcon.tsx

@@ -17,35 +17,27 @@
  * under the License.
  */
 import React from 'react';
-import styled from '@superset-ui/style';
 import { getCategoricalSchemeRegistry } from '@superset-ui/color';
 import Avatar, { ConfigProvider } from 'react-avatar';
 import TooltipWrapper from 'src/components/TooltipWrapper';
 
 interface Props {
   firstName: string;
   lastName: string;
-  tableName: string;
-  userName: string;
+  uniqueKey: string;
   iconSize: number;
   textSize: number;
 }
 
 const colorList = getCategoricalSchemeRegistry().get();
 
-const StyledAvatar = styled(Avatar)`
-  margin: 0px 5px;
-`;
-
 export default function AvatarIcon({
-  tableName,
+  uniqueKey,
   firstName,
   lastName,
-  userName,
   iconSize,
   textSize,
 }: Props) {
-  const uniqueKey = `${tableName}-${userName}`;
   const fullName = `${firstName} ${lastName}`;
 
   return (
@@ -55,7 +47,7 @@ export default function AvatarIcon({
       tooltip={fullName}
     >
       <ConfigProvider colors={colorList && colorList.colors}>
-        <StyledAvatar
+        <Avatar
           key={uniqueKey}
           name={fullName}
           size={String(iconSize)}

superset-frontend/src/components/FaveStar.tsx

@@ -61,7 +61,7 @@ export default class FaveStar extends React.PureComponent<FaveStarProps> {
               }
               viewBox="0 0 16 15"
               width={this.props.width || 20}
-              height="auto"
+              height={this.props.height || 'auto'}
             />
           </a>
         </TooltipWrapper>

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

@@ -18,68 +18,74 @@
  */
 import React, { SVGProps } from 'react';
 import { ReactComponent as CancelXIcon } from 'images/icons/cancel-x.svg';
-import { ReactComponent as CheckIcon } from 'images/icons/check.svg';
-import { ReactComponent as CircleCheckIcon } from 'images/icons/circle-check.svg';
-import { ReactComponent as CircleCheckSolidIcon } from 'images/icons/circle-check-solid.svg';
+import { ReactComponent as CardViewIcon } from 'images/icons/card-view.svg';
 import { ReactComponent as CheckboxHalfIcon } from 'images/icons/checkbox-half.svg';
 import { ReactComponent as CheckboxOffIcon } from 'images/icons/checkbox-off.svg';
 import { ReactComponent as CheckboxOnIcon } from 'images/icons/checkbox-on.svg';
+import { ReactComponent as CheckIcon } from 'images/icons/check.svg';
+import { ReactComponent as CircleCheckIcon } from 'images/icons/circle-check.svg';
+import { ReactComponent as CircleCheckSolidIcon } from 'images/icons/circle-check-solid.svg';
 import { ReactComponent as CloseIcon } from 'images/icons/close.svg';
 import { ReactComponent as CompassIcon } from 'images/icons/compass.svg';
 import { ReactComponent as DatasetPhysicalIcon } from 'images/icons/dataset_physical.svg';
 import { ReactComponent as DatasetVirtualIcon } from 'images/icons/dataset_virtual.svg';
 import { ReactComponent as ErrorIcon } from 'images/icons/error.svg';
 import { ReactComponent as FavoriteSelectedIcon } from 'images/icons/favorite-selected.svg';
 import { ReactComponent as FavoriteUnselectedIcon } from 'images/icons/favorite-unselected.svg';
-import { ReactComponent as PencilIcon } from 'images/icons/pencil.svg';
+import { ReactComponent as ListViewIcon } from 'images/icons/list-view.svg';
 import { ReactComponent as MoreIcon } from 'images/icons/more.svg';
+import { ReactComponent as PencilIcon } from 'images/icons/pencil.svg';
 import { ReactComponent as SearchIcon } from 'images/icons/search.svg';
+import { ReactComponent as ShareIcon } from 'images/icons/share.svg';
 import { ReactComponent as SortAscIcon } from 'images/icons/sort-asc.svg';
 import { ReactComponent as SortDescIcon } from 'images/icons/sort-desc.svg';
 import { ReactComponent as SortIcon } from 'images/icons/sort.svg';
 import { ReactComponent as TrashIcon } from 'images/icons/trash.svg';
 import { ReactComponent as WarningIcon } from 'images/icons/warning.svg';
-import { ReactComponent as ShareIcon } from 'images/icons/share.svg';
 
 type IconName =
   | 'cancel-x'
+  | 'card-view'
   | 'check'
   | 'checkbox-half'
   | 'checkbox-off'
   | 'checkbox-on'
-  | 'close'
-  | 'circle-check'
   | 'circle-check-solid'
+  | 'circle-check'
+  | 'close'
   | 'compass'
   | 'dataset-physical'
   | 'dataset-virtual'
   | 'error'
   | 'favorite-selected'
   | 'favorite-unselected'
+  | 'list-view'
   | 'more'
   | 'pencil'
   | 'search'
-  | 'sort'
+  | 'share'
   | 'sort-asc'
   | 'sort-desc'
+  | 'sort'
   | 'trash'
-  | 'share'
   | 'warning';
 
 export const iconsRegistry: Record<
   IconName,
   React.ComponentType<SVGProps<SVGSVGElement>>
 > = {
   'cancel-x': CancelXIcon,
+  'card-view': CardViewIcon,
   'checkbox-half': CheckboxHalfIcon,
   'checkbox-off': CheckboxOffIcon,
   'checkbox-on': CheckboxOnIcon,
-  'circle-check': CircleCheckIcon,
   'circle-check-solid': CircleCheckSolidIcon,
+  'circle-check': CircleCheckIcon,
   'dataset-physical': DatasetPhysicalIcon,
   'dataset-virtual': DatasetVirtualIcon,
   'favorite-selected': FavoriteSelectedIcon,
   'favorite-unselected': FavoriteUnselectedIcon,
+  'list-view': ListViewIcon,
   'sort-asc': SortAscIcon,
   'sort-desc': SortDescIcon,
   check: CheckIcon,
@@ -89,18 +95,25 @@ export const iconsRegistry: Record<
   more: MoreIcon,
   pencil: PencilIcon,
   search: SearchIcon,
+  share: ShareIcon,
   sort: SortIcon,
   trash: TrashIcon,
   warning: WarningIcon,
-  share: ShareIcon,
 };
 interface IconProps extends SVGProps<SVGSVGElement> {
   name: IconName;
 }
 
-const Icon = ({ name, color = '#666666', ...rest }: IconProps) => {
+const Icon = ({
+  name,
+  color = '#666666',
+  viewBox = '0 0 24 24',
+  ...rest
+}: IconProps) => {
   const Component = iconsRegistry[name];
-  return <Component color={color} data-test={name} {...rest} />;
+  return (
+    <Component color={color} viewBox={viewBox} data-test={name} {...rest} />
+  );
 };
 
 export default Icon;

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

@@ -63,6 +63,13 @@ const SupersetLabel = styled(BootstrapLabel)`
       background-color: ${({ theme }) => theme.colors.error.base};
     }
   }
+
+  &.secondaryLabel {
+    background-color: ${({ theme }) => theme.colors.secondary.base};
+    &:hover {
+      background-color: ${({ theme }) => theme.colors.secondary.base};
+    }
+  }
 `;
 
 export default function Label(props: LabelProps) {

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

@@ -0,0 +1,56 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+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'];
+  loading: boolean;
+}
+
+const CardContainer = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(459px, max-content));
+  grid-gap: ${({ theme }) => theme.gridUnit * 8}px;
+  justify-content: center;
+  padding: ${({ theme }) => theme.gridUnit * 2}px
+    ${({ theme }) => theme.gridUnit * 4}px;
+`;
+
+export default function CardCollection({
+  renderCard,
+  prepareRow,
+  rows,
+  loading,
+}: Props) {
+  return (
+    <CardContainer>
+      {rows.map(row => {
+        if (!renderCard) return null;
+        prepareRow(row);
+        return (
+          <div key={row.id}>{renderCard({ ...row.original, loading })}</div>
+        );
+      })}
+    </CardContainer>
+  );
+}

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

@@ -218,7 +218,10 @@ interface UIFiltersProps {
 }
 
 const FilterWrapper = styled.div`
-  padding: 24px 16px 8px;
+  display: inline-block;
+  padding: ${({ theme }) => theme.gridUnit * 6}px
+    ${({ theme }) => theme.gridUnit * 4}px
+    ${({ theme }) => theme.gridUnit * 2}px;
 `;
 
 function UIFilters({