From fe47318e26ecec697d00c8c3f491c73ccf90f86f Mon Sep 17 00:00:00 2001
From: Dakota Walsh <101994734+dakota-portainer@users.noreply.github.com>
Date: Wed, 24 Jan 2024 09:45:40 +1300
Subject: [PATCH] fix(terminal): display os specific copy/paste tooltip EE-1976
 (#10835)

---
 .../console/containerConsoleController.js     |  5 ++-
 app/docker/views/containers/console/exec.html |  8 ++--
 app/portainer/react/components/index.ts       |  2 +
 .../TerminalTooltip/TerminalTooltip.tsx       | 42 +++++++++++++++++++
 app/react/components/TerminalTooltip/index.ts |  1 +
 .../applications/ConsoleView/ConsoleView.tsx  |  7 +++-
 .../KubectlShell/KubectlShell.tsx             | 34 +++++++++------
 7 files changed, 81 insertions(+), 18 deletions(-)
 create mode 100644 app/react/components/TerminalTooltip/TerminalTooltip.tsx
 create mode 100644 app/react/components/TerminalTooltip/index.ts

diff --git a/app/docker/views/containers/console/containerConsoleController.js b/app/docker/views/containers/console/containerConsoleController.js
index 7f832ae71..57551796e 100644
--- a/app/docker/views/containers/console/containerConsoleController.js
+++ b/app/docker/views/containers/console/containerConsoleController.js
@@ -183,8 +183,11 @@ angular.module('portainer.docker').controller('ContainerConsoleController', [
       socket.onopen = function () {
         $scope.state = states.connected;
         term = new Terminal();
+        socket.send('export LANG=C.UTF-8\n');
+        socket.send('export LC_ALL=C.UTF-8\n');
+        socket.send('clear\n');
 
-        term.on('data', function (data) {
+        term.onData(function (data) {
           socket.send(data);
         });
         var terminal_container = document.getElementById('terminal-container');
diff --git a/app/docker/views/containers/console/exec.html b/app/docker/views/containers/console/exec.html
index 4279c9654..c1ebf8951 100644
--- a/app/docker/views/containers/console/exec.html
+++ b/app/docker/views/containers/console/exec.html
@@ -69,9 +69,11 @@
             </div>
           </div>
           <div ng-if="state !== states.disconnected">
-            <label
-              >Exec into container as <code>{{ ::formValues.user || 'default user' }}</code> using command
-              <code>{{ formValues.isCustomCommand ? formValues.customCommand : formValues.command }}</code></label
+            <label class="control-label text-left"
+              >Exec &nbsp;into container as <code>{{ ::formValues.user || 'default user' }}</code> using command
+              <code>{{ formValues.isCustomCommand ? formValues.customCommand : formValues.command }}</code>
+              <terminal-tooltip> </terminal-tooltip>
+              ></label
             >
             <button type="button" class="btn btn-primary" ng-click="disconnect()">
               <span ng-show="state === states.connected">Disconnect</span>
diff --git a/app/portainer/react/components/index.ts b/app/portainer/react/components/index.ts
index b617d827e..3b8dcff1c 100644
--- a/app/portainer/react/components/index.ts
+++ b/app/portainer/react/components/index.ts
@@ -30,6 +30,7 @@ import { SearchBar } from '@@/datatables/SearchBar';
 import { FallbackImage } from '@@/FallbackImage';
 import { BadgeIcon } from '@@/BadgeIcon';
 import { TeamsSelector } from '@@/TeamsSelector';
+import { TerminalTooltip } from '@@/TerminalTooltip';
 import { PortainerSelect } from '@@/form-components/PortainerSelect';
 import { Slider } from '@@/form-components/Slider';
 import { TagButton } from '@@/TagButton';
@@ -84,6 +85,7 @@ export const ngModule = angular
     'portainerTooltip',
     r2a(Tooltip, ['message', 'position', 'className', 'setHtmlMessage', 'size'])
   )
+  .component('terminalTooltip', r2a(TerminalTooltip, []))
   .component('badge', r2a(Badge, ['type', 'className']))
   .component('fileUploadField', fileUploadField)
   .component('porSwitchField', switchField)
diff --git a/app/react/components/TerminalTooltip/TerminalTooltip.tsx b/app/react/components/TerminalTooltip/TerminalTooltip.tsx
new file mode 100644
index 000000000..33745cdc9
--- /dev/null
+++ b/app/react/components/TerminalTooltip/TerminalTooltip.tsx
@@ -0,0 +1,42 @@
+import { BROWSER_OS_PLATFORM } from '@/react/constants';
+
+import { Tooltip } from '@@/Tip/Tooltip';
+
+const editorConfig = {
+  mac: {
+    tooltip: (
+      <>
+        <div>Within the console:</div>
+        <div>Cmd+C - Copy</div>
+        <div>Cmd+V - Paste</div>
+        <div>or right-click -&gt; Copy/Paste</div>
+      </>
+    ),
+  },
+
+  lin: {
+    tooltip: (
+      <>
+        <div>Within the console:</div>
+        <div>Ctrl+Insert - Copy</div>
+        <div>Shift+Insert - Paste</div>
+        <div>or right-click -&gt; Copy/Paste</div>
+      </>
+    ),
+  },
+
+  win: {
+    tooltip: (
+      <>
+        <div>Within the console:</div>
+        <div>Ctrl+Insert - Copy</div>
+        <div>Shift+Insert - Paste</div>
+        <div>or right-click -&gt; Copy/Paste</div>
+      </>
+    ),
+  },
+} as const;
+
+export function TerminalTooltip() {
+  return <Tooltip message={editorConfig[BROWSER_OS_PLATFORM].tooltip} />;
+}
diff --git a/app/react/components/TerminalTooltip/index.ts b/app/react/components/TerminalTooltip/index.ts
new file mode 100644
index 000000000..e9a67ba04
--- /dev/null
+++ b/app/react/components/TerminalTooltip/index.ts
@@ -0,0 +1 @@
+export { TerminalTooltip } from './TerminalTooltip';
diff --git a/app/react/kubernetes/applications/ConsoleView/ConsoleView.tsx b/app/react/kubernetes/applications/ConsoleView/ConsoleView.tsx
index 17c3bf117..601a4a59a 100644
--- a/app/react/kubernetes/applications/ConsoleView/ConsoleView.tsx
+++ b/app/react/kubernetes/applications/ConsoleView/ConsoleView.tsx
@@ -5,6 +5,7 @@ import { Terminal } from 'xterm';
 
 import { baseHref } from '@/portainer/helpers/pathHelper';
 import { notifyError } from '@/portainer/services/notifications';
+import { TerminalTooltip } from '@/react/components/TerminalTooltip';
 
 import { PageHeader } from '@@/PageHeader';
 import { Widget, WidgetBody } from '@@/Widget';
@@ -74,6 +75,9 @@ export function ConsoleView() {
           terminal?.setOption('cursorBlink', true);
           terminal?.focus();
           setConnectionStatus('open');
+          socket.send('export LANG=C.UTF-8\n');
+          socket.send('export LC_ALL=C.UTF-8\n');
+          socket.send('clear\n');
         }
       };
 
@@ -93,7 +97,7 @@ export function ConsoleView() {
   }, [disconnectConsole, setConnectionStatus, socket, terminal]);
 
   useEffect(() => {
-    terminal?.on('data', (data) => {
+    terminal?.onData((data) => {
       socket?.send(data);
     });
   }, [terminal, socket]);
@@ -118,6 +122,7 @@ export function ConsoleView() {
                   className="col-sm-3 col-lg-2 control-label m-0 p-0 text-left"
                 >
                   Command
+                  <TerminalTooltip />
                 </label>
                 <div className="col-sm-8 input-group p-0">
                   <span className="input-group-addon">
diff --git a/app/react/sidebar/KubernetesSidebar/KubectlShell/KubectlShell.tsx b/app/react/sidebar/KubernetesSidebar/KubectlShell/KubectlShell.tsx
index c9a754c66..e713af0da 100644
--- a/app/react/sidebar/KubernetesSidebar/KubectlShell/KubectlShell.tsx
+++ b/app/react/sidebar/KubernetesSidebar/KubectlShell/KubectlShell.tsx
@@ -46,19 +46,27 @@ export function KubeCtlShell({ environmentId, onClose }: Props) {
     onClose();
   }, [onClose, terminal, socket]);
 
-  const openTerminal = useCallback(() => {
-    if (!terminalElem.current) {
-      return;
-    }
+  const openTerminal = useCallback(
+    (socket: WebSocket | null) => {
+      if (!terminalElem.current) {
+        return;
+      }
 
-    terminal.open(terminalElem.current);
-    terminal.setOption('cursorBlink', true);
-    terminal.focus();
-    fit(terminal);
-    terminal.writeln('#Run kubectl commands inside here');
-    terminal.writeln('#e.g. kubectl get all');
-    terminal.writeln('');
-  }, [terminal]);
+      terminal.open(terminalElem.current);
+      terminal.setOption('cursorBlink', true);
+      terminal.focus();
+      fit(terminal);
+      if (socket) {
+        socket.send('export LANG=C.UTF-8\n');
+        socket.send('export LC_ALL=C.UTF-8\n');
+        socket.send('clear\n');
+      }
+      terminal.writeln('#Run kubectl commands inside here');
+      terminal.writeln('#e.g. kubectl get all');
+      terminal.writeln('');
+    },
+    [terminal]
+  );
 
   // refresh socket listeners on socket updates
   useEffect(() => {
@@ -66,7 +74,7 @@ export function KubeCtlShell({ environmentId, onClose }: Props) {
       return () => {};
     }
     function onOpen() {
-      openTerminal();
+      openTerminal(socket);
     }
     function onMessage(e: MessageEvent) {
       terminal.write(e.data);