Improve C4E dashboard schedule tab empty states

rojlarge · rojlarge · commit 8d9a01dae7c3 · 2021-06-02T15:33:37.000Z
Updates the C4E dashboard schedule tab to use the homeroom tab empty state when a user has no enrollments at all, and updates the text associated with the C4E planner preview to make it work for admins as well as teachers. fixes LS-2220 flag = none Test plan: - You may need to enable the "canvas for elementary" setting on your root account to allow the C4E dashboard to show up for users with no enrollments prior to testing this. - On the C4E dashboard schedule tab, expect: * As a non-admin with no enrollments, an empty state with the "You don't have any active courses yet message." * As an admin with no enrollments, the "You don't have any active courses yet" empty state * As a student with enrollments, the weekly planner * As a teacher or admin with enrollments, the "Schedule Preview" empty state with some mock planner items Change-Id: I77f1afead44d86f25526959e2b3748ab7d6b6bbd Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/265888 Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com> Reviewed-by: Jackson Howe <jackson.howe@instructure.com> QA-Review: Jackson Howe <jackson.howe@instructure.com> Product-Review: Peyton Craighill <pcraighill@instructure.com>
diff --git a/packages/canvas-planner/src/components/PlannerItem/__tests__/__snapshots__/PlannerItem.spec.js.snap b/packages/canvas-planner/src/components/PlannerItem/__tests__/__snapshots__/PlannerItem.spec.js.snap
diff --git a/packages/canvas-planner/src/components/PlannerItem/index.js b/packages/canvas-planner/src/components/PlannerItem/index.js
@@ -560,7 +560,7 @@ export class PlannerItem extends Component {
         >
           <Checkbox
             ref={this.registerFocusElementRef}
-            aria-label={checkboxLabel}
+            label={<ScreenReaderContent>{checkboxLabel}</ScreenReaderContent>}
             checked={this.props.toggleAPIPending ? !this.state.completed : this.state.completed}
             onChange={this.props.toggleCompletion}
             disabled={this.props.toggleAPIPending}
diff --git a/packages/canvas-planner/src/components/PlannerPreview/index.js b/packages/canvas-planner/src/components/PlannerPreview/index.js
@@ -106,7 +106,7 @@ const ITEMS = [
   }
 ]
 
