@dhis2-ui/transfer 10.16.2 → 10.16.3-alpha.1

package/src/common/modes.js

@@ -0,0 +1,11 @@
+/**
+ * Click modes when clicking on an option with/without
+ * a modifier key (ctrl, alt, cmd, shift)
+ */
+
+// no or multiple modifier keys
+export const REPLACE_MODE = 'REPLACE_MODE'
+// add/remove options from selection
+export const ADD_MODE = 'ADD_MODE'
+// create selection range
+export const RANGE_MODE = 'RANGE_MODE'

package/src/common/remove-option.js

@@ -0,0 +1,19 @@
+import { findOptionIndex } from './find-option-index.js'
+
+/**
+ * @param {Object[]} options
+ * @param {Object} option
+ * @returns {Object}
+ */
+export const removeOption = (options, option) => {
+    const index = findOptionIndex(options, option)
+
+    if (index === -1) {
+        return options
+    }
+    if (index === 0) {
+        return options.slice(1)
+    }
+
+    return [...options.slice(0, index), ...options.slice(index + 1)]
+}

package/src/common/toggle-value.js

@@ -0,0 +1,18 @@
+/**
+ * @param {string[]} values
+ * @param {string} value
+ * @returns {string[]}
+ */
+export const toggleValue = (values, value) => {
+    const index = values.indexOf(value)
+
+    if (index === -1) {
+        return [...values, value]
+    } else if (index === 0) {
+        values.slice(1)
+    }
+
+    const prevSlice = values.slice(0, index)
+    const nextSlice = values.slice(index + 1)
+    return [...prevSlice, ...nextSlice]
+}

package/src/container.js

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const Container = ({ children, dataTest, className, height }) => (
+    <div data-test={dataTest} className={className}>
+        {children}
+
+        <style jsx>{`
+            div {
+                display: flex;
+                width: 100%;
+                height: ${height};
+            }
+        `}</style>
+    </div>
+)
+
+Container.propTypes = {
+    height: PropTypes.string.isRequired,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+}

package/src/end-intersection-detector.js

@@ -0,0 +1,37 @@
+import { IntersectionDetector } from '@dhis2-ui/intersection-detector'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const INTERSECTION_DETECTOR_HEIGHT = 50
+
+export const EndIntersectionDetector = ({
+    rootRef,
+    onEndReached,
+    dataTest,
+}) => (
+    <div data-test={dataTest}>
+        <IntersectionDetector
+            rootRef={rootRef}
+            onChange={({ isIntersecting }) => isIntersecting && onEndReached()}
+        />
+
+        <style jsx>{`
+            div {
+                width: 100%;
+                height: ${INTERSECTION_DETECTOR_HEIGHT}px;
+                position: absolute;
+                z-index: -1;
+                bottom: 0;
+                inset-inline-start: 0;
+            }
+        `}</style>
+    </div>
+)
+
+EndIntersectionDetector.propTypes = {
+    rootRef: PropTypes.shape({
+        current: PropTypes.instanceOf(HTMLElement),
+    }).isRequired,
+    onEndReached: PropTypes.func.isRequired,
+    dataTest: PropTypes.string,
+}

package/src/features/add_remove-highlighted-options/index.js

