Merge branch 'master' into 51306-fix-inaccessible-dropdown-for-codeless-projects

app/assets/javascripts/blob/3d_viewer/mesh_object.js

-import {
-  Matrix4,
-  MeshLambertMaterial,
-  Mesh,
-} from 'three/build/three.module';
-const defaultColor = 0xE24329;
+import { Matrix4, MeshLambertMaterial, Mesh } from 'three/build/three.module';
+const defaultColor = 0xe24329;
 const materials = {
   default: new MeshLambertMaterial({
     color: defaultColor,
@@ -17,10 +13,7 @@ const materials = {
 export default class MeshObject extends Mesh {
   constructor(geo) {
-    super(
-      geo,
-      materials.default,
-    );
+    super(geo, materials.default);
     this.geometry.computeBoundingSphere();
@@ -29,13 +22,7 @@ export default class MeshObject extends Mesh {
     if (this.geometry.boundingSphere.radius > 4) {
       const scale = 4 / this.geometry.boundingSphere.radius;
-      this.geometry.applyMatrix(
-        new Matrix4().makeScale(
-          scale,
-          scale,
-          scale,
-        ),
-      );
+      this.geometry.applyMatrix(new Matrix4().makeScale(scale, scale, scale));
       this.geometry.computeBoundingSphere();
       this.position.x = -this.geometry.boundingSphere.center.x;

app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js

@@ -42,7 +42,7 @@ class BalsamiqViewer {
     this.initDatabase(loadEvent.target.response);
     const previews = this.getPreviews();
-    previews.forEach((preview) => {
+    previews.forEach(preview => {
       const renderedPreview = this.renderPreview(preview);
       container.appendChild(renderedPreview);

app/assets/javascripts/blob/blob_file_dropzone.js

@@ -41,39 +41,45 @@ export default class BlobFileDropzone {
       addRemoveLinks: true,
       previewsContainer: '.dropzone-previews',
       headers: csrf.headers,
-      init: function () {
-        this.on('addedfile', function () {
+      init: function() {
+        this.on('addedfile', function() {
           toggleLoading(submitButton, submitButtonLoadingIcon, false);
           dropzoneMessage.addClass(HIDDEN_CLASS);
-          $('.dropzone-alerts').html('').hide();
+          $('.dropzone-alerts')
+            .html('')
+            .hide();
         });
-        this.on('removedfile', function () {
+        this.on('removedfile', function() {
           toggleLoading(submitButton, submitButtonLoadingIcon, false);
           dropzoneMessage.removeClass(HIDDEN_CLASS);
         });
-        this.on('success', function (header, response) {
+        this.on('success', function(header, response) {
           $('#modal-upload-blob').modal('hide');
           visitUrl(response.filePath);
         });
-        this.on('maxfilesexceeded', function (file) {
+        this.on('maxfilesexceeded', function(file) {
           dropzoneMessage.addClass(HIDDEN_CLASS);
           this.removeFile(file);
         });
-        this.on('sending', function (file, xhr, formData) {
+        this.on('sending', function(file, xhr, formData) {
           formData.append('branch_name', form.find('.js-branch-name').val());
           formData.append('create_merge_request', form.find('.js-create-merge-request').val());
           formData.append('commit_message', form.find('.js-commit-message').val());
         });
       },
       // Override behavior of adding error underneath preview
-      error: function (file, errorMessage) {
-        const stripped = $('<div/>').html(errorMessage).text();
-        $('.dropzone-alerts').html(`Error uploading file: "${stripped}"`).show();
+      error: function(file, errorMessage) {
+        const stripped = $('<div/>')
+          .html(errorMessage)
+          .text();
+        $('.dropzone-alerts')
+          .html(`Error uploading file: "${stripped}"`)
+          .show();
         this.removeFile(file);
       },
     });
-    submitButton.on('click', (e) => {
+    submitButton.on('click', e => {
       e.preventDefault();
       e.stopPropagation();
       if (dropzone[0].dropzone.getQueuedFiles().length === 0) {

app/assets/javascripts/blob/blob_line_permalink_updater.js

@@ -2,17 +2,19 @@ import { getLocationHash } from '../lib/utils/url_utility';
 const lineNumberRe = /^L[0-9]+/;
-const updateLineNumbersOnBlobPermalinks = (linksToUpdate) => {
+const updateLineNumbersOnBlobPermalinks = linksToUpdate => {
   const hash = getLocationHash();
   if (hash && lineNumberRe.test(hash)) {
     const hashUrlString = `#${hash}`;
-    [].concat(Array.prototype.slice.call(linksToUpdate)).forEach((permalinkButton) => {
-      const baseHref = permalinkButton.getAttribute('data-original-href') || (() => {
-        const href = permalinkButton.getAttribute('href');
-        permalinkButton.setAttribute('data-original-href', href);
-        return href;
-      })();
+    [].concat(Array.prototype.slice.call(linksToUpdate)).forEach(permalinkButton => {
+      const baseHref =
+        permalinkButton.getAttribute('data-original-href') ||
+        (() => {
+          const href = permalinkButton.getAttribute('href');
+          permalinkButton.setAttribute('data-original-href', href);
+          return href;
+        })();
       permalinkButton.setAttribute('href', `${baseHref}${hashUrlString}`);
     });
   }
@@ -26,7 +28,7 @@ function BlobLinePermalinkUpdater(blobContentHolder, lineNumberSelector, element
     }, 0);
   };
-  blobContentHolder.addEventListener('click', (e) => {
+  blobContentHolder.addEventListener('click', e => {
     if (e.target.matches(lineNumberSelector)) {
       updateBlameAndBlobPermalinkCb();
     }

app/assets/javascripts/blob/file_template_selector.js

@@ -45,15 +45,11 @@ export default class FileTemplateSelector {
   }
   renderLoading() {
-    this.$loadingIcon
-      .addClass('fa-spinner fa-spin')
-      .removeClass('fa-chevron-down');
+    this.$loadingIcon.addClass('fa-spinner fa-spin').removeClass('fa-chevron-down');
   }
   renderLoaded() {
-    this.$loadingIcon
-      .addClass('fa-chevron-down')
-      .removeClass('fa-spinner fa-spin');
+    this.$loadingIcon.addClass('fa-chevron-down').removeClass('fa-spinner fa-spin');
   }
   reportSelection(options) {

app/assets/javascripts/blob/notebook/index.js

@@ -40,13 +40,14 @@ export default () => {
     },
     methods: {
       loadFile() {
-        axios.get(el.dataset.endpoint)
+        axios
+          .get(el.dataset.endpoint)
           .then(res => res.data)
-          .then((data) => {
+          .then(data => {
             this.json = data;
             this.loading = false;
           })
-          .catch((e) => {
+          .catch(e => {
             if (e.status !== 200) {
               this.loadError = true;
             }

app/assets/javascripts/blob/sketch/index.js

@@ -13,7 +13,7 @@ export default class SketchLoader {
     return this.getZipFile()
       .then(data => JSZip.loadAsync(data))
       .then(asyncResult => asyncResult.files['previews/preview.png'].async('uint8array'))
-      .then((content) => {
+      .then(content => {
         const url = window.URL || window.webkitURL;
         const blob = new Blob([new Uint8Array(content)], {
           type: 'image/png',

app/assets/javascripts/blob/stl_viewer.js

@@ -3,8 +3,8 @@ import Renderer from './3d_viewer';
 export default () => {
   const viewer = new Renderer(document.getElementById('js-stl-viewer'));
-  [].slice.call(document.querySelectorAll('.js-material-changer')).forEach((el) => {
-    el.addEventListener('click', (e) => {
+  [].slice.call(document.querySelectorAll('.js-material-changer')).forEach(el => {
+    el.addEventListener('click', e => {
       const { target } = e;
       e.preventDefault();

app/assets/javascripts/blob/template_selector.js

@@ -81,14 +81,10 @@ export default class TemplateSelector {
   }
   startLoadingSpinner() {
-    this.$dropdownIcon
-      .addClass('fa-spinner fa-spin')
-      .removeClass('fa-chevron-down');
+    this.$dropdownIcon.addClass('fa-spinner fa-spin').removeClass('fa-chevron-down');
   }
   stopLoadingSpinner() {
-    this.$dropdownIcon
-      .addClass('fa-chevron-down')
-      .removeClass('fa-spinner fa-spin');
+    this.$dropdownIcon.addClass('fa-chevron-down').removeClass('fa-spinner fa-spin');
   }
 }

app/assets/javascripts/blob/template_selectors/license_selector.js

@@ -22,7 +22,7 @@ export default class BlobLicenseSelector extends FileTemplateSelector {
       search: {
         fields: ['name'],
       },
-      clicked: (options) => {
+      clicked: options => {
         const { e } = options;
         const el = options.$el;
         const query = options.selectedObj;

app/assets/javascripts/blob/template_selectors/type_selector.js

@@ -21,5 +21,4 @@ export default class FileTemplateTypeSelector extends FileTemplateSelector {
       text: item => item.name,
     });
   }
-
 }

app/assets/javascripts/blob/viewer/index.js

@@ -22,9 +22,8 @@ export default class BlobViewer {
     const viewer = document.querySelector('.blob-viewer[data-type="rich"]');
     if (!viewer || !viewer.dataset.richType) return;
-    const initViewer = promise => promise
-      .then(module => module.default(viewer))
-      .catch((error) => {
+    const initViewer = promise =>
+      promise.then(module => module.default(viewer)).catch(error => {
         Flash('Error loading file viewer.');
         throw error;
       });
@@ -79,10 +78,9 @@ export default class BlobViewer {
   initBindings() {
     if (this.switcherBtns.length) {
-      Array.from(this.switcherBtns)
-        .forEach((el) => {
-          el.addEventListener('click', this.switchViewHandler.bind(this));
-        });
+      Array.from(this.switcherBtns).forEach(el => {
+        el.addEventListener('click', this.switchViewHandler.bind(this));
+      });
     }
     if (this.copySourceBtn) {
@@ -109,7 +107,10 @@ export default class BlobViewer {
       this.copySourceBtn.setAttribute('title', 'Copy source to clipboard');
       this.copySourceBtn.classList.remove('disabled');
     } else if (this.activeViewer === this.simpleViewer) {
-      this.copySourceBtn.setAttribute('title', 'Wait for the source to load to copy it to the clipboard');
+      this.copySourceBtn.setAttribute(
+        'title',
+        'Wait for the source to load to copy it to the clipboard',
+      );
       this.copySourceBtn.classList.add('disabled');
     } else {
       this.copySourceBtn.setAttribute('title', 'Switch to the source to copy it to the clipboard');
@@ -147,15 +148,15 @@ export default class BlobViewer {
     this.toggleCopyButtonState();
     BlobViewer.loadViewer(newViewer)
-    .then((viewer) => {
-      $(viewer).renderGFM();
-      this.$fileHolder.trigger('highlight:line');
-      handleLocationHash();
-      this.toggleCopyButtonState();
-    })
-    .catch(() => new Flash('Error loading viewer'));
+      .then(viewer => {
+        $(viewer).renderGFM();
+        this.$fileHolder.trigger('highlight:line');
+        handleLocationHash();
+        this.toggleCopyButtonState();
+      })
+      .catch(() => new Flash('Error loading viewer'));
   }
   static loadViewer(viewerParam) {
@@ -168,12 +169,11 @@ export default class BlobViewer {
     viewer.setAttribute('data-loading', 'true');
-    return axios.get(url)
-      .then(({ data }) => {
-        viewer.innerHTML = data.html;
-        viewer.setAttribute('data-loaded', 'true');
-        return viewer;
-      });
+    return axios.get(url).then(({ data }) => {
+      viewer.innerHTML = data.html;
+      viewer.setAttribute('data-loaded', 'true');
+      return viewer;
+    });
   }
 }

app/assets/javascripts/blob_edit/blob_bundle.js

@@ -13,11 +13,11 @@ export default () => {
   if (editBlobForm.length) {
     const urlRoot = editBlobForm.data('relativeUrlRoot');
     const assetsPath = editBlobForm.data('assetsPrefix');
-    const blobLanguage = editBlobForm.data('blobLanguage');
+    const filePath = editBlobForm.data('blobFilename')
     const currentAction = $('.js-file-title').data('currentAction');
     const projectId = editBlobForm.data('project-id');
-    new EditBlob(`${urlRoot}${assetsPath}`, blobLanguage, currentAction, projectId);
+    new EditBlob(`${urlRoot}${assetsPath}`, filePath, currentAction, projectId);
     new NewCommitForm(editBlobForm);
   }

app/assets/javascripts/blob_edit/edit_blob.js

@@ -5,6 +5,7 @@ import axios from '~/lib/utils/axios_utils';
 import createFlash from '~/flash';
 import { __ } from '~/locale';
 import TemplateSelectorMediator from '../blob/file_template_mediator';
+import getModeByFileExtension from '~/lib/utils/ace_utils';
 export default class EditBlob {
   constructor(assetsPath, aceMode, currentAction, projectId) {
@@ -14,9 +15,10 @@ export default class EditBlob {
     this.initFileSelectors(currentAction, projectId);
   }
-  configureAceEditor(aceMode, assetsPath) {
+  configureAceEditor(filePath, assetsPath) {
     ace.config.set('modePath', `${assetsPath}/ace`);
     ace.config.loadModule('ace/ext/searchbox');
+    ace.config.loadModule('ace/ext/modelist');
     this.editor = ace.edit('editor');
@@ -25,8 +27,8 @@ export default class EditBlob {
     this.editor.focus();
-    if (aceMode) {
-      this.editor.getSession().setMode(`ace/mode/${aceMode}`);
+    if (filePath) {
+      this.editor.getSession().setMode(getModeByFileExtension(filePath));
     }
   }

app/assets/javascripts/boards/components/issue_card_inner.vue

 <script>
   import $ from 'jquery';
+  import Icon from '~/vue_shared/components/icon.vue';
   import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
   import eventHub from '../eventhub';
   import tooltip from '../../vue_shared/directives/tooltip';
@@ -8,6 +9,7 @@
   export default {
     components: {
       UserAvatarLink,
+      Icon,
     },
     directives: {
       tooltip,
@@ -140,11 +142,11 @@
   <div>
     <div class="board-card-header">
       <h4 class="board-card-title">
-        <i
+        <icon
           v-if="issue.confidential"
-          class="fa fa-eye-slash confidential-icon"
-          aria-hidden="true"
-        ></i>
+          name="eye-slash"
+          class="confidential-icon"
+        />
         <a
           :href="issue.path"
           :title="issue.title"

app/assets/javascripts/boards/components/modal/list.vue

 <script>
+  import Icon from '~/vue_shared/components/icon.vue';
   import bp from '../../../breakpoints';
   import ModalStore from '../../stores/modal_store';
   import IssueCardInner from '../issue_card_inner.vue';
@@ -6,6 +7,7 @@
   export default {
     components: {
       IssueCardInner,
+      Icon,
     },
     props: {
       issueLinkBase: {
@@ -147,13 +149,13 @@
             :issue="issue"
             :issue-link-base="issueLinkBase"
             :root-path="rootPath"/>
-          <span
+          <icon
             v-if="issue.selected"
             :aria-label="'Issue #' + issue.id + ' selected'"
+            name="mobile-issue-close"
             aria-checked="true"
-            class="issue-card-selected text-center">
-            <i class="fa fa-check"></i>
-          </span>
+            class="issue-card-selected text-center"
+          />
         </div>
       </div>
     </div>

app/assets/javascripts/boards/components/modal/lists_dropdown.vue

 <script>
 import { Link } from '@gitlab-org/gitlab-ui';
+import Icon from '~/vue_shared/components/icon.vue';
 import ModalStore from '../../stores/modal_store';
 import boardsStore from '../../stores/boards_store';
 export default {
   components: {
     'gl-link': Link,
+    Icon,
   },
   data() {
     return {
@@ -35,7 +37,9 @@ export default {
         class="dropdown-label-box">
       </span>
       {{ selected.title }}
-      <i class="fa fa-chevron-down"></i>
+      <icon
+        name="chevron-down"
+      />
     </button>
     <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
       <ul>

app/assets/javascripts/boards/components/project_select.vue

 <script>
 import $ from 'jquery';
 import _ from 'underscore';
+import Icon from '~/vue_shared/components/icon.vue';
 import eventHub from '../eventhub';
 import Api from '../../api';
 export default {
   name: 'BoardProjectSelect',
+  components: {
+    Icon,
+  },
   props: {
     groupId: {
       type: Number,
@@ -78,11 +82,9 @@ export default {
         aria-expanded="false"
       >
         {{ selectedProjectName }}
-        <i
-          class="fa fa-chevron-down"
-          aria-hidden="true"
-        >
-        </i>
+        <icon
+          name="chevron-down"
+        />
       </button>
       <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
         <div class="dropdown-title">
@@ -92,12 +94,11 @@ export default {
             type="button"
             class="dropdown-title-button dropdown-menu-close"
           >
-            <i
-              aria-hidden="true"
+            <icon
+              name="merge-request-close-m"
               data-hidden="true"
-              class="fa fa-times dropdown-menu-close-icon"
-            >
-            </i>
+              class="dropdown-menu-close-icon"
+            />
           </button>
         </div>
         <div class="dropdown-input">
@@ -106,12 +107,11 @@ export default {
             type="search"
             placeholder="Search projects"
           />
-          <i
-            aria-hidden="true"
+          <icon
+            name="search"
+            class="dropdown-input-search"
             data-hidden="true"
-            class="fa fa-search dropdown-input-search"
-          >
-          </i>
+          />
         </div>
         <div class="dropdown-content"></div>
         <div class="dropdown-loading">

app/assets/javascripts/clusters/clusters_bundle.js

 import Visibility from 'visibilityjs';
 import Vue from 'vue';
-import PersistentUserCallout from '../persistent_user_callout';
+import initDismissableCallout from '~/dismissable_callout';
 import { s__, sprintf } from '../locale';
 import Flash from '../flash';
 import Poll from '../lib/utils/poll';
@@ -62,7 +62,7 @@ export default class Clusters {
     this.showTokenButton = document.querySelector('.js-show-cluster-token');
     this.tokenField = document.querySelector('.js-cluster-token');
-    Clusters.initDismissableCallout();
+    initDismissableCallout('.js-cluster-security-warning');
     initSettingsPanels();
     setupToggleButtons(document.querySelector('.js-cluster-enable-toggle-area'));
     this.initApplications();
@@ -105,12 +105,6 @@ export default class Clusters {
     });
   }
-  static initDismissableCallout() {
-    const callout = document.querySelector('.js-cluster-security-warning');
-
-    if (callout) new PersistentUserCallout(callout); // eslint-disable-line no-new
-  }
-
   addListeners() {
     if (this.showTokenButton) this.showTokenButton.addEventListener('click', this.showToken);
     eventHub.$on('installApplication', this.installApplication);

app/assets/javascripts/clusters/clusters_index.js

 import createFlash from '~/flash';
 import { __ } from '~/locale';
 import setupToggleButtons from '~/toggle_buttons';
-import PersistentUserCallout from '../persistent_user_callout';
+import initDismissableCallout from '~/dismissable_callout';
 import ClustersService from './services/clusters_service';
 export default () => {
   const clusterList = document.querySelector('.js-clusters-list');
-  const callout = document.querySelector('.gcp-signup-offer');
-  if (callout) new PersistentUserCallout(callout); // eslint-disable-line no-new
+  initDismissableCallout('.gcp-signup-offer');
   // The empty state won't have a clusterList
   if (clusterList) {