Logs table simplification

[MichaelUnkey]

What does this PR do?

Fixes # (issue)

ENG-2058

If there is not an issue for this, please create one first. This is used to tracking purposes and also helps us understand why this PR exists

Type of change

• [x] Bug fix (non-breaking change which fixes an issue)
• [ ] Chore (refactoring code, technical debt, workflow improvements)
• [ ] Enhancement (small improvements)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] This change requires a documentation update

How should this be tested?

• Test A
• Test B

Checklist

Required

• [ ] Filled out the "How to test" section in this PR
• [ ] Read Contributing Guide
• [ ] Self-reviewed my own code
• [ ] Commented on my code in hard-to-understand areas
• [ ] Ran pnpm build
• [ ] Ran pnpm fmt
• [ ] Ran make fmt on /go directory
• [ ] Checked for warnings, there are none
• [ ] Removed all console.logs
• [ ] Merged the latest changes from main onto my branch with git pull origin main
• [ ] My changes don't cause any responsiveness issues

Appreciated

• [ ] If a UI change was made: Added a screen recording or screenshots to this PR
• [ ] Updated the Unkey Docs if changes were necessary

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 921545df8ad7313fdd2b8e7c48e94181c3e02782

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
dashboard	Ready	Preview	Comment	Nov 23, 2025 8:01pm
engineering	Ready	Preview	Comment	Nov 23, 2025 8:01pm

[coderabbitai[bot]]

📝 Walkthrough

Walkthrough

This PR refactors log details and table components to support loading and error states. It introduces three new UI components: BadgeList (tags display), EmptyTable (empty state), and StatusCell (status rendering). LogDetails is updated to accept optional log with isLoading and isError flags. Multiple drawers are updated to pass these new flags.

Changes

Cohort / File(s)	Summary
Core LogDetails Component apps/dashboard/components/logs/details/log-details/index.tsx	LogDetails component signature expanded to accept optional log, isLoading, and isError flags. Context updated to include isLoading and isError states. Rendering logic adjusted to display loading and error Empty states when log is absent. Meta rendering now guards on log existence.
LogHeader Component apps/dashboard/components/logs/details/log-details/components/log-header.tsx	Log prop changed to optional. Conditional rendering of log-related UI (path, method, status badge) only when log exists. Bottom border conditionally applied based on log presence.
New UI Components apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/[keyId]/components/table/components/badge-list.tsx, empty-table.tsx, status-cell.tsx	BadgeList: New component rendering responsive tag badges with ResizeObserver-based width tracking, tooltip support, and overflow "+N" badge. EmptyTable: New component for centered empty state UI with title, description, and optional icon. StatusCell: New component rendering verification outcomes with color-coded badges, tooltips, and selection-aware styling based on LOG_OUTCOME_DEFINITIONS mapping.
Drawer/Details Updates apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/index.tsx, logs/components/table/log-details/index.tsx, projects/[projectId]/gateway-logs/components/table/gateway-log-details/index.tsx, ratelimits/[namespaceId]/logs/components/table/log-details/index.tsx	LogDetails component usage updated to pass isLoading\={false} and isError\={false} props alongside existing distanceToTop, log, and onClose.
KeyDetailsLogsTable Refactoring apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/[keyId]/components/table/logs-table.tsx	Replaced inline status rendering with StatusCell component. Introduced BadgeList for tags and EmptyTable for empty state. Columns converted to memoized useMemo value with row class computed via useCallback. Added polling constants (POLL_INTERVAL_MS, PREFETCH_LIMIT, PREFETCH_START_TIME). Removed inline LOG_OUTCOME_DEFINITIONS and related status styling logic.
KeyDetailsDrawer Updates apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/[keyId]/components/table/components/log-details/index.tsx	Introduces isLoading from useFetchRequestDetails and propagates to LogDetails. Replaces toast-based error notifications with errorShown flag management. Removes early return based on error/log presence; LogDetails rendered regardless with log possibly undefined. Passes isError\={errorShown} to LogDetails.

Sequence Diagram(s)

sequenceDiagram
    actor User
    participant Drawer as Drawer/Modal
    participant LogDetails as LogDetails Component
    participant Context as LogDetailsContext
    participant Content as Content (Header/Sections/Meta)

    User->>Drawer: Open drawer
    Drawer->>LogDetails: Render with isLoading=true
    LogDetails->>Context: Provide {log: undefined, isLoading: true, isError: false}
    LogDetails->>Content: Render Sections
    Content->>Content: Early exit, render Empty with spinner
    
    Note over LogDetails: Loading state displayed
    
    Drawer->>LogDetails: Update with log data, isLoading=false
    LogDetails->>Context: Provide {log: StandardLog, isLoading: false, isError: false}
    LogDetails->>Content: Render Sections
    Content->>Content: Render Header, Meta, Sections with log data
    
    Note over LogDetails: Content displayed
    
    User->>Drawer: User triggers close
    Drawer->>LogDetails: Render with onClose callback
    LogDetails->>LogDetails: Animate close
    User->>Drawer: Drawer closed

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• BadgeList component: ResizeObserver implementation for responsive rendering with truncation and overflow handling requires careful review of width calculations and edge cases.
• StatusCell component: Complex outcome-to-style mappings and visual severity categorization logic needs validation against design specifications.
• LogDetails context flow: Verify that all code paths correctly handle undefined log across Header, Meta, and Sections components; ensure no null-reference issues.
• Table refactoring: Confirm that useMemo and useCallback dependencies are correctly specified to avoid stale closures or unnecessary re-renders, particularly for selectedLog-dependent logic.
• Multi-drawer updates: Pattern consistency across five drawer locations; verify isLoading/isError state management is coherent across KeyDetailsDrawer, SharedLogDetails, and gateway/ratelimit variants.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title 'refactor: Key Logs table simplification' is directly related to the main changeset, which focuses on refactoring the logs table with new component abstractions (StatusCell, BadgeList, EmptyTable) and extracting logic into dedicated modules.
Description check	✅ Passed	The PR description is mostly complete with issue reference, type of change, and testing instructions provided.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment
• [ ] Commit unit tests in branch logs-table-simplification

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions[bot]]

Thank you for following the naming conventions for pull request titles! 🙏