@integry/sdk 4.6.21 → 4.6.23

package/package.json

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

package/src/components/MultipurposeField/Dropdown/index.tsx

@@ -69,6 +69,7 @@ interface ListBoxProps {
   dataSourceBody?: any;
   parentFieldChanged?: boolean;
   allowWorkspaceConnectedAccounts: boolean;
+  tagsTree?: any;
 }
 
 const ListBox = (props: ListBoxProps) => {
@@ -112,6 +113,7 @@ const ListBox = (props: ListBoxProps) => {
     dataSourceBody = {},
     parentFieldChanged = false,
     allowWorkspaceConnectedAccounts = false,
+    tagsTree = null,
   } = props;
 
   const [query, setQuery] = useState<string>('');
@@ -1000,6 +1002,7 @@ const ListBox = (props: ListBoxProps) => {
                       loadingOptions=${loading}
                       nextPage=${nextPage}
                       isDynamic=${isDynamic}
+                      tagsTree=${tagsTree}
                     />`}
                   </div>
                 `}

package/src/components/MultipurposeField/TagMenu/index.ts

@@ -78,6 +78,7 @@ const FieldDropdown = (props: FieldMenuProps) => {
     tagsComponent = null,
     isDynamic = true,
     tagsTree = null,
+    isMappable = false,
   } = props;
 
   // Set active tab in state
@@ -263,7 +264,7 @@ const FieldDropdown = (props: FieldMenuProps) => {
         enableSearch && !tagsTree ? styles.tagMenuBodyWithSearch : ''
       }`}
     >
-      ${activeTab === Tabs.Values
+      ${activeTab === Tabs.Values && (tagsTree === null || isDynamic)
         ? html`<div className=${styles.tagMenuBodyItem} id="tag-menu-body-item">
             ${options.length > 0
               ? getFilteredOptions(options, searchValue).length > 0
@@ -352,6 +353,11 @@ const FieldDropdown = (props: FieldMenuProps) => {
               ? html`<${TagsMenu}
                   tagsTree=${tagsTree}
                   onSelect=${onTagClick}
+                  renderValuesTab=${activeTab === Tabs.Values &&
+                  !isDynamic &&
+                  isMappable}
+                  options=${options}
+                  onOptionClick=${onOptionClick}
                 />`
               : html`${Object.keys(
                   !isEditable ? searchJSON(tags, searchValue) : tags,

package/src/components/MultipurposeField/index.tsx

@@ -283,7 +283,7 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
       tags.forEach((tag) => {
         const tagValue = tag.replace(/{|}/g, '');
         const tagValueParts = tagValue.split('.');
-        const tagData = (activityOutputDataRaw || []).find((element: any) => {
+        let tagData = (activityOutputDataRaw || []).find((element: any) => {
           return (
             element.value === tagValue ||
             checkIfTagExists(element.value, tagValue)
@@ -296,6 +296,17 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
               : tagValue,
           title: tagValue,
         };
+        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:
+              tagValueParts.length > 0
+                ? prettifyString(tagValueParts[tagValueParts.length - 1])
+                : tagValue,
+            title: tagValue,
+          };
+        }
         if (tagData) {
           newValue = newValue?.replace(
             tag,

package/src/components/TagsMenu/index.ts

@@ -1,6 +1,7 @@
 'use client';
 
 import { html } from 'htm/preact';
+import { render } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
 import styles from './styles.module.scss';
 
@@ -19,10 +20,17 @@ interface TagData {
   [key: string]: TagNode;
 }
 
+// Add this interface for the Values tab items
+interface ValueItem {
+  id: number;
+  value: string;
+}
+
 // Define the props for the TagMenu component
 interface TagMenuProps {
   data: TagData;
-  onSelect: (tag: TagNode) => void;
+  onSelect: (tag: TagNode | Record<string, unknown>) => void;
+  onOptionClick?: (option: Record<string, unknown>) => void;
 }
 
 interface TagListProps {
@@ -35,6 +43,14 @@ interface TagListProps {
   activeTab?: string;
 }
 
+interface TagsMenuProps {
+  tagsTree: Record<string, unknown>;
+  onSelect: (tag: Record<string, unknown>) => void;
+  renderValuesTab?: boolean;
+  options?: Record<string, unknown>;
+  onOptionClick?: (option: Record<string, unknown>) => void;
+}
+
 // Helper function to convert nested tags arrays to objects
 function convertNestedTagsToObject(tags: TagNode[]): Record<string, TagNode> {
   const result: Record<string, TagNode> = {};
@@ -72,6 +88,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;
@@ -307,6 +324,37 @@ const TypeIcon = ({ value }: { value: unknown }) => {
   return html`<span class="${styles.tagIcon}">${getTypeIcon(value)}</span>`;
 };
 
+// Add a new component to render the flat list of values
+const ValuesList = ({
+  values,
+  onSelect,
+  onOptionClick,
+}: {
+  values: ValueItem[];
+  onSelect: (item: Record<string, unknown>) => void;
+  onOptionClick: (option: Record<string, unknown>) => void;
+}) =>
+  html`
+    <div class="${styles.valuesList}">
+      <ul>
+        ${values.map(
+          (item) => html`
+            <li
+              key=${item.id}
+              class="${styles.valueItem}"
+              onClick=${() =>
+                onOptionClick({
+                  id: item.id,
+                  value: item.value,
+                })}
+            >
+              <span class="${styles.valueText}">${item.value}</span>
+            </li>
+          `,
+        )}
+      </ul>
+    </div>
+  `;
 const TagList = ({
   tags,
   searchTerm,
@@ -640,7 +688,7 @@ const TagList = ({
           if (isTagNode(value)) {
             if (Array.isArray(value.output)) {
               tagsParam = value.output;
-            } else {
+            } else if (value.output) {
               tagsParam = value.output as Record<string, unknown>;
             }
           }
@@ -809,7 +857,7 @@ const TagList = ({
 };
 
 // Update the TabMenu component to search across all tabs
-const TabMenu = ({ data, onSelect }: TagMenuProps) => {
+const TabMenu = ({ data, onSelect, onOptionClick }: TagMenuProps) => {
   const [activeTab, setActiveTab] = useState<string>(Object.keys(data)[0]);
   const [searchTerm, setSearchTerm] = useState<string>('');
   const [searchResults, setSearchResults] = useState<Record<string, number>>(
@@ -828,6 +876,18 @@ const TabMenu = ({ data, onSelect }: TagMenuProps) => {
     const results: Record<string, number> = {};
 
     Object.keys(data).forEach((tabKey) => {
+      // Skip counting for Values tab - handle it differently
+      if (tabKey === 'Values') {
+        const valuesData = (data[tabKey] as unknown) as { values: ValueItem[] };
+        if (valuesData.values) {
+          const matches = valuesData.values.filter((item) =>
+            item.value.toLowerCase().includes(searchTerm.toLowerCase()),
+          ).length;
+          results[tabKey] = matches;
+        }
+        return;
+      }
+
       const matches = countSearchMatches(
         data[tabKey].tags || {},
         searchTerm.toLowerCase(),
@@ -842,6 +902,29 @@ const TabMenu = ({ data, onSelect }: TagMenuProps) => {
   const getTabIcon = (tabName: string) => {
     const name = tabName.toLowerCase();
 
+    if (name === 'values') {
+      return html`
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          class="mr-1"
+        >
+          <path d="M8 3H5a2 2 0 0 0-2 2v3"></path>
+          <path d="M21 8V5a2 2 0 0 0-2-2h-3"></path>
+          <path d="M3 16v3a2 2 0 0 0 2 2h3"></path>
+          <path d="M16 21h3a2 2 0 0 0 2-2v-3"></path>
+          <rect width="10" height="10" x="7" y="7" rx="2"></rect>
+        </svg>
+      `;
+    }
+
     if (name.includes('trigger')) {
       return html`
         <svg
@@ -883,7 +966,6 @@ const TabMenu = ({ data, onSelect }: TagMenuProps) => {
     }
 
     if (name.includes('form') || name.includes('setup')) {
-      // Keep the existing form icon
       return html`
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -1015,7 +1097,66 @@ const TabMenu = ({ data, onSelect }: TagMenuProps) => {
         )}
       </div>
     `;
+
   const renderContent = () => {
+    // Special handling for Values tab
+    if (activeTab === 'Values') {
+      const valuesData = (data[activeTab] as unknown) as {
+        values: ValueItem[];
+      };
+      const filteredValues = searchTerm
+        ? valuesData.values.filter((item) =>
+            item.value.toLowerCase().includes(searchTerm.toLowerCase()),
+          )
+        : valuesData.values;
+
+      return html`
+        <div class="${styles.tabContent}">
+          <div class="${styles.searchWrapper}">
+            <input
+              type="text"
+              placeholder="Search values..."
+              value=${searchTerm}
+              onInput=${(e: Event) =>
+                setSearchTerm((e.target as HTMLInputElement).value)}
+            />
+            ${searchTerm
+              ? html`
+                  <button
+                    class="${styles.clearSearch}"
+                    onClick=${() => setSearchTerm('')}
+                    title="Clear search"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <line x1="18" y1="6" x2="6" y2="18"></line>
+                      <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                  </button>
+                `
+              : ''}
+          </div>
+          <div class="${styles.tagsListWrapper}">
+            <${ValuesList}
+              values=${filteredValues}
+              onSelect=${onSelect}
+              onOptionClick=${onOptionClick}
+            />
+          </div>
+        </div>
+      `;
+    }
+
+    // Regular tab handling
     const activeData = data[activeTab];
     return html`
       <div class="${styles.tabContent}">
@@ -1068,10 +1209,8 @@ const TabMenu = ({ data, onSelect }: TagMenuProps) => {
   return html`<div>${renderTabs()} ${renderContent()}</div>`;
 };
 
-// Update the TagList component parameter types
-
-// Add this function to convert array-based tags back to object-based tags
-export function convertTagsToObject(tagData: Record<string, unknown>): TagData {
+// Function to convert TagData to include the Values tab
+function convertTagsToObject(tagData: Record<string, unknown>): TagData {
   const result: TagData = {};
 
   Object.keys(tagData).forEach((key) => {
@@ -1080,7 +1219,7 @@ export function convertTagsToObject(tagData: Record<string, unknown>): TagData {
       ...section,
     };
 
-    // Convert tags array to object
+    // Convert tags array to object if needed
     if (section.tags && Array.isArray(section.tags)) {
       const tagsObject: Record<string, TagNode> = {};
 
@@ -1108,16 +1247,41 @@ export function convertTagsToObject(tagData: Record<string, unknown>): TagData {
   return result;
 }
 
-interface TagsMenuProps {
-  tagsTree: Record<string, unknown>;
-  onSelect: (tag: Record<string, unknown>) => void;
-}
+// Update the TagsMenu function to add the Values tab
+export function TagsMenu({
+  tagsTree,
+  onSelect,
+  renderValuesTab,
+  options,
+  onOptionClick,
+}: TagsMenuProps) {
+  let modifiedData = convertTagsToObject(tagsTree);
+
+  if (
+    renderValuesTab &&
+    options &&
+    Array.isArray(options) &&
+    options.length > 0
+  ) {
+    // Add the Values tab with sample data
+    // In a real implementation, this would come from props
+    modifiedData = {
+      Values: {
+        name: 'Values',
+        machineName: 'values',
+        values: options,
+      } as TagNode,
+      ...modifiedData, // Spread the remaining tabs after "Values"
+    };
+  }
 
-export function TagsMenu({ tagsTree, onSelect }: TagsMenuProps) {
-  const modifiedData = convertTagsToObject(tagsTree);
   return html`
     <div class="${styles.tagsMenuWrapper}">
-      <${TabMenu} data=${modifiedData} onSelect=${onSelect} />
+      <${TabMenu}
+        data=${modifiedData}
+        onSelect=${onSelect}
+        onOptionClick=${onOptionClick}
+      />
     </div>
   `;
 }

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

@@ -148,7 +148,7 @@
           }
           span.key {
             mark {
-              // background-color: rgba(79, 70, 229, 0.2);
+              background-color: yellow;
               color: inherit;
               font-weight: 500;
               border-radius: 2px;
@@ -178,7 +178,7 @@
             margin-left: 5px;
 
             mark {
-              // background-color: rgba(79, 70, 229, 0.2);
+              background-color: yellow;
               color: inherit;
               font-weight: 500;
               border-radius: 2px;
@@ -196,7 +196,7 @@
             margin-left: 5px;
 
             mark {
-              // background-color: rgba(79, 70, 229, 0.2);
+              background-color: yellow;
               color: inherit;
               font-weight: 500;
               border-radius: 2px;
@@ -230,6 +230,24 @@
     .tagsListWrapper {
       max-height: 170px;
       overflow-y: scroll;
+      .valuesList {
+        ul {
+          margin: 5px 0;
+          padding: 0 10px;
+          li {
+            color: hsl(240deg, 10%, 3.9%);
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 0.8rem;
+            line-height: 1rem;
+            padding: 5px 10px;
+            &:hover {
+              background: rgba(66, 80, 240, 0.1);
+              border-radius: 100px;
+            }
+          }
+        }
+      }
     }
   }
 }

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

@@ -1476,6 +1476,11 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                   }
                                   allowWorkspaceConnectedAccounts=${!!this.props
                                     .onFieldChangeCallback}
+                                  tagsTree=${
+                                    this.props.showMappingMenu
+                                      ? this.props.tagsTree
+                                      : null
+                                  }
 
                                 ><//>
                                 </${ConfigureFieldWrapper}>