UI: Add plugin uninstall button

monkey/monkey_island/cc/next_ui/src/app/(protected)/plugins/installed/PluginUninstallButton.tsx

@@ -0,0 +1,44 @@
+import { GridActionsCellItem } from '@mui/x-data-grid';
+import React from 'react';
+import { useUninstallPluginMutation } from '@/redux/features/api/agentPlugins/agentPluginEndpoints';
+import MonkeyLoadingIcon from '@/_components/icons/MonkeyLoadingIcon';
+import { PluginId, PluginInfo } from '@/redux/features/api/agentPlugins/types';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+const PluginUninstallButton = (props: PluginInfo) => {
+    const [uninstallPlugin, { isLoading: isUninstalling }] =
+        useUninstallPluginMutation();
+
+    const onUninstallClick = () => {
+        uninstallPlugin(props);
+    };
+
+    const UninstallButton = () => {
+        return (
+            <GridActionsCellItem
+                key={props.pluginId + 'uninstall'}
+                icon={<DeleteIcon />}
+                label="Uninstall"
+                onClick={() => onUninstallClick()}
+            />
+        );
+    };
+
+    if (isUninstalling) {
+        return UninstallInProgressButton(props.pluginId);
+    } else {
+        return UninstallButton();
+    }
+};
+
+const UninstallInProgressButton = (pluginId: PluginId) => {
+    return (
+        <GridActionsCellItem
+            key={pluginId}
+            icon={<MonkeyLoadingIcon />}
+            label="Uninstalling"
+        />
+    );
+};
+
+export default PluginUninstallButton;

monkey/monkey_island/cc/next_ui/src/app/(protected)/plugins/installed/page.tsx

@@ -10,6 +10,7 @@ import Grid from '@mui/material/Grid';
 import { InstalledPlugin } from '@/redux/features/api/agentPlugins/types';
 import InstalledPluginFilters from '@/app/(protected)/plugins/installed/InstalledPluginFilters';
 import PluginUpgradeButton from '@/app/(protected)/plugins/installed/PluginUpgradeButton';
+import PluginUninstallButton from '@/app/(protected)/plugins/installed/PluginUninstallButton';
 
 export default function InstalledPluginsPage() {
     const {
@@ -31,9 +32,15 @@ export default function InstalledPluginsPage() {
         );
     };
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const getUninstallAction = (plugin: InstalledPlugin) => {
-        return [];
+        return (
+            <PluginUninstallButton
+                pluginType={plugin.pluginType}
+                pluginName={plugin.name}
+                pluginVersion={plugin.version}
+                pluginId={plugin.id}
+            />
+        );
     };
 
     const getRowActions = (row: PluginRow) => {
@@ -42,7 +49,7 @@ export default function InstalledPluginsPage() {
             (installedPlugin) => installedPlugin.id === row.id
         );
         if (!plugin) return [];
-        return [getUpgradeAction(plugin)];
+        return [getUpgradeAction(plugin), getUninstallAction(plugin)];
     };
 
     const getOverlayMessage = () => {

monkey/monkey_island/cc/next_ui/src/redux/features/api/agentPlugins/agentPluginEndpoints.tsx

@@ -19,6 +19,7 @@ enum BackendEndpoints {
     PLUGIN_INDEX = '/agent-plugins/available/index',
     PLUGIN_INDEX_FORCE_REFRESH = `${BackendEndpoints.PLUGIN_INDEX}?force_refresh=true`,
     PLUGIN_INSTALL = '/install-agent-plugin',
+    PLUGIN_UNINSTALL = '/uninstall-agent-plugin',
     PLUGIN_MANIFESTS = '/agent-plugins/installed/manifests'
 }
 
@@ -100,6 +101,17 @@ export const agentPluginEndpoints = islandApiSlice.injectEndpoints({
                 }
             }),
             invalidatesTags: ['InstalledAgentPlugins']
+        }),
+        uninstallPlugin: builder.mutation<any, PluginInfo>({
+            query: (pluginInfo: PluginInfo) => ({
+                url: BackendEndpoints.PLUGIN_UNINSTALL,
+                method: HTTP_METHODS.POST,
+                body: {
+                    plugin_type: pluginInfo.pluginType,
+                    name: pluginInfo.pluginName
+                }
+            }),
+            invalidatesTags: ['InstalledAgentPlugins']
         })
     })
 });
@@ -109,5 +121,6 @@ export const {
     useGetInstalledPluginsQuery,
     useInstallPluginMutation,
     useUploadPluginMutation,
-    useGetLatestPluginVersionQuery
+    useGetLatestPluginVersionQuery,
+    useUninstallPluginMutation
 } = agentPluginEndpoints;