From f3d577dcd5c0e13d6d0e3c2cc4de588008f53e68 Mon Sep 17 00:00:00 2001
From: Tasos Boulis <tboulis@hotmail.com>
Date: Fri, 21 Oct 2022 19:03:38 +0300
Subject: [PATCH 1/5] Reverse order of inputs in Server modals (add/edit)

---
 src/renderer/components/NewTeamModal.tsx | 54 +++++++++++-------------
 1 file changed, 25 insertions(+), 29 deletions(-)

diff --git a/src/renderer/components/NewTeamModal.tsx b/src/renderer/components/NewTeamModal.tsx
index 19c1e044f0d..73cfa72d371 100644
--- 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>

From 880e3733ee42bd2dcefc3e00edb22be7ea629bc9 Mon Sep 17 00:00:00 2001
From: Tasos Boulis <tboulis@hotmail.com>
Date: Mon, 24 Oct 2022 16:06:28 +0300
Subject: [PATCH 2/5] Revert "Reverse order of inputs in Server modals
 (add/edit)"

This reverts commit f3d577dcd5c0e13d6d0e3c2cc4de588008f53e68.
---
 src/renderer/components/NewTeamModal.tsx | 54 +++++++++++++-----------
 1 file changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/renderer/components/NewTeamModal.tsx b/src/renderer/components/NewTeamModal.tsx
index 73cfa72d371..19c1e044f0d 100644
--- a/src/renderer/components/NewTeamModal.tsx
+++ b/src/renderer/components/NewTeamModal.tsx
@@ -20,6 +20,7 @@ type Props = {
     show?: boolean;
     restoreFocus?: boolean;
     currentOrder?: number;
+    setInputRef?: (inputRef: HTMLInputElement) => void;
     intl: IntlShape;
 };
 
