@instructure/quiz-core 22.16.1 → 22.18.0

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

@@ -0,0 +1,228 @@
+import {expect, vi} from 'vitest'
+import React from 'react'
+import {render, screen, act} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {
+  SHARED_WITH_USER,
+  SHARED_WITH_COURSE,
+  SHARED_WITH_ACCOUNT,
+} from '@instructure/quiz-common/constants'
+import AsyncSearch from '..'
+
+describe('AsyncSearch', () => {
+  const onSelectionChange = vi.fn()
+  const getShareableUsersStub = vi.fn()
+  const getShareableCoursesStub = vi.fn()
+  const getShareableSubaccountsStub = vi.fn()
+  const debounceDelay = 500
+
+  const defaultProps = {
+    getShareableUsers: () => ({then: getShareableUsersStub}),
+    getShareableCourses: () => ({then: getShareableCoursesStub}),
+    getShareableSubaccounts: () => ({then: getShareableSubaccountsStub}),
+    onSelectionChange,
+    selectedOption: [],
+    debounceDelay,
+  }
+
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    onSelectionChange.mockClear()
+    getShareableUsersStub.mockClear()
+    getShareableCoursesStub.mockClear()
+    getShareableSubaccountsStub.mockClear()
+  })
+
+  it('renders the component', () => {
+    render(<AsyncSearch {...defaultProps} />)
+    expect(screen.getByRole('combobox')).toBeDefined()
+  })
+
+  it('shows "Write to search" when input is empty', () => {
+    render(<AsyncSearch {...defaultProps} />)
+    // Click to open the options list
+    userEvent.click(screen.getByRole('combobox'))
+    expect(screen.getByText('Write to search')).toBeDefined()
+  })
+
+  it('should delay the search call', () => {
+    render(<AsyncSearch {...defaultProps} />)
+    const input = screen.getByRole('combobox')
+
+    userEvent.type(input, 'new search value')
+
+    act(() => {
+      vi.advanceTimersByTime(debounceDelay - 1)
+    })
+    expect(getShareableUsersStub).not.toHaveBeenCalled()
+
+    act(() => {
+      vi.advanceTimersByTime(1)
+    })
+    expect(getShareableUsersStub).toHaveBeenCalledTimes(1)
+  })
+
+  it('should only search users when searchType is users', () => {
+    render(<AsyncSearch {...defaultProps} searchType={SHARED_WITH_USER} />)
+    const input = screen.getByRole('combobox')
+    userEvent.type(input, 'new search value')
+    act(() => {
+      vi.advanceTimersByTime(debounceDelay)
+    })
+    expect(getShareableUsersStub).toHaveBeenCalled()
+    expect(getShareableCoursesStub).not.toHaveBeenCalled()
+    expect(getShareableSubaccountsStub).not.toHaveBeenCalled()
+  })
+
+  it('should only search courses when searchType is courses', () => {
+    render(<AsyncSearch {...defaultProps} searchType={SHARED_WITH_COURSE} />)
+    const input = screen.getByRole('combobox')
+    userEvent.type(input, 'new search value')
+    act(() => {
+      vi.advanceTimersByTime(debounceDelay)
+    })
+    expect(getShareableCoursesStub).toHaveBeenCalled()
+    expect(getShareableUsersStub).not.toHaveBeenCalled()
+    expect(getShareableSubaccountsStub).not.toHaveBeenCalled()
+  })
+
+  it('should only search accounts when searchType is account', () => {
+    render(<AsyncSearch {...defaultProps} searchType={SHARED_WITH_ACCOUNT} />)
+    const input = screen.getByRole('combobox')
+    userEvent.type(input, 'new search value')
+    act(() => {
+      vi.advanceTimersByTime(debounceDelay)
+    })
+    expect(getShareableCoursesStub).not.toHaveBeenCalled()
+    expect(getShareableUsersStub).not.toHaveBeenCalled()
+    expect(getShareableSubaccountsStub).toHaveBeenCalled()
+  })
+
+  it('should search both users and courses when searchType is not specified', () => {
+    render(<AsyncSearch {...defaultProps} />)
+    const input = screen.getByRole('combobox')
+    userEvent.type(input, 'new search value')
+    act(() => {
+      vi.advanceTimersByTime(debounceDelay)
+    })
+    expect(getShareableCoursesStub).toHaveBeenCalled()
+    expect(getShareableUsersStub).toHaveBeenCalled()
+    expect(getShareableSubaccountsStub).not.toHaveBeenCalled()
+  })
+
+  it('should use the passed placeholder when it is not null', () => {
+    render(<AsyncSearch {...defaultProps} placeholderLabel="some text" />)
+    expect(screen.getByPlaceholderText('some text')).toBeDefined()
+  })
+
+  it('should use the passed search label when it is not null', () => {
+    render(<AsyncSearch {...defaultProps} searchLabel="some text" />)
+    expect(screen.getByLabelText('some text')).toBeDefined()
+  })
+
+  it('should call search with a debounce and reset timer on subsequent input', () => {
+    render(<AsyncSearch {...defaultProps} />)
+    const input = screen.getByRole('combobox')
+
+    userEvent.type(input, 'new search value')
+    act(() => {
+      vi.advanceTimersByTime(debounceDelay - 1)
+    })
+    expect(getShareableUsersStub).not.toHaveBeenCalled()
+
+    userEvent.clear(input)
+    userEvent.type(input, 'haha! foiled!')
+    act(() => {
+      vi.advanceTimersByTime(debounceDelay - 1)
+    })
+    expect(getShareableUsersStub).not.toHaveBeenCalled()
+    act(() => {
+      vi.advanceTimersByTime(1)
+    })
+    expect(getShareableUsersStub).toHaveBeenCalledTimes(1)
+  })
+
+  it('should populate the search results once they arrive', () => {
+    render(
+      <AsyncSearch
+        {...defaultProps}
+        getShareableUsers={() => ({
+          then: fn =>
+            fn([
+              {uuid: '0', fullName: 'first fullName', avatar: 'http://avatars.com/avatar1'},
+              {uuid: '1', fullName: 'second fullName', avatar: 'http://avatars.com/avatar2'},
+            ]),
+        })}
+        getShareableCourses={() => ({
+          then: fn => fn([{uuid: '2', title: 'Bio 101'}]),
+        })}
+      />,
+    )
+
+    const input = screen.getByRole('combobox')
+    userEvent.type(input, 'new search value')
+
+    act(() => {
+      vi.advanceTimersByTime(debounceDelay)
+    })
+
+    // After debounce fires and results arrive, we should see the options
+    expect(screen.getByText('first fullName')).toBeDefined()
+    expect(screen.getByText('second fullName')).toBeDefined()
+    expect(screen.getByText('Bio 101')).toBeDefined()
+  })
+
+  it('properly sets the minChars message', () => {
+    render(<AsyncSearch {...defaultProps} minChars={3} />)
+    const input = screen.getByRole('combobox')
+    userEvent.click(input)
+    expect(screen.getByText(/Search term must be at least 3 characters/)).toBeDefined()
+  })
+
+  it('properly filters the selected options from available options', () => {
+    render(
+      <AsyncSearch
+        {...defaultProps}
+        getShareableUsers={() => ({
+          then: fn =>
+            fn([
+              {uuid: '0', fullName: 'first fullName', avatar: 'http://avatars.com/avatar1'},
+              {uuid: '1', fullName: 'second fullName', avatar: 'http://avatars.com/avatar2'},
+            ]),
+        })}
+        getShareableCourses={() => ({
+          then: fn => fn([{uuid: '2', title: 'Bio 101'}]),
+        })}
+        selectedOption={[
+          {
+            uuid: '0',
+            fullName: 'first fullName',
+            avatar: 'http://avatars.com/avatar1',
+            entityType: 'user',
+          },
+        ]}
+      />,
+    )
+
+    const input = screen.getByRole('combobox')
+    userEvent.type(input, 'some text')
+    act(() => {
+      vi.advanceTimersByTime(debounceDelay)
+    })
+
+    // 'first fullName' is already selected, so it should be filtered out from the
+    // dropdown options. It may still appear in the selected tags area.
+    // Check that only the tag version exists (aria-hidden), not a dropdown option
+    const firstNameElements = screen.queryAllByText('first fullName')
+    // All instances should be in selected tags (aria-hidden), none in the dropdown
+    firstNameElements.forEach(el => {
+      expect(el.closest('[aria-hidden]')).not.toBeNull()
+    })
+    expect(screen.getByText('second fullName')).toBeDefined()
+    expect(screen.getByText('Bio 101')).toBeDefined()
+  })
+})

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

@@ -0,0 +1,412 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import debounce from 'lodash/fp/debounce'
+import find from 'lodash/fp/find'
+
+import t from '@instructure/quiz-i18n/format-message'
+import {Spinner} from '@instructure/ui-spinner'
+import TagWrapper from '../../../common/components/shared/TagWrapper'
+
+import {
+  SHARED_WITH_USER,
+  SHARED_WITH_COURSE,
+  SHARED_WITH_ACCOUNT,
+  SELECT_EMPTY_OPTION,
+} from '@instructure/quiz-common/constants'
+import {Select} from '@instructure/quiz-common/components/Select/index'
+
+export class AsyncSearch extends Component {
+  static propTypes = {
+    debounceDelay: PropTypes.number,
+    minChars: PropTypes.number,
+    onSelectionChange: PropTypes.func.isRequired,
+    getShareableCourses: PropTypes.func,
+    getShareableUsers: PropTypes.func,
+    getShareableSubaccounts: PropTypes.func,
+    searchType: PropTypes.string,
+    selectedOption: PropTypes.arrayOf(
+      PropTypes.shape({
+        avatar: PropTypes.string,
+        fullName: PropTypes.string,
+        title: PropTypes.string,
+        uuid: PropTypes.string.isRequired,
+      }),
+    ).isRequired,
+    selectionFilter: PropTypes.func,
+    searchLabel: PropTypes.string,
+    placeholderLabel: PropTypes.string,
+  }
+
+  static defaultProps = {
+    debounceDelay: 500,
+    minChars: 1,
+    searchType: null,
+    selectionFilter: value => value,
+    getShareableCourses: null,
+    getShareableUsers: null,
+    getShareableSubaccounts: null,
+    placeholder: null,
+  }
+
+  constructor() {
+    super(...arguments)
+
+    this.search = debounce(this.props.debounceDelay, value => {
+      const shouldSearchPeople =
+        !this.props.searchType || this.props.searchType === SHARED_WITH_USER
+      const shouldSearchCourses =
+        !this.props.searchType || this.props.searchType === SHARED_WITH_COURSE
+      const shouldSearchSubaccounts = this.props.searchType === SHARED_WITH_ACCOUNT
+      // TODO add the promise cancellation for avoiding having disordered requests
+      if (shouldSearchPeople) {
+        this.props.getShareableUsers(value).then(shareableUsers => {
+          const filteredUsers = this.filterOptions(shareableUsers)
+          this.setState({
+            shareableUsers,
+            highlightedOptionId: filteredUsers.length
+              ? filteredUsers[0].uuid
+              : this.state.highlightedOptionId,
+            isLoading: false,
+          })
+        })
+      }
+      if (shouldSearchCourses) {
+        this.props.getShareableCourses(value).then(shareableCourses => {
+          const filteredCourses = this.filterOptions(shareableCourses)
+          this.setState({
+            shareableCourses,
+            highlightedOptionId: this.state.highlightedOptionId
+              ? this.state.highlightedOptionId
+              : filteredCourses.length
+                ? filteredCourses[0].uuid
+                : null,
+            isLoading: false,
+          })
+        })
+      }
+      if (shouldSearchSubaccounts) {
+        this.props.getShareableSubaccounts(value).then(shareableSubaccounts => {
+          const filteredAccounts = this.filterOptions(shareableSubaccounts)
+          this.setState({
+            shareableSubaccounts,
+            highlightedOptionId: filteredAccounts.length
+              ? filteredAccounts[0].uuid
+              : this.state.highlightedOptionId,
+            isLoading: false,
+          })
+        })
+      }
+    })
+  }
+
+  setInputRef = inputRef => {
+    this.inputRef = inputRef
+  }
+
+  state = {
+    inputValue: '',
+    isShowingOptions: false,
+    isLoading: false,
+    highlightedOptionId: null,
+    shareableSubaccounts: [],
+    shareableCourses: [],
+    shareableUsers: [],
+  }
+
+  getOptionById(id) {
+    const user = find({uuid: id}, this.state.shareableUsers)
+    if (user) {
+      return {...user, entityType: SHARED_WITH_USER}
+    }
+
+    const course = find({uuid: id}, this.state.shareableCourses)
+    if (course) {
+      return {...course, entityType: SHARED_WITH_COURSE}
+    }
+
+    const account = find({uuid: id}, this.state.shareableSubaccounts)
+    if (account) {
+      return {...account, entityType: SHARED_WITH_ACCOUNT}
+    }
+
+    return find({uuid: id}, this.props.selectedOption)
+  }
+
+  handleShowOptions = () => {
+    this.setState({
+      isShowingOptions: true,
+    })
+  }
+
+  handleHideOptions = () => {
+    const allOptions = [
+      ...this.filterOptions(this.state.shareableSubaccounts),
+      ...this.filterOptions(this.state.shareableCourses),
+      ...this.filterOptions(this.state.shareableUsers),
+    ]
+
+    // an option matching user input exists
+    if (allOptions.length === 1) {
+      const onlyOption = allOptions[0]
+      // automatically select the matching option
+      const label = onlyOption.label || onlyOption.fullName || onlyOption.title || onlyOption.name
+      if (label && label.toLowerCase() === this.state.inputValue.toLowerCase()) {
+        this.changeSelectedOption([
+          ...this.props.selectedOption.map(option => option.uuid),
+          onlyOption.uuid,
+        ])
+      }
+    }
+
+    this.setState({
+      isShowingOptions: false,
+      highlightedOptionId: null,
+      shareableCourses: [],
+      shareableUsers: [],
+      inputValue: '',
+    })
+  }
+
+  handleBlur = () => {
+    this.setState({highlightedOptionId: null})
+  }
+
+  handleHighlightOption = (event, {id}) => {
+    event.persist()
+    const option = this.getOptionById(id)
+    if (!option) return
+
+    this.setState({
+      highlightedOptionId: id,
+      inputValue:
+        event.type === 'keydown' ? option.fullName || option.title : this.state.inputValue,
+    })
+  }
+
+  changeSelectedOption = optionIds => {
+    this.props.onSelectionChange(
+      optionIds.map(id => {
+        return this.getOptionById(id)
+      }),
+    )
+  }
+
+  handleSelectOption = (event, {id}) => {
+    if (!id || id === SELECT_EMPTY_OPTION) return
+
+    this.changeSelectedOption([...this.props.selectedOption.map(option => option.uuid), id])
+    this.setState({
+      inputValue: '',
+      isShowingOptions: false,
+    })
+  }
+
+  handleInputChange = event => {
+    const value = event.target.value
+    const longEnough = value && value.length >= this.props.minChars
+
+    const common = {
+      inputValue: value,
+      isShowingOptions: true,
+      shareableCourses: [],
+      shareableUsers: [],
+    }
+
+    if (!!value && longEnough) {
+      this.setState({
+        ...common,
+        isLoading: true,
+        highlightedOptionId: null,
+      })
+
+      this.search(value)
+    } else {
+      this.setState({
+        ...common,
+        isLoading: false,
+      })
+    }
+  }
+
+  handleKeyDown = event => {
+    const {inputValue} = this.state
+
+    if (event.keyCode === 8) {
+      // when backspace key is pressed
+      if (inputValue === '' && this.props.selectedOption.length > 0) {
+        // remove last selected option, if input has no entered text
+        this.changeSelectedOption(this.props.selectedOption.slice(0, -1).map(option => option.uuid))
+        this.setState({
+          highlightedOptionId: null,
+        })
+      }
+    }
+  }
+
+  dismissTag = id => {
+    this.changeSelectedOption(
+      this.props.selectedOption.filter(option => option.uuid !== id).map(option => option.uuid),
+    )
+
+    this.setState(
+      {
+        highlightedOptionId: null,
+      },
+      () => {
+        this.inputRef.focus()
+      },
+    )
+  }
+
+  renderTags() {
+    return this.props.selectedOption.map((option, index) => (
+      <TagWrapper
+        key={option.uuid}
+        id={option.uuid}
+        index={index}
+        text={option.fullName || option.title || option.name}
+        onClick={this.dismissTag}
+      />
+    ))
+  }
+
+  filterOptions(options) {
+    return this.props.selectionFilter(options).filter(option => {
+      return !this.props.selectedOption.some(selected => selected.uuid === option.uuid)
+    })
+  }
+
+  renderPeopleOptions(people) {
+    return (
+      <Select.Group key={SHARED_WITH_USER} renderLabel={t('People')}>
+        {people.map(person => (
+          <Select.Option
+            data-automation={`sdk-item-bank-option-user-${person.uuid}`}
+            id={person.uuid}
+            key={person.uuid}
+            isHighlighted={person.uuid === this.state.highlightedOptionId}
+          >
+            {person.fullName}
+          </Select.Option>
+        ))}
+      </Select.Group>
+    )
+  }
+
+  renderCoursesOptions(courses) {
+    return (
+      <Select.Group key={SHARED_WITH_COURSE} renderLabel={t('Courses')}>
+        {courses.map(course => (
+          <Select.Option
+            data-automation={`sdk-item-bank-option-course-${course.uuid}`}
+            id={course.uuid}
+            key={course.uuid}
+            isHighlighted={course.uuid === this.state.highlightedOptionId}
+          >
+            {course.title}
+          </Select.Option>
+        ))}
+      </Select.Group>
+    )
+  }
+
+  renderSubaccountsOptions(subaccounts) {
+    return (
+      <Select.Group key={SHARED_WITH_ACCOUNT} renderLabel={t('Accounts')}>
+        {subaccounts.map(subaccount => (
+          <Select.Option
+            data-automation={`sdk-item-bank-option-subaccount-${subaccount.uuid}`}
+            id={subaccount.uuid}
+            key={subaccount.uuid}
+            isHighlighted={subaccount.uuid === this.state.highlightedOptionId}
+          >
+            {subaccount.name}
+          </Select.Option>
+        ))}
+      </Select.Group>
+    )
+  }
+
+  emptyOption() {
+    const minCharsMessage = t('Search term must be at least { minChars } characters', {
+      minChars: this.props.minChars,
+    })
+
+    if (this.props.minChars > 1 && this.state.inputValue < this.props.minChars) {
+      return minCharsMessage
+    }
+
+    return this.state.inputValue === '' ? t('Write to search') : t('No Results')
+  }
+
+  renderOptions() {
+    let groups = []
+    const people = this.filterOptions(this.state.shareableUsers)
+    if (people.length) {
+      groups.push(this.renderPeopleOptions(people))
+    }
+
+    const courses = this.filterOptions(this.state.shareableCourses)
+    if (courses.length) {
+      groups.push(this.renderCoursesOptions(courses))
+    }
+
+    const subaccounts = this.filterOptions(this.state.shareableSubaccounts)
+    if (subaccounts.length) {
+      groups.push(this.renderSubaccountsOptions(subaccounts))
+    }
+
+    return groups.length ? (
+      groups
+    ) : (
+      <Select.Option id={SELECT_EMPTY_OPTION} key={SELECT_EMPTY_OPTION}>
+        {this.state.isLoading ? (
+          <Spinner renderTitle={t('Loading')} size="x-small" />
+        ) : (
+          this.emptyOption()
+        )}
+      </Select.Option>
+    )
+  }
+
+  placeholder() {
+    if (this.props.placeholderLabel) {
+      return this.props.placeholderLabel
+    }
+
+    if (this.props.searchType === SHARED_WITH_ACCOUNT) {
+      return t('Enter subaccount name')
+    } else if (this.props.searchType === SHARED_WITH_COURSE) {
+      return t('Enter course name or course id')
+    } else {
+      return t('Enter name or login id')
+    }
+  }
+
+  render() {
+    const {inputValue, isShowingOptions} = this.state
+
+    return (
+      <Select
+        data-automation="sdk-item-bank-share-input"
+        renderLabel={this.props.searchLabel}
+        placeholder={this.placeholder()}
+        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}
+        renderBeforeInput={this.props.selectedOption.length > 0 ? this.renderTags() : null}
+        onKeyDown={this.handleKeyDown}
+      >
+        {this.renderOptions()}
+      </Select>
+    )
+  }
+}
+
+export default AsyncSearch

package/src/banks/components/Bank/README.md

@@ -0,0 +1,7 @@
+---
+category: pages
+name: Bank
+---
+SDK Bank Page component
+
+Shows an Item Bank and the items in it