fix: [M3-10435] - ImageSelect, UserData Bug Fixes (#12638)

* fix: [M3-10435] - ImageSelect, UserData Bug Fixes

* Added changeset: Fix ImageSelect onChange rendering bug as well as other console errors

* Update packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.tsx

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

---------

Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>
Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

Author: 3 people

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))

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 }) => ({

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 (
     <Box sx={{ width: '100%' }}>

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',

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();

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 (
     <Accordion heading={<UserDataHeading />} sx={{ m: '0 !important', p: 1 }}>
-      <Typography>
-        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.{' '}
-        <Link to="https://techdocs.akamai.com/cloud-computing/docs/overview-of-the-metadata-service">
-          Learn more
-        </Link>
-        .
-      </Typography>
       {formatWarning && (
         <Notice spacingBottom={16} spacingTop={16} variant="warning">
           The user data may be formatted incorrectly.

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 (
     <Stack spacing={1}>
-      <Stack direction="row" spacing={1}>
+      <Stack direction="column" spacing={1}>
         <Typography variant="h2">Add User Data</Typography>
-        <TooltipIcon
-          status="info"
-          sxTooltipIcon={{ p: 0 }}
-          text={
-            <>
-              User data allows you to provide additional custom data to
-              cloud-init to further configure your system.{' '}
-              <Link to="https://techdocs.akamai.com/cloud-computing/docs/overview-of-the-metadata-service">
-                Learn more
-              </Link>
-              .
-            </>
-          }
-        />
+        <Typography>
+          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.{' '}
+          <Link to="https://techdocs.akamai.com/cloud-computing/docs/overview-of-the-metadata-service">
+            Learn more
+          </Link>
+          .
+        </Typography>
       </Stack>
       {warningMessage && (
         <Notice spacingBottom={0} spacingTop={0} variant="warning">