From 89afab8a22b6ac2e93e2ba191a6f8b979f7161ce Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 14 Oct 2024 13:18:12 +0200
Subject: [PATCH] change(ui): funnel issues table show context column

---
 .../FunnelIssuesList/FunnelIssuesList.tsx     | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx
index 8eb4a508c..224654d5f 100644
--- a/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx
+++ b/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx
@@ -1,4 +1,4 @@
-import { Table } from 'antd';
+import { Table, Typography } from 'antd';
 import type { TableProps } from 'antd';
 import { useObserver } from 'mobx-react-lite';
 import React, { useEffect } from 'react';
@@ -11,6 +11,7 @@ import { InfoCircleOutlined } from '@ant-design/icons';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 import FunnelIssueModal from '../FunnelIssueModal';
 import FunnelIssuesListItem from '../FunnelIssuesListItem';
+const { Text } = Typography;
 
 interface Issue {
   issueId: string;
@@ -36,6 +37,20 @@ const columns: TableProps<Issue>['columns'] = [
     dataIndex: 'title',
     key: 'title',
   },
+  {
+    title: 'Page / Element',
+    dataIndex: 'contextString',
+    key: 'contextString',
+    render: (text: string) => (
+      <Text ellipsis style={{
+        width: 200,  // Adjust width here as needed
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+      }}>{text}</Text>
+    ),
+    width: 200,
+  },
   {
     title: '# Users Affected',
     dataIndex: 'affectedUsers',
@@ -55,13 +70,13 @@ const columns: TableProps<Issue>['columns'] = [
   },
 ];
 
-interface Props {
+interface Props extends RouteComponentProps {
   loading?: boolean;
   issues: Issue[];
   history: any;
   location: any;
 }
-function FunnelIssuesList(props: RouteComponentProps<Props>) {
+function FunnelIssuesList(props: Props) {
   const { issues, loading } = props;
   const { funnelStore } = useStore();
   const issuesSort = useObserver(() => funnelStore.issuesSort);