[yugabyte#6346, yugabyte#6477, yugabyte#6421] Platform: Implemented toaster component for visual feedback (yugabyte#7078)

Description: Added toaster for having visual feedback for user action.
cases covered:
1. When the user adds/delete the KMS configuration.
2. When duplicate region code is added for on-prem Provider.
3. Api error response in case of edit universe.

Test scenario:
- Adding duplicate region code for the on-prem provider notifies the user of an appropriate toaster.
-  Adding/Deleting the KMS have visual feedback to the users.
- Any error encountered during edit universe have visual feedback

Author: gaurav061

managed/ui/package-lock.json

@@ -88,6 +88,7 @@
     "react-router-dom": "5.2.0",
     "react-scripts": "3.2.0",
     "react-select": "3.1.0",
+    "react-toastify": "7.0.3",
     "react-toggle": "4.1.1",
     "react-use": "15.3.4",
     "react-widgets": "4.5.0",

managed/ui/package.json

@@ -2,11 +2,18 @@
 
 import React, { Component } from 'react';
 import 'bootstrap/dist/css/bootstrap.css';
+import 'react-toastify/dist/ReactToastify.css';
 import './stylesheets/App.scss';
 import './../_style/fonts.css';
+import { ToastContainer } from 'react-toastify';
 
 export default class App extends Component {
   render() {
-    return <div>{this.props.children}</div>;
+    return (
+      <>
+        <div>{this.props.children}</div>
+        <ToastContainer/>
+      </>
+    );
   }
 }

managed/ui/src/app/App.js

@@ -75,3 +75,15 @@
 .no-padding {
   padding: 0 !important;
 }
+
+.Toastify__toast--error {
+  background: $YB_FAIL_COLOR;
+}
+
+.Toastify__toast--success {
+  background: $YB_SUCCESS_COLOR;
+}
+
+.Toastify__toast--warning {
+  background: $YB_WARNING_COLOR;
+}

managed/ui/src/app/stylesheets/App.scss

@@ -26,6 +26,7 @@ import {
 } from '../../../actions/cloud';
 import { isNonEmptyArray } from '../../../utils/ObjectUtils';
 import { destroy } from 'redux-form';
+import { toast } from 'react-toastify';
 
 const mapStateToProps = (state) => {
   return {
@@ -91,6 +92,10 @@ const mapDispatchToProps = (dispatch) => {
           };
           if ((isEdit && region.isBeingEdited) || !isEdit) {
             dispatch(createRegion(providerUUID, formValues)).then((response) => {
+              if (response.error) {
+                const errorMessage = response.payload?.response?.data?.error || response.payload.message;
+                toast.error(errorMessage);
+              }
               dispatch(createRegionResponse(response.payload));
             });
           }

managed/ui/src/components/config/OnPrem/OnPremConfigurationContainer.js

@@ -34,6 +34,7 @@ import {
   fetchHostInfoSuccess,
   fetchHostInfoFailure
 } from '../../../actions/customers';
+import { toast } from 'react-toastify';
 
 const mapDispatchToProps = (dispatch) => {
   return {
@@ -52,6 +53,7 @@ const mapDispatchToProps = (dispatch) => {
           dispatch(fetchCloudMetadata());
           const providerUUID = response.payload.data.uuid;
           dispatch(bootstrapProvider(providerUUID, regionFormVals)).then((boostrapResponse) => {
+            toast.success('Successfully created AWS Provider!');
             dispatch(bootstrapProviderResponse(boostrapResponse.payload));
           });
         }
@@ -130,6 +132,8 @@ const mapDispatchToProps = (dispatch) => {
     deleteProviderConfig: (providerUUID) => {
       dispatch(deleteProvider(providerUUID)).then((response) => {
         if (response.payload.status !== 200) {
+          const errorMessage = response.payload?.response?.data?.error || response.payload.message;
+          toast.error(errorMessage);
           dispatch(deleteProviderFailure(response.payload));
         } else {
           dispatch(deleteProviderSuccess(response.payload));

managed/ui/src/components/config/PublicCloud/ProviderConfigurationContainer.js

@@ -19,6 +19,7 @@ import { regionsData } from '../PublicCloud/views/providerRegionsData';
 import { readUploadedFile } from '../../../utils/UniverseUtils';
 import { change } from 'redux-form';
 import YBInfoTip from '../../common/descriptors/YBInfoTip';
+import { toast } from 'react-toastify';
 
 // TODO: (Daniel) - Replace this hard-coding with an API that returns
 //  a list of supported KMS Configurations
@@ -88,6 +89,7 @@ class KeyManagementConfiguration extends Component {
       setKMSConfig(kmsProvider.value, data).then(() => {
         fetchKMSConfigList();
         this.setState({ listView: true });
+        toast.success('Successfully added the configuration');
       });
     }
   };
@@ -276,6 +278,7 @@ class KeyManagementConfiguration extends Component {
   render() {
     const { configList } = this.props;
     const { listView, enabledIAMProfile } = this.state;
+
     if (getPromiseState(configList).isInit() || getPromiseState(configList).isLoading()) {
       return <YBLoadingCircleIcon />;
     }
@@ -287,7 +290,8 @@ class KeyManagementConfiguration extends Component {
           onDelete={this.deleteAuthConfig}
         />
       );
-    }
+
+    };
 
     const validationSchema = Yup.object().shape({
       apiUrl: Yup.string(),

managed/ui/src/components/config/Security/KeyManagementConfiguration.js

@@ -11,6 +11,7 @@ import {
   deleteKMSProviderConfig,
   deleteKMSProviderConfigResponse
 } from '../../../actions/cloud';
+import { toast } from 'react-toastify';
 
 const mapStateToProps = (state) => {
   return {
@@ -32,26 +33,32 @@ const mapDispatchToProps = (dispatch) => {
     fetchKMSConfigList: () => {
       return dispatch(fetchAuthConfigList()).then((response) =>
         dispatch(fetchAuthConfigListResponse(response.payload))
-      );
+      )
+      .catch(() => toast.error('Error occured while fetching config.'));
     },
 
     setKMSConfig: (provider, body) => {
       return dispatch(createKMSProviderConfig(provider, body))
         .then((response) => {
-          return dispatch(createKMSProviderConfigResponse(response.payload));
+          return dispatch(createKMSProviderConfigResponse(response.payload)).then(
+            () => toast.success('Successfully added the configuration')
+          );
         })
-        .catch((err) => console.err('Error submitting KMS configuration: ', err));
+        .catch((err) => toast.error(`Error submitting KMS configuration: ${err}`));
     },
 
     deleteKMSConfig: (configUUID) => {
       dispatch(deleteKMSProviderConfig(configUUID))
         .then((response) => {
           if (response.payload.status === 200) {
+            toast.success('Successfully deleted KMS configuration');
             return dispatch(deleteKMSProviderConfigResponse(configUUID));
           }
-          console.warn('Warning: Deleting configuration returned unsuccessful response.');
+          toast.warn('Warning: Deleting configuration returned unsuccessful response.');
         })
-        .catch((err) => console.error(err));
+        .catch((err) => {
+          console.error(err)
+        });
     }
   };
 };

managed/ui/src/components/config/Security/KeyManagementConfigurationContainer.js

@@ -59,6 +59,7 @@ import { getClusterByType } from '../../../utils/UniverseUtils';
 import {
   EXPOSING_SERVICE_STATE_TYPES
 } from './ClusterFields';
+import { toast } from 'react-toastify';
 
 const mapDispatchToProps = (dispatch) => {
   return {
@@ -123,6 +124,10 @@ const mapDispatchToProps = (dispatch) => {
 
     submitEditUniverse: (values, universeUUID) => {
       dispatch(editUniverse(values, universeUUID)).then((response) => {
+        if (response.error) {
+          const errorMessage = response.payload?.response?.data?.error || response.payload.message;
+          toast.error(errorMessage);
+        }
         dispatch(editUniverseResponse(response.payload));
       });
     },