feat: add flexibility to DataDimension

src/components/DataDimension/Calculation/CalculationModal.js

@@ -48,6 +48,7 @@ const CalculationModal = ({
     onClose,
     onDelete,
     displayNameProp,
+    height,
 }) => {
     const { show: showError } = useAlert((error) => error, { critical: true })
     const mutationParams = { onError: (error) => showError(error) }
@@ -311,6 +312,7 @@ const CalculationModal = ({
                                 <DataElementSelector
                                     displayNameProp={displayNameProp}
                                     onDoubleClick={addItem}
+                                    height={height}
                                 />
                                 <MathOperatorSelector onDoubleClick={addItem} />
                             </div>
@@ -484,6 +486,7 @@ CalculationModal.propTypes = {
         id: PropTypes.string,
         name: PropTypes.string,
     }),
+    height: PropTypes.string,
 }
 
 export default CalculationModal

src/components/DataDimension/Calculation/DataElementSelector.js

@@ -23,6 +23,8 @@ import {
 import DataElementOption from './DataElementOption.js'
 import styles from './styles/DataElementSelector.style.js'
 
+const SCROLLBOX_HEIGHT = '337px'
+
 const getOptions = () => ({
     [TOTALS]: i18n.t('Totals only'),
     [DETAIL]: i18n.t('Details only'),
@@ -123,7 +125,11 @@ DisaggregationSelector.propTypes = {
     onChange: PropTypes.func.isRequired,
 }
 
-const DataElementSelector = ({ displayNameProp, onDoubleClick }) => {
+const DataElementSelector = ({
+    displayNameProp,
+    onDoubleClick,
+    height = SCROLLBOX_HEIGHT,
+}) => {
     const dataEngine = useDataEngine()
 
     const [searchTerm, setSearchTerm] = useState('')
@@ -271,6 +277,7 @@ const DataElementSelector = ({ displayNameProp, onDoubleClick }) => {
                 <div
                     className="dimension-list-scrollbox"
                     ref={rootRef}
+                    style={{ height }}
                     onScroll={() => {
                         if (isSorting) {
                             rootRef.current.scrollTo({
@@ -319,6 +326,7 @@ const DataElementSelector = ({ displayNameProp, onDoubleClick }) => {
 DataElementSelector.propTypes = {
     displayNameProp: PropTypes.string.isRequired,
     onDoubleClick: PropTypes.func.isRequired,
+    height: PropTypes.string,
 }
 
 export default DataElementSelector

src/components/DataDimension/Calculation/styles/DataElementSelector.style.js

@@ -9,7 +9,6 @@ export default css`
     .dimension-list-scrollbox {
         position: relative;
         width: 100%;
-        height: 337px;
         overflow: hidden;
         overflow-y: auto;
         border: 1px solid ${colors.grey400};

src/components/DataDimension/DataDimension.js

@@ -31,6 +31,9 @@ const DataDimension = ({
     infoBoxMessage,
     onCalculationSave,
     visType,
+    height,
+    heightCalculation,
+    maxSelections,
 }) => {
     const { serverVersion } = useConfig()
 
@@ -130,6 +133,9 @@ const DataDimension = ({
                 infoDataItem={infoDataItem}
                 setInfoDataItem={setInfoDataItem}
                 onEditClick={onEditClick}
+                height={height}
+                heightCalculation={heightCalculation}
+                maxSelections={maxSelections}
             />
             {currentDataItem && (
                 <ItemOptionsSelector
@@ -143,6 +149,8 @@ const DataDimension = ({
                     setInfoDataItem={setInfoDataItem}
                     onClose={() => setCurrentDataItem()}
                     onEditClick={onEditClick}
+                    height={height}
+                    maxSelections={maxSelections}
                 />
             )}
             {infoDataItem && (
@@ -172,7 +180,10 @@ DataDimension.propTypes = {
     onSelect: PropTypes.func.isRequired,
     currentUser: PropTypes.object,
     enabledDataTypes: PropTypes.array,
+    height: PropTypes.string,
+    heightCalculation: PropTypes.string,
     infoBoxMessage: PropTypes.string,
+    maxSelections: PropTypes.number,
     visType: PropTypes.string,
     onCalculationSave: PropTypes.func,
 }

src/components/DataDimension/ItemOptionsSelector/ItemOptionsSelector.js

@@ -54,6 +54,8 @@ export const ItemOptionsSelector = ({
     onSelect,
     onClose,
     dataTest,
+    height = TRANSFER_HEIGHT,
+    maxSelections,
 }) => {
     const [state, setState] = useState({
         searchTerm: '',
@@ -235,8 +237,8 @@ export const ItemOptionsSelector = ({
                 rightHeader={
                     <p className="rightHeader">{i18n.t('Selected items')}</p>
                 }
-                enableOrderChange
-                height={TRANSFER_HEIGHT}
+                enableOrderChange={!maxSelections || maxSelections > 1}
+                height={height}
                 optionsWidth={TRANSFER_OPTIONS_WIDTH}
                 selectedWidth={TRANSFER_SELECTED_WIDTH}
                 selectedEmptyComponent={<SelectedEmptyPlaceholder />}
@@ -266,6 +268,7 @@ export const ItemOptionsSelector = ({
                         />
                     )
                 }}
+                maxSelections={maxSelections}
                 dataTest={`${dataTest}-option-view-mode-transfer`}
             />
             <style jsx>{styles}</style>
@@ -282,8 +285,10 @@ ItemOptionsSelector.propTypes = {
     onClose: PropTypes.func.isRequired,
     onSelect: PropTypes.func.isRequired,
     dataTest: PropTypes.string,
+    height: PropTypes.string,
     infoDataItem: PropTypes.object,
     itemsRef: PropTypes.object,
+    maxSelections: PropTypes.number,
     selectedItems: PropTypes.arrayOf(
         PropTypes.exact({
             label: PropTypes.string.isRequired,

src/components/DataDimension/ItemSelector/ItemSelector.js

@@ -136,6 +136,9 @@ const ItemSelector = ({
     onEditClick,
     isOptionViewMode,
     supportsEDI,
+    height = TRANSFER_HEIGHT,
+    heightCalculation,
+    maxSelections,
 }) => {
     const [state, setState] = useState({
         searchTerm: '',
@@ -411,8 +414,8 @@ const ItemSelector = ({
                         </div>
                     ) : undefined
                 }
-                enableOrderChange
-                height={TRANSFER_HEIGHT}
+                enableOrderChange={!maxSelections || maxSelections > 1}
+                height={height}
                 optionsWidth={TRANSFER_OPTIONS_WIDTH}
                 selectedWidth={TRANSFER_SELECTED_WIDTH}
                 selectedEmptyComponent={<SelectedEmptyPlaceholder />}
@@ -442,6 +445,7 @@ const ItemSelector = ({
                         /* eslint-enable react/prop-types */
                     />
                 )}
+                maxSelections={maxSelections}
                 dataTest={`${dataTest}-transfer`}
             />
             {currentCalculation && supportsEDI && (
@@ -451,6 +455,7 @@ const ItemSelector = ({
                     onClose={() => setCurrentCalculation()}
                     onDelete={onDeleteCalculation}
                     displayNameProp={displayNameProp}
+                    height={heightCalculation}
                 />
             )}
             <style jsx>{styles}</style>
@@ -464,10 +469,13 @@ ItemSelector.propTypes = {
     currentCalculation: PropTypes.object,
     dataTest: PropTypes.string,
     dataTypes: PropTypes.array,
+    height: PropTypes.string,
+    heightCalculation: PropTypes.string,
     infoBoxMessage: PropTypes.string,
     infoDataItem: PropTypes.object,
     isOptionViewMode: PropTypes.bool,
     itemsRef: PropTypes.object,
+    maxSelections: PropTypes.number,
     noItemsMessage: PropTypes.string,
     rightFooter: PropTypes.node,
     selectedItems: PropTypes.arrayOf(