2472 v2 settings workspace module (#2532)

* update findOneWorkspaceMember

* profile picture upload is working

* first name and last name working

* support almost working

* remove picture working

* removed unused code

* remove console logs and fix allowImpersonation in FIND_ONE_WORKSPACE_MEMBER_V2

* use useUpdateOneObjectRecord

front/src/modules/object-metadata/hooks/useMapFieldMetadataToGraphQLQuery.ts

@@ -33,16 +33,12 @@ export const useMapFieldMetadataToGraphQLQuery = () => {
       fieldType === 'RELATION' &&
       field.toRelationMetadata?.relationType === 'ONE_TO_MANY'
     ) {
-      console.log({ objectMetadataItems, field });
-
       const relationMetadataItem = objectMetadataItems.find(
         (objectMetadataItem) =>
           objectMetadataItem.id ===
           (field.toRelationMetadata as any)?.fromObjectMetadata?.id,
       );
 
-      console.log({ relationMetadataItem });
-
       return `${field.name}
     {
       id

front/src/modules/object-record/graphql/queries/findOneWorkspaceMember.ts

@@ -8,6 +8,10 @@ export const FIND_ONE_WORKSPACE_MEMBER_V2 = gql`
           id
           firstName
           lastName
+          colorScheme
+          avatarUrl
+          locale
+          allowImpersonation
         }
       }
     }

front/src/modules/object-record/hooks/useUpdateOneObjectRecord.ts

@@ -16,8 +16,6 @@ export const useUpdateOneObjectRecord = ({
     objectNameSingular,
   });
 
-  console.log('update one object');
-
   // TODO: type this with a minimal type at least with Record<string, any>
   const [mutate] = useMutation(updateOneMutation);
 

front/src/modules/settings/profile/components/NameFields.tsx

@@ -1,14 +1,12 @@
 import { useEffect, useState } from 'react';
-import { getOperationName } from '@apollo/client/utilities';
 import styled from '@emotion/styled';
 import debounce from 'lodash.debounce';
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { currentUserState } from '@/auth/states/currentUserState';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+import { useUpdateOneObjectRecord } from '@/object-record/hooks/useUpdateOneObjectRecord';
 import { TextInput } from '@/ui/input/components/TextInput';
