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
2017-07-05 17:05:55 -07:00
parent 6fca6be8c9
commit cb37d118f6
12 changed files with 240 additions and 207 deletions
--- a/polygerrit-ui/app/elements/admin/gr-admin-create-project/gr-admin-create-project.html
+++ b/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>
--- a/polygerrit-ui/app/elements/admin/gr-admin-project-list/gr-admin-project-list.html
+++ b/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>
--- a/polygerrit-ui/app/elements/admin/gr-admin-project-list/gr-admin-project-list.js
+++ b/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';
    },
--- a/polygerrit-ui/app/elements/admin/gr-admin-project-list/gr-admin-project-list_test.html
+++ b/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>
--- a/polygerrit-ui/app/elements/admin/gr-admin-view/gr-admin-view.html
+++ b/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">
--- a/polygerrit-ui/app/elements/admin/gr-admin-view/gr-admin-view.js
+++ b/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: [{
-      name: 'Create Project',
-      capability: 'createProject',
-      section: 'Projects',
-      url: '/admin/create-project',
-      view: 'gr-admin-create-project',
-    }],
+    children: [],
  }, {
    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');
--- a/polygerrit-ui/app/elements/admin/gr-admin-view/gr-admin-view_test.html
+++ b/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
--- a/polygerrit-ui/app/elements/admin/gr-create-project-dialog/gr-create-project-dialog.html
+++ b/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>
--- a/polygerrit-ui/app/elements/admin/gr-create-project-dialog/gr-create-project-dialog.js
+++ b/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() {
-      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) {
+    _computeProjectUrl(projectName) {
      return this.getBaseUrl() + '/admin/projects/' +
          this.encodeURL(projectName, true);
    },

-    _handleCreateProject() {
-      const config = this._formatProjectConfigForSave(this._projectConfig);
-      return this.$.restAPI.createProject(config)
+    _updateProjectName(name) {
+      this.hasNewProjectName = !!name;
+    },
+
+    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));
            }
          });
    },
@@ -92,4 +91,4 @@
          });
    },
  });
-})();
+})();
--- a/polygerrit-ui/app/elements/admin/gr-create-project-dialog/gr-create-project-dialog_test.html
+++ b/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>
--- a/polygerrit-ui/app/elements/core/gr-router/gr-router.js
+++ b/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 = {
--- a/polygerrit-ui/app/test/index.html
+++ b/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',