Fix for plugin table (#8189)

- useServerApiState() was constantly refreshing
- This was causing infinite update cycles

src/frontend/src/tables/plugin/PluginListTable.tsx

@@ -239,15 +239,10 @@ export default function PluginListTable() {
   const navigate = useNavigate();
   const user = useUserState();
 
-  const [pluginsEnabled, plugins_install_disabled] = useServerApiState(
+  const { server } = useServerApiState();
-    (state) => [
-      state.server.plugins_enabled,
-      state.server.plugins_install_disabled
-    ]
-  );
 
-  const pluginTableColumns: TableColumn[] = useMemo(
+  const pluginTableColumns: TableColumn[] = useMemo(() => {
-    () => [
+    return [
       {
         accessor: 'name',
         title: t`Plugin`,
@@ -275,7 +270,6 @@ export default function PluginListTable() {
         accessor: 'meta.description',
         title: t`Description`,
         sortable: false,
-
         render: function (record: any) {
           if (record.active) {
             return record?.meta.description;
@@ -292,7 +286,10 @@ export default function PluginListTable() {
       {
         accessor: 'meta.version',
         title: t`Version`,
-        sortable: false
+        sortable: false,
+        render: (record: any) => {
+          return record?.meta.version;
+        }
 
         // TODO: Display date information if available
       },
@@ -301,9 +298,8 @@ export default function PluginListTable() {
         title: 'Author',
         sortable: false
       }
-    ],
+    ];
-    []
+  }, []);
-  );
 
   const [selectedPlugin, setSelectedPlugin] = useState<string>('');
   const [activate, setActivate] = useState<boolean>(false);
@@ -330,6 +326,67 @@ export default function PluginListTable() {
     );
   }, [activate]);
 
+  // Determine available actions for a given plugin
+  const rowActions = useCallback(
+    (record: any): RowAction[] => {
+      // Only superuser can perform plugin actions
+      if (!user.isSuperuser() || !server.plugins_enabled) {
+        return [];
+      }
+
+      return [
+        {
+          hidden: record.is_builtin != false || record.is_installed != false,
+          title: t`Deactivate`,
+          color: 'red',
+          icon: <IconCircleX />,
+          onClick: () => {
+            setSelectedPlugin(record.key);
+            setActivate(false);
+            activatePluginModal.open();
+          }
+        },
+        {
+          hidden: record.is_builtin != false || record.is_installed != true,
+          title: t`Activate`,
+          color: 'green',
+          icon: <IconCircleCheck />,
+          onClick: () => {
+            setSelectedPlugin(record.key);
+            setActivate(true);
+            activatePluginModal.open();
+          }
+        },
+        {
+          hidden:
+            record.active != true ||
+            record.is_package != true ||
+            !record.package_name,
+          title: t`Update`,
+          color: 'blue',
+          icon: <IconRefresh />,
+          onClick: () => {
+            setPluginPackage(record.package_name);
+            installPluginModal.open();
+          }
+        },
+        {
+          hidden: record.is_installed != false,
+          title: t`Delete`,
+          color: 'red',
+          icon: <IconCircleX />,
+          onClick: () => {
+            setSelectedPlugin(record.key);
+            deletePluginModal.open();
+          }
+        }
+      ];
+    },
+    [user, server]
+  );
+
+  const [pluginPackage, setPluginPackage] = useState<string>('');
+
   const activatePluginModal = useEditApiFormModal({
     title: t`Activate Plugin`,
     url: ApiEndpoints.plugin_activate,
@@ -342,101 +399,15 @@ export default function PluginListTable() {
       : `The plugin was deactivated`,
     fields: {
       active: {
-        value: activate,
         hidden: true
       }
     },
+    initialData: {
+      active: activate
+    },
     table: table
   });
 
-  // Determine available actions for a given plugin
-  const rowActions = useCallback(
-    (record: any): RowAction[] => {
-      // Only superuser can perform plugin actions
-      if (!user.isSuperuser()) {
-        return [];
-      }
-
-      let actions: RowAction[] = [];
-
-      if (!record.is_builtin && record.is_installed) {
-        if (record.active) {
-          actions.push({
-            title: t`Deactivate`,
-            color: 'red',
-            icon: <IconCircleX />,
-            onClick: () => {
-              setSelectedPlugin(record.key);
-              setActivate(false);
-              activatePluginModal.open();
-            }
-          });
-        } else {
-          actions.push({
-            title: t`Activate`,
-            color: 'green',
-            icon: <IconCircleCheck />,
-            onClick: () => {
-              setSelectedPlugin(record.key);
-              setActivate(true);
-              activatePluginModal.open();
-            }
-          });
-        }
-      }
-
-      // Active 'package' plugins can be updated
-      if (record.active && record.is_package && record.package_name) {
-        actions.push({
-          title: t`Update`,
-          color: 'blue',
-          icon: <IconRefresh />,
-          onClick: () => {
-            setPluginPackage(record.package_name);
-            installPluginModal.open();
-          }
-        });
-      }
-
-      // Inactive 'package' plugins can be uninstalled
-      if (
-        !record.active &&
-        record.is_installed &&
-        record.is_package &&
-        record.package_name
-      ) {
-        actions.push({
-          title: t`Uninstall`,
-          color: 'red',
-          icon: <IconCircleX />,
-          onClick: () => {
-            setSelectedPlugin(record.key);
-            uninstallPluginModal.open();
-          },
-          disabled: plugins_install_disabled || false
-        });
-      }
-
-      // Uninstalled 'package' plugins can be deleted
-      if (!record.is_installed) {
-        actions.push({
-          title: t`Delete`,
-          color: 'red',
-          icon: <IconCircleX />,
-          onClick: () => {
-            setSelectedPlugin(record.key);
-            deletePluginModal.open();
-          }
-        });
-      }
-
-      return actions;
-    },
-    [user, pluginsEnabled]
-  );
-
-  const [pluginPackage, setPluginPackage] = useState<string>('');
-
   const installPluginModal = useCreateApiFormModal({
     title: t`Install plugin`,
     url: ApiEndpoints.plugin_install,
@@ -459,7 +430,7 @@ export default function PluginListTable() {
   const uninstallPluginModal = useEditApiFormModal({
     title: t`Uninstall Plugin`,
     url: ApiEndpoints.plugin_uninstall,
-    pathParams: { key: selectedPlugin },
+    // pathParams: { key: selectedPlugin },
     fetchInitialData: false,
     timeout: 30000,
     fields: {
@@ -490,6 +461,8 @@ export default function PluginListTable() {
   });
 
   const reloadPlugins = useCallback(() => {
+    console.log('reloadPlugins:');
+
     api
       .post(apiUrl(ApiEndpoints.plugin_reload), {
         full_reload: true,
@@ -508,7 +481,7 @@ export default function PluginListTable() {
 
   // Custom table actions
   const tableActions = useMemo(() => {
-    if (!user.isSuperuser() || !pluginsEnabled) {
+    if (!user.isSuperuser() || !server.plugins_enabled) {
       return [];
     }
 
@@ -529,17 +502,17 @@ export default function PluginListTable() {
           setPluginPackage('');
           installPluginModal.open();
         }}
-        disabled={plugins_install_disabled || false}
+        disabled={server.plugins_install_disabled || false}
       />
     ];
-  }, [user, pluginsEnabled]);
+  }, [user, server]);
 
   return (
     <>
-      {activatePluginModal.modal}
       {installPluginModal.modal}
       {uninstallPluginModal.modal}
       {deletePluginModal.modal}
+      {activatePluginModal.modal}
       <DetailDrawer
         title={t`Plugin Detail`}
         size={'50%'}