feat: [M3-8017] - Support Linodes in Distributed Compute Regions on Image Create

packages/manager/.changeset/pr-10544-added-1717530161965.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Informational notice about capturing an image from a Linode in a distributed compute region ([#10544](https://github.com/linode/manager/pull/10544))

packages/manager/src/features/Images/ImagesCreate/CreateImageTab.test.tsx

@@ -0,0 +1,173 @@
+import { userEvent } from '@testing-library/user-event';
+import React from 'react';
+
+import {
+  imageFactory,
+  linodeDiskFactory,
+  linodeFactory,
+  regionFactory,
+} from 'src/factories';
+import { makeResourcePage } from 'src/mocks/serverHandlers';
+import { HttpResponse, http, server } from 'src/mocks/testServer';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { CreateImageTab } from './CreateImageTab';
+
+describe('CreateImageTab', () => {
+  it('should render fields, titles, and buttons in their default state', () => {
+    const { getByLabelText, getByText } = renderWithTheme(<CreateImageTab />);
+
+    expect(getByText('Select Linode & Disk')).toBeVisible();
+
+    expect(getByLabelText('Linode')).toBeVisible();
+
+    const diskSelect = getByLabelText('Disk');
+
+    expect(diskSelect).toBeVisible();
+    expect(diskSelect).toBeDisabled();
+
+    expect(getByText('Select a Linode to see available disks')).toBeVisible();
+
+    expect(getByText('Image Details')).toBeVisible();
+
+    expect(getByLabelText('Label')).toBeVisible();
+    expect(getByLabelText('Add Tags')).toBeVisible();
+    expect(getByLabelText('Description')).toBeVisible();
+
+    const submitButton = getByText('Create Image').closest('button');
+
+    expect(submitButton).toBeVisible();
+    expect(submitButton).toBeEnabled();
+  });
+
+  it('should render client side validation errors', async () => {
+    const { getByText } = renderWithTheme(<CreateImageTab />);
+
+    const submitButton = getByText('Create Image').closest('button');
+
+    await userEvent.click(submitButton!);
+
+    expect(getByText('Disk is required.')).toBeVisible();
+  });
+
+  it('should allow the user to select a disk and submit the form', async () => {
+    const linode = linodeFactory.build();
+    const disk = linodeDiskFactory.build();
+    const image = imageFactory.build();
+
+    server.use(
+      http.get('*/v4/linode/instances', () => {
+        return HttpResponse.json(makeResourcePage([linode]));
+      }),
+      http.get('*/v4/linode/instances/:id/disks', () => {
+        return HttpResponse.json(makeResourcePage([disk]));
+      }),
+      http.post('*/v4/images', () => {
+        return HttpResponse.json(image);
+      })
+    );
+
+    const {
+      findByText,
+      getByLabelText,
+      getByText,
+      queryByText,
+    } = renderWithTheme(<CreateImageTab />);
+
+    const linodeSelect = getByLabelText('Linode');
+
+    await userEvent.click(linodeSelect);
+
+    const linodeOption = await findByText(linode.label);
+
+    await userEvent.click(linodeOption);
+
+    const diskSelect = getByLabelText('Disk');
+
+    // Once a Linode is selected, the Disk select should become enabled
+    expect(diskSelect).toBeEnabled();
+    expect(queryByText('Select a Linode to see available disks')).toBeNull();
+
+    await userEvent.click(diskSelect);
+
+    const diskOption = await findByText(disk.label);
+
+    await userEvent.click(diskOption);
+
+    const submitButton = getByText('Create Image').closest('button');
+
+    await userEvent.click(submitButton!);
+
+    // Verify success toast shows
+    await findByText('Image scheduled for creation.');
+  });
+
+  it('should render a notice if the user selects a Linode in a distributed compute region', async () => {
+    const region = regionFactory.build({ site_type: 'distributed' });
+    const linode = linodeFactory.build({ region: region.id });
+
+    server.use(
+      http.get('*/v4/linode/instances', () => {
+        return HttpResponse.json(makeResourcePage([linode]));
+      }),
+      http.get('*/v4/linode/instances/:id', () => {
+        return HttpResponse.json(linode);
+      }),
+      http.get('*/v4/regions', () => {
+        return HttpResponse.json(makeResourcePage([region]));
+      })
+    );
+
+    const { findByText, getByLabelText } = renderWithTheme(<CreateImageTab />);
+
+    const linodeSelect = getByLabelText('Linode');
+
+    await userEvent.click(linodeSelect);
+
+    const linodeOption = await findByText(linode.label);
+
+    await userEvent.click(linodeOption);
+
+    // Verify distributed compute region notice renders
+    await findByText(
+      'This Linode is in a distributed compute region. Images captured from this Linode will be stored in the closest core site.'
+    );
+
+    // Verify helper text renders
+    await findByText(
+      `Image will be stored in the closest core site to (${linode.region})`
+    );
+  });
+
+  it('should render an encryption notice if disk encryption is enabled and the Linode is not in a distributed compute region', async () => {
+    const region = regionFactory.build({ site_type: 'core' });
+    const linode = linodeFactory.build({ region: region.id });
+
+    server.use(
+      http.get('*/v4/linode/instances', () => {
+        return HttpResponse.json(makeResourcePage([linode]));
+      }),
+      http.get('*/v4/linode/instances/:id', () => {
+        return HttpResponse.json(linode);
+      }),
+      http.get('*/v4/regions', () => {
+        return HttpResponse.json(makeResourcePage([region]));
+      })
+    );
+
+    const { findByText, getByLabelText } = renderWithTheme(<CreateImageTab />, {
+      flags: { linodeDiskEncryption: true },
+    });
+
+    const linodeSelect = getByLabelText('Linode');
+
+    await userEvent.click(linodeSelect);
+
+    const linodeOption = await findByText(linode.label);
+
+    await userEvent.click(linodeOption);
+
+    // Verify encryption notice renders
+    await findByText('Virtual Machine Images are not encrypted.');
+  });
+});

packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx

@@ -101,23 +101,44 @@ export const CreateImageTab = () => {
 
   const isRawDisk = selectedDisk?.filesystem === 'raw';
 
-  /*
-    We only want to display the notice about disk encryption if:
-    1. the Disk Encryption feature is enabled
-    2. the selected linode is not in an Edge region
-  */
   const { data: regionsData } = useRegionsQuery();
 
   const { data: linode } = useLinodeQuery(
     selectedLinodeId ?? -1,
-    Boolean(selectedLinodeId) && isDiskEncryptionFeatureEnabled
+    selectedLinodeId !== null
   );
 
   const linodeIsInDistributedRegion = getIsDistributedRegion(
     regionsData ?? [],
     linode?.region ?? ''
   );
 
+  /*
+    We only want to display the notice about disk encryption if:
+    1. the Disk Encryption feature is enabled
+    2. a linode is selected
+    2. the selected linode is not in an Edge region
+  */
+  const showDiskEncryptionWarning =
+    isDiskEncryptionFeatureEnabled &&
+    selectedLinodeId !== null &&
+    !linodeIsInDistributedRegion;
+
+  const linodeSelectHelperText = [
+    {
+      show: linodeIsInDistributedRegion,
+      text: `Image will be stored in the closest core site to (${linode?.region})`,
+    },
+    {
+      show: grants?.linode.some((grant) => grant.permissions === 'read_only'),
+      text:
+        'You can only create Images from Linodes you have read/write access to.',
+    },
+  ]
+    .filter((item) => item.show)
+    .map((item) => item.text)
+    .join('. ');
+
   return (
     <form onSubmit={onSubmit}>
       <Stack spacing={2}>
@@ -135,7 +156,7 @@ export const CreateImageTab = () => {
               variant="error"
             />
           )}
-          <Stack spacing={1}>
+          <Stack spacing={2}>
             <Typography variant="h2">Select Linode & Disk</Typography>
             <Typography sx={{ maxWidth: { md: '80%', sm: '100%' } }}>
               By default, Linode images are limited to 6144 MB of data per disk.
@@ -153,6 +174,12 @@ export const CreateImageTab = () => {
               created from a raw disk or a disk that&rsquo;s formatted using a
               custom file system.
             </Typography>
+            {linodeIsInDistributedRegion && (
+              <Notice variant="info">
+                This Linode is in a distributed compute region. Images captured
+                from this Linode will be stored in the closest core site.
+              </Notice>
+            )}
             <LinodeSelect
               getOptionDisabled={
                 grants
@@ -164,35 +191,25 @@ export const CreateImageTab = () => {
                       )
                   : undefined
               }
-              helperText={
-                grants?.linode.some(
-                  (grant) => grant.permissions === 'read_only'
-                )
-                  ? 'You can only create Images from Linodes you have read/write access to.'
-                  : undefined
-              }
               onSelectionChange={(linode) => {
                 setSelectedLinodeId(linode?.id ?? null);
                 if (linode === null) {
                   resetField('disk_id');
                 }
               }}
               disabled={isImageCreateRestricted}
+              helperText={linodeSelectHelperText}
               noMarginTop
               required
               value={selectedLinodeId}
             />
-            {isDiskEncryptionFeatureEnabled &&
-              !linodeIsInDistributedRegion &&
-              selectedLinodeId !== null && (
-                <Notice variant="warning">
-                  <Typography
-                    sx={(theme) => ({ fontFamily: theme.font.normal })}
-                  >
-                    {DISK_ENCRYPTION_IMAGES_CAVEAT_COPY}
-                  </Typography>
-                </Notice>
-              )}
+            {showDiskEncryptionWarning && (
+              <Notice variant="warning">
+                <Typography sx={(theme) => ({ fontFamily: theme.font.normal })}>
+                  {DISK_ENCRYPTION_IMAGES_CAVEAT_COPY}
+                </Typography>
+              </Notice>
+            )}
             <Controller
               render={({ field, fieldState }) => (
                 <Autocomplete
@@ -235,7 +252,7 @@ export const CreateImageTab = () => {
           </Stack>
         </Paper>
         <Paper>
-          <Stack spacing={1}>
+          <Stack spacing={2}>
             <Typography variant="h2">Image Details</Typography>
             <Controller
               render={({ field, fieldState }) => (