change button style when there are changes

ee/app/assets/javascripts/ide/components/editor_mode_dropdown.vue

@@ -6,6 +6,10 @@
       Icon,
     },
     props: {
+      hasChanges: {
+        type: Boolean,
+        required: true,
+      },
       viewer: {
         type: String,
         required: true,
@@ -33,6 +37,9 @@
     <button
       type="button"
       class="btn btn-primary btn-sm"
+      :class="{
+        'btn-inverted': hasChanges,
+      }"
       data-toggle="dropdown"
     >
       <template v-if="viewer === 'editor'">

ee/app/assets/javascripts/ide/components/repo_tabs.vue

 <script>
-  import { mapActions, mapState } from 'vuex';
+  import { mapActions, mapGetters, mapState } from 'vuex';
   import RepoTab from './repo_tab.vue';
   import EditorMode from './editor_mode_dropdown.vue';
 
@@ -14,6 +14,9 @@
       };
     },
     computed: {
+      ...mapGetters([
+        'hasChanges',
+      ]),
       ...mapState([
         'openFiles',
         'viewer',
@@ -47,6 +50,7 @@
     <editor-mode
       :viewer="viewer"
       :show-shadow="showShadow"
+      :has-changes="hasChanges"
       @click="updateViewer"
     />
   </div>

ee/app/assets/javascripts/ide/stores/getters.js

@@ -15,3 +15,5 @@ export const canEditFile = (state) => {
 export const addedFiles = state => state.changedFiles.filter(f => f.tempFile);
 
 export const modifiedFiles = state => state.changedFiles.filter(f => !f.tempFile);
+
+export const hasChanges = state => !!state.changedFiles.length;

spec/javascripts/ide/lib/editor_spec.js

@@ -82,7 +82,7 @@ describe('Multi-file editor library', () => {
     });
   });
 
-  fdescribe('attachModel', () => {
+  describe('attachModel', () => {
     let model;
 
     beforeEach(() => {