@integry/sdk 4.7.18 → 4.7.21

package/package.json

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

package/src/components/MultipurposeField/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 /* eslint-disable no-nested-ternary */
 import { html } from 'htm/preact';
 import { useState, useRef, useEffect } from 'preact/hooks';
@@ -5,8 +7,8 @@ import { Input } from '@/components/Input';
 import { TextArea } from '@/components/TextArea';
 import { useOnClickOutside } from '@/hooks/useOnClickOutside';
 import { FieldDropdown } from '@/components/MultipurposeField/TagMenu';
-import { NestedObject } from '@/interfaces';
-import { TagProps } from '@/components/Tag';
+import type { NestedObject } from '@/interfaces';
+import type { TagProps } from '@/components/Tag';
 // import { TagsMenu } from '@/components/TagsMenu';
 // @ts-ignore
 import Tagify from '@yaireo/tagify';
@@ -100,10 +102,10 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
   const [tempPlaceholder, setTempPlaceholder] = useState('');
   const [searchValue, setSearchValue] = useState('');
   const [tagify, setTagify] = useState<Tagify | null>(null);
-  const [defaultTagifyValue, setDefaultTagifyValue] = useState('');
 
   const menuRef = useRef<HTMLDivElement | null>(null);
   const inputRef = useRef<HTMLInputElement>();
+  const appIconMapRef = useRef<Record<string, string>>({});
 
   const handleTabKeyDown = (event: KeyboardEvent) => {
     if (event.key === 'Tab') {
@@ -155,6 +157,58 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
     };
   }, [value, title]);
 
+  // Helper function to extract step name from tag value
+  const getStepNameFromValue = (tagValue: string): string | null => {
+    const parts = tagValue.split('.');
+    // For values like "steps.slack_post_message_1.output.ok", "storage.user_data.value",
+    // "setup_form.api_key.value", "parameters.timeout.value" return the second part
+    if (parts.length >= 2) {
+      return parts[1];
+    }
+    // If there's no second part, return null
+    return null;
+  };
+
+  // Build flattened appIcon map when tagsTree changes
+  useEffect(() => {
+    if (!tagsTree) {
+      appIconMapRef.current = {};
+      return;
+    }
+
+    const flattenedMap: Record<string, string> = {};
+
+    // Traverse tagsTree and build flattened map
+    const traverseAndMap = (tags: any[]) => {
+      if (!Array.isArray(tags)) return;
+
+      tags.forEach((tag) => {
+        if (tag.machineName && tag.appIcon) {
+          flattenedMap[tag.machineName] = tag.appIcon;
+        }
+        // Recursively traverse nested tags
+        if (tag.tags && Array.isArray(tag.tags)) {
+          traverseAndMap(tag.tags);
+        }
+      });
+    };
+
+    // Traverse all categories in tagsTree
+    for (const categoryKey in tagsTree) {
+      const category = tagsTree[categoryKey];
+      if (category.tags && Array.isArray(category.tags)) {
+        traverseAndMap(category.tags);
+      }
+    }
+
+    appIconMapRef.current = flattenedMap;
+  }, [tagsTree]);
+
+  // Helper function to get appIcon from precomputed map
+  const getAppIconFromMap = (stepName: string): string | null => {
+    return appIconMapRef.current[stepName] || null;
+  };
+
   useEffect(() => {
     const textfield = inputRef.current;
     const scalarValue = Array.isArray(value) ? value[0] : value;
@@ -178,9 +232,52 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
         });
         tagify
           .on('focus', handleFieldFocus)
+          .on('blur', handleFieldBlur)
           .on('remove', handleOnTagRemove)
           .on('change', handleOnTagRemove);
         setTagify(tagify);
