Merge branch 'develop' into feature/react-admin

This commit is contained in:
Matthew Penner 2021-06-06 13:54:04 -06:00
commit 01c03b6b77
19 changed files with 614 additions and 274 deletions

View file

@ -1,9 +1,10 @@
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { ITerminalOptions, Terminal } from 'xterm';
import { Terminal, ITerminalOptions } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
import { SearchAddon } from 'xterm-addon-search';
import { SearchBarAddon } from 'xterm-addon-search-bar';
import { WebLinksAddon } from 'xterm-addon-web-links';
import { ScrollDownHelperAddon } from '@/plugins/XtermScrollDownHelperAddon';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { ServerContext } from '@/state/server';
import styled from 'styled-components/macro';
@ -73,6 +74,7 @@ export default () => {
const searchAddon = new SearchAddon();
const searchBar = new SearchBarAddon({ searchAddon });
const webLinksAddon = new WebLinksAddon();
const scrollDownHelperAddon = new ScrollDownHelperAddon();
const { connected, instance } = ServerContext.useStoreState(state => state.socket);
const [ canSendCommands ] = usePermissions([ 'control.console' ]);
const serverId = ServerContext.useStoreState(state => state.server.data!.id);
@ -140,6 +142,7 @@ export default () => {
terminal.loadAddon(searchAddon);
terminal.loadAddon(searchBar);
terminal.loadAddon(webLinksAddon);
terminal.loadAddon(scrollDownHelperAddon);
terminal.open(ref.current);
fitAddon.fit();
@ -201,7 +204,7 @@ export default () => {
return (
<div css={tw`text-xs font-mono relative`}>
<SpinnerOverlay visible={!connected} size={'large'}/>
<SpinnerOverlay visible={!connected} size={'large'} />
<div
css={[
tw`rounded-t p-2 bg-black w-full`,
@ -209,21 +212,21 @@ export default () => {
]}
style={{ minHeight: '16rem' }}
>
<TerminalDiv id={'terminal'} ref={ref}/>
<TerminalDiv id={'terminal'} ref={ref} />
</div>
{canSendCommands &&
<div css={tw`rounded-b bg-neutral-900 text-neutral-100 flex items-baseline`}>
<div css={tw`flex-shrink-0 p-2 font-bold`}>$</div>
<div css={tw`w-full`}>
<CommandInput
type={'text'}
placeholder={'Type a command...'}
aria-label={'Console command input.'}
disabled={!instance || !connected}
onKeyDown={handleCommandKeyDown}
/>
<div css={tw`rounded-b bg-neutral-900 text-neutral-100 flex items-baseline`}>
<div css={tw`flex-shrink-0 p-2 font-bold`}>$</div>
<div css={tw`w-full`}>
<CommandInput
type={'text'}
placeholder={'Type a command...'}
aria-label={'Console command input.'}
disabled={!instance || !connected}
onKeyDown={handleCommandKeyDown}
/>
</div>
</div>
</div>
}
</div>
);