[GitHub] garrensmith closed pull request #1025: Show a badge on a tab header

[GitBox <gi...@apache.org>]

garrensmith closed pull request #1025: Show a badge on a tab header
URL: https://github.com/apache/couchdb-fauxton/pull/1025
 
 
   

This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:

As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):

diff --git a/app/addons/components/__tests__/tabwindowwrapper.test.js b/app/addons/components/__tests__/tabwindowwrapper.test.js
index 01c4305ac..b088b50bf 100644
--- a/app/addons/components/__tests__/tabwindowwrapper.test.js
+++ b/app/addons/components/__tests__/tabwindowwrapper.test.js
@@ -47,4 +47,15 @@ describe('TabWindowWrapper', () => {
     const wrapper = mount(<TabWindowWrapper tabs={tabs} selectedTab={"Tab2"}/>);
     expect(wrapper.find('.tab-element-checked .tab-element-content').html()).toMatch(/Tab2/);
   });
+
+  it('shows tab badge', () => {
+    const tabNoBadge = [{name: 'Tab1', component: mock, route: 'tab1'}];
+    const wrapperNoBadge = mount(<TabWindowWrapper tabs={tabNoBadge} selectedTab={"Tab1"}/>);
+    expect(wrapperNoBadge.find('.tab-element-badge').length).toBe(0);
+
+    const tabWithBadge = [{name: 'Tab1', component: mock, route: 'tab1', badgeText: 'new'}];
+    const wrapperWithBadge = mount(<TabWindowWrapper tabs={tabWithBadge} selectedTab={"Tab1"}/>);
+    expect(wrapperWithBadge.find('.tab-element-badge').length).toBe(1);
+    expect(wrapperWithBadge.find('.tab-element-badge').text()).toBe('new');
+  });
 });
diff --git a/app/addons/components/assets/less/tab-element.less b/app/addons/components/assets/less/tab-element.less
index df1b3c0ba..63060d312 100644
--- a/app/addons/components/assets/less/tab-element.less
+++ b/app/addons/components/assets/less/tab-element.less
@@ -56,6 +56,21 @@
     height: 5px;
   }
 
+  .tab-element-badge {
+    display: inline-block;
+    min-width: 10px;
+    padding: 3px 7px;
+    line-height: 1;
+    color: #fff;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    background-color: @linkColorHover;
+    border-radius: 10px;
+    margin-left: 0.25rem;
+    font-size: 0.75rem;
+  }
+
   .tab-element-indicator {
     height: 0px;
     transition: all .25s linear;
diff --git a/app/addons/components/components/tabelement.js b/app/addons/components/components/tabelement.js
index ea5d59342..37f1e7231 100644
--- a/app/addons/components/components/tabelement.js
+++ b/app/addons/components/components/tabelement.js
@@ -15,10 +15,13 @@ import PropTypes from 'prop-types';
 import React from "react";
 import ReactDOM from "react-dom";
 
-export const TabElement = ({selected, text, onChange, iconClass}) => {
+export const TabElement = ({selected, text, onChange, iconClass, badgeText}) => {
 
   const additionalClass = selected ? 'tab-element-checked' : '';
-
+  let badge = null;
+  if (badgeText) {
+    badge = <span className="tab-element-badge">{badgeText}</span>;
+  }
   return (
     <li className={`component-tab-element ${additionalClass}`}>
 
@@ -35,6 +38,7 @@ export const TabElement = ({selected, text, onChange, iconClass}) => {
             onChange={onChange} />
 
           {text}
+          {badge}
         </div>
       </label>
     </li>
@@ -46,6 +50,7 @@ TabElement.propTypes = {
   text: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   iconClass: PropTypes.string,
+  badgeText: PropTypes.string
 };
 
 export const TabElementWrapper = ({children}) => {
diff --git a/app/addons/components/components/tabwindowwrapper.js b/app/addons/components/components/tabwindowwrapper.js
index 6f89f6446..3a7d4a41f 100644
--- a/app/addons/components/components/tabwindowwrapper.js
+++ b/app/addons/components/components/tabwindowwrapper.js
@@ -20,6 +20,7 @@ export class TabWindowWrapper extends React.Component {
           key={i}
           selected={tab.name === selectedTab}
           text={tab.name}
+          badgeText={tab.badgeText}
           onChange={() => { FauxtonAPI.navigate(tab.route, {redirect: true}); }}
           iconClass="" />
       );


 

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services