fix(raster-tile): filter out raster tiles from selection if disabled

app/components/Checkbox/index.tsx

@@ -3,6 +3,10 @@ import { _cs } from '@togglecorp/fujs';
 
 import ButtonLayout from '#components/ButtonLayout';
 import DefaultCheckmark, { Props as CheckmarkProps } from '#components/Checkmark';
+import InputError from '#components/InputError';
+import InputHint from '#components/InputHint';
+import ListLayout from '#components/ListLayout';
+import { SpacingType } from '#utils/styles';
 
 import styles from './styles.module.css';
 
@@ -19,6 +23,9 @@ export interface Props<NAME> {
     value: boolean | undefined | null;
     onChange: (value: boolean, name: NAME) => void;
     name: NAME;
+    hint?: React.ReactNode;
+    error?: React.ReactNode;
+    spacing?: SpacingType;
 }
 
 function Checkbox<const NAME>(props: Props<NAME>) {
@@ -35,6 +42,9 @@ function Checkbox<const NAME>(props: Props<NAME>) {
         labelClassName,
         indeterminate,
         name,
+        hint,
+        error,
+        spacing,
         ...otherProps
     } = props;
 
@@ -46,50 +56,65 @@ function Checkbox<const NAME>(props: Props<NAME>) {
         [name, onChange],
     );
 
-    const className = _cs(
-        classNameFromProps,
-        indeterminate && styles.indeterminate,
-        !indeterminate && value && styles.checked,
-        readOnly && styles.readOnly,
-    );
-
     return (
         <label // eslint-disable-line jsx-a11y/label-has-associated-control
             className={styles.checkbox}
             title={tooltip}
         >
-            <ButtonLayout
-                className={className}
-                start={(
-                    <Checkmark
-                        className={_cs(checkmarkClassName, styles.checkmark)}
-                        value={value ?? false}
-                        indeterminate={indeterminate}
-                    />
-                )}
-                spacingOffset={-2}
-                withoutPadding
-                disabled={disabled}
-                styleVariant="transparent"
+            <ListLayout
+                className={classNameFromProps}
+                spacing={spacing}
+                spacingOffset={-1}
+                layout="block"
             >
-                <input
-                    onChange={handleChange}
-                    className={styles.input}
-                    type="checkbox"
-                    checked={value ?? false}
-                    disabled={disabled || readOnly}
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...otherProps}
-                />
-                <div
+                <ButtonLayout
                     className={_cs(
-                        // styles.label,
-                        labelClassName,
+                        indeterminate && styles.indeterminate,
+                        !indeterminate && value && styles.checked,
+                        readOnly && styles.readOnly,
                     )}
+                    start={(
+                        <Checkmark
+                            className={_cs(checkmarkClassName, styles.checkmark)}
+                            value={value ?? false}
+                            indeterminate={indeterminate}
+                        />
+                    )}
+                    spacingOffset={-2}
+                    withoutPadding
+                    disabled={disabled}
+                    styleVariant="transparent"
                 >
-                    { label }
-                </div>
-            </ButtonLayout>
+                    <input
+                        onChange={handleChange}
+                        className={styles.input}
+                        type="checkbox"
+                        checked={value ?? false}
+                        disabled={disabled || readOnly}
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...otherProps}
+                    />
+                    <div
+                        className={_cs(
+                            // styles.label,
+                            labelClassName,
+                        )}
+                    >
+                        { label }
+                    </div>
+                </ButtonLayout>
+                {/* FIXME: Style these */}
+                {error && (
+                    <InputError>
+                        {error}
+                    </InputError>
+                )}
+                {!error && hint && (
+                    <InputHint>
+                        {hint}
+                    </InputHint>
+                )}
+            </ListLayout>
         </label>
     );
 }

app/components/ZoomLevelSelectInput/index.tsx

@@ -83,7 +83,7 @@ function ZoomLevelSelectInput<const NAME>(props: Props<NAME>) {
             error={error}
             disabled={disabled}
             nonClearable
-            hint="We use the Tile Map Service zoom levels. Please check for your area which zoom level is available. If you use a custom tile server you may be able to use even higher zoom levels."
+            hint="We use the zoom levels that the tile server provides. Please check for your area which zoom level is available before you create a project."
         />
     );
 }

app/components/domain/CustomOptionInput/SubOptionInput/index.tsx

@@ -81,6 +81,7 @@ function SubOptionInput(props: Props) {
                     error={error?.value}
                     disabled={disabled}
                     spacing="sm"
+                    hint="Choose a value for each sub-option"
                 />
                 <GridLayoutItem columnSpan={2}>
                     <TextInput
@@ -91,6 +92,7 @@ function SubOptionInput(props: Props) {
                         error={error?.description}
                         disabled={disabled}
                         spacing="sm"
+                        hint="Provide a brief description for each sub-option"
                     />
                 </GridLayoutItem>
             </ListLayout>

app/components/domain/CustomOptionInput/index.tsx

@@ -115,6 +115,7 @@ function CustomOptionInput(props: Props) {
                         error={error?.title}
                         disabled={disabled}
                         spacing="sm"
+                        hint="Provide 'Title' for each answer option (e.g. Yes, No, Offset)"
                     />
                     <NumberInput
                         label="Value"
@@ -124,6 +125,7 @@ function CustomOptionInput(props: Props) {
                         error={error?.value}
                         disabled={disabled}
                         spacing="sm"
+                        hint="Choose the value for each answer choice (e.g. 1 - Yes, 0 - No, 3 - Offset)"
                     />
                     <IconSelectInput
                         label="Icon"
@@ -134,6 +136,7 @@ function CustomOptionInput(props: Props) {
                         nonClearable
                         disabled={disabled}
                         spacing="sm"
+                        hint="Choose the icon for each answer choice (e.g. Checkmark - Yes, Close - No, Flag - Offset)"
                     />
                     <ColorSelectInput
                         label="Color"
@@ -143,6 +146,7 @@ function CustomOptionInput(props: Props) {
                         error={error?.iconColor}
                         disabled={disabled}
                         spacing="sm"
+                        hint="Choose the color for each answer choice (e.g. Green - Yes, Red - No, Orange - Offset)"
                     />
                     <GridLayoutItem columnSpan={2}>
                         <TextArea
@@ -153,6 +157,7 @@ function CustomOptionInput(props: Props) {
                             error={error?.description}
                             disabled={disabled}
                             spacing="sm"
+                            placeholder="Provide a brief description for each answer option (e.g. for Yes - The mapped outline does match the building footprint)"
                         />
                     </GridLayoutItem>
                 </ListLayout>

app/components/domain/RasterTileServerInput/index.tsx

@@ -23,13 +23,8 @@ import ListLayout from '#components/ListLayout';
 import NumberInput from '#components/NumberInput';
 import RadioInput from '#components/RadioInput';
 import TextInput from '#components/TextInput';
-import EnumsContext from '#contexts/EnumsContext';
 import TileServerContext from '#contexts/TileServerContext';
 import { RasterTileServerNameEnum } from '#generated/types/graphql';
-import {
-    keySelector,
-    labelSelector,
-} from '#utils/common';
 
 import BaseMap from '../BaseMap';
 import GeoJsonAssetMapSource from '../GeoJsonAssetMapSource';
@@ -42,6 +37,18 @@ import {
     TileInputKeys,
 } from './schema';
 
+interface Option {
+    type: RasterTileServerNameEnum;
+    label: string;
+}
+
+function imageryKeySelector(item: Option) {
+    return item.type;
+}
+function imageryLabelSelector(item: Option) {
+    return item.label;
+}
+
 interface Props {
     label?: React.ReactNode;
     value: PartialRasterTileServerInputFields | undefined,
@@ -75,9 +82,14 @@ function RasterTileServerInput(props: Props) {
 
     const error = getErrorObject(formError);
 
-    const { rasterTileServerNameOptions } = useContext(EnumsContext);
+    const { raster: rasterTileServerNameOptions } = useContext(TileServerContext);
     const [zoomView, setZoomView] = useState<MapZoomViewType>('aoiBounds');
 
+    const workingRasterTileServerNameOptions = useMemo(
+        () => rasterTileServerNameOptions.filter((option) => !option.disabled) ?? [],
+        [rasterTileServerNameOptions],
+    );
+
     const fieldName = (isDefined(value)
         && isDefined(value.name)
     ) ? rasterTileServerNameToTileInputKey[value.name] : 'custom';
@@ -133,14 +145,15 @@ function RasterTileServerInput(props: Props) {
                     <RadioInput
                         label="Imagery server"
                         name="name"
-                        options={rasterTileServerNameOptions ?? []}
+                        options={workingRasterTileServerNameOptions}
                         value={value?.name}
                         onChange={handleImageryServerChange}
-                        keySelector={keySelector}
-                        labelSelector={labelSelector}
+                        keySelector={imageryKeySelector}
+                        labelSelector={imageryLabelSelector}
                         error={error?.name}
                         disabled={disabled}
                         radioListLayout="block"
+                        hint="Select the tile server providing satellite imagery tiles for your project. Make sure you have permission if using custom imagery."
                     />
                     {isDefined(value)
                         && isDefined(value.name)
@@ -172,7 +185,7 @@ function RasterTileServerInput(props: Props) {
                                 <TextInput
                                     name="credits"
                                     label="Imagery Credits"
-                                    hint="Insert appropriate imagery credits"
+                                    hint="Insert appropriate imagery credits if you are using a custom tile server."
                                     value={value.custom?.credits}
                                     error={getErrorObject(error?.custom)?.credits}
                                     onChange={setCustomRasterTileServerFieldValue}

app/components/domain/RasterTileServerOutput/index.tsx

@@ -12,7 +12,6 @@ import {
 import Button from '#components/Button';
 import Container, { ContainerProps } from '#components/Container';
 import TextOutput from '#components/TextOutput';
-import EnumsContext from '#contexts/EnumsContext';
 import TileServerContext from '#contexts/TileServerContext';
 import {
     ProjectRasterTileServerConfig,
@@ -37,9 +36,17 @@ function RasterTileServerOutput(props: Props) {
         ...containerProps
     } = props;
 
-    const { rasterTileServerNameMapping } = useContext(EnumsContext);
     const { raster: rasterTileServers } = useContext(TileServerContext);
 
+    const rasterTileServerNameMapping = useMemo(
+        () => listToMap(
+            rasterTileServers,
+            (item) => item.type,
+            (item) => item,
+        ),
+        [rasterTileServers],
+    );
+
     const {
         url,
         credits,
@@ -106,7 +113,7 @@ function RasterTileServerOutput(props: Props) {
             */}
             <TextOutput
                 label="Supported zoom"
-                value={`${formatNumber(minZoom)} - ${formatNumber(maxZoom)}`}
+                value={`${formatNumber(minZoom) ?? '--'} to ${formatNumber(maxZoom) ?? '--'}`}
             />
             <TextOutput
                 label="Credits"