Small tweaks to deployment location (#422)

* Use a better step size for coordinate fields * Make it possible to hide input arrows and do so for coordinate fields * Enable scroll wheel zoom in maps * Fix latitude/longitude display values
RolnickLab · Jun 14, 2024 · 5e65de2 · 5e65de2
1 parent 9d810df
commit 5e65de2
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 10 deletions.
diff --git a/ui/src/components/form/form-field.tsx b/ui/src/components/form/form-field.tsx
@@ -9,14 +9,18 @@ export const FormField = <
   TFieldValues extends FieldValues,
   TName extends FieldPath<TFieldValues>
 >({
-  config,
-  control,
   name,
+  control,
+  config,
   type,
+  step,
+  noArrows,
   onBlur,
 }: Pick<ControllerProps<TFieldValues, TName>, 'name' | 'control'> & {
   config: FormConfig
   type?: 'number' | 'text' | 'password'
+  step?: number
+  noArrows?: boolean
   onBlur?: (e: FocusEvent<HTMLInputElement>) => void
 }) => {
   const fieldConfig = config[name]
@@ -35,8 +39,10 @@ export const FormField = <
               ? `${fieldConfig.label} *`
               : fieldConfig.label
           }
-          error={fieldState.error?.message}
           description={fieldConfig.description}
+          error={fieldState.error?.message}
+          step={step}
+          noArrows={noArrows}
           onBlur={(e) => {
             onBlur?.(e)
             field.onBlur()

diff --git a/ui/src/design-system/components/input/input.module.scss b/ui/src/design-system/components/input/input.module.scss
@@ -100,6 +100,20 @@
   &:disabled {
     opacity: 0.5;
   }
+
+  &.noArrows {
+    /* Chrome, Safari, Edge, Opera */
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    /* Firefox */
+    &[type='number'] {
+      -moz-appearance: textfield;
+    }
+  }
 }
 
 .passwordButtonContainer {

diff --git a/ui/src/design-system/components/input/input.tsx b/ui/src/design-system/components/input/input.tsx
@@ -21,9 +21,11 @@ interface InputProps {
   error?: string
   label: string
   name: string
+  noArrows?: boolean
   placeholder?: string
-  value?: string | number
+  step?: number
   type?: 'text' | 'number' | 'password'
+  value?: string | number
   onBlur?: (e: FocusEvent<HTMLInputElement>) => void
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void
   onFocus?: (e: FocusEvent<HTMLInputElement>) => void
@@ -37,6 +39,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       error,
       label,
       name,
+      noArrows,
+      step = 'any',
       type: initialType,
       ...rest
     } = props
@@ -69,12 +73,13 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             autoComplete="on"
             className={classNames(styles.input, {
               [styles.password]: initialType === 'password',
+              [styles.noArrows]: noArrows,
             })}
             disabled={disabled}
             id={name}
             name={name}
             ref={forwardedRef}
-            step={type === 'number' ? 'any' : undefined}
+            step={type === 'number' ? step : undefined}
             type={type}
             {...rest}
           />

diff --git a/ui/src/design-system/map/editable-map/editable-map.tsx b/ui/src/design-system/map/editable-map/editable-map.tsx
@@ -44,7 +44,7 @@ export const EditableMap = ({
       maxBounds={MAX_BOUNDS}
       minZoom={MIN_ZOOM}
       ref={mapRef}
-      scrollWheelZoom={false}
+      scrollWheelZoom
       zoom={DEFAULT_ZOOM}
     >
       <MapContent

diff --git a/ui/src/design-system/map/minimap-control.tsx b/ui/src/design-system/map/minimap-control.tsx
@@ -78,7 +78,7 @@ export const MinimapControl = () => {
           doubleClickZoom={false}
           dragging={false}
           maxBounds={MAX_BOUNDS}
-          scrollWheelZoom={false}
+          scrollWheelZoom
           style={MINIMAP_STYLE}
           zoom={MINIMAP_ZOOM}
           zoomControl={false}

diff --git a/ui/src/design-system/map/multi-marker-map/multi-marker-map.tsx b/ui/src/design-system/map/multi-marker-map/multi-marker-map.tsx
@@ -57,7 +57,7 @@ export const MultiMarkerMap = ({
       maxBounds={MAX_BOUNDS}
       minZoom={MIN_ZOOM}
       ref={mapRef}
-      scrollWheelZoom={false}
+      scrollWheelZoom
     >
       <TileLayer attribution={ATTRIBUTION} url={TILE_LAYER_URL} />
       {markers.map((marker, index) => (

diff --git a/...rc/pages/deployment-details/deployment-details-form/section-location/section-location.tsx b/...rc/pages/deployment-details/deployment-details-form/section-location/section-location.tsx
@@ -92,6 +92,8 @@ export const SectionLocation = ({
             control={control}
             config={config}
             type="number"
+            step={1 / 100000}
+            noArrows
             onBlur={(e) => {
               const lat = _.toNumber(e.currentTarget.value)
               setValue('latitude', lat)
@@ -103,6 +105,8 @@ export const SectionLocation = ({
             control={control}
             config={config}
             type="number"
+            step={1 / 100000}
+            noArrows
             onBlur={(e) => {
               const lng = _.toNumber(e.currentTarget.value)
               setValue('longitude', lng)

diff --git a/ui/src/pages/deployment-details/deployment-details-info.tsx b/ui/src/pages/deployment-details/deployment-details-info.tsx
@@ -71,11 +71,11 @@ export const DeploymentDetailsInfo = ({
           <FormRow>
             <InputValue
               label={translate(STRING.FIELD_LABEL_LATITUDE)}
-              value={deployment.latitude}
+              value={`${deployment.latitude}`}
             />
             <InputValue
               label={translate(STRING.FIELD_LABEL_LONGITUDE)}
-              value={deployment.longitude}
+              value={`${deployment.longitude}`}
             />
           </FormRow>
         </FormSection>