[WC-3477] Do not render image when the image is not available

[r0b1n]

Pull request type

Bug fix (non-breaking change which fixes an issue)

---

Description

The image widget never checked that value is not available while the image is loading, this made it start fetching images with the url /undefined. this change fixes it by not rendering the widget id the image (and fallback) is not available or still loading.

[github-actions]

AI Code Review

⚠️ Approved with suggestions — low-severity items only, safe to merge

---

What was reviewed

File	Change
packages/pluggableWidgets/image-web/src/Image.tsx	Extracted getImageProps to its own module; added guard to skip render when image is falsy
packages/pluggableWidgets/image-web/src/utils/getImageProps.ts	New utility: handles all three datasource branches with Loading status awareness
packages/pluggableWidgets/image-web/src/utils/__tests__/getImageProps.spec.ts	New unit tests covering all datasource/status combinations using dynamic builders
packages/pluggableWidgets/image-web/CHANGELOG.md	Added [Unreleased] / Fixed entry
packages/pluggableWidgets/image-web/package.json	Added @mendix/widget-plugin-test-utils as a devDependency

Skipped (out of scope): pnpm-lock.yaml

---

Findings

⚠️ Low — image guard in Image.tsx hides valid icon renders

File: packages/pluggableWidgets/image-web/src/Image.tsx line 17
Note: The check return image ? ... : null gates rendering on whether the image string is truthy. For the "icon" datasource an icon class can legitimately be an empty string (e.g. a misconfigured glyph/icon), which would silently suppress the widget with no feedback. The fix correctly prevents undefined from reaching the <img src>, but an explicit !== undefined comparison communicates intent more precisely and avoids the empty-string edge case.

// current
return image ? (
    <ImageComponent ... />
) : null;

// suggested
return image !== undefined ? (
    <ImageComponent ... />
) : null;

---

⚠️ Low — imageUrl loading branch passes stale value without null-guard

File: packages/pluggableWidgets/image-web/src/utils/getImageProps.ts lines 41–43
Note: When imageUrl.status === ValueStatus.Loading, imageUrl.value is typed as T | undefined. The code already returns undefined correctly when there is no cached value (the test at spec line 92–98 confirms this). However the conditional uses imageUrl.value (without optional chaining) after the truthy branch has already asserted the status — this is fine because value can be undefined and just results in the stale-URL behaviour. No code change is strictly needed, but adding the test label // stale value would clarify intent for readers.

---

Positives

• Uses dynamic.available / dynamic.loading / dynamic.unavailable builders from @mendix/widget-plugin-test-utils instead of hand-crafted mock objects — exactly the right pattern.
• Extracted getImageProps into a pure function (GetImagePropsInput input type, no React dependency) makes it trivially unit-testable without mounting a component.
• The Loading status is now handled alongside Available for both the main image and fallback — this is the core fix and it's correct: a cached .value?.uri is returned when present, undefined when not.
• All three datasource branches ("image", "imageUrl", "icon") are covered with every status variant; the unknown datasource default branch is tested too.
• CHANGELOG entry is user-facing language (describes visible behaviour, not implementation detail) — consistent with repo conventions.