Fix error messages with service account

src/intl.ts

@@ -47,6 +47,9 @@ export const commonMessages = defineMessages({
   properties: {
     defaultMessage: "Properties"
   },
+  requiredField: {
+    defaultMessage: "This field is required"
+  },
   savedChanges: {
     defaultMessage: "Saved changes"
   },

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

@@ -123389,7 +123389,7 @@ exports[`Storyshots Views / Webhooks / Create webhook form errors 1`] = `
                   <p
                     class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                   >
-                    Missing token or serviceAccount
+                    This field is required
                   </p>
                 </div>
               </div>
@@ -123479,14 +123479,6 @@ exports[`Storyshots Views / Webhooks / Create webhook form errors 1`] = `
                   secret key is used to create a hash signature with each payload. *optional field
                 </p>
               </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <p
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorError-id"
-              >
-                Missing token or serviceAccount
-              </p>
             </div>
           </div>
         </div>
@@ -124957,7 +124949,7 @@ exports[`Storyshots Views / Webhooks / Webhook details form errors 1`] = `
                   <p
                     class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                   >
-                    Missing token or serviceAccount
+                    This field is required
                   </p>
                 </div>
               </div>
@@ -125047,14 +125039,6 @@ exports[`Storyshots Views / Webhooks / Webhook details form errors 1`] = `
                   secret key is used to create a hash signature with each payload. *optional field
                 </p>
               </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <p
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorError-id"
-              >
-                Missing token or serviceAccount
-              </p>
             </div>
           </div>
         </div>

src/webhooks/components/WebhookInfo/WebhookInfo.tsx

@@ -4,7 +4,7 @@ import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import makeStyles from "@material-ui/styles/makeStyles";
 import React from "react";
-import { IntlShape, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import FormSpacer from "@saleor/components/FormSpacer";
@@ -15,7 +15,6 @@ import SingleAutocompleteSelectField, {
 import { ChangeEvent } from "@saleor/hooks/useForm";
 import { commonMessages } from "@saleor/intl";
 import { FormErrors } from "@saleor/types";
-import { WebhookErrorCode } from "@saleor/types/globalTypes";
 import { WebhookCreate_webhookCreate_webhookErrors } from "@saleor/webhooks/types/WebhookCreate";
 import { FormData } from "../WebhooksDetailsPage";
 
@@ -55,19 +54,9 @@ const WebhookInfo: React.StatelessComponent<WebhookInfoProps> = ({
 }) => {
   const classes = useStyles({});
   const intl = useIntl();
-  const translatedErrors = translateErrors(intl);
   const serviceAccountsError =
     apiErrors.filter(error => error.field === null).length > 0;
 
-  function translateErrors(intl: IntlShape) {
-    return {
-      [WebhookErrorCode.INVALID]: intl.formatMessage({
-        defaultMessage: "Missing service account",
-        description: "webhook service account error"
-      })
-    };
-  }
-
   return (
     <Card>
       <CardTitle
@@ -111,10 +100,7 @@ const WebhookInfo: React.StatelessComponent<WebhookInfoProps> = ({
           error={serviceAccountsError}
           helperText={
             serviceAccountsError &&
-            intl.formatMessage({
+            intl.formatMessage(commonMessages.requiredField)
-              defaultMessage: "Missing service account",
-              description: "webhook service account error"
-            })
           }
           name="serviceAccount"
           onChange={serviceOnChange}
@@ -160,18 +146,6 @@ const WebhookInfo: React.StatelessComponent<WebhookInfoProps> = ({
           value={data.secretKey}
           onChange={onChange}
         />
-        {apiErrors.length > 0 && (
-          <>
-            <FormSpacer />
-            {apiErrors
-              .filter(error => error.field === null)
-              .map(error => (
-                <Typography color="error" key={error.code}>
-                  {translatedErrors[error.code]}
-                </Typography>
-              ))}
-          </>
-        )}
       </CardContent>
     </Card>
   );