fix(SeverityPicker): use S1-S4 severity values matching Bugzilla Mozilla

Bugzilla Mozilla uses S1, S2, S3, S4, N/A severity levels, not the
traditional named severities (blocker, critical, etc.). Updated:

- SeverityPicker options to S1-S4 and N/A
- Card severityColors mapping to S1-S4
- All related tests to use S1-S4 values

Author: msujaws

src/components/Board/Card.test.tsx

@@ -38,7 +38,7 @@ const mockBug: BugzillaBug = {
   status: 'NEW',
   assigned_to: 'developer@example.com',
   priority: 'P2',
-  severity: 'major',
+  severity: 'S3',
   component: 'Authentication',
   whiteboard: '[kanban]',
   last_change_time: '2024-01-15T10:30:00Z',
@@ -90,7 +90,7 @@ describe('Card', () => {
     it('should render severity', () => {
       render(<Card bug={mockBug} />)
 
-      expect(screen.getByText('major')).toBeInTheDocument()
+      expect(screen.getByText('S3')).toBeInTheDocument()
     })
 
     it('should render component', () => {
@@ -157,52 +157,44 @@ describe('Card', () => {
   })
 
   describe('severity badge', () => {
-    it('should show blocker severity with error color', () => {
-      const blockerBug = { ...mockBug, severity: 'blocker' }
-      render(<Card bug={blockerBug} />)
+    it('should show S1 severity with error color', () => {
+      const s1Bug = { ...mockBug, severity: 'S1' }
+      render(<Card bug={s1Bug} />)
 
-      const severityBadge = screen.getByText('blocker')
+      const severityBadge = screen.getByText('S1')
       expect(severityBadge.className).toContain('accent-error')
     })
 
-    it('should show critical severity with error color', () => {
-      const criticalBug = { ...mockBug, severity: 'critical' }
-      render(<Card bug={criticalBug} />)
+    it('should show S2 severity with warning color', () => {
+      const s2Bug = { ...mockBug, severity: 'S2' }
+      render(<Card bug={s2Bug} />)
 
-      const severityBadge = screen.getByText('critical')
-      expect(severityBadge.className).toContain('accent-error')
-    })
-
-    it('should show major severity with warning color', () => {
-      const majorBug = { ...mockBug, severity: 'major' }
-      render(<Card bug={majorBug} />)
-
-      const severityBadge = screen.getByText('major')
+      const severityBadge = screen.getByText('S2')
       expect(severityBadge.className).toContain('accent-warning')
     })
 
-    it('should show normal severity with default color', () => {
-      const normalBug = { ...mockBug, severity: 'normal' }
-      render(<Card bug={normalBug} />)
+    it('should show S3 severity with secondary text color', () => {
+      const s3Bug = { ...mockBug, severity: 'S3' }
+      render(<Card bug={s3Bug} />)
 
-      const severityBadge = screen.getByText('normal')
-      expect(severityBadge.className).toContain('text-tertiary')
+      const severityBadge = screen.getByText('S3')
+      expect(severityBadge.className).toContain('text-secondary')
     })
 
-    it('should show minor severity with success color', () => {
-      const minorBug = { ...mockBug, severity: 'minor' }
-      render(<Card bug={minorBug} />)
+    it('should show S4 severity with primary accent color', () => {
+      const s4Bug = { ...mockBug, severity: 'S4' }
+      render(<Card bug={s4Bug} />)
 
-      const severityBadge = screen.getByText('minor')
-      expect(severityBadge.className).toContain('accent-success')
+      const severityBadge = screen.getByText('S4')
+      expect(severityBadge.className).toContain('accent-primary')
     })
 
-    it('should show trivial severity with success color', () => {
-      const trivialBug = { ...mockBug, severity: 'trivial' }
-      render(<Card bug={trivialBug} />)
+    it('should show N/A severity with tertiary text color', () => {
+      const naBug = { ...mockBug, severity: 'N/A' }
+      render(<Card bug={naBug} />)
 
-      const severityBadge = screen.getByText('trivial')
-      expect(severityBadge.className).toContain('accent-success')
+      const severityBadge = screen.getByText('N/A')
+      expect(severityBadge.className).toContain('text-tertiary')
     })
   })
 
@@ -748,9 +740,9 @@ describe('Card', () => {
       render(<Card bug={mockBug} onSeverityChange={onSeverityChange} />)
 
       await user.click(screen.getByLabelText('Change severity'))
-      await user.click(screen.getByText('critical'))
+      await user.click(screen.getByText('S1'))
 
-      expect(onSeverityChange).toHaveBeenCalledWith(mockBug.id, 'critical')
+      expect(onSeverityChange).toHaveBeenCalledWith(mockBug.id, 'S1')
     })
 
     it('should show isSeverityStaged indicator when severity is staged', () => {
@@ -766,15 +758,13 @@ describe('Card', () => {
           bug={mockBug}
           onSeverityChange={vi.fn()}
           isSeverityStaged={true}
-          stagedSeverity="blocker"
+          stagedSeverity="S1"
         />,
       )
 
-      // Should show staged severity, not original major
-      const severityBadges = screen.getAllByText(
-        /blocker|critical|major|normal|minor|trivial|enhancement/,
-      )
-      expect(severityBadges[0]).toHaveTextContent('blocker')
+      // Should show staged severity, not original S3
+      const severityBadges = screen.getAllByText(/S1|S2|S3|S4|N\/A/)
+      expect(severityBadges[0]).toHaveTextContent('S1')
     })
 
     it('should not trigger card onClick when clicking severity button', async () => {

src/components/Board/Card.tsx

@@ -47,13 +47,11 @@ const priorityColors: Record<string, string> = {
 }
 
 const severityColors: Record<string, string> = {
-  blocker: 'text-accent-error',
-  critical: 'text-accent-error',
-  major: 'text-accent-warning',
-  normal: 'text-text-tertiary',
-  minor: 'text-accent-success',
-  trivial: 'text-accent-success',
-  enhancement: 'text-accent-primary',
+  S1: 'text-accent-error',
+  S2: 'text-accent-warning',
+  S3: 'text-text-secondary',
+  S4: 'text-accent-primary',
+  'N/A': 'text-text-tertiary',
 }
 
 export function Card({

src/components/Board/SeverityPicker.test.tsx

@@ -17,7 +17,7 @@ describe('SeverityPicker', () => {
     isOpen: true,
     onClose: vi.fn(),
     onSelect: vi.fn(),
-    currentSeverity: 'normal',
+    currentSeverity: 'S3',
   }
 
   beforeEach(() => {
@@ -40,20 +40,18 @@ describe('SeverityPicker', () => {
     it('should render all severity options', () => {
       render(<SeverityPicker {...defaultProps} />)
 
-      expect(screen.getByText('blocker')).toBeInTheDocument()
-      expect(screen.getByText('critical')).toBeInTheDocument()
-      expect(screen.getByText('major')).toBeInTheDocument()
-      expect(screen.getByText('normal')).toBeInTheDocument()
-      expect(screen.getByText('minor')).toBeInTheDocument()
-      expect(screen.getByText('trivial')).toBeInTheDocument()
-      expect(screen.getByText('enhancement')).toBeInTheDocument()
+      expect(screen.getByText('S1')).toBeInTheDocument()
+      expect(screen.getByText('S2')).toBeInTheDocument()
+      expect(screen.getByText('S3')).toBeInTheDocument()
+      expect(screen.getByText('S4')).toBeInTheDocument()
+      expect(screen.getByText('N/A')).toBeInTheDocument()
     })
 
     it('should show severity descriptions', () => {
       render(<SeverityPicker {...defaultProps} />)
 
-      expect(screen.getByText(/blocks development/i)).toBeInTheDocument()
-      expect(screen.getByText(/feature request/i)).toBeInTheDocument()
+      expect(screen.getByText(/catastrophic/i)).toBeInTheDocument()
+      expect(screen.getByText(/not applicable/i)).toBeInTheDocument()
     })
   })
 
@@ -62,25 +60,25 @@ describe('SeverityPicker', () => {
       const onSelect = vi.fn()
       render(<SeverityPicker {...defaultProps} onSelect={onSelect} />)
 
-      fireEvent.click(screen.getByText('critical'))
+      fireEvent.click(screen.getByText('S1'))
 
-      expect(onSelect).toHaveBeenCalledWith('critical')
+      expect(onSelect).toHaveBeenCalledWith('S1')
     })
 
     it('should call onClose after selection', () => {
       const onClose = vi.fn()
       render(<SeverityPicker {...defaultProps} onClose={onClose} />)
 
-      fireEvent.click(screen.getByText('major'))
+      fireEvent.click(screen.getByText('S2'))
 
       expect(onClose).toHaveBeenCalled()
     })
 
     it('should highlight currently selected severity', () => {
-      render(<SeverityPicker {...defaultProps} currentSeverity="major" />)
+      render(<SeverityPicker {...defaultProps} currentSeverity="S2" />)
 
       const selectedOption = screen.getByRole('option', { selected: true })
-      expect(selectedOption).toHaveTextContent('major')
+      expect(selectedOption).toHaveTextContent('S2')
     })
   })
 
@@ -122,7 +120,7 @@ describe('SeverityPicker', () => {
       render(<SeverityPicker {...defaultProps} />)
 
       const options = screen.getAllByRole('option')
-      expect(options).toHaveLength(7) // blocker, critical, major, normal, minor, trivial, enhancement
+      expect(options).toHaveLength(5) // S1, S2, S3, S4, N/A
     })
   })
 
@@ -132,7 +130,7 @@ describe('SeverityPicker', () => {
 
       // Each severity should have a colored indicator dot
       const colorDots = container.querySelectorAll('[class*="rounded-full"][class*="w-3"]')
-      expect(colorDots).toHaveLength(7)
+      expect(colorDots).toHaveLength(5)
     })
   })
 })

src/components/Board/SeverityPicker.tsx

@@ -15,18 +15,11 @@ interface SeverityPickerProps {
 }
 
 const SEVERITY_OPTIONS = [
-  { value: 'blocker', label: 'blocker', description: 'Blocks development', color: 'bg-red-700' },
-  { value: 'critical', label: 'critical', description: 'Severe impact', color: 'bg-red-500' },
-  { value: 'major', label: 'major', description: 'Major functionality', color: 'bg-orange-500' },
-  { value: 'normal', label: 'normal', description: 'Default severity', color: 'bg-gray-500' },
-  { value: 'minor', label: 'minor', description: 'Minor issue', color: 'bg-green-500' },
-  { value: 'trivial', label: 'trivial', description: 'Trivial fix', color: 'bg-green-400' },
-  {
-    value: 'enhancement',
-    label: 'enhancement',
-    description: 'Feature request',
-    color: 'bg-blue-500',
-  },
+  { value: 'S1', label: 'S1', description: 'Catastrophic', color: 'bg-red-500' },
+  { value: 'S2', label: 'S2', description: 'Serious', color: 'bg-orange-500' },
+  { value: 'S3', label: 'S3', description: 'Normal', color: 'bg-yellow-500' },
+  { value: 'S4', label: 'S4', description: 'Minor', color: 'bg-blue-500' },
+  { value: 'N/A', label: 'N/A', description: 'Not applicable', color: 'bg-gray-500' },
 ] as const
 
 export function SeverityPicker({