ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Use useQuery in ProfileTray; NavigationBadges 

test plan:
  - smoke test badges on old and new nav
  - smoke test profile tray on old and new nav

flag=instui_nav

Refs FOO-3880
Refs FOO-3887
Refs FOO-3894
Refs FOO-3895

Change-Id: I1d3a669aee09dc67b04e798a23e016d26f398fd4
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/331758
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
QA-Review: Aaron Shafovaloff <ashafovaloff@instructure.com>
Product-Review: Aaron Shafovaloff <ashafovaloff@instructure.com>
Reviewed-by: Gustavo Bernardes <gustavo.bernardes@instructure.com>
This commit is contained in:
Aaron Shafovaloff 2023-10-31 15:29:48 -06:00
parent 6a862cc578
commit f7ba7f9a6a
19 changed files with 344 additions and 675 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
jest/jest-setup.js
View File

@ -51,9 +51,7 @@ const ignoredErrors = [
/You seem to have overlapping act\(\) calls/,
]
const globalWarn = global.console.warn
const ignoredWarnings = [
/value provided is not in a recognized RFC2822 or ISO format/,
]
const ignoredWarnings = [/value provided is not in a recognized RFC2822 or ISO format/]
global.console = {
log: console.log,
error: error => {

3
packages/canvas-rce/src/rce/plugins/instructure_record/VideoOptionsTray/__tests__/TrayController.test.jsx
View File

@ -289,7 +289,8 @@ describe('RCE "Videos" Plugin > VideoOptionsTray > TrayController', () => {
expect(updateMediaObject).not.toHaveBeenCalled()
})
it('replaces the video with a link', async () => {
// fickle. LF-968
it.skip('replaces the video with a link', async () => {
const updateMediaObject = jest.fn().mockResolvedValue()
const ed = editors[0]
trayController.showTrayForEditor(ed)

3
packages/filter-console-messages/index.js
View File

@ -56,6 +56,9 @@ const consoleMessagesToIgnore = {
/Please update the following components:[ (BaseTransition|Billboard|Button|Checkbox|CloseButton|Dialog|Expandable|FileDrop|Flex|FlexItem|FormFieldGroup|FormFieldLabel|FormFieldLayout|FormFieldMessage|FormFieldMessages|Grid|GridCol|GridRow|Heading|InlineSVG|Mask|ModalBody|ModalFooter|ModalHeader|NumberInput|Portal|Query|Responsive|SVGIcon|ScreenReaderContent|SelectOptionsList|SelectField|SelectMultiple|SelectOptionsList|SelectSingle|Spinner|Tab|Text|TextArea|TextInput|TinyMCE|ToggleDetails|ToggleFacade|Transition|TruncateText|View),?]+$/,
// output of Pagination component substitutes the component name for the placeholder %s
/Please update the following components: %s,Pagination/,
// https://github.com/reactwg/react-18/discussions/82
/Can't perform a React state update on an unmounted component/,
],
}

4
ui/api.d.ts vendored
View File

@ -605,7 +605,7 @@ export type Course = Readonly<{
// '/api/v1/users/self/tabs',
type TabCountsObj = Readonly<{
[key: string]: number
[key: string]: number | undefined
}>
export type ProfileTab = Readonly<{
@ -643,4 +643,4 @@ export type ReleaseNote = {
url: string
date: string
new: boolean
}
}

3
ui/features/assignments_show_student/react/components/__tests__/CommentsTrayBody.test.tsx
View File

@ -288,7 +288,8 @@ describe('CommentsTrayBody', () => {
})
describe('group assignments', () => {
it('renders warning that comments will be sent to the whole group for group assignments', async () => {
// fickle. EVAL-3667
it.skip('renders warning that comments will be sent to the whole group for group assignments', async () => {
const mocks = [await mockSubmissionCommentQuery()]
const props = await mockAssignmentAndSubmission([
{

2
ui/features/content_migrations/react/components/content_selection_modal.tsx
View File

@ -179,7 +179,7 @@ export const ContentSelectionModal = ({
doFetchApi({
path: `/api/v1/courses/${courseId}/content_migrations/${migrationId}`,
method: 'PUT',
body: generateSelectiveDataResponse(migrationId, ENV.current_user_id, selectedProperties),
body: generateSelectiveDataResponse(migrationId, ENV.current_user_id!, selectedProperties),
})
.then(() => {
onSubmit?.()

10
ui/features/navigation_header/index.tsx
View File

@ -57,17 +57,9 @@ $('body').on('click', '#primaryNavToggle', function () {
ready(() => {
const globalNavTrayContainer = document.getElementById('global_nav_tray_container')
if (globalNavTrayContainer) {
const DesktopNavComponent = React.createRef()
const mobileNavComponent = React.createRef()
ReactDOM.render(
<QueryProvider>
<Navigation
// @ts-expect-error
ref={DesktopNavComponent}
// @ts-expect-error
onDataReceived={() => mobileNavComponent.current?.forceUpdate()}
/>
<Navigation />
</QueryProvider>,
globalNavTrayContainer,
() => {

21
ui/features/navigation_header/react/MobileNavigation.tsx
View File

@ -20,8 +20,10 @@ import React, {useState, useEffect, useRef} from 'react'
import $ from 'jquery'
import {Tray} from '@instructure/ui-tray'
import {View} from '@instructure/ui-view'
import {useQuery} from '@tanstack/react-query'
import {Spinner} from '@instructure/ui-spinner'
import {useScope as useI18nScope} from '@canvas/i18n'
import {getUnreadCount} from './queries/unreadCountQuery'
declare global {
interface Window {
@ -31,6 +33,8 @@ declare global {
const I18n = useI18nScope('MobileNavigation')
const mobileHeaderInboxUnreadBadge = document.getElementById('mobileHeaderInboxUnreadBadge')
const MobileContextMenu = React.lazy(() => import('./MobileContextMenu'))
const MobileGlobalMenu = React.lazy(() => import('./MobileGlobalMenu'))
@ -38,6 +42,23 @@ const MobileNavigation = () => {
const [globalNavIsOpen, setGlobalNavIsOpen] = useState(false)
const contextNavIsOpen = useRef(false)
const countsEnabled = Boolean(
window.ENV.current_user_id && !window.ENV.current_user?.fake_student
)
const {data: unreadConversationsCount, isSuccess: hasUnreadConversationsCount} = useQuery({
queryKey: ['unread_count', 'conversations'],
queryFn: getUnreadCount,
staleTime: 2 * 60 * 1000, // two minutes
enabled: countsEnabled && !ENV.current_user_disabled_inbox,
})
useEffect(() => {
if (hasUnreadConversationsCount && mobileHeaderInboxUnreadBadge) {
mobileHeaderInboxUnreadBadge.style.display = unreadConversationsCount > 0 ? '' : 'none'
}
}, [hasUnreadConversationsCount, unreadConversationsCount])
useEffect(() => {
$('.mobile-header-hamburger').on('touchstart click', event => {
event.preventDefault()

132
ui/features/navigation_header/react/NavigationBadges.tsx Normal file
View File

@ -0,0 +1,132 @@
/*
* Copyright (C) 2015 - present Instructure, Inc.
*
* This file is part of Canvas.
*
* Canvas is free software: you can redistribute it and/or modify it under
* the terms of the GNU Affero General Public License as published by the Free
* Software Foundation, version 3 of the License.
*
* Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
* A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
* details.
*
* You should have received a copy of the GNU Affero General Public License along
* with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React from 'react'
import {useScope as useI18nScope} from '@canvas/i18n'
import {ScreenReaderContent, PresentationContent} from '@instructure/ui-a11y-content'
import {Portal} from '@instructure/ui-portal'
import {useQuery} from '@canvas/query'
import {getSetting} from './queries/settingsQuery'
import {getUnreadCount} from './queries/unreadCountQuery'
const I18n = useI18nScope('Navigation')
const unreadReleaseNotesCountElement = document.querySelector(
'#global_nav_help_link .menu-item__badge'
)
const unreadInboxCountElement = document.querySelector(
'#global_nav_conversations_link .menu-item__badge'
)
const unreadSharesCountElement = document.querySelector(
'#global_nav_profile_link .menu-item__badge'
)
export default function NavigationBadges() {
const countsEnabled = Boolean(
window.ENV.current_user_id && !window.ENV.current_user?.fake_student
)
const {data: releaseNotesBadgeDisabled} = useQuery({
queryKey: ['settings', 'release_notes_badge_disabled'],
queryFn: getSetting,
enabled: countsEnabled && ENV.FEATURES.embedded_release_notes,
fetchAtLeastOnce: true,
})
const {data: unreadContentSharesCount, isSuccess: hasUnreadContentSharesCount} = useQuery({
queryKey: ['unread_count', 'content_shares'],
queryFn: getUnreadCount,
staleTime: 60 * 60 * 1000, // 1 hour
enabled: countsEnabled && ENV.CAN_VIEW_CONTENT_SHARES,
refetchOnWindowFocus: true,
})
const {data: unreadConversationsCount, isSuccess: hasUnreadConversationsCount} = useQuery({
queryKey: ['unread_count', 'conversations'],
queryFn: getUnreadCount,
staleTime: 2 * 60 * 1000, // two minutes
enabled: countsEnabled && !ENV.current_user_disabled_inbox,
refetchOnWindowFocus: true,
})
const {data: unreadReleaseNotesCount, isSuccess: hasUnreadReleaseNotesCount} = useQuery({
queryKey: ['unread_count', 'release_notes'],
queryFn: getUnreadCount,
staleTime: 24 * 60 * 60 * 1000, // one day
enabled: countsEnabled && ENV.FEATURES.embedded_release_notes && !releaseNotesBadgeDisabled,
refetchOnWindowFocus: true,
})
return (
<>
<Portal
open={hasUnreadContentSharesCount && unreadContentSharesCount > 0}
mountNode={unreadSharesCountElement}
>
<ScreenReaderContent>
<>
{I18n.t(
{
one: 'One unread share.',
other: '%{count} unread shares.',
},
{count: unreadContentSharesCount}
)}
</>
</ScreenReaderContent>
<PresentationContent>{unreadContentSharesCount}</PresentationContent>
</Portal>
<Portal
open={hasUnreadConversationsCount && unreadConversationsCount > 0}
mountNode={unreadInboxCountElement}
>
<ScreenReaderContent>
<>
{I18n.t(
{
one: 'One unread message.',
other: '%{count} unread messages.',
},
{count: unreadConversationsCount}
)}
</>
</ScreenReaderContent>
<PresentationContent>{unreadConversationsCount}</PresentationContent>
</Portal>
<Portal
open={hasUnreadReleaseNotesCount && unreadReleaseNotesCount > 0}
mountNode={unreadReleaseNotesCountElement}
>
<ScreenReaderContent>
<>
{I18n.t(
{
one: 'One unread release note.',
other: '%{count} unread release notes.',
},
{count: unreadReleaseNotesCount}
)}
</>
</ScreenReaderContent>
<PresentationContent>{unreadReleaseNotesCount}</PresentationContent>
</Portal>
</>
)
}

129
ui/features/navigation_header/react/OldSideNav.tsx
View File

@ -19,23 +19,17 @@
import $ from 'jquery'
import {useScope as useI18nScope} from '@canvas/i18n'
import React from 'react'
import {func} from 'prop-types'
import {Tray} from '@instructure/ui-tray'
import {CloseButton} from '@instructure/ui-buttons'
import {View} from '@instructure/ui-view'
import {Spinner} from '@instructure/ui-spinner'
import UnreadCounts from './UnreadCounts'
import preventDefault from '@canvas/util/preventDefault'
import tourPubSub from '@canvas/tour-pubsub'
import {getTrayLabel} from './utils'
import NavigationBadges from './NavigationBadges'
const I18n = useI18nScope('Navigation')
// We don't need to poll for new release notes very often since we expect
// new ones to appear only infrequently. The act of viewing them will reset
// the badge at the time of viewing.
const RELEASE_NOTES_POLL_INTERVAL = 60 * 60 * 1000 // one hour
const CoursesTray = React.lazy(() => import('./trays/CoursesTray'))
const GroupsTray = React.lazy(() => import('./trays/GroupsTray'))
const AccountsTray = React.lazy(() => import('./trays/AccountsTray'))
@ -69,60 +63,31 @@ function getPortal() {
function noop() {}
type Props = {
unreadComponent: any
onDataReceived: () => void
}
type Props = {}
type State = {
activeItem: ActiveItem
isTrayOpen: boolean
noFocus: boolean
overrideDismiss: boolean
releaseNotesBadgeDisabled: boolean
type: ActiveItem | null
unreadInboxCount: number
unreadSharesCount: number
}
export default class Navigation extends React.Component<Props, State> {
forceUnreadReleaseNotesPoll: (() => void) | undefined
openPublishUnsubscribe: () => void = noop
overrideDismissUnsubscribe: () => void = noop
closePublishUnsubscribe: () => void = noop
unreadReleaseNotesCountElement: HTMLElement | null = null
unreadInboxCountElement: HTMLElement | null = null
unreadSharesCountElement: HTMLElement | null = null
static propTypes = {
unreadComponent: func, // for testing only
onDataReceived: func,
}
static defaultProps = {
unreadComponent: UnreadCounts,
}
constructor(props: Props) {
super(props)
this.forceUnreadReleaseNotesPoll = undefined
this.setReleaseNotesUnreadPollNow = this.setReleaseNotesUnreadPollNow.bind(this)
this.state = {
activeItem: 'dashboard',
isTrayOpen: false,
noFocus: false,
overrideDismiss: false,
type: null,
unreadInboxCount: 0,
unreadSharesCount: 0,
releaseNotesBadgeDisabled:
!ENV.FEATURES.embedded_release_notes || ENV.SETTINGS.release_notes_badge_disabled,
}
}
@ -219,27 +184,7 @@ export default class Navigation extends React.Component<Props, State> {
})
}
// Also have to attend to the unread dot on the mobile view inbox
onInboxUnreadUpdate(unreadCount: number) {
if (this.state.unreadInboxCount !== unreadCount) this.setState({unreadInboxCount: unreadCount})
const el = document.getElementById('mobileHeaderInboxUnreadBadge')
if (el) el.style.display = unreadCount > 0 ? '' : 'none'
if (typeof this.props.onDataReceived === 'function') this.props.onDataReceived()
}
onSharesUnreadUpdate(unreadCount: number) {
if (this.state.unreadSharesCount !== unreadCount)
this.setState({unreadSharesCount: unreadCount})
}
setReleaseNotesUnreadPollNow(callback: () => void) {
if (typeof this.forceUnreadReleaseNotesPoll === 'undefined')
this.forceUnreadReleaseNotesPoll = callback
}
render() {
const UnreadComponent = this.props.unreadComponent
return (
<>
<Tray
@ -280,80 +225,14 @@ export default class Navigation extends React.Component<Props, State> {
{this.state.type === 'courses' && <CoursesTray />}
{this.state.type === 'groups' && <GroupsTray />}
{this.state.type === 'accounts' && <AccountsTray />}
{this.state.type === 'profile' && (
<ProfileTray counts={{unreadShares: this.state.unreadSharesCount}} />
)}
{this.state.type === 'profile' && <ProfileTray />}
{this.state.type === 'history' && <HistoryTray />}
{this.state.type === 'help' && <HelpTray closeTray={this.closeTray} />}
</React.Suspense>
</div>
</div>
</Tray>
{ENV.CAN_VIEW_CONTENT_SHARES && ENV.current_user_id && (
<UnreadComponent
targetEl={
this.unreadSharesCountElement ||
(this.unreadSharesCountElement = document.querySelector(
'#global_nav_profile_link .menu-item__badge'
))
}
dataUrl="/api/v1/users/self/content_shares/unread_count"
onUpdate={(unreadCount: number) => this.onSharesUnreadUpdate(unreadCount)}
srText={(count: number) =>
I18n.t(
{
one: 'One unread share.',
other: '%{count} unread shares.',
},
{count}
)
}
/>
)}
{!ENV.current_user_disabled_inbox && (
<UnreadComponent
targetEl={
this.unreadInboxCountElement ||
(this.unreadInboxCountElement = document.querySelector(
'#global_nav_conversations_link .menu-item__badge'
))
}
dataUrl="/api/v1/conversations/unread_count"
onUpdate={(unreadCount: number) => this.onInboxUnreadUpdate(unreadCount)}
srText={(count: number) =>
I18n.t(
{
one: 'One unread message.',
other: '%{count} unread messages.',
},
{count}
)
}
useSessionStorage={false}
/>
)}
{!this.state.releaseNotesBadgeDisabled && (
<UnreadComponent
targetEl={
this.unreadReleaseNotesCountElement ||
(this.unreadReleaseNotesCountElement = document.querySelector(
'#global_nav_help_link .menu-item__badge'
))
}
dataUrl="/api/v1/release_notes/unread_count"
srText={(count: number) =>
I18n.t(
{
one: 'One unread release note.',
other: '%{count} unread release notes.',
},
{count}
)
}
pollIntervalMs={RELEASE_NOTES_POLL_INTERVAL}
pollNowPassback={this.setReleaseNotesUnreadPollNow}
/>
)}
<NavigationBadges />
</>
)
}

35
ui/features/navigation_header/react/SideNav.tsx
View File

@ -53,7 +53,7 @@ const I18n = useI18nScope('sidenav')
const CoursesTray = React.lazy(() => import('./trays/CoursesTray'))
const GroupsTray = React.lazy(() => import('./trays/GroupsTray'))
const AccountsTray = React.lazy(() => import('./trays/AccountsTray'))
// const ProfileTray = React.lazy(() => import('./trays/ProfileTray'))
const ProfileTray = React.lazy(() => import('./trays/ProfileTray'))
const HistoryTray = React.lazy(() => import('./trays/HistoryTray'))
const HelpTray = React.lazy(() => import('./trays/HelpTray'))
@ -137,20 +137,6 @@ const SideNav = () => {
logoUrl = variables['ic-brand-header-image']
}
const {data: unreadConversationsCount} = useQuery({
queryKey: ['unread_count', 'conversations'],
queryFn: getUnreadCount,
staleTime: 2 * 60 * 1000, // two minutes
enabled: countsEnabled && !ENV.current_user_disabled_inbox,
})
const {data: unreadContentSharesCount} = useQuery({
queryKey: ['unread_count', 'content_shares'],
queryFn: getUnreadCount,
staleTime: 5 * 60 * 1000, // two minutes
enabled: countsEnabled && ENV.CAN_VIEW_CONTENT_SHARES,
})
const {data: releaseNotesBadgeDisabled} = useQuery({
queryKey: ['settings', 'release_notes_badge_disabled'],
queryFn: getSetting,
@ -158,11 +144,28 @@ const SideNav = () => {
fetchAtLeastOnce: true,
})
const {data: unreadConversationsCount} = useQuery({
queryKey: ['unread_count', 'conversations'],
queryFn: getUnreadCount,
staleTime: 2 * 60 * 1000, // two minutes
enabled: countsEnabled && !ENV.current_user_disabled_inbox,
refetchOnWindowFocus: true,
})
const {data: unreadContentSharesCount} = useQuery({
queryKey: ['unread_count', 'content_shares'],
queryFn: getUnreadCount,
staleTime: 60 * 60 * 1000, // 1 hour
enabled: countsEnabled && ENV.CAN_VIEW_CONTENT_SHARES,
refetchOnWindowFocus: true,
})
const {data: unreadReleaseNotesCount} = useQuery({
queryKey: ['unread_count', 'release_notes'],
queryFn: getUnreadCount,
staleTime: 24 * 60 * 60 * 1000, // one day
enabled: countsEnabled && ENV.FEATURES.embedded_release_notes && !releaseNotesBadgeDisabled,
refetchOnWindowFocus: true,
})
const {data: collapseGlobalNav} = useQuery({
@ -419,7 +422,7 @@ const SideNav = () => {
{activeTray === 'accounts' && <AccountsTray />}
{activeTray === 'courses' && <CoursesTray />}
{activeTray === 'groups' && <GroupsTray />}
{/* {activeTray === 'profile' && <ProfileTray />} */}
{activeTray === 'profile' && <ProfileTray />}
{activeTray === 'history' && <HistoryTray />}
{activeTray === 'help' && <HelpTray closeTray={() => setIsTrayOpen(false)} />}
</React.Suspense>

244
ui/features/navigation_header/react/UnreadCounts.jsx
View File

@ -1,244 +0,0 @@
/*
* Copyright (C) 2015 - present Instructure, Inc.
*
* This file is part of Canvas.
*
* Canvas is free software: you can redistribute it and/or modify it under
* the terms of the GNU Affero General Public License as published by the Free
* Software Foundation, version 3 of the License.
*
* Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
* A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
* details.
*
* You should have received a copy of the GNU Affero General Public License along
* with this program. If not, see <http://www.gnu.org/licenses/>.
*/
//
// This component manages "unread count" badges on things external to the
// Navigation component. All it needs is:
// targetEl: a DOM node to render the count into
// dataUrl: the API endpoint to call to retrieve the unread count.
// Its return object is expected to contain an `unread_count`
// field with the numeric unread count
//
// ... and optionally:
// srText: a function to return the text to be spoken by a screen
// reader. It passes the unread count as argument.
// onUpdate: a function to call when the count is updated.
// It passes the new unread count as argument.
// onError: a function to call if the API call fails.
// It passes the fetch error as argument. Defaults to just
// issuing a console warning.
// pollIntervalMs: how often to poll the API for an updated unread
// count. Defaults to 60000ms or one minute. Use 0 to disable.
// allowedAge: how old the saved unread count can be without hitting
// the API for a new value. Defaults to 1/2 the poll interval.
// maxTries: how many API failures can occur in a row before we just give
// up entirely and stop updating. Defaults to 5.
// pollNowPassback: an optional function which, if provided, will be called
// once upon the first render. The function is expected to
// accept an argument which is itself a function, and can be
// called by the parent to force an update to the Unread badge.
// If that function is called with a numeric argument, the
// unread count is simply set to that; if it is not provided or
// undefined, it triggers an immediate poll of the dataUrl to
// (upon completion of the API call) update the badge with an
// updated value. Defaults to no action.
// useSessionStorage: whether to use local browser session storage for
// bool,default true storing / retrieving unread counts before polling
// the Canvas API.
import React, {useRef, useState, useEffect, useCallback} from 'react'
import {createPortal} from 'react-dom'
import {any, bool, func, number, string} from 'prop-types'
import {ScreenReaderContent, PresentationContent} from '@instructure/ui-a11y-content'
import {defaultFetchOptions} from '@canvas/util/xhr'
import {useScope as useI18nScope} from '@canvas/i18n'
const I18n = useI18nScope('UnreadCounts')
const DEFAULT_POLL_INTERVAL = 120000
function storageKeyFor(url) {
const m = url.match(/\/api\/v1\/(.*)\/unread_count/)
const tag = (m ? m[1] : 'UNKNOWN').replace(/\//g, '_')
return `unread_count_${window.ENV.current_user_id}_${tag}`
}
UnreadCounts.propTypes = {
targetEl: any,
onUpdate: func,
onError: func,
srText: func,
dataUrl: string.isRequired,
pollIntervalMs: number,
allowedAge: number,
maxTries: number,
useSessionStorage: bool,
pollNowPassback: func,
}
UnreadCounts.defaultProps = {
onUpdate: Function.prototype,
onError: msg => {
// eslint-disable-next-line no-console
console.warn(`Error fetching unread count: ${msg}`)
},
srText: count => I18n.t('%{count} unread.', {count}),
pollIntervalMs: DEFAULT_POLL_INTERVAL,
allowedAge: DEFAULT_POLL_INTERVAL / 2,
maxTries: 5,
useSessionStorage: true,
}
export default function UnreadCounts(props) {
const {
targetEl,
onUpdate,
onError,
srText,
dataUrl,
pollIntervalMs,
allowedAge,
maxTries,
useSessionStorage,
pollNowPassback,
} = props
const syncState = useRef({msUntilFirstPoll: 0, savedChecked: false})
const [count, setCount] = useState(NaN) // want to be sure to update at least once
let error = null
// Can we do anything at all?“
function ableToRun() {
if (!targetEl) return false
if (!window.ENV.current_user_id) return false
if (window.ENV.current_user && window.ENV.current_user.fake_student) return false
return true
}
function updateParent(n) {
if (typeof onUpdate === 'function') onUpdate(n)
}
// set the unread count state on a change, and also update the saved session
// storage if we are using it
function setUnreadCount(unreadCount) {
setCount(unreadCount)
updateParent(unreadCount)
if (!useSessionStorage) return
try {
const savedState = JSON.stringify({
updatedAt: +new Date(),
unreadCount,
})
sessionStorage.setItem(storageKeyFor(dataUrl), savedState)
} catch (_ex) {
// error in setting storage, no biggie, ignore
}
}
function startPolling() {
let timerId = null
let attempts = 0
function cleanup() {
if (timerId) clearTimeout(timerId)
}
async function getData() {
try {
const result = await fetch(dataUrl, defaultFetchOptions)
const {unread_count: cnt} = await result.json()
const unreadCount = typeof cnt === 'number' ? cnt : parseInt(cnt, 10)
setUnreadCount(unreadCount)
attempts = 0
error = null
} catch (e) {
error = e
}
}
async function poll(force) {
// if we get here when the page is hidden, don't actually fetch it now, wait until the page is refocused
if (document.hidden && !force) {
document.addEventListener('visibilitychange', poll, {once: true})
return
}
await getData()
attempts += 1
if (attempts < maxTries && pollIntervalMs > 0)
timerId = setTimeout(poll, attempts * pollIntervalMs)
if (error) onError(`URL=${dataUrl} error text=${error.message}`)
}
if (ableToRun()) {
// Arrange to tell our parent how to force us to update, if they want
if (pollNowPassback)
pollNowPassback(function (overrideCount) {
if (typeof overrideCount === 'undefined') {
cleanup()
poll(true)
} else if (typeof overrideCount === 'number') {
setUnreadCount(overrideCount)
} else {
throw new TypeError('Argument to the poll now callback, if present, must be numeric')
}
})
const delay = syncState.current.msUntilFirstPoll
// If polling is disabled, it's also fine to just use the cached value
if (delay > 0) {
if (pollIntervalMs > 0) {
timerId = setTimeout(poll, delay)
}
} else {
poll()
}
}
return cleanup
}
const checkSavedValue = useCallback(() => {
// Get some data from saved history and use it if we can before we start
// polling the API. If we do use it, arrange to poll the API only when
// the saved value ages out.
const savedJson = sessionStorage.getItem(storageKeyFor(dataUrl))
if (savedJson && ableToRun()) {
const saved = JSON.parse(savedJson)
const msSinceLastUpdate = new Date() - saved.updatedAt
if (msSinceLastUpdate < allowedAge) {
if (count !== saved.unreadCount) {
setUnreadCount(saved.unreadCount)
updateParent(saved.unreadCount)
syncState.current.msUntilFirstPoll = allowedAge - msSinceLastUpdate
}
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [allowedAge, count, dataUrl])
useEffect(() => {
// If we haven't started polling yet, see if we can use a saved value
if (useSessionStorage && !syncState.current.savedChecked) {
checkSavedValue()
syncState.current.savedChecked = true
}
}, [useSessionStorage, checkSavedValue])
// deps is the empty array because we want to fire off the polling exactly once
useEffect(startPolling, [])
if (!count) return createPortal(null, targetEl)
return createPortal(
<>
<ScreenReaderContent>{srText(count)}</ScreenReaderContent>
<PresentationContent>{count}</PresentationContent>
</>,
targetEl
)
}

86
ui/features/navigation_header/react/__tests__/Navigation.test.jsx
View File

@ -1,86 +0,0 @@
// Copyright (C) 2015 - present Instructure, Inc.
//
// This file is part of Canvas.
//
// Canvas is free software: you can redistribute it and/or modify it under
// the terms of the GNU Affero General Public License as published by the Free
// Software Foundation, version 3 of the License.
//
// Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
// WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
// A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
// details.
//
// You should have received a copy of the GNU Affero General Public License along
// with this program. If not, see <http://www.gnu.org/licenses/>.
import React from 'react'
import {render} from '@testing-library/react'
import Navigation from '../OldSideNav'
const unreadComponent = jest.fn(() => <></>)
describe('GlobalNavigation', () => {
beforeEach(() => {
unreadComponent.mockClear()
window.ENV.current_user_id = 10
window.ENV.current_user_disabled_inbox = false
window.ENV.CAN_VIEW_CONTENT_SHARES = true
window.ENV.SETTINGS = {release_notes_badge_disabled: false}
window.ENV.FEATURES = {embedded_release_notes: true}
})
it('renders', () => {
expect(() => render(<Navigation unreadComponent={unreadComponent} />)).not.toThrow()
})
describe('unread badges', () => {
it('renders the shares unread, inbox unread, and release notes unread component', () => {
render(<Navigation unreadComponent={unreadComponent} />)
expect(unreadComponent).toHaveBeenCalledTimes(3)
const urls = unreadComponent.mock.calls.map(parms => parms[0].dataUrl)
expect(urls).toEqual(
expect.arrayContaining([
'/api/v1/users/self/content_shares/unread_count',
'/api/v1/conversations/unread_count',
'/api/v1/release_notes/unread_count',
])
)
})
it('does not render the shares unread component when the user does not have permission', () => {
ENV.CAN_VIEW_CONTENT_SHARES = false
render(<Navigation unreadComponent={unreadComponent} />)
expect(unreadComponent).toHaveBeenCalledTimes(2)
const urls = unreadComponent.mock.calls.map(parms => parms[0].dataUrl)
expect(urls).not.toEqual(
expect.arrayContaining(['/api/v1/users/self/content_shares/unread_count'])
)
})
it('does not render the shares unread component when the user is not logged in', () => {
ENV.current_user_id = null
render(<Navigation unreadComponent={unreadComponent} />)
expect(unreadComponent).toHaveBeenCalledTimes(2)
const urls = unreadComponent.mock.calls.map(parms => parms[0].dataUrl)
expect(urls).not.toEqual(
expect.arrayContaining(['/api/v1/users/self/content_shares/unread_count'])
)
})
it('does not render the inbox unread component when user has opted out of notifications', () => {
ENV.current_user_disabled_inbox = true
render(<Navigation unreadComponent={unreadComponent} />)
expect(unreadComponent).toHaveBeenCalledTimes(2)
const urls = unreadComponent.mock.calls.map(parms => parms[0].dataUrl)
expect(urls).not.toEqual(expect.arrayContaining(['/api/v1/conversations/unread_count']))
})
it('does not render the release notes unread component when user has opted out of notifications', () => {
ENV.SETTINGS.release_notes_badge_disabled = true
render(<Navigation unreadComponent={unreadComponent} />)
expect(unreadComponent).toHaveBeenCalledTimes(2)
const urls = unreadComponent.mock.calls.map(parms => parms[0].dataUrl)
expect(urls).not.toEqual(expect.arrayContaining(['/api/v1/release_notes/unread_count']))
})
})
})

115
ui/features/navigation_header/react/__tests__/NavigationBadges.test.tsx Normal file
View File

@ -0,0 +1,115 @@
/*
* Copyright (C) 2023 - present Instructure, Inc.
*
* This file is part of Canvas.
*
* Canvas is free software: you can redistribute it and/or modify it under
* the terms of the GNU Affero General Public License as published by the Free
* Software Foundation, version 3 of the License.
*
* Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
* A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
* details.
*
* You should have received a copy of the GNU Affero General Public License along
* with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React from 'react'
import {render as testingLibraryRender, act} from '@testing-library/react'
import NavigationBadges from '../NavigationBadges'
import {QueryProvider, queryClient} from '@canvas/query'
import fetchMock from 'fetch-mock'
const render = (children: unknown) =>
testingLibraryRender(<QueryProvider>{children}</QueryProvider>)
const unreadComponent = jest.fn(() => <></>)
describe('GlobalNavigation', () => {
beforeEach(() => {
unreadComponent.mockClear()
window.ENV.current_user_id = '10'
window.ENV.current_user_disabled_inbox = false
window.ENV.CAN_VIEW_CONTENT_SHARES = true
// @ts-expect-error
window.ENV.SETTINGS = {release_notes_badge_disabled: false}
window.ENV.FEATURES = {embedded_release_notes: true}
fetchMock.get('/api/v1/users/self/content_shares/unread_count', {unread_count: 0})
fetchMock.get('/api/v1/conversations/unread_count', {unread_count: '0'})
fetchMock.get('/api/v1/release_notes/unread_count', {unread_count: 0})
})
afterEach(() => {
queryClient.resetQueries()
fetchMock.reset()
})
it('renders', async () => {
await act(async () => {
render(<NavigationBadges />)
})
})
describe('unread badges', () => {
it('fetches the shares unread count when the user does have permission', async () => {
ENV.CAN_VIEW_CONTENT_SHARES = true
await act(async () => {
render(<NavigationBadges />)
})
expect(
fetchMock.calls().every(([url]) => url !== '/api/v1/users/self/content_shares/unread_count')
).toBe(true)
})
it('does not fetch the shares unread count when the user does not have permission', async () => {
ENV.CAN_VIEW_CONTENT_SHARES = false
await act(async () => {
render(<NavigationBadges />)
})
expect(
fetchMock.calls().every(([url]) => url !== '/api/v1/users/self/content_shares/unread_count')
).toBe(true)
})
it('does not fetch the shares unread count when the user is not logged in', async () => {
ENV.current_user_id = null
await act(async () => {
render(<NavigationBadges />)
})
expect(
fetchMock.calls().every(([url]) => url !== '/api/v1/users/self/content_shares/unread_count')
).toBe(true)
})
it('fetches inbox count when user has not opted out of notifications', async () => {
ENV.current_user_disabled_inbox = false
await act(async () => {
render(<NavigationBadges />)
})
expect(fetchMock.calls().some(([url]) => url === '/api/v1/conversations/unread_count')).toBe(
true
)
})
it('does not fetch inbox count when user has opted out of notifications', async () => {
ENV.current_user_disabled_inbox = true
await act(async () => {
render(<NavigationBadges />)
})
expect(fetchMock.calls().every(([url]) => url !== '/api/v1/conversations/unread_count')).toBe(
true
)
})
it('does not fetch the release notes unread count when user has opted out of notifications', async () => {
ENV.SETTINGS.release_notes_badge_disabled = true
queryClient.setQueryData(['settings', 'release_notes_badge_disabled'], true)
await act(async () => {
render(<NavigationBadges />)
})
expect(fetchMock.calls().every(([url]) => url !== '/api/v1/release_notes/unread_count')).toBe(
true
)
})
})
})

166
ui/features/navigation_header/react/__tests__/UnreadCounts.test.jsx
View File

@ -1,166 +0,0 @@
// Copyright (C) 2015 - present Instructure, Inc.
//
// This file is part of Canvas.
//
// Canvas is free software: you can redistribute it and/or modify it under
// the terms of the GNU Affero General Public License as published by the Free
// Software Foundation, version 3 of the License.
//
// Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
// WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
// A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
// details.
//
// You should have received a copy of the GNU Affero General Public License along
// with this program. If not, see <http://www.gnu.org/licenses/>.
import React from 'react'
import {render} from '@testing-library/react'
import {findByText} from '@testing-library/dom'
import UnreadCounts from '../UnreadCounts'
const onUpdate = jest.fn(Function.prototype)
const apiStem = 'admin/users'
const userId = 5
const unreadCountFromApi = 10
const pollInterval = 60000
const allowedAge = 30000
const maxTries = 5
const useSessionStorage = true
const storageKey = `unread_count_${userId}_${apiStem.replace(/\//g, '_')}`
const props = {
onUpdate,
dataUrl: `http://getdata.edu/api/v1/${apiStem}/unread_count`,
pollIntervalMs: pollInterval,
allowedAge,
maxTries,
useSessionStorage,
}
expect.extend({
toBeNotLongAfter(received, time, tolerance = 500) {
const pass = received - time < tolerance
return {pass}
},
})
describe('GlobalNavigation::UnreadCounts', () => {
beforeEach(() => {
const span = document.createElement('span')
span.id = 'target-span'
document.body.appendChild(span)
fetch.resetMocks()
onUpdate.mockClear()
window.ENV.current_user_id = userId
})
describe('session storage', () => {
let fetchMock
let target
beforeEach(() => {
fetchMock = fetch.mockResponse(JSON.stringify({unread_count: unreadCountFromApi}))
target = document.getElementById('target-span')
window.sessionStorage.removeItem(storageKey)
jest.useFakeTimers()
})
it('when no stored value, uses and stores the value fetched', async () => {
const start = new Date()
render(<UnreadCounts {...props} targetEl={target} />)
jest.runAllTimers()
expect(await findByText(target, `${unreadCountFromApi} unread.`)).toBeInTheDocument()
expect(fetchMock).toHaveBeenCalled()
const saved = JSON.parse(window.sessionStorage.getItem(storageKey))
expect(saved.unreadCount).toBe(unreadCountFromApi)
expect(saved.updatedAt).toBeNotLongAfter(start)
})
it('uses stored value when it is new enough', async () => {
const last = {
updatedAt: +new Date() - allowedAge / 2, // within the allowed age
unreadCount: 12,
}
window.sessionStorage.setItem(storageKey, JSON.stringify(last))
render(<UnreadCounts {...props} targetEl={target} />)
expect(await findByText(target, '12 unread.')).toBeInTheDocument()
expect(fetchMock).not.toHaveBeenCalled()
})
it('fetches value when stored value is too old', async () => {
const last = {
updatedAt: +new Date() - allowedAge * 10, // way past the allowed age
unreadCount: 12,
}
window.sessionStorage.setItem(storageKey, JSON.stringify(last))
render(<UnreadCounts {...props} targetEl={target} />)
jest.runAllTimers()
expect(await findByText(target, `${unreadCountFromApi} unread.`)).toBeInTheDocument()
expect(fetchMock).toHaveBeenCalled()
})
it('fetches value and skips session store when useSessionStorage is false', async () => {
global.localStorage = {getItem: jest.fn(), setItem: jest.fn()}
render(<UnreadCounts {...props} targetEl={target} useSessionStorage={false} />)
jest.runAllTimers()
expect(await findByText(target, `${unreadCountFromApi} unread.`)).toBeInTheDocument()
expect(fetchMock).toHaveBeenCalled()
expect(localStorage.setItem).not.toHaveBeenCalled()
expect(localStorage.getItem).not.toHaveBeenCalled()
localStorage.setItem.mockClear()
localStorage.getItem.mockClear()
})
it('delays fetching until the allowed age has expired', () => {
const age = allowedAge / 2 // within the allowed age
const last = {
updatedAt: +new Date() - age,
unreadCount: 12,
}
window.sessionStorage.setItem(storageKey, JSON.stringify(last))
render(<UnreadCounts {...props} targetEl={target} />)
expect(fetchMock).not.toHaveBeenCalled()
jest.advanceTimersByTime(allowedAge - age + 50) // just past the allowed age
expect(fetchMock).toHaveBeenCalled()
})
it('skips fetching if refreshing is disabled and the allowed age has no expired', () => {
const age = allowedAge / 2 // within the allowed age
const last = {
updatedAt: +new Date() - age,
unreadCount: 12,
}
window.sessionStorage.setItem(storageKey, JSON.stringify(last))
render(<UnreadCounts {...props} pollIntervalMs={0} targetEl={target} />)
expect(fetchMock).not.toHaveBeenCalled()
jest.advanceTimersByTime(allowedAge - age + 50) // just past the allowed age
expect(fetchMock).not.toHaveBeenCalled()
})
})
describe('API sad path', () => {
let fetchMock
let target
beforeEach(() => {
fetchMock = fetch.mockReject(new Error('womp womp'))
target = document.getElementById('target-span')
window.sessionStorage.removeItem(storageKey)
jest.useFakeTimers()
})
it('calls the error callback and retries the right number of times', done => {
let errors = 0
function onError() {
errors += 1
expect(errors).toBeGreaterThan(0)
jest.advanceTimersByTime(pollInterval * maxTries)
if (errors >= maxTries) {
expect(fetchMock).toHaveBeenCalledTimes(maxTries)
done()
}
}
render(<UnreadCounts {...props} targetEl={target} onError={onError} />)
})
})
})

42
ui/features/navigation_header/react/trays/ProfileTray.tsx
View File

@ -31,6 +31,7 @@ import HighContrastModeToggle from './HighContrastModeToggle'
import {AccessibleContent} from '@instructure/ui-a11y-content'
import {useQuery} from '@canvas/query'
import profileQuery from '../queries/profileQuery'
import {getUnreadCount} from '../queries/unreadCountQuery'
import type {ProfileTab, TabCountsObj} from '../../../../api.d'
const I18n = useI18nScope('ProfileTray')
@ -39,17 +40,22 @@ const I18n = useI18nScope('ProfileTray')
// gross matching on the id of the tray tabs given to us by Rails
const idsToCounts = [{id: 'content_shares', countName: 'unreadShares'}]
const a11yCount = (count: string) => (
<AccessibleContent alt={I18n.t('%{count} unread.', {count})}>{count}</AccessibleContent>
)
function CountBadge({counts, id}: {counts: TabCountsObj; id: string}) {
const found = idsToCounts.filter(x => x.id === id)
if (found.length === 0) return null // no count defined for this label
const count = counts[found[0].countName]
if (count === 0) return null // zero count is not displayed
return (
<Badge count={count} standalone={true} margin="0 0 xxx-small small" formatOutput={a11yCount} />
<Badge
count={count}
standalone={true}
margin="0 0 xxx-small small"
formatOutput={(count_: string) => (
<AccessibleContent alt={I18n.t('%{count} unread.', {count: count_})}>
{count_}
</AccessibleContent>
)}
/>
)
}
@ -64,13 +70,33 @@ function ProfileTabLink({id, html_url, label, counts}: ProfileTab) {
)
}
export default function ProfileTray({counts}: {counts: TabCountsObj}) {
const {data, isLoading, isSuccess} = useQuery<ProfileTab[], Error>({
export default function ProfileTray() {
const {
data: profileTabs,
isLoading,
isSuccess,
} = useQuery<ProfileTab[], Error>({
queryKey: ['profile'],
queryFn: profileQuery,
fetchAtLeastOnce: true,
})
const countsEnabled = Boolean(
window.ENV.current_user_id && !window.ENV.current_user?.fake_student
)
const {data: unreadContentSharesCount} = useQuery({
queryKey: ['unread_count', 'content_shares'],
queryFn: getUnreadCount,
staleTime: 60 * 60 * 1000, // 1 hour
enabled: countsEnabled && ENV.CAN_VIEW_CONTENT_SHARES,
fetchAtLeastOnce: true,
})
const counts: TabCountsObj = {
unreadShares: unreadContentSharesCount,
}
const userDisplayName = window.ENV.current_user.display_name
const userPronouns = window.ENV.current_user.pronouns
const userAvatarURL = window.ENV.current_user.avatar_is_fallback
@ -111,7 +137,7 @@ export default function ProfileTray({counts}: {counts: TabCountsObj}) {
</List.Item>
)}
{isSuccess &&
data.map(tab => (
profileTabs.map(tab => (
<List.Item key={tab.id}>
<ProfileTabLink {...tab} counts={counts} />
</List.Item>

16
ui/features/navigation_header/react/trays/__tests__/ProfileTray.test.tsx
View File

@ -21,7 +21,6 @@ import {render as testingLibraryRender} from '@testing-library/react'
import {getByText as domGetByText} from '@testing-library/dom'
import ProfileTray from '../ProfileTray'
import {QueryProvider, queryClient} from '@canvas/query'
import type {TabCountsObj} from '../../../../../api.d'
const render = (children: unknown) =>
testingLibraryRender(<QueryProvider>{children}</QueryProvider>)
@ -47,8 +46,6 @@ const profileTabs = [
]
describe('ProfileTray', () => {
let props: {counts: TabCountsObj}
beforeEach(() => {
window.ENV = {
// @ts-expect-error
@ -58,10 +55,6 @@ describe('ProfileTray', () => {
},
current_user_roles: [],
}
props = {
counts: {unreadShares: 12},
}
})
afterEach(() => {
@ -69,14 +62,14 @@ describe('ProfileTray', () => {
})
it('renders the component', () => {
const {getByText} = render(<ProfileTray {...props} />)
const {getByText} = render(<ProfileTray />)
getByText('Sample Student')
})
it('renders the avatar', () => {
window.ENV.current_user.avatar_is_fallback = false
window.ENV.current_user.avatar_image_url = imageUrl
const {getByAltText} = render(<ProfileTray {...props} />)
const {getByAltText} = render(<ProfileTray />)
const avatar = getByAltText('User profile picture')
// @ts-expect-error
expect(avatar.src).toBe(imageUrl)
@ -84,14 +77,15 @@ describe('ProfileTray', () => {
it('renders the tabs', () => {
queryClient.setQueryData(['profile'], profileTabs)
const {getByText} = render(<ProfileTray {...props} />)
const {getByText} = render(<ProfileTray />)
getByText('Foo')
getByText('Bar')
})
it('renders the unread count badge on Shared Content', () => {
queryClient.setQueryData(['profile'], profileTabs)
const {container} = render(<ProfileTray {...props} />)
queryClient.setQueryData(['unread_count', 'content_shares'], 12)
const {container} = render(<ProfileTray />)
// @ts-expect-error
const elt = container.firstChild.querySelector('a[href="/shared"]')
domGetByText(elt, '12 unread.')

2
ui/features/speed_grader/jquery/speed_grader.tsx
View File

@ -819,7 +819,7 @@ function renderCommentTextArea() {
<CommentArea
getTextAreaRef={getTextAreaRef}
courseId={ENV.course_id}
userId={ENV.current_user_id}
userId={ENV.current_user_id!}
/>,
document.getElementById(SPEED_GRADER_COMMENT_TEXTAREA_MOUNT_POINT)
)

2
ui/shared/global/env/EnvCommon.d.ts vendored
View File

@ -49,7 +49,7 @@ export interface EnvCommon {
url_to_what_gets_loaded_inside_the_tinymce_editor_css: string
url_for_high_contrast_tinymce_editor_css: string
csp?: string
current_user_id: string
current_user_id: string | null
current_user_global_id: string
current_user_roles: string[]
current_user_is_student: boolean