Repository: saleor/saleor

Issue:
Restyle categories section in dashboard



Discussion:

Resolving patch:
diff --git a/saleor/graphql/product/types.py b/saleor/graphql/product/types.py
--- a/saleor/graphql/product/types.py
+++ b/saleor/graphql/product/types.py
@@ -338,8 +338,10 @@ def resolve_url(self, info):
         return self.get_absolute_url()
 
     def resolve_products(self, info, **kwargs):
-        qs = models.Product.objects.available_products()
-        qs = qs.filter(category=self)
+        qs = models.Product.objects.available_products().prefetch_related(
+            'variants', 'images', 'product_type')
+        categories_tree = self.get_descendants(include_self=True)
+        qs = qs.filter(category__in=categories_tree)
         return qs.distinct()
 
 


Test patch:
diff --git a/saleor/static/dashboard-next/storybook/__snapshots__/Stories.test.ts.snap b/saleor/static/dashboard-next/storybook/__snapshots__/Stories.test.ts.snap
--- a/saleor/static/dashboard-next/storybook/__snapshots__/Stories.test.ts.snap
+++ b/saleor/static/dashboard-next/storybook/__snapshots__/Stories.test.ts.snap
@@ -1,9 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Categories / CategoryDeleteDialog default 1`] = `<div />`;
-
-exports[`Storyshots Categories / CategoryDeleteDialog with products 1`] = `<div />`;
-
 exports[`Storyshots Categories / CategoryProducts when loading data 1`] = `
 <div>
   <div
