Show created at and an empty state#219
Open
gloskull wants to merge 2 commits into
Open
Conversation
…-api-keys feat(api-keys): show created-at and empty state
Contributor
Author
|
** @mikewheeleer please merge. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Motivation
Surface each API key's creation time (relative via TimeAgo, absolute ISO on hover) because the page previously rendered only label and prefix.
Provide a clear, announced empty state when the keys list is empty instead of rendering an empty
with no guidance.
Description
Render created-at per key: import TimeAgo and safeFormatTimestamp, add toTimestampMs to normalise seconds/milliseconds/string/missing values, and render a relative TimeAgo with a safe ISO title fallback.
Render EmptyState (announced via role="status") when the resolved items array is empty instead of an empty list.
Preserve existing create form, reveal-once panel, copy action, and confirm-before-revoke flow while adding created-at display in each list row.
Extend tests in src/app/api-keys/page.test.tsx to cover created-at rendering, empty state, missing createdAt, load errors, and existing create/revoke/copy/reveal flows.
Add a short note in README.md documenting the API keys page behaviour.
Testing
npx eslint src/app/api-keys/page.tsx src/app/api-keys/page.test.tsx — passed for the changed files.
npm run typecheck — passed (no TypeScript errors).
npm test -- --runTestsByPath src/app/api-keys/page.test.tsx — passed: 14/14 tests.
Coverage run: npm test -- --runTestsByPath src/app/api-keys/page.test.tsx --coverage --collectCoverageFrom=src/app/api-keys/page.tsx — passed; src/app/api-keys/page.tsx coverage: 97.9% statements, 88.09% branches, 100% functions, 97.9% lines.
npm test (full suite) — recorded unrelated existing failures in other suites (usage page alert-role ambiguity, ConfirmDialog backdrop test, validateNumber expectations, and a KeyValueGrid test); the API keys tests passed within the full run.
npm run lint (full) — failed on unrelated existing lint issues in other files.
npm run build — failed in this environment because next/font could not fetch the Geist/Geist Mono Google Fonts (network fetch failure); this is environment-specific and unrelated to the change.
Closes #154