feat: [DHIS2-18250] Breadcrumb for event & enrollment pages #3849

eirikhaugstulen · 2024-10-17T16:55:45Z

Tech-summary:
Added two new components that helps the user navigate our app

EnrollmentBreadcrumb (Used on all enrollment pages
- {programStageWorkingListName} / {workingListName} / {TET} list / {Search}
- Enrollment dashboard
- View event (if applicable)
- Edit event (if applicable)
EventBreadcrumb (Old view and edit event pages)
- Event list
- View event
- Edit event (if applicable)

eirikhaugstulen · 2024-10-17T17:06:37Z

...dules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.component.js

@@ -73,6 +76,11 @@ export const EnrollmentEditEventPageComponent = ({
            pageLayout={pageLayout}
            currentPage={mode === EnrollmentPageKeys.EDIT_EVENT ? EnrollmentPageKeys.EDIT_EVENT : EnrollmentPageKeys.VIEW_EVENT}
            availableWidgets={WidgetsForEnrollmentEventEdit}
+            userInteractionInProgress={mode === EnrollmentPageKeys.EDIT_EVENT}


We should probably refactor this at some point, but just following the logic in src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/TopBar.container.js

* fix: use title instead of alt on missing icons * chore: fix failing tests

## [101.12.1](v101.12.0...v101.12.1) (2024-10-16) ### Bug Fixes * [DHIS2-17978] use title instead of alt on missing icons ([#3847](#3847)) ([b5940f2](b5940f2))

…-breadcrumb-navigation-bar # Conflicts: # i18n/en.pot

…t/DHIS2-18250-breadcrumb-navigation-bar # Conflicts: # i18n/en.pot # src/core_modules/capture-core/components/Pages/MainPage/MainPage.component.js

...ore_modules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/EnrollmentBreadcrumb.js

src/core_modules/capture-core/components/Breadcrumbs/EventBreadcrumb/EventBreadcrumb.js

...ore_modules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/EnrollmentBreadcrumb.js

src/core_modules/capture-core/components/Breadcrumbs/EventBreadcrumb/EventBreadcrumb.js

...odules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/hooks/useWorkingListLabel.js

...ore_modules/capture-core/components/Breadcrumbs/EventBreadcrumb/hooks/useWorkingListLabel.js

...ore_modules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/EnrollmentBreadcrumb.js

henrikmv · 2024-11-04T10:08:05Z

...ore_modules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/EnrollmentBreadcrumb.js

+            selected: page === EnrollmentPageKeys.NEW_EVENT,
+            condition: page === EnrollmentPageKeys.NEW_EVENT,
+        },
+    ].filter(item => item.condition !== false)), [


I think condition is a boolean, and then we can simplify this

Suggested change

].filter(item => item.condition !== false)), [

].filter(item => item.condition)

Makes sense! Good catch!

src/core_modules/capture-core/components/Breadcrumbs/common/BreadcrumbItem.js

eirikhaugstulen · 2024-11-04T19:05:27Z

Thanks for the review @simonadomnisoru & @henrikmv! Should be sorted now 🚀

simonadomnisoru

Thanks for the review @simonadomnisoru & @henrikmv! Should be sorted now 🚀

Looks great now 👏 !

henrikmv · 2024-11-06T06:22:45Z

...re-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.container.js

