Live Status Bar Updates

Resizing of Editor Container

10 files changed, 110 insertions, 28 deletions

diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index e962a5487d1..d9be2efe4c4 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -14,6 +14,7 @@ export default {
   computed: {
     ...mapState([
       'currentBlobView',
+      'selectedFile',
     ]),
     ...mapGetters([
       'isCollapsed',
@@ -60,7 +61,8 @@ export default {
           :is="currentBlobView"
         />
         <repo-file-buttons/>
-        <ide-status-bar/>
+        <ide-status-bar
+          :file="selectedFile"/>
       </template>
       <template
         v-else>
diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue
index 942fc2b0f2d..a3aa415b5f0 100644
--- a/app/assets/javascripts/ide/components/ide_status_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_status_bar.vue
@@ -5,6 +5,12 @@ import tooltip from '../../vue_shared/directives/tooltip';
 import timeAgoMixin from '../../vue_shared/mixins/timeago';
 
 export default {
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+  },
   components: {
     Icon,
   },
@@ -36,11 +42,11 @@ export default {
     <div 
       class="col-sm-4">
       <div
-        v-tooltip
-        :title="selectedFile.lastCommit.message"
         v-if="selectedFile.lastCommit && selectedFile.lastCommit.id">
         Last commit:
         <a
+          v-tooltip
+          :title="selectedFile.lastCommit.message"
           :href="selectedFile.lastCommit.url">
           {{ timeFormated(selectedFile.lastCommit.updatedAt) }} by 
           {{ selectedFile.lastCommit.author }}
@@ -48,12 +54,16 @@ export default {
       </div>      
     </div>
     <div 
-      class="col-sm-1 col-sm-offset-2 text-right">
+      class="col-sm-1 col-sm-offset-1 text-right">
       {{ selectedFile.name }}
     </div>
     <div 
       class="col-sm-1 text-right">
-      {{ selectedFile.editorRow }}:{{ selectedFile.editorColumn }}
+      {{ selectedFile.EOL }}
+    </div>
+    <div 
+      class="col-sm-1 text-right">
+      {{ file.editorRow }}:{{ file.editorColumn }}
     </div>
     <div 
       class="col-sm-1 text-right">
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 94af9d504b6..a57c3641cbd 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -26,6 +26,7 @@ export default {
       'changeFileContent',
       'setFileLanguage',
       'setEditorPosition',
+      'setFileEOL',
     ]),
     initMonaco() {
       if (this.shouldHideEditor) return;
@@ -40,7 +41,10 @@ export default {
         .catch(() => flash('Error setting up monaco. Please try again.'));
     },
     setupEditor() {
-      if (!this.activeFile) return;
+      if (!this.activeFile) {
+        alert('NO ACTIVE FILE ');
+        return;
+      }
 
       const model = this.editor.createModel(this.activeFile);
 
@@ -53,21 +57,38 @@ export default {
         });
       });
 
-      /*
-      this.monacoInstance.revealPositionInCenter({
+      // Handle Cursor Position
+      this.editor.onPositionChange((instance, e) => {
+        this.setEditorPosition({
+          file: this.$store.state.selectedFile,
+          editorRow: e.position.lineNumber,
+          editorColumn: e.position.column,
+        });
+      });      
+
+      this.editor.setPosition({
         lineNumber: this.activeFile.editorRow,
         column: this.activeFile.editorColumn,
       });
 
-      
-      this.monacoInstance.onDidChangeCursorPosition((e) => {
-        this.setEditorPosition({
+      // Handle File Language
+      model.onLanguageChange((m, e) => {
+        this.setFileLanguage({
           file: this.$store.state.selectedFile,
-          editorRow: e.position.lineNumber,
-          editorColumn: e.position.column,
+          fileLanguage: e.newLanguage,
         });
+      });
 
-      });*/
+      this.setFileLanguage({
+        file: this.$store.state.selectedFile,
+        fileLanguage: model.language,
+      });
+
+      // Get File EOL
+      this.setFileEOL({
+        file: this.$store.state.selectedFile,
+        EOL: model.EOL,
+      });
     },
   },
   watch: {
diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js
index 2a4044be7ec..98954232036 100644
--- a/app/assets/javascripts/ide/index.js
+++ b/app/assets/javascripts/ide/index.js
@@ -29,11 +29,6 @@ function initIde(el) {
       const data = el.dataset;
 
       this.setInitialData({
-        project: {
-          id: data.projectId,
-          name: data.projectName,
-          url: data.projectUrl,
-        },
         endpoints: {
           rootEndpoint: data.url,
           newMergeRequestUrl: data.newMergeRequestUrl,
diff --git a/app/assets/javascripts/ide/lib/common/model.js b/app/assets/javascripts/ide/lib/common/model.js
index 23c4811e6c0..46ff9beb4c7 100644
--- a/app/assets/javascripts/ide/lib/common/model.js
+++ b/app/assets/javascripts/ide/lib/common/model.js
@@ -28,6 +28,14 @@ export default class Model {
     return this.model.uri.toString();
   }
 
+  get language() {
+    return this.model.getModeId();
+  }
+
+  get EOL() {
+    return encodeURI(this.model.getEOL()) === '%0A' ? 'LF' : 'CRLF';
+  }
+
   get path() {
     return this.file.path;
   }
@@ -49,6 +57,14 @@ export default class Model {
     );
   }
 
+  onLanguageChange(cb) {
+    this.events.set(
+      this.disposable.add(
+        this.model.onDidChangeLanguage(e => cb(this.model, e)),
+      ),
+    );
+  }
+
   dispose() {
     this.disposable.dispose();
     this.events.clear();
diff --git a/app/assets/javascripts/ide/lib/editor.js b/app/assets/javascripts/ide/lib/editor.js
index b61964ddf50..3e762a5c4de 100644
--- a/app/assets/javascripts/ide/lib/editor.js
+++ b/app/assets/javascripts/ide/lib/editor.js
@@ -22,6 +22,11 @@ export default class Editor {
       this.modelManager = new ModelManager(this.monaco),
       this.decorationsController = new DecorationsController(this),
     );
+
+    const debouncedUpdate = _.debounce(() => {
+      this.updateDimensions();
+    }, 200);
+    window.addEventListener('resize', debouncedUpdate, false);
   }
 
   createInstance(domElement) {
@@ -73,10 +78,32 @@ export default class Editor {
 
   dispose() {
     this.disposable.dispose();
+    window.removeEventListener('resize', this.updateDimensions.bind(this));
 
     // dispose main monaco instance
     if (this.instance) {
       this.instance = null;
     }
   }
+
+  updateDimensions() {
+    this.instance.layout();
+  }
+
+  setPosition({ lineNumber, column }) {
+    this.instance.revealPositionInCenter({
+      lineNumber,
+      column,
+    });
+    this.instance.setPosition({
+      lineNumber,
+      column,
+    });
+  }
+
+  onPositionChange(cb) {
+    this.disposable.add(
+      this.instance.onDidChangeCursorPosition(e => cb(this.instance, e)),
+    );
+  }
 }
diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js
index 39607c10d94..7877513f31c 100644
--- a/app/assets/javascripts/ide/stores/actions/file.js
+++ b/app/assets/javascripts/ide/stores/actions/file.js
@@ -83,11 +83,15 @@ export const changeFileContent = ({ commit }, { file, content }) => {
 };
 
 export const setFileLanguage = ({ commit }, { file, fileLanguage }) => {
-  commit(types.UPDATE_FILE_LANGUAGE, { file, fileLanguage });
+  commit(types.SET_FILE_LANGUAGE, { file, fileLanguage });
+};
+
+export const setFileEOL = ({ commit }, { file, EOL }) => {
+  commit(types.SET_FILE_EOL, { file, EOL });
 };
 
 export const setEditorPosition = ({ commit }, { file, editorRow, editorColumn }) => {
-  commit(types.UPDATE_FILE_POSITION, { file, editorRow, editorColumn });
+  commit(types.SET_FILE_POSITION, { file, editorRow, editorColumn });
 };
 
 export const createTempFile = ({ state, commit, dispatch }, { tree, name, content = '', base64 = '' }) => {
diff --git a/app/assets/javascripts/ide/stores/mutation_types.js b/app/assets/javascripts/ide/stores/mutation_types.js
index 33f056a6154..154e1017756 100644
--- a/app/assets/javascripts/ide/stores/mutation_types.js
+++ b/app/assets/javascripts/ide/stores/mutation_types.js
@@ -28,8 +28,9 @@ export const TOGGLE_FILE_OPEN = 'TOGGLE_FILE_OPEN';
 export const SET_FILE_ACTIVE = 'SET_FILE_ACTIVE';
 export const SET_FILE_RAW_DATA = 'SET_FILE_RAW_DATA';
 export const UPDATE_FILE_CONTENT = 'UPDATE_FILE_CONTENT';
-export const UPDATE_FILE_LANGUAGE = 'UPDATE_FILE_LANGUAGE';
-export const UPDATE_FILE_POSITION = 'UPDATE_FILE_POSITION';
+export const SET_FILE_LANGUAGE = 'SET_FILE_LANGUAGE';
+export const SET_FILE_POSITION = 'SET_FILE_POSITION';
+export const SET_FILE_EOL = 'SET_FILE_EOL';
 export const DISCARD_FILE_CHANGES = 'DISCARD_FILE_CHANGES';
 export const CREATE_TMP_FILE = 'CREATE_TMP_FILE';
 
diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index 0cf4db9b653..fe8d157dfde 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -31,9 +31,6 @@ export default {
       binary: data.binary,
       html: data.html,
       renderError: data.render_error,
-      editorRow: 1,
-      editorColumn: 1,
-      fileLanguage: '',
     });
   },
   [types.SET_FILE_RAW_DATA](state, { file, raw }) {
@@ -49,12 +46,17 @@ export default {
       changed,
     });
   },
-  [types.UPDATE_FILE_LANGUAGE](state, { file, fileLanguage }) {
+  [types.SET_FILE_LANGUAGE](state, { file, fileLanguage }) {
     Object.assign(file, {
       fileLanguage,
     });
   },
-  [types.UPDATE_FILE_POSITION](state, { file, editorRow, editorColumn }) {
+  [types.SET_FILE_EOL](state, { file, EOL }) {
+    Object.assign(file, {
+      EOL,
+    });
+  },
+  [types.SET_FILE_POSITION](state, { file, editorRow, editorColumn }) {
     Object.assign(file, {
       editorRow,
       editorColumn,
diff --git a/app/assets/javascripts/ide/stores/utils.js b/app/assets/javascripts/ide/stores/utils.js
index 9fd4e75ffcb..54efb12175c 100644
--- a/app/assets/javascripts/ide/stores/utils.js
+++ b/app/assets/javascripts/ide/stores/utils.js
@@ -33,6 +33,10 @@ export const dataStructure = () => ({
   parentTreeUrl: '',
   renderError: false,
   base64: false,
+  editorRow: 1,
+  editorColumn: 1,
+  fileLanguage: '',
+  EOL: '',
 });
 
 export const decorateData = (entity) => {