Refactor bs-alert to remove @localcopy and avoid mutation after consumption error in Ember canary (ember-bootstrap#2027)

* Refactor bs-alert to remove @localcopy

The `@localCopy` decorate caused issues on Ember canary builds.
By refactoring this component to use pure Ember reactivity we can get
rid of the decorator.

* Allow re-enabling of alert using property after hiding it by clicking

Author: SanderKnauff

addon/components/bs-alert.hbs

@@ -2,6 +2,7 @@
   class="{{unless this.hidden "alert"}} {{if this.fade "fade"}} {{if this.dismissible "alert-dismissible"}} {{bs-type-class "alert" @type}} {{if this.showAlert (if (macroCondition (macroGetOwnConfig "isNotBS3")) "show" "in")}}"
   ...attributes
   {{did-update this.showOrHide this._visible}}
+  {{did-update this.updateVisibility @visible}}
 >
   {{#unless this.hidden}}
     {{#if this.dismissible}}

addon/components/bs-alert.js

@@ -5,7 +5,6 @@ import { later } from '@ember/runloop';
 import usesTransition from 'ember-bootstrap/utils/decorators/uses-transition';
 import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 import arg from 'ember-bootstrap/utils/decorators/arg';
-import { localCopy } from 'tracked-toolbox';
 
 /**
   Implements [Bootstrap alerts](http://getbootstrap.com/components/#alerts)
@@ -74,12 +73,6 @@ export default class Alert extends Component {
   @tracked
   hidden = !this.visible;
 
-  /**
-   * This is an unfortunate duplication of the previous property, but this is untracked to avoid causing the dreaded "same computation" assertion in GlimmerVM when reading a tracked property before setting it.
-   * @private
-   */
-  _hidden = !this.visible;
-
   /**
    * This property controls if the alert should be visible. If false it might still be in the DOM until the fade animation
    * has completed.
@@ -92,15 +85,16 @@ export default class Alert extends Component {
    * @default true
    * @public
    */
-  @arg
-  visible = true;
+  get visible() {
+    return this._visible ?? true;
+  }
 
   /**
    * @property _visible
    * @private
    */
-  @localCopy('visible')
-  _visible;
+  @tracked
+  _visible = this.args.visible;
 
   /**
    * Set to false to disable the fade out animation when hiding the alert.
@@ -114,7 +108,7 @@ export default class Alert extends Component {
   fade = true;
 
   get showAlert() {
-    return this._visible && this.args.fade !== false;
+    return this.visible && this.args.fade !== false;
   }
 
   /**
@@ -180,7 +174,7 @@ export default class Alert extends Component {
    * @private
    */
   show() {
-    this.hidden = this._hidden = false;
+    this.hidden = false;
   }
 
   /**
@@ -191,7 +185,7 @@ export default class Alert extends Component {
    * @private
    */
   hide() {
-    if (this._hidden) {
+    if (this.hidden) {
       return;
     }
 
@@ -200,24 +194,29 @@ export default class Alert extends Component {
         this,
         function () {
           if (!this.isDestroyed) {
-            this.hidden = this._hidden = true;
+            this.hidden = true;
             this.args.onDismissed?.();
           }
         },
         this.fadeDuration
       );
     } else {
-      this.hidden = this._hidden = true;
+      this.hidden = true;
       this.args.onDismissed?.();
     }
   }
 
   @action
   showOrHide() {
-    if (this._visible) {
+    if (this.visible) {
       this.show();
     } else {
       this.hide();
     }
   }
+
+  @action
+  updateVisibility() {
+    this._visible = this.args.visible;
+  }
 }

tests/integration/components/bs-alert-test.js

@@ -150,6 +150,34 @@ module('Integration | Component | bs-alert', function (hooks) {
     assert.dom('.alert').hasClass('alert-success', 'alert has type class');
   });
 
+  test('alert can be made visible when setting visible=true after manually dismissing it', async function (assert) {
+    this.set('visible', true);
+
+    this.set('handleOnDismissed', () => {
+      this.set('visible', false);
+    });
+
+    await render(hbs`<BsAlert
+      @type='success'
+      @fade={{false}}
+      @visible={{this.visible}}
+      @onDismissed={{this.handleOnDismissed}}
+    >
+      Test
+    </BsAlert>`);
+
+    assert.dom('.alert').exists('alert has alert class');
+    assert.dom('button.close').exists({ count: 1 }, 'alert has close button');
+
+    await click('button.close');
+    assert.dom('.alert').doesNotExist('alert has no alert class');
+    assert.dom('*').hasText('', 'alert has no content');
+
+    this.set('visible', true);
+
+    assert.dom('.alert').exists('alert has alert class');
+  });
+
   test('dismissing alert does not change public visible property (DDAU)', async function (assert) {
     this.set('visible', true);
     await render(hbs`<BsAlert @type="success" @visible={{this.visible}} @fade={{false}}>Test</BsAlert>`);