@@ -6238,7 +6234,7 @@ exports[`Storyshots Views / Authentication / Verifying remembered user default 1
 </div>
 `;
 
-exports[`Storyshots Views / Categories / Category details default 1`] = `
+exports[`Storyshots Views / Categories / Category list default 1`] = `
 <div>
   <div
     class="Component-md-id"
@@ -6246,91 +6242,458 @@ exports[`Storyshots Views / Categories / Category details default 1`] = `
     <div
       class="Component-root-id"
     >
-      <button
-        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id Component-menuButton-id"
-        tabindex="0"
-        type="button"
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
       >
-        <span
-          class="MuiIconButton-label-id"
+        Category
+      </h2>
+      <div
+        class="Component-action-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
+          tabindex="0"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id"
-            focusable="false"
-            viewBox="0 0 24 24"
+          <span
+            class="MuiButton-label-id"
           >
-            <g>
-              <path
-                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-              />
-            </g>
-          </svg>
-        </span>
-        <span
-          class="MuiTouchRipple-root-id"
-        />
-      </button>
+            Add category 
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <g>
+                <path
+                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+                />
+              </g>
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+      </div>
+    </div>
+    <div
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+    >
+      <table
+        class="MuiTable-root-id"
+        padding="default"
+      >
+        <thead
+          class="MuiTableHead-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
+          >
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id Component-wideColumn-id"
+              scope="col"
+            >
+              Category Name
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id Component-centerText-id"
+              scope="col"
+            >
+              Subcategories
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id Component-centerText-id"
+              scope="col"
+            >
+              No. Products
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          class="MuiTableBody-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              Lorem ipsum dolor
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-centerText-id"
+            >
+              2
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-centerText-id"
+            >
+              4
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              Mauris vehicula tortor vulputate
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-centerText-id"
+            >
+              54
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-centerText-id"
+            >
+              3
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              Excepteur sint occaecat cupidatat non proident
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-centerText-id"
+            >
+              2
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-centerText-id"
+            >
+              6
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              Ut enim ad minim veniam
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-centerText-id"
+            >
+              6
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-centerText-id"
+            >
+              12
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              Duis aute irure dolor in reprehenderit
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-centerText-id"
+            >
+              76
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-centerText-id"
+            >
+              43
+            </td>
+          </tr>
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+            >
+              Neque porro quisquam est
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-centerText-id"
+            >
+              11
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-centerText-id"
+            >
+              21
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Categories / Category list empty 1`] = `
+<div>
+  <div
+    class="Component-md-id"
+  >
+    <div
+      class="Component-root-id"
+    >
       <h2
         class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
       >
-        Apparel
+        Category
       </h2>
       <div
         class="Component-action-id"
-      />
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Add category 
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <g>
+                <path
+                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+                />
+              </g>
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+      </div>
+    </div>
+    <div
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+    >
+      <table
+        class="MuiTable-root-id"
+        padding="default"
+      >
+        <thead
+          class="MuiTableHead-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
+          >
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id Component-wideColumn-id"
+              scope="col"
+            >
+              Category Name
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id Component-centerText-id"
+              scope="col"
+            >
+              Subcategories
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id Component-centerText-id"
+              scope="col"
+            >
+              No. Products
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          class="MuiTableBody-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
+              colspan="3"
+            >
+              No categories found
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
-    <div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Categories / Category list loading 1`] = `
+<div>
+  <div
+    class="Component-md-id"
+  >
+    <div
+      class="Component-root-id"
+    >
+      <h2
+        class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
+      >
+        Category
+      </h2>
       <div
-        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        class="Component-action-id"
       >
-        <div
-          class="Component-root-id"
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
+          tabindex="0"
+          type="button"
         >
           <span
-            class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+            class="MuiButton-label-id"
           >
-            Details
+            Add category 
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <g>
+                <path
+                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+                />
+              </g>
+            </svg>
           </span>
-          <div
-            class="Component-toolbar-id"
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+      </div>
+    </div>
+    <div
+      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+    >
+      <table
+        class="MuiTable-root-id"
+        padding="default"
+      >
+        <thead
+          class="MuiTableHead-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
           >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-              tabindex="0"
-              type="button"
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id Component-wideColumn-id"
+              scope="col"
+            >
+              Category Name
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id Component-centerText-id"
+              scope="col"
+            >
+              Subcategories
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id Component-centerText-id"
+              scope="col"
+            >
+              No. Products
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          class="MuiTableBody-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id Component-tableRow-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id"
             >
               <span
-                class="MuiButton-label-id"
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-centerText-id"
+            >
+              <span
+                class="Skeleton-skeleton-id"
               >
-                Edit category
+                ‌
               </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id Component-centerText-id"
+            >
               <span
-                class="MuiTouchRipple-root-id"
-              />
-            </button>
-          </div>
-        </div>
-        <div
-          class="Component-children-id"
-        />
-        <hr
-          class="Component-hr-id"
-        />
-        <div
-          class="MuiCardContent-root-id"
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Views / Categories / Create category When loading 1`] = `
+<div>
+  <form>
+    <div
+      class="Component-md-id"
+    >
+      <div
+        class="Component-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id Component-menuButton-id"
+          tabindex="0"
+          type="button"
         >
-          <p
-            class="MuiTypography-root-id MuiTypography-body1-id"
+          <span
+            class="MuiIconButton-label-id"
           >
-            Across pressure PM food discover recognize. Send letter reach listen. Quickly work plan rule.
-Tell lose part purpose do when. Whatever drug contain particularly defense.
-          </p>
-        </div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <g>
+                <path
+                  d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+                />
+              </g>
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
+        >
+          Add Category
+        </h2>
+        <div
+          class="Component-action-id"
+        />
       </div>
-      <div
-        class="Component-cardContainer-id"
-      >
+      <div>
         <div
           class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
         >
@@ -6340,26 +6703,11 @@ Tell lose part purpose do when. Whatever drug contain particularly defense.
             <span
               class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
             >
-              Subcategories
+              General information
             </span>
             <div
               class="Component-toolbar-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add subcategory
-                </span>
-                <span
-                  class="MuiTouchRipple-root-id"
-                />
-              </button>
-            </div>
+            />
           </div>
           <div
             class="Component-children-id"
@@ -6367,84 +6715,88 @@ Tell lose part purpose do when. Whatever drug contain particularly defense.
           <hr
             class="Component-hr-id"
           />
-          <table
-            class="MuiTable-root-id"
-            padding="default"
+          <div
+            class="MuiCardContent-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+            <div>
+              <div
+                class="MuiFormControl-root-id Component-root-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id Component-wideColumn-id"
-                  scope="col"
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
                   Name
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                >
-                  Subcategories
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id Component-centerText-id"
-                  scope="col"
+                </label>
+                <div
+                  class="MuiInput-root-id MuiInput-disabled-id MuiInput-formControl-id MuiInput-underline-id"
                 >
-                  No. Products
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
+                  <input
+                    aria-invalid="false"
+                    class="MuiInput-input-id MuiInput-disabled-id"
+                    disabled=""
+                    name="name"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              class="Component-spacer-id"
+            />
+            <div
+              class="MuiFormControl-root-id"
+              style="width:100%"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
+              <label
+                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                data-shrink="false"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Lorem ipsum dolor
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                Description
+              </label>
+              <div
+                class="MuiInput-root-id MuiInput-disabled-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-multiline-id MuiInput-underline-id"
+              >
+                <div
+                  class="Textarea-root-id"
+                  style="height:19px"
                 >
-                  2
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-centerText-id"
-                >
-                  4
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
+                  <textarea
+                    aria-hidden="true"
+                    class="Textarea-textarea-id Textarea-shadow-id"
+                    readonly=""
+                    rows="1"
+                    tabindex="-1"
+                  />
+                  <textarea
+                    aria-hidden="true"
+                    class="Textarea-textarea-id Textarea-shadow-id"
+                    readonly=""
+                    rows="1"
+                    tabindex="-1"
+                  />
+                  <textarea
+                    aria-invalid="false"
+                    class="Textarea-textarea-id MuiInput-input-id MuiInput-disabled-id MuiInput-inputMultiline-id"
+                    disabled=""
+                    name="description"
+                    rows="1"
+                    type="text"
+                  />
+                </div>
+              </div>
+              <p
+                class="MuiFormHelperText-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Mauris vehicula tortor vulputate
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  18
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-centerText-id"
-                >
-                  2
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                Select text to enable text-formatting tools.
+              </p>
+            </div>
+          </div>
         </div>
-      </div>
-      <div
-        class="Component-cardContainer-id"
-      >
+        <div
+          class="Component-spacer-id"
+        />
         <div
           class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
         >
@@ -6454,7 +6806,7 @@ Tell lose part purpose do when. Whatever drug contain particularly defense.
             <span
               class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
             >
-              Products
+              Search Engine Preview
             </span>
             <div
               class="Component-toolbar-id"
@@ -6467,7 +6819,7 @@ Tell lose part purpose do when. Whatever drug contain particularly defense.
                 <span
                   class="MuiButton-label-id"
                 >
-                  Add product
+                  Edit website SEO
                 </span>
                 <span
                   class="MuiTouchRipple-root-id"
@@ -6481,459 +6833,653 @@ Tell lose part purpose do when. Whatever drug contain particularly defense.
           <hr
             class="Component-hr-id"
           />
-          <table
-            class="MuiTable-root-id"
-            padding="default"
+          <div
+            class="MuiCardContent-root-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                />
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id Component-textLeft-id"
-                  scope="col"
-                >
-                  Name
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                >
-                  Type
-                </th>
-              </tr>
-            </thead>
-            <tfoot
-              class="MuiTableFooter-root-id"
+              Add search engine title and description to make this product easier to find
+            </p>
+          </div>
+        </div>
+        <div
+          class="Component-root-id"
+        >
+          <div
+            class="Component-spacer-id"
+          />
+          <button
+            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id Component-cancelButton-id"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-footer-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-                  colspan="3"
-                >
-                  <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
-                  >
-                    <div
-                      class="TablePagination-spacer-id"
-                    />
-                    <div
-                      class="TablePaginationActions-root-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"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
-                            />
-                          </svg>
-                        </span>
-                        <span
-                          class="MuiTouchRipple-root-id"
-                        />
-                      </button>
-                      <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"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
-                            />
-                          </svg>
-                        </span>
-                        <span
-                          class="MuiTouchRipple-root-id"
-                        />
-                      </button>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
+              Cancel
+            </span>
+            <span
+              class="MuiTouchRipple-root-id"
+            />
+          </button>
+          <button
+            class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id"
+            disabled=""
+            tabindex="-1"
+            type="button"
+          >
+            <span
+              class="MuiButton-label-id"
             >
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id Component-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textLeft-id"
-                >
-                  <span
-                    class="Component-link-id"
-                  >
-                    Gorgeous Frozen Chips
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Awesome Wooden Pizza
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
+              Save category
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Categories / Create category default 1`] = `
+<div>
+  <form>
+    <div
+      class="Component-md-id"
+    >
+      <div
+        class="Component-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id Component-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <g>
+                <path
+                  d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+                />
+              </g>
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
+        >
+          Add Category
+        </h2>
+        <div
+          class="Component-action-id"
+        />
+      </div>
+      <div>
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="Component-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+            >
+              General information
+            </span>
+            <div
+              class="Component-toolbar-id"
+            />
+          </div>
+          <div
+            class="Component-children-id"
+          />
+          <hr
+            class="Component-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <div>
+              <div
+                class="MuiFormControl-root-id Component-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id Component-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textLeft-id"
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                  data-shrink="false"
                 >
-                  <span
-                    class="Component-link-id"
-                  >
-                    Handcrafted Wooden Towels
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                  Name
+                </label>
+                <div
+                  class="MuiInput-root-id MuiInput-formControl-id MuiInput-underline-id"
                 >
-                  Future
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
+                  <input
+                    aria-invalid="false"
+                    class="MuiInput-input-id"
+                    name="name"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              class="Component-spacer-id"
+            />
+            <div
+              class="MuiFormControl-root-id"
+              style="width:100%"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                data-shrink="false"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id Component-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textLeft-id"
-                >
-                  <span
-                    class="Component-link-id"
-                  >
-                    Handcrafted Metal Cheese
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  SMS
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
+                Description
+              </label>
+              <div
+                class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-multiline-id MuiInput-underline-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id Component-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textLeft-id"
-                >
-                  <span
-                    class="Component-link-id"
-                  >
-                    Refined Rubber Keyboard
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                <div
+                  class="Textarea-root-id"
+                  style="height:19px"
                 >
-                  Virtual
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
+                  <textarea
+                    aria-hidden="true"
+                    class="Textarea-textarea-id Textarea-shadow-id"
+                    readonly=""
+                    rows="1"
+                    tabindex="-1"
+                  />
+                  <textarea
+                    aria-hidden="true"
+                    class="Textarea-textarea-id Textarea-shadow-id"
+                    readonly=""
+                    rows="1"
+                    tabindex="-1"
+                  />
+                  <textarea
+                    aria-invalid="false"
+                    class="Textarea-textarea-id MuiInput-input-id MuiInput-inputMultiline-id"
+                    name="description"
+                    rows="1"
+                    type="text"
+                  />
+                </div>
+              </div>
+              <p
+                class="MuiFormHelperText-root-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id Component-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textLeft-id"
-                >
-                  <span
-                    class="Component-link-id"
-                  >
-                    Gorgeous Metal Gloves
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Vermont
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
+                Select text to enable text-formatting tools.
+              </p>
+            </div>
+          </div>
+        </div>
+        <div
+          class="Component-spacer-id"
+        />
+        <div
+          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+        >
+          <div
+            class="Component-root-id"
+          >
+            <span
+              class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+            >
+              Search Engine Preview
+            </span>
+            <div
+              class="Component-toolbar-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+                tabindex="0"
+                type="button"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id Component-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textLeft-id"
-                >
-                  <span
-                    class="Component-link-id"
-                  >
-                    Small Cotton Shirt
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                <span
+                  class="MuiButton-label-id"
                 >
-                  Gorgeous
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
+                  Edit website SEO
+                </span>
+                <span
+                  class="MuiTouchRipple-root-id"
+                />
+              </button>
+            </div>
+          </div>
+          <div
+            class="Component-children-id"
+          />
+          <hr
+            class="Component-hr-id"
+          />
+          <div
+            class="MuiCardContent-root-id"
+          >
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              Add search engine title and description to make this product easier to find
+            </p>
+          </div>
+        </div>
+        <div
+          class="Component-root-id"
+        >
+          <div
+            class="Component-spacer-id"
+          />
+          <button
+            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id Component-cancelButton-id"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label-id"
+            >
+              Cancel
+            </span>
+            <span
+              class="MuiTouchRipple-root-id"
+            />
+          </button>
+          <button
+            class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id"
+            disabled=""
+            tabindex="-1"
+            type="button"
+          >
+            <span
+              class="MuiButton-label-id"
+            >
+              Save category
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Categories / Update category default 1`] = `
+<div>
+  <form>
+    <div
+      class="Component-md-id"
+    >
+      <div
+        class="Component-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id Component-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <g>
+                <path
+                  d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+                />
+              </g>
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
+        >
+          Coffees
+        </h2>
+        <div
+          class="Component-action-id"
+        />
+      </div>
+      <div
+        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+      >
+        <div
+          class="Component-root-id"
+        >
+          <span
+            class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+          >
+            General information
+          </span>
+          <div
+            class="Component-toolbar-id"
+          />
+        </div>
+        <div
+          class="Component-children-id"
+        />
+        <hr
+          class="Component-hr-id"
+        />
+        <div
+          class="MuiCardContent-root-id"
+        >
+          <div>
+            <div
+              class="MuiFormControl-root-id Component-root-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                data-shrink="true"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id Component-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textLeft-id"
-                >
-                  <span
-                    class="Component-link-id"
-                  >
-                    Fantastic Cotton Tuna
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  TCP
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
+                Name
+              </label>
+              <div
+                class="MuiInput-root-id MuiInput-formControl-id MuiInput-underline-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id Component-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textLeft-id"
-                >
-                  <span
-                    class="Component-link-id"
-                  >
-                    Tasty Steel Pants
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Buckinghamshire
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
+                <input
+                  aria-invalid="false"
+                  class="MuiInput-input-id"
+                  name="name"
+                  type="text"
+                  value="Coffees"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="Component-spacer-id"
+          />
+          <div
+            class="MuiFormControl-root-id"
+            style="width:100%"
+          >
+            <label
+              class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+              data-shrink="true"
+            >
+              Description
+            </label>
+            <div
+              class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-multiline-id MuiInput-underline-id"
+            >
+              <div
+                class="Textarea-root-id"
+                style="height:19px"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id Component-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textLeft-id"
+                <textarea
+                  aria-hidden="true"
+                  class="Textarea-textarea-id Textarea-shadow-id"
+                  readonly=""
+                  rows="1"
+                  tabindex="-1"
+                />
+                <textarea
+                  aria-hidden="true"
+                  class="Textarea-textarea-id Textarea-shadow-id"
+                  readonly=""
+                  rows="1"
+                  tabindex="-1"
                 >
-                  <span
-                    class="Component-link-id"
-                  >
-                    Ergonomic Cotton Shoes
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
+                  Difference direction to treat anything worker occur. Miss in thousand Democrat civil hope set.
+                </textarea>
+                <textarea
+                  aria-invalid="false"
+                  class="Textarea-textarea-id MuiInput-input-id MuiInput-inputMultiline-id"
+                  name="description"
+                  rows="1"
+                  type="text"
                 >
-                  Jewelery
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
+                  Difference direction to treat anything worker occur. Miss in thousand Democrat civil hope set.
+                </textarea>
+              </div>
+            </div>
+            <p
+              class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
+            >
+              Select text to enable text-formatting tools.
+            </p>
+          </div>
+        </div>
+      </div>
+      <div
+        class="Component-spacer-id"
+      />
+      <div
+        class="Component-spacer-id"
+      />
+      <div
+        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+      >
+        <div
+          class="Component-root-id"
+        >
+          <span
+            class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+          >
+            Search Engine Preview
+          </span>
+          <div
+            class="Component-toolbar-id"
+          >
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id Component-avatar-id"
-                  >
-                    <img
-                      class="MuiAvatar-img-id"
-                      src="placeholder60x60.png"
-                    />
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textLeft-id"
-                >
-                  <span
-                    class="Component-link-id"
-                  >
-                    Unbranded Steel Tuna
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Agent
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                Edit website SEO
+              </span>
+              <span
+                class="MuiTouchRipple-root-id"
+              />
+            </button>
+          </div>
+        </div>
+        <div
+          class="Component-children-id"
+        />
+        <hr
+          class="Component-hr-id"
+        />
+        <div
+          class="MuiCardContent-root-id"
+        >
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id"
+          >
+            Add search engine title and description to make this category easier to find
+          </p>
         </div>
       </div>
-    </div>
-    <div
-      class="Component-actions-id"
-    >
-      <button
-        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id Component-deleteButton-id"
-        tabindex="0"
-        type="button"
+      <div
+        class="Component-spacer-id"
+      />
+      <div
+        class="Component-tabsBorder-id"
       >
         <span
-          class="MuiButton-label-id"
+          class="MuiTypography-root-id MuiTypography-body1-id Component-root-id Component-active-id"
         >
-          Remove category
+          Subcategories
         </span>
         <span
-          class="MuiTouchRipple-root-id"
+          class="MuiTypography-root-id MuiTypography-body1-id Component-root-id"
+        >
+          Products
+        </span>
+      </div>
+      <div
+        class="Component-spacer-id"
+      />
+      <div
+        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+      >
+        <div
+          class="Component-root-id"
+        >
+          <span
+            class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+          >
+            All Subcategories
+          </span>
+          <div
+            class="Component-toolbar-id"
+          >
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Add subcategory
+              </span>
+              <span
+                class="MuiTouchRipple-root-id"
+              />
+            </button>
+          </div>
+        </div>
+        <div
+          class="Component-children-id"
+        />
+        <hr
+          class="Component-hr-id"
+        />
+        <table
+          class="MuiTable-root-id"
+          padding="default"
+        >
+          <thead
+            class="MuiTableHead-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
+            >
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Component-wideColumn-id"
+                scope="col"
+              >
+                Category Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Component-centerText-id"
+                scope="col"
+              >
+                Subcategories
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Component-centerText-id"
+                scope="col"
+              >
+                No. Products
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="3"
+              >
+                No subcategories found
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div
+        class="Component-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id Component-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Delete category
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+        <div
+          class="Component-spacer-id"
         />
-      </button>
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id Component-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Save
+          </span>
+        </button>
+      </div>
     </div>
-  </div>
+  </form>
 </div>
 `;
 
-exports[`Storyshots Views / Categories / Category details when in root 1`] = `
+exports[`Storyshots Views / Categories / Update category loading 1`] = `
 <div>
-  <div
-    class="Component-md-id"
-  >
+  <form>
     <div
-      class="Component-root-id"
+      class="Component-md-id"
     >
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
-      >
-        Categories
-      </h2>
       <div
-        class="Component-action-id"
+        class="Component-root-id"
       >
         <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id"
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id Component-menuButton-id"
           tabindex="0"
           type="button"
         >
           <span
-            class="MuiButton-label-id"
+            class="MuiIconButton-label-id"
           >
-            Add category 
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id"
@@ -6942,7 +7488,7 @@ exports[`Storyshots Views / Categories / Category details when in root 1`] = `
             >
               <g>
                 <path
-                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+                  d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
                 />
               </g>
             </svg>
@@ -6951,118 +7497,126 @@ exports[`Storyshots Views / Categories / Category details when in root 1`] = `
             class="MuiTouchRipple-root-id"
           />
         </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
+        >
+          <span
+            class="Skeleton-skeleton-id"
+            style="width:10em"
+          >
+            ‌
+          </span>
+        </h2>
+        <div
+          class="Component-action-id"
+        />
       </div>
-    </div>
-    <div>
       <div
