Skip to content

Commit

Permalink
feat(coral): Remove feature flag for User information sections (#2061)
Browse files Browse the repository at this point in the history 
* feat(coral): Remove feature flag for user info
* fix(coral): Remove feature flag mocks
* fix(coral): Fix test

---------

Signed-off-by: Mathieu Anderson <[email protected]>
  • Loading branch information
Mathieu Anderson authored Dec 11, 2023
1 parent 703cd3d commit b967004
Show file tree
Hide file tree
Showing 7 changed files with 27 additions and 190 deletions.
80 changes: 4 additions & 76 deletions coral/src/app/layout/header/ProfileDropdown.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { customRender } from "src/services/test-utils/render-with-wrappers";
const mockLogoutUser = logoutUser as jest.MockedFunction<typeof logoutUser>;
const mockedNavigate = jest.fn();
const mockAuthUser = jest.fn();
const mockIsFeatureFlagActive = jest.fn();
const mockToast = jest.fn();
const mockDismiss = jest.fn();

Expand All @@ -21,10 +20,6 @@ jest.mock("src/app/context-provider/AuthProvider", () => ({
useAuthContext: () => mockAuthUser(),
}));

jest.mock("src/services/feature-flags/utils", () => ({
isFeatureFlagActive: () => mockIsFeatureFlagActive(),
}));

jest.mock("@aivenio/aquarium", () => ({
...jest.requireActual("@aivenio/aquarium"),
useToastContext: () => [mockToast, mockDismiss],
Expand All @@ -34,19 +29,16 @@ const menuItems = [
{
angularPath: "/myProfile",
path: "/user/profile",
behindFeatureFlag: true,
name: "User profile",
},
{
angularPath: "/changePwd",
path: "/user/change-password",
behindFeatureFlag: true,
name: "Change password",
},
{
angularPath: "/tenantInfo",
path: "/user/tenant-info",
behindFeatureFlag: true,
name: "Tenant information",
},
];
Expand All @@ -63,7 +55,6 @@ describe("ProfileDropdown", () => {

describe("renders all necessary elements when dropdown is closed", () => {
beforeAll(() => {
mockIsFeatureFlagActive.mockReturnValue(false);
mockAuthUser.mockReturnValue(testUser);
customRender(<ProfileDropdown />, { memoryRouter: true });
});
Expand All @@ -89,7 +80,6 @@ describe("ProfileDropdown", () => {

describe("renders all necessary elements when dropdown is open", () => {
beforeAll(async () => {
mockIsFeatureFlagActive.mockReturnValue(false);
mockAuthUser.mockReturnValue(testUser);
customRender(<ProfileDropdown />, { memoryRouter: true });
const button = screen.getByRole("button", { name: "Open profile menu" });
Expand Down Expand Up @@ -125,9 +115,8 @@ describe("ProfileDropdown", () => {
});
});

describe("handles user choosing items from the menu when feature-flag for user information is disabled", () => {
describe("handles user choosing items from the menu", () => {
beforeEach(() => {
mockIsFeatureFlagActive.mockReturnValue(false);
mockAuthUser.mockReturnValue(testUser);
Object.defineProperty(window, "location", {
value: {
Expand All @@ -145,7 +134,8 @@ describe("ProfileDropdown", () => {

menuItems.forEach((item) => {
const name = item.name;
const path = item.angularPath;

const path = item.path;

it(`navigates to "${path}" when user clicks "${name}"`, async () => {
const button = screen.getByRole("button", {
Expand All @@ -156,74 +146,13 @@ describe("ProfileDropdown", () => {
const menuItem = screen.getByRole("menuitem", { name: name });
await user.click(menuItem);

// in tests it will start with http://localhost/ since that is the window.origin
expect(window.location.assign).toHaveBeenCalledWith(
`http://localhost${path}`
);
expect(mockedNavigate).toHaveBeenCalledWith(path);
});
});
});

describe("handles user choosing items from the menu when feature-flag for user information is enabled", () => {
beforeEach(() => {
mockIsFeatureFlagActive.mockReturnValue(true);
mockAuthUser.mockReturnValue(testUser);
Object.defineProperty(window, "location", {
value: {
assign: jest.fn(),
},
writable: true,
});
customRender(<ProfileDropdown />, { memoryRouter: true });
});

afterEach(() => {
jest.restoreAllMocks();
cleanup();
});

menuItems.forEach((item) => {
const name = item.name;

if (item.behindFeatureFlag) {
const path = item.path;

it(`navigates to "${path}" when user clicks "${name}"`, async () => {
const button = screen.getByRole("button", {
name: "Open profile menu",
});
await user.click(button);

const menuItem = screen.getByRole("menuitem", { name: name });
await user.click(menuItem);

expect(window.location.assign).not.toHaveBeenCalled();
expect(mockedNavigate).toHaveBeenCalledWith("/user/profile");
});
} else {
const path = item.angularPath;

it(`navigates to "${path}" when user clicks "${name}"`, async () => {
const button = screen.getByRole("button", {
name: "Open profile menu",
});
await user.click(button);

const menuItem = screen.getByRole("menuitem", { name: name });
await user.click(menuItem);

// in tests it will start with http://localhost/ since that is the window.origin
expect(window.location.assign).toHaveBeenCalledWith(
`http://localhost${path}`
);
});
}
});
});

describe("handles user sucessfully login out", () => {
beforeEach(() => {
mockIsFeatureFlagActive.mockReturnValue(false);
mockAuthUser.mockReturnValue(testUser);
// calling '/logout` successfully will resolve in us
// receiving a 401 error so this is mocking the real behavior
Expand Down Expand Up @@ -286,7 +215,6 @@ describe("ProfileDropdown", () => {
});

describe("handles error in logout process", () => {
mockIsFeatureFlagActive(false);
mockAuthUser.mockReturnValue(testUser);
const testError = {
status: 500,
Expand Down
29 changes: 5 additions & 24 deletions coral/src/app/layout/header/ProfileDropdown.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,48 @@
import {
Box,
DropdownMenu,
Typography,
Icon,
Typography,
useToastContext,
Button,
} from "@aivenio/aquarium";
import user from "@aivenio/aquarium/dist/src/icons/user";
import logOut from "@aivenio/aquarium/dist/src/icons/logOut";
import user from "@aivenio/aquarium/dist/src/icons/user";
import { useNavigate } from "react-router-dom";
import { useAuthContext } from "src/app/context-provider/AuthProvider";
import classes from "src/app/layout/header/ProfileDropdown.module.css";
import { logoutUser } from "src/domain/auth-user";
import { useAuthContext } from "src/app/context-provider/AuthProvider";
import { useNavigate } from "react-router-dom";
import useFeatureFlag from "src/services/feature-flags/hook/useFeatureFlag";
import { FeatureFlag } from "src/services/feature-flags/types";

type MenuItem = {
angularPath: string;
path: string;
name: string;
behindFeatureFlag: boolean;
};

const menuItems: MenuItem[] = [
{
angularPath: "/myProfile",
path: "/user/profile",
behindFeatureFlag: true,
name: "User profile",
},
{
angularPath: "/changePwd",
path: "/user/change-password",
behindFeatureFlag: true,
name: "Change password",
},
{
angularPath: "/tenantInfo",
path: "/user/tenant-info",
behindFeatureFlag: true,
name: "Tenant information",
},
];

const LOGOUT_KEY = "logout";
function ProfileDropdown() {
const userInformationFeatureFlagEnabled = useFeatureFlag(
FeatureFlag.FEATURE_FLAG_USER_INFORMATION
);

const navigate = useNavigate();
const authUser = useAuthContext();
const [toast, dismiss] = useToastContext();

function navigateToAngular(path: string) {
window.location.assign(`${window.origin}${path}`);
}

function onDropdownClick(actionKey: React.Key) {
if (actionKey === LOGOUT_KEY) {
toast({
Expand Down Expand Up @@ -90,12 +76,7 @@ function ProfileDropdown() {
return;
}

if (selectedItem.behindFeatureFlag && userInformationFeatureFlagEnabled) {
navigate(selectedItem.path);
return;
}

navigateToAngular(selectedItem.angularPath);
navigate(selectedItem.path);
}
}

Expand Down
53 changes: 3 additions & 50 deletions coral/src/app/layout/main-navigation/MainNavigation.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,15 +72,15 @@ const submenuItems = [
links: [
{
name: "User profile",
linkTo: isFeatureFlagActiveMock() ? `/user/profile` : `/myProfile`,
linkTo: "/user/profile",
},
{
name: "Change password",
linkTo: "/changePwd",
linkTo: "/user/change-password",
},
{
name: "Tenant information",
linkTo: "/tenantInfo",
linkTo: "/user/tenant-info",
},
],
},
Expand Down Expand Up @@ -176,53 +176,6 @@ describe("MainNavigation.tsx", () => {
});
});

describe("renders links to profile behind feature flag", () => {
afterEach(() => {
cleanup();
jest.resetAllMocks();
});

it("renders a link to the old UI when feature flag is false", async () => {
isFeatureFlagActiveMock.mockReturnValue(false);
customRender(<MainNavigation />, {
memoryRouter: true,
queryClient: true,
});

const button = screen.getByRole("button", {
name: new RegExp("User information", "i"),
});
await userEvent.click(button);
const list = screen.getByRole("list", {
name: "User information submenu",
});

const link = within(list).getByRole("link", { name: "User profile" });
expect(link).toBeVisible();
expect(link).toHaveAttribute("href", "/myProfile");
});

it("renders a link to the profile page when feature flag is true", async () => {
isFeatureFlagActiveMock.mockReturnValue(true);
customRender(<MainNavigation />, {
memoryRouter: true,
queryClient: true,
});

const button = screen.getByRole("button", {
name: new RegExp("User information", "i"),
});
await userEvent.click(button);
const list = screen.getByRole("list", {
name: "User information submenu",
});

const link = within(list).getByRole("link", { name: "User profile" });
expect(link).toBeVisible();
expect(link).toHaveAttribute("href", "/user/profile");
});
});

describe("renders links to cluster behind feature flag", () => {
afterEach(() => {
cleanup();
Expand Down
21 changes: 3 additions & 18 deletions coral/src/app/layout/main-navigation/MainNavigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,6 @@ import { FeatureFlag } from "src/services/feature-flags/types";

function MainNavigation() {
const { pathname } = useLocation();
const userInformationFeatureFlagEnabled = useFeatureFlag(
FeatureFlag.FEATURE_FLAG_USER_INFORMATION
);

const clusterViewFeatureFlagIsEnabled = useFeatureFlag(
FeatureFlag.FEATURE_FLAG_VIEW_CLUSTER
Expand Down Expand Up @@ -137,29 +134,17 @@ function MainNavigation() {
defaultExpanded={pathname.startsWith(Routes.USER_INFORMATION)}
>
<MainNavigationLink
to={
userInformationFeatureFlagEnabled
? Routes.USER_PROFILE
: "/myProfile"
}
to={Routes.USER_PROFILE}
linkText={"User profile"}
active={pathname.startsWith(Routes.USER_PROFILE)}
/>
<MainNavigationLink
to={
userInformationFeatureFlagEnabled
? Routes.USER_CHANGE_PASSWORD
: "/changePwd"
}
to={Routes.USER_CHANGE_PASSWORD}
linkText={"Change password"}
active={pathname.startsWith(Routes.USER_CHANGE_PASSWORD)}
/>
<MainNavigationLink
to={
userInformationFeatureFlagEnabled
? Routes.USER_TENANT_INFO
: "/tenantInfo"
}
to={Routes.USER_TENANT_INFO}
linkText={"Tenant information"}
active={pathname.startsWith(Routes.USER_TENANT_INFO)}
/>
Expand Down
Loading

0 comments on commit b967004

Please sign in to comment.