feat: 🎸 make panel top-right corner number badge reactive

elastic · Mar 13, 2020 · 5074725 · 5074725
1 parent 4c7b251
commit 5074725
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx b/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx
@@ -81,6 +81,7 @@ export class EmbeddablePanel extends React.Component<Props, State> {
   private embeddableRoot: React.RefObject<HTMLDivElement>;
   private parentSubscription?: Subscription;
   private subscription?: Subscription;
+  private drilldownCountSubscription?: Subscription;
   private mounted: boolean = false;
   private generateId = htmlIdGenerator();
 
@@ -154,6 +155,9 @@ export class EmbeddablePanel extends React.Component<Props, State> {
     if (this.subscription) {
       this.subscription.unsubscribe();
     }
+    if (this.drilldownCountSubscription) {
+      this.drilldownCountSubscription.unsubscribe();
+    }
     if (this.parentSubscription) {
       this.parentSubscription.unsubscribe();
     }
@@ -210,10 +214,10 @@ export class EmbeddablePanel extends React.Component<Props, State> {
 
     const dynamicActions = this.props.embeddable.dynamicActions;
     if (dynamicActions) {
-      dynamicActions.count().then(drilldownCount => {
-        if (this.mounted) {
-          this.setState({ drilldownCount });
-        }
+      this.setState({ drilldownCount: dynamicActions.state.get().events.length });
+      this.drilldownCountSubscription = dynamicActions.state.state$.subscribe(({ events }) => {
+        if (!this.mounted) return;
+        this.setState({ drilldownCount: events.length });
       });
     }
   }

diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx
@@ -150,7 +150,7 @@ export function PanelHeader({
         )}
         {renderBadges(badges, embeddable)}
       </h2>
-      {!isViewMode && drilldownCount && (
+      {!isViewMode && !!drilldownCount && (
         <EuiNotificationBadge style={{ marginTop: '4px', marginRight: '4px' }}>
           {drilldownCount}
         </EuiNotificationBadge>

diff --git a/src/plugins/ui_actions/public/actions/dynamic_action_manager.ts b/src/plugins/ui_actions/public/actions/dynamic_action_manager.ts
@@ -220,7 +220,7 @@ export class DynamicActionManager {
   /**
    * @deprecated
    *
-   * Use `.state.getState()` instead.
+   * Use `.state.get().events` instead.
    */
   public async list(): Promise<readonly SerializedEvent[]> {
     return this.state.get().events;
@@ -229,9 +229,9 @@ export class DynamicActionManager {
   /**
    * @deprecated
    *
-   * Use `.state.getState()` instead.
+   * Use `.state.get().events.length` instead.
    */
   public async count(): Promise<number> {
-    return (await this.list()).length;
+    return this.state.get().events.length;
   }
 }