Skip to content

858: Added daterange popover - #845

Merged
az2924 merged 2 commits into
mainfrom
858
Mar 24, 2026
Merged

858: Added daterange popover#845
az2924 merged 2 commits into
mainfrom
858

Conversation

@az2924

@az2924 az2924 commented Mar 8, 2026

Copy link
Copy Markdown
Contributor

858

Description of changes

  • Added better indicator that date range is enabled on Filter button

Checklist before review

  • I have done a thorough self-review of the PR
  • Copilot has reviewed my latest changes, and all comments have been fixed and/or closed.
  • If I have made database changes, I have made sure I followed all the db repo rules listed in the wiki here. (check if no db changes)
  • All tests have passed
  • I have successfully deployed this PR to staging
  • I have done manual QA in both dev (and staging if possible) and attached screenshots below.

Screenshots

Dev

Screenshot 2026-03-15 at 6 01 04 PM Screenshot 2026-03-15 at 6 01 20 PM

Staging

Screenshot 2026-03-22 at 8 39 50 PM Screenshot 2026-03-13 at 1 28 06 AM

@az2924

az2924 commented Mar 8, 2026

Copy link
Copy Markdown
Contributor Author

/staging

@github-actions

github-actions Bot commented Mar 8, 2026

Copy link
Copy Markdown
Contributor

Available PR Commands

  • /ai - Triggers all AI review commands at once
  • /review - AI review of the PR changes
  • /describe - AI-powered description of the PR
  • /improve - AI-powered suggestions
  • /deploy - Deploy to staging

See: https://github.com/tahminator/codebloom/wiki/CI-Commands

@github-actions

github-actions Bot commented Mar 8, 2026

Copy link
Copy Markdown
Contributor

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 PR contains tests
🔒 No security concerns identified
⚡ Recommended focus areas for review

Date Range Label

The dateRangeLabel uses "now" as a placeholder if either startDate or endDate is undefined while the other is present. For example, if only endDate is set, it will display "Viewing submissions from now to [endDate]". Verify if this specific wording ("now") is the desired behavior for partial date ranges, or if a different phrasing would be more intuitive for users.

const dateRangeLabel =
  (startDate || endDate) &&
  `Viewing submissions from ${startDate ? d(startDate).format("MMM D, YYYY") : "now"} to ${endDate ? d(endDate).format("MMM D, YYYY") : "now"}`;
Mobile UX

On mobile, the clock icon is displayed without a tooltip, unlike the desktop version. Confirm if this is the intended user experience for mobile, or if there should be a different way to convey the active date range information to the user on smaller screens.

{dateRangeLabel && (
  <Flex
    pos="absolute"
    bg="teal.7"
    w={22}
    h={22}
    top={-8}
    right={-8}
    bd="2px solid var(--mantine-color-dark-7)"
    align="center"
    justify="center"
    style={{ borderRadius: "50%", pointerEvents: "none" }}
    data-testid="date-range-clock-icon-mobile"
  >
    <IconClock size={13} color="white" stroke={2.5} />
  </Flex>
)}

@az2924
az2924 force-pushed the 858 branch 2 times, most recently from bb9b9b3 to 40cd8ff Compare March 9, 2026 21:26
@az2924

az2924 commented Mar 9, 2026

Copy link
Copy Markdown
Contributor Author

/deploy

@az2924
az2924 force-pushed the 858 branch 2 times, most recently from e3ff6c0 to ad85664 Compare March 13, 2026 04:50
@az2924

az2924 commented Mar 13, 2026

Copy link
Copy Markdown
Contributor Author

/deploy

1 similar comment
@az2924

az2924 commented Mar 13, 2026

Copy link
Copy Markdown
Contributor Author

/deploy

@az2924
az2924 force-pushed the 858 branch 2 times, most recently from 78a7c1b to 0810fb7 Compare March 15, 2026 17:39
@az2924

az2924 commented Mar 15, 2026

Copy link
Copy Markdown
Contributor Author

/deploy

@github-actions

Copy link
Copy Markdown
Contributor

Title

858: Added daterange popover


PR Type

Enhancement


Description

  • Adds visual indicator for active date filters.

  • Displays formatted date range in tooltip.

  • Integrates indicator into user submissions page.

  • Extends tests for date range indicator visibility.


Diagram Walkthrough

flowchart LR
  UserSubmissions.tsx -- "Uses" --> DateRangeIndicator.tsx
  UserSubmissions.tsx -- "Provides dates from" --> DateRangePopover.tsx
  DateRangeIndicator.tsx -- "Displays status of" --> DateRangePopover.tsx
Loading

File Walkthrough

Relevant files
Enhancement
DateRangeIndicator.tsx
New Date Range Filter Indicator Component                               

js/src/app/user/[userId]/submissions/_components/UserSubmissions/DateRangeIndicator.tsx

  • Introduced DateRangeIndicator component to visually signal active date
    filters.
  • Displays a clock icon with a green background when startDate or
    endDate are present.
  • Formats the selected date range for display within a tooltip.
  • Adjusts pointer events for mobile viewports to prevent tooltip
    interaction.
+70/-0   
UserSubmissions.tsx
Integrate Date Range Indicator into User Submissions         

js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx

  • Integrated the new DateRangeIndicator component into the
    UserSubmissions page.
  • Refactored the FilterDropdown logic into a filterDropdown constant for
    reusability.
  • Positioned the DateRangeIndicator alongside the FilterDropdown for
    both desktop and mobile layouts.
  • Ensured the indicator receives startDate and endDate from the
    useUserSubmissionsQuery hook.
+33/-50 
Tests
UserSubmissions.test.tsx
Update User Submissions Tests for Date Range Indicator     

js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.test.tsx

  • Mocked useUserSubmissionsQuery to control startDate and endDate values
    for testing.
  • Added new test cases to verify the conditional rendering of
    DateRangeIndicator.
  • Ensured DateRangeIndicator renders correctly when startDate, endDate,
    or both are set.
  • Confirmed DateRangeIndicator does not render when no date range is
    active.
+79/-1   

@github-actions

Copy link
Copy Markdown
Contributor

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis ✅

Add-better-indicator-that-date-range-is-enabled-31d7c85563aa80089b3ecf52a426288b - PR Code Verified

Compliant requirements:

  • Add a better indicator that a date range is enabled.
  • The indicator should show when a date range is active.
  • The indicator should display the selected date range.
  • The indicator should be visually distinct.
  • The indicator should be positioned appropriately.
  • Handle mobile and desktop layouts for the indicator.
  • Ensure proper test coverage for the indicator's behavior.

Requires further human verification:

  • Visual verification of the indicator's appearance and positioning on both desktop and mobile.
  • Functional verification of the tooltip on desktop.
  • Functional verification that the indicator appears/disappears correctly when date ranges are set/cleared.
⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 PR contains tests
🔒 No security concerns identified
⚡ Recommended focus areas for review

Styling/Positioning

The DateRangeIndicator uses position: absolute with negative top and right values. While this achieves the desired overlay effect, it's important to ensure it doesn't cause layout shifts or overlap with other elements, especially if the parent FilterDropdown's size or position changes, or if the FilterDropdown is placed in different contexts.

pos="absolute"
top={-8}
right={-8}
bg="green.8"
Accessibility

For the mobile version, the pointerEvents: "none" on the icon means it's not interactive and the tooltip is not present. Ensure that users relying on assistive technologies can still understand that a filter is active and what the filter is, even if they can't interact with the icon directly on mobile. An aria-label on the icon might be beneficial for mobile.

border: "2px solid white",

@github-actions

Copy link
Copy Markdown
Contributor

Title

858: Added daterange popover


PR Type

Enhancement


Description

  • Implement DateRangeIndicator component.

  • Display active date filters on user submissions.

  • Integrate indicator with FilterDropdown.

  • Update tests for date range visibility.


Diagram Walkthrough

flowchart LR
  UserSubmissions["UserSubmissions Component"] --> FilterDropdown["FilterDropdown Component"];
  UserSubmissions --> DateRangeIndicator["DateRangeIndicator Component"];
  FilterDropdown --> DateRangePopover["DateRangePopover Component"];
  DateRangeIndicator -- "Displays active range" --> UserSubmissions;
  UserSubmissions -- "startDate, endDate" --> DateRangeIndicator;
  UserSubmissions -- "startDate, endDate, setStartDate, setEndDate" --> DateRangePopover;
Loading

File Walkthrough

Relevant files
Enhancement
DateRangeIndicator.tsx
New component for displaying active date range filter       

js/src/app/user/[userId]/submissions/_components/UserSubmissions/DateRangeIndicator.tsx

  • Introduced a new DateRangeIndicator component to visually represent
    active date filters.
  • Formats and displays the selected startDate and endDate as a
    human-readable string.
  • Renders an IconClock with a green background, positioned absolutely,
    with a Tooltip on desktop.
  • Uses useMediaQuery to adjust behavior for mobile devices, disabling
    pointerEvents for the icon.
+70/-0   
Tests
UserSubmissions.test.tsx
Update tests for DateRangeIndicator visibility                     

js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.test.tsx

  • Added comprehensive mocking for the useUserSubmissionsQuery hook to
    control test data.
  • Introduced BASE_QUERY_RESULT to standardize mock return values for the
    query hook.
  • Added vi.clearAllMocks() in afterEach to ensure test isolation.
  • Implemented new test cases to verify the conditional rendering of
    DateRangeIndicator based on startDate and endDate values.
+78/-0   
Ui integration
UserSubmissions.tsx
Integrate DateRangeIndicator into UserSubmissions view     

js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx

  • Imported the new DateRangeIndicator component.
  • Integrated DateRangeIndicator into the UserSubmissions component,
    positioning it relative to the FilterDropdown.
  • Passed startDate and endDate from the useUserSubmissionsQuery hook to
    the DateRangeIndicator.
  • Refactored the FilterDropdown and DateRangeIndicator into a
    filterDropdown variable to reduce code duplication for mobile and
    desktop views.
+33/-50 

@github-actions

Copy link
Copy Markdown
Contributor

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

**🎫 Ticket compliance analysis **

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 PR contains tests
🔒 No security concerns identified
⚡ Recommended focus areas for review

Styling Complexity

The DateRangeIndicator component uses a significant number of inline style properties within the style prop of the Box component. While the guidelines allow inline styles for less complicated cases, this particular instance has many properties. Consider if some of these styles could be better managed using Mantine's sx prop for cleaner separation or, if complexity grows, a dedicated .module.css file.

style={{
  zIndex: 10,
  borderRadius: "50%",
  border: "2px solid white",
  pointerEvents: isMobile ? "none" : "auto",
  alignItems: "center",
  justifyContent: "center",
  flexShrink: 0,
}}

@github-actions

Copy link
Copy Markdown
Contributor

Commit Validation Failed

The following commits do not start with the required Notion ID 858:

816: Added markdown file for auto-approval github script

Please rebase and update your commit messages.
All messages should be of the following format: 858: Example commit

@az2924
az2924 force-pushed the 858 branch 2 times, most recently from 3a143e9 to 267e0af Compare March 17, 2026 04:19
@az2924

az2924 commented Mar 17, 2026

Copy link
Copy Markdown
Contributor Author

/deploy

@github-actions

Copy link
Copy Markdown
Contributor

Title

858: Added daterange popover


PR Type

Enhancement


Description

  • Add date range filter indicator.

  • Display active date range in tooltip.

  • Refactor submission filter UI.

  • Update tests with hook mocking.


Diagram Walkthrough

flowchart LR
  UserSubmissions["UserSubmissions Component"] --> FilterDropdown["FilterDropdown (Filters)"]
  FilterDropdown --> DateRangePopover["DateRangePopover (Set Dates)"]
  FilterDropdown -- "displays when active" --> DateRangeIndicator["DateRangeIndicator (Clock Icon)"]
  DateRangeIndicator -- "shows details on hover" --> Tooltip["Tooltip (Formatted Date Range)"]
Loading

File Walkthrough

Relevant files
Enhancement
DateRangeIndicator.tsx
New component for date range filter indication                     

js/src/app/user/[userId]/submissions/_components/UserSubmissions/DateRangeIndicator.tsx

  • Introduces the new DateRangeIndicator React component.
  • Displays a clock icon when a startDate or endDate is active.
  • Formats and displays the active date range in a Tooltip on desktop.
  • Adapts the display for mobile, showing only the icon without a
    tooltip.
+70/-0   
UserSubmissions.tsx
Integrate date range indicator into submissions UI             

js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx

  • Imports and integrates the new DateRangeIndicator component.
  • Refactors the FilterDropdown rendering logic into a reusable constant.
  • Positions the DateRangeIndicator within the filter dropdown for both
    mobile and desktop views.
+33/-50 
Tests
UserSubmissions.test.tsx
Update submission tests with hook mocking and indicator tests

js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.test.tsx

  • Mocks the useUserSubmissionsQuery hook for isolated component testing.
  • Adds new test cases to verify the DateRangeIndicator's visibility
    based on startDate and endDate props.
  • Updates existing tests to use the mocked query hook instead of direct
    API handlers.
  • Clears all mocks after each test to ensure a clean testing
    environment.
+102/-15

@github-actions

Copy link
Copy Markdown
Contributor

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis ✅

Add-better-indicator-that-date-range-is-enabled-31d7c85563aa80089b3ecf52a426288b - PR Code Verified

Compliant requirements:

  • Add a better indicator that a date range filter is enabled.
  • The indicator is visible when a date range is applied.
  • The indicator shows the selected date range via tooltip.
  • The indicator is integrated with the existing filter dropdown.
  • The indicator handles mobile responsiveness.

Requires further human verification:

  • Visually verify the indicator's position and appearance on both desktop and mobile.
  • Verify tooltip functionality on desktop.
  • Verify that the indicator correctly appears/disappears when a date range is applied/cleared.
⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 PR contains tests
🔒 No security concerns identified
⚡ Recommended focus areas for review

Minor Redundancy

The DateRangeIndicator function signature uses Readonly<DateRangeIndicatorProps>. Since the DateRangeIndicatorProps interface already defines its properties as readonly, the Readonly utility type here is redundant. It's a minor stylistic point.

export default function DateRangeIndicator({
  startDate,
  endDate,
}: Readonly<DateRangeIndicatorProps>) {

@az2924

az2924 commented Mar 17, 2026

Copy link
Copy Markdown
Contributor Author

/deploy

@az2924

az2924 commented Mar 17, 2026

Copy link
Copy Markdown
Contributor Author

/deploy

@github-actions

Copy link
Copy Markdown
Contributor

Title

858: Added daterange popover


PR Type

Enhancement


Description

  • Adds DateRangeIndicator component.

  • Displays active date filter status visually.

  • Integrates indicator into user submissions page.

  • Updates tests for date range indicator rendering.


File Walkthrough

Relevant files
Enhancement
DateRangeIndicator.tsx
Adds a visual indicator for active date range filters       

js/src/app/user/[userId]/submissions/_components/UserSubmissions/DateRangeIndicator.tsx

  • Introduces a new DateRangeIndicator React component.
  • Displays a clock icon with a tooltip showing the active date range.
  • Formats startDate and endDate into a human-readable string for the
    tooltip.
  • Conditionally renders the indicator only when a date range is active.
+66/-0   
UserSubmissions.tsx
Integrates `DateRangeIndicator` and refactors filter dropdown

js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx

  • Imports and integrates the new DateRangeIndicator component.
  • Refactors the filter dropdown rendering logic into a reusable
    filterDropdown JSX variable.
  • Ensures the DateRangeIndicator is displayed alongside the filter
    dropdown for both desktop and mobile views.
+33/-50 
Tests
UserSubmissions.test.tsx
Enhances UserSubmissions tests for date range indicator and query
mocking

js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.test.tsx

  • Implements mocking for useUserSubmissionsQuery to isolate component
    tests.
  • Adds new test cases to verify the DateRangeIndicator's visibility
    based on various date range filter states.
  • Refactors existing test blocks to utilize the mocked
    useUserSubmissionsQuery for consistent test data.
+102/-15

@github-actions

Copy link
Copy Markdown
Contributor

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis ✅

Add-better-indicator-that-date-range-is-enabled-31d7c85563aa80089b3ecf52a426288b - PR Code Verified

Compliant requirements:

  • Add a better indicator that a date range is enabled.
  • The indicator should be visible when a date range filter is active.
  • The indicator should provide details about the active date range.
  • The implementation should be consistent across desktop and mobile.

Requires further human verification:

  • Manual QA in dev/staging.
  • Visual check of the indicator's positioning and appearance on different screen sizes and with various date ranges.
⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 PR contains tests
🔒 No security concerns identified
⚡ Recommended focus areas for review

Visual Overlap

The DateRangeIndicator uses absolute positioning (pos="absolute", top={-8}, right={-8}) and zIndex: 10. While this creates the desired overlay effect, it's important to verify through manual QA that it doesn't visually overlap or get clipped by other elements in various scenarios, such as when the filter dropdown is open, on different screen sizes, or with long filter button names.

pos="absolute"
top={-8}
right={-8}
bg="green.8"
c="white"
w={22}
h={22}
display="flex"
style={{
  zIndex: 10,
  borderRadius: "50%",
  border: "2px solid white",
  alignItems: "center",
  justifyContent: "center",
  flexShrink: 0,
}}

@github-actions

Copy link
Copy Markdown
Contributor

PR Description Required

Please fill out the Description of changes section of the PR.

@github-actions

Copy link
Copy Markdown
Contributor

Commit Validation Failed

The following commits do not start with the required Notion ID 858:

876: Added optional to all of the nullable function returns in POTDRe…
876: Replaced Optional POTD retrieval with value or throw statement
838: add metrics api endpoint in UserController
868: Added Validation to fill out descriptions in Pr
868 : Pr changes
875: Migrate QuestionBank/QuestionBankRepository
875: Pr changes
870: get rid of cluttering logs
823: replace timer() with Timed
823: replace with LeetcodeClientException
861: Swap toggle button and text

Please rebase and update your commit messages.
All messages should be of the following format: 858: Example commit

az2924 added 2 commits March 22, 2026 20:12
858: Redid tests

858: Resolved warnings

858: Resolved tests
@az2924

az2924 commented Mar 23, 2026

Copy link
Copy Markdown
Contributor Author

/deploy

@github-actions

Copy link
Copy Markdown
Contributor

PR Description Required

Please fill out the Description of changes section of the PR.

@github-actions

Copy link
Copy Markdown
Contributor

Title

858: Added daterange popover


PR Type

Enhancement


Description

  • Implement DateRangeIndicator component.

  • Display active date range on filter button.

  • Enhance UserSubmissions component tests.


Diagram Walkthrough

flowchart LR
  UserSubmissions["UserSubmissions.tsx"] --> FilterDropdown["FilterDropdown (UI)"]
  FilterDropdown -- "contains" --> DateRangePopover["DateRangePopover (Logic)"]
  DateRangePopover -- "updates date state" --> UserSubmissions
  UserSubmissions -- "passes date state" --> DateRangeIndicator["DateRangeIndicator (UI)"]
Loading

File Walkthrough

Relevant files
New feature
DateRangeIndicator.tsx
New component for displaying active date range                     

js/src/app/user/[userId]/submissions/_components/UserSubmissions/DateRangeIndicator.tsx

  • Introduces a new React component DateRangeIndicator to visually
    represent active date filters.
  • Displays a clock icon with a tooltip showing the formatted start
    and/or end dates.
  • Renders only when a startDate or endDate is provided.
  • Includes a helper function formatDateRange for consistent date
    formatting.
+66/-0   
Tests
UserSubmissions.test.tsx
Refactor and add tests for date range indicator                   

js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.test.tsx

  • Refactors tests to mock useUserSubmissionsQuery for better control
    over data.
  • Adds new test cases to verify the conditional rendering of
    DateRangeIndicator.
  • Updates existing tests to use the new mocking strategy for
    UserSubmissions data.
  • Removes an unused API handler for empty submissions.
+102/-15
Ui integration
UserSubmissions.tsx
Integrate date range indicator into submissions UI             

js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx

  • Integrates the new DateRangeIndicator component next to the
    FilterDropdown.
  • Wraps the FilterDropdown and DateRangeIndicator in a Box for proper
    positioning.
  • Passes startDate and endDate from the query hook to the
    DateRangeIndicator.
  • Consolidates filter dropdown rendering logic into a single
    filterDropdown variable for both mobile and desktop views.
+33/-50 

@github-actions

Copy link
Copy Markdown
Contributor

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

**🎫 Ticket compliance analysis **

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪
🧪 PR contains tests
🔒 No security concerns identified
⚡ No major issues detected

@az2924
az2924 dismissed tahminator’s stale review March 24, 2026 21:16

All comments have been addressed

@az2924
az2924 merged commit 973042d into main Mar 24, 2026
35 of 36 checks passed
@az2924
az2924 deleted the 858 branch March 24, 2026 21:16
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.

3 participants