@@ -0,0 +1,92 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('the option list has two or more items', () => {
+    cy.visitStory('Transfer add & remove highlighted options', 'Has Options')
+    cy.get('{transfer-sourceoptions}').as('list')
+})
+
+Given('the selected list has two or more items', () => {
+    cy.visitStory('Transfer add & remove highlighted options', 'Has Selected')
+    cy.get('{transfer-pickedoptions}').as('list')
+})
+
+Given('some items are highlighted', () => {
+    cy.get('@list')
+        .find('{transferoption}')
+        .then(($options) => {
+            const multipleOptions = $options.filter((index) => index < 3)
+            return cy.wrap(multipleOptions)
+        })
+        .as('highlightedMultipleOptions')
+        .each(($option) => cy.wrap($option).clickWith('ctrl'))
+})
+
+When(
+    'the user clicks multiple items with {string} which are not highlighted',
+    (modifierKey) => {
+        cy.get('@list')
+            .find('{transferoption}')
+            .then(($options) => {
+                const multipleOptions = $options.filter((index) => index < 3)
+                return cy.wrap(multipleOptions)
+            })
+            .as('multipleOptions')
+            .each(($option) =>
+                cy
+                    .wrap($option)
+                    .clickWith(modifierKey === 'cmd' ? 'meta' : modifierKey)
+            )
+    }
+)
+
+When(
+    'the user clicks on one item with {string} which is highlighted',
+    (modifierKey) => {
+        cy.get('@highlightedMultipleOptions')
+            .first()
+            .clickWith(modifierKey === 'cmd' ? 'meta' : modifierKey)
+            .as('clickedOption')
+        cy.get('@highlightedMultipleOptions')
+            .filter((index) => index !== 0)
+            .as('remainingHighlightedOptions')
+    }
+)
+
+When(
+    'the user clicks on one item without a modifier key which is highlighted',
+    () => {
+        cy.get('@highlightedMultipleOptions')
+            .first()
+            .click()
+            .as('clickedOption')
+        cy.get('@highlightedMultipleOptions')
+            .filter((index) => index !== 0)
+            .as('remainingHighlightedOptions')
+    }
+)
+
+Then('all of the clicked items should be highlighted', () => {
+    cy.get('@multipleOptions').each(($option) => {
+        expect($option).to.have.class('highlighted')
+    })
+})
+
+Then('the clicked item should not be highlighted', () => {
+    cy.get('@clickedOption').should('not.have.class', 'highlighted')
+})
+
+Then('the other previously highlighted items should remain highlighted', () => {
+    cy.get('@remainingHighlightedOptions').each(($option) => {
+        expect($option).to.have.class('highlighted')
+    })
+})
+
+Then('the clicked option is highlighted', () => {
+    cy.get('@clickedOption').should('have.class', 'highlighted')
+})
+
+Then('the other previously highlighted items should not be highlighted', () => {
+    cy.get('@remainingHighlightedOptions').each(($option) => {
+        expect($option).to.not.have.class('highlighted')
+    })
+})

package/src/features/add_remove-highlighted-options.feature

@@ -0,0 +1,41 @@
+Feature: Add/Remove options to/from the highlighted options
+
+    Scenario Outline: Highlight multiple items using CMD/CTRL+click
+        Given the <type> list has two or more items
+        When the user clicks multiple items with "<metaKey>" which are not highlighted
+        Then all of the clicked items should be highlighted
+
+        Examples:
+            | type     | metaKey |
+            | option   | cmd     |
+            | option   | ctrl    |
+            | selected | cmd     |
+            | selected | ctrl    |
+
+    Scenario Outline: Unhighlight items using CMD/CTRL+click
+        Given the <type> list has two or more items
+        And some items are highlighted
+        When the user clicks on one item with "<metaKey>" which is highlighted
+        Then the clicked item should not be highlighted
+        And the other previously highlighted items should remain highlighted
+
+        Examples:
+            | type     | metaKey |
+            | option   | cmd     |
+            | option   | ctrl    |
+            | selected | cmd     |
+            | selected | ctrl    |
+
+    Scenario Outline: A user clicks a highlighted option without a modifier key when multiple options are highlighted
+        Given the <type> list has two or more items
+        And some items are highlighted
+        When the user clicks on one item without a modifier key which is highlighted
+        Then the clicked option is highlighted
+        And the other previously highlighted items should not be highlighted
+
+        Examples:
+            | type     | metaKey |
+            | option   | cmd     |
+            | option   | ctrl    |
+            | selected | cmd     |
+            | selected | ctrl    |

package/src/features/common/index.js

@@ -0,0 +1,8 @@
+export const extractOptionFromElement = (element) => {
+    const $element = Cypress.$(element)
+
+    return {
+        label: $element.text(),
+        value: $element.data('value'),
+    }
+}

package/src/features/disabled-transfer-buttons/index.js

@@ -0,0 +1,118 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('the options list has items', () => {
+    cy.visitStory('Transfer Disabled Transfer Buttons', 'Has Options')
+})
+
+Given('the selected list has items', () => {
+    cy.visitStory('Transfer Disabled Transfer Buttons', 'Some Options Selected')
+})
+
+Given('the transfer does not have any options', () => {
+    cy.visitStory('Transfer Disabled Transfer Buttons', 'No Options')
+})
+
+Given('all options have been selected', () => {
+    cy.visitStory('Transfer Disabled Transfer Buttons', 'All Options Selected')
+})
+
+Given('the selected list does not have items', () => {
+    cy.visitStory('Transfer Disabled Transfer Buttons', 'Has Options')
+})
+
+Given('no option items are highlighted', () => {
+    cy.get(
+        '[data-test="dhis2-uicore-transfer-sourceoptions"] [data-test="dhis2-uicore-transferoption"]'
+    ).each(($option) =>
+        cy.wrap($option).should('not.have.class', 'highlighted')
+    )
+})
+
+Given('some option items are highlighted', () => {
+    cy.get(
+        '[data-test="dhis2-uicore-transfer-sourceoptions"] [data-test="dhis2-uicore-transferoption"]'
+    )
+        .first()
+        .click()
+})
+
+Given('no selected items are highlighted', () => {
+    cy.get(
+        '[data-test="dhis2-uicore-transfer-pickedoptions"] [data-test="dhis2-uicore-transferoption"]'
+    ).each(($option) =>
+        cy.wrap($option).should('not.have.class', 'highlighted')
+    )
+})
+
+Given('some selected items are highlighted', () => {
+    cy.get(
+        '[data-test="dhis2-uicore-transfer-pickedoptions"] [data-test="dhis2-uicore-transferoption"]'
+    )
+        .first()
+        .click()
+})
+
+Given('a source list that has only disabled options', () => {
+    cy.visitStory(
+        'Transfer Disabled Transfer Buttons',
+        'Only Disabled Source Options'
+    )
+})
+
+Then("the 'move to picked list' button should be disabled", () => {
+    cy.get(
+        '[data-test="dhis2-uicore-transfer-actions-addindividual"][disabled]'
+    ).should('exist')
+})
+
+Then("the 'move to picked list' button should be enabled", () => {
+    cy.get('[data-test="dhis2-uicore-transfer-actions-addindividual"]').should(
+        'exist'
+    )
+    cy.get(
+        '[data-test="dhis2-uicore-transfer-actions-addindividual"][disabled]'
+    ).should('not.exist')
+})
+
+Then("the 'move to source list' button should be disabled", () => {
+    cy.get(
+        '[data-test="dhis2-uicore-transfer-actions-removeindividual"][disabled]'
+    ).should('exist')
+})
+
+Then("the 'move to source list' button should be enabled", () => {
+    cy.get(
+        '[data-test="dhis2-uicore-transfer-actions-removeindividual"]'
+    ).should('exist')
+    cy.get(
+        '[data-test="dhis2-uicore-transfer-actions-removeindividual"][disabled]'
+    ).should('not.exist')
+})
+
+Then("the 'move all to picked list' button should be disabled", () => {
+    cy.get(
+        '[data-test="dhis2-uicore-transfer-actions-addall"][disabled]'
+    ).should('exist')
+})
+
+Then("the 'move all to picked list' button should be enabled", () => {
+    cy.get('[data-test="dhis2-uicore-transfer-actions-addall"]').should('exist')
+    cy.get(
+        '[data-test="dhis2-uicore-transfer-actions-addall"][disabled]'
+    ).should('not.exist')
+})
+
+Then("the 'move all to source list' button should be disabled", () => {
+    cy.get(
+        '[data-test="dhis2-uicore-transfer-actions-removeall"][disabled]'
+    ).should('exist')
+})
+
+Then("the 'move all to source list' button should be enabled", () => {
+    cy.get('[data-test="dhis2-uicore-transfer-actions-removeall"]').should(
+        'exist'
+    )
+    cy.get(
+        '[data-test="dhis2-uicore-transfer-actions-removeall"][disabled]'
+    ).should('not.exist')
+})

package/src/features/disabled-transfer-buttons.feature

@@ -0,0 +1,46 @@
+@component-transfer @button-states
+Feature: Disable transfer buttons when actions are not possible
+
+    Scenario: None of the selectable options are highlighted
+        Given the options list has items
+        And no option items are highlighted
+        Then the 'move to picked list' button should be disabled
+
+    Scenario: Some of the selectable options are highlighted
+        Given the options list has items
+        And some option items are highlighted
+        Then the 'move to picked list' button should be enabled
+
+    Scenario: None of the selected options are highlighted
+        Given the selected list has items
+        And no selected items are highlighted
+        Then the 'move to source list' button should be disabled
+
+    Scenario: Some of the selected options are highlighted
+        Given the selected list has items
+        And some selected items are highlighted
+        Then the 'move to source list' button should be enabled
+
+    Scenario: The transfer does not have any options at all
+        Given the transfer does not have any options
+        Then the 'move all to picked list' button should be disabled
+
+    Scenario: All options are on the selected side
+        Given all options have been selected
+        Then the 'move all to picked list' button should be disabled
+
+    Scenario: Some items in options list
+        Given the options list has items
+        Then the 'move all to picked list' button should be enabled
+
+    Scenario: No items in selected list
+        Given the selected list does not have items
+        Then the 'move all to source list' button should be disabled
+
+    Scenario: Some items in selected list
+        Given the selected list has items
+        Then the 'move all to source list' button should be enabled
+
+    Scenario: Only disabled options in source list
+        Given a source list that has only disabled options
+        Then the 'move all to picked list' button should be disabled

package/src/features/disabled-transfer-options/index.js

@@ -0,0 +1,182 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+import { extractOptionFromElement } from '../common/index.js'
+
+const enabledSourceOptionSelector =
+    '{transfer-sourceoptions} {transferoption}:not(.disabled)'
+
+const disabledSourceOptionSelector =
+    '{transfer-sourceoptions} {transferoption}.disabled'
+
+Given('a source list that contains a disabled option', () => {
+    cy.visitStory('Disabled Source Options', 'One Disabled')
+    cy.get(disabledSourceOptionSelector)
+        .first()
+        .as('disabledSourceOption')
+        .should('exist')
+})
+
+Given(
+    'a source list that contains at least one disabled option and at least one enabled option',
+    () => {
+        cy.visitStory('Disabled Source Options', 'One Disabled')
+        cy.get(disabledSourceOptionSelector)
+            .first()
+            .as('disabledSourceOption')
+            .should('exist')
+        cy.get(enabledSourceOptionSelector)
+            .as('enabledSourceOptions')
+            .should('exist')
+    }
+)
+
+Given(
+    'a source list that contains at least one disabled option and at least one enabled highlighted option',
+    () => {
+        cy.visitStory('Disabled Source Options', 'One Disabled')
+        cy.get(disabledSourceOptionSelector)
+            .first()
+            .as('disabledSourceOption')
+            .should('exist')
+        cy.get(enabledSourceOptionSelector)
+            .invoke('slice', 0, 2)
+            .as('enabledHighlightedSourceOptions')
+            .each(($option) => cy.wrap($option).click())
+            .should('have.class', 'highlighted')
+    }
+)
+
+Given(
+    'a source list that contains at least one disabled option and several enabled options',
+    () => {
+        cy.visitStory('Disabled Source Options', 'One Disabled')
+        cy.get(disabledSourceOptionSelector)
+            .first()
+            .as('disabledSourceOption')
+            .should('exist')
+        cy.get(enabledSourceOptionSelector)
+            .as('enabledSourceOptions')
+            .should('have.length.of.at.least', 2)
+    }
+)
+
+When('the user clicks a disabled option', () => {
+    cy.get(disabledSourceOptionSelector).click().as('clickedDisabledOption')
+})
+
+When('the user double clicks a disabled option', () => {
+    cy.get(disabledSourceOptionSelector)
+        .dblclick()
+        .as('doubleClickedDisabledOption')
+})
+
+When("the user clicks the 'move all to picked list' button", () => {
+    cy.get('{transfer-actions-addall}').click()
+})
+
+When('the user clicks the disabled item with {string}', (type) => {
+    cy.get(disabledSourceOptionSelector)
+        .clickWith(type)
+        .as('clickedWithModifierDisabledOption')
+})
+
+When('the user SHIFT+clicks the disabled item', () => {
+    cy.get(disabledSourceOptionSelector)
+        .clickWith('shift')
+        .as('clickedWithShiftDisabledOption')
+})
+
+When('the user clicks an enabled option', () => {
+    cy.get(enabledSourceOptionSelector)
+        .first()
+        .click()
+        .as('clickedEnabledOption')
+})
+
+When(
+    'SHIFT+clicks another enabled option, including a disabled item in the range of options',
+    () => {
+        cy.get(disabledSourceOptionSelector)
+            .next()
+            .clickWith('shift')
+            .as('clickedWithShiftEnabledOption')
+    }
+)
+
+Then('the disabled option is not highlighted', () => {
+    cy.get('@disabledSourceOption').should('not.have.class', 'highlighted')
+})
+
+Then('the disabled option is not transferred to the picked list', () => {
+    // if the aliased element still exists, it hasn't been removed
+    // from the source list. Transferring does not need to be tested
+    // here as that's covered by another test
+    cy.get('@disabledSourceOption').should('exist')
+})
+
+Then('the disabled options are not transferred to the picked list', () => {
+    // if the aliased element still exists, it hasn't been removed
+    // from the source list. Transferring does not need to be tested
+    // here as that's covered by another test
+    cy.get('@disabledSourceOption').should('exist')
+})
+
+Then('the enabled options are transferred to the picked list', () => {
+    // if the aliased elements don't exist, it hasn't been removed
+    // from the source list. Transferring does not need to be tested
+    // here as that's covered by another test
+    cy.get('@enabledSourceOptions').should('not.exist')
+})
+
+Then('the previously highlighted items are still highlighted', () => {
+    cy.get('@enabledHighlightedSourceOptions').should(
+        'have.class',
+        'highlighted'
+    )
+})
+
+Then('only the previously highlighted items are highlighted', () => {
+    cy.get('@enabledHighlightedSourceOptions').should(
+        'have.class',
+        'highlighted'
+    )
+
+    cy.all(
+        () => cy.get('{transfer-sourceoptions} {transferoption}'),
+        () => cy.get('@enabledHighlightedSourceOptions')
+    ).should(([$sourceOptions, $previouslyHighlightedOptions]) => {
+        const previouslyHighlightedOptions = $previouslyHighlightedOptions
+            .toArray()
+            .map(extractOptionFromElement)
+
+        const $notHighlightedSourceOptions = $sourceOptions.filter(
+            (_index, sourceOptionEl) => {
+                const label = sourceOptionEl.innerText
+                const value = sourceOptionEl.dataset.value
+                !previouslyHighlightedOptions.find(
+                    (option) => value === option.value && label === option.label
+                )
+            }
+        )
+
+        $notHighlightedSourceOptions.each((_index, option) => {
+            cy.wrap(option).should('not.have.class', 'highlighted')
+        })
+    })
+})
+
+Then('the enabled options in the range are highlighted', () => {
+    cy.all(
+        () => cy.get('{transfer-sourceoptions} {transferoption}'),
+        () => cy.get('@clickedEnabledOption'),
+        () => cy.get('@clickedWithShiftEnabledOption')
+    ).should(
+        ([$all, $clickedEnabledOption, $clickedWithShiftEnabledOption]) => {
+            const from = $clickedEnabledOption.index()
+            const to = $clickedWithShiftEnabledOption.index()
+            const $allInRange = $all.slice(from, to + 1)
+            const $allInRangeEnabled = $allInRange.filter(':not(.disabled)')
+
+            expect($allInRangeEnabled).to.have.class('highlighted')
+        }
+    )
+})

