feat(Plugins): Installed Plugins and plugin settings done

ui/src/pages/Admin/Plugins/Installed/index.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { Table, Dropdown, Stack } from 'react-bootstrap';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import classNames from 'classnames';
@@ -20,46 +20,40 @@ const bgMap = {
   inactive: 'text-bg-secondary',
 };
 
-const PAGE_SIZE = 10;
 const Users: FC = () => {
   const { t } = useTranslation('translation', {
     keyPrefix: 'admin.installed_plugins',
   });
-
+  const navigate = useNavigate();
   const [urlSearchParams] = useSearchParams();
   const curFilter =
     urlSearchParams.get('filter') || InstalledPluginsFilterKeys[0];
-  const curPage = Number(urlSearchParams.get('page') || '1');
-  const curQuery = urlSearchParams.get('query') || '';
-  const { data, isLoading, mutate } = useQueryPlugins({
-    page: curPage,
-    page_size: PAGE_SIZE,
-    query: curQuery,
-    ...(curFilter === 'all'
-      ? {}
-      : curFilter === 'staff'
-      ? { staff: true }
-      : { status: curFilter }),
+  const {
+    data,
+    isLoading,
+    mutate: updatePlugins,
+  } = useQueryPlugins({
+    status: curFilter === 'all' ? undefined : curFilter,
   });
-
-  const handleAction = (type, plugin) => {
-    if (type === 'deactivate') {
-      updatePluginStatus({
-        enabled: false,
-        plugin_slug_name: plugin.slug_name,
-      }).then(() => {
-        mutate();
-      });
-    }
-    if (type === 'activate') {
-      updatePluginStatus({
-        enabled: true,
-        plugin_slug_name: plugin.slug_name,
-      }).then(() => {
-        mutate();
-      });
-    }
-    console.log(type, plugin);
+  const emitPluginChange = (type) => {
+    window.postMessage({
+      msgType: type,
+    });
+  };
+  const handleStatus = (plugin) => {
+    updatePluginStatus({
+      enabled: !plugin.enabled,
+      plugin_slug_name: plugin.slug_name,
+    }).then(() => {
+      updatePlugins();
+      if (plugin.have_config) {
+        emitPluginChange('refreshConfigurablePlugins');
+      }
+    });
+  };
+  const handleSettings = (plugin) => {
+    const url = `/admin/${plugin.slug_name}`;
+    navigate(url);
   };
 
   return (
@@ -116,21 +110,19 @@ const Users: FC = () => {
                       </Dropdown.Toggle>
                       <Dropdown.Menu>
                         {plugin.enabled ? (
-                          <Dropdown.Item
-                            onClick={() => handleAction('deactivate', plugin)}>
+                          <Dropdown.Item onClick={() => handleStatus(plugin)}>
                             {t('deactivate')}
                           </Dropdown.Item>
                         ) : (
-                          <Dropdown.Item
-                            onClick={() => handleAction('activate', plugin)}>
+                          <Dropdown.Item onClick={() => handleStatus(plugin)}>
                             {t('activate')}
                           </Dropdown.Item>
                         )}
-
-                        <Dropdown.Item
-                          onClick={() => handleAction('settings', plugin)}>
-                          {t('settings')}
-                        </Dropdown.Item>
+                        {plugin.enabled && plugin.have_config && (
+                          <Dropdown.Item onClick={() => handleSettings(plugin)}>
+                            {t('settings')}
+                          </Dropdown.Item>
+                        )}
                       </Dropdown.Menu>
                     </Dropdown>
                   </td>

ui/src/pages/Admin/index.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useEffect } from 'react';
 import { Container, Row, Col } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { Outlet, useLocation } from 'react-router-dom';
@@ -27,21 +27,22 @@ const formPaths = [
 const Index: FC = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'page_title' });
   const { pathname } = useLocation();
-  const { data: plugins } = useQueryPlugins({
-    query: 'active',
-  });
+  const { data: configurablePlugins, mutate: updateConfigurablePlugins } =
+    useQueryPlugins({
+      status: 'active',
+      have_config: true,
+    });
   usePageTags({
     title: t('admin'),
   });
-  const inactivePlugins = plugins?.filter((v) => v.enabled) || [];
 
   const menus = cloneDeep(ADMIN_NAV_MENUS);
-  if (inactivePlugins?.length > 0) {
+  if (configurablePlugins && configurablePlugins.length > 0) {
     menus.forEach((item) => {
       if (item.name === 'plugins' && item.children) {
         item.children = [
           ...item.children,
-          ...inactivePlugins.map((plugin) => ({
+          ...configurablePlugins.map((plugin) => ({
             name: plugin.slug_name,
             displayName: plugin.name,
           })),
@@ -50,6 +51,18 @@ const Index: FC = () => {
     });
   }
 
+  const observePlugins = (evt) => {
+    if (evt.data.msgType === 'refreshConfigurablePlugins') {
+      updateConfigurablePlugins();
+    }
+  };
+  useEffect(() => {
+    window.addEventListener('message', observePlugins);
+    return () => {
+      window.removeEventListener('message', observePlugins);
+    };
+  }, []);
+
   return (
     <>
       <div className="bg-light py-2">