@instructure/quiz-core 22.17.0 → 22.18.0

package/src/common/util/__tests__/withStateCache.test.js

@@ -0,0 +1,140 @@
+import {expect, vi} from 'vitest'
+import {fromJS} from 'immutable'
+import withStateCache from '../withStateCache'
+
+describe('withStateCache', () => {
+  const stub = vi.fn()
+  class Helper {
+    constructor(stub) {
+      this.stub = stub
+      this.internalState = {x: fromJS({y: null})}
+    }
+
+    state() {
+      return this.internalState
+    }
+
+    get id() {
+      return this.state().id
+    }
+
+    @withStateCache(obj => [['x']])
+    yTimes2() {
+      this.stub()
+      const x = this.state().x
+
+      return 2 * x.get('y')
+    }
+
+    @withStateCache(obj => [['a', 'b'], ['c']])
+    bPlusC() {
+      this.stub()
+      const b = this.state().a.get('b').get('value')
+      const c = this.state().c.value
+      return b + c
+    }
+
+    @withStateCache(obj => [['x', obj.id]])
+    xIdYPathValue() {
+      this.stub()
+      const id = this.state().id
+      return this.state().x.getIn([id, 'y'])
+    }
+  }
+
+  let helper
+
+  beforeEach(() => {
+    helper = new Helper(stub)
+  })
+
+  afterEach(() => {
+    stub.mockClear()
+  })
+
+  describe('caching by multiple keys', () => {
+    const obj1 = {value: 3}
+    const obj2 = {value: 4}
+    const state = {
+      a: fromJS({b: obj1}),
+      c: obj2,
+    }
+
+    it('calls through to the original method', () => {
+      const obj1 = {value: 3}
+      const obj2 = {value: 4}
+      const state = {
+        a: fromJS({b: obj1}),
+        c: obj2,
+      }
+      helper.internalState = state
+      expect(helper.bPlusC()).toBe(7)
+      expect(stub.mock.calls.length).toBe(1)
+    })
+
+    it('caches when all keys are the same', () => {
+      helper.internalState = state
+      expect(helper.bPlusC()).toBe(7)
+      expect(helper.bPlusC()).toBe(7)
+      expect(stub.mock.calls.length).toBe(1)
+    })
+
+    it('does not cache when either keys are different', () => {
+      helper.internalState = state
+      expect(helper.bPlusC()).toBe(7)
+      const state2 = {...state, a: state.a.set('b', fromJS({value: 5}))}
+      const state3 = {...state, c: {value: 10}}
+      helper.internalState = state2
+      expect(helper.bPlusC()).toBe(9)
+      helper.internalState = state3
+      expect(helper.bPlusC()).toBe(13)
+      expect(stub.mock.calls.length).toBe(3)
+    })
+  })
+
+  describe('caching by one key', () => {
+    it('calls the decorated method', () => {
+      helper.internalState = {x: fromJS({y: 5})}
+      expect(helper.yTimes2()).toBe(10)
+      expect(stub.mock.calls.length).toBe(1)
+    })
+
+    it('caches the decorated method', () => {
+      helper.internalState = {x: fromJS({y: 5})}
+      expect(helper.yTimes2()).toBe(10)
+      expect(helper.yTimes2()).toBe(10)
+      expect(stub.mock.calls.length).toBe(1)
+    })
+
+    it('stops caching on change', () => {
+      helper.internalState = {x: fromJS({y: 5})}
+      expect(helper.yTimes2()).toBe(10)
+      helper.internalState = {x: fromJS({y: 6})}
+      expect(helper.yTimes2()).toBe(12)
+      expect(stub.mock.calls.length).toBe(2)
+    })
+
+    it('caches by the object calling the method', () => {
+      const internalState = {x: fromJS({y: 5})}
+      helper.internalState = internalState
+
+      const stub2 = vi.fn()
+      const helper2 = new Helper(stub2)
+      helper2.internalState = internalState
+
+      expect(helper.yTimes2()).toBe(10)
+      expect(helper2.yTimes2()).toBe(10)
+      expect(stub.mock.calls.length).toBe(1)
+      expect(stub2.mock.calls.length).toBe(1)
+    })
+
+    describe('caching by data that lives on the object', () => {
+      it('caches normally', () => {
+        helper.internalState = {id: 'foo', x: fromJS({foo: {y: 3}})}
+        expect(helper.xIdYPathValue()).toBe(3)
+        expect(helper.xIdYPathValue()).toBe(3)
+        expect(stub.mock.calls.length).toBe(1)
+      })
+    })
+  })
+})

