Skip to content

fix: Knowledge Base Improvements#12023

Merged
deon-sanchez merged 5 commits intomainfrom
le-480
Mar 4, 2026
Merged

fix: Knowledge Base Improvements#12023
deon-sanchez merged 5 commits intomainfrom
le-480

Conversation

@deon-sanchez
Copy link
Collaborator

@deon-sanchez deon-sanchez commented Mar 3, 2026

This pull request enhances the usability and consistency of the SourceChunksPage pagination controls and improves layout structure for better alignment and responsiveness. It also includes a small wording update in the knowledge base upload modal. The most significant changes are grouped below:

Pagination and Input Handling Improvements:

  • Added a dedicated pageInput state to decouple the pagination input field from the actual currentPage, allowing for better user experience and validation. Handlers for input changes, blur, and Enter key were introduced to validate and update the page correctly. [1] [2] [3]
  • Updated all pagination button handlers to keep pageInput in sync with currentPage, ensuring consistent UI updates when navigating between pages. [1] [2] [3]
  • Improved the appearance and behavior of the pagination input, including styling to hide the default number input spin buttons and better focus states.

Layout and Structure Enhancements:

  • Refactored the layout to consistently wrap key sections in xl:container for improved alignment and responsiveness across the page, including the header, search bar, chunk list, and pagination controls. [1] [2] [3] [4] [5] [6]

Minor Improvements:

  • Updated the advanced configuration toggle label in the knowledge base upload modal from "Hide Sources" to "Hide Configuration" for clarity.
  • Minor code style and whitespace adjustments for improved readability and maintainability. [1] [2]

Summary by CodeRabbit

  • Improvements
    • Refined UI labels in the Knowledge Base Upload modal
    • Enhanced pagination navigation with direct numeric page input and validation in source chunks page for improved usability

- Change quote style from double to single quotes throughout knowledge base components
- Update "Hide Sources" button label to "Hide Configuration" for clarity
- Restructure SourceChunksPage layout to use xl:container for consistent spacing
- Add controlled page input state with validation on blur and Enter key
- Synchronize page input field with pagination controls to prevent state drift
- Reset page input to "1" when changing page
@deon-sanchez deon-sanchez changed the title fix: Knowledge Base Improvemets fix: Knowledge Base Improvements Mar 3, 2026
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 3, 2026

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 63778341-81ca-4f08-be6a-174d115d17b7

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

Walkthrough

Two UI changes: a label update in the KnowledgeBase upload modal and a refactoring of pagination controls in the Source Chunks page to use controlled input with numeric validation.

Changes

Cohort / File(s) Summary
UI Label Update
src/frontend/src/modals/knowledgeBaseUploadModal/KnowledgeBaseUploadModal.tsx
Changed help label text from "Hide Sources" to "Hide Configuration" when advanced configuration is displayed.
Pagination Refactoring
src/frontend/src/pages/MainPage/pages/knowledgePage/sourceChunksPage/SourceChunksPage.tsx
Introduced separate pageInput state for direct numeric page entry with validation. Added handlePageInputChange, handlePageInputBlur, and handlePageInputKeyDown handlers. Updated navigation to synchronize both currentPage and pageInput. Restructured JSX layout while preserving error and empty states.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes


Important

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 error, 3 warnings, 1 inconclusive)

Check name Status Explanation Resolution
Test Coverage For New Implementations ❌ Error Test files exist and were modified, but lack coverage for new pagination input handlers and label change functionality. Add tests for handlePageInputChange, handlePageInputBlur, handlePageInputKeyDown handlers and verify 'Hide Configuration' label in KnowledgeBaseUploadModal.test.tsx.
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.
Test Quality And Coverage ⚠️ Warning Test coverage for new pagination functionality in SourceChunksPage is insufficient, lacking tests for handlers and validation logic, plus accessibility issue with missing aria-label. Add comprehensive tests for handlePageInputBlur, handlePageInputKeyDown, handlePageInputChange, edge cases, and add missing aria-label attribute to page input element.
Test File Naming And Structure ⚠️ Warning Test files follow correct naming patterns and structure, but SourceChunksPage.test.tsx lacks coverage for new pagination input logic including state management, validation handlers, and edge cases. Add tests for pageInput state changes, blur event validation, Enter key handling, state synchronization, and edge cases like invalid page numbers and boundary conditions.
Title check ❓ Inconclusive The title 'fix: Knowledge Base Improvements' is overly broad and vague. It does not clearly convey the specific nature of the changes, such as pagination improvements or the modal label update. Revise the title to be more specific and descriptive of the main changes, such as 'fix: Improve pagination input and knowledge base modal label' or 'fix: Add controlled page input and update modal configuration label'.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Excessive Mock Usage Warning ✅ Passed Both test files demonstrate appropriate mock usage for external dependencies while testing core component logic without excessive mocking.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch le-480

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.

