Skip to content

Commit

Permalink
EDSC-4349: Adjustments to spatial filter dropdowns and buttons (#1846)
Browse files Browse the repository at this point in the history 
* EDSC-4349 Adjustments to spatial filter dropdowns and buttons

* EDSC-4349 Addressing PR feedback

* EDSC-4349 Fixing test

* EDSC-4343 Fixing broken tests

* EDSC-4349 Updating verbage

* EDSC-4349 Fixing typo

* EDSC-4349 Typo fix

* EDSC-4349 Fixing playwright test
  • Loading branch information
@dpesall
dpesall authored Jan 22, 2025
1 parent 6bbad02 commit 67a97c3
Show file tree
Hide file tree
Showing 5 changed files with 56 additions and 38 deletions.
24 changes: 10 additions & 14 deletions static/src/js/components/SpatialDisplay/SpatialSelectionDropdown.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,12 @@ import {

import {
FaCrop,
FaMapMarker,
FaCircle,
FaFile
} from 'react-icons/fa'

import { Map } from '@edsc/earthdata-react-icons/horizon-design-system/hds/ui'

import { eventEmitter } from '../../events/events'

import { getApplicationConfig } from '../../../../../sharedUtils/config'
Expand Down Expand Up @@ -90,45 +91,40 @@ const SpatialSelectionDropdown = (props) => {
<Dropdown.Item
className="spatial-selection-dropdown__button"
as={Button}
icon="edsc-icon-poly-open edsc-icon-fw"
icon="edsc-icon-poly edsc-icon-fw"
onClick={() => onItemClick('polygon')}
label="Select Polygon"
>
<span>Polygon</span>
</Dropdown.Item>
<Dropdown.Item
className="spatial-selection-dropdown__button"
as={Button}
icon="edsc-icon-rect-open edsc-icon-fw"
icon="edsc-icon-rect edsc-icon-fw"
onClick={() => onItemClick('rectangle')}
label="Select Rectangle"
>
<span>Rectangle</span>
</Dropdown.Item>
<Dropdown.Item
className="spatial-selection-dropdown__button"
as={Button}
icon={FaMapMarker}
onClick={() => onItemClick('point')}
label="Select Point"
icon={FaCircle}
onClick={() => onItemClick('circle')}
>
<span>Point</span>
<span>Circle</span>
</Dropdown.Item>
<Dropdown.Item
className="spatial-selection-dropdown__button"
as={Button}
icon={FaCircle}
onClick={() => onItemClick('circle')}
label="Select Circle"
icon={Map}
onClick={() => onItemClick('point')}
>
<span>Circle</span>
<span>Point</span>
</Dropdown.Item>
<Dropdown.Item
className="spatial-selection-dropdown__button"
as={Button}
icon={FaFile}
onClick={() => onItemClick('file')}
label="Select Shapefile"
disabled={disableShapefileSearch}
>
{
Expand Down
5 changes: 5 additions & 0 deletions static/src/js/components/SpatialDisplay/SpatialSelectionDropdown.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@
.button__contents {
line-height: 1.25rem;
}

.dropdown-item {
text-align: left;
justify-content: flex-start;
}
}

&__button {
Expand Down
22 changes: 11 additions & 11 deletions static/src/js/components/SpatialDisplay/__tests__/SpatialSelectionDropdown.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,11 @@ describe('SpatialSelectionDropdown component', () => {
await user.click(dropdownSelectionButton)
})

expect(screen.getByRole('button', { name: 'Select Polygon' })).toBeInTheDocument()
expect(screen.getByRole('button', { name: 'Select Rectangle' })).toBeInTheDocument()
expect(screen.getByRole('button', { name: 'Select Point' })).toBeInTheDocument()
expect(screen.getByRole('button', { name: 'Select Circle' })).toBeInTheDocument()
expect(screen.getByRole('button', { name: 'Select Shapefile' })).toBeInTheDocument()
expect(screen.getByRole('button', { name: 'Polygon' })).toBeInTheDocument()
expect(screen.getByRole('button', { name: 'Rectangle' })).toBeInTheDocument()
expect(screen.getByRole('button', { name: 'Point' })).toBeInTheDocument()
expect(screen.getByRole('button', { name: 'Circle' })).toBeInTheDocument()
expect(screen.getByRole('button', { name: 'File (KML, KMZ, ESRI, …)' })).toBeInTheDocument()
})

test('clicking the polygon dropdown emits an event and tracks metric', async () => {
Expand All @@ -59,7 +59,7 @@ describe('SpatialSelectionDropdown component', () => {
await user.click(dropdownSelectionButton)
})

await user.click(screen.getByRole('button', { name: 'Select Polygon' }))
await user.click(screen.getByRole('button', { name: 'Polygon' }))

expect(eventEmitterEmitMock).toHaveBeenCalledTimes(1)
expect(eventEmitterEmitMock).toHaveBeenCalledWith('map.drawStart', { type: 'polygon' })
Expand All @@ -80,7 +80,7 @@ describe('SpatialSelectionDropdown component', () => {
await user.click(dropdownSelectionButton)
})

await user.click(screen.getByRole('button', { name: 'Select Rectangle' }))
await user.click(screen.getByRole('button', { name: 'Rectangle' }))

expect(eventEmitterEmitMock).toHaveBeenCalledTimes(1)
expect(eventEmitterEmitMock).toHaveBeenCalledWith('map.drawStart', { type: 'rectangle' })
Expand All @@ -101,7 +101,7 @@ describe('SpatialSelectionDropdown component', () => {
await user.click(dropdownSelectionButton)
})

await user.click(screen.getByRole('button', { name: 'Select Point' }))
await user.click(screen.getByRole('button', { name: 'Point' }))

expect(eventEmitterEmitMock).toHaveBeenCalledTimes(1)
expect(eventEmitterEmitMock).toHaveBeenCalledWith('map.drawStart', { type: 'marker' })
Expand All @@ -122,7 +122,7 @@ describe('SpatialSelectionDropdown component', () => {
await user.click(dropdownSelectionButton)
})

await user.click(screen.getByRole('button', { name: 'Select Circle' }))
await user.click(screen.getByRole('button', { name: 'Circle' }))

expect(eventEmitterEmitMock).toHaveBeenCalledTimes(1)
expect(eventEmitterEmitMock).toHaveBeenCalledWith('map.drawStart', { type: 'circle' })
Expand All @@ -141,7 +141,7 @@ describe('SpatialSelectionDropdown component', () => {
await user.click(dropdownSelectionButton)
})

await user.click(screen.getByRole('button', { name: 'Select Shapefile' }))
await user.click(screen.getByRole('button', { name: 'File (KML, KMZ, ESRI, …)' }))

expect(onToggleShapefileUploadModal).toHaveBeenCalledTimes(1)
expect(onToggleShapefileUploadModal).toHaveBeenCalledWith(true)
Expand All @@ -166,7 +166,7 @@ describe('SpatialSelectionDropdown component', () => {
await user.click(dropdownSelectionButton)
})

const shapeFileSelectionButton = screen.getByRole('button', { name: 'Select Shapefile' })
const shapeFileSelectionButton = screen.getByRole('button', { name: 'File (KML, KMZ, ESRI, …)' })
await user.click(shapeFileSelectionButton)

expect(shapeFileSelectionButton).toBeDisabled()
Expand Down
17 changes: 17 additions & 0 deletions static/src/js/components/SpatialSelection/SpatialSelection.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -529,6 +529,23 @@ const SpatialSelection = (props) => {
// Callback from EditControl, called when the controls are mounted
const onMounted = (newDrawControl) => {
drawControl.current = newDrawControl

// Add aria-labels to draw buttons
const drawToolbar = document.querySelector('.leaflet-draw-toolbar')
if (drawToolbar) {
const buttons = drawToolbar.querySelectorAll('.leaflet-draw-draw-circle, .leaflet-draw-draw-polygon, .leaflet-draw-draw-rectangle, .leaflet-draw-draw-marker')
buttons.forEach((button) => {
if (button.classList.contains('leaflet-draw-draw-circle')) {
button.setAttribute('aria-label', 'Draw a circle on the map to select a spatial extent')
} else if (button.classList.contains('leaflet-draw-draw-polygon')) {
button.setAttribute('aria-label', 'Draw a polygon on the map to select a spatial extent')
} else if (button.classList.contains('leaflet-draw-draw-rectangle')) {
button.setAttribute('aria-label', 'Draw a rectangle on the map to select a spatial extent')
} else if (button.classList.contains('leaflet-draw-draw-marker')) {
button.setAttribute('aria-label', 'Draw a coordinate on the map to select a spatial extent')
}
})
}
}

// Trigger a leaflet drawing from the spatial dropdown
Expand Down
26 changes: 13 additions & 13 deletions tests/e2e/map/map_spatial.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ test.describe('Map: Spatial interactions', () => {

// Select the point spatial type
await page.getByRole('button', { name: 'spatial-selection-dropdown' }).click()
await page.getByRole('button', { name: 'Select Point' }).click()
await page.getByRole('button', { name: 'Point' }).click()

// Add the point to the map
await page.mouse.click(1000, 500)
Expand Down Expand Up @@ -90,7 +90,7 @@ test.describe('Map: Spatial interactions', () => {
await page.goto('/')

// Select the point spatial type
await page.getByRole('link', { name: 'Search by spatial coordinate' }).click()
await page.getByRole('link', { name: 'Draw a coordinate on the map to select a spatial extent' }).click()

// Add the point to the map
await page.mouse.click(1000, 500)
Expand Down Expand Up @@ -127,7 +127,7 @@ test.describe('Map: Spatial interactions', () => {

// Select the point spatial type
await page.getByRole('button', { name: 'spatial-selection-dropdown' }).click()
await page.getByRole('button', { name: 'Select Point' }).click()
await page.getByRole('button', { name: 'Point' }).click()

// Enter the spatial point
await page.getByTestId('spatial-display_point').focus()
Expand Down Expand Up @@ -173,7 +173,7 @@ test.describe('Map: Spatial interactions', () => {
await page.goto('/')

// Select the point spatial type
await page.getByRole('link', { name: 'Search by spatial coordinate' }).click()
await page.getByRole('link', { name: 'Draw a coordinate on the map to select a spatial extent' }).click()

// Add the point to the map
await page.mouse.click(1000, 500)
Expand Down Expand Up @@ -234,7 +234,7 @@ test.describe('Map: Spatial interactions', () => {

// Select the circle spatial type
await page.getByRole('button', { name: 'spatial-selection-dropdown' }).click()
await page.getByRole('button', { name: 'Select Circle' }).click()
await page.getByRole('button', { name: 'Circle' }).click()

// Add the circle to the map
await page.mouse.move(1000, 500)
Expand Down Expand Up @@ -274,7 +274,7 @@ test.describe('Map: Spatial interactions', () => {
await page.goto('/')

// Select the circle spatial type
await page.getByRole('link', { name: 'Search by spatial circle' }).click()
await page.getByRole('link', { name: 'Draw a circle on the map to select a spatial extent' }).click()

// Add the point to the map
await page.mouse.move(1000, 500)
Expand Down Expand Up @@ -315,7 +315,7 @@ test.describe('Map: Spatial interactions', () => {

// Select the circle spatial type
await page.getByRole('button', { name: 'spatial-selection-dropdown' }).click()
await page.getByRole('button', { name: 'Select Circle' }).click()
await page.getByRole('button', { name: 'Circle' }).click()

// Enter the circle values
await page.getByTestId('spatial-display_circle-center').focus()
Expand Down Expand Up @@ -364,7 +364,7 @@ test.describe('Map: Spatial interactions', () => {
await page.goto('/')

// Select the circle spatial type
await page.getByRole('link', { name: 'Search by spatial circle' }).click()
await page.getByRole('link', { name: 'Draw a circle on the map to select a spatial extent' }).click()

// Add the point to the map
await page.mouse.move(1000, 500)
Expand Down Expand Up @@ -431,7 +431,7 @@ test.describe('Map: Spatial interactions', () => {

// Select the bounding box spatial type
await page.getByRole('button', { name: 'spatial-selection-dropdown' }).click()
await page.getByRole('button', { name: 'Select Rectangle' }).click()
await page.getByRole('button', { name: 'Rectangle' }).click()

// Add the bounding box to the map
await page.mouse.click(1000, 500)
Expand Down Expand Up @@ -510,7 +510,7 @@ test.describe('Map: Spatial interactions', () => {

// Select the bounding box spatial type
await page.getByRole('button', { name: 'spatial-selection-dropdown' }).click()
await page.getByRole('button', { name: 'Select Rectangle' }).click()
await page.getByRole('button', { name: 'Rectangle' }).click()

// Enter the bounding box values
await page.getByTestId('spatial-display_southwest-point').focus()
Expand Down Expand Up @@ -562,7 +562,7 @@ test.describe('Map: Spatial interactions', () => {

// Select the bounding box spatial type
await page.getByRole('button', { name: 'spatial-selection-dropdown' }).click()
await page.getByRole('button', { name: 'Select Rectangle' }).click()
await page.getByRole('button', { name: 'Rectangle' }).click()

// Add the bounding box to the map
await page.mouse.click(1000, 500)
Expand Down Expand Up @@ -627,7 +627,7 @@ test.describe('Map: Spatial interactions', () => {

// Select the polygon spatial type
await page.getByRole('button', { name: 'spatial-selection-dropdown' }).click()
await page.getByRole('button', { name: 'Select Polygon' }).click()
await page.getByRole('button', { name: 'Polygon' }).click()

// Add the polygon to the map
await page.mouse.click(1000, 500)
Expand Down Expand Up @@ -741,7 +741,7 @@ test.describe('Map: Spatial interactions', () => {

// Select the polygon spatial type
await page.getByRole('button', { name: 'spatial-selection-dropdown' }).click()
await page.getByRole('button', { name: 'Select Polygon' }).click()
await page.getByRole('button', { name: 'Polygon' }).click()

// Add the polygon to the map
await page.mouse.click(1000, 500)
Expand Down

0 comments on commit 67a97c3

Please sign in to comment.