James/b/updated qb branch

shesha-core/test/Shesha.Tests/JsonLogic/JsonLogic2LinqConverter_ValueTests.cs

@@ -150,7 +150,7 @@ public async Task StringField_NotLike_FetchAsync()
         public void StringField_IsEmpty_Convert()
         {
             var expression = ConvertToExpression<Person>(_stringField_IsEmpty_expression);
-            Assert.Equal(@"ent => (ent.FirstName == null)", expression?.ToInvariantString());
+            Assert.Equal(@"ent => ((ent.FirstName == null) OrElse (ent.FirstName.Trim() == """"))", expression?.ToInvariantString());
         }
 
         [Fact]

shesha-reactjs/eslint.config.mjs

@@ -120,6 +120,8 @@ const baseTsConfig = {
     ignores: [
         "src/apis/*",
         "**/__tests__/**/*",
+        "**/*.test.ts",
+        "**/*.test.tsx",
     ],
     plugins: {
         "memory-monitor": memoryTracePlugin,

shesha-reactjs/jest.config.js

@@ -16,25 +16,24 @@ module.exports = {
   // extended assertions to Jest
   setupFilesAfterEnv: [
     //"@testing-library/jest-dom/extend-expect"
-    "@testing-library/jest-dom"
+    "@testing-library/jest-dom",
+    "<rootDir>/src/testSetup.ts",
   ],
 
   // Test spec file resolution pattern
   // Matches parent folder `__tests__` and filename
   // should contain `test` or `spec`.
   //testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.ts$",
   testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(ts|tsx)$',
-  // other Jest configuration options...
-  /*
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',
   },
-  */
+  // other Jest configuration options...
   // Module file extensions for importing
   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
   globals: {
     'ts-jest': {
       tsconfig: 'tsconfig.test.json'
     }
   }
-};
+};

shesha-reactjs/src/components/expressionEditor/contextMetadata.test.ts

@@ -0,0 +1,64 @@
+import { DataTypes } from '@/interfaces';
+import { IObjectMetadata } from '@/interfaces/metadata';
+import { buildExpressionContextFromMetadata } from './contextMetadata';
+
+describe('buildExpressionContextFromMetadata', () => {
+  it('merges nested properties with type-definition members for context suggestions', async () => {
+    const metadata: IObjectMetadata = {
+      dataType: DataTypes.object,
+      properties: [
+        {
+          path: 'contexts',
+          dataType: DataTypes.object,
+          properties: [
+            {
+              path: 'canvasContext',
+              dataType: DataTypes.object,
+              properties: [
+                { path: 'zoom', dataType: DataTypes.number },
+                { path: 'details.themeName', dataType: DataTypes.string },
+              ],
+              typeDefinitionLoader: async () => ({
+                typeName: 'ICanvasContextApi',
+                files: [{
+                  fileName: 'apis/canvasContext.ts',
+                  content: `
+                    export interface ICanvasActions {
+                      setDesignerDevice(deviceType: string): void;
+                      setCanvasWidth(width: number | string): void;
+                    }
+
+                    export interface ICanvasState {
+                      activeDevice?: string;
+                    }
+
+                    export interface ICanvasContextApi extends ICanvasState {
+                      zoom?: number;
+                      api: ICanvasActions;
+                    }
+                  `,
+                }],
+              }),
+            },
+          ],
+        },
+      ],
+    };
+
+    await expect(buildExpressionContextFromMetadata(metadata)).resolves.toEqual({
+      contexts: {
+        canvasContext: {
+          zoom: null,
+          details: {
+            themeName: null,
+          },
+          activeDevice: null,
+          api: {
+            setDesignerDevice: null,
+            setCanvasWidth: null,
+          },
+        },
+      },
+    });
+  });
+});

shesha-reactjs/src/components/index.ts

@@ -1,13 +1,4 @@
 export { default as BasicDisplayFormItem, type IBasicDisplayFormItemProps } from './basicDisplayFormItem';
-export {
-  ExpressionEditor,
-  buildExpressionContextFromPaths,
-  type ExpressionContext,
-  type ExpressionContextValue,
-  type ExpressionEditorProps,
-  type ExpressionFunctionDefinition,
-  type BuildExpressionContextFromPathsOptions,
-} from './expressionEditor';
 export {
   buildExpressionContextFromMetadata,
   buildExpressionContextFromProperties,
@@ -118,3 +109,14 @@ export { ConfigurableComponentRenderer } from "./configurableComponentRenderer";
 export { PermissionAutocomplete, type IPermissionAutocompleteProps } from './permissionAutocomplete';
 export { ConfigItemAutocomplete } from './configurableItemAutocomplete';
 export { RefListSimpleDropdown as RefListDropdown } from './queryBuilder/widgets/refListDropDown/simpleDropdown';
+export {
+  ExpressionEditor,
+  buildExpressionContextFromPaths,
+  type ExpressionContext,
+  type ExpressionContextValue,
+  type ExpressionEditorProps,
+  type ExpressionFunctionArg,
+  type ExpressionFunctionCategory,
+  type ExpressionFunctionDefinition,
+  type BuildExpressionContextFromPathsOptions,
+} from './expressionEditor';

shesha-reactjs/src/components/propertyAutocomplete/propertySelect.tsx

@@ -19,7 +19,7 @@ import {
   ISpecification,
   metadataHasNestedProperties,
 } from '@/interfaces/metadata';
-import { Select, Tooltip } from 'antd';
+import { Select, SelectProps, Tooltip } from 'antd';
 import { SizeType } from 'antd/lib/config-provider/SizeContext';
 import { useQueryBuilder } from '@/providers';
 import { isNonEmptyArray } from '@/utils/array';
@@ -33,6 +33,8 @@ export interface IPropertySelectProps {
   style?: CSSProperties;
   dropdownStyle?: CSSProperties;
   size?: SizeType;
+  placeholder?: string;
+  variant?: SelectProps['variant'];
   onChange?: (value: string | null) => void;
   onSelect?: (value: string, selectedProperty: IPropertyItem | undefined) => void;
   readOnly?: boolean;
@@ -49,6 +51,7 @@ export interface IQbItem {
 interface IOption extends DefaultOptionType {
   value: string;
   label: string | React.ReactNode;
+  displayTitle?: string;
 }
 
 interface IAutocompleteState {
@@ -57,6 +60,38 @@ interface IAutocompleteState {
   prefix: string;
 }
 
+const propertyOptionContainerStyle: CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 8,
+  width: '100%',
+  maxWidth: '100%',
+  minWidth: 0,
+};
+
+const propertyOptionIconStyle: CSSProperties = {
+  flex: '0 0 auto',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+const propertyOptionTextStyle: CSSProperties = {
+  flex: '1 1 auto',
+  minWidth: 0,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+};
+
+const getOptionTitle = (option: IOption | undefined): string | undefined => {
+  if (!option)
+    return undefined;
+
+  return option.displayTitle ??
+    (typeof option.label === 'string' ? option.label : option.value);
+};
+
 const getFullPath = (path: string, prefix: string | null): string => {
   return prefix ? `${prefix}.${camelcase(path)}` : camelcase(path);
 };
@@ -89,27 +124,36 @@ const propertyItem2option = (item: IPropertyItem, prefix: string, isSelectable:
   if (isSpecification(item)) {
     const value = item.name;
     const label = (
-      <div>
-        {item.description ? <Tooltip title={item.description}><BulbTwoTone twoToneColor="orange" style={{ cursor: 'help' }} /></Tooltip> : <BulbOutlined />}
-        {item.friendlyName}
-      </div>
+      <span className="sha-property-select-option" title={item.friendlyName} style={propertyOptionContainerStyle}>
+        <span className="sha-property-select-option-icon" style={propertyOptionIconStyle}>
+          {item.description ? <Tooltip title={item.description}><BulbTwoTone twoToneColor="orange" style={{ cursor: 'help' }} /></Tooltip> : <BulbOutlined />}
+        </span>
+        <span className="sha-property-select-option-text" style={propertyOptionTextStyle}>{item.friendlyName}</span>
+      </span>
     );
 
     return {
       value: value,
       label: label,
+      displayTitle: item.friendlyName,
     };
   }
 
   if (isPropertyMetadata(item)) {
     const property = item as IPropertyMetadata;
     const value = getPropertyItemIdentifier(item, prefix);
     const icon = getIconByPropertyMetadata(property);
-    const label = <div>{icon} {value}</div>;
+    const label = (
+      <span className="sha-property-select-option" title={value} style={propertyOptionContainerStyle}>
+        <span className="sha-property-select-option-icon" style={propertyOptionIconStyle}>{icon}</span>
+        <span className="sha-property-select-option-text" style={propertyOptionTextStyle}>{value}</span>
+      </span>
+    );
 
     return {
       value: value,
       label: label,
+      displayTitle: value,
       disabled: isSelectable ? !isSelectable(item) : false,
     };
   }
@@ -236,8 +280,15 @@ export const PropertySelect: FC<IPropertySelectProps> = ({ readOnly = false, isP
     props.onChange?.(null);
   };
 
+  const selectedOption = useMemo(
+    () => state.options.find((option) => option.value === props.value),
+    [props.value, state.options],
+  );
+  const title = getOptionTitle(selectedOption) ?? props.value ?? props.placeholder;
+
   return (
     <Select<string>
+      {...(title !== undefined ? { title } : {})}
       onSelect={onSelect}
       value={props.value ?? null}
       showSearch={{
@@ -246,13 +297,14 @@ export const PropertySelect: FC<IPropertySelectProps> = ({ readOnly = false, isP
       size={props.size}
       disabled={readOnly}
       options={state.options}
-      style={{ minWidth: "150px" }}
+      style={{ minWidth: "150px", ...props.style }}
       {...(props.dropdownStyle ? { styles: { popup: { root: props.dropdownStyle } } } : {})}
+      {...(props.variant ? { variant: props.variant } : {})}
       popupMatchSelectWidth={false}
       allowClear
       onClear={onClear}
-    >
-    </Select>
+      placeholder={props.placeholder}
+    />
   );
 };