Skip to content

Commit 426f954

Browse files
sawkasawka
authored
fix connection edit modal (#170)
* fix connection edit modal * apply prettier
1 parent d410e5d commit 426f954

3 files changed

Lines changed: 97 additions & 96 deletions

File tree

‎src/app/common/modals/modals.tsx‎

Lines changed: 77 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,19 @@ import dayjs from "dayjs";
1111
import localizedFormat from "dayjs/plugin/localizedFormat";
1212
import { GlobalModel, GlobalCommandRunner, RemotesModel } from "../../../model/model";
1313
import * as T from "../../../types/types";
14-
import { Markdown, Toggle, Modal, TextField, NumberField, InputDecoration, Dropdown, PasswordField, Tooltip, Button, Status } from "../common";
14+
import {
15+
Markdown,
16+
Toggle,
17+
Modal,
18+
TextField,
19+
NumberField,
20+
InputDecoration,
21+
Dropdown,
22+
PasswordField,
23+
Tooltip,
24+
Button,
25+
Status,
26+
} from "../common";
1527
import * as util from "../../../util/util";
1628
import * as textmeasure from "../../../util/textmeasure";
1729
import { ClientDataType } from "../../../types/types";
@@ -37,18 +49,18 @@ const PasswordUnchangedSentinel = "--unchanged--";
3749

3850
@mobxReact.observer
3951
class ModalsProvider extends React.Component {
40-
renderModals() {
41-
const modals = GlobalModel.modalsModel.activeModals;
42-
52+
render() {
53+
let store = GlobalModel.modalsModel.store.slice();
4354
if (GlobalModel.needsTos()) {
4455
return <TosModal />;
4556
}
46-
47-
return modals.map((ModalComponent, index) => <ModalComponent key={index} />);
48-
}
49-
50-
render() {
51-
return <>{this.renderModals()}</>;
57+
let rtn: JSX.Element[] = [];
58+
for (let i = 0; i < store.length; i++) {
59+
let entry = store[i];
60+
let Comp = entry.component;
61+
rtn.push(<Comp key={entry.uniqueKey} />);
62+
}
63+
return <>{rtn}</>;
5264
}
5365
}
5466

@@ -277,7 +289,11 @@ class TosModal extends React.Component<{}, {}> {
277289
</div>
278290
</div>
279291
<div className="item">
280-
<a target="_blank" href={util.makeExternLink("https://discord.gg/XfvZ334gwU")} rel={"noopener"}>
292+
<a
293+
target="_blank"
294+
href={util.makeExternLink("https://discord.gg/XfvZ334gwU")}
295+
rel={"noopener"}
296+
>
281297
<img src={help} alt="Help" />
282298
</a>
283299
<div className="item-inner">
@@ -286,7 +302,11 @@ class TosModal extends React.Component<{}, {}> {
286302
Get help, submit feature requests, report bugs, or just chat with fellow
287303
terminal enthusiasts.
288304
<br />
289-
<a target="_blank" href={util.makeExternLink("https://discord.gg/XfvZ334gwU")} rel={"noopener"}>
305+
<a
306+
target="_blank"
307+
href={util.makeExternLink("https://discord.gg/XfvZ334gwU")}
308+
rel={"noopener"}
309+
>
290310
Join the Wave&nbsp;Discord&nbsp;Channel
291311
</a>
292312
</div>
@@ -846,7 +866,7 @@ class ViewRemoteConnDetailModal extends React.Component<{}, {}> {
846866

847867
@boundMethod
848868
openEditModal(): void {
849-
GlobalModel.remotesModel.openEditModal();
869+
GlobalModel.remotesModel.startEditAuth();
850870
}
851871

852872
@boundMethod
@@ -959,7 +979,7 @@ class ViewRemoteConnDetailModal extends React.Component<{}, {}> {
959979
</Button>
960980
);
961981
if (remote.local) {
962-
installNowButton = <></>;
982+
installNowButton = <></>;
963983
updateAuthButton = <></>;
964984
cancelInstallButton = <></>;
965985
}
@@ -1115,74 +1135,47 @@ class ViewRemoteConnDetailModal extends React.Component<{}, {}> {
11151135

11161136
@mobxReact.observer
11171137
class EditRemoteConnModal extends React.Component<{}, {}> {
1118-
internalTempAlias: OV<string>;
1119-
internalTempKeyFile: OV<string>;
1120-
internalTempPassword: OV<string>;
1138+
tempAlias: OV<string>;
1139+
tempKeyFile: OV<string>;
1140+
tempPassword: OV<string>;
1141+
tempConnectMode: OV<string>;
1142+
tempAuthMode: OV<string>;
11211143
model: RemotesModel;
11221144

11231145
constructor(props: { remotesModel?: RemotesModel }) {
11241146
super(props);
11251147
this.model = GlobalModel.remotesModel;
1126-
this.internalTempAlias = mobx.observable.box(null, { name: "EditRemoteSettings-internalTempAlias" });
1127-
this.internalTempKeyFile = mobx.observable.box(null, { name: "EditRemoteSettings-internalTempKeyFile" });
1128-
this.internalTempPassword = mobx.observable.box(null, { name: "EditRemoteSettings-internalTempPassword" });
1148+
this.tempAlias = mobx.observable.box(null, { name: "EditRemoteSettings-tempAlias" });
1149+
this.tempAuthMode = mobx.observable.box(null, { name: "EditRemoteSettings-tempAuthMode" });
1150+
this.tempKeyFile = mobx.observable.box(null, { name: "EditRemoteSettings-tempKeyFile" });
1151+
this.tempPassword = mobx.observable.box(null, { name: "EditRemoteSettings-tempPassword" });
1152+
this.tempConnectMode = mobx.observable.box(null, { name: "EditRemoteSettings-tempConnectMode" });
11291153
}
11301154

1131-
@mobx.computed
11321155
get selectedRemoteId() {
11331156
return this.model.selectedRemoteId.get();
11341157
}
11351158

1136-
@mobx.computed
11371159
get selectedRemote(): T.RemoteType {
11381160
return GlobalModel.getRemote(this.selectedRemoteId);
11391161
}
11401162

1141-
@mobx.computed
11421163
get remoteEdit(): T.RemoteEditType {
11431164
return this.model.remoteEdit.get();
11441165
}
11451166

1146-
@mobx.computed
11471167
get isAuthEditMode(): boolean {
11481168
return this.model.isAuthEditMode();
11491169
}
11501170

1151-
@mobx.computed
1152-
get tempAuthMode(): mobx.IObservableValue<string> {
1153-
return mobx.observable.box(this.selectedRemote?.authtype, {
1154-
name: "EditRemoteConnModal-authMode",
1155-
});
1156-
}
1157-
1158-
@mobx.computed
1159-
get tempConnectMode(): mobx.IObservableValue<string> {
1160-
return mobx.observable.box(this.selectedRemote?.connectmode, {
1161-
name: "EditRemoteConnModal-connectMode",
1162-
});
1163-
}
1164-
1165-
@mobx.computed
1166-
get tempAlias(): mobx.IObservableValue<string> {
1167-
return mobx.observable.box(this.internalTempAlias.get() || this.selectedRemote.remotealias, {
1168-
name: "EditRemoteConnModal-alias",
1169-
});
1170-
}
1171-
1172-
@mobx.computed
1173-
get tempKeyFile(): mobx.IObservableValue<string> {
1174-
return mobx.observable.box(this.internalTempKeyFile.get() || this.remoteEdit?.keystr, {
1175-
name: "EditRemoteConnModal-keystr",
1176-
});
1177-
}
1178-
1179-
@mobx.computed
1180-
get tempPassword(): mobx.IObservableValue<string> {
1181-
const oldPassword = this.remoteEdit?.haspassword ? PasswordUnchangedSentinel : "";
1182-
const newPassword = this.internalTempPassword.get() || oldPassword;
1183-
return mobx.observable.box(newPassword, {
1184-
name: "EditRemoteConnModal-password",
1185-
});
1171+
componentDidMount(): void {
1172+
mobx.action(() => {
1173+
this.tempAlias.set(this.selectedRemote?.remotealias);
1174+
this.tempKeyFile.set(this.remoteEdit?.keystr);
1175+
this.tempPassword.set(this.remoteEdit?.haspassword ? PasswordUnchangedSentinel : "");
1176+
this.tempConnectMode.set(this.selectedRemote?.connectmode);
1177+
this.tempAuthMode.set(this.selectedRemote?.authtype);
1178+
})();
11861179
}
11871180

11881181
componentDidUpdate() {
@@ -1194,21 +1187,35 @@ class EditRemoteConnModal extends React.Component<{}, {}> {
11941187
@boundMethod
11951188
handleChangeKeyFile(value: string): void {
11961189
mobx.action(() => {
1197-
this.internalTempKeyFile.set(value);
1190+
this.tempKeyFile.set(value);
11981191
})();
11991192
}
12001193

12011194
@boundMethod
12021195
handleChangePassword(value: string): void {
12031196
mobx.action(() => {
1204-
this.internalTempPassword.set(value);
1197+
this.tempPassword.set(value);
12051198
})();
12061199
}
12071200

12081201
@boundMethod
12091202
handleChangeAlias(value: string): void {
12101203
mobx.action(() => {
1211-
this.internalTempAlias.set(value);
1204+
this.tempAlias.set(value);
1205+
})();
1206+
}
1207+
1208+
@boundMethod
1209+
handleChangeAuthMode(value: string): void {
1210+
mobx.action(() => {
1211+
this.tempAuthMode.set(value);
1212+
})();
1213+
}
1214+
1215+
@boundMethod
1216+
handleChangeConnectMode(value: string): void {
1217+
mobx.action(() => {
1218+
this.tempConnectMode.set(value);
12121219
})();
12131220
}
12141221

@@ -1238,10 +1245,13 @@ class EditRemoteConnModal extends React.Component<{}, {}> {
12381245
submitRemote(): void {
12391246
let authMode = this.tempAuthMode.get();
12401247
let kwargs: Record<string, string> = {};
1241-
if (!util.isStrEq(this.tempKeyFile.get(), this.remoteEdit?.keystr)) {
1242-
if (authMode == "key" || authMode == "key+password") {
1248+
if (authMode == "key" || authMode == "key+password") {
1249+
let keyStrEq = util.isStrEq(this.tempKeyFile.get(), this.remoteEdit?.keystr);
1250+
if (!keyStrEq) {
12431251
kwargs["key"] = this.tempKeyFile.get();
1244-
} else {
1252+
}
1253+
} else {
1254+
if (!util.isBlank(this.tempKeyFile.get())) {
12451255
kwargs["key"] = "";
12461256
}
12471257
}
@@ -1291,11 +1301,9 @@ class EditRemoteConnModal extends React.Component<{}, {}> {
12911301

12921302
render() {
12931303
let authMode = this.tempAuthMode.get();
1294-
12951304
if (this.remoteEdit === null || !this.isAuthEditMode) {
12961305
return null;
12971306
}
1298-
12991307
return (
13001308
<Modal className="erconn-modal">
13011309
<Modal.Header title="Edit Connection" onClose={this.model.closeModal} />
@@ -1333,9 +1341,7 @@ class EditRemoteConnModal extends React.Component<{}, {}> {
13331341
{ value: "key+password", label: "key+password" },
13341342
]}
13351343
value={this.tempAuthMode.get()}
1336-
onChange={(val: string) => {
1337-
this.tempAuthMode.set(val);
1338-
}}
1344+
onChange={this.handleChangeAuthMode}
13391345
decoration={{
13401346
endDecoration: (
13411347
<InputDecoration>
@@ -1406,9 +1412,7 @@ class EditRemoteConnModal extends React.Component<{}, {}> {
14061412
{ value: "manual", label: "manual" },
14071413
]}
14081414
value={this.tempConnectMode.get()}
1409-
onChange={(val: string) => {
1410-
this.tempConnectMode.set(val);
1411-
}}
1415+
onChange={this.handleChangeConnectMode}
14121416
/>
14131417
</div>
14141418
<If condition={!util.isBlank(this.remoteEdit?.errorstr)}>

‎src/model/model.ts‎

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
import type React from "react";
55
import * as mobx from "mobx";
66
import { sprintf } from "sprintf-js";
7+
import { v4 as uuidv4 } from "uuid";
78
import { boundMethod } from "autobind-decorator";
89
import { debounce } from "throttle-debounce";
910
import {
@@ -1892,7 +1893,7 @@ class ForwardLineContainer {
18921893
}
18931894

18941895
getMaxContentSize(): WindowSize {
1895-
let rtn = {width: this.winSize.width, height: this.winSize.height};
1896+
let rtn = { width: this.winSize.width, height: this.winSize.height };
18961897
rtn.width = rtn.width - MagicLayout.ScreenMaxContentWidthBuffer;
18971898
return rtn;
18981899
}
@@ -2946,16 +2947,11 @@ class RemotesModel {
29462947
}
29472948

29482949
openEditModal(redit?: RemoteEditType): void {
2949-
if (redit == null) {
2950-
this.startEditAuth();
2950+
mobx.action(() => {
2951+
this.selectedRemoteId.set(redit?.remoteid);
2952+
this.remoteEdit.set(redit);
29512953
GlobalModel.modalsModel.pushModal(appconst.EDIT_REMOTE);
2952-
} else {
2953-
mobx.action(() => {
2954-
this.selectedRemoteId.set(redit?.remoteid);
2955-
this.remoteEdit.set(redit);
2956-
GlobalModel.modalsModel.pushModal(appconst.EDIT_REMOTE);
2957-
})();
2958-
}
2954+
})();
29592955
}
29602956

29612957
selectRemote(remoteId: string): void {
@@ -3081,28 +3077,22 @@ class RemotesModel {
30813077
}
30823078

30833079
class ModalsModel {
3084-
store: Array<{ id: string; component: React.ComponentType }> = [];
3085-
3086-
constructor() {
3087-
mobx.makeAutoObservable(this);
3088-
}
3080+
store: OArr<T.ModalStoreEntry> = mobx.observable.array([], { name: "ModalsModel-store" });
30893081

30903082
pushModal(modalId: string) {
30913083
const modalFactory = modalsRegistry[modalId];
30923084

30933085
if (modalFactory && !this.store.some((modal) => modal.id === modalId)) {
3094-
this.store.push({ id: modalId, component: modalFactory });
3086+
mobx.action(() => {
3087+
this.store.push({ id: modalId, component: modalFactory, uniqueKey: uuidv4() });
3088+
})();
30953089
}
30963090
}
30973091

30983092
popModal() {
3099-
this.store.pop();
3100-
}
3101-
3102-
get activeModals() {
3103-
return this.store.slice().map((modal) => {
3104-
return modal.component;
3105-
});
3093+
mobx.action(() => {
3094+
this.store.pop();
3095+
})();
31063096
}
31073097
}
31083098

‎src/types/types.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -660,6 +660,12 @@ type ExtFile = File & {
660660
notFound: boolean;
661661
};
662662

663+
type ModalStoreEntry = {
664+
id: string;
665+
component: React.ComponentType;
666+
uniqueKey: string;
667+
};
668+
663669
export type {
664670
SessionDataType,
665671
LineStateType,
@@ -734,4 +740,5 @@ export type {
734740
ExtBlob,
735741
ExtFile,
736742
LineContainerStrs,
743+
ModalStoreEntry,
737744
};

0 commit comments

Comments
 (0)