Merge pull request #896 from mapswipe/dev

Only show instructions for footprint tutorial

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

@@ -6,6 +6,7 @@ import {
     TileLayer,
     Coords,
     StyleFunction,
+    PointExpression,
 } from 'leaflet';
 import { _cs } from '@togglecorp/fujs';
 
@@ -50,6 +51,7 @@ interface Props {
     geoJson: GeoJSON.GeoJSON | undefined;
     url?: string | undefined;
     previewStyle?: StyleFunction;
+    padding?: PointExpression;
 }
 
 function GeoJsonPreview(props: Props) {
@@ -58,6 +60,7 @@ function GeoJsonPreview(props: Props) {
         geoJson,
         url = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
         previewStyle,
+        padding,
     } = props;
 
     const mapRef = React.useRef<Map>();
@@ -91,8 +94,6 @@ function GeoJsonPreview(props: Props) {
                     {
                         // NOTE: we have a limit of 22
                         maxZoom: 22,
-                        // attribution: '',
-                        // subdomains: ['a', 'b', 'c'],
                     },
                 );
 
@@ -128,7 +129,7 @@ function GeoJsonPreview(props: Props) {
             const bounds = newGeoJson.getBounds();
 
             if (bounds.isValid()) {
-                map.fitBounds(bounds);
+                map.fitBounds(bounds, { padding });
             }
 
             return () => {
@@ -141,6 +142,7 @@ function GeoJsonPreview(props: Props) {
             geoJson,
             url,
             previewStyle,
+            padding,
         ],
     );
 

manager-dashboard/app/utils/common.tsx

@@ -33,9 +33,9 @@ import { IconType } from 'react-icons';
 import oneTapIcon from '#resources/icons/1_Tap_Black.png';
 import twoTapIcon from '#resources/icons/2_Tap_Black.png';
 import threeTapIcon from '#resources/icons/3_Tap_Black.png';
-import tapIcon from '#resources/icons/tap_icon.png';
 import angularTapIcon from '#resources/icons/tap_icon_angular.png';
 import swipeIcon from '#resources/icons/swipeleft_icon_black.png';
+import check from '#resources/icons/tick_green_on_white.png';
 
 export function valueSelector<T>(item: { value: T }) {
     return item.value;
@@ -82,6 +82,7 @@ export type IconKey = 'add-outline'
     | 'ban-outline'
     | 'check'
     | 'close-outline'
+    | 'checkmark-outline'
     | 'egg-outline'
     | 'ellipse-outline'
     | 'flag-outline'
@@ -132,7 +133,7 @@ function getPngIcon(src: string, alt: string) {
     return element;
 }
 
-export const iconList: IconItem[] = [
+export const customOptionsOnlyIconList: IconItem[] = [
     {
         key: 'add-outline',
         label: 'Add',
@@ -149,8 +150,8 @@ export const iconList: IconItem[] = [
         component: IoBanOutline,
     },
     {
-        key: 'check',
-        label: 'Check',
+        key: 'checkmark-outline',
+        label: 'Checkmark',
         component: IoCheckmarkOutline,
     },
     {
@@ -263,11 +264,11 @@ export const iconList: IconItem[] = [
         label: 'Warning',
         component: IoWarningOutline,
     },
-    {
-        key: 'general-tap',
-        label: 'General Tap',
-        component: getPngIcon(tapIcon, 'general tap'),
-    },
+];
+
+// Icon List for scenario pages only.
+// They need to be treated diffrently as they are loaded as pngs
+const scenarioOnlyIconList: IconItem[] = [
     {
         key: 'tap',
         label: 'Tap',
@@ -293,10 +294,17 @@ export const iconList: IconItem[] = [
         label: 'Swipe Left',
         component: getPngIcon(swipeIcon, 'swipe left'),
     },
+    {
+        key: 'check',
+        label: 'Check',
+        component: getPngIcon(check, 'check'),
+    },
 ];
 
+export const combinedIconList = [...scenarioOnlyIconList, ...customOptionsOnlyIconList];
+
 export const iconMap = listToMap(
-    iconList,
+    combinedIconList,
     (icon) => icon.key,
     (icon) => icon.component,
 );

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

@@ -82,7 +82,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                     onChange={setFieldValueAndGenerateName}
                     error={error?.projectTopic}
                     label="Project Topic"
-                    hint="Enter the topic of your project (50 char max)."
+                    hint="Enter the topic of your project."
                     disabled={disabled}
                     autoFocus
                 />
@@ -91,7 +91,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                     value={value?.projectRegion}
                     onChange={setFieldValueAndGenerateName}
                     label="Project Region"
-                    hint="Enter name of your project Region (50 chars max)"
+                    hint="Enter name of your project Region"
                     error={error?.projectRegion}
                     disabled={disabled}
                 />
@@ -148,7 +148,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
                     onChange={setFieldValue}
                     error={error?.lookFor}
                     label="Look For"
-                    hint="What should the users look for (e.g. buildings, cars, trees)? (25 chars max)"
+                    hint="What should the users look for (e.g. buildings, cars, trees)?"
                     disabled={disabled}
                 />
             </div>

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

@@ -185,21 +185,27 @@ export const MIN_OPTIONS = 2;
 export const MAX_SUB_OPTIONS = 6;
 export const MIN_SUB_OPTIONS = 2;
 
+const XS_TEXT_MAX_LENGTH = 25;
+const SM_TEXT_MAX_LENGTH = 50;
+const MD_TEXT_MAX_LENGTH = 1000;
+// const LG_TEXT_MAX_LENGTH = 2000;
+const XL_TEXT_MAX_LENGTH = 10000;
+
 export const projectFormSchema: ProjectFormSchema = {
     fields: (value): ProjectFormSchemaFields => {
         let baseSchema: ProjectFormSchemaFields = {
             projectTopic: {
                 required: true,
                 requiredValidation: requiredStringCondition,
-                validations: [getNoMoreThanNCharacterCondition(50)],
+                validations: [getNoMoreThanNCharacterCondition(SM_TEXT_MAX_LENGTH)],
             },
             projectType: {
                 required: true,
             },
             projectRegion: {
                 required: true,
                 requiredValidation: requiredStringCondition,
-                validations: [getNoMoreThanNCharacterCondition(50)],
+                validations: [getNoMoreThanNCharacterCondition(SM_TEXT_MAX_LENGTH)],
             },
             projectNumber: {
                 required: true,
@@ -222,12 +228,12 @@ export const projectFormSchema: ProjectFormSchema = {
             lookFor: {
                 required: true,
                 requiredValidation: requiredStringCondition,
-                validations: [getNoMoreThanNCharacterCondition(25)],
+                validations: [getNoMoreThanNCharacterCondition(XS_TEXT_MAX_LENGTH)],
             },
             projectDetails: {
                 required: true,
                 requiredValidation: requiredStringCondition,
-                validations: [getNoMoreThanNCharacterCondition(10000)],
+                validations: [getNoMoreThanNCharacterCondition(XL_TEXT_MAX_LENGTH)],
             },
             tutorialId: {
                 required: true,
@@ -441,7 +447,7 @@ export const projectFormSchema: ProjectFormSchema = {
                         ? {
                             required: true,
                             requiredValidation: requiredStringCondition,
-                            validations: [getNoMoreThanNCharacterCondition(1000)],
+                            validations: [getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH)],
                         }
                         : {
                             forceValue: nullValue,
@@ -492,7 +498,7 @@ export const projectFormSchema: ProjectFormSchema = {
                         filterText: {
                             required: true,
                             requiredValidation: requiredStringCondition,
-                            validations: [getNoMoreThanNCharacterCondition(1000)],
+                            validations: [getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH)],
                         },
                     };
                 }

manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx

@@ -14,7 +14,7 @@ import TextInput from '#components/TextInput';
 import NumberInput from '#components/NumberInput';
 import SelectInput from '#components/SelectInput';
 import NonFieldError from '#components/NonFieldError';
-import { iconList, keySelector, labelSelector } from '#utils/common';
+import { customOptionsOnlyIconList, keySelector, labelSelector } from '#utils/common';
 
 import SubOptionInput from './SubOptionInput';
 import {
@@ -103,7 +103,7 @@ export default function CustomOptionInput(props: Props) {
                     name="icon"
                     label="Icon"
                     value={value?.icon}
-                    options={iconList}
+                    options={customOptionsOnlyIconList}
                     keySelector={keySelector}
                     labelSelector={labelSelector}
                     onChange={onOptionChange}

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

@@ -14,6 +14,9 @@ import {
 } from '../../utils';
 import styles from './styles.css';
 
+// NOTE: the padding is selected wrt the size of the preview
+const footprintGeojsonPadding = [140, 140];
+
 interface Props {
     className?: string;
     geoJson: FootprintGeoJSON | undefined;
@@ -64,6 +67,7 @@ export default function FootprintGeoJsonPreview(props: Props) {
                 previewStyle={previewStyles}
                 url={url}
                 geoJson={geoJson}
+                padding={footprintGeojsonPadding}
             />
             <div className={styles.options}>
                 {customOptions?.map((option) => {