Do not spread image overrides into existing fields, using chefImageOv…

…erride instead
guardian · Jun 6, 2024 · c074368 · c074368
1 parent 5cd8690
commit c074368
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 76 deletions.
diff --git a/app/model/editions/EditionsCard.scala b/app/model/editions/EditionsCard.scala
@@ -47,6 +47,7 @@ case class CardMetadata(
  backgroundHex: Option[String] = None, // Chef
  foregroundHex: Option[String] = None, // Chef
  paletteId: Option[String] = None, // Chef
+ chefImageOverride: Option[Image] = None, // Chef
 )
 
 object CardMetadata {

diff --git a/app/model/editions/client/ClientCardMetadata.scala b/app/model/editions/client/ClientCardMetadata.scala
@@ -40,7 +40,8 @@ case class ClientCardMetadata(
  bio: Option[String], // Chef
  backgroundHex: Option[String], // Chef
  foregroundHex: Option[String], // Chef
- paletteId: Option[String] // Chef
+ paletteId: Option[String], // Chef
+ chefImageOverride: Option[Image] // Chef
 ) {
  def toCardMetadata: CardMetadata = {
  val cutoutImage: Option[Image] = (imageCutoutSrcHeight, imageCutoutSrcWidth, imageCutoutSrc, imageCutoutSrcOrigin) match {
@@ -85,7 +86,8 @@ case class ClientCardMetadata(
  bio,
  backgroundHex,
  foregroundHex,
- paletteId
+ paletteId,
+ chefImageOverride
  )
  }
 }
@@ -130,7 +132,8 @@ object ClientCardMetadata {
  cardMetadata.bio,
  cardMetadata.backgroundHex,
  cardMetadata.foregroundHex,
- cardMetadata.paletteId
+ cardMetadata.paletteId,
+ cardMetadata.chefImageOverride
  )
  }
 }
diff --git a/fronts-client/src/bundles/chefsBundle.ts b/fronts-client/src/bundles/chefsBundle.ts
@@ -7,6 +7,7 @@ import { selectCard } from 'selectors/shared';
 import { State } from 'types/State';
 import { createSelector } from 'reselect';
 import { stripHtml } from 'util/sanitizeHTML';
