Merge pull request #13652 from influxdata/add-notification-type

Add notification type to notifications and prevent re-publishing same notification

ui/src/shared/components/notifications/Notification.tsx

@@ -76,16 +76,16 @@ class Notification extends Component<Props, State> {
   }
 
   private get dataTestID(): string {
-    const {type} = this.props.notification
-    return `notification-${type}`
+    const {style} = this.props.notification
+    return `notification-${style}`
   }
 
   private get notificationClassname(): string {
     const {
-      notification: {type},
+      notification: {style},
     } = this.props
 
-    return `notification notification-${type}`
+    return `notification notification-${style}`
   }
 
   private get containerClassname(): string {

ui/src/shared/copy/notifications.ts

@@ -1,6 +1,6 @@
 // All copy for notifications should be stored here for easy editing
 // and ensuring stylistic consistency
-import {Notification} from 'src/types'
+import {Notification, NotificationStyle} from 'src/types'
 
 type NotificationExcludingMessage = Pick<
   Notification,
@@ -11,19 +11,19 @@ import {FIVE_SECONDS, TEN_SECONDS, INFINITE} from 'src/shared/constants/index'
 import {QUICKSTART_SCRAPER_TARGET_URL} from 'src/dataLoaders/constants/pluginConfigs'
 
 const defaultErrorNotification: NotificationExcludingMessage = {
-  type: 'error',
+  style: NotificationStyle.Error,
   icon: 'alert-triangle',
   duration: TEN_SECONDS,
 }
 
 const defaultSuccessNotification: NotificationExcludingMessage = {
-  type: 'success',
+  style: NotificationStyle.Success,
   icon: 'checkmark',
   duration: FIVE_SECONDS,
 }
 
 const defaultDeletionNotification: NotificationExcludingMessage = {
-  type: 'primary',
+  style: NotificationStyle.Primary,
   icon: 'trash',
   duration: FIVE_SECONDS,
 }
@@ -32,7 +32,7 @@ const defaultDeletionNotification: NotificationExcludingMessage = {
 //  ----------------------------------------------------------------------------
 
 export const newVersion = (version: string): Notification => ({
-  type: 'info',
+  style: NotificationStyle.Info,
   icon: 'cubo-uniform',
   duration: INFINITE,
   message: `Welcome to the latest Chronograf${version}. Local settings cleared.`,
@@ -44,14 +44,14 @@ export const loadLocalSettingsFailed = (error: string): Notification => ({
 })
 
 export const presentationMode = (): Notification => ({
-  type: 'primary',
+  style: NotificationStyle.Primary,
   icon: 'expand-b',
   duration: 7500,
   message: 'Press ESC to exit Presentation Mode.',
 })
 
 export const sessionTimedOut = (): Notification => ({
-  type: 'primary',
+  style: NotificationStyle.Primary,
   icon: 'triangle',
   duration: INFINITE,
   message: 'Your session has timed out. Log in again to continue.',
@@ -178,7 +178,6 @@ export const removedDashboardLabelFailed = (): Notification => ({
 })
 
 // Variables & URL Queries
-//  ----------------------------------------------------------------------------
 export const invalidTimeRangeValueInURLQuery = (): Notification => ({
   ...defaultErrorNotification,
   icon: 'cube',
@@ -243,6 +242,7 @@ export const copyToClipboardSuccess = (
 ): Notification => ({
   ...defaultSuccessNotification,
   icon: 'dash-h',
+  type: 'copyToClipboardSuccess',
   message: `${title} '${text}' has been copied to clipboard.`,
 })
 
@@ -396,18 +396,21 @@ export const writeLimitReached = (): Notification => ({
   ...defaultErrorNotification,
   message: `It looks like you have exceeded the write rate limits allowed as part of your plan. If you would like to increase your write rate limits, reach out to cloudbeta@influxdata.com.`,
   duration: INFINITE,
+  type: 'writeLimitReached',
 })
 
 export const readLimitReached = (): Notification => ({
   ...defaultErrorNotification,
   message: `It looks like you have exceeded the query limits allowed as part of your plan. Try reducing the number of cells on your dashboard. If you would like to increase your query limits, reach out to cloudbeta@influxdata.com.`,
   duration: INFINITE,
+  type: 'readLimitReached',
 })
 
 export const resourceLimitReached = (resourceName: string): Notification => ({
   ...defaultErrorNotification,
   message: `Oops. It looks like you have reached the maximum number of ${resourceName} allowed as part of your plan. If you would like to upgrade and remove this restriction, reach out to cloudbeta@influxdata.com.`,
   duration: INFINITE,
+  type: 'resourceLimitReached',
 })
 
 export const taskNotCreated = (additionalMessage: string): Notification => ({

ui/src/shared/reducers/notifications.test.ts

@@ -6,12 +6,13 @@ import {
 import {notify, dismissNotification} from 'src/shared/actions/notifications'
 
 import {FIVE_SECONDS} from 'src/shared/constants/index'
+import {NotificationStyle} from 'src/types'
 
 const notificationID = '000'
 
 const exampleNotification = {
   id: notificationID,
-  type: 'success',
+  style: NotificationStyle.Success,
   message: 'Hell yeah you are a real notification!',
   duration: FIVE_SECONDS,
   icon: 'zap',
@@ -28,7 +29,7 @@ describe('Shared.Reducers.notifications', () => {
 
     const [expected] = [exampleNotification, ...initialState]
 
-    expect(actual.type).toEqual(expected.type)
+    expect(actual.style).toEqual(expected.style)
     expect(actual.icon).toEqual(expected.icon)
     expect(actual.message).toEqual(expected.message)
     expect(actual.duration).toEqual(expected.duration)
@@ -37,7 +38,7 @@ describe('Shared.Reducers.notifications', () => {
   describe('adding more than one notification', () => {
     it('should put the new notification at the beggining of the list', () => {
       const newNotification = {
-        type: 'error',
+        style: NotificationStyle.Error,
         message: 'new notification',
         duration: FIVE_SECONDS,
         icon: 'zap',

ui/src/shared/reducers/notifications.ts

@@ -17,7 +17,13 @@ export const notificationsReducer = (
           ...notification,
           id: uuid.v4(),
         }
-        draftState.unshift(publishedNotification)
+        const matchIndex = state.findIndex(
+          n => n.type && notification.type && n.type === notification.type
+        )
+        const isUnique = matchIndex === -1
+        if (isUnique) {
+          draftState.unshift(publishedNotification)
+        }
         return
       }
 

ui/src/types/notifications.ts

@@ -4,8 +4,17 @@ export type NotificationAction = Action
 
 export interface Notification {
   id?: string
-  type: string
+  style: NotificationStyle
   icon: string
   duration: number
   message: string
+  type?: string
+}
+
+export enum NotificationStyle {
+  Error = 'error',
+  Success = 'success',
+  Info = 'info',
+  Primary = 'primary',
+  Warning = 'warning',
 }