Update gr-admin-project-list to use create button

Instead of having Create Project in the Side nav, include the button
at the top of the list view. Create project now shows in a modal and
not a separate page.

Change-Id: Ic22330680aa61249df8866f8782c440caf7e4ec5

polygerrit-ui/app/elements/admin/gr-admin-create-project/gr-admin-create-project.html

@@ -1,108 +0,0 @@
-<!--
-Copyright (C) 2017 The Android Open Source Project
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-
-<link rel="import" href="../../../behaviors/base-url-behavior/base-url-behavior.html">
-<link rel="import" href="../../../behaviors/gr-url-encoding-behavior.html">
-<link rel="import" href="../../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
-<link rel="import" href="../../../bower_components/iron-input/iron-input.html">
-<link rel="import" href="../../shared/gr-autocomplete/gr-autocomplete.html">
-
-<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
-<link rel="import" href="../../shared/gr-select/gr-select.html">
-<link rel="import" href="../../../styles/gr-form-styles.html">
-<link rel="import" href="../../../styles/shared-styles.html">
-
-<dom-module id="gr-admin-create-project">
-  <template>
-    <style include="shared-styles">
-      :host {
-        display: inline-block;
-      }
-      main {
-        margin: 2em 1em;
-      }
-      gr-autocomplete {
-        display: flex
-        border-radius: 2px 0 0 2px;
-        outline: none;
-        overflow: hidden;
-      }
-    </style>
-    <style include="gr-form-styles"></style>
-      <main class="gr-form-styles">
-        <h1 id="Title">
-          Create Project
-        </h1>
-        <a id="redirect" href$="[[_redirect(_projectConfig.name)]]"
-           hidden$="[[!_projectCreated]]" hidden></a>
-        <br>
-        <div id="form">
-          <fieldset>
-            <section>
-              <span class="title">Project name</span>
-              <iron-autogrow-textarea
-                  id="projectNameInput"
-                  autocomplete="on"
-                  bind-value="{{_projectConfig.name}}">
-              </iron-autogrow-textarea>
-            </section>
-            <section>
-              <span class="title">Rights inherit from</span>
-              <gr-autocomplete
-                  id="rightsInheritFromInput"
-                  text="{{_projectConfig.parent}}"
-                  query="[[_query]]"
-                  placeholder="Optional, defaults to 'All-Projects'">
-              </gr-autocomplete>
-            </section>
-            <section>
-              <span class="title">Create initial empty commit</span>
-              <span class="value">
-                <gr-select
-                    id="initalCommit"
-                    bind-value="{{_projectConfig.create_empty_commit}}">
-                  <select>
-                    <option value="false">False</option>
-                    <option value="true">True</option>
-                  </select>
-                </gr-select>
-              </span>
-            </section>
-            <section>
-              <span class="title">Only serve as parent for other projects</span>
-              <span class="value">
-                <gr-select
-                    id="parentProject"
-                    bind-value="{{_projectConfig.permissions_only}}">
-                  <select>
-                    <option value="false">False</option>
-                    <option value="true">True</option>
-                  </select>
-                </gr-select>
-              </span>
-            </section>
-          </fieldset>
-          <gr-button
-              id="submitBtn"
-              on-tap="_handleCreateProject"
-              disabled$="[[!_projectConfig.name]]">Save changes</gr-button>
-        </div>
-      </main>
-    <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
-  </template>
-  <script src="gr-admin-create-project.js"></script>
-</dom-module>

polygerrit-ui/app/elements/admin/gr-admin-project-list/gr-admin-project-list.html

@@ -13,25 +13,29 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
 
 <link rel="import" href="../../../behaviors/gr-list-view-behavior/gr-list-view-behavior.html">
 <link rel="import" href="../../../bower_components/iron-input/iron-input.html">
-<link rel="import" href="../../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../shared/gr-list-view/gr-list-view.html">
-<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
-
 <link rel="import" href="../../../styles/shared-styles.html">
+<link rel="import" href="../../shared/gr-confirm-dialog/gr-confirm-dialog.html">
+<link rel="import" href="../../shared/gr-list-view/gr-list-view.html">
+<link rel="import" href="../../shared/gr-overlay/gr-overlay.html">
+<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
+<link rel="import" href="../gr-create-project-dialog/gr-create-project-dialog.html">
 
 
 <dom-module id="gr-admin-project-list">
   <template>
     <style include="shared-styles"></style>
     <gr-list-view
