feat: unpinning an item from the resource location (#4019)

* feat: enable to unpin a notebook from notebooks page

* feat: hide the popover when pinned a task or a dashboard

* feat: enable to unpin a task

* feat: enable to unpin a dashboard

* chore: update comments to be clear

* chore: add window.location.reload in task card

* fix: update pinned item list after a task is just pinned

* fix: update pinned item list after a dashboard is just pinned

* fix: add onPinTask in TaskCard.test.tsx

* refactor: change function name to onPinDashboard

* refactor: move code into onAddPinnedItem and onDeletePinnedItem

* refactor: move code into handleAddPinnedItem and handleDeletePinnedItem

* refactor: move duplicated code into the same function

* refactor: move unpin logic to parents - DashboardCards and DashboardCardsPaginated

* refactor: move pin logic to parents - DashboardCards and DashboardCardsPaginated

* refactor: move unpin logic to parent - TasksList

* refactor: move pin logic to parent - TasksList

* test: fix missing function declaration

* fix: remove async away from the func that did not use await

Author: appletreeisyellow

src/dashboards/components/dashboard_index/DashboardCard.tsx

@@ -47,14 +47,10 @@ import {
 import {notify} from 'src/shared/actions/notifications'
 
 import {
-  addPinnedItem,
   deletePinnedItemByParam,
-  PinnedItemTypes,
   updatePinnedItemByParam,
 } from 'src/shared/contexts/pinneditems'
 
-import {getMe} from 'src/me/selectors'
-import {getOrg} from 'src/organizations/selectors'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 import {CLOUD} from 'src/shared/constants'
 import {PROJECT_NAME} from 'src/flows'
@@ -66,6 +62,12 @@ interface OwnProps {
   updatedAt: string
   labels: string[]
   onFilterChange: (searchTerm: string) => void
+  onPinDashboard: (
+    dashboardID: string,
+    name: string,
+    description: string
+  ) => void
+  onUnpinDashboard: (DashboardID: string) => void
   isPinned: boolean
 }
 
@@ -129,7 +131,7 @@ class DashboardCard extends PureComponent<Props> {
         updatePinnedItemByParam(id, {name})
         this.props.sendNotification(pinnedItemSuccess('dashboard', 'updated'))
       } catch (err) {
-        this.props.sendNotification(pinnedItemFailure(err.message, 'dashboard'))
+        this.props.sendNotification(pinnedItemFailure(err.message, 'update'))
       }
     }
   }
