Skip to content

Commit ef5b712

Browse files
tnagorrafrozenhelium
tnagorra
authored and
frozenhelium
committed
Only show instructions for footprint tutorial
- Add padding on footprint geojson preview - Increase max characters for tutorial texts - Remove note on footprint tutorial - Send rgb color instead of names - Do not copy tutorial instructions to clipboard
1 parent 66b8838 commit ef5b712

File tree

8 files changed

+246
-251
lines changed

8 files changed

+246
-251
lines changed

‎manager-dashboard/app/components/GeoJsonPreview/index.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
TileLayer,
77
Coords,
88
StyleFunction,
9+
PointExpression,
910
} from 'leaflet';
1011
import { _cs } from '@togglecorp/fujs';
1112

@@ -50,6 +51,7 @@ interface Props {
5051
geoJson: GeoJSON.GeoJSON | undefined;
5152
url?: string | undefined;
5253
previewStyle?: StyleFunction;
54+
padding?: PointExpression;
5355
}
5456

5557
function GeoJsonPreview(props: Props) {
@@ -58,6 +60,7 @@ function GeoJsonPreview(props: Props) {
5860
geoJson,
5961
url = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
6062
previewStyle,
63+
padding,
6164
} = props;
6265

6366
const mapRef = React.useRef<Map>();
@@ -91,8 +94,6 @@ function GeoJsonPreview(props: Props) {
9194
{
9295
// NOTE: we have a limit of 22
9396
maxZoom: 22,
94-
// attribution: '',
95-
// subdomains: ['a', 'b', 'c'],
9697
},
9798
);
9899

@@ -128,7 +129,7 @@ function GeoJsonPreview(props: Props) {
128129
const bounds = newGeoJson.getBounds();
129130

130131
if (bounds.isValid()) {
131-
map.fitBounds(bounds);
132+
map.fitBounds(bounds, { padding });
132133
}
133134

134135
return () => {
@@ -141,6 +142,7 @@ function GeoJsonPreview(props: Props) {
141142
geoJson,
142143
url,
143144
previewStyle,
145+
padding,
144146
],
145147
);
146148

‎manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
8282
onChange={setFieldValueAndGenerateName}
8383
error={error?.projectTopic}
8484
label="Project Topic"
85-
hint="Enter the topic of your project (50 char max)."
85+
hint="Enter the topic of your project."
8686
disabled={disabled}
8787
autoFocus
8888
/>
@@ -91,7 +91,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
9191
value={value?.projectRegion}
9292
onChange={setFieldValueAndGenerateName}
9393
label="Project Region"
94-
hint="Enter name of your project Region (50 chars max)"
94+
hint="Enter name of your project Region"
9595
error={error?.projectRegion}
9696
disabled={disabled}
9797
/>
@@ -148,7 +148,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
148148
onChange={setFieldValue}
149149
error={error?.lookFor}
150150
label="Look For"
151-
hint="What should the users look for (e.g. buildings, cars, trees)? (25 chars max)"
151+
hint="What should the users look for (e.g. buildings, cars, trees)?"
152152
disabled={disabled}
153153
/>
154154
</div>

‎manager-dashboard/app/views/NewProject/utils.ts‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -185,21 +185,27 @@ export const MIN_OPTIONS = 2;
185185
export const MAX_SUB_OPTIONS = 6;
186186
export const MIN_SUB_OPTIONS = 2;
187187

188+
const XS_TEXT_MAX_LENGTH = 25;
189+
const SM_TEXT_MAX_LENGTH = 50;
190+
const MD_TEXT_MAX_LENGTH = 1000;
191+
// const LG_TEXT_MAX_LENGTH = 2000;
192+
const XL_TEXT_MAX_LENGTH = 10000;
193+
188194
export const projectFormSchema: ProjectFormSchema = {
189195
fields: (value): ProjectFormSchemaFields => {
190196
let baseSchema: ProjectFormSchemaFields = {
191197
projectTopic: {
192198
required: true,
193199
requiredValidation: requiredStringCondition,
194-
validations: [getNoMoreThanNCharacterCondition(50)],
200+
validations: [getNoMoreThanNCharacterCondition(SM_TEXT_MAX_LENGTH)],
195201
},
196202
projectType: {
197203
required: true,
198204
},
199205
projectRegion: {
200206
required: true,
201207
requiredValidation: requiredStringCondition,
202-
validations: [getNoMoreThanNCharacterCondition(50)],
208+
validations: [getNoMoreThanNCharacterCondition(SM_TEXT_MAX_LENGTH)],
203209
},
204210
projectNumber: {
205211
required: true,
@@ -222,12 +228,12 @@ export const projectFormSchema: ProjectFormSchema = {
222228
lookFor: {
223229
required: true,
224230
requiredValidation: requiredStringCondition,
225-
validations: [getNoMoreThanNCharacterCondition(25)],
231+
validations: [getNoMoreThanNCharacterCondition(XS_TEXT_MAX_LENGTH)],
226232
},
227233
projectDetails: {
228234
required: true,
229235
requiredValidation: requiredStringCondition,
230-
validations: [getNoMoreThanNCharacterCondition(10000)],
236+
validations: [getNoMoreThanNCharacterCondition(XL_TEXT_MAX_LENGTH)],
231237
},
232238
tutorialId: {
233239
required: true,
@@ -441,7 +447,7 @@ export const projectFormSchema: ProjectFormSchema = {
441447
? {
442448
required: true,
443449
requiredValidation: requiredStringCondition,
444-
validations: [getNoMoreThanNCharacterCondition(1000)],
450+
validations: [getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH)],
445451
}
446452
: {
447453
forceValue: nullValue,
@@ -492,7 +498,7 @@ export const projectFormSchema: ProjectFormSchema = {
492498
filterText: {
493499
required: true,
494500
requiredValidation: requiredStringCondition,
495-
validations: [getNoMoreThanNCharacterCondition(1000)],
501+
validations: [getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH)],
496502
},
497503
};
498504
}

‎manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ import {
1414
} from '../../utils';
1515
import styles from './styles.css';
1616

17+
// NOTE: the padding is selected wrt the size of the preview
18+
const footprintGeojsonPadding = [140, 140];
19+
1720
interface Props {
1821
className?: string;
1922
geoJson: FootprintGeoJSON | undefined;
@@ -64,6 +67,7 @@ export default function FootprintGeoJsonPreview(props: Props) {
6467
previewStyle={previewStyles}
6568
url={url}
6669
geoJson={geoJson}
70+
padding={footprintGeojsonPadding}
6771
/>
6872
<div className={styles.options}>
6973
{customOptions?.map((option) => {

‎manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx‎

Lines changed: 91 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ export default function ScenarioPageInput(props: Props) {
102102
lookFor,
103103
} = props;
104104

105-
const [activeSegmentInput, setActiveInput] = React.useState<ScenarioSegmentType['value']>('instructions');
105+
const [activeSegmentInputFromState, setActiveInput] = React.useState<ScenarioSegmentType['value']>('instructions');
106106

107107
const onFieldChange = useFormObject(
108108
index,
@@ -170,6 +170,10 @@ export default function ScenarioPageInput(props: Props) {
170170
[geoJsonFromProps, scenarioId],
171171
);
172172

173+
const activeSegmentInput: ScenarioSegmentType['value'] = projectType && projectType !== PROJECT_TYPE_FOOTPRINT
174+
? activeSegmentInputFromState
175+
: 'instructions';
176+
173177
const previewPopUpData = value[activeSegmentInput];
174178

175179
return (
@@ -209,74 +213,82 @@ export default function ScenarioPageInput(props: Props) {
209213
disabled={disabled}
210214
/>
211215
</div>
212-
<Heading level={4}>
213-
Hint
214-
</Heading>
215-
<div className={styles.scenarioForm}>
216-
<div className={styles.scenarioFormContent}>
217-
<TextInput
218-
name={'title' as const}
219-
value={value.hint?.title}
220-
label="Title"
221-
onChange={handleHintFieldChange}
222-
error={hintError?.title}
223-
disabled={disabled}
224-
/>
225-
<TextInput
226-
name={'description' as const}
227-
value={value.hint?.description}
228-
label="Description"
229-
onChange={handleHintFieldChange}
230-
error={hintError?.description}
231-
disabled={disabled}
232-
/>
233-
</div>
234-
<SelectInput
235-
name="icon"
236-
label="Icon"
237-
value={value.hint?.icon}
238-
options={iconList}
239-
keySelector={keySelector}
240-
labelSelector={labelSelector}
241-
onChange={handleHintFieldChange}
242-
error={hintError?.icon}
243-
disabled={disabled}
244-
/>
245-
</div>
246-
<Heading level={4}>
247-
Success
248-
</Heading>
249-
<div className={styles.scenarioForm}>
250-
<div className={styles.scenarioFormContent}>
251-
<TextInput
252-
name={'title' as const}
253-
value={value.success?.title}
254-
label="Title"
255-
onChange={handleSuccessFieldChange}
256-
error={successError?.title}
257-
disabled={disabled}
258-
/>
259-
<TextInput
260-
name={'description' as const}
261-
value={value.success?.description}
262-
label="Description"
263-
onChange={handleSuccessFieldChange}
264-
error={successError?.description}
265-
disabled={disabled}
266-
/>
267-
</div>
268-
<SelectInput
269-
name="icon"
270-
label="Icon"
271-
value={value.success?.icon}
272-
options={iconList}
273-
keySelector={keySelector}
274-
labelSelector={labelSelector}
275-
onChange={handleSuccessFieldChange}
276-
error={successError?.icon}
277-
disabled={disabled}
278-
/>
279-
</div>
216+
{projectType && projectType !== PROJECT_TYPE_FOOTPRINT && (
217+
<>
218+
<Heading level={4}>
219+
Hint
220+
</Heading>
221+
<div className={styles.scenarioForm}>
222+
<div className={styles.scenarioFormContent}>
223+
<TextInput
224+
name={'title' as const}
225+
value={value.hint?.title}
226+
label="Title"
227+
onChange={handleHintFieldChange}
228+
error={hintError?.title}
229+
disabled={disabled}
230+
/>
231+
<TextInput
232+
name={'description' as const}
233+
value={value.hint?.description}
234+
label="Description"
235+
onChange={handleHintFieldChange}
236+
error={hintError?.description}
237+
disabled={disabled}
238+
/>
239+
</div>
240+
<SelectInput
241+
name="icon"
242+
label="Icon"
243+
value={value.hint?.icon}
244+
options={iconList}
245+
keySelector={keySelector}
246+
labelSelector={labelSelector}
247+
onChange={handleHintFieldChange}
248+
error={hintError?.icon}
249+
disabled={disabled}
250+
/>
251+
</div>
252+
</>
253+
)}
254+
{projectType && projectType !== PROJECT_TYPE_FOOTPRINT && (
255+
<>
256+
<Heading level={4}>
257+
Success
258+
</Heading>
259+
<div className={styles.scenarioForm}>
260+
<div className={styles.scenarioFormContent}>
261+
<TextInput
262+
name={'title' as const}
263+
value={value.success?.title}
264+
label="Title"
265+
onChange={handleSuccessFieldChange}
266+
error={successError?.title}
267+
disabled={disabled}
268+
/>
269+
<TextInput
270+
name={'description' as const}
271+
value={value.success?.description}
272+
label="Description"
273+
onChange={handleSuccessFieldChange}
274+
error={successError?.description}
275+
disabled={disabled}
276+
/>
277+
</div>
278+
<SelectInput
279+
name="icon"
280+
label="Icon"
281+
value={value.success?.icon}
282+
options={iconList}
283+
keySelector={keySelector}
284+
labelSelector={labelSelector}
285+
onChange={handleSuccessFieldChange}
286+
error={successError?.icon}
287+
disabled={disabled}
288+
/>
289+
</div>
290+
</>
291+
)}
280292
</div>
281293
<div className={styles.scenarioPreview}>
282294
{projectType === PROJECT_TYPE_CHANGE_DETECTION && (
@@ -306,14 +318,16 @@ export default function ScenarioPageInput(props: Props) {
306318
lookFor={lookFor}
307319
/>
308320
)}
309-
<SegmentInput
310-
name={undefined}
311-
value={activeSegmentInput}
312-
options={previewOptions}
313-
keySelector={valueSelector}
314-
labelSelector={labelSelector}
315-
onChange={setActiveInput}
316-
/>
321+
{(projectType && projectType !== PROJECT_TYPE_FOOTPRINT) && (
322+
<SegmentInput
323+
name={undefined}
324+
value={activeSegmentInput}
325+
options={previewOptions}
326+
keySelector={valueSelector}
327+
labelSelector={labelSelector}
328+
onChange={setActiveInput}
329+
/>
330+
)}
317331
</div>
318332
</div>
319333
);

0 commit comments

Comments
 (0)