+        create-new=[[_createNewCapability]]
         filter="[[_filter]]"
         items-per-page="[[_projectsPerPage]]"
         items="[[_projects]]"
         loading="[[_loading]]"
         offset="[[_offset]]"
+        on-create-clicked="_handleCreateClicked"
         path="[[_path]]">
       <table id="list">
         <tr class="headerRow">
@@ -66,6 +70,25 @@ limitations under the License.
         </template>
       </table>
     </gr-list-view>
+    <gr-overlay id="createOverlay" with-backdrop>
+        <gr-confirm-dialog
+            id="createDialog"
+            class="confirmDialog"
+            disabled="[[!_hasNewProjectName]]"
+            confirm-label="Create"
+            on-confirm="_handleCreateProject"
+            on-cancel="_handleCloseCreate">
+          <div class="header">
+            Create Project
+          </div>
+          <div class="main">
+            <gr-create-project-dialog
+                has-new-project-name="{{_hasNewProjectName}}"
+                params="[[params]]"
+                id="createNewModal"></gr-create-project-dialog>
+          </div>
+        </gr-confirm-dialog>
+      </gr-overlay>
     <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
   </template>
   <script src="gr-admin-project-list.js"></script>

polygerrit-ui/app/elements/admin/gr-admin-project-list/gr-admin-project-list.js

@@ -35,6 +35,11 @@
         readOnly: true,
         value: '/admin/projects',
       },
+      _hasNewProjectName: Boolean,
+      _createNewCapability: {
+        type: Boolean,
+        value: false,
+      },
       _projects: Array,
 
       /**
@@ -62,6 +67,10 @@
       Gerrit.ListViewBehavior,
     ],
 
+    attached() {
+      this._getCreateProjectCapability();
+    },
+
     _paramsChanged(params) {
       this._loading = true;
       this._filter = this.getFilterValue(params);
@@ -75,6 +84,18 @@
       return this.getUrl(this._path + '/', name);
     },
 
+    _getCreateProjectCapability() {
+      return this.$.restAPI.getAccount().then(account => {
+        if (!account) { return; }
+        return this.$.restAPI.getAccountCapabilities(['createProject'])
+            .then(capabilities => {
+              if (capabilities.createProject) {
+                this._createNewCapability = true;
+              }
+            });
+      });
+    },
+
     _getProjects(filter, projectsPerPage, offset) {
       this._projects = [];
       return this.$.restAPI.getProjects(filter, projectsPerPage, offset)
@@ -92,6 +113,18 @@
           });
     },
 
+    _handleCreateProject() {
+      this.$.createNewModal.handleCreateProject();
+    },
+
+    _handleCloseCreate() {
+      this.$.createOverlay.close();
+    },
+
+    _handleCreateClicked() {
+      this.$.createOverlay.open();
+    },
+
     _readOnly(item) {
       return item.state === 'READ_ONLY' ? 'Y' : 'N';
     },

polygerrit-ui/app/elements/admin/gr-admin-project-list/gr-admin-project-list_test.html

@@ -137,5 +137,31 @@ limitations under the License.
         assert.equal(getComputedStyle(element.$.loading).display, 'none');
       });
     });
+
+    suite('create new', () => {
+      test('_handleCreateClicked called when create-click fired', () => {
+        sandbox.stub(element, '_handleCreateClicked');
+        element.$$('gr-list-view').fire('create-clicked');
+        assert.isTrue(element._handleCreateClicked.called);
+      });
+
+      test('_handleCreateClicked opens modal', () => {
+        const openStub = sandbox.stub(element.$.createOverlay, 'open');
+        element._handleCreateClicked();
+        assert.isTrue(openStub.called);
+      });
+
+      test('_handleCreateProject called when confirm fired', () => {
+        sandbox.stub(element, '_handleCreateProject');
+        element.$.createDialog.fire('confirm');
+        assert.isTrue(element._handleCreateProject.called);
+      });
+
+      test('_handleCloseCreate called when cancel fired', () => {
+        sandbox.stub(element, '_handleCloseCreate');
+        element.$.createDialog.fire('cancel');
+        assert.isTrue(element._handleCloseCreate.called);
+      });
+    });
   });
 </script>

polygerrit-ui/app/elements/admin/gr-admin-view/gr-admin-view.html

@@ -23,7 +23,7 @@ limitations under the License.
 <link rel="import" href="../../shared/gr-page-nav/gr-page-nav.html">
 <link rel="import" href="../../shared/gr-placeholder/gr-placeholder.html">
 <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
-<link rel="import" href="../gr-admin-create-project/gr-admin-create-project.html">
+<link rel="import" href="../gr-create-project-dialog/gr-create-project-dialog.html">
 <link rel="import" href="../gr-admin-group-list/gr-admin-group-list.html">
 <link rel="import" href="../gr-admin-plugin-list/gr-admin-plugin-list.html">
 <link rel="import" href="../gr-admin-project-list/gr-admin-project-list.html">
@@ -89,9 +89,9 @@ limitations under the License.
     </template>
     <template is="dom-if" if="[[_showCreateProject]]" restamp="true">
       <main class="table">
-        <gr-admin-create-project
+        <gr-create-project-dialog
             params="[[params]]"
-            id="createProject"></gr-admin-create-project>
+            id="createProject"></gr-create-project-dialog>
       </main>
     </template>
     <template is="dom-if" if="[[_showProjectDetailList]]" restamp="true">

polygerrit-ui/app/elements/admin/gr-admin-view/gr-admin-view.js

@@ -19,13 +19,7 @@
     url: '/admin/projects',
     view: 'gr-admin-project-list',
     viewableToAll: true,
-    children: [{
+    children: [],
-      name: 'Create Project',
-      capability: 'createProject',
-      section: 'Projects',
-      url: '/admin/create-project',
-      view: 'gr-admin-create-project',
-    }],
   }, {
     name: 'Groups',
     section: 'Groups',
@@ -61,7 +55,6 @@
         type: Boolean,
         value: false,
       },
-      _showCreateProject: Boolean,
       _showProjectMain: Boolean,
       _showProjectList: Boolean,
       _showProjectBranches: Boolean,
@@ -139,8 +132,6 @@
     },
 
     _paramsChanged(params) {
-      this.set('_showCreateProject',
-          params.adminView === 'gr-admin-create-project');
       this.set('_showProjectMain', params.adminView === 'gr-project');
       this.set('_showProjectList',
           params.adminView === 'gr-admin-project-list');

polygerrit-ui/app/elements/admin/gr-admin-view/gr-admin-view_test.html

@@ -103,7 +103,7 @@ limitations under the License.
         assert.equal(element._filteredLinks.length, 3);
 
         // Projects
-        assert.equal(element._filteredLinks[0].children.length, 1);
+        assert.equal(element._filteredLinks[0].children.length, 0);
         assert.isNotOk(element._filteredLinks[0].subsection);
 
         // Groups
@@ -156,7 +156,7 @@ limitations under the License.
         assert.equal(element._filteredLinks.length, 3);
 
         // Projects
-        assert.equal(element._filteredLinks[0].children.length, 1);
+        assert.equal(element._filteredLinks[0].children.length, 0);
         assert.equal(element._filteredLinks[0].subsection.name, 'Test Project');
 
         // Groups

polygerrit-ui/app/elements/admin/gr-create-project-dialog/gr-create-project-dialog.html

@@ -0,0 +1,103 @@
+<!--
+Copyright (C) 2017 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../../../behaviors/base-url-behavior/base-url-behavior.html">
+<link rel="import" href="../../../behaviors/gr-url-encoding-behavior.html">
+<link rel="import" href="../../../bower_components/iron-input/iron-input.html">
+<link rel="import" href="../../../styles/gr-form-styles.html">
+<link rel="import" href="../../../styles/shared-styles.html">
+<link rel="import" href="../../shared/gr-autocomplete/gr-autocomplete.html">
+<link rel="import" href="../../shared/gr-button/gr-button.html">
+<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
+<link rel="import" href="../../shared/gr-select/gr-select.html">
+
+<dom-module id="gr-create-project-dialog">
+  <template>
+    <style include="shared-styles"></style>
+    <style include="gr-form-styles">
+      :host {
+        display: inline-block;
+      }
+      input {
+        width: 20em;
+      }
+      gr-autocomplete {
+        border: none;
+        --gr-autocomplete: {
+          border: 1px solid #d1d2d3;
+          border-radius: 2px;
+          font-size: 1em;
+          height: 2em;
+          padding: 0 .15em;
+          width: 20em;
+        }
+      }
+    </style>
+
+      <div class="gr-form-styles">
+        <div id="form">
+          <section>
+            <span class="title">Project name</span>
+            <input is="iron-input"
+                id="projectNameInput"
+                autocomplete="on"
+                bind-value="{{_projectConfig.name}}">
+            </input>
+          </section>
+          <section>
+            <span class="title">Rights inherit from</span>
+            <gr-autocomplete
+                id="rightsInheritFromInput"
+                text="{{_projectConfig.parent}}"
+                query="[[_query]]"
+                placeholder="Optional, defaults to 'All-Projects'">
+            </gr-autocomplete>
+          </section>
+          <section>
+            <span class="title">Create initial empty commit</span>
+            <span class="value">
+              <gr-select
+                  id="initalCommit"
+                  bind-value="{{_projectConfig.create_empty_commit}}">
+                <select>
+                  <option value="false">False</option>
+                  <option value="true">True</option>
+                </select>
+              </gr-select>
+            </span>
+          </section>
+          <section>
+            <span class="title">Only serve as parent for other projects</span>
+            <span class="value">
+              <gr-select
+                  id="parentProject"
+                  is="gr-select"
+                  bind-value="{{_projectConfig.permissions_only}}">
+                <select>
+                  <option value="false">False</option>
+                  <option value="true">True</option>
+                </select>
+              </gr-select>
+            </span>
+          </section>
+        </div>
+      </div>
+    <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
+  </template>
+  <script src="gr-create-project-dialog.js"></script>
+</dom-module>

polygerrit-ui/app/elements/admin/gr-create-project-dialog/gr-create-project-dialog.js

@@ -15,12 +15,26 @@
   'use strict';
 
   Polymer({
-    is: 'gr-admin-create-project',
+    is: 'gr-create-project-dialog',
+
+    /**
+     * Fired when a a project is created.
+     *
+     * @event create
+     */
 
     properties: {
       params: Object,
+      hasNewProjectName: {
+        type: Boolean,
+        notify: true,
+        value: false,
+      },
 
-      _projectConfig: Object,
+      _projectConfig: {
+        type: Object,
+        value: () => { return {}; },
+      },
       _projectCreated: {
         type: Object,
         value: false,
@@ -34,45 +48,30 @@
       },
     },
 
