refactor(studio): replace deprecated ReadOnlyField with KVPair (ASTD-227)

[aray12]

Summary

• Migrates all usages of the deprecated ReadOnlyField component in evaluation/Configurations/ to KVPair from @nemo/common
• Deletes components/common/ReadOnlyField.tsx
• Cleans up explicit '-' fallback strings that are now handled natively by KVPair's defaultValue prop

Closes ASTD-227

Test plan

• Typecheck passes (pnpm --filter nemo-studio-ui typecheck)
• Verify evaluation configuration detail panels render label/value pairs correctly (Configuration Name/ID, task details, metric details)

Summary by CodeRabbit

• Refactor
  • Updated configuration and evaluation detail panels to use a consistent key-value display for read-only attributes, improving uniformity across the interface.
• Bug Fixes
  • When a field value is not available, the UI now leaves it blank instead of showing a dash placeholder.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Enterprise

Run ID: c88c3f49-92b7-432e-a415-25cf430a7555

📥 Commits

Reviewing files that changed from the base of the PR and between 4c2839f and 156908a.

📒 Files selected for processing (1)

• web/packages/studio/src/components/evaluation/Configurations/MetricDisplay.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• web/packages/studio/src/components/evaluation/Configurations/MetricDisplay.tsx

---

📝 Walkthrough

Walkthrough

Removes the local ReadOnlyField component and migrates its four call sites (ConfigurationDetailsPanel, TaskDisplay, LLMJudgeDisplay, MetricDisplay) to use KVPair from @nemo/common. Absent-value fallback changes from the string '-' to undefined across all migrated fields.

Changes

ReadOnlyField → KVPair Migration

Layer / File(s)	Summary
ConfigurationDetailsPanel and TaskDisplay migrations src/components/evaluation/Configurations/ConfigurationDetailsPanel.tsx, src/components/evaluation/Configurations/TaskDisplay.tsx	Both files swap ReadOnlyField for KVPair and update imports; rendered fields (Name, ID, Tags, Task Name, Target Type, Input File) are otherwise structurally unchanged.
LLMJudgeDisplay and MetricDisplay migrations src/components/evaluation/Configurations/LLMJudgeDisplay.tsx, src/components/evaluation/Configurations/MetricDisplay.tsx	LLMJudgeDisplay and all metric-type branches in MetricDisplay switch to KVPair with absent values now passing undefined instead of '-'; string-check adds array-to-comma-string formatting without <Pre> wrapping.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	Title clearly summarizes the main change: replacing ReadOnlyField with KVPair across evaluation configurations, with ticket reference.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch astd-227-remove-deprecated-readonlyfield-component

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

web/packages/studio/src/components/evaluation/Configurations/ConfigurationDetailsPanel.tsx (1)

44-45: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Remove legacy '-' fallback before passing values to KVPair.

Pre-filling config.name/config.id with '-' bypasses KVPair missing-value handling and keeps inconsistent placeholder rendering. Pass raw values and let KVPair apply its defaultValue.

Suggested diff

-  const configName = config.name || '-';
-  const configId = config.id || '-';
+  const configName = config.name;
+  const configId = config.id;

Based on the KVPair fallback contract in web/packages/common/src/components/KVPair/index.tsx and the PR’s fallback-handling objective.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@web/packages/studio/src/components/evaluation/Configurations/ConfigurationDetailsPanel.tsx`
around lines 44 - 45, Remove the legacy `'-'` fallback values from the
configName and configId variable assignments in ConfigurationDetailsPanel.tsx.
Instead of pre-filling these variables with `'-'` when config.name or config.id
are missing, pass the raw values directly (even if undefined) to the KVPair
component. This allows KVPair to apply its own defaultValue handling logic
consistently, rather than bypassing it with a hardcoded placeholder string.
Update lines where configName and configId are assigned to use config.name and
config.id directly without the `||` fallback operator.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@web/packages/studio/src/components/evaluation/Configurations/MetricDisplay.tsx`:
- Around line 34-41: Replace truthy checks with nullish checks for metric
parameter values to avoid suppressing valid falsy values like 0 or false. In the
KVPair components throughout MetricDisplay.tsx (including the check field around
line 34 and reference, ground-truth, prediction fields around lines 48-90),
change the conditional check from a truthy check (params.check ?) to a nullish
check (params.check != null) or similar pattern that only checks for null or
undefined while allowing 0, false, empty strings, and other falsy but valid
values to be rendered properly.

---

Outside diff comments:
In
`@web/packages/studio/src/components/evaluation/Configurations/ConfigurationDetailsPanel.tsx`:
- Around line 44-45: Remove the legacy `'-'` fallback values from the configName
and configId variable assignments in ConfigurationDetailsPanel.tsx. Instead of
pre-filling these variables with `'-'` when config.name or config.id are
missing, pass the raw values directly (even if undefined) to the KVPair
component. This allows KVPair to apply its own defaultValue handling logic
consistently, rather than bypassing it with a hardcoded placeholder string.
Update lines where configName and configId are assigned to use config.name and
config.id directly without the `||` fallback operator.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Enterprise

Run ID: 6fd5cbca-2a32-420d-9c7c-bb181334f705

📥 Commits

Reviewing files that changed from the base of the PR and between 8dc552f and 4c2839f.

📒 Files selected for processing (5)

• web/packages/studio/src/components/common/ReadOnlyField.tsx
• web/packages/studio/src/components/evaluation/Configurations/ConfigurationDetailsPanel.tsx
• web/packages/studio/src/components/evaluation/Configurations/LLMJudgeDisplay.tsx
• web/packages/studio/src/components/evaluation/Configurations/MetricDisplay.tsx
• web/packages/studio/src/components/evaluation/Configurations/TaskDisplay.tsx

💤 Files with no reviewable changes (1)

• web/packages/studio/src/components/common/ReadOnlyField.tsx

[github-actions]

Suite	Lines Covered	Line Rate	Branch Rate
Unit Tests	20036/26510	75.6%	60.9%
Integration Tests	11692/25282	46.2%	19.8%