From cf91b0f942418075791c155f269b91478983a888 Mon Sep 17 00:00:00 2001
From: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>
Date: Fri, 3 Jul 2020 00:26:06 -0300
Subject: [PATCH] OHIF-252: "Recent" and "All" tabs should be disabled if there
 are no studies on their category (#1859)

* OHIF-252: "Recent" and "All" tabs should be disabled if there are no studies on their category

* fix button props and avoid onClick on disabled state
---
 platform/ui/src/components/Button/Button.jsx             | 7 +++++--
 platform/ui/src/components/StudyBrowser/StudyBrowser.jsx | 4 +++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/platform/ui/src/components/Button/Button.jsx b/platform/ui/src/components/Button/Button.jsx
index fe1d82404..fdcd13a0f 100644
--- a/platform/ui/src/components/Button/Button.jsx
+++ b/platform/ui/src/components/Button/Button.jsx
@@ -91,6 +91,8 @@ const Button = ({
   startIcon: startIconProp,
   endIcon: endIconProp,
   className,
+  onClick,
+  /** TODO: All possible props should be explicitly defined -- avoid spreading props  */
   ...rest
 }) => {
   const startIcon = startIconProp && (
@@ -112,8 +114,8 @@ const Button = ({
 
   const handleOnClick = e => {
     buttonElement.current.blur();
-    if (rest.onClick) {
-      rest.onClick(e);
+    if (!disabled) {
+      onClick(e);
     }
   };
 
@@ -159,6 +161,7 @@ Button.propTypes = {
   startIcon: PropTypes.node,
   endIcon: PropTypes.node,
   className: PropTypes.string,
+  onClick: PropTypes.func.isRequired,
 };
 
 export default Button;
diff --git a/platform/ui/src/components/StudyBrowser/StudyBrowser.jsx b/platform/ui/src/components/StudyBrowser/StudyBrowser.jsx
index c5110f5c7..62763d063 100644
--- a/platform/ui/src/components/StudyBrowser/StudyBrowser.jsx
+++ b/platform/ui/src/components/StudyBrowser/StudyBrowser.jsx
@@ -79,8 +79,9 @@ const StudyBrowser = ({
           className="border rounded-md border-secondary-light"
         >
           {tabs.map(tab => {
-            const { name, label } = tab;
+            const { name, label, studies } = tab;
             const isActive = activeTabName === name;
+            const isDisabled = !studies.length;
             return (
               <Button
                 key={name}
@@ -92,6 +93,7 @@ const StudyBrowser = ({
                 onClick={() => {
                   onClickTab(name);
                 }}
+                disabled={isDisabled}
               >
                 {label}
               </Button>