@github-actions github-actions bot added bug Something isn't working and removed bug Something isn't working labels Mar 3, 2026
Comment on lines +67 to +94
setPageInput("1");
};

const handlePageInputChange = (value: string) => {
setPageInput(value);
};

const handlePageInputBlur = () => {
const value = parseInt(pageInput, 10);
if (!isNaN(value) && value >= 1 && value <= totalPages) {
setCurrentPage(value);
setPageInput(String(value));
} else {
setPageInput(String(currentPage));
}
};

const handlePageInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter") {
const value = parseInt(pageInput, 10);
if (!isNaN(value) && value >= 1 && value <= totalPages) {
setCurrentPage(value);
setPageInput(String(value));
} else {
setPageInput(String(currentPage));
}
e.currentTarget.blur();
}
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

address pagination issue with black arrows on safari, we change to text field to only integers and update on enter or unblur

@github-actions
Copy link
Contributor

github-actions bot commented Mar 3, 2026

Frontend Unit Test Coverage Report

Coverage Summary

Lines Statements Branches Functions
Coverage: 23%
23.24% (8235/35429) 16.02% (4458/27826) 15.91% (1185/7445)

Unit Test Results

Tests Skipped Failures Errors Time
2631 0 💤 0 ❌ 0 🔥 44.304s ⏱️

@github-actions github-actions bot added bug Something isn't working and removed bug Something isn't working labels Mar 3, 2026
@codecov
Copy link

codecov bot commented Mar 3, 2026

Codecov Report

❌ Patch coverage is 34.28571% with 23 lines in your changes missing coverage. Please review.
✅ Project coverage is 37.43%. Comparing base (f0a9d98) to head (688a078).
⚠️ Report is 1 commits behind head on main.

Files with missing lines Patch % Lines
...nowledgePage/sourceChunksPage/SourceChunksPage.tsx 34.28% 23 Missing ⚠️

❌ Your patch status has failed because the patch coverage (34.28%) is below the target coverage (40.00%). You can increase the patch coverage or adjust the target coverage.
❌ Your project status has failed because the head coverage (42.37%) is below the target coverage (60.00%). You can increase the head coverage or adjust the target coverage.

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             main   #12023      +/-   ##
==========================================
- Coverage   37.46%   37.43%   -0.03%     
==========================================
  Files        1616     1616              
  Lines       79041    79060      +19     
  Branches    11945    11946       +1     
==========================================
- Hits        29612    29596      -16     
- Misses      47771    47806      +35     
  Partials     1658     1658              
Flag Coverage Δ
backend 57.34% <ø> (-0.10%) ⬇️
frontend 20.82% <34.28%> (+<0.01%) ⬆️
lfx 42.37% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines Coverage Δ
...wledgeBaseUploadModal/KnowledgeBaseUploadModal.tsx 92.10% <ø> (ø)
...nowledgePage/sourceChunksPage/SourceChunksPage.tsx 66.26% <34.28%> (-11.86%) ⬇️

... and 11 files with indirect coverage changes

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

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.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/frontend/src/pages/MainPage/pages/knowledgePage/sourceChunksPage/SourceChunksPage.tsx (1)

30-37: ⚠️ Potential issue | 🟠 Major

Reset pageInput when search resets pagination.

At Line 35, currentPage is reset to 1, but pageInput is not. This can leave stale input text and cause unintended jumps when the field blurs.

