refactor: 💡 move embeddable data-title setting to render-compl

Author: streamich

src/plugins/embeddable/public/lib/embeddables/embeddable.tsx

@@ -19,6 +19,7 @@
 
 import { cloneDeep, isEqual } from 'lodash';
 import * as Rx from 'rxjs';
+import { distinctUntilChanged, map } from 'rxjs/operators';
 import { RenderCompleteDispatcher } from '../../../../kibana_utils/public';
 import { Adapters, ViewMode } from '../types';
 import { IContainer } from '../containers';
@@ -80,6 +81,15 @@ export abstract class Embeddable<
         this.onResetInput(newInput);
       });
     }
+
+    this.getOutput$()
+      .pipe(
+        map(({ title }) => title || ''),
+        distinctUntilChanged()
+      )
+      .subscribe((title) => {
+        this.renderComplete.setTitle(title);
+      });
   }
 
   public getIsContainer(): this is IContainer {
@@ -108,8 +118,8 @@ export abstract class Embeddable<
     return this.input;
   }
 
-  public getTitle() {
-    return this.output.title;
+  public getTitle(): string {
+    return this.output.title || '';
   }
 
   /**
@@ -138,8 +148,7 @@ export abstract class Embeddable<
 
   public render(el: HTMLElement): void {
     this.renderComplete.setEl(el);
-
-    el.setAttribute('data-title', this.output.title || '');
+    this.renderComplete.setTitle(this.output.title || '');
 
     if (this.destroyed) {
       throw new Error('Embeddable has been destroyed');

src/plugins/kibana_utils/public/render_complete/render_complete_dispatcher.ts

@@ -75,4 +75,9 @@ export class RenderCompleteDispatcher {
     this.el.setAttribute('data-render-complete', 'false');
     this.el.setAttribute('data-rendering-count', String(this.count));
   }
+
+  public setTitle(title: string) {
+    if (!this.el) return;
+    this.el.setAttribute('data-title', title);
+  }
 }

src/plugins/visualizations/public/embeddable/visualize_embeddable.ts

@@ -84,7 +84,6 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
   private timefilter: TimefilterContract;
   private timeRange?: TimeRange;
   private query?: Query;
-  private title?: string;
   private filters?: Filter[];
   private visCustomizations?: Pick<VisualizeInput, 'vis' | 'table'>;
   private subscriptions: Subscription[] = [];
@@ -157,7 +156,7 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
     if (!adapters) return;
 
     return this.deps.start().plugins.inspector.open(adapters, {
-      title: this.getTitle() || this.title || '',
+      title: this.getTitle(),
     });
   };
 
@@ -221,16 +220,6 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
       this.updateOutput({ title: this.vis.title });
     }
 
-    // Keep title depending on the output Embeddable to decouple the
-    // visual appearance of the title and the actual title content (useful in Dashboard)
-    if (this.output.title !== this.title) {
-      this.title = this.output.title;
-
-      if (this.domNode) {
-        this.domNode.setAttribute('data-title', this.title || '');
-      }
-    }
-
     if (this.vis.description && this.domNode) {
       this.domNode.setAttribute('data-description', this.vis.description);
     }