Merge pull request #3266 from influxdata/bugfix/notify-new-cell-name

Show New Cell's Name in Notification

ui/src/dashboards/actions/index.js

@@ -299,7 +299,7 @@ export const addDashboardCellAsync = (
       getNewDashboardCell(dashboard, cellType)
     )
     dispatch(addDashboardCell(dashboard, data))
-    dispatch(notify(notifyCellAdded()))
+    dispatch(notify(notifyCellAdded(data.name)))
   } catch (error) {
     console.error(error)
     dispatch(errorThrown(error))

ui/src/dashboards/constants/index.js

@@ -1,5 +1,26 @@
 import {DEFAULT_TABLE_OPTIONS} from 'src/shared/constants/tableGraph'
-import {CELL_TYPE_LINE, UNTITLED_CELL_LINE} from 'src/dashboards/graphics/graph'
+import {CELL_TYPE_LINE} from 'src/dashboards/graphics/graph'
+
+export const UNTITLED_CELL_LINE = 'Untitled Line Graph'
+export const UNTITLED_CELL_STACKED = 'Untitled Stacked Gracph'
+export const UNTITLED_CELL_STEPPLOT = 'Untitled Step-Plot Graph'
+export const UNTITLED_CELL_BAR = 'Untitled Bar Graph'
+export const UNTITLED_CELL_LINE_PLUS_SINGLE_STAT =
+  'Untitled Line Graph + Single Stat'
+export const UNTITLED_CELL_SINGLE_STAT = 'Untitled Single Stat'
+export const UNTITLED_CELL_GAUGE = 'Untitled Gauge'
+export const UNTITLED_CELL_TABLE = 'Untitled Table'
+
+export const NEW_DEFAULT_DASHBOARD_CELL = {
+  x: 0,
+  y: 0,
+  w: 4,
+  h: 4,
+  name: UNTITLED_CELL_LINE,
+  type: CELL_TYPE_LINE,
+  queries: [],
+  tableOptions: DEFAULT_TABLE_OPTIONS,
+}
 
 export const EMPTY_DASHBOARD = {
   id: 0,
@@ -15,17 +36,6 @@ export const EMPTY_DASHBOARD = {
   ],
 }
 
-export const NEW_DEFAULT_DASHBOARD_CELL = {
-  x: 0,
-  y: 0,
-  w: 4,
-  h: 4,
-  name: UNTITLED_CELL_LINE,
-  type: CELL_TYPE_LINE,
-  queries: [],
-  tableOptions: DEFAULT_TABLE_OPTIONS,
-}
-
 export const NEW_DASHBOARD = {
   name: 'Name This Dashboard',
   cells: [NEW_DEFAULT_DASHBOARD_CELL],

ui/src/dashboards/containers/DashboardsPage.js

@@ -19,7 +19,7 @@ class DashboardsPage extends Component {
     this.props.handleGetDashboards()
   }
 
-  handleCreateDashbord = async () => {
+  handleCreateDashboard = async () => {
     const {source: {id}, router: {push}} = this.props
     const {data} = await createDashboard(NEW_DASHBOARD)
     push(`/sources/${id}/dashboards/${data.id}`)
@@ -49,7 +49,7 @@ class DashboardsPage extends Component {
           dashboardLink={dashboardLink}
           dashboards={dashboards}
           onDeleteDashboard={this.handleDeleteDashboard}
-          onCreateDashboard={this.handleCreateDashbord}
+          onCreateDashboard={this.handleCreateDashboard}
           onCloneDashboard={this.handleCloneDashboard}
         />
       </div>

ui/src/dashboards/utils/cellGetters.js

@@ -9,6 +9,16 @@ import {
   CELL_TYPE_GAUGE,
   CELL_TYPE_TABLE,
 } from 'src/dashboards/graphics/graph'
+import {
+  UNTITLED_CELL_LINE,
+  UNTITLED_CELL_STACKED,
+  UNTITLED_CELL_STEPPLOT,
+  UNTITLED_CELL_BAR,
+  UNTITLED_CELL_LINE_PLUS_SINGLE_STAT,
+  UNTITLED_CELL_SINGLE_STAT,
+  UNTITLED_CELL_GAUGE,
+  UNTITLED_CELL_TABLE,
+} from 'src/dashboards/constants'
 
 const getMostCommonValue = values => {
   const results = values.reduce(
@@ -30,16 +40,6 @@ const getMostCommonValue = values => {
   return results.mostCommonValue
 }
 
-export const UNTITLED_CELL_LINE = 'Untitled Line Graph'
-export const UNTITLED_CELL_STACKED = 'Untitled Stacked Graph'
-export const UNTITLED_CELL_STEPPLOT = 'Untitled Step-Plot Graph'
-export const UNTITLED_CELL_BAR = 'Untitled Bar Graph'
-export const UNTITLED_CELL_LINE_PLUS_SINGLE_STAT =
-  'Untitled Line Graph + Single Stat'
-export const UNTITLED_CELL_SINGLE_STAT = 'Untitled Single Stat'
-export const UNTITLED_CELL_GAUGE = 'Untitled Gauge'
-export const UNTITLED_CELL_TABLE = 'Untitled Table'
-
 const getNewTypedCellName = type => {
   switch (type) {
     case CELL_TYPE_LINE:

ui/src/shared/copy/notifications.js

@@ -412,24 +412,24 @@ export const notifyDashboardDeleted = name => ({
 export const notifyDashboardDeleteFailed = (name, errorMessage) =>
   `Failed to delete Dashboard ${name}: ${errorMessage}.`
 
-export const notifyCellAdded = () => ({
+export const notifyCellAdded = name => ({
   ...defaultSuccessNotification,
   icon: 'dash-h',
-  duration: 2200,
-  message: 'Added "Untitled Cell" to dashboard.',
+  duration: 1900,
+  message: `Added "${name}" to dashboard.`,
 })
 
 export const notifyCellCloned = name => ({
   ...defaultSuccessNotification,
   icon: 'duplicate',
-  duration: 2200,
+  duration: 1900,
   message: `Added "${name}" to dashboard.`,
 })
 
 export const notifyCellDeleted = name => ({
   ...defaultDeletionNotification,
   icon: 'dash-h',
-  duration: 2200,
+  duration: 1900,
   message: `Deleted "${name}" from dashboard.`,
 })
 

ui/test/dashboards/reducers/cellEditorOverlay.test.js

@@ -20,7 +20,8 @@ import {
 } from 'shared/constants/thresholds'
 import {validateLineColors} from 'src/shared/constants/graphColorPalettes'
 
-import {CELL_TYPE_LINE, UNTITLED_CELL_LINE} from 'src/dashboards/graphics/graph'
+import {CELL_TYPE_LINE} from 'src/dashboards/graphics/graph'
+import {UNTITLED_CELL_LINE} from 'src/dashboards/constants'
 
 const defaultCellType = CELL_TYPE_LINE
 const defaultCellName = UNTITLED_CELL_LINE