From 2de8a89336ff6246861acc59a090d84ec03193b7 Mon Sep 17 00:00:00 2001
From: Rob Ashcom <rob.ashcom@gmail.com>
Date: Sat, 23 Mar 2019 16:47:02 -0700
Subject: [PATCH] Dashboard group controls revision #1

- added styles for the row of disclosure, group name, save & delete controls
- changed the behavior of editing the group:
   - - focus on the group name shows save and delete icons
   - - blur or clicking save/delete hides the icons & blurs the name field
   - - typing in the name field extends the width of the field dynamically!!
- added styles for vertical spacing of the groups from one another
- added a new HTML template for specifically deleting groups
- formatted A LOT of code >> attributes should be indented 3 spaces

Change-Id: I43450db86b6a115192518508341c138cf0488ba9
Reviewed-on: http://review.couchbase.org/106669
Reviewed-by: Pavel Blagodov <stochmail@gmail.com>
Tested-by: Pavel Blagodov <stochmail@gmail.com>
---
 priv/public/ui/app/css/cbui-components.css    |  37 +++-
 .../mn_admin/mn_statistics/mn_statistics.html | 207 ++++++++++--------
 .../mn_statistics/mn_statistics_controller.js |  22 +-
 .../mn_statistics_group_delete.html           |  17 ++
 .../mn_statistics_scenario_delete.html        |  15 +-
 5 files changed, 200 insertions(+), 98 deletions(-)
 create mode 100644 priv/public/ui/app/mn_admin/mn_statistics/mn_statistics_group_delete.html

