feat: show warning notification when dashboard version not matching apisix

web/src/components/Plugin/PluginDetail.tsx

@@ -182,20 +182,18 @@ const PluginDetail: React.FC<Props> = ({
                 okText={formatMessage({ id: 'component.global.confirm' })}
                 cancelText={formatMessage({ id: 'component.global.cancel' })}
                 onConfirm={() => {
-                  onChange({ formData: form.getFieldsValue(), codemirrorData: {}, shouldDelete: true });
+                  onChange({
+                    formData: form.getFieldsValue(),
+                    codemirrorData: {},
+                    shouldDelete: true,
+                  });
                 }}
               >
-                {
-                  initialData[name]
-                    ? <Button
-                      key={3}
-                      type="primary"
-                      danger
-                    >
-                      {formatMessage({ id: 'component.global.delete' })}
-                    </Button>
-                    : null
-                }
+                {initialData[name] ? (
+                  <Button key={3} type="primary" danger>
+                    {formatMessage({ id: 'component.global.delete' })}
+                  </Button>
+                ) : null}
               </Popconfirm>
               <Button
                 key={2}
@@ -250,8 +248,8 @@ const PluginDetail: React.FC<Props> = ({
             pluginType === 'auth' && schemaType !== 'consumer' ? (
               <Alert message={`${name} does not require configuration`} type="warning" />
             ) : (
-                <>Current plugin: {name}</>
-              )
+              <>Current plugin: {name}</>
+            )
           }
           ghost={false}
           extra={[

web/src/components/Plugin/PluginPage.tsx

@@ -181,7 +181,7 @@ const PluginPage: React.FC<Props> = ({
         };
         if (shouldDelete === true) {
           plugins = omit(plugins, name);
-        };
+        }
         onChange(plugins);
         setName(NEVER_EXIST_PLUGIN_FLAG);
       }}

web/src/components/RightContent/index.tsx

@@ -23,8 +23,10 @@
 */
 import { Tooltip, Tag, Space } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useModel, SelectLang } from 'umi';
+
+import { fetchVersionMatch } from '@/services/tool';
 import Avatar from './AvatarDropdown';
 import styles from './index.less';
 
@@ -49,6 +51,9 @@ const GlobalHeaderRight: React.FC = () => {
   if ((navTheme === 'dark' && layout === 'top') || layout === 'mix') {
     className = `${styles.right}  ${styles.dark}`;
   }
+  useEffect(() => {
+    fetchVersionMatch();
+  }, []);
   return (
     <Space className={className}>
       <Tooltip title="Documentation">

web/src/pages/Plugin/List.tsx

@@ -121,9 +121,9 @@ const Page: React.FC = () => {
         };
         if (shouldDelete === true) {
           plugins = omit(plugins, name);
-        };
+        }
         createOrUpdate({
-          plugins
+          plugins,
         }).then(() => {
           setVisible(false);
           setName('');

web/src/services/tool.ts

@@ -0,0 +1,19 @@
+/*
+ * 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 { request } from 'umi';
+
+export const fetchVersionMatch = () => request<Res<any>>('/tool/version_match');