refactor: [M3-8815] – Migrate TextField component to ui package (#…

…11290)

packages/manager/.changeset/pr-11290-removed-1732046225737.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Removed
+---
+
+`TextField` component and `convertToKebabCase` utility function (migrated to `ui` package) ([#11290](https://github.com/linode/manager/pull/11290))

packages/manager/src/components/ActionMenu/ActionMenu.tsx

@@ -1,11 +1,10 @@
-import { TooltipIcon } from '@linode/ui';
+import { TooltipIcon, convertToKebabCase } from '@linode/ui';
 import { IconButton, ListItemText } from '@mui/material';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import * as React from 'react';
 
 import KebabIcon from 'src/assets/icons/kebab.svg';
-import { convertToKebabCase } from 'src/utilities/convertToKebobCase';
 
 export interface Action {
   disabled?: boolean;

packages/manager/src/components/Autocomplete/Autocomplete.tsx

@@ -1,20 +1,17 @@
-import { CircleProgress } from '@linode/ui';
-import { Box, InputAdornment } from '@linode/ui';
+import { Box, CircleProgress, InputAdornment, TextField } from '@linode/ui';
 import CloseIcon from '@mui/icons-material/Close';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import MuiAutocomplete from '@mui/material/Autocomplete';
 import React from 'react';
 
-import { TextField } from 'src/components/TextField';
-
 import {
   CustomPopper,
   SelectedIcon,
   StyledListItem,
 } from './Autocomplete.styles';
 
+import type { TextFieldProps } from '@linode/ui';
 import type { AutocompleteProps } from '@mui/material/Autocomplete';
-import type { TextFieldProps } from 'src/components/TextField';
 
 export interface EnhancedAutocompleteProps<
   T extends { label: string },

packages/manager/src/components/CopyableTextField/CopyableTextField.tsx

@@ -1,14 +1,13 @@
-import { Box } from '@linode/ui';
+import { Box, TextField } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
 import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
-import { TextField } from 'src/components/TextField';
 
 import { DownloadTooltip } from '../DownloadTooltip';
 
+import type { TextFieldProps } from '@linode/ui';
 import type { CopyTooltipProps } from 'src/components/CopyTooltip/CopyTooltip';
-import type { TextFieldProps } from 'src/components/TextField';
 
 export interface CopyableTextFieldProps extends TextFieldProps {
   /**

packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx

@@ -1,14 +1,12 @@
-import { CircleProgress } from '@linode/ui';
+import { CircleProgress, TextField } from '@linode/ui';
 import { IconButton, InputAdornment } from '@linode/ui';
 import Clear from '@mui/icons-material/Clear';
 import Search from '@mui/icons-material/Search';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { debounce } from 'throttle-debounce';
 
-import { TextField } from 'src/components/TextField';
-
-import type { TextFieldProps } from 'src/components/TextField';
+import type { TextFieldProps } from '@linode/ui';
 
 export interface DebouncedSearchProps extends TextFieldProps {
   className?: string;

packages/manager/src/components/Drawer.stories.tsx

@@ -1,10 +1,9 @@
-import { Button } from '@linode/ui';
+import { Button, TextField } from '@linode/ui';
 import { action } from '@storybook/addon-actions';
 import React from 'react';
 
 import { ActionsPanel } from './ActionsPanel/ActionsPanel';
 import { Drawer } from './Drawer';
-import { TextField } from './TextField';
 import { Typography } from './Typography';
 
 import type { Meta, StoryObj } from '@storybook/react';

packages/manager/src/components/EditableEntityLabel/EditableInput.styles.tsx

@@ -1,12 +1,11 @@
-import { Box, Button, fadeIn } from '@linode/ui';
+import { Box, Button, TextField, fadeIn } from '@linode/ui';
 import Edit from '@mui/icons-material/Edit';
 import { styled } from '@mui/material/styles';
 
-import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
 
 import type { EditableTextVariant } from './EditableInput';
-import type { TextFieldProps } from 'src/components/TextField';
+import type { TextFieldProps } from '@linode/ui';
 
 export const StyledTypography = styled(Typography, {
   label: 'EditableInput__StyledTypography',

packages/manager/src/components/EditableEntityLabel/EditableInput.tsx

@@ -12,7 +12,7 @@ import {
   StyledTypography,
 } from './EditableInput.styles';
 
-import type { TextFieldProps } from 'src/components/TextField';
+import type { TextFieldProps } from '@linode/ui';
 
 export type EditableTextVariant = 'h1' | 'h2' | 'table-cell';
 

packages/manager/src/components/EditableText/EditableText.tsx

@@ -1,14 +1,12 @@
-import { Button, ClickAwayListener, H1Header } from '@linode/ui';
+import { Button, ClickAwayListener, H1Header, TextField } from '@linode/ui';
 import Check from '@mui/icons-material/Check';
 import Close from '@mui/icons-material/Close';
 import Edit from '@mui/icons-material/Edit';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { makeStyles } from 'tss-react/mui';
 
-import { TextField } from '../TextField';
-
-import type { TextFieldProps } from '../TextField';
+import type { TextFieldProps } from '@linode/ui';
 import type { Theme } from '@mui/material/styles';
 
 const useStyles = makeStyles<void, 'editIcon' | 'icon'>()(

packages/manager/src/components/EnhancedNumberInput/EnhancedNumberInput.tsx

@@ -1,10 +1,8 @@
-import { Box, Button } from '@linode/ui';
+import { Box, Button, PlusSignIcon, TextField } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
 import Minus from 'src/assets/icons/LKEminusSign.svg';
-import Plus from 'src/assets/icons/LKEplusSign.svg';
-import { TextField } from 'src/components/TextField';
 
 const sxTextFieldBase = {
   '&::-webkit-inner-spin-button': {
@@ -155,6 +153,6 @@ const MinusIcon = styled(Minus)({
   width: 12,
 });
 
-const PlusIcon = styled(Plus)({
+const PlusIcon = styled(PlusSignIcon)({
   width: 14,
 });

packages/manager/src/components/EnhancedSelect/Select.tsx

@@ -1,10 +1,9 @@
+import { convertToKebabCase } from '@linode/ui';
 import { useTheme } from '@mui/material';
 import * as React from 'react';
 import ReactSelect from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 
-import { convertToKebabCase } from 'src/utilities/convertToKebobCase';
-
 import { DropdownIndicator } from './components/DropdownIndicator';
 import Input from './components/Input';
 import { LoadingIndicator } from './components/LoadingIndicator';
@@ -17,14 +16,14 @@ import Control from './components/SelectControl';
 import { SelectPlaceholder as Placeholder } from './components/SelectPlaceholder';
 import { reactSelectStyles, useStyles } from './Select.styles';
 
+import type { TextFieldProps } from '@linode/ui';
 import type { Theme } from '@mui/material';
 import type {
   ActionMeta,
   NamedProps as SelectProps,
   ValueType,
 } from 'react-select';
 import type { CreatableProps as CreatableSelectProps } from 'react-select/creatable';
-import type { TextFieldProps } from 'src/components/TextField';
 
 export interface Item<T = number | string, L = string> {
   data?: any;

packages/manager/src/components/EnhancedSelect/components/SelectControl.tsx

@@ -1,14 +1,13 @@
+import { TextField } from '@linode/ui';
 import * as React from 'react';
-import { ControlProps } from 'react-select';
 
-import { TextField } from 'src/components/TextField';
+import type { ControlProps } from 'react-select';
 
 type Props = ControlProps<any, any>;
 
 const SelectControl: React.FC<Props> = (props) => {
   return (
     <TextField
-      placeholder={props.selectProps.placeholder}
       InputProps={{
         inputComponent: 'div',
         inputProps: {
@@ -24,6 +23,7 @@ const SelectControl: React.FC<Props> = (props) => {
           : props.selectProps.placeholder
       }
       fullWidth
+      placeholder={props.selectProps.placeholder}
       {...props.selectProps.textFieldProps}
     />
   );

packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx

@@ -1,12 +1,11 @@
-import { Button, InputLabel, Notice, TooltipIcon } from '@linode/ui';
+import { Button, InputLabel, Notice, TextField, TooltipIcon } from '@linode/ui';
 import Close from '@mui/icons-material/Close';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import { LinkButton } from 'src/components/LinkButton';
 import { StyledLinkButtonBox } from 'src/components/SelectFirewallPanel/SelectFirewallPanel';
-import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
 
 import type { InputBaseProps } from '@mui/material/InputBase';

packages/manager/src/components/PaginationFooter/PaginationFooter.tsx

@@ -1,11 +1,10 @@
-import { Box } from '@linode/ui';
+import { Box, TextField } from '@linode/ui';
 import { styled, useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { MenuItem } from 'src/components/MenuItem';
 
 import { PaginationControls } from '../PaginationControls/PaginationControls';
-import { TextField } from '../TextField';
 
 export const MIN_PAGE_SIZE = 25;
 

packages/manager/src/components/PasswordInput/HideShowText.tsx

@@ -1,8 +1,9 @@
+import { TextField } from '@linode/ui';
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import * as React from 'react';
 
-import { TextField, TextFieldProps } from '../TextField';
+import type { TextFieldProps } from '@linode/ui';
 
 export const HideShowText = (props: TextFieldProps) => {
   const [hidden, setHidden] = React.useState(true);

packages/manager/src/components/PasswordInput/PasswordInput.tsx

@@ -5,7 +5,7 @@ import zxcvbn from 'zxcvbn';
 import { StrengthIndicator } from '../PasswordInput/StrengthIndicator';
 import { HideShowText } from './HideShowText';
 
-import type { TextFieldProps } from 'src/components/TextField';
+import type { TextFieldProps } from '@linode/ui';
 
 interface Props extends TextFieldProps {
   disabledReason?: JSX.Element | string;

packages/manager/src/components/PlacementGroupsSelect/PlacementGroupsSelect.tsx

@@ -8,8 +8,8 @@ import { useAllPlacementGroupsQuery } from 'src/queries/placementGroups';
 import { PlacementGroupSelectOption } from './PlacementGroupSelectOption';
 
 import type { APIError, PlacementGroup, Region } from '@linode/api-v4';
+import type { TextFieldProps } from '@linode/ui';
 import type { SxProps, Theme } from '@mui/material/styles';
-import type { TextFieldProps } from 'src/components/TextField';
 
 export interface PlacementGroupsSelectProps {
   /**

packages/manager/src/components/TypeToConfirm/TypeToConfirm.tsx

@@ -1,9 +1,11 @@
+import { TextField } from '@linode/ui';
 import * as React from 'react';
 
 import { Link } from 'src/components/Link';
-import { TextField, TextFieldProps } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
 
+import type { TextFieldProps } from '@linode/ui';
+
 export interface TypeToConfirmProps extends Omit<TextFieldProps, 'onChange'> {
   confirmationText?: JSX.Element | string;
   hideInstructions?: boolean;

packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@linode/ui';
+import { Button, convertToKebabCase } from '@linode/ui';
 import {
   Step,
   StepConnector,
@@ -11,8 +11,6 @@ import Box from '@mui/material/Box';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import React, { useState } from 'react';
 
-import { convertToKebabCase } from 'src/utilities/convertToKebobCase';
-
 import {
   CustomStepIcon,
   StyledCircleIcon,

packages/manager/src/features/Account/CloseAccountDialog.tsx

@@ -1,11 +1,10 @@
 import { cancelAccount } from '@linode/api-v4/lib/account';
-import { Notice } from '@linode/ui';
+import { Notice, TextField } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 import { makeStyles } from 'tss-react/mui';
 
-import { TextField } from 'src/components/TextField';
 import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog';
 import { Typography } from 'src/components/Typography';
 import { useProfile } from 'src/queries/profile/profile';

packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx

@@ -5,6 +5,7 @@ import {
   InputAdornment,
   Notice,
   Stack,
+  TextField,
   TooltipIcon,
 } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
@@ -18,7 +19,6 @@ import { Drawer } from 'src/components/Drawer';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { LinearProgress } from 'src/components/LinearProgress';
 import { SupportLink } from 'src/components/SupportLink';
-import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
 import { getRestrictedResourceText } from 'src/features/Account/utils';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';

packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDialog.tsx

@@ -1,13 +1,12 @@
 import { addPromotion } from '@linode/api-v4/lib';
-import { Notice } from '@linode/ui';
+import { Notice, TextField } from '@linode/ui';
 import { useQueryClient } from '@tanstack/react-query';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
-import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
 import { accountQueries } from 'src/queries/account/queries';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';

packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx

@@ -1,4 +1,4 @@
-import { Notice } from '@linode/ui';
+import { Notice, TextField } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import { allCountries } from 'country-region-data';
 import { useFormik } from 'formik';
@@ -7,7 +7,6 @@ import { makeStyles } from 'tss-react/mui';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import EnhancedSelect from 'src/components/EnhancedSelect/Select';
-import { TextField } from 'src/components/TextField';
 import {
   getRestrictedResourceText,
   useIsTaxIdEnabled,

packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddCreditCardForm.tsx

@@ -1,5 +1,5 @@
 import { addPaymentMethod } from '@linode/api-v4/lib';
-import { Notice } from '@linode/ui';
+import { Notice, TextField } from '@linode/ui';
 import { CreditCardSchema } from '@linode/validation';
 import Grid from '@mui/material/Unstable_Grid2';
 import { useQueryClient } from '@tanstack/react-query';
@@ -10,7 +10,6 @@ import NumberFormat from 'react-number-format';
 import { makeStyles } from 'tss-react/mui';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
-import { TextField } from 'src/components/TextField';
 import { accountQueries } from 'src/queries/account/queries';
 import { parseExpiryYear } from 'src/utilities/creditCard';
 import { handleAPIErrors } from 'src/utilities/formikErrorUtils';

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/CreateAlertDefinition.tsx

@@ -1,5 +1,5 @@
 import { yupResolver } from '@hookform/resolvers/yup';
-import { Paper } from '@linode/ui';
+import { Paper, TextField } from '@linode/ui';
 import { createAlertDefinitionSchema } from '@linode/validation';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
@@ -8,7 +8,6 @@ import { useHistory } from 'react-router-dom';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Breadcrumb } from 'src/components/Breadcrumb/Breadcrumb';
-import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
 import { useCreateAlertDefinition } from 'src/queries/cloudpulse/alerts';
 

packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.style.ts

@@ -1,8 +1,7 @@
-import { Box, Button } from '@linode/ui';
+import { Box, Button, TextField } from '@linode/ui';
 import { Grid, styled } from '@mui/material';
 
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
-import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
 import { PlansPanel } from 'src/features/components/PlansPanel/PlansPanel';
 

packages/manager/src/features/Domains/CloneDomainDrawer.tsx

@@ -1,12 +1,11 @@
-import { Notice, Radio, RadioGroup } from '@linode/ui';
+import { Notice, Radio, RadioGroup, TextField } from '@linode/ui';
 import { useFormik } from 'formik';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Drawer } from 'src/components/Drawer';
 import { FormControlLabel } from 'src/components/FormControlLabel';
-import { TextField } from 'src/components/TextField';
 import { useCloneDomainMutation } from 'src/queries/domains';
 import { useGrants, useProfile } from 'src/queries/profile/profile';