From 71aea9b0dbd03487752ae34a61205c4ea5116f19 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 27 Jun 2024 18:15:06 +0200
Subject: [PATCH] change(ui): path analysis filter card

---
 .../components/WidgetForm/CardBuilder.tsx     | 35 ++++++++++--------
 .../components/WidgetForm/WidgetFormNew.tsx   | 36 +++++++++++--------
 2 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx b/frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx
index 867cb03c3..b7066b5d8 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx
@@ -53,7 +53,7 @@ const MetricTabs = ({metric, writeOption}: any) => {
     }
 
     return (
-        <Segmented options={tableOptions} onChange={onChange} selected={metric.metricOf} />
+        <Segmented options={tableOptions} onChange={onChange} selected={metric.metricOf}/>
     )
 }
 
@@ -138,19 +138,26 @@ const MetricOptions = ({metric, writeOption}: any) => {
     );
 };
 
-const PathAnalysisFilter = ({metric}) => (
-    <div className='form-group flex flex-col'>
-        {metric.startType === 'start' ? 'Start Point' : 'End Point'}
-        <FilterItem
-            hideDelete
-            filter={metric.startPoint}
-            allowedFilterKeys={[FilterKey.LOCATION, FilterKey.CLICK, FilterKey.INPUT, FilterKey.CUSTOM]}
-            onUpdate={val => metric.updateStartPoint(val)}
-            onRemoveFilter={() => {
-            }}
-        />
-    </div>
-);
+const PathAnalysisFilter = observer(({metric}: any) => (
+    <Card styles={{
+        body: {padding: '4px 20px'},
+        header: {padding: '4px 20px', fontSize: '14px', fontWeight: 'bold', borderBottom: 'none'},
+    }}
+          title={metric.startType === 'start' ? 'Start Point' : 'End Point'}
+    >
+        <div className='form-group flex flex-col'>
+            {/*{metric.startType === 'start' ? 'Start Point' : 'End Point'}*/}
+            <FilterItem
+                hideDelete
+                filter={metric.startPoint}
+                allowedFilterKeys={[FilterKey.LOCATION, FilterKey.CLICK, FilterKey.INPUT, FilterKey.CUSTOM]}
+                onUpdate={val => metric.updateStartPoint(val)}
+                onRemoveFilter={() => {
+                }}
+            />
+        </div>
+    </Card>
+));
 
 const SeriesList = observer(() => {
     const {metricStore, dashboardStore, aiFiltersStore} = useStore();
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
index 3050acb94..014d0f6bb 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
@@ -35,7 +35,7 @@ function WidgetFormNew() {
     const isPredefined = [ERRORS, PERFORMANCE, RESOURCE_MONITORING, WEB_VITALS].includes(metric.metricType);
 
     return isPredefined ? <PredefinedMessage/> : (
-        <>
+        <Space direction="vertical" className="w-full">
             <AdditionalFilters/>
             <Card
                 styles={{
@@ -51,7 +51,7 @@ function WidgetFormNew() {
             {hasFilters && (
                 <FilterSection metric={metric} excludeFilterKeys={excludeFilterKeys}/>
             )}
-        </>
+        </Space>
     );
 }
 
@@ -140,17 +140,23 @@ const FilterSection = observer(({metric, excludeFilterKeys}: any) => {
 
 
 const PathAnalysisFilter = observer(({metric}: any) => (
-    <div className='form-group flex flex-col'>
-        {metric.startType === 'start' ? 'Start Point' : 'End Point'}
-        <FilterItem
-            hideDelete
-            filter={metric.startPoint}
-            allowedFilterKeys={[FilterKey.LOCATION, FilterKey.CLICK, FilterKey.INPUT, FilterKey.CUSTOM]}
-            onUpdate={val => metric.updateStartPoint(val)}
-            onRemoveFilter={() => {
-            }}
-        />
-    </div>
+    <Card styles={{
+        body: {padding: '4px 20px'},
+        header: {padding: '4px 20px', fontSize: '14px', fontWeight: 'bold', borderBottom: 'none'},
+    }}
+          title={metric.startType === 'start' ? 'Start Point' : 'End Point'}
+    >
+        <div className='form-group flex flex-col'>
+            <FilterItem
+                hideDelete
+                filter={metric.startPoint}
+                allowedFilterKeys={[FilterKey.LOCATION, FilterKey.CLICK, FilterKey.INPUT, FilterKey.CUSTOM]}
+                onUpdate={val => metric.updateStartPoint(val)}
+                onRemoveFilter={() => {
+                }}
+            />
+        </div>
+    </Card>
 ));
 
 const AdditionalFilters = observer(() => {
@@ -158,9 +164,9 @@ const AdditionalFilters = observer(() => {
     const metric: any = metricStore.instance;
 
     return (
-        <>
+        <Space direction="vertical" className="w-full">
             {metric.metricType === USER_PATH && <PathAnalysisFilter metric={metric}/>}
-        </>
+        </Space>
     )
 });