Hide variants and attributes if none

src/products/components/ProductCreatePage/ProductCreatePage.tsx

@@ -78,7 +78,6 @@ interface ProductCreatePageProps {
   fetchCategories: (data: string) => void;
   fetchCollections: (data: string) => void;
   fetchProductTypes: (data: string) => void;
-  onAttributesEdit: () => void;
   onBack?();
   onSubmit?(data: ProductCreatePageSubmitData);
 }
@@ -220,12 +219,14 @@ export const ProductCreatePage: React.StatelessComponent<
                   onChange={change}
                 />
                 <CardSpacer />
+                {attributes.length > 0 && (
                   <ProductAttributes
                     attributes={attributes}
                     disabled={disabled}
                     onChange={handleAttributeChange}
                     onMultiChange={handleAttributeMultiChange}
                   />
+                )}
                 <CardSpacer />
                 <ProductPricing
                   currency={currency}

src/products/components/ProductUpdatePage/ProductUpdatePage.tsx

@@ -62,7 +62,6 @@ export interface ProductUpdatePageProps extends ListActions {
   fetchCollections: (query: string) => void;
   onVariantShow: (id: string) => () => void;
   onImageDelete: (id: string) => () => void;
-  onAttributesEdit: () => void;
   onBack?();
   onDelete();
   onImageEdit?(id: string);
@@ -92,7 +91,6 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
   product,
   saveButtonBarState,
   variants,
-  onAttributesEdit,
   onBack,
   onDelete,
   onImageDelete,
@@ -215,12 +213,14 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                     onImageUpload={onImageUpload}
                   />
                   <CardSpacer />
+                  {attributes.length > 0 && (
                     <ProductAttributes
                       attributes={attributes}
                       disabled={disabled}
                       onChange={handleAttributeChange}
                       onMultiChange={handleAttributeMultiChange}
                     />
+                  )}
                   <CardSpacer />
                   <ProductPricing
                     currency={currency}
@@ -234,7 +234,6 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                       disabled={disabled}
                       variants={variants}
                       fallbackPrice={product ? product.basePrice : undefined}
-                      onAttributesEdit={onAttributesEdit}
                       onRowClick={onVariantShow}
                       onVariantAdd={onVariantAdd}
                       toolbar={toolbar}

src/products/components/ProductVariants/ProductVariants.tsx

@@ -67,7 +67,6 @@ interface ProductVariantsProps extends ListActions, WithStyles<typeof styles> {
   disabled: boolean;
   variants: ProductDetails_product_variants[];
   fallbackPrice?: ProductVariant_costPrice;
-  onAttributesEdit: () => void;
   onRowClick: (id: string) => () => void;
   onVariantAdd?();
 }
@@ -80,7 +79,6 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })(
     disabled,
     variants,
     fallbackPrice,
-    onAttributesEdit,
     onRowClick,
     onVariantAdd,
     isChecked,
@@ -90,6 +88,8 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })(
     toolbar
   }: ProductVariantsProps) => {
     const intl = useIntl();
+    const hasVariants = maybe(() => variants.length > 0, true);
+
     return (
       <Card>
         <CardTitle
@@ -99,17 +99,6 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })(
           })}
           toolbar={
             <>
-              <Button
-                onClick={onAttributesEdit}
-                variant="text"
-                color="primary"
-                data-tc="button-edit-attributes"
-              >
-                <FormattedMessage
-                  defaultMessage="Edit attributes"
-                  description="product variant attributes, button"
-                />
-              </Button>
               <Button
                 onClick={onVariantAdd}
                 variant="text"
@@ -126,11 +115,12 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })(
         />
         {!variants.length && (
           <CardContent>
-            <Typography>
+            <Typography color={hasVariants ? "default" : "textSecondary"}>
               <FormattedMessage defaultMessage="Use variants for products that come in a variety of versions for example different sizes or colors" />
             </Typography>
           </CardContent>
         )}
+        {hasVariants && (
           <Table className={classes.denseTable}>
             <TableHead
               colSpan={numberOfColumns}
@@ -165,9 +155,7 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })(
               </Hidden>
             </TableHead>
             <TableBody>
-            {renderCollection(
+              {renderCollection(variants, variant => {
-              variants,
-              variant => {
                 const isSelected = variant ? isChecked(variant.id) : false;
 
                 return (
@@ -237,17 +225,10 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })(
                     </Hidden>
                   </TableRow>
                 );
-              },
+              })}
-              () => (
-                <TableRow>
-                  <TableCell colSpan={numberOfColumns}>
-                    <FormattedMessage defaultMessage="This product has no variants" />
-                  </TableCell>
-                </TableRow>
-              )
-            )}
             </TableBody>
           </Table>
+        )}
       </Card>
     );
   }

