Add self-service tab to navigation

Author: jmgasper

src/components/Tab/index.js

@@ -28,6 +28,13 @@ const Tab = ({
     selectTab(3)
   }
 
+  const onSelfServiceClick = () => {
+    if (currentTab === 4) {
+      return
+    }
+    selectTab(4)
+  }
+
   const tabComponent = (
     <ul className={styles.challengeTab}>
       <li
@@ -72,6 +79,20 @@ const Tab = ({
       >
           Users
       </li>
+      <li
+        key='tab-item-self-service'
+        className={cn(styles.item, { [styles.active]: currentTab === 4 })}
+        onClick={onSelfServiceClick}
+        onKeyDown={e => {
+          if (e.key !== 'Enter') {
+            return
+          }
+          onSelfServiceClick()
+        }}
+        role='presentation'
+      >
+          Self-Service
+      </li>
     </ul>
   )
 

src/containers/Tab/index.js

@@ -41,6 +41,8 @@ class TabContainer extends Component {
       this.setState({ currentTab: 2 })
     } else if (nextProps.history.location.pathname === '/users') {
       this.setState({ currentTab: 3 })
+    } else if (nextProps.history.location.pathname === '/self-service') {
+      this.setState({ currentTab: 4 })
     } else {
       this.setState({ currentTab: 0 })
     }
@@ -85,6 +87,9 @@ class TabContainer extends Component {
     } else if (tab === 3) {
       history.push('/users')
       this.setState({ currentTab: 3 })
+    } else if (tab === 4) {
+      history.push('/self-service')
+      this.setState({ currentTab: 4 })
     }
 
     resetSidebarActiveParams()