From c470659f325c53ee4091e56fb105da4b4daeb057 Mon Sep 17 00:00:00 2001 From: Samuel Muli Date: Tue, 24 Sep 2024 15:28:48 +0300 Subject: [PATCH 1/5] (fix) O3-3891: Adjust Change Language Modal Size to Small --- .../change-language-link.extension.tsx | 8 +++++- .../change-language-link.test.tsx | 27 +++++++++++++++++++ 2 files changed, 34 insertions(+), 1 deletion(-) create mode 100644 packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.test.tsx diff --git a/packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.extension.tsx b/packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.extension.tsx index 5afac0797..2fc5d0d96 100644 --- a/packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.extension.tsx +++ b/packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.extension.tsx @@ -9,7 +9,13 @@ export function ChangeLanguageLink() { const { t } = useTranslation(); const session = useSession(); - const launchChangeLanguageModal = useCallback(() => showModal('change-language-modal'), []); + // const launchChangeLanguageModal = useCallback(() => showModal('change-language-modal'), []); + const launchChangeLanguageModal = useCallback(() => { + const dispose = showModal('change-language-modal', { + closeModal: () => dispose(), + size: 'sm', + }); + }, []); const languageNames = new Intl.DisplayNames([session?.locale], { type: 'language' }); diff --git a/packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.test.tsx b/packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.test.tsx new file mode 100644 index 000000000..fbe2b73cb --- /dev/null +++ b/packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.test.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import userEvent from '@testing-library/user-event'; +import { render, screen } from '@testing-library/react'; +import { showModal } from '@openmrs/esm-framework'; +import ChangeLanguageLink from './change-language-link.extension'; + +const mockShowModal = jest.mocked(showModal); + +describe('Change Language Link', () => { + it('should display the `Change language` link', async () => { + const user = userEvent.setup(); + + render(); + + const changeLanguageLink = screen.getByRole('button', { + name: /Change/i, + }); + + await user.click(changeLanguageLink); + + expect(mockShowModal).toHaveBeenCalledTimes(1); + expect(mockShowModal).toHaveBeenCalledWith('change-language-modal', { + closeModal: expect.any(Function), + size: 'sm', + }); + }); +}); From 675378aad6eb0ebc1e098edb38021844a56c01f9 Mon Sep 17 00:00:00 2001 From: Samuel Muli Date: Tue, 24 Sep 2024 16:17:58 +0300 Subject: [PATCH 2/5] (fix) O3-3891: Adjust Change Language Modal Size to Small --- .../change-language-link.extension.tsx | 4 +-- .../change-language-link.test.tsx | 27 ------------------- 2 files changed, 2 insertions(+), 29 deletions(-) delete mode 100644 packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.test.tsx diff --git a/packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.extension.tsx b/packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.extension.tsx index 2fc5d0d96..5b09394c5 100644 --- a/packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.extension.tsx +++ b/packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.extension.tsx @@ -5,7 +5,7 @@ import { TranslateIcon, showModal, useSession } from '@openmrs/esm-framework'; import styles from './change-language-link.scss'; /** The user menu item that shows the current language and has a button to change the language */ -export function ChangeLanguageLink() { +function ChangeLanguageLink() { const { t } = useTranslation(); const session = useSession(); @@ -25,7 +25,7 @@ export function ChangeLanguageLink() {

{languageNames.of(session?.locale)}

- diff --git a/packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.test.tsx b/packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.test.tsx deleted file mode 100644 index fbe2b73cb..000000000 --- a/packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.test.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import userEvent from '@testing-library/user-event'; -import { render, screen } from '@testing-library/react'; -import { showModal } from '@openmrs/esm-framework'; -import ChangeLanguageLink from './change-language-link.extension'; - -const mockShowModal = jest.mocked(showModal); - -describe('Change Language Link', () => { - it('should display the `Change language` link', async () => { - const user = userEvent.setup(); - - render(); - - const changeLanguageLink = screen.getByRole('button', { - name: /Change/i, - }); - - await user.click(changeLanguageLink); - - expect(mockShowModal).toHaveBeenCalledTimes(1); - expect(mockShowModal).toHaveBeenCalledWith('change-language-modal', { - closeModal: expect.any(Function), - size: 'sm', - }); - }); -}); From 700b47b4b26f11c5fd511d5dcd92e2717b01dee2 Mon Sep 17 00:00:00 2001 From: Samuel Muli Date: Tue, 24 Sep 2024 16:23:30 +0300 Subject: [PATCH 3/5] (fix) O3-3891: Adjust Change Language Modal Size to Small --- .../change-language/change-language-link.extension.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.extension.tsx b/packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.extension.tsx index 5b09394c5..7545bd133 100644 --- a/packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.extension.tsx +++ b/packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.extension.tsx @@ -9,7 +9,6 @@ function ChangeLanguageLink() { const { t } = useTranslation(); const session = useSession(); - // const launchChangeLanguageModal = useCallback(() => showModal('change-language-modal'), []); const launchChangeLanguageModal = useCallback(() => { const dispose = showModal('change-language-modal', { closeModal: () => dispose(), From 26d30e5315154257c168faf3eec07756db5819f9 Mon Sep 17 00:00:00 2001 From: Samuel Muli Date: Tue, 24 Sep 2024 16:43:42 +0300 Subject: [PATCH 4/5] (fix) O3-3891: Adjust Change Language Modal Size to Small --- .../change-language/change-language-link.extension.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.extension.tsx b/packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.extension.tsx index 7545bd133..f309b5dd7 100644 --- a/packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.extension.tsx +++ b/packages/apps/esm-primary-navigation-app/src/components/change-language/change-language-link.extension.tsx @@ -24,7 +24,7 @@ function ChangeLanguageLink() {

{languageNames.of(session?.locale)}

- From 1df72a966d97ec5ebf38e6b499cdeeb77608d4b7 Mon Sep 17 00:00:00 2001 From: Samuel Muli Date: Thu, 26 Sep 2024 16:34:10 +0300 Subject: [PATCH 5/5] (fix) O3-3890 Help menu (and menu items) should use a standard Carbon menu --- .../help-menu/components/contact-us.component.tsx | 15 +++++---------- .../src/help-menu/components/docs.component.tsx | 15 +++++---------- .../components/release-notes.component.tsx | 15 +++++---------- .../src/help-menu/components/styles.scss | 3 --- .../src/help-menu/help-popup.styles.scss | 2 +- 5 files changed, 16 insertions(+), 34 deletions(-) diff --git a/packages/apps/esm-help-menu-app/src/help-menu/components/contact-us.component.tsx b/packages/apps/esm-help-menu-app/src/help-menu/components/contact-us.component.tsx index e7621594a..087340d6c 100644 --- a/packages/apps/esm-help-menu-app/src/help-menu/components/contact-us.component.tsx +++ b/packages/apps/esm-help-menu-app/src/help-menu/components/contact-us.component.tsx @@ -1,21 +1,16 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import styles from './styles.scss'; -import { ArrowUpRight } from '@carbon/react/icons'; -import { Link } from '@carbon/react'; +import { MenuItem } from '@carbon/react'; const ContactUs = () => { const { t } = useTranslation(); return ( - - {t('communityforum', 'Community forum')} - + label={t('communityforum', 'Community forum')} + onClick={() => window.open('https://talk.openmrs.org', '_blank')} + /> ); }; diff --git a/packages/apps/esm-help-menu-app/src/help-menu/components/docs.component.tsx b/packages/apps/esm-help-menu-app/src/help-menu/components/docs.component.tsx index 7cc4e588b..376b6c6cb 100644 --- a/packages/apps/esm-help-menu-app/src/help-menu/components/docs.component.tsx +++ b/packages/apps/esm-help-menu-app/src/help-menu/components/docs.component.tsx @@ -1,21 +1,16 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import styles from './styles.scss'; -import { ArrowUpRight } from '@carbon/react/icons'; -import { Link } from '@carbon/react'; +import { MenuItem } from '@carbon/react'; const Docs = () => { const { t } = useTranslation(); return ( - - {t('docs', 'Docs')} - + label={t('documentation', 'Documentation')} + onClick={() => window.open('https://o3-docs.openmrs.org', '_blank')} + /> ); }; diff --git a/packages/apps/esm-help-menu-app/src/help-menu/components/release-notes.component.tsx b/packages/apps/esm-help-menu-app/src/help-menu/components/release-notes.component.tsx index ef8f6b45c..9609e2d89 100644 --- a/packages/apps/esm-help-menu-app/src/help-menu/components/release-notes.component.tsx +++ b/packages/apps/esm-help-menu-app/src/help-menu/components/release-notes.component.tsx @@ -1,22 +1,17 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import styles from './styles.scss'; -import { ArrowUpRight } from '@carbon/react/icons'; -import { Link } from '@carbon/react'; +import { MenuItem } from '@carbon/react'; const ReleaseNotes = () => { const { t } = useTranslation(); return ( - - {t('releaseNotes', 'Release notes')} - + label={t('releaseNotes', 'Release notes')} + onClick={() => window.open('https://o3-docs.openmrs.org/docs/changelog', '_blank')} + /> ); }; diff --git a/packages/apps/esm-help-menu-app/src/help-menu/components/styles.scss b/packages/apps/esm-help-menu-app/src/help-menu/components/styles.scss index 803d7d3c3..8fb47c18d 100644 --- a/packages/apps/esm-help-menu-app/src/help-menu/components/styles.scss +++ b/packages/apps/esm-help-menu-app/src/help-menu/components/styles.scss @@ -3,9 +3,6 @@ @import '~@openmrs/esm-styleguide/src/vars'; .helpButton { - display: flex; - align-items: center; - justify-content: space-between; color: black !important; &:focus { outline: none; diff --git a/packages/apps/esm-help-menu-app/src/help-menu/help-popup.styles.scss b/packages/apps/esm-help-menu-app/src/help-menu/help-popup.styles.scss index c25dfc547..73a1373c6 100644 --- a/packages/apps/esm-help-menu-app/src/help-menu/help-popup.styles.scss +++ b/packages/apps/esm-help-menu-app/src/help-menu/help-popup.styles.scss @@ -7,7 +7,7 @@ flex: auto; bottom: 2rem; right: 3rem; - width: 11rem; + width: 12rem; z-index: 8000; background-color: $ui-02; gap: spacing.$spacing-05;