upcoming: [M3-10423], [M3-10412] - IAM: Added a new feature flag and Administration section in the Primary Nav (linode#12633)

* Added new feature flag to support PrimaryNav changes

* Add Administration section to the primary Nav

* Update PrimaryNav.tsx

* Added changeset: Added a new feature flag and Administration section in the Primary Nav

* Test coverage

* disable the flag in cypress tests

* Update packages/manager/.changeset/pr-12633-upcoming-features-1754346094060.md

Co-authored-by: Mariah Jacobs <[email protected]>

* Mock the iamRbacPrimaryNavChanges feature flag to be disabled in Cypress tests

* upadate primarynav

---------

Co-authored-by: Mariah Jacobs <[email protected]>

Author: cpathipa

packages/manager/.changeset/pr-12633-upcoming-features-1754346094060.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add a new feature flag and Administration section in the Primary Nav ([#12633](https://github.com/linode/manager/pull/12633))

packages/manager/cypress/e2e/core/account/account-maintenance.spec.ts

@@ -26,6 +26,7 @@ describe('Maintenance', () => {
 
     // TODO When the Host & VM Maintenance feature rolls out, we want to enable the feature flag and update the test.
     mockAppendFeatureFlags({
+      iamRbacPrimaryNavChanges: false,
       vmHostMaintenance: {
         enabled: false,
       },

packages/manager/cypress/e2e/core/account/service-transfer.spec.ts

@@ -14,6 +14,7 @@ import {
   mockInitiateEntityTransferError,
   mockReceiveEntityTransfer,
 } from 'support/intercepts/account';
+import { mockAppendFeatureFlags } from 'support/intercepts/feature-flags';
 import { mockGetLinodes } from 'support/intercepts/linodes';
 import { ui } from 'support/ui';
 import { cleanUp } from 'support/util/cleanup';
@@ -126,6 +127,13 @@ describe('Account service transfers', () => {
     cleanUp(['service-transfers', 'linodes', 'lke-clusters']);
   });
 
+  beforeEach(() => {
+    // Mock the iamRbacPrimaryNavChanges feature flag to be disabled.
+    mockAppendFeatureFlags({
+      iamRbacPrimaryNavChanges: false,
+    }).as('getFeatureFlags');
+  });
+
   /*
    * - Confirms user can navigate to service transfer page via user menu.
    */

packages/manager/cypress/e2e/core/general/smoke-deep-link.spec.ts

@@ -1,3 +1,4 @@
+import { mockAppendFeatureFlags } from 'support/intercepts/feature-flags';
 import { pages } from 'support/ui/constants';
 
 import type { Page } from 'support/ui/constants';
@@ -8,6 +9,10 @@ beforeEach(() => {
 describe('smoke - deep links', () => {
   beforeEach(() => {
     cy.visitWithLogin('/null');
+    // Mock the iamRbacPrimaryNavChanges feature flag to be disabled.
+    mockAppendFeatureFlags({
+      iamRbacPrimaryNavChanges: false,
+    }).as('getFeatureFlags');
   });
 
   it('Go to each route and validate deep links', () => {

packages/manager/cypress/e2e/core/linodes/smoke-delete-linode.spec.ts

@@ -2,6 +2,7 @@ import { createLinodeRequestFactory } from '@linode/utilities';
 import { accountSettingsFactory } from '@src/factories/accountSettings';
 import { authenticate } from 'support/api/authentication';
 import { mockGetAccountSettings } from 'support/intercepts/account';
+import { mockAppendFeatureFlags } from 'support/intercepts/feature-flags';
 import { interceptDeleteLinode } from 'support/intercepts/linodes';
 import { ui } from 'support/ui';
 import { cleanUp } from 'support/util/cleanup';
@@ -65,6 +66,9 @@ describe('delete linode', () => {
   });
   beforeEach(() => {
     cy.tag('method:e2e');
+    mockAppendFeatureFlags({
+      iamRbacPrimaryNavChanges: false,
+    }).as('getFeatureFlags');
   });
 
   it('deletes linode from linode details page', () => {

packages/manager/cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts

@@ -69,6 +69,10 @@ const preferenceOverrides = {
 authenticate();
 describe('linode landing checks', () => {
   beforeEach(() => {
+    // Mock the iamRbacPrimaryNavChanges feature flag to be disabled.
+    mockAppendFeatureFlags({
+      iamRbacPrimaryNavChanges: false,
+    });
     const mockAccountSettings = accountSettingsFactory.build({
       managed: false,
     });
@@ -470,6 +474,10 @@ describe('linode landing checks', () => {
 
 describe('linode landing checks for empty state', () => {
   beforeEach(() => {
+    // Mock the iamRbacPrimaryNavChanges feature flag to be disabled.
+    mockAppendFeatureFlags({
+      iamRbacPrimaryNavChanges: false,
+    });
     // Mock setup to display the Linode landing page in an empty state
     mockGetLinodes([]).as('getLinodes');
   });
@@ -572,6 +580,10 @@ describe('linode landing checks for empty state', () => {
 
 describe('linode landing checks for non-empty state with restricted user', () => {
   beforeEach(() => {
+    // Mock the iamRbacPrimaryNavChanges feature flag to be disabled.
+    mockAppendFeatureFlags({
+      iamRbacPrimaryNavChanges: false,
+    });
     // Mock setup to display the Linode landing page in an non-empty state
     const mockLinodes: Linode[] = new Array(1)
       .fill(null)

packages/manager/cypress/e2e/core/notificationsAndEvents/qemu-reboot-upgrade-notice.spec.ts

@@ -8,6 +8,7 @@ import { notificationFactory } from '@src/factories/notification';
 import { mockGetAccount, mockGetMaintenance } from 'support/intercepts/account';
 import { mockGetLinodeConfigs } from 'support/intercepts/configs';
 import { mockGetNotifications } from 'support/intercepts/events';
+import { mockAppendFeatureFlags } from 'support/intercepts/feature-flags';
 import {
   mockGetLinodeDetails,
   mockGetLinodes,
@@ -30,6 +31,11 @@ import { formatDate } from 'src/utilities/formatDate';
 import type { Notification } from '@linode/api-v4';
 
 describe('QEMU reboot upgrade notification', () => {
+  beforeEach(() => {
+    mockAppendFeatureFlags({
+      iamRbacPrimaryNavChanges: false,
+    }).as('getFeatureFlags');
+  });
   const NOTIFICATION_BANNER_TEXT = 'critical platform maintenance';
   const noticeMessageShort =
     'One or more Linodes need to be rebooted for critical platform maintenance.';

packages/manager/src/assets/icons/entityIcons/coreuser.svg

@@ -1,4 +1,5 @@
 import { queryClientFactory } from '@linode/queries';
+import { screen, waitFor } from '@testing-library/react';
 import * as React from 'react';
 
 import { accountFactory } from 'src/factories';
@@ -331,4 +332,115 @@ describe('PrimaryNav', () => {
     expect(monitorAlertsDisplayItem).toBeNull();
     expect(betaChip).toBeVisible();
   });
+
+  it('should show Administration links if iamRbacPrimaryNavChanges flag is enabled', async () => {
+    const flags: Partial<Flags> = {
+      iamRbacPrimaryNavChanges: true,
+      iam: {
+        beta: true,
+        enabled: true,
+      },
+    };
+
+    queryMocks.useIsIAMEnabled.mockReturnValue({
+      isIAMBeta: true,
+      isIAMEnabled: true,
+    });
+
+    renderWithTheme(<PrimaryNav {...props} />, {
+      flags,
+    });
+
+    const adminLink = screen.getByRole('button', { name: 'Administration' });
+    expect(adminLink).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByRole('link', { name: 'Billing' })).toBeInTheDocument();
+      expect(
+        screen.getByRole('link', { name: 'Identity & Access' })
+      ).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: 'Quotas' })).toBeInTheDocument();
+      expect(
+        screen.getByRole('link', { name: 'Login History' })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('link', { name: 'Service Transfers' })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('link', { name: 'Maintenance' })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('link', { name: 'Settings' })
+      ).toBeInTheDocument();
+      expect(screen.queryByRole('link', { name: 'Account' })).toBeNull();
+    });
+  });
+
+  it('should hide Identity & Access link for non beta users', async () => {
+    const flags: Partial<Flags> = {
+      iamRbacPrimaryNavChanges: true,
+      iam: {
+        beta: true,
+        enabled: false,
+      },
+    };
+
+    queryMocks.useIsIAMEnabled.mockReturnValue({
+      isIAMBeta: true,
+      isIAMEnabled: false,
+    });
+
+    renderWithTheme(<PrimaryNav {...props} />, {
+      flags,
+    });
+
+    const adminLink = screen.getByRole('button', { name: 'Administration' });
+    expect(adminLink).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(
+        screen.queryByRole('link', { name: 'Identity & Access' })
+      ).toBeNull();
+    });
+  });
+
+  it('should show Account link and hide Administration if iamRbacPrimaryNavChanges flag is disabled', async () => {
+    const flags: Partial<Flags> = {
+      iamRbacPrimaryNavChanges: false,
+      iam: {
+        beta: true,
+        enabled: true,
+      },
+    };
+
+    queryMocks.useIsIAMEnabled.mockReturnValue({
+      isIAMBeta: true,
+      isIAMEnabled: true,
+    });
+
+    renderWithTheme(<PrimaryNav {...props} />, {
+      flags,
+    });
+
+    const adminLink = screen.queryByRole('button', { name: 'Administration' });
+    expect(adminLink).toBeNull();
+
+    await waitFor(() => {
+      expect(screen.queryByRole('link', { name: 'Billing' })).toBeNull();
+      expect(screen.queryByRole('link', { name: 'Quotas' })).toBeNull();
+      expect(screen.queryByRole('link', { name: 'Login History' })).toBeNull();
+      expect(
+        screen.queryByRole('link', { name: 'Service Transfers' })
+      ).toBeNull();
+      expect(screen.queryByRole('link', { name: 'Maintenance' })).toBeNull();
+      expect(screen.queryByRole('link', { name: 'Settings' })).toBeNull();
+      expect(
+        screen.queryByRole('link', { name: 'Account' })
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByRole('link', { name: 'Identity & Access' })
+      ).toBeInTheDocument();
+      expect(screen.queryByRole('link', { name: 'Settings' })).toBeNull();
+    });
+  });
 });