refactor: [M3-8709] – Migrate Autocomplete (and List and `ListIte…

…m`) to `ui` package (#11314)

packages/manager/.changeset/pr-11314-removed-1732300595067.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Removed
+---
+
+`Autocomplete`, `List`, and `ListItem` components (migrated to `ui` package) ([#11314](https://github.com/linode/manager/pull/11314))

packages/manager/src/components/EmptyLandingPageResources/ResourcesLinks.tsx

@@ -1,8 +1,7 @@
+import { List, ListItem } from '@linode/ui';
 import * as React from 'react';
 
 import { Link } from 'src/components/Link';
-import { List } from 'src/components/List';
-import { ListItem } from 'src/components/ListItem';
 import { getLinkOnClick } from 'src/utilities/emptyStateLandingUtils';
 
 import type { ResourcesLinks } from './ResourcesLinksTypes';

packages/manager/src/components/IPSelect/IPSelect.tsx

@@ -1,6 +1,6 @@
+import { Autocomplete } from '@linode/ui';
 import * as React from 'react';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { useLinodeQuery } from 'src/queries/linodes/linodes';
 
 interface Option {

packages/manager/src/components/ImageSelect/ImageSelect.tsx

@@ -1,6 +1,6 @@
+import { Autocomplete } from '@linode/ui';
 import React, { useMemo } from 'react';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { imageFactory } from 'src/factories/images';
 import { useAllImagesQuery } from 'src/queries/images';
 
@@ -13,7 +13,7 @@ import {
 } from './utilities';
 
 import type { Image, RegionSite } from '@linode/api-v4';
-import type { EnhancedAutocompleteProps } from 'src/components/Autocomplete/Autocomplete';
+import type { EnhancedAutocompleteProps } from '@linode/ui';
 
 export type ImageSelectVariant = 'all' | 'private' | 'public';
 

packages/manager/src/components/ListItemOption.tsx

@@ -1,11 +1,8 @@
-import { Box, Tooltip } from '@linode/ui';
+import { Box, ListItem, SelectedIcon, Tooltip } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import { visuallyHidden } from '@mui/utils';
 import React from 'react';
 
-import { SelectedIcon } from 'src/components/Autocomplete/Autocomplete.styles';
-import { ListItem } from 'src/components/ListItem';
-
 import type { ListItemComponentsPropsOverrides } from '@mui/material/ListItem';
 
 export interface ListItemProps<T> {

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

@@ -1,6 +1,6 @@
+import { Autocomplete } from '@linode/ui';
 import * as React from 'react';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { PLACEMENT_GROUP_HAS_NO_CAPACITY } from 'src/features/PlacementGroups/constants';
 import { hasPlacementGroupReachedCapacity } from 'src/features/PlacementGroups/utils';
 import { useAllPlacementGroupsQuery } from 'src/queries/placementGroups';

packages/manager/src/components/RegionSelect/RegionMultiSelect.tsx

@@ -1,13 +1,11 @@
-import { Stack, Chip } from '@linode/ui';
+import { Autocomplete, Chip, Stack, StyledListItem } from '@linode/ui';
 import CloseIcon from '@mui/icons-material/Close';
 import React from 'react';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { Flag } from 'src/components/Flag';
 import { useAllAccountAvailabilitiesQuery } from 'src/queries/account/availability';
 import { getRegionCountryGroup } from 'src/utilities/formatRegion';
 
-import { StyledListItem } from '../Autocomplete/Autocomplete.styles';
 import { RegionOption } from './RegionOption';
 import { StyledAutocompleteContainer } from './RegionSelect.styles';
 import {

packages/manager/src/components/RegionSelect/RegionSelect.styles.ts

@@ -1,8 +1,6 @@
-import { Box, Chip } from '@linode/ui';
+import { Box, Chip, ListItem } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 
-import { ListItem } from 'src/components/ListItem';
-
 export const StyledAutocompleteContainer = styled(Box, {
   label: 'RegionSelect',
 })(({ theme }) => ({

packages/manager/src/components/RegionSelect/RegionSelect.tsx

@@ -1,7 +1,7 @@
 import { createFilterOptions } from '@mui/material/Autocomplete';
 import * as React from 'react';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
+import { Autocomplete } from '@linode/ui';
 import { Flag } from 'src/components/Flag';
 import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils';
 import { useAllAccountAvailabilitiesQuery } from 'src/queries/account/availability';

packages/manager/src/components/RegionSelect/RegionSelect.types.ts

@@ -4,8 +4,8 @@ import type {
   Region,
   RegionSite,
 } from '@linode/api-v4';
+import type { EnhancedAutocompleteProps } from '@linode/ui';
 import type React from 'react';
-import type { EnhancedAutocompleteProps } from 'src/components/Autocomplete/Autocomplete';
 import type { DisableItemOption } from 'src/components/ListItemOption';
 
 export type RegionFilterValue =

packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.style.ts

@@ -1,9 +1,6 @@
-import { Box, Typography, omittedProps } from '@linode/ui';
+import { Box, List, ListItem, Typography, omittedProps } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 
-import { List } from 'src/components/List';
-import { ListItem } from 'src/components/ListItem';
-
 import type { RemovableSelectionsListProps } from './RemovableSelectionsList';
 
 export const StyledNoAssignedLinodesBox = styled(Box, {

packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.tsx

@@ -1,4 +1,4 @@
-import { Box, Paper, Stack, Typography } from '@linode/ui';
+import { Autocomplete, Box, Paper, Stack, Typography } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
@@ -8,7 +8,6 @@ import { useSecureVMNoticesEnabled } from 'src/hooks/useSecureVMNoticesEnabled';
 import { useFirewallsQuery } from 'src/queries/firewalls';
 
 import { AkamaiBanner } from '../AkamaiBanner/AkamaiBanner';
-import { Autocomplete } from '../Autocomplete/Autocomplete';
 import { GenerateFirewallDialog } from '../GenerateFirewallDialog/GenerateFirewallDialog';
 import { LinkButton } from '../LinkButton';
 

packages/manager/src/components/TagCell/AddTag.tsx

@@ -1,11 +1,10 @@
+import { Autocomplete } from '@linode/ui';
 import { useQueryClient } from '@tanstack/react-query';
 import * as React from 'react';
 
 import { useProfile } from 'src/queries/profile/profile';
 import { updateTagsSuggestionsData, useAllTagsQuery } from 'src/queries/tags';
 
-import { Autocomplete } from '../Autocomplete/Autocomplete';
-
 interface AddTagProps {
   addTag: (tag: string) => Promise<void>;
   existingTags: string[];

packages/manager/src/components/TagsInput/TagsInput.tsx

@@ -1,15 +1,15 @@
-import { Chip } from '@linode/ui';
+import { Autocomplete, Chip } from '@linode/ui';
 import CloseIcon from '@mui/icons-material/Close';
-import { APIError } from '@linode/api-v4/lib/types';
 import { useQueryClient } from '@tanstack/react-query';
 import { concat } from 'ramda';
 import * as React from 'react';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { useProfile } from 'src/queries/profile/profile';
 import { updateTagsSuggestionsData, useAllTagsQuery } from 'src/queries/tags';
 import { getErrorMap } from 'src/utilities/errorUtils';
 
+import type { APIError } from '@linode/api-v4/lib/types';
+
 export interface Tag {
   label: string;
   value: string;

packages/manager/src/components/VLANSelect.tsx

@@ -1,10 +1,9 @@
+import { Autocomplete } from '@linode/ui';
 import React, { useEffect, useState } from 'react';
 
 import { useDebouncedValue } from 'src/hooks/useDebouncedValue';
 import { useVLANsInfiniteQuery } from 'src/queries/vlans';
 
-import { Autocomplete } from './Autocomplete/Autocomplete';
-
 import type { Filter } from '@linode/api-v4';
 import type { SxProps, Theme } from '@mui/material';
 

packages/manager/src/components/VPCSelect.tsx

@@ -1,11 +1,10 @@
+import { Autocomplete } from '@linode/ui';
 import React from 'react';
 
 import { useVPCsQuery } from 'src/queries/vpcs/vpcs';
 
-import { Autocomplete } from './Autocomplete/Autocomplete';
-
-import type { EnhancedAutocompleteProps } from './Autocomplete/Autocomplete';
 import type { Filter, VPC } from '@linode/api-v4';
+import type { EnhancedAutocompleteProps } from '@linode/ui';
 
 interface Props extends Partial<Omit<EnhancedAutocompleteProps<VPC>, 'value'>> {
   /**

packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.tsx

@@ -1,13 +1,12 @@
 import { getInvoiceItems } from '@linode/api-v4/lib/account';
-import { Typography } from '@linode/ui';
+import { Autocomplete, Typography } from '@linode/ui';
 import Paper from '@mui/material/Paper';
 import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 import { DateTime } from 'luxon';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { Currency } from 'src/components/Currency';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/GeneralInformation/AlertSeveritySelect.tsx

@@ -1,8 +1,7 @@
+import { Autocomplete } from '@linode/ui';
 import * as React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
-
 import { alertSeverityOptions } from '../../constants';
 
 import type { CreateAlertDefinitionForm } from '../types';

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/GeneralInformation/EngineOption.tsx

@@ -1,8 +1,7 @@
+import { Autocomplete } from '@linode/ui';
 import * as React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
-
 import { engineTypeOptions } from '../../constants';
 
 import type { CreateAlertDefinitionForm } from '../types';

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/GeneralInformation/ResourceMultiSelect.tsx

@@ -1,7 +1,7 @@
+import { Autocomplete } from '@linode/ui';
 import * as React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { useResourcesQuery } from 'src/queries/cloudpulse/resources';
 
 import type { Item } from '../../constants';

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/GeneralInformation/ServiceTypeSelect.tsx

@@ -1,7 +1,7 @@
+import { Autocomplete } from '@linode/ui';
 import * as React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { useCloudPulseServiceTypes } from 'src/queries/cloudpulse/services';
 
 import type { Item } from '../../constants';

packages/manager/src/features/CloudPulse/Widget/components/CloudPulseAggregateFunction.tsx

@@ -1,7 +1,6 @@
+import { Autocomplete } from '@linode/ui';
 import React from 'react';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
-
 import { CloudPulseTooltip } from '../../shared/CloudPulseTooltip';
 import { getAutocompleteWidgetStyles } from '../../Utils/CloudPulseWidgetUtils';
 import { convertStringToCamelCasesWithSpaces } from '../../Utils/utils';

packages/manager/src/features/CloudPulse/Widget/components/CloudPulseIntervalSelect.tsx

@@ -1,7 +1,6 @@
+import { Autocomplete } from '@linode/ui';
 import React from 'react';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
-
 import { CloudPulseTooltip } from '../../shared/CloudPulseTooltip';
 import { getAutocompleteWidgetStyles } from '../../Utils/CloudPulseWidgetUtils';
 

packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx

@@ -1,6 +1,6 @@
+import { Autocomplete } from '@linode/ui';
 import React from 'react';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { useGetCustomFiltersQuery } from 'src/queries/cloudpulse/customfilters';
 
 import {

packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.tsx

@@ -1,7 +1,6 @@
-import { Box, Typography } from '@linode/ui';
+import { Autocomplete, Box, Typography } from '@linode/ui';
 import React from 'react';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { useCloudPulseDashboardsQuery } from 'src/queries/cloudpulse/dashboards';
 import { useCloudPulseServiceTypes } from 'src/queries/cloudpulse/services';
 

packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx

@@ -1,11 +1,7 @@
+import { Autocomplete, SelectedIcon, StyledListItem } from '@linode/ui';
 import { Box } from '@mui/material';
 import React from 'react';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
-import {
-  SelectedIcon,
-  StyledListItem,
-} from 'src/components/Autocomplete/Autocomplete.styles';
 import { useFlags } from 'src/hooks/useFlags';
 import { useResourcesQuery } from 'src/queries/cloudpulse/resources';
 import { themes } from 'src/utilities/theme';

packages/manager/src/features/CloudPulse/shared/CloudPulseTimeRangeSelect.tsx

@@ -1,7 +1,6 @@
+import { Autocomplete } from '@linode/ui';
 import * as React from 'react';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
-
 import type { FilterValue, TimeDuration } from '@linode/api-v4';
 import type {
   BaseSelectProps,

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

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

packages/manager/src/features/Databases/DatabaseCreate/DatabaseEngineSelect.tsx

@@ -1,8 +1,7 @@
-import { Box } from '@linode/ui';
+import { Autocomplete, Box } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import React from 'react';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { getEngineOptions } from 'src/features/Databases/DatabaseCreate/utilities';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 

packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx

@@ -1,4 +1,12 @@
-import { Box, Button, Divider, Notice, Paper, Typography } from '@linode/ui';
+import {
+  Autocomplete,
+  Box,
+  Button,
+  Divider,
+  Notice,
+  Paper,
+  Typography,
+} from '@linode/ui';
 import {
   FormControl,
   FormControlLabel,
@@ -12,7 +20,6 @@ import { DateTime } from 'luxon';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import {
   StyledDateCalendar,
   StyledTypography,

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsUpgradeVersionDialog.tsx

@@ -4,7 +4,7 @@ import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
+import { Autocomplete } from '@linode/ui';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import {
   DATABASE_ENGINE_MAP,

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx

@@ -1,5 +1,6 @@
 import { Typography } from '@linode/ui';
 import {
+  Autocomplete,
   Button,
   FormControl,
   Notice,
@@ -14,7 +15,6 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { makeStyles } from 'tss-react/mui';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { useDatabaseMutation } from 'src/queries/databases/databases';
 

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

@@ -1,4 +1,5 @@
 import {
+  Autocomplete,
   FormHelperText,
   Notice,
   Paper,
@@ -16,7 +17,6 @@ import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { LandingHeader } from 'src/components/LandingHeader';

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

@@ -2,7 +2,7 @@ import {
   createDomainRecord,
   updateDomainRecord,
 } from '@linode/api-v4/lib/domains';
-import { Notice, TextField } from '@linode/ui';
+import { Autocomplete, Notice, TextField } from '@linode/ui';
 import produce from 'immer';
 import {
   cond,
@@ -17,7 +17,6 @@ import {
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { Drawer } from 'src/components/Drawer';
 import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';