Display Full Scope Names in DevPortal#1267
Conversation
O-sura
requested review from
Krishanx92,
lasanthaS,
piyumaldk and
tharikaGitHub
as code owners
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughAligns table cells to the top, changes scope cells to allow word wrapping ( Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx`:
- Line 106: The Tooltip in the CustomPadLock component is using the deprecated
interactive prop; remove the interactive prop from the Tooltip JSX in the
CustomPadLock component (or replace it with disableInteractive if you need a
non-interactive tooltip) to restore MUI v5 compatibility—locate the Tooltip
element inside the CustomPadLock.jsx render/return and delete the interactive
attribute so the default interactive behavior in MUI v5 is used.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 664bb707-dd0d-4f37-9069-eb8a7401df3b
📒 Files selected for processing (1)
portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx
...evportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx
Outdated
Show resolved
Hide resolved
...evportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
🧹 Nitpick comments (2)
portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx (2)
149-163: Consider simplifying by removing the conditional overflow logic.The conditional styling at line 150-151 exists to work around the always-visible scrollbar issue. If you change
ScrollContainerto useoverflowY: 'auto'as suggested above, this conditional logic becomes unnecessary—the scrollbar will only appear when content exceedsmaxHeight.Additionally, using
scopeas the key instead ofindexwould be more semantically appropriate if scope names are guaranteed unique within an operation.Suggested simplification (if overflowY: 'auto' is adopted)
- <ScrollContainer - style={scopes.length <= 5 ? { overflowY: 'visible', maxHeight: 'none' } : {}} - > + <ScrollContainer> <Table> <TableBody> {scopes.map((scope, index) => ( - <TableRow key={index}> + <TableRow key={scope}> <StyledScopeCell style={{ maxWidth: 240 }}> {scope} </StyledScopeCell> </TableRow> ))} </TableBody> </Table> </ScrollContainer>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx` around lines 149 - 163, Remove the conditional overflowY styling on ScrollContainer and instead set ScrollContainer to use overflowY: 'auto' so the scrollbar only appears when content exceeds maxHeight; then simplify the map key in scopes.map by using the scope value (e.g., TableRow key={scope}) instead of index (ensure scope strings are unique within the operation). Update the ScrollContainer usage (component name: ScrollContainer) and the map callback (scopes.map → TableRow key) accordingly and delete the branches that apply { overflowY: 'visible', maxHeight: 'none' }.
48-53: UseoverflowY: 'auto'to avoid always-visible scrollbar.
overflowY: 'scroll'always displays a scrollbar even when content fits. Using'auto'would only show the scrollbar when content actually overflows, providing a cleaner UX.Suggested fix
const ScrollContainer = styled('div')(() => ({ maxHeight: '150px', - overflowY: 'scroll', + overflowY: 'auto', display: 'block', width: '100%', }));🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx` around lines 48 - 53, Update the styled component ScrollContainer to use overflowY: 'auto' instead of 'scroll' so the scrollbar only appears when content overflows; locate the ScrollContainer definition (styled('div')(...) in CustomPadLock.jsx) and change the overflowY property value to 'auto' while keeping maxHeight, display, and width unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In
`@portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx`:
- Around line 149-163: Remove the conditional overflowY styling on
ScrollContainer and instead set ScrollContainer to use overflowY: 'auto' so the
scrollbar only appears when content exceeds maxHeight; then simplify the map key
in scopes.map by using the scope value (e.g., TableRow key={scope}) instead of
index (ensure scope strings are unique within the operation). Update the
ScrollContainer usage (component name: ScrollContainer) and the map callback
(scopes.map → TableRow key) accordingly and delete the branches that apply {
overflowY: 'visible', maxHeight: 'none' }.
- Around line 48-53: Update the styled component ScrollContainer to use
overflowY: 'auto' instead of 'scroll' so the scrollbar only appears when content
overflows; locate the ScrollContainer definition (styled('div')(...) in
CustomPadLock.jsx) and change the overflowY property value to 'auto' while
keeping maxHeight, display, and width unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: bb5b50a8-cdda-47b7-b242-b953fe908d2a
📒 Files selected for processing (1)
portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx
|
There was a problem hiding this comment.
🧹 Nitpick comments (1)
portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx (1)
48-53: Consider usingoverflowY: 'auto'instead of'scroll'.
overflowY: 'scroll'always renders a scrollbar track even when content fits within the container. Using'auto'will only display the scrollbar when content actually exceeds themaxHeight.♻️ Suggested change
const ScrollContainer = styled('div')(() => ({ maxHeight: '150px', - overflowY: 'scroll', + overflowY: 'auto', display: 'block', width: '100%', }));🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx` around lines 48 - 53, The ScrollContainer styled component currently uses overflowY: 'scroll' which always shows a scrollbar; update the ScrollContainer definition (the styled('div') component named ScrollContainer) to use overflowY: 'auto' so the scrollbar only appears when content exceeds maxHeight, leaving other styles (maxHeight, display, width) unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In
`@portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx`:
- Around line 48-53: The ScrollContainer styled component currently uses
overflowY: 'scroll' which always shows a scrollbar; update the ScrollContainer
definition (the styled('div') component named ScrollContainer) to use overflowY:
'auto' so the scrollbar only appears when content exceeds maxHeight, leaving
other styles (maxHeight, display, width) unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: a0efc9b2-fb30-4efd-a3a0-a177131f2e99
📒 Files selected for processing (1)
portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx
3 participants
This PR adds the changes related to displaying the full scope name associated with a particular resource instead of truncating them when the scope name is too long. These changes will provide,
Summary by CodeRabbit