From e50e2e85b0542de55f808cade85390b6b04f5a4d Mon Sep 17 00:00:00 2001
From: Mattermost Build <build@mattermost.com>
Date: Mon, 24 Oct 2022 17:59:22 +0300
Subject: [PATCH] [MM-47776] Reverse order of input fields in server welcome
 screen (#2309) (#2314)

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

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

This reverts commit f3d577dcd5c0e13d6d0e3c2cc4de588008f53e68.

* Update order of server fields in welcome screens

* Update server modal focus test

* Add margin between inputs

(cherry picked from commit 0f51a628f0485a0b7e5edd759aa3f644a96c6ee3)

Co-authored-by: Tasos Boulis <tboulis@hotmail.com>
---
 .../add_server_modal.test.js                  |  2 +-
 src/renderer/components/ConfigureServer.tsx   | 38 +++++++++----------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/e2e/specs/server_management/add_server_modal.test.js b/e2e/specs/server_management/add_server_modal.test.js
index ee9c9c24..29799283 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;
     });
 
diff --git a/src/renderer/components/ConfigureServer.tsx b/src/renderer/components/ConfigureServer.tsx
index 37765888..f8beb044 100644
--- a/src/renderer/components/ConfigureServer.tsx
+++ b/src/renderer/components/ConfigureServer.tsx
@@ -300,28 +300,9 @@ function ConfigureServer({
                                     {cardTitle || formatMessage({id: 'renderer.components.configureServer.cardtitle', defaultMessage: 'Enter your server details'})}
                                 </p>
                                 <div className='ConfigureServer__card-form'>
-                                    <Input
-                                        name='name'
-                                        className='ConfigureServer__card-form-input'
-                                        type='text'
-                                        inputSize={SIZE.LARGE}
-                                        value={name}
-                                        onChange={handleNameOnChange}
-                                        customMessage={nameError ? ({
-                                            type: STATUS.ERROR,
-                                            value: nameError,
-                                        }) : ({
-                                            type: STATUS.INFO,
-                                            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.name.placeholder', defaultMessage: 'Server display name'})}
-                                        disabled={waiting}
-                                        darkMode={darkMode}
-                                    />
                                     <Input
                                         name='url'
                                         className='ConfigureServer__card-form-input'
-                                        containerClassName='ConfigureServer__card-form-input-container'
                                         type='text'
                                         inputSize={SIZE.LARGE}
                                         value={url}
@@ -337,6 +318,25 @@ function ConfigureServer({
                                         disabled={waiting}
                                         darkMode={darkMode}
                                     />
+                                    <Input
+                                        name='name'
+                                        className='ConfigureServer__card-form-input'
+                                        containerClassName='ConfigureServer__card-form-input-container'
+                                        type='text'
+                                        inputSize={SIZE.LARGE}
+                                        value={name}
+                                        onChange={handleNameOnChange}
+                                        customMessage={nameError ? ({
+                                            type: STATUS.ERROR,
+                                            value: nameError,
+                                        }) : ({
+                                            type: STATUS.INFO,
+                                            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.name.placeholder', defaultMessage: 'Server display name'})}
+                                        disabled={waiting}
+                                        darkMode={darkMode}
+                                    />
                                     <SaveButton
                                         id='connectConfigureServer'
                                         extraClasses='ConfigureServer__card-form-button'