feat(coral): Remove feature flag for User information sections (#2061)

* feat(coral): Remove feature flag for user info
* fix(coral): Remove feature flag mocks
* fix(coral): Fix test

---------

Signed-off-by: Mathieu Anderson <mathieu.anderson@aiven.io>

Author: Mathieu Anderson

coral/src/app/layout/header/ProfileDropdown.test.tsx

@@ -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();
 
@@ -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],
@@ -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",
   },
 ];
@@ -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 });
     });
@@ -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" });
@@ -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: {
@@ -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", {
@@ -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
@@ -286,7 +215,6 @@ describe("ProfileDropdown", () => {
   });
 
   describe("handles error in logout process", () => {
-    mockIsFeatureFlagActive(false);
     mockAuthUser.mockReturnValue(testUser);
     const testError = {
       status: 500,

coral/src/app/layout/header/ProfileDropdown.tsx

@@ -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({
@@ -90,12 +76,7 @@ function ProfileDropdown() {
         return;
       }
 
-      if (selectedItem.behindFeatureFlag && userInformationFeatureFlagEnabled) {
-        navigate(selectedItem.path);
-        return;
-      }
-
-      navigateToAngular(selectedItem.angularPath);
+      navigate(selectedItem.path);
     }
   }
 

coral/src/app/layout/main-navigation/MainNavigation.test.tsx

@@ -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",
       },
     ],
   },
@@ -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();

coral/src/app/layout/main-navigation/MainNavigation.tsx

@@ -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
@@ -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)}
             />