Fix KeyboardShortcut menu, person upload picture (#2669)

* Fix KeyboardShortcut menu, person upload picture * Fixes
2023-11-23 13:44:54 +01:00
parent 9c4f402102
commit 9dabe44d0f
16 changed files with 168 additions and 35 deletions
--- a/front/src/effect-components/PageChangeEffect.tsx
+++ b/front/src/effect-components/PageChangeEffect.tsx
@ -111,19 +111,31 @@ export const PageChangeEffect = () => {

    switch (true) {
      case isMatchingLocation(AppPath.RecordTablePage): {
-        setHotkeyScope(TableHotkeyScope.Table, { goto: true });
+        setHotkeyScope(TableHotkeyScope.Table, {
+          goto: true,
+          keyboardShortcutMenu: true,
+        });
        break;
      }
      case isMatchingLocation(AppPath.RecordShowPage): {
-        setHotkeyScope(PageHotkeyScope.CompanyShowPage, { goto: true });
+        setHotkeyScope(PageHotkeyScope.CompanyShowPage, {
+          goto: true,
+          keyboardShortcutMenu: true,
+        });
        break;
      }
      case isMatchingLocation(AppPath.OpportunitiesPage): {
-        setHotkeyScope(PageHotkeyScope.OpportunitiesPage, { goto: true });
+        setHotkeyScope(PageHotkeyScope.OpportunitiesPage, {
+          goto: true,
+          keyboardShortcutMenu: true,
+        });
        break;
      }
      case isMatchingLocation(AppPath.TasksPage): {
-        setHotkeyScope(PageHotkeyScope.TaskPage, { goto: true });
+        setHotkeyScope(PageHotkeyScope.TaskPage, {
+          goto: true,
+          keyboardShortcutMenu: true,
+        });
        break;
      }

@ -148,14 +160,20 @@ export const PageChangeEffect = () => {
        break;
      }
      case isMatchingLocation(SettingsPath.ProfilePage, AppBasePath.Settings): {
-        setHotkeyScope(PageHotkeyScope.ProfilePage, { goto: true });
+        setHotkeyScope(PageHotkeyScope.ProfilePage, {
+          goto: true,
+          keyboardShortcutMenu: true,
+        });
        break;
      }
      case isMatchingLocation(
        SettingsPath.WorkspaceMembersPage,
        AppBasePath.Settings,
      ): {
-        setHotkeyScope(PageHotkeyScope.WorkspaceMemberPage, { goto: true });
+        setHotkeyScope(PageHotkeyScope.WorkspaceMemberPage, {
+          goto: true,
+          keyboardShortcutMenu: true,
+        });
        break;
      }
    }
--- a/front/src/generated/graphql.tsx
+++ b/front/src/generated/graphql.tsx
@ -646,6 +646,14 @@ export type GetClientConfigQueryVariables = Exact<{ [key: string]: never; }>;

 export type GetClientConfigQuery = { __typename?: 'Query', clientConfig: { __typename?: 'ClientConfig', signInPrefilled: boolean, debugMode: boolean, authProviders: { __typename?: 'AuthProviders', google: boolean, password: boolean }, telemetry: { __typename?: 'Telemetry', enabled: boolean, anonymizationEnabled: boolean }, support: { __typename?: 'Support', supportDriver: string, supportFrontChatId?: string | null } } };

+export type UploadImageMutationVariables = Exact<{
+  file: Scalars['Upload'];
+  fileFolder?: InputMaybe<FileFolder>;
+}>;
+
+
+export type UploadImageMutation = { __typename?: 'Mutation', uploadImage: string };
+
 export type UserQueryFragmentFragment = { __typename?: 'User', id: string, firstName: string, lastName: string, email: string, canImpersonate: boolean, supportUserHash?: string | null, workspaceMember: { __typename?: 'UserWorkspaceMember', id: string, colorScheme: string, avatarUrl?: string | null, locale: string, allowImpersonation: boolean, name: { __typename?: 'UserWorkspaceMemberName', firstName: string, lastName: string } }, defaultWorkspace: { __typename?: 'Workspace', id: string, displayName?: string | null, logo?: string | null, domainName?: string | null, inviteHash?: string | null, allowImpersonation: boolean } };

 export type DeleteUserAccountMutationVariables = Exact<{ [key: string]: never; }>;
@ -1076,6 +1084,38 @@ export function useGetClientConfigLazyQuery(baseOptions?: Apollo.LazyQueryHookOp
 export type GetClientConfigQueryHookResult = ReturnType<typeof useGetClientConfigQuery>;
 export type GetClientConfigLazyQueryHookResult = ReturnType<typeof useGetClientConfigLazyQuery>;
 export type GetClientConfigQueryResult = Apollo.QueryResult<GetClientConfigQuery, GetClientConfigQueryVariables>;
+export const UploadImageDocument = gql`
+    mutation uploadImage($file: Upload!, $fileFolder: FileFolder) {
+  uploadImage(file: $file, fileFolder: $fileFolder)
+}
+    `;
+export type UploadImageMutationFn = Apollo.MutationFunction<UploadImageMutation, UploadImageMutationVariables>;
+
+/**
+ * __useUploadImageMutation__
+ *
+ * To run a mutation, you first call `useUploadImageMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useUploadImageMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [uploadImageMutation, { data, loading, error }] = useUploadImageMutation({
+ *   variables: {
+ *      file: // value for 'file'
+ *      fileFolder: // value for 'fileFolder'
+ *   },
+ * });
+ */
+export function useUploadImageMutation(baseOptions?: Apollo.MutationHookOptions<UploadImageMutation, UploadImageMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<UploadImageMutation, UploadImageMutationVariables>(UploadImageDocument, options);
+      }
+export type UploadImageMutationHookResult = ReturnType<typeof useUploadImageMutation>;
+export type UploadImageMutationResult = Apollo.MutationResult<UploadImageMutation>;
+export type UploadImageMutationOptions = Apollo.BaseMutationOptions<UploadImageMutation, UploadImageMutationVariables>;
 export const DeleteUserAccountDocument = gql`
    mutation DeleteUserAccount {
  deleteUser {
--- a/front/src/modules/command-menu/components/CommandMenu.tsx
+++ b/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
+                  }
                />
              )}
            />
--- a/front/src/modules/command-menu/hooks/useCommandMenu.ts
+++ b/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,
  };
--- a/front/src/modules/favorites/components/Favorites.tsx
+++ b/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}
--- a/front/src/modules/files/graphql/queries/uploadImage.ts
+++ b/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)
+  }
+`;
--- a/front/src/modules/keyboard-shortcut-menu/components/KeyboardShortcutMenu.tsx
+++ b/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}>
--- a/front/src/modules/object-record/components/RecordShowPage.tsx
+++ b/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) => {
--- a/front/src/modules/object-record/utils/filterAvailableFieldMetadataItem.ts
+++ b/front/src/modules/object-record/utils/filterAvailableFieldMetadataItem.ts
@ -17,5 +17,9 @@ export const filterAvailableFieldMetadataItem = (
    return false;
  }

+  if (fieldMetadataItem.isSystem) {
+    return false;
+  }
+
  return true;
 };
--- a/front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx
+++ b/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}
--- a/front/src/modules/ui/object/record-table/hooks/useRecordTable.ts
+++ b/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,
--- a/front/src/modules/ui/utilities/hotkey/constants/index.ts
+++ b/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 = {
--- a/front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts
+++ b/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,
          },
        };

