From 17ccdee9abd3df84e2205493f19468e1001efc05 Mon Sep 17 00:00:00 2001
From: Junyi <mytharcher@users.noreply.github.com>
Date: Fri, 26 May 2023 08:54:06 +0700
Subject: [PATCH] fix(client): fix some warnings (#1934)

* fix(client): fix some warnings

* fix(client): fix warning
---
 .../core/client/src/pm/PluginManagerLink.tsx  | 41 ++++++---------
 .../antd/action/Action.Designer.tsx           | 26 +++++-----
 .../antd/action/Action.Drawer.tsx             |  2 +-
 .../schema-component/antd/action/Action.tsx   |  4 +-
 .../antd/filter/FilterAction.tsx              |  4 +-
 .../antd/icon-picker/IconPicker.tsx           |  4 +-
 .../antd/input/EllipsisWithTooltip.tsx        |  4 +-
 .../common/sortable-item/SortableItem.tsx     | 12 +++--
 .../components/AsDefaultTemplate.tsx          |  2 +-
 .../src/schema-settings/SchemaSettings.tsx    |  4 +-
 .../client/src/settings-form/SettingsForm.tsx |  4 +-
 packages/core/client/src/user/CurrentUser.tsx |  4 +-
 .../plugins/import/src/client/ImportModal.tsx |  2 +-
 .../multi-app-manager/src/client/index.tsx    | 52 ++++++++-----------
 14 files changed, 78 insertions(+), 87 deletions(-)

diff --git a/packages/core/client/src/pm/PluginManagerLink.tsx b/packages/core/client/src/pm/PluginManagerLink.tsx
index 47bb7deec..60b0dd529 100644
--- a/packages/core/client/src/pm/PluginManagerLink.tsx
+++ b/packages/core/client/src/pm/PluginManagerLink.tsx
@@ -46,31 +46,22 @@ export const SettingsCenterDropdown = () => {
     <ActionContext.Provider value={{ visible, setVisible }}>
       <Dropdown
         placement="bottom"
-        overlay={
-          <Menu>
-            {bookmarkTabs.map((tab) => {
-              return (
-                <Menu.Item
-                  onClick={() => {
-                    history.push('/admin/settings/' + tab.path);
-                  }}
-                  key={tab.path}
-                >
-                  {compile(tab.title)}
-                </Menu.Item>
-              );
-            })}
-            <Menu.Divider></Menu.Divider>
-            <Menu.Item
-              onClick={() => {
-                history.push('/admin/settings');
-              }}
-              key="/admin/settings"
-            >
-              {t('All plugin settings')}
-            </Menu.Item>
-          </Menu>
-        }
+        menu={{
+          items: [
+            ...bookmarkTabs.map((tab) => ({
+              key: `/admin/settings/${tab.path}`,
+              label: compile(tab.title),
+            })),
+            { type: 'divider' },
+            {
+              key: '/admin/settings',
+              label: t('All plugin settings'),
+            },
+          ],
+          onClick({ key }) {
+            history.push(key);
+          },
+        }}
       >
         <Button
           icon={<SettingOutlined />}
diff --git a/packages/core/client/src/schema-component/antd/action/Action.Designer.tsx b/packages/core/client/src/schema-component/antd/action/Action.Designer.tsx
index e13aee2de..a2b69eb03 100644
--- a/packages/core/client/src/schema-component/antd/action/Action.Designer.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.Designer.tsx
@@ -332,18 +332,20 @@ export const ActionDesigner = (props) => {
 
         {isChildCollectionAction && <SchemaSettings.EnableChildCollections collectionName={name} />}
 
-        {!isDelete && [
-          <SchemaSettings.Divider />,
-          <SchemaSettings.Remove
-            removeParentsIfNoChildren
-            breakRemoveOn={(s) => {
-              return s['x-component'] === 'Space' || s['x-component'].endsWith('ActionBar');
-            }}
-            confirm={{
-              title: t('Delete action'),
-            }}
-          />,
-        ]}
+        {!isDelete && (
+          <>
+            <SchemaSettings.Divider />
+            <SchemaSettings.Remove
+              removeParentsIfNoChildren
+              breakRemoveOn={(s) => {
+                return s['x-component'] === 'Space' || s['x-component'].endsWith('ActionBar');
+              }}
+              confirm={{
+                title: t('Delete action'),
+              }}
+            />
+          </>
+        )}
       </MenuGroup>
     </GeneralSchemaDesigner>
   );
diff --git a/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx b/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx
index 74994bda5..2219e5847 100644
--- a/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx
@@ -41,7 +41,7 @@ export const ActionDrawer: ComposedActionDrawer = observer((props) => {
             title={field.title}
             {...others}
             destroyOnClose
-            visible={visible}
+            open={visible}
             onClose={() => setVisible(false, true)}
             className={classNames(
               others.className,
diff --git a/packages/core/client/src/schema-component/antd/action/Action.tsx b/packages/core/client/src/schema-component/antd/action/Action.tsx
index 6f3e2d68d..0b4fee8a4 100644
--- a/packages/core/client/src/schema-component/antd/action/Action.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.tsx
@@ -173,8 +173,8 @@ Action.Popover = observer((props) => {
     <Popover
       {...props}
       destroyTooltipOnHide
-      visible={visible}
-      onVisibleChange={(visible) => {
+      open={visible}
+      onOpenChange={(visible) => {
         setVisible(visible);
       }}
       content={props.children}
diff --git a/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx b/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx
index 5bf7b89bc..27623159e 100644
--- a/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx
+++ b/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx
@@ -24,8 +24,8 @@ export const FilterAction = observer((props: any) => {
       <Popover
         destroyTooltipOnHide
         placement={'bottomLeft'}
-        visible={visible}
-        onVisibleChange={(visible) => {
+        open={visible}
+        onOpenChange={(visible) => {
           setVisible(visible);
         }}
         trigger={'click'}
diff --git a/packages/core/client/src/schema-component/antd/icon-picker/IconPicker.tsx b/packages/core/client/src/schema-component/antd/icon-picker/IconPicker.tsx
index cf183b494..777488696 100644
--- a/packages/core/client/src/schema-component/antd/icon-picker/IconPicker.tsx
+++ b/packages/core/client/src/schema-component/antd/icon-picker/IconPicker.tsx
@@ -17,8 +17,8 @@ function IconField(props: any) {
       <Input.Group compact>
         <Popover
           placement={'bottom'}
-          visible={visible}
-          onVisibleChange={(val) => {
+          open={visible}
+          onOpenChange={(val) => {
             if (disabled) {
               return;
             }
diff --git a/packages/core/client/src/schema-component/antd/input/EllipsisWithTooltip.tsx b/packages/core/client/src/schema-component/antd/input/EllipsisWithTooltip.tsx
index 4b4244a8d..b821bb59b 100644
--- a/packages/core/client/src/schema-component/antd/input/EllipsisWithTooltip.tsx
+++ b/packages/core/client/src/schema-component/antd/input/EllipsisWithTooltip.tsx
@@ -45,8 +45,8 @@ export const EllipsisWithTooltip = forwardRef((props: Partial<IEllipsisWithToolt
 
   return (
     <Popover
-      visible={ellipsis && visible}
-      onVisibleChange={(visible) => {
+      open={ellipsis && visible}
+      onOpenChange={(visible) => {
         setVisible(ellipsis && visible);
       }}
       content={
diff --git a/packages/core/client/src/schema-component/common/sortable-item/SortableItem.tsx b/packages/core/client/src/schema-component/common/sortable-item/SortableItem.tsx
index 552583f22..761783c3d 100644
--- a/packages/core/client/src/schema-component/common/sortable-item/SortableItem.tsx
+++ b/packages/core/client/src/schema-component/common/sortable-item/SortableItem.tsx
@@ -56,10 +56,16 @@ const useSortableItemId = (props) => {
 };
 
 export const SortableItem: React.FC<any> = observer((props) => {
-  const { schema, id, ...others } = useSortableItemProps(props);
-  const removeParentsIfNoChildren = others.removeParentsIfNoChildren ?? true;
+  const { schema, id, removeParentsIfNoChildren, ...others } = useSortableItemProps(props);
   return (
-    <SortableProvider id={id} data={{ insertAdjacent: 'afterEnd', schema: schema, removeParentsIfNoChildren }}>
+    <SortableProvider
+      id={id}
+      data={{
+        insertAdjacent: 'afterEnd',
+        schema: schema,
+        removeParentsIfNoChildren: removeParentsIfNoChildren ?? true,
+      }}
+    >
       <Sortable {...others}>{props.children}</Sortable>
     </SortableProvider>
   );
diff --git a/packages/core/client/src/schema-settings/DataTemplates/components/AsDefaultTemplate.tsx b/packages/core/client/src/schema-settings/DataTemplates/components/AsDefaultTemplate.tsx
index 6176b42a8..f1c152e91 100644
--- a/packages/core/client/src/schema-settings/DataTemplates/components/AsDefaultTemplate.tsx
+++ b/packages/core/client/src/schema-settings/DataTemplates/components/AsDefaultTemplate.tsx
@@ -3,7 +3,7 @@ import { Switch } from 'antd';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-export const AsDefaultTemplate = React.forwardRef((props: any) => {
+export const AsDefaultTemplate = React.forwardRef((props: any, ref) => {
   const array = ArrayBase.useArray();
   const index = ArrayBase.useIndex(props.index);
   const { t } = useTranslation();
diff --git a/packages/core/client/src/schema-settings/SchemaSettings.tsx b/packages/core/client/src/schema-settings/SchemaSettings.tsx
index a2a3b4bbf..09bd09a0b 100644
--- a/packages/core/client/src/schema-settings/SchemaSettings.tsx
+++ b/packages/core/client/src/schema-settings/SchemaSettings.tsx
@@ -118,8 +118,8 @@ export const SchemaSettings: React.FC<SchemaSettingsProps> & SchemaSettingsNeste
   const [visible, setVisible] = useState(false);
   const DropdownMenu = (
     <Dropdown
-      visible={visible}
-      onVisibleChange={(visible) => {
+      open={visible}
+      onOpenChange={(visible) => {
         setVisible(visible);
       }}
       overlay={<Menu>{props.children}</Menu>}
diff --git a/packages/core/client/src/settings-form/SettingsForm.tsx b/packages/core/client/src/settings-form/SettingsForm.tsx
index eb8cf7cce..265ca6408 100644
--- a/packages/core/client/src/settings-form/SettingsForm.tsx
+++ b/packages/core/client/src/settings-form/SettingsForm.tsx
@@ -56,8 +56,8 @@ export const SettingsForm: any = observer((props: any) => {
           <FormContext.Provider value={form}>
             <FieldContext.Provider value={f}>
               <Dropdown
-                visible={dropdownVisible}
-                onVisibleChange={(visible) => setDropdownVisible(visible)}
+                open={dropdownVisible}
+                onOpenChange={(visible) => setDropdownVisible(visible)}
                 overlayStyle={{ width: 200 }}
                 overlay={
                   <Menu>
diff --git a/packages/core/client/src/user/CurrentUser.tsx b/packages/core/client/src/user/CurrentUser.tsx
index 976dc1b81..57769de99 100644
--- a/packages/core/client/src/user/CurrentUser.tsx
+++ b/packages/core/client/src/user/CurrentUser.tsx
@@ -56,8 +56,8 @@ export const CurrentUser = () => {
     <div style={{ display: 'inline-flex', verticalAlign: 'top' }}>
       <DropdownVisibleContext.Provider value={{ visible, setVisible }}>
         <Dropdown
-          visible={visible}
-          onVisibleChange={(visible) => {
+          open={visible}
+          onOpenChange={(visible) => {
             setVisible(visible);
           }}
           overlay={
diff --git a/packages/plugins/import/src/client/ImportModal.tsx b/packages/plugins/import/src/client/ImportModal.tsx
index 386987ea4..421a4b2aa 100644
--- a/packages/plugins/import/src/client/ImportModal.tsx
+++ b/packages/plugins/import/src/client/ImportModal.tsx
@@ -29,7 +29,7 @@ export const ImportModal = (props: any) => {
       title={t('Import Data')}
       width="50%"
       bodyStyle={{ height: 'calc(80vh - 200px)' }}
-      visible={importModalVisible}
+      open={importModalVisible}
       footer={null}
       closable={importStatus === ImportStatus.IMPORTED}
       onCancel={doneHandler}
diff --git a/packages/plugins/multi-app-manager/src/client/index.tsx b/packages/plugins/multi-app-manager/src/client/index.tsx
index f422b0995..a381add2f 100644
--- a/packages/plugins/multi-app-manager/src/client/index.tsx
+++ b/packages/plugins/multi-app-manager/src/client/index.tsx
@@ -7,7 +7,7 @@ import {
 } from '@nocobase/client';
 import { Button, Dropdown, Menu } from 'antd';
 import React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useHistory, Link } from 'react-router-dom';
 import { AppManager } from './AppManager';
 import { AppNameInput } from './AppNameInput';
 import { usePluginUtils } from './utils';
@@ -24,40 +24,32 @@ const MultiAppManager = () => {
     },
   );
   const { t } = usePluginUtils();
-  const menu = (
-    <Menu>
-      {(data?.data || []).map((app) => {
-        let link = `/apps/${app.name}/admin/`;
-        if (app.options?.standaloneDeployment && app.cname) {
-          link = `//${app.cname}`;
-        }
-        return (
-          <Menu.Item
-            key={app.name}
-            onClick={() => {
-              window.open(link, '_blank');
-            }}
-          >
+  const items = [
+    ...(data?.data || []).map((app) => {
+      let link = `/apps/${app.name}/admin/`;
+      if (app.options?.standaloneDeployment && app.cname) {
+        link = `//${app.cname}`;
+      }
+      return {
+        key: app.name,
+        label: (
+          <a href={link} target="_blank" rel="noopener noreferrer">
             {app.displayName || app.name}
-          </Menu.Item>
-        );
-      })}
-      {(data?.data || []).length > 0 && <Menu.Divider />}
-      <Menu.Item
-        onClick={() => {
-          history.push('/admin/settings/multi-app-manager/applications');
-        }}
-      >
-        {t('Manage applications')}
-      </Menu.Item>
-    </Menu>
-  );
+          </a>
+        ),
+      };
+    }),
+    {
+      key: '.manager',
+      label: <Link to="/admin/settings/multi-app-manager/applications">{t('Manage applications')}</Link>,
+    },
+  ];
   return (
     <Dropdown
-      onVisibleChange={(visible) => {
+      onOpenChange={(visible) => {
         run();
       }}
-      overlay={menu}
+      menu={{ items }}
     >
       <Button title={'Apps'} icon={<Icon type={'AppstoreOutlined'} />} />
     </Dropdown>