Add all-band selection actions

modules/gui/src/app/home/body/process/panels/inputImagery/bandSpec.jsx

@@ -22,8 +22,8 @@ export class BandSpec extends React.Component {
                 disabled={disabled}
                 onClick={() => onClick(id)}>
                 <CrudItem
-                    title={msg(['process.panels.inputImagery.form.type', type])}
-                    description={band}
+                    title={band}
+                    metadata={msg(['process.panels.inputImagery.form.type', type])}
                     unsafeRemove
                     onRemove={() => onRemove(id)}
                 />

modules/gui/src/app/home/body/process/panels/inputImagery/bandSpec.test.jsx

@@ -0,0 +1,28 @@
+import {describe, expect, it, vi} from 'vitest'
+
+vi.mock('~/translate', () => ({msg: id => id}))
+vi.mock('~/widget/legend/legend', () => ({Legend: () => null}))
+
+import {BandSpec} from './bandSpec'
+
+describe('BandSpec', () => {
+    it('shows the band name and type on the same line', () => {
+        const bandSpec = new BandSpec({
+            bands: {red: {}},
+            spec: {id: 'red-id', band: 'red', type: 'continuous'},
+            selected: false,
+            onClick: vi.fn(),
+            onRemove: vi.fn(),
+            onUpdate: vi.fn()
+        })
+
+        const item = bandSpec.render().props.children
+
+        expect(item.props.title).toBe('red')
+        expect(item.props.metadata).toEqual([
+            'process.panels.inputImagery.form.type',
+            'continuous'
+        ])
+        expect(item.props.description).toBeUndefined()
+    })
+})

modules/gui/src/app/home/body/process/panels/inputImagery/imageForm.jsx

@@ -2,11 +2,19 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React, {Component} from 'react'
 
+import {msg} from '~/translate'
+import {ButtonPopup} from '~/widget/buttonPopup'
+import {Combo} from '~/widget/combo'
+import {CrudItem} from '~/widget/crudItem'
 import {Layout} from '~/widget/layout'
+import {ListItem} from '~/widget/listItem'
+import {NoData} from '~/widget/noData'
 
 import {bandsAvailableToAdd, defaultBand} from './bands'
 import {BandSpec} from './bandSpec'
 
+const ADD_ALL_BANDS = Symbol('addAllBands')
+
 export class ImageForm extends Component {
     state = {
         loadedRecipe: null,
@@ -41,28 +49,99 @@ export class ImageForm extends Component {
     }
 
     renderIncludedBands() {
+        const {inputs: {bands, includedBands}} = this.props
+        if (!Object.keys(bands.value || {}).length) {
+            return null
+        }
+        return (
+            <ListItem
+                expanded
+                expansion={this.renderBandSpecs()}>
+                <CrudItem
+                    title={msg('process.classification.panel.inputImagery.bandSetSpec.imageBands.label')}
+                    inlineComponents={this.renderAddBandButton()}
+                    removeConfirmationLabel={msg('button.removeAll')}
+                    removeDisabled={!includedBands.value?.length}
+                    onRemove={() => this.removeAllBandSpecs()}
+                />
+            </ListItem>
+        )
+    }
+
+    renderBandSpecs() {
         const {inputs: {bands, includedBands}} = this.props
         const {loadedRecipe, selected} = this.state
         const availableBands = bandsAvailableToAdd(bands.value, includedBands.value)
+        const bandSpecs = (includedBands.value || []).map(bandSpec =>
+            <BandSpec
+                key={bandSpec.band}
+                bands={_.omit(bands.value, Object.keys(bands.value)
+                    .filter(b => ![bandSpec.band, ...availableBands].includes(b))) || {}}
+                recipe={loadedRecipe}
+                spec={bandSpec}
+                selected={selected === bandSpec.id}
+                disabled={!Object.keys(bands.value).length}
+                onClick={id => this.selectBandSpec(id)}
+                onUpdate={spec => this.updateSpec(spec)}
+                onRemove={id => this.removeBandSpec(id)}/>
+        )
         return (
             <Layout type='vertical' spacing='tight'>
-                {(includedBands.value || []).map(bandSpec =>
-                    <BandSpec
-                        key={bandSpec.band}
-                        bands={_.omit(bands.value, Object.keys(bands.value)
-                            .filter(b => ![bandSpec.band, ...availableBands].includes(b))) || {}}
-                        recipe={loadedRecipe}
-                        spec={bandSpec}
-                        selected={selected === bandSpec.id}
-                        disabled={!Object.keys(bands.value).length}
-                        onClick={id => this.selectBandSpec(id)}
-                        onUpdate={spec => this.updateSpec(spec)}
-                        onRemove={id => this.removeBandSpec(id)}/>
-                )}
+                {bandSpecs.length
+                    ? bandSpecs
+                    : <NoData message={msg('process.panels.inputImagery.form.noBands')}/>
+                }
             </Layout>
         )
     }
 
+    renderAddBandButton() {
+        const {inputs: {bands, includedBands}} = this.props
+        const availableBands = bandsAvailableToAdd(bands.value, includedBands.value)
+        const options = availableBands.map(band => ({value: band, label: band}))
+        const comboOptions = options.length > 1
+            ? [
+                {
+                    key: 'add-all-bands',
+                    value: ADD_ALL_BANDS,
+                    label: msg('process.classification.panel.inputImagery.bandSetSpec.addBands.all.label')
+                },
+                ...options
+            ]
+            : options
+        return (
+            <ButtonPopup
+                shape='circle'
+                chromeless
+                icon='plus'
+                noChevron
+                vPlacement='below'
+                hPlacement='over-left'
+                tooltip={msg('process.classification.panel.inputImagery.bandSetSpec.addBands.tooltip')}
+                disabled={!availableBands.length}>
+                {onBlur => (
+                    <Combo
+                        alignment='left'
+                        placeholder={msg('process.classification.panel.inputImagery.bandSetSpec.addBands.placeholder')}
+                        options={comboOptions}
+                        stayOpenOnSelect
+                        autoOpen
+                        autoFocus
+                        allowClear
+                        onCancel={onBlur}
+                        onChange={({value}) => {
+                            if (value === ADD_ALL_BANDS) {
+                                this.addAllBands(availableBands)
+                            } else {
+                                this.addBand(value)
+                            }
+                        }}
+                    />
+                )}
+            </ButtonPopup>
+        )
+    }
+
     componentDidUpdate(prevProps) {
         const {inputs: {includedBands: prevIncludedBands}} = prevProps
         const {inputs: {includedBands}} = this.props
@@ -94,6 +173,27 @@ export class ImageForm extends Component {
         )
     }
 
+    removeAllBandSpecs() {
+        const {inputs: {includedBands}} = this.props
+        includedBands.set([])
+    }
+
+    addBand(band) {
+        this.addBands([band])
+    }
+
+    addAllBands(bands) {
+        this.addBands(bands)
+    }
+
+    addBands(bandNames) {
+        const {inputs: {bands, includedBands}} = this.props
+        includedBands.set([
+            ...(includedBands.value || []),
+            ...bandNames.map(band => defaultBand(band, bands.value))
+        ])
+    }
+
     onLoaded(id, loadedBands, loadedVisualizations, loadedRecipe) {
         const {form, inputs: {bands, visualizations, recipe, includedBands}} = this.props
         if (!id || !form.isDirty()) {

modules/gui/src/app/home/body/process/panels/inputImagery/imageForm.test.jsx

@@ -0,0 +1,132 @@
+import {describe, expect, it, vi} from 'vitest'
+
+vi.mock('~/translate', () => ({msg: id => id}))
+vi.mock('./bandSpec', () => ({BandSpec: () => null}))
+
+import {ImageForm} from './imageForm'
+
+describe('ImageForm band collection', () => {
+    it('wraps selected bands in an Image bands collection with add and clear actions', () => {
+        const includedBands = {
+            value: [{id: 'red-id', band: 'red', type: 'continuous', legendEntries: []}],
+            set: vi.fn()
+        }
+        const imageForm = new ImageForm({
+            inputs: {
+                bands: {value: {red: {}, nir: {}}},
+                includedBands
+            }
+        })
+
+        const collection = imageForm.renderIncludedBands()
+        const header = collection.props.children
+
+        expect(collection.props.expanded).toBe(true)
+        expect(collection.props.expansion).toBeDefined()
+        expect(header.props.title).toBe('process.classification.panel.inputImagery.bandSetSpec.imageBands.label')
+        expect(header.props.inlineComponents.props.icon).toBe('plus')
+        expect(header.props.removeDisabled).toBe(false)
+        expect(header.props.removeConfirmationLabel).toBe('button.removeAll')
+        expect(header.props.onRemove).toEqual(expect.any(Function))
+    })
+
+    it('keeps the collection expanded and renders an empty state when no bands are selected', () => {
+        const imageForm = new ImageForm({
+            inputs: {
+                bands: {value: {red: {}, nir: {}}},
+                includedBands: {value: [], set: vi.fn()}
+            }
+        })
+
+        const collection = imageForm.renderIncludedBands()
+        const emptyState = collection.props.expansion.props.children
+
+        expect(collection.props.expanded).toBe(true)
+        expect(emptyState.props.message).toBe('process.panels.inputImagery.form.noBands')
+    })
+
+    it('clears every selected band from the collection', () => {
+        const includedBands = {
+            value: [
+                {id: 'red-id', band: 'red', type: 'continuous', legendEntries: []},
+                {id: 'nir-id', band: 'nir', type: 'continuous', legendEntries: []}
+            ],
+            set: vi.fn()
+        }
+        const imageForm = new ImageForm({
+            inputs: {
+                bands: {value: {red: {}, nir: {}}},
+                includedBands
+            }
+        })
+        const clearAction = imageForm.renderIncludedBands().props.children.props.onRemove
+
+        clearAction()
+
+        expect(includedBands.set).toHaveBeenCalledWith([])
+    })
+
+    it('adds the real band named all without invoking the bulk action', () => {
+        const existingBand = {id: 'red-id', band: 'red', type: 'continuous', legendEntries: [], custom: true}
+        const includedBands = {
+            value: [existingBand],
+            set: vi.fn()
+        }
+        const imageForm = new ImageForm({
+            inputs: {
+                bands: {value: {red: {}, all: {}, nir: {}}},
+                includedBands
+            }
+        })
+        const addButton = imageForm.renderIncludedBands().props.children.props.inlineComponents
+        const combo = addButton.props.children(vi.fn())
+        const realAllBand = combo.props.options.find(({label}) => label === 'all')
+
+        combo.props.onChange(realAllBand)
+
+        const updatedBands = includedBands.set.mock.calls[0][0]
+        expect(updatedBands[0]).toBe(existingBand)
+        expect(updatedBands.map(({band}) => band)).toEqual(['red', 'all'])
+    })
+
+    it('adds every remaining band from the picker bulk action', () => {
+        const existingBand = {id: 'red-id', band: 'red', type: 'continuous', legendEntries: [], custom: true}
+        const includedBands = {
+            value: [existingBand],
+            set: vi.fn()
+        }
+        const imageForm = new ImageForm({
+            inputs: {
+                bands: {value: {red: {}, all: {}, nir: {}}},
+                includedBands
+            }
+        })
+        const addButton = imageForm.renderIncludedBands().props.children.props.inlineComponents
+        const combo = addButton.props.children(vi.fn())
+        const addAll = combo.props.options.find(
+            ({label}) => label === 'process.classification.panel.inputImagery.bandSetSpec.addBands.all.label'
+        )
+
+        combo.props.onChange(addAll)
+
+        const updatedBands = includedBands.set.mock.calls[0][0]
+        expect(updatedBands[0]).toBe(existingBand)
+        expect(updatedBands.map(({band}) => band)).toEqual(['red', 'all', 'nir'])
+    })
+
+    it('disables the add action when every band is selected', () => {
+        const imageForm = new ImageForm({
+            inputs: {
+                bands: {value: {red: {}}},
+                includedBands: {
+                    value: [{id: 'red-id', band: 'red', type: 'continuous', legendEntries: []}],
+                    set: vi.fn()
+                }
+            }
+        })
+
+        const addButton = imageForm.renderIncludedBands().props.children.props.inlineComponents
+
+        expect(addButton.props.disabled).toBe(true)
+    })
+})

modules/gui/src/app/home/body/process/panels/inputImagery/inputImage.jsx

@@ -6,11 +6,9 @@ import {compose} from '~/compose'
 import {selectFrom} from '~/stateUtils'
 import {msg} from '~/translate'
 import {Form} from '~/widget/form'
-import {Panel} from '~/widget/panel/panel'
 import {PanelSections} from '~/widget/panelSections'
 
 import {AssetSection} from './assetSection'
-import {bandsAvailableToAdd, defaultBand} from './bands'
 import {ImageForm} from './imageForm'
 import styles from './inputImage.module.css'
 import {RecipeSection} from './recipeSection'
@@ -74,13 +72,6 @@ class _InputImage extends React.Component {
                     selected={inputs.section}
                     icon='image'
                     label={msg('process.panels.inputImagery.sections.title')}
-                    defaultButtons={
-                        <Form.PanelButtons>
-                            <Panel.Buttons.Add
-                                disabled={!this.canAddBand()}
-                                onClick={() => this.addBand()}/>
-                        </Form.PanelButtons>
-                    }
                 />
             </RecipeFormPanel>
         )
@@ -91,19 +82,6 @@ class _InputImage extends React.Component {
         inputs.imageId.set(imageId)
     }
 
-    canAddBand() {
-        const {inputs: {bands, includedBands}} = this.props
-        return !!bandsAvailableToAdd(bands.value, includedBands.value).length
-    }
-
-    addBand() {
-        const {inputs: {bands, includedBands}} = this.props
-        const availableBands = bandsAvailableToAdd(bands.value, includedBands.value)
-        if (availableBands.length) {
-            includedBands.set([...(includedBands.value || []), defaultBand(availableBands[0], bands.value)])
-        }
-    }
-
     updateImageLayerSources({section, asset, recipe: recipeId, visualizations}) {
         const {recipeActionBuilder, onChange} = this.props