Show error indicator when the service fails to load (#2124)

Co-authored-by: Johan K Mathew <johankmathew@gmail.com>

2 files changed, 18 insertions, 0 deletions

diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index ed8430b89..455d2549a 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -331,6 +331,13 @@ class TabItem extends Component {
       );
     }
 
+    let errorBadge = null;
+    if ( service.isError ) {
+      errorBadge=(
+        <i className = " mdi mdi-exclamation tab-item__error-icon"/>
+      )
+    }
+
     return (
       <li
         className={classnames({
@@ -349,8 +356,10 @@ class TabItem extends Component {
             : ''
         }`}
       >
+      
         <img src={service.icon} className="tab-item__icon" alt="" />
         {notificationBadge}
+        {errorBadge}
         {IS_SERVICE_DEBUGGING_ENABLED && (
           <>
             <div
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index 16318b9f6..b7f1a9e11 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -136,4 +136,13 @@
   &.is-reordering {
     z-index: 99999;
   }
+
+  .tab-item__error-icon{
+    font-size: 1.9em;
+    color: red;
+    position: absolute;
+    top: 6px;
+    right: 0px;
+    transform: scaleX(1.5);
+  }
 }