Attribute errors with field property to the correct property

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/types/errors.model.ts

@@ -0,0 +1,16 @@
+import { Operation, NextLink } from "@apollo/client/core";
+import { NetworkError } from "@apollo/client/errors";
+import { ExecutionResult, GraphQLError } from "graphql";
+
+export declare class AbsintheGraphQLError extends GraphQLError {
+  field?: string;
+}
+export declare type AbsintheGraphQLErrors = ReadonlyArray<AbsintheGraphQLError>;
+
+export interface ErrorResponse {
+  graphQLErrors?: AbsintheGraphQLErrors;
+  networkError?: NetworkError;
+  response?: ExecutionResult;
+  operation: Operation;
+  forward: NextLink;
+}

js/src/views/Group/Create.vue

@@ -60,7 +60,12 @@
         />
       </div>
 
-      <b-field :label="$t('Description')" label-for="group-summary">
+      <b-field
+        :label="$t('Description')"
+        label-for="group-summary"
+        :message="fieldErrors.summary"
+        :type="fieldErrors.summary ? 'is-danger' : undefined"
+      >
         <b-input v-model="group.summary" type="textarea" id="group-summary" />
       </b-field>
 
@@ -102,7 +107,7 @@ import { convertToUsername } from "../../utils/username";
 import PictureUpload from "../../components/PictureUpload.vue";
 import { CONFIG } from "@/graphql/config";
 import { IConfig } from "@/types/config.model";
-import { ErrorResponse } from "@apollo/client/link/error";
+import { ErrorResponse } from "@/types/errors.model";
 import { ServerParseError } from "@apollo/client/link/http";
 import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
 
@@ -135,6 +140,8 @@ export default class CreateGroup extends mixins(IdentityEditionMixin) {
 
   errors: string[] = [];
 
+  fieldErrors: Record<string, string> = {};
+
   usernameWithDomain = usernameWithDomain;
 
   async createGroup(): Promise<void> {
@@ -244,11 +251,17 @@ export default class CreateGroup extends mixins(IdentityEditionMixin) {
         );
       }
     }
-    this.errors.push(
+    err.graphQLErrors?.forEach((error) => {
-      ...(err.graphQLErrors || []).map(
+      if (error.field) {
-        ({ message }: { message: string }) => message
+        if (Array.isArray(error.message)) {
-      )
+          this.fieldErrors[error.field] = error.message[0];
-    );
+        } else {
+          this.fieldErrors[error.field] = error.message;
+        }
+      } else {
+        this.errors.push(error.message);
+      }
+    });
   }
 }
 </script>