Use create project popup rather than the create-project page

Fixes #2029

Author: jeff-phillips-18

app/scripts/controllers/projects.js

@@ -133,7 +133,12 @@ angular.module('openshiftConsole')
 
     $scope.newProjectPanelShown = false;
 
-    $scope.createProject = function() {
+    $scope.createProject = function(event) {
+      var button =_.get(event, 'target');
+      while (button && !angular.element(button).hasClass('btn')) {
+        button = button.parentElement;
+      }
+      $scope.popupElement = button;
       $scope.newProjectPanelShown = true;
     };
 

app/styles/_projects.less

@@ -202,3 +202,9 @@
     }
   }
 }
+
+.projects-list-create-popup {
+  form {
+    width: 400px;
+  }
+}

app/views/projects.html

@@ -1,4 +1,7 @@
 <div class="middle surface-shaded">
+  <origin-modal-popup class="projects-list-create-popup" shown="newProjectPanelShown" modal-title="Create Project" on-close="closeNewProjectPanel" reference-element="popupElement">
+    <create-project is-dialog="true" redirect-action="onNewProject" on-cancel="closeNewProjectPanel"></create-project>
+  </origin-modal-popup>
   <div class="middle-content">
     <div class="container-fluid">
       <div class="row">
@@ -17,13 +20,10 @@ <h2 class="text-center">Loading...</h2>
                   <h1>My Projects</h1>
                   <div class="projects-options">
                     <div class="projects-add" ng-if="canCreate">
-                      <button ng-click="createProject()" class="btn btn-md btn-primary">
+                      <button ng-click="createProject($event)" class="btn btn-primary">
                         <span class="fa fa-plus" aria-hidden="true"></span>
                         <span class="icon-button-text">Create Project</span>
                       </button>
-                      <origin-modal-popup shown="newProjectPanelShown" modal-title="Create Project" on-close="closeNewProjectPanel">
-                        <create-project is-dialog="true" redirect-action="onNewProject" on-cancel="closeNewProjectPanel"></create-project>
-                      </origin-modal-popup>
                     </div>
                     <div class="projects-search">
                       <form role="form" class="search-pf has-button">
@@ -170,7 +170,12 @@ <h1>Welcome to OpenShift.</h1>
                 OpenShift helps you quickly develop, host, and scale applications.<br>
                 <span ng-if="canCreate">Create a project for your application.</span>
               </p>
-              <a ng-if="canCreate" href="create-project" class="btn btn-lg btn-primary">Create Project</a>
+              <div>
+                <button ng-click="createProject($event)" class="btn btn-lg btn-primary">
+                  <span class="fa fa-plus" aria-hidden="true"></span>
+                  <span class="icon-button-text">Create Project</span>
+                </button>
+              </div>
               <p>To learn more, visit the OpenShift <a target="_blank" ng-href="{{'' | helpLink}}">documentation</a>.</p>
               <p class="projects-instructions" ng-if="canCreate === false" ng-include="'views/_cannot-create-project.html'"></p>
             </div>

dist/scripts/scripts.js

@@ -4357,8 +4357,9 @@ d = _.toArray(t.by("metadata.name")), e.loading = !1, e.showGetStarted = _.isEmp
 }, k = function() {
 g || u.list().then(w);
 };
-e.newProjectPanelShown = !1, e.createProject = function() {
-e.newProjectPanelShown = !0;
+e.newProjectPanelShown = !1, e.createProject = function(t) {
+for (var n = _.get(t, "target"); n && !angular.element(n).hasClass("btn"); ) n = n.parentElement;
+e.popupElement = n, e.newProjectPanelShown = !0;
 }, e.closeNewProjectPanel = function() {
 e.newProjectPanelShown = !1;
 }, e.onNewProject = function() {

dist/scripts/templates.js

@@ -12538,6 +12538,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
 
   $templateCache.put('views/projects.html',
     "<div class=\"middle surface-shaded\">\n" +
+    "<origin-modal-popup class=\"projects-list-create-popup\" shown=\"newProjectPanelShown\" modal-title=\"Create Project\" on-close=\"closeNewProjectPanel\" reference-element=\"popupElement\">\n" +
+    "<create-project is-dialog=\"true\" redirect-action=\"onNewProject\" on-cancel=\"closeNewProjectPanel\"></create-project>\n" +
+    "</origin-modal-popup>\n" +
     "<div class=\"middle-content\">\n" +
     "<div class=\"container-fluid\">\n" +
     "<div class=\"row\">\n" +
@@ -12555,13 +12558,10 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<h1>My Projects</h1>\n" +
     "<div class=\"projects-options\">\n" +
     "<div class=\"projects-add\" ng-if=\"canCreate\">\n" +
-    "<button ng-click=\"createProject()\" class=\"btn btn-md btn-primary\">\n" +
+    "<button ng-click=\"createProject($event)\" class=\"btn btn-primary\">\n" +
     "<span class=\"fa fa-plus\" aria-hidden=\"true\"></span>\n" +
     "<span class=\"icon-button-text\">Create Project</span>\n" +
     "</button>\n" +
-    "<origin-modal-popup shown=\"newProjectPanelShown\" modal-title=\"Create Project\" on-close=\"closeNewProjectPanel\">\n" +
-    "<create-project is-dialog=\"true\" redirect-action=\"onNewProject\" on-cancel=\"closeNewProjectPanel\"></create-project>\n" +
-    "</origin-modal-popup>\n" +
     "</div>\n" +
     "<div class=\"projects-search\">\n" +
     "<form role=\"form\" class=\"search-pf has-button\">\n" +
@@ -12672,7 +12672,12 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "OpenShift helps you quickly develop, host, and scale applications.<br>\n" +
     "<span ng-if=\"canCreate\">Create a project for your application.</span>\n" +
     "</p>\n" +
-    "<a ng-if=\"canCreate\" href=\"create-project\" class=\"btn btn-lg btn-primary\">Create Project</a>\n" +
+    "<div>\n" +
+    "<button ng-click=\"createProject($event)\" class=\"btn btn-lg btn-primary\">\n" +
+    "<span class=\"fa fa-plus\" aria-hidden=\"true\"></span>\n" +
+    "<span class=\"icon-button-text\">Create Project</span>\n" +
+    "</button>\n" +
+    "</div>\n" +
     "<p>To learn more, visit the OpenShift <a target=\"_blank\" ng-href=\"{{'' | helpLink}}\">documentation</a>.</p>\n" +
     "<p class=\"projects-instructions\" ng-if=\"canCreate === false\" ng-include=\"'views/_cannot-create-project.html'\"></p>\n" +
     "</div>\n" +