From d26e6ec0985da0db088e6d579810c76513e59121 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 10 Oct 2024 11:49:44 +0200
Subject: [PATCH] change(ui): funnel widget options, and funnel drop message

---
 .../Dashboard/components/WidgetOptions.tsx       |  4 ++--
 .../Funnels/FunnelWidget/FunnelBar.tsx           | 16 +++++++++-------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/WidgetOptions.tsx b/frontend/app/components/Dashboard/components/WidgetOptions.tsx
index a992ef3a6..3a3298f8b 100644
--- a/frontend/app/components/Dashboard/components/WidgetOptions.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetOptions.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { HEATMAP, TABLE, USER_PATH } from 'App/constants/card';
+import { FUNNEL, HEATMAP, TABLE, USER_PATH } from 'App/constants/card';
 import { Select, Space, Switch } from 'antd';
 import { useStore } from 'App/mstore';
 import ClickMapRagePicker from 'Components/Dashboard/components/ClickMapRagePicker/ClickMapRagePicker';
@@ -38,7 +38,7 @@ function WidgetOptions(props: Props) {
         </a>
       )}
 
-      {metric.metricType === TABLE && metric.metricOf != FilterKey.USERID && metric.metricOf != FilterKey.ERRORS &&  (
+      {(metric.metricType === FUNNEL || metric.metricType === TABLE) && metric.metricOf != FilterKey.USERID && metric.metricOf != FilterKey.ERRORS &&  (
         <Select
           defaultValue={metric.metricFormat}
           onChange={handleChange}
diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
index 3930493cc..5a793b211 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
@@ -67,13 +67,15 @@ function FunnelBar(props: Props) {
             ({filter.completedPercentage}%) Completed
           </span>
         </div>
-        <Space className="items-center">
-          <Icon name="caret-down-fill" color={filter.droppedCount > 0 ? 'red' : 'gray-light'} size={16} />
-          <span
-            className={'mx-1 ' + (filter.droppedCount > 0 ? 'color-red' : 'disabled')}>{filter.droppedCount} Sessions</span>
-          <span
-            className={'text-sm ' + (filter.droppedCount > 0 ? 'color-red' : 'disabled')}>({filter.droppedPercentage}%) Dropped</span>
-        </Space>
+        {index && index > 1 && (
+          <Space className="items-center">
+            <Icon name="caret-down-fill" color={filter.droppedCount > 0 ? 'red' : 'gray-light'} size={16} />
+            <span
+              className={'mx-1 ' + (filter.droppedCount > 0 ? 'color-red' : 'disabled')}>{filter.droppedCount} Sessions</span>
+            <span
+              className={'text-sm ' + (filter.droppedCount > 0 ? 'color-red' : 'disabled')}>({filter.droppedPercentage}%) Dropped</span>
+          </Space>
+        )}
       </div>
     </div>
   );