Added active File + Position Remembering

9 files changed, 34 insertions, 195 deletions

diff --git a/app/assets/javascripts/ide/base.html b/app/assets/javascripts/ide/base.html
deleted file mode 100644
index e31b3f1aa12..00000000000
--- a/app/assets/javascripts/ide/base.html
+++ /dev/null
@@ -1,173 +0,0 @@
-<div class="page-gutter page-with-contextual-sidebar page-with-sidebar right-sidebar-collapsed">
-  <div class="nav-sidebar">
-    <div class="nav-sidebar-inner-scroll" style="overflow-y: scroll;">
-      <div class="context-header">
-        <a title="Html5 Boilerplate" href="/h5bp/html5-boilerplate">
-          <div class="avatar-container s40 project-avatar">
-            <img alt="Html5 Boilerplate" class="avatar s40 avatar-tile js-lazy-loaded" src="/uploads/-/system/project/avatar/8/hodor.jpg">
-          </div>
-          <div class="sidebar-context-title">
-            Html5 Boilerplate
-          </div>
-        </a>
-      </div>
-    </div>
-  </div>
-  <div class="content-wrapper page-with-new-nav">
-    <div class="container-fluid container-limited limit-container-width">
-      <div class="content" id="content-body">
-        <aside aria-live="polite" class="js-issuable-sidebar js-right-sidebar right-sidebar right-sidebar-collapsed" data-signed-in="">
-          <div class="issuable-sidebar" data-endpoint="/h5bp/html5-boilerplate/issues/11.json">
-            <div class="block issuable-sidebar-header">
-              <span class="issuable-header-text hide-collapsed pull-left">
-                Todo
-              </span>
-              <a aria-label="Toggle sidebar" class="gutter-toggle pull-right js-sidebar-toggle" href="#" role="button">
-                <i aria-hidden="true" data-hidden="true" class="fa fa-angle-double-left"></i>
-              </a>
-              <button aria-label="Add todo" class="btn btn-default issuable-header-btn issuable-todo-btn js-issuable-todo pull-right" data-issuable-id="81"
-                data-issuable-type="issue" data-mark-text="Mark done" data-todo-text="Add todo" data-url="/h5bp/html5-boilerplate/todos"
-                title="Add todo" type="button">
-                <span class="issuable-todo-inner js-issuable-todo-inner">Add todo</span>
-                <i aria-hidden="true" data-hidden="true" class="fa fa-spin fa-spinner"></i>
-              </button>
-
-            </div>
-            <form class="issuable-context-form inline-update js-issuable-update" id="edit_issue_81" action="/h5bp/html5-boilerplate/issues/11.json"
-              accept-charset="UTF-8" data-remote="true" method="post">
-              <input name="utf8" type="hidden" value="✓">
-              <input type="hidden" name="_method" value="patch">
-              <div class="block todo hide-expanded">
-                <button aria-label="Add todo" class="btn-blank dont-change-state has-tooltip issuable-todo-btn js-issuable-todo sidebar-collapsed-icon"
-                  data-container="body" data-issuable-id="81" data-issuable-type="issue" data-mark-icon="<i aria-hidden=&quot;true&quot; data-hidden=&quot;true&quot; class=&quot;fa fa-check-square todo-undone&quot;></i>"
-                  data-mark-text="Mark done" data-placement="left" data-todo-icon="<i aria-hidden=&quot;true&quot; data-hidden=&quot;true&quot; class=&quot;fa fa-plus-square&quot;></i>"
-                  data-todo-text="Add todo" data-url="/h5bp/html5-boilerplate/todos" title="Add todo" type="button">
-                  <span class="issuable-todo-inner js-issuable-todo-inner">
-                    <i aria-hidden="true" data-hidden="true" class="fa fa-plus-square"></i>
-                  </span>
-                  <i aria-hidden="true" data-hidden="true" class="fa fa-spin fa-spinner"></i>
-                </button>
-
-              </div>
-              <div class="block due_date">
-                <div class="sidebar-collapsed-icon">
-                  <i aria-hidden="true" data-hidden="true" class="fa fa-calendar"></i>
-                  <span class="js-due-date-sidebar-value">
-                    None
-                  </span>
-                </div>
-                <div class="title hide-collapsed">
-                  Due date
-                  <i aria-hidden="true" data-hidden="true" class="fa fa-spinner fa-spin hidden block-loading" style="display: none;"></i>
-                  <a class="js-sidebar-dropdown-toggle edit-link pull-right" href="#">Edit</a>
-                </div>
-                <div class="value hide-collapsed">
-                  <span class="value-content">
-                    <span class="no-value">No due date</span>
-                  </span>
-                  <span class="hidden js-remove-due-date-holder no-value">
-                    -
-                    <a class="js-remove-due-date" href="#" role="button">
-                      remove due date
-                    </a>
-                  </span>
-                </div>
-                <div class="selectbox hide-collapsed">
-                  <input type="hidden" name="issue[due_date]" id="issue_due_date">
-                  <div class="dropdown">
-                    <button class="dropdown-menu-toggle js-due-date-select" data-ability-name="issue" data-field-name="issue[due_date]" data-issue-update="/h5bp/html5-boilerplate/issues/11.json"
-                      data-toggle="dropdown" type="button">
-                      <span class="dropdown-toggle-text">Due date</span>
-                      <i aria-hidden="true" data-hidden="true" class="fa fa-chevron-down"></i>
-                    </button>
-                    <div class="dropdown-menu dropdown-menu-due-date">
-                      <div class="dropdown-title">
-                        <span>Due date</span>
-                        <button class="dropdown-title-button dropdown-menu-close" aria-label="Close" type="button">
-                          <i aria-hidden="true" data-hidden="true" class="fa fa-times dropdown-menu-close-icon"></i>
-                        </button>
-                      </div>
-                      <div class="dropdown-content">
-                        <div class="js-due-date-calendar">
-                          <div class="pika-single gitlab-theme is-hidden is-bound" style="position: static; left: auto; top: auto;"></div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <script id="js-confidential-issue-data" type="application/json">
-                {
-                  "is_confidential": false,
-                  "is_editable": true
-                }
-              </script>
-              
-              <script id="js-lock-issue-data" type="application/json">
-                {
-                  "is_locked": false,
-                  "is_editable": true
-                }
-              </script>
-              <div class="block issuable-sidebar-item lock">
-                <div class="sidebar-collapsed-icon">
-                  <svg class="sidebar-item-icon is-active s16" aria-hidden="true">
-                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons-f1e1e3187fbe3fe3aa42a17cb2558778f1a2ddc2a1914f0ea7ea59d27b4e425c.svg#lock-open"></use>
-                  </svg>
-                </div>
-                <div class="title hide-collapsed">
-                  Lock issue
-                  <button type="button" class="pull-right lock-edit btn btn-blank">
-                    Edit
-                  </button>
-                </div>
-                <div class="value sidebar-item-value hide-collapsed">
-                  <!---->
-                  <div class="no-value sidebar-item-value hide-collapsed">
-                    <svg class="sidebar-item-icon inline s16" aria-hidden="true">
-                      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons-f1e1e3187fbe3fe3aa42a17cb2558778f1a2ddc2a1914f0ea7ea59d27b4e425c.svg#lock-open"></use>
-                    </svg>
-                    Unlocked
-                  </div>
-                </div>
-              </div>
-              <div class="block subscriptions">
-                <div>
-                  <div class="sidebar-collapsed-icon">
-                    <i aria-hidden="true" class="fa fa-rss"></i>
-                  </div>
-                  <span class="issuable-header-text hide-collapsed pull-left">
-                    Notifications
-                  </span>
-                  <button type="button" class="btn btn-default pull-right hide-collapsed js-issuable-subscribe-button btn btn-align-content">
-                    <!---->
-                    <span class="js-loading-button-label">
-                      Unsubscribe
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </form>
-            <script class="js-sidebar-options" type="application/json">
-              {
-                "endpoint": "/h5bp/html5-boilerplate/issues/11.json?serializer=sidebar",
-                "toggleSubscriptionEndpoint": "/h5bp/html5-boilerplate/issues/11/toggle_subscription",
-                "moveIssueEndpoint": "/h5bp/html5-boilerplate/issues/11/move",
-                "projectsAutocompleteEndpoint": "/autocomplete/projects?project_id=8",
-                "editable": true,
-                "currentUser": {
-                  "id": 1,
-                  "name": "Administrator",
-                  "username": "root",
-                  "avatar_url": "/uploads/-/system/user/avatar/1/avatar.png"
-                },
-                "rootPath": "/",
-                "fullPath": "h5bp/html5-boilerplate"
-              }
-            </script>
-          </div>
-        </aside>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue
index 2d36e59c056..e663459c15b 100644
--- a/app/assets/javascripts/ide/components/ide_status_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_status_bar.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 import Icon from '../../vue_shared/components/icon.vue'
 
 export default {
@@ -7,9 +7,8 @@ export default {
     Icon,
   },
   computed: {
-    ...mapGetters([
-      'activeFile',
-      'activeFileEditorPosition',
+    ...mapState([
+      'selectedFile',
     ]),
   }
 };
@@ -28,16 +27,18 @@ export default {
     </div>
     <div 
       class="col-sm-2">
-      Latest commit: 123
+      <div
+        v-if="selectedFile.lastCommit && selectedFile.lastCommit.message">
+        Last commit: {{ selectedFile.lastCommit.message }}
+      </div>      
     </div>
     <div 
       class="col-sm-1 col-sm-offset-4 text-right">
-      {{ activeFile.name }}
+      {{ selectedFile.name }}
     </div>
     <div 
       class="col-sm-1 text-right">
-      {{ activeFileEditorPosition }}
-      {{ activeFile.editorRow }}:{{ activeFile.editorColumn }}
+      {{ selectedFile.editorRow }}:{{ selectedFile.editorColumn }}
     </div>
     <div 
       class="col-sm-1 text-right">
@@ -45,7 +46,7 @@ export default {
     </div>
     <div 
       class="col-sm-1 text-right">
-      {{ activeFile.fileLanguage }}
+      {{ selectedFile.fileLanguage }}
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 57d4e4f5d82..6a81ba03aa1 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -52,13 +52,21 @@ export default {
           content: m.getValue(),
         });
       });
+
       /*
+      this.monacoInstance.revealPositionInCenter({
+        lineNumber: this.activeFile.editorRow,
+        column: this.activeFile.editorColumn,
+      });
+
+      
       this.monacoInstance.onDidChangeCursorPosition((e) => {
         this.setEditorPosition({
-          file: this.activeFile,
+          file: this.$store.state.selectedFile,
           editorRow: e.position.lineNumber,
           editorColumn: e.position.column,
         });
+
       });*/
     },
   },
