Fix KeyboardShortcut menu, person upload picture (#2669)

* Fix KeyboardShortcut menu, person upload picture

* Fixes

front/src/modules/command-menu/components/CommandMenu.tsx

@@ -25,7 +25,8 @@ import {
 } from './CommandMenuStyles';
 
 export const CommandMenu = () => {
-  const { openCommandMenu, closeCommandMenu } = useCommandMenu();
+  const { openCommandMenu, closeCommandMenu, toggleCommandMenu } =
+    useCommandMenu();
   const openActivityRightDrawer = useOpenActivityRightDrawer();
   const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
   const [search, setSearch] = useState('');
@@ -35,7 +36,7 @@ export const CommandMenu = () => {
     'ctrl+k,meta+k',
     () => {
       setSearch('');
-      openCommandMenu();
+      toggleCommandMenu();
     },
     AppHotkeyScope.CommandMenu,
     [openCommandMenu, setSearch],
@@ -154,9 +155,11 @@ export const CommandMenu = () => {
               Icon={() => (
                 <Avatar
                   type="rounded"
-                  avatarUrl={null}
+                  avatarUrl={person.avatarUrl}
                   colorId={person.id}
-                  placeholder={person.displayName}
+                  placeholder={
+                    person.name?.firstName + ' ' + person.name?.lastName
+                  }
                 />
               )}
             />

front/src/modules/command-menu/hooks/useCommandMenu.ts

@@ -9,7 +9,9 @@ import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
 import { Command } from '../types/Command';
 
 export const useCommandMenu = () => {
-  const [, setIsCommandMenuOpened] = useRecoilState(isCommandMenuOpenedState);
+  const [isCommandMenuOpened, setIsCommandMenuOpened] = useRecoilState(
+    isCommandMenuOpenedState,
+  );
   const setCommands = useSetRecoilState(commandMenuCommandsState);
   const {
     setHotkeyScopeAndMemorizePreviousScope,
@@ -26,6 +28,14 @@ export const useCommandMenu = () => {
     goBackToPreviousHotkeyScope();
   };
 
+  const toggleCommandMenu = () => {
+    if (isCommandMenuOpened) {
+      closeCommandMenu();
+    } else {
+      openCommandMenu();
+    }
+  };
+
   const addToCommandMenu = (addCommand: Command[]) => {
     setCommands((prev) => [...prev, ...addCommand]);
   };
@@ -37,6 +47,7 @@ export const useCommandMenu = () => {
   return {
     openCommandMenu,
     closeCommandMenu,
+    toggleCommandMenu,
     addToCommandMenu,
     setToIntitialCommandMenu,
   };

front/src/modules/favorites/components/Favorites.tsx

@@ -30,8 +30,14 @@ export const Favorites = () => {
         draggableItems={
           <>
             {favorites.map((favorite, index) => {
-              const { id, labelIdentifier, avatarUrl, avatarType, link } =
-                favorite;
+              const {
+                id,
+                labelIdentifier,
+                avatarUrl,
+                avatarType,
+                link,
+                recordId,
+              } = favorite;
 
               return (
                 <DraggableItem
@@ -44,7 +50,7 @@ export const Favorites = () => {
                       label={labelIdentifier}
                       Icon={() => (
                         <Avatar
-                          colorId={id}
+                          colorId={recordId}
                           avatarUrl={avatarUrl}
                           type={avatarType}
                           placeholder={labelIdentifier}

front/src/modules/files/graphql/queries/uploadImage.ts

@@ -0,0 +1,7 @@
+import { gql } from '@apollo/client';
+
+export const UPLOAD_IMAGE = gql`
+  mutation uploadImage($file: Upload!, $fileFolder: FileFolder) {
+    uploadImage(file: $file, fileFolder: $fileFolder)
+  }
+`;

front/src/modules/keyboard-shortcut-menu/components/KeyboardShortcutMenu.tsx

@@ -15,7 +15,8 @@ import { KeyboardMenuGroup } from './KeyboardShortcutMenuGroup';
 import { KeyboardMenuItem } from './KeyboardShortcutMenuItem';
 
 export const KeyboardShortcutMenu = () => {
-  const { toggleKeyboardShortcutMenu } = useKeyboardShortcutMenu();
+  const { toggleKeyboardShortcutMenu, closeKeyboardShortcutMenu } =
+    useKeyboardShortcutMenu();
   const isKeyboardShortcutMenuOpened = useRecoilValue(
     isKeyboardShortcutMenuOpenedState,
   );
@@ -28,6 +29,15 @@ export const KeyboardShortcutMenu = () => {
     [toggleKeyboardShortcutMenu],
   );
 
+  useScopedHotkeys(
+    'Esc',
+    () => {
+      closeKeyboardShortcutMenu();
+    },
+    AppHotkeyScope.KeyboardShortcutMenu,
+    [toggleKeyboardShortcutMenu],
+  );
+
   return (
     isKeyboardShortcutMenuOpened && (
       <KeyboardMenuDialog onClose={toggleKeyboardShortcutMenu}>

front/src/modules/object-record/components/RecordShowPage.tsx

@@ -1,5 +1,4 @@
 import { useParams } from 'react-router-dom';
-import { DateTime } from 'luxon';
 import { useRecoilState } from 'recoil';
 
 import { CompanyTeam } from '@/companies/components/CompanyTeam';
@@ -26,6 +25,7 @@ import { PropertyBox } from '@/ui/object/record-inline-cell/property-box/compone
 import { InlineCellHotkeyScope } from '@/ui/object/record-inline-cell/types/InlineCellHotkeyScope';
 import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+import { FileFolder, useUploadImageMutation } from '~/generated/graphql';
 import { getLogoUrlFromDomainName } from '~/utils';
 
 import { useFindOneObjectRecord } from '../hooks/useFindOneObjectRecord';
@@ -59,11 +59,12 @@ export const RecordShowPage = () => {
     },
   });
 
-  const useUpdateOneObjectMutation: () => [(params: any) => any, any] = () => {
-    const { updateOneObject } = useUpdateOneObjectRecord({
-      objectNameSingular,
-    });
+  const [uploadImage] = useUploadImageMutation();
+  const { updateOneObject } = useUpdateOneObjectRecord({
+    objectNameSingular,
+  });
 
+  const useUpdateOneObjectMutation: () => [(params: any) => any, any] = () => {
     const updateEntity = ({
       variables,
     }: {
@@ -126,6 +127,35 @@ export const RecordShowPage = () => {
     objectMetadataItem?.nameSingular ?? '',
   );
 
+  const onUploadPicture = async (file: File) => {
+    if (objectNameSingular !== 'person') {
+      return;
+    }
+
+    const result = await uploadImage({
+      variables: {
+        file,
+        fileFolder: FileFolder.PersonPicture,
+      },
+    });
+
+    const avatarUrl = result?.data?.uploadImage;
+
+    if (!avatarUrl) {
+      return;
+    }
+    if (!updateOneObject) {
+      return;
+    }
+
+    await updateOneObject({
+      idToUpdate: object?.id,
+      input: {
+        avatarUrl,
+      },
+    });
+  };
+
   return (
     <PageContainer>
       <PageTitle title={pageName} />
@@ -156,15 +186,16 @@ export const RecordShowPage = () => {
                 title={recordIdentifiers?.name ?? 'No name'}
                 date={object.createdAt ?? ''}
                 renderTitleEditComponent={() => <></>}
-                avatarType="squared"
+                avatarType={recordIdentifiers?.avatarType ?? 'rounded'}
+                onUploadPicture={
+                  objectNameSingular === 'person' ? onUploadPicture : undefined
+                }
               />
               <PropertyBox extraPadding={true}>
                 {objectMetadataItem &&
                   [...objectMetadataItem.fields]
                     .sort((a, b) =>
-                      DateTime.fromISO(a.createdAt)
-                        .diff(DateTime.fromISO(b.createdAt))
-                        .toMillis(),
+                      a.name === 'name' ? -1 : a.name.localeCompare(b.name),
                     )
                     .filter(filterAvailableFieldMetadataItem)
                     .map((metadataField, index) => {

front/src/modules/object-record/utils/filterAvailableFieldMetadataItem.ts

@@ -17,5 +17,9 @@ export const filterAvailableFieldMetadataItem = (
     return false;
   }
 
+  if (fieldMetadataItem.isSystem) {
+    return false;
+  }
+
   return true;
 };

front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx

@@ -92,17 +92,16 @@ export const ShowPageSummaryCard = ({
     if (e.target.files) onUploadPicture?.(e.target.files[0]);
   };
 
-  // Todo - add back in when we have the ability to upload a picture
-  // const handleAvatarClick = () => {
-  //   inputFileRef?.current?.click?.();
-  // };
+  const handleAvatarClick = () => {
+    inputFileRef?.current?.click?.();
+  };
 
   return (
     <StyledShowPageSummaryCard>
       <StyledAvatarWrapper>
         <Avatar
           avatarUrl={logoOrAvatar}
-          // onClick={onUploadPicture ? handleAvatarClick : undefined}
+          onClick={onUploadPicture ? handleAvatarClick : undefined}
           size="xl"
           colorId={id}
           placeholder={title}

front/src/modules/ui/object/record-table/hooks/useRecordTable.ts

@@ -284,7 +284,10 @@ export const useRecordTable = (props?: useRecordTableProps) => {
     useScopedHotkeys(
       [Key.Escape],
       () => {
-        setHotkeyScope(TableHotkeyScope.Table, { goto: true });
+        setHotkeyScope(TableHotkeyScope.Table, {
+          goto: true,
+          keyboardShortcutMenu: true,
+        });
         disableSoftFocus();
       },
       TableHotkeyScope.TableSoftFocus,

front/src/modules/ui/utilities/hotkey/constants/index.ts

@@ -5,7 +5,7 @@ import { HotkeyScope } from '../types/HotkeyScope';
 export const DEFAULT_HOTKEYS_SCOPE_CUSTOM_SCOPES: CustomHotkeyScopes = {
   commandMenu: true,
   goto: false,
-  keyboardShortcutMenu: true,
+  keyboardShortcutMenu: false,
 };
 
 export const INITIAL_HOTKEYS_SCOPE: HotkeyScope = {

front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts

@@ -55,7 +55,7 @@ export const useSetHotkeyScope = () =>
           customScopes: {
             commandMenu: customScopes?.commandMenu ?? true,
             goto: customScopes?.goto ?? false,
-            keyboardShortcutMenu: customScopes?.keyboardShortcutMenu ?? true,
+            keyboardShortcutMenu: customScopes?.keyboardShortcutMenu ?? false,
           },
         };