[Signing] Signee list summary override (#3088)

* adds signee list summary override for title

* fixes and adds new tests

Author: cammiida

src/language/texts/en.ts

@@ -410,7 +410,6 @@ export function en() {
       header_status: 'Status',
     },
     signee_list_summary: {
-      header: 'The following have signed',
       name_placeholder: 'Unknown name',
       on_behalf_of: 'on behalf of',
       loading: 'Loading signature data...',

src/language/texts/nb.ts

@@ -411,7 +411,6 @@ export function nb(): FixedLanguageList {
       header_status: 'Status',
     },
     signee_list_summary: {
-      header: 'Disse har signert',
       name_placeholder: 'Ukjent navn',
       on_behalf_of: 'på vegne av',
       loading: 'Laster signaturdata...',

src/language/texts/nn.ts

@@ -410,7 +410,6 @@ export function nn(): FixedLanguageList {
       header_status: 'Status',
     },
     signee_list_summary: {
-      header: 'Desse har signert',
       name_placeholder: 'Ukjent namn',
       on_behalf_of: 'på vegne av',
       loading: 'Lastar signaturdata...',

src/layout/SigneeList/SigneeListSummary.test.tsx

@@ -20,6 +20,7 @@ jest.mock('@tanstack/react-query');
 
 describe('SigneeListSummary', () => {
   const mockedUseQuery = jest.mocked(useQuery);
+  const mockedUseNodeItem = jest.mocked(useNodeItem);
 
   beforeEach(() => {
     jest.resetAllMocks();
@@ -29,7 +30,7 @@ describe('SigneeListSummary', () => {
       instanceGuid: 'instanceGuid',
       taskId: 'taskId',
     });
-    jest.mocked(useNodeItem).mockReturnValue('summary_title' as unknown as ReturnType<typeof useNodeItem>);
+    mockedUseNodeItem.mockReturnValue('title' as unknown as ReturnType<typeof useNodeItem>);
     jest.mocked(Lang).mockImplementation(({ id }: { id: string }) => id);
   });
 
@@ -41,7 +42,12 @@ describe('SigneeListSummary', () => {
     } as unknown as UseQueryResult);
 
     // Test case
-    render(<SigneeListSummary componentNode={{} as LayoutNode<'SigneeList'>} />);
+    render(
+      <SigneeListSummary
+        titleOverride={null}
+        componentNode={{} as LayoutNode<'SigneeList'>}
+      />,
+    );
 
     // Assertion
     expect(mockedUseQuery).toHaveBeenCalledTimes(1);
@@ -56,7 +62,12 @@ describe('SigneeListSummary', () => {
     } as unknown as UseQueryResult);
 
     // Test case
-    render(<SigneeListSummary componentNode={{} as LayoutNode<'SigneeList'>} />);
+    render(
+      <SigneeListSummary
+        titleOverride={null}
+        componentNode={{} as LayoutNode<'SigneeList'>}
+      />,
+    );
 
     // Assertion
     expect(mockedUseQuery).toHaveBeenCalledTimes(1);
@@ -71,7 +82,12 @@ describe('SigneeListSummary', () => {
     } as unknown as UseQueryResult);
 
     // Test case
-    render(<SigneeListSummary componentNode={{} as LayoutNode<'SigneeList'>} />);
+    render(
+      <SigneeListSummary
+        titleOverride={null}
+        componentNode={{} as LayoutNode<'SigneeList'>}
+      />,
+    );
 
     // Assertion
     expect(mockedUseQuery).toHaveBeenCalledTimes(1);
@@ -86,7 +102,12 @@ describe('SigneeListSummary', () => {
     } as unknown as UseQueryResult);
 
     // Test case
-    render(<SigneeListSummary componentNode={{} as LayoutNode<'SigneeList'>} />);
+    render(
+      <SigneeListSummary
+        titleOverride={null}
+        componentNode={{} as LayoutNode<'SigneeList'>}
+      />,
+    );
 
     // Assertion
     expect(mockedUseQuery).toHaveBeenCalledTimes(1);
@@ -132,13 +153,84 @@ describe('SigneeListSummary', () => {
     } as unknown as UseQueryResult);
 
     // Test case
-    render(<SigneeListSummary componentNode={{} as LayoutNode<'SigneeList'>} />);
+    render(
+      <SigneeListSummary
+        titleOverride={undefined}
+        componentNode={{} as LayoutNode<'SigneeList'>}
+      />,
+    );
 
     // Assertion
     expect(mockedUseQuery).toHaveBeenCalledTimes(1);
-    screen.getByText('summary_title');
+    screen.getByText('title');
     screen.getByText('Signee 1');
     screen.getByText("Signee 2, signee_list_summary.on_behalf_of Signee 2's organisation");
     expect(screen.queryByText(/Signee 3/i)).not.toBeInTheDocument();
   });
+
+  it('should render original title if summary override title is undefined', () => {
+    mockedUseQuery.mockReturnValue({
+      data: [] satisfies SigneeState[],
+      isLoading: false,
+      error: null,
+    } as unknown as UseQueryResult);
+
+    mockedUseNodeItem.mockReturnValue('originalTitle' as unknown as ReturnType<typeof useNodeItem>);
+
+    // Test case
+    render(
+      <SigneeListSummary
+        titleOverride={undefined}
+        componentNode={{} as LayoutNode<'SigneeList'>}
+      />,
+    );
+
+    // Assertion
+    expect(mockedUseQuery).toHaveBeenCalledTimes(1);
+    screen.getByText('originalTitle');
+  });
+
+  it('should not render title if originalTitle and overrideTitle are not set', () => {
+    mockedUseQuery.mockReturnValue({
+      data: [] satisfies SigneeState[],
+      isLoading: false,
+      error: null,
+    } as unknown as UseQueryResult);
+
+    mockedUseNodeItem.mockReturnValue(undefined);
+
+    // Test case
+    render(
+      <SigneeListSummary
+        titleOverride={undefined}
+        componentNode={{} as LayoutNode<'SigneeList'>}
+      />,
+    );
+
+    // Assertion
+    expect(mockedUseQuery).toHaveBeenCalledTimes(1);
+    screen.getByText('signee_list_summary.no_signatures');
+    expect(screen.queryByText('title')).not.toBeInTheDocument();
+  });
+
+  it.each([null, ''])('should not render title if summary title override is null or empty string', (titleOverride) => {
+    mockedUseQuery.mockReturnValue({
+      data: [] satisfies SigneeState[],
+      isLoading: false,
+      error: null,
+    } as unknown as UseQueryResult);
+
+    // Test case
+    render(
+      <SigneeListSummary
+        titleOverride={titleOverride}
+        componentNode={{} as LayoutNode<'SigneeList'>}
+      />,
+    );
+
+    // Assertion
+    expect(mockedUseQuery).toHaveBeenCalledTimes(1);
+    screen.getByText('signee_list_summary.no_signatures');
+    expect(screen.queryByText('title')).not.toBeInTheDocument();
+  });
 });

src/layout/SigneeList/SigneeListSummary.tsx

@@ -17,16 +17,18 @@ import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 
 interface SigneeListSummaryProps {
   componentNode: LayoutNode<'SigneeList'>;
+  titleOverride: string | null | undefined;
 }
 
-export function SigneeListSummary({ componentNode }: SigneeListSummaryProps) {
+export function SigneeListSummary({ componentNode, titleOverride }: SigneeListSummaryProps) {
   const { instanceOwnerPartyId, instanceGuid, taskId } = useParams();
   const { data, isLoading, error } = useQuery(signeeListQuery(instanceOwnerPartyId, instanceGuid, taskId));
 
-  const summaryTitle = useNodeItem(componentNode, (i) => i.textResourceBindings?.summary_title);
+  const originalTitle = useNodeItem(componentNode, (i) => i.textResourceBindings?.title);
+  const title = titleOverride === undefined ? originalTitle : titleOverride;
+  const heading = title ? <Lang id={title} /> : undefined;
 
   const signatures = data?.filter((signee) => isSignedSignee(signee)) ?? [];
-  const heading = <Lang id={summaryTitle ?? 'signee_list_summary.header'} />;
 
   if (isLoading) {
     return (
@@ -89,13 +91,15 @@ export function SigneeListSummary({ componentNode }: SigneeListSummaryProps) {
   );
 }
 
-function SigneeListSummaryContainer({ heading, children }: PropsWithChildren<{ heading: ReactElement }>) {
+function SigneeListSummaryContainer({ heading, children }: PropsWithChildren<{ heading: ReactElement | undefined }>) {
   return (
     <div>
-      <Label
-        label={heading}
-        size='lg'
-      />
+      {heading && (
+        <Label
+          label={heading}
+          size='lg'
+        />
+      )}
       {children}
     </div>
   );

src/layout/SigneeList/config.ts

@@ -1,6 +1,22 @@
 import { CG } from 'src/codegen/CG';
 import { CompCategory } from 'src/layout/common';
 
+export const SIGNEE_LIST_OVERRIDE_PROPS = new CG.obj(
+  new CG.prop(
+    'title',
+    new CG.union(new CG.str(), CG.null)
+      .setUnionType('discriminated')
+      .optional()
+      .setTitle('Summary title')
+      .setDescription('Title of the summary'),
+  ),
+)
+  .extends(CG.common('ISummaryOverridesCommon'))
+  .optional()
+  .setTitle('Summary properties')
+  .setDescription('Properties for how to display the summary of the component')
+  .exportAs('SigneeListSummaryOverrideProps');
+
 export const Config = new CG.component({
   category: CompCategory.Presentation,
   capabilities: {

src/layout/SigneeList/index.tsx

@@ -10,6 +10,7 @@ import { ProcessTaskType } from 'src/types';
 import { NodesInternal } from 'src/utils/layout/NodesContext';
 import type { PropsFromGenericComponent } from 'src/layout';
 import type { NodeValidationProps } from 'src/layout/layout';
+import type { SigneeListSummaryOverrideProps } from 'src/layout/Summary2/config.generated';
 import type { Summary2Props } from 'src/layout/Summary2/SummaryComponent2/types';
 
 export class SigneeList extends SigneeListDef {
@@ -33,7 +34,12 @@ export class SigneeList extends SigneeListDef {
     return null;
   }
 
-  renderSummary2(props: Summary2Props<'SigneeList'>): JSX.Element | null {
-    return <SigneeListSummary componentNode={props.target} />;
+  renderSummary2({ target, override }: Summary2Props<'SigneeList'>): JSX.Element | null {
+    return (
+      <SigneeListSummary
+        componentNode={target}
+        titleOverride={(override as SigneeListSummaryOverrideProps)?.title}
+      />
+    );
   }
 }

src/layout/Summary2/config.tsx

@@ -16,6 +16,7 @@ import { PARAGRAPH_SUMMARY_OVERRIDE_PROPS } from 'src/layout/Paragraph/config';
 import { PAYMENT_SUMMARY_OVERRIDE_PROPS } from 'src/layout/Payment/config';
 import { RADIO_SUMMARY_OVERRIDE_PROPS } from 'src/layout/RadioButtons/config';
 import { REPEATING_GROUP_SUMMARY_OVERRIDE_PROPS } from 'src/layout/RepeatingGroup/config';
+import { SIGNEE_LIST_OVERRIDE_PROPS } from 'src/layout/SigneeList/config';
 import { SUBFORM_SUMMARY_OVERRIDE_PROPS } from 'src/layout/Subform/config';
 import { TABS_SUMMARY_PROPS } from 'src/layout/Tabs/config';
 import { TEXT_SUMMARY_OVERRIDE_PROPS } from 'src/layout/Text/config';
@@ -73,26 +74,27 @@ export const Config = new CG.component({
       'overrides',
       new CG.arr(
         new CG.union(
-          INPUT_SUMMARY_OVERRIDE_PROPS,
           CHECKBOX_SUMMARY_OVERRIDE_PROPS,
-          RADIO_SUMMARY_OVERRIDE_PROPS,
+          DATEPICKER_SUMMARY_OVERRIDE_PROPS,
+          DATE_SUMMARY_OVERRIDE_PROPS,
           DROPDOWN_SUMMARY_OVERRIDE_PROPS,
-          MULTIPLE_SELECT_SUMMARY_OVERRIDE_PROPS,
           GROUP_SUMMARY_PROPS,
-          TEXTAREA_SUMMARY_PROPS,
-          REPEATING_GROUP_SUMMARY_OVERRIDE_PROPS,
-          DATEPICKER_SUMMARY_OVERRIDE_PROPS,
+          HEADER_SUMMARY_OVERRIDE_PROPS,
+          INPUT_SUMMARY_OVERRIDE_PROPS,
+          LIKERT_SUMMARY_OVERRIDE_PROPS,
           LIST_SUMMARY_OVERRIDE_PROPS,
-          TABS_SUMMARY_PROPS,
           MAP_SUMMARY_OVERRIDE_PROPS,
-          SUBFORM_SUMMARY_OVERRIDE_PROPS,
-          LIKERT_SUMMARY_OVERRIDE_PROPS,
-          PAYMENT_SUMMARY_OVERRIDE_PROPS,
-          HEADER_SUMMARY_OVERRIDE_PROPS,
+          MULTIPLE_SELECT_SUMMARY_OVERRIDE_PROPS,
+          NUMBER_SUMMARY_OVERRIDE_PROPS,
           PARAGRAPH_SUMMARY_OVERRIDE_PROPS,
+          PAYMENT_SUMMARY_OVERRIDE_PROPS,
+          RADIO_SUMMARY_OVERRIDE_PROPS,
+          REPEATING_GROUP_SUMMARY_OVERRIDE_PROPS,
+          SIGNEE_LIST_OVERRIDE_PROPS,
+          SUBFORM_SUMMARY_OVERRIDE_PROPS,
+          TABS_SUMMARY_PROPS,
+          TEXTAREA_SUMMARY_PROPS,
           TEXT_SUMMARY_OVERRIDE_PROPS,
-          NUMBER_SUMMARY_OVERRIDE_PROPS,
-          DATE_SUMMARY_OVERRIDE_PROPS,
         ).exportAs('AnySummaryOverrideProps'),
       ).optional(),
     ),