From 247566c7606d01ee8255faef55e7a62fc4fd0c7f Mon Sep 17 00:00:00 2001 From: mutajonathan Date: Wed, 5 Feb 2025 01:59:18 +0300 Subject: [PATCH 1/8] (fix) O3-3958: Select all concept answers --- package.json | 2 +- .../select/select-answers.component.tsx | 21 ++- yarn.lock | 144 +++++++++++++++++- 3 files changed, 156 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 0d780c12..5170911c 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "url": "https://github.com/openmrs/openmrs-esm-form-builder/issues" }, "dependencies": { - "@carbon/react": "~1.49.0", + "@carbon/react": "^1.75.0", "@openmrs/esm-form-engine-lib": "latest", "ajv": "^8.17.1", "dotenv": "^16.4.5", diff --git a/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx index 6bd17549..4d36a743 100644 --- a/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx +++ b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useMemo, useState } from 'react'; +import React, { useCallback, useMemo, useState, useRef } from 'react'; import { Tag, MultiSelect, Stack } from '@carbon/react'; import { useTranslation } from 'react-i18next'; import ConceptSearch from '../../../common/concept-search/concept-search.component'; @@ -16,6 +16,9 @@ const SelectAnswers: React.FC = () => { const { formField, concept, setFormField } = useFormField(); const [addedAnswers, setAddedAnswers] = useState([]); + // Storing the initial answers + const initialAnswers = useRef(formField.questionOptions?.answers ?? []); + const selectedAnswers = useMemo( () => formField.questionOptions?.answers?.map((answer) => ({ @@ -27,7 +30,8 @@ const SelectAnswers: React.FC = () => { const handleSelectAnswers = useCallback( ({ selectedItems }: { selectedItems: Array }) => { - const mappedAnswers = selectedItems.map((answer) => ({ + const mappedAnswers = selectedItems.filter((item) => item.id !== 'select-all') + .map((answer) => ({ concept: answer.id, label: answer.text, })); @@ -97,14 +101,17 @@ const SelectAnswers: React.FC = () => { text: answer.display, })) ?? []; - const formFieldAnswers = formField.questionOptions?.answers ?? []; + const formFieldAnswers = initialAnswers.current; // If no answers from concept but we have form field answers, use those if (conceptAnswerItems.length === 0 && formFieldAnswers.length > 0) { - return formFieldAnswers.map((answer) => ({ - id: answer.concept, - text: answer.label, - })); + return [ + { id: 'select-all', text: 'Select All', isSelectAll: true }, + ...formFieldAnswers.map((answer) => ({ + id: answer.concept, + text: answer.label, + })), + ]; } // Merge concept answers with any additional form field answers diff --git a/yarn.lock b/yarn.lock index 7103f080..1487a7c4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1391,6 +1391,15 @@ __metadata: languageName: node linkType: hard +"@carbon/colors@npm:^11.29.0": + version: 11.29.0 + resolution: "@carbon/colors@npm:11.29.0" + dependencies: + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: 10/daea0b96cfb059d67f5dc5ae3705360b24a0c487181b4fff6e982485f54774bc9f43dadde05dfbcf67befa22c4a8fb6e72177b46bb3c35df0dd00c34a0808c44 + languageName: node + linkType: hard + "@carbon/feature-flags@npm:^0.16.0": version: 0.16.0 resolution: "@carbon/feature-flags@npm:0.16.0" @@ -1436,6 +1445,16 @@ __metadata: languageName: node linkType: hard +"@carbon/grid@npm:^11.31.0": + version: 11.31.0 + resolution: "@carbon/grid@npm:11.31.0" + dependencies: + "@carbon/layout": "npm:^11.29.0" + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: 10/62ed7ed28da2add6fff02437cae005237c691358a16fc3eccc2a28f0533000f5c9c729c80143c4ba256c9250452bdaace012e62f1bc3c020fbb486c7b0121d92 + languageName: node + linkType: hard + "@carbon/icon-helpers@npm:^10.53.0": version: 10.53.1 resolution: "@carbon/icon-helpers@npm:10.53.1" @@ -1480,6 +1499,19 @@ __metadata: languageName: node linkType: hard +"@carbon/icons-react@npm:^11.54.0": + version: 11.54.0 + resolution: "@carbon/icons-react@npm:11.54.0" + dependencies: + "@carbon/icon-helpers": "npm:^10.54.0" + "@ibm/telemetry-js": "npm:^1.5.0" + prop-types: "npm:^15.7.2" + peerDependencies: + react: ">=16" + checksum: 10/094c84dea84d3414cd4015eada0ec1d36c269a66a4d89ec167fd22c2dfd085c001e58ea60591e25069c987e0cfd20e9d4dbea9e2cbd1237572f3fd26de3d9b62 + languageName: node + linkType: hard + "@carbon/layout@npm:^11.19.0, @carbon/layout@npm:^11.27.0, @carbon/layout@npm:^11.27.1": version: 11.27.1 resolution: "@carbon/layout@npm:11.27.1" @@ -1505,6 +1537,15 @@ __metadata: languageName: node linkType: hard +"@carbon/layout@npm:^11.29.0": + version: 11.29.0 + resolution: "@carbon/layout@npm:11.29.0" + dependencies: + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: 10/886f6a0b01a34b91a7d10e4d562174ae338cb25713a4fee9a6cc80eec2ab53c3568c086a533cf8afaa11cb3fbe65cf5486ee320f26639bf21e4cd582f3b7873f + languageName: node + linkType: hard + "@carbon/motion@npm:^11.23.0": version: 11.23.1 resolution: "@carbon/motion@npm:11.23.1" @@ -1523,7 +1564,7 @@ __metadata: languageName: node linkType: hard -"@carbon/react@npm:>1.47.0 <1.50.0, @carbon/react@npm:~1.49.0": +"@carbon/react@npm:>1.47.0 <1.50.0": version: 1.49.0 resolution: "@carbon/react@npm:1.49.0" dependencies: @@ -1589,6 +1630,37 @@ __metadata: languageName: node linkType: hard +"@carbon/react@npm:^1.75.0": + version: 1.75.0 + resolution: "@carbon/react@npm:1.75.0" + dependencies: + "@babel/runtime": "npm:^7.24.7" + "@carbon/feature-flags": "npm:^0.24.0" + "@carbon/icons-react": "npm:^11.54.0" + "@carbon/layout": "npm:^11.29.0" + "@carbon/styles": "npm:^1.74.0" + "@floating-ui/react": "npm:^0.26.0" + "@ibm/telemetry-js": "npm:^1.5.0" + classnames: "npm:2.5.1" + copy-to-clipboard: "npm:^3.3.1" + downshift: "npm:9.0.8" + es-toolkit: "npm:^1.27.0" + flatpickr: "npm:4.6.13" + invariant: "npm:^2.2.3" + prop-types: "npm:^15.7.2" + react-fast-compare: "npm:^3.2.2" + react-is: "npm:^18.3.1" + tabbable: "npm:^6.2.0" + use-resize-observer: "npm:^6.0.0" + window-or-global: "npm:^1.0.1" + peerDependencies: + react: ^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0 + react-dom: ^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0 + sass: ^1.33.0 + checksum: 10/0862588ffb30d559fa322a3143a8df625752b3244b24c522f38eaf59485af3654826b20b35f7211ec04638bd39bf64b9606fdc4861bf09c1e7d280d79d5b3018 + languageName: node + linkType: hard + "@carbon/react@npm:~1.37.0": version: 1.37.0 resolution: "@carbon/react@npm:1.37.0" @@ -1674,6 +1746,36 @@ __metadata: languageName: node linkType: hard +"@carbon/styles@npm:^1.74.0": + version: 1.74.0 + resolution: "@carbon/styles@npm:1.74.0" + dependencies: + "@carbon/colors": "npm:^11.29.0" + "@carbon/feature-flags": "npm:^0.24.0" + "@carbon/grid": "npm:^11.31.0" + "@carbon/layout": "npm:^11.29.0" + "@carbon/motion": "npm:^11.24.0" + "@carbon/themes": "npm:^11.46.0" + "@carbon/type": "npm:^11.35.0" + "@ibm/plex": "npm:6.0.0-next.6" + "@ibm/plex-mono": "npm:0.0.3-alpha.0" + "@ibm/plex-sans": "npm:0.0.3-alpha.0" + "@ibm/plex-sans-arabic": "npm:0.0.3-alpha.0" + "@ibm/plex-sans-devanagari": "npm:0.0.3-alpha.0" + "@ibm/plex-sans-hebrew": "npm:0.0.3-alpha.0" + "@ibm/plex-sans-thai": "npm:0.0.3-alpha.0" + "@ibm/plex-sans-thai-looped": "npm:0.0.3-alpha.0" + "@ibm/plex-serif": "npm:0.0.3-alpha.0" + "@ibm/telemetry-js": "npm:^1.5.0" + peerDependencies: + sass: ^1.33.0 + peerDependenciesMeta: + sass: + optional: true + checksum: 10/05b25d783c8da1056213b9ac1bff05a75e83945f51f632a9d40323c2d0863239cfd33f3a8a1e4a8fc003b0aa476985bf5f34a9ca869a44e13e9d4d98944d124c + languageName: node + linkType: hard + "@carbon/telemetry@npm:0.1.0": version: 0.1.0 resolution: "@carbon/telemetry@npm:0.1.0" @@ -1709,6 +1811,19 @@ __metadata: languageName: node linkType: hard +"@carbon/themes@npm:^11.46.0": + version: 11.46.0 + resolution: "@carbon/themes@npm:11.46.0" + dependencies: + "@carbon/colors": "npm:^11.29.0" + "@carbon/layout": "npm:^11.29.0" + "@carbon/type": "npm:^11.35.0" + "@ibm/telemetry-js": "npm:^1.5.0" + color: "npm:^4.0.0" + checksum: 10/51dbca009e501384dab9fbfb181921e551e03752f590268aa4bd37e08e95e8e0993f0c0e01c1549093ecbe367756ece781b20a339a61650932d3b6183f3f44df + languageName: node + linkType: hard + "@carbon/type@npm:^11.32.0": version: 11.32.1 resolution: "@carbon/type@npm:11.32.1" @@ -1731,6 +1846,17 @@ __metadata: languageName: node linkType: hard +"@carbon/type@npm:^11.35.0": + version: 11.35.0 + resolution: "@carbon/type@npm:11.35.0" + dependencies: + "@carbon/grid": "npm:^11.31.0" + "@carbon/layout": "npm:^11.29.0" + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: 10/f759e65e399f231a6a2ffc43036eae5d63456c82124b0550bf3d2dd09545c16b037ae8a550d9601ff9a3d86856199d9c9cfa5ecdb3f00c280f7b8c65727fadde + languageName: node + linkType: hard + "@carbon/utils-position@npm:^1.3.0": version: 1.3.0 resolution: "@carbon/utils-position@npm:1.3.0" @@ -3421,7 +3547,7 @@ __metadata: version: 0.0.0-use.local resolution: "@openmrs/esm-form-builder-app@workspace:." dependencies: - "@carbon/react": "npm:~1.49.0" + "@carbon/react": "npm:^1.75.0" "@dnd-kit/core": "npm:^6.1.0" "@dnd-kit/modifiers": "npm:^6.0.1" "@dnd-kit/sortable": "npm:^7.0.2" @@ -10638,6 +10764,18 @@ __metadata: languageName: node linkType: hard +"es-toolkit@npm:^1.27.0": + version: 1.32.0 + resolution: "es-toolkit@npm:1.32.0" + dependenciesMeta: + "@trivago/prettier-plugin-sort-imports@4.3.0": + unplugged: true + prettier-plugin-sort-re-exports@0.0.1: + unplugged: true + checksum: 10/98eaf802d5d2fbb2bd7ab69073034b7571b56abfa8e7cb046f22a501718b288c901b4f61a53f36b000549ab57c4265b2f8b86ba255e1a7d6e841ff86822e01be + languageName: node + linkType: hard + "esbuild@npm:^0.23.0": version: 0.23.1 resolution: "esbuild@npm:0.23.1" @@ -17343,7 +17481,7 @@ __metadata: languageName: node linkType: hard -"react-is@npm:^17.0.1 || ^18.0.0, react-is@npm:^18.0.0, react-is@npm:^18.2.0": +"react-is@npm:^17.0.1 || ^18.0.0, react-is@npm:^18.0.0, react-is@npm:^18.2.0, react-is@npm:^18.3.1": version: 18.3.1 resolution: "react-is@npm:18.3.1" checksum: 10/d5f60c87d285af24b1e1e7eaeb123ec256c3c8bdea7061ab3932e3e14685708221bf234ec50b21e10dd07f008f1b966a2730a0ce4ff67905b3872ff2042aec22 From 9dfbde8f6e94102940e4d8d3994b0e396ee51b2b Mon Sep 17 00:00:00 2001 From: mutajonathan Date: Wed, 5 Feb 2025 01:59:25 +0300 Subject: [PATCH 2/8] (fix) O3-3958: Select all concept answers --- .../rendering-types/inputs/select/select-answers.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx index 4d36a743..1e633d46 100644 --- a/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx +++ b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx @@ -16,7 +16,7 @@ const SelectAnswers: React.FC = () => { const { formField, concept, setFormField } = useFormField(); const [addedAnswers, setAddedAnswers] = useState([]); - // Storing the initial answers + // Storing the initial questionOptions answers const initialAnswers = useRef(formField.questionOptions?.answers ?? []); const selectedAnswers = useMemo( From 1df20f2e0975d065358ad2364b5ab4259bf7569d Mon Sep 17 00:00:00 2001 From: mutajonathan Date: Tue, 11 Feb 2025 16:32:12 +0300 Subject: [PATCH 3/8] fixing the lint useMemo unnecessary dependency --- .../inputs/select/select-answers.component.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx index 1e633d46..482d4318 100644 --- a/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx +++ b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx @@ -30,11 +30,12 @@ const SelectAnswers: React.FC = () => { const handleSelectAnswers = useCallback( ({ selectedItems }: { selectedItems: Array }) => { - const mappedAnswers = selectedItems.filter((item) => item.id !== 'select-all') + const mappedAnswers = selectedItems + .filter((item) => item.id !== 'select-all') .map((answer) => ({ - concept: answer.id, - label: answer.text, - })); + concept: answer.id, + label: answer.text, + })); setFormField((prevField) => { const currentAnswers = prevField.questionOptions?.answers || []; @@ -123,7 +124,7 @@ const SelectAnswers: React.FC = () => { })); return [...conceptAnswerItems, ...additionalAnswers]; - }, [concept?.answers, formField.questionOptions?.answers]); + }, [concept?.answers]); const convertAnswerItemsToString = useCallback((item: AnswerItem) => item.text, []); From 71cba84aaa1b3cf1cb089c7c3c6088ecc260a9dd Mon Sep 17 00:00:00 2001 From: mutajonathan Date: Tue, 25 Feb 2025 15:30:16 +0300 Subject: [PATCH 4/8] resolving merge conflicts --- yarn.lock | 113 ++++++++++++++++++++++++------------------------------ 1 file changed, 51 insertions(+), 62 deletions(-) diff --git a/yarn.lock b/yarn.lock index cf3c81cf..11dad3e6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1289,7 +1289,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.19.0, @babel/runtime@npm:^7.22.15": +"@babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.19.0": version: 7.23.2 resolution: "@babel/runtime@npm:7.23.2" dependencies: @@ -1473,7 +1473,7 @@ __metadata: languageName: node linkType: hard -"@carbon/icons-react@npm:^11.26.0, @carbon/icons-react@npm:^11.35.0": +"@carbon/icons-react@npm:^11.26.0": version: 11.51.0 resolution: "@carbon/icons-react@npm:11.51.0" dependencies: @@ -1499,6 +1499,19 @@ __metadata: languageName: node linkType: hard +"@carbon/icons-react@npm:^11.55.0": + version: 11.55.0 + resolution: "@carbon/icons-react@npm:11.55.0" + dependencies: + "@carbon/icon-helpers": "npm:^10.54.0" + "@ibm/telemetry-js": "npm:^1.5.0" + prop-types: "npm:^15.7.2" + peerDependencies: + react: ">=16" + checksum: 10/126844781945c3c4f6d12bc6090bf435a678c4eb9b3411c8d6d4ab572b8e25fe96914bd7e8a2fb7672e14a1e154ed1437ed333dce958f5eb16c5beac0bc27747 + languageName: node + linkType: hard + "@carbon/layout@npm:^11.19.0, @carbon/layout@npm:^11.27.0, @carbon/layout@npm:^11.27.1": version: 11.27.1 resolution: "@carbon/layout@npm:11.27.1" @@ -1508,13 +1521,6 @@ __metadata: languageName: node linkType: hard -"@carbon/layout@npm:^11.20.0": - version: 11.20.1 - resolution: "@carbon/layout@npm:11.20.1" - checksum: 10/f284fae1aded5ed8ade21602b284d54f2142d0040f74a9b74516077413fc43d019a86747bed046b944399e410ad4f16599786c9c0363eff9165d46615e6d6200 - languageName: node - linkType: hard - "@carbon/layout@npm:^11.28.0": version: 11.28.0 resolution: "@carbon/layout@npm:11.28.0" @@ -1615,52 +1621,50 @@ __metadata: languageName: node linkType: hard -"@carbon/react@npm:~1.37.0": - version: 1.37.0 - resolution: "@carbon/react@npm:1.37.0" +"@carbon/react@npm:^1.75.0": + version: 1.76.0 + resolution: "@carbon/react@npm:1.76.0" dependencies: - "@babel/runtime": "npm:^7.18.3" - "@carbon/feature-flags": "npm:^0.16.0" - "@carbon/icons-react": "npm:^11.26.0" - "@carbon/layout": "npm:^11.19.0" - "@carbon/styles": "npm:^1.37.0" - "@carbon/telemetry": "npm:0.1.0" - classnames: "npm:2.3.2" + "@babel/runtime": "npm:^7.24.7" + "@carbon/feature-flags": "npm:^0.24.0" + "@carbon/icons-react": "npm:^11.55.0" + "@carbon/layout": "npm:^11.29.0" + "@carbon/styles": "npm:^1.75.0" + "@floating-ui/react": "npm:^0.26.0" + "@ibm/telemetry-js": "npm:^1.5.0" + classnames: "npm:2.5.1" copy-to-clipboard: "npm:^3.3.1" - downshift: "npm:8.1.0" - flatpickr: "npm:4.6.9" + downshift: "npm:9.0.8" + es-toolkit: "npm:^1.27.0" + flatpickr: "npm:4.6.13" invariant: "npm:^2.2.3" - lodash.debounce: "npm:^4.0.8" - lodash.findlast: "npm:^4.5.0" - lodash.isequal: "npm:^4.5.0" - lodash.omit: "npm:^4.5.0" - lodash.throttle: "npm:^4.1.1" prop-types: "npm:^15.7.2" - react-is: "npm:^18.2.0" + react-fast-compare: "npm:^3.2.2" + react-is: "npm:^18.3.1" + tabbable: "npm:^6.2.0" use-resize-observer: "npm:^6.0.0" - wicg-inert: "npm:^3.1.1" window-or-global: "npm:^1.0.1" peerDependencies: - react: ^16.8.6 || ^17.0.1 || ^18.2.0 - react-dom: ^16.8.6 || ^17.0.1 || ^18.2.0 + react: ^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0 + react-dom: ^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0 sass: ^1.33.0 - checksum: 10/ea3963d6b3c13edcbc5fdbaf58071fe7635ea0b8c0f42dfdb50d92763ed6548308f2916bfc12667d031ce01cebc9897b6172f2bedfa8b98f57b88cf56e3e5a08 + checksum: 10/c4a68d5daafb37c8f292abf3e9fcf30b8f9b7aa52da7f7d7431f894a64f8e91be5835f28c49567b80511097eff8d02d819918183feeebbfcba90f49c47d88309 languageName: node linkType: hard -"@carbon/react@npm:~1.49.0": - version: 1.49.0 - resolution: "@carbon/react@npm:1.49.0" +"@carbon/react@npm:~1.37.0": + version: 1.37.0 + resolution: "@carbon/react@npm:1.37.0" dependencies: "@babel/runtime": "npm:^7.18.3" "@carbon/feature-flags": "npm:^0.16.0" - "@carbon/icons-react": "npm:^11.35.0" - "@carbon/layout": "npm:^11.20.0" - "@carbon/styles": "npm:^1.49.0" - "@ibm/telemetry-js": "npm:^1.2.0" - classnames: "npm:2.5.1" + "@carbon/icons-react": "npm:^11.26.0" + "@carbon/layout": "npm:^11.19.0" + "@carbon/styles": "npm:^1.37.0" + "@carbon/telemetry": "npm:0.1.0" + classnames: "npm:2.3.2" copy-to-clipboard: "npm:^3.3.1" - downshift: "npm:8.3.1" + downshift: "npm:8.1.0" flatpickr: "npm:4.6.9" invariant: "npm:^2.2.3" lodash.debounce: "npm:^4.0.8" @@ -1677,11 +1681,11 @@ __metadata: react: ^16.8.6 || ^17.0.1 || ^18.2.0 react-dom: ^16.8.6 || ^17.0.1 || ^18.2.0 sass: ^1.33.0 - checksum: 10/18e74975d78a8f26a464b2783a98cfa21610679e9bedc31e9f98e5b05a7ecfa157dd00569f9d54985ebfddcaeeae19096553c8f1cf57bc4f070405faeed3d70a + checksum: 10/ea3963d6b3c13edcbc5fdbaf58071fe7635ea0b8c0f42dfdb50d92763ed6548308f2916bfc12667d031ce01cebc9897b6172f2bedfa8b98f57b88cf56e3e5a08 languageName: node linkType: hard -"@carbon/styles@npm:^1.37.0, @carbon/styles@npm:^1.49.0": +"@carbon/styles@npm:^1.37.0": version: 1.67.0 resolution: "@carbon/styles@npm:1.67.0" dependencies: @@ -1733,7 +1737,7 @@ __metadata: languageName: node linkType: hard -"@carbon/styles@npm:^1.73.0": +"@carbon/styles@npm:^1.73.0, @carbon/styles@npm:^1.75.0": version: 1.75.0 resolution: "@carbon/styles@npm:1.75.0" dependencies: @@ -2375,7 +2379,7 @@ __metadata: languageName: node linkType: hard -"@ibm/telemetry-js@npm:^1.2.0, @ibm/telemetry-js@npm:^1.5.0, @ibm/telemetry-js@npm:^1.5.1, @ibm/telemetry-js@npm:^1.6.1": +"@ibm/telemetry-js@npm:^1.5.0, @ibm/telemetry-js@npm:^1.5.1, @ibm/telemetry-js@npm:^1.6.1": version: 1.7.1 resolution: "@ibm/telemetry-js@npm:1.7.1" bin: @@ -3571,7 +3575,7 @@ __metadata: version: 0.0.0-use.local resolution: "@openmrs/esm-form-builder-app@workspace:." dependencies: - "@carbon/react": "npm:~1.49.0" + "@carbon/react": "npm:^1.75.0" "@dnd-kit/core": "npm:^6.1.0" "@dnd-kit/modifiers": "npm:^6.0.1" "@dnd-kit/sortable": "npm:^7.0.2" @@ -10748,7 +10752,7 @@ __metadata: languageName: node linkType: hard -"compute-scroll-into-view@npm:^3.0.3, compute-scroll-into-view@npm:^3.1.0": +"compute-scroll-into-view@npm:^3.1.0": version: 3.1.0 resolution: "compute-scroll-into-view@npm:3.1.0" checksum: 10/cc5211d49bced5ad23385da5c2eaf69b6045628581b0dcb9f4dd407bfee51bbd26d2bce426be26edf2feaf8c243706f5a7c3759827d89cc5a01a5cf7d299a5eb @@ -12083,21 +12087,6 @@ __metadata: languageName: node linkType: hard -"downshift@npm:8.3.1": - version: 8.3.1 - resolution: "downshift@npm:8.3.1" - dependencies: - "@babel/runtime": "npm:^7.22.15" - compute-scroll-into-view: "npm:^3.0.3" - prop-types: "npm:^15.8.1" - react-is: "npm:^18.2.0" - tslib: "npm:^2.6.2" - peerDependencies: - react: ">=16.12.0" - checksum: 10/b616da957802bd80bc8d909d36bff851d9701e743d800be6443514f24deeaf0ce22ae56e6802c386c769328d8442969c6629c6f94d99ff12bea8d07e11c86cee - languageName: node - linkType: hard - "downshift@npm:9.0.8": version: 9.0.8 resolution: "downshift@npm:9.0.8" @@ -19238,7 +19227,7 @@ __metadata: languageName: node linkType: hard -"react-is@npm:^17.0.1 || ^18.0.0, react-is@npm:^18.0.0, react-is@npm:^18.2.0": +"react-is@npm:^17.0.1 || ^18.0.0, react-is@npm:^18.0.0, react-is@npm:^18.2.0, react-is@npm:^18.3.1": version: 18.3.1 resolution: "react-is@npm:18.3.1" checksum: 10/d5f60c87d285af24b1e1e7eaeb123ec256c3c8bdea7061ab3932e3e14685708221bf234ec50b21e10dd07f008f1b966a2730a0ce4ff67905b3872ff2042aec22 From 5f5ba504c069681aead9a329a010184304c03aa7 Mon Sep 17 00:00:00 2001 From: mutajonathan Date: Tue, 25 Feb 2025 18:37:05 +0300 Subject: [PATCH 5/8] correcting the unit tests and set timeout for Defering state update to avoid updating during render --- .../select/select-answers.component.tsx | 29 ++++++++++--------- .../inputs/select/select-answers.test.tsx | 12 +++++--- 2 files changed, 24 insertions(+), 17 deletions(-) diff --git a/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx index 5bfb885a..c108b481 100644 --- a/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx +++ b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx @@ -43,19 +43,21 @@ const SelectAnswers: React.FC = () => { label: answer.text, })); - setFormField((prevField) => { - const currentAnswers = prevField.questionOptions?.answers || []; - if (JSON.stringify(currentAnswers) === JSON.stringify(mappedAnswers)) { - return prevField; - } - return { - ...prevField, - questionOptions: { - ...prevField.questionOptions, - answers: mappedAnswers, - }, - }; - }); + setTimeout(() => { + setFormField((prevField) => { + const currentAnswers = prevField.questionOptions?.answers || []; + if (JSON.stringify(currentAnswers) === JSON.stringify(mappedAnswers)) { + return prevField; + } + return { + ...prevField, + questionOptions: { + ...prevField.questionOptions, + answers: mappedAnswers, + }, + }; + }); + }, 0); }, [setFormField], ); @@ -139,6 +141,7 @@ const SelectAnswers: React.FC = () => { {answerItems.length > 0 && ( { }); it('renders', () => { renderComponent(); - expect(screen.getByText(/select answers to display/i)).toBeInTheDocument(); + expect( + screen.getByRole('combobox', { + name: /select answers to display/i, + }), + ).toBeInTheDocument(); expect(screen.getByText(/search for a concept to add as an answer/i)).toBeInTheDocument(); expect( screen.getByRole('searchbox', { @@ -72,7 +76,7 @@ describe('Select answers component', () => { const user = userEvent.setup(); renderComponent(); const answersMenu = screen.getByRole('combobox', { - name: /select answers to display/i, + name: /^select answers to display/i, }); expect(answersMenu).toBeInTheDocument(); @@ -85,7 +89,7 @@ describe('Select answers component', () => { expect(screen.getByTitle(/answer 1/i)).toBeInTheDocument(); expect( screen.getByRole('combobox', { - name: /select answers to display total items selected: 1,to clear selection, press delete or backspace/i, + name: /select answers to display total items selected: 1 answer 1,to clear selection, press delete or backspace/i, }), ).toBeInTheDocument(); }); @@ -110,7 +114,7 @@ describe('Select answers component', () => { expect(screen.getByTitle(/concept 2/i)).toBeInTheDocument(); expect( - screen.getByText(/total items selected: 1,to clear selection, press delete or backspace/i), + screen.getByText(/total items selected: 1 concept 2,to clear selection, press delete or backspace/i), ).toBeInTheDocument(); expect( screen.getByRole('button', { From ad522b3d20d42858248b7cd7201868ab32879116 Mon Sep 17 00:00:00 2001 From: mutajonathan Date: Tue, 25 Feb 2025 21:01:04 +0300 Subject: [PATCH 6/8] fixing all failing unit tests --- .../patient-identifier/patient-identifier-type.test.tsx | 6 +----- .../program-state-type-question.component.tsx | 1 + .../inputs/program-state/program-state.test.tsx | 7 +++++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/interactive-builder/modals/question/question-form/question-types/inputs/patient-identifier/patient-identifier-type.test.tsx b/src/components/interactive-builder/modals/question/question-form/question-types/inputs/patient-identifier/patient-identifier-type.test.tsx index e4683ae3..c9cffd94 100644 --- a/src/components/interactive-builder/modals/question/question-form/question-types/inputs/patient-identifier/patient-identifier-type.test.tsx +++ b/src/components/interactive-builder/modals/question/question-form/question-types/inputs/patient-identifier/patient-identifier-type.test.tsx @@ -54,11 +54,7 @@ describe('PatientIdentifierTypeQuestion', () => { }), ).toBeInTheDocument(); await user.click(menuBox); - expect( - screen.getByRole('listbox', { - name: /choose an item/i, - }), - ).toBeInTheDocument(); + expect(screen.getByRole('listbox')).toBeInTheDocument(); expect(screen.getByText(/type 1/i)).toBeInTheDocument(); expect(screen.getByText(/type 2/i)).toBeInTheDocument(); }); diff --git a/src/components/interactive-builder/modals/question/question-form/question-types/inputs/program-state/program-state-type-question.component.tsx b/src/components/interactive-builder/modals/question/question-form/question-types/inputs/program-state/program-state-type-question.component.tsx index 55dcffbe..5968f977 100644 --- a/src/components/interactive-builder/modals/question/question-form/question-types/inputs/program-state/program-state-type-question.component.tsx +++ b/src/components/interactive-builder/modals/question/question-form/question-types/inputs/program-state/program-state-type-question.component.tsx @@ -187,6 +187,7 @@ const ProgramStateTypeQuestion: React.FC = () => { ) : ( programStates?.length > 0 && ( { await user.click(programWorkflowSelectionOption); expect(screen.getByRole('combobox', { name: /^program workflow$/i })).toHaveDisplayValue(/program 1 workflow 1/i); - expect(screen.getByText(/program state/i)).toBeInTheDocument(); + expect(screen.getByText(/program state/i, { selector: 'span' })).toBeInTheDocument(); const programStateMenu = screen.getByRole('combobox', { name: /program state/i, @@ -185,7 +185,10 @@ describe('ProgramStateTypeQuestion', () => { }), ).toHaveDisplayValue(/program 1 workflow 1/i); expect( - screen.getByText(/total items selected: 1,to clear selection, press delete or backspace/i), + screen.getByText( + (content, element) => + content.includes('Total items selected') && content.includes('1') && content.includes('To clear selection'), + ), ).toBeInTheDocument(); expect(screen.getByText(/program 1 state 1/i)).toBeInTheDocument(); }); From b8a88454c1ce4201876ed361f9c976c0ee68a76e Mon Sep 17 00:00:00 2001 From: mutajonathan Date: Tue, 25 Feb 2025 23:24:40 +0300 Subject: [PATCH 7/8] resolving e2e tests --- e2e/specs/create-form-with-interactive-builder.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/e2e/specs/create-form-with-interactive-builder.spec.ts b/e2e/specs/create-form-with-interactive-builder.spec.ts index 12cab7ef..c781a974 100644 --- a/e2e/specs/create-form-with-interactive-builder.spec.ts +++ b/e2e/specs/create-form-with-interactive-builder.spec.ts @@ -178,8 +178,8 @@ test('Create a form using the interactive builder', async ({ page, context }) => await test.step('And then I select `Yes` and `No` as the answers to display', async () => { await formBuilderPage.selectAnswersDropdown().click(); - await formBuilderPage.page.getByRole('option', { name: 'No' }).click(); - await formBuilderPage.page.getByRole('option', { name: 'Yes' }).click(); + await formBuilderPage.page.getByRole('option', { name: /no/i }).click(); + await formBuilderPage.page.getByRole('option', { name: /yes/i }).click(); }); await test.step('And then I click on `Save`', async () => { From 2c5c3ebedc070b246ccad41d0af69a82086938b4 Mon Sep 17 00:00:00 2001 From: mutajonathan Date: Wed, 26 Feb 2025 00:00:53 +0300 Subject: [PATCH 8/8] resolving e2e tests using getRole for selectAnswersDropdown --- e2e/pages/form-builder-page.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/e2e/pages/form-builder-page.ts b/e2e/pages/form-builder-page.ts index 31d1a680..3d403641 100644 --- a/e2e/pages/form-builder-page.ts +++ b/e2e/pages/form-builder-page.ts @@ -60,7 +60,7 @@ export class FormBuilderPage { name: /rendering type/i, }); readonly conceptSearchInput = () => this.page.getByPlaceholder(/search using a concept name or uuid/i); - readonly selectAnswersDropdown = () => this.page.getByText(/select answers to display/i); + readonly selectAnswersDropdown = () => this.page.getByRole('combobox', { name: /select answers to display/i }); readonly answer = () => this.page.getByRole('menuitem', { name: /tested for covid 19/i }); readonly questionIdInput = () => this.page.getByRole('textbox', { name: /question id/i }); readonly questionCreatedMessage = () => this.page.getByText(/new question created/i);