Fixes more eslint rules

7ca5a3f9 · Filipa Lacerda · cbdbb645 · 7ca5a3f9 · 7ca5a3f9 · 7ca5a3f9
27 changed file
--- a/app/assets/javascripts/environments/components/environment_actions.vue
+++ b/app/assets/javascripts/environments/components/environment_actions.vue
@@ -69,7 +69,8 @@
        <i
          class="fa fa-caret-down"
          aria-hidden="true"
-        />
+        >
+        </i>
        <loading-icon v-if="isLoading" />
      </span>
    </button>

--- a/app/assets/javascripts/environments/components/environment_rollback.vue
+++ b/app/assets/javascripts/environments/components/environment_rollback.vue
@@ -9,6 +9,10 @@
  import loadingIcon from '../../vue_shared/components/loading_icon.vue';

  export default {
+    components: {
+      loadingIcon,
+    },
+
    props: {
      retryUrl: {
        type: String,
@@ -21,10 +25,6 @@
      },
    },

-    components: {
-      loadingIcon,
-    },
-
    data() {
      return {
        isLoading: false,

--- a/app/assets/javascripts/environments/components/environments_app.vue
+++ b/app/assets/javascripts/environments/components/environments_app.vue
--- a/app/assets/javascripts/environments/components/environments_table.vue
+++ b/app/assets/javascripts/environments/components/environments_table.vue
@@ -31,6 +31,15 @@ export default {
    },
  },

+  computed: {
+    shouldRenderFolderContent() {
+      return this.model.isFolder &&
+        this.model.isOpen &&
+        this.model.children &&
+        this.model.children.length > 0;
+    },
+  },
+
  methods: {
    folderUrl(model) {
      return `${window.location.pathname}/folders/${model.folderName}`;
@@ -80,17 +89,21 @@ export default {
    </div>
    <template
      v-for="(model, i) in environments"
-      :key="i"
      :model="model">
      <div
        is="environment-item"
        :model="model"
        :can-create-deployment="canCreateDeployment"
        :can-read-environment="canReadEnvironment"
+        :key="i"
      />

-      <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
-        <div v-if="model.isLoadingFolderContent">
+      <template
+        v-if="shouldRenderFolderContent"
+      >
+        <div
+          v-if="model.isLoadingFolderContent"
+          :key="i">
          <loading-icon size="2" />
        </div>

@@ -101,9 +114,10 @@ export default {
            :model="children"
            :can-create-deployment="canCreateDeployment"
            :can-read-environment="canReadEnvironment"
+            :key="i"
          />

-          <div>
+          <div :key="i">
            <div class="text-center prepend-top-10">
              <a
                :href="folderUrl(model)"

--- a/app/assets/javascripts/environments/folder/environments_folder_view.vue
+++ b/app/assets/javascripts/environments/folder/environments_folder_view.vue
@@ -44,7 +44,7 @@
    >

      <h4 class="js-folder-name environments-folder-name">
-        {{ s__("Environments|Environments") }} / <b>{{folderName}}</b>
+        {{ s__("Environments|Environments") }} / <b>{{ folderName }}</b>
      </h4>

      <tabs

--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -86,7 +86,8 @@
      />
      <item-stats :item="group" />
      <div
-        class="folder-toggle-wrap">
+        class="folder-toggle-wrap"
+      >
        <item-caret :is-group-open="group.isOpen" />
        <item-type-icon
          :item-type="group.type"
@@ -115,7 +116,8 @@
        </a>
      </div>
      <div
-        class="title namespace-title">
+        class="title namespace-title"
+      >
        <a
          v-tooltip
          :href="group.relativePath"

--- a/app/assets/javascripts/groups/components/groups.vue
+++ b/app/assets/javascripts/groups/components/groups.vue
 <script>
-import tablePagination from '~/vue_shared/components/table_pagination.vue';
-import eventHub from '../event_hub';
-import { getParameterByName } from '../../lib/utils/common_utils';
+  import tablePagination from '~/vue_shared/components/table_pagination.vue';
+  import eventHub from '../event_hub';
+  import { getParameterByName } from '../../lib/utils/common_utils';

-export default {
+  export default {
    components: {
      tablePagination,
    },
@@ -33,15 +33,16 @@ export default {
        eventHub.$emit('fetchPage', page, filterGroupsParam, sortParam, archivedParam);
      },
    },
-};
+  };
 </script>

 <template>
  <div class="groups-list-tree-container">
    <div
      v-if="searchEmpty"
-      class="has-no-search-results">
-      {{searchEmptyMessage}}
+      class="has-no-search-results"
+    >
+      {{ searchEmptyMessage }}
    </div>
    <group-folder
      v-if="!searchEmpty"
@@ -50,7 +51,7 @@ export default {
    <table-pagination
      v-if="!searchEmpty"
      :change="change"
-      :pageInfo="pageInfo"
+      :page-info="pageInfo"
    />
  </div>
 </template>
--- a/app/assets/javascripts/groups/components/item_caret.vue
+++ b/app/assets/javascripts/groups/components/item_caret.vue
@@ -2,6 +2,9 @@
 import icon from '~/vue_shared/components/icon.vue';

 export default {
+  components: {
+    icon,
+  },
  props: {
    isGroupOpen: {
      type: Boolean,
@@ -9,9 +12,6 @@ export default {
      default: false,
    },
  },
-  components: {
-    icon,
-  },
  computed: {
    iconClass() {
      return this.isGroupOpen ? 'angle-down' : 'angle-right';

--- a/app/assets/javascripts/groups/components/item_stats.vue
+++ b/app/assets/javascripts/groups/components/item_stats.vue
 <script>
-import icon from '~/vue_shared/components/icon.vue';
-import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-import {
+  import icon from '~/vue_shared/components/icon.vue';
+  import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+  import {
    ITEM_TYPE,
    VISIBILITY_TYPE_ICON,
    GROUP_VISIBILITY_TYPE,
-  PROJECT_VISIBILITY_TYPE
-} from '../constants';
-import itemStatsValue from './item_stats_value.vue';
+    PROJECT_VISIBILITY_TYPE,
+  } from '../constants';
+  import itemStatsValue from './item_stats_value.vue';

-export default {
+  export default {
    components: {
      icon,
      timeAgoTooltip,
@@ -38,7 +38,7 @@ export default {
        return this.item.type === ITEM_TYPE.GROUP;
      },
    },
-};
+  };
 </script>

 <template>

--- a/app/assets/javascripts/groups/components/item_stats_value.vue
+++ b/app/assets/javascripts/groups/components/item_stats_value.vue
 <script>
-import tooltip from '~/vue_shared/directives/tooltip';
-import icon from '~/vue_shared/components/icon.vue';
+  import tooltip from '~/vue_shared/directives/tooltip';
+  import icon from '~/vue_shared/components/icon.vue';

-export default {
+  export default {
+    components: {
+      icon,
+    },
+    directives: {
+      tooltip,
+    },
    props: {
      title: {
        type: String,
@@ -35,18 +41,12 @@ export default {
        default: '',
      },
    },
-  directives: {
-    tooltip,
-  },
-  components: {
-    icon,
-  },
    computed: {
      isValuePresent() {
        return this.value !== '';
      },
    },
-};
+  };
 </script>

 <template>
@@ -57,12 +57,12 @@ export default {
    :class="cssClass"
    :title="title"
  >
-    <icon :name="iconName"/>
+    <icon :name="iconName" />
    <span
      v-if="isValuePresent"
      class="stat-value"
    >
-      {{value}}
+      {{ value }}
    </span>
  </span>
 </template>
--- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
@@ -32,7 +32,6 @@
        this.$emit('toggleCollapsed');
      },
    },
-
  };
 </script>


--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -9,6 +9,15 @@ import repoPreview from './repo_preview.vue';
 import repoEditor from './repo_editor.vue';

 export default {
+  components: {
+    ideSidebar,
+    ideContextbar,
+    repoTabs,
+    repoFileButtons,
+    ideStatusBar,
+    repoEditor,
+    repoPreview,
+  },
  computed: {
    ...mapState([
      'currentBlobView',
@@ -19,15 +28,6 @@ export default {
      'activeFile',
    ]),
  },
-  components: {
-    ideSidebar,
-    ideContextbar,
-    repoTabs,
-    repoFileButtons,
-    ideStatusBar,
-    repoEditor,
-    repoPreview,
-  },
  mounted() {
    const returnValue = 'Are you sure you want to lose unsaved changes?';
    window.onbeforeunload = (e) => {
@@ -51,23 +51,26 @@ export default {
      class="multi-file-edit-pane"
    >
      <template
-        v-if="activeFile">
-        <repo-tabs/>
+        v-if="activeFile"
+      >
+        <repo-tabs />
        <component
          class="multi-file-edit-pane-content"
          :is="currentBlobView"
        />
-        <repo-file-buttons/>
+        <repo-file-buttons />
        <ide-status-bar
-          :file="selectedFile"/>
+          :file="selectedFile"
+        />
      </template>
      <template
-        v-else>
+        v-else
+      >
        <div class="ide-empty-state">
          <h2 class="clgray">Welcome to the GitLab IDE</h2>
        </div>
      </template>
    </div>
-    <ide-contextbar/>
+    <ide-contextbar />
  </div>
 </template>
--- a/app/assets/javascripts/ide/components/ide_context_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_context_bar.vue
 <script>
-import { mapGetters, mapState, mapActions } from 'vuex';
-import repoCommitSection from './repo_commit_section.vue';
-import icon from '../../vue_shared/components/icon.vue';
-import panelResizer from '../../vue_shared/components/panel_resizer.vue';
+  import { mapGetters, mapState, mapActions } from 'vuex';
+  import repoCommitSection from './repo_commit_section.vue';
+  import icon from '../../vue_shared/components/icon.vue';
+  import panelResizer from '../../vue_shared/components/panel_resizer.vue';

-export default {
-  data() {
-    return {
-      width: 290,
-    };
-  },
+  export default {
    components: {
      repoCommitSection,
      icon,
      panelResizer,
    },
+    data() {
+      return {
+        width: 290,
+      };
+    },
    computed: {
      ...mapState([
        'rightPanelCollapsed',
@@ -53,7 +53,7 @@ export default {
        this.setResizingStatus(false);
      },
    },
-};
+  };
 </script>

 <template>
@@ -64,8 +64,7 @@ export default {
    }"
    :style="panelStyle"
  >
-    <div 
-      class="multi-file-commit-panel-section">
+    <div class="multi-file-commit-panel-section">
      <header
        class="multi-file-commit-panel-header"
        :class="{
@@ -74,7 +73,8 @@ export default {
      >
        <div
          class="multi-file-commit-panel-header-title"
-          v-if="!rightPanelCollapsed">
+          v-if="!rightPanelCollapsed"
+        >
          <icon
            name="list-bulleted"
            :size="18"
@@ -92,8 +92,7 @@ export default {
          />
        </button>
      </header>
-      <repo-commit-section 
-        class=""/>
+      <repo-commit-section />
    </div>
    <panel-resizer
      :size.sync="width"
@@ -103,6 +102,7 @@ export default {
      :max-size="maxSize"
      @resize-start="resizingStarted"
      @resize-end="resizingEnded"
-      side="left"/>
+      side="left"
+    />
  </div>
 </template>
--- a/app/assets/javascripts/ide/components/ide_project_branches_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_project_branches_tree.vue
@@ -28,20 +28,20 @@ export default {
      <div class="branch-header-title">
        <icon
          name="branch"
-          :size="12">
-        </icon>
+          :size="12"
+        />
        {{ branch.name }}
      </div>
      <div class="branch-header-btns">
        <new-dropdown
          :project-id="projectId"
          :branch="branch.name"
-          path=""/>
+          path=""
+        />
      </div>
    </div>
    <div>
-      <repo-tree
-        :treeId="branch.treeId"/>
+      <repo-tree :tree-id="branch.treeId" />
    </div>
  </div>
 </template>
--- a/app/assets/javascripts/ide/components/ide_project_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_project_tree.vue
@@ -21,7 +21,8 @@ export default {
    <div class="context-header">
      <a
        :title="project.name"
-        :href="project.web_url">
+        :href="project.web_url"
+      >
        <div class="avatar-container s40 project-avatar">
          <project-avatar-image
            class="avatar-container project-avatar"
@@ -38,10 +39,11 @@ export default {
    </div>
    <div class="multi-file-commit-panel-inner-scroll">
      <branches-tree
-        v-for="(branch, index) in project.branches"
+        v-for="branch in project.branches"
        :key="branch.name"
        :project-id="project.path_with_namespace"
-        :branch="branch"/>
+        :branch="branch"
+      />
    </div>
  </div>
 </template>
--- a/app/assets/javascripts/ide/components/ide_repo_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_repo_tree.vue
 <script>
-import { mapState } from 'vuex';
-import RepoPreviousDirectory from './repo_prev_directory.vue';
-import RepoFile from './repo_file.vue';
-import RepoLoadingFile from './repo_loading_file.vue';
-import { treeList } from '../stores/utils';
+  import { mapState } from 'vuex';
+  import RepoPreviousDirectory from './repo_prev_directory.vue';
+  import RepoFile from './repo_file.vue';
+  import RepoLoadingFile from './repo_loading_file.vue';
+  import { treeList } from '../stores/utils';

-export default {
+  export default {
    components: {
      'repo-previous-directory': RepoPreviousDirectory,
      'repo-file': RepoFile,
@@ -37,23 +37,25 @@ export default {
        return this.loading;
      },
    },
-};
+  };
 </script>

 <template>
-<div>
+  <div>
    <div class="ide-file-list">
      <table class="table">
        <tbody
-        v-if="treeId">
+          v-if="treeId"
+        >
          <repo-previous-directory
            v-if="hasPreviousDirectory"
          />
+          <template v-if="showLoading">
            <repo-loading-file
-          v-if="showLoading"
              v-for="n in 5"
              :key="n"
            />
+          </template>
          <repo-file
            v-for="file in fetchedList"
            :key="file.key"
@@ -62,5 +64,5 @@ export default {
        </tbody>
      </table>
    </div>
-</div>
+  </div>
 </template>
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -5,16 +5,16 @@ import icon from '../../vue_shared/components/icon.vue';
 import panelResizer from '../../vue_shared/components/panel_resizer.vue';

 export default {
-  data() {
-    return {
-      width: 290,
-    };
-  },
  components: {
    projectTree,
    icon,
    panelResizer,
  },
+  data() {
+    return {
+      width: 290,
+    };
+  },
  computed: {
    ...mapState([
      'projects',
@@ -64,9 +64,10 @@ export default {
  >
    <div class="multi-file-commit-panel-inner">
      <project-tree
-        v-for="(project, index) in projects"
+        v-for="project in projects"
        :key="project.id"
-        :project="project"/>
+        :project="project"
+      />
    </div>
    <button
      type="button"
@@ -80,7 +81,9 @@ export default {
      <span
        v-if="!leftPanelCollapsed"
        class="collapse-text"
-      >Collapse sidebar</span>
+      >
+        Collapse sidebar
+      </span>
    </button>
    <panel-resizer
      :size.sync="width"
@@ -90,6 +93,7 @@ export default {
      :max-size="maxSize"
      @resize-start="resizingStarted"
      @resize-end="resizingEnded"
-      side="right"/>
+      side="right"
+    />
  </div>
 </template>
--- a/app/assets/javascripts/ide/components/ide_status_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_status_bar.vue
 <script>
-import { mapState } from 'vuex';
-import icon from '../../vue_shared/components/icon.vue';
-import tooltip from '../../vue_shared/directives/tooltip';
-import timeAgoMixin from '../../vue_shared/mixins/timeago';
+  import { mapState } from 'vuex';
+  import icon from '../../vue_shared/components/icon.vue';
+  import tooltip from '../../vue_shared/directives/tooltip';
+  import timeAgoMixin from '../../vue_shared/mixins/timeago';

-export default {
-  props: {
-    file: {
-      type: Object,
-      required: true,
-    },
-  },
+  export default {
    components: {
      icon,
    },
@@ -20,51 +14,52 @@ export default {
    mixins: [
      timeAgoMixin,
    ],
+    props: {
+      file: {
+        type: Object,
+        required: true,
+      },
+    },
    computed: {
      ...mapState([
        'selectedFile',
      ]),
    },
-};
+  };
 </script>

 <template>
-  <div
-    class="ide-status-bar">
+  <div class="ide-status-bar">
    <div>
      <icon
        name="branch"
-        :size="12">
-      </icon>
+        :size="12"
+      />
      {{ selectedFile.branchId }}
    </div>
    <div>
-      <div
-        v-if="selectedFile.lastCommit && selectedFile.lastCommit.id">
+      <div v-if="selectedFile.lastCommit && selectedFile.lastCommit.id">
        Last commit:
        <a
          v-tooltip
          :title="selectedFile.lastCommit.message"
-          :href="selectedFile.lastCommit.url">
+          :href="selectedFile.lastCommit.url"
+        >
          {{ timeFormated(selectedFile.lastCommit.updatedAt) }} by
          {{ selectedFile.lastCommit.author }}
        </a>
      </div>
    </div>
-    <div
-      class="text-right">
+    <div class="text-right">
      {{ selectedFile.name }}
    </div>
-    <div 
-      class="text-right">
+    <div class="text-right">
      {{ selectedFile.eol }}
    </div>
-    <div 
-      class="text-right">
+    <div class="text-right">
      {{ file.editorRow }}:{{ file.editorColumn }}
    </div>
-    <div 
-      class="text-right">
+    <div class="text-right">
      {{ selectedFile.fileLanguage }}
    </div>
  </div>

--- a/app/assets/javascripts/ide/components/new_branch_form.vue
+++ b/app/assets/javascripts/ide/components/new_branch_form.vue
@@ -21,6 +21,13 @@
        return this.loading || this.branchName === '';
      },
    },
+    created() {
+      // Dropdown is outside of Vue instance & is controlled by Bootstrap
+      this.$dropdown = $('.git-revision-dropdown');
+
+      // text element is outside Vue app
+      this.dropdownText = document.querySelector('.project-refs-form .dropdown-toggle-text');
+    },
    methods: {
      ...mapActions([
        'createNewBranch',
@@ -55,13 +62,6 @@
          }));
      },
    },
-    created() {
-      // Dropdown is outside of Vue instance & is controlled by Bootstrap
-      this.$dropdown = $('.git-revision-dropdown');
-
-      // text element is outside Vue app
-      this.dropdownText = document.querySelector('.project-refs-form .dropdown-toggle-text');
-    },
  };
 </script>


--- a/app/assets/javascripts/ide/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue
@@ -4,6 +4,11 @@
  import icon from '../../../vue_shared/components/icon.vue';

  export default {
+    components: {
+      icon,
+      newModal,
+      upload,
+    },
    props: {
      branch: {
        type: String,
@@ -18,11 +23,6 @@
        default: null,
      },
    },
-    components: {
-      icon,
-      newModal,
-      upload,
-    },
    data() {
      return {
        openModal: false,

--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -4,6 +4,9 @@
  import modal from '../../../vue_shared/components/modal.vue';

  export default {
+    components: {
+      modal,
+    },
    props: {
      branchId: {
        type: String,
@@ -27,28 +30,6 @@
        entryName: this.path !== '' ? `${this.path}/` : '',
      };
    },
-    components: {
-      modal,
-    },
-    methods: {
-      ...mapActions([
-        'createTempEntry',
-      ]),
-      createEntryInStore() {
-        this.createTempEntry({
-          projectId: this.currentProjectId,
-          branchId: this.branchId,
-          parent: this.parent,
-          name: this.entryName.replace(new RegExp(`^${this.path}/`), ''),
-          type: this.type,
-        });
-
-        this.hideModal();
-      },
-      hideModal() {
-        this.$emit('hide');
-      },
-    },
    computed: {
      ...mapState([
        'currentProjectId',
@@ -78,6 +59,25 @@
    mounted() {
      this.$refs.fieldName.focus();
    },
+    methods: {
+      ...mapActions([
+        'createTempEntry',
+      ]),
+      createEntryInStore() {
+        this.createTempEntry({
+          projectId: this.currentProjectId,
+          branchId: this.branchId,
+          parent: this.parent,
+          name: this.entryName.replace(new RegExp(`^${this.path}/`), ''),
+          type: this.type,
+        });
+
+        this.hideModal();
+      },
+      hideModal() {
+        this.$emit('hide');
+      },
+    },
  };
 </script>


--- a/app/assets/javascripts/ide/components/new_dropdown/upload.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
@@ -18,6 +18,12 @@
        'currentProjectId',
      ]),
    },
+    mounted() {
+      this.$refs.fileUpload.addEventListener('change', this.openFile);
+    },
+    beforeDestroy() {
+      this.$refs.fileUpload.removeEventListener('change', this.openFile);
+    },
    methods: {
      ...mapActions([
        'createTempEntry',
@@ -59,12 +65,6 @@
        this.$refs.fileUpload.click();
      },
    },
-    mounted() {
-      this.$refs.fileUpload.addEventListener('change', this.openFile);
-    },
-    beforeDestroy() {
-      this.$refs.fileUpload.removeEventListener('change', this.openFile);
-    },
  };
 </script>


--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -105,7 +105,7 @@ export default {
 </script>

 <template>
-<div class="multi-file-commit-panel-section">
+  <div class="multi-file-commit-panel-section">
    <modal
      v-if="showNewBranchModal"
      :primary-button-label="__('Create new branch')"
@@ -169,5 +169,5 @@ export default {
        </div>
      </div>
    </form>
-</div>
+  </div>
 </template>
--- a/app/assets/javascripts/ide/components/repo_edit_button.vue
+++ b/app/assets/javascripts/ide/components/repo_edit_button.vue
@@ -40,7 +40,7 @@ export default {
        aria-hidden="true">
      </i>
      <span>
-        {{buttonLabel}}
+        {{ buttonLabel }}
      </span>
    </button>
    <modal

--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -6,20 +6,6 @@ import monacoLoader from '../monaco_loader';
 import Editor from '../lib/editor';

 export default {
-  beforeDestroy() {
-    this.editor.dispose();
-  },
-  mounted() {
-    if (this.editor && monaco) {
-      this.initMonaco();
-    } else {
-      monacoLoader(['vs/editor/editor.main'], () => {
-        this.editor = Editor.create(monaco);
-
-        this.initMonaco();
-      });
-    }
-  },
  computed: {
    ...mapGetters([
      'activeFile',
@@ -52,6 +38,20 @@ export default {
      }
    },
  },
+  beforeDestroy() {
+    this.editor.dispose();
+  },
+  mounted() {
+    if (this.editor && monaco) {
+      this.initMonaco();
+    } else {
+      monacoLoader(['vs/editor/editor.main'], () => {
+        this.editor = Editor.create(monaco);
+
+        this.initMonaco();
+      });
+    }
+  },
  methods: {
    ...mapActions([
      'getRawFileData',

--- a/app/assets/javascripts/ide/components/repo_file_buttons.vue
+++ b/app/assets/javascripts/ide/components/repo_file_buttons.vue
@@ -35,20 +35,24 @@ export default {
    <div
      class="btn-group"
      role="group"
-      aria-label="File actions">
+      aria-label="File actions"
+    >
      <a
        :href="activeFile.blamePath"
-        class="btn btn-default btn-sm blame">
+        class="btn btn-default btn-sm blame"
+      >
        Blame
      </a>
      <a
        :href="activeFile.commitsPath"
-        class="btn btn-default btn-sm history">
+        class="btn btn-default btn-sm history"
+      >
        History
      </a>
      <a
        :href="activeFile.permalink"
-        class="btn btn-default btn-sm permalink">
+        class="btn btn-default btn-sm permalink"
+      >
        Permalink
      </a>
    </div>

--- a/app/assets/javascripts/vue_shared/components/modal.vue
+++ b/app/assets/javascripts/vue_shared/components/modal.vue
@@ -97,7 +97,7 @@
          <div class="modal-header">
            <slot name="header">
              <h4 class="modal-title pull-left">
-                {{ this.title }}
+                {{ title }}
              </h4>
              <button
                type="button"
@@ -111,7 +111,10 @@
            </slot>
          </div>
          <div class="modal-body">
-            <slot name="body" :text="text">
+            <slot
+              name="body"
+              :text="text"
+            >
              <p>{{ this.text }}</p>
            </slot>
          </div>
@@ -145,7 +148,8 @@
    </div>
    <div
      v-if="id !== ''"
-      class="modal-backdrop fade in">
+      class="modal-backdrop fade in"
+    >
    </div>
  </div>
 </template>