refactor: [M3-8938] - Update TextField to not depend on ramda (#11306)

bnussman-akamai · bnussman · mjac0bs · web-flow · commit 23fa3c75bf2e · 2024-11-25T13:47:43.000-05:00
* use clamp from linode/ui

* move clamping max and min to validation package

* add changesets

* Add custom validation error messages

Thanks!

Co-authored-by: Mariah Jacobs &lt;114685994+mjac0bs@users.noreply.github.com&gt;

---------

Co-authored-by: Banks Nussman &lt;banks@nussman.us&gt;
Co-authored-by: Mariah Jacobs &lt;114685994+mjac0bs@users.noreply.github.com&gt;
diff --git a/packages/manager/.changeset/pr-11306-tech-stories-1732237599297.md b/packages/manager/.changeset/pr-11306-tech-stories-1732237599297.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Refactor components to use `clamp` from `@linode/ui` rather than `ramda` ([#11306](https://github.com/linode/manager/pull/11306))
diff --git a/packages/manager/src/components/Paginate.ts b/packages/manager/src/components/Paginate.ts
@@ -1,4 +1,5 @@
-import { clamp, slice } from 'ramda';
+import { clamp } from '@linode/ui';
+import { slice } from 'ramda';
 import * as React from 'react';
 
 import scrollTo from 'src/utilities/scrollTo';
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/StandardRescueDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/StandardRescueDialog.tsx
@@ -1,7 +1,7 @@
-import { Button, Notice, Paper } from '@linode/ui';
+import { Button, Notice, Paper, clamp } from '@linode/ui';
 import { styled, useTheme } from '@mui/material/styles';
 import { useSnackbar } from 'notistack';
-import { assoc, clamp, equals, pathOr } from 'ramda';
+import { assoc, equals, pathOr } from 'ramda';
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
diff --git a/packages/manager/src/features/Longview/LongviewLanding/Gauges/CPU.tsx b/packages/manager/src/features/Longview/LongviewLanding/Gauges/CPU.tsx
@@ -1,6 +1,6 @@
-import { Typography } from '@linode/ui';
+import { Typography, clamp } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
-import { clamp, pathOr } from 'ramda';
+import { pathOr } from 'ramda';
 import * as React from 'react';
 
 import { GaugePercent } from 'src/components/GaugePercent/GaugePercent';
@@ -89,7 +89,7 @@ export const normalizeValue = (value: number, numCores: number) => {
   if (numCores < 0) {
     return 0;
   }
-  const clamped = clamp(0, 100 * numCores)(value);
+  const clamped = clamp(0, 100 * numCores, value);
   return Math.round(clamped);
 };
 
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerActiveCheck.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerActiveCheck.tsx
@@ -4,6 +4,11 @@ import {
   TextField,
   Typography,
 } from '@linode/ui';
+import {
+  CHECK_ATTEMPTS,
+  CHECK_INTERVAL,
+  CHECK_TIMEOUT,
+} from '@linode/validation';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
@@ -138,6 +143,8 @@ export const ActiveCheck = (props: ActiveCheckProps) => {
                 errorGroup={forEdit ? `${configIdx}` : undefined}
                 errorText={errorMap.check_interval}
                 label="Interval"
+                max={CHECK_INTERVAL.MAX}
+                min={CHECK_INTERVAL.MIN}
                 onChange={onHealthCheckIntervalChange}
                 type="number"
                 value={healthCheckInterval}
@@ -159,6 +166,8 @@ export const ActiveCheck = (props: ActiveCheckProps) => {
                 errorGroup={forEdit ? `${configIdx}` : undefined}
                 errorText={errorMap.check_timeout}
                 label="Timeout"
+                max={CHECK_TIMEOUT.MAX}
+                min={CHECK_TIMEOUT.MIN}
                 onChange={onHealthCheckTimeoutChange}
                 type="number"
                 value={healthCheckTimeout}
@@ -178,6 +187,8 @@ export const ActiveCheck = (props: ActiveCheckProps) => {
                 errorGroup={forEdit ? `${configIdx}` : undefined}
                 errorText={errorMap.check_attempts}
                 label="Attempts"
+                max={CHECK_ATTEMPTS.MAX}
+                min={CHECK_ATTEMPTS.MIN}
                 onChange={onHealthCheckAttemptsChange}
                 type="number"
                 value={healthCheckAttempts}
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations.tsx
@@ -38,7 +38,6 @@ import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView';
 import { NodeBalancerConfigPanel } from '../NodeBalancerConfigPanel';
 import { lensFrom } from '../NodeBalancerCreate';
 import {
-  clampNumericString,
   createNewNodeBalancerConfig,
   createNewNodeBalancerConfigNode,
   nodeForRequest,
@@ -626,13 +625,13 @@ class NodeBalancerConfigurations extends React.Component<
         success={panelMessages[idx]}
       >
         <NodeBalancerConfigPanel
-          onHealthCheckAttemptsChange={this.updateStateWithClamp(
+          onHealthCheckAttemptsChange={this.updateState(
             L.healthCheckAttemptsLens
           )}
-          onHealthCheckIntervalChange={this.updateStateWithClamp(
+          onHealthCheckIntervalChange={this.updateState(
             L.healthCheckIntervalLens
           )}
-          onHealthCheckTimeoutChange={this.updateStateWithClamp(
+          onHealthCheckTimeoutChange={this.updateState(
             L.healthCheckTimeoutLens
           )}
           onHealthCheckTypeChange={this.updateState(
@@ -1080,15 +1079,6 @@ class NodeBalancerConfigurations extends React.Component<
     this.setState(set(lens, value), L && callback ? callback(L) : undefined);
   };
 
-  updateStateWithClamp = (
-    lens: Lens,
-    L?: { [key: string]: Lens },
-    callback?: (L: { [key: string]: Lens }) => () => void
-  ) => (value: any) => {
-    const clampedValue = clampNumericString(0, Number.MAX_SAFE_INTEGER)(value);
-    this.updateState(lens, L, callback)(clampedValue);
-  };
-
   render() {
     const { nodeBalancerLabel } = this.props;
     const {
diff --git a/packages/manager/src/features/NodeBalancers/utils.ts b/packages/manager/src/features/NodeBalancers/utils.ts
@@ -1,6 +1,5 @@
-import { clamp, compose, filter, isNil, toString } from 'ramda';
+import { filter, isNil } from 'ramda';
 
-import { defaultNumeric } from 'src/utilities/defaultNumeric';
 import { getErrorMap } from 'src/utilities/errorUtils';
 
 import type {
@@ -12,11 +11,6 @@ import type {
 import type { APIError } from '@linode/api-v4';
 import type { NodeBalancerConfigNode } from '@linode/api-v4/lib/nodebalancers';
 
-export const clampNumericString = (low: number, hi: number) =>
-  compose(toString, clamp(low, hi), (value: number) =>
-    defaultNumeric(0, value)
-  ) as (value: any) => string;
-
 export const createNewNodeBalancerConfigNode = (): NodeBalancerConfigNodeFields => ({
   address: '',
   label: '',
diff --git a/packages/manager/src/utilities/defaultNumeric.ts b/packages/manager/src/utilities/defaultNumeric.ts
diff --git a/packages/ui/.changeset/pr-11306-tech-stories-1732237285418.md b/packages/ui/.changeset/pr-11306-tech-stories-1732237285418.md
@@ -0,0 +1,5 @@
+---
+"@linode/ui": Tech Stories
+---
+
+Update `TextField` to not depend on `ramda` ([#11306](https://github.com/linode/manager/pull/11306))
diff --git a/packages/ui/src/components/TextField/TextField.tsx b/packages/ui/src/components/TextField/TextField.tsx
@@ -1,18 +1,18 @@
+import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
+import { useTheme } from '@mui/material/styles';
+import { default as _TextField } from '@mui/material/TextField';
+import React from 'react';
+
+import { clamp, convertToKebabCase } from '../../utilities';
 import { Box } from '../Box';
 import { CircleProgress } from '../CircleProgress';
 import { FormHelperText } from '../FormHelperText';
 import { InputAdornment } from '../InputAdornment';
 import { InputLabel } from '../InputLabel';
 import { TooltipIcon } from '../TooltipIcon';
-import { convertToKebabCase } from '../../utilities';
-import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
-import { useTheme } from '@mui/material/styles';
-import { default as _TextField } from '@mui/material/TextField';
-import { clamp } from 'ramda';
-import * as React from 'react';
 
 import type { BoxProps } from '../Box';
-import { TooltipProps } from '../Tooltip';
+import type { TooltipProps } from '../Tooltip';
 import type { StandardTextFieldProps } from '@mui/material/TextField';
 
 interface BaseProps {
diff --git a/packages/ui/src/utilities/clamp.test.ts b/packages/ui/src/utilities/clamp.test.ts
@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest';
+
+import { clamp } from './clamp';
+
+describe('clamp utility function', () => {
+  it('clamps when the value is greater than the max', () => {
+    expect(clamp(1, 3, 4)).toBe(3);
+  });
+
+  it('clamps when the value is less than the min', () => {
+    expect(clamp(1, 3, 0)).toBe(1);
+  });
+
+  it('returns the value if no clamping is required', () => {
+    expect(clamp(1, 3, 2)).toBe(2);
+  });
+
+  it('handles negative numbers', () => {
+    expect(clamp(-5, 5, -6)).toBe(-5);
+  });
+});
diff --git a/packages/ui/src/utilities/clamp.ts b/packages/ui/src/utilities/clamp.ts
@@ -0,0 +1,12 @@
+/**
+ * Restricts a number to be within a range.
+ */
+export function clamp(min: number, max: number, value: number) {
+  if (value > max) {
+    return max;
+  }
+  if (value < min) {
+    return min;
+  }
+  return value;
+}
diff --git a/packages/ui/src/utilities/index.ts b/packages/ui/src/utilities/index.ts
@@ -1,2 +1,3 @@
 export * from './convertToKebabCase';
 export * from './omittedProps';
+export * from './clamp';
diff --git a/packages/validation/.changeset/pr-11306-added-1732237401894.md b/packages/validation/.changeset/pr-11306-added-1732237401894.md
@@ -0,0 +1,5 @@
+---
+"@linode/validation": Added
+---
+
+maximum and minimum values for `check_attempts`, `check_interval`, and `check_timeout` in `createNodeBalancerConfigSchema` ([#11306](https://github.com/linode/manager/pull/11306))
diff --git a/packages/validation/.changeset/pr-11306-added-1732237539821.md b/packages/validation/.changeset/pr-11306-added-1732237539821.md
@@ -0,0 +1,5 @@
+---
+"@linode/validation": Added
+---
+
+maximum and minimum values for `check_attempts`, `check_interval`, and `check_timeout` to `UpdateNodeBalancerConfigSchema` ([#11306](https://github.com/linode/manager/pull/11306))
diff --git a/packages/validation/src/nodebalancers.schema.ts b/packages/validation/src/nodebalancers.schema.ts
@@ -5,6 +5,21 @@ const LABEL_WARNING = 'Label must be between 3 and 32 characters.';
 
 export const PRIVATE_IPv4_REGEX = /^10\.|^172\.1[6-9]\.|^172\.2[0-9]\.|^172\.3[0-1]\.|^192\.168\.|^fd/;
 
+export const CHECK_ATTEMPTS = {
+  MIN: 1,
+  MAX: 30,
+};
+
+export const CHECK_TIMEOUT = {
+  MIN: 1,
+  MAX: 30,
+};
+
+export const CHECK_INTERVAL = {
+  MIN: 2,
+  MAX: 3600,
+};
+
 export const nodeBalancerConfigNodeSchema = object({
   label: string()
     .matches(
@@ -36,12 +51,31 @@ export const nodeBalancerConfigNodeSchema = object({
 
 export const createNodeBalancerConfigSchema = object({
   algorithm: mixed().oneOf(['roundrobin', 'leastconn', 'source']),
-  check_attempts: number(),
+  check_attempts: number()
+    .min(
+      CHECK_ATTEMPTS.MIN,
+      `Attempts should be greater than or equal to ${CHECK_ATTEMPTS.MIN}.`
+    )
+    .max(
+      CHECK_ATTEMPTS.MAX,
+      `Attempts should be less than or equal to ${CHECK_ATTEMPTS.MAX}.`
+    )
+    .integer(),
   check_body: string().when('check', {
     is: 'http_body',
     then: string().required('An HTTP body regex is required.'),
   }),
-  check_interval: number().typeError('Check interval must be a number.'),
+  check_interval: number()
+    .min(
+      CHECK_INTERVAL.MIN,
+      `Interval should be greater than or equal to ${CHECK_INTERVAL.MIN}.`
+    )
+    .max(
+      CHECK_INTERVAL.MAX,
+      `Interval should be less than or equal to ${CHECK_INTERVAL.MAX}.`
+    )
+    .typeError('Interval must be a number.')
+    .integer(),
   check_passive: boolean(),
   check_path: string()
     .matches(/\/.*/)
@@ -54,7 +88,17 @@ export const createNodeBalancerConfigSchema = object({
       then: string().required('An HTTP path is required.'),
     }),
   proxy_protocol: string().oneOf(['none', 'v1', 'v2']),
-  check_timeout: number().typeError('Timeout must be a number.').integer(),
+  check_timeout: number()
+    .min(
+      CHECK_TIMEOUT.MIN,
+      `Timeout should be greater than or equal to ${CHECK_TIMEOUT.MIN}.`
+    )
+    .max(
+      CHECK_TIMEOUT.MAX,
+      `Timeout should be less than or equal to ${CHECK_TIMEOUT.MAX}.`
+    )
+    .typeError('Timeout must be a number.')
+    .integer(),
   check: mixed().oneOf(['none', 'connection', 'http', 'http_body']),
   cipher_suite: mixed().oneOf(['recommended', 'legacy']),
   port: number()
@@ -80,12 +124,31 @@ export const createNodeBalancerConfigSchema = object({
 
 export const UpdateNodeBalancerConfigSchema = object({
   algorithm: mixed().oneOf(['roundrobin', 'leastconn', 'source']),
-  check_attempts: number(),
+  check_attempts: number()
+    .min(
+      CHECK_ATTEMPTS.MIN,
+      `Attempts should be greater than or equal to ${CHECK_ATTEMPTS.MIN}.`
+    )
+    .max(
+      CHECK_ATTEMPTS.MAX,
+      `Attempts should be less than or equal to ${CHECK_ATTEMPTS.MAX}.`
+    )
+    .integer(),
   check_body: string().when('check', {
     is: 'http_body',
     then: string().required('An HTTP body regex is required.'),
   }),
-  check_interval: number().typeError('Check interval must be a number.'),
+  check_interval: number()
+    .min(
+      CHECK_INTERVAL.MIN,
+      `Interval should be greater than or equal to ${CHECK_INTERVAL.MIN}.`
+    )
+    .max(
+      CHECK_INTERVAL.MAX,
+      `Interval should be less than or equal to ${CHECK_INTERVAL.MAX}.`
+    )
+    .typeError('Interval must be a number.')
+    .integer(),
   check_passive: boolean(),
   check_path: string()
     .matches(/\/.*/)
@@ -98,7 +161,17 @@ export const UpdateNodeBalancerConfigSchema = object({
       then: string().required('An HTTP path is required.'),
     }),
   proxy_protocol: string().oneOf(['none', 'v1', 'v2']),
-  check_timeout: number().typeError('Timeout must be a number.').integer(),
+  check_timeout: number()
+    .min(
+      CHECK_TIMEOUT.MIN,
+      `Timeout should be greater than or equal to ${CHECK_TIMEOUT.MIN}.`
+    )
+    .max(
+      CHECK_TIMEOUT.MAX,
+      `Timeout should be less than or equal to ${CHECK_TIMEOUT.MAX}.`
+    )
+    .typeError('Timeout must be a number.')
+    .integer(),
   check: mixed().oneOf(['none', 'connection', 'http', 'http_body']),
   cipher_suite: mixed().oneOf(['recommended', 'legacy']),
   port: number()

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@linode/manager": Tech Stories
 +---
++
 +Refactor components to use `clamp` from `@linode/ui` rather than `ramda` ([#11306](https://github.com/linode/manager/pull/11306))