feat (db-export): connect collection page to export pipeline

[renganathc]

🚀 Pull Request Description

Fixes #225

The backend export API and queue pipeline were implemented in my previous PR ( #188 ) and have already been merged.
This PR adds an export button to the collection page, allowing users to initiate exports directly from the UI.

🛠️ Type of Change

• 🐛 Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• 📝 Documentation update
• 🎨 UI/UX improvement (Frontend only)
• ⚙️ Refactor / Chore

🧪 Testing & Validation

Backend Verification:

• I have run npm test in the backend/ directory and all tests passed.
• I have verified the API endpoints using Postman/Thunder Client.
• New unit tests have been added (if applicable).

Frontend Verification:

• I have run npm run lint in the frontend/ directory.
• Verified the UI changes on different screen sizes (Responsive).
• Checked for any console errors in the browser dev tools.

📸 Screenshots / Recordings

✅ Checklist

• My code follows the code style of this project.
• I have performed a self-review of my code.
• I have commented my code, particularly in hard-to-understand areas.
• My changes generate no new warnings or errors.
• I have updated the documentation (README/Docs) accordingly.

---

Built with ❤️ for urBackend.

Summary by CodeRabbit

• New Features
  • Added an Export button in the database header to initiate collection exports.
  • Users can export the currently active collection with a single click.
  • Export flow shows a loading indicator while exporting and displays success or error notifications to keep users informed.

[coderabbitai]

Warning

Review limit reached

@yash-pouranik, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 53 minutes and 24 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 62b3c1db-cd95-485b-a7e6-1351b029d9d6

📥 Commits

Reviewing files that changed from the base of the PR and between 224bd43 and 2b5fe60.

📒 Files selected for processing (1)

• apps/web-dashboard/src/components/Database/DatabaseHeader.jsx

📝 Walkthrough

Walkthrough

Adds an "Export" button to the database header (hidden for users) and implements a page-level handleExportCollection that POSTs an export request, shows loading/success/error toasts, and prevents concurrent exports; the handler and exporting flag are passed into DatabaseHeader.

Changes

Database Export Button Feature

Layer / File(s)	Summary
Export handler implementation and integration apps/web-dashboard/src/pages/Database.jsx	Introduces isExporting state and handleExportCollection to POST an export request for the active collection, show loading/success/error toasts, and block re-entry while exporting; passes handler and flag into DatabaseHeader.
Export button UI and prop contract apps/web-dashboard/src/components/Database/DatabaseHeader.jsx	Imports Download, adds onExport and isExporting props to DatabaseHeader, and renders an "Export" button (hidden for users) that invokes onExport and is disabled when isExporting is true.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested labels

GSSOC'26, level:beginner, quality:clean, mentor:yash-pouranik

Suggested reviewers

• yash-pouranik

Poem

"A rabbit taps a shiny key, 🐇
Exporting rows for you and me,
A Download icon, a toast so bright,
Data sent on wings of night,
Hooray — your collection takes to flight!"

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title clearly summarizes the main change: connecting the collection page to the export pipeline by adding UI controls and backend integration.
Linked Issues check	✅ Passed	The PR addresses all core requirements from #225: Export button on dashboard, triggers the export API, shows user feedback (success and error toasts), handles error states (429, 403, 404), and supports collection-specific exports.
Out of Scope Changes check	✅ Passed	All changes are within scope: DatabaseHeader receives new export props and renders the Export button, and Database.jsx implements the export handler and state management to support the feature.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/web-dashboard/src/pages/Database.jsx`:
- Around line 173-183: The handleExportCollection handler can be invoked
multiple times concurrently; add an in-flight guard (e.g., a state variable
isExporting via useState) and check it at the top of handleExportCollection to
return early if true, set isExporting = true before the API call and reset it to
false in a finally block; also pass isExporting down to the export button (or
disable the button where it's rendered) so the UI is disabled while the export
is in flight. Ensure you reference handleExportCollection and activeCollection
when adding the guard so the behavior only applies to actual export actions.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ff8c8fa6-a7ae-481c-ba2b-84eb294d269d

📥 Commits

Reviewing files that changed from the base of the PR and between 76816a7 and 6c6d544.

📒 Files selected for processing (2)

• apps/web-dashboard/src/components/Database/DatabaseHeader.jsx
• apps/web-dashboard/src/pages/Database.jsx

[yash-pouranik]

Please do this 2 fix in Database .jsx
268-268
173-183

[yash-pouranik]

@renganathc

[renganathc]

Yeah, I'll get those fixed 👍

[renganathc]

Hi @yash-pouranik. I've made the changes. Take a look

[yash-pouranik]

hope everything is working as inended at ur local? @renganathc
please check @CodeRabbit ok to merge

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Read the current Database.jsx and DatabaseHeader.jsx from the PR branch
fd -e jsx "Database.jsx" --full-path | head -5
fd -e jsx "DatabaseHeader.jsx" --full-path | head -5

Length of output: 334

---

🏁 Script executed:

#!/bin/bash
# Get the full content of Database.jsx
fd -e jsx "Database.jsx" | xargs cat -n

Length of output: 30341

---

🏁 Script executed:

#!/bin/bash
# Get the full content of DatabaseHeader.jsx
fd -e jsx "DatabaseHeader.jsx" | xargs cat -n

Length of output: 6382

---

---

@yash-pouranik — the PR description images show the Export button and success toast working correctly. Here's what I verified in the current code:

✅ Looks good:

• handleExportCollection (lines 175–188) properly guards against double-submits (isExporting check), shows a loading toast, replaces it with the server's success message or a clear error, and always resets the loading state in finally.
• Error responses (429 rate limit, 403, 404) will be surfaced via err.response?.data?.message || err.response?.data?.error.
• isExporting is correctly wired as disabled={isExporting} on the Export button in DatabaseHeader.
• The line 268 fix (toast.error('Use the Auth page to add/manage users.')) is in place.
• Lines 173–183 fix is applied — isExporting state and the export handler are cleanly separated.

⚠️ Minor note (non-blocking):
The Export button in DatabaseHeader.jsx (line 109) is not wrapped in an activeCollection?.name !== 'users' guard, so it appears on the users collection too. It won't cause any errors (the backend call will fail gracefully), but it's a small UX inconsistency. Can be addressed in a follow-up.

Everything else looks solid — the feature meets the acceptance criteria from issue #225. ✅

(。•ᴗ•。)🐇

[yash-pouranik]

can u do that fix @coderabbitai

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
cat -n apps/web-dashboard/src/components/Database/DatabaseHeader.jsx
echo "---"
# Check how DatabaseHeader is called in Database.jsx
rg -n "DatabaseHeader" apps/web-dashboard/src/pages/Database.jsx -A5 -B2

Length of output: 7171

---

---

• Wrap the Export button in DatabaseHeader.jsx with an activeCollection?.name !== 'users' guard, matching the same pattern already used for the RLS and Add Record buttons.

@yash-pouranik — here's the fix. The Export button in DatabaseHeader.jsx (line 109) just needs to be wrapped with the same activeCollection?.name !== 'users' guard already used for the RLS and Add Record buttons:

-        <button onClick={onExport} disabled={isExporting} className="btn btn-secondary" style={{ padding: '6px 12px', height: '32px', gap: '6px', fontSize: '0.75rem' }}>
-          <Download size={14} /> Export
-        </button>
+        {activeCollection?.name !== 'users' && (
+          <button onClick={onExport} disabled={isExporting} className="btn btn-secondary" style={{ padding: '6px 12px', height: '32px', gap: '6px', fontSize: '0.75rem' }}>
+            <Download size={14} /> Export
+          </button>
+        )}

@renganathc — could you apply this one-liner to apps/web-dashboard/src/components/Database/DatabaseHeader.jsx? It keeps the Export button hidden on the users collection, consistent with how RLS and Add Record are already handled.

(｡•ᴗ•。)🐇

---

Failed to handle agent chat message. Please try again.

[yash-pouranik]

sugegst fix for lint errors
@coderabbitai

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
echo "=== DatabaseHeader.jsx ==="
cat -n apps/web-dashboard/src/components/Database/DatabaseHeader.jsx

echo ""
echo "=== Database.jsx (export-related lines) ==="
cat -n apps/web-dashboard/src/pages/Database.jsx

Length of output: 36873

---

---

@yash-pouranik — here are the lint fixes needed:

---

1. DatabaseHeader.jsx — Remove stray + diff markers (lines 110–113)

The previous patch was applied with literal + diff characters left in the file, which breaks JSX parsing. Remove the + signs:

// apps/web-dashboard/src/components/Database/DatabaseHeader.jsx

        {activeCollection?.name !== 'users' && (
-+          <button onClick={onExport} disabled={isExporting} className="btn btn-secondary" style={{ padding: '6px 12px', height: '32px', gap: '6px', fontSize: '0.75rem' }}>
-+            <Download size={14} /> Export
-+          </button>
-+        )}
+          <button onClick={onExport} disabled={isExporting} className="btn btn-secondary" style={{ padding: '6px 12px', height: '32px', gap: '6px', fontSize: '0.75rem' }}>
+            <Download size={14} /> Export
+          </button>
+        )}

After fix (lines 109–113 should look like):

{activeCollection?.name !== 'users' && (
  <button onClick={onExport} disabled={isExporting} className="btn btn-secondary" style={{ padding: '6px 12px', height: '32px', gap: '6px', fontSize: '0.75rem' }}>
    <Download size={14} /> Export
  </button>
)}

---

2. Database.jsx — Remove user and searchParams from the first useEffect deps (line 84)

user is not used inside that effect, and keeping searchParams causes a loop with the setSearchParams call in the second effect:

// apps/web-dashboard/src/pages/Database.jsx  line 84

-  }, [projectId, user, searchParams]);
+  }, [projectId]);

---

3. Database.jsx — Empty catch blocks (ESLint no-unused-vars / no-empty rules)

Rename empty catches to use a prefixed _ to silence the warning:

-  } catch { toast.error("Failed to load project"); }
+  } catch (_e) { toast.error("Failed to load project"); }

Apply the same catch (_e) pattern to lines 120, 149, 161, and 407.

---

Summary of files to update:

File	Issue	Fix
DatabaseHeader.jsx lines 110–113	Literal + diff chars in JSX	Remove the + characters
Database.jsx line 84	user + searchParams in deps	Change to [projectId]
Database.jsx lines 80, 120, 149, 161, 407	Empty catch blocks	Use catch (_e)

@renganathc — could you apply these fixes?

(｡•ᴗ•。)🐇