Remove bookmarked items from list (#20977)

frontend/src/metabase-types/api/bookmark.ts

 export type BookmarkableEntities = "card" | "collection";
 
-interface Bookmark {
+export interface Bookmark {
   id: string;
+  item_id: string;
   card_id: string;
   name: string;
   type: BookmarkableEntities;

frontend/src/metabase/collections/components/CollectionSidebar/Bookmarks/Bookmarks.styled.jsx

 import styled from "@emotion/styled";
 
+import { color } from "metabase/lib/colors";
 import { space } from "metabase/styled-components/theme";
 
 import Icon from "metabase/components/Icon";
@@ -13,8 +14,32 @@ export const BookmarkTypeIcon = styled(Icon)`
   opacity: 0.5;
 `;
 
-export const BookmarkLinkRoot = styled.div`
+export const BookmarkListRoot = styled.div`
   margin: ${space(2)} 0;
 `;
 
+export const BookmarkContainer = styled.div`
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+
+  &:hover {
+    background: ${color("bg-medium")};
+
+    button {
+      opacity: 0.5;
+    }
+  }
+
+  button {
+    opacity: 0;
+    color: ${color("brand")};
+    cursor: pointer;
+    padding: ${space(1)};
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+`;
+
 export default CollectionSidebarBookmarksRoot;

frontend/src/metabase/collections/components/CollectionSidebar/Bookmarks/Bookmarks.tsx

@@ -3,16 +3,19 @@ import { t } from "ttag";
 
 import * as Urls from "metabase/lib/urls";
 
+import Icon from "metabase/components/Icon";
 import Link from "metabase/collections/components/CollectionSidebar/CollectionSidebarLink";
+import Tooltip from "metabase/components/Tooltip";
 import { LabelContainer } from "../Collections/CollectionsList/CollectionsList.styled";
 import BookmarksRoot, {
-  BookmarkLinkRoot,
+  BookmarkContainer,
+  BookmarkListRoot,
   BookmarkTypeIcon,
 } from "./Bookmarks.styled";
 
 import { SidebarHeading } from "metabase/collections/components/CollectionSidebar/CollectionSidebar.styled";
 
-import { BookmarkableEntities, Bookmarks } from "metabase-types/api";
+import { Bookmark, BookmarkableEntities, Bookmarks } from "metabase-types/api";
 
 interface LabelProps {
   name: string;
@@ -21,6 +24,7 @@ interface LabelProps {
 
 interface CollectionSidebarBookmarksProps {
   bookmarks: Bookmarks;
+  deleteBookmark: (id: string, type: string) => void;
 }
 
 function getIconForEntityType(type: BookmarkableEntities) {
@@ -45,25 +49,38 @@ const Label = ({ name, type }: LabelProps) => {
 
 const CollectionSidebarBookmarks = ({
   bookmarks,
+  deleteBookmark,
 }: CollectionSidebarBookmarksProps) => {
   if (bookmarks.length === 0) {
     return null;
   }
 
+  const handleDeleteBookmark = ({ item_id: id, type }: Bookmark) => {
+    deleteBookmark(id, type);
+  };
+
   return (
     <BookmarksRoot>
       <SidebarHeading>{t`Bookmarks`}</SidebarHeading>
 
-      <BookmarkLinkRoot>
-        {bookmarks.map(({ id, name, type }, index) => {
+      <BookmarkListRoot>
+        {bookmarks.map((bookmark, index) => {
+          const { id, name, type } = bookmark;
           const url = Urls.bookmark({ id, name, type });
           return (
-            <Link key={`bookmark-${id}`} to={url}>
-              <Label name={name} type={type} />
-            </Link>
+            <BookmarkContainer key={`bookmark-${id}`}>
+              <Link to={url}>
+                <Label name={name} type={type} />
+              </Link>
+              <button onClick={() => handleDeleteBookmark(bookmark)}>
+                <Tooltip tooltip={t`Remove bookmark`} placement="bottom">
+                  <Icon name="bookmark" />
+                </Tooltip>
+              </button>
+            </BookmarkContainer>
           );
         })}
-      </BookmarkLinkRoot>
+      </BookmarkListRoot>
     </BookmarksRoot>
   );
 };

frontend/src/metabase/collections/containers/CollectionContent.jsx

@@ -43,8 +43,8 @@ function mapStateToProps(state) {
 }
 
 const mapDispatchToProps = {
-  createBookmark: id => Bookmark.actions.create({ id: `collection-${id}` }),
-  deleteBookmark: id => Bookmark.actions.delete({ id: `collection-${id}` }),
+  createBookmark: id => Bookmark.actions.create({ id, type: "collection" }),
+  deleteBookmark: id => Bookmark.actions.delete({ id, type: "collection" }),
 };
 
 function CollectionContent({

frontend/src/metabase/collections/containers/CollectionSidebar/CollectionSidebar.jsx

@@ -35,6 +35,10 @@ const collectionEntityQuery = {
   loadingAndErrorWrapper: false,
 };
 
+const mapDispatchToProps = {
+  deleteBookmark: (id, type) => Bookmark.actions.delete({ id, type }),
+};
+
 function mapStateToProps(state) {
   return {
     currentUser: getUser(state),
@@ -46,6 +50,7 @@ CollectionSidebar.propTypes = {
   collectionId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   collections: PropTypes.arrayOf(PropTypes.object).isRequired,
   bookmarks: PropTypes.arrayOf(PropTypes.object),
+  deleteBookmark: PropTypes.func.isRequired,
   isRoot: PropTypes.bool,
   allFetched: PropTypes.bool,
   loading: PropTypes.bool,
@@ -59,6 +64,7 @@ function CollectionSidebar({
   currentUser,
   collectionId,
   collections,
+  deleteBookmark,
   isRoot,
   allFetched,
   loading,
@@ -104,7 +110,7 @@ function CollectionSidebar({
     >
       {allFetched ? (
         <React.Fragment>
-          <Bookmarks bookmarks={bookmarks} />
+          <Bookmarks bookmarks={bookmarks} deleteBookmark={deleteBookmark} />
 
           {bookmarks.length > 0 && (
             <SidebarHeading>{t`Collections`}</SidebarHeading>
@@ -145,5 +151,5 @@ function LoadingView() {
 export default _.compose(
   Bookmark.loadList(),
   Collection.loadList(collectionEntityQuery),
-  connect(mapStateToProps),
+  connect(mapStateToProps, mapDispatchToProps),
 )(CollectionSidebar);