feat: implement user impersonation feature #976

magrinj · 2023-07-28T13:53:50Z

This pull request introduces the new "User Impersonation" feature. It's an important note that this feature can be seen as a security breach; however, it is an intended functionality, designed to allow specific users to log in and act on behalf of other users, subject to their consent.

Key changes in this PR are as follows:

Impersonate Resolver: A new resolver impersonate is added which accepts a userId and returns the user details along with the corresponding auth tokens. It's important to note that the impersonate resolver checks for user privileges and authorizations before providing the auth tokens.
Allow Impersonation Mutation: A new mutation allowImpersonation has been added, enabling users to decide if they want to permit other users to impersonate their account.
Frontend Update: On the frontend, users can toggle impersonation permission from their settings page.
Impersonation URL Access: Users having 'canImpersonate' privilege can access the URL impersonate/:userId, which will log the user into the account of the user specified in the URL.

Revert to Original User: The user can revert back to their original account by logging out of the impersonated account and logged in again in his own account.

ergomake · 2023-07-28T13:57:44Z

Hi 👋

Here's a preview environment 🚀

https://front-twentyhq-twenty-976.env.ergomake.link

Environment Summary 📑

Container	Source	URL
front	Dockerfile	https://front-twentyhq-twenty-976.env.ergomake.link
server	Dockerfile	https://server-twentyhq-twenty-976.env.ergomake.link
postgres	Dockerfile	[not exposed - internal service]

Here are your environment's logs.

For questions or comments, join Discord.

Click here to disable Ergomake.

front/src/modules/ui/toggle/components/Toggle.tsx

server/src/database/schema.prisma

charlesBochet · 2023-07-31T05:56:54Z

@magrinj We will need to rebase this one, I have renamed SubSectionTitle into H2Title, and re-worked a bit Settings pages this week-end.
We should also have a /impersonate/userId route on the FE

front/src/modules/auth/queries/update.ts

lucasbordeau · 2023-07-31T08:42:53Z

front/src/modules/ui/input/toggle/components/Toggle.tsx

+      setIsOn(value ?? false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);


Why not putting isOn in deps ?

@lucasbordeau Because we only want to update isOn internal state based on value.
Putting isOn in the deps array will trigger run the useEffect when isOn change, and if value is not provided to the component this is going to set an undefined value.

You can handle this condition inside the useEffect, either with an if(isOn) or in the setIsOn((currentIsOn) => ...)

See React doc on this : https://react.dev/reference/react/useEffect#specifying-reactive-dependencies

And Dan Abramov's article on useEffect : https://overreacted.io/a-complete-guide-to-useeffect/#dont-lie-to-react-about-dependencies

front/src/pages/impersonate/Impersonate.tsx

server/src/core/workspace/resolvers/workspace-member.resolver.ts

charlesBochet · 2023-07-31T21:56:56Z

front/src/modules/ui/input/toggle/components/Toggle.tsx

