CCM-11148 Move feature flag check to header instead of layout

Author: nicki-nhs

frontend/src/__tests__/components/molecules/Header.test.tsx

@@ -2,6 +2,7 @@ import { render, screen, within } from '@testing-library/react';
 import { useAuthStatus } from '@hooks/use-auth-status';
 import { getSessionServer } from '@utils/amplify-utils';
 import { getIdTokenClaims } from '@utils/token-utils';
+import { serverIsFeatureEnabled } from '@utils/server-features';
 import { NhsNotifyHeader } from '@molecules/Header/Header';
 
 jest.mock('@hooks/use-auth-status');
@@ -13,11 +14,15 @@ const mockGetIdTokenClaims = jest.mocked(getIdTokenClaims);
 jest.mock('@utils/amplify-utils');
 const mockGetSessionServer = jest.mocked(getSessionServer);
 
+jest.mock('@utils/server-features');
+const mockServerIsFeatureEnabled = jest.mocked(serverIsFeatureEnabled);
+
 jest.mock('nhs-notify-web-template-management-utils/logger');
 
 beforeEach(() => {
   jest.resetAllMocks();
   mockUseAuthStatus.mockImplementation((status) => status ?? 'configuring');
+  mockServerIsFeatureEnabled.mockResolvedValue(false); // default for most tests
 });
 
 describe('NhsNotifyHeader', () => {
@@ -28,7 +33,7 @@ describe('NhsNotifyHeader', () => {
     });
 
     it('initializes the authStatus as unauthenticated', async () => {
-      const header = await NhsNotifyHeader({});
+      const header = await NhsNotifyHeader();
 
       render(header);
 
@@ -40,7 +45,7 @@ describe('NhsNotifyHeader', () => {
     });
 
     it('renders the logo and service name with the correct url', async () => {
-      const header = await NhsNotifyHeader({});
+      const header = await NhsNotifyHeader();
 
       render(header);
 
@@ -54,15 +59,15 @@ describe('NhsNotifyHeader', () => {
     });
 
     it(`renders the authentication link as 'sign in'`, async () => {
-      const header = await NhsNotifyHeader({});
+      const header = await NhsNotifyHeader();
 
       render(header);
 
       expect(screen.getByTestId('sign-in-link')).toHaveTextContent('Sign in');
     });
 
     it('does not show the navigation links', async () => {
-      const header = await NhsNotifyHeader({});
+      const header = await NhsNotifyHeader();
 
       render(header);
 
@@ -72,7 +77,7 @@ describe('NhsNotifyHeader', () => {
     });
 
     it('matches snapshot (unauthenticated)', async () => {
-      const header = await NhsNotifyHeader({});
+      const header = await NhsNotifyHeader();
 
       const container = render(header);
 
@@ -94,11 +99,9 @@ describe('NhsNotifyHeader', () => {
     });
 
     it('initializes the authStatus as authenticated', async () => {
-      const header = await NhsNotifyHeader({});
-
+      const header = await NhsNotifyHeader();
       render(header);
 
-      // hook used in AuthLink, HeaderNavigation, HeaderAccountDetails
       expect(mockUseAuthStatus).toHaveBeenCalledTimes(3);
 
       for (const call of mockUseAuthStatus.mock.calls) {
@@ -107,7 +110,7 @@ describe('NhsNotifyHeader', () => {
     });
 
     it('renders the users display name', async () => {
-      const header = await NhsNotifyHeader({});
+      const header = await NhsNotifyHeader();
 
       render(header);
 
@@ -117,7 +120,7 @@ describe('NhsNotifyHeader', () => {
     });
 
     it('renders the client name', async () => {
-      const header = await NhsNotifyHeader({});
+      const header = await NhsNotifyHeader();
 
       render(header);
 
@@ -127,7 +130,7 @@ describe('NhsNotifyHeader', () => {
     });
 
     it(`renders auth link as 'Sign out'`, async () => {
-      const header = await NhsNotifyHeader({});
+      const header = await NhsNotifyHeader();
 
       render(header);
       expect(screen.getByTestId('sign-out-link')).toHaveTextContent('Sign out');
@@ -139,7 +142,7 @@ describe('NhsNotifyHeader', () => {
       });
       mockGetIdTokenClaims.mockReturnValueOnce({});
 
-      const header = await NhsNotifyHeader({});
+      const header = await NhsNotifyHeader();
 
       render(header);
 
@@ -161,8 +164,12 @@ describe('NhsNotifyHeader', () => {
     });
 
     describe(`with 'routing' flag enabled`, () => {
+      beforeEach(() => {
+        mockServerIsFeatureEnabled.mockResolvedValue(true);
+      });
+
       it('renders both the navigation links with correct hrefs', async () => {
-        const header = await NhsNotifyHeader({ routingEnabled: true });
+        const header = await NhsNotifyHeader();
 
         render(header);
 
@@ -183,8 +190,12 @@ describe('NhsNotifyHeader', () => {
     });
 
     describe(`with 'routing' flag disabled`, () => {
+      beforeEach(() => {
+        mockServerIsFeatureEnabled.mockResolvedValue(false);
+      });
+
       it('renders the templates link with correct href', async () => {
-        const header = await NhsNotifyHeader({ routingEnabled: false });
+        const header = await NhsNotifyHeader();
 
         render(header);
 
@@ -197,7 +208,7 @@ describe('NhsNotifyHeader', () => {
       });
 
       it('should not render the message plans link', async () => {
-        const header = await NhsNotifyHeader({ routingEnabled: false });
+        const header = await NhsNotifyHeader();
 
         render(header);
 

frontend/src/app/layout.tsx

@@ -9,7 +9,6 @@ import { NhsNotifyHeader } from '@molecules/Header/Header';
 import { NHSNotifyContainer } from '@layouts/container/container';
 import { NHSNotifyFooter } from '@molecules/Footer/Footer';
 import { LogoutWarningModal } from '@molecules/LogoutWarningModal/LogoutWarningModal';
-import { serverIsFeatureEnabled } from '@utils/server-features';
 
 // https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadata-object
 export const metadata: Metadata = {
@@ -54,8 +53,6 @@ export default async function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const routingEnabled = await serverIsFeatureEnabled('routing');
-
   return (
     <html lang='en'>
       <head>
@@ -71,7 +68,7 @@ export default async function RootLayout({
         <CookiesProvider>
           <AuthProvider>
             <NHSNotifySkipLink />
-            <NhsNotifyHeader routingEnabled={routingEnabled} />
+            <NhsNotifyHeader />
             <NHSNotifyContainer>{children}</NHSNotifyContainer>
             <NHSNotifyFooter />
             <LogoutWarningModal

frontend/src/components/molecules/Header/Header.tsx

@@ -6,22 +6,21 @@ import { getSessionServer } from '@utils/amplify-utils';
 import { getIdTokenClaims } from '@utils/token-utils';
 import { HeaderAccountDetails } from './HeaderAccountDetails';
 import { HeaderNavigation } from './HeaderNavigation';
-
-interface NhsNotifyHeaderProps {
-  routingEnabled?: boolean;
-}
+import { serverIsFeatureEnabled } from '@utils/server-features';
 
 const headerContent = content.components.header;
 
-export async function NhsNotifyHeader({
-  routingEnabled = false,
-}: NhsNotifyHeaderProps) {
+export async function NhsNotifyHeader() {
   const session = await getSessionServer();
 
   const authStatus: AuthStatus = session?.accessToken
     ? 'authenticated'
     : 'unauthenticated';
 
+  const routingEnabled = session?.accessToken
+    ? await serverIsFeatureEnabled('routing')
+    : false;
+
   return (
     <header
       className='nhsuk-header'