OCLOMRS-1056: Unified OCL and OpenMRS Dictionary Manager Experience #750

suruchee · 2021-09-28T04:13:51Z

JIRA TICKET NAME:

Unified OCL and OpenMRS Dictionary Manager Experience

Summary:

AppIcon is added in the header and three buttons to link to OCL TermBrowser, OpenMRS Dictionary Manager, and Bulk importer.

coveralls · 2021-09-28T04:32:16Z

Coverage decreased (-0.1%) to 46.54% when pulling f7362b0 on suruchee:OCLOMRS-1056 into da18b22 on openmrs:master.

hadijahkyampeire

Nice work @suruchee , just a few suggestions, and UI/UX improvements. Also, I looked at the document with the mocks, we are missing some styles in this PR, I will attach some screenshots to show what I think we should have.

hadijahkyampeire · 2021-09-28T11:03:35Z

src/components/AppsMenu.tsx

+                    </Link>
+                  </MenuItem>
+                  <MenuItem onClick={handleClose} className={classes.menuItem}>
+                    <a


Can we make these tags open in a new tab so that the user does not completely loose their previous page? Just adding target='_blank' rel='noreferrer' will do that.

Thanks for your review @hadijahkyampeire, I have updated as per your suggestions. I missed a few of the UI changes by looking into the OCL site.

It's probably preferable to use the MaterialUI Link class here.

hadijahkyampeire · 2021-09-28T11:04:51Z

src/components/AppsMenu.tsx

+                    </a>
+                  </MenuItem>
+                  <MenuItem onClick={handleClose} className={classes.menuItem}>
+                    <Link to="/" className={classes.link}>


I am not sure why we need to link to exactly where the user is because this is what this link does, just wondering.

This is to create a consistent UI feel for users between OCL and dictionary manager as you can view it in https://app.openconceptlab.org/#/ apps menu

hadijahkyampeire · 2021-09-28T11:05:06Z

src/components/AppsMenu.tsx

+              <ClickAwayListener onClickAway={handleClose}>
+                <MenuList autoFocusItem={open} id="menu-list-grow">
+                  <MenuItem onClick={handleClose} className={classes.menuItem}>
+                    <a href={getOCLURL()} className={classes.link}>


Also make this open in a new tab.

hadijahkyampeire · 2021-09-28T11:09:36Z

This is what I see on this PR.

This is what I think we need to make it so that it looks much more like what is in the mocks.

Just adding some background color, changing the color of the icon, and increasing on the margin-top for the menu box. Let me know if you need any help with any of these.

hadijahkyampeire

Thanks for the changes @suruchee , LGTM

hadijahkyampeire · 2021-09-28T17:47:50Z

@ibacher how do you see this?

ibacher

Thanks @suruchee for this! I've made some small comments on a couple of things. However, I have some slightly larger comments focused on where we're placing this and how this looks:

Why don't we just put this in the left nav bar the way the OCL app does?
The icons should be vertically stacked rather than horizontally spread, as this leads to a better mobile experience (and occupies less screen real estate).

ibacher · 2021-09-28T18:29:48Z

src/components/AppsMenu.tsx

+                    </Link>
+                  </MenuItem>
+                  <MenuItem onClick={handleClose} className={classes.menuItem}>
+                    <a


It's probably preferable to use the MaterialUI Link class here.

ibacher · 2021-09-28T18:33:46Z

src/components/OpenMRSLogo.tsx

+  HTMLDivElement
+  >> = () => {
+  return (
+      <img src="/openmrs_logo_white.gif"  alt={"openmrs"} style={{width:"30px"}} />


Probably best to use a SVG rather than the GIF here. @suruchee: I've sent you an SVG of the OMRS logo via Slack.

ibacher · 2021-09-28T18:36:38Z

src/utils/utils.ts

@@ -119,3 +119,24 @@ export function stableSort<T>(array: T[], comparator: (a: T, b: T) => number) {
  });
  return stabilizedThis.map(el => el[0]);
 }
