diff --git a/app/jsx/outcomes/OutcomeManagement.js b/app/jsx/outcomes/OutcomeManagement.js index 86efc1bc2e8..8659e1477d1 100644 --- a/app/jsx/outcomes/OutcomeManagement.js +++ b/app/jsx/outcomes/OutcomeManagement.js @@ -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 && } - + {improvedManagement ? ( + + ) : ( + + )} diff --git a/app/jsx/outcomes/OutcomeManagementPanel.js b/app/jsx/outcomes/OutcomeManagementPanel.js new file mode 100644 index 00000000000..90033b61d0c --- /dev/null +++ b/app/jsx/outcomes/OutcomeManagementPanel.js @@ -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 . + */ +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 ( +
+ + {isCourse + ? I18n.t('Outcomes have not been added to this course yet.') + : I18n.t('Outcomes have not been added to this account yet.')} +
+
+ {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.')} +
+ } + hero={ +
+ + + +
+ } + /> + + ) +} + +export default OutcomeManagementPanel diff --git a/app/jsx/outcomes/__tests__/OutcomeManagement.test.js b/app/jsx/outcomes/__tests__/OutcomeManagement.test.js index 239420489ec..e17d5bd6ecf 100644 --- a/app/jsx/outcomes/__tests__/OutcomeManagement.test.js +++ b/app/jsx/outcomes/__tests__/OutcomeManagement.test.js @@ -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() + 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() + 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() + 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() + expect(wrapper.find('OutcomeManagementPanel').prop('contextType')).toBe('Course') + expect(wrapper.find('OutcomeManagementPanel').prop('contextId')).toBe('2') + }) }) }) diff --git a/public/images/magnifying_glass.svg b/public/images/magnifying_glass.svg new file mode 100644 index 00000000000..df341d9e267 --- /dev/null +++ b/public/images/magnifying_glass.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + +