(feat) O3-3390: Implement the help menu #1034

Vijaykv5 · 2024-06-08T17:44:46Z

Requirements

This PR has a title that briefly describes the work done including the ticket number. Ensure your PR title includes a conventional commit label (such as feat, fix, or chore, among others). See existing PR titles for inspiration.

For changes to apps

My work conforms to the O3 Styleguide and design documentation.

If applicable

My work includes tests or is validated by existing tests.
I have updated the esm-framework mock to reflect any API changes I have made.

Summary

This PR implements the help menu along with it's submenu in a new module named esm-help-menu-app.
the submenu consists of walkthroughs and view tutorials, contact us, release notes and docs.

Screenshots

help-menu.mov

Related Issue

O3-3390

Other

The help menu is design as per these Zeplin Designs

Vijaykv5 · 2024-06-08T18:18:25Z

@Piumal1999 @jayasanka-sack @ibacher @denniskigen seeking you review
Thanks!

ibacher

A couple of broader things:

Ideally, this would be located where the devtools button is. Maybe we move the devtools.
I'm not a massive fan of the modal side menu. I think a larger modal in the middle of the screen makes more sense.
The release notes should be an accordion that expands to show the notes.

packages/apps/esm-help-menu-app/src/helpMenu/subHelpMenu/tutorial.tsx

packages/apps/esm-help-menu-app/src/helpMenu/help-popup.component.tsx

packages/apps/esm-help-menu-app/src/helpMenu/help-popup.styles.scss

jayasanka-sack · 2024-06-18T07:36:06Z

packages/apps/esm-help-menu-app/src/helpMenu/help-popup.component.tsx

+        <button className={styles.helpButton} onClick={props.close}>
+          {t('releaseNotes', 'Release Notes')}
+        </button>
+        <button className={styles.helpButton} onClick={handleTutorialsModalOpen}>
+          {t('tutorials', 'Tutorials')}
+        </button>
+        <button className={styles.helpButton} onClick={props.close}>
+          {t('contactUs', 'Contact us')}
+        </button>
+        <button className={styles.helpButton} onClick={props.close}>
+          {t('docs', 'Docs')}
+        </button>
+        <button className={styles.helpButton} onClick={props.close}>
+          {t('feedbackForum', 'Feedback Forum')}
+        </button>
+        <button className={styles.helpButton} onClick={props.close}>
+          {t('version', 'OpenMRS 3.0.1')}
+        </button>


@Vijaykv5 The extension slot should come here, right? Not the help.component.tsx

Suggested change

<button className={styles.helpButton} onClick={props.close}>

{t('releaseNotes', 'Release Notes')}

</button>

<button className={styles.helpButton} onClick={handleTutorialsModalOpen}>

{t('tutorials', 'Tutorials')}

</button>

<button className={styles.helpButton} onClick={props.close}>

{t('contactUs', 'Contact us')}

</button>

<button className={styles.helpButton} onClick={props.close}>

{t('docs', 'Docs')}

</button>

<button className={styles.helpButton} onClick={props.close}>

{t('feedbackForum', 'Feedback Forum')}

</button>

<button className={styles.helpButton} onClick={props.close}>

{t('version', 'OpenMRS 3.0.1')}

</button>

<ExtensionSlot className={styles.helpMenuExtension} name="help-menu-slot"/>

yeah that's right!
I thought the help menu button should also have to be an extension.
Thanks @jayasanka-sack

@jayasanka-sack, just to clarify, we will be using extension slots in two scenarios, right?

To get the list of items in the help menu

To load the tutorials list

By the way, if we do the suggested change now, we will have to create an extension for the help-menu-slot that has an entry point to packages/apps/esm-help-menu-app/src/helpMenu/subHelpMenu/tutorial.tsx component. Otherwise, there won’t be a way to open the tutorial modal.

just to clarify, we will be using extension slots in two scenarios, right?

@Piumal1999 yes

packages/apps/esm-help-menu-app/src/helpMenu/subHelpMenu/tutorial.tsx

packages/apps/esm-help-menu-app/src/helpMenu/help.component.test.tsx

packages/apps/esm-help-menu-app/src/helpMenu/help-popup.styles.scss

packages/apps/esm-help-menu-app/src/helpMenu/help.component.tsx

Piumal1999 · 2024-06-19T10:01:28Z

packages/apps/esm-help-menu-app/src/helpMenu/help-popup.component.tsx

