[type:feature] adapt namespce config import export

src/components/GlobalHeader/AddModal.js

@@ -15,10 +15,11 @@
  * limitations under the License.
  */
 
-import React, { Component, forwardRef, Fragment } from "react";
-import { Modal, Form, Button } from "antd";
+import React, { Component, forwardRef } from "react";
+import { Modal, Form, Button, Dropdown, Menu, Icon } from "antd";
 import { connect } from "dva";
 import { getIntlContent } from "../../utils/IntlUtils";
+import { defaultNamespaceId } from "../_utils/utils";
 
 const FormItem = Form.Item;
 const ChooseFile = forwardRef(({ onChange, file }, ref) => {
@@ -45,23 +46,81 @@ const ChooseFile = forwardRef(({ onChange, file }, ref) => {
     </>
   );
 });
+
+const NamespaceSelector = forwardRef(
+  ({ onChange, currentNamespaceId, namespaces }) => {
+    const handleNamespaceChange = (value) => {
+      onChange(value.key);
+    };
+    return (
+      <Dropdown
+        overlay={
+          <Menu onClick={handleNamespaceChange}>
+            {namespaces.map((namespace) => {
+              let isCurrentNamespace =
+                currentNamespaceId === namespace.namespaceId;
+              return (
+                <Menu.Item
+                  key={namespace.namespaceId}
+                  disabled={isCurrentNamespace}
+                >
+                  <span>{namespace.name}</span>
+                </Menu.Item>
+              );
+            })}
+          </Menu>
+        }
+      >
+        <Button>
+          <a
+            className="ant-dropdown-link"
+            style={{ fontWeight: "bold" }}
+            onClick={(e) => e.preventDefault()}
+          >
+            {`${getIntlContent("SHENYU.SYSTEM.NAMESPACE")} / ${
+              namespaces.find(
+                (namespace) => currentNamespaceId === namespace.namespaceId,
+              )?.name
+            } `}
+          </a>
+          <Icon type="down" />
+        </Button>
+      </Dropdown>
+    );
+  },
+);
+
 @connect(({ global }) => ({
   platform: global.platform,
+  namespaces: global.namespaces,
 }))
 class AddModal extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      currentNamespaceId: defaultNamespaceId,
+    };
+  }
+
   handleSubmit = (e) => {
     const { form, handleOk } = this.props;
     e.preventDefault();
     form.validateFieldsAndScroll((err, values) => {
       if (!err) {
-        let { file } = values;
-        handleOk({ file });
+        let { namespace, file } = values;
+        handleOk({ namespace, file });
       }
     });
   };
 
+  handleNamespacesValueChange = (value) => {
+    this.setState({ currentNamespaceId: value });
+  };
+
   render() {
-    let { handleCancel, form, config, file } = this.props;
+    let { handleCancel, form, config, file, namespaces } = this.props;
+    let { currentNamespaceId } = this.state;
     const { getFieldDecorator } = form;
     const formItemLayout = {
       labelCol: {
@@ -87,6 +146,26 @@ class AddModal extends Component {
         onCancel={handleCancel}
       >
         <Form onSubmit={this.handleSubmit} className="login-form">
+          <FormItem
+            {...formItemLayout}
+            label={getIntlContent("SHENYU.SYSTEM.NAMESPACE")}
+          >
+            {getFieldDecorator("namespace", {
+              rules: [
+                {
+                  required: true,
+                },
+              ],
+              initialValue: currentNamespaceId,
+              valuePropName: "namespace",
+            })(
+              <NamespaceSelector
+                onChange={this.handleNamespacesValueChange}
+                currentNamespaceId={currentNamespaceId}
+                namespaces={namespaces}
+              />,
+            )}
+          </FormItem>
           <FormItem
             {...formItemLayout}
             label={getIntlContent("SHENYU.COMMON.IMPORT")}

src/components/GlobalHeader/index.js

@@ -224,8 +224,8 @@ class GlobalHeader extends PureComponent {
     this.setState({ popup: "" });
   };
 
-  // 导出数据
-  exportAllClick = () => {
+  // export configs
+  exportConfigClick = () => {
     const { dispatch } = this.props;
     dispatch({
       type: "common/exportAll",
@@ -273,7 +273,7 @@ class GlobalHeader extends PureComponent {
           {getIntlContent("SHENYU.GLOBALHEADER.CHANGE.PASSWORD")}
         </Menu.Item>
         {this.checkAuth("system:manager:exportConfig") && (
-          <Menu.Item key="2" onClick={this.exportAllClick}>
+          <Menu.Item key="2" onClick={this.exportConfigClick}>
             <Icon type="export" /> {getIntlContent("SHENYU.COMMON.EXPORT")}
           </Menu.Item>
         )}
@@ -327,6 +327,20 @@ class GlobalHeader extends PureComponent {
               </Dropdown>
             </div>
           )}
+          {this.checkAuth("system:manager:importConfig") && (
+            <div className={styles.item}>
+              <Button onClick={this.importConfigClick}>
+                <Icon type="import" /> {getIntlContent("SHENYU.COMMON.IMPORT")}
+              </Button>
+            </div>
+          )}
+          {this.checkAuth("system:manager:exportConfig") && (
+            <div className={styles.item}>
+              <Button onClick={this.exportConfigClick}>
+                <Icon type="import" /> {getIntlContent("SHENYU.COMMON.EXPORT")}
+              </Button>
+            </div>
+          )}
           <div className={styles.item}>
             <Dropdown placement="bottomCenter" overlay={this.state.help}>
               <Button>

src/locales/en-US.json

@@ -403,7 +403,7 @@
   "SHENYU.DOCUMENT.TAG.TABLE.CREATETIME": "Create Time",
   "SHENYU.DOCUMENT.TAG.TABLE.MODIFYTIME": "Modify Time",
   "SHENYU.COMMON.REQUIRED": "Required",
-  "SHENYU.COMMON.EXPORT": "Export All Config",
+  "SHENYU.COMMON.EXPORT": "Export Configs",
   "SHENYU.COMMON.IMPORT": "Import Configs",
   "SHENYU.COMMON.IMPORT.RESULT": "Import Result",
   "SHENYU.COMMON.IMPORT.METADATA.RESULT": "meta import fail message",

src/services/api.js

@@ -539,7 +539,7 @@ export async function querySecretInfo() {
   return fetch(`${baseUrl}/platform/secretInfo`).catch(() => {});
 }
 
-// export all config
+// export configs
 export async function asyncConfigExport() {
   return download(`${baseUrl}/configs/export`, {
     method: `GET`,
@@ -549,6 +549,7 @@ export async function asyncConfigExport() {
 // import configs
 export async function asyncConfigImport(params) {
   const formData = new FormData();
+  formData.append("namespace", params.namespace);
   formData.append("file", params.file);
   return request(`${baseUrl}/configs/import`, {
     method: `POST`,