Update TableView with multi inline actions #5118
Conversation
WalkthroughThe pull request modifies the Changes
Possibly related PRs
Suggested reviewers
Warning Rate limit exceeded@minhtuev has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 15 minutes and 45 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
Documentation and Community
|
…-table-multi-inline-actions
![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
🧹 Outside diff range and nitpick comments (1)
app/packages/core/src/plugins/SchemaIO/components/ActionsMenu.tsx (1)
Line range hint
21-29: LGTM! Consider enhancing prop types for better type safety.The condition correctly implements the multi-inline actions logic with appropriate spacing.
Consider adding a constraint to the
maxInlineprop type to ensure it's a positive number:type ActionsPropsType = { actions: Array<ActionPropsType>; - maxInline?: number; + maxInline?: number & { __brand: 'PositiveNumber' }; size?: SizeType; }; +// Type guard to ensure positive numbers +function isPositiveNumber(n: number): n is number & { __brand: 'PositiveNumber' } { + return n > 0; +}
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (1)
app/packages/core/src/plugins/SchemaIO/components/ActionsMenu.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
app/packages/core/src/plugins/SchemaIO/components/ActionsMenu.tsx (1)
Pattern **/*.{ts,tsx}: Review the Typescript and React code for conformity with best practices in React, Recoil, Graphql, and Typescript. Highlight any deviations.
🔇 Additional comments (1)
app/packages/core/src/plugins/SchemaIO/components/ActionsMenu.tsx (1)
16-16: LGTM! Verify UI layout with maximum inline actions.
The increase to 2 inline actions provides a good balance between accessibility and UI cleanliness.
Let's verify all places where this component is used to ensure the UI layout remains clean with 2 inline actions:
✅ Verification successful
Verified: DEFAULT_MAX_INLINE change is safe and well-contained
The change to show 2 inline actions is used only in TableView component, where actions are rendered within table cells. This context makes the change even more appropriate as table rows typically have sufficient width to accommodate 2 inline actions without causing layout issues.
- Used in:
app/packages/core/src/plugins/SchemaIO/components/TableView.tsx - Implementation shows proper usage with size prop being passed, ensuring consistent styling
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Find all files that import or use ActionsMenu
rg -l "ActionsMenu" --type ts --type tsx
Length of output: 68
Script:
#!/bin/bash
# Find all files that import or use ActionsMenu, searching through all text files
rg -l "ActionsMenu"
Length of output: 149
Script:
#!/bin/bash
# Check how ActionsMenu is used in TableView.tsx
rg "ActionsMenu" app/packages/core/src/plugins/SchemaIO/components/TableView.tsx -C 3
Length of output: 625
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
app/packages/core/src/plugins/SchemaIO/components/TableView.tsx (1)
Line range hint
49-63: Consider memoizing row actions computation.The
getRowActionscallback processes all row actions for each row. For tables with many rows and actions, this could impact performance. Consider memoizing the results usinguseMemoto prevent unnecessary recomputations.- const getRowActions = useCallback((row) => { + const getRowActions = useCallback((row) => { + const memoizedActions = useMemo(() => { const computedRowActions = [] as any; for (const action of row_actions) { if (action.rows?.[row] !== false) { computedRowActions.push({ ...action, onClick: (action, e) => { handleClick(panelId, { operator: action.on_click, params: { path, event: action.name, row }, }); }, }); } } return computedRowActions; + }, [row, row_actions, panelId, path]); + return memoizedActions; }, []);
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (2)
app/packages/core/src/plugins/SchemaIO/components/ActionsMenu.tsx(1 hunks)app/packages/core/src/plugins/SchemaIO/components/TableView.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- app/packages/core/src/plugins/SchemaIO/components/ActionsMenu.tsx
🧰 Additional context used
📓 Path-based instructions (1)
app/packages/core/src/plugins/SchemaIO/components/TableView.tsx (1)
Pattern **/*.{ts,tsx}: Review the Typescript and React code for conformity with best practices in React, Recoil, Graphql, and Typescript. Highlight any deviations.
🔇 Additional comments (1)
app/packages/core/src/plugins/SchemaIO/components/TableView.tsx (1)
202-202: Verify ActionsMenu prop handling and consider consistent naming.
The prop name changes from max_icons_inline to maxInline between components. While this follows React conventions (snake_case for schema props, camelCase for component props), we should verify that ActionsMenu properly handles this prop.
✅ Verification successful
The shell script results show that the maxInline prop is properly defined and handled in the ActionsMenu component. Let me verify the complete implementation:
- In ActionsMenu.tsx:
- The prop is correctly typed as
maxInline?: number - It's destructured with a default value:
const { actions, maxInline = DEFAULT_MAX_INLINE, size } = props - It's used in logic:
if (actions.length <= maxInline)
- The prop is correctly typed as
Let me verify if there's a constant definition for DEFAULT_MAX_INLINE:
Prop handling is correct, naming convention follows React patterns
The maxInline prop in ActionsMenu is properly defined, typed, and used with a default value of 1. The prop naming difference (snake_case max_icons_inline in TableView vs camelCase maxInline in ActionsMenu) follows React's convention of using camelCase for component props while preserving snake_case for schema-derived values. No changes needed.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for ActionsMenu component definition and prop usage
ast-grep --pattern 'interface $interface {
$$$
maxInline$_: $_
$$$
}'
# Search for any existing usages of maxInline prop
rg -A 5 'maxInline[^a-zA-Z]'
Length of output: 2021
Script:
#!/bin/bash
# Search for DEFAULT_MAX_INLINE constant
rg "DEFAULT_MAX_INLINE"
Length of output: 252
app/packages/core/src/plugins/SchemaIO/components/TableView.tsx
Outdated
Show resolved
Hide resolved
minhtuev
force-pushed
the
feat/update-table-multi-inline-actions
branch
from
5197df4 to
a355227
Compare
What changes are proposed in this pull request?
Update TableView with multiple inline actions
How is this patch tested? If it is not, please explain why.
Users can set the
max_icons_inlinearg from TableView:Result:
Release Notes
Is this a user-facing change that should be mentioned in the release notes?
notes for FiftyOne users.
(Details in 1-2 sentences. You can just refer to another PR with a description
if this PR is part of a larger change.)
What areas of FiftyOne does this PR affect?
fiftyonePython library changesSummary by CodeRabbit
Summary by CodeRabbit