change: [UIE-10012] - Implement UX and user feedback for linode interfaces feature in Create linode page

Author: grevanak-akamai

packages/manager/src/features/Linodes/LinodeCreate/Addons/Backups.tsx

@@ -108,7 +108,7 @@ export const Backups = () => {
               <React.Fragment>
                 Three backup slots are executed and rotated automatically: a
                 daily backup, a 2-7 day old backup, and an 8-14 day old backup.
-                Plans are priced according to the Linode plan selected above.
+                Pricing is based on the selected Linode plan.
               </React.Fragment>
             )}
           </Typography>

packages/manager/src/features/Linodes/LinodeCreate/Addons/PrivateIP.tsx

@@ -63,8 +63,9 @@ export const PrivateIP = () => {
             <Stack alignItems="center" direction="row" spacing={1}>
               <NewFeatureChip />
               <Typography>
-                You can use VPC for private networking instead. NodeBalancers
-                now connect to backend nodes without a private IPv4 address.
+                You can now establish network isolation and connections to
+                NodeBalancer backends through VPC. We recommend using VPC
+                instead of Private IPs.
               </Typography>
             </Stack>
           </Notice>

packages/manager/src/features/Linodes/LinodeCreate/Networking/InterfaceGeneration.test.tsx

@@ -7,36 +7,34 @@ import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers';
 
 import { InterfaceGeneration } from './InterfaceGeneration';
 
+const getAccountSettingsAPI = '*/v4*/account/settings';
+
 describe('InterfaceGeneration', () => {
   it('disables the radios if the account setting enforces linode_only interfaces', async () => {
     const accountSettings = accountSettingsFactory.build({
       interfaces_for_new_linodes: 'linode_only',
     });
 
     server.use(
-      http.get('*/v4*/account/settings', () => {
+      http.get(getAccountSettingsAPI, () => {
         return HttpResponse.json(accountSettings);
       })
     );
 
-    const { findByText, getAllByRole, getByText } =
-      renderWithThemeAndHookFormContext({
-        component: <InterfaceGeneration />,
-      });
-
-    const button = getByText('Network Interface Type');
-
-    // Expand the "Show More"
-    await userEvent.click(button);
+    const { getAllByRole, findByRole } = renderWithThemeAndHookFormContext({
+      component: <InterfaceGeneration />,
+    });
 
-    // Hover to check for the tooltip
-    await userEvent.hover(getByText('Network Interface Type'));
+    // Wait for the tooltip icon to appear (indicating the disabled state)
+    await findByRole('button', {
+      name: 'Your account administrator has enforced that all new Linodes are created with Linode interfaces.',
+    });
 
-    await findByText(
-      'Your account administrator has enforced that all new Linodes are created with Linode interfaces.'
-    );
+    // Verify both radio buttons are disabled
+    const radios = getAllByRole('radio');
+    expect(radios).toHaveLength(2);
 
-    for (const radio of getAllByRole('radio')) {
+    for (const radio of radios) {
       expect(radio).toBeDisabled();
     }
   });
@@ -47,34 +45,143 @@ describe('InterfaceGeneration', () => {
     });
 
     server.use(
-      http.get('*/v4*/account/settings', () => {
+      http.get(getAccountSettingsAPI, () => {
         return HttpResponse.json(accountSettings);
       })
     );
 
-    const { findByText, getAllByRole, getByText } =
-      renderWithThemeAndHookFormContext({
-        component: <InterfaceGeneration />,
-      });
+    const { getAllByRole, findByRole } = renderWithThemeAndHookFormContext({
+      component: <InterfaceGeneration />,
+    });
 
-    const button = getByText('Network Interface Type');
+    // Wait for the tooltip icon to appear (indicating the disabled state)
+    await findByRole('button', {
+      name: 'Your account administrator has enforced that all new Linodes are created with legacy configuration interfaces.',
+    });
 
-    // Expand the "Show More"
-    await userEvent.click(button);
+    // Verify both radio buttons are disabled
+    const radios = getAllByRole('radio');
+    expect(radios).toHaveLength(2);
 
-    // Hover to check for the tooltip
-    await userEvent.hover(getByText('Network Interface Type'));
+    for (const radio of radios) {
+      expect(radio).toBeDisabled();
+    }
+  });
 
-    await findByText(
-      'Your account administrator has enforced that all new Linodes are created with legacy configuration interfaces.'
+  it('enables the radios when account settings allow both interface types', async () => {
+    const accountSettings = accountSettingsFactory.build({
+      interfaces_for_new_linodes: 'linode_default_but_legacy_config_allowed',
+    });
+
+    server.use(
+      http.get(getAccountSettingsAPI, () => {
+        return HttpResponse.json(accountSettings);
+      })
     );
 
-    const radios = getAllByRole('radio');
+    const { getAllByRole, queryByRole } = renderWithThemeAndHookFormContext({
+      component: <InterfaceGeneration />,
+    });
 
+    // Wait for radios to render
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    // Verify no disabled tooltip appears
+    expect(
+      queryByRole('button', {
+        name: /Your account administrator has enforced/,
+      })
+    ).toBeNull();
+
+    // Verify both radio buttons are enabled
+    const radios = getAllByRole('radio');
     expect(radios).toHaveLength(2);
 
     for (const radio of radios) {
-      expect(radio).toBeDisabled();
+      expect(radio).toBeEnabled();
     }
   });
+
+  it('defaults to linode interface when value is not set', async () => {
+    const accountSettings = accountSettingsFactory.build({
+      interfaces_for_new_linodes: 'linode_default_but_legacy_config_allowed',
+    });
+
+    server.use(
+      http.get(getAccountSettingsAPI, () => {
+        return HttpResponse.json(accountSettings);
+      })
+    );
+
+    const { getByDisplayValue } = renderWithThemeAndHookFormContext({
+      component: <InterfaceGeneration />,
+      useFormOptions: {
+        defaultValues: {
+          interface_generation: null,
+        },
+      },
+    });
+
+    // Wait for component to render
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    // Verify linode radio is selected by default
+    expect(getByDisplayValue('linode')).toBeChecked();
+  });
+
+  it('allows user to select legacy config interface when enabled', async () => {
+    const accountSettings = accountSettingsFactory.build({
+      interfaces_for_new_linodes: 'legacy_config_default_but_linode_allowed',
+    });
+
+    server.use(
+      http.get(getAccountSettingsAPI, () => {
+        return HttpResponse.json(accountSettings);
+      })
+    );
+
+    const { getByDisplayValue } = renderWithThemeAndHookFormContext({
+      component: <InterfaceGeneration />,
+      useFormOptions: {
+        defaultValues: {
+          interface_generation: 'linode',
+        },
+      },
+    });
+
+    // Wait for component to render
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    const legacyConfigRadio = getByDisplayValue('legacy_config');
+
+    // Click on legacy config radio
+    await userEvent.click(legacyConfigRadio);
+
+    // Verify legacy config is now selected
+    expect(legacyConfigRadio).toBeChecked();
+    expect(getByDisplayValue('linode')).not.toBeChecked();
+  });
+
+  it('displays correct labels for both interface types', () => {
+    const accountSettings = accountSettingsFactory.build({
+      interfaces_for_new_linodes: 'linode_default_but_legacy_config_allowed',
+    });
+
+    server.use(
+      http.get(getAccountSettingsAPI, () => {
+        return HttpResponse.json(accountSettings);
+      })
+    );
+
+    const { getByText } = renderWithThemeAndHookFormContext({
+      component: <InterfaceGeneration />,
+    });
+
+    // Verify interface type labels
+    expect(getByText('Linode Interfaces (Recommended)')).toBeVisible();
+    expect(
+      getByText('Configuration Profile Interfaces (Legacy)')
+    ).toBeVisible();
+    expect(getByText('Network Interface Type')).toBeVisible();
+  });
 });