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

Add profile pictures to people and fix account/workspace deletion (#984)

Browse Source 
* Fix LinkedIn URL not redirecting to the right url

* add avatars for people and seeds

* Fix delete account/workspace

* Add people picture on other pages

* Change style of delete button

* Revert modal to previous size

* Fix tests
This commit is contained in:
Félix Malfait
2023-07-28 15:40:03 -07:00
committed by GitHub
parent 557e56492a
commit 5c376cbabb
24 changed files with 184 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
front/src/modules/activities/components/ActivityRelationPicker.tsx
View File

@ -216,7 +216,12 @@ export function ActivityRelationPicker({ activity }: OwnProps) {
pictureUrl={entity.avatarUrl}
/>
) : (
<PersonChip key={entity.id} name={entity.name} id={entity.id} />
<PersonChip
key={entity.id}
name={entity.name}
id={entity.id}
pictureUrl={entity.avatarUrl ?? ''}
/>
),
)}
</StyledRelationContainer>

8
front/src/modules/people/components/EditablePeopleFullName.tsx
View File

@ -10,7 +10,12 @@ type OwnProps = {
| Partial<
Pick<
Person,
'id' | 'firstName' | 'lastName' | 'displayName' | '_activityCount'
| 'id'
| 'firstName'
| 'lastName'
| 'displayName'
| 'avatarUrl'
| '_activityCount'
>
>
| null
@ -44,6 +49,7 @@ export function EditablePeopleFullName({
<PersonChip
name={`${person?.firstName ?? ''} ${person?.lastName ?? ''}`}
id={person?.id ?? ''}
pictureUrl={person?.avatarUrl ?? ''}
/>
</NoEditModeContainer>
}

1
front/src/modules/people/hooks/useSetPeopleEntityTable.ts
View File

@ -108,6 +108,7 @@ export function useSetPeopleEntityTable() {
lastName: person.lastName ?? null,
commentCount: person._activityCount,
displayName: person.displayName ?? null,
avatarUrl: person.avatarUrl ?? null,
});
}
}

2
front/src/modules/people/queries/select.ts
View File

@ -30,6 +30,7 @@ export const GET_PEOPLE = gql`
displayName
jobTitle
linkedinUrl
avatarUrl
createdAt
_activityCount
company {
@ -69,6 +70,7 @@ export function useFilteredSearchPeopleQuery({
id: entity.id,
entityType: CommentableType.Person,
name: `${entity.firstName} ${entity.lastName}`,
avatarUrl: entity.avatarUrl,
avatarType: 'rounded',
} as CommentableEntityForSelect),
searchFilter,

1
front/src/modules/people/queries/show.ts
View File

@ -14,6 +14,7 @@ export const GET_PERSON = gql`
city
jobTitle
linkedinUrl
avatarUrl
phone
_activityCount
company {

2
front/src/modules/people/states/peopleNamesFamilyState.ts
View File

@ -6,6 +6,7 @@ export const peopleNameCellFamilyState = atomFamily<
lastName: string | null;
commentCount: number | null;
displayName: string | null;
avatarUrl: string | null;
},
string
>({
@ -15,5 +16,6 @@ export const peopleNameCellFamilyState = atomFamily<
lastName: null,
commentCount: null,
displayName: null,
avatarUrl: null,
},
});

6
front/src/modules/people/table/components/EditablePeopleFullNameCell.tsx
View File

