feat(REGISTRY-2839): Account type label on all screens for a logged in user (#843)

Author: SaharBatol-HDRUK

cypress/e2e/user-journeys/admin/emails.cy.ts

@@ -7,6 +7,30 @@ import { dataCy, getModalByHeader, logout } from "cypress/support/utils/common";
 
 const dataInviteUser = mockedInvitedUser();
 
+const refreshUntilFirstRowMatches = (
+  predicate: (firstRowText: string) => boolean,
+  maxAttempts = 5,
+  attempts = 0
+) => {
+  cy.get(dataCy("emails-list"))
+    .find("tbody tr")
+    .should("have.length.greaterThan", 0)
+    .first()
+    .then($row => {
+      if (predicate($row.text())) {
+        return;
+      }
+
+      if (attempts >= maxAttempts) {
+        throw new Error("Timed out waiting for first row to match condition");
+      }
+
+      cy.contains("button", "Update").click();
+      cy.wait(1000);
+      refreshUntilFirstRowMatches(predicate, maxAttempts, attempts + 1);
+    });
+};
+
 describe("Resend invite", () => {
   before(() => {
     loginAdmin();
@@ -29,8 +53,7 @@ describe("Resend invite", () => {
   });
 
   it("Shows a list of emails", () => {
-    cy.contains("button", "Update").click();
-
+    refreshUntilFirstRowMatches(text => text.includes(dataInviteUser.email));
     cy.get(dataCy("emails-list"))
       .find("tbody tr")
       .should("exist")

src/organisms/NavBar/NavBar.test.tsx

@@ -1,4 +1,4 @@
-import { useStore } from "@/data/store";
+import { StoreState, useStore } from "@/data/store";
 import { mockedJwt } from "@/mocks/data/auth";
 import { mockedUser } from "@/mocks/data/user";
 import theme from "@/theme";
@@ -15,6 +15,9 @@ import {
   waitFor,
 } from "../../utils/testUtils";
 import NavBar from "./NavBar";
+import { mockedOrganisation } from "@/mocks/data/organisation";
+import { mockedCustodian } from "@/mocks/data/custodian";
+import { AccountType } from "@/types/accounts";
 
 jest.mock("js-cookie", () => ({
   get: jest.fn(),
@@ -117,7 +120,11 @@ describe("NavBar Component", () => {
       selector({
         getUser: () => mockedUser(),
         setUser: jest.fn(),
-      })
+        config: {
+          organisation: mockedOrganisation,
+          custodian: mockedCustodian,
+        },
+      } as unknown as StoreState)
     );
 
     render(<NavBar loggedIn />);
@@ -127,6 +134,40 @@ describe("NavBar Component", () => {
     expect(handleLogout).toHaveBeenCalled();
   });
 
+  it("displays 'Organisation' chip when the user belongs to an organisation", () => {
+    mockUseStore.mockImplementation(selector =>
+      selector({
+        getUser: () => mockedUser(),
+        setUser: jest.fn(),
+        config: {
+          organisation: mockedOrganisation,
+          custodian: undefined,
+        },
+      } as unknown as StoreState)
+    );
+
+    render(<NavBar loggedIn />);
+
+    expect(screen.getByText(AccountType.ORGANISATION)).toBeInTheDocument();
+  });
+
+  it("displays 'Custodian' chip when the user belongs to an custodian", () => {
+    mockUseStore.mockImplementation(selector =>
+      selector({
+        getUser: () => mockedUser(),
+        setUser: jest.fn(),
+        config: {
+          organisation: undefined,
+          custodian: mockedCustodian,
+        },
+      } as unknown as StoreState)
+    );
+
+    render(<NavBar loggedIn />);
+
+    expect(screen.getByText(AccountType.CUSTODIAN)).toBeInTheDocument();
+  });
+
   it("displays 'My Account' and 'Sign Out' if the user is authenticated", () => {
     mockGetMe.mockResolvedValueOnce({
       status: 200,
@@ -137,7 +178,11 @@ describe("NavBar Component", () => {
       selector({
         getUser: () => mockedUser(),
         setUser: jest.fn(),
-      })
+        config: {
+          organisation: undefined,
+          custodian: undefined,
+        },
+      } as unknown as StoreState)
     );
 
     (get as jest.Mock).mockReturnValue(mockedJwt);

src/organisms/NavBar/NavBar.tsx

@@ -9,6 +9,7 @@ import MenuIcon from "@mui/icons-material/Menu";
 import {
   Box,
   Button,
+  Chip,
   IconButton,
   MenuItem,
   MenuList,
@@ -27,6 +28,7 @@ import { handleLogin, handleLogout } from "../../utils/keycloak";
 import NotificationsMenu from "../NotificationsMenu";
 import SupportMenu from "../SupportMenu/SupportMenu";
 import { StyledContainer, StyledHeader } from "./NavBar.styles";
+import { AccountType } from "@/types/accounts";
 
 const NAMESPACE_TRANSLATIONS_NAVBAR = "NavBar";
 
@@ -105,6 +107,8 @@ export default function NavBar({ loggedIn }: NavBarProps) {
     store.getUser(),
     store.setUser,
   ]);
+  const storedOrganisation = useStore(state => state.config.organisation);
+  const storedCustodian = useStore(state => state.config.custodian);
 
   const theme = useTheme();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
@@ -214,6 +218,24 @@ export default function NavBar({ loggedIn }: NavBarProps) {
                   sx={{ mr: 4 }}
                 />
               </Link>
+              {loggedIn && (
+                <Chip
+                  label={
+                    storedOrganisation
+                      ? AccountType.ORGANISATION
+                      : storedCustodian
+                        ? AccountType.CUSTODIAN
+                        : AccountType.USER
+                  }
+                  sx={{
+                    textTransform: "uppercase",
+                    backgroundColor: theme.palette[`neutral-500`].main,
+                    color: theme.palette.white,
+                  }}
+                  size="medium"
+                />
+              )}
+
               {renderButtons(left_buttons)}
             </Box>
             <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>