@integry/sdk 4.7.35 → 4.7.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integry/sdk",
-  "version": "4.7.35",
+  "version": "4.7.36",
   "description": "Integry SDK",
   "main": "dist/umd/index.umd.js",
   "module": "dist/esm/index.csm.js",

package/src/features/common/ActionForm/index.ts

@@ -2034,6 +2034,7 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                         : null}
                                       showMenuOnLeft=${this.props
                                         .showMenuOnLeft || false}
+                                      showFieldsLimit=${5}
                                     />
                                   </div>
                                 `;

package/src/features/common/DynamicField/index.ts

@@ -1,10 +1,11 @@
+'use client';
+
 import { html } from 'htm/preact';
 import { connect } from 'unistore/preact';
 import { useContext, useEffect, useState } from 'preact/hooks';
-import { TemplateField, NestedObject } from '@/interfaces';
+import type { TemplateField, NestedObject } from '@/interfaces';
 import AppContext from '@/contexts/AppContext';
-import { StoreType } from '@/types/store';
-// import { Input } from '@/components/Input';
+import type { StoreType } from '@/types/store';
 import { Loader } from '@/components/Loader';
 import { MultipurposeField } from '@/components/MultipurposeField';
 import { actionFunctions } from '@/store';
@@ -30,6 +31,7 @@ export type DynamicFieldsProps = {
   objectValue?: any;
   tagsTree?: any;
   showMenuOnLeft?: boolean;
+  showFieldsLimit?: 'all' | number; // New prop
 } & StoreType;
 
 interface DynamicDataItem {
@@ -59,7 +61,9 @@ const DynamicFields = (props: DynamicFieldsProps) => {
     objectValue = null,
     tagsTree = null,
     showMenuOnLeft = false,
+    showFieldsLimit = 'all', // Default to 'all'
   } = props;
+
   const [dynamicItems, setDynamicItems] = useState<DynamicDataItem[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [customFieldsData, setCustomFieldsData] = useState<any>(
@@ -70,13 +74,19 @@ const DynamicFields = (props: DynamicFieldsProps) => {
     setIsErrorOnLoadingCustomFields,
   ] = useState<boolean>(false);
 
+  // New state for field limiting functionality
+  const [visibleFieldIds, setVisibleFieldIds] = useState<Set<string>>(
+    new Set(),
+  );
+  const [showFieldSelector, setShowFieldSelector] = useState<boolean>(false);
+  const [searchTerm, setSearchTerm] = useState<string>('');
+
   const context = useContext(AppContext);
   const isReadOnly = context?.isReadOnly;
 
   const fetchDynamicFields = async () => {
     const { activity_field } = dynamicField;
-    // if configMode is true, then don't fetch dynamic items
-    // fetch dynamic items from endpoint
+
     if (sourceFlowIntegrataionInvocationUrl && selectedAuthId) {
       setLoading(true);
       context?.apiHandler
@@ -138,6 +148,45 @@ const DynamicFields = (props: DynamicFieldsProps) => {
     }
   };
 
+  // Initialize visible fields based on showFieldsLimit and existing data
+  useEffect(() => {
+    if (dynamicItems.length > 0) {
+      const parsedVal = objectValue
+        ? customFieldsData
+        : (props.stepDataMapping[stepId]?.[dynamicField.id]
+            ?.objectValue as Record<string, string | number>) || {};
+
+      // Get fields that have existing values (for edit mode)
+      const fieldsWithValues = dynamicItems
+        .filter(
+          (item) =>
+            parsedVal && parsedVal[item.id] && parsedVal[item.id] !== '',
+        )
+        .map((item) => item.id);
+
+      if (showFieldsLimit === 'all') {
+        // Show all fields
+        setVisibleFieldIds(new Set(dynamicItems.map((item) => item.id)));
+      } else if (typeof showFieldsLimit === 'number') {
+        // Show limited fields + fields with existing values
+        const fieldsToShow = new Set(fieldsWithValues);
+
+        // Add additional fields up to the limit if needed
+        let count = fieldsWithValues.length;
+        dynamicItems.some((item) => {
+          if (count >= showFieldsLimit) return true;
+          if (!fieldsToShow.has(item.id)) {
+            fieldsToShow.add(item.id);
+            count += 1;
+          }
+          return false;
+        });
+
+        setVisibleFieldIds(fieldsToShow);
+      }
+    }
+  }, [dynamicItems, showFieldsLimit, customFieldsData, objectValue]);
+
   useEffect(() => {
     fetchDynamicFields();
   }, [parentFieldChanged]);
@@ -171,17 +220,12 @@ const DynamicFields = (props: DynamicFieldsProps) => {
     });
 
     if (onChangeCallback && objectValue !== null) {
-      // Use the functional update form of setState to ensure we're working with the latest state
       setCustomFieldsData((prevData: any) => {
         const updatedData = {
           ...prevData,
           [machineName]: val,
         };
-
-        // Call the callback with the updated data
         onChangeCallback(JSON.stringify(updatedData));
-
-        // Return the updated data to set the state
         return updatedData;
       });
     } else {
@@ -194,54 +238,138 @@ const DynamicFields = (props: DynamicFieldsProps) => {
     }
   };
 
+  const handleFieldSelect = (fieldId: string) => {
+    setVisibleFieldIds((prev) => new Set([...prev, fieldId]));
+    setShowFieldSelector(false);
+    setSearchTerm('');
+  };
+
+  const getAvailableFields = () =>
+    dynamicItems.filter(
+      (item) =>
+        !visibleFieldIds.has(item.id) &&
+        item.title.toLowerCase().includes(searchTerm.toLowerCase()),
+    );
+
+  const getVisibleFields = () =>
+    dynamicItems.filter((item) => visibleFieldIds.has(item.id));
+
+  const shouldShowAddButton = () =>
+    showFieldsLimit !== 'all' &&
+    typeof showFieldsLimit === 'number' &&
+    visibleFieldIds.size < dynamicItems.length;
+
   return html`
-    <div>
+    <div class=${styles.dynamicFieldsWrapper}>
       ${loading
         ? html`<div className=${styles.loadingText}>
             <div class=${styles.actionFormLoader}>
               <${Loader} />
             </div>
             Loading custom fields...
-          </div> `
-        : html` ${dynamicItems.map((el) => {
-            const ele = props.stepDataMapping[stepId]
-              ? props.stepDataMapping[stepId][dynamicField.id]
-              : ({} as { objectValue: Record<string, string | number> });
-            let fieldVal = '';
-            const parsedVal = objectValue
-              ? customFieldsData
-              : (ele.objectValue as Record<string, string | number>);
-            if (parsedVal && parsedVal[el.id]) {
-              fieldVal = `${parsedVal[el.id]}`;
-            }
-            return html`
-              <div class=${styles.dynamicFieldWrapper}>
-                <${MultipurposeField}
-                  title=${el.title}
-                  placeholder=${getPlaceholder()}
-                  value=${fieldVal}
-                  onChange=${(val: string) => {
-                    onChange(el.id, val);
-                  }}
-                  isReadOnly=${isReadOnly}
-                  type="TEXTFIELD"
-                  isMappable=${isMappable}
-                  isEditable=${isEditable}
-                  allowTagsInText=${allowTagsInText}
-                  activityOutputData=${activityOutputData}
-                  activityOutputDataRaw=${activityOutputDataRaw}
-                  refreshRootStepData=${refreshRootStepData}
-                  fieldId=${el.id || ''}
-                  tagsTree=${tagsTree}
-                  showMenuOnLeft=${showMenuOnLeft}
-                />
-              </div>
-            `;
-          })}`}
+          </div>`
+        : html`
+            ${getVisibleFields().map((el) => {
+              const ele = props.stepDataMapping[stepId]
+                ? props.stepDataMapping[stepId][dynamicField.id]
+                : ({} as { objectValue: Record<string, string | number> });
+              let fieldVal = '';
+              const parsedVal = objectValue
+                ? customFieldsData
+                : (ele.objectValue as Record<string, string | number>);
+              if (parsedVal && parsedVal[el.id]) {
+                fieldVal = `${parsedVal[el.id]}`;
+              }
+              return html`
+                <div class=${styles.dynamicFieldWrapper}>
+                  <${MultipurposeField}
+                    title=${el.title}
+                    placeholder=${getPlaceholder()}
+                    value=${fieldVal}
+                    onChange=${(val: string) => {
+                      onChange(el.id, val);
+                    }}
+                    isReadOnly=${isReadOnly}
+                    type="TEXTFIELD"
+                    isMappable=${isMappable}
+                    isEditable=${isEditable}
+                    allowTagsInText=${allowTagsInText}
+                    activityOutputData=${activityOutputData}
+                    activityOutputDataRaw=${activityOutputDataRaw}
+                    refreshRootStepData=${refreshRootStepData}
+                    fieldId=${el.id || ''}
+                    tagsTree=${tagsTree}
+                    showMenuOnLeft=${showMenuOnLeft}
+                  />
+                </div>
+              `;
+            })}
+            ${shouldShowAddButton() && !showFieldSelector
+              ? html`
+                  <div class=${styles.addFieldButtonWrapper}>
+                    <button
+                      class=${styles.addFieldButton}
+                      onClick=${() => setShowFieldSelector(true)}
+                      type="button"
+                    >
+                      <span class=${styles.addIcon}>+</span>
+                      Add Field Mapping
+                    </button>
+                  </div>
+                `
+              : ''}
+            ${showFieldSelector
+              ? html`
+                  <div class=${styles.fieldSelectorWrapper}>
+                    <div class=${styles.searchInputWrapper}>
+                      <input
+                        type="text"
+                        class=${styles.searchInput}
+                        placeholder="Search fields to add..."
+                        value=${searchTerm}
+                        onInput=${(e: Event) =>
+                          setSearchTerm((e.target as HTMLInputElement).value)}
+                        autofocus
+                      />
+                      <button
+                        class=${styles.cancelButton}
+                        onClick=${() => {
+                          setShowFieldSelector(false);
+                          setSearchTerm('');
+                        }}
+                        type="button"
+                      >
+                        ×
+                      </button>
+                    </div>
+                    ${getAvailableFields().length > 0
+                      ? html`
+                          <div class=${styles.fieldDropdown}>
+                            ${getAvailableFields().map(
+                              (field) => html`
+                                <div
+                                  class=${styles.fieldOption}
+                                  onClick=${() => handleFieldSelect(field.id)}
+                                >
+                                  ${field.title}
+                                </div>
+                              `,
+                            )}
+                          </div>
+                        `
+                      : html`
+                          <div class=${styles.noFieldsMessage}>
+                            No matching fields found
+                          </div>
+                        `}
+                  </div>
+                `
+              : ''}
+          `}
       ${!isErrorOnLoadingCustomFields
         ? ''
-        : html`<span className=${styles.noOptions}
-            >Could not load custom fields.
+        : html`<span className=${styles.noOptions}>
+            Could not load custom fields.
             ${false
               ? html``
               : html` <a

package/src/features/common/DynamicField/styles.module.scss

@@ -39,7 +39,7 @@
 .loadingText {
   font-weight: 400;
   font-size: 12px;
-  line-height: 15px;
+  // line-height: 15px;
   margin-bottom: 12px;
   color: #999;
   display: flex;
@@ -65,3 +65,202 @@ a.optionsRefresh {
   cursor: pointer;
   text-decoration: none;
 }
+.dynamicFieldsWrapper {
+  // Existing styles plus new ones for the field selector
+
+  .loadingText {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #666;
+    font-size: 12px;
+  }
+
+  .actionFormLoader {
+    display: inline-block;
+  }
+
+  .dynamicFieldWrapper {
+    margin-bottom: 16px;
+  }
+
+  .noOptions {
+    color: #e74c3c;
+    font-size: 12px;
+  }
+
+  .optionsRefresh {
+    color: #3498db;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  // New styles for field limiting functionality
+  .addFieldButtonWrapper {
+    margin-top: 16px;
+    margin-bottom: 16px;
+  }
+
+  .addFieldButton {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    background: transparent;
+    border: 2px dashed #d1d5db;
+    border-radius: 2px;
+    color: #6b7280;
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    width: 100%;
+    justify-content: center;
+
+    &:hover {
+      border-color: #9ca3af;
+      color: #4b5563;
+      background: #f9fafb;
+    }
+
+    &:focus {
+      outline: none;
+      border-color: #3b82f6;
+      color: #3b82f6;
+    }
+  }
+
+  .addIcon {
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  .fieldSelectorWrapper {
+    position: relative;
+    margin-top: 16px;
+    margin-bottom: 16px;
+
+    &.dropdownTop {
+      // When dropdown opens upward, we need extra space above
+      margin-top: 220px; // Max dropdown height + buffer
+      margin-bottom: 16px;
+    }
+  }
+
+  .searchInputWrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .searchInput {
+    width: 100%;
+    padding: 12px 16px;
+    padding-right: 40px;
+    border: 1px solid #d1d5db;
+    border-radius: 2px;
+    font-size: 12px;
+    background: white;
+
+    &:focus {
+      outline: none;
+      border-color: #3b82f6;
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+
+    &::placeholder {
+      color: #9ca3af;
+    }
+  }
+
+  .cancelButton {
+    position: absolute;
+    right: 12px;
+    background: none;
+    border: none;
+    font-size: 18px;
+    color: #9ca3af;
+    cursor: pointer;
+    padding: 0;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      color: #6b7280;
+    }
+  }
+
+  .fieldDropdown {
+    // position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: white;
+    border: 1px solid #d1d5db;
+    border-radius: 2px;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+      0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    max-height: 200px;
+    overflow-y: auto;
+    z-index: 1000;
+    margin-top: 4px;
+
+    &.fieldDropdownTop {
+      top: auto;
+      bottom: 100%;
+      margin-top: 0;
+      margin-bottom: 4px;
+    }
+  }
+
+  .fieldOption {
+    padding: 12px 16px;
+    cursor: pointer;
+    font-size: 11px;
+    border-bottom: 1px solid #f3f4f6;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background: #f9fafb;
+    }
+
+    &:active {
+      background: #f3f4f6;
+    }
+  }
+
+  .noFieldsMessage {
+    padding: 16px;
+    text-align: center;
+    color: #9ca3af;
+    font-size: 12px;
+    font-style: italic;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: white;
+    border: 1px solid #d1d5db;
+    border-radius: 2px;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+      0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    z-index: 1000;
+    margin-top: 4px;
+
+    &.noFieldsMessageTop {
+      top: auto;
+      bottom: 100%;
+      margin-top: 0;
+      margin-bottom: 4px;
+    }
+  }
+}