+
+        tagify.on('click', (e: any) => {
+          const tagData = e.detail.data;
+          if (!tagData?.appIcon) {
+            return; // Ignore clicks on tags without appIcon
+          }
+          const tagElm = e.detail.tag;
+
+          // Remove the tag
+          tagify.removeTag(tagElm);
+
+          // Place caret after the removed tag
+          const selection = window.getSelection();
+          const range = document.createRange();
+
+          // Insert editable text node (without appIcon in the text)
+          const editableText = document.createTextNode(`{${tagData.value}} `);
+
+          // Insert text after the removed tag
+          tagElm.parentNode.insertBefore(editableText, tagElm.nextSibling);
+
+          // Move caret to end of inserted text
+          range.setStart(editableText, editableText.length);
+          range.setEnd(editableText, editableText.length);
+          selection?.removeAllRanges();
+          selection?.addRange(range);
+
+          // Optional: trigger input event so Tagify re-parses
+          tagify.DOM.input.dispatchEvent(new Event('input'));
+        });
+
+        tagify.on('keydown', (e: any) => {
+          if (
+            e?.detail?.event?.code === 'Enter' &&
+            tagsTree &&
+            type === 'TEXTAREA'
+          ) {
+            e.preventDefault();
+            document.execCommand('insertHTML', false, '<br>');
+            return false;
+          }
+        });
       }
     } else if (
       textfield &&
@@ -214,10 +311,18 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
   };
   const handleOnTagRemove = (e: any) => {
     const el: any = document.getElementById(`tagify_${fieldId}`);
+
     let newValue = el.__tagify.DOM.input.innerText;
+
+    // Process tags being removed
     el.__tagify.value.forEach((tag: any) => {
-      newValue = newValue.replace(tag.text, `{${tag.value}}`);
+      newValue = newValue
+        .replace(tag.text, `{${tag.value}}`)
+        .replace('Step: ', '')
+        .replace('User variable: ', '')
+        .replace('Setup form: ', '');
     });
+
     newValue = newValue.trim();
     // remove zero width space
     newValue = newValue.replace(/\u200B/g, '');
@@ -225,7 +330,6 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
       el.value = '';
       newValue = '';
     }
-    // newValue = newValue.replace(/^\n+|\n+$/g, ''); // remove leading and trailing newlines
     newValue = newValue.replace(/<br>/g, '\n'); // replace <br> with newlines
     newValue = newValue.replace(/\n{/g, '{').replace(/}\n/g, '}'); // remove \n before and after tags
 
