Fix skeletons (#1161)

* Fix skeletons

* Fix warehouse list displaying

* Fix product filters

* Fix crashing views

* Fix crashes

src/collections/views/CollectionDetails.tsx

@@ -361,7 +361,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
                   }
                 })
               }
-              products={mapEdgesToItems(result?.data?.search).filter(
+              products={mapEdgesToItems(result?.data?.search)?.filter(
                 suggestedProduct => suggestedProduct.id
               )}
             />

src/components/Navigator/modes/catalog.ts

@@ -19,8 +19,8 @@ export function searchInCatalog(
   navigate: UseNavigatorResult,
   catalog: SearchCatalog
 ): QuickSearchAction[] {
-  const categories: QuickSearchActionInput[] = mapEdgesToItems(
+  const categories: QuickSearchActionInput[] = (
-    catalog?.categories
+    mapEdgesToItems(catalog?.categories) || []
   )
     .map<QuickSearchActionInput>(category => ({
       caption: intl.formatMessage(messages.category),
@@ -35,8 +35,8 @@ export function searchInCatalog(
     }))
     .sort(sortScores);
 
-  const collections: QuickSearchActionInput[] = mapEdgesToItems(
+  const collections: QuickSearchActionInput[] = (
-    catalog?.collections
+    mapEdgesToItems(catalog?.collections) || []
   )
     .map<QuickSearchActionInput>(collection => ({
       caption: intl.formatMessage(messages.collection),
@@ -51,7 +51,9 @@ export function searchInCatalog(
     }))
     .sort(sortScores);
 
-  const products: QuickSearchActionInput[] = mapEdgesToItems(catalog?.products)
+  const products: QuickSearchActionInput[] = (
+    mapEdgesToItems(catalog?.products) || []
+  )
     .map<QuickSearchActionInput>(product => ({
       caption: intl.formatMessage(messages.product),
       extraInfo: product.category.name,

src/components/Navigator/useQuickSearch.ts

@@ -108,7 +108,7 @@ function useQuickSearch(
       intl,
       {
         catalog,
-        customers: mapEdgesToItems(customers?.data?.search),
+        customers: mapEdgesToItems(customers?.data?.search) || [],
         order: maybe(() => orderData.order)
       },
       {

src/discounts/views/SaleDetails/SaleDetails.tsx

@@ -395,12 +395,14 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
                             }
                             products={mapEdgesToItems(
                               searchProductsOpts?.data?.search
-                            ).filter(suggestedProduct => suggestedProduct.id)}
+                            )?.filter(suggestedProduct => suggestedProduct.id)}
                           />
                           <AssignCategoriesDialog
                             categories={mapEdgesToItems(
                               searchCategoriesOpts?.data?.search
-                            ).filter(suggestedCategory => suggestedCategory.id)}
+                            )?.filter(
+                              suggestedCategory => suggestedCategory.id
+                            )}
                             confirmButtonState={saleCataloguesAddOpts.status}
                             hasMore={
                               searchCategoriesOpts.data?.search.pageInfo
@@ -426,7 +428,9 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
                           <AssignCollectionDialog
                             collections={mapEdgesToItems(
                               searchCollectionsOpts?.data?.search
-                            ).filter(suggestedCategory => suggestedCategory.id)}
+                            )?.filter(
+                              suggestedCategory => suggestedCategory.id
+                            )}
                             confirmButtonState={saleCataloguesAddOpts.status}
                             hasMore={
                               searchCollectionsOpts.data?.search.pageInfo

src/discounts/views/VoucherDetails/VoucherDetails.tsx

@@ -426,7 +426,9 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                           <AssignCategoriesDialog
                             categories={mapEdgesToItems(
                               searchCategoriesOpts?.data?.search
-                            ).filter(suggestedCategory => suggestedCategory.id)}
+                            )?.filter(
+                              suggestedCategory => suggestedCategory.id
+                            )}
                             confirmButtonState={voucherCataloguesAddOpts.status}
                             hasMore={
                               searchCategoriesOpts.data?.search.pageInfo
@@ -452,7 +454,9 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                           <AssignCollectionDialog
                             collections={mapEdgesToItems(
                               searchCollectionsOpts?.data?.search
-                            ).filter(suggestedCategory => suggestedCategory.id)}
+                            )?.filter(
+                              suggestedCategory => suggestedCategory.id
+                            )}
                             confirmButtonState={voucherCataloguesAddOpts.status}
                             hasMore={
                               searchCollectionsOpts.data?.search.pageInfo
@@ -524,7 +528,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
                             }
                             products={mapEdgesToItems(
                               searchProductsOpts?.data?.search
-                            ).filter(suggestedProduct => suggestedProduct.id)}
+                            )?.filter(suggestedProduct => suggestedProduct.id)}
                           />
                           <ActionDialog
                             open={

src/home/views/index.tsx

@@ -27,7 +27,7 @@ const HomeSection = () => {
 
   return (
     <HomePage
-      activities={mapEdgesToItems(data?.activities)}
+      activities={mapEdgesToItems(data?.activities)?.reverse()}
       orders={data?.ordersToday?.totalCount}
       sales={data?.salesToday?.gross}
       topProducts={mapEdgesToItems(data?.productTopToday)}

src/hooks/makeTopLevelSearch/utils.ts

@@ -15,4 +15,4 @@ export const getSearchFetchMoreProps = (
 });
 
 export const getParsedSearchData = ({ data }: ResultSearchData) =>
-  mapEdgesToItems(data?.search);
+  mapEdgesToItems(data?.search) || [];

src/navigation/views/MenuDetails/index.tsx

@@ -113,15 +113,13 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
           pageSearch.search(query);
         };
 
-        const categories = mapEdgesToItems(
+        const categories =
-          categorySearch?.result?.data?.search
+          mapEdgesToItems(categorySearch?.result?.data?.search) || [];
-        );
 
-        const collections = mapEdgesToItems(
+        const collections =
-          collectionSearch?.result?.data?.search
+          mapEdgesToItems(collectionSearch?.result?.data?.search) || [];
-        );
 
-        const pages = mapEdgesToItems(pageSearch?.result?.data?.search);
+        const pages = mapEdgesToItems(pageSearch?.result?.data?.search) || [];
 
         return (
           <MenuDeleteMutation

src/navigation/views/MenuList/MenuList.tsx

@@ -210,7 +210,7 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
                         id="menuListDeleteMenuContent"
                         values={{
                           menuName:
-                            mapEdgesToItems(data?.menus).find(
+                            mapEdgesToItems(data?.menus)?.find(
                               getById(params.id)
                             )?.name || "..."
                         }}

src/orders/components/OrderReturnPage/utils.tsx

@@ -3,6 +3,7 @@ import {
   OrderDetails_order,
   OrderDetails_order_fulfillments
 } from "@saleor/orders/types/OrderDetails";
+import { Node } from "@saleor/types";
 import { FulfillmentStatus } from "@saleor/types/globalTypes";
 
 import { LineItemOptions } from "./form";
@@ -31,7 +32,7 @@ export const getAllOrderFulfilledLines = (order?: OrderDetails_order) =>
   );
 
 export function getLineItem<T>(
-  { id }: { id: string },
+  { id }: Node,
   {
     initialValue,
     isFulfillment = false,
@@ -51,7 +52,7 @@ export function getParsedLineData<T>({
   isFulfillment = false,
   isRefunded = false
 }: LineItemOptions<T>) {
-  return (item: { id: string }) =>
+  return (item: Node) =>
     getLineItem(item, { initialValue, isFulfillment, isRefunded });
 }
 
@@ -89,16 +90,16 @@ export const getParsedFulfiledLines = (
     quantity
   }));
 
-export const getById = (idToCompare: string) => (obj: { id: string }) =>
+export const getById = (idToCompare: string) => (obj: Node) =>
   obj.id === idToCompare;
 
 export const getByUnmatchingId = (idToCompare: string) => (obj: {
   id: string;
 }) => obj.id !== idToCompare;
 
-const isIncludedInIds = function<T extends { id: string }>(
+const isIncludedInIds = function<T extends Node>(
   arrayToCompare: string[] | T[],
-  obj: { id: string }
+  obj: Node
 ) {
   const isSimpleIdsArray = (arrayToCompare as string[]).every(
     value => typeof value === "string"
@@ -111,14 +112,12 @@ const isIncludedInIds = function<T extends { id: string }>(
   return idsToCompare.includes(obj.id);
 };
 
-export function getByIds<T extends { id: string }>(
+export function getByIds<T extends Node>(arrayToCompare: string[] | T[]) {
-  arrayToCompare: string[] | T[]
+  return (obj: Node) => isIncludedInIds(arrayToCompare, obj);
-) {
-  return (obj: { id: string }) => isIncludedInIds(arrayToCompare, obj);
 }
 
-export function getByUnmatchingIds<T extends { id: string }>(
+export function getByUnmatchingIds<T extends Node>(
   arrayToCompare: string[] | T[]
 ) {
-  return (obj: { id: string }) => !isIncludedInIds(arrayToCompare, obj);
+  return (obj: Node) => !isIncludedInIds(arrayToCompare, obj);
 }

src/orders/views/OrderDetails/OrderNormalDetails/index.tsx

@@ -225,7 +225,7 @@ export const OrderNormalDetails: React.FC<OrderNormalDetailsProps> = ({
           orderFulfillmentCancel.opts.data?.orderFulfillmentCancel.errors || []
         }
         open={params.action === "cancel-fulfillment"}
-        warehouses={mapEdgesToItems(warehouses?.data?.warehouses)}
+        warehouses={mapEdgesToItems(warehouses?.data?.warehouses) || []}
         onConfirm={variables =>
           orderFulfillmentCancel.mutate({
             id: params.id,

src/pageTypes/views/PageTypeDetails.tsx

@@ -253,7 +253,7 @@ export const PageTypeDetails: React.FC<PageTypeDetailsProps> = ({
         }}
       />
 
-      {!dataLoading && (
+      {pageType && (
         <>
           <TypeDeleteWarningDialog
             {...pageTypeDeleteData}

src/pageTypes/views/PageTypeList/PageTypeList.tsx

@@ -206,15 +206,17 @@ export const PageTypeList: React.FC<PageTypeListProps> = ({ params }) => {
           </IconButton>
         }
       />
-      <TypeDeleteWarningDialog
+      {pageTypesData && (
-        {...pageTypeDeleteData}
+        <TypeDeleteWarningDialog
-        typesData={pageTypesData}
+          {...pageTypeDeleteData}
-        typesToDelete={selectedPageTypes}
+          typesData={pageTypesData}
-        onClose={closeModal}
+          typesToDelete={selectedPageTypes}
-        onDelete={hanldePageTypeBulkDelete}
+          onClose={closeModal}
-        deleteButtonState={pageTypeBulkDeleteOpts.status}
+          onDelete={hanldePageTypeBulkDelete}
-        showViewAssignedItemsButton={false}
+          deleteButtonState={pageTypeBulkDeleteOpts.status}
-      />
+          showViewAssignedItemsButton={false}
+        />
+      )}
       <SaveFilterTabDialog
         open={params.action === "save-search"}
         confirmButtonState="default"

src/productTypes/views/ProductTypeList/ProductTypeList.tsx

@@ -213,14 +213,16 @@ export const ProductTypeList: React.FC<ProductTypeListProps> = ({ params }) => {
                 </IconButton>
               }
             />
-            <TypeDeleteWarningDialog
+            {productTypesData && (
-              {...productTypeDeleteData}
+              <TypeDeleteWarningDialog
-              typesData={productTypesData}
+                {...productTypeDeleteData}
-              typesToDelete={selectedProductTypes}
+                typesData={productTypesData}
-              onClose={closeModal}
+                typesToDelete={selectedProductTypes}
-              onDelete={onProductTypeBulkDelete}
+                onClose={closeModal}
-              deleteButtonState={productTypeBulkDeleteOpts.status}
+                onDelete={onProductTypeBulkDelete}
-            />
+                deleteButtonState={productTypeBulkDeleteOpts.status}
+              />
+            )}
             <SaveFilterTabDialog
               open={params.action === "save-search"}
               confirmButtonState="default"

src/productTypes/views/ProductTypeUpdate/index.tsx

@@ -390,14 +390,16 @@ export const ProductTypeUpdate: React.FC<ProductTypeUpdateProps> = ({
                           key={key}
                         />
                       ))}
-                      <TypeDeleteWarningDialog
+                      {productType && (
-                        {...productTypeDeleteData}
+                        <TypeDeleteWarningDialog
-                        typesData={[productType]}
+                          {...productTypeDeleteData}
-                        typesToDelete={[id]}
+                          typesData={[productType]}
-                        onClose={closeModal}
+                          typesToDelete={[id]}
-                        onDelete={handleProductTypeDelete}
+                          onClose={closeModal}
-                        deleteButtonState={deleteProductType.opts.status}
+                          onDelete={handleProductTypeDelete}
-                      />
+                          deleteButtonState={deleteProductType.opts.status}
+                        />
+                      )}
                     </>
                   )}
 

src/products/components/ProductVariantCreatorPage/ProductVariantCreatorContent.tsx

@@ -8,9 +8,9 @@ import { isSelected } from "@saleor/utils/lists";
 import React from "react";
 
 import { ProductVariantCreateFormData } from "./form";
-import ProductVariantCreatePriceAndSku from "./ProductVariantCreatorPriceAndSku";
+import ProductVariantCreatorPriceAndSku from "./ProductVariantCreatorPriceAndSku";
-import ProductVariantCreateSummary from "./ProductVariantCreatorSummary";
+import ProductVariantCreatorSummary from "./ProductVariantCreatorSummary";
-import ProductVariantCreateValues from "./ProductVariantCreatorValues";
+import ProductVariantCreatorValues from "./ProductVariantCreatorValues";
 import {
   ProductVariantCreateReducerAction,
   ProductVariantCreateReducerActionType
@@ -55,7 +55,7 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
   return (
     <>
       {step === ProductVariantCreatorStep.values && (
-        <ProductVariantCreateValues
+        <ProductVariantCreatorValues
           attributes={selectedAttributes}
           attributeValues={attributeValues}
           fetchAttributeValues={fetchAttributeValues}
@@ -74,7 +74,7 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
         />
       )}
       {step === ProductVariantCreatorStep.prices && (
-        <ProductVariantCreatePriceAndSku
+        <ProductVariantCreatorPriceAndSku
           attributes={selectedAttributes}
           data={data}
           channelListings={channelListings}
@@ -154,7 +154,7 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
         />
       )}
       {step === ProductVariantCreatorStep.summary && (
-        <ProductVariantCreateSummary
+        <ProductVariantCreatorSummary
           attributes={selectedAttributes}
           channelListings={channelListings}
           data={data}

src/products/views/ProductCreate/ProductCreate.tsx

@@ -295,11 +295,12 @@ export const ProductCreateView: React.FC<ProductCreateProps> = ({ params }) => {
       <ProductCreatePage
         allChannelsCount={allChannels?.length}
         currentChannels={currentChannels}
-        categories={mapEdgesToItems(searchCategoryOpts?.data?.search)}
+        categories={mapEdgesToItems(searchCategoryOpts?.data?.search) || []}
-        collections={mapEdgesToItems(searchCollectionOpts?.data?.search)}
+        collections={mapEdgesToItems(searchCollectionOpts?.data?.search) || []}
-        attributeValues={mapEdgesToItems(
+        attributeValues={
-          searchAttributeValuesOpts?.data?.attribute.choices
+          mapEdgesToItems(searchAttributeValuesOpts?.data?.attribute.choices) ||
-        )}
+          []
+        }
         loading={loading}
         channelsErrors={
           updateVariantChannelsOpts.data?.productVariantChannelListingUpdate
@@ -325,7 +326,7 @@ export const ProductCreateView: React.FC<ProductCreateProps> = ({ params }) => {
         fetchMoreCategories={fetchMoreCategories}
         fetchMoreCollections={fetchMoreCollections}
         fetchMoreProductTypes={fetchMoreProductTypes}
-        warehouses={mapEdgesToItems(warehouses?.data?.warehouses)}
+        warehouses={mapEdgesToItems(warehouses?.data?.warehouses) || []}
         taxTypes={taxTypes.data?.taxTypes || []}
         weightUnit={shop?.defaultWeightUnit}
         openChannelsModal={handleChannelsModalOpen}

src/products/views/ProductList/ProductList.tsx

@@ -347,18 +347,18 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
 
   const filterOpts = getFilterOpts(
     params,
-    mapEdgesToItems(initialFilterAttributes?.attributes),
+    mapEdgesToItems(initialFilterAttributes?.attributes) || [],
     searchAttributeValues,
     {
-      initial: mapEdgesToItems(initialFilterCategories?.categories),
+      initial: mapEdgesToItems(initialFilterCategories?.categories) || [],
       search: searchCategories
     },
     {
-      initial: mapEdgesToItems(initialFilterCollections?.collections),
+      initial: mapEdgesToItems(initialFilterCollections?.collections) || [],
       search: searchCollections
     },
     {
-      initial: mapEdgesToItems(initialFilterProductTypes?.productTypes),
+      initial: mapEdgesToItems(initialFilterProductTypes?.productTypes) || [],
       search: searchProductTypes
     },
     channelOpts
@@ -379,14 +379,15 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
           sort: params.sort
         }}
         onSort={handleSort}
-        availableInGridAttributes={mapEdgesToItems(
+        availableInGridAttributes={
-          availableInGridAttributes?.data?.availableInGrid
+          mapEdgesToItems(availableInGridAttributes?.data?.availableInGrid) ||
-        )}
+          []
+        }
         currencySymbol={selectedChannel?.currencyCode || ""}
         currentTab={currentTab}
         defaultSettings={defaultListSettings[ListViews.PRODUCT_LIST]}
         filterOpts={filterOpts}
-        gridAttributes={mapEdgesToItems(gridAttributes?.data?.grid)}
+        gridAttributes={mapEdgesToItems(gridAttributes?.data?.grid) || []}
         totalGridAttributes={maybe(
           () => availableInGridAttributes.data.availableInGrid.totalCount,
           0
@@ -491,7 +492,9 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
         </DialogContentText>
       </ActionDialog>
       <ProductExportDialog
-        attributes={mapEdgesToItems(searchAttributes?.result?.data?.search)}
+        attributes={
+          mapEdgesToItems(searchAttributes?.result?.data?.search) || []
+        }
         hasMore={searchAttributes.result.data?.search.pageInfo.hasNextPage}
         loading={
           searchAttributes.result.loading ||
@@ -508,7 +511,7 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
           filter: data?.products.totalCount
         }}
         selectedProducts={listElements.length}
-        warehouses={mapEdgesToItems(warehouses?.data?.warehouses)}
+        warehouses={mapEdgesToItems(warehouses?.data?.warehouses) || []}
         channels={availableChannels}
         onClose={closeModal}
         onSubmit={data =>

src/products/views/ProductUpdate/ProductUpdate.tsx

@@ -439,13 +439,13 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
     createProductMediaOpts.data?.productMediaCreate.errors
   );
 
-  const categories = mapEdgesToItems(searchCategoriesOpts?.data?.search);
+  const categories = mapEdgesToItems(searchCategoriesOpts?.data?.search) || [];
 
-  const collections = mapEdgesToItems(searchCollectionsOpts?.data?.search);
+  const collections =
+    mapEdgesToItems(searchCollectionsOpts?.data?.search) || [];
 
-  const attributeValues = mapEdgesToItems(
+  const attributeValues =
-    searchAttributeValuesOpts?.data?.attribute.choices
+    mapEdgesToItems(searchAttributeValuesOpts?.data?.attribute.choices) || [];
-  );
 
   const errors = [
     ...(updateProductOpts.data?.productUpdate.errors || []),
@@ -550,7 +550,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
         header={product?.name}
         placeholderImage={placeholderImg}
         product={product}
-        warehouses={mapEdgesToItems(warehouses?.data?.warehouses)}
+        warehouses={mapEdgesToItems(warehouses?.data?.warehouses) || []}
         taxTypes={data?.taxTypes}
         variants={product?.variants}
         onBack={handleBack}

src/products/views/ProductVariant.tsx

@@ -323,9 +323,8 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
     onFetchMore: loadMoreAttributeValues
   };
 
-  const attributeValues = mapEdgesToItems(
+  const attributeValues =
-    searchAttributeValuesOpts?.data?.attribute.choices
+    mapEdgesToItems(searchAttributeValuesOpts?.data?.attribute.choices) || [];
-  );
 
   return (
     <>
@@ -346,7 +345,7 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
         placeholderImage={placeholderImg}
         variant={variant}
         header={variant?.name || variant?.sku}
-        warehouses={mapEdgesToItems(warehouses?.data?.warehouses)}
+        warehouses={mapEdgesToItems(warehouses?.data?.warehouses) || []}
         onAdd={() => navigate(productVariantAddUrl(productId))}
         onBack={handleBack}
         onDelete={() => openModal("remove")}

src/products/views/ProductVariantCreate.tsx

@@ -191,9 +191,8 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
     onFetchMore: loadMoreAttributeValues
   };
 
-  const attributeValues = mapEdgesToItems(
+  const attributeValues =
-    searchAttributeValuesOpts?.data?.attribute.choices
+    mapEdgesToItems(searchAttributeValuesOpts?.data?.attribute.choices) || [];
-  );
 
   const disableForm =
     productLoading ||
@@ -225,7 +224,7 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
         onWarehouseConfigure={() => navigate(warehouseAddPath)}
         onVariantReorder={handleVariantReorder}
         saveButtonBarState={variantCreateResult.status}
-        warehouses={mapEdgesToItems(warehouses?.data?.warehouses)}
+        warehouses={mapEdgesToItems(warehouses?.data?.warehouses) || []}
         weightUnit={shop?.defaultWeightUnit}
         assignReferencesAttributeId={
           params.action === "assign-attribute-value" && params.id

src/products/views/ProductVariantCreator/ProductVariantCreator.tsx

@@ -66,9 +66,8 @@ const ProductVariantCreator: React.FC<ProductVariantCreatorProps> = ({
     onFetchMore: loadMoreAttributeValues
   };
 
-  const attributeValues = mapEdgesToItems(
+  const attributeValues =
-    searchAttributeValuesOpts?.data?.attribute.choices
+    mapEdgesToItems(searchAttributeValuesOpts?.data?.attribute.choices) || [];
-  );
 
   return (
     <>
@@ -99,7 +98,7 @@ const ProductVariantCreator: React.FC<ProductVariantCreatorProps> = ({
             variables: { id, inputs }
           })
         }
-        warehouses={mapEdgesToItems(data?.warehouses)}
+        warehouses={mapEdgesToItems(data?.warehouses) || []}
       />
     </>
   );

src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx

@@ -342,7 +342,7 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
         loading={productsSearchOpts.loading}
         open={params.action === "assign-product"}
         hasMore={productsSearchOpts.data?.search?.pageInfo.hasNextPage}
-        products={mapEdgesToItems(productsSearchOpts?.data?.search).filter(
+        products={mapEdgesToItems(productsSearchOpts?.data?.search)?.filter(
           suggestedProduct => suggestedProduct.id
         )}
         onClose={closeModal}

src/shipping/views/ShippingZoneDetails/index.tsx

@@ -202,7 +202,7 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
         }
         saveButtonBarState={updateShippingZoneOpts.status}
         shippingZone={data?.shippingZone}
-        warehouses={mapEdgesToItems(searchWarehousesOpts?.data?.search)}
+        warehouses={mapEdgesToItems(searchWarehousesOpts?.data?.search) || []}
         hasMore={searchWarehousesOpts.data?.search?.pageInfo?.hasNextPage}
         loading={searchWarehousesOpts.loading}
         onFetchMore={loadMore}

src/shipping/views/ShippingZonesList.tsx

@@ -184,8 +184,11 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
             values={{
               shippingZoneName: (
                 <strong>
-                  {mapEdgesToItems(data?.shippingZones).find(getById(params.id))
+                  {getStringOrPlaceholder(
-                    ?.name || "..."}
+                    mapEdgesToItems(data?.shippingZones)?.find(
+                      getById(params.id)
+                    )?.name
+                  )}
                 </strong>
               )
             }}

src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx

@@ -343,7 +343,7 @@ export const WeightRatesUpdate: React.FC<WeightRatesUpdateProps> = ({
         loading={productsSearchOpts.loading}
         open={params.action === "assign-product"}
         hasMore={productsSearchOpts.data?.search?.pageInfo.hasNextPage}
-        products={mapEdgesToItems(productsSearchOpts?.data?.search).filter(
+        products={mapEdgesToItems(productsSearchOpts?.data?.search)?.filter(
           suggestedProduct => suggestedProduct.id
         )}
         onClose={closeModal}

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

@@ -40231,10 +40231,85 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
                     class="MuiTableRow-root-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                      colspan="2"
                     >
-                      No values found
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          clip-rule="evenodd"
+                          d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
+                          fill="url(#paint0_linear)"
+                          fill-rule="evenodd"
+                          style="transform:translate(7px, 4px)"
+                        />
+                        <defs>
+                          <linearGradient
+                            gradientUnits="userSpaceOnUse"
+                            id="paint0_linear"
+                            x1="0"
+                            x2="16.0896"
+                            y1="0"
+                            y2="10.4478"
+                          >
+                            <stop
+                              stop-color="#06847B"
+                            />
+                            <stop
+                              offset="1"
+                              stop-color="#3EE7CD"
+                            />
+                          </linearGradient>
+                        </defs>
+                      </svg>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
+                    >
+                      <span
+                        class="Skeleton-skeleton-id"
+                        data-test-id="skeleton"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
+                    >
+                      <span
+                        class="Skeleton-skeleton-id"
+                        data-test-id="skeleton"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        disabled=""
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
                     </td>
                   </tr>
                 </tbody>
@@ -42166,10 +42241,84 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
                     class="MuiTableRow-root-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                      colspan="2"
                     >
-                      No values found
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          clip-rule="evenodd"
+                          d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
+                          fill="url(#paint0_linear)"
+                          fill-rule="evenodd"
+                          style="transform:translate(7px, 4px)"
+                        />
+                        <defs>
+                          <linearGradient
+                            gradientUnits="userSpaceOnUse"
+                            id="paint0_linear"
+                            x1="0"
+                            x2="16.0896"
+                            y1="0"
+                            y2="10.4478"
+                          >
+                            <stop
+                              stop-color="#06847B"
+                            />
+                            <stop
+                              offset="1"
+                              stop-color="#3EE7CD"
+                            />
+                          </linearGradient>
+                        </defs>
+                      </svg>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
+                    >
+                      <span
+                        class="Skeleton-skeleton-id"
+                        data-test-id="skeleton"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
+                    >
+                      <span
+                        class="Skeleton-skeleton-id"
+                        data-test-id="skeleton"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
                     </td>
                   </tr>
                 </tbody>
@@ -62117,6 +62266,42 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details l
                   <tr
                     class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                      scope="col"
+                    >
+                      <span
+                        aria-disabled="true"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        tabindex="-1"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <input
+                            class="PrivateSwitchBase-input-id"
+                            data-indeterminate="false"
+                            disabled=""
+                            type="checkbox"
+                          />
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <rect
+                              fill="none"
+                              height="14"
+                              stroke="currentColor"
+                              width="14"
+                              x="5"
+                              y="5"
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </th>
                     <th
                       class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colName-id"
                       scope="col"
@@ -62216,16 +62401,119 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details l
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id"
+                    class="MuiTableRow-root-id CollectionProducts-tableRow-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    />
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                      colspan="5"
                     >
-                      No products found
+                      <span
+                        aria-disabled="true"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        tabindex="-1"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <input
+                            class="PrivateSwitchBase-input-id"
+                            data-indeterminate="false"
+                            disabled=""
+                            type="checkbox"
+                          />
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <rect
+                              fill="none"
+                              height="14"
+                              stroke="currentColor"
+                              width="14"
+                              x="5"
+                              y="5"
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
+                    >
+                      <div
+                        class="Avatar-content-id"
+                      >
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
+                            />
+                          </svg>
+                        </div>
+                        <div
+                          class="Avatar-children-id"
+                        >
+                          <span
+                            class="Skeleton-skeleton-id"
+                            data-test-id="skeleton"
+                          >
+                            ‌
+                          </span>
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
+                    >
+                      <span
+                        class="Skeleton-skeleton-id"
+                        data-test-id="skeleton"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
+                    >
+                      <span
+                        class="Skeleton-skeleton-id"
+                        data-test-id="skeleton"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        disabled=""
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
                     </td>
                   </tr>
                 </tbody>
@@ -76771,9 +77059,43 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
-                      colspan="6"
                     >
-                      No orders found
+                      <span
+                        class="Skeleton-skeleton-id"
+                        data-test-id="skeleton"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      <span
+                        class="Skeleton-skeleton-id"
+                        data-test-id="skeleton"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      <span
+                        class="Skeleton-skeleton-id"
+                        data-test-id="skeleton"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
+                    >
+                      <span
+                        class="Skeleton-skeleton-id"
+                        data-test-id="skeleton"
+                      >
+                        ‌
+                      </span>
                     </td>
                   </tr>
                 </tbody>
@@ -90317,6 +90639,42 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
                   <tr
                     class="MuiTableRow-root-id MuiTableRow-head-id"
                   >
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                      scope="col"
+                    >
+                      <span
+                        aria-disabled="true"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        tabindex="-1"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <input
+                            class="PrivateSwitchBase-input-id"
+                            data-indeterminate="false"
+                            disabled=""
+                            type="checkbox"
+                          />
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <rect
+                              fill="none"
+                              height="14"
+                              stroke="currentColor"
+                              width="14"
+                              x="5"
+                              y="5"
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </th>
                     <th
                       class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-colName-id"
                       scope="col"
@@ -90407,13 +90765,87 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
                   class="MuiTableBody-root-id"
                 >
                   <tr
-                    class="MuiTableRow-root-id"
+                    class="MuiTableRow-root-id DiscountCategories-tableRow-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                      colspan="4"
                     >
-                      No categories found
+                      <span
+                        aria-disabled="true"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        tabindex="-1"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <input
+                            class="PrivateSwitchBase-input-id"
+                            data-indeterminate="false"
+                            disabled=""
+                            type="checkbox"
+                          />
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <rect
+                              fill="none"
+                              height="14"
+                              stroke="currentColor"
+                              width="14"
+                              x="5"
+                              y="5"
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      <span
+                        class="Skeleton-skeleton-id"
+                        data-test-id="skeleton"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-colProducts-id"
+                    >
+                      <span
+                        class="Skeleton-skeleton-id"
+                        data-test-id="skeleton"
+                      >
+                        ‌
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-colActions-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        disabled=""
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
                     </td>
                   </tr>
                 </tbody>
@@ -230940,10 +231372,95 @@ exports[`Storyshots Views / Shipping / Shipping rate loading 1`] = `
                     class="MuiTableRow-root-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                      colspan="5"
                     >
-                      No Products
+                      <span
+                        aria-disabled="true"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        tabindex="-1"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <input
+                            class="PrivateSwitchBase-input-id"
+                            data-indeterminate="false"
+                            disabled=""
+                            type="checkbox"
+                          />
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <rect
+                              fill="none"
+                              height="14"
+                              stroke="currentColor"
+                              width="14"
+                              x="5"
+                              y="5"
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
+                    >
+                      <div
+                        class="Avatar-content-id"
+                      >
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
+                            />
+                          </svg>
+                        </div>
+                        <div
+                          class="Avatar-children-id"
+                        >
+                          <span
+                            class="Skeleton-skeleton-id"
+                            data-test-id="skeleton"
+                          >
+                            ‌
+                          </span>
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingMethodProducts-colAction-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
                     </td>
                   </tr>
                 </tbody>
@@ -249109,11 +249626,12 @@ exports[`Storyshots Views / Warehouses / Warehouse details loading 1`] = `
             <div
               class="MuiCardContent-root-id"
             >
-              <div
+              <span
-                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                class="Skeleton-skeleton-id"
+                data-test-id="skeleton"
               >
-                This warehouse has no shipping zones assigned.
+                ‌
-              </div>
+              </span>
             </div>
           </div>
         </div>

src/utils/maps.ts

@@ -8,16 +8,17 @@ import { SearchPages_search_edges_node } from "@saleor/searches/types/SearchPage
 import { Node, SlugNode } from "@saleor/types";
 import { MetadataInput } from "@saleor/types/globalTypes";
 
-interface EdgesType<T> {
+interface Edge<T> {
-  edges?: Array<{ node: T }>;
+  node: T;
+}
+interface Connection<T> {
+  edges: Array<Edge<T>> | undefined;
 }
 
-export function mapEdgesToItems<T>(data?: EdgesType<T>): T[] {
+export function mapEdgesToItems<T>(
-  if (!data || !data?.edges) {
+  data: Connection<T> | undefined
-    return [];
+): T[] | undefined {
-  }
+  return data?.edges?.map(({ node }) => node);
-
-  return data.edges.map(({ node }) => node);
 }
 
 export function mapCountriesToChoices(countries: ShopInfo_shop_countries[]) {

src/warehouses/views/WarehouseList/WarehouseList.tsx

@@ -167,7 +167,7 @@ const WarehouseList: React.FC<WarehouseListProps> = ({ params }) => {
       />
       <WarehouseDeleteDialog
         confirmButtonState={deleteTransitionState}
-        name={mapEdgesToItems(data?.warehouses).find(getById(params.id))?.name}
+        name={mapEdgesToItems(data?.warehouses)?.find(getById(params.id))?.name}
         open={params.action === "delete"}
         onClose={closeModal}
         onConfirm={() =>