-
Notifications
You must be signed in to change notification settings - Fork 93
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add a notification banner to display for first time users (#3396)
* WIP: set basics for the Notification banner * Revert to previous functionality * Use v8 styling construct and a MessageBar * Use fluent v9 and get messages for notification from GE.json * Add fluent v9 components dependencies * Update styles and components for Notification * Add text for notification * Hook theming of v9 provider to prop value * Track the tutorial link with telemetry * Add slice banner * Persist banner state to localstorage * Update state usage of banner state * Use local storage to track banner visibility * Add the background and custom types * Fix theming and sizing of text in the body * Handle dismissing of the banner * Lock the v9 packages version * Update the banner notification link * Enhance type safety for trackReactComponent method * Add telemetry tracking for Notification component * Refactor Notification import and update App component structure * Add telemetry tracking for notification dismiss button * fix: correct typo in notification link text * fix: type in notification message
- Loading branch information
Showing
15 changed files
with
1,850 additions
and
114 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { makeStyles } from '@fluentui/react-components'; | ||
| import polygons from './bgPolygons.svg'; | ||
|
|
||
| export const useNotificationStyles = makeStyles({ | ||
| container: { | ||
| padding: '8px', | ||
| marginBottom: '8px', | ||
| backgroundImage: `url(${polygons})`, | ||
| backgroundRepeat: 'no-repeat', | ||
| backgroundSize: 'contain', | ||
| backgroundPosition: 'right', | ||
| '&light': { | ||
| backgroundColor: '#E8EFFF', | ||
| color: '#000000' | ||
| }, | ||
| '&.dark': { | ||
| backgroundColor: '#1D202A', | ||
| color: '#ffffff' | ||
| }, | ||
| '&.highContrast': { | ||
| backgroundColor: '#0C3B5E', | ||
| color: '#ffffff' | ||
| } | ||
| }, | ||
| body: { | ||
| width: '100%', | ||
| '@media (min-width: 720px)': { | ||
| width: '70%' | ||
| } | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import { | ||
| Button, | ||
| Link, | ||
| MessageBar, | ||
| MessageBarActions, | ||
| MessageBarBody, | ||
| MessageBarTitle | ||
| } from '@fluentui/react-components'; | ||
| import { DismissRegular, OpenRegular } from '@fluentui/react-icons'; | ||
| import { useState } from 'react'; | ||
| import { useAppSelector } from '../../../../store'; | ||
| import { componentNames, eventTypes, telemetry } from '../../../../telemetry'; | ||
| import { BANNER_IS_VISIBLE } from '../../../services/graph-constants'; | ||
| import { translateMessage } from '../../../utils/translate-messages'; | ||
| import { useNotificationStyles } from './Notification.styles'; | ||
|
|
||
| interface NotificationProps { | ||
| header: string; | ||
| content: string; | ||
| link: string; | ||
| linkText: string; | ||
| } | ||
|
|
||
| const handleOnClickLink = (e: React.MouseEvent<HTMLAnchorElement>)=>{ | ||
| telemetry.trackLinkClickEvent( | ||
| (e.currentTarget as HTMLAnchorElement).href, componentNames.GRAPH_EXPLORER_TUTORIAL_LINK) | ||
| } | ||
|
|
||
| const Notification: React.FunctionComponent<NotificationProps> = (props: NotificationProps) => { | ||
| const styles = useNotificationStyles(); | ||
| const storageBanner = localStorage.getItem(BANNER_IS_VISIBLE); | ||
| const [isVisible, setIsVisible] = useState(storageBanner === null || storageBanner === 'true'); | ||
| const theme = useAppSelector(s => s.theme); | ||
|
|
||
| const handleDismiss = () => { | ||
| telemetry.trackEvent(eventTypes.BUTTON_CLICK_EVENT, { | ||
| ComponentName: componentNames.NOTIFICATION_BANNER_DISMISS_BUTTON | ||
| }); | ||
| localStorage.setItem(BANNER_IS_VISIBLE, 'false'); | ||
| setIsVisible(false); | ||
| }; | ||
|
|
||
| if (!isVisible) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <MessageBar className={`${styles.container} ${theme}`} icon={''}> | ||
| <MessageBarBody className={styles.body}> | ||
| <MessageBarTitle>{props.header}</MessageBarTitle><br></br> | ||
| {props.content}{' '} | ||
| <Link | ||
| onClick={handleOnClickLink} | ||
| href={props.link} | ||
| target='_blank'>{props.linkText} <OpenRegular /></Link> | ||
| </MessageBarBody> | ||
| <MessageBarActions | ||
| containerAction={ | ||
| <Button | ||
| onClick={handleDismiss} | ||
| aria-label={translateMessage('Dismiss banner')} | ||
| appearance="transparent" | ||
| icon={<DismissRegular />} | ||
| /> | ||
| } | ||
| /> | ||
| </MessageBar> | ||
| ); | ||
| }; | ||
|
|
||
| export default telemetry.trackReactComponent(Notification, componentNames.NOTIFICATION_COMPONENT) |
Oops, something went wrong.