-        class=""
+        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
       >
         <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          class="Component-root-id"
         >
-          <table
-            class="MuiTable-root-id"
-            padding="default"
+          <span
+            class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            General information
+          </span>
+          <div
+            class="Component-toolbar-id"
+          />
+        </div>
+        <div
+          class="Component-children-id"
+        />
+        <hr
+          class="Component-hr-id"
+        />
+        <div
+          class="MuiCardContent-root-id"
+        >
+          <div>
+            <div
+              class="MuiFormControl-root-id Component-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <label
+                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+                data-shrink="false"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id Component-wideColumn-id"
-                  scope="col"
-                >
-                  Name
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                >
-                  Subcategories
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id Component-centerText-id"
-                  scope="col"
-                >
-                  No. Products
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
+                Name
+              </label>
+              <div
+                class="MuiInput-root-id MuiInput-disabled-id MuiInput-formControl-id MuiInput-underline-id"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Lorem ipsum dolor
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  2
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-centerText-id"
-                >
-                  4
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-hover-id Component-tableRow-id"
+                <input
+                  aria-invalid="false"
+                  class="MuiInput-input-id MuiInput-disabled-id"
+                  disabled=""
+                  name="name"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="Component-spacer-id"
+          />
+          <div
+            class="MuiFormControl-root-id"
+            style="width:100%"
+          >
+            <label
+              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id"
+              data-shrink="false"
+            >
+              Description
+            </label>
+            <div
+              class="MuiInput-root-id MuiInput-disabled-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-multiline-id MuiInput-underline-id"
+            >
+              <div
+                class="Textarea-root-id"
+                style="height:19px"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  Mauris vehicula tortor vulputate
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  18
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-centerText-id"
-                >
-                  2
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                <textarea
+                  aria-hidden="true"
+                  class="Textarea-textarea-id Textarea-shadow-id"
+                  readonly=""
+                  rows="1"
+                  tabindex="-1"
+                />
+                <textarea
+                  aria-hidden="true"
+                  class="Textarea-textarea-id Textarea-shadow-id"
+                  readonly=""
+                  rows="1"
+                  tabindex="-1"
+                />
+                <textarea
+                  aria-invalid="false"
+                  class="Textarea-textarea-id MuiInput-input-id MuiInput-disabled-id MuiInput-inputMultiline-id"
+                  disabled=""
+                  name="description"
+                  rows="1"
+                  type="text"
+                />
+              </div>
+            </div>
+            <p
+              class="MuiFormHelperText-root-id"
+            >
+              Select text to enable text-formatting tools.
+            </p>
+          </div>
         </div>
       </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Categories / Category details when loading 1`] = `
-<div>
-  <div
-    class="Component-md-id"
-  >
-    <div
-      class="Component-root-id"
-    >
-      <h2
-        class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
-      >
-        <span
-          class="Skeleton-skeleton-id"
-          style="width:10em"
-        >
-          ‌
-        </span>
-      </h2>
       <div
-        class="Component-action-id"
+        class="Component-spacer-id"
+      />
+      <div
+        class="Component-spacer-id"
       />
-    </div>
-    <div>
       <div
         class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
       >
@@ -7072,7 +7626,7 @@ exports[`Storyshots Views / Categories / Category details when loading 1`] = `
           <span
             class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
           >
-            Details
+            Search Engine Preview
           </span>
           <div
             class="Component-toolbar-id"
@@ -7085,7 +7639,7 @@ exports[`Storyshots Views / Categories / Category details when loading 1`] = `
               <span
                 class="MuiButton-label-id"
               >
-                Edit category
+                Edit website SEO
               </span>
               <span
                 class="MuiTouchRipple-root-id"
