Skip to content

Commit 41177b9

Browse files
souyahia-monksouyahia-monk
authored
Fix SightSlider icons & some Drive fixes (#728)
* Disable login and inspection creation in Drive app * Added HinL task in create inspection in Drive App * Fixed SightSlider status icons
1 parent a17012a commit 41177b9

File tree

28 files changed

+291
-429
lines changed

28 files changed

+291
-429
lines changed

‎apps/demo-app/src/pages/CreateInspectionPage/CreateInspectionPage.module.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
display: flex;
55
align-items: center;
66
justify-content: center;
7+
flex-direction: column;
78
}
89

910
.error-message {

‎apps/drive-app/.env-cmdrc.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"PORT": "17200",
44
"HTTPS": "true",
55
"ESLINT_NO_DEV_ERRORS": "true",
6+
"REACT_APP_ALLOW_CREATE_INSPECTION": "true",
67
"REACT_APP_ENVIRONMENT": "local",
78
"REACT_APP_API_DOMAIN": "api.preview.monk.ai/v1",
89
"REACT_APP_AUTH_DOMAIN": "idp.preview.monk.ai",

‎apps/drive-app/src/pages/CreateInspectionPage/CreateInspectionPage.module.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,13 @@
44
display: flex;
55
align-items: center;
66
justify-content: center;
7+
flex-direction: column;
78
}
89

910
.error-message {
1011
text-align: center;
11-
padding-bottom: 20px;
12+
}
13+
14+
.retry-btn-container {
15+
padding-top: 20px;
1216
}

‎apps/drive-app/src/pages/CreateInspectionPage/CreateInspectionPage.tsx

Lines changed: 40 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,35 @@ import { useTranslation } from 'react-i18next';
22
import { useEffect } from 'react';
33
import { Navigate } from 'react-router-dom';
44
import { Button, Spinner } from '@monkvision/common-ui-web';
5-
import { useMonkApi } from '@monkvision/network';
5+
import { CreateInspectionOptions, useMonkApi } from '@monkvision/network';
66
import { getEnvOrThrow, useLoadingState, useMonkAppParams } from '@monkvision/common';
77
import { useMonitoring } from '@monkvision/monitoring';
88
import { TaskName } from '@monkvision/types';
99
import { Page } from '../pages';
1010
import styles from './CreateInspectionPage.module.css';
1111

