[MM-48184] Disallow edit/remove server if it is imported from GPO (#2353)

* Disallow edit/remove server if it is imported from GPO

* Fix width issue of team dropdown

src/renderer/css/dropdown.scss

@@ -1,6 +1,6 @@
 @import url("fonts.css");
 @import '~@mattermost/compass-icons/css/compass-icons.css';
-  
+
 body {
     margin: 0;
     background-color: transparent;
@@ -23,6 +23,7 @@ body {
     border: 1px solid rgba(61, 60, 64, 0.16);
     box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);
     border-radius: 4px;
+    min-width: 180px;
 }
 
 .TeamDropdown__droppable {
@@ -138,7 +139,7 @@ body {
 
         > i.icon-plus {
             margin-top: -2px;
-    
+
             &::before {
                 margin: 0;
             }
@@ -151,7 +152,7 @@ body {
     display: flex;
     overflow: hidden;
     margin-right: 36px;
-    
+
     &.dragging {
         cursor: grabbing !important;
     }
@@ -188,7 +189,7 @@ body {
     border-radius: 8px;
     flex: 0 0 8px;
 }
-  
+
 .TeamDropdown__badge-count {
     background: #F74343;
     text-align: center;
@@ -276,11 +277,11 @@ body {
         border-color: rgba(221, 221, 221, 0.08);
     }
 
-    .TeamDropdown__button {   
+    .TeamDropdown__button {
         &:not(.anyDragging):hover {
             background-color: rgba(221, 221, 221, 0.08);
         }
-    
+
         &:focus {
             background-color: rgba(1, 119, 231, 0.08);
         }
@@ -288,7 +289,7 @@ body {
         &:not(.active) i, i.icon-drag-vertical {
             color: rgba(221, 221, 221, 0.56);
         }
-    
+
         > .TeamDropdown__draggable-handle > span, &.addServer > span {
             color: #DDD;
         }

src/renderer/dropdown.tsx

@@ -7,7 +7,7 @@ import {FormattedMessage} from 'react-intl';
 import classNames from 'classnames';
 import {DragDropContext, Draggable, DraggingStyle, Droppable, DropResult, NotDraggingStyle} from 'react-beautiful-dnd';
 
-import {Team, TeamWithTabs} from 'types/config';
+import {Team, TeamWithTabs, TeamWithTabsAndGpo} from 'types/config';
 
 import {
     CLOSE_TEAMS_DROPDOWN,
@@ -27,8 +27,8 @@ import './css/dropdown.scss';
 import IntlProvider from './intl_provider';
 
 type State = {
-    teams?: TeamWithTabs[];
-    orderedTeams?: TeamWithTabs[];
+    teams?: TeamWithTabsAndGpo[];
+    orderedTeams?: TeamWithTabsAndGpo[];
     activeTeam?: string;
     darkMode?: boolean;
     enableServerManagement?: boolean;
@@ -212,22 +212,32 @@ class TeamDropdown extends React.PureComponent<Record<string, never>, State> {
         }
     }
 
-    editServer = (team: string) => {
+    editServer = (teamName: string) => {
+        if (this.teamIsGpo(teamName)) {
+            return () => {};
+        }
         return (event: React.MouseEvent<HTMLButtonElement>) => {
             event.stopPropagation();
-            window.postMessage({type: SHOW_EDIT_SERVER_MODAL, data: {name: team}}, window.location.href);
+            window.postMessage({type: SHOW_EDIT_SERVER_MODAL, data: {name: teamName}}, window.location.href);
             this.closeMenu();
         };
     }
 
-    removeServer = (team: string) => {
+    removeServer = (teamName: string) => {
+        if (this.teamIsGpo(teamName)) {
+            return () => {};
+        }
         return (event: React.MouseEvent<HTMLButtonElement>) => {
             event.stopPropagation();
-            window.postMessage({type: SHOW_REMOVE_SERVER_MODAL, data: {name: team}}, window.location.href);
+            window.postMessage({type: SHOW_REMOVE_SERVER_MODAL, data: {name: teamName}}, window.location.href);
             this.closeMenu();
         };
     }
 
+    teamIsGpo = (teamName: string) => {
+        return this.state.orderedTeams?.some((team) => team.name === teamName && team.isGpo);
+    }
+
     render() {
         return (
             <IntlProvider>
@@ -326,7 +336,7 @@ class TeamDropdown extends React.PureComponent<Record<string, never>, State> {
                                                             {this.isActiveTeam(team) ? <i className='icon-check'/> : <i className='icon-server-variant'/>}
                                                             <span>{team.name}</span>
                                                         </div>
-                                                        <div className='TeamDropdown__indicators'>
+                                                        {!team.isGpo && <div className='TeamDropdown__indicators'>
                                                             <button
                                                                 className='TeamDropdown__button-edit'
                                                                 onClick={this.editServer(team.name)}
@@ -342,7 +352,7 @@ class TeamDropdown extends React.PureComponent<Record<string, never>, State> {
                                                             {badgeDiv && <div className='TeamDropdown__badge'>
                                                                 {badgeDiv}
                                                             </div>}
-                                                        </div>
+                                                        </div>}
                                                     </button>
                                                 )}
                                             </Draggable>