-
-
Notifications
You must be signed in to change notification settings - Fork 270
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Allow users to see existing projects' AOI during project creation
- Loading branch information
1 parent
acc6480
commit e45318e
Showing
9 changed files
with
240 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
55 changes: 55 additions & 0 deletions
55
frontend/src/components/projectCreate/projectsAOILayerCheckBox.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { CheckBoxInput } from '../formInputs'; | ||
| import { FormattedMessage } from 'react-intl'; | ||
| import ReactTooltip from 'react-tooltip'; | ||
|
|
||
| import messages from './messages'; | ||
| import statusMessages from '../projectDetail/messages'; | ||
| import { TASK_COLOURS } from '../../config'; | ||
|
|
||
| export const ProjectsAOILayerCheckBox = ({ isActive, setActive, disabled }) => { | ||
| return ( | ||
| <> | ||
| <div className="bg-white fl dib pv1 ph2 blue-dark mt2 mh2 f7 br1 shadow-1"> | ||
| <CheckBoxInput | ||
| isActive={isActive} | ||
| disabled={disabled} | ||
| changeState={() => setActive(!isActive)} | ||
| className="dib mr2 v-mid" | ||
| /> | ||
| <span className="di v-mid" data-tip> | ||
| <FormattedMessage {...messages.showProjectsAOILayer} /> | ||
| </span> | ||
| <ReactTooltip place="bottom"> | ||
| {disabled ? ( | ||
| <FormattedMessage {...messages.disabledAOILayer} /> | ||
| ) : ( | ||
| <div> | ||
| <div className="db"> | ||
| <FormattedMessage {...messages.enableAOILayer} /> | ||
| </div> | ||
| <div className="db pt2 pb1"> | ||
| <FormattedMessage {...messages.colorLegend} /> | ||
| </div> | ||
| <div className="db"> | ||
| <ProjectStatusLegend color={TASK_COLOURS.VALIDATED} /> | ||
| <FormattedMessage {...statusMessages.status_PUBLISHED} /> | ||
| </div> | ||
| <div className="db"> | ||
| <ProjectStatusLegend color={TASK_COLOURS.MAPPED} /> | ||
| <FormattedMessage {...statusMessages.status_DRAFT} /> | ||
| </div> | ||
| <div className="db"> | ||
| <ProjectStatusLegend color={TASK_COLOURS.BADIMAGERY} /> | ||
| <FormattedMessage {...statusMessages.status_ARCHIVED} /> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </ReactTooltip> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const ProjectStatusLegend = ({ color }) => ( | ||
| <span style={{ backgroundColor: color }} className="h1 w1 dib mr2"></span> | ||
| ); |
44 changes: 44 additions & 0 deletions
44
frontend/src/components/projectCreate/tests/projectsAOILayerCheckBox.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import { render, screen } from '@testing-library/react'; | ||
| import '@testing-library/jest-dom'; | ||
| import userEvent from '@testing-library/user-event'; | ||
|
|
||
| import { ProjectsAOILayerCheckBox } from '../projectsAOILayerCheckBox'; | ||
| import { IntlProviders } from '../../../utils/testWithIntl'; | ||
|
|
||
| describe('ProjectsAOILayerCheckBox', () => { | ||
| const testFn = jest.fn(); | ||
| it('with disabled property', () => { | ||
| render( | ||
| <IntlProviders> | ||
| <ProjectsAOILayerCheckBox isActive={false} setActive={testFn} disabled={true} /> | ||
| </IntlProviders>, | ||
| ); | ||
| expect(screen.getByText('Show existing projects')).toBeInTheDocument(); | ||
| expect(screen.getByRole('checkbox').className).toContain('b--grey-light'); | ||
| expect(screen.getByRole('checkbox').className).not.toContain('b--red'); | ||
| userEvent.hover(screen.getByText('Show existing projects')); | ||
| expect( | ||
| screen.getByText( | ||
| "Zoom in to be able to activate the visualization of other projects' areas of interest.", | ||
| ), | ||
| ).toBeInTheDocument(); | ||
| userEvent.click(screen.getByRole('checkbox')); | ||
| expect(testFn).not.toHaveBeenCalled(); | ||
| }); | ||
| it('with disabled=false property', () => { | ||
| render( | ||
| <IntlProviders> | ||
| <ProjectsAOILayerCheckBox isActive={false} setActive={testFn} disabled={false} /> | ||
| </IntlProviders>, | ||
| ); | ||
| expect(screen.getByText('Show existing projects')).toBeInTheDocument(); | ||
| expect(screen.getByRole('checkbox').className).not.toContain('b--grey-light'); | ||
| expect(screen.getByRole('checkbox').className).toContain('b--red'); | ||
| userEvent.hover(screen.getByText('Show existing projects')); | ||
| expect( | ||
| screen.getByText("Enable the visualization of the existing projects' areas of interest."), | ||
| ).toBeInTheDocument(); | ||
| userEvent.click(screen.getByRole('checkbox')); | ||
| expect(testFn).toHaveBeenCalled(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters