Skip to content

Commit ae64118

Browse files
mvollmermvollmer
committed
WIP - alternate^2 "VNC settings" editing
With a button in the popover.
1 parent 2a68d2a commit ae64118

File tree

3 files changed

+49
-37
lines changed

3 files changed

+49
-37
lines changed

‎src/components/vm/consoles/common.jsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,14 @@
2020
import React from 'react';
2121
import cockpit from 'cockpit';
2222

23+
import { Button } from "@patternfly/react-core/dist/esm/components/Button";
2324
import { Text, TextContent, TextVariants, TextList, TextListItem, TextListItemVariants, TextListVariants } from "@patternfly/react-core/dist/esm/components/Text";
2425
import { ClipboardCopy } from "@patternfly/react-core/dist/esm/components/ClipboardCopy/index.js";
2526
import { fmt_to_fragments } from 'utils.jsx';
2627

2728
const _ = cockpit.gettext;
2829

29-
export const RemoteConnectionInfo = ({ url }) => {
30+
export const RemoteConnectionInfo = ({ hide, url, onEdit }) => {
3031
function TLI(term, description) {
3132
// What is this? Java?
3233
return (
@@ -65,12 +66,17 @@ export const RemoteConnectionInfo = ({ url }) => {
6566
hoverTip={_("Copy to clipboard")}
6667
clickTip={_("Successfully copied to clipboard!")}
6768
variant="inline-compact"
68-
isCode
6969
>
7070
{url}
7171
</ClipboardCopy>
72+
<Text component={TextVariants.p} />
7273
</>
7374
}
75+
{ onEdit &&
76+
<Button isInline variant="link" onClick={() => { hide(); onEdit() }}>
77+
{_("Set port and password")}
78+
</Button>
79+
}
7480
</TextContent>
7581
);
7682
};

‎src/components/vm/consoles/spice.jsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,6 @@ const SpiceFooter = ({ onLaunch, connectionAddress, spice }) => {
3737
return (
3838
<div className="vm-console-footer">
3939
<Split>
40-
<SplitItem isFilled>
41-
<span><b>SPICE</b> {connectionAddress}{ spice ? ":" + spice.port : ""}</span>
42-
</SplitItem>
4340
<SplitItem>
4441
<Button
4542
variant="secondary"

‎src/components/vm/consoles/vnc.jsx

Lines changed: 41 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,11 @@ import { Form, FormGroup, FormHelperText } from "@patternfly/react-core/dist/esm
2828
import { HelperText, HelperTextItem } from "@patternfly/react-core/dist/esm/components/HelperText";
2929
import { TextInput } from "@patternfly/react-core/dist/esm/components/TextInput";
3030
import { InputGroup } from "@patternfly/react-core/dist/esm/components/InputGroup";
31-
import { PencilAltIcon, EyeIcon, EyeSlashIcon, CheckIcon, TimesIcon, PendingIcon, HelpIcon } from "@patternfly/react-icons";
32-
import { Spinner } from "@patternfly/react-core/dist/esm/components/Spinner";
31+
import { EyeIcon, EyeSlashIcon, PendingIcon, HelpIcon } from "@patternfly/react-icons";
3332

3433
import {
3534
EmptyState, EmptyStateHeader, EmptyStateIcon, EmptyStateBody, EmptyStateFooter, EmptyStateActions
3635
} from "@patternfly/react-core/dist/esm/components/EmptyState";
37-
import {
38-
Text, TextVariants,
39-
} from "@patternfly/react-core/dist/esm/components/Text";
4036
import { Split, SplitItem } from "@patternfly/react-core/dist/esm/layouts/Split/index.js";
4137

4238
import { KebabDropdown } from 'cockpit-components-dropdown.jsx';
@@ -79,23 +75,31 @@ const VncEditModal = ({ vm, inactive_vnc }) => {
7975
const config_password = inactive_vnc.password || "";
8076

8177
const Dialogs = useDialogs();
82-
const [editing, setEditing] = useState(false);
83-
const [applyInProgress, setApplyInProgress] = useState(false);
8478
const [port, setPort] = useState(config_port);
8579
const [password, setPassword] = useState(config_password);
8680
const [showPassword, setShowPassword] = useState(false);
8781
const [portError, setPortError] = useState(null);
82+
const [passwordError, setPasswordError] = useState(null);
8883
const [applyError, setApplyError] = useState(null);
89-
const [applyErrorDetails, setApplyErrorDetails] = useState(null);
84+
const [applyErrorDetail, setApplyErrorDetail] = useState(null);
9085

9186
async function apply() {
87+
let field_errors = 0;
9288
if (port != "" && (!port.match("^[0-9]+$") || Number(port) < 5900)) {
9389
setPortError(_("Port must be 5900 or larger."));
94-
return;
90+
field_errors += 1;
9591
}
9692

93+
if (password.length > 8) {
94+
setPasswordError(_("Password must be 8 characters or less."));
95+
field_errors += 1;
96+
}
97+
98+
if (field_errors > 0)
99+
return;
100+
97101
setPortError(null);
98-
setApplyInProgress(true);
102+
setPasswordError(null);
99103

100104
const vncParams = {
101105
listen: inactive_vnc.address || "",
@@ -111,8 +115,6 @@ const VncEditModal = ({ vm, inactive_vnc }) => {
111115
setApplyError(_("VNC settings could not be saved"));
112116
setApplyErrorDetail(ex.message);
113117
}
114-
115-
setApplyInProgress(false);
116118
}
117119

118120
return (
@@ -124,14 +126,19 @@ const VncEditModal = ({ vm, inactive_vnc }) => {
124126
isOpen
125127
onClose={Dialogs.close}
126128
footer={
127-
<>
128-
<Button isDisabled={!!portError} id="vnc-edit-save" variant='primary' onClick={apply}>
129-
{_("Save")}
130-
</Button>
131-
<Button id="vnc-edit-cancel" variant='link' onClick={Dialogs.close}>
132-
{_("Cancel")}
133-
</Button>
134-
</>
129+
<>
130+
<Button
131+
id="vnc-edit-save"
132+
isDisabled={!!(portError || passwordError)}
133+
variant='primary'
134+
onClick={apply}
135+
>
136+
{_("Save")}
137+
</Button>
138+
<Button id="vnc-edit-cancel" variant='link' onClick={Dialogs.close}>
139+
{_("Cancel")}
140+
</Button>
141+
</>
135142
}
136143
>
137144
{ vm.state === 'running' && !applyError &&
@@ -162,13 +169,20 @@ const VncEditModal = ({ vm, inactive_vnc }) => {
162169
<TextInput
163170
type={showPassword ? "text" : "password"}
164171
value={password}
165-
onChange={(_ev, val) => setPassword(val)} />
172+
onChange={(_ev, val) => { setPasswordError(null); setPassword(val) }} />
166173
<Button
167174
variant="control"
168175
onClick={() => setShowPassword(!showPassword)}>
169176
{ showPassword ? <EyeSlashIcon /> : <EyeIcon /> }
170177
</Button>
171178
</InputGroup>
179+
{ passwordError &&
180+
<FormHelperText>
181+
<HelperText>
182+
<HelperTextItem variant='error'>{passwordError}</HelperTextItem>
183+
</HelperText>
184+
</FormHelperText>
185+
}
172186
</FormGroup>
173187
</Form>
174188
</Modal>
@@ -224,15 +238,6 @@ const VncFooter = ({ vm, vnc, inactive_vnc, connected, connectionAddress, onLaun
224238
<div className="vm-console-footer">
225239
<Split>
226240
<SplitItem isFilled>
227-
<span><b>VNC</b> {connectionAddress}{ vnc ? ":" + vnc.port : ""}</span>
228-
<Button
229-
variant="link"
230-
onClick={() => Dialogs.show(<VncEditModal vm={vm} inactive_vnc={inactive_vnc} />)}
231-
>
232-
{_("edit")}
233-
</Button>
234-
</SplitItem>
235-
<SplitItem>
236241
<Button
237242
variant="secondary"
238243
onClick={onLaunch}
@@ -244,15 +249,19 @@ const VncFooter = ({ vm, vnc, inactive_vnc, connected, connectionAddress, onLaun
244249
className="ct-remote-viewer-popover"
245250
headerContent={_("Remote viewer")}
246251
hasAutoWidth
247-
bodyContent={
252+
bodyContent={(hide) =>
248253
<RemoteConnectionInfo
249-
url={vnc && cockpit.format("vnc://$0:$1", connectionAddress, vnc.port)} />
254+
hide={hide}
255+
url={vnc && cockpit.format("vnc://$0:$1", connectionAddress, vnc.port)}
256+
onEdit={() => Dialogs.show(<VncEditModal vm={vm} inactive_vnc={inactive_vnc} />)} />
250257
}
251258
>
252259
<Button variant="plain">
253260
<HelpIcon />
254261
</Button>
255262
</Popover>
263+
</SplitItem>
264+
<SplitItem>
256265
<KebabDropdown
257266
toggleButtonId="vnc-actions"
258267
position='right'

0 commit comments

Comments
 (0)