fix: Search box issues in "Connectors" pages (#1942)

juspay · Dec 17, 2024 · 3690346 · 3690346
1 parent c548adf
commit 3690346
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 10 deletions.
diff --git a/src/screens/Connectors/ConnectorList.res b/src/screens/Connectors/ConnectorList.res
@@ -47,7 +47,8 @@ let make = (~isPayoutFlow=false) => {
         switch Nullable.toOption(obj) {
         | Some(obj) =>
           isContainingStringLowercase(obj.connector_name, searchText) ||
-          isContainingStringLowercase(obj.profile_id, searchText)
+          isContainingStringLowercase(obj.merchant_connector_id, searchText) ||
+          isContainingStringLowercase(obj.connector_label, searchText)
         | None => false
         }
       })
@@ -98,7 +99,7 @@ let make = (~isPayoutFlow=false) => {
             />
           </div>
           <RenderIf condition={!isMobileView}>
-            <div className="h-30 md:w-[37rem] flex justify-end hidden laptop:block">
+            <div className="h-30 md:w-[37rem] justify-end hidden laptop:block">
               <img alt="dummy-connector" src="/assets/DummyConnectorImage.svg" />
             </div>
           </RenderIf>
@@ -128,8 +129,8 @@ let make = (~isPayoutFlow=false) => {
             filters={<TableSearchFilter
               data={previouslyConnectedData}
               filterLogic
-              placeholder="Search Processor or Country or Business Label"
-              customSearchBarWrapperWidth="w-full lg:w-1/3"
+              placeholder="Search Processor or Merchant Connector Id or Connector Label"
+              customSearchBarWrapperWidth="w-full lg:w-1/2"
               customInputBoxWidth="w-full"
               searchVal=searchText
               setSearchVal=setSearchText

diff --git a/src/screens/FraudAndRisk/FRMSelect.res b/src/screens/FraudAndRisk/FRMSelect.res
@@ -145,7 +145,10 @@ let make = () => {
     let filteredList = if searchText->isNonEmptyString {
       arr->Array.filter((frmPlayer: Nullable.t<ConnectorTypes.connectorPayload>) => {
         switch Nullable.toOption(frmPlayer) {
-        | Some(frmPlayer) => isContainingStringLowercase(frmPlayer.connector_name, searchText)
+        | Some(frmPlayer) =>
+          isContainingStringLowercase(frmPlayer.connector_name, searchText) ||
+          isContainingStringLowercase(frmPlayer.merchant_connector_id, searchText) ||
+          isContainingStringLowercase(frmPlayer.connector_label, searchText)
         | None => false
         }
       })
@@ -169,8 +172,8 @@ let make = () => {
           filters={<TableSearchFilter
             data={previouslyConnectedData}
             filterLogic
-            placeholder="Search FRM Player Name"
-            customSearchBarWrapperWidth="w-full lg:w-1/3"
+            placeholder="Search Processor or Merchant Connector Id or Connector Label"
+            customSearchBarWrapperWidth="w-full lg:w-1/2"
             customInputBoxWidth="w-full"
             searchVal=searchText
             setSearchVal=setSearchText

diff --git a/src/screens/PMAuthenticationProcessor/PMAuthenticationConnectorList.res b/src/screens/PMAuthenticationProcessor/PMAuthenticationConnectorList.res
@@ -5,6 +5,27 @@ let make = () => {
   let (configuredConnectors, setConfiguredConnectors) = React.useState(_ => [])
   let (offset, setOffset) = React.useState(_ => 0)
   let {userHasAccess} = GroupACLHooks.useUserGroupACLHook()
+  let (searchText, setSearchText) = React.useState(_ => "")
+  let (filteredConnectorData, setFilteredConnectorData) = React.useState(_ => [])
+
+  let filterLogic = ReactDebounce.useDebounced(ob => {
+    open LogicUtils
+    let (searchText, arr) = ob
+    let filteredList = if searchText->isNonEmptyString {
+      arr->Array.filter((obj: Nullable.t<ConnectorTypes.connectorPayload>) => {
+        switch Nullable.toOption(obj) {
+        | Some(obj) =>
+          isContainingStringLowercase(obj.connector_name, searchText) ||
+          isContainingStringLowercase(obj.merchant_connector_id, searchText) ||
+          isContainingStringLowercase(obj.connector_label, searchText)
+        | None => false
+        }
+      })
+    } else {
+      arr
+    }
+    setFilteredConnectorData(_ => filteredList)
+  }, ~wait=200)
 
   let getConnectorList = async _ => {
     try {
@@ -17,6 +38,7 @@ let make = () => {
         )
 
       setConfiguredConnectors(_ => connectorsList)
+      setFilteredConnectorData(_ => connectorsList->Array.map(Nullable.make))
       setScreenState(_ => Success)
     } catch {
     | _ => setScreenState(_ => PageLoaderWrapper.Error("Failed to fetch"))
@@ -39,12 +61,21 @@ let make = () => {
           <LoadedTable
             title="Connected Processors"
             actualData={configuredConnectors->Array.map(Nullable.make)}
-            totalResults={configuredConnectors->Array.map(Nullable.make)->Array.length}
+            totalResults={filteredConnectorData->Array.length}
             resultsPerPage=20
             entity={PMAuthenticationTableEntity.pmAuthenticationEntity(
               `pm-authentication-processor`,
               ~authorization=userHasAccess(~groupAccess=ConnectorsManage),
             )}
+            filters={<TableSearchFilter
+              data={configuredConnectors->Array.map(Nullable.make)}
+              filterLogic
+              placeholder="Search Processor or Merchant Connector Id or Connector Label"
+              customSearchBarWrapperWidth="w-full lg:w-1/2"
+              customInputBoxWidth="w-full"
+              searchVal=searchText
+              setSearchVal=setSearchText
+            />}
             offset
             setOffset
             currrentFetchCount={configuredConnectors->Array.map(Nullable.make)->Array.length}

diff --git a/src/screens/TaxProcessor/TaxProcessorList.res b/src/screens/TaxProcessor/TaxProcessorList.res
@@ -5,6 +5,27 @@ let make = () => {
   let (configuredConnectors, setConfiguredConnectors) = React.useState(_ => [])
   let (offset, setOffset) = React.useState(_ => 0)
   let {userHasAccess} = GroupACLHooks.useUserGroupACLHook()
+  let (searchText, setSearchText) = React.useState(_ => "")
+  let (filteredConnectorData, setFilteredConnectorData) = React.useState(_ => [])
+
+  let filterLogic = ReactDebounce.useDebounced(ob => {
+    open LogicUtils
+    let (searchText, arr) = ob
+    let filteredList = if searchText->isNonEmptyString {
+      arr->Array.filter((obj: Nullable.t<ConnectorTypes.connectorPayload>) => {
+        switch Nullable.toOption(obj) {
+        | Some(obj) =>
+          isContainingStringLowercase(obj.connector_name, searchText) ||
+          isContainingStringLowercase(obj.merchant_connector_id, searchText) ||
+          isContainingStringLowercase(obj.connector_label, searchText)
+        | None => false
+        }
+      })
+    } else {
+      arr
+    }
+    setFilteredConnectorData(_ => filteredList)
+  }, ~wait=200)
 
   let getConnectorList = async _ => {
     try {
@@ -17,6 +38,7 @@ let make = () => {
         )
 
       setConfiguredConnectors(_ => connectorsList)
+      setFilteredConnectorData(_ => connectorsList->Array.map(Nullable.make))
       setScreenState(_ => Success)
     } catch {
     | _ => setScreenState(_ => PageLoaderWrapper.Error("Failed to fetch"))
@@ -38,12 +60,21 @@ let make = () => {
           <LoadedTable
             title="Connected Processors"
             actualData={configuredConnectors->Array.map(Nullable.make)}
-            totalResults={configuredConnectors->Array.map(Nullable.make)->Array.length}
+            totalResults={filteredConnectorData->Array.length}
             resultsPerPage=20
             entity={TaxProcessorTableEntity.taxProcessorEntity(
               `tax-processor`,
               ~authorization=userHasAccess(~groupAccess=ConnectorsManage),
             )}
+            filters={<TableSearchFilter
+              data={configuredConnectors->Array.map(Nullable.make)}
+              filterLogic
+              placeholder="Search Processor or Merchant Connector Id or Connector Label"
+              customSearchBarWrapperWidth="w-full lg:w-1/2"
+              customInputBoxWidth="w-full"
+              searchVal=searchText
+              setSearchVal=setSearchText
+            />}
             offset
             setOffset
             currrentFetchCount={configuredConnectors->Array.map(Nullable.make)->Array.length}

diff --git a/src/screens/ThreeDsProcessors/ThreeDsConnectorList.res b/src/screens/ThreeDsProcessors/ThreeDsConnectorList.res
@@ -6,6 +6,27 @@ let make = () => {
   let (configuredConnectors, setConfiguredConnectors) = React.useState(_ => [])
   let (offset, setOffset) = React.useState(_ => 0)
   let {userHasAccess} = GroupACLHooks.useUserGroupACLHook()
+  let (searchText, setSearchText) = React.useState(_ => "")
+  let (filteredConnectorData, setFilteredConnectorData) = React.useState(_ => [])
+
+  let filterLogic = ReactDebounce.useDebounced(ob => {
+    open LogicUtils
+    let (searchText, arr) = ob
+    let filteredList = if searchText->isNonEmptyString {
+      arr->Array.filter((obj: Nullable.t<ConnectorTypes.connectorPayload>) => {
+        switch Nullable.toOption(obj) {
+        | Some(obj) =>
+          isContainingStringLowercase(obj.connector_name, searchText) ||
+          isContainingStringLowercase(obj.merchant_connector_id, searchText) ||
+          isContainingStringLowercase(obj.connector_label, searchText)
+        | None => false
+        }
+      })
+    } else {
+      arr
+    }
+    setFilteredConnectorData(_ => filteredList)
+  }, ~wait=200)
 
   let getConnectorList = async _ => {
     try {
@@ -19,6 +40,7 @@ let make = () => {
         )
 
       setConfiguredConnectors(_ => connectorsList)
+      setFilteredConnectorData(_ => connectorsList->Array.map(Nullable.make))
       setScreenState(_ => Success)
     } catch {
     | _ => setScreenState(_ => PageLoaderWrapper.Error("Failed to fetch"))
@@ -40,12 +62,21 @@ let make = () => {
           <LoadedTable
             title="Connected Processors"
             actualData={configuredConnectors->Array.map(Nullable.make)}
-            totalResults={configuredConnectors->Array.map(Nullable.make)->Array.length}
+            totalResults={filteredConnectorData->Array.map(Nullable.make)->Array.length}
             resultsPerPage=20
             entity={ThreeDsTableEntity.threeDsAuthenticatorEntity(
               `3ds-authenticators`,
               ~authorization=userHasAccess(~groupAccess=ConnectorsManage),
             )}
+            filters={<TableSearchFilter
+              data={configuredConnectors->Array.map(Nullable.make)}
+              filterLogic
+              placeholder="Search Processor or Merchant Connector Id or Connector Label"
+              customSearchBarWrapperWidth="w-full lg:w-1/2"
+              customInputBoxWidth="w-full"
+              searchVal={searchText}
+              setSearchVal={setSearchText}
+            />}
             offset
             setOffset
             currrentFetchCount={configuredConnectors->Array.map(Nullable.make)->Array.length}