From 764a04ea3e0f2fdfa50b69fc51bbd14fc6347295 Mon Sep 17 00:00:00 2001
From: Qi Guo <979918879@qq.com>
Date: Wed, 10 May 2023 13:51:32 +0800
Subject: [PATCH] feat: disable route's export OpenAPI func (#2802)

---
 .../en/latest/modules/data_loader/openapi3.md |  9 --
 ...e-create-edit-delete-plugin-template.cy.js |  3 +
 web/src/pages/Route/List.tsx                  | 87 +------------------
 web/src/pages/Route/service.ts                |  6 +-
 4 files changed, 6 insertions(+), 99 deletions(-)

diff --git a/docs/en/latest/modules/data_loader/openapi3.md b/docs/en/latest/modules/data_loader/openapi3.md
index f3c5be6c45..433aaf78a4 100644
--- a/docs/en/latest/modules/data_loader/openapi3.md
+++ b/docs/en/latest/modules/data_loader/openapi3.md
@@ -113,12 +113,3 @@ Save the upstream configuration.
 6. Test API
 
 Use the test tool to call the API to determine if it is configured correctly.
-
-### Export
-
-1. Open the route, and select routes you want to export.
-   ![Select route](../../../../assets/images/modules/data_loader/openapi3-7.png)
-2. Click `Export OpenAPI` button.
-   ![Select route](../../../../assets/images/modules/data_loader/openapi3-8.png)
-3. Select the export format, eg `Yaml`. Then click `Confirm` to export.
-   ![Select route](../../../../assets/images/modules/data_loader/openapi3-9.png)
diff --git a/web/cypress/e2e/rest/pluginTemplate-create-edit-delete-plugin-template.cy.js b/web/cypress/e2e/rest/pluginTemplate-create-edit-delete-plugin-template.cy.js
index 8cda4a74e6..35e31aa667 100644
--- a/web/cypress/e2e/rest/pluginTemplate-create-edit-delete-plugin-template.cy.js
+++ b/web/cypress/e2e/rest/pluginTemplate-create-edit-delete-plugin-template.cy.js
@@ -46,7 +46,9 @@ context('Create Configure and Delete PluginTemplate', () => {
 
   it('should create pluginTemplate', function () {
     cy.visit('/');
+    cy.intercept('GET', '/apisix/admin/routes?*').as('view');
     cy.contains('Route').click();
+    cy.wait('@view');
     cy.get(selector.empty).should('be.visible');
     cy.contains('Advanced').should('be.visible').click();
     cy.contains('Advanced').trigger('mouseover');
@@ -95,6 +97,7 @@ context('Create Configure and Delete PluginTemplate', () => {
     cy.contains('button', 'Search').click();
     cy.contains(data.pluginTemplateName).siblings().contains('Configure').click();
 
+    cy.get(selector.description).should('have.value', data.pluginTemplateName);
     cy.get(selector.description).clear().type(data.pluginTemplateName2);
     cy.contains('Next').click();
     cy.contains('Next').click();
diff --git a/web/src/pages/Route/List.tsx b/web/src/pages/Route/List.tsx
index 7ff4d7de2a..aa561c630f 100755
--- a/web/src/pages/Route/List.tsx
+++ b/web/src/pages/Route/List.tsx
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { DownOutlined, ExportOutlined, ImportOutlined, PlusOutlined } from '@ant-design/icons';
+import { DownOutlined, ImportOutlined, PlusOutlined } from '@ant-design/icons';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import type { ActionType, ProColumns } from '@ant-design/pro-table';
 import ProTable from '@ant-design/pro-table';
@@ -22,23 +22,17 @@ import { useThrottleFn } from 'ahooks';
 import {
   Button,
   Dropdown,
-  Form,
   Menu,
   Modal,
   notification,
   Popconfirm,
-  Radio,
   Select,
   Space,
   Table,
   Tag,
   Tooltip,
 } from 'antd';
-import { saveAs } from 'file-saver';
-import { js_beautify } from 'js-beautify';
-import yaml from 'js-yaml';
 import { omit } from 'lodash';
-import moment from 'moment';
 import type { ReactNode } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
 import { history, useIntl } from 'umi';
@@ -50,16 +44,7 @@ import usePagination from '@/hooks/usePagination';
 import DataLoaderImport from '@/pages/Route/components/DataLoader/Import';
 
 import { DebugDrawView } from './components/DebugViews';
-import { EXPORT_FILE_MIME_TYPE_SUPPORTED } from './constants';
-import {
-  create,
-  exportRoutes,
-  fetchLabelList,
-  fetchList,
-  remove,
-  update,
-  updateRouteStatus,
-} from './service';
+import { create, fetchLabelList, fetchList, remove, update, updateRouteStatus } from './service';
 
 const { OptGroup, Option } = Select;
 
@@ -72,11 +57,6 @@ const Page: React.FC = () => {
     Publish,
   }
 
-  enum ExportFileType {
-    JSON = 0,
-    YAML,
-  }
-
   const [labelList, setLabelList] = useState<LabelList>({});
   const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
   const [showImportDrawer, setShowImportDrawer] = useState(false);
@@ -130,37 +110,6 @@ const Page: React.FC = () => {
     },
   );
 
-  const handleExport = (exportFileType: ExportFileType) => {
-    exportRoutes(selectedRowKeys.join(',')).then((resp) => {
-      let exportFile: string;
-      let exportFileName = `APISIX_routes_${moment().format('YYYYMMDDHHmmss')}`;
-
-      switch (exportFileType) {
-        case ExportFileType.YAML:
-          exportFile = yaml.dump(resp.data);
-          exportFileName = `${exportFileName}.${ExportFileType[
-            ExportFileType.YAML
-          ].toLocaleLowerCase()}`;
-          break;
-        case ExportFileType.JSON:
-        default:
-          exportFile = js_beautify(JSON.stringify(resp.data), {
-            indent_size: 2,
-          });
-          exportFileName = `${exportFileName}.${ExportFileType[
-            ExportFileType.JSON
-          ].toLocaleLowerCase()}`;
-          break;
-      }
-
-      const blob = new Blob([exportFile], {
-        type: EXPORT_FILE_MIME_TYPE_SUPPORTED[exportFileType],
-      });
-
-      saveAs(window.URL.createObjectURL(blob), exportFileName);
-    });
-  };
-
   const ListToolbar = () => {
     const tools = [
       {
@@ -277,37 +226,6 @@ const Page: React.FC = () => {
     );
   };
 
-  const ListFooter: React.FC = () => {
-    const [exportFileTypeForm] = Form.useForm();
-    return (
-      <Popconfirm
-        title={
-          <Form form={exportFileTypeForm} initialValues={{ fileType: ExportFileType.JSON }}>
-            <div style={{ marginBottom: 8 }}>
-              {formatMessage({ id: 'page.route.exportRoutesTips' })}
-            </div>
-            <Form.Item name="fileType" noStyle>
-              <Radio.Group>
-                <Radio value={ExportFileType.JSON}>Json</Radio>
-                <Radio value={ExportFileType.YAML}>Yaml</Radio>
-              </Radio.Group>
-            </Form.Item>
-          </Form>
-        }
-        onConfirm={() => {
-          handleExport(exportFileTypeForm.getFieldValue('fileType'));
-        }}
-        okText={formatMessage({ id: 'component.global.confirm' })}
-        cancelText={formatMessage({ id: 'component.global.cancel' })}
-        disabled={selectedRowKeys.length === 0}
-      >
-        <Button type="primary" disabled={selectedRowKeys.length === 0}>
-          <ExportOutlined />
-          {formatMessage({ id: 'page.route.button.exportOpenApi' })}
-        </Button>
-      </Popconfirm>
-    );
-  };
   const tagStyle = {
     maxWidth: '200px',
     overflow: 'hidden',
@@ -612,7 +530,6 @@ const Page: React.FC = () => {
           </Button>,
           <ListToolbar />,
         ]}
-        footer={() => <ListFooter />}
         scroll={{ x: 1300 }}
       />
       <DebugDrawView
diff --git a/web/src/pages/Route/service.ts b/web/src/pages/Route/service.ts
index 794db91598..429a8fc7d4 100644
--- a/web/src/pages/Route/service.ts
+++ b/web/src/pages/Route/service.ts
@@ -41,7 +41,7 @@ export const fetchItem = (rid: number) =>
   request(`/routes/${rid}`).then((data) => transformRouteData(data.data));
 
 export const fetchList = ({ current = 1, pageSize = 10, ...res }) => {
-  const { labels = [], API_VERSION = [], host = "", id = "", desc = "", status} = res;
+  const { labels = [], API_VERSION = [], host = '', id = '', desc = '', status } = res;
 
   return request<Res<ResListData<RouteModule.ResponseBody>>>('/routes', {
     params: {
@@ -115,10 +115,6 @@ export const fetchServiceList = () =>
     total: data.total_size,
   }));
 
-export const exportRoutes = (ids?: string) => {
-  return request(`/export/routes/${ids}`);
-};
-
 export const importRoutes = (formData: FormData) => {
   return request('/import/routes', {
     method: 'POST',