@instructure/quiz-core 22.17.0 → 22.18.0

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

@@ -0,0 +1,439 @@
+/** @jsx jsx */
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import partial from 'lodash/partial'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import Immutable from 'immutable'
+import {IconEditLine, IconPlusLine, IconCopyLine, IconTrashLine} from '@instructure/ui-icons'
+import {IconButton} from '@instructure/ui-buttons'
+import {Text} from '@instructure/ui-text'
+import {List} from '@instructure/ui-list'
+import {Heading} from '@instructure/ui-heading'
+import {Alert} from '@instructure/ui-alerts'
+import {jsx} from '@instructure/emotion'
+import {
+  BUILD_TRAY_POSITION,
+  COPY_MOVE_BANK_ENTRY_MODAL,
+  SET_EDIT_BUTTON_FOCUS,
+} from '@instructure/quiz-common/constants'
+import {withI18nSupport} from '@instructure/quiz-common/with-i18n-support'
+import {withStyleOverrides} from '@instructure/quiz-common/util/withStyleOverrides'
+import {RichContentRenderer} from '@instructure/quiz-rce/components/RichContentRenderer/index'
+
+import extractTextFromHtml from '@instructure/quiz-interactions/util/extractTextFromHtml'
+import t from '@instructure/quiz-i18n/format-message'
+
+import CopyMoveBankEntryModal from '../CopyMoveBankEntryModal'
+import ExpandButton from '../../../common/components/shared/ExpandButton'
+import QuizEntry from '../../../common/records/QuizEntry'
+import ItemShow from '../../../common/components/resources/item/ItemShow'
+import StimulusShowInfo from '../../../common/components/resources/stimulus/StimulusShowInfo'
+import TagDisplay from '../../../common/components/shared/TagDisplay'
+import generateStyle from './styles'
+import generateComponentTheme from './theme'
+import Overlay from '../../../common/components/shared/overlay'
+
+@withStyleOverrides(generateStyle, generateComponentTheme)
+export class BankEntryRow extends withI18nSupport(Component) {
+  static displayName = 'BankEntryRow'
+  static componentId = `Quizzes${this.displayName}`
+
+  static propTypes = {
+    activeQuizId: PropTypes.string,
+    addEntryToQuiz: PropTypes.func,
+    bankEntry: ImmutablePropTypes.record.isRequired,
+    bank: ImmutablePropTypes.record.isRequired,
+    clearUi: PropTypes.func.isRequired,
+    createItem: PropTypes.func.isRequired,
+    createStimulus: PropTypes.func.isRequired,
+    isQuizContentLocked: PropTypes.bool.isRequired,
+    isExpanded: PropTypes.bool,
+    navigateToBankEntry: PropTypes.func.isRequired,
+    openModal: PropTypes.func.isRequired,
+    position: PropTypes.number,
+    removeBankEntry: PropTypes.func.isRequired,
+    screenreaderNotification: PropTypes.func.isRequired,
+    setEditButtonFocus: PropTypes.bool,
+    setUi: PropTypes.func.isRequired,
+    stimulusId: PropTypes.string,
+    tagAssociations: ImmutablePropTypes.listOf(ImmutablePropTypes.map),
+    useBankTags: PropTypes.bool.isRequired,
+    toggleExpanded: PropTypes.func.isRequired,
+    withConfirm: PropTypes.func.isRequired,
+    locale: PropTypes.string,
+    timezone: PropTypes.string,
+    styles: PropTypes.object,
+  }
+
+  static defaultProps = {
+    activeQuizId: null,
+    addEntryToQuiz: null,
+    stimulusId: null,
+    isQuizContentLocked: false,
+    isExpanded: false,
+    position: 0,
+    setEditButtonFocus: false,
+    tagAssociations: Immutable.List(),
+    locale: null,
+    timezone: null,
+  }
+
+  static contextTypes = {
+    locale: PropTypes.string,
+    timezone: PropTypes.string,
+  }
+
+  componentDidMount() {
+    if (this.props.bankEntry.id === this.props.setEditButtonFocus) {
+      this.editButton.focus()
+      this.props.clearUi(SET_EDIT_BUTTON_FOCUS)
+    }
+  }
+
+  getEntry() {
+    return this.props.bankEntry.getEntry()
+  }
+
+  isItemEntry() {
+    return this.props.bankEntry.entryType === 'Item'
+  }
+
+  isStimulusEntry() {
+    return this.props.bankEntry?.isStimulusEntry
+  }
+
+  isPassageEntry() {
+    return this.props.bankEntry?.isPassageEntry
+  }
+
+  type() {
+    if (this.isStimulusEntry()) {
+      return t('Stimulus')
+    }
+    if (this.isPassageEntry()) {
+      return t('Text Block')
+    }
+    return t('Question')
+  }
+
+  entryIdentifier() {
+    const title = this.getEntry().title
+    if (this.isStimulusEntry()) {
+      return t('Stimulus { title }', {title: title})
+    }
+    if (this.isPassageEntry()) {
+      return t('Text Block { title }', {title: title})
+    }
+    return t('Question { itemBody }', {itemBody: extractTextFromHtml(title)})
+  }
+
+  getDeletePreface() {
+    if (this.isStimulusEntry()) {
+      return t('Deleting this stimulus:')
+    }
+    if (this.isPassageEntry()) {
+      return t('Deleting this text block:')
+    }
+    return t('Deleting this question:')
+  }
+
+  moveModalTitle() {
+    return t('Copy / Move {type}', {type: this.type()})
+  }
+
+  incrementPosition = () => {
+    this.props.setUi(BUILD_TRAY_POSITION, this.props.position + 1)
+  }
+
+  deleteBankEntry = () => {
+    const confirmBody = (
+      <Alert variant="error" padding="0">
+        <div css={this.props.styles.deleteAlert}>
+          <div css={this.props.styles.deletePreface}>{this.getDeletePreface()}</div>
+          <List>
+            <List.Item>
+              {t.rich('will <0>NOT</0> remove it from any assessments', [
+                ({children}) => (
+                  <Text weight="bold" key="0">
+                    {children}
+                  </Text>
+                ),
+              ])}
+            </List.Item>
+            <List.Item>{t('will lose its statistical link in reporting')}</List.Item>
+            <List.Item>
+              {t('will remove access for all users with whom this bank has been shared')}
+            </List.Item>
+          </List>
+        </div>
+      </Alert>
+    )
+
+    this.props.withConfirm(
+      partial(this.props.removeBankEntry, this.props.bank.id, this.props.bankEntry.id),
+      {
+        title: t('Delete {type}', {type: this.type()}),
+        text: confirmBody,
+        continueText: t('Delete'),
+        continueVariant: 'danger',
+        size: 'medium',
+      },
+    )
+  }
+
+  renderExpandButton() {
+    const type = this.type()
+    const title = this.props.isExpanded
+      ? t('Collapse {type} details', {type})
+      : t('Expand {type} details', {type})
+    return (
+      <div css={this.props.styles.expandButtonContainer}>
+        <ExpandButton
+          onClick={this.props.toggleExpanded}
+          title={title}
+          isExpanded={this.props.isExpanded}
+          data-automation="expand-bank-question-button"
+        />
+      </div>
+    )
+  }
+
+  addToQuiz = () => {
+    if (this.props.activeQuizId) {
+      const newEntry = QuizEntry.create({
+        entryId: this.props.bankEntry.id,
+        entryType: 'BankEntry',
+        position: this.props.position,
+        stimulusQuizEntryId: this.props.stimulusId,
+      })
+      this.props
+        .addEntryToQuiz(
+          this.props.activeQuizId,
+          newEntry.entryId,
+          newEntry.entryType,
+          newEntry.getProperties(),
+          false,
+        )
+        .then(() => {
+          this.props.screenreaderNotification(t('Bank Entry was successfully added to the quiz'))
+        })
+      if (this.props.position) this.incrementPosition()
+    }
+  }
+
+  openCopyMoveBankEntryModal = () => {
+    this.props.openModal(
+      [
+        COPY_MOVE_BANK_ENTRY_MODAL,
+        this.props.bankEntry.entryType,
+        this.props.bankEntry.entry.toJS().id,
+      ].join(':'),
+      {modalTrigger: this.copyMoveBankEntryButton},
+    )
+  }
+
+  createEntryForBank = () => {
+    const createEntry = this.isItemEntry() ? this.props.createItem : this.props.createStimulus
+    return createEntry(this.getEntry(), this.props.bank.id, 'bank')
+  }
+
+  storeCopyMoveBankEntryButtonRef = c => {
+    this.copyMoveBankEntryButton = c
+  }
+
+  storeEditButtonRef = c => {
+    this.editButton = c
+  }
+
+  renderAddButton() {
+    if (!this.props.isQuizContentLocked && this.props.addEntryToQuiz) {
+      const title = t('Add {type} to this quiz', {type: this.type()})
+      return (
+        <div css={[this.props.styles.buttons, this.props.styles.addButton]}>
+          <IconButton
+            color="primary"
+            shape="circle"
+            size="small"
+            onClick={this.addToQuiz}
+            data-automation="sdk-add-bank-entry-button"
+            disabled={this.props.bankEntry.isStimulus && this.props.stimulusId !== null}
+            renderIcon={IconPlusLine}
+            title={title}
+            screenReaderLabel={title}
+          />
+        </div>
+      )
+    }
+    // This empty div is necessary for spacing
+    return <div />
+  }
+
+  renderMoveButton() {
+    const title = this.moveModalTitle()
+    return (
+      <IconButton
+        ref={this.storeCopyMoveBankEntryButtonRef}
+        size="medium"
+        withBackground={false}
+        withBorder={false}
+        onClick={this.openCopyMoveBankEntryModal}
+        data-automation="sdk-copy-move-bank-entry-button"
+        renderIcon={IconCopyLine}
+        title={title}
+        screenReaderLabel={title}
+      />
+    )
+  }
+
+  renderTrashButton = () => {
+    const title = t('Delete {type}', {type: this.type()})
+    return (
+      <IconButton
+        size="medium"
+        withBackground={false}
+        withBorder={false}
+        onClick={this.deleteBankEntry}
+        data-automation="sdk-delete-bank-entry-button"
+        renderIcon={IconTrashLine}
+        title={title}
+        screenReaderLabel={title}
+      />
+    )
+  }
+
+  entryHeader() {
+    const entry = this.getEntry()
+    if (this.isItemEntry()) {
+      return entry.getInteractionType().name
+    } else {
+      return entry.isPassage ? t('Text Block') : t('Stimulus')
+    }
+  }
+
+  renderHeader() {
+    return (
+      <div>
+        <div css={this.props.styles.headerRow}>
+          {this.renderAddButton()}
+          <div css={this.props.styles.buttons}>
+            {this.props.bank.canEdit() && (
+              <>
+                {this.renderEditButton()}
+                {this.renderMoveButton()}
+                {this.renderTrashButton()}
+              </>
+            )}
+            {this.renderExpandButton()}
+          </div>
+        </div>
+        <div css={this.props.styles.headerText}>
+          <Heading level="reset" as="h2">
+            {t('{entryHeader} | {entryIdentifier}', {
+              entryHeader: this.entryHeader(),
+              entryIdentifier: this.entryIdentifier(),
+            })}
+          </Heading>
+        </div>
+      </div>
+    )
+  }
+
+  renderEntryCollapsed() {
+    const itemOrStimulus = this.getEntry()
+
+    // render item's body as html
+    // or title plain text
+    if (itemOrStimulus.itemBody) {
+      return (
+        <RichContentRenderer
+          customStyles={this.props.styles.stem}
+          content={itemOrStimulus.itemBody}
+        />
+      )
+    } else {
+      return <div css={this.props.styles.stem}>{itemOrStimulus.title}</div>
+    }
+  }
+
+  renderEntryExpanded() {
+    const entry = this.getEntry()
+    if (this.isItemEntry()) {
+      return <ItemShow entry={entry} guid={this.props.bankEntry.id} />
+    } else {
+      return <StimulusShowInfo stimulus={entry} />
+    }
+  }
+
+  navigateToBankEntry = () => {
+    this.props.setUi(SET_EDIT_BUTTON_FOCUS, this.props.bankEntry.id)
+    this.props.navigateToBankEntry(this.props.bankEntry.id, this.props.bank.id)
+  }
+
+  renderEditButton() {
+    const title = t('Edit {type}', {type: this.type()})
+    return (
+      <IconButton
+        ref={this.storeEditButtonRef}
+        size="medium"
+        withBackground={false}
+        withBorder={false}
+        onClick={this.navigateToBankEntry}
+        data-automation="sdk-edit-bank-entry-button"
+        renderIcon={IconEditLine}
+        title={title}
+        screenReaderLabel={title}
+      />
+    )
+  }
+
+  renderTags() {
+    if (!this.props.useBankTags) {
+      return null
+    }
+
+    return <TagDisplay tagAssociations={this.props.tagAssociations} />
+  }
+
+  renderFooter() {
+    const lastUpdate = t.rich('<0>Last Update</0> { updatedAt }', {
+      0: ({children}) => (
+        <Text key="lastUpdate" weight="bold" color="primary">
+          {children}
+        </Text>
+      ),
+      updatedAt: this.formatDatetimeMedium(this.props.bankEntry.get('updatedAt')),
+    })
+
+    return (
+      <div css={this.props.styles.footer}>
+        <span>{lastUpdate}</span>
+        {this.renderTags()}
+      </div>
+    )
+  }
+
+  render() {
+    const isExpanded = this.props.isExpanded
+    return (
+      <Overlay onClick={this.props.toggleExpanded} tabIndex="-1" ariaLabel={this.entryIdentifier()}>
+        <div role="group">
+          <div css={this.props.styles.entryDetail} data-automation="sdk-bankEntryItem">
+            {this.renderHeader()}
+            {isExpanded ? this.renderEntryExpanded() : this.renderEntryCollapsed()}
+          </div>
+          {isExpanded && this.renderFooter()}
+        </div>
+        <CopyMoveBankEntryModal
+          createEntry={this.createEntryForBank}
+          label={this.moveModalTitle()}
+          sourceBankId={this.props.bank.id}
+          sourceBankEntryId={this.props.bankEntry.id}
+          entryId={this.props.bankEntry.entry.get('id')}
+          entryType={this.props.bankEntry.entryType}
+        />
+      </Overlay>
+    )
+  }
+}
+
+export default BankEntryRow

