Fix ReflistStatusTag and StatusTag alignment

[Lihlu]

#4059

Summary by CodeRabbit

• New Features
  • Added a read-only display mode to RefListStatus and StatusTag components that adjusts visual styling and spacing for improved presentation.
  • Designer views now propagate read-only mode so components render with the updated read-only styling when forms are in readonly mode.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The PR adds an optional readOnly prop to RefListStatus and StatusTag components (default false), threads it into their useStyles hooks to adjust styling, and passes readOnly=true from designer components when formMode === 'readonly'.

Changes

Cohort / File(s)	Summary
RefListStatus Component shesha-reactjs/src/components/refListStatus/index.tsx, shesha-reactjs/src/components/refListStatus/styles/styles.ts	Added readOnly?: boolean to public props, defaulted to false in component, passed readOnly into useStyles; updated style hook signature and applied conditional horizontal margin using sheshaStyles.paddingLG when readOnly is true.
StatusTag Component shesha-reactjs/src/components/statusTag/index.tsx, shesha-reactjs/src/components/statusTag/styles/styles.ts	Added readOnly?: boolean to props, defaulted to false, passed { readOnly } into useStyles; updated styles to compute margin conditionally based on readOnly.
Designer Component Integration shesha-reactjs/src/designer-components/refListStatus/index.tsx, shesha-reactjs/src/designer-components/statusTag/index.tsx	Designer wrappers now pass readOnly={formMode === 'readonly'} into respective components.

Sequence Diagram(s)

(omitted — changes are styling/prop propagation and do not introduce multi-component control-flow requiring a sequence diagram)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Thulasizwe/fix/reference lisst status #3243: Modifies the RefListStatus and StatusTag style hooks and prop handling; closely related to useStyles signature changes.

Suggested reviewers

• James-Baloyi
• IvanIlyichev

Poem

🐰 I nibbled code in the pale moonlight,

ReadOnly flags set tidy and bright,
Margins now hop where they ought to be,
Designer whispers, "show, don't edit me,"
A tiny rabbit cheer for UI harmony 🥕

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title 'Fix ReflistStatusTag and StatusTag alignment' accurately reflects the main changes, which add a readOnly prop to control styling (margin/alignment) for RefListStatus and StatusTag components.

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

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@shesha-reactjs/src/components/refListStatus/styles/styles.ts`:
- Line 3: The style hook createStyles call for useStyles is missing a TypeScript
type for its props; define an interface (e.g., RefListStatusStyleProps) that
types dimensionsStyles, fontStyles and readOnly to match their real shapes from
the consuming component, then annotate the second parameter of createStyles with
that interface so the signature becomes createStyles(..., props:
RefListStatusStyleProps); update any usages of dimensionsStyles/fontStyles to
satisfy the new types and export the interface if consumed elsewhere.

In `@shesha-reactjs/src/components/statusTag/styles/styles.ts`:
- Around line 3-9: The style hook useStyles is missing a type annotation for the
second parameter (the props object with readOnly) passed into createStyles;
update the signature for createStyles in useStyles so the second parameter is
typed (e.g., annotate { readOnly } with a proper type like { readOnly?: boolean
} or the same custom Props type used by refListStatus) so the compiler knows the
prop shape and avoid implicit any for readOnly (affecting shaStatusTag margin
calculation that references sheshaStyles.paddingLG).

[coderabbitai]

Actionable comments posted: 0

Caution

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

⚠️ Outside diff range comments (1)

shesha-reactjs/src/components/refListStatus/styles/styles.ts (1)

42-42: Potential runtime error: fontStyles may be undefined.

Since fontStyles is optional in RefListStatusStyleProps, accessing fontStyles.textAlign directly will throw a TypeError when fontStyles is undefined.

Proposed fix using optional chaining

-      justify-content: ${fontStyles.textAlign === 'center' ? 'center' : fontStyles.textAlign === 'right' ? 'flex-end' : 'flex-start'};
+      justify-content: ${fontStyles?.textAlign === 'center' ? 'center' : fontStyles?.textAlign === 'right' ? 'flex-end' : 'flex-start'};