@@ -9,29 +9,25 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { useTimeZoneConversion } from '@dhis2/app-runtime';
 import {
-    useCommonEnrollmentDomainData,
-    useRuleEffects,
+    commitEnrollmentAndEvents,


NIT: not your change, but can we remove the // $FlowFixMe on line 7 in this file?

henrikmv · 2024-11-06T07:49:52Z

...odules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/hooks/useWorkingListLabel.js

+    const workingListTemplates = useSelector(({ workingListsTemplates }) => workingListsTemplates?.teiList);
+    const workingListProgramId = useSelector(({ workingListsContext }) => workingListsContext?.teiList?.programIdView);


For me it looks like the two useSelector calls are rendered 10 times each whenever navigating to the dashboard for a TEI. Should this behavior be optimized?"

It looks like workingListProgramId triggers one render and workingListTemplates triggers two. (One of each is batched, so they should only really trigger one rerender. Did you have any other experience, @henrikmv? Remember, if you want to see it the value triggers a rerender, you will have to wrap the console.log inside a useEffect.

…-breadcrumb-navigation-bar

eirikhaugstulen · 2024-11-06T12:53:02Z

Thanks @henrikmv! Moving the issue to testing for now, but we can still continue discussing the rest of the comments 😊

github-actions · 2024-11-06T12:54:57Z

🚀 Deployed on https://deploy-preview-3849.capture.netlify.dhis2.org

…t/DHIS2-18250-breadcrumb-navigation-bar # Conflicts: # i18n/en.pot

geethaalwan

Tested successfully on 2.42,2.41.3,2.40.6,2.39.8 versions

# [101.16.0](v101.15.0...v101.16.0) (2024-11-13) ### Features * [DHIS2-18250] Breadcrumb for event & enrollment pages ([#3849](#3849)) ([d65882e](d65882e))

dhis2-bot · 2024-11-13T11:22:33Z

🎉 This PR is included in version 101.16.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

eirikhaugstulen commented Oct 17, 2024

View reviewed changes

eirikhaugstulen and others added 4 commits October 17, 2024 19:30

feat: breadcrumb for event and enrollment pages

8daf8ac

fix: [DHIS2-17978] use title instead of alt on missing icons (#3847)

c901a17

* fix: use title instead of alt on missing icons * chore: fix failing tests

chore(release): cut 101.12.1 [skip release]

2dd56fa

## [101.12.1](v101.12.0...v101.12.1) (2024-10-16) ### Bug Fixes * [DHIS2-17978] use title instead of alt on missing icons ([#3847](#3847)) ([b5940f2](b5940f2))

chore: self-review

fe1a7b1

eirikhaugstulen force-pushed the eh/feat/DHIS2-18250-breadcrumb-navigation-bar branch from b90f061 to fe1a7b1 Compare October 17, 2024 17:32

eirikhaugstulen added 4 commits October 17, 2024 19:33

Merge remote-tracking branch 'origin/master' into eh/feat/DHIS2-18250…

d54261e

…-breadcrumb-navigation-bar # Conflicts: # i18n/en.pot

chore: fix breaking tests

dc7ce47

Merge remote-tracking branch 'refs/remotes/origin/master' into eh/fea…

3fa656d

…t/DHIS2-18250-breadcrumb-navigation-bar # Conflicts: # i18n/en.pot # src/core_modules/capture-core/components/Pages/MainPage/MainPage.component.js

chore: flow

1a5954a

eirikhaugstulen added the e2e-tests label Oct 29, 2024

eirikhaugstulen marked this pull request as ready for review October 29, 2024 22:52

eirikhaugstulen requested a review from a team as a code owner October 29, 2024 22:52

eirikhaugstulen added 2 commits October 30, 2024 12:37

fix: revert removal of back button

5869fef

chore: comment out breaking test

d9d9977

eirikhaugstulen added e2e-tests and removed e2e-tests labels Oct 30, 2024

simonadomnisoru reviewed Nov 4, 2024

View reviewed changes

henrikmv reviewed Nov 4, 2024

View reviewed changes

fix: refine label logic

1787221

simonadomnisoru approved these changes Nov 5, 2024

View reviewed changes

henrikmv reviewed Nov 6, 2024

View reviewed changes

eirikhaugstulen added 2 commits November 6, 2024 11:42

Merge remote-tracking branch 'origin/master' into eh/feat/DHIS2-18250…

df37fd8

…-breadcrumb-navigation-bar

fix: remove FlowFixMe

c474907

eirikhaugstulen added testing and removed e2e-tests labels Nov 6, 2024

henrikmv approved these changes Nov 6, 2024

View reviewed changes

Merge remote-tracking branch 'refs/remotes/origin/master' into eh/fea…

5ed52f4

…t/DHIS2-18250-breadcrumb-navigation-bar # Conflicts: # i18n/en.pot

eirikhaugstulen added testing and removed testing labels Nov 12, 2024

geethaalwan approved these changes Nov 13, 2024

View reviewed changes

eirikhaugstulen merged commit d65882e into master Nov 13, 2024
35 of 40 checks passed

eirikhaugstulen deleted the eh/feat/DHIS2-18250-breadcrumb-navigation-bar branch November 13, 2024 11:18

dhis2-bot added a commit that referenced this pull request Nov 13, 2024

chore(release): cut 101.16.0 [skip release]

6d5b876

# [101.16.0](v101.15.0...v101.16.0) (2024-11-13) ### Features * [DHIS2-18250] Breadcrumb for event & enrollment pages ([#3849](#3849)) ([d65882e](d65882e))

dhis2-bot added the released label Nov 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: [DHIS2-18250] Breadcrumb for event & enrollment pages #3849

feat: [DHIS2-18250] Breadcrumb for event & enrollment pages #3849

eirikhaugstulen commented Oct 17, 2024 •

edited

Loading

eirikhaugstulen Oct 17, 2024

henrikmv Nov 4, 2024

eirikhaugstulen Nov 4, 2024

eirikhaugstulen commented Nov 4, 2024

simonadomnisoru left a comment

henrikmv Nov 6, 2024

henrikmv Nov 6, 2024

eirikhaugstulen Nov 6, 2024

eirikhaugstulen commented Nov 6, 2024

github-actions bot commented Nov 6, 2024 •

edited

Loading

geethaalwan left a comment

dhis2-bot commented Nov 13, 2024

	].filter(item => item.condition !== false)), [
	].filter(item => item.condition)

		const workingListTemplates = useSelector(({ workingListsTemplates }) => workingListsTemplates?.teiList);
		const workingListProgramId = useSelector(({ workingListsContext }) => workingListsContext?.teiList?.programIdView);

feat: [DHIS2-18250] Breadcrumb for event & enrollment pages #3849

feat: [DHIS2-18250] Breadcrumb for event & enrollment pages #3849

Conversation

eirikhaugstulen commented Oct 17, 2024 • edited Loading

eirikhaugstulen Oct 17, 2024

Choose a reason for hiding this comment

henrikmv Nov 4, 2024

Choose a reason for hiding this comment

eirikhaugstulen Nov 4, 2024

Choose a reason for hiding this comment

eirikhaugstulen commented Nov 4, 2024

simonadomnisoru left a comment

Choose a reason for hiding this comment

henrikmv Nov 6, 2024

Choose a reason for hiding this comment

henrikmv Nov 6, 2024

Choose a reason for hiding this comment

eirikhaugstulen Nov 6, 2024

Choose a reason for hiding this comment

eirikhaugstulen commented Nov 6, 2024

github-actions bot commented Nov 6, 2024 • edited Loading

geethaalwan left a comment

Choose a reason for hiding this comment

dhis2-bot commented Nov 13, 2024

eirikhaugstulen commented Oct 17, 2024 •

edited

Loading

github-actions bot commented Nov 6, 2024 •

edited

Loading