fix: Allow impersonation from the /settings/admin/users page (#13281)

* add impersonation in the dropdown menu

* add logo

* fix another minor issue

* Update UsersTable.tsx

---------

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>

packages/features/ee/users/components/UsersTable.tsx

@@ -1,19 +1,26 @@
+import { signIn } from "next-auth/react";
+import { useRouter } from "next/navigation";
 import { useState, useRef, useMemo, useCallback, useEffect } from "react";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useDebounce } from "@calcom/lib/hooks/useDebounce";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import {
   Badge,
+  Button,
   ConfirmationDialogContent,
   Dialog,
   DropdownActions,
   showToast,
   Table,
   TextField,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
   Avatar,
 } from "@calcom/ui";
-import { Edit, Trash, Lock } from "@calcom/ui/components/icon";
+import { Edit, Trash, Lock, VenetianMask } from "@calcom/ui/components/icon";
 
 import { withLicenseRequired } from "../../common/components/LicenseRequired";
 
@@ -22,10 +29,14 @@ const { Cell, ColumnTitle, Header, Row } = Table;
 const FETCH_LIMIT = 25;
 
 function UsersTableBare() {
+  const { t } = useLocale();
   const tableContainerRef = useRef<HTMLDivElement>(null);
   const utils = trpc.useContext();
   const [searchTerm, setSearchTerm] = useState<string>("");
+  const [showImpersonateModal, setShowImpersonateModal] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<string | null>(null);
   const debouncedSearchTerm = useDebounce(searchTerm, 500);
+  const router = useRouter();
 
   const mutation = trpc.viewer.users.delete.useMutation({
     onSuccess: async () => {
@@ -203,6 +214,15 @@ function UsersTableBare() {
                           onClick: () => lockUserAccount.mutate({ userId: user.id, locked: !user.locked }),
                           icon: Lock,
                         },
+                        {
+                          id: "impersonation",
+                          label: "Impersonate",
+                          onClick: () => {
+                            setSelectedUser(user.username);
+                            setShowImpersonateModal(true);
+                          },
+                          icon: VenetianMask,
+                        },
                         {
                           id: "delete",
                           label: "Delete",
@@ -227,6 +247,26 @@ function UsersTableBare() {
           }}
         />
       </div>
+      {showImpersonateModal && selectedUser && (
+        <Dialog open={showImpersonateModal} onOpenChange={() => setShowImpersonateModal(false)}>
+          <DialogContent type="creation" title={t("impersonate")} description={t("impersonation_user_tip")}>
+            <form
+              onSubmit={async (e) => {
+                e.preventDefault();
+                await signIn("impersonation-auth", { redirect: false, username: selectedUser });
+                setShowImpersonateModal(false);
+                router.replace("/settings/my-account/profile");
+              }}>
+              <DialogFooter showDivider className="mt-8">
+                <DialogClose color="secondary">{t("cancel")}</DialogClose>
+                <Button color="primary" type="submit">
+                  {t("impersonate")}
+                </Button>
+              </DialogFooter>
+            </form>
+          </DialogContent>
+        </Dialog>
+      )}
     </>
   );
 }

packages/features/ee/users/pages/users-listing-view.tsx

@@ -4,12 +4,11 @@ import NoSSR from "@calcom/core/components/NoSSR";
 import { Button, Meta } from "@calcom/ui";
 
 import { getLayout } from "../../../settings/layouts/SettingsLayout";
-import LicenseRequired from "../../common/components/LicenseRequired";
 import { UsersTable } from "../components/UsersTable";
 
 const DeploymentUsersListPage = () => {
   return (
-    <LicenseRequired>
+    <>
       <Meta
         title="Users"
         description="A list of all the users in your account including their name, title, email and role."
@@ -24,7 +23,7 @@ const DeploymentUsersListPage = () => {
       <NoSSR>
         <UsersTable />
       </NoSSR>
-    </LicenseRequired>
+    </>
   );
 };