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

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={
+                      style={getSwatchCellStyle(value)}
-                        value?.file
-                          ? { backgroundImage: `url(${value.file.url})` }
-                          : { backgroundColor: value.value }
-                      }
                     />
                   </TableCell>
                 )}