Skip to content

refactor: fix workflow status handling and improve UI components#387

Merged
LakshanSS merged 1 commit intoopenchoreo:mainfrom
stefinie123:workflow-ui-fixes
Mar 12, 2026
Merged

refactor: fix workflow status handling and improve UI components#387
LakshanSS merged 1 commit intoopenchoreo:mainfrom
stefinie123:workflow-ui-fixes

Conversation

@stefinie123
Copy link
Contributor

@stefinie123 stefinie123 commented Mar 12, 2026

Purpose

Related Issue: openchoreo/openchoreo#2562

  1. Fixed build status display issues
image image
  1. Fix build page configuration view
image

Summary by CodeRabbit

Release Notes

  • New Features

    • Added support for ClusterWorkflow configurations alongside standard Workflow type.
  • Bug Fixes

    • Improved workflow status detection to recognize more status variations reliably.
    • Enhanced display formatting for environment variables and long property values with better text wrapping.

- Updated BuildStatusCell and BuildStatusChip components to use consistent terminology for workflow statuses, replacing 'success' and 'complete' with 'succeeded' and 'completed'.
- Enhanced BuildStatusChip to handle additional status types, including 'running', 'pending', and 'queued', improving user feedback on workflow states.
- Added workflowKind parameter to various components and API calls to ensure proper handling of workflow types across the application.
- Introduced new styles for environment variable display in WorkflowDetailsRenderer, enhancing the presentation of name/value pairs.

Signed-off-by: Stefinie Fernando <minolispencer@gmail.com>
@coderabbitai
Copy link

coderabbitai bot commented Mar 12, 2026

📝 Walkthrough

Walkthrough

The PR introduces support for 'ClusterWorkflow' alongside 'Workflow' by adding an optional workflowKind parameter to workflow schema fetching and API interfaces. It defaults missing workflow kinds to 'Workflow' across multiple layers and refactors status checks to use flexible substring matching, improving UI rendering of environment variables as tables.

Changes

Cohort / File(s) Summary
Backend Transformer
plugins/openchoreo-backend/src/services/transformers/component.ts
Added default 'Workflow' kind to ComponentWorkflowConfig when undefined; removed debug log from component creation action in scaffolder-backend module.
API Client & Interface
plugins/openchoreo-ci/src/api/OpenChoreoCiClient.ts, plugins/openchoreo-ci/src/api/OpenChoreoCiClientApi.ts
Introduced optional workflowKind parameter to fetchWorkflowSchema method; conditionally routes to /cluster-workflow-schema or /workflow-schema endpoints based on kind.
Workflow Config & Component Pages
plugins/openchoreo-ci/src/components/WorkflowConfigPage/WorkflowConfigPage.tsx, plugins/openchoreo-ci/src/components/Workflows/Workflows.tsx
Added workflowKind prop to WorkflowConfigPage; propagated kind through to API calls and dependency arrays; defaults to 'Workflow' when undefined.
Status Display Components
plugins/openchoreo-ci/src/components/BuildStatusChip/BuildStatusChip.tsx, plugins/openchoreo/src/components/Workflows/BuildStatusChip.tsx, plugins/openchoreo/src/components/Projects/ProjectComponentsCard/BuildStatusCell.tsx
Replaced exact switch-based status matching with flexible substring-based checks (e.g., 'succeeded' or 'completed' for success); updated default pending behavior and status text recognition.
Workflow Details Rendering
plugins/openchoreo-ci/src/components/WorkflowDetailsRenderer/WorkflowDetailsRenderer.tsx, plugins/openchoreo-ci/src/components/WorkflowDetailsRenderer/styles.ts
Added detection and table rendering for arrays of name/value pairs; introduced new CSS classes (envTable, envRow, envName, envValue) for environment variable display; enhanced overflow and word-breaking styles.
Workflow Trigger
plugins/openchoreo/src/components/Workflows/OverviewCard/useWorkflowsSummary.ts
Added workflowKind field to triggerBuild request body with fallback default 'Workflow'.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related issues

Possibly related PRs

Suggested reviewers

  • jhivandb
  • sameerajayasoma
  • kaviththiranga

Poem

🐰 Hop along, dear cluster workflows leap,
Kind defaults deep, status checks clean,
Tables of env vars, styles so keen,
A schema endpoint split to keep,
UI polish makes plugins serene!

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Description check ⚠️ Warning The description provides purpose and context with linked issue and screenshots, but omits most required template sections like Goals, Approach, User stories, Release notes, Documentation, Training, Certification, Marketing, Automation tests, Security checks, and other standard sections. Complete the PR description by adding Goals, Approach, User stories, Release notes, Documentation, Training, Certification, Marketing, Automation tests, and Security checks sections from the template.
Docstring Coverage ⚠️ Warning Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (1 passed)
Check name Status Explanation
Title check ✅ Passed The title references both workflow status handling and UI component improvements, which align with the PR's main changes across multiple files.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
📝 Coding Plan
  • Generate coding plan for human review comments

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (2)
plugins/openchoreo-ci/src/components/BuildStatusChip/BuildStatusChip.tsx (1)

11-20: Minor inconsistency with sibling component.

This BuildStatusChip checks for 'succeeded' and 'completed', while plugins/openchoreo/src/components/Workflows/BuildStatusChip.tsx additionally checks for 'success' and 'complete'. Both components serve similar purposes, so the status matching logic should be consistent.

Consider aligning the status checks across both components to ensure consistent behavior.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@plugins/openchoreo-ci/src/components/BuildStatusChip/BuildStatusChip.tsx`
around lines 11 - 20, The status matching in BuildStatusChip currently checks
statusLower.includes('succeeded') || statusLower.includes('completed'); update
the condition in the BuildStatusChip component (the statusLower variable and the
return branch that uses classes.successChip) to also check for 'success' and
'complete' (e.g., include statusLower.includes('success') and
statusLower.includes('complete')) so the logic matches the sibling
Workflows/BuildStatusChip implementation and yields consistent success/complete
detection.
plugins/openchoreo/src/components/Workflows/BuildStatusChip.tsx (1)

11-25: Minor redundancy in status checks.

The checks for 'success' and 'complete' are redundant since 'succeeded' contains 'success' and 'completed' contains 'complete'. The current order works correctly, but the redundant checks add minimal overhead.

This is a nitpick and doesn't affect correctness—the substring-based approach provides good flexibility for handling various status string formats from the API.

♻️ Optional: Simplify redundant checks
   if (
-    statusLower.includes('success') ||
     statusLower.includes('succeeded') ||
-    statusLower.includes('completed') ||
-    statusLower.includes('complete')
+    statusLower.includes('completed')
   ) {
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@plugins/openchoreo/src/components/Workflows/BuildStatusChip.tsx` around lines
11 - 25, In BuildStatusChip, simplify the redundant substring checks on
statusLower by removing the extra 'success' and 'complete' checks and keep the
broader checks (e.g., 'succeeded' and 'completed' or whichever canonical
substrings you prefer) so the conditional in the status rendering only tests the
necessary substrings; update the if-block around statusLower.includes(...) that
returns the Chip (referenced in BuildStatusChip and classes.statusChip /
classes.successChip) accordingly to avoid the redundant includes.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@plugins/openchoreo-ci/src/components/BuildStatusChip/BuildStatusChip.tsx`:
- Around line 11-20: The status matching in BuildStatusChip currently checks
statusLower.includes('succeeded') || statusLower.includes('completed'); update
the condition in the BuildStatusChip component (the statusLower variable and the
return branch that uses classes.successChip) to also check for 'success' and
'complete' (e.g., include statusLower.includes('success') and
statusLower.includes('complete')) so the logic matches the sibling
Workflows/BuildStatusChip implementation and yields consistent success/complete
detection.

In `@plugins/openchoreo/src/components/Workflows/BuildStatusChip.tsx`:
- Around line 11-25: In BuildStatusChip, simplify the redundant substring checks
on statusLower by removing the extra 'success' and 'complete' checks and keep
the broader checks (e.g., 'succeeded' and 'completed' or whichever canonical
substrings you prefer) so the conditional in the status rendering only tests the
necessary substrings; update the if-block around statusLower.includes(...) that
returns the Chip (referenced in BuildStatusChip and classes.statusChip /
classes.successChip) accordingly to avoid the redundant includes.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 49d0428b-7127-4125-aaa3-a211b6aee67f

📥 Commits

Reviewing files that changed from the base of the PR and between 00cad7f and 868a635.

📒 Files selected for processing (12)
  • plugins/openchoreo-backend/src/services/transformers/component.ts
  • plugins/openchoreo-ci/src/api/OpenChoreoCiClient.ts
  • plugins/openchoreo-ci/src/api/OpenChoreoCiClientApi.ts
  • plugins/openchoreo-ci/src/components/BuildStatusChip/BuildStatusChip.tsx
  • plugins/openchoreo-ci/src/components/WorkflowConfigPage/WorkflowConfigPage.tsx
  • plugins/openchoreo-ci/src/components/WorkflowDetailsRenderer/WorkflowDetailsRenderer.tsx
  • plugins/openchoreo-ci/src/components/WorkflowDetailsRenderer/styles.ts
  • plugins/openchoreo-ci/src/components/Workflows/Workflows.tsx
  • plugins/openchoreo/src/components/Projects/ProjectComponentsCard/BuildStatusCell.tsx
  • plugins/openchoreo/src/components/Workflows/BuildStatusChip.tsx
  • plugins/openchoreo/src/components/Workflows/OverviewCard/useWorkflowsSummary.ts
  • plugins/scaffolder-backend-module-openchoreo/src/actions/component.ts

@stefinie123 stefinie123 changed the title refactor: standardize workflow status handling and improve UI components refactor: fix workflow status handling and improve UI components Mar 12, 2026
@LakshanSS LakshanSS merged commit cd920be into openchoreo:main Mar 12, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants