Prefix local storage access with user email address (#4217)

* prefix local storage access with user email address
* update changelog
* Merge branch 'master' into prefix-localstorage
* Apply suggestions from code review

Co-Authored-By: Daniel <[email protected]>
* add prefixKey to UserLocalStorage.clear()

Author: philippotto

CHANGELOG.md

@@ -47,6 +47,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 - Fixed a bug where for uint24 color layers, scrambled data was shown for missing magnifications. [#4188](https://github.com/scalableminds/webknossos/pull/4188)
 - Fixed a bug where collapsing/expanding all tree groups would trigger when toggling a single tree [#4178](https://github.com/scalableminds/webknossos/pull/4178)
 - Fixed performance for time logging. [#4196](https://github.com/scalableminds/webknossos/pull/4196)
+- Personal tracing layouts are saved per user now. [#4217](https://github.com/scalableminds/webknossos/pull/4217)
 - Fixed an error message when quickly resizing the browser window. [#4205](https://github.com/scalableminds/webknossos/pull/4205)
 
 ### Removed

frontend/javascripts/dashboard/dashboard_view.js

@@ -14,6 +14,7 @@ import DatasetView from "dashboard/dataset_view";
 import ExplorativeAnnotationsView from "dashboard/explorative_annotations_view";
 import NmlUploadZoneContainer from "oxalis/view/nml_upload_zone_container";
 import Request from "libs/request";
+import UserLocalStorage from "libs/user_local_storage";
 
 const { TabPane } = Tabs;
 
@@ -45,7 +46,7 @@ class DashboardView extends React.PureComponent<PropsWithRouter, State> {
 
     const validTabKeys = this.getValidTabKeys();
     const { initialTabKey } = this.props;
-    const lastUsedTabKey = localStorage.getItem("lastUsedDashboardTab");
+    const lastUsedTabKey = UserLocalStorage.getItem("lastUsedDashboardTab");
     const defaultTabKey = this.props.isAdminView ? "tasks" : "datasets";
 
     // Flow doesn't allow validTabKeys[key] where key may be null, so check that first
@@ -132,7 +133,7 @@ class DashboardView extends React.PureComponent<PropsWithRouter, State> {
       const tabKeyToURLMap = _.invert(urlTokenToTabKeyMap);
       const url = tabKeyToURLMap[activeTabKey];
       if (url) {
-        localStorage.setItem("lastUsedDashboardTab", activeTabKey);
+        UserLocalStorage.setItem("lastUsedDashboardTab", activeTabKey);
         if (!this.props.isAdminView) {
           this.props.history.push(`/dashboard/${url}`);
         }

frontend/javascripts/dashboard/dataset_view.js

@@ -14,6 +14,7 @@ import Persistence from "libs/persistence";
 import SampleDatasetsModal from "dashboard/dataset/sample_datasets_modal";
 import * as Utils from "libs/utils";
 import renderIndependently from "libs/render_independently";
+import UserLocalStorage from "libs/user_local_storage";
 
 const { Search, Group: InputGroup } = Input;
 
@@ -46,13 +47,13 @@ const persistence: Persistence<State> = new Persistence(
 export const wkDatasetsCacheKey = "wk.datasets";
 export const datasetCache = {
   set(datasets: APIMaybeUnimportedDataset[]): void {
-    localStorage.setItem(wkDatasetsCacheKey, JSON.stringify(datasets));
+    UserLocalStorage.setItem(wkDatasetsCacheKey, JSON.stringify(datasets));
   },
   get(): APIMaybeUnimportedDataset[] {
-    return Utils.parseAsMaybe(localStorage.getItem(wkDatasetsCacheKey)).getOrElse([]);
+    return Utils.parseAsMaybe(UserLocalStorage.getItem(wkDatasetsCacheKey)).getOrElse([]);
   },
   clear(): void {
-    localStorage.removeItem(wkDatasetsCacheKey);
+    UserLocalStorage.removeItem(wkDatasetsCacheKey);
   },
 };
 

frontend/javascripts/dashboard/explorative_annotations_view.js

@@ -30,6 +30,7 @@ import Toast from "libs/toast";
 import * as Utils from "libs/utils";
 import messages from "messages";
 import { trackAction } from "oxalis/model/helpers/analytics";
+import UserLocalStorage from "libs/user_local_storage";
 
 const { Column } = Table;
 const { Search } = Input;
@@ -99,7 +100,7 @@ class ExplorativeAnnotationsView extends React.PureComponent<Props, State> {
 
   restoreSearchTags() {
     // restore the search query tags from the last session
-    const searchTagString = localStorage.getItem("lastDashboardSearchTags");
+    const searchTagString = UserLocalStorage.getItem("lastDashboardSearchTags");
     if (searchTagString) {
       try {
         const searchTags = JSON.parse(searchTagString);
@@ -297,7 +298,7 @@ class ExplorativeAnnotationsView extends React.PureComponent<Props, State> {
     if (!this.state.tags.includes(tag)) {
       this.setState(prevState => {
         const newTags = update(prevState.tags, { $push: [tag] });
-        localStorage.setItem("lastDashboardSearchTags", JSON.stringify(newTags));
+        UserLocalStorage.setItem("lastDashboardSearchTags", JSON.stringify(newTags));
         return { tags: newTags };
       });
     }
@@ -306,7 +307,7 @@ class ExplorativeAnnotationsView extends React.PureComponent<Props, State> {
   removeTagFromSearch = (tag: string): void => {
     this.setState(prevState => {
       const newTags = prevState.tags.filter(t => t !== tag);
-      localStorage.setItem("lastDashboardSearchTags", JSON.stringify(newTags));
+      UserLocalStorage.setItem("lastDashboardSearchTags", JSON.stringify(newTags));
       return { tags: newTags };
     });
   };

frontend/javascripts/libs/user_local_storage.js

@@ -0,0 +1,29 @@
+// @flow
+
+import Store from "oxalis/store";
+
+function prefixKey(key) {
+  const { activeUser } = Store.getState();
+  const prefix = !activeUser ? "Anonymous" : activeUser.email;
+  return `${prefix}-${key}`;
+}
+
+const UserLocalStorage = {
+  getItem(key: string): ?string {
+    return localStorage.getItem(prefixKey(key));
+  },
+
+  setItem(key: string, value: string): void {
+    return localStorage.setItem(prefixKey(key), value);
+  },
+
+  removeItem(key: string): void {
+    return localStorage.removeItem(prefixKey(key));
+  },
+
+  clear(): void {
+    localStorage.clear();
+  },
+};
+
+export default UserLocalStorage;

frontend/javascripts/oxalis/view/action-bar/add_new_layout_modal.js

@@ -18,16 +18,18 @@ class AddNewLayoutModal extends React.PureComponent<Props, State> {
     value: "",
   };
 
+  onConfirm = () => {
+    const value = this.state.value;
+    this.setState({ value: "" });
+    this.props.addLayout(value);
+  };
+
   render() {
     return (
       <Modal
         title="Add a new layout"
         visible={this.props.visible}
-        onOk={() => {
-          const value = this.state.value;
-          this.setState({ value: "" });
-          this.props.addLayout(value);
-        }}
+        onOk={this.onConfirm}
         onCancel={this.props.onCancel}
       >
         <Input
@@ -36,6 +38,8 @@ class AddNewLayoutModal extends React.PureComponent<Props, State> {
           onChange={evt => {
             this.setState({ value: evt.target.value });
           }}
+          autoFocus
+          onPressEnter={this.onConfirm}
         />
       </Modal>
     );

frontend/javascripts/oxalis/view/layouting/layout_persistence.js

@@ -3,9 +3,11 @@ import NanoEvents from "nanoevents";
 import _ from "lodash";
 
 import { getIsInIframe } from "libs/utils";
+import { listenToStoreProperty } from "oxalis/model/helpers/listener_helpers";
 import { setStoredLayoutsAction } from "oxalis/model/actions/ui_actions";
 import Store from "oxalis/store";
 import Toast from "libs/toast";
+import UserLocalStorage from "libs/user_local_storage";
 
 import getDefaultLayouts, {
   currentLayoutVersion,
@@ -25,12 +27,12 @@ const localStorageKeys = {
 };
 
 function readStoredLayoutConfigs() {
-  const storedLayoutVersion = localStorage.getItem(localStorageKeys.currentLayoutVersion);
+  const storedLayoutVersion = UserLocalStorage.getItem(localStorageKeys.currentLayoutVersion);
   const defaultLayoutConfig = getCurrentDefaultLayoutConfig();
   if (getIsInIframe() || !storedLayoutVersion || disableLayoutPersistance) {
     return defaultLayoutConfig;
   }
-  const layoutString = localStorage.getItem(localStorageKeys.goldenWkLayouts);
+  const layoutString = UserLocalStorage.getItem(localStorageKeys.goldenWkLayouts);
   if (!layoutString) {
     return defaultLayoutConfig;
   }
@@ -80,16 +82,25 @@ function readStoredLayoutConfigs() {
   return defaultLayoutConfig;
 }
 
-Store.dispatch(setStoredLayoutsAction(readStoredLayoutConfigs()));
+listenToStoreProperty(
+  storeState => storeState.activeUser,
+  () => {
+    Store.dispatch(setStoredLayoutsAction(readStoredLayoutConfigs()));
+  },
+  true,
+);
 
 function persistLayoutConfigs() {
   if (getIsInIframe()) {
     // Don't persist layout in iframe
     return;
   }
   const { storedLayouts } = Store.getState().uiInformation;
-  localStorage.setItem(localStorageKeys.goldenWkLayouts, JSON.stringify(storedLayouts));
-  localStorage.setItem(localStorageKeys.currentLayoutVersion, JSON.stringify(currentLayoutVersion));
+  UserLocalStorage.setItem(localStorageKeys.goldenWkLayouts, JSON.stringify(storedLayouts));
+  UserLocalStorage.setItem(
+    localStorageKeys.currentLayoutVersion,
+    JSON.stringify(currentLayoutVersion),
+  );
 }
 
 layoutEmitter.on("resetLayout", (layoutKey: LayoutKeys, activeLayout: string) => {

frontend/javascripts/oxalis/view/layouting/tracing_layout_view.js

@@ -95,7 +95,7 @@ class TracingLayoutView extends React.PureComponent<Props, State> {
     ) {
       lastActiveLayout = props.storedLayouts.LastActiveLayouts[layoutType];
     } else {
-      // added as a valide fallback when there are no stored last active layouts
+      // added as a fallback when there are no stored last active layouts
       const firstStoredLayout = Object.keys(props.storedLayouts[layoutType])[0];
       lastActiveLayout = firstStoredLayout;
     }