Extension update confirm dialog (#10183)

packages/cli/src/ui/components/ConsentPrompt.test.tsx

@@ -0,0 +1,119 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Text } from 'ink';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render } from 'ink-testing-library';
+import { ConsentPrompt } from './ConsentPrompt.js';
+import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
+import { MarkdownDisplay } from '../utils/MarkdownDisplay.js';
+
+vi.mock('./shared/RadioButtonSelect.js', () => ({
+  RadioButtonSelect: vi.fn(() => null),
+}));
+
+vi.mock('../utils/MarkdownDisplay.js', () => ({
+  MarkdownDisplay: vi.fn(() => null),
+}));
+
+const MockedRadioButtonSelect = vi.mocked(RadioButtonSelect);
+const MockedMarkdownDisplay = vi.mocked(MarkdownDisplay);
+
+describe('ConsentPrompt', () => {
+  const onConfirm = vi.fn();
+  const terminalWidth = 80;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders a string prompt with MarkdownDisplay', () => {
+    const prompt = 'Are you sure?';
+    render(
+      <ConsentPrompt
+        prompt={prompt}
+        onConfirm={onConfirm}
+        terminalWidth={terminalWidth}
+      />,
+    );
+
+    expect(MockedMarkdownDisplay).toHaveBeenCalledWith(
+      {
+        isPending: true,
+        text: prompt,
+        terminalWidth,
+      },
+      undefined,
+    );
+  });
+
+  it('renders a ReactNode prompt directly', () => {
+    const prompt = <Text>Are you sure?</Text>;
+    const { lastFrame } = render(
+      <ConsentPrompt
+        prompt={prompt}
+        onConfirm={onConfirm}
+        terminalWidth={terminalWidth}
+      />,
+    );
+
+    expect(MockedMarkdownDisplay).not.toHaveBeenCalled();
+    expect(lastFrame()).toContain('Are you sure?');
+  });
+
+  it('calls onConfirm with true when "Yes" is selected', () => {
+    const prompt = 'Are you sure?';
+    render(
+      <ConsentPrompt
+        prompt={prompt}
+        onConfirm={onConfirm}
+        terminalWidth={terminalWidth}
+      />,
+    );
+
+    const onSelect = MockedRadioButtonSelect.mock.calls[0][0].onSelect;
+    onSelect(true);
+
+    expect(onConfirm).toHaveBeenCalledWith(true);
+  });
+
+  it('calls onConfirm with false when "No" is selected', () => {
+    const prompt = 'Are you sure?';
+    render(
+      <ConsentPrompt
+        prompt={prompt}
+        onConfirm={onConfirm}
+        terminalWidth={terminalWidth}
+      />,
+    );
+
+    const onSelect = MockedRadioButtonSelect.mock.calls[0][0].onSelect;
+    onSelect(false);
+
+    expect(onConfirm).toHaveBeenCalledWith(false);
+  });
+
+  it('passes correct items to RadioButtonSelect', () => {
+    const prompt = 'Are you sure?';
+    render(
+      <ConsentPrompt
+        prompt={prompt}
+        onConfirm={onConfirm}
+        terminalWidth={terminalWidth}
+      />,
+    );
+
+    expect(MockedRadioButtonSelect).toHaveBeenCalledWith(
+      expect.objectContaining({
+        items: [
+          { label: 'Yes', value: true, key: 'Yes' },
+          { label: 'No', value: false, key: 'No' },
+        ],
+      }),
+      undefined,
+    );
+  });
+});

packages/cli/src/ui/components/ConsentPrompt.tsx

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Box } from 'ink';
+import { type ReactNode } from 'react';
+import { theme } from '../semantic-colors.js';
+import { MarkdownDisplay } from '../utils/MarkdownDisplay.js';
+import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
+
+type ConsentPromptProps = {
+  // If a simple string is given, it will render using markdown by default.
+  prompt: ReactNode;
+  onConfirm: (value: boolean) => void;
+  terminalWidth: number;
+};
+
+export const ConsentPrompt = (props: ConsentPromptProps) => {
+  const { prompt, onConfirm, terminalWidth } = props;
+
+  return (
+    <Box
+      borderStyle="round"
+      borderColor={theme.border.default}
+      flexDirection="column"
+      paddingY={1}
+      paddingX={2}
+    >
+      {typeof prompt === 'string' ? (
+        <MarkdownDisplay
+          isPending={true}
+          text={prompt}
+          terminalWidth={terminalWidth}
+        />
+      ) : (
+        prompt
+      )}
+      <Box marginTop={1}>
+        <RadioButtonSelect
+          items={[
+            { label: 'Yes', value: true, key: 'Yes' },
+            { label: 'No', value: false, key: 'No' },
+          ]}
+          onSelect={onConfirm}
+        />
+      </Box>
+    </Box>
+  );
+};

packages/cli/src/ui/components/DialogManager.tsx

@@ -9,7 +9,7 @@ import { IdeIntegrationNudge } from '../IdeIntegrationNudge.js';
 import { LoopDetectionConfirmation } from './LoopDetectionConfirmation.js';
 import { FolderTrustDialog } from './FolderTrustDialog.js';
 import { ShellConfirmationDialog } from './ShellConfirmationDialog.js';
-import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
+import { ConsentPrompt } from './ConsentPrompt.js';
 import { ThemeDialog } from './ThemeDialog.js';
 import { SettingsDialog } from './SettingsDialog.js';
 import { AuthInProgress } from '../auth/AuthInProgress.js';
@@ -31,10 +31,14 @@ import { IdeTrustChangeDialog } from './IdeTrustChangeDialog.js';
 
 interface DialogManagerProps {
   addItem: UseHistoryManagerReturn['addItem'];
+  terminalWidth: number;
 }
 
 // Props for DialogManager
-export const DialogManager = ({ addItem }: DialogManagerProps) => {
+export const DialogManager = ({
+  addItem,
+  terminalWidth,
+}: DialogManagerProps) => {
   const config = useConfig();
   const settings = useSettings();
 
@@ -94,20 +98,21 @@ export const DialogManager = ({ addItem }: DialogManagerProps) => {
   }
   if (uiState.confirmationRequest) {
     return (
-      <Box flexDirection="column">
-        {uiState.confirmationRequest.prompt}
-        <Box paddingY={1}>
-          <RadioButtonSelect
-            items={[
-              { label: 'Yes', value: true, key: 'Yes' },
-              { label: 'No', value: false, key: 'No' },
-            ]}
-            onSelect={(value: boolean) => {
-              uiState.confirmationRequest!.onConfirm(value);
-            }}
-          />
-        </Box>
-      </Box>
+      <ConsentPrompt
+        prompt={uiState.confirmationRequest.prompt}
+        onConfirm={uiState.confirmationRequest.onConfirm}
+        terminalWidth={terminalWidth}
+      />
+    );
+  }
+  if (uiState.confirmUpdateExtensionRequests.length > 0) {
+    const request = uiState.confirmUpdateExtensionRequests[0];
+    return (
+      <ConsentPrompt
+        prompt={request.prompt}
+        onConfirm={request.onConfirm}
+        terminalWidth={terminalWidth}
+      />
     );
   }
   if (uiState.isThemeDialogOpen) {