Add US-only option in Collection #1748

Divs-B · 2025-01-16T09:49:35Z

Co-authored by @fredex42 (Thanks for help in Backend and DB wiring!)

What's changed?

We are now moving towards country specific curation of data,
We want to try for US first to provide much more in-depth use of Feast App for US users.
We are going to put US only option to Container(Collection) level to help Editorial users to select option if they want to mark it for only to display in US.

UI section: The change will have dropdown menu now from headlessui/react library, this will only be for Feast Editions at the moment.
(Note: As we might need to get other devs on Fronts tool and UX help to confirm button's look and feel so its style and appearance are subject to change.)

Screen.Recording.2025-01-30.at.11.50.27.mov

(updated video above)

Backend and DB wiring section: Thanks @fredex42 for help in wiring this end to end (thanks to @jonathonherbert too for confirming on ways to achieve this in the code).
This wiring will help in supplying the data to Database and to backend for our Apps team to use at the end.
Wired the UI change with backend with new endpoint in the routes(/update-regions), which will PATCH the status for regions as per User's selection.

Checklist

General

🤖 Relevant tests added
✅ CI checks / tests run locally
🔍 Checked on CODE

Client

🚫 No obvious console errors on the client (i.e. React dev mode errors)
🎛️ No regressions with existing user interactions (i.e. all existing buttons, inputs etc. work)
📷 Screenshots / GIFs of relevant UI changes included

github-actions · 2025-01-27T13:43:13Z

Deploy build 8830 of `cms-fronts::facia-tool` to CODE

All deployment options

From guardian/actions-riff-raff.

…sions

…m here.

…te collection

… of US-only option

… for US option. wired this via controller for routes.

Divs-B · 2025-01-28T13:06:37Z

We have tested this by deploying on CODE and publishing the Front.
The data it is sending is including regions fields.

Georges-GNM · 2025-01-28T14:40:37Z

fronts-client/src/util/__tests__/storeMiddleware.spec.ts

@@ -62,6 +62,8 @@ describe('Store middleware', () => {
 					draft: [],
 					previously: undefined,
 					type: 'type',
+					targetedRegions: [], //add here to pass the test for persistCollectionOnEdit


think we can get rid of the comment

Suggested change

targetedRegions: [], //add here to pass the test for persistCollectionOnEdit

targetedRegions: [],

Georges-GNM · 2025-01-28T14:58:26Z

fronts-client/src/actions/__tests__/fixtures/Editions.fixture.ts

similarly, can probably remove the comments

Georges-GNM · 2025-01-28T15:27:39Z

fronts-client/src/fixtures/shared.ts

@@ -657,6 +671,8 @@ const stateWithCollection: any = {
 				draft: [],
 				previously: undefined,
 				type: 'type',
+				targetedRegions: [], //add here to pass the test


nit: comment

Suggested change

targetedRegions: [], //add here to pass the test

targetedRegions: [],

Georges-GNM · 2025-01-28T15:28:14Z

fronts-client/src/fixtures/shared.ts

@@ -519,6 +521,8 @@ const collection = {
 	id: 'exampleCollection',
 	displayName: 'Example Collection',
 	type: 'type',
+	targetedRegions: [], //mandatory, should be added here to compile


nit: comment

Suggested change

targetedRegions: [], //mandatory, should be added here to compile

targetedRegions: [],

Georges-GNM · 2025-01-28T15:30:43Z

fronts-client/src/strategies/update-collection.ts

+	// const curatedPlatformStrategy = () =>
+	// 	renamingCollection
+	// 		? renameEditionsCollection(id)(collectionToEditionCollection(collection))
+	// 		: isMarkedForUSOnly
+	// 			? markCollectionForUSOnly(id)(collectionToEditionCollection(collection))
+	// 			: updateEditionsCollection(id)(
+	// 					collectionToEditionCollection(collection),
+	// 				);


nit: can delete this unused code

Suggested change

// const curatedPlatformStrategy = () =>

// renamingCollection

// ? renameEditionsCollection(id)(collectionToEditionCollection(collection))

// : isMarkedForUSOnly

// ? markCollectionForUSOnly(id)(collectionToEditionCollection(collection))

// : updateEditionsCollection(id)(

// collectionToEditionCollection(collection),

// );

Georges-GNM · 2025-01-28T15:31:35Z

fronts-client/src/actions/__tests__/fixtures/Editions.fixture.ts

@@ -1473,6 +1473,8 @@ export const finalStateWhenAddNewCollection = {
 				platform: undefined,
 				targetedTerritory: undefined,
 				type: undefined,
+				targetedRegions: [], //add here to pass the test for add collection


Suggested change

targetedRegions: [], //add here to pass the test for add collection

targetedRegions: [],

Georges-GNM · 2025-01-28T15:31:47Z

fronts-client/src/actions/__tests__/fixtures/Editions.fixture.ts

@@ -1491,6 +1493,8 @@ export const finalStateWhenAddNewCollection = {
 				platform: undefined,
 				targetedTerritory: undefined,
 				type: undefined,
+				targetedRegions: [], //add here to pass the test for add collection


Suggested change

targetedRegions: [], //add here to pass the test for add collection

targetedRegions: [],

Georges-GNM · 2025-01-28T15:31:57Z

fronts-client/src/actions/__tests__/fixtures/Editions.fixture.ts

@@ -2233,6 +2237,8 @@ export const finalStateWhenRemoveACollection = {
 				platform: undefined,
 				targetedTerritory: undefined,
 				type: undefined,
+				targetedRegions: [], //add here to pass the test for remove collection


Suggested change

targetedRegions: [], //add here to pass the test for remove collection

targetedRegions: [],

Georges-GNM · 2025-01-28T15:32:17Z

fronts-client/src/actions/__tests__/Collections.spec.ts

@@ -196,6 +198,8 @@ describe('Collection actions', () => {
 					live: ['abc', 'def'],
 					previously: undefined,
 					type: 'type',
+					targetedRegions: [], //add here to pass the test for Get Collections thunk


Suggested change

targetedRegions: [], //add here to pass the test for Get Collections thunk

targetedRegions: [],

Georges-GNM · 2025-01-28T15:32:27Z

fronts-client/src/actions/__tests__/Collections.spec.ts

@@ -130,6 +130,8 @@ describe('Collection actions', () => {
 					live: ['abc', 'def'],
 					previously: undefined,
 					type: 'type',
+					targetedRegions: [], //add here to pass the test


Suggested change

targetedRegions: [], //add here to pass the test

targetedRegions: [],

fredex42

Couple of very small comments but otherwise looking good to me

fredex42 · 2025-01-28T17:29:37Z

app/controllers/EditionsController.scala

+  def updateCollectionRegions(collectionId: String) = EditEditionsAuthAction(
+    parse.json[EditionsFrontendCollectionWrapper]
+  ) { req =>
+    logger.info(s"Mark for US only the collection ${collectionId}")


this is inaccurate - i think it can just be zapped now it's working tbh

fredex42 · 2025-01-28T17:38:52Z

fronts-client/src/components/FrontsEdit/CollectionComponents/Collection.tsx

+									)}
+									{isFeast && (
+										<>
+											{targetedRegions?.length > 0 ? 'US!' : ''}{' '}


let's replace this text with a US flag emoji: https://emojipedia.org/flag-united-states

bonus if you can get a tooltip on there to say "Targeted to US only" 😁

fredex42 · 2025-01-28T17:39:18Z

fronts-client/src/components/FrontsEdit/CollectionComponents/Collection.tsx

+									{isFeast && (
+										<>
+											{targetedRegions?.length > 0 ? 'US!' : ''}{' '}
+											{/*The above text will appear on collection to show US tagged collections, for testing purpose only.*/}


comment ⚡

fredex42 · 2025-01-28T17:43:50Z

scripts/recipes/recipe-front-generator.mjs

@@ -302,6 +306,8 @@ async function buildCollection(collectionName, frontId, count) {
 }

 async function frontNameToId(issueId, frontName) {
+	console.log(`${frontsBaseUrl}/editions-api/issues/${issueId}`);


Suggested change

console.log(`${frontsBaseUrl}/editions-api/issues/${issueId}`);

@Divs-B sorry, i left this one in!

…spot the problem.

…dpoint and few ui tweak to adjust menu item

Georges-GNM · 2025-01-29T18:16:35Z

fronts-client/src/components/FeastCollectionMenu.tsx

+						>
+							US Only
+							<Icon>
+								{targetedRegions.includes('us') ? <h2>&#x2713;</h2> : undefined}


nit: the &#2713 isn't obvious to me, I think you can use

Suggested change

{targetedRegions.includes('us') ? <h2>✓</h2> : undefined}

{targetedRegions.includes('us') ? <h2>&check;</h2> : undefined}

Thanks @Georges-GNM for the suggestion, I will take this to test its look and feel in later PR if its ok for you?
This PR is good to go as got approved by you and @fredex42

No problem, the icons are working as is, it's more for (my) code readability (as I had no idea what that thing was doing before looking it up 😅 )

Thanks @Georges-GNM

Georges-GNM · 2025-01-29T18:17:05Z

fronts-client/src/components/FeastCollectionMenu.tsx

+					setMenuOpen((prev) => !prev);
+				}}
+			>
+				<pre style={{ padding: 0, margin: 0 }}>&#x22EE;</pre>


could use

Suggested change

<pre style={{ padding: 0, margin: 0 }}>⋮</pre>

<pre style={{ padding: 0, margin: 0 }}>&vellip;</pre>

This one too, I will take this to test its look and feel in later PR if its ok for you?

Georges-GNM

A massive PR, but I appreciate somewhat difficult to separate too. Few nitpicky comments, tested on code and feast as well as regular collections still seem to behave as intended, so it looks good to me - if Andy's happy, then it's a 👍 from me.

As this feels like a big change (even if it should only be limited to feast), might be worth mentioning to CP once the PR's merged in case there's anything we've missed.

fredex42

🚢

prout-bot · 2025-01-30T12:10:36Z

Seen on PROD (merged by @Divs-B 7 minutes and 29 seconds ago) Please check your changes!

emdash-ie · 2025-01-31T10:26:07Z

fronts-client/src/components/CollectionDisplay.tsx

@@ -133,11 +139,10 @@ const CollectionMeta = styled(CollectionMetaBase)`
 const ItemCountMeta = CollectionMetaBase;

 const CollectionHeadingSticky = styled.div`
-	position: sticky;


It looks to me like this line is the cause of the change in behaviour CP emailed a few people about this morning: the header on a container used to follow the user down the container, keeping (for example) the launch button easy to access when the top of the container has scrolled offscreen, and after this change it doesn't do that any more.

Thanks Emily, small change that was missed in review! I've put out a fix :)

Thanks both, It’s great to see the solution in my absence on Friday, I noticed that this fix had an unintended side effect in other editions in the Fronts,

We’ve previously considered these editions as not in use, but involvement in data curation raises an open question about whether they are still actively use via fronts tool?

I’d like to clarify this to ensure we handle them appropriately.
Looking forward to your thoughts @fredex42 @Georges-GNM

Divs-B requested a review from a team as a code owner January 16, 2025 09:49

fredex42 force-pushed the db/add-us-only-option branch from 97dabf1 to b302b74 Compare January 22, 2025 17:30

fredex42 mentioned this pull request Jan 28, 2025

Targeted regions guardian/recipes-backend#89

Merged

Divs-B added 13 commits January 28, 2025 12:56

Add headlessui lib and make sure react and react-dom to have same ver…

2db17b2

…sions

Remove Delete button implmentation to CollectionDisplay so remove fro…

fbf4d43

…m here.

Add dropdown menu logic and move delete button implementation here

c48a840

Menu to display only in Feast edition

1e81159

Add DB migration for new fields targeted regions and excluded regions

ae88532

Add regions fields to Collection model

56f15ef

Add into queries to read and write the regions fields

c2f6acd

To show US tagged collections for testing purpose also

d85c76c

To show US-only checked when selected and handle to send call to upda…

e74bb6b

…te collection

set properties here too

2aa05bd

extend MarkedUsOnly to other refernces to help in updating collection

73bab51

implement endpoint to send the regions list which is at present value…

79c9440

… of US-only option

update database to include targetted regions which is at present only…

9332178

… for US option. wired this via controller for routes.

Divs-B force-pushed the db/add-us-only-option branch from 591d4fd to ec5aa88 Compare January 28, 2025 13:00

Divs-B requested a review from Georges-GNM January 28, 2025 13:03

Georges-GNM reviewed Jan 28, 2025

View reviewed changes

fronts-client/src/actions/__tests__/fixtures/Editions.fixture.ts

Copy link

Contributor

Georges-GNM Jan 28, 2025

Choose a reason for hiding this comment

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

similarly, can probably remove the comments

Georges-GNM reviewed Jan 28, 2025

View reviewed changes

fredex42 requested changes Jan 28, 2025

View reviewed changes

Divs-B and others added 13 commits January 29, 2025 11:53

endpoint in routes

d388daa

resolve error of 404 by correcting the url. thanks Andy Gallagher to …

3df5c41

…spot the problem.

moving to a home-built menu container

bb08ad0

making things run again

2121f0e

add basic click catcher and improve styling slightly

383504c

Start fixing failing tests

4b7a22a

ui changes to show dropdown menu properly with adding more items

ae45234

update targeted and extended values accordingly, wired with single en…

138a803

…dpoint and few ui tweak to adjust menu item

fix up tests and correct the value of US submission

9c10af0

fix runtime build issue

c436f14

add regions to collection transfom logic to make it available upstream

6dc04e6

minor mods to recipe-front-generator, allow filtering to

f6742cf

replace US text by US emoji

325f8c7

Divs-B force-pushed the db/add-us-only-option branch from 1c49330 to 325f8c7 Compare January 29, 2025 11:56

Georges-GNM reviewed Jan 29, 2025

View reviewed changes

Georges-GNM approved these changes Jan 29, 2025

View reviewed changes

fredex42 approved these changes Jan 30, 2025

View reviewed changes

Divs-B merged commit 5d6c14b into main Jan 30, 2025
13 checks passed

Divs-B deleted the db/add-us-only-option branch January 30, 2025 12:03

prout-bot added Pending-on-PROD Seen-on-PROD and removed Pending-on-PROD labels Jan 30, 2025

emdash-ie reviewed Jan 31, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add US-only option in Collection #1748

Add US-only option in Collection #1748

Divs-B commented Jan 16, 2025 •

edited

Loading

github-actions bot commented Jan 27, 2025 •

edited

Loading

Divs-B commented Jan 28, 2025

Georges-GNM Jan 28, 2025 •

edited

Loading

Georges-GNM Jan 28, 2025

Georges-GNM Jan 28, 2025 •

edited

Loading

Georges-GNM Jan 28, 2025

Georges-GNM Jan 28, 2025

Georges-GNM Jan 28, 2025

Georges-GNM Jan 28, 2025

Georges-GNM Jan 28, 2025

Georges-GNM Jan 28, 2025

Georges-GNM Jan 28, 2025

fredex42 left a comment

fredex42 Jan 28, 2025

fredex42 Jan 28, 2025

fredex42 Jan 28, 2025

fredex42 Jan 28, 2025

fredex42 Jan 28, 2025

fredex42 Jan 28, 2025

Georges-GNM Jan 29, 2025

Divs-B Jan 30, 2025

Georges-GNM Jan 30, 2025

Divs-B Jan 30, 2025

Georges-GNM Jan 29, 2025

Divs-B Jan 30, 2025

Georges-GNM left a comment

fredex42 left a comment

prout-bot commented Jan 30, 2025

emdash-ie Jan 31, 2025 •

edited

Loading

Georges-GNM Jan 31, 2025

Divs-B Feb 3, 2025

	targetedRegions: [], //add here to pass the test for persistCollectionOnEdit
	targetedRegions: [],

	targetedRegions: [], //mandatory, should be added here to compile
	targetedRegions: [],

	{targetedRegions.includes('us') ? <h2>✓</h2> : undefined}
	{targetedRegions.includes('us') ? <h2>&check;</h2> : undefined}

	<pre style={{ padding: 0, margin: 0 }}>⋮</pre>
	<pre style={{ padding: 0, margin: 0 }}>&vellip;</pre>

Add US-only option in Collection #1748

Add US-only option in Collection #1748

Conversation

Divs-B commented Jan 16, 2025 • edited Loading

What's changed?

Checklist

General

Client

github-actions bot commented Jan 27, 2025 • edited Loading

Divs-B commented Jan 28, 2025

Georges-GNM Jan 28, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Georges-GNM Jan 28, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fredex42 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Georges-GNM left a comment

Choose a reason for hiding this comment

fredex42 left a comment

Choose a reason for hiding this comment

prout-bot commented Jan 30, 2025

emdash-ie Jan 31, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Divs-B commented Jan 16, 2025 •

edited

Loading

github-actions bot commented Jan 27, 2025 •

edited

Loading

Georges-GNM Jan 28, 2025 •

edited

Loading

Georges-GNM Jan 28, 2025 •

edited

Loading

emdash-ie Jan 31, 2025 •

edited

Loading