fix: don't display divider for API Keys menu item when API key is disabled (#433)

Signed-off-by: Vishwas Rajashekar <vrajashe@cisco.com>

src/__tests__/Header/UserAccountMenu.test.js

@@ -0,0 +1,40 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import UserAccountMenu from 'components/Header/UserAccountMenu';
+import React from 'react';
+
+const mockIsApiKeyEnabled = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => {}
+}));
+
+jest.mock('../../utilities/authUtilities', () => ({
+  isApiKeyEnabled: () => {
+    return mockIsApiKeyEnabled();
+  },
+  getLoggedInUser: () => {
+    return 'jest-user';
+  },
+  logoutUser: () => {}
+}));
+
+describe('Account Menu', () => {
+  it('displays Api Keys menu item with its divider when the API Keys config is enabled', async () => {
+    mockIsApiKeyEnabled.mockReturnValue(true);
+    render(<UserAccountMenu />);
+    const userIconButton = await screen.getByTestId('user-icon-header-button');
+    fireEvent.click(userIconButton);
+    expect(await screen.queryByTestId('api-keys-menu-item')).toBeInTheDocument();
+    expect(await screen.queryByTestId('api-keys-menu-item-divider')).toBeInTheDocument();
+  });
+
+  it('does not display Api Keys menu item and divider when the API Keys config is disabled', async () => {
+    mockIsApiKeyEnabled.mockReturnValue(false);
+    render(<UserAccountMenu />);
+    const userIconButton = await screen.getByTestId('user-icon-header-button');
+    fireEvent.click(userIconButton);
+    expect(await screen.queryByTestId('api-keys-menu-item')).not.toBeInTheDocument();
+    expect(await screen.queryByTestId('api-keys-menu-item-divider')).not.toBeInTheDocument();
+  });
+});

src/components/Header/UserAccountMenu.jsx

@@ -30,6 +30,7 @@ function UserAccountMenu() {
         aria-controls={open ? 'account-menu' : undefined}
         aria-haspopup="true"
         aria-expanded={open ? 'true' : undefined}
+        data-testid="user-icon-header-button"
       >
         <Avatar sx={{ width: 32, height: 32 }} />
       </IconButton>
@@ -43,8 +44,12 @@ function UserAccountMenu() {
       >
         <MenuItem onClick={handleUserClose}>{getLoggedInUser()}</MenuItem>
         <Divider />
-        {isApiKeyEnabled() && <MenuItem onClick={apiKeyManagement}>API Keys</MenuItem>}
+        {isApiKeyEnabled() && (
-        <Divider />
+          <MenuItem onClick={apiKeyManagement} data-testid="api-keys-menu-item">
+            API Keys
+          </MenuItem>
+        )}
+        {isApiKeyEnabled() && <Divider data-testid="api-keys-menu-item-divider" />}
         <MenuItem onClick={logoutUser}>Log out</MenuItem>
       </Menu>
     </>