package/src/common/util/cachePreviousArgs.js

@@ -0,0 +1,16 @@
+import isEqual from 'lodash/isEqual'
+
+export default fn => {
+  let prevArgs = null
+  let cachedValue
+
+  return (...args) => {
+    if (isEqual(args, prevArgs)) {
+      return cachedValue
+    }
+
+    prevArgs = args
+    cachedValue = fn.apply(this, args)
+    return cachedValue
+  }
+}

package/src/common/util/callHelpers.js

@@ -0,0 +1,25 @@
+import {CALL_STATUS, SET_CALLBACKS_STATUS} from '@instructure/quiz-common/constants'
+
+const callAction = (callStatus, type) => {
+  return {
+    type: CALL_STATUS,
+    payload: {
+      call: type,
+      status: callStatus,
+    },
+  }
+}
+
+export const startCallFor = type => callAction('calling', type)
+export const successCallFor = type => callAction('success', type)
+export const errorCallFor = type => callAction('error', type)
+
+export const callbacksCompleteForCall = type => {
+  return {
+    type: SET_CALLBACKS_STATUS,
+    payload: {
+      call: type,
+      status: 'complete',
+    },
+  }
+}

package/src/common/util/clickHandlers.js

@@ -0,0 +1,14 @@
+import elementsForSelectors from './ElementsForSelectors'
+import {END_EDITING_TRIGGER_CLASSNAME} from '@instructure/quiz-common/constants'
+
+export function checkClickedNode(e, appContainer) {
+  // Need to iterate over the appNodes since Gauge and lti have a different index for the sdk node
+  const appNodes = elementsForSelectors(appContainer)
+  const outsideApp = appNodes.every(node => node && !node.contains(e.target))
+
+  // checking if the click was on an element that should end editing
+  const endEditingNodes = elementsForSelectors(`.${END_EDITING_TRIGGER_CLASSNAME}`)
+  const isEndEditingTrigger = endEditingNodes.some(node => node && node.contains(e.target))
+
+  return {isEndEditingTrigger, outsideApp}
+}

package/src/common/util/componentForItem.js