@ -13,9 +13,8 @@ export function EditablePeopleFullNameCell() {
const [updatePerson] = useUpdateOnePersonMutation();
const { commentCount, firstName, lastName, displayName } = useRecoilValue(
peopleNameCellFamilyState(currentRowEntityId ?? ''),
);
const { commentCount, firstName, lastName, displayName, avatarUrl } =
useRecoilValue(peopleNameCellFamilyState(currentRowEntityId ?? ''));
return (
<EditablePeopleFullName
@ -25,6 +24,7 @@ export function EditablePeopleFullNameCell() {
firstName,
lastName,
displayName: displayName ?? undefined,
avatarUrl: avatarUrl,
}}
onSubmit={(newFirstValue, newSecondValue) =>
updatePerson({

5
front/src/modules/pipeline/editable-field/components/PipelineProgressPointOfContactEditableField.tsx
View File

@ -10,7 +10,7 @@ import { PipelineProgressPointOfContactPickerFieldEditMode } from './PipelinePro
type OwnProps = {
pipelineProgress: Pick<PipelineProgress, 'id' | 'pointOfContactId'> & {
pointOfContact?: Pick<Person, 'id' | 'displayName'> | null;
pointOfContact?: Pick<Person, 'id' | 'displayName' | 'avatarUrl'> | null;
};
};
@ -36,6 +36,9 @@ export function PipelineProgressPointOfContactEditableField({
<PersonChip
id={pipelineProgress.pointOfContact.id}
name={pipelineProgress.pointOfContact.displayName}
pictureUrl={
pipelineProgress.pointOfContact.avatarUrl ?? undefined
}
/>
) : (
<></>

1
front/src/modules/pipeline/queries/select.ts
View File

@ -43,6 +43,7 @@ export const GET_PIPELINE_PROGRESS = gql`
firstName
lastName
displayName
avatarUrl
}
probability
}

22
front/src/modules/settings/components/SettingsNavbar.tsx
View File

@ -52,17 +52,6 @@ export function SettingsNavbar() {
}
/>
<NavTitle label="Workspace" />
<NavItem
label="Members"
to="/settings/workspace-members"
icon={<IconUsers size={theme.icon.size.md} />}
active={
!!useMatch({
path: useResolvedPath('/settings/workspace-members').pathname,
end: true,
})
}
/>
<NavItem
label="General"
to="/settings/workspace"
@ -74,6 +63,17 @@ export function SettingsNavbar() {
})
}
/>
<NavItem
label="Members"
to="/settings/workspace-members"
icon={<IconUsers size={theme.icon.size.md} />}
active={
!!useMatch({
path: useResolvedPath('/settings/workspace-members').pathname,
end: true,
})
}
/>
<NavTitle label="Other" />
<NavItem
label="Logout"

58
front/src/modules/settings/profile/components/DeleteAccount.tsx Normal file
View File

@ -0,0 +1,58 @@
import { useCallback, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '@/auth/hooks/useAuth';
import { AppPath } from '@/types/AppPath';
import { ButtonVariant } from '@/ui/button/components/Button';
import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
import { useDeleteUserAccountMutation } from '~/generated/graphql';
import { DeleteModal, StyledDeleteButton } from './DeleteModal';
export function DeleteAccount() {
const [isDeleteAccountModalOpen, setIsDeleteAccountModalOpen] =
useState(false);
const [deleteUserAccount] = useDeleteUserAccountMutation();
const { signOut } = useAuth();
const navigate = useNavigate();
const handleLogout = useCallback(() => {
signOut();
navigate(AppPath.SignIn);
}, [signOut, navigate]);
const deleteAccount = async () => {
await deleteUserAccount();
handleLogout();
};
return (
<>
<SubSectionTitle
title="Danger zone"
description="Delete account and all the associated data"
/>
<StyledDeleteButton
onClick={() => setIsDeleteAccountModalOpen(true)}
variant={ButtonVariant.Secondary}
title="Delete account"
/>
<DeleteModal
isOpen={isDeleteAccountModalOpen}
setIsOpen={setIsDeleteAccountModalOpen}
title="Account Deletion"
subtitle={
<>
This action cannot be undone. This will permanently delete your
entire account. <br /> Please type in your email to confirm.
</>
}
handleConfirmDelete={deleteAccount}
deleteButtonText="Delete account"
/>
</>
);
}

16
front/src/modules/settings/profile/components/DeleteModal.tsx
View File

@ -1,4 +1,4 @@
import { useState } from 'react';
import { ReactNode, useState } from 'react';
import styled from '@emotion/styled';
import { AnimatePresence, LayoutGroup } from 'framer-motion';
import { useRecoilValue } from 'recoil';
@ -12,7 +12,7 @@ import { debounce } from '~/utils/debounce';
interface DeleteModalProps {
isOpen: boolean;
title: string;
subtitle: string;
subtitle: ReactNode;
setIsOpen: (val: boolean) => void;
handleConfirmDelete: () => void;
deleteButtonText?: string;
@ -23,6 +23,10 @@ const StyledTitle = styled.div`
font-weight: ${({ theme }) => theme.font.weight.semiBold};
`;
const StyledSubtitle = styled.div`
text-align: center;
`;
const StyledModal = styled(Modal)`
color: ${({ theme }) => theme.font.color.primary};
> * + * {
@ -70,22 +74,18 @@ export function DeleteModal({
250,
);
const errorMessage =
email && !isValidEmail ? 'email provided is not correct' : '';
return (
<AnimatePresence mode="wait">
<LayoutGroup>
<StyledModal isOpen={isOpen}>
<StyledModal isOpen={isOpen} onOutsideClick={() => setIsOpen(!isOpen)}>
<StyledTitle>{title}</StyledTitle>
<div>{subtitle}</div>
<StyledSubtitle>{subtitle}</StyledSubtitle>
<TextInput
value={email}
onChange={handleEmailChange}
placeholder={userEmail}
fullWidth
key={'email-' + userEmail}
error={errorMessage}
/>
<StyledDeleteButton
onClick={handleConfirmDelete}

44
front/src/modules/settings/profile/components/DeleteWorkspace.tsx
View File

@ -5,21 +5,15 @@ import { useAuth } from '@/auth/hooks/useAuth';
import { AppPath } from '@/types/AppPath';
import { ButtonVariant } from '@/ui/button/components/Button';
import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
import {
useDeleteCurrentWorkspaceMutation,
useDeleteUserAccountMutation,
} from '~/generated/graphql';
import { useDeleteCurrentWorkspaceMutation } from '~/generated/graphql';
import { DeleteModal, StyledDeleteButton } from './DeleteModal';
export function DeleteWorkspace() {
const [isDeleteWorkSpaceModalOpen, setIsDeleteWorkSpaceModalOpen] =
useState(false);
const [isDeleteAccountModalOpen, setIsDeleteAccountModalOpen] =
useState(false);
const [deleteCurrentWorkspace] = useDeleteCurrentWorkspaceMutation();
const [deleteUserAccount] = useDeleteUserAccountMutation();
const { signOut } = useAuth();
const navigate = useNavigate();
@ -33,16 +27,6 @@ export function DeleteWorkspace() {
handleLogout();
};
const deleteAccount = async () => {
await deleteUserAccount();
handleLogout();
};
const subtitle = (
type: 'workspace' | 'account',
) => `This action cannot be undone. This will permanently delete your
entire ${type}. Please type in your email to confirm.`;
return (
<>
<SubSectionTitle
@ -55,33 +39,19 @@ export function DeleteWorkspace() {
title="Delete workspace"
/>
<SubSectionTitle
title=""
description="Delete account and all the associated data"
/>
<StyledDeleteButton
onClick={() => setIsDeleteAccountModalOpen(true)}
variant={ButtonVariant.Secondary}
title="Delete account"
/>
<DeleteModal
isOpen={isDeleteWorkSpaceModalOpen}
setIsOpen={setIsDeleteWorkSpaceModalOpen}
title="Workspace Deletion"
subtitle={subtitle('workspace')}
subtitle={
<>
This action cannot be undone. This will permanently delete your
entire workspace. <br /> Please type in your email to confirm.
</>
}
handleConfirmDelete={deleteWorkspace}
deleteButtonText="Delete workspace"
/>
<DeleteModal
isOpen={isDeleteAccountModalOpen}
setIsOpen={setIsDeleteAccountModalOpen}
title="Account Deletion"
subtitle={subtitle('account')}
handleConfirmDelete={deleteAccount}
deleteButtonText="Delete account"
/>
</>
);
}

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

@ -22,7 +22,7 @@ const StyledShowPageSummaryCard = styled.div`
align-items: center;
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(6)};
gap: ${({ theme }) => theme.spacing(3)};
justify-content: center;
padding: ${({ theme }) => theme.spacing(6)} ${({ theme }) => theme.spacing(3)}
${({ theme }) => theme.spacing(3)} ${({ theme }) => theme.spacing(3)};

48
front/src/modules/ui/modal/components/Modal.tsx
View File

@ -1,7 +1,12 @@
import React from 'react';
import React, { useRef } from 'react';
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
import {
ClickOutsideMode,
useListenClickOutside,
} from '@/ui/hooks/useListenClickOutside';
const StyledContainer = styled.div`
align-items: center;
display: flex;
@ -32,6 +37,7 @@ const BackDrop = styled(motion.div)`
type Props = React.PropsWithChildren &
React.ComponentProps<'div'> & {
isOpen?: boolean;
onOutsideClick?: () => void;
};
const modalVariants = {
@ -40,24 +46,36 @@ const modalVariants = {
exit: { opacity: 0 },
};
export function Modal({ isOpen = false, children, ...restProps }: Props) {
export function Modal({
isOpen = false,
children,
onOutsideClick,
...restProps
}: Props) {
const modalRef = useRef(null);
useListenClickOutside({
refs: [modalRef],
callback: () => onOutsideClick?.(),
mode: ClickOutsideMode.absolute,
});
if (!isOpen) {
return null;
}
return (
<>
<BackDrop>
<ModalDiv
layout
initial="hidden"
animate="visible"
exit="exit"
variants={modalVariants}
>
<StyledContainer {...restProps}>{children}</StyledContainer>
</ModalDiv>
</BackDrop>
</>
<BackDrop>
<ModalDiv
layout
initial="hidden"
animate="visible"
exit="exit"
variants={modalVariants}
ref={modalRef}
>
<StyledContainer {...restProps}>{children}</StyledContainer>
</ModalDiv>
</BackDrop>
);
}

5
front/src/modules/ui/table/editable-cell/types/EditableCellURL.tsx
View File

@ -36,10 +36,7 @@ export function EditableCellURL({
loading ? (
<CellSkeleton />
) : (
<RawLink
onClick={(e) => e.stopPropagation()}
href={url ? 'https://' + url : ''}
>
<RawLink onClick={(e) => e.stopPropagation()} href={url ?? ''}>
{url}
</RawLink>
)