【GLCC】Higress Console 支持通过表单配置 Wasm 插件

frontend/package.json

@@ -30,6 +30,7 @@
     "@ice/plugin-request": "^1.0.0",
     "@ice/plugin-store": "^1.0.0",
     "@iceworks/spec": "^1.0.0",
+    "@types/js-yaml": "^4.0.9",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.60.1",

frontend/src/locales/en-US/translation.json

@@ -497,6 +497,10 @@
     "seconds": "Sec(s)",
     "tbd": "Still in development. To be released soon...",
     "yes": "Yes",
-    "no": "No"
+    "no": "No",
+    "switchToYAML": "YAML View",
+    "switchToForm": "Form View",
+    "isRequired": "is required",
+    "invalidSchema": "Since schema information cannot be properly parsed, this plugin only supports YAML editing."
   }
 }

frontend/src/locales/zh-CN/translation.json

@@ -497,6 +497,10 @@
     "seconds": "秒",
     "tbd": "页面开发中，即将推出...",
     "yes": "是",
-    "no": "否"
+    "no": "否",
+    "switchToYAML": "YAML视图",
+    "switchToForm": "表单视图",
+    "isRequired": "是必填的",
+    "invalidSchema": "由于 schema 信息无法正常解析，本插件只支持 YAML 编辑方式。"
   }
 }

frontend/src/pages/plugin/components/PluginDrawer/ArrayForm/index.module.css

@@ -0,0 +1,5 @@
+.factor :global {
+  .ant-empty-normal {
+    margin: 0;
+  }
+}

frontend/src/pages/plugin/components/PluginDrawer/ArrayForm/index.tsx

@@ -0,0 +1,222 @@
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button, Form, Input, Select, Table } from 'antd';
+import type { FormInstance } from 'antd/es/form';
+import { uniqueId } from 'lodash';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './index.module.css';
+import i18next from 'i18next';
+
+const EditableContext = React.createContext<FormInstance<any> | null>(null);
+
+interface Item {
+  key: string;
+}
+
+interface EditableRowProps {
+  index: number;
+}
+
+const EditableRow: React.FC<EditableRowProps> = ({ index, ...props }) => {
+  const [form] = Form.useForm();
+  return (
+    <Form form={form} component={false}>
+      <EditableContext.Provider value={form}>
+        <tr {...props} />
+      </EditableContext.Provider>
+    </Form>
+  );
+};
+
+interface EditableCellProps {
+  title: React.ReactNode;
+  editable: boolean;
+  children: React.ReactNode;
+  dataIndex: keyof Item;
+  record: Item;
+  nodeType: 'select' | 'input';
+  handleSave: (record: Item) => void;
+}
+
+const EditableCell: React.FC<EditableCellProps> = ({
+  title,
+  editable,
+  children,
+  dataIndex,
+  nodeType,
+  record,
+  handleSave,
+  ...restProps
+}) => {
+  const { t } = useTranslation();
+  const [editing, setEditing] = useState(true);
+  const inputRef = useRef(null);
+  const form = useContext(EditableContext)!;
+
+  const matchOptions = ['PRE', 'EQUAL', 'REGULAR'].map((v) => {
+    return { label: t(`route.matchTypes.${v}`), value: v };
+  });
+
+  useEffect(() => {
+    form.setFieldsValue({ ...record });
+  }, [editing]);
+
+  const save = async () => {
+    try {
+      const values = await form.validateFields();
+      handleSave({ ...record, ...values });
+    } catch (errInfo) {
+      console.error('Save failed: ', errInfo);
+    }
+  };
+
+  let childNode = children;
+
+  const node = <Input ref={inputRef} onPressEnter={save} onBlur={save} />
+
+  if (editable) {
+    childNode = (
+      <Form.Item
+        style={{ margin: 0 }}
+        name={dataIndex}
+        rules={[
+          {
+            required: true,
+          },
+        ]}
+      >
+        {node}
+      </Form.Item>
+    );
+  }
+
+  return <td {...restProps}>{childNode}</td>;
+};
+
+type EditableTableProps = Parameters<typeof Table>[0];
+
+interface DataType {
+  uid: number;
+}
+
+type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
+
+const ArrayForm: React.FC = ({ array, value, onChange }) => {
+  const { t } = useTranslation();
+
+  const initDataSource = value || [];
+  for (const item of initDataSource) {
+    if (!item.uid) {
+      item.uid = uniqueId();
+    }
+  }
+
+  const [dataSource, setDataSource] = useState<DataType[]>(value || []);
+
+  function getLocalizedText(obj: any, index: string, key: string) { 
+    const i18nObj = obj[`x-${index}-i18n`]; 
+    if(i18next.language === 'en-US') return i18nObj && i18nObj[i18next.language] || key || ''; 
+    else return i18nObj && i18nObj[i18next.language] || obj[index] || '';
+  }
+
+  const defaultColumns: any[] = [];
+  if (array.type === 'object') {
+    Object.entries(array.properties).forEach(([key, prop]) => {
+      let translatedTitle = getLocalizedText(prop, 'title', key);
+      const isRequired = (array.required || []).includes(key);
+      defaultColumns.push({
+        title: translatedTitle,
+        dataIndex: key,
+        editable: true,
+        required: isRequired,
+      });
+    });
+  } else {
+    defaultColumns.push({
+      title: t(array.title),
+      dataIndex: 'Item',
+      editable: true,
+    });
+  }
+
+  defaultColumns.push({
+    dataIndex: 'operation',
+    width: 60,
+    render: (_, record: { uid: number }) =>
+    (dataSource.length >= 1 ? (
+      <div onClick={() => handleDelete(record.uid)}>
+        <DeleteOutlined />
+      </div>
+    ) : null),
+  });
+
+  const handleAdd = () => {
+    const newData: DataType = {
+      uid: uniqueId(),
+    };
+    setDataSource([...dataSource, newData]);
+    onChange([...dataSource, newData]);
+  };
+
+  const handleDelete = (uid: number) => {
+    const newData = dataSource.filter((item) => item.uid !== uid);
+    setDataSource(newData);
+    onChange(newData);
+  };
+
+  const handleSave = (row: DataType) => {
+    const newData = [...dataSource];
+    const index = newData.findIndex((item) => row.uid === item.uid);
+    const item = newData[index];
+    newData.splice(index, 1, {
+      ...item,
+      ...row,
+    });
+    setDataSource(newData);
+    onChange(newData);
+  };
+
+  const components = {
+    body: {
+      row: EditableRow,
+      cell: EditableCell,
+    },
+  };
+
+  const columns = defaultColumns.map((col) => {
+    if (!col.editable) {
+      return col;
+    }
+    return {
+      ...col,
+      onCell: (record: DataType) => ({
+        record,
+        editable: col.editable,
+        dataIndex: col.dataIndex,
+        title: col.title,
+        required: col.required,
+        nodeType: col.dataIndex === 'matchType' ? 'select' : 'input',
+        handleSave,
+      }),
+    };
+  });
+
+  return (
+    <div>
+      <Table
+        components={components}
+        size="small"
+        className={styles.factor}
+        dataSource={dataSource}
+        columns={columns as ColumnTypes}
+        pagination={false}
+        rowKey={(record) => record.uid}
+      />
+      <Button onClick={handleAdd} type="link">
+        <PlusOutlined />
+      </Button>
+    </div>
+  );
+};
+
+export default ArrayForm;

