jeirmeister/Cockatrice
1
0
Fork 0
mirror of https://github.com/Cockatrice/Cockatrice.git synced 2026-04-27 07:48:01 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

test connection UI (#4596)

Browse source 
* test connection UI

* cleanup

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>
This commit is contained in:
Jeremy Letto 2022-03-19 19:22:00 -05:00 • committed by GitHub
parent 00a2a8ab71
commit 0ff59e6d1e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 169 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

30
webclient/src/components/KnownHosts/KnownHosts.css
View file

@ -1,8 +1,23 @@
.KnownHosts {
}
.KnownHosts-form {
width: 100%;
position: relative;
}
.KnownHosts-item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.KnownHosts-item__wrapper {
display: flex;
align-items: center;
}
.KnownHosts-item__label {
position: relative;
}
@ -16,6 +31,16 @@
font-size: .9em;
}
.KnownHosts-item__status {
display: none;
}
.KnownHosts-item__status svg {
display: none;
margin-left: -5px;
margin-right: 5px;
}
.KnownHosts-validation {
position: absolute;
top: 0;
@ -33,6 +58,11 @@
margin-left: 4px;
}
.KnownHosts .MuiSelect-selectMenu .KnownHosts-item__status,
.KnownHosts .MuiSelect-selectMenu .KnownHosts-item__status svg {
display: block;
}
.Mui-selected .KnownHosts-item__label svg {
display: block;
}

96
webclient/src/components/KnownHosts/KnownHosts.tsx
View file

@ -4,6 +4,8 @@ import { Select, MenuItem } from '@material-ui/core';
import Button from '@material-ui/core/Button';
import FormControl from '@material-ui/core/FormControl';
import IconButton from '@material-ui/core/IconButton';
import WifiTetheringIcon from '@material-ui/icons/WifiTethering';
import PortableWifiOffIcon from '@material-ui/icons/PortableWifiOff';
import InputLabel from '@material-ui/core/InputLabel';
import { makeStyles } from '@material-ui/core/styles';
import Check from '@material-ui/icons/Check';
@ -11,13 +13,22 @@ import AddIcon from '@material-ui/icons/Add';
import EditRoundedIcon from '@material-ui/icons/Edit';
import ErrorOutlinedIcon from '@material-ui/icons/ErrorOutlined';
import { AuthenticationService } from 'api';
import { KnownHostDialog } from 'dialogs';
import { useReduxEffect } from 'hooks';
import { HostDTO } from 'services';
import { ServerTypes } from 'store';
import { DefaultHosts, Host, getHostPort } from 'types';
import Toast from 'components/Toast/Toast';
import './KnownHosts.css';
enum TestConnection {
TESTING = 'testing',
FAILED = 'failed',
SUCCESS = 'success',
}
const useStyles = makeStyles(theme => ({
root: {
'& .KnownHosts-error': {
@ -26,6 +37,18 @@ const useStyles = makeStyles(theme => ({
'& .KnownHosts-warning': {
color: theme.palette.warning.main
},
'& .KnownHosts-item': {
[`& .${TestConnection.TESTING}`]: {
color: theme.palette.warning.main
},
[`& .${TestConnection.FAILED}`]: {
color: theme.palette.error.main
},
[`& .${TestConnection.SUCCESS}`]: {
color: theme.palette.success.main
}
}
},
}));
@ -46,9 +69,11 @@ const KnownHosts = (props) => {
edit: null,
});
const [showCreateToast, setShowCreateToast] = useState(false)
const [showDeleteToast, setShowDeleteToast] = useState(false)
const [showEditToast, setShowEditToast] = useState(false)
const [testingConnection, setTestingConnection] = useState<TestConnection>(null);
const [showCreateToast, setShowCreateToast] = useState(false);
const [showDeleteToast, setShowDeleteToast] = useState(false);
const [showEditToast, setShowEditToast] = useState(false);
const loadKnownHosts = useCallback(async () => {
const hosts = await HostDTO.getAll();
@ -77,6 +102,14 @@ const KnownHosts = (props) => {
}
}, [hostsState, onChange]);
useReduxEffect(() => {
setTestingConnection(TestConnection.SUCCESS);
}, ServerTypes.TEST_CONNECTION_SUCCESSFUL, []);
useReduxEffect(() => {
setTestingConnection(TestConnection.FAILED);
}, ServerTypes.TEST_CONNECTION_FAILED, []);
const selectHost = (selectedHost) => {
setHostsState(s => ({ ...s, selectedHost }));
};
@ -135,6 +168,8 @@ const KnownHosts = (props) => {
};
const updateLastSelectedHost = (hostId): Promise<any[]> => {
testConnection();
return HostDTO.getAll().then(hosts =>
hosts.map(async host => {
if (host.id === hostId) {
@ -152,20 +187,27 @@ const KnownHosts = (props) => {
);
};
const testConnection = () => {
setTestingConnection(TestConnection.TESTING);
const options = { ...getHostPort(hostsState.selectedHost) };
AuthenticationService.testConnection(options);
}
return (
<div>
<FormControl variant='outlined' className={'KnownHosts ' + classes.root}>
<div className={'KnownHosts ' + classes.root}>
<FormControl variant='outlined' className='KnownHosts-form'>
{ touched && (
<div className="KnownHosts-validation">
<div className='KnownHosts-validation'>
{
(error &&
<div className="KnownHosts-error">
<div className='KnownHosts-error'>
{error}
<ErrorOutlinedIcon style={{ fontSize: 'small', fontWeight: 'bold' }} />
</div>
) ||
(warning && <div className="KnownHosts-warning">{warning}</div>)
(warning && <div className='KnownHosts-warning'>{warning}</div>)
}
</div>
) }
@ -189,19 +231,33 @@ const KnownHosts = (props) => {
{
hostsState.hosts.map((host, index) => (
<MenuItem className='KnownHosts-item' value={host} key={index}>
<div className='KnownHosts-item__label'>
<Check />
<span>{host.name} ({ getHostPort(hostsState.hosts[index]).host }:{getHostPort(hostsState.hosts[index]).port})</span>
</div>
<MenuItem value={host} key={index}>
<div className='KnownHosts-item'>
<div className='KnownHosts-item__wrapper'>
<div className='KnownHosts-item__status'>
<div className={testingConnection}>
{
testingConnection === TestConnection.FAILED
? <PortableWifiOffIcon fontSize="small" />
: <WifiTetheringIcon fontSize="small" />
}
</div>
</div>
{ host.editable && (
<IconButton className='KnownHosts-item__edit' size='small' color='primary' onClick={(e) => {
openEditKnownHostDialog(hostsState.hosts[index]);
}}>
<EditRoundedIcon fontSize='small' />
</IconButton>
) }
<div className='KnownHosts-item__label'>
<Check />
<span>{host.name} ({ getHostPort(hostsState.hosts[index]).host }:{getHostPort(hostsState.hosts[index]).port})</span>
</div>
</div>
{ host.editable && (
<IconButton className='KnownHosts-item__edit' size='small' color='primary' onClick={(e) => {
openEditKnownHostDialog(hostsState.hosts[index]);
}}>
<EditRoundedIcon fontSize='small' />
</IconButton>
) }
</div>
</MenuItem>
))
}