fix(client): fix some warnings (#1934)

* fix(client): fix some warnings

* fix(client): fix warning

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 />}

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>
   );

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,

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}

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'}

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;
             }

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={

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>
   );

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();

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>}

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>

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={

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}

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>