make rule for secondary icons consistent

- Auditors: @bsclifton
- Close #8158

Test Plan covered by automated tests:

- tabContent components NewSessionIcon
- tabContent components PrivateIcon

app/renderer/components/tabContent.js

@@ -9,8 +9,8 @@ const globalStyles = require('./styles/global')
 const {isWindows} = require('../../common/lib/platformUtil')
 const {getTextColorForBackground} = require('../../../js/lib/color')
 const {tabs} = require('../../../js/constants/config')
-const {hasBreakpoint, hasRelativeCloseIcon, hasFixedCloseIcon} = require('../lib/tabUtil')
-
+const {hasBreakpoint, hasRelativeCloseIcon,
+      hasFixedCloseIcon, hasVisibleSecondaryIcon} = require('../lib/tabUtil')
 const newSessionSvg = require('../../extensions/brave/img/tabs/new_session.svg')
 const privateSvg = require('../../extensions/brave/img/tabs/private.svg')
 const closeTabSvg = require('../../extensions/brave/img/tabs/close_btn_normal.svg')
@@ -133,31 +133,21 @@ class AudioTabIcon extends ImmutableComponent {
 }
 
 class PrivateIcon extends ImmutableComponent {
-  get narrowView () {
-    const sizes = ['small', 'extraSmall', 'smallest']
-    return sizes.includes(this.props.tab.get('breakpoint'))
-  }
-
   render () {
     const privateStyles = StyleSheet.create({
       icon: {
         WebkitMaskImage: `url(${privateSvg})`,
         backgroundColor: this.props.isActive ? globalStyles.color.white100 : globalStyles.color.black100
       }
     })
-    return this.props.tab.get('isPrivate') && !this.props.tab.get('hoverState') && !this.narrowView
+    return this.props.tab.get('isPrivate') && hasVisibleSecondaryIcon(this.props)
       ? <TabIcon data-test-id='privateIcon'
         className={css(styles.icon, styles.secondaryIcon, privateStyles.icon)} />
       : null
   }
 }
 
 class NewSessionIcon extends ImmutableComponent {
-  get narrowView () {
-    const sizes = ['small', 'extraSmall', 'smallest']
-    return sizes.includes(this.props.tab.get('breakpoint'))
-  }
-
   get partitionNumber () {
     let partition = this.props.tab.get('partitionNumber')
     // Persistent partitions opened by `target="_blank"` will have
@@ -190,7 +180,7 @@ class NewSessionIcon extends ImmutableComponent {
       }
     })
 
-    return this.partitionNumber && !this.props.tab.get('hoverState') && !this.narrowView
+    return this.partitionNumber && hasVisibleSecondaryIcon(this.props)
       ? <TabIcon symbol
         data-test-id='newSessionIcon'
         className={css(styles.icon, styles.newSession, newSession.indicator)}

app/renderer/lib/tabUtil.js

@@ -50,6 +50,16 @@ module.exports.hasRelativeCloseIcon = (props) => {
     !module.exports.hasBreakpoint(props, ['small', 'extraSmall', 'smallest'])
 }
 
+/**
+ * Check whether or not private or newSession icon should be visible
+ * @param {Object} props - Object that hosts the tab props
+ * @returns {Boolean} Whether or not private or newSession icon should be visible
+ */
+module.exports.hasVisibleSecondaryIcon = (props) => {
+  return !props.tab.get('hoverState') &&
+    !module.exports.hasBreakpoint(props, ['small', 'extraSmall', 'smallest'])
+}
+
 /**
  * Check whether or not closeTab icon is always visible (fixed) in tab
  * @param {Object} props - Object that hosts the tab props

test/unit/app/renderer/tabContentTest.js

@@ -193,7 +193,7 @@ describe('tabContent components', function () {
       )
       assert.notEqual(wrapper.props()['data-test-id'], 'privateIcon')
     })
-    it('should not show private icon if tab size is too small', function () {
+    it('should not show private icon if tab size is small', function () {
       const wrapper = shallow(
         <PrivateIcon
           tab={
@@ -206,6 +206,32 @@ describe('tabContent components', function () {
       )
       assert.notEqual(wrapper.props()['data-test-id'], 'privateIcon')
     })
+    it('should not show private icon if tab size is extraSmall', function () {
+      const wrapper = shallow(
+        <PrivateIcon
+          tab={
+            Immutable.Map({
+              isPrivate: true,
+              hoverState: false,
+              breakpoint: 'extraSmall'
+            })}
+        />
+      )
+      assert.notEqual(wrapper.props()['data-test-id'], 'privateIcon')
+    })
+    it('should not show private icon if tab size is the smallest', function () {
+      const wrapper = shallow(
+        <PrivateIcon
+          tab={
+            Immutable.Map({
+              isPrivate: true,
+              hoverState: false,
+              breakpoint: 'smallest'
+            })}
+        />
+      )
+      assert.notEqual(wrapper.props()['data-test-id'], 'privateIcon')
+    })
   })
 
   describe('NewSessionIcon', function () {
@@ -243,7 +269,7 @@ describe('tabContent components', function () {
       )
       assert.notEqual(wrapper.props()['data-test-id'], 'newSessionIcon')
     })
-    it('should not show new session icon if tab size is too small', function () {
+    it('should not show new session icon if tab size is small', function () {
       const wrapper = shallow(
         <NewSessionIcon
           tab={
@@ -256,6 +282,32 @@ describe('tabContent components', function () {
       )
       assert.notEqual(wrapper.props()['data-test-id'], 'newSessionIcon')
     })
+    it('should not show new session icon if tab size is extraSmall', function () {
+      const wrapper = shallow(
+        <NewSessionIcon
+          tab={
+            Immutable.Map({
+              partitionNumber: 1,
+              hoverState: true,
+              breakpoint: 'extraSmall'
+            })}
+        />
+      )
+      assert.notEqual(wrapper.props()['data-test-id'], 'newSessionIcon')
+    })
+    it('should not show new session icon if tab size is the smallest', function () {
+      const wrapper = shallow(
+        <NewSessionIcon
+          tab={
+            Immutable.Map({
+              partitionNumber: 1,
+              hoverState: true,
+              breakpoint: 'smallest'
+            })}
+        />
+      )
+      assert.notEqual(wrapper.props()['data-test-id'], 'newSessionIcon')
+    })
     it('should show partition number for new sessions', function () {
       const wrapper = shallow(
         <NewSessionIcon