@instructure/quiz-core 22.17.0 → 22.18.0

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

@@ -0,0 +1,178 @@
+/** @jsx jsx */
+import {Component} from 'react'
+import memoize from 'lodash/memoize'
+import PropTypes from 'prop-types'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+
+import {IconPlusLine} from '@instructure/ui-icons'
+import {Button, CondensedButton} from '@instructure/ui-buttons'
+import {Checkbox} from '@instructure/ui-checkbox'
+import {View} from '@instructure/ui-view'
+import {Text} from '@instructure/ui-text'
+import {AccessibleContent, ScreenReaderContent} from '@instructure/ui-a11y-content'
+
+import {jsx} from '@instructure/emotion'
+
+import t from '@instructure/quiz-i18n/format-message'
+
+import TagSuggestSelect from '../../../common/components/shared/TagSuggestSelect'
+import {interactionTypesNameDictionary} from '../../../common/util/interactionTypeMetadata'
+
+import generateStyle from './styles'
+import generateComponentTheme from './theme'
+import {Flex} from '@instructure/quiz-common/components/Flex/index'
+import {TextInput} from '@instructure/quiz-common/components/TextInput/index'
+import {withStyleOverrides} from '@instructure/quiz-common/util/withStyleOverrides'
+
+const tagShape = PropTypes.shape({
+  tag: PropTypes.shape({
+    id: PropTypes.string,
+    value: PropTypes.string.isRequired,
+  }).isRequired,
+  count: PropTypes.number.isRequired,
+})
+
+@withStyleOverrides(generateStyle, generateComponentTheme)
+export class BankSearch extends Component {
+  static displayName = 'BankSearch'
+  static componentId = `Quizzes${this.displayName}`
+
+  static propTypes = {
+    allInteractions: PropTypes.bool,
+    interactionTypes: PropTypes.arrayOf(
+      PropTypes.shape({
+        count: PropTypes.number,
+        interaction_type: PropTypes.shape({
+          id: PropTypes.string,
+          name: PropTypes.string,
+          slug: PropTypes.string,
+        }),
+      }),
+    ),
+    showFilters: PropTypes.bool,
+    tags: PropTypes.arrayOf(tagShape),
+    toggleFilters: PropTypes.func.isRequired,
+    toggleAllInteractions: PropTypes.func.isRequired,
+    search: ImmutablePropTypes.map.isRequired,
+    toggle: PropTypes.func.isRequired,
+    setFilter: PropTypes.func.isRequired,
+    update: PropTypes.func.isRequired,
+    styles: PropTypes.object,
+  }
+
+  static defaultProps = {
+    allInteractions: false,
+    interactionTypes: [],
+    showFilters: false,
+    tags: [],
+  }
+
+  toggleInteraction = memoize(it => () => this.props.toggle('interactionTypes', it))
+
+  setTags = tags => this.props.setFilter('tags', tags)
+
+  renderFilters() {
+    const {allInteractions, search, showFilters, toggleAllInteractions, interactionTypes} =
+      this.props
+
+    if (showFilters) {
+      const its = interactionTypes
+      const shown = allInteractions ? its : its.slice(0, 5)
+      const active = search.get('interactionTypes')
+      const interactionFilters = shown.map(({count, interaction_type: it}) => {
+        const interactionName = interactionTypesNameDictionary(it)
+        const label = `${interactionName} (${count})`
+        return (
+          <div key={it.id} css={this.props.styles.interactionType}>
+            <Checkbox
+              checked={active.has(it.id)}
+              label={label}
+              onChange={this.toggleInteraction(it.id)}
+              value="medium"
+            />
+          </div>
+        )
+      })
+
+      const suggestions = this.props.tags.map(({tag}) => tag)
+      const activeTags = this.props.search.get('tags')
+      const tagSelect = (
+        <TagSuggestSelect
+          noMatchText={t('No matching tags found')}
+          parentType="Bank"
+          parentId="0"
+          onChange={this.setTags}
+          tags={activeTags}
+          defaultSuggestions={suggestions}
+        />
+      )
+
+      const toggleButton = () => {
+        if (shown.length < its.length || allInteractions) {
+          const hide = () => t('Show Less')
+          const show = () => t('Show More')
+          const text = allInteractions ? hide() : show()
+          return (
+            <CondensedButton onClick={toggleAllInteractions} margin="none small">
+              <AccessibleContent alt={text}>{text}</AccessibleContent>
+            </CondensedButton>
+          )
+        }
+      }
+
+      return (
+        <div css={this.props.styles.filterContainer}>
+          <div css={this.props.styles.filterColumn}>{tagSelect}</div>
+          <div css={this.props.styles.filterColumn}>
+            <View margin="none small">
+              <Text weight="bold" color="primary">
+                {t('Question Type')}
+              </Text>
+            </View>
+            {interactionFilters}
+            {toggleButton()}
+          </div>
+        </div>
+      )
+    }
+  }
+
+  updateSearch = ({target: {value}}) => this.props.update(value)
+
+  render() {
+    const {showFilters, toggleFilters} = this.props
+    return (
+      <div>
+        <Flex as="div">
+          <Flex.Item shouldGrow shouldShrink>
+            <TextInput
+              renderLabel={<ScreenReaderContent>{t('Search')}</ScreenReaderContent>}
+              type="search"
+              placeholder={t('Search')}
+              onChange={this.updateSearch}
+              value={this.props.search.get('text', '') || ''}
+              data-automation="sdk-bank-search-input"
+            />
+          </Flex.Item>
+          <Flex.Item>
+            <Button
+              onClick={toggleFilters}
+              margin="none none none small"
+              renderIcon={IconPlusLine}
+              data-automation="sdk-search-filter-button"
+            >
+              <AccessibleContent
+                alt={showFilters ? t('Hide search filters') : t('Show search filters')}
+              >
+                {t('Filters')}
+              </AccessibleContent>
+            </Button>
+          </Flex.Item>
+        </Flex>
+        {this.renderFilters()}
+      </div>
+    )
+  }
+}
+
+export default BankSearch

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