@@ -303,9 +407,7 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
 
   // Returns all those strings which are enclosed in curly braces {}
   const getTags = (str: string) => {
-    const regex = /\{([^{}]+)}/g;
-    const matches = str.match(regex);
-    return matches;
+    return str.match(/{[^{}"'<>:]+}/g) || [];
   };
 
   const checkIfTagExists = (AOUElement: string, tagValue: string) => {
@@ -319,14 +421,18 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
 
   const getDefaultTagifyValue = (value: any) => {
     const tags = getTags(value || '');
+
     if (tags && tags.length > 0) {
       let newValue = value;
+
       if (type === 'TEXTAREA') {
         newValue = newValue.replace(/\n/g, '<br>');
       }
+
       tags.forEach((tag) => {
         const tagValue = tag.replace(/{|}/g, '');
         const tagValueParts = tagValue.split('.');
+
         let tagData = (activityOutputDataRaw || []).find((element: any) => {
           return (
             element.value === tagValue ||
@@ -340,8 +446,16 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
               : tagValue,
           title: tagValue,
         };
+
+        // Try to get appIcon from tagsTree based on step name
+        const stepName = getStepNameFromValue(tagValue);
+        const appIconFromTree = stepName ? getAppIconFromMap(stepName) : null;
+
+        if (appIconFromTree) {
+          tagData.appIcon = appIconFromTree;
+        }
+
         if (tagsTree) {
-          // this component has been called with explicit tagTree hence we don't need to rely on activity output data any more.
           tagData = {
             value: tagValue,
             text:
@@ -349,19 +463,29 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
                 ? prettifyString(tagValueParts[tagValueParts.length - 1])
                 : tagValue,
             title: tagValue,
+            ...(appIconFromTree && { appIcon: appIconFromTree }),
           };
         }
+
         if (tagData) {
+          // Include appIcon in the JSON if it exists
+          const tagDataForJson = {
+            value: tagData.value,
+            text: tagData.text,
+            title: getTagData(tagData.text),
+            ...(tagData.appIcon && { appIcon: tagData.appIcon }),
+          };
+
           newValue = newValue?.replace(
             tag,
-            `[[{"value":"${tagData.value}","text":"${
-              tagData.text
-            }","title":"${getTagData(tagData.text)}"}]]`,
+            `[[${JSON.stringify(tagDataForJson)}]]`,
           );
         }
       });
+
       return newValue;
     }
+
     return value;
   };
 
@@ -515,6 +639,12 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
     }
   };
 
+  const handleFieldBlur = (e: any) => {
+    const el: any = document.getElementById(`tagify_${fieldId}`);
+    const currentTagifyValue = getDefaultTagifyValue(el.value || '');
+    el.value = currentTagifyValue;
+  };
+
   const getStringFromEnd = (str: string): string => {
     // eslint-disable-next-line @typescript-eslint/no-shadow
     const regex = /\{([^{}]+)$/;

package/src/components/MultipurposeField/styles.module.scss

@@ -46,6 +46,7 @@
 
       [class^='tagify__tag'] {
         z-index: 0;
+        vertical-align: middle;
       }
       --tag-bg: #bfdaff;
       --tag-hover: #bfdaff;

package/src/components/TagsMenu/index.ts

@@ -41,6 +41,7 @@ interface TagListProps {
   globalSearchMode?: boolean;
   onSelect?: (tag: Record<string, unknown>) => void;
   activeTab?: string;
+  parentAppIcon?: string; // Add parent app icon to props
 }
 
 interface TagsMenuProps {
@@ -88,6 +89,7 @@ const arrayToObject = (arr: unknown[]): Record<string, unknown> =>
     newObj[`[${index}]`] = item;
     return newObj;
   }, {});
+
 // Check if output data matches the search term
 const outputMatchesSearch = (output: unknown, term: string): boolean => {
   if (!term || !output) return false;
@@ -355,57 +357,7 @@ const ValuesList = ({
     </div>
   `;
 
-// Helper function to find parent tag with appIcon
-const findParentWithAppIcon = (
-  tags: Record<string, unknown> | unknown[],
-  path: string,
-): string | undefined => {
-  if (!path) return undefined;
-
-  const pathParts = path.split('.');
-  let currentTags = tags;
-  let parentWithIcon: string | undefined;
-
-  // Navigate through the path to find the parent with appIcon
-  for (let i = 0; i < pathParts.length; i += 1) {
-    const part = pathParts[i];
-
-    // Skip 'output' parts in the path
-    if (part === 'output') {
-      // Skip processing for 'output'
-      return undefined;
-    }
-
-    // Handle array indices
-    if (part.startsWith('[') && part.endsWith(']')) {
-      const index = Number.parseInt(part.substring(1, part.length - 1), 10);
-      if (Array.isArray(currentTags) && index < currentTags.length) {
-        const item = currentTags[index];
-        if (isTagNode(item) && item.appIcon) {
-          parentWithIcon = item.appIcon;
-        }
-        currentTags = item as Record<string, unknown>;
-      } else {
-        break;
-      }
-    }
-    // Handle object properties
-    if (!Array.isArray(currentTags) && currentTags[part]) {
-      const item = currentTags[part];
-      if (isTagNode(item) && item.appIcon) {
-        parentWithIcon = item.appIcon;
-      }
-      currentTags = item as Record<string, unknown>;
-    } else {
-      break;
-    }
-  }
-
-  return parentWithIcon;
-};
-
-// Update the TagList component to add the "add tag" button functionality
-
+// Update the TagList component to pass parent app icon and include it in selections
 const TagList = ({
   tags,
   searchTerm,
@@ -416,6 +368,7 @@ const TagList = ({
     /* Default empty implementation */
   },
   activeTab = '',
+  parentAppIcon = undefined, // Add parent app icon parameter
 }: TagListProps) => {
   // Track which nodes are expanded to show nested steps
   const [expandedNodes, setExpandedNodes] = useState<Record<string, boolean>>(
@@ -659,19 +612,25 @@ const TagList = ({
     return stepName;
   };
 
-  // Function to handle selecting a tag
+  // Modified function to handle selecting a tag with parent app icon
   const handleSelectTag = (
     key: string,
     value: unknown,
     currentPath: string,
+    nodeAppIcon?: string,
   ) => {
     const tagPath = `${activeTab}.${extractStepsFromOutputPath(currentPath)}`;
+
+    // Determine which app icon to use - prioritize node's own icon, then parent icon
+    const appIconToUse = nodeAppIcon || parentAppIcon;
+
     onSelect({
       currentPath: tagPath
         .replace(/\bparameters\.parameters\b/g, 'parameters')
         .replace(/\bauthorization\.authorization\b/g, 'authorization'),
       key,
       value: escapeHTMLIfNeeded(value),
+      parentAppIcon: appIconToUse, // Include parent app icon in the response
     });
   };
 
@@ -882,6 +841,12 @@ const TagList = ({
             tagsParamForOutput = value as Record<string, unknown>;
           }
 
+          // Determine the app icon to pass down - use current node's icon or parent's icon
+          const currentNodeAppIcon = isTagNode(value)
+            ? value.appIcon
+            : undefined;
+          const appIconToPass = currentNodeAppIcon || parentAppIcon;
+
           const handleMenuRowClcik = (e: Event) => {
             if (isStep && hasOutput) {
               // For step nodes with output, toggle output expansion
@@ -895,7 +860,7 @@ const TagList = ({
               toggleOutputExpand(key, e);
             } else {
               // For leaf nodes, select the value
-              handleSelectTag(key, value, currentPath);
+              handleSelectTag(key, value, currentPath, currentNodeAppIcon);
             }
           };
 
@@ -923,7 +888,12 @@ const TagList = ({
                     toggleOutputExpand(key, e);
                   } else {
                     // For leaf nodes, select the value
-                    handleSelectTag(key, value, currentPath);
+                    handleSelectTag(
+                      key,
+                      value,
+                      currentPath,
+                      currentNodeAppIcon,
+                    );
                   }
                 }}
                 class="${styles.listItemContent}"
@@ -1007,7 +977,12 @@ const TagList = ({
                         class="${styles.addTagButton}"
                         onClick=${(e: Event) => {
                           e.stopPropagation();
-                          handleSelectTag(key, value, currentPath);
+                          handleSelectTag(
+                            key,
+                            value,
+                            currentPath,
+                            currentNodeAppIcon,
+                          );
                         }}
                         title="Add this tag"
                       >
@@ -1211,6 +1186,7 @@ const TagList = ({
                               globalSearchMode=${globalSearchMode}
                               onSelect=${onSelect}
                               activeTab=${activeTab}
+                              parentAppIcon=${appIconToPass}
                             />
                           `;
                         }
@@ -1234,6 +1210,7 @@ const TagList = ({
                     globalSearchMode=${globalSearchMode}
                     onSelect=${onSelect}
                     activeTab=${activeTab}
+                    parentAppIcon=${appIconToPass}
                   />`
                 : ''}
               <!-- Display expanded array content with additional debug info -->
@@ -1247,6 +1224,7 @@ const TagList = ({
                       globalSearchMode=${globalSearchMode}
                       onSelect=${onSelect}
                       activeTab=${activeTab}
+                      parentAppIcon=${appIconToPass}
                     />
                   </div>`
                 : ''}
@@ -1267,6 +1245,7 @@ const TagList = ({
                       globalSearchMode=${globalSearchMode}
                       onSelect=${onSelect}
                       activeTab=${activeTab}
+                      parentAppIcon=${appIconToPass}
                     />
                   </div>`
                 : ''}
@@ -1278,7 +1257,7 @@ const TagList = ({
   `;
 };
 
-// Update the TabMenu component to search across all tabs
+// Update the TabMenu component to search across all tabs and pass data to TagList
 const TabMenu = ({ data, onSelect, onOptionClick }: TagMenuProps) => {
   const [activeTab, setActiveTab] = useState<string>(Object.keys(data)[0]);
   const [searchTerm, setSearchTerm] = useState<string>('');
@@ -1609,6 +1588,9 @@ const TabMenu = ({ data, onSelect, onOptionClick }: TagMenuProps) => {
                 globalSearchMode=${globalSearchMode}
                 onSelect=${onSelect}
                 activeTab=${data[activeTab].machineName || activeTab}
+                parentAppIcon=${isTagNode(activeData)
+                  ? activeData.appIcon
+                  : undefined}
               />
             </div>`}
       </div>
@@ -1683,7 +1665,6 @@ export function TagsMenu({
       ...modifiedData, // Spread the remaining tabs after "Values"
     };
   }
-
   return html`
     <div class="${styles.tagsMenuWrapper}">
       <${TabMenu}

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

@@ -2083,6 +2083,7 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                       idKeyPath=${uiField?.id_key_path}
                                       typeKeyPath=${uiField?.type_key_path}
                                       titleKeyPath=${uiField?.title_key_path}
+                                      isRequiredKeyPath=${uiField?.is_required_key_path}
                                       onChangeCallback=${this.props
                                         .onFieldChangeCallback
                                         ? (val: any) => {

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

@@ -31,6 +31,7 @@ export type DynamicFieldsProps = {
   idKeyPath?: string;
   titleKeyPath?: string;
   typeKeyPath?: string;
+  isRequiredKeyPath?: string;
   onChange?: (val: any) => void;
   dataSourceBody?: any;
   parentFieldsChanged?: boolean;
@@ -50,6 +51,7 @@ interface DynamicDataItem {
   output?: any;
   next_page?: string;
   type?: string;
+  is_required?: boolean;
 }
 
 interface ApiResponse {
@@ -166,13 +168,21 @@ const DynamicTypedFields = (props: DynamicFieldsProps) => {
             if (Array.isArray(res)) {
               transformedItems = res;
             } else if (res.output && Array.isArray(res.output)) {
-              const { idKeyPath, titleKeyPath, typeKeyPath } = props;
+              const {
+                idKeyPath,
+                titleKeyPath,
+                typeKeyPath,
+                isRequiredKeyPath,
+              } = props;
 
               if (idKeyPath && titleKeyPath) {
                 transformedItems = res.output.map((item: any) => ({
                   id: resolveValue(idKeyPath, item),
                   title: resolveValue(titleKeyPath, item),
                   type: 'TEXTFIELD',
+                  ...(isRequiredKeyPath
+                    ? { is_required: resolveValue(isRequiredKeyPath, item) }
+                    : {}),
                 }));
               } else {
                 setDynamicItems([]);
@@ -358,7 +368,9 @@ const DynamicTypedFields = (props: DynamicFieldsProps) => {
                                 id="${`${setIndex}_${el.id}`}"
                                 title="${el.title}"
                                 placeholder="${dynamicField.placeholder}"
-                                isRequired="${dynamicField.is_required}"
+                                isRequired="${el.is_required !== undefined
+                                  ? el.is_required
+                                  : dynamicField.is_required}"
                                 isEditable="${dynamicField.is_editable}"
                                 fieldId=${`${setIndex}_${el.id}`}
                                 onChange=${(val: any) => {
@@ -413,7 +425,9 @@ const DynamicTypedFields = (props: DynamicFieldsProps) => {
                           id="${el.id}"
                           title="${el.title}"
                           placeholder="${dynamicField.placeholder}"
-                          isRequired="${dynamicField.is_required}"
+                          isRequired="${el.is_required !== undefined
+                            ? el.is_required
+                            : dynamicField.is_required}"
                           isEditable="${dynamicField.is_editable}"
                           fieldId=${el.id}
                           onChange=${(val: any) => {

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

@@ -646,6 +646,10 @@ class FunctionForm extends Component<
           fieldDetails.meta.ui.ui_field?.type === 'CUSTOM_FIELDS'
             ? fieldDetails.meta.ui.ui_field.title_key_path || ''
             : undefined,
+        isRequiredKeyPath:
+          fieldDetails.meta.ui.ui_field?.type === 'CUSTOM_FIELDS'
+            ? fieldDetails.meta.ui.ui_field.is_required_key_path || ''
+            : undefined,
         dataSourceBody:
           fieldDetails.meta.ui.ui_field?.type === 'DYNAMIC_DROPDOWN' ||
           fieldDetails.meta.ui.ui_field?.type === 'CUSTOM_FIELDS'
@@ -897,6 +901,7 @@ class FunctionForm extends Component<
                     idKeyPath=${field.idKeyPath}
                     typeKeyPath=${field.typeKeyPath}
                     titleKeyPath=${field.titleKeyPath}
+                    isRequiredKeyPath=${field.isRequiredKeyPath}
                     onChange=${(val: any) => {
                       this.onFieldChange(field.id, val, field.dataType, false);
                     }}

package/src/interfaces/index.ts

@@ -313,6 +313,7 @@ export interface UiField {
   type_key_path?: string;
   title_key_path?: string;
   id_key_path?: string;
+  is_required_key_path?: string;
 }
 
 export interface TemplateField {