diff --git a/app/src/components/domain/ImageWithCaptionInput/index.tsx b/app/src/components/domain/ImageWithCaptionInput/index.tsx index 406a54690a..ec7c546902 100644 --- a/app/src/components/domain/ImageWithCaptionInput/index.tsx +++ b/app/src/components/domain/ImageWithCaptionInput/index.tsx @@ -30,6 +30,7 @@ interface Props { name: N; url: SupportedPaths; value: Value | null | undefined; + readOnly: boolean; onChange: (value: SetValueArg | undefined, name: N) => void; error: ObjectError | undefined; fileIdToUrlMap: Record; @@ -44,6 +45,7 @@ interface Props { function ImageWithCaptionInput(props: Props) { const { className, + readOnly, name, value, url, @@ -92,6 +94,7 @@ function ImageWithCaptionInput(props: Props) name="id" accept="image/*" value={value?.id} + readOnly={readOnly} onChange={handleFileInputChange} url={url} fileIdToUrlMap={fileIdToUrlMap} @@ -116,6 +119,7 @@ function ImageWithCaptionInput(props: Props) className={styles.captionInput} name="caption" value={value?.caption} + readOnly={readOnly} onChange={setFieldValue} error={error?.caption} placeholder={strings.imageWithCaptionEnterCaption} diff --git a/app/src/components/domain/LanguageMismatchMessage/i18n.json b/app/src/components/domain/LanguageMismatchMessage/i18n.json index cbf3857ced..fd8ba0f291 100644 --- a/app/src/components/domain/LanguageMismatchMessage/i18n.json +++ b/app/src/components/domain/LanguageMismatchMessage/i18n.json @@ -1,8 +1,8 @@ { "namespace": "languageMismatchMessage", "strings": { - "languageMismatchErrorTitle": "Edit not available in selected language!", - "languageMismatchErrorMessage": "This form was originally created in {originalLanguage} and cannot be edited in a different language!", - "languageMismatchHelpMessage": "Please change the language to {originalLanguage} to edit it!" + "languageMismatchErrorTitle": "Edit not available in {selectedLanguage} language!", + "languageMismatchErrorMessage": "This is because form was originally created in {originalLanguage} language and edits cannot be edited in the {selectedLanguage} language.", + "languageMismatchHelpMessage": "To make changes, please switch to the original language of the form." } } diff --git a/app/src/components/domain/LanguageMismatchMessage/index.tsx b/app/src/components/domain/LanguageMismatchMessage/index.tsx index 104a6a567b..6e37324f62 100644 --- a/app/src/components/domain/LanguageMismatchMessage/index.tsx +++ b/app/src/components/domain/LanguageMismatchMessage/index.tsx @@ -14,6 +14,7 @@ interface Props { // FIXME: typings should be fixed in the server // this should be of type Language originalLanguage: string | undefined; + selectedLanguage: Language; } function LanguageMismatchMessage(props: Props) { @@ -21,7 +22,8 @@ function LanguageMismatchMessage(props: Props) { const { title = strings.languageMismatchErrorTitle, - originalLanguage = 'en', + originalLanguage, + selectedLanguage, } = props; return ( @@ -32,16 +34,13 @@ function LanguageMismatchMessage(props: Props) { resolveToString( strings.languageMismatchErrorMessage, // FIXME: this should not require cast - { originalLanguage: languageNameMapEn[originalLanguage as Language] ?? '--' }, - ) - } - actions={ - resolveToString( - strings.languageMismatchHelpMessage, - // FIXME: this should not require cast - { originalLanguage: languageNameMapEn[originalLanguage as Language] ?? '--' }, + { + originalLanguage: languageNameMapEn[originalLanguage as Language] ?? '--', + selectedLanguage: languageNameMapEn[selectedLanguage] ?? '--', + }, ) } + actions={strings.languageMismatchHelpMessage} /> ); } diff --git a/app/src/components/domain/MultiImageWithCaptionInput/index.tsx b/app/src/components/domain/MultiImageWithCaptionInput/index.tsx index 9e7ba273a1..2f56e65e02 100644 --- a/app/src/components/domain/MultiImageWithCaptionInput/index.tsx +++ b/app/src/components/domain/MultiImageWithCaptionInput/index.tsx @@ -45,6 +45,7 @@ interface Props { label: React.ReactNode; icons?: React.ReactNode; actions?: React.ReactNode; + readOnly?: boolean; disabled?: boolean; } @@ -62,6 +63,7 @@ function MultiImageWithCaptionInput(props: Prop label, icons, actions, + readOnly, disabled, } = props; @@ -139,6 +141,7 @@ function MultiImageWithCaptionInput(props: Prop icons={icons} actions={actions} withoutPreview + readOnly={readOnly} disabled={disabled} > {label} @@ -168,7 +171,7 @@ function MultiImageWithCaptionInput(props: Prop ariaLabel={strings.removeImagesButtonTitle} variant="secondary" spacing="none" - disabled={disabled} + disabled={disabled || readOnly} > @@ -187,6 +190,7 @@ function MultiImageWithCaptionInput(props: Prop onChange={handleCaptionChange} error={imageError?.caption} placeholder={strings.enterCaptionPlaceholder} + readOnly={readOnly} disabled={disabled} /> diff --git a/app/src/components/domain/SourceInformationInput/index.tsx b/app/src/components/domain/SourceInformationInput/index.tsx index 8ee3a02713..33dc8dc73c 100644 --- a/app/src/components/domain/SourceInformationInput/index.tsx +++ b/app/src/components/domain/SourceInformationInput/index.tsx @@ -31,6 +31,7 @@ interface Props { onRemove: (index: number) => void; index: number; disabled?: boolean; + readOnly: boolean; } function SourceInformationInput(props: Props) { @@ -41,6 +42,7 @@ function SourceInformationInput(props: Props) { index, onRemove, disabled, + readOnly, } = props; const strings = useTranslation(i18n); @@ -92,6 +94,7 @@ function SourceInformationInput(props: Props) { value={value.source_name} error={error?.source_name} onChange={onFieldChange} + readOnly={readOnly} disabled={disabled} /> @@ -258,7 +263,7 @@ function Actions(props: Props) { onRemove={onNsActionRemove} error={getErrorObject(error?.national_society_actions)} titleDisplayMap={nsActionTitleDisplayMap} - disabled={disabled} + disabled={readOnly || disabled} /> ))} @@ -272,6 +277,7 @@ function Actions(props: Props) {