frontend/src/pages/plugin/components/PluginDrawer/GlobalPluginDetail.tsx

@@ -24,13 +24,19 @@ export interface IPropsData {
   name?: string;
   category: string;
 }
+
 export interface IProps {
   data: IPropsData;
   onSuccess: () => void;
+  sharedData: string;
+  setSharedData: (newData: string) => void;
+  enabled: boolean;
+  setEnabled: (newEnabled: boolean) => void;
+  currentTabKey: string
 }
 
 const GlobalPluginDetail = forwardRef((props: IProps, ref) => {
-  const { data, onSuccess } = props;
+  const { data, onSuccess, sharedData, setSharedData, enabled, setEnabled, currentTabKey } = props;
   const { name: pluginName = '', category = '' } = data || {};
 
   const [searchParams] = useSearchParams();
@@ -83,7 +89,7 @@ const GlobalPluginDetail = forwardRef((props: IProps, ref) => {
     onSuccess: (res: IPluginData) => {
       setPluginData(res);
       setRawConfigurations(res.rawConfigurations);
-      setDefaultValue(res.rawConfigurations);
+      setDefaultValue(sharedData);
       getConfig(pluginName);
     },
   });
@@ -101,7 +107,7 @@ const GlobalPluginDetail = forwardRef((props: IProps, ref) => {
         setDefaultValue(exampleRaw);
       }
       form.setFieldsValue({
-        enabled: pluginData?.enabled,
+        enabled: enabled,
       });
     },
   });
@@ -151,6 +157,15 @@ const GlobalPluginDetail = forwardRef((props: IProps, ref) => {
     getData(pluginName);
   }, [pluginName, queryName]);
 
+  useEffect(() => {
+    if (currentTabKey === "yaml" && sharedData) {
+      setDefaultValue(sharedData);
+      form.setFieldsValue({
+        enabled: enabled,
+      });
+    }
+  }, [currentTabKey]);
+
   useImperativeHandle(ref, () => ({
     submit: onSubmit,
   }));
@@ -168,14 +183,20 @@ const GlobalPluginDetail = forwardRef((props: IProps, ref) => {
         {alertStatus.isShow && (
           <Alert style={{ marginBottom: '10px' }} message={alertStatus.message} type="warning" showIcon />
         )}
-        <Form name="basic" form={form} autoComplete="off">
+        <Form name="basic" form={form} autoComplete="off" layout="vertical" >
           <Form.Item label={t('plugins.configForm.enableStatus')} name="enabled" valuePropName="checked">
-            <Switch />
+            <Switch onChange={(val) =>{
+              setEnabled(val);
+            }}/>
           </Form.Item>
 
           <Divider orientation="left">{t('plugins.configForm.dataEditor')}</Divider>
           {!getConfigLoading && !getDataLoading && (
-            <CodeEditor defaultValue={defaultValue} onChange={(val) => setRawConfigurations(val)} />
+            <CodeEditor key={defaultValue} defaultValue={defaultValue} 
+            onChange={(val) => {
+              setRawConfigurations(val);
+              setSharedData(val);
+            }} />
           )}
           {!getConfigLoading && !getDataLoading && !isRoutePlugin && !isDomainPlugin && (
             <Space direction="horizontal" style={{ marginTop: "0.5rem" }}>
@@ -188,4 +209,4 @@ const GlobalPluginDetail = forwardRef((props: IProps, ref) => {
   );
 });
 
-export default GlobalPluginDetail;
+export default GlobalPluginDetail;