refactor(composio): extract derive_toolkit_slug helper (#3035)

app/src/components/settings/panels/ToolsPanel.test.tsx

@@ -0,0 +1,74 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import ToolsPanel from './ToolsPanel';
+
+const mocks = vi.hoisted(() => ({ setOnboardingTasks: vi.fn(), useCoreStateMock: vi.fn() }));
+
+vi.mock('../../../providers/CoreStateProvider', () => ({
+  useCoreState: () => mocks.useCoreStateMock(),
+}));
+
+vi.mock('../../../lib/i18n/I18nContext', () => ({
+  useT: () => ({
+    t: (key: string) =>
+      ({
+        'settings.features.tools': 'Tools',
+        'settings.tools.chooseCapabilities': 'Choose capabilities',
+        'settings.tools.saveChanges': 'Save Changes',
+        'settings.tools.preferencesSaved': 'Preferences saved',
+        'settings.tools.saveFailed': 'Unable to save preferences',
+      })[key] ?? key,
+  }),
+}));
+
+vi.mock('../hooks/useSettingsNavigation', () => ({
+  useSettingsNavigation: () => ({ breadcrumbs: [], navigateBack: vi.fn() }),
+}));
+
+vi.mock('../components/SettingsHeader', () => ({
+  default: ({ title }: { title: string }) => <h1>{title}</h1>,
+}));
+
+function coreState(enabledTools: string[]) {
+  return {
+    snapshot: {
+      localState: {
+        onboardingTasks: {
+          accessibilityPermissionGranted: false,
+          localModelConsentGiven: false,
+          localModelDownloadStarted: false,
+          enabledTools,
+          connectedSources: [],
+        },
+      },
+    },
+    setOnboardingTasks: mocks.setOnboardingTasks,
+  };
+}
+
+describe('<ToolsPanel />', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.useCoreStateMock.mockReturnValue(coreState(['shell']));
+    mocks.setOnboardingTasks.mockResolvedValue(undefined);
+  });
+
+  it('exposes tool toggle state and saves the updated enabled tools list', async () => {
+    render(<ToolsPanel />);
+
+    const shellToggle = screen.getByRole('switch', { name: /Shell Commands/ });
+    await waitFor(() => expect(shellToggle).toHaveAttribute('aria-checked', 'true'));
+
+    fireEvent.click(shellToggle);
+
+    expect(shellToggle).toHaveAttribute('aria-checked', 'false');
+    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }));
+
+    await waitFor(() =>
+      expect(mocks.setOnboardingTasks).toHaveBeenCalledWith(
+        expect.objectContaining({ enabledTools: [] })
+      )
+    );
+  });
+});

app/src/components/settings/panels/ToolsPanel.tsx

@@ -129,6 +129,8 @@ const ToolsPanel = ({ embedded = false }: ToolsPanelProps = {}) => {
                     <button
                       key={tool.id}
                       type="button"
+                      role="switch"
+                      aria-checked={Boolean(enabled[tool.id])}
                       onClick={() => toggle(tool.id)}
                       className="w-full flex items-center justify-between p-2.5 rounded-xl border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 hover:border-stone-300 dark:border-neutral-700 dark:hover:border-neutral-700 transition-colors text-left">
                       <div className="min-w-0 flex-1">