-export default function TeacherPreview({timeZone}) {
+export default function PlannerPreview({timeZone}) {
   return (
     <View as="section">
       <View as="section" margin="x-large large">
@@ -116,11 +116,11 @@ export default function TeacherPreview({timeZone}) {
           </View>
           <Text letterSpacing="expanded">
             <Heading as="h2" level="h3" margin="small">
-              {formatMessage('Teacher Schedule Preview')}
+              {formatMessage('Schedule Preview')}
             </Heading>
           </Text>
           <Text>
-            {formatMessage('Below is an example of how your students will see their schedule')}
+            {formatMessage('Below is an example of how students will see their schedule')}
           </Text>
         </Flex>
       </View>
@@ -137,6 +137,6 @@ export default function TeacherPreview({timeZone}) {
   )
 }
 
-TeacherPreview.propTypes = {
+PlannerPreview.propTypes = {
   timeZone: string.isRequired
 }
diff --git a/packages/canvas-planner/src/components/PlannerPreview/kinder-panda.svg b/packages/canvas-planner/src/components/PlannerPreview/kinder-panda.svg
diff --git a/packages/canvas-planner/src/index.js b/packages/canvas-planner/src/index.js
@@ -40,7 +40,7 @@ import {initializeDateTimeFormatters} from './utilities/dateUtils'
 import {DynamicUiManager, DynamicUiProvider, specialFallbackFocusId} from './dynamic-ui'
 import responsiviser from './components/responsiviser'
 
-const TeacherPreview = React.lazy(() => import('./components/TeacherPreview'))
+const PlannerPreview = React.lazy(() => import('./components/PlannerPreview'))
 const ToDoSidebar = React.lazy(() => import('./components/ToDoSidebar'))
 const PlannerApp = React.lazy(() => import('./components/PlannerApp'))
 const PlannerHeader = React.lazy(() => import('./components/PlannerHeader'))
@@ -52,10 +52,10 @@ export {loadThisWeekItems, startLoadingAllOpportunities, toggleMissingItems}
 
 export {responsiviser}
 
-export function createTeacherPreview(timeZone) {
+export function createPlannerPreview(timeZone) {
   return (
     <Suspense fallback={loading()}>
-      <TeacherPreview timeZone={timeZone} />
+      <PlannerPreview timeZone={timeZone} />
     </Suspense>
   )
 }
diff --git a/spec/selenium/dashboard/elementary/k5_dashboard_admin_spec.rb b/spec/selenium/dashboard/elementary/k5_dashboard_admin_spec.rb
@@ -110,10 +110,10 @@
   end
 
   context 'admin schedule' do
-    it 'shows a sample preview for admin (teacher) view of the schedule tab' do
+    it 'shows an empty state for the admin (teacher) view of the course schedule tab with no enrollments' do
       get "/#schedule"
 
-      expect(teacher_preview).to be_displayed
+      expect(empty_dashboard).to be_displayed
     end
 
     it 'shows a sample preview for admin (teacher) view of the course schedule tab' do
diff --git a/spec/selenium/dashboard/pages/k5_dashboard_page.rb b/spec/selenium/dashboard/pages/k5_dashboard_page.rb
@@ -145,7 +145,11 @@ def week_date_selector
   end
 
   def teacher_preview_selector
-    "h2:contains('Teacher Schedule Preview')"
+    "h2:contains('Schedule Preview')"
+  end
+
+  def empty_dashboard_selector
+    "[data-testid = 'empty-dash-panda']:visible"
   end
 
   def previous_week_button_selector
@@ -522,6 +526,10 @@ def teacher_preview
     fj(teacher_preview_selector)
   end
 
+  def empty_dashboard
+    fj(empty_dashboard_selector)
+  end
+
   def beginning_of_week_date
     date_block = ff(week_date_selector)
     date_block[0].text == 'Today' ? date_block[1].text : date_block[0].text
diff --git a/spec/selenium/dashboard/pages/student_planner_page.rb b/spec/selenium/dashboard/pages/student_planner_page.rb
@@ -220,7 +220,7 @@ def list_view_planner_item(text)
   end
 
   def planner_item_status_checkbox(object_type, object_name)
-    fj("input[aria-label='#{object_type} #{object_name} is not marked as done.'] + label")
+    fj("input + label:contains('#{object_type} #{object_name} is not marked as done.')")
   end
 
   def course_page_recent_activity
diff --git a/spec/selenium/dashboard/planner/student_planner_spec.rb b/spec/selenium/dashboard/planner/student_planner_spec.rb
@@ -192,7 +192,7 @@
       go_to_list_view
       mark_peer_review_as_complete(@course.name)
 
-      expect(peer_review_item(@course.name)).to contain_css("[aria-label='Peer Review #{@assignment.name} is marked as done.']")
+      expect(peer_review_item(@course.name)).to contain_jqcss("label:contains('Peer Review #{@assignment.name} is marked as done.')")
     end
   end
 
diff --git a/ui/features/k5_course/react/K5Course.js b/ui/features/k5_course/react/K5Course.js
@@ -21,11 +21,7 @@ import {connect, Provider} from 'react-redux'
 import I18n from 'i18n!k5_course'
 import PropTypes from 'prop-types'
 
-import {
-  createTeacherPreview,
-  startLoadingAllOpportunities,
-  store
-} from '@instructure/canvas-planner'
+import {startLoadingAllOpportunities, store} from '@instructure/canvas-planner'
 import {
   IconBankLine,
   IconCalendarMonthLine,
@@ -304,8 +300,13 @@ export function K5Course({
           />
         )}
         {currentTab === TAB_IDS.HOME && <OverviewPage content={courseOverview} />}
-        {plannerInitialized && <SchedulePage visible={currentTab === TAB_IDS.SCHEDULE} />}
-        {!plannerEnabled && currentTab === TAB_IDS.SCHEDULE && createTeacherPreview(timeZone)}
+        <SchedulePage
+          plannerEnabled={plannerEnabled}
+          plannerInitialized={plannerInitialized}
+          timeZone={timeZone}
+          userHasEnrollments
+          visible={currentTab === TAB_IDS.SCHEDULE}
+        />
         {currentTab === TAB_IDS.GRADES && (
           <GradesPage
             courseId={id}
diff --git a/ui/features/k5_dashboard/react/HomeroomPage.js b/ui/features/k5_dashboard/react/HomeroomPage.js
@@ -27,15 +27,13 @@ import {IconButton} from '@instructure/ui-buttons'
 import {IconAddSolid} from '@instructure/ui-icons'
 import {Flex} from '@instructure/ui-flex'
 import {Tooltip} from '@instructure/ui-tooltip'
-import {Text} from '@instructure/ui-text'
-import {Img} from '@instructure/ui-img'
 
 import K5DashboardCard, {CARD_SIZE_PX} from './K5DashboardCard'
 import {createDashboardCards} from '@canvas/dashboard-card'
 import HomeroomAnnouncementsLayout from './HomeroomAnnouncementsLayout'
 import LoadingSkeleton from '@canvas/k5/react/LoadingSkeleton'
 import {CreateCourseModal} from './CreateCourseModal'
-import EmptyDashPandaUrl from '../images/empty-dashboard.svg'
+import EmptyDashboardState from '@canvas/k5/react/EmptyDashboardState'
 
 export const HomeroomPage = ({
   cards,
@@ -121,10 +119,7 @@ export const HomeroomPage = ({
         ) : cards.length > 0 ? (
           dashboardCards
         ) : (
-          <Flex direction="column" alignItems="center" margin="x-large large">
-            <Img src={EmptyDashPandaUrl} margin="0 0 medium 0" data-testid="empty-dash-panda" />
-            <Text>{I18n.t("You don't have any active courses yet.")}</Text>
-          </Flex>
+          <EmptyDashboardState />
         )}
       </View>
       {courseModalOpen && (
diff --git a/ui/features/k5_dashboard/react/K5Dashboard.js b/ui/features/k5_dashboard/react/K5Dashboard.js
@@ -21,7 +21,6 @@ import I18n from 'i18n!k5_dashboard'
 import PropTypes from 'prop-types'
 
 import {
-  createTeacherPreview,
   loadThisWeekItems,
   startLoadingAllOpportunities,
   responsiviser,
@@ -106,7 +105,7 @@ export const K5Dashboard = ({
   })
 
   useEffect(() => {
-    if (!cards && (currentTab === TAB_IDS.HOMEROOM || currentTab === TAB_IDS.RESOURCES)) {
+    if (!cards && [TAB_IDS.HOMEROOM, TAB_IDS.SCHEDULE, TAB_IDS.RESOURCES].includes(currentTab)) {
       loadCardDashboard((dc, cardsFinishedLoading) => {
         const activeCards = dc.filter(({enrollmentState}) => enrollmentState !== 'invited')
         setCards(activeCards)
@@ -197,8 +196,13 @@ export const K5Dashboard = ({
           loadingAnnouncements={loadingAnnouncements}
           visible={currentTab === TAB_IDS.HOMEROOM}
         />
-        {plannerInitialized && <SchedulePage visible={currentTab === TAB_IDS.SCHEDULE} />}
-        {!plannerEnabled && currentTab === TAB_IDS.SCHEDULE && createTeacherPreview(timeZone)}
+        <SchedulePage
+          plannerEnabled={plannerEnabled}
+          plannerInitialized={plannerInitialized}
+          timeZone={timeZone}
+          userHasEnrollments={cards?.length}
+          visible={currentTab === TAB_IDS.SCHEDULE}
+        />
         <GradesPage visible={currentTab === TAB_IDS.GRADES} />
         {cards && (
           <ResourcesPage
diff --git a/ui/features/k5_dashboard/react/__tests__/K5Dashboard.test.js b/ui/features/k5_dashboard/react/__tests__/K5Dashboard.test.js
@@ -445,6 +445,27 @@ describe('K-5 Dashboard', () => {
       expect(getAllByText('Loading Card')[0]).toBeInTheDocument()
     })
 
+    it('displays an empty state on the homeroom and schedule tabs if the user has no cards', async () => {
+      moxios.stubs.reset()
+      moxios.stubRequest('/api/v1/dashboard/dashboard_cards', {
+        status: 200,
+        response: []
+      })
+      const {getByRole, getByTestId, getByText} = render(
+        <K5Dashboard {...defaultProps} plannerEnabled />
+      )
+      await waitFor(() =>
+        expect(getByText("You don't have any active courses yet.")).toBeInTheDocument()
+      )
+      expect(getByTestId('empty-dash-panda')).toBeInTheDocument()
+
+      const scheduleTab = getByRole('tab', {name: 'Schedule'})
+      act(() => scheduleTab.click())
+
+      expect(getByText("You don't have any active courses yet.")).toBeInTheDocument()
+      expect(getByTestId('empty-dash-panda')).toBeInTheDocument()
+    })
+
     it('only fetches announcements and LTIs based on cards once per page load', done => {
       sessionStorage.setItem('dashcards_for_user_1', JSON.stringify(dashboardCards))
       moxios.withMock(() => {
@@ -570,9 +591,9 @@ describe('K-5 Dashboard', () => {
       )
 
       expect(await findByTestId('kinder-panda')).toBeInTheDocument()
-      expect(getByText('Teacher Schedule Preview')).toBeInTheDocument()
+      expect(getByText('Schedule Preview')).toBeInTheDocument()
       expect(
-        getByText('Below is an example of how your students will see their schedule')
+        getByText('Below is an example of how students will see their schedule')
       ).toBeInTheDocument()
       expect(getByText('Social Studies')).toBeInTheDocument()
       expect(getByText('A great discussion assignment')).toBeInTheDocument()
diff --git a/ui/shared/k5/images/empty-dashboard.svg b/ui/shared/k5/images/empty-dashboard.svg
diff --git a/ui/shared/k5/react/EmptyDashboardState.js b/ui/shared/k5/react/EmptyDashboardState.js
@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2021 - 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 I18n from 'i18n!k5_empty_dashboard_state'
+
+import {Flex} from '@instructure/ui-flex'
+import {Text} from '@instructure/ui-text'
+import {Img} from '@instructure/ui-img'
+
+import EmptyDashPandaUrl from '../images/empty-dashboard.svg'
+
+const EmptyDashboardState = () => (
+  <Flex
+    as="div"
+    height="50vh"
+    direction="column"
+    alignItems="center"
+    justifyItems="center"
+    margin="x-large large"
+  >
+    <Img src={EmptyDashPandaUrl} margin="0 0 medium 0" data-testid="empty-dash-panda" />
+    <Text>{I18n.t("You don't have any active courses yet.")}</Text>
+  </Flex>
+)
+
+export default EmptyDashboardState
diff --git a/ui/shared/k5/react/SchedulePage.js b/ui/shared/k5/react/SchedulePage.js
@@ -21,18 +21,44 @@ import PropTypes from 'prop-types'
 
 import {
   createPlannerApp,
+  createPlannerPreview,
   renderWeeklyPlannerHeader,
   JumpToHeaderButton
 } from '@instructure/canvas-planner'
 
-const SchedulePage = ({visible = false}) => {
+import EmptyDashboardState from '@canvas/k5/react/EmptyDashboardState'
+
+const SchedulePage = ({
+  plannerEnabled,
+  plannerInitialized,
+  timeZone,
+  userHasEnrollments,
+  visible
+}) => {
   const [isPlannerCreated, setPlannerCreated] = useState(false)
   const plannerApp = useRef()
 
   useEffect(() => {
-    plannerApp.current = createPlannerApp()
-    setPlannerCreated(true)
-  }, [])
+    if (plannerInitialized) {
+      plannerApp.current = createPlannerApp()
+      setPlannerCreated(true)
+    }
+  }, [plannerInitialized])
+
+  let content = <></>
+  if (plannerInitialized && isPlannerCreated) {
+    content = (
+      <>
+        {renderWeeklyPlannerHeader({visible})}
+        {plannerApp.current}
+        <JumpToHeaderButton />
+      </>
+    )
+  } else if (!userHasEnrollments) {
+    content = <EmptyDashboardState />
+  } else if (!plannerEnabled) {
+    content = createPlannerPreview(timeZone)
+  }
 
   return (
     <section
@@ -43,15 +69,17 @@ const SchedulePage = ({visible = false}) => {
       }}
       aria-hidden={!visible}
     >
-      {renderWeeklyPlannerHeader({visible})}
-      {isPlannerCreated && plannerApp.current}
-      {isPlannerCreated && <JumpToHeaderButton />}
+      {content}
     </section>
   )
 }
 
 SchedulePage.propTypes = {
-  visible: PropTypes.bool
+  plannerEnabled: PropTypes.bool.isRequired,
+  plannerInitialized: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]).isRequired,
+  timeZone: PropTypes.string.isRequired,
+  userHasEnrollments: PropTypes.bool.isRequired,
+  visible: PropTypes.bool.isRequired
 }
 
 export default SchedulePage

Original file line number	Diff line number	Diff line change
`@@ -560,7 +560,7 @@ export class PlannerItem extends Component {`
`560`	`560`	`>`
`561`	`561`	`<Checkbox`
`562`	`562`	`ref={this.registerFocusElementRef}`
`563`		`- aria-label={checkboxLabel}`
	`563`	`+ label={<ScreenReaderContent>{checkboxLabel}</ScreenReaderContent>}`
`564`	`564`	`checked={this.props.toggleAPIPending ? !this.state.completed : this.state.completed}`
`565`	`565`	`onChange={this.props.toggleCompletion}`
`566`	`566`	`disabled={this.props.toggleAPIPending}`
Original file line number	Diff line number	Diff line change
`@@ -106,7 +106,7 @@ const ITEMS = [`
`106`	`106`	`}`
`107`	`107`	`]`
`108`	`108`
`109`		`-export default function TeacherPreview({timeZone}) {`
	`109`	`+export default function PlannerPreview({timeZone}) {`
`110`	`110`	`return (`
`111`	`111`	`<View as="section">`
`112`	`112`	`<View as="section" margin="x-large large">`
`@@ -116,11 +116,11 @@ export default function TeacherPreview({timeZone}) {`
`116`	`116`	`</View>`
`117`	`117`	`<Text letterSpacing="expanded">`
`118`	`118`	`<Heading as="h2" level="h3" margin="small">`
`119`		`- {formatMessage('Teacher Schedule Preview')}`
	`119`	`+ {formatMessage('Schedule Preview')}`
`120`	`120`	`</Heading>`
`121`	`121`	`</Text>`
`122`	`122`	`<Text>`
`123`		`- {formatMessage('Below is an example of how your students will see their schedule')}`
	`123`	`+ {formatMessage('Below is an example of how students will see their schedule')}`
`124`	`124`	`</Text>`
`125`	`125`	`</Flex>`
`126`	`126`	`</View>`
`@@ -137,6 +137,6 @@ export default function TeacherPreview({timeZone}) {`
`137`	`137`	`)`
`138`	`138`	`}`
`139`	`139`
`140`		`-TeacherPreview.propTypes = {`
	`140`	`+PlannerPreview.propTypes = {`
`141`	`141`	`timeZone: string.isRequired`
`142`	`142`	`}`