🐛 fix: screenshots not uploaded in Contribute modal by clubanderson · Pull Request #3980 · kubestellar/console

clubanderson · 2026-03-31T13:45:49Z

Summary

Root cause of #3637: FeatureRequestModal.tsx (the main Contribute modal) called createRequest() without passing the screenshots field. It appended placeholder text instead:

Screenshots: 1 screenshot(s) attached — paste images into this issue.

The backend never received the data URIs and had nothing to upload. The simpler FeedbackModal.tsx correctly passed screenshots — but most users submit through FeatureRequestModal.

Fix: Pass screenshots: screenshotDataURIs to createRequest() so the backend uploads them via GitHub Contents API and embeds them as ![Screenshot](url) in the issue body.

Verified via CDP E2E

Launched Chrome with CDP (remote-debugging-port=9222)
Navigated to console, logged in via dev-mode
Submitted bug report with screenshot via browser JS
Confirmed issue [CDP-E2E] Full flow screenshot test via browser #3978 was created with embedded ![Screenshot 1](https://raw.githubusercontent.com/...)
Image is visible in the GitHub issue

Test plan

npm run build passes
CDP E2E: submit bug with screenshot → image appears in GitHub issue
Backend upload returns valid download_url
Manual test: open Contribute modal, attach screenshot, submit, verify in created issue

Fixes #3637

…dal) Root cause: FeatureRequestModal.tsx called createRequest() without passing the screenshots field. Instead it appended a placeholder text "Screenshots: N screenshot(s) attached — paste images into this issue" to the description. The backend never received the screenshot data URIs and had nothing to upload. FeedbackModal.tsx (the simpler modal) correctly passed screenshots. FeatureRequestModal.tsx (the main Contribute modal that most users see) did not. Fix: Pass screenshot data URIs to createRequest() so the backend can upload them via GitHub Contents API and embed them in the issue body. Verified via CDP end-to-end: browser → API → GitHub Contents API → embedded ![Screenshot](url) in created issue. Fixes #3637 Signed-off-by: Andrew Anderson <andy@clubanderson.com>

kubestellar-prow · 2026-03-31T13:45:56Z

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign clubanderson for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

github-actions · 2026-03-31T13:46:03Z

👋 Hey @clubanderson — thanks for opening this PR!

🤖 This project is developed exclusively using AI coding assistants.

Please do not attempt to code anything for this project manually.
All contributions should be authored using an AI coding tool such as:

Claude Code (Opus 4.5 / 4.6) — recommended

GitHub Copilot

Cursor

Other AI coding assistants

This ensures consistency in code style, architecture patterns, test coverage,
and commit quality across the entire codebase.

This is an automated message.

netlify · 2026-03-31T13:46:12Z

✅ Deploy Preview for kubestellarconsole ready!

Name	Link
🔨 Latest commit	`e87f304`
🔍 Latest deploy log	https://app.netlify.com/projects/kubestellarconsole/deploys/69cbd0121d2b430008ecf675
😎 Deploy Preview	https://deploy-preview-3980.console-deploy-preview.kubestellar.io
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

github-actions · 2026-03-31T13:46:17Z

Thank you for your contribution! Your PR has been merged.

Check out what's new:

KubeStellar Console — Live multi-cluster dashboard
Marketplace — Community extensions
Knowledge Base — Troubleshooting and how-tos

Stay connected: Slack #kubestellar-dev | Multi-Cluster Survey

Copilot

Pull request overview

Fixes missing screenshot uploads for issues created via the main Contribute/FeatureRequest modal by ensuring screenshot data URIs are sent to the backend, allowing server-side upload + embedding into the created GitHub issue.

Changes:

Stop appending a placeholder “screenshots attached” note into the issue description.
Collect screenshot base64 data URIs from the modal state and pass them to createRequest() via the screenshots field.

Copilot · 2026-03-31T13:51:41Z

web/src/components/feedback/FeatureRequestModal.tsx

+    // Collect base64 data URIs for screenshots so the backend can upload
+    // them to GitHub and embed them directly in the created issue.
+    const screenshotDataURIs = screenshots.map(s => s.preview)


Now that screenshots are actually sent to the backend for upload/embedding, there is still UI copy later in this component telling users that screenshots will only be “noted” and they should paste them into GitHub manually. That guidance will be incorrect after this change; please update the user-facing text to reflect automatic upload/embedding (and consider whether the “copy screenshot” affordance is still needed).

Copilot · 2026-03-31T13:51:43Z

web/src/components/feedback/FeatureRequestModal.tsx

