From 6d95418cc114a6902846464d121bd06e4c2d2c96 Mon Sep 17 00:00:00 2001
From: Dmitry S <dsagal+git@gmail.com>
Date: Mon, 9 Nov 2020 21:36:03 -0500
Subject: [PATCH] (core) Close previous example card in the rare cases when a
 second one might be triggered

Test Plan: Added a test case

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2656
---
 app/client/ui/ExampleCard.ts | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/client/ui/ExampleCard.ts b/app/client/ui/ExampleCard.ts
index a6b8e09f..0f6d170a 100644
--- a/app/client/ui/ExampleCard.ts
+++ b/app/client/ui/ExampleCard.ts
@@ -7,6 +7,8 @@ import {icon} from 'app/client/ui2018/icons';
 import {cssLink} from 'app/client/ui2018/links';
 import {dom, Observable, styled} from 'grainjs';
 
+let prevCardClose: (() => void)|null = null;
+
 // Open a popup with a card introducing this example, if the user hasn't dismissed it in the past.
 export function showExampleCard(
   example: IExampleInfo, appModel: AppModel, btnElem: HTMLElement, reopen: boolean = false
@@ -31,6 +33,7 @@ export function showExampleCard(
 
   // Close the example card.
   function close() {
+    prevCardClose = null;
     collapseAndRemoveCard(cardElem, btnElem.getBoundingClientRect());
     // If we fail to save this preference, it's probably not worth alerting the user about,
     // so just log to console.
@@ -66,13 +69,21 @@ export function showExampleCard(
   if (reopen) {
     expandCard(cardElem, btnElem.getBoundingClientRect());
   }
+
+  prevCardClose?.();
+  prevCardClose = () => disposeCard(cardElem);
+}
+
+function disposeCard(cardElem: HTMLElement) {
+  dom.domDispose(cardElem);
+  cardElem.remove();
 }
 
 // When closing the card, collapse it visually into the button that can open it again, to hint to
 // the user where to find that button. Remove the card after the animation.
 function collapseAndRemoveCard(card: HTMLElement, collapsedRect: DOMRect) {
   const watcher = new TransitionWatcher(card);
-  watcher.onDispose(() => card.remove());
+  watcher.onDispose(() => disposeCard(card));
   collapseCard(card, collapsedRect);
 }