Refactor NavBar.vue to receive an array of visible buttons

Shifts intelligence around which buttons to show onto NavBarPolicy on the server, simplifying the implementation in this component.
rubyforgood · Feb 13, 2021 · 03cb3b7 · 03cb3b7
1 parent 445f782
commit 03cb3b7
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 53 deletions.
diff --git a/app/javascript/components/NavBar.vue b/app/javascript/components/NavBar.vue
@@ -12,23 +12,19 @@
       <b-navbar-item href="/announcements">Announcements</b-navbar-item>
     </template>
 
-    <template slot="end" v-if="loggedIn">
-      <b-navbar-item tag="div">
+    <template slot="end">
+      <b-navbar-item tag="div" v-if="visible('Feedback')">
         <FeedbackButton action="software_feedbacks/new">Feedback</FeedbackButton>
       </b-navbar-item>
-      <b-navbar-item href="/contributions">Contributions</b-navbar-item>
-      <b-navbar-item href="/matches">Matches</b-navbar-item>
-      <b-navbar-item href="/admin">Admin</b-navbar-item>
-      <b-navbar-item tag="div">
-        <DeleteButton action="/users/sign_out">Logout</DeleteButton>
-      </b-navbar-item>
-    </template>
-
-    <template slot="end" v-else>
-      <b-navbar-item v-if="p2pEnabled" href="/contributions">Contributions</b-navbar-item>
-      <b-navbar-item tag="div">
+      <b-navbar-item href="/contributions" v-if="visible('Contributions')">Contributions</b-navbar-item>
+      <b-navbar-item href="/matches" v-if="visible('Matches')">Matches</b-navbar-item>
+      <b-navbar-item href="/admin" v-if="visible('Admin')">Admin</b-navbar-item>
+      <b-navbar-item tag="div" v-if="visible('Login')">
         <a href="/users/sign_in" class="button is-outlined">Login</a>
       </b-navbar-item>
+      <b-navbar-item tag="div" v-if="visible('Logout')">
+        <DeleteButton action="/users/sign_out">Logout</DeleteButton>
+      </b-navbar-item>
     </template>
   </b-navbar>
 </template>
@@ -40,20 +36,20 @@ import {FeedbackButton} from 'components/forms'
 
 export default {
   props: {
-    loggedIn:   { type: Boolean, default: false },
-    logoUrl:    { type: String },
-    p2pEnabled: { type: Boolean, default: false },
+    logoUrl: { type: String },
+    visibleButtons: { type: Array, default: [] },
   },
   components: {
     DeleteButton,
     FeedbackButton
   },
-
-  pageUrl() {
-    return window.location.href
+  methods: {
+    visible(button) {
+      return this.visibleButtons.includes(button)
+    },
   },
 
-  defaultLogo: logo
+  defaultLogo: logo,
 }
 </script>
 
diff --git a/app/views/layouts/_navbar.html.erb b/app/views/layouts/_navbar.html.erb
@@ -1,10 +1,9 @@
 <div id="navBar"></div>
 <script>
   document.addEventListener('DOMContentLoaded', () => {
-    EntryPoints.navBar('#navBar', {
-      loggedIn: <%= current_user.present? %>,
-      logoUrl: '<%= Organization.current_organization.logo_url %>',
-      p2pEnabled: <%= SystemSetting.current_settings.peer_to_peer? %>,
-    })
+    EntryPoints.navBar('#navBar', <%= raw({
+      logoUrl: Organization.current_organization.logo_url,
+      visibleButtons: policy(:nav_bar).visible_buttons,
+    }.to_json) %>)
   })
 </script>
diff --git a/spec/javascript/components/NavBar.spec.js b/spec/javascript/components/NavBar.spec.js
@@ -6,9 +6,8 @@ describe('NavBar', () => {
   def('wrapper', () => mount(NavBar, {
     localVue: configure(createLocalVue()),
     propsData: {
-      loggedIn:   $loggedIn,
-      logoUrl:    '/some-url',
-      p2pEnabled: $p2pEnabled,
+      logoUrl: '/some-url',
+      visibleButtons: $visibleButtons,
     },
   }))
 
@@ -19,13 +18,11 @@ describe('NavBar', () => {
     return [...navLinks, ...navButtons, ...navForms].map(link => link.text())
   })
 
-  describe('when not logged in', () => {
-    def('loggedIn', false)
+  describe('visible buttons', () => {
+    describe('when not instructed to show additional buttons', () => {
+      def('visibleButtons', ['Login'])
 
-    describe('when p2p is not enabled', () => {
-      def('p2pEnabled', false)
-
-      it('shows publicly accessible links except Contributions', () => {
+      it('shows publicly accessible links', () => {
         assert.sameMembers($renderedNavItems, [
           '', // home
           'About',
@@ -36,10 +33,10 @@ describe('NavBar', () => {
       })
     })
 
-    describe('when p2p is enabled', () => {
-      def('p2pEnabled', true)
+    describe('when instructed to show Contributions', () => {
+      def('visibleButtons', ['Contributions', 'Login'])
 
-      it('also includes Contributions', () => {
+      it('includes specified buttons', () => {
         assert.sameMembers($renderedNavItems, [
           '', // home
           'About',
@@ -50,23 +47,22 @@ describe('NavBar', () => {
         ])
       })
     })
-  })
-
-  describe('when logged in', () => {
-    def('loggedIn', true)
 
-    it('includes admin links', () => {
-      assert.sameMembers($renderedNavItems, [
-        '',
-        'About',
-        'Community Resources',
-        'Announcements',
-        'Contributions',
-        'Matches',
-        'Admin',
-        'Feedback',
-        'Logout',
-      ])
+    describe('when instructed to show all admin buttons', () => {
+      def('visibleButtons', ['Contributions', 'Matches', 'Admin', 'Feedback', 'Logout'])
+      it('includes specified buttons', () => {
+        assert.sameMembers($renderedNavItems, [
+          '',
+          'About',
+          'Community Resources',
+          'Announcements',
+          'Contributions',
+          'Matches',
+          'Admin',
+          'Feedback',
+          'Logout',
+        ])
+      })
     })
   })
 })