@@ -7102,326 +7656,540 @@ exports[`Storyshots Views / Categories / Category details when loading 1`] = `
         <div
           class="MuiCardContent-root-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id"
           >
-            ‌
-          </span>
+            Add search engine title and description to make this category easier to find
+          </p>
         </div>
       </div>
       <div
-        class="Component-cardContainer-id"
+        class="Component-spacer-id"
+      />
+      <div
+        class="Component-tabsBorder-id"
+      >
+        <span
+          class="MuiTypography-root-id MuiTypography-body1-id Component-root-id Component-active-id"
+        >
+          Subcategories
+        </span>
+        <span
+          class="MuiTypography-root-id MuiTypography-body1-id Component-root-id"
+        >
+          Products
+        </span>
+      </div>
+      <div
+        class="Component-spacer-id"
+      />
+      <div
+        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
       >
         <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          class="Component-root-id"
         >
+          <span
+            class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+          >
+            All Subcategories
+          </span>
           <div
-            class="Component-root-id"
+            class="Component-toolbar-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+              tabindex="0"
+              type="button"
             >
-              Subcategories
-            </span>
-            <div
-              class="Component-toolbar-id"
+              <span
+                class="MuiButton-label-id"
+              >
+                Add subcategory
+              </span>
+              <span
+                class="MuiTouchRipple-root-id"
+              />
+            </button>
+          </div>
+        </div>
+        <div
+          class="Component-children-id"
+        />
+        <hr
+          class="Component-hr-id"
+        />
+        <table
+          class="MuiTable-root-id"
+          padding="default"
+        >
+          <thead
+            class="MuiTableHead-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                tabindex="0"
-                type="button"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Component-wideColumn-id"
+                scope="col"
+              >
+                Category Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Component-centerText-id"
+                scope="col"
+              >
+                Subcategories
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Component-centerText-id"
+                scope="col"
+              >
+                No. Products
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id Component-tableRow-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
               >
                 <span
-                  class="MuiButton-label-id"
+                  class="Skeleton-skeleton-id"
                 >
-                  Add subcategory
+                  ‌
                 </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Component-centerText-id"
+              >
                 <span
-                  class="MuiTouchRipple-root-id"
+                  class="Skeleton-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Component-centerText-id"
+              >
+                <span
+                  class="Skeleton-skeleton-id"
+                >
+                  ‌
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div
+        class="Component-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id Component-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Delete category
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+        <div
+          class="Component-spacer-id"
+        />
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id Component-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Save
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Views / Categories / Update category no background 1`] = `
+<div>
+  <form>
+    <div
+      class="Component-md-id"
+    >
+      <div
+        class="Component-root-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id Component-menuButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label-id"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <g>
+                <path
+                  d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
                 />
-              </button>
+              </g>
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+        <h2
+          class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
+        >
+          Coffees
+        </h2>
+        <div
+          class="Component-action-id"
+        />
+      </div>
+      <div
+        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+      >
+        <div
+          class="Component-root-id"
+        >
+          <span
+            class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+          >
+            General information
+          </span>
+          <div
+            class="Component-toolbar-id"
+          />
+        </div>
+        <div
+          class="Component-children-id"
+        />
+        <hr
+          class="Component-hr-id"
+        />
+        <div
+          class="MuiCardContent-root-id"
+        >
+          <div>
+            <div
+              class="MuiFormControl-root-id Component-root-id"
+            >
+              <label
+                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                data-shrink="true"
+              >
+                Name
+              </label>
+              <div
+                class="MuiInput-root-id MuiInput-formControl-id MuiInput-underline-id"
+              >
+                <input
+                  aria-invalid="false"
+                  class="MuiInput-input-id"
+                  name="name"
+                  type="text"
+                  value="Coffees"
+                />
+              </div>
             </div>
           </div>
           <div
-            class="Component-children-id"
-          />
-          <hr
-            class="Component-hr-id"
+            class="Component-spacer-id"
           />
-          <table
-            class="MuiTable-root-id"
-            padding="default"
+          <div
+            class="MuiFormControl-root-id"
+            style="width:100%"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <label
+              class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+              data-shrink="true"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id Component-wideColumn-id"
-                  scope="col"
-                >
-                  Name
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                >
-                  Subcategories
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id Component-centerText-id"
-                  scope="col"
-                >
-                  No. Products
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
+              Description
+            </label>
+            <div
+              class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-multiline-id MuiInput-underline-id"
             >
-              <tr
-                class="MuiTableRow-root-id Component-tableRow-id"
+              <div
+                class="Textarea-root-id"
+                style="height:19px"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-centerText-id"
+                <textarea
+                  aria-hidden="true"
+                  class="Textarea-textarea-id Textarea-shadow-id"
+                  readonly=""
+                  rows="1"
+                  tabindex="-1"
+                />
+                <textarea
+                  aria-hidden="true"
+                  class="Textarea-textarea-id Textarea-shadow-id"
+                  readonly=""
+                  rows="1"
+                  tabindex="-1"
                 >
-                  <span
-                    class="Skeleton-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  Difference direction to treat anything worker occur. Miss in thousand Democrat civil hope set.
+                </textarea>
+                <textarea
+                  aria-invalid="false"
+                  class="Textarea-textarea-id MuiInput-input-id MuiInput-inputMultiline-id"
+                  name="description"
+                  rows="1"
+                  type="text"
+                >
+                  Difference direction to treat anything worker occur. Miss in thousand Democrat civil hope set.
+                </textarea>
+              </div>
+            </div>
+            <p
+              class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
+            >
+              Select text to enable text-formatting tools.
+            </p>
+          </div>
         </div>
       </div>
       <div
-        class="Component-cardContainer-id"
+        class="Component-spacer-id"
+      />
+      <div
+        class="Component-spacer-id"
+      />
+      <div
+        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
       >
         <div
-          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+          class="Component-root-id"
         >
+          <span
+            class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+          >
+            Search Engine Preview
+          </span>
           <div
-            class="Component-root-id"
+            class="Component-toolbar-id"
           >
-            <span
-              class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
-            >
-              Products
-            </span>
-            <div
-              class="Component-toolbar-id"
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+              tabindex="0"
+              type="button"
             >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
-                tabindex="0"
-                type="button"
+              <span
+                class="MuiButton-label-id"
               >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add product
-                </span>
-                <span
-                  class="MuiTouchRipple-root-id"
-                />
-              </button>
-            </div>
+                Edit website SEO
+              </span>
+              <span
+                class="MuiTouchRipple-root-id"
+              />
+            </button>
           </div>
+        </div>
+        <div
+          class="Component-children-id"
+        />
+        <hr
+          class="Component-hr-id"
+        />
+        <div
+          class="MuiCardContent-root-id"
+        >
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id"
+          >
+            Add search engine title and description to make this category easier to find
+          </p>
+        </div>
+      </div>
+      <div
+        class="Component-spacer-id"
+      />
+      <div
+        class="Component-tabsBorder-id"
+      >
+        <span
+          class="MuiTypography-root-id MuiTypography-body1-id Component-root-id Component-active-id"
+        >
+          Subcategories
+        </span>
+        <span
+          class="MuiTypography-root-id MuiTypography-body1-id Component-root-id"
+        >
+          Products
+        </span>
+      </div>
+      <div
+        class="Component-spacer-id"
+      />
+      <div
+        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+      >
+        <div
+          class="Component-root-id"
+        >
+          <span
+            class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+          >
+            All Subcategories
+          </span>
           <div
-            class="Component-children-id"
-          />
-          <hr
-            class="Component-hr-id"
-          />
-          <table
-            class="MuiTable-root-id"
-            padding="default"
+            class="Component-toolbar-id"
           >
-            <thead
-              class="MuiTableHead-root-id"
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+              tabindex="0"
+              type="button"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
+              <span
+                class="MuiButton-label-id"
               >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                />
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id Component-textLeft-id"
-                  scope="col"
-                >
-                  Name
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id"
-                  scope="col"
-                >
-                  Type
-                </th>
-              </tr>
-            </thead>
-            <tfoot
-              class="MuiTableFooter-root-id"
+                Add subcategory
+              </span>
+              <span
+                class="MuiTouchRipple-root-id"
+              />
+            </button>
+          </div>
+        </div>
+        <div
+          class="Component-children-id"
+        />
+        <hr
+          class="Component-hr-id"
+        />
+        <table
+          class="MuiTable-root-id"
+          padding="default"
+        >
+          <thead
+            class="MuiTableHead-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-footer-id"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Component-wideColumn-id"
+                scope="col"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
-                  colspan="3"
-                >
-                  <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
-                  >
-                    <div
-                      class="TablePagination-spacer-id"
-                    />
-                    <div
-                      class="TablePaginationActions-root-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
-                            />
-                          </svg>
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
-                            />
-                          </svg>
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
+                Category Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Component-centerText-id"
+                scope="col"
+              >
+                Subcategories
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Component-centerText-id"
+                scope="col"
+              >
+                No. Products
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id"
             >
-              <tr
-                class="MuiTableRow-root-id"
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="3"
               >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-root-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id Component-avatar-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <g>
-                        <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"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Component-textLeft-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                  >
-                    ‌
-                  </span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+                No subcategories found
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
-    </div>
-    <div
-      class="Component-actions-id"
-    >
-      <button
-        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id Component-deleteButton-id"
-        tabindex="0"
-        type="button"
+      <div
+        class="Component-root-id"
       >
-        <span
-          class="MuiButton-label-id"
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id Component-deleteButton-id"
+          tabindex="0"
+          type="button"
         >
-          Remove category
-        </span>
-        <span
-          class="MuiTouchRipple-root-id"
+          <span
+            class="MuiButton-label-id"
+          >
+            Delete category
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+        <div
+          class="Component-spacer-id"
         />
-      </button>
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id Component-cancelButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Cancel
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
+        <button
+          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Save
+          </span>
+        </button>
+      </div>
     </div>
-  </div>
+  </form>
 </div>
 `;
 
