From 0652f7ff80450aa72d6ca04af8f28aaba783adf7 Mon Sep 17 00:00:00 2001
From: Devin Binnie <52460000+devinbinnie@users.noreply.github.com>
Date: Thu, 24 Oct 2024 13:12:53 -0400
Subject: [PATCH] [MM-61144][MM-60704] Show badges and allow Edit Server modal
 for permissions for pre-defined servers (#3175)

---
 src/app/serverViewState.ts                 |   4 +-
 src/renderer/components/NewServerModal.tsx | 176 +++++++++++----------
 src/renderer/dropdown.tsx                  |  21 ++-
 3 files changed, 107 insertions(+), 94 deletions(-)

diff --git a/src/app/serverViewState.ts b/src/app/serverViewState.ts
index 18e3d2f5..f0b52f9b 100644
--- a/src/app/serverViewState.ts
+++ b/src/app/serverViewState.ts
@@ -171,7 +171,9 @@ export class ServerViewState {
             mainWindow);
 
         modalPromise.then((data) => {
-            ServerManager.editServer(id, data.server);
+            if (!server.isPredefined) {
+                ServerManager.editServer(id, data.server);
+            }
             PermissionsManager.setForServer(server, data.permissions);
         }).catch((e) => {
             // e is undefined for user cancellation
diff --git a/src/renderer/components/NewServerModal.tsx b/src/renderer/components/NewServerModal.tsx
index 67ff0d20..d39e6e4d 100644
--- a/src/renderer/components/NewServerModal.tsx
+++ b/src/renderer/components/NewServerModal.tsx
@@ -313,23 +313,31 @@ class NewServerModal extends React.PureComponent<Props, State> {
     };
 
     save = () => {
-        if (!this.state.validationResult) {
-            return;
-        }
+        if (this.props.editMode && this.props.server?.isPredefined) {
+            this.setState({
+                saveStarted: true,
+            }, () => {
+                this.props.onSave?.(this.props.server!, this.state.permissions);
+            });
+        } else {
+            if (!this.state.validationResult) {
+                return;
+            }
 
-        if (this.isServerURLErrored()) {
-            return;
-        }
+            if (this.isServerURLErrored()) {
+                return;
+            }
 
-        this.setState({
-            saveStarted: true,
-        }, () => {
-            this.props.onSave?.({
-                url: this.state.serverUrl,
-                name: this.state.serverName,
-                id: this.state.serverId,
-            }, this.state.permissions);
-        });
+            this.setState({
+                saveStarted: true,
+            }, () => {
+                this.props.onSave?.({
+                    url: this.state.serverUrl,
+                    name: this.state.serverName,
+                    id: this.state.serverId,
+                }, this.state.permissions);
+            });
+        }
     };
 
     getSaveButtonLabel() {
@@ -413,73 +421,77 @@ class NewServerModal extends React.PureComponent<Props, State> {
                 </Modal.Header>
 
                 <Modal.Body>
-                    <form>
-                        <FormGroup>
-                            <FormLabel>
-                                <FormattedMessage
-                                    id='renderer.components.newServerModal.serverURL'
-                                    defaultMessage='Server URL'
-                                />
-                            </FormLabel>
-                            <FormControl
-                                id='serverUrlInput'
-                                type='text'
-                                value={this.state.serverUrl}
-                                placeholder='https://example.com'
-                                onChange={this.handleServerUrlChange}
-                                onClick={(e: React.MouseEvent<HTMLInputElement>) => {
-                                    e.stopPropagation();
-                                }}
-                                ref={(ref: HTMLInputElement) => {
-                                    this.serverUrlInputRef = ref;
-                                    if (this.props.setInputRef) {
-                                        this.props.setInputRef(ref);
-                                    }
-                                }}
-                                isInvalid={this.isServerURLErrored()}
-                                autoFocus={true}
-                            />
-                            <FormControl.Feedback/>
-                            <FormText>
-                                <FormattedMessage
-                                    id='renderer.components.newServerModal.serverURL.description'
-                                    defaultMessage='The URL of your Mattermost server. Must start with http:// or https://.'
-                                />
-                            </FormText>
-                        </FormGroup>
-                        <FormGroup className='NewServerModal-noBottomSpace'>
-                            <FormLabel>
-                                <FormattedMessage
-                                    id='renderer.components.newServerModal.serverDisplayName'
-                                    defaultMessage='Server Display Name'
-                                />
-                            </FormLabel>
-                            <FormControl
-                                id='serverNameInput'
-                                type='text'
-                                value={this.state.serverName}
-                                placeholder={this.props.intl.formatMessage({id: 'renderer.components.newServerModal.serverDisplayName', defaultMessage: 'Server Display Name'})}
-                                onChange={this.handleServerNameChange}
-                                onClick={(e: React.MouseEvent<HTMLInputElement>) => {
-                                    e.stopPropagation();
-                                }}
-                                isInvalid={!this.state.serverName.length}
-                            />
-                            <FormControl.Feedback/>
-                            <FormText className='NewServerModal-noBottomSpace'>
-                                <FormattedMessage
-                                    id='renderer.components.newServerModal.serverDisplayName.description'
-                                    defaultMessage='The name of the server displayed on your desktop app tab bar.'
-                                />
-                            </FormText>
-                        </FormGroup>
-                    </form>
-                    <div
-                        className='NewServerModal-validation'
-                    >
-                        {this.getServerNameMessage()}
-                        {this.getServerURLMessage()}
-                    </div>
+                    {!(this.props.editMode && this.props.server?.isPredefined) &&
+                        <>
+                            <form>
+                                <FormGroup>
+                                    <FormLabel>
+                                        <FormattedMessage
+                                            id='renderer.components.newServerModal.serverURL'
+                                            defaultMessage='Server URL'
+                                        />
+                                    </FormLabel>
+                                    <FormControl
+                                        id='serverUrlInput'
+                                        type='text'
+                                        value={this.state.serverUrl}
+                                        placeholder='https://example.com'
+                                        onChange={this.handleServerUrlChange}
+                                        onClick={(e: React.MouseEvent<HTMLInputElement>) => {
+                                            e.stopPropagation();
+                                        }}
+                                        ref={(ref: HTMLInputElement) => {
+                                            this.serverUrlInputRef = ref;
+                                            if (this.props.setInputRef) {
+                                                this.props.setInputRef(ref);
+                                            }
+                                        }}
+                                        isInvalid={this.isServerURLErrored()}
+                                        autoFocus={true}
+                                    />
+                                    <FormControl.Feedback/>
+                                    <FormText>
+                                        <FormattedMessage
+                                            id='renderer.components.newServerModal.serverURL.description'
+                                            defaultMessage='The URL of your Mattermost server. Must start with http:// or https://.'
+                                        />
+                                    </FormText>
+                                </FormGroup>
+                                <FormGroup className='NewServerModal-noBottomSpace'>
+                                    <FormLabel>
+                                        <FormattedMessage
+                                            id='renderer.components.newServerModal.serverDisplayName'
+                                            defaultMessage='Server Display Name'
+                                        />
+                                    </FormLabel>
+                                    <FormControl
+                                        id='serverNameInput'
+                                        type='text'
+                                        value={this.state.serverName}
+                                        placeholder={this.props.intl.formatMessage({id: 'renderer.components.newServerModal.serverDisplayName', defaultMessage: 'Server Display Name'})}
+                                        onChange={this.handleServerNameChange}
+                                        onClick={(e: React.MouseEvent<HTMLInputElement>) => {
+                                            e.stopPropagation();
+                                        }}
+                                        isInvalid={!this.state.serverName.length}
+                                    />
+                                    <FormControl.Feedback/>
+                                    <FormText className='NewServerModal-noBottomSpace'>
+                                        <FormattedMessage
+                                            id='renderer.components.newServerModal.serverDisplayName.description'
+                                            defaultMessage='The name of the server displayed on your desktop app tab bar.'
+                                        />
+                                    </FormText>
+                                </FormGroup>
+                            </form>
+                            <div
+                                className='NewServerModal-validation'
+                            >
+                                {this.getServerNameMessage()}
+                                {this.getServerURLMessage()}
+                            </div>
+                        </>
+                    }
                     {this.props.editMode &&
                         <>
                             <hr/>
diff --git a/src/renderer/dropdown.tsx b/src/renderer/dropdown.tsx
index b85b1966..b1d0c3e7 100644
--- a/src/renderer/dropdown.tsx
+++ b/src/renderer/dropdown.tsx
@@ -209,9 +209,6 @@ class ServerDropdown extends React.PureComponent<Record<string, never>, State> {
     };
 
     editServer = (serverId: string) => {
-        if (this.serverIsPredefined(serverId)) {
-            return () => {};
-        }
         return (event: React.MouseEvent<HTMLButtonElement>) => {
             event.stopPropagation();
             window.desktop.serverDropdown.showEditServerModal(serverId);
@@ -333,23 +330,25 @@ class ServerDropdown extends React.PureComponent<Record<string, never>, State> {
                                                             {this.isActiveServer(server) ? <i className='icon-check'/> : <i className='icon-server-variant'/>}
                                                             <span>{server.name}</span>
                                                         </div>
-                                                        {!server.isPredefined && <div className='ServerDropdown__indicators'>
+                                                        <div className='ServerDropdown__indicators'>
                                                             <button
                                                                 className='ServerDropdown__button-edit'
                                                                 onClick={this.editServer(server.id!)}
                                                             >
                                                                 <i className='icon-pencil-outline'/>
                                                             </button>
-                                                            <button
-                                                                className='ServerDropdown__button-remove'
-                                                                onClick={this.removeServer(server.id!)}
-                                                            >
-                                                                <i className='icon-trash-can-outline'/>
-                                                            </button>
+                                                            {!server.isPredefined &&
+                                                                <button
+                                                                    className='ServerDropdown__button-remove'
+                                                                    onClick={this.removeServer(server.id!)}
+                                                                >
+                                                                    <i className='icon-trash-can-outline'/>
+                                                                </button>
+                                                            }
                                                             {badgeDiv && <div className='ServerDropdown__badge'>
                                                                 {badgeDiv}
                                                             </div>}
-                                                        </div>}
+                                                        </div>
                                                     </button>
                                                 )}
                                             </Draggable>