feat: enhance ProgressBar and UsageInfo for storage mode (#31273)

Co-authored-by: CodingOnStar <hanxujiang@dify.ai>

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

@@ -2,24 +2,61 @@ import { render, screen } from '@testing-library/react'
 import ProgressBar from './index'
 
 describe('ProgressBar', () => {
-  it('renders with provided percent and color', () => {
-    render(<ProgressBar percent={42} color="bg-test-color" />)
+  describe('Normal Mode (determinate)', () => {
+    it('renders with provided percent and color', () => {
+      render(<ProgressBar percent={42} color="bg-test-color" />)
 
-    const bar = screen.getByTestId('billing-progress-bar')
-    expect(bar).toHaveClass('bg-test-color')
-    expect(bar.getAttribute('style')).toContain('width: 42%')
+      const bar = screen.getByTestId('billing-progress-bar')
+      expect(bar).toHaveClass('bg-test-color')
+      expect(bar.getAttribute('style')).toContain('width: 42%')
+    })
+
+    it('caps width at 100% when percent exceeds max', () => {
+      render(<ProgressBar percent={150} color="bg-test-color" />)
+
+      const bar = screen.getByTestId('billing-progress-bar')
+      expect(bar.getAttribute('style')).toContain('width: 100%')
+    })
+
+    it('uses the default color when no color prop is provided', () => {
+      render(<ProgressBar percent={20} color={undefined as unknown as string} />)
+
+      const bar = screen.getByTestId('billing-progress-bar')
+      expect(bar).toHaveClass('bg-components-progress-bar-progress-solid')
+      expect(bar.getAttribute('style')).toContain('width: 20%')
+    })
   })
 
-  it('caps width at 100% when percent exceeds max', () => {
-    render(<ProgressBar percent={150} color="bg-test-color" />)
+  describe('Indeterminate Mode', () => {
+    it('should render indeterminate progress bar when indeterminate is true', () => {
+      render(<ProgressBar percent={0} color="bg-test-color" indeterminate />)
 
-    const bar = screen.getByTestId('billing-progress-bar')
-    expect(bar.getAttribute('style')).toContain('width: 100%')
-  })
+      const bar = screen.getByTestId('billing-progress-bar-indeterminate')
+      expect(bar).toBeInTheDocument()
+      expect(bar).toHaveClass('bg-progress-bar-indeterminate-stripe')
+    })
 
-  it('uses the default color when no color prop is provided', () => {
-    render(<ProgressBar percent={20} color={undefined as unknown as string} />)
+    it('should not render normal progress bar when indeterminate is true', () => {
+      render(<ProgressBar percent={50} color="bg-test-color" indeterminate />)
 
-    expect(screen.getByTestId('billing-progress-bar')).toHaveClass('#2970FF')
+      expect(screen.queryByTestId('billing-progress-bar')).not.toBeInTheDocument()
+      expect(screen.getByTestId('billing-progress-bar-indeterminate')).toBeInTheDocument()
+    })
+
+    it('should render with default width (w-[30px]) when indeterminateFull is false', () => {
+      render(<ProgressBar percent={0} color="bg-test-color" indeterminate indeterminateFull={false} />)
+
+      const bar = screen.getByTestId('billing-progress-bar-indeterminate')
+      expect(bar).toHaveClass('w-[30px]')
+      expect(bar).not.toHaveClass('w-full')
+    })
+
+    it('should render with full width (w-full) when indeterminateFull is true', () => {
+      render(<ProgressBar percent={0} color="bg-test-color" indeterminate indeterminateFull />)
+
+      const bar = screen.getByTestId('billing-progress-bar-indeterminate')
+      expect(bar).toHaveClass('w-full')
+      expect(bar).not.toHaveClass('w-[30px]')
+    })
   })
 })

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

@@ -3,12 +3,27 @@ import { cn } from '@/utils/classnames'
 type ProgressBarProps = {
   percent: number
   color: string
+  indeterminate?: boolean
+  indeterminateFull?: boolean // For Sandbox users: full width stripe
 }
 
 const ProgressBar = ({
   percent = 0,
-  color = '#2970FF',
+  color = 'bg-components-progress-bar-progress-solid',
+  indeterminate = false,
+  indeterminateFull = false,
 }: ProgressBarProps) => {
+  if (indeterminate) {
+    return (
+      <div className="overflow-hidden rounded-[6px] bg-components-progress-bar-bg">
+        <div
+          data-testid="billing-progress-bar-indeterminate"
+          className={cn('h-1 rounded-[6px] bg-progress-bar-indeterminate-stripe', indeterminateFull ? 'w-full' : 'w-[30px]')}
+        />
+      </div>
+    )
+  }
+
   return (
     <div className="overflow-hidden rounded-[6px] bg-components-progress-bar-bg">
       <div