Add optional prop to conditionally render doctl command in GeneratedCommands component (#105)

Author: jkpe

src/__tests__/GeneratedCommands.test.tsx

@@ -15,26 +15,49 @@ describe('GeneratedCommands', () => {
     mockOnCopy.mockClear();
   });
 
-  it('renders both commands', () => {
+  it('renders only curl command by default', () => {
     render(<GeneratedCommands commands={mockCommands} />);
 
-    // Use a more specific selector for the command headers
+    expect(screen.getByRole('heading', { name: /generated.*curl.*command/i })).toBeInTheDocument();
+    expect(screen.getByText(mockCommands.curl)).toBeInTheDocument();
+    
+    // doctl command should not be visible
+    expect(screen.queryByRole('heading', { name: /generated.*doctl.*command/i })).not.toBeInTheDocument();
+    expect(screen.queryByText(mockCommands.doctl)).not.toBeInTheDocument();
+  });
+
+  it('renders both commands when showDoctlCommand is true', () => {
+    render(<GeneratedCommands commands={mockCommands} showDoctlCommand={true} />);
+    
     expect(screen.getByRole('heading', { name: /generated.*curl.*command/i })).toBeInTheDocument();
     expect(screen.getByRole('heading', { name: /generated.*doctl.*command/i })).toBeInTheDocument();
     expect(screen.getByText(mockCommands.curl)).toBeInTheDocument();
     expect(screen.getByText(mockCommands.doctl)).toBeInTheDocument();
   });
 
-  it('copies commands to clipboard when clicking copy button', async () => {
+  it('copies curl command to clipboard when clicking copy button', async () => {
     render(<GeneratedCommands commands={mockCommands} onCopy={mockOnCopy} />);
 
+    const copyButton = screen.getByRole('button', { name: /copy/i });
+    
+    // Test copying curl command
+    await fireEvent.click(copyButton);
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(mockCommands.curl);
+    expect(mockOnCopy).toHaveBeenCalled();
+  });
+
+  it('copies both commands when showDoctlCommand is true', async () => {
+    render(<GeneratedCommands commands={mockCommands} onCopy={mockOnCopy} showDoctlCommand={true} />);
+    
     const copyButtons = screen.getAllByRole('button', { name: /copy/i });
 
     // Test copying curl command
     await fireEvent.click(copyButtons[0]);
     expect(navigator.clipboard.writeText).toHaveBeenCalledWith(mockCommands.curl);
     expect(mockOnCopy).toHaveBeenCalled();
 
+    mockOnCopy.mockClear();
+    
     // Test copying doctl command
     await fireEvent.click(copyButtons[1]);
     expect(navigator.clipboard.writeText).toHaveBeenCalledWith(mockCommands.doctl);
@@ -44,8 +67,8 @@ describe('GeneratedCommands', () => {
   it('shows "Copied!" text after copying', async () => {
     render(<GeneratedCommands commands={mockCommands} />);
 
-    const copyButtons = screen.getAllByRole('button', { name: /copy/i });
-    await fireEvent.click(copyButtons[0]);
+    const copyButton = screen.getByRole('button', { name: /copy/i });
+    await fireEvent.click(copyButton);
 
     // Wait for the "Copied!" text to appear
     await waitFor(() => {

src/components/GeneratedCommands.tsx

@@ -7,9 +7,10 @@ interface GeneratedCommandsProps {
     doctl: string;
   };
   onCopy?: () => void;
+  showDoctlCommand?: boolean;
 }
 
-const GeneratedCommands = ({ commands, onCopy }: GeneratedCommandsProps) => {
+const GeneratedCommands = ({ commands, onCopy, showDoctlCommand = false }: GeneratedCommandsProps) => {
   const [curlCopied, setCurlCopied] = useState(false);
   const [doctlCopied, setDoctlCopied] = useState(false);
 
@@ -47,22 +48,24 @@ const GeneratedCommands = ({ commands, onCopy }: GeneratedCommandsProps) => {
           </pre>
         </div>
 
-        {/* doctl Command */}
-        <div>
-          <div className="flex justify-between items-center mb-4">
-            <h2 className="text-lg font-medium">Generated <code>doctl</code> command</h2>
-            <button
-              onClick={() => handleCopy(commands.doctl, 'doctl')}
-              className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
-            >
-              <Copy size={16} />
-              {doctlCopied ? 'Copied!' : 'Copy'}
-            </button>
+        {/* doctl Command - conditionally rendered */}
+        {showDoctlCommand && (
+          <div>
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-lg font-medium">Generated <code>doctl</code> command</h2>
+              <button
+                onClick={() => handleCopy(commands.doctl, 'doctl')}
+                className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+              >
+                <Copy size={16} />
+                {doctlCopied ? 'Copied!' : 'Copy'}
+              </button>
+            </div>
+            <pre className="bg-gray-900 text-white p-6 rounded-lg overflow-x-auto">
+              {commands.doctl}
+            </pre>
           </div>
-          <pre className="bg-gray-900 text-white p-6 rounded-lg overflow-x-auto">
-            {commands.doctl}
-          </pre>
-        </div>
+        )}
       </div>
     </div>
   );

src/utils/generateCommands.ts

@@ -2,7 +2,7 @@ export const generateCommands = (databaseId: string, config: any, engine: string
   if (!databaseId || Object.keys(config).length === 0) return { curl: '', doctl: '' };
 
   const jsonBody = JSON.stringify({ config }, null, 2);
-  const compactJsonBody = JSON.stringify({ config });
+  const configJsonBody = JSON.stringify(config);
 
   return {
     curl: `curl -X PATCH \\
@@ -11,6 +11,6 @@ export const generateCommands = (databaseId: string, config: any, engine: string
   -d '${jsonBody}' \\
   "https://api.digitalocean.com/v2/databases/${databaseId}/config"`,
 
-    doctl: `doctl databases configuration update ${databaseId} --engine ${engine} --config-json '${compactJsonBody}'`
+    doctl: `doctl databases configuration update ${databaseId} --engine ${engine} --config-json '${configJsonBody}'`
   };
 }; 

src/version.ts

@@ -1,3 +1,3 @@
 // This file is automatically updated by our release process
-export const VERSION = '1.5.0';
+export const VERSION = '1.5.2';
 export const BUILD_DATE = new Date().toISOString();