+        <button className={styles.helpButton} onClick={props.close}>
+          {t('releaseNotes', 'Release Notes')}
+        </button>
+        <button className={styles.helpButton} onClick={handleTutorialsModalOpen}>
+          {t('tutorials', 'Tutorials')}
+        </button>
+        <button className={styles.helpButton} onClick={props.close}>
+          {t('contactUs', 'Contact us')}
+        </button>
+        <button className={styles.helpButton} onClick={props.close}>
+          {t('docs', 'Docs')}
+        </button>
+        <button className={styles.helpButton} onClick={props.close}>
+          {t('feedbackForum', 'Feedback Forum')}
+        </button>
+        <button className={styles.helpButton} onClick={props.close}>
+          {t('version', 'OpenMRS 3.0.1')}
+        </button>


@jayasanka-sack, just to clarify, we will be using extension slots in two scenarios, right?

To get the list of items in the help menu

To load the tutorials list

Piumal1999 · 2024-06-19T10:10:33Z

packages/apps/esm-help-menu-app/src/helpMenu/help-popup.component.tsx

+        <button className={styles.helpButton} onClick={props.close}>
+          {t('releaseNotes', 'Release Notes')}
+        </button>
+        <button className={styles.helpButton} onClick={handleTutorialsModalOpen}>
+          {t('tutorials', 'Tutorials')}
+        </button>
+        <button className={styles.helpButton} onClick={props.close}>
+          {t('contactUs', 'Contact us')}
+        </button>
+        <button className={styles.helpButton} onClick={props.close}>
+          {t('docs', 'Docs')}
+        </button>
+        <button className={styles.helpButton} onClick={props.close}>
+          {t('feedbackForum', 'Feedback Forum')}
+        </button>
+        <button className={styles.helpButton} onClick={props.close}>
+          {t('version', 'OpenMRS 3.0.1')}
+        </button>


By the way, if we do the suggested change now, we will have to create an extension for the help-menu-slot that has an entry point to packages/apps/esm-help-menu-app/src/helpMenu/subHelpMenu/tutorial.tsx component. Otherwise, there won’t be a way to open the tutorial modal.

Vijaykv5 · 2024-06-20T20:18:13Z

The updated changes looks like this
As we discussed the tutorials would be another extension, so I moved that from this PR.
I also couldn't figure out for feedback forum and OpenMRS 3.0.1 field as sub menu items

helpmenu-new.mov

cc : @jayasanka-sack @Piumal1999

Piumal1999

Good job @Vijaykv5. I requested few minor changes.

Btw, for the contact us, docs, and release notes buttons, we could use a single reusable component, as all three have the same structure, styles, and behavior. But we can do it later as this PR needs to be merged as soon as possible in order to continue the project.

packages/apps/esm-help-menu-app/src/help-menu/components/release-notes.component.tsx

packages/apps/esm-help-menu-app/src/help-menu/components/contact-us.component.tsx

packages/apps/esm-help-menu-app/src/help-menu/components/docs.component.tsx

packages/apps/esm-help-menu-app/src/index.ts

packages/apps/esm-help-menu-app/src/root.component.tsx

packages/apps/esm-help-menu-app/src/help-menu/components/contact-us.component.tsx

Piumal1999 · 2024-06-24T16:50:40Z

packages/apps/esm-help-menu-app/src/help-menu/help.component.tsx

+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (!event.target.closest(`.${styles.helpMenuButton}`) && !event.target.closest(`.${styles.popup}`)) {


It would be better if we could identify the event in some other way than using styles. maybe with react 'ref's

Piumal1999

Looks good to me

gracepotma · 2024-06-25T15:02:46Z

Could we change "Contact us" to "Community Forum" and link that to talk.openmrs.org ?

jayasanka-sack · 2024-06-26T12:47:36Z

Latest screenshot:

jayasanka-sack · 2024-06-26T13:46:24Z

Ideally, this would be located where the devtools button is. Maybe we move the devtools.

I'm not a massive fan of the modal side menu. I think a larger modal in the middle of the screen makes more sense.

The release notes should be an accordion that expands to show the notes.

@paulsonder @gracepotma do you have any input on this suggestion?

This is the provided design:
https://zpl.io/5E6PWgW

Regarding the the icon location, I'm all in with Ian's suggestion, but I'm not sure where to move the devtools icon. Any ideas?

jayasanka-sack · 2024-07-01T16:27:26Z

@Vijaykv5 could you please check why the CI build is failing?

denniskigen

Good start, @Vijaykv5. I've left some feedback.

denniskigen · 2024-06-27T12:59:25Z

packages/apps/esm-help-menu-app/package.json

+  "name": "@openmrs/esm-help-menu-app",
+  "version": "5.6.0",
+  "license": "MPL-2.0",
+  "description": " A microfrontend that provides a help menu for the OpenMRS Microfrontend Framework",


Suggested change

"description": " A microfrontend that provides a help menu for the OpenMRS Microfrontend Framework",

"description": " A microfrontend that provides a help menu for O3",

denniskigen · 2024-07-01T15:27:09Z

packages/apps/esm-help-menu-app/tsconfig.json

+    ],
+    "noEmit": true
+  },
+  "include": ["src/**/*", "../esm-help-menu-app/src/help-menu copy"]


