@qoretechnologies/reqraft 0.10.39-pr.99.gdbafa34 → 0.10.39

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

@@ -18,6 +18,7 @@ import React, { memo, useCallback, useEffect, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import useMount from 'react-use/lib/useMount';
 import { typedToYaml, yamlToTyped } from '../../../../helpers/common';
+import { getListElementValue } from '../../../../helpers/options';
 import {
   getTypeFromValue,
   getValueOrDefaultValue,
@@ -75,6 +76,10 @@ export interface IAutoFieldProps
   /** Render the arg_schema sub-form in compact (read-first) mode, matching the
    *  parent engine. */
   compact?: boolean;
+  /** Open the arg_schema sub-form's first attention row on mount, without taking
+   *  focus — see FormEngine's `expandFirstRequired`. Set by ArrayAuto on a
+   *  just-added row so its required choice is visible without a second click. */
+  expandFirstRequired?: boolean;
   path?: string;
   column?: boolean;
   level?: number;
@@ -161,6 +166,10 @@ function AutoField<T = any>({
   // Only the nested arg_schema mount sites re-forward this into their
   // sub-forms explicitly.
   inheritedFromParent,
+  // Destructured for the same reason as `inheritedFromParent`: only the nested
+  // sub-form mount site consumes it, and leaving it in `...rest` would spread an
+  // unknown attribute onto the primitive field renderers' DOM nodes.
+  expandFirstRequired,
   ...rest
 }: IAutoFieldProps & T) {
   const [currentType, setType] = useState<IQorusType>(defaultInternalType || null);
@@ -416,6 +425,9 @@ function AutoField<T = any>({
         value={value}
         name={name}
         onChange={handleChange}
+        // The picker heads itself with the field's own name rather than a
+        // generic "Select one:".
+        label={rest.display_name}
         size={rest.size}
         disabled={rest.disabled}
         app={rest.app}
@@ -499,6 +511,12 @@ function AutoField<T = any>({
           return (
             <LongStringFormField
               {...rest}
+              // These four share one editor but not one shape: a `string` holds
+              // exactly one line, while `data`, `binary` and `long-string` hold
+              // a document. Without the type the field cannot tell them apart
+              // and treats them all as documents, so an interface's Internal
+              // Name — which becomes a YAML key — accepted Enter.
+              type={currentType}
               onChange={(value) => handleChange(name, value)}
               value={value}
             />
@@ -559,6 +577,9 @@ function AutoField<T = any>({
                 wrapperPadding='top'
                 flat
                 compact={compact}
+                // A row added just now: open the field it cannot be saved
+                // without, instead of making the author find it and click it.
+                expandFirstRequired={expandFirstRequired}
                 // Embedded sub-form: no scroll context of its own, so its toolbar
                 // isn't sticky and its header stays transparent (no dark backdrop).
                 compactNested
@@ -633,8 +654,16 @@ function AutoField<T = any>({
               });
             };
 
+            // An element may arrive bare or in a `{value, type}` envelope. The
+            // envelope is what `formatToServerValue` writes, so a list the user
+            // has edited in this session is always wrapped — but a list read
+            // back from storage holds exactly what the server contract asks
+            // for, which for a list of strings is the strings themselves.
+            // Reaching for `.value` on those answered `undefined` for every
+            // element: the row rendered as an empty, invalid item, and the
+            // emptiness was then written back over the stored value.
             const formatFromServerValue = (value) => {
-              return (value || []).map((item) => item?.value);
+              return (value || []).map(getListElementValue);
             };
 
             const mappedAllowedValues = rest.element_allowed_values?.map((ev) => ({

package/src/components/form/fields/long-string/LongString.tsx

@@ -1,17 +1,31 @@
 import { ReqoreTextarea } from '@qoretechnologies/reqore';
 import { IReqoreTextareaProps } from '@qoretechnologies/reqore/dist/components/Textarea';
-import { ChangeEvent, useCallback, useEffect, useState } from 'react';
+import { ChangeEvent, KeyboardEvent, useCallback, useEffect, useState } from 'react';
 import { useDebounce } from 'react-use';
+import {
+  flattenToSingleLine,
+  hasLineBreak,
+  isSingleLineStringType,
+} from '../../../../helpers/singleLineString';
 
 export interface ILongStringFormFieldProps extends Omit<IReqoreTextareaProps, 'onChange'> {
   value?: string;
   onChange?: (value: string, event?: ChangeEvent<HTMLTextAreaElement>) => void;
+  /**
+   * The field's declared type, which decides whether it holds one line.
+   *
+   * Without it every string field is a growing textarea, so a technical name, a
+   * version and an IP address all accept Enter — and become YAML keys, class
+   * names and URLs with a newline in them. See `helpers/singleLineString`.
+   */
+  type?: string;
 }
 
 export const LongStringFormField = ({
   value,
   onChange,
   onClearClick,
+  type,
   ...rest
 }: ILongStringFormFieldProps) => {
   const [localValue, setLocalValue] = useState<string>(value ?? '');
@@ -32,9 +46,32 @@ export const LongStringFormField = ({
     [localValue, onChange]
   );
 
-  const handleChange = useCallback((event: ChangeEvent<HTMLTextAreaElement>): void => {
-    setLocalValue(event.target.value);
-  }, []);
+  const singleLine = isSingleLineStringType(type);
+
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLTextAreaElement>): void => {
+      const raw = event.target.value;
+      // Flatten here rather than only blocking the Enter key: a line break also
+      // arrives by paste, by drag-and-drop, from autofill and from an IME, and
+      // a keydown guard catches none of those.
+      setLocalValue(singleLine && hasLineBreak(raw) ? flattenToSingleLine(raw) : raw);
+    },
+    [singleLine]
+  );
+
+  // Stop Enter before it inserts anything, so the caret does not jump to a
+  // second line that is then flattened away under the cursor.
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLTextAreaElement>): void => {
+      if (singleLine && event.key === 'Enter') {
+        event.preventDefault();
+      }
+      (rest as { onKeyDown?: (event: KeyboardEvent<HTMLTextAreaElement>) => void }).onKeyDown?.(
+        event
+      );
+    },
+    [singleLine, rest.onKeyDown]
+  );
 
   const handleClearClick = useCallback(() => {
     setLocalValue('');
@@ -44,12 +81,16 @@ export const LongStringFormField = ({
 
   return (
     <ReqoreTextarea
-      scaleWithContent
+      // A one-line field must not grow, and must not offer a resize grip that
+      // implies it can hold more than it will keep.
+      scaleWithContent={!singleLine}
+      rows={singleLine ? 1 : undefined}
       fluid
       value={localValue}
       onChange={handleChange}
       onClearClick={handleClearClick}
       {...rest}
+      onKeyDown={handleKeyDown}
     />
   );
 };

package/src/components/form/fields/template/TemplateField.tsx

@@ -74,8 +74,17 @@ export const TemplatesListProps: IReqoreDropdownProps = {
 // markup stays verbatim. `type`/`level`/`allowTemplates` are destructured
 // only to keep them off the underlying ReQore component / DOM.
 /* eslint-disable @typescript-eslint/no-unused-vars */
+// `type` is FORWARDED here, unlike the other wrappers below: the long-string
+// field consumes it to decide whether it holds one line (a `string` does, a
+// `long-string`, `hash` or `list` does not) and never spreads it to the DOM.
+// Dropping it made every string field in every FormEngine form a growing
+// textarea, so an alert rule's Internal Name took Enter.
 const LongStringField = ({ name, onChange, type, level, allowTemplates, ...rest }: any) => (
-  <LongStringFormField {...rest} onChange={(value: string) => onChange?.(name, value)} />
+  <LongStringFormField
+    {...rest}
+    type={type}
+    onChange={(value: string) => onChange?.(name, value)}
+  />
 );
 const Number = ({ name, onChange, type, level, allowTemplates, ...rest }: any) => (
   <NumberFormField {...rest} onChange={(value: number | string) => onChange?.(name, value)} />
@@ -397,6 +406,11 @@ export const TemplateField = memo(
       showTemplatesDropdown;
 
     const Component = componentFromType ? ComponentMap[type] : Comp;
+    // Only a ComponentMap component gets `type`: it is ours and CONSUMES the
+    // prop (the long-string field needs it to know whether it holds one line)
+    // rather than spreading it onto the DOM. A caller-supplied `Comp` is someone
+    // else's, which is why `type` was kept off this call in the first place.
+    const componentTypeProp = componentFromType ? { type } : {};
     const fieldAriaLabel = rest['aria-label'] ?? label ?? rest.display_name ?? name;
 
     const filteredTemplates = useMemo<IReqoreFormTemplates>(():
@@ -769,6 +783,7 @@ export const TemplateField = memo(
             name={name}
             level={level}
             {...rest}
+            {...componentTypeProp}
             aria-label={fieldAriaLabel}
             className={`${className} template-selector`}
             templates={componentTemplates}

package/src/helpers/common.ts

@@ -1,5 +1,5 @@
 import { IReqoreRichTextEditorProps } from '@qoretechnologies/reqore/dist/components/RichTextEditor';
-import { TQorusFormFieldSchema } from '@qoretechnologies/ts-toolkit';
+import { TQorusFormFieldSchema, TQorusFormOperatorValue } from '@qoretechnologies/ts-toolkit';
 import yaml from 'js-yaml';
 
 // ─── Typed ↔ YAML helpers ──────────────────────────────────────────────────────
@@ -163,6 +163,16 @@ export const richtextToSegments = (
   return segments;
 };
 
+/**
+ * An operator value as the list it logically is.
+ *
+ * An option's `op` holds either one operator or a chain of them, and both
+ * spellings are legitimate on the wire. Every reader wants the list.
+ */
+export const fixOperatorValue = (
+  operator: TQorusFormOperatorValue
+): (string | null | undefined)[] => (Array.isArray(operator) ? operator : [operator]);
+
 export const insertAtIndex = (array: any[] = [], index = 0, value: any): any[] => {
   return [...array.slice(0, index), value, ...array.slice(index)];
 };

package/src/helpers/optionUiTypes.ts

@@ -0,0 +1,153 @@
+/**
+ * The Qorus option `ui_type` vocabulary.
+ *
+ * A `ui_type` names the widget an option is rendered with, and — because the
+ * widget decides what a complete value looks like — it is also what
+ * `validateField` switches on. Both readers have to agree about which strings
+ * are in the vocabulary, so the lists live here rather than beside either one.
+ *
+ * Grouped by what the group means to a reader, not by alphabet: the scalar
+ * types hold a single value, the collection types hold several, the choice
+ * types pick from a supplied set, and the interface types name another Qorus
+ * object by its name — which is why `isOptionInterfaceUiType` is enough for
+ * validation to treat the whole group as a non-empty string.
+ */
+
+export const OPTION_SCALAR_UI_TYPES = [
+  'string',
+  'long-string',
+  'data',
+  'binary',
+  'richtext',
+  'bool',
+  'boolean',
+  'date',
+  'int',
+  'integer',
+  'float',
+  'number',
+  'byte-size',
+  'url',
+  'code-editor',
+  'rgbcolor',
+  'any',
+  'auto',
+  // semantic string formats (string-backed types that carry a UI-renderable identity; see the qore
+  // DataProvider QoreStringFormatDataType)
+  'email',
+  'uri',
+  'uuid',
+  'hostname',
+  'ipv4',
+  'ipv6',
+  'phone',
+] as const;
+
+export const OPTION_COLLECTION_UI_TYPES = [
+  'hash',
+  'free-hash',
+  'list',
+  'free-list',
+  'option_hash',
+  'file',
+  'file-as-string',
+  'collection-documents',
+] as const;
+
+export const OPTION_CHOICE_UI_TYPES = [
+  'enum',
+  'select-string',
+  'select-array',
+  'multi-select',
+] as const;
+
+export const OPTION_INTERFACE_UI_TYPES = [
+  'workflow',
+  'service',
+  'job',
+  'connection',
+  'mapper',
+  'class',
+  'value-map',
+  'fsm',
+  'qog',
+  'api-schema',
+  'auth-profile',
+  'ai-collection',
+  'ai-endpoint',
+  'ai-guardrail',
+  'ml-model',
+  'release-config',
+  'alertrule',
+  'alertsilence',
+  'installed-release',
+  'business-process',
+  'schema',
+  'test',
+] as const;
+
+export const OPTION_CUSTOM_UI_TYPES = [
+  'processor',
+  'processor-mappings',
+  'data-provider',
+  'tool-catalog',
+  'schema-definition',
+  'test-cases',
+  'test-value-contract',
+  'dpql',
+  'active-windows',
+] as const;
+
+export const OPTION_UI_TYPES = [
+  ...OPTION_SCALAR_UI_TYPES,
+  ...OPTION_COLLECTION_UI_TYPES,
+  ...OPTION_CHOICE_UI_TYPES,
+  ...OPTION_INTERFACE_UI_TYPES,
+  ...OPTION_CUSTOM_UI_TYPES,
+] as const;
+
+export type TOptionUiType = (typeof OPTION_UI_TYPES)[number];
+export type TOptionInterfaceUiType = (typeof OPTION_INTERFACE_UI_TYPES)[number];
+
+export const LEGACY_FIELD_UI_TYPES = [
+  'api-manager',
+  'array',
+  'array-auto',
+  'array-of-pairs',
+  'class-array',
+  'class-connectors',
+  'constant-array',
+  'context-selector',
+  'cron',
+  'data-provider-options',
+  'file-array',
+  'fsm-list',
+  'function-array',
+  'http-content',
+  'method-name',
+  'opcua-method-arguments',
+  'opcua-write-values',
+  'options',
+  'select',
+  'service-events',
+  'service-webhooks',
+  'type-selector',
+] as const;
+
+export const KNOWN_QORUS_UI_TYPES = [...OPTION_UI_TYPES, ...LEGACY_FIELD_UI_TYPES] as const;
+
+export type TLegacyFieldUiType = (typeof LEGACY_FIELD_UI_TYPES)[number];
+export type TKnownQorusUiType = (typeof KNOWN_QORUS_UI_TYPES)[number];
+
+const optionUiTypeSet = new Set<string>(OPTION_UI_TYPES);
+const interfaceUiTypeSet = new Set<string>(OPTION_INTERFACE_UI_TYPES);
+const knownQorusUiTypeSet = new Set<string>(KNOWN_QORUS_UI_TYPES);
+
+export const isOptionUiType = (type: unknown): type is TOptionUiType =>
+  typeof type === 'string' && optionUiTypeSet.has(type);
+
+export const isOptionInterfaceUiType = (type: unknown): type is TOptionInterfaceUiType =>
+  typeof type === 'string' && interfaceUiTypeSet.has(type);
+
+export const isKnownQorusUiType = (type: unknown): type is TKnownQorusUiType =>
+  typeof type === 'string' && knownQorusUiTypeSet.has(type);

package/src/helpers/options.ts

@@ -29,3 +29,26 @@ export const getRequiredOptionMessage = (
 
   return `This field or ${requiredOptions} is required`;
 };
+
+/**
+ * The value of one element of a list field.
+ *
+ * A list element arrives in either of two shapes, and both are legitimate. The
+ * editor keeps each element in a `{value, type}` envelope while the form is
+ * being worked on — that is what `formatToServerValue` writes — while a value
+ * read back from storage holds what the server contract asks for, which for a
+ * list of strings is the bare strings.
+ *
+ * Reaching straight for `.value` answered `undefined` for every stored element.
+ * On a read that emptied the row; on a validation pass it failed the element as
+ * empty; and on an autosaving form the emptiness was then written back over the
+ * stored value. One helper so the readers cannot disagree about which shape
+ * they are looking at.
+ *
+ * An array is never an envelope — a rich-text document is itself an array, and
+ * `'value' in []` is false anyway, but saying so keeps the intent legible.
+ */
+export const getListElementValue = (element: unknown): unknown =>
+  element && typeof element === 'object' && !Array.isArray(element) && 'value' in element ?
+    (element as { value: unknown }).value
+  : element;

package/src/helpers/providerValue.ts

@@ -0,0 +1,125 @@
+import { TQorusForm } from '@qoretechnologies/ts-toolkit';
+
+export type TRecordType = 'search' | 'search-single' | 'create' | 'update' | 'delete';
+export type TRealRecordType = 'read' | 'create' | 'update' | 'delete';
+
+export type TProviderTypeSupports = {
+  [key in `supports_${TRealRecordType}`]?: boolean;
+};
+
+export type TProviderTypeArgs = {
+  [key in `${TRecordType}_args`]?: TQorusForm | TQorusForm[];
+};
+
+/**
+ * A data-provider selection, in the shape the form holds it.
+ *
+ * The `supports_*` flags say which record operations the selected provider can
+ * perform; validation reads them to decide whether a provider is a legitimate
+ * target for the operation the field was configured for.
+ */
+export interface IProviderType extends TProviderTypeSupports, TProviderTypeArgs {
+  type: string;
+  name: string;
+  path?: string;
+  options?: TQorusForm;
+  subtype?: 'request' | 'response';
+  hasApiContext?: boolean;
+  optionsChanged?: boolean;
+  searchOptionsChanged?: boolean;
+  desc?: string;
+  use_args?: boolean;
+  args?: any;
+  up?: boolean;
+  supports_request?: boolean;
+  supports_messages?: 'ASYNC' | 'SYNC' | 'NONE';
+  supports_observable?: boolean;
+  transaction_management?: boolean;
+  record_requires_search_options?: boolean;
+  create_args_freeform?: TQorusForm[];
+  is_api_call?: boolean;
+  search_options?: TQorusForm;
+  descriptions?: string[];
+  message_id?: string;
+  message?: {
+    type: string;
+    value: any;
+  };
+}
+
+/**
+ * A provider value as an object, from either representation a caller may hold.
+ *
+ * A provider reaches the form either already expanded into `IProviderType`, or
+ * as the flat path string the server stores — `"factory/db{driver=pgsql}/table"`
+ * or the plain `"type/name/path"`. Returns `null` for anything that is neither,
+ * so a caller reports an invalid value rather than reading fields off nothing.
+ */
+export const maybeBuildOptionProvider = (provider: unknown): IProviderType | null => {
+  if (!provider) {
+    return null;
+  }
+  if (typeof provider === 'object') {
+    return provider as IProviderType;
+  }
+  if (typeof provider !== 'string') {
+    return null;
+  }
+
+  if (provider.startsWith('factory')) {
+    const fixedProvider = provider.endsWith('/') ? provider : `${provider}/`;
+    const [factoryType] = fixedProvider.split('/');
+    const factoryName = fixedProvider.substring(
+      fixedProvider.indexOf('/') + 1,
+      fixedProvider.lastIndexOf('{')
+    );
+    const options = fixedProvider.substring(
+      fixedProvider.indexOf('{') + 1,
+      fixedProvider.lastIndexOf('}')
+    );
+    const optionsObject = options
+      .split(',')
+      .filter(Boolean)
+      .reduce<Record<string, string>>((result, option) => {
+        const [key, value] = option.split('=');
+        result[key] = value;
+        return result;
+      }, {});
+    const result: IProviderType = {
+      type: factoryType,
+      name: factoryName,
+      path: fixedProvider.substring(fixedProvider.lastIndexOf('}/') + 2),
+      options: optionsObject as unknown as TQorusForm,
+    };
+    if (provider.includes('?options_changed')) {
+      result.optionsChanged = true;
+    }
+    return result;
+  }
+
+  const [type, name, ...path] = provider.split('/');
+  return { type, name, path: path.join('/') };
+};
+
+/**
+ * An FSM variable action — which variable, and what is done to it.
+ *
+ * The provider half is `Partial<IProviderType>` because the action's own
+ * `action_type` decides which provider fields have to be there; validation
+ * re-runs the matching provider validator over the merged value rather than
+ * duplicating those rules here.
+ */
+export type TVariableActionValue = {
+  var_type: 'globalvar' | 'localvar' | 'autovar';
+  var_name: string;
+  transaction_action?: 'commit' | 'rollback' | 'begin-transaction';
+  action_type?:
+    | 'search'
+    | 'search-single'
+    | 'update'
+    | 'create'
+    | 'delete'
+    | 'transaction'
+    | 'send-message'
+    | 'apicall';
+} & Partial<IProviderType>;

package/src/helpers/singleLineString.ts

@@ -0,0 +1,61 @@
+/**
+ * Which string field types hold one line, and how to keep them that way.
+ *
+ * The server already draws this distinction and the IDE was throwing it away:
+ * a service's `name` is declared `ui_type: "string"` while its `description` is
+ * `ui_type: "long-string"` with `markdown: True` (see `ServiceMetadata.qc`).
+ * Every one of them — plus `email`, `uuid`, `hostname`, `ipv4`, `ipv6` and
+ * `phone` — rendered through the same growing textarea, so a technical name, a
+ * version and an IP address all accepted Enter.
+ *
+ * That is not a cosmetic problem. These values become YAML keys, class names,
+ * URLs and identifiers; a newline in one of them is invalid input that the form
+ * happily accepted and passed on, and the operator had no way to see it.
+ *
+ * The rule is the server's own contract, stated once here rather than guessed
+ * per field, and it is enforced in `LongString.tsx`.
+ *
+ * It lives in reqraft rather than in a consumer because the consumer is not the
+ * only renderer: qorus-ide fixed this in its OWN long-string field, and every
+ * form that goes through FormEngine — which is where an alert rule's Internal
+ * Name, Name and Short Description are — reaches THIS one instead. The fix was
+ * real and the field in front of the operator still took Enter.
+ */
+
+/**
+ * The string types that hold exactly one line — the ones routed to a textarea
+ * today.
+ *
+ * Listed explicitly rather than derived by excluding the document types,
+ * because the two directions fail very differently. Missing a single-line type
+ * here leaves it behaving as it does now — no worse. Wrongly treating a new
+ * DOCUMENT type as single-line would flatten a user's text as they typed it,
+ * which is data loss. So an unrecognised type stays multi-line.
+ */
+const SINGLE_LINE_STRING_TYPES = new Set([
+  'string',
+  'email',
+  'uuid',
+  'hostname',
+  'ipv4',
+  'ipv6',
+  'phone',
+]);
+
+/** True when a string field of this type holds a single line. */
+export const isSingleLineStringType = (type?: string): boolean =>
+  !!type && SINGLE_LINE_STRING_TYPES.has(type);
+
+/**
+ * Flattens any line break to a single space.
+ *
+ * A space rather than nothing, because the newline is usually where a word
+ * boundary was — pasting two lines into a name should read as two words, not
+ * one run-together one. CR, LF and CRLF all collapse to one space, and the
+ * result is trimmed of leading/trailing whitespace the break introduced.
+ */
+export const flattenToSingleLine = (value: string): string =>
+  value.replace(/\r\n|\r|\n/g, ' ').replace(/ {2,}/g, ' ');
+
+/** True when the value carries a line break this field should not hold. */
+export const hasLineBreak = (value: string): boolean => /\r|\n/.test(value);