fix: dimensions panel divided in to sections

packages/app/src/components/App.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import i18n from '@dhis2/d2-i18n'
+import { CssVariables } from '@dhis2/ui-core'
 
 import DndContext from './DndContext'
 import Snackbar from '../components/Snackbar/Snackbar'
@@ -199,6 +200,7 @@ export class App extends Component {
                     </div>
                 </div>
                 <Snackbar />
+                <CssVariables colors spacers />
             </>
         )
     }

packages/app/src/components/DimensionsPanel/DndDimensionList.js

@@ -6,6 +6,9 @@ import { createSelector } from 'reselect'
 import {
     getDisallowedDimensions,
     getAllLockedDimensionIds,
+    getFixedDimensions,
+    getDynamicDimensions,
+    getPredefinedDimensions,
 } from '@dhis2/analytics'
 
 import DndDimensionItem from './DndDimensionItem'
@@ -47,11 +50,30 @@ export class DndDimensionList extends Component {
         )
     }
 
-    render() {
-        const dimensionsList = this.props.dimensions
+    getDimensionItemsByFilter = filter =>
+        this.props.dimensions
+            .filter(filter)
             .filter(this.nameContainsFilterText)
             .map(this.renderItem)
 
+    render() {
+        const fixedDimensions = this.getDimensionItemsByFilter(dimension =>
+            Object.values(getFixedDimensions()).some(
+                fixedDim => fixedDim.id === dimension.id
+            )
+        )
+        const dynamicDimensions = this.getDimensionItemsByFilter(dimension =>
+            Object.values(getDynamicDimensions()).some(
+                dynDim => dynDim.id === dimension.id
+            )
+        )
+        const nonPredefinedDimensions = this.getDimensionItemsByFilter(
+            dimension =>
+                !Object.values(getPredefinedDimensions()).some(
+                    predefDim => predefDim.id === dimension.id
+                )
+        )
+
         return (
             <Droppable droppableId={SOURCE_DIMENSIONS} isDropDisabled={true}>
                 {provided => (
@@ -60,7 +82,32 @@ export class DndDimensionList extends Component {
                         ref={provided.innerRef}
                         {...provided.droppableProps}
                     >
-                        <ul className={styles.list}>{dimensionsList}</ul>
+                        <div className={styles.wrapper}>
+                            <div className={styles.section}>
+                                <h3 className={styles.header}>
+                                    Main dimensions
+                                </h3>
+                                <ul className={styles.list}>
+                                    {fixedDimensions}
+                                </ul>
+                            </div>
+                            <div className={styles.section}>
+                                <h3 className={styles.header}>
+                                    Other dimensions
+                                </h3>
+                                <ul className={styles.list}>
+                                    {dynamicDimensions}
+                                </ul>
+                            </div>
+                            <div className={styles.section}>
+                                <h3 className={styles.header}>
+                                    Your dimensions
+                                </h3>
+                                <ul className={styles.list}>
+                                    {nonPredefinedDimensions}
+                                </ul>
+                            </div>
+                        </div>
                         {provided.placeholder}
                     </div>
                 )}

packages/app/src/components/DimensionsPanel/DndDimensionsPanel.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import i18n from '@dhis2/d2-i18n'
 import { DimensionFilter } from '@dhis2/analytics'
+import { colors } from '@dhis2/ui-core'
 
 import DndDimensionList from './DndDimensionList'
 
@@ -22,11 +23,17 @@ export class DndDimensionsPanel extends Component {
         return (
             <div className={styles.container}>
                 <DimensionFilter
-                    style={{ paddingBottom: '6px' }}
-                    placeholder={i18n.t('Search dimensions')}
+                    style={{
+                        marginBottom: '6px',
+                        background: '#fff',
+                        border: `1px solid ${colors.grey400}`,
+                        borderRadius: '5px',
+                    }}
+                    placeholder={i18n.t('Filter dimensions')}
                     text={this.state.filterText}
                     onChange={this.onFilterTextChange}
                     onClear={this.onClearFilter}
+                    disableUnderline={true}
                 />
                 <DndDimensionList
                     filterText={this.state.filterText}

packages/app/src/components/DimensionsPanel/styles/DndDimensionList.module.css

@@ -4,11 +4,28 @@
     min-height: 30vh;
 }
 
-.list {
+.wrapper {
     position: absolute;
     width: 100%;
     height: 100%;
     overflow: auto;
     margin-top: 0px;
     padding: 0;
 }
+
+.list {
+    margin: 0;
+    padding: 0;
+}
+
+.header {
+    text-transform: uppercase;
+    font-size: 11px;
+    color: var(--colors-grey700);
+    margin: 5px 0;
+    letter-spacing: 0.3px;
+}
+
+.section:not(:last-child) {
+    margin-bottom: var(--spacers-dp24);
+}

packages/app/src/components/DimensionsPanel/styles/DndDimensionsPanel.module.css

@@ -3,6 +3,6 @@
     display: flex;
     flex-direction: column;
     background-color: #f4f6f8;
-    padding: 8px;
+    padding: 8px 8px 0 8px;
     overflow: hidden;
 }