upcoming: [M3-10385] - Add Linode Interface support for Linode Create CLI Codesnippets tool (linode#12591)

* support for CLI

* Added changeset: Add Linode Interface support for Linode CLI codesnippets tool

* consolidate type import

Author: coliu-akamai

packages/manager/.changeset/pr-12591-upcoming-features-1753731039330.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add Linode Interface support for Linode CLI codesnippets tool ([#12591](https://github.com/linode/manager/pull/12591))

packages/manager/src/features/Kubernetes/KubernetesPlansPanel/NodePoolConfigDrawer.tsx

@@ -62,7 +62,8 @@ export const NodePoolConfigDrawer = (props: Props) => {
   } = props;
 
   // Use the node pool state from the main create flow from.
-  const { control: parentFormControl } = useFormContext<CreateClusterFormValues>();
+  const { control: parentFormControl } =
+    useFormContext<CreateClusterFormValues>();
   const _nodePools = useWatch({
     control: parentFormControl,
     name: 'nodePools',

packages/manager/src/features/Linodes/LinodeCreate/ApiAwarenessModal/LinodeCLIPanel.tsx

@@ -1,4 +1,4 @@
-import { Notice, Typography } from '@linode/ui';
+import { Typography } from '@linode/ui';
 import React, { useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 
@@ -26,10 +26,6 @@ export const LinodeCLIPanel = ({
 }: LinodeCLIPanelProps) => {
   const createType = useGetLinodeCreateType();
 
-  // @TODO - Linode Interfaces
-  // DX support (CLI, integrations, sdks) for Linode Interfaces is not yet available. Remove this when it is.
-  const showDXCodeSnippets = payLoad.interface_generation !== 'linode';
-
   const linodeCLIAction = createType;
 
   const { getValues } = useFormContext<LinodeCreateFormValues>();
@@ -68,17 +64,7 @@ export const LinodeCLIPanel = ({
         </Link>
         .
       </Typography>
-      {!showDXCodeSnippets && (
-        <Notice
-          spacingTop={16}
-          text="Linode CLI support to create Linodes using Linode Interfaces is
-              coming soon."
-          variant="info"
-        />
-      )}
-      {showDXCodeSnippets && (
-        <CodeBlock analyticsLabel={title} code={cliCommand} language={'bash'} />
-      )}
+      <CodeBlock analyticsLabel={title} code={cliCommand} language={'bash'} />
     </SafeTabPanel>
   );
 };

packages/manager/src/utilities/codesnippets/generate-cli.test.ts

@@ -44,7 +44,7 @@ const linodeDataForCLI = `
   --type ${linodeRequest.type} \\
   --authorized_users Linny \\
   --authorized_users Gritty \\
-  --interfaces.ipam_address null --interfaces.ipv4.nat_1_1 \"any\" --interfaces.ipv4.vpc \"123\" --interfaces.label null --interfaces.primary true --interfaces.purpose \"vpc\" --interfaces.subnet_id 8296 \\
+  --interfaces '[{"ipv4":{"nat_1_1":"any","vpc":"123"},"primary":true,"purpose":"vpc","subnet_id":8296}]' \\
   --metadata.user_data="cmVrbmpnYmloZXVma2xkbQpqZXZia2Y=" \\
   --placement_group.id 1234 \\
   --stackscript_data '{"gh_username": "linode"}' \\

packages/manager/src/utilities/codesnippets/generate-cli.ts

@@ -1,8 +1,4 @@
-import type { PlacementGroup } from '@linode/api-v4';
-import type {
-  ConfigInterfaceIPv4,
-  UserData,
-} from '@linode/api-v4/lib/linodes/types';
+import type { PlacementGroup, UserData } from '@linode/api-v4';
 
 // Credit: https://github.com/xxorax/node-shell-escape
 function escapeStringForCLI(s: string): string {
@@ -21,47 +17,18 @@ const convertObjectToCLIArg = (data: null | {}) => {
   return `'${JSON.stringify(data).replace(':', ': ')}'`;
 };
 
-const parseObject = (key: string, value: {}) => {
-  // M3-7638: The Linode CLI does not currently accept interfaces.ipv4 as an object so we need to make them separate arguments
-  const parseIpv4Object = (_key: string, _value: ConfigInterfaceIPv4) => {
-    const ipv4ValueStrings = [];
-    if (_value.nat_1_1) {
-      ipv4ValueStrings.push(
-        `--${key}.${_key}.nat_1_1 ${JSON.stringify(_value.nat_1_1)}`
-      );
-    }
-    if (_value.vpc) {
-      ipv4ValueStrings.push(
-        `--${key}.${_key}.vpc ${JSON.stringify(_value.vpc)}`
-      );
-    }
-    return ipv4ValueStrings.join(' ');
-  };
-
-  const result = Object.entries(value)
-    .map(([_key, _value]) => {
-      if (_key === 'ipv4') {
-        return parseIpv4Object(_key, _value as ConfigInterfaceIPv4);
-      }
-      return `--${key}.${_key} ${JSON.stringify(_value)}`;
-    })
-    .filter((string) => string.length > 0)
-    .join(' ');
-  return result.padStart(result.length + 2);
-};
-
 const parseArray = (key: string, value: any[]) => {
   const results: string[] = [];
   if (key === 'interfaces') {
-    results.push(
-      value
-        .map((item) => {
-          // M3-7638: vpc_id is not a valid argument. The subnet_id will be used in the backend to implicitly determine the VPC ID
-          delete item.vpc_id;
-          return parseObject('interfaces', item);
-        })
-        .join('\\\n')
-    );
+    const json = value.map((item) => {
+      // M3-7638: vpc_id is not a valid argument. The subnet_id will be used in the backend to implicitly determine the VPC ID
+      delete item.vpc_id;
+      return Object.fromEntries(
+        Object.entries(item).filter(([_, value]) => value !== null)
+      );
+    });
+
+    results.push(`  --${key} ${escapeStringForCLI(JSON.stringify(json))}`);
   } else {
     value.forEach((item) => {
       results.push(`  --${key} ${escapeStringForCLI(item)}`);
@@ -118,7 +85,11 @@ export const generateCLICommand = (
   const dataForCLI = Object.entries(data).reduce(dataEntriesReduce, []);
 
   if (linodeCLIAction === 'Clone Linode') {
-    return `linode-cli linodes clone ${sourceLinodeID} \\\n${dataForCLI.join(
+    const cloneDataForCLI = dataForCLI.filter(
+      (entry) =>
+        !entry.includes('--firewall_id') && !entry.includes('--interfaces')
+    );
+    return `linode-cli linodes clone ${sourceLinodeID} \\\n${cloneDataForCLI.join(
       ' \\\n'
     )}`;
   }