IMAGEDAM-1665: Generic React modal dialog and send to Photosales functionality #4267

Conalb97 · 2024-05-02T09:47:29Z

What does this change?

Note, this PR builds on changes introduced in IMAGEDAM-1502 and so will replace that PR.

This PR introduces two new functionalities:

The ability for a user to add a 'send to photosales' syndication usage to an image, via the 'Send to Photosales button'
A generic React modal component, used in this case as a confirmation dialog

As an archivist user of BBC Images, I want to be able to send certain images from BBC Images to BBC Photo Sales, through the Grid UI. This PR introduces this functionality, allowing a user to select a number of images and trigger the outbound photo sales process by clicking on the new 'Send to Photo Sales' button.

Upon doing this the confirmation dialog will pop up, asking the user to confirm their choice. The dialog will have different text and button options depending on if the images selected already exist in photosales or not. Once the user has confirmed their intention to send the image, a syndication usage (with a 'pending' usage status) is added to each of the selected image, which is the trigger for an AWS step function that carries out the majority of the outbound logic.

The Photosales functionality is BBC specific, hence it is disabled by default via the showSendToPhotoSales feature flag.

How should a reviewer test this change?

As a user with elevated permissions and with the showSendToPhotoSales flag set to true:

No selected images already exist in Photosales

Select a number of image thumbnails from the main grid view, ensure none of these images have already been sent to Photosales
Click the 'Send to Photo Sales Button' from the menu that appears
A confirmation dialog will pop up
Click 'Yes, send'

The selected images contain a mixture of images that have and have not been sent to Photosales

Select a number of image thumbnails from the main grid view, ensure that some of these images have already been sent to Photosales and some have not been sent
Click the 'Send to Photo Sales Button' from the menu that appears
A confirmation dialog will pop up
Click 'Yes, send'

All the selected images have already been sent to Photosales

Select a number of image thumbnails from the main grid view, ensure that all of these images ahve already been sent to Photosales
Click the 'Send to Photo Sales Button' from the menu that appears
A confirmation dialog, with one button will pop up
Click 'Okay'

How can success be measured?

No selected images already exist in Photosales

Confirm that a Pending Publication usage is visible in the usages section of the metadata panel, for the selected images
Confirm that the confirmation dialog has the following appearance:

The selected images contain a mixture of images that have and have not been sent to Photosales

Confirm that a Pending Publication usage is visible in the usages section of the metadata panel, for those selected images that had not already been sent to Photosales
Confirm that the confirmation dialog has the following appearance:

All the selected images have already been sent to Photosales

Confirm that the confirmation dialog has the following appearance:

Who should look at this?

@guardian/digital-cms

Tested? Documented?

locally by committer
locally by Guardian reviewer
on the Guardian's TEST environment
relevant documentation added or amended (if needed)

kahuna/public/js/components/gr-confirmation-modal/gr-confirmation-modal.css

kahuna/public/js/components/gr-confirmation-modal/gr-confirmation-modal.tsx

kahuna/public/js/search/results.js

kahuna/public/js/util/constants/sendToCapture-config.js

kahuna/public/js/components/gr-confirmation-modal/gr-confirmation-modal.tsx

AndyKilmory

All looks okay now - just 1 minor comment, but its an optional change

…tionality This PR introduces two new functionalities: - The ability for a user to add a 'send to photosales' syndication usage to an image, via the 'Send to Photosales button' - A generic React modal component, used in this case as a confirmation dialog As an archivist user of BBC Images, I want to be able to send certain images from BBC Images to BBC Photo Sales, through the Grid UI. This PR introduces this functionality, allowing a user to select a number of images and trigger the outbound photo sales process by clicking on the new 'Send to Photo Sales' button. Upon doing this the confirmation dialog will pop up, asking the user to confirm their choice. The dialog will have different text and button options depending on if the images selected already exist in photosales or not. Once the user has confirmed their intention to send the image, a syndication usage (with a 'pending' usage status) is added to each of the selected image, which is the trigger for an AWS step function that carries out the majority of the outbound logic. The Photosales functionality is BBC specific, hence it is disabled by default via the showSendToPhotoSales feature flag.

Georges-GNM · 2024-05-13T14:11:28Z

Hi, just trying to test this in our test environment, think we've got the right configuration (the showSendToPhotoSales is set to true and I can see it in the browser), but when trying to press the button with two newly uploaded photos selected, nothing seems to happen, I can see the following error in my browser console which refers to this line in result.js

The logic seems right to me though... have you seen this too?

Georges-GNM · 2024-05-13T14:36:01Z

usage/app/model/SyndicationUsageRequest.scala

@@ -7,12 +7,12 @@ import play.api.libs.json._
 case class SyndicationUsageRequest (
  partnerName: String,
  syndicatedBy: Option[String],
-  startPending: Option[Boolean],
+  startPending: Option[String],


Still reading through some of the other files, so sorry if I'm missing something, but it does feel like this is a bit more appropriate as a boolean - it looks like we mainly want to be able to say whether startPending is true or false?

Yeah, so like you can see it was originally a Boolean, and I'd agree that it does make more sense in this context. The reason this was changed (off the top of my head) was in order to be able to extend the postToUsages function to be able to process syndication usages, I can't remember exactly why, but it wasn't possible to do this with startPending as a Boolean

The brackets around validImages in sendToPhotosales was incorrect - by selecting [0] we've already resolved the array. Removing these brackets addresses this issue.

Conalb97 · 2024-05-14T09:06:15Z

Hi, just trying to test this in our test environment, think we've got the right configuration (the showSendToPhotoSales is set to true and I can see it in the browser), but when trying to press the button with two newly uploaded photos selected, nothing seems to happen, I can see the following error in my browser console which refers to this line in result.js The logic seems right to me though... have you seen this too?

Thanks for pointing this out!

The brackets around validImages in sendToPhotosales was incorrect - by selecting [0] we've already resolved the array.

Removing these brackets addresses this issue. This fix has been pushed in the latest commit.

Conalb97 force-pushed the conal/IMAGEDAM-1665-confirmationDialogAndPreventMultipleSend branch from 558159b to 8d28ee3 Compare May 7, 2024 15:36