Suggested change

"include": ["src/**/*", "../esm-help-menu-app/src/help-menu copy"]

"include": ["src/**/*"]

Why is the second bit necessary?

denniskigen · 2024-07-01T15:29:00Z

packages/apps/esm-help-menu-app/src/setup-tests.ts

+(window as any).importMapOverrides = {
+  getOverrideMap: jest.fn().mockReturnValue({ imports: {} }),
+};


Suggested change

(window as any).importMapOverrides = {

getOverrideMap: jest.fn().mockReturnValue({ imports: {} }),

};

import '@testing-library/jest-dom';

(window as any).importMapOverrides = {

getOverrideMap: jest.fn().mockReturnValue({ imports: {} }),

};

denniskigen · 2024-07-01T15:29:15Z

packages/apps/esm-help-menu-app/src/routes.json

+  ],
+  "extensions": [
+    {
+      "name": "release-note",


Suggested change

"name": "release-note",

"name": "release-notes",

denniskigen · 2024-07-01T15:30:22Z

packages/apps/esm-help-menu-app/src/index.ts

+import Release from './help-menu/components/release-notes.component';
+import Docs from './help-menu/components/docs.component';
+import contactus from './help-menu/components/contact-us.component';


Suggested change

import Release from './help-menu/components/release-notes.component';

import Docs from './help-menu/components/docs.component';

import contactus from './help-menu/components/contact-us.component';

import ReleaseNotesComponent from './help-menu/components/release-notes.component';

import DocsComponent from './help-menu/components/docs.component';

import ContactUsComponent from './help-menu/components/contact-us.component';

denniskigen · 2024-07-01T16:47:52Z

packages/apps/esm-help-menu-app/src/help-menu/help.component.tsx

+      <div role="button" onClick={toggleHelpMenu} ref={helpMenuButtonRef} className={classNames(styles.helpMenuButton)}>
+        <Help size={24} />
+      </div>
+      {helpMenuOpen && (
+        <div ref={popupRef}>
+          <HelpMenuPopup />
+        </div>
+      )}


Suggested change

<div role="button" onClick={toggleHelpMenu} ref={helpMenuButtonRef} className={classNames(styles.helpMenuButton)}>

<Help size={24} />

</div>

{helpMenuOpen && (

<div ref={popupRef}>

<HelpMenuPopup />

</div>

)}

<button

aria-expanded={helpMenuOpen}

aria-controls="help-menu-popup"

onClick={toggleHelpMenu}

ref={helpMenuButtonRef}

className={classNames(styles.helpMenuButton)}

>

<Help size={24} />

</button>

{helpMenuOpen && (

<div id="help-menu-popup" ref={popupRef} className={styles.helpMenuPopup}>

<HelpMenuPopup />

</div>

)}

denniskigen · 2024-07-01T16:48:23Z

packages/apps/esm-help-menu-app/src/help-menu/help.styles.css

This file should have a .scss extension.

denniskigen · 2024-07-01T16:48:40Z

packages/apps/esm-help-menu-app/src/help-menu/help.styles.css

+  z-index: 7900;
+  background-color: #c6c6c6;
+  height: 2.5rem !important;
+  width: 2.5rem !important;
+  bottom: 5rem;
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  right: 0.5rem;
+  border-radius: 2rem;


Suggested change

z-index: 7900;

background-color: #c6c6c6;

height: 2.5rem !important;

width: 2.5rem !important;

bottom: 5rem;

position: fixed;

display: flex;

justify-content: center;

align-items: center;

right: 0.5rem;

border-radius: 2rem;

z-index: 7900;

background-color: white;

height: 2.5rem !important;

width: 2.5rem !important;

bottom: 5rem;

position: fixed;

display: flex;

justify-content: center;

align-items: center;

right: 0.5rem;

border: none;

box-shadow:

0 1px 3px rgba(0, 0, 0, 0.1),

0 1px 2px -1px rgba(0, 0, 0, 0.1);

border-radius: 2rem;

To get the button aligned with https://zpl.io/5E6PWgW.

Just realized the link I posted might not be the latest available design. If not, feel free to ignore the background color change suggestion above.

Yes that's the latest design @denniskigen
Thank you :)

denniskigen · 2024-07-01T16:50:18Z

packages/apps/esm-help-menu-app/jest.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+  transform: {
+    '\\.(m?j|t)sx?$': ['@swc/jest'],


Suggested change

'\\.(m?j|t)sx?$': ['@swc/jest'],

'^.+\\.tsx?$': ['@swc/jest'],

denniskigen · 2024-07-01T16:50:44Z

packages/apps/esm-help-menu-app/jest.config.js

+  },
+  setupFiles: ['<rootDir>/src/setup-tests.ts'],
+  moduleNameMapper: {
+    'lodash-es': 'lodash',


Suggested change

'lodash-es': 'lodash',

'lodash-es': 'lodash',

'^lodash-es/(.*)$': 'lodash/$1',

Vijaykv5 · 2024-07-01T18:32:23Z

Latest changes looks like this

help-menu.updated.mov

Piumal1999 · 2024-07-02T07:25:11Z

packages/apps/esm-help-menu-app/package.json

+    "@carbon/react": "1.37.0",
+    "fuzzy": "^0.1.3"
+  }
+}


