From 0ca70bb06eb6dea0677ff609263d45f454631878 Mon Sep 17 00:00:00 2001
From: Ole Martin Handeland <github@olemartin.org>
Date: Mon, 4 Jul 2022 14:00:55 +0200
Subject: [PATCH] Rendering checkboxes summary as string, when string is
 provided (#310)

Co-authored-by: Ole Martin Handeland <git@olemartin.org>
---
 .../summary/SummaryComponentSwitch.tsx        | 108 +++++++++---------
 .../src/utils/formLayout.ts                   |   9 ++
 2 files changed, 64 insertions(+), 53 deletions(-)

diff --git a/src/altinn-app-frontend/src/components/summary/SummaryComponentSwitch.tsx b/src/altinn-app-frontend/src/components/summary/SummaryComponentSwitch.tsx
index 69f2e638a3..a17319345c 100644
--- a/src/altinn-app-frontend/src/components/summary/SummaryComponentSwitch.tsx
+++ b/src/altinn-app-frontend/src/components/summary/SummaryComponentSwitch.tsx
@@ -13,6 +13,8 @@ import SummaryBoilerplate from 'src/components/summary/SummaryBoilerplate';
 import {
   isFileUploadComponent,
   isFileUploadWithTagComponent,
+  isGroupComponent,
+  isCheckboxesComponent,
 } from 'src/utils/formLayout';
 
 export interface ISummaryComponentSwitch {
@@ -46,67 +48,67 @@ export default function SummaryComponentSwitch({
     return null;
   }
 
-  if (Object.keys(formComponent.dataModelBindings || {}).length === 0) {
-    if (isFileUploadComponent(formComponent)) {
-      return (
-        <>
-          <SummaryBoilerplate
-            {...change}
-            label={label}
-            hasValidationMessages={hasValidationMessages}
-          />
-          <AttachmentSummaryComponent componentRef={componentRef} />
-        </>
-      );
-    }
-    if (isFileUploadWithTagComponent(formComponent)) {
-      return (
-        <>
-          <SummaryBoilerplate
-            {...change}
-            label={label}
-            hasValidationMessages={hasValidationMessages}
-          />
-          <AttachmentWithTagSummaryComponent
-            componentRef={componentRef}
-            component={formComponent as ISelectionComponentProps}
-          />
-        </>
-      );
-    }
-  }
+  const hasDataBindings =
+    Object.keys(formComponent.dataModelBindings || {}).length === 0;
 
-  switch (formComponent.type) {
-    case 'Group':
-    case 'group': {
-      return (
-        <SummaryGroupComponent
-          {...change}
-          {...groupProps}
-          componentRef={componentRef}
-        />
-      );
-    }
-    case 'Checkboxes': {
-      return (
-        <MultipleChoiceSummary
+  if (hasDataBindings && isFileUploadComponent(formComponent)) {
+    return (
+      <>
+        <SummaryBoilerplate
           {...change}
           label={label}
           hasValidationMessages={hasValidationMessages}
-          formData={formData}
-          readOnlyComponent={(formComponent as ILayoutComponent).readOnly}
         />
-      );
-    }
-    default:
-      return (
-        <SingleInputSummary
+        <AttachmentSummaryComponent componentRef={componentRef} />
+      </>
+    );
+  }
+
+  if (hasDataBindings && isFileUploadWithTagComponent(formComponent)) {
+    return (
+      <>
+        <SummaryBoilerplate
           {...change}
           label={label}
           hasValidationMessages={hasValidationMessages}
-          formData={formData}
-          readOnlyComponent={(formComponent as ILayoutComponent).readOnly}
         />
-      );
+        <AttachmentWithTagSummaryComponent
+          componentRef={componentRef}
+          component={formComponent as ISelectionComponentProps}
+        />
+      </>
+    );
+  }
+
+  if (isGroupComponent(formComponent)) {
+    return (
+      <SummaryGroupComponent
+        {...change}
+        {...groupProps}
+        componentRef={componentRef}
+      />
+    );
   }
+
+  if (isCheckboxesComponent(formComponent) && typeof formData !== 'string') {
+    return (
+      <MultipleChoiceSummary
+        {...change}
+        label={label}
+        hasValidationMessages={hasValidationMessages}
+        formData={formData}
+        readOnlyComponent={(formComponent as ILayoutComponent).readOnly}
+      />
+    );
+  }
+
+  return (
+    <SingleInputSummary
+      {...change}
+      label={label}
+      hasValidationMessages={hasValidationMessages}
+      formData={formData}
+      readOnlyComponent={(formComponent as ILayoutComponent).readOnly}
+    />
+  );
 }
diff --git a/src/altinn-app-frontend/src/utils/formLayout.ts b/src/altinn-app-frontend/src/utils/formLayout.ts
index 9bf4bbdbd5..cd0f5b4161 100644
--- a/src/altinn-app-frontend/src/utils/formLayout.ts
+++ b/src/altinn-app-frontend/src/utils/formLayout.ts
@@ -18,6 +18,7 @@ import type {
   ILayoutGroup,
 } from '../features/form/layout';
 import type { IDatePickerProps } from 'src/components/base/DatepickerComponent';
+import type { ICheckboxContainerProps } from 'src/components/base/CheckboxesContainerComponent';
 
 interface SplitKey {
   baseComponentId: string;
@@ -472,3 +473,11 @@ export function isDatePickerComponent(
 ): component is IDatePickerProps & ILayoutComponent {
   return component.type.toLowerCase() === 'datepicker';
 }
+
+export function isCheckboxesComponent(
+  component: any,
+): component is ICheckboxContainerProps & ILayoutComponent {
+  return (
+    component && component.type && component.type.toLowerCase() === 'checkboxes'
+  );
+}