diff --git a/src/components/ACLDiv.res b/src/components/ACLDiv.res
index 0606985cc..7be041859 100644
--- a/src/components/ACLDiv.res
+++ b/src/components/ACLDiv.res
@@ -11,6 +11,7 @@ let make = (
   ~contentAlign=?,
   ~justifyClass=?,
   ~tooltipForWidthClass=?,
+  ~dataAttrStr=?,
 ) => {
   <ACLToolTip
     access=permission
@@ -21,9 +22,12 @@ let make = (
     ?contentAlign
     ?tooltipWidthClass
     ?justifyClass
-    toolTipFor={<div className onClick={permission === AuthTypes.Access ? onClick : {_ => ()}}>
-      {children}
-    </div>}
+    toolTipFor={<AddDataAttributes
+      attributes=[("data-testid", dataAttrStr->Option.getOr("")->String.toLowerCase)]>
+      <div className onClick={permission === AuthTypes.Access ? onClick : {_ => ()}}>
+        {children}
+      </div>
+    </AddDataAttributes>}
     toolTipPosition={Top}
   />
 }
diff --git a/src/components/ACLDiv.resi b/src/components/ACLDiv.resi
index 4e1088798..645bf6c8a 100644
--- a/src/components/ACLDiv.resi
+++ b/src/components/ACLDiv.resi
@@ -11,4 +11,5 @@ let make: (
   ~contentAlign: ToolTip.contentPosition=?,
   ~justifyClass: string=?,
   ~tooltipForWidthClass: string=?,
+  ~dataAttrStr: string=?,
 ) => React.element
diff --git a/src/screens/Processors/ProcessorCards.res b/src/screens/Processors/ProcessorCards.res
index d811744f3..923127a39 100644
--- a/src/screens/Processors/ProcessorCards.res
+++ b/src/screens/Processors/ProcessorCards.res
@@ -108,30 +108,30 @@ let make = (
             let connectorName = connector->getConnectorNameString
             let connectorInfo = connector->getConnectorInfo
             let size = "w-14 h-14 rounded-sm"
-            <AddDataAttributes attributes=[("data-testid", connectorName->String.toLowerCase)]>
-              <ACLDiv
-                permission={userPermissionJson.connectorsManage}
-                onClick={_ => handleClick(connectorName)}
-                key={i->string_of_int}
-                className="border p-6 gap-4 bg-white rounded flex flex-col justify-between">
-                <div className="flex flex-col gap-3 items-start">
-                  <GatewayIcon gateway={connectorName->String.toUpperCase} className=size />
-                  <p className={`${p1MediumTextStyle} break-all`}>
-                    {connectorName->getDisplayNameForConnector->React.string}
-                  </p>
-                </div>
-                <p className="overflow-hidden text-gray-400 flex-1 line-clamp-3">
-                  {connectorInfo.description->React.string}
+
+            <ACLDiv
+              permission={userPermissionJson.connectorsManage}
+              onClick={_ => handleClick(connectorName)}
+              key={i->string_of_int}
+              className="border p-6 gap-4 bg-white rounded flex flex-col justify-between"
+              dataAttrStr=connectorName>
+              <div className="flex flex-col gap-3 items-start">
+                <GatewayIcon gateway={connectorName->String.toUpperCase} className=size />
+                <p className={`${p1MediumTextStyle} break-all`}>
+                  {connectorName->getDisplayNameForConnector->React.string}
                 </p>
-                <ACLButton
-                  access={userPermissionJson.connectorsManage}
-                  text="+ Connect"
-                  buttonType={Transparent}
-                  buttonSize={Small}
-                  textStyle="text-jp-gray-900"
-                />
-              </ACLDiv>
-            </AddDataAttributes>
+              </div>
+              <p className="overflow-hidden text-gray-400 flex-1 line-clamp-3">
+                {connectorInfo.description->React.string}
+              </p>
+              <ACLButton
+                access={userPermissionJson.connectorsManage}
+                text="+ Connect"
+                buttonType={Transparent}
+                buttonSize={Small}
+                textStyle="text-jp-gray-900"
+              />
+            </ACLDiv>
           })
           ->React.array}
         </div>