@instructure/quiz-core 22.17.0 → 22.18.0

package/src/common/components/resources/stimulus/StimulusEdit/index.js

@@ -0,0 +1,59 @@
+import {bindActionCreators} from 'redux'
+import {Map} from 'immutable'
+
+import {connect} from '../../../../react-redux'
+import * as modificationActions from '../../../../actions/modifications'
+import * as quizEntriesApiActions from '../../../../../building/api/quizEntries'
+import * as stimuliApiActions from '../../../../../building/api/stimuli'
+import * as uiActions from '../../../../actions/ui'
+import * as alertActions from '../../../../actions/alerts'
+import * as errorsShowingActions from '../../../../actions/errorsShowing'
+import * as modalActions from '../../../../../common/actions/modal'
+import {uploadStatus} from '../../../../actions/upload'
+import {ADD_CONTENT_POPOVER_KEY} from '@instructure/quiz-common/constants'
+
+import WrappedStimulusEdit from './presenter'
+
+function mapStateToProps(state, props) {
+  const addContentPopoverOpen = (state.editing ?? Map()).find(
+    (isEditing, key) => isEditing && key.includes(ADD_CONTENT_POPOVER_KEY),
+  )
+  return {
+    addContentPopoverOpen: Boolean(addContentPopoverOpen),
+    nextQuizEntry: state.modifications.get('nextQuizEntry', null),
+    appContainer: state.ui.get('appContainer'),
+    workingStimulus: props.stimulus.getWorkingInstance(),
+    workingQuizEntry: props.quizEntry.getWorkingInstance(),
+  }
+}
+
+function mapDispatchToProps(dispatch) {
+  const modActions = bindActionCreators(modificationActions, dispatch)
+  const quizEntryApiActions = bindActionCreators(quizEntriesApiActions, dispatch)
+  const stimulusApiActions = bindActionCreators(stimuliApiActions, dispatch)
+  const boundErrorsShowingActions = bindActionCreators(errorsShowingActions, dispatch)
+  const boundModalActions = bindActionCreators(modalActions, dispatch)
+
+  return {
+    clearTemporaryStimulus: modActions.clearTemporaryStimulus,
+    clearModifications: modActions.clearModifications,
+    clearNextQuizEntry: modActions.clearNextQuizEntry,
+    createQuizEntry: quizEntryApiActions.createQuizEntry,
+    createStimulus: stimulusApiActions.createStimulus,
+    createStimulusAndQuizEntry: quizEntryApiActions.createStimulusAndQuizEntry,
+    createTempItem: modActions.createItem,
+    createTempStimulus: modActions.createStimulus,
+    getQuizEntries: quizEntryApiActions.getQuizEntries,
+    hideError: boundErrorsShowingActions.hideError,
+    openModal: boundModalActions.openModal,
+    screenreaderNotification: bindActionCreators(alertActions, dispatch).screenreaderNotification,
+    setUi: bindActionCreators(uiActions, dispatch).set,
+    setUploadStatus: bindActionCreators(uploadStatus, dispatch),
+    showError: boundErrorsShowingActions.showError,
+    updateQuizEntry: quizEntryApiActions.updateQuizEntry,
+    updateStimulus: stimulusApiActions.updateStimulus,
+    withConfirm: boundModalActions.withConfirm,
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(WrappedStimulusEdit)

package/src/common/components/resources/stimulus/StimulusEdit/presenter.js

@@ -0,0 +1,466 @@
+/** @jsx jsx */
+import {Component} from 'react'
+import PropTypes from 'prop-types'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import first from 'lodash/first'
+import partial from 'lodash/partial'
+import ReactDOM from 'react-dom'
+
+import {Button} from '@instructure/ui-buttons'
+import {ToggleDetails} from '@instructure/ui-toggle-details'
+import {jsx} from '@instructure/emotion'
+import {Text} from '@instructure/ui-text'
+import {View} from '@instructure/ui-view'
+
+import {
+  FILE_UPLOAD_SUCCESS,
+  SHOULD_CLONE_ITEM,
+  DELETED_QUIZ_ENTRY,
+} from '@instructure/quiz-common/constants'
+import {withStyleOverrides} from '@instructure/quiz-common/util/withStyleOverrides'
+
+import {
+  propsForStimulusVersioningWrapper,
+  propsForBankEntryVersioningWrapper,
+} from '../../../../util/warningHelpers'
+import AddToBankModal from '../../../../../banks/components/AddToBankModal'
+import AddToBankOptions from '../../../../../building/components/resources/AddToBankOptions'
+import WarningWrapper from '../../WarningWrapper'
+
+import CustomPropTypes from '../../../../../common/util/CustomPropTypes'
+import {checkClickedNode} from '../../../../../common/util/clickHandlers'
+
+import StimulusShowInfo from '../StimulusShowInfo'
+import StimulusEditInfo from '../StimulusEditInfo'
+import wrapWithOutsideClickEmotion from '../../../shared/functionality/componentWithOutsideClickEmotion'
+import ActionButtons from '../../../../../building/components/resources/ActionButtons'
+
+import generateStyle from './styles'
+import generateComponentTheme from './theme'
+import t from '@instructure/quiz-i18n/format-message'
+
+@withStyleOverrides(generateStyle, generateComponentTheme)
+export class StimulusEdit extends Component {
+  static displayName = 'StimulusEdit'
+  static componentId = `Quizzes${this.displayName}`
+
+  static propTypes = {
+    addContentPopoverOpen: PropTypes.bool.isRequired,
+    appContainer: CustomPropTypes.selectors.isRequired,
+    bankEntryWarningWrapperProps: PropTypes.func,
+    clearModifications: PropTypes.func.isRequired,
+    clearNextQuizEntry: PropTypes.func.isRequired,
+    createTempItem: PropTypes.func.isRequired,
+    createTempStimulus: PropTypes.func.isRequired,
+    clearTemporaryStimulus: PropTypes.func.isRequired,
+    createQuizEntry: PropTypes.func.isRequired,
+    connectDragSource: PropTypes.func.isRequired,
+    createStimulus: PropTypes.func.isRequired,
+    createStimulusAndQuizEntry: PropTypes.func.isRequired,
+    displayPosition: PropTypes.number.isRequired,
+    errorsShowing: PropTypes.bool,
+    getQuizEntries: PropTypes.func.isRequired,
+    guid: PropTypes.string.isRequired,
+    hideError: PropTypes.func.isRequired,
+    isBankedContent: PropTypes.bool,
+    isSurvey: PropTypes.bool,
+    openModal: PropTypes.func.isRequired,
+    openDeleteStimulusModal: PropTypes.func.isRequired,
+    nextQuizEntry: ImmutablePropTypes.map,
+    quizEntries: ImmutablePropTypes.listOf(ImmutablePropTypes.record).isRequired,
+    quizEntry: ImmutablePropTypes.record.isRequired,
+    quizId: PropTypes.string.isRequired,
+    screenreaderNotification: PropTypes.func.isRequired,
+    setUi: PropTypes.func.isRequired,
+    setUploadStatus: PropTypes.func.isRequired,
+    shouldClone: PropTypes.bool.isRequired,
+    showError: PropTypes.func.isRequired,
+    stimulus: ImmutablePropTypes.record.isRequired,
+    switchOnEditing: PropTypes.func.isRequired,
+    switchOffEditing: PropTypes.func.isRequired,
+    updateQuizEntry: PropTypes.func.isRequired,
+    updateStimulus: PropTypes.func.isRequired,
+    withConfirm: PropTypes.func.isRequired,
+    workingQuizEntry: ImmutablePropTypes.record.isRequired,
+    workingStimulus: ImmutablePropTypes.record.isRequired,
+    onEditToggle: PropTypes.func.isRequired,
+    shouldFocusOnMount: PropTypes.bool.isRequired,
+    styles: PropTypes.object,
+  }
+
+  static defaultProps = {
+    bankEntryWarningWrapperProps: () => {},
+    errorsShowing: false,
+    isBankedContent: false,
+    isSurvey: false,
+    nextQuizEntry: null,
+  }
+
+  state = {
+    canSubmit: true,
+  }
+
+  componentWillUnmount() {
+    if (!this.props.nextQuizEntry) {
+      // adding timeout so any content rce events
+      // fire before the mods are cleared
+      setTimeout(this.clearModifications)
+    }
+    this.props.switchOffEditing()
+  }
+
+  componentDidMount() {
+    this.stimulusEditTitleRef && this.stimulusEditTitleRef.focus()
+    this.props.switchOnEditing()
+    this.props.onEditToggle(this.props.quizEntry.id)
+  }
+
+  clickedOutside() {
+    if (this.props.stimulus.isImmutable() || this.props.isBankedContent) {
+      this.props.switchOffEditing()
+    } else {
+      this.onSubmit()
+    }
+  }
+
+  ignoreClickOutsideIf(e) {
+    const {isEndEditingTrigger, outsideApp} = checkClickedNode(e, this.props.appContainer)
+
+    return outsideApp || !isEndEditingTrigger
+  }
+
+  clearModifications = () => {
+    this.props.clearModifications('stimuli', this.props.stimulus.id)
+    this.props.clearModifications('quizEntries', this.props.quizEntry.id)
+
+    if (this.props.stimulus.isTemporary()) {
+      this.props.clearTemporaryStimulus(this.props.quizId)
+    }
+  }
+
+  onCancel = e => {
+    this.props.hideError(this.props.guid)
+    this.props.switchOffEditing()
+    this.clearModifications()
+    this.props.setUi(SHOULD_CLONE_ITEM, false)
+  }
+
+  isPassage() {
+    return this.props.stimulus?.passage
+  }
+
+  handleDeleteTemporary = () => {
+    const isPassage = this.isPassage()
+    this.props.withConfirm(
+      () => {
+        this.onCancel()
+        this.props.setUi(DELETED_QUIZ_ENTRY, {
+          position: Math.ceil(this.props.quizEntry.position),
+          inStimulus: false,
+        })
+      },
+      {
+        title: isPassage ? t('Confirm Text Block Removal') : t('Confirm Stimulus Removal'),
+        text: isPassage
+          ? t('Are you sure you want to remove this text block?')
+          : t('Are you sure you want to remove this stimulus?'),
+        continueText: isPassage ? t('Remove Text Block') : t('Remove Stimulus'),
+        cancelText: isPassage ? t('Keep Text Block ') : t('Keep Stimulus'),
+        automationPrefix: isPassage ? 'text-block' : 'stimulus',
+      },
+    )
+  }
+
+  handleDeleteStimulus = () => {
+    if (this.props.stimulus.isTemporary()) {
+      this.handleDeleteTemporary()
+    } else {
+      this.props.openDeleteStimulusModal()
+    }
+  }
+
+  handleStimulusCreated = async stimulusData => {
+    const {quizId, quizEntry} = this.props
+    const mods = Object.assign({}, quizEntry.toJS(), {
+      entryId: stimulusData.id,
+      entryType: 'Stimulus',
+    })
+    await this.props.updateQuizEntry(quizId, quizEntry.id, mods)
+    this.props.getQuizEntries(quizId)
+  }
+
+  createNextQuizEntry = () => {
+    const {interactionTypeData, quizId, position, stimulusId, parentEntryId} =
+      this.props.nextQuizEntry
+    if (!interactionTypeData) {
+      this.props.createTempStimulus(quizId, position)
+    } else {
+      const defaultInteractionData = interactionTypeData.getDefaultInteractionData()
+      const scoringData = interactionTypeData.getDefaultScoringData(defaultInteractionData)
+
+      this.props.createTempItem(
+        quizId,
+        position,
+        {
+          id: interactionTypeData.id,
+          interactionData: defaultInteractionData,
+          itemBody: interactionTypeData.itemBody,
+          properties: interactionTypeData.defaultProperties,
+          scoringAlgorithm: interactionTypeData.scoringAlgorithmDefault,
+          scoringData: scoringData,
+          userResponseType: first(interactionTypeData.userResponseTypeOptions),
+        },
+        parentEntryId,
+        stimulusId,
+      )
+    }
+
+    this.props.clearNextQuizEntry()
+  }
+
+  onSubmit = async e => {
+    const {stimulus, workingStimulus, quizId, quizEntry} = this.props
+
+    if (!workingStimulus.isValid()) {
+      const message = this.isPassage()
+        ? t('Text Block not saved due to validation errors with the data.')
+        : t('Stimulus not saved due to validation errors with the data.')
+
+      await this.props.showError(this.props.guid)
+      this.props.screenreaderNotification(message)
+      this.props.clearNextQuizEntry()
+      this.focusFirstErrorField()
+      return
+    }
+
+    this.setState({canSubmit: false})
+    this.props.hideError(this.props.guid)
+
+    try {
+      if (stimulus.isTemporary()) {
+        await this.props.createStimulusAndQuizEntry(quizId, workingStimulus.toJS(), quizEntry)
+        this.props.clearTemporaryStimulus(quizId)
+      } else if (this.props.shouldClone) {
+        const stimulusData = await this.props.createStimulus(
+          workingStimulus,
+          this.props.quizId,
+          'quiz',
+          workingStimulus.id,
+        )
+        await this.handleStimulusCreated(stimulusData)
+        this.props.clearTemporaryStimulus(quizId)
+      } else {
+        await this.props.updateStimulus(workingStimulus.toJS(), quizId)
+      }
+    } catch (error) {
+      this.setState({canSubmit: true})
+      throw error
+    }
+    this.afterSubmit()
+  }
+
+  focusFirstErrorField = () => {
+    if (this.stimulusEditArea) {
+      const editArea = ReactDOM.findDOMNode(this.stimulusEditArea)
+      const firstErrorField = editArea?.querySelector('[aria-invalid="true"]')
+      firstErrorField && firstErrorField.focus()
+    }
+  }
+
+  handleRef = node => {
+    this.stimulusEditArea = node
+  }
+
+  afterSubmit() {
+    const message = this.isPassage()
+      ? t('Changes to text block saved.')
+      : t('Changes to stimulus saved.')
+    this.props.switchOffEditing()
+    this.clearModifications()
+    this.props.setUi(SHOULD_CLONE_ITEM, false)
+    this.props.screenreaderNotification(message)
+    if (this.props.nextQuizEntry) {
+      this.createNextQuizEntry()
+    }
+  }
+
+  onSuccess = url => {
+    this.props.setUploadStatus(FILE_UPLOAD_SUCCESS)
+  }
+
+  handleAddToBankContinue = () => {
+    this.setState({canSubmit: false})
+  }
+
+  handleAddToBank = bankEntry => {
+    if (this.props.workingQuizEntry.isTemporary) {
+      this.props.createQuizEntry(
+        this.props.quizId,
+        bankEntry.id,
+        'BankEntry',
+        this.props.workingQuizEntry.getProperties(),
+      )
+      this.props.clearTemporaryStimulus(this.props.quizId)
+      this.clearModifications()
+      this.props.switchOffEditing()
+    } else {
+      this.props.updateQuizEntry(this.props.quizId, this.props.workingQuizEntry.id, {
+        entryId: bankEntry.id,
+        entryType: 'BankEntry',
+      })
+    }
+  }
+
+  getEntryForBank = () => {
+    const {stimulus, workingStimulus, quizId, shouldClone} = this.props
+    if (stimulus.isTemporary()) {
+      return this.props.createStimulus(workingStimulus, quizId)
+    } else if (stimulus.hasModifications()) {
+      if (shouldClone) {
+        return this.props.createStimulus(workingStimulus, quizId)
+      } else {
+        return this.props.updateStimulus(workingStimulus, quizId)
+      }
+    } else {
+      return Promise.resolve(stimulus)
+    }
+  }
+
+  renderAddToBankModal() {
+    return (
+      <AddToBankModal
+        label={t('Add to an Item Bank')}
+        onAdd={this.handleAddToBank}
+        onContinue={this.handleAddToBankContinue}
+        getEntry={this.getEntryForBank}
+        quizId={this.props.quizId}
+        entryId={this.props.guid}
+        entryType={this.props.quizEntry.entryType}
+      />
+    )
+  }
+
+  renderAddToBankOptions() {
+    const paddingTopStyle = this.isPassage() ? {padding: 'small 0 0'} : {}
+    return (
+      <View as="div" {...paddingTopStyle}>
+        <ToggleDetails variant="filled" key="itemBanking" summary={t('Item Banking')}>
+          <div css={this.props.styles.optionWrapper}>
+            <AddToBankOptions
+              displayPosition={this.props.displayPosition}
+              entryType={this.props.quizEntry.entryType}
+              focusFirstErrorField={this.focusFirstErrorField}
+              guid={this.props.guid}
+              isValid={this.props.workingStimulus.isValid()}
+              openModal={this.props.openModal}
+              screenreaderNotification={this.props.screenreaderNotification}
+              showError={this.props.showError}
+            />
+          </div>
+        </ToggleDetails>
+        {this.renderAddToBankModal()}
+      </View>
+    )
+  }
+
+  setTitleRef = elem => {
+    this.stimulusEditTitleRef = elem
+  }
+
+  renderStimulusEdit() {
+    const stimulusLabel = this.isPassage() ? t('Text Block') : t('Stimulus')
+    const automationPrefix = this.isPassage() ? 'text-block' : 'stimulus'
+
+    return (
+      <div>
+        <div css={this.props.styles.stimulus} ref={this.handleRef}>
+          <div css={this.props.styles.header}>
+            <Text size="small" color="secondary">
+              {stimulusLabel}
+            </Text>
+            <ActionButtons
+              connectDragSource={this.props.connectDragSource}
+              displayPosition={this.props.displayPosition}
+              onDelete={this.handleDeleteStimulus}
+              quizEntries={this.props.quizEntries}
+              quizEntry={this.props.quizEntry}
+              shouldDisableDragHandle
+              shouldRenderEdit={false}
+              shouldFocusOnMount={this.props.shouldFocusOnMount}
+            />
+          </div>
+
+          <div css={this.props.styles.stimulusContent}>
+            <StimulusEditInfo
+              errorsShowing={this.props.errorsShowing}
+              guid={this.props.guid}
+              stimulus={this.props.stimulus}
+              isBankedContent={this.props.isBankedContent}
+              setTitleRef={this.setTitleRef}
+            />
+            {!this.props.isSurvey && this.renderAddToBankOptions()}
+          </div>
+        </div>
+        <div className="footer" css={this.props.styles.footer}>
+          <div css={this.props.styles.buttonWrapper}>
+            <Button
+              type="button"
+              onClick={this.onCancel}
+              data-automation={`sdk-${automationPrefix}-discardButton`}
+            >
+              {t('Cancel')}
+            </Button>
+          </div>
+
+          <div className="submitButtonWrapper" css={this.props.styles.buttonWrapper}>
+            <Button
+              type="button"
+              color="primary"
+              disabled={!this.state.canSubmit}
+              onClick={this.onSubmit}
+              data-automation={`sdk-${automationPrefix}-done-button`}
+            >
+              {t('Done')}
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  render() {
+    this.stimulusEditInfoRef = null
+    if (this.props.isBankedContent) {
+      return (
+        <WarningWrapper {...this.props.bankEntryWarningWrapperProps()}>
+          <StimulusShowInfo {...this.props} />
+        </WarningWrapper>
+      )
+    }
+
+    const {stimulus, quizEntry} = this.props
+    const isPassage = stimulus.isPassage
+    const needsWarning = stimulus.isImmutable() || quizEntry.isArchivedBankEntry
+    const propForWrapperFunc = quizEntry.isArchivedBankEntry
+      ? propsForBankEntryVersioningWrapper
+      : propsForStimulusVersioningWrapper
+    const propsForStimulusVersioning = propForWrapperFunc(
+      needsWarning,
+      this.props.shouldClone,
+      partial(this.props.setUi, SHOULD_CLONE_ITEM),
+      this.props.switchOffEditing,
+      true,
+      quizEntry.isArchivedBankEntry ? 'info' : 'warning',
+      isPassage,
+    )
+    const hasWarningWrapper = needsWarning && !this.props.shouldClone
+
+    return (
+      <WarningWrapper {...propsForStimulusVersioning}>
+        {hasWarningWrapper ? <StimulusShowInfo {...this.props} /> : this.renderStimulusEdit()}
+      </WarningWrapper>
+    )
+  }
+}
+
+export default wrapWithOutsideClickEmotion(StimulusEdit)

package/src/common/components/resources/stimulus/StimulusEdit/styles.js

@@ -0,0 +1,42 @@
+const generateStyle = (componentTheme, props) => {
+  return {
+    stimulus: {
+      paddingTop: componentTheme.stimulusPadding,
+      paddingBottom: componentTheme.stimulusPadding,
+    },
+    footer: {
+      display: 'flex',
+      justifyContent: 'flex-end',
+    },
+    buttonWrapper: {
+      paddingLeft: componentTheme.buttonWrapperPadding,
+    },
+    header: {
+      height: '1rem',
+      paddingLeft: componentTheme.headerPadding,
+      paddingRight: componentTheme.headerPadding,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+    },
+    stimulusContent: {
+      height: '100%',
+      padding: componentTheme.stimulusContentPadding,
+    },
+    stimulusButtons: {
+      flex: '0 0 auto',
+      display: 'inline-flex',
+      textAlign: 'right',
+      zIndex: componentTheme.stimulusButtonsZIndex,
+      color: componentTheme.stimulusButtonsColor,
+      button: {
+        backgroundColor: 'initial',
+      },
+    },
+    optionWrapper: {
+      paddingTop: componentTheme.optionPadding,
+    },
+  }
+}
+
+export default generateStyle

package/src/common/components/resources/stimulus/StimulusEdit/theme.js

@@ -0,0 +1,14 @@
+const generateComponentTheme = ({spacing, typography, colors}) => {
+  return {
+    stimulusPadding: spacing.large,
+    buttonWrapperPadding: spacing.small,
+    headerPadding: spacing.small,
+    optionPadding: spacing.small,
+    stimulusContentPadding: spacing.small,
+    stimulusContentPaddingBottom: spacing.small,
+    stimulusButtonsColor: colors.contrasts.grey100100,
+    stimulusButtonsZIndex: '3333',
+  }
+}
+
+export default generateComponentTheme