+
+const Circle = styled(motion.div)`
+  background-color: #fff;
+  border-radius: 50%;


@magrinj we should use the theme here!

charlesBochet · 2023-07-31T21:57:00Z

front/src/modules/ui/input/toggle/components/Toggle.tsx

+`;
+
+const Circle = styled(motion.div)`
+  background-color: #fff;


charlesBochet · 2023-07-31T21:57:47Z

front/src/modules/ui/input/toggle/components/Toggle.tsx

+  cursor: pointer;
+  display: flex;
+  height: 20px;
+  transition: background-color 0.3s ease;


we should use them.animation here too

charlesBochet · 2023-07-31T22:45:36Z

front/src/modules/ui/input/toggle/components/Toggle.tsx

+    if (value !== isOn) {
+      setIsOn(value ?? false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps


this seems suspicious to me!

charlesBochet · 2023-07-31T22:45:56Z

front/src/modules/ui/typography/components/H2Title.tsx

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


charlesBochet · 2023-08-01T01:27:36Z

front/src/pages/settings/SettingsProfile.tsx

@@ -44,6 +45,13 @@ export function SettingsProfile() {
            />
            <EmailField />
          </Section>
+          <Section>


The blank space is too big:

This is because both H2Title and Section are adding margin-bottom. I think the one on Section is right. The one on H2Title should be optional

* feat: wip impersonate user * feat: add ability to impersonate an user * fix: remove console.log * fix: unused import

* Add ui/progress-bar stories Co-authored-by: v1b3m <[email protected]> Co-authored-by: RubensRafael <[email protected]> * Add requested changes Co-authored-by: RubensRafael <[email protected]> Co-authored-by: v1b3m <[email protected]> --------- Co-authored-by: v1b3m <[email protected]> Co-authored-by: RubensRafael <[email protected]> Add pull request previews (twentyhq#954) Add ergomake Co-authored-by: Lucas Vieira <[email protected]> [Do not merge] Try ergomake (twentyhq#958) * Try ergomake * Try redeploy Update double cell input width to be fixed (twentyhq#946) Fix double cell input width to be fixed Feat/improve editable cell (twentyhq#959) * Removed isSomeInputInEditMode * Removed console.log * Added a first version of generic cell text * Removed metadata from entity table V1 * Fix * Fix * Fix TWNTY-892 - Add ui/title stories (twentyhq#955) * Add ui/title stories Co-authored-by: RubensRafael <[email protected]> * Add requested changes Co-authored-by: v1b3m <[email protected]> Co-authored-by: RubensRafael <[email protected]> * Fix linter issues Co-authored-by: v1b3m <[email protected]> Co-authored-by: RubensRafael <[email protected]> --------- Co-authored-by: RubensRafael <[email protected]> Co-authored-by: v1b3m <[email protected]> Add Timeline End Icon (twentyhq#945) * -added timeline end icon * - fixed styledDiv in component * - fixed icon size Short variant for filter texts (twentyhq#943) * - added a short variant for filter labels in the filter bar * - fixed tests - moved colon to shortoperand * - fixed formatting TWNTY-895 - Add ui/checkmark stories (twentyhq#960) Add ui/checkmark stories Co-authored-by: v1b3m <[email protected]> Co-authored-by: Thiago Nascimbeni <[email protected]> feat: upload profile picture from google (twentyhq#964) * feat: upload profile picture from google * fix: only add profile picture if user don't have any feat: increase upload size limit (twentyhq#962) eat: create ViewField model (twentyhq#961) * feat: create ViewField model - Created ViewField prisma model - Added ViewField server resolvers for findMany/updateOne - Added getViewFields/updateViewField graphql queries Closes twentyhq#849 * chore: update node version in .nvmrc files feat: implement e2e test for CompanyResolver (twentyhq#944) * feat: wip e2e server test * feat: use github action postgres & use infra for local * feat: company e2e test * feat: add company e2e test for permissions * Simplify server e2e test run * Fix lint --------- Co-authored-by: Charles Bochet <[email protected]> Fix server e2e tests on CI twentyhq#1 Fix server e2e tests on CI twentyhq#2 Fix server e2e tests on CI twentyhq#3 Fix server e2e tests on CI twentyhq#4 Fix server e2e tests on CI twentyhq#5 Added generic relation cell (twentyhq#969) * Added generic relation cell * Deactivated debug * Added default warning * Put back display component * Removed unused types fix: 906 edit avatar style (twentyhq#923) * fix: 906 edit avatar style * fix: 906 add avatar size enum and mapping for font and height * fix: 906 remove unused vars chore: optimize size of front docker image (twentyhq#965) Enable to drag under New button on pipeline (twentyhq#970) feat: Add workspace delete feature (twentyhq#896) * Add workspace delete feature Co-authored-by: v1b3m <[email protected]> * Add fixes and refactors Co-authored-by: v1b3m <[email protected]> * Add more fixes Co-authored-by: v1b3m <[email protected]> * Add requested changes Co-authored-by: v1b3m <[email protected]> * Add workspace delete mutation Co-authored-by: v1b3m <[email protected]> * Complete v1 of deletion Co-authored-by: Benjamin Mayanja <[email protected]> * Revert unwanted changes Co-authored-by: Benjamin Mayanja <[email protected]> Co-authored-by: RubensRafael <[email protected]> * Update debouce import Co-authored-by: v1b3m <[email protected]> Co-authored-by: RubensRafael <[email protected]> * Fix server e2e tests on CI twentyhq#3 * Fix server e2e tests on CI twentyhq#4 * Fix server e2e tests on CI twentyhq#5 * Added generic relation cell (twentyhq#969) * Added generic relation cell * Deactivated debug * Added default warning * Put back display component * Removed unused types * fix: 906 edit avatar style (twentyhq#923) * fix: 906 edit avatar style * fix: 906 add avatar size enum and mapping for font and height * fix: 906 remove unused vars * chore: optimize size of front docker image (twentyhq#965) * Enable to drag under New button on pipeline (twentyhq#970) * Add minor fix Co-authored-by: v1b3m <[email protected]> Co-authored-by: RubensRafael <[email protected]> --------- Co-authored-by: v1b3m <[email protected]> Co-authored-by: RubensRafael <[email protected]> Co-authored-by: Charles Bochet <[email protected]> Co-authored-by: Lucas Bordeau <[email protected]> Co-authored-by: 310387 <[email protected]> Co-authored-by: Lucas Vieira <[email protected]> Co-authored-by: Charles Bochet <[email protected]> feat: rename comment thread into activity (twentyhq#939) * feat: rename commentThread into activity server * feat: rename commentThread into activity front * feat: migration only create tables feat: migration only create tables * Update activities * fix: rebase partial fix * fix: all rebase problems and drop activity target alter * fix: lint * Update migration * Update migration * Fix conflicts * Fix conflicts --------- Co-authored-by: Charles Bochet <[email protected]> Fix storybook tests fix: front not running properly (twentyhq#971) docs: add DatePicker and ImageInput stories (twentyhq#980) Closes twentyhq#979 feat: search activities (twentyhq#972) feat: I can delete my account easily (twentyhq#977) * Add support for account deletion Co-authored-by: v1b3m <[email protected]> * Add more fixes Co-authored-by: Benjamin Mayanja <[email protected]> * Add more fixes Co-authored-by: v1b3m <[email protected]> --------- Co-authored-by: v1b3m <[email protected]> Feat/generic editable cell chip (twentyhq#982) * Added generic relation cell * Deactivated debug * Added default warning * Put back display component * Removed unused types * wip * Renamed to view field * Use new view field structure to have chip working * Finished * Added a temp feature flag chore: Add ui/modal stories (twentyhq#967) * Add ui/modal stories Co-authored-by: Matheus <[email protected]> * Add requested changes Co-authored-by: v1b3m <[email protected]> Co-authored-by: Matheus <[email protected]> * Fix the formatting Co-authored-by: Benjamin Mayanja <[email protected]> Co-authored-by: Matheus <[email protected]> --------- Co-authored-by: Matheus <[email protected]> Co-authored-by: v1b3m <[email protected]> chore: Add ui/tooltip stories (twentyhq#966) * Add ui/tooltip stories Co-authored-by: Thiago Nascimbeni <[email protected]> * Add requested changes Co-authored-by: v1b3m <[email protected]> Co-authored-by: Thiago Nascimbeni <[email protected]> * Fix linting Co-authored-by: v1b3m <[email protected]> Co-authored-by: Thiago Nascimbeni <[email protected]> --------- Co-authored-by: Thiago Nascimbeni <[email protected]> Co-authored-by: v1b3m <[email protected]> Various fixes on table, board, tasks (twentyhq#983) * Misc fixes * Misc fixes * Misc fixes * Fix login Add profile pictures to people and fix account/workspace deletion (twentyhq#984) * 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 Remove empty values from relation picker (twentyhq#986) fix: empty name values in SingleEntitySelectBase Feat/generic editable cell all types (twentyhq#987) * Added generic relation cell * Deactivated debug * Added default warning * Put back display component * Removed unused types * wip * Renamed to view field * Use new view field structure to have chip working * Finished * Added a temp feature flag * Added double text chip cell * Ok * Finished tables * Fixed icon size * Fixed bug on date field * Use icon index * Fix * Fixed naming * Fix * removed file from merge * Fixed tests * Coverage Add dueDate and assignee on notes (twentyhq#988) * Add dueDate and assignee on notes * Fix tests * Fix tests Add fake characters to prevent password managers from filling fields (twentyhq#989) Add ability to properly cast a string, number, null to an integer (twentyhq#990) Inbox task 2 (twentyhq#991) * Add ability to properly cast a string, number, null to an integer * Adding Tab UI component * Only trigger chromatic when asked docs: fix instructions to start projects in the docker setup flow (twentyhq#995) Fix margin on DeleteModal overlay (twentyhq#998) * Fix margin on DeleteModal overlay * Update chromatic ci triggers * Update chromatic ci triggers Changes to commands in search window (twentyhq#996) - changes to commands in search window style: update deactivated state styles in onboarding button (twentyhq#997) [952] style: update deactivated state styles in onboarding button Clean and re-organize post table refactoring (twentyhq#1000) * Clean and re-organize post table refactoring * Fix tests feat: add column resizing (twentyhq#975) * feat: add column resizing Closes twentyhq#817 * Use mouse up and down instead of dragging --------- Co-authored-by: Charles Bochet <[email protected]> Fix table mock mode (twentyhq#1007) Add deploy buttons and clean environment variables (twentyhq#974) * add render.yaml * Clean environment variables --------- Co-authored-by: Charles Bochet <[email protected]> feat: implement user impersonation feature (twentyhq#976) * feat: wip impersonate user * feat: add ability to impersonate an user * fix: remove console.log * fix: unused import Scroll to currently softfocus cell (twentyhq#1008) * - scroll to currently softfocus cell * - moved useEffect to CellSoftFocus component Add tasks page (twentyhq#1015) * Refactor top bar component * Add task page with tabs * Add tasks * Add logic for task status * Fix isoweek definition * Enable click on task * Deduplicate component * Lint --------- Co-authored-by: Charles Bochet <[email protected]> A few polish on tasks (twentyhq#1023) A few polishing on tasks Update chromatic CI trigger Update chromatic CI trigger Rename SIGN_IN_PREFILLED env variable Fix env variables for dev setup (twentyhq#1031) [server] set local setup as default in .env.example (twentyhq#1045) In storybook, I see a ButtonIconGroup component (twentyhq#1039) Add ButtonIconGroup storybook components Co-authored-by: v1b3m <[email protected]> Co-authored-by: RubensRafael <[email protected]> Move trash icon to the top bar of right drawer (twentyhq#1014) * Move trash icon to the top bar of right drawer Co-authored-by: Matheus <[email protected]> * Fix background Co-authored-by: Matheus <[email protected]> * Refactor the code Co-authored-by: Matheus <[email protected]> --------- Co-authored-by: Matheus <[email protected]> Fix hotkeys for tasks page (twentyhq#1034) - fix hotkeys for tasks Fix twentyhq#1038: Logout button should be change to gray (twentyhq#1052) feat: persist resized column widths (twentyhq#1017) * feat: persist resized column widths Closes twentyhq#981 * test: mock company and person view fields Closes twentyhq#710: Add the number of opportunities on each stage (twentyhq#1011) * Add the number of oppurtunities on each stage * Remove excess css properties in Boardcolumn.tsx and use theme * Remove padding from oppurnities counters Sanitize url before fetching favicon and display letter avatar if it can't be retrieved (twentyhq#1035) * Sanitize url before fetching favicon and display letter avatar if it can't be retrieved Co-authored-by: v1b3m <[email protected]> Co-authored-by: RubensRafael <[email protected]> * Priorotise www for apple.com domain Co-authored-by: v1b3m <[email protected]> Co-authored-by: RubensRafael <[email protected]> * Add requested changes Co-authored-by: v1b3m <[email protected]> Co-authored-by: RubensRafael <[email protected]> * Fix the tests Co-authored-by: v1b3m <[email protected]> Co-authored-by: RubensRafael <[email protected]> * Change avatar generation strategy Co-authored-by: v1b3m <[email protected]> Co-authored-by: RubensRafael <[email protected]> --------- Co-authored-by: v1b3m <[email protected]> Co-authored-by: RubensRafael <[email protected]> Fix: positioning of label to rename columns (twentyhq#1051) Fix positioning of label to rename columns Co-authored-by: Mael FOSSO <[email protected]> Fix Avatars no centered (twentyhq#1050) - fix workspace icon now centered - fix profile avatar now centered Feat/filter activity inbox (twentyhq#1032) * Move files * Add filtering for tasks inbox * Add filter dropdown for single entity * Minor * Fill empty button * Refine logic for filter dropdown * remove log * Fix unwanted change * Set current user as default filter * Add avatar on filter * Improve initialization of assignee filter * Add story for Tasks page * Add more stories * Add sotry with no tasks * Improve dates * Enh tests --------- Co-authored-by: Charles Bochet <[email protected]> Refactor: Morph strategy on `PipelineProgress` (twentyhq#1065) * Deprecate pipelineprogress backref on person to improve naming * Remove deprecated point of contact fields * Add company and person entities on pipelineprogress * Migrate data from old progressable to new entity fields * Codegen frontend * Use company Id, deprecate progressableId * Get rid of deprecated progressableId field * Remove deprecated progressableType field from pipeline progress * Remove useless migrations Improve mouse tracking (twentyhq#1061) * Improve mouse tracking * Fix lint * Fix regression on Filters * Fix according to review [PeoplePicker] fix missing avatar in user search dropdown (twentyhq#1069) Fix pipeline performance issue (twentyhq#1070) Remove constraint activity morph relations foreign keys Adding the favorite button favorites schema favorite ability handler favorite module export front end UI front end graphql additions server ability handlers server resolvers and services commits squashed and merged

magrinj linked an issue Jul 28, 2023 that may be closed by this pull request

As admin, I can impersonate users #594

Closed

charlesBochet reviewed Jul 31, 2023

View reviewed changes

front/src/modules/ui/toggle/components/Toggle.tsx Outdated Show resolved Hide resolved

server/src/database/schema.prisma Outdated Show resolved Hide resolved

feat: wip impersonate user

690d0fd

magrinj force-pushed the impersonate branch from 53688f4 to 690d0fd Compare July 31, 2023 06:22

feat: add ability to impersonate an user

ea1d93a

magrinj changed the title ~~feat: wip impersonate user~~ feat: implement user impersonation feature Jul 31, 2023

magrinj marked this pull request as ready for review July 31, 2023 07:58

magrinj requested a review from charlesBochet July 31, 2023 07:58

lucasbordeau reviewed Jul 31, 2023

View reviewed changes

magrinj added 2 commits July 31, 2023 14:52

fix: remove console.log

a032856

fix: unused import

ac9ae31

charlesBochet approved these changes Jul 31, 2023

View reviewed changes

charlesBochet merged commit f111440 into main Jul 31, 2023

charlesBochet deleted the impersonate branch July 31, 2023 22:47

charlesBochet reviewed Aug 1, 2023

View reviewed changes

AdityaPimpalkar pushed a commit to AdityaPimpalkar/twenty that referenced this pull request Aug 3, 2023

feat: implement user impersonation feature (twentyhq#976)

5057f2f

* feat: wip impersonate user * feat: add ability to impersonate an user * fix: remove console.log * fix: unused import

AdityaPimpalkar pushed a commit to AdityaPimpalkar/twenty that referenced this pull request Aug 4, 2023

feat: implement user impersonation feature (twentyhq#976)

fffbe9f

* feat: wip impersonate user * feat: add ability to impersonate an user * fix: remove console.log * fix: unused import

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: implement user impersonation feature #976

feat: implement user impersonation feature #976

magrinj commented Jul 28, 2023 •

edited

Loading

ergomake bot commented Jul 28, 2023 •

edited

Loading

charlesBochet commented Jul 31, 2023

lucasbordeau Jul 31, 2023

magrinj Jul 31, 2023

lucasbordeau Jul 31, 2023

charlesBochet Jul 31, 2023

charlesBochet Jul 31, 2023

charlesBochet Jul 31, 2023

charlesBochet Jul 31, 2023

charlesBochet Jul 31, 2023

charlesBochet Aug 1, 2023

feat: implement user impersonation feature #976

feat: implement user impersonation feature #976

Conversation

magrinj commented Jul 28, 2023 • edited Loading

ergomake bot commented Jul 28, 2023 • edited Loading

Environment Summary 📑

charlesBochet commented Jul 31, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

magrinj commented Jul 28, 2023 •

edited

Loading

ergomake bot commented Jul 28, 2023 •

edited

Loading