feat: support data loader in frontend

web/cypress/integration/route/data-loader-import.spec.js

@@ -0,0 +1,198 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+context('Data Loader import', () => {
+  const selector = {
+    drawer: '.ant-drawer-content',
+    selectDropdown: '.ant-select-dropdown',
+    listTbody: '.ant-table-tbody',
+    listRow: 'tr.ant-table-row-level-0',
+    refresh: '.anticon-reload',
+    notification: '.ant-notification-notice-message',
+    notificationCloseIcon: '.ant-notification-notice-close',
+    fileSelector: '[type=file]',
+    notificationDesc: '.ant-notification-notice-description',
+    task_name: '#task_name',
+    merge_method: '#merge_method',
+  };
+  const data = {
+    route_name_0: 'route_name_0',
+    route_name_1: 'route_name_1',
+    upstream_node0_host_0: '1.1.1.1',
+    upstream_node0_host_1: '2.2.2.2',
+    importErrorMsg: 'required file type is .yaml, .yml or .json but got: .txt',
+    uploadRouteFiles: [
+      '../../../api/test/testdata/import/default.json',
+      '../../../api/test/testdata/import/default.yaml',
+      'import-error.txt',
+    ],
+    // Note: export file's name will be end of a timestamp
+    jsonMask: 'cypress/downloads/*.json',
+    yamlMask: 'cypress/downloads/*.yaml',
+    port: '80',
+    weight: 1,
+    importRouteSuccess: 'Import Successfully',
+    deleteRouteSuccess: 'Delete Route Successfully',
+    deleteUpstreamSuccess: 'Delete Upstream Successfully',
+  };
+  const cases = {
+    API101: '../../../api/test/testdata/import/Postman-API101.yaml',
+  };
+
+  beforeEach(() => {
+    cy.login();
+
+    cy.fixture('selector.json').as('domSelector');
+    cy.fixture('data.json').as('data');
+    cy.fixture('export-route-dataset.json').as('exportFile');
+  });
+
+  it('should import API101 with merge mode', () => {
+    cy.visit('/');
+    cy.contains('Route').click();
+
+    cy.get(selector.refresh).click();
+    cy.contains('Advanced').click();
+    cy.contains('Import').should('be.visible').click();
+
+    // select Data Loader type
+    cy.contains('OpenAPI 3').should('be.visible').click();
+    cy.get(selector.selectDropdown).contains('OpenAPI 3').should('be.visible').click();
+    cy.get(selector.drawer).get(selector.task_name).type('api101_mm');
+    cy.get(selector.fileSelector).attachFile(cases.API101);
+    cy.get(selector.drawer).contains('Submit').click();
+    cy.get(selector.drawer).contains('Import Successfully').should('be.visible');
+    cy.get(selector.drawer).contains('Total 3 route imported, 0 failed').click();
+    cy.get(selector.drawer).contains('Close').click();
+
+    // check result
+    cy.get(selector.listTbody).get(selector.listRow).should('have.length', 3);
+    cy.contains('api101_mm_customer').should('be.visible');
+    cy.contains('api101_mm_customer/{customer_id}').should('be.visible');
+    cy.contains('api101_mm_customers').should('be.visible');
+
+    // remove route
+    for (let i = 0; i < 3; i += 1) {
+      cy.get(selector.listTbody).get(selector.listRow).contains('More').click();
+      cy.contains('Delete').should('be.visible').click();
+      cy.contains('OK').should('be.visible').click();
+      cy.get(selector.notification).should('contain', data.deleteRouteSuccess);
+      cy.get(selector.notificationCloseIcon).click();
+    }
+  });
+
+  it('should import API101 with duplicate upstream', () => {
+    cy.visit('/');
+    cy.contains('Route').click();
+
+    cy.get(selector.refresh).click();
+    cy.contains('Advanced').click();
+    cy.contains('Import').should('be.visible').click();
+
+    // select Data Loader type
+    cy.contains('OpenAPI 3').should('be.visible').click();
+    cy.get(selector.selectDropdown).contains('OpenAPI 3').should('be.visible').click();
+    cy.get(selector.drawer).get(selector.task_name).type('api101_mm');
+    cy.get(selector.fileSelector).attachFile(cases.API101);
+    cy.get(selector.drawer).contains('Submit').click();
+    cy.get(selector.drawer).contains('Import Failed').should('be.visible');
+    cy.get(selector.drawer).contains('Total 1 upstream imported, 1 failed').click();
+    cy.get(selector.drawer).contains('key: api101_mm is conflicted').should('be.visible');
+    cy.get(selector.drawer).contains('Close').click();
+
+    // remove route
+    for (let i = 0; i < 3; i += 1) {
+      cy.get(selector.listTbody).get(selector.listRow).contains('More').click();
+      cy.contains('Delete').should('be.visible').click();
+      cy.contains('OK').should('be.visible').click();
+      cy.get(selector.notification).should('contain', data.deleteRouteSuccess);
+      cy.get(selector.notificationCloseIcon).click();
+    }
+  });
+
+  it('should import API101 with non-merge mode', () => {
+    cy.visit('/');
+    cy.contains('Route').click();
+
+    cy.get(selector.refresh).click();
+    cy.contains('Advanced').click();
+    cy.contains('Import').should('be.visible').click();
+
+    // select Data Loader type
+    cy.contains('OpenAPI 3').should('be.visible').click();
+    cy.get(selector.selectDropdown).contains('OpenAPI 3').should('be.visible').click();
+    cy.get(selector.drawer).get(selector.task_name).type('api101_nmm');
+    cy.get(selector.drawer).get(selector.merge_method).click();
+    cy.get(selector.fileSelector).attachFile(cases.API101);
+    cy.get(selector.drawer).contains('Submit').click();
+    cy.get(selector.drawer).contains('Import Successfully').should('be.visible');
+    cy.get(selector.drawer).contains('Total 5 route imported, 0 failed').click();
+    cy.get(selector.drawer).contains('Close').click();
+
+    // check result
+    cy.get(selector.listTbody).get(selector.listRow).should('have.length', 5);
+
+    // remove route
+    /**/
+  });
+
+  it('should import API101 with duplicate route', () => {
+    cy.visit('/');
+    cy.contains('Route').click();
+
+    cy.get(selector.refresh).click();
+    cy.contains('Advanced').click();
+    cy.contains('Import').should('be.visible').click();
+
+    // select Data Loader type
+    cy.contains('OpenAPI 3').should('be.visible').click();
+    cy.get(selector.selectDropdown).contains('OpenAPI 3').should('be.visible').click();
+    cy.get(selector.drawer).get(selector.task_name).type('api101_nmm');
+    cy.get(selector.drawer).get(selector.merge_method).click();
+    cy.get(selector.fileSelector).attachFile(cases.API101);
+    cy.get(selector.drawer).contains('Submit').click();
+    cy.get(selector.drawer).contains('Import Failed').should('be.visible');
+    cy.get(selector.drawer).contains('Total 5 route imported, 1 failed').click();
+    cy.get(selector.drawer).contains('is duplicated with route api101_nmm_').should('be.visible');
+    cy.get(selector.drawer).contains('Close').click();
+  });
+
+  it('should remove all routes and upstreams', function () {
+    cy.visit('/');
+    cy.contains('Route').click();
+    cy.get(selector.refresh).click();
+    // remove route
+    for (let i = 0; i < 5; i += 1) {
+      cy.get(selector.listTbody).get(selector.listRow).contains('More').click();
+      cy.contains('Delete').should('be.visible').click();
+      cy.contains('OK').should('be.visible').click();
+      cy.get(selector.notification).should('contain', data.deleteRouteSuccess);
+      cy.get(selector.notificationCloseIcon).click();
+    }
+
+    cy.visit('/');
+    cy.contains('Upstream').click();
+    cy.get(selector.refresh).click();
+    // remove route
+    for (let i = 0; i < 2; i += 1) {
+      cy.get(selector.listTbody).get(selector.listRow).contains('Delete').click();
+      cy.contains('Confirm').should('be.visible').click();
+      cy.get(selector.notification).should('contain', data.deleteUpstreamSuccess);
+      cy.get(selector.notificationCloseIcon).click();
+    }
+  });
+});