@@ -141,21 +143,11 @@ class DashboardCard extends PureComponent<Props> {
   }
 
   private handlePinDashboard = () => {
-    try {
-      addPinnedItem({
-        orgID: this.props.org.id,
-        userID: this.props.me.id,
-        metadata: {
-          dashboardID: this.props.id,
-          name: this.props.name,
-          description: this.props.description,
-        },
-
-        type: PinnedItemTypes.Dashboard,
-      })
-      this.props.sendNotification(pinnedItemSuccess('dashboard', 'added'))
-    } catch (err) {
-      this.props.sendNotification(pinnedItemFailure(err.message, 'dashboard'))
+    const {id, name, description, isPinned} = this.props
+    if (isPinned) {
+      this.props.onUnpinDashboard(id)
+    } else {
+      this.props.onPinDashboard(id, name, description)
     }
   }
 
@@ -185,7 +177,7 @@ class DashboardCard extends PureComponent<Props> {
           appearance={Appearance.Outline}
           enableDefaultStyles={false}
           style={minWidth}
-          contents={() => (
+          contents={onHide => (
             <List>
               <List.Item
                 onClick={this.handleExport}
@@ -205,13 +197,15 @@ class DashboardCard extends PureComponent<Props> {
               </List.Item>
               {isFlagEnabled('pinnedItems') && CLOUD && (
                 <List.Item
-                  onClick={this.handlePinDashboard}
-                  disabled={this.props.isPinned}
+                  onClick={() => {
+                    this.handlePinDashboard()
+                    onHide()
+                  }}
                   size={ComponentSize.Small}
                   style={fontWeight}
                   testID="context-pin-dashboard"
                 >
-                  Pin
+                  {this.props.isPinned ? 'Unpin' : 'Pin'}
                 </List.Item>
               )}
             </List>
@@ -260,7 +254,7 @@ class DashboardCard extends PureComponent<Props> {
     try {
       updatePinnedItemByParam(id, {description})
     } catch (err) {
-      this.props.sendNotification(pinnedItemFailure(err.message, 'dashboard'))
+      this.props.sendNotification(pinnedItemFailure(err.message, 'update'))
     }
   }
 
@@ -293,13 +287,9 @@ const mdtp = {
 
 const mstp = (state: AppState, props: OwnProps) => {
   const dashboard = state.resources.dashboards.byID[props.id]
-  const me = getMe(state)
-  const org = getOrg(state)
 
   return {
     dashboard,
-    me,
-    org,
   }
 }
 const connector = connect(mstp, mdtp)

src/dashboards/components/dashboard_index/DashboardCards.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, {PureComponent} from 'react'
-import {connect} from 'react-redux'
+import {connect, ConnectedProps} from 'react-redux'
 import memoizeOne from 'memoize-one'
 
 // Components
@@ -10,16 +10,31 @@ import AssetLimitAlert from 'src/cloud/components/AssetLimitAlert'
 
 // Selectors
 import {getSortedResources, SortTypes} from 'src/shared/utils/sort'
+import {getMe} from 'src/me/selectors'
+import {getOrg} from 'src/organizations/selectors'
 
 // Types
 import {AppState, Dashboard, RemoteDataState} from 'src/types'
 import {Sort} from 'src/clockface'
 import {LimitStatus} from 'src/cloud/actions/limits'
 
+// Contexts
+import {
+  addPinnedItem,
+  deletePinnedItemByParam,
+  PinnedItemTypes,
+} from 'src/shared/contexts/pinneditems'
+
 // Utils
 import {extractDashboardLimits} from 'src/cloud/utils/limits'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 import {CLOUD} from 'src/shared/constants'
+import {notify} from 'src/shared/actions/notifications'
+
+import {
+  pinnedItemFailure,
+  pinnedItemSuccess,
+} from 'src/shared/copy/notifications'
 
 let getPinnedItems
 if (CLOUD) {
@@ -38,7 +53,10 @@ interface OwnProps {
   onFilterChange: (searchTerm: string) => void
 }
 
-class DashboardCards extends PureComponent<OwnProps & StateProps> {
+type ReduxProps = ConnectedProps<typeof connector>
+type Props = OwnProps & StateProps & ReduxProps
+
+class DashboardCards extends PureComponent<Props> {
   private _observer
   private _isMounted = true
   private _spinner
@@ -55,18 +73,9 @@ class DashboardCards extends PureComponent<OwnProps & StateProps> {
 
   public componentDidMount() {
     if (isFlagEnabled('pinnedItems') && CLOUD) {
-      getPinnedItems()
-        .then(res => {
-          if (this._isMounted) {
-            this.setState(prev => ({...prev, pinnedItems: res, windowSize: 15}))
-          }
-        })
-        .catch(err => {
-          console.error(err)
-        })
-    } else {
-      this.setState(prev => ({...prev, windowSize: 15}))
+      this.updatePinnedItems()
     }
+    this.setState(prev => ({...prev, windowSize: 15}))
   }
 
   public componentWillUnmount() {
@@ -110,6 +119,53 @@ class DashboardCards extends PureComponent<OwnProps & StateProps> {
     }
   }
 
+  public updatePinnedItems = () => {
+    getPinnedItems()
+      .then(res => {
+        if (this._isMounted) {
+          this.setState(prev => ({...prev, pinnedItems: res}))
+        }
+      })
+      .catch(err => console.error(err))
+  }
+
+  public handlePinDashboard = async (
+    dashboardID: string,
+    name: string,
+    description: string
+  ) => {
+    const {org, me} = this.props
+
+    // add to pinned item list
+    try {
+      await addPinnedItem({
+        orgID: org.id,
+        userID: me.id,
+        metadata: {
+          dashboardID,
+          name,
+          description,
+        },
+        type: PinnedItemTypes.Dashboard,
+      })
+      this.props.sendNotification(pinnedItemSuccess('dashboard', 'added'))
+      this.updatePinnedItems()
+    } catch (err) {
+      this.props.sendNotification(pinnedItemFailure(err.message, 'add'))
+    }
+  }
+
+  public handleUnpinDashboard = async (dashboardID: string) => {
+    // delete from pinned item list
+    try {
+      await deletePinnedItemByParam(dashboardID)
+      this.props.sendNotification(pinnedItemSuccess('dashboard', 'deleted'))
+      this.updatePinnedItems()
+    } catch (err) {
+      this.props.sendNotification(pinnedItemFailure(err.message, 'delete'))
+    }
+  }
+
   public render() {
     const {
       dashboards,
@@ -142,6 +198,8 @@ class DashboardCards extends PureComponent<OwnProps & StateProps> {
                 updatedAt={meta.updatedAt}
                 description={description}
                 onFilterChange={onFilterChange}
+                onPinDashboard={this.handlePinDashboard}
+                onUnpinDashboard={this.handleUnpinDashboard}
                 isPinned={
                   !!pinnedItems.find(item => item?.metadata.dashboardID === id)
                 }
@@ -166,10 +224,21 @@ class DashboardCards extends PureComponent<OwnProps & StateProps> {
   }
 }
 
+const mdtp = {
+  sendNotification: notify,
+}
+
 const mstp = (state: AppState) => {
+  const me = getMe(state)
+  const org = getOrg(state)
+
   return {
     limitStatus: extractDashboardLimits(state),
+    me,
+    org,
   }
 }
 
-export default connect(mstp)(DashboardCards)
+const connector = connect(mstp, mdtp)
+
+export default connector(DashboardCards)