+    observers: [
+      '_updateProjectName(_projectConfig.name)',
+    ],
+
     behaviors: [
       Gerrit.BaseUrlBehavior,
       Gerrit.URLEncodingBehavior,
     ],
 
-    attached() {
+    _computeProjectUrl(projectName) {
-      this._createProject();
-    },
-
-    _createProject() {
-      this._projectConfig = [];
-    },
-
-    _formatProjectConfigForSave(p) {
-      const configInputObj = {};
-      for (const key in p) {
-        if (p.hasOwnProperty(key)) {
-          if (typeof p[key] === 'object') {
-            configInputObj[key] = p[key].configured_value;
-          } else {
-            configInputObj[key] = p[key];
-          }
-        }
-      }
-      return configInputObj;
-    },
-
-    _redirect(projectName) {
       return this.getBaseUrl() + '/admin/projects/' +
           this.encodeURL(projectName, true);
     },
 
-    _handleCreateProject() {
+    _updateProjectName(name) {
-      const config = this._formatProjectConfigForSave(this._projectConfig);
+      this.hasNewProjectName = !!name;
-      return this.$.restAPI.createProject(config)
+    },
+
+    handleCreateProject() {
+      return this.$.restAPI.createProject(this._projectConfig)
           .then(projectRegistered => {
             if (projectRegistered.status === 201) {
               this._projectCreated = true;
-              this.$.redirect.click();
+              page.show(this._computeProjectUrl(this._projectConfig.name));
             }
           });
     },

polygerrit-ui/app/elements/admin/gr-create-project-dialog/gr-create-project-dialog_test.html

@@ -16,23 +16,23 @@ limitations under the License.
 -->
 
 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-<title>gr-admin-create-project</title>
+<title>gr-create-project-dialog</title>
 
 <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
 <script src="../../../bower_components/web-component-tester/browser.js"></script>
 <link rel="import" href="../../../test/common-test-setup.html"/>
-<link rel="import" href="gr-admin-create-project.html">
+<link rel="import" href="gr-create-project-dialog.html">
 
 <script>void(0);</script>
 
 <test-fixture id="basic">
   <template>
-    <gr-admin-create-project></gr-admin-create-project>
+    <gr-create-project-dialog></gr-create-project-dialog>
   </template>
 </test-fixture>
 
 <script>
-  suite('gr-admin-create-project tests', () => {
+  suite('gr-create-project-dialog tests', () => {
     let element;
     let sandbox;
 
@@ -42,12 +42,6 @@ limitations under the License.
         getLoggedIn() { return Promise.resolve(true); },
       });
       element = fixture('basic');
-      element._projectConfig = {
-        name: 'test-project',
-        create_empty_commit: true,
-        parent: 'All-Project',
-        permissions_only: false,
-      };
     });
 
     teardown(() => {
@@ -67,7 +61,15 @@ limitations under the License.
             return Promise.resolve({});
           });
 
-      const button = element.$.submitBtn;
+      assert.isFalse(element.hasNewProjectName);
+
+      element._projectConfig = {
+        name: 'test-project',
+        create_empty_commit: true,
+        parent: 'All-Project',
+        permissions_only: false,
+      };
+
       element.$.projectNameInput.bindValue = configInputObj.name;
       element.$.rightsInheritFromInput.bindValue = configInputObj.parent;
       element.$.initalCommit.bindValue =
@@ -75,33 +77,14 @@ limitations under the License.
       element.$.parentProject.bindValue =
           configInputObj.permissions_only;
 
-      assert.isFalse(button.hasAttribute('disabled'));
+      assert.isTrue(element.hasNewProjectName);
 
       assert.deepEqual(element._projectConfig, configInputObj);
 
-      element._handleCreateProject().then(() => {
+      element.handleCreateProject().then(() => {
         assert.isTrue(saveStub.lastCall.calledWithExactly(configInputObj));
         done();
       });
     });
-
-    test('test for button being called', done => {
-      const button = element.$.submitBtn;
-
-      flushAsynchronousOperations();
-      sandbox.stub(element, '_handleCreateProject');
-      element._handleCreateProject();
-      MockInteractions.tap(button);
-      assert.isTrue(element._handleCreateProject.called);
-      done();
-    });
-
-    test('test for _handleCreateProject being called', done => {
-      const button = element.$.submitBtn;
-
-      flushAsynchronousOperations();
-      MockInteractions.tap(button);
-      done();
-    });
   });
 </script>