--- a/front/src/testing/InitializeHotkeyStorybookHook.tsx
+++ b/front/src/testing/InitializeHotkeyStorybookHook.tsx
@ -10,7 +10,7 @@ export const InitializeHotkeyStorybookHookEffect = () => {
    setHotkeyScope(AppHotkeyScope.App, {
      commandMenu: true,
      goto: false,
-      keyboardShortcutMenu: true,
+      keyboardShortcutMenu: false,
    });
  }, [setHotkeyScope]);

--- a/server/src/database/typeorm-seeds/metadata/field-metadata/person.ts
+++ b/server/src/database/typeorm-seeds/metadata/field-metadata/person.ts
@ -183,7 +183,7 @@ export const seedPersonFieldMetadata = async (
          url: 'xLinkUrl',
        },
        description: 'Contact’s X/Twitter account',
-        icon: 'IconUser',
+        icon: 'IconBrandX',
        isNullable: true,
        isSystem: false,
        defaultValue: undefined,
@ -257,7 +257,7 @@ export const seedPersonFieldMetadata = async (
        description: 'Contact’s avatar',
        icon: 'IconFileUpload',
        isNullable: true,
-        isSystem: false,
+        isSystem: true,
        defaultValue: undefined,
      },

--- a/server/src/workspace/workspace-manager/standard-objects/person.ts
+++ b/server/src/workspace/workspace-manager/standard-objects/person.ts
@ -117,6 +117,7 @@ const personMetadata = {
      description: 'Contact’s avatar',
      icon: 'IconFileUpload',
      isNullable: true,
+      isSystem: true,
    },
    // Relations
    {