Merge branch 'main' of https://github.com/shesha-io/shesha-framework into derik/en/numberInput

Author: HackGenesis

.github/workflows/npm-build-test.yml

@@ -0,0 +1,36 @@
+name: shesha-reactjs-build-test
+
+on:
+  pull_request:
+    branches:
+      - main
+
+permissions:
+  pull-requests: write
+  contents: read
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./shesha-reactjs
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        id: build
+        run: npm run build
+        

shesha-core/src/Shesha.Application/Startup/IShaApplicationModuleConfiguration.cs

@@ -1,9 +1,6 @@
 using System;
 using System.Collections.Generic;
-using System.Linq;
 using System.Reflection;
-using System.Text;
-using System.Threading.Tasks;
 
 namespace Shesha.Startup
 {

shesha-functional-tests/adminportal/package.json

@@ -9,8 +9,8 @@
     "build-shesha": "echo \"Build Shesha\" && cd ../../shesha-reactjs && npm install && npm run build && npm pack && shx mv shesha-io-reactjs-*.tgz ../shesha-functional-tests/adminportal/shesha-local.tgz",
     "preinstall": "npm run build-shesha && npm install shesha-local.tgz --force",
     "export": "next export",
-    "start": "cross-env NODE_ENV=production node --max-old-space-size=8192 server.js",
-    "build:analyze": "cross-env ANALYZE=true npm run build",
+    "start": "NODE_ENV=production node --max-old-space-size=8192 server.js",
+    "build:analyze": "ANALYZE=true npm run build",
     "lint": "eslint src/**/*.ts{,x}",
     "lint-errors": "eslint src/**/*.ts{,x} --quiet",
     "prettier": "prettier --write **/*.{js,jsx,ts,tsx}",

shesha-reactjs/src/components/buttonGroupConfigurator/buttonGroupItem.tsx

@@ -44,7 +44,9 @@ export const ButtonGroupItem: FC<IButtonGroupItemProps> = ({ item, actionConfigu
   const actualItem = useActualContextData({ ...item, actionConfiguration });
 
 
-  const { icon, label, tooltip, iconPosition, size, buttonType, borderColor, borderRadius, height, width, backgroundColor, fontSize, fontWeight, color, borderStyle, borderWidth, readOnly, block, danger } = actualItem;
+  const { icon, label, tooltip, iconPosition, size, buttonType, borderColor, borderRadius,
+    height, width, backgroundColor, fontSize, fontWeight, color, borderStyle, borderWidth,
+    readOnly, block, danger } = actualItem;
 
   const model = {
     ...actualItem,
@@ -61,7 +63,6 @@ export const ButtonGroupItem: FC<IButtonGroupItemProps> = ({ item, actionConfigu
     borderRadius: addPx(borderRadius)
   };
 
-  const jsStyle = getStyle(model.style);
 
   const prevStyles = migratePrevStyles(model, initialValues());
   const dimensions = prevStyles?.dimensions;
@@ -72,6 +73,7 @@ export const ButtonGroupItem: FC<IButtonGroupItemProps> = ({ item, actionConfigu
   const styling = JSON.parse(model.stylingBox || '{}');
 
   const dimensionsStyles = useMemo(() => getSizeStyle(dimensions), [dimensions]);
+  const jsStyle = useMemo(() => getStyle(model.style), [model.style]);
   const borderStyles = useMemo(() => getBorderStyle(border, jsStyle), [border, jsStyle]);
   const fontStyles = useMemo(() => getFontStyle(font), [font]);
   const [backgroundStyles, setBackgroundStyles] = useState({});
@@ -91,19 +93,19 @@ export const ButtonGroupItem: FC<IButtonGroupItemProps> = ({ item, actionConfigu
             return URL.createObjectURL(blob);
           }) : '';
 
-      const style = await getBackgroundStyle(background, jsStyle, storedImageUrl);
+      const style = getBackgroundStyle(background, jsStyle, storedImageUrl);
       setBackgroundStyles(style);
     };
 
     fetchStyles();
-  }, [background]);
+  }, [background, httpHeaders, backendUrl, jsStyle]);
 
   const newStyles = {
     ...dimensionsStyles,
-    ...borderStyles,
+    ...(['primary', 'default'].includes(item.buttonType) && borderStyles),
     ...fontStyles,
-    ...backgroundStyles,
-    ...shadowStyles,
+    ...(['dashed', 'default'].includes(item.buttonType) && backgroundStyles),
+    ...(['primary', 'default'].includes(item.buttonType) && shadowStyles),
     ...jsStyle,
     ...stylingBoxAsCSS
   };

shesha-reactjs/src/components/buttonGroupConfigurator/itemSettings.ts

@@ -124,9 +124,14 @@ export const getItemSettings = (data) => {
                                                     type: 'radio',
                                                     parentId: "icon-position-s4gmBg31azZC0UjZjpfTm",
                                                     buttonGroupOptions: [
-                                                        { title: 'start', value: 'start', icon: 'LeftOutlined' },
-                                                        { title: 'end', value: 'end', icon: 'RightOutlined' },
+                                                        { title: 'Start', value: 'start', icon: 'LeftOutlined' },
+                                                        { title: 'End', value: 'end', icon: 'RightOutlined' },
                                                     ],
+                                                    hidden: {
+                                                        _code: 'return  !getSettingValue(data?.icon);',
+                                                        _mode: 'code',
+                                                        _value: false
+                                                    } as any
                                                 },
                                             ],
                                             readOnly: data.readOnly,
@@ -373,7 +378,7 @@ export const getItemSettings = (data) => {
                                     label: 'Border',
                                     labelAlign: 'right',
                                     ghost: true,
-                                    hidden: { _code: 'return  ["text", "link", "ghost"].includes(getSettingValue(data?.buttonType));', _mode: 'code', _value: false } as any,
+                                    hidden: { _code: 'return  ["dashed","text", "link", "ghost"].includes(getSettingValue(data?.buttonType));', _mode: 'code', _value: false } as any,
                                     parentId: 'styleRouter',
                                     collapsible: 'header',
                                     content: {

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

@@ -1,5 +1,5 @@
+import { addPx } from '@/designer-components/_settings/utils';
 import { createStyles } from '@/styles';
-import { addPx } from '../sectionSeparator/utils';
 
 export const useStyles = createStyles(({ css, cx, prefixCls }, {height}) => {
     const chevronButton = cx(`${prefixCls}-chevron-btn`, css`

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

@@ -4,6 +4,7 @@ import { ColorValueType } from 'antd/es/color-picker/interface';
 import { Color } from 'antd/es/color-picker/color';
 import type { ColorPickerProps } from 'antd';
 import { SizeType } from 'antd/lib/config-provider/SizeContext';
+import { getStyle, pickStyleFromModel } from '@/index';
 
 type Preset = Required<ColorPickerProps>['presets'][number];
 type ColorFormat = ColorPickerProps['format'];
@@ -18,6 +19,8 @@ export interface IColorPickerProps {
   disabledAlpha?: boolean;
   readOnly?: boolean;
   size?: SizeType;
+  style?: string;
+  stylingBox?: string;
 }
 
 const formatColor = (color: Color, format: ColorFormat) => {
@@ -31,7 +34,7 @@ const formatColor = (color: Color, format: ColorFormat) => {
   }
 };
 
-export const ColorPicker: FC<IColorPickerProps> = ({ value, onChange, title, presets, showText, allowClear, disabledAlpha, readOnly, size }) => {
+export const ColorPicker: FC<IColorPickerProps> = ({ value, onChange, title, presets, showText, allowClear, disabledAlpha, readOnly, size, stylingBox, style}) => {
   const [format, setFormat] = useState<ColorFormat>('hex');
 
   const handleChange = (value: Color) => {
@@ -46,6 +49,10 @@ export const ColorPicker: FC<IColorPickerProps> = ({ value, onChange, title, pre
   const onPanelClick = (event: React.MouseEvent<HTMLElement>) => {
     event.stopPropagation();
   };
+  const styling = JSON.parse(stylingBox || '{}');
+  const stylingBoxAsCSS = pickStyleFromModel(styling);
+  
+  const jsStyle = getStyle(style);
 
   return (
     <AntdColorPicker
@@ -57,6 +64,7 @@ export const ColorPicker: FC<IColorPickerProps> = ({ value, onChange, title, pre
       disabled={readOnly}
       onClear={handleClear}
       size={size}
+      style={{...stylingBoxAsCSS, ...jsStyle}}
       value={value ?? ""}
       onChange={handleChange}
       presets={presets}

shesha-reactjs/src/components/dropdown/dropdown.tsx

@@ -36,7 +36,6 @@ export const Dropdown: FC<IDropdownProps> = ({
   const { globalState } = useGlobalState();
 
   const selectedMode = mode === 'single' ? undefined : mode;
-;
   //quick fix not to default to empty string or null while working with multi-mode
   const defaultValue = Array.isArray(defaultVal)
     ? defaultVal
@@ -166,7 +165,7 @@ export const Dropdown: FC<IDropdownProps> = ({
       style={{ borderWidth: '0px', ...style }}
       size={size}
     >
-      {(dataSourceType === 'values' ? value : options).map((option, index) => (
+      {(dataSourceType === 'values' ? (value ?? []) : options).map((option, index) => (
         <Select.Option key={index} value={option.value}>
           {option.label}
         </Select.Option>

shesha-reactjs/src/components/endpointsAutocomplete/endpointsAutocomplete.tsx

@@ -155,7 +155,7 @@ export const EndpointsAutocomplete: FC<IEndpointsAutocompleteProps> = ({ readOnl
   return mode === 'endpoint'
     ? (
       <Space.Compact style={{ width: "100%" }}>
-        <VerbSelector verbs={props.availableHttpVerbs} onChange={onVerbChange} value={isApiEndpoint(props.value) ? props.value.httpVerb : null} />
+        <VerbSelector verbs={props.availableHttpVerbs} onChange={onVerbChange} value={isApiEndpoint(props.value) ? props.value.httpVerb : null} size={props.size} />
         {autocomplete}
       </Space.Compact>
     )

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

@@ -1,7 +1,6 @@
 import { EllipsisOutlined } from '@ant-design/icons';
 import { Button, Space, Select, Skeleton, ConfigProvider } from 'antd';
 import { DefaultOptionType } from 'antd/lib/select';
-import _ from 'lodash';
 import React, { useMemo, useRef, useState } from 'react';
 import { useEntitySelectionData } from '@/utils/entity';
 import ReadOnlyDisplayFormItem from '@/components/readOnlyDisplayFormItem';