fix: toasts in dialogs

kyma-project · Dec 16, 2024 · b90c740 · b90c740
1 parent 0c6d5ab
commit b90c740
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 6 deletions.
diff --git a/src/resources/ServiceAccounts/TokenRequestModal/TokenRequestModal.tsx b/src/resources/ServiceAccounts/TokenRequestModal/TokenRequestModal.tsx
@@ -8,6 +8,7 @@ import { ResourceForm } from 'shared/ResourceForm';
 import { ComboboxInput } from 'shared/ResourceForm/inputs';
 import { CopiableText } from 'shared/components/CopiableText/CopiableText';
 import { Editor } from 'shared/components/MonacoEditorESM/Editor';
+import { useRef } from 'react';
 
 const expirationSecondsOptions = [
   {
@@ -71,14 +72,20 @@ export function TokenRequestModal({
 }: TokenRequestModalProps) {
   const { t } = useTranslation();
   const downloadKubeconfig = useDownloadKubeconfigWithToken();
+  const modalRef = useRef(null);
 
   const {
     kubeconfigYaml,
     token,
     generateTokenRequest,
     tokenRequest,
     setTokenRequest,
-  } = useGenerateTokenRequest(isModalOpen, namespace, serviceAccountName);
+  } = useGenerateTokenRequest(
+    isModalOpen,
+    namespace,
+    serviceAccountName,
+    modalRef,
+  );
 
   const isExpirationSecondsValueANumber = () =>
     !Number(tokenRequest.spec.expirationSeconds);
@@ -100,6 +107,7 @@ export function TokenRequestModal({
       open={isModalOpen}
       onClose={handleCloseModal}
       headerText={t('service-accounts.token-request.generate')}
+      ref={modalRef}
       footer={
         <Bar
           design="Footer"

diff --git a/src/resources/ServiceAccounts/TokenRequestModal/useGenerateTokenRequest.ts b/src/resources/ServiceAccounts/TokenRequestModal/useGenerateTokenRequest.ts
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { useNotification } from 'shared/contexts/NotificationContext';
 import { useCreateKubeconfig } from 'hooks/useCreateKubeconfig';
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, RefObject } from 'react';
 import { usePost } from 'shared/hooks/BackendAPI/usePost';
 import jsyaml from 'js-yaml';
 
@@ -19,6 +19,7 @@ export const useGenerateTokenRequest = (
   generate: boolean,
   namespace: string,
   serviceAccountName: string,
+  modalRef?: RefObject<HTMLElement>,
 ) => {
   const { t } = useTranslation();
   const post = usePost();
@@ -44,6 +45,7 @@ export const useGenerateTokenRequest = (
       notifyToast(
         {
           content: t('service-accounts.token-request.notification.success'),
+          parentContainer: generate ? modalRef?.current : undefined,
         },
         3000,
       );

diff --git a/src/shared/contexts/ErrorModal/ErrorModal.tsx b/src/shared/contexts/ErrorModal/ErrorModal.tsx
@@ -7,6 +7,7 @@ import './ErrorModal.scss';
 
 export type ToastProps = {
   content: React.ReactNode;
+  parentContainer?: HTMLElement | null;
 };
 
 type CloseFn = () => void;

diff --git a/src/shared/contexts/NotificationContext.tsx b/src/shared/contexts/NotificationContext.tsx
@@ -39,7 +39,7 @@ export const NotificationProvider = ({
   const methods = {
     notifySuccess: function(notificationProps: ToastProps) {
       setToastProps(notificationProps);
-      if (toast.current) {
+      if (toast.current && !toastProps?.parentContainer) {
         toast.current.open = true;
       }
     },
@@ -58,9 +58,31 @@ export const NotificationProvider = ({
         ...methods,
       }}
     >
-      <Toast ref={toast} duration={defaultVisibilityTime} style={{ zIndex: 1 }}>
-        {toastProps?.content}
-      </Toast>
+      {toastProps?.parentContainer &&
+        createPortal(
+          <Toast
+            open={!!toastProps}
+            ref={toast}
+            duration={defaultVisibilityTime}
+            style={{ zIndex: 1 }}
+            onClose={e => {
+              setToastProps(null);
+              e.stopPropagation();
+            }}
+          >
+            {toastProps?.content}
+          </Toast>,
+          toastProps.parentContainer,
+        )}
+      {!toastProps?.parentContainer && (
+        <Toast
+          ref={toast}
+          duration={defaultVisibilityTime}
+          style={{ zIndex: 1 }}
+        >
+          {toastProps?.content}
+        </Toast>
+      )}
       {errorProps &&
         createPortal(<ErrorModal {...errorProps} />, document.body)}
       {children}