Refactor renamed the component groups to something less obtuse:
Elements -> Groups -> Screens -> Views
This commit is contained in:
cliffhall
parent
ca6de91a96
commit
dd46acba87
2 changed files with 151 additions and 144 deletions
|
|
@ -0,0 +1,201 @@
|
|||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import { fn } from "storybook/test";
|
||||
import { ImportServerJsonPanel } from "./ImportServerJsonPanel";
|
||||
|
||||
const meta: Meta<typeof ImportServerJsonPanel> = {
|
||||
title: "Groups/ImportServerJsonPanel",
|
||||
component: ImportServerJsonPanel,
|
||||
args: {
|
||||
onJsonChange: fn(),
|
||||
onValidate: fn(),
|
||||
onSelectPackage: fn(),
|
||||
onEnvVarChange: fn(),
|
||||
onServerNameChange: fn(),
|
||||
onAddServer: fn(),
|
||||
onCancel: fn(),
|
||||
selectedPackageIndex: 0,
|
||||
envVars: [],
|
||||
serverName: "",
|
||||
validationResults: [],
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof ImportServerJsonPanel>;
|
||||
|
||||
export const Empty: Story = {
|
||||
args: {
|
||||
jsonContent: "",
|
||||
},
|
||||
};
|
||||
|
||||
export const ValidJson: Story = {
|
||||
args: {
|
||||
jsonContent: JSON.stringify(
|
||||
{
|
||||
name: "my-mcp-server",
|
||||
version: "1.0.0",
|
||||
packages: [
|
||||
{
|
||||
registryType: "npm",
|
||||
identifier: "my-mcp-server",
|
||||
runtimeHint: "node",
|
||||
},
|
||||
],
|
||||
},
|
||||
null,
|
||||
2,
|
||||
),
|
||||
validationResults: [
|
||||
{ type: "success", message: "Valid server.json format detected" },
|
||||
{ type: "success", message: "Package configuration is valid" },
|
||||
{ type: "info", message: "1 package found" },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const MultiplePackages: Story = {
|
||||
args: {
|
||||
jsonContent: JSON.stringify(
|
||||
{
|
||||
name: "multi-server",
|
||||
packages: [
|
||||
{
|
||||
registryType: "npm",
|
||||
identifier: "@scope/server",
|
||||
runtimeHint: "node",
|
||||
},
|
||||
{
|
||||
registryType: "pip",
|
||||
identifier: "server-python",
|
||||
runtimeHint: "python3",
|
||||
},
|
||||
],
|
||||
},
|
||||
null,
|
||||
2,
|
||||
),
|
||||
validationResults: [
|
||||
{ type: "success", message: "Valid server.json format detected" },
|
||||
{ type: "info", message: "2 packages found - select one to install" },
|
||||
],
|
||||
packages: [
|
||||
{ registryType: "npm", identifier: "@scope/server", runtimeHint: "node" },
|
||||
{
|
||||
registryType: "pip",
|
||||
identifier: "server-python",
|
||||
runtimeHint: "python3",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const WithEnvVars: Story = {
|
||||
args: {
|
||||
jsonContent: JSON.stringify(
|
||||
{
|
||||
name: "api-server",
|
||||
packages: [
|
||||
{
|
||||
registryType: "npm",
|
||||
identifier: "api-server",
|
||||
runtimeHint: "node",
|
||||
},
|
||||
],
|
||||
envVars: [
|
||||
{ name: "API_KEY", required: true },
|
||||
{ name: "API_URL", required: false },
|
||||
],
|
||||
},
|
||||
null,
|
||||
2,
|
||||
),
|
||||
validationResults: [
|
||||
{ type: "success", message: "Valid server.json format detected" },
|
||||
{
|
||||
type: "warning",
|
||||
message: "2 environment variables need to be configured",
|
||||
},
|
||||
],
|
||||
envVars: [
|
||||
{
|
||||
name: "API_KEY",
|
||||
description: "Your API authentication key",
|
||||
required: true,
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "API_URL",
|
||||
description: "Base URL for the API endpoint",
|
||||
required: false,
|
||||
value: "https://api.example.com",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const FullyConfigured: Story = {
|
||||
args: {
|
||||
jsonContent: JSON.stringify(
|
||||
{
|
||||
name: "full-server",
|
||||
version: "2.1.0",
|
||||
packages: [
|
||||
{
|
||||
registryType: "npm",
|
||||
identifier: "@org/full-server",
|
||||
runtimeHint: "node",
|
||||
},
|
||||
{
|
||||
registryType: "docker",
|
||||
identifier: "org/full-server:latest",
|
||||
runtimeHint: "docker",
|
||||
},
|
||||
],
|
||||
envVars: [
|
||||
{ name: "TOKEN", required: true },
|
||||
{ name: "DEBUG", required: false },
|
||||
],
|
||||
},
|
||||
null,
|
||||
2,
|
||||
),
|
||||
validationResults: [
|
||||
{ type: "success", message: "Valid server.json format detected" },
|
||||
{ type: "success", message: "All required fields present" },
|
||||
{ type: "info", message: "2 packages found" },
|
||||
{
|
||||
type: "warning",
|
||||
message: "Environment variables require configuration",
|
||||
},
|
||||
],
|
||||
packages: [
|
||||
{
|
||||
registryType: "npm",
|
||||
identifier: "@org/full-server",
|
||||
runtimeHint: "node",
|
||||
},
|
||||
{
|
||||
registryType: "docker",
|
||||
identifier: "org/full-server:latest",
|
||||
runtimeHint: "docker",
|
||||
},
|
||||
],
|
||||
selectedPackageIndex: 1,
|
||||
envVars: [
|
||||
{
|
||||
name: "TOKEN",
|
||||
description: "Authentication token",
|
||||
required: true,
|
||||
value: "sk-abc123",
|
||||
},
|
||||
{
|
||||
name: "DEBUG",
|
||||
description: "Enable debug logging",
|
||||
required: false,
|
||||
value: "true",
|
||||
},
|
||||
],
|
||||
serverName: "My Custom Server",
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
import {
|
||||
Button,
|
||||
Divider,
|
||||
Group,
|
||||
Radio,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Textarea,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
|
||||
export interface ValidationResult {
|
||||
type: "success" | "warning" | "info" | "error";
|
||||
message: string;
|
||||
}
|
||||
|
||||
export interface PackageInfo {
|
||||
registryType: string;
|
||||
identifier: string;
|
||||
runtimeHint: string;
|
||||
}
|
||||
|
||||
export interface EnvVarInfo {
|
||||
name: string;
|
||||
description?: string;
|
||||
required: boolean;
|
||||
value: string;
|
||||
}
|
||||
|
||||
export interface ImportServerJsonPanelProps {
|
||||
jsonContent: string;
|
||||
validationResults: ValidationResult[];
|
||||
packages?: PackageInfo[];
|
||||
selectedPackageIndex: number;
|
||||
envVars: EnvVarInfo[];
|
||||
serverName: string;
|
||||
onJsonChange: (content: string) => void;
|
||||
onValidate: () => void;
|
||||
onSelectPackage: (index: number) => void;
|
||||
onEnvVarChange: (name: string, value: string) => void;
|
||||
onServerNameChange: (name: string) => void;
|
||||
onAddServer: () => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const validationIcons: Record<
|
||||
ValidationResult["type"],
|
||||
{ icon: string; color: string }
|
||||
> = {
|
||||
success: { icon: "\u2713", color: "green" },
|
||||
warning: { icon: "\u26A0", color: "yellow" },
|
||||
info: { icon: "\u2139", color: "blue" },
|
||||
error: { icon: "\u2717", color: "red" },
|
||||
};
|
||||
|
||||
const HintText = Text.withProps({
|
||||
size: "sm",
|
||||
c: "dimmed",
|
||||
});
|
||||
|
||||
function formatPackageLabel(pkg: PackageInfo): string {
|
||||
return `${pkg.registryType}: ${pkg.identifier} (${pkg.runtimeHint})`;
|
||||
}
|
||||
|
||||
export function ImportServerJsonPanel({
|
||||
jsonContent,
|
||||
validationResults,
|
||||
packages,
|
||||
selectedPackageIndex,
|
||||
envVars,
|
||||
serverName,
|
||||
onJsonChange,
|
||||
onValidate,
|
||||
onSelectPackage,
|
||||
onEnvVarChange,
|
||||
onServerNameChange,
|
||||
onAddServer,
|
||||
onCancel,
|
||||
}: ImportServerJsonPanelProps) {
|
||||
return (
|
||||
<Stack gap="md">
|
||||
<Title order={4}>Import MCP Registry server.json</Title>
|
||||
|
||||
<HintText>Paste server.json content or drag and drop a file:</HintText>
|
||||
|
||||
<Textarea
|
||||
value={jsonContent}
|
||||
onChange={(e) => onJsonChange(e.currentTarget.value)}
|
||||
ff="monospace"
|
||||
autosize
|
||||
minRows={8}
|
||||
maxRows={15}
|
||||
/>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Title order={5}>Validation Results:</Title>
|
||||
|
||||
{validationResults.map((result, index) => {
|
||||
const { icon, color } = validationIcons[result.type];
|
||||
return (
|
||||
<Group key={index} gap="xs">
|
||||
<Text c={color}>{icon}</Text>
|
||||
<Text size="sm">{result.message}</Text>
|
||||
</Group>
|
||||
);
|
||||
})}
|
||||
|
||||
{packages && packages.length > 1 && (
|
||||
<>
|
||||
<Divider />
|
||||
<Title order={5}>Package Selection:</Title>
|
||||
<Radio.Group
|
||||
value={String(selectedPackageIndex)}
|
||||
onChange={(value) => onSelectPackage(Number(value))}
|
||||
>
|
||||
<Stack gap="xs">
|
||||
{packages.map((pkg, index) => (
|
||||
<Radio
|
||||
key={index}
|
||||
value={String(index)}
|
||||
label={formatPackageLabel(pkg)}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
</Radio.Group>
|
||||
</>
|
||||
)}
|
||||
|
||||
{envVars.length > 0 && (
|
||||
<>
|
||||
<Divider />
|
||||
<Title order={5}>Environment Variables:</Title>
|
||||
{envVars.map((envVar) => (
|
||||
<TextInput
|
||||
key={envVar.name}
|
||||
label={envVar.name}
|
||||
description={envVar.description}
|
||||
withAsterisk={envVar.required}
|
||||
value={envVar.value}
|
||||
onChange={(e) =>
|
||||
onEnvVarChange(envVar.name, e.currentTarget.value)
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
<Divider />
|
||||
|
||||
<TextInput
|
||||
label="Server Name (optional override)"
|
||||
value={serverName}
|
||||
onChange={(e) => onServerNameChange(e.currentTarget.value)}
|
||||
/>
|
||||
|
||||
<Group justify="flex-end">
|
||||
<Button variant="light" onClick={onValidate}>
|
||||
Validate Again
|
||||
</Button>
|
||||
<Button variant="light" onClick={onCancel}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={onAddServer}>Add Server</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue