Skip to content

Commit a2e28c9

Browse files
flopez7flopez7
authored
Add a hint to qualifications input (#2549)
1 parent 9553ac3 commit a2e28c9

File tree

3 files changed

+167
-103
lines changed

3 files changed

+167
-103
lines changed

‎packages/apps/job-launcher/client/src/components/Jobs/Create/CvatJobRequestForm.tsx‎

Lines changed: 50 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -375,40 +375,55 @@ export const CvatJobRequestForm = () => {
375375
</FormControl>
376376
</Grid>
377377

378-
<Grid item xs={12}>
379-
<FormControl fullWidth>
380-
<Autocomplete
381-
multiple
382-
options={qualificationsOptions}
383-
getOptionLabel={(option) => option.title}
384-
value={values.qualifications}
385-
onChange={(event, newValues) => {
386-
setFieldValue('qualifications', newValues);
387-
}}
388-
selectOnFocus
389-
onBlur={handleBlur}
390-
handleHomeEndKeys
391-
renderTags={(value, getTagProps) =>
392-
value.map((option, index) => (
393-
<Chip
394-
label={option.title}
395-
{...getTagProps({ index })}
396-
/>
397-
))
398-
}
399-
renderInput={(params) => (
400-
<Box display="flex" alignItems="center" width="100%">
401-
<TextField
402-
{...params}
403-
label="Qualifications"
404-
variant="outlined"
405-
onBlur={handleBlur}
406-
fullWidth
407-
/>
408-
</Box>
409-
)}
410-
/>
411-
</FormControl>
378+
<Grid item container xs={12} mt={0} spacing={2}>
379+
<Grid item xs={12}>
380+
<Box display="flex">
381+
<Typography variant="body2" fontWeight={700}>
382+
Qualifications
383+
</Typography>
384+
<Tooltip title="Specify the required credentials or qualifications workers must have to get access to this job (e.g., english).">
385+
<HelpOutlineIcon
386+
color="secondary"
387+
sx={{ cursor: 'pointer', ml: 1 }}
388+
/>
389+
</Tooltip>
390+
</Box>
391+
</Grid>
392+
<Grid item xs={12}>
393+
<FormControl fullWidth>
394+
<Autocomplete
395+
multiple
396+
options={qualificationsOptions}
397+
getOptionLabel={(option) => option.title}
398+
value={values.qualifications}
399+
onChange={(event, newValues) => {
400+
setFieldValue('qualifications', newValues);
401+
}}
402+
selectOnFocus
403+
onBlur={handleBlur}
404+
handleHomeEndKeys
405+
renderTags={(value, getTagProps) =>
406+
value.map((option, index) => (
407+
<Chip
408+
label={option.title}
409+
{...getTagProps({ index })}
410+
/>
411+
))
412+
}
413+
renderInput={(params) => (
414+
<Box display="flex" alignItems="center" width="100%">
415+
<TextField
416+
{...params}
417+
label="Qualifications"
418+
variant="outlined"
419+
onBlur={handleBlur}
420+
fullWidth
421+
/>
422+
</Box>
423+
)}
424+
/>
425+
</FormControl>
426+
</Grid>
412427
</Grid>
413428
</Grid>
414429
</AccordionDetails>
@@ -624,7 +639,7 @@ export const CvatJobRequestForm = () => {
624639
InputProps={{
625640
endAdornment: (
626641
<InputAdornment position="end">
627-
<Tooltip title="This field should contain the relative path to the data, excluding protocol symbols like '://'. For example, if the full URL is 'https://bucket.com/annotations/points_15.json', the input should only include 'annotations/points_15.json'.">
642+
<Tooltip title="This field should contain the relative path to the data, excluding protocol symbols like '://'. For example, if the full URL is 'https://bucket.com/annotations/points.json', the input should only include 'annotations/points.json'.">
628643
<HelpOutlineIcon
629644
color="secondary"
630645
sx={{ cursor: 'pointer' }}

‎packages/apps/job-launcher/client/src/components/Jobs/Create/FortuneJobRequestForm.tsx‎

Lines changed: 55 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
12
import {
23
Autocomplete,
34
Box,
@@ -6,6 +7,7 @@ import {
67
FormControl,
78
Grid,
89
TextField,
10+
Tooltip,
911
Typography,
1012
} from '@mui/material';
1113
import { Formik } from 'formik';
@@ -161,40 +163,59 @@ export const FortuneJobRequestForm = () => {
161163
</FormControl>
162164
</Grid>
163165

164-
<Grid item xs={12}>
165-
<FormControl fullWidth>
166-
<Autocomplete
167-
multiple
168-
options={qualificationsOptions}
169-
getOptionLabel={(option) => option.title}
170-
value={values.qualifications}
171-
onChange={(event, newValues) => {
172-
setFieldValue('qualifications', newValues);
173-
}}
174-
selectOnFocus
175-
onBlur={handleBlur}
176-
handleHomeEndKeys
177-
renderTags={(value, getTagProps) =>
178-
value.map((option, index) => (
179-
<Chip
180-
label={option.title}
181-
{...getTagProps({ index })}
182-
/>
183-
))
184-
}
185-
renderInput={(params) => (
186-
<Box display="flex" alignItems="center" width="100%">
187-
<TextField
188-
{...params}
189-
label="Qualifications"
190-
variant="outlined"
191-
onBlur={handleBlur}
192-
fullWidth
193-
/>
194-
</Box>
195-
)}
196-
/>
197-
</FormControl>
166+
<Grid item container xs={12} mt={0} spacing={2}>
167+
<Grid item xs={12}>
168+
<Box display="flex">
169+
<Typography variant="body2" fontWeight={700}>
170+
Qualifications
171+
</Typography>
172+
<Tooltip title="Specify the required credentials or qualifications workers must have to get access to this job (e.g., english).">
173+
<HelpOutlineIcon
174+
color="secondary"
175+
sx={{ cursor: 'pointer', ml: 1 }}
176+
/>
177+
</Tooltip>
178+
</Box>
179+
</Grid>
180+
<Grid item xs={12}>
181+
<FormControl fullWidth>
182+
<Autocomplete
183+
multiple
184+
options={qualificationsOptions}
185+
getOptionLabel={(option) => option.title}
186+
value={values.qualifications}
187+
onChange={(event, newValues) => {
188+
setFieldValue('qualifications', newValues);
189+
}}
190+
selectOnFocus
191+
onBlur={handleBlur}
192+
handleHomeEndKeys
193+
renderTags={(value, getTagProps) =>
194+
value.map((option, index) => (
195+
<Chip
196+
label={option.title}
197+
{...getTagProps({ index })}
198+
/>
199+
))
200+
}
201+
renderInput={(params) => (
202+
<Box
203+
display="flex"
204+
alignItems="center"
205+
width="100%"
206+
>
207+
<TextField
208+
{...params}
209+
label="Qualifications"
210+
variant="outlined"
211+
onBlur={handleBlur}
212+
fullWidth
213+
/>
214+
</Box>
215+
)}
216+
/>
217+
</FormControl>
218+
</Grid>
198219
</Grid>
199220
</Grid>
200221
</AccordionDetails>

‎packages/apps/job-launcher/client/src/components/Jobs/Create/HCaptchaJobRequestForm.tsx‎

Lines changed: 62 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -301,40 +301,68 @@ export const HCaptchaJobRequestForm = () => {
301301
/>
302302
</FormControl>
303303
</Grid>
304-
<Grid item xs={12}>
305-
<FormControl fullWidth>
306-
<Autocomplete
307-
multiple
308-
options={qualificationsOptions}
309-
getOptionLabel={(option) => option.title}
310-
value={values.qualifications}
311-
onChange={(event, newValues) => {
312-
setFieldValue('qualifications', newValues);
313-
}}
314-
selectOnFocus
315-
onBlur={handleBlur}
316-
handleHomeEndKeys
317-
renderTags={(value, getTagProps) =>
318-
value.map((option, index) => (
319-
<Chip
320-
label={option.title}
321-
{...getTagProps({ index })}
322-
/>
323-
))
324-
}
325-
renderInput={(params) => (
326-
<Box display="flex" alignItems="center" width="100%">
327-
<TextField
328-
{...params}
329-
label="Qualifications"
330-
variant="outlined"
331-
onBlur={handleBlur}
332-
fullWidth
333-
/>
334-
</Box>
335-
)}
336-
/>
337-
</FormControl>
304+
305+
<Grid item container xs={12} mt={0} spacing={2}>
306+
<Grid item xs={12}>
307+
<Box display="flex">
308+
<Typography variant="body2" fontWeight={700}>
309+
Qualifications
310+
</Typography>
311+
<Tooltip title="Specify the required credentials or qualifications workers must have to get access to this job (e.g., english).">
312+
<HelpOutlineIcon
313+
color="secondary"
314+
sx={{ cursor: 'pointer', ml: 1 }}
315+
/>
316+
</Tooltip>
317+
</Box>
318+
</Grid>
319+
<Grid item xs={12}>
320+
<FormControl fullWidth>
321+
<Autocomplete
322+
multiple
323+
options={qualificationsOptions}
324+
getOptionLabel={(option) => option.title}
325+
value={values.qualifications}
326+
onChange={(event, newValues) => {
327+
setFieldValue('qualifications', newValues);
328+
}}
329+
selectOnFocus
330+
onBlur={handleBlur}
331+
handleHomeEndKeys
332+
renderTags={(value, getTagProps) =>
333+
value.map((option, index) => (
334+
<Chip
335+
label={option.title}
336+
{...getTagProps({ index })}
337+
/>
338+
))
339+
}
340+
renderInput={(params) => (
341+
<Box display="flex" alignItems="center" width="100%">
342+
<TextField
343+
{...params}
344+
label="Qualifications"
345+
variant="outlined"
346+
onBlur={handleBlur}
347+
fullWidth
348+
InputProps={{
349+
endAdornment: (
350+
<InputAdornment position="end">
351+
<Tooltip title="Specify the required credentials or qualifications workers must have to get access to this job (e.g., english).">
352+
<HelpOutlineIcon
353+
color="secondary"
354+
sx={{ cursor: 'pointer' }}
355+
/>
356+
</Tooltip>
357+
</InputAdornment>
358+
),
359+
}}
360+
/>
361+
</Box>
362+
)}
363+
/>
364+
</FormControl>
365+
</Grid>
338366
</Grid>
339367
</Grid>
340368
</AccordionDetails>

0 commit comments

Comments
 (0)