Fix Opportunities page bug, make image urls support base64 (#547)

front/src/modules/filters-and-sorts/utils/turnFilterIntoWhereClause.ts

@@ -1,3 +1,5 @@
+import { QueryMode } from '~/generated/graphql';
+
 import { ActiveTableFilter } from '../types/ActiveTableFilter';
 
 export function turnFilterIntoWhereClause(filter: ActiveTableFilter) {
@@ -8,6 +10,7 @@ export function turnFilterIntoWhereClause(filter: ActiveTableFilter) {
           return {
             [filter.field]: {
               contains: filter.value,
+              mode: QueryMode.Insensitive,
             },
           };
         case 'does-not-contain':
@@ -15,6 +18,7 @@ export function turnFilterIntoWhereClause(filter: ActiveTableFilter) {
             [filter.field]: {
               not: {
                 contains: filter.value,
+                mode: QueryMode.Insensitive,
               },
             },
           };

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

@@ -4,7 +4,7 @@ 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 { getImageAbsoluteURIOrBase64 } from '@/users/utils/getProfilePictureAbsoluteURI';
 import {
   useRemoveProfilePictureMutation,
   useUploadProfilePictureMutation,
@@ -39,7 +39,7 @@ export function ProfilePictureUploader() {
 
   return (
     <ImageInput
-      picture={getImageAbsoluteURI(currentUser?.avatarUrl)}
+      picture={getImageAbsoluteURIOrBase64(currentUser?.avatarUrl)}
       onUpload={onUpload}
       onRemove={onRemove}
     />

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

@@ -4,7 +4,7 @@ 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 { getImageAbsoluteURIOrBase64 } from '@/users/utils/getProfilePictureAbsoluteURI';
 import {
   useRemoveWorkspaceLogoMutation,
   useUploadWorkspaceLogoMutation,
@@ -34,7 +34,7 @@ export function WorkspaceLogoUploader() {
 
   return (
     <ImageInput
-      picture={getImageAbsoluteURI(
+      picture={getImageAbsoluteURIOrBase64(
         currentUser?.workspaceMember?.workspace.logo,
       )}
       onUpload={onUpload}

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 { getImageAbsoluteURI } from '@/users/utils/getProfilePictureAbsoluteURI';
+import { getImageAbsoluteURIOrBase64 } from '@/users/utils/getProfilePictureAbsoluteURI';
 
 import NavCollapseButton from './NavCollapseButton';
 
@@ -59,7 +59,7 @@ function NavWorkspaceButton() {
         <StyledLogo
           logo={
             currentWorkspace?.logo
-              ? getImageAbsoluteURI(currentWorkspace.logo)
+              ? getImageAbsoluteURIOrBase64(currentWorkspace.logo)
               : DEFAULT_LOGO
           }
         ></StyledLogo>

front/src/modules/users/utils/getProfilePictureAbsoluteURI.ts

@@ -1,5 +1,10 @@
-export function getImageAbsoluteURI(imageRelativePath?: string | null) {
+export function getImageAbsoluteURIOrBase64(imageUrl?: string | null) {
-  return imageRelativePath
+  if (!imageUrl) {
-    ? `${process.env.REACT_APP_FILES_URL}/${imageRelativePath}`
+    return null;
-    : null;
+  }
+
+  if (imageUrl?.startsWith('data:')) {
+    return imageUrl;
+  }
+  return `${process.env.REACT_APP_FILES_URL}/${imageUrl}`;
 }

front/src/modules/workspace/components/WorkspaceMemberCard.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 import { Avatar } from '@/users/components/Avatar';
-import { getImageAbsoluteURI } from '@/users/utils/getProfilePictureAbsoluteURI';
+import { getImageAbsoluteURIOrBase64 } from '@/users/utils/getProfilePictureAbsoluteURI';
 import { User } from '~/generated/graphql';
 
 const StyledContainer = styled.div`
@@ -48,7 +48,9 @@ export function WorkspaceMemberCard({ workspaceMember }: OwnProps) {
     <StyledContainer>
       <AvatarContainer>
         <Avatar
-          avatarUrl={getImageAbsoluteURI(workspaceMember.user.avatarUrl)}
+          avatarUrl={getImageAbsoluteURIOrBase64(
+            workspaceMember.user.avatarUrl,
+          )}
           placeholder={workspaceMember.user.firstName || ''}
           type="squared"
           size={40}

front/src/pages/opportunities/Opportunities.tsx

@@ -22,7 +22,7 @@ export function Opportunities() {
   const theme = useTheme();
 
   const pipelines = useGetPipelinesQuery();
-  const pipelineId = pipelines.data?.findManyPipeline[0].id;
+  const pipelineId = pipelines.data?.findManyPipeline[0]?.id;
 
   const { initialBoard, items } = useBoard(pipelineId || '');
 

front/src/testing/mock-data/users.ts

@@ -35,7 +35,7 @@ export const mockedUsersData: Array<MockedUser> = [
         id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
         displayName: 'Twenty',
         domainName: 'twenty.com',
-        logo: null,
+        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=',
       },
     },
   },
@@ -54,7 +54,7 @@ export const mockedUsersData: Array<MockedUser> = [
         id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
         displayName: 'Twenty',
         domainName: 'twenty.com',
-        logo: null,
+        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=',
       },
     },
   },