Signee List Component

package.json

@@ -177,6 +177,7 @@
     "typescript": "5.7.2",
     "typescript-eslint": "8.18.0",
     "uuid": "11.0.3",
+    "zod": "^3.23.8",
     "zustand": "5.0.2"
   },
   "packageManager": "[email protected]",

src/app-components/Table/Table.tsx

@@ -7,34 +7,36 @@ import { pick } from 'dot-object';
 import type { JSONSchema7 } from 'json-schema';
 
 import classes from 'src/app-components/Table/Table.module.css';
-import type { FormDataObject, FormDataValue } from 'src/app-components/DynamicForm/DynamicForm';
+import type { FormDataValue } from 'src/app-components/DynamicForm/DynamicForm';
 
-interface Column {
+interface Column<T> {
   header: React.ReactNode;
   accessors: string[];
-  renderCell?: (values: FormDataValue[], rowData: FormDataObject, rowIndex: number) => React.ReactNode;
+  renderCell?: (values: FormDataValue[], rowData: T, rowIndex: number) => React.ReactNode;
   enableInlineEditing?: boolean;
 }
 
-export interface TableActionButton {
-  onClick: (rowIdx: number, rowData: FormDataObject) => void;
+export interface TableActionButton<T = unknown> {
+  onClick: (rowIdx: number, rowData: T) => void;
   buttonText: React.ReactNode;
   icon: React.ReactNode;
   color?: 'first' | 'second' | 'success' | 'danger';
   variant?: 'tertiary' | 'primary' | 'secondary';
 }
 
-interface DataTableProps {
-  data: FormDataObject[];
-  schema: JSONSchema7;
-  columns: Column[];
+interface DataTableProps<T> {
+  data: T[];
+  schema?: JSONSchema7;
+  columns: Column<T>[];
   caption?: React.ReactNode;
-  actionButtons?: TableActionButton[];
+  actionButtons?: TableActionButton<T>[];
   actionButtonHeader?: React.ReactNode;
   mobile?: boolean;
   size?: 'sm' | 'md' | 'lg';
   zebra?: boolean;
   stickyHeader?: boolean;
+  tableClassName?: string;
+  headerClassName?: string;
 }
 
 function formatValue(value: FormDataValue): string {
@@ -63,7 +65,7 @@ function formatValue(value: FormDataValue): string {
   return String(value);
 }
 
-export function AppTable({
+export function AppTable<T>({
   caption,
   data,
   columns,
@@ -73,12 +75,14 @@ export function AppTable({
   size,
   zebra,
   stickyHeader,
-}: DataTableProps) {
+  tableClassName,
+  headerClassName,
+}: DataTableProps<T>) {
   const defaultButtonVariant = mobile ? 'secondary' : 'tertiary';
   return (
     <Table
       size={size || 'sm'}
-      className={cn(classes.table, { [classes.mobileTable]: mobile })}
+      className={cn(classes.table, tableClassName, { [classes.mobileTable]: mobile })}
       zebra={zebra}
       stickyHeader={stickyHeader}
     >
@@ -88,6 +92,7 @@ export function AppTable({
           {columns.map((col, index) => (
             <Table.HeaderCell
               style={stickyHeader ? { zIndex: 2 } : {}}
+              className={headerClassName}
               key={index}
             >
               {col.header}

src/components/form/caption/Caption.module.css

@@ -12,3 +12,9 @@
 .description {
   padding-bottom: var(--fds-spacing-3);
 }
+
+.titleAndHelpWrapper {
+  display: flex;
+  gap: var(--fds-spacing-2);
+  align-items: center;
+}

src/components/form/caption/Caption.tsx

@@ -41,27 +41,29 @@ export const Caption = ({
     {...rest}
     className={cn(classes.tableCaption, className)}
   >
-    <DesignsystemetLabel
-      asChild
-      className={classes.captionTitle}
-      {...designSystemLabelProps}
-    >
-      <div>
-        {title}
-        <RequiredIndicator required={required} />
-        <OptionalIndicator
-          readOnly={false}
-          required={required}
-          showOptionalMarking={!!labelSettings?.optionalIndicator}
+    <div className={classes.titleAndHelpWrapper}>
+      <DesignsystemetLabel
+        asChild
+        className={classes.captionTitle}
+        {...designSystemLabelProps}
+      >
+        <div>
+          {title}
+          <RequiredIndicator required={required} />
+          <OptionalIndicator
+            readOnly={false}
+            required={required}
+            showOptionalMarking={!!labelSettings?.optionalIndicator}
+          />
+        </div>
+      </DesignsystemetLabel>
+      {helpText && (
+        <HelpTextContainer
+          helpText={helpText.text}
+          title={helpText.accessibleTitle}
         />
-      </div>
-    </DesignsystemetLabel>
-    {helpText && (
-      <HelpTextContainer
-        helpText={helpText.text}
-        title={helpText.accessibleTitle}
-      />
-    )}
+      )}
+    </div>
     {description && (
       <Description
         className={classes.description}

src/features/instantiate/containers/InvalidSubformLayoutError.tsx

@@ -31,7 +31,7 @@ export function InvalidSubformLayoutError({ error }: { error: InvalidSubformLayo
           <br />
           <br />
           <Lang
-            id='config_error.layoutset_subform_config_error_customer_support'
+            id='general.customer_service_error_message'
             params={[
               <Lang
                 key={0}

src/language/texts/en.ts

@@ -150,6 +150,8 @@ export function en() {
       customer_service_phone_number: '+47 75 00 60 00',
       customer_service_slack: 'https://altinn.slack.com/',
       customer_service_email: '[email protected]',
+      customer_service_error_message:
+        'If you need help resolving this issue, reach out to Altinn via our support lines<br/><br/><ul><li>Phone: <a href="tel:{0}">{0}</a></li><li>Email: {1}</li><li>Slack: {2}</li></ul>',
       delete: 'Delete',
       download: 'Download {0}',
       disabled: 'Disabled',
@@ -343,6 +345,19 @@ export function en() {
       validation_invalid_response_from_server: 'An error occurred. Please try again later.',
       unknown_error: 'An unknown error occurred. Please try again later.',
     },
+    signee_list: {
+      parse_error: 'Error loading signee list.',
+      wrong_task_error: 'This component is only available in a signing task.',
+      unknown_api_error: 'An error occurred when fetching signees.',
+      api_error_display: 'An error occurred when fetching signees. See devtool logs for more information.',
+      signee_status_signed: 'Signed',
+      signee_status_waiting: 'Waiting for signing',
+      signee_status_delegation_failed: 'Delegation failed',
+      signee_status_notification_failed: 'Notification failed',
+      header_name: 'Name',
+      header_on_behalf_of: 'On behalf of',
+      header_status: 'Status',
+    },
     helptext: {
       button_title: 'Help',
       button_title_prefix: 'Helptext for',
@@ -412,8 +427,6 @@ export function en() {
       navigateLastPage: 'Navigate to the last page in the table',
     },
     config_error: {
-      layoutset_subform_config_error_customer_support:
-        'If you need help resolving this issue, reach out to Altinn via our support lines<br/><br/><ul><li>Phone: <a href="tel:{0}">{0}</a></li><li>Email: {1}</li><li>Slack: {2}</li></ul>',
       layoutset_subform_config_error:
         'Layout set with id <strong>{0}</strong> is configured incorrectly.<br /><br />The layout set cannot have both <strong>type</strong> <em>and</em> <strong>tasks</strong> defined.',
       layoutset_error: 'Layout set error',

src/language/texts/nb.ts

@@ -150,6 +150,8 @@ export function nb(): FixedLanguageList {
       customer_service_phone_number: '+47 75 00 60 00',
       customer_service_slack: 'https://altinn.slack.com/',
       customer_service_email: '[email protected]',
+      customer_service_error_message:
+        'Hvis du har behov for assistanse kan du nå Altinn på<br/><br/><li>Telefon: <a href="tel:{0}">{0}</a></li><li>E-post: {1}</li><li>Slack: {2}</li></ul>',
       delete: 'Slett',
       download: 'Nedlasting {0}',
       disabled: 'Deaktivert',
@@ -344,6 +346,19 @@ export function nb(): FixedLanguageList {
       validation_invalid_response_from_server: 'Det oppstod en feil. Vennligst prøv igjen senere.',
       unknown_error: 'Ukjent feil. Vennligst prøv igjen senere.',
     },
+    signee_list: {
+      parse_error: 'Feil ved lasting av signatarliste.',
+      wrong_task_error: 'Denne komponenten er kun tilgjengelig i et signeringssteg.',
+      unknown_api_error: 'En feil oppstod under henting av signatarer.',
+      api_error_display: 'En feil oppstod under henting av signatarer. Se devtool-loggene for mer informasjon.',
+      signee_status_signed: 'Signert',
+      signee_status_waiting: 'Venter på signering',
+      signee_status_delegation_failed: 'Delegasjon mislyktes',
+      signee_status_notification_failed: 'Varsling mislyktes',
+      header_name: 'Navn',
+      header_on_behalf_of: 'På vegne av',
+      header_status: 'Status',
+    },
     helptext: {
       button_title: 'Hjelp',
       button_title_prefix: 'Hjelpetekst for',
@@ -413,8 +428,6 @@ export function nb(): FixedLanguageList {
       navigateLastPage: 'Naviger til siste side i tabell',
     },
     config_error: {
-      layoutset_subform_config_error_customer_support:
-        'Hvis du har behov for assistanse kan du nå Altinn på<br/><br/><li>Telefon: <a href="tel:{0}">{0}</a></li><li>E-post: {1}</li><li>Slack: {2}</li></ul>',
       layoutset_subform_config_error:
         'Layout set med id <strong>{0}</strong> er konfigurert feil.<br /><br />Layout set kan ikke ha både <strong>type</strong> <em>og</em> <strong>tasks</strong> definert.',
       layoutset_error: 'Layout set error',

src/language/texts/nn.ts

@@ -150,6 +150,8 @@ export function nn(): FixedLanguageList {
       customer_service_phone_number: '+47 75 00 60 00',
       customer_service_slack: 'https://altinn.slack.com/',
       customer_service_email: '[email protected]',
+      customer_service_error_message:
+        'Om du treng hjelp kan du nå Altinn på:<br/><br/>Telefon: <a href="tel:{0}">{0}</a><br/>E-post: {1}<br/>Slack: {2}',
       delete: 'Slett',
       download: 'Nedlasting {0}',
       disabled: 'Deaktivert',
@@ -344,6 +346,19 @@ export function nn(): FixedLanguageList {
       validation_invalid_response_from_server: 'Det oppstod ein feil. Ver venleg, prøv igjen seinare.',
       unknown_error: 'Det oppstod ein feil. Ver venleg, prøv igjen seinare.',
     },
+    signee_list: {
+      parse_error: 'Feil ved lasting av signatarliste.',
+      wrong_task_error: 'Denne komponenten er berre tilgjengeleg i eit signeringssteg.',
+      unknown_api_error: 'Ein feil oppstod under henting av signatarar.',
+      api_error_display: 'Ein feil oppstod under henting av signatarar. Sjå devtool-loggane for meir informasjon.',
+      signee_status_signed: 'Signert',
+      signee_status_waiting: 'Ventar på signering',
+      signee_status_delegation_failed: 'Delegasjon mislukkast',
+      signee_status_notification_failed: 'Varsling mislukkast',
+      header_name: 'Namn',
+      header_on_behalf_of: 'På vegne av',
+      header_status: 'Status',
+    },
     helptext: {
       button_title: 'Hjelp',
       button_title_prefix: 'Hjelpetekst for',
@@ -413,8 +428,6 @@ export function nn(): FixedLanguageList {
       navigateLastPage: 'Naviger til siste side i tabell',
     },
     config_error: {
-      layoutset_subform_config_error_customer_support:
-        'Om du treng hjelp kan du nå Altinn på:<br/><br/>Telefon: <a href="tel:{0}">{0}</a><br/>E-post: {1}<br/>Slack: {2}',
       layoutset_subform_config_error:
         'Layout set med id <strong>{0}</strong> er feilkonfigurert.<br /><br />Layout set kan ikkje ha både <strong>type</strong> <em>og</em> <strong>tasks</strong> definert.',
       layoutset_error: 'Layout set error',

src/layout/OrganisationLookup/index.tsx

@@ -29,7 +29,7 @@ export class OrganisationLookup extends OrganisationLookupDef {
   }
 
   renderSummary(_props: SummaryRendererProps<'OrganisationLookup'>): JSX.Element | null {
-    throw new Error('Method not implemented.');
+    return null;
   }
 
   validateDataModelBindings(_ctx: LayoutValidationCtx<'OrganisationLookup'>): string[] {

src/layout/PersonLookup/index.tsx

@@ -24,7 +24,7 @@ export class PersonLookup extends PersonLookupDef {
   );
 
   renderSummary(_props: SummaryRendererProps<'PersonLookup'>): JSX.Element | null {
-    throw new Error('Method not implemented.');
+    return null;
   }
 
   renderSummary2(props: Summary2Props<'PersonLookup'>): JSX.Element | null {

src/layout/SigneeList/SigneeListComponent.module.css

@@ -0,0 +1,13 @@
+.signeeListHeader {
+  background-color: var(--fds-semantic-surface-action-subtle);
+  font-weight: 400;
+  border-bottom-color: var(--fds-semantic-border-action-hover);
+}
+
+.signeeListCaption {
+  font: var(--fds-typography-paragraph-large);
+}
+
+.signeeListTable tr td:last-child {
+  width: 1%;
+}