feat(frontend): #126 comment box displayed for internal users on the …

…Aquifer Summary page (#125) Co-authored-by: Fergus MacConnell <[email protected]>
bcgov · Nov 7, 2024 · 1b15bef · 1b15bef
1 parent fea5bda
commit 1b15bef
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 4 deletions.
diff --git a/frontend/src/aquifers/components/View.vue b/frontend/src/aquifers/components/View.vue
@@ -262,6 +262,13 @@
                 :loading="loadingFiles"
                 v-on:fetchFiles="fetchFiles">
               </aquifer-documents>
+              <div v-if="userRoles.aquifers.view">
+                <h5 class="mt-5 border-bottom pb-4 main-title" id="internal-comments-title">Internal Comments</h5>
+                <b-col cols="6" md="3" lg="6" id="aquifer-notes">{{record.notes}}</b-col>
+                <p v-if="!record.notes">
+                  No internal comments available for this aquifer.
+                </p>
+              </div>
             </b-col>
             <b-col cols="12" xl="4" lg="6">
               <h5 class="mt-3 border-bottom pb-4 main-title">Licensing Information</h5>

diff --git a/frontend/src/common/store/auth.js b/frontend/src/common/store/auth.js
@@ -16,7 +16,7 @@ const auth = {
     userRoles (state) {
       if (state.keycloak && state.keycloak.authenticated) {
         // map SSO roles to web app permissions
-        // IMPORTANT: One should be relying on SSO composite roles (which can be found alongside all of the 
+        // IMPORTANT: One should be relying on SSO composite roles (which can be found alongside all of the
         // granular roles on Common Hosted SSO) to assign the appropriate roles.
         // e.g. We don't need to understand what a Statutory Authority is here, we should
         // only be concerned if the right to edit/approve is set. It's up to keycloak to associate some
@@ -27,7 +27,7 @@ const auth = {
         // even if the user does have that role.
         // Instead, we have to look at the "raw" list of roles contained inside the keycloak instance.
         const clientRoles = state.keycloak.idTokenParsed['client_roles']
-        return {          
+        return {
           registry: {
             view: clientRoles.includes('registries_viewer'),
             edit: clientRoles.includes('registries_edit'),
@@ -45,7 +45,8 @@ const auth = {
             approve: clientRoles.includes('wells_approve')
           },
           aquifers: {
-            edit: clientRoles.includes('aquifers_edit')
+            edit: clientRoles.includes('aquifers_edit'),
+            view: clientRoles.includes('aquifers_view')
           },
           surveys: {
             edit: clientRoles.includes('surveys_edit')

diff --git a/frontend/tests/unit/specs/aquifers/components/View.spec.js b/frontend/tests/unit/specs/aquifers/components/View.spec.js
@@ -31,6 +31,10 @@ jest.mock('axios')
 const localVue = createLocalVue()
 localVue.use(Vuex)
 
+const mockKeycloak = {
+  authenticated: false,
+};
+
 const aquiferFixture = {
   aquifer_id: '4',
   aquifer_name: 'Aggasiz',
@@ -124,7 +128,8 @@ describe('View Component', () => {
           params: {
             id: aquiferFixture.aquifer_id
           }
-        }
+        },
+        $keycloak: mockKeycloak
       },
       stubs: ['router-link', 'aquifer-documents', 'aquifer-form', 'b-popover', 'pie-chart', 'single-aquifer-map'],
       methods: {
@@ -151,6 +156,44 @@ describe('View Component', () => {
     expect(fetch).toHaveBeenCalled()
   })
 
+  describe('View comments', () => {
+    it('auth users can view comments', () => {
+      mockKeycloak.authenticated = true;
+
+      const wrapper = component({
+        propsData: { edit: false }
+      }, {
+        aquiferStore: {
+          view: {
+            record: aquiferFixture
+          }
+        }
+      })
+
+      const internalCommentsTitle = wrapper.find('#internal-comments-title');
+      expect(internalCommentsTitle.exists()).toBe(true);
+      expect(internalCommentsTitle.text()).toBe('Internal Comments');
+    })
+
+    it('unauth users can\'t view comments', () => {
+      mockKeycloak.authenticated = false;
+
+      const wrapper = component({
+        propsData: { edit: false }
+      }, {
+        aquiferStore: {
+          view: {
+            record: aquiferFixture
+          }
+        }
+      })
+
+      const titles = wrapper.findAll('h5.main-title');
+      const internalCommentsTitle = titles.filter(title => title.text() === 'Internal Comments');
+      expect(internalCommentsTitle.exists()).toBe(false);
+    })
+  })
+
   describe('View mode', () => {
     it('matches the snapshot', () => {
       const wrapper = component({

diff --git a/frontend/tests/unit/specs/aquifers/components/__snapshots__/View.spec.js.snap b/frontend/tests/unit/specs/aquifers/components/__snapshots__/View.spec.js.snap
@@ -677,6 +677,8 @@ exports[`View Component View mode matches the snapshot 1`] = `
                 id="4"
                 publicfilestitle="Other Documents"
               />
+               
+              <!---->
             </div>
              
             <div