@@ -0,0 +1,143 @@
+const {pascalize} = require('humps')
+
+import EssayEdit from '@instructure/quiz-interactions/components/essay/Edit/index'
+import EssayResult from '@instructure/quiz-interactions/components/essay/Result/index'
+import EssayShow from '@instructure/quiz-interactions/components/essay/Show/index'
+import EssayTake from '@instructure/quiz-interactions/components/essay/Take/index'
+
+import FillBlankEdit from '@instructure/quiz-interactions/components/fill_blank/Edit/index'
+import FillBlankShow from '@instructure/quiz-interactions/components/fill_blank/Show/index'
+import FillBlankTake from '@instructure/quiz-interactions/components/fill_blank/Take/index'
+import FillBlankResult from '@instructure/quiz-interactions/components/fill_blank/Result/index'
+
+import RichFillBlankEdit from '@instructure/quiz-interactions/components/rich_fill_blank/Edit/index'
+import RichFillBlankShow from '@instructure/quiz-interactions/components/rich_fill_blank/Show/index'
+import RichFillBlankTake from '@instructure/quiz-interactions/components/rich_fill_blank/Take/index'
+import RichFillBlankResult from '@instructure/quiz-interactions/components/rich_fill_blank/Result/index'
+
+import FileUploadEdit from '@instructure/quiz-interactions/components/file_upload/Edit/index'
+import FileUploadShow from '@instructure/quiz-interactions/components/file_upload/Show/index'
+import FileUploadTake from '@instructure/quiz-interactions/components/file_upload/Take/index'
+import FileUploadResult from '@instructure/quiz-interactions/components/file_upload/Result/index'
+
+import FormulaEdit from '@instructure/quiz-interactions/components/formula/Edit/index'
+import FormulaShow from '@instructure/quiz-interactions/components/formula/Show/index'
+import FormulaTake from '@instructure/quiz-interactions/components/formula/Take/index'
+import FormulaResult from '@instructure/quiz-interactions/components/formula/Result/index'
+
+import MatchingEdit from '@instructure/quiz-interactions/components/matching/Edit/index'
+import MatchingShow from '@instructure/quiz-interactions/components/matching/Show/index'
+import MatchingTake from '@instructure/quiz-interactions/components/matching/Take/index'
+import MatchingResult from '@instructure/quiz-interactions/components/matching/Result/index'
+
+import MultipleAnswerEdit from '@instructure/quiz-interactions/components/multiple_answer/Edit/index'
+import MultipleAnswerResult from '@instructure/quiz-interactions/components/multiple_answer/Result/index'
+import MultipleAnswerShow from '@instructure/quiz-interactions/components/multiple_answer/Show/index'
+import MultipleAnswerTake from '@instructure/quiz-interactions/components/multiple_answer/Take/index'
+
+import MultipleChoiceEdit from '@instructure/quiz-interactions/components/multiple_choice/Edit/index'
+import MultipleChoiceResult from '@instructure/quiz-interactions/components/multiple_choice/Result/index'
+import MultipleChoiceShow from '@instructure/quiz-interactions/components/multiple_choice/Show/index'
+import MultipleChoiceTake from '@instructure/quiz-interactions/components/multiple_choice/Take/index'
+
+import NumericEdit from '@instructure/quiz-interactions/components/numeric/Edit/index'
+import NumericResult from '@instructure/quiz-interactions/components/numeric/Result/index'
+import NumericShow from '@instructure/quiz-interactions/components/numeric/Show/index'
+import NumericTake from '@instructure/quiz-interactions/components/numeric/Take/index'
+
+import TrueFalseEdit from '@instructure/quiz-interactions/components/true_false/Edit/index'
+import TrueFalseResult from '@instructure/quiz-interactions/components/true_false/Result/index'
+import TrueFalseShow from '@instructure/quiz-interactions/components/true_false/Show/index'
+import TrueFalseTake from '@instructure/quiz-interactions/components/true_false/Take/index'
+
+import OrderingEdit from '@instructure/quiz-interactions/components/ordering/Edit/index'
+import OrderingResult from '@instructure/quiz-interactions/components/ordering/Result/index'
+import OrderingShow from '@instructure/quiz-interactions/components/ordering/Show/index'
+import OrderingTake from '@instructure/quiz-interactions/components/ordering/Take/index'
+
+import CategorizationEdit from '@instructure/quiz-interactions/components/categorization/Edit/index'
+import CategorizationTake from '@instructure/quiz-interactions/components/categorization/Take/index'
+import CategorizationShow from '@instructure/quiz-interactions/components/categorization/Show/index'
+import CategorizationResult from '@instructure/quiz-interactions/components/categorization/Result/index'
+
+import HotSpotEdit from '@instructure/quiz-interactions/components/hotspot/Edit/index'
+import HotSpotShow from '@instructure/quiz-interactions/components/hotspot/Show/index'
+import HotSpotTake from '@instructure/quiz-interactions/components/hotspot/Take/index'
+import HotSpotResult from '@instructure/quiz-interactions/components/hotspot/Result/index'
+
+const interactions = {
+  EssayEdit,
+  EssayResult,
+  EssayShow,
+  EssayTake,
+  FillBlankEdit,
+  FillBlankShow,
+  FillBlankTake,
+  FillBlankResult,
+  RichFillBlankEdit,
+  RichFillBlankShow,
+  RichFillBlankTake,
+  RichFillBlankResult,
+  FileUploadEdit,
+  FileUploadShow,
+  FileUploadTake,
+  FileUploadResult,
+  FormulaEdit,
+  FormulaShow,
+  FormulaTake,
+  FormulaResult,
+  MatchingEdit,
+  MatchingShow,
+  MatchingTake,
+  MatchingResult,
+  MultipleAnswerEdit,
+  MultipleAnswerResult,
+  MultipleAnswerShow,
+  MultipleAnswerTake,
+  MultipleChoiceEdit,
+  MultipleChoiceResult,
+  MultipleChoiceShow,
+  MultipleChoiceTake,
+  NumericEdit,
+  NumericResult,
+  NumericShow,
+  NumericTake,
+  TrueFalseEdit,
+  TrueFalseResult,
+  TrueFalseShow,
+  TrueFalseTake,
+  OrderingEdit,
+  OrderingResult,
+  OrderingShow,
+  OrderingTake,
+  CategorizationEdit,
+  CategorizationTake,
+  CategorizationShow,
+  CategorizationResult,
+  HotSpotEdit,
+  HotSpotShow,
+  HotSpotTake,
+  HotSpotResult,
+}
+
+const slugToNameMap = {
+  'multi-answer': 'MultipleAnswer',
+  choice: 'MultipleChoice',
+}
+
+export const componentForItem = (intTypeSlug, usage) => {
+  let componentKey = slugToNameMap[intTypeSlug]
+  if (!componentKey) {
+    componentKey = pascalize(intTypeSlug)
+  }
+
+  const normalizedUsage = pascalize(usage.toLowerCase())
+  const componentName = componentKey + normalizedUsage
+  const component = interactions[componentName]
+  if (!component) {
+    throw new Error(`Unable to find component: ${componentName}`)
+  }
+  return component
+}
+
+export default componentForItem

