[UserMenu, SiteSettings] Fix errors when coming from Project Settings (#3870)

Author: imnasnainaec

src/components/AppBar/UserMenu.tsx

@@ -31,8 +31,6 @@ import {
   shortenName,
   tabColor,
 } from "components/AppBar/AppBarTypes";
-import { clearCurrentProject } from "components/Project/ProjectActions";
-import { useAppDispatch } from "rootRedux/hooks";
 import { Path } from "types/path";
 import { RuntimeConfig } from "types/runtimeConfig";
 import { openUserGuide } from "utilities/pathUtilities";
@@ -119,7 +117,6 @@ interface UserMenuListProps {
  */
 export function UserMenuList(props: UserMenuListProps): ReactElement {
   const combineAppRelease = RuntimeConfig.getInstance().appRelease();
-  const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const navigate = useNavigate();
 
@@ -132,7 +129,6 @@ export function UserMenuList(props: UserMenuListProps): ReactElement {
         <MenuItem
           id={`${idAffix}-admin`}
           onClick={() => {
-            dispatch(clearCurrentProject());
             navigate(Path.SiteSettings);
             props.onSelect();
           }}

src/components/SiteSettings/index.tsx

@@ -4,13 +4,16 @@ import {
   type ReactElement,
   type ReactNode,
   type SyntheticEvent,
+  useEffect,
   useState,
 } from "react";
 import { useTranslation } from "react-i18next";
 
+import { clearCurrentProject } from "components/Project/ProjectActions";
 import Banners from "components/SiteSettings/Banners";
 import ProjectManagement from "components/SiteSettings/ProjectManagement";
 import UserManagement from "components/SiteSettings/UserManagement";
+import { useAppDispatch } from "rootRedux/hooks";
 
 export const enum SiteSettingsTab {
   Projects,
@@ -19,10 +22,13 @@ export const enum SiteSettingsTab {
 }
 
 export default function SiteSettings(): ReactElement {
+  const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
   const [tab, setTab] = useState(SiteSettingsTab.Projects);
 
+  useEffect(() => dispatch(clearCurrentProject()), [dispatch]);
+
   const handleChange = (_e: SyntheticEvent, val: SiteSettingsTab): void =>
     setTab(val);
 

src/components/SiteSettings/tests/index.test.tsx

@@ -13,7 +13,12 @@ jest.mock("backend", () => ({
   getAllUsers: (...args: any[]) => mockGetAllUsers(...args),
   getBannerText: (...args: any[]) => mockGetBannerText(...args),
 }));
-jest.mock("components/Project/ProjectActions", () => ({}));
+jest.mock("components/Project/ProjectActions", () => ({
+  clearCurrentProject: () => jest.fn(),
+}));
+jest.mock("rootRedux/hooks", () => ({
+  useAppDispatch: () => jest.fn(),
+}));
 
 const setupMocks = (): void => {
   mockGetAllProjects.mockResolvedValue([]);