@integry/sdk 4.6.35 → 4.6.37

package/package.json

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

package/src/components/MultipurposeField/index.tsx

@@ -234,7 +234,45 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
       .replace(/\u00A0/g, '');
   };
 
+  const capitalize = (text: string) => {
+    if (!text) return '';
+    return text.charAt(0).toUpperCase() + text.slice(1);
+  };
+
   const tagTemplate = (tagData: any) => {
+    if (tagData.appIcon) {
+      const origin = tagData.value.split('.')[0];
+      let originText = capitalize(origin);
+      switch (origin) {
+        case 'steps':
+          originText = 'Step';
+          break;
+        case 'storage':
+          originText = 'User variable';
+          break;
+        case 'setup_form':
+          originText = 'Setup form';
+          break;
+        default:
+          originText = capitalize(origin);
+      }
+      return `
+        <tag
+                contenteditable='false'
+                spellcheck='false'
+                tabIndex="-1"
+                class="tagify__tag ${tagData.class ? tagData.class : ''}"
+            >
+            <div class="${styles.tagifyTagTemplate}">
+            <div class="${styles.tagifyAppIcon}">
+              <img src="${tagData.appIcon}" alt="" />
+            </div>
+              <span data-hint="${
+                typeof tagData.title === 'string' ? tagData.title : ''
+              }" class='tagify__tag-text'>${originText}: ${tagData.text}</span>
+            </div>
+        </tag>`;
+    }
     return `
         <tag
                 contenteditable='false'
@@ -383,6 +421,7 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
         value: tag.currentPath,
         text: tag.key,
         title: tag.value,
+        appIcon: tag.parentAppIcon,
       };
       isStandardTag = false; // This tag is coming from TagsMenu component
     }
@@ -391,6 +430,7 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
         value: result.value,
         text: isStandardTag ? result.text : prettifyString(result.text),
         title: isStandardTag ? getTagData(tag) : result.title,
+        appIcon: result.appIcon,
         editable: false,
       });
       tagify.injectAtCaret(tagElm);

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

@@ -54,3 +54,21 @@
     }
   }
 }
+.tagifyTagTemplate {
+  background-color: #f5f5f5;
+  --tag-hover: #e0e0e0;
+  --tag-bg: #e0e0e0;
+  display: inline;
+  align-items: center; /* Ensures vertical alignment */
+  gap: 4px; /* Optional spacing between icon and text */
+  .tagifyAppIcon {
+    img {
+      margin-right: 5px;
+
+      width: 16px; /* Adjust based on your design */
+      height: 16px;
+      object-fit: contain;
+      display: block;
+    }
+  }
+}

package/src/components/TagsMenu/index.ts

@@ -354,6 +354,55 @@ const ValuesList = ({
       </ul>
     </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;
+};
 const TagList = ({
   tags,
   searchTerm,
@@ -1409,6 +1458,13 @@ const TabMenu = ({ data, onSelect, onOptionClick }: TagMenuProps) => {
 
     // Regular tab handling
     const activeData = data[activeTab];
+    const steps = activeData.tags || [];
+    const hasSingleEmptyStep =
+      !Array.isArray(steps) && // Handle the case where steps is an object
+      Object.keys(steps).length === 1 &&
+      isTagNode(Object.values(steps)[0]) &&
+      Object.keys((Object.values(steps)[0] as TagNode).output || {}).length ===
+        0;
     return html`
       <div class="${styles.tabContent}">
         <div class="${styles.searchWrapper}">
@@ -1444,15 +1500,19 @@ const TabMenu = ({ data, onSelect, onOptionClick }: TagMenuProps) => {
               `
             : ''}
         </div>
-        <div class="${styles.tagsListWrapper}">
-          <${TagList}
-            tags=${activeData.tags}
-            searchTerm=${searchTerm}
-            globalSearchMode=${globalSearchMode}
-            onSelect=${onSelect}
-            activeTab=${data[activeTab].machineName || activeTab}
-          />
-        </div>
+        ${hasSingleEmptyStep
+          ? html`<div class="${styles.emptyStep}">
+              <span>No tags found</span>
+            </div>`
+          : html` <div class="${styles.tagsListWrapper}">
+              <${TagList}
+                tags=${activeData.tags}
+                searchTerm=${searchTerm}
+                globalSearchMode=${globalSearchMode}
+                onSelect=${onSelect}
+                activeTab=${data[activeTab].machineName || activeTab}
+              />
+            </div>`}
       </div>
     `;
   };

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

@@ -221,6 +221,7 @@
             text-overflow: ellipsis;
             white-space: nowrap;
             margin-left: 5px;
+            min-width: 20px;
 
             mark {
               background-color: yellow;
@@ -254,6 +255,16 @@
         }
       }
     }
