From 954ab4e0ece91e181b868ed4a463e849a3037614 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Mon, 13 Dec 2021 11:22:02 -0500
Subject: [PATCH] DEV: Refactor popup-tip component (#15257)

---
 .../app/components/popup-input-tip.js         | 55 +++----------------
 .../discourse/app/controllers/composer.js     |  4 ++
 .../templates/components/popup-input-tip.hbs  |  2 +-
 .../stylesheets/common/base/compose.scss      |  4 --
 app/assets/stylesheets/common/input_tip.scss  | 33 +++++++----
 5 files changed, 35 insertions(+), 63 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/popup-input-tip.js b/app/assets/javascripts/discourse/app/components/popup-input-tip.js
index e94a2a87868..7b1c5bc6135 100644
--- a/app/assets/javascripts/discourse/app/components/popup-input-tip.js
+++ b/app/assets/javascripts/discourse/app/components/popup-input-tip.js
@@ -1,17 +1,16 @@
-import { alias, not } from "@ember/object/computed";
-import discourseComputed, { observes } from "discourse-common/utils/decorators";
+import { alias, not, or } from "@ember/object/computed";
+import discourseComputed from "discourse-common/utils/decorators";
 import Component from "@ember/component";
-import { iconHTML } from "discourse-common/lib/icon-library";
+import { getOwner } from "discourse-common/lib/get-owner";
 
 export default Component.extend({
   classNameBindings: [":popup-tip", "good", "bad", "lastShownAt::hide"],
   attributeBindings: ["role"],
-  animateAttribute: null,
-  bouncePixels: 6,
-  bounceDelay: 100,
   rerenderTriggers: ["validation.reason"],
-  closeIcon: `${iconHTML("times-circle")}`.htmlSafe(),
   tipReason: null,
+  lastShownAt: or("shownAt", "validation.lastShownAt"),
+  bad: alias("validation.failed"),
+  good: not("bad"),
 
   @discourseComputed("bad")
   role(bad) {
@@ -22,30 +21,8 @@ export default Component.extend({
 
   click() {
     this.set("shownAt", null);
-    this.set("validation.lastShownAt", null);
-  },
-
-  bad: alias("validation.failed"),
-  good: not("bad"),
-
-  @discourseComputed("shownAt", "validation.lastShownAt")
-  lastShownAt(shownAt, lastShownAt) {
-    return shownAt || lastShownAt;
-  },
-
-  @observes("lastShownAt")
-  bounce() {
-    if (this.lastShownAt) {
-      let $elem = $(this.element);
-      if (!this.animateAttribute) {
-        this.animateAttribute = $elem.css("left") === "auto" ? "right" : "left";
-      }
-      if (this.animateAttribute === "left") {
-        this.bounceLeft($elem);
-      } else {
-        this.bounceRight($elem);
-      }
-    }
+    const composer = getOwner(this).lookup("controller:composer");
+    composer.clearLastValidatedAt();
   },
 
   didReceiveAttrs() {
@@ -57,20 +34,4 @@ export default Component.extend({
       this.set("tipReason", null);
     }
   },
-
-  bounceLeft($elem) {
-    for (let i = 0; i < 5; i++) {
-      $elem
-        .animate({ left: "+=" + this.bouncePixels }, this.bounceDelay)
-        .animate({ left: "-=" + this.bouncePixels }, this.bounceDelay);
-    }
-  },
-
-  bounceRight($elem) {
-    for (let i = 0; i < 5; i++) {
-      $elem
-        .animate({ right: "-=" + this.bouncePixels }, this.bounceDelay)
-        .animate({ right: "+=" + this.bouncePixels }, this.bounceDelay);
-    }
-  },
 });
diff --git a/app/assets/javascripts/discourse/app/controllers/composer.js b/app/assets/javascripts/discourse/app/controllers/composer.js
index 9d85a476ba0..3fa65a4dd53 100644
--- a/app/assets/javascripts/discourse/app/controllers/composer.js
+++ b/app/assets/javascripts/discourse/app/controllers/composer.js
@@ -1415,4 +1415,8 @@ export default Controller.extend({
   visible(state) {
     return state && state !== "closed";
   },
+
+  clearLastValidatedAt() {
+    this.set("lastValidatedAt", null);
+  },
 });
diff --git a/app/assets/javascripts/discourse/app/templates/components/popup-input-tip.hbs b/app/assets/javascripts/discourse/app/templates/components/popup-input-tip.hbs
index f58909e3b20..6ac65b42ac2 100644
--- a/app/assets/javascripts/discourse/app/templates/components/popup-input-tip.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/popup-input-tip.hbs
@@ -1 +1 @@
-<span class="close">{{closeIcon}}</span>{{tipReason}}
+{{tipReason}} {{d-icon "times-circle"}}
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index b549cc3164f..d1b731c3de3 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -307,10 +307,6 @@
     z-index: z("composer", "dropdown");
   }
 
-  .popup-tip {
-    z-index: z("composer", "dropdown") + 1;
-  }
-
   .wmd-controls {
     position: relative;
     display: flex;
diff --git a/app/assets/stylesheets/common/input_tip.scss b/app/assets/stylesheets/common/input_tip.scss
index 8b9e8479448..77876f4dad9 100644
--- a/app/assets/stylesheets/common/input_tip.scss
+++ b/app/assets/stylesheets/common/input_tip.scss
@@ -1,8 +1,22 @@
+@keyframes slidein {
+  0% {
+    transform: translateX(0px);
+  }
+  50% {
+    transform: translateX(5px);
+  }
+  100% {
+    transform: translateX(0px);
+  }
+}
+
 .popup-tip {
+  @include form-item-sizing;
   position: absolute;
-  display: block;
-  padding: 5px 10px;
-  z-index: z("tooltip");
+  z-index: z("composer", "dropdown") + 1;
+  cursor: pointer;
+  animation: 0.15s slidein 3;
+
   &.bad {
     background: var(--danger-medium);
     color: white;
@@ -12,15 +26,12 @@
   &.good {
     display: none;
   }
-  .close {
-    float: right;
+  .d-icon {
     color: var(--primary);
     opacity: 0.5;
-    font-size: $font-0;
-    margin: 0 0 0 4px;
-    cursor: pointer;
-  }
-  .close:hover {
-    opacity: 1;
+    font-size: var(--font-0);
+    &:hover {
+      opacity: 1;
+    }
   }
 }