Add ability to delete a dashboard from the organizations page

ui/src/organizations/components/DashboardList.tsx

@@ -1,20 +1,17 @@
 // Libraries
 import React, {PureComponent} from 'react'
-import {Link} from 'react-router'
-import moment from 'moment'
 
 // Components
 import {IndexList} from 'src/clockface'
+import DashboardRow from 'src/organizations/components/DashboardRow'
 
 // Types
 import {Dashboard} from 'src/types/v2'
 
-// Constants
-import {UPDATED_AT_TIME_FORMAT} from 'src/dashboards/constants'
-
 interface Props {
   dashboards: Dashboard[]
   emptyState: JSX.Element
+  onDeleteDashboard: (dashboard: Dashboard) => void
 }
 
 export default class DashboardList extends PureComponent<Props> {
@@ -33,15 +30,14 @@ export default class DashboardList extends PureComponent<Props> {
   }
 
   private get rows(): JSX.Element[] {
+    const {onDeleteDashboard} = this.props
+
     return this.props.dashboards.map(d => (
-      <IndexList.Row key={d.id}>
-        <IndexList.Cell>
-          <Link to={`/dashboards/${d.id}`}>{d.name}</Link>
-        </IndexList.Cell>
-        <IndexList.Cell revealOnHover={true}>
-          {moment(d.meta.updatedAt).format(UPDATED_AT_TIME_FORMAT)}
-        </IndexList.Cell>
-      </IndexList.Row>
+      <DashboardRow
+        dashboard={d}
+        key={d.id}
+        onDeleteDashboard={onDeleteDashboard}
+      />
     ))
   }
 }

ui/src/organizations/components/DashboardRow.tsx

@@ -0,0 +1,45 @@
+// Libraries
+import React, {PureComponent} from 'react'
+import {Link} from 'react-router'
+import moment from 'moment'
+
+// Components
+import {IndexList, Alignment, ComponentSize} from 'src/clockface'
+import ConfirmationButton from 'src/clockface/components/confirmation_button/ConfirmationButton'
+
+// Types
+import {Dashboard} from 'src/types/v2'
+
+// Constants
+import {UPDATED_AT_TIME_FORMAT} from 'src/dashboards/constants'
+
+interface Props {
+  dashboard: Dashboard
+  onDeleteDashboard: (dashboard: Dashboard) => void
+}
+
+export default class DashboardRow extends PureComponent<Props> {
+  public render() {
+    const {dashboard, onDeleteDashboard} = this.props
+
+    return (
+      <IndexList.Row key={dashboard.id}>
+        <IndexList.Cell>
+          <Link to={`/dashboards/${dashboard.id}`}>{dashboard.name}</Link>
+        </IndexList.Cell>
+        <IndexList.Cell revealOnHover={true}>
+          {moment(dashboard.meta.updatedAt).format(UPDATED_AT_TIME_FORMAT)}
+        </IndexList.Cell>
+        <IndexList.Cell revealOnHover={true} alignment={Alignment.Right}>
+          <ConfirmationButton
+            size={ComponentSize.ExtraSmall}
+            text="Delete"
+            confirmText="Confirm"
+            onConfirm={onDeleteDashboard}
+            returnValue={dashboard}
+          />
+        </IndexList.Cell>
+      </IndexList.Row>
+    )
+  }
+}

ui/src/organizations/components/Dashboards.tsx

@@ -2,6 +2,9 @@
 import React, {PureComponent, ChangeEvent} from 'react'
 import _ from 'lodash'
 
+// APIs
+import {deleteDashboard} from 'src/dashboards/apis'
+
 // Components
 import TabbedPageHeader from 'src/shared/components/tabbed_page/TabbedPageHeader'
 import {ComponentSize, EmptyState, Input, IconFont} from 'src/clockface'
@@ -17,6 +20,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 interface Props {
   dashboards: Dashboard[]
   orgName: string
+  onChange: () => void
 }
 
 interface State {
@@ -53,7 +57,13 @@ export default class Dashboards extends PureComponent<Props, State> {
           searchKeys={['name']}
           list={dashboards}
         >
-          {ds => <DashboardList dashboards={ds} emptyState={this.emptyState} />}
+          {ds => (
+            <DashboardList
+              dashboards={ds}
+              emptyState={this.emptyState}
+              onDeleteDashboard={this.handleDeleteDashboard}
+            />
+          )}
         </FilterList>
       </>
     )
@@ -67,6 +77,11 @@ export default class Dashboards extends PureComponent<Props, State> {
     this.setState({searchTerm: e.target.value})
   }
 
+  private handleDeleteDashboard = async (dashboard: Dashboard) => {
+    await deleteDashboard(dashboard)
+    this.props.onChange()
+  }
+
   private get emptyState(): JSX.Element {
     const {orgName} = this.props
     const {searchTerm} = this.state

ui/src/organizations/containers/OrganizationView.tsx

@@ -125,9 +125,13 @@ class OrganizationView extends PureComponent<Props> {
                   organization={org}
                   fetcher={getDashboards}
                 >
-                  {(dashboards, loading) => (
+                  {(dashboards, loading, fetch) => (
                     <Spinner loading={loading}>
-                      <Dashboards dashboards={dashboards} orgName={org.name} />
+                      <Dashboards
+                        dashboards={dashboards}
+                        orgName={org.name}
+                        onChange={fetch}
+                      />
                     </Spinner>
                   )}
                 </GetOrgResources>