@integry/sdk 4.6.33 → 4.6.35

package/package.json

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

package/src/components/TagsMenu/index.ts

@@ -88,7 +88,6 @@ 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;
@@ -436,12 +435,33 @@ const TagList = ({
   const isExpandable = (value: unknown): boolean => {
     if (value === null || value === undefined) return false;
 
-    // Arrays and objects with properties are expandable
+    // Arrays with items are expandable
     if (Array.isArray(value)) return value.length > 0;
+
+    // Objects with properties are expandable
     if (typeof value === 'object') {
       // Check if it's a TagNode with tags
-      if (isTagNode(value) && value.tags)
-        return Object.keys(value.tags).length > 0;
+      if (isTagNode(value)) {
+        // Check if it has tags
+        if (value.tags && Object.keys(value.tags).length > 0) {
+          return true;
+        }
+
+        // Check if it has output that is expandable
+        if (value.output) {
+          if (Array.isArray(value.output) && value.output.length > 0) {
+            return true;
+          }
+          if (
+            typeof value.output === 'object' &&
+            value.output !== null &&
+            Object.keys(value.output as Record<string, unknown>).length > 0
+          ) {
+            return true;
+          }
+        }
+      }
+
       // Regular object with properties
       return Object.keys(value as Record<string, unknown>).length > 0;
     }
@@ -488,23 +508,42 @@ const TagList = ({
   }, [processedTags, searchTerm]);
 
   // Update the toggleExpand function with proper type checking
-  const toggleExpand = (key: string) => {
-    // For steps with nested steps, we don't allow collapsing
+  const toggleExpand = (key: string, event?: Event) => {
+    if (event) {
+      event.stopPropagation(); // Prevent event bubbling
+    }
+
+    // Get the node that we want to toggle
     const node = processedTags[key];
-    if (isTagNode(node) && node.tags && Object.keys(node.tags).length > 0) {
-      // Instead, toggle the output expansion
-      setExpandedOutputs((prev) => ({
-        ...prev,
-        [key]: !prev[key],
-      }));
-      return;
+
+    if (isTagNode(node)) {
+      // If it's a TagNode with tags, toggle output expansion
+      if (node.tags && Object.keys(node.tags).length > 0) {
+        // Toggle the output expansion
+        setExpandedOutputs((prev) => ({
+          ...prev,
+          [key]: !prev[key],
+        }));
+        return;
+      }
+
+      // If it's a TagNode with expandable output, toggle node expansion
+      if (node.output && isExpandable(node.output)) {
+        setExpandedNodes((prev) => ({
+          ...prev,
+          [key]: !prev[key],
+        }));
+        return;
+      }
     }
 
-    // For regular nodes or steps without nested steps, toggle normal expansion
-    setExpandedNodes((prev) => ({
-      ...prev,
-      [key]: !prev[key],
-    }));
+    // For arrays, objects, or steps without nested tags - toggle normal expansion
+    setExpandedNodes((prev) => {
+      const newExpandedNodes = { ...prev };
+      // Toggle the value
+      newExpandedNodes[key] = !prev[key];
+      return newExpandedNodes;
+    });
   };
 
   const toggleOutputExpand = (key: string, e: Event) => {
@@ -685,8 +724,38 @@ const TagList = ({
             isTagNode(value) &&
             value.output &&
             typeof value.output === 'object';
-          const hasChildren =
-            hasNestedSteps || hasOutput || isExpandable(value);
+          // Determine if this item has children that can be expanded
+          let hasChildren = hasNestedSteps || hasOutput;
+
+          // Check if this is an array or object (even if it's inside a step's output)
+          // This will allow us to show expand/collapse icons for arrays and objects
+          const isArray = Array.isArray(value);
+          const isObject =
+            !isArray &&
+            typeof value === 'object' &&
+            value !== null &&
+            Object.keys(value as Record<string, unknown>).length > 0;
+
+          // If this is an array or object (not a step), mark it as having children
+          if (!isStep && (isArray || isObject)) {
+            hasChildren = true;
+          }
+
+          // If this is a step with output that is an array or object, also mark it as having children
+          if (isStep && isTagNode(value) && value.output) {
+            // The output could be any data type - check if it's an array or object with content
+            const outputIsArray =
+              Array.isArray(value.output) && value.output.length > 0;
+            const outputIsObject =
+              !outputIsArray &&
+              typeof value.output === 'object' &&
+              value.output !== null &&
+              Object.keys(value.output as Record<string, unknown>).length > 0;
+
+            if (outputIsArray || outputIsObject) {
+              hasChildren = true;
+            }
+          }
           const isExpanded = expandedNodes[key];
           const isOutputExpanded = expandedOutputs[key];
           const currentPath = path ? `${path}.${key}` : key;
@@ -702,13 +771,12 @@ const TagList = ({
             text = key;
           }
 
-          let tagsParam: Record<string, unknown> | unknown[] = {};
+          let tagsParam: unknown = {};
 
           if (isTagNode(value)) {
-            if (Array.isArray(value.output)) {
+            // If the output exists, use it directly regardless of its type
+            if (value.output !== undefined) {
               tagsParam = value.output;
-            } else if (value.output) {
-              tagsParam = value.output as Record<string, unknown>;
             }
           }
 
@@ -725,15 +793,19 @@ const TagList = ({
           return html`
             <li key=${key} class="${nodeMatches ? styles.searchMatch : ''}">
               <div
-                onClick=${() => {
-                  if (isStep) {
+                onClick=${(e: Event) => {
+                  if (isStep && hasOutput) {
+                    // For step nodes with output, toggle output expansion
                     setExpandedOutputs((prev) => ({
                       ...prev,
                       [key]: !prev[key],
                     }));
                   } else if (hasChildren) {
+                    // For array/object nodes, toggle node expansion
                     toggleExpand(key);
+                    toggleOutputExpand(key, e);
                   } else {
+                    // For leaf nodes, select the value
                     const tagPath = `${activeTab}.${extractStepsFromOutputPath(
                       currentPath,
                     )}`;
@@ -809,11 +881,81 @@ const TagList = ({
                       </span>
                     </span>`
                   : ''}
-                ${isStep && hasOutput
+                <!-- Expand/collapse icon for steps with output -->
+                ${isStep && hasOutput ? html`` : ''}
+
+                <!-- Expand/collapse icon for arrays -->
+                ${Array.isArray(value) && value.length > 0
+                  ? html`<span
+                      class="${styles.outputIndicator} ${styles.objectExpandIcon}"
+                      onClick=${(e: Event) => toggleOutputExpand(key, e)}
+                      title="Toggle expand output"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        style="transform: ${isOutputExpanded
+                          ? 'rotate(180deg)'
+                          : 'rotate(0deg)'}; 
+                       transition: transform 0.2s;"
+                      >
+                        <path d="m6 9 6 6 6-6"></path>
+                      </svg>
+                    </span>`
+                  : ''}
+
+                <!-- Expand/collapse icon for objects -->
+                ${!isStep &&
+                !Array.isArray(value) &&
+                typeof value === 'object' &&
+                value !== null &&
+                Object.keys(value as Record<string, unknown>).length > 0
+                  ? html`<span
+                      class="${styles.outputIndicator} ${styles.objectExpandIcon}"
+                      onClick=${(e: Event) => toggleOutputExpand(key, e)}
+                      title="Toggle expand output"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        style="transform: ${isOutputExpanded
+                          ? 'rotate(180deg)'
+                          : 'rotate(0deg)'}; 
+                       transition: transform 0.2s;"
+                      >
+                        <path d="m6 9 6 6 6-6"></path>
+                      </svg>
+                    </span>`
+                  : ''}
+
+                <!-- Expand/collapse icon for step output that contains arrays or objects -->
+                ${isStep &&
+                isTagNode(value) &&
+                value.output &&
+                ((Array.isArray(value.output) && value.output.length > 0) ||
+                  (!Array.isArray(value.output) &&
+                    typeof value.output === 'object' &&
+                    value.output !== null &&
+                    Object.keys(value.output as Record<string, unknown>)
+                      .length > 0))
                   ? html`<span
-                      class="${styles.outputIndicator}"
+                      class="${styles.outputIndicator} ${styles.objectExpandIcon}"
                       onClick=${(e: Event) => toggleOutputExpand(key, e)}
-                      title="Toggle output data"
+                      title="Toggle expand output"
                     >
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
@@ -838,15 +980,102 @@ const TagList = ({
 
               ${isStep && hasOutput && isOutputExpanded
                 ? html`<div class="${styles.outputSection}">
-                    <${TagList}
-                      tags=${tagsParam}
-                      searchTerm=${searchTerm}
-                      level=${level + 1}
-                      path=${`${currentPath}.output`}
-                      globalSearchMode=${globalSearchMode}
-                      onSelect=${onSelect}
-                      activeTab=${activeTab}
-                    />
+                    <div style="position: relative;">
+                      <!-- SPECIAL CASE: Force array handling -->
+                      ${(() => {
+                        // For arrays specifically, render them directly
+                        if (Array.isArray(tagsParam)) {
+                          // Create a wrapper div to show each array item
+                          return html`
+                            <div class="${styles.arrayOutput}">
+                              <ul>
+                                ${tagsParam.map(
+                                  (item, index) => html`
+                                    <li key=${index}>
+                                      <div class="${styles.listItemContent}">
+                                        <span class="${styles.key}"
+                                          >[${index}]</span
+                                        >
+                                        ${typeof item === 'object' &&
+                                        item !== null
+                                          ? html`
+                                              <span class="${styles.value}">
+                                                ${Array.isArray(item)
+                                                  ? `Array(${item.length})`
+                                                  : `Object(${
+                                                      Object.keys(
+                                                        item as Record<
+                                                          string,
+                                                          unknown
+                                                        >,
+                                                      ).length
+                                                    } keys)`}
+                                              </span>
+                                              <span
+                                                class="${styles.outputIndicator} ${styles.objectExpandIcon}"
+                                                onClick=${(e: Event) =>
+                                                  toggleOutputExpand(key, e)}
+                                                title="Toggle expand output"
+                                              >
+                                                <svg
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                  width="24"
+                                                  height="24"
+                                                  viewBox="0 0 24 24"
+                                                  fill="none"
+                                                  stroke="currentColor"
+                                                  strokeWidth="2"
+                                                  strokeLinecap="round"
+                                                  strokeLinejoin="round"
+                                                  style="transform: ${isOutputExpanded
+                                                    ? 'rotate(180deg)'
+                                                    : 'rotate(0deg)'}; 
+                           transition: transform 0.2s;"
+                                                >
+                                                  <path d="m6 9 6 6 6-6"></path>
+                                                </svg>
+                                              </span>
+                                            `
+                                          : html`
+                                              <span class="${styles.value}">
+                                                ${String(item)}
+                                              </span>
+                                            `}
+                                      </div>
+                                    </li>
+                                  `,
+                                )}
+                              </ul>
+                            </div>
+                          `;
+                        }
+
+                        // For objects, render keys and values
+                        if (
+                          typeof tagsParam === 'object' &&
+                          tagsParam !== null
+                        ) {
+                          return html`
+                            <${TagList}
+                              tags=${tagsParam as Record<string, unknown>}
+                              searchTerm=${searchTerm}
+                              level=${level + 1}
+                              path=${`${currentPath}.output`}
+                              globalSearchMode=${globalSearchMode}
+                              onSelect=${onSelect}
+                              activeTab=${activeTab}
+                            />
+                          `;
+                        }
+
+                        // For primitive values, just show the string representation
+                        return html`
+                          <div style="padding: 4px; color: #666;">
+                            ${String(tagsParam)}
+                          </div>
+                        `;
+                      })()}
+                    </div>
                   </div>`
                 : ''}
               ${hasNestedSteps && isExpanded
@@ -860,16 +1089,39 @@ const TagList = ({
                     activeTab=${activeTab}
                   />`
                 : ''}
-              ${!isStep && hasChildren && isExpanded
-                ? html`<${TagList}
-                    tags=${tagsParamForOutput}
-                    searchTerm=${searchTerm}
-                    level=${level + 1}
-                    path=${currentPath}
-                    globalSearchMode=${globalSearchMode}
-                    onSelect=${onSelect}
-                    activeTab=${activeTab}
-                  />`
+              <!-- Display expanded array content with additional debug info -->
+              ${Array.isArray(value) && value.length > 0 && isExpanded
+                ? html`<div class="${styles.outputSection}">
+                    <${TagList}
+                      tags=${value}
+                      searchTerm=${searchTerm}
+                      level=${level + 1}
+                      path=${currentPath}
+                      globalSearchMode=${globalSearchMode}
+                      onSelect=${onSelect}
+                      activeTab=${activeTab}
+                    />
+                  </div>`
+                : ''}
+
+              <!-- Display expanded object content with additional debug info -->
+              ${!isStep &&
+              !Array.isArray(value) &&
+              typeof value === 'object' &&
+              value !== null &&
+              Object.keys(value as Record<string, unknown>).length > 0 &&
+              isExpanded
+                ? html`<div class="${styles.outputSection}">
+                    <${TagList}
+                      tags=${value as Record<string, unknown>}
+                      searchTerm=${searchTerm}
+                      level=${level + 1}
+                      path=${currentPath}
+                      globalSearchMode=${globalSearchMode}
+                      onSelect=${onSelect}
+                      activeTab=${activeTab}
+                    />
+                  </div>`
                 : ''}
             </li>
           `;

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

@@ -135,6 +135,7 @@
           }
           span.tagIcon {
             margin-right: 10px;
+            order: 1;
             svg,
             img {
               width: 1rem;
@@ -147,6 +148,7 @@
             }
           }
           span.key {
+            order: 3;
             mark {
               background-color: yellow;
               color: inherit;
@@ -156,15 +158,39 @@
             }
           }
           span.outputIndicator {
-            margin-left: auto;
             cursor: pointer;
             color: #71717a;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-width: 20px;
+            min-height: 20px;
+            order: 2;
+
             svg {
               width: 1rem;
               height: 1rem;
             }
+
             &:hover {
               color: #3b82f6;
+              background-color: rgba(59, 130, 246, 0.1);
+              border-radius: 2px;
+            }
+
+            &.objectExpandIcon {
+              svg {
+                color: #4f46e5; /* Indigo color to match theme */
+              }
+
+              &:hover {
+                background-color: rgba(
+                  79,
+                  70,
+                  229,
+                  0.15
+                ); /* Slightly darker on hover */
+              }
             }
           }
           span.value {
@@ -176,6 +202,7 @@
             text-overflow: ellipsis;
             white-space: nowrap;
             margin-left: 5px;
+            order: 4;
 
             mark {
               background-color: yellow;
@@ -228,8 +255,8 @@
       }
     }
     .tagsListWrapper {
-      max-height: 170px;
-      overflow-y: scroll;
+      max-height: 260px; /* Increased max height for better viewing */
+      overflow-y: auto;
       .valuesList {
         ul {
           margin: 5px 0;

package/src/features/containers/AppFlowContainer/AppFlowWrap/index.tsx

@@ -595,6 +595,10 @@ const RenderAppPage = (props: WraperrProps) => {
                         alt=${appData?.name}
                       />
                       <span>${selectedFlow?.flow.name}</span>
+                      ${selectedFlow?.flow?.version_number &&
+                      html`<span class=${styles.flowVersion}
+                        >v${selectedFlow?.flow?.version_number}</span
+                      >`}
                     </div>
                   </div>
                 `}

package/src/features/containers/AppFlowContainer/AppFlowWrap/styles.module.scss

@@ -53,6 +53,19 @@
       border-radius: 0 !important;
       user-select: none;
     }
+    .flowVersion {
+      background: rgb(233, 236, 238);
+      color: rgb(79, 79, 79);
+      font-size: 10px;
+      font-weight: 400;
+      padding: 2px 8px;
+      line-height: 12px;
+      text-align: center;
+      padding: 4px 9px;
+      /* height: 20px; */
+      display: inline-block;
+      margin-left: 7px;
+    }
 
     span {
       color: var(--black-and-grey-title-and-desc, #333);

package/src/components/React/TagsMenu/index.tsx

@@ -1,116 +0,0 @@
-// import { useState } from 'react';
-
-// const data: any = {
-//   setupForm: [
-//     {
-//       id: 'mailchimp',
-//       name: 'Configure Mailchimp (Add Subscriber)',
-//       fields: [
-//         'mailchimp_list',
-//         'email',
-//         'mailchimp_status',
-//         'mailchimp_custom_fields',
-//       ],
-//     },
-//     {
-//       id: 'slack',
-//       name: 'Configure Slack (Post Message)',
-//       fields: ['channel', 'message'],
-//     },
-//   ],
-//   triggers: [
-//     {
-//       id: 'webhook1',
-//       name: 'Incoming Webhook (Block)',
-//       fields: ['url', 'payload'],
-//     },
-//     {
-//       id: 'webhook2',
-//       name: 'Incoming Webhook',
-//       fields: ['endpoint', 'headers'],
-//     },
-//   ],
-// };
-
-// type Item = {
-//   id: string;
-//   name: string;
-//   fields: string[];
-// };
-
-// export default function TagsMenuComponent() {
-//   const [activeTab, setActiveTab] = useState('setupForm');
-//   const [activeItem, setActiveItem] = useState<Item>({
-//     id: '',
-//     name: '',
-//     fields: [],
-//   });
-
-//   const handleItemClick = (item: any) => setActiveItem(item);
-//   const handleBack = () =>
-//     setActiveItem({
-//       id: '',
-//       name: '',
-//       fields: [],
-//     });
-
-//   return (
-//     <div className="p-4">
-//       <div className="flex space-x-4 border-b">
-//         {['setupForm', 'triggers'].map((tab) => (
-//           <button
-//             key={tab}
-//             className={`p-2 ${
-//               activeTab === tab
-//                 ? 'font-bold border-b-2 border-black'
-//                 : 'text-gray-500'
-//             }`}
-//             onClick={() => {
-//               setActiveTab(tab);
-//               setActiveItem({
-//                 id: '',
-//                 name: '',
-//                 fields: [],
-//               });
-//             }}
-//           >
-//             {tab === 'setupForm' ? 'Setup Form' : 'Triggers'}
-//           </button>
-//         ))}
-//       </div>
-
-//       <div className="mt-4">
-//         {activeItem ? (
-//           <div>
-//             <button className="text-blue-500 mb-4" onClick={handleBack}>
-//               &larr; Back
-//             </button>
-//             <h2 className="font-semibold mb-2">
-//               {activeItem ? activeItem.name : ''}
-//             </h2>
-//             <div className="space-y-2">
-//               {activeItem.fields.map((field) => (
-//                 <div
-//                   key={field}
-//                   className="bg-gray-100 px-2 py-1 rounded text-gray-700"
-//                 >
-//                   {field}
-//                 </div>
-//               ))}
-//             </div>
-//           </div>
-//         ) : (
-//           data[activeTab].map((item: any) => (
-//             <div
-//               key={item.id}
-//               className="flex items-center space-x-2 p-2 hover:bg-gray-100 cursor-pointer rounded"
-//               onClick={() => handleItemClick(item)}
-//             >
-//               <span>{item.name}</span>
-//             </div>
-//           ))
-//         )}
-//       </div>
-//     </div>
-//   );
-// }

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

@@ -1,16 +0,0 @@
-.loader {
-  animation-name: ckw;
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-  transform-origin: 50% 50%;
-}
-
-@keyframes ckw {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}