feat: operation creator now uses sidebar

.github/workflows/main.yml

@@ -15,7 +15,7 @@ jobs:
         uses: cypress-io/github-action@v1
         with:
           build: npm run build
-          start: npm run start
+          start: npm run start-dev
           wait-on: http://localhost:2000
       - name: Upload coverage
         uses: codecov/codecov-action@v1

cypress/integration/map_createnewoperation.js

@@ -13,22 +13,45 @@ describe('Use Case 01A: Create New Operation (valid)', function () {
 				cy.setCookie('user', 'admin');
 				cy.setCookie('jwt', response.body);
 			});
+		cy.server();           // enable response stubbing
+		cy.route({
+			method: 'POST',      // Route all GET requests
+			url: '/operation',
+			response: {},
+			status: 200
+		}).as('postOperation');
 	});
+	/*
+	it('Find created operation and clean-up', function () {
+		cy.visit('http://localhost:2000/dashboard/operations');
+		cy.contains('CreateNewOp#01')
+			.should('exist')
+			.click();
+		cy.get('[data-test-id="dash#selected#gufi"]').then(($value) => {
+			const gufi = $value.text();
+			cy.getCookie('jwt').then(cookie => {
+				cy.request({url: API + 'operation/' + gufi, method: 'DELETE', headers: {'auth': cookie.value}})
+					.then((response) => {
+						expect(response.isOkStatusCode).to.be.true;
+					});
+			});
+		});
+	});
+	*/
 	it('Finds button and starts use case', function () {
 		cy.visit('http://localhost:2000/');
 		cy.get('[data-test-id="mapButtonMenu"]').click();
 		cy.contains('contextualmenu_createnewop').click();
 	});
 	it('Define Polygon', function () {
-		cy.contains('editor.step.definevolumes').click();
 		cy.get('.rightAreaCloser').click();
 		cy.get('[data-test-id="map"]').click('topLeft');
 		cy.get('[data-test-id="map"]').click('topRight');
 		cy.get('[data-test-id="map"]').click('bottomLeft');
 	});
 	it('Define Volume Info', function () {
-		cy.get('[data-test-id="map"]').click(150,150);
-		cy.contains('editor.volume.editingvolume_count').get('[data-test-id="mapEditorVolumeInfoMinAltitude"]').clear().type('-1');
+		cy.get('.rightAreaOpener').click();
+		cy.get('[data-test-id="map#editor#volume#info#min_altitude"]').clear().type('-1');
 		cy.get('[data-test-id="map#editor#volume#info#max_altitude"]').clear().type('50');
 		cy.get('[data-test-id="map#editor#volume#info#near_structure"]').check({force: true});
 		cy.get('[data-test-id="map#editor#volume#info#bvlos"]').check({force: true});
@@ -38,45 +61,31 @@ describe('Use Case 01A: Create New Operation (valid)', function () {
 			.not('.DayPicker-Day--selected')
 			.not('.DayPicker-Day--today')
 			.first().click();
-		cy.contains('editor.volume.closecalendar').click();
 		cy.get('[data-test-id="map#editor#volume#info#effective_time_end"]').click();
 		cy.get('.DayPicker-Day')
+			.last()
 			.not('.DayPicker-Day--disabled')
 			.not('.DayPicker-Day--selected')
 			.not('.DayPicker-Day--today')
 			.first().click();
-		cy.contains('editor.volume.closecalendar').click();
-		cy.get('.bp3-dialog-close-button').click(); // TODO: Change this line if we don't use blueprint3js dialog anymore.
 	});
 	it('Complete Volume information', function () {
-		cy.get('.rightAreaOpener').click();
-		cy.contains('editor.step.defineoperationinfo').click();
 		cy.get('[data-test-id="mapInputEditorName"]')
 			.clear()
 			.type('CreateNewOp#01');
 		//cy.get('[data-test-id="mapInputEditorVolumeDescr"]').
 		cy.get('[data-test-id="mapInputEditorFlightNumber"]')
 			.clear()
 			.type('123');
+		cy.get('[data-test-id="map#editor#operation#info#contact"]')
+			.clear()
+			.type('E2E Testing');
+		cy.get('[data-test-id="map#editor#operation#info#contact_phone"]')
+			.clear()
+			.type('09123456');
 	});
 	it('Finish and post', function () {
-		cy.get('.bp3-dialog-close-button').click(); // TODO: Change this line if we don't use blueprint3js dialog anymore.
-		cy.contains('editor.step.finish').click();
-		cy.wait(3000);
+		cy.contains('finish').click();
+		cy.wait('@postOperation');
 	});
-	/*it('Find created operation and clean-up', function () {
-		cy.visit('http://localhost:2000/dashboard/operations');
-		cy.contains('CreateNewOp#01')
-			.should('exist')
-			.click();
-		cy.get('[data-test-id="dash#selected#gufi"]').then(($value) => {
-			const gufi = $value.text();
-			cy.getCookie('jwt').then(cookie => {
-				cy.request({url: API + 'operation/' + gufi, method: 'DELETE', headers: {'auth': cookie.value}})
-					.then((response) => {
-						expect(response.isOkStatusCode).to.be.true;
-					});
-			});
-		});
-	});*/
 });

