From 8b09cca284b284a2b199128886d362b99636fc07 Mon Sep 17 00:00:00 2001 From: Jaalah Ramos Date: Tue, 5 Aug 2025 10:52:31 -0400 Subject: [PATCH 1/3] fix: [M3-10435] - ImageSelect, UserData Bug Fixes --- packages/manager/src/components/Flag.tsx | 7 +++-- .../components/ImageSelect/ImageSelect.tsx | 13 ++++++-- .../LinodeCreate/UserData/UserData.tsx | 14 +-------- .../LinodeCreate/UserData/UserDataHeading.tsx | 31 +++++++++---------- 4 files changed, 30 insertions(+), 35 deletions(-) diff --git a/packages/manager/src/components/Flag.tsx b/packages/manager/src/components/Flag.tsx index 2cbf7b8a23c..62217818a30 100644 --- a/packages/manager/src/components/Flag.tsx +++ b/packages/manager/src/components/Flag.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, omittedProps } from '@linode/ui'; import 'flag-icons/css/flag-icons.min.css'; import { styled } from '@mui/material/styles'; import React from 'react'; @@ -45,7 +45,10 @@ const getFlagClass = (country: Country | string) => { return country; }; -const StyledFlag = styled(Box, { label: 'StyledFlag' })<{ +const StyledFlag = styled(Box, { + label: 'StyledFlag', + shouldForwardProp: omittedProps(['hasBorder']), +})<{ hasBorder: boolean; }>(({ theme, hasBorder }) => ({ boxShadow: 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/features/Linodes/LinodeCreate/UserData/UserData.tsx b/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserData.tsx index 7dad7bb6af1..5b16e0f91b8 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..486015e4746 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,26 +25,23 @@ 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 && ( - {warningMessage} + {warningMessage} kek )} From b6a052f5fd950cdca70172aeb45987cb5dd8df79 Mon Sep 17 00:00:00 2001 From: Jaalah Ramos Date: Tue, 5 Aug 2025 11:02:56 -0400 Subject: [PATCH 2/3] Added changeset: Fix ImageSelect onChange rendering bug as well as other console errors --- packages/manager/.changeset/pr-12638-fixed-1754406176201.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-12638-fixed-1754406176201.md 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)) From a6413ea41dc32fb2af831010ee298c72f16ddd40 Mon Sep 17 00:00:00 2001 From: Jaalah Ramos <125309814+jaalah-akamai@users.noreply.github.com> Date: Tue, 19 Aug 2025 15:00:51 -0400 Subject: [PATCH 3/3] Update packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> --- .../features/Linodes/LinodeCreate/UserData/UserDataHeading.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.tsx b/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.tsx index 486015e4746..2e671c73955 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.tsx @@ -41,7 +41,7 @@ export const UserDataHeading = () => { {warningMessage && ( - {warningMessage} kek + {warningMessage} )}