Skip to content

Fix Devportal application details layout shift when custom leftMenu width is applied #1277

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rvrv1234 wants to merge 2 commits into
base: main
Choose a base branch
from
+22 −20
Open

Fix Devportal application details layout shift when custom leftMenu width is applied #1277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3d37fb2
Fix UI freeze and timestamp format in Usage Report (Issue #4787)
Mar 15, 2026
c944a5b
Fix Devportal application details layout shift when custom leftMenu w…
Mar 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 18 additions & 16 deletions portals/admin/src/main/webapp/source/src/app/components/APISettings/UsageReport.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,25 +236,27 @@ export default function UsageReport() {
const [selectedEndDate, setSelectedEndDate] = useState(endDate);

const fetchTransactionData = () => {
if (!selectedStartDate || !selectedEndDate) {
return;
}

setLoading(true);

if (selectedStartDate && selectedEndDate) {
const api = new API();
api.getTransactionCount({
startTime: selectedStartDate.unix().toString(),
endTime: selectedEndDate.unix().toString(),
const api = new API();
api.getTransactionCount({
startTime: selectedStartDate.valueOf().toString(),
endTime: selectedEndDate.valueOf().toString(),
})
.then((result) => {
setTransactionCount(result.body.count);
})
.then((result) => {
setTransactionCount(result.body.count);
})
.catch((error) => {
console.error('Error fetching transaction count:', error);
throw error;
})
.finally(() => {
setLoading(false);
});
}
.catch((error) => {
console.error('Error fetching transaction count:', error);
throw error;
})
Comment on lines +253 to +256
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Mar 16, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

find . -name "UsageReport.jsx" -type f

Repository: wso2/apim-apps

Length of output: 143

🏁 Script executed:

wc -l ./portals/admin/src/main/webapp/source/src/app/components/APISettings/UsageReport.jsx

Repository: wso2/apim-apps

Length of output: 147

🏁 Script executed:

cat -n ./portals/admin/src/main/webapp/source/src/app/components/APISettings/UsageReport.jsx

Repository: wso2/apim-apps

Length of output: 14911

Remove the throw statement from the .catch() block to prevent unhandled promise rejection.

The error at line 255 is already logged, and since fetchTransactionData doesn't return the promise and call sites don't await it (lines 264, 329), rethrowing creates an unhandled promise rejection. The .finally() block will still execute to set setLoading(false).

Suggested fix 
            .catch((error) => {
                console.error('Error fetching transaction count:', error);
-               throw error;
            })
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In
`@portals/admin/src/main/webapp/source/src/app/components/APISettings/UsageReport.jsx`
around lines 253 - 256, In the fetchTransactionData Promise chain (the .catch()
attached after the fetch that logs "Error fetching transaction count:"), remove
the rethrow (throw error) so the error is only logged and not rethrown; keep the
console.error call and allow the existing .finally() to run and
setLoading(false), since callers of fetchTransactionData are not awaiting its
promise and rethrowing causes unhandled promise rejections.

.finally(() => {
setLoading(false);
});
};

useEffect(() => {
Expand Down
8 changes: 4 additions & 4 deletions portals/devportal/src/main/webapp/source/src/app/components/Applications/Details/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,14 +134,14 @@ const Root = styled('div')((
display: 'flex',
flex: 1,
flexDirection: 'column',
marginLeft: (theme.custom.leftMenu.position === 'vertical-left' ? (theme.custom.leftMenu.width - 4) : 0),
marginLeft: (theme.custom.leftMenu.position === 'vertical-left' ? (theme.custom.leftMenu.width) : 0),
marginRight: (theme.custom.leftMenu.position === 'vertical-right' ? theme.custom.leftMenu.width : 0),
paddingBottom: theme.spacing(3),
overflowX: 'hidden',
[theme.breakpoints.down('md')]: {
marginLeft: (theme.custom.leftMenu.position === 'vertical-left' ? (theme.custom.leftMenu.width - 4) : 0) !== 0 && 50,
marginRight: (theme.custom.leftMenu.position === 'vertical-right' ? theme.custom.leftMenu.width : 0) !== 0 && 50,
},
marginLeft: 0,
marginRight: 0,
},
},

[`& .${classes.contentLoader}`]: {
Expand Down