Remove MockMode mocking apollo queries + Add profile picture image upload during onboarding (#539)

* Remove MockMode mocking apollo queries + Add profile picture image upload

* lower line code coverage until we have tests on hotkyes

front/src/pages/auth/CreateProfile.tsx

@@ -9,12 +9,14 @@ import { SubTitle } from '@/auth/components/ui/SubTitle';
 import { Title } from '@/auth/components/ui/Title';
 import { useOnboardingStatus } from '@/auth/hooks/useOnboardingStatus';
 import { currentUserState } from '@/auth/states/currentUserState';
+import { isMockModeState } from '@/auth/states/isMockModeState';
 import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';
+import { useHotkeysScopeOnMountOnly } from '@/hotkeys/hooks/useHotkeysScopeOnMountOnly';
 import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
+import { NameFields } from '@/settings/profile/components/NameFields';
+import { PictureUploader } from '@/settings/profile/components/PictureUploader';
 import { MainButton } from '@/ui/components/buttons/MainButton';
-import { ImageInput } from '@/ui/components/inputs/ImageInput';
-import { TextInput } from '@/ui/components/inputs/TextInput';
 import { SubSectionTitle } from '@/ui/components/section-titles/SubSectionTitle';
 import { GET_CURRENT_USER } from '@/users/queries';
 import { useUpdateUserMutation } from '~/generated/graphql';
@@ -36,16 +38,13 @@ const StyledButtonContainer = styled.div`
   width: 200px;
 `;
 
-const StyledComboInputContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  > * + * {
-    margin-left: ${({ theme }) => theme.spacing(4)};
-  }
-`;
-
 export function CreateProfile() {
+  useHotkeysScopeOnMountOnly({
+    scope: InternalHotkeysScope.CreateProfile,
+    customScopes: { 'command-menu': false, goto: false },
+  });
   const navigate = useNavigate();
+  const [, setMockMode] = useRecoilState(isMockModeState);
   const onboardingStatus = useOnboardingStatus();
 
   const [currentUser] = useRecoilState(currentUserState);
@@ -94,15 +93,16 @@ export function CreateProfile() {
     () => {
       handleCreate();
     },
-    InternalHotkeysScope.Modal,
+    InternalHotkeysScope.CreateProfile,
     [handleCreate],
   );
 
   useEffect(() => {
+    setMockMode(true);
     if (onboardingStatus !== OnboardingStatus.OngoingProfileCreation) {
       navigate('/');
     }
-  }, [onboardingStatus, navigate]);
+  }, [onboardingStatus, navigate, setMockMode]);
 
   return (
     <>
@@ -111,29 +111,18 @@ export function CreateProfile() {
       <StyledContentContainer>
         <StyledSectionContainer>
           <SubSectionTitle title="Picture" />
-          <ImageInput picture={null} disabled />
+          <PictureUploader />
         </StyledSectionContainer>
         <StyledSectionContainer>
           <SubSectionTitle
             title="Name"
             description="Your name as it will be displayed on the app"
           />
-          <StyledComboInputContainer>
-            <TextInput
-              label="First Name"
-              value={firstName}
-              placeholder="Tim"
-              onChange={setFirstName}
-              fullWidth
-            />
-            <TextInput
-              label="Last Name"
-              value={lastName}
-              placeholder="Cook"
-              onChange={setLastName}
-              fullWidth
-            />
-          </StyledComboInputContainer>
+          <NameFields
+            autoSave={false}
+            onFirstNameUpdate={setFirstName}
+            onLastNameUpdate={setLastName}
+          />
         </StyledSectionContainer>
       </StyledContentContainer>
       <StyledButtonContainer>

front/src/pages/auth/CreateWorkspace.tsx

@@ -2,11 +2,14 @@ import { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { getOperationName } from '@apollo/client/utilities';
 import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
 
 import { SubTitle } from '@/auth/components/ui/SubTitle';
 import { Title } from '@/auth/components/ui/Title';
 import { useOnboardingStatus } from '@/auth/hooks/useOnboardingStatus';
+import { isMockModeState } from '@/auth/states/isMockModeState';
 import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';
+import { useHotkeysScopeOnMountOnly } from '@/hotkeys/hooks/useHotkeysScopeOnMountOnly';
 import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 import { MainButton } from '@/ui/components/buttons/MainButton';
@@ -34,6 +37,11 @@ const StyledButtonContainer = styled.div`
 `;
 
 export function CreateWorkspace() {
+  useHotkeysScopeOnMountOnly({
+    scope: InternalHotkeysScope.CreateWokspace,
+    customScopes: { 'command-menu': false, goto: false },
+  });
+  const [, setMockMode] = useRecoilState(isMockModeState);
   const navigate = useNavigate();
   const onboardingStatus = useOnboardingStatus();
 
@@ -74,15 +82,16 @@ export function CreateWorkspace() {
     () => {
       handleCreate();
     },
-    InternalHotkeysScope.Modal,
+    InternalHotkeysScope.CreateWokspace,
     [handleCreate],
   );
 
   useEffect(() => {
+    setMockMode(true);
     if (onboardingStatus !== OnboardingStatus.OngoingWorkspaceCreation) {
       navigate('/auth/create/profile');
     }
-  }, [onboardingStatus, navigate]);
+  }, [onboardingStatus, navigate, setMockMode]);
 
   return (
     <>

front/src/pages/auth/Index.tsx

@@ -13,6 +13,7 @@ import { authFlowUserEmailState } from '@/auth/states/authFlowUserEmailState';
 import { isMockModeState } from '@/auth/states/isMockModeState';
 import { authProvidersState } from '@/client-config/states/authProvidersState';
 import { isDemoModeState } from '@/client-config/states/isDemoModeState';
+import { useHotkeysScopeOnMountOnly } from '@/hotkeys/hooks/useHotkeysScopeOnMountOnly';
 import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 import { MainButton } from '@/ui/components/buttons/MainButton';
@@ -32,6 +33,10 @@ const StyledFooterNote = styled(FooterNote)`
 `;
 
 export function Index() {
+  useHotkeysScopeOnMountOnly({
+    scope: InternalHotkeysScope.AuthIndex,
+    customScopes: { 'command-menu': false, goto: false },
+  });
   const navigate = useNavigate();
   const theme = useTheme();
   const [, setMockMode] = useRecoilState(isMockModeState);
@@ -62,7 +67,7 @@ export function Index() {
     () => {
       onPasswordLoginClick();
     },
-    InternalHotkeysScope.Modal,
+    InternalHotkeysScope.AuthIndex,
     [onPasswordLoginClick],
   );
 

front/src/pages/auth/PasswordLogin.tsx

@@ -11,6 +11,7 @@ import { useAuth } from '@/auth/hooks/useAuth';
 import { authFlowUserEmailState } from '@/auth/states/authFlowUserEmailState';
 import { isMockModeState } from '@/auth/states/isMockModeState';
 import { isDemoModeState } from '@/client-config/states/isDemoModeState';
+import { useHotkeysScopeOnMountOnly } from '@/hotkeys/hooks/useHotkeysScopeOnMountOnly';
 import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 import { MainButton } from '@/ui/components/buttons/MainButton';
@@ -50,6 +51,10 @@ const StyledErrorContainer = styled.div`
 `;
 
 export function PasswordLogin() {
+  useHotkeysScopeOnMountOnly({
+    scope: InternalHotkeysScope.PasswordLogin,
+    customScopes: { 'command-menu': false, goto: false },
+  });
   const navigate = useNavigate();
   const [isDemoMode] = useRecoilState(isDemoModeState);
 
@@ -81,7 +86,7 @@ export function PasswordLogin() {
     () => {
       handleLogin();
     },
-    InternalHotkeysScope.Modal,
+    InternalHotkeysScope.PasswordLogin,
     [handleLogin],
   );