4256 - PDF - reduce table uneccssary empty space (#4401)

* 4256 - Add comments for printview odp

* 4256 - Fix TextArea in print view

* 4256 - Hide comments if no comments, hide comment if no comment for that year

src/client/components/Inputs/TextArea/TextArea.scss

@@ -1,8 +1,13 @@
 @import 'src/client/style/partials';
 @import 'client/components/Inputs/InputText/InputText';
 
-.textarea {
+.textarea,
+.textarea-print {
   @extend .input-text;
   overflow-y: hidden;
   resize: none;
 }
+
+.textarea-print {
+  padding-bottom: 12px;
+}

src/client/components/Inputs/TextArea/TextArea.tsx

@@ -1,6 +1,8 @@
 import './TextArea.scss'
 import React, { forwardRef, TextareaHTMLAttributes, useImperativeHandle, useRef } from 'react'
 
+import { useIsPrintRoute } from 'client/hooks/useIsRoute'
+
 import useResize from './hooks/useResize'
 
 type Props = Pick<
@@ -10,20 +12,25 @@ type Props = Pick<
 
 const TextArea = forwardRef<HTMLTextAreaElement, Props>((props, outerRef) => {
   const { disabled, maxHeight, onChange, onPaste, placeholder, rows, value } = props
+  const { print } = useIsPrintRoute()
 
   const textAreaRef = useRef<HTMLTextAreaElement>(null)
   useImperativeHandle(outerRef, () => textAreaRef.current!, [])
 
   useResize({ textAreaRef, maxHeight, value })
 
+  if (print) {
+    return <div className="textarea-print">{value}</div>
+  }
+
   return (
     <textarea
+      ref={textAreaRef}
       className="textarea"
       disabled={disabled}
       onChange={onChange}
       onPaste={onPaste}
       placeholder={placeholder}
-      ref={textAreaRef}
       rows={rows}
       value={value}
     />

src/client/pages/Print/OriginalDataPointsPrint/OriginalDataPointsPrint.tsx

@@ -24,6 +24,8 @@ const OriginalDataPointsPrint: React.FC<Props> = (props) => {
 
   if (loading || Objects.isEmpty(originalDataPoints)) return null
 
+  const hasDescriptions = originalDataPoints.some((odp) => !Objects.isNil(odp.description))
+
   return (
     <div>
       <h2 className="headline">{i18n.t('nationalDataPoint.nationalData')}</h2>
@@ -54,24 +56,36 @@ const OriginalDataPointsPrint: React.FC<Props> = (props) => {
         })}
       </div>
 
-      <div className="odp__section-print-mode">
-        <h3 className="subhead">{i18n.t('dataSource.comments')}</h3>
-        <DataGrid className="odp__section" gridTemplateColumns="100px minmax(240px, 40%)">
-          {originalDataPoints.map((originalDataPoint, i) => {
-            const lastRow = originalDataPoints.length - 1 === i
-            return (
-              <React.Fragment key={originalDataPoint.id}>
-                <DataCell header lastRow={lastRow}>
-                  {originalDataPoint.year}
-                </DataCell>
-                <DataCell lastCol lastRow={lastRow}>
-                  <EditorWYSIWYG disabled onChange={undefined} repository value={originalDataPoint.description} />
-                </DataCell>
-              </React.Fragment>
-            )
-          })}
-        </DataGrid>
-      </div>
+      {hasDescriptions && (
+        <>
+          <div className="page-break" />
+
+          <div className="odp__section-print-mode">
+            <h3 className="subhead">{i18n.t('dataSource.comments')}</h3>
+            <DataGrid className="odp__section" gridTemplateColumns="100px minmax(240px, 40%)">
+              {originalDataPoints.map((originalDataPoint, i) => {
+                const lastRow = originalDataPoints.length - 1 === i
+                const value = originalDataPoint.description
+
+                if (Objects.isNil(value)) {
+                  return null
+                }
+
+                return (
+                  <React.Fragment key={originalDataPoint.id}>
+                    <DataCell header lastRow={lastRow}>
+                      {originalDataPoint.year}
+                    </DataCell>
+                    <DataCell lastCol lastRow={lastRow}>
+                      <EditorWYSIWYG disabled onChange={undefined} repository value={value} />
+                    </DataCell>
+                  </React.Fragment>
+                )
+              })}
+            </DataGrid>
+          </div>
+        </>
+      )}
 
       <div className="page-break" />
     </div>