Add user preference persistence framework

src/components/form/trash-list.vue

@@ -11,22 +11,27 @@ except according to the terms contained in the LICENSE file.
 -->
 <template>
   <div v-if="count > 0" id="form-trash-list">
-    <div id="form-trash-list-header">
-      <span id="form-trash-list-title">
-        <span class="icon-trash"></span>
-        <span>{{ $t('title') }}</span>
-      </span>
-      <span id="form-trash-list-count">{{ $t('trashCount', { count: $n(count, 'default') }) }}</span>
-      <span id="form-trash-list-note">{{ $t('message') }}</span>
-    </div>
-    <table id="form-trash-list-table" class="table">
-      <tbody>
-        <form-trash-row v-for="form of sortedDeletedForms" :key="form.id" :form="form"
-          @start-restore="restoreForm.show({ form: $event })"/>
-      </tbody>
-    </table>
-    <form-restore v-bind="restoreForm" @hide="restoreForm.hide()"
-      @success="afterRestore"/>
+    <details :open="!isFormTrashCollapsed" @toggle="toggleTrashExpansion">
+      <summary>
+        <div id="form-trash-list-header">
+          <span id="form-trash-list-title">
+            <span id="form-trash-expander" :class="{ 'icon-chevron-right': isFormTrashCollapsed, 'icon-chevron-down': !isFormTrashCollapsed }"></span>
+            <span class="icon-trash"></span>
+            <span>{{ $t('title') }}</span>
+          </span>
+          <span id="form-trash-list-count">{{ $t('trashCount', { count: $n(count, 'default') }) }}</span>
+          <span id="form-trash-list-note">{{ $t('message') }}</span>
+        </div>
+      </summary>
+      <table id="form-trash-list-table" class="table">
+        <tbody>
+          <form-trash-row v-for="form of sortedDeletedForms" :key="form.id" :form="form"
+            @start-restore="restoreForm.show({ form: $event })"/>
+        </tbody>
+      </table>
+      <form-restore v-bind="restoreForm" @hide="restoreForm.hide()"
+        @success="afterRestore"/>
+    </details>
   </div>
 </template>
 
@@ -49,8 +54,8 @@ export default {
   setup() {
     // The component does not assume that this data will exist when the
     // component is created.
-    const { project, deletedForms } = useRequestData();
-    return { project, deletedForms, restoreForm: modalData() };
+    const { project, deletedForms, currentUser } = useRequestData();
+    return { project, deletedForms, currentUser, restoreForm: modalData() };
   },
   computed: {
     count() {
@@ -59,7 +64,10 @@ export default {
     sortedDeletedForms() {
       const sortByDeletedAt = sortWith([ascend(entry => entry.deletedAt)]);
       return sortByDeletedAt(this.deletedForms.data);
-    }
+    },
+    isFormTrashCollapsed() {
+      return (this.currentUser.dataExists && this.currentUser.preferences.projects[this.project.id].formTrashCollapsed);
+    },
   },
   created() {
     this.fetchDeletedForms(false);
@@ -82,7 +90,13 @@ export default {
       // tell parent component (ProjectOverview) to refresh regular forms list
       // (by emitting event to that component's parent)
       this.$emit('restore');
-    }
+    },
+    toggleTrashExpansion(evt) {
+      const projProps = this.currentUser.preferences.projects[this.project.id];
+      if (evt.newState === 'closed') {
+        projProps.formTrashCollapsed = true;
+      } else if (projProps.formTrashCollapsed) delete projProps.formTrashCollapsed;
+    },
   }
 };
 </script>
@@ -94,6 +108,12 @@ export default {
   display: flex;
   align-items: baseline;
 
+  #form-trash-expander {
+    // Fixate the width as icon-chevron-down and icon-chevron-right have unequal width :-(
+    display: inline-block;
+    width: 1em;
+  }
+
   .icon-trash {
     padding-right: 8px;
   }

