From 0df91798977dc5fb54c8846cd0d03cc795d345e0 Mon Sep 17 00:00:00 2001
From: Palak Bhojani <palak@influxdata.com>
Date: Thu, 7 Feb 2019 12:30:37 -0800
Subject: [PATCH] Update Org page to include Dashboards components

---
 .../components/dashboard_index/Contents.tsx   |   3 +
 .../components/dashboard_index/Table.tsx      |   3 +
 .../components/dashboard_index/TableRow.tsx   |  28 +-
 .../components/dashboard_index/TableRows.tsx  |   3 +
 .../components/DashboardList.tsx              | 101 ------
 .../organizations/components/DashboardRow.tsx |  93 -----
 .../organizations/components/Dashboards.tsx   | 118 ------
 .../components/OrgDashboardIndex.tsx          | 342 ++++++++++++++++++
 .../containers/OrganizationView.tsx           |   5 +-
 ui/src/shared/components/EditableName.tsx     |   4 +-
 10 files changed, 381 insertions(+), 319 deletions(-)
 delete mode 100644 ui/src/organizations/components/DashboardList.tsx
 delete mode 100644 ui/src/organizations/components/DashboardRow.tsx
 delete mode 100644 ui/src/organizations/components/Dashboards.tsx
 create mode 100644 ui/src/organizations/components/OrgDashboardIndex.tsx

diff --git a/ui/src/dashboards/components/dashboard_index/Contents.tsx b/ui/src/dashboards/components/dashboard_index/Contents.tsx
index 985bdd59489..8710237caa4 100644
--- a/ui/src/dashboards/components/dashboard_index/Contents.tsx
+++ b/ui/src/dashboards/components/dashboard_index/Contents.tsx
@@ -25,6 +25,7 @@ interface Props {
   onEditLabels: (dashboard: Dashboard) => void
   notify: (message: Notification) => void
   searchTerm: string
+  showInlineEdit?: boolean
 }
 
 @ErrorHandling