diff --git a/priv/public/ui/app/css/cbui-components.css b/priv/public/ui/app/css/cbui-components.css
index f915d62c31..9be7d3fe8b 100644
--- a/priv/public/ui/app/css/cbui-components.css
+++ b/priv/public/ui/app/css/cbui-components.css
@@ -2401,9 +2401,9 @@ nav.nav-sidebar-hidden {
 }
 .row.charts {
   flex-wrap: wrap;
-  margin-left: -.5rem;
   justify-content: flex-start;
   align-items: stretch;
+  margin-left: -.5rem;
 }
 .row.header {
   justify-content: flex-start;
@@ -2453,6 +2453,41 @@ nav.nav-sidebar-hidden {
 .chart-adder:before {
   content: "\f055";
 }
+.charts-group {
+  margin-bottom: 1rem;
+}
+.charts-group:nth-of-type(2) {
+  margin-bottom: 3rem;
+}
+.charts-group-row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.charts-group-row .disclosure {
+  padding-left: 1rem;
+}
+.charts-group-row .disclosure:before,
+.charts-group-row .disclosed:before {
+  top: 3px;
+}
+input[type="text"].charts-group-name {
+  border-color: #fff;
+  font-size: .961rem;
+  font-weight: 600;
+  margin-right: .5rem;
+}
+input[type="text"]:focus.charts-group-name {
+  border-color: #d1d1d1;
+}
+.charts-group-row .icon {
+  padding: 0 .5rem;
+  color: #4287d6;
+  cursor: pointer;
+}
+.charts-group-row .icon:hover {
+  color: #000;
+}
 
 /* over-writes of nvd3 css -------------------------------------------------- */
 .nvd3 .nv-axis line {
diff --git a/priv/public/ui/app/mn_admin/mn_statistics/mn_statistics.html b/priv/public/ui/app/mn_admin/mn_statistics/mn_statistics.html
index 3ff1c6f19f..3d8dfe736e 100644
--- a/priv/public/ui/app/mn_admin/mn_statistics/mn_statistics.html
+++ b/priv/public/ui/app/mn_admin/mn_statistics/mn_statistics.html
@@ -2,84 +2,85 @@
   <span>
     <div class="inline margin-right-half">
       <mn-dropdown
-        ng-click="$event.stopPropagation();"
-        on-select="statisticsNewCtl.onSelectScenario(scenario);"
-        model="statisticsNewCtl.statisticsService.scenarios"
-        class="scenario-dropdown">
+         ng-click="$event.stopPropagation();"
+         on-select="statisticsNewCtl.onSelectScenario(scenario);"
+         model="statisticsNewCtl.statisticsService.scenarios"
+         class="scenario-dropdown">
         <inner-select>
           {{statisticsNewCtl.statisticsService.scenarios.selected.name}}
         </inner-select>
         <inner-body ng-class="{'body-shorter' : statisticsNewCtl.scenarioCtrl.showRestOfMenu}">
           <mn-dropdown-item
-            ng-repeat="scenario in statisticsNewCtl.statisticsService.scenarios track by scenario.id"
-            mn-item="scenario">
+             ng-repeat="scenario in statisticsNewCtl.statisticsService.scenarios track by scenario.id"
+             mn-item="scenario">
             <p>{{scenario.name}}</p>
             <p ng-if="scenario.desc">{{scenario.desc}}</p>
             <div
-              class="scenario-controls"
-              ng-click="$event.stopPropagation();"
-              title="delete/edit scenario">
+               class="scenario-controls"
+               ng-click="$event.stopPropagation();"
+               title="delete/edit scenario">
               <span
-                class="icon fa-ellipsis-v"
-                ng-click="showScenarioControls = !showScenarioControls"
-                ng-class="showScenarioControls ? 'fa-angle-right' : 'fa-ellipsis-v'">
+                 class="icon fa-ellipsis-v"
+                 ng-click="showScenarioControls = !showScenarioControls"
+                 ng-class="showScenarioControls ? 'fa-angle-right' : 'fa-ellipsis-v'">
               </span>
               <span
-                title="edit chart"
-                class="icon fa-edit"
-                ng-click="statisticsNewCtl.scenarioCtrl.editScenario(scenario)"
-                ng-show="showScenarioControls"></span>
+                 title="edit chart"
+                 class="icon fa-edit"
+                 ng-click="statisticsNewCtl.scenarioCtrl.editScenario(scenario)"
+                 ng-show="showScenarioControls"></span>
               <span
-                title="delete chart"
-                class="icon fa-trash"
-                ng-click="statisticsNewCtl.scenarioCtrl.deleteScenario(scenario)"
-                ng-show="showScenarioControls"></span>
+                 title="delete chart"
+                 class="icon fa-trash"
+                 ng-click="statisticsNewCtl.scenarioCtrl.deleteScenario(scenario)"
+                 ng-show="showScenarioControls"></span>
             </div>
           </mn-dropdown-item>
         </inner-body>
-        <inner-footer ng-controller="mnScenarioDialogController as scenarioCtrl"
-                      ng-init="statisticsNewCtl.scenarioCtrl = scenarioCtrl">
+        <inner-footer
+           ng-controller="mnScenarioDialogController as scenarioCtrl"
+           ng-init="statisticsNewCtl.scenarioCtrl = scenarioCtrl">
           <form
-            novalidate
-            ng-submit="scenarioCtrl.onSubmit()"
-            name="form"
-            class="forms">
+             novalidate
+             ng-submit="scenarioCtrl.onSubmit()"
+             name="form"
+             class="forms">
             <div class="scenario-add" ng-class="{'scenario-add-ext' : scenarioCtrl.showRestOfMenu}">
               <input
-                type="text"
-                ng-model="scenarioCtrl.scenario.name"
-                placeholder="new scenario..."
-                autocorrect="off"
-                ng-click="scenarioCtrl.showRestOfMenu = true"
-                spellcheck="false"
-                autocapitalize="off"
-                ng-disabled="!rbac.bucketNames['.stats!read'].length">
+                 type="text"
+                 ng-model="scenarioCtrl.scenario.name"
+                 placeholder="new scenario..."
+                 autocorrect="off"
+                 ng-click="scenarioCtrl.showRestOfMenu = true"
+                 spellcheck="false"
+                 autocapitalize="off"
+                 ng-disabled="!rbac.bucketNames['.stats!read'].length">
               <span class="icon fa-plus-square" ng-show="!scenarioCtrl.showRestOfMenu"></span>
             </div>
 
             <input
-              type="text"
-              ng-model="scenarioCtrl.scenario.desc"
-              placeholder="add optional description..."
-              autocorrect="off"
-              spellcheck="false"
-              autocapitalize="off"
-              ng-disabled="!rbac.bucketNames['.stats!read'].length"
-              ng-show="scenarioCtrl.showRestOfMenu"
-              class="scenario-desc">
+               type="text"
+               ng-model="scenarioCtrl.scenario.desc"
+               placeholder="add optional description..."
+               autocorrect="off"
+               spellcheck="false"
+               autocapitalize="off"
+               ng-disabled="!rbac.bucketNames['.stats!read'].length"
+               ng-show="scenarioCtrl.showRestOfMenu"
+               class="scenario-desc">
             <div class="checkbox-list margin-bottom-half"
                  ng-show="!scenarioCtrl.isEditingMode && scenarioCtrl.showRestOfMenu">
               <input
-                type="radio"
-                value="true"
-                ng-model="scenarioCtrl.copyScenario"
-                id="for-bucket-type-current">
+                 type="radio"
+                 value="true"
+                 ng-model="scenarioCtrl.copyScenario"
+                 id="for-bucket-type-current">
               <label for="for-bucket-type-current">save current charts</label>
               <input
-                type="radio"
-                value="false"
-                ng-model="scenarioCtrl.copyScenario"
-                id="for-bucket-type-blank">
+                 type="radio"
+                 value="false"
+                 ng-model="scenarioCtrl.copyScenario"
+                 id="for-bucket-type-blank">
               <label for="for-bucket-type-blank">start blank</label>
             </div>
             <div class="scenario-save-controls" ng-show="scenarioCtrl.showRestOfMenu">
@@ -92,16 +93,17 @@
     </div>
 
     <a
-      ng-disabled="!statisticsNewCtl.statisticsService.scenarios.length"
-      ng-click="statisticsNewCtl.openGroupDialog(statisticsNewCtl.statisticsService.scenarios.selected)"
-      class="text-small">
+       ng-disabled="!statisticsNewCtl.statisticsService.scenarios.length"
+       ng-click="statisticsNewCtl.openGroupDialog(statisticsNewCtl.statisticsService.scenarios.selected)"
+       class="text-small">
       Add Group
     </a>
   </span>
 
-  <select ng-model="statisticsNewCtl.statisticsService.scenarios.selected.zoom"
-          ng-change="statisticsNewCtl.onSelectZoom(
-                     statisticsNewCtl.statisticsService.scenarios.selected.zoom)">
+  <select
+     ng-model="statisticsNewCtl.statisticsService.scenarios.selected.zoom"
+     ng-change="statisticsNewCtl.onSelectZoom(
+                statisticsNewCtl.statisticsService.scenarios.selected.zoom)">
     <option value="minute">minute</option>
     <option value="hour">hour</option>
     <option value="day">day</option>
@@ -109,8 +111,9 @@
     <option value="month">month</option>
   </select>
 
-  <select ng-model="statisticsNewCtl.selectedBucket"
-          ng-change="statisticsNewCtl.onBucketChange(statisticsNewCtl.selectedBucket)">
+  <select
+     ng-model="statisticsNewCtl.selectedBucket"
+     ng-change="statisticsNewCtl.onBucketChange(statisticsNewCtl.selectedBucket)">
     <option ng-repeat="name in rbac.bucketNames['.stats!read']" value="{{name}}">
       {{name}}
     </option>
@@ -118,46 +121,72 @@
 </div>
 
 <div class="width-12">
-  <div ng-repeat="group in statisticsNewCtl.statisticsService.scenarios.selected.groups track by group.id">
+  <div
+     ng-repeat="group in statisticsNewCtl.statisticsService.scenarios.selected.groups track by group.id"
+
+     class="charts-group">
     <div
-      ng-click="isDetailsOpened = !isDetailsOpened;"
-      ng-init="isDetailsOpened = true;"
-      class="disclosure"
-      ng-class="{disclosed: isDetailsOpened}">
-      <form
-        novalidate
-        style="display:inline-block;position:relative;"
-        ng-click="$event.stopPropagation()">
+       ng-click="scope.isDetailsOpened = !scope.isDetailsOpened;"
+       ng-init="scope.isDetailsOpened = true;"
+       class="disclosure"
+       ng-class="{disclosed: scope.isDetailsOpened}">
+      <form novalidate
+            style="display: inline-block;"
+            ng-mouseleave="statisticsNewCtl.hideGroupControls(scope, group);"
+            ng-click="$event.stopPropagation();"
+            ng-submit="scope.initName = group.name;
+                       statisticsNewCtl.saveScenarios();
+                       statisticsNewCtl.hideGroupControls(scope, group);
+                       scope.focusOnSubmit = true;">
         <input
-          ng-model="group.name"
-          ng-blur="statisticsNewCtl.saveScenarios()"
-          autocorrect="off"
-          spellcheck="false"
-          autocapitalize="off">
+           ng-model="group.name"
+           autocorrect="off"
+           spellcheck="false"
+           autocapitalize="off"
+           type="text"
+           class="charts-group-name"
+           ng-focus="scope.showGroupControls = true;
+                     scope.initName = group.name;"
+           ng-blur="statisticsNewCtl.onGroupNameBlur(scope, group)"
+           ng-attr-size="{{group.name.length + 3}}">
+        <button
+           type="submit"
+           title="save chart"
+           class="outline icon fa-check"
+           mn-focus="scope.focusOnSubmit"
+           ng-show="scope.showGroupControls"
+           ng-mousedown="scope.onControlClick = true;">
+        </button>
         <span
-          title="delete chart"
-          class="icon fa-trash"
-          ng-click="statisticsNewCtl.deleteGroup(group)"></span>
+           title="delete group"
+           class="icon fa-trash"
+           ng-show="scope.showGroupControls"
+           ng-mousedown="scope.onControlClick = true;
+                         statisticsNewCtl.deleteGroup(group);
+                         statisticsNewCtl.hideGroupControls(scope, group)">
+        </span>
       </form>
     </div>
 
-    <div ng-if="isDetailsOpened" class="row charts">
+    <div ng-if="scope.isDetailsOpened" class="row charts">
+      <div
+         ng-repeat="config in group.charts track by config.id"
+         ng-class="'statistics-' + config.size"
+         mn-statistics-chart
+         nodes="statisticsNewCtl.nodes"
+         class="panel"
+         rbac="rbac"
+         config="config"></div>
       <div
-        ng-repeat="config in group.charts track by config.id"
-        ng-class="'statistics-' + config.size"
-        mn-statistics-chart
-        nodes="statisticsNewCtl.nodes"
-        class="panel"
-        rbac="rbac"
-        config="config"></div>
-      <div class="chart-adder"
-           ng-click="statisticsNewCtl.openChartBuilderDialog()">
+         class="chart-adder"
+         ng-click="statisticsNewCtl.openChartBuilderDialog()">
       </div>
     </div>
   </div>
-  <div ng-show="statisticsNewCtl.statisticsService.scenarios.selected &&
-                !statisticsNewCtl.statisticsService.scenarios.selected.groups.length"
-       class="zero-content">
+  <div
+     ng-show="statisticsNewCtl.statisticsService.scenarios.selected &&
+              !statisticsNewCtl.statisticsService.scenarios.selected.groups.length"
+     class="zero-content">
     No charts to display yet. Use Add Group to first add groups and then charts.<br>
     NOTE: All your changes will be auto-saved.
   </div>
diff --git a/priv/public/ui/app/mn_admin/mn_statistics/mn_statistics_controller.js b/priv/public/ui/app/mn_admin/mn_statistics/mn_statistics_controller.js
index e9fed40234..8bd334237e 100644
--- a/priv/public/ui/app/mn_admin/mn_statistics/mn_statistics_controller.js
+++ b/priv/public/ui/app/mn_admin/mn_statistics/mn_statistics_controller.js
@@ -18,15 +18,19 @@
     ])
     .controller('mnStatisticsNewController', mnStatisticsNewController);
 
