diff --git a/frontend/src/metabase/components/CollectionLanding.jsx b/frontend/src/metabase/components/CollectionLanding.jsx index 2c12107b9feaec169069391e095260c544de41a4..45df29d0b935b3c426739c4e5786c7c54315cad9 100644 --- a/frontend/src/metabase/components/CollectionLanding.jsx +++ b/frontend/src/metabase/components/CollectionLanding.jsx @@ -4,7 +4,7 @@ import { t } from "c-3po"; import { connect } from "react-redux"; import _ from "underscore"; import listSelect from "metabase/hoc/ListSelect"; -import BulkActionBar from "metabase/components/BulkActionBar" +import BulkActionBar from "metabase/components/BulkActionBar"; import * as Urls from "metabase/lib/urls"; import { normal } from "metabase/lib/colors"; @@ -96,7 +96,13 @@ class DefaultLanding extends React.Component { }; render() { - const { collectionId, list, onToggleSelected, selection, selected } = this.props; + const { + collectionId, + list, + onToggleSelected, + selection, + selected, + } = this.props; // Show the const showCollectionList = collectionId === "root"; @@ -189,29 +195,38 @@ class DefaultLanding extends React.Component { name={item.getName()} iconName={item.getIcon()} iconColor={item.getColor()} + isFavorite={ + item.getFavorited && item.getFavorited() + } onFavorite={ item.setFavorited ? () => item.setFavorited(true) : null } - isFavorite={ - item.getFavorited && item.getFavorited() - } onPin={ collection.can_write && item.setPinned ? () => item.setPinned(true) : null } + onMove={ + collection.can_write + ? () => { + alert( + "FIXME: move not yet implemented!", + ); + } + : null + } + onArchive={ + collection.can_write && item.setArchived + ? () => item.setArchived(true) + : null + } selected={selection.has(item)} onToggleSelected={ev => { ev.preventDefault(); onToggleSelected(item); }} - onArchived={ - item.setArchived - ? () => item.setArchived(true) - : null - } /> </Link> </Box> diff --git a/frontend/src/metabase/components/EntityItem.jsx b/frontend/src/metabase/components/EntityItem.jsx index e6e4ccafffe55b3235277b1c26fca7eb3b63a59f..6a9aca3530693a3734b05705098fbd717f952d30 100644 --- a/frontend/src/metabase/components/EntityItem.jsx +++ b/frontend/src/metabase/components/EntityItem.jsx @@ -1,8 +1,8 @@ import React from "react"; import { t } from "c-3po"; import EntityMenu from "metabase/components/EntityMenu"; -import Swapper from "metabase/components/Swapper" -import IconWrapper from "metabase/components/IconWrapper" +import Swapper from "metabase/components/Swapper"; +import IconWrapper from "metabase/components/IconWrapper"; import { Flex, Box, Truncate } from "rebass"; @@ -27,37 +27,51 @@ const EntityItem = ({ name, iconName, iconColor, - item, isFavorite, onPin, onFavorite, + onMove, + onArchive, selected, onToggleSelected, selectable, - showSelect + showSelect, }) => { + const actions = [ + onPin && { + title: t`Pin this item`, + icon: "pin", + action: onPin, + }, + onMove && { + title: t`Move this item`, + icon: "move", + action: onMove, + }, + onArchive && { + title: t`Archive`, + icon: "archive", + action: onArchive, + }, + ].filter(action => action); + return ( <EntityItemWrapper py={2} px={2} className="hover-parent hover--visibility"> - <IconWrapper - p={1} - mr={1} - align="center" - justify="center" - > - { selectable ? ( - <Swapper - startSwapped={showSelect} - defaultElement={<Icon name={iconName} color={iconColor} />} - swappedElement={ - <CheckBox - checked={selected} - onChange={(ev) => onToggleSelected(ev)} - /> - } - /> - ) : ( - <Icon name={iconName} color={iconColor} /> - )} + <IconWrapper p={1} mr={1} align="center" justify="center"> + {selectable ? ( + <Swapper + startSwapped={showSelect} + defaultElement={<Icon name={iconName} color={iconColor} />} + swappedElement={ + <CheckBox + checked={selected} + onChange={ev => onToggleSelected(ev)} + /> + } + /> + ) : ( + <Icon name={iconName} color={iconColor} /> + )} </IconWrapper> <h3> <Truncate>{name}</Truncate> @@ -69,43 +83,23 @@ const EntityItem = ({ className="hover-child" onClick={e => e.preventDefault()} > - { onFavorite && ( + {(onFavorite || isFavorite) && ( <Icon name={isFavorite ? "star" : "staroutline"} mr={1} - onClick={() => onFavorite()} + onClick={onFavorite} /> )} - <EntityMenu - triggerIcon="ellipsis" - items={[ - { - title: t`Pin this item`, - icon: "pin", - action: () => onPin(item), - }, - { - title: t`Move this item`, - icon: "move", - action: () => onPin(item), - }, - { - title: t`Archive`, - icon: "archive", - action: () => { - item.setArchived(true) - } - }, - ]} - /> + {actions.length > 0 && ( + <EntityMenu triggerIcon="ellipsis" items={actions} /> + )} </Flex> </EntityItemWrapper> ); }; - EntityItem.defaultProps = { - selectable: false -} + selectable: false, +}; export default EntityItem;