@instructure/quiz-core 22.17.0 → 22.18.0

package/src/common/components/shared/TagSelect/__tests__/index.test.js

@@ -0,0 +1,214 @@
+import {expect, vi} from 'vitest'
+import React from 'react'
+import {runAxeCheck} from '@instructure/ui-axe-check'
+import {render, screen} from '../../../../../../tests/util/rtlRenderOverride'
+import userEvent from '@testing-library/user-event'
+import TagSelect from '../index'
+
+describe('TagSelect', () => {
+  let onChangeStub, onInputChangeStub, props
+
+  beforeEach(() => {
+    onChangeStub = vi.fn()
+    onInputChangeStub = vi.fn()
+    props = {
+      noMatchText: '404 TAG NOT FOUND',
+      onChange: onChangeStub,
+      onInputChange: onInputChangeStub,
+    }
+  })
+
+  it('should render select label', async () => {
+    render(<TagSelect {...props} />)
+
+    expect(screen.getByText('Tags and Metadata')).not.toBeNull()
+  })
+
+  it('should render one selected option', async () => {
+    render(<TagSelect {...props} tags={[{id: '1', value: 'waldo'}]} />)
+
+    expect(screen.getByText('waldo')).not.toBeNull()
+  })
+
+  it('should call onChange when a tag is removed', async () => {
+    render(<TagSelect {...props} tags={[{id: '1', value: 'waldo'}]} />)
+
+    const tag = screen.getByRole('button', {name: /remove waldo/i})
+    userEvent.click(tag)
+
+    expect(onChangeStub).toHaveBeenCalled()
+  })
+
+  it('display empty option when entering text', async () => {
+    render(<TagSelect {...props} />)
+
+    const select = screen.getByRole('combobox', {name: /tags and metadata/i})
+    userEvent.click(select)
+
+    expect(screen.getByText('404 TAG NOT FOUND')).not.toBeNull()
+  })
+
+  it('offers tag creation when text is entered', async () => {
+    render(<TagSelect {...props} allowNewTags />)
+
+    const select = screen.getByRole('combobox', {name: /tags and metadata/i})
+    userEvent.type(select, 'hi')
+
+    const newOption = screen.getByRole('option', {name: /create new tag: hi/i})
+
+    expect(newOption).not.toBeNull()
+
+    userEvent.click(newOption)
+    expect(onChangeStub).toHaveBeenCalledWith([{value: 'hi'}])
+  })
+
+  it('typing space without any previous text is ignored', async () => {
+    render(<TagSelect {...props} allowNewTags />)
+
+    const select = screen.getByRole('combobox', {name: /tags and metadata/i})
+    userEvent.type(select, ' ')
+
+    const firstOption = screen.getAllByRole('option')[0]
+    expect(firstOption).toHaveTextContent('404 TAG NOT FOUND')
+
+    userEvent.click(firstOption)
+    expect(onChangeStub).not.toHaveBeenCalled()
+  })
+
+  it('offers tag creation for a text with a space', async () => {
+    render(<TagSelect {...props} allowNewTags />)
+
+    const select = screen.getByRole('combobox', {name: /tags and metadata/i})
+    userEvent.click(select)
+    userEvent.type(select, 'hi hello')
+
+    const newOption = screen.getByRole('option', {name: /create new tag: hi hello/i})
+    expect(newOption).not.toBeNull()
+
+    userEvent.click(newOption)
+    expect(onChangeStub).toHaveBeenCalledWith([{value: 'hi hello'}])
+  })
+
+  it('does not offer to create a tag that is already selected', async () => {
+    render(<TagSelect {...props} allowNewTags tags={[{value: 'waldo'}]} />)
+
+    const select = screen.getByRole('combobox', {name: /tags and metadata/i})
+    userEvent.click(select)
+    userEvent.type(select, 'waldo')
+
+    const alreadyExistingOption = screen.getByRole('option', {name: /tag already selected: waldo/i})
+    expect(alreadyExistingOption).not.toBeNull()
+
+    userEvent.click(alreadyExistingOption)
+    expect(onChangeStub).not.toHaveBeenCalled()
+  })
+
+  it('does not offer to create a tag that only differs inner space count from an already selected', async () => {
+    render(<TagSelect {...props} allowNewTags tags={[{value: 'waldo waldo'}]} />)
+
+    const select = screen.getByRole('combobox', {name: /tags and metadata/i})
+    userEvent.click(select)
+    userEvent.type(select, 'waldo       waldo')
+
+    const alreadyExistingOption = screen.getByRole('option', {
+      name: /tag already selected: waldo waldo/i,
+    })
+    expect(alreadyExistingOption).not.toBeNull()
+
+    userEvent.click(alreadyExistingOption)
+    expect(onChangeStub).not.toHaveBeenCalled()
+  })
+
+  it('does not offer to create a tag that only differs extra space from an already selected', async () => {
+    render(<TagSelect {...props} allowNewTags tags={[{value: 'waldo'}]} />)
+
+    const select = screen.getByRole('combobox', {name: /tags and metadata/i})
+    userEvent.click(select)
+    userEvent.type(select, 'waldo ') // note the extra space at the end
+
+    const alreadyExistingOption = screen.getByRole('option', {
+      name: /tag already selected: waldo/i,
+    })
+    expect(alreadyExistingOption).not.toBeNull()
+
+    userEvent.click(alreadyExistingOption)
+    expect(onChangeStub).not.toHaveBeenCalled()
+  })
+
+  it('removes last tag if input is empty and backspace is pressed', async () => {
+    render(<TagSelect {...props} tags={[{value: 'waldo'}]} />)
+
+    const select = screen.getByRole('combobox', {name: /tags and metadata/i})
+    userEvent.click(select)
+    userEvent.type(select, '{backspace}')
+
+    expect(onChangeStub).toHaveBeenCalledWith([])
+  })
+
+  it('offers all tag suggestions', () => {
+    render(
+      <TagSelect
+        {...props}
+        tagSuggestions={[
+          {id: '1', value: 'tag-1'},
+          {id: '2', value: 'tag-2'},
+        ]}
+      />,
+    )
+
+    const select = screen.getByRole('combobox', {name: /tags and metadata/i})
+    userEvent.click(select)
+
+    expect(screen.getByText('tag-1')).not.toBeNull()
+    expect(screen.getByText('tag-2')).not.toBeNull()
+  })
+
+  it('does not offer tag creation on suggested tags', async () => {
+    render(<TagSelect {...props} allowNewTags tagSuggestions={[{id: '1', value: 'tag-1'}]} />)
+
+    const select = screen.getByRole('combobox', {name: /tags and metadata/i})
+    userEvent.click(select)
+
+    expect(screen.queryByText(/create new tag/i)).toBeNull()
+  })
+
+  it('does not offer already selected tags as suggestions', async () => {
+    render(
+      <TagSelect
+        {...props}
+        allowNewTags
+        tags={[{id: '1', value: 'tag-1'}]}
+        tagSuggestions={[
+          {id: '1', value: 'tag-1'},
+          {id: '2', value: 'tag-2'},
+        ]}
+      />,
+    )
+
+    const select = screen.getByRole('combobox', {name: /tags and metadata/i})
+    userEvent.click(select)
+
+    const optionsList = screen.getByRole('listbox')
+    const text = optionsList.textContent
+    expect(text).toContain('tag-2')
+    expect(text).not.toContain('tag-1')
+  })
+
+  it('does not remove existing tag with text matching the tag id', async () => {
+    render(
+      <TagSelect
+        {...props}
+        tags={[{value: 'waldo'}]}
+        tagSuggestions={[{id: '1', value: 'tag-1'}]}
+      />,
+    )
+
+    expect(screen.getByText('waldo')).not.toBeNull()
+  })
+
+  it('should meet a11y standards', async () => {
+    const {container} = render(<TagSelect {...props} />)
+
+    expect(await runAxeCheck(container)).toBe(true)
+  })
+})

package/src/common/components/shared/TagSelect/index.js

@@ -0,0 +1,3 @@
+import TagSelect from './presenter'
+
+export default TagSelect

package/src/common/components/shared/TagSelect/presenter.js

@@ -0,0 +1,228 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+
+import TagWrapper from '../TagWrapper'
+import differenceBy from 'lodash/differenceBy'
+
+import t from '@instructure/quiz-i18n/format-message'
+
+import {SELECT_EMPTY_OPTION} from '@instructure/quiz-common/constants'
+import {Select} from '@instructure/quiz-common/components/Select/index'
+
+const tagShape = PropTypes.shape({
+  id: PropTypes.string,
+  value: PropTypes.string.isRequired,
+})
+
+export class TagSelect extends Component {
+  static propTypes = {
+    allowNewTags: PropTypes.bool,
+    noMatchText: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onInputChange: PropTypes.func.isRequired,
+    tagSuggestions: PropTypes.arrayOf(tagShape),
+    tags: PropTypes.arrayOf(tagShape),
+  }
+
+  static defaultProps = {
+    allowNewTags: true,
+    tags: [],
+    tagSuggestions: [],
+  }
+
+  state = {
+    inputValue: '',
+    isShowingOptions: false,
+    highlightedOptionId: null,
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.tagSuggestions !== this.props.tagSuggestions) {
+      this.setState({
+        highlightedOptionId:
+          this.props.tagSuggestions.length > 0
+            ? this.encodeTag(this.props.tagSuggestions[0])
+            : null,
+      })
+    }
+  }
+
+  setInputRef = inputRef => {
+    this.inputRef = inputRef
+  }
+
+  encodeTag(tag) {
+    return String(tag.id) + ' ' + tag.value
+  }
+
+  decodeTag(encodedTag) {
+    const parts = encodedTag.split(' ')
+    const id = parts.shift()
+
+    return {
+      id: id !== 'undefined' ? id : undefined,
+      value: parts.join(' '),
+    }
+  }
+
+  normalizeSpaces(text) {
+    return text.replace(/  +/g, ' ').trim()
+  }
+
+  handleShowOptions = () => {
+    this.setState({isShowingOptions: true})
+  }
+
+  handleHideOptions = () => {
+    this.setState({isShowingOptions: false})
+  }
+
+  handleBlur = () => {
+    this.setState({highlightedOptionId: null})
+  }
+
+  handleHighlightOption = (event, {id}) => {
+    event.persist()
+    const tag = this.decodeTag(id)
+    this.setState(state => ({
+      highlightedOptionId: id,
+      inputValue: event.type === 'keydown' ? tag.value : state.inputValue,
+    }))
+  }
+
+  handleSelectOption = (event, {id}) => {
+    if (id === SELECT_EMPTY_OPTION) return
+
+    const tag = this.decodeTag(id)
+    this.props.onChange([...this.props.tags, tag.id ? tag : {value: tag.value}])
+    this.setState({
+      highlightedOptionId: null,
+      inputValue: '',
+      isShowingOptions: false,
+    })
+  }
+
+  handleInputChange = event => {
+    const inputValue = event.target.value !== ' ' ? event.target.value : ''
+    this.props.onInputChange(inputValue === '' ? null : inputValue)
+    this.setState({
+      inputValue,
+      isShowingOptions: true,
+    })
+  }
+
+  handleKeyDown = event => {
+    const {inputValue} = this.state
+
+    if (event.keyCode === 8) {
+      // when backspace key is pressed
+      if (inputValue === '' && this.props.tags.length > 0) {
+        // remove last selected option, if input has no entered text
+        this.props.onChange(this.props.tags.slice(0, -1))
+        this.setState({highlightedOptionId: null})
+      }
+    }
+  }
+
+  dismissTag = encodedTag => {
+    const tags = this.props.tags.filter(tag => this.encodeTag(tag) !== encodedTag)
+    this.props.onChange(tags)
+    this.setState(
+      {
+        highlightedOptionId: null,
+      },
+      () => {
+        this.inputRef.focus()
+      },
+    )
+  }
+
+  renderTags() {
+    const {tags} = this.props
+
+    return tags.map((tag, index) => (
+      <TagWrapper
+        key={this.encodeTag(tag)}
+        id={this.encodeTag(tag)}
+        index={index}
+        text={tag.value}
+        onClick={this.dismissTag}
+      />
+    ))
+  }
+
+  emptyOption() {
+    const {tags, noMatchText} = this.props
+    const inputValue = this.normalizeSpaces(this.state.inputValue)
+    const exists = t('Tag already selected: { text }', {text: inputValue})
+    return tags.some(tag => tag.value === inputValue) ? exists : noMatchText
+  }
+
+  options() {
+    const {allowNewTags, tags, tagSuggestions} = this.props
+    const notSelectedTagSuggestions = differenceBy(tagSuggestions, tags, 'value')
+    const options = notSelectedTagSuggestions.map(tag => {
+      return (
+        <Select.Option
+          key={this.encodeTag(tag)}
+          id={this.encodeTag(tag)}
+          isHighlighted={this.encodeTag(tag) === this.state.highlightedOptionId}
+        >
+          {tag.value}
+        </Select.Option>
+      )
+    })
+
+    const inputValue = this.normalizeSpaces(this.state.inputValue)
+    // Don't offer tag creation on suggested or selected tags
+    if (!tagSuggestions.concat(tags).some(tag => tag.value === inputValue)) {
+      if (allowNewTags && inputValue.length > 0) {
+        options.push(
+          <Select.Option
+            id={this.encodeTag({value: inputValue})}
+            key={this.encodeTag({value: inputValue})}
+            isHighlighted={options.length === 0}
+          >
+            {t('Create new tag: { text }', {text: inputValue})}
+          </Select.Option>,
+        )
+      }
+    }
+
+    if (options.length === 0) {
+      options.push(
+        <Select.Option id={SELECT_EMPTY_OPTION} key={SELECT_EMPTY_OPTION}>
+          {this.emptyOption()}
+        </Select.Option>,
+      )
+    }
+
+    return options
+  }
+
+  render() {
+    const {inputValue, isShowingOptions} = this.state
+
+    return (
+      <Select
+        renderLabel={t('Tags and Metadata')}
+        inputValue={inputValue}
+        isShowingOptions={isShowingOptions}
+        inputRef={this.setInputRef}
+        onBlur={this.handleBlur}
+        onInputChange={this.handleInputChange}
+        onRequestShowOptions={this.handleShowOptions}
+        onRequestHideOptions={this.handleHideOptions}
+        onRequestHighlightOption={this.handleHighlightOption}
+        onRequestSelectOption={this.handleSelectOption}
+        onKeyDown={this.handleKeyDown}
+        renderBeforeInput={this.props.tags.length > 0 ? this.renderTags() : null}
+        data-automation="sdk-tags-and-metadata"
+      >
+        {this.options()}
+      </Select>
+    )
+  }
+}
+
+export default TagSelect

package/src/common/components/shared/TagSuggestSelect/__tests__/presenter.test.js

@@ -0,0 +1,84 @@
+import {expect, vi} from 'vitest'
+import React, {createRef} from 'react'
+import Immutable from 'immutable'
+import {render} from '@testing-library/react'
+
+import TagSuggest from '../presenter'
+
+describe('TagSuggest', () => {
+  const tags = [{id: '1', tag_value: 'waldo'}]
+
+  const defaultProps = {
+    parentType: 'Bank',
+    parentId: '0',
+    tags,
+    setTagInput: vi.fn(),
+    getTagSuggestions: vi.fn(),
+    setTagSuggestions: vi.fn(),
+    onChange: vi.fn(),
+    noMatchText: 'No match',
+  }
+
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    vi.clearAllMocks()
+  })
+
+  it('sets tag input on tag input change', () => {
+    const ref = createRef()
+    render(<TagSuggest {...defaultProps} ref={ref} />)
+    ref.current.handleTagInputChange('boo')
+    expect(defaultProps.setTagInput).toHaveBeenCalledWith('Bank', '0', 'boo')
+  })
+
+  it('calls tag suggestion on tag input change after debounce', () => {
+    const ref = createRef()
+    render(<TagSuggest {...defaultProps} ref={ref} />)
+    ref.current.handleTagInputChange('boo')
+    vi.advanceTimersByTime(200)
+    expect(defaultProps.getTagSuggestions).toHaveBeenCalledWith('Bank', '0', 'boo')
+  })
+
+  it('does not get tag suggestion and resets null tag input', () => {
+    const ref = createRef()
+    render(<TagSuggest {...defaultProps} ref={ref} />)
+    ref.current.handleTagInputChange(null)
+    vi.advanceTimersByTime(200)
+    expect(defaultProps.setTagSuggestions).toHaveBeenCalledWith('Bank', '0', null, null)
+  })
+
+  it('proposes default suggestions on null input', () => {
+    const ref = createRef()
+    render(
+      <TagSuggest
+        {...defaultProps}
+        defaultSuggestions={[{id: '1', value: 'boo'}]}
+        tags={[]}
+        ref={ref}
+      />,
+    )
+    const suggestions = ref.current.getTagSuggestions().toJS()
+    expect(suggestions).toEqual([{id: '1', value: 'boo'}])
+  })
+
+  it('excludes tag suggestions for tags already selected', () => {
+    const ref = createRef()
+    render(
+      <TagSuggest
+        {...defaultProps}
+        tagSuggestions={Immutable.fromJS([
+          {id: '1', value: 'boo'},
+          {id: '2', value: 'hey'},
+        ])}
+        tags={[{id: '1', value: 'boo'}]}
+        ref={ref}
+      />,
+    )
+    const suggestions = ref.current.getTagSuggestions().toJS()
+    expect(suggestions).toEqual([{id: '2', value: 'hey'}])
+  })
+})

package/src/common/components/shared/TagSuggestSelect/index.js

@@ -0,0 +1,27 @@
+import {connect} from '../../../react-redux'
+import TagSelect from './presenter'
+import {bindActionCreators} from 'redux'
+
+import {setTagInput, setTagSuggestions} from '../../../../common/actions/tagAssociations'
+
+import {getTagSuggestions} from '../../../../banks/api/tagAssociations'
+
+function mapStateToProps(state, props) {
+  return {
+    tagSuggestions: state.tagAssociations.getIn([
+      'tagSuggestions',
+      props.parentType,
+      props.parentId,
+    ]),
+  }
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    getTagSuggestions: bindActionCreators(getTagSuggestions, dispatch),
+    setTagSuggestions: bindActionCreators(setTagSuggestions, dispatch),
+    setTagInput: bindActionCreators(setTagInput, dispatch),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TagSelect)

package/src/common/components/shared/TagSuggestSelect/presenter.js

@@ -0,0 +1,79 @@
+import React, {Component} from 'react'
+import Immutable from 'immutable'
+import PropTypes from 'prop-types'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import debounce from 'lodash/debounce'
+
+import TagSelect from '../TagSelect'
+
+const tagShape = PropTypes.shape({
+  id: PropTypes.string,
+  value: PropTypes.string.isRequired,
+})
+
+export class TagSuggest extends Component {
+  static propTypes = {
+    allowNewTags: PropTypes.bool,
+    parentType: PropTypes.string.isRequired,
+    parentId: PropTypes.string.isRequired,
+    noMatchText: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    defaultSuggestions: PropTypes.arrayOf(tagShape),
+    tagSuggestions: ImmutablePropTypes.listOf(ImmutablePropTypes.map),
+    setTagInput: PropTypes.func.isRequired,
+    newTagSuggest: PropTypes.string,
+    getTagSuggestions: PropTypes.func.isRequired,
+    setTagSuggestions: PropTypes.func.isRequired,
+    tagInput: PropTypes.string,
+    tags: PropTypes.arrayOf(tagShape),
+  }
+
+  static defaultProps = {
+    allowNewTags: false,
+    newTagSuggest: null,
+    tagInput: null,
+    tags: [],
+    defaultSuggestions: [],
+    tagSuggestions: null,
+  }
+
+  getTagSuggestions() {
+    const {defaultSuggestions, tagSuggestions, tags} = this.props
+    const suggestions = tagSuggestions || Immutable.fromJS(defaultSuggestions)
+    const visibleTagIds = tags.map(tag => tag.id)
+    // Exclude suggestions for tags already selected
+    return suggestions.filterNot(tag => visibleTagIds.includes(tag.get('id')))
+  }
+
+  debouncedSuggestions = debounce(
+    (parentType, parentId, tagText) => this.props.getTagSuggestions(parentType, parentId, tagText),
+    200,
+  )
+
+  handleTagInputChange = tagText => {
+    const {parentType, parentId} = this.props
+    this.props.setTagInput(parentType, parentId, tagText)
+    if (tagText != null) {
+      this.debouncedSuggestions(parentType, parentId, tagText)
+    } else {
+      this.props.setTagSuggestions(parentType, parentId, null, tagText)
+    }
+  }
+
+  render() {
+    return (
+      <TagSelect
+        allowNewTags={this.props.allowNewTags}
+        noMatchText={this.props.noMatchText}
+        tags={this.props.tags}
+        tagInput={this.props.tagInput}
+        tagSuggestions={this.getTagSuggestions().toJS()}
+        newTagSuggest={this.props.newTagSuggest}
+        onChange={this.props.onChange}
+        onInputChange={this.handleTagInputChange}
+      />
+    )
+  }
+}
+
+export default TagSuggest

package/src/common/components/shared/TagWrapper/__tests__/presenter.test.js

@@ -0,0 +1,34 @@
+import {expect, vi} from 'vitest'
+import React from 'react'
+
+import TagWrapper from '../index'
+import {render, screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+describe('TagWrapper', () => {
+  let onClickStub, props
+
+  beforeEach(() => {
+    onClickStub = vi.fn()
+    props = {
+      text: 'best tag ever',
+      onClick: onClickStub,
+      id: '1',
+      index: 0,
+    }
+  })
+
+  it('should render with correct text', () => {
+    render(<TagWrapper {...props} />)
+    expect(screen.getAllByText(/best tag ever/).length).toBeGreaterThan(0)
+  })
+
+  it('should call onChange when a tag is clicked', async () => {
+    render(<TagWrapper {...props} />)
+
+    const tag = screen.getByRole('button', {name: /best tag ever/i})
+    userEvent.click(tag)
+
+    expect(onClickStub).toHaveBeenCalledWith(props.id)
+  })
+})

package/src/common/components/shared/TagWrapper/index.js

@@ -0,0 +1,3 @@
+import TagWrapper from './presenter'
+
+export default TagWrapper