scriptoriumadmin/Roo-Code
1
0
Fork 0
mirror of https://github.com/RooVetGit/Roo-Code.git synced 2026-09-07 08:26:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Removes unnecessary animations

Browse source
This commit is contained in:
Bruno Bergher 2025-08-05 21:40:33 +01:00
parent 019f14d5e6
commit 01b368c115
2 changed files with 7 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
webview-ui/src/components/chat/CloudNotificationBanner.tsx
View file

@ -1,4 +1,3 @@
import { useState } from "react"
import { useTranslation } from "react-i18next"
import { Lightbulb, X } from "lucide-react"
import { cn } from "@src/lib/utils"
@ -15,15 +14,9 @@ export const CloudNotificationBanner = ({
className,
}: CloudNotificationBannerProps) => {
const { t } = useTranslation()
const [isVisible, setIsVisible] = useState(true)
const [isAnimating, setIsAnimating] = useState(false)
const handleDismiss = () => {
setIsAnimating(true)
setTimeout(() => {
setIsVisible(false)
onDismiss()
}, 200) // Match animation duration
onDismiss()
}
const handleClick = () => {
@ -31,15 +24,8 @@ export const CloudNotificationBanner = ({
handleDismiss()
}
if (!isVisible) return null
return (
<div
className={cn(
"bg-vscode-badge-background relative z-50 transition-all duration-200 ease-in-out",
isAnimating ? "opacity-0 transform scale-95" : "opacity-100 transform scale-100",
className,
)}>
<div className={cn("bg-vscode-badge-background relative z-50", className)}>
{/* Main notification container with speech bubble */}
<div
className="relative text-vscode-badge-foreground p-2 rounded-md cursor-pointer transition-colors"

38
webview-ui/src/components/chat/__tests__/CloudNotificationBanner.spec.tsx
View file

@ -1,6 +1,6 @@
// npx vitest src/components/chat/__tests__/CloudNotificationBanner.spec.tsx
import { render, screen, fireEvent, waitFor } from "@testing-library/react"
import { render, screen, fireEvent } from "@testing-library/react"
import { vi } from "vitest"
import { CloudNotificationBanner } from "../CloudNotificationBanner"
@ -58,36 +58,23 @@ describe("CloudNotificationBanner", () => {
expect(closeButton).toBeInTheDocument()
})
it("calls onNavigateToAccount and onDismiss when banner is clicked", async () => {
it("calls onNavigateToAccount and onDismiss when banner is clicked", () => {
render(<CloudNotificationBanner {...defaultProps} />)
const banner = screen.getByText("This might take a while. Grab a coffee and continue from anywhere with Cloud.")
fireEvent.click(banner)
expect(mockOnNavigateToAccount).toHaveBeenCalledTimes(1)
// Wait for the animation timeout
await waitFor(
() => {
expect(mockOnDismiss).toHaveBeenCalledTimes(1)
},
{ timeout: 300 },
)
expect(mockOnDismiss).toHaveBeenCalledTimes(1)
})
it("calls onDismiss when close button is clicked", async () => {
it("calls onDismiss when close button is clicked", () => {
render(<CloudNotificationBanner {...defaultProps} />)
const closeButton = screen.getByRole("button", { name: "Close notification" })
fireEvent.click(closeButton)
// Wait for the animation timeout
await waitFor(
() => {
expect(mockOnDismiss).toHaveBeenCalledTimes(1)
},
{ timeout: 300 },
)
expect(mockOnDismiss).toHaveBeenCalledTimes(1)
})
it("does not call onNavigateToAccount when close button is clicked", () => {
@ -117,19 +104,4 @@ describe("CloudNotificationBanner", () => {
expect(triangleElement).toBeInTheDocument()
})
it("handles animation states correctly", async () => {
const { container } = render(<CloudNotificationBanner {...defaultProps} />)
const bannerContainer = container.firstChild as HTMLElement
expect(bannerContainer).toHaveClass("opacity-100")
const closeButton = screen.getByRole("button", { name: "Close notification" })
fireEvent.click(closeButton)
// Should start animation
await waitFor(() => {
expect(bannerContainer).toHaveClass("opacity-0")
})
})
})