Suggested patch
  debounceTimer.current = setTimeout(() => {
    setDebouncedSearch(value);
    setCurrentPage(1);
+   setPageInput("1");
  }, 300);
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@src/frontend/src/pages/MainPage/pages/knowledgePage/sourceChunksPage/SourceChunksPage.tsx`
around lines 30 - 37, handleSearchChange resets pagination by calling
setCurrentPage(1) but does not update the page input state, leaving stale text
in the page input; inside the debounce timeout (the callback in
handleSearchChange) also call the page input updater (e.g., setPageInput("1") or
reset pageInput ref) so the visible page input matches the new currentPage; keep
the existing debounceTimer clear/set logic and ensure you reference
handleSearchChange, setDebouncedSearch, setCurrentPage and the page input state
updater (setPageInput or equivalent).
🤖 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/frontend/src/pages/MainPage/pages/knowledgePage/sourceChunksPage/SourceChunksPage.tsx`:
- Around line 255-267: The page number input in SourceChunksPage.tsx lacks an
accessible label; add an explicit label (either a <label htmlFor="..."> paired
with the input id or an aria-label on the input) so screen readers announce its
purpose. Update the input element used with handlers handlePageInputChange,
handlePageInputBlur, handlePageInputKeyDown and value pageInput to include
id="page-number" (or similar) and add a matching <label
htmlFor="page-number">Page</label>, or alternatively add aria-label="Page
number" directly on the input; ensure the label text or aria-label mentions
totalPages if desired (e.g., "Page number of N") and that styling/layout still
matches the existing pagination UI.

---

Outside diff comments:
In
`@src/frontend/src/pages/MainPage/pages/knowledgePage/sourceChunksPage/SourceChunksPage.tsx`:
- Around line 30-37: handleSearchChange resets pagination by calling
setCurrentPage(1) but does not update the page input state, leaving stale text
in the page input; inside the debounce timeout (the callback in
handleSearchChange) also call the page input updater (e.g., setPageInput("1") or
reset pageInput ref) so the visible page input matches the new currentPage; keep
the existing debounceTimer clear/set logic and ensure you reference
handleSearchChange, setDebouncedSearch, setCurrentPage and the page input state
updater (setPageInput or equivalent).

ℹ️ Review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2fc6ca8 and 01046a5.

📒 Files selected for processing (2)
  • src/frontend/src/modals/knowledgeBaseUploadModal/KnowledgeBaseUploadModal.tsx
  • src/frontend/src/pages/MainPage/pages/knowledgePage/sourceChunksPage/SourceChunksPage.tsx

Comment on lines +255 to +267
<input
type="number"
min={1}
max={totalPages}
value={pageInput}
onChange={(e) =>
handlePageInputChange(e.target.value)
}
onBlur={handlePageInputBlur}
onKeyDown={handlePageInputKeyDown}
className="h-7 w-16 rounded border border-input bg-background px-2 text-center text-sm focus:outline-none focus:ring-1 focus:ring-ring [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-inner-spin-button]:opacity-100 [&::-webkit-inner-spin-button]:[filter:invert(1)] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-outer-spin-button]:opacity-100 [&::-webkit-outer-spin-button]:[filter:invert(1)]"
/>
<span>of {totalPages}</span>
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Add an explicit accessible label for the page input.

The number input has nearby text, but no semantic label association. Add an aria-label (or <label htmlFor> pair) so screen readers announce its purpose reliably.

Suggested patch
                          <input
                            type="number"
+                           aria-label="Page number"
                            min={1}
                            max={totalPages}
                            value={pageInput}
📝 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.

