fix: address UI bugs from issue #4740

[kanikabansal08]

Type of Change

• Bugfix

Description

Addresses the UI bugs reported in #4740:

• Truncated IDs had no way to see the full value. Added an optional showTooltip prop to HelperComponents.CopyTextCustomComp and wrapped the truncated text in a ToolTip, so hovering reveals the full value. Enabled it for Merchant Connector ID (ConnectorTableUtils.res) and Customer ID (CustomersEntity.res).
• EllipsisText now shows a tooltip with the full value when the text is truncated (only when it actually overflows).
• Ambiguous "NA" connector label. connector_label now defaults to an empty string instead of "NA" (PaymentInterfaceUtilsV1.res).
• Confusing "Disabled" column. Renamed the Disabled column header from "Disabled" to "Status" across all connector table entities (payment, payout, 3DS, vault, billing, tax, surcharge, PM auth, recovery, connector interface) so it no longer competes with the "Integration status" column.
• API key names wrapping to a second line. Rendered the API key Name cell as a whitespace-nowrap custom cell (KeyManagementHelper.res) for consistent row heights.
• Order details (OrderEntity.res) tooltip/label adjustments for the connector transaction ID / connector label.

Motivation and Context

Closes #4740

How did you test it?

Manually verified the affected tables and detail screens render the tooltips, the renamed "Status" header, and non-wrapping cells.

Note

Known issue: in the copy-text cells, the ToolTip trigger wrapper does not carry the w-36 width constraint, so the copy icon's horizontal alignment can shift with text length. Raising this PR as-is; alignment fix to follow.

Where to test it?

• INTEG
• SANDBOX
• PROD

Backend Dependency

• No

Backend PR URL:

Feature Flag

• No feature flag changes

🤖 Generated with Claude Code

[semanticdiff-com]

Review changes with  

[XyneSpaces]

Automated Review Summary

PR: fix: address UI bugs from issue #4740
Reviewer: XyneSpaces Automation

---

Findings Overview

2 minor observations requiring attention on consistency.

---

Findings

1. Inconsistent showTooltip adoption

💡 Suggestion — The showTooltip prop was added to CopyTextCustomComp and enabled for Merchant Connector ID (ConnectorTableUtils.res) and Customer ID (CustomersEntity.res), but ConnectorInterfaceTableEntity.res still uses the component without the tooltip for the same Merchant Connector ID column.

Location: src/Interface/ConnectorInterface/ConnectorInterfaceTableEntity.res:112-114

Fix: Add showTooltip=true to the ConnectorInterfaceTableEntity.res usage for consistency across all connector ID displays.

---

2. Column header naming conflict potential

💡 Suggestion — The Disabled column header was renamed from "Disabled" to "Status". While this addresses the confusion mentioned in the PR description, note that there is already an "Integration status" column (mapped to colType Status). Having both a "Status" column and an "Integration status" column may still cause confusion.

Consider using "Connector Status" or "Enabled Status" to disambiguate from "Integration status" which refers to the connector's connection state.

---

Pre-existing Issues (Not introduced by this PR)

• The PR notes a known issue with tooltip width constraints affecting copy icon alignment. This is acknowledged and acceptable as a follow-up fix.

---

Verdict: ✅ Minor suggestions only — The core functionality is sound. Consider addressing the inconsistent tooltip adoption for better UX consistency.

[XyneSpaces]

PR Review: UI Bug Fixes (#4740)

Verdict: ✅ Approve with suggestions

‼️ 0 critical · ⚠️ 2 warnings · 💡 7 suggestions

---

Warnings (:warning:)

1. Event Bubbling Risk in ToolTip Implementation

• File: src/screens/Helpers/HelperComponents.res
• Issue: The ToolTip wrapper is placed around clickable/copyable elements in CopyTextCustomComp and EllipsisText. If parent elements also have click handlers, this may cause double-trigger issues.
• Fix: Verify the ToolTip component stops event propagation internally, or add stopPropagation to the trigger element.

2. Column Header Change Blast Radius

• Files: All *Entity.res files with Disabled column
• Issue: Changing header from "Disabled" to "Status" across 10+ files affects UI labels. While the key remains unchanged, verify:
  • No saved views or filter presets reference the old display label
  • User documentation reflects this change
  • CSV export headers are unaffected (they typically use keys, not labels)

---

Suggestions (:bulb:)

3. Code Duplication in Conditional Rendering

• File: src/screens/Helpers/HelperComponents.res (CopyTextCustomComp)
• Issue: The conditional showTooltip ? <ToolTip ...> : <div> duplicates the inner text element.
• Fix:

let content = <div className=customTextCss> {val->React.string} </div>
{showTooltip ? <ToolTip description=val toolTipFor=content toolTipPosition=Top /> : content}

4. Truncate Protection for API Key Names

• File: src/screens/Developer/APIKeys/KeyManagementHelper.res
• Issue: whitespace-nowrap prevents wrapping but may cause overflow.
• Fix: Consider adding max-w-xs truncate to prevent layout breakage on very long names.

5. Extract Connector Label Display Helper

• File: src/screens/Transaction/Order/OrderEntity.res
• Issue: The connector label display pattern using isNonEmptyString check could be reused elsewhere.
• Fix: Extract to shared helper:

let getDisplayLabel = (label: option<string>) => {
  let value = label->Option.getOr("")
  value->isNonEmptyString ? value : "Not Available"
}

6. Description End Value Increase

• File: src/screens/Transaction/Order/OrderEntity.res
• Good: Changing endValue from 5 to 15 for Description improves readability, and the EllipsisText tooltip shows full value — good UX pairing.

7-9. Naming and Consistency Checks

• showTooltip prop naming follows camelCase convention correctly
• Explicit showTooltip={true} passing is good practice
• `

[Muditbhatia12]

can a video or screenshot be added for this fix?