data explorer: create "Copy as Code" modal

extensions/positron-duckdb/src/extension.ts

@@ -1056,6 +1056,9 @@ END`;
 				export_data_selection: {
 					support_status: SupportStatus.Unsupported,
 					supported_formats: []
+				},
+				convert_to_code: {
+					support_status: SupportStatus.Unsupported,
 				}
 			}
 		};
@@ -1179,6 +1182,9 @@ END`;
 						ExportFormat.Tsv,
 						ExportFormat.Html
 					]
+				},
+				convert_to_code: {
+					support_status: SupportStatus.Unsupported,
 				}
 			}
 		};

extensions/positron-duckdb/src/interfaces.ts

@@ -902,6 +902,11 @@ export interface SupportedFeatures {
 	 */
 	export_data_selection: ExportDataSelectionFeatures;
 
+	/**
+	 * Support for 'convert_to_code' RPC and its features
+	 */
+	convert_to_code: ConvertToCodeFeatures;
+
 }
 
 /**
@@ -1000,6 +1005,24 @@ export interface SetSortColumnsFeatures {
 
 }
 
+/**
+ * Feature flags for 'convert_to_code' RPC
+ */
+export interface ConvertToCodeFeatures {
+	/**
+	 * The support status for this RPC method
+	 * */
+	support_status: SupportStatus;
+	/**
+	 * The supported code syntax names
+	 */
+	supported_code_syntaxes?: Array<CodeSyntaxName>;
+}
+
+export interface CodeSyntaxName {
+	code_syntax_name: string;
+}
+
 /**
  * A selection on the data grid, for copying to the clipboard or other
  * actions

extensions/positron-duckdb/src/test/extension.test.ts

@@ -104,7 +104,7 @@ async function createTempTable(
 	for (let i = 0; i < length; i++) {
 		tuples.push(`(${columns.map(c => c.values[i]).join(', ')})`);
 	}
-	
+
 	// Use explicit column names in INSERT to ensure proper ordering
 	const columnNames = columns.map(c => quoteIdentifier(c.name)).join(', ');
 	await runQuery(`INSERT INTO ${tableName} (${columnNames}) VALUES\n${tuples.join(',\n')};`);
@@ -243,7 +243,8 @@ suite('Positron DuckDB Extension Test Suite', () => {
 						ExportFormat.Tsv,
 						ExportFormat.Html
 					]
-				}
+				},
+				convert_to_code: { support_status: SupportStatus.Unsupported }
 			}
 		} satisfies BackendState);
 

src/vs/workbench/browser/positronModalDialogs/components/dropdownEntry.tsx

@@ -0,0 +1,33 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (C) 2025 Posit Software, PBC. All rights reserved.
+ *  Licensed under the Elastic License 2.0. See LICENSE.txt for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+// React.
+import React from 'react';
+
+/**
+ * DropdownEntryProps interface.
+ */
+interface DropdownEntryProps {
+	title: string;
+	subtitle?: string;
+	group?: string;
+}
+
+/**
+ * DropdownEntry component.
+ * @param props The dropdown entry props.
+ * @returns The rendered component
+ */
+export const DropdownEntry = (props: DropdownEntryProps) => {
+	// Render.
+	return (
+		<div className='dropdown-entry'>
+			<div className='dropdown-entry-title'>
+				{props.title}
+			</div>
+			{props.group ? <div className='dropdown-entry-group'>{props.group}</div> : null}
+		</div>
+	);
+};

src/vs/workbench/browser/positronModalDialogs/convertToCodeModalDialog.tsx

