Merged
Conversation
- Removed unnecessary margin from form items in GlobalSheshaStyles. - Adjusted min-width in ReactTable styles for better alignment. - Added tabCardHeight variable and overflow styles in configuration-studio. - Updated width calculation in GlobalTableStyles to account for margins. - Simplified finalStyles in DatePickerWrapper by removing fixed dimensions. - Introduced preserveDimensionsInDesigner property in LinkComponent for better design consistency. - Cleaned up margin styles in styleLabel to enhance layout.
- Added autoAlignLabel prop to IConfigurableFormItemProps interface for better label alignment control. - Integrated useStyles hook in ConfigurableFormItemLive to apply conditional styles based on autoAlignLabel. - Updated multiple instances of ConfigurableFormItem to utilize the new autoAlignLabel prop for consistent behavior across components.
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (1)
WalkthroughAdded optional Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 7
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
shesha-reactjs/src/components/formDesigner/components/configurableFormItemLive.tsx (1)
21-30:⚠️ Potential issue | 🟠 Major
autoAlignLabelis introduced here but not propagated through settings wrapper.
ConfigurableFormItemSetting(shesha-reactjs/src/components/formDesigner/components/configurableFormItemSetting.tsx:11-59) currently ignoresautoAlignLabeland does not pass it toConfigurableFormItemLive, so designer-side consumers can setautoAlignLabel={false}without effect in that path.Proposed follow-up patch (outside this file)
- export const ConfigurableFormItemSetting: FC<IConfigurableFormItemProps> = ({ - children, - model, - valuePropName, - }) => { + export const ConfigurableFormItemSetting: FC<IConfigurableFormItemProps> = ({ + children, + model, + valuePropName, + autoAlignLabel = true, + }) => { ... return ( <ConfigurableFormItemLive model={{ propertyName: model.propertyName, label: model.label, type: '', id: '', description: model.description, validate: { required: model.validate?.required }, hidden: model.hidden, }} + autoAlignLabel={autoAlignLabel} className={classNames(styles.settingsFormItem, "sha-js-label")} labelCol={{ span: 24 }} wrapperCol={{ span: 24 }} >Also applies to: 61-61
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@shesha-reactjs/src/components/formDesigner/components/configurableFormItemLive.tsx` around lines 21 - 30, ConfigurableFormItemSetting does not forward the autoAlignLabel prop to ConfigurableFormItemLive, so changes to autoAlignLabel in the designer have no effect; update the settings wrapper (ConfigurableFormItemSetting) to accept/retain autoAlignLabel and pass it through to ConfigurableFormItemLive (prop name autoAlignLabel) wherever the live component is rendered, ensuring any existing prop defaulting logic remains consistent with the autoAlignLabel usage in ConfigurableFormItemLive and useStyles.shesha-reactjs/src/designer-components/radio/radio.tsx (1)
35-43:⚠️ Potential issue | 🟡 MinorReplace
anyinonChangeInternalwithunknownand add a proper type guard.Line 40 uses
e: any, which bypasses type safety. Replace withunknowntype and implement explicit type checking as required by the TypeScript guidelines for this project.const onChangeInternal = (e: unknown): void => { if (typeof e === 'object' && e !== null && 'target' in e) { const target = e as { target: { value: unknown } }; customEvents.onChange({ ...e, currentTarget: { value: target.target.value } }); } if (typeof onChange === 'function') onChange(e); };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@shesha-reactjs/src/designer-components/radio/radio.tsx` around lines 35 - 43, The onChangeInternal handler currently types its event parameter as any; change its signature to (e: unknown) and add a runtime type guard that ensures e is a non-null object with a target containing value before accessing e.target.value, then call customEvents.onChange with the spread of e and currentTarget: { value: target.value } (use a narrowed/typed local like target = e as { target: { value: unknown } }); keep the existing fallback call to onChange if it's a function; update references in Factory/ConfigurableFormItem and preserve use of calculatedModel.eventHandlers and customEvents.onChange.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@shesha-reactjs/src/components/formDesigner/components/styles.ts`:
- Around line 25-34: The CSS template for the formItem block contains an extra
closing brace that produces malformed CSS; locate the template literal that
defines the formItem styles (the block including .ant-form-item-additional) and
remove the stray closing '}' so the braces correctly match and the template
literal ends only once (ensure the transform/z-index rules remain inside the
same block and the final closing backtick/parenthesis stays intact).
- Around line 12-31: The rule taking .ant-form-item-additional out of flow
causes overlap; update the styles so .ant-form-item-additional is not absolutely
positioned: remove position: absolute, bottom/left/right, transform and z-index
from .ant-form-item-additional and let it be positioned statically (or relative)
in the normal flow, and instead control spacing by restoring a nonzero
--ant-form-item-margin-bottom or adding a margin-top on
.ant-form-item-additional so validation/help text pushes following items down;
ensure related selectors (.ant-form-item-row and the autoAlignLabel label rule)
still work with the new flow layout.
In `@shesha-reactjs/src/components/reactTable/styles/styles.ts`:
- Line 239: Replace the magic number in the CSS rule "min-width: calc(100% -
2px);" by either adding a clarifying comment explaining what the 2px compensates
for (e.g., border-width or scrollbar offset) or extracting it into a named
constant (e.g., BORDER_ADJUST or reuse DEFAULT_MARGINS) and use that constant in
the calc expression; update the declaration that contains "min-width: calc(100%
- 2px);" in styles.ts and, if you extract a constant, define and export it
alongside other style constants so related width adjustments remain consistent.
In `@shesha-reactjs/src/components/richTextEditor/styles/styles.ts`:
- Around line 23-25: The toolbar's z-index (selector .jodit-toolbar__box) is too
low and gets obscured by other UI layers; update the CSS for .jodit-toolbar__box
to use a much higher stacking context (e.g., z-index: 3000 or another value
above your highest overlay) and ensure it has a positioned ancestor if needed so
the toolbar reliably appears above designer overlays.
In `@shesha-reactjs/src/configuration-studio/styles.ts`:
- Around line 103-107: Align the indentation of the .${csDocEditor} CSS block
with its sibling selectors (e.g., .${csWorkArea}) to match the project's style;
locate the .${csDocEditor} selector in styles.ts and remove the extra leading
spaces so its opening line and inner properties use the same indentation level
as .${csWorkArea} and .${csTreeArea}.
In `@shesha-reactjs/src/designer-components/checkboxGroup/multiCheckbox.tsx`:
- Line 75: The hardcoded "marginTop: '5px'" in the style object for the
MultiCheckbox component overrides any user-configured marginTop in model.style;
remove this hardcoded property (or move it before the spread of ...model.style)
inside the style definition used by MultiCheckbox so that model.style.marginTop
can take precedence and user-configured styles are respected.
In `@shesha-reactjs/src/designer-components/dateField/datePickerWrapper.tsx`:
- Line 42: The wrapper lost its 100% fill defaults causing sizing regressions;
in datePickerWrapper (finalStyles / additionalStyles) restore defaults so inner
picker fills the FormItem wrapper by setting width:'100%' and height:'100%' as
fallback, but still allow explicit sizes from additionalStyles to override them
(e.g. create finalStyles as { width: '100%', height: '100%', ...additionalStyles
}).
---
Outside diff comments:
In
`@shesha-reactjs/src/components/formDesigner/components/configurableFormItemLive.tsx`:
- Around line 21-30: ConfigurableFormItemSetting does not forward the
autoAlignLabel prop to ConfigurableFormItemLive, so changes to autoAlignLabel in
the designer have no effect; update the settings wrapper
(ConfigurableFormItemSetting) to accept/retain autoAlignLabel and pass it
through to ConfigurableFormItemLive (prop name autoAlignLabel) wherever the live
component is rendered, ensuring any existing prop defaulting logic remains
consistent with the autoAlignLabel usage in ConfigurableFormItemLive and
useStyles.
In `@shesha-reactjs/src/designer-components/radio/radio.tsx`:
- Around line 35-43: The onChangeInternal handler currently types its event
parameter as any; change its signature to (e: unknown) and add a runtime type
guard that ensures e is a non-null object with a target containing value before
accessing e.target.value, then call customEvents.onChange with the spread of e
and currentTarget: { value: target.value } (use a narrowed/typed local like
target = e as { target: { value: unknown } }); keep the existing fallback call
to onChange if it's a function; update references in
Factory/ConfigurableFormItem and preserve use of calculatedModel.eventHandlers
and customEvents.onChange.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 80322f42-a310-47d2-9b6e-1c1f737e86bd
📒 Files selected for processing (17)
shesha-reactjs/src/components/formDesigner/components/configurableFormItemLive.tsxshesha-reactjs/src/components/formDesigner/components/model.tsshesha-reactjs/src/components/formDesigner/components/styles.tsshesha-reactjs/src/components/mainLayout/styles/indexStyles.tsshesha-reactjs/src/components/reactTable/styles/styles.tsshesha-reactjs/src/components/richTextEditor/styles/styles.tsshesha-reactjs/src/configuration-studio/styles.tsshesha-reactjs/src/designer-components/attachmentsEditor/attachmentsEditor.tsxshesha-reactjs/src/designer-components/checkboxGroup/checkboxGroup.tsxshesha-reactjs/src/designer-components/checkboxGroup/multiCheckbox.tsxshesha-reactjs/src/designer-components/dataTable/table/styles/styles.tsshesha-reactjs/src/designer-components/dateField/datePickerWrapper.tsxshesha-reactjs/src/designer-components/link/index.tsxshesha-reactjs/src/designer-components/radio/radio.tsxshesha-reactjs/src/designer-components/richTextEditor/index.tsxshesha-reactjs/src/designer-components/styleLabel/styles.tsshesha-reactjs/src/designer-components/textArea/textArea.tsx
💤 Files with no reviewable changes (1)
- shesha-reactjs/src/components/mainLayout/styles/indexStyles.ts
shesha-reactjs/src/components/formDesigner/components/styles.ts
Outdated
Show resolved
Hide resolved
shesha-reactjs/src/components/formDesigner/components/styles.ts
Outdated
Show resolved
Hide resolved
shesha-reactjs/src/designer-components/checkboxGroup/multiCheckbox.tsx
Outdated
Show resolved
Hide resolved
- Enhanced form item styles in formDesigner for better alignment and responsiveness. - Adjusted default margins in designerConstants for a cleaner layout. - Updated ReactTable styles to ensure full width and proper box-sizing. - Removed unnecessary margin from MultiCheckbox component for improved spacing.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@shesha-reactjs/src/components/formDesigner/components/styles.ts`:
- Around line 17-49: styles.formItem currently targets descendants like
".ant-form-item" and ":hover" which won't match the Form.Item root; replace
those descendant selectors with root-aware "&" selectors. Concretely, change
".ant-form-item { ... }" to "& { ... }", change nested ".ant-form-item-row" to
"& .ant-form-item-row" (or keep it nested inside the "&" block), and change
":hover { border-color: ${token.colorPrimary} !important; }" to "&:hover {
border-color: ${token.colorPrimary} !important; }"; ensure child label selector
uses "& > .ant-form-item-label" (or place it inside the "& .ant-form-item-row"
block) so all rules in styles.formItem apply to the Form.Item root as intended.
In `@shesha-reactjs/src/components/formDesigner/utils/designerConstants.ts`:
- Around line 36-41: You changed DEFAULT_FORM_ITEM_MARGINS.left/right and
DEFAULT_MARGINS.horizontal to '0px' which removes horizontal spacing used across
components; inspect and validate visual impact by reviewing uses of
DEFAULT_FORM_ITEM_MARGINS, DEFAULT_MARGINS (and DEFAULT_MARGIN_VALUES in
stylingUtils.ts), RadioGroup (radioGroup.tsx) where Space margins control radio
spacing, DataTable width calc(100% - (2 * horizontal)) in
dataTable/table/styles/styles.ts, and ConfigurableFormItemLive defaults; either
restore the original '3px' horizontal defaults or make the horizontal margin
configurable/overrideable and update the affected calculations/UI (RadioGroup
spacing, DataTable width formula, any dimension logic in StylingUtils and
ConfigurableFormItemLive) to preserve intended layout and run visual/CI snapshot
tests to confirm no regressions.
- Around line 49-52: DEFAULT_MARGINS.horizontal was changed to '0px' which
removes horizontal spacing used throughout the app; restore it to '3px' or
confirm and adjust all dependent calculations: revert DEFAULT_MARGINS.horizontal
back to '3px' in designerConstants (symbol DEFAULT_MARGINS) or, if you intend
zero horizontal margin, update radioGroup.tsx (Space margin usage),
dataTable/table/styles.ts (width calc using 2 * DEFAULT_MARGINS.horizontal), and
stylingUtils (DEFAULT_MARGIN_VALUES and any width/minWidth/maxWidth/height
calculations) so their spacing and size math account for the new value and
preserve intended layout across components.
In `@shesha-reactjs/src/configuration-studio/styles.ts`:
- Line 23: The tabCardHeight constant and its use in csDocEditor height
calculation are causing layout bugs; remove the magic subtraction using
tabCardHeight (or if you must keep a token, set it to Ant Design's cardHeightSM
= 32) and instead make the tabs content use a flex-based layout so the editor
fills available space: update the parent/container that wraps csDocEditor (the
element targeting .ant-tabs-content or the component rendering csDocEditor) to
display: flex (or use a flex class) and set csDocEditor to flex: 1 / height:
auto so it grows to fill the container rather than using calc(100vh -
headerHeight - tabCardHeight). Ensure references to headerHeight remain only for
elements above the tabs, not to size the inner editor.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 75b51f12-46fb-4dd0-bdb9-3ab6360ebef0
📒 Files selected for processing (5)
shesha-reactjs/src/components/formDesigner/components/styles.tsshesha-reactjs/src/components/formDesigner/utils/designerConstants.tsshesha-reactjs/src/components/reactTable/styles/styles.tsshesha-reactjs/src/components/richTextEditor/styles/styles.tsshesha-reactjs/src/configuration-studio/styles.ts
shesha-reactjs/src/components/formDesigner/components/styles.ts
Outdated
Show resolved
Hide resolved
- Integrated labelAlign property into useStyles for ConfigurableFormItemLive to improve label alignment. - Updated ConfigurableFormItemSetting to accept autoAlignLabel prop for consistent styling. - Adjusted styles in useStyles to ensure full width and proper alignment of form items. - Added default margins to MultiCheckbox for improved spacing in the designer components. - Refined GlobalTableStyles to ensure proper width calculation without unnecessary margins.
Contributor
There was a problem hiding this comment.
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)
shesha-reactjs/src/components/formDesigner/components/configurableFormItemLive.tsx (1)
32-35:⚠️ Potential issue | 🟡 MinorMissing dependencies in
useMemocould cause stale layout values.The memo depends only on
[formItemlabelCol, formItemWrapperCol], but the body also readslabelColandwrapperColfrom props. If a parent passes differentlabelCol/wrapperColvalues on a subsequent render, the memo won't recompute and will return stale fallback values.🛠️ Proposed fix
const layout = useMemo(() => { // Make sure the `wrapperCol` and `labelCol` from `FormItemProver` override the ones from the main form return { labelCol: formItemlabelCol || labelCol, wrapperCol: formItemWrapperCol || wrapperCol }; - }, [formItemlabelCol, formItemWrapperCol]); + }, [formItemlabelCol, formItemWrapperCol, labelCol, wrapperCol]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@shesha-reactjs/src/components/formDesigner/components/configurableFormItemLive.tsx` around lines 32 - 35, The useMemo creating layout can return stale values because it omits labelCol and wrapperCol from its dependency array; update the memo for layout (the useMemo that returns { labelCol: formItemlabelCol || labelCol, wrapperCol: formItemWrapperCol || wrapperCol }) to include labelCol and wrapperCol alongside formItemlabelCol and formItemWrapperCol so the memo recomputes when any of those four inputs change.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@shesha-reactjs/src/components/formDesigner/components/styles.ts`:
- Around line 3-6: The UseStylesProps interface is declared but not applied to
the second parameter of createStyles for useStyles; update the createStyles call
to explicitly type its props parameter with UseStylesProps so the callback
signature enforces autoAlignLabel's type (refer to UseStylesProps, createStyles,
and useStyles) and adjust the generic/parameter typing accordingly to default
autoAlignLabel to true while preserving existing destructuring.
---
Outside diff comments:
In
`@shesha-reactjs/src/components/formDesigner/components/configurableFormItemLive.tsx`:
- Around line 32-35: The useMemo creating layout can return stale values because
it omits labelCol and wrapperCol from its dependency array; update the memo for
layout (the useMemo that returns { labelCol: formItemlabelCol || labelCol,
wrapperCol: formItemWrapperCol || wrapperCol }) to include labelCol and
wrapperCol alongside formItemlabelCol and formItemWrapperCol so the memo
recomputes when any of those four inputs change.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 22d5cdce-0772-4985-a3d6-3fab5260ef57
📒 Files selected for processing (4)
shesha-reactjs/src/components/formDesigner/components/configurableFormItemLive.tsxshesha-reactjs/src/components/formDesigner/components/configurableFormItemSetting.tsxshesha-reactjs/src/components/formDesigner/components/styles.tsshesha-reactjs/src/designer-components/checkboxGroup/multiCheckbox.tsx
shesha-reactjs/src/components/formDesigner/components/styles.ts
Outdated
Show resolved
Hide resolved
czwe-01
commented
Mar 23, 2026
…iguration-studio - Removed unused autoAlignLabel prop from UseStylesProps interface in formDesigner. - Enhanced layout in configuration-studio by adjusting flex properties for better responsiveness and alignment of document tabs and editor. - Ensured consistent height and overflow handling for document editor and tabs.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
shesha-reactjs/src/components/formDesigner/components/styles.ts (1)
3-3: 🧹 Nitpick | 🔵 TrivialAdd explicit type annotation to the props parameter.
The second parameter lacks type information, which leaves
autoAlignLabelimplicitly typed. Per coding guidelines, TypeScript should be leveraged as a type system.💡 Proposed fix for type safety
-export const useStyles = createStyles(({ css, cx, token }, { autoAlignLabel = true }) => { +export const useStyles = createStyles(({ css, cx, token }, { autoAlignLabel = true }: { autoAlignLabel?: boolean } = {}) => {Alternatively, extract an interface if this pattern is reused:
interface UseStylesProps { autoAlignLabel?: boolean; } export const useStyles = createStyles(({ css, cx, token }, { autoAlignLabel = true }: UseStylesProps = {}) => {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@shesha-reactjs/src/components/formDesigner/components/styles.ts` at line 3, The props parameter of the createStyles call in useStyles is missing an explicit type, leaving autoAlignLabel implicitly typed; add a TypeScript annotation (e.g., declare a UseStylesProps interface with autoAlignLabel?: boolean and annotate the second parameter as UseStylesProps = {}) and update the createStyles signature (createStyles(({ css, cx, token }, { autoAlignLabel = true }: UseStylesProps = {}) => ...) so autoAlignLabel is strongly typed; reference the createStyles call and the useStyles export when making this change.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@shesha-reactjs/src/configuration-studio/styles.ts`:
- Line 23: Remove the dead constant declaration tabCardHeight since it is no
longer used by the csDocEditor layout (which now uses height: 100%)—locate the
const tabCardHeight = 40; declaration and delete it, and verify there are no
remaining references to tabCardHeight or any dependent calculation with
headerHeight elsewhere in the file to avoid leaving broken expressions.
---
Duplicate comments:
In `@shesha-reactjs/src/components/formDesigner/components/styles.ts`:
- Line 3: The props parameter of the createStyles call in useStyles is missing
an explicit type, leaving autoAlignLabel implicitly typed; add a TypeScript
annotation (e.g., declare a UseStylesProps interface with autoAlignLabel?:
boolean and annotate the second parameter as UseStylesProps = {}) and update the
createStyles signature (createStyles(({ css, cx, token }, { autoAlignLabel =
true }: UseStylesProps = {}) => ...) so autoAlignLabel is strongly typed;
reference the createStyles call and the useStyles export when making this
change.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 94ff2048-4074-49b2-829e-f4332c9f96b6
📒 Files selected for processing (2)
shesha-reactjs/src/components/formDesigner/components/styles.tsshesha-reactjs/src/configuration-studio/styles.ts
James-Baloyi
approved these changes
Mar 23, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
#3557
Summary by CodeRabbit
New Features
Bug Fixes
Style