-
Notifications
You must be signed in to change notification settings - Fork 206
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
O3-2407: App Menu and User Menu should hide if their panel has no con… #768
Changes from 3 commits
cf331b1
5248a5c
292145a
8ee8564
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -13,9 +13,9 @@ import { | |
useLayoutType, | ||
ExtensionSlot, | ||
ConfigurableLink, | ||
useAssignedExtensions, | ||
useSession, | ||
useConfig, | ||
useConnectedExtensions, | ||
useConfig | ||
} from "@openmrs/esm-framework"; | ||
import { isDesktop } from "../../utils"; | ||
import AppMenuPanel from "../navbar-header-panels/app-menu-panel.component"; | ||
|
@@ -35,11 +35,12 @@ const Navbar: React.FC = () => { | |
const [activeHeaderPanel, setActiveHeaderPanel] = useState<string>(null); | ||
const allowedLocales = session?.allowedLocales ?? null; | ||
const layout = useLayoutType(); | ||
const navMenuItems = useAssignedExtensions( | ||
const navMenuItems = useConnectedExtensions( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this is tangential, but it looks like useConnectedExtensions is now preferred over useAssignedExtensions because it takes into account how feature toggles and offline/online affects what extensions are available? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah. At some point we should probably remove this distinction. |
||
"patient-chart-dashboard-slot" | ||
).map((e) => e.id); | ||
const openmrsSpaBase = window["getOpenmrsSpaBase"](); | ||
|
||
const appMenuItems = useConnectedExtensions("app-menu-slot"); | ||
const userMenuItems = useConnectedExtensions("user-panel-slot"); | ||
const isActivePanel = useCallback( | ||
(panelName: string) => activeHeaderPanel === panelName, | ||
[activeHeaderPanel] | ||
|
@@ -63,7 +64,14 @@ const Navbar: React.FC = () => { | |
() => !isDesktop(layout) && navMenuItems.length > 0, | ||
[navMenuItems.length, layout] | ||
); | ||
|
||
const showAppMenu = useMemo( | ||
() => appMenuItems.length > 0, | ||
[appMenuItems.length] | ||
); | ||
const showUserMenu = useMemo( | ||
() => userMenuItems.length > 0, | ||
[userMenuItems.length] | ||
); | ||
const HeaderItems = () => ( | ||
<> | ||
<OfflineBanner /> | ||
|
@@ -101,70 +109,78 @@ const Navbar: React.FC = () => { | |
togglePanel: togglePanel, | ||
}} | ||
/> | ||
<HeaderGlobalAction | ||
aria-label="Users" | ||
aria-labelledby="Users Avatar Icon" | ||
className={`${ | ||
isActivePanel("userMenu") | ||
? styles.headerGlobalBarButton | ||
: styles.activePanel | ||
}`} | ||
enterDelayMs={500} | ||
name="Users" | ||
isActive={isActivePanel("userMenu")} | ||
onClick={(event) => { | ||
togglePanel("userMenu"); | ||
event.stopPropagation(); | ||
}} | ||
> | ||
{isActivePanel("userMenu") ? ( | ||
<Close size={20} /> | ||
) : ( | ||
<UserAvatarFilledAlt size={20} /> | ||
)} | ||
</HeaderGlobalAction> | ||
<HeaderGlobalAction | ||
aria-label="App Menu" | ||
aria-labelledby="App Menu" | ||
enterDelayMs={500} | ||
isActive={isActivePanel("appMenu")} | ||
tooltipAlignment="end" | ||
className={`${ | ||
isActivePanel("appMenu") | ||
? styles.headerGlobalBarButton | ||
: styles.activePanel | ||
}`} | ||
onClick={(event) => { | ||
togglePanel("appMenu"); | ||
event.stopPropagation(); | ||
}} | ||
> | ||
{isActivePanel("appMenu") ? ( | ||
<Close size={20} /> | ||
) : ( | ||
<Switcher size={20} /> | ||
)} | ||
</HeaderGlobalAction> | ||
{showUserMenu && ( | ||
<HeaderGlobalAction | ||
aria-label="Users" | ||
aria-labelledby="Users Avatar Icon" | ||
className={`${ | ||
isActivePanel("userMenu") | ||
? styles.headerGlobalBarButton | ||
: styles.activePanel | ||
}`} | ||
enterDelayMs={500} | ||
name="Users" | ||
isActive={isActivePanel("userMenu")} | ||
onClick={(event) => { | ||
togglePanel("userMenu"); | ||
event.stopPropagation(); | ||
}} | ||
> | ||
{isActivePanel("userMenu") ? ( | ||
<Close size={20} /> | ||
) : ( | ||
<UserAvatarFilledAlt size={20} /> | ||
)} | ||
</HeaderGlobalAction> | ||
)} | ||
{showAppMenu && ( | ||
<HeaderGlobalAction | ||
aria-label="App Menu" | ||
aria-labelledby="App Menu" | ||
enterDelayMs={500} | ||
isActive={isActivePanel("appMenu")} | ||
tooltipAlignment="end" | ||
className={`${ | ||
isActivePanel("appMenu") | ||
? styles.headerGlobalBarButton | ||
: styles.activePanel | ||
}`} | ||
onClick={(event) => { | ||
togglePanel("appMenu"); | ||
event.stopPropagation(); | ||
}} | ||
> | ||
{isActivePanel("appMenu") ? ( | ||
<Close size={20} /> | ||
) : ( | ||
<Switcher size={20} /> | ||
)} | ||
</HeaderGlobalAction> | ||
)} | ||
</HeaderGlobalBar> | ||
{!isDesktop(layout) && ( | ||
<SideMenuPanel | ||
hidePanel={hidePanel} | ||
expanded={isActivePanel("sideMenu")} | ||
/> | ||
)} | ||
<AppMenuPanel | ||
expanded={isActivePanel("appMenu")} | ||
hidePanel={hidePanel} | ||
/> | ||
{showAppMenu && ( | ||
<AppMenuPanel | ||
expanded={isActivePanel("appMenu")} | ||
hidePanel={hidePanel} | ||
/> | ||
)} | ||
<NotificationsMenuPanel expanded={isActivePanel("notificationsMenu")} /> | ||
<UserMenuPanel | ||
user={user} | ||
session={session} | ||
expanded={isActivePanel("userMenu")} | ||
allowedLocales={allowedLocales} | ||
onLogout={logout} | ||
hidePanel={hidePanel} | ||
/> | ||
{showUserMenu && ( | ||
<UserMenuPanel | ||
user={user} | ||
session={session} | ||
expanded={isActivePanel("userMenu")} | ||
allowedLocales={allowedLocales} | ||
onLogout={logout} | ||
hidePanel={hidePanel} | ||
/> | ||
)} | ||
</Header> | ||
</> | ||
); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Missing trailing comma here, I think.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oops, thanks @denniskigen ... that's what I get for trying to merge directly within github :) fixing now...