src/products/views/ProductCreate.tsx

@@ -29,7 +29,6 @@ export const ProductUpdate: React.StatelessComponent<
   const shop = useShop();
   const intl = useIntl();
 
-  const handleAttributesEdit = undefined;
   const handleBack = () => navigate(productListUrl());
 
   return (
@@ -146,7 +145,6 @@ export const ProductUpdate: React.StatelessComponent<
                                 edge => edge.node
                               )
                             )}
-                            onAttributesEdit={handleAttributesEdit}
                             onBack={handleBack}
                             onSubmit={handleSubmit}
                             saveButtonBarState={formTransitionState}

src/products/views/ProductUpdate/ProductUpdate.tsx

@@ -15,7 +15,6 @@ import { DEFAULT_INITIAL_SEARCH_DATA } from "../../../config";
 import SearchCategories from "../../../containers/SearchCategories";
 import SearchCollections from "../../../containers/SearchCollections";
 import { getMutationState, maybe } from "../../../misc";
-import { productTypeUrl } from "../../../productTypes/urls";
 import ProductUpdatePage from "../../components/ProductUpdatePage";
 import ProductUpdateOperations from "../../containers/ProductUpdateOperations";
 import { TypedProductDetailsQuery } from "../../queries";
@@ -234,11 +233,6 @@ export const ProductUpdate: React.StatelessComponent<ProductUpdateProps> = ({
                             placeholderImage={placeholderImg}
                             product={product}
                             variants={maybe(() => product.variants)}
-                            onAttributesEdit={() =>
-                              navigate(
-                                productTypeUrl(data.product.productType.id)
-                              )
-                            }
                             onBack={() => {
                               navigate(productListUrl());
                             }}

src/storybook/stories/products/ProductCreatePage.tsx

@@ -27,7 +27,6 @@ storiesOf("Views / Products / Create product", module)
       fetchProductTypes={() => undefined}
       productTypes={productTypes}
       categories={[product.category]}
-      onAttributesEdit={undefined}
       onBack={() => undefined}
       onSubmit={() => undefined}
       saveButtonBarState="default"
@@ -45,7 +44,6 @@ storiesOf("Views / Products / Create product", module)
       fetchProductTypes={() => undefined}
       productTypes={productTypes}
       categories={[product.category]}
-      onAttributesEdit={undefined}
       onBack={() => undefined}
       onSubmit={() => undefined}
       saveButtonBarState="default"
@@ -65,7 +63,6 @@ storiesOf("Views / Products / Create product", module)
       fetchProductTypes={() => undefined}
       productTypes={productTypes}
       categories={[product.category]}
-      onAttributesEdit={undefined}
       onBack={() => undefined}
       onSubmit={() => undefined}
       saveButtonBarState="default"

src/storybook/stories/products/ProductUpdatePage.tsx

@@ -22,7 +22,6 @@ const props: ProductUpdatePageProps = {
   fetchCollections: () => undefined,
   header: product.name,
   images: product.images,
-  onAttributesEdit: () => undefined,
   onBack: () => undefined,
   onDelete: () => undefined,
   onImageDelete: () => undefined,
@@ -63,4 +62,22 @@ storiesOf("Views / Products / Product edit", module)
       collections={undefined}
       images={undefined}
     />
+  ))
+  .add("no variants", () => (
+    <ProductUpdatePage
+      {...props}
+      product={{
+        ...props.product,
+        variants: []
+      }}
+    />
+  ))
+  .add("no product attributes", () => (
+    <ProductUpdatePage
+      {...props}
+      product={{
+        ...props.product,
+        attributes: []
+      }}
+    />
   ));