side menu updates #3134
side menu updates #3134
Conversation
WalkthroughThis pull request encompasses extensive refactoring and enhancements across multiple UI components and utility files. Changes include the removal of unused imports, updates to styling logic and tooltips, dynamic migration of settings via new getSettings functions, and improvements to event handler functions. Several components now support additional properties (e.g., defaultChecked, tabLineColor, showNow) and utilize memoization for performance gains. Overall, the updates streamline configuration retrieval, enhance visual customization, and improve code consistency without altering the public API of the components. Changes
Sequence Diagram(s)sequenceDiagram
participant C as UI Component
participant G as getSettings Function
participant D as DesignerToolbarSettings
participant F as FormSettings Editor
C->>G: Request dynamic settings (data)
G->>D: Generate structured configuration using unique IDs and tabs
D->>F: Return form layout settings and input definitions
F->>C: Render updated settings form
Suggested reviewers
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 10
🔭 Outside diff range comments (1)
shesha-reactjs/src/designer-components/contextPropertyAutocomplete/index.tsx (1)
42-196: 🛠️ Refactor suggestionConsider adding null checks for onValuesChange across all handlers.
There are multiple instances where
onValuesChangeis called directly without checking if it exists, which could lead to runtime errors since it's defined as optional in the props interface.Add null checks using the optional chaining operator to all
onValuesChangecalls:- onValuesChange({ context: state?.context, componentName: state?.componentName }); + onValuesChange?.({ context: state?.context, componentName: state?.componentName }); - onValuesChange({ context: null, componentName: state?.propertyName }); + onValuesChange?.({ context: null, componentName: state?.propertyName }); - onValuesChange({ componentName:value }); + onValuesChange?.({ componentName:value }); - onValuesChange({ context: value }); + onValuesChange?.({ context: value }); - onValuesChange(changedData); + onValuesChange?.(changedData);
🧹 Nitpick comments (25)
shesha-reactjs/src/designer-components/contextPropertyAutocomplete/index.tsx (3)
89-94: Added safeguard against undefined values.The null check prevents the component from updating state and triggering
onValuesChangewith undefined values, which is a good defensive programming practice.However, be aware that
onValuesChangeis called directly without checking if it exists, which could cause an error if it's not provided since it's optional in the props interface.- onValuesChange({ componentName:value }); + onValuesChange?.({ componentName:value });
104-108: Added validation for context value updates.Similar to the componentName handler, this change adds a safeguard against undefined values for context changes.
The same issue exists here with the direct call to
onValuesChange:- onValuesChange({ context: value }); + onValuesChange?.({ context: value });
120-127: Improved property name change handler.This change adds undefined validation and restructures the code to maintain state consistency when updating the property name. The enhanced logic correctly updates the componentName in form data mode.
The same issue exists here with
onValuesChange:- onValuesChange(changedData); + onValuesChange?.(changedData);shesha-reactjs/src/designer-components/button/util.ts (1)
47-47: Consider removing commented codeRather than commenting out the
stylingBoxproperty, consider removing it completely if it's no longer needed. This improves code maintainability by reducing clutter.- // stylingBox: '{"paddingLeft":"15","paddingBottom":"4","paddingTop":"4","paddingRight":"15"}',shesha-reactjs/src/designer-components/settingsInput/interfaces.ts (1)
54-54: Adding aprefixprop is beneficial for customization.Where relevant, provide user hints on styling or usage constraints (e.g., using icons vs. plain text).
shesha-reactjs/src/designer-components/notes/settingsForm.ts (3)
106-110: NewownerIdtext field.Marking
jsSetting: truecan help with dynamic logic. Consider default or placeholder values for better user guidance (e.g., “Enter user or entity ID”).
114-123:ownerTypeusingautocompletewithdataSourceUrl.Leverage caching or memoization if this autocomplete fetch is repeated often. Mark potential error handling if the data fetch fails.
168-175:savePlacementdropdown with default'left'.
- Good approach to specify the default.
- Evaluate if more advanced placements might be required, e.g., “center” or “none.”
shesha-reactjs/src/designer-components/colorPicker/interfaces.ts (1)
9-9: Good addition to the ColorPicker component configuration.The addition of the optional
stylingBoxproperty enhances the styling capabilities of the ColorPicker component. This allows for more flexible customization through JSON-formatted styling configurations.Consider adding a code comment documenting the expected format of the
stylingBoxstring (presumably a JSON string with styling properties) to improve maintainability.shesha-reactjs/src/designer-components/tabs/models.ts (1)
38-38: Good enhancement to the tab styling options.Adding the optional
tabLineColorproperty extends the visual customization capabilities of the tabs component, allowing developers to specify a custom color for the tab line.Consider adding a code comment documenting the expected format of the color value (e.g., hex, rgb, CSS color name) to improve clarity for developers using this component.
shesha-reactjs/src/designer-components/tabs/utils.ts (1)
26-26: Consider using a structured format for styling defaults.The addition of
stylingBoxwith default margin and padding values is useful, but storing these values as a JSON string has some drawbacks:
- Requires additional parsing when used
- Makes it harder to validate at compile time
- Numeric values lack units (e.g., "5" instead of "5px")
Consider refactoring to use a TypeScript interface instead:
- stylingBox: "{\"marginBottom\":\"5\",\"paddingLeft\":\"16\",\"paddingBottom\":\"16\",\"paddingTop\":\"16\",\"paddingRight\":\"16\"}", + stylingBox: JSON.stringify({ + marginBottom: "5px", + paddingLeft: "16px", + paddingBottom: "16px", + paddingTop: "16px", + paddingRight: "16px" + }),Or even better, create a dedicated type:
interface StylingBoxValues { marginBottom?: string; paddingLeft?: string; paddingBottom?: string; paddingTop?: string; paddingRight?: string; } // Then use it with proper typing stylingBox: JSON.stringify({ marginBottom: "5px", paddingLeft: "16px", paddingBottom: "16px", paddingTop: "16px", paddingRight: "16px" } as StylingBoxValues),shesha-reactjs/src/designer-components/statistic/settingsForm.ts (1)
74-74: Fix typo in description.There's a duplicate word "will" in the description text.
- description: 'The value to display in the statistic. This value will will only override if there is no binding to the property name.', + description: 'The value to display in the statistic. This value will only override if there is no binding to the property name.',shesha-reactjs/src/components/notesRenderer/index.tsx (1)
23-28: Ensure the callback is not over-triggered.
CallingonCreated(notes)on every update ofisInProgressornotesmight cause repeated calls when notes are updated frequently. Consider adding an internal condition to compare old/new notes if redundant triggers are not desired.shesha-reactjs/src/designer-components/dataTable/pager/pagerComponent.tsx (1)
28-39: Conditional rendering and styling logic.
MergingjsStylewithstylingBoxAsCSSandfontStyleseffectively composes inline styles. The checkif (model.hidden) return null;is a straightforward approach to skipping rendering. If you need to preserve the DOM node but hide it visually, consider setting a style likedisplay: 'none'instead.shesha-reactjs/src/components/formDesigner/formSettings.ts (1)
5-541: Extensive configuration object creation.
The structure is logically sound and keeps form settings modular. Consider extracting repeated logic (e.g., multiple collapsible panels) into helper functions if you foresee changes or expansions, to reduce code size and improve maintainability.shesha-reactjs/src/designer-components/timeField/settings.ts (2)
5-5: Use stronger typings for thedataparameter.Currently,
datais typed asany, which can make the code more prone to runtime errors. Defining a more specific interface fordatacan help catch type mismatches at compile time and improve code readability.-export const getSettings = (data: any) => { +interface TimeFieldSettingsData { + readOnly?: boolean; + /* define other properties here */ +} + +export const getSettings = (data: TimeFieldSettingsData) => {
15-455: Consider splitting this file into smaller modules for improved maintainability.This file has grown quite large and contains extensive configuration in a single function. Splitting related logic (e.g., common tab settings, appearance settings) into separate utility files or submodules can foster readability and make future maintenance easier.
shesha-reactjs/src/designer-components/container/settingsForm.ts (2)
72-80: Specify a default value fornoDefaultStyling.Without an explicit default, the switch state might be undefined until changed, which can lead to unexpected behavior. Consider initializing it to
false..addSettingsInput({ id: 'noDefaultStyling-s4gmBg31azZC0UjZjpfTm', inputType: 'switch', propertyName: 'noDefaultStyling', label: 'No Default Styling', parentId: 's4gmBg31azZC0UjZjpfTm', size: 'small', jsSetting: true, + defaultValue: false, })
104-145: Remove or re-enable commented-out code.If the collapsible panel related to positioning is no longer needed, it might be cleaner to remove the code entirely. If you plan to restore it later, consider adding a clear comment explaining why it’s commented out and when it will be reintroduced.
shesha-reactjs/src/components/colorPicker/index.tsx (2)
22-23: Document howstyleandstylingBoxshould be used.Both properties are strings, but
stylingBoxis expected to be valid JSON. Clarifying their usage (e.g., adding doc comments or examples) can help avoid confusion for future maintainers.
37-49: Add fallback logic for undefined theme fields.Currently,
readThemeColorreturns theme colors directly, which might beundefinedif the theme object is lacking a property. Although line 83 does a fallback tovalueor"", you could further validate the returned color object to ensure robust error handling in case the theme object is incomplete.shesha-reactjs/src/designer-components/button/buttonGroup/buttonGroup.tsx (2)
202-246: Conditional style handling & background fetching.
You are using asynchronous updates inuseEffectto fetch image blobs for background files. Consider adding error handling (try/catch) or an abort controller to handle network failures or component unmounts gracefully. Otherwise, repeated rendering or network errors might degrade user experience.useEffect(() => { const fetchStyles = async () => { + try { const storedImageUrl = background?.storedFile?.id && background?.type === 'storedFile' ? await fetch(`${backendUrl}/api/StoredFile/Download?id=${background?.storedFile?.id}`, + { signal: abortController.signal, headers: { ...httpHeaders } }) .then((response) => response.blob()) .then((blob) => URL.createObjectURL(blob)) : ''; const bgStyle = getBackgroundStyle(background, jsStyle, storedImageUrl); setBackgroundStyles((prevStyles) => { if (JSON.stringify(prevStyles) !== JSON.stringify(bgStyle)) { return bgStyle; } return prevStyles; }); + } catch (e) { + console.error('Background fetch failed: ', e); + } }; + const abortController = new AbortController(); fetchStyles(); + return () => abortController.abort(); }, [background, backendUrl, httpHeaders, jsStyle]);
291-319: Async item resolution and concurrency check.
UsingPromise.allfor concurrently fetching background images is good. However, if a large number of items exist, network or memory overhead might spike. Consider gracefully handling errors inawait getBackgroundImageUrl(...)so you don't break the entire group.shesha-reactjs/src/designer-components/_settings/utils/border/utils.tsx (1)
32-57: Consider refactoring the nested theme conditions for better maintainability.The code contains multiple nested conditional blocks for theme-based styling, which could make it harder to maintain. Additionally, there's a potential issue when accessing theme colors with possibly undefined keys.
Consider refactoring this section to reduce nesting and add null checks:
- if (theme && readThemeColor(theme)[`${input?.border?.all?.color}`]) { - style[`borderColor`] = readThemeColor(theme)[`${input?.border?.all?.color}`]; - style[`borderWidth`] = input?.border?.all?.width; - style[`borderStyle`] = input?.border?.all?.style; - } else { - if (theme && readThemeColor(theme)[`${input?.border?.bottom?.color}`]) { - style[`borderBottomColor`] = readThemeColor(theme)[`${input?.border?.bottom?.color}`]; - style[`borderBottomWidth`] = input?.border?.bottom?.width; - style[`borderBottomStyle`] = input?.border?.bottom?.style; - } - if (theme && readThemeColor(theme)[`${input?.border?.left?.color}`]) { - style[`borderLeftColor`] = readThemeColor(theme)[`${input?.border?.left?.color}`]; - style[`borderLeftWidth`] = input?.border?.left?.width; - style[`borderLeftStyle`] = input?.border?.left?.style; - } - if (theme && readThemeColor(theme)[`${input?.border?.right?.color}`]) { - style[`borderRightColor`] = readThemeColor(theme)[`${input?.border?.right?.color}`]; - style[`borderRightWidth`] = input?.border?.right?.width; - style[`borderRightStyle`] = input?.border?.right?.style; - } - if (theme && readThemeColor(theme)[`${input?.border?.top?.color}`]) { - style[`borderTopColor`] = readThemeColor(theme)[`${input?.border?.top?.color}`]; - style[`borderTopWidth`] = input?.border?.top?.width; - style[`borderTopStyle`] = input?.border?.top?.style; - } - } + if (!theme) return; + + const themeColors = readThemeColor(theme); + const allColor = input?.border?.all?.color; + + if (allColor && themeColors[allColor]) { + style.borderColor = themeColors[allColor]; + style.borderWidth = input?.border?.all?.width; + style.borderStyle = input?.border?.all?.style; + return; + } + + const applyBorderSide = (side: 'top' | 'right' | 'bottom' | 'left') => { + const color = input?.border?.[side]?.color; + if (color && themeColors[color]) { + style[`border${side.charAt(0).toUpperCase() + side.slice(1)}Color`] = themeColors[color]; + style[`border${side.charAt(0).toUpperCase() + side.slice(1)}Width`] = input?.border?.[side]?.width; + style[`border${side.charAt(0).toUpperCase() + side.slice(1)}Style`] = input?.border?.[side]?.style; + } + }; + + ['bottom', 'left', 'right', 'top'].forEach(applyBorderSide);shesha-reactjs/src/designer-components/_settings/utils.tsx (1)
154-156: Consider adding type annotations to the addPx function.The
addPxfunction lacks type annotations, which would improve type safety and code readability.-export const addPx = (value) => { +export const addPx = (value: string | number | null | undefined): string | null => { return !value ? null : /^\d+(\.\d+)?$/.test(value) ? `${value}px` : value; };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
.github/workflows/npm-build-test.ymlis excluded by none and included by noneshesha-functional-tests/adminportal/package.jsonis excluded by!shesha-functional-tests/**and included by none
📒 Files selected for processing (107)
shesha-core/src/Shesha.Application/Startup/IShaApplicationModuleConfiguration.cs(0 hunks)shesha-reactjs/src/components/buttonGroupConfigurator/buttonGroupItem.tsx(3 hunks)shesha-reactjs/src/components/buttonGroupConfigurator/itemSettings.ts(2 hunks)shesha-reactjs/src/components/chevron/styles.ts(1 hunks)shesha-reactjs/src/components/colorPicker/index.tsx(5 hunks)shesha-reactjs/src/components/configurableSidebarMenu/configurator/groupSettings.ts(1 hunks)shesha-reactjs/src/components/configurableSidebarMenu/configurator/itemProperties.tsx(2 hunks)shesha-reactjs/src/components/configurableSidebarMenu/configurator/itemSettings.ts(1 hunks)shesha-reactjs/src/components/dropdown/dropdown.tsx(1 hunks)shesha-reactjs/src/components/endpointsAutocomplete/endpointsAutocomplete.tsx(1 hunks)shesha-reactjs/src/components/entityPicker/index.tsx(0 hunks)shesha-reactjs/src/components/formDesigner/components/utils.ts(1 hunks)shesha-reactjs/src/components/formDesigner/formSettings.json(0 hunks)shesha-reactjs/src/components/formDesigner/formSettings.ts(1 hunks)shesha-reactjs/src/components/formDesigner/formSettingsEditor.tsx(2 hunks)shesha-reactjs/src/components/iconPicker/index.tsx(1 hunks)shesha-reactjs/src/components/kanban/index.tsx(1 hunks)shesha-reactjs/src/components/keyInformationBar/index.tsx(1 hunks)shesha-reactjs/src/components/keyInformationBar/utils.ts(0 hunks)shesha-reactjs/src/components/mainLayout/styles/indexStyles.ts(2 hunks)shesha-reactjs/src/components/notesRenderer/index.tsx(2 hunks)shesha-reactjs/src/components/notesRendererBase/index.tsx(1 hunks)shesha-reactjs/src/components/panel/styles/styles.ts(2 hunks)shesha-reactjs/src/components/sectionSeparator/index.tsx(1 hunks)shesha-reactjs/src/components/sectionSeparator/utils.ts(0 hunks)shesha-reactjs/src/components/statistic/index.tsx(1 hunks)shesha-reactjs/src/components/statistic/styles/styles.ts(1 hunks)shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts(2 hunks)shesha-reactjs/src/components/tablePager/style.ts(2 hunks)shesha-reactjs/src/designer-components/_settings/components/formItem.tsx(1 hunks)shesha-reactjs/src/designer-components/_settings/settingsControl.tsx(3 hunks)shesha-reactjs/src/designer-components/_settings/styles/styles.ts(3 hunks)shesha-reactjs/src/designer-components/_settings/utils.tsx(1 hunks)shesha-reactjs/src/designer-components/_settings/utils/background/utils.tsx(2 hunks)shesha-reactjs/src/designer-components/_settings/utils/border/utils.tsx(5 hunks)shesha-reactjs/src/designer-components/_settings/utils/font/utils.tsx(2 hunks)shesha-reactjs/src/designer-components/button/button.tsx(2 hunks)shesha-reactjs/src/designer-components/button/buttonGroup/buttonGroup.tsx(6 hunks)shesha-reactjs/src/designer-components/button/buttonGroup/buttonGroupComponent.tsx(3 hunks)shesha-reactjs/src/designer-components/button/buttonGroup/models.ts(1 hunks)shesha-reactjs/src/designer-components/button/buttonGroup/settingsForm.ts(2 hunks)shesha-reactjs/src/designer-components/button/buttonGroup/utils.tsx(2 hunks)shesha-reactjs/src/designer-components/button/settingsForm.ts(3 hunks)shesha-reactjs/src/designer-components/button/util.ts(1 hunks)shesha-reactjs/src/designer-components/codeEditor/codeEditor.tsx(2 hunks)shesha-reactjs/src/designer-components/codeEditor/styles.ts(1 hunks)shesha-reactjs/src/designer-components/collapsiblePanel/settingsForm.ts(2 hunks)shesha-reactjs/src/designer-components/colorPicker/index.tsx(3 hunks)shesha-reactjs/src/designer-components/colorPicker/interfaces.ts(1 hunks)shesha-reactjs/src/designer-components/colorPicker/settingsForm.ts(4 hunks)shesha-reactjs/src/designer-components/configurableActionsConfigurator/genericArgumentsEditor.tsx(1 hunks)shesha-reactjs/src/designer-components/container/containerComponent.tsx(1 hunks)shesha-reactjs/src/designer-components/container/data.ts(1 hunks)shesha-reactjs/src/designer-components/container/settingsForm.ts(2 hunks)shesha-reactjs/src/designer-components/contextPropertyAutocomplete/index.tsx(5 hunks)shesha-reactjs/src/designer-components/dataTable/pager/pagerComponent.tsx(2 hunks)shesha-reactjs/src/designer-components/dataTable/pager/settingsForm.ts(1 hunks)shesha-reactjs/src/designer-components/dataTable/tableContext/settingsForm.ts(2 hunks)shesha-reactjs/src/designer-components/dataTable/tableViewSelector/settingsForm.ts(1 hunks)shesha-reactjs/src/designer-components/dateField/settingsForm.ts(2 hunks)shesha-reactjs/src/designer-components/dropdown/settingsForm.ts(6 hunks)shesha-reactjs/src/designer-components/endpointsAutocomplete/settingsForm.json(1 hunks)shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts(1 hunks)shesha-reactjs/src/designer-components/iconPicker/iconPickerWrapper.tsx(3 hunks)shesha-reactjs/src/designer-components/iconPicker/index.tsx(2 hunks)shesha-reactjs/src/designer-components/iconPicker/settingsForm.ts(1 hunks)shesha-reactjs/src/designer-components/iconPicker/utils.ts(1 hunks)shesha-reactjs/src/designer-components/image/settingsForm.ts(4 hunks)shesha-reactjs/src/designer-components/inputComponent/index.tsx(8 hunks)shesha-reactjs/src/designer-components/inputComponent/styles.ts(0 hunks)shesha-reactjs/src/designer-components/itemListConfigurator/propertiesPanel.tsx(2 hunks)shesha-reactjs/src/designer-components/kanban/settingsForm.ts(25 hunks)shesha-reactjs/src/designer-components/kanban/utils.ts(1 hunks)shesha-reactjs/src/designer-components/keyInformationBar/settingsForm.ts(2 hunks)shesha-reactjs/src/designer-components/notes/notesComponent.tsx(5 hunks)shesha-reactjs/src/designer-components/notes/settingsForm.ts(3 hunks)shesha-reactjs/src/designer-components/numberField/control.tsx(4 hunks)shesha-reactjs/src/designer-components/numberField/numberField.tsx(1 hunks)shesha-reactjs/src/designer-components/numberField/settingsForm.ts(4 hunks)shesha-reactjs/src/designer-components/numberField/styles.ts(1 hunks)shesha-reactjs/src/designer-components/numberField/utils.ts(2 hunks)shesha-reactjs/src/designer-components/passwordCombo/settingsForm.ts(5 hunks)shesha-reactjs/src/designer-components/propertiesTabs/style.ts(1 hunks)shesha-reactjs/src/designer-components/refListStatus/settings.ts(2 hunks)shesha-reactjs/src/designer-components/sectionSeprator/index.tsx(4 hunks)shesha-reactjs/src/designer-components/sectionSeprator/interfaces.ts(1 hunks)shesha-reactjs/src/designer-components/sectionSeprator/settingsForm.ts(1 hunks)shesha-reactjs/src/designer-components/settingsInput/interfaces.ts(7 hunks)shesha-reactjs/src/designer-components/statistic/index.tsx(7 hunks)shesha-reactjs/src/designer-components/statistic/settingsForm.ts(15 hunks)shesha-reactjs/src/designer-components/statistic/utils.ts(2 hunks)shesha-reactjs/src/designer-components/styleLabel/labelConfigurator.tsx(2 hunks)shesha-reactjs/src/designer-components/styleLabel/utils.tsx(1 hunks)shesha-reactjs/src/designer-components/switch/interfaces.ts(1 hunks)shesha-reactjs/src/designer-components/switch/switch.tsx(2 hunks)shesha-reactjs/src/designer-components/tabs/index.tsx(2 hunks)shesha-reactjs/src/designer-components/tabs/models.ts(1 hunks)shesha-reactjs/src/designer-components/tabs/settingsForm.ts(10 hunks)shesha-reactjs/src/designer-components/tabs/styles.ts(4 hunks)shesha-reactjs/src/designer-components/tabs/utils.ts(1 hunks)shesha-reactjs/src/designer-components/textField/settingsForm.ts(2 hunks)shesha-reactjs/src/designer-components/textField/styles.ts(1 hunks)shesha-reactjs/src/designer-components/textField/utils.ts(1 hunks)shesha-reactjs/src/designer-components/timeField/index.tsx(2 hunks)shesha-reactjs/src/designer-components/timeField/settings.ts(1 hunks)shesha-reactjs/src/designer-components/timeField/timePickerWrapper.tsx(3 hunks)shesha-reactjs/src/designer-components/wizard/settingsForm.ts(2 hunks)
⛔ Files not processed due to max files limit (14)
- shesha-reactjs/src/designer-components/wizard/styles.ts
- shesha-reactjs/src/designer-components/wizard/tabs.tsx
- shesha-reactjs/src/designer-components/wizard/utils.ts
- shesha-reactjs/src/providers/appConfigurator/configurable-actions/generic-item-arguments.ts
- shesha-reactjs/src/providers/dynamicActions/implementations/dataSourceDynamicMenu/urlDynamicMenuItem/urlSettings.ts
- shesha-reactjs/src/providers/dynamicModal/configurable-actions/close-dialog-arguments.json
- shesha-reactjs/src/providers/dynamicModal/configurable-actions/show-confirmation-arguments.ts
- shesha-reactjs/src/providers/dynamicModal/configurable-actions/show-dialog-arguments.json
- shesha-reactjs/src/providers/dynamicModal/index.tsx
- shesha-reactjs/src/providers/form/models.ts
- shesha-reactjs/src/providers/shaRouting/actions/navigate-arguments.ts
- shesha-reactjs/src/providers/sheshaApplication/configurable-actions/api-call.ts
- shesha-reactjs/src/providers/sheshaApplication/configurable-actions/execute-script.ts
- shesha-reactjs/src/providers/sheshaApplication/configurable-actions/show-message.ts
💤 Files with no reviewable changes (6)
- shesha-core/src/Shesha.Application/Startup/IShaApplicationModuleConfiguration.cs
- shesha-reactjs/src/components/entityPicker/index.tsx
- shesha-reactjs/src/designer-components/inputComponent/styles.ts
- shesha-reactjs/src/components/sectionSeparator/utils.ts
- shesha-reactjs/src/components/keyInformationBar/utils.ts
- shesha-reactjs/src/components/formDesigner/formSettings.json
🔇 Additional comments (279)
shesha-reactjs/src/components/panel/styles/styles.ts (2)
33-35: Good addition of background styling propertiesAdding these new properties enhances the styling options for panel components, allowing for more control over background images.
125-127: LGTM! Great implementation of background style propertiesThe implementation properly applies the new background styling properties to the
.ant-collapse-contentclass, following the same pattern as other style properties in the file.shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts (1)
162-178: Improved organization of query builder settings.The refactoring from using a direct
addSettingsInputtoaddSettingsInputRowprovides better structural organization for the entity filter configuration. The conditional visibility based on entityType is a good addition that improves the user experience.shesha-reactjs/src/designer-components/styleLabel/labelConfigurator.tsx (4)
16-16: Function signature and prop destructuring looks clear.The component structure properly destructures the props and renames
labelAlignOptionstolabelAlignfor more concise usage in the component.
22-22: Standardized label text for better consistency.The change from a dynamic label that included the
labelprop to a static "Label Align" improves consistency in the UI.
34-35: Improved label and added tooltip for better user guidance.The standardization of label text and addition of matching tooltip improves user experience and accessibility.
41-43: Refactored icon implementation for cleaner code structure.The change from using Ant Design's
Tooltipcomponent directly to using string identifiers for icons makes the code more maintainable and aligns with best practices for component configuration.shesha-reactjs/src/designer-components/_settings/styles/styles.ts (6)
3-3: Parameter removed from useStyles function signatureThe
prefixClsparameter has been removed from the function signature. This is a safe change as long asprefixClswasn't being used elsewhere in the component. Looking at the code, I don't see any references to this parameter, so the removal appears to be a clean refactoring.
41-42: Improved tooltip alignmentAdding a consistent right margin (8px) to the tooltip improves UI consistency and creates better spacing between elements.
44-46: Added positioning for required field indicatorGood addition of styling for the required field indicator (
.sha-required-mark). This ensures proper positioning of the required mark in relation to form labels.
76-76: Simplified sidebar container positioningThe top position for
.sidebar-containerhas been simplified to a static value (-25px), removing what was likely conditional logic. This standardization makes the styling more consistent and easier to maintain.
81-81: Updated vertical settings positioning logicThe conditional positioning for vertical settings has been updated to use different values based on the
hasCodeparameter. The new value whenhasCodeis true (-38px) appears to be an adjustment to better align elements in this specific case.
62-62: Use of theme token for colorGood use of the theme token system by applying
token.colorPrimaryfor the text color. This ensures the component respects the application's theme settings and maintains consistency across the UI.shesha-reactjs/src/components/dropdown/dropdown.tsx (1)
168-168: Improved defensive programming to prevent potential errors. LGTM!Adding the nullish coalescing operator (
??) with an empty array fallback is a great improvement. This prevents runtime errors that would occur when trying to call.map()on a null or undefined value whendataSourceType === 'values'. The component is now more robust when handling edge cases.shesha-reactjs/src/components/statistic/index.tsx (1)
11-15: Good use of dynamic styling based on props.Using the
valueStyle?.fontSizeto dynamically set the font size in the styles token is a clean approach that enhances component flexibility.shesha-reactjs/src/components/statistic/styles/styles.ts (2)
25-25: Good use of dynamic font sizing.Replacing hardcoded font size with dynamic
token?.fontSizemakes the component more flexible and responsive. The optional chaining is also a good practice to prevent errors if token is undefined.Also applies to: 29-29
32-35: Clean utility class addition.Adding a zero-padding/margin container class is a clean approach to handle the container styling. This supports the changes in the component's structure in index.tsx.
shesha-reactjs/src/designer-components/contextPropertyAutocomplete/index.tsx (3)
62-62: Enhanced data passing for context mode.The
onValuesChangecall now includes bothcontextandcomponentName, ensuring that all relevant data is passed when switching to context mode.
67-67: Improved data handling for form data mode.The component now sets the
componentNameto the currentpropertyNamewhen switching to form data mode, ensuring consistency between these related fields.
147-147: Removed redundant className from buttons.The
className={styles.bindingOptionsBtn}was removed from both buttons, which seems to be part of a styling consolidation across the codebase as mentioned in the PR summary.Also applies to: 150-150
shesha-reactjs/src/designer-components/inputComponent/index.tsx (8)
86-90: Effective approach to default value initializationThe new useEffect hook properly initializes the component value with defaultValue when value is not provided. This ensures consistent behavior across all input types and enhances the developer experience.
49-51: Properly integrated new tooltipAlt propertyThe addition of the tooltipAlt property expands the component's flexibility for displaying alternate tooltips, which is well utilized in the Button component implementation.
116-116: Consistent approach to handling default valuesThe pattern of using
value || defaultValuehas been consistently applied across multiple input components, which ensures a more predictable fallback behavior when value is undefined or null.Also applies to: 124-124, 141-141, 150-150, 157-157, 163-163, 166-166, 179-179, 191-191, 322-322, 337-337
131-133: Improvement in Switch component props handlingThe Switch component now correctly differentiates between defaultValue and defaultChecked, with appropriate fallback logic. This aligns with Ant Design's API expectations for controlled vs uncontrolled components.
144-144: Enhanced tooltip fallback logicUsing
tooltip || labelas a fallback provides better user guidance when tooltip is not explicitly provided. This is a good UX improvement.
171-173: Button component enhancements with conditional iconsThe Button component now intelligently switches between icon/tooltip and iconAlt/tooltipAlt based on the current value state, improving the toggle button experience.
256-257: Form layout improvement in ItemListConfiguratorModalChanging labelCol and wrapperCol both to { span: 24 } creates a more modern, full-width vertical layout that improves space utilization in the modal.
1-1: Dependency import alignmentThe addition of useEffect to the React imports properly supports the new initialization logic without unnecessary separate imports.
shesha-reactjs/src/designer-components/switch/interfaces.ts (1)
6-6: Added defaultChecked property to interfaceThis addition enhances the configurability of the switch component by allowing a default checked state to be specified. This is consistent with standard React patterns and provides more flexibility when using the component.
shesha-reactjs/src/designer-components/itemListConfigurator/propertiesPanel.tsx (2)
29-29: Improved code formattingMoving the closing parenthesis to a new line improves readability for the useDebouncedCallback function.
55-59: Enhanced JSX structure for readabilityThe conditional rendering has been reformatted for better code readability without changing the functionality. The new structure more clearly separates the two conditional branches.
shesha-reactjs/src/components/endpointsAutocomplete/endpointsAutocomplete.tsx (1)
158-158: Added size prop to VerbSelectorThe size prop is now being passed from the parent component to VerbSelector, ensuring consistent sizing behavior throughout the component hierarchy. This improves the visual consistency of the UI.
shesha-reactjs/src/designer-components/propertiesTabs/style.ts (1)
20-30: Added flex layout and text overflow handling for buttonsThese CSS enhancements improve the usability and appearance of buttons by:
- Using flex layout for better content alignment
- Preventing text overflow with ellipsis
- Ensuring consistent width constraints
This will help with long button text content and maintain a cleaner UI.
shesha-reactjs/src/components/tablePager/style.ts (1)
3-14: Improved robustness with optional chainingThe addition of optional chaining (
?.) when accessing style properties ensures the component won't throw errors when style is undefined or missing properties. This is a good defensive programming approach.Also applies to: 25-37
shesha-reactjs/src/designer-components/_settings/settingsControl.tsx (2)
12-15: Well-implemented mode switching functionalityThe addition of the mode switching functionality with clear imports and a concise handler function is well-structured and follows best practices.
Also applies to: 82-85
118-130: Good UI enhancement with mode switching buttonThe button implementation provides intuitive visual feedback with appropriate icon changes based on the current mode and danger styling when relevant. The conditional rendering ensures the components only display when appropriate.
shesha-reactjs/src/components/mainLayout/styles/indexStyles.ts (2)
125-129: Proper z-index configuration for tabs dropdownSetting a higher z-index value ensures the tabs dropdown appears above other UI elements, preventing overlap issues.
147-159: Well-structured configurable button stylesThe new
.sha-toolbar-btn-configurableclass provides consistent styling with proper text overflow handling, ensuring long text doesn't break the layout.shesha-reactjs/src/designer-components/button/util.ts (1)
40-46: Good addition of shadow styling optionsThe new shadow property enables more advanced button styling with comprehensive control over shadow appearance.
shesha-reactjs/src/components/configurableSidebarMenu/configurator/groupSettings.ts (7)
1-4: Imports look good.The imports for DesignerToolbarSettings, nanoid, and FormLayout are appropriate for the functionality being implemented.
5-9: Function signature and initialization are well-structured.The
getGroupSettingsfunction accepts a data parameter and sets up unique IDs for tabs, which is a good practice for ensuring component uniqueness.
10-25: Well-structured configuration object with appropriate settings.The configuration object returned by the function is well-organized, with properly defined searchable tabs and common tab settings.
26-53: Common tab inputs are well-defined.The common tab includes essential inputs like title, tooltip, and icon picker with appropriate validation rules. Good use of the DesignerToolbarSettings builder pattern.
54-64: Hidden property is properly implemented.The "Hide" switch in the common tab is properly configured with the right property name and JavaScript setting flag.
65-82: Security tab configuration is well-implemented.The security tab with permissions input is correctly configured with the readOnly property using dynamic evaluation.
86-93: Form settings are appropriately configured.The form layout settings with appropriate column spans and layout type are well-defined. The colon setting to false is a good UI choice.
shesha-reactjs/src/designer-components/button/buttonGroup/models.ts (2)
2-2: Import statement correctly updated.The import statement now includes
IStyleTypealongsideIConfigurableFormComponent, which is a good update for extending styling capabilities.
9-9: Interface extension properly implemented.The
IButtonGroupPropsinterface now extends bothIBaseButtonGroupPropsandIStyleType, enhancing the component with styling capabilities.shesha-reactjs/src/designer-components/iconPicker/settingsForm.ts (13)
1-4: Imports are appropriate for the functionality.The imports for nanoid, DesignerToolbarSettings, and FormLayout are well-chosen for this settings form implementation.
5-11: Function signature and initialization are well-structured.The
getSettingsfunction accepts a data parameter and initializes unique IDs for tabs and components, which is good practice for component uniqueness.
12-25: Settings configuration is well-organized.The configuration object structure with searchable tabs and proper layout settings is well-implemented.
26-54: Common tab configuration looks good.The Common tab includes essential inputs like property name autocomplete, label configurator, and tooltip with appropriate settings.
55-82: Input row configuration is well-implemented.The settings input row with icon picker and dropdown for icon alignment is properly configured with appropriate default values.
83-105: Edit mode and visibility controls are well-configured.The input row for edit mode selection and visibility toggle is properly set up with appropriate default values and JavaScript settings.
109-128: Appearance tab with property router is well-implemented.The appearance tab with property router for responsive design is properly configured with dynamic evaluation of the designer device.
129-206: Icon styling panel is comprehensive.The collapsible panel for icon styling includes comprehensive controls for color, size, background, border radius, and border properties with appropriate default values.
207-292: Dimensions styling panel is well-structured.The dimensions styling panel provides comprehensive controls for width, height, min/max dimensions with appropriate tooltips and icons.
293-312: Margin and padding panel looks good.The margin and padding panel with style box is properly configured for layout customization.
318-342: Custom styles panel is well-implemented.The custom styles panel with code editor allows for advanced styling with appropriate description and JavaScript setting flag.
349-365: Security tab is properly configured.The security tab with permissions input is correctly set up with dynamic evaluation of the readOnly property.
369-375: Form settings are appropriately configured.The form layout settings with vertical layout and full-width columns are well-defined for this type of settings form.
shesha-reactjs/src/designer-components/styleLabel/utils.tsx (1)
1-6: Good refactoring of labelAlignOptions.The refactoring of
labelAlignOptionsimproves the code by:
- Adding explicit type annotation (
IRadioOption[])- Replacing JSX icon elements with string identifiers
- Removing unnecessary React import
This change simplifies the code and makes it more maintainable.
shesha-reactjs/src/designer-components/settingsInput/interfaces.ts (7)
10-11: Good addition of helper types.Introducing
GetResultTypeFuncandIHttpVerbexpands the interface. This should improve type safety and clarity when dealing with HTTP verbs or dynamic result types. Ensure consistent usage across the codebase.
32-32: Inconsistent summary regardingendpointsAutocomplete.The AI-generated summary mentioned removing
'endpointsAutoComplete'from the union type, but it remains in line 28. The newly added'typeAutoComplete'expands available field configurations. Verify that no references still assume'endpointsAutoComplete'is removed.Likely an incorrect or invalid review comment.
52-52: Optional alt-text for tooltips is a helpful addition.
tooltipAltcan improve accessibility and clarity. Ensure consistent usage across the UI to avoid confusion.
74-74:availableHttpVerbs?: IHttpVerb[];extends the configurability.When populating this array, ensure compatibility with the newly introduced
httpVerbproperty in the UI components, and confirm that the system gracefully handles empty or null arrays.
86-86:autoSizeprop is a convenient addition.Be sure to test edge cases (e.g., extremely small or large containers) to confirm that auto-sizing doesn’t break layout flows.
121-121:defaultCheckedprop is now available.This additional property can simplify toggle-based UIs. Confirm that default states do not clash with user-provided states or dynamic conditions.
3-4:❓ Verification inconclusive
Imports extended to incorporate advanced editor & form capabilities.
These newly added imports (
CodeTemplateSettings,ResultType,IObjectMetadata) further enrich the interface definitions. Ensure they are actually utilized to prevent unused imports, and consider verifying that none of these additions cause circular references.
🏁 Script executed:
#!/bin/bash # Verify references to newly imported symbols to confirm usage and avoid dead imports rg -A 3 "CodeTemplateSettings|ResultType|IObjectMetadata"Length of output: 59
Verification Required: Confirm Usage of Newly Imported Symbols
The extended imports in
shesha-reactjs/src/designer-components/settingsInput/interfaces.ts(lines 3‑4) were intended to support advanced editor and form capabilities. However, our automated search for usages of the imported symbols (CodeTemplateSettings,ResultType, andIObjectMetadata) returned no results. This absence could indicate one of the following:
- These symbols might not yet be referenced elsewhere in the codebase, making them potential dead imports.
- The search may have missed non-conventional usages or dynamic references.
Action Items:
- Manual Verification: Please check the broader project (including dynamically imported or conditionally used code) to confirm that these symbols are indeed utilized.
- Circular Dependency Check: Additionally, verify that incorporating these imports doesn’t introduce circular references.
If these imports are not required, consider removing them to keep the code clean.
shesha-reactjs/src/designer-components/notes/settingsForm.ts (12)
7-10: Reorganized tab IDs for clarity.Defining
commonTabId,dataTabId,eventsTabId, andappearanceTabIdclarifies the tab structure. Ensure that existing references to the old tab IDs are updated throughout, or removed if no longer in use.
27-27: New "Common" tab setup.Renaming or reorganizing to a "Common" tab can improve discoverability of frequently used settings. Ensure the naming aligns with the rest of the system’s terminology.
32-34: EnsuringreadOnlylogic is consistent.The code-based readOnly property references
getSettingValue(data?.readOnly). Confirm thatgetSettingValuehandles edge cases (e.g., undefined data).
47-67: IntroducingautoSizeandallowDeletetoggles.
autoSizemight need clear user instructions, especially if there's a maximum auto-size limit.allowDeleteis a helpful user-driven feature; confirm that the related deletion logic is safe and properly validated.
68-90: RefinededitModeandhiddentoggles.
editModewith default'inherited'is a neat approach; ensure it doesn't conflict with other global or parent-level edit modes.- The
hiddenswitch is straightforward but double-check logic for nested or conditionally hidden elements to avoid confusion.
95-99: Introducing a dedicated "Data" tab.This separation from the "Common" tab clarifies the data-driven properties, especially for
ownerIdandownerType. Confirm that existing flows, if any, reference these new fields properly.
102-104:readOnlyusage in Data tab validations.Again, using
_codefor readOnly could risk injection if not sanitized. Verify the code injection risk is minimal.
130-133: New "Events" tab.This ensures event settings like
onCreatedare segregated for clarity. Great for maintainability.
137-138: Reusing the code-based readOnly approach.Same caution applies regarding code injection, as discussed.
157-159: New "Appearance" tab introduced.Centralizing design or styling settings (e.g.,
savePlacement) clarifies usage. This fosters a better separation of concerns.
164-165:readOnlyusage on appearance settings.Track uniform usage of the readOnly property across tabs to avoid inconsistent user experiences.
197-198: Validation object introduced withjsSetting: true.Ensure this dynamic validation merges seamlessly with the form’s higher-level validations.
shesha-reactjs/src/designer-components/endpointsAutocomplete/settingsForm.json (1)
181-181: Improved label casing from "Http Verb" to "HTTP Verb".This small UI improvement aligns with standard acronym usage.
shesha-reactjs/src/components/notesRendererBase/index.tsx (1)
108-108: Fixed grammatical error in empty state message.Good catch on correcting the grammatical error in the empty text message from "The are no notes" to "There are no notes". This improves the clarity and correctness of the user interface.
shesha-reactjs/src/designer-components/wizard/settingsForm.ts (2)
526-526: Consistency improvement in tooltip text capitalization.This change ensures "Blur Radius" follows proper title case formatting, which is more consistent with other tooltip labels in the codebase.
536-536: Consistency improvement in tooltip text capitalization.This change ensures "Spread Radius" follows proper title case formatting, matching the styling of other tooltips throughout the UI.
shesha-reactjs/src/designer-components/keyInformationBar/settingsForm.ts (2)
441-441: Consistency improvement in tooltip text capitalization.This change standardizes the "Blur Radius" tooltip text with proper title case formatting, matching the style used in other components.
451-451: Consistency improvement in tooltip text capitalization.This change standardizes the "Spread Radius" tooltip text with proper title case formatting, ensuring a consistent appearance of tooltips throughout the UI.
shesha-reactjs/src/designer-components/numberField/styles.ts (1)
4-16: Improved styling selector specificity for number field input.The changes update the CSS class name and selector to better target Ant Design's number input component structure. The addition of
!importantensures the custom font-weight properly overrides any default styling from the Ant Design library.The updates correctly align with the actual DOM structure:
- Changed class name from "sha-inputNumber" to "sha-ant-input-number-input"
- Updated CSS selector from
.ant-inputto.ant-input-number-input- Added
!importantto the font-weight property to ensure style applicationshesha-reactjs/src/designer-components/sectionSeprator/interfaces.ts (1)
12-13: Enhanced component customization with new dimension properties.The addition of
lineWidthandlineHeightproperties to theISectionSeparatorComponentPropsinterface provides finer control over the section separator's appearance, allowing developers to customize these dimensions independently.These new optional string properties will work well with CSS units (px, em, %, etc.) to give more precise control over the separator's rendering.
shesha-reactjs/src/designer-components/refListStatus/settings.ts (2)
515-520: Consistent Tooltip Capitalization for Blur Radius
The tooltip text for the blur radius input was updated from “Blur radius” to “Blur Radius.” This change improves consistency and clarity across the UI components.
522-530: Consistent Tooltip Capitalization for Spread Radius
Similarly, the tooltip text for the spread radius input was updated from “Spread radius” to “Spread Radius,” ensuring a uniform style.shesha-reactjs/src/components/kanban/index.tsx (1)
9-9: Updated Import Path foraddPxUtility
The import foraddPxhas been changed from a relative path referencing keyInformationBar to an absolute path (@/designer-components/_settings/utils). This centralizes the utility function and is in line with the overall refactoring for improved maintainability.shesha-reactjs/src/designer-components/textField/settingsForm.ts (1)
1-174: No Additional Changes Detected Beyond Standard Configuration
This file shows no new changes marked with revision annotations. The settings structure appears consistent with the new design standards (including tooltip text conventions applied in other components).shesha-reactjs/src/components/chevron/styles.ts (1)
1-2: RefactoredaddPxImport for Centralized Utility Usage
The import foraddPxwas updated to use the absolute import from@/designer-components/_settings/utilsinstead of the old relative path. This change improves consistency across the codebase by centralizing common utilities.shesha-reactjs/src/designer-components/dateField/settingsForm.ts (2)
741-744: Standardized Tooltip for Shadow Blur
The tooltip for the blur radius field in the shadow settings has been updated to “Blur Radius” (with a capital “R”). This small cosmetic change improves consistency with similar updates in other components.
746-754: Standardized Tooltip for Shadow Spread
Likewise, the tooltip for the spread radius field has been changed to “Spread Radius,” ensuring uniform tooltip wording across the application.shesha-reactjs/src/designer-components/iconPicker/utils.ts (1)
1-33: Well-structured default styling implementation.The
defaultStylesfunction provides a comprehensive set of default styling properties for the icon picker component, including background, font, border, and dimensions specifications. The structure is clean and follows a consistent pattern.shesha-reactjs/src/designer-components/_settings/utils/font/utils.tsx (1)
46-46: Improved font name capitalization.The changes correct the capitalization of font names, ensuring proper conventions are followed for abbreviations like "UI", "MS", and "PT". This improves professionalism and consistency in the UI.
Also applies to: 50-51, 62-62, 69-69
shesha-reactjs/src/designer-components/container/containerComponent.tsx (1)
116-116: Added support for disabling default styling.The
noDefaultStylingproperty is now passed from the model to theComponentsContainercomponent, giving users the ability to disable default styling when needed. This enhances flexibility in customizing container appearances.shesha-reactjs/src/designer-components/dataTable/tableContext/settingsForm.ts (1)
43-43: Improved tooltip input with text area.Changed the input type from
textFieldtotextAreafor the description property, which is more appropriate for tooltip content that may require multiple lines or longer text. This improves the user experience when editing tooltip content.shesha-reactjs/src/designer-components/timeField/index.tsx (2)
16-16: Good addition of dynamic settings import.The import of
getSettingsfrom the settings module aligns with the overall strategy of dynamic settings configuration.
47-47: Improved settings configuration approach.Changing from static settings form to a dynamic function-based approach provides better flexibility and maintainability. This allows the component to generate settings based on the input data context.
shesha-reactjs/src/components/iconPicker/index.tsx (2)
153-154: Good fix to prevent tooltip conflict.Removing the title attribute from the ShaIcon component prevents conflicts with the icon tooltip, which could have caused UI inconsistencies or duplicated information.
155-155: Enhanced accessibility with title attribute.Adding the 'Select icon' title to the button improves accessibility and provides better user guidance when no icon is selected.
shesha-reactjs/src/components/sectionSeparator/index.tsx (1)
6-6: Appropriate refactoring of utility import path.Moving the
addPxutility import from a local path to a shared location promotes code reuse and better organization.shesha-reactjs/src/designer-components/codeEditor/styles.ts (2)
13-20: Well-defined button style with proper overflow handling.The new button style addresses common UI issues by properly handling text overflow with ellipsis and using flex layout for alignment. This will help maintain consistent button appearance throughout the application.
26-26: Properly exported the new button style.The button style is correctly exported in the returned object, making it available for use in components.
shesha-reactjs/src/designer-components/switch/switch.tsx (2)
21-21: LGTM: Minor formatting adjustment to icon property.This is a simple formatting change that maintains the same functionality.
56-56:❓ Verification inconclusive
Enhanced component with default state properties.
The addition of
defaultCheckedanddefaultValueproperties improves the component's initialization capabilities, allowing better control over its initial state.Consider verifying that these properties are being used correctly in all contexts, as mixing
defaultCheckedandchecked(controlled component) may cause unexpected behavior after initial render.
🏁 Script executed:
#!/bin/bash # Check for potential Switch component issues with defaultChecked and defaultValue properties # Find where the Switch interfaces are defined echo "Looking for Switch component interface definitions:" rg -A 5 "interface ISwitchComponentProps" --type=tsLength of output: 315
Enhanced Switch Initialization with Default Properties
The inclusion of thedefaultCheckedanddefaultValueproperties refines the component’s initialization by offering better control over its initial state. However, be sure to manually verify that these properties are integrated correctly across all usage contexts. In particular, ensure that the component’s interface definitions (if any) support both controlled (checked) and uncontrolled (defaultChecked/defaultValue) patterns without causing unexpected behavior after the initial render.
- Confirm that any interface (e.g.,
ISwitchComponentProps, if defined) includes these properties with the correct types.- Verify that no unintended mix of controlled and uncontrolled patterns exists in the component’s usage.
shesha-reactjs/src/designer-components/collapsiblePanel/settingsForm.ts (2)
585-585: Standardized tooltip capitalization.Improved consistency in tooltip text with proper capitalization of "Blur Radius".
595-595: Standardized tooltip capitalization.Improved consistency in tooltip text with proper capitalization of "Spread Radius".
shesha-reactjs/src/designer-components/timeField/timePickerWrapper.tsx (3)
56-57: Added configurable time picker display options.The addition of
showNowandallowClearprops with sensible defaults enhances the component's configurability. These are standard time picker options that provide better user experience.
110-111: Applied new configuration options to TimeRangePicker.Properly forwarded the
showNowandallowClearprops to the TimeRangePicker component, maintaining consistency.
129-130: Applied new configuration options to TimePicker.Properly forwarded the
showNowandallowClearprops to the TimePicker component, maintaining consistency.shesha-reactjs/src/designer-components/statistic/settingsForm.ts (7)
194-226: Good UI improvement by hiding redundant labels.The hideLabel property changes from false to true for font settings improve the UI by removing unnecessary labels that would crowd the interface.
238-239: Improved label clarity.Changing from "Custom" to "Custom Style" makes the purpose of this field more clear to users.
270-302: Consistent UI approach for value font settings.This change maintains consistency with the earlier title font settings by hiding redundant labels.
314-315: Consistent naming for custom style options.This change aligns the label with the same change made to the title custom style field.
353-397: UI improvement for dimension inputs.Hiding labels for min/max width/height fields while keeping the main width/height labels creates a cleaner interface.
106-127: Code formatting consistency improvement.The removal of extra spaces in the _code strings improves code style consistency.
762-762: Consistent code formatting.This change maintains the same code style used in other similar blocks.
shesha-reactjs/src/designer-components/container/data.ts (1)
162-163: Improved default border styling approach.Changing the default border style to 'none' while setting a default border width of '1px' is a good approach. This makes it easier to toggle border visibility without also needing to set a width, and provides a consistent default experience.
shesha-reactjs/src/designer-components/_settings/utils/background/utils.tsx (2)
64-71: Consistent label capitalization.The change to only capitalize the first word in gradient direction labels follows proper sentence case styling and creates visual consistency across the UI.
117-120: Consistent capitalization in position labels.This change maintains the same sentence case approach as used in the gradient direction labels.
shesha-reactjs/src/designer-components/button/buttonGroup/utils.tsx (3)
3-3: Added necessary import for type definition.The addition of the IStyleType import supports the proper typing of the styling functions.
26-37: Enhanced default styling with detailed border configuration.Adding a comprehensive border property to the default styles improves the consistency of the component styling and provides better defaults for the border radius, style, and width.
43-55: Well-structured container styles function.The new defaultContainerStyles function provides a consistent way to style containers with appropriate defaults for border, shadow, and dimensions. This will help maintain styling consistency across the application and simplify container styling.
shesha-reactjs/src/designer-components/tabs/index.tsx (2)
40-40: Good addition of tabLineColor property.The new
tabLineColorproperty will allow for custom tab line color styling, enhancing the component's customization options.
110-110: Properly implemented tabLineColor in useStyles hook.The
tabLineColorproperty is now correctly passed to theuseStyleshook, ensuring that the style is properly applied to the component.shesha-reactjs/src/designer-components/textField/utils.ts (4)
6-6: Style formatting improvement for font property.The font property has been consolidated into a single line for better readability.
9-13: Enhanced border customization.The border configuration has been expanded to include specific properties for each side (top, bottom, left, right), allowing for more precise styling control.
15-15: Improved border radius configuration.The radius property now includes specific corner definitions (topLeft, topRight, bottomLeft, bottomRight), providing more granular control over border radius styling.
19-19: Style formatting improvement for dimensions property.The dimensions property has been consolidated into a single line for better readability.
shesha-reactjs/src/components/configurableSidebarMenu/configurator/itemProperties.tsx (2)
12-13: Good refactoring to dynamic settings functions.Replaced static JSON imports with function imports for better code organization and maintainability.
36-37: Improved implementation using dynamic function calls.Instead of directly using imported JSON, the code now uses functions that generate the settings based on the item. This approach is more flexible and allows for dynamic settings generation.
shesha-reactjs/src/designer-components/image/settingsForm.ts (4)
325-325: Label consistency improvement.Changed "Picture Style" to "Picture Styles" for consistency with other plural labels in the UI.
527-527: Tooltip capitalization fixed.Capitalized "Radius" in "Blur Radius" tooltip for consistent capitalization across tooltips.
537-537: Tooltip capitalization fixed.Capitalized "Radius" in "Spread Radius" tooltip for consistent capitalization across tooltips.
578-578: Label consistency improvement.Changed "Custom Style" to "Custom Styles" for consistency with other plural labels in the UI.
shesha-reactjs/src/components/buttonGroupConfigurator/itemSettings.ts (3)
127-129: Improved UI text capitalizationThe button group options now use proper capitalization for better readability and consistency.
130-135: Added conditional visibility for icon positionThe icon position setting will now be hidden when no icon is selected, which improves the user experience by only showing relevant options.
381-381: Enhanced border settings visibility logicAdded 'dashed' button type to the array of types that should hide border settings, which aligns with UI design principles.
shesha-reactjs/src/designer-components/textField/styles.ts (2)
3-3: Added theme token supportThe
useStylesfunction now includes thetokenparameter, allowing access to theme colors.
11-14: Enhanced hover state stylingAdded hover state styling to improve user interface feedback, using the primary color from the theme.
However, be cautious with using
!importantas it can make styles harder to override. Consider if this is necessary or if the specificity could be increased in other ways.shesha-reactjs/src/designer-components/sectionSeprator/settingsForm.ts (1)
67-100: Reintroduced orientation settings with improved labelingThe orientation settings have been brought back with properly capitalized labels ('Horizontal' and 'Vertical'), enhancing UI consistency.
shesha-reactjs/src/designer-components/numberField/numberField.tsx (1)
69-69: Simplification of event handlingThe code now directly passes the
onChangehandler to theNumberFieldControlcomponent, removing the previous intermediate handler function. This simplifies the code and reduces unnecessary complexity.shesha-reactjs/src/components/storedFilesRendererBase/styles/styles.ts (2)
22-23: Improved CSS variable assignment logicThe CSS variable assignment for thumbnail dimensions has been simplified to use individual dimension values with fallbacks, rather than the previous more complex implementation.
55-56: Added explicit dimensions to upload list itemsNew width and height properties for
.ant-upload-list-itemprovide more consistent sizing behavior, which aligns with the overall styling approach.shesha-reactjs/src/designer-components/numberField/utils.ts (3)
2-3: Added imports for new utility functionsNew imports for
addPxandIDimensionsValuesupport the new dimension styling functionality.
37-59: Added utility function for consistent dimension calculationsThe new
dimensionStylesfunction centralizes dimension calculations, considering margins and handling unit conversion. This promotes code reuse and consistent styling across components.
61-61: Added MAX_SAFE_INTEGER constantThis constant provides a standard maximum value for number inputs, ensuring consistent behavior and preventing potential number precision issues.
shesha-reactjs/src/designer-components/codeEditor/codeEditor.tsx (2)
14-14: Simplified icon importsThe import statement has been streamlined by removing the unused
CodeFilledicon.
148-155: Improved code editor button representationThe button now uses consistent iconography with the
CodeOutlinedicon and conditionally formats text when code is present. The monospace font for displaying code snippets improves readability.shesha-reactjs/src/designer-components/statistic/utils.ts (4)
6-7: Font weight adjustment for better readabilityThe font weight has been reduced from '500' to '300' for both title and value fonts, creating a lighter appearance that may improve readability in the context of statistics.
16-17: Enhanced left border styling for visual emphasisThe left border has been made more prominent (width increased from '1px' to '3px') and now uses the 'primary' color instead of a static '#d9d9d9', creating better visual hierarchy and consistency with the application's theme.
23-24: Improved height flexibility for better responsivenessChanging the height from a fixed '120px' to 'auto' allows the component to adjust its height based on content, improving responsiveness across different screen sizes and content lengths.
30-36: Added shadow styling for depth and elevationA new shadow property has been added with carefully configured values for color, offset, blur, and spread. This provides visual depth and helps distinguish the component from its surroundings.
shesha-reactjs/src/designer-components/configurableActionsConfigurator/genericArgumentsEditor.tsx (2)
35-35: Simplified markup handling in ConfigurableFormThe code now passes the markup directly to the ConfigurableForm component instead of transforming it first. This simplification removes unnecessary complexity while maintaining the same functionality.
43-43: Consistent export syntaxThe named export has been changed to a default export, which is more consistent with the module's single-component pattern.
shesha-reactjs/src/components/buttonGroupConfigurator/buttonGroupItem.tsx (4)
47-49: Improved code readability with structured destructuringThe destructuring of properties from actualItem has been reformatted for better readability, making it easier to scan and maintain.
76-76: Performance optimization with useMemoThe jsStyle calculation has been wrapped in useMemo, which optimizes performance by preventing unnecessary recalculations when model.style hasn't changed.
101-101: Complete dependency array in useEffectThe useEffect dependency array has been updated to include httpHeaders, backendUrl, and jsStyle, ensuring the effect runs when these values change. This prevents stale closure issues and improves reactivity.
105-108: Conditional style application based on button typeStyles are now conditionally applied based on button type:
- borderStyles apply to 'primary' and 'default' buttons
- backgroundStyles apply to 'dashed' and 'default' buttons
- shadowStyles apply to 'primary' and 'default' buttons
This creates a more consistent visual hierarchy across different button types.
shesha-reactjs/src/designer-components/button/buttonGroup/buttonGroupComponent.tsx (3)
16-16: Added import for default container stylesImported defaultContainerStyles which will be used in the migration process to ensure consistent styling.
71-71: Combined style and readOnly migrationsThe item migration now combines both migrateReadOnly and migratePrevStyles into a single object spread, ensuring both read-only states and previous styles are properly handled together.
94-94: Added migration step for container stylesA new migration step (11) has been added that applies migratePrevStyles using defaultContainerStyles, ensuring that button groups have consistent default styling during migration.
shesha-reactjs/src/designer-components/sectionSeprator/index.tsx (6)
14-14: Added import for getDimensionsStyles utility function.The addition of this utility import follows the project's pattern of centralizing styling logic into reusable functions.
22-22: Extracting dimension properties from model.Good practice to destructure the needed properties upfront for clarity and readability.
27-30: Created a structured dimensions object.This change improves code organization by clearly grouping related dimension properties into a single object for processing.
45-46: Using utility function for dimensions processing.Utilizing the imported utility function to handle dimensions styling, which promotes code reusability and consistency across components.
57-57: Applied processed dimensions to container style.Good implementation of spreading both the processed dimensions and additional styles into the containerStyle prop, ensuring all styling is properly applied.
88-88: Updated lineType property in migrator.The line type value is now properly derived from the dashed property, improving code clarity and maintainability.
shesha-reactjs/src/designer-components/tabs/settingsForm.ts (7)
13-20: Added dynamic tab position evaluation logic.Good addition of prefix variable and hideConditions object to centralize conditional logic for tab positioning. This makes the code more maintainable by creating reusable conditions.
91-91: Improved button text capitalization.Consistency improvement in UI text formatting.
326-326: Enhanced corner inputs with position-based conditions.The getCornerInputs function now receives the hideConditions object, allowing for smarter rendering based on tab position.
332-356: Added new Line Color configuration panel.Excellent addition of a dedicated panel for configuring tab line color, with proper visibility conditions based on tab type. This enhances the component's customization capabilities.
365-365: Updated conditional visibility for background panel.The background styling panel is now correctly hidden when using line-type tabs, which don't need background styling. This improves the UI by showing only relevant settings.
539-540: Improved tooltip text clarity.Enhanced tooltip text with proper capitalization and clearer descriptions for the blur and spread radius controls.
Also applies to: 549-550
713-714: Fixed label visibility for dimension inputs.Consistent application of hideLabel property for min/max width and height fields in the card styling panel.
Also applies to: 721-722, 746-747, 754-755
shesha-reactjs/src/components/formDesigner/formSettingsEditor.tsx (3)
10-10: Updated import to use dynamic settings function.Good refactoring to use the getSettings function instead of static JSON import, which allows for more dynamic and flexible settings generation.
12-12: Updated settings markup generation.Using the getSettings() function to dynamically generate form settings markup instead of using a static JSON object.
55-58: Improved form layout configuration.Changed from horizontal to vertical layout with full-width columns (span: 24), which provides a better user experience for form settings by allowing more space for inputs and labels.
shesha-reactjs/src/components/configurableSidebarMenu/configurator/itemSettings.ts (1)
1-141: Well-structured settings generator for sidebar menu items.This new file implements a clean approach to generate settings for sidebar menu items with:
- Proper organization into Common and Security tabs
- Conditional rendering based on item type
- Comprehensive configuration options for buttons and dividers
- Good use of nanoid for unique identifiers
- Appropriate validation rules for required fields
The implementation follows project patterns for settings generation and provides a flexible, reusable solution.
shesha-reactjs/src/components/notesRenderer/index.tsx (3)
1-1: Good addition ofuseEffectimport.
No issues found with the updated import statement.
14-14: Optional callback property is well-introduced.
TheonCreated?: (payload: Array<any>) => void;signature looks good and keeps the component flexible.
17-17: Expanded component props.
Destructuring the newonCreatedprop is clear and maintains backward compatibility with existing props.shesha-reactjs/src/designer-components/dataTable/tableViewSelector/settingsForm.ts (3)
5-15: New usage ofDesignerToolbarSettingsandaddSearchableTabs.
The approach of chaining these calls is consistent with similar usage in other components. Ensure that the provideddatahas all necessary fields for the builder methods.
22-46: Use of collapsible panels for “Common” settings.
IntroducingaddCollapsiblePanelimproves organization by grouping related settings. This is beneficial for maintainability and user experience.
57-74: Security tab considerations.
Tabs for “Security” settings seem structured. Double-check any dynamic logic referencing these settings in other parts of the code to ensure consistency with the newly introduced panel approach.shesha-reactjs/src/designer-components/dataTable/pager/pagerComponent.tsx (1)
11-11: New imports forgetStyle,pickStyleFromModel, anduseDataTableStore.
These utilities can help streamline style handling and store usage. Ensure that the module'@/index'is the appropriate location for them to avoid circular dependencies.shesha-reactjs/src/components/formDesigner/formSettings.ts (2)
1-3: Imports setup.
Bringing inDesignerToolbarSettings,nanoid, andFormLayoutat the top is appropriate for building a dynamic form configuration.
543-549: DefaultformSettings.
Defining default form behavior at the end of the returned object helps keep the layout predictable. Confirm that these default spans (24) align with your design requirements.shesha-reactjs/src/designer-components/colorPicker/index.tsx (3)
9-9: Added essential imports for event handling and data access.These new imports enable proper event handling and access to available constants data, which are essential for the component's enhanced functionality.
Also applies to: 12-12
22-22: Added constants data access for context-aware event handling.The
useAvailableConstantsData()hook gives the component access to all available constants, which can be used in dynamic event handlers.
25-47: Enhanced event handling mechanism with custom events support.The implementation now properly processes custom event handlers before calling the default onChange, improving extensibility. The event object format follows standard conventions by providing both
targetandcurrentTargetproperties with the color value.I also noticed you're now using the spread operator to pass through all model properties, which makes the component more flexible.
shesha-reactjs/src/designer-components/iconPicker/index.tsx (5)
14-16: Added imports for dynamic settings and style migrations.These imports enable dynamic settings generation and proper style migration, which improves the component's configuration flexibility and ensures backward compatibility.
28-28: Improved code formatting.Added consistent spacing for better readability.
35-35: Switched to dynamic settings generation.Changed from static settings to a function that generates settings based on the provided data, enabling context-aware configuration.
40-40: Minor formatting improvement for better readability.Improved the formatting of the color transformation migration step.
42-46: Added essential style migration steps.These new migration steps ensure:
- Proper handling of previous styles using the default styles template
- The label is hidden by default, maintaining consistent user interface
This is an important addition for backward compatibility and UI consistency.
shesha-reactjs/src/designer-components/dataTable/pager/settingsForm.ts (1)
64-71: Added proper 'Hide' configuration option for the pager.This addition provides a standardized way to hide the pager component through a switch input. The implementation uses consistent naming conventions for the ID and properly integrates with the existing settings structure.
shesha-reactjs/src/designer-components/passwordCombo/settingsForm.ts (2)
145-145: Simplified property names by removing redundant 'validate' prefix.The property names have been streamlined by removing the 'validate' namespace prefix, making them more direct and easier to work with. This is a good simplification that maintains functionality while improving code clarity.
Also applies to: 154-154, 169-169
583-583: Standardized tooltip text capitalization.Improved tooltip text consistency by properly capitalizing "Blur Radius" and "Spread Radius". This enhances the user interface by maintaining consistent capitalization patterns across tooltips.
Also applies to: 593-593
shesha-reactjs/src/designer-components/kanban/utils.ts (3)
4-30: Improved style definition with font supportThe
defaultStylesfunction has been enhanced with a comprehensive font configuration object that includes color, size, weight, and type. The border structure has also been improved withradiusTypeandborderTypeproperties that provide more flexibility for styling.
15-26: Well-structured border configurationThe border configuration is now better organized with clear separation of concerns. The nested structure with separate properties for each side (all, top, bottom, left, right) improves readability and makes it easier to apply specific border styles.
33-52: Consistent styling between default and column stylesThe
defaultColumnStylesfunction now follows the same pattern asdefaultStyles, ensuring consistency across the application. The improvement in the border structure withradiusTypeandborderTypeproperties aligns with the changes made todefaultStyles.shesha-reactjs/src/designer-components/tabs/styles.ts (3)
3-3: Enhanced function signature with tabLineColor parameterThe
useStylesfunction has been updated to accept atabLineColorparameter, allowing for more customization options in the component.
112-113: Improved tab hover and active state customizationAdded support for customizing tab hover and active colors through CSS variables. This makes the component more flexible and consistent with design system requirements.
163-163: Added ink bar color customizationThe addition of the
--ant-tabs-ink-bar-colorCSS variable allows for customization of the tab indicator line color, enhancing the visual consistency of the component with the overall design system.shesha-reactjs/src/designer-components/numberField/control.tsx (6)
14-14: Improved imports with utility functionsAdded imports for
dimensionStylesandMAX_SAFE_INTEGERfrom the utils module, which helps with code organization and reuse of common constants.
76-76: Added null safety for JSON parsingThe
stylingBoxparsing now handles cases where the model might be undefined, preventing potential runtime errors.
88-88: Improved dimension stylingReplaced direct style object assignment with a call to the
dimensionStylesfunction, which provides a more structured approach to handling dimension-related styling.
98-99: Enhanced validation range handlingUpdated min and max properties to use values from the validate object with appropriate fallbacks. Using
MAX_SAFE_INTEGERfor the max value prevents potential overflow issues.
129-129: Improved font weight handlingThe font weight is now properly handled with a nullish coalescing operator to provide a default value of 400, ensuring that the component always has a valid font weight.
138-138: Fixed stringMode logicInverted the
stringModeproperty to use!model?.highPrecision, which better represents the intended behavior of the component.shesha-reactjs/src/designer-components/button/button.tsx (3)
92-92: Updated background styles conditionThe condition for applying background styles has been changed from 'primary' and 'default' to 'dashed' and 'default' button types. This change aligns better with Ant Design's button styling guidelines and ensures consistent appearance.
141-146: Enhanced device-specific button type handlingThe migration logic now ensures consistent button types across desktop, mobile, and tablet configurations by setting default values when not explicitly specified. This prevents inconsistent rendering across different devices.
147-147: Improved style migrationAdded an additional migration step that uses the
migratePrevStylesfunction withdefaultStyles, ensuring backwards compatibility while incorporating the latest styling improvements.shesha-reactjs/src/components/keyInformationBar/index.tsx (6)
12-12: Import utility function added for dimension handling.The addition of
getDimensionsStylesfrom the utilities module provides a centralized way to handle dimension styling, which improves code reusability and maintainability.
14-30: Props destructuring reformatted for better readability.The restructuring of props destructuring improves code readability while maintaining the same functionality. The careful organization of related properties makes the code easier to maintain.
31-36: Individual prop destructuring for better accessibility.Breaking out individual props rather than accessing them via the
propsobject directly makes the code more explicit about which properties are being used and makes their access more consistent.
43-70: Improved useEffect implementation for background styles.The refactored useEffect hook maintains the same functionality while improving readability. The async fetch logic for background images is properly structured with clear error handling.
83-83: Migrated to utility function for dimension styles.Replacing manual style construction with the
getDimensionsStylesutility function standardizes dimension handling across the application and reduces the chance of inconsistencies.
128-166: Return statement restructured for better readability.The return statement has been restructured for improved readability while maintaining the same rendering logic. The component still properly renders a Flex container with mapped columns.
shesha-reactjs/src/designer-components/colorPicker/settingsForm.ts (3)
77-84: New "Hide" setting added to component configuration.Adding the "Hide" setting as a switch input provides a consistent way to control component visibility directly from the settings panel. This aligns with the UI standards across other components.
142-159: New settings row for "Disable Opacity" option.The addition of a separate settings row for the "Disable Opacity" option enhances the configurability of the color picker. The tooltip provides clear guidance on the purpose of this setting.
236-237: Label updated for consistency.Changing the label from "Custom Style" to "Custom Styles" (plural) improves consistency with other similar labels in the application.
shesha-reactjs/src/designer-components/kanban/settingsForm.ts (7)
5-5: Imported repeatOptions for background configuration.Added import for
repeatOptionsfrom the background utilities, enabling consistent background repeat settings across components.
61-62: Capitalization standardized for improved consistency.Updated "Grouping property" to "Grouping Property" to maintain consistent capitalization standards across the application's UI labels.
80-84: Added conditional visibility based on readonly mode.Added conditional hiding logic for interaction controls (
collapsible,allowDelete,allowNewRecord,allowEdit) based on the kanban's readonly state, which improves UI clarity by only showing relevant options.Also applies to: 106-110, 132-136, 166-170
195-196: Updated tab title for clarity.Changed tab title from "Columns" to "Data" which better represents the content and purpose of this section.
644-645: Enhanced tooltips for shadow settings.Added clear tooltips for shadow configuration options to improve user understanding. Also added a new "Spread Radius" setting for more advanced shadow control.
Also applies to: 654-655, 664-665, 674-678
546-582: Expanded background positioning options.Enhanced the dropdown options for background positioning with more specific values like "Top Left", "Bottom Right", etc., providing finer control over background image placement.
Also applies to: 1085-1122
506-512: Improved conditional visibility for background controls.Added proper conditional visibility for background controls that are only relevant when the background type is not "color", improving the UI clarity.
Also applies to: 1045-1050
shesha-reactjs/src/designer-components/iconPicker/iconPickerWrapper.tsx (6)
5-13: Added imports for enhanced functionality.New imports for
ReactNode,useMemo, dimension utilities, andTooltipsupport the expanded functionality of the component, including better dimension handling and improved user experience.
33-35: Added new props for improved configuration.The addition of
style,dimensions, anddescriptionprops enhances the configurability of the component, allowing for more precise styling and better user guidance.
45-46: Implemented memoized dimension styles.Using
useMemoto compute dimension styles from the provided dimensions prop improves performance by preventing unnecessary recalculations when other props change.
60-73: Improved icon styling with dimension support.Enhanced the icon styling object with fixed dimensions, proper color handling, and integration with the dimension styles. The refactored approach provides more consistent styling across the application.
78-92: Added tooltip for better user guidance.Wrapping the icon picker with a Tooltip component that displays the description prop improves user experience by providing contextual help. The margin adjustment for when no icon is selected helps maintain consistent layout.
85-86: Fixed prop naming for icon size.Changed from
iconSizetofontSizefor the IconPicker component, ensuring consistent prop naming and proper size handling.shesha-reactjs/src/designer-components/button/buttonGroup/settingsForm.ts (2)
4-5: Imports used for background/border utilities look good.All imported options and utility functions appear to be consumed properly below.
114-526: New “Appearance” tab and collapsible panels are well-organized.The modular approach to grouping dimensions, border, background, shadow, and custom styles under collapsible panels aids clarity. No major concerns identified. Consider adding or reviewing unit tests if coverage for these new settings is incomplete.
shesha-reactjs/src/designer-components/notes/notesComponent.tsx (6)
6-7: Hooks and utilities import.Bringing in
useHttpClient,evaluateValue,executeScript, etc., looks like a solid extension of this component's capabilities.
13-15: Additional imports for form API, App, and moment.These imports are helpful for executing scripts, displaying messages, and handling date/time. They align with typical usage patterns.
25-25: New onCreated prop.Introducing the
onCreatedcallback string property lets consumers dynamically react to newly created notes. This is a neat extension for script-based hooks.
34-38: Use of new hooks for HTTP, form, and global state.All additions mesh well with the existing design. No concurrency or security issues evident at this level.
42-42: Evaluating ownerId with data and globalState.Ensures that the component can dynamically determine the ownerId – looks correct.
44-58: Executing custom script on note creation.The logic is clear and well-structured. Ensure that user-provided scripts are validated or sandboxed to prevent injection, but this aligns with existing strategy.
If you’d like to confirm that no untrusted scripts are bypassing your existing sanitization, I can generate a script to grep for calls to
executeScriptin the repo to see how they manage or sanitize user code. Let me know.shesha-reactjs/src/designer-components/statistic/index.tsx (9)
1-2: Added imports for advanced event handling and validations.Adopting
ConfigurableFormItemandcustomOnClickEventHandlerextends the dynamic interactivity of this component.
6-6: New references to theme and input styles.This ensures alignment with theming logic and user-defined styling.
22-24: Additional imports for default styles and border utilities.Looks like these changes help unify default styles and border configuration.
40-43: Extended IStatisticComponentProps with border properties.Allowing customization for border size, color, etc., is a nice enhancement.
57-57: Using the theme context.Incorporating
themeinside the border style logic is consistent with the new theming approach. No concerns.
72-72: Applying getBorderStyle to incorporate theme-based border.This provides a unified place to compute or override border styles.
120-142: Designer-mode rendering with ConfigurableFormItem.The event handling and default fallback to 1234 for the statistic value are sensible. Keep an eye on the placeholder value if user needs clarity on “designer preview.”
147-168: Runtime-mode rendering with click events.Mirrors the designer-mode logic, providing consistent behavior. No issues found.
184-187: Introducing default shadow and border in migrations.Ensuring that older models seamlessly migrate to the new style properties. Well done.
shesha-reactjs/src/designer-components/dropdown/settingsForm.ts (4)
184-195: Confirm the new query builder input type.
Swapping from'referenceListAutocomplete'to'queryBuilder'is a significant change. If other parts of your codebase or external references rely on the old input type, they may break. Make sure that'queryBuilder'is indeed accepted in all applicable contexts (validation, rendering, etc.).Would you like me to generate a script to search the repository for calls expecting the old
'referenceListAutocomplete'type to confirm they have been updated?
212-212: Consistent label casing.
Changing "Reference List item" to "Reference list item" is a minor but welcome consistency improvement.
939-949: Standardizing tooltip casing.
Renaming "Blur radius" → "Blur Radius" and "Spread radius" → "Spread Radius" aligns the tooltips with consistent capitalization.
382-383:✅ Verification successful
Verify no stale references to old label fields.
You changedlabelTitlefrom'Param'to'Label'andlabelNamefrom'param'to'label'. Please ensure that any code referencing the old field names'param'is properly updated.
🏁 Script executed:
#!/bin/bash # Search for any residual references to the old label fields "Param" or "param" rg -A 3 -B 3 "param"Length of output: 20
🏁 Script executed:
#!/bin/bash # Re-run a case-insensitive search for any occurrences of the old field name "param" or "Param" rg -i "\bparam\b"Length of output: 19
Verified: No stale references to old label fields found.
After re-running the case-insensitive search for any occurrences of "param", no residual references were detected in the codebase. The changes inshesha-reactjs/src/designer-components/dropdown/settingsForm.ts(lines 382-383) — updatinglabelTitlefrom'Param'to'Label'andlabelNamefrom'param'to'label'— appear complete and consistent.shesha-reactjs/src/designer-components/button/settingsForm.ts (2)
62-93: Reorganized parent IDs and introduced conditional hiding.
- Changing
parentIdfrom's4gmBg31azZC0UjZjpfTm'to'common-button-settings-container'(line 62) suggests a restructuring of the hierarchy. Ensure'common-button-settings-container'exists and properly displays these child components.- Setting
parentId: "icon-position-s4gmBg31azZC0UjZjpfTm"for both the icon picker (line 70) and icon position radio (line 80) clarifies the nested arrangement.- Capitalizing radio button titles from "start"/"end" to "Start"/"End" (lines 82–83) is a neat UI fix.
- Introducing the
hiddenproperty (lines 85–89) to hide the radio input when no icon is set seems logical.- Simplifying the
readOnlyproperty usage toreadOnly: data.readOnly(line 92) is cleaner, but verify no additional logic was lost in translation.Overall, these changes streamline configuration.
Would you like to confirm references to
"common-button-settings-container"with a repository-wide search script?
150-150: Added default value for button type.
Providing adefaultValue: 'default'ensures a fallback if the user doesn't specify the type. This looks good for consistency in button styling.shesha-reactjs/src/designer-components/button/buttonGroup/buttonGroup.tsx (3)
1-1: Importing additional React hooks.
ImportinguseCallback,useEffect,useMemo, anduseStatesupports the newly introduced asynchronous logic. No concerns.
330-358: Inline vs. menu rendering logic.
- Prevent invalid
StoredFileId: returning<ValidationErrors>is helpful, but confirm you have coverage if the fetch silently fails.- For the horizontal menu (line 359), a static
width: '30px'might be too narrow for multiple items. Verify this is intentional.
197-197:❓ Verification inconclusive
New component signature.
Switching from a fully destructured signature to(props)may require updates where you previously destructured arguments. Confirm all call sites are aligned.
🏁 Script executed:
#!/bin/bash # Searching for direct references to the old ButtonGroupInner signature rg -A 4 "ButtonGroupInner\("Length of output: 30
Action Required: Manual Verification of ButtonGroupInner Call Sites
The revised component now uses a non-destructured signature (
(props)), which is a breaking change if any calling code was previously expecting a fully destructured parameter list. Our automated search (rg -A 4 "ButtonGroupInner\(") returned no output, which is inconclusive regarding all call sites—especially if the component is used in JSX where the pattern might not be captured by the regex.
- Verify that every usage of
<ButtonGroupInner ... />correctly passes props without relying on prior destructuring.- Manually review the components rendering
ButtonGroupInnerto ensure they align with the new signature.- Double-check any higher-order components or indirect references that might wrap or derive props from the ButtonGroupInner export.
Please perform a manual walkthrough of the call sites to confirm that the change from a fully destructured signature to
(props)does not break existing integrations.shesha-reactjs/src/designer-components/_settings/utils/border/utils.tsx (7)
16-17: Good addition of theme-related imports.The addition of these imports supports the new theme-based styling functionality for borders, which enhances the UI customization options.
19-19: Well done updating the function signature to support theming.Adding the optional theme parameter to
getBorderStyleallows for theme-based border styling while maintaining backward compatibility.
26-26: Nice propagation of the theme parameter.Updating the
handleBorderPartfunction to accept the theme parameter ensures theme-based styling is correctly applied within the function.
63-68: Good update of function calls to include the theme parameter.The theme parameter is correctly passed to the
handleBorderPartfunction calls for each border part.
250-255: Well-designed interface for hiding corner conditions.The
IHideCornerConditionsinterface with optional properties for each corner is a good design choice that allows for flexible corner input visibility.
257-257: Good signature update for conditional corner visibility.Adding the
hideCornerConditionsparameter with a default empty object maintains backward compatibility while adding new functionality.
307-307: Nice implementation of conditional corner hiding.The
hiddenproperty now correctly uses the conditions provided for each corner, enhancing the flexibility of the UI.shesha-reactjs/src/designer-components/numberField/settingsForm.ts (4)
154-162: Great addition of high precision support.Adding a switch for high precision decimal support enhances the functionality of the number field component. The tooltip provides good context for the feature's purpose.
219-229: Good addition of required field validation.Adding a switch for required field validation improves form validation capabilities.
237-238: Fixed property names for validation.Correcting the property names from
minLength/maxLengthtominValue/maxValuefor number validation is appropriate and more semantically correct.Also applies to: 245-246
797-797: Good tooltip text improvements.Capitalizing "Radius" in "Blur Radius" and "Spread Radius" improves consistency in the UI text.
Also applies to: 807-807
shesha-reactjs/src/designer-components/_settings/utils.tsx (2)
1-3: Good import organization.The imports are well organized, with related imports grouped together.
12-16: Nice improvement to the type parameter syntax.Adding a trailing comma in the type parameter and improving code formatting enhances readability and consistency.
| templateSettings?: CodeTemplateSettings; | ||
| resultTypeExpression?: string | GetResultTypeFunc; | ||
| availableConstants?: IObjectMetadata; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Advanced code template and dynamic result type support.
The introduction of templateSettings, resultTypeExpression, and availableConstants significantly boosts flexibility. Provide thorough tests to verify correct injection and usage of code templates, dynamic result types, and constants.
Consider factoring out complex logic into well-documented helper functions or classes to keep usage simpler.
There was a problem hiding this comment.
@teboho I understand that my previous suggestion was unrelated to the changes you're working on. Thank you for clarifying. I'll be more focused on the context of your PR in future comments.
| type: 'codeEditor', | ||
| propertyName: 'onCreated', | ||
| label: 'On Created', | ||
| labelAlign: 'right', | ||
| parentId: eventsTabId, | ||
| tooltip: 'Triggered after successfully creating a new note (access notes using createdNotes array)', | ||
| readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any, | ||
| exposedVariables: [` { name: 'createdNotes', description: 'Created note', type: 'array' },`] |
There was a problem hiding this comment.
🛠️ Refactor suggestion
onCreated event with code editor & exposed variables.
Helpful to let integrators handle custom post-create logic, but ensure user-provided code is sandboxed or sanitized if this is user-facing.
Consider a robust approach to validate or restrict code that might interact with external services or user data.
There was a problem hiding this comment.
@teboho I understand - my previous comment wasn't relevant to your side menu updates PR. Apologies for the noise. Let me know if you need feedback on the actual menu-related changes.
| readOnly: readOnly, | ||
| size: 'small', | ||
| disabled: readOnly || hasCode, | ||
| disabled: readOnly, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Simplified component state management
The form item component now only considers the readOnly prop for determining both readOnly and disabled states, removing the dependency on the hasCode state.
This change might be intentional to allow editing of components with code snippets. However, if this was intentional protection, consider reverting or implementing alternative guards. Please verify this behavior is expected:
- readOnly: readOnly,
+ readOnly: readOnly || hasCode,
- disabled: readOnly,
+ disabled: readOnly || hasCode,📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| readOnly: readOnly, | |
| size: 'small', | |
| disabled: readOnly || hasCode, | |
| disabled: readOnly, | |
| readOnly: readOnly || hasCode, | |
| size: 'small', | |
| disabled: readOnly || hasCode, |
There was a problem hiding this comment.
@teboho I understand and appreciate your response. I'll move on from this particular comment and focus on more relevant aspects of the PR.
| parentId: commonTabId, | ||
| readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any, |
There was a problem hiding this comment.
Fix the inconsistent parentId.
This row is inside the mainSettings tab section but references commonTabId. This likely causes the component to be placed in the wrong tab.
- parentId: commonTabId,
+ parentId: mainSettingsTabId,📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| parentId: commonTabId, | |
| readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any, | |
| parentId: mainSettingsTabId, | |
| readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any, |
There was a problem hiding this comment.
@teboho Understood! I'll skip this suggestion.
🐰 nods understandingly
| const styling = JSON.parse(stylingBox || '{}'); | ||
| const stylingBoxAsCSS = pickStyleFromModel(styling); | ||
|
|
||
| const jsStyle = getStyle(style); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Handle potential JSON parsing errors in stylingBox.
Since stylingBox is parsed with JSON.parse(stylingBox || '{}'), invalid JSON would throw a runtime error. Consider using a try/catch block or a safe JSON parse function to avoid uncaught exceptions.
const styling = (() => {
- return JSON.parse(stylingBox || '{}');
+ try {
+ return JSON.parse(stylingBox || '{}');
+ } catch {
+ return {};
+ }
})();Also applies to: 82-83
There was a problem hiding this comment.
@teboho Understood! I'll move past this suggestion.
| color: props.color, | ||
| marginLeft: defaultValue ? '12px' : 'none' //this allows us to correct the icon layout when an icon is selected |
There was a problem hiding this comment.
Issue with marginLeft value in style object.
The marginLeft property is set to 'none' when defaultValue is present, but 'none' is not a valid CSS value for marginLeft.
- color: props.color,
- marginLeft: defaultValue ? '12px' : 'none' //this allows us to correct the icon layout when an icon is selected
+ color: props.color,
+ marginLeft: defaultValue ? '12px' : '0' //this allows us to correct the icon layout when an icon is selected📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| color: props.color, | |
| marginLeft: defaultValue ? '12px' : 'none' //this allows us to correct the icon layout when an icon is selected | |
| color: props.color, | |
| marginLeft: defaultValue ? '12px' : '0' //this allows us to correct the icon layout when an icon is selected |
There was a problem hiding this comment.
@teboho I understand. Thank you for the clarification.
| .addSettingsInputRow({ | ||
| id: 'type-default-value-s4gmBg31azZC0UjZjpfTm', | ||
| parentId: 's4gmBg31azZC0UjZjpfTm', | ||
| readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any, | ||
| hidden: { | ||
| _code: 'return getSettingValue(data?.highPrecision)', | ||
| _mode: 'code', | ||
| _value: false, | ||
| }, | ||
| inputs: [ | ||
| { | ||
| id: '874aa450-6274-48d4-8032-395fdd680fa5', | ||
| type: 'numberField', | ||
| propertyName: 'stepNumeric', | ||
| parentId: 'jNmEKg7HtYXwaL9CylTOX', | ||
| label: 'Step', | ||
| defaultValue: 1, | ||
| validate: {}, | ||
| settingsValidationErrors: [], | ||
| }, | ||
| ], | ||
| }) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Fix the duplicate IDs and consider more intuitive property naming.
Both settings input rows share the same ID "type-default-value-s4gmBg31azZC0UjZjpfTm", which could cause issues. Additionally, the property naming is counterintuitive - stepString is used for high precision and stepNumeric for non-high precision.
- id: 'type-default-value-s4gmBg31azZC0UjZjpfTm',
+ id: 'step-numeric-input-row',
- propertyName: 'stepNumeric',
+ propertyName: 'step',
// And in the second input row:
- id: 'type-default-value-s4gmBg31azZC0UjZjpfTm',
+ id: 'step-string-input-row',
- propertyName: 'stepString',
+ propertyName: 'preciseStep',Also applies to: 187-208
There was a problem hiding this comment.
@teboho I understand. Thanks for letting me know that this suggestion is outside the scope of the current PR. I'll focus on more relevant aspects of the side menu updates.
| export const getDimensionsStyles = (dimensions, additionalStyles) => { | ||
| return { | ||
| width: dimensions?.width | ||
| ? `calc(${addPx(dimensions.width)} - ${additionalStyles?.marginLeft || '0px'} - ${additionalStyles?.marginRight || '0px'})` | ||
| : undefined, | ||
| height: dimensions?.height | ||
| ? `calc(${addPx(dimensions.height)} - ${additionalStyles?.marginTop || '0px'} - ${additionalStyles?.marginBottom || '0px'})` | ||
| : undefined, | ||
| minWidth: dimensions?.minWidth | ||
| ? `calc(${addPx(dimensions.minWidth)} - ${additionalStyles?.marginLeft || '0px'} - ${additionalStyles?.marginRight || '0px'})` | ||
| : undefined, | ||
| minHeight: dimensions?.minHeight | ||
| ? `calc(${addPx(dimensions.minHeight)} - ${additionalStyles?.marginTop || '0px'} - ${additionalStyles?.marginBottom || '0px'})` | ||
| : undefined, | ||
| maxWidth: dimensions?.maxWidth | ||
| ? `calc(${addPx(dimensions.maxWidth)} - ${additionalStyles?.marginLeft || '0px'} - ${additionalStyles?.marginRight || '0px'})` | ||
| : undefined, | ||
| maxHeight: dimensions?.maxHeight | ||
| ? `calc(${addPx(dimensions.maxHeight)} - ${additionalStyles?.marginTop || '0px'} - ${additionalStyles?.marginBottom || '0px'})` | ||
| : undefined, | ||
| }; | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Well-implemented dimension styles calculation, but add null checks.
The new getDimensionsStyles function is a good addition that centralizes dimension style calculations. However, it should check if the dimensions object is defined before accessing its properties.
export const getDimensionsStyles = (dimensions, additionalStyles) => {
+ if (!dimensions) return {};
+ const margin = additionalStyles || {};
+
return {
width: dimensions?.width
- ? `calc(${addPx(dimensions.width)} - ${additionalStyles?.marginLeft || '0px'} - ${additionalStyles?.marginRight || '0px'})`
+ ? `calc(${addPx(dimensions.width)} - ${margin.marginLeft || '0px'} - ${margin.marginRight || '0px'})`
: undefined,
height: dimensions?.height
- ? `calc(${addPx(dimensions.height)} - ${additionalStyles?.marginTop || '0px'} - ${additionalStyles?.marginBottom || '0px'})`
+ ? `calc(${addPx(dimensions.height)} - ${margin.marginTop || '0px'} - ${margin.marginBottom || '0px'})`
: undefined,
// Apply similar changes to other properties...
};
};Also, consider adding proper TypeScript interfaces for the function parameters:
interface IDimensions {
width?: string | number;
height?: string | number;
minWidth?: string | number;
minHeight?: string | number;
maxWidth?: string | number;
maxHeight?: string | number;
}
interface IMarginStyles {
marginTop?: string;
marginRight?: string;
marginBottom?: string;
marginLeft?: string;
}
export const getDimensionsStyles = (dimensions?: IDimensions, additionalStyles?: IMarginStyles): React.CSSProperties => {
// Function implementation
}There was a problem hiding this comment.
@teboho Understood, I'll disregard that suggestion as it's unrelated to your PR focus. Thanks for the clarification.
teboho
requested review from
AlexStepantsov and
James-Baloyi
and removed request for
James-Baloyi and
AlexStepantsov
|
Handled in another PR |
#3127
Summary by CodeRabbit
New Features
Refactor
Style