-exports[`Storyshots Views / Categories / Category edit default 1`] = `
+exports[`Storyshots Views / Categories / Update category no products 1`] = `
 <div>
   <form>
     <div
@@ -7458,7 +8226,7 @@ exports[`Storyshots Views / Categories / Category edit default 1`] = `
         <h2
           class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
         >
-          Edit category
+          Coffees
         </h2>
         <div
           class="Component-action-id"
@@ -7468,35 +8236,55 @@ exports[`Storyshots Views / Categories / Category edit default 1`] = `
         class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
       >
         <div
-          class="MuiCardContent-root-id"
+          class="Component-root-id"
         >
-          <div
-            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+          <span
+            class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
           >
-            <label
-              class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-              data-shrink="true"
-            >
-              Name
-            </label>
+            General information
+          </span>
+          <div
+            class="Component-toolbar-id"
+          />
+        </div>
+        <div
+          class="Component-children-id"
+        />
+        <hr
+          class="Component-hr-id"
+        />
+        <div
+          class="MuiCardContent-root-id"
+        >
+          <div>
             <div
-              class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+              class="MuiFormControl-root-id Component-root-id"
             >
-              <input
-                aria-invalid="false"
-                autofocus=""
-                class="MuiInput-input-id"
-                name="name"
-                type="text"
-                value="Apparel"
-              />
+              <label
+                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                data-shrink="true"
+              >
+                Name
+              </label>
+              <div
+                class="MuiInput-root-id MuiInput-formControl-id MuiInput-underline-id"
+              >
+                <input
+                  aria-invalid="false"
+                  class="MuiInput-input-id"
+                  name="name"
+                  type="text"
+                  value="Coffees"
+                />
+              </div>
             </div>
           </div>
           <div
             class="Component-spacer-id"
           />
           <div
-            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            class="MuiFormControl-root-id"
+            style="width:100%"
           >
             <label
               class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
@@ -7507,28 +8295,216 @@ exports[`Storyshots Views / Categories / Category edit default 1`] = `
             <div
               class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-multiline-id MuiInput-underline-id"
             >
-              <textarea
-                aria-invalid="false"
-                class="MuiInput-input-id MuiInput-inputMultiline-id"
-                name="description"
-                rows="10"
-                type="text"
+              <div
+                class="Textarea-root-id"
+                style="height:19px"
               >
-                Across pressure PM food discover recognize. Send letter reach listen. Quickly work plan rule.
-Tell lose part purpose do when. Whatever drug contain particularly defense.
-              </textarea>
+                <textarea
+                  aria-hidden="true"
+                  class="Textarea-textarea-id Textarea-shadow-id"
+                  readonly=""
+                  rows="1"
+                  tabindex="-1"
+                />
+                <textarea
+                  aria-hidden="true"
+                  class="Textarea-textarea-id Textarea-shadow-id"
+                  readonly=""
+                  rows="1"
+                  tabindex="-1"
+                >
+                  Difference direction to treat anything worker occur. Miss in thousand Democrat civil hope set.
+                </textarea>
+                <textarea
+                  aria-invalid="false"
+                  class="Textarea-textarea-id MuiInput-input-id MuiInput-inputMultiline-id"
+                  name="description"
+                  rows="1"
+                  type="text"
+                >
+                  Difference direction to treat anything worker occur. Miss in thousand Democrat civil hope set.
+                </textarea>
+              </div>
             </div>
             <p
               class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
             >
-              Optional
+              Select text to enable text-formatting tools.
             </p>
           </div>
         </div>
       </div>
+      <div
+        class="Component-spacer-id"
+      />
+      <div
+        class="Component-spacer-id"
+      />
+      <div
+        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+      >
+        <div
+          class="Component-root-id"
+        >
+          <span
+            class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+          >
+            Search Engine Preview
+          </span>
+          <div
+            class="Component-toolbar-id"
+          >
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Edit website SEO
+              </span>
+              <span
+                class="MuiTouchRipple-root-id"
+              />
+            </button>
+          </div>
+        </div>
+        <div
+          class="Component-children-id"
+        />
+        <hr
+          class="Component-hr-id"
+        />
+        <div
+          class="MuiCardContent-root-id"
+        >
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id"
+          >
+            Add search engine title and description to make this category easier to find
+          </p>
+        </div>
+      </div>
+      <div
+        class="Component-spacer-id"
+      />
+      <div
+        class="Component-tabsBorder-id"
+      >
+        <span
+          class="MuiTypography-root-id MuiTypography-body1-id Component-root-id Component-active-id"
+        >
+          Subcategories
+        </span>
+        <span
+          class="MuiTypography-root-id MuiTypography-body1-id Component-root-id"
+        >
+          Products
+        </span>
+      </div>
+      <div
+        class="Component-spacer-id"
+      />
+      <div
+        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
+      >
+        <div
+          class="Component-root-id"
+        >
+          <span
+            class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+          >
+            All Subcategories
+          </span>
+          <div
+            class="Component-toolbar-id"
+          >
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Add subcategory
+              </span>
+              <span
+                class="MuiTouchRipple-root-id"
+              />
+            </button>
+          </div>
+        </div>
+        <div
+          class="Component-children-id"
+        />
+        <hr
+          class="Component-hr-id"
+        />
+        <table
+          class="MuiTable-root-id"
+          padding="default"
+        >
+          <thead
+            class="MuiTableHead-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
+            >
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Component-wideColumn-id"
+                scope="col"
+              >
+                Category Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Component-centerText-id"
+                scope="col"
+              >
+                Subcategories
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Component-centerText-id"
+                scope="col"
+              >
+                No. Products
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="3"
+              >
+                No subcategories found
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
       <div
         class="Component-root-id"
       >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id Component-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Delete category
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
         <div
           class="Component-spacer-id"
         />
@@ -7564,7 +8540,7 @@ Tell lose part purpose do when. Whatever drug contain particularly defense.
 </div>
 `;
 