+import { ChefCardMeta } from 'types/Collection';
 
 const sanitizeChef = (chef: Chef) => ({
  ...chef,

diff --git a/fronts-client/src/components/card/chef/ChefCard.tsx b/fronts-client/src/components/card/chef/ChefCard.tsx
@@ -85,7 +85,9 @@ export const ChefCard = ({
  </CardHeadingContainer>
  </CardContent>
  <ImageAndGraphWrapper size={size}>
- <ThumbnailSmall url={chef?.bylineLargeImageUrl} />
+ <ThumbnailSmall
+ url={chef?.chefImageOverride?.src ?? chef?.bylineLargeImageUrl}
+ />
  </ImageAndGraphWrapper>
  <HoverActionsAreaOverlay data-testid="hover-overlay">
  <HoverActionsButtonWrapper

diff --git a/fronts-client/src/components/form/ChefMetaForm.tsx b/fronts-client/src/components/form/ChefMetaForm.tsx
@@ -9,7 +9,6 @@ import { Card, CardSizes, ChefCardMeta } from '../../types/Collection';
 import { Dispatch } from '../../types/Store';
 import { selectors } from '../../bundles/chefsBundle';
 import { State } from '../../types/State';
-import { ChefCardFormData, intToStr, strToInt } from '../../util/form';
 import Button from 'components/inputs/ButtonDefault';
 import { selectCard } from 'selectors/shared';
 import { FormContainer } from 'components/form/FormContainer';
@@ -49,7 +48,7 @@ interface FormProps {
 }
 
 type ComponentProps = FormProps &
- InjectedFormProps<ChefCardFormData, FormProps, {}>;
+ InjectedFormProps<ChefCardMeta, FormProps, {}>;
 
 const Form = ({
  card,
@@ -113,9 +112,11 @@ const Form = ({
  <ImageRowContainer size={size}>
  <Row>
  <ImageCol>
- <InputLabel htmlFor="image">Replace image</InputLabel>
+ <InputLabel htmlFor="chefImageOverride">
+ Replace image
+ </InputLabel>
  <Field
- name="image"
+ name="chefImageOverride"
  component={InputImage}
  criteria={cardImageCriteria}
  />
@@ -142,46 +143,10 @@ const Form = ({
  );
 };
 
-const chefMetaToForm = (meta: ChefCardMeta): ChefCardFormData => {
- const {
- imageSrc,
- imageSrcHeight,
- imageSrcWidth,
- imageSrcThumb,
- imageSrcOrigin,
- bio,
- ...valuesToCopy
- } = meta;
-
- return {
- ...valuesToCopy,
- bio: bio ?? '',
- image: {
- src: imageSrc,
- height: strToInt(imageSrcHeight),
- width: strToInt(imageSrcWidth),
- thumb: imageSrcThumb,
- origin: imageSrcOrigin,
- },
- };
-};
-
-const formToChefMeta = (form: ChefCardFormData): ChefCardMeta => {
- const { image, ...valuesToCopy } = form;
- return {
- ...valuesToCopy,
- imageSrc: image?.src,
- imageSrcHeight: intToStr(image?.height),
- imageSrcWidth: intToStr(image?.width),
- imageSrcThumb: image?.thumb,
- imageSrcOrigin: image?.origin,
- };
-};
-
-const ConnectedChefForm = reduxForm<ChefCardFormData, FormProps, {}>({
+const ConnectedChefForm = reduxForm<ChefCardMeta, FormProps, {}>({
  destroyOnUnmount: true,
- onSubmit: (values: ChefCardFormData, dispatch: Dispatch, props: FormProps) =>
- dispatch(() => props.onSave(formToChefMeta(values))),
+ onSubmit: (values: ChefCardMeta, dispatch: Dispatch, props: FormProps) =>
+ dispatch(() => props.onSave(values)),
 })(Form);
 
 interface ChefMetaFormProps {
@@ -231,7 +196,7 @@ export const ChefMetaForm = ({ cardId, form, ...rest }: ChefMetaFormProps) => {
  chef={chef}
  chefWithoutOverrides={chefWithoutOverrides}
  card={card}
- initialValues={chefMetaToForm(card.meta as ChefCardMeta)}
+ initialValues={card.meta as ChefCardMeta}
  openPaletteModal={openPaletteModal}
  currentPaletteId={paletteId}
  currentForegroundHex={foregroundHex}

diff --git a/fronts-client/src/types/Collection.ts b/fronts-client/src/types/Collection.ts
@@ -41,7 +41,7 @@ type NestedCard = NestedCardRootFields & {
  };
 };
 
-interface CardRootMeta {
+interface CardRootMeta extends ChefCardMeta {
  group?: string;
  headline?: string;
  trailText?: string;
@@ -87,7 +87,6 @@ interface CardRootMeta {
  coverCardImageReplace?: boolean;
  coverCardMobileImage?: ImageData;
  coverCardTabletImage?: ImageData;
- bio?: string;
 }
 
 type CardRootFields = NestedCardRootFields & {
@@ -98,16 +97,21 @@ type CardMeta = CardRootMeta & {
  supporting?: string[];
 };
 
+export interface ImageData {
+ src?: string;
+ width?: number;
+ height?: number;
+ origin?: string;
+ thumb?: string;
+ caption?: string;
+}
+
 interface ChefCardMeta {
  bio?: string;
- foregroundHex: string;
- backgroundHex: string;
- paletteId: string;
- imageSrc?: string;
- imageSrcThumb?: string;
- imageSrcWidth?: string;
- imageSrcHeight?: string;
- imageSrcOrigin?: string;
+ foregroundHex?: string;
+ backgroundHex?: string;
+ paletteId?: string;
+ chefImageOverride?: ImageData;
 }
 
 interface Card extends CardRootFields {

diff --git a/fronts-client/src/util/form.ts b/fronts-client/src/util/form.ts
@@ -5,20 +5,12 @@ import clamp from 'lodash/clamp';
 import pickBy from 'lodash/pickBy';
 import { isDirty } from 'redux-form';
 import pageConfig from 'util/extractConfigFromPage';
-import { CardMeta } from 'types/Collection';
+import { CardMeta, ImageData } from 'types/Collection';
 import { DerivedArticle } from 'types/Article';
 import { CapiArticle } from 'types/Capi';
 import type { State } from 'types/State';
 import { selectCard } from 'selectors/shared';
 
-export interface ChefCardFormData {
- bio: string;
- foregroundHex: string;
- backgroundHex: string;
- paletteId: string;
- image: ImageData;
-}
-
 export interface CardFormData {
  headline: string;
  isBoosted: boolean;
@@ -51,15 +43,6 @@ export interface CardFormData {
 
 export type FormFields = keyof CardFormData;
 
-export interface ImageData {
- src?: string;
- width?: number;
- height?: number;
- origin?: string;
- thumb?: string;
- caption?: string;
-}
-
 export interface CapiFields {
  headline: string;
  trailText: string;