Fixed incorrectly handled image upload errors (#1223)

* fixed incorrectly handled image upload errors

* updated Changelog

* updated defaultMessages.json

* fix for collections and products

* fix for user avatar upload error

* implemented changes after review

* fixed conflict

CHANGELOG.md

@@ -59,10 +59,10 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add generic filter validation - #1187 by @jwm0
 - Fix duplicated labels in column picker - #1197 by @orzechdev
 - Fix forbidden null sending as attribute value - #1201 by @orzechdev
-- Fix huge payload issue for plugins view - #1203 by @kamilpastuszka
 - Fix missing call for update metadata mutation - #1207 by @orzechdev
 - Disable next step when no value selected in variant selector - #1218 by @orzechdev
 - Fix order links on home page - #1219 by @jwm0
+- Fix incorrectly handled image upload errors - #1223 by @kamilpastuszka
 - Fix huge payload issue for plugins view - #1203 by @kamilpastuszka
 - Fix content type validation in create page view - #1205 by @orzechdev
 - Fix list pagination crash on search - #1230 by @orzechdev

locale/defaultMessages.json

@@ -3392,6 +3392,12 @@
   "src_dot_hooks_dot_3382262667": {
     "string": "Variant {name} has been set as default."
   },
+  "src_dot_imageUploadErrorText": {
+    "string": "There was a poblem with the file you uploaded as an image and it couldn't be used. Please try a different file."
+  },
+  "src_dot_imgageUploadErrorTitle": {
+    "string": "Couldn't process image"
+  },
   "src_dot_insufficientPermissions": {
     "string": "Insufficient permissions"
   },

src/categories/views/CategoryDetails.tsx

@@ -11,7 +11,7 @@ import useNotifier from "@saleor/hooks/useNotifier";
 import usePaginator, {
   createPaginationState
 } from "@saleor/hooks/usePaginator";
-import { commonMessages } from "@saleor/intl";
+import { commonMessages, errorMessages } from "@saleor/intl";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
 import { mapEdgesToItems, mapNodeToChoice } from "@saleor/utils/maps";
@@ -115,7 +115,8 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
       if (backgroundImageError) {
         notify({
           status: "error",
-          text: intl.formatMessage(commonMessages.somethingWentWrong)
+          title: intl.formatMessage(errorMessages.imgageUploadErrorTitle),
+          text: intl.formatMessage(errorMessages.imageUploadErrorText)
         });
       }
     }

src/collections/views/CollectionDetails.tsx

@@ -18,7 +18,7 @@ import useNotifier from "@saleor/hooks/useNotifier";
 import usePaginator, {
   createPaginationState
 } from "@saleor/hooks/usePaginator";
-import { commonMessages } from "@saleor/intl";
+import { commonMessages, errorMessages } from "@saleor/intl";
 import useProductSearch from "@saleor/searches/useProductSearch";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
@@ -100,7 +100,8 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
       if (backgroundImageError) {
         notify({
           status: "error",
-          text: intl.formatMessage(commonMessages.somethingWentWrong)
+          title: intl.formatMessage(errorMessages.imgageUploadErrorTitle),
+          text: intl.formatMessage(errorMessages.imageUploadErrorText)
         });
       }
     }

src/intl.ts

@@ -52,6 +52,7 @@ export const commonMessages = defineMessages({
   generalInformations: {
     defaultMessage: "General Information"
   },
+
   insufficientPermissions: {
     defaultMessage: "Insufficient permissions"
   },
@@ -110,6 +111,16 @@ export const commonMessages = defineMessages({
   }
 });
 
+export const errorMessages = defineMessages({
+  imgageUploadErrorTitle: {
+    defaultMessage: "Couldn't process image"
+  },
+  imageUploadErrorText: {
+    defaultMessage:
+      "There was a poblem with the file you uploaded as an image and it couldn't be used. Please try a different file."
+  }
+});
+
 export const buttonMessages = defineMessages({
   accept: {
     defaultMessage: "Accept",

src/products/views/ProductUpdate/ProductUpdate.tsx

@@ -27,7 +27,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import useOnSetDefaultVariant from "@saleor/hooks/useOnSetDefaultVariant";
 import useShop from "@saleor/hooks/useShop";
-import { commonMessages } from "@saleor/intl";
+import { commonMessages, errorMessages } from "@saleor/intl";
 import ProductVariantCreateDialog from "@saleor/products/components/ProductVariantCreateDialog";
 import {
   useProductChannelListingUpdate,
@@ -226,7 +226,8 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
       if (imageError) {
         notify({
           status: "error",
-          text: intl.formatMessage(commonMessages.somethingWentWrong)
+          title: intl.formatMessage(errorMessages.imgageUploadErrorTitle),
+          text: intl.formatMessage(errorMessages.imageUploadErrorText)
         });
       }
     }

src/staff/views/StaffDetails.tsx

@@ -6,7 +6,7 @@ import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import useUser from "@saleor/hooks/useUser";
-import { commonMessages } from "@saleor/intl";
+import { commonMessages, errorMessages } from "@saleor/intl";
 import { getStringOrPlaceholder, maybe } from "@saleor/misc";
 import usePermissionGroupSearch from "@saleor/searches/usePermissionGroupSearch";
 import { mapEdgesToItems } from "@saleor/utils/maps";
@@ -111,6 +111,12 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
               status: "success",
               text: intl.formatMessage(commonMessages.savedChanges)
             });
+          } else {
+            notify({
+              status: "error",
+              title: intl.formatMessage(errorMessages.imgageUploadErrorTitle),
+              text: intl.formatMessage(errorMessages.imageUploadErrorText)
+            });
           }
         };
         const handleStaffMemberAvatarDelete = (data: StaffAvatarDelete) => {