@@ -0,0 +1,19 @@
+const generateStyle = componentTheme => {
+  return {
+    interactionType: {
+      padding: `${componentTheme.searchInteractionsPaddingTopBottom} ${componentTheme.searchInteractionsPaddingLeftRight}`,
+    },
+
+    filterContainer: {
+      display: 'flex',
+      marginTop: '1rem',
+    },
+
+    filterColumn: {
+      flex: 1,
+      marginRight: '2rem',
+    },
+  }
+}
+
+export default generateStyle

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

@@ -0,0 +1,8 @@
+const generateComponentTheme = ({spacing}) => {
+  return {
+    searchInteractionsPaddingTopBottom: spacing.xSmall,
+    searchInteractionsPaddingLeftRight: spacing.small,
+  }
+}
+
+export default generateComponentTheme

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

@@ -0,0 +1,7 @@
+---
+category: pages
+name: Banks
+---
+SDK Quiz Banks Page component
+
+List item banks available to the user and create new ones.

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

@@ -0,0 +1,36 @@
+import React from 'react'
+import {vi} from 'vitest'
+import {render} from '@testing-library/react'
+import Banks from '../index'
+
+// Banks dispatches getBanks on mount which triggers network requests.
+// Mock the API module to prevent unhandled rejections.
+vi.mock('../../../../banks/api/banks', async importOriginal => {
+  const actual = await importOriginal()
+  return {
+    ...actual,
+    getBanks: vi.fn(() => () => Promise.resolve({records: [], totalPages: 0})),
+  }
+})
+
+// Mock fetch to prevent relative URL errors in jsdom (PaginatedCollection triggers fetch on mount)
+let fetchSpy
+beforeEach(() => {
+  fetchSpy = vi.spyOn(global, 'fetch').mockResolvedValue(
+    new Response(JSON.stringify({data: []}), {
+      status: 200,
+      headers: {'Content-Type': 'application/json'},
+    }),
+  )
+})
+afterEach(() => {
+  fetchSpy.mockRestore()
+})
+
+describe('connected Banks', () => {
+  const ConnectedBanks = withContext(Banks, {})
+
+  it('renders without throwing', () => {
+    expect(() => render(<ConnectedBanks navigateToBank={() => {}} />)).not.toThrow()
+  })
+})

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

@@ -0,0 +1,318 @@
+import React from 'react'
+import {expect, vi} from 'vitest'
+import {render, screen, within} from '@testing-library/react'
+
+import Banks from '../presenter'
+
+describe('Banks', () => {
+  const ConnectedBanks = withContext(Banks)
+  const getBanksStub = vi.fn().mockResolvedValue({records: [], totalPages: 0})
+  const openModalStub = vi.fn()
+  const createBankStub = vi.fn()
+  const clearStub = vi.fn()
+  const mergeStub = vi.fn()
+  const setUIStub = vi.fn()
+
+  const props = {
+    clear: clearStub,
+    merge: mergeStub,
+    setUI: setUIStub,
+    getBanks: getBanksStub,
+    openModal: openModalStub,
+    navigateToBank: () => {},
+    createBank: createBankStub,
+    userToken: 'token',
+  }
+
+  afterEach(() => {
+    clearStub.mockClear()
+    mergeStub.mockClear()
+    setUIStub.mockClear()
+    getBanksStub.mockClear()
+    openModalStub.mockClear()
+    createBankStub.mockClear()
+  })
+
+  it('renders "Item Banks" text', () => {
+    render(<ConnectedBanks {...props} />)
+    expect(screen.getByText('Item Banks')).toBeDefined()
+  })
+
+  it('renders the create bank button', () => {
+    render(<ConnectedBanks {...props} />)
+    // The create bank button has AccessibleContent alt="Create Bank" and visible text "Bank"
+    expect(screen.getByText('Create Bank')).toBeDefined()
+  })
+
+  it('renders a return-to-build button when passed a navigateToBuild prop', () => {
+    render(<ConnectedBanks {...props} navigateToBuild={() => {}} />)
+    expect(screen.getByText('Return')).toBeDefined()
+  })
+
+  it('does not render a return-to-build button when not passed a navigateToBuild prop', () => {
+    render(<ConnectedBanks {...props} navigateToBuild={null} />)
+    expect(screen.queryByText('Return')).toBeNull()
+  })
+
+  it('should render filter controls', () => {
+    render(<ConnectedBanks {...props} />)
+    // The filter label and bank search input
+    expect(screen.getByLabelText('Filter By')).toBeDefined()
+    expect(screen.getByLabelText('Bank')).toBeDefined()
+  })
+
+  describe('scope', () => {
+    it('default value is "user" if no scope is provided', () => {
+      render(<ConnectedBanks {...props} />)
+      const filterSelect = screen.getByLabelText('Filter By')
+      expect(filterSelect.value).toBe('Shared with Me')
+    })
+
+    it('default value is "account" if the scope type is "account"', () => {
+      render(<ConnectedBanks {...props} scopeType="account" />)
+      const filterSelect = screen.getByLabelText('Filter By')
+      expect(filterSelect.value).toBe('Institution Banks')
+    })
+
+    it('default value is "course" if the scope type is "course"', () => {
+      render(<ConnectedBanks {...props} scopeType="course" scope={{uuid: 'X52fjqLmNdf32'}} />)
+      const filterSelect = screen.getByLabelText('Filter By')
+      expect(filterSelect.value).toBe('This Course')
+    })
+
+    it('fetches account banks when the selected option is "account"', () => {
+      render(
+        <ConnectedBanks {...props} scopeType="account" scope={{type: 'account', uuid: null}} />,
+      )
+      expect(getBanksStub).toHaveBeenCalledWith({page: 1, scope: 'account'}, false, null)
+    })
+
+    it('fetches course banks when the selected option is "course"', () => {
+      render(
+        <ConnectedBanks
+          {...props}
+          scopeType="course"
+          scope={{
+            type: 'course',
+            uuid: 'someuuid',
+            launch_context_uuid: 'a4e6fefe-6795-482f-bb38-0034202621aa',
+          }}
+        />,
+      )
+      expect(getBanksStub).toHaveBeenCalledWith({course_id: 'someuuid', page: 1}, false, null)
+    })
+
+    it('does not silently pass the current subaccount when launched from a root account and the selected option is "account"', () => {
+      render(
+        <ConnectedBanks
+          {...props}
+          scopeType="account"
+          scope={{type: 'account', launch_context_uuid: 'somerootuuid', title: 'root'}}
+          rootAccountUuid="somerootuuid"
+        />,
+      )
+      expect(getBanksStub).toHaveBeenCalledWith({page: 1, scope: 'account'}, false, null)
+    })
+
+    it('passes the current subaccount silently when launched from a subaccount and the selected option is "this_account"', () => {
+      render(
+        <ConnectedBanks
+          {...props}
+          scopeType="this_account"
+          scope={{type: 'account', launch_context_uuid: 'somesubaccountuuid', title: 'sub'}}
+          rootAccountUuid="somerootuuid"
+        />,
+      )
+      expect(getBanksStub).toHaveBeenCalledWith(
+        {
+          account_uuids: ['somesubaccountuuid'],
+          page: 1,
+          scope: 'account',
+        },
+        false,
+        null,
+      )
+    })
+  })
+
+  // The empty page content is passed to PaginatedCollection as the `empty` prop.
+  // PaginatedCollection only renders it when Redux pagination state shows empty records.
+  // Since withContext uses a minimal store, we cannot test these end-to-end here.
+  // The empty page logic is covered by the original unit tests on the Banks component method.
+  // TODO: QUIZ-TBD — migrate these to use rtlRenderOverride with full store state.
+  describe.skip('empty page', () => {
+    it('renders "No Results Found" when there are search terms and no results')
+    it('renders the adjust filter message when scope is "course"')
+    it('does not render the adjust filter message when scope is "user"')
+    it('renders "You don\'t have any banks yet" when there are no search terms')
+  })
+
+  describe('account search visibility', () => {
+    it('should render account search by default', () => {
+      render(<ConnectedBanks {...props} />)
+      expect(screen.getByLabelText('Account')).toBeDefined()
+    })
+
+    it('should not render account search if filtered by course', () => {
+      render(
+        <ConnectedBanks
+          {...props}
+          scopeType="course"
+          scope={{type: 'account', launch_context_uuid: 'somesubaccountuuid', title: 'sub'}}
+          rootAccountUuid="somerootuuid"
+        />,
+      )
+      expect(screen.queryByLabelText('Account')).toBeNull()
+    })
+
+    it('should not render account search if filtered by courses', () => {
+      render(
+        <ConnectedBanks
+          {...props}
+          scopeType="courses"
+          scope={{type: 'account', launch_context_uuid: 'somesubaccountuuid', title: 'sub'}}
+          rootAccountUuid="somerootuuid"
+        />,
+      )
+      expect(screen.queryByLabelText('Account')).toBeNull()
+    })
+
+    it('should render account search if launched from a subaccount and currently filtered by account', () => {
+      render(
+        <ConnectedBanks
+          {...props}
+          scopeType="account"
+          scope={{type: 'account', launch_context_uuid: 'somesubaccountuuid', title: 'sub'}}
+          rootAccountUuid="somerootuuid"
+        />,
+      )
+      expect(screen.getByLabelText('Account')).toBeDefined()
+    })
+
+    it('should not render account search if launched from a subaccount and currently filtered by this account', () => {
+      render(
+        <ConnectedBanks
+          {...props}
+          scopeType="this_account"
+          scope={{type: 'account', launch_context_uuid: 'somesubaccountuuid', title: 'sub'}}
+          rootAccountUuid="somerootuuid"
+        />,
+      )
+      expect(screen.queryByLabelText('Account')).toBeNull()
+    })
+  })
+
+  it('renders a HeaderBreadCrumb with no children other than the default breadcrumb', () => {
+    render(<ConnectedBanks {...props} />)
+    const navigation = screen.getByRole('navigation', {name: /you are here/i})
+    expect(within(navigation).queryAllByRole('button')).toHaveLength(0)
+    const listItems = within(navigation).queryAllByRole('listitem')
+    expect(listItems).toHaveLength(1)
+    expect(listItems[0].innerText).toBe('Item Banks')
+  })
+
+  describe('iceTopNavBarEnabled', () => {
+    it('renders a HeaderBreadCrumb with no children other than the default breadcrumb', () => {
+      render(<ConnectedBanks {...props} iceTopNavBarEnabled />)
+      const navigation = screen.getByRole('navigation', {name: /you are here/i})
+      expect(within(navigation).queryAllByRole('button')).toHaveLength(0)
+      const listItems = within(navigation).queryAllByRole('listitem')
+      expect(listItems).toHaveLength(1)
+      expect(listItems[0].innerText).toBe('Item Banks')
+    })
+  })
+
+  describe('#getPage with various params', () => {
+    it('calls getBanks with scope query when scopeType is "account"', () => {
+      render(<ConnectedBanks {...props} scopeType="account" />)
+      expect(getBanksStub).toHaveBeenCalledWith({scope: 'account', page: 1}, false, null)
+    })
+
+    it('calls getBanks without scope query when scopeType is null', () => {
+      render(<ConnectedBanks {...props} scopeType={null} />)
+      expect(getBanksStub).toHaveBeenCalledWith({page: 1}, false, null)
+    })
+
+    it('calls getBanks without scope query when scopeType is "user"', () => {
+      render(<ConnectedBanks {...props} scopeType="user" />)
+      expect(getBanksStub).toHaveBeenCalledWith({page: 1}, false, null)
+    })
+
+    it('calls getBanks with search query when searchTerms is set', () => {
+      render(<ConnectedBanks {...props} searchTerms="ASL" />)
+      expect(getBanksStub).toHaveBeenCalledWith({search: 'ASL', page: 1}, false, null)
+    })
+
+    it('calls getBanks with sort_order query if sortOrder is "descending"', () => {
+      render(<ConnectedBanks {...props} sortOrder="descending" />)
+      expect(getBanksStub).toHaveBeenCalledWith({sort_order: 'DESC', page: 1}, false, null)
+    })
+
+    it('calls getBanks without sort_order query if sortOrder is "ascending"', () => {
+      render(<ConnectedBanks {...props} sortOrder="ascending" />)
+      expect(getBanksStub).toHaveBeenCalledWith({page: 1}, false, null)
+    })
+
+    it('calls getBanks with sort_by query if sortBy is set', () => {
+      render(<ConnectedBanks {...props} sortBy="last_used" />)
+      expect(getBanksStub).toHaveBeenCalledWith({sort_by: 'last_used', page: 1}, false, null)
+    })
+
+    it('calls getBanks with account_uuids query if searchSelection is set', () => {
+      render(
+        <ConnectedBanks
+          {...props}
+          searchSelection={[{entityType: 'account', id: 1, name: 'Test', uuid: 'some_uuid'}]}
+        />,
+      )
+      expect(getBanksStub).toHaveBeenCalledWith(
+        {account_uuids: ['some_uuid'], page: 1},
+        false,
+        null,
+      )
+    })
+
+    it('calls getBanks with getCourseAssignments', () => {
+      const getCourseAssignments = () => {}
+      render(
+        <ConnectedBanks
+          {...props}
+          scopeType="account"
+          getCourseAssignments={getCourseAssignments}
+          usedByCourseEnabled
+        />,
+      )
+      expect(getBanksStub).toHaveBeenCalledWith(
+        {scope: 'account', page: 1},
+        true,
+        getCourseAssignments,
+      )
+    })
+
+    it('calls getBanks with combination of scope/search/sorting queries', () => {
+      render(
+        <ConnectedBanks
+          {...props}
+          searchTerms="ASL"
+          scopeType="account"
+          sortOrder="descending"
+          sortBy="last_used"
+          searchSelection={[{entityType: 'account', id: 1, name: 'Test', uuid: 'some_uuid'}]}
+        />,
+      )
+
+      expect(getBanksStub).toHaveBeenCalledWith(
+        {
+          page: 1,
+          search: 'ASL',
+          scope: 'account',
+          sort_order: 'DESC',
+          sort_by: 'last_used',
+          account_uuids: ['some_uuid'],
+        },
+        false,
+        null,
+      )
+    })
+  })
+})

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

@@ -0,0 +1,46 @@
+import {bindActionCreators} from 'redux'
+import {Map, Set} from 'immutable'
+
+import {Banks as BanksPresenter} from './presenter'
+import {set as setUI, clear, merge} from '../../../common/actions/ui'
+import {connect} from '../../../common/react-redux'
+import {getBanks} from '../../../banks/api/banks'
+import * as modalActions from '../../../common/actions/modal'
+import {createBank} from '../../../common/actions/modifications'
+import {BANKS_BANK_FILTERS} from '@instructure/quiz-common/constants'
+
+function mapStateToProps(state, props) {
+  const pageData = state.ui.get(BANKS_BANK_FILTERS) ?? Map()
+  const scopeType = pageData.get('scopeType', (props.scope || {}).type || 'user')
+  const sortBy = pageData.get('sortBy', 'name')
+  const sortOrder = pageData.get('sortOrder', 'ascending')
+  const searchTerms = pageData.get('searchTerms', null)
+  const searchSelection = pageData.get('searchSelection', [])
+  const rootAccountUuid = state.outcomes.get('externalAccountUuid')
+  const features = state.features ?? Set()
+
+  return {
+    itemBankSearchTableEnabled: features.includes('item_bank_search_table'),
+    usedByCourseEnabled: features.includes('filter_item_banks_used_by_course'),
+    scopeType,
+    sortBy,
+    sortOrder,
+    searchTerms,
+    searchSelection,
+    rootAccountUuid,
+  }
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    createBank: bindActionCreators(createBank, dispatch),
+    getBanks: bindActionCreators(getBanks, dispatch),
+    openModal: bindActionCreators(modalActions.openModal, dispatch),
+    clear: bindActionCreators(clear, dispatch),
+    merge: bindActionCreators(merge, dispatch),
+    setUI: bindActionCreators(setUI, dispatch),
+  }
+}
+
+export const Banks = connect(mapStateToProps, mapDispatchToProps)(BanksPresenter)
+export default Banks