3495 - Replace badges in Shared & Core Components

[petrapaz]

Description

Replace badges in Shared & Core Components

Fixes #3495

Files:

• client/src/shared/components/EnvironmentBadge.tsx
• example BADGE shown in picture: DEVELOPMENT

• client/src/shared/components/workflow-executions/WorkflowExecutionBadge.tsx
• example BADGE shown in picture: FAILED, COMPLETED
• --> repaired semibold weight

• client/src/components/MultiSelect/MultiSelect.tsx
• this badge is nested inside trigger - for example schedule - daily - choose days - badges appear
• example BADGEs shown in picture: Wednesday x, Thursday x, Friday x, +2 more x

• client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx
• this badge is nested inside: add OpenAI node (or similar) -> go to properties -> response -> response schema: open json schema builder -> DESIGNER tab -> add/ create nested objects -> click chevron to collapse nested structures -> BADGE appears when collapsed : showing {number} items nested
• example BADGE shown in picture: 4 items nested

• client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
• example BADGE shown in picture: 2 (neutral and clicked mode)

[Copilot]

Pull Request Overview

This PR migrates badge components from the old @/components/ui/badge implementation to the new @/components/Badge/Badge component as part of fixing issue #3495. The changes update the API from the old variant prop to the new styleType and label props while maintaining the same visual appearance.

• Replaced Badge imports in EnvironmentBadge and WorkflowExecutionBadge components
• Updated prop API from variant to styleType with appropriate style mappings
• Added weight="semibold" to EnvironmentBadge to preserve original font weight

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
client/src/shared/components/EnvironmentBadge.tsx	Migrated to new Badge component with outline-outline and secondary-filled styles, added semibold weight
client/src/shared/components/workflow-executions/WorkflowExecutionBadge.tsx	Migrated to new Badge component with success-outline, destructive-filled, and secondary-filled styles based on execution status

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[kresimir-coko]

switch/case je bolji pristup nego ovaj getter.

ode imaš situaciju da deklariraš funkciju getStyleType koja konzumira status iz djelokruga komponente, a može se dogoditi (slučajno, radi bug-a, ili race condition-a) da vrijednost statusa nije dobro sinkronizirana. Pravilno bi bilo da getStyleType prima status argument (i da bude memoizirano ili u useCallback-u) tako da svako izvršavanje getStyleType funkcije ima pravilan status.

red flag ti može biti kad primjetiš invokaciju funkcije unutar propa (styleType={getStyleType()}) - ovo ne radimo u pravilu na ovaj način

[sonarqubecloud]

Quality Gate failed for 'client'

Failed conditions
16.7% Coverage on New Code (required ≥ 80%)
17.0% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud