Config viewable for running pipelines

[MohitAgrawal16]

Fixes: #1615

Summary by CodeRabbit

• New Features

  • Introduced a read-only mode for viewing pipelines, allowing users to view pipeline details without editing.
  • Added a "View pipeline" option that disables all form inputs and hides the "Save changes" button when in read-only mode.
  • Updated actions menu to include a view action and improved flow state awareness for more accurate menu options.

• Bug Fixes

  • Adjusted button disabling logic in the flows list for more accurate interactivity based on flow state.

[coderabbitai]

Walkthrough

A read-only mode has been introduced for the pipeline configuration form. The FlowCreate component now accepts a readonly prop, disabling all form inputs and hiding the save button when enabled. The orchestration page renders the form in read-only mode when appropriate, and the flows list supports a view action to display this mode.

Changes

Cohort / File(s)	Change Summary
FlowCreate Read-Only Prop src/components/Flows/FlowCreate.tsx	Added readonly prop to the FlowCreateInterface and component. All interactive form elements and the save button respect this flag, disabling input and hiding actions in read-only mode.
Flows List and Actions Menu Update src/components/Flows/Flows.tsx	Introduced currentFlowState to track flow status. Modified menu logic to enable a view action, and updated button disabling logic. Passed new props to ActionsMenu for read/view handling.
Orchestrate Page Read-Only Rendering src/pages/pipeline/orchestrate.tsx	Added conditional rendering for crudVal === 'read' to display FlowCreate in read-only mode, passing readonly={true}. No changes to exported entities.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant FlowsPage
    participant ActionsMenu
    participant OrchestratePage
    participant FlowCreate

    User->>FlowsPage: Clicks "View" on a pipeline
    FlowsPage->>ActionsMenu: Opens menu with view option
    ActionsMenu->>FlowsPage: Calls handleViewConnection
    FlowsPage->>OrchestratePage: Sets crudVal = 'read', selectedFlowId
    OrchestratePage->>FlowCreate: Renders FlowCreate with readonly=true
    User->>FlowCreate: Views configuration (inputs disabled)

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Assessment against linked issues

Objective	Addressed	Explanation
Show configuration form in read-only mode for running pipelines (#1615)	✅

Assessment against linked issues: Out-of-scope changes

No out-of-scope changes found.

Possibly related PRs

• Configuration viewable when connection is running #1616: Also adds a readonly prop to a form component and modifies menu/view logic for read-only UI states, showing a similar pattern applied to a different form.

Suggested reviewers

• fatchat
• himanshudube97

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between de47ef1 and 5159d69.

📒 Files selected for processing (3)

• src/components/Flows/FlowCreate.tsx (14 hunks)
• src/components/Flows/Flows.tsx (4 hunks)
• src/pages/pipeline/orchestrate.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

src/components/Flows/FlowCreate.tsx (1)

Learnt from: himanshudube97
PR: #1550
File: src/helpers/connectorConfig/FormField.tsx:343-359
Timestamp: 2025-06-17T03:30:42.337Z
Learning: In the FormField component (src/helpers/connectorConfig/FormField.tsx), the addItem function for array fields only initializes explicit default values for top-level subFields, but nested required fields are correctly rendered dynamically in the UI at render time. This approach works properly for complex configurations like S3 buckets, as confirmed by user testing.

🔇 Additional comments (10)

src/pages/pipeline/orchestrate.tsx (1)

119-128: LGTM! Clean implementation of read-only mode.

The conditional rendering for the 'read' CRUD state correctly reuses the same props as the 'update' case while adding the readonly={true} prop. This maintains consistency with the existing pattern and ensures proper integration with the FlowCreate component.

src/components/Flows/FlowCreate.tsx (4)

40-40: LGTM! Proper interface extension.

The readonly prop is correctly added to the interface as an optional boolean with appropriate default value.

---

313-313: LGTM! Clear user feedback with dynamic title.

The conditional title change from "Update pipeline" to "View pipeline" provides clear visual indication of the read-only mode to users.

---

324-328: LGTM! Proper save button handling.

The conditional rendering of the save button ensures users cannot accidentally attempt to save changes in read-only mode.

---

355-591: LGTM! Comprehensive form element disabling.

All interactive form elements are consistently disabled when readonly is true:

• Switches, inputs, autocomplete components, toggle buttons, checkboxes, and time picker
• Both primary elements and nested input fields within complex components
• Maintains form accessibility while preventing modifications

The implementation ensures data integrity during pipeline execution while maintaining visibility.

src/components/Flows/Flows.tsx (5)

243-243: Verify the button disabling logic change.

The disabling condition changed from tempSyncState || !!lock to tempSyncState && !lock. This means the menu button will now be enabled when a flow is locked (but tempSyncState is false), which may not be the intended behavior.

Please confirm this change aligns with the requirement to allow viewing configuration of running pipelines while maintaining appropriate restrictions.

---

376-376: LGTM! Appropriate state management.

The currentFlowState boolean effectively tracks whether the selected flow is in a running/queued/locked state for UI decision making.

---

393-397: LGTM! Clean view handler implementation.

The handleViewConnection function correctly:

• Closes the menu
• Sets the selected flow ID
• Updates CRUD state to 'read' to trigger read-only mode

---

399-414: LGTM! Comprehensive flow state detection.

The updated handleClick function properly determines if a flow is running by checking:

• Lock status (running, queued, locked)
• Running deployment IDs list

This provides accurate state information for the view mode functionality.

---

530-531: LGTM! Proper ActionsMenu integration.

The new props viewMode and handleView correctly integrate the read-only viewing functionality into the actions menu system.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

✅ Copyable Unit Test edits generated.

• Create PR with unit tests
• Commit unit tests in branch feat/config_viewable_runningPipelines
• Post copyable unit tests in a comment

---

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

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai generate unit tests to generate unit tests for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[codecov]

Codecov Report

❌ Patch coverage is 37.50000% with 10 lines in your changes missing coverage. Please review.
✅ Project coverage is 75.91%. Comparing base (de47ef1) to head (5159d69).
⚠️ Report is 3 commits behind head on main.

Files with missing lines	Patch %	Lines
src/components/Flows/Flows.tsx	23.07%	9 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1620      +/-   ##
==========================================
- Coverage   76.00%   75.91%   -0.09%     
==========================================
  Files         101      101              
  Lines        7688     7702      +14     
  Branches     1855     1864       +9     
==========================================
+ Hits         5843     5847       +4     
- Misses       1731     1740       +9     
- Partials      114      115       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[MohitAgrawal16]

@himanshudube97, I am facing some issues in getting the state of whether the pipeline is running. I have pushed one way, but it is not working as expected. when you get free, please look into this.

[coderabbitai]

Note

Unit test generation is an Early Access feature. Expect some limitations and changes as we gather feedback and continue to improve it.

---

Generating unit tests... This may take up to 20 minutes.