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

Update stories

Browse source
This commit is contained in:
dominik-zeglen 2020-03-17 19:01:38 +01:00
parent 8f18bd75ce
commit 1446a993a5
8 changed files with 235 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/CountryList/CountryList.tsx
View file

@ -15,7 +15,7 @@ import { FormattedMessage } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import { maybe, renderCollection } from "../../misc";
import { maybe, renderCollection, getStringOrPlaceholder } from "../../misc";
import { CountryFragment } from "../../taxes/types/CountryFragment";
export interface CountryListProps {
@ -98,7 +98,7 @@ const CountryList: React.FC<CountryListProps> = props => {
<CardTitle
title={title}
toolbar={
<Button color="primary" onClick={onCountryAssign}>
<Button color="primary" disabled={disabled} onClick={onCountryAssign}>
<FormattedMessage
defaultMessage="Assign countries"
description="button"
@ -117,7 +117,7 @@ const CountryList: React.FC<CountryListProps> = props => {
defaultMessage="{number} Countries"
description="number of countries"
values={{
number: maybe(() => countries.length.toString(), "...")
number: getStringOrPlaceholder(countries?.length.toString())
}}
/>
</TableCell>

1
src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.tsx
View file

@ -67,6 +67,7 @@ const ShippingZoneCreatePage: React.FC<ShippingZoneCreatePageProps> = ({
<div>
<ShippingZoneInfo
data={data}
disabled={disabled}
errors={errors}
onChange={change}
/>

8
src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx
View file

@ -59,6 +59,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
const initialForm: FormData = {
name: shippingZone?.name || ""
};
return (
<Form initial={initialForm} onSubmit={onSubmit}>
{({ change, data, hasChanged, submit }) => (
@ -69,7 +70,12 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
<PageHeader title={getStringOrPlaceholder(shippingZone?.name)} />
<Grid>
<div>
<ShippingZoneInfo data={data} errors={errors} onChange={change} />
<ShippingZoneInfo
data={data}
disabled={disabled}
errors={errors}
onChange={change}
/>
<CardSpacer />
<CountryList
countries={shippingZone?.countries}

3
src/shipping/components/ShippingZoneInfo/ShippingZoneInfo.tsx
View file

@ -13,12 +13,14 @@ import { FormData } from "../ShippingZoneDetailsPage";
export interface ShippingZoneInfoProps {
data: FormData;
disabled: boolean;
errors: ShippingErrorFragment[];
onChange: (event: React.ChangeEvent<any>) => void;
}
const ShippingZoneInfo: React.FC<ShippingZoneInfoProps> = ({
data,
disabled,
errors,
onChange
}) => {
@ -33,6 +35,7 @@ const ShippingZoneInfo: React.FC<ShippingZoneInfoProps> = ({
/>
<CardContent>
<TextField
disabled={disabled}
error={!!formErrors.name}
fullWidth
helperText={getShippingErrorMessage(formErrors.name, intl)}

2
src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx
View file

@ -77,7 +77,7 @@ const ShippingZoneRates: React.FC<ShippingZoneRatesProps> = props => {
})
}
toolbar={
<Button color="primary" onClick={onRateAdd}>
<Button color="primary" disabled={disabled} onClick={onRateAdd}>
<FormattedMessage
defaultMessage="Create rate"
description="button"

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

@ -120065,7 +120065,7 @@ exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
>
Generic form error
Invalid value
</p>
</div>
</div>
@ -120164,6 +120164,191 @@ exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
</div>
`;
exports[`Storyshots Views / Shipping / Create shipping zone loading 1`] = `
<div
style="padding:24px"
>
<form>
<div
class="Container-root-id"
>
<div
class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
>
<div
class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
>
Create New Shipping Zone
</div>
<div
class="ExtendedPageHeader-action-id"
>
<div
class="PageHeader-root-id"
/>
</div>
</div>
<div
class="Grid-root-id Grid-default-id"
>
<div>
<div
class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
>
<div
class="CardTitle-root-id"
>
<span
class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
>
General Informations
</span>
<div
class="CardTitle-toolbar-id"
/>
</div>
<div
class="CardTitle-children-id"
/>
<hr
class="CardTitle-hr-id"
/>
<div
class="MuiCardContent-root-id"
>
<div
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
>
<label
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
data-shrink="false"
>
Shipping Zone Name
</label>
<div
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
>
<input
aria-invalid="false"
class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
disabled=""
name="name"
type="text"
value=""
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
style="padding-left:8px"
>
<legend
class="PrivateNotchedOutline-legend-id"
style="width:0.01px"
>
<span>
​
</span>
</legend>
</fieldset>
</div>
</div>
</div>
</div>
<div
class="CardSpacer-spacer-id"
/>
<div
class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
>
<div
class="CardTitle-root-id"
>
<span
class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
>
Countries
</span>
<div
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
disabled=""
tabindex="-1"
type="button"
>
<span
class="MuiButton-label-id"
>
Assign countries
</span>
</button>
</div>
</div>
<div
class="CardTitle-children-id"
/>
<hr
class="CardTitle-hr-id"
/>
<div
class="MuiCardContent-root-id CountryList-root-id"
>
<div
class="ResponsiveTable-root-id"
>
<table
class="MuiTable-root-id"
>
<tbody
class="MuiTableBody-root-id"
>
<tr
class="MuiTableRow-root-id CountryList-pointer-id"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
>
0 Countries
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-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"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M7 10l5 5 5-5z"
/>
</svg>
</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
`;
exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
<div
style="padding:24px"
@ -120579,8 +120764,9 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
disabled=""
tabindex="-1"
type="button"
>
<span
@ -120878,7 +121064,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
>
Generic form error
Invalid value
</p>
</div>
</div>
@ -120901,8 +121087,9 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
disabled=""
tabindex="-1"
type="button"
>
<span
@ -120988,8 +121175,9 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
class="CardTitle-toolbar-id"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
tabindex="0"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
disabled=""
tabindex="-1"
type="button"
>
<span
@ -121433,12 +121621,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
<div
class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
>
<span
class="Skeleton-skeleton-id"
style="width:10em"
>
‌
</span>
...
</div>
<div
class="ExtendedPageHeader-action-id"
@ -121480,17 +121663,18 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
>
<label
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
data-shrink="false"
>
Shipping Zone Name
</label>
<div
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
>
<input
aria-invalid="false"
class="MuiInputBase-input-id MuiOutlinedInput-input-id"
class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
disabled=""
name="name"
type="text"
value=""

12
src/storybook/stories/shipping/ShippingZoneCreatePage.tsx
View file

@ -1,11 +1,11 @@
import { storiesOf } from "@storybook/react";
import React from "react";
import { ShippingErrorCode } from "@saleor/types/globalTypes";
import ShippingZoneCreatePage, {
ShippingZoneCreatePageProps
} from "../../../shipping/components/ShippingZoneCreatePage";
import Decorator from "../../Decorator";
import { formError } from "../../misc";
const props: ShippingZoneCreatePageProps = {
countries: [
@ -45,6 +45,14 @@ const props: ShippingZoneCreatePageProps = {
storiesOf("Views / Shipping / Create shipping zone", module)
.addDecorator(Decorator)
.add("default", () => <ShippingZoneCreatePage {...props} />)
.add("loading", () => <ShippingZoneCreatePage {...props} disabled={true} />)
.add("form errors", () => (
<ShippingZoneCreatePage {...props} errors={["name"].map(formError)} />
<ShippingZoneCreatePage
{...props}
errors={["name"].map(field => ({
__typename: "ShippingError",
code: ShippingErrorCode.INVALID,
field
}))}
/>
));

11
src/storybook/stories/shipping/ShippingZoneDetailsPage.tsx
View file

@ -1,12 +1,12 @@
import { storiesOf } from "@storybook/react";
import React from "react";
import { ShippingErrorCode } from "@saleor/types/globalTypes";
import ShippingZoneDetailsPage, {
ShippingZoneDetailsPageProps
} from "../../../shipping/components/ShippingZoneDetailsPage";
import { shippingZone } from "../../../shipping/fixtures";
import Decorator from "../../Decorator";
import { formError } from "../../misc";
const props: ShippingZoneDetailsPageProps = {
disabled: false,
@ -36,5 +36,12 @@ storiesOf("Views / Shipping / Shipping zone details", module)
/>
))
.add("form errors", () => (
<ShippingZoneDetailsPage {...props} errors={["name"].map(formError)} />
<ShippingZoneDetailsPage
{...props}
errors={["name"].map(field => ({
__typename: "ShippingError",
code: ShippingErrorCode.INVALID,
field
}))}
/>
));