[Impersonation] Add User Impersonation UI option for Admins

[thenamankumar]

Impersonation is helpful feature for debugging in both dev and prod environments. The current implementation is such that, if the logged in user is an Admin, you can add a cookie named iuid with the value of user_id of any user, on refresh you will be logged in as that user. Removing the cookie will take you back to your own account.

The idea is to create a UI option for to impersonate any user.

1. Create a modal which shows a user select field, on submit it adds the cookie and reloads the page.

2. Add a dropdown item above logout button in the navbar named Impersonate, clicking on which the modal should open.

[jugshaurya]

@hereisnaman may I do this?
assign it to me.

[thenamankumar]

@jugshaurya you can start working on it.

[jugshaurya]

@hereisnaman
progress Report and some help wanted:

• Point2 is done 😍.
• Point1 requires all the users to show in the select user dropdown. Can you tell me how can't get all the users when I have created a single sign-on #CodingBlocks. No local Auth is set up in my case.
• Just some Pointers Please.
  

[thenamankumar]

@hereisnaman
progress Report and some help wanted:

* Point2 is done 😍.

* Point1 requires all the users to show in the select user dropdown. Can you tell me how can't get all the users when I have created a single sign-on #CodingBlocks. No local Auth is set up in my case.

* Just some Pointers Please.
  ![point2](https://user-images.githubusercontent.com/39825643/82122167-90a49e80-97af-11ea-9166-3241c1cec223.gif)

Good progress. I have added a script here to seed users in the database. You can use that.

npx babel-node api/bin/seedUsers.js

[jugshaurya]

@hereisnaman

Point 1 functionality to show the user is similar to the Invite Users as well as Select Zoom Account.I guess all three places require the same thing to get respective data and set them as select options. Right?

[jugshaurya]

@hereisnaman, So basically you want to show all the available user in impersonating select dropdown and then select the user to add that user based cookie and reload the page right? I am new to graphql can you tell me how can I get all the Database saved users ?

[thenamankumar]

@hereisnaman, So basically you want to show all the available user in impersonating select dropdown and then select the user to add that user based cookie and reload the page right? I am new to graphql can you tell me how can I get all the Database saved users ?

Yes all those places are using the same component. You don't need to perform any queries. You can simply use this component and it will handle it for you.

[jugshaurya]

@hereisnaman, should I create the new modal inside app/modals and create a new folder named Impersonate and a index.js file to maintain the code consistency and implement the same component as AddEvent to solve this issue? If not can you tell me how the props to UserSelect Component mainly the {value, availabilityStatusDuring, onChange} are going to be ? or from where are they coming from. I am unable to figure that out.

[thenamankumar]

@hereisnaman, should I create the new modal inside app/modals and create a new folder named Impersonate and a index.js file to maintain the code consistency and implement the same component as AddEvent to solve this issue? If not can you tell me how the props to UserSelect Component mainly the {value, availabilityStatusDuring, onChange} are going to be ? or from where are they coming from. I am unable to figure that out.

Yes create a new modal names Impersonate. You need to study the Components/Event/Form to see how to use UserSelect. You do not need to pass any availabilityStatus prop and we don't have to show it.

[jugshaurya]

@hereisnaman I got that I need to useUserSelect to select the users once I got them. But the problem is in listing/getting in the users into the impersonate dropdown. For that I have to query the graphqlApi to get all the users. whose code is in UserSelect. But I am Stuck in here. Can you give me a hint?

I may be wrong but I am passing all the roles to get the users. But No luck so far.

[thenamankumar]

@jugshaurya you don't need to pass any variables, Also it should not be a multi select only only single user select.

I wonder why you are creating a separate component just for the form. You can simply put that in the modal. rename users => user and setUsers -> setUser.

[jugshaurya]

@hereisnaman,

Progress: got the users into the dropdown, like this.
Remains. setting the cookie named iuid, for that, I think I have to write down a Base Controller and decorator to set cookie iuid to user_id just like you did with logout. right?

[thenamankumar]

@hereisnaman,

Progress: got the users into the dropdown, like this.
Remains. setting the cookie named iuid, for that, I think I have to write down a Base Controller and decorator to set cookie iuid to user_id just like you did with logout. right?

Set cookie from client side only and reload the page.

[thenamankumar]

@jugshaurya The cookie path set for iuid is not correct because of which it is not working. Please do proper testing before raising the PR. The path should be set to root.

Fix this to claim the bounty. Also update the label of input field to User and fix the css issue.