Merge pull request #680 from prymitive/animate-updates

feat(ui): flash annotation text on changes
prymitive · May 5, 2019 · 52e3a76 · 52e3a76
2 parents ee26677 + d75ad04
commit 52e3a76
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 6 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -45,6 +45,7 @@
     "react-onclickoutside": "6.8.0",
     "react-popper": "1.3.3",
     "react-resize-detector": "4.1.3",
+    "react-reveal": "1.2.2",
     "react-scripts": "3.0.0",
     "react-select": "2.4.3",
     "react-tippy": "1.2.3",

diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap
@@ -29,7 +29,9 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
           help:
         </span>
         <span class=\\"Linkify\\">
-          some long text
+          <span style=\\"opacity: 1;\\">
+            some long text
+          </span>
         </span>
       </div>
     </div>
@@ -187,7 +189,9 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
           help:
         </span>
         <span class=\\"Linkify\\">
-          some long text
+          <span style=\\"opacity: 1;\\">
+            some long text
+          </span>
         </span>
       </div>
     </div>

diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap
@@ -78,7 +78,9 @@ exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=true 1`] = `
       foo:
     </span>
     <span class=\\"Linkify\\">
-      some long text
+      <span>
+        some long text
+      </span>
     </span>
   </div>
 </div>

diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.js
@@ -6,6 +6,8 @@ import { observer, inject } from "mobx-react";
 
 import Linkify from "react-linkify";
 
+import Flash from "react-reveal/Flash";
+
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkAlt";
 import { faSearchPlus } from "@fortawesome/free-solid-svg-icons/faSearchPlus";
@@ -93,7 +95,9 @@ const RenderNonLinkAnnotation = inject("alertStore")(
                   rel: "noopener noreferrer"
                 }}
               >
-                {value}
+                <Flash spy={value}>
+                  <span>{value}</span>
+                </Flash>
               </Linkify>
             </div>
           </TooltipWrapper>

diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
@@ -29,7 +29,9 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
           summary:
         </span>
         <span class=\\"Linkify\\">
-          This is summary
+          <span style=\\"opacity: 1;\\">
+            This is summary
+          </span>
         </span>
       </div>
     </div>
@@ -172,7 +174,9 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
           summary:
         </span>
         <span class=\\"Linkify\\">
-          This is summary
+          <span style=\\"opacity: 1;\\">
+            This is summary
+          </span>
         </span>
       </div>
     </div>

diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -9343,6 +9343,13 @@ react-resize-detector@4.1.3:
     raf-schd "^4.0.0"
     resize-observer-polyfill "^1.5.1"
 
+react-reveal@1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/react-reveal/-/react-reveal-1.2.2.tgz#f47fbc44debc4c185ae2163a215a9e822c7adfef"
+  integrity sha512-JCv3fAoU6Z+Lcd8U48bwzm4pMZ79qsedSXYwpwt6lJNtj/v5nKJYZZbw3yhaQPPgYePo3Y0NOCoYOq/jcsisuw==
+  dependencies:
+    prop-types "^15.5.10"
+
 react-scripts@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.0.0.tgz#a715613ef3eace025907b409cec8505096e0233e"