package/src/common/util/crossDomainMessaging.js

@@ -0,0 +1,5 @@
+export function postToParent(messageData, windowObject = window) {
+  if (windowObject.parent) {
+    windowObject.parent.postMessage(messageData, '*')
+  }
+}

package/src/common/util/debounceLatestPromise.js

@@ -0,0 +1,21 @@
+import debounce from 'lodash/debounce'
+
+export default (f, ms) => {
+  let waiting = null
+
+  let ready = (...args) => {
+    let old = waiting
+    f(...args)
+      .then(r => old.resolve(r))
+      .catch(e => old.reject(e))
+    waiting = null
+  }
+
+  const debouncedThunk = debounce(ready, ms)
+
+  return (...args) => {
+    const promise = new Promise((resolve, reject) => (waiting = {resolve, reject}))
+    debouncedThunk(...args)
+    return promise
+  }
+}

package/src/common/util/featureCheck.js

@@ -0,0 +1,44 @@
+import {List} from 'immutable'
+
+import {addFeatures, removeFeatures} from '../actions/features'
+
+// These functions are called by consumer apps (e.g. Page component) that
+// don't have direct access to the SDK store's dispatch.  They accept an
+// optional dispatch/getState; when omitted they fall back to the store
+// registered via setStoreProvider (set by SDKApp on mount).
+let _storeProvider = null
+
+export function setFeatureCheckStoreProvider(store) {
+  _storeProvider = store
+}
+
+function getDispatch(dispatch) {
+  if (typeof dispatch === 'function') return dispatch
+  if (_storeProvider) return _storeProvider.dispatch
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn(
+      'featureCheck: no store provider available. Was setFeatureCheckStoreProvider() called?',
+    )
+  }
+  return () => {}
+}
+
+function getState(getStateFn) {
+  if (typeof getStateFn === 'function') return getStateFn()
+  if (_storeProvider) return _storeProvider.getAppState()
+  return List()
+}
+
+export function featureOn(featureName, getStateFn) {
+  const state = getState(getStateFn)
+  const features = (state && state.features) || List()
+  return features.includes(featureName)
+}
+
+export function setFeatures(featuresList, dispatch) {
+  getDispatch(dispatch)(addFeatures(featuresList))
+}
+
+export function unsetFeatures(featuresList, dispatch) {
+  getDispatch(dispatch)(removeFeatures(featuresList))
+}

package/src/common/util/fetchHelpers.js

@@ -0,0 +1,7 @@
+export function status(response) {
+  if (response && response.status >= 200 && response.status < 300) {
+    return Promise.resolve(response)
+  } else {
+    return Promise.reject(new Error(response && response.statusText))
+  }
+}

package/src/common/util/fitbCopyHelper.js

