Merge pull request #563 from guardian/cc/rrcp-image-url-tidy

RRCP tidy up
guardian · Mar 19, 2024 · 894373f · 894373f
2 parents 5cb34ba + f7875be
commit 894373f
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 92 deletions.
diff --git a/app/models/BannerDesign.scala b/app/models/BannerDesign.scala
@@ -18,38 +18,18 @@ object BannerDesignStatus {
 
 case class HeaderImage(
   mobileUrl: String,
-  tabletDesktopUrl: String, // deprecated
-  wideUrl: String, // deprecated
-
-  tabletUrl: Option[String], // new
-  desktopUrl: Option[String], // new
-
+  tabletUrl: String,
+  desktopUrl: String,
   altText: String
 )
-object HeaderImage {
-  import io.circe.generic.auto._
-  implicit val encoder = Encoder[HeaderImage]
-
-  // Modify the Decoder to use existing values for the new fields
-  val normalDecoder = Decoder[HeaderImage]
-  implicit val decoder = normalDecoder.map(image => {
-    val tabletUrl = image.tabletUrl.getOrElse(image.tabletDesktopUrl)
-    val desktopUrl = image.desktopUrl.getOrElse(image.wideUrl)
-    image.copy(tabletUrl = Some(tabletUrl), desktopUrl = Some(desktopUrl))
-  })
-}
 
 sealed trait BannerDesignVisual
 object BannerDesignVisual {
   case class Image(
     kind: String = "Image",
     mobileUrl: String,
-    tabletDesktopUrl: String, // deprecated
-    wideUrl: String, // deprecated
-
-    tabletUrl: Option[String],  // new
-    desktopUrl: Option[String], // new
-
+    tabletUrl: String,
+    desktopUrl: String,
     altText: String
   ) extends BannerDesignVisual
 
@@ -66,14 +46,6 @@ object BannerDesignVisual {
   import io.circe.generic.extras.auto._
   implicit val customConfig: Configuration = Configuration.default.withDiscriminator("kind")
 
-  // Modify the Decoder to use existing values for the new fields
-  val normalImageDecoder = Decoder[Image]
-  implicit val imageDecoder = normalImageDecoder.map(image => {
-    val tabletUrl = image.tabletUrl.getOrElse(image.tabletDesktopUrl)
-    val desktopUrl = image.desktopUrl.getOrElse(image.wideUrl)
-    image.copy(tabletUrl = Some(tabletUrl), desktopUrl = Some(desktopUrl))
-  })
-
   implicit val encoder = Encoder[BannerDesignVisual]
   implicit val decoder = Decoder[BannerDesignVisual]
 }

diff --git a/public/src/components/channelManagement/bannerDesigns/HeaderImageEditor.tsx b/public/src/components/channelManagement/bannerDesigns/HeaderImageEditor.tsx
@@ -11,8 +11,6 @@ const imageUrlValidation = {
 
 export const DEFAULT_HEADER_IMAGE_SETTINGS: BannerDesignHeaderImage = {
   mobileUrl: '',
-  tabletDesktopUrl: '',
-  wideUrl: '',
   tabletUrl: '',
   desktopUrl: '',
   altText: '',
@@ -33,8 +31,6 @@ export const HeaderImageEditor: React.FC<Props> = ({
 }: Props) => {
   const defaultValues: BannerDesignHeaderImage = {
     mobileUrl: headerImage?.mobileUrl ?? '',
-    tabletDesktopUrl: headerImage?.tabletDesktopUrl ?? '',
-    wideUrl: headerImage?.wideUrl ?? '',
     tabletUrl: headerImage?.tabletUrl ?? '',
     desktopUrl: headerImage?.desktopUrl ?? '',
     altText: headerImage?.altText ?? '',
@@ -48,26 +44,24 @@ export const HeaderImageEditor: React.FC<Props> = ({
   useEffect(() => {
     const isValid = Object.keys(errors).length === 0;
     onValidationChange('BannerHeaderImage', isValid);
-  }, [errors.mobileUrl, errors.tabletDesktopUrl, errors.wideUrl, errors.altText]);
+  }, [errors.mobileUrl, errors.tabletUrl, errors.desktopUrl, errors.altText]);
 
   useEffect(() => {
     reset(defaultValues);
   }, [
     defaultValues.mobileUrl,
-    defaultValues.tabletDesktopUrl,
-    defaultValues.wideUrl,
+    defaultValues.tabletUrl,
+    defaultValues.desktopUrl,
     defaultValues.altText,
   ]);
 
   const onSubmit = ({
     mobileUrl,
-    tabletDesktopUrl,
-    wideUrl,
     tabletUrl,
     desktopUrl,
     altText,
   }: BannerDesignHeaderImage): void => {
-    onChange({ mobileUrl, tabletDesktopUrl, wideUrl, tabletUrl, desktopUrl, altText });
+    onChange({ mobileUrl, tabletUrl, desktopUrl, altText });
   };
 
   const onRadioGroupChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
@@ -121,11 +115,11 @@ export const HeaderImageEditor: React.FC<Props> = ({
               required: EMPTY_ERROR_HELPER_TEXT,
               pattern: imageUrlValidation,
             })}
-            error={errors?.tabletDesktopUrl !== undefined}
-            helperText={errors?.tabletDesktopUrl?.message}
+            error={errors?.tabletUrl !== undefined}
+            helperText={errors?.tabletUrl?.message}
             onBlur={handleSubmit(onSubmit)}
-            name="tabletDesktopUrl"
-            label="Header Image URL (Tablet & Desktop)"
+            name="tabletUrl"
+            label="Header Image URL (Tablet)"
             margin="normal"
             variant="outlined"
             disabled={isDisabled}
@@ -136,11 +130,11 @@ export const HeaderImageEditor: React.FC<Props> = ({
               required: EMPTY_ERROR_HELPER_TEXT,
               pattern: imageUrlValidation,
             })}
-            error={errors?.wideUrl !== undefined}
-            helperText={errors?.wideUrl?.message}
+            error={errors?.desktopUrl !== undefined}
+            helperText={errors?.desktopUrl?.message}
             onBlur={handleSubmit(onSubmit)}
-            name="wideUrl"
-            label="Header Image URL (Wide)"
+            name="desktopUrl"
+            label="Header Image URL (Dekstop and above)"
             margin="normal"
             variant="outlined"
             disabled={isDisabled}

diff --git a/public/src/components/channelManagement/bannerDesigns/ImageEditor.tsx b/public/src/components/channelManagement/bannerDesigns/ImageEditor.tsx
@@ -56,36 +56,6 @@ export const ImageEditor: React.FC<Props> = ({
         disabled={isDisabled}
         fullWidth
       />
-      <TextField
-        inputRef={register({
-          required: EMPTY_ERROR_HELPER_TEXT,
-          pattern: imageUrlValidation,
-        })}
-        error={errors?.tabletDesktopUrl !== undefined}
-        helperText={errors?.tabletDesktopUrl?.message}
-        onBlur={handleSubmit(onChange)}
-        name="tabletDesktopUrl"
-        label="Banner Image URL (Tablet & Desktop)"
-        margin="normal"
-        variant="outlined"
-        disabled={isDisabled}
-        fullWidth
-      />
-      <TextField
-        inputRef={register({
-          required: EMPTY_ERROR_HELPER_TEXT,
-          pattern: imageUrlValidation,
-        })}
-        error={errors?.wideUrl !== undefined}
-        helperText={errors?.wideUrl?.message}
-        onBlur={handleSubmit(onChange)}
-        name="wideUrl"
-        label="Banner Image URL (Wide)"
-        margin="normal"
-        variant="outlined"
-        disabled={isDisabled}
-        fullWidth
-      />
       <TextField
         inputRef={register({
           required: EMPTY_ERROR_HELPER_TEXT,
@@ -110,13 +80,12 @@ export const ImageEditor: React.FC<Props> = ({
         helperText={errors?.desktopUrl?.message}
         onBlur={handleSubmit(onChange)}
         name="desktopUrl"
-        label="Banner Image URL (Desktop)"
+        label="Banner Image URL (Desktop and above)"
         margin="normal"
         variant="outlined"
         disabled={isDisabled}
         fullWidth
       />
-
       <TextField
         inputRef={register({
           required: EMPTY_ERROR_HELPER_TEXT,

diff --git a/public/src/components/channelManagement/bannerDesigns/utils/defaults.ts b/public/src/components/channelManagement/bannerDesigns/utils/defaults.ts
@@ -9,10 +9,6 @@ export const defaultBannerImage: BannerDesignImage = {
   kind: 'Image',
   mobileUrl:
     'https://i.guim.co.uk/img/media/630a3735c02e195be89ab06fd1b8192959e282ab/0_0_1172_560/500.png?width=500&quality=75&s=937595b3f471d6591475955335c7c023',
-  tabletDesktopUrl:
-    'https://i.guim.co.uk/img/media/20cc6e0fa146574bb9c4ed410ac1a089fab02ce0/0_0_1428_1344/500.png?width=500&quality=75&s=fe64f647f74a3cb671f8035a473b895f',
-  wideUrl:
-    'https://i.guim.co.uk/img/media/6c933a058d1ce37a5ad17f79895906150812dfee/0_0_1768_1420/500.png?width=500&quality=75&s=9277532ddf184a308e14218e3576543b',
   tabletUrl:
     'https://i.guim.co.uk/img/media/cb654baf73bec78a73dbd656e865dedc3807ec74/0_0_300_300/300.jpg?width=300&height=300&quality=75&s=28324a5eb4f5f18eabd8c7b1a59ed150',
   desktopUrl:

diff --git a/public/src/models/bannerDesign.ts b/public/src/models/bannerDesign.ts
@@ -39,12 +39,8 @@ export interface TickerDesign {
 
 export interface BannerDesignHeaderImage {
   mobileUrl: string;
-  tabletDesktopUrl: string; // deprecated
-  wideUrl: string; // deprecated
-
-  tabletUrl: string; // new
-  desktopUrl: string; // new
-
+  tabletUrl: string;
+  desktopUrl: string;
   altText: string;
 }