Merge pull request #877 from mapswipe/fix/bug-fixes

Validation fix
mapswipe · Jul 3, 2023 · 2bc325d · 2bc325d
2 parents 0db8a56 + 4922ad4
commit 2bc325d
Show file tree

Hide file tree

Showing 11 changed files with 446 additions and 90 deletions.
diff --git a/manager-dashboard/app/components/AlertBanner/index.tsx b/manager-dashboard/app/components/AlertBanner/index.tsx
@@ -2,25 +2,36 @@ import React from 'react';
 import { IoAlertCircleOutline } from 'react-icons/io5';
 import { _cs } from '@togglecorp/fujs';
 
+import Heading from '#components/Heading';
+
 import styles from './styles.css';
 
 interface Props {
     className?: string;
+    title?: React.ReactNode;
     children: React.ReactNode;
 }
 
 function AlertBanner(props: Props) {
     const {
         className,
         children,
+        title,
     } = props;
 
     return (
         <div className={_cs(styles.banner, className)}>
             <div className={styles.bannerIcon}>
                 <IoAlertCircleOutline />
             </div>
-            {children}
+            <div className={styles.container}>
+                {title && (
+                    <Heading>
+                        {title}
+                    </Heading>
+                )}
+                {children}
+            </div>
         </div>
     );
 }

diff --git a/manager-dashboard/app/components/AlertBanner/styles.css b/manager-dashboard/app/components/AlertBanner/styles.css
@@ -8,4 +8,10 @@
     .banner-icon {
         font-size: var(--font-size-super-large);
     }
-}
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-small);
+    }
+}
diff --git a/manager-dashboard/app/components/GeoJsonPreview/index.tsx b/manager-dashboard/app/components/GeoJsonPreview/index.tsx
@@ -89,6 +89,8 @@ function GeoJsonPreview(props: Props) {
                 const layer = new Layer(
                     finalUrl,
                     {
+                        // NOTE: we have a limit of 22
+                        maxZoom: 22,
                         // attribution: '',
                         // subdomains: ['a', 'b', 'c'],
                     },

diff --git a/manager-dashboard/app/resources/icons/swipeleft_icon_black.png b/manager-dashboard/app/resources/icons/swipeleft_icon_black.png
diff --git a/manager-dashboard/app/utils/common.tsx b/manager-dashboard/app/utils/common.tsx
@@ -35,6 +35,7 @@ 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';
 
 export function valueSelector<T>(item: { value: T }) {
     return item.value;
@@ -76,37 +77,38 @@ export const projectTypeLabelMap: {
     [PROJECT_TYPE_COMPLETENESS]: 'Completeness',
 };
 
-export type IconKey = 'addOutline'
-    | 'alertOutline'
-    | 'banOutline'
-    | 'checkmarkOutline'
-    | 'closeOutline'
-    | 'eggOutline'
-    | 'ellipseOutline'
-    | 'flagOutline'
-    | 'handLeftOutline'
-    | 'handRightOutline'
-    | 'happyOutline'
-    | 'heartOutline'
-    | 'helpOutline'
-    | 'informationOutline'
-    | 'prismOutline'
-    | 'refreshOutline'
-    | 'removeOutline'
-    | 'sadOutline'
-    | 'searchOutline'
-    | 'shapesOutline'
-    | 'squareOutline'
-    | 'starOutline'
-    | 'thumbsDownOutline'
-    | 'thumbsUpOutline'
-    | 'triangleOutline'
-    | 'warningOutline'
-    | 'generalTap'
+export type IconKey = 'add-outline'
+    | 'alert-outline'
+    | 'ban-outline'
+    | 'check'
+    | 'close-outline'
+    | 'egg-outline'
+    | 'ellipse-outline'
+    | 'flag-outline'
+    | 'hand-left-outline'
+    | 'hand-right-outline'
+    | 'happy-outline'
+    | 'heart-outline'
+    | 'help-outline'
+    | 'information-outline'
+    | 'prism-outline'
+    | 'refresh-outline'
+    | 'remove-outline'
+    | 'sad-outline'
+    | 'search-outline'
+    | 'shapes-outline'
+    | 'square-outline'
+    | 'star-outline'
+    | 'thumbs-down-outline'
+    | 'thumbs-up-outline'
+    | 'triangle-outline'
+    | 'warning-outline'
+    | 'general-tap'
     | 'tap'
-    | 'oneTap'
-    | 'twoTap'
-    | 'threeTap';
+    | 'tap-1'
+    | 'tap-2'
+    | 'tap-3'
+    | 'swipe-left';
 
 export interface IconItem {
     key: IconKey;
@@ -132,137 +134,137 @@ function getPngIcon(src: string, alt: string) {
 
 export const iconList: IconItem[] = [
     {
-        key: 'addOutline',
+        key: 'add-outline',
         label: 'Add',
         component: IoAddOutline,
     },
     {
-        key: 'alertOutline',
+        key: 'alert-outline',
         label: 'Alert',
         component: IoAlertOutline,
     },
     {
-        key: 'banOutline',
+        key: 'ban-outline',
         label: 'Ban',
         component: IoBanOutline,
     },
     {
-        key: 'checkmarkOutline',
-        label: 'Checkmark',
+        key: 'check',
+        label: 'Check',
         component: IoCheckmarkOutline,
     },
     {
-        key: 'closeOutline',
+        key: 'close-outline',
         label: 'Close',
         component: IoCloseOutline,
     },
     {
-        key: 'eggOutline',
+        key: 'egg-outline',
         label: 'Egg',
         component: IoEggOutline,
     },
     {
-        key: 'ellipseOutline',
+        key: 'ellipse-outline',
         label: 'Ellipse',
         component: IoEllipseOutline,
     },
     {
-        key: 'flagOutline',
+        key: 'flag-outline',
         label: 'Flag',
         component: IoFlagOutline,
     },
     {
-        key: 'handLeftOutline',
+        key: 'hand-left-outline',
         label: 'Hand Left',
         component: IoHandLeftOutline,
     },
     {
-        key: 'handRightOutline',
+        key: 'hand-right-outline',
         label: 'Hand Right',
         component: IoHandRightOutline,
     },
     {
-        key: 'happyOutline',
+        key: 'happy-outline',
         label: 'Happy',
         component: IoHappyOutline,
     },
     {
-        key: 'heartOutline',
+        key: 'heart-outline',
         label: 'Heart',
         component: IoHeartOutline,
     },
     {
-        key: 'helpOutline',
+        key: 'help-outline',
         label: 'Help',
         component: IoHelpOutline,
     },
     {
-        key: 'informationOutline',
+        key: 'information-outline',
         label: 'Information',
         component: IoInformationOutline,
     },
     {
-        key: 'prismOutline',
+        key: 'prism-outline',
         label: 'Prism',
         component: IoPrismOutline,
     },
     {
-        key: 'refreshOutline',
+        key: 'refresh-outline',
         label: 'Refresh',
         component: IoRefreshOutline,
     },
     {
-        key: 'removeOutline',
+        key: 'remove-outline',
         label: 'Remove',
         component: IoRemoveOutline,
     },
     {
-        key: 'sadOutline',
+        key: 'sad-outline',
         label: 'Sad',
         component: IoSadOutline,
     },
     {
-        key: 'searchOutline',
+        key: 'search-outline',
         label: 'Search',
         component: IoSearchOutline,
     },
     {
-        key: 'shapesOutline',
+        key: 'shapes-outline',
         label: 'Shapes',
         component: IoShapesOutline,
     },
     {
-        key: 'squareOutline',
+        key: 'square-outline',
         label: 'Square',
         component: IoSquareOutline,
     },
     {
-        key: 'starOutline',
+        key: 'star-outline',
         label: 'Star',
         component: IoStarOutline,
     },
     {
-        key: 'thumbsDownOutline',
+        key: 'thumbs-down-outline',
         label: 'Thumbs Down',
         component: IoThumbsDownOutline,
     },
     {
-        key: 'thumbsUpOutline',
+        key: 'thumbs-up-outline',
         label: 'Thumbs Up',
         component: IoThumbsUpOutline,
     },
     {
-        key: 'triangleOutline',
+        key: 'triangle-outline',
         label: 'Triangle',
         component: IoTriangleOutline,
     },
     {
-        key: 'warningOutline',
+        key: 'warning-outline',
         label: 'Warning',
         component: IoWarningOutline,
     },
     {
-        key: 'generalTap',
+        key: 'general-tap',
         label: 'General Tap',
         component: getPngIcon(tapIcon, 'general tap'),
     },
@@ -272,20 +274,25 @@ export const iconList: IconItem[] = [
         component: getPngIcon(angularTapIcon, 'tap'),
     },
     {
-        key: 'oneTap',
+        key: 'tap-1',
         label: '1-Tap',
         component: getPngIcon(oneTapIcon, 'one tap'),
     },
     {
-        key: 'twoTap',
+        key: 'tap-2',
         label: '2-Tap',
         component: getPngIcon(twoTapIcon, 'two tap'),
     },
     {
-        key: 'threeTap',
+        key: 'tap-3',
         label: '3-Tap',
         component: getPngIcon(threeTapIcon, 'three tap'),
     },
+    {
+        key: 'swipe-left',
+        label: 'Swipe Left',
+        component: getPngIcon(swipeIcon, 'swipe left'),
+    },
 ];
 
 export const iconMap = listToMap(

diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx
@@ -30,7 +30,7 @@ export default function CustomOptionPreview(props: Props) {
             {value?.map((option, index) => {
                 const Icon = option.icon
                     ? iconMap[option.icon]
-                    : iconMap.flagOutline;
+                    : iconMap['flag-outline'];
 
                 const previewText = [
                     option.title || `{option ${index + 1}}`,

diff --git a/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx b/manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx
@@ -146,7 +146,7 @@ export default function CustomOptionInput(props: Props) {
             {/* FIXME: use accordion open by default */}
             <div className={styles.subOptions}>
                 <Heading level={5}>
-                    Sub Options
+                    Sub-options
                 </Heading>
                 <NonFieldError
                     error={subOptionsError}
@@ -164,7 +164,7 @@ export default function CustomOptionInput(props: Props) {
                     />
                 ))}
                 {!value.subOptions?.length && (
-                    <div>No sub options</div>
+                    <div>No sub-options</div>
                 )}
                 {!readOnly && (
                     <Button
@@ -175,7 +175,7 @@ export default function CustomOptionInput(props: Props) {
                         // FIXME: use constant from utils
                         disabled={disabled || (value.subOptions && value.subOptions.length >= 6)}
                     >
-                        Add Sub Option
+                        Add Sub-option
                     </Button>
                 )}
             </div>

diff --git a/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx b/manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx
@@ -69,7 +69,7 @@ export default function FootprintGeoJsonPreview(props: Props) {
                 {customOptions?.map((option) => {
                     const Icon = option.icon
                         ? iconMap[option.icon]
-                        : iconMap.flagOutline;
+                        : iconMap['flag-outline'];
                     return (
                         <div
                             key={option.optionId}