@@ -33,7 +34,7 @@ type State = {
 
 class NewTeamModal extends React.PureComponent<Props, State> {
     wasShown?: boolean;
-    teamNameInputRef?: HTMLInputElement;
+    teamUrlInputRef?: HTMLInputElement;
 
     static defaultProps = {
         restoreFocus: true,
@@ -261,7 +262,7 @@ class NewTeamModal extends React.PureComponent<Props, State> {
                 show={this.props.show}
                 id='newServerModal'
                 enforceFocus={true}
-                onEntered={() => this.teamNameInputRef?.focus()}
+                onEntered={() => this.teamUrlInputRef?.focus()}
                 onHide={this.props.onClose}
                 restoreFocus={this.props.restoreFocus}
                 onKeyDown={(e: React.KeyboardEvent) => {
@@ -285,59 +286,62 @@ class NewTeamModal extends React.PureComponent<Props, State> {
 
                 <Modal.Body>
                     <form>
-                        <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();
                                 }}
                                 ref={(ref: HTMLInputElement) => {
-                                    this.teamNameInputRef = ref;
+                                    this.teamUrlInputRef = ref;
+                                    if (this.props.setInputRef) {
+                                        this.props.setInputRef(ref);
+                                    }
                                 }}
-                                isInvalid={Boolean(this.getTeamNameValidationState())}
+                                isInvalid={Boolean(this.getTeamUrlValidationState())}
                                 autoFocus={true}
                             />
                             <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>
-                        <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();
                                 }}
-                                isInvalid={Boolean(this.getTeamUrlValidationState())}
+                                isInvalid={Boolean(this.getTeamNameValidationState())}
                             />
                             <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>

From 0e01497763cad58c2eee510b9859aad58bef2f11 Mon Sep 17 00:00:00 2001
From: Tasos Boulis <tboulis@hotmail.com>
Date: Mon, 24 Oct 2022 16:25:32 +0300
Subject: [PATCH 3/5] Update order of server fields in welcome screens

---
 src/renderer/components/ConfigureServer.tsx | 30 ++++++++++-----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/renderer/components/ConfigureServer.tsx b/src/renderer/components/ConfigureServer.tsx
index 3776588816c..2dc0b9ada37 100644
--- a/src/renderer/components/ConfigureServer.tsx
+++ b/src/renderer/components/ConfigureServer.tsx
@@ -301,39 +301,39 @@ function ConfigureServer({
                                 </p>
                                 <div className='ConfigureServer__card-form'>
                                     <Input
-                                        name='name'
+                                        name='url'
                                         className='ConfigureServer__card-form-input'
+                                        containerClassName='ConfigureServer__card-form-input-container'
                                         type='text'
                                         inputSize={SIZE.LARGE}
-                                        value={name}
-                                        onChange={handleNameOnChange}
-                                        customMessage={nameError ? ({
+                                        value={url}
+                                        onChange={handleURLOnChange}
+                                        customMessage={urlError ? ({
                                             type: STATUS.ERROR,
-                                            value: nameError,
+                                            value: urlError,
                                         }) : ({
                                             type: STATUS.INFO,
-                                            value: formatMessage({id: 'renderer.components.configureServer.name.info', defaultMessage: 'The name that will be displayed in your server list'}),
+                                            value: formatMessage({id: 'renderer.components.configureServer.url.info', defaultMessage: 'The URL of your Mattermost server'}),
                                         })}
-                                        placeholder={formatMessage({id: 'renderer.components.configureServer.name.placeholder', defaultMessage: 'Server display name'})}
+                                        placeholder={formatMessage({id: 'renderer.components.configureServer.url.placeholder', defaultMessage: 'Server URL'})}
                                         disabled={waiting}
                                         darkMode={darkMode}
                                     />
                                     <Input
-                                        name='url'
+                                        name='name'
                                         className='ConfigureServer__card-form-input'
-                                        containerClassName='ConfigureServer__card-form-input-container'
                                         type='text'
                                         inputSize={SIZE.LARGE}
-                                        value={url}
-                                        onChange={handleURLOnChange}
-                                        customMessage={urlError ? ({
+                                        value={name}
+                                        onChange={handleNameOnChange}
+                                        customMessage={nameError ? ({
                                             type: STATUS.ERROR,
-                                            value: urlError,
+                                            value: nameError,
                                         }) : ({
                                             type: STATUS.INFO,
-                                            value: formatMessage({id: 'renderer.components.configureServer.url.info', defaultMessage: 'The URL of your Mattermost server'}),
+                                            value: formatMessage({id: 'renderer.components.configureServer.name.info', defaultMessage: 'The name that will be displayed in your server list'}),
                                         })}
-                                        placeholder={formatMessage({id: 'renderer.components.configureServer.url.placeholder', defaultMessage: 'Server URL'})}
+                                        placeholder={formatMessage({id: 'renderer.components.configureServer.name.placeholder', defaultMessage: 'Server display name'})}
                                         disabled={waiting}
                                         darkMode={darkMode}
                                     />

From 4a6870a77fa8cfd814b28f92ffa00042ca3c0cb9 Mon Sep 17 00:00:00 2001
From: Tasos Boulis <tboulis@hotmail.com>
Date: Mon, 24 Oct 2022 16:28:19 +0300
Subject: [PATCH 4/5] Update server modal focus test

---
 e2e/specs/server_management/add_server_modal.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/specs/server_management/add_server_modal.test.js b/e2e/specs/server_management/add_server_modal.test.js
index ee9c9c2449b..297992830bf 100644
--- a/e2e/specs/server_management/add_server_modal.test.js
+++ b/e2e/specs/server_management/add_server_modal.test.js
@@ -41,7 +41,7 @@ describe('Add Server Modal', function desc() {
     let newServerView;
 
     it('MM-T1312 should focus the first text input', async () => {
-        const isFocused = await newServerView.$eval('#teamNameInput', (el) => el === document.activeElement);
+        const isFocused = await newServerView.$eval('#teamNameInput', (el) => el.isSameNode(document.activeElement));
         isFocused.should.be.true;
     });
 

From 0a2c9260dc39738c07b2e1059126a9d20d38f636 Mon Sep 17 00:00:00 2001
From: Tasos Boulis <tboulis@hotmail.com>
Date: Mon, 24 Oct 2022 17:55:10 +0300
Subject: [PATCH 5/5] Add margin between inputs

---
 src/renderer/components/ConfigureServer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/ConfigureServer.tsx b/src/renderer/components/ConfigureServer.tsx
index 2dc0b9ada37..f8beb044d8a 100644
--- a/src/renderer/components/ConfigureServer.tsx
+++ b/src/renderer/components/ConfigureServer.tsx
@@ -303,7 +303,6 @@ function ConfigureServer({
                                     <Input
                                         name='url'
                                         className='ConfigureServer__card-form-input'
-                                        containerClassName='ConfigureServer__card-form-input-container'
                                         type='text'
                                         inputSize={SIZE.LARGE}
                                         value={url}
@@ -322,6 +321,7 @@ function ConfigureServer({
                                     <Input
                                         name='name'
                                         className='ConfigureServer__card-form-input'
+                                        containerClassName='ConfigureServer__card-form-input-container'
                                         type='text'
                                         inputSize={SIZE.LARGE}
                                         value={name}