Visual review app gitlab storage keys

Move away from using generic LocalStorage
and SessionStorage keys which could be
used by the customer for their own application.

app/assets/javascripts/visual_review_toolbar/components/comment.js

 import { nextView } from '../store';
-import { localStorage, COMMENT_BOX, LOGOUT } from '../shared';
+import { localStorage, COMMENT_BOX, LOGOUT, STORAGE_MR_ID, STORAGE_TOKEN } from '../shared';
 import { clearNote } from './note';
 import { buttonClearStyles } from './utils';
 import { addForm } from './wrapper';
@@ -27,8 +27,8 @@ const comment = state => {
 // If we reach a design where we can logout from multiple views, promote this
 // to it's own package
 const logoutUser = state => {
-  localStorage.removeItem('token');
-  localStorage.removeItem('mergeRequestId');
+  localStorage.removeItem(STORAGE_TOKEN);
+  localStorage.removeItem(STORAGE_MR_ID);
   state.token = '';
   state.mergeRequestId = '';
 

app/assets/javascripts/visual_review_toolbar/components/comment_mr_note.js

 import { nextView } from '../store';
-import { localStorage, CHANGE_MR_ID_BUTTON, COMMENT_BOX } from '../shared';
+import { localStorage, CHANGE_MR_ID_BUTTON, COMMENT_BOX, STORAGE_MR_ID } from '../shared';
 import { clearNote } from './note';
 import { buttonClearStyles } from './utils';
 import { addForm } from './wrapper';
@@ -18,7 +18,7 @@ const selectedMrNote = state => {
 };
 
 const clearMrId = state => {
-  localStorage.removeItem('mergeRequestId');
+  localStorage.removeItem(STORAGE_MR_ID);
   state.mergeRequestId = '';
 };
 

app/assets/javascripts/visual_review_toolbar/components/comment_storage.js

 import { selectCommentBox } from './utils';
-import { sessionStorage } from '../shared';
+import { sessionStorage, STORAGE_COMMENT } from '../shared';
 
-const getSavedComment = () => sessionStorage.getItem('comment') || '';
+const getSavedComment = () => sessionStorage.getItem(STORAGE_COMMENT) || '';
 
 const saveComment = () => {
   const currentComment = selectCommentBox();
@@ -9,12 +9,12 @@ const saveComment = () => {
   // This may be added to any view via top-level beforeunload listener
   // so let's skip if it does not apply
   if (currentComment && currentComment.value) {
-    sessionStorage.setItem('comment', currentComment.value);
+    sessionStorage.setItem(STORAGE_COMMENT, currentComment.value);
   }
 };
 
 const clearSavedComment = () => {
-  sessionStorage.removeItem('comment');
+  sessionStorage.removeItem(STORAGE_COMMENT);
 };
 
 export { getSavedComment, saveComment, clearSavedComment };

app/assets/javascripts/visual_review_toolbar/components/login.js

 import { nextView } from '../store';
-import { localStorage, LOGIN, TOKEN_BOX } from '../shared';
+import { localStorage, LOGIN, TOKEN_BOX, STORAGE_TOKEN } from '../shared';
 import { clearNote, postError } from './note';
 import { rememberBox, submitButton } from './form_elements';
 import { selectRemember, selectToken } from './utils';
@@ -22,7 +22,7 @@ const storeToken = (token, state) => {
   const rememberMe = selectRemember().checked;
 
   if (rememberMe) {
-    localStorage.setItem('token', token);
+    localStorage.setItem(STORAGE_TOKEN, token);
   }
 
   state.token = token;

app/assets/javascripts/visual_review_toolbar/components/mr_id.js

 import { nextView } from '../store';
-import { MR_ID, MR_ID_BUTTON, localStorage } from '../shared';
+import { MR_ID, MR_ID_BUTTON, STORAGE_MR_ID, localStorage } from '../shared';
 import { clearNote, postError } from './note';
 import { rememberBox, submitButton } from './form_elements';
 import { selectForm, selectMrBox, selectRemember } from './utils';
@@ -23,7 +23,7 @@ const storeMR = (id, state) => {
   const rememberMe = selectRemember().checked;
 
   if (rememberMe) {
-    localStorage.setItem('mergeRequestId', id);
+    localStorage.setItem(STORAGE_MR_ID, id);
   }
 
   state.mergeRequestId = id;

app/assets/javascripts/visual_review_toolbar/shared/constants.js

@@ -15,6 +15,12 @@ const REMEMBER_ITEM = 'gitlab-remember-item';
 const REVIEW_CONTAINER = 'gitlab-review-container';
 const TOKEN_BOX = 'gitlab-token';
 
+// Storage keys
+const STORAGE_PREFIX = '--gitlab'; // Using `--` to make the prefix more unique
+const STORAGE_MR_ID = `${STORAGE_PREFIX}-merge-request-id`;
+const STORAGE_TOKEN = `${STORAGE_PREFIX}-token`;
+const STORAGE_COMMENT = `${STORAGE_PREFIX}-comment`;
+
 // colors — these are applied programmatically
 // rest of styles belong in ./styles
 const BLACK = 'rgba(46, 46, 46, 1)';
@@ -39,6 +45,9 @@ export {
   REMEMBER_ITEM,
   REVIEW_CONTAINER,
   TOKEN_BOX,
+  STORAGE_MR_ID,
+  STORAGE_TOKEN,
+  STORAGE_COMMENT,
   BLACK,
   CLEAR,
   MUTED,

app/assets/javascripts/visual_review_toolbar/shared/index.js

@@ -14,6 +14,9 @@ import {
   REMEMBER_ITEM,
   REVIEW_CONTAINER,
   TOKEN_BOX,
+  STORAGE_MR_ID,
+  STORAGE_TOKEN,
+  STORAGE_COMMENT,
   BLACK,
   CLEAR,
   MUTED,
@@ -41,6 +44,9 @@ export {
   REMEMBER_ITEM,
   REVIEW_CONTAINER,
   TOKEN_BOX,
+  STORAGE_MR_ID,
+  STORAGE_TOKEN,
+  STORAGE_COMMENT,
   BLACK,
   CLEAR,
   MUTED,

app/assets/javascripts/visual_review_toolbar/store/state.js

 import { comment, login, mrForm } from '../components';
-import { localStorage, COMMENT_BOX, LOGIN, MR_ID } from '../shared';
+import { localStorage, COMMENT_BOX, LOGIN, MR_ID, STORAGE_MR_ID, STORAGE_TOKEN } from '../shared';
 
 const state = {
   browser: '',
@@ -74,8 +74,8 @@ const initializeState = (wind, doc) => {
 };
 
 const getInitialView = () => {
-  const token = localStorage.getItem('token');
-  const mrId = localStorage.getItem('mergeRequestId');
+  const token = localStorage.getItem(STORAGE_TOKEN);
+  const mrId = localStorage.getItem(STORAGE_MR_ID);
 
   if (token) {
     state.token = token;

changelogs/unreleased/visual-review-tools-constant-storage-keys.yml

+---
+title: Fix visual review app storage keys
+merge_request: 31427
+author:
+type: fixed