polygerrit-ui/app/elements/core/gr-router/gr-router.js

@@ -157,23 +157,6 @@
       });
     });
 
-    // Matches /admin/create-project.
-    page('/admin/create-project', loadUser, data => {
-      restAPI.getLoggedIn().then(loggedIn => {
-        restAPI.getAccountCapabilities(false).then(permission => {
-          if (loggedIn &&
-              (permission.administrateServer || permission.createProject)) {
-            app.params = {
-              view: 'gr-admin-view',
-              adminView: 'gr-admin-create-project',
-            };
-          } else {
-            page.redirect('/login/' + encodeURIComponent(data.canonicalPath));
-          }
-        });
-      });
-    });
-
     // Matches /admin/projects/<project>,branches[,<offset>].
     page(/^\/admin\/projects\/(.+),branches(,(.+))?$/, loadUser, data => {
       app.params = {

polygerrit-ui/app/test/index.html

@@ -30,12 +30,12 @@ limitations under the License.
     // This seemed to be flakey when it was farther down the list. Keep at the
     // beginning.
     'gr-app_test.html',
-    'admin/gr-admin-create-project/gr-admin-create-project_test.html',
     'admin/gr-admin-group-list/gr-admin-group-list_test.html',
     'admin/gr-admin-plugin-list/gr-admin-plugin-list_test.html',
     'admin/gr-admin-project-list/gr-admin-project-list_test.html',
     'admin/gr-admin-view/gr-admin-view_test.html',
     'admin/gr-project/gr-project_test.html',
+    'admin/gr-create-project-dialog/gr-create-project-dialog_test.html',
     'admin/gr-project-detail-list/gr-project-detail-list_test.html',
     'change-list/gr-change-list-item/gr-change-list-item_test.html',
     'change-list/gr-change-list-view/gr-change-list-view_test.html',