From b90c740c8f5bca464f83ded49b4dd4996cbafac4 Mon Sep 17 00:00:00 2001
From: Oliwia Gowor <oliwiagowor@gmail.com>
Date: Mon, 16 Dec 2024 08:18:38 +0100
Subject: [PATCH] fix: toasts in dialogs

---
 .../TokenRequestModal/TokenRequestModal.tsx   | 10 ++++++-
 .../useGenerateTokenRequest.ts                |  4 ++-
 src/shared/contexts/ErrorModal/ErrorModal.tsx |  1 +
 src/shared/contexts/NotificationContext.tsx   | 30 ++++++++++++++++---
 4 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/resources/ServiceAccounts/TokenRequestModal/TokenRequestModal.tsx b/src/resources/ServiceAccounts/TokenRequestModal/TokenRequestModal.tsx
index bb21cef04a..f32aebef2d 100644
--- 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,6 +72,7 @@ export function TokenRequestModal({
 }: TokenRequestModalProps) {
   const { t } = useTranslation();
   const downloadKubeconfig = useDownloadKubeconfigWithToken();
+  const modalRef = useRef(null);
 
   const {
     kubeconfigYaml,
@@ -78,7 +80,12 @@ export function TokenRequestModal({
     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
index c27c0ac91c..c678f66862 100644
--- 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
index cc244099e0..943f3393c5 100644
--- 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
index 816354a8f7..4bbb956cbb 100644
--- 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}