@qoretechnologies/reqraft 0.10.51 → 0.10.52

package/src/components/form/expressions/builder/index.tsx

@@ -15,12 +15,14 @@ import {
   TReqoreHexColor,
 } from '@qoretechnologies/reqore/dist/components/Effect';
 import { IReqorePanelAction } from '@qoretechnologies/reqore/dist/components/Panel';
+import { IReqoreIconName } from '@qoretechnologies/reqore/dist/types/icons';
 import { IReqoreFormTemplates } from '@qoretechnologies/reqore/dist/components/Textarea';
 import { TQorusType } from '@qoretechnologies/ts-toolkit';
 import { clone, cloneDeep, get, isArray, set, size, unset } from 'lodash';
 import { darken, rgba } from 'polished';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
+import { moveItem } from '../../../../helpers/common';
 import { areQorusTypesCompatible, getArgumentType } from '../../../../helpers/expressions';
 import { findTemplate } from '../../../../helpers/templates';
 import { validateField, validateFieldWithResult } from '../../../../helpers/validations';
@@ -29,12 +31,18 @@ import { useReqraftStorage } from '../../../../hooks/useStorage/useStorage';
 import { useTemplates } from '../../../../hooks/useTemplates';
 import { AutoFormField as auto } from '../../fields/auto/AutoFormField';
 import { SelectFormField as Select } from '../../fields/select/Select';
-import { TCustomTemplateItems, TemplateField } from '../../fields/template/TemplateField';
+import {
+  ITemplateMenuActions,
+  TCustomTemplateItems,
+  TemplateField,
+} from '../../fields/template/TemplateField';
 import {
   ExpressionDefaultValue,
   IExpression,
   IExpressionSchema,
   IExpressionSchemaArg,
+  TExpressionReorder,
+  TExpressionReorderSurface,
 } from '../types';
 import { useExpressions } from '../useExpressions';
 import { ExpressionArgumentDetail } from './argumentDetail';
@@ -42,6 +50,7 @@ import { ExpressionBuilderArgumentWrapper } from './argumentWrapper';
 import { ConfirmMismatchedTypesModal } from './confirmMismatchedTypesModal';
 import { ConfirmUnsupportedTypeModal } from './confirmUnsupportedTypeModal';
 import { ExpressionItem } from './item';