@@ -0,0 +1,39 @@
+import {List, Map} from 'immutable'
+
+// https://stackoverflow.com/questions/18749591/encode-html-entities-in-javascript
+function htmlEncode(input) {
+  return input.replace(/[\u00A0-\u9999<>&]/g, i => {
+    return '&#' + i.charCodeAt(0) + ';'
+  })
+}
+
+export function convertFITBtoRich(interactionTypeData, richFITBInteractionID) {
+  const {interactionData, scoringData} = interactionTypeData
+  const sortedStemItems = interactionData
+    .get('stemItems')
+    .sort((a, b) => a.get('position') - b.get('position'))
+  const workingItemBody = sortedStemItems.reduce((itemBody, stemItem) => {
+    if (stemItem.get('type') === 'text') {
+      return itemBody + htmlEncode(stemItem.get('value', ''))
+    } else {
+      const blankScoringData =
+        scoringData
+          .get('value', List())
+          .find(blank => blank.get('id') === stemItem.get('blankId')) || Map()
+      const blankText = blankScoringData.getIn(['scoringData', 'blankText'], '')
+      return itemBody + `\`${htmlEncode(blankText)}\``
+    }
+  }, '')
+
+  return Object.assign({}, interactionTypeData, {
+    id: richFITBInteractionID,
+    itemBody: '',
+    interactionData: {
+      blanks: interactionData.get('blanks', []),
+    },
+    scoringData: {
+      workingItemBody: `${interactionData.get('prompt', '')}<p>${workingItemBody}</p>`,
+      value: scoringData.get('value', []),
+    },
+  })
+}

package/src/common/util/formatTimespan.js

