refactor(admin): centralize date formatting, fix null-timestamp rendering, and correct table filter attribute#1746
refactor(admin): centralize date formatting, fix null-timestamp rendering, and correct table filter attribute#1746Shreyag02 wants to merge 3 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Currently processing new changes in this PR. This may take a few minutes, please wait... ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (12)
📝 WalkthroughWalkthroughAdmin SDK tables now use shared timestamp formatting utilities, standardized string and date filter configuration, and an updated organization API date display format. ChangesAdmin SDK display updates
Estimated code review effort: 3 (Moderate) | ~25 minutes Suggested reviewers: 🚥 Pre-merge checks | ✅ 2✅ Passed checks (2 passed)
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 |
Shreyag02
changed the title
Coverage Report for CI Build 29081334524Warning Build has drifted: This PR's base is out of sync with its target branch, so coverage data may include unrelated changes. Coverage remained the same at 44.876%Details
Uncovered ChangesNo uncovered changes found. Coverage RegressionsNo coverage regressions found. Coverage Stats
💛 - Coveralls |
![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
🧹 Nitpick comments (1)
web/sdk/admin/views/plans/details.tsx (1)
22-25: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConsider simplifying the IIFE to a concise expression.
The immediately-invoked function expression works but can be replaced with optional chaining and nullish coalescing for the same behavior.
♻️ Optional simplification
<Text size="mini"> - {(() => { - const date = timestampToDayjs(plan?.createdAt); - return date ? date.format("DD MMM YYYY") : "-"; - })()} + {timestampToDayjs(plan?.createdAt)?.format("DD MMM YYYY") ?? "-"} </Text>
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 82f02392-ccc4-46d9-8b24-54445eb5043f
📒 Files selected for processing (18)
web/sdk/admin/views/admins/columns.tsxweb/sdk/admin/views/invoices/columns.tsxweb/sdk/admin/views/organizations/details/apis/columns.tsxweb/sdk/admin/views/organizations/details/apis/details-dialog.tsxweb/sdk/admin/views/organizations/details/invoices/columns.tsxweb/sdk/admin/views/organizations/details/members/columns.tsxweb/sdk/admin/views/organizations/details/projects/columns.tsxweb/sdk/admin/views/organizations/details/tokens/columns.tsxweb/sdk/admin/views/organizations/list/columns.tsxweb/sdk/admin/views/plans/columns.tsxweb/sdk/admin/views/plans/details.tsxweb/sdk/admin/views/preferences/columns.tsxweb/sdk/admin/views/preferences/details.tsxweb/sdk/admin/views/products/columns.tsxweb/sdk/admin/views/products/prices/columns.tsxweb/sdk/admin/views/roles/columns.tsxweb/sdk/admin/views/users/list/columns.tsxweb/sdk/admin/views/webhooks/webhooks/columns.tsx
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
web/sdk/admin/views/invoices/columns.tsx (1)
27-29: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winConsider using
timestampCellfor consistency across timestamp columns.This file wraps
formatTimestampin<Text>manually, while other files (e.g.,organizations/details/invoices/columns.tsx,products/columns.tsx) use the sharedtimestampCellhelper directly. Standardizing ontimestampCelleliminates duplicatedgetValue() as TimeStampcasts and wrapper boilerplate. The same pattern appears inorganizations/details/members/columns.tsxandorganizations/list/columns.tsx.If
<Text>provides styling that a plain string return would lose, consider updatingtimestampCellto wrap its output in<Text>so all consumers get consistent styling.♻️ Proposed refactor
- cell: ({ getValue }) => ( - <Text>{formatTimestamp(getValue() as TimeStamp)}</Text> - ), + cell: timestampCell,
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 72dff9b0-3c07-4955-b8cb-703d3fe1b413
📒 Files selected for processing (15)
web/sdk/admin/utils/connect-timestamp.tsweb/sdk/admin/views/invoices/columns.tsxweb/sdk/admin/views/organizations/details/apis/details-dialog.tsxweb/sdk/admin/views/organizations/details/invoices/columns.tsxweb/sdk/admin/views/organizations/details/members/columns.tsxweb/sdk/admin/views/organizations/details/projects/columns.tsxweb/sdk/admin/views/organizations/details/tokens/columns.tsxweb/sdk/admin/views/organizations/list/columns.tsxweb/sdk/admin/views/plans/columns.tsxweb/sdk/admin/views/plans/details.tsxweb/sdk/admin/views/preferences/details.tsxweb/sdk/admin/views/products/columns.tsxweb/sdk/admin/views/products/prices/columns.tsxweb/sdk/admin/views/users/list/columns.tsxweb/sdk/admin/views/webhooks/webhooks/columns.tsx
🚧 Files skipped from review as they are similar to previous changes (7)
- web/sdk/admin/views/organizations/details/projects/columns.tsx
- web/sdk/admin/views/organizations/details/apis/details-dialog.tsx
- web/sdk/admin/views/preferences/details.tsx
- web/sdk/admin/views/users/list/columns.tsx
- web/sdk/admin/views/plans/columns.tsx
- web/sdk/admin/views/webhooks/webhooks/columns.tsx
- web/sdk/admin/views/organizations/details/tokens/columns.tsx
| { | ||
| header: "creation date", | ||
| accessorKey: "createdAt", | ||
| cell: ({ getValue }) => { | ||
| const timestamp = getValue() as TimeStamp | undefined; | ||
| const date = timestampToDate(timestamp); | ||
| if (!date) return "-"; | ||
| return date.toLocaleString("en", { | ||
| month: "long", | ||
| day: "numeric", | ||
| year: "numeric", | ||
| }); | ||
| }, | ||
| cell: timestampCell, | ||
| }, |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Add filterType: "date" to the "creation date" column.
This column is missing filterType: "date" while every other timestamp column across the codebase (e.g., products/columns.tsx, organizations/details/invoices/columns.tsx, organizations/list/columns.tsx) sets it. Since enableColumnFilter is not explicitly disabled (unlike the "Updated date" column below), this column likely has filtering enabled with an incorrect default filter type.
🐛 Proposed fix
{
header: "creation date",
accessorKey: "createdAt",
+ filterType: "date",
cell: timestampCell,
},📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| { | |
| header: "creation date", | |
| accessorKey: "createdAt", | |
| cell: ({ getValue }) => { | |
| const timestamp = getValue() as TimeStamp | undefined; | |
| const date = timestampToDate(timestamp); | |
| if (!date) return "-"; | |
| return date.toLocaleString("en", { | |
| month: "long", | |
| day: "numeric", | |
| year: "numeric", | |
| }); | |
| }, | |
| cell: timestampCell, | |
| }, | |
| { | |
| header: "creation date", | |
| accessorKey: "createdAt", | |
| filterType: "date", | |
| cell: timestampCell, | |
| }, |
Shreyag02
changed the title
2 participants
Summary
Standardizes date display across the Admin console, centralizes formatting into a shared helper, fixes a null-timestamp rendering bug, and re-enables table column filters that were silently broken. All changes align the admin UI with the Apsara design system.
Changes
DATE_FORMAT,formatTimestamp, andtimestampCelltoconnect-timestamp.tsas the single source of truth for the format string and null-timestamp guard; migrated 32 call sites to it (removing 11YYYY-MM-DDcolumns, 6toLocaleStringusages, and 15dayjsimports).DD MMM YYYY(e.g.10 Jul 2026); preferences kept its time part (DD MMM YYYY hh:mm:ss A).{ seconds: 0 }), which rendered as01 Jan 1970(orInvalid Date).formatTimestampcentralizes theisNullTimestampguard so these show-— across columns, side panels, PAT, audit logs, and API details.filterVariantprop with Apsara'sfilterTypein 20 places, restoring column filtering.plan-cardto the client SDK'sDEFAULT_DATE_SHORT_FORMAT; removed the deadgetFormattedDateStringhelper and its non-canonicalDEFAULT_DATE_FORMATinapps/admin.Technical Details
DD MMM YYYYis Apsara's built-in default (DatePicker/RangePicker) and matches the client SDK'sDEFAULT_DATE_FORMAT— the canonical format, not an arbitrary choice.filterVariantis not a validDataTableColumnDefprop: accepted by the object literal but ignored at runtime (filters didn't work) and it threw 3 TS errors inproducts/columns.tsx.filterTypeclears the errors and restores filtering.client → adminimports are disallowed). Short (DD MMM) and time-only (hh:mm A) formats left as-is.web/sdk/admin/views/, 1 helper inweb/sdk/admin/utils/, 1 inweb/sdk/client/, 2 inweb/apps/admin/. No API, data-fetching, or behavioral changes beyond formatting, the null-timestamp fix, and filter enablement.Test Plan
DD MMM YYYYacross org, user, product, plan, invoice, token, webhook, PAT, audit-log, and side-panel views; zero/missing timestamps now show-; affected columns are filterable again.tscclean on all changed files (no new errors vs. baseline); eslint shows only pre-existing warnings.SQL Safety (if your PR touches
*_repository.goorgoqu.*)N/A