+import { ExpressionMoveToPositionStrip } from './moveToPositionStrip';
 import { ExpressionRenderTemplate } from './renderTemplate';
 
 const noopUseRegisterHintView = (...args: unknown[]): void => {
@@ -60,6 +69,8 @@ export interface IExpressionBuilderProps {
   group?: '&&' | '||';
   onChange?: (value: IExpression, remove?: boolean) => void;
   onValueChange?: (value: IExpression, path: string, remove?: boolean) => void;
+  /** Operand reordering for varargs expressions — see `TExpressionReorder`. Default `true`. */
+  reorder?: TExpressionReorder;
   readOnly?: boolean;
   id?: string;
   expressions?: IExpressionSchema[];
@@ -416,6 +427,63 @@ export const Expression = ({
     [onValueChange, JSON.stringify(value), path]
   );
 
+  const reorderSurfaces = useMemo((): TExpressionReorderSurface[] => {
+    const reorder = props.reorder ?? true;
+
+    if (reorder === false) {
+      return [];
+    }
+
+    return reorder === true ? ['dragHandle', 'overflowMenu'] : reorder;
+  }, [props.reorder]);
+  // Bumped on every move and folded into the operand keys: the operands are
+  // keyed by slot, and a slot's TemplateField keeps template / text-mode
+  // state that only resyncs one way — remounting hands every slot a field
+  // seeded from the operand that now lives there.
+  const [argsGeneration, setArgsGeneration] = useState(0);
+  const dragArg = useRef<number | null>(null);
+  const [dragOverArg, setDragOverArg] = useState<number | null>(null);
+
+  const moveVarArg = useCallback(
+    (from: number, to: number) => {
+      setArgsGeneration((generation) => generation + 1);
+      onValueChange(
+        {
+          ...value,
+          value: {
+            ...value.value,
+            args: moveItem(value.value.args, from, to),
+          },
+        },
+        path
+      );
+    },
+    [onValueChange, JSON.stringify(value), path]
+  );
+
+  const handleArgDragStart = useCallback((index: number) => {
+    dragArg.current = index;
+  }, []);
+  const handleArgDragOver = useCallback((index: number) => {
+    setDragOverArg((current) => (current === index ? current : index));
+  }, []);
+  const handleArgDragEnd = useCallback(() => {
+    dragArg.current = null;
+    setDragOverArg(null);
+  }, []);
+  const handleArgDrop = useCallback(
+    (index: number) => {
+      const from = dragArg.current;
+
+      if (from !== null && from !== index) {
+        moveVarArg(from, index);
+      }
+
+      handleArgDragEnd();
+    },
+    [moveVarArg, handleArgDragEnd]
+  );
+
   const updateMultipleArgs = useCallback(
     (args: IExpression[]) => {
       onValueChange(
@@ -478,6 +546,59 @@ export const Expression = ({
     ? firstArgSchema?.ui_type
     : firstArgument?.type || type || 'context';
   let restOfArgs = selectedExpression?.args.slice(1);
+  const argCount = size(value.value?.args);
+  const canReorderArgs =
+    !!selectedExpression?.varargs && argCount > 1 && !readOnly && size(reorderSurfaces) > 0;
+  const argReorderSurfaces = canReorderArgs ? reorderSurfaces : undefined;
+  const isDragOverArg = (index: number) =>
+    dragOverArg === index && dragArg.current !== null && dragArg.current !== index;
+
+  // The `⋮` menu's "Move Argument" section, one per operand. The wording is
+  // axis-free on purpose — the operands wrap into a column on narrow screens.
+  const argMenuActions = useMemo((): ITemplateMenuActions[] | undefined => {
+    if (!canReorderArgs || !reorderSurfaces.includes('overflowMenu')) {
+      return undefined;
+    }
+
+    const moves: [string, string, IReqoreIconName, (index: number) => number][] = [
+      ['before', 'Move before', 'ArrowGoBackLine', (index) => index - 1],
+      ['after', 'Move after', 'ArrowGoForwardLine', (index) => index + 1],
+      ['start', 'Move to start', 'SkipBackLine', () => 0],
+      ['end', 'Move to end', 'SkipForwardLine', () => argCount - 1],
+    ];
+
+    return Array.from({ length: argCount }, (_, index) => ({
+      label: 'Move Argument',
+      icon: 'ArrowLeftRightLine',
+      items: [
+        ...moves.map(([key, label, icon, target]) => {
+          const to = target(index);
+
+          return {
+            label,
+            icon,
+            className: `expression-arg-move-${key}`,
+            disabled: to === index || to < 0 || to >= argCount,
+            onClick: () => moveVarArg(index, to),
+          };
+        }),
+        // Any position in one pick — what a ten-part concat needs.
+        {
+          isCustom: true as const,
+          content: (closePopover) => (
+            <ExpressionMoveToPositionStrip
+              index={index}
+              count={argCount}
+              onMoveTo={(to) => {
+                moveVarArg(index, to);
+                closePopover?.();
+              }}
+            />
+          ),
+        },
+      ],
+    }));
+  }, [canReorderArgs, reorderSurfaces, argCount, moveVarArg]);
 
   if (selectedExpression?.varargs) {
     restOfArgs = [
@@ -880,6 +1001,15 @@ export const Expression = ({
             schema={firstArgSchema}
             onTypeChange={handleUpdateTypeChange}
             readOnly={readOnly}
+            reorder={argReorderSurfaces}
+            argIndex={0}
+            argCount={argCount}
+            dragOver={isDragOverArg(0)}
+            onMoveArg={moveVarArg}
+            onArgDragStart={handleArgDragStart}
+            onArgDragOver={handleArgDragOver}
+            onArgDrop={handleArgDrop}
+            onArgDragEnd={handleArgDragEnd}
           >
             <TemplateField
               component={auto}
@@ -905,7 +1035,7 @@ export const Expression = ({
                 !firstArgSchema?.element_allowed_values
               }
               level={level + 1}
-              key={`${firstParamType}${selectedExpression?.name}`}
+              key={`${argsGeneration}-${firstParamType}${selectedExpression?.name}`}
               type={firstParamType}
               defaultType={
                 firstArgument?.allowed_values || firstArgument?.element_allowed_values
@@ -955,6 +1085,8 @@ export const Expression = ({
                       );
                     })
               }
+              menuActions={argMenuActions?.[0]}
+              reorder={props.reorder}
               expressions={props.expressions as any}
               expressions_url={expressionsUrl}
             />
@@ -964,7 +1096,9 @@ export const Expression = ({
           )}
           {selectedExpression
             ? restOfArgs?.map((arg, index) => (
-                <React.Fragment key={`${index}-${arg.ui_type}-${arg.display_name}`}>
+                <React.Fragment
+                  key={`${argsGeneration}-${index}-${arg.ui_type}-${arg.display_name}`}
+                >
                   {arg?.label_before && <ExpressionArgumentDetail label={arg.label_before} />}
                   <ExpressionBuilderArgumentWrapper
                     readOnly={readOnly}
@@ -985,6 +1119,15 @@ export const Expression = ({
                       removeVarArg(index + 1);
                     }}
                     hasMultipleArgs={selectedExpression.varargs && size(rest) > 1}
+                    reorder={argReorderSurfaces}
+                    argIndex={index + 1}
+                    argCount={argCount}
+                    dragOver={isDragOverArg(index + 1)}
+                    onMoveArg={moveVarArg}
+                    onArgDragStart={handleArgDragStart}
+                    onArgDragOver={handleArgDragOver}
+                    onArgDrop={handleArgDrop}
+                    onArgDragEnd={handleArgDragEnd}
                   >
                     <TemplateField
                       minimal
@@ -995,7 +1138,7 @@ export const Expression = ({
                       level={level + 1}
                       allowFunctions={!arg?.allowed_values && !arg?.element_allowed_values}
                       isFunction={rest[index]?.is_expression}
-                      key={`${index}-${arg.ui_type}-${arg.display_name}-${level + 1}`}
+                      key={`${argsGeneration}-${index}-${arg.ui_type}-${arg.display_name}-${level + 1}`}
                       // An empty argument has no value to take a type from; fall
                       // back to the type the catalogue declares for it, as the
                       // first-argument mount already does. Without this an
@@ -1043,6 +1186,8 @@ export const Expression = ({
                           type.name === 'context' ? undefined : (type.name as string)
                         );
                       })}
+                      menuActions={argMenuActions?.[index + 1]}
+                      reorder={props.reorder}
                       expressions={props.expressions as any}
                       expressions_url={expressionsUrl}
                       allowed_values={arg?.allowed_values}
@@ -1103,6 +1248,7 @@ export const ExpressionBuilder = ({
   expressionsUrl,
   serverHandled,
   extraActions,
+  reorder,
 }: IExpressionBuilderProps) => {
   const templates = useTemplates(!isChild, localTemplates);
   const theme = useReqoreTheme();
@@ -1248,6 +1394,7 @@ export const ExpressionBuilder = ({
                   expressionsUrl={expressionsUrl}
                   serverHandled={serverHandled}
                   extraActions={extraActions}
+                  reorder={reorder}
                 />
                 {index < size(value.value.args) - 1 && (
                   <ExpressionArgumentDetail
@@ -1285,6 +1432,7 @@ export const ExpressionBuilder = ({
         id={level === 0 && index === 0 ? 'expression-builder' : undefined}
         serverHandled={serverHandled}
         extraActions={extraActions}
+        reorder={reorder}
       />
     </ReqoreErrorBoundary>
   );

package/src/components/form/expressions/builder/moveToPositionStrip.tsx

@@ -0,0 +1,156 @@
+import {
+  ReqoreButton,
+  ReqoreControlGroup,
+  ReqoreDropdown,
+  ReqoreInput,
+  ReqoreMenuItem,
+} from '@qoretechnologies/reqore';
+import { memo, useState } from 'react';
+import { ordinal } from '../../../../helpers/common';
+
+/** Positions offered as one-click segments before the typed field takes over. */
+export const QUICK_POSITIONS = 4;
+/** Up to this many operands, a single position dropdown replaces the strip. */
+export const PICKER_POSITIONS = 3;
+
+export interface IExpressionMoveToPositionStripProps {
+  index: number;
+  count: number;
+  onMoveTo: (to: number) => void;
+}
+
+const positionItems = (index: number, from: number, count: number) =>
+  Array.from({ length: count - from }, (_, i) => {
+    const to = from + i;
+
+    return {
+      label: ordinal(to + 1),
+      className: `expression-arg-move-to-${to + 1}`,
+      selected: to === index,
+      disabled: to === index,
+      value: to,
+    };
+  });
+
+/**
+ * The "Move to position" row of the ⋮ menu's "Move Argument" section: an
+ * icon and label in the shape of the rows above it. Up to three operands the
+ * position sits beside the label as a small dropdown; past that the strip
+ * follows under the label — the first four positions as segments, a number
+ * field with an arrow, and a "More" list of the rest.
+ */
+export const ExpressionMoveToPositionStrip = memo(
+  ({ index, count, onMoveTo }: IExpressionMoveToPositionStripProps) => {
+    const [draft, setDraft] = useState('');
+    const target = Number(draft);
+    const canGo =
+      draft !== '' &&
+      Number.isInteger(target) &&
+      target >= 1 &&
+      target <= count &&
+      target - 1 !== index;
+    const go = () => canGo && onMoveTo(target - 1);
+    const quick = Math.min(QUICK_POSITIONS, count);
+    // The label row: a menu item like its siblings, but not a control itself.
+    const label = (
+      <ReqoreMenuItem
+        icon='ListOrdered'
+        label='Move to position'
+        readOnly
+        fluid={false}
+        style={{ cursor: 'default' }}
+      />
+    );
+
+    if (count <= PICKER_POSITIONS) {
+      return (
+        <ReqoreControlGroup
+          size='small'
+          gapSize='small'
+          verticalAlign='center'
+          className='expression-arg-move-to'
+        >
+          {label}
+          <ReqoreDropdown
+            compact
+            className='expression-arg-move-to-picker'
+            label={ordinal(index + 1)}
+            caretPosition='right'
+            items={positionItems(index, 0, count).map((item) => ({
+              ...item,
+              onClick: () => onMoveTo(item.value),
+            }))}
+          />
+        </ReqoreControlGroup>
+      );
+    }
+
+    return (
+      <ReqoreControlGroup vertical gapSize='small' className='expression-arg-move-to'>
+        {label}
+        <ReqoreControlGroup
+          size='small'
+          gapSize='small'
+          fluid={false}
+          verticalAlign='center'
+          style={{ padding: '0 10px 6px 32px' }}
+        >
+          <ReqoreControlGroup stack size='small' fluid={false}>
+            {Array.from({ length: quick }, (_, to) => (
+              <ReqoreButton
+                key={to}
+                compact
+                textAlign='center'
+                className={`expression-arg-move-to-${to + 1}`}
+                active={to === index}
+                disabled={to === index}
+                label={String(to + 1)}
+                tooltip={to === index ? 'Current position' : `Move to ${ordinal(to + 1)}`}
+                onClick={() => onMoveTo(to)}
+              />
+            ))}
+          </ReqoreControlGroup>
+          {count > QUICK_POSITIONS && (
+            <>
+              <ReqoreControlGroup stack size='small' fluid={false}>
+                <ReqoreInput
+                  type='number'
+                  size='small'
+                  className='expression-arg-move-to-input'
+                  placeholder={`${QUICK_POSITIONS + 1}–${count}`}
+                  value={draft}
+                  min={1}
+                  max={count}
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                    setDraft(event.target.value)
+                  }
+                  onKeyDown={(event: React.KeyboardEvent) => event.key === 'Enter' && go()}
+                  style={{ width: 64 }}
+                />
+                <ReqoreButton
+                  compact
+                  className='expression-arg-move-to-go'
+                  icon='ArrowRightLine'
+                  tooltip='Move to that position'
+                  disabled={!canGo}
+                  onClick={go}
+                />
+              </ReqoreControlGroup>
+              <ReqoreDropdown
+                compact
+                className='expression-arg-move-to-more'
+                label='More'
+                caretPosition='right'
+                filterable={count - QUICK_POSITIONS > 8}
+                items={positionItems(index, QUICK_POSITIONS, count).map((item) => ({
+                  ...item,
+                  onClick: () => onMoveTo(item.value),
+                }))}
+              />
+            </>
+          )}
+        </ReqoreControlGroup>
+      </ReqoreControlGroup>
+    );
+  }
+);

package/src/components/form/expressions/mockExpressions.ts

@@ -169,6 +169,24 @@ export const mockExpressions: IExpressionSchema[] = [
     groups: ['Math'],
     args: [{ name: 'int', display_name: 'Value', ui_type: 'int', required: true }],
   },
+  // --- Varargs (string) ----------------------------------------------------
+  // String twin of `+` — the reorder stories seed this one because "first",
+  // "second", "third" read as an order where int operands don't.
+  {
+    name: 'concat',
+    display_name: 'Concatenate Strings',
+    short_desc: 'Returns all arguments joined into one string',
+    desc: 'Returns all arguments joined into one string, in argument order. Accepts a variable number of string operands.',
+    symbol: 'concat',
+    type: 2,
+    subtype: 1,
+    return_type: 'string',
+    ui_return_type: 'string',
+    varargs: true,
+    min_args: 1,
+    groups: ['String'],
+    args: [{ name: 'softstring', display_name: 'Value', ui_type: 'string', required: true }],
+  },
   // --- Function expressions ------------------------------------------------
   // Single-arg type-conversion function. Used as the wrap/unwrap base: a
   // boolean-returning op with one operand ("Value To Convert").

package/src/components/form/expressions/types.ts

@@ -83,3 +83,13 @@ export interface IExpressionSchema {
   return_type_first_arg?: boolean;
   return_type_arg_priority?: string[];
 }
+
+/** Where a varargs expression offers operand reordering. */
+export type TExpressionReorderSurface = 'overflowMenu' | 'dragHandle' | 'positionPicker';
+
+/**
+ * `true` (the default) renders the drag grip together with the "Move Argument"
+ * section in the field's `⋮` menu; `false` turns reordering off; a list
+ * renders exactly those surfaces.
+ */
+export type TExpressionReorder = boolean | TExpressionReorderSurface[];

package/src/components/form/fields/schema-definition/CatalogNodeEditor.tsx

@@ -45,8 +45,8 @@ import {
   CatalogLeafForm,
   ICatalogLeafFormNameField,
 } from './CatalogLeafForm';
+import { moveItem } from '../../../../helpers/common';
 import {
-  moveItem,
   removeKey,
   renameKey,
   SECTION_ICONS,

package/src/components/form/fields/schema-definition/MigrationsTab.tsx

@@ -18,7 +18,7 @@ import {
 import { memo, useCallback } from 'react';
 import { Hint } from './Hint';
 import { CatalogGroupBody } from './CatalogNodeEditor';
-import { moveItem } from './helpers';
+import { moveItem } from '../../../../helpers/common';
 import { ICatalogList } from './types';
 
 export interface IMigrationsTabProps {

package/src/components/form/fields/schema-definition/helpers.ts

@@ -38,15 +38,6 @@ export const renameKey = <T>(
   return next;
 };
 
-/** Immutably moves a list element from `from` to `to`. */
-export const moveItem = <T>(list: T[], from: number, to: number): T[] => {
-  if (from === to || from < 0 || to < 0 || from >= list.length) return list;
-  const next = [...list];
-  const [item] = next.splice(from, 1);
-  next.splice(Math.min(to, next.length), 0, item);
-  return next;
-};
-
 /**
  * Picks a unique key for a new map entry — `base`, then `base_2`,
  * `base_3`, … — so "Add" never silently overwrites an existing entry.