Skip to content

Commit 76a0249

Browse files
CodingOnStarCodingOnStar
CodingOnStar
and
CodingOnStar
authored
feat: enhance ProgressBar and UsageInfo for storage mode (langgenius#31273)
Co-authored-by: CodingOnStar <[email protected]>
1 parent 2512227 commit 76a0249

15 files changed

Lines changed: 866 additions & 139 deletions

File tree

‎web/app/components/billing/progress-bar/index.spec.tsx‎

Lines changed: 50 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,61 @@ import { render, screen } from '@testing-library/react'
22
import ProgressBar from './index'
33

44
describe('ProgressBar', () => {
5-
it('renders with provided percent and color', () => {
6-
render(<ProgressBar percent={42} color="bg-test-color" />)
5+
describe('Normal Mode (determinate)', () => {
6+
it('renders with provided percent and color', () => {
7+
render(<ProgressBar percent={42} color="bg-test-color" />)
78

8-
const bar = screen.getByTestId('billing-progress-bar')
9-
expect(bar).toHaveClass('bg-test-color')
10-
expect(bar.getAttribute('style')).toContain('width: 42%')
11-
})
9+
const bar = screen.getByTestId('billing-progress-bar')
10+
expect(bar).toHaveClass('bg-test-color')
11+
expect(bar.getAttribute('style')).toContain('width: 42%')
12+
})
13+
14+
it('caps width at 100% when percent exceeds max', () => {
15+
render(<ProgressBar percent={150} color="bg-test-color" />)
16+
17+
const bar = screen.getByTestId('billing-progress-bar')
18+
expect(bar.getAttribute('style')).toContain('width: 100%')
19+
})
1220

13-
it('caps width at 100% when percent exceeds max', () => {
14-
render(<ProgressBar percent={150} color="bg-test-color" />)
21+
it('uses the default color when no color prop is provided', () => {
22+
render(<ProgressBar percent={20} color={undefined as unknown as string} />)
1523

16-
const bar = screen.getByTestId('billing-progress-bar')
17-
expect(bar.getAttribute('style')).toContain('width: 100%')
24+
const bar = screen.getByTestId('billing-progress-bar')
25+
expect(bar).toHaveClass('bg-components-progress-bar-progress-solid')
26+
expect(bar.getAttribute('style')).toContain('width: 20%')
27+
})
1828
})
1929

20-
it('uses the default color when no color prop is provided', () => {
21-
render(<ProgressBar percent={20} color={undefined as unknown as string} />)
30+
describe('Indeterminate Mode', () => {
31+
it('should render indeterminate progress bar when indeterminate is true', () => {
32+
render(<ProgressBar percent={0} color="bg-test-color" indeterminate />)
33+
34+
const bar = screen.getByTestId('billing-progress-bar-indeterminate')
35+
expect(bar).toBeInTheDocument()
36+
expect(bar).toHaveClass('bg-progress-bar-indeterminate-stripe')
37+
})
38+
39+
it('should not render normal progress bar when indeterminate is true', () => {
40+
render(<ProgressBar percent={50} color="bg-test-color" indeterminate />)
41+
42+
expect(screen.queryByTestId('billing-progress-bar')).not.toBeInTheDocument()
43+
expect(screen.getByTestId('billing-progress-bar-indeterminate')).toBeInTheDocument()
44+
})
45+
46+
it('should render with default width (w-[30px]) when indeterminateFull is false', () => {
47+
render(<ProgressBar percent={0} color="bg-test-color" indeterminate indeterminateFull={false} />)
48+
49+
const bar = screen.getByTestId('billing-progress-bar-indeterminate')
50+
expect(bar).toHaveClass('w-[30px]')
51+
expect(bar).not.toHaveClass('w-full')
52+
})
53+
54+
it('should render with full width (w-full) when indeterminateFull is true', () => {
55+
render(<ProgressBar percent={0} color="bg-test-color" indeterminate indeterminateFull />)
2256

23-
expect(screen.getByTestId('billing-progress-bar')).toHaveClass('#2970FF')
57+
const bar = screen.getByTestId('billing-progress-bar-indeterminate')
58+
expect(bar).toHaveClass('w-full')
59+
expect(bar).not.toHaveClass('w-[30px]')
60+
})
2461
})
2562
})

‎web/app/components/billing/progress-bar/index.tsx‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,27 @@ import { cn } from '@/utils/classnames'
33
type ProgressBarProps = {
44
percent: number
55
color: string
6+
indeterminate?: boolean
7+
indeterminateFull?: boolean // For Sandbox users: full width stripe
68
}
79

810
const ProgressBar = ({
911
percent = 0,
10-
color = '#2970FF',
12+
color = 'bg-components-progress-bar-progress-solid',
13+
indeterminate = false,
14+
indeterminateFull = false,
1115
}: ProgressBarProps) => {
16+
if (indeterminate) {
17+
return (
18+
<div className="overflow-hidden rounded-[6px] bg-components-progress-bar-bg">
19+
<div
20+
data-testid="billing-progress-bar-indeterminate"
21+
className={cn('h-1 rounded-[6px] bg-progress-bar-indeterminate-stripe', indeterminateFull ? 'w-full' : 'w-[30px]')}
22+
/>
23+
</div>
24+
)
25+
}
26+
1227
return (
1328
<div className="overflow-hidden rounded-[6px] bg-components-progress-bar-bg">
1429
<div

0 commit comments

Comments
 (0)