Add notifications for success/failed when creating/deleting/updating …

CHANGELOG.md

@@ -11,7 +11,8 @@
 
 ### UI Improvements
 1. [12016](https://github.com/influxdata/influxdb/pull/12016): Update the preview in the label overlays to be shorter
-1. [12012](https://github.com/influxdata/influxdb/pull/12012): Add notifications to scrapers page for created/deleted/failed scrapers 
+1. [12012](https://github.com/influxdata/influxdb/pull/12012): Add notifications to scrapers page for created/deleted/updated scrapers 
+1. [12023](https://github.com/influxdata/influxdb/pull/12023): Add notifications to buckets page for created/deleted/updated buckets
 
 ## v2.0.0-alpha.3 [2019-02-15]
 

ui/src/organizations/components/Buckets.tsx

@@ -44,7 +44,14 @@ interface State {
 
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
-import {bucketDeleted} from 'src/shared/copy/v2/notifications'
+import {
+  bucketDeleteSuccess,
+  bucketDeleteFailed,
+  bucketCreateFailed,
+  bucketCreateSuccess,
+  bucketUpdateFailed,
+  bucketUpdateSuccess,
+} from 'src/shared/copy/v2/notifications'
 
 @ErrorHandling
 export default class Buckets extends PureComponent<Props, State> {
@@ -106,21 +113,40 @@ export default class Buckets extends PureComponent<Props, State> {
   }
 
   private handleUpdateBucket = async (updatedBucket: PrettyBucket) => {
-    await client.buckets.update(updatedBucket.id, updatedBucket)
-    this.props.onChange()
+    const {onChange, notify} = this.props
+    try {
+      await client.buckets.update(updatedBucket.id, updatedBucket)
+      onChange()
+      notify(bucketUpdateSuccess(updatedBucket.name))
+    } catch (e) {
+      console.error(e)
+      notify(bucketUpdateFailed(updatedBucket.name))
+    }
   }
 
   private handleDeleteBucket = async (deletedBucket: PrettyBucket) => {
     const {onChange, notify} = this.props
-    await client.buckets.delete(deletedBucket.id)
-    onChange()
-    notify(bucketDeleted(deletedBucket.name))
+    try {
+      await client.buckets.delete(deletedBucket.id)
+      onChange()
+      notify(bucketDeleteSuccess(deletedBucket.name))
+    } catch (e) {
+      console.error(e)
+      bucketDeleteFailed(deletedBucket.name)
+    }
   }
 
   private handleCreateBucket = async (bucket: Bucket): Promise<void> => {
-    await client.buckets.create(bucket)
-    this.props.onChange()
-    this.handleCloseModal()
+    const {onChange, notify} = this.props
+    try {
+      await client.buckets.create(bucket)
+      onChange()
+      this.handleCloseModal()
+      notify(bucketCreateSuccess())
+    } catch (e) {
+      console.error(e)
+      notify(bucketCreateFailed())
+    }
   }
 
   private handleOpenModal = (): void => {

ui/src/shared/copy/v2/notifications.ts

@@ -120,9 +120,34 @@ export const labelUpdateFailed = (): Notification => ({
   message: 'Failed to update label',
 })
 
-export const bucketDeleted = (bucketName: string): Notification => ({
+export const bucketDeleteSuccess = (bucketName: string): Notification => ({
   ...defaultSuccessNotification,
-  message: `Bucket ${bucketName} was successfully deleted`,
+  message: `Bucket "${bucketName}" was successfully deleted`,
+})
+
+export const bucketDeleteFailed = (bucketName: string): Notification => ({
+  ...defaultErrorNotification,
+  message: `Failed to delete bucket: "${bucketName}"`,
+})
+
+export const bucketCreateSuccess = (): Notification => ({
+  ...defaultSuccessNotification,
+  message: 'Bucket was successfully created',
+})
+
+export const bucketCreateFailed = (): Notification => ({
+  ...defaultErrorNotification,
+  message: 'Failed to create bucket',
+})
+
+export const bucketUpdateSuccess = (bucketName: string): Notification => ({
+  ...defaultSuccessNotification,
+  message: `Bucket "${bucketName}" was successfully updated`,
+})
+
+export const bucketUpdateFailed = (bucketName: string): Notification => ({
+  ...defaultErrorNotification,
+  message: `Failed to update bucket: "${bucketName}"`,
 })
 
 export const scraperDeleteSuccess = (scraperName: string): Notification => ({