web/src/locales/en-US/menu.ts

@@ -75,4 +75,5 @@ export default {
   'menu.serverinfo': 'System Info',
   'menu.advanced-feature': 'Advanced',
   'menu.more': 'More',
+  'menu.close': 'Close',
 };

web/src/locales/tr-TR/menu.ts

@@ -75,4 +75,5 @@ export default {
   'menu.serverinfo': 'Sistem Bilgisi',
   'menu.advanced-feature': 'Gelişmiş Özellikler',
   'menu.more': 'Daha Fazla',
+  'menu.close': 'Kapat',
 };

web/src/locales/zh-CN/menu.ts

@@ -72,4 +72,5 @@ export default {
   'menu.serverinfo': '系统信息',
   'menu.advanced-feature': '高级特性',
   'menu.more': '更多',
+  'menu.close': '关闭',
 };

web/src/pages/Route/List.tsx

@@ -28,9 +28,7 @@ import {
   Select,
   Radio,
   Form,
-  Upload,
   Modal,
-  Divider,
   Menu,
   Dropdown,
   Tooltip,
@@ -46,7 +44,6 @@ import { omit } from 'lodash';
 
 import { DELETE_FIELDS } from '@/constants';
 import { timestampToLocaleString } from '@/helpers';
-import type { RcFile } from 'antd/lib/upload';
 
 import {
   update,
@@ -56,11 +53,11 @@ import {
   fetchLabelList,
   updateRouteStatus,
   exportRoutes,
-  importRoutes,
 } from './service';
 import { DebugDrawView } from './components/DebugViews';
 import { RawDataEditor } from '@/components/RawDataEditor';
 import { EXPORT_FILE_MIME_TYPE_SUPPORTED } from './constants';
+import DataLoaderImport from '@/pages/Route/components/DataLoader/Import';
 
 const { OptGroup, Option } = Select;
 
@@ -81,8 +78,7 @@ const Page: React.FC = () => {
 
   const [labelList, setLabelList] = useState<LabelList>({});
   const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
-  const [uploadFileList, setUploadFileList] = useState<RcFile[]>([]);
-  const [showImportModal, setShowImportModal] = useState(false);
+  const [showImportDrawer, setShowImportDrawer] = useState(false);
   const [visible, setVisible] = useState(false);
   const [rawData, setRawData] = useState<Record<string, any>>({});
   const [id, setId] = useState('');
@@ -154,27 +150,6 @@ const Page: React.FC = () => {
     });
   };
 
-  const handleImport = () => {
-    const formData = new FormData();
-    if (!uploadFileList[0]) {
-      notification.warn({
-        message: formatMessage({ id: 'page.route.button.selectFile' }),
-      });
-      return;
-    }
-    formData.append('file', uploadFileList[0]);
-    formData.append('type', 'openapi3');
-
-    importRoutes(formData).then(() => {
-      handleTableActionSuccessResponse(
-        `${formatMessage({ id: 'page.route.button.importOpenApi' })} ${formatMessage({
-          id: 'component.status.success',
-        })}`,
-      );
-      setShowImportModal(false);
-    });
-  };
-
   const ListToolbar = () => {
     const tools = [
       {
@@ -194,11 +169,10 @@ const Page: React.FC = () => {
         },
       },
       {
-        name: formatMessage({ id: 'page.route.button.importOpenApi' }),
+        name: formatMessage({ id: 'page.route.data_loader.import' }),
         icon: <ImportOutlined />,
         onClick: () => {
-          setUploadFileList([]);
-          setShowImportModal(true);
+          setShowImportDrawer(true);
         },
       },
     ];
@@ -613,45 +587,15 @@ const Page: React.FC = () => {
           );
         }}
       />
