@instructure/quiz-core 22.17.0 → 22.18.0

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

@@ -0,0 +1,699 @@
+/** @jsx jsx */
+import {useCallback, useState, useEffect, useRef} from 'react'
+import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
+import Immutable from 'immutable'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import differenceWith from 'lodash/differenceWith'
+import intersectionWith from 'lodash/intersectionWith'
+import isEqual from 'lodash/isEqual'
+import isUndefined from 'lodash/isUndefined'
+import keyBy from 'lodash/keyBy'
+
+import {Alert} from '@instructure/ui-alerts'
+import {BreadcrumbLink} from '@instructure/ui-breadcrumb'
+import {IconButton} from '@instructure/ui-buttons'
+import {Text} from '@instructure/ui-text'
+import {Heading} from '@instructure/ui-heading'
+import {IconDiscussionLine, IconDiscussionSolid} from '@instructure/ui-icons'
+
+import {ScreenReaderContent} from '@instructure/ui-a11y-content'
+import {jsx} from '@instructure/emotion'
+
+import {HeaderBreadCrumb} from '../HeaderBreadCrumb'
+import EntrySave from '../../../common/components/resources/entry/EntrySave'
+import ItemEdit from '../../../common/components/resources/item/ItemEdit'
+import ItemFeedbackModal from '../../../building/components/resources/ItemFeedbackModal'
+import ItemShow from '../../../common/components/resources/item/ItemShow'
+import Page from '../../../common/components/layout/Page'
+import {Spinner} from '../../../common/components/shared/spinner/Spinner'
+import StimulusEditInfo from '../../../common/components/resources/stimulus/StimulusEditInfo'
+import StimulusShowInfo from '../../../common/components/resources/stimulus/StimulusShowInfo'
+import TagSuggestSelect from '../../../common/components/shared/TagSuggestSelect'
+import WarningWrapper from '../../../common/components/resources/WarningWrapper'
+import t from '@instructure/quiz-i18n/format-message'
+import {createItem} from '../../../building/api/items'
+import {createStimulus} from '../../../building/api/stimuli'
+import {
+  propsForItemVersioningWrapper,
+  propsForStimulusVersioningWrapper,
+} from '../../../common/util/warningHelpers'
+
+import NavWrapper from '../NavWrapper'
+
+import {
+  API_INPUT_VALIDATION_ERROR,
+  CLEAR_ALL_INPUT_VALIDATION_ERRORS,
+  ITEM_FEEDBACK_MODAL,
+  ITEM_FEEDBACK_MODAL_ITEM,
+  ITEM_FEEDBACK_MODAL_FEEDBACK,
+  PARENT_TYPE_BANK,
+} from '@instructure/quiz-common/constants'
+import {TextInput} from '@instructure/quiz-common/components/TextInput/index'
+import {withStyleOverrides} from '@instructure/quiz-common/util/withStyleOverrides'
+
+import generateStyle from './styles'
+import generateComponentTheme from './theme'
+
+function BaseBankEntry(props) {
+  const {
+    bankEntryId,
+    bankId,
+    bank,
+    bankEntry,
+    entry,
+    changeItemTitle,
+    changeQuizEntryPoints,
+    cloneBankEntry,
+    clearModifications: clearModificationsProp,
+    clearTemporaryBankItem,
+    createEntryAndBankEntry,
+    closeTray,
+    createTagAssociations,
+    deleteTagAssociations,
+    getBankEntry,
+    getBank,
+    isCompact,
+    navigateToBanks,
+    navigateToBank: navigateToBankProp,
+    navigateToBuild,
+    scope,
+    returnToUrl,
+    openModal,
+    pendingAdditionTags,
+    pendingDeletionTags,
+    setPendingAdditionTagAssociations,
+    setPendingDeletionTagAssociations,
+    setShouldClone,
+    setUi,
+    shouldClone,
+    tagAssociations,
+    updateItem,
+    updateStimulus,
+    useBankTags,
+    iceTopNavBarEnabled,
+    styles,
+  } = props
+
+  const [validationErrorsFromApi, setValidationErrorsFromApi] = useState({})
+
+  const navToBankRef = useRef(null)
+  const itemEditArea = useRef(null)
+  const addFeedbackButton = useRef(null)
+
+  useEffect(() => {
+    setShouldClone(false)
+    return () => setShouldClone(false)
+  }, [])
+
+  useEffect(() => {
+    if (!isTemporary()) {
+      getBankEntry(bankId, bankEntryId)
+    }
+    if (navToBankRef.current) {
+      ReactDOM.findDOMNode(navToBankRef.current).focus()
+    }
+    getBank(bankId)
+  }, [])
+
+  function setNavToBankRef(node) {
+    navToBankRef.current = node
+  }
+
+  function navigateToBank() {
+    navigateToBankProp(bankId)
+  }
+
+  function isTemporary() {
+    return entry && entry.isTemporary()
+  }
+
+  function isItemEntry() {
+    return bankEntry.entryType === 'Item'
+  }
+
+  function isStimulusEntry() {
+    return bankEntry?.isStimulusEntry
+  }
+
+  function isPassageEntry() {
+    return bankEntry?.isPassageEntry
+  }
+
+  function getEditWarning() {
+    if (isStimulusEntry()) {
+      return t('Edits made here will appear on any assessment using this stimulus.')
+    }
+    if (isPassageEntry()) {
+      return t('Edits made here will appear on any assessment using this text block.')
+    }
+    return t('Edits made here will appear on any assessment using this question.')
+  }
+
+  function handleTitleChange(e) {
+    changeItemTitle(entry.id, e.target.value)
+  }
+
+  function entryLinkName() {
+    const translations = {
+      new: {
+        question: t('New Question'),
+        stimulus: t('New Stimulus'),
+        passage: t('New Text Block'),
+      },
+      edit: {
+        question: t('Edit Question'),
+        stimulus: t('Edit Stimulus'),
+        passage: t('Edit Text Block'),
+      },
+    }
+    const operation = isTemporary() ? 'new' : 'edit'
+
+    switch (true) {
+      case isItemEntry():
+        return translations[operation]['question']
+      case isStimulusEntry():
+        return translations[operation]['stimulus']
+      case isPassageEntry():
+        return translations[operation]['passage']
+    }
+    return null
+  }
+
+  function renderBankBreadCrumbLink() {
+    return (
+      <BreadcrumbLink key="bank" onClick={navigateToBank} ref={setNavToBankRef}>
+        {bank.title}
+      </BreadcrumbLink>
+    )
+  }
+
+  function renderBankEntryBreadCrumbLink() {
+    return <BreadcrumbLink key="bankEntry">{entryLinkName()}</BreadcrumbLink>
+  }
+
+  function renderNav() {
+    const isScopeEmpty = !Object.keys(scope).length
+
+    return (
+      <NavWrapper
+        closeTray={closeTray}
+        navigateToBanks={navigateToBanks}
+        navigateToBuild={navigateToBuild}
+        returnToUrl={isScopeEmpty ? null : returnToUrl}
+        scope={scope}
+        isCompact={isCompact}
+        iceTopNavBarEnabled={iceTopNavBarEnabled}
+        menuItemPath={`/banks/${bankId}/bank_entries/${bankEntryId || 'new'}`}
+      >
+        {renderBankBreadCrumbLink()}
+        {renderBankEntryBreadCrumbLink()}
+      </NavWrapper>
+    )
+  }
+
+  function renderTitle(entryParam) {
+    if (isItemEntry()) {
+      return (
+        <TextInput
+          renderLabel={<ScreenReaderContent>{t('Edit question title')}</ScreenReaderContent>}
+          type="text"
+          placeholder={t('Question Title')}
+          onChange={handleTitleChange}
+          value={entryParam.getWorkingInstance().title || ''}
+        />
+      )
+    }
+    return null
+  }
+
+  function getIdentifier(entryParam) {
+    if (!entryParam) return null
+    switch (true) {
+      case isItemEntry():
+        return t('Question { id }', {id: entryParam.id})
+      case isStimulusEntry():
+        return t('Stimulus { id }', {id: entryParam.id})
+      case isPassageEntry():
+        return t('Text Block { id }', {id: entryParam.id})
+      default:
+        return null
+    }
+  }
+
+  function getTemporaryIdentifier() {
+    switch (true) {
+      case isItemEntry():
+        return t('New Question')
+      case isStimulusEntry():
+        return t('New Stimulus')
+      case isPassageEntry():
+        return t('New Text Block')
+      default:
+        return null
+    }
+  }
+
+  function getEntryName(entryParam) {
+    if (!entryParam) return null
+
+    switch (true) {
+      case isItemEntry():
+        return entryParam.getInteractionType()?.name
+      case isStimulusEntry():
+        return t('Stimulus')
+      case isPassageEntry():
+        return t('Text Block')
+      default:
+        return null
+    }
+  }
+
+  function renderHeader(entryParam) {
+    if (!entryParam) return null
+    const propsForEntry = editProps(entryParam)
+    const identifier = getIdentifier(entryParam)
+    const tempIdentifier = getTemporaryIdentifier()
+
+    const itemIdentifier = isTemporary() ? tempIdentifier : identifier
+
+    const entryName = getEntryName(entryParam)
+
+    return (
+      <div css={styles.header}>
+        <div css={styles.leftHeader}>
+          <div css={styles.headerText}>
+            <Heading level="reset" as="h2">
+              {t('{entryName} | {itemIdentifier}', {
+                entryName,
+                itemIdentifier,
+              })}
+            </Heading>
+          </div>
+        </div>
+        {renderTitle(entryParam)}
+        <div css={styles.rightHeader}>
+          <EntrySave {...propsForEntry} />
+        </div>
+      </div>
+    )
+  }
+
+  function hasPendingTagModifications() {
+    return !pendingDeletionTags.isEmpty() || !pendingAdditionTags.isEmpty()
+  }
+
+  function createTagsForClone(newBankEntry, tags) {
+    createTagAssociations(
+      newBankEntry.id,
+      newBankEntry.entry_type,
+      newBankEntry.entry.id,
+      tags.map(tag => tag.tag_value),
+    )
+    // Pending tag associations were applied to the original bank entry, so clear those out
+    setPendingAdditionTagAssociations(bankEntry.entryType, entry.id, [])
+    setPendingDeletionTagAssociations(bankEntry.entryType, entry.id, [])
+  }
+
+  async function updateTagsForEntry() {
+    if (!shouldClone) {
+      await createTagAssociations(
+        bankEntryId,
+        bankEntry.entryType,
+        getBankEntryId(bankEntry),
+        pendingAdditionTags.map(tagToAdd => tagToAdd.get('tag_value')),
+      )
+      await deleteTagAssociations(
+        bankEntryId,
+        bankEntry.entryType,
+        getBankEntryId(bankEntry),
+        pendingDeletionTags.map(tagToDelete => tagToDelete.get('id')),
+      )
+    }
+  }
+
+  async function normalSubmit() {
+    if (entry.hasModifications() || (shouldClone && hasPendingTagModifications())) {
+      if (shouldClone) {
+        const tags = visibleTagAssociations()
+        const createEntryCb = isItemEntry() ? createItem : createStimulus
+        const newBankEntry = await cloneBankEntry(bankEntry, createEntryCb)
+        createTagsForClone(newBankEntry, tags)
+      } else {
+        const workingEntry = entry.getWorkingInstance()
+        const updateFunc = isItemEntry() ? updateItem : updateStimulus
+        await updateFunc(workingEntry, bankId, 'bank')
+      }
+      const toClear = isItemEntry() ? 'items' : 'stimuli'
+      clearModificationsProp(toClear, entry.id)
+    }
+    if (hasPendingTagModifications()) {
+      await updateTagsForEntry()
+    }
+  }
+
+  async function temporarySubmit() {
+    const workingEntry = entry.getWorkingInstance()
+    const workingBankEntry = bankEntry.getWorkingInstance()
+    const createEntryCb = isItemEntry() ? createItem : createStimulus
+    const newBankEntry = await createEntryAndBankEntry(
+      bankId,
+      workingEntry,
+      workingBankEntry,
+      createEntryCb,
+    )
+    if (hasPendingTagModifications()) {
+      createTagAssociations(
+        newBankEntry.id,
+        newBankEntry.entry_type,
+        newBankEntry.entry.id,
+        pendingAdditionTags.map(tagToAdd => tagToAdd.get('tag_value')),
+      )
+    }
+    const toClear = isItemEntry() ? 'items' : 'stimuli'
+    clearModificationsProp(toClear, entry.id)
+    clearTemporaryBankItem(bankId)
+  }
+
+  function clearValidationErrorsFromApi(inputId) {
+    if (inputId === CLEAR_ALL_INPUT_VALIDATION_ERRORS) {
+      setValidationErrorsFromApi({})
+      return null
+    }
+    setValidationErrorsFromApi(prevErrors => {
+      if (prevErrors[inputId]) {
+        const newErrors = Object.assign({}, prevErrors)
+        delete newErrors[inputId]
+        return newErrors
+      }
+      return prevErrors
+    })
+    return null
+  }
+
+  async function submitHandler() {
+    try {
+      if (entry.isTemporary()) {
+        await temporarySubmit()
+      } else {
+        await normalSubmit()
+      }
+    } catch (e) {
+      if (e.validationErrorsFromApi) {
+        setValidationErrorsFromApi(e.validationErrorsFromApi)
+        // Throwing an error here would cause an alert banner to show,
+        // which we don't want in the case of a simple input validation error
+        return API_INPUT_VALIDATION_ERROR
+      }
+      throw e
+    }
+    navigateToBank()
+    return null
+  }
+
+  function handleRef(node) {
+    itemEditArea.current = node
+  }
+
+  function clearChanges() {
+    clearValidationErrorsFromApi(CLEAR_ALL_INPUT_VALIDATION_ERRORS)
+    if (!entry) return
+    if (entry.isTemporary()) {
+      clearTemporaryBankItem(bankId)
+    }
+    clearModificationsProp('items', entry.id)
+    setPendingDeletionTagAssociations(bankEntry.entryType, entry.id, [])
+    setPendingAdditionTagAssociations(bankEntry.entryType, entry.id, [])
+  }
+
+  const handlePointsChange = useCallback(
+    points => {
+      changeQuizEntryPoints(entry.id, points)
+    },
+    [changeQuizEntryPoints, entry?.id],
+  )
+
+  function editProps(entryParam) {
+    return {
+      cancelHandler: navigateToBank,
+      clearChanges: clearChanges,
+      clearValidationErrorsFromApi: clearValidationErrorsFromApi,
+      contextUuid: null,
+      entry: entryParam,
+      guid: `${bankEntry.id}_bank_entry_edit`,
+      handleQuizEntryPointsChange: handlePointsChange,
+      itemEditArea: itemEditArea.current,
+      parentId: bankId,
+      parentType: PARENT_TYPE_BANK,
+      stimulus: entryParam,
+      submitHandler: submitHandler,
+      validationErrorsFromApi: validationErrorsFromApi,
+      scope: scope,
+    }
+  }
+
+  function openFeedbackModal() {
+    setUi(ITEM_FEEDBACK_MODAL_ITEM, entry.getWorkingInstance())
+    setUi(ITEM_FEEDBACK_MODAL_FEEDBACK, entry.getWorkingInstance().feedback)
+    openModal(ITEM_FEEDBACK_MODAL, {modalTrigger: addFeedbackButton.current})
+  }
+
+  function storeFeedbackButtonRef(button) {
+    addFeedbackButton.current = button
+  }
+
+  function renderFeedbackSection() {
+    if (!isItemEntry()) {
+      return null
+    }
+    const disabled = entry.isImmutable() && !shouldClone
+    let icon, text
+    if (entry.getWorkingInstance().hasFeedback()) {
+      icon = IconDiscussionSolid
+      text = t('Edit Question Level Feedback (present)')
+    } else {
+      icon = IconDiscussionLine
+      text = t('Edit Question Level Feedback')
+    }
+    return (
+      <IconButton
+        onClick={openFeedbackModal}
+        withBackground={false}
+        withBorder={false}
+        disabled={disabled}
+        ref={storeFeedbackButtonRef}
+        renderIcon={icon}
+        screenReaderLabel={text}
+      />
+    )
+  }
+
+  function compareTagValues(left, right) {
+    return left.tag_value === right.tag_value
+  }
+
+  function tagToAssociation({value}) {
+    return {tag_value: value}
+  }
+
+  function getBankEntryId(bankEntryParam) {
+    // bankEntry.entry can be either 'TEMPORARY_ITEM' or an entire Map
+    return bankEntryParam.entry
+      ? bankEntryParam.entry.get
+        ? bankEntryParam.entry.get('id')
+        : bankEntryParam.entry
+      : null
+  }
+
+  function handleTagChange(tags) {
+    const tagAssociationsJS = tagAssociations.toJS()
+    const associations = tags.map(tagToAssociation)
+    const removed = differenceWith(tagAssociationsJS, associations, compareTagValues)
+    const created = differenceWith(associations, tagAssociationsJS, compareTagValues)
+    // If a tag that was removed is being re-added,
+    // remove from both addAssociations and deletedTags
+    const restored = intersectionWith(created, removed, compareTagValues)
+    const addOperations = differenceWith(created, restored, isEqual)
+    const deleteOperations = differenceWith(removed, restored, compareTagValues)
+    const bankEntryIdValue = getBankEntryId(bankEntry)
+    setPendingDeletionTagAssociations(bankEntry.entryType, bankEntryIdValue, deleteOperations)
+    setPendingAdditionTagAssociations(bankEntry.entryType, bankEntryIdValue, addOperations)
+  }
+
+  function visibleTagAssociations() {
+    const existingValues = keyBy(tagAssociations.toJS(), t => t.tag_value)
+    const noDuplicates = pendingAdditionTags.filter(t =>
+      isUndefined(existingValues[t.get('tag_value')]),
+    )
+    return tagAssociations
+      .filter(tag => !pendingDeletionTags.includes(tag))
+      .concat(noDuplicates)
+      .toJS()
+  }
+
+  function visibleTags() {
+    return visibleTagAssociations().map(a => ({
+      id: a.tag_id,
+      value: a.tag_value,
+    }))
+  }
+
+  function renderEntry(entryParam) {
+    if (!entryParam) return null
+    const propsForEntry = editProps(entryParam)
+    const propsFunc = isItemEntry()
+      ? propsForItemVersioningWrapper
+      : propsForStimulusVersioningWrapper
+    const versioningProps = propsFunc(
+      entryParam.isImmutable(),
+      shouldClone,
+      setShouldClone,
+      navigateToBank,
+      true,
+      'warning',
+      isPassageEntry(),
+    )
+
+    const canEdit = !entryParam.isImmutable() || shouldClone
+    const ItemComponent = canEdit ? ItemEdit : ItemShow
+    const StimulusComponent = canEdit ? StimulusEditInfo : StimulusShowInfo
+
+    const EntryComponent = isItemEntry() ? ItemComponent : StimulusComponent
+
+    const entryType = bankEntry.entryType
+    const entryId = getBankEntryId(bankEntry)
+    const tags = () => (
+      <TagSuggestSelect
+        allowNewTags
+        noMatchText={t('Enter a tag to find or create')}
+        parentType={entryType}
+        parentId={entryId}
+        onChange={handleTagChange}
+        tags={visibleTags()}
+      />
+    )
+
+    const editWarning = getEditWarning()
+
+    return (
+      <div>
+        <div css={styles.entryEdit}>
+          <WarningWrapper {...versioningProps}>
+            {canEdit && (
+              <Alert renderCloseButtonLabel={t('Dismiss')} margin="0 0 medium 0">
+                <Text color="primary">{editWarning}</Text>
+              </Alert>
+            )}
+            <EntryComponent {...propsForEntry} />
+            {useBankTags && tags()}
+          </WarningWrapper>
+        </div>
+        <div css={styles.footer}>
+          <div css={styles.leftFooter}>{renderFeedbackSection()}</div>
+          <div css={styles.rightFooter}>
+            <EntrySave {...propsForEntry} />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (entry && !entry.isLoaded()) {
+    return <Spinner />
+  }
+
+  return (
+    <Page>
+      {renderNav()}
+      <div css={styles.content} ref={handleRef}>
+        {iceTopNavBarEnabled && (
+          <div css={styles.breadcrumb}>
+            <HeaderBreadCrumb
+              returnToUrl={returnToUrl}
+              scope={scope}
+              navigateToBanks={navigateToBanks}
+              navigateToBuild={navigateToBuild}
+            >
+              {renderBankBreadCrumbLink()}
+              {renderBankEntryBreadCrumbLink()}
+            </HeaderBreadCrumb>
+          </div>
+        )}
+        {renderHeader(entry)}
+        {renderEntry(entry)}
+        {!isCompact && <ItemFeedbackModal parentId={bankId} parentType={PARENT_TYPE_BANK} />}
+      </div>
+    </Page>
+  )
+}
+
+BaseBankEntry.displayName = 'BankEntry'
+BaseBankEntry.componentId = 'QuizzesBankEntry'
+
+BaseBankEntry.propTypes = {
+  bankEntryId: PropTypes.string.isRequired,
+  bankId: PropTypes.string.isRequired,
+  bank: ImmutablePropTypes.record.isRequired,
+  bankEntry: ImmutablePropTypes.record.isRequired,
+  entry: ImmutablePropTypes.record,
+  changeItemTitle: PropTypes.func.isRequired,
+  changeQuizEntryPoints: PropTypes.func.isRequired,
+  cloneBankEntry: PropTypes.func.isRequired,
+  clearModifications: PropTypes.func.isRequired,
+  clearTemporaryBankItem: PropTypes.func.isRequired,
+  createEntryAndBankEntry: PropTypes.func.isRequired,
+  closeTray: PropTypes.func,
+  createTagAssociations: PropTypes.func.isRequired,
+  deleteTagAssociations: PropTypes.func.isRequired,
+  getBankEntry: PropTypes.func.isRequired,
+  getBank: PropTypes.func.isRequired,
+  isCompact: PropTypes.bool,
+  navigateToBanks: PropTypes.func.isRequired, // can be from consumer
+  navigateToBank: PropTypes.func.isRequired, // can be from consumer
+  navigateToBuild: PropTypes.func, // from consumer
+  scope: PropTypes.objectOf(
+    PropTypes.shape({
+      type: PropTypes.string,
+      uuid: PropTypes.string,
+      title: PropTypes.string,
+      launch_context_uuid: PropTypes.string,
+      root_account_name: PropTypes.string,
+    }),
+  ),
+  returnToUrl: PropTypes.string, // from consumer
+  openModal: PropTypes.func.isRequired,
+  pendingAdditionTags: ImmutablePropTypes.listOf(ImmutablePropTypes.map),
+  pendingDeletionTags: ImmutablePropTypes.listOf(ImmutablePropTypes.map),
+  setPendingAdditionTagAssociations: PropTypes.func.isRequired,
+  setPendingDeletionTagAssociations: PropTypes.func.isRequired,
+  setShouldClone: PropTypes.func.isRequired,
+  setTagInput: PropTypes.func.isRequired,
+  setUi: PropTypes.func.isRequired,
+  shouldClone: PropTypes.bool.isRequired,
+  tagAssociations: ImmutablePropTypes.listOf(ImmutablePropTypes.map),
+  tagInput: PropTypes.string,
+  updateItem: PropTypes.func.isRequired,
+  updateStimulus: PropTypes.func.isRequired,
+  useBankTags: PropTypes.bool,
+  iceTopNavBarEnabled: PropTypes.bool,
+  styles: PropTypes.object,
+}
+
+BaseBankEntry.defaultProps = {
+  closeTray() {},
+  entry: null,
+  isCompact: false,
+  navigateToBuild: null,
+  scope: {},
+  returnToUrl: null,
+  pendingAdditionTags: Immutable.List(),
+  pendingDeletionTags: Immutable.List(),
+  tagAssociations: Immutable.List(),
+  tagInput: null,
+  useBankTags: false,
+  iceTopNavBarEnabled: false,
+}
+
+const BankEntry = withStyleOverrides(generateStyle, generateComponentTheme)(BaseBankEntry)
+export {BankEntry}
+export default BankEntry