-exports[`Storyshots Views / Categories / Category edit when loading 1`] = `
+exports[`Storyshots Views / Categories / Update category no subcategories 1`] = `
 <div>
   <form>
     <div
@@ -7601,7 +8577,7 @@ exports[`Storyshots Views / Categories / Category edit when loading 1`] = `
         <h2
           class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
         >
-          Edit category
+          Coffees
         </h2>
         <div
           class="Component-action-id"
@@ -7611,36 +8587,55 @@ exports[`Storyshots Views / Categories / Category edit when loading 1`] = `
         class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
       >
         <div
-          class="MuiCardContent-root-id"
+          class="Component-root-id"
         >
-          <div
-            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+          <span
+            class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
           >
-            <label
-              class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-              data-shrink="true"
-            >
-              Name
-            </label>
+            General information
+          </span>
+          <div
+            class="Component-toolbar-id"
+          />
+        </div>
+        <div
+          class="Component-children-id"
+        />
+        <hr
+          class="Component-hr-id"
+        />
+        <div
+          class="MuiCardContent-root-id"
+        >
+          <div>
             <div
-              class="MuiInput-root-id MuiInput-disabled-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+              class="MuiFormControl-root-id Component-root-id"
             >
-              <input
-                aria-invalid="false"
-                autofocus=""
-                class="MuiInput-input-id MuiInput-disabled-id"
-                disabled=""
-                name="name"
-                type="text"
-                value="Apparel"
-              />
+              <label
+                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
+                data-shrink="true"
+              >
+                Name
+              </label>
+              <div
+                class="MuiInput-root-id MuiInput-formControl-id MuiInput-underline-id"
+              >
+                <input
+                  aria-invalid="false"
+                  class="MuiInput-input-id"
+                  name="name"
+                  type="text"
+                  value="Coffees"
+                />
+              </div>
             </div>
           </div>
           <div
             class="Component-spacer-id"
           />
           <div
-            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            class="MuiFormControl-root-id"
+            style="width:100%"
           >
             <label
               class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
