Trigger panel.render on title, description, links change #14333

public/app/features/panel/GeneralTabCtrl.ts

 import coreModule from 'app/core/core_module';
 import coreModule from 'app/core/core_module';
 
 
+const obj2string = obj => {
+  return Object.keys(obj)
+    .reduce((acc, curr) => acc.concat(curr + '=' + obj[curr]), [])
+    .join();
+};
+
 export class GeneralTabCtrl {
 export class GeneralTabCtrl {
   panelCtrl: any;
   panelCtrl: any;
 
 
   /** @ngInject */
   /** @ngInject */
   constructor($scope) {
   constructor($scope) {
     this.panelCtrl = $scope.ctrl;
     this.panelCtrl = $scope.ctrl;
+
+    const updatePanel = () => {
+      console.log('panel.render()');
+      this.panelCtrl.panel.render();
+    };
+
+    const generateValueFromPanel = scope => {
+      const { panel } = scope.ctrl;
+      const panelPropsToTrack = ['title', 'description', 'transparent', 'repeat', 'repeatDirection', 'minSpan'];
+      const panelPropsString = panelPropsToTrack
+        .map(prop => (panel[prop] && panel[prop].toString ? panel[prop].toString() : panel[prop]))
+        .join();
+      const panelLinks = panel.links;
+      const panelLinksString = panelLinks.map(obj2string).join();
+      return panelPropsString + panelLinksString;
+    };
+
+    $scope.$watch(generateValueFromPanel, updatePanel, true);
   }
   }
 }
 }
 
 

public/app/features/panel/partials/general_tab.html

@@ -3,11 +3,11 @@
 		<h5 class="section-heading">Info</h5>
 		<h5 class="section-heading">Info</h5>
 		<div class="gf-form">
 		<div class="gf-form">
 			<span class="gf-form-label width-7">Title</span>
 			<span class="gf-form-label width-7">Title</span>
-			<input type="text" class="gf-form-input width-25" ng-model='ctrl.panel.title'></input>
+			<input type="text" class="gf-form-input width-25" ng-model='ctrl.panel.title' ng-model-onblur></input>
 		</div>
 		</div>
 		<div class="gf-form gf-form--v-stretch">
 		<div class="gf-form gf-form--v-stretch">
 			<span class="gf-form-label width-7">Description</span>
 			<span class="gf-form-label width-7">Description</span>
-			<textarea class="gf-form-input width-25" rows="3" ng-model="ctrl.panel.description"  placeholder="Panel description, supports markdown & links"></textarea>
+			<textarea class="gf-form-input width-25" rows="3" ng-model="ctrl.panel.description" ng-model-onblur placeholder="Panel description, supports markdown & links"></textarea>
 		</div>
 		</div>
     <gf-form-switch class="gf-form" label-class="width-7" switch-class="max-width-6" label="Transparent" checked="ctrl.panel.transparent" on-change="ctrl.render()"></gf-form-switch>
     <gf-form-switch class="gf-form" label-class="width-7" switch-class="max-width-6" label="Transparent" checked="ctrl.panel.transparent" on-change="ctrl.render()"></gf-form-switch>
 	</div>
 	</div>