From 30b6a4a23ef682fbc9d7eefc0ec8a7581aa05922 Mon Sep 17 00:00:00 2001 From: Deniz Kusefoglu Date: Thu, 25 Apr 2019 16:25:03 -0700 Subject: [PATCH 1/2] Convert notification type to style --- .../components/notifications/Notification.tsx | 8 ++++---- ui/src/shared/copy/notifications.ts | 15 +++++++-------- ui/src/shared/reducers/notifications.test.ts | 7 ++++--- ui/src/types/notifications.ts | 10 +++++++++- 4 files changed, 24 insertions(+), 16 deletions(-) diff --git a/ui/src/shared/components/notifications/Notification.tsx b/ui/src/shared/components/notifications/Notification.tsx index 41517df797..4ce95d68f9 100644 --- a/ui/src/shared/components/notifications/Notification.tsx +++ b/ui/src/shared/components/notifications/Notification.tsx @@ -76,16 +76,16 @@ class Notification extends Component { } 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 { diff --git a/ui/src/shared/copy/notifications.ts b/ui/src/shared/copy/notifications.ts index 6c63ec3add..9dee621e24 100644 --- a/ui/src/shared/copy/notifications.ts +++ b/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', diff --git a/ui/src/shared/reducers/notifications.test.ts b/ui/src/shared/reducers/notifications.test.ts index 51bfd793b9..af7887fc3d 100644 --- a/ui/src/shared/reducers/notifications.test.ts +++ b/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', diff --git a/ui/src/types/notifications.ts b/ui/src/types/notifications.ts index 385bc0a93a..370c024a56 100644 --- a/ui/src/types/notifications.ts +++ b/ui/src/types/notifications.ts @@ -4,8 +4,16 @@ export type NotificationAction = Action export interface Notification { id?: string - type: string + style: NotificationStyle icon: string duration: number message: string } + +export enum NotificationStyle { + Error = 'error', + Success = 'success', + Info = 'info', + Primary = 'primary', + Warning = 'warning', +} From 45ad90e94924e5b566cd50dfdaa0e3903787cd2b Mon Sep 17 00:00:00 2001 From: Deniz Kusefoglu Date: Thu, 25 Apr 2019 19:19:57 -0700 Subject: [PATCH 2/2] Check that notification is unique by type before publishing --- ui/src/shared/copy/notifications.ts | 4 ++++ ui/src/shared/reducers/notifications.ts | 8 +++++++- ui/src/types/notifications.ts | 1 + 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/ui/src/shared/copy/notifications.ts b/ui/src/shared/copy/notifications.ts index 9dee621e24..5deb8311a4 100644 --- a/ui/src/shared/copy/notifications.ts +++ b/ui/src/shared/copy/notifications.ts @@ -242,6 +242,7 @@ export const copyToClipboardSuccess = ( ): Notification => ({ ...defaultSuccessNotification, icon: 'dash-h', + type: 'copyToClipboardSuccess', message: `${title} '${text}' has been copied to clipboard.`, }) @@ -395,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 => ({ diff --git a/ui/src/shared/reducers/notifications.ts b/ui/src/shared/reducers/notifications.ts index 33ae094d7a..c0079271b3 100644 --- a/ui/src/shared/reducers/notifications.ts +++ b/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 } diff --git a/ui/src/types/notifications.ts b/ui/src/types/notifications.ts index 370c024a56..85cb1df82c 100644 --- a/ui/src/types/notifications.ts +++ b/ui/src/types/notifications.ts @@ -8,6 +8,7 @@ export interface Notification { icon: string duration: number message: string + type?: string } export enum NotificationStyle {