package/src/banks/components/BankEntryRow/styles.js

@@ -0,0 +1,58 @@
+const generateStyle = componentTheme => {
+  return {
+    entryDetail: {
+      padding: componentTheme.entryDetailPadding,
+    },
+
+    headerRow: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'flex-start',
+      color: componentTheme.headerRowColor,
+    },
+
+    buttons: {
+      position: 'relative',
+      display: 'inline-flex',
+      zIndex: componentTheme.buttonsZIndex,
+    },
+
+    expandButtonContainer: {
+      borderLeft: `${componentTheme.expandButtonContainerBorderWidth} solid ${componentTheme.expandButtonContainerBorderColor}`,
+    },
+
+    deleteAlert: {
+      display: 'block',
+    },
+
+    deletePreface: {
+      marginBottom: componentTheme.deletePrefaceMargin,
+    },
+
+    addButton: {
+      marginBottom: componentTheme.addButtonMargin,
+    },
+
+    headerText: {
+      color: componentTheme.headerTextColor,
+      fontSize: componentTheme.headerTextFontSize,
+    },
+
+    stem: {
+      fontSize: componentTheme.stemFontSize,
+      lineHeight: componentTheme.stemLineHeight,
+      '& p': {
+        margin: 0,
+      },
+    },
+
+    footer: {
+      padding: componentTheme.footerPadding,
+      borderTop: `${componentTheme.footerBorderWidth} solid ${componentTheme.footerBorderColor}`,
+      fontSize: componentTheme.footerFontSize,
+    },
+  }
+}
+
+export default generateStyle