cypress/integration/sp_login.js

@@ -3,9 +3,7 @@ describe('UseCase 05. Login', function() {
 		cy.visit('http://localhost:2000/');
 		cy.get('#login-user').type('admin');
 		cy.get('#login-password').type('admin');
-		cy.contains('app.changelanguage').click();
-		cy.contains('Español').click();
-		cy.contains('Iniciar sesión').click();
+		cy.contains('login.login').click();
 		/*cy.get('.loginError').then(($el) =>
 			expect($el).to.contain('Please wait')
 		);*/
@@ -17,9 +15,7 @@ describe('UseCase 05. Login', function() {
 		cy.visit('http://localhost:2000/');
 		cy.get('#login-user').type('admin');
 		cy.get('#login-password').type('wrongpassword');
-		cy.contains('Español').click();
-		cy.contains('English').click();
-		cy.contains('Log in').click();
+		cy.contains('login.login').click();
 		/*cy.get('.loginError').then(($el) =>
 			expect($el).to.contain('Please wait')
 		);*/

cypress/integration/sp_registration.js

@@ -41,6 +41,5 @@ describe('SPx: (Registration)', function () {
 		cy.get( '#input-repeat-password').type('1234');
 		cy.contains('login.register').click();
 		cy.contains('OK').click();
-		cy.contains('app.changelanguage').click();
 	});
 });

src/Ades.js

@@ -104,7 +104,7 @@ function Ades() {
 	bc.onmessage = (event) => setAlertUtmMessage(event.data);*/
 
 	/* Auth */
-	const [cookies, setCookie, removeCookie] = useCookies(['jwt']);
+	const [cookies, setCookie, removeCookie] = useCookies(['jwt', 'lang']);
 	const [isLoggedIn, setLoggedIn] = useState(true);
 	const [role, setRole] = useState('none');
 

src/LoginScreen.js

@@ -42,7 +42,7 @@ function LoginScreen() {
 				i18n.changeLanguage('en');
 			}
 		}
-	}, []);
+	}, []); // eslint-disable-line react-hooks/exhaustive-deps
 
 	return (
 		<form onSubmit={login} className="centeredScreen texturedBackground">

src/RegistrationScreen.js

@@ -42,7 +42,7 @@ const RegistrationScreen = () => {
 				i18n.changeLanguage('en');
 			}
 		}
-	}, []);
+	}, []); // eslint-disable-line react-hooks/exhaustive-deps
 
 	//----------------------------------------------------------------------------------
 	//--------------------------------- AUX FUNCTIONS  ---------------------------------

src/VerificationScreen.js

@@ -30,7 +30,7 @@ function VerificationScreen() {
 				i18n.changeLanguage('en');
 			}
 		}
