feat(ui): animate toggle icon on changes

2026-05-05 03:16:51 +00:00 · 2020-04-22 09:55:02 +01:00
parent 8b3aaebb63
commit 5bb3b92a70
16 changed files with 135 additions and 49 deletions
--- a/ui/src/Components/Accordion/index.tsx
+++ b/ui/src/Components/Accordion/index.tsx
@@ -2,9 +2,7 @@ import React, { FunctionComponent, ReactNode } from "react";

 import Collapsible from "react-collapsible";

-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
+import { ToggleIcon } from "Components/ToggleIcon";

 const Trigger: FunctionComponent<{ text: string; isOpen: boolean }> = ({
  text,
@@ -13,10 +11,7 @@ const Trigger: FunctionComponent<{ text: string; isOpen: boolean }> = ({
  <div className="d-flex flex-row justify-content-between">
    <div>{text}</div>
    <div>
-      <FontAwesomeIcon
-        icon={isOpen ? faChevronDown : faChevronUp}
-        className="text-muted"
-      />
+      <ToggleIcon isOpen={isOpen} className="text-muted" />
    </div>
  </div>
 );
--- 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
@@ -329,14 +329,15 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
              <svg aria-hidden=\\"true\\"
                   focusable=\\"false\\"
                   data-prefix=\\"fas\\"
-                   data-icon=\\"chevron-up\\"
-                   class=\\"svg-inline--fa fa-chevron-up fa-w-14 components-managed-silence-icon 0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
+                   data-icon=\\"chevron-down\\"
+                   class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 components-managed-silence-icon 0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
                   role=\\"img\\"
                   xmlns=\\"http://www.w3.org/2000/svg\\"
                   viewbox=\\"0 0 448 512\\"
+                   style=\\"transition: transform 0.25s ease-in-out;\\"
              >
                <path fill=\\"currentColor\\"
-                      d=\\"M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z\\"
+                      d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
                >
                </path>
              </svg>
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js
@@ -3,10 +3,6 @@ import PropTypes from "prop-types";

 import { observer } from "mobx-react";

-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
-
 import { APIGroup } from "Models/API";
 import { AlertStore } from "Stores/AlertStore";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
@@ -14,6 +10,7 @@ import { FilteringLabel } from "Components/Labels/FilteringLabel";
 import { FilteringCounterBadge } from "Components/Labels/FilteringCounterBadge";
 import { TooltipWrapper } from "Components/TooltipWrapper";
 import { AlertAck } from "Components/AlertAck";
+import { ToggleIcon } from "Components/ToggleIcon";
 import { GroupMenu } from "./GroupMenu";

 const GroupHeader = observer(
@@ -121,9 +118,7 @@ const GroupHeader = observer(
              onClick={this.onCollapseClick}
            >
              <TooltipWrapper title="Click to toggle this group details or Alt+Click to toggle all groups">
-                <FontAwesomeIcon
-                  icon={collapseStore.value ? faChevronUp : faChevronDown}
-                />
+                <ToggleIcon isOpen={!collapseStore.value} />
              </TooltipWrapper>
            </span>
          </span>
--- a/ui/src/Components/Grid/AlertGrid/Grid.js
+++ b/ui/src/Components/Grid/AlertGrid/Grid.js
@@ -14,8 +14,6 @@ import MasonryInfiniteScroller from "react-masonry-infinite";

 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTh } from "@fortawesome/free-solid-svg-icons/faTh";
-import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
 import { faAngleDoubleDown } from "@fortawesome/free-solid-svg-icons/faAngleDoubleDown";

 import { AlertStore } from "Stores/AlertStore";
@@ -26,6 +24,7 @@ import { FilteringLabel } from "Components/Labels/FilteringLabel";
 import { FilteringCounterBadge } from "Components/Labels/FilteringCounterBadge";
 import { TooltipWrapper } from "Components/TooltipWrapper";
 import { ThemeContext } from "Components/Theme";
+import { ToggleIcon } from "Components/ToggleIcon";
 import { DefaultDetailsCollapseValue } from "./AlertGroup/DetailsToggle";
 import { AlertGroup } from "./AlertGroup";

@@ -231,11 +230,7 @@ const Grid = observer(
                    onClick={this.onCollapseClick}
                  >
                    <TooltipWrapper title="Click to toggle this grid details or Alt+Click to toggle all grids">
-                      <FontAwesomeIcon
-                        icon={
-                          this.gridToggle.show ? faChevronDown : faChevronUp
-                        }
-                      />
+                      <ToggleIcon isOpen={this.gridToggle.show} />
                    </TooltipWrapper>
                  </span>
                </span>
--- a/ui/src/Components/MainModal/Configuration/snapshots/index.test.js.snap
+++ b/ui/src/Components/MainModal/Configuration/snapshots/index.test.js.snap
@@ -18,6 +18,7 @@ exports[`<Configuration /> matches snapshot 1`] = `
               role=\\"img\\"
               xmlns=\\"http://www.w3.org/2000/svg\\"
               viewbox=\\"0 0 448 512\\"
+               style=\\"transition: transform 0.25s ease-in-out;\\"
          >
            <path fill=\\"currentColor\\"
                  d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
@@ -89,6 +90,7 @@ exports[`<Configuration /> matches snapshot 1`] = `
               role=\\"img\\"
               xmlns=\\"http://www.w3.org/2000/svg\\"
               viewbox=\\"0 0 448 512\\"
+               style=\\"transition: transform 0.25s ease-in-out;\\"
          >
            <path fill=\\"currentColor\\"
                  d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
@@ -137,6 +139,7 @@ exports[`<Configuration /> matches snapshot 1`] = `
               role=\\"img\\"
               xmlns=\\"http://www.w3.org/2000/svg\\"
               viewbox=\\"0 0 448 512\\"
+               style=\\"transition: transform 0.25s ease-in-out;\\"
          >
            <path fill=\\"currentColor\\"
                  d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
@@ -232,6 +235,7 @@ exports[`<Configuration /> matches snapshot 1`] = `
               role=\\"img\\"
               xmlns=\\"http://www.w3.org/2000/svg\\"
               viewbox=\\"0 0 448 512\\"
+               style=\\"transition: transform 0.25s ease-in-out;\\"
          >
            <path fill=\\"currentColor\\"
                  d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
@@ -303,6 +307,7 @@ exports[`<Configuration /> matches snapshot 1`] = `
               role=\\"img\\"
               xmlns=\\"http://www.w3.org/2000/svg\\"
               viewbox=\\"0 0 448 512\\"
+               style=\\"transition: transform 0.25s ease-in-out;\\"
          >
            <path fill=\\"currentColor\\"
                  d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
@@ -374,6 +379,7 @@ exports[`<Configuration /> matches snapshot 1`] = `
               role=\\"img\\"
               xmlns=\\"http://www.w3.org/2000/svg\\"
               viewbox=\\"0 0 448 512\\"
+               style=\\"transition: transform 0.25s ease-in-out;\\"
          >
            <path fill=\\"currentColor\\"
                  d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
@@ -453,6 +459,7 @@ exports[`<Configuration /> matches snapshot 1`] = `
               role=\\"img\\"
               xmlns=\\"http://www.w3.org/2000/svg\\"
               viewbox=\\"0 0 448 512\\"
+               style=\\"transition: transform 0.25s ease-in-out;\\"
          >
            <path fill=\\"currentColor\\"
                  d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
@@ -536,6 +543,7 @@ exports[`<Configuration /> matches snapshot 1`] = `
               role=\\"img\\"
               xmlns=\\"http://www.w3.org/2000/svg\\"
               viewbox=\\"0 0 448 512\\"
+               style=\\"transition: transform 0.25s ease-in-out;\\"
          >
            <path fill=\\"currentColor\\"
                  d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
--- a/ui/src/Components/MainModal/snapshots/Help.test.js.snap
+++ b/ui/src/Components/MainModal/snapshots/Help.test.js.snap
@@ -18,6 +18,7 @@ exports[`<Help /> matches snapshot 1`] = `
               role=\\"img\\"
               xmlns=\\"http://www.w3.org/2000/svg\\"
               viewbox=\\"0 0 448 512\\"
+               style=\\"transition:transform 0.25s ease-in-out\\"
          >
            <path fill=\\"currentColor\\"
                  d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
@@ -177,6 +178,7 @@ exports[`<Help /> matches snapshot 1`] = `
               role=\\"img\\"
               xmlns=\\"http://www.w3.org/2000/svg\\"
               viewbox=\\"0 0 448 512\\"
+               style=\\"transition:transform 0.25s ease-in-out\\"
          >
            <path fill=\\"currentColor\\"
                  d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
@@ -353,6 +355,7 @@ exports[`<Help /> matches snapshot 1`] = `
               role=\\"img\\"
               xmlns=\\"http://www.w3.org/2000/svg\\"
               viewbox=\\"0 0 448 512\\"
+               style=\\"transition:transform 0.25s ease-in-out\\"
          >
            <path fill=\\"currentColor\\"
                  d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
--- a/ui/src/Components/MainModal/snapshots/MainModalContent.test.js.snap
+++ b/ui/src/Components/MainModal/snapshots/MainModalContent.test.js.snap
@@ -37,6 +37,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                   role=\\"img\\"
                   xmlns=\\"http://www.w3.org/2000/svg\\"
                   viewbox=\\"0 0 448 512\\"
+                   style=\\"transition: transform 0.25s ease-in-out;\\"
              >
                <path fill=\\"currentColor\\"
                      d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
@@ -108,6 +109,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                   role=\\"img\\"
                   xmlns=\\"http://www.w3.org/2000/svg\\"
                   viewbox=\\"0 0 448 512\\"
+                   style=\\"transition: transform 0.25s ease-in-out;\\"
              >
                <path fill=\\"currentColor\\"
                      d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
@@ -156,6 +158,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                   role=\\"img\\"
                   xmlns=\\"http://www.w3.org/2000/svg\\"
                   viewbox=\\"0 0 448 512\\"
+                   style=\\"transition: transform 0.25s ease-in-out;\\"
              >
                <path fill=\\"currentColor\\"
                      d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
@@ -251,6 +254,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                   role=\\"img\\"
                   xmlns=\\"http://www.w3.org/2000/svg\\"
                   viewbox=\\"0 0 448 512\\"
+                   style=\\"transition: transform 0.25s ease-in-out;\\"
              >
                <path fill=\\"currentColor\\"
                      d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
@@ -322,6 +326,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                   role=\\"img\\"
                   xmlns=\\"http://www.w3.org/2000/svg\\"
                   viewbox=\\"0 0 448 512\\"
+                   style=\\"transition: transform 0.25s ease-in-out;\\"
              >
                <path fill=\\"currentColor\\"
                      d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
@@ -393,6 +398,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                   role=\\"img\\"
                   xmlns=\\"http://www.w3.org/2000/svg\\"
                   viewbox=\\"0 0 448 512\\"
+                   style=\\"transition: transform 0.25s ease-in-out;\\"
              >
                <path fill=\\"currentColor\\"
                      d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
@@ -472,6 +478,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                   role=\\"img\\"
                   xmlns=\\"http://www.w3.org/2000/svg\\"
                   viewbox=\\"0 0 448 512\\"
+                   style=\\"transition: transform 0.25s ease-in-out;\\"
              >
                <path fill=\\"currentColor\\"
                      d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
@@ -555,6 +562,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                   role=\\"img\\"
                   xmlns=\\"http://www.w3.org/2000/svg\\"
                   viewbox=\\"0 0 448 512\\"
+                   style=\\"transition: transform 0.25s ease-in-out;\\"
              >
                <path fill=\\"currentColor\\"
                      d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
--- a/ui/src/Components/ManagedSilence/SilenceComment.js
+++ b/ui/src/Components/ManagedSilence/SilenceComment.js
@@ -2,14 +2,13 @@ import React from "react";
 import PropTypes from "prop-types";

 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
 import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkAlt";
 import { faBellSlash } from "@fortawesome/free-solid-svg-icons/faBellSlash";

 import { APISilence } from "Models/API";
 import { AlertStore } from "Stores/AlertStore";
 import { FilteringCounterBadge } from "Components/Labels/FilteringCounterBadge";
+import { ToggleIcon } from "Components/ToggleIcon";
 import { SilenceProgress } from "./SilenceProgress";

 const SilenceComment = ({
@@ -89,8 +88,8 @@ const SilenceComment = ({
              alwaysVisible={alertCountAlwaysVisible}
              defaultColor="primary"
            />
-            <FontAwesomeIcon
-              icon={collapsed ? faChevronUp : faChevronDown}
+            <ToggleIcon
+              isOpen={!collapsed}
              className={`components-managed-silence-icon ${
                alertCount && alertCountAlwaysVisible && "my-sm-auto mt-2 mb-0"
              } ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer`}
--- a/ui/src/Components/ManagedSilence/SilenceComment.test.js
+++ b/ui/src/Components/ManagedSilence/SilenceComment.test.js
@@ -119,7 +119,7 @@ describe("<SilenceComment />", () => {

  it("collapseToggle is called when collapse icon is clicked", () => {
    const tree = MountedSilenceComment(true);
-    const collapse = tree.find("svg.fa-chevron-up");
+    const collapse = tree.find("svg.fa-chevron-down");
    collapse.simulate("click");
    expect(CollapseMock).toHaveBeenCalled();
  });
--- a/ui/src/Components/ManagedSilence/snapshots/SilenceComment.test.js.snap
+++ b/ui/src/Components/ManagedSilence/snapshots/SilenceComment.test.js.snap
@@ -52,14 +52,15 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
      <svg aria-hidden=\\"true\\"
           focusable=\\"false\\"
           data-prefix=\\"fas\\"
-           data-icon=\\"chevron-up\\"
-           class=\\"svg-inline--fa fa-chevron-up fa-w-14 components-managed-silence-icon undefined ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
+           data-icon=\\"chevron-down\\"
+           class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 components-managed-silence-icon undefined ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
           role=\\"img\\"
           xmlns=\\"http://www.w3.org/2000/svg\\"
           viewbox=\\"0 0 448 512\\"
+           style=\\"transition: transform 0.25s ease-in-out;\\"
      >
        <path fill=\\"currentColor\\"
-              d=\\"M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z\\"
+              d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
        >
        </path>
      </svg>
@@ -127,14 +128,15 @@ exports[`<SilenceComment /> Matches snapshot when collapsed and multiple cluster
      <svg aria-hidden=\\"true\\"
           focusable=\\"false\\"
           data-prefix=\\"fas\\"
-           data-icon=\\"chevron-up\\"
-           class=\\"svg-inline--fa fa-chevron-up fa-w-14 components-managed-silence-icon undefined ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
+           data-icon=\\"chevron-down\\"
+           class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 components-managed-silence-icon undefined ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
           role=\\"img\\"
           xmlns=\\"http://www.w3.org/2000/svg\\"
           viewbox=\\"0 0 448 512\\"
+           style=\\"transition: transform 0.25s ease-in-out;\\"
      >
        <path fill=\\"currentColor\\"
-              d=\\"M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z\\"
+              d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
        >
        </path>
      </svg>
@@ -195,6 +197,7 @@ exports[`<SilenceComment /> Matches snapshot when collapsed and multiple cluster
           role=\\"img\\"
           xmlns=\\"http://www.w3.org/2000/svg\\"
           viewbox=\\"0 0 448 512\\"
+           style=\\"transition: transform 0.25s ease-in-out;\\"
      >
        <path fill=\\"currentColor\\"
              d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
@@ -258,6 +261,7 @@ exports[`<SilenceComment /> Matches snapshot when expanded 1`] = `
           role=\\"img\\"
           xmlns=\\"http://www.w3.org/2000/svg\\"
           viewbox=\\"0 0 448 512\\"
+           style=\\"transition: transform 0.25s ease-in-out;\\"
      >
        <path fill=\\"currentColor\\"
              d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
--- a/ui/src/Components/ManagedSilence/snapshots/index.test.js.snap
+++ b/ui/src/Components/ManagedSilence/snapshots/index.test.js.snap
@@ -66,14 +66,15 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
          <svg aria-hidden=\\"true\\"
               focusable=\\"false\\"
               data-prefix=\\"fas\\"
-               data-icon=\\"chevron-up\\"
-               class=\\"svg-inline--fa fa-chevron-up fa-w-14 components-managed-silence-icon my-sm-auto mt-2 mb-0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
+               data-icon=\\"chevron-down\\"
+               class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 components-managed-silence-icon my-sm-auto mt-2 mb-0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
               role=\\"img\\"
               xmlns=\\"http://www.w3.org/2000/svg\\"
               viewbox=\\"0 0 448 512\\"
+               style=\\"transition: transform 0.25s ease-in-out;\\"
          >
            <path fill=\\"currentColor\\"
-                  d=\\"M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z\\"
+                  d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
            >
            </path>
          </svg>
@@ -140,6 +141,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
               role=\\"img\\"
               xmlns=\\"http://www.w3.org/2000/svg\\"
               viewbox=\\"0 0 448 512\\"
+               style=\\"transition: transform 0.25s ease-in-out;\\"
          >
            <path fill=\\"currentColor\\"
                  d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
--- a/ui/src/Components/OverviewModal/OverviewModalContent.js
+++ b/ui/src/Components/OverviewModal/OverviewModalContent.js
@@ -4,13 +4,10 @@ import PropTypes from "prop-types";
 import { observer } from "mobx-react";
 import { observable, action } from "mobx";

-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
-
 import { AlertStore } from "Stores/AlertStore";
 import { TooltipWrapper } from "Components/TooltipWrapper";
 import { LabelWithPercent } from "Components/Labels/LabelWithPercent";
+import { ToggleIcon } from "Components/ToggleIcon";

 const TableRows = observer(({ alertStore, nameStats }) =>
  nameStats.map((nameStats) => (
@@ -72,8 +69,8 @@ const LabelsTable = observer(
                  title="Toggle all / only common labels"
                  delay={[3000, 100]}
                >
-                  <FontAwesomeIcon
-                    icon={showAllLabels ? faChevronDown : faChevronUp}
+                  <ToggleIcon
+                    isOpen={showAllLabels}
                    className="cursor-pointer text-muted"
                    onClick={toggleAllLabels}
                  />
--- a/ui/src/Components/SilenceModal/SilenceForm.js
+++ b/ui/src/Components/SilenceModal/SilenceForm.js
@@ -10,13 +10,12 @@ import { faUser } from "@fortawesome/free-solid-svg-icons/faUser";
 import { faCommentDots } from "@fortawesome/free-solid-svg-icons/faCommentDots";
 import { faUndoAlt } from "@fortawesome/free-solid-svg-icons/faUndoAlt";
 import { faSearch } from "@fortawesome/free-solid-svg-icons/faSearch";
-import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";

 import { AlertStore } from "Stores/AlertStore";
 import { SilenceFormStore, SilenceFormStage } from "Stores/SilenceFormStore";
 import { Settings } from "Stores/Settings";
 import { TooltipWrapper } from "Components/TooltipWrapper";
+import { ToggleIcon } from "Components/ToggleIcon";
 import { AlertManagerInput } from "./AlertManagerInput";
 import { SilenceMatch } from "./SilenceMatch";
 import { DateTimeSelect } from "./DateTimeSelect";
@@ -169,9 +168,7 @@ const SilenceForm = observer(
              className="btn px-0 cursor-pointer text-muted"
              onClick={this.previewCollapse.toggle}
            >
-              <FontAwesomeIcon
-                icon={this.previewCollapse.hidden ? faChevronUp : faChevronDown}
-              />
+              <ToggleIcon isOpen={!this.previewCollapse.hidden} />
            </span>
            <span>
              {silenceFormStore.data.silenceID === null ? null : (
--- a/ui/src/Components/ToggleIcon/snapshots/index.test.js.snap
+++ b/ui/src/Components/ToggleIcon/snapshots/index.test.js.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ToggleIcon /> matches snapshot when closed 1`] = `
+"
+<svg aria-hidden=\\"true\\"
+     focusable=\\"false\\"
+     data-prefix=\\"fas\\"
+     data-icon=\\"chevron-down\\"
+     class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 \\"
+     role=\\"img\\"
+     xmlns=\\"http://www.w3.org/2000/svg\\"
+     viewbox=\\"0 0 448 512\\"
+     style=\\"transition:transform 0.25s ease-in-out\\"
+>
+  <path fill=\\"currentColor\\"
+        d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
+  >
+  </path>
+</svg>
+"
+`;
+
+exports[`<ToggleIcon /> matches snapshot when open 1`] = `
+"
+<svg aria-hidden=\\"true\\"
+     focusable=\\"false\\"
+     data-prefix=\\"fas\\"
+     data-icon=\\"chevron-down\\"
+     class=\\"svg-inline--fa fa-chevron-down fa-w-14 \\"
+     role=\\"img\\"
+     xmlns=\\"http://www.w3.org/2000/svg\\"
+     viewbox=\\"0 0 448 512\\"
+     style=\\"transition:transform 0.25s ease-in-out\\"
+>
+  <path fill=\\"currentColor\\"
+        d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
+  >
+  </path>
+</svg>
+"
+`;
--- a/ui/src/Components/ToggleIcon/index.test.js
+++ b/ui/src/Components/ToggleIcon/index.test.js
@@ -0,0 +1,19 @@
+import React from "react";
+
+import { shallow } from "enzyme";
+
+import toDiffableHtml from "diffable-html";
+
+import { ToggleIcon } from ".";
+
+describe("<ToggleIcon />", () => {
+  it("matches snapshot when open", () => {
+    const tree = shallow(<ToggleIcon isOpen={true} />);
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
+  });
+
+  it("matches snapshot when closed", () => {
+    const tree = shallow(<ToggleIcon isOpen={false} />);
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
+  });
+});
--- a/ui/src/Components/ToggleIcon/index.tsx
+++ b/ui/src/Components/ToggleIcon/index.tsx
@@ -0,0 +1,22 @@
+import React, { FunctionComponent } from "react";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
+
+const ToggleIcon: FunctionComponent<{
+  isOpen: boolean;
+  className?: string;
+  onClick?: any;
+}> = ({ className, isOpen, onClick }) => {
+  return (
+    <FontAwesomeIcon
+      icon={faChevronDown}
+      rotation={isOpen ? undefined : 180}
+      className={className}
+      style={{ transition: "transform 0.25s ease-in-out" }}
+      onClick={onClick}
+    />
+  );
+};
+
+export { ToggleIcon };