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

Revert "Use error formatting in product type section"

Browse source
This commit is contained in:
Dominik Żegleń 2020-03-11 10:56:04 +01:00 committed by GitHub
parent 90e5b317d4
commit bf92214fc3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
47 changed files with 417 additions and 466 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/attributes/components/AttributeDetails/AttributeDetails.tsx
View file

@ -10,17 +10,16 @@ import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import FormSpacer from "@saleor/components/FormSpacer";
import SingleSelectField from "@saleor/components/SingleSelectField";
import { commonMessages } from "@saleor/intl";
import { UserError } from "@saleor/types";
import { AttributeInputTypeEnum } from "@saleor/types/globalTypes";
import { getProductErrorMessage, getFormErrors } from "@saleor/utils/errors";
import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment";
import { getFieldError } from "@saleor/utils/errors";
import { AttributePageFormData } from "../AttributePage";
import { getAttributeSlugErrorMessage } from "../../errors";
export interface AttributeDetailsProps {
canChangeType: boolean;
data: AttributePageFormData;
disabled: boolean;
errors: ProductErrorFragment[];
errors: UserError[];
onChange: (event: React.ChangeEvent<any>) => void;
}
@ -49,8 +48,6 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({
}
];
const formErrors = getFormErrors(["name", "slug", "inputType"], errors);
return (
<Card>
<CardTitle
@ -59,21 +56,21 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({
<CardContent>
<TextField
disabled={disabled}
error={!!formErrors.name}
error={!!getFieldError(errors, "name")}
label={intl.formatMessage({
defaultMessage: "Default Label",
description: "attribute's label"
})}
name={"name" as keyof AttributePageFormData}
fullWidth
helperText={getProductErrorMessage(formErrors.name, intl)}
helperText={getFieldError(errors, "name")?.message}
value={data.name}
onChange={onChange}
/>
<FormSpacer />
<TextField
disabled={disabled}
error={!!formErrors.slug}
error={!!getFieldError(errors, "slug")}
label={intl.formatMessage({
defaultMessage: "Attribute Code",
description: "attribute's slug short code label"
@ -82,7 +79,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({
placeholder={slugify(data.name).toLowerCase()}
fullWidth
helperText={
getAttributeSlugErrorMessage(formErrors.slug, intl) ||
getFieldError(errors, "slug")?.message ||
intl.formatMessage({
defaultMessage:
"This is used internally. Make sure you don’t use spaces",
@ -96,8 +93,8 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({
<SingleSelectField
choices={inputTypeChoices}
disabled={disabled || !canChangeType}
error={!!formErrors.inputType}
hint={getProductErrorMessage(formErrors.inputType, intl)}
error={!!getFieldError(errors, "inputType")}
hint={getFieldError(errors, "inputType")?.message}
label={intl.formatMessage({
defaultMessage: "Catalog Input type for Store Owner",
description: "attribute's editor component"

5
src/attributes/components/AttributePage/AttributePage.tsx
View file

@ -12,9 +12,8 @@ import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import { sectionNames } from "@saleor/intl";
import { maybe } from "@saleor/misc";
import { ReorderAction } from "@saleor/types";
import { ReorderAction, UserError } from "@saleor/types";
import { AttributeInputTypeEnum } from "@saleor/types/globalTypes";
import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment";
import {
AttributeDetailsFragment,
AttributeDetailsFragment_values
@ -26,7 +25,7 @@ import AttributeValues from "../AttributeValues";
export interface AttributePageProps {
attribute: AttributeDetailsFragment | null;
disabled: boolean;
errors: ProductErrorFragment[];
errors: UserError[];
saveButtonBarState: ConfirmButtonTransitionState;
values: AttributeDetailsFragment_values[];
onBack: () => void;

17
src/attributes/components/AttributeProperties/AttributeProperties.tsx
View file

@ -11,14 +11,14 @@ import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import FormSpacer from "@saleor/components/FormSpacer";
import Hr from "@saleor/components/Hr";
import { commonMessages } from "@saleor/intl";
import { getFormErrors, getProductErrorMessage } from "@saleor/utils/errors";
import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment";
import { UserError } from "@saleor/types";
import { getFieldError } from "@saleor/utils/errors";
import { AttributePageFormData } from "../AttributePage";
export interface AttributePropertiesProps {
data: AttributePageFormData;
disabled: boolean;
errors: ProductErrorFragment[];
errors: UserError[];
onChange: (event: React.ChangeEvent<any>) => void;
}
@ -30,8 +30,6 @@ const AttributeProperties: React.FC<AttributePropertiesProps> = ({
}) => {
const intl = useIntl();
const formErrors = getFormErrors(["storefrontSearchPosition"], errors);
return (
<Card>
<CardTitle title={intl.formatMessage(commonMessages.properties)} />
@ -88,12 +86,11 @@ const AttributeProperties: React.FC<AttributePropertiesProps> = ({
{data.filterableInStorefront && (
<TextField
disabled={disabled}
error={!!formErrors.storefrontSearchPosition}
error={!!getFieldError(errors, "storefrontSearchPosition")}
fullWidth
helperText={getProductErrorMessage(
formErrors.storefrontSearchPosition,
intl
)}
helperText={
getFieldError(errors, "storefrontSearchPosition")?.message
}
name={"storefrontSearchPosition" as keyof AttributePageFormData}
label={intl.formatMessage({
defaultMessage: "Position in faceted navigation",

15
src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx
View file

@ -14,9 +14,8 @@ import Form from "@saleor/components/Form";
import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
import { buttonMessages } from "@saleor/intl";
import { maybe } from "@saleor/misc";
import { getFormErrors } from "@saleor/utils/errors";
import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment";
import { getAttributeValueErrorMessage } from "@saleor/attributes/errors";
import { UserError } from "@saleor/types";
import { getFieldError } from "@saleor/utils/errors";
import { AttributeDetails_attribute_values } from "../../types/AttributeDetails";
export interface AttributeValueEditDialogFormData {
@ -26,7 +25,7 @@ export interface AttributeValueEditDialogProps {
attributeValue: AttributeDetails_attribute_values | null;
confirmButtonState: ConfirmButtonTransitionState;
disabled: boolean;
errors: ProductErrorFragment[];
errors: UserError[];
open: boolean;
onSubmit: (data: AttributeValueEditDialogFormData) => void;
onClose: () => void;
@ -46,7 +45,6 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
name: maybe(() => attributeValue.name, "")
};
const errors = useModalDialogErrors(apiErrors, open);
const formErrors = getFormErrors(["name"], errors);
return (
<Dialog onClose={onClose} open={open} fullWidth maxWidth="sm">
@ -70,12 +68,9 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
<TextField
autoFocus
disabled={disabled}
error={!!formErrors.name}
error={!!getFieldError(errors, "name")}
fullWidth
helperText={getAttributeValueErrorMessage(
formErrors.name,
intl
)}
helperText={getFieldError(errors, "name")?.message}
name={"name" as keyof AttributeValueEditDialogFormData}
label={intl.formatMessage({
defaultMessage: "Name",

38
src/attributes/errors.ts
View file

@ -1,38 +0,0 @@
import { IntlShape, defineMessages } from "react-intl";
import { ProductErrorCode } from "@saleor/types/globalTypes";
import { getProductErrorMessage } from "@saleor/utils/errors";
import { ProductErrorFragment } from "./types/ProductErrorFragment";
const messages = defineMessages({
attributeSlugUnique: {
defaultMessage: "Attribute with this slug already exists"
},
attributeValueAlreadyExists: {
defaultMessage: "This value already exists within this attribute"
}
});
export function getAttributeSlugErrorMessage(
err: ProductErrorFragment,
intl: IntlShape
): string {
switch (err?.code) {
case ProductErrorCode.UNIQUE:
return intl.formatMessage(messages.attributeSlugUnique);
default:
return getProductErrorMessage(err, intl);
}
}
export function getAttributeValueErrorMessage(
err: ProductErrorFragment,
intl: IntlShape
): string {
switch (err?.code) {
case ProductErrorCode.ALREADY_EXISTS:
return intl.formatMessage(messages.attributeValueAlreadyExists);
default:
return getProductErrorMessage(err, intl);
}
}

67
src/attributes/mutations.ts
View file

@ -35,19 +35,12 @@ import {
AttributeValueUpdateVariables
} from "./types/AttributeValueUpdate";
export const productErrorFragment = gql`
fragment ProductErrorFragment on ProductError {
code
field
}
`;
const attributeBulkDelete = gql`
${productErrorFragment}
mutation AttributeBulkDelete($ids: [ID!]!) {
attributeBulkDelete(ids: $ids) {
errors: productErrors {
...ProductErrorFragment
errors {
field
message
}
}
}
@ -58,11 +51,11 @@ export const AttributeBulkDeleteMutation = TypedMutation<
>(attributeBulkDelete);
const attributeDelete = gql`
${productErrorFragment}
mutation AttributeDelete($id: ID!) {
attributeDelete(id: $id) {
errors: productErrors {
...ProductErrorFragment
errors {
field
message
}
}
}
@ -74,15 +67,15 @@ export const AttributeDeleteMutation = TypedMutation<
export const attributeUpdateMutation = gql`
${attributeDetailsFragment}
${productErrorFragment}
mutation AttributeUpdate($id: ID!, $input: AttributeUpdateInput!) {
attributeUpdate(id: $id, input: $input) {
errors {
field
message
}
attribute {
...AttributeDetailsFragment
}
errors: productErrors {
...ProductErrorFragment
}
}
}
`;
@ -93,15 +86,15 @@ export const AttributeUpdateMutation = TypedMutation<
const attributeValueDelete = gql`
${attributeDetailsFragment}
${productErrorFragment}
mutation AttributeValueDelete($id: ID!) {
attributeValueDelete(id: $id) {
errors {
field
message
}
attribute {
...AttributeDetailsFragment
}
errors: productErrors {
...ProductErrorFragment
}
}
}
`;
@ -112,15 +105,15 @@ export const AttributeValueDeleteMutation = TypedMutation<
export const attributeValueUpdateMutation = gql`
${attributeDetailsFragment}
${productErrorFragment}
mutation AttributeValueUpdate($id: ID!, $input: AttributeValueCreateInput!) {
attributeValueUpdate(id: $id, input: $input) {
errors {
field
message
}
attribute {
...AttributeDetailsFragment
}
errors: productErrors {
...ProductErrorFragment
}
}
}
`;
@ -131,15 +124,15 @@ export const AttributeValueUpdateMutation = TypedMutation<
export const attributeValueCreateMutation = gql`
${attributeDetailsFragment}
${productErrorFragment}
mutation AttributeValueCreate($id: ID!, $input: AttributeValueCreateInput!) {
attributeValueCreate(attribute: $id, input: $input) {
errors {
field
message
}
attribute {
...AttributeDetailsFragment
}
errors: productErrors {
...ProductErrorFragment
}
}
}
`;
@ -150,15 +143,15 @@ export const AttributeValueCreateMutation = TypedMutation<
export const attributeCreateMutation = gql`
${attributeDetailsFragment}
${productErrorFragment}
mutation AttributeCreate($input: AttributeCreateInput!) {
attributeCreate(input: $input) {
errors {
field
message
}
attribute {
...AttributeDetailsFragment
}
errors: productErrors {
...ProductErrorFragment
}
}
}
`;
@ -168,18 +161,18 @@ export const AttributeCreateMutation = TypedMutation<
>(attributeCreateMutation);
const attributeValueReorderMutation = gql`
${productErrorFragment}
mutation AttributeValueReorder($id: ID!, $move: ReorderInput!) {
attributeReorderValues(attributeId: $id, moves: [$move]) {
errors {
field
message
}
attribute {
id
values {
id
}
}
errors: productErrors {
...ProductErrorFragment
}
}
}
`;

6
src/attributes/types/AttributeBulkDelete.ts
View file

@ -2,16 +2,14 @@
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { ProductErrorCode } from "./../../types/globalTypes";
// ====================================================
// GraphQL mutation operation: AttributeBulkDelete
// ====================================================
export interface AttributeBulkDelete_attributeBulkDelete_errors {
__typename: "ProductError";
code: ProductErrorCode;
__typename: "Error";
field: string | null;
message: string | null;
}
export interface AttributeBulkDelete_attributeBulkDelete {

16
src/attributes/types/AttributeCreate.ts
View file

@ -2,12 +2,18 @@
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { AttributeCreateInput, AttributeInputTypeEnum, AttributeValueType, ProductErrorCode } from "./../../types/globalTypes";
import { AttributeCreateInput, AttributeInputTypeEnum, AttributeValueType } from "./../../types/globalTypes";
// ====================================================
// GraphQL mutation operation: AttributeCreate
// ====================================================
export interface AttributeCreate_attributeCreate_errors {
__typename: "Error";
field: string | null;
message: string | null;
}
export interface AttributeCreate_attributeCreate_attribute_values {
__typename: "AttributeValue";
id: string;
@ -31,16 +37,10 @@ export interface AttributeCreate_attributeCreate_attribute {
values: (AttributeCreate_attributeCreate_attribute_values | null)[] | null;
}
export interface AttributeCreate_attributeCreate_errors {
__typename: "ProductError";
code: ProductErrorCode;
field: string | null;
}
export interface AttributeCreate_attributeCreate {
__typename: "AttributeCreate";
attribute: AttributeCreate_attributeCreate_attribute | null;
errors: AttributeCreate_attributeCreate_errors[];
attribute: AttributeCreate_attributeCreate_attribute | null;
}
export interface AttributeCreate {

6
src/attributes/types/AttributeDelete.ts
View file

@ -2,16 +2,14 @@
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { ProductErrorCode } from "./../../types/globalTypes";
// ====================================================
// GraphQL mutation operation: AttributeDelete
// ====================================================
export interface AttributeDelete_attributeDelete_errors {
__typename: "ProductError";
code: ProductErrorCode;
__typename: "Error";
field: string | null;
message: string | null;
}
export interface AttributeDelete_attributeDelete {

16
src/attributes/types/AttributeUpdate.ts
View file

@ -2,12 +2,18 @@
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { AttributeUpdateInput, AttributeInputTypeEnum, AttributeValueType, ProductErrorCode } from "./../../types/globalTypes";
import { AttributeUpdateInput, AttributeInputTypeEnum, AttributeValueType } from "./../../types/globalTypes";
// ====================================================
// GraphQL mutation operation: AttributeUpdate
// ====================================================
export interface AttributeUpdate_attributeUpdate_errors {
__typename: "Error";
field: string | null;
message: string | null;
}
export interface AttributeUpdate_attributeUpdate_attribute_values {
__typename: "AttributeValue";
id: string;
@ -31,16 +37,10 @@ export interface AttributeUpdate_attributeUpdate_attribute {
values: (AttributeUpdate_attributeUpdate_attribute_values | null)[] | null;
}
export interface AttributeUpdate_attributeUpdate_errors {
__typename: "ProductError";
code: ProductErrorCode;
field: string | null;
}
export interface AttributeUpdate_attributeUpdate {
__typename: "AttributeUpdate";
attribute: AttributeUpdate_attributeUpdate_attribute | null;
errors: AttributeUpdate_attributeUpdate_errors[];
attribute: AttributeUpdate_attributeUpdate_attribute | null;
}
export interface AttributeUpdate {

16
src/attributes/types/AttributeValueCreate.ts
View file

@ -2,12 +2,18 @@
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { AttributeValueCreateInput, AttributeInputTypeEnum, AttributeValueType, ProductErrorCode } from "./../../types/globalTypes";
import { AttributeValueCreateInput, AttributeInputTypeEnum, AttributeValueType } from "./../../types/globalTypes";
// ====================================================
// GraphQL mutation operation: AttributeValueCreate
// ====================================================
export interface AttributeValueCreate_attributeValueCreate_errors {
__typename: "Error";
field: string | null;
message: string | null;
}
export interface AttributeValueCreate_attributeValueCreate_attribute_values {
__typename: "AttributeValue";
id: string;
@ -31,16 +37,10 @@ export interface AttributeValueCreate_attributeValueCreate_attribute {
values: (AttributeValueCreate_attributeValueCreate_attribute_values | null)[] | null;
}
export interface AttributeValueCreate_attributeValueCreate_errors {
__typename: "ProductError";
code: ProductErrorCode;
field: string | null;
}
export interface AttributeValueCreate_attributeValueCreate {
__typename: "AttributeValueCreate";
attribute: AttributeValueCreate_attributeValueCreate_attribute | null;
errors: AttributeValueCreate_attributeValueCreate_errors[];
attribute: AttributeValueCreate_attributeValueCreate_attribute | null;
}
export interface AttributeValueCreate {

16
src/attributes/types/AttributeValueDelete.ts
View file

@ -2,12 +2,18 @@
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { AttributeInputTypeEnum, AttributeValueType, ProductErrorCode } from "./../../types/globalTypes";
import { AttributeInputTypeEnum, AttributeValueType } from "./../../types/globalTypes";
// ====================================================
// GraphQL mutation operation: AttributeValueDelete
// ====================================================
export interface AttributeValueDelete_attributeValueDelete_errors {
__typename: "Error";
field: string | null;
message: string | null;
}
export interface AttributeValueDelete_attributeValueDelete_attribute_values {
__typename: "AttributeValue";
id: string;
@ -31,16 +37,10 @@ export interface AttributeValueDelete_attributeValueDelete_attribute {
values: (AttributeValueDelete_attributeValueDelete_attribute_values | null)[] | null;
}
export interface AttributeValueDelete_attributeValueDelete_errors {
__typename: "ProductError";
code: ProductErrorCode;
field: string | null;
}
export interface AttributeValueDelete_attributeValueDelete {
__typename: "AttributeValueDelete";
attribute: AttributeValueDelete_attributeValueDelete_attribute | null;
errors: AttributeValueDelete_attributeValueDelete_errors[];
attribute: AttributeValueDelete_attributeValueDelete_attribute | null;
}
export interface AttributeValueDelete {

16
src/attributes/types/AttributeValueReorder.ts
View file

@ -2,12 +2,18 @@
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { ReorderInput, ProductErrorCode } from "./../../types/globalTypes";
import { ReorderInput } from "./../../types/globalTypes";
// ====================================================
// GraphQL mutation operation: AttributeValueReorder
// ====================================================
export interface AttributeValueReorder_attributeReorderValues_errors {
__typename: "Error";
field: string | null;
message: string | null;
}
export interface AttributeValueReorder_attributeReorderValues_attribute_values {
__typename: "AttributeValue";
id: string;
@ -19,16 +25,10 @@ export interface AttributeValueReorder_attributeReorderValues_attribute {
values: (AttributeValueReorder_attributeReorderValues_attribute_values | null)[] | null;
}
export interface AttributeValueReorder_attributeReorderValues_errors {
__typename: "ProductError";
code: ProductErrorCode;
field: string | null;
}
export interface AttributeValueReorder_attributeReorderValues {
__typename: "AttributeReorderValues";
attribute: AttributeValueReorder_attributeReorderValues_attribute | null;
errors: AttributeValueReorder_attributeReorderValues_errors[];
attribute: AttributeValueReorder_attributeReorderValues_attribute | null;
}
export interface AttributeValueReorder {

16
src/attributes/types/AttributeValueUpdate.ts
View file

@ -2,12 +2,18 @@
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { AttributeValueCreateInput, AttributeInputTypeEnum, AttributeValueType, ProductErrorCode } from "./../../types/globalTypes";
import { AttributeValueCreateInput, AttributeInputTypeEnum, AttributeValueType } from "./../../types/globalTypes";
// ====================================================
// GraphQL mutation operation: AttributeValueUpdate
// ====================================================
export interface AttributeValueUpdate_attributeValueUpdate_errors {
__typename: "Error";
field: string | null;
message: string | null;
}
export interface AttributeValueUpdate_attributeValueUpdate_attribute_values {
__typename: "AttributeValue";
id: string;
@ -31,16 +37,10 @@ export interface AttributeValueUpdate_attributeValueUpdate_attribute {
values: (AttributeValueUpdate_attributeValueUpdate_attribute_values | null)[] | null;
}
export interface AttributeValueUpdate_attributeValueUpdate_errors {
__typename: "ProductError";
code: ProductErrorCode;
field: string | null;
}
export interface AttributeValueUpdate_attributeValueUpdate {
__typename: "AttributeValueUpdate";
attribute: AttributeValueUpdate_attributeValueUpdate_attribute | null;
errors: AttributeValueUpdate_attributeValueUpdate_errors[];
attribute: AttributeValueUpdate_attributeValueUpdate_attribute | null;
}
export interface AttributeValueUpdate {

15
src/attributes/types/ProductErrorFragment.ts
View file

@ -1,15 +0,0 @@
/* tslint:disable */
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { ProductErrorCode } from "./../../types/globalTypes";
// ====================================================
// GraphQL fragment: ProductErrorFragment
// ====================================================
export interface ProductErrorFragment {
__typename: "ProductError";
code: ProductErrorCode;
field: string | null;
}

51
src/attributes/views/AttributeCreate/AttributeCreate.tsx
View file

@ -5,7 +5,7 @@ import slugify from "slugify";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import { maybe } from "@saleor/misc";
import { ReorderEvent } from "@saleor/types";
import { ReorderEvent, UserError } from "@saleor/types";
import {
add,
isSelected,
@ -14,8 +14,6 @@ import {
updateAtIndex
} from "@saleor/utils/lists";
import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment";
import { ProductErrorCode } from "@saleor/types/globalTypes";
import AttributePage from "../../components/AttributePage";
import AttributeValueDeleteDialog from "../../components/AttributeValueDeleteDialog";
import AttributeValueEditDialog, {
@ -35,12 +33,6 @@ interface AttributeDetailsProps {
params: AttributeAddUrlQueryParams;
}
const attributeValueAlreadyExistsError: ProductErrorFragment = {
__typename: "ProductError",
code: ProductErrorCode.ALREADY_EXISTS,
field: "name"
};
function areValuesEqual(
a: AttributeValueEditDialogFormData,
b: AttributeValueEditDialogFormData
@ -56,9 +48,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
const [values, setValues] = React.useState<
AttributeValueEditDialogFormData[]
>([]);
const [valueErrors, setValueErrors] = React.useState<ProductErrorFragment[]>(
[]
);
const [valueErrors, setValueErrors] = React.useState<UserError[]>([]);
const id = params.id ? parseInt(params.id, 0) : undefined;
@ -67,8 +57,6 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
AttributeAddUrlQueryParams
>(navigate, attributeAddUrl, params);
React.useEffect(() => setValueErrors([]), [params.action]);
const handleValueDelete = () => {
setValues(remove(values[params.id], values, areValuesEqual));
closeModal();
@ -85,7 +73,20 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
};
const handleValueUpdate = (input: AttributeValueEditDialogFormData) => {
if (isSelected(input, values, areValuesEqual)) {
setValueErrors([attributeValueAlreadyExistsError]);
setValueErrors([
{
field: "name",
message: intl.formatMessage(
{
defaultMessage: "A value named {name} already exists",
description: "attribute value edit error"
},
{
name: input.name
}
)
}
]);
} else {
setValues(updateAtIndex(input, values, id));
closeModal();
@ -93,7 +94,20 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
};
const handleValueCreate = (input: AttributeValueEditDialogFormData) => {
if (isSelected(input, values, areValuesEqual)) {
setValueErrors([attributeValueAlreadyExistsError]);
setValueErrors([
{
field: "name",
message: intl.formatMessage(
{
defaultMessage: "A value named {name} already exists",
description: "attribute value edit error"
},
{
name: input.name
}
)
}
]);
} else {
setValues(add(input, values));
closeModal();
@ -109,7 +123,10 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
<AttributePage
attribute={null}
disabled={false}
errors={attributeCreateOpts.data?.attributeCreate.errors || []}
errors={maybe(
() => attributeCreateOpts.data.attributeCreate.errors,
[]
)}
onBack={() => navigate(attributeListUrl())}
onDelete={undefined}
onSubmit={input =>

36
src/attributes/views/AttributeDetails/AttributeDetails.tsx
View file

@ -8,7 +8,6 @@ import { maybe } from "@saleor/misc";
import { ReorderEvent } from "@saleor/types";
import { move } from "@saleor/utils/lists";
import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
import { getProductErrorMessage } from "@saleor/utils/errors";
import AttributeDeleteDialog from "../../components/AttributeDeleteDialog";
import AttributePage from "../../components/AttributePage";
import AttributeValueDeleteDialog from "../../components/AttributeValueDeleteDialog";
@ -96,10 +95,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
const handleValueReorderMutation = (data: AttributeValueReorder) => {
if (data.attributeReorderValues.errors.length !== 0) {
notify({
text: getProductErrorMessage(
data.attributeReorderValues.errors[0],
intl
)
text: data.attributeReorderValues.errors[0].message
});
}
};
@ -159,10 +155,12 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
<AttributePage
attribute={maybe(() => data.attribute)}
disabled={loading}
errors={
attributeUpdateOpts.data
?.attributeUpdate.errors || []
}
errors={maybe(
() =>
attributeUpdateOpts.data
.attributeUpdate.errors,
[]
)}
onBack={() =>
navigate(attributeListUrl())
}
@ -255,10 +253,12 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
attributeValueCreateOpts.status
}
disabled={loading}
errors={
attributeValueCreateOpts.data
?.attributeValueCreate.errors || []
}
errors={maybe(
() =>
attributeValueCreateOpts.data
.attributeValueCreate.errors,
[]
)}
open={params.action === "add-value"}
onClose={closeModal}
onSubmit={input =>
@ -280,10 +280,12 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
attributeValueUpdateOpts.status
}
disabled={loading}
errors={
attributeValueUpdateOpts.data
?.attributeValueUpdate.errors || []
}
errors={maybe(
() =>
attributeValueUpdateOpts.data
.attributeValueUpdate.errors,
[]
)}
open={params.action === "edit-value"}
onClose={closeModal}
onSubmit={input =>

6
src/productTypes/components/AssignAttributeDialog/AssignAttributeDialog.tsx
View file

@ -30,8 +30,6 @@ import useSearchQuery from "@saleor/hooks/useSearchQuery";
import { buttonMessages } from "@saleor/intl";
import { maybe, renderCollection } from "@saleor/misc";
import { FetchMoreProps } from "@saleor/types";
import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment";
import { getProductErrorMessage } from "@saleor/utils/errors";
import { SearchAttributes_productType_availableAttributes_edges_node } from "../../hooks/useAvailableAttributeSearch/types/SearchAttributes";
const useStyles = makeStyles(
@ -63,7 +61,7 @@ const useStyles = makeStyles(
export interface AssignAttributeDialogProps extends FetchMoreProps {
confirmButtonState: ConfirmButtonTransitionState;
errors: ProductErrorFragment[];
errors: string[];
open: boolean;
attributes: SearchAttributes_productType_availableAttributes_edges_node[];
selected: string[];
@ -190,7 +188,7 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
<DialogContent>
{errors.map((error, errorIndex) => (
<DialogContentText color="error" key={errorIndex}>
{getProductErrorMessage(error, intl)}
{error}
</DialogContentText>
))}
</DialogContent>

112
src/productTypes/components/ProductTypeAttributeEditDialog/ProductTypeAttributeEditDialog.tsx Normal file
View file

@ -0,0 +1,112 @@
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import TextField from "@material-ui/core/TextField";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import Form from "@saleor/components/Form";
import { FormSpacer } from "@saleor/components/FormSpacer";
import ListField from "@saleor/components/ListField";
import { buttonMessages } from "@saleor/intl";
import { UserError } from "@saleor/types";
import { getFieldError } from "@saleor/utils/errors";
export interface FormData {
name: string;
values: Array<{
label: string;
value: string;
}>;
}
export interface ProductTypeAttributeEditDialogProps {
disabled: boolean;
errors: UserError[];
name: string;
opened: boolean;
title: string;
values: Array<{
label: string;
value: string;
}>;
onClose: () => void;
onConfirm: (data: FormData) => void;
}
const ProductTypeAttributeEditDialog: React.FC<ProductTypeAttributeEditDialogProps> = ({
disabled,
errors,
name,
opened,
title,
values,
onClose,
onConfirm
}) => {
const intl = useIntl();
const initialForm: FormData = {
name: name || "",
values: values || []
};
return (
<Dialog onClose={onClose} open={opened}>
<Form initial={initialForm} onSubmit={onConfirm}>
{({ change, data }) => (
<>
<DialogTitle>{title}</DialogTitle>
<DialogContent>
<TextField
disabled={disabled}
error={!!getFieldError(errors, "name")}
fullWidth
label={intl.formatMessage({
defaultMessage: "Attribute name"
})}
helperText={getFieldError(errors, "name")?.message}
name="name"
value={data.name}
onChange={change}
/>
<FormSpacer />
<ListField
autoComplete="off"
disabled={disabled}
error={
!!getFieldError(errors, "values") ||
!!getFieldError(errors, "addValues") ||
!!getFieldError(errors, "removeValues")
}
fullWidth
name="values"
label={intl.formatMessage({
defaultMessage: "Attribute values"
})}
helperText={
getFieldError(errors, "values") ||
getFieldError(errors, "addValues") ||
getFieldError(errors, "removeValues")
}
values={data.values}
onChange={change}
/>
</DialogContent>
<DialogActions>
<Button onClick={onClose}>
<FormattedMessage {...buttonMessages.back} />
</Button>
<Button color="primary" variant="contained" type="submit">
<FormattedMessage {...buttonMessages.confirm} />
</Button>
</DialogActions>
</>
)}
</Form>
</Dialog>
);
};
ProductTypeAttributeEditDialog.displayName = "ProductTypeAttributeEditDialog";
export default ProductTypeAttributeEditDialog;

2
src/productTypes/components/ProductTypeAttributeEditDialog/index.ts Normal file
View file

@ -0,0 +1,2 @@
export { default } from "./ProductTypeAttributeEditDialog";
export * from "./ProductTypeAttributeEditDialog";

5
src/productTypes/components/ProductTypeCreatePage/ProductTypeCreatePage.tsx
View file

@ -13,8 +13,8 @@ import { ChangeEvent, FormChange } from "@saleor/hooks/useForm";
import useStateFromProps from "@saleor/hooks/useStateFromProps";
import { sectionNames } from "@saleor/intl";
import { ProductTypeDetails_taxTypes } from "@saleor/productTypes/types/ProductTypeDetails";
import { UserError } from "@saleor/types";
import { WeightUnitsEnum } from "@saleor/types/globalTypes";
import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment";
import ProductTypeDetails from "../ProductTypeDetails/ProductTypeDetails";
import ProductTypeShipping from "../ProductTypeShipping/ProductTypeShipping";
import ProductTypeTaxes from "../ProductTypeTaxes/ProductTypeTaxes";
@ -27,7 +27,7 @@ export interface ProductTypeForm {
}
export interface ProductTypeCreatePageProps {
errors: ProductErrorFragment[];
errors: UserError[];
defaultWeightUnit: WeightUnitsEnum;
disabled: boolean;
pageTitle: string;
@ -106,7 +106,6 @@ const ProductTypeCreatePage: React.FC<ProductTypeCreatePageProps> = ({
disabled={disabled}
data={data}
defaultWeightUnit={defaultWeightUnit}
errors={errors}
onChange={change}
/>
</div>

14
src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx
View file

@ -7,8 +7,8 @@ import { useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import { commonMessages } from "@saleor/intl";
import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment";
import { getFormErrors, getProductErrorMessage } from "@saleor/utils/errors";
import { UserError } from "@saleor/types";
import { getFieldError } from "@saleor/utils/errors";
const useStyles = makeStyles(
{
@ -24,17 +24,15 @@ interface ProductTypeDetailsProps {
name: string;
};
disabled: boolean;
errors: ProductErrorFragment[];
errors: UserError[];
onChange: (event: React.ChangeEvent<any>) => void;
}
const ProductTypeDetails: React.FC<ProductTypeDetailsProps> = props => {
const { data, disabled, errors, onChange } = props;
const classes = useStyles(props);
const intl = useIntl();
const formErrors = getFormErrors(["name"], errors);
const intl = useIntl();
return (
<Card className={classes.root}>
@ -44,9 +42,9 @@ const ProductTypeDetails: React.FC<ProductTypeDetailsProps> = props => {
<CardContent>
<TextField
disabled={disabled}
error={!!formErrors.name}
error={!!getFieldError(errors, "name")}
fullWidth
helperText={getProductErrorMessage(formErrors.name, intl)}
helperText={getFieldError(errors, "name")?.message}
label={intl.formatMessage({
defaultMessage: "Product Type Name"
})}

6
src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx
View file

@ -14,9 +14,8 @@ import { ChangeEvent, FormChange } from "@saleor/hooks/useForm";
import useStateFromProps from "@saleor/hooks/useStateFromProps";
import { sectionNames } from "@saleor/intl";
import { maybe } from "@saleor/misc";
import { ListActions, ReorderEvent } from "@saleor/types";
import { ListActions, ReorderEvent, UserError } from "@saleor/types";
import { AttributeTypeEnum, WeightUnitsEnum } from "@saleor/types/globalTypes";
import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment";
import {
ProductTypeDetails_productType,
ProductTypeDetails_taxTypes
@ -42,7 +41,7 @@ export interface ProductTypeForm {
}
export interface ProductTypeDetailsPageProps {
errors: ProductErrorFragment[];
errors: UserError[];
productType: ProductTypeDetails_productType;
defaultWeightUnit: WeightUnitsEnum;
disabled: boolean;
@ -201,7 +200,6 @@ const ProductTypeDetailsPage: React.FC<ProductTypeDetailsPageProps> = ({
disabled={disabled}
data={data}
defaultWeightUnit={defaultWeightUnit}
errors={errors}
onChange={change}
/>
</div>

18
src/productTypes/components/ProductTypeShipping/ProductTypeShipping.tsx
View file

@ -6,8 +6,6 @@ import { useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment";
import { getFormErrors, getProductErrorMessage } from "@saleor/utils/errors";
import { WeightUnitsEnum } from "../../../types/globalTypes";
interface ProductTypeShippingProps {
@ -17,7 +15,6 @@ interface ProductTypeShippingProps {
};
defaultWeightUnit: WeightUnitsEnum;
disabled: boolean;
errors: ProductErrorFragment[];
onChange: (event: React.ChangeEvent<any>) => void;
}
@ -25,13 +22,10 @@ const ProductTypeShipping: React.FC<ProductTypeShippingProps> = ({
data,
defaultWeightUnit,
disabled,
errors,
onChange
}) => {
const intl = useIntl();
const formErrors = getFormErrors(["weight"], errors);
return (
<Card>
<CardTitle
@ -54,19 +48,15 @@ const ProductTypeShipping: React.FC<ProductTypeShippingProps> = ({
{data.isShippingRequired && (
<TextField
disabled={disabled}
error={!!formErrors.weight}
InputProps={{ endAdornment: defaultWeightUnit }}
label={intl.formatMessage({
defaultMessage: "Weight"
})}
name="weight"
helperText={
getProductErrorMessage(formErrors.weight, intl) ||
intl.formatMessage({
defaultMessage:
"Used to calculate rates for shipping for products of this product type, when specific weight is not given"
})
}
helperText={intl.formatMessage({
defaultMessage:
"Used to calculate rates for shipping for products of this product type, when specific weight is not given"
})}
type="number"
value={data.weight}
onChange={onChange}

43
src/productTypes/mutations.ts
View file

@ -1,6 +1,5 @@
import gql from "graphql-tag";
import { productErrorFragment } from "@saleor/attributes/mutations";
import { TypedMutation } from "../mutations";
import { productTypeDetailsFragment } from "./queries";
import {
@ -33,11 +32,11 @@ import {
} from "./types/UnassignAttribute";
export const productTypeDeleteMutation = gql`
${productErrorFragment}
mutation ProductTypeDelete($id: ID!) {
productTypeDelete(id: $id) {
errors: productErrors {
...ProductErrorFragment
errors {
field
message
}
productType {
id
@ -51,11 +50,11 @@ export const TypedProductTypeDeleteMutation = TypedMutation<
>(productTypeDeleteMutation);
export const productTypeBulkDeleteMutation = gql`
${productErrorFragment}
mutation ProductTypeBulkDelete($ids: [ID]!) {
productTypeBulkDelete(ids: $ids) {
errors: productErrors {
...ProductErrorFragment
errors {
field
message
}
}
}
@ -66,12 +65,12 @@ export const TypedProductTypeBulkDeleteMutation = TypedMutation<
>(productTypeBulkDeleteMutation);
export const productTypeUpdateMutation = gql`
${productErrorFragment}
${productTypeDetailsFragment}
mutation ProductTypeUpdate($id: ID!, $input: ProductTypeInput!) {
productTypeUpdate(id: $id, input: $input) {
errors: productErrors {
...ProductErrorFragment
errors {
field
message
}
productType {
...ProductTypeDetailsFragment
@ -85,12 +84,12 @@ export const TypedProductTypeUpdateMutation = TypedMutation<
>(productTypeUpdateMutation);
export const assignAttributeMutation = gql`
${productErrorFragment}
${productTypeDetailsFragment}
mutation AssignAttribute($id: ID!, $operations: [AttributeAssignInput!]!) {
attributeAssign(productTypeId: $id, operations: $operations) {
errors: productErrors {
...ProductErrorFragment
errors {
field
message
}
productType {
...ProductTypeDetailsFragment
@ -104,12 +103,12 @@ export const TypedAssignAttributeMutation = TypedMutation<
>(assignAttributeMutation);
export const unassignAttributeMutation = gql`
${productErrorFragment}
${productTypeDetailsFragment}
mutation UnassignAttribute($id: ID!, $ids: [ID]!) {
attributeUnassign(productTypeId: $id, attributeIds: $ids) {
errors: productErrors {
...ProductErrorFragment
errors {
field
message
}
productType {
...ProductTypeDetailsFragment
@ -123,12 +122,12 @@ export const TypedUnassignAttributeMutation = TypedMutation<
>(unassignAttributeMutation);
export const productTypeCreateMutation = gql`
${productErrorFragment}
${productTypeDetailsFragment}
mutation ProductTypeCreate($input: ProductTypeInput!) {
productTypeCreate(input: $input) {
errors: productErrors {
...ProductErrorFragment
errors {
field
message
}
productType {
...ProductTypeDetailsFragment
@ -142,7 +141,6 @@ export const TypedProductTypeCreateMutation = TypedMutation<
>(productTypeCreateMutation);
const productTypeAttributeReorder = gql`
${productErrorFragment}
${productTypeDetailsFragment}
mutation ProductTypeAttributeReorder(
$move: ReorderInput!
@ -154,8 +152,9 @@ const productTypeAttributeReorder = gql`
productTypeId: $productTypeId
type: $type
) {
errors: productErrors {
...ProductErrorFragment
errors {
field
message
}
productType {
...ProductTypeDetailsFragment

6
src/productTypes/types/AssignAttribute.ts
View file

@ -2,16 +2,16 @@
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { AttributeAssignInput, ProductErrorCode } from "./../../types/globalTypes";
import { AttributeAssignInput } from "./../../types/globalTypes";
// ====================================================
// GraphQL mutation operation: AssignAttribute
// ====================================================
export interface AssignAttribute_attributeAssign_errors {
__typename: "ProductError";
code: ProductErrorCode;
__typename: "Error";
field: string | null;
message: string | null;
}
export interface AssignAttribute_attributeAssign_productType_taxType {

6
src/productTypes/types/ProductTypeAttributeReorder.ts
View file

@ -2,16 +2,16 @@
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { ReorderInput, AttributeTypeEnum, ProductErrorCode } from "./../../types/globalTypes";
import { ReorderInput, AttributeTypeEnum } from "./../../types/globalTypes";
// ====================================================
// GraphQL mutation operation: ProductTypeAttributeReorder
// ====================================================
export interface ProductTypeAttributeReorder_productTypeReorderAttributes_errors {
__typename: "ProductError";
code: ProductErrorCode;
__typename: "Error";
field: string | null;
message: string | null;
}
export interface ProductTypeAttributeReorder_productTypeReorderAttributes_productType_taxType {

6
src/productTypes/types/ProductTypeBulkDelete.ts
View file

@ -2,16 +2,14 @@
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { ProductErrorCode } from "./../../types/globalTypes";
// ====================================================
// GraphQL mutation operation: ProductTypeBulkDelete
// ====================================================
export interface ProductTypeBulkDelete_productTypeBulkDelete_errors {
__typename: "ProductError";
code: ProductErrorCode;
__typename: "Error";
field: string | null;
message: string | null;
}
export interface ProductTypeBulkDelete_productTypeBulkDelete {

6
src/productTypes/types/ProductTypeCreate.ts
View file

@ -2,16 +2,16 @@
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { ProductTypeInput, ProductErrorCode } from "./../../types/globalTypes";
import { ProductTypeInput } from "./../../types/globalTypes";
// ====================================================
// GraphQL mutation operation: ProductTypeCreate
// ====================================================
export interface ProductTypeCreate_productTypeCreate_errors {
__typename: "ProductError";
code: ProductErrorCode;
__typename: "Error";
field: string | null;
message: string | null;
}
export interface ProductTypeCreate_productTypeCreate_productType_taxType {

6
src/productTypes/types/ProductTypeDelete.ts
View file

@ -2,16 +2,14 @@
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { ProductErrorCode } from "./../../types/globalTypes";
// ====================================================
// GraphQL mutation operation: ProductTypeDelete
// ====================================================
export interface ProductTypeDelete_productTypeDelete_errors {
__typename: "ProductError";
code: ProductErrorCode;
__typename: "Error";
field: string | null;
message: string | null;
}
export interface ProductTypeDelete_productTypeDelete_productType {

6
src/productTypes/types/ProductTypeUpdate.ts
View file

@ -2,16 +2,16 @@
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { ProductTypeInput, ProductErrorCode } from "./../../types/globalTypes";
import { ProductTypeInput } from "./../../types/globalTypes";
// ====================================================
// GraphQL mutation operation: ProductTypeUpdate
// ====================================================
export interface ProductTypeUpdate_productTypeUpdate_errors {
__typename: "ProductError";
code: ProductErrorCode;
__typename: "Error";
field: string | null;
message: string | null;
}
export interface ProductTypeUpdate_productTypeUpdate_productType_taxType {

6
src/productTypes/types/UnassignAttribute.ts
View file

@ -2,16 +2,14 @@
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { ProductErrorCode } from "./../../types/globalTypes";
// ====================================================
// GraphQL mutation operation: UnassignAttribute
// ====================================================
export interface UnassignAttribute_attributeUnassign_errors {
__typename: "ProductError";
code: ProductErrorCode;
__typename: "Error";
field: string | null;
message: string | null;
}
export interface UnassignAttribute_attributeUnassign_productType_taxType {

7
src/productTypes/views/ProductTypeCreate.tsx
View file

@ -57,9 +57,10 @@ export const ProductTypeCreate: React.FC = () => {
<ProductTypeCreatePage
defaultWeightUnit={maybe(() => data.shop.defaultWeightUnit)}
disabled={loading}
errors={
createProductTypeOpts.data?.productTypeCreate.errors || []
}
errors={maybe(
() => createProductTypeOpts.data.productTypeCreate.errors,
[]
)}
pageTitle={intl.formatMessage({
defaultMessage: "Create Product Type",
description: "header",

21
src/productTypes/views/ProductTypeUpdate/errors.tsx
View file

@ -1,19 +1,19 @@
import React from "react";
import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment";
import { UserError } from "../../../types";
interface ProductTypeUpdateErrorsState {
addAttributeErrors: ProductErrorFragment[];
editAttributeErrors: ProductErrorFragment[];
formErrors: ProductErrorFragment[];
addAttributeErrors: UserError[];
editAttributeErrors: UserError[];
formErrors: UserError[];
}
interface ProductTypeUpdateErrorsProps {
children: (props: {
errors: ProductTypeUpdateErrorsState;
set: {
addAttributeErrors: (errors: ProductErrorFragment[]) => void;
editAttributeErrors: (errors: ProductErrorFragment[]) => void;
formErrors: (errors: ProductErrorFragment[]) => void;
addAttributeErrors: (errors: UserError[]) => void;
editAttributeErrors: (errors: UserError[]) => void;
formErrors: (errors: UserError[]) => void;
};
}) => React.ReactNode;
}
@ -32,12 +32,11 @@ export class ProductTypeUpdateErrors extends React.Component<
return this.props.children({
errors: this.state,
set: {
addAttributeErrors: (addAttributeErrors: ProductErrorFragment[]) =>
addAttributeErrors: (addAttributeErrors: UserError[]) =>
this.setState({ addAttributeErrors }),
editAttributeErrors: (editAttributeErrors: ProductErrorFragment[]) =>
editAttributeErrors: (editAttributeErrors: UserError[]) =>
this.setState({ editAttributeErrors }),
formErrors: (formErrors: ProductErrorFragment[]) =>
this.setState({ formErrors })
formErrors: (formErrors: UserError[]) => this.setState({ formErrors })
}
});
}

11
src/productTypes/views/ProductTypeUpdate/index.tsx
View file

@ -319,10 +319,13 @@ export const ProductTypeUpdate: React.FC<ProductTypeUpdateProps> = ({
)
)}
confirmButtonState={assignAttribute.opts.status}
errors={
assignAttribute.opts.data?.attributeAssign
.errors || []
}
errors={maybe(
() =>
assignAttribute.opts.data.attributeAssign.errors.map(
err => err.message
),
[]
)}
loading={result.loading}
onClose={closeModal}
onSubmit={handleAssignAttribute}

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

@ -10012,7 +10012,7 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
>
This field is required
Generic form error
</p>
</div>
<div
@ -10056,7 +10056,7 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
>
This field is required
Generic form error
</p>
</div>
<div
@ -10465,7 +10465,7 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
>
API error
Generic form error
</p>
</div>
<div
@ -84010,7 +84010,7 @@ exports[`Storyshots Views / Product types / Create product type form errors 1`]
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
>
Unknown error
Generic form error
</p>
</div>
</div>
@ -85147,7 +85147,7 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
<p
class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
>
Unknown error
Generic form error
</p>
</div>
</div>

24
src/storybook/stories/attributes/AttributePage.tsx
View file

@ -5,10 +5,8 @@ import AttributePage, {
AttributePageProps
} from "@saleor/attributes/components/AttributePage";
import { attribute } from "@saleor/attributes/fixtures";
import {
AttributeInputTypeEnum,
ProductErrorCode
} from "@saleor/types/globalTypes";
import { formError } from "@saleor/storybook/misc";
import { AttributeInputTypeEnum } from "@saleor/types/globalTypes";
import Decorator from "../../Decorator";
const props: AttributePageProps = {
@ -41,23 +39,7 @@ storiesOf("Views / Attributes / Attribute details", module)
.add("form errors", () => (
<AttributePage
{...props}
errors={[
{
code: ProductErrorCode.REQUIRED,
field: "name"
},
{
code: ProductErrorCode.REQUIRED,
field: "slug"
},
{
code: ProductErrorCode.GRAPHQL_ERROR,
field: "storefrontSearchPosition"
}
].map(err => ({
__typename: "ProductError",
...err
}))}
errors={["name", "slug", "storefrontSearchPosition"].map(formError)}
/>
))
.add("multiple select input", () => (

17
src/storybook/stories/attributes/AttributeValueEditDialog.tsx
View file

@ -2,10 +2,8 @@ import { storiesOf } from "@storybook/react";
import React from "react";
import { attribute } from "@saleor/attributes/fixtures";
import {
AttributeValueType,
ProductErrorCode
} from "@saleor/types/globalTypes";
import { formError } from "@saleor/storybook/misc";
import { AttributeValueType } from "@saleor/types/globalTypes";
import AttributeValueEditDialog, {
AttributeValueEditDialogProps
} from "../../../attributes/components/AttributeValueEditDialog";
@ -28,14 +26,5 @@ storiesOf("Attributes / Attribute value edit", module)
.addDecorator(Decorator)
.add("default", () => <AttributeValueEditDialog {...props} />)
.add("form errors", () => (
<AttributeValueEditDialog
{...props}
errors={[
{
__typename: "ProductError",
code: ProductErrorCode.ALREADY_EXISTS,
field: "name"
}
]}
/>
<AttributeValueEditDialog {...props} errors={[formError("name")]} />
));

13
src/storybook/stories/components/AssignAttributeDialog.tsx
View file

@ -6,7 +6,7 @@ import { fetchMoreProps } from "@saleor/fixtures";
import AssignAttributeDialog, {
AssignAttributeDialogProps
} from "@saleor/productTypes/components/AssignAttributeDialog";
import { ProductErrorCode } from "@saleor/types/globalTypes";
import { formError } from "@saleor/storybook/misc";
import Decorator from "../../Decorator";
const props: AssignAttributeDialogProps = {
@ -30,14 +30,5 @@ storiesOf("Generics / Assign attributes dialog", module)
<AssignAttributeDialog {...props} attributes={undefined} loading={true} />
))
.add("errors", () => (
<AssignAttributeDialog
{...props}
errors={[
{
__typename: "ProductError" as "ProductError",
code: ProductErrorCode.INVALID,
field: null
}
]}
/>
<AssignAttributeDialog {...props} errors={[formError("").message]} />
));

38
src/storybook/stories/productTypes/ProductTypeAttributeEditDialog.tsx Normal file
View file

@ -0,0 +1,38 @@
import { storiesOf } from "@storybook/react";
import React from "react";
import { formError } from "@saleor/storybook/misc";
import ProductTypeAttributeEditDialog, {
ProductTypeAttributeEditDialogProps
} from "../../../productTypes/components/ProductTypeAttributeEditDialog";
import { attributes } from "../../../productTypes/fixtures";
import Decorator from "../../Decorator";
const attribute = attributes[0];
const props: ProductTypeAttributeEditDialogProps = {
disabled: false,
errors: [],
name: attribute.name,
onClose: () => undefined,
onConfirm: () => undefined,
opened: true,
title: "Add Attribute",
values: attribute.values.map(value => ({
label: value.name,
value: value.id
}))
};
storiesOf("Product types / Edit attribute", module)
.addDecorator(Decorator)
.add("default", () => <ProductTypeAttributeEditDialog {...props} />)
.add("loading", () => (
<ProductTypeAttributeEditDialog {...props} disabled={true} />
))
.add("form errors", () => (
<ProductTypeAttributeEditDialog
{...props}
errors={["name", "values"].map(field => formError(field))}
/>
));

9
src/storybook/stories/productTypes/ProductTypeCreatePage.tsx
View file

@ -2,11 +2,12 @@ import { Omit } from "@material-ui/core";
import { storiesOf } from "@storybook/react";
import React from "react";
import { formError } from "@saleor/storybook/misc";
import ProductTypeCreatePage, {
ProductTypeCreatePageProps,
ProductTypeForm
} from "../../../productTypes/components/ProductTypeCreatePage";
import { WeightUnitsEnum, ProductErrorCode } from "../../../types/globalTypes";
import { WeightUnitsEnum } from "../../../types/globalTypes";
import Decorator from "../../Decorator";
const props: Omit<ProductTypeCreatePageProps, "classes"> = {
@ -29,10 +30,6 @@ storiesOf("Views / Product types / Create product type", module)
.add("form errors", () => (
<ProductTypeCreatePage
{...props}
errors={(["name"] as Array<keyof ProductTypeForm>).map(field => ({
__typename: "ProductError",
code: ProductErrorCode.INVALID,
field
}))}
errors={(["name"] as Array<keyof ProductTypeForm>).map(formError)}
/>
));

11
src/storybook/stories/productTypes/ProductTypeDetailsPage.tsx
View file

@ -3,12 +3,13 @@ import { storiesOf } from "@storybook/react";
import React from "react";
import { listActionsProps } from "@saleor/fixtures";
import { formError } from "@saleor/storybook/misc";
import ProductTypeDetailsPage, {
ProductTypeDetailsPageProps,
ProductTypeForm
} from "../../../productTypes/components/ProductTypeDetailsPage";
import { productType } from "../../../productTypes/fixtures";
import { WeightUnitsEnum, ProductErrorCode } from "../../../types/globalTypes";
import { WeightUnitsEnum } from "../../../types/globalTypes";
import Decorator from "../../Decorator";
const props: Omit<ProductTypeDetailsPageProps, "classes"> = {
@ -54,12 +55,6 @@ storiesOf("Views / Product types / Product type details", module)
.add("form errors", () => (
<ProductTypeDetailsPage
{...props}
errors={(["name", "weight"] as Array<keyof ProductTypeForm>).map(
field => ({
__typename: "ProductError",
code: ProductErrorCode.INVALID,
field
})
)}
errors={(["name"] as Array<keyof ProductTypeForm>).map(formError)}
/>
));

2
src/types.ts
View file

@ -7,7 +7,7 @@ import { MultiAutocompleteChoiceType } from "./components/MultiAutocompleteSelec
export interface UserError {
field: string | null;
message?: string;
message: string;
}
export interface DialogProps {

11
src/utils/errors.ts Normal file
View file

@ -0,0 +1,11 @@
import { UserError } from "@saleor/types";
export function getFieldError(errors: UserError[], field: string): UserError {
return errors.find(err => err.field === field);
}
export function getErrors(errors: UserError[]): string[] {
return errors
.filter(err => ["", null].includes(err.field))
.map(err => err.message);
}

12
src/utils/errors/common.ts
View file

@ -1,12 +0,0 @@
import { defineMessages } from "react-intl";
const commonErrorMessages = defineMessages({
graphqlError: {
defaultMessage: "API error"
},
unknownError: {
defaultMessage: "Unknown error"
}
});
export default commonErrorMessages;

26
src/utils/errors/index.ts
View file

@ -1,26 +0,0 @@
import { UserError } from "@saleor/types";
export function getFieldError<T extends UserError>(
errors: T[],
field: string
): T {
return errors.find(err => err.field === field);
}
export function getErrors(errors: UserError[]): string[] {
return errors
.filter(err => ["", null].includes(err.field))
.map(err => err.message);
}
export function getFormErrors<TField extends string, TError extends UserError>(
fields: TField[],
errors: TError[]
): Record<TField, TError> {
return fields.reduce((errs, field) => {
errs[field] = getFieldError(errors, field);
return errs;
}, ({} as unknown) as Record<TField, TError>);
}
export { default as getProductErrorMessage } from "./product";

50
src/utils/errors/product.ts
View file

@ -1,50 +0,0 @@
import { IntlShape, defineMessages } from "react-intl";
import { ProductErrorFragment } from "@saleor/attributes/types/ProductErrorFragment";
import { ProductErrorCode } from "@saleor/types/globalTypes";
import { commonMessages } from "@saleor/intl";
import commonErrorMessages from "./common";
const messages = defineMessages({
attributeAlreadyAssigned: {
defaultMessage:
"This attribute has already been assigned to this product type"
},
attributeCannotBeAssigned: {
defaultMessage: "This attribute cannot be assigned to this product type"
},
attributeVariantsDisabled: {
defaultMessage: "Variants are disabled in this product type"
},
variantNoDigitalContent: {
defaultMessage: "This variant does not have any digital content"
}
});
function getProductErrorMessage(
err: ProductErrorFragment,
intl: IntlShape
): string {
if (err) {
switch (err.code) {
case ProductErrorCode.ATTRIBUTE_ALREADY_ASSIGNED:
return intl.formatMessage(messages.attributeAlreadyAssigned);
case ProductErrorCode.ATTRIBUTE_CANNOT_BE_ASSIGNED:
return intl.formatMessage(messages.attributeCannotBeAssigned);
case ProductErrorCode.ATTRIBUTE_VARIANTS_DISABLED:
return intl.formatMessage(messages.attributeVariantsDisabled);
case ProductErrorCode.GRAPHQL_ERROR:
return intl.formatMessage(commonErrorMessages.graphqlError);
case ProductErrorCode.REQUIRED:
return intl.formatMessage(commonMessages.requiredField);
case ProductErrorCode.VARIANT_NO_DIGITAL_CONTENT:
return intl.formatMessage(messages.variantNoDigitalContent);
default:
return intl.formatMessage(commonErrorMessages.unknownError);
}
}
return undefined;
}
export default getProductErrorMessage;