[chore]: Show an error popup when a user enters an invalid info

chaoscenter/web/src/controllers/CreateNewToken/CreateNewToken.tsx

@@ -20,8 +20,7 @@ export default function CreateNewTokenController(props: CreateNewTokenController
   const { mutate: createNewTokenMutation, isLoading } = useCreateApiTokenMutation(
     {},
     {
-      onSuccess: data => {
-        data.accessToken;
+      onSuccess: () => {
         apiTokensRefetch();
         showSuccess(getString('tokenCreateSuccessMessage'));
       }

chaoscenter/web/src/strings/strings.en.yaml

@@ -48,6 +48,7 @@ allExecutions: All Executions
 allFaultsExecuted: All your faults executed without any issue
 allRuns: All Runs
 alreadyExists: '{{value}} already exists'
+alreadyExistsID: Entered id '{{value}}' already exists
 apiTokens: API Tokens
 appKind: App Kind
 appKindName: app_kind

chaoscenter/web/src/strings/types.ts

@@ -51,6 +51,7 @@ export interface StringsMap {
   'allFaultsExecuted': unknown
   'allRuns': unknown
   'alreadyExists': PrimitiveObject<'value'>
+  'alreadyExistsID': PrimitiveObject<'value'>
   'apiTokens': unknown
   'appKind': unknown
   'appKindName': unknown

chaoscenter/web/src/views/AccountPasswordChange/AccountPasswordChange.tsx

@@ -1,5 +1,5 @@
 import { FontVariation } from '@harnessio/design-system';
-import { Button, ButtonVariation, Container, FormInput, Layout, Text } from '@harnessio/uicore';
+import { Button, ButtonVariation, Container, FormInput, Layout, Text, useToaster } from '@harnessio/uicore';
 import React from 'react';
 import { Icon } from '@harnessio/icons';
 import { Form, Formik } from 'formik';
@@ -28,6 +28,7 @@ interface AccountPasswordChangeFormProps {
 export default function AccountPasswordChangeView(props: AccountPasswordChangeViewProps): React.ReactElement {
   const { handleClose, updatePasswordMutation, updatePasswordMutationLoading, username } = props;
   const { getString } = useStrings();
+  const { showError } = useToaster();
 
   function isSubmitButtonDisabled(values: AccountPasswordChangeFormProps): boolean {
     if (values.oldPassword === '' || values.newPassword === '' || values.reEnterNewPassword === '') {
@@ -56,6 +57,7 @@ export default function AccountPasswordChangeView(props: AccountPasswordChangeVi
           }
         },
         {
+          onError: () => showError(getString('passwordsDoNotMatch')),
           onSuccess: () => handleClose()
         }
       );

chaoscenter/web/src/views/Environments/EnvironmentList/CreateEnvironment.tsx

@@ -1,4 +1,4 @@
-import { Button, ButtonVariation, CardSelect, Container, FormInput, Layout, Text } from '@harnessio/uicore';
+import { Button, ButtonVariation, CardSelect, Container, FormInput, Layout, Text, useToaster } from '@harnessio/uicore';
 import { FontVariation, Color } from '@harnessio/design-system';
 import { Form, Formik } from 'formik';
 import React from 'react';
@@ -48,6 +48,7 @@ export default function CreateEnvironment({
 }: CreateEnvironmentProps): React.ReactElement {
   const { getString } = useStrings();
   const scope = getScope();
+  const { showError } = useToaster();
   const initialValues: CreateEnvironmentData = {
     id: editable ? environmentID ?? '' : '',
     name: editable ? existingEnvironment?.name ?? '' : '',
@@ -87,6 +88,7 @@ export default function CreateEnvironment({
                       }
                     }
                   })
+                  .catch(() => showError(getString('alreadyExistsID', { value: data.id })))
                   .then(() => closeModal())
               : mutation.updateEnvironment &&
                 environmentID &&