Aditya-feat: Phase 2 Interactive list of open issues for BM Dashboard (integrates #3683)#4800
Open
Aditya-gam wants to merge 42 commits intodevelopmentfrom
Open
Aditya-feat: Phase 2 Interactive list of open issues for BM Dashboard (integrates #3683)#4800Aditya-gam wants to merge 42 commits intodevelopmentfrom
Aditya-gam wants to merge 42 commits intodevelopmentfrom
Conversation
…ighestGoodNetworkApp into Vamsi_Krishna_Create_an_interactive_list_of_open_issues
…ighestGoodNetworkApp into Vamsi_Krishna_Create_an_interactive_list_of_open_issues
…ighestGoodNetworkApp into Vamsi_Krishna_Create_an_interactive_list_of_open_issues
…ighestGoodNetworkApp into Vamsi_Krishna_Create_an_interactive_list_of_open_issues
- Add comprehensive validation to filter issues without valid issueTitle - Remove 'Untitled' fallback since validation ensures valid titles - Fixes empty rows appearing in table when filtering by date/project - Resolves reviewer-reported bugs with Untitled entries
- Change from createdDate to issueDate for accurate duration display - Add default value of 0 for cost field to prevent undefined display - Use Date.now() instead of new Date() for better performance - Aligns with backend schema and requirements specification
- Change payload from dot notation to array format for backend compatibility - Add validation to prevent empty issue names - Add trim() to remove whitespace from input - Improve error messages with more context
- Change from full ISO string to date-only format - Matches backend specification and openIssueCharts pattern - Prevents potential timezone-related filtering issues - Improve error message format
- Add conditional rendering to prevent "undefined - undefined" display - Show "Unassigned" when person data is missing - Handle partial person data (name only without role) - Improve UX with proper fallback values
- Conditionally render tag button only when tag exists - Show "No tag" text for issues without tags - Use null instead of empty string for cleaner logic - Prevent empty tag buttons from appearing
- Display informative message when no issues match filters - Provide different messages based on filter state - Follow pattern from openIssueCharts component - Improve user experience when table is empty
- Add loading state management for better UX - Display spinner during data fetching - Clear errors when starting new fetch - Follow pattern from openIssueCharts component
- Add success toasts for rename, delete, and close operations - Add error toasts with descriptive messages - Improve error handling with backend error messages - Follow toast pattern from issueActions
- Add confirmation dialog before deleting issues - Follow modal pattern from IssueDashboard component - Prevent accidental deletions with two-step process - Add styling for both light and dark themes
- Extract isValidIssue helper for issue validation - Extract formatDateForAPI helper for date formatting - Extract getErrorMessage helper for API error handling - Remove redundant 'filtered' useMemo (was just returning mappedIssues unchanged) - Update all references to use mappedIssues directly
- Add component-level documentation explaining purpose and features - Add JSDoc for isValidIssue helper function - Add JSDoc for formatDateForAPI helper function - Add JSDoc for getErrorMessage helper function
- Wrap fetchProjects and fetchIssuesWithFilters in useCallback to prevent unnecessary re-renders - Add proper dependency arrays to useEffect hooks to satisfy exhaustive-deps rule - Replace array index with semantic page number as key for pagination buttons to improve React reconciliation - Simplify DatePicker onChange handler by removing redundant fetchIssuesWithFilters call (handled by useEffect) - Import useCallback hook from React Fixes: - Biome lint exhaustive dependencies warnings - Array index key anti-pattern in pagination - Improves performance through proper memoization
Updated filter components (DatePicker and react-select) and pagination buttons to use darker blue background (#1c2541) with white text (#e0e0e0) in dark mode, matching the Options button styling for better contrast and visual consistency.
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Co-authored-by: Cursor <cursoragent@cursor.com>
Convert IssuesList.css to IssuesList.module.css to comply with CSS module policy that only allows .module.css or index.css files. Updated component to use CSS module imports and converted all class names to camelCase format.
…://github.com/OneCommunityGlobal/HighestGoodNetworkApp into fix/Create_an_interactive_list_of_open_issues
|
Aditya-gam
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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):
Main changes explained:
Created/Updated Files:
src/components/BMDashboard/Issues/IssuesList.jsxprojectIds,startDate,endDate,tag).status: 'closed'). Uses BootstrapDropdownand a custom modal for deletion.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.Unassigned,No tag). Open Since computed fromissueDate(days). Pagination (5 per page) with first/last page buttons and page number group.isValidIssue,formatDateForAPI,getErrorMessage; JSDoc on component and helpers. Redux theme selector for dark mode.src/components/BMDashboard/Issues/IssuesList.css.dark-themefor container, table, thead/tbody, dropdown, datepicker, react-select (custom-select), and react-datepicker calendar (.dark-theme-calendar).src/utils/URL.jsBM_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 forPATCH /api/bm/issues/:issueIdandDELETE /api/bm/issues/:issueId.src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsxIssueListfrom../Issues/IssuesList.<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.jsconst issueReducer→export const issueReducer(for consistency with store usage).src/reducers/index.jsbmIssues: issueReducerinlocalReducers(no functional change; aligns with other reducer ordering).src/components/TeamLocations/TeamLocations.jsx,src/components/TeamLocations/TestSafeMarkerCluster.jsx,src/components/__tests__/TagsSearch.test.jsxKey Implementation Details:
GET /api/bm/issues/open. The frontend does not filter the response array; it refetches when filters change and resets to page 1.YYYY-MM-DDviadate.toISOString().split('T')[0]. "Open Since" is computed client-side fromissue.issueDateas integer days.issueTitleas an array; PATCH body is{ issueTitle: [trimmedName] }.{ status: 'closed' }; list refetches so closed issues disappear.BM_ISSUE_UPDATE(id); confirmation modal before calling API; toasts and refetch on success/error._id,issueTitle(array),tag,issueDate,cost,person(e.g.,{ name, role }). Invalid or missingissueTitleentries are filtered out viaisValidIssue.darkModefrom Reduxstate.theme.darkMode; applied to container and passed to DatePicker/Select/table/dropdown/modal via class names and CSS.How to test:
fix/Create_an_interactive_list_of_open_issuesrm -rf node_modules && yarn cache cleanyarn installand start the app:yarn start:localREACT_APP_APIENDPOINTin.envpointing to API base URL)npm run start:local(ornpm startfor frontend)API examples (for manual/backend checks):
GET /api/bm/issues/openGET /api/bm/issues/open?projectIds=id1,id2&startDate=2024-01-01&endDate=2024-12-31&tag=VirtualGET /api/bm/issues/projectsPATCH /api/bm/issues/:issueIdbody{ issueTitle: ["New Name"] }or{ status: "closed" }DELETE /api/bm/issues/:issueIdScreenshots or videos of changes:
TestVideo.mov
Note: