upcoming: [UIE-10333] - Allow Creating Secure Linodes without Root Password (#13516)

* upcoming: [UIE-10333] - Allow Creating Secure Linodes without Root Password

* Add unit tests for useIsPasswordLessLinodesEnabled

* fixing margin issues

* update validation error message

* co-pilot PR feedback

* Added changeset:  Allow Creating Secure Linodes without Root Password

* remove error from root password when ssh keys are added

* update the heading font size

* add custom error message for invalid authentication

* remove root_pass/ssh keys when it is empty for passwordless linodes

* fix root password error when image is not selected

* trigger root_pass error only when field is touched

Author: harsh-akamai

packages/api-v4/src/linodes/types.ts

@@ -653,6 +653,11 @@ export interface CreateLinodeRequest {
    * @default false
    */
   backups_enabled?: boolean | null;
+  /**
+   * When deploying from an Image, this field is optional, otherwise it is ignored.
+   * This is used to set the boot size for the newly-created Linode.
+   */
+  boot_size?: null | number;
   /**
    * If it is deployed from an Image or a Backup and you wish it to remain offline after deployment, set this to false.
    *
@@ -694,6 +699,11 @@ export interface CreateLinodeRequest {
    * Must be empty if Linode is configured to use new Linode Interfaces.
    */
   ipv4?: string[];
+  /**
+   * When deploying from an Image, this field is optional, otherwise it is ignored.
+   * This is used to set the kernel type for the newly-created Linode.
+   */
+  kernel?: null | string;
   /**
    * The Linode's label is for display purposes only.
    * If no label is provided for a Linode, a default will be assigned.

packages/manager/.changeset/pr-13516-upcoming-features-1774344661328.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+ Allow Creating Secure Linodes without Root Password ([#13516](https://github.com/linode/manager/pull/13516))

packages/manager/src/dev-tools/FeatureFlagTool.tsx

@@ -49,6 +49,7 @@ const options: { flag: keyof Flags; label: string }[] = [
   { flag: 'objMultiCluster', label: 'OBJ Multi-Cluster' },
   { flag: 'objectStorageGen2', label: 'OBJ Gen2' },
   { flag: 'objectStorageGlobalQuotas', label: 'OBJ Global Quotas' },
+  { flag: 'passwordlessLinodes', label: 'PasswordLess Linodes' },
   {
     flag: 'placementGroupPolicyUpdate',
     label: 'Placement Group Policy Update',

packages/manager/src/featureFlags.ts

@@ -275,6 +275,7 @@ export interface Flags {
   objectStorageGlobalQuotas: boolean;
   objMultiCluster: boolean;
   objSummaryPage: boolean;
+  passwordlessLinodes: boolean;
   placementGroupPolicyUpdate: boolean;
   privateImageSharing: boolean;
   productInformationBanners: ProductInformationBannerFlag[];

packages/manager/src/features/Linodes/LinodeCreate/Security/Password.tsx

@@ -0,0 +1,67 @@
+import { Notice, Typography } from '@linode/ui';
+import React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+
+import { Skeleton } from 'src/components/Skeleton';
+import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
+import { useIsPasswordLessLinodesEnabled } from 'src/utilities/linodes';
+
+import type { CreateLinodeRequest } from '@linode/api-v4';
+
+const PasswordInput = React.lazy(() =>
+  import('src/components/PasswordInput/PasswordInput').then((module) => ({
+    default: module.PasswordInput,
+  }))
+);
+
+export const Password = () => {
+  const { control, formState } = useFormContext<CreateLinodeRequest>();
+  const { data: permissions } = usePermissions('account', ['create_linode']);
+  const { isPasswordLessLinodesEnabled } = useIsPasswordLessLinodesEnabled();
+
+  return (
+    <>
+      {isPasswordLessLinodesEnabled && (
+        <>
+          <Typography mb={2} variant="h3">
+            Authentication Method
+          </Typography>
+          {formState.errors.root_pass?.message && (
+            <Notice text={formState.errors.root_pass.message} variant="error" />
+          )}
+        </>
+      )}
+      <React.Suspense
+        fallback={
+          <Skeleton
+            sx={(theme) => ({ height: '89px', maxWidth: theme.inputMaxWidth })}
+          />
+        }
+      >
+        <Controller
+          control={control}
+          name="root_pass"
+          render={({ field, fieldState }) => (
+            <PasswordInput
+              autoComplete="off"
+              disabled={!permissions.create_linode}
+              errorText={
+                !isPasswordLessLinodesEnabled
+                  ? fieldState.error?.message
+                  : undefined
+              }
+              id="linode-password"
+              label="Root Password"
+              name="password"
+              noMarginTop
+              onBlur={field.onBlur}
+              onChange={field.onChange}
+              placeholder="Enter a password."
+              value={field.value ?? ''}
+            />
+          )}
+        />
+      </React.Suspense>
+    </>
+  );
+};

packages/manager/src/features/Linodes/LinodeCreate/Security/SSHKeys.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+
+import { UserSSHKeyPanel } from 'src/components/AccessPanel/UserSSHKeyPanel';
+import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
+import { useIsPasswordLessLinodesEnabled } from 'src/utilities/linodes';
+
+import type { CreateLinodeRequest } from '@linode/api-v4';
+
+export const SSHKeys = () => {
+  const { control, trigger } = useFormContext<CreateLinodeRequest>();
+  const { data: permissions } = usePermissions('account', ['create_linode']);
+  const { isPasswordLessLinodesEnabled } = useIsPasswordLessLinodesEnabled();
+
+  return (
+    <Controller
+      control={control}
+      name="authorized_users"
+      render={({ field }) => (
+        <UserSSHKeyPanel
+          authorizedUsers={field.value ?? []}
+          disabled={!permissions.create_linode}
+          headingVariant={isPasswordLessLinodesEnabled ? 'h3' : 'h2'}
+          setAuthorizedUsers={(values) => {
+            field.onChange(values);
+            if (isPasswordLessLinodesEnabled) {
+              trigger('root_pass');
+            }
+          }}
+        />
+      )}
+    />
+  );
+};

…s/Linodes/LinodeCreate/Security.test.tsx …/LinodeCreate/Security/Security.test.tsxpackages/manager/src/features/Linodes/LinodeCreate/Security.test.tsx renamed to packages/manager/src/features/Linodes/LinodeCreate/Security/Security.test.tsx packages/manager/src/features/Linodes/LinodeCreate/Security.test.tsx renamed to packages/manager/src/features/Linodes/LinodeCreate/Security/Security.test.tsx

@@ -13,7 +13,7 @@ import {
 
 import { Security } from './Security';
 
-import type { LinodeCreateFormValues } from './utilities';
+import type { LinodeCreateFormValues } from '../utilities';
 
 const queryMocks = vi.hoisted(() => ({
   useNavigate: vi.fn(),

…atures/Linodes/LinodeCreate/Security.tsx …nodes/LinodeCreate/Security/Security.tsxpackages/manager/src/features/Linodes/LinodeCreate/Security.tsx renamed to packages/manager/src/features/Linodes/LinodeCreate/Security/Security.tsx packages/manager/src/features/Linodes/LinodeCreate/Security.tsx renamed to packages/manager/src/features/Linodes/LinodeCreate/Security/Security.tsx

@@ -3,7 +3,6 @@ import { Divider, Paper, Typography } from '@linode/ui';
 import React from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
-import { UserSSHKeyPanel } from 'src/components/AccessPanel/UserSSHKeyPanel';
 import {
   DISK_ENCRYPTION_DEFAULT_DISTRIBUTED_INSTANCES,
   DISK_ENCRYPTION_DISTRIBUTED_DESCRIPTION,
@@ -13,16 +12,12 @@ import {
 import { Encryption } from 'src/components/Encryption/Encryption';
 import { useIsDiskEncryptionFeatureEnabled } from 'src/components/Encryption/utils';
 import { getIsDistributedRegion } from 'src/components/RegionSelect/RegionSelect.utils';
-import { Skeleton } from 'src/components/Skeleton';
-import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
+import { useIsPasswordLessLinodesEnabled } from 'src/utilities/linodes';
 
-import type { CreateLinodeRequest } from '@linode/api-v4';
+import { Password } from './Password';
+import { SSHKeys } from './SSHKeys';
 
-const PasswordInput = React.lazy(() =>
-  import('src/components/PasswordInput/PasswordInput').then((module) => ({
-    default: module.PasswordInput,
-  }))
-);
+import type { CreateLinodeRequest } from '@linode/api-v4';
 
 export const Security = () => {
   const { control } = useFormContext<CreateLinodeRequest>();
@@ -45,52 +40,26 @@ export const Security = () => {
     selectedRegion?.id ?? ''
   );
 
-  const { data: permissions } = usePermissions('account', ['create_linode']);
+  const { isPasswordLessLinodesEnabled } = useIsPasswordLessLinodesEnabled();
 
   return (
     <Paper>
       <Typography sx={{ mb: 2 }} variant="h2">
         Security
       </Typography>
-      <React.Suspense
-        fallback={
-          <Skeleton
-            sx={(theme) => ({ height: '89px', maxWidth: theme.inputMaxWidth })}
-          />
-        }
-      >
-        <Controller
-          control={control}
-          name="root_pass"
-          render={({ field, fieldState }) => (
-            <PasswordInput
-              autoComplete="off"
-              disabled={!permissions.create_linode}
-              errorText={fieldState.error?.message}
-              id="linode-password"
-              label="Root Password"
-              name="password"
-              noMarginTop
-              onBlur={field.onBlur}
-              onChange={field.onChange}
-              placeholder="Enter a password."
-              value={field.value ?? ''}
-            />
-          )}
-        />
-      </React.Suspense>
-      <Divider spacingBottom={20} spacingTop={24} />
-      <Controller
-        control={control}
-        name="authorized_users"
-        render={({ field }) => (
-          <UserSSHKeyPanel
-            authorizedUsers={field.value ?? []}
-            disabled={!permissions.create_linode}
-            setAuthorizedUsers={field.onChange}
-          />
-        )}
-      />
+      {!isPasswordLessLinodesEnabled ? (
+        <>
+          <Password />
+          <Divider spacingBottom={20} spacingTop={24} />
+          <SSHKeys />
+        </>
+      ) : (
+        <>
+          <SSHKeys />
+          <Divider spacingBottom={20} spacingTop={24} />
+          <Password />
+        </>
+      )}
       {isDiskEncryptionFeatureEnabled && (
         <>
           <Divider spacingBottom={20} spacingTop={24} />

packages/manager/src/features/Linodes/LinodeCreate/Tabs/OperatingSystems.tsx

@@ -6,6 +6,7 @@ import { useController, useFormContext, useWatch } from 'react-hook-form';
 
 import { ImageSelect } from 'src/components/ImageSelect/ImageSelect';
 import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
+import { useIsPasswordLessLinodesEnabled } from 'src/utilities/linodes';
 
 import { Region } from '../Region';
 import { getGeneratedLinodeLabel } from '../utilities';
@@ -17,9 +18,14 @@ export const OperatingSystems = () => {
   const {
     formState: {
       dirtyFields: { label: isLabelFieldDirty },
+      touchedFields: {
+        authorized_users: isAuthorizedUsersFieldTouched,
+        root_pass: isRootPassFieldTouched,
+      },
     },
     getValues,
     setValue,
+    trigger,
   } = useFormContext<LinodeCreateFormValues>();
 
   const queryClient = useQueryClient();
@@ -31,6 +37,7 @@ export const OperatingSystems = () => {
   const regionId = useWatch<LinodeCreateFormValues, 'region'>({
     name: 'region',
   });
+  const { isPasswordLessLinodesEnabled } = useIsPasswordLessLinodesEnabled();
 
   const { data: region } = useRegionQuery(regionId);
 
@@ -39,6 +46,13 @@ export const OperatingSystems = () => {
   const onChange = async (image: Image | null) => {
     field.onChange(image?.id ?? null);
 
+    if (
+      isRootPassFieldTouched ||
+      (isPasswordLessLinodesEnabled && isAuthorizedUsersFieldTouched)
+    ) {
+      trigger('root_pass');
+    }
+
     if (!isLabelFieldDirty) {
       const label = await getGeneratedLinodeLabel({
         queryClient,

packages/manager/src/features/Linodes/LinodeCreate/index.tsx

@@ -45,6 +45,7 @@ import {
 import {
   useIsLinodeCloneFirewallEnabled,
   useIsLinodeInterfacesEnabled,
+  useIsPasswordLessLinodesEnabled,
 } from 'src/utilities/linodes';
 import { sanitizeHTML } from 'src/utilities/sanitizeHTML';
 
@@ -60,7 +61,7 @@ import { Networking } from './Networking/Networking';
 import { transformLegacyInterfaceErrorsToLinodeInterfaceErrors } from './Networking/utilities';
 import { Plan } from './Plan';
 import { getLinodeCreateResolver } from './resolvers';
-import { Security } from './Security';
+import { Security } from './Security/Security';
 import { SMTP } from './SMTP';
 import { Summary } from './Summary/Summary';
 import { UserData } from './UserData/UserData';
@@ -69,6 +70,7 @@ import {
   defaultValues,
   EMPTY_ACLP_ALERTS,
   getLinodeCreatePayload,
+  transformPasswordLessCreateErrors,
   useHandleLinodeCreateAnalyticsFormError,
 } from './utilities';
 import { VLAN } from './VLAN/VLAN';
@@ -86,6 +88,7 @@ export const LinodeCreate = () => {
   });
   const { secureVMNoticesEnabled } = useSecureVMNoticesEnabled();
   const { isLinodeInterfacesEnabled } = useIsLinodeInterfacesEnabled();
+  const { isPasswordLessLinodesEnabled } = useIsPasswordLessLinodesEnabled();
   const { data: profile } = useProfile();
   const { isLinodeCloneFirewallEnabled } = useIsLinodeCloneFirewallEnabled();
   const { isVMHostMaintenanceEnabled } = useVMHostMaintenanceEnabled();
@@ -103,7 +106,12 @@ export const LinodeCreate = () => {
   const { isDualStackEnabled } = useVPCDualStack();
 
   const form = useForm<LinodeCreateFormValues, LinodeCreateFormContext>({
-    context: { isLinodeInterfacesEnabled, profile, secureVMNoticesEnabled },
+    context: {
+      isPasswordLessLinodesEnabled,
+      isLinodeInterfacesEnabled,
+      profile,
+      secureVMNoticesEnabled,
+    },
     defaultValues: () =>
       defaultValues(linodeCreateType, search, queryClient, {
         isLinodeInterfacesEnabled,
@@ -185,6 +193,7 @@ export const LinodeCreate = () => {
       isShowingNewNetworkingUI: isLinodeInterfacesEnabled,
       isAclpAlertsEnabled: aclpServices?.linode?.alerts?.enabled,
       isAclpAlertsMode: isAclpAlertsModeCreateFlow,
+      isPasswordLessLinodesEnabled,
     });
 
     try {
@@ -227,6 +236,9 @@ export const LinodeCreate = () => {
       if (isLinodeInterfacesEnabled) {
         transformLegacyInterfaceErrorsToLinodeInterfaceErrors(errors);
       }
+      if (isPasswordLessLinodesEnabled) {
+        transformPasswordLessCreateErrors(errors);
+      }
       for (const error of errors) {
         if (error.field) {
           form.setError(error.field, { message: error.reason });