Merge branch 'master' into jivl-update-katex

app/assets/javascripts/commons/polyfills/element.js

@@ -18,3 +18,22 @@ Element.prototype.matches = Element.prototype.matches ||
     while (i >= 0 && elms.item(i) !== this) { i -= 1; }
     return i > -1;
   };
+
+// From the polyfill on MDN, https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove#Polyfill
+((arr) => {
+  arr.forEach((item) => {
+    if (Object.prototype.hasOwnProperty.call(item, 'remove')) {
+      return;
+    }
+    Object.defineProperty(item, 'remove', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function remove() {
+        if (this.parentNode !== null) {
+          this.parentNode.removeChild(this);
+        }
+      },
+    });
+  });
+})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);

app/assets/javascripts/diff.js

+import axios from '~/lib/utils/axios_utils';
+import flash from '~/flash';
+import { __ } from '~/locale';
 import { getLocationHash } from './lib/utils/url_utility';
 import FilesCommentButton from './files_comment_button';
 import SingleFileDiff from './single_file_diff';
@@ -69,7 +72,9 @@ export default class Diff {
     const view = file.data('view');
     const params = { since, to, bottom, offset, unfold, view };
-    $.get(link, params, response => $target.parent().replaceWith(response));
+    axios.get(link, { params })
+    .then(({ data }) => $target.parent().replaceWith(data))
+    .catch(() => flash(__('An error occurred while loading diff')));
   }
   openAnchoredDiff(cb) {

app/assets/javascripts/dispatcher.js

 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-arrow-callback, wrap-iife, no-shadow, consistent-return, one-var, one-var-declaration-per-line, camelcase, default-case, no-new, quotes, no-duplicate-case, no-case-declarations, no-fallthrough, max-len */
-import MergeRequest from './merge_request';
 import Flash from './flash';
 import GfmAutoComplete from './gfm_auto_complete';
-import ZenMode from './zen_mode';
-import initNotes from './init_notes';
-import initIssuableSidebar from './init_issuable_sidebar';
 import { convertPermissionToBoolean } from './lib/utils/common_utils';
 import GlFieldErrors from './gl_field_errors';
 import Shortcuts from './shortcuts';
-import ShortcutsIssuable from './shortcuts_issuable';
-import Diff from './diff';
 import SearchAutocomplete from './search_autocomplete';
 var Dispatcher;
@@ -109,6 +103,21 @@ var Dispatcher;
             .then(callDefault)
             .catch(fail);
           break;
+        case 'admin:projects:index':
+          import('./pages/admin/projects/index/index')
+            .then(callDefault)
+            .catch(fail);
+          break;
+        case 'admin:users:index':
+          import('./pages/admin/users/shared')
+            .then(callDefault)
+            .catch(fail);
+          break;
+        case 'admin:users:show':
+          import('./pages/admin/users/shared')
+            .then(callDefault)
+            .catch(fail);
+          break;
         case 'dashboard:projects:index':
         case 'dashboard:projects:starred':
           import('./pages/dashboard/projects')
@@ -247,17 +256,10 @@ var Dispatcher;
             .catch(fail);
           break;
         case 'projects:merge_requests:show':
-          new Diff();
-          new ZenMode();
-
-          initIssuableSidebar();
-          initNotes();
-
-          const mrShowNode = document.querySelector('.merge-request');
-          window.mergeRequest = new MergeRequest({
-            action: mrShowNode.dataset.mrAction,
-          });
-          shortcut_handler = new ShortcutsIssuable(true);
+          import('./pages/projects/merge_requests/show')
+            .then(callDefault)
+            .catch(fail);
+          shortcut_handler = true;
           break;
         case 'dashboard:activity':
           import('./pages/dashboard/activity')

app/assets/javascripts/environments/components/environment_item.vue

 <script>
   import Timeago from 'timeago.js';
   import _ from 'underscore';
-  import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
-  import { humanize } from '../../lib/utils/text_utility';
+  import tooltip from '~/vue_shared/directives/tooltip';
+  import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+  import { humanize } from '~/lib/utils/text_utility';
   import ActionsComponent from './environment_actions.vue';
   import ExternalUrlComponent from './environment_external_url.vue';
   import StopComponent from './environment_stop.vue';
@@ -21,14 +22,18 @@
   export default {
     components: {
-      userAvatarLink,
-      'commit-component': CommitComponent,
-      'actions-component': ActionsComponent,
-      'external-url-component': ExternalUrlComponent,
-      'stop-component': StopComponent,
-      'rollback-component': RollbackComponent,
-      'terminal-button-component': TerminalButtonComponent,
-      'monitoring-button-component': MonitoringButtonComponent,
+      UserAvatarLink,
+      CommitComponent,
+      ActionsComponent,
+      ExternalUrlComponent,
+      StopComponent,
+      RollbackComponent,
+      TerminalButtonComponent,
+      MonitoringButtonComponent,
+    },
+
+    directives: {
+      tooltip,
     },
     props: {
@@ -443,7 +448,11 @@
         v-if="!model.isFolder"
         class="environment-name flex-truncate-parent table-mobile-content"
         :href="environmentPath">
-        <span class="flex-truncate-child">{{ model.name }}</span>
+        <span
+          class="flex-truncate-child"
+          v-tooltip
+          :title="model.name"
+        >{{ model.name }}</span>
       </a>
       <span
         v-else

app/assets/javascripts/feature_highlight/feature_highlight.js

+import _ from 'underscore';
+import {
+  getSelector,
+  togglePopover,
+  inserted,
+  mouseenter,
+  mouseleave,
+} from './feature_highlight_helper';
+
+export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
+  const $selector = $(getSelector(id));
+  const $parent = $selector.parent();
+  const $popoverContent = $parent.siblings('.feature-highlight-popover-content');
+  const hideOnScroll = togglePopover.bind($selector, false);
+  const debouncedMouseleave = _.debounce(mouseleave, debounceTimeout);
+
+  $selector
+    // Setup popover
+    .data('content', $popoverContent.prop('outerHTML'))
+    .popover({
+      html: true,
+      // Override the existing template to add custom CSS classes
+      template: `
+        <div class="popover feature-highlight-popover" role="tooltip">
+          <div class="arrow"></div>
+          <div class="popover-content"></div>
+        </div>
+      `,
+    })
+    .on('mouseenter', mouseenter)
+    .on('mouseleave', debouncedMouseleave)
+    .on('inserted.bs.popover', inserted)
+    .on('show.bs.popover', () => {
+      window.addEventListener('scroll', hideOnScroll);
+    })
+    .on('hide.bs.popover', () => {
+      window.removeEventListener('scroll', hideOnScroll);
+    })
+    // Display feature highlight
+    .removeAttr('disabled');
+}
+
+export function findHighestPriorityFeature() {
+  let priorityFeature;
+
+  const sortedFeatureEls = [].slice.call(document.querySelectorAll('.js-feature-highlight')).sort((a, b) =>
+    (a.dataset.highlightPriority || 0) < (b.dataset.highlightPriority || 0));
+
+  const [priorityFeatureEl] = sortedFeatureEls;
+  if (priorityFeatureEl) {
+    priorityFeature = priorityFeatureEl.dataset.highlight;
+  }
+
+  return priorityFeature;
+}
+
+export function highlightFeatures() {
+  const priorityFeature = findHighestPriorityFeature();
+
+  if (priorityFeature) {
+    setupFeatureHighlightPopover(priorityFeature);
+  }
+
+  return priorityFeature;
+}

app/assets/javascripts/feature_highlight/feature_highlight_helper.js

+import axios from '../lib/utils/axios_utils';
+import { __ } from '../locale';
+import Flash from '../flash';
+import LazyLoader from '../lazy_loader';
+
+export const getSelector = highlightId => `.js-feature-highlight[data-highlight=${highlightId}]`;
+
+export function togglePopover(show) {
+  const isAlreadyShown = this.hasClass('js-popover-show');
+  if ((show && isAlreadyShown) || (!show && !isAlreadyShown)) {
+    return false;
+  }
+  this.popover(show ? 'show' : 'hide');
+  this.toggleClass('disable-animation js-popover-show', show);
+
+  return true;
+}
+
+export function dismiss(highlightId) {
+  axios.post(this.attr('data-dismiss-endpoint'), {
+    feature_name: highlightId,
+  })
+    .catch(() => Flash(__('An error occurred while dismissing the feature highlight. Refresh the page and try dismissing again.')));
+
+  togglePopover.call(this, false);
+  this.hide();
+}
+
+export function mouseleave() {
+  if (!$('.popover:hover').length > 0) {
+    const $featureHighlight = $(this);
+    togglePopover.call($featureHighlight, false);
+  }
+}
+
+export function mouseenter() {
+  const $featureHighlight = $(this);
+
+  const showedPopover = togglePopover.call($featureHighlight, true);
+  if (showedPopover) {
+    $('.popover')
+      .on('mouseleave', mouseleave.bind($featureHighlight));
+  }
+}
+
+export function inserted() {
+  const popoverId = this.getAttribute('aria-describedby');
+  const highlightId = this.dataset.highlight;
+  const $popover = $(this);
+  const dismissWrapper = dismiss.bind($popover, highlightId);
+
+  $(`#${popoverId} .dismiss-feature-highlight`)
+    .on('click', dismissWrapper);
+
+  const lazyImg = $(`#${popoverId} .feature-highlight-illustration`)[0];
+  if (lazyImg) {
+    LazyLoader.loadImage(lazyImg);
+  }
+}

app/assets/javascripts/feature_highlight/feature_highlight_options.js

+import { highlightFeatures } from './feature_highlight';
+import bp from '../breakpoints';
+
+export default function domContentLoaded() {
+  if (bp.getBreakpointSize() === 'lg') {
+    highlightFeatures();
+    return true;
+  }
+  return false;
+}
+
+document.addEventListener('DOMContentLoaded', domContentLoaded);

app/assets/javascripts/filtered_search/filtered_search_bundle.js

@@ -3,7 +3,6 @@ import './dropdown_hint';
 import './dropdown_non_user';
 import './dropdown_user';
 import './dropdown_utils';
-import './filtered_search_token_keys';
 import './filtered_search_dropdown_manager';
 import './filtered_search_dropdown';
 import './filtered_search_manager';

app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js

@@ -3,11 +3,11 @@ import DropLab from '~/droplab/drop_lab';
 import FilteredSearchContainer from './container';
 class FilteredSearchDropdownManager {
-  constructor(baseEndpoint = '', tokenizer, page) {
+  constructor(baseEndpoint = '', tokenizer, page, isGroup, filteredSearchTokenKeys) {
     this.container = FilteredSearchContainer.container;
     this.baseEndpoint = baseEndpoint.replace(/\/$/, '');
     this.tokenizer = tokenizer;
-    this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
+    this.filteredSearchTokenKeys = filteredSearchTokenKeys;
     this.filteredSearchInput = this.container.querySelector('.filtered-search');
     this.page = page;
@@ -29,7 +29,15 @@ class FilteredSearchDropdownManager {
   }
   setupMapping() {
-    this.mapping = {
+    const supportedTokens = this.filteredSearchTokenKeys.getKeys();
+    const allowedMappings = {
+      hint: {
+        reference: null,
+        gl: 'DropdownHint',
+        element: this.container.querySelector('#js-dropdown-hint'),
+      },
+    };
+    const availableMappings = {
       author: {
         reference: null,
         gl: 'DropdownUser',
@@ -64,12 +72,15 @@ class FilteredSearchDropdownManager {
         gl: 'DropdownEmoji',
         element: this.container.querySelector('#js-dropdown-my-reaction'),
       },
-      hint: {
-        reference: null,
-        gl: 'DropdownHint',
-        element: this.container.querySelector('#js-dropdown-hint'),
-      },
     };
+
+    supportedTokens.forEach((type) => {
+      if (availableMappings[type]) {
+        allowedMappings[type] = availableMappings[type];
+      }
+    });
+
+    this.mapping = allowedMappings;
   }
   static addWordToInput(tokenName, tokenValue = '', clicked = false) {

app/assets/javascripts/filtered_search/filtered_search_manager.js

@@ -3,20 +3,33 @@ import { visitUrl } from '../lib/utils/url_utility';
 import Flash from '../flash';
 import FilteredSearchContainer from './container';
 import RecentSearchesRoot from './recent_searches_root';
+import FilteredSearchTokenKeys from './filtered_search_token_keys';
 import RecentSearchesStore from './stores/recent_searches_store';
 import RecentSearchesService from './services/recent_searches_service';
 import eventHub from './event_hub';
 import { addClassIfElementExists } from '../lib/utils/dom_utils';
 class FilteredSearchManager {
-  constructor(page) {
+  constructor({
+    page,
+    filteredSearchTokenKeys = FilteredSearchTokenKeys,
+    stateFiltersSelector = '.issues-state-filters',
+  }) {
+    this.isGroup = false;
+    this.states = ['opened', 'closed', 'merged', 'all'];
+
     this.page = page;
     this.container = FilteredSearchContainer.container;
     this.filteredSearchInput = this.container.querySelector('.filtered-search');
     this.filteredSearchInputForm = this.filteredSearchInput.form;
     this.clearSearchButton = this.container.querySelector('.clear-search');
     this.tokensContainer = this.container.querySelector('.tokens-container');
-    this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
+    this.filteredSearchTokenKeys = filteredSearchTokenKeys;
+    this.stateFiltersSelector = stateFiltersSelector;
+    this.recentsStorageKeyNames = {
+      issues: 'issue-recent-searches',
+      merge_requests: 'merge-request-recent-searches',
+    };
     this.recentSearchesStore = new RecentSearchesStore({
       isLocalStorageAvailable: RecentSearchesService.isAvailable(),
@@ -25,11 +38,7 @@ class FilteredSearchManager {
     this.searchHistoryDropdownElement = document.querySelector('.js-filtered-search-history-dropdown');
     const fullPath = this.searchHistoryDropdownElement ?
       this.searchHistoryDropdownElement.dataset.fullPath : 'project';
-    let recentSearchesPagePrefix = 'issue-recent-searches';
-    if (this.page === 'merge_requests') {
-      recentSearchesPagePrefix = 'merge-request-recent-searches';
-    }
-    const recentSearchesKey = `${fullPath}-${recentSearchesPagePrefix}`;
+    const recentSearchesKey = `${fullPath}-${this.recentsStorageKeyNames[this.page]}`;
     this.recentSearchesService = new RecentSearchesService(recentSearchesKey);
   }
@@ -58,7 +67,13 @@ class FilteredSearchManager {
     if (this.filteredSearchInput) {
       this.tokenizer = gl.FilteredSearchTokenizer;
-      this.dropdownManager = new gl.FilteredSearchDropdownManager(this.filteredSearchInput.getAttribute('data-base-endpoint') || '', this.tokenizer, this.page);
+      this.dropdownManager = new gl.FilteredSearchDropdownManager(
+        this.filteredSearchInput.getAttribute('data-base-endpoint') || '',
+        this.tokenizer,
+        this.page,
+        this.isGroup,
+        this.filteredSearchTokenKeys,
+      );
       this.recentSearchesRoot = new RecentSearchesRoot(
         this.recentSearchesStore,
@@ -86,40 +101,33 @@ class FilteredSearchManager {
   }
   bindStateEvents() {
-    this.stateFilters = document.querySelector('.container-fluid .issues-state-filters');
+    this.stateFilters = document.querySelector(`.container-fluid ${this.stateFiltersSelector}`);
     if (this.stateFilters) {
       this.searchStateWrapper = this.searchState.bind(this);
-      this.stateFilters.querySelector('[data-state="opened"]')
-        .addEventListener('click', this.searchStateWrapper);
-      this.stateFilters.querySelector('[data-state="closed"]')
-        .addEventListener('click', this.searchStateWrapper);
-      this.stateFilters.querySelector('[data-state="all"]')
-        .addEventListener('click', this.searchStateWrapper);
-
-      this.mergedState = this.stateFilters.querySelector('[data-state="merged"]');
-      if (this.mergedState) {
-        this.mergedState.addEventListener('click', this.searchStateWrapper);
-      }
+      this.applyToStateFilters((filterEl) => {
+        filterEl.addEventListener('click', this.searchStateWrapper);
+      });
     }
   }
   unbindStateEvents() {
     if (this.stateFilters) {
-      this.stateFilters.querySelector('[data-state="opened"]')
-        .removeEventListener('click', this.searchStateWrapper);
-      this.stateFilters.querySelector('[data-state="closed"]')
-        .removeEventListener('click', this.searchStateWrapper);
-      this.stateFilters.querySelector('[data-state="all"]')
-        .removeEventListener('click', this.searchStateWrapper);
-
-      if (this.mergedState) {
-        this.mergedState.removeEventListener('click', this.searchStateWrapper);
-      }
+      this.applyToStateFilters((filterEl) => {
+        filterEl.removeEventListener('click', this.searchStateWrapper);
+      });
     }
   }
+  applyToStateFilters(callback) {
+    this.stateFilters.querySelectorAll('a[data-state]').forEach((filterEl) => {
+      if (this.states.indexOf(filterEl.dataset.state) > -1) {
+        callback(filterEl);
+      }
+    });
+  }
+
   bindEvents() {
     this.handleFormSubmit = this.handleFormSubmit.bind(this);
     this.setDropdownWrapper = this.dropdownManager.setDropdown.bind(this.dropdownManager);

app/assets/javascripts/filtered_search/filtered_search_token_keys.js

@@ -71,7 +71,7 @@ const conditions = [{
   value: 'none',
 }];
-class FilteredSearchTokenKeys {
+export default class FilteredSearchTokenKeys {
   static get() {
     return tokenKeys;
   }
@@ -121,6 +121,3 @@ class FilteredSearchTokenKeys {
       .find(condition => condition.tokenKey === key && condition.value === value) || null;
   }
 }
-
-window.gl = window.gl || {};
-gl.FilteredSearchTokenKeys = FilteredSearchTokenKeys;

app/assets/javascripts/gl_form.js

-/* global autosize */
-
+import autosize from 'autosize';
 import GfmAutoComplete from './gfm_auto_complete';
 import dropzoneInput from './dropzone_input';
 import textUtils from './lib/utils/text_markdown';

app/assets/javascripts/gpg_badges.js

+import { parseQueryStringIntoObject } from '~/lib/utils/common_utils';
+import axios from '~/lib/utils/axios_utils';
+import flash from '~/flash';
+import { __ } from '~/locale';
+
 export default class GpgBadges {
   static fetch() {
     const badges = $('.js-loading-gpg-badge');
@@ -5,13 +10,13 @@ export default class GpgBadges {
     badges.html('<i class="fa fa-spinner fa-spin"></i>');
-    $.get({
-      url: form.data('signatures-path'),
-      data: form.serialize(),
-    }).done((response) => {
-      response.signatures.forEach((signature) => {
+    const params = parseQueryStringIntoObject(form.serialize());
+    return axios.get(form.data('signatures-path'), { params })
+    .then(({ data }) => {
+      data.signatures.forEach((signature) => {
         badges.filter(`[data-commit-sha="${signature.commit_sha}"]`).replaceWith(signature.html);
       });
-    });
+    })
+    .catch(() => flash(__('An error occurred while loading commits')));
   }
 }

app/assets/javascripts/groups/components/app.vue

@@ -152,14 +152,14 @@ export default {
     showLeaveGroupModal(group, parentGroup) {
       this.targetGroup = group;
       this.targetParentGroup = parentGroup;
-      this.showModal = true;
+      this.updateModal = true;
       this.groupLeaveConfirmationMessage = s__(`GroupsTree|Are you sure you want to leave the "${group.fullName}" group?`);
     },
     hideLeaveGroupModal() {
-      this.showModal = false;
+      this.updateModal = false;
     },
     leaveGroup() {
-      this.showModal = false;
+      this.updateModal = false;
       this.targetGroup.isBeingRemoved = true;
       this.service.leaveGroup(this.targetGroup.leavePath)
         .then(res => res.json())

app/assets/javascripts/groups/transfer_dropdown.js

+export default class TransferDropdown {
+  constructor() {
+    this.groupDropdown = $('.js-groups-dropdown');
+    this.parentInput = $('#new_parent_group_id');
+    this.data = this.groupDropdown.data('data');
+    this.init();
+  }
+
+  init() {
+    this.buildDropdown();
+  }
+
+  buildDropdown() {
+    const extraOptions = [{ id: '', text: 'No parent group' }, 'divider'];
+
+    this.groupDropdown.glDropdown({
+      selectable: true,
+      filterable: true,
+      toggleLabel: item => item.text,
+      search: { fields: ['text'] },
+      data: extraOptions.concat(this.data),
+      text: item => item.text,
+      clicked: (options) => {
+        const { e } = options;
+        e.preventDefault();
+        this.assignSelected(options.selectedObj);
+      },
+    });
+  }
+
+  assignSelected(selected) {
+    this.parentInput.val(selected.id);
+  }
+}

app/assets/javascripts/importer_status.js

+import { __ } from './locale';
+import axios from './lib/utils/axios_utils';
+import flash from './flash';
+
 class ImporterStatus {
   constructor(jobsUrl, importUrl) {
     this.jobsUrl = jobsUrl;
@@ -9,29 +13,7 @@ class ImporterStatus {
   initStatusPage() {
     $('.js-add-to-import')
       .off('click')
-      .on('click', (event) => {
-        const $btn = $(event.currentTarget);
-        const $tr = $btn.closest('tr');
-        const $targetField = $tr.find('.import-target');
-        const $namespaceInput = $targetField.find('.js-select-namespace option:selected');
-        const id = $tr.attr('id').replace('repo_', '');
-        let targetNamespace;
-        let newName;
-        if ($namespaceInput.length > 0) {
-          targetNamespace = $namespaceInput[0].innerHTML;
-          newName = $targetField.find('#path').prop('value');
-          $targetField.empty().append(`${targetNamespace}/${newName}`);
-        }
-        $btn.disable().addClass('is-loading');
-
-        return $.post(this.importUrl, {
-          repo_id: id,
-          target_namespace: targetNamespace,
-          new_name: newName,
-        }, {
-          dataType: 'script',
-        });
-      });
+      .on('click', this.addToImport.bind(this));
     $('.js-import-all')
       .off('click')
@@ -44,6 +26,39 @@ class ImporterStatus {
       });
   }
+  addToImport(event) {
+    const $btn = $(event.currentTarget);
+    const $tr = $btn.closest('tr');
+    const $targetField = $tr.find('.import-target');
+    const $namespaceInput = $targetField.find('.js-select-namespace option:selected');
+    const id = $tr.attr('id').replace('repo_', '');
+    let targetNamespace;
+    let newName;
+    if ($namespaceInput.length > 0) {
+      targetNamespace = $namespaceInput[0].innerHTML;
+      newName = $targetField.find('#path').prop('value');
+      $targetField.empty().append(`${targetNamespace}/${newName}`);
+    }
+    $btn.disable().addClass('is-loading');
+
+    return axios.post(this.importUrl, {
+      repo_id: id,
+      target_namespace: targetNamespace,
+      new_name: newName,
+    })
+    .then(({ data }) => {
+      const job = $(`tr#repo_${id}`);
+      job.attr('id', `project_${data.id}`);
+
+      job.find('.import-target').html(`<a href="${data.full_path}">${data.full_path}</a>`);
+      $('table.import-jobs tbody').prepend(job);
+
+      job.addClass('active');
+      job.find('.import-actions').html('<i class="fa fa-spinner fa-spin" aria-label="importing"></i> started');
+    })
+    .catch(() => flash(__('An error occurred while importing project')));
+  }
+
   setAutoUpdate() {
     return setInterval(() => $.get(this.jobsUrl, data => $.each(data, (i, job) => {
       const jobItem = $(`#project_${job.id}`);
@@ -71,7 +86,7 @@ class ImporterStatus {
 }
 // eslint-disable-next-line consistent-return
-export default function initImporterStatus() {
+function initImporterStatus() {
   const importerStatus = document.querySelector('.js-importer-status');
   if (importerStatus) {
@@ -79,3 +94,8 @@ export default function initImporterStatus() {
     return new ImporterStatus(data.jobsImportPath, data.importPath);
   }
 }
+
+export {
+  initImporterStatus as default,
+  ImporterStatus,
+};

app/assets/javascripts/issue.js

 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, no-underscore-dangle, one-var-declaration-per-line, object-shorthand, no-unused-vars, no-new, comma-dangle, consistent-return, quotes, dot-notation, quote-props, prefer-arrow-callback, max-len */
-import 'vendor/jquery.waitforimages';
 import axios from './lib/utils/axios_utils';
 import { addDelimiter } from './lib/utils/text_utility';
 import flash from './flash';

app/assets/javascripts/job.js

@@ -217,7 +217,7 @@ export default class Job {
         }
         this.isLogComplete = log.complete;
-        if (!log.complete) {
+        if (log.complete === false) {
           this.timeout = setTimeout(() => {
             this.getBuildTrace();
           }, 4000);

app/assets/javascripts/lib/utils/common_utils.js

 import axios from './axios_utils';
 import { getLocationHash } from './url_utility';
+import { convertToCamelCase } from './text_utility';
 export const getPagePath = (index = 0) => $('body').attr('data-page').split(':')[index];
@@ -395,6 +396,26 @@ export const spriteIcon = (icon, className = '') => {
   return `<svg ${classAttribute}><use xlink:href="${gon.sprite_icons}#${icon}" /></svg>`;
 };
+/**
+ * This method takes in object with snake_case property names
+ * and returns new object with camelCase property names
+ *
+ * Reasoning for this method is to ensure consistent property
+ * naming conventions across JS code.
+ */
+export const convertObjectPropsToCamelCase = (obj = {}) => {
+  if (obj === null) {
+    return {};
+  }
+
+  return Object.keys(obj).reduce((acc, prop) => {
+    const result = acc;
+
+    result[convertToCamelCase(prop)] = obj[prop];
+    return acc;
+  }, {});
+};
+
 export const imagePath = imgUrl => `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/${imgUrl}`;
 window.gl = window.gl || {};

app/assets/javascripts/lib/utils/datetime_utility.js

@@ -9,6 +9,20 @@ import {
 window.timeago = timeago;
 window.dateFormat = dateFormat;
+/**
+ * Returns i18n month names array.
+ * If `abbreviated` is provided, returns abbreviated
+ * name.
+ *
+ * @param {Boolean} abbreviated
+ */
+const getMonthNames = (abbreviated) => {
+  if (abbreviated) {
+    return [s__('Jan'), s__('Feb'), s__('Mar'), s__('Apr'), s__('May'), s__('Jun'), s__('Jul'), s__('Aug'), s__('Sep'), s__('Oct'), s__('Nov'), s__('Dec')];
+  }
+  return [s__('January'), s__('February'), s__('March'), s__('April'), s__('May'), s__('June'), s__('July'), s__('August'), s__('September'), s__('October'), s__('November'), s__('December')];
+};
+
 /**
  * Given a date object returns the day of the week in English
  * @param {date} date
@@ -143,7 +157,6 @@ export const getDayDifference = (a, b) => {
  * @param  {Number} seconds
  * @return {String}
  */
-// eslint-disable-next-line import/prefer-default-export
 export function timeIntervalInWords(intervalInSeconds) {
   const secondsInteger = parseInt(intervalInSeconds, 10);
   const minutes = Math.floor(secondsInteger / 60);
@@ -158,7 +171,7 @@ export function timeIntervalInWords(intervalInSeconds) {
   return text;
 }
-export function dateInWords(date, abbreviated = false) {
+export function dateInWords(date, abbreviated = false, hideYear = false) {
   if (!date) return date;
   const month = date.getMonth();
@@ -169,9 +182,115 @@ export function dateInWords(date, abbreviated = false) {
   const monthName = abbreviated ? monthNamesAbbr[month] : monthNames[month];
+  if (hideYear) {
+    return `${monthName} ${date.getDate()}`;
+  }
+
   return `${monthName} ${date.getDate()}, ${year}`;
 }
+/**
+ * Returns month name based on provided date.
+ *
+ * @param {Date} date
+ * @param {Boolean} abbreviated
+ */
+export const monthInWords = (date, abbreviated = false) => {
+  if (!date) {
+    return '';
+  }
+
+  return getMonthNames(abbreviated)[date.getMonth()];
+};
+
+/**
+ * Returns number of days in a month for provided date.
+ * courtesy: https://stacko(verflow.com/a/1185804/414749
+ *
+ * @param {Date} date
+ */
+export const totalDaysInMonth = (date) => {
+  if (!date) {
+    return 0;
+  }
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+};
+
+/**
+ * Returns list of Dates referring to Sundays of the month
+ * based on provided date
+ *
+ * @param {Date} date
+ */
+export const getSundays = (date) => {
+  if (!date) {
+    return [];
+  }
+
+  const daysToSunday = ['Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
+
+  const month = date.getMonth();
+  const year = date.getFullYear();
+  const sundays = [];
+  const dateOfMonth = new Date(year, month, 1);
+
+  while (dateOfMonth.getMonth() === month) {
+    const dayName = getDayName(dateOfMonth);
+    if (dayName === 'Sunday') {
+      sundays.push(new Date(dateOfMonth.getTime()));
+    }
+
+    const daysUntilNextSunday = daysToSunday.indexOf(dayName) + 1;
+    dateOfMonth.setDate(dateOfMonth.getDate() + daysUntilNextSunday);
+  }
+
+  return sundays;
+};
+
+/**
+ * Returns list of Dates representing a timeframe of Months from month of provided date (inclusive)
+ * up to provided length
+ *
+ * For eg;
+ *    If current month is January 2018 and `length` provided is `6`
+ *    Then this method will return list of Date objects as follows;
+ *
+ *    [ October 2017, November 2017, December 2017, January 2018, February 2018, March 2018 ]
+ *
+ *    If current month is March 2018 and `length` provided is `3`
+ *    Then this method will return list of Date objects as follows;
+ *
+ *    [ February 2018, March 2018, April 2018 ]
+ *
+ * @param {Number} length
+ * @param {Date} date
+ */
+export const getTimeframeWindow = (length, date) => {
+  if (!length) {
+    return [];
+  }
+
+  const currentDate = date instanceof Date ? date : new Date();
+  const currentMonthIndex = Math.floor(length / 2);
+  const timeframe = [];
+
+  // Move date object backward to the first month of timeframe
+  currentDate.setDate(1);
+  currentDate.setMonth(currentDate.getMonth() - currentMonthIndex);
+
+  // Iterate and update date for the size of length
+  // and push date reference to timeframe list
+  for (let i = 0; i < length; i += 1) {
+    timeframe.push(new Date(currentDate.getTime()));
+    currentDate.setMonth(currentDate.getMonth() + 1);
+  }
+
+  // Change date of last timeframe item to last date of the month
+  timeframe[length - 1].setDate(totalDaysInMonth(timeframe[length - 1]));
+
+  return timeframe;
+};
+
 window.gl = window.gl || {};
 window.gl.utils = {
   ...(window.gl.utils || {}),