12+
const options: CreateInspectionOptions = {
13+
tasks: [
14+
TaskName.DAMAGE_DETECTION,
15+
TaskName.WHEEL_ANALYSIS,
16+
{
17+
name: TaskName.HUMAN_IN_THE_LOOP,
18+
callbacks: [
19+
{
20+
url: 'https://webhook.site/15f8682f-91a8-4df0-8e73-74adc6c74ca4',
21+
headers: {},
22+
params: {},
23+
},
24+
],
25+
},
26+
],
27+
};
28+
29+
enum CreateInspectionPageError {
30+
CREATE_INSPECTION = 'create-inspection.errors.create-inspection',
31+
MISSING_INSPECTION_ID = 'create-inspection.errors.missing-inspection-id',
32+
}
33+
1234
export function CreateInspectionPage() {
1335
const loading = useLoadingState();
1436
const { t } = useTranslation();
@@ -21,21 +43,26 @@ export function CreateInspectionPage() {
2143

2244
const handleCreateInspection = () => {
2345
loading.start();
24-
createInspection({ tasks: [TaskName.DAMAGE_DETECTION, TaskName.WHEEL_ANALYSIS] })
46+
createInspection(options)
2547
.then((res) => {
2648
loading.onSuccess();
2749
setInspectionId(res.id);
2850
})
2951
.catch((err) => {
30-
loading.onError(err);
52+
loading.onError(CreateInspectionPageError.CREATE_INSPECTION);
3153
handleError(err);
3254
});
3355
};
3456

3557
useEffect(() => {
3658
if (!inspectionId) {
37-
loading.start();
38-
handleCreateInspection();
59+
if (process.env['REACT_APP_ALLOW_CREATE_INSPECTION'] === 'true') {
60+
// On local environment, we allow creating the inspection if the ID is not provided.
61+
loading.start();
62+
handleCreateInspection();
63+
} else {
64+
loading.onError(CreateInspectionPageError.MISSING_INSPECTION_ID);
65+
}
3966
}
4067
}, [inspectionId]);
4168

@@ -48,12 +75,14 @@ export function CreateInspectionPage() {
4875
{loading.isLoading && <Spinner size={80} />}
4976
{!loading.isLoading && loading.error && (
5077
<>
51-
<div className={styles['error-message']}>
52-
{t('create-inspection.errors.create-inspection')}
53-
</div>
54-
<Button variant='outline' icon='refresh' onClick={handleCreateInspection}>
55-
{t('create-inspection.errors.retry')}
56-
</Button>
78+
<div className={styles['error-message']}>{t(loading.error)}</div>
79+
{loading.error === CreateInspectionPageError.CREATE_INSPECTION && (
80+
<div className={styles['retry-btn-container']}>
81+
<Button variant='outline' icon='refresh' onClick={handleCreateInspection}>
82+
{t('create-inspection.errors.retry')}
83+
</Button>
84+
</div>
85+
)}
5786
</>
5887
)}
5988
</div>

‎apps/drive-app/src/pages/LogInPage/LogInPage.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ function getLoginErrorMessage(err: unknown): string {
1818
return 'login.errors.unknown';
1919
}
2020

21+
const allowCreateInspection = process.env['REACT_APP_ALLOW_CREATE_INSPECTION'] === 'true';
22+
2123
export function LogInPage() {
2224
const [isExpired, setIsExpired] = useState(false);
2325
const loading = useLoadingState();
@@ -28,6 +30,11 @@ export function LogInPage() {
2830
const navigate = useNavigate();
2931

3032
useEffect(() => {
33+
if (!authToken && !allowCreateInspection) {
34+
setAuthToken(null);
35+
setIsExpired(false);
36+
loading.onError('login.errors.missing-token');
37+
}
3138
if (authToken && !isUserAuthorized(authToken, REQUIRED_AUTHORIZATIONS)) {
3239
loading.onError('login.errors.insufficient-authorization');
3340
}
@@ -62,11 +69,12 @@ export function LogInPage() {
6269
<div className={styles['error-message']}>{t('login.errors.token-expired')}</div>
6370
)}
6471
{loading.error && <div className={styles['error-message']}>{t(loading.error)}</div>}
65-
{authToken ? (
72+
{authToken && allowCreateInspection && (
6673
<Button primaryColor='alert' loading={loading} onClick={logout}>
6774
{t('login.actions.log-out')}
6875
</Button>
69-
) : (
76+
)}
77+
{!authToken && allowCreateInspection && (
7078
<Button loading={loading} onClick={handleLogin}>
7179
{t('login.actions.log-in')}
7280
</Button>

‎apps/drive-app/src/translations/de.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,15 @@
88
"popup-closed": "Huch! Wir konnten Sie nicht anmelden, weil das Popup geschlossen wurde. Versuchen wir es noch einmal!",
99
"token-expired": "Ihr Authentifizierungstoken ist abgelaufen. Bitte melden Sie sich erneut an.",
1010
"insufficient-authorization": "Sie haben nicht die erforderlichen Berechtigungen, um diese Anwendung zu nutzen. Bitte melden Sie sich ab und verwenden Sie ein anderes Konto.",
11-
"unknown": "Huch! Beim Einloggen ist ein unerwarteter Fehler aufgetreten. Versuchen wir es noch einmal!"
11+
"unknown": "Huch! Beim Einloggen ist ein unerwarteter Fehler aufgetreten. Versuchen wir es noch einmal!",
12+
"missing-token": "Die URL, auf die Sie zuzugreifen versuchen, ist ungültig."
1213
}
1314
},
1415
"create-inspection": {
1516
"errors": {
1617
"retry": "Wiederholung",
17-
"create-inspection": "Bei der Erstellung der Inspektion ist ein unerwarteter Fehler aufgetreten."
18+
"create-inspection": "Bei der Erstellung der Inspektion ist ein unerwarteter Fehler aufgetreten.",
19+
"missing-inspection-id": "Die URL, auf die Sie zuzugreifen versuchen, ist ungültig."
1820
}
1921
},
2022
"inspection-complete": {

‎apps/drive-app/src/translations/en.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,15 @@
88
"popup-closed": "Oops! We couldn't log you in because the popup was closed. Let's try again!",
99
"token-expired": "Your authentication token is expired. Please log-in again.",
1010
"insufficient-authorization": "You do not have the required authorizations to use this application. Please log out and use a different account.",
11-
"unknown": "Oops! An unexpected error occurred during the log in. Let's try again!"
11+
"unknown": "Oops! An unexpected error occurred during the log in. Let's try again!",
12+
"missing-token": "The URL you are trying to access is invalid."
1213
}
1314
},
1415
"create-inspection": {
1516
"errors": {
1617
"retry": "Retry",
17-
"create-inspection": "An unexpected error occurred while creating the inspection."
18+
"create-inspection": "An unexpected error occurred while creating the inspection.",
19+
"missing-inspection-id": "The URL you are trying to access is invalid."
1820
}
1921
},
2022
"inspection-complete": {

‎apps/drive-app/src/translations/fr.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,15 @@
88
"popup-closed": "Oups ! Nous n'avons pas pu vous connecter car la pop-up s'est fermée. Essayons à nouveau !",
99
"token-expired": "Votre token d'authentification est expiré. Veuillez vous reconnecter.",
1010
"insufficient-authorization": "Vous n'avez pas les autorisations nécessaires pour utiliser cette application. Veuillez vous déconnecter et utiliser un autre compte.",
11-
"unknown": "Oups ! Une erreur inattendue est survenue lors de la connection. Essayons à nouveau !"
11+
"unknown": "Oups ! Une erreur inattendue est survenue lors de la connection. Essayons à nouveau !",
12+
"missing-token": "L'URL à laquelle vous essayez d'accéder est invalide."
1213
}
1314
},
1415
"create-inspection": {
1516
"errors": {
1617
"retry": "Réessayer",
17-
"create-inspection": "Une erreur inattendue est survenue lors de la création de l'inspection."
18+
"create-inspection": "Une erreur inattendue est survenue lors de la création de l'inspection.",
19+
"missing-inspection-id": "L'URL à laquelle vous essayez d'accéder est invalide."
1820
}
1921
},
2022
"inspection-complete": {

‎apps/drive-app/test/pages/CreateInspectionPage.test.tsx

Lines changed: 4 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
import { render, screen, waitFor } from '@testing-library/react';
22
import { Navigate } from 'react-router-dom';
3-
import { act } from 'react-dom/test-utils';
43
import { useLoadingState, useMonkAppParams } from '@monkvision/common';
54
import { expectPropsOnChildMock } from '@monkvision/test-utils';
6-
import { useMonkApi } from '@monkvision/network';
7-
import { TaskName } from '@monkvision/types';
8-
import { Button } from '@monkvision/common-ui-web';
95
import { CreateInspectionPage, Page } from '../../src/pages';
106

117
const appParams = {
@@ -31,63 +27,18 @@ describe('CreateInspection page', () => {
3127
unmount();
3228
});
3329

34-
it('should create the inspection and then redirect to the PhotoCapture page if the inspectionId is not defined', async () => {
35-
const id = 'test-id-test';
36-
const createInspection = jest.fn(() => Promise.resolve({ id }));
37-
(useMonkApi as jest.Mock).mockImplementation(() => ({ createInspection }));
38-
(useMonkAppParams as jest.Mock).mockImplementation(() => appParams);
39-
const { unmount } = render(<CreateInspectionPage />);
40-
41-
expect(createInspection).toHaveBeenCalledWith({
42-
tasks: [TaskName.DAMAGE_DETECTION, TaskName.WHEEL_ANALYSIS],
43-
});
44-
await waitFor(() => {
45-
expect(appParams.setInspectionId).toHaveBeenCalledWith(id);
46-
});
47-
48-
unmount();
49-
});
50-
51-
it('should display an error message if the API call fails', async () => {
52-
const createInspection = jest.fn(() => Promise.reject());
53-
(useMonkApi as jest.Mock).mockImplementation(() => ({ createInspection }));
54-
(useMonkAppParams as jest.Mock).mockImplementation(() => appParams);
30+
it('should display an error message if the inspection ID is not defined', async () => {
31+
(useMonkAppParams as jest.Mock).mockImplementation(() => ({ inspectionId: null }));
5532
const onError = jest.fn();
5633
const error = 'test-error';
5734
(useLoadingState as jest.Mock).mockImplementation(() => ({ onError, error, start: jest.fn() }));
5835
const { unmount } = render(<CreateInspectionPage />);
5936

6037
await waitFor(() => {
61-
expect(appParams.setInspectionId).not.toHaveBeenCalled();
62-
expect(onError).toHaveBeenCalled();
63-
expect(screen.queryByText('create-inspection.errors.create-inspection')).not.toBeNull();
38+
expect(onError).toHaveBeenCalledWith('create-inspection.errors.missing-inspection-id');
39+
expect(screen.getByText(error)).not.toBeNull();
6440
});
6541

6642
unmount();
6743
});
68-
69-
it('should display a retry button if the API call fails', async () => {
70-
const createInspection = jest.fn(() => Promise.reject());
71-
(useMonkApi as jest.Mock).mockImplementation(() => ({ createInspection }));
72-
(useMonkAppParams as jest.Mock).mockImplementation(() => appParams);
73-
(useLoadingState as jest.Mock).mockImplementation(() => ({
74-
onError: jest.fn(),
75-
error: 'test-error',
76-
start: jest.fn(),
77-
}));
78-
const { unmount } = render(<CreateInspectionPage />);
79-
80-
expectPropsOnChildMock(Button, {
81-
variant: 'outline',
82-
icon: 'refresh',
83-
onClick: expect.any(Function),
84-
});
85-
const { onClick } = (Button as unknown as jest.Mock).mock.calls[0][0];
86-
87-
createInspection.mockClear();
88-
act(() => onClick());
89-
expect(createInspection).toHaveBeenCalled();
90-
91-
unmount();
92-
});
9344
});

0 commit comments

Comments
 (0)