src/components/project/list.vue

@@ -95,7 +95,15 @@ export default {
   setup() {
     const { currentUser, projects } = useRequestData();
 
-    const sortMode = ref('latest');
+    const sortMode = computed({
+      get() {
+        return currentUser.preferences.site.projectSortMode || 'latest';
+      },
+      set(val) {
+        currentUser.preferences.site.projectSortMode = val;
+      },
+    });
+
     const sortFunction = computed(() => sortFunctions[sortMode.value]);
 
     const activeProjects = ref(null);
@@ -164,7 +172,7 @@ export default {
       const message = this.$t('alert.create');
       this.$router.push(this.projectPath(project.id))
         .then(() => { this.alert.success(message); });
-    }
+    },
   }
 };
 </script>

src/request-data/resource.js

@@ -51,7 +51,7 @@ class BaseResource {
   }
 }
 
-const _container = Symbol('container');
+export const _container = Symbol('container');
 const _abortController = Symbol('abortController');
 class Resource extends BaseResource {
   constructor(container, name, store) {

src/request-data/resources.js

@@ -9,22 +9,132 @@ https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
 including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 */
-import { computed, reactive, shallowReactive, watchSyncEffect } from 'vue';
+import { computed, reactive, shallowReactive, watchSyncEffect, isReactive } from 'vue';
 import { mergeDeepLeft } from 'ramda';
 
 import configDefaults from '../config';
 import { computeIfExists, hasVerbs, setupOption, transformForm } from './util';
 import { noargs } from '../util/util';
+import { apiPaths, withAuth } from '../util/request';
+import { _container } from './resource';
 
 export default ({ i18n }, createResource) => {
   // Resources related to the session
   createResource('session');
-  createResource('currentUser', () => ({
+  createResource('currentUser', (self) => ({
     /* eslint-disable no-param-reassign */
     transformResponse: ({ data }) => {
       data.verbs = new Set(data.verbs);
       data.can = hasVerbs;
+      data.preferences = {
+        site: new Proxy(
+          shallowReactive(data.preferences.site),
+          {
+            deleteProperty(target, prop) {
+              const retval = (delete target[prop]);
+              self.preferenceOps.propagate(prop, null, null); // DELETE to backend
+              return retval;
+            },
+            set(target, prop, value) {
+              // eslint-disable-next-line no-multi-assign
+              const retval = (target[prop] = value);
+              self.preferenceOps.propagate(prop, value, null); // PUT to backend
+              return retval;
+            },
+          },
+        ),
+        projects: new Proxy(
+          data.preferences.projects,
+          {
+            deleteProperty() {
+              throw new Error('Deleting a project\'s whole property collection is not supported. Delete each property individually, eg "delete preferences.projects[3].foo".');
+            },
+            set() {
+              throw new Error('Directly setting a project\'s whole property collection is not supported. Set each property individually, eg "preferences.projects[3].foo = \'bar\'"');
+            },
+            get(target, projectId) {
+              if (Number.isNaN(parseInt(projectId, 10))) throw new TypeError(`Not an integer project ID: "${projectId}"`);
+              const projectProps = target[projectId];
+              if (projectProps === undefined || (!isReactive(projectProps))) { // not reentrant (TOCTOU issue) but there's no real way to solve it — as this is supposed to be a synchronous method we can't simply wrap it in a Lock
+                target[projectId] = new Proxy(
+                  // make (potentially autovivicated) props reactive, and front them with a proxy to enable our setters/deleters
+                  shallowReactive(projectProps === undefined ? {} : projectProps),
+                  {
+                    deleteProperty(from, prop) {
+                      const retval = (delete from[prop]);
+                      self.preferenceOps.propagate(prop, null, projectId); // DELETE to backend
+                      return retval;
+                    },
+                    set(from, prop, propval) {
+                      // eslint-disable-next-line no-multi-assign
+                      const retval = (from[prop] = propval);
+                      self.preferenceOps.propagate(prop, propval, projectId); // PUT to backend
+                      return retval;
+                    },
+                  }
+                );
+              }
+              return target[projectId];
+            },
+          }
+        ),
+      };
       return shallowReactive(data);
+    },
+    preferenceOps: {
+      self,
+      _container,
+      abortControllers: {},
+      instanceID: crypto.randomUUID(),
+      propagate: (k, v, projectId) => {
+        // As we need to be able to have multiple requests in-flight (not canceling eachother), we can't use resource.request() here.
+        // However, we want to avoid stacking requests for the same key, so we abort preceding requests for the same key, if any.
+        // Note that because locks are origin-scoped, we use a store instantiation identifier to scope them to this app instance.
+        const keyLockName = `userPreferences-${self.instanceID}-keystack-${projectId}-${k}`;
+        navigator.locks.request(
+          `userPreferences-${self.instanceID}-lockops`,
+          () => {
+            navigator.locks.request(
+              keyLockName,
+              { ifAvailable: true },
+              (lockForKey) => {
+                const aborter = new AbortController();
+                if (!lockForKey) {
+                  // Cancel the preceding request, a new one supersedes it.
+                  self.preferenceOps.abortControllers[k].abort();
+                  return navigator.locks.request(
+                    keyLockName,
+                    () => {
+                      self.preferenceOps.abortControllers[k] = aborter;
+                      return self.preferenceOps.request(k, v, projectId, aborter);
+                    }
+                  );
+                }
+                self.preferenceOps.abortControllers[k] = aborter;
+                return self.preferenceOps.request(k, v, projectId, aborter);
+              },
+            );
+            return Promise.resolve(); // return asap with a resolved promise so the outer lockops lock gets released; we don't wan't to wait here for the inner keylock-enveloped requests.
+          }
+        );
+      },
+      request: (k, v, projectId, aborter) => {
+        const { requestData, http } = self[self.preferenceOps._container];
+        return http.request(
+          withAuth(
+            {
+              method: (v === null) ? 'DELETE' : 'PUT',
+              url: (projectId === null) ? `${apiPaths.userSitePreferences(k)}` : `${apiPaths.userProjectPreferences(projectId, k)}`,
+              headers: {
+                'Content-Type': 'application/json',
+              },
+              data: (v === null) ? undefined : { propertyValue: v },
+              signal: aborter.signal,
+            },
+            requestData.session.token
+          )
+        );
+      },
     }
     /* eslint-enable no-param-reassign */
   }));

src/util/request.js

@@ -173,7 +173,9 @@ export const apiPaths = {
   fieldKeys: projectPath('/app-users'),
   serverUrlForFieldKey: (token, projectId) =>
     `/v1/key/${token}/projects/${projectId}`,
-  audits: (query) => `/v1/audits${queryString(query)}`
+  audits: (query) => `/v1/audits${queryString(query)}`,
+  userSitePreferences: (k) => `/v1/user-preferences/site/${k}`,
+  userProjectPreferences: (projectId, k) => `/v1/user-preferences/project/${projectId}/${k}`,
 };
 
 

test/data/users.js

@@ -24,7 +24,11 @@ export const extendedUsers = dataStore({
     role = 'admin',
     verbs = verbsByRole(role),
     createdAt = undefined,
-    deletedAt = undefined
+    deletedAt = undefined,
+    preferences = {
+      site: {},
+      projects: {},
+    },
   }) => ({
     id,
     type: 'user',
@@ -35,7 +39,8 @@ export const extendedUsers = dataStore({
       ? createdAt
       : (inPast ? fakePastDate([lastCreatedAt]) : new Date().toISOString()),
     updatedAt: null,
-    deletedAt
+    deletedAt,
+    preferences,
   }),
   sort: (administrator1, administrator2) =>
     administrator1.email.localeCompare(administrator2.email)