fix: modify the order of storage plugin

Signed-off-by: liuying <liu.ying@99cloud.net>

src/pages/cluster/components/plugin/AddStorage.jsx

@@ -18,7 +18,16 @@ import React, { useEffect, useReducer, useRef } from 'react';
 import Tabs from 'components/Tabs';
 import styles from './index.less';
 import RenderForm from './RenderForm';
-import { cloneDeep, uniq, omit, set, assign, isArray, isMatch } from 'lodash';
+import {
+  cloneDeep,
+  uniq,
+  omit,
+  set,
+  assign,
+  isArray,
+  isMatch,
+  orderBy,
+} from 'lodash';
 import { useParams, useHistory } from 'react-router-dom';
 import { encodeProperty } from 'utils';
 import Notify from 'components/Notify';
@@ -62,7 +71,7 @@ const Storage = observer((props) => {
         .map((item) => item?.name)
         .filter((item) => !!item);
 
-      const newTabs = cloneDeep(storageComponents).map((item) => {
+      let newTabs = cloneDeep(storageComponents).map((item) => {
         const { properties = {} } = item.schema;
 
         delete properties.isDefaultSC;
@@ -111,6 +120,8 @@ const Storage = observer((props) => {
         };
       });
 
+      newTabs = orderBy(newTabs, ['deprecated'], 'asc');
+
       setState({
         ...state,
         tabs: newTabs,

src/pages/cluster/components/plugin/StorageForm.jsx

@@ -17,7 +17,7 @@
 import React, { useEffect } from 'react';
 import { observer } from 'mobx-react';
 import Tabs from 'components/Tabs';
-import { cloneDeep, uniq, set, isMatch, isEmpty } from 'lodash';
+import { cloneDeep, uniq, set, isMatch, isEmpty, orderBy } from 'lodash';
 import RenderForm from './RenderForm';
 import { Divider, Button } from 'antd';
 import { Context } from './Context';
@@ -55,7 +55,7 @@ const StorageForm = (props) => {
   useEffect(() => {
     if (!isEmpty(storageTabs)) return;
 
-    const newTabs = cloneDeep(storageComponents).map((item) => {
+    let newTabs = cloneDeep(storageComponents).map((item) => {
       const { name } = item;
       const { properties = {} } = item.schema;
 
@@ -114,9 +114,10 @@ const StorageForm = (props) => {
         formInstances: [],
       };
     });
+    newTabs = orderBy(newTabs, ['deprecated'], 'asc');
 
     updateContext({
-      storageCurrent: storageComponents[0]?.name,
+      storageCurrent: newTabs[0]?.name,
       storageTabs: newTabs,
     });
   }, [storageComponents]);