Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-05 05:45:22 +02:00
Code Issues Releases Activity

fix(terminal): display os specific copy/paste tooltip EE-1976 (#10835)

Browse source
This commit is contained in:
Dakota Walsh 2024-01-24 09:45:40 +13:00 • committed by GitHub
parent fc7d9ca2cd
commit fe47318e26
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 81 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

42
app/react/components/TerminalTooltip/TerminalTooltip.tsx Normal file
View file

@ -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} />;
}

1
app/react/components/TerminalTooltip/index.ts Normal file
View file

@ -0,0 +1 @@
export { TerminalTooltip } from './TerminalTooltip';

7
app/react/kubernetes/applications/ConsoleView/ConsoleView.tsx
View file

@ -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">

34
app/react/sidebar/KubernetesSidebar/KubectlShell/KubectlShell.tsx
View file

@ -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);