Merge 4b0cb0a into e68b3aa

web/cypress/e2e/rest/pluginTemplate-create-plugin-template-with-route.cy.js

@@ -92,7 +92,6 @@ context('Create PluginTemplate Binding To Route', () => {
   it('should delete the pluginTemplate failure', function () {
     cy.visit('plugin-template/list');
     cy.get(selector.refresh).click();
-
     cy.get(selector.descriptionSelector).type(data.pluginTemplateName);
     cy.contains('button', 'Search').click();
     cy.contains(data.pluginTemplateName).siblings().contains('Delete').click();
@@ -103,7 +102,6 @@ context('Create PluginTemplate Binding To Route', () => {
 
   it('should edit the route with pluginTemplate', function () {
     cy.visit('routes/list');
-
     cy.get(selector.nameSelector).type(data.routeName);
     cy.contains('Search').click();
     cy.contains(data.routeName).siblings().contains('Configure').click();

web/cypress/e2e/rest/upstream-create_and_edit_upstream_with_no_nodes.cy.js

@@ -40,6 +40,7 @@ context('Create and Delete Upstream', () => {
   it('should create upstream with no nodes', function () {
     cy.visit('/');
     cy.contains('Upstream').click();
+
     cy.contains('Create').click();
 
     cy.get(selector.name).type(data.upstreamName);

web/cypress/e2e/route/batch-delete-route.cy.js

@@ -72,6 +72,7 @@ context('Create and Batch Deletion Routes', () => {
       // config label
       cy.contains('Manage').click();
 
+      // eslint-disable-next-line @typescript-eslint/no-loop-func
       cy.get(selector.drawerBody).within(($drawer) => {
         cy.wrap($drawer)
           .contains('button', 'Add')
@@ -115,14 +116,15 @@ context('Create and Batch Deletion Routes', () => {
   it('should batch delete the name of the route', function () {
     cy.contains('Route').click();
     const cases = [
-      [1, 0, 2], //full match
+      [1, 0, 2], // full match
       [0, 1, 2], // partial match
-      [0, 1, 2], //none match
+      [0, 1, 2], // none match
     ];
     const prefix = 'test';
     cy.wrap([0, 2, 'x']).each(($n, i) => {
       cy.get(selector.nameSearchInput).clear().type(`${prefix}${$n}`);
       cy.contains('Search').click();
+      // eslint-disable-next-line @typescript-eslint/no-shadow
       cy.wrap(cases[i]).each(($n) => {
         cy.contains(`${prefix}${$n}`).should('not.exist');
       });
@@ -132,14 +134,15 @@ context('Create and Batch Deletion Routes', () => {
   it('should batch delete the path of the route', function () {
     cy.contains('Route').click();
     const cases = [
-      [1, 0, 2], //full match
+      [1, 0, 2], // full match
       [0, 1, 2], // partial match
-      [0, 1, 2], //none match
+      [0, 1, 2], // none match
     ];
     const prefix = '/get';
     cy.wrap([0, 2, 'x']).each(($n, i) => {
       cy.get(selector.nameSearchInput).clear().type(`${prefix}${$n}`);
       cy.contains('Search').click();
+      // eslint-disable-next-line @typescript-eslint/no-shadow
       cy.wrap(cases[i]).each(($n) => {
         cy.contains(`${prefix}${$n}`).should('not.exist');
       });

web/cypress/e2e/route/create-route-with-search-service-and-set-priority.cy.js

@@ -156,6 +156,7 @@ context('Create Route with search service name', () => {
   it('should delete the route and services', function () {
     cy.visit('/');
     cy.contains('Route').click();
+    cy.wait(4000);
     cy.get(selector.name).type(`${data.routeName}\n`);
     cy.contains(data.routeName).siblings().contains('More').click();
     cy.contains('Delete').click();
@@ -171,7 +172,7 @@ context('Create Route with search service name', () => {
     cy.contains(data.serviceName).siblings().contains('Delete').click();
     cy.contains('button', 'Confirm').click();
     cy.get(selector.notification).should('contain', data.deleteServiceSuccess);
-
+    cy.wait(4000);
     cy.contains(data.serviceName2).siblings().contains('Delete').click();
     cy.contains('button', 'Confirm').click();
     cy.get(selector.notification).should('contain', data.deleteServiceSuccess);

web/src/components/ActionBar/ActionBar.tsx

@@ -24,6 +24,7 @@ type Props = {
   lastStep: number;
   onChange: (nextStep: number) => void;
   withResultView?: boolean;
+  loading?: boolean;
 };
 
 const style: CSSProperties = {
@@ -37,7 +38,7 @@ const style: CSSProperties = {
   width: '100%',
 };
 
-const ActionBar: React.FC<Props> = ({ step, lastStep, onChange, withResultView }) => {
+const ActionBar: React.FC<Props> = ({ step, lastStep, onChange, withResultView, loading }) => {
   const { formatMessage } = useIntl();
 
   if (step > lastStep && !withResultView) {
@@ -59,7 +60,7 @@ const ActionBar: React.FC<Props> = ({ step, lastStep, onChange, withResultView }
           </Button>
         </Col>
         <Col>
-          <Button type="primary" onClick={() => onChange(step + 1)}>
+          <Button type="primary" onClick={() => onChange(step + 1)} loading={loading}>
             {step < lastStep
               ? formatMessage({ id: 'component.actionbar.button.nextStep' })
               : formatMessage({ id: 'component.global.submit' })}

web/src/hooks/useLatest.ts

@@ -0,0 +1,25 @@
+/*
+ * 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 { useRef } from 'react';
+
+function useLatest<T>(value: T) {
+  const ref = useRef(value);
+  ref.current = value;
+
+  return ref;
+}
+export default useLatest;

web/src/hooks/useRequest.ts

@@ -0,0 +1,46 @@
+/*
+ * 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 { useCallback, useState } from 'react';
+
+export default function useRequest<T, Y extends any[]>(requestFn: any) {
+  const [loading, setLoading] = useState(false);
+
+  const [data, setData] = useState<T>();
+
+  const [err, setErr] = useState();
+
+  const fn = useCallback(async (...params: Y) => {
+    setLoading(true);
+    let res;
+    try {
+      res = await requestFn(...params);
+      setData(res);
+    } catch (error) {
+      // @ts-ignore
+      setErr(error);
+    }
+    setLoading(false);
+    return res;
+  }, []);
+
+  return {
+    fn,
+    data,
+    err,
+    loading,
+  };
+}

web/src/hooks/useThrottle.ts

@@ -0,0 +1,58 @@
+/*
+ * 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 useLatest from '@/hooks/useLatest';
+import { useMemo } from 'react';
+import { throttle } from 'lodash';
+import useUnmount from '@/hooks/useUnmount';
+
+type useThrottleReturn = (...args: any) => any;
+
+interface ThrottleOptions {
+  wait?: number;
+  leading?: boolean;
+  trailing?: boolean;
+}
+
+function useThrottle<T extends useThrottleReturn>(fn: T, options?: ThrottleOptions) {
+  const fnRef = useLatest(fn);
+
+  const wait = options?.wait ?? 1000;
+
+  const throttled = useMemo(
+    () =>
+      throttle(
+        (...args: any[]): ReturnType<T> => {
+          return fnRef.current(...args);
+        },
+        wait,
+        options,
+      ),
+    [],
+  );
+
+  useUnmount(() => {
+    throttled.cancel();
+  });
+
+  return {
+    fn: throttled,
+    cancel: throttled.cancel,
+    flush: throttled.flush,
+  };
+}
+
+export default useThrottle;

web/src/hooks/useUnmount.ts

@@ -0,0 +1,31 @@
+/*
+ * 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 useLatest from '@/hooks/useLatest';
+import { useEffect } from 'react';
+
+const useUnmount = (fn: () => void) => {
+  const fnRef = useLatest(fn);
+
+  useEffect(
+    () => () => {
+      fnRef.current();
+    },
+    [],
+  );
+};
+
+export default useUnmount;

web/src/pages/Consumer/Create.tsx

@@ -25,6 +25,7 @@ import PluginPage from '@/components/Plugin';
 import Step1 from './components/Step1';
 import Preview from './components/Preview';
 import { fetchItem, create, update } from './service';
+import useRequest from '@/hooks/useRequest';
 
 const Page: React.FC = (props) => {
   const [step, setStep] = useState(1);
@@ -43,10 +44,12 @@ const Page: React.FC = (props) => {
     }
   }, []);
 
+  const { fn: createConsumers, loading: submitLoading } = useRequest(create);
+
   const onSubmit = () => {
     const data = { ...form1.getFieldsValue(), plugins } as ConsumerModule.Entity;
     const { username } = (props as any).match.params;
-    (username ? update(username, data) : create(data))
+    (username ? update(username, data) : createConsumers(data))
       .then(() => {
         notification.success({
           message: `${
@@ -103,7 +106,7 @@ const Page: React.FC = (props) => {
           {step === 3 && <Preview form1={form1} plugins={plugins} />}
         </Card>
       </PageContainer>
-      <ActionBar step={step} lastStep={3} onChange={onStepChange} />
+      <ActionBar loading={submitLoading} step={step} lastStep={3} onChange={onStepChange} />
     </>
   );
 };

web/src/pages/Consumer/List.tsx

@@ -38,7 +38,7 @@ const Page: React.FC = () => {
   const [id, setId] = useState('');
   const [editorMode, setEditorMode] = useState<'create' | 'update'>('create');
   const { paginationConfig, savePageList, checkPageList } = usePagination();
-
+  const [deleteLoading, setDeleteLoading] = useState('');
   const columns: ProColumns<ConsumerModule.ResEntity>[] = [
     {
       title: formatMessage({ id: 'page.consumer.username' }),
@@ -92,15 +92,20 @@ const Page: React.FC = () => {
             okText={formatMessage({ id: 'component.global.confirm' })}
             cancelText={formatMessage({ id: 'component.global.cancel' })}
             onConfirm={() => {
-              remove(record.username).then(() => {
-                notification.success({
-                  message: `${formatMessage({ id: 'component.global.delete.consumer.success' })}`,
+              setDeleteLoading(record.id);
+              remove(record.username)
+                .then(() => {
+                  notification.success({
+                    message: `${formatMessage({ id: 'component.global.delete.consumer.success' })}`,
+                  });
+                  checkPageList(ref);
+                })
+                .finally(() => {
+                  setDeleteLoading('');
                 });
-                checkPageList(ref);
-              });
             }}
           >
-            <Button type="primary" danger>
+            <Button type="primary" danger loading={record.id === deleteLoading}>
               {formatMessage({ id: 'component.global.delete' })}
             </Button>
           </Popconfirm>

web/src/pages/Plugin/List.tsx

@@ -36,6 +36,7 @@ const Page: React.FC = () => {
   const [pluginList, setPluginList] = useState<PluginComponent.Meta[]>([]);
   const [name, setName] = useState('');
   const { paginationConfig, savePageList, checkPageList } = usePagination();
+  const [deleteLoading, setDeleteLoading] = useState('');
 
   useEffect(() => {
     fetchPluginList().then(setPluginList);
@@ -79,19 +80,24 @@ const Page: React.FC = () => {
               title={formatMessage({ id: 'component.global.popconfirm.title.delete' })}
               onConfirm={() => {
                 const plugins = omit(initialData, [`${record.name}`]);
-                createOrUpdate({ plugins }).then(() => {
-                  notification.success({
-                    message: formatMessage({ id: 'page.plugin.delete' }),
+                setDeleteLoading(record.id);
+                createOrUpdate({ plugins })
+                  .then(() => {
+                    notification.success({
+                      message: formatMessage({ id: 'page.plugin.delete' }),
+                    });
+                    checkPageList(ref);
+                    setInitialData(plugins);
+                    setName('');
+                  })
+                  .finally(() => {
+                    setDeleteLoading('');
                   });
-                  checkPageList(ref);
-                  setInitialData(plugins);
-                  setName('');
-                });
               }}
               okText={formatMessage({ id: 'component.global.confirm' })}
               cancelText={formatMessage({ id: 'component.global.cancel' })}
             >
-              <Button type="primary" danger>
+              <Button type="primary" danger loading={record.id === deleteLoading}>
                 {formatMessage({ id: 'component.global.delete' })}
               </Button>
             </Popconfirm>