feat: toolbar UI update with hoverable menu (#1478)

BREAKING CHANGE The `FileMenu` is now using the new `HoverMenuBar` components which makes this version of the `FileMenu` incompatible with the previous version. Apps will be need to update their toolbar and file menu before using this version of analytics.
dhis2 · Jun 20, 2023 · 244145d · 244145d
1 parent cb51518
commit 244145d
Show file tree

Hide file tree

Showing 33 changed files with 1,841 additions and 457 deletions.
diff --git a/.github/workflows/node-publish.yml b/.github/workflows/node-publish.yml
@@ -32,7 +32,7 @@ jobs:
                   token: ${{env.GH_TOKEN}}
             - uses: actions/setup-node@v1
               with:
-                  node-version: 12.x
+                  node-version: 16.x
 
             - name: Install
               run: yarn install --frozen-lockfile

diff --git a/.github/workflows/node-test.yml b/.github/workflows/node-test.yml
@@ -10,7 +10,7 @@ jobs:
             - uses: actions/checkout@v2
             - uses: actions/setup-node@v1
               with:
-                  node-version: 12.x
+                  node-version: 16.x
 
             - name: Install
               run: yarn install --frozen-lockfile

diff --git a/config/setupTestingLibrary.js b/config/setupTestingLibrary.js
@@ -0,0 +1,5 @@
+import { configure } from '@testing-library/dom'
+
+configure({
+    testIdAttribute: 'data-test',
+})
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2023-04-18T08:41:27.838Z\n"
-"PO-Revision-Date: 2023-04-18T08:41:27.838Z\n"
+"POT-Creation-Date: 2023-05-24T12:55:52.925Z\n"
+"PO-Revision-Date: 2023-05-24T12:55:52.925Z\n"
 
 msgid "view only"
 msgstr "view only"
@@ -856,6 +856,9 @@ msgstr "Financial Years"
 msgid "Years"
 msgstr "Years"
 
+msgid "Interpretations and details"
+msgstr "Interpretations and details"
+
 msgid "Translating to"
 msgstr "Translating to"
 

diff --git a/jest.config.js b/jest.config.js
@@ -1,4 +1,7 @@
 module.exports = {
     testPathIgnorePatterns: ['/node_modules/', '/build/'],
-    setupFilesAfterEnv: ['<rootDir>/config/setupEnzyme.js'],
+    setupFilesAfterEnv: [
+        '<rootDir>/config/setupEnzyme.js',
+        '<rootDir>/config/setupTestingLibrary.js',
+    ],
 }
diff --git a/package.json b/package.json
@@ -40,6 +40,8 @@
         "@storybook/addons": "^6.5.9",
         "@storybook/preset-create-react-app": "^3.1.7",
         "@storybook/react": "^6.1.14",
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^12.1.5",
         "enzyme": "^3.9.0",
         "enzyme-adapter-react-16": "^1.15.6",
         "fs-extra": "^10.1.0",

diff --git a/src/__demo__/FileMenu.stories.js b/src/__demo__/FileMenu.stories.js
@@ -2,6 +2,7 @@ import { Provider } from '@dhis2/app-runtime'
 import { storiesOf } from '@storybook/react'
 import React from 'react'
 import { FileMenu } from '../components/FileMenu/FileMenu.js'
+import { HoverMenuBar } from '../components/Toolbar/index.js'
 
 const configMock = {
     baseUrl: 'http://localhost:8080',
@@ -61,24 +62,30 @@ const visReadonlyObject = {
 storiesOf('FileMenu', module)
     .add('Simple', () => (
         <Provider config={configMock}>
-            <FileMenu currentUser={user} fileType="visualization" />
+            <HoverMenuBar>
+                <FileMenu currentUser={user} fileType="visualization" />
+            </HoverMenuBar>
         </Provider>
     ))
     .add('With AO', () => (
         <Provider config={configMock}>
-            <FileMenu
-                currentUser={user}
-                fileType="visualization"
-                fileObject={visObject}
-            />
+            <HoverMenuBar>
+                <FileMenu
+                    currentUser={user}
+                    fileType="visualization"
+                    fileObject={visObject}
+                />
+            </HoverMenuBar>
         </Provider>
     ))
     .add('With readonly AO', () => (
         <Provider config={configMock}>
-            <FileMenu
-                currentUser={user}
-                fileType="visualization"
-                fileObject={visReadonlyObject}
-            />
+            <HoverMenuBar>
+                <FileMenu
+                    currentUser={user}
+                    fileType="visualization"
+                    fileObject={visReadonlyObject}
+                />
+            </HoverMenuBar>
         </Provider>
     ))
diff --git a/src/__demo__/Toolbar.stories.js b/src/__demo__/Toolbar.stories.js
@@ -0,0 +1,78 @@
+import { storiesOf } from '@storybook/react'
+import React, { useState } from 'react'
+import {
+    HoverMenuBar,
+    HoverMenuDropdown,
+    HoverMenuList,
+    HoverMenuListItem,
+    InterpretationsAndDetailsToggler,
+    Toolbar,
+    ToolbarSidebar,
+    UpdateButton,
+} from '../components/Toolbar/index.js'
+
+function ToolbarWithState() {
+    const [isHidden, setIsHidden] = useState(false)
+    const [isSidebarShowing, setIsSidebarShowing] = useState(false)
+    return (
+        <Toolbar>
+            <ToolbarSidebar isHidden={isHidden}>
+                <span>Toolbar side bar</span>
+                <a
+                    style={{
+                        paddingLeft: 12,
+                        textDecoration: 'underline',
+                        cursor: 'pointer',
+                    }}
+                    onClick={() => setIsHidden(true)}
+                >
+                    click to hide
+                </a>
+            </ToolbarSidebar>
+            <UpdateButton />
+            <HoverMenuBar>
+                <HoverMenuDropdown label="Menu A">
+                    <HoverMenuList>
+                        <HoverMenuListItem label="Menu item A.1" />
+                        <HoverMenuListItem label="Menu item A.2" />
+                        <HoverMenuListItem label="Menu item A.3" />
+                    </HoverMenuList>
+                </HoverMenuDropdown>
+                <HoverMenuDropdown label="Menu B">
+                    <HoverMenuList>
+                        <HoverMenuListItem label="Menu item B.1">
+                            <HoverMenuListItem label="Menu item B.1.1" />
+                            <HoverMenuListItem label="Menu item B.1.2" />
+                            <HoverMenuListItem label="Menu item B.1.3" />
+                        </HoverMenuListItem>
+                        <HoverMenuListItem label="Menu item B.2">
+                            <HoverMenuListItem label="Menu item B.2.1" />
+                            <HoverMenuListItem label="Menu item B.2.2" />
+                            <HoverMenuListItem label="Menu item B.2.3" />
+                        </HoverMenuListItem>
+                        <HoverMenuListItem label="Menu item B.3" disabled>
+                            <HoverMenuListItem label="Menu item B.3.1" />
+                            <HoverMenuListItem label="Menu item B.3.2" />
+                            <HoverMenuListItem label="Menu item B.3.3" />
+                        </HoverMenuListItem>
+                    </HoverMenuList>
+                </HoverMenuDropdown>
+                <HoverMenuDropdown label="Menu C" disabled>
+                    <HoverMenuList>
+                        <HoverMenuListItem label="Menu item C.1" />
+                        <HoverMenuListItem label="Menu item C.2" />
+                        <HoverMenuListItem label="Menu item C.3" />
+                    </HoverMenuList>
+                </HoverMenuDropdown>
+            </HoverMenuBar>
+            <InterpretationsAndDetailsToggler
+                isShowing={isSidebarShowing}
+                onClick={() => setIsSidebarShowing((current) => !current)}
+            />
+        </Toolbar>
+    )
+}
+
+storiesOf('Toolbar', module).add('default', () => {
+    return <ToolbarWithState />
+})