djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix subcategory creation (#2041)

Browse source 
* Fix subcategory create button didn't use Button from dashboard
* Update snapshots
This commit is contained in:
Jonatan Witoszek 2022-05-12 15:39:27 +02:00 committed by GitHub
parent 9cf555d740
commit 66bfd1a32d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 126 additions and 180 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx
View file

@ -1,6 +1,11 @@
import { Card } from "@material-ui/core";
import { categoryListUrl, categoryUrl } from "@saleor/categories/urls";
import {
categoryAddUrl,
categoryListUrl,
categoryUrl
} from "@saleor/categories/urls";
import { Backlink } from "@saleor/components/Backlink";
import { Button } from "@saleor/components/Button";
import { CardSpacer } from "@saleor/components/CardSpacer";
import CardTitle from "@saleor/components/CardTitle";
import Container from "@saleor/components/Container";
@ -13,7 +18,7 @@ import { CategoryDetailsQuery, ProductErrorFragment } from "@saleor/graphql";
import { SubmitPromise } from "@saleor/hooks/useForm";
import useNavigator from "@saleor/hooks/useNavigator";
import { sectionNames } from "@saleor/intl";
import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -32,6 +37,7 @@ export enum CategoryPageTab {
export interface CategoryUpdatePageProps
extends TabListActions<"productListToolbar" | "subcategoryListToolbar"> {
categoryId: string;
changeTab: (index: CategoryPageTab) => void;
currentTab: CategoryPageTab;
errors: ProductErrorFragment[];
@ -45,7 +51,6 @@ export interface CategoryUpdatePageProps
};
saveButtonBarState: ConfirmButtonTransitionState;
addProductHref: string;
addCategoryHref: string;
onImageDelete: () => void;
onSubmit: (data: CategoryUpdateData) => SubmitPromise;
onImageUpload(file: File);
@ -58,6 +63,7 @@ const CategoriesTab = Tab(CategoryPageTab.categories);
const ProductsTab = Tab(CategoryPageTab.products);
export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
categoryId,
changeTab,
currentTab,
category,
@ -67,7 +73,6 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
products,
saveButtonBarState,
subcategories,
addCategoryHref,
onDelete,
onNextPage,
onPreviousPage,
@ -171,7 +176,7 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
toolbar={
<Button
variant="tertiary"
href={addCategoryHref}
href={categoryAddUrl(categoryId)}
data-test-id="create-subcategory"
>
<FormattedMessage

3
src/categories/views/CategoryDetails.tsx
View file

@ -39,7 +39,6 @@ import {
} from "../components/CategoryUpdatePage/CategoryUpdatePage";
import { CategoryUpdateData } from "../components/CategoryUpdatePage/form";
import {
categoryAddUrl,
categoryListUrl,
categoryUrl,
CategoryUrlDialog,
@ -212,12 +211,12 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
<>
<WindowTitle title={maybe(() => data.category.name)} />
<CategoryUpdatePage
categoryId={id}
changeTab={changeTab}
currentTab={activeTab}
category={maybe(() => data.category)}
disabled={loading}
errors={updateResult.data?.categoryUpdate.errors || []}
addCategoryHref={categoryAddUrl(id)}
addProductHref={productAddUrl()}
onDelete={() => openModal("delete")}
onImageDelete={() =>

286
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -40772,19 +40772,20 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
<div
class="MuiCardHeader-action-id"
>
<button
<a
aria-disabled="false"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
data-test-id="create-subcategory"
href=""
href="/categories/123/add"
role="button"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Create subcategory
</span>
</button>
</a>
</div>
</div>
<div
@ -41548,19 +41549,20 @@ exports[`Storyshots Views / Categories / Update category form errors 1`] = `
<div
class="MuiCardHeader-action-id"
>
<button
<a
aria-disabled="false"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
data-test-id="create-subcategory"
href=""
href="/categories/123/add"
role="button"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Create subcategory
</span>
</button>
</a>
</div>
</div>
<div
@ -42076,19 +42078,20 @@ exports[`Storyshots Views / Categories / Update category loading 1`] = `
<div
class="MuiCardHeader-action-id"
>
<button
<a
aria-disabled="false"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
data-test-id="create-subcategory"
href=""
href="/categories/123/add"
role="button"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Create subcategory
</span>
</button>
</a>
</div>
</div>
<div
@ -42894,19 +42897,20 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
<div
class="MuiCardHeader-action-id"
>
<button
<a
aria-disabled="false"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
data-test-id="create-subcategory"
href=""
href="/categories/123/add"
role="button"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Create subcategory
</span>
</button>
</a>
</div>
</div>
<div
@ -44435,19 +44439,20 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
<div
class="MuiCardHeader-action-id"
>
<button
<a
aria-disabled="false"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
data-test-id="create-subcategory"
href=""
href="/categories/123/add"
role="button"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Create subcategory
</span>
</button>
</a>
</div>
</div>
<div
@ -183365,36 +183370,22 @@ exports[`Storyshots Views / Products / Create product variant add first variant
class="MuiTableRow-root-id MuiTableRow-hover-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id ProductVariantNavigation-firstVariant-id"
colspan="2"
data-test-id="table-cell-avatar"
class="MuiTableCell-root-id MuiTableCell-body-id"
colspan="3"
>
<div
class="Avatar-content-id Avatar-alignRight-id"
<a
aria-disabled="false"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
href="/products/variant/add"
role="button"
tabindex="0"
>
<div
class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
<span
class="MuiButton-label-id"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
focusable="false"
viewBox="0 0 24 24"
>
<path
clip-rule="evenodd"
d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
</div>
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
>
New Variant
Add variant
</span>
</a>
</td>
</tr>
</tbody>
@ -184430,36 +184421,22 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
class="MuiTableRow-root-id MuiTableRow-hover-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id"
colspan="2"
data-test-id="table-cell-avatar"
class="MuiTableCell-root-id MuiTableCell-body-id"
colspan="3"
>
<div
class="Avatar-content-id Avatar-alignRight-id"
<a
aria-disabled="false"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
href="/products/variant/add"
role="button"
tabindex="0"
>
<div
class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
<span
class="MuiButton-label-id"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
focusable="false"
viewBox="0 0 24 24"
>
<path
clip-rule="evenodd"
d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
</div>
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
>
New Variant
Add variant
</span>
</a>
</td>
</tr>
</tbody>
@ -185495,36 +185472,22 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
class="MuiTableRow-root-id MuiTableRow-hover-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id"
colspan="2"
data-test-id="table-cell-avatar"
class="MuiTableCell-root-id MuiTableCell-body-id"
colspan="3"
>
<div
class="Avatar-content-id Avatar-alignRight-id"
<a
aria-disabled="false"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
href="/products/variant/add"
role="button"
tabindex="0"
>
<div
class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
<span
class="MuiButton-label-id"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
focusable="false"
viewBox="0 0 24 24"
>
<path
clip-rule="evenodd"
d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
</div>
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
>
New Variant
Add variant
</span>
</a>
</td>
</tr>
</tbody>
@ -186438,36 +186401,22 @@ exports[`Storyshots Views / Products / Create product variant when loading data
class="MuiTableRow-root-id MuiTableRow-hover-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id"
colspan="2"
data-test-id="table-cell-avatar"
class="MuiTableCell-root-id MuiTableCell-body-id"
colspan="3"
>
<div
class="Avatar-content-id Avatar-alignRight-id"
<a
aria-disabled="false"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
href="/products/variant/add"
role="button"
tabindex="0"
>
<div
class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
<span
class="MuiButton-label-id"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
focusable="false"
viewBox="0 0 24 24"
>
<path
clip-rule="evenodd"
d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
</div>
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
>
New Variant
Add variant
</span>
</a>
</td>
</tr>
</tbody>
@ -187373,36 +187322,22 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
class="MuiTableRow-root-id MuiTableRow-hover-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id"
colspan="2"
data-test-id="table-cell-avatar"
class="MuiTableCell-root-id MuiTableCell-body-id"
colspan="3"
>
<div
class="Avatar-content-id Avatar-alignRight-id"
<a
aria-disabled="false"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
href="/products/variant/add"
role="button"
tabindex="0"
>
<div
class="MuiAvatar-root-id MuiAvatar-circle-id Avatar-avatar-id MuiAvatar-colorDefault-id"
<span
class="MuiButton-label-id"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
focusable="false"
viewBox="0 0 24 24"
>
<path
clip-rule="evenodd"
d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
</div>
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
>
New Variant
Add variant
</span>
</a>
</td>
</tr>
</tbody>
@ -224208,17 +224143,19 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
class="MuiTableCell-root-id MuiTableCell-body-id"
colspan="3"
>
<button
<a
aria-disabled="false"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
href="/products/variant/add"
role="button"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Add variant
</span>
</button>
</a>
</td>
</tr>
</tbody>
@ -226127,17 +226064,19 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
class="MuiTableCell-root-id MuiTableCell-body-id"
colspan="3"
>
<button
<a
aria-disabled="false"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
href="/products/variant/add"
role="button"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Add variant
</span>
</button>
</a>
</td>
</tr>
</tbody>
@ -228036,17 +227975,19 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
class="MuiTableCell-root-id MuiTableCell-body-id"
colspan="3"
>
<button
<a
aria-disabled="false"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
href="/products/variant/add"
role="button"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Add variant
</span>
</button>
</a>
</td>
</tr>
</tbody>
@ -229807,17 +229748,19 @@ exports[`Storyshots Views / Products / Product variant details when loading data
class="MuiTableCell-root-id MuiTableCell-body-id"
colspan="3"
>
<button
<a
aria-disabled="false"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
href="/products/variant/add"
role="button"
tabindex="0"
type="button"
>
<span
class="MuiButton-label-id"
>
Add variant
</span>
</button>
</a>
</td>
</tr>
</tbody>
@ -229894,12 +229837,11 @@ exports[`Storyshots Views / Products / Product variant details when loading data
<div
class="ProductVariantMedia-root-id"
>
<span
class="Skeleton-skeleton-id"
data-test-id="skeleton"
<div
class="MuiTypography-root-id ProductVariantMedia-helpText-id MuiTypography-body1-id"
>
‌
</span>
Select a specific variant media from product media
</div>
</div>
</div>
</div>

2
src/storybook/stories/categories/CategoryUpdatePage.tsx
View file

@ -16,11 +16,11 @@ const category = categoryFixture(placeholderImage);
const updateProps: Omit<CategoryUpdatePageProps, "classes"> = {
category,
categoryId: "123",
changeTab: undefined,
currentTab: CategoryPageTab.categories,
disabled: false,
errors: [],
addCategoryHref: "",
addProductHref: "",
onDelete: () => undefined,
onImageDelete: () => undefined,