-      <Modal
-        title={formatMessage({ id: 'page.route.button.importOpenApi' })}
-        visible={showImportModal}
-        okText={formatMessage({ id: 'component.global.confirm' })}
-        onOk={handleImport}
-        onCancel={() => {
-          setShowImportModal(false);
-        }}
-      >
-        <Upload
-          fileList={uploadFileList as any}
-          beforeUpload={(file) => {
-            setUploadFileList([file]);
-            return false;
-          }}
-          onRemove={() => {
-            setUploadFileList([]);
+      {showImportDrawer && (
+        <DataLoaderImport
+          onClose={() => setShowImportDrawer(false)}
+          onFinish={() => {
+            checkPageList(ref);
+            setShowImportDrawer(false);
           }}
-        >
-          <Button type="primary" icon={<ImportOutlined />}>
-            {formatMessage({ id: 'page.route.button.selectFile' })}
-          </Button>
-        </Upload>
-        <Divider />
-        <div>
-          <p>{formatMessage({ id: 'page.route.instructions' })}:</p>
-          <p>
-            <a
-              href="https://apisix.apache.org/docs/dashboard/IMPORT_OPENAPI_USER_GUIDE"
-              target="_blank"
-            >
-              1.{' '}
-              {`${formatMessage({ id: 'page.route.import' })} ${formatMessage({
-                id: 'page.route.instructions',
-              })}`}
-            </a>
-          </p>
-        </div>
-      </Modal>
+        />
+      )}
     </PageHeaderWrapper>
   );
 };