From 88a0db22e153c5b3ab5b183d09196bd8f408df2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dro=C5=84?= <dron.official@yahoo.com>
Date: Wed, 21 Sep 2022 17:35:04 +0200
Subject: [PATCH] Fix broken pagination in swatch attributes (#2282)

* Fix broken pagination in swatch attributes

* Do not apply styling when value is undefined

* Extract logic to function
---
 .../AttributeValues/AttributeValues.tsx          | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/attributes/components/AttributeValues/AttributeValues.tsx b/src/attributes/components/AttributeValues/AttributeValues.tsx
index 57546189e..959c2d824 100644
--- a/src/attributes/components/AttributeValues/AttributeValues.tsx
+++ b/src/attributes/components/AttributeValues/AttributeValues.tsx
@@ -16,6 +16,7 @@ import {
 import TablePagination from "@saleor/components/TablePagination";
 import {
   AttributeInputTypeEnum,
+  AttributeValueFragment,
   AttributeValueListFragment,
 } from "@saleor/graphql";
 import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
@@ -75,6 +76,15 @@ const useStyles = makeStyles(
   { name: "AttributeValues" },
 );
 
+const getSwatchCellStyle = (value: AttributeValueFragment) => {
+  if (!value) {
+    return;
+  }
+  return value.file
+    ? { backgroundImage: `url(${value.file.url})` }
+    : { backgroundColor: value.value };
+};
+
 const AttributeValues: React.FC<AttributeValuesProps> = ({
   disabled,
   onValueAdd,
@@ -179,11 +189,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
                     <div
                       data-test-id="swatch-image"
                       className={classes.swatch}
-                      style={
-                        value?.file
-                          ? { backgroundImage: `url(${value.file.url})` }
-                          : { backgroundColor: value.value }
-                      }
+                      style={getSwatchCellStyle(value)}
                     />
                   </TableCell>
                 )}