Add support for marking new capability in templates catalog#1722
Add support for marking new capability in templates catalog#1722
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughThis change introduces a Changes
Sequence DiagramsequenceDiagram
participant SelectFlowTemplateDialogContent
participant PublicFlowTemplateFilterSidebarWrapper
participant FlowTemplateFilterSidebar
participant FlowTemplateFilterItem
participant Badge
SelectFlowTemplateDialogContent->>PublicFlowTemplateFilterSidebarWrapper: Pass newDomains=['Policy & Governance']
PublicFlowTemplateFilterSidebarWrapper->>FlowTemplateFilterSidebar: Pass newDomains prop
FlowTemplateFilterSidebar->>FlowTemplateFilterSidebar: For each domain, check if in newDomains
alt Domain in newDomains
FlowTemplateFilterSidebar->>FlowTemplateFilterItem: Pass isNew=true
FlowTemplateFilterItem->>Badge: Render 'New' badge
else Domain not in newDomains
FlowTemplateFilterSidebar->>FlowTemplateFilterItem: Pass isNew=false (default)
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
|
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/react-ui/src/app/features/templates/components/select-flow-template-dialog-content.tsx (1)
143-154: Avoid hard‑coding the “new domains” list inline
newDomains={['Policy & Governance']}works, but it’s brittle if you ever:
- add more “new” capabilities, or
- change the domain identifier/label.
Consider centralizing this list in a shared constant or configuration (e.g.,
NEW_DOMAIN_TAGS), or deriving it from backend/feature‑flagged data so you don’t have to touch this component whenever the catalog changes.packages/ui-components/src/components/flow-template/flow-template-filter-sidebar.tsx (1)
108-109: Consider keyingnewDomainsby stable ids instead of display stringsUsing
isNew={newDomains.includes(domain)}is simple and works as long as:
domainvalues are stable, and- they’re not localized or otherwise user‑visible labels that might change.
If domains ever become localized or their labels change, this string comparison will be brittle. At that point, you’ll likely want
newDomainsto contain stable ids/slugs (e.g.,policy-governance) and derive display names separately.For now the behavior is correct and safe thanks to
newDomains = []as a default, but consider this adjustment if the domain model evolves.Also applies to: 126-127, 191-200
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/react-ui/src/app/features/templates/components/public-flow-template-filter-sidebar-wrapper.tsx(3 hunks)packages/react-ui/src/app/features/templates/components/select-flow-template-dialog-content.tsx(1 hunks)packages/ui-components/src/components/flow-template/flow-template-filter-sidebar.tsx(7 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
**/*.{ts,tsx,js,jsx}: Indentation: 2 spaces for TypeScript/JavaScript
Braces required for all control blocks, even single-line
One space between keywords and parentheses:if (condition) {
Use camelCase for variables and functions
Use PascalCase for classes and types
Use UPPER_SNAKE_CASE for constants
Use lowercase with hyphens for file names (e.g.,user-profile.ts)
Preferconstoverletorvarin TypeScript/JavaScript
Prefer arrow functions for callbacks and functional components in TypeScript/JavaScript
Files:
packages/ui-components/src/components/flow-template/flow-template-filter-sidebar.tsxpackages/react-ui/src/app/features/templates/components/select-flow-template-dialog-content.tsxpackages/react-ui/src/app/features/templates/components/public-flow-template-filter-sidebar-wrapper.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
**/*.{ts,tsx}: Use types and interfaces where appropriate in TypeScript
Use explicit return types for exported functions in TypeScript
Files:
packages/ui-components/src/components/flow-template/flow-template-filter-sidebar.tsxpackages/react-ui/src/app/features/templates/components/select-flow-template-dialog-content.tsxpackages/react-ui/src/app/features/templates/components/public-flow-template-filter-sidebar-wrapper.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
**/*.{tsx,ts}: Frontend tech stack must strictly use: React 18, Zustand, react-query v5, shadcn, and Axios withqspackage for query strings
Follow best practices for React hooks
Prefer small, composable components and extract helper functions where possible
Usecnutility to group tailwind classnames in React components
Files:
packages/ui-components/src/components/flow-template/flow-template-filter-sidebar.tsxpackages/react-ui/src/app/features/templates/components/select-flow-template-dialog-content.tsxpackages/react-ui/src/app/features/templates/components/public-flow-template-filter-sidebar-wrapper.tsx
🧠 Learnings (1)
📚 Learning: 2025-11-25T10:22:44.853Z
Learnt from: CR
Repo: openops-cloud/openops PR: 0
File: .cursor/rules/coding-guidelines.mdc:0-0
Timestamp: 2025-11-25T10:22:44.853Z
Learning: Applies to **/*.{tsx,ts} : Use `cn` utility to group tailwind classnames in React components
Applied to files:
packages/ui-components/src/components/flow-template/flow-template-filter-sidebar.tsx
🔇 Additional comments (2)
packages/ui-components/src/components/flow-template/flow-template-filter-sidebar.tsx (1)
5-66: New badge implementation inFlowTemplateFilterItemlooks solidThe
isNewprop with a default offalse, the addedrelativeclass on the container, and the conditionalBadgerendering give you a clean, non‑breaking way to surface “New” items without affecting existing callers. This keeps the API backwards‑compatible and usescnto extend classes consistently (based on learnings, usingcnfor Tailwind classnames is our convention).packages/react-ui/src/app/features/templates/components/public-flow-template-filter-sidebar-wrapper.tsx (1)
14-24: Prop threading fornewDomainsis clean and backwards‑compatibleExtending
FlowTemplateFilterSidebarPropswith optionalnewDomainsand defaulting it to[]in the wrapper keeps existing callers working while exposing the new capability cleanly toFlowTemplateFilterSidebar.No changes needed here.
Also applies to: 47-58, 164-181
There was a problem hiding this comment.
Pull request overview
This PR adds visual "New" badges to flow template filter options in the templates catalog, specifically marking the "Policy & Governance" domain as a newly introduced capability to improve discoverability for users.
Key changes:
- Introduced
isNewprop toFlowTemplateFilterItemcomponent to conditionally render a "New" badge - Added
newDomainsprop throughout the component hierarchy to support marking specific domains as new - Hard-coded "Policy & Governance" as the first new domain in the implementation
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
flow-template-filter-sidebar.tsx |
Added isNew prop to filter items and rendered "New" badge UI component with styling |
select-flow-template-dialog-content.tsx |
Passed hard-coded array with "Policy & Governance" as a new domain to the filter sidebar |
public-flow-template-filter-sidebar-wrapper.tsx |
Added newDomains prop to component signature and forwarded it to the filter sidebar |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Greptile OverviewGreptile SummaryThis PR adds visual "New" badges to the flow template filter sidebar to highlight newly introduced domains. The implementation threads a Key Changes:
The implementation is straightforward and follows existing patterns in the codebase. The hardcoded domain list in Confidence Score: 5/5
Important Files ChangedFile Analysis
Sequence DiagramsequenceDiagram
participant User
participant SelectFlowTemplateDialogContent
participant PublicFlowTemplateFilterSidebarWrapper
participant FlowTemplateFilterSidebar
participant FlowTemplateFilterItem
User->>SelectFlowTemplateDialogContent: Opens template catalog
SelectFlowTemplateDialogContent->>PublicFlowTemplateFilterSidebarWrapper: Passes newDomains=['Policy & Governance']
PublicFlowTemplateFilterSidebarWrapper->>FlowTemplateFilterSidebar: Forwards newDomains prop
FlowTemplateFilterSidebar->>FlowTemplateFilterSidebar: Renders domain filters
loop For each domain
FlowTemplateFilterSidebar->>FlowTemplateFilterItem: Renders with isNew=newDomains.includes(domain)
alt Domain is in newDomains array
FlowTemplateFilterItem->>FlowTemplateFilterItem: Shows "New" Badge
end
end
FlowTemplateFilterItem->>User: Displays domain with "New" badge if applicable
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
|
hey @rSnapkoOpenOps can you please add a screenshot or a story for it |
Fixes OPS-3187.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.