fix(core/entityTag): Fix notifications popover re-mounting during eac…

…h render.
spinnaker · Mar 21, 2018 · 5c3b1b9 · 5c3b1b9
1 parent 2f85ee3
commit 5c3b1b9
Showing 1 changed file with 30 additions and 29 deletions.
diff --git a/app/scripts/modules/core/src/entityTag/notifications/NotificationsPopover.tsx b/app/scripts/modules/core/src/entityTag/notifications/NotificationsPopover.tsx
@@ -159,50 +159,51 @@ export class NotificationsPopover extends React.Component<INotificationsPopoverP
     ReactGA.event({ action: 'SPAN', category: 'Alerts hovered', label: analyticsLabel });
   }
 
+  private PopoverContent = ({ hidePopover }: IHoverablePopoverContentsProps) => {
+    const { type, categorized, grouped } = this.props;
+    const { notifications } = this.state;
+
+    const handleEditNotification = (notification: INotification) => {
+      hidePopover();
+      this.handleEditNotification(notification);
+    };
+
+    const handleDeleteNotification = (notification: INotification) => {
+      hidePopover();
+      this.handleDeleteNotification(notification);
+    };
+
+    return (
+      <NotificationsPopoverContents
+        type={type}
+        categorized={categorized}
+        grouped={grouped}
+        notifications={notifications}
+        hidePopover={hidePopover}
+        handleEditNotification={handleEditNotification}
+        handleDeleteNotification={handleDeleteNotification}
+      />
+    );
+  };
 
   public render() {
-    const { type, categorized, grouped, className, placement, hOffsetPercent } = this.props;
-    const { count, severity, notifications } = this.state;
+    const { type, className, placement, hOffsetPercent } = this.props;
+    const { count, severity } = this.state;
+    const { title, icon } = types[type];
     if (count < 1) {
       return null;
     }
 
     // e.g., alerts-severity-0 alerts-severity-2 notices-severity-0
     const severityClass = `${type}-severity-${Math.min(Math.max(severity, 0), 2)}`;
 
-    const { title, icon } = types[type];
-
-    const PopoverContent = ({ hidePopover }: IHoverablePopoverContentsProps) => {
-      const handleEditNotification = (notification: INotification) => {
-        hidePopover();
-        this.handleEditNotification(notification);
-      };
-
-      const handleDeleteNotification = (notification: INotification) => {
-        hidePopover();
-        this.handleDeleteNotification(notification);
-      };
-
-      return (
-        <NotificationsPopoverContents
-          type={type}
-          categorized={categorized}
-          grouped={grouped}
-          notifications={notifications}
-          hidePopover={hidePopover}
-          handleEditNotification={handleEditNotification}
-          handleDeleteNotification={handleDeleteNotification}
-        />
-      );
-    };
-
     return (
       <span className={`tag-marker small ${className || ''}`} onMouseEnter={this.fireGAEvent}>
         <HoverablePopover
           delayShow={100}
           placement={placement}
           hOffsetPercent={hOffsetPercent}
-          Component={PopoverContent}
+          Component={this.PopoverContent}
           title={title}
           className={`no-padding notifications-popover ${severityClass}`}
         >