Suggested change

}

}

jayasanka-sack

Thanks @Vijaykv5 !

Merging this PR because the dev tools icon is only visible to admins, who rarely use the help functionality. However, we should discuss a proper decision in the next UX call.

Vijaykv5 added 2 commits June 13, 2024 17:36

(feat) : added help menu

89811ec

added modal for tutorial

9676f0e

Vijaykv5 force-pushed the feat/esm-help branch from 87b2d1c to 9676f0e Compare June 13, 2024 12:07

ibacher requested changes Jun 13, 2024

View reviewed changes

Vijaykv5 marked this pull request as draft June 14, 2024 15:40

Vijaykv5 added 3 commits June 15, 2024 18:38

Merge branch 'openmrs:main' into feat/esm-help

80e2af6

Display strings made translatable

0288629

remove spacers and adding extension for help

009a0bb

jayasanka-sack requested a review from Piumal1999 June 17, 2024 07:28

jayasanka-sack reviewed Jun 18, 2024

View reviewed changes

Merge branch 'openmrs:main' into feat/esm-help

ceba6ad

Piumal1999 reviewed Jun 19, 2024

View reviewed changes

Vijaykv5 added 3 commits June 19, 2024 21:19

Merge branch 'openmrs:main' into feat/esm-help

ffc1973

navigate to home and remove spacers

6b5aea1

separated components and made as extensions

8c44502

Vijaykv5 requested review from jayasanka-sack and Piumal1999 June 20, 2024 20:18

Piumal1999 reviewed Jun 23, 2024

View reviewed changes

Vijaykv5 added 2 commits June 24, 2024 11:56

Merge branch 'openmrs:main' into feat/esm-help

ec1071e

Fix : minor changes

9871ab2

Vijaykv5 requested a review from Piumal1999 June 24, 2024 06:46

Piumal1999 reviewed Jun 24, 2024

View reviewed changes

Piumal1999 approved these changes Jun 24, 2024

View reviewed changes

minor fix in the event handler

2e1a1cc

Vijaykv5 marked this pull request as ready for review June 24, 2024 17:50

Vijaykv5 requested a review from Piumal1999 June 24, 2024 17:50

Merge branch 'openmrs:main' into feat/esm-help

0970c1b

Vijaykv5 added 2 commits June 26, 2024 11:20

added arrow icon and renamed to community forum

95bdf58

Changed to lowercase

9987aa5

jayasanka-sack changed the title ~~(feat) O3-3390 : Implement Help Menu for User Onboardings~~ (feat) O3-3390 : Implement the help menu Jun 26, 2024

Merge branch 'openmrs:main' into feat/esm-help

e280f0e

denniskigen reviewed Jul 1, 2024

View reviewed changes

Vijaykv5 added 3 commits July 1, 2024 23:12

Merge branch 'openmrs:main' into feat/esm-help

fd1cc1f

Added styles for extension slot

0fee890

(fix) : minor updations

137d028

Vijaykv5 requested a review from denniskigen July 1, 2024 18:24

Piumal1999 reviewed Jul 2, 2024

View reviewed changes

denniskigen changed the title ~~(feat) O3-3390 : Implement the help menu~~ (feat) O3-3390: Implement the help menu Jul 2, 2024

Vijaykv5 added 2 commits July 2, 2024 18:55

Merge branch 'openmrs:main' into feat/esm-help

65195b6

add space at the end

29189f0

jayasanka-sack approved these changes Jul 2, 2024

View reviewed changes

