Skip to content

WS-2469: Add live pulse to most read page rank. #13909

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shayneahchoon wants to merge 8 commits into
base: latest
Choose a base branch
from
+32 −0
Open

WS-2469: Add live pulse to most read page rank. #13909

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
92e7295
WS-2469: Add live pulse to most read page rank.
shayneahchoon Apr 15, 2026
2121059
Merge branch 'latest' into WS-2469
shayneahchoon Apr 15, 2026
3b31604
WS-2469: Add live pulse to most read page rank.
shayneahchoon Apr 15, 2026
6a9bbfa
Merge branch 'WS-2469' of github.com:bbc/simorgh into WS-2469
shayneahchoon Apr 15, 2026
1debf4b
Merge branch 'latest' into WS-2469
shayneahchoon Apr 15, 2026
da162b1
WS-2469: Add live pulse to most read page rank.
shayneahchoon Apr 15, 2026
9a3c003
Merge branch 'WS-2469' of github.com:bbc/simorgh into WS-2469
shayneahchoon Apr 15, 2026
31ac036
Merge branch 'latest' into WS-2469
shayneahchoon Apr 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions src/app/components/MostRead/Canonical/Item/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,31 @@ describe('MostReadLink', () => {
);
expect(container).toMatchSnapshot();
});

it('should render a live pulse icon if the item refers to a live page', () => {
const { container } = render(
<MostReadLink
href="https://www.bbc.com/hausa/live/c98kkrezn3jt"
service="hausa"
title="Placeholder title"
dir="ltr"
size="default"
id=""
position={0}
/>,
{
service: 'hausa',
toggles: {
eventTracking: { enabled: true },
},
},
);

const livePulse = container.querySelector(
'[data-e2e=most-read-live-pulse]',
);
expect(livePulse).not.toBeNull();
});
});

describe('MostReadItemWrapper', () => {
Expand Down
7 changes: 7 additions & 0 deletions src/app/components/MostRead/Canonical/Item/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { forwardRef, PropsWithChildren } from 'react';
import { SerializedStyles, Theme } from '@emotion/react';
import useClickTrackerHandler from '#hooks/useClickTrackerHandler';
import LiveLabel from '#app/components/LiveLabel';
import styles from './index.styles';
import {
mostReadListGridProps,
Expand Down Expand Up @@ -62,6 +63,7 @@ export const MostReadLink = ({
};

const clickTrackerHandler = useClickTrackerHandler(eventTrackingDataExtended);
const isLiveLink = href.includes('live');
Copy link
Copy Markdown
Contributor

@amoore108 amoore108 Apr 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see there is a back-end PR to add an isLive prop to the response. Will that be used here instead?

Copy link
Copy Markdown
Contributor Author

@shayneahchoon shayneahchoon Apr 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Heya, I'm going to can the PR you've mentioned. I drafted it upon waiting for a reply from product. Neil is happy for our current changes to go forward as is without needing to check the expiry date.

Copy link
Copy Markdown
Contributor

@hotinglok hotinglok Apr 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 on this. At the moment the logic suggests that if a live page was no longer being updated (hence, no longer live), the label and icon will still show.

I imagine we don't need this calculated down to a tee (e.g. with polling to check if an article is still live), but it seems like the other PR checks the start/end times of an article being live so that seems preferable.


return (
// eslint-disable-next-line @typescript-eslint/no-explicit-any
Expand All @@ -71,6 +73,11 @@ export const MostReadLink = ({
href={href}
{...clickTrackerHandler}
>
{isLiveLink && (
<span data-e2e="most-read-live-pulse">
<LiveLabel />
</span>
)}
{title}
</a>
{children && <div css={styles.timestamp}>{children}</div>}
Expand Down
Loading