diff --git a/app/assets/javascripts/ide/ide_router.js b/app/assets/javascripts/ide/ide_router.js
index 4231acc3b3d..da6e53a3da9 100644
--- a/app/assets/javascripts/ide/ide_router.js
+++ b/app/assets/javascripts/ide/ide_router.js
@@ -72,7 +72,7 @@ router.beforeEach((to, from, next) => {
       })
       .then(() => {
         if (to.params[0]) {
-        const treeEntry = store.getters.getTreeEntry(`${to.params.namespace}/${to.params.project}/${to.params.branch}`, to.params[0]);
+          const treeEntry = store.getters.getTreeEntry(`${to.params.namespace}/${to.params.project}/${to.params.branch}`, to.params[0]);
           if (treeEntry) {
             console.log('To Selected File : ', to.params, '/', treeEntry.url);
             store.dispatch('handleTreeEntryAction', treeEntry);
@@ -83,7 +83,6 @@ router.beforeEach((to, from, next) => {
       })
       .catch((e) => {
         debugger;
-        //next(false);
       });
 
       if (!to.params[0]) {
diff --git a/app/assets/javascripts/ide/stores/actions/tree.js b/app/assets/javascripts/ide/stores/actions/tree.js
index e8abca893a2..b6b983088e5 100644
--- a/app/assets/javascripts/ide/stores/actions/tree.js
+++ b/app/assets/javascripts/ide/stores/actions/tree.js
@@ -9,7 +9,6 @@ import {
   createTemp,
   createOrMergeEntry,
 } from '../utils';
-import router from '../../ide_router';
 
 export const getTreeData = (
   { commit, state, dispatch },
@@ -23,26 +22,26 @@ export const getTreeData = (
     service.getTreeData(endpoint)
       .then((res) => {
         const pageTitle = decodeURI(normalizeHeaders(res.headers)['PAGE-TITLE']);
-  
+
         setPageTitle(pageTitle);
-  
+
         return res.json();
       })
       .then((data) => {
         if (!state.isInitialRoot) {
           commit(types.SET_ROOT, data.path === '/');
         }
-  
+
         dispatch('updateDirectoryData', { data, tree, namespace, projectId, branch });
         if (!tree) {
           // If there was no tree given one was just created
           tree = state.trees[`${namespace}/${projectId}/${branch}`];
         }
-  
+
         commit(types.SET_PARENT_TREE_URL, data.parent_tree_url);
         commit(types.SET_LAST_COMMIT_URL, { tree, url: data.last_commit_path });
         if (tree) commit(types.TOGGLE_LOADING, tree);
-  
+
         const prevLastCommitPath = tree.lastCommitPath;
         if (prevLastCommitPath !== null) {
           dispatch('getLastCommitData', tree);
@@ -151,7 +150,7 @@ export const getLastCommitData = ({ state, commit, dispatch, getters }, tree = s
 
 export const updateDirectoryData = (
   { commit, state },
-  { data, tree, namespace, projectId, branch }
+  { data, tree, namespace, projectId, branch },
 ) => {
   if (!tree) {
     const existingTree = state.trees[`${namespace}/${projectId}/${branch}`];
diff --git a/app/assets/javascripts/ide/stores/ideStorage.js b/app/assets/javascripts/ide/stores/ide_storage.js
index 71b9dc58cac..71b9dc58cac 100644
--- a/app/assets/javascripts/ide/stores/ideStorage.js
+++ b/app/assets/javascripts/ide/stores/ide_storage.js
diff --git a/app/assets/javascripts/ide/stores/index.js b/app/assets/javascripts/ide/stores/index.js
index 588d4a38711..48b7266d2ae 100644
--- a/app/assets/javascripts/ide/stores/index.js
+++ b/app/assets/javascripts/ide/stores/index.js
@@ -4,7 +4,7 @@ import state from './state';
 import * as actions from './actions';
 import * as getters from './getters';
 import mutations from './mutations';
-import ideStorage from './ideStorage';
+import ideStorage from './ide_storage';
 
 Vue.use(Vuex);
 
diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index 118d6f637ef..0cf4db9b653 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -6,6 +6,10 @@ export default {
     Object.assign(file, {
       active,
     });
+
+    Object.assign(state, {
+      selectedFile: file,
+    });
   },
   [types.TOGGLE_FILE_OPEN](state, file) {
     Object.assign(file, {
@@ -27,8 +31,8 @@ export default {
       binary: data.binary,
       html: data.html,
       renderError: data.render_error,
-      editorRow: 0,
-      editorColumn: 0,
+      editorRow: 1,
+      editorColumn: 1,
       fileLanguage: '',
     });
   },
diff --git a/app/assets/javascripts/ide/stores/state.js b/app/assets/javascripts/ide/stores/state.js
index 5ea4b3973c8..56205aef441 100644
--- a/app/assets/javascripts/ide/stores/state.js
+++ b/app/assets/javascripts/ide/stores/state.js
@@ -12,6 +12,7 @@ export default () => ({
   loading: false,
   onTopOfBranch: false,
   openFiles: [],
+  selectedFile: null,
   path: '',
   project: {
     id: 0,