From 1ccba85c91e89427922ff8134c225038a3e1d68c Mon Sep 17 00:00:00 2001
From: Charles Zhou <zhou@linux.com>
Date: Thu, 6 Jun 2024 09:28:13 -0500
Subject: [PATCH] fix: modal z-index and cleanup (#4978)

---
 web/app/components/app/app-publisher/index.tsx                | 1 -
 .../app/configuration/dataset-config/params-config/index.tsx  | 1 -
 .../configuration/toolbox/annotation/config-param-modal.tsx   | 1 -
 web/app/components/base/drawer/index.tsx                      | 1 -
 web/app/components/base/modal/delete-confirm-modal/index.tsx  | 4 +---
 web/app/components/base/modal/index.css                       | 2 +-
 web/app/components/datasets/documents/rename-modal.tsx        | 1 -
 web/app/components/share/chat/sidebar/rename-modal/index.tsx  | 1 -
 .../workflow/nodes/http/components/authorization/index.tsx    | 1 -
 9 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
index 7e4c584257..da7f9b56a2 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -235,7 +235,6 @@ const AppPublisher = ({
         onClose={() => setEmbeddingModalOpen(false)}
         appBaseUrl={appBaseURL}
         accessToken={accessToken}
-        className='z-50'
       />
     </PortalToFollowElem >
   )
diff --git a/web/app/components/app/configuration/dataset-config/params-config/index.tsx b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
index a7b6a08e7a..9d9eac2a66 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
@@ -84,7 +84,6 @@ const ParamsConfig: FC = () => {
               setOpen(false)
             }}
             className='sm:min-w-[528px]'
-            wrapperClassName='z-50'
             title={t('appDebug.datasetConfig.settingTitle')}
           >
             <ConfigContent
diff --git a/web/app/components/app/configuration/toolbox/annotation/config-param-modal.tsx b/web/app/components/app/configuration/toolbox/annotation/config-param-modal.tsx
index c06c851149..ab93ce6f85 100644
--- a/web/app/components/app/configuration/toolbox/annotation/config-param-modal.tsx
+++ b/web/app/components/app/configuration/toolbox/annotation/config-param-modal.tsx
@@ -78,7 +78,6 @@ const ConfigParamModal: FC<Props> = ({
       isShow={isShow}
       onClose={onHide}
       className='!p-8 !pb-6 !mt-14 !max-w-none !w-[640px]'
-      wrapperClassName='!z-50'
     >
       <div className='mb-2 text-xl font-semibold text-[#1D2939]'>
         {t(`appAnnotation.initSetup.${isInit ? 'title' : 'configTitle'}`)}
diff --git a/web/app/components/base/drawer/index.tsx b/web/app/components/base/drawer/index.tsx
index 467c8253b9..de46ac69f8 100644
--- a/web/app/components/base/drawer/index.tsx
+++ b/web/app/components/base/drawer/index.tsx
@@ -14,7 +14,6 @@ export type IDrawerProps = {
   mask?: boolean
   positionCenter?: boolean
   isOpen: boolean
-  // closable: boolean
   showClose?: boolean
   clickOutsideNotOpen?: boolean
   onClose: () => void
diff --git a/web/app/components/base/modal/delete-confirm-modal/index.tsx b/web/app/components/base/modal/delete-confirm-modal/index.tsx
index f2c5a30336..5f492bedfc 100644
--- a/web/app/components/base/modal/delete-confirm-modal/index.tsx
+++ b/web/app/components/base/modal/delete-confirm-modal/index.tsx
@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import s from './style.module.css'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
@@ -31,8 +30,7 @@ const DeleteConfirmModal: FC<Props> = ({
     <Modal
       isShow={isShow}
       onClose={onHide}
-      wrapperClassName='z-50'
-      className={cn(s.delModal, 'z-50')}
+      className={s.delModal}
       closable
     >
       <div onClick={(e) => {
diff --git a/web/app/components/base/modal/index.css b/web/app/components/base/modal/index.css
index b1b4648be6..799b375168 100644
--- a/web/app/components/base/modal/index.css
+++ b/web/app/components/base/modal/index.css
@@ -1,5 +1,5 @@
 .modal-dialog {
-  @apply relative z-10;
+  @apply relative z-50;
 }
 
 .modal-panel {
diff --git a/web/app/components/datasets/documents/rename-modal.tsx b/web/app/components/datasets/documents/rename-modal.tsx
index a47d47e4b3..545c786258 100644
--- a/web/app/components/datasets/documents/rename-modal.tsx
+++ b/web/app/components/datasets/documents/rename-modal.tsx
@@ -57,7 +57,6 @@ const RenameModal: FC<Props> = ({
       title={t('datasetDocuments.list.table.rename')}
       isShow
       onClose={onClose}
-      wrapperClassName='!z-50'
     >
       <div className={'mt-6 font-medium text-sm leading-[21px] text-gray-900'}>{t('datasetDocuments.list.table.name')}</div>
       <input className={'mt-2 w-full rounded-lg h-10 box-border px-3 text-sm leading-10 bg-gray-100'}
diff --git a/web/app/components/share/chat/sidebar/rename-modal/index.tsx b/web/app/components/share/chat/sidebar/rename-modal/index.tsx
index 346bf74d3e..34ca4e7631 100644
--- a/web/app/components/share/chat/sidebar/rename-modal/index.tsx
+++ b/web/app/components/share/chat/sidebar/rename-modal/index.tsx
@@ -28,7 +28,6 @@ const RenameModal: FC<IRenameModalProps> = ({
       title={t('common.chat.renameConversation')}
       isShow={isShow}
       onClose={onClose}
-      wrapperClassName='!z-50'
     >
       <div className={'mt-6 font-medium text-sm leading-[21px] text-gray-900'}>{t('common.chat.conversationName')}</div>
       <input className={'mt-2 w-full rounded-lg h-10 box-border px-3 text-sm leading-10 bg-gray-100'}
diff --git a/web/app/components/workflow/nodes/http/components/authorization/index.tsx b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
index 050ebbcb58..f0c65f17c3 100644
--- a/web/app/components/workflow/nodes/http/components/authorization/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
@@ -87,7 +87,6 @@ const Authorization: FC<Props> = ({
   return (
     <Modal
       title={t(`${i18nPrefix}.authorization`)}
-      wrapperClassName='z-50 w-400'
       isShow={isShow}
       onClose={onHide}
     >