From 66bfd1a32d5bd7e8a0a12c4720ef0429f8a72980 Mon Sep 17 00:00:00 2001
From: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Date: Thu, 12 May 2022 15:39:27 +0200
Subject: [PATCH] Fix subcategory creation (#2041)

* Fix subcategory create button didn't use Button from dashboard
* Update snapshots
---
 .../CategoryUpdatePage/CategoryUpdatePage.tsx |  15 +-
 src/categories/views/CategoryDetails.tsx      |   3 +-
 .../__snapshots__/Stories.test.ts.snap        | 286 +++++++-----------
 .../stories/categories/CategoryUpdatePage.tsx |   2 +-
 4 files changed, 126 insertions(+), 180 deletions(-)

diff --git a/src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx b/src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx
index e712116c7..456a52594 100644
--- a/src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx
+++ b/src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx
@@ -1,6 +1,11 @@
 import { Card } from "@material-ui/core";
-import { categoryListUrl, categoryUrl } from "@saleor/categories/urls";
+import {
+  categoryAddUrl,
+  categoryListUrl,
+  categoryUrl
+} from "@saleor/categories/urls";
 import { Backlink } from "@saleor/components/Backlink";
+import { Button } from "@saleor/components/Button";
 import { CardSpacer } from "@saleor/components/CardSpacer";
 import CardTitle from "@saleor/components/CardTitle";
 import Container from "@saleor/components/Container";
@@ -13,7 +18,7 @@ import { CategoryDetailsQuery, ProductErrorFragment } from "@saleor/graphql";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import useNavigator from "@saleor/hooks/useNavigator";
 import { sectionNames } from "@saleor/intl";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -32,6 +37,7 @@ export enum CategoryPageTab {
 
 export interface CategoryUpdatePageProps
   extends TabListActions<"productListToolbar" | "subcategoryListToolbar"> {
+  categoryId: string;
   changeTab: (index: CategoryPageTab) => void;
   currentTab: CategoryPageTab;
   errors: ProductErrorFragment[];
@@ -45,7 +51,6 @@ export interface CategoryUpdatePageProps
   };
   saveButtonBarState: ConfirmButtonTransitionState;
   addProductHref: string;
-  addCategoryHref: string;
   onImageDelete: () => void;
   onSubmit: (data: CategoryUpdateData) => SubmitPromise;
   onImageUpload(file: File);
@@ -58,6 +63,7 @@ const CategoriesTab = Tab(CategoryPageTab.categories);
 const ProductsTab = Tab(CategoryPageTab.products);
 
 export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
+  categoryId,
   changeTab,
   currentTab,
   category,
@@ -67,7 +73,6 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
   products,
   saveButtonBarState,
   subcategories,
-  addCategoryHref,
   onDelete,
   onNextPage,
   onPreviousPage,
@@ -171,7 +176,7 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
                 toolbar={
                   <Button
                     variant="tertiary"
-                    href={addCategoryHref}
+                    href={categoryAddUrl(categoryId)}
                     data-test-id="create-subcategory"
                   >
                     <FormattedMessage
diff --git a/src/categories/views/CategoryDetails.tsx b/src/categories/views/CategoryDetails.tsx
index 7c9ac7d11..1bab1128e 100644
--- a/src/categories/views/CategoryDetails.tsx
+++ b/src/categories/views/CategoryDetails.tsx
@@ -39,7 +39,6 @@ import {
 } from "../components/CategoryUpdatePage/CategoryUpdatePage";
 import { CategoryUpdateData } from "../components/CategoryUpdatePage/form";
 import {
-  categoryAddUrl,
   categoryListUrl,
   categoryUrl,
   CategoryUrlDialog,
@@ -212,12 +211,12 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
     <>
       <WindowTitle title={maybe(() => data.category.name)} />
       <CategoryUpdatePage
+        categoryId={id}
         changeTab={changeTab}
         currentTab={activeTab}
         category={maybe(() => data.category)}
         disabled={loading}
         errors={updateResult.data?.categoryUpdate.errors || []}
-        addCategoryHref={categoryAddUrl(id)}
         addProductHref={productAddUrl()}
         onDelete={() => openModal("delete")}
         onImageDelete={() =>
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index f78e34cc1..3706b9217 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -40772,19 +40772,20 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
           <div
             class="MuiCardHeader-action-id"
           >
-            <button
+            <a
+              aria-disabled="false"
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
               data-test-id="create-subcategory"
-              href=""
+              href="/categories/123/add"
+              role="button"
               tabindex="0"
-              type="button"
             >
               <span
                 class="MuiButton-label-id"
               >
                 Create subcategory
               </span>
-            </button>
+            </a>
           </div>
         </div>
         <div
@@ -41548,19 +41549,20 @@ exports[`Storyshots Views / Categories / Update category form errors 1`] = `
           <div
             class="MuiCardHeader-action-id"
           >
-            <button
+            <a
+              aria-disabled="false"
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
               data-test-id="create-subcategory"
-              href=""
+              href="/categories/123/add"
+              role="button"
               tabindex="0"
-              type="button"
             >
               <span
                 class="MuiButton-label-id"
               >
                 Create subcategory
               </span>
-            </button>
+            </a>
           </div>
         </div>
         <div
@@ -42076,19 +42078,20 @@ exports[`Storyshots Views / Categories / Update category loading 1`] = `
           <div
             class="MuiCardHeader-action-id"
           >
-            <button
+            <a
+              aria-disabled="false"
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
               data-test-id="create-subcategory"
-              href=""
+              href="/categories/123/add"
+              role="button"
               tabindex="0"
-              type="button"
             >
               <span
                 class="MuiButton-label-id"
               >
                 Create subcategory
               </span>
-            </button>
+            </a>
           </div>
         </div>
         <div
@@ -42894,19 +42897,20 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
           <div
             class="MuiCardHeader-action-id"
           >
-            <button
+            <a
+              aria-disabled="false"
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
               data-test-id="create-subcategory"
-              href=""
+              href="/categories/123/add"
+              role="button"
               tabindex="0"
-              type="button"
             >
               <span
                 class="MuiButton-label-id"
               >
                 Create subcategory
               </span>
-            </button>
+            </a>
           </div>
         </div>
         <div
@@ -44435,19 +44439,20 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
           <div
             class="MuiCardHeader-action-id"
           >
-            <button
+            <a
+              aria-disabled="false"
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
               data-test-id="create-subcategory"
-              href=""
+              href="/categories/123/add"
+              role="button"
               tabindex="0"
-              type="button"
             >
               <span
                 class="MuiButton-label-id"
               >
                 Create subcategory
               </span>
-            </button>
+            </a>
           </div>
         </div>
         <div
@@ -183365,36 +183370,22 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                     class="MuiTableRow-root-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id ProductVariantNavigation-firstVariant-id"
-                      colspan="2"
-                      data-test-id="table-cell-avatar"
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                      colspan="3"
                     >
-                      <div
-                        class="Avatar-content-id Avatar-alignRight-id"
+                      <a
+                        aria-disabled="false"
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        href="/products/variant/add"
+                        role="button"
+                        tabindex="0"
                       >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
+                        <span
+                          class="MuiButton-label-id"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                              fill="currentColor"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      New Variant
+                          Add variant
+                        </span>
+                      </a>
                     </td>
                   </tr>
                 </tbody>
@@ -184430,36 +184421,22 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                     class="MuiTableRow-root-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id"
-                      colspan="2"
-                      data-test-id="table-cell-avatar"
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                      colspan="3"
                     >
-                      <div
-                        class="Avatar-content-id Avatar-alignRight-id"
+                      <a
+                        aria-disabled="false"
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        href="/products/variant/add"
+                        role="button"
+                        tabindex="0"
                       >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
+                        <span
+                          class="MuiButton-label-id"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                              fill="currentColor"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      New Variant
+                          Add variant
+                        </span>
+                      </a>
                     </td>
                   </tr>
                 </tbody>
@@ -185495,36 +185472,22 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
                     class="MuiTableRow-root-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id"
-                      colspan="2"
-                      data-test-id="table-cell-avatar"
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                      colspan="3"
                     >
-                      <div
-                        class="Avatar-content-id Avatar-alignRight-id"
+                      <a
+                        aria-disabled="false"
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        href="/products/variant/add"
+                        role="button"
+                        tabindex="0"
                       >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
+                        <span
+                          class="MuiButton-label-id"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                              fill="currentColor"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      New Variant
+                          Add variant
+                        </span>
+                      </a>
                     </td>
                   </tr>
                 </tbody>
@@ -186438,36 +186401,22 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                     class="MuiTableRow-root-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id"
-                      colspan="2"
-                      data-test-id="table-cell-avatar"
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                      colspan="3"
                     >
-                      <div
-                        class="Avatar-content-id Avatar-alignRight-id"
+                      <a
+                        aria-disabled="false"
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        href="/products/variant/add"
+                        role="button"
+                        tabindex="0"
                       >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
+                        <span
+                          class="MuiButton-label-id"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                              fill="currentColor"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      New Variant
+                          Add variant
+                        </span>
+                      </a>
                     </td>
                   </tr>
                 </tbody>
@@ -187373,36 +187322,22 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                     class="MuiTableRow-root-id MuiTableRow-hover-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id"
-                      colspan="2"
-                      data-test-id="table-cell-avatar"
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                      colspan="3"
                     >
-                      <div
-                        class="Avatar-content-id Avatar-alignRight-id"
+                      <a
+                        aria-disabled="false"
+                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        href="/products/variant/add"
+                        role="button"
+                        tabindex="0"
                       >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
+                        <span
+                          class="MuiButton-label-id"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                              fill="currentColor"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      New Variant
+                          Add variant
+                        </span>
+                      </a>
                     </td>
                   </tr>
                 </tbody>
@@ -224208,17 +224143,19 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                       colspan="3"
                     >
-                      <button
+                      <a
+                        aria-disabled="false"
                         class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        href="/products/variant/add"
+                        role="button"
                         tabindex="0"
-                        type="button"
                       >
                         <span
                           class="MuiButton-label-id"
                         >
                           Add variant
                         </span>
-                      </button>
+                      </a>
                     </td>
                   </tr>
                 </tbody>
@@ -226127,17 +226064,19 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                       colspan="3"
                     >
-                      <button
+                      <a
+                        aria-disabled="false"
                         class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        href="/products/variant/add"
+                        role="button"
                         tabindex="0"
-                        type="button"
                       >
                         <span
                           class="MuiButton-label-id"
                         >
                           Add variant
                         </span>
-                      </button>
+                      </a>
                     </td>
                   </tr>
                 </tbody>
@@ -228036,17 +227975,19 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                       colspan="3"
                     >
-                      <button
+                      <a
+                        aria-disabled="false"
                         class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        href="/products/variant/add"
+                        role="button"
                         tabindex="0"
-                        type="button"
                       >
                         <span
                           class="MuiButton-label-id"
                         >
                           Add variant
                         </span>
-                      </button>
+                      </a>
                     </td>
                   </tr>
                 </tbody>
@@ -229807,17 +229748,19 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                       colspan="3"
                     >
-                      <button
+                      <a
+                        aria-disabled="false"
                         class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                        href="/products/variant/add"
+                        role="button"
                         tabindex="0"
-                        type="button"
                       >
                         <span
                           class="MuiButton-label-id"
                         >
                           Add variant
                         </span>
-                      </button>
+                      </a>
                     </td>
                   </tr>
                 </tbody>
@@ -229894,12 +229837,11 @@ exports[`Storyshots Views / Products / Product variant details when loading data
               <div
                 class="ProductVariantMedia-root-id"
               >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
+                <div
+                  class="MuiTypography-root-id ProductVariantMedia-helpText-id MuiTypography-body1-id"
                 >
-                  ‌
-                </span>
+                  Select a specific variant media from product media
+                </div>
               </div>
             </div>
           </div>
diff --git a/src/storybook/stories/categories/CategoryUpdatePage.tsx b/src/storybook/stories/categories/CategoryUpdatePage.tsx
index 86ffead2d..509918af9 100644
--- a/src/storybook/stories/categories/CategoryUpdatePage.tsx
+++ b/src/storybook/stories/categories/CategoryUpdatePage.tsx
@@ -16,11 +16,11 @@ const category = categoryFixture(placeholderImage);
 
 const updateProps: Omit<CategoryUpdatePageProps, "classes"> = {
   category,
+  categoryId: "123",
   changeTab: undefined,
   currentTab: CategoryPageTab.categories,
   disabled: false,
   errors: [],
-  addCategoryHref: "",
   addProductHref: "",
   onDelete: () => undefined,
   onImageDelete: () => undefined,