Update stories

src/components/CountryList/CountryList.tsx

@@ -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>

src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.tsx

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

src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx

@@ -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}

src/shipping/components/ShippingZoneInfo/ShippingZoneInfo.tsx

@@ -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)}

src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx

@@ -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"

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -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"
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="0"
+                  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"
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="0"
+                  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"
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="0"
+                  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=""

src/storybook/stories/shipping/ShippingZoneCreatePage.tsx

@@ -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
+      }))}
+    />
   ));

src/storybook/stories/shipping/ShippingZoneDetailsPage.tsx

@@ -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
+      }))}
+    />
   ));