Array fallback fixes (#1219)

* Array fallback fixes

* Update snapshots & changelog

CHANGELOG.md

@@ -60,6 +60,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fix duplicated labels in column picker - #1197 by @orzechdev
 - Fix forbidden null sending as attribute value - #1201 by @orzechdev
 - Fix missing call for update metadata mutation - #1207 by @orzechdev
+- Fix order links on home page - #1219 by @jwm0
 
 # 2.11.1
 

src/attributes/utils/data.ts

@@ -154,7 +154,7 @@ export const mergeChoicesWithValues = (
     | PageDetails_page_attributes
     | SelectedVariantAttributeFragment
 ) => {
-  const choices = mapEdgesToItems(attribute.attribute.choices);
+  const choices = mapEdgesToItems(attribute.attribute.choices) || [];
   const valuesToConcat = attribute.values.filter(
     value => !choices.some(choice => choice.id === value.id)
   );

src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx

@@ -2,7 +2,7 @@ import { Button, Typography } from "@material-ui/core";
 import AppHeader from "@saleor/components/AppHeader";
 import Container from "@saleor/components/Container";
 import PageHeader from "@saleor/components/PageHeader";
-import { renderCollection } from "@saleor/misc";
+import { getStringOrPlaceholder, renderCollection } from "@saleor/misc";
 import { makeStyles } from "@saleor/theme";
 import React from "react";
 import { defineMessages, useIntl } from "react-intl";
@@ -86,7 +86,9 @@ const CustomerAddressListPage: React.FC<CustomerAddressListPageProps> = props =>
   const intl = useIntl();
 
   const isEmpty = customer?.addresses?.length === 0;
-  const fullName = [customer?.firstName, customer?.lastName].join(" ") || "...";
+  const fullName = getStringOrPlaceholder(
+    customer && [customer.firstName, customer.lastName].join(" ")
+  );
 
   return (
     <Container>

src/customers/views/CustomerDetails.tsx

@@ -5,6 +5,7 @@ import { WindowTitle } from "@saleor/components/WindowTitle";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { commonMessages } from "@saleor/intl";
+import { getStringOrPlaceholder } from "@saleor/misc";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
 import {
   useMetadataUpdate,
@@ -13,7 +14,6 @@ import {
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { maybe } from "../../misc";
 import { orderListUrl, orderUrl } from "../../orders/urls";
 import CustomerDetailsPage, {
   CustomerDetailsPageFormData
@@ -114,11 +114,9 @@ export const CustomerDetailsView: React.FC<CustomerDetailsViewProps> = ({
 
                 return (
                   <>
-                    <WindowTitle
+                    <WindowTitle title={user?.email} />
-                      title={maybe(() => customerDetails.data.user.email)}
-                    />
                     <CustomerDetailsPage
-                      customer={maybe(() => customerDetails.data.user)}
+                      customer={user}
                       disabled={
                         customerDetails.loading ||
                         updateCustomerOpts.loading ||
@@ -144,9 +142,7 @@ export const CustomerDetailsView: React.FC<CustomerDetailsViewProps> = ({
                       onViewAllOrdersClick={() =>
                         navigate(
                           orderListUrl({
-                            customer: maybe(
+                            customer: user?.email
-                              () => customerDetails.data.user.email
-                            )
                           })
                         )
                       }
@@ -169,10 +165,7 @@ export const CustomerDetailsView: React.FC<CustomerDetailsViewProps> = ({
                           values={{
                             email: (
                               <strong>
-                                {maybe(
+                                {getStringOrPlaceholder(user?.email)}
-                                  () => customerDetails.data.user.email,
-                                  "..."
-                                )}
                               </strong>
                             )
                           }}

src/discounts/views/SaleList/filters.ts

@@ -59,14 +59,10 @@ export function getFilterOpts(
     },
     status: {
       active: !!maybe(() => params.status),
-      value: maybe(
+      value: dedupeFilter(
-        () =>
+        params.status?.map(status =>
-          dedupeFilter(
+          findValueInEnum(status, DiscountStatusEnum)
-            params.status.map(status =>
+        ) || []
-              findValueInEnum(status, DiscountStatusEnum)
-            )
-          ),
-        []
       )
     }
   };

src/discounts/views/VoucherList/filters.ts

@@ -41,12 +41,9 @@ export function getFilterOpts(
     },
     saleType: {
       active: !!maybe(() => params.type),
-      value: maybe(
+      value: dedupeFilter(
-        () =>
+        params.type?.map(type => findValueInEnum(type, VoucherDiscountType)) ||
-          dedupeFilter(
+          []
-            params.type.map(type => findValueInEnum(type, VoucherDiscountType))
-          ),
-        []
       )
     },
     started: {
@@ -64,14 +61,10 @@ export function getFilterOpts(
     },
     status: {
       active: !!maybe(() => params.status),
-      value: maybe(
+      value: dedupeFilter(
-        () =>
+        params.status?.map(status =>
-          dedupeFilter(
+          findValueInEnum(status, DiscountStatusEnum)
-            params.status.map(status =>
+        ) || []
-              findValueInEnum(status, DiscountStatusEnum)
-            )
-          ),
-        []
       )
     },
     timesUsed: {

src/home/views/index.tsx

@@ -40,21 +40,24 @@ const HomeSection = () => {
       onOrdersToCaptureClick={() =>
         navigate(
           orderListUrl({
-            status: [OrderStatusFilter.READY_TO_CAPTURE]
+            status: [OrderStatusFilter.READY_TO_CAPTURE],
+            channel: [channel?.id]
           })
         )
       }
       onOrdersToFulfillClick={() =>
         navigate(
           orderListUrl({
-            status: [OrderStatusFilter.READY_TO_FULFILL]
+            status: [OrderStatusFilter.READY_TO_FULFILL],
+            channel: [channel?.id]
           })
         )
       }
       onProductsOutOfStockClick={() =>
         navigate(
           productListUrl({
-            stockStatus: StockAvailability.OUT_OF_STOCK
+            stockStatus: StockAvailability.OUT_OF_STOCK,
+            channel: channel?.slug
           })
         )
       }

src/navigation/views/MenuList/MenuList.tsx

@@ -9,7 +9,7 @@ import usePaginator, {
   createPaginationState
 } from "@saleor/hooks/usePaginator";
 import { buttonMessages, commonMessages } from "@saleor/intl";
-import { maybe } from "@saleor/misc";
+import { getStringOrPlaceholder, maybe } from "@saleor/misc";
 import { getById } from "@saleor/orders/components/OrderReturnPage/utils";
 import { ListViews } from "@saleor/types";
 import createSortHandler from "@saleor/utils/handlers/sortHandler";
@@ -209,10 +209,11 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
                         defaultMessage="Are you sure you want to delete {menuName}?"
                         id="menuListDeleteMenuContent"
                         values={{
-                          menuName:
+                          menuName: getStringOrPlaceholder(
                             mapEdgesToItems(data?.menus)?.find(
                               getById(params.id)
-                            )?.name || "..."
+                            )?.name
+                          )
                         }}
                       />
                     </DialogContentText>

src/orders/urls.ts

@@ -6,7 +6,6 @@ import {
   BulkAction,
   Dialog,
   Filters,
-  FiltersAsDictWithMultipleValues,
   FiltersWithMultipleValues,
   Pagination,
   SingleAction,
@@ -27,16 +26,12 @@ export enum OrderListUrlFiltersEnum {
   query = "query"
 }
 export enum OrderListUrlFiltersWithMultipleValues {
-  status = "status"
+  status = "status",
-}
-
-export enum OrderListUrlFiltersDictWithMultipleValues {
   channel = "channel"
 }
 
 export type OrderListUrlFilters = Filters<OrderListUrlFiltersEnum> &
-  FiltersWithMultipleValues<OrderListUrlFiltersWithMultipleValues> &
+  FiltersWithMultipleValues<OrderListUrlFiltersWithMultipleValues>;
-  FiltersAsDictWithMultipleValues<OrderListUrlFiltersDictWithMultipleValues>;
 export type OrderListUrlDialog = "cancel" | CreateOrderDialog | TabActionDialog;
 export enum OrderListUrlSortField {
   number = "number",

src/orders/views/OrderList/OrderList.tsx

@@ -71,7 +71,7 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
     onCompleted: handleCreateOrderCreateSuccess
   });
 
-  const { channel, availableChannels } = useAppChannel();
+  const { channel, availableChannels } = useAppChannel(false);
   const limitOpts = useShopLimitsQuery({
     variables: {
       orders: true

src/orders/views/OrderList/filters.ts

@@ -22,7 +22,6 @@ import {
 } from "../../../utils/filters";
 import {
   OrderListUrlFilters,
-  OrderListUrlFiltersDictWithMultipleValues,
   OrderListUrlFiltersEnum,
   OrderListUrlFiltersWithMultipleValues,
   OrderListUrlQueryParams
@@ -57,9 +56,9 @@ export function getFilterOpts(
     status: {
       active: params?.status !== undefined,
       value: dedupeFilter(
-        params?.status?.map(status =>
+        params.status?.map(status =>
           findValueInEnum(status, OrderStatusFilter)
-        )
+        ) || []
       )
     }
   };
@@ -103,7 +102,7 @@ export function getFilterQueryParam(
     case OrderFilterKeys.channel:
       return getMultipleValueQueryParam(
         filter,
-        OrderListUrlFiltersDictWithMultipleValues.channel
+        OrderListUrlFiltersWithMultipleValues.channel
       );
 
     case OrderFilterKeys.customer:

src/pages/utils/data.ts

@@ -36,7 +36,7 @@ export function getAttributeInputFromPageType(
       entityType: attribute.entityType,
       inputType: attribute.inputType,
       isRequired: attribute.valueRequired,
-      values: mapEdgesToItems(attribute.choices)
+      values: mapEdgesToItems(attribute.choices) || []
     },
     id: attribute.id,
     label: attribute.name,

src/pages/views/PageCreate.tsx

@@ -87,9 +87,8 @@ export const PageCreate: React.FC<PageCreateProps> = ({ params }) => {
     skip: !selectedPageTypeId
   });
 
-  const attributeValues = mapEdgesToItems(
+  const attributeValues =
-    searchAttributeValuesOpts?.data?.attribute.choices
+    mapEdgesToItems(searchAttributeValuesOpts?.data?.attribute.choices) || [];
-  );
 
   const [uploadFile, uploadFileOpts] = useFileUploadMutation({});
 
@@ -192,7 +191,9 @@ export const PageCreate: React.FC<PageCreateProps> = ({ params }) => {
               saveButtonBarState={pageCreateOpts.status}
               page={null}
               attributeValues={attributeValues}
-              pageTypes={mapEdgesToItems(searchPageTypesOpts?.data?.search)}
+              pageTypes={
+                mapEdgesToItems(searchPageTypesOpts?.data?.search) || []
+              }
               onBack={() => navigate(pageListUrl())}
               onRemove={() => undefined}
               onSubmit={handleSubmit}
@@ -202,10 +203,12 @@ export const PageCreate: React.FC<PageCreateProps> = ({ params }) => {
                 params.action === "assign-attribute-value" && params.id
               }
               onAssignReferencesClick={handleAssignAttributeReferenceClick}
-              referencePages={mapEdgesToItems(searchPagesOpts?.data?.search)}
+              referencePages={
-              referenceProducts={mapEdgesToItems(
+                mapEdgesToItems(searchPagesOpts?.data?.search) || []
-                searchProductsOpts?.data?.search
+              }
-              )}
+              referenceProducts={
+                mapEdgesToItems(searchProductsOpts?.data?.search) || []
+              }
               fetchReferencePages={searchPages}
               fetchMoreReferencePages={fetchMoreReferencePages}
               fetchReferenceProducts={searchProducts}

src/pages/views/PageDetails.tsx

@@ -179,9 +179,8 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
     result: searchAttributeValuesOpts
   } = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
 
-  const attributeValues = mapEdgesToItems(
+  const attributeValues =
-    searchAttributeValuesOpts?.data?.attribute.choices
+    mapEdgesToItems(searchAttributeValuesOpts?.data?.attribute.choices) || [];
-  );
 
   const fetchMoreReferencePages = {
     hasMore: searchPagesOpts.data?.search?.pageInfo?.hasNextPage,
@@ -213,7 +212,7 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
         errors={pageUpdateOpts.data?.pageUpdate.errors || []}
         saveButtonBarState={pageUpdateOpts.status}
         page={pageDetails.data?.page}
-        attributeValues={attributeValues || []}
+        attributeValues={attributeValues}
         onBack={() => navigate(pageListUrl())}
         onRemove={() =>
           navigate(

src/plugins/views/PluginList/filters.ts

@@ -54,7 +54,7 @@ export function getFilterOpts(
       loading,
       onFetchMore,
       onSearchChange,
-      value: maybe(() => dedupeFilter(params.channels), [])
+      value: dedupeFilter(params.channels || [])
     },
     type: {
       active: !!params.type,
@@ -63,7 +63,8 @@ export function getFilterOpts(
     status: {
       active: !!params.channels?.length && params.active !== undefined,
       value:
-        !!dedupeFilter(params.channels)?.length && params.active !== undefined
+        !!dedupeFilter(params.channels || [])?.length &&
+        params.active !== undefined
     }
   };
 }

src/products/utils/data.ts

@@ -74,7 +74,7 @@ export function getAttributeInputFromProductType(
       entityType: attribute.entityType,
       inputType: attribute.inputType,
       isRequired: attribute.valueRequired,
-      values: mapEdgesToItems(attribute.choices),
+      values: mapEdgesToItems(attribute.choices) || [],
       unit: attribute.unit
     },
     id: attribute.id,
@@ -92,7 +92,7 @@ export function getAttributeInputFromAttributes(
       entityType: attribute.entityType,
       inputType: attribute.inputType,
       isRequired: attribute.valueRequired,
-      values: mapEdgesToItems(attribute.choices),
+      values: mapEdgesToItems(attribute.choices) || [],
       unit: attribute.unit,
       variantAttributeScope
     },

src/products/views/ProductCreate/ProductCreate.tsx

@@ -128,7 +128,8 @@ export const ProductCreateView: React.FC<ProductCreateProps> = ({ params }) => {
     skip: !selectedProductTypeId
   });
 
-  const productTypes = mapEdgesToItems(searchProductTypesOpts?.data?.search);
+  const productTypes =
+    mapEdgesToItems(searchProductTypesOpts?.data?.search) || [];
 
   const { availableChannels } = useAppChannel(false);
   const allChannels: ChannelData[] = createSortedChannelsData(
@@ -335,8 +336,10 @@ export const ProductCreateView: React.FC<ProductCreateProps> = ({ params }) => {
           params.action === "assign-attribute-value" && params.id
         }
         onAssignReferencesClick={handleAssignAttributeReferenceClick}
-        referencePages={mapEdgesToItems(searchPagesOpts?.data?.search)}
+        referencePages={mapEdgesToItems(searchPagesOpts?.data?.search) || []}
-        referenceProducts={mapEdgesToItems(searchProductsOpts?.data?.search)}
+        referenceProducts={
+          mapEdgesToItems(searchProductsOpts?.data?.search) || []
+        }
         fetchReferencePages={searchPages}
         fetchMoreReferencePages={fetchMoreReferencePages}
         fetchReferenceProducts={searchProducts}

src/products/views/ProductList/filters.ts

@@ -87,10 +87,7 @@ export function getFilterOpts(
         name: attr.name,
         slug: attr.slug,
         inputType: attr.inputType,
-        value:
+        value: dedupeFilter(params.attributes?.[attr.slug] || [])
-          !!params.attributes && params.attributes[attr.slug]
-            ? dedupeFilter(params.attributes[attr.slug])
-            : []
       })),
     attributeChoices: {
       active: true,
@@ -132,7 +129,7 @@ export function getFilterOpts(
       loading: categories.search.result.loading,
       onFetchMore: categories.search.loadMore,
       onSearchChange: categories.search.search,
-      value: maybe(() => dedupeFilter(params.categories), [])
+      value: dedupeFilter(params.categories || [])
     },
     channel: {
       active: params?.channel !== undefined,
@@ -162,7 +159,7 @@ export function getFilterOpts(
       loading: collections.search.result.loading,
       onFetchMore: collections.search.loadMore,
       onSearchChange: collections.search.search,
-      value: maybe(() => dedupeFilter(params.collections), [])
+      value: dedupeFilter(params.collections || [])
     },
     price: {
       active: maybe(
@@ -198,7 +195,7 @@ export function getFilterOpts(
       loading: productTypes.search.result.loading,
       onFetchMore: productTypes.search.loadMore,
       onSearchChange: productTypes.search.search,
-      value: maybe(() => dedupeFilter(params.productTypes), [])
+      value: dedupeFilter(params.productTypes || [])
     },
     stockStatus: {
       active: maybe(() => params.stockStatus !== undefined, false),

src/products/views/ProductUpdate/ProductUpdate.tsx

@@ -593,8 +593,10 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
           params.action === "assign-attribute-value" && params.id
         }
         onAssignReferencesClick={handleAssignAttributeReferenceClick}
-        referencePages={mapEdgesToItems(searchPagesOpts?.data?.search)}
+        referencePages={mapEdgesToItems(searchPagesOpts?.data?.search) || []}
-        referenceProducts={mapEdgesToItems(searchProductsOpts?.data?.search)}
+        referenceProducts={
+          mapEdgesToItems(searchProductsOpts?.data?.search) || []
+        }
         fetchReferencePages={searchPages}
         fetchMoreReferencePages={fetchMoreReferencePages}
         fetchReferenceProducts={searchProducts}

src/products/views/ProductVariant.tsx

@@ -363,8 +363,10 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
           params.action === "assign-attribute-value" && params.id
         }
         onAssignReferencesClick={handleAssignAttributeReferenceClick}
-        referencePages={mapEdgesToItems(searchPagesOpts?.data?.search)}
+        referencePages={mapEdgesToItems(searchPagesOpts?.data?.search) || []}
-        referenceProducts={mapEdgesToItems(searchProductsOpts?.data?.search)}
+        referenceProducts={
+          mapEdgesToItems(searchProductsOpts?.data?.search) || []
+        }
         fetchReferencePages={searchPages}
         fetchMoreReferencePages={fetchMoreReferencePages}
         fetchReferenceProducts={searchProducts}

src/products/views/ProductVariantCreate.tsx

@@ -230,8 +230,10 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
           params.action === "assign-attribute-value" && params.id
         }
         onAssignReferencesClick={handleAssignAttributeReferenceClick}
-        referencePages={mapEdgesToItems(searchPagesOpts?.data?.search)}
+        referencePages={mapEdgesToItems(searchPagesOpts?.data?.search) || []}
-        referenceProducts={mapEdgesToItems(searchProductsOpts?.data?.search)}
+        referenceProducts={
+          mapEdgesToItems(searchProductsOpts?.data?.search) || []
+        }
         fetchReferencePages={searchPages}
         fetchMoreReferencePages={fetchMoreReferencePages}
         fetchReferenceProducts={searchProducts}

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -72324,7 +72324,7 @@ exports[`Storyshots Views / Customers / Address Book loading 1`] = `
       <div
         class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
-         's Address Book
+        ...'s Address Book
       </div>
       <div
         class="ExtendedPageHeader-action-id"

src/translations/components/TranslationsCategoriesPage/TranslationsCategoriesPage.tsx

@@ -5,6 +5,7 @@ import LanguageSwitch from "@saleor/components/LanguageSwitch";
 import PageHeader from "@saleor/components/PageHeader";
 import { CategoryTranslationFragment } from "@saleor/fragments/types/CategoryTranslationFragment";
 import { commonMessages, sectionNames } from "@saleor/intl";
+import { getStringOrPlaceholder } from "@saleor/misc";
 import {
   TranslationInputFieldName,
   TranslationsEntitiesPageProps
@@ -47,7 +48,7 @@ const TranslationsCategoriesPage: React.FC<TranslationsCategoriesPageProps> = ({
               'Translation Category "{categoryName}" - {languageCode}'
           },
           {
-            categoryName: data?.category?.name || "...",
+            categoryName: getStringOrPlaceholder(data?.category?.name),
             languageCode
           }
         )}

src/translations/components/TranslationsCollectionsPage/TranslationsCollectionsPage.tsx

@@ -5,6 +5,7 @@ import LanguageSwitch from "@saleor/components/LanguageSwitch";
 import PageHeader from "@saleor/components/PageHeader";
 import { CollectionTranslationFragment } from "@saleor/fragments/types/CollectionTranslationFragment";
 import { commonMessages, sectionNames } from "@saleor/intl";
+import { getStringOrPlaceholder } from "@saleor/misc";
 import {
   TranslationInputFieldName,
   TranslationsEntitiesPageProps
@@ -48,7 +49,7 @@ const TranslationsCollectionsPage: React.FC<TranslationsCollectionsPageProps> =
             description: "header"
           },
           {
-            collectionName: data?.collection?.name || "...",
+            collectionName: getStringOrPlaceholder(data?.collection?.name),
             languageCode
           }
         )}

src/translations/components/TranslationsPagesPage/TranslationsPagesPage.tsx

@@ -5,6 +5,7 @@ import LanguageSwitch from "@saleor/components/LanguageSwitch";
 import PageHeader from "@saleor/components/PageHeader";
 import { PageTranslationFragment } from "@saleor/fragments/types/PageTranslationFragment";
 import { commonMessages, sectionNames } from "@saleor/intl";
+import { getStringOrPlaceholder } from "@saleor/misc";
 import {
   PageTranslationInputFieldName,
   TranslationsEntitiesPageProps
@@ -48,7 +49,7 @@ const TranslationsPagesPage: React.FC<TranslationsPagesPageProps> = ({
           },
           {
             languageCode,
-            pageName: data?.page?.title || "..."
+            pageName: getStringOrPlaceholder(data?.page?.title)
           }
         )}
       >

src/translations/components/TranslationsProductTypesPage/TranslationsProductTypesPage.tsx

@@ -6,6 +6,7 @@ import PageHeader from "@saleor/components/PageHeader";
 import { ListSettingsUpdate } from "@saleor/components/TablePagination";
 import { AttributeTranslationDetailsFragment } from "@saleor/fragments/types/AttributeTranslationDetailsFragment";
 import { commonMessages, sectionNames } from "@saleor/intl";
+import { getStringOrPlaceholder } from "@saleor/misc";
 import { TranslationsEntitiesPageProps } from "@saleor/translations/types";
 import { ListSettings } from "@saleor/types";
 import React from "react";
@@ -76,7 +77,7 @@ const TranslationsProductTypesPage: React.FC<TranslationsProductTypesPageProps>
             description: "header"
           },
           {
-            attribute: data?.attribute?.name || "...",
+            attribute: getStringOrPlaceholder(data?.attribute?.name),
             languageCode
           }
         )}

src/translations/components/TranslationsProductsPage/TranslationsProductsPage.tsx

@@ -5,6 +5,7 @@ import LanguageSwitch from "@saleor/components/LanguageSwitch";
 import PageHeader from "@saleor/components/PageHeader";
 import { ProductTranslationFragment } from "@saleor/fragments/types/ProductTranslationFragment";
 import { commonMessages, sectionNames } from "@saleor/intl";
+import { getStringOrPlaceholder } from "@saleor/misc";
 import {
   TranslationInputFieldName,
   TranslationsEntitiesPageProps
@@ -49,7 +50,7 @@ const TranslationsProductsPage: React.FC<TranslationsProductsPageProps> = ({
           },
           {
             languageCode,
-            productName: data?.product?.name || "..."
+            productName: getStringOrPlaceholder(data?.product?.name)
           }
         )}
       >

src/translations/components/TranslationsSalesPage/TranslationsSalesPage.tsx

@@ -4,6 +4,7 @@ import LanguageSwitch from "@saleor/components/LanguageSwitch";
 import PageHeader from "@saleor/components/PageHeader";
 import { SaleTranslationFragment } from "@saleor/fragments/types/SaleTranslationFragment";
 import { commonMessages, sectionNames } from "@saleor/intl";
+import { getStringOrPlaceholder } from "@saleor/misc";
 import { TranslationsEntitiesPageProps } from "@saleor/translations/types";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -48,7 +49,7 @@ const TranslationsSalesPage: React.FC<TranslationsSalesPageProps> = ({
           },
           {
             languageCode,
-            saleName: data?.sale?.name || "..."
+            saleName: getStringOrPlaceholder(data?.sale?.name)
           }
         )}
       >

src/translations/components/TranslationsShippingMethodPage/TranslationsShippingMethodPage.tsx

@@ -4,6 +4,7 @@ import LanguageSwitch from "@saleor/components/LanguageSwitch";
 import PageHeader from "@saleor/components/PageHeader";
 import { ShippingMethodTranslationFragment } from "@saleor/fragments/types/ShippingMethodTranslationFragment";
 import { commonMessages, sectionNames } from "@saleor/intl";
+import { getStringOrPlaceholder } from "@saleor/misc";
 import {
   TranslationInputFieldName,
   TranslationsEntitiesPageProps
@@ -48,7 +49,7 @@ const TranslationsShippingMethodPage: React.FC<TranslationsShippingMethodPagePro
           },
           {
             languageCode,
-            shippingMethodName: data?.name || "..."
+            shippingMethodName: getStringOrPlaceholder(data?.name)
           }
         )}
       >

src/translations/components/TranslationsVouchersPage/TranslationsVouchersPage.tsx

@@ -4,6 +4,7 @@ import LanguageSwitch from "@saleor/components/LanguageSwitch";
 import PageHeader from "@saleor/components/PageHeader";
 import { VoucherTranslationFragment } from "@saleor/fragments/types/VoucherTranslationFragment";
 import { commonMessages, sectionNames } from "@saleor/intl";
+import { getStringOrPlaceholder } from "@saleor/misc";
 import { TranslationsEntitiesPageProps } from "@saleor/translations/types";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -49,7 +50,7 @@ const TranslationsVouchersPage: React.FC<TranslationsVouchersPageProps> = ({
           },
           {
             languageCode,
-            voucherName: data?.voucher?.name || "..."
+            voucherName: getStringOrPlaceholder(data?.voucher?.name)
           }
         )}
       >