Convert DashboardsTable to typescript

ui/src/dashboards/components/DashboardsTable.js

@@ -1,116 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import {Link} from 'react-router'
-import _ from 'lodash'
-
-import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
-
-import ConfirmButton from 'shared/components/ConfirmButton'
-
-const AuthorizedEmptyState = ({onCreateDashboard}) => (
-  <div className="generic-empty-state">
-    <h4 style={{marginTop: '90px'}}>
-      Looks like you don’t have any dashboards
-    </h4>
-    <br />
-    <button
-      className="btn btn-sm btn-primary"
-      onClick={onCreateDashboard}
-      style={{marginBottom: '90px'}}
-    >
-      <span className="icon plus" /> Create Dashboard
-    </button>
-  </div>
-)
-
-const unauthorizedEmptyState = (
-  <div className="generic-empty-state">
-    <h4 style={{margin: '90px 0'}}>Looks like you don’t have any dashboards</h4>
-  </div>
-)
-
-const DashboardsTable = ({
-  dashboards,
-  onDeleteDashboard,
-  onCreateDashboard,
-  onCloneDashboard,
-  dashboardLink,
-}) => {
-  return dashboards && dashboards.length ? (
-    <table className="table v-center admin-table table-highlight">
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Template Variables</th>
-          <th />
-        </tr>
-      </thead>
-      <tbody>
-        {_.sortBy(dashboards, d => d.name.toLowerCase()).map(dashboard => (
-          <tr key={dashboard.id}>
-            <td>
-              <Link to={`${dashboardLink}/dashboards/${dashboard.id}`}>
-                {dashboard.name}
-              </Link>
-            </td>
-            <td>
-              {dashboard.templates.length ? (
-                dashboard.templates.map(tv => (
-                  <code className="table--temp-var" key={tv.id}>
-                    {tv.tempVar}
-                  </code>
-                ))
-              ) : (
-                <span className="empty-string">None</span>
-              )}
-            </td>
-            <Authorized
-              requiredRole={EDITOR_ROLE}
-              replaceWithIfNotAuthorized={<td />}
-            >
-              <td className="text-right">
-                <button
-                  className="btn btn-xs btn-default table--show-on-row-hover"
-                  onClick={onCloneDashboard(dashboard)}
-                >
-                  <span className="icon duplicate" />
-                  Clone
-                </button>
-                <ConfirmButton
-                  confirmAction={onDeleteDashboard(dashboard)}
-                  size="btn-xs"
-                  type="btn-danger"
-                  text="Delete"
-                  customClass="table--show-on-row-hover"
-                />
-              </td>
-            </Authorized>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  ) : (
-    <Authorized
-      requiredRole={EDITOR_ROLE}
-      replaceWithIfNotAuthorized={unauthorizedEmptyState}
-    >
-      <AuthorizedEmptyState onCreateDashboard={onCreateDashboard} />
-    </Authorized>
-  )
-}
-
-const {arrayOf, func, shape, string} = PropTypes
-
-DashboardsTable.propTypes = {
-  dashboards: arrayOf(shape()),
-  onDeleteDashboard: func.isRequired,
-  onCreateDashboard: func.isRequired,
-  onCloneDashboard: func.isRequired,
-  dashboardLink: string.isRequired,
-}
-
-AuthorizedEmptyState.propTypes = {
-  onCreateDashboard: func.isRequired,
-}
-
-export default DashboardsTable

ui/src/dashboards/components/DashboardsTable.tsx

@@ -0,0 +1,124 @@
+import React, {PureComponent, MouseEvent} from 'react'
+import {Link} from 'react-router'
+import _ from 'lodash'
+
+import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
+import ConfirmButton from 'src/shared/components/ConfirmButton'
+
+import {Dashboard} from 'src/types'
+
+interface Props {
+  dashboards: Dashboard[]
+  onDeleteDashboard: (dashboard: Dashboard) => () => void
+  onCreateDashboard: () => void
+  onCloneDashboard: (
+    dashboard: Dashboard
+  ) => (event: MouseEvent<HTMLButtonElement>) => void
+  dashboardLink: string
+}
+
+class DashboardsTable extends PureComponent<Props> {
+  public render() {
+    const {
+      dashboards,
+      dashboardLink,
+      onCloneDashboard,
+      onDeleteDashboard,
+    } = this.props
+
+    if (!dashboards.length) {
+      return this.emptyStateDashboard
+    }
+
+    return (
+      <table className="table v-center admin-table table-highlight">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Template Variables</th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {_.sortBy(dashboards, d => d.name.toLowerCase()).map(dashboard => (
+            <tr key={dashboard.id}>
+              <td>
+                <Link to={`${dashboardLink}/dashboards/${dashboard.id}`}>
+                  {dashboard.name}
+                </Link>
+              </td>
+              <td>
+                {dashboard.templates.length ? (
+                  dashboard.templates.map(tv => (
+                    <code className="table--temp-var" key={tv.id}>
+                      {tv.tempVar}
+                    </code>
+                  ))
+                ) : (
+                  <span className="empty-string">None</span>
+                )}
+              </td>
+              <Authorized
+                requiredRole={EDITOR_ROLE}
+                replaceWithIfNotAuthorized={<td />}
+              >
+                <td className="text-right">
+                  <button
+                    className="btn btn-xs btn-default table--show-on-row-hover"
+                    onClick={onCloneDashboard(dashboard)}
+                  >
+                    <span className="icon duplicate" />
+                    Clone
+                  </button>
+                  <ConfirmButton
+                    confirmAction={onDeleteDashboard(dashboard)}
+                    size="btn-xs"
+                    type="btn-danger"
+                    text="Delete"
+                    customClass="table--show-on-row-hover"
+                  />
+                </td>
+              </Authorized>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    )
+  }
+
+  private get emptyStateDashboard() {
+    const {onCreateDashboard} = this.props
+    return (
+      <Authorized
+        requiredRole={EDITOR_ROLE}
+        replaceWithIfNotAuthorized={this.unauthorizedEmptyState}
+      >
+        <div className="generic-empty-state">
+          <h4 style={{marginTop: '90px'}}>
+            Looks like you don’t have any dashboards
+          </h4>
+          <br />
+          <button
+            className="btn btn-sm btn-primary"
+            onClick={onCreateDashboard}
+            style={{marginBottom: '90px'}}
+          >
+            <span className="icon plus" /> Create Dashboard
+          </button>
+        </div>
+      </Authorized>
+    )
+  }
+
+  private get unauthorizedEmptyState() {
+    return (
+      <div className="generic-empty-state">
+        <h4 style={{margin: '90px 0'}}>
+          Looks like you don’t have any dashboards
+        </h4>
+      </div>
+    )
+  }
+}
+
+export default DashboardsTable

ui/src/types/index.ts

@@ -1,7 +1,7 @@
 import {LayoutCell, LayoutQuery} from './layouts'
 import {Service, NewService} from './services'
 import {AuthLinks, Organization, Role, User, Me} from './auth'
-import {Template, Cell, CellQuery, Legend, Axes} from './dashboard'
+import {Template, Cell, CellQuery, Legend, Axes, Dashboard} from './dashboard'
 import {
   GroupBy,
   Query,
@@ -58,6 +58,7 @@ export {
   Notification,
   NotificationFunc,
   Axes,
+  Dashboard,
   Service,
   NewService,
   LayoutCell,