@integry/sdk 4.6.95 → 4.6.97

package/package.json

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

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

@@ -240,21 +240,9 @@ const ListBox = (props: ListBoxProps) => {
 
   useEffect(() => {
     if (query && isSearchable) {
-      const filtered = fuzzysort
-        .go(query, items, {
-          keys: ['value'],
-          scoreFn: (keysResult) => {
-            const nameResult = keysResult[0];
-            const tagsResult = keysResult[1];
-            // assign higher score to name result
-            const score = Math.max(
-              nameResult ? nameResult.score + 100 : -Infinity,
-              tagsResult ? tagsResult.score : -Infinity,
-            );
-            return score;
-          },
-        })
-        .map((el) => el.obj);
+      const filtered = items.filter((item) =>
+        item.value.toLowerCase().includes(query.toLowerCase()),
+      );
       setHighlightedIndex(-1);
       setSortedFilteredItems(filtered);
       if (filtered.length === 1) setHighlightedIndex(0);

package/src/components/TagsMenu/index.ts

@@ -403,6 +403,9 @@ const findParentWithAppIcon = (
 
   return parentWithIcon;
 };
+
+// Update the TagList component to add the "add tag" button functionality
+
 const TagList = ({
   tags,
   searchTerm,
@@ -424,6 +427,9 @@ const TagList = ({
     Record<string, boolean>
   >({});
 
+  // Track which node is being hovered
+  const [hoveredNode, setHoveredNode] = useState<string | null>(null);
+
   // Handle arrays by converting them to objects with indices as keys
   const processedTags = Array.isArray(tags)
     ? arrayToObject(tags)
@@ -628,6 +634,47 @@ const TagList = ({
     return textModified.replace(regex, '<mark>$1</mark>');
   };
 
+  const extractStepsFromOutputPath = (pathToExtract: string) => {
+    const parts = pathToExtract.split('.'); // Split the string by dots
+
+    // Find the first occurrence of 'output'
+    const firstOutputIndex = parts.indexOf('output');
+
+    if (firstOutputIndex === -1 || firstOutputIndex === 0) {
+      return ''; // Return empty if 'output' is not found or it's at the start
+    }
+
+    // Get the step name (part before the first 'output')
+    const stepName = parts[firstOutputIndex - 1];
+
+    // Get all parts after the first 'output', including any other 'output' keys
+    const remainingParts = parts.slice(firstOutputIndex + 1);
+
+    // If there are remaining parts, combine the step name with them
+    if (remainingParts.length > 0) {
+      return `${stepName}.${remainingParts.join('.')}`;
+    }
+
+    // If there are no remaining parts, just return the step name
+    return stepName;
+  };
+
+  // Function to handle selecting a tag
+  const handleSelectTag = (
+    key: string,
+    value: unknown,
+    currentPath: string,
+  ) => {
+    const tagPath = `${activeTab}.${extractStepsFromOutputPath(currentPath)}`;
+    onSelect({
+      currentPath: tagPath
+        .replace(/\bparameters\.parameters\b/g, 'parameters')
+        .replace(/\bauthorization\.authorization\b/g, 'authorization'),
+      key,
+      value: escapeHTMLIfNeeded(value),
+    });
+  };
+
   // Update the filterTags function with proper type checking
   const filterTags = (
     tagsToFilter: Record<string, unknown> | unknown[],
@@ -743,31 +790,6 @@ const TagList = ({
     ? filterTags(processedTags, searchTerm, path)
     : processedTags;
 
-  const extractStepsFromOutputPath = (pathToExtract: string) => {
-    const parts = pathToExtract.split('.'); // Split the string by dots
-
-    // Find the first occurrence of 'output'
-    const firstOutputIndex = parts.indexOf('output');
-
-    if (firstOutputIndex === -1 || firstOutputIndex === 0) {
-      return ''; // Return empty if 'output' is not found or it's at the start
-    }
-
-    // Get the step name (part before the first 'output')
-    const stepName = parts[firstOutputIndex - 1];
-
-    // Get all parts after the first 'output', including any other 'output' keys
-    const remainingParts = parts.slice(firstOutputIndex + 1);
-
-    // If there are remaining parts, combine the step name with them
-    if (remainingParts.length > 0) {
-      return `${stepName}.${remainingParts.join('.')}`;
-    }
-
-    // If there are no remaining parts, just return the step name
-    return stepName;
-  };
-
   // Simplified rendering to fix syntax issues
   return html`
     <ul style="padding-left: ${1 * 20}px;">
@@ -873,22 +895,18 @@ const TagList = ({
               toggleOutputExpand(key, e);
             } else {
               // For leaf nodes, select the value
-              const tagPath = `${activeTab}.${extractStepsFromOutputPath(
-                currentPath,
-              )}`;
-              onSelect({
-                currentPath: tagPath
-                  .replace(/\bparameters\.parameters\b/g, 'parameters')
-                  .replace(
-                    /\bauthorization\.authorization\b/g,
-                    'authorization',
-                  ),
-                key,
-                value: escapeHTMLIfNeeded(value),
-              });
+              handleSelectTag(key, value, currentPath);
             }
           };
 
+          // Check if this is an edge node (leaf node with no children)
+          const isEdgeNode = !hasChildren;
+
+          // Determine if we should show the add tag button
+          // Don't show for step name nodes, only for non-edge nodes that aren't step names
+          const shouldShowAddButton =
+            !isEdgeNode && hoveredNode === key && !isStep;
+
           return html`
             <li key=${key} class="${nodeMatches ? styles.searchMatch : ''}">
               <div
@@ -905,22 +923,12 @@ const TagList = ({
                     toggleOutputExpand(key, e);
                   } else {
                     // For leaf nodes, select the value
-                    const tagPath = `${activeTab}.${extractStepsFromOutputPath(
-                      currentPath,
-                    )}`;
-                    onSelect({
-                      currentPath: tagPath
-                        .replace(/\bparameters\.parameters\b/g, 'parameters')
-                        .replace(
-                          /\bauthorization\.authorization\b/g,
-                          'authorization',
-                        ),
-                      key,
-                      value: escapeHTMLIfNeeded(value),
-                    });
+                    handleSelectTag(key, value, currentPath);
                   }
                 }}
                 class="${styles.listItemContent}"
+                onMouseEnter=${() => setHoveredNode(key)}
+                onMouseLeave=${() => setHoveredNode(null)}
               >
                 ${!isStep ? html`<${TypeIcon} value=${value} />` : ''}
                 ${isTagNode(value) && value.appIcon
@@ -991,8 +999,35 @@ const TagList = ({
                       </span>
                     </span>`
                   : ''}
-                <!-- Expand/collapse icon for steps with output -->
-                ${isStep && hasOutput ? html`` : ''}
+
+                <!-- Add Tag button for non-edge nodes that aren't step names -->
+                ${shouldShowAddButton
+                  ? html`
+                      <button
+                        class="${styles.addTagButton}"
+                        onClick=${(e: Event) => {
+                          e.stopPropagation();
+                          handleSelectTag(key, value, currentPath);
+                        }}
+                        title="Add this tag"
+                      >
+                        <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"
+                        >
+                          <path d="M12 5v14"></path>
+                          <path d="M5 12h14"></path>
+                        </svg>
+                      </button>
+                    `
+                  : ''}
 
                 <!-- Expand/collapse icon for arrays -->
                 ${Array.isArray(value) && value.length > 0

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

@@ -255,6 +255,45 @@
             margin-right: 3px;
             order: 2;
           }
+
+          // Add this to your styles.module.scss file
+          .addTagButton {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: #4f46e5;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            width: 24px;
+            height: 24px;
+            cursor: pointer;
+            transition: background-color 0.2s, opacity 0.2s;
+            position: absolute;
+            right: 12px; // Reduced from 32px to 8px to position it closer to the right edge
+            opacity: 0.9;
+            animation: fadeIn 0.2s ease-in-out;
+            z-index: 10; // Ensure it appears above other elements
+
+            &:hover {
+              background-color: #4338ca;
+              opacity: 1;
+            }
+
+            svg {
+              width: 14px;
+              height: 14px;
+            }
+          }
+
+          @keyframes fadeIn {
+            from {
+              opacity: 0;
+            }
+            to {
+              opacity: 0.9;
+            }
+          }
         }
       }
     }