feat(frontend): implement bulk toggle for tool enable/disable

Lasim · Lasim · commit 4dace87f784d · 2025-12-18T21:28:52.000+01:00
diff --git a/services/frontend/src/components/mcp-server/installation/ToolsTab.vue b/services/frontend/src/components/mcp-server/installation/ToolsTab.vue
@@ -5,10 +5,14 @@ import { toast } from 'vue-sonner'
 import { useMcpToolsStore } from '@/stores/mcpToolsStore'
 import { McpToolsService } from '@/services/mcpToolsService'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import { Switch } from '@/components/ui/switch'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Button } from '@/components/ui/button'
+import { ButtonGroup } from '@/components/ui/button-group'
+import { Badge } from '@/components/ui/badge'
+import { Spinner } from '@/components/ui/spinner'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Chart } from '@/components/ui/chart'
-import { AlertCircle, Package, Wrench, Coins } from 'lucide-vue-next'
+import { AlertCircle, Package, Wrench, Coins, CircleCheck, CircleMinus } from 'lucide-vue-next'
 import { use } from 'echarts/core'
 import { PieChart } from 'echarts/charts'
 import { TooltipComponent, LegendComponent } from 'echarts/components'
@@ -37,7 +41,8 @@ const mcpToolsStore = useMcpToolsStore()
 const tools = ref<any>(null)
 const isLoading = ref(true)
 const error = ref<string | null>(null)
