feat: make data sets sections collapsable

src/data-workspace/category-combo-table-body-pivoted/category-combo-table-body-pivoted.js

@@ -24,13 +24,14 @@ export const PivotedCategoryComboTableBody = React.memo(
         categoryCombo,
         dataElements,
         greyedFields,
-        /* 
+        /*
         filterText,
         globalFilterText,
         maxColumnsInSection,
         renderRowTotals,
         renderColumnTotals,*/
         displayOptions,
+        collapsed,
     }) {
         const { data: metadata } = useMetadata()
 
@@ -68,7 +69,12 @@ export const PivotedCategoryComboTableBody = React.memo(
             <>
                 {rowsMatrix.map((row, id /** todo: find suitable id */) => {
                     return (
-                        <TableRow key={id}>
+                        <TableRow
+                            key={id}
+                            className={classNames({
+                                [styles.sectionRowCollapsed]: collapsed,
+                            })}
+                        >
                             {row.map((fieldInRow) => {
                                 if (
                                     fieldInRow.type === 'columnHeader' ||
@@ -150,6 +156,7 @@ PivotedCategoryComboTableBody.propTypes = {
     categoryCombo: PropTypes.shape({
         id: PropTypes.string.isRequired,
     }),
+    collapsed: PropTypes.bool,
     dataElements: PropTypes.arrayOf(
         PropTypes.shape({
             id: PropTypes.string.isRequired,

src/data-workspace/category-combo-table-body/category-combo-table-body.js

@@ -1,8 +1,8 @@
-import { TableBody, TableRow, TableCell } from '@dhis2/ui'
+import { TableBody, TableCell, TableRow } from '@dhis2/ui'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useCallback } from 'react'
-import { useMetadata, selectors } from '../../shared/index.js'
+import { selectors, useMetadata } from '../../shared/index.js'
 import { DataEntryCell, DataEntryField } from '../data-entry-cell/index.js'
 import { getFieldId } from '../get-field-id.js'
 import { TableBodyHiddenByFiltersRow } from '../table-body-hidden-by-filter-row.js'
@@ -21,6 +21,7 @@ export const CategoryComboTableBody = React.memo(
         maxColumnsInSection,
         renderRowTotals,
         renderColumnTotals,
+        collapsed,
     }) {
         const { data: metadata } = useMetadata()
 
@@ -59,7 +60,11 @@ export const CategoryComboTableBody = React.memo(
         const hiddenItemsCount = filteredDeIds.size
 
         return (
-            <TableBody>
+            <TableBody
+                className={cx({
+                    [styles.sectionRowCollapsed]: collapsed,
+                })}
+            >
                 <CategoryComboTableBodyHeader
                     categoryOptionCombos={sortedCOCs}
                     categories={categories}
@@ -128,6 +133,7 @@ CategoryComboTableBody.propTypes = {
     categoryCombo: PropTypes.shape({
         id: PropTypes.string.isRequired,
     }),
+    collapsed: PropTypes.bool,
     dataElements: PropTypes.arrayOf(
         PropTypes.shape({
             id: PropTypes.string.isRequired,

src/data-workspace/section-form/displayOptions.js

@@ -11,7 +11,6 @@ export const getDisplayOptions = (section) => {
 
     try {
         const { displayOptions: displayOptionString } = section
-
         return JSON.parse(displayOptionString)
     } catch (e) {
         console.error(

src/data-workspace/section-form/section-form.js

@@ -43,6 +43,7 @@ export const SectionForm = ({ dataSet, globalFilterText }) => {
                     dataSetId={dataSet.id}
                     key={s.id}
                     globalFilterText={globalFilterText}
+                    collapsible
                 />
             ))}
         </>
@@ -51,9 +52,7 @@ export const SectionForm = ({ dataSet, globalFilterText }) => {
 
 SectionForm.propTypes = {
     dataSet: PropTypes.shape({
-        displayOptions: PropTypes.shape({
-            tabsDirection: PropTypes.oneOf(['vertical', 'horizontal']),
-        }),
+        displayOptions: PropTypes.string,
         id: PropTypes.string,
         renderAsTabs: PropTypes.bool,
         sections: PropTypes.arrayOf(

src/data-workspace/section-form/section.js

@@ -1,6 +1,8 @@
 import i18n from '@dhis2/d2-i18n'
 import {
     colors,
+    IconChevronDown16,
+    IconChevronUp16,
     IconFilter16,
     Table,
     TableCellHead,
@@ -19,9 +21,16 @@ import { getDisplayOptions } from './displayOptions.js'
 import { SectionDescription } from './section-description.js'
 import styles from './section.module.css'
 
-export function SectionFormSection({ section, dataSetId, globalFilterText }) {
+export function SectionFormSection({
+    section,
+    dataSetId,
+    globalFilterText,
+    collapsible,
+}) {
     // Could potentially build table via props instead of rendering children
     const [filterText, setFilterText] = useState('')
+    const [showSectionContent, setShowSectionContent] = useState(true)
+
     const { data } = useMetadata()
 
     const dataElements = selectors.getDataElementsBySection(
@@ -77,6 +86,15 @@ export function SectionFormSection({ section, dataSetId, globalFilterText }) {
 
     const { beforeSectionText, afterSectionText } = displayOptions
 
+    const onSectionHeadClicked = () => {
+        collapsible &&
+            setShowSectionContent((displayingContent) => !displayingContent)
+    }
+
+    const onSectionHeadEntered = (e) => {
+        e.key === 'Enter' && onSectionHeadClicked()
+    }
+
     return (
         <div>
             <SectionDescription>{beforeSectionText}</SectionDescription>
@@ -88,44 +106,61 @@ export function SectionFormSection({ section, dataSetId, globalFilterText }) {
                             className={styles.headerCell}
                         >
                             <div className={styles.labelWrapper}>
-                                <div className={styles.title}>
-                                    {section.displayName}
+                                <div
+                                    className={styles.collapseIcon}
+                                    tabIndex={collapsible ? 0 : -1}
+                                    onClick={onSectionHeadClicked}
+                                    onKeyDown={onSectionHeadEntered}
+                                >
+                                    {collapsible &&
+                                        (showSectionContent ? (
+                                            <IconChevronUp16 color="var(--colors-white)" />
+                                        ) : (
+                                            <IconChevronDown16 color="var(--colors-white)" />
+                                        ))}
                                 </div>
-                                {section.description && (
-                                    <div className={styles.description}>
-                                        {section.description ||
-                                            'Placeholder section description'}
+                                <div>
+                                    <div className={styles.title}>
+                                        {section.displayName}
                                     </div>
-                                )}
+                                    {section.description && (
+                                        <div className={styles.description}>
+                                            {section.description ||
+                                                'Placeholder section description'}
+                                        </div>
+                                    )}
+                                </div>
                             </div>
                         </TableCellHead>
                     </TableRowHead>
-                    <TableRowHead>
-                        <TableCellHead
-                            colSpan="100%"
-                            className={headerCellStyles}
-                        >
-                            <label
-                                htmlFor={filterInputId}
-                                className={styles.filterWrapper}
+                    {showSectionContent && (
+                        <TableRowHead>
+                            <TableCellHead
+                                colSpan="100%"
+                                className={headerCellStyles}
                             >
-                                <IconFilter16 color={colors.grey600} />
-                                <input
-                                    name={filterInputId}
-                                    id={filterInputId}
-                                    type="text"
-                                    placeholder={i18n.t(
-                                        'Type here to filter in this section'
-                                    )}
-                                    value={filterText}
-                                    onChange={({ target }) =>
-                                        setFilterText(target.value)
-                                    }
-                                    className={styles.filterInput}
-                                />
-                            </label>
-                        </TableCellHead>
-                    </TableRowHead>
+                                <label
+                                    htmlFor={filterInputId}
+                                    className={styles.filterWrapper}
+                                >
+                                    <IconFilter16 color={colors.grey600} />
+                                    <input
+                                        name={filterInputId}
+                                        id={filterInputId}
+                                        type="text"
+                                        placeholder={i18n.t(
+                                            'Type here to filter in this section'
+                                        )}
+                                        value={filterText}
+                                        onChange={({ target }) =>
+                                            setFilterText(target.value)
+                                        }
+                                        className={styles.filterInput}
+                                    />
+                                </label>
+                            </TableCellHead>
+                        </TableRowHead>
+                    )}
                 </TableHead>
                 {groupedDataElements.map(
                     ({ categoryCombo, dataElements }, i) => (
@@ -140,10 +175,11 @@ export function SectionFormSection({ section, dataSetId, globalFilterText }) {
                             renderColumnTotals={section.showColumnTotals}
                             greyedFields={greyedFields}
                             displayOptions={displayOptions}
+                            collapsed={!showSectionContent}
                         />
                     )
                 )}
-                {indicators.length > 0 && (
+                {indicators.length > 0 && showSectionContent && (
                     <IndicatorsTableBody
                         indicators={indicators}
                         renderRowTotals={section.showRowTotals}
@@ -159,6 +195,7 @@ export function SectionFormSection({ section, dataSetId, globalFilterText }) {
 }
 
 SectionFormSection.propTypes = {
+    collapsible: PropTypes.bool,
     dataSetId: PropTypes.string,
     globalFilterText: PropTypes.string,
     section: PropTypes.shape({
@@ -175,3 +212,7 @@ SectionFormSection.propTypes = {
         showRowTotals: PropTypes.bool,
     }),
 }
+
+SectionFormSection.defaultProps = {
+    collapsible: false,
+}

src/data-workspace/section-form/section.module.css

@@ -9,7 +9,8 @@
     .labelWrapper {
         background-color: transparent !important;
     }
-    .title, .description {
+    .title,
+    .description {
         color: black !important;
     }
 }
@@ -23,7 +24,34 @@
     background-color: var(--colors-grey800);
     line-height: 20px;
     padding: 4px 8px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.collapseIcon {
+    margin-inline-start: -4px;
+    padding: var(--spacers-dp4);
+    height: 24px;
+    width: 24px;
+    align-self: flex-start;
+    border-radius: 3px;
+    cursor: pointer;
 }
+
+.collapseIcon:hover {
+    background-color: var(--colors-grey900);
+}
+
+.collapseIcon:focus {
+    outline: 3px solid var(--theme-focus);
+}
+
+/* Prevent focus styles when mouse clicking */
+.collapseIcon:focus:not(:focus-visible) {
+    outline: none;
+}
+
 .title {
     color: var(--colors-grey050);
     font-weight: 400;
@@ -65,43 +93,42 @@
 
 .sectionTab {
     margin-bottom: 8px;
-
 }
 
-.verticalSectionTabWrapper .sectionTab div{
+.verticalSectionTabWrapper .sectionTab div {
     flex-direction: column;
 }
 
-.sectionTab button{
+.sectionTab button {
     align-self: stretch;
 }
 
-.sectionTabWrapper{
+.sectionTabWrapper {
     display: flex;
     gap: 6px;
     flex-direction: column;
 }
 
-.verticalSectionTabWrapper{
+.verticalSectionTabWrapper {
     flex-direction: row;
 }
 
 @media print {
     .hideForPrint {
-        composes: hideForPrint from '../../app/app.css'
+        composes: hideForPrint from '../../app/app.css';
     }
 }
 
 /* section description area */
 .sectionDescription {
     margin: 12px 4px 8px;
     font-size: 13px;
-    color: var(--colors-grey800)
+    color: var(--colors-grey800);
 }
 
 .sectionDescription :global(a):link,
 .sectionDescription :global(a):visited,
 .sectionDescription :global(a):hover,
 .sectionDescription :global(a):active {
-    color: var(--colors-blue700)
+    color: var(--colors-blue700);
 }

src/data-workspace/table-body.module.css

@@ -3,7 +3,7 @@
     padding: 8px !important;
     height: auto !important;
     font-size: 13px !important;
-    line-height: 15px !important; 
+    line-height: 15px !important;
 }
 
 .tableHeader {
@@ -12,6 +12,10 @@
     font-weight: 500;
 }
 
+.sectionRowCollapsed{
+    visibility: collapse;
+}
+
 .categoryNameHeader {
     composes: tableHeader;
     font-weight: 300;
@@ -99,4 +103,4 @@
 }
 .category {
     font-weight: 300;
-}
+}