feat: enhance CLI and API key verification buttons to hide when already verified

This commit is contained in:
Cody Seibert
2025-12-15 15:12:49 -05:00
parent d42857ec26
commit b66d228460
2 changed files with 59 additions and 53 deletions

View File

@@ -51,6 +51,8 @@ function SheetContent({
...props ...props
}: React.ComponentProps<typeof SheetPrimitive.Content> & { }: React.ComponentProps<typeof SheetPrimitive.Content> & {
side?: "top" | "right" | "bottom" | "left" side?: "top" | "right" | "bottom" | "left"
children?: React.ReactNode
className?: string
}) { }) {
return ( return (
<SheetPortal> <SheetPortal>

View File

@@ -542,33 +542,35 @@ export function ClaudeSetupStep({
</div> </div>
)} )}
{/* CLI Verify Button */} {/* CLI Verify Button - Hide if CLI is verified */}
<Button {cliVerificationStatus !== "verified" && (
onClick={verifyCliAuth} <Button
disabled={ onClick={verifyCliAuth}
cliVerificationStatus === "verifying" || disabled={
!claudeCliStatus?.installed cliVerificationStatus === "verifying" ||
} !claudeCliStatus?.installed
className="w-full bg-brand-500 hover:bg-brand-600 text-white" }
data-testid="verify-cli-button" className="w-full bg-brand-500 hover:bg-brand-600 text-white"
> data-testid="verify-cli-button"
{cliVerificationStatus === "verifying" ? ( >
<> {cliVerificationStatus === "verifying" ? (
<Loader2 className="w-4 h-4 mr-2 animate-spin" /> <>
Verifying... <Loader2 className="w-4 h-4 mr-2 animate-spin" />
</> Verifying...
) : cliVerificationStatus === "error" ? ( </>
<> ) : cliVerificationStatus === "error" ? (
<RefreshCw className="w-4 h-4 mr-2" /> <>
Retry Verification <RefreshCw className="w-4 h-4 mr-2" />
</> Retry Verification
) : ( </>
<> ) : (
<ShieldCheck className="w-4 h-4 mr-2" /> <>
Verify CLI Authentication <ShieldCheck className="w-4 h-4 mr-2" />
</> Verify CLI Authentication
)} </>
</Button> )}
</Button>
)}
</AccordionContent> </AccordionContent>
</AccordionItem> </AccordionItem>
@@ -704,32 +706,34 @@ export function ClaudeSetupStep({
</div> </div>
)} )}
{/* API Key Verify Button */} {/* API Key Verify Button - Hide if API key is verified */}
<Button {apiKeyVerificationStatus !== "verified" && (
onClick={verifyApiKeyAuth} <Button
disabled={ onClick={verifyApiKeyAuth}
apiKeyVerificationStatus === "verifying" || !hasApiKey disabled={
} apiKeyVerificationStatus === "verifying" || !hasApiKey
className="w-full bg-brand-500 hover:bg-brand-600 text-white" }
data-testid="verify-api-key-button" className="w-full bg-brand-500 hover:bg-brand-600 text-white"
> data-testid="verify-api-key-button"
{apiKeyVerificationStatus === "verifying" ? ( >
<> {apiKeyVerificationStatus === "verifying" ? (
<Loader2 className="w-4 h-4 mr-2 animate-spin" /> <>
Verifying... <Loader2 className="w-4 h-4 mr-2 animate-spin" />
</> Verifying...
) : apiKeyVerificationStatus === "error" ? ( </>
<> ) : apiKeyVerificationStatus === "error" ? (
<RefreshCw className="w-4 h-4 mr-2" /> <>
Retry Verification <RefreshCw className="w-4 h-4 mr-2" />
</> Retry Verification
) : ( </>
<> ) : (
<ShieldCheck className="w-4 h-4 mr-2" /> <>
Verify API Key <ShieldCheck className="w-4 h-4 mr-2" />
</> Verify API Key
)} </>
</Button> )}
</Button>
)}
</AccordionContent> </AccordionContent>
</AccordionItem> </AccordionItem>
</Accordion> </Accordion>