ET-372: ICD questions QA and wrap up

[mohsinht]

PR Type

Enhancement

---

Description

• Enhanced the question component to include a description for ICD-10 with a clickable link.
• Updated the QuestionLabels interface to support new ICD-10 related labels.
• Added new styles for the ICD-10 description text and link in the question component.

---

Changes walkthrough 📝

Relevant files

Enhancement

Question.tsx Enhance question component with ICD-10 description and link src/molecules/question/Question.tsx Added a description for ICD-10 with a link in the question component. Updated the placeholder label for ICD search. Wrapped the Select component with additional description elements. +34/-22  types.ts Extend QuestionLabels interface for ICD-10 support              src/molecules/question/types.ts Added new properties for ICD-10 description and link in QuestionLabels. Introduced a separate placeholder for ICD search. +3/-0      question.module.scss Add styles for ICD-10 description in question component    src/molecules/question/question.module.scss Added styling for ICD-10 description text and link. Defined new CSS class .awell_question_description. +14/-0

---

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Code Duplication The new code block in the Question.tsx file seems to replicate some existing functionality with minor modifications. Consider refactoring to avoid duplication and improve maintainability. External Link Security The external link to the ICD-10 catalog does not include rel="noopener noreferrer" attributes, which is a security risk for opening links in new tabs.

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Typo	Correct the target attribute of the anchor tag to open links in a new tab properly Ensure that the target attribute for the anchor tag is set to _blank instead of blank to correctly open the link in a new tab. src/molecules/question/Question.tsx [437] -<a href="https://icd.who.int/browse10/2019/en#/J00" target="blank"> +<a href="https://icd.who.int/browse10/2019/en#/J00" target="_blank"> Suggestion importance[1-10]: 10 Why: Correcting the 'target' attribute from 'blank' to '_blank' is crucial for the functionality to open links in a new tab, which is a common web standard.	10
Security	Enhance security by adding rel attributes to external links Add a rel="noopener noreferrer" attribute to the anchor tag to improve security when opening a link in a new tab. src/molecules/question/Question.tsx [437] -<a href="https://icd.who.int/browse10/2019/en#/J00" target="_blank"> +<a href="https://icd.who.int/browse10/2019/en#/J00" target="_blank" rel="noopener noreferrer"> Suggestion importance[1-10]: 8 Why: Adding 'rel="noopener noreferrer"' enhances security and performance when opening links in a new tab, which is a best practice for external links.	8
Possible bug	Safeguard against null or undefined values in JSX rendering Consider handling potential null or undefined values for labels.select to prevent runtime errors in the JSX template. src/molecules/question/Question.tsx [435] -{labels.select?.icd_10_catalogue_description}{' '} +{labels.select?.icd_10_catalogue_description || 'Default Description'}{' '} Suggestion importance[1-10]: 7 Why: Providing a default value for potentially undefined properties in JSX prevents runtime errors and improves the resilience of the UI rendering.	7
Possible issue	Ensure robust handling of potentially null or undefined option lists Verify and handle the scenario where icdClassificationOptions might be null or undefined to prevent rendering issues. src/molecules/question/Question.tsx [425] -options={icdClassificationOptions ?? []} +options={icdClassificationOptions || []} Suggestion importance[1-10]: 7 Why: Ensuring that 'icdClassificationOptions' defaults to an empty array if null or undefined prevents issues in the component expecting an array, thus avoiding rendering errors.	7