@@ -7649,179 +8644,218 @@ exports[`Storyshots Views / Categories / Category edit when loading 1`] = `
               Description
             </label>
             <div
-              class="MuiInput-root-id MuiInput-disabled-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-multiline-id MuiInput-underline-id"
+              class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-multiline-id MuiInput-underline-id"
             >
-              <textarea
-                aria-invalid="false"
-                class="MuiInput-input-id MuiInput-disabled-id MuiInput-inputMultiline-id"
-                disabled=""
-                name="description"
-                rows="10"
-                type="text"
+              <div
+                class="Textarea-root-id"
+                style="height:19px"
               >
-                Across pressure PM food discover recognize. Send letter reach listen. Quickly work plan rule.
-Tell lose part purpose do when. Whatever drug contain particularly defense.
-              </textarea>
+                <textarea
+                  aria-hidden="true"
+                  class="Textarea-textarea-id Textarea-shadow-id"
+                  readonly=""
+                  rows="1"
+                  tabindex="-1"
+                />
+                <textarea
+                  aria-hidden="true"
+                  class="Textarea-textarea-id Textarea-shadow-id"
+                  readonly=""
+                  rows="1"
+                  tabindex="-1"
+                >
+                  Difference direction to treat anything worker occur. Miss in thousand Democrat civil hope set.
+                </textarea>
+                <textarea
+                  aria-invalid="false"
+                  class="Textarea-textarea-id MuiInput-input-id MuiInput-inputMultiline-id"
+                  name="description"
+                  rows="1"
+                  type="text"
+                >
+                  Difference direction to treat anything worker occur. Miss in thousand Democrat civil hope set.
+                </textarea>
+              </div>
             </div>
             <p
               class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
             >
-              Optional
+              Select text to enable text-formatting tools.
             </p>
           </div>
         </div>
       </div>
       <div
-        class="Component-root-id"
+        class="Component-spacer-id"
+      />
+      <div
+        class="Component-spacer-id"
+      />
+      <div
+        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
       >
         <div
-          class="Component-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-flat-id Component-cancelButton-id"
-          tabindex="0"
-          type="button"
+          class="Component-root-id"
         >
           <span
-            class="MuiButton-label-id"
+            class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
           >
-            Cancel
+            Search Engine Preview
           </span>
-          <span
-            class="MuiTouchRipple-root-id"
-          />
-        </button>
-        <button
-          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedSecondary-id MuiButton-raised-id MuiButton-raisedSecondary-id MuiButton-disabled-id"
-          disabled=""
-          tabindex="-1"
-          type="button"
+          <div
+            class="Component-toolbar-id"
+          >
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label-id"
+              >
+                Edit website SEO
+              </span>
+              <span
+                class="MuiTouchRipple-root-id"
+              />
+            </button>
+          </div>
+        </div>
+        <div
+          class="Component-children-id"
+        />
+        <hr
+          class="Component-hr-id"
+        />
+        <div
+          class="MuiCardContent-root-id"
         >
-          <span
-            class="MuiButton-label-id"
+          <p
+            class="MuiTypography-root-id MuiTypography-body1-id"
           >
-            Save
-          </span>
-        </button>
+            Add search engine title and description to make this category easier to find
+          </p>
+        </div>
       </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Categories / Category edit with errors 1`] = `
-<div>
-  <form>
-    <div
-      class="Component-md-id"
-    >
       <div
-        class="Component-root-id"
+        class="Component-spacer-id"
+      />
+      <div
+        class="Component-tabsBorder-id"
       >
-        <button
-          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorInherit-id Component-menuButton-id"
-          tabindex="0"
-          type="button"
+        <span
+          class="MuiTypography-root-id MuiTypography-body1-id Component-root-id Component-active-id"
         >
-          <span
-            class="MuiIconButton-label-id"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <g>
-                <path
-                  d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-                />
-              </g>
-            </svg>
-          </span>
-          <span
-            class="MuiTouchRipple-root-id"
-          />
-        </button>
-        <h2
-          class="MuiTypography-root-id MuiTypography-title-id PageHeader-title-id"
+          Subcategories
+        </span>
+        <span
+          class="MuiTypography-root-id MuiTypography-body1-id Component-root-id"
         >
-          Edit category
-        </h2>
-        <div
-          class="Component-action-id"
-        />
+          Products
+        </span>
       </div>
+      <div
+        class="Component-spacer-id"
+      />
       <div
         class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
       >
         <div
-          class="MuiCardContent-root-id"
+          class="Component-root-id"
         >
+          <span
+            class="MuiTypography-root-id MuiTypography-body1-id Component-title-id"
+          >
+            All Subcategories
+          </span>
           <div
-            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+            class="Component-toolbar-id"
           >
-            <label
-              class="MuiFormLabel-root-id MuiFormLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-              data-shrink="true"
-            >
-              Name
-            </label>
-            <div
-              class="MuiInput-root-id MuiInput-error-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-underline-id"
+            <button
+              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-id MuiButton-flat-id MuiButton-flatSecondary-id"
+              tabindex="0"
+              type="button"
             >
-              <input
-                aria-invalid="true"
-                autofocus=""
-                class="MuiInput-input-id"
-                name="name"
-                type="text"
-                value="Apparel"
+              <span
+                class="MuiButton-label-id"
+              >
+                Add subcategory
+              </span>
+              <span
+                class="MuiTouchRipple-root-id"
               />
-            </div>
-            <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-            >
-              To pole jest wymagane.
-            </p>
+            </button>
           </div>
-          <div
-            class="Component-spacer-id"
-          />
-          <div
-            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
+        </div>
+        <div
+          class="Component-children-id"
+        />
+        <hr
+          class="Component-hr-id"
+        />
+        <table
+          class="MuiTable-root-id"
+          padding="default"
+        >
+          <thead
+            class="MuiTableHead-root-id"
           >
-            <label
-              class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id"
-              data-shrink="true"
-            >
-              Description
-            </label>
-            <div
-              class="MuiInput-root-id MuiInput-fullWidth-id MuiInput-formControl-id MuiInput-multiline-id MuiInput-underline-id"
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
             >
-              <textarea
-                aria-invalid="false"
-                class="MuiInput-input-id MuiInput-inputMultiline-id"
-                name="description"
-                rows="10"
-                type="text"
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Component-wideColumn-id"
+                scope="col"
               >
-                Across pressure PM food discover recognize. Send letter reach listen. Quickly work plan rule.
-Tell lose part purpose do when. Whatever drug contain particularly defense.
-              </textarea>
-            </div>
-            <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-filled-id"
+                Category Name
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Component-centerText-id"
+                scope="col"
+              >
+                Subcategories
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Component-centerText-id"
+                scope="col"
+              >
+                No. Products
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id"
             >
-              Optional
-            </p>
-          </div>
-        </div>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id"
+                colspan="3"
+              >
+                No subcategories found
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
       <div
         class="Component-root-id"
       >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-raised-id Component-deleteButton-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Delete category
+          </span>
+          <span
+            class="MuiTouchRipple-root-id"
+          />
+        </button>
         <div
           class="Component-spacer-id"
         />
@@ -33439,7 +34473,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
                   class="MuiFormControlLabel-root-id"
                 >
                   <span
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id"
+                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiSwitchBase-checked-id MuiCheckbox-checked-id"
                   >
                     <span
                       class="MuiIconButton-label-id"
@@ -33451,10 +34485,11 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
                         viewBox="0 0 24 24"
                       >
                         <path
-                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                         />
                       </svg>
                       <input
+                        checked=""
                         class="MuiSwitchBase-input-id"
                         name="chargeTaxes"
                         type="checkbox"
@@ -35210,7 +36245,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
                   class="MuiFormControlLabel-root-id"
                 >
                   <span
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id"
+                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiSwitchBase-checked-id MuiCheckbox-checked-id"
                   >
                     <span
                       class="MuiIconButton-label-id"
@@ -35222,10 +36257,11 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
                         viewBox="0 0 24 24"
                       >
                         <path
-                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                         />
                       </svg>
                       <input
+                        checked=""
                         class="MuiSwitchBase-input-id"
                         name="chargeTaxes"
                         type="checkbox"
@@ -36516,7 +37552,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                   class="MuiFormControlLabel-root-id"
                 >
                   <span
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id"
+                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiSwitchBase-checked-id MuiCheckbox-checked-id"
                   >
                     <span
                       class="MuiIconButton-label-id"
@@ -36528,10 +37564,11 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                         viewBox="0 0 24 24"
                       >
                         <path
-                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                         />
                       </svg>
                       <input
+                        checked=""
                         class="MuiSwitchBase-input-id"
                         name="chargeTaxes"
                         type="checkbox"
@@ -37878,12 +38915,12 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id Component-textLeft-id"
             >
-              Gorgeous Frozen Chips
+              Gardner-Schultz
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              Awesome Wooden Pizza
+              Coffee
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -37897,7 +38934,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              XAG 274.99
+              $83.30
             </td>
           </tr>
           <tr
@@ -37918,12 +38955,12 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id Component-textLeft-id"
             >
-              Handcrafted Wooden Towels
+              James, Martinez and Murray
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              Future
+              Coffee
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -37937,7 +38974,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              ZWL 432.30
+              $68.27
             </td>
           </tr>
           <tr
@@ -37958,26 +38995,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id Component-textLeft-id"
             >
-              Handcrafted Metal Cheese
+              Curtis, Joyce and Turner
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              SMS
+              Coffee
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
               <div
-                class="Component-root-id undefined Component-errorDot-id"
+                class="Component-root-id undefined Component-successDot-id"
               >
-                Not published
+                Published
               </div>
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              XDR 688.35
+              $21.43
             </td>
           </tr>
           <tr
@@ -37998,26 +39035,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id Component-textLeft-id"
             >
-              Refined Rubber Keyboard
+              Davis, Brown and Ray
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              Virtual
+              Coffee
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
               <div
-                class="Component-root-id undefined Component-errorDot-id"
+                class="Component-root-id undefined Component-successDot-id"
               >
-                Not published
+                Published
               </div>
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              SLL 540
+              $62.76
             </td>
           </tr>
           <tr
@@ -38038,12 +39075,12 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id Component-textLeft-id"
             >
-              Gorgeous Metal Gloves
+              Gallegos Ltd
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              Vermont
+              Coffee
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -38057,7 +39094,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              AMD 4
+              $7.13
             </td>
           </tr>
           <tr
@@ -38078,26 +39115,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id Component-textLeft-id"
             >
-              Small Cotton Shirt
+              Franklin Inc
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              Gorgeous
+              Coffee
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
               <div
-                class="Component-root-id undefined Component-errorDot-id"
+                class="Component-root-id undefined Component-successDot-id"
               >
-                Not published
+                Published
               </div>
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              GMD 538.10
+              $48.82
             </td>
           </tr>
           <tr
@@ -38118,26 +39155,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id Component-textLeft-id"
             >
-              Fantastic Cotton Tuna
+              Williams-Taylor
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              TCP
+              Coffee
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
               <div
-                class="Component-root-id undefined Component-errorDot-id"
+                class="Component-root-id undefined Component-successDot-id"
               >
-                Not published
+                Published
               </div>
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              CVE 56.91
+              $27.34
             </td>
           </tr>
           <tr
@@ -38158,26 +39195,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id Component-textLeft-id"
             >
-              Tasty Steel Pants
+              Riddle, Evans and Hicks
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              Buckinghamshire
+              Coffee
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
               <div
-                class="Component-root-id undefined Component-errorDot-id"
+                class="Component-root-id undefined Component-successDot-id"
               >
-                Not published
+                Published
               </div>
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              XAG 981.06
+              $75.42
             </td>
           </tr>
           <tr
@@ -38198,12 +39235,12 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id Component-textLeft-id"
             >
-              Ergonomic Cotton Shoes
+              Hebert-Sherman
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              Jewelery
+              Coffee
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -38217,7 +39254,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              WST 449.93
+              $86.62
             </td>
           </tr>
           <tr
@@ -38238,26 +39275,26 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id Component-textLeft-id"
             >
-              Unbranded Steel Tuna
+              Carter and Sons
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
-              Agent
+              Coffee
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id"
             >
               <div
-                class="Component-root-id undefined Component-errorDot-id"
+                class="Component-root-id undefined Component-successDot-id"
               >
-                Not published
+                Published
               </div>
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id Component-textRight-id"
             >
-              MGA 591
+              $48.66
             </td>
           </tr>
         </tbody>