add telemetry and grafana links on my work page#43
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughAdds a new TelemetryLinks React component and corresponding styles, integrates it into the Our Work page, and introduces two client-facing environment variables (Grafana and telemetry site URLs) with updates to env configuration and .env.example. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/app/our-work/index.module.scss (1)
182-223: Add explicit:focus-visiblestyles for telemetry action links.Hover states are defined, but explicit keyboard focus treatment is missing. Adding it improves accessibility consistency.
♿ Suggested focus-visible enhancement
.telemetryPrimaryButton, .telemetrySecondaryButton { display: inline-flex; @@ &:hover { transform: translateY(-1px); } + + &:focus-visible { + outline: 2px solid `#fff`; + outline-offset: 2px; + } }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/our-work/index.module.scss` around lines 182 - 223, The telemetry button styles (.telemetryPrimaryButton and .telemetrySecondaryButton) define hover but lack keyboard focus treatment; add explicit :focus-visible rules for both classes to provide a visible, high-contrast focus indicator (for example an outline or focused box-shadow and ensure border-color/ background adjustments match the hover/active visual language) and make sure to include focus-visible on the shared selector (e.g., .telemetryPrimaryButton:focus-visible, .telemetrySecondaryButton:focus-visible) so keyboard users see a clear, accessible focus state without interfering with mouse hover styles.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/_components/OurWork/TelemetryLinks.tsx`:
- Around line 5-13: TelemetryLinks currently accepts grafanaUrl but the Grafana
CTA is commented out, leaving unused prop plumbing; restore or implement the
Grafana link UI so grafanaUrl is actually used. In the TelemetryLinks component,
add back the Grafana CTA (the commented-out link/button) and wire its href to
the grafanaUrl prop, ensuring it follows the same styling/behavior as the
existing telemetrySiteUrl entry and conditionally render the Grafana CTA only
when grafanaUrl is a non-empty string to avoid rendering a broken link.
In `@src/env.js`:
- Around line 13-16: .env.example is missing newly required public env vars
(NEXT_PUBLIC_GRAFANA_URL and NEXT_PUBLIC_TELEMETRY_SITE_URL) which breaks zod
validation for NEXT_PUBLIC_GRAFANA_URL, NEXT_PUBLIC_TELEMETRY_SITE_URL,
NEXT_PUBLIC_SUPABASE_ANON_KEY and NEXT_PUBLIC_SUPABASE_URL; update .env.example
to add entries for NEXT_PUBLIC_GRAFANA_URL and NEXT_PUBLIC_TELEMETRY_SITE_URL
(and ensure NEXT_PUBLIC_SUPABASE_ANON_KEY / NEXT_PUBLIC_SUPABASE_URL are
present) with placeholder values and brief comments so fresh clones pass the zod
validation in src/env.js (also mirror the same additions for the other
occurrence referenced around lines 34-37).
---
Nitpick comments:
In `@src/app/our-work/index.module.scss`:
- Around line 182-223: The telemetry button styles (.telemetryPrimaryButton and
.telemetrySecondaryButton) define hover but lack keyboard focus treatment; add
explicit :focus-visible rules for both classes to provide a visible,
high-contrast focus indicator (for example an outline or focused box-shadow and
ensure border-color/ background adjustments match the hover/active visual
language) and make sure to include focus-visible on the shared selector (e.g.,
.telemetryPrimaryButton:focus-visible, .telemetrySecondaryButton:focus-visible)
so keyboard users see a clear, accessible focus state without interfering with
mouse hover styles.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 675e28cf-23e9-4cfc-a832-3841d299468f
📒 Files selected for processing (4)
src/app/_components/OurWork/TelemetryLinks.tsxsrc/app/our-work/index.module.scsssrc/app/our-work/page.tsxsrc/env.js
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.env.example:
- Line 24: Remove the trailing whitespace on the final line of .env.example
(line 24) and ensure the file ends with a single newline character (no extra
spaces or blank lines) so dotenv-linter and EOF newline hygiene pass; simply
delete any spaces/tabs at the end of the last line and save the file with a
single terminating newline.
- Around line 22-23: .env.example uses non-URL placeholders for
NEXT_PUBLIC_TELEMETRY_SITE_URL and NEXT_PUBLIC_GRAFANA_URL which will fail the
z.string().url() validation in src/env.js; update those two entries to include
valid example URLs (e.g., https://telemetry.example.com and
https://grafana.example.com) so they pass the URL schema and serve as correct
copy-pasteable examples for NEXT_PUBLIC_GRAFANA_URL and
NEXT_PUBLIC_TELEMETRY_SITE_URL.
| NEXT_PUBLIC_TELEMETRY_SITE_URL=telemetrySiteUrl | ||
| NEXT_PUBLIC_GRAFANA_URL=grafanaSiteUrl |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify .env.example URL-like values for the two new required vars
python - <<'PY'
import re
from pathlib import Path
content = Path(".env.example").read_text().splitlines()
keys = ["NEXT_PUBLIC_TELEMETRY_SITE_URL", "NEXT_PUBLIC_GRAFANA_URL"]
vals = {}
for line in content:
if "=" in line and not line.strip().startswith("#"):
k,v = line.split("=",1)
if k in keys:
vals[k] = v.strip().strip('"').strip("'")
url_re = re.compile(r"^https?://")
ok = True
for k in keys:
v = vals.get(k)
if not v or not url_re.match(v):
ok = False
print(f"FAIL: {k} is not a valid example URL: {v!r}")
else:
print(f"OK: {k}={v}")
raise SystemExit(0 if ok else 1)
PYRepository: UCSolarCarTeam/Solar-Car-Website-Next
Length of output: 239
🏁 Script executed:
cat src/env.js | head -30Repository: UCSolarCarTeam/Solar-Car-Website-Next
Length of output: 1122
Use valid URL examples for required public env vars
Lines 22 and 23 currently use non-URL placeholders. In src/env.js, both NEXT_PUBLIC_GRAFANA_URL and NEXT_PUBLIC_TELEMETRY_SITE_URL are required and validated with z.string().url(), so copying .env.example as-is will fail schema validation at startup.
Proposed fix
-NEXT_PUBLIC_TELEMETRY_SITE_URL=telemetrySiteUrl
-NEXT_PUBLIC_GRAFANA_URL=grafanaSiteUrl
+NEXT_PUBLIC_TELEMETRY_SITE_URL=https://telemetry.example.com
+NEXT_PUBLIC_GRAFANA_URL=https://grafana.example.com📝 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.
| NEXT_PUBLIC_TELEMETRY_SITE_URL=telemetrySiteUrl | |
| NEXT_PUBLIC_GRAFANA_URL=grafanaSiteUrl | |
| NEXT_PUBLIC_TELEMETRY_SITE_URL=https://telemetry.example.com | |
| NEXT_PUBLIC_GRAFANA_URL=https://grafana.example.com |
🧰 Tools
🪛 dotenv-linter (4.0.0)
[warning] 22-22: [UnorderedKey] The NEXT_PUBLIC_TELEMETRY_SITE_URL key should go before the PROFILE_PICTURE_BUCKET key
(UnorderedKey)
[warning] 23-23: [UnorderedKey] The NEXT_PUBLIC_GRAFANA_URL key should go before the NEXT_PUBLIC_SUPABASE_ANON_KEY key
(UnorderedKey)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.env.example around lines 22 - 23, .env.example uses non-URL placeholders
for NEXT_PUBLIC_TELEMETRY_SITE_URL and NEXT_PUBLIC_GRAFANA_URL which will fail
the z.string().url() validation in src/env.js; update those two entries to
include valid example URLs (e.g., https://telemetry.example.com and
https://grafana.example.com) so they pass the URL schema and serve as correct
copy-pasteable examples for NEXT_PUBLIC_GRAFANA_URL and
NEXT_PUBLIC_TELEMETRY_SITE_URL.
| NEXT_PUBLIC_SUPABASE_URL="https://bug-free-orbit-rq5vxrpqgv6357w9.github.dev/" | ||
| NEXT_PUBLIC_TELEMETRY_SITE_URL=telemetrySiteUrl | ||
| NEXT_PUBLIC_GRAFANA_URL=grafanaSiteUrl | ||
|
No newline at end of file |
There was a problem hiding this comment.
Remove trailing whitespace on the last line
Line 24 contains trailing whitespace (and linter also reports end-of-file newline hygiene). Please clean the final line to keep dotenv-linter green.
Proposed fix
-
+📝 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.
🧰 Tools
🪛 dotenv-linter (4.0.0)
[warning] 24-24: [EndingBlankLine] No blank line at the end of the file
(EndingBlankLine)
[warning] 24-24: [TrailingWhitespace] Trailing whitespace detected
(TrailingWhitespace)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.env.example at line 24, Remove the trailing whitespace on the final line of
.env.example (line 24) and ensure the file ends with a single newline character
(no extra spaces or blank lines) so dotenv-linter and EOF newline hygiene pass;
simply delete any spaces/tabs at the end of the last line and save the file with
a single terminating newline.
1 participant
Summary by CodeRabbit