chore: update env vars from backend version

src/pages/backends/index.tsx

@@ -2,7 +2,6 @@ import DeleteModal from '@/components/delete-modal';
 import IconFont from '@/components/icon-font';
 import { FilterBar } from '@/components/page-tools';
 import { PageAction } from '@/config';
-import { PageActionType } from '@/config/types';
 import useTableFetch from '@/hooks/use-table-fetch';
 import { useIntl } from '@umijs/max';
 import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
@@ -23,8 +22,9 @@ import {
 import AddModal from './components/add-modal';
 import BackendCardList from './components/backend-list';
 import VersionInfoModal from './components/version-info-modal';
-import { json2Yaml, yaml2Json } from './config';
+import { backendSourceOptions, json2Yaml, yaml2Json } from './config';
 import { FormData, ListItem } from './config/types';
+import useCreateBackend from './hooks/use-create-backend';
 import useExportYAML from './hooks/use-export-yaml';
 import useEnableBackend from './services/use-enable-backend';
 
@@ -36,6 +36,7 @@ const BackendList = () => {
     rowSelection,
     queryParams,
     modalRef,
+    handleQueryChange,
     fetchData,
     handleDelete,
     handleSearch,
@@ -52,41 +53,34 @@ const BackendList = () => {
     }
   });
   const { exportYAML } = useExportYAML();
-  const [openModalStatus, setOpenModalStatus] = useState<{
-    open: boolean;
-    action: PageActionType;
-    currentData?: Partial<ListItem>;
-  }>({ open: false, action: 'create' });
   const [openVersionInfoModal, setOpenVersionInfoModal] = useState<{
     open: boolean;
-    currentData?: Partial<ListItem>;
+    currentData?: ListItem;
   }>({ open: false });
   const { handleEnableBackend } = useEnableBackend();
+  const { openBackendModal, closeBackendModal, openBackendModalStatus } =
+    useCreateBackend();
 
   // built_in_version_configs is read-only, but needs to be included when updating
   const handleOnSubmit = async (values: FormData) => {
     try {
-      if (openModalStatus.action === 'create') {
+      if (openBackendModalStatus.action === 'create') {
         await createBackend({ data: values });
       } else {
-        const omitFields = openModalStatus.currentData?.is_built_in
+        const omitFields = openBackendModalStatus.currentData?.is_built_in
           ? ['built_in_version_configs', 'default_version']
           : ['built_in_version_configs'];
 
-        await updateBackend(openModalStatus.currentData!.id!, {
+        await updateBackend(openBackendModalStatus.currentData!.id!, {
           data: {
             built_in_version_configs:
-              openModalStatus.currentData?.built_in_version_configs,
+              openBackendModalStatus.currentData?.built_in_version_configs,
             ..._.omit(values, omitFields),
             health_check_path: values.health_check_path || null
           }
         });
       }
-      setOpenModalStatus({
-        open: false,
-        action: 'create',
-        currentData: undefined
-      });
+      closeBackendModal();
       handleSearch();
     } catch (error) {}
   };
@@ -94,46 +88,42 @@ const BackendList = () => {
   // built_in_version_configs needs to be included when updating from YAML, but not allowed to be changed
   const handleOnSubmitYaml = async (values: { content: string }) => {
     try {
-      if (openModalStatus.action === 'create') {
+      if (openBackendModalStatus.action === 'create') {
         await createBackendFromYAML({ data: values });
       } else {
         const jsonData = yaml2Json(values.content);
         const yamlContent = json2Yaml({
-          backend_name: openModalStatus.currentData?.backend_name,
-          default_version: openModalStatus.currentData?.default_version,
+          backend_name: openBackendModalStatus.currentData?.backend_name,
+          default_version: openBackendModalStatus.currentData?.default_version,
           built_in_version_configs:
-            openModalStatus.currentData?.built_in_version_configs,
+            openBackendModalStatus.currentData?.built_in_version_configs,
           ...jsonData
         });
-        await updateBackendFromYAML(openModalStatus.currentData!.id!, {
+        await updateBackendFromYAML(openBackendModalStatus.currentData!.id!, {
           data: {
             content: yamlContent
           }
         });
       }
-      setOpenModalStatus({
-        open: false,
-        action: 'create',
-        currentData: undefined
-      });
+      closeBackendModal();
       handleSearch();
     } catch (error) {}
   };
 
-  const handleAddBackend = () => {
-    setOpenModalStatus({
-      open: true,
-      action: PageAction.CREATE
+  const handleFilterBySource = (value: string) => {
+    handleQueryChange({
+      backend_source: value,
+      page: 1
     });
   };
 
-  const handleOnSelect = (item: any) => {
+  const handleAddBackend = () => {
+    openBackendModal(PageAction.CREATE, '');
+  };
+
+  const handleOnSelect = async (item: any) => {
     if (item.action === 'edit') {
-      setOpenModalStatus({
-        open: true,
-        action: 'edit',
-        currentData: item.data
-      });
+      openBackendModal(PageAction.EDIT, '', item.data);
     } else if (item.action === 'delete') {
       handleDelete(item.data, {
         name: item.data.backend_name
@@ -162,6 +152,10 @@ const BackendList = () => {
           enabled: item.action === 'enable'
         }
       });
+      // delay 200ms to refresh list
+      await new Promise((resolve) => {
+        setTimeout(resolve, 300);
+      });
       handleSearch();
     }
   };
@@ -171,11 +165,7 @@ const BackendList = () => {
       open: false,
       currentData: undefined
     });
-    setOpenModalStatus({
-      open: true,
-      action: 'edit',
-      currentData: openVersionInfoModal.currentData
-    });
+    openBackendModal(PageAction.EDIT, '', openVersionInfoModal.currentData);
   };
 
   const loadMore = useMemoizedFn((nextPage: number) => {
@@ -197,12 +187,18 @@ const BackendList = () => {
           input: 300
         }}
         inputHolder={intl.formatMessage({ id: 'common.filter.name' })}
+        selectHolder={intl.formatMessage({ id: 'backend.filter.source' })}
         buttonText={intl.formatMessage({ id: 'backend.button.add' })}
         handleClickPrimary={handleAddBackend}
         handleSearch={handleSearch}
+        handleSelectChange={handleFilterBySource}
         handleInputChange={handleNameChange}
         rowSelection={rowSelection}
-        showSelect={false}
+        showSelect={true}
+        selectOptions={backendSourceOptions.map((item) => ({
+          label: intl.formatMessage({ id: item.label }),
+          value: item.value
+        }))}
       ></FilterBar>
 
       <ScrollerContext.Provider
@@ -237,14 +233,14 @@ const BackendList = () => {
         ></NoResult>
       </ScrollerContext.Provider>
       <AddModal
-        action={openModalStatus.action}
-        onClose={() => setOpenModalStatus({ open: false, action: 'create' })}
+        action={openBackendModalStatus.action}
+        onClose={closeBackendModal}
         onSubmit={handleOnSubmit}
         onSubmitYaml={handleOnSubmitYaml}
-        currentData={openModalStatus.currentData as ListItem}
-        open={openModalStatus.open}
+        currentData={openBackendModalStatus.currentData as ListItem}
+        open={openBackendModalStatus.open}
         title={
-          openModalStatus.action === 'create'
+          openBackendModalStatus.action === PageAction.CREATE
             ? intl.formatMessage({ id: 'backend.button.add' })
             : intl.formatMessage({ id: 'backend.button.edit' })
         }