package/src/features/disabled-transfer-options.feature

@@ -0,0 +1,42 @@
+@component-transfer @disabled-options
+Feature: Options can be disabled
+
+    Scenario: The user clicks a disabled option
+        Given a source list that contains a disabled option
+        When the user clicks a disabled option
+        Then the disabled option is not highlighted
+
+    Scenario: The user double clicks a disabled option
+        Given a source list that contains a disabled option
+        When the user double clicks a disabled option
+        Then the disabled option is not transferred to the picked list
+
+    Scenario: The user clicks the 'move all to picked list' button with disabled options in the source list
+        Given a source list that contains at least one disabled option and at least one enabled option
+        When the user clicks the 'move all to picked list' button
+        Then the disabled options are not transferred to the picked list
+        And the enabled options are transferred to the picked list
+
+    Scenario Outline: The user CMD/CTRL+clicks a disabled item with other items highlighted
+        Given a source list that contains at least one disabled option and at least one enabled highlighted option
+        When the user clicks the disabled item with "<type>"
+        Then the disabled option is not highlighted
+        And the previously highlighted items are still highlighted
+
+        Examples:
+            | type |
+            | ctrl |
+            | cmd  |
+
+    Scenario: The user SHIFT+clicks a disabled item with other items highlighted
+        Given a source list that contains at least one disabled option and at least one enabled highlighted option
+        When the user SHIFT+clicks the disabled item
+        Then the disabled option is not highlighted
+        And only the previously highlighted items are highlighted
+
+    Scenario: The user SHIFT+clicks to select a range of options that include a disabled option
+        Given a source list that contains at least one disabled option and several enabled options
+        When the user clicks an enabled option
+        And SHIFT+clicks another enabled option, including a disabled item in the range of options
+        Then the enabled options in the range are highlighted
+        And the disabled option is not highlighted