From 4eed0f2e1ea093da27e6052f792c3eb66680183d Mon Sep 17 00:00:00 2001
From: Bowen Tan <bowen.tan@smartx.com>
Date: Tue, 8 Oct 2024 17:32:09 +0800
Subject: [PATCH] fix: export antdGetPopupContainer param

---
 packages/refine/src/Dovetail.tsx              | 82 ++++++++++++-------
 .../EditMetadataForm/EditLabelForm.tsx        |  1 -
 2 files changed, 52 insertions(+), 31 deletions(-)

diff --git a/packages/refine/src/Dovetail.tsx b/packages/refine/src/Dovetail.tsx
index c07cc85e..efdc4276 100644
--- a/packages/refine/src/Dovetail.tsx
+++ b/packages/refine/src/Dovetail.tsx
@@ -1,9 +1,14 @@
-import { KitStoreProvider, ModalStack, useMessage } from '@cloudtower/eagle';
+import {
+  ConfigProvider,
+  KitStoreProvider,
+  ModalStack,
+  useMessage,
+} from '@cloudtower/eagle';
 import { NotificationProvider, Refine, AccessControlProvider } from '@refinedev/core';
 import { History } from 'history';
 import { dataProvider, liveProvider, GlobalStore } from 'k8s-api-provider';
 import { keyBy } from 'lodash-es';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { Router } from 'react-router-dom';
 import { ResourceCRUD } from './components/ResourceCRUD';
 import ConfigsContext from './contexts/configs';
@@ -24,6 +29,7 @@ type Props = {
   globalStore: GlobalStore;
   accessControlProvider?: AccessControlProvider;
   routerProvider?: any;
+  antdGetPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
 };
 
 export const Dovetail: React.FC<Props> = props => {
@@ -36,9 +42,14 @@ export const Dovetail: React.FC<Props> = props => {
     globalStore,
     accessControlProvider,
     routerProvider: customRouterProvider,
+    antdGetPopupContainer,
   } = props;
   const msg = useMessage();
 
+  useEffect(() => {
+    msg.config({ getContainer: antdGetPopupContainer });
+  }, [msg, antdGetPopupContainer]);
+
   const notCustomResources = useMemo(() => {
     return resourcesConfig.filter(c => !c.isCustom);
   }, [resourcesConfig]);
@@ -83,37 +94,48 @@ export const Dovetail: React.FC<Props> = props => {
         <GlobalStoreContext.Provider value={{ globalStore }}>
           <ConfigsContext.Provider value={keyBy(resourcesConfig, 'name')}>
             <ConstantsContext.Provider value={{ schemaUrlPrefix }}>
-              <Refine
-                dataProvider={{
-                  default: dataProvider(globalStore),
+              <ConfigProvider
+                antd5Configs={{
+                  getPopupContainer: antdGetPopupContainer || (() => document.body),
                 }}
-                routerProvider={customRouterProvider || routerProvider}
-                liveProvider={liveProvider(globalStore)}
-                notificationProvider={notificationProvider}
-                options={{
-                  warnWhenUnsavedChanges: true,
-                  liveMode: 'auto',
-                  disableTelemetry: true,
+                antd4Configs={{
+                  getPopupContainer: antdGetPopupContainer || (() => document.body),
                 }}
-                accessControlProvider={accessControlProvider}
-                resources={resourcesConfig.map(c => {
-                  return {
-                    name: c.name,
-                    meta: {
-                      resourceBasePath: c.basePath,
-                      kind: c.kind,
-                      parent: c.parent,
-                      label: `${c.kind}s`,
-                    },
-                    list: `${urlPrefix}/${c.name}`,
-                    show: `${urlPrefix}/${c.name}/show`,
-                    create: `${urlPrefix}/${c.name}/create`,
-                    edit: `${urlPrefix}/${c.name}/edit`,
-                  };
-                })}
               >
-                {content}
-              </Refine>
+                <GlobalStoreContext.Provider value={{ globalStore }}>
+                  <Refine
+                    dataProvider={{
+                      default: dataProvider(globalStore),
+                    }}
+                    routerProvider={customRouterProvider || routerProvider}
+                    liveProvider={liveProvider(globalStore)}
+                    notificationProvider={notificationProvider}
+                    options={{
+                      warnWhenUnsavedChanges: true,
+                      liveMode: 'auto',
+                      disableTelemetry: true,
+                    }}
+                    accessControlProvider={accessControlProvider}
+                    resources={resourcesConfig.map(c => {
+                      return {
+                        name: c.name,
+                        meta: {
+                          resourceBasePath: c.basePath,
+                          kind: c.kind,
+                          parent: c.parent,
+                          label: `${c.kind}s`,
+                        },
+                        list: `${urlPrefix}/${c.name}`,
+                        show: `${urlPrefix}/${c.name}/show`,
+                        create: `${urlPrefix}/${c.name}/create`,
+                        edit: `${urlPrefix}/${c.name}/edit`,
+                      };
+                    })}
+                  >
+                    {content}
+                  </Refine>
+                </GlobalStoreContext.Provider>
+              </ConfigProvider>
             </ConstantsContext.Provider>
           </ConfigsContext.Provider>
         </GlobalStoreContext.Provider>
diff --git a/packages/refine/src/components/EditMetadataForm/EditLabelForm.tsx b/packages/refine/src/components/EditMetadataForm/EditLabelForm.tsx
index 2293fe8d..f7db8555 100644
--- a/packages/refine/src/components/EditMetadataForm/EditLabelForm.tsx
+++ b/packages/refine/src/components/EditMetadataForm/EditLabelForm.tsx
@@ -39,7 +39,6 @@ export const EditLabelForm = React.forwardRef<EditLabelFormHandler, EditLabelFor
       });
       const newYaml = resourceModel.updateLabel(newLabels);
       pruneBeforeEdit(newYaml);
-      console.log('newYaml', newYaml);
       return mutateAsync({
         id: resourceModel.id,
         resource: resourceModel.name || '',