@qoretechnologies/reqraft 0.10.19 → 0.10.20

package/src/components/form/fields/Field.tsx

@@ -25,6 +25,7 @@ import NumberFormField from './number/Number';
 import { ReqraftObjectFormField } from './object/Object';
 import { RichTextFormField } from './rich-text/RichText';
 import { SelectFormField } from './select/Select';
+import { getSelectItemShortDescription } from './select/SelectCollection';
 import { StringFormField } from './string/String';
 import { ArrayAutoField } from './array/ArrayAutoField';
 import { AutoFormField } from './auto/AutoFormField';
@@ -538,6 +539,10 @@ export const FormField = <T extends TFormFieldType>({
           icon='SaveFill'
           fluid
           hideItemCount
+          forceDropdown={
+            (fieldProps as { forceDropdown?: boolean } | undefined)?.forceDropdown ??
+            (rest as { forceDropdown?: boolean }).forceDropdown
+          }
         />
       );
     }
@@ -557,7 +562,7 @@ export const FormField = <T extends TFormFieldType>({
                 margin='right'
                 key={index}
                 label={item.display_name ?? JSON.stringify(itemValue)}
-                tooltip={item.short_desc || item.desc}
+                tooltip={getSelectItemShortDescription(mapAllowedValue(item))}
                 disabled={item.disabled}
                 checked={checked}
                 intent={checked ? 'info' : undefined}
@@ -578,6 +583,10 @@ export const FormField = <T extends TFormFieldType>({
         value={value}
         onChange={(val) => handleChange(val as TFormFieldValueType<T>)}
         fluid
+        forceDropdown={
+          (fieldProps as { forceDropdown?: boolean } | undefined)?.forceDropdown ??
+          (rest as { forceDropdown?: boolean }).forceDropdown
+        }
       />
     );
   };

package/src/components/form/fields/allowed-values/AllowedValues.tsx

@@ -12,8 +12,8 @@ import { ReqoreCheckbox, ReqoreControlGroup, ReqoreSpan } from '@qoretechnologie
 import { IReqoreButtonProps } from '@qoretechnologies/reqore/dist/components/Button';
 import { IQorusAllowedValue, TQorusType } from '@qoretechnologies/ts-toolkit';
 import { size as count, isEqual } from 'lodash';
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { useDebounce } from 'react-use';
+import { memo, useMemo } from 'react';
+import { getSelectItemShortDescription } from '../select/SelectCollection';
 import { ISelectFormFieldItem, SelectFormField as Select } from '../select/Select';
 
 export interface IFieldAllowedValuesProps extends Pick<
@@ -30,6 +30,7 @@ export interface IFieldAllowedValuesProps extends Pick<
   app?: string;
   action?: string;
   showSavedValues?: boolean;
+  forceDropdown?: boolean;
   [key: string]: any;
 }
 
@@ -57,7 +58,7 @@ export const FieldAllowedValuesCheckGroup = memo(
             margin='right'
             key={item.value?.toString()}
             label={item.display_name || JSON.stringify(item.value)}
-            tooltip={item.short_desc || item.desc}
+            tooltip={getSelectItemShortDescription(item)}
             disabled={rest.disabled}
             readOnly={rest.readOnly}
             intent={item.value === value ? 'info' : undefined}
@@ -97,49 +98,23 @@ export const FieldAllowedValues = memo(
     allowCreation,
     showSavedValues,
     showDescription,
+    forceDropdown,
     size,
     disabled,
     name,
     readOnly,
   }: IFieldAllowedValuesProps) => {
-    const [localValue, setLocalValue] = useState(value);
-    const [localItems, setLocalItems] = useState<IQorusAllowedValue[]>(items);
-
-    useEffect(() => {
-      setLocalItems(items);
-    }, [JSON.stringify(items)]);
-
-    const handleLocalChange = useCallback((_name: string, value: unknown) => {
-      setLocalValue(value);
-    }, []);
-
-    useDebounce(
-      () => {
-        if (localValue !== value) {
-          onChange(name, localValue);
-        }
-      },
-      200,
-      [localValue]
-    );
-
-    useEffect(() => {
-      if (value !== localValue) {
-        setLocalValue(value);
-      }
-    }, [value]);
-
     const fullItems = useMemo(() => {
       const result = [
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        ...localItems.map(({ metadata, value, ...rest }) => ({
+        ...items.map(({ metadata, value, ...rest }) => ({
           value: value?.value,
           ...rest,
         })),
       ] as ISelectFormFieldItem[];
 
       return result;
-    }, [JSON.stringify(localItems), type, value, showSavedValues, disabled, readOnly]);
+    }, [JSON.stringify(items), type, value, showSavedValues, disabled, readOnly]);
 
     const style = useMemo(() => ({ width: '100%' }), []);
 
@@ -153,8 +128,8 @@ export const FieldAllowedValues = memo(
         return (
           <FieldAllowedValuesCheckGroup
             items={fullItems}
-            onChange={handleLocalChange}
-            value={localValue}
+            onChange={onChange}
+            value={value}
             name={name}
           />
         );
@@ -164,10 +139,11 @@ export const FieldAllowedValues = memo(
         <Select
           items={fullItems}
           value={value}
-          onChange={(value) => handleLocalChange(name, value)}
+          onChange={(value) => onChange(name, value)}
           fluid
           fixed={false}
           showDescription={Boolean(showDescription || showDescription === undefined)}
+          forceDropdown={forceDropdown}
           style={style}
           size={size}
           disabled={disabled}
@@ -178,10 +154,11 @@ export const FieldAllowedValues = memo(
     return (
       <Select
         items={fullItems}
-        onChange={(value) => handleLocalChange(name, value)}
+        onChange={(value) => onChange(name, value)}
         fluid
         fixed={false}
         showDescription={false}
+        forceDropdown={forceDropdown}
         style={style}
         minimal
         placeholder={'Saved & Suggested Values'}

package/src/components/form/fields/auto/AutoFormField.stories.tsx

@@ -330,6 +330,7 @@ export const RichText: Story = {
 export const ConnectionWithAllowedValues: Story = {
   args: {
     defaultType: 'connection',
+    forceDropdown: false,
     allowed_values: [
       {
         display_name: 'test',

package/src/components/form/fields/auto/AutoFormField.tsx

@@ -374,6 +374,7 @@ function AutoField<T = any>({
   ) {
     return (
       <SchemaDefinitionEditor
+        {...((rest as any).fieldProps || {})}
         value={
           value === null || value === undefined
             ? undefined
@@ -419,6 +420,7 @@ function AutoField<T = any>({
         app={rest.app}
         action={rest.action}
         showDescription={rest.showDescription}
+        forceDropdown={rest.forceDropdown}
         allowCreation={rest.allowed_values_creatable}
         showSavedValues={showSavedValues}
         readOnly={rest.readonly}

package/src/components/form/fields/boolean/Boolean.stories.tsx

@@ -75,6 +75,40 @@ export const Unchecked: Story = {
   },
 };
 
+export const Unset: Story = {
+  args: {
+    checked: undefined,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Boolean field without a default choice. The switch remains visibly unset until the user explicitly chooses Yes or No.',
+      },
+    },
+  },
+};
+
+export const UnsetSelectsYes: Story = {
+  args: {
+    checked: undefined,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Verifies that an unset Boolean field saves the first explicit Yes selection instead of treating the missing value as No.',
+      },
+    },
+  },
+  async play({ canvasElement, args }) {
+    const canvas = within(canvasElement);
+
+    await userEvent.click(canvas.getByLabelText('Boolean'));
+    await expect(args.onChange).toHaveBeenLastCalledWith(true);
+  },
+};
+
 export const Disabled: Story = {
   args: {
     checked: true,

package/src/components/form/fields/boolean/Boolean.tsx

@@ -18,7 +18,7 @@ export const BooleanFormField = ({
 
   return (
     <ReqoreCheckbox
-      checked={checked ?? false}
+      checked={checked}
       onClick={toggle}
       asSwitch
       onText='Yes'

package/src/components/form/fields/multi-select/MultiSelectFormField.tsx

@@ -2,6 +2,7 @@ import { ReqoreMultiSelect } from '@qoretechnologies/reqore';
 import { TReqoreMultiSelectItem } from '@qoretechnologies/reqore/dist/components/MultiSelect';
 import { IQorusAllowedValue } from '@qoretechnologies/ts-toolkit';
 import { memo, useMemo } from 'react';
+import { getSelectItemShortDescription } from '../select/SelectCollection';
 
 export interface IMultiSelectFormFieldProps {
   /** Currently selected values (plain scalars) */
@@ -33,16 +34,19 @@ export const MultiSelectFormField = memo(
 
     const reqoreItems = useMemo<TReqoreMultiSelectItem[]>(() => {
       const base = items.map(
-        (item): TReqoreMultiSelectItem => ({
-          value: item.value?.value as string,
-          label: item.display_name ?? String(item.value?.value ?? ''),
-          description: item.short_desc || item.desc,
-          tooltip: item.desc || item.short_desc,
-          wrap: true,
-          // IDE parity: when `*` is selected, every other item is disabled.
-          disabled:
-            !!item.disabled || (selectedValues.includes('*') && item.value?.value !== '*'),
-        })
+        (item): TReqoreMultiSelectItem => {
+          const description = getSelectItemShortDescription(item);
+
+          return {
+            value: item.value?.value as string,
+            label: item.display_name ?? String(item.value?.value ?? ''),
+            description,
+            wrap: true,
+            // IDE parity: when `*` is selected, every other item is disabled.
+            disabled:
+              !!item.disabled || (selectedValues.includes('*') && item.value?.value !== '*'),
+          };
+        }
       );
 
       // IDE parity: selected values that aren't in the allowed list still

package/src/components/form/fields/select/Select.stories.tsx

@@ -62,6 +62,7 @@ export const ItemsWithDescription: Story = {
     },
   },
   args: {
+    forceDropdown: false,
     items: [
       { display_name: 'Item 1', desc: 'This is item 1', value: 'item1', icon: 'MoneyEuroCircleFill', groups: ['Miscellaneous'] },
       { display_name: 'Item 2', desc: 'This is item 2', value: 'item2', image: 'https://avatars.githubusercontent.com/u/8861481?v=4' },
@@ -106,6 +107,7 @@ export const ItemsWithDescriptionAndMessages: Story = {
     },
   },
   args: {
+    forceDropdown: false,
     items: [
       {
         display_name: 'Item 1',
@@ -162,6 +164,7 @@ export const DisabledItemsWithIntent: Story = {
 
 export const DisabledItemsWithIntentAndDescriptions: Story = {
   args: {
+    forceDropdown: false,
     items: [
       { display_name: 'Item 1', desc: 'This is item 1', value: 'item1' },
       { display_name: 'Item 2', short_desc: 'This is item 2', value: 'item2' },
@@ -326,6 +329,7 @@ export const AutoSelectWithDescriptions: Story = {
 
 export const ItemValuesAreObjectsAndCanBeSelected: Story = {
   args: {
+    forceDropdown: false,
     value: { id: { type: 'string', value: 'item1' } },
     items: [
       { value: { id: { type: 'string', value: 'item1' } } },

package/src/components/form/fields/select/Select.tsx

@@ -11,7 +11,11 @@ import { TReqoreIntent } from '@qoretechnologies/reqore/dist/constants/theme';
 import { IReqoreIconName } from '@qoretechnologies/reqore/dist/types/icons';
 import { isEqual, size } from 'lodash';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { ISelectFieldCollectionItem, SelectFieldCollection } from './SelectCollection';
+import {
+  getSelectItemShortDescription,
+  ISelectFieldCollectionItem,
+  SelectFieldCollection,
+} from './SelectCollection';
 
 export type ISelectFormFieldItem = ISelectFieldCollectionItem;
 
@@ -68,7 +72,7 @@ export const SelectFormField = memo(
     showPlaceholder = true,
     showRightIcon = true,
     hideItemCount,
-    forceDropdown,
+    forceDropdown = true,
     fluid,
     flat,
     intent,
@@ -89,6 +93,7 @@ export const SelectFormField = memo(
           return;
         }
         onChange?.(item.value);
+        setCollectionOpen(false);
       },
       [onChange, value]
     );
@@ -96,7 +101,7 @@ export const SelectFormField = memo(
     const getItemDescription = useCallback(
       (itemValue: unknown) => {
         const item = items.find((item) => isEqual(item.value, itemValue));
-        return item?.desc || item?.short_desc;
+        return getSelectItemShortDescription(item);
       },
       [items]
     );
@@ -133,7 +138,7 @@ export const SelectFormField = memo(
         const item = items.find(
           (item) => isEqual(item.display_name, itemName) || isEqual(item.value, itemName)
         );
-        return item?.short_desc || (item?.desc ? 'Hover to see description' : defaultDesc);
+        return getSelectItemShortDescription(item, defaultDesc);
       },
       [items, showDescription]
     );
@@ -230,13 +235,35 @@ export const SelectFormField = memo(
       [size(items), hideItemCount]
     );
 
-    if (autoSelect && filteredItems.length === 1 && !filteredItems[0].disabled) {
-      if (!disabled && !isEqual(filteredItems[0].value, value) && !value) {
-        handleSelectClick(filteredItems[0]);
+    const autoSelectedItem = useMemo(
+      () =>
+        autoSelect && filteredItems.length === 1 && !filteredItems[0].disabled
+          ? filteredItems[0]
+          : undefined,
+      [autoSelect, filteredItems]
+    );
+
+    // Selecting during render causes a parent-controlled field to synchronously
+    // update while this component is still rendering. React rejects that update
+    // and can enter an infinite render loop. Commit the derived default after
+    // rendering instead; the button below already renders the sole item's label
+    // while the controlled value catches up.
+    useEffect(() => {
+      const valueIsUnset = value === undefined || value === null || value === '';
+
+      if (
+        autoSelectedItem &&
+        !disabled &&
+        valueIsUnset &&
+        !isEqual(autoSelectedItem.value, value)
+      ) {
+        handleSelectClick(autoSelectedItem);
       }
+    }, [autoSelectedItem, disabled, handleSelectClick, value]);
 
-      const itemHasError = hasError(items, filteredItems[0].value);
-      const itemHasWarning = hasWarning(items, filteredItems[0].value);
+    if (autoSelectedItem) {
+      const itemHasError = hasError(items, autoSelectedItem.value);
+      const itemHasWarning = hasWarning(items, autoSelectedItem.value);
 
       return (
         <ReqoreButton
@@ -247,12 +274,12 @@ export const SelectFormField = memo(
           fluid={fluid}
           flat={flat ?? false}
           size={componentSize}
-          label={getLabel(items, value ?? filteredItems[0].value)}
+          label={getLabel(items, value ?? autoSelectedItem.value)}
           description={getItemShortDescription(value as string) as string}
           readOnly
           fixed
           minimal
-          {...getIcon(filteredItems, filteredItems[0].value)}
+          {...getIcon(filteredItems, autoSelectedItem.value)}
           intent={
             itemHasError ? 'danger'
             : itemHasWarning ?
@@ -291,7 +318,6 @@ export const SelectFormField = memo(
             <SelectFieldCollection
               items={filteredItems}
               filters={filters}
-              getItemDescription={(v) => getItemDescription(v) as string}
               value={value}
               onItemSelect={handleSelectClick}
               onClose={() => setCollectionOpen(false)}

package/src/components/form/fields/select/SelectCollection.tsx

@@ -4,7 +4,6 @@ import {
   ReqoreControlGroup,
   ReqoreMessage,
   ReqoreModal,
-  ReqoreP,
 } from '@qoretechnologies/reqore';
 import { IReqoreCollectionItemProps } from '@qoretechnologies/reqore/dist/components/Collection/item';
 import { TReqoreBadge } from '@qoretechnologies/reqore/dist/components/Button';
@@ -12,7 +11,7 @@ import { TReqoreIntent } from '@qoretechnologies/reqore/dist/constants/theme';
 import { IReqoreIconName } from '@qoretechnologies/reqore/dist/types/icons';
 import { capitalize, isEqual, size } from 'lodash';
 import { useMemo, useState } from 'react';
-import ReactMarkdown from 'react-markdown';
+import { Description } from '../../../Description';
 
 const PositiveColorEffect = {
   gradient: {
@@ -25,6 +24,7 @@ const PositiveColorEffect = {
 
 export interface ISelectFieldCollectionItem {
   value?: unknown;
+  name?: unknown;
   display_name?: string;
   desc?: string;
   short_desc?: string;
@@ -42,16 +42,76 @@ export interface ISelectFieldCollectionItem {
 export interface ISelectFieldCollectionProps {
   onClose: () => void;
   items: ISelectFieldCollectionItem[];
-  getItemDescription: (value: unknown) => string;
   value?: unknown;
   onItemSelect: (item: ISelectFieldCollectionItem) => void;
   filters?: string[];
 }
 
+const normalizeSelectItemDescription = (value: unknown): string | undefined => {
+  if (typeof value !== 'string' || !value.trim()) {
+    return undefined;
+  }
+
+  const seen = new Set<string>();
+
+  return value
+    .split('\n')
+    .filter((line) => {
+      const normalized = line.trim().replace(/\s+/g, ' ').toLocaleLowerCase();
+
+      if (!normalized) {
+        return true;
+      }
+
+      if (seen.has(normalized)) {
+        return false;
+      }
+
+      seen.add(normalized);
+      return true;
+    })
+    .join('\n')
+    .trim();
+};
+
+export const getSelectItemDescription = (
+  item: Pick<ISelectFieldCollectionItem, 'desc' | 'short_desc'>
+): string | undefined => {
+  const desc = normalizeSelectItemDescription(item.desc);
+  const shortDesc = normalizeSelectItemDescription(item.short_desc);
+  return desc ?? shortDesc;
+};
+
+export const getSelectItemShortDescription = (
+  item: Pick<ISelectFieldCollectionItem, 'desc' | 'short_desc'> | undefined,
+  defaultDesc = ''
+): string | undefined => {
+  if (!item) {
+    return defaultDesc || undefined;
+  }
+
+  const shortDescription = normalizeSelectItemDescription(item.short_desc);
+
+  return shortDescription || defaultDesc || undefined;
+};
+
+export const getSelectItemDescriptionProps = (
+  item: Pick<ISelectFieldCollectionItem, 'desc' | 'short_desc'>
+): { longDescription?: string; shortDescription?: string } => {
+  const longDescription = normalizeSelectItemDescription(item.desc);
+
+  if (longDescription) {
+    return { longDescription };
+  }
+
+  const shortDescription = normalizeSelectItemDescription(item.short_desc);
+
+  return { shortDescription };
+};
+
 export const SelectFieldCollection = ({
   onClose,
   items,
-  getItemDescription,
   value,
   onItemSelect,
   filters,
@@ -100,8 +160,10 @@ export const SelectFieldCollection = ({
         transparent={false}
         size='tiny'
         showLayoutSwitch={false}
-        items={filteredItems.map(
-          (item): IReqoreCollectionItemProps => ({
+        items={filteredItems.map((item): IReqoreCollectionItemProps => {
+          const { longDescription, shortDescription } = getSelectItemDescriptionProps(item);
+
+          return {
             label: item.display_name || item.value?.toString(),
             size: 'tiny',
             groups: item.groups,
@@ -109,8 +171,14 @@ export const SelectFieldCollection = ({
             responsiveTitle: false,
             content: (
               <ReqoreControlGroup vertical fluid>
-                {item.short_desc && <ReqoreP size='small'>{item.short_desc}</ReqoreP>}
-                {item.desc && <ReqoreP size='small'>{item.desc}</ReqoreP>}
+                {longDescription || shortDescription ? (
+                  <Description
+                    longDescription={longDescription || ''}
+                    shortDescription={shortDescription}
+                    size='small'
+                    margin='none'
+                  />
+                ) : null}
                 {item.actions?.map(({ as: Component = ReqoreButton, props, ...rest }, index) => (
                   <Component
                     key={index}
@@ -148,13 +216,6 @@ export const SelectFieldCollection = ({
               size: '20px',
               rounded: true,
             },
-            tooltip: !!item.desc
-              ? {
-                  delay: 800,
-                  content: <ReactMarkdown>{getItemDescription(item.value)}</ReactMarkdown>,
-                  maxWidth: '70vw',
-                }
-              : undefined,
             onClick: !item.disabled
               ? (e) => {
                   if (e.currentTarget.contains(e.target as Node)) {
@@ -163,8 +224,8 @@ export const SelectFieldCollection = ({
                   }
                 }
               : undefined,
-          })
-        )}
+          };
+        })}
         actions={filters?.map((filter) => ({
           label: capitalize(filter.replace('_', ' ')),
           badge: items.filter((item) => item[filter]).length,

package/src/stores/currentUser/currentUser.stories.tsx

@@ -6,6 +6,38 @@ import { currentUserStore } from './currentUser';
 
 const meta = {
   title: 'Stores/Current User',
+  parameters: {
+    mockData: [
+      {
+        url: 'https://hq.qoretechnologies.com:8092/api/latest/users?action=current',
+        method: 'GET',
+        status: 200,
+        response: {
+          provider: 'local',
+          username: 'david',
+          name: 'David Nichols',
+          has_default: true,
+          roles: ['admin'],
+          permissions: ['USER-CONTROL'],
+          workflows: [],
+          services: [],
+          jobs: [],
+          mappers: [],
+          vmaps: [],
+          groups: [],
+          fsms: [],
+        },
+      },
+    ],
+  },
+  beforeEach: () => {
+    currentUserStore.setState({
+      currentUser: undefined,
+      loading: false,
+      error: undefined,
+      errorData: undefined,
+    });
+  },
   render: () => {
     const { load, loading, currentUser = {}, errorData } = currentUserStore();