Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update ConditionVerificationStatusMenu.tsx #9477

Closed
wants to merge 1 commit into from
Closed

Update ConditionVerificationStatusMenu.tsx #9477

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 38 additions & 17 deletions src/components/Diagnosis/ConditionVerificationStatusMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { useState } from "react";
import { useTranslation } from "react-i18next";

import CareIcon from "@/CAREUI/icons/CareIcon";
Expand All @@ -14,6 +15,7 @@ import { classNames } from "@/Utils/utils";
interface Props<T extends ConditionVerificationStatus> {
disabled?: boolean;
value?: T;
defaultValue?: T; // Added default value support
placeholder?: string;
options: readonly T[];
onSelect: (option: T) => void;
Expand All @@ -26,48 +28,69 @@ export default function ConditionVerificationStatusMenu<
T extends ConditionVerificationStatus,
>(props: Props<T>) {
const { t } = useTranslation();
const [searchTerm, setSearchTerm] = useState("");
const [selectedValue, setSelectedValue] = useState(props.defaultValue);
Comment on lines +31 to +32
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Consider adding prop/state synchronization

The component maintains internal state with selectedValue but doesn't synchronize with external value prop changes. This could lead to inconsistencies when the parent component updates the value.

Consider adding an effect to sync the internal state:

+ useEffect(() => {
+   if (props.value !== undefined) {
+     setSelectedValue(props.value);
+   }
+ }, [props.value]);

Committable suggestion skipped: line range outside the PR's diff.


const filteredOptions = props.options.filter((status) =>
t(status).toLowerCase().includes(searchTerm.toLowerCase())
);

return (
<DropdownMenu
size={props.size ?? "small"}
className={classNames(
props.className,
props.value && StatusStyle[props.value].colors,
props.value &&
selectedValue && StatusStyle[selectedValue].colors,
selectedValue &&
"border !border-secondary-400 bg-white hover:bg-secondary-300",
)}
id="condition-verification-status-menu"
title={props.value ? t(props.value) : (props.placeholder ?? t("add_as"))}
title={
selectedValue
? t(selectedValue)
: props.placeholder ?? t("add_as")
}
disabled={props.disabled}
variant={props.value ? StatusStyle[props.value].variant : "primary"}
variant={selectedValue ? StatusStyle[selectedValue].variant : "primary"}
>
<>
{props.options.map((status) => (
<input
type="text"
placeholder={t("search")}
className="p-2 w-full border-b"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
Comment on lines +57 to +63
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Enhance search input accessibility

While the search functionality is well-implemented, the input field lacks proper accessibility attributes.

Add ARIA attributes and label:

 <input
   type="text"
   placeholder={t("search")}
   className="p-2 w-full border-b"
   value={searchTerm}
   onChange={(e) => setSearchTerm(e.target.value)}
+  aria-label={t("search")}
+  role="searchbox"
+  autoComplete="off"
 />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<input
type="text"
placeholder={t("search")}
className="p-2 w-full border-b"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<input
type="text"
placeholder={t("search")}
className="p-2 w-full border-b"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
aria-label={t("search")}
role="searchbox"
autoComplete="off"
/>


{filteredOptions.map((status) => (
<DropdownItem
key={status}
id={`add-icd11-diagnosis-as-${status}`}
variant={StatusStyle[status].variant}
onClick={() => props.onSelect(status)}
onClick={() => {
setSelectedValue(status);
props.onSelect(status);
}}
icon={
<CareIcon
icon="l-coronavirus"
className={classNames(
"hidden text-lg transition-all duration-200 ease-in-out group-hover:rotate-90 group-hover:text-inherit md:block",
props.value === status
selectedValue === status
? "text-inherit-500"
: "text-secondary-500",
)}
/>
}
className="group"
disabled={props.value === status}
disabled={selectedValue === status}
>
<div className="flex w-full max-w-xs flex-col items-start gap-1 whitespace-nowrap md:whitespace-normal">
<span className={props.value === status ? "font-medium" : ""}>
<span className={selectedValue === status ? "font-medium" : ""}>
{InactiveConditionVerificationStatuses.includes(
status as (typeof InactiveConditionVerificationStatuses)[number],
)
? "Remove as "
? t("remove_as")
: ""}
Comment on lines +89 to 94
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Based on the verification results, I can now generate the final response:

Missing required translation keys in locale files

The following translation keys are missing across multiple locale files:

  • remove_as key is missing in all locale files but is used in the component
  • search key is missing in all locale files

The Marathi (mr.json) translation file is missing all the required keys.

🔗 Analysis chain

Verify translation key availability

Ensure all required translation keys are available in the i18n files.

Let me try to locate the translation files first, as they might be in a different directory.

Now that we found the translation files, let's check for the required keys in them.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for translation keys in i18n files
echo "Checking for required translation keys..."

# Define the keys to check
KEYS=("add_as" "search" "remove_as" "remove")

# Find all translation files
fd -e json -e yaml -e yml . src/locales | while read -r file; do
  echo "Checking file: $file"
  for key in "${KEYS[@]}"; do
    if ! grep -q "\"$key\":" "$file"; then
      echo "Warning: Missing translation key '$key' in $file"
    fi
  done
done

# Check for help_{status} keys
for status in "unconfirmed" "provisional" "differential" "confirmed" "refuted" "entered-in-error"; do
  fd -e json -e yaml -e yml . src/locales | while read -r file; do
    if ! grep -q "\"help_$status\":" "$file"; then
      echo "Warning: Missing translation key 'help_$status' in $file"
    fi
  done
done

Length of output: 1832

Script:

#!/bin/bash
# First, let's find all translation-related files in the repository
echo "Looking for translation files..."
fd -e json -e yaml -e yml . | grep -i "locale\|translation\|i18n"

# Also search for imports of translation files to find their location
echo -e "\nSearching for translation imports..."
rg -l "i18n|useTranslation|translation" --type ts --type tsx

Length of output: 454

Script:

#!/bin/bash
echo "Checking translation files for required keys..."

# Define the keys to check
KEYS=("add_as" "search" "remove_as" "remove")

# Check each translation file
for file in public/locale/*.json; do
  echo -e "\nChecking file: $file"
  echo "Content:"
  cat "$file"
  
  echo -e "\nChecking for required keys:"
  for key in "${KEYS[@]}"; do
    if grep -q "\"$key\":" "$file"; then
      echo "✓ Found key: $key"
    else
      echo "✗ Missing key: $key"
    fi
  done
  
  echo -e "\nChecking for status-related keys:"
  for status in "unconfirmed" "provisional" "differential" "confirmed" "refuted" "entered-in-error"; do
    if grep -q "\"help_$status\":" "$file"; then
      echo "✓ Found key: help_$status"
    else
      echo "✗ Missing key: help_$status"
    fi
  done
done

Length of output: 84935

{t(status)}
</span>
Expand All @@ -78,11 +101,14 @@ export default function ConditionVerificationStatusMenu<
</DropdownItem>
))}

{props.value && props.onRemove && (
{selectedValue && props.onRemove && (
<DropdownItem
variant="danger"
id="remove-diagnosis"
onClick={() => props.onRemove?.()}
onClick={() => {
setSelectedValue(undefined);
props.onRemove?.();
}}
icon={<CareIcon icon="l-trash-alt" className="text-lg" />}
>
{t("remove")}
Expand All @@ -96,22 +122,18 @@ export default function ConditionVerificationStatusMenu<
export const StatusStyle = {
unconfirmed: {
variant: "warning",
// icon: "l-question",
colors: "text-yellow-500 border-yellow-500",
},
provisional: {
variant: "warning",
// icon: "l-question",
colors: "text-secondary-800 border-secondary-800",
},
differential: {
variant: "warning",
// icon: "l-question",
colors: "text-secondary-800 border-secondary-800",
},
confirmed: {
variant: "primary",
// icon: "l-check",
colors: "text-primary-500 border-primary-500",
},
refuted: {
Expand All @@ -121,7 +143,6 @@ export const StatusStyle = {
},
"entered-in-error": {
variant: "danger",
// icon: "l-ban",
colors: "text-danger-500 border-danger-500",
},
} as const;
Loading