@instructure/quiz-core 22.16.1 → 22.18.0

package/src/building/components/resources/BanksTray/presenter.js

@@ -0,0 +1,210 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+
+import {Mask} from '@instructure/ui-overlays'
+import {Tray} from '@instructure/ui-tray'
+import {Portal} from '@instructure/ui-portal'
+import {Dialog} from '@instructure/ui-dialog'
+
+import {Button} from '@instructure/ui-buttons'
+import {Alert} from '@instructure/ui-alerts'
+import {Text} from '@instructure/ui-text'
+
+import t from '@instructure/quiz-i18n/format-message'
+import Banks from '../../../../banks/components/Banks'
+import BankEntry from '../../../../banks/components/BankEntry'
+import Bank from '../../../../banks/components/Bank'
+import {liveRegion} from '@instructure/quiz-common/alertHelpers'
+import {
+  BUILD_TRAY_OPEN,
+  BUILD_TRAY_POSITION,
+  BUILD_TRAY_STIMULUS_ID,
+  TRAY_ALERT_OPEN,
+  BANKS_BANK_PAGINATION,
+} from '@instructure/quiz-common/constants'
+
+export class BanksTray extends Component {
+  static propTypes = {
+    activeBankId: PropTypes.string,
+    activeBankEntryId: PropTypes.string,
+    clear: PropTypes.func.isRequired,
+    currentUser: PropTypes.shape({
+      bank_admin: PropTypes.bool,
+      can_share_banks_with_subaccounts: PropTypes.bool,
+      email: PropTypes.string,
+      enrollment_names: PropTypes.arrayOf(PropTypes.string),
+      full_name: PropTypes.string,
+      uuid: PropTypes.string,
+      account_name: PropTypes.string,
+    }),
+    getCourseInfo: PropTypes.func,
+    getCourseAssignments: PropTypes.func,
+    getUserInfo: PropTypes.func,
+    getShareableCourses: PropTypes.func,
+    getShareableUsers: PropTypes.func,
+    getShareableSubaccounts: PropTypes.func,
+    getSubaccountInfo: PropTypes.func,
+    minChars: PropTypes.number,
+    newActiveBank: PropTypes.func.isRequired,
+    newActiveBankEntry: PropTypes.func.isRequired,
+    onShare: PropTypes.func,
+    setUI: PropTypes.func.isRequired,
+    trayAlertOpen: PropTypes.bool.isRequired,
+    trayOpen: PropTypes.bool.isRequired,
+    trayTrigger: PropTypes.shape({focus: PropTypes.func}),
+    itemBanksScope: PropTypes.shape({
+      type: PropTypes.string,
+      uuid: PropTypes.string,
+      title: PropTypes.string,
+      launch_context_uuid: PropTypes.string,
+      root_account_name: PropTypes.string,
+    }),
+  }
+
+  static defaultProps = {
+    activeBankId: null,
+    activeBankEntryId: null,
+    currentUser: null,
+    getShareableCourses: null,
+    getShareableUsers: null,
+    getShareableSubaccounts: null,
+    getSubaccountInfo: null,
+    minChars: void 0,
+    getCourseInfo: null,
+    getCourseAssignments: null,
+    getUserInfo: null,
+    onShare() {},
+    trayTrigger: null,
+    itemBanksScope: {},
+  }
+
+  closeTray = () => {
+    if (this.props.trayTrigger) {
+      this.props.trayTrigger.focus()
+    }
+    this.props.setUI(BUILD_TRAY_OPEN, false)
+    this.props.setUI(BUILD_TRAY_POSITION, null)
+    this.props.setUI(BUILD_TRAY_STIMULUS_ID, null)
+  }
+
+  clearActiveBank = () => {
+    this.props.newActiveBank(void 0)
+    this.props.newActiveBankEntry(void 0)
+  }
+
+  navigateToBank = bankId => {
+    this.props.newActiveBankEntry(void 0)
+    this.props.newActiveBank(bankId)
+  }
+
+  handleCloseAlert = () => {
+    this.props.setUI(TRAY_ALERT_OPEN, false)
+    this.clearActiveBank()
+    this.props.clear(BANKS_BANK_PAGINATION)
+  }
+
+  renderTrayContent() {
+    const {activeBankEntryId, activeBankId} = this.props
+    if (activeBankId) {
+      if (activeBankEntryId) {
+        return (
+          <BankEntry
+            isCompact
+            closeTray={this.closeTray}
+            bankId={activeBankId}
+            bankEntryId={activeBankEntryId}
+            navigateToBanks={this.clearActiveBank}
+            navigateToBank={this.navigateToBank}
+            scope={this.props.itemBanksScope}
+          />
+        )
+      } else {
+        return (
+          <Bank
+            isCompact
+            closeTray={this.closeTray}
+            bankId={activeBankId}
+            navigateToBanks={this.clearActiveBank}
+            navigateToBankEntry={this.props.newActiveBankEntry}
+            scope={this.props.itemBanksScope}
+          />
+        )
+      }
+    } else {
+      return (
+        <Banks
+          isCompact
+          closeTray={this.closeTray}
+          currentUser={this.props.currentUser}
+          navigateToBank={this.props.newActiveBank}
+          getCourseInfo={this.props.getCourseInfo}
+          getCourseAssignments={this.props.getCourseAssignments}
+          getUserInfo={this.props.getUserInfo}
+          getSubaccountInfo={this.props.getSubaccountInfo}
+          getShareableCourses={this.props.getShareableCourses}
+          getShareableUsers={this.props.getShareableUsers}
+          getShareableSubaccounts={this.props.getShareableSubaccounts}
+          minChars={this.props.minChars}
+          onShare={this.props.onShare}
+          scope={this.props.itemBanksScope}
+        />
+      )
+    }
+  }
+
+  renderTrayAlert() {
+    const alertTitle = t('Resource no longer available.')
+    const alertBody = t(
+      'This item or your permissions to it may have been removed by another user.',
+    )
+    return (
+      <Portal open={this.props.trayAlertOpen}>
+        <Mask fullscreen placement="top">
+          <Dialog
+            open={this.props.trayAlertOpen}
+            shouldReturnFocus
+            shouldContainFocus
+            onDismiss={this.handleCloseAlert}
+            label={`${alertTitle} ${alertBody}`}
+          >
+            <Alert variant="error" margin="small 0">
+              <Text weight="bold">{alertTitle}</Text>
+              <br />
+              <Text color="primary">{alertBody}</Text>
+              <br />
+              <Button
+                margin="small 0 0 0"
+                color="primary"
+                size="small"
+                onClick={this.handleCloseAlert}
+              >
+                {t('Ok')}
+              </Button>
+            </Alert>
+          </Dialog>
+        </Mask>
+      </Portal>
+    )
+  }
+
+  render() {
+    return (
+      <div>
+        <Tray
+          label={t('Browse item banks')}
+          liveRegion={liveRegion}
+          open={this.props.trayOpen}
+          placement="end"
+          size="medium"
+          shouldContainFocus
+          data-automation="sdk-banks-tray"
+        >
+          {this.renderTrayContent()}
+        </Tray>
+        {this.renderTrayAlert()}
+      </div>
+    )
+  }
+}
+
+export default BanksTray

