From a7341f8de1d1cb25d07bdb19f05121c1ddacb9c2 Mon Sep 17 00:00:00 2001 From: Hendrik de Graaf Date: Wed, 1 Nov 2023 11:53:42 +0100 Subject: [PATCH] fix: your- and program-dimensions list lazy loading (#453) * fix: increment based on correct property `pager.page` not `data.page` * fix: ensure scrollbox actually scrolls instead of the container * fix: make scrollbox scrollable without fixed height * fix: ensure `loading` remains `false` when lazy loading additional items * fix: return `fetching` from useProgramDataDimensions for lazy loading * chore: add e2e test for lazy loading your dimensions list * chore: disable redux logger in cypress test runs * chore: tweak your dimensions e2e test details * chore: add e2e test for program dimensions * refactor: apply suggestions from code review Co-authored-by: Martin * fix: ensure variable names matches function argument --------- Co-authored-by: Martin --- .../fixtures/yourDimensionsLazyLoading.json | 1107 +++++++++++++++++ cypress/integration/programDimensions.cy.js | 37 + cypress/integration/yourDimensions.cy.js | 71 +- .../DimensionsList/DimensionsList.js | 5 +- .../MainSidebar/MainSidebar.module.css | 2 + .../useProgramDataDimensions.js | 1 + .../YourDimensionsPanel/useYourDimensions.js | 12 +- src/configureStore.js | 3 +- 8 files changed, 1225 insertions(+), 13 deletions(-) create mode 100644 cypress/fixtures/yourDimensionsLazyLoading.json diff --git a/cypress/fixtures/yourDimensionsLazyLoading.json b/cypress/fixtures/yourDimensionsLazyLoading.json new file mode 100644 index 000000000..6ad643d38 --- /dev/null +++ b/cypress/fixtures/yourDimensionsLazyLoading.json @@ -0,0 +1,1107 @@ +{ + "page_1": { + "pager": { + "page": 1, + "total": 210, + "pageSize": 50, + "nextPage": "page_2", + "pageCount": 5 + }, + "dimensions": [ + { + "name": "Your dimension 1", + "id": "id_1", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 2", + "id": "id_2", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 3", + "id": "id_3", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 4", + "id": "id_4", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 5", + "id": "id_5", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 6", + "id": "id_6", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 7", + "id": "id_7", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 8", + "id": "id_8", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 9", + "id": "id_9", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 10", + "id": "id_10", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 11", + "id": "id_11", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 12", + "id": "id_12", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 13", + "id": "id_13", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 14", + "id": "id_14", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 15", + "id": "id_15", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 16", + "id": "id_16", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 17", + "id": "id_17", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 18", + "id": "id_18", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 19", + "id": "id_19", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 20", + "id": "id_20", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 21", + "id": "id_21", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 22", + "id": "id_22", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 23", + "id": "id_23", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 24", + "id": "id_24", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 25", + "id": "id_25", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 26", + "id": "id_26", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 27", + "id": "id_27", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 28", + "id": "id_28", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 29", + "id": "id_29", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 30", + "id": "id_30", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 31", + "id": "id_31", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 32", + "id": "id_32", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 33", + "id": "id_33", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 34", + "id": "id_34", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 35", + "id": "id_35", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 36", + "id": "id_36", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 37", + "id": "id_37", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 38", + "id": "id_38", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 39", + "id": "id_39", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 40", + "id": "id_40", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 41", + "id": "id_41", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 42", + "id": "id_42", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 43", + "id": "id_43", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 44", + "id": "id_44", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 45", + "id": "id_45", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 46", + "id": "id_46", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 47", + "id": "id_47", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 48", + "id": "id_48", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 49", + "id": "id_49", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 50", + "id": "id_50", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + } + ] + }, + "page_2": { + "pager": { + "page": 2, + "total": 210, + "pageSize": 50, + "nextPage": "page_3", + "pageCount": 5 + }, + "dimensions": [ + { + "name": "Your dimension 51", + "id": "id_51", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 52", + "id": "id_52", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 53", + "id": "id_53", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 54", + "id": "id_54", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 55", + "id": "id_55", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 56", + "id": "id_56", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 57", + "id": "id_57", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 58", + "id": "id_58", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 59", + "id": "id_59", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 60", + "id": "id_60", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 61", + "id": "id_61", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 62", + "id": "id_62", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 63", + "id": "id_63", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 64", + "id": "id_64", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 65", + "id": "id_65", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 66", + "id": "id_66", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 67", + "id": "id_67", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 68", + "id": "id_68", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 69", + "id": "id_69", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 70", + "id": "id_70", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 71", + "id": "id_71", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 72", + "id": "id_72", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 73", + "id": "id_73", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 74", + "id": "id_74", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 75", + "id": "id_75", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 76", + "id": "id_76", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 77", + "id": "id_77", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 78", + "id": "id_78", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 79", + "id": "id_79", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 80", + "id": "id_80", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 81", + "id": "id_81", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 82", + "id": "id_82", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 83", + "id": "id_83", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 84", + "id": "id_84", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 85", + "id": "id_85", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 86", + "id": "id_86", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 87", + "id": "id_87", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 88", + "id": "id_88", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 89", + "id": "id_89", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 90", + "id": "id_90", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 91", + "id": "id_91", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 92", + "id": "id_92", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 93", + "id": "id_93", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 94", + "id": "id_94", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 95", + "id": "id_95", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 96", + "id": "id_96", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 97", + "id": "id_97", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 98", + "id": "id_98", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 99", + "id": "id_99", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 100", + "id": "id_100", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + } + ] + }, + "page_3": { + "pager": { + "page": 3, + "total": 210, + "pageSize": 50, + "nextPage": "page_4", + "pageCount": 5 + }, + "dimensions": [ + { + "name": "Your dimension 101", + "id": "id_101", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 102", + "id": "id_102", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 103", + "id": "id_103", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 104", + "id": "id_104", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 105", + "id": "id_105", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 106", + "id": "id_106", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 107", + "id": "id_107", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 108", + "id": "id_108", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 109", + "id": "id_109", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 110", + "id": "id_110", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 111", + "id": "id_111", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 112", + "id": "id_112", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 113", + "id": "id_113", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 114", + "id": "id_114", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 115", + "id": "id_115", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 116", + "id": "id_116", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 117", + "id": "id_117", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 118", + "id": "id_118", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 119", + "id": "id_119", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 120", + "id": "id_120", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 121", + "id": "id_121", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 122", + "id": "id_122", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 123", + "id": "id_123", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 124", + "id": "id_124", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 125", + "id": "id_125", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 126", + "id": "id_126", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 127", + "id": "id_127", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 128", + "id": "id_128", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 129", + "id": "id_129", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 130", + "id": "id_130", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 131", + "id": "id_131", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 132", + "id": "id_132", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 133", + "id": "id_133", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 134", + "id": "id_134", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 135", + "id": "id_135", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 136", + "id": "id_136", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 137", + "id": "id_137", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 138", + "id": "id_138", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 139", + "id": "id_139", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 140", + "id": "id_140", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 141", + "id": "id_141", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 142", + "id": "id_142", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 143", + "id": "id_143", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 144", + "id": "id_144", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 145", + "id": "id_145", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 146", + "id": "id_146", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 147", + "id": "id_147", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 148", + "id": "id_148", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 149", + "id": "id_149", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 150", + "id": "id_150", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + } + ] + }, + "page_4": { + "pager": { + "page": 4, + "total": 210, + "pageSize": 50, + "nextPage": "page_5", + "pageCount": 5 + }, + "dimensions": [ + { + "name": "Your dimension 151", + "id": "id_151", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 152", + "id": "id_152", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 153", + "id": "id_153", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 154", + "id": "id_154", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 155", + "id": "id_155", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 156", + "id": "id_156", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 157", + "id": "id_157", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 158", + "id": "id_158", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 159", + "id": "id_159", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 160", + "id": "id_160", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 161", + "id": "id_161", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 162", + "id": "id_162", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 163", + "id": "id_163", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 164", + "id": "id_164", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 165", + "id": "id_165", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 166", + "id": "id_166", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 167", + "id": "id_167", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 168", + "id": "id_168", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 169", + "id": "id_169", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 170", + "id": "id_170", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 171", + "id": "id_171", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 172", + "id": "id_172", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 173", + "id": "id_173", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 174", + "id": "id_174", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 175", + "id": "id_175", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 176", + "id": "id_176", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 177", + "id": "id_177", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 178", + "id": "id_178", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 179", + "id": "id_179", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 180", + "id": "id_180", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 181", + "id": "id_181", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 182", + "id": "id_182", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 183", + "id": "id_183", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 184", + "id": "id_184", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 185", + "id": "id_185", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 186", + "id": "id_186", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 187", + "id": "id_187", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 188", + "id": "id_188", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 189", + "id": "id_189", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 190", + "id": "id_190", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 191", + "id": "id_191", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 192", + "id": "id_192", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 193", + "id": "id_193", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 194", + "id": "id_194", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 195", + "id": "id_195", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 196", + "id": "id_196", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 197", + "id": "id_197", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 198", + "id": "id_198", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 199", + "id": "id_199", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 200", + "id": "id_200", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + } + ] + }, + "page_5": { + "pager": { + "page": 5, + "total": 210, + "pageSize": 50, + "nextPage": null, + "pageCount": 5 + }, + "dimensions": [ + { + "name": "Your dimension 201", + "id": "id_201", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 202", + "id": "id_202", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 203", + "id": "id_203", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 204", + "id": "id_204", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 205", + "id": "id_205", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 206", + "id": "id_206", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 207", + "id": "id_207", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 208", + "id": "id_208", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 209", + "id": "id_209", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + }, + { + "name": "Your dimension 210", + "id": "id_210", + "dimensionType": "ORGANISATION_UNIT_GROUP_SET" + } + ] + } +} diff --git a/cypress/integration/programDimensions.cy.js b/cypress/integration/programDimensions.cy.js index a7cc5530b..11725a6b9 100644 --- a/cypress/integration/programDimensions.cy.js +++ b/cypress/integration/programDimensions.cy.js @@ -13,6 +13,7 @@ import { openInputSidebar, openProgramDimensionsSidebar, selectEnrollmentWithProgramDimensions, + selectEventWithProgram, } from '../helpers/dimensions.js' import { expectAxisToHaveDimension } from '../helpers/layout.js' import { goToStartPage } from '../helpers/startScreen.js' @@ -462,6 +463,42 @@ I.e. Scheduled date works like this: }) }) }) + describe('lazy loading', () => { + it('loads more pages when scrolling down until last one is found', () => { + const getList = () => cy.getBySel('program-dimensions-list') + const getListChildren = () => getList().find('div[role="button"]') + const shouldLoadMoreItems = (nextListLength) => { + cy.getBySel('dimensions-list-load-more').should('exist') + // The loader is appended below the "viewport" so we need another scroll + getList().scrollTo('bottom') + cy.getBySel('dimensions-list-load-more').should('be.visible') + getListChildren().should('have.length', nextListLength) + } + + goToStartPage() + selectEventWithProgram({ + programName: + 'Malaria case diagnosis, treatment and investigation', + }) + programDimensionsIsEnabled() + cy.getBySel('program-dimensions-button').click() + + getListChildren().should('have.length', 50) + + // Subsequent pages should be fetched when scrolling down + getList().scrollTo('bottom') + shouldLoadMoreItems(100) + + // This is the last page with only 6 items + getList().scrollTo('bottom') + shouldLoadMoreItems(106) + + // Nothing should happen once the end has been reached + getList().scrollTo('bottom') + cy.getBySel('dimensions-list-load-more').should('not.exist') + getListChildren().should('have.length', 106) + }) + }) } describe(['>=39'], 'program dimensions', () => { diff --git a/cypress/integration/yourDimensions.cy.js b/cypress/integration/yourDimensions.cy.js index 9cdcf07c7..161c781ed 100644 --- a/cypress/integration/yourDimensions.cy.js +++ b/cypress/integration/yourDimensions.cy.js @@ -1,5 +1,6 @@ import { DIMENSION_ID_EVENT_DATE } from '../../src/modules/dimensionConstants.js' import { E2E_PROGRAM, TEST_REL_PE_LAST_YEAR } from '../data/index.js' +import yourDimensionsFixture from '../fixtures/yourDimensionsLazyLoading.json' import { typeInput } from '../helpers/common.js' import { openProgramDimensionsSidebar, @@ -24,12 +25,12 @@ import { EXTENDED_TIMEOUT } from '../support/util.js' const trackerProgram = E2E_PROGRAM const periodLabel = trackerProgram[DIMENSION_ID_EVENT_DATE] -describe('event', () => { - it('Your dimensions can be used and filtered by', () => { - const dimensionName = 'Facility Type' - const filteredOutItemName = 'MCHP' - const filteredItemName = 'CHC' +describe('Your dimensions', () => { + const dimensionName = 'Facility Type' + const filteredOutItemName = 'MCHP' + const filteredItemName = 'CHC' + const openYourDimensionsPanel = () => { goToStartPage() selectEventWithProgram(trackerProgram) @@ -43,6 +44,10 @@ describe('event', () => { // open the your dimensions sidebar cy.getBySel('main-sidebar').contains('Your dimensions').click() + } + + it('can be used and filtered', () => { + openYourDimensionsPanel() cy.getBySel('your-dimensions-list').contains( dimensionName, @@ -118,4 +123,60 @@ describe('event', () => { `${getPreviousYearStr()}-12-11`, ]) }) + it('list lazy loads', () => { + const getList = () => cy.getBySel('your-dimensions-list') + const getListChildren = () => getList().find('div[role="button"]') + const shouldLoadNextPage = (nextPage, nextListLength) => { + cy.getBySel('dimensions-list-load-more').should('exist') + // The loader is appended below the "viewport" so we need another scroll + getList().scrollTo('bottom') + cy.getBySel('dimensions-list-load-more').should('be.visible') + cy.wait('@getDimensions') + .its('request.query.page') + .should('eq', nextPage.toString()) + getListChildren().should('have.length', nextListLength) + } + + cy.intercept( + { + pathname: '**/api/*/dimensions**', + query: { + fields: 'id,dimensionType,valueType,optionSet,displayName~rename(name)', + }, + }, + (req) => req.reply(yourDimensionsFixture[`page_${req.query.page}`]) + ).as('getDimensions') + + openYourDimensionsPanel() + + // Page 1 should be fetched without scrolling + cy.wait('@getDimensions').its('request.query.page').should('eq', '1') + getListChildren().should('have.length', 50) + + // Subsequent pages should be fetched when scrolling down + getList().scrollTo('bottom') + shouldLoadNextPage(2, 100) + + getList().scrollTo('bottom') + shouldLoadNextPage(3, 150) + + getList().scrollTo('bottom') + shouldLoadNextPage(4, 200) + + // This is the last page with only 10 items + getList().scrollTo('bottom') + shouldLoadNextPage(5, 210) + + // Nothing should happen once the end has been reached + getList().scrollTo('bottom') + cy.getBySel('dimensions-list-load-more').should('not.exist') + getListChildren().should('have.length', 210) + cy.get('@getDimensions.all').then((interceptions) => { + const hasRequestedPageSix = interceptions.some( + ({ request }) => request.query.page === '6' + ) + expect(interceptions).to.have.length(5) + expect(hasRequestedPageSix).to.be.false + }) + }) }) diff --git a/src/components/MainSidebar/DimensionsList/DimensionsList.js b/src/components/MainSidebar/DimensionsList/DimensionsList.js index 37d451263..dd4cfd5ab 100644 --- a/src/components/MainSidebar/DimensionsList/DimensionsList.js +++ b/src/components/MainSidebar/DimensionsList/DimensionsList.js @@ -90,7 +90,10 @@ const DimensionsList = ({ /> ))} {fetching && ( -
+
)} diff --git a/src/components/MainSidebar/MainSidebar.module.css b/src/components/MainSidebar/MainSidebar.module.css index 2998383a3..e7d489f63 100644 --- a/src/components/MainSidebar/MainSidebar.module.css +++ b/src/components/MainSidebar/MainSidebar.module.css @@ -29,6 +29,8 @@ transform: translateX(0); transition: transform 200ms ease-out; flex-shrink: 0; + display: flex; + flex-direction: column; } .accessory.hidden .accessoryInner { transform: translateX(-260px); diff --git a/src/components/MainSidebar/ProgramDimensionsPanel/useProgramDataDimensions.js b/src/components/MainSidebar/ProgramDimensionsPanel/useProgramDataDimensions.js index 2a274d3ba..fe451c81c 100644 --- a/src/components/MainSidebar/ProgramDimensionsPanel/useProgramDataDimensions.js +++ b/src/components/MainSidebar/ProgramDimensionsPanel/useProgramDataDimensions.js @@ -300,6 +300,7 @@ const useProgramDataDimensions = ({ return { loading, + fetching, error, dimensions, setIsListEndVisible, diff --git a/src/components/MainSidebar/YourDimensionsPanel/useYourDimensions.js b/src/components/MainSidebar/YourDimensionsPanel/useYourDimensions.js index 4b66e9ad3..7b89da75c 100644 --- a/src/components/MainSidebar/YourDimensionsPanel/useYourDimensions.js +++ b/src/components/MainSidebar/YourDimensionsPanel/useYourDimensions.js @@ -29,7 +29,7 @@ const query = { const useYourDimensions = ({ visible, searchTerm, nameProp }) => { const [isListEndVisible, setIsListEndVisible] = useState(false) - const [dimensions, setDimensions] = useState([]) + const [dimensions, setDimensions] = useState(null) const { data, error, loading, fetching, called, refetch } = useDataQuery( query, { @@ -53,7 +53,7 @@ const useYourDimensions = ({ visible, searchTerm, nameProp }) => { }) } // Reset when filter changes - setDimensions([]) + setDimensions(null) }, [searchTerm, nameProp]) useEffect(() => { @@ -63,7 +63,7 @@ const useYourDimensions = ({ visible, searchTerm, nameProp }) => { if (isListEndVisible && !isLastPage && !fetching) { refetch({ - page: data.page + 1, + page: pager.page + 1, searchTerm, nameProp, }) @@ -74,17 +74,17 @@ const useYourDimensions = ({ visible, searchTerm, nameProp }) => { useEffect(() => { if (data) { setDimensions((currDimensions) => [ - ...currDimensions, + ...(currDimensions ?? []), ...data.dimensions.dimensions, ]) } }, [data]) return { - loading, + loading: dimensions ? false : loading, fetching, error, - dimensions, + dimensions: dimensions ?? [], setIsListEndVisible, } } diff --git a/src/configureStore.js b/src/configureStore.js index ee4e16563..2b1c71a8f 100644 --- a/src/configureStore.js +++ b/src/configureStore.js @@ -16,7 +16,8 @@ const configureStore = (middleware) => { if ( !window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ && - process.env.NODE_ENV !== 'production' + process.env.NODE_ENV !== 'production' && + !window?.Cypress ) { middleware.push(createLogger()) }