+        ...(screenshotDataURIs.length > 0 && { screenshots: screenshotDataURIs }),
      })
      setSuccess({ issueUrl: result.github_issue_url })
      // Show thank-you for 5s (extended to give time to copy screenshots) then switch to Updates tab


The inline comment about keeping the success state visible longer “to give time to copy screenshots” looks stale now that screenshots are uploaded/embedded automatically. Please update the comment (and possibly the timeout rationale) so it matches the new behavior to avoid future confusion during maintenance.

Suggested change

// Show thank-you for 5s (extended to give time to copy screenshots) then switch to Updates tab

// Keep the success state visible for 5s so users can read the confirmation and open the issue before switching to the Updates tab

Copilot · 2026-03-31T13:51:44Z

web/src/components/feedback/FeatureRequestModal.tsx

      const result = await createRequest({
        title: extractedTitle,
-        description: finalDesc,
+        description: extractedDesc,
        request_type: requestType,
        target_repo: targetRepo,
+        ...(screenshotDataURIs.length > 0 && { screenshots: screenshotDataURIs }),
      })


This change fixes a regression-critical path (sending screenshot data URIs to the backend). Consider adding a unit/integration test that renders FeatureRequestModal, attaches a screenshot, submits, and asserts createRequest is called with the screenshots field populated—otherwise it’s easy for this bug to reappear unnoticed (FeatureRequestModal already has a basic vitest file in the repo).

clubanderson · 2026-03-31T13:51:54Z

🔄 Auto-Applying Copilot Code Review

Copilot code review found 1 code suggestion(s) and 2 general comment(s).

@copilot Please apply all of the following code review suggestions:

web/src/components/feedback/FeatureRequestModal.tsx (line 328): // Keep the success state visible for 5s so users can read the confirmation and ...

Also address these general comments:

web/src/components/feedback/FeatureRequestModal.tsx (line 317): Now that screenshots are actually sent to the backend for upload/embedding, there is still UI copy later in this compone
web/src/components/feedback/FeatureRequestModal.tsx (line 326): This change fixes a regression-critical path (sending screenshot data URIs to the backend). Consider adding a unit/integ

Push all fixes in a single commit. Run cd web && npm run build && npm run lint before committing.

Auto-generated by copilot-review-apply workflow.

- Update stale UI copy: screenshots are now uploaded/embedded, not "noted" with manual paste instructions - Fix stale comment about extended timeout for copying screenshots - Fix !data truthy check in api.ts get/post/put — use === null to avoid misclassifying valid falsy JSON responses (0, false, "") Signed-off-by: Andrew Anderson <andy@clubanderson.com>

Copilot AI review requested due to automatic review settings March 31, 2026 13:45

kubestellar-prow bot added the dco-signoff: yes Indicates the PR's author has signed the DCO. label Mar 31, 2026

kubestellar-prow bot added the size/S Denotes a PR that changes 10-29 lines, ignoring generated files. label Mar 31, 2026

clubanderson merged commit 8d5fa6c into main Mar 31, 2026
16 checks passed

kubestellar-prow bot deleted the fix/screenshot-upload-3637 branch March 31, 2026 13:46

Copilot started reviewing on behalf of clubanderson March 31, 2026 13:46 View session

github-actions bot mentioned this pull request Mar 31, 2026

📋 [aw] No-Op Runs #3237

Closed

Copilot AI reviewed Mar 31, 2026

View reviewed changes

clubanderson assigned Copilot Mar 31, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🐛 fix: screenshots not uploaded in Contribute modal#3980

🐛 fix: screenshots not uploaded in Contribute modal#3980
clubanderson merged 1 commit intomainfrom
fix/screenshot-upload-3637

clubanderson commented Mar 31, 2026

Uh oh!

kubestellar-prow bot commented Mar 31, 2026

Uh oh!

github-actions bot commented Mar 31, 2026

Uh oh!

Uh oh!

netlify bot commented Mar 31, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 31, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

clubanderson commented Mar 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	// Show thank-you for 5s (extended to give time to copy screenshots) then switch to Updates tab
	// Keep the success state visible for 5s so users can read the confirmation and open the issue before switching to the Updates tab

Conversation

clubanderson commented Mar 31, 2026

Summary

Verified via CDP E2E

Test plan

Uh oh!

kubestellar-prow bot commented Mar 31, 2026

Uh oh!

github-actions bot commented Mar 31, 2026

Uh oh!

Uh oh!

netlify bot commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for kubestellarconsole ready!

Uh oh!

github-actions bot commented Mar 31, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

clubanderson commented Mar 31, 2026

🔄 Auto-Applying Copilot Code Review

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify bot commented Mar 31, 2026 •

edited

Loading