feat: transfer reorder improvements

components/transfer/i18n/en.pot

@@ -0,0 +1,24 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: i18next-conv\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1)\n"
+"POT-Creation-Date: 2026-05-06T12:25:27.868Z\n"
+"PO-Revision-Date: 2026-05-06T12:25:27.868Z\n"
+
+msgid "Reordering not allowed when filtering list"
+msgstr "Reordering not allowed when filtering list"
+
+msgid "Move selected items to top"
+msgstr "Move selected items to top"
+
+msgid "Move selected items up"
+msgstr "Move selected items up"
+
+msgid "Move selected items down"
+msgstr "Move selected items down"
+
+msgid "Move selected items to bottom"
+msgstr "Move selected items to bottom"

components/transfer/package.json

@@ -27,6 +27,7 @@
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {
+        "@dhis2/d2-i18n": "^1",
         "react": "^16.13 || ^18",
         "react-dom": "^16.13 || ^18",
         "styled-jsx": "^4"
@@ -38,6 +39,7 @@
         "@dhis2-ui/input": "10.13.1",
         "@dhis2-ui/intersection-detector": "10.13.1",
         "@dhis2-ui/loader": "10.13.1",
+        "@dhis2-ui/tooltip": "10.13.1",
         "@dhis2/ui-constants": "10.13.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"

components/transfer/src/__e2e__/reorder-with-buttons.e2e.stories.js

@@ -5,7 +5,7 @@ import { statefulDecorator } from './common/stateful-decorator.js'
 
 export default { title: 'Transfer Reorder Buttons' }
 
-export const HasSomeSelected = (_, { selected, onChange }) => (
+const renderReorderTransfer = (_, { selected, onChange }) => (
     <Transfer
         enableOrderChange
         selected={selected}
@@ -14,7 +14,19 @@ export const HasSomeSelected = (_, { selected, onChange }) => (
     />
 )
 
+export const HasSomeSelected = renderReorderTransfer.bind({})
+
 HasSomeSelected.story = {
+    decorators: [
+        statefulDecorator({
+            initialState: options.slice(0, 8).map(({ value }) => value),
+        }),
+    ],
+}
+
+export const HasThreeSelected = renderReorderTransfer.bind({})
+
+HasThreeSelected.story = {
     decorators: [
         statefulDecorator({
             initialState: options.slice(0, 3).map(({ value }) => value),

components/transfer/src/__tests__/helper/is-reorder-down-disabled.test.js

@@ -4,44 +4,93 @@ describe('Transfer - isReorderDownDisabled', () => {
     const selected = ['foo', 'bar', 'baz']
 
     it('should return true when there are no highlighted picked options', () => {
-        const highlightedPickedOptions = []
         const actual = isReorderDownDisabled({
-            highlightedPickedOptions,
+            highlightedPickedOptions: [],
             selected,
         })
 
         expect(actual).toBe(true)
     })
 
-    it('should return true when there are multiple highlighted picked options', () => {
-        const highlightedPickedOptions = ['bar', 'foo']
+    it('should return true if the last picked option is the only highlighted one', () => {
         const actual = isReorderDownDisabled({
-            highlightedPickedOptions,
+            highlightedPickedOptions: ['baz'],
             selected,
         })
 
         expect(actual).toBe(true)
     })
 
-    it('should return true if the last picked option is highlighted', () => {
-        const highlightedPickedOptions = ['baz']
+    it('should return false when one picked option is highlighted which is not the last one', () => {
+        const actual = isReorderDownDisabled({
+            highlightedPickedOptions: ['bar'],
+            selected,
+        })
 
+        expect(actual).toBe(false)
+    })
+
+    it('should return false for a contiguous multi-select not flush to the bottom', () => {
         const actual = isReorderDownDisabled({
-            highlightedPickedOptions,
+            highlightedPickedOptions: ['foo', 'bar'],
+            selected,
+        })
+
+        expect(actual).toBe(false)
+    })
+
+    it('should return true for a contiguous multi-select flush to the bottom', () => {
+        const actual = isReorderDownDisabled({
+            highlightedPickedOptions: ['bar', 'baz'],
             selected,
         })
 
         expect(actual).toBe(true)
     })
 
-    it('should return false when one picked option is highlighted which is not the last one', () => {
-        const highlightedPickedOptions = ['bar']
+    it('should return true when all items are highlighted', () => {
+        const actual = isReorderDownDisabled({
+            highlightedPickedOptions: ['foo', 'bar', 'baz'],
+            selected,
+        })
+
+        expect(actual).toBe(true)
+    })
 
+    it('should return false for a non-contiguous selection containing the last item', () => {
         const actual = isReorderDownDisabled({
-            highlightedPickedOptions,
+            highlightedPickedOptions: ['foo', 'baz'],
             selected,
         })
 
         expect(actual).toBe(false)
     })
+
+    it('should ignore highlighted values that do not exist in selected', () => {
+        const actual = isReorderDownDisabled({
+            highlightedPickedOptions: ['ghost', 'foo'],
+            selected,
+        })
+
+        expect(actual).toBe(false)
+    })
+
+    it('should return true when all highlighted values are missing from selected', () => {
+        const actual = isReorderDownDisabled({
+            highlightedPickedOptions: ['ghost'],
+            selected,
+        })
+
+        expect(actual).toBe(true)
+    })
+
+    it('should return true when a filter is active on the picked side', () => {
+        const actual = isReorderDownDisabled({
+            highlightedPickedOptions: ['foo'],
+            selected,
+            filterActivePicked: true,
+        })
+
+        expect(actual).toBe(true)
+    })
 })

components/transfer/src/__tests__/helper/is-reorder-up-disabled.test.js

@@ -4,44 +4,93 @@ describe('Transfer - isReorderUpDisabled', () => {
     const selected = ['foo', 'bar', 'baz']
 
     it('should return true when there are no highlighted picked options', () => {
-        const highlightedPickedOptions = []
         const actual = isReorderUpDisabled({
-            highlightedPickedOptions,
+            highlightedPickedOptions: [],
             selected,
         })
 
         expect(actual).toBe(true)
     })
 
-    it('should return true when there are multiple highlighted picked options', () => {
-        const highlightedPickedOptions = ['bar', 'baz']
+    it('should return true if the first picked option is the only highlighted one', () => {
         const actual = isReorderUpDisabled({
-            highlightedPickedOptions,
+            highlightedPickedOptions: ['foo'],
             selected,
         })
 
         expect(actual).toBe(true)
     })
 
-    it('should return true if the first picked option is highlighted', () => {
-        const highlightedPickedOptions = ['foo']
+    it('should return false when one picked option is highlighted which is not the first one', () => {
+        const actual = isReorderUpDisabled({
+            highlightedPickedOptions: ['baz'],
+            selected,
+        })
+
+        expect(actual).toBe(false)
+    })
+
+    it('should return false for a contiguous multi-select not flush to the top', () => {
+        const actual = isReorderUpDisabled({
+            highlightedPickedOptions: ['bar', 'baz'],
+            selected,
+        })
+
+        expect(actual).toBe(false)
+    })
+
+    it('should return true for a contiguous multi-select flush to the top', () => {
+        const actual = isReorderUpDisabled({
+            highlightedPickedOptions: ['foo', 'bar'],
+            selected,
+        })
+
+        expect(actual).toBe(true)
+    })
 
+    it('should return true when all items are highlighted', () => {
         const actual = isReorderUpDisabled({
-            highlightedPickedOptions,
+            highlightedPickedOptions: ['foo', 'bar', 'baz'],
             selected,
         })
 
         expect(actual).toBe(true)
     })
 
-    it('should return false when one picked option is highlighted which is not the last one', () => {
-        const highlightedPickedOptions = ['baz']
+    it('should return false for a non-contiguous selection containing the first item', () => {
+        const actual = isReorderUpDisabled({
+            highlightedPickedOptions: ['foo', 'baz'],
+            selected,
+        })
+
+        expect(actual).toBe(false)
+    })
 
+    it('should ignore highlighted values that do not exist in selected', () => {
         const actual = isReorderUpDisabled({
-            highlightedPickedOptions,
+            highlightedPickedOptions: ['ghost', 'baz'],
             selected,
         })
 
         expect(actual).toBe(false)
     })
+
+    it('should return true when all highlighted values are missing from selected', () => {
+        const actual = isReorderUpDisabled({
+            highlightedPickedOptions: ['ghost'],
+            selected,
+        })
+
+        expect(actual).toBe(true)
+    })
+
+    it('should return true when a filter is active on the picked side', () => {
+        const actual = isReorderUpDisabled({
+            highlightedPickedOptions: ['baz'],
+            selected,
+            filterActivePicked: true,
+        })
+
+        expect(actual).toBe(true)
+    })
 })