fix: refresh api-based-extension (#1464)

web/app/components/header/account-setting/api-based-extension-page/empty.tsx

@@ -10,7 +10,7 @@ const Empty = () => {
       <div className='flex items-center justify-center mb-3 w-12 h-12 rounded-[10px] border border-[#EAECF5]'>
         <Webhooks className='w-6 h-6 text-gray-500' />
       </div>
-      <div className='mb-2 text-sm text-gray-600'>{t('commosn.apiBasedExtension.title')}</div>
+      <div className='mb-2 text-sm text-gray-600'>{t('common.apiBasedExtension.title')}</div>
       <a
         className='flex items-center mb-2 h-[18px] text-xs text-primary-600'
         href={t('common.apiBasedExtension.linkUrl') || '/'}

web/app/components/header/account-setting/api-based-extension-page/selector.tsx

@@ -30,7 +30,7 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
     setShowAccountSettingModal,
     setShowApiBasedExtensionModal,
   } = useModalContext()
-  const { data } = useSWR(
+  const { data, mutate } = useSWR(
     '/api-based-extension',
     fetchApiBasedExtensionList,
   )
@@ -104,7 +104,7 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
           <div className='p-1'>
             <div
               className='flex items-center px-3 h-8 text-sm text-primary-600 cursor-pointer'
-              onClick={() => setShowApiBasedExtensionModal({ payload: {} })}
+              onClick={() => setShowApiBasedExtensionModal({ payload: {}, onSaveCallback: () => mutate() })}
             >
               <Plus className='mr-2 w-4 h-4' />
               {t('common.operation.add')}