Do not allow project viewer to update entity or mark it as resolved

src/components/entity/conflict-summary.vue

@@ -26,7 +26,7 @@ except according to the terms contained in the LICENSE file.
     <div class="panel-body">
       <entity-conflict-table v-if="entityVersions.dataExists"
         :uuid="entity.uuid" :versions="relevantToConflict"/>
-      <div class="panel-footer">
+      <div v-if="project.permits('entity.update')" class="panel-footer">
         <span class="icon-arrow-circle-right"></span>
         <p>
           {{ $t('footer[0]') }}
@@ -63,9 +63,7 @@ import { useRequestData } from '../../request-data';
 
 const { request, awaitingResponse } = useRequest();
 const { t } = useI18n();
-// The component does not assume that this data will exist when the component is
-// created.
-const { dataset, entityVersions } = useRequestData();
+const { project, dataset, entityVersions } = useRequestData();
 const { alert } = inject('container');
 
 defineOptions({
@@ -150,6 +148,7 @@ const markAsResolved = () => {
   #entity-conflict-table {
     margin-left: -15px;
     margin-right: -15px;
+    &:last-child { margin-bottom: -15px; }
 
     // Align the leftmost text of the first column with the icon in the
     // .panel-heading.

src/components/entity/resolve.vue

@@ -15,8 +15,12 @@ except according to the terms contained in the LICENSE file.
     <template #title>{{ $t('title', entity) }}</template>
     <template #body>
       <div v-if="!success">
-        <p>{{ $t('instructions[0]', entity) }}</p>
-        <p>{{ $t('instructions[1]', { markAsResolved: $t('action.markAsResolved') }) }}</p>
+        <div class="modal-introduction">
+          <p>{{ $t('instructions[0]', entity) }}</p>
+          <p v-if="canUpdate">
+            {{ $t('instructions[1]', { markAsResolved: $t('action.markAsResolved') }) }}
+          </p>
+        </div>
 
         <div v-show="tableShown" id="entity-resolve-table-container">
           <loading :state="entityVersions.awaitingResponse"/>
@@ -41,12 +45,14 @@ except according to the terms contained in the LICENSE file.
           :aria-disabled="awaitingResponse" target="_blank">
           <span class="icon-external-link-square"></span>{{ $t('action.seeMoreDetails') }}
         </router-link>
-        <button type="button" class="btn btn-default edit-entity" :aria-disabled="awaitingResponse" @click="$emit('hide', true)">
-          <span class="icon-pencil"></span>{{ $t('action.editEntity') }}
-        </button>
-        <button type="button" class="btn btn-default mark-as-resolved" :aria-disabled="awaitingResponse" @click="markAsResolve">
-          <span class="icon-check"></span>{{ $t('action.markAsResolved') }} <spinner :state="awaitingResponse"/>
-        </button>
+        <template v-if="canUpdate">
+          <button type="button" class="btn btn-default edit-entity" :aria-disabled="awaitingResponse" @click="$emit('hide', true)">
+            <span class="icon-pencil"></span>{{ $t('action.editEntity') }}
+          </button>
+          <button type="button" class="btn btn-default mark-as-resolved" :aria-disabled="awaitingResponse" @click="markAsResolve">
+            <span class="icon-check"></span>{{ $t('action.markAsResolved') }} <spinner :state="awaitingResponse"/>
+          </button>
+        </template>
       </div>
       <div v-else class="success-msg">
         <span class="icon-check-circle success"></span> {{ $t('successMessage') }}
@@ -62,7 +68,7 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script setup>
-import { inject, nextTick, ref, watch } from 'vue';
+import { computed, inject, nextTick, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import EntityConflictTable from './conflict-table.vue';
@@ -73,6 +79,7 @@ import Spinner from '../spinner.vue';
 import useEntityVersions from '../../request-data/entity-versions';
 import useRequest from '../../composables/request';
 import useRoutes from '../../composables/routes';
+import { useRequestData } from '../../request-data';
 import { apiPaths } from '../../util/request';
 import { noop } from '../../util/util';
 
@@ -85,8 +92,15 @@ const props = defineProps({
 });
 const emit = defineEmits(['hide', 'success']);
 
-// Conflict summary table
+// The component does not assume that this data will exist when the component is
+// created.
+const { project } = useRequestData();
 const entityVersions = useEntityVersions();
+
+const canUpdate = computed(() =>
+  project.dataExists && project.permits('entity.update'));
+
+// Conflict summary table
 const projectId = inject('projectId');
 const datasetName = inject('datasetName');
 const alert = inject('alert');
@@ -156,6 +170,7 @@ watch(() => props.entity, (entity) => {
 
 #entity-resolve {
   .modal-dialog { margin-top: 15vh; }
+  .modal-introduction { margin-bottom: 12px; }
 
   .btn + .btn {
     margin-left: 10px;
@@ -173,11 +188,11 @@ watch(() => props.entity, (entity) => {
   margin-left: -$padding-modal-body;
   margin-right: -$padding-modal-body;
   // If the height of the modal content other than the table is no more than
-  // 375px, this allows the table to push the modal to 75vh tall. After that,
+  // 365px, this allows the table to push the modal to 75vh tall. After that,
   // the table container will scroll.
-  max-height: max(calc(75vh - 375px), 175px);
+  max-height: max(calc(75vh - 365px), 175px);
   overflow-y: auto;
-  padding-top: 5px;
+  padding-top: 3px;
 }
 #entity-resolve #entity-conflict-table {
   tbody tr { background-color: transparent; }

src/components/entity/show.vue

@@ -26,7 +26,7 @@ except according to the terms contained in the LICENSE file.
           <entity-data @update="update.state = true"/>
         </div>
         <div class="col-xs-8">
-          <entity-conflict-summary v-if="entity.data?.conflict" :entity="entity" @resolve="afterResolve"/>
+          <entity-conflict-summary v-if="project.dataExists && entity.data?.conflict" :entity="entity" @resolve="afterResolve"/>
           <entity-activity/>
         </div>
       </div>

test/components/entity/conflict-summary.spec.js

@@ -6,6 +6,7 @@ import useEntityVersions from '../../../src/request-data/entity-versions';
 import testData from '../../data';
 import { mergeMountOptions, mount } from '../../util/lifecycle';
 import { mockHttp } from '../../util/http';
+import { mockLogin } from '../../util/session';
 import { mockRouter } from '../../util/router';
 import { testRequestData } from '../../util/request-data';
 
@@ -18,6 +19,7 @@ const mountOptions = (options = undefined) => {
     },
     container: {
       requestData: testRequestData([useEntityVersions], {
+        project: testData.extendedProjects.last(),
         dataset: testData.extendedDatasets.last(),
         entityVersions: testData.extendedEntityVersions.sorted()
       }),
@@ -29,17 +31,28 @@ const mountComponent = (options = undefined) =>
   mount(EntityConflictSummary, mountOptions(options));
 
 describe('EntityConflictSummary', () => {
-  it('show the confirmation modal', async () => {
+  it('does not show the footer to a project viewer', () => {
+    mockLogin({ role: 'none' });
+    testData.extendedProjects.createPast(1, { role: 'viewer', datasets: 1 });
     testData.extendedEntities.createPast(1);
-    const component = await mountComponent();
+    testData.extendedEntityVersions.createPast(2, { baseVersion: 1 });
+    const component = mountComponent();
+    component.find('.panel-footer').exists().should.be.false();
+    component.find('.btn-default').exists().should.be.false();
+  });
 
+  it('show the confirmation modal', async () => {
+    testData.extendedEntities.createPast(1);
+    testData.extendedEntityVersions.createPast(2, { baseVersion: 1 });
+    const component = mountComponent();
     component.getComponent(Confirmation).props().state.should.be.false();
     await component.get('.btn-default').trigger('click');
     component.getComponent(Confirmation).props().state.should.be.true();
   });
 
   it('sends the correct request', async () => {
     testData.extendedEntities.createPast(1, { uuid: 'e' });
+    testData.extendedEntityVersions.createPast(2, { baseVersion: 1 });
     return mockHttp()
       .mount(EntityConflictSummary, mountOptions())
       .request(async (component) => {
@@ -50,7 +63,7 @@ describe('EntityConflictSummary', () => {
       .respondWithProblem()
       .testRequests([{
         method: 'PATCH',
-        url: '/v1/projects/1/datasets/trees/entities/e?resolve=true&baseVersion=1',
+        url: '/v1/projects/1/datasets/trees/entities/e?resolve=true&baseVersion=3',
       }]);
   });
 
@@ -70,29 +83,28 @@ describe('EntityConflictSummary', () => {
 
     it('should emit resolve', async () => {
       testData.extendedEntities.createPast(1);
-
+      testData.extendedEntityVersions.createPast(2, { baseVersion: 1 });
       const component = await resolve();
-
       component.emitted().should.have.property('resolve');
     });
 
     it('should show alert', async () => {
       testData.extendedEntities.createPast(1);
-
+      testData.extendedEntityVersions.createPast(2, { baseVersion: 1 });
       const component = await resolve();
       component.should.alert('success');
     });
 
     it('should hide confirmation modal', async () => {
       testData.extendedEntities.createPast(1);
-
+      testData.extendedEntityVersions.createPast(2, { baseVersion: 1 });
       const component = await resolve();
-
       component.getComponent(Confirmation).props().state.should.be.false();
     });
 
     it('shows conflict error', () => {
       testData.extendedEntities.createPast(1);
+      testData.extendedEntityVersions.createPast(2, { baseVersion: 1 });
       return mockHttp()
         .mount(EntityConflictSummary, mountOptions())
         .request(async (component) => {

test/components/entity/resolve.spec.js

@@ -4,6 +4,7 @@ import EntityResolve from '../../../src/components/entity/resolve.vue';
 
 import testData from '../../data';
 import { mockHttp } from '../../util/http';
+import { mockLogin } from '../../util/session';
 import { mockRouter } from '../../util/router';
 
 const relevantToConflict = () => testData.extendedEntityVersions.sorted()
@@ -16,7 +17,7 @@ const showModal = () => {
         provide: { projectId: '1', datasetName: dataset.name }
       },
       container: {
-        requestData: { dataset },
+        requestData: { project: testData.extendedProjects.last(), dataset },
         router: mockRouter(`/projects/1/entity-lists/${encodeURIComponent(dataset.name)}/entities`)
       }
     })
@@ -138,4 +139,25 @@ describe('EntityResolve', () => {
         });
     });
   });
+
+  describe('project viewer', () => {
+    beforeEach(() => {
+      mockLogin({ role: 'none' });
+      testData.extendedProjects.createPast(1, { role: 'viewer', datasets: 1 });
+      testData.extendedEntities.createPast(1);
+      testData.extendedEntityVersions.createPast(2, { baseVersion: 1 });
+    });
+
+    it('does not show the second paragraph', async () => {
+      const modal = await showModal();
+      modal.findAll('p').length.should.equal(1);
+    });
+
+    it('does not show the update or resolve buttons', async () => {
+      const modal = await showModal();
+      const btns = modal.findAll('#entity-resolve-table-toggle ~ .btn');
+      btns.length.should.equal(1);
+      btns[0].classes('more-details').should.be.true();
+    });
+  });
 });