jayasanka-sack merged commit b230d99 into openmrs:main Jul 2, 2024
10 of 11 checks passed

Vijaykv5 deleted the feat/esm-help branch July 2, 2024 15:21

Vijaykv5 mentioned this pull request Jul 10, 2024

(style) O3-3579 : Changing the styles for help menu and devtools #1079

Merged

4 tasks

Twiineenock pushed a commit to Twiineenock/openmrs-esm-core that referenced this pull request Jul 18, 2024

(feat) O3-3390: Implement the help menu (openmrs#1034)

85c14b3

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(feat) O3-3390: Implement the help menu #1034

(feat) O3-3390: Implement the help menu #1034

Vijaykv5 commented Jun 8, 2024 •

edited

Loading

Vijaykv5 commented Jun 8, 2024

ibacher left a comment

jayasanka-sack Jun 18, 2024

Vijaykv5 Jun 18, 2024 •

edited

Loading

Piumal1999 Jun 19, 2024

Piumal1999 Jun 19, 2024 •

edited

Loading

jayasanka-sack Jun 20, 2024

Piumal1999 Jun 19, 2024

Piumal1999 Jun 19, 2024 •

edited

Loading

Vijaykv5 commented Jun 20, 2024 •

edited by jayasanka-sack

Loading

Piumal1999 left a comment

Piumal1999 Jun 24, 2024 •

edited

Loading

Piumal1999 left a comment

gracepotma commented Jun 25, 2024

jayasanka-sack commented Jun 26, 2024

jayasanka-sack commented Jun 26, 2024 •

edited

Loading

jayasanka-sack commented Jul 1, 2024

denniskigen left a comment

denniskigen Jun 27, 2024

denniskigen Jul 1, 2024

denniskigen Jul 1, 2024

denniskigen Jul 1, 2024

denniskigen Jul 1, 2024

denniskigen Jul 1, 2024

denniskigen Jul 1, 2024

denniskigen Jul 1, 2024

denniskigen Jul 1, 2024

denniskigen Jul 1, 2024

Vijaykv5 Jul 1, 2024

denniskigen Jul 1, 2024

denniskigen Jul 1, 2024

Vijaykv5 commented Jul 1, 2024

Piumal1999 Jul 2, 2024

jayasanka-sack left a comment •

edited

Loading

	"description": " A microfrontend that provides a help menu for the OpenMRS Microfrontend Framework",
	"description": " A microfrontend that provides a help menu for O3",

	"include": ["src/*/", "../esm-help-menu-app/src/help-menu copy"]
	"include": ["src/*/"]

	'\\.(m?j\|t)sx?$': ['@swc/jest'],
	'^.+\\.tsx?$': ['@swc/jest'],

	'lodash-es': 'lodash',
	'lodash-es': 'lodash',
	'^lodash-es/(.*)$': 'lodash/$1',

(feat) O3-3390: Implement the help menu #1034

(feat) O3-3390: Implement the help menu #1034

Conversation

Vijaykv5 commented Jun 8, 2024 • edited Loading

Requirements

For changes to apps

If applicable

Summary

Screenshots

Related Issue

Other

Vijaykv5 commented Jun 8, 2024

ibacher left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Vijaykv5 Jun 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Piumal1999 Jun 19, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Piumal1999 Jun 19, 2024 • edited Loading

Choose a reason for hiding this comment

Vijaykv5 commented Jun 20, 2024 • edited by jayasanka-sack Loading

Piumal1999 left a comment

Choose a reason for hiding this comment

Piumal1999 Jun 24, 2024 • edited Loading

Choose a reason for hiding this comment

Piumal1999 left a comment

Choose a reason for hiding this comment

gracepotma commented Jun 25, 2024

jayasanka-sack commented Jun 26, 2024

jayasanka-sack commented Jun 26, 2024 • edited Loading

jayasanka-sack commented Jul 1, 2024

denniskigen left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Vijaykv5 commented Jul 1, 2024

Choose a reason for hiding this comment

jayasanka-sack left a comment • edited Loading

Choose a reason for hiding this comment

Vijaykv5 commented Jun 8, 2024 •

edited

Loading

Vijaykv5 Jun 18, 2024 •

edited

Loading

Piumal1999 Jun 19, 2024 •

edited

Loading

Piumal1999 Jun 19, 2024 •

edited

Loading

Vijaykv5 commented Jun 20, 2024 •

edited by jayasanka-sack

Loading

Piumal1999 Jun 24, 2024 •

edited

Loading

jayasanka-sack commented Jun 26, 2024 •

edited

Loading

jayasanka-sack left a comment •

edited

Loading