Upload Workspace logo during onboarding (#542)

* Upload image

* Upload image

* Fix tests

* Remove pictures from seeds

* Fix storybook

* Fix storybook

* Fix storybook

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

@@ -10,7 +10,7 @@ import {
   useUploadProfilePictureMutation,
 } from '~/generated/graphql';
 
-export function PictureUploader() {
+export function ProfilePictureUploader() {
   const [uploadPicture] = useUploadProfilePictureMutation();
   const [removePicture] = useRemoveProfilePictureMutation();
   const [currentUser] = useRecoilState(currentUserState);

front/src/modules/settings/workspace/components/WorkspaceLogoUploader.tsx

@@ -0,0 +1,44 @@
+import { getOperationName } from '@apollo/client/utilities';
+import { useRecoilState } from 'recoil';
+
+import { currentUserState } from '@/auth/states/currentUserState';
+import { ImageInput } from '@/ui/components/inputs/ImageInput';
+import { GET_CURRENT_USER } from '@/users/queries';
+import { getImageAbsoluteURI } from '@/users/utils/getProfilePictureAbsoluteURI';
+import {
+  useRemoveWorkspaceLogoMutation,
+  useUploadWorkspaceLogoMutation,
+} from '~/generated/graphql';
+
+export function WorkspaceLogoUploader() {
+  const [uploadLogo] = useUploadWorkspaceLogoMutation();
+  const [removeLogo] = useRemoveWorkspaceLogoMutation();
+  const [currentUser] = useRecoilState(currentUserState);
+  async function onUpload(file: File) {
+    if (!file) {
+      return;
+    }
+    await uploadLogo({
+      variables: {
+        file,
+      },
+      refetchQueries: [getOperationName(GET_CURRENT_USER) ?? ''],
+    });
+  }
+
+  async function onRemove() {
+    await removeLogo({
+      refetchQueries: [getOperationName(GET_CURRENT_USER) ?? ''],
+    });
+  }
+
+  return (
+    <ImageInput
+      picture={getImageAbsoluteURI(
+        currentUser?.workspaceMember?.workspace.logo,
+      )}
+      onUpload={onUpload}
+      onRemove={onRemove}
+    />
+  );
+}

front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
 import { currentUserState } from '@/auth/states/currentUserState';
-import { mockedUsersData } from '~/testing/mock-data/users';
+import { getImageAbsoluteURI } from '@/users/utils/getProfilePictureAbsoluteURI';
 
 import NavCollapseButton from './NavCollapseButton';
 
@@ -50,14 +50,17 @@ function NavWorkspaceButton() {
   const currentUser = useRecoilValue(currentUserState);
 
   const currentWorkspace = currentUser?.workspaceMember?.workspace;
+  const DEFAULT_LOGO =
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAACb0lEQVR4nO2VO4taQRTHr3AblbjxEVlwCwVhg7BoqqCIjy/gAyyFWNlYBOxsfH0KuxgQGwXRUkGuL2S7i1barGAgiwbdW93SnGOc4BonPiKahf3DwXFmuP/fPM4ZlvmlTxAhCBdzHnEQWYiv7Mr4C3NeuVYhQYDPzOUUQgDLBQGcLHNhvQK8DACPx8PTxiqVyvISG43GbyaT6Qfpn06n0m63e/tPAPF4vJ1MJu8kEsnWTCkWi1yr1RKGw+GDRqPBOTfr44vFQvD7/Q/lcpmaaVQAr9fLp1IpO22c47hGOBz+MB6PH+Vy+VYDAL8qlUoGtVotzOfzq4MAgsHgE/6KojiQyWR/bKVSqbSszHFM8Pl8z1YK48JsNltCOBwOnrYLO+8AAIjb+nHbycoTiUQfDJ7tFq4YAHiVSmXBxcD41u8flQU8z7fhzO0r83atVns3Go3u9Xr9x0O/RQXo9/tsIBBg6vX606a52Wz+bZ7P5/WwG29gxSJzhKgA6XTaDoFNF+krFAocmC//4yWEcSf2wTm7mCO19xFgSsKOLI16vV7b7XY7mRNoLwA0JymJ5uQIzgIAuX5PzDElT2m+E8BqtQ4ymcx7Yq7T6a6ZE4sKgOadTucaCwkxp1UzlEKh0GDxIXOwDWHAdi6Xe3swQDQa/Q7mywoolUpvsaptymazDWKxmBHTlWXZm405BFZoNpuGgwEmk4mE2SGtVivii4f1AO7J3ZopkQCQj7Ar1FeRChCJRJzVapX6DKNIfSc1Ax+wtQWQ55h6bH8FWDfYV4fO3wlwDr0C/BcADYiTPCxHqIEA2QsCZAkAKnRGkMbKN/sTX5YHPQ1e7SkAAAAASUVORK5CYII=';
 
   return (
     <StyledContainer>
       <LogoAndNameContainer>
         <StyledLogo
           logo={
-            currentWorkspace?.logo ??
-            mockedUsersData[0].workspaceMember.workspace.logo
+            currentWorkspace?.logo
+              ? getImageAbsoluteURI(currentWorkspace.logo)
+              : DEFAULT_LOGO
           }
         ></StyledLogo>
         <StyledName>{currentWorkspace?.displayName ?? 'Twenty'}</StyledName>

front/src/modules/workspace/queries/update.ts

@@ -10,3 +10,17 @@ export const UPDATE_WORKSPACE = gql`
     }
   }
 `;
+
+export const UPDATE_WORKSPACE_LOGO = gql`
+  mutation UploadWorkspaceLogo($file: Upload!) {
+    uploadWorkspaceLogo(file: $file)
+  }
+`;
+
+export const REMOVE_WORKSPACE_LOGO = gql`
+  mutation RemoveWorkspaceLogo {
+    updateWorkspace(data: { logo: { set: null } }) {
+      id
+    }
+  }
+`;