Skip to content
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.

Sign up for GitHub

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

Jump to bottom

(fix) O3-3890 Help menu (and menu items) should use a standard Carbon… #1164

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

(fix) O3-3890 Help menu (and menu items) should use a standard Carbon… #1164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c470659
(fix) O3-3891: Adjust Change Language Modal Size to Small
Samstar10 Sep 24, 2024
675378a
(fix) O3-3891: Adjust Change Language Modal Size to Small
Samstar10 Sep 24, 2024
700b47b
(fix) O3-3891: Adjust Change Language Modal Size to Small
Samstar10 Sep 24, 2024
26d30e5
(fix) O3-3891: Adjust Change Language Modal Size to Small
Samstar10 Sep 24, 2024
1df72a9
(fix) O3-3890 Help menu (and menu items) should use a standard Carbon…
Samstar10 Sep 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 5 additions & 10 deletions packages/apps/esm-help-menu-app/src/help-menu/components/contact-us.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Link
<MenuItem
className={styles.helpButton}
href="https://talk.openmrs.org"
rel="noopener noreferrer"
renderIcon={ArrowUpRight}
target="_blank"
>
{t('communityforum', 'Community forum')}
</Link>
label={t('communityforum', 'Community forum')}
onClick={() => window.open('https://talk.openmrs.org', '_blank')}
Copy link
Member

@denniskigen denniskigen Oct 5, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we wrap the onClick handlers in use callback hooks? Additionally, for security, it’s good to add noreferrer noopener to external links:

const handleClick = useCallback(() => {
  window.open('https://talk.openmrs.org', '_blank', 'noopener,noreferrer');
}, [url]);

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noted

/>
);
};

Expand Down
15 changes: 5 additions & 10 deletions packages/apps/esm-help-menu-app/src/help-menu/components/docs.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Link
<MenuItem
className={styles.helpButton}
href="https://o3-docs.openmrs.org"
rel="noopener noreferrer"
renderIcon={ArrowUpRight}
target="_blank"
>
{t('docs', 'Docs')}
</Link>
label={t('documentation', 'Documentation')}
onClick={() => window.open('https://o3-docs.openmrs.org', '_blank')}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we move the onClick handler to a function that's wrapped in a useCallback hook?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noted

/>
);
};

Expand Down
15 changes: 5 additions & 10 deletions packages/apps/esm-help-menu-app/src/help-menu/components/release-notes.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Link
<MenuItem
className={styles.helpButton}
href="https://o3-docs.openmrs.org/docs/changelog"
rel="noopener noreferrer"
renderIcon={ArrowUpRight}
target="_blank"
>
{t('releaseNotes', 'Release notes')}
</Link>
label={t('releaseNotes', 'Release notes')}
onClick={() => window.open('https://o3-docs.openmrs.org/docs/changelog', '_blank')}
/>
);
};

Expand Down
3 changes: 0 additions & 3 deletions packages/apps/esm-help-menu-app/src/help-menu/components/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/esm-help-menu-app/src/help-menu/help-popup.styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
9 changes: 7 additions & 2 deletions ...-primary-navigation-app/src/components/change-language/change-language-link.extension.tsx
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wouldn’t expect these changes to be included here. Bad rebase?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, a mistake on my end, I'll fix it

Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,16 @@ 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();

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' });

Expand Down
Loading