Create No Outcomes Billboard Page for Outcome Management
Create page to display when there are no outcomes associated with the account/course. This page will render until outcomes have been associated. For now, this page will always render until APIs are ready. Used instUI Billboard heading which is slightly different than mocks. closes OUT-4012 flag=improved_outcomes_management test plan: - Go to Account > Settings > Feature Options - Enable Improved Outcomes Management FF - With Improved Outcomes Management FF Enabled - Go to Account > Outcomes - You should see the no outcomes billboard that displays the correct context in the message - Go to Course > Outcomes - You should see the no outcomes billboard that displays the correct context in the message - Disable Improved Outcomes Management FF - Without Improved Outcomes Management FF disabled - Go to Account > Outcomes - You should see previous Outcomes manager - Go to Course > Outcomes - You should see previous Outcomes manager Change-Id: Iacacb200efec4ca5ea485ad87512e3b61f5a3f07 Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/253748 Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com> Product-Review: Jody Sailor Reviewed-by: Pat Renner <prenner@instructure.com> Reviewed-by: Michael Brewer-Davis <mbd@instructure.com> QA-Review: Pablo Gomez <pablo.gomez@instructure.com>
This commit is contained in:
Chrystal Langston
parent
fcfe6fe18e
commit
22343d4867
|
|
@ -22,6 +22,7 @@ import MasteryScale from 'jsx/outcomes/MasteryScale'
|
|||
import MasteryCalculation from 'jsx/outcomes/MasteryCalculation'
|
||||
import {ApolloProvider, createClient} from 'jsx/canvas-apollo'
|
||||
import ManagementHeader from './ManagementHeader'
|
||||
import OutcomeManagementPanel from './OutcomeManagementPanel'
|
||||
|
||||
export const OutcomePanel = () => {
|
||||
useEffect(() => {
|
||||
|
|
@ -61,7 +62,11 @@ const OutcomeManagement = () => {
|
|||
{improvedManagement && <ManagementHeader />}
|
||||
<Tabs onRequestTabChange={handleTabChange}>
|
||||
<Tabs.Panel renderTitle={I18n.t('Manage')} isSelected={selectedIndex === 0}>
|
||||
<OutcomePanel />
|
||||
{improvedManagement ? (
|
||||
<OutcomeManagementPanel contextType={contextType} contextId={contextId} />
|
||||
) : (
|
||||
<OutcomePanel />
|
||||
)}
|
||||
</Tabs.Panel>
|
||||
<Tabs.Panel renderTitle={I18n.t('Mastery')} isSelected={selectedIndex === 1}>
|
||||
<MasteryScale contextType={contextType} contextId={contextId} />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
/*
|
||||
* Copyright (C) 2020 - 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 {Billboard} from '@instructure/ui-billboard'
|
||||
import SVGWrapper from '../shared/SVGWrapper'
|
||||
import {PresentationContent} from '@instructure/ui-a11y'
|
||||
import I18n from 'i18n!OutcomeManagement'
|
||||
import React from 'react'
|
||||
|
||||
const OutcomeManagementPanel = ({contextType, contextId}) => {
|
||||
const isCourse = contextType === 'Course'
|
||||
return (
|
||||
<div className="management-panel">
|
||||
<Billboard
|
||||
size="large"
|
||||
headingLevel="h3"
|
||||
heading={
|
||||
<div>
|
||||
{isCourse
|
||||
? I18n.t('Outcomes have not been added to this course yet.')
|
||||
: I18n.t('Outcomes have not been added to this account yet.')}
|
||||
<br />
|
||||
<br />
|
||||
{isCourse
|
||||
? I18n.t('Get started by finding, importing or creating your course outcomes.')
|
||||
: I18n.t('Get started by finding, importing or creating your account outcomes.')}
|
||||
</div>
|
||||
}
|
||||
hero={
|
||||
<div>
|
||||
<PresentationContent>
|
||||
<SVGWrapper url="/images/magnifying_glass.svg" />
|
||||
</PresentationContent>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default OutcomeManagementPanel
|
||||
|
|
@ -38,6 +38,18 @@ describe('OutcomeManagement', () => {
|
|||
expect(wrapper.find('ManagementHeader').exists()).toBe(true)
|
||||
delete window.ENV.IMPROVED_OUTCOMES_MANAGEMENT
|
||||
})
|
||||
|
||||
it('renders OutcomeManagementPanel when improved outcomes enabled', () => {
|
||||
window.ENV.IMPROVED_OUTCOMES_MANAGEMENT = true
|
||||
const wrapper = shallow(<OutcomeManagement />)
|
||||
expect(wrapper.find('OutcomeManagementPanel').exists()).toBe(true)
|
||||
delete window.ENV.IMPROVED_OUTCOMES_MANAGEMENT
|
||||
})
|
||||
|
||||
it('does not render OutcomeManagementPanel when improved outcomes disabled', () => {
|
||||
const wrapper = shallow(<OutcomeManagement />)
|
||||
expect(wrapper.find('OutcomeManagementPanel').exists()).toBe(false)
|
||||
})
|
||||
}
|
||||
|
||||
describe('account', () => {
|
||||
|
|
@ -58,6 +70,13 @@ describe('OutcomeManagement', () => {
|
|||
expect(wrapper.find('MasteryScale').prop('contextType')).toBe('Account')
|
||||
expect(wrapper.find('MasteryScale').prop('contextId')).toBe('1')
|
||||
})
|
||||
|
||||
it('passes accountId to the OutcomeManagementPanel component', () => {
|
||||
window.ENV.IMPROVED_OUTCOMES_MANAGEMENT = true
|
||||
const wrapper = shallow(<OutcomeManagement />)
|
||||
expect(wrapper.find('OutcomeManagementPanel').prop('contextType')).toBe('Account')
|
||||
expect(wrapper.find('OutcomeManagementPanel').prop('contextId')).toBe('1')
|
||||
})
|
||||
})
|
||||
|
||||
describe('course', () => {
|
||||
|
|
@ -78,6 +97,13 @@ describe('OutcomeManagement', () => {
|
|||
expect(wrapper.find('MasteryScale').prop('contextType')).toBe('Course')
|
||||
expect(wrapper.find('MasteryScale').prop('contextId')).toBe('2')
|
||||
})
|
||||
|
||||
it('passes courseId to the OutcomeManagementPanel component', () => {
|
||||
window.ENV.IMPROVED_OUTCOMES_MANAGEMENT = true
|
||||
const wrapper = shallow(<OutcomeManagement />)
|
||||
expect(wrapper.find('OutcomeManagementPanel').prop('contextType')).toBe('Course')
|
||||
expect(wrapper.find('OutcomeManagementPanel').prop('contextId')).toBe('2')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
<svg width="134" height="134" viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M121.003 111.25L111.104 121.076L78.5767 88.7905L88.4767 78.9639L121.003 111.25Z" fill="#C0C6CB"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M79.9911 88.7902L111.103 119.673L119.589 111.25L88.4761 80.3681L79.9911 88.7902ZM111.103 122.48L77.1631 88.7902L88.4761 77.561L122.417 111.25L111.103 122.48Z" fill="#243038"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M86.3555 16.4979C105.881 35.8793 105.881 67.3038 86.3555 86.6842C66.8295 106.067 35.1705 106.067 15.6445 86.6842C-3.8815 67.3038 -3.8815 35.8793 15.6445 16.4979C35.1705 -2.88343 66.8295 -2.88343 86.3555 16.4979Z" fill="#E5E7E9"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M51 2.97711C38.452 2.97711 25.904 7.71773 16.352 17.2C7.097 26.3854 2 38.5993 2 51.5913C2 64.5824 7.097 76.7962 16.352 85.9827C35.457 104.946 66.543 104.946 85.648 85.9827C104.753 67.0192 104.753 36.1634 85.648 17.2C76.096 7.71773 63.548 2.97711 51 2.97711ZM51 102.214C37.377 102.214 24.57 96.9478 14.937 87.3862C5.305 77.8255 0 65.1134 0 51.5913C0 38.0692 5.305 25.3571 14.937 15.7964C34.822 -3.94126 67.178 -3.94126 87.063 15.7964C106.947 35.5332 106.947 67.6485 87.063 87.3862C77.43 96.9478 64.623 102.214 51 102.214Z" fill="#243038"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M79.2842 23.5162C94.9052 39.0215 94.9052 64.1609 79.2842 79.6661C63.6632 95.1704 38.3372 95.1704 22.7162 79.6661C7.09524 64.1609 7.09524 39.0215 22.7162 23.5162C38.3372 8.01088 63.6632 8.01088 79.2842 23.5162Z" fill="#9AD6F5"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M50.9998 12.898C41.0128 12.898 31.0258 16.6718 23.4228 24.2175C8.21681 39.3109 8.21681 63.8706 23.4228 78.964C38.6298 94.0563 63.3698 94.0563 78.5768 78.964C93.7828 63.8706 93.7828 39.3109 78.5768 24.2175C70.9738 16.6718 60.9868 12.898 50.9998 12.898ZM50.9998 92.2677C40.5008 92.2677 30.0018 88.3013 22.0088 80.3675C6.0218 64.4999 6.0218 38.6816 22.0088 22.814C37.9948 6.94741 64.0048 6.94741 79.9908 22.814C95.9778 38.6816 95.9778 64.4999 79.9908 80.3675C71.9978 88.3013 61.4988 92.2677 50.9998 92.2677Z" fill="#243038"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M129.488 125.288L125.246 129.499C121.341 133.375 115.009 133.375 111.103 129.499L82.8193 101.424L101.204 83.1748L129.488 111.25C133.393 115.126 133.393 121.411 129.488 125.288Z" fill="#C5946F"/>
|
||||
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="81" y="81" width="53" height="53">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M81.4053 81.771H133.412V133.393H81.4053V81.771Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M84.2333 101.423L111.81 128.797C115.32 132.279 121.029 132.279 124.539 128.797L128.781 124.585C132.29 121.102 132.29 115.435 128.781 111.952L101.204 84.578L84.2333 101.423ZM118.174 133.393C115.357 133.393 112.541 132.329 110.396 130.201L81.4053 101.423L101.204 81.771L130.195 110.548C134.484 114.804 134.484 121.732 130.195 125.989L125.953 130.201C123.808 132.329 120.992 133.393 118.174 133.393Z" fill="#243038"/>
|
||||
</g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M112.518 94.4051L94.1326 112.654L88.4766 107.039L106.862 88.79L112.518 94.4051Z" fill="#B1703F"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M89.8905 107.039L94.1325 111.251L111.104 94.4053L106.862 90.1938L89.8905 107.039ZM94.1325 114.058L87.0625 107.039L106.861 87.3867L113.931 94.4053L94.1325 114.058Z" fill="#243038"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M55.1584 35.0468C55.1584 42.6263 48.9684 48.7704 41.3323 48.7704C33.6963 48.7704 27.5063 42.6263 27.5063 35.0468C27.5063 27.4674 33.6963 21.3232 41.3323 21.3232C48.9684 21.3232 55.1584 27.4674 55.1584 35.0468Z" fill="#EAF7FC"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
Loading…
Reference in New Issue