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

feat: implement user impersonation feature (#976)

Browse Source 
* feat: wip impersonate user

* feat: add ability to impersonate an user

* fix: remove console.log

* fix: unused import
This commit is contained in:
Jérémy M
2023-08-01 00:47:29 +02:00
committed by GitHub
parent b028d9fd2a
commit f111440e00
24 changed files with 547 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
front/src/App.tsx
View File

@ -5,9 +5,11 @@ import { SettingsPath } from '@/types/SettingsPath';
import { DefaultLayout } from '@/ui/layout/components/DefaultLayout';
import { CreateProfile } from '~/pages/auth/CreateProfile';
import { CreateWorkspace } from '~/pages/auth/CreateWorkspace';
import { SignInUp } from '~/pages/auth/SignInUp';
import { Verify } from '~/pages/auth/Verify';
import { Companies } from '~/pages/companies/Companies';
import { CompanyShow } from '~/pages/companies/CompanyShow';
import { Impersonate } from '~/pages/impersonate/Impersonate';
import { Opportunities } from '~/pages/opportunities/Opportunities';
import { People } from '~/pages/people/People';
import { PersonShow } from '~/pages/people/PersonShow';
@ -17,8 +19,6 @@ import { SettingsWorksapce } from '~/pages/settings/SettingsWorkspace';
import { SettingsWorkspaceMembers } from '~/pages/settings/SettingsWorkspaceMembers';
import { AppInternalHooks } from '~/sync-hooks/AppInternalHooks';
import { SignInUp } from './pages/auth/SignInUp';
// TEMP FEATURE FLAG FOR VIEW FIELDS
export const ACTIVATE_VIEW_FIELDS = true;
@ -39,6 +39,7 @@ export function App() {
<Route path={AppPath.PersonShowPage} element={<PersonShow />} />
<Route path={AppPath.CompaniesPage} element={<Companies />} />
<Route path={AppPath.CompanyShowPage} element={<CompanyShow />} />
<Route path={AppPath.Impersonate} element={<Impersonate />} />
<Route path={AppPath.OpportunitiesPage} element={<Opportunities />} />
<Route

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

@ -882,6 +882,7 @@ export type LoginToken = {
export type Mutation = {
__typename?: 'Mutation';
allowImpersonation: WorkspaceMember;
challenge: LoginToken;
createEvent: Analytics;
createOneActivity: Activity;
@ -896,6 +897,7 @@ export type Mutation = {
deleteManyPipelineProgress: AffectedRows;
deleteUserAccount: User;
deleteWorkspaceMember: WorkspaceMember;
impersonate: Verify;
renewToken: AuthTokens;
signUp: LoginToken;
updateOneActivity: Activity;
@ -915,6 +917,11 @@ export type Mutation = {
};
export type MutationAllowImpersonationArgs = {
allowImpersonation: Scalars['Boolean'];
};
export type MutationChallengeArgs = {
email: Scalars['String'];
password: Scalars['String'];
@ -977,6 +984,11 @@ export type MutationDeleteWorkspaceMemberArgs = {
};
export type MutationImpersonateArgs = {
userId: Scalars['String'];
};
export type MutationRenewTokenArgs = {
refreshToken: Scalars['String'];
};
@ -1839,6 +1851,7 @@ export type User = {
authoredActivities?: Maybe<Array<Activity>>;
authoredAttachments?: Maybe<Array<Attachment>>;
avatarUrl?: Maybe<Scalars['String']>;
canImpersonate: Scalars['Boolean'];
comments?: Maybe<Array<Comment>>;
companies?: Maybe<Array<Company>>;
createdAt: Scalars['DateTime'];
@ -1885,6 +1898,7 @@ export type UserOrderByWithRelationInput = {
authoredActivities?: InputMaybe<ActivityOrderByRelationAggregateInput>;
authoredAttachments?: InputMaybe<AttachmentOrderByRelationAggregateInput>;
avatarUrl?: InputMaybe<SortOrder>;
canImpersonate?: InputMaybe<SortOrder>;
comments?: InputMaybe<CommentOrderByRelationAggregateInput>;
companies?: InputMaybe<CompanyOrderByRelationAggregateInput>;
createdAt?: InputMaybe<SortOrder>;
@ -1910,6 +1924,7 @@ export type UserRelationFilter = {
export enum UserScalarFieldEnum {
AvatarUrl = 'avatarUrl',
CanImpersonate = 'canImpersonate',
CreatedAt = 'createdAt',
DeletedAt = 'deletedAt',
Disabled = 'disabled',
@ -1980,6 +1995,7 @@ export type UserUpdateInput = {
authoredActivities?: InputMaybe<ActivityUpdateManyWithoutAuthorNestedInput>;
authoredAttachments?: InputMaybe<AttachmentUpdateManyWithoutAuthorNestedInput>;
avatarUrl?: InputMaybe<Scalars['String']>;
canImpersonate?: InputMaybe<Scalars['Boolean']>;
comments?: InputMaybe<CommentUpdateManyWithoutAuthorNestedInput>;
companies?: InputMaybe<CompanyUpdateManyWithoutAccountOwnerNestedInput>;
createdAt?: InputMaybe<Scalars['DateTime']>;
@ -2019,6 +2035,7 @@ export type UserWhereInput = {
authoredActivities?: InputMaybe<ActivityListRelationFilter>;
authoredAttachments?: InputMaybe<AttachmentListRelationFilter>;
avatarUrl?: InputMaybe<StringNullableFilter>;
canImpersonate?: InputMaybe<BoolFilter>;
comments?: InputMaybe<CommentListRelationFilter>;
companies?: InputMaybe<CompanyListRelationFilter>;
createdAt?: InputMaybe<DateTimeFilter>;
@ -2138,6 +2155,7 @@ export type WorkspaceInviteHashValid = {
export type WorkspaceMember = {
__typename?: 'WorkspaceMember';
allowImpersonation: Scalars['Boolean'];
createdAt: Scalars['DateTime'];
id: Scalars['ID'];
updatedAt: Scalars['DateTime'];
@ -2147,6 +2165,7 @@ export type WorkspaceMember = {
};
export type WorkspaceMemberOrderByWithRelationInput = {
allowImpersonation?: InputMaybe<SortOrder>;
createdAt?: InputMaybe<SortOrder>;
id?: InputMaybe<SortOrder>;
updatedAt?: InputMaybe<SortOrder>;
@ -2155,6 +2174,7 @@ export type WorkspaceMemberOrderByWithRelationInput = {
};
export enum WorkspaceMemberScalarFieldEnum {
AllowImpersonation = 'allowImpersonation',
CreatedAt = 'createdAt',
DeletedAt = 'deletedAt',
Id = 'id',
@ -2173,6 +2193,7 @@ export type WorkspaceMemberWhereInput = {
AND?: InputMaybe<Array<WorkspaceMemberWhereInput>>;
NOT?: InputMaybe<Array<WorkspaceMemberWhereInput>>;
OR?: InputMaybe<Array<WorkspaceMemberWhereInput>>;
allowImpersonation?: InputMaybe<BoolFilter>;
createdAt?: InputMaybe<DateTimeFilter>;
id?: InputMaybe<StringFilter>;
updatedAt?: InputMaybe<DateTimeFilter>;
@ -2321,7 +2342,7 @@ export type VerifyMutationVariables = Exact<{
}>;
export type VerifyMutation = { __typename?: 'Mutation', verify: { __typename?: 'Verify', user: { __typename?: 'User', id: string, email: string, displayName: string, firstName?: string | null, lastName?: string | null, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, workspace: { __typename?: 'Workspace', id: string, domainName?: string | null, displayName?: string | null, logo?: string | null, inviteHash?: string | null } } | null, settings: { __typename?: 'UserSettings', id: string, colorScheme: ColorScheme, locale: string } }, tokens: { __typename?: 'AuthTokenPair', accessToken: { __typename?: 'AuthToken', token: string, expiresAt: string }, refreshToken: { __typename?: 'AuthToken', token: string, expiresAt: string } } } };
export type VerifyMutation = { __typename?: 'Mutation', verify: { __typename?: 'Verify', user: { __typename?: 'User', id: string, email: string, displayName: string, firstName?: string | null, lastName?: string | null, canImpersonate: boolean, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, allowImpersonation: boolean, workspace: { __typename?: 'Workspace', id: string, domainName?: string | null, displayName?: string | null, logo?: string | null, inviteHash?: string | null } } | null, settings: { __typename?: 'UserSettings', id: string, colorScheme: ColorScheme, locale: string } }, tokens: { __typename?: 'AuthTokenPair', accessToken: { __typename?: 'AuthToken', token: string, expiresAt: string }, refreshToken: { __typename?: 'AuthToken', token: string, expiresAt: string } } } };
export type RenewTokenMutationVariables = Exact<{
refreshToken: Scalars['String'];
@ -2330,6 +2351,13 @@ export type RenewTokenMutationVariables = Exact<{
export type RenewTokenMutation = { __typename?: 'Mutation', renewToken: { __typename?: 'AuthTokens', tokens: { __typename?: 'AuthTokenPair', accessToken: { __typename?: 'AuthToken', expiresAt: string, token: string }, refreshToken: { __typename?: 'AuthToken', token: string, expiresAt: string } } } };
export type ImpersonateMutationVariables = Exact<{
userId: Scalars['String'];
}>;
export type ImpersonateMutation = { __typename?: 'Mutation', impersonate: { __typename?: 'Verify', user: { __typename?: 'User', id: string, email: string, displayName: string, firstName?: string | null, lastName?: string | null, canImpersonate: boolean, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, allowImpersonation: boolean, workspace: { __typename?: 'Workspace', id: string, domainName?: string | null, displayName?: string | null, logo?: string | null, inviteHash?: string | null } } | null, settings: { __typename?: 'UserSettings', id: string, colorScheme: ColorScheme, locale: string } }, tokens: { __typename?: 'AuthTokenPair', accessToken: { __typename?: 'AuthToken', token: string, expiresAt: string }, refreshToken: { __typename?: 'AuthToken', token: string, expiresAt: string } } } };
export type GetClientConfigQueryVariables = Exact<{ [key: string]: never; }>;
@ -2563,7 +2591,7 @@ export type SearchActivityQuery = { __typename?: 'Query', searchResults: Array<{
export type GetCurrentUserQueryVariables = Exact<{ [key: string]: never; }>;
export type GetCurrentUserQuery = { __typename?: 'Query', currentUser: { __typename?: 'User', id: string, email: string, displayName: string, firstName?: string | null, lastName?: string | null, avatarUrl?: string | null, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, workspace: { __typename?: 'Workspace', id: string, domainName?: string | null, displayName?: string | null, logo?: string | null, inviteHash?: string | null } } | null, settings: { __typename?: 'UserSettings', id: string, locale: string, colorScheme: ColorScheme } } };
export type GetCurrentUserQuery = { __typename?: 'Query', currentUser: { __typename?: 'User', id: string, email: string, displayName: string, firstName?: string | null, lastName?: string | null, avatarUrl?: string | null, canImpersonate: boolean, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, allowImpersonation: boolean, workspace: { __typename?: 'Workspace', id: string, domainName?: string | null, displayName?: string | null, logo?: string | null, inviteHash?: string | null } } | null, settings: { __typename?: 'UserSettings', id: string, locale: string, colorScheme: ColorScheme } } };
export type GetUsersQueryVariables = Exact<{ [key: string]: never; }>;
@ -2578,6 +2606,13 @@ export type UpdateUserMutationVariables = Exact<{
export type UpdateUserMutation = { __typename?: 'Mutation', updateUser: { __typename?: 'User', id: string, email: string, displayName: string, firstName?: string | null, lastName?: string | null, avatarUrl?: string | null, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, workspace: { __typename?: 'Workspace', id: string, domainName?: string | null, displayName?: string | null, logo?: string | null, inviteHash?: string | null } } | null, settings: { __typename?: 'UserSettings', id: string, locale: string, colorScheme: ColorScheme } } };
export type UpdateAllowImpersonationMutationVariables = Exact<{
allowImpersonation: Scalars['Boolean'];
}>;
export type UpdateAllowImpersonationMutation = { __typename?: 'Mutation', allowImpersonation: { __typename?: 'WorkspaceMember', id: string, allowImpersonation: boolean } };
export type UploadProfilePictureMutationVariables = Exact<{
file: Scalars['Upload'];
}>;
@ -3265,8 +3300,10 @@ export const VerifyDocument = gql`
displayName
firstName
lastName
canImpersonate
workspaceMember {
id
allowImpersonation
workspace {
id
domainName
@ -3362,6 +3399,72 @@ export function useRenewTokenMutation(baseOptions?: Apollo.MutationHookOptions<R
export type RenewTokenMutationHookResult = ReturnType<typeof useRenewTokenMutation>;
export type RenewTokenMutationResult = Apollo.MutationResult<RenewTokenMutation>;
export type RenewTokenMutationOptions = Apollo.BaseMutationOptions<RenewTokenMutation, RenewTokenMutationVariables>;
export const ImpersonateDocument = gql`
mutation Impersonate($userId: String!) {
impersonate(userId: $userId) {
user {
id
email
displayName
firstName
lastName
canImpersonate
workspaceMember {
id
allowImpersonation
workspace {
id
domainName
displayName
logo
inviteHash
}
}
settings {
id
colorScheme
locale
}
}
tokens {
accessToken {
token
expiresAt
}
refreshToken {
token
expiresAt
}
}
}
}
`;
export type ImpersonateMutationFn = Apollo.MutationFunction<ImpersonateMutation, ImpersonateMutationVariables>;
/**
* __useImpersonateMutation__
*
* To run a mutation, you first call `useImpersonateMutation` within a React component and pass it any options that fit your needs.
* When your component renders, `useImpersonateMutation` 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 [impersonateMutation, { data, loading, error }] = useImpersonateMutation({
* variables: {
* userId: // value for 'userId'
* },
* });
*/
export function useImpersonateMutation(baseOptions?: Apollo.MutationHookOptions<ImpersonateMutation, ImpersonateMutationVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useMutation<ImpersonateMutation, ImpersonateMutationVariables>(ImpersonateDocument, options);
}
export type ImpersonateMutationHookResult = ReturnType<typeof useImpersonateMutation>;
export type ImpersonateMutationResult = Apollo.MutationResult<ImpersonateMutation>;
export type ImpersonateMutationOptions = Apollo.BaseMutationOptions<ImpersonateMutation, ImpersonateMutationVariables>;
export const GetClientConfigDocument = gql`
query GetClientConfig {
clientConfig {
@ -4606,8 +4709,10 @@ export const GetCurrentUserDocument = gql`
firstName
lastName
avatarUrl
canImpersonate
workspaceMember {
id
allowImpersonation
workspace {
id
domainName
@ -4743,6 +4848,40 @@ export function useUpdateUserMutation(baseOptions?: Apollo.MutationHookOptions<U
export type UpdateUserMutationHookResult = ReturnType<typeof useUpdateUserMutation>;
export type UpdateUserMutationResult = Apollo.MutationResult<UpdateUserMutation>;
export type UpdateUserMutationOptions = Apollo.BaseMutationOptions<UpdateUserMutation, UpdateUserMutationVariables>;
export const UpdateAllowImpersonationDocument = gql`
mutation UpdateAllowImpersonation($allowImpersonation: Boolean!) {
allowImpersonation(allowImpersonation: $allowImpersonation) {
id
allowImpersonation
}
}
`;
export type UpdateAllowImpersonationMutationFn = Apollo.MutationFunction<UpdateAllowImpersonationMutation, UpdateAllowImpersonationMutationVariables>;
/**
* __useUpdateAllowImpersonationMutation__
*
* To run a mutation, you first call `useUpdateAllowImpersonationMutation` within a React component and pass it any options that fit your needs.
* When your component renders, `useUpdateAllowImpersonationMutation` 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 [updateAllowImpersonationMutation, { data, loading, error }] = useUpdateAllowImpersonationMutation({
* variables: {
* allowImpersonation: // value for 'allowImpersonation'
* },
* });
*/
export function useUpdateAllowImpersonationMutation(baseOptions?: Apollo.MutationHookOptions<UpdateAllowImpersonationMutation, UpdateAllowImpersonationMutationVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useMutation<UpdateAllowImpersonationMutation, UpdateAllowImpersonationMutationVariables>(UpdateAllowImpersonationDocument, options);
}
export type UpdateAllowImpersonationMutationHookResult = ReturnType<typeof useUpdateAllowImpersonationMutation>;
export type UpdateAllowImpersonationMutationResult = Apollo.MutationResult<UpdateAllowImpersonationMutation>;
export type UpdateAllowImpersonationMutationOptions = Apollo.BaseMutationOptions<UpdateAllowImpersonationMutation, UpdateAllowImpersonationMutationVariables>;
export const UploadProfilePictureDocument = gql`
mutation UploadProfilePicture($file: Upload!) {
uploadProfilePicture(file: $file)

44
front/src/modules/auth/queries/update.ts
View File

@ -39,8 +39,10 @@ export const VERIFY = gql`
displayName
firstName
lastName
canImpersonate
workspaceMember {
id
allowImpersonation
workspace {
id
domainName
@ -85,3 +87,45 @@ export const RENEW_TOKEN = gql`
}
}
`;
// TODO: Fragments should be used instead of duplicating the user fields !
export const IMPERSONATE = gql`
mutation Impersonate($userId: String!) {
impersonate(userId: $userId) {
user {
id
email
displayName
firstName
lastName
canImpersonate
workspaceMember {
id
allowImpersonation
workspace {
id
domainName
displayName
logo
inviteHash
}
}
settings {
id
colorScheme
locale
}
}
tokens {
accessToken {
token
expiresAt
}
refreshToken {
token
expiresAt
}
}
}
}
`;

39
front/src/modules/settings/profile/components/ToggleField.tsx Normal file
View File

@ -0,0 +1,39 @@
import { useRecoilValue } from 'recoil';
import { currentUserState } from '@/auth/states/currentUserState';
import { Toggle } from '@/ui/input/toggle/components/Toggle';
import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar';
import { useUpdateAllowImpersonationMutation } from '~/generated/graphql';
export function ToggleField() {
const { enqueueSnackBar } = useSnackBar();
const currentUser = useRecoilValue(currentUserState);
const [updateAllowImpersonation] = useUpdateAllowImpersonationMutation();
async function handleChange(value: boolean) {
try {
const { data, errors } = await updateAllowImpersonation({
variables: {
allowImpersonation: value,
},
});
if (errors || !data?.allowImpersonation) {
throw new Error('Error while updating user');
}
} catch (err: any) {
enqueueSnackBar(err?.message, {
variant: 'error',
});
}
}
return (
<Toggle
value={currentUser?.workspaceMember?.allowImpersonation}
onChange={handleChange}
/>
);
}

3
front/src/modules/types/AppPath.ts
View File

@ -17,4 +17,7 @@ export enum AppPath {
PersonShowPage = '/person/:personId',
OpportunitiesPage = '/opportunities',
SettingsCatchAll = `/settings/*`,
// Impersonate
Impersonate = '/impersonate/:userId',
}

63
front/src/modules/ui/input/toggle/components/Toggle.tsx Normal file
View File

@ -0,0 +1,63 @@
import React, { useEffect, useState } from 'react';
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
type ContainerProps = {
isOn: boolean;
color?: string;
};
const Container = styled.div<ContainerProps>`
align-items: center;
background-color: ${({ theme, isOn, color }) =>
isOn ? color ?? theme.color.blue : theme.background.quaternary};
border-radius: 10px;
cursor: pointer;
display: flex;
height: 20px;
transition: background-color 0.3s ease;
width: 32px;
`;
const Circle = styled(motion.div)`
background-color: #fff;
border-radius: 50%;
height: 16px;
width: 16px;
`;
const circleVariants = {
on: { x: 14 },
off: { x: 2 },
};
export type ToggleProps = {
value?: boolean;
onChange?: (value: boolean) => void;
color?: string;
};
export function Toggle({ value, onChange, color }: ToggleProps) {
const [isOn, setIsOn] = useState(value ?? false);
function handleChange() {
setIsOn(!isOn);
if (onChange) {
onChange(!isOn);
}
}
useEffect(() => {
if (value !== isOn) {
setIsOn(value ?? false);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [value]);
return (
<Container onClick={handleChange} isOn={isOn} color={color}>
<Circle animate={isOn ? 'on' : 'off'} variants={circleVariants} />
</Container>
);
}

14
front/src/modules/ui/typography/components/H2Title.tsx
View File

@ -3,6 +3,7 @@ import styled from '@emotion/styled';
type Props = {
title: string;
description?: string;
addornment?: React.ReactNode;
};
const StyledContainer = styled.div`
@ -11,6 +12,12 @@ const StyledContainer = styled.div`
margin-bottom: ${({ theme }) => theme.spacing(4)};
`;
const StyledTitleContainer = styled.div`
align-items: center;
display: flex;
justify-content: space-between;
`;
const StyledTitle = styled.h2`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.md};
@ -26,10 +33,13 @@ const StyledDescription = styled.h3`
margin-top: ${({ theme }) => theme.spacing(3)};
`;
export function H2Title({ title, description }: Props) {
export function H2Title({ title, description, addornment }: Props) {
return (
<StyledContainer>
<StyledTitle>{title}</StyledTitle>
<StyledTitleContainer>
<StyledTitle>{title}</StyledTitle>
{addornment}
</StyledTitleContainer>
{description && <StyledDescription>{description}</StyledDescription>}
</StyledContainer>
);

2
front/src/modules/users/queries/index.ts
View File

@ -10,8 +10,10 @@ export const GET_CURRENT_USER = gql`
firstName
lastName
avatarUrl
canImpersonate
workspaceMember {
id
allowImpersonation
workspace {
id
domainName

9
front/src/modules/users/queries/update.ts
View File

@ -28,6 +28,15 @@ export const UPDATE_USER = gql`
}
`;
export const UPDATE_ALLOW_IMPERONATION = gql`
mutation UpdateAllowImpersonation($allowImpersonation: Boolean!) {
allowImpersonation(allowImpersonation: $allowImpersonation) {
id
allowImpersonation
}
}
`;
export const UPDATE_PROFILE_PICTURE = gql`
mutation UploadProfilePicture($file: Upload!) {
uploadProfilePicture(file: $file)

57
front/src/pages/impersonate/Impersonate.tsx Normal file
View File

@ -0,0 +1,57 @@
import { useCallback, useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useRecoilState, useSetRecoilState } from 'recoil';
import { useIsLogged } from '@/auth/hooks/useIsLogged';
import { currentUserState } from '@/auth/states/currentUserState';
import { tokenPairState } from '@/auth/states/tokenPairState';
import { useImpersonateMutation } from '~/generated/graphql';
import { AppPath } from '../../modules/types/AppPath';
import { isNonEmptyString } from '../../utils/isNonEmptyString';
export function Impersonate() {
const navigate = useNavigate();
const { userId } = useParams();
const [currentUser, setCurrentUser] = useRecoilState(currentUserState);
const setTokenPair = useSetRecoilState(tokenPairState);
const [impersonate] = useImpersonateMutation();
const isLogged = useIsLogged();
const handleImpersonate = useCallback(async () => {
if (!isNonEmptyString(userId)) {
return;
}
const impersonateResult = await impersonate({
variables: { userId },
});
if (impersonateResult.errors) {
throw impersonateResult.errors;
}
if (!impersonateResult.data?.impersonate) {
throw new Error('No impersonate result');
}
setCurrentUser(impersonateResult.data?.impersonate.user);
setTokenPair(impersonateResult.data?.impersonate.tokens);
return impersonateResult.data?.impersonate;
}, [userId, impersonate, setCurrentUser, setTokenPair]);
useEffect(() => {
if (isLogged && currentUser?.canImpersonate && isNonEmptyString(userId)) {
handleImpersonate();
} else {
// User is not allowed to impersonate or not logged in
navigate(AppPath.Index);
}
}, [userId, currentUser, isLogged, handleImpersonate, navigate]);
return <></>;
}

8
front/src/pages/settings/SettingsProfile.tsx
View File

@ -4,6 +4,7 @@ import { DeleteAccount } from '@/settings/profile/components/DeleteAccount';
import { EmailField } from '@/settings/profile/components/EmailField';
import { NameFields } from '@/settings/profile/components/NameFields';
import { ProfilePictureUploader } from '@/settings/profile/components/ProfilePictureUploader';
import { ToggleField } from '@/settings/profile/components/ToggleField';
import { IconSettings } from '@/ui/icon';
import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
import { Section } from '@/ui/section/components/Section';
@ -44,6 +45,13 @@ export function SettingsProfile() {
/>
<EmailField />
</Section>
<Section>
<H2Title
title="Support"
addornment={<ToggleField />}
description="Grant Twenty support temporary access to your account so we can troubleshoot problems or recover content on your behalf. You can revoke access at any time."
/>
</Section>
<Section>
<DeleteAccount />
</Section>

8
front/src/testing/mock-data/users.ts
View File

@ -16,9 +16,11 @@ export const mockedUsersData: Array<MockedUser> = [
firstName: 'Charles',
lastName: 'Test',
avatarUrl: null,
canImpersonate: false,
workspaceMember: {
__typename: 'WorkspaceMember',
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
allowImpersonation: true,
workspace: {
__typename: 'Workspace',
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
@ -42,9 +44,11 @@ export const mockedUsersData: Array<MockedUser> = [
displayName: 'Felix Test',
firstName: 'Felix',
lastName: 'Test',
canImpersonate: false,
workspaceMember: {
__typename: 'WorkspaceMember',
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
allowImpersonation: true,
workspace: {
__typename: 'Workspace',
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
@ -72,9 +76,11 @@ export const mockedOnboardingUsersData: Array<MockedUser> = [
firstName: '',
lastName: '',
avatarUrl: null,
canImpersonate: false,
workspaceMember: {
__typename: 'WorkspaceMember',
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
allowImpersonation: true,
workspace: {
__typename: 'Workspace',
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
@ -99,9 +105,11 @@ export const mockedOnboardingUsersData: Array<MockedUser> = [
firstName: '',
lastName: '',
avatarUrl: null,
canImpersonate: false,
workspaceMember: {
__typename: 'WorkspaceMember',
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
allowImpersonation: true,
workspace: {
__typename: 'Workspace',
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',