fix: fix workflow as a tool confirm dialog layout issue (#18494)

10 months ago · 80f5ee1eb2
parent ee30497237
commit 80f5ee1eb2
17 changed files with 34 additions and 22 deletions
--- a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
@ -163,7 +163,7 @@ const SettingBuiltInTool: FC<Props> = ({
      footer={null}
      mask={false}
      positionCenter={false}
-      panelClassname={cn('mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl')}
+      panelClassName={cn('mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl')}
    >
      <>
        {isLoading && <Loading type='app' />}
--- a/web/app/components/app/configuration/dataset-config/card-item/item.tsx
+++ b/web/app/components/app/configuration/dataset-config/card-item/item.tsx
@ -97,7 +97,7 @@ const Item: FC<ItemProps> = ({
          <RiDeleteBinLine className='h-4 w-4' />
        </div>
      </div>
-      <Drawer isOpen={showSettingsModal} onClose={() => setShowSettingsModal(false)} footer={null} mask={isMobile} panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl'>
+      <Drawer isOpen={showSettingsModal} onClose={() => setShowSettingsModal(false)} footer={null} mask={isMobile} panelClassName='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl'>
        <SettingsModal
          currentDataset={config}
          onCancel={() => setShowSettingsModal(false)}
--- a/web/app/components/app/log/list.tsx
+++ b/web/app/components/app/log/list.tsx
@ -743,7 +743,7 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
        onClose={onCloseDrawer}
        mask={isMobile}
        footer={null}
-        panelClassname='mt-16 mx-2 sm:mr-2 mb-4 !p-0 !max-w-[640px] rounded-xl bg-components-panel-bg'
+        panelClassName='mt-16 mx-2 sm:mr-2 mb-4 !p-0 !max-w-[640px] rounded-xl bg-components-panel-bg'
      >
        <DrawerContext.Provider value={{
          onClose: onCloseDrawer,
--- a/web/app/components/app/workflow-log/list.tsx
+++ b/web/app/components/app/workflow-log/list.tsx
@ -134,7 +134,7 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
        onClose={onCloseDrawer}
        mask={isMobile}
        footer={null}
-        panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[600px] rounded-xl border border-components-panel-border'
+        panelClassName='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[600px] rounded-xl border border-components-panel-border'
      >
        <DetailPanel onClose={onCloseDrawer} runID={currentLog?.workflow_run.id || ''} />
      </Drawer>
--- a/web/app/components/base/drawer-plus/index.tsx
+++ b/web/app/components/base/drawer-plus/index.tsx
@ -9,6 +9,8 @@ import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 type Props = {
  isShow: boolean
  onHide: () => void
+  dialogClassName?: string
+  dialogBackdropClassName?: string
  panelClassName?: string
  maxWidthClassName?: string
  contentClassName?: string
@ -26,6 +28,8 @@ type Props = {
 const DrawerPlus: FC<Props> = ({
  isShow,
  onHide,
+  dialogClassName = '',
+  dialogBackdropClassName = '',
  panelClassName = '',
  maxWidthClassName = '!max-w-[640px]',
  height = 'calc(100vh - 72px)',
@ -55,7 +59,9 @@ const DrawerPlus: FC<Props> = ({
      footer={null}
      mask={isMobile || isShowMask}
      positionCenter={positionCenter}
-      panelClassname={cn('mx-2 mb-3 mt-16 rounded-xl !p-0 sm:mr-2', panelClassName, maxWidthClassName)}
+      dialogClassName={dialogClassName}
+      dialogBackdropClassName={dialogBackdropClassName}
+      panelClassName={cn('mx-2 mb-3 mt-16 rounded-xl !p-0 sm:mr-2', panelClassName, maxWidthClassName)}
    >
      <div
        className={cn(contentClassName, 'flex w-full flex-col rounded-xl border-[0.5px] border-divider-subtle bg-components-panel-bg shadow-xl')}
--- a/web/app/components/base/drawer/index.tsx
+++ b/web/app/components/base/drawer/index.tsx
@ -8,7 +8,9 @@ import cn from '@/utils/classnames'
 export type IDrawerProps = {
  title?: string
  description?: string
-  panelClassname?: string
+  dialogClassName?: string
+  dialogBackdropClassName?: string
+  panelClassName?: string
  children: React.ReactNode
  footer?: React.ReactNode
  mask?: boolean
@ -25,7 +27,9 @@ export type IDrawerProps = {
 export default function Drawer({
  title = '',
  description = '',
-  panelClassname = '',
+  dialogClassName = '',
+  dialogBackdropClassName = '',
+  panelClassName = '',
  children,
  footer,
  mask = true,
@ -44,17 +48,17 @@ export default function Drawer({
      unmount={unmount}
      open={isOpen}
      onClose={() => !clickOutsideNotOpen && onClose()}
-      className="fixed inset-0 z-[80] overflow-y-auto"
+      className={cn('fixed inset-0 z-[30] overflow-y-auto', dialogClassName)}
    >
      <div className={cn('flex h-screen w-screen justify-end', positionCenter && '!justify-center')}>
        {/* mask */}
        <DialogBackdrop
-          className={cn('fixed inset-0 z-[90]', mask && 'bg-black bg-opacity-30')}
+          className={cn('fixed inset-0 z-[40]', mask && 'bg-black/30', dialogBackdropClassName)}
          onClick={() => {
            !clickOutsideNotOpen && onClose()
          }}
        />
-        <div className={cn('relative z-[100] flex w-full max-w-sm flex-col justify-between overflow-hidden bg-components-panel-bg p-6 text-left align-middle shadow-xl', panelClassname)}>
+        <div className={cn('relative z-[50] flex w-full max-w-sm flex-col justify-between overflow-hidden bg-components-panel-bg p-6 text-left align-middle shadow-xl', panelClassName)}>
          <>
            <div className='flex justify-between'>
              {title && <DialogTitle
--- a/web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx
@ -20,7 +20,7 @@ const FullScreenDrawer: FC<IFullScreenDrawerProps> = ({
    <Drawer
      isOpen={isOpen}
      onClose={onClose}
-      panelClassname={classNames('!p-0 bg-components-panel-bg',
+      panelClassName={classNames('!p-0 bg-components-panel-bg',
        fullScreen
          ? '!max-w-full !w-full'
          : 'mt-16 mr-2 mb-2 !max-w-[560px] !w-[560px] border-[0.5px] border-components-panel-border rounded-xl',
--- a/web/app/components/datasets/documents/detail/index.tsx
+++ b/web/app/components/datasets/documents/detail/index.tsx
@ -277,7 +277,7 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
              }
            </div>
          }
-          <FloatRightContainer showClose isOpen={showMetadata} onClose={() => setShowMetadata(false)} isMobile={isMobile} panelClassname='!justify-start' footer={null}>
+          <FloatRightContainer showClose isOpen={showMetadata} onClose={() => setShowMetadata(false)} isMobile={isMobile} panelClassName='!justify-start' footer={null}>
            <Metadata
              className='mr-2 mt-3'
              datasetId={datasetId}
--- a/web/app/components/datasets/hit-testing/index.tsx
+++ b/web/app/components/datasets/hit-testing/index.tsx
@ -176,7 +176,7 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
              <RecordsEmpty />
            )}
      </div>
-      <FloatRightContainer panelClassname='!justify-start !overflow-y-auto' showClose isMobile={isMobile} isOpen={isShowRightPanel} onClose={hideRightPanel} footer={null}>
+      <FloatRightContainer panelClassName='!justify-start !overflow-y-auto' showClose isMobile={isMobile} isOpen={isShowRightPanel} onClose={hideRightPanel} footer={null}>
        <div className='flex flex-col pt-3'>
          {/* {renderHitResults(generalResultData)} */}
          {submitLoading
@ -197,7 +197,7 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
          }
        </div>
      </FloatRightContainer>
-      <Drawer unmount={true} isOpen={isShowModifyRetrievalModal} onClose={() => setIsShowModifyRetrievalModal(false)} footer={null} mask={isMobile} panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl'>
+      <Drawer unmount={true} isOpen={isShowModifyRetrievalModal} onClose={() => setIsShowModifyRetrievalModal(false)} footer={null} mask={isMobile} panelClassName='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl'>
        <ModifyRetrievalModal
          indexMethod={currentDataset?.indexing_technique || ''}
          value={retrievalConfig}
--- a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
@ -173,7 +173,7 @@ const DatasetMetadataDrawer: FC<Props> = ({
      showClose
      title={t('dataset.metadata.metadata')}
      footer={null}
-      panelClassname='px-4 block !max-w-[420px] my-2 rounded-l-2xl'
+      panelClassName='px-4 block !max-w-[420px] my-2 rounded-l-2xl'
    >
      <div className='h-full overflow-y-auto'>
        <div className='system-sm-regular text-text-tertiary'>{t(`${i18nPrefix}.description`)}</div>
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
@ -46,7 +46,7 @@ const EndpointModal: FC<Props> = ({
      footer={null}
      mask
      positionCenter={false}
-      panelClassname={cn('mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl')}
+      panelClassName={cn('mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl')}
    >
      <>
        <div className='p-4 pb-2'>
--- a/web/app/components/plugins/plugin-detail-panel/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/index.tsx
@ -38,7 +38,7 @@ const PluginDetailPanel: FC<Props> = ({
      footer={null}
      mask={false}
      positionCenter={false}
-      panelClassname={cn('mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl')}
+      panelClassName={cn('mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl')}
    >
      {detail && (
        <>
--- a/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
@ -78,7 +78,7 @@ const StrategyDetail: FC<Props> = ({
      footer={null}
      mask={false}
      positionCenter={false}
-      panelClassname={cn('mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl')}
+      panelClassName={cn('mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl')}
    >
      <>
        {/* header */}
--- a/web/app/components/tools/add-tool-modal/index.tsx
+++ b/web/app/components/tools/add-tool-modal/index.tsx
@ -178,7 +178,7 @@ const AddToolModal: FC<Props> = ({
        clickOutsideNotOpen
        onClose={onHide}
        footer={null}
-        panelClassname={cn('mx-2 mb-3 mt-16 rounded-xl !p-0 sm:mr-2', 'mt-2 !w-[640px]', '!max-w-[640px]')}
+        panelClassName={cn('mx-2 mb-3 mt-16 rounded-xl !p-0 sm:mr-2', 'mt-2 !w-[640px]', '!max-w-[640px]')}
      >
        <div
          className='flex w-full rounded-xl border-[0.5px] border-gray-200 bg-white shadow-xl'
--- a/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
@ -52,7 +52,9 @@ const ConfigCredential: FC<Props> = ({
      positionCenter={positionCenter}
      onHide={onHide}
      title={t('tools.createTool.authMethod.title')!}
-      panelClassName='mt-2 !w-[520px] h-fit'
+      dialogClassName='z-[60]'
+      dialogBackdropClassName='z-[70]'
+      panelClassName='mt-2 !w-[520px] h-fit z-[80]'
      maxWidthClassName='!max-w-[520px]'
      height={'fit-content'}
      headerClassName='!border-b-divider-regular'
--- a/web/app/components/tools/provider/detail.tsx
+++ b/web/app/components/tools/provider/detail.tsx
@ -234,7 +234,7 @@ const ProviderDetail = ({
      footer={null}
      mask={false}
      positionCenter={false}
-      panelClassname={cn('mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl')}
+      panelClassName={cn('mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl')}
    >
      <div className='p-4'>
        <div className='mb-3 flex'>
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
@ -111,7 +111,7 @@ const DatasetItem: FC<Props> = ({
      }

      {isShowSettingsModal && (
-        <Drawer isOpen={isShowSettingsModal} onClose={hideSettingsModal} footer={null} mask={isMobile} panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl'>
+        <Drawer isOpen={isShowSettingsModal} onClose={hideSettingsModal} footer={null} mask={isMobile} panelClassName='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl'>
          <SettingsModal
            currentDataset={payload}
            onCancel={hideSettingsModal}