diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/Insights/Navigation.tsx b/src/pages/Campaign/useWidgets/Experience/widgets/Insights/Navigation.tsx index f7db02dad..9f79187e6 100644 --- a/src/pages/Campaign/useWidgets/Experience/widgets/Insights/Navigation.tsx +++ b/src/pages/Campaign/useWidgets/Experience/widgets/Insights/Navigation.tsx @@ -8,6 +8,8 @@ import { import { appTheme } from 'src/app/theme'; import { BugCard } from 'src/common/components/BugCard'; import styled from 'styled-components'; +import { Ellipsis } from '@appquality/unguess-design-system'; +import { useEffect, useRef, useState } from 'react'; import { Insight } from './useCampaignInsights'; import { getClusterTag, getSeverity, getSeverityTag } from './utils'; @@ -37,6 +39,21 @@ const ScrollingContainer = styled.div` const Navigation = ({ insights }: { insights: Insight[] }) => { const { t } = useTranslation(); + const refScroll = useRef(null); + const [activeInsight, setActiveInsight] = useState(); + + useEffect(() => { + if (refScroll.current) { + // Set ScrollingContainer position to active insight + const activeInsightElement = document.getElementById(activeInsight || ''); + if (activeInsightElement) { + refScroll.current.scrollTo({ + top: activeInsightElement.offsetTop - 100, + behavior: 'smooth', + }); + } + } + }, [activeInsight]); return ( @@ -44,7 +61,7 @@ const Navigation = ({ insights }: { insights: Insight[] }) => { {t('__CAMPAIGN_PAGE_INSIGHTS_NAVIGATION_TITLE')} - + {insights.length > 0 && insights.map((insight, index) => ( { smooth duration={500} offset={-30} + onSetActive={() => { + setActiveInsight(`anchor-insight-row-${insight.id}`); + }} > { {t('__CAMPAIGN_PAGE_INSIGHTS_NUMBER_LABEL')} {index + 1} - {insight.title} + + {insight.title} + {getClusterTag(insight.cluster, t)} {getSeverityTag(insight.severity)}