@@ -0,0 +1,167 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (C) 2025 Posit Software, PBC. All rights reserved.
+ *  Licensed under the Elastic License 2.0. See LICENSE.txt for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+// React.
+import React, { useEffect, useState } from 'react';
+
+// Other dependencies.
+import { localize } from '../../../nls.js';
+import { VerticalStack } from '../positronComponents/positronModalDialog/components/verticalStack.js';
+import { OKCancelModalDialog } from '../positronComponents/positronModalDialog/positronOKCancelModalDialog.js';
+import { IPositronDataExplorerInstance } from '../../services/positronDataExplorer/browser/interfaces/positronDataExplorerInstance.js';
+import { PositronDataExplorerCommandId } from '../../contrib/positronDataExplorerEditor/browser/positronDataExplorerActions.js';
+import { DropDownListBox } from '../positronComponents/dropDownListBox/dropDownListBox.js';
+import { DropDownListBoxItem } from '../positronComponents/dropDownListBox/dropDownListBoxItem.js';
+import { DropdownEntry } from './components/dropdownEntry.js';
+import { CodeSyntaxName } from '../../services/languageRuntime/common/positronDataExplorerComm.js';
+import { PositronModalReactRenderer } from '../../../base/browser/positronModalReactRenderer.js';
+import { usePositronReactServicesContext } from '../../../base/browser/positronReactRendererContext.js';
+
+/**
+ * Shows the convert to code modal dialog.
+ * @param dataExplorerClientInstance The data explorer client instance.
+ * @returns A promise that resolves when the dialog is closed.
+ */
+export const showConvertToCodeModalDialog = async (
+	dataExplorerClientInstance: IPositronDataExplorerInstance,
+): Promise<void> => {
+	// Create the renderer.
+	const renderer = new PositronModalReactRenderer()
+
+	// Show the copy as code dialog.
+	renderer.render(
+		<ConvertToCodeModalDialog
+			dataExplorerClientInstance={dataExplorerClientInstance}
+			renderer={renderer}
+		/>
+	);
+};
+
+/**
+ * ConvertToCodeDialogProps interface.
+ */
+interface ConvertToCodeDialogProps {
+	dataExplorerClientInstance: IPositronDataExplorerInstance
+	renderer: PositronModalReactRenderer;
+}
+
+
+/**
+ * ConvertToCodeModalDialog component.
+ * @param props The component properties.
+ * @returns The rendered component.
+ */
+export const ConvertToCodeModalDialog = (props: ConvertToCodeDialogProps) => {
+	// Service hooks.
+	const services = usePositronReactServicesContext();
+
+	// State hooks.
+	const instance = props.dataExplorerClientInstance.dataExplorerClientInstance;
+	const codeSyntaxOptions = instance.cachedBackendState?.supported_features?.convert_to_code?.code_syntaxes ?? [];
+
+	const [selectedSyntax, setSelectedSyntax] = useState<CodeSyntaxName | undefined>(instance.suggestedSyntax);
+
+	const [codeString, setCodeString] = useState<string | undefined>(undefined);
+
+	useEffect(() => {
+		const getCodeString = async () => {
+			try {
+				// Execute the command to get the code string based on the selected syntax.
+				const result = await services.commandService.executeCommand(PositronDataExplorerCommandId.ConvertToCodeAction, selectedSyntax);
+				setCodeString(result);
+			} catch (error) {
+				if (selectedSyntax) {
+					setCodeString(localize(
+						'positron.dataExplorer.getCodeStringWithSyntax',
+						"Cannot generate code for type {0}",
+						selectedSyntax.code_syntax_name
+					));
+				} else {
+					setCodeString(localize(
+						'positron.dataExplorer.getCodeStringNoSyntax',
+						"Cannot generate code"
+					));
+				}
+			}
+		};
+
+		getCodeString(); // Call the async function
+	}, [selectedSyntax, services.commandService]);
+
+	// Construct the syntax options dropdown entries
+	const syntaxDropdownEntries = () => {
+		return syntaxInfoToDropDownItems(codeSyntaxOptions);
+	};
+
+	const syntaxInfoToDropDownItems = (
+		syntaxes: CodeSyntaxName[]
+	): DropDownListBoxItem<string, CodeSyntaxName>[] => {
+		return syntaxes.map(
+			(syntax) =>
+				new DropDownListBoxItem<string, CodeSyntaxName>({
+					identifier: syntax.code_syntax_name,
+					value: syntax,
+				})
+		);
+	};
+
+	const syntaxDropdownTitle = (): string => {
+		// if selectedSyntax is an object with code_syntax_name, return that name
+		if (typeof selectedSyntax === 'object' && 'code_syntax_name' in selectedSyntax) {
+			return (selectedSyntax as CodeSyntaxName).code_syntax_name;
+		}
+		return localize('positron.dataExplorer.selectCodeSyntax', 'Select Code Syntax');
+	}
+
+	const onSelectionChanged = async (item: DropDownListBoxItem<string, CodeSyntaxName>) => {
+		const typedItem = item as DropDownListBoxItem<string, CodeSyntaxName>;
+		setSelectedSyntax(typedItem.options.value);
+
+		// Execute the command to get the code string based on the selected syntax.
+		try {
+			const exc = await services.commandService.executeCommand(PositronDataExplorerCommandId.ConvertToCodeAction, typedItem.options.value);
+			setCodeString(exc);
+		} catch (error) {
+			setCodeString(localize(
+				'positron.dataExplorer.cannotGenerateCodeForType',
+				"Cannot generate code for type {0}",
+				typedItem.options.value.code_syntax_name
+			));
+		}
+	};
+
+	// Render.
+	return (
+		<OKCancelModalDialog
+			catchErrors
+			height={300}
+			renderer={props.renderer}
+			title={(() => localize(
+				'positronConvertToCodeModalDialogTitle',
+				"Convert to Code"
+			))()}
+			width={400}
+			onAccept={() => props.renderer.dispose()}
+			onCancel={() => props.renderer.dispose()}
+		>
+			<VerticalStack>
+				<DropDownListBox
+					createItem={(item) => (
+						<DropdownEntry
+							title={item.options.identifier}
+						/>
+					)}
+					entries={syntaxDropdownEntries()}
+					title={syntaxDropdownTitle()}
+					onSelectionChanged={onSelectionChanged}
+				/>
+				<pre>
+					{codeString}
+				</pre>
+			</VerticalStack>
+
+		</OKCancelModalDialog>
+	);
+};

src/vs/workbench/browser/positronNewFolderFlow/components/steps/dropdownEntry.tsx

@@ -35,7 +35,7 @@ export const DropdownEntry = (props: DropdownEntryProps) => {
 			<div className='dropdown-entry-subtitle'>
 				{props.subtitle}
 			</div>
-			{props.group ? <div className='dropdown-entry-group'>{props.group}</div> : null}
+			{props.group && <div className='dropdown-entry-group'>{props.group}</div>}
 		</div>
 	);
 };