Feature: create reusable request card - added utility functions#976
Feature: create reusable request card - added utility functions#976iamitprakash merged 6 commits intoRealDevSquad:developfrom AnujChhikara:feature/create-reusable-request-card-01
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Summary by CodeRabbit
WalkthroughA new JavaScript utility module has been added to the request-card component. This module includes multiple helper functions for handling date and time formatting, assigning color codes based on deadlines, and managing user interface interactions such as loading spinners, accordion toggles, and visual highlights. Additionally, asynchronous functions are implemented to update request statuses and animate card removals, with supplementary methods generating structured HTML elements for request details. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant UI as Web UI
participant Utils as Request-Card Utils
participant S as Server
U->>UI: Initiate request status update
UI->>Utils: Call updateRequestStatus({id, body, type})
Utils->>S: Send update request (async)
S-->>Utils: Return update response
alt Success
Utils->>UI: Call showSuccessHighlight()
UI->>Utils: Call removeCard() to animate removal
else Error
Utils->>UI: Call showErrorHighlight()
end
Poem
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed 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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
components/request-card/utils.js(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
components/request-card/utils.js (1)
extension-requests/script.js (2)
newDeadlineDays(521-525)isNewDeadLineCrossed(505-506)
🪛 Biome (1.9.4)
components/request-card/utils.js
[error] 83-83: Template literals are preferred over string concatenation.
Unsafe fix: Use a template literal.
(lint/style/useTemplate)
[error] 87-87: Template literals are preferred over string concatenation.
Unsafe fix: Use a template literal.
(lint/style/useTemplate)
🔇 Additional comments (8)
components/request-card/utils.js (8)
4-14: Verify the logic forwasDeadlineBreached.
The expressionconst wasDeadlineBreached = createdTime > deadline;indicates the deadline was already passed relative tocreatedTime. This might be correct ifcreatedTimerepresents the current time, but please confirm it's the intended comparison. Ifdeadlineis supposed to be compared with the current time (Date.now()), you may need a different approach.
37-43: Implementation offormatToDateOnlylooks good.
The function outputs the standard ISOYYYY-MM-DDformat, making it suitable for date input fields and general processing. No immediate issues found here.
44-51:getFormEntriesis straightforward and functional.
This utility correctly mapsFormDataentries into an object, a common need in web forms. No concerns.
52-65:addLoadingSpinnerreturning a cleanup function is a nice design.
It neatly encapsulates the spinner logic and makes removal straightforward. No further changes needed.
86-88:expandAccordionPanelis straightforward.
No major issues. Just remember to adjust line 87 for the template literal change as indicated.🧰 Tools
🪛 Biome (1.9.4)
[error] 87-87: Template literals are preferred over string concatenation.
Unsafe fix: Use a template literal.
(lint/style/useTemplate)
97-122: Confirm the existence ofAPI_BASE_URL.
updateRequestStatusrelies onAPI_BASE_URLand presumablywindow.API_BASE_URLor an imported constant. Ensure this variable is defined before usage, and confirm the endpoint paths (extension-requestsvs.requests) are correct.
123-163: EnsureaddDelay(800)is defined and accessible.
TheremoveCardfunction referencesaddDelay(800)before initiating the final animation. Verify thataddDelayis a globally or locally defined helper. If it's external, consider including it in this file or an import.
317-457:createDateContainerlogic appears comprehensive.
The function effectively handles both extension and request scenarios. No immediate issues stand out.
|
Hello @AnujChhikara, |
Just setting up the card component and utils here — UPDATE the screenshot of tests after the test pr merged with the coverage. |
4 participants
Date: 14 April 2025
Developer Name: @AnujChhikara
Issue Ticket Number
Description
Changes made:
Moved createElement, createActionContainer, and related UI logic to utils.js
Moved data fetching logic like getExtensionRequestDetails to utils.js
Updated createRequestCardComponent to use these new helpers
Test PR test: add test for request card component #994
Documentation Updated?
Under Feature Flag
Database Changes
Breaking Changes
Development Tested?
Screenshots
Screenshot 1
brave_Wvd4QGQdA8.mp4
brave_5ZdF3b4Crh.mp4
brave_6dHlJo2kGe.mp4
brave_cMuGGLoJBQ.mp4
brave_UHzBMcVK3p.mp4
Test Coverage
Screenshot 1
Additional Notes
Test PR: #994