package/src/building/components/resources/DeleteStimulusModal/__tests__/presenter.test.js

@@ -0,0 +1,310 @@
+import {expect, vi} from 'vitest'
+import React from 'react'
+import {Set, List} from 'immutable'
+import {render, screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import runAxeCheck from '@instructure/ui-axe-check'
+
+import QuizEntry from '../../../../../common/records/QuizEntry'
+import Stimulus from '../../../../../common/records/Stimulus'
+import Item from '../../../../../common/records/Item'
+
+import DeleteStimulusModal from '../presenter'
+import ConnectedDeleteStimulusModal from '../index'
+
+import {
+  DELETE_STIMULUS_MODAL_SELECTED_CHILDREN,
+  DELETE_STIMULUS_MODAL_DELETION_MODE,
+} from '@instructure/quiz-common/constants'
+
+describe('DeleteStimulusModal', () => {
+  const closeModalStub = vi.fn()
+  const removeStimulusStub = vi.fn()
+  const setUiStub = vi.fn()
+  const withConfirmStub = vi.fn()
+
+  const stimulusEntry = new QuizEntry()
+  const stimulus = new Stimulus()
+  stimulusEntry.getEntry = () => stimulus
+
+  const itemEntry1 = new QuizEntry({id: '201'})
+  const item1 = new Item({id: '301', itemBody: '<p>aaa</p>'})
+  itemEntry1.getEntry = () => item1
+  item1.quizEntry = itemEntry1
+
+  const itemEntry2 = new QuizEntry({id: '202'})
+  const item2 = new Item({id: '302', itemBody: 'bbb'})
+  itemEntry2.getEntry = () => item2
+  item2.quizEntry = itemEntry2
+
+  const itemEntry3 = new QuizEntry({id: '203'})
+  const item3 = new Item({id: '303', itemBody: 'ccc'})
+  itemEntry3.getEntry = () => item3
+  item3.quizEntry = itemEntry3
+
+  const defaultProps = {
+    childEntries: List([itemEntry1, itemEntry2, itemEntry3]),
+    closeModal: closeModalStub,
+    deletionMode: null,
+    modalOpen: true,
+    quizId: '456',
+    removeStimulus: removeStimulusStub,
+    selectedChildren: Set.of(),
+    setUi: setUiStub,
+    stimulusEntry,
+    withConfirm: withConfirmStub,
+  }
+
+  const WrappedComponent = withContext(DeleteStimulusModal)
+
+  const renderComponent = (overrideProps = {}) => {
+    return render(<WrappedComponent {...defaultProps} {...overrideProps} />)
+  }
+
+  afterEach(() => {
+    closeModalStub.mockClear()
+    removeStimulusStub.mockClear()
+    setUiStub.mockClear()
+    withConfirmStub.mockClear()
+  })
+
+  const getModal = () => window.document.querySelector('.deleteStimulusModal')
+  const submit = type => {
+    const button = window.document.querySelectorAll('button')[2]
+    expect(button.innerText).toBe(`Remove ${type}`)
+    button.click()
+  }
+
+  describe('zero children', () => {
+    it('renders no options', () => {
+      renderComponent({childEntries: List([])})
+      const inputs = getModal().querySelectorAll('input[type=radio]')
+      expect(inputs.length).toBe(0)
+    })
+  })
+
+  describe('one child', () => {
+    it('renders only two options', () => {
+      renderComponent({childEntries: List([itemEntry1])})
+      const inputs = getModal().querySelectorAll('input[type=radio]')
+      expect(inputs.length).toBe(2)
+    })
+  })
+
+  describe('multiple children', () => {
+    it('renders three input buttons', () => {
+      renderComponent()
+      const inputs = getModal().querySelectorAll('input[type=radio]')
+      expect(inputs.length).toBe(3)
+    })
+
+    it('sets the deletion mode to deleteAll when option is selected', () => {
+      renderComponent()
+      const inputs = getModal().querySelectorAll('input[type=radio]')
+      inputs[0].click()
+      expect(setUiStub).toHaveBeenCalledWith(DELETE_STIMULUS_MODAL_DELETION_MODE, 'deleteAll')
+    })
+
+    it('deletes all children when deleteAll option is selected', () => {
+      renderComponent({deletionMode: 'deleteAll'})
+      submit('Stimulus')
+      expect(removeStimulusStub).toHaveBeenCalledWith(
+        '456',
+        stimulusEntry,
+        defaultProps.childEntries,
+      )
+    })
+
+    it('does not show checkboxes when deleteAll option is selected', () => {
+      renderComponent({deletionMode: 'deleteAll'})
+      const checkboxes = getModal().querySelectorAll('input[type=checkbox]')
+      expect(checkboxes.length).toBe(0)
+    })
+
+    it('sets the deletion mode to deleteNone when option is selected', () => {
+      renderComponent()
+      const inputs = getModal().querySelectorAll('input[type=radio]')
+      inputs[2].click()
+      expect(setUiStub).toHaveBeenCalledWith(DELETE_STIMULUS_MODAL_DELETION_MODE, 'deleteNone')
+    })
+
+    it('deletes no children when deleteNone option is selected', () => {
+      renderComponent({deletionMode: 'deleteNone'})
+      submit('Stimulus')
+      expect(removeStimulusStub).toHaveBeenCalledWith('456', stimulusEntry, [])
+    })
+
+    it('does not show checkboxes when deleteNone option is selected', () => {
+      renderComponent({deletionMode: 'deleteNone'})
+      const checkboxes = getModal().querySelectorAll('input[type=checkbox]')
+      expect(checkboxes.length).toBe(0)
+    })
+
+    it('sets the deletion mode to chooseWhich when option is selected', () => {
+      renderComponent()
+      const inputs = getModal().querySelectorAll('input[type=radio]')
+      inputs[1].click()
+      expect(setUiStub).toHaveBeenCalledWith(DELETE_STIMULUS_MODAL_DELETION_MODE, 'chooseWhich')
+    })
+
+    it('renders checkboxes when chooseWhich option is selected', () => {
+      renderComponent({deletionMode: 'chooseWhich'})
+      const checkboxes = getModal().querySelectorAll('input[type=checkbox]')
+      expect(checkboxes.length).toBe(defaultProps.childEntries.size)
+    })
+
+    it('renders the stems of each question when chooseWhich option is selected', () => {
+      renderComponent({deletionMode: 'chooseWhich'})
+      const inputs = getModal().querySelectorAll('input[type=checkbox]')
+      const stems = Array.from(inputs, input => input.labels[0].innerText.trim())
+      expect(stems).toEqual(['aaa', 'bbb', 'ccc'])
+    })
+
+    it('tries to add a child entry when checkbox is checked', () => {
+      renderComponent({deletionMode: 'chooseWhich', selectedChildren: Set.of()})
+      const checkboxes = getModal().querySelectorAll('input[type=checkbox]')
+      expect(checkboxes[0].checked).toBe(false)
+      checkboxes[0].click()
+
+      const args = setUiStub.mock.calls[0]
+      expect(args[0]).toBe(DELETE_STIMULUS_MODAL_SELECTED_CHILDREN)
+      expect(args[1].equals(Set.of(itemEntry1))).toBe(true)
+    })
+
+    it('tries to remove a child entry when checkbox is unchecked', () => {
+      renderComponent({deletionMode: 'chooseWhich', selectedChildren: Set.of(itemEntry1)})
+      const checkboxes = getModal().querySelectorAll('input[type=checkbox]')
+      expect(checkboxes[0].checked).toBe(true)
+      checkboxes[0].click()
+
+      const args = setUiStub.mock.calls[0]
+      expect(args[0]).toBe(DELETE_STIMULUS_MODAL_SELECTED_CHILDREN)
+      expect(args[1].equals(Set.of())).toBe(true)
+    })
+
+    it('submits the form with the selected items to delete', () => {
+      renderComponent({
+        deletionMode: 'chooseWhich',
+        selectedChildren: Set.of(itemEntry1, itemEntry2),
+      })
+      submit('Stimulus')
+
+      expect(removeStimulusStub).toHaveBeenCalledWith('456', stimulusEntry, [
+        itemEntry1,
+        itemEntry2,
+      ])
+    })
+
+    it('opens a confirmation modal if keeping immutable items', () => {
+      const immutableQuizEntry = new QuizEntry({status: 'immutable'})
+      renderComponent({
+        childEntries: List([immutableQuizEntry]),
+        deletionMode: 'deleteNone',
+      })
+      submit('Stimulus')
+      expect(withConfirmStub).toHaveBeenCalled()
+    })
+  })
+
+  describe('With Passage', () => {
+    let stimulusEntry
+    let stimulus
+
+    beforeEach(() => {
+      stimulusEntry = new QuizEntry()
+      stimulus = new Stimulus({passage: true})
+      stimulusEntry.getEntry = () => stimulus
+
+      render(<DeleteStimulusModal {...defaultProps} stimulusEntry={stimulusEntry} />)
+    })
+
+    it('should display "Remove Text Block" button label', () => {
+      expect(screen.getByRole('button', {name: /Remove Text Block/i})).not.toBeNull()
+    })
+
+    it('should display "Keep Text Block" button label', () => {
+      expect(screen.getByRole('button', {name: /Keep Text Block/i})).not.toBeNull()
+    })
+  })
+
+  describe('#anyImmutableKeepers', () => {
+    // These tests need access to component instance methods (anyImmutableKeepers).
+    // Since the logic is internal, we test the observable behavior instead:
+    // anyImmutableKeepers=true triggers withConfirm on submit.
+    it('triggers withConfirm when at least one kept child entry is immutable', () => {
+      const immutableQuizEntry = new QuizEntry({status: 'immutable'})
+      const immutableItem = new Item({id: '401', itemBody: 'immutable body'})
+      immutableQuizEntry.getEntry = () => immutableItem
+      immutableItem.quizEntry = immutableQuizEntry
+
+      const mutableQuizEntry = new QuizEntry({status: 'mutable'})
+      const mutableItem = new Item({id: '402', itemBody: 'mutable body'})
+      mutableQuizEntry.getEntry = () => mutableItem
+      mutableItem.quizEntry = mutableQuizEntry
+
+      renderComponent({
+        childEntries: List([immutableQuizEntry, mutableQuizEntry]),
+        selectedChildren: Set([mutableQuizEntry]),
+        deletionMode: 'chooseWhich',
+      })
+      // Submit to trigger the confirmation check
+      const button = window.document.querySelectorAll('button')[2]
+      button.click()
+      expect(withConfirmStub).toHaveBeenCalled()
+    })
+
+    it('does not trigger withConfirm when all kept entries are mutable', () => {
+      const immutableQuizEntry = new QuizEntry({status: 'immutable'})
+      const immutableItem = new Item({id: '401', itemBody: 'immutable body'})
+      immutableQuizEntry.getEntry = () => immutableItem
+      immutableItem.quizEntry = immutableQuizEntry
+
+      const mutableQuizEntry = new QuizEntry({status: 'mutable'})
+      const mutableItem = new Item({id: '402', itemBody: 'mutable body'})
+      mutableQuizEntry.getEntry = () => mutableItem
+      mutableItem.quizEntry = mutableQuizEntry
+
+      renderComponent({
+        childEntries: List([immutableQuizEntry, mutableQuizEntry]),
+        selectedChildren: Set([immutableQuizEntry]),
+        deletionMode: 'chooseWhich',
+      })
+      const button = window.document.querySelectorAll('button')[2]
+      button.click()
+      expect(withConfirmStub).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('a11y tests', () => {
+    it('should meet a11y standards', async () => {
+      const {container} = renderComponent()
+      await runAxeCheck(container, {ignores: ['label', 'label-title-only']})
+    })
+  })
+
+  describe('test with connect', () => {
+    it('renders without error', () => {
+      const WrappedConnected = withContext(ConnectedDeleteStimulusModal)
+      expect(() => render(<WrappedConnected {...defaultProps} />)).not.toThrow()
+    })
+  })
+
+  describe('validation errors', () => {
+    it('shows the error', () => {
+      render(<DeleteStimulusModal {...defaultProps} />)
+      const removeStimulusButton = screen.getByRole('button', {name: /remove stimulus/i})
+      userEvent.click(removeStimulusButton)
+      expect(screen.queryByText(/please choose a deletion mode./i)).not.toBeNull()
+    })
+    it('clears the error when the radio is triggered', () => {
+      render(<DeleteStimulusModal {...defaultProps} />)
+      const removeStimulusButton = screen.getByRole('button', {name: /remove stimulus/i})
+      userEvent.click(removeStimulusButton)
+      const removeAllButton = screen.getByRole('radio', {
+        name: /remove stimulus and all attached questions/i,
+      })
+      userEvent.click(removeAllButton)
+      expect(screen.queryByText(/please choose a deletion mode./i)).toBeNull()
+    })
+  })
+})

package/src/building/components/resources/DeleteStimulusModal/index.js

@@ -0,0 +1,45 @@
+import {bindActionCreators} from 'redux'
+import {Map, List} from 'immutable'
+
+import {connect} from '../../../../common/react-redux'
+import {closeModal, withConfirm} from '../../../../common/actions/modal'
+import {set} from '../../../../common/actions/ui'
+import {removeStimulusQuizEntry} from '../../../api/quizEntries'
+import {DeleteStimulusModal as DeleteStimulusModalPresenter} from './presenter'
+
+import {
+  DELETE_STIMULUS_MODAL,
+  DELETE_STIMULUS_DATA,
+  DELETE_STIMULUS_MODAL_SELECTED_CHILDREN,
+  DELETE_STIMULUS_MODAL_DELETION_MODE,
+} from '@instructure/quiz-common/constants'
+
+function mapStateToProps(state, props) {
+  const {stimulusEntry, childEntries, quizId} = state.ui.get(DELETE_STIMULUS_DATA, Map()).toObject()
+  const selectedChildren = state.ui.get(DELETE_STIMULUS_MODAL_SELECTED_CHILDREN)
+  const deletionMode = state.ui.get(DELETE_STIMULUS_MODAL_DELETION_MODE)
+
+  return {
+    modalOpen: state.modal.get('isOpen') === DELETE_STIMULUS_MODAL,
+    stimulusEntry,
+    selectedChildren,
+    deletionMode,
+    quizId,
+    childEntries: childEntries || List(),
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    closeModal: bindActionCreators(closeModal, dispatch),
+    removeStimulus: bindActionCreators(removeStimulusQuizEntry, dispatch),
+    setUi: bindActionCreators(set, dispatch),
+    withConfirm: bindActionCreators(withConfirm, dispatch),
+  }
+}
+
+export const DeleteStimulusModal = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(DeleteStimulusModalPresenter)
+export default DeleteStimulusModal