Toast notification display fix and form improvements

src/components/Dialogs/CreateProjectDialogContainer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { useApiResourceMutation } from '../../lib/api/useApiResource';
 import { ErrorDialogHandle } from '../Shared/ErrorMessageBox.tsx';
 import { APIError } from '../../lib/api/error';
@@ -33,7 +33,7 @@ export function CreateProjectDialogContainer({
   const {
     register,
     handleSubmit,
-    reset,
+    resetField,
     setValue,
     formState: { errors },
     watch,
@@ -51,16 +51,22 @@ export function CreateProjectDialogContainer({
 
   const { t } = useTranslation();
 
+  const clearForm = useCallback(() => {
+    resetField('name');
+    resetField('chargingTarget');
+    resetField('displayName');
+  }, [resetField]);
+
   useEffect(() => {
     if (username) {
       setValue('members', [
         { name: username, roles: [MemberRoles.admin], kind: 'User' },
       ]);
     }
-    return () => {
-      reset();
-    };
-  }, []);
+    if (!isOpen) {
+      clearForm();
+    }
+  }, [resetField, setValue, username, isOpen, clearForm]);
 
   const toast = useToast();
 

src/components/Dialogs/CreateWorkspaceDialogContainer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import {
   useApiResourceMutation,
   useRevalidateApiResource,
@@ -61,13 +61,22 @@ export function CreateWorkspaceDialogContainer({
 
   const { t } = useTranslation();
 
+  const clearForm = useCallback(() => {
+    resetField('name');
+    resetField('chargingTarget');
+    resetField('displayName');
+  }, [resetField]);
+
   useEffect(() => {
     if (username) {
       setValue('members', [
         { name: username, roles: [MemberRoles.admin], kind: 'User' },
       ]);
     }
-  }, [username]);
+    if (!isOpen) {
+      clearForm();
+    }
+  }, [resetField, setValue, username, isOpen, clearForm]);
   const namespace = projectnameToNamespace(project);
   const toast = useToast();
 
@@ -94,9 +103,6 @@ export function CreateWorkspaceDialogContainer({
       await revalidate();
       setIsOpen(false);
       toast.show(t('CreateWorkspaceDialog.toastMessage'));
-      resetField('name');
-      resetField('chargingTarget');
-      resetField('displayName');
       return true;
     } catch (e) {
       console.error(e);

src/index.css

@@ -107,4 +107,9 @@ body {
 
 ui5-form-item {
   margin-bottom: 24px;
+}
+
+ui5-toast {
+  width: 50ch;
+  max-width: 100%;
 }