refactor: made the customize columns to appear in Portal for same line

juspay · Jan 23, 2024 · 003e483 · 003e483
1 parent d587598
commit 003e483
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 36 deletions.
diff --git a/src/components/LoadedTable.res b/src/components/LoadedTable.res
@@ -894,7 +894,6 @@ let make = (
       | None =>
         <UIUtils.RenderIf condition={searchFields->Array.length > 0}>
           <AdvancedSearchModal searchFields url=searchUrl entity />
-          // <PaymentLinkAdvancedSearch searchFields url=searchUrl />
         </UIUtils.RenderIf>
       }}
       <DesktopView>
@@ -930,7 +929,6 @@ let make = (
     <div className="w-full">
       <div className=addDataAttributesClass style={ReactDOMStyle.make(~zIndex="2", ())}>
         //removed "sticky" -> to be tested with master
-
         <div
           className={`flex flex-row justify-between items-center` ++ (
             hideTitle ? "" : ` mt-4 mb-2`

diff --git a/src/components/LoadedTableWithCustomColumns.res b/src/components/LoadedTableWithCustomColumns.res
@@ -86,19 +86,18 @@ let make = (
       {chooseCols}
     </div>
 
-  let customizeColumn = {
-    if !hideRightTitleElement {
-      <Button
-        text="Customize Columns"
-        leftIcon=Button.CustomIcon(<Icon name="vertical_slider" size=15 className="mr-1" />)
-        buttonType=SecondaryFilled
-        buttonSize=Small
-        onClick={_ => setShowColumnSelector(_ => true)}
-      />
-    } else {
-      React.null
-    }
-  }
+  let customizeColumn =
+    <UIUtils.RenderIf condition={!hideRightTitleElement}>
+      <Portal to={`${title}CustomizeColumn`}>
+        <Button
+          text="Customize Columns"
+          leftIcon=Button.CustomIcon(<Icon name="vertical_slider" size=15 className="mr-1" />)
+          buttonType=SecondaryFilled
+          buttonSize=Small
+          onClick={_ => setShowColumnSelector(_ => true)}
+        />
+      </Portal>
+    </UIUtils.RenderIf>
 
   let rightTitleElement = !previewOnly ? customizeColumn : React.null
 

diff --git a/src/components/RemoteFilter.res b/src/components/RemoteFilter.res
@@ -911,7 +911,7 @@ let make = (
       </UIUtils.RenderIf>
     </>
   let fieldWrapperClass = None
-  <div className="rounded-lg">
+  <>
     <Form onSubmit initialValues=initialValueJson>
       <AutoSubmitter showModal autoApply submit=onSubmit defaultFilterKeys />
       {<AddDataAttributes attributes=[("data-filter", "remoteFilters")]>
@@ -1127,5 +1127,5 @@ let make = (
         </Form>
       </TableFilterSectionContext>
     </LabelVisibilityContext>
-  </div>
+  </>
 }
diff --git a/src/screens/HyperSwitch/Order/OrderUIUtils.res b/src/screens/HyperSwitch/Order/OrderUIUtils.res
@@ -61,7 +61,6 @@ module GenerateSampleDataButton = {
       <Button
         buttonType={Secondary}
         text="Generate Sample Data"
-        customButtonStyle="!px-6 text-fs-13"
         onClick={_ => generateSampleData()->ignore}
         leftIcon={CustomIcon(<Icon name="plus" size=13 />)}
       />

diff --git a/src/screens/HyperSwitch/Order/Orders.res b/src/screens/HyperSwitch/Order/Orders.res
@@ -106,13 +106,18 @@ let make = (~previewOnly=false) => {
       <PageUtils.PageHeading
         title="Payment Operations" subTitle="View and manage all payments" customTitleStyle
       />
-      <div className="flex w-full justify-end pb-3 gap-3">
-        <GenerateSampleDataButton previewOnly getOrdersList={fetchOrders} />
-        <UIUtils.RenderIf condition={generateReport}>
-          <GenerateReport entityName={PAYMENT_REPORT} />
+      <div className="flex">
+        <UIUtils.RenderIf condition={!previewOnly}>
+          <div className="flex-1"> {filtersUI} </div>
         </UIUtils.RenderIf>
+        <div className="flex justify-end gap-3">
+          <GenerateSampleDataButton previewOnly getOrdersList={fetchOrders} />
+          <UIUtils.RenderIf condition={generateReport}>
+            <GenerateReport entityName={PAYMENT_REPORT} />
+          </UIUtils.RenderIf>
+          <PortalCapture key={`OrdersCustomizeColumn`} name={`OrdersCustomizeColumn`} />
+        </div>
       </div>
-      <UIUtils.RenderIf condition={!previewOnly}> {filtersUI} </UIUtils.RenderIf>
       <PageLoaderWrapper screenState customUI>
         <LoadedTableWithCustomColumns
           title="Orders"

diff --git a/src/screens/HyperSwitch/Refunds/Refund.res b/src/screens/HyperSwitch/Refunds/Refund.res
@@ -53,23 +53,26 @@ let make = () => {
   <ErrorBoundary>
     <div className="min-h-[50vh]">
       <PageUtils.PageHeading title="Refunds" subTitle="View and manage all refunds" />
-      <div className="flex w-full justify-end pb-3 gap-3">
+      <div className="flex justify-between gap-3">
+        <div className="flex-1">
+          <RemoteTableFilters
+            placeholder="Search payment id or refund id"
+            setSearchVal=setSearchText
+            searchVal=searchText
+            filterUrl={`${HSwitchGlobalVars.hyperSwitchApiPrefix}/refunds/filter`}
+            setFilters
+            endTimeFilterKey
+            startTimeFilterKey
+            initialFilters
+            initialFixedFilter
+            setOffset
+          />
+        </div>
         <UIUtils.RenderIf condition={generateReport}>
           <GenerateReport entityName={REFUND_REPORT} />
         </UIUtils.RenderIf>
+        <PortalCapture key={`RefundsCustomizeColumn`} name={`RefundsCustomizeColumn`} />
       </div>
-      <RemoteTableFilters
-        placeholder="Search payment id or refund id"
-        setSearchVal=setSearchText
-        searchVal=searchText
-        filterUrl={`${HSwitchGlobalVars.hyperSwitchApiPrefix}/refunds/filter`}
-        setFilters
-        endTimeFilterKey
-        startTimeFilterKey
-        initialFilters
-        initialFixedFilter
-        setOffset
-      />
       <PageLoaderWrapper screenState customUI>
         <LoadedTableWithCustomColumns
           hideTitle=true