Skip to content

feat(docs): add live API status indicator to sidebar#7589

Open
ArthurGamby wants to merge 1 commit intomainfrom
add-api-status-indicator-to-docs-sidebar
Open

feat(docs): add live API status indicator to sidebar#7589
ArthurGamby wants to merge 1 commit intomainfrom
add-api-status-indicator-to-docs-sidebar

Conversation

@ArthurGamby
Copy link
Contributor

@ArthurGamby ArthurGamby commented Mar 4, 2026

Summary

  • Adds a live API status indicator to the docs sidebar footer, fetching from the Prisma Statuspage API
  • Shows a colored dot (green/yellow/orange/red) with pulse animation for non-operational states, polling every 5 minutes
  • Hidden on mobile, gracefully returns null on fetch failure

Test plan

  • Run pnpm dev and verify the status indicator appears below the sidebar cards
  • Verify it links to https://www.prisma-status.com
  • Verify it's hidden on mobile viewports
  • Check Network tab to confirm polling every 5 minutes

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

  • New Features
    • Added a status indicator to the documentation sidebar that displays the current Prisma service health status with regular updates
    • Status indicator uses color-coded indicators to reflect service conditions at a glance
    • Enhanced documentation layout with a new footer section in the sidebar

Adds a compact status indicator in the docs sidebar footer that fetches
from the Prisma Statuspage API and polls every 5 minutes. Shows a
colored dot with pulse animation for non-operational states.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@vercel
Copy link

vercel bot commented Mar 4, 2026

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

Project Deployment Actions Updated (UTC)
blog Ready Ready Preview, Comment Mar 4, 2026 4:02pm
docs Ready Ready Preview, Comment Mar 4, 2026 4:02pm
eclipse Building Building Preview Mar 4, 2026 4:02pm

Request Review

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 4, 2026

Walkthrough

A new StatusIndicator component fetches Prisma system status data and displays it in the DocsLayout sidebar footer. The layout configuration switches from a simple collapsible setting to an object-based approach that renders the status indicator as a footer element with styling and standard div props support.

Changes

Cohort / File(s) Summary
Layout Footer Configuration
apps/docs/src/app/(docs)/(default)/layout.tsx
Converts sidebar collapsible from boolean to object configuration; adds footer element that wraps StatusIndicator component with styled div container and standard HTML props.
Status Indicator Component
apps/docs/src/components/status-indicator.tsx
New component that fetches Prisma status from external API on mount and every 5 minutes. Maps status indicators to colored dot styles; renders link with animated ping indicator for non-operational states. Handles fetch errors gracefully by resetting status.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'feat(docs): add live API status indicator to sidebar' directly and accurately describes the main change: adding a live status indicator to the documentation sidebar.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


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

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

@argos-ci
Copy link

argos-ci bot commented Mar 4, 2026

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) ⚠️ Changes detected (Review) 1 removed Mar 4, 2026, 4:09 PM

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

🧹 Nitpick comments (1)
apps/docs/src/components/status-indicator.tsx (1)

29-32: Add explicit HTTP status check for better error handling.

The code should verify the response status before parsing JSON. If the API returns a non-2xx response, attempting to parse the error response as JSON can fail silently. Add a check like if (!res.ok) throw new Error(...) to fail fast on server errors.

Regarding caching: the API explicitly sets cache-control: max-age=3, public, stale-while-revalidate=30, stale-if-error=3600, so the component isn't relying on "default browser caching." The polling interval is 5 minutes, which is well beyond the 3-second fresh window, so cache freshness is not a practical concern here. The stale-if-error policy is actually beneficial for resilience during outages.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/docs/src/components/status-indicator.tsx` around lines 29 - 32, The
fetch chain in status-indicator.tsx should verify HTTP success before parsing:
inside the fetch(...).then((res) => ...) step check res.ok and throw a
descriptive Error (including res.status and/or res.statusText) when !res.ok so
non-2xx responses skip JSON parsing; keep the downstream .then((data:
StatusResponse) => setStatus(data.status)) and the .catch(() => setStatus(null))
as-is so failures result in null status. Reference: the fetch call that sets
StatusResponse and calls setStatus.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@apps/docs/src/components/status-indicator.tsx`:
- Around line 29-32: The fetch chain in status-indicator.tsx should verify HTTP
success before parsing: inside the fetch(...).then((res) => ...) step check
res.ok and throw a descriptive Error (including res.status and/or
res.statusText) when !res.ok so non-2xx responses skip JSON parsing; keep the
downstream .then((data: StatusResponse) => setStatus(data.status)) and the
.catch(() => setStatus(null)) as-is so failures result in null status.
Reference: the fetch call that sets StatusResponse and calls setStatus.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 27e65f20-d5f8-4534-a25e-bcb6d89dd8b6

📥 Commits

Reviewing files that changed from the base of the PR and between ac8da00 and 5c5833d.

📒 Files selected for processing (2)
  • apps/docs/src/app/(docs)/(default)/layout.tsx
  • apps/docs/src/components/status-indicator.tsx

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants