Dashboard list filters & favouriting & archival [WIP]

frontend/interfaces/underscore.js

@@ -60,4 +60,6 @@ declare module "underscore" {
 
   // TODO: improve this
   declare function chain<S>(obj: S): any;
+
+  declare function constant<S>(obj: S): () => S;
 }

frontend/src/metabase/components/EmptyState.jsx

@@ -15,14 +15,15 @@ type EmptyStateProps = {
     title?: string,
     icon?: string,
     image?: string,
+    imageHeight?: string, // for reducing ui flickering when the image is loading
     imageClassName?: string,
     action?: string,
     link?: string,
     onActionClick?: () => void,
     smallDescription?: boolean
 }
 
-const EmptyState = ({title, message, icon, image, imageClassName, action, link, onActionClick, smallDescription = false}: EmptyStateProps) =>
+const EmptyState = ({title, message, icon, image, imageHeight, imageClassName, action, link, onActionClick, smallDescription = false}: EmptyStateProps) =>
     <div className="text-centered text-brand-light my2" style={smallDescription ? {} : {width: "350px"}}>
         { title &&
         <h2 className="text-brand mb4">{title}</h2>
@@ -31,7 +32,7 @@ const EmptyState = ({title, message, icon, image, imageClassName, action, link,
         <Icon name={icon} size={40}/>
         }
         { image &&
-        <img src={`${image}.png`} width="300px" alt={message} srcSet={`${image}@2x.png 2x`}
+        <img src={`${image}.png`} width="300px" height={imageHeight} alt={message} srcSet={`${image}@2x.png 2x`}
              className={imageClassName}/>
         }
         <div className="flex justify-center">

frontend/src/metabase/components/FilterWidget.jsx → frontend/src/metabase/components/ListFilterWidget.jsx

@@ -7,17 +7,17 @@ import React, { Component } from "react";
 import Icon from "metabase/components/Icon";
 import PopoverWithTrigger from "./PopoverWithTrigger";
 
-type FilterWidgetItem = {
+export type ListFilterWidgetItem = {
     id: string,
     name: string,
     icon: string
 }
 
-export default class FilterWidget extends Component {
+export default class ListFilterWidget extends Component {
     props: {
-        items: FilterWidgetItem[],
-        activeItem: FilterWidgetItem,
-        onChange: (FilterWidgetItem) => void
+        items: ListFilterWidgetItem[],
+        activeItem: ListFilterWidgetItem,
+        onChange: (ListFilterWidgetItem) => void
     };
 
     popoverRef: PopoverWithTrigger;

frontend/src/metabase/css/core/colors.css

@@ -191,3 +191,4 @@
   color: #CFE4F5
 }
 .text-slate { color: #606E7B; }
+

frontend/src/metabase/dashboard/components/DeleteDashboardModal.jsx → frontend/src/metabase/dashboard/components/ArchiveDashboardModal.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 
 import ModalContent from "metabase/components/ModalContent.jsx";
 
-export default class DeleteDashboardModal extends Component {
+export default class ArchiveDashboardModal extends Component {
     constructor(props, context) {
         super(props, context);
 
@@ -16,12 +16,12 @@ export default class DeleteDashboardModal extends Component {
         dashboard: PropTypes.object.isRequired,
 
         onClose: PropTypes.func,
-        onDelete: PropTypes.func
+        onArchive: PropTypes.func
     };
 
-    async deleteDashboard() {
+    async archiveDashboard() {
         try {
-            this.props.onDelete(this.props.dashboard);
+            this.props.onArchive(this.props.dashboard);
         } catch (error) {
             this.setState({ error });
         }
@@ -46,15 +46,15 @@ export default class DeleteDashboardModal extends Component {
 
         return (
             <ModalContent
-                title="Delete Dashboard"
+                title="Archive Dashboard"
                 onClose={this.props.onClose}
             >
                 <div className="Form-inputs mb4">
                     <p>Are you sure you want to do this?</p>
                 </div>
 
                 <div className="Form-actions">
-                    <button className="Button Button--danger" onClick={() => this.deleteDashboard()}>Yes</button>
+                    <button className="Button Button--danger" onClick={() => this.archiveDashboard()}>Yes</button>
                     <button className="Button Button--primary ml1" onClick={this.props.onClose}>No</button>
                     {formError}
                 </div>

frontend/src/metabase/dashboard/components/Dashboard.jsx

@@ -39,7 +39,7 @@ type Props = {
 
     initialize:             () => Promise<void>,
     addCardToDashboard:     ({ dashId: DashCardId, cardId: CardId }) => void,
-    deleteDashboard:        (dashboardId: DashboardId) => void,
+    archiveDashboard:        (dashboardId: DashboardId) => void,
     fetchCards:             (filterMode?: string) => void,
     fetchDashboard:         (dashboardId: DashboardId, queryParams: ?QueryParams) => void,
     fetchRevisions:         ({ entity: string, id: number }) => void,
@@ -91,7 +91,7 @@ export default class Dashboard extends Component<*, Props, State> {
         parameters: PropTypes.array,
 
         addCardToDashboard: PropTypes.func.isRequired,
-        deleteDashboard: PropTypes.func.isRequired,
+        archiveDashboard: PropTypes.func.isRequired,
         fetchCards: PropTypes.func.isRequired,
         fetchDashboard: PropTypes.func.isRequired,
         fetchRevisions: PropTypes.func.isRequired,

frontend/src/metabase/dashboard/components/DashboardHeader.jsx

@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 
 import ActionButton from "metabase/components/ActionButton.jsx";
 import AddToDashSelectQuestionModal from "./AddToDashSelectQuestionModal.jsx";
-import DeleteDashboardModal from "./DeleteDashboardModal.jsx";
+import ArchiveDashboardModal from "./ArchiveDashboardModal.jsx";
 import Header from "metabase/components/Header.jsx";
 import HistoryModal from "metabase/components/HistoryModal.jsx";
 import Icon from "metabase/components/Icon.jsx";
@@ -47,7 +47,7 @@ type Props = {
     parameters:             React$Element<*>[],
 
     addCardToDashboard:     ({ dashId: DashCardId, cardId: CardId }) => void,
-    deleteDashboard:        (dashboardId: DashboardId) => void,
+    archiveDashboard:        (dashboardId: DashboardId) => void,
     fetchCards:             (filterMode?: string) => void,
     fetchDashboard:         (dashboardId: DashboardId, queryParams: ?QueryParams) => void,
     fetchRevisions:         ({ entity: string, id: number }) => void,
@@ -87,7 +87,7 @@ export default class DashboardHeader extends Component<*, Props, State> {
         refreshElapsed: PropTypes.number,
 
         addCardToDashboard: PropTypes.func.isRequired,
-        deleteDashboard: PropTypes.func.isRequired,
+        archiveDashboard: PropTypes.func.isRequired,
         fetchCards: PropTypes.func.isRequired,
         fetchDashboard: PropTypes.func.isRequired,
         fetchRevisions: PropTypes.func.isRequired,
@@ -123,9 +123,9 @@ export default class DashboardHeader extends Component<*, Props, State> {
         this.onDoneEditing();
     }
 
-    async onDelete() {
-        await this.props.deleteDashboard(this.props.dashboard.id);
-        this.props.onChangeLocation("/dashboard");
+    async onArchive() {
+        await this.props.archiveDashboard(this.props.dashboard.id);
+        this.props.onChangeLocation("/dashboards");
     }
 
     // 1. fetch revisions
@@ -150,15 +150,15 @@ export default class DashboardHeader extends Component<*, Props, State> {
                 Cancel
             </a>,
             <ModalWithTrigger
-                key="delete"
-                ref="deleteDashboardModal"
+                key="archive"
+                ref="archiveDashboardModal"
                 triggerClasses="Button Button--small"
-                triggerElement="Delete"
+                triggerElement="Archive"
             >
-                <DeleteDashboardModal
+                <ArchiveDashboardModal
                     dashboard={this.props.dashboard}
-                    onClose={() => this.refs.deleteDashboardModal.toggle()}
-                    onDelete={() => this.onDelete()}
+                    onClose={() => this.refs.ArchiveDashboardModal.toggle()}
+                    onArchive={() => this.onArchive()}
                 />
             </ModalWithTrigger>,
             <ActionButton

frontend/src/metabase/dashboard/containers/DashboardApp.jsx

@@ -14,7 +14,7 @@ import { getIsEditing, getIsEditingParameter, getIsDirty, getDashboardComplete,
 import { getUserIsAdmin } from "metabase/selectors/user";
 
 import * as dashboardActions from "../dashboard";
-import {deleteDashboard} from "metabase/dashboards/dashboards"
+import {archiveDashboard} from "metabase/dashboards/dashboards"
 
 const mapStateToProps = (state, props) => {
   return {
@@ -40,7 +40,7 @@ const mapStateToProps = (state, props) => {
 
 const mapDispatchToProps = {
     ...dashboardActions,
-    deleteDashboard,
+    archiveDashboard,
     fetchDatabaseMetadata,
     setErrorPage,
     onChangeLocation: push