Skip to content

Commit f2009e8

Browse files
claudeclaude
committed
refactor: extract welcome steps data to separate file
Move WELCOME_STEPS constant and WelcomeStep type to welcomeSteps.tsx so the WelcomeGuide component file only exports a component, fixing the react-refresh/only-export-components ESLint warning. https://claude.ai/code/session_01TY5YfV9R31MfrJDtovKqmi
1 parent c983453 commit f2009e8

3 files changed

Lines changed: 87 additions & 87 deletions

File tree

‎apps/desktop/src/components/WelcomeGuide.tsx‎

Lines changed: 1 addition & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,11 @@
11
import { useState } from 'react';
22
import {
3-
Globe,
4-
Server,
5-
Monitor,
6-
Wrench,
73
ChevronRight,
84
ChevronLeft,
9-
Rocket,
105
} from 'lucide-react';
116
import { Button, Card } from '@mcpmux/ui';
127
import { useAppStore, useHasSeenWelcome } from '@/stores';
13-
14-
interface WelcomeStep {
15-
id: string;
16-
icon: React.ReactNode;
17-
title: string;
18-
description: string;
19-
details: string[];
20-
tip: string | null;
21-
}
22-
23-
const WELCOME_STEPS: WelcomeStep[] = [
24-
{
25-
id: 'welcome',
26-
icon: <Rocket className="h-8 w-8" />,
27-
title: 'Welcome to McpMux',
28-
description:
29-
'Your centralized MCP server manager. Configure your MCP servers once, connect every AI client through a single gateway.',
30-
details: [
31-
'No more duplicating server configs across Cursor, Claude Desktop, VS Code, and others',
32-
'Credentials are encrypted in your OS keychain — not stored in plain-text JSON',
33-
'One local gateway endpoint for all your AI clients',
34-
],
35-
tip: null,
36-
},
37-
{
38-
id: 'discover',
39-
icon: <Globe className="h-8 w-8" />,
40-
title: 'Discover & Install Servers',
41-
description:
42-
'Browse the curated registry and install MCP servers with one click. Search by category, auth type, or name.',
43-
details: [
44-
'Open the Discover page from the sidebar to browse available servers',
45-
'Click Install on any server to add it to your active space',
46-
'Servers requiring API keys or OAuth will prompt you for credentials',
47-
],
48-
tip: 'Servers are cached locally so you can browse even when offline.',
49-
},
50-
{
51-
id: 'spaces',
52-
icon: <Server className="h-8 w-8" />,
53-
title: 'Organize with Spaces',
54-
description:
55-
'Spaces are isolated workspaces with their own servers and credentials. Use them to separate work, personal, and project contexts.',
56-
details: [
57-
'Create spaces from the Spaces page — each gets its own server set',
58-
'Switch the active space from the sidebar dropdown',
59-
'Your AI clients automatically follow the active space',
60-
],
61-
tip: 'A default space is created for you on first launch.',
62-
},
63-
{
64-
id: 'connect',
65-
icon: <Monitor className="h-8 w-8" />,
66-
title: 'Connect Your AI Clients',
67-
description:
68-
'Add one config snippet to each AI client. All installed servers become available through the McpMux gateway.',
69-
details: [
70-
'Copy the gateway config from the Dashboard page',
71-
'Paste it into your client\'s MCP settings (inside mcpServers)',
72-
'Clients like Cursor, Claude Desktop, VS Code, and Windsurf are all supported',
73-
],
74-
tip: 'The gateway runs locally — your data never leaves your machine.',
75-
},
76-
{
77-
id: 'featuresets',
78-
icon: <Wrench className="h-8 w-8" />,
79-
title: 'Control with FeatureSets',
80-
description:
81-
'FeatureSets let you control which tools, prompts, and resources each client can access. Create permission bundles for fine-grained control.',
82-
details: [
83-
'Go to FeatureSets to create bundles like "Read Only" or "Dev Tools"',
84-
'Assign specific server features to each bundle',
85-
'Grant bundles to individual clients from the Clients page',
86-
],
87-
tip: 'A "Default" FeatureSet is auto-created for each space.',
88-
},
89-
];
8+
import { WELCOME_STEPS } from './welcomeSteps';
909