+    .emptyStep {
+      span {
+        color: #666;
+        font-style: italic;
+        margin: 10px 0;
+        text-align: center;
+        font-size: 12px;
+        margin-left: 5px;
+      }
+    }
     .tagsListWrapper {
       max-height: 260px; /* Increased max height for better viewing */
       overflow-y: auto;

package/src/features/containers/MarkeplaceApps/index.ts

@@ -136,7 +136,7 @@ const AuthorizationRow = (props: {
 };
 
 const MarketplaceApps = (props: any) => {
-  const { genericData, renderMode, userConfig, appName } = props;
+  const { genericData, renderMode, userConfig, appName, fetchAll } = props;
   const context = useContext(AppContext);
   const [apps, setApps] = useState<any[]>([]);
   const [filteredApps, setFilteredApps] = useState<any[]>([]);
@@ -174,6 +174,7 @@ const MarketplaceApps = (props: any) => {
       .getMarketplaceAppsV2({
         cursor: search !== '' ? null : cursorToUse,
         search,
+        fetchAll,
       })
       .then((appsResponse) => {
         const tempApps = appsResponse.apps.map((app: any) => ({

package/src/features/containers/MarketplaceAppsCompact/index.ts

@@ -137,7 +137,7 @@ const AuthorizationRow = (props: {
 };
 
 const MarketplaceAppsCompact = (props: any) => {
-  const { genericData, renderMode, userConfig, appName } = props;
+  const { genericData, renderMode, userConfig, appName, fetchAll } = props;
   const context = useContext(AppContext);
   const [apps, setApps] = useState<any[]>([]);
   const [filteredApps, setFilteredApps] = useState<any[]>([]);
@@ -177,6 +177,7 @@ const MarketplaceAppsCompact = (props: any) => {
       .getMarketplaceAppsV2({
         cursor: search !== '' ? null : cursorToUse,
         search,
+        fetchAll,
       })
       .then((appsResponse) => {
         const tempApps = appsResponse.apps.map((app: any) => ({

package/src/features/containers/MarketplaceAppsContainer/index.ts

@@ -13,6 +13,7 @@ interface ContainerProps extends StoreType {
   renderAppPageMode: MarketplaceRenderModes;
   renderFlowSetupMode: MarketplaceRenderModes;
   appName?: string;
+  fetchAll?: boolean;
 }
 
 const MarketplaceContainer = (props: ContainerProps) => {
@@ -22,6 +23,7 @@ const MarketplaceContainer = (props: ContainerProps) => {
     renderAppPageMode,
     renderFlowSetupMode,
     appName = '',
+    fetchAll = false,
   } = props;
   const { app_id } = genericData;
 
@@ -50,6 +52,7 @@ const MarketplaceContainer = (props: ContainerProps) => {
         : MarketplaceApps}
         renderMode=${renderMode}
         appName=${appName}
+        fetchAll=${fetchAll}
       />`}
       ${renderMode === MarketplaceRenderModes.MODAL &&
       html`
@@ -64,6 +67,7 @@ const MarketplaceContainer = (props: ContainerProps) => {
             : MarketplaceApps}
             renderMode=${renderMode}
             appName=${appName}
+            fetchAll=${fetchAll}
           />`}
         <//>
       `}

package/src/index.ts

@@ -1748,6 +1748,7 @@ export class IntegryJS {
     renderMode: RenderModes = RenderModes.MODAL,
     containerId = 'integry-marketplace',
     layout = Layouts.WIDE,
+    fetchAll = false,
   ) => {
     let target = document.getElementById(containerId);
     if (!target) {
@@ -1822,6 +1823,7 @@ export class IntegryJS {
                 renderMode=${renderMode}
                 renderAppPageMode=${renderMode}
                 renderFlowSetupMode=${TemplateFormRenderModes.INLINE}
+                fetchAll=${fetchAll}
               >
               <//>
             <//>

package/src/modules/api/index.ts

@@ -1026,6 +1026,7 @@ class IntegryAPI {
   public getMarketplaceAppsV2 = async ({
     cursor = <string | null>null,
     search = '',
+    fetchAll = false,
   }): Promise<any | null> => {
     const url = new URL(`${this.config.baseAPIUrl}/apps/list/`);
 
@@ -1033,7 +1034,7 @@ class IntegryAPI {
       app_key: this.config.appKey,
       hash: this.config.hash,
       user_id: this.config.userId,
-      page_size: 30,
+      page_size: fetchAll ? 9999 : 30,
     });
 
     if (search !== '' && search !== null) {