Ws-2541-UAS metadata update for article

[jinidev]

Summary

Ticket : https://bbc.atlassian.net/browse/WS-2541

This pull request refactors the Save Article feature to improve how article metadata is handled and synchronized with the User Activity Service (UAS).

If the article is saved:
Compare the live article metadata with the metadata stored in UAS
Update the UAS entry, if metadata is out of date
Update the UAS entry, if metadata needs new field -without any manual action

Code changes

Save Article Button and Hook API Simplification:

• Removed the articleTitle prop from SaveArticleButtonProps and related components and tests, streamlining the API to rely solely on articlePageData for title and metadata.

Enhanced Article Metadata Sync and Storage:

• Refactored useUASButton to use a new useUASMetadataSync hook, which ensures that article metadata is up-to-date in UAS and handles cache invalidation for both status and list queries on successful sync.

Improved Save Status Fetching with Metadata:

• Updated useUASFetchSaveStatus to return both the saved status and associated article metadata, allowing components to access up-to-date metadata about saved articles.

Test Enhancements and Adjustments:

• Adjusted and expanded tests for useUASButton and useUASFetchSaveStatus to cover new behaviors, including metadata sync integration, cache invalidation, and the new return shape of hooks.

Testing

Method 1:

• Locally load any article page that’s already saved in UAS.
• Create a dummy articlePageData with a change like a different seoHeadline or promoImageUrl, then pass it to useUASButton.
  Eg :

          ...articlePageData,
           promo: {
            ...articlePageData.promo,
            headlines: {
               ...articlePageData.promo.headlines,
               seoHeadline: 'Test Article Title 11',
            },
          },
         }

• You should see a new POST request triggered for metadata sync, followed by a GET request as part of the refetch.
• You can also try adding a new metadata field to the payload to make sure the loaded article triggers metadata sync, so that the new field is also saved to the UAS bucket without any manual action.

Method 2:

Update the REACT_QUERY_OFFLINE_CACHE in localstorage bucket.
Change the value of any metadata (title , promoimage url ) of the article from there .
Reload the page - you should see POST api getting triggered.

[Copilot]

Pull request overview

This PR refactors the “Save Article” flow to keep UAS-saved article metadata automatically in sync with the live article data, and simplifies the Save Article button API by relying on articlePageData rather than a separate title prop.

Changes:

• Simplifies SaveArticleButton/useUASButton APIs by removing the articleTitle prop and deriving metadata from articlePageData.
• Introduces metadata comparison + a useUASMetadataSync hook to detect out-of-date saved metadata and trigger a UAS update + cache invalidation.
• Updates useUASFetchSaveStatus to return both saved status and saved metadata, and adjusts tests accordingly.

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
src/app/pages/ArticlePage/ArticlePage.tsx	Removes articleTitle plumbing when rendering SaveArticleButton.
src/app/lib/uasApi/uasUtility.ts	Adds metadata extractor/comparison helpers used by the sync mechanism.
src/app/lib/uasApi/saveOrUpdateArticleMetadata.ts	New helper to POST (create/update) saved-article metadata into UAS.
src/app/lib/uasApi/saveOrUpdateArticleMetadata.test.ts	Unit tests for the new save/update metadata helper.
src/app/hooks/useUASMetadataSync/index.ts	New hook to detect metadata drift and trigger a sync callback.
src/app/hooks/useUASMetadataSync/index.test.ts	Tests for the metadata sync hook behaviour.
src/app/hooks/useUASFetchSaveStatus/index.ts	Extends the saved-status hook to also surface saved UAS metadata.
src/app/hooks/useUASFetchSaveStatus/index.test.tsx	Updates/extends tests for the new return shape and behaviour.
src/app/hooks/useUASButton/index.ts	Integrates metadata sync + uses the new save/update helper; updates cache shape.
src/app/hooks/useUASButton/index.test.tsx	Updates tests for new cache shape and adds (currently minimal) metadata sync coverage.
src/app/components/SaveArticleButton/SaveArticleButtonAuthenticated/index.tsx	Removes articleTitle usage when calling useUASButton.
src/app/components/SaveArticleButton/index.tsx	Removes articleTitle from props.
src/app/components/SaveArticleButton/index.test.tsx	Adjusts tests to match the updated button props.

[elvinasv]

Is this expected we're using seoHeadline here? I think for the Article heading we're using blocks[0].model.blocks[0].model. Probably we should double-check it?

[jinidev]

We were using this

simorgh/src/app/pages/ArticlePage/ArticlePage.tsx

Line 112 in 9907799

articleTitle: string,

simorgh/src/app/pages/ArticlePage/ArticlePage.tsx

Line 385 in 9907799

headline,

simorgh/src/app/pages/ArticlePage/ArticlePage.tsx

Line 280 in 9907799

const headline = getHeadline(pageData) ?? '';

in articlepage to get the articleTitile.This was pointing to seoHeadline.
May be we can double check ,whom should we have to ask ?

[jinidev]

This is confirmed — I checked that existing article-related components use seoHeadline for the title purpose.

simorgh/src/app/pages/ArticlePage/ArticlePage.tsx

Line 464 in bba8022

title={headline}

[elvinasv]

Have you considered reusing existing mutation, I think onMetadataOutOfDate is redundant, we could do something like this:

const isMetadataStale = useUASMetadataSync(...);

  const mutation = useMutation({
   // rest...
  });


  useEffect(() => {
    if (isMetadataStale && articlePageData) {
      mutation.mutate(UASAction.SAVE);
    }
  }, [isMetadataStale, articlePageData, mutation]);