Skip to content

fix: address UI bugs from issue #4740 #4970

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kanikabansal08 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

fix: address UI bugs from issue #4740 #4970

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6bb733d
fix: address UI bugs from issue #4740
kanikabansal08 Jun 10, 2026
d143210
fix: ui
kanikabansal08 Jun 15, 2026
0fc1651
fix: ui
kanikabansal08 Jun 15, 2026
5b769f1
Merge branch 'main' into fix/issue-4740-ui-bugs
kanikabansal08 Jun 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/Interface/ConnectorInterface/ConnectorInterfaceTableEntity.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ let getHeading = colType => {
switch colType {
| Name => Table.makeHeaderInfo(~key="connector_name", ~title="Processor")
| Status => Table.makeHeaderInfo(~key="status", ~title="Integration status")
| Disabled => Table.makeHeaderInfo(~key="disabled", ~title="Disabled")
| Disabled => Table.makeHeaderInfo(~key="disabled", ~title="Status")
| Actions => Table.makeHeaderInfo(~key="actions", ~title="")
| MerchantConnectorId =>
Table.makeHeaderInfo(~key="merchant_connector_id", ~title="Merchant Connector ID")
Expand Down
2 changes: 1 addition & 1 deletion src/Interface/PaymentInterface/PaymentInterfaceUtils/PaymentInterfaceUtilsV1.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ let mapDictToPaymentPayload: dict<JSON.t> => order_v1 = dict => {
attempts: dict->getArrayFromDict("attempts", [])->JSON.Encode.array->getAttempts,
merchant_order_reference_id: dict->getString("merchant_order_reference_id", ""),
attempt_count: dict->getInt("attempt_count", 0),
connector_label: dict->getString("connector_label", "NA"),
connector_label: dict->getString("connector_label", ""),
split_payments: dict->getDictfromDict("split_payments"),
extended_auth_last_applied_at: dict->getString("extended_auth_last_applied_at", ""),
extended_auth_applied: dict->getBool("extended_auth_applied", false),
Expand Down
2 changes: 1 addition & 1 deletion ...creens/RecoveryProcessors/RecoveryProcessorsPaymentProcessors/RecoveryConnectorEntity.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ let getHeading = colType => {
switch colType {
| Name => Table.makeHeaderInfo(~key="connector_name", ~title="Processor")
| Status => Table.makeHeaderInfo(~key="status", ~title="Integration status")
| Disabled => Table.makeHeaderInfo(~key="disabled", ~title="Disabled")
| Disabled => Table.makeHeaderInfo(~key="disabled", ~title="Status")
| Actions => Table.makeHeaderInfo(~key="actions", ~title="")
| ProfileId => Table.makeHeaderInfo(~key="profile_id", ~title="Profile ID")
| MerchantConnectorId =>
Expand Down
2 changes: 1 addition & 1 deletion src/Vault/VaultScreens/VaultConnectors/VaultConnectorEntity.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ let getHeading = colType => {
switch colType {
| Name => Table.makeHeaderInfo(~key="connector_name", ~title="Processor")
| Status => Table.makeHeaderInfo(~key="status", ~title="Integration status")
| Disabled => Table.makeHeaderInfo(~key="disabled", ~title="Disabled")
| Disabled => Table.makeHeaderInfo(~key="disabled", ~title="Status")
| Actions => Table.makeHeaderInfo(~key="actions", ~title="")
| ProfileId => Table.makeHeaderInfo(~key="profile_id", ~title="Profile ID")
| MerchantConnectorId =>
Expand Down
2 changes: 1 addition & 1 deletion src/screens/Connectors/BillingProcessor/BillingProcessorEntity.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ let getHeading = colType => {
| Name => Table.makeHeaderInfo(~key="connector_name", ~title="Processor")
| TestMode => Table.makeHeaderInfo(~key="test_mode", ~title="Test Mode")
| Status => Table.makeHeaderInfo(~key="status", ~title="Integration status")
| Disabled => Table.makeHeaderInfo(~key="disabled", ~title="Disabled")
| Disabled => Table.makeHeaderInfo(~key="disabled", ~title="Status")
| ConnectorLabel => Table.makeHeaderInfo(~key="connector_label", ~title="Connector Label")
| MerchantConnectorId =>
Table.makeHeaderInfo(~key="merchant_connector_id", ~title="Merchant Connector ID")
Expand Down
2 changes: 1 addition & 1 deletion src/screens/Connectors/PMAuthenticationProcessor/PMAuthenticationTableEntity.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ let getHeading = colType => {
| Name => Table.makeHeaderInfo(~key="connector_name", ~title="Processor")
| TestMode => Table.makeHeaderInfo(~key="test_mode", ~title="Test Mode")
| Status => Table.makeHeaderInfo(~key="status", ~title="Integration status")
| Disabled => Table.makeHeaderInfo(~key="disabled", ~title="Disabled")
| Disabled => Table.makeHeaderInfo(~key="disabled", ~title="Status")
| ConnectorLabel => Table.makeHeaderInfo(~key="connector_label", ~title="Connector Label")
| MerchantConnectorId =>
Table.makeHeaderInfo(~key="merchant_connector_id", ~title="Merchant Connector ID")
Expand Down
6 changes: 4 additions & 2 deletions src/screens/Connectors/PaymentProcessor/ConnectorTableUtils.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ let getHeading = colType => {
| Name => Table.makeHeaderInfo(~key="connector_name", ~title="Processor")
| TestMode => Table.makeHeaderInfo(~key="test_mode", ~title="Test Mode")
| Status => Table.makeHeaderInfo(~key="status", ~title="Integration status")
| Disabled => Table.makeHeaderInfo(~key="disabled", ~title="Disabled")
| Disabled => Table.makeHeaderInfo(~key="disabled", ~title="Status")
| Actions => Table.makeHeaderInfo(~key="actions", ~title="")
| MerchantConnectorId =>
Table.makeHeaderInfo(~key="merchant_connector_id", ~title="Merchant Connector ID")
Expand Down Expand Up @@ -104,7 +104,9 @@ let getTableCell = (~connectorType: ConnectorTypes.connector=Processor) => {
| MerchantConnectorId =>
CustomCell(
<HelperComponents.CopyTextCustomComp
customTextCss="w-36 truncate whitespace-nowrap" displayValue=Some(connector.id)
customTextCss="w-36 truncate whitespace-nowrap"
displayValue=Some(connector.id)
showTooltip=true
/>,
"",
)
Expand Down
2 changes: 1 addition & 1 deletion src/screens/Connectors/PayoutProcessor/PayoutProcessorTableEntity.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ let getHeading = colType => {
| Name => Table.makeHeaderInfo(~key="connector_name", ~title="Processor")
| TestMode => Table.makeHeaderInfo(~key="test_mode", ~title="Test Mode")
| Status => Table.makeHeaderInfo(~key="status", ~title="Integration status")
| Disabled => Table.makeHeaderInfo(~key="disabled", ~title="Disabled")
| Disabled => Table.makeHeaderInfo(~key="disabled", ~title="Status")
| Actions => Table.makeHeaderInfo(~key="actions", ~title="")
| MerchantConnectorId =>
Table.makeHeaderInfo(~key="merchant_connector_id", ~title="Merchant Connector ID")
Expand Down
2 changes: 1 addition & 1 deletion src/screens/Connectors/SurchargeProcessor/SurchargeProcessorEntity.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ let getHeading = colType => {
| Name => Table.makeHeaderInfo(~key="connector_name", ~title="Processor")
| TestMode => Table.makeHeaderInfo(~key="test_mode", ~title="Test Mode")
| Status => Table.makeHeaderInfo(~key="status", ~title="Integration status")
| Disabled => Table.makeHeaderInfo(~key="disabled", ~title="Disabled")
| Disabled => Table.makeHeaderInfo(~key="disabled", ~title="Status")
| ConnectorLabel => Table.makeHeaderInfo(~key="connector_label", ~title="Connector Label")
| MerchantConnectorId =>
Table.makeHeaderInfo(~key="merchant_connector_id", ~title="Merchant Connector ID")
Expand Down
2 changes: 1 addition & 1 deletion src/screens/Connectors/TaxProcessor/TaxProcessorTableEntity.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ let getHeading = colType => {
| Name => Table.makeHeaderInfo(~key="connector_name", ~title="Processor")
| TestMode => Table.makeHeaderInfo(~key="test_mode", ~title="Test Mode")
| Status => Table.makeHeaderInfo(~key="status", ~title="Integration status")
| Disabled => Table.makeHeaderInfo(~key="disabled", ~title="Disabled")
| Disabled => Table.makeHeaderInfo(~key="disabled", ~title="Status")
| ConnectorLabel => Table.makeHeaderInfo(~key="connector_label", ~title="Connector Label")
| MerchantConnectorId =>
Table.makeHeaderInfo(~key="merchant_connector_id", ~title="Merchant Connector ID")
Expand Down
2 changes: 1 addition & 1 deletion src/screens/Connectors/ThreeDsProcessors/ThreeDsTableEntity.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ let getHeading = colType => {
| Name => Table.makeHeaderInfo(~key="connector_name", ~title="Processor")
| TestMode => Table.makeHeaderInfo(~key="test_mode", ~title="Test Mode")
| Status => Table.makeHeaderInfo(~key="status", ~title="Integration status")
| Disabled => Table.makeHeaderInfo(~key="disabled", ~title="Disabled")
| Disabled => Table.makeHeaderInfo(~key="disabled", ~title="Status")
| ConnectorLabel => Table.makeHeaderInfo(~key="connector_label", ~title="Connector Label")
| MerchantConnectorId =>
Table.makeHeaderInfo(~key="merchant_connector_id", ~title="Merchant Connector ID")
Expand Down
2 changes: 1 addition & 1 deletion src/screens/Connectors/VaultProcessors/VaultProcessorsEntity.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ let getHeading = colType => {
| Name => Table.makeHeaderInfo(~key="connector_name", ~title="Processor")
| TestMode => Table.makeHeaderInfo(~key="test_mode", ~title="Test Mode")
| Status => Table.makeHeaderInfo(~key="status", ~title="Integration status")
| Disabled => Table.makeHeaderInfo(~key="disabled", ~title="Disabled")
| Disabled => Table.makeHeaderInfo(~key="disabled", ~title="Status")
| ConnectorLabel => Table.makeHeaderInfo(~key="connector_label", ~title="Connector Label")
| MerchantConnectorId =>
Table.makeHeaderInfo(~key="merchant_connector_id", ~title="Merchant Connector ID")
Expand Down
1 change: 1 addition & 0 deletions src/screens/Customers/CustomersEntity.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ let getCell = (customersData, colType): Table.cell => {
customTextCss="w-36 truncate whitespace-nowrap"
displayValue={Some(customersData.customer_id)}
copyValue={Some(customersData.customer_id)}
showTooltip=true
/>,
"",
)
Expand Down
3 changes: 2 additions & 1 deletion src/screens/Developer/APIKeys/KeyManagementHelper.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,7 +360,8 @@ module ApiKeysTable = {
let appendString = str => str->String.concat(String.repeat("*", 10))

switch colType {
| Name => Text(item.name)
| Name =>
Table.CustomCell(<div className="whitespace-nowrap"> {item.name->React.string} </div>, "")
| Description => Text(item.description)
| Prefix => Text(item.prefix->appendString)
| Created => Date(item.created)
Expand Down
35 changes: 24 additions & 11 deletions src/screens/Helpers/HelperComponents.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ module CopyTextCustomComp = {
~customIcon="nd-copy",
~customIconSize=15,
~customComponent=None,
~showTooltip=false,
) => {
let showToast = ToastState.useShowToast()

Expand All @@ -37,7 +38,13 @@ module CopyTextCustomComp = {
onClick={ev => {
onCopyClick(ev)
}}>
<div className=customTextCss> {val->React.string} </div>
{showTooltip
? <ToolTip
description=val
toolTipFor={<div className=customTextCss> {val->React.string} </div>}
toolTipPosition=ToolTip.Top
/>
: <div className=customTextCss> {val->React.string} </div>}
{switch customComponent {
| Some(element) => element
| None => <Icon size={customIconSize} name={customIcon} className={`${customIconCss} `} />
Expand Down Expand Up @@ -83,21 +90,27 @@ module EllipsisText = {
showToast(~message="Copied to Clipboard!", ~toastType=ToastSuccess)
}

let isTruncated = displayValue->String.length > endValue

<div className="flex text-nowrap gap-2">
<RenderIf condition={isTextVisible}>
<div className={customTextStyle}> {displayValue->React.string} </div>
</RenderIf>
<RenderIf condition={!isTextVisible && displayValue->isNonEmptyString}>
<div className="flex gap-1">
<p className={customTextStyle}>
{`${displayValue->String.slice(~start=0, ~end=endValue)}`->React.string}
</p>
<RenderIf condition={displayValue->String.length > endValue}>
<span className={customEllipsisStyle} onClick={ev => handleClick(ev)}>
{"..."->React.string}
</span>
</RenderIf>
</div>
<ToolTip
description={isTruncated ? displayValue : ""}
toolTipFor={<div className="flex gap-1">
<p className={customTextStyle}>
{`${displayValue->String.slice(~start=0, ~end=endValue)}`->React.string}
</p>
<RenderIf condition={isTruncated}>
<span className={customEllipsisStyle} onClick={ev => handleClick(ev)}>
{"..."->React.string}
</span>
</RenderIf>
</div>}
toolTipPosition=ToolTip.Top
/>

@Muditbhatia12 Muditbhatia12 Jun 16, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can a video or screenshot be added for this fix?

</RenderIf>
<RenderIf condition={showCopy}>
<Icon
Expand Down
17 changes: 15 additions & 2 deletions src/screens/Transaction/Order/OrderEntity.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -599,6 +599,7 @@ let getCellForSummary = (order, summaryColType): Table.cell => {
<HelperComponents.CopyTextCustomComp
customTextCss="w-36 truncate whitespace-nowrap"
displayValue=Some(order.connector_payment_id)
showTooltip=true
/>,
"",
)
Expand All @@ -620,7 +621,10 @@ let getCellForAboutPayment = (order, aboutPaymentColType: aboutPaymentColType):
| PaymentMethodType => Text(order.payment_method_type)
| Refunds => Text(order.refunds->Array.length > 0 ? "Yes" : "No")
| AuthenticationType => Text(order.authentication_type)
| ConnectorLabel => Text(order.connector_label->Option.getOr(""))
| ConnectorLabel => {
let connectorLabel = order.connector_label->Option.getOr("")
Text(connectorLabel->isNonEmptyString ? connectorLabel : "Not Available")
}
| CardBrand => Text(order.card_brand->Option.getOr(""))
| ProfileId => Text(order.profile_id)
| ProfileName =>
Expand Down Expand Up @@ -766,7 +770,15 @@ let getCell = (order, colType: colType, merchantId, orgId): Table.cell => {
| Modified => Date(order.modified_at)
| Currency => Text(order.currency)
| CustomerId => Text(order.customer_id)
| Description => CustomCell(<EllipsisText displayValue={order.description} endValue={5} />, "")
| Description =>
CustomCell(
<CopyTextCustomComp
customTextCss="w-28 truncate whitespace-nowrap"
displayValue=Some(order.description)
showTooltip=true
/>,
"",
)
| MandateId => Text(order.mandate_id->Option.getOr(""))
| MandateData => Text(order.mandate_data->Option.getOr(""))
| SetupFutureUsage => Text(order.setup_future_usage)
Expand Down Expand Up @@ -795,6 +807,7 @@ let getCell = (order, colType: colType, merchantId, orgId): Table.cell => {
<CopyTextCustomComp
customTextCss="w-36 truncate whitespace-nowrap"
displayValue=Some(order.connector_payment_id)
showTooltip=true
/>,
"",
)
Expand Down
2 changes: 1 addition & 1 deletion src/screens/Transaction/Order/Orders.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@ let make = (~previewOnly=false) => {
</div>
</div>
<RenderIf condition={transactionView}>
<div className="grid lg:grid-cols-5 md:grid-cols-4 sm:grid-cols-3 grid-cols-2 gap-6 mb-8">
<div className="grid lg:grid-cols-6 md:grid-cols-3 sm:grid-cols-3 grid-cols-2 gap-6 mb-8">
<TransactionView entity=TransactionViewTypes.Orders version />
</div>
</RenderIf>
Expand Down
Loading