refactor: ui improvement
This commit is contained in:
Xiao Yijun
parent
cc2272b68c
commit
1c9b47a0e8
1 changed files with 89 additions and 93 deletions
|
|
@ -103,10 +103,9 @@ const Sidebar = ({
|
||||||
}: SidebarProps) => {
|
}: SidebarProps) => {
|
||||||
const [theme, setTheme] = useTheme();
|
const [theme, setTheme] = useTheme();
|
||||||
const [showEnvVars, setShowEnvVars] = useState(false);
|
const [showEnvVars, setShowEnvVars] = useState(false);
|
||||||
const [showBearerToken, setShowBearerToken] = useState(false);
|
const [showAuthConfig, setShowAuthConfig] = useState(false);
|
||||||
const [showConfig, setShowConfig] = useState(false);
|
const [showConfig, setShowConfig] = useState(false);
|
||||||
const [shownEnvVars, setShownEnvVars] = useState<Set<string>>(new Set());
|
const [shownEnvVars, setShownEnvVars] = useState<Set<string>>(new Set());
|
||||||
const [showOauthConfig, setShowOauthConfig] = useState(false);
|
|
||||||
const [copiedServerEntry, setCopiedServerEntry] = useState(false);
|
const [copiedServerEntry, setCopiedServerEntry] = useState(false);
|
||||||
const [copiedServerFile, setCopiedServerFile] = useState(false);
|
const [copiedServerFile, setCopiedServerFile] = useState(false);
|
||||||
const { toast } = useToast();
|
const { toast } = useToast();
|
||||||
|
|
@ -317,97 +316,6 @@ const Sidebar = ({
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-2">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => setShowBearerToken(!showBearerToken)}
|
|
||||||
className="flex items-center w-full"
|
|
||||||
data-testid="auth-button"
|
|
||||||
aria-expanded={showBearerToken}
|
|
||||||
>
|
|
||||||
{showBearerToken ? (
|
|
||||||
<ChevronDown className="w-4 h-4 mr-2" />
|
|
||||||
) : (
|
|
||||||
<ChevronRight className="w-4 h-4 mr-2" />
|
|
||||||
)}
|
|
||||||
Authentication
|
|
||||||
</Button>
|
|
||||||
{showBearerToken && (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="text-sm font-medium">Header Name</label>
|
|
||||||
<Input
|
|
||||||
placeholder="Authorization"
|
|
||||||
onChange={(e) =>
|
|
||||||
setHeaderName && setHeaderName(e.target.value)
|
|
||||||
}
|
|
||||||
data-testid="header-input"
|
|
||||||
className="font-mono"
|
|
||||||
value={headerName}
|
|
||||||
/>
|
|
||||||
<label
|
|
||||||
className="text-sm font-medium"
|
|
||||||
htmlFor="bearer-token-input"
|
|
||||||
>
|
|
||||||
Bearer Token
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
id="bearer-token-input"
|
|
||||||
placeholder="Bearer Token"
|
|
||||||
value={bearerToken}
|
|
||||||
onChange={(e) => setBearerToken(e.target.value)}
|
|
||||||
data-testid="bearer-token-input"
|
|
||||||
className="font-mono"
|
|
||||||
type="password"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{/* OAuth Configuration */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => setShowOauthConfig(!showOauthConfig)}
|
|
||||||
className="flex items-center w-full"
|
|
||||||
data-testid="oauth-config-button"
|
|
||||||
aria-expanded={showOauthConfig}
|
|
||||||
>
|
|
||||||
{showOauthConfig ? (
|
|
||||||
<ChevronDown className="w-4 h-4 mr-2" />
|
|
||||||
) : (
|
|
||||||
<ChevronRight className="w-4 h-4 mr-2" />
|
|
||||||
)}
|
|
||||||
OAuth Configuration
|
|
||||||
</Button>
|
|
||||||
{showOauthConfig && (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="text-sm font-medium">Client ID</label>
|
|
||||||
<Input
|
|
||||||
placeholder="Client ID"
|
|
||||||
onChange={(e) => setOauthClientId(e.target.value)}
|
|
||||||
value={oauthClientId}
|
|
||||||
data-testid="oauth-client-id-input"
|
|
||||||
className="font-mono"
|
|
||||||
/>
|
|
||||||
<label className="text-sm font-medium">
|
|
||||||
Redirect URL
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
readOnly
|
|
||||||
placeholder="Redirect URL"
|
|
||||||
value={window.location.origin + "/oauth/callback"}
|
|
||||||
className="font-mono"
|
|
||||||
/>
|
|
||||||
<label className="text-sm font-medium">Scope</label>
|
|
||||||
<Input
|
|
||||||
placeholder="Scope (space-separated)"
|
|
||||||
onChange={(e) => setOauthScope(e.target.value)}
|
|
||||||
value={oauthScope}
|
|
||||||
data-testid="oauth-scope-input"
|
|
||||||
className="font-mono"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
@ -576,6 +484,94 @@ const Sidebar = ({
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setShowAuthConfig(!showAuthConfig)}
|
||||||
|
className="flex items-center w-full"
|
||||||
|
data-testid="auth-button"
|
||||||
|
aria-expanded={showAuthConfig}
|
||||||
|
>
|
||||||
|
{showAuthConfig ? (
|
||||||
|
<ChevronDown className="w-4 h-4 mr-2" />
|
||||||
|
) : (
|
||||||
|
<ChevronRight className="w-4 h-4 mr-2" />
|
||||||
|
)}
|
||||||
|
Authentication
|
||||||
|
</Button>
|
||||||
|
{showAuthConfig && (
|
||||||
|
<>
|
||||||
|
{/* Bearer Token Section */}
|
||||||
|
<div className="space-y-2 p-3 rounded border">
|
||||||
|
<h4 className="text-sm font-semibold flex items-center">
|
||||||
|
API Token Authentication
|
||||||
|
</h4>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium">Header Name</label>
|
||||||
|
<Input
|
||||||
|
placeholder="Authorization"
|
||||||
|
onChange={(e) =>
|
||||||
|
setHeaderName && setHeaderName(e.target.value)
|
||||||
|
}
|
||||||
|
data-testid="header-input"
|
||||||
|
className="font-mono"
|
||||||
|
value={headerName}
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
className="text-sm font-medium"
|
||||||
|
htmlFor="bearer-token-input"
|
||||||
|
>
|
||||||
|
Bearer Token
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
id="bearer-token-input"
|
||||||
|
placeholder="Bearer Token"
|
||||||
|
value={bearerToken}
|
||||||
|
onChange={(e) => setBearerToken(e.target.value)}
|
||||||
|
data-testid="bearer-token-input"
|
||||||
|
className="font-mono"
|
||||||
|
type="password"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{transportType !== "stdio" && (
|
||||||
|
// OAuth Configuration
|
||||||
|
<div className="space-y-2 p-3 rounded border">
|
||||||
|
<h4 className="text-sm font-semibold flex items-center">
|
||||||
|
OAuth 2.0 Flow
|
||||||
|
</h4>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium">Client ID</label>
|
||||||
|
<Input
|
||||||
|
placeholder="Client ID"
|
||||||
|
onChange={(e) => setOauthClientId(e.target.value)}
|
||||||
|
value={oauthClientId}
|
||||||
|
data-testid="oauth-client-id-input"
|
||||||
|
className="font-mono"
|
||||||
|
/>
|
||||||
|
<label className="text-sm font-medium">
|
||||||
|
Redirect URL
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
readOnly
|
||||||
|
placeholder="Redirect URL"
|
||||||
|
value={window.location.origin + "/oauth/callback"}
|
||||||
|
className="font-mono"
|
||||||
|
/>
|
||||||
|
<label className="text-sm font-medium">Scope</label>
|
||||||
|
<Input
|
||||||
|
placeholder="Scope (space-separated)"
|
||||||
|
onChange={(e) => setOauthScope(e.target.value)}
|
||||||
|
value={oauthScope}
|
||||||
|
data-testid="oauth-scope-input"
|
||||||
|
className="font-mono"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
{/* Configuration */}
|
{/* Configuration */}
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Button
|
<Button
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue