feat: made the customize columns to appear in Portal for same line (#308

) Co-authored-by: Pritish Budhiraja <[email protected]>
juspay · Jan 30, 2024 · ea21b97 · ea21b97
1 parent 089c051
commit ea21b97
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 90 deletions.
diff --git a/src/components/Button.res b/src/components/Button.res
@@ -420,13 +420,7 @@ let make = (
     }
   }
 
-  let heightClass = customHeightClass->Option.getOr({
-    switch buttonSize {
-    | XSmall => "h-fit"
-    | Small => "h-fit"
-    | Medium | Large => "h-fit"
-    }
-  })
+  let heightClass = customHeightClass->Option.getOr("h-fit")
 
   let cursorType = switch buttonState {
   | Loading => "cursor-wait"
@@ -436,7 +430,7 @@ let make = (
 
   let paddingClass = customPaddingClass->Option.getOr(
     switch buttonSize {
-    | XSmall => "py-3 px-4"
+    | XSmall => "p-2"
     | Small =>
       switch buttonType {
       | Pagination => "py-3 px-4 mr-1"
@@ -487,13 +481,6 @@ let make = (
   | Large => ""
   }
 
-  let eulerIconPadding = switch buttonSize {
-  | XSmall
-  | Small => "gap-1"
-  | Medium
-  | Large => ""
-  }
-
   let iconMargin = customIconMargin->Option.getOr(
     switch buttonSize {
     | XSmall
@@ -728,7 +715,7 @@ let make = (
             />
           </span>
         | Euler(iconName) =>
-          <span className={`flex items-center ${iconColor} ${iconMargin} ${eulerIconPadding}`}>
+          <span className={`flex items-center ${iconColor} ${iconMargin}`}>
             <Icon className={`align-middle ${strokeColor}`} size=iconSize name=iconName />
           </span>
         | CustomIcon(element) =>
@@ -791,7 +778,7 @@ let make = (
           <Icon className={`align-middle ${strokeColor}`} size=iconSize name=iconName />
         </span>
       | Euler(iconName) =>
-        <span className={`flex items-center ${iconMargin} ${eulerIconPadding}`}>
+        <span className={`flex items-center ${iconMargin}`}>
           <Icon className={`align-middle ${strokeColor}`} size=iconSize name=iconName />
         </span>
       | CustomIcon(element) =>

diff --git a/src/components/DateRangePicker.res b/src/components/DateRangePicker.res
@@ -829,7 +829,7 @@ module Base = {
               text={isMobileView && textHideInMobileView ? "" : buttonText}
               leftIcon={FontAwesome(calendarIcon)}
               rightIcon={CustomIcon(iconElement)}
-              buttonSize=Small
+              buttonSize=XSmall
               isDropdownOpen=isDropdownExpandedActual
               onClick={_ => handleDropdownClick()}
               iconBorderColor={customborderCSS}

diff --git a/src/components/DynamicTable.res b/src/components/DynamicTable.res
@@ -473,7 +473,7 @@ let make = (
           text="Customize Columns"
           leftIcon=Button.CustomIcon(<Icon name="vertical_slider" size=15 className="mr-1" />)
           buttonType=customizeColumnButtonType
-          buttonSize=Small
+          buttonSize=XSmall
           onClick={_ => setShowColumnSelector(_ => true)}
           customButtonStyle=customizedColumnsStyle
           showBorder={true}

diff --git a/src/components/LoadedTable.res b/src/components/LoadedTable.res
@@ -890,7 +890,6 @@ let make = (
       | None =>
         <UIUtils.RenderIf condition={searchFields->Array.length > 0}>
           <AdvancedSearchModal searchFields url=searchUrl entity />
-          // <PaymentLinkAdvancedSearch searchFields url=searchUrl />
         </UIUtils.RenderIf>
       }}
       <DesktopView>
@@ -926,7 +925,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
+          leftIcon=Button.CustomIcon(<Icon name="vertical_slider" />)
+          text="Customize Columns"
+          buttonType=SecondaryFilled
+          buttonSize=XSmall
+          onClick={_ => setShowColumnSelector(_ => true)}
+        />
+      </Portal>
+    </UIUtils.RenderIf>
 
   let rightTitleElement = !previewOnly ? customizeColumn : React.null
 

diff --git a/src/components/RemoteFilter.res b/src/components/RemoteFilter.res
@@ -902,28 +902,26 @@ 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")]>
         <div>
           <div className={`flex flex-wrap flex-1 ${verticalGap}`}>
-            {fixedFilters->Array.length > 0
-              ? <>
-                  <FormRenderer.FieldsRenderer
-                    fields={fixedFilters->Array.map(item => item.field)}
-                    labelClass="hidden"
-                    labelPadding="pb-2"
-                    ?fieldWrapperClass
-                  />
-                </>
-              : React.null}
+            <UIUtils.RenderIf condition={fixedFilters->Array.length > 0}>
+              <FormRenderer.FieldsRenderer
+                fields={fixedFilters->Array.map(item => item.field)}
+                labelClass="hidden"
+                labelPadding="pb-2"
+                ?fieldWrapperClass
+              />
+            </UIUtils.RenderIf>
             <UIUtils.RenderIf condition={hideFilters && isFilterSection}>
               <PortalCapture key={`customizedColumn-${title}`} name={`customizedColumn-${title}`} />
             </UIUtils.RenderIf>
             {customViewTop}
-            {if showFiltersBtn {
-              if !revampedFilter {
+            <UIUtils.RenderIf condition={showFiltersBtn}>
+              {if !revampedFilter {
                 <ToolTip
                   description={!hideFilters
                     ? "Hide filters control panel(this will not clear the filters)"
@@ -932,7 +930,7 @@ let make = (
                     <Button
                       text={isMobileView ? "" : hideFilters ? "Show Filters" : "Hide Filters"}
                       buttonType=SecondaryFilled
-                      buttonSize=Small
+                      buttonSize=XSmall
                       leftIcon=CustomIcon(
                         <Icon
                           name={hideFilters ? "show-filters" : "minus"}
@@ -1016,21 +1014,18 @@ let make = (
                     {customView}
                   </Portal>
                 </>
-              }
-            } else {
-              React.null
-            }}
-            {if !clearFilterAfterRefresh && hideFilters && count > 0 && !revampedFilter {
+              }}
+            </UIUtils.RenderIf>
+            <UIUtils.RenderIf
+              condition={!clearFilterAfterRefresh && hideFilters && count > 0 && !revampedFilter}>
               <ClearFilters
                 filterButtonStyle
                 defaultFilterKeys
                 ?clearFilters
                 count
                 outsidefilter={initalCount > 0}
               />
-            } else {
-              React.null
-            }}
+            </UIUtils.RenderIf>
           </div>
           <div className="flex items-center">
             <Portal to=filterFieldsPortalName>
@@ -1040,9 +1035,7 @@ let make = (
                     : "flex-row justify-between"} w-full items-center gap-2`}>
                 <div
                   className={`md:justify-between flex items-center flex-wrap ${filterWidth} ${addFilterStyle}`}>
-                  {if hideFilters {
-                    React.null
-                  } else {
+                  <UIUtils.RenderIf condition={!hideFilters}>
                     <div className={`flex ${!isMobileView ? "w-full" : "flex-wrap"}`}>
                       <div
                         className={`flex flex-wrap ${!isMobileView
@@ -1051,16 +1044,16 @@ let make = (
                         <FormRenderer.FieldsRenderer
                           fields={selectedFiltersList} labelClass="hidden" labelPadding="pb-2"
                         />
-                        {fixedFilters->Array.length === 0 ? refreshFilterUi : React.null}
-                        advacedAndClearButtons
-                        <UIUtils.RenderIf condition={!hideFilters}>
-                          <PortalCapture
-                            key={`customizedColumn-${title}`} name={`customizedColumn-${title}`}
-                          />
+                        <UIUtils.RenderIf condition={fixedFilters->Array.length === 0}>
+                          {refreshFilterUi}
                         </UIUtils.RenderIf>
+                        advacedAndClearButtons
+                        <PortalCapture
+                          key={`customizedColumn-${title}`} name={`customizedColumn-${title}`}
+                        />
                       </div>
                     </div>
-                  }}
+                  </UIUtils.RenderIf>
                 </div>
                 <div className={`flex items-center justify-end flex-wrap`}>
                   <div>
@@ -1118,5 +1111,5 @@ let make = (
         </Form>
       </TableFilterSectionContext>
     </LabelVisibilityContext>
-  </div>
+  </>
 }
diff --git a/src/screens/HyperSwitch/Analytics/GenerateReport.res b/src/screens/HyperSwitch/Analytics/GenerateReport.res
@@ -7,6 +7,7 @@ let make = (~entityName) => {
     <Button
       text="Generate Reports"
       buttonType={Primary}
+      buttonSize={XSmall}
       onClick={_ => {
         setReportModal(_ => true)
         mixpanelEvent(~eventName="generate_reports", ())

diff --git a/src/screens/HyperSwitch/HSwitchRemoteFilter.res b/src/screens/HyperSwitch/HSwitchRemoteFilter.res
@@ -144,13 +144,11 @@ module SearchBarFilter = {
       checked: true,
     }
 
-    <div className="w-1/4 flex">
-      {InputFields.textInput(~input=inputSearch, ~placeholder, ~customStyle=`!h-10 w-full`, ())}
+    <div className="w-1/3 flex items-center">
+      {InputFields.textInput(~input=inputSearch, ~placeholder, ~customStyle=`w-full`, ())}
       <Button
         leftIcon={FontAwesome("search")}
         buttonType={Secondary}
-        customButtonStyle="px-2 py-3 mt-2"
-        customIconSize=13
         onClick={_ => {
           setSearchVal(_ => searchValBase)
         }}

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