@@ -41,6 +42,7 @@ export default class DashboardsIndexContents extends Component<Props> {
       onEditLabels,
       searchTerm,
       orgs,
+      showInlineEdit,
     } = this.props
 
     return (
@@ -57,6 +59,7 @@ export default class DashboardsIndexContents extends Component<Props> {
           onUpdateDashboard={onUpdateDashboard}
           onEditLabels={onEditLabels}
           orgs={orgs}
+          showInlineEdit={showInlineEdit}
         />
       </div>
     )
diff --git a/ui/src/dashboards/components/dashboard_index/Table.tsx b/ui/src/dashboards/components/dashboard_index/Table.tsx
index b065558fc63..1642621781b 100644
--- a/ui/src/dashboards/components/dashboard_index/Table.tsx
+++ b/ui/src/dashboards/components/dashboard_index/Table.tsx
@@ -32,6 +32,7 @@ interface Props {
   onSetDefaultDashboard: (dashboardLink: string) => void
   onEditLabels: (dashboard: Dashboard) => void
   orgs: Organization[]
+  showInlineEdit?: boolean
 }
 
 interface DatedDashboard extends Dashboard {
@@ -108,6 +109,7 @@ class DashboardsTable extends PureComponent<Props & WithRouterProps, State> {
       onUpdateDashboard,
       onEditLabels,
       orgs,
+      showInlineEdit,
     } = this.props
 
     const {sortKey, sortDirection} = this.state
@@ -128,6 +130,7 @@ class DashboardsTable extends PureComponent<Props & WithRouterProps, State> {
               onUpdateDashboard={onUpdateDashboard}
               onEditLabels={onEditLabels}
               orgs={orgs}
+              showInlineEdit={showInlineEdit}
             />
           )}
         </SortingHat>
diff --git a/ui/src/dashboards/components/dashboard_index/TableRow.tsx b/ui/src/dashboards/components/dashboard_index/TableRow.tsx
index 81c2d83487d..83fb89a5cbb 100644
--- a/ui/src/dashboards/components/dashboard_index/TableRow.tsx
+++ b/ui/src/dashboards/components/dashboard_index/TableRow.tsx
@@ -27,6 +27,7 @@ import {
   UPDATED_AT_TIME_FORMAT,
   DEFAULT_DASHBOARD_NAME,
 } from 'src/dashboards/constants'
+import EditableName from 'src/shared/components/EditableName'
 
 interface Props {
   dashboard: Dashboard
@@ -36,6 +37,7 @@ interface Props {
   onExportDashboard: (dashboard: Dashboard) => void
   onUpdateDashboard: (dashboard: Dashboard) => void
   onEditLabels: (dashboard: Dashboard) => void
+  showInlineEdit?: boolean
 }
 
 export default class DashboardsIndexTableRow extends PureComponent<Props> {
@@ -55,9 +57,7 @@ export default class DashboardsIndexTableRow extends PureComponent<Props> {
               stackChildren={Stack.Columns}
               align={Alignment.Left}
             >
-              <Link className={this.nameClassName} to={`/dashboards/${id}`}>
-                {this.name}
-              </Link>
+              {this.resourceNames}
               {this.labels}
             </ComponentSpacer>
             <EditableDescription
@@ -91,6 +91,28 @@ export default class DashboardsIndexTableRow extends PureComponent<Props> {
     )
   }
 
+  private get resourceNames(): JSX.Element {
+    const {showInlineEdit, dashboard} = this.props
+    if (showInlineEdit) {
+      return (
+        <EditableName
+          onUpdate={this.handleUpdateDashboard}
+          name={dashboard.name}
+          hrefValue={`/dashboards/${dashboard.id}`}
+        />
+      )
+    }
+    return (
+      <Link className={this.nameClassName} to={`/dashboards/${dashboard.id}`}>
+        {this.name}
+      </Link>
+    )
+  }
+
+  private handleUpdateDashboard = (name: string) => {
+    this.props.onUpdateDashboard({...this.props.dashboard, name})
+  }
+
   private get labels(): JSX.Element {
     const {dashboard} = this.props
 
diff --git a/ui/src/dashboards/components/dashboard_index/TableRows.tsx b/ui/src/dashboards/components/dashboard_index/TableRows.tsx
index 9cd75e3d7a4..450d8135c1f 100644
--- a/ui/src/dashboards/components/dashboard_index/TableRows.tsx
+++ b/ui/src/dashboards/components/dashboard_index/TableRows.tsx
@@ -15,6 +15,7 @@ interface Props {
   onUpdateDashboard: (dashboard: Dashboard) => void
   onEditLabels: (dashboard: Dashboard) => void
   orgs: Organization[]
+  showInlineEdit?: boolean
 }
 
 export default class DashboardsIndexTableRows extends PureComponent<Props> {
@@ -27,6 +28,7 @@ export default class DashboardsIndexTableRows extends PureComponent<Props> {
       onUpdateDashboard,
       onEditLabels,
       orgs,
+      showInlineEdit,
     } = this.props
 
     return dashboards.map(d => (
@@ -39,6 +41,7 @@ export default class DashboardsIndexTableRows extends PureComponent<Props> {
         onUpdateDashboard={onUpdateDashboard}
         onEditLabels={onEditLabels}
         orgs={orgs}
+        showInlineEdit={showInlineEdit}
       />
     ))
   }
diff --git a/ui/src/organizations/components/DashboardList.tsx b/ui/src/organizations/components/DashboardList.tsx
deleted file mode 100644
index ba6af0155db..00000000000
--- a/ui/src/organizations/components/DashboardList.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-// Libraries
-import React, {PureComponent} from 'react'
-import {InjectedRouter} from 'react-router'
-import {connect} from 'react-redux'
-
-// Components
-import {IndexList} from 'src/clockface'
-import DashboardRow from 'src/organizations/components/DashboardRow'
-
-// APIs
-import {cloneDashboard} from 'src/dashboards/apis/v2'
-
-// Constants
-import {dashboardCreateFailed} from 'src/shared/copy/notifications'
-
-// Actions
-import {notify as notifyAction} from 'src/shared/actions/notifications'
-
-// Types
-import {Notification} from 'src/types/notifications'
-import {Dashboard} from 'src/types/v2'
-
-// Decorators
-import {ErrorHandling} from 'src/shared/decorators/errors'
-
-interface DispatchProps {
-  notify: (message: Notification) => void
-}
-
-interface OwnProps {
-  router: InjectedRouter
-  orgID: string
-  dashboards: Dashboard[]
-  emptyState: JSX.Element
-  onDeleteDashboard: (dashboard: Dashboard) => void
-  onUpdateDashboard: (dashboard: Dashboard) => void
-}
-
-type Props = DispatchProps & OwnProps
-
-@ErrorHandling
-class DashboardList extends PureComponent<Props> {
-  public render() {
-    return (
-      <IndexList>
-        <IndexList.Header>
-          <IndexList.HeaderCell columnName="Name" width="50%" />
-          <IndexList.HeaderCell columnName="Modified" width="25%" />
-          <IndexList.HeaderCell columnName="" width="25%" />
-        </IndexList.Header>
-        <IndexList.Body columnCount={2} emptyState={this.props.emptyState}>
-          {this.rows}
-        </IndexList.Body>
-      </IndexList>
-    )
-  }
-
-  private handleCloneDashboard = async (
-    dashboard: Dashboard
-  ): Promise<void> => {
-    const {router, notify, orgID, dashboards} = this.props
-    const name = `${dashboard.name} (clone)`
-    try {
-      const data = await cloneDashboard(
-        {
-          ...dashboard,
-          name,
-          orgID,
-        },
-        dashboards
-      )
-
-      router.push(`/dashboards/${data.id}`)
-    } catch (error) {
-      notify(dashboardCreateFailed())
-    }
-  }
-
-  private get rows(): JSX.Element[] {
-    const {onDeleteDashboard, onUpdateDashboard} = this.props
-
-    return this.props.dashboards.map(d => (
-      <DashboardRow
-        dashboard={d}
-        key={d.id}
-        onDeleteDashboard={onDeleteDashboard}
-        onUpdateDashboard={onUpdateDashboard}
-        onCloneDashboard={this.handleCloneDashboard}
-      />
-    ))
-  }
-}
-
-const mdtp: DispatchProps = {
-  notify: notifyAction,
-}
-
-export default connect<null, DispatchProps, OwnProps>(
-  null,
-  mdtp
-)(DashboardList)
diff --git a/ui/src/organizations/components/DashboardRow.tsx b/ui/src/organizations/components/DashboardRow.tsx
deleted file mode 100644
index 54aa42541e5..00000000000
--- a/ui/src/organizations/components/DashboardRow.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-// Libraries
-import React, {PureComponent} from 'react'
-import moment from 'moment'
-
-// Components
-import {
-  IndexList,
-  Alignment,
-  ComponentSize,
-  ConfirmationButton,
-  ComponentSpacer,
-  Stack,
-  Button,
-  IconFont,
-  ComponentColor,
-} from 'src/clockface'
-
-// Types
-import {Dashboard} from 'src/types/v2'
-
-// Constants
-import {UPDATED_AT_TIME_FORMAT} from 'src/dashboards/constants'
-import EditableName from 'src/shared/components/EditableName'
-
-interface Props {
-  dashboard: Dashboard
-  onDeleteDashboard: (dashboard: Dashboard) => void
-  onUpdateDashboard: (dashboard: Dashboard) => void
-  onCloneDashboard: (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>
-          <EditableName
-            onUpdate={this.handleUpdateDashboard}
-            name={dashboard.name}
-            hrefValue={`/dashboards/${dashboard.id}`}
-          />
-        </IndexList.Cell>
-        {this.lastModifiedCell}
-        <IndexList.Cell revealOnHover={true} alignment={Alignment.Right}>
-          <ComponentSpacer stackChildren={Stack.Columns} align={Alignment.Left}>
-            <Button
-              size={ComponentSize.ExtraSmall}
-              color={ComponentColor.Secondary}
-              text="Clone"
-              icon={IconFont.Duplicate}
-              titleText="Create a duplicate copy of this Dashboard"
-              onClick={this.handleCloneDashboard}
-            />
-            <ConfirmationButton
-              size={ComponentSize.ExtraSmall}
-              text="Delete"
-              confirmText="Confirm"
-              onConfirm={onDeleteDashboard}
-              returnValue={dashboard}
-            />
-          </ComponentSpacer>
-        </IndexList.Cell>
-      </IndexList.Row>
-    )
-  }
-
-  private handleUpdateDashboard = (name: string) => {
-    this.props.onUpdateDashboard({...this.props.dashboard, name})
-  }
-
-  private handleCloneDashboard = (): void => {
-    const {dashboard, onCloneDashboard} = this.props
-
-    onCloneDashboard(dashboard)
-  }
-
-  private get lastModifiedCell(): JSX.Element {
-    const {dashboard} = this.props
-
-    const relativeTimestamp = moment(dashboard.meta.updatedAt).fromNow()
-    const absoluteTimestamp = moment(dashboard.meta.updatedAt).format(
-      UPDATED_AT_TIME_FORMAT
-    )
-
-    return (
-      <IndexList.Cell>
-        <span title={absoluteTimestamp}>{relativeTimestamp}</span>
-      </IndexList.Cell>
-    )
-  }
-}
diff --git a/ui/src/organizations/components/Dashboards.tsx b/ui/src/organizations/components/Dashboards.tsx
deleted file mode 100644
index 65925c4b33c..00000000000
--- a/ui/src/organizations/components/Dashboards.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-// Libraries
-import React, {PureComponent, ChangeEvent} from 'react'
-import {withRouter, WithRouterProps} from 'react-router'
-import _ from 'lodash'
-
-// Components
-import TabbedPageHeader from 'src/shared/components/tabbed_page/TabbedPageHeader'
-import {ComponentSize, EmptyState, Input, IconFont} from 'src/clockface'
-import FilterList from 'src/shared/components/Filter'
-import DashboardList from 'src/organizations/components/DashboardList'
-
-// Types
-import {Dashboard} from 'src/types/v2'
-
-// Decorators
-import {ErrorHandling} from 'src/shared/decorators/errors'
-import {deleteDashboard, updateDashboard} from 'src/dashboards/apis/v2'
-
-interface OwnProps {
-  dashboards: Dashboard[]
-  orgName: string
-  orgID: string
-  onChange: () => void
-}
-
-type Props = OwnProps & WithRouterProps
-
-interface State {
-  searchTerm: string
-}
-
-@ErrorHandling
-class Dashboards extends PureComponent<Props, State> {
-  constructor(props) {
-    super(props)
-    this.state = {
-      searchTerm: '',
-    }
-  }
-
-  public render() {
-    const {searchTerm} = this.state
-    const {dashboards, orgID, router} = this.props
-
-    return (
-      <>
-        <TabbedPageHeader>
-          <Input
-            icon={IconFont.Search}
-            widthPixels={290}
-            value={searchTerm}
-            onBlur={this.handleFilterBlur}
-            onChange={this.handleFilterChange}
-            placeholder="Filter Dashboards..."
-          />
-        </TabbedPageHeader>
-        <FilterList<Dashboard>
-          searchTerm={searchTerm}
-          searchKeys={['name']}
-          list={dashboards}
-        >
-          {ds => (
-            <DashboardList
-              dashboards={ds}
-              emptyState={this.emptyState}
-              onDeleteDashboard={this.handleDeleteDashboard}
-              onUpdateDashboard={this.handleUpdateDashboard}
-              orgID={orgID}
-              router={router}
-            />
-          )}
-        </FilterList>
-      </>
-    )
-  }
-
-  private handleUpdateDashboard = async (dashboard: Dashboard) => {
-    await updateDashboard(dashboard)
-    this.props.onChange()
-  }
-
-  private handleFilterChange = (e: ChangeEvent<HTMLInputElement>): void => {
-    this.setState({searchTerm: e.target.value})
-  }
-
-  private handleFilterBlur = (e: ChangeEvent<HTMLInputElement>): void => {
-    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
-
-    if (_.isEmpty(searchTerm)) {
-      return (
-        <EmptyState size={ComponentSize.Medium}>
-          <EmptyState.Text
-            text={`${orgName} does not own any Dashboards , why not create one?`}
-            highlightWords={['Dashboards']}
-          />
-        </EmptyState>
-      )
-    }
-
-    return (
-      <EmptyState size={ComponentSize.Medium}>
-        <EmptyState.Text text="No Dashboards match your query" />
-      </EmptyState>
-    )
-  }
-}
-
-export default withRouter<OwnProps>(Dashboards)
diff --git a/ui/src/organizations/components/OrgDashboardIndex.tsx b/ui/src/organizations/components/OrgDashboardIndex.tsx
new file mode 100644
index 00000000000..cbf00ff9fb6
--- /dev/null
+++ b/ui/src/organizations/components/OrgDashboardIndex.tsx
@@ -0,0 +1,342 @@
+// Libraries
+import React, {PureComponent, ChangeEvent} from 'react'
+import {InjectedRouter} from 'react-router'
+import {connect} from 'react-redux'
+import {downloadTextFile} from 'src/shared/utils/download'
+import _ from 'lodash'
+
+// Components
+import DashboardsContents from 'src/dashboards/components/dashboard_index/Contents'
+import {Page} from 'src/pageLayout'
+import {
+  OverlayTechnology,
+  Button,
+  ComponentColor,
+  IconFont,
+  Input,
+} from 'src/clockface'
+import ImportDashboardOverlay from 'src/dashboards/components/ImportDashboardOverlay'
+import EditLabelsOverlay from 'src/shared/components/EditLabelsOverlay'
+
+// Utils
+import {getDeep} from 'src/utils/wrappers'
+
+// APIs
+import {createDashboard, cloneDashboard} from 'src/dashboards/apis/v2/'
+
+// Actions
+import {
+  getDashboardsAsync,
+  importDashboardAsync,
+  deleteDashboardAsync,
+  updateDashboardAsync,
+  addDashboardLabelsAsync,
+  removeDashboardLabelsAsync,
+} from 'src/dashboards/actions/v2'
+import {setDefaultDashboard} from 'src/shared/actions/links'
+import {retainRangesDashTimeV1 as retainRangesDashTimeV1Action} from 'src/dashboards/actions/v2/ranges'
+import {notify as notifyAction} from 'src/shared/actions/notifications'
+
+import {
+  dashboardSetDefaultFailed,
+  dashboardExported,
+  dashboardExportFailed,
+  dashboardCreateFailed,
+} from 'src/shared/copy/notifications'
+
+// Constants
+import {DEFAULT_DASHBOARD_NAME} from 'src/dashboards/constants/index'
+
+// Types
+import {Notification} from 'src/types/notifications'
+import {DashboardFile} from 'src/types/v2/dashboards'
+import {Links, Cell, Dashboard, AppState, Organization} from 'src/types/v2'
+
+// Decorators
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
+interface DispatchProps {
+  handleSetDefaultDashboard: typeof setDefaultDashboard
+  handleGetDashboards: typeof getDashboardsAsync
+  handleDeleteDashboard: typeof deleteDashboardAsync
+  handleImportDashboard: typeof importDashboardAsync
+  handleUpdateDashboard: typeof updateDashboardAsync
+  notify: (message: Notification) => void
+  retainRangesDashTimeV1: (dashboardIDs: string[]) => void
+  onAddDashboardLabels: typeof addDashboardLabelsAsync
+  onRemoveDashboardLabels: typeof removeDashboardLabelsAsync
+}
+
+interface StateProps {
+  links: Links
+  dashboards: Dashboard[]
+  orgs: Organization[]
+}
+
+interface OwnProps {
+  dashboards: Dashboard[]
+  router: InjectedRouter
+  onChange: () => void
+  orgName: string
+  orgID: string
+}
+
+type Props = DispatchProps & StateProps & OwnProps
+
+interface State {
+  searchTerm: string
+  isImportingDashboard: boolean
+  isEditingDashboardLabels: boolean
+  dashboardLabelsEdit: Dashboard
+}
+
+@ErrorHandling
+class OrgDashboardIndex extends PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props)
+
+    this.state = {
+      searchTerm: '',
+      isImportingDashboard: false,
+      isEditingDashboardLabels: false,
+      dashboardLabelsEdit: null,
+    }
+  }
+
+  public async componentDidMount() {
+    const {handleGetDashboards, dashboards} = this.props
+    await handleGetDashboards()
+    const dashboardIDs = dashboards.map(d => d.id)
+    this.props.retainRangesDashTimeV1(dashboardIDs)
+  }
+
+  public render() {
+    const {dashboards, notify, links, handleUpdateDashboard, orgs} = this.props
+    const {searchTerm} = this.state
+
+    return (
+      <>
+        <Page titleTag="Dashboards">
+          <Page.Header fullWidth={false}>
+            <Page.Header.Left>
+              <Input
+                icon={IconFont.Search}
+                placeholder="Filter tasks..."
+                widthPixels={290}
+                value={searchTerm}
+                onChange={this.handleFilterChange}
+                onBlur={this.handleFilterBlur}
+              />
+            </Page.Header.Left>
+            <Page.Header.Right>
+              <Button
+                color={ComponentColor.Primary}
+                onClick={this.handleCreateDashboard}
+                icon={IconFont.Plus}
+                text="Create Dashboard"
+                titleText="Create a new dashboard"
+              />
+            </Page.Header.Right>
+          </Page.Header>
+          <Page.Contents fullWidth={false} scrollable={true}>
+            <DashboardsContents
+              dashboards={dashboards}
+              orgs={orgs}
+              onSetDefaultDashboard={this.handleSetDefaultDashboard}
+              defaultDashboardLink={links.defaultDashboard}
+              onDeleteDashboard={this.handleDeleteDashboard}
+              onCreateDashboard={this.handleCreateDashboard}
+              onCloneDashboard={this.handleCloneDashboard}
+              onExportDashboard={this.handleExportDashboard}
+              onUpdateDashboard={handleUpdateDashboard}
+              onEditLabels={this.handleStartEditingLabels}
+              notify={notify}
+              searchTerm={searchTerm}
+              showInlineEdit={true}
+            />
+          </Page.Contents>
+        </Page>
+        {this.renderImportOverlay}
+        {this.renderLabelEditorOverlay}
+      </>
+    )
+  }
+
+  private handleFilterBlur = (e: ChangeEvent<HTMLInputElement>): void => {
+    this.setState({searchTerm: e.target.value})
+  }
+
+  private handleFilterChange = (e: ChangeEvent<HTMLInputElement>): void => {
+    this.setState({searchTerm: e.target.value})
+  }
+
+  private handleSetDefaultDashboard = async (
+    defaultDashboardLink: string
+  ): Promise<void> => {
+    const {dashboards, notify, handleSetDefaultDashboard} = this.props
+    const {name} = dashboards.find(d => d.links.self === defaultDashboardLink)
+
+    try {
+      await handleSetDefaultDashboard(defaultDashboardLink)
+    } catch (error) {
+      console.error(error)
+      notify(dashboardSetDefaultFailed(name))
+    }
+  }
+
+  private handleCreateDashboard = async (): Promise<void> => {
+    const {router, notify, orgs} = this.props
+    try {
+      const newDashboard = {
+        name: DEFAULT_DASHBOARD_NAME,
+        cells: [],
+        orgID: orgs[0].id,
+      }
+      const data = await createDashboard(newDashboard)
+      router.push(`/dashboards/${data.id}`)
+    } catch (error) {
+      notify(dashboardCreateFailed())
+    }
+  }
+
+  private handleCloneDashboard = async (
+    dashboard: Dashboard
+  ): Promise<void> => {
+    const {router, notify, orgs, dashboards} = this.props
+    try {
+      const data = await cloneDashboard(
+        {
+          ...dashboard,
+          orgID: orgs[0].id,
+        },
+        dashboards
+      )
+      router.push(`/dashboards/${data.id}`)
+    } catch (error) {
+      console.error(error)
+      notify(dashboardCreateFailed())
+    }
+  }
+
+  private handleDeleteDashboard = (dashboard: Dashboard) => {
+    this.props.handleDeleteDashboard(dashboard)
+  }
+
+  private handleExportDashboard = async (
+    dashboard: Dashboard
+  ): Promise<void> => {
+    const {notify} = this.props
+    const dashboardForDownload = await this.modifyDashboardForDownload(
+      dashboard
+    )
+    try {
+      downloadTextFile(
+        JSON.stringify(dashboardForDownload, null, '\t'),
+        `${dashboard.name}.json`
+      )
+      notify(dashboardExported(dashboard.name))
+    } catch (error) {
+      notify(dashboardExportFailed(dashboard.name, error))
+    }
+  }
+
+  private modifyDashboardForDownload = async (
+    dashboard: Dashboard
+  ): Promise<DashboardFile> => {
+    return {meta: {chronografVersion: '2.0'}, dashboard}
+  }
+
+  private handleImportDashboard = async (
+    dashboard: Dashboard
+  ): Promise<void> => {
+    const defaultCell = {
+      x: 0,
+      y: 0,
+      w: 4,
+      h: 4,
+    }
+
+    const name = _.get(dashboard, 'name', DEFAULT_DASHBOARD_NAME)
+    const cellsWithDefaultsApplied = getDeep<Cell[]>(
+      dashboard,
+      'cells',
+      []
+    ).map(c => ({...defaultCell, ...c}))
+
+    await this.props.handleImportDashboard({
+      ...dashboard,
+      name,
+      cells: cellsWithDefaultsApplied,
+    })
+  }
+
+  private handleToggleOverlay = (): void => {
+    this.setState({isImportingDashboard: !this.state.isImportingDashboard})
+  }
+
+  private get renderImportOverlay(): JSX.Element {
+    const {notify} = this.props
+    const {isImportingDashboard} = this.state
+
+    return (
+      <OverlayTechnology visible={isImportingDashboard}>
+        <ImportDashboardOverlay
+          onDismissOverlay={this.handleToggleOverlay}
+          onImportDashboard={this.handleImportDashboard}
+          notify={notify}
+        />
+      </OverlayTechnology>
+    )
+  }
+
+  private handleStartEditingLabels = (dashboardLabelsEdit: Dashboard): void => {
+    this.setState({dashboardLabelsEdit, isEditingDashboardLabels: true})
+  }
+
+  private handleStopEditingLabels = (): void => {
+    this.setState({isEditingDashboardLabels: false})
+  }
+
+  private get renderLabelEditorOverlay(): JSX.Element {
+    const {onAddDashboardLabels, onRemoveDashboardLabels} = this.props
+    const {isEditingDashboardLabels, dashboardLabelsEdit} = this.state
+
+    return (
+      <OverlayTechnology visible={isEditingDashboardLabels}>
+        <EditLabelsOverlay<Dashboard>
+          resource={dashboardLabelsEdit}
+          onDismissOverlay={this.handleStopEditingLabels}
+          onAddLabels={onAddDashboardLabels}
+          onRemoveLabels={onRemoveDashboardLabels}
+        />
+      </OverlayTechnology>
+    )
+  }
+}
+
+const mstp = (state: AppState): StateProps => {
+  const {dashboards, links, orgs} = state
+
+  return {
+    orgs,
+    dashboards,
+    links,
+  }
+}
+
+const mdtp: DispatchProps = {
+  notify: notifyAction,
+  handleSetDefaultDashboard: setDefaultDashboard,
+  handleGetDashboards: getDashboardsAsync,
+  handleDeleteDashboard: deleteDashboardAsync,
+  handleImportDashboard: importDashboardAsync,
+  handleUpdateDashboard: updateDashboardAsync,
+  retainRangesDashTimeV1: retainRangesDashTimeV1Action,
+  onAddDashboardLabels: addDashboardLabelsAsync,
+  onRemoveDashboardLabels: removeDashboardLabelsAsync,
+}
+
+export default connect<StateProps, DispatchProps, OwnProps>(
+  mstp,
+  mdtp
+)(OrgDashboardIndex)
diff --git a/ui/src/organizations/containers/OrganizationView.tsx b/ui/src/organizations/containers/OrganizationView.tsx
index db1f322d199..998c63e5b5c 100644
--- a/ui/src/organizations/containers/OrganizationView.tsx
+++ b/ui/src/organizations/containers/OrganizationView.tsx
@@ -31,7 +31,6 @@ import TabbedPage from 'src/shared/components/tabbed_page/TabbedPage'
 import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSection'
 import Members from 'src/organizations/components/Members'
 import Buckets from 'src/organizations/components/Buckets'
-import Dashboards from 'src/organizations/components/Dashboards'
 import OrgTasksPage from 'src/organizations/components/OrgTasksPage'
 import Collectors from 'src/organizations/components/Collectors'
 import Scrapers from 'src/organizations/components/Scrapers'
@@ -52,6 +51,7 @@ import * as NotificationsActions from 'src/types/actions/notifications'
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import {Task} from 'src/tasks/containers/TasksPage'
+import OrgDashboardIndex from '../components/OrgDashboardIndex'
 
 interface StateProps {
   org: Organization
@@ -157,7 +157,8 @@ class OrganizationView extends PureComponent<Props> {
                       loading={loading}
                       spinnerComponent={<TechnoSpinner />}
                     >
-                      <Dashboards
+                      <OrgDashboardIndex
+                        router={router}
                         dashboards={dashboards}
                         orgName={org.name}
                         onChange={fetch}
diff --git a/ui/src/shared/components/EditableName.tsx b/ui/src/shared/components/EditableName.tsx
index a2688217b1a..1d5aec8cafa 100644
--- a/ui/src/shared/components/EditableName.tsx
+++ b/ui/src/shared/components/EditableName.tsx
@@ -1,5 +1,5 @@
 // Libraries
-import React, {Component, KeyboardEvent, ChangeEvent} from 'react'
+import React, {Component, KeyboardEvent, ChangeEvent, MouseEvent} from 'react'
 import classnames from 'classnames'
 
 // Components
@@ -15,7 +15,7 @@ import 'src/shared/components/EditableName.scss'
 interface Props {
   onUpdate: (name: string) => void
   name: string
-  onEditName: (e?: any) => void
+  onEditName: (e?: MouseEvent<HTMLAnchorElement>) => void
   hrefValue?: string
   placeholder?: string
 }