admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix KeyboardShortcut menu, person upload picture (#2669)

Browse Source 
* Fix KeyboardShortcut menu, person upload picture

* Fixes
This commit is contained in:
Charles Bochet
2023-11-23 13:44:54 +01:00
committed by GitHub
parent 9c4f402102
commit 9dabe44d0f
16 changed files with 168 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
front/src/effect-components/PageChangeEffect.tsx
View File

@ -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;
}
}

40
front/src/generated/graphql.tsx
View File

@ -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 {

11
front/src/modules/command-menu/components/CommandMenu.tsx
View File

@ -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
}
/>
)}
/>

13
front/src/modules/command-menu/hooks/useCommandMenu.ts
View File

@ -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,
};

12
front/src/modules/favorites/components/Favorites.tsx
View File

@ -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}

7
front/src/modules/files/graphql/queries/uploadImage.ts Normal file
View File

@ -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)
}
`;

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

@ -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}>

49
front/src/modules/object-record/components/RecordShowPage.tsx
View File

@ -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) => {

4
front/src/modules/object-record/utils/filterAvailableFieldMetadataItem.ts
View File

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

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

@ -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}

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

@ -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,

2
front/src/modules/ui/utilities/hotkey/constants/index.ts
View File

@ -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 = {

2
front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts
View File

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

2
front/src/testing/InitializeHotkeyStorybookHook.tsx
View File

@ -10,7 +10,7 @@ export const InitializeHotkeyStorybookHookEffect = () => {
setHotkeyScope(AppHotkeyScope.App, {
commandMenu: true,
goto: false,
keyboardShortcutMenu: true,
keyboardShortcutMenu: false,
});
}, [setHotkeyScope]);