(feat) O3-4362: Move Location Picker to the top nav

e2e/specs/login.spec.ts

@@ -7,6 +7,7 @@ test.use({ storageState: { cookies: [], origins: [] } });
 test('Login as Admin user', async ({ page }) => {
   const loginPage = new LoginPage(page);
   const userPanel = page.locator('[data-extension-slot-name="user-panel-slot"]');
+  const topNav = page.getByRole('banner', { name: 'OpenMRS' });
 
   await test.step('When I navigate to the login page', async () => {
     await loginPage.goto();
@@ -35,6 +36,10 @@ test('Login as Admin user', async ({ page }) => {
     await expect(page).toHaveURL(`${process.env.E2E_BASE_URL}/spa/home`);
   });
 
+  await test.step('And I should see the location picker in top nav', async () => {
+    await expect(topNav.getByText(/outpatient clinic/i)).toBeVisible();
+  });
+
   await test.step('When I click on the my account button', async () => {
     await page.getByRole('button', { name: /My Account/i }).click();
   });
@@ -43,10 +48,6 @@ test('Login as Admin user', async ({ page }) => {
     await expect(userPanel.getByText(/super user/i)).toBeVisible();
   });
 
-  await test.step('And I should see the location details', async () => {
-    await expect(userPanel.getByText(/outpatient clinic/i)).toBeVisible();
-  });
-
   await test.step('And I should see the logout button', async () => {
     await expect(page.getByRole('button', { name: /logout/i })).toBeVisible();
   });

packages/apps/esm-login-app/src/change-location-link/change-location-link.extension.tsx

@@ -1,7 +1,7 @@
+import { HeaderGlobalAction } from '@carbon/react';
+import { LocationIcon, navigate, useSession } from '@openmrs/esm-framework';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, SwitcherItem } from '@carbon/react';
-import { LocationIcon, navigate, useSession } from '@openmrs/esm-framework';
 import styles from './change-location-link.scss';
 
 const ChangeLocationLink: React.FC = () => {
@@ -18,15 +18,14 @@ const ChangeLocationLink: React.FC = () => {
   };
 
   return (
-    <SwitcherItem aria-label="Change Location" className={styles.panelItemContainer}>
-      <div>
-        <LocationIcon size={20} />
-        <p>{currentLocation}</p>
-      </div>
-      <Button kind="ghost" onClick={changeLocation}>
-        {t('change', 'Change')}
-      </Button>
-    </SwitcherItem>
+    <HeaderGlobalAction
+      aria-label={t('changeLocation', 'Change location')}
+      className={styles.changeLocationButton}
+      onClick={changeLocation}
+    >
+      <LocationIcon size={16} />
+      <span className={styles.currentLocationText}>{currentLocation}</span>
+    </HeaderGlobalAction>
   );
 };
 

packages/apps/esm-login-app/src/change-location-link/change-location-link.scss

@@ -1,3 +1,4 @@
+@use '@carbon/layout';
 @import '~@openmrs/esm-styleguide/src/vars';
 @import '../root.scss';
 
@@ -11,3 +12,15 @@
   display: flex;
   align-items: center;
 }
+
+.changeLocationButton {
+  width: fit-content;
+  background-color: transparent;
+  color: white;
+  font-size: 14px;
+  padding: layout.$spacing-04 !important; // this gets unset in rtl language without !important
+}
+
+.currentLocationText {
+  padding-inline-start: layout.$spacing-03;
+}

packages/apps/esm-login-app/src/routes.json

@@ -47,7 +47,7 @@
     },
     {
       "name": "location-changer",
-      "slot": "user-panel-slot",
+      "slot": "top-nav-info-slot",
       "component": "changeLocationLink",
       "online": true,
       "offline": true,

packages/apps/esm-login-app/translations/en.json

@@ -2,6 +2,7 @@
   "builtWith": "Built with",
   "cancel": "Cancel",
   "change": "Change",
+  "changeLocation": "Change location",
   "changePassword": "Change password",
   "changingPassword": "Changing password",
   "confirmPassword": "Confirm new password",

packages/apps/esm-primary-navigation-app/src/components/navbar/navbar.component.tsx

@@ -67,7 +67,8 @@ const HeaderItems: React.FC = () => {
             <Logo />
           </div>
         </ConfigurableLink>
-        <ExtensionSlot className={styles.dividerOverride} name="top-nav-info-slot" />
+        <div className={styles.divider} />
+        <ExtensionSlot name="top-nav-info-slot" />
         <HeaderGlobalBar className={styles.headerGlobalBar}>
           <ExtensionSlot name="top-nav-actions-slot" className={styles.topNavActionsSlot} />
           <ExtensionSlot

packages/apps/esm-primary-navigation-app/src/components/navbar/navbar.scss

@@ -28,9 +28,16 @@
   height: layout.$spacing-09;
   width: layout.$spacing-09;
   padding: layout.$spacing-04;
-  margin-right: layout.$spacing-02;
+  margin-inline-end: layout.$spacing-02;
 }
 
 .spacedLogo {
-  margin-left: layout.$spacing-05;
+  margin-inline-start: layout.$spacing-05;
+}
+
+.divider {
+  width: 1px;
+  height: 24px;
+  background-color: rgba(244, 244, 244, 0.4);
+  margin-inline-start: layout.$spacing-04;
 }