Context menu item to clear terminal

Closes #3135

Signed-off-by: David Thompson <davthomp@redhat.com>

Author: datho7561

src/webview/openshift-terminal/app/terminalInstance.tsx

@@ -14,9 +14,10 @@ import 'xterm/css/xterm.css';
 import '../../common/scrollbar.scss';
 
 /**
- * Clone of VS Code's context menu with "Copy" and "Select All" items.
+ * Clone of VS Code's context menu with "Copy", "Select All", and "Clear" items.
  */
 const TerminalContextMenu = (props: {
+    onClearHandler: React.MouseEventHandler<HTMLButtonElement>;
     onCopyHandler: React.MouseEventHandler<HTMLButtonElement>;
     onSelectAllHandler: React.MouseEventHandler<HTMLButtonElement>;
 }) => {
@@ -77,6 +78,28 @@ const TerminalContextMenu = (props: {
                         <Typography variant="body1">Ctrl+Shift+A</Typography>
                     </Stack>
                 </Button>
+                <Button
+                    variant="text"
+                    onClick={props.onClearHandler}
+                    sx={{
+                        width: '100%',
+                        textTransform: 'none',
+                        '&:hover': {
+                            backgroundColor:
+                                'color-mix(in srgb, var(--vscode-button-background) 50%, black)',
+                        },
+                        paddingY: '4px',
+                    }}
+                >
+                    <Stack
+                        direction="row"
+                        justifyContent="flex-start"
+                        marginX="13px"
+                        style={{ width: '100%' }}
+                    >
+                        <Typography variant="body1">Clear</Typography>
+                    </Stack>
+                </Button>
             </Stack>
         </Paper>
     );
@@ -121,6 +144,16 @@ export const TerminalInstance = (props: {
         setContextMenuOpen(false);
     };
 
+    const handleClear = () => {
+        term.clear();
+        window.vscodeApi.postMessage({
+            kind: 'termClear',
+            data: {
+                uuid: props.uuid,
+            },
+        });
+    }
+
     // The xtermjs addon that can be used to resize the terminal according to the size of the div
     const fitAddon = React.useMemo(() => {
         return new FitAddon();
@@ -336,6 +369,7 @@ export const TerminalInstance = (props: {
                 <TerminalContextMenu
                     onCopyHandler={handleCopy}
                     onSelectAllHandler={handleSelectAll}
+                    onClearHandler={handleClear}
                 />
             </div>
             <div

src/webview/openshift-terminal/openShiftTerminal.ts

@@ -340,6 +340,10 @@ class OpenShiftTerminal {
         this.forceKill();
         this._sendExitMessage();
     }
+
+    public clear(): void {
+        this._headlessTerm.clear();
+    }
 }
 
 /**
@@ -429,6 +433,8 @@ export class OpenShiftTerminalManager implements WebviewViewProvider {
                             });
                     } else if (message.kind === 'termSuspend') {
                         terminal.stopRendering();
+                    } else if (message.kind === 'termClear') {
+                        terminal.clear();
                     } else if (message.kind === 'input') {
                         terminal.write(message.data.data);
                     } else if (message.kind === 'resize') {