Reverse order of inputs in Server modals (add/edit)

mattermost · Oct 21, 2022 · f3d577d · f3d577d
1 parent dc49003
commit f3d577d
Showing 1 changed file with 25 additions and 29 deletions.
diff --git a/src/renderer/components/NewTeamModal.tsx b/src/renderer/components/NewTeamModal.tsx
@@ -20,7 +20,6 @@ type Props = {
     show?: boolean;
     restoreFocus?: boolean;
     currentOrder?: number;
-    setInputRef?: (inputRef: HTMLInputElement) => void;
     intl: IntlShape;
 };
 
@@ -34,7 +33,7 @@ type State = {
 
 class NewTeamModal extends React.PureComponent<Props, State> {
     wasShown?: boolean;
-    teamUrlInputRef?: HTMLInputElement;
+    teamNameInputRef?: HTMLInputElement;
 
     static defaultProps = {
         restoreFocus: true,
@@ -262,7 +261,7 @@ class NewTeamModal extends React.PureComponent<Props, State> {
                 show={this.props.show}
                 id='newServerModal'
                 enforceFocus={true}
-                onEntered={() => this.teamUrlInputRef?.focus()}
+                onEntered={() => this.teamNameInputRef?.focus()}
                 onHide={this.props.onClose}
                 restoreFocus={this.props.restoreFocus}
                 onKeyDown={(e: React.KeyboardEvent) => {
@@ -286,62 +285,59 @@ class NewTeamModal extends React.PureComponent<Props, State> {
 
                 <Modal.Body>
                     <form>
-                        <FormGroup>
+                        <FormGroup className='NewTeamModal-noBottomSpace'>
                             <FormLabel>
                                 <FormattedMessage
-                                    id='renderer.components.newTeamModal.serverURL'
-                                    defaultMessage='Server URL'
+                                    id='renderer.components.newTeamModal.serverDisplayName'
+                                    defaultMessage='Server Display Name'
                                 />
                             </FormLabel>
                             <FormControl
-                                id='teamUrlInput'
+                                id='teamNameInput'
                                 type='text'
-                                value={this.state.teamUrl}
-                                placeholder='https://example.com'
-                                onChange={this.handleTeamUrlChange}
+                                value={this.state.teamName}
+                                placeholder={this.props.intl.formatMessage({id: 'renderer.components.newTeamModal.serverDisplayName', defaultMessage: 'Server Display Name'})}
+                                onChange={this.handleTeamNameChange}
                                 onClick={(e: React.MouseEvent<HTMLInputElement>) => {
                                     e.stopPropagation();
                                 }}
                                 ref={(ref: HTMLInputElement) => {
-                                    this.teamUrlInputRef = ref;
-                                    if (this.props.setInputRef) {
-                                        this.props.setInputRef(ref);
-                                    }
+                                    this.teamNameInputRef = ref;
                                 }}
-                                isInvalid={Boolean(this.getTeamUrlValidationState())}
+                                isInvalid={Boolean(this.getTeamNameValidationState())}
                                 autoFocus={true}
                             />
                             <FormControl.Feedback/>
-                            <FormText>
+                            <FormText className='NewTeamModal-noBottomSpace'>
                                 <FormattedMessage
-                                    id='renderer.components.newTeamModal.serverURL.description'
-                                    defaultMessage='The URL of your Mattermost server. Must start with http:// or https://.'
+                                    id='renderer.components.newTeamModal.serverDisplayName.description'
+                                    defaultMessage='The name of the server displayed on your desktop app tab bar.'
                                 />
                             </FormText>
                         </FormGroup>
-                        <FormGroup className='NewTeamModal-noBottomSpace'>
+                        <FormGroup>
                             <FormLabel>
                                 <FormattedMessage
-                                    id='renderer.components.newTeamModal.serverDisplayName'
-                                    defaultMessage='Server Display Name'
+                                    id='renderer.components.newTeamModal.serverURL'
+                                    defaultMessage='Server URL'
                                 />
                             </FormLabel>
                             <FormControl
-                                id='teamNameInput'
+                                id='teamUrlInput'
                                 type='text'
-                                value={this.state.teamName}
-                                placeholder={this.props.intl.formatMessage({id: 'renderer.components.newTeamModal.serverDisplayName', defaultMessage: 'Server Display Name'})}
-                                onChange={this.handleTeamNameChange}
+                                value={this.state.teamUrl}
+                                placeholder='https://example.com'
+                                onChange={this.handleTeamUrlChange}
                                 onClick={(e: React.MouseEvent<HTMLInputElement>) => {
                                     e.stopPropagation();
                                 }}
-                                isInvalid={Boolean(this.getTeamNameValidationState())}
+                                isInvalid={Boolean(this.getTeamUrlValidationState())}
                             />
                             <FormControl.Feedback/>
-                            <FormText className='NewTeamModal-noBottomSpace'>
+                            <FormText>
                                 <FormattedMessage
-                                    id='renderer.components.newTeamModal.serverDisplayName.description'
-                                    defaultMessage='The name of the server displayed on your desktop app tab bar.'
+                                    id='renderer.components.newTeamModal.serverURL.description'
+                                    defaultMessage='The URL of your Mattermost server. Must start with http:// or https://.'
                                 />
                             </FormText>
                         </FormGroup>