-import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
-import { useUpdateUserMutation } from '~/generated/graphql';
 import { logError } from '~/utils/logError';
 
 const StyledComboInputContainer = styled.div`
@@ -31,7 +29,9 @@ export const NameFields = ({
   onLastNameUpdate,
 }: NameFieldsProps) => {
   const currentUser = useRecoilValue(currentUserState);
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+  const [currentWorkspaceMember, setCurrentWorkspaceMember] = useRecoilState(
+    currentWorkspaceMemberState,
+  );
 
   const [firstName, setFirstName] = useState(
     currentWorkspaceMember?.firstName ?? '',
@@ -40,7 +40,10 @@ export const NameFields = ({
     currentWorkspaceMember?.lastName ?? '',
   );
 
-  const [updateUser] = useUpdateUserMutation();
+  const { updateOneObject, objectNotFoundInMetadata } =
+    useUpdateOneObjectRecord({
+      objectNameSingular: 'workspaceMemberV2',
+    });
 
   // TODO: Enhance this with react-web-hook-form (https://www.react-hook-form.com)
   const debouncedUpdate = debounce(async () => {
@@ -52,22 +55,20 @@ export const NameFields = ({
     }
     try {
       if (autoSave) {
-        const { data, errors } = await updateUser({
+        if (!updateOneObject || objectNotFoundInMetadata) {
-          variables: {
+          return;
-            where: {
+        }
-              id: currentUser?.id,
+        await updateOneObject({
-            },
+          idToUpdate: currentWorkspaceMember?.id ?? '',
-            data: {
+          input: {
-              firstName,
+            firstName,
-              lastName,
+            lastName,
-            },
           },
-          refetchQueries: [getOperationName(GET_CURRENT_USER) ?? ''],
         });
 
-        if (errors || !data?.updateUser) {
+        setCurrentWorkspaceMember(
-          throw errors;
+          (current) => ({ ...current, firstName, lastName } as any),
-        }
+        );
       }
     } catch (error) {
       logError(error);

front/src/modules/settings/profile/components/ProfilePictureUploader.tsx

@@ -1,28 +1,31 @@
 import { useState } from 'react';
 import { getOperationName } from '@apollo/client/utilities';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 
-import { currentUserState } from '@/auth/states/currentUserState';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+import { useUpdateOneObjectRecord } from '@/object-record/hooks/useUpdateOneObjectRecord';
 import { ImageInput } from '@/ui/input/components/ImageInput';
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
 import { getImageAbsoluteURIOrBase64 } from '@/users/utils/getProfilePictureAbsoluteURI';
-import {
+import { useUploadProfilePictureMutation } from '~/generated/graphql';
-  useRemoveProfilePictureMutation,
-  useUploadProfilePictureMutation,
-} from '~/generated/graphql';
 
 export const ProfilePictureUploader = () => {
   const [uploadPicture, { loading: isUploading }] =
     useUploadProfilePictureMutation();
-  const [removePicture] = useRemoveProfilePictureMutation();
+
-  const [currentUser] = useRecoilState(currentUserState);
+  const [currentWorkspaceMember, setCurrentWorkspaceMember] = useRecoilState(
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+    currentWorkspaceMemberState,
+  );
 
   const [uploadController, setUploadController] =
     useState<AbortController | null>(null);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
+  const { updateOneObject, objectNotFoundInMetadata } =
+    useUpdateOneObjectRecord({
+      objectNameSingular: 'workspaceMemberV2',
+    });
+
   const handleUpload = async (file: File) => {
     if (!file) {
       return;
@@ -46,6 +49,26 @@ export const ProfilePictureUploader = () => {
 
       setUploadController(null);
       setErrorMessage(null);
+
+      const avatarUrl = result?.data?.uploadProfilePicture;
+
+      if (!avatarUrl) {
+        return;
+      }
+      if (!updateOneObject || objectNotFoundInMetadata) {
+        return;
+      }
+      await updateOneObject({
+        idToUpdate: currentWorkspaceMember?.id ?? '',
+        input: {
+          avatarUrl,
+        },
+      });
+
+      setCurrentWorkspaceMember(
+        (current) => ({ ...current, avatarUrl } as any),
+      );
+
       return result;
     } catch (error) {
       setErrorMessage('An error occured while uploading the picture.');
@@ -60,14 +83,19 @@ export const ProfilePictureUploader = () => {
   };
 
   const handleRemove = async () => {
-    await removePicture({
+    if (!updateOneObject || objectNotFoundInMetadata) {
-      variables: {
+      return;
-        where: {
+    }
-          id: currentUser?.id,
+    await updateOneObject({
-        },
+      idToUpdate: currentWorkspaceMember?.id ?? '',
+      input: {
+        avatarUrl: null,
       },
-      refetchQueries: [getOperationName(GET_CURRENT_USER) ?? ''],
     });
+
+    setCurrentWorkspaceMember(
+      (current) => ({ ...current, avatarUrl: null } as any),
+    );
   };
 
   return (

front/src/modules/settings/profile/components/ToggleField.tsx

@@ -1,28 +1,40 @@
-import { useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+import { useUpdateOneObjectRecord } from '@/object-record/hooks/useUpdateOneObjectRecord';
 import { useSnackBar } from '@/ui/feedback/snack-bar/hooks/useSnackBar';
 import { Toggle } from '@/ui/input/components/Toggle';
-import { useUpdateAllowImpersonationMutation } from '~/generated/graphql';
 
 export const ToggleField = () => {
   const { enqueueSnackBar } = useSnackBar();
 
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+  const [currentWorkspaceMember, setCurrentWorkspaceMember] = useRecoilState(
+    currentWorkspaceMemberState,
+  );
 
-  const [updateAllowImpersonation] = useUpdateAllowImpersonationMutation();
+  const { updateOneObject, objectNotFoundInMetadata } =
+    useUpdateOneObjectRecord({
+      objectNameSingular: 'workspaceMemberV2',
+    });
 
   const handleChange = async (value: boolean) => {
     try {
-      const { data, errors } = await updateAllowImpersonation({
+      if (!updateOneObject || objectNotFoundInMetadata) {
-        variables: {
+        return;
+      }
+      await updateOneObject({
+        idToUpdate: currentWorkspaceMember?.id ?? '',
+        input: {
           allowImpersonation: value,
         },
       });
-
+      setCurrentWorkspaceMember(
-      if (errors || !data?.allowImpersonation) {
+        (current) =>
-        throw new Error('Error while updating user');
+          ({
-      }
+            ...current,
+            allowImpersonation: value,
+          } as any),
+      );
     } catch (err: any) {
       enqueueSnackBar(err?.message, {
         variant: 'error',

front/src/modules/ui/object/field/meta-types/display/components/RelationFieldDisplay.tsx

@@ -6,11 +6,6 @@ import { useRelationField } from '../../hooks/useRelationField';
 export const RelationFieldDisplay = () => {
   const { fieldValue, fieldDefinition } = useRelationField();
 
-  console.log({
-    fieldDefinition,
-    fieldValue,
-  });
-
   const entityChipProps = getEntityChipFromFieldMetadata(
     fieldDefinition,
     fieldValue,

front/src/modules/ui/object/field/meta-types/display/utils/getEntityChipFromFieldMetadata.ts

@@ -18,11 +18,6 @@ export const getEntityChipFromFieldMetadata = (
     entityId: fieldValue?.id,
   };
 
-  console.log({
-    fieldName,
-    fieldValue,
-  });
-
   // TODO: use every
   if (fieldName === 'accountOwner' && fieldValue) {
     chipValue.name = fieldValue.firstName + ' ' + fieldValue.lastName;

front/src/modules/ui/object/field/meta-types/hooks/useRelationField.ts

@@ -22,11 +22,6 @@ export const useRelationField = () => {
     }),
   );
 
-  console.log({
-    fieldDefinition,
-    fieldValue,
-  });
-
   const fieldInitialValue = useFieldInitialValue();
 
   const initialSearchValue = fieldInitialValue?.isEmpty