Add log out functionality

Author: kshmidt-digma

src/components/Admin/NavSidebar/index.tsx

@@ -1,7 +1,6 @@
 import { usePostHog } from "posthog-js/react";
 import { useEffect } from "react";
 import { useTheme } from "styled-components";
-import { useAdminDispatch } from "../../../containers/Admin/hooks";
 import { useLogoutMutation } from "../../../redux/services/auth";
 import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
 import { getThemeKind } from "../../common/App/styles";
@@ -15,7 +14,6 @@ export const NavSidebar = () => {
   const theme = useTheme();
   const themeKind = getThemeKind(theme);
   const [logout, result] = useLogoutMutation();
-  const dispatch = useAdminDispatch();
   const posthog = usePostHog();
 
   const handleLogoLinkClick = () => {
@@ -44,7 +42,7 @@ export const NavSidebar = () => {
         window.clearTimeout(timeoutId);
       }
     };
-  }, [posthog, result.isSuccess, dispatch]);
+  }, [posthog, result.isSuccess]);
 
   return (
     <s.Sidebar>

src/components/Agentic/Sidebar/index.tsx

@@ -1,12 +1,18 @@
-import { useMemo } from "react";
+import { usePostHog } from "posthog-js/react";
+import { useEffect, useMemo, useState } from "react";
 import { useNavigate, useParams } from "react-router";
 import { useTheme } from "styled-components";
 import { useAgenticSelector } from "../../../containers/Agentic/hooks";
+import { useLogoutMutation } from "../../../redux/services/auth";
 import { useGetIncidentsQuery } from "../../../redux/services/digma";
 import type { IncidentResponseItem } from "../../../redux/services/types";
 import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
 import { getThemeKind } from "../../common/App/styles";
+import { LogoutIcon } from "../../common/icons/16px/LogoutIcon";
+import { NewPopover } from "../../common/NewPopover";
 import { Tooltip } from "../../common/v3/Tooltip";
+import { MenuList } from "../../Navigation/common/MenuList";
+import { Popup } from "../../Navigation/common/Popup";
 import { trackingEvents } from "../tracking";
 import * as s from "./styles";
 
@@ -22,11 +28,15 @@ export const Sidebar = () => {
   const params = useParams();
   const incidentId = params.id;
   const navigate = useNavigate();
+  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
+  const posthog = usePostHog();
 
   const { data } = useGetIncidentsQuery(undefined, {
     pollingInterval: REFRESH_INTERVAL
   });
 
+  const [logout, result] = useLogoutMutation();
+
   const handleLogoLinkClick = () => {
     sendUserActionTrackingEvent(trackingEvents.LOGO_LINK_CLICKED);
   };
@@ -39,6 +49,34 @@ export const Sidebar = () => {
     sendUserActionTrackingEvent(trackingEvents.TEMPLATE_BUTTON_CLICKED);
   };
 
+  const handleLogoutMenuItemClick = () => {
+    sendUserActionTrackingEvent(trackingEvents.LOGOUT_MENU_ITEM_CLICKED);
+    void logout();
+  };
+
+  const handleUserMenuOpenChange = (isOpen: boolean) => {
+    setIsUserMenuOpen(isOpen);
+  };
+
+  useEffect(() => {
+    let timeoutId: number | null = null;
+
+    if (result.isSuccess) {
+      if (posthog.__loaded) {
+        posthog.reset();
+      }
+      timeoutId = window.setTimeout(() => {
+        window.location.reload();
+      }, 500);
+    }
+
+    return () => {
+      if (timeoutId) {
+        window.clearTimeout(timeoutId);
+      }
+    };
+  }, [posthog, result.isSuccess]);
+
   const sortedIncidents = useMemo(
     () =>
       [...(data?.items ?? [])].sort(
@@ -84,10 +122,30 @@ export const Sidebar = () => {
         onClick={handleTemplateButtonClick}
         isDisabled={true}
       />
-      <s.UserInfo>
-        <s.Avatar>{userInitial}</s.Avatar>
-        {user?.email ?? ""}
-      </s.UserInfo>
+      <NewPopover
+        content={
+          <Popup>
+            <MenuList
+              items={[
+                {
+                  id: "logout",
+                  icon: <LogoutIcon size={16} color={"currentColor"} />,
+                  label: "Log out",
+                  onClick: handleLogoutMenuItemClick
+                }
+              ]}
+            />
+          </Popup>
+        }
+        onOpenChange={handleUserMenuOpenChange}
+        isOpen={isUserMenuOpen}
+        placement={"bottom-start"}
+      >
+        <s.UserInfo>
+          <s.Avatar>{userInitial}</s.Avatar>
+          {user?.email ?? ""}
+        </s.UserInfo>
+      </NewPopover>
     </s.Container>
   );
 };

src/components/Agentic/Sidebar/styles.ts

@@ -105,7 +105,7 @@ export const TemplateButton = styled(NewButton)`
   justify-content: center;
 `;
 
-export const UserInfo = styled.div`
+export const UserInfo = styled.button`
   ${subscriptRegularTypography};
   display: flex;
   align-items: center;
@@ -116,9 +116,12 @@ export const UserInfo = styled.div`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
+  background: none;
+  border: none;
+  cursor: pointer;
 `;
 
-export const Avatar = styled.div`
+export const Avatar = styled.span`
   width: 28px;
   height: 28px;
   border-radius: 6px;

src/components/Agentic/tracking.ts

@@ -5,7 +5,8 @@ export const trackingEvents = addPrefix(
   APP_ID,
   {
     LOGO_LINK_CLICKED: "logo link clicked",
-    TEMPLATE_BUTTON_CLICKED: "template button clicked"
+    TEMPLATE_BUTTON_CLICKED: "template button clicked",
+    LOGOUT_MENU_ITEM_CLICKED: "logout menu item clicked"
   },
   " "
 );

src/components/Navigation/common/MenuList/index.tsx

@@ -7,6 +7,7 @@ import type { MenuListProps } from "./types";
 
 const UNGROUPED_GROUP_LABEL = "__ungrouped";
 
+// TODO: move to common
 export const MenuList = ({
   showGroupNames = true,
   items,

src/components/Navigation/common/Popup/index.tsx

@@ -1,6 +1,7 @@
 import * as s from "./styles";
 import type { PopupProps } from "./types";
 
+// TODO: move to common
 export const Popup = ({ className, height, header, children }: PopupProps) => (
   <s.Container className={className} $height={height}>
     {header && <div>{header}</div>}