@instructure/quiz-core 22.17.0 → 22.18.0

package/src/banks/components/CopyMoveBankEntryModal/__tests__/presenter.test.js

@@ -0,0 +1,331 @@
+import {vi} from 'vitest'
+import React, {createRef} from 'react'
+import {render, screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import CopyMoveBankEntryModal from '../presenter'
+import Bank from '../../../../common/records/Bank'
+
+describe('CopyMoveBankEntryModal', () => {
+  const label = 'This is my modal'
+  const closeModalStub = vi.fn()
+  const focusStub = vi.fn()
+  const createBankEntryStub = vi.fn((bankId, entryType, entryId) => {
+    return Promise.resolve({id: '22', bankId, entryType, entryId})
+  })
+  const createBankStub = vi.fn().mockReturnValue(Promise.resolve({id: '33'}))
+  const createEntryStub = vi.fn().mockReturnValue(Promise.resolve({id: '44'}))
+  const disassociateBankEntry = vi.fn()
+  const onAddStub = vi.fn()
+  const uiSet = vi.fn()
+  const updateBankEntryStub = vi.fn((oldBankId, id, {bankId}) => {
+    return Promise.resolve({id, bankId})
+  })
+  const copyBankEntryStub = vi.fn((bankId, entryType, entryId) => {
+    return Promise.resolve({id: '22', bankId, entryType, entryId})
+  })
+  const moveBankEntryStub = vi.fn((oldBankId, id, {bankId}) => {
+    return Promise.resolve({id, bankId})
+  })
+
+  const modalProps = {
+    closeModal: closeModalStub,
+    createBank: createBankStub,
+    createBankEntry: createBankEntryStub,
+    createEntry: createEntryStub,
+    copyBankEntry: copyBankEntryStub,
+    moveBankEntry: moveBankEntryStub,
+    disassociateBankEntry: disassociateBankEntry,
+    entryId: '44',
+    entryType: 'Item',
+    label: label,
+    modalOpen: true,
+    onAdd: onAddStub,
+    uiSet: uiSet,
+    updateBankEntry: updateBankEntryStub,
+    modalTrigger: {
+      focus: focusStub,
+    },
+  }
+
+  // Helper to render with a ref for accessing instance methods
+  function renderModal(overrideProps = {}) {
+    const ref = createRef()
+    const result = render(<CopyMoveBankEntryModal ref={ref} {...modalProps} {...overrideProps} />)
+    return {ref, ...result}
+  }
+
+  beforeEach(() => {
+    closeModalStub.mockClear()
+    focusStub.mockClear()
+    createBankEntryStub.mockClear()
+    createBankStub.mockClear()
+    disassociateBankEntry.mockClear()
+    onAddStub.mockClear()
+    uiSet.mockClear()
+    updateBankEntryStub.mockClear()
+    moveBankEntryStub.mockClear()
+    copyBankEntryStub.mockClear()
+  })
+
+  describe('CopyMoveBankEntryModal', () => {
+    it('renders the modal', () => {
+      renderModal()
+      expect(screen.getByRole('dialog')).not.toBeNull()
+    })
+  })
+
+  describe('Modal Title', () => {
+    it('renders the correct title for the modal', () => {
+      renderModal()
+      expect(screen.getByText(label)).not.toBeNull()
+    })
+  })
+
+  describe('bank type radios', () => {
+    it('change the bankType based on the radio selection', () => {
+      const {ref} = renderModal()
+      // Click the "New item bank" radio
+      const newRadio = screen.getByRole('radio', {name: /new item bank/i})
+      userEvent.click(newRadio)
+      expect(ref.current.state.bankType).toBe('new')
+    })
+  })
+
+  describe('validation errors', () => {
+    it('shows error when existing bank was not selected', () => {
+      render(<CopyMoveBankEntryModal {...modalProps} />)
+      const addToBankButton = screen.getByRole('button', {name: /add/i})
+      userEvent.click(addToBankButton)
+      expect(screen.queryByText(/please select a bank/i)).not.toBeNull()
+    })
+    it('shows error when new bank title was not provided', () => {
+      render(<CopyMoveBankEntryModal {...modalProps} />)
+      const addToBankButton = screen.getByRole('button', {name: /add/i})
+      const radioInputNewBank = screen.getByRole('radio', {name: /new item bank/i})
+      userEvent.click(radioInputNewBank)
+      userEvent.click(addToBankButton)
+      expect(screen.queryByText(/please enter a new bank title/i)).not.toBeNull()
+    })
+    it('clears the error when the radio is triggered', () => {
+      render(<CopyMoveBankEntryModal {...modalProps} />)
+      const addToBankButton = screen.getByRole('button', {name: /add/i})
+      const radioInputNewBank = screen.getByRole('radio', {name: /new item bank/i})
+      userEvent.click(addToBankButton)
+      userEvent.click(radioInputNewBank)
+      expect(screen.queryByText(/please enter a new bank title/i)).toBeNull()
+    })
+    it('clears the error when the input is changed', () => {
+      render(<CopyMoveBankEntryModal {...modalProps} />)
+      const addToBankButton = screen.getByRole('button', {name: /add/i})
+      const radioInputNewBank = screen.getByRole('radio', {name: /new item bank/i})
+      userEvent.click(radioInputNewBank)
+      userEvent.click(addToBankButton)
+      const newBankInput = screen.getByRole('textbox', {
+        name: /new bank title/i,
+      })
+      userEvent.type(newBankInput, 'bank')
+      expect(screen.queryByText(/please enter a new bank title/i)).toBeNull()
+    })
+  })
+
+  describe('using an existing bank', () => {
+    it('renders selection for bank', () => {
+      renderModal()
+      // BankSelection renders a search input — check for its presence
+      // The component renders with "Existing item bank" radio selected by default
+      // and shows the BankSelection which contains a combobox
+      expect(screen.getByRole('radio', {name: /existing item bank/i})).toBeChecked()
+    })
+
+    it('sets the selectedBank in the state on bank selection', () => {
+      const {ref} = renderModal()
+      // Call the instance method directly
+      ref.current.onBankSelection({}, {id: 5, title: 'BankTitle'})
+      expect(ref.current.state.selectedBank.id).toBe(5)
+      expect(ref.current.state.selectedBank.title).toBe('BankTitle')
+    })
+  })
+
+  describe('using a new bank', () => {
+    it('renders an input for the new bank title', () => {
+      const {ref} = renderModal()
+      // Switch to "new" bank type
+      ref.current.setState({bankType: 'new'})
+      expect(screen.getByRole('textbox', {name: /new bank title/i})).not.toBeNull()
+    })
+
+    it('updates the state when the input changes', () => {
+      const {ref} = renderModal()
+      ref.current.setState({bankType: 'new'})
+      const textInput = screen.getByRole('textbox', {name: /new bank title/i})
+      userEvent.type(textInput, 'some new title')
+      expect(ref.current.state.newBankTitle).toBe('some new title')
+    })
+  })
+
+  describe('keep copy checkbox', () => {
+    it('renders keep copy checkbox when source bank entry is present', () => {
+      renderModal({sourceBankId: '1', sourceBankEntryId: '1'})
+      expect(screen.getByLabelText(/keep a copy in this bank/i)).not.toBeNull()
+    })
+  })
+
+  describe('onKeepCopyChange', () => {
+    it('calls uiSet', () => {
+      // Render with keepCopy=false so checkbox starts unchecked; clicking it checks it (true)
+      renderModal({keepCopy: false})
+      const checkbox = screen.getByLabelText(/keep a copy in this bank/i)
+      userEvent.click(checkbox)
+      expect(uiSet).toHaveBeenCalledWith('COPY_MOVE_BANK_ENTRY_MODAL_KEEP_COPY', true)
+    })
+  })
+
+  describe('Cancel action', () => {
+    it('renders cancel button', () => {
+      renderModal()
+      expect(screen.getByRole('button', {name: /cancel/i})).not.toBeNull()
+    })
+
+    it('calls the cancel action', () => {
+      renderModal()
+      const cancelButton = screen.getByRole('button', {name: /cancel/i})
+      userEvent.click(cancelButton)
+      expect(closeModalStub).toHaveBeenCalled()
+      expect(focusStub).toHaveBeenCalled()
+    })
+  })
+
+  describe('Add to Bank action', () => {
+    const clickAdd = () => {
+      const addToBankButton = screen.getByRole('button', {name: /^add$/i})
+      userEvent.click(addToBankButton)
+    }
+
+    it('renders the add to bank button', () => {
+      renderModal()
+      const addButton = screen.getByRole('button', {name: /^add$/i})
+      expect(addButton).not.toBeNull()
+    })
+
+    describe('copy', () => {
+      const copyProps = {
+        ...modalProps,
+        keepCopy: true,
+        sourceBankId: '2',
+        sourceBankEntryId: '3',
+      }
+
+      it('creates a new bank if needed', () => {
+        const ref = createRef()
+        render(<CopyMoveBankEntryModal ref={ref} {...modalProps} />)
+        ref.current.setState({bankType: 'new', newBankTitle: 'my cool title'})
+        clickAdd()
+        expect(createBankStub).toHaveBeenCalledWith(
+          Bank.create({
+            title: 'my cool title',
+            language: undefined,
+          }),
+        )
+      })
+
+      it('does not create a new bank if not needed', () => {
+        const ref = createRef()
+        render(<CopyMoveBankEntryModal ref={ref} {...copyProps} />)
+        ref.current.onBankSelection({}, {id: '1'})
+        clickAdd()
+        expect(createBankStub).not.toHaveBeenCalled()
+      })
+
+      it('creates bank entry in the bank', async () => {
+        const ref = createRef()
+        render(<CopyMoveBankEntryModal ref={ref} {...copyProps} />)
+        ref.current.onBankSelection({}, {id: '1'})
+        clickAdd()
+        await new Promise(r => setTimeout(r, 0))
+        expect(createBankEntryStub).toHaveBeenCalledWith('1', 'Item', '44')
+      })
+
+      describe('with feature flag instfs_bank_entry_movement_endpoints', () => {
+        const copyPropsWithFlag = {
+          ...copyProps,
+          bankEntryMovementEndpointsEnabled: true,
+        }
+
+        it('copies the bank entry to selected bank', async () => {
+          const ref = createRef()
+          render(<CopyMoveBankEntryModal ref={ref} {...copyPropsWithFlag} />)
+          ref.current.onBankSelection({}, {id: '1'})
+          clickAdd()
+          await new Promise(r => setTimeout(r, 0))
+          expect(copyBankEntryStub).toHaveBeenCalledWith('2', '3', '1')
+        })
+      })
+
+      it('allows parent to create item for bank', () => {
+        const ref = createRef()
+        render(<CopyMoveBankEntryModal ref={ref} {...copyProps} />)
+        ref.current.onBankSelection({}, {id: '1'})
+        clickAdd()
+        expect(createEntryStub).toHaveBeenCalled()
+      })
+
+      it('calls onAdd with created bank entry', async () => {
+        const ref = createRef()
+        render(<CopyMoveBankEntryModal ref={ref} {...copyProps} />)
+        ref.current.onBankSelection({}, {id: '1'})
+        clickAdd()
+        await new Promise(r => setTimeout(r, 0))
+        expect(onAddStub).toHaveBeenCalledWith({
+          bankId: '1',
+          id: '22',
+          entryId: '44',
+          entryType: 'Item',
+        })
+      })
+    })
+
+    describe('move', () => {
+      const moveProps = {
+        ...modalProps,
+        keepCopy: false,
+        sourceBankId: '2',
+        sourceBankEntryId: '3',
+      }
+
+      it('updates bank entry to selected bank', async () => {
+        const ref = createRef()
+        render(<CopyMoveBankEntryModal ref={ref} {...moveProps} />)
+        ref.current.onBankSelection({}, {id: '1'})
+        clickAdd()
+        await new Promise(r => setTimeout(r, 0))
+        expect(updateBankEntryStub).toHaveBeenCalledWith('2', '3', {bankId: '1'})
+      })
+
+      it('calls onAdd with updated bank entry', async () => {
+        const ref = createRef()
+        render(<CopyMoveBankEntryModal ref={ref} {...moveProps} />)
+        ref.current.onBankSelection({}, {id: '1'})
+        clickAdd()
+        await new Promise(r => setTimeout(r, 0))
+        expect(onAddStub).toHaveBeenCalledWith(expect.objectContaining({bankId: '1', id: '3'}))
+      })
+
+      describe('with feature flag instfs_bank_entry_movement_endpoints', () => {
+        const movePropsWithFlag = {
+          ...moveProps,
+          bankEntryMovementEndpointsEnabled: true,
+        }
+
+        it('moves the bank entry to selected bank', async () => {
+          const ref = createRef()
+          render(<CopyMoveBankEntryModal ref={ref} {...movePropsWithFlag} />)
+          ref.current.onBankSelection({}, {id: '1'})
+          clickAdd()
+          await new Promise(r => setTimeout(r, 0))
+          expect(moveBankEntryStub).toHaveBeenCalledWith('2', '3', '1')
+        })
+      })
+    })
+  })
+})

package/src/banks/components/CopyMoveBankEntryModal/index.js

@@ -0,0 +1,40 @@
+import {Set} from 'immutable'
+
+import {connect} from '../../../common/react-redux'
+import {createBank} from '../../api/banks'
+import {createBankEntry, updateBankEntry, moveBankEntry, copyBankEntry} from '../../api/bankEntries'
+import CopyMoveBankModal from './presenter'
+import * as modalActions from '../../../common/actions/modal'
+import {disassociateEntry} from '../../../common/actions/banks'
+import * as uiActions from '../../../common/actions/ui'
+import {
+  COPY_MOVE_BANK_ENTRY_MODAL_KEEP_COPY,
+  COPY_MOVE_BANK_ENTRY_MODAL,
+} from '@instructure/quiz-common/constants'
+import {getModalTrigger} from '../../../common/util/modalHelpers'
+
+export function mapStateToProps(state, props) {
+  const modalKey = [COPY_MOVE_BANK_ENTRY_MODAL, props.entryType, props.entryId].join(':')
+
+  return {
+    modalTrigger: getModalTrigger(state),
+    keepCopy: state.ui.get(COPY_MOVE_BANK_ENTRY_MODAL_KEEP_COPY, true),
+    modalOpen: state.modal.get('isOpen') === modalKey,
+    bankEntryMovementEndpointsEnabled: (state.features ?? Set()).includes(
+      'instfs_bank_entry_movement_endpoints',
+    ),
+  }
+}
+
+const mapDispatchToProps = {
+  closeModal: modalActions.closeModal,
+  createBank,
+  copyBankEntry,
+  createBankEntry,
+  updateBankEntry,
+  moveBankEntry,
+  disassociateBankEntry: disassociateEntry,
+  uiSet: uiActions.set,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(CopyMoveBankModal)

package/src/banks/components/CopyMoveBankEntryModal/presenter.js

@@ -0,0 +1,322 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+
+import {Button, CloseButton} from '@instructure/ui-buttons'
+
+import {RadioInputGroup, RadioInput} from '@instructure/ui-radio-input'
+import {Checkbox} from '@instructure/ui-checkbox'
+import {Heading} from '@instructure/ui-heading'
+import {ScreenReaderContent} from '@instructure/ui-a11y-content'
+
+import t from '@instructure/quiz-i18n/format-message'
+import Bank from '../../../common/records/Bank'
+import BankSelection from '../../../common/components/resources/BankSelection/presenter'
+
+import {
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+} from '@instructure/quiz-common/components/Modal/index'
+import {TextInput} from '@instructure/quiz-common/components/TextInput/index'
+import {
+  COPY_MOVE_BANK_ENTRY_MODAL_KEEP_COPY,
+  XSMALL_SIDE_MARGIN,
+} from '@instructure/quiz-common/constants'
+
+export class CopyMoveBankEntryModal extends Component {
+  /**
+   * @type {React.RefObject<RadioInput> | null}
+   */
+  radioInputRef = null
+  /**
+   * @type {React.RefObject<TextInput> | null}
+   */
+  textInputRef = null
+
+  constructor(props) {
+    super(props)
+    this.radioInputRef = React.createRef()
+    this.textInputRef = React.createRef()
+    this.bankSelectionInputRef = React.createRef()
+  }
+  static propTypes = {
+    closeModal: PropTypes.func.isRequired,
+    createBank: PropTypes.func.isRequired,
+    copyBankEntry: PropTypes.func.isRequired,
+    createBankEntry: PropTypes.func.isRequired,
+    // Create the bank entry's entry, or clone it if it already exists. Should
+    // always be provided when a source is provided.
+    createEntry: PropTypes.func.isRequired,
+    disassociateBankEntry: PropTypes.func.isRequired,
+    entryId: PropTypes.string.isRequired, // Only present for use in modalOpen key via this component's connected index
+    entryType: PropTypes.string.isRequired,
+    // Resolve to the bank entry's entry, or create it if it does not yet exist.
+    keepCopy: PropTypes.bool,
+    label: PropTypes.string.isRequired,
+    modalOpen: PropTypes.bool.isRequired,
+    modalTrigger: PropTypes.instanceOf(Component),
+    onAdd: PropTypes.func,
+    sourceBankEntryId: PropTypes.string.isRequired,
+    sourceBankId: PropTypes.string.isRequired,
+    uiSet: PropTypes.func.isRequired,
+    updateBankEntry: PropTypes.func.isRequired,
+    moveBankEntry: PropTypes.func.isRequired,
+    bankEntryMovementEndpointsEnabled: PropTypes.bool,
+  }
+
+  static contextTypes = {
+    locale: PropTypes.string,
+  }
+
+  static defaultProps = {
+    keepCopy: true,
+    modalTrigger: null,
+    onAdd: () => {},
+  }
+
+  state = {
+    bankType: 'existing',
+    newBankTitle: '',
+    selectedBank: null,
+    radioValidationError: null,
+    selectValidationError: null,
+  }
+
+  setBankInputRef = ref => {
+    this.bankSelectionInputRef = ref
+  }
+
+  copyOrMove = newBankId => {
+    if (this.props.keepCopy) {
+      this.copyBankEntry(newBankId)
+    } else {
+      this.moveBankEntry(newBankId)
+    }
+    this.closeAction()
+  }
+
+  clearValidationErrors = () => {
+    this.setState({
+      radioValidationError: null,
+      selectValidationError: null,
+    })
+  }
+
+  validateAction = () => {
+    const {bankType, newBankTitle, selectedBank} = this.state
+    if (!bankType) {
+      this.radioInputRef?.current?.focus()
+      this.setState({
+        radioValidationError: [{text: t('Please choose a Copy/Move option'), type: 'newError'}],
+      })
+      return false
+    }
+    if (bankType === 'existing' && !selectedBank) {
+      this.bankSelectionInputRef.focus()
+      this.setState({
+        selectValidationError: [{text: t('Please select a bank'), type: 'newError'}],
+      })
+      return false
+    }
+    if (bankType === 'new' && (!newBankTitle || !newBankTitle.trim())) {
+      this.textInputRef?.current?.focus()
+      this.setState({
+        selectValidationError: [{text: t('Please enter a new bank title'), type: 'newError'}],
+      })
+      return false
+    }
+    return true
+  }
+
+  continueAction = () => {
+    if (!this.validateAction()) {
+      return
+    }
+    if (this.state.bankType === 'new') {
+      const newBank = Bank.create({
+        title: this.state.newBankTitle,
+        language: this.context.locale,
+      })
+      this.props.createBank(newBank).then(bankData => {
+        this.copyOrMove(bankData.id)
+      })
+    } else {
+      this.copyOrMove(this.state.selectedBank.id)
+    }
+  }
+
+  initiateMove = newBankId => {
+    if (this.props.bankEntryMovementEndpointsEnabled) {
+      return this.props.moveBankEntry(
+        this.props.sourceBankId,
+        this.props.sourceBankEntryId,
+        newBankId,
+      )
+    } else {
+      return this.props.updateBankEntry(this.props.sourceBankId, this.props.sourceBankEntryId, {
+        bankId: newBankId,
+      })
+    }
+  }
+
+  moveBankEntry = newBankId => {
+    return this.initiateMove(newBankId)
+      .then(bankEntry => {
+        this.props.disassociateBankEntry(this.props.sourceBankId, this.props.sourceBankEntryId)
+        return bankEntry
+      })
+      .then(this.props.onAdd)
+  }
+
+  initiateCopy = newBankId => {
+    if (this.props.bankEntryMovementEndpointsEnabled) {
+      return this.props.copyBankEntry(
+        this.props.sourceBankId,
+        this.props.sourceBankEntryId,
+        newBankId,
+      )
+    } else {
+      return this.props
+        .createEntry()
+        .then(entry => this.props.createBankEntry(newBankId, this.props.entryType, entry.id))
+    }
+  }
+
+  copyBankEntry = newBankId => {
+    return this.initiateCopy(newBankId).then(this.props.onAdd)
+  }
+
+  closeAction = () => {
+    this.clearValidationErrors()
+    if (this.props.modalTrigger) {
+      this.props.modalTrigger.focus()
+    }
+    this.props.closeModal()
+  }
+
+  onBankSelection = (e, option) => {
+    this.clearValidationErrors()
+    this.setState({selectedBank: new Bank(option)})
+  }
+
+  onKeepCopyChange = e => {
+    this.props.uiSet(COPY_MOVE_BANK_ENTRY_MODAL_KEEP_COPY, e.target.checked)
+  }
+
+  handleRadioChange = (event, value) => {
+    this.clearValidationErrors()
+    this.setState({bankType: value})
+  }
+
+  onTitleChange = e => {
+    this.clearValidationErrors()
+    this.setState({newBankTitle: e.target.value})
+  }
+
+  cancelButton() {
+    return (
+      <Button onClick={this.closeAction} margin={XSMALL_SIDE_MARGIN}>
+        {t('Cancel')}
+      </Button>
+    )
+  }
+
+  addToBankButton() {
+    return (
+      <Button
+        color="primary"
+        onClick={this.continueAction}
+        margin={XSMALL_SIDE_MARGIN}
+        data-automation="sdk-add-to-bank-button"
+      >
+        {t('Add')}
+      </Button>
+    )
+  }
+
+  renderBankTypeContent() {
+    if (this.state.bankType === 'existing') {
+      return (
+        <BankSelection
+          inputRef={this.setBankInputRef}
+          onBankSelection={this.onBankSelection}
+          selectedBank={this.state.selectedBank}
+          data-automation="sdk-bank-selection"
+          externalError={this.state.selectValidationError}
+          isRequired={true}
+        />
+      )
+    }
+    return (
+      <TextInput
+        onChange={this.onTitleChange}
+        value={this.state.newBankTitle}
+        renderLabel={t('New Bank Title')}
+        type="text"
+        messages={this.state.selectValidationError}
+        ref={this.textInputRef}
+        isRequired={true}
+      />
+    )
+  }
+
+  renderContent() {
+    return (
+      <div>
+        <RadioInputGroup
+          onChange={this.handleRadioChange}
+          name={t('Bank Type')}
+          defaultValue={this.state.bankType}
+          description={<ScreenReaderContent>{t('Bank Type')}</ScreenReaderContent>}
+          messages={this.state.radioValidationError}
+          isRequired={true}
+        >
+          <RadioInput value="existing" label={t('Existing item bank')} ref={this.radioInputRef} />
+          <RadioInput value="new" label={t('New item bank')} />
+        </RadioInputGroup>
+        <br />
+        {this.renderBankTypeContent()}
+        <br />
+        <Checkbox
+          label={t('Keep a copy in this bank')}
+          value="medium"
+          checked={this.props.keepCopy}
+          onChange={this.onKeepCopyChange}
+          data-automation="sdk-keep-copy-in-bank-checkbox"
+        />
+      </div>
+    )
+  }
+
+  render() {
+    return (
+      <Modal
+        open={this.props.modalOpen}
+        onDismiss={this.closeAction}
+        size="small"
+        label={this.props.label}
+        data-automation="sdk-copy-move-bank-entry-modal"
+      >
+        <ModalHeader>
+          <Heading level="reset" as="h2">
+            {this.props.label}
+          </Heading>
+          <CloseButton
+            onClick={this.closeAction}
+            placement="end"
+            offset="medium"
+            screenReaderLabel={t('Close')}
+          />
+        </ModalHeader>
+        <ModalBody>{this.renderContent()}</ModalBody>
+        <ModalFooter>
+          {this.cancelButton()}
+          {this.addToBankButton()}
+        </ModalFooter>
+      </Modal>
+    )
+  }
+}
+
+export default CopyMoveBankEntryModal