Thulasizwe/bug/3557

shesha-reactjs/src/components/dataTable/index.tsx

@@ -54,6 +54,7 @@ import { getCellStyleAccessor } from './utils';
 import { isPropertiesArray } from '@/interfaces/metadata';
 import { IBeforeRowReorderArguments, IAfterRowReorderArguments } from '@/designer-components/dataTable/tableContext/models';
 import { StandaloneTable } from '@/designer-components/dataTable/table/standaloneTable';
+import { IDimensionsValue } from '@/designer-components/_settings/utils/index';
 
 export interface IIndexTableOptions {
   omitClick?: boolean;
@@ -137,6 +138,7 @@ export interface IIndexTableProps extends IShaDataTableProps, TableProps {
 
   // Overall table styling
   boxShadow?: string;
+  dimensions?: IDimensionsValue;
   sortableIndicatorColor?: string;
 }
 
@@ -200,6 +202,7 @@ export const DataTable: FC<Partial<IIndexTableProps>> = ({
   rowBorder,
   rowBorderStyle,
   boxShadow,
+  dimensions,
   sortableIndicatorColor,
   bodyFontFamily,
   bodyFontSize,
@@ -1007,6 +1010,7 @@ export const DataTable: FC<Partial<IIndexTableProps>> = ({
     rowBorder,
     rowBorderStyle,
     boxShadow,
+    dimensions,
     sortableIndicatorColor,
 
     onRowClickAction: onRowClick,

shesha-reactjs/src/components/reactTable/index.tsx

@@ -115,6 +115,7 @@ export const ReactTable: FC<IReactTableProps> = ({
   rowBorder,
   rowBorderStyle,
   boxShadow,
+  dimensions,
   sortableIndicatorColor,
   striped,
   cellBorderColor,
@@ -156,6 +157,7 @@ export const ReactTable: FC<IReactTableProps> = ({
     rowHoverBackgroundColor,
     rowSelectedBackgroundColor,
     border,
+    dimensions,
     backgroundColor,
     headerFontFamily,
     headerFontSize,

shesha-reactjs/src/components/reactTable/interfaces.ts

@@ -5,7 +5,7 @@ import React, { ReactNode, CSSProperties } from 'react';
 import { Column, ColumnInstance, Row, SortingRule, TableState } from 'react-table';
 import { IBorderValue } from '@/designer-components/_settings/utils/border/interfaces';
 import { TableSelectionMode } from '../dataTable/interfaces';
-import { IShadowValue } from '@/designer-components/_settings/utils/index';
+import { IDimensionsValue, IShadowValue } from '@/designer-components/_settings/utils/index';
 
 export interface IColumnWidth {
   id: React.Key;
@@ -326,6 +326,7 @@ export interface IReactTableProps extends ITableRowDragProps {
   border?: IBorderValue;
   backgroundColor?: string;
   boxShadow?: string;
+  dimensions?: IDimensionsValue;
   sortableIndicatorColor?: string;
   striped?: boolean;
 

shesha-reactjs/src/components/reactTable/styles/styles.ts

@@ -3,6 +3,7 @@ import { IBorderValue } from '@/designer-components/_settings/utils/border/inter
 import { IShadowValue } from '@/designer-components/_settings/utils/shadow/interfaces';
 import { getBorderStyle } from '@/designer-components/_settings/utils/border/utils';
 import { getShadowStyle } from '@/designer-components/_settings/utils/shadow/utils';
+import { IDimensionsValue } from '@/designer-components/_settings/utils/index';
 
 const tableClassNames = {
   shaTable: 'sha-table',
@@ -46,6 +47,7 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
   rowHoverBackgroundColor,
   rowSelectedBackgroundColor,
   border,
+  dimensions,
   backgroundColor,
   headerFontFamily,
   headerFontSize,
@@ -94,6 +96,7 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
   rowBorder?: string;
   rowBorderStyle?: IBorderValue;
   boxShadow?: string;
+  dimensions?: IDimensionsValue;
   sortableIndicatorColor?: string;
   striped?: boolean;
   cellBorderColor?: string;
@@ -215,6 +218,11 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
         position: relative;
       ` : ''}
 
+
+      ${dimensions?.height ? `height: ${dimensions.height};` : ''}
+      ${dimensions?.minHeight ? `min-height: ${dimensions.minHeight};` : ''}
+      ${dimensions?.maxHeight ? `max-height: ${dimensions.maxHeight};` : ''}
+
       .${shaSpanCenterVertically} {
         display: flex;
         align-items: center;
@@ -229,7 +237,6 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
         border-spacing: 0;
         display: inline-block;
         min-width: 100%;
-        overflow-x: auto;
 
         /* Background applied to table ensures it covers all rows when scrolling with freezeHeaders */
         ${backgroundColor ? `background: ${backgroundColor};` : 'background: white;'}

shesha-reactjs/src/components/sectionSeparator/index.tsx

@@ -116,7 +116,6 @@ export const SectionSeparator: FC<ISectionSeparatorProps> = ({
         ...containerStyle,
         height: 'max-content',
         width: addPx(lineWidth, allData) ?? '100%',
-        marginRight: 1,
       }}
       key={id}
     >

shesha-reactjs/src/configuration-studio/styles.ts

@@ -20,7 +20,6 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls, iconPrefixCl
   const csDocEditor = 'sha-cs-doc-editor';
 
   const headerHeight = 60;
-  const tabCardHeight = 40;
 
   const configStudio = cx("sha-config-studio", css`
 
@@ -102,8 +101,6 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls, iconPrefixCl
         }
             .${csDocEditor}{
                 padding: 0;
-                overflow: auto;
-                height: calc(100vh - ${headerHeight}px - ${tabCardHeight}px);
             }
   `);
 

shesha-reactjs/src/designer-components/attachmentsEditor/attachmentsEditor.tsx

@@ -164,6 +164,7 @@ const AttachmentsEditor: IToolboxComponent<IAttachmentsEditorProps> = {
   type: 'attachmentsEditor',
   isInput: true,
   name: 'File list',
+  preserveDimensionsInDesigner: true,
   dataTypeSupported: ({ dataType, dataFormat }) => dataType === DataTypes.advanced && dataFormat === AdvancedFormats.fileList,
   icon: <FolderAddOutlined />,
   Factory: ({ model }) => {

shesha-reactjs/src/designer-components/container/settingsForm.ts

@@ -465,7 +465,7 @@ export const getSettings: SettingsFormMarkupFactory = ({ fbf }) => {
                                       propertyName: 'flexWrap',
                                       dropdownOptions: FLEX_WRAP,
                                       hidden: {
-                                        _code: 'return getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.flexDirection) !== "row";',
+                                        _code: 'return getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.display) !== "flex";',
                                         _mode: 'code',
                                         _value: false,
                                       } as any,

shesha-reactjs/src/designer-components/dataTable/table/styles/styles.ts

@@ -59,6 +59,7 @@ export const GlobalTableStyles = createGlobalStyle`
   }
 
   .sha-react-table {
+    overflow: auto;
     .td {
       .${(p) => p.theme.prefixCls}-form-item {
         width: 100%;

shesha-reactjs/src/designer-components/dataTable/table/tableComponent.tsx

@@ -148,6 +148,7 @@ const TableComponent: TableComponentDefinition = {
   isInput: true,
   isOutput: true,
   name: 'Data Table',
+  preserveDimensionsInDesigner: true,
   icon: <TableOutlined />,
   Factory: ({ model }) => {
     return <TableComponentFactory model={model} />;

shesha-reactjs/src/designer-components/dataTable/table/tableWrapper.tsx

@@ -550,6 +550,7 @@ export const TableWrapper: FC<TableWrapperProps> = (props) => {
             rowBorder={effectiveRowBorder}
             rowBorderStyle={props.rowBorderStyle}
             boxShadow={finalBoxShadow}
+            dimensions={props.dimensions}
             sortableIndicatorColor={props.sortableIndicatorColor}
             cellTextColor={props.cellTextColor}
             cellBackgroundColor={props.cellBackgroundColor}

shesha-reactjs/src/designer-components/dateField/dateField.tsx

@@ -32,8 +32,6 @@ const DateField: DateFieldDefinition = {
     const finalStyle = useMemo(() => !model.enableStyleOnReadonly && model.readOnly ? {
       ...model.allStyles.fontStyles,
       ...model.allStyles.dimensionsStyles,
-      width: '100%',
-      height: '100%',
     } : model.allStyles.fullStyle, [model.enableStyleOnReadonly, model.readOnly, model.allStyles]);
 
     return (

shesha-reactjs/src/designer-components/multiColorInput/index.tsx

@@ -6,7 +6,6 @@ import { useTheme } from '@/providers';
 import { removeUndefinedProps } from '@/utils/object';
 import { SettingInput } from '../settingsInput/settingsInput';
 import { gradientDirectionOptions } from '../_settings/utils/background/utils';
-import { InputRow } from '../settingsInputRow';
 import { ReactElement } from 'react-markdown/lib/react-markdown';
 
 type MultiColorInputProps = {
@@ -70,18 +69,15 @@ export const MultiColorInput = ({ value = {}, onChange, readOnly, propertyName }
         >
         </Button>
       </Row>
-
-      <InputRow inline={true} readOnly={readOnly}>
-        <SettingInput
-          id={directionInputId}
-          propertyName={propertyName.replace('gradient.colors', 'gradient.direction')}
-          label="Direction"
-          hideLabel={true}
-          width="120px"
-          type="dropdown"
-          dropdownOptions={gradientDirectionOptions}
-        />
-      </InputRow>
+      <SettingInput
+        id={directionInputId}
+        propertyName={propertyName.replace('gradient.colors', 'gradient.direction')}
+        label="Direction"
+        hideLabel={true}
+        width="120px"
+        type="dropdown"
+        dropdownOptions={gradientDirectionOptions}
+      />
     </>
   );
 };

shesha-reactjs/src/designer-components/radio/radioGroup.tsx

@@ -8,6 +8,7 @@ import { isAjaxSuccessResponse } from '@/interfaces/ajaxResponse';
 import { ILabelValue } from '../dropdown/model';
 import { executeScriptSync } from '@/providers/form/utils';
 import { IRadioProps } from './interfaces';
+import { DEFAULT_MARGINS } from '@/components/formDesigner/utils/designerConstants';
 
 type FetchResponse = ILabelValue<any>[] | {
   items?: ILabelValue<any>[];
@@ -58,7 +59,7 @@ const RadioGroup: FC<IRadioProps> = (model) => {
       onChange={onChange}
       style={model.style}
     >
-      <Space direction={model.direction}>
+      <Space direction={model.direction} style={{ margin: `${DEFAULT_MARGINS.vertical} ${DEFAULT_MARGINS.horizontal}` }}>
         {options?.map((checkItem, index) => (
           <Radio key={index} value={`${checkItem.value}`} disabled={model.readOnly}>
             {checkItem.label}

shesha-reactjs/src/designer-components/tabs/styles.ts

@@ -87,7 +87,7 @@ export const useStyles = createStyles(({ css, cx, token }, { styles, cardStyles,
                 --ant-tabs-card-bg: ${backgroundImage || backgroundColor};
                 ${rest};
                 width: 100%;
-                height: 100%;
+                height: auto;
                 border: ${borderMap.default};
                 box-shadow: ${boxShadow} !important;
                 border-left: ${isLeft ? '0px solid transparent' : borderMap.left} !important;