fix: improve pill labels for scalar relationships

[joebuono]

Problem

Scalar relationships only display ID labels, which are not human readable. Customers should be able to identify related records in their forms so that they can bind based on fields other than IDs.

Solution

Scalar relationship labels now look like the labels for model fields:

[firstReadableField] - [ID]

Verification

Manual tests

scalar-pill-labels.mov

Automated tests

• Unit tests added/updated
• E2E tests added/updated

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov-commenter]

Codecov Report

Merging #952 (e5067b2) into main (95f544b) will decrease coverage by 0.02%.
The diff coverage is 95.65%.

❗ Current head e5067b2 differs from pull request most recent head 3123fa3. Consider uploading reports for the commit 3123fa3 to get more accurate results

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

@@            Coverage Diff             @@
##             main     #952      +/-   ##
==========================================
- Coverage   93.01%   93.00%   -0.02%     
==========================================
  Files         120      120              
  Lines        5255     5275      +20     
  Branches     1554     1562       +8     
==========================================
+ Hits         4888     4906      +18     
- Misses        346      348       +2     
  Partials       21       21              

Impacted Files	Coverage Δ
...te-form-definition/helpers/model-fields-configs.ts	99.25% <88.88%> (-0.75%)	⬇️
...act/lib/forms/form-renderer-helper/model-values.ts	91.97% <90.00%> (-0.34%)	⬇️
.../forms/form-renderer-helper/event-handler-props.ts	99.00% <100.00%> (-0.01%)	⬇️
...react/lib/forms/form-renderer-helper/form-state.ts	98.84% <100.00%> (ø)
...b/forms/form-renderer-helper/render-array-field.ts	100.00% <100.00%> (ø)
.../lib/forms/form-renderer-helper/render-checkers.ts	100.00% <100.00%> (ø)
...eact/lib/forms/form-renderer-helper/value-props.ts	97.29% <100.00%> (ø)
.../codegen-ui-react/lib/forms/react-form-renderer.ts	96.46% <100.00%> (ø)

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 95f544b...3123fa3. Read the comment docs.