[grafana panel add/remove tag dynamically] fix: when dynamically remove and add tag, tab template and directive is not updated correctly #grafana #angularjs

panel_ctrl.ts

// ...

export class PanelCtrl {
  // ...
  
   addEditorTab(title, directiveFn, index?) {
    let editorTab = { title, directiveFn };
    if (_.isString(directiveFn)) {
      editorTab.directiveFn = function() {
        return { templateUrl: directiveFn };
      };
    }
    if (index) {
      this.editorTabs.splice(index, 0, editorTab);
    } else {
      this.editorTabs.push(editorTab);
    }
  }

  // remove tab by title
  removeEditorTab(title) {
    this.editorTabs = this.editorTabs.filter(item => item.title !== title);
  }
}

panel_editor_tab.ts

///<reference path="../../headers/common.d.ts" />

import angular from "angular";

var directiveModule = angular.module("grafana.directives");

/** @ngInject */
function panelEditorTab(dynamicDirectiveSrv) {
  return dynamicDirectiveSrv.create({
    scope: {
      ctrl: "=",
      editorTab: "=",
      index: "=",
    },
    directive: scope => {
      var pluginId = scope.ctrl.pluginId
        ? scope.ctrl.pluginId
        : new Date().getTime();
      // var tabIndex = scope.index;
      // create a wrapper for directiveFn
      // required for metrics tab directive
      // that is the same for many panels but
      // given different names in this function
      var fn = () => scope.editorTab.directiveFn();

      return Promise.resolve({
        // name: `panel-editor-tab-${pluginId}${tabIndex}`,
        // When we load tabs directives according to some conditions in one plugin,
        // we will update `editorTabs`.
        // But tab directive may not be updated because tabIndex remains the same as the previous one.
        // So we use editorTab.title for unique id here.
        name: `panel-editor-tab-${pluginId}${scope.editorTab.title}`,
        fn: fn,
      });
    },
  });
}

directiveModule.directive("panelEditorTab", panelEditorTab);