Add placeholder component when lacking edit access (#333)

* Add placeholder component when lacking edit access

* Add comment explaining experiment refresh

* Add check for "force"=True

Author: annehaley

client/src/components/ControlPanel.vue

@@ -21,6 +21,7 @@ export default {
     window: 256,
     level: 150,
     newExperimentNote: '',
+    loadingLock: undefined,
   }),
   computed: {
     ...mapState([
@@ -46,6 +47,11 @@ export default {
     experimentId() {
       return this.currentViewData.experimentId;
     },
+    editRights() {
+      return this.myCurrentProjectRoles.includes('tier_1_reviewer')
+      || this.myCurrentProjectRoles.includes('tier_2_reviewer')
+      || this.myCurrentProjectRoles.includes('superuser');
+    },
     experimentIsEditable() {
       return this.lockOwner && this.lockOwner.id === this.user.id;
     },
@@ -129,14 +135,13 @@ export default {
       'setShowCrosshairs',
       'setStoreCrosshairs',
     ]),
-    async switchLock(newExp, oldExp = null) {
+    async switchLock(newExp, oldExp = null, force = false) {
       if (!this.navigateToNextIfCurrentScanNull()) {
-        if (this.myCurrentProjectRoles.includes('tier_1_reviewer')
-      || this.myCurrentProjectRoles.includes('tier_2_reviewer')
-      || this.myCurrentProjectRoles.includes('superuser')) {
+        if (this.editRights) {
+          this.loadingLock = true;
           if (oldExp) {
             try {
-              await this.setLock({ experimentId: oldExp, lock: false });
+              await this.setLock({ experimentId: oldExp, lock: false, force });
             } catch (err) {
               this.$snackbar({
                 text: 'Failed to release edit access on Experiment.',
@@ -145,12 +150,13 @@ export default {
             }
           }
           try {
-            await this.setLock({ experimentId: newExp, lock: true });
+            await this.setLock({ experimentId: newExp, lock: true, force });
           } catch (err) {
             this.$snackbar({
               text: 'Failed to claim edit access on Experiment.',
               timeout: 6000,
             });
+            this.loadingLock = false;
           }
         }
       }
@@ -547,9 +553,40 @@ export default {
                 </v-col>
                 <v-col cols="6">
                   <DecisionButtons
-                    :experimentIsEditable="experimentIsEditable"
+                    v-if="experimentIsEditable"
                     @handleKeyPress="handleKeyPress"
                   />
+                  <div
+                    v-else
+                    class="uneditable-notice"
+                  >
+                    <v-icon>mdi-lock</v-icon>
+                    You {{ editRights ?'have not claimed' :'do not have' }}
+                    edit access on this Experiment.
+                    <div
+                      v-if="lockOwner"
+                      class="my-3"
+                      style="text-align:center"
+                    >
+                      <UserAvatar
+                        :target-user="lockOwner"
+                        as-editor
+                      />
+                      <br>
+                      {{ lockOwner.username }}
+                      <br>
+                      currently has edit access.
+                    </div>
+                    <v-btn
+                      v-if="editRights && (user.is_superuser || !lockOwner)"
+                      :loading="loadingLock"
+                      :disabled="loadingLock"
+                      @click="switchLock(experimentId, null, force=true)"
+                      color="primary"
+                    >
+                      {{ lockOwner ?"Steal edit access" :"Claim edit access" }}
+                    </v-btn>
+                  </div>
                 </v-col>
               </v-row>
             </v-container>
@@ -585,4 +622,12 @@ export default {
   }
 }
 
+.uneditable-notice {
+  display: flex;
+  flex-flow: column wrap;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-content: center;
+}
 </style>

client/src/components/DecisionButtons.vue

@@ -1,6 +1,6 @@
 <script>
 import _ from 'lodash';
-import { mapGetters, mapState } from 'vuex';
+import { mapGetters, mapMutations, mapState } from 'vuex';
 import djangoRest from '@/django';
 import store from '@/store';
 import EvaluationResults from '@/components/EvaluationResults.vue';
@@ -11,12 +11,6 @@ export default {
   components: {
     EvaluationResults,
   },
-  props: {
-    experimentIsEditable: {
-      type: Boolean,
-      default: false,
-    },
-  },
   data() {
     return {
       warnDecision: false,
@@ -108,6 +102,9 @@ export default {
     },
   },
   methods: {
+    ...mapMutations([
+      'updateExperiment',
+    ]),
     convertValueToLabel(artifactName) {
       return artifactName
         .replace('susceptibility_metal', 'metal_susceptibility')
@@ -210,9 +207,16 @@ export default {
           this.newComment = '';
         } catch (err) {
           this.$snackbar({
-            text: `Save failed: ${err.response.data.detail || 'Server error'}`,
+            text: `Save failed: ${err || 'Server error'}`,
             timeout: 6000,
           });
+          // If error is due a lock contention, it is likely because someone claimed the lock
+          //   after we got the experiment data
+          //   (else we would already know about the lock owner and not attempt to lock).
+          //   Thus, we need to update our experiment's info and check who the lock owner is
+          if (err.toString().includes('lock')) {
+            this.updateExperiment(await djangoRest.experiment(this.currentViewData.experimentId));
+          }
         }
       } else {
         this.warnDecision = true;
@@ -224,7 +228,6 @@ export default {
 
 <template>
   <v-container
-    v-if="experimentIsEditable"
     fluid
     class="px-5"
   >

client/src/django.ts

@@ -144,8 +144,8 @@ const djangoClient = {
     const { data } = await apiClient.post(`/experiments/${experimentId}/note`, { note });
     return data;
   },
-  async lockExperiment(experimentId: string) {
-    const { data } = await apiClient.post(`/experiments/${experimentId}/lock`);
+  async lockExperiment(experimentId: string, force: boolean) {
+    const { data } = await apiClient.post(`/experiments/${experimentId}/lock`, { force });
     return data;
   },
   async unlockExperiment(experimentId: string) {

client/src/store/index.ts

@@ -833,11 +833,11 @@ const {
       // If necessary, queue loading scans of new experiment
       checkLoadExperiment(oldExperiment, newExperiment);
     },
-    async setLock({ commit }, { experimentId, lock }) {
+    async setLock({ commit }, { experimentId, lock, force }) {
       if (lock) {
         commit(
           'updateExperiment',
-          await djangoRest.lockExperiment(experimentId),
+          await djangoRest.lockExperiment(experimentId, force),
         );
       } else {
         commit(

miqa/core/rest/experiment.py

@@ -115,20 +115,26 @@ def lock(self, request, pk=None):
             experiment: Experiment = Experiment.objects.select_for_update().get(pk=pk)
             if experiment.project.archived:
                 raise ArchivedProject()
-            if experiment.lock_owner is not None and experiment.lock_owner != request.user:
+            if (
+                experiment.lock_owner is not None
+                and experiment.lock_owner != request.user
+                and not (
+                    request.user.is_superuser and 'force' in request.data and request.data['force']
+                )
+            ):
                 raise LockContention()
-            if experiment.lock_owner is None or experiment.lock_owner == request.user:
-                previously_locked_experiments = Experiment.objects.filter(lock_owner=request.user)
-                for previously_locked_experiment in previously_locked_experiments:
-                    previously_locked_experiment.lock_owner = None
-                    previously_locked_experiment.save()
-                experiment.lock_owner = request.user
-                experiment.save(update_fields=['lock_owner'])
 
-                return Response(
-                    ExperimentSerializer(experiment).data,
-                    status=status.HTTP_200_OK,
-                )
+            previously_locked_experiments = Experiment.objects.filter(lock_owner=request.user)
+            for previously_locked_experiment in previously_locked_experiments:
+                previously_locked_experiment.lock_owner = None
+                previously_locked_experiment.save(update_fields=['lock_owner'])
+            experiment.lock_owner = request.user
+            experiment.save(update_fields=['lock_owner'])
+
+            return Response(
+                ExperimentSerializer(experiment).data,
+                status=status.HTTP_200_OK,
+            )
         return Response(status=status.HTTP_204_NO_CONTENT)
 
     @swagger_auto_schema(