feat: set serverUrlMap with env, update cypress, update stylelint

.github/workflows/frontend-e2e-test.yml

@@ -88,7 +88,7 @@ jobs:
 
       - name: Start frontend then test
         run: |
-          yarn start-server-and-test 'cross-env SERVE_ENV=test yarn start' http-get://localhost:8000 'cross-env CYPRESS_SERVE_ENV=test yarn cypress run --spec "**/integration/${{matrix.folderPrefix}}/**.spec.js"'
+          yarn start-server-and-test 'cross-env SERVE_ENV=test UMI_UI=none MOCK=none SERVE_URL_TEST=http://localhost:9000 yarn start' http-get://localhost:8000 'cross-env CYPRESS_SERVE_ENV=test SERVE_URL_TEST=http://localhost:9000 yarn cypress run --spec "**/e2e/${{matrix.folderPrefix}}/**.cy.js"'
 
       - name: Report e2e coverage
         run: npx nyc report --reporter=text-summary

.github/workflows/test-frontend-multiple-node-build.yml

@@ -25,7 +25,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x, 16.x]
+        node-version: [14.x, 16.x]
 
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:

.gitignore

@@ -69,3 +69,5 @@ web/public/monaco-editor/
 *.swp
 *.swo
 
+# .env
+.env*

docs/en/latest/develop.md

@@ -67,12 +67,18 @@ $ make api-stop
 $ cd ./web
 ```
 
-2. Please change the `manager-api` address in the `config/defaultSettings.ts` file. If you follow this guidelines, the address may need to be set as below.
+2. Please change the `manager-api` address in the `web/.env` file. If you follow this guidelines, the address may need to be set as below.
 
+> All commands here are for Linux environment, other systems please use the corresponding commands for your platform. You are also welcome to contribute your own methods.
+
+```bash
+echo "SERVE_URL_DEV=http://localhost:9000" > web/.env
 ```
-serveUrlMap:{
-    dev: 'http://localhost:9000'
-}
+
+If you don't want to create the file, you can also export the variable.
+
+```bash
+export SERVE_URL_DEV=http://localhost:9000
 ```
 
 3. Launch development mode

web/.stylelintrc.js

@@ -14,8 +14,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const fabric = require('@umijs/fabric');
-
 module.exports = {
-  ...fabric.stylelint,
+  extends: [
+    'stylelint-config-standard',
+    'stylelint-config-css-modules',
+    'stylelint-config-rational-order',
+    'stylelint-config-prettier',
+  ],
+  plugins: ['stylelint-order', 'stylelint-declaration-block-no-ignored-properties'],
+  customSyntax: 'postcss-less',
+  rules: {
+    'no-descending-specificity': null,
+    'function-url-quotes': 'always',
+    'font-family-no-missing-generic-family-keyword': null,
+    'plugin/declaration-block-no-ignored-properties': true,
+    'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
+    'selector-class-pattern': null,
+  },
+  ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
 };

web/config/config.ts

@@ -20,7 +20,7 @@ import defaultSettings from './defaultSettings';
 import proxy from './proxy';
 import routes from './routes';
 
-const { REACT_APP_ENV } = process.env;
+const { REACT_APP_ENV, SERVE_URL_DEV, SERVE_URL_TEST } = process.env;
 
 export default defineConfig({
   hash: true,
@@ -49,6 +49,10 @@ export default defineConfig({
   publicPath: '/',
   define: {
     REACT_APP_ENV: REACT_APP_ENV || false,
+    'process.env': {
+      SERVE_URL_DEV,
+      SERVE_URL_TEST,
+    },
   },
   // Theme for antd: https://ant.design/docs/react/customize-theme-cn
   theme: {

web/config/defaultSettings.ts

@@ -16,7 +16,9 @@
  */
 import { Settings as LayoutSettings } from '@ant-design/pro-layout';
 
-export default {
+const { REACT_APP_ENV, SERVE_ENV, SERVE_URL_DEV, SERVE_URL_TEST, CYPRESS_SERVE_ENV } = process.env;
+
+const defaultSettings = {
   navTheme: 'dark',
   primaryColor: '#1890ff',
   layout: 'mix',
@@ -32,13 +34,42 @@ export default {
   pwa: false,
   iconfontUrl: '',
   serveUrlMap: {
-    dev: 'http://139.217.190.60',
-    test: 'http://localhost:9000',
+    dev: SERVE_URL_DEV,
+    test: SERVE_URL_TEST,
+  },
+  overwrite(env: Record<string, string>) {
+    const { SERVE_URL_DEV, SERVE_URL_TEST } = env;
+    this.serveUrlMap = {
+      dev: SERVE_URL_DEV,
+      test: SERVE_URL_TEST,
+    };
+    return this;
   },
 } as LayoutSettings & {
   pwa: boolean;
   serveUrlMap: {
     dev: string;
     test: string;
   };
+  overwrite: Function;
+};
+
+const { dev, test } = defaultSettings.serveUrlMap;
+const throwPromptError = (message: TemplateStringsArray) => {
+  throw new Error(
+    `Please set '${message[0]}' in 'web/.env' file. Guide: https://apisix.apache.org/docs/dashboard/develop/#web`,
+  );
 };