-  function mnStatisticsNewController($scope, mnStatisticsNewService, $state, $http, mnPoller, mnBucketsService, $uibModal, $rootScope, mnHelper, $window, mnUserRolesService, permissions) {
+  function mnStatisticsNewController($scope, mnStatisticsNewService, $state, $http, mnPoller, mnBucketsService, $uibModal, $rootScope, mnHelper, $window, mnUserRolesService, permissions, $timeout, $document) {
     var vm = this;
 
     vm.onSelectScenario = onSelectScenario;
     vm.onSelectZoom = onSelectZoom;
+    vm.$document = $document;
 
     vm.statisticsService = mnStatisticsNewService.export;
     vm.saveScenarios = mnStatisticsNewService.saveScenarios;
 
+    vm.hideGroupControls = hideGroupControls;
+    vm.onGroupNameBlur = onGroupNameBlur;
+
     if (vm.statisticsService.scenarios.selected) {
       $state.go("^.statistics", {
         scenario: vm.statisticsService.scenarios.selected.id,
@@ -48,6 +52,20 @@
 
     activate();
 
+    function onGroupNameBlur(scope, group) {
+      if (!scope.onControlClick) {
+        scope.showGroupControls = false;
+        group.name = scope.initName;
+      }
+    }
+
+    function hideGroupControls(scope, group) {
+      if (scope.onControlClick) {
+        scope.onControlClick = false;
+        onGroupNameBlur(scope, group);
+      }
+    }
+
     function openScenarioDialog(scenario) {
       $uibModal.open({
         templateUrl: 'app/mn_admin/mn_statistics/mn_statistics_scenario.html',
@@ -77,7 +95,7 @@
 
     function deleteGroup(group) {
       $uibModal.open({
-        templateUrl: 'app/mn_admin/mn_statistics/mn_statistics_scenario_delete.html',
+        templateUrl: 'app/mn_admin/mn_statistics/mn_statistics_group_delete.html',
       }).result.then(function () {
         mnStatisticsNewService.deleteGroup(group);
       });
diff --git a/priv/public/ui/app/mn_admin/mn_statistics/mn_statistics_group_delete.html b/priv/public/ui/app/mn_admin/mn_statistics/mn_statistics_group_delete.html
new file mode 100644
index 0000000000..be8ef7a049
--- /dev/null
+++ b/priv/public/ui/app/mn_admin/mn_statistics/mn_statistics_group_delete.html
@@ -0,0 +1,17 @@
+<div class="dialog-small">
+  <h2 class="panel-header">
+    Delete Group
+  </h2>
+  <form ng-submit="$close()">
+    <div class="panel-content">
+      <div class="row flex-left">
+        <span class="icon fa-warning fa-2x red-3"></span>
+          <p>Delete this group and all its charts?</p>
+      </div>
+    </div>
+    <div class="panel-footer">
+      <a ng-click="$dismiss()">Cancel</a>
+      <button type="submit" mn-focus="">Delete Group</button>
+    </div>
+  </form>
+</div>
diff --git a/priv/public/ui/app/mn_admin/mn_statistics/mn_statistics_scenario_delete.html b/priv/public/ui/app/mn_admin/mn_statistics/mn_statistics_scenario_delete.html
index c1fdac6fa6..e6bf93e84f 100644
--- a/priv/public/ui/app/mn_admin/mn_statistics/mn_statistics_scenario_delete.html
+++ b/priv/public/ui/app/mn_admin/mn_statistics/mn_statistics_scenario_delete.html
@@ -1,14 +1,17 @@
-<div class="dialog-med">
+<div class="dialog-small">
   <h2 class="panel-header">
-    Confirm Removing
+    Delete Scenario
   </h2>
   <form ng-submit="$close()">
-    <p class="panel-content">
-      Are you sure you want to delete it?
-    </p>
+    <div class="panel-content">
+      <div class="row flex-left">
+        <span class="icon fa-warning fa-2x red-3"></span>
+          <p>Delete this scenario?</p>
+      </div>
+    </div>
     <div class="panel-footer">
       <a ng-click="$dismiss()">Cancel</a>
-      <button type="submit" mn-focus="">Confirm</button>
+      <button type="submit" mn-focus="">Delete Scenario</button>
     </div>
   </form>
 </div>