9110
export function WelcomeGuide() {
9211
const hasSeenWelcome = useHasSeenWelcome();
@@ -233,7 +152,3 @@ export function WelcomeGuide() {
233152
</div>
234153
);
235154
}
236-
237-
/** Re-export the steps data for testing */
238-
export { WELCOME_STEPS };
239-
export type { WelcomeStep };

‎apps/desktop/src/components/welcomeSteps.tsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import {
2+
Globe,
3+
Server,
4+
Monitor,
5+
Wrench,
6+
Rocket,
7+
} from 'lucide-react';
8+
9+
export interface WelcomeStep {
10+
id: string;
11+
icon: React.ReactNode;
12+
title: string;
13+
description: string;
14+
details: string[];
15+
tip: string | null;
16+
}
17+
18+
export const WELCOME_STEPS: WelcomeStep[] = [
19+
{
20+
id: 'welcome',
21+
icon: <Rocket className="h-8 w-8" />,
22+
title: 'Welcome to McpMux',
23+
description:
24+
'Your centralized MCP server manager. Configure your MCP servers once, connect every AI client through a single gateway.',
25+
details: [
26+
'No more duplicating server configs across Cursor, Claude Desktop, VS Code, and others',
27+
'Credentials are encrypted in your OS keychain — not stored in plain-text JSON',
28+
'One local gateway endpoint for all your AI clients',
29+
],
30+
tip: null,
31+
},
32+
{
33+
id: 'discover',
34+
icon: <Globe className="h-8 w-8" />,
35+
title: 'Discover & Install Servers',
36+
description:
37+
'Browse the curated registry and install MCP servers with one click. Search by category, auth type, or name.',
38+
details: [
39+
'Open the Discover page from the sidebar to browse available servers',
40+
'Click Install on any server to add it to your active space',
41+
'Servers requiring API keys or OAuth will prompt you for credentials',
42+
],
43+
tip: 'Servers are cached locally so you can browse even when offline.',
44+
},
45+
{
46+
id: 'spaces',
47+
icon: <Server className="h-8 w-8" />,
48+
title: 'Organize with Spaces',
49+
description:
50+
'Spaces are isolated workspaces with their own servers and credentials. Use them to separate work, personal, and project contexts.',
51+
details: [
52+
'Create spaces from the Spaces page — each gets its own server set',
53+
'Switch the active space from the sidebar dropdown',
54+
'Your AI clients automatically follow the active space',
55+
],
56+
tip: 'A default space is created for you on first launch.',
57+
},
58+
{
59+
id: 'connect',
60+
icon: <Monitor className="h-8 w-8" />,
61+
title: 'Connect Your AI Clients',
62+
description:
63+
'Add one config snippet to each AI client. All installed servers become available through the McpMux gateway.',
64+
details: [
65+
'Copy the gateway config from the Dashboard page',
66+
'Paste it into your client\'s MCP settings (inside mcpServers)',
67+
'Clients like Cursor, Claude Desktop, VS Code, and Windsurf are all supported',
68+
],
69+
tip: 'The gateway runs locally — your data never leaves your machine.',
70+
},
71+
{
72+
id: 'featuresets',
73+
icon: <Wrench className="h-8 w-8" />,
74+
title: 'Control with FeatureSets',
75+
description:
76+
'FeatureSets let you control which tools, prompts, and resources each client can access. Create permission bundles for fine-grained control.',
77+
details: [
78+
'Go to FeatureSets to create bundles like "Read Only" or "Dev Tools"',
79+
'Assign specific server features to each bundle',
80+
'Grant bundles to individual clients from the Clients page',
81+
],
82+
tip: 'A "Default" FeatureSet is auto-created for each space.',
83+
},
84+
];

‎tests/ts/components/WelcomeGuide.test.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { describe, it, expect, beforeEach } from 'vitest';
22
import { render, screen, within } from '@testing-library/react';
33
import userEvent from '@testing-library/user-event';
4-
import { WelcomeGuide, WELCOME_STEPS } from '../../../apps/desktop/src/components/WelcomeGuide';
4+
import { WelcomeGuide } from '../../../apps/desktop/src/components/WelcomeGuide';
5+
import { WELCOME_STEPS } from '../../../apps/desktop/src/components/welcomeSteps';
56
import { useAppStore } from '../../../apps/desktop/src/stores/appStore';
67

78
describe('WelcomeGuide', () => {

0 commit comments

Comments
 (0)