Merge branch 'master' into xlsx-renderer

.eslintrc

@@ -13,9 +13,11 @@
   },
   "plugins": [
     "filenames",
-    "import"
+    "import",
+    "html"
   ],
   "settings": {
+    "html/html-extensions": [".html", ".html.raw", ".vue"],
     "import/resolver": {
       "webpack": {
         "config": "./config/webpack.config.js"

CHANGELOG.md

@@ -2,6 +2,12 @@
 documentation](doc/development/changelog.md) for instructions on adding your own
 entry.
+## 9.0.5 (2017-04-10)
+
+- Add shortcuts and counters to MRs and issues in navbar.
+- Disable invalid service templates.
+- Handle SSH keys that have multiple spaces between each marker.
+
 ## 9.0.4 (2017-04-05)
 - Don’t show source project name when user does not have access.

app/assets/javascripts/behaviors/autosize.js

-/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var, consistent-return, max-len */
-/* global autosize */
-var autosize = require('vendor/autosize');
-(function() {
-  $(function() {
-    var $fields;
-    $fields = $('.js-autosize');
-    $fields.on('autosize:resized', function() {
-      var $field;
-      $field = $(this);
-      return $field.data('height', $field.outerHeight());
-    });
-    $fields.on('resize.autosize', function() {
-      var $field;
-      $field = $(this);
-      if ($field.data('height') !== $field.outerHeight()) {
-        $field.data('height', $field.outerHeight());
-        autosize.destroy($field);
-        return $field.css('max-height', window.outerHeight);
-      }
-    });
-    autosize($fields);
-    autosize.update($fields);
-    return $fields.css('resize', 'vertical');
+import autosize from 'vendor/autosize';
+$(() => {
+  const $fields = $('.js-autosize');
+  $fields.on('autosize:resized', function resized() {
+    const $field = $(this);
+    $field.data('height', $field.outerHeight());
   });
-}).call(window);
+
+  $fields.on('resize.autosize', function resize() {
+    const $field = $(this);
+    if ($field.data('height') !== $field.outerHeight()) {
+      $field.data('height', $field.outerHeight());
+      autosize.destroy($field);
+      $field.css('max-height', window.outerHeight);
+    }
+  });
+
+  autosize($fields);
+  autosize.update($fields);
+  $fields.css('resize', 'vertical');
+});

app/assets/javascripts/behaviors/details_behavior.js

-/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, quotes, no-var, vars-on-top, max-len */
-(function() {
-  $(function() {
-    $("body").on("click", ".js-details-target", function() {
-      var container;
-      container = $(this).closest(".js-details-container");
-      return container.toggleClass("open");
-    });
-    // Show details content. Hides link after click.
-    //
-    // %div
-    //   %a.js-details-expand
-    //   %div.js-details-content
-    //
-    return $("body").on("click", ".js-details-expand", function(e) {
-      $(this).next('.js-details-content').removeClass("hide");
-      $(this).hide();
-      var truncatedItem = $(this).siblings('.js-details-short');
-      if (truncatedItem.length) {
-        truncatedItem.addClass("hide");
-      }
-      return e.preventDefault();
-    });
+$(() => {
+  $('body').on('click', '.js-details-target', function target() {
+    $(this).closest('.js-details-container').toggleClass('open');
   });
-}).call(window);
+
+  // Show details content. Hides link after click.
+  //
+  // %div
+  //   %a.js-details-expand
+  //   %div.js-details-content
+  //
+  $('body').on('click', '.js-details-expand', function expand(e) {
+    e.preventDefault();
+    $(this).next('.js-details-content').removeClass('hide');
+    $(this).hide();
+
+    const truncatedItem = $(this).siblings('.js-details-short');
+    if (truncatedItem.length) {
+      truncatedItem.addClass('hide');
+    }
+  });
+});

app/assets/javascripts/behaviors/index.js

+import './autosize';
+import './bind_in_out';
+import './details_behavior';
+import { installGlEmojiElement } from './gl_emoji';
+import './quick_submit';
+import './requires_input';
+import './toggler_behavior';
+
+installGlEmojiElement();

app/assets/javascripts/behaviors/quick_submit.js

-/* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, prefer-arrow-callback, camelcase, consistent-return, quotes, object-shorthand, comma-dangle, max-len */
+import '../commons/bootstrap';
 // Quick Submit behavior
 //
 // When a child field of a form with a `js-quick-submit` class receives a
 // "Meta+Enter" (Mac) or "Ctrl+Enter" (Linux/Windows) key combination, the form
 // is submitted.
-//
-import '../commons/bootstrap';
-
 //
 // ### Example Markup
 //
@@ -17,61 +14,59 @@ import '../commons/bootstrap';
 //     <input type="submit" value="Submit" />
 //   </form>
 //
-(function() {
-  var isMac, keyCodeIs;
-  isMac = function() {
-    return navigator.userAgent.match(/Macintosh/);
-  };
-  keyCodeIs = function(e, keyCode) {
-    if ((e.originalEvent && e.originalEvent.repeat) || e.repeat) {
-      return false;
-    }
-    return e.keyCode === keyCode;
-  };
-  $(document).on('keydown.quick_submit', '.js-quick-submit', function(e) {
-    var $form, $submit_button;
-    // Enter
-    if (!keyCodeIs(e, 13)) {
-      return;
-    }
-    if (!((e.metaKey && !e.altKey && !e.ctrlKey && !e.shiftKey) || (e.ctrlKey && !e.altKey && !e.metaKey && !e.shiftKey))) {
-      return;
-    }
-    e.preventDefault();
-    $form = $(e.target).closest('form');
-    $submit_button = $form.find('input[type=submit], button[type=submit]');
-    if ($submit_button.attr('disabled')) {
-      return;
-    }
-    $submit_button.disable();
-    return $form.submit();
-  });
-  // If the user tabs to a submit button on a `js-quick-submit` form, display a
-  // tooltip to let them know they could've used the hotkey
-  $(document).on('keyup.quick_submit', '.js-quick-submit input[type=submit], .js-quick-submit button[type=submit]', function(e) {
-    var $this, title;
-    // Tab
-    if (!keyCodeIs(e, 9)) {
-      return;
-    }
-    if (isMac()) {
-      title = "You can also press &#8984;-Enter";
-    } else {
-      title = "You can also press Ctrl-Enter";
-    }
-    $this = $(this);
-    return $this.tooltip({
-      container: 'body',
-      html: 'true',
-      placement: 'auto top',
-      title: title,
-      trigger: 'manual'
-    }).tooltip('show').one('blur', function() {
-      return $this.tooltip('hide');
-    });
+function isMac() {
+  return navigator.userAgent.match(/Macintosh/);
+}
+function keyCodeIs(e, keyCode) {
+  if ((e.originalEvent && e.originalEvent.repeat) || e.repeat) {
+    return false;
+  }
+  return e.keyCode === keyCode;
+}
+$(document).on('keydown.quick_submit', '.js-quick-submit', (e) => {
+  // Enter
+  if (!keyCodeIs(e, 13)) {
+    return;
+  }
+
+  const onlyMeta = e.metaKey && !e.altKey && !e.ctrlKey && !e.shiftKey;
+  const onlyCtrl = e.ctrlKey && !e.altKey && !e.metaKey && !e.shiftKey;
+  if (!onlyMeta && !onlyCtrl) {
+    return;
+  }
+
+  e.preventDefault();
+  const $form = $(e.target).closest('form');
+  const $submitButton = $form.find('input[type=submit], button[type=submit]');
+
+  if (!$submitButton.attr('disabled')) {
+    $submitButton.disable();
+    $form.submit();
+  }
+});
+
+// If the user tabs to a submit button on a `js-quick-submit` form, display a
+// tooltip to let them know they could've used the hotkey
+$(document).on('keyup.quick_submit', '.js-quick-submit input[type=submit], .js-quick-submit button[type=submit]', function displayTooltip(e) {
+  // Tab
+  if (!keyCodeIs(e, 9)) {
+    return;
+  }
+
+  const $this = $(this);
+  const title = isMac() ?
+    'You can also press &#8984;-Enter' :
+    'You can also press Ctrl-Enter';
+  $this.tooltip({
+    container: 'body',
+    html: 'true',
+    placement: 'auto top',
+    title,
+    trigger: 'manual',
   });
-}).call(window);
+  $this.tooltip('show').one('blur', () => $this.tooltip('hide'));
+});

app/assets/javascripts/behaviors/requires_input.js

-/* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, quotes, prefer-template, prefer-arrow-callback, no-else-return, consistent-return, max-len */
+import '../commons/bootstrap';
+
 // Requires Input behavior
 //
 // When called on a form with input fields with the `required` attribute, the
 // form's submit button will be disabled until all required fields have values.
-//
-import '../commons/bootstrap';
-
 //
 // ### Example Markup
 //
@@ -14,49 +12,43 @@ import '../commons/bootstrap';
 //     <input type="submit" value="Submit">
 //   </form>
 //
-(function() {
-  $.fn.requiresInput = function() {
-    var $button, $form, fieldSelector, requireInput, required;
-    $form = $(this);
-    $button = $('button[type=submit], input[type=submit]', $form);
-    required = '[required=required]';
-    fieldSelector = "input" + required + ", select" + required + ", textarea" + required;
-    requireInput = function() {
-      var values;
-      values = _.map($(fieldSelector, $form), function(field) {
-        // Collect the input values of *all* required fields
-        return field.value;
-      });
-      // Disable the button if any required fields are empty
-      if (values.length && _.any(values, _.isEmpty)) {
-        return $button.disable();
-      } else {
-        return $button.enable();
-      }
-    };
-    // Set initial button state
-    requireInput();
-    return $form.on('change input', fieldSelector, requireInput);
-  };
-  $(function() {
-    var $form, hideOrShowHelpBlock;
-    $form = $('form.js-requires-input');
-    $form.requiresInput();
-    // Hide or Show the help block when creating a new project
-    // based on the option selected
-    hideOrShowHelpBlock = function(form) {
-      var selected;
-      selected = $('.js-select-namespace option:selected');
-      if (selected.length && selected.data('options-parent') === 'groups') {
-        return form.find('.help-block').hide();
-      } else if (selected.length) {
-        return form.find('.help-block').show();
-      }
-    };
-    hideOrShowHelpBlock($form);
-    return $('.select2.js-select-namespace').change(function() {
-      return hideOrShowHelpBlock($form);
-    });
-  });
-}).call(window);
+$.fn.requiresInput = function requiresInput() {
+  const $form = $(this);
+  const $button = $('button[type=submit], input[type=submit]', $form);
+  const fieldSelector = 'input[required=required], select[required=required], textarea[required=required]';
+
+  function requireInput() {
+    // Collect the input values of *all* required fields
+    const values = _.map($(fieldSelector, $form), field => field.value);
+
+    // Disable the button if any required fields are empty
+    if (values.length && _.any(values, _.isEmpty)) {
+      $button.disable();
+    } else {
+      $button.enable();
+    }
+  }
+
+  // Set initial button state
+  requireInput();
+  $form.on('change input', fieldSelector, requireInput);
+};
+
+// Hide or Show the help block when creating a new project
+// based on the option selected
+function hideOrShowHelpBlock(form) {
+  const selected = $('.js-select-namespace option:selected');
+  if (selected.length && selected.data('options-parent') === 'groups') {
+    form.find('.help-block').hide();
+  } else if (selected.length) {
+    form.find('.help-block').show();
+  }
+}
+
+$(() => {
+  const $form = $('form.js-requires-input');
+  $form.requiresInput();
+  hideOrShowHelpBlock($form);
+  $('.select2.js-select-namespace').change(() => hideOrShowHelpBlock($form));
+});

app/assets/javascripts/behaviors/toggler_behavior.js

-/* eslint-disable wrap-iife, func-names, space-before-function-paren, prefer-arrow-callback, vars-on-top, no-var, max-len */
-(function(w) {
-  $(function() {
-    var toggleContainer = function(container, /* optional */toggleState) {
-      var $container = $(container);
-
-      $container
-        .find('.js-toggle-button .fa')
-        .toggleClass('fa-chevron-up', toggleState)
-        .toggleClass('fa-chevron-down', toggleState !== undefined ? !toggleState : undefined);
-
-      $container
-        .find('.js-toggle-content')
-        .toggle(toggleState);
-    };
-
-    // Toggle button. Show/hide content inside parent container.
-    // Button does not change visibility. If button has icon - it changes chevron style.
-    //
-    // %div.js-toggle-container
-    //   %button.js-toggle-button
-    //   %div.js-toggle-content
-    //
-    $('body').on('click', '.js-toggle-button', function(e) {
-      toggleContainer($(this).closest('.js-toggle-container'));
-
-      const targetTag = e.currentTarget.tagName.toLowerCase();
-      if (targetTag === 'a' || targetTag === 'button') {
-        e.preventDefault();
-      }
-    });
-
-    // If we're accessing a permalink, ensure it is not inside a
-    // closed js-toggle-container!
-    var hash = w.gl.utils.getLocationHash();
-    var anchor = hash && document.getElementById(hash);
-    var container = anchor && $(anchor).closest('.js-toggle-container');
-
-    if (container) {
-      toggleContainer(container, true);
-      anchor.scrollIntoView();
+
+// Toggle button. Show/hide content inside parent container.
+// Button does not change visibility. If button has icon - it changes chevron style.
+//
+// %div.js-toggle-container
+//   %button.js-toggle-button
+//   %div.js-toggle-content
+//
+
+$(() => {
+  function toggleContainer(container, toggleState) {
+    const $container = $(container);
+
+    $container
+      .find('.js-toggle-button .fa')
+      .toggleClass('fa-chevron-up', toggleState)
+      .toggleClass('fa-chevron-down', toggleState !== undefined ? !toggleState : undefined);
+
+    $container
+      .find('.js-toggle-content')
+      .toggle(toggleState);
+  }
+
+  $('body').on('click', '.js-toggle-button', function toggleButton(e) {
+    toggleContainer($(this).closest('.js-toggle-container'));
+
+    const targetTag = e.currentTarget.tagName.toLowerCase();
+    if (targetTag === 'a' || targetTag === 'button') {
+      e.preventDefault();
     }
   });
-})(window);
+
+  // If we're accessing a permalink, ensure it is not inside a
+  // closed js-toggle-container!
+  const hash = window.gl.utils.getLocationHash();
+  const anchor = hash && document.getElementById(hash);
+  const container = anchor && $(anchor).closest('.js-toggle-container');
+
+  if (container) {
+    toggleContainer(container, true);
+    anchor.scrollIntoView();
+  }
+});

app/assets/javascripts/build.js

@@ -90,6 +90,8 @@ window.Build = (function () {
       success: ((log) => {
         const $buildContainer = $('.js-build-output');
+        gl.utils.setCiStatusFavicon(`${this.pageUrl}/status.json`);
+
         if (log.state) {
           this.state = log.state;
         }

app/assets/javascripts/commit/pipelines/pipelines_table.js

@@ -4,8 +4,8 @@ import PipelinesTableComponent from '../../vue_shared/components/pipelines_table
 import PipelinesService from '../../vue_pipelines_index/services/pipelines_service';
 import PipelineStore from '../../vue_pipelines_index/stores/pipelines_store';
 import eventHub from '../../vue_pipelines_index/event_hub';
-import EmptyState from '../../vue_pipelines_index/components/empty_state';
-import ErrorState from '../../vue_pipelines_index/components/error_state';
+import EmptyState from '../../vue_pipelines_index/components/empty_state.vue';
+import ErrorState from '../../vue_pipelines_index/components/error_state.vue';
 import '../../lib/utils/common_utils';
 import '../../vue_shared/vue_resource_interceptor';
 import Poll from '../../lib/utils/poll';

app/assets/javascripts/dispatcher.js

@@ -37,6 +37,7 @@
 import Issue from './issue';
 import BindInOut from './behaviors/bind_in_out';
+import Group from './group';
 import GroupName from './group_name';
 import GroupsList from './groups_list';
 import ProjectsList from './projects_list';
@@ -271,8 +272,9 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'groups:create':
         case 'admin:groups:create':
           BindInOut.initAll();
-        case 'groups:new':
-        case 'admin:groups:new':
+          new Group();
+          new GroupAvatar();
+          break;
         case 'groups:edit':
         case 'admin:groups:edit':
           new GroupAvatar();

app/assets/javascripts/group.js

+export default class Group {
+  constructor() {
+    this.groupPath = $('#group_path');
+    this.groupName = $('#group_name');
+    this.updateHandler = this.update.bind(this);
+    this.resetHandler = this.reset.bind(this);
+    if (this.groupName.val() === '') {
+      this.groupPath.on('keyup', this.updateHandler);
+      this.groupName.on('keydown', this.resetHandler);
+    }
+  }
+
+  update() {
+    this.groupName.val(this.groupPath.val());
+  }
+
+  reset() {
+    this.groupPath.off('keyup', this.updateHandler);
+    this.groupName.off('keydown', this.resetHandler);
+  }
+}

app/assets/javascripts/main.js

@@ -37,14 +37,7 @@ import './shortcuts_issuable';
 import './shortcuts_network';
 // behaviors
-import './behaviors/autosize';
-import './behaviors/details_behavior';
-import './behaviors/quick_submit';
-import './behaviors/requires_input';
-import './behaviors/toggler_behavior';
-import './behaviors/bind_in_out';
-import { installGlEmojiElement } from './behaviors/gl_emoji';
-installGlEmojiElement();
+import './behaviors/';
 // blob
 import './blob/create_branch_dropdown';

app/assets/javascripts/vue_pipelines_index/components/async_button.js → app/assets/javascripts/vue_pipelines_index/components/async_button.vue

+<script>
 /* eslint-disable no-new, no-alert */
 /* global Flash */
 import '~/flash';
@@ -65,29 +66,31 @@ export default {
       this.isLoading = true;
       this.service.postAction(this.endpoint)
-      .then(() => {
-        this.isLoading = false;
-        eventHub.$emit('refreshPipelines');
-      })
-      .catch(() => {
-        this.isLoading = false;
-        new Flash('An error occured while making the request.');
-      });
+        .then(() => {
+          this.isLoading = false;
+          eventHub.$emit('refreshPipelines');
+        })
+        .catch(() => {
+          this.isLoading = false;
+          new Flash('An error occured while making the request.');
+        });
     },
   },
-
-  template: `
-    <button
-      type="button"
-      @click="onClick"
-      :class="buttonClass"
-      :title="title"
-      :aria-label="title"
-      data-container="body"
-      data-placement="top"
-      :disabled="isLoading">
-      <i :class="iconClass" aria-hidden="true"/>
-      <i class="fa fa-spinner fa-spin" aria-hidden="true" v-if="isLoading" />
-    </button>
-  `,
 };
+</script>
+
+<template>
+  <button
+    type="button"
+    @click="onClick"
+    :class="buttonClass"
+    :title="title"
+    :aria-label="title"
+    data-container="body"
+    data-placement="top"
+    :disabled="isLoading"
+  >
+    <i :class="iconClass" aria-hidden="true"></i>
+    <i class="fa fa-spinner fa-spin" aria-hidden="true" v-if="isLoading"></i>
+  </button>
+</template>

app/assets/javascripts/vue_pipelines_index/components/empty_state.js

-import pipelinesEmptyStateSVG from 'empty_states/icons/_pipelines_empty.svg';
-
-export default {
-  props: {
-    helpPagePath: {
-      type: String,
-      required: true,
-    },
-  },
-
-  template: `
-    <div class="row empty-state">
-      <div class="col-xs-12">
-        <div class="svg-content">
-          ${pipelinesEmptyStateSVG}
-        </div>
-      </div>
-
-      <div class="col-xs-12 text-center">
-        <div class="text-content">
-          <h4>Build with confidence</h4>
-          <p>
-            Continous Integration can help catch bugs by running your tests automatically,
-            while Continuous Deployment can help you deliver code to your product environment.
-          </p>
-          <a :href="helpPagePath" class="btn btn-info">
-            Get started with Pipelines
-          </a>
-        </div>
-      </div>
-    </div>
-  `,
-};

app/assets/javascripts/vue_pipelines_index/components/empty_state.vue

+<script>
+import pipelinesEmptyStateSVG from 'empty_states/icons/_pipelines_empty.svg';
+
+export default {
+  props: {
+    helpPagePath: {
+      type: String,
+      required: true,
+    },
+  },
+  data: () => ({ pipelinesEmptyStateSVG }),
+};
+</script>
+
+<template>
+  <div class="row empty-state">
+    <div class="col-xs-12">
+      <div class="svg-content" v-html="pipelinesEmptyStateSVG" />
+    </div>
+
+    <div class="col-xs-12 text-center">
+      <div class="text-content">
+        <h4>Build with confidence</h4>
+        <p>
+          Continous Integration can help catch bugs by running your tests automatically,
+          while Continuous Deployment can help you deliver code to your product environment.
+        </p>
+        <a :href="helpPagePath" class="btn btn-info">
+          Get started with Pipelines
+        </a>
+      </div>
+    </div>
+  </div>
+</template>

app/assets/javascripts/vue_pipelines_index/components/error_state.js

-import pipelinesErrorStateSVG from 'empty_states/icons/_pipelines_failed.svg';
-
-export default {
-  template: `
-    <div class="row empty-state js-pipelines-error-state">
-      <div class="col-xs-12">
-        <div class="svg-content">
-          ${pipelinesErrorStateSVG}
-        </div>
-      </div>
-
-      <div class="col-xs-12 text-center">
-        <div class="text-content">
-          <h4>The API failed to fetch the pipelines.</h4>
-        </div>
-      </div>
-    </div>
-  `,
-};

app/assets/javascripts/vue_pipelines_index/components/error_state.vue

+<script>
+import pipelinesErrorStateSVG from 'empty_states/icons/_pipelines_failed.svg';
+
+export default {
+  data: () => ({ pipelinesErrorStateSVG }),
+};
+</script>
+
+<template>
+  <div class="row empty-state js-pipelines-error-state">
+    <div class="col-xs-12">
+      <div class="svg-content" v-html="pipelinesErrorStateSVG" />
+    </div>
+
+    <div class="col-xs-12 text-center">
+      <div class="text-content">
+        <h4>The API failed to fetch the pipelines.</h4>
+      </div>
+    </div>
+  </div>
+</template>

app/assets/javascripts/vue_pipelines_index/pipelines.js

@@ -4,8 +4,8 @@ import PipelinesService from './services/pipelines_service';
 import eventHub from './event_hub';
 import PipelinesTableComponent from '../vue_shared/components/pipelines_table';
 import TablePaginationComponent from '../vue_shared/components/table_pagination';
-import EmptyState from './components/empty_state';
-import ErrorState from './components/error_state';
+import EmptyState from './components/empty_state.vue';
+import ErrorState from './components/error_state.vue';
 import NavigationTabs from './components/navigation_tabs';
 import NavigationControls from './components/nav_controls';
 import Poll from '../lib/utils/poll';

app/assets/javascripts/vue_shared/components/pipelines_table_row.js

 /* eslint-disable no-param-reassign */
-import AsyncButtonComponent from '../../vue_pipelines_index/components/async_button';
+import AsyncButtonComponent from '../../vue_pipelines_index/components/async_button.vue';
 import PipelinesActionsComponent from '../../vue_pipelines_index/components/pipelines_actions';
 import PipelinesArtifactsComponent from '../../vue_pipelines_index/components/pipelines_artifacts';
 import PipelinesStatusComponent from '../../vue_pipelines_index/components/status';