change: [M3-8377, M3-8579] - Move Region section above Images in Lino…

…de Create and update default OS to Ubuntu 24.04 LTS (#10858) ## Description 📝 1. Move Region section above the Images section in the Linode Create flows. This change has been approved by UX/Marketing/Docs 2. Set Default OS to Ubuntu 24.04 LTS No changes have been made in the Backups/Clone tab since they don't have an Images section ## How to test 🧪 ### Verification steps (How to verify changes) - Click through the Linode Create flow tabs and ensure that the Region section is above the Images section and that the default OS is Ubuntu 24.04 LTS - There should be no regressions in creating a Linode
linode · Sep 20, 2024 · 64aec6e · 64aec6e
1 parent f90ac7f
commit 64aec6e
Show file tree

Hide file tree

Showing 22 changed files with 82 additions and 62 deletions.
diff --git a/packages/manager/.changeset/pr-10858-changed-1725914163062.md b/packages/manager/.changeset/pr-10858-changed-1725914163062.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Move Region section above Images in Linode Create and update default OS to Ubuntu 24.04 LTS ([#10858](https://github.com/linode/manager/pull/10858))
diff --git a/packages/manager/cypress/e2e/core/linodes/create-linode-mobile.spec.ts b/packages/manager/cypress/e2e/core/linodes/create-linode-mobile.spec.ts
@@ -29,7 +29,7 @@ describe('Linode create mobile smoke', () => {
       cy.viewport(viewport.width, viewport.height);
       cy.visitWithLogin('/linodes/create');
 
-      linodeCreatePage.selectImage('Debian 11');
+      linodeCreatePage.selectImage('Ubuntu 24.04 LTS');
       linodeCreatePage.selectRegionById(mockLinodeRegion.id);
       linodeCreatePage.selectPlanCard('Shared CPU', 'Nanode 1 GB');
       linodeCreatePage.setLabel(mockLinode.label);
@@ -39,7 +39,7 @@ describe('Linode create mobile smoke', () => {
         .scrollIntoView()
         .within(() => {
           cy.findByText('Nanode 1 GB').should('be.visible');
-          cy.findByText('Debian 11').should('be.visible');
+          cy.findByText('Ubuntu 24.04 LTS').should('be.visible');
           cy.findByText(mockLinodeRegion.label).should('be.visible');
         });
 
@@ -52,7 +52,7 @@ describe('Linode create mobile smoke', () => {
       cy.wait('@createLinode').then((xhr) => {
         const requestBody = xhr.request.body;
 
-        expect(requestBody['image']).to.equal('linode/debian11');
+        expect(requestBody['image']).to.equal('linode/ubuntu24.04');
         expect(requestBody['label']).to.equal(mockLinode.label);
         expect(requestBody['region']).to.equal(mockLinodeRegion.id);
         expect(requestBody['type']).to.equal('g6-nanode-1');

diff --git a/packages/manager/cypress/e2e/core/linodes/create-linode-view-code-snippet.spec.ts b/packages/manager/cypress/e2e/core/linodes/create-linode-view-code-snippet.spec.ts
@@ -214,7 +214,7 @@ describe('Create Linode', () => {
 
       cy.findByLabelText('Linode Label').should(
         'have.value',
-        `debian-${linodeRegion.id}`
+        `ubuntu-${linodeRegion.id}`
       );
 
       cy.findByLabelText('Linode Label')

diff --git a/packages/manager/cypress/e2e/core/linodes/linode-storage.spec.ts b/packages/manager/cypress/e2e/core/linodes/linode-storage.spec.ts
@@ -110,7 +110,7 @@ describe('linode storage tab', () => {
   });
 
   it('try to delete in use disk', () => {
-    const diskName = 'Debian 11 Disk';
+    const diskName = 'Ubuntu 24.04 LTS Disk';
     cy.defer(() => createTestLinode({ booted: true })).then((linode) => {
       interceptDeleteDisks(linode.id).as('deleteDisk');
       cy.visitWithLogin(`linodes/${linode.id}/storage`);

diff --git a/packages/manager/cypress/e2e/core/linodes/resize-linode.spec.ts b/packages/manager/cypress/e2e/core/linodes/resize-linode.spec.ts
@@ -122,7 +122,7 @@ describe('resize linode', () => {
         { securityMethod: 'vlan_no_internet' }
       )
     ).then((linode) => {
-      const diskName = 'Debian 11 Disk';
+      const diskName = 'Ubuntu 24.04 LTS Disk';
       const size = '50000'; // 50 GB
 
       // Error flow when attempting to resize a linode to a smaller size without

diff --git a/packages/manager/cypress/e2e/core/oneClickApps/one-click-apps.spec.ts b/packages/manager/cypress/e2e/core/oneClickApps/one-click-apps.spec.ts
@@ -133,7 +133,7 @@ describe('OneClick Apps (OCA)', () => {
       description: 'Minecraft OCA',
       ordinal: 10,
       logo_url: 'assets/Minecraft.svg',
-      images: ['linode/debian11', 'linode/ubuntu22.04'],
+      images: ['linode/debian11', 'linode/ubuntu24.04'],
       deployments_total: 18854,
       deployments_active: 412,
       is_public: true,

diff --git a/packages/manager/cypress/e2e/core/stackscripts/smoke-community-stackscripts.spec.ts b/packages/manager/cypress/e2e/core/stackscripts/smoke-community-stackscripts.spec.ts
@@ -43,7 +43,7 @@ const mockStackScripts: StackScript[] = [
       'linode/rocky8',
       'linode/debian11',
       'linode/centos-stream9',
-      'linode/ubuntu22.04',
+      'linode/ubuntu24.04',
       'linode/almalinux9',
       'linode/rocky9',
     ],

diff --git a/packages/manager/cypress/support/util/linodes.ts b/packages/manager/cypress/support/util/linodes.ts
@@ -108,7 +108,7 @@ export const createTestLinode = async (
   const resolvedCreatePayload = {
     ...createLinodeRequestFactory.build({
       booted: false,
-      image: 'linode/debian11',
+      image: 'linode/ubuntu24.04',
       label: randomLabel(),
       region: chooseRegion().id,
     }),

diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Region.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Region.tsx
@@ -41,7 +41,7 @@ import {
 import type { LinodeCreateFormValues } from './utilities';
 import type { Region as RegionType } from '@linode/api-v4';
 
-export const Region = () => {
+export const Region = React.memo(() => {
   const {
     isDiskEncryptionFeatureEnabled,
   } = useIsDiskEncryptionFeatureEnabled();
@@ -267,4 +267,4 @@ export const Region = () => {
       )}
     </Paper>
   );
-};
+});
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Clone/Clone.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Clone/Clone.tsx
@@ -3,18 +3,22 @@ import React from 'react';
 import { Paper } from 'src/components/Paper';
 import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
+import { Region } from 'src/features/Linodes/LinodeCreatev2/Region';
 
 import { LinodeSelectTable } from '../../shared/LinodeSelectTable';
 import { CloneWarning } from './CloneWarning';
 
 export const Clone = () => {
   return (
-    <Paper>
-      <Stack spacing={1}>
-        <Typography variant="h2">Select Linode to Clone From</Typography>
-        <CloneWarning />
-        <LinodeSelectTable enablePowerOff />
-      </Stack>
-    </Paper>
+    <Stack spacing={3}>
+      <Paper>
+        <Stack spacing={1}>
+          <Typography variant="h2">Select Linode to Clone From</Typography>
+          <CloneWarning />
+          <LinodeSelectTable enablePowerOff />
+        </Stack>
+      </Paper>
+      <Region />
+    </Stack>
   );
 };
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Images.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Images.tsx
@@ -12,6 +12,7 @@ import { Paper } from 'src/components/Paper';
 import { Placeholder } from 'src/components/Placeholder/Placeholder';
 import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
+import { Region } from 'src/features/Linodes/LinodeCreatev2/Region';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { useAllImagesQuery } from 'src/queries/images';
 import { useRegionsQuery } from 'src/queries/regions/regions';
@@ -95,27 +96,30 @@ export const Images = () => {
   }
 
   return (
-    <Paper>
-      <Typography variant="h2">Choose an Image</Typography>
-      <Box alignItems="flex-end" display="flex" flexWrap="wrap" gap={2}>
-        <ImageSelectv2
-          disabled={isCreateLinodeRestricted}
-          errorText={fieldState.error?.message}
-          onBlur={field.onBlur}
-          onChange={onChange}
-          sx={{ width: '416px' }}
-          value={field.value}
-          variant="private"
-        />
-        {showDistributedCapabilityNotice && (
-          <Stack alignItems="center" direction="row" pb={0.8} spacing={1}>
-            <DistributedRegionIcon height="21px" width="24px" />
-            <Typography>
-              Indicates compatibility with distributed compute regions.
-            </Typography>
-          </Stack>
-        )}
-      </Box>
-    </Paper>
+    <Stack spacing={3}>
+      <Region />
+      <Paper>
+        <Typography variant="h2">Choose an Image</Typography>
+        <Box alignItems="flex-end" display="flex" flexWrap="wrap" gap={2}>
+          <ImageSelectv2
+            disabled={isCreateLinodeRestricted}
+            errorText={fieldState.error?.message}
+            onBlur={field.onBlur}
+            onChange={onChange}
+            sx={{ width: '416px' }}
+            value={field.value}
+            variant="private"
+          />
+          {showDistributedCapabilityNotice && (
+            <Stack alignItems="center" direction="row" pb={0.8} spacing={1}>
+              <DistributedRegionIcon height="21px" width="24px" />
+              <Typography>
+                Indicates compatibility with distributed compute regions.
+              </Typography>
+            </Stack>
+          )}
+        </Box>
+      </Paper>
+    </Stack>
   );
 };
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/Marketplace.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/Marketplace.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 
 import { Stack } from 'src/components/Stack';
+import { Region } from 'src/features/Linodes/LinodeCreatev2/Region';
 
 import { StackScriptImages } from '../StackScripts/StackScriptImages';
 import { UserDefinedFields } from '../StackScripts/UserDefinedFields/UserDefinedFields';
@@ -18,6 +19,7 @@ export const Marketplace = () => {
     <Stack data-testid="one-click-apps-container" spacing={2}>
       <AppSelect onOpenDetailsDrawer={onOpenDetailsDrawer} />
       <UserDefinedFields onOpenDetailsDrawer={onOpenDetailsDrawer} />
+      <Region />
       <StackScriptImages />
       <AppDetailDrawerv2
         onClose={() => setDrawerStackScriptId(undefined)}

diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/OperatingSystems.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/OperatingSystems.tsx
@@ -4,7 +4,9 @@ import { useController, useFormContext } from 'react-hook-form';
 
 import { ImageSelectv2 } from 'src/components/ImageSelectv2/ImageSelectv2';
 import { Paper } from 'src/components/Paper';
+import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
+import { Region } from 'src/features/Linodes/LinodeCreatev2/Region';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 
 import { getGeneratedLinodeLabel } from '../utilities';
@@ -45,18 +47,21 @@ export const OperatingSystems = () => {
   };
 
   return (
-    <Paper>
-      <Typography variant="h2">Choose an OS</Typography>
-      <ImageSelectv2
-        disabled={isCreateLinodeRestricted}
-        errorText={fieldState.error?.message}
-        label="Linux Distribution"
-        onBlur={field.onBlur}
-        onChange={onChange}
-        placeholder="Choose a Linux distribution"
-        value={field.value}
-        variant="public"
-      />
-    </Paper>
+    <Stack spacing={3}>
+      <Region />
+      <Paper>
+        <Typography variant="h2">Choose an OS</Typography>
+        <ImageSelectv2
+          disabled={isCreateLinodeRestricted}
+          errorText={fieldState.error?.message}
+          label="Linux Distribution"
+          onBlur={field.onBlur}
+          onChange={onChange}
+          placeholder="Choose a Linux distribution"
+          value={field.value}
+          variant="public"
+        />
+      </Paper>
+    </Stack>
   );
 };
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/StackScripts.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/StackScripts.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Stack } from 'src/components/Stack';
+import { Region } from 'src/features/Linodes/LinodeCreatev2/Region';
 
 import { StackScriptImages } from './StackScriptImages';
 import { StackScriptSelection } from './StackScriptSelection';
@@ -11,6 +12,7 @@ export const StackScripts = () => {
     <Stack spacing={3}>
       <StackScriptSelection />
       <UserDefinedFields />
+      <Region />
       <StackScriptImages />
     </Stack>
   );

diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/index.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/index.tsx
@@ -35,7 +35,6 @@ import { EUAgreement } from './EUAgreement';
 import { Firewall } from './Firewall';
 import { FirewallAuthorization } from './FirewallAuthorization';
 import { Plan } from './Plan';
-import { Region } from './Region';
 import { getLinodeCreateResolver } from './resolvers';
 import { Security } from './Security';
 import { SMTP } from './SMTP';
@@ -225,7 +224,6 @@ export const LinodeCreatev2 = () => {
               </SafeTabPanel>
             </TabPanels>
           </Tabs>
-          {params.type !== 'Backups' && <Region />}
           <Plan />
           <Details />
           {params.type !== 'Clone Linode' && <Security />}

diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/utilities.ts b/packages/manager/src/features/Linodes/LinodeCreatev2/utilities.ts
@@ -28,7 +28,7 @@ import type { FieldErrors } from 'react-hook-form';
 /**
  * This is the ID of the Image of the default OS.
  */
-const DEFAULT_OS = 'linode/debian11';
+const DEFAULT_OS = 'linode/ubuntu24.04';
 
 /**
  * This interface is used to type the query params on the Linode Create flow.

diff --git a/packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.test.tsx b/packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.test.tsx
@@ -107,7 +107,7 @@ const props: AddonsPanelProps = {
       group: '',
       hypervisor: 'kvm',
       id: 45329311,
-      image: 'linode/debian11',
+      image: 'linode/ubuntu24.04',
       ipv4: ['192.168.139.183', '139.144.17.202'],
       ipv6: '2600:3c04::f03c:93ff:fe75:0612/128',
       label: 'debian-ca-central',

diff --git a/...anager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/IntegrationsTabPanel.test.tsx b/...anager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/IntegrationsTabPanel.test.tsx
@@ -11,7 +11,7 @@ import type { IntegrationsTabPanelProps } from './IntegrationsTabPanel';
 
 const defaultProps: IntegrationsTabPanelProps = {
   payLoad: {
-    image: 'linode/debian11',
+    image: 'linode/ubuntu24.04',
     label: 'debian-us-ord-001',
     region: 'us-ord',
     root_pass: 'testpassword',

diff --git a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/SDKTabPanel.test.tsx b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/SDKTabPanel.test.tsx
@@ -11,7 +11,7 @@ import type { SDKTabPanelProps } from './SDKTabPanel';
 
 const defaultProps: SDKTabPanelProps = {
   payLoad: {
-    image: 'linode/debian11',
+    image: 'linode/ubuntu24.04',
     label: 'debian-us-ord-001',
     region: 'us-ord',
     root_pass: 'testpassword',

diff --git a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx
@@ -91,7 +91,7 @@ import type { MapState } from 'src/store/types';
 import type { ExtendedType } from 'src/utilities/extendType';
 import type { ExtendedIP } from 'src/utilities/ipUtils';
 
-const DEFAULT_IMAGE = 'linode/debian11';
+const DEFAULT_IMAGE = 'linode/ubuntu24.04';
 
 interface State {
   additionalIPv4RangesForVPC: ExtendedIP[];

diff --git a/packages/manager/src/store/image/image.helpers.test.ts b/packages/manager/src/store/image/image.helpers.test.ts
@@ -8,6 +8,6 @@ describe('isLinodeKubeImageId', () => {
     expect(isLinodeKubeImageId('linode/alpine3.15')).toBe(false);
   });
   it('should be true if the image is a linode kube image', () => {
-    expect(isLinodeKubeImageId('linode/debian11-kube-v1.23.4')).toBe(true);
+    expect(isLinodeKubeImageId('linode/ubuntu24.04-kube-v1.23.4')).toBe(true);
   });
 });
diff --git a/packages/manager/src/store/image/image.helpers.ts b/packages/manager/src/store/image/image.helpers.ts
@@ -24,7 +24,7 @@ export const filterImagesByType = (
  * LKE (Linode Kubernetes Engine) image. In Cloud Manager, we hide
  * these images from the user.
  *
- * Image IDs are in the form linode/debian11 or private/15943292
+ * Image IDs are in the form linode/ubuntu24.04 or private/15943292
  *
  * @param {string | null} id the image's id (unlike most entities, image ids are string)
  * @returns {boolean} true if the image is an LKE image