- 
-
-
-
- {title}
-
-
- {t('pointCount', { count: pointCount })}
- - -
-
;
-};
-
-export default SubjectTracksList;
diff --git a/src/SubjectTrackLegend/SubjectTracksList/index.test.js b/src/SubjectTrackLegend/SubjectTracksList/index.test.js
deleted file mode 100644
index c26494981..000000000
--- a/src/SubjectTrackLegend/SubjectTracksList/index.test.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import React from 'react';
-import { Provider } from 'react-redux';
-import userEvent from '@testing-library/user-event';
-
-import { render, screen } from '../../test-utils';
-import { mockStore } from '../../__test-helpers/MockStore';
-
-import SubjectTracksList from '.';
-
-describe('SubjectTrackLegend - SubjectTracksList', () => {
- const onClose = jest.fn();
- const onRemoveSubjectTracks = jest.fn();
-
- let store;
- beforeEach(() => {
- store = {
- data: {
- subjectStore: {
- 1234: {
- last_position: {
- properties: {
- image: 'https://root.dev.pamdas.org/static/elk-male.svg',
- },
- },
- },
- 5678: {
- last_position: {
- properties: {
- image: 'https://root.dev.pamdas.org/static/bison-male.svg',
- },
- },
- },
- },
- },
- };
- });
-
- const renderSubjectTracksList = (props, overrideStore) => render(
-
-
-
- {t('title')}
- - --
- {subjectTracks.map((subjectTracks) =>
-
-
-
-
-
-
- {timeOfDayTrackingEnabled &&
- }
-
;
-};
-
-// Wrap the component with a delayed unmount so the slide out transition ends before unmounting.
-const SubjectTrackLegendDelayedUnmount = () => {
- const subjectTrackState = useSelector((state) => state.view.subjectTrackState);
-
- const subjectTracksCount = useMemo(
- () => uniq([...subjectTrackState.visible, ...subjectTrackState.pinned]).length,
- [subjectTrackState.pinned, subjectTrackState.visible]
- );
-
- // We unmount the component after the collapse transition ends when there are no more subject tracks.
- return
-
-
-
-
-
-
- {titleIconSrc
- ? 
- :
-
- {title}
} -
- {timeOfDayTrackingEnabled && }
-
-
-
-
-
- - {t('pointsOverTime', { pointCount: subjectTrackPointCount, trackTime: trackTimeEnvelopeFormatted })} -
- - -
-
-
-
-
- onExpandMenu(MENUS.TIME_OF_DAY_SETTINGS)}
- />
-
-
diff --git a/src/SubjectTrackLegend/TimeOfDaySettings/index.test.js b/src/TrackLegend/TimeOfDaySettings/index.test.js
similarity index 97%
rename from src/SubjectTrackLegend/TimeOfDaySettings/index.test.js
rename to src/TrackLegend/TimeOfDaySettings/index.test.js
index e23e9945e..67634d342 100644
--- a/src/SubjectTrackLegend/TimeOfDaySettings/index.test.js
+++ b/src/TrackLegend/TimeOfDaySettings/index.test.js
@@ -7,7 +7,7 @@ import { mockStore } from '../../__test-helpers/MockStore';
import TimeOfDaySettings from '.';
-describe('SubjectTrackLegend - TimeOfDaySettings', () => {
+describe('TrackLegend - TimeOfDaySettings', () => {
const onCollapseTimeOfDaySettings = jest.fn();
const onExpandTimeOfDaySettings = jest.fn();
diff --git a/src/SubjectTrackLegend/TimeOfDaySettings/styles.module.scss b/src/TrackLegend/TimeOfDaySettings/styles.module.scss
similarity index 100%
rename from src/SubjectTrackLegend/TimeOfDaySettings/styles.module.scss
rename to src/TrackLegend/TimeOfDaySettings/styles.module.scss
diff --git a/src/SubjectTrackLegend/TrackSettings/index.js b/src/TrackLegend/TrackSettings/index.js
similarity index 97%
rename from src/SubjectTrackLegend/TrackSettings/index.js
rename to src/TrackLegend/TrackSettings/index.js
index b527dd37f..00ad37251 100644
--- a/src/SubjectTrackLegend/TrackSettings/index.js
+++ b/src/TrackLegend/TrackSettings/index.js
@@ -20,7 +20,7 @@ const MIN_TRACK_LENGTH = 1;
const TrackSettings = ({ onClose }) => {
const dispatch = useDispatch();
- const { t } = useTranslation('tracks', { keyPrefix: 'subjectTrackLegend.trackSettings' });
+ const { t } = useTranslation('tracks', { keyPrefix: 'trackLegend.trackSettings' });
const lowerEventFilterDateRange = useSelector((state) => state.data.eventFilter.filter.date_range.lower);
const trackSettings = useSelector((state) => state.view.trackSettings);
@@ -46,7 +46,7 @@ const TrackSettings = ({ onClose }) => {
}, [dispatch, lengthFromEventFilterLowerRangeToToday, trackSettings.origin]);
useEffect(() => {
- // If the track length origin is set to a custom length, the track length follows the inputs while they ahve a
+ // If the track length origin is set to a custom length, the track length follows the inputs while they have a
// valid value.
if (trackSettings.origin === TRACK_LENGTH_ORIGINS.CUSTOM_LENGTH) {
const isCustomLengthValid = (customLength >= MIN_TRACK_LENGTH)
diff --git a/src/SubjectTrackLegend/TrackSettings/index.test.js b/src/TrackLegend/TrackSettings/index.test.js
similarity index 98%
rename from src/SubjectTrackLegend/TrackSettings/index.test.js
rename to src/TrackLegend/TrackSettings/index.test.js
index 943b3f5ed..5d7ddb5f2 100644
--- a/src/SubjectTrackLegend/TrackSettings/index.test.js
+++ b/src/TrackLegend/TrackSettings/index.test.js
@@ -15,7 +15,7 @@ jest.mock('../../ducks/tracks', () => ({
setTrackLengthOrigin: jest.fn(),
}));
-describe('SubjectTrackLegend - TrackSettings', () => {
+describe('TrackLegend - TrackSettings', () => {
const onClose = jest.fn();
let setTrackLengthMock, setTrackLengthOriginMock, store;
diff --git a/src/SubjectTrackLegend/TrackSettings/styles.module.scss b/src/TrackLegend/TrackSettings/styles.module.scss
similarity index 100%
rename from src/SubjectTrackLegend/TrackSettings/styles.module.scss
rename to src/TrackLegend/TrackSettings/styles.module.scss
diff --git a/src/TrackLegend/TracksList/index.js b/src/TrackLegend/TracksList/index.js
new file mode 100644
index 000000000..1f9403851
--- /dev/null
+++ b/src/TrackLegend/TracksList/index.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { ReactComponent as CrossIcon } from '../../common/images/icons/cross.svg';
+
+import styles from './styles.module.scss';
+
+const TracksItem = ({ item, onRemove }) => {
+ const { t } = useTranslation('tracks', { keyPrefix: 'trackLegend.tracksList.tracksItem' });
+
+ return
+ ;
+};
+
+const TracksList = ({ items, itemsName, onClose, onRemoveItemTracks }) => {
+ const { t } = useTranslation('tracks', { keyPrefix: 'trackLegend.tracksList' });
+
+ return 
,
+ id: '1',
+ title: 'Item 1 title',
+ }, {
+ description: 'Item 2 description',
+ icon: 
,
+ id: '2',
+ title: 'Item 2 title',
+ }],
+ });
+
+ expect(screen.getAllByRole('listitem')).toHaveLength(2);
+ });
+
+ test('shows the item icon', () => {
+ renderTracksList({
+ items: [{
+ description: 'Item 1 description',
+ icon: ,
+ id: '1',
+ title: 'Item 1 title',
+ }, {
+ description: 'Item 2 description',
+ icon: ,
+ id: '2',
+ title: 'Item 2 title',
+ }],
+ });
+
+ expect(screen.getByAltText('Item 1 icon')).toHaveAttribute('src', 'icon-1');
+ expect(screen.getByAltText('Item 2 icon')).toHaveAttribute('src', 'icon-2');
+ });
+
+ test('shows the item title', () => {
+ renderTracksList({
+ items: [{
+ description: 'Item 1 description',
+ icon: ,
+ id: '1',
+ title: 'Item 1 title',
+ }, {
+ description: 'Item 2 description',
+ icon: ,
+ id: '2',
+ title: 'Item 2 title',
+ }],
+ });
+
+ expect(screen.getByText('Item 1 title')).toBeVisible();
+ expect(screen.getByText('Item 2 title')).toBeVisible();
+ });
+
+ test('shows the item description', () => {
+ renderTracksList({
+ items: [{
+ description: 'Item 1 description',
+ icon: ,
+ id: '1',
+ title: 'Item 1 title',
+ }, {
+ description: 'Item 2 description',
+ icon: ,
+ id: '2',
+ title: 'Item 2 title',
+ }],
+ });
+
+ expect(screen.getByText('Item 1 description')).toBeVisible();
+ expect(screen.getByText('Item 2 description')).toBeVisible();
+ });
+
+ test('removes an item from the tracks list', () => {
+ renderTracksList({
+ items: [{
+ description: 'Item 1 description',
+ icon: ,
+ id: '1',
+ title: 'Item 1 title',
+ }, {
+ description: 'Item 2 description',
+ icon: ,
+ id: '2',
+ title: 'Item 2 title',
+ }],
+ });
+
+ expect(onRemoveItemTracks).not.toHaveBeenCalled();
+
+ userEvent.click(screen.getByLabelText('Remove Item 2 title'));
+
+ expect(onRemoveItemTracks).toHaveBeenCalledTimes(1);
+ expect(onRemoveItemTracks).toHaveBeenCalledWith('2');
+ });
+});
diff --git a/src/SubjectTrackLegend/SubjectTracksList/styles.module.scss b/src/TrackLegend/TracksList/styles.module.scss
similarity index 92%
rename from src/SubjectTrackLegend/SubjectTracksList/styles.module.scss
rename to src/TrackLegend/TracksList/styles.module.scss
index 511f1d90b..1388ef103 100644
--- a/src/SubjectTrackLegend/SubjectTracksList/styles.module.scss
+++ b/src/TrackLegend/TracksList/styles.module.scss
@@ -2,7 +2,7 @@
@use '../../common/styles/vars/colors';
-.subjectTracksList {
+.tracksList {
backdrop-filter: blur(2px);
background: rgb(white, 90%);
border-radius: 0.25rem;
@@ -19,6 +19,7 @@
.title {
color: black;
margin: 0;
+ text-transform: capitalize;
}
.closeButton {
@@ -49,7 +50,7 @@
max-height: 12.5rem;
overflow-y: scroll;
- .subjectTracksItem {
+ .tracksItem {
align-items: center;
background: white;
border-radius: 0.25rem;
@@ -63,12 +64,6 @@
display: flex;
margin-right: 0.25rem;
- .icon {
- height: 1rem;
- margin-right: 0.5rem;
- max-width: 1rem;
- }
-
.title {
color: black;
font-size: 0.875rem;
@@ -85,7 +80,7 @@
display: flex;
margin-right: 0.25rem;
- .pointCount {
+ .description {
color: colors.$secondary-medium-gray;
font-size: 0.75rem;
margin: 0;
diff --git a/src/TrackLegend/index.js b/src/TrackLegend/index.js
new file mode 100644
index 000000000..e4e6838f4
--- /dev/null
+++ b/src/TrackLegend/index.js
@@ -0,0 +1,204 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import Collapse from 'react-bootstrap/Collapse';
+import { useDispatch, useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+
+import { ReactComponent as DayNightIcon } from '../common/images/icons/day-night.svg';
+import { ReactComponent as GearIcon } from '../common/images/icons/gear.svg';
+import { ReactComponent as TracksOffIcon } from '../common/images/icons/tracks_off.svg';
+
+import { BOOTSTRAP_DEFAULTS, FEATURE_FLAG_LABELS } from '../constants';
+import { setIsTimeOfDayColoringActive } from '../ducks/tracks';
+import { useFeatureFlag } from '../hooks';
+
+import DelayedUnmount from '../DelayedUnmount';
+import TimeOfDaySettings from './TimeOfDaySettings';
+import TrackSettings from './TrackSettings';
+import TracksList from './TracksList';
+
+import styles from './styles.module.scss';
+
+const MENUS = {
+ TIME_OF_DAY_SETTINGS: 'TIME_OF_DAY_SETTINGS',
+ TRACK_SETTINGS: 'TRACK_SETTINGS',
+ TRACKS_LIST: 'TRACKS_LIST',
+};
+
+const TrackLegend = ({
+ description,
+ items,
+ itemsName,
+ onClickClearTracks,
+ onRemoveItemTracks,
+ showTimeOfDaySettings = true,
+ showTrackSettings = true,
+}) => {
+ const dispatch = useDispatch();
+ const { t } = useTranslation('tracks', { keyPrefix: 'trackLegend' });
+
+ const timeOfDayTrackingEnabled = useFeatureFlag(FEATURE_FLAG_LABELS.TIME_OF_DAY_TRACKING);
+
+ const isTimeOfDayColoringActive = useSelector((state) => state.view.trackSettings.isTimeOfDayColoringActive);
+
+ // This variable tracks if a menu is expanded, which one it is. There can be only one menu expanded at a time.
+ const [expandedMenu, setExpandedMenu] = useState(null);
+ // The component starts hidden so the slide in transition effect kicks.
+ const [show, setShow] = useState(false);
+
+ const isTimeOfDaySettingsExpanded = expandedMenu === MENUS.TIME_OF_DAY_SETTINGS;
+ const isTrackSettingsExpanded = expandedMenu === MENUS.TRACK_SETTINGS;
+ const isTracksListExpanded = expandedMenu === MENUS.TRACKS_LIST;
+
+ const onCollapseMenu = () => setExpandedMenu(null);
+
+ const onExpandMenu = (menu) => {
+ if (!expandedMenu) {
+ // If no menu is currently expanded, we just expand the requested one.
+ setExpandedMenu(menu);
+ } else {
+ // If there is a menu expanded, we first collapse it and then expand the new one.
+ onCollapseMenu();
+ setTimeout(() => setExpandedMenu(menu), BOOTSTRAP_DEFAULTS.COLLAPSE_TRANSITION_TIME);
+ }
+ };
+
+ const onActivateTimeOfDayColoring = () => {
+ // When activating the time of day coloring, we also expand its menu.
+ dispatch(setIsTimeOfDayColoringActive(true));
+ onExpandMenu(MENUS.TIME_OF_DAY_SETTINGS);
+ };
+
+ const onDeactivateTimeOfDayColoring = useCallback(() => {
+ dispatch(setIsTimeOfDayColoringActive(false));
+
+ // When deactivating the time of day coloring, we collapse its menu if it was expanded.
+ if (isTimeOfDaySettingsExpanded) {
+ onCollapseMenu();
+ }
+ }, [dispatch, isTimeOfDaySettingsExpanded]);
+
+ useEffect(() => {
+ // If there were multiple tracked items, the user could have expanded the tracks list menu. If then the user
+ // removes all tracked items but one, we collapse it automatically.
+ if (items.length === 1 && isTracksListExpanded) {
+ onCollapseMenu();
+ }
+ }, [dispatch, isTracksListExpanded, items.length]);
+
+ useEffect(() => {
+ // If there are tracked items, show the legend. If not, hide it. The state variable is used so the transition
+ // effects kick.
+ if (!show && items.length > 0) {
+ setShow(true);
+ } else if (show && items.length === 0) {
+ setShow(false);
+ }
+ }, [items.length, show]);
+
+ return 0}
+ >
+ ;
+
+export default TrackLegendDelayedUnmount;
diff --git a/src/TrackLegend/index.test.js b/src/TrackLegend/index.test.js
new file mode 100644
index 000000000..b6a8412e0
--- /dev/null
+++ b/src/TrackLegend/index.test.js
@@ -0,0 +1,397 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import userEvent from '@testing-library/user-event';
+
+import { render, screen, within } from '../test-utils';
+import { mockStore } from '../__test-helpers/MockStore';
+import { setIsTimeOfDayColoringActive, TRACK_LENGTH_ORIGINS } from '../ducks/tracks';
+
+import TrackLegend from '.';
+
+jest.mock('../ducks/tracks', () => ({
+ ...jest.requireActual('../ducks/tracks'),
+ setIsTimeOfDayColoringActive: jest.fn(),
+}));
+
+jest.mock('../hooks', () => ({
+ ...jest.requireActual('../hooks'),
+ useFeatureFlag: () => true,
+}));
+
+describe('TrackLegend', () => {
+ const onClickClearTracks = jest.fn();
+ const onRemoveItemTracks = jest.fn();
+
+ let setIsTimeOfDayColoringActiveMock, store;
+ beforeEach(() => {
+ setIsTimeOfDayColoringActiveMock = jest.fn(() => () => {});
+ setIsTimeOfDayColoringActive.mockImplementation(setIsTimeOfDayColoringActiveMock);
+
+ store = {
+ data: {
+ eventFilter: {
+ filter: {
+ date_range: {
+ lower: '2020-01-01T06:00:00.000Z',
+ },
+ },
+ },
+ },
+ view: {
+ trackSettings: {
+ isTimeOfDayColoringActive: false,
+ length: 21,
+ origin: TRACK_LENGTH_ORIGINS.CUSTOM_LENGTH,
+ timeOfDayTimeZone: null,
+ },
+ },
+ };
+ });
+
+ const renderTrackLegend = (props, overrideStore) => render(
+
+
+ );
+
+ afterEach(() => {
+ jest.restoreAllMocks();
+ });
+
+ test('shows the track legend if there is at least one item', () => {
+ renderTrackLegend({
+ items: [{
+ description: 'Item description',
+ icon: 
,
+ id: 'id',
+ title: 'Item title',
+ }],
+ });
+
+ expect(screen.getByTestId('trackLegend')).toHaveClass('show');
+ });
+
+ test('does not show the track legend if there are no items', () => {
+ renderTrackLegend();
+
+ expect(screen.queryByTestId('trackLegend')).toBeNull();
+ });
+
+ test('shows the icon and title of the item if there is only one item', () => {
+ renderTrackLegend({
+ items: [{
+ description: 'Item description',
+ icon: ,
+ id: 'id',
+ title: 'Item title',
+ }],
+ });
+
+ const titleWrapper = screen.getByTestId('trackLegend-titleWrapper');
+
+ expect(within(titleWrapper).getByAltText('Item icon')).toHaveAttribute('src', 'icon');
+ expect(titleWrapper).toHaveTextContent('Item title');
+ });
+
+ test('shows the tracks icon and a button with the amount of items if there are zero or multiple items', () => {
+ renderTrackLegend({
+ items: [{
+ description: 'Item 1 description',
+ icon: ,
+ id: '1',
+ title: 'Item 1 title',
+ }, {
+ description: 'Item 2 description',
+ icon: ,
+ id: '2',
+ title: 'Item 2 title',
+ }],
+ });
+
+ const titleWrapper = screen.getByTestId('trackLegend-titleWrapper');
+
+ expect(within(titleWrapper).getByText('tracks_off.svg')).toBeVisible();
+ expect(titleWrapper).toHaveTextContent('2 items');
+ });
+
+ test('opens and closes the tracks list when clicking the button in the title', () => {
+ renderTrackLegend({
+ items: [{
+ description: 'Item 1 description',
+ icon: ,
+ id: '1',
+ title: 'Item 1 title',
+ }, {
+ description: 'Item 2 description',
+ icon: ,
+ id: '2',
+ title: 'Item 2 title',
+ }],
+ });
+
+ const tracksListButton = screen.getByLabelText('Open the list of items');
+
+ expect(tracksListButton).toHaveAttribute('aria-expanded', 'false');
+
+ userEvent.click(tracksListButton);
+
+ expect(tracksListButton).toHaveAttribute('aria-expanded', 'true');
+ expect(tracksListButton).toHaveAttribute('aria-label', 'Close the list of items');
+
+ userEvent.click(tracksListButton);
+
+ expect(tracksListButton).toHaveAttribute('aria-expanded', 'false');
+ expect(tracksListButton).toHaveAttribute('aria-label', 'Open the list of items');
+ });
+
+ test('closes the tracks list from the close button in the menu', () => {
+ renderTrackLegend({
+ items: [{
+ description: 'Item 1 description',
+ icon: ,
+ id: '1',
+ title: 'Item 1 title',
+ }, {
+ description: 'Item 2 description',
+ icon: ,
+ id: '2',
+ title: 'Item 2 title',
+ }],
+ });
+
+ const tracksListButton = screen.getByLabelText('Open the list of items');
+ userEvent.click(tracksListButton);
+
+ expect(tracksListButton).toHaveAttribute('aria-expanded', 'true');
+ expect(tracksListButton).toHaveAttribute('aria-label', 'Close the list of items');
+
+ userEvent.click(screen.getAllByLabelText('Close the list of items')[1]);
+
+ expect(tracksListButton).toHaveAttribute('aria-expanded', 'false');
+ expect(tracksListButton).toHaveAttribute('aria-label', 'Open the list of items');
+ });
+
+ test('removes the tracks of an item from the tracks list', () => {
+ renderTrackLegend({
+ items: [{
+ description: 'Item 1 description',
+ icon: ,
+ id: '1',
+ title: 'Item 1 title',
+ }, {
+ description: 'Item 2 description',
+ icon: ,
+ id: '2',
+ title: 'Item 2 title',
+ }],
+ });
+
+ userEvent.click(screen.getByLabelText('Open the list of items'));
+
+ expect(onRemoveItemTracks).not.toHaveBeenCalled();
+
+ userEvent.click(screen.getByLabelText('Remove Item 2 title'));
+
+ expect(onRemoveItemTracks).toHaveBeenCalledTimes(1);
+ expect(onRemoveItemTracks).toHaveBeenCalledWith('2');
+ });
+
+ test('doest not show the time of day settings button', () => {
+ renderTrackLegend({
+ items: [{
+ description: 'Item description',
+ icon: ,
+ id: 'id',
+ title: 'Item title',
+ }],
+ showTimeOfDaySettings: false,
+ });
+
+ expect(screen.queryByLabelText('Activate the time of day coloring')).toBeNull();
+ });
+
+ test('shows the time of day settings button', () => {
+ renderTrackLegend({
+ items: [{
+ description: 'Item description',
+ icon: ,
+ id: 'id',
+ title: 'Item title',
+ }],
+ });
+
+ expect(screen.getByLabelText('Activate the time of day coloring')).toBeVisible();
+ });
+
+ test('activates the time of day coloring when clicking the time of day settings button', () => {
+ renderTrackLegend({
+ items: [{
+ description: 'Item description',
+ icon: ,
+ id: 'id',
+ title: 'Item title',
+ }],
+ });
+
+ const timeOfDaySettingsButton = screen.getByLabelText('Activate the time of day coloring');
+
+ expect(timeOfDaySettingsButton).toHaveAttribute('aria-expanded', 'false');
+ expect(timeOfDaySettingsButton).not.toHaveClass('open');
+ expect(setIsTimeOfDayColoringActive).not.toHaveBeenCalled();
+
+ userEvent.click(timeOfDaySettingsButton);
+
+ expect(setIsTimeOfDayColoringActive).toHaveBeenCalledTimes(1);
+ expect(setIsTimeOfDayColoringActive).toHaveBeenCalledWith(true);
+ });
+
+ test('expands and collapses the time of day settings menu when clicking the chevron', () => {
+ store.view.trackSettings.isTimeOfDayColoringActive = true;
+ renderTrackLegend({
+ items: [{
+ description: 'Item description',
+ icon: ,
+ id: 'id',
+ title: 'Item title',
+ }],
+ });
+
+ const timeOfDaySettingsChevronButton = screen.getByLabelText('Expand the time of day settings');
+
+ expect(timeOfDaySettingsChevronButton).toHaveAttribute('aria-expanded', 'false');
+
+ userEvent.click(timeOfDaySettingsChevronButton);
+
+ expect(timeOfDaySettingsChevronButton).toHaveAttribute('aria-expanded', 'true');
+ expect(timeOfDaySettingsChevronButton).toHaveAttribute('aria-label', 'Collapse the time of day settings');
+
+ userEvent.click(timeOfDaySettingsChevronButton);
+
+ expect(timeOfDaySettingsChevronButton).toHaveAttribute('aria-expanded', 'false');
+ expect(timeOfDaySettingsChevronButton).toHaveAttribute('aria-label', 'Expand the time of day settings');
+ });
+
+ test('deactivates the time of day coloring when clicking the day night button', () => {
+ store.view.trackSettings.isTimeOfDayColoringActive = true;
+ renderTrackLegend({
+ items: [{
+ description: 'Item description',
+ icon: ,
+ id: 'id',
+ title: 'Item title',
+ }],
+ });
+
+ const timeOfDaySettingsButton = screen.getByLabelText('Deactivate the time of day coloring');
+
+ expect(timeOfDaySettingsButton).toHaveAttribute('aria-expanded', 'true');
+ expect(timeOfDaySettingsButton).toHaveClass('open');
+ expect(setIsTimeOfDayColoringActive).not.toHaveBeenCalled();
+
+ userEvent.click(timeOfDaySettingsButton);
+
+ expect(setIsTimeOfDayColoringActive).toHaveBeenCalledTimes(1);
+ expect(setIsTimeOfDayColoringActive).toHaveBeenCalledWith(false);
+ });
+
+ test('doest not show the track settings button', () => {
+ renderTrackLegend({
+ items: [{
+ description: 'Item description',
+ icon: ,
+ id: 'id',
+ title: 'Item title',
+ }],
+ showTrackSettings: false,
+ });
+
+ expect(screen.queryByLabelText('Open the track settings')).toBeNull();
+ });
+
+ test('shows the track settings button', () => {
+ renderTrackLegend({
+ items: [{
+ description: 'Item description',
+ icon: ,
+ id: 'id',
+ title: 'Item title',
+ }],
+ });
+
+ expect(screen.getByLabelText('Open the track settings')).toBeVisible();
+ });
+
+ test('opens and closes the track settings when clicking the gear button', () => {
+ renderTrackLegend({
+ items: [{
+ description: 'Item description',
+ icon: ,
+ id: 'id',
+ title: 'Item title',
+ }],
+ });
+
+ const trackSettingsButton = screen.getByLabelText('Open the track settings');
+
+ expect(trackSettingsButton).toHaveAttribute('aria-expanded', 'false');
+ expect(trackSettingsButton).not.toHaveClass('open');
+
+ userEvent.click(trackSettingsButton);
+
+ expect(trackSettingsButton).toHaveAttribute('aria-expanded', 'true');
+ expect(trackSettingsButton).toHaveAttribute('aria-label', 'Close the track settings');
+ expect(trackSettingsButton).toHaveClass('open');
+
+ userEvent.click(trackSettingsButton);
+
+ expect(trackSettingsButton).toHaveAttribute('aria-expanded', 'false');
+ expect(trackSettingsButton).toHaveAttribute('aria-label', 'Open the track settings');
+ expect(trackSettingsButton).not.toHaveClass('open');
+ });
+
+ test('closes the track settings from the close button in the menu', () => {
+ renderTrackLegend({
+ items: [{
+ description: 'Item description',
+ icon: ,
+ id: 'id',
+ title: 'Item title',
+ }],
+ });
+
+ const trackSettingsButton = screen.getByLabelText('Open the track settings');
+ userEvent.click(trackSettingsButton);
+
+ expect(trackSettingsButton).toHaveAttribute('aria-expanded', 'true');
+ expect(trackSettingsButton).toHaveAttribute('aria-label', 'Close the track settings');
+
+ userEvent.click(screen.getAllByLabelText('Close the track settings')[1]);
+
+ expect(trackSettingsButton).toHaveAttribute('aria-expanded', 'false');
+ expect(trackSettingsButton).toHaveAttribute('aria-label', 'Open the track settings');
+ });
+
+ test('clears the tracks when clicking the clear tracks button', () => {
+ renderTrackLegend({
+ items: [{
+ description: 'Item description',
+ icon: ,
+ id: 'id',
+ title: 'Item title',
+ }],
+ });
+
+ expect(onClickClearTracks).not.toHaveBeenCalled();
+
+ userEvent.click(screen.getByText('Clear Tracks'));
+
+ expect(onClickClearTracks).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/src/TrackLegend/styles.module.scss b/src/TrackLegend/styles.module.scss
new file mode 100644
index 000000000..fed51d489
--- /dev/null
+++ b/src/TrackLegend/styles.module.scss
@@ -0,0 +1,129 @@
+@use 'sass:color';
+
+@use '../common/styles/vars/colors';
+
+.trackLegendWrapper {
+ margin-bottom: 0.5rem;
+ transform: translateX(calc(100% + 1rem));
+ transition: transform 0.3s ease-in-out;
+ width: 21.25rem;
+
+ &.show {
+ transform: translateX(0);
+ }
+
+ .trackLegend {
+ align-items: center;
+ background: white;
+ border-radius: 0.25rem;
+ box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+ padding: 0.5rem;
+
+ .row {
+ align-items: center;
+ display: flex;
+ justify-content: space-between;
+
+ &:not(:last-child) {
+ margin-bottom: 0.25rem;
+ }
+
+ .titleWrapper {
+ align-items: center;
+ display: flex;
+ margin-right: 1rem;
+
+ .tracksOffIcon {
+ height: 1.5rem;
+ margin-right: 0.25rem;
+ width: 1.5rem;
+ }
+
+ .tracksListButton {
+ background: none;
+ border: none;
+ color: colors.$light-blue;
+ padding: 0 0.25rem;
+ text-decoration: underline;
+
+ &:focus-visible {
+ outline: 2px solid colors.$bright-blue;
+ }
+
+ &:hover {
+ color: color.adjust(colors.$bright-blue, $lightness: -10%);
+ }
+ }
+
+ .title {
+ color: black;
+ margin: 0;
+ max-width: 12.5rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ }
+
+ .settingsButton {
+ background: none;
+ border: none;
+ border-radius: .1875rem;
+ color: colors.$secondary-medium-gray;
+ padding: 0.25rem 0.5rem;
+
+ &:focus-visible {
+ color: colors.$bright-blue;
+ outline: 2px solid colors.$bright-blue;
+ }
+
+ &:hover {
+ background: colors.$light-gray-background;
+ }
+
+ &:not(:last-child) {
+ margin-right: 0.25rem
+ }
+
+ &.open {
+ background: colors.$bright-blue;
+ color: white;
+
+ &:hover {
+ background-color: color.adjust(colors.$bright-blue, $lightness: -10%);
+ }
+ }
+
+ .icon {
+ height: 1.25rem;
+ width: 1.25rem;
+ }
+ }
+
+ .pointsOverTime {
+ color: black;
+ font-size: 0.875rem;
+ margin: 0;
+ margin-right: 1rem;
+ }
+
+ .clearTracksButton {
+ background-color: colors.$light-gray-background;
+ border: none;
+ border-radius: 0.25rem;
+ color: colors.$off-black;
+ font-size: 0.875rem;
+ font-weight: 500;
+ padding: 0.25rem 0.5rem;
+
+ &:focus-visible {
+ outline: 2px solid colors.$bright-blue;
+ }
+
+ &:hover {
+ background-color: color.adjust(colors.$light-gray-background, $lightness: -5%);
+ }
+ }
+ }
+ }
+}
diff --git a/src/TracksLayer/index.js b/src/TracksLayer/index.js
index 5710eb181..8ce613511 100644
--- a/src/TracksLayer/index.js
+++ b/src/TracksLayer/index.js
@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
import { addMapImage } from '../utils/map';
import { MAP_LAYERS_CATEGORY, trackEventFactory } from '../utils/analytics';
import { MapContext } from '../App';
-import { visibleTrackDataWithPatrolAwareness } from '../selectors/patrols';
+import { selectSubjectTracksWithPatrolTrackShownFlag } from '../selectors/patrols';
import Arrow from '../common/images/icons/track-arrow.svg';
import TrackLayer from './track';
@@ -17,7 +17,7 @@ const mapLayerTracker = trackEventFactory(MAP_LAYERS_CATEGORY);
const TracksLayer = ({ onPointClick, showTimepoints }) => {
const map = useContext(MapContext);
- const trackData = useSelector(visibleTrackDataWithPatrolAwareness);
+ const subjectTracksWithPatrolTrackShownFlag = useSelector(selectSubjectTracksWithPatrolTrackShownFlag);
const onTimepointClick = useCallback((event) => {
const layer = map.queryRenderedFeatures(event.point)
@@ -33,13 +33,15 @@ const TracksLayer = ({ onPointClick, showTimepoints }) => {
}
}, [map]);
- return trackData.length > 0 ? trackData.map((data) =>
+ {item.icon}
+
+
+
+ {item.title}
+
+
+ {item.description}
+ + +
+
;
+};
+
+export default TracksList;
diff --git a/src/TrackLegend/TracksList/index.test.js b/src/TrackLegend/TracksList/index.test.js
new file mode 100644
index 000000000..67bbf47a8
--- /dev/null
+++ b/src/TrackLegend/TracksList/index.test.js
@@ -0,0 +1,131 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+
+import { render, screen } from '../../test-utils';
+
+import TracksList from '.';
+
+describe('TrackLegend - TracksList', () => {
+ const onClose = jest.fn();
+ const onRemoveItemTracks = jest.fn();
+
+ const renderTracksList = (props) => render(
+
+
+ {itemsName}
+ + +-
+ {items.map((item) =>
+
+
+
+ {showTrackSettings &&
+ }
+
+ {timeOfDayTrackingEnabled && showTimeOfDaySettings &&
+ }
+
;
+};
+
+// Wrap the component with a delayed unmount so the slide out transition ends before unmounting.
+const TrackLegendDelayedUnmount = ({ items, ...otherProps }) =>
+
+
+
+
+
+
+ {items.length === 1
+ ? <>
+ {items[0].icon}
+
+
+
+ {items[0].title}
+ + : <> +
+ {timeOfDayTrackingEnabled && showTimeOfDaySettings && }
+
+ {showTrackSettings && }
+
+
+
+ {description}
+ + +
+
+
+
+
+ onExpandMenu(MENUS.TIME_OF_DAY_SETTINGS)}
+ />
+
+