fix tab order in the External Apps page

fixes CNVS-18470

Tabing was going right to left instead of left to right on buttons in
the External Apps tab. This fixes that.

Test Plan

Given you have the External Tools plugin enabled
And you're only using your keyboard to navigate
When you go to a course settings
And you select the External Tools tab
And you tab through the buttons
Then the first focused button should be "Add App"
And the second focused button should be "View App Center"

Change-Id: I8d25a24d9e4aefd2c7b759b5c1479ddbf8e419a7
Reviewed-on: https://gerrit.instructure.com/48803
Reviewed-by: Clay Diffrient <cdiffrient@instructure.com>
QA-Review: Jahnavi Yetukuri <jyetukuri@instructure.com>
Tested-by: Jenkins
Product-Review: Sterling Cobb <sterling@instructure.com>

app/jsx/external_apps/components/AddExternalToolButton.jsx

@@ -95,7 +95,7 @@ define([
     render() {
       return (
         <span className="AddExternalToolButton">
-          <a href="#" role="button" aria-label={I18n.t('Add App')} className="btn btn-primary add_tool_link lm pull-right" onClick={this.openModal}>{I18n.t('Add App')}</a>
+          <a href="#" role="button" aria-label={I18n.t('Add App')} className="btn btn-primary add_tool_link lm" onClick={this.openModal}>{I18n.t('Add App')}</a>
           <Modal className="ReactModal__Content--canvas"
             overlayClassName="ReactModal__Overlay--canvas"
             isOpen={this.state.modalIsOpen}

app/jsx/external_apps/components/Configurations.jsx

@@ -16,18 +16,18 @@ define([
         if (!ENV.APP_CENTER['enabled']) {
           return '';
         }
-        return <Link ref="appCenterLink" to="appList" className="btn view_tools_link lm pull-right">{I18n.t('View App Center')}</Link>;
+        return <Link ref="appCenterLink" to="appList" className="btn view_tools_link lm">{I18n.t('View App Center')}</Link>;
       }.bind(this);
 
       return (
         <div className="Configurations">
           <Header>
-            {appCenterLink()}
             <AddExternalToolButton />
+            {appCenterLink()}
           </Header>
           <ExternalToolsTable />
         </div>
       );
     }
   });
-});
+});

app/jsx/external_apps/components/Header.jsx

@@ -23,8 +23,10 @@ define([
       return (
         <div className="Header">
           <h2 className="page-header" ref="pageHeader">
-            {I18n.t('External Apps')}
-            {this.props.children}
+            <span className="externalApps_label_text">{I18n.t('External Apps')}</span>
+            <div className="externalApps_buttons_container">
+              {this.props.children}
+            </div>
           </h2>
 
           <div className="well well-sm">

app/stylesheets/pages/shared/_external_tools.scss

@@ -35,6 +35,23 @@ $app_height: 143px;
 }
 
 #external_tools {
+  .AddExternalToolButton{
+    display: flex;
+  }
+
+  .page-header{
+    display: flex;
+  }
+
+  .externalApps_label_text{
+    flex: 1 1;
+  }
+  .externalApps_buttons_container{
+    display: flex;
+    justify-content: flex-end;
+    flex: 2 2;
+  }
+
   h2 {
     margin: 10px 0;
   }
@@ -274,4 +291,4 @@ fieldset.rate_app_wrapper {
     display: block;
     margin-bottom: 2px;
   }
-}
+}