fix(data-workspace): reduce header height (#108)

* fix(data-workspace): reduce header height

* chore: upgrade @dhis2/ui so it contains table header fixes

* fix: update broken imports

* fix: adress failing tests due to new layering mechanism

* chore: dedupe and refresh yarn lock

* fix(data-workspace): clean up CSS for overflowing table header text

package.json

@@ -38,7 +38,7 @@
     "dependencies": {
         "@dhis2/app-runtime": "^3.2.1",
         "@dhis2/prop-types": "^1.6.4",
-        "@dhis2/ui": "^7.2.1",
+        "@dhis2/ui": "^7.2.7",
         "history": "^5.0.1",
         "prop-types": "^15.7.2",
         "query-string": "^7.0.1",

src/app-context/app-provider.js

@@ -1,6 +1,6 @@
 import { useDataQuery } from '@dhis2/app-runtime'
-import { PropTypes } from '@dhis2/prop-types'
 import { Layer } from '@dhis2/ui'
+import PropTypes from 'prop-types'
 import React from 'react'
 import { Loader } from '../shared/index.js'
 import { AppContext } from './app-context.js'

src/data-workspace/display/table.js

@@ -27,7 +27,7 @@ DataTableToolbar.propTypes = {
 
 const Table = ({ title, columns, rows }) => (
     <>
-        <DataTable className={styles.dataTable}>
+        <DataTable className={styles.dataTable} width="auto">
             <TableHead>
                 <DataTableToolbar columns={columns.length}>
                     {title}

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

@@ -5,18 +5,8 @@
     font-weight: normal;
 }
 
-table.dataTable {
-    width: auto;
-}
-
-th.cell, td.cell {
-    height: auto;
-    min-height: 45px;
-    padding-top: 14px;
-    padding-bottom: 14px;
-}
-
-.labelCellContent, .labelCellContent {
+.labelCellContent,
+.labelCellContent {
     display: block;
     max-width: 480px;
 }

src/selection-context/selection-provider.js

@@ -1,4 +1,4 @@
-import { PropTypes } from '@dhis2/prop-types'
+import PropTypes from 'prop-types'
 import React, { useEffect, useReducer } from 'react'
 import { useAppContext } from '../app-context/index.js'
 import { pushStateToHistory } from '../navigation/index.js'

src/top-bar/context-select/context-select.test.js

@@ -1,10 +1,4 @@
-import {
-    IconChevronDown24,
-    IconChevronUp24,
-    Popover,
-    Tooltip,
-    Layer,
-} from '@dhis2/ui'
+import { IconChevronDown24, IconChevronUp24, Popover, Tooltip } from '@dhis2/ui'
 import { shallow } from 'enzyme'
 import React from 'react'
 import { ContextSelect } from './context-select.js'
@@ -80,7 +74,7 @@ describe('<ContextSelect>', () => {
         })
 
         it('calls onClose when the backdrop layer is clicked', () => {
-            wrapper.find(Popover).dive().find(Layer).simulate('click')
+            wrapper.find(Popover).dive().simulate('click')
 
             expect(onClose).toHaveBeenCalledTimes(1)
         })

src/top-bar/org-unit-select/org-unit-select.test.js

@@ -1,5 +1,5 @@
 import { CustomDataProvider } from '@dhis2/app-runtime'
-import { Popover, Layer, OrganisationUnitTree, Tooltip } from '@dhis2/ui'
+import { Popover, OrganisationUnitTree, Tooltip } from '@dhis2/ui'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { shallow } from 'enzyme'
@@ -272,7 +272,6 @@ describe('<OrgUnitSelect>', () => {
             .dive()
             .find(Popover)
             .dive()
-            .find(Layer)
             .simulate('click')
 
         expect(setOpenedSelect).toHaveBeenCalledTimes(1)

src/top-bar/period-select/period-select.test.js

@@ -1,5 +1,5 @@
 import { useConfig } from '@dhis2/app-runtime'
-import { Popover, Layer, MenuItem, Tooltip } from '@dhis2/ui'
+import { Popover, MenuItem, Tooltip } from '@dhis2/ui'
 import { shallow } from 'enzyme'
 import React from 'react'
 import { useAppContext } from '../../app-context/index.js'
@@ -234,7 +234,6 @@ describe('<PeriodSelect>', () => {
             .dive()
             .find(Popover)
             .dive()
-            .find(Layer)
             .simulate('click')
 
         expect(setOpenedSelect).toHaveBeenCalledTimes(1)

src/top-bar/workflow-select/workflow-select.test.js

@@ -1,4 +1,4 @@
-import { Popover, Layer } from '@dhis2/ui'
+import { Popover } from '@dhis2/ui'
 import { shallow } from 'enzyme'
 import React from 'react'
 import { useAppContext } from '../../app-context/index.js'
@@ -173,7 +173,6 @@ describe('<WorkflowSelect>', () => {
             .dive()
             .find(Popover)
             .dive()
-            .find(Layer)
             .simulate('click')
 
         expect(setOpenedSelect).toHaveBeenCalledTimes(1)

src/workflow-context/workflow-provider.js

@@ -1,6 +1,6 @@
 import { useDataQuery } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { PropTypes } from '@dhis2/prop-types'
+import PropTypes from 'prop-types'
 import React, { useEffect } from 'react'
 import { useSelectionContext } from '../selection-context/index.js'
 import { ErrorMessage, Loader, RetryButton } from '../shared/index.js'