+
+console.log(defaultSettings.serveUrlMap);
+const envs = [REACT_APP_ENV, SERVE_ENV, CYPRESS_SERVE_ENV];
+
+if (envs.some((v) => v === 'test') && !test) {
+  throwPromptError`SERVE_URL_TEST`;
+}
+
+if (envs.some((v) => v === 'dev') && !dev) {
+  throwPromptError`SERVE_URL_DEV`;
+}
+
+export default defaultSettings;

web/cypress.config.ts

@@ -0,0 +1,64 @@
+/*
+ * 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.
+ */
+import { defineConfig } from 'cypress';
+import * as globby from 'globby';
+import 'dotenv/config';
+import defaultSettings from './config/defaultSettings';
+
+const DEFAULT_SETTINGS = defaultSettings.overwrite(process.env)
+
+export default defineConfig({
+  viewportWidth: 1920,
+  viewportHeight: 1080,
+  video: true,
+  videoUploadOnPasses: false,
+  retries: {
+    runMode: 3,
+    openMode: 0,
+  },
+  env: {
+    ...process.env,
+    DEFAULT_SETTINGS,
+    SERVE_URL: DEFAULT_SETTINGS.serveUrlMap[process.env.CYPRESS_SERVE_ENV || 'dev']
+  },
+  e2e: {
+    baseUrl: 'http://localhost:8000',
+    setupNodeEvents(on, config) {
+      // `on` is used to hook into various events Cypress emits
+      // `config` is the resolved Cypress config
+      on('task', {
+        findFile(mask: any) {
+          if (!mask) {
+            throw new Error('Missing a file mask to search');
+          }
+
+          return globby(mask).then((list) => {
+            if (!list.length) {
+              throw new Error(`Could not find files matching mask "${mask}"`);
+            }
+
+            return list[0];
+          });
+        },
+      });
+
+      require('@cypress/code-coverage/task')(on, config);
+      require('cypress-localstorage-commands/plugin')(on, config);
+      return config;
+    },
+  },
+});

web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js → web/cypress/e2e/plugin/create-delete-in-drawer-plugin.cy.js

@@ -17,7 +17,7 @@
 /* eslint-disable no-undef */
 
 context('Delete Plugin List with the Drawer', () => {
-  const timeout = 5000;
+  const timeout = 4000;
 
   const selector = {
     pluginCardBordered: '.ant-card-bordered',
@@ -42,8 +42,14 @@ context('Delete Plugin List with the Drawer', () => {
     jwtAuthPlugin: 'jwt-auth',
   };
 
-  beforeEach(() => {
+  before(() => {
+    cy.clearLocalStorageSnapshot();
     cy.login();
+    cy.saveLocalStorage();
+  });
+
+  beforeEach(() => {
+    cy.restoreLocalStorage();
   });
 
   it('should visit plugin market and enable plugin', function () {
@@ -115,6 +121,7 @@ context('Delete Plugin List with the Drawer', () => {
     });
     cy.get(selector.notification).should('contain', 'Delete Plugin Successfully');
     cy.get(selector.notificationCloseIcon).click({ multiple: true });
+    cy.wait(timeout);
     cy.get(selector.empty).should('be.visible');
   });
 
@@ -134,6 +141,7 @@ context('Delete Plugin List with the Drawer', () => {
       .should('be.visible')
       .within(() => {
         cy.get(selector.disabledSwitcher).click();
+        cy.wait(timeout);
         cy.get(selector.checkedSwitcher).should('exist');
       });
     cy.contains('button', 'Submit').click();
@@ -184,8 +192,8 @@ context('Delete Plugin List with the Drawer', () => {
         cy.get(selector.disabledSwitcher).click();
         cy.get(selector.checkedSwitcher).should('exist');
       });
-    cy.contains('button', 'Submit').click();
-
+    cy.contains('button', 'Submit').click({ force: true });
+    cy.wait(timeout);
     cy.get(selector.tab).within(() => {
       cy.contains(selector.tabBtn, 'Enable').click({
         force: true,
@@ -231,10 +239,12 @@ context('Delete Plugin List with the Drawer', () => {
             force: true,
           });
         });
+
+      cy.wait(timeout);
       cy.get(selector.drawer)
         .should('be.visible')
         .within(() => {
-          cy.get(selector.disabledSwitcher).click();
+          cy.get(selector.disabledSwitcher).focus().click();
           cy.get(selector.checkedSwitcher).should('exist');
         });
       cy.contains('button', 'Submit').click();
@@ -289,10 +299,9 @@ context('Delete Plugin List with the Drawer', () => {
         .within(() => {
           cy.get(selector.checkedSwitcher).should('exist');
         });
-      cy.contains('button', 'Delete').click();
-      cy.contains('button', 'Confirm').click({
-        force: true,
-      });
+      cy.wait(timeout);
+      cy.contains('button', 'Delete').click({ force: true });
+      cy.contains('button', 'Confirm').click({ force: true });
       cy.get(selector.drawer, {
         timeout,
       }).should('not.exist');