@@ -0,0 +1,64 @@
+import t from '@instructure/quiz-i18n/format-message'
+import {DateTime} from 'luxon'
+
+const minuteDuration = 60
+const hourDuration = 3600
+
+const formatHours = hours => t('{ hours, plural, one {# hour} other {# hours} }', {hours})
+
+const formatMinutes = minutes =>
+  t('{ minutes, plural, one {# minute} other {# minutes} }', {minutes})
+
+const formatSeconds = seconds =>
+  t('{ seconds, plural, one {# second} other {# seconds} }', {seconds})
+
+export const formatTimespan = (startTime, endTime) => {
+  return formatTime(endTime - startTime, 1000)
+}
+
+export function formatTime(time, secondDuration = 1) {
+  const totalSeconds = Math.floor(time / secondDuration)
+  const parts = []
+
+  const hours = Math.floor(totalSeconds / hourDuration)
+  if (hours !== 0) {
+    parts.push(formatHours(hours))
+  }
+
+  const minutes = Math.floor(totalSeconds / minuteDuration) % minuteDuration
+  if (minutes !== 0) {
+    parts.push(formatMinutes(minutes))
+  }
+
+  const seconds = totalSeconds % minuteDuration
+  if (seconds !== 0 || parts.length === 0) {
+    parts.push(formatSeconds(seconds))
+  }
+
+  const separator = t({
+    id: 'timespan_segment_separator',
+    default: ' ',
+    description:
+      'The character(s) inserted between "5 minutes" and "30 seconds" in ' +
+      'a timespan string like "5 minutes 30 seconds"',
+  })
+  return parts.join(separator)
+}
+
+export function formatTimeToFullNumeric(seconds) {
+  const hours = Math.floor(seconds / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+  const secs = seconds % 60
+
+  const hoursStr = hours < 10 ? '0' + hours : hours
+  const minutesStr = minutes < 10 ? '0' + minutes : minutes
+  const secsStr = secs < 10 ? '0' + secs : secs
+
+  return `${hoursStr}:${minutesStr}:${secsStr}`
+}
+
+export function displayDateAndTimeInTimezone(utcDateTime, userTimezone, locale) {
+  return DateTime.fromISO(utcDateTime, {zone: userTimezone})
+    .setLocale(locale)
+    .toLocaleString(DateTime.DATETIME_MED)
+}

package/src/common/util/generateDisplayPositions.js

@@ -0,0 +1,20 @@
+export function generateDisplayPositions(records, asMap = false) {
+  const positionTuples = []
+  const positionMap = {}
+  let displayPosition = 1
+
+  for (let i = 0; i < records.size; i++) {
+    const record = records.get(i)
+    positionTuples.push({displayPosition, record})
+    positionMap[record.id] = displayPosition
+    // stimuli or bank_entries that are stimuli
+    if (record.hasNestedRecords) {
+      i += record.positionSlots
+    }
+    displayPosition += record.displayPositionSlots
+  }
+
+  return asMap ? positionMap : positionTuples
+}
+
+export default generateDisplayPositions

package/src/common/util/getClientIpAddress.js

@@ -0,0 +1,12 @@
+import Fetcher from './Fetcher'
+
+export const getClientIpAddress = async (quizSessionId, fetcher = new Fetcher()) => {
+  try {
+    const url = `/api/quiz_sessions/${quizSessionId}/get_ip_address`
+    const {ip} = await fetcher.get(url)
+    return ip
+  } catch (e) {
+    console.error(e)
+    return null
+  }
+}

package/src/common/util/httpHeaders.js

@@ -0,0 +1,17 @@
+export const jsonHeaders = {
+  Accept: 'application/json',
+  'Content-Type': 'application/json',
+}
+
+export const jwtHeader = token => {
+  if (token) {
+    return {
+      Authorization: token,
+      AuthType: 'Signature',
+    }
+  }
+}
+
+export const httpHeaders = token => {
+  return Object.assign({}, jsonHeaders, jwtHeader(token))
+}

package/src/common/util/immutableHelpers.js

@@ -0,0 +1,20 @@
+import {Map} from 'immutable'
+
+export const keyBy = (immutableList, keyAttr) => {
+  return immutableList.reduce((keyedMap, i) => {
+    return keyedMap.set(i.get(keyAttr), i)
+  }, Map())
+}
+
+// Remove any undefined values
+export const compact = immutableList => {
+  return immutableList.filter(i => !!i)
+}
+
+// Deep merge Maps, but not Lists or other Collections
+export const mergeDeepOnlyMaps = (oldVal, newVal, key) => {
+  if (Map.isMap(oldVal) && Map.isMap(newVal)) {
+    return oldVal.mergeWith(mergeDeepOnlyMaps, newVal)
+  }
+  return newVal
+}

package/src/common/util/instUIMessages.js

@@ -0,0 +1,5 @@
+export const toErrors = errorMessages => {
+  return errorMessages.map(e => {
+    return {text: e, type: 'error'}
+  })
+}

package/src/common/util/interactionTypeMetadata.js

@@ -0,0 +1,52 @@
+// TODO: Add correct icon file imports when they are in inst icons
+// import { MultipleChoiceIcon } from '@instructure/ui-icons'
+// import { MultipleAnswerIcon } from '@instructure/ui-icons'
+// import { TrueOrFalseIcon } from '@instructure/ui-icons'
+// import { MatchingIcon } from '@instructure/ui-icons'
+// import { OrderingIcon } from '@instructure/ui-icons'
+// import { FillBlankIcon } from '@instructure/ui-icons'
+// import { EssayIcon } from '@instructure/ui-icons'
+import {IconPlusLine} from '@instructure/ui-icons'
+import t from '@instructure/quiz-i18n/format-message'
+
+const interactionTypesIconDictionary = intType => {
+  return (
+    {
+      // TODO: Uncomment when we have the icons imported
+      // 'choice': MultipleChoiceIcon,
+      // 'multi-answer': MultipleAnswerIcon,
+      // 'true-false': TrueOrFalseIcon,
+      // 'matching': MatchingIcon,
+      // 'ordering': OrderingIcon,
+      // 'fill-blank': FillBlankIcon,
+      // 'essay': EssayIcon
+    }[intType.slug] || IconPlusLine
+  )
+}
+
+export const interactionTypesNameDictionary = intType => {
+  return (
+    {
+      categorization: t('Categorization'),
+      choice: t('Multiple Choice'),
+      essay: t('Essay'),
+      'file-upload': t('File Upload'),
+      'fill-blank': t('Fill in the Blank'),
+      formula: t('Formula'),
+      'hot-spot': t('Hot Spot'),
+      matching: t('Matching'),
+      'multi-answer': t('Multiple Answer'),
+      numeric: t('Numeric'),
+      ordering: t('Ordering'),
+      'rich-fill-blank': t('Fill in the Blank'),
+      'true-false': t('True or False'),
+    }[intType.slug] || intType.name
+  )
+}
+
+export const interactionTypeMetadata = intType => {
+  return {
+    icon: interactionTypesIconDictionary(intType),
+    name: interactionTypesNameDictionary(intType),
+  }
+}