From 4ecf43582d4746408d59de597f12f146f4fda852 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Tue, 24 Jul 2018 17:04:25 +0200
Subject: [PATCH] feat(ui): Tweak history dropdown UI

---
 .../Components/NavBar/FilterInput/History.css |  6 ++
 .../Components/NavBar/FilterInput/History.js  | 79 ++++++++++++-------
 2 files changed, 57 insertions(+), 28 deletions(-)
 create mode 100644 ui/src/Components/NavBar/FilterInput/History.css

diff --git a/ui/src/Components/NavBar/FilterInput/History.css b/ui/src/Components/NavBar/FilterInput/History.css
new file mode 100644
index 000000000..a5396bb5f
--- /dev/null
+++ b/ui/src/Components/NavBar/FilterInput/History.css
@@ -0,0 +1,6 @@
+.component-history-button {
+  margin-right: 0.5rem;
+}
+.component-history-button:last-child {
+  margin-right: 0;
+}
diff --git a/ui/src/Components/NavBar/FilterInput/History.js b/ui/src/Components/NavBar/FilterInput/History.js
index dab699da6..eb2304f42 100644
--- a/ui/src/Components/NavBar/FilterInput/History.js
+++ b/ui/src/Components/NavBar/FilterInput/History.js
@@ -11,6 +11,7 @@ import { Manager, Reference, Popper } from "react-popper";
 import onClickOutside from "react-onclickoutside";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faHistory } from "@fortawesome/free-solid-svg-icons/faHistory";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons/faCaretDown";
 import { faSave } from "@fortawesome/free-regular-svg-icons/faSave";
 import { faUndoAlt } from "@fortawesome/free-solid-svg-icons/faUndoAlt";
@@ -20,6 +21,8 @@ import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
 import { HistoryLabel } from "Components/Labels/HistoryLabel";
 
+import "./History.css";
+
 const defaultHistory = {
   filters: []
 };
@@ -35,6 +38,26 @@ function reduceFilter(filter) {
   };
 }
 
+const ActionButton = ({ color, icon, title, action, afterClick }) => (
+  <button
+    className={`component-history-button btn btn-sm btn-outline-${color}`}
+    onClick={() => {
+      action();
+      afterClick();
+    }}
+  >
+    <FontAwesomeIcon icon={icon} className="mr-1" />
+    {title}
+  </button>
+);
+ActionButton.propTypes = {
+  color: PropTypes.string.isRequired,
+  title: PropTypes.node.isRequired,
+  icon: PropTypes.object.isRequired,
+  action: PropTypes.func.isRequired,
+  afterClick: PropTypes.func.isRequired
+};
+
 const HistoryMenu = onClickOutside(
   ({
     popperPlacement,
@@ -53,6 +76,10 @@ const HistoryMenu = onClickOutside(
         style={popperStyle}
         data-placement={popperPlacement}
       >
+        <h6 className="dropdown-header text-center">
+          <FontAwesomeIcon icon={faHistory} className="mr-1" />
+          Last used filters
+        </h6>
         {filters.length === 0 ? (
           <h6 className="dropdown-header text-muted text-center">Empty</h6>
         ) : (
@@ -80,35 +107,31 @@ const HistoryMenu = onClickOutside(
         )}
         <div className="dropdown-divider" />
         <div className="container text-center">
-          <button className="btn btn-sm btn-success mr-4">
-            <FontAwesomeIcon
-              icon={faSave}
-              onClick={() => {
-                settingsStore.savedFilters.save(
-                  alertStore.filters.values.map(f => f.raw)
-                );
-                afterClick();
-              }}
-            />
-          </button>
-          <button
-            className="btn btn-sm btn-danger mr-4"
-            onClick={() => {
-              settingsStore.savedFilters.clear();
-              afterClick();
+          <ActionButton
+            color="success"
+            icon={faSave}
+            title="Save filters"
+            action={() => {
+              settingsStore.savedFilters.save(
+                alertStore.filters.values.map(f => f.raw)
+              );
             }}
-          >
-            <FontAwesomeIcon icon={faUndoAlt} />
-          </button>
-          <button
-            className="btn btn-sm btn-dark"
-            onClick={() => {
-              onClear();
-              afterClick();
-            }}
-          >
-            <FontAwesomeIcon icon={faTrash} />
-          </button>
+            afterClick={afterClick}
+          />
+          <ActionButton
+            color="danger"
+            icon={faUndoAlt}
+            title="Reset filters"
+            action={settingsStore.savedFilters.clear}
+            afterClick={afterClick}
+          />
+          <ActionButton
+            color="dark"
+            icon={faTrash}
+            title="Clear history"
+            action={onClear}
+            afterClick={afterClick}
+          />
         </div>
       </div>
     );