Suggested change
<input
type="number"
min={1}
max={totalPages}
value={pageInput}
onChange={(e) =>
handlePageInputChange(e.target.value)
}
onBlur={handlePageInputBlur}
onKeyDown={handlePageInputKeyDown}
className="h-7 w-16 rounded border border-input bg-background px-2 text-center text-sm focus:outline-none focus:ring-1 focus:ring-ring [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-inner-spin-button]:opacity-100 [&::-webkit-inner-spin-button]:[filter:invert(1)] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-outer-spin-button]:opacity-100 [&::-webkit-outer-spin-button]:[filter:invert(1)]"
/>
<span>of {totalPages}</span>
<input
type="number"
aria-label="Page number"
min={1}
max={totalPages}
value={pageInput}
onChange={(e) =>
handlePageInputChange(e.target.value)
}
onBlur={handlePageInputBlur}
onKeyDown={handlePageInputKeyDown}
className="h-7 w-16 rounded border border-input bg-background px-2 text-center text-sm focus:outline-none focus:ring-1 focus:ring-ring [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-inner-spin-button]:opacity-100 [&::-webkit-inner-spin-button]:[filter:invert(1)] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-outer-spin-button]:opacity-100 [&::-webkit-outer-spin-button]:[filter:invert(1)]"
/>
<span>of {totalPages}</span>
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@src/frontend/src/pages/MainPage/pages/knowledgePage/sourceChunksPage/SourceChunksPage.tsx`
around lines 255 - 267, The page number input in SourceChunksPage.tsx lacks an
accessible label; add an explicit label (either a <label htmlFor="..."> paired
with the input id or an aria-label on the input) so screen readers announce its
purpose. Update the input element used with handlers handlePageInputChange,
handlePageInputBlur, handlePageInputKeyDown and value pageInput to include
id="page-number" (or similar) and add a matching <label
htmlFor="page-number">Page</label>, or alternatively add aria-label="Page
number" directly on the input; ensure the label text or aria-label mentions
totalPages if desired (e.g., "Page number of N") and that styling/layout still
matches the existing pagination UI.

@github-actions github-actions bot added bug Something isn't working and removed bug Something isn't working labels Mar 4, 2026
@deon-sanchez deon-sanchez enabled auto-merge March 4, 2026 17:00
@github-actions github-actions bot added bug Something isn't working and removed bug Something isn't working labels Mar 4, 2026
Copy link
Member

@Cristhianzl Cristhianzl left a comment

Choose a reason for hiding this comment

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

🔴 CRITICAL: DRY Principle

Check Status
No duplicate logic VIOLATION

Issue found: handlePageInputBlur and handlePageInputKeyDown contain identical validation logic (lines 76-83 and 87-94 in the diff):

// Duplicated block in BOTH handlers:
const value = parseInt(pageInput, 10);
if (!isNaN(value) && value >= 1 && value <= totalPages) {
  setCurrentPage(value);
  setPageInput(String(value));
} else {
  setPageInput(String(currentPage));
}

Recommended fix: Extract to a shared helper:

const commitPageInput = () => {
  const value = parseInt(pageInput, 10);
  if (!isNaN(value) && value >= 1 && value <= totalPages) {
    setCurrentPage(value);
    setPageInput(String(value));
  } else {
    setPageInput(String(currentPage));
  }
};

const handlePageInputBlur = () => {
  commitPageInput();
};

const handlePageInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
  if (e.key === "Enter") {
    commitPageInput();
    e.currentTarget.blur();
  }
};

Result: ❌ FAIL — Must fix before merge

🟢 TESTING

Check Status
Tests included ❌ No tests in PR
Happy path tests ❌ Missing
Adversarial tests ❌ Missing
Coverage validated ❌ Not run

Missing test scenarios:

  1. Happy path: Type valid page number → press Enter → navigates to page
  2. Happy path: Type valid page number → blur → navigates to page
  3. Edge case: Type 0 → blur → reverts to current page
  4. Edge case: Type number > totalPages → blur → reverts to current page
  5. Edge case: Type non-numeric → blur → reverts to current page
  6. Edge case: Type negative number → blur → reverts to current page
  7. Integration: Pagination buttons keep input in sync

Result: ❌ FAIL — New behavior should have tests

Extract page input validation and commit logic from handlePageInputBlur and handlePageInputKeyDown into a shared commitPageInput function to eliminate code duplication.
@github-actions github-actions bot added bug Something isn't working and removed bug Something isn't working labels Mar 4, 2026
@Cristhianzl Cristhianzl self-requested a review March 4, 2026 18:42
Copy link
Member

@Cristhianzl Cristhianzl left a comment

Choose a reason for hiding this comment

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

lgtm

@github-actions github-actions bot added the lgtm This PR has been approved by a maintainer label Mar 4, 2026
@github-actions github-actions bot added bug Something isn't working and removed bug Something isn't working labels Mar 4, 2026
@deon-sanchez deon-sanchez added this pull request to the merge queue Mar 4, 2026
Merged via the queue into main with commit 335656f Mar 4, 2026
90 of 92 checks passed
@deon-sanchez deon-sanchez deleted the le-480 branch March 4, 2026 19:30
HimavarshaVS pushed a commit that referenced this pull request Mar 10, 2026
* fix: improve knowledge base UI consistency and pagination handling

- Change quote style from double to single quotes throughout knowledge base components
- Update "Hide Sources" button label to "Hide Configuration" for clarity
- Restructure SourceChunksPage layout to use xl:container for consistent spacing
- Add controlled page input state with validation on blur and Enter key
- Synchronize page input field with pagination controls to prevent state drift
- Reset page input to "1" when changing page

* refactor: extract page input commit logic into reusable function

Extract page input validation and commit logic from handlePageInputBlur and handlePageInputKeyDown into a shared commitPageInput function to eliminate code duplication.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working lgtm This PR has been approved by a maintainer

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants