Rithika taking over for Aditya-feat: Phase 2 Interactive list of open issues for BM Dashboard (integrates #3683)

[Aditya-gam]

Description

This PR implements Phase 2: Create an interactive list of open issues for the BM Dashboard. It adds a filterable, paginated table of open issues with tag, date range, and project filters, and row actions (Rename, Delete, Close Issue). The list is integrated into the Weekly Project Summary under the "Issue Tracking" section and uses the backend open-issues API with filter support. It also integrates feedback and resolves conflicts from PR #3683.

Related PRs (if any):

• Previous PR Pair: PR 3683 + PR 1482
• Backend PR: PR #2032

Main changes explained:

Created/Updated Files:

• src/components/BMDashboard/Issues/IssuesList.jsx

  • New React component that fetches and displays open issues in a table.
  • Columns: Issue Name, Tag (clickable), Open Since (days), Cost (USD), Person (name + role), Action (Options dropdown).
  • Tag filtering: Clicking a tag filters the table to that tag; toggle again to clear. The reset button clears the tag, date, and project filters.
  • Filters: Date range picker (react-datepicker, range) and multi-select Projects (react-select) above the table. Filters are sent to the API (projectIds, startDate, endDate, tag).
  • Action dropdown: Options → Rename (inline edit + submit), Delete (with confirmation modal), Close Issue (PATCH status: 'closed'). Uses Bootstrap Dropdown and a custom modal for deletion.
  • API usage: ENDPOINTS.BM_GET_ISSUE_PROJECTS, ENDPOINTS.BM_GET_OPEN_ISSUES(projectIds, startDate, endDate, tag), ENDPOINTS.BM_ISSUE_UPDATE(id) for PATCH (rename/close) and DELETE.
  • UX: Loading spinner, empty state message (contextual when filters applied vs no issues), toast notifications (react-toastify) for success/error, validation for empty rename, graceful handling of missing person/tag (Unassigned, No tag). Open Since computed from issueDate (days). Pagination (5 per page) with first/last page buttons and page number group.
  • Helpers: isValidIssue, formatDateForAPI, getErrorMessage; JSDoc on component and helpers. Redux theme selector for dark mode.

• src/components/BMDashboard/Issues/IssuesList.css

  • Styles for table, header, cells, tag buttons, dropdown toggle/menu, rename input, filter row, datepicker wrapper, and pagination.
  • Full dark theme support: .dark-theme for container, table, thead/tbody, dropdown, datepicker, react-select (custom-select), and react-datepicker calendar (.dark-theme-calendar).
  • Responsive layout for filters and table on small screens (e.g., column stacking, full-width buttons).
  • Modal backdrop and dialog for delete confirmation.

• src/utils/URL.js

  • New endpoints: BM_GET_OPEN_ISSUES(projectIds, startDate, endDate, tag) → GET /api/bm/issues/open?projectIds=...&startDate=...&endDate=...&tag=... (params only added when provided).
  • BM_GET_ISSUE_PROJECTS → GET /api/bm/issues/projects.
  • BM_ISSUE_UPDATE(issueId) → base for PATCH /api/bm/issues/:issueId and DELETE /api/bm/issues/:issueId.

• src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx

  • Import IssueList from ../Issues/IssuesList.
  • Under "Issue Tracking" tab: render <IssueList /> in the first card and <IssueCharts /> in a second card (unchanged chart component), so the interactive list appears above the charts.

• src/reducers/bmdashboard/issueReducer.js

  • Exported reducer as named export: const issueReducer → export const issueReducer (for consistency with store usage).

• src/reducers/index.js

  • Reordered bmIssues: issueReducer in localReducers (no functional change; aligns with other reducer ordering).

• src/components/TeamLocations/TeamLocations.jsx, src/components/TeamLocations/TestSafeMarkerCluster.jsx, src/components/__tests__/TagsSearch.test.jsx

  • Minor updates (e.g., lint/test fixes or safe defaults); not core to the issues list feature.

Key Implementation Details:

• Backend-driven filtering: All filtering (date range, projects, tag) is done via query params on GET /api/bm/issues/open. The frontend does not filter the response array; it refetches when filters change and resets to page 1.
• Date handling: Dates sent as YYYY-MM-DD via date.toISOString().split('T')[0]. "Open Since" is computed client-side from issue.issueDate as integer days.
• Rename payload: Backend expects issueTitle as an array; PATCH body is { issueTitle: [trimmedName] }.
• Close issue: PATCH with { status: 'closed' }; list refetches so closed issues disappear.
• Delete: DELETE to BM_ISSUE_UPDATE(id); confirmation modal before calling API; toasts and refetch on success/error.
• Data shape: Expects API to return issues with _id, issueTitle (array), tag, issueDate, cost, person (e.g., { name, role }). Invalid or missing issueTitle entries are filtered out via isValidIssue.
• Theme: darkMode from Redux state.theme.darkMode; applied to container and passed to DatePicker/Select/table/dropdown/modal via class names and CSS.

How to test:

1. Check out the current branch: fix/Create_an_interactive_list_of_open_issues
2. Reinstall dependencies and clear cache: rm -rf node_modules && yarn cache clean
3. Run yarn install and start the app: yarn start:local
4. Ensure backend is running and exposes BM issue endpoints (e.g., REACT_APP_APIENDPOINT in .env pointing to API base URL)
5. Start the app: npm run start:local (or npm start for frontend)
6. Navigate: Log in with BM Dashboard access → go to Weekly Project Summary → open the "Issue Tracking" tab. The "A List of Issues" table should appear above the issue charts.
7. Table and filters:
   • Confirm columns: Issue Name, Tag, Open Since (days), Cost (USD), Person, Action.
   • Date range: Use "Filter by Date Range" to pick start/end; table should refetch and show only issues whose projects are ongoing in that range (per backend). Use the ✕ next to the date field to clear.
   • Projects: Use "Filter by Projects" (multi-select); table should refetch and show only issues for selected projects.
   • Reset: Click "Reset" and confirm that tag, date, and project filters are clear and list refetches.
8. Tag filter: Click a tag (e.g., "Virtual" or "In-person") in the Tag column; the table should show only issues with that tag. Click the same tag again (or Reset) to clear.
9. Actions:
   • Rename: Options → Rename → edit name in place → Submit. Expect success toast and updated name; empty name should show error toast.
   • Delete: Options → Delete → confirm in modal → Delete. Expect success toast and row removed; cancel should close the modal without deleting.
   • Close Issue: Options → Close. Expect success, toast, and row removed from the list (closed issues no longer returned as open).
10. Pagination: If more than 5 issues, use « / » and page numbers; verify correct slice of issues and that filters still apply to the full set.
11. Dark mode: Toggle app dark mode; verify table, filters, dropdown, datepicker, and modal have readable contrast and match provided dark theme screenshots.
12. Edge cases: Empty list (no open issues) shows "No Open Issues Found" with contextual message; list with filters but no matches suggests adjusting filters. Issues with missing persons show "Unassigned"; missing tag shows "No tag". Loading state shows a spinner during fetch.

API examples (for manual/backend checks):

• Get open issues (no filters): GET /api/bm/issues/open
• With filters: GET /api/bm/issues/open?projectIds=id1,id2&startDate=2024-01-01&endDate=2024-12-31&tag=Virtual
• Get projects: GET /api/bm/issues/projects
• Update issue: PATCH /api/bm/issues/:issueId body { issueTitle: ["New Name"] } or { status: "closed" }
• Delete: DELETE /api/bm/issues/:issueId

Screenshots or videos of changes:

• Light mode:

• Dark mode:

• Test Video:

TestVideo.mov

Note:

• Performance Considerations: One fetch per filter change; list is client-paginated (5 items per page) from the current response. Large result sets remain limited by backend pagination if implemented.
• Validation: Rename blocks empty submission with toast; API errors surfaced via toast and inline error banner; invalid/missing issue titles filtered out before display.
• Dependencies: Uses existing stack (React Bootstrap, react-datepicker, react-select, react-toastify, axios); no new package added in this PR (yarn.lock churn is from merge/version resolution).

[HemanthNidamanuru]

Hi Aditya,

In the project filter dropdown, selected projects are not displaying their full names. Only partial or single-character labels are visible instead of the complete project name. Please review the selected value rendering logic to ensure full project names are displayed correctly in the filter UI.

[Anusha-Gali]

Hi Aditya,

I have reviewed your PR locally and though all the functionalities work as per requirement, few UI issues persist.

• The calendar is in dark mode when the application is in light mode
• The option selected in filter by project is not visible in large screen sizes
• In smaller screen sizes, the cross icon for unselecting the dates is expanded and attached to the projects dropdown

Issues

Working screenshots

[Aditya-gam]

Hi Aditya,

I have reviewed your PR locally and though all the functionalities work as per requirement, few UI issues persist.

• The calendar is in dark mode when the application is in light mode
• The option selected in filter by project is not visible in large screen sizes
• In smaller screen sizes, the cross icon for unselecting the dates is expanded and attached to the projects dropdown

Issues

Working screenshots

Hi Anusha,
Thank you for your review. I have fixed the issues you raised. Please check if I got them all.

Screen.Recording.2026-02-27.at.7.40.21.PM.mov

[Aditya-gam]

Hi Aditya,

In the project filter dropdown, selected projects are not displaying their full names. Only partial or single-character labels are visible instead of the complete project name. Please review the selected value rendering logic to ensure full project names are displayed correctly in the filter UI.

Hi Hemanth,

Thank you for the review. I fixed the issue. Check it out.

Screen.Recording.2026-02-27.at.7.43.11.PM.mov

[sonarqubecloud]

Quality Gate passed

Issues
10 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[Anusha-Gali]

Hi Aditya,

Thank you working on the issue, they appear to be fixed. However i did notice that the UI got disturbed as i suppose the card layout expanded, since the functionality is as per requirement in smaller screens.

• The dropdown options are not visible unless scrolled
• The submit button is constricted even though there is open space due to the card layout
• The filters have a lot of gap between them but i would leave the UI decision upto you.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud