Ajout d'une query GraphQL pour vérifier les autorisations côté serveur

- Intégration des vérifications de droits sur la page de
  création/modification des groupes de travail

client/src/components/WorkgroupPage/InfoForm.tsx

@@ -1,12 +1,13 @@
 import React, { useState, ChangeEvent, useEffect } from 'react';
 import { Workgroup } from '../../types/workgroup';
+import { useIsAuthorized } from '../../gql/queries/authorization';
 
 export interface InfoFormProps {
   workgroup: Workgroup
   onChange?: (workgroup: Workgroup) => void
 }
 
-export function InfoForm({ workgroup, onChange }: InfoFormProps) {  
+export function InfoForm({ workgroup, onChange }: InfoFormProps) {
   const [ state, setState ] = useState({
     changed: false,
     workgroup: {
@@ -17,6 +18,15 @@ export function InfoForm({ workgroup, onChange }: InfoFormProps) {
     }
   });
 
+  const { isAuthorized } = useIsAuthorized({
+    variables: {
+      action: 'update',
+      object: {
+        workgroupId: state.workgroup.id,
+      }
+    }
+  }, state.workgroup.id === '' ? true : false);
+
   useEffect(() => {
     setState({
       changed: false,
@@ -60,7 +70,8 @@ export function InfoForm({ workgroup, onChange }: InfoFormProps) {
       <div className="field">
         <label className="label">Nom du groupe</label>
         <div className="control">
-          <input type="text" className="input" value={state.workgroup.name} 
+          <input type="text" className="input" value={state.workgroup.name}
+            disabled={!isAuthorized}
             onChange={onWorkgroupAttrChange.bind(null, "name")} />
         </div>
       </div>
@@ -85,7 +96,7 @@ export function InfoForm({ workgroup, onChange }: InfoFormProps) {
         null
       }
       <div className="buttons is-right">
-        <button disabled={!state.changed} 
+        <button disabled={!state.changed || !isAuthorized}
           className="button is-success" onClick={onSaveClick}>
           <span>Enregistrer</span>
           <span className="icon"><i className="fa fa-save"></i></span>

client/src/components/WorkgroupPage/WorkgroupPage.tsx

@@ -20,9 +20,11 @@ export function WorkgroupPage() {
     }
   });
   const userProfileQuery = useUserProfileQuery();
+  
   const [ joinWorkgroup, joinWorkgroupMutation ] = useJoinWorkgroupMutation();
   const [ leaveWorkgroup, leaveWorkgroupMutation ] = useLeaveWorkgroupMutation();
   const [ closeWorkgroup, closeWorkgroupMutation ] = useCloseWorkgroupMutation();
+
   const [ state, setState ] = useState({
     userProfileId: '',
     workgroup: {

client/src/gql/client.tsx

@@ -34,13 +34,17 @@ export const client = new ApolloClient<any>({
 
 function mergeArrayByField<T>(fieldName: string) {
   return (existing: T[] = [], incoming: T[], { readField, mergeObjects }) => {
+    if (incoming.length === 0) return [];
+
     const merged: any[] = existing ? existing.slice(0) : [];
+    
     const objectFieldToIndex: Record<string, number> = Object.create(null);
     if (existing) {
       existing.forEach((obj, index) => {
         objectFieldToIndex[readField(fieldName, obj)] = index;
       });
     }
+
     incoming.forEach(obj => {
       const field = readField(fieldName, obj);
       const index = objectFieldToIndex[field];
@@ -51,6 +55,7 @@ function mergeArrayByField<T>(fieldName: string) {
         merged.push(obj);
       }
     });
+    
     return merged;
   }
 }

client/src/gql/mutations/workgroups.tsx

@@ -1,5 +1,6 @@
-import { gql, useQuery, useMutation } from '@apollo/client';
+import { gql, useQuery, useMutation, FetchResult } from '@apollo/client';
 import { QUERY_WORKGROUP } from '../queries/workgroups';
+import { QUERY_IS_AUTHORIZED } from '../queries/authorization';
 
 export const MUTATION_UPDATE_WORKGROUP = gql`
 mutation updateWorkgroup($workgroupId: ID!, $changes: WorkgroupChanges!) {
@@ -57,7 +58,19 @@ mutation joinWorkgroup($workgroupId: ID!) {
 }`;
 
 export function useJoinWorkgroupMutation() {
-  return useMutation(MUTATION_JOIN_WORKGROUP);
+  return useMutation(MUTATION_JOIN_WORKGROUP, {
+    refetchQueries: ({ data }: FetchResult) => {
+      return [{
+        query: QUERY_IS_AUTHORIZED,
+        variables: {
+          action: 'update',
+          object: {
+            workgroupId: data.joinWorkgroup.id,
+          }
+        }
+      }]
+    }
+  });
 }
 
 const MUTATION_LEAVE_WORKGROUP = gql`
@@ -76,7 +89,27 @@ mutation leaveWorkgroup($workgroupId: ID!) {
 }`;
 
 export function useLeaveWorkgroupMutation() {
-  return useMutation(MUTATION_LEAVE_WORKGROUP);
+  return useMutation(MUTATION_LEAVE_WORKGROUP, {
+    refetchQueries: ({ data }: FetchResult) => {
+      return [{
+        query: QUERY_WORKGROUP,
+        variables: {
+          filter: {
+            ids: [data.leaveWorkgroup.id],
+          }
+        }
+      },
+      {
+        query: QUERY_IS_AUTHORIZED,
+        variables: {
+          action: 'update',
+          object: {
+            workgroupId: data.leaveWorkgroup.id,
+          }
+        }
+      }]
+    }
+  });
 }
 
 const MUTATION_CLOSE_WORKGROUP = gql`

client/src/gql/queries/authorization.tsx

@@ -0,0 +1,19 @@
+import { gql, useQuery } from '@apollo/client';
+import { useGraphQLData } from './helper';
+
+export const QUERY_IS_AUTHORIZED = gql`
+  query isAuthorized($action: String!, $object: AuthorizationObject!) {
+    isAuthorized(action: $action, object: $object)
+  }
+`;
+
+export function useIsAuthorizedQuery(options = {}) {
+  return useQuery(QUERY_IS_AUTHORIZED, options);
+}
+
+export function useIsAuthorized(options = {}, defaultValue = false) {
+  const { data, loading, error } = useGraphQLData<boolean>(
+    QUERY_IS_AUTHORIZED, 'isAuthorized', defaultValue, options
+  );
+  return { isAuthorized: data, loading, error };
+}