-const togglingToolId = ref<string | null>(null)
+const selectedToolIds = ref<string[]>([])
+const isBulkToggling = ref(false)
 
 // Format token count with commas
 const formatTokenCount = (count: number) => {
@@ -67,46 +72,115 @@ const hasTools = computed(() => {
   return tools.value && tools.value.tools && tools.value.tools.length > 0
 })
 
-// Handle tool toggle
-async function handleToolToggle(toolId: string, toolName: string, currentDisabled: boolean) {
-  if (!props.canEdit) return
+// Check if all tools are selected
+const allToolsSelected = computed(() => {
+  return hasTools.value && selectedToolIds.value.length === tools.value.tools.length
+})
 
-  const newDisabledState = !currentDisabled
-  togglingToolId.value = toolId
+// Check if some (but not all) tools are selected
+const someToolsSelected = computed(() => {
+  return selectedToolIds.value.length > 0 && !allToolsSelected.value
+})
 
-  // Optimistic update
-  const toolIndex = tools.value.tools.findIndex((t: { id: string }) => t.id === toolId)
-  if (toolIndex !== -1) {
-    tools.value.tools[toolIndex].is_disabled = newDisabledState
+// Toggle all tools selection
+const toggleAllTools = () => {
+  if (allToolsSelected.value) {
+    selectedToolIds.value = []
+  } else {
+    selectedToolIds.value = tools.value.tools.map((t: { id: string }) => t.id)
   }
+}
+
+// Toggle individual tool selection
+const toggleToolSelection = (toolId: string) => {
+  const index = selectedToolIds.value.indexOf(toolId)
+  if (index > -1) {
+    selectedToolIds.value.splice(index, 1)
+  } else {
+    selectedToolIds.value.push(toolId)
+  }
+}
+
+// Check if tool is selected
+const isToolSelected = (toolId: string) => {
+  return selectedToolIds.value.includes(toolId)
+}
+
+// Handle bulk enable
+async function handleBulkEnable() {
+  if (selectedToolIds.value.length === 0) return
+  await handleBulkToggle(false) // false = enabled
+}
+
+// Handle bulk disable
+async function handleBulkDisable() {
+  if (selectedToolIds.value.length === 0) return
+  await handleBulkToggle(true) // true = disabled
+}
+
+// Batch toggle selected tools
+async function handleBulkToggle(isDisabled: boolean) {
+  if (!props.canEdit || selectedToolIds.value.length === 0) return
+
+  isBulkToggling.value = true
+
+  // Prepare batch request
+  const toolsToToggle = selectedToolIds.value.map(toolId => ({
+    tool_id: toolId,
+    is_disabled: isDisabled
+  }))
+
+  // Optimistic update
+  const originalTools = JSON.parse(JSON.stringify(tools.value.tools))
+  selectedToolIds.value.forEach(toolId => {
+    const tool = tools.value.tools.find((t: { id: string }) => t.id === toolId)
+    if (tool) {
+      tool.is_disabled = isDisabled
+    }
+  })
 
   try {
-    const response = await McpToolsService.toggleToolStatus(
+    const response = await McpToolsService.batchToggleTools(
       props.teamId,
       props.installation.id,
-      toolId,
-      newDisabledState
+      toolsToToggle
     )
 
-    const action = newDisabledState
+    const action = isDisabled
       ? t('mcpInstallations.details.tools.toggle.disabled')
       : t('mcpInstallations.details.tools.toggle.enabled')
 
-    toast.success(t('mcpInstallations.details.tools.toggle.success', { toolName, action }), {
-      description: response.message
-    })
+    // Show success toast
+    if (response.total_failed === 0) {
+      toast.success(
+        t('mcpInstallations.details.tools.bulkToggle.allSuccess', {
+          count: response.total_succeeded,
+          action
+        })
+      )
+    } else if (response.total_succeeded > 0) {
+      toast.warning(
+        t('mcpInstallations.details.tools.bulkToggle.partialSuccess', {
+          succeeded: response.total_succeeded,
+          failed: response.total_failed,
+          action
+        })
+      )
+    }
+
+    // Clear selection (optimistic update already applied)
+    selectedToolIds.value = []
+
   } catch (err) {
     // Revert optimistic update on error
-    if (toolIndex !== -1) {
-      tools.value.tools[toolIndex].is_disabled = currentDisabled
-    }
+    tools.value.tools = originalTools
 
     const errorMessage = err instanceof Error ? err.message : t('mcpInstallations.details.tools.toggle.error')
-    toast.error(t('mcpInstallations.details.tools.toggle.errorTitle'), {
+    toast.error(t('mcpInstallations.details.tools.bulkToggle.errorTitle'), {
       description: errorMessage
     })
   } finally {
-    togglingToolId.value = null
+    isBulkToggling.value = false
   }
 }
 
@@ -209,39 +283,101 @@ const pieChartOption = computed<EChartsOption>(() => {
         </div>
       </div>
 
+      <!-- Bulk Actions -->
+      <div class="flex items-center justify-end gap-2 mb-4">
+        <ButtonGroup aria-label="Bulk tool actions">
+          <Button
+            variant="outline"
+            class="w-24"
+            :disabled="!props.canEdit || selectedToolIds.length === 0 || isBulkToggling"
+            @click="handleBulkEnable"
+          >
+            <Spinner v-if="isBulkToggling" />
+            <span v-else>{{ t('mcpInstallations.details.tools.bulkActions.enable') }}</span>
+          </Button>
+          <Button
+            variant="outline"
+            class="w-24"
+            :disabled="!props.canEdit || selectedToolIds.length === 0 || isBulkToggling"
+            @click="handleBulkDisable"
+          >
+            <Spinner v-if="isBulkToggling" />
+            <span v-else>{{ t('mcpInstallations.details.tools.bulkActions.disable') }}</span>
+          </Button>
+        </ButtonGroup>
+      </div>
+
       <!-- Tools Table -->
       <div class="rounded-md border">
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead class="w-20">{{ t('mcpInstallations.details.tools.table.columns.enabled') }}</TableHead>
+              <TableHead class="w-12">
+                <Checkbox
+                  :checked="allToolsSelected"
+                  :indeterminate="someToolsSelected"
+                  :disabled="!props.canEdit"
+                  @update:checked="toggleAllTools"
+                />
+              </TableHead>
+              <TableHead>{{ t('mcpInstallations.details.tools.table.columns.status') }}</TableHead>
               <TableHead>{{ t('mcpInstallations.details.tools.table.columns.toolName') }}</TableHead>
               <TableHead>{{ t('mcpInstallations.details.tools.table.columns.description') }}</TableHead>
               <TableHead class="text-right">{{ t('mcpInstallations.details.tools.table.columns.tokenCount') }}</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             <TableRow v-for="tool in tools.tools" :key="tool.id">
-              <TableCell class="align-top">
-                <Switch
-                  :model-value="!tool.is_disabled"
-                  :disabled="!props.canEdit || togglingToolId === tool.id"
-                  @update:model-value="handleToolToggle(tool.id, tool.tool_name, tool.is_disabled)"
+              <TableCell>
+                <Checkbox
+                  :checked="isToolSelected(tool.id)"
+                  :disabled="!props.canEdit"
+                  @update:checked="() => toggleToolSelection(tool.id)"
                 />
               </TableCell>
-              <TableCell class="text-sm font-medium align-top whitespace-nowrap">{{ tool.tool_name }}</TableCell>
+              <TableCell>
+                <div
+                  class="inline-flex items-center justify-center rounded-full border px-1.5 py-0.5 text-xs font-medium text-muted-foreground gap-1"
+                >
+                  <CircleCheck
+                    v-if="!tool.is_disabled"
+                    class="size-3 fill-green-500 text-green-500 dark:fill-green-400 dark:text-green-400"
+                  />
+                  <CircleMinus
+                    v-else
+                    class="size-3 text-muted-foreground"
+                  />
+                  <span>
+                    {{ tool.is_disabled
+                      ? t('mcpInstallations.details.tools.table.values.disabled')
+                      : t('mcpInstallations.details.tools.table.values.enabled')
+                    }}
+                  </span>
+                </div>
+              </TableCell>
+              <TableCell class="text-sm font-medium">{{ tool.tool_name }}</TableCell>
               <TableCell class="text-sm text-muted-foreground max-w-2xl">
                 <div class="whitespace-normal wrap-break-word">
                   {{ tool.description || t('mcpInstallations.details.tools.table.values.noDescription') }}
                 </div>
               </TableCell>
-              <TableCell class="text-right align-top whitespace-nowrap text-sm font-medium">
+              <TableCell class="text-right whitespace-nowrap text-sm font-medium">
                 {{ formatTokenCount(tool.token_count) }}
               </TableCell>
             </TableRow>
           </TableBody>
         </Table>
       </div>
+
+      <!-- Selection Counter (outside table, matching catalog layout) -->
+      <div class="flex items-center justify-between px-4 py-4">
+        <div class="flex-1 text-sm text-muted-foreground">
+          {{ t('mcpInstallations.details.tools.selection.rowsSelected', {
+            selected: selectedToolIds.length,
+            total: tools.tools.length
+          }) }}
+        </div>
+      </div>
     </div>
   </div>
 </template>
diff --git a/services/frontend/src/i18n/locales/en/mcp-installations.ts b/services/frontend/src/i18n/locales/en/mcp-installations.ts
@@ -631,19 +631,34 @@ export default {
           enabled: 'Enabled',
           toolName: 'Tool Name',
           description: 'Description',
+          status: 'Status',
           tokenCount: 'Token Count'
         },
         values: {
-          noDescription: 'No description provided'
+          noDescription: 'No description provided',
+          enabled: 'Enabled',
+          disabled: 'Disabled'
         }
       },
+      bulkActions: {
+        enable: 'Enable',
+        disable: 'Disable'
+      },
       toggle: {
         success: 'Tool "{toolName}" {action}',
         enabled: 'enabled',
         disabled: 'disabled',
         errorTitle: 'Failed to update tool',
         error: 'An error occurred while updating the tool status'
       },
+      bulkToggle: {
+        allSuccess: '{count} tool(s) {action} successfully',
+        partialSuccess: '{succeeded} tool(s) {action} successfully, {failed} failed',
+        errorTitle: 'Bulk Toggle Failed'
+      },
+      selection: {
+        rowsSelected: '{selected} of {total} row(s) selected.'
+      },
       summary: {
         totalTools: 'Total Tools',
         totalTokens: 'Total Tokens',
diff --git a/services/frontend/src/services/mcpToolsService.ts b/services/frontend/src/services/mcpToolsService.ts
@@ -23,6 +23,28 @@ export interface ToggleToolResponse {
   message: string
 }
 
+export interface BatchToggleToolRequest {
+  tool_id: string
+  is_disabled: boolean
+}
+
+export interface BatchToggleToolResult {
+  tool_id: string
+  tool_name?: string
+  is_disabled?: boolean
+  status: 'success' | 'failed' | 'skipped'
+  message: string
+}
+
+export interface BatchToggleToolResponse {
+  total_requested: number
+  total_succeeded: number
+  total_failed: number
+  total_skipped: number
+  command_ids?: string[]
+  results: BatchToggleToolResult[]
+}
+
 export interface InstallationToolsResponse {
   installation_id: string
   installation_name: string
@@ -122,6 +144,38 @@ export class McpToolsService {
     return data.data || data
   }
 
+  /**
+   * Batch toggle tool enabled/disabled status for multiple tools
+   */
+  static async batchToggleTools(
+    teamId: string,
+    installationId: string,
+    tools: BatchToggleToolRequest[]
+  ): Promise<BatchToggleToolResponse> {
+    const response = await fetch(
+      `${this.baseUrl}/api/teams/${teamId}/mcp/installations/${installationId}/tools`,
+      {
+        method: 'PATCH',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ tools }),
+      }
+    )
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}))
+      if (response.status === 403) {
+        throw new Error('You don\'t have permission to manage tools')
+      }
+      throw new Error(errorData.error || `Failed to batch toggle tools: ${response.status}`)
+    }
+
+    const data = await response.json()
+    return data.data || data
+  }
+
   /**
    * Get team-wide tools summary (future phase)
    * Note: Backend endpoint not yet implemented