package/src/banks/components/BankEntryRow/theme.js

@@ -0,0 +1,21 @@
+const generateComponentTheme = ({spacing, colors, borders, typography}) => {
+  return {
+    entryDetailPadding: spacing.small,
+    headerRowColor: colors.contrasts.grey4570,
+    buttonsZIndex: '3333',
+    expandButtonContainerBorderWidth: borders.widthMedium,
+    expandButtonContainerBorderColor: colors.contrasts.grey1214,
+    addButtonMargin: spacing.small,
+    headerTextColor: colors.contrasts.grey4570,
+    headerTextFontSize: typography.fontSizeXSmall,
+    stemFontSize: typography.fontSizeMedium,
+    stemLineHeight: typography.lineHeight,
+    footerPadding: spacing.medium,
+    footerBorderWidth: borders.widthSmall,
+    footerBorderColor: colors.contrasts.grey1214,
+    footerFontSize: typography.fontSizeXSmall,
+    deletePrefaceMargin: spacing.xxSmall,
+  }
+}
+
+export default generateComponentTheme

package/src/banks/components/BankSearch/BankSearch.stories.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import {Map} from 'immutable'
+import BankSearch from './presenter'
+
+const props = {
+  allInteractions: false,
+  showFilters: true,
+  toggleFilters: Function.prototype,
+  toggleAllInteractions: Function.prototype,
+  setFilter: Function.prototype,
+  update: Function.prototype,
+  toggle: Function.prototype,
+}
+
+export default {
+  title: 'BankSearch',
+}
+
+export const withoutSearchTerm = () => <BankSearch {...props} search={Map({text: null})} />
+export const withSearchTerm = () => (
+  <BankSearch {...props} search={Map({text: 'singlewordsearchstring'})} />
+)
+export const withEmptySearchTerm = () => <BankSearch {...props} search={Map({text: ''})} />
+
+const tags = [
+  {
+    id: '1',
+    value: 'Hello',
+  },
+  {
+    id: '2',
+    value: 'World',
+  },
+]
+export const withTags = () => <BankSearch {...props} search={Map({tags})} />

package/src/banks/components/BankSearch/__tests__/index.test.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import {render} from '@testing-library/react'
+import BankSearch from '../index'
+
+describe('connected BankSearch', () => {
+  const ConnectedBankSearch = withContext(BankSearch, {})
+
+  it('renders', () => {
+    render(<ConnectedBankSearch fetchSearchPage={() => {}} />)
+  })
+})

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

@@ -0,0 +1,96 @@
+import {expect, vi} from 'vitest'
+import React from 'react'
+import {Set, fromJS} from 'immutable'
+
+import {render, screen} from '../../../../../tests/util/rtlRenderOverride'
+import runAxeCheck from '@instructure/ui-axe-check'
+
+import {BankSearch} from '../presenter'
+
+describe('BankSearch', () => {
+  const defaultProps = {
+    search: fromJS({interactionTypes: Set(), text: '', tags: []}),
+    showFilters: false,
+    searching: false,
+    toggle: vi.fn(),
+    toggleFilters: vi.fn(),
+    toggleAllInteractions: vi.fn(),
+    update: vi.fn(),
+    setFilter: vi.fn(),
+    screenreaderNotification: vi.fn(),
+  }
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders a search input', () => {
+    render(<BankSearch {...defaultProps} />)
+    expect(screen.getByPlaceholderText('Search')).toBeDefined()
+  })
+
+  it('renders translated interaction types', () => {
+    render(
+      <BankSearch
+        {...defaultProps}
+        showFilters={true}
+        interactionTypes={[
+          {
+            count: 10,
+            interaction_type: {id: '10', name: 'True / False', slug: 'true-false'},
+          },
+          {
+            count: 5,
+            interaction_type: {id: '11', name: 'Multiple Choice', slug: 'choice'},
+          },
+        ]}
+      />,
+    )
+    // The component translates slugs; 'true-false' -> 'True or False'
+    expect(screen.getByText(/True or False/)).toBeDefined()
+    // Two checkboxes for two interaction types
+    const checkboxes = screen.getAllByRole('checkbox')
+    expect(checkboxes).toHaveLength(2)
+  })
+
+  it('hides interaction types until toggled (5 shown)', () => {
+    const interactionTypes = Array.from({length: 10}, (_, i) => ({
+      count: 10,
+      interaction_type: {id: i.toString(), name: 'True / False', slug: 'true-false'},
+    }))
+
+    render(
+      <BankSearch
+        {...defaultProps}
+        showFilters={true}
+        interactionTypes={interactionTypes}
+        allInteractions={false}
+      />,
+    )
+    // Only 5 shown when not expanded
+    expect(screen.getAllByRole('checkbox')).toHaveLength(5)
+  })
+
+  it('shows all interaction types when allInteractions is true', () => {
+    const interactionTypes = Array.from({length: 10}, (_, i) => ({
+      count: 10,
+      interaction_type: {id: i.toString(), name: 'True / False', slug: 'true-false'},
+    }))
+
+    render(
+      <BankSearch
+        {...defaultProps}
+        showFilters={true}
+        interactionTypes={interactionTypes}
+        allInteractions={true}
+      />,
+    )
+    // All 10 shown when expanded
+    expect(screen.getAllByRole('checkbox')).toHaveLength(10)
+  })
+
+  it('should meet a11y standards', async () => {
+    const {container} = render(<BankSearch {...defaultProps} />)
+    expect(await runAxeCheck(container)).toBe(true)
+  })
+})

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

@@ -0,0 +1,28 @@
+import {Map} from 'immutable'
+import BankSearch from './presenter'
+import {connect} from '../../../common/react-redux'
+import {update, setFilter, toggle} from '../../../common/actions/bankSearch'
+import {toggle as toggleUI} from '../../../common/actions/ui'
+import {
+  BANKS_SEARCH_FILTER_KEY,
+  BANKS_TOGGLE_INTERACTIONS_KEY,
+} from '@instructure/quiz-common/constants'
+
+function mapStateToProps(state, props) {
+  const searching = state.ui.get('searching', false)
+  const search = state.bankSearch ?? Map()
+  const showFilters = state.ui.get(BANKS_SEARCH_FILTER_KEY)
+  const allInteractions = state.ui.get(BANKS_TOGGLE_INTERACTIONS_KEY)
+
+  return {allInteractions, searching, search, showFilters}
+}
+
+const mapDispatchToProps = {
+  toggle,
+  toggleFilters: () => toggleUI(BANKS_SEARCH_FILTER_KEY),
+  toggleAllInteractions: () => toggleUI(BANKS_TOGGLE_INTERACTIONS_KEY),
+  setFilter,
+  update,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(BankSearch)