+// @ts-ignore
+export const getEnv = forURL => {


I don't like anything where we just use a blanket //@ts-ignore.

Rather than this, it's probably better to use the OCL_SIGNUP_URL constant we already have or even just evolve that to take the OCL application server name and we can generate the signup URL and this part from it.

suruchee · 2021-09-29T05:03:34Z

Thanks @suruchee for this! I've made some small comments on a couple of things. However, I have some slightly larger comments focused on where we're placing this and how this looks:

Why don't we just put this in the left nav bar the way the OCL app does?

The icons should be vertically stacked rather than horizontally spread, as this leads to a better mobile experience (and occupies less screen real estate).

@ibacher, I could not understand your comment about the UI, as the current OCL UI is

ibacher · 2021-09-29T12:21:46Z

@suruchee I was talking about this:

(It's what you get if you click on the wrench while the toolbar is collapsed)

suruchee · 2021-09-29T12:30:47Z

@ibacher, do you mean to remove the appIcon and only have the wrench in the left navbar as it is in OCL or to include both?

ibacher · 2021-09-29T12:34:54Z

@suruchee I'd be in favour of removing the app icon. This is, I think, more in keeping with Material Design's overall layout that tries to keep navigation all in the left bar and reserve the spots on the app bar for in-app actions.

ibacher · 2021-09-30T16:40:47Z

PS Though on this that I hadn't expressed: we should still use that grid icon to indicate visually that it is an app switcher and not the wrench icon.

suruchee · 2021-10-05T15:34:09Z

@ibacher, please review the updated change.

ibacher

@suruchee Nice work! I've got a few more things, largely to ensure that we avoid as much hard-coding of both layouts and URLs as we can.

ibacher · 2021-10-05T17:41:10Z

src/components/AppsMenu.tsx

+    popperWithOpenNav: {
+      display: "block",
+      position: "absolute!important" as "absolute",
+      top: "245px !important",
+      left: "210px !important"
+    },
+    popper: {
+      display: "block",
+      position: "absolute!important" as "absolute",
+      top: "245px !important",
+      left: "25px !important"
+    }


Is there a way we can do this without absolute positioning? The problem is that this becomes quite fragile, i.e., if we add anything to the NavBar we need to adjust these positionings, etc.

Ideally, we'd do something very similar to what OCL does. So here OCL defines a React Ref that's that then associated with the icon and used as the anchor for the Popper, allowing it's position to be defined relative to the button itself.

ibacher · 2021-10-05T17:43:16Z

public/omrs-logo.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>


Put the SVG into the source tree. It can be imported directly by using

import { ReactComponent as OMRSLogo } from "./omrs-logo"

And then used as:

<OMRSLogo />

where it's needed.

ibacher · 2021-10-05T17:43:53Z

src/components/AppsMenu.tsx

+    icon: {
+      marginLeft: "-10px"
+    },


This isn't used anywhere is it?

src/components/NavDrawer.tsx

ibacher · 2021-10-05T17:58:36Z

src/components/AppsMenu.tsx

+  const handleClose = () => {
+    setAnchorEl(null);
+  };


It would be good if handleClose() actually set the open property of the Popper to false so that it's actually closed and not just unattached.

ibacher · 2021-10-05T18:02:33Z

src/utils/constants.ts

@@ -1,5 +1,7 @@
 import { Option } from "./types";

+export const OCL_URL = "https://app.openconceptlab.org/";


So, my suggestion here was meant to work more like the constants below, that is:

export const OCL_URL: string = // @ts-ignore OCL_URL is injected at runtime window.OCL_URL || "https://app.staging.openconceptlab.org/#/";

Then we can adjust OCL_SIGNUP_URL to be defined this way:

export const OCL_SIGNUP_URL = OCL_URL + "accounts/signup";

The properties defined here are injected via environment variables so that we can drive locations by configuration rather than by hard-coding like getEnv() does.

suruchee · 2021-10-18T14:54:26Z

@ibacher, I have pushed with your suggestions for position and constants but it has some issue while putting svg into source folder and using import { ReactComponent as OMRSLogo } from "./omrs-logo", I get an error which says SyntaxError: unknown: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set throwIfNamespace: false to bypass this warning.
please have a look.
Also as I am writing code in Navbar and I want to cover the UI of the body so it's causing an issue so can I do something with Navbar? Like

ibacher · 2021-10-18T15:05:07Z

I see the problem... Maybe we really do need to move back to absolute positioning for the menu, just so it shows up in a sensible place... I've fixed the SVG file so that it will work appropriately.

suruchee · 2021-10-19T05:13:12Z

@ibacher, I have changed the position of the menu but it worked without absolute position but had to add overflowY: "unset" in navOpen to avoid scroll, please have a look.

ibacher

Thanks Suruchi! One very small thing and I think this looks great!

ibacher · 2021-10-21T19:57:15Z

src/components/NavDrawer.tsx

@@ -114,6 +116,14 @@ export const NavDrawer: React.FC<Props> = ({ children, logout, profile }) => {
    }
    logout();
  };
+  const handelClick = (event: any) => {


Suggested change

const handelClick = (event: any) => {

const handleClick = (event: any) => {

ibacher · 2021-10-21T19:57:25Z

src/components/NavDrawer.tsx

+    setOpen(true);
+    setAnchorEl(event.target);
+  };
+  const handelClose = () => {


Suggested change

const handelClose = () => {

const handleClose = () => {

ibacher · 2021-10-21T19:57:35Z

src/components/NavDrawer.tsx

@@ -203,6 +213,17 @@ export const NavDrawer: React.FC<Props> = ({ children, logout, profile }) => {
          </ListItem>
        </List>
        <Divider component="hr" />
+        <List component="div">
+          <ListItem button dense={false} key="AppsMenu" onClick={handelClick}>


Suggested change

<ListItem button dense={false} key="AppsMenu" onClick={handelClick}>

<ListItem button dense={false} key="AppsMenu" onClick={handleClick}>

ibacher · 2021-10-21T19:57:46Z

src/components/NavDrawer.tsx

+          <ListItem button dense={false} key="AppsMenu" onClick={handelClick}>
+            <Tooltip title="Apps Menu">
+              <ListItemIcon className="list-item-icon">
+                <AppsMenu handleClose={handelClose} open={Boolean(anchorEl)} />


Suggested change

<AppsMenu handleClose={handelClose} open={Boolean(anchorEl)} />

<AppsMenu handleClose={handleClose} open={Boolean(anchorEl)} />

ibacher · 2021-10-21T20:00:03Z

src/utils/constants.ts

@@ -1,5 +1,9 @@
 import { Option } from "./types";

+export const OCL_URL: string =


Last bit here: can we make the default for OCL_SIGNUP_URL be `${OCL_URL}accounts/signup/`

suruchee · 2021-10-22T06:41:45Z

@ibacher, thanks for the review. I have pushed new changes, please have a review

OCLOMRS-1056:Unified OCL and OpenMRS Dictionary Manager Experience

dc65c7b

removed unused import

ff53c6b

suruchee requested a review from ibacher September 28, 2021 04:57

hadijahkyampeire reviewed Sep 28, 2021

View reviewed changes

adding some UI improvements

259cd5f

hadijahkyampeire approved these changes Sep 28, 2021

View reviewed changes

ibacher requested changes Sep 28, 2021

View reviewed changes

suruchee added 4 commits October 5, 2021 18:27

app icon shifted to side navbar

d1a757e

styles for app switcher and all apps

9bb476c

appsMenu update

4cd7b7d

appsMenu updated

b6ff369

ibacher requested changes Oct 5, 2021

View reviewed changes

fix after suggestion for absolute position, logo and constants

2b37b6e

fix svg logo

d0fb5b6

position change for menu

e4377c4

ibacher approved these changes Oct 21, 2021

View reviewed changes

typo fix and OCL_SIGNUP_URL refactor

f7362b0

ibacher changed the title ~~OCLOMRS-1056:Unified OCL and OpenMRS Dictionary Manager Experience~~ OCLOMRS-1056: Unified OCL and OpenMRS Dictionary Manager Experience Oct 22, 2021

ibacher merged commit b56f3fd into openmrs:master Oct 22, 2021

		@@ -0,0 +1,30 @@
		<?xml version="1.0" encoding="UTF-8" standalone="no"?>

		@@ -1,5 +1,7 @@
		import { Option } from "./types";

		export const OCL_URL = "https://app.openconceptlab.org/";

	const handelClick = (event: any) => {
	const handleClick = (event: any) => {

	<ListItem button dense={false} key="AppsMenu" onClick={handelClick}>
	<ListItem button dense={false} key="AppsMenu" onClick={handleClick}>

	<AppsMenu handleClose={handelClose} open={Boolean(anchorEl)} />
	<AppsMenu handleClose={handleClose} open={Boolean(anchorEl)} />

		@@ -1,5 +1,9 @@
		import { Option } from "./types";

		export const OCL_URL: string =

OCLOMRS-1056: Unified OCL and OpenMRS Dictionary Manager Experience #750

OCLOMRS-1056: Unified OCL and OpenMRS Dictionary Manager Experience #750

Conversation

suruchee commented Sep 28, 2021

JIRA TICKET NAME:

Summary:

coveralls commented Sep 28, 2021 • edited Loading

hadijahkyampeire 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

hadijahkyampeire commented Sep 28, 2021

hadijahkyampeire left a comment

Choose a reason for hiding this comment

hadijahkyampeire commented Sep 28, 2021

ibacher 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

suruchee commented Sep 29, 2021

ibacher commented Sep 29, 2021

suruchee commented Sep 29, 2021

ibacher commented Sep 29, 2021

ibacher commented Sep 30, 2021

suruchee commented Oct 5, 2021

ibacher 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

ibacher Oct 5, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

suruchee commented Oct 18, 2021 • edited Loading

ibacher commented Oct 18, 2021

suruchee commented Oct 19, 2021

ibacher 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

suruchee commented Oct 22, 2021

coveralls commented Sep 28, 2021 •

edited

Loading

ibacher Oct 5, 2021 •

edited

Loading

suruchee commented Oct 18, 2021 •

edited

Loading