diff --git a/packages/manager/.changeset/pr-12638-fixed-1754406176201.md b/packages/manager/.changeset/pr-12638-fixed-1754406176201.md new file mode 100644 index 00000000000..8cd1d6cb14c --- /dev/null +++ b/packages/manager/.changeset/pr-12638-fixed-1754406176201.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Fixed +--- + +Fix ImageSelect onChange rendering bug as well as other console errors ([#12638](https://github.com/linode/manager/pull/12638)) diff --git a/packages/manager/src/components/Flag.tsx b/packages/manager/src/components/Flag.tsx index 868fe75a4c0..62217818a30 100644 --- a/packages/manager/src/components/Flag.tsx +++ b/packages/manager/src/components/Flag.tsx @@ -46,8 +46,8 @@ const getFlagClass = (country: Country | string) => { }; const StyledFlag = styled(Box, { - shouldForwardProp: omittedProps(['hasBorder']), label: 'StyledFlag', + shouldForwardProp: omittedProps(['hasBorder']), })<{ hasBorder: boolean; }>(({ theme, hasBorder }) => ({ diff --git a/packages/manager/src/components/ImageSelect/ImageSelect.tsx b/packages/manager/src/components/ImageSelect/ImageSelect.tsx index 9229a075e08..f65b6ecf5d3 100644 --- a/packages/manager/src/components/ImageSelect/ImageSelect.tsx +++ b/packages/manager/src/components/ImageSelect/ImageSelect.tsx @@ -152,9 +152,16 @@ export const ImageSelect = (props: Props) => { return isImageDeprecated(value) && [value]; }, [value]); - if (options.length === 1 && onChange && selectIfOnlyOneOption && !multiple) { - onChange(options[0]); - } + React.useEffect(() => { + if ( + options.length === 1 && + onChange && + selectIfOnlyOneOption && + !multiple + ) { + onChange(options[0]); + } + }, [options.length, onChange, selectIfOnlyOneOption, multiple, options]); return ( diff --git a/packages/manager/src/factories/cloudpulse/services.ts b/packages/manager/src/factories/cloudpulse/services.ts index 85708cb02a6..6e9c00f9eda 100644 --- a/packages/manager/src/factories/cloudpulse/services.ts +++ b/packages/manager/src/factories/cloudpulse/services.ts @@ -1,11 +1,7 @@ import { type Service } from '@linode/api-v4'; import { Factory } from '@linode/utilities'; -import type { - CloudPulseServiceType, - - ServiceAlert, -} from '@linode/api-v4'; +import type { CloudPulseServiceType, ServiceAlert } from '@linode/api-v4'; const serviceTypes: CloudPulseServiceType[] = [ 'linode', diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx index 5382d81e960..8ecfd01764a 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx @@ -26,7 +26,9 @@ import UpgradeKubernetesVersionBanner from './UpgradeKubernetesVersionBanner'; export const KubernetesClusterDetail = () => { const { data: account } = useAccount(); - const { clusterId: id } = useParams({ from: '/kubernetes/clusters/$clusterId' }); + const { clusterId: id } = useParams({ + from: '/kubernetes/clusters/$clusterId', + }); const location = useLocation(); const { showAPL } = useAPLAvailability(); const { isUsingBetaEndpoint } = useKubernetesBetaEndpoint(); diff --git a/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserData.tsx b/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserData.tsx index 72432706a53..25bcee37c67 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserData.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserData.tsx @@ -1,9 +1,8 @@ import { useImageQuery, useRegionsQuery } from '@linode/queries'; -import { Accordion, Notice, TextField, Typography } from '@linode/ui'; +import { Accordion, Notice, TextField } from '@linode/ui'; import React, { useMemo } from 'react'; import { Controller, useFormContext, useWatch } from 'react-hook-form'; -import { Link } from 'src/components/Link'; import { usePermissions } from 'src/features/IAM/hooks/usePermissions'; import { UserDataHeading } from './UserDataHeading'; @@ -55,17 +54,6 @@ export const UserData = () => { return ( } sx={{ m: '0 !important', p: 1 }}> - - User data is a feature of the Metadata service that enables you to - perform system configuration tasks (such as adding users and installing - software) by providing custom instructions or scripts to cloud-init. Any - user data should be added at this step and cannot be modified after the - the Linode has been created.{' '} - - Learn more - - . - {formatWarning && ( The user data may be formatted incorrectly. diff --git a/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.tsx b/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.tsx index c902a8f54ac..2e671c73955 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.tsx @@ -1,4 +1,4 @@ -import { Notice, Stack, TooltipIcon, Typography } from '@linode/ui'; +import { Notice, Stack, Typography } from '@linode/ui'; import React from 'react'; import { Link } from 'src/components/Link'; @@ -25,22 +25,19 @@ export const UserDataHeading = () => { return ( - + Add User Data - - User data allows you to provide additional custom data to - cloud-init to further configure your system.{' '} - - Learn more - - . - - } - /> + + User data is a feature of the Metadata service that enables you to + perform system configuration tasks (such as adding users and + installing software) by providing custom instructions or scripts to + cloud-init. Any user data should be added at this step and cannot be + modified after the the Linode has been created.{' '} + + Learn more + + . + {warningMessage && (