CCM-10555: client config (#546)

Co-authored-by: ben.hansell1 <[email protected]>

Author: alexnuttall

.tool-versions

@@ -23,4 +23,4 @@ vale 3.6.0
 # docker/jdkato/vale v3.6.0@sha256:0ef22c8d537f079633cfff69fc46f69a2196072f69cab1ab232e8a79a388e425 # SEE: https://hub.docker.com/r/jdkato/vale/tags
 # docker/koalaman/shellcheck latest@sha256:e40388688bae0fcffdddb7e4dea49b900c18933b452add0930654b2dea3e7d5c # SEE: https://hub.docker.com/r/koalaman/shellcheck/tags
 # docker/mstruebing/editorconfig-checker 2.7.1@sha256:dd3ca9ea50ef4518efe9be018d669ef9cf937f6bb5cfe2ef84ff2a620b5ddc24 # SEE: https://hub.docker.com/r/mstruebing/editorconfig-checker/tags
-# docker/sonarsource/sonar-scanner-cli 5.0.1@sha256:494ecc3b5b1ee1625bd377b3905c4284e4f0cc155cff397805a244dee1c7d575 # SEE: https://hub.docker.com/r/sonarsource/sonar-scanner-cli/tags
+# docker/sonarsource/sonar-scanner-cli 11.3@sha256:7462f132388135e32b948f8f18ff0db9ae28a87c6777f1df5b2207e04a6d7c5c # SEE: https://hub.docker.com/r/sonarsource/sonar-scanner-cli/tags

frontend/src/__tests__/app/request-proof-of-template/page.test.tsx

@@ -14,19 +14,25 @@ import {
   NHS_APP_TEMPLATE,
   SMS_TEMPLATE,
 } from '../../helpers';
+import { serverIsFeatureEnabled } from '@utils/server-features';
 import content from '@content/content';
 
 const { pageTitle } = content.components.requestProof;
 
 jest.mock('@utils/form-actions');
 jest.mock('next/navigation');
 jest.mock('@forms/RequestProof/RequestProof');
+jest.mock('@utils/server-features');
 
 const getTemplateMock = jest.mocked(getTemplate);
 const redirectMock = jest.mocked(redirect);
+const serverIsFeatureEnabledMock = jest.mocked(serverIsFeatureEnabled);
 
 describe('RequestProofPage', () => {
-  beforeEach(jest.resetAllMocks);
+  beforeEach(() => {
+    jest.resetAllMocks();
+    serverIsFeatureEnabledMock.mockResolvedValueOnce(true);
+  });
 
   test('should load page', async () => {
     const state = {
@@ -104,4 +110,17 @@ describe('RequestProofPage', () => {
       expect(redirectMock).toHaveBeenCalledWith('/invalid-template', 'replace');
     }
   );
+
+  test('should forbid user from requesting a proof when client does not have feature enabled', async () => {
+    serverIsFeatureEnabledMock.mockReset();
+    serverIsFeatureEnabledMock.mockResolvedValueOnce(false);
+
+    await RequestProofPage({
+      params: Promise.resolve({
+        templateId: 'template-id',
+      }),
+    });
+
+    expect(redirectMock).toHaveBeenCalledWith('/invalid-template', 'replace');
+  });
 });

frontend/src/__tests__/app/submit-letter-template/page.test.tsx

@@ -15,38 +15,85 @@ import {
   SMS_TEMPLATE,
 } from '../../helpers';
 import { LetterTemplate } from 'nhs-notify-web-template-management-utils';
+import { serverIsFeatureEnabled } from '@utils/server-features';
 
 jest.mock('@utils/form-actions');
 jest.mock('next/navigation');
 jest.mock('@forms/SubmitTemplate/SubmitLetterTemplate');
+jest.mock('@utils/server-features');
 
 const getTemplateMock = jest.mocked(getTemplate);
 const redirectMock = jest.mocked(redirect);
+const serverIsFeatureEnabledMock = jest.mocked(serverIsFeatureEnabled);
 
 describe('SubmitLetterTemplatePage', () => {
-  beforeEach(jest.resetAllMocks);
+  const OLD_ENV = { ...process.env };
 
-  test('should load page', async () => {
-    getTemplateMock.mockResolvedValue({
-      ...LETTER_TEMPLATE,
-      createdAt: 'today',
-      updatedAt: 'today',
-    });
-
-    const page = await SubmitLetterTemplatePage({
-      params: Promise.resolve({
-        templateId: 'template-id',
-      }),
-    });
+  beforeEach(() => {
+    jest.resetAllMocks();
+    process.env.NEXT_PUBLIC_ENABLE_PROOFING = 'true';
+  });
 
-    expect(page).toEqual(
-      <SubmitLetterTemplate
-        templateName={LETTER_TEMPLATE.name}
-        templateId={LETTER_TEMPLATE.id}
-      />
-    );
+  afterAll(() => {
+    process.env = OLD_ENV;
   });
 
+  test.each([
+    {
+      globalProofing: true,
+      clientProofing: true,
+      expectedProofingEnabled: true,
+    },
+    {
+      globalProofing: false,
+      clientProofing: true,
+      expectedProofingEnabled: false,
+    },
+    {
+      globalProofing: true,
+      clientProofing: false,
+      expectedProofingEnabled: false,
+    },
+    {
+      globalProofing: false,
+      clientProofing: false,
+      expectedProofingEnabled: false,
+    },
+  ])(
+    'should load page with proofingEnabled $expectedProofingEnabled when global proofing is $globalProofing and client proofing is $clientProofing',
+    async ({
+      globalProofing,
+      clientProofing,
+      expectedProofingEnabled: proofingEnabled,
+    }) => {
+      process.env.NEXT_PUBLIC_ENABLE_PROOFING = String(globalProofing);
+
+      getTemplateMock.mockResolvedValue({
+        ...LETTER_TEMPLATE,
+        createdAt: 'today',
+        updatedAt: 'today',
+      });
+
+      serverIsFeatureEnabledMock.mockResolvedValueOnce(clientProofing);
+
+      const page = await SubmitLetterTemplatePage({
+        params: Promise.resolve({
+          templateId: 'template-id',
+        }),
+      });
+
+      expect(page).toEqual(
+        <SubmitLetterTemplate
+          templateName={LETTER_TEMPLATE.name}
+          templateId={LETTER_TEMPLATE.id}
+          proofingEnabled={proofingEnabled}
+        />
+      );
+
+      expect(serverIsFeatureEnabledMock).toHaveBeenCalledWith('proofing');
+    }
+  );
+
   test('should handle invalid template', async () => {
     getTemplateMock.mockResolvedValue(undefined);
 

frontend/src/__tests__/components/forms/SubmitTemplate/SubmitLetterTemplate.test.tsx

@@ -34,6 +34,7 @@ describe('SubmitLetterTemplate component', () => {
       <SubmitLetterTemplate
         templateId='template-id'
         templateName='template-name'
+        proofingEnabled={true}
       />
     );
 
@@ -47,6 +48,7 @@ describe('SubmitLetterTemplate component', () => {
       <SubmitLetterTemplate
         templateId='template-id'
         templateName='template-name'
+        proofingEnabled={false}
       />
     );
 

frontend/src/__tests__/utils/form-actions.test.ts

@@ -18,9 +18,9 @@ import {
 } from '@utils/form-actions';
 import { getSessionServer } from '@utils/amplify-utils';
 import { TemplateDto } from 'nhs-notify-backend-client';
-import { templateClient } from 'nhs-notify-backend-client/src/template-api-client';
+import { templateApiClient } from 'nhs-notify-backend-client/src/template-api-client';
 
-const mockedTemplateClient = jest.mocked(templateClient);
+const mockedTemplateClient = jest.mocked(templateApiClient);
 const authIdTokenServerMock = jest.mocked(getSessionServer);
 
 jest.mock('@utils/amplify-utils');

frontend/src/__tests__/utils/server-features.test.ts

@@ -0,0 +1,109 @@
+import { serverIsFeatureEnabled } from '@utils/server-features';
+import { getSessionServer } from '@utils/amplify-utils';
+import { clientConfigurationApiClient } from 'nhs-notify-backend-client';
+
+jest.mock('@utils/amplify-utils');
+jest.mock('nhs-notify-backend-client');
+jest.mock('nhs-notify-web-template-management-utils/logger');
+
+const getSessionServerMock = jest.mocked(getSessionServer);
+const clientConfigurationApiClientMock = jest.mocked(
+  clientConfigurationApiClient
+);
+
+describe('serverIsFeatureEnabled', () => {
+  beforeAll(() => {
+    jest.resetAllMocks();
+  });
+
+  it('should return false when no accessToken', async () => {
+    getSessionServerMock.mockResolvedValueOnce({
+      accessToken: undefined,
+      userSub: undefined,
+    });
+
+    const enabled = await serverIsFeatureEnabled('proofing');
+
+    expect(enabled).toEqual(false);
+  });
+
+  it('should return false when no client', async () => {
+    getSessionServerMock.mockResolvedValueOnce({
+      accessToken: 'token',
+      userSub: 'user',
+    });
+
+    clientConfigurationApiClientMock.fetch.mockResolvedValueOnce({
+      data: null,
+    });
+
+    const enabled = await serverIsFeatureEnabled('proofing');
+
+    expect(enabled).toEqual(false);
+
+    expect(clientConfigurationApiClientMock.fetch).toHaveBeenCalledWith(
+      'token'
+    );
+  });
+
+  it('returns false if fetching configuration fails unexpectedly', async () => {
+    getSessionServerMock.mockResolvedValueOnce({
+      accessToken: 'token',
+      userSub: 'user',
+    });
+
+    clientConfigurationApiClientMock.fetch.mockResolvedValueOnce({
+      error: { code: 500, message: 'server error' },
+    });
+
+    const enabled = await serverIsFeatureEnabled('proofing');
+
+    expect(enabled).toEqual(false);
+
+    expect(clientConfigurationApiClientMock.fetch).toHaveBeenCalledWith(
+      'token'
+    );
+  });
+
+  it('should return false when feature is not enabled', async () => {
+    clientConfigurationApiClientMock.fetch.mockResolvedValueOnce({
+      data: {
+        features: { proofing: false },
+      },
+    });
+
+    getSessionServerMock.mockResolvedValueOnce({
+      accessToken: 'token',
+      userSub: 'user',
+    });
+
+    const enabled = await serverIsFeatureEnabled('proofing');
+
+    expect(enabled).toEqual(false);
+
+    expect(clientConfigurationApiClientMock.fetch).toHaveBeenCalledWith(
+      'token'
+    );
+  });
+
+  it('should return true when feature is enabled', async () => {
+    clientConfigurationApiClientMock.fetch.mockResolvedValueOnce({
+      data: {
+        features: { proofing: true },
+      },
+    });
+
+    getSessionServerMock.mockResolvedValueOnce({
+      accessToken: 'token',
+      userSub: 'user',
+    });
+
+    const enabled = await serverIsFeatureEnabled('proofing');
+
+    expect(enabled).toEqual(true);
+
+    expect(clientConfigurationApiClientMock.fetch).toHaveBeenCalledWith(
+      'token'
+    );
+  });
+});

frontend/src/app/request-proof-of-template/[templateId]/page.tsx

@@ -9,6 +9,8 @@ import {
 } from 'nhs-notify-web-template-management-utils';
 import { getTemplate } from '@utils/form-actions';
 import content from '@content/content';
+import { serverIsFeatureEnabled } from '@utils/server-features';
+
 const { pageTitle } = content.components.requestProof;
 
 export async function generateMetadata(): Promise<Metadata> {
@@ -20,6 +22,12 @@ export async function generateMetadata(): Promise<Metadata> {
 const RequestProofPage = async (props: PageProps) => {
   const { templateId } = await props.params;
 
+  const proofingEnabled = await serverIsFeatureEnabled('proofing');
+
+  if (!proofingEnabled) {
+    return redirect('/invalid-template', RedirectType.replace);
+  }
+
   const template = await getTemplate(templateId);
 
   const validatedTemplate = validateLetterTemplate(template);

frontend/src/app/submit-letter-template/[templateId]/page.tsx

@@ -8,6 +8,7 @@ import {
 } from 'nhs-notify-web-template-management-utils';
 import { getTemplate } from '@utils/form-actions';
 import { SubmitLetterTemplate } from '@forms/SubmitTemplate/SubmitLetterTemplate';
+import { serverIsFeatureEnabled } from '@utils/server-features';
 
 export async function generateMetadata(): Promise<Metadata> {
   return {
@@ -26,10 +27,17 @@ const SubmitLetterTemplatePage = async (props: PageProps) => {
     return redirect('/invalid-template', RedirectType.replace);
   }
 
+  const clientProofingEnabled = await serverIsFeatureEnabled('proofing');
+  const globalProofingEnabled =
+    process.env.NEXT_PUBLIC_ENABLE_PROOFING === 'true';
+
+  const proofingEnabled = clientProofingEnabled && globalProofingEnabled;
+
   return (
     <SubmitLetterTemplate
       templateName={validatedTemplate.name}
       templateId={validatedTemplate.id}
+      proofingEnabled={proofingEnabled}
     />
   );
 };

frontend/src/components/forms/SubmitTemplate/SubmitLetterTemplate.tsx

@@ -88,7 +88,8 @@ export const SubmitLetterTemplateProofingDisabled: FC<{
 export const SubmitLetterTemplate: FC<{
   templateName: string;
   templateId: string;
-}> = ({ templateName, templateId }) => {
+  proofingEnabled: boolean;
+}> = ({ templateName, templateId, proofingEnabled }) => {
   const {
     buttonText,
     goBackButtonText,
@@ -105,7 +106,7 @@ export const SubmitLetterTemplate: FC<{
 
   const [_, action] = useActionState(submitTemplate, 'LETTER');
 
-  if (process.env.NEXT_PUBLIC_ENABLE_PROOFING !== 'true') {
+  if (!proofingEnabled) {
     return (
       <SubmitLetterTemplateProofingDisabled
         templateName={templateName}

frontend/src/hooks/use-text-input.hook.ts

@@ -3,9 +3,9 @@ import { useState } from 'react';
 type InputValue = HTMLTextAreaElement | HTMLInputElement | HTMLSelectElement;
 
 export const useTextInput = <T extends InputValue, S extends string = string>(
-  initialState: string
+  initialState: S
 ): [S, React.ChangeEventHandler<T>] => {
-  const [value, setValue] = useState<S>(initialState as S);
+  const [value, setValue] = useState<S>(initialState);
 
   const handleChange: React.ChangeEventHandler<T> = (e) => {
     setValue(e.target.value as S);