Prevent user without permissions from seeing service as a clickable in context selector

app/javascript/src/Navigation/components/ContextSelector.jsx

@@ -44,18 +44,33 @@ class ContextSelector extends React.Component {
     )
   }
 
-  getClassNamesFor ({ menu, api }) {
-    const { activeMenu, currentApi } = this.props
+  getClassNamesForMenu (menu) {
+    const { activeMenu } = this.props
 
     if (menu === 'dashboard' && activeMenu === 'dashboard' ||
-      menu === 'audience' && (['buyers', 'finance', 'cms', 'site'].indexOf(activeMenu) !== -1) ||
-      api && (['serviceadmin', 'monitoring'].indexOf(activeMenu) !== -1) && api === currentApi.service.id) {
+      menu === 'audience' && (['buyers', 'finance', 'cms', 'site'].indexOf(activeMenu) !== -1)) {
       return 'PopNavigation-link current-context'
     }
 
     return 'PopNavigation-link'
   }
 
+  getClassNamesForService (service) {
+    const { activeMenu, currentApi } = this.props
+    let classNames = 'PopNavigation-link'
+
+    if (['serviceadmin', 'monitoring'].indexOf(activeMenu) !== -1 &&
+      service.id === currentApi.service.id) {
+      classNames += ' current-context'
+    }
+
+    if (!service.link) {
+      classNames += ' unauthorized'
+    }
+
+    return classNames
+  }
+
   renderOptions () {
     const { apis } = this.props
     const { filterQuery } = this.state
@@ -67,7 +82,7 @@ class ContextSelector extends React.Component {
 
     const displayedApis = filteredApis.map(({ service }) => (
       <li key={service.id} className="PopNavigation-listItem">
-        <a className={this.getClassNamesFor({ api: service.id })} href={service.link}>
+        <a className={this.getClassNamesForService(service)} href={service.link}>
           <i className="fa fa-puzzle-piece" />{service.name}
         </a>
       </li>
@@ -92,13 +107,13 @@ class ContextSelector extends React.Component {
         </a>
         <ul id="context-menu" className="PopNavigation-list u-toggleable">
           <li className="PopNavigation-listItem">
-            <a className={this.getClassNamesFor({ menu: 'dashboard' })} href={DASHBOARD_PATH}>
+            <a className={this.getClassNamesForMenu('dashboard')} href={DASHBOARD_PATH}>
               <i className='fa fa-home' />Dashboard
             </a>
           </li>
           {audienceLink ? (
             <li className="PopNavigation-listItem">
-              <a className={this.getClassNamesFor({ menu: 'audience' })} href={audienceLink}>
+              <a className={this.getClassNamesForMenu('audience')} href={audienceLink}>
                 <i className='fa fa-bullseye' />Audience
               </a>
             </li>

app/javascript/src/Navigation/components/ContextSelector.spec.jsx

@@ -12,7 +12,7 @@ function getWrapper (apis = [], audienceLink) {
 let contextSelector
 
 const apis = [
-  { service: { name: 'api 0', id: 0 } },
+  { service: { name: 'api 0', id: 0, link: 'foo.bar' } },
   { service: { name: 'api 1', id: 1 } },
   { service: { name: 'api 2', id: 2 } }
 ]
@@ -96,6 +96,14 @@ describe('When there is only 1 service', () => {
     expect(api.exists()).toEqual(true)
     expect(api.text()).toEqual('api 0')
   })
+
+  it('should mark the api as unauthorized when link is undefined', () => {
+    contextSelector = getWrapper(apis.slice(0, 1), audienceLink)
+    expect(contextSelector.find('.unauthorized')).toHaveLength(0)
+
+    contextSelector = getWrapper(apis.slice(1, 2), audienceLink)
+    expect(contextSelector.find('.unauthorized')).toHaveLength(1)
+  })
 })
 
 describe('When there are many services', () => {
@@ -139,4 +147,9 @@ describe('When there are many services', () => {
     input.simulate('change', { target: { value: 'wubba lubba dub dub' } })
     expect(contextSelector.find('.PopNavigation-results').children()).toHaveLength(0)
   })
+
+  it('should mark apis as unauthorized when link is undefined', () => {
+    const apiList = contextSelector.find('.PopNavigation-results').children()
+    expect(apiList.find('.unauthorized')).toHaveLength(2)
+  })
 })

app/javascript/src/Navigation/styles/ContextSelector.scss

@@ -1,10 +1,19 @@
 // Copied from colors.scss
 $lochMaraBlue: #0088ce; //pf-blue-400
+$font-color: #393f44; // pf-black-800
 
 .current-context {
   color: $lochMaraBlue;
 }
 
 .PopNavigation-link > i {
   padding-right: 0.5rem;
+}
+
+.unauthorized {
+  cursor: not-allowed;
+
+  &:hover {
+    color: $font-color;
+  }
 }

public/packs/manifest.json

@@ -4,10 +4,10 @@
   "assets/glyphicons-halflings-regular.ttf": "/packs/assets/glyphicons-halflings-regular.e18bbf611f2a2e43afc071aa2f4e1512.ttf",
   "assets/glyphicons-halflings-regular.woff": "/packs/assets/glyphicons-halflings-regular.fa2772327f55d8198301fdb8bcfc8158.woff",
   "assets/glyphicons-halflings-regular.woff2": "/packs/assets/glyphicons-halflings-regular.448c34a56d699c29117adc64c43affeb.woff2",
-  "dashboard.js": "/packs/dashboard-86117603365e13a08dda.js",
-  "dashboard.js.map": "/packs/dashboard-86117603365e13a08dda.js.map",
-  "navigation.js": "/packs/navigation-f677a665c697929ee4e7.js",
-  "navigation.js.map": "/packs/navigation-f677a665c697929ee4e7.js.map",
-  "policies.js": "/packs/policies-2ee63d40bbeb2d7617c7.js",
-  "policies.js.map": "/packs/policies-2ee63d40bbeb2d7617c7.js.map"
+  "dashboard.js": "/packs/dashboard-a2a5eb3eb48bf6d8aeb9.js",
+  "dashboard.js.map": "/packs/dashboard-a2a5eb3eb48bf6d8aeb9.js.map",
+  "navigation.js": "/packs/navigation-7cdccc13141616d66596.js",
+  "navigation.js.map": "/packs/navigation-7cdccc13141616d66596.js.map",
+  "policies.js": "/packs/policies-c40172680fcd63c10cf8.js",
+  "policies.js.map": "/packs/policies-c40172680fcd63c10cf8.js.map"
 }