-	}, []);
+	}, []); // eslint-disable-line react-hooks/exhaustive-deps
 
 	useEffect(() => {
 		Axios
@@ -50,7 +50,7 @@ function VerificationScreen() {
 				setLoading(false);
 				setError(true);
 			});
-	}, [username, token]);
+	}, [username, token]); // eslint-disable-line react-hooks/exhaustive-deps
 
 	return (
 		<div className="centeredScreen texturedBackground">

src/map/Map.js

@@ -20,7 +20,6 @@ import QuickFly from './actions/QuickFly';
 import DroneMarker from './elements/DroneMarker';
 import OperationPolygon from './elements/OperationPolygon';
 import OperationInfoEditor from './editor/OperationInfoEditor';
-import OperationVolumeInfoEditor from './editor/OperationVolumeInfoEditor';
 import RestrictedFlightVolume from './elements/RestrictedFlightVolume';
 import SelectedOperation from './viewer/SelectedOperation';
 import SimulatorPanel from './actions/SimulatorPanel';
@@ -30,7 +29,6 @@ import OperationEditMarker from './elements/OperationEditMarker';
 /* Hooks */
 import useOperationFilter from './hooks/useOperationFilter';
 import useAdesState from '../state/AdesState';
-import useEditorStepText from './hooks/useEditorStepText';
 import useEditorLogic from './hooks/useEditorLogic';
 import useSimulatorLogic from './hooks/useSimulatorLogic';
 
@@ -64,13 +62,12 @@ function Map({ mode }) {
 	/* Editor state */
 	const isEditor = S.isJust(mode) && fM(mode) === 'new';
 
-	const [isOperationInfoPopupOpen, setOperationInfoPopupOpen] = useState(false);
-	const [operationInfo, setOperationInfo, volume, setVolumeInfo, polygons, setPolygons, saveOperation, setErrorOnSaveCallback] = useEditorLogic(refMapOnClick, mapInitialized && isEditor);
+	const [operationInfo, setOperationInfo, volume, setVolumeInfo, polygons, setPolygons, saveOperation, ] = useEditorLogic(refMapOnClick, mapInitialized && isEditor);
 
 	/*const [stepsToDefineOperation, , stepsDisabled] =
 		useEditorStepText(setOperationInfo, setOperationInfoPopupOpen, saveOperation, setErrorOnSaveCallback);*/
 
-	const [maybeEditingOpVolume, setEditingOperationVolume] = useState(S.Maybe.Nothing);
+	const [, setEditingOperationVolume] = useState(S.Maybe.Nothing);
 	//const notifications = useNotificationStore();
 	//const statusOverMapNotifs =
 	//	notifications.state.all.size > 0
@@ -329,6 +326,7 @@ function Map({ mode }) {
 				{/* Editor Panels */}
 				{isEditor &&
 					<>
+						<EditorPanel />
 						<OperationInfoEditor
 							info={operationInfo}
 							setInfo={setOperationInfo}

src/map/actions/EditorPanel.js

@@ -3,7 +3,7 @@ import RightAreaButton from '../RightAreaButton';
 import {useTranslation} from 'react-i18next';
 import useAdesState from '../../state/AdesState';
 
-const EditorPanel = ({steps, stepsDisabled}) => {
+const EditorPanel = () => {
 	const {t} = useTranslation();
 	const [state, actions] = useAdesState();
 	return (

src/map/editor/OperationInfoEditor.js

@@ -6,13 +6,12 @@ import React from 'react';
 /*
     UI
  */
-import {Button, Dialog, FormGroup, InputGroup} from '@blueprintjs/core';
+import {Button, FormGroup, InputGroup} from '@blueprintjs/core';
 /*
     Helpers
  */
 import PropTypes from 'prop-types';
 import {Just, maybeToNullable, Maybe} from 'sanctuary';
-import _, {maybeShow} from '../../libs/SaferSanctuary';
 import {useTranslation} from 'react-i18next';
 import RightAreaButton from '../RightAreaButton';
 import OperationVolumeInfoEditor from './OperationVolumeInfoEditor';
@@ -67,7 +66,7 @@ function OperationInfoEditor({info, setInfo, volumeInfo, setVolumeInfo, saveOper
 			>
 				<InputGroup
 					id="contact"
-					data-test-id="mapInputEditorContact"
+					data-test-id="map#editor#operation#info#contact"
 					value={info.contact}
 					onChange={(evt) => editInfo('contact', evt.target.value)}
 				/>
@@ -80,7 +79,7 @@ function OperationInfoEditor({info, setInfo, volumeInfo, setVolumeInfo, saveOper
 			>
 				<InputGroup
 					id="contact_phone"
-					data-test-id="mapInputEditorContactPhone"
+					data-test-id="map#editor#operation#info#contact_phone"
 					value={info.contact_phone}
 					onChange={(evt) => editInfo('contact_phone', evt.target.value)}
 				/>

src/map/editor/OperationVolumeInfoEditor.js

@@ -1,13 +1,10 @@
-import React, {useState} from 'react';
-import {Alignment, Button, Checkbox, Dialog, Divider, FormGroup, InputGroup, Intent} from '@blueprintjs/core';
-import S from 'sanctuary';
-import {DateInput, DatePicker, TimePicker, TimePrecision} from '@blueprintjs/datetime';
+import React from 'react';
+import {Alignment, Checkbox, FormGroup, InputGroup} from '@blueprintjs/core';
+import {DateInput, TimePrecision} from '@blueprintjs/datetime';
 import {useTranslation} from 'react-i18next';
 
 function OperationVolumeInfoEditor(props) {
 	const { t,  } = useTranslation();
-	const [beginCalendarOpen, setBeginCalendarOpen] = useState(false);
-	const [endCalendarOpen, setEndCalendarOpen] = useState(false);
 	const {info, setInfo} = props;
 	const editInfo = (property, newValue) =>
 		setInfo(volume => {
@@ -64,15 +61,18 @@ function OperationVolumeInfoEditor(props) {
 				<p className="centerHorizontally">
 					{t('volume.effective_time_begin')}
 				</p>
-				<DateInput
-					data-test-id="map#editor#volume#info#effective_time_begin"
-					formatDate={date => date.toLocaleString()}
-					parseDate={str => new Date(str)}
-					placeholder="DD/MM/YYYY"
-					value={info.effective_time_begin}
-					timePrecision={TimePrecision.SECOND}
-					onChange={value => editInfo('effective_time_begin', value)}
-				/>
+				<div data-test-id="map#editor#volume#info#effective_time_begin">
+					<DateInput
+						canClearSelection={false}
+						minDate={new Date()}
+						formatDate={date => date.toLocaleString()}
+						parseDate={str => new Date(str)}
+						placeholder="DD/MM/YYYY"
+						value={info.effective_time_begin}
+						timePrecision={TimePrecision.SECOND}
+						onChange={value => editInfo('effective_time_begin', value)}
+					/>
+				</div>
 			</div>
 			{/*
 			effective_time_end*	string($date-time)
@@ -84,15 +84,18 @@ function OperationVolumeInfoEditor(props) {
 				<p className="centerHorizontally">
 					{t('volume.effective_time_end')}
 				</p>
-				<DateInput
-					data-test-id="map#editor#volume#info#effective_time_end"
-					formatDate={date => date.toLocaleString()}
-					parseDate={str => new Date(str)}
-					placeholder="DD/MM/YYYY"
-					value={info.effective_time_end}
-					timePrecision={TimePrecision.SECOND}
-					onChange={value => editInfo('effective_time_end', value)}
-				/>
+				<div data-test-id="map#editor#volume#info#effective_time_end">
+					<DateInput
+						canClearSelection={false}
+						minDate={new Date()}
+						formatDate={date => date.toLocaleString()}
+						parseDate={str => new Date(str)}
+						placeholder="DD/MM/YYYY"
+						value={info.effective_time_end}
+						timePrecision={TimePrecision.SECOND}
+						onChange={value => editInfo('effective_time_end', value)}
+					/>
+				</div>
 			</div>
 			{/*
 			min_altitude*	in meters. Good luck NASA!
@@ -101,7 +104,7 @@ function OperationVolumeInfoEditor(props) {
 			<FormGroup className="rightAreaButtonText" label={t('volume.min_altitude')} labelFor="min_altitude">
 				<InputGroup
 					id="min_altitude"
-					data-test-id="mapEditorVolumeInfoMinAltitude"
+					data-test-id="map#editor#volume#info#min_altitude"
 					value={info.min_altitude}
 					onChange={evt => editInfo('min_altitude', evt.target.value)}
 				/>

src/map/hooks/useEditorLogic.js

@@ -84,11 +84,6 @@ function UseEditorLogic(refMapOnClick, mapInitialized) {
 		}
 	}, [mapInitialized]); // eslint-disable-line react-hooks/exhaustive-deps
 
-	useEffect(() => {
-		console.log('Updated OperationInfo', S.maybeToNullable(operationInfo));
-	}, [operationInfo]);
-
-
 	const saveOperation = () => {
 		actions.map.onClicksDisabled(false);
 		refMapOnClick.current = () => {};

src/state/AdesState.js

@@ -213,7 +213,7 @@ function addVehicle(store, data) {
 /* RFV */
 
 function addRFV(store, data) {
-	const dataObtained = [(Array.from(data))[0]];
+	const dataObtained = Array.from(data);
 	const pairs = S.justs(dataObtained.map((rfv